:root{
  --bg:#F5F4F8;
  --surface:#FFFFFF;
  --ink:#171521;
  --text-dim:#5B5768;
  --border:rgba(23,21,33,.12);
  --accent:#6D28D9;
  --accent-dark:#5B21B6;
  --accent-soft:#EEEAFB;
  --wa-green:#25D366;
  --wa-green-dark:#128C7E;
  --radius:16px;
  --container:1180px;
  --shadow-card: 0 1px 1px rgba(23,21,33,.03), 0 10px 24px -14px rgba(23,21,33,.22);
  --shadow-lift: 0 1px 1px rgba(23,21,33,.04), 0 26px 44px -20px rgba(109,40,217,.32);
  --ease: cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; scroll-padding-top:88px;}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Work Sans', system-ui, sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3{font-family:'Archivo', sans-serif; font-weight:800; letter-spacing:-.01em; line-height:1.1;}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
button{font:inherit; cursor:pointer;}
ul,ol{list-style:none;}

:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; box-shadow:0 0 0 5px rgba(109,40,217,.18);}

::selection{background:var(--accent); color:#fff;}

/* Real touch feedback (from shadcn/ui's own tap-state rule): instant opacity
   dip on press, only on touch devices — desktop keeps its hover/press animation. */
@media (pointer: coarse){
  a:active, button:active{opacity:.6;}
}

.container{width:100%; max-width:var(--container); margin:0 auto; padding:0 24px;}

/* Progress bar */
.progress-track{position:fixed; top:0; left:0; right:0; height:3px; z-index:300; pointer-events:none;}
.progress-bar{height:100%; width:0%; background:var(--accent); transform-origin:left;}

/* Header */
.header{position:fixed; top:0; left:0; right:0; z-index:100; background:rgba(245,244,248,.85); backdrop-filter:blur(12px); border-bottom:1px solid transparent; transition:border-color .3s ease, box-shadow .3s ease;}
.header.scrolled{border-color:var(--border); box-shadow:0 4px 24px -16px rgba(23,21,33,.3);}
.header-inner{display:flex; align-items:center; gap:28px; height:76px;}
.brand{display:flex; align-items:center; gap:10px; flex:none;}
.brand-logo{width:34px; height:34px; border-radius:50%; object-fit:cover; border:1px solid var(--border);}
.brand-name{font-family:'Archivo', sans-serif; font-size:18px; font-weight:800;}
.brand-name em{color:var(--accent); font-style:normal;}

.nav{flex:1; display:flex; justify-content:center;}
.nav-links{position:relative; display:flex; align-items:center; gap:6px;}
.nav-links a{position:relative; z-index:2; padding:9px 16px; font-size:14.5px; font-weight:600; color:var(--text-dim); transition:color .2s ease;}
.nav-links a.is-active, .nav-links a:hover{color:var(--ink);}
.nav-indicator{position:absolute; top:0; left:0; height:100%; background:var(--surface); border:1px solid var(--border); border-radius:999px; box-shadow:var(--shadow-card); z-index:1; opacity:0;}

.header-cta{flex:none;}
.nav-toggle{display:none; flex:none; flex-direction:column; align-items:center; justify-content:center; gap:5px; width:40px; height:40px; background:none; border:none; margin-left:auto;}
.nav-toggle span{width:20px; height:1.5px; background:var(--ink); border-radius:2px; transition:transform .3s ease, opacity .2s ease;}
.nav-toggle.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.nav-toggle.open span:nth-child(2){opacity:0;}
.nav-toggle.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:15px 28px; border-radius:999px; font-weight:700; font-size:15px; transition:background .2s ease, border-color .2s ease, color .2s ease;}
.btn-dark{background:var(--ink); color:#fff;}
.btn-dark:hover{background:var(--accent);}
.btn-outline{background:transparent; border:1.5px solid var(--border); color:var(--ink);}
.btn-outline:hover{border-color:var(--accent); color:var(--accent);}
.btn-sm{padding:11px 20px; font-size:14px;}
.btn-block{width:100%;}

/* Kicker */
.kicker{font-size:13.5px; font-weight:700; color:var(--accent); text-transform:uppercase; letter-spacing:.08em; margin-bottom:18px;}

/* Hero */
.hero{padding:150px 24px 100px; position:relative;}
.hero h1{font-size:clamp(34px, 5.2vw, 64px); margin-bottom:22px; max-width:820px;}
.hero-sub{font-size:19px; color:var(--text-dim); max-width:560px; margin-bottom:34px;}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:48px;}
.hero-stats{display:flex; gap:40px; flex-wrap:wrap;}
.hero-stats dt{font-family:'Archivo', sans-serif; font-size:26px; font-weight:800; color:var(--ink);}
.hero-stats dd{font-size:13px; color:var(--text-dim);}

/* Sections */
section{padding:110px 24px;}
.section-head{max-width:600px; margin-bottom:52px;}
.section-head h2{font-size:clamp(28px, 3.4vw, 40px); margin-bottom:14px;}
.section-head p{font-size:16.5px; color:var(--text-dim);}

/* Projetos */
.projetos{background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border);}
.filters{display:flex; gap:10px; margin-bottom:40px; flex-wrap:wrap;}
.filter-chip{padding:10px 18px; border-radius:999px; border:1.5px solid var(--border); background:transparent; font-size:14px; font-weight:600; color:var(--text-dim); transition:border-color .2s ease, color .2s ease, background .2s ease;}
.filter-chip:hover{border-color:var(--accent); color:var(--accent);}
.filter-chip.is-active{background:var(--ink); border-color:var(--ink); color:#fff;}

.project-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:32px;}
.project-card{display:block;}
.project-frame{position:relative; border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); box-shadow:var(--shadow-card); margin-bottom:18px; transition:box-shadow .3s ease;}
.project-frame img{width:100%; aspect-ratio:4/3; object-fit:cover; object-position:top; transition:transform .6s var(--ease);}
.project-card:hover .project-frame{box-shadow:var(--shadow-lift);}
.project-card:hover .project-frame img{transform:scale(1.04);}
.project-live{position:absolute; top:12px; right:12px; display:inline-flex; align-items:center; gap:6px; background:rgba(23,21,33,.75); backdrop-filter:blur(6px); color:#fff; font-size:11.5px; font-weight:600; padding:6px 12px; border-radius:999px;}
.live-dot{width:6px; height:6px; border-radius:50%; background:var(--wa-green);}
.project-tag{display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--accent); background:var(--accent-soft); padding:5px 12px; border-radius:999px; margin-bottom:12px;}
.project-body h3{font-size:20px; margin-bottom:8px;}
.project-body p{font-size:14.5px; color:var(--text-dim); margin-bottom:12px; line-height:1.55;}
.project-link{font-size:14px; font-weight:700; color:var(--accent);}
.empty-state{color:var(--text-dim); font-size:15px; padding:20px 0;}
.empty-state a{color:var(--accent); font-weight:700;}

/* Processo */
.processo{background:var(--bg);}
.steps{display:grid; grid-template-columns:repeat(4, 1fr); gap:0; position:relative;}
.steps::before{content:''; position:absolute; top:15px; left:0; right:0; height:1px; background:var(--border);}
.steps li{position:relative; padding-right:24px;}
.step-index{display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; background:var(--ink); color:#fff; font-family:'Archivo',sans-serif; font-size:12px; font-weight:800; margin-bottom:22px; position:relative; z-index:2;}
.steps li h3{font-size:18px; margin-bottom:8px;}
.steps li p{font-size:14.5px; color:var(--text-dim); line-height:1.6;}

/* Pacotes */
.pacotes{background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border);}
.pricing-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:24px; align-items:stretch;}
.price-card{position:relative; display:flex; flex-direction:column; border:1px solid var(--border); border-radius:var(--radius); padding:34px 28px; background:var(--bg); box-shadow:var(--shadow-card); transition:transform .3s var(--ease);}
.price-card-featured{border-color:var(--accent); background:var(--surface); box-shadow:var(--shadow-lift);}
.price-ribbon{position:absolute; top:-12px; left:28px; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; background:var(--accent); padding:6px 14px; border-radius:999px; overflow:hidden;}
.price-ribbon-text{
  color:#fff;
  background-image:linear-gradient(100deg, #fff 30%, #E4D4FF 45%, #fff 58%, #fff 100%);
  background-size:250% 100%;
  background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  animation:ribbon-shimmer 3.4s ease-in-out infinite;
}
@keyframes ribbon-shimmer{
  0%{background-position:200% 0;}
  55%, 100%{background-position:-40% 0;}
}
@media (prefers-reduced-motion: reduce){
  .price-ribbon-text{animation:none; background-image:none; -webkit-text-fill-color:#fff; color:#fff;}
}
.price-card h3{font-size:22px; margin-bottom:10px;}
.price-desc{font-size:14.5px; color:var(--text-dim); margin-bottom:18px; line-height:1.55;}
.price-tag{display:inline-block; align-self:flex-start; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--accent); background:var(--accent-soft); padding:5px 12px; border-radius:999px; margin-bottom:22px;}
.price-card ul{display:flex; flex-direction:column; gap:12px; margin-bottom:26px; flex:1;}
.price-card li{position:relative; padding-left:24px; font-size:14.5px; line-height:1.5;}
.price-card li::before{content:'✓'; position:absolute; left:0; top:0; color:var(--accent); font-weight:700;}

/* FAQ */
.faq{background:var(--bg);}
.faq-grid{display:grid; grid-template-columns:0.85fr 1.15fr; gap:56px; align-items:start;}
.faq-head p{margin-bottom:24px;}
.faq-list{display:flex; flex-direction:column; gap:12px;}
.faq-item{background:var(--surface); border:1px solid var(--border); border-radius:14px; overflow:hidden; box-shadow:var(--shadow-card);}
.faq-question{width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; background:none; border:none; padding:20px 22px; font-size:15.5px; font-weight:700; color:var(--ink); text-align:left;}
.faq-icon{flex:none; position:relative; width:22px; height:22px;}
.faq-icon::before, .faq-icon::after{content:''; position:absolute; top:50%; left:50%; background:var(--accent); transform:translate(-50%,-50%);}
.faq-icon::before{width:14px; height:2px;}
.faq-icon::after{width:2px; height:14px; transition:transform .3s var(--ease), opacity .3s ease;}
.faq-item.is-open .faq-icon::after{transform:translate(-50%,-50%) rotate(90deg); opacity:0;}
.faq-answer{overflow:hidden; height:0; transition:height .35s var(--ease);}
@media (prefers-reduced-motion: reduce){
  .faq-answer{transition:none;}
}
.faq-answer p{padding:0 22px 20px; color:var(--text-dim); font-size:15px; line-height:1.65;}

/* Sobre */
.sobre{background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border);}
.sobre-inner{display:grid; grid-template-columns:auto 1fr; gap:52px; align-items:center;}
.sobre-avatar{width:180px; height:180px; border-radius:50%; object-fit:cover; border:1px solid var(--border); box-shadow:var(--shadow-card);}
.sobre h2{font-size:clamp(28px,3.4vw,40px); margin-bottom:18px;}
.sobre p{font-size:16.5px; color:var(--text-dim); max-width:600px; margin-bottom:16px; line-height:1.65;}
.sobre .btn{margin-top:10px;}

/* Contato */
.contato{background:var(--bg);}
.contato-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start;}
.contato h2{font-size:clamp(28px,3.4vw,40px); margin-bottom:16px;}
.contato p{font-size:16.5px; color:var(--text-dim); margin-bottom:24px; max-width:440px; line-height:1.6;}
.footer-instagram{font-weight:700; color:var(--accent);}

.contato-form{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:32px; display:flex; flex-direction:column; gap:18px; box-shadow:var(--shadow-card);}
.contato-form label{display:flex; flex-direction:column; gap:8px; font-size:13px; font-weight:700; color:var(--text-dim);}
.contato-form input{font:inherit; font-size:15px; color:var(--ink); background:var(--bg); border:1px solid var(--border); border-radius:12px; padding:13px 16px; transition:border-color .2s ease;}
.contato-form input:focus{outline:none; border-color:var(--accent);}
.contato-form .btn{margin-top:6px;}

/* Footer */
.footer{border-top:1px solid var(--border); padding:32px 24px; background:var(--surface);}
.footer-inner{max-width:var(--container); margin:0 auto; display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; font-size:14px; color:var(--text-dim);}
.footer-inner a{color:var(--text-dim); font-weight:600; transition:color .2s ease;}
.footer-inner a:hover{color:var(--accent);}

/* WhatsApp FAB */
.whatsapp-fab{position:fixed; bottom:26px; right:26px; z-index:150; width:58px; height:58px; border-radius:50%; background:var(--wa-green); display:flex; align-items:center; justify-content:center; box-shadow:0 16px 34px -14px rgba(37,211,102,.75); transition:transform .2s ease;}
.whatsapp-fab:hover{transform:scale(1.08);}
.whatsapp-fab svg{width:28px; height:28px; fill:#fff;}

/* Reveal state: no default hidden CSS — JS applies opacity via WAAPI,
   so content stays visible if the script fails to load. */

/* Responsive */
@media (max-width: 980px){
  .nav{display:none;}
  .nav.mobile-open{
    display:flex; position:fixed; top:74px; left:16px; right:16px;
    background:var(--surface); border:1px solid var(--border); border-radius:16px;
    box-shadow:var(--shadow-lift); padding:8px;
  }
  .nav.mobile-open .nav-links{flex-direction:column; align-items:stretch; gap:2px; width:100%;}
  .nav.mobile-open .nav-links a{padding:14px 16px;}
  .nav-indicator{display:none;}
  .nav-toggle{display:flex;}
  .hero-grid{text-align:center; margin-left:auto; margin-right:auto;}
  .hero-sub{margin-left:auto; margin-right:auto;}
  .hero-actions, .hero-stats{justify-content:center;}
  .steps{grid-template-columns:repeat(2,1fr); gap:32px 24px;}
  .steps::before{display:none;}
  .faq-grid{grid-template-columns:1fr;}
  .sobre-inner{grid-template-columns:1fr; text-align:center; justify-items:center;}
  .sobre p{margin-left:auto; margin-right:auto;}
  .contato-grid{grid-template-columns:1fr;}
}

@media (max-width: 600px){
  .header-cta{display:none;}
}

@media (max-width: 640px){
  section{padding:72px 24px;}
  .hero{padding:126px 24px 64px;}
  .pricing-grid, .project-grid{grid-template-columns:1fr;}
  .steps{grid-template-columns:1fr;}
  .footer-inner{flex-direction:column; text-align:center;}
  .whatsapp-fab{width:52px; height:52px; bottom:18px; right:18px;}
  .whatsapp-fab svg{width:24px; height:24px;}
}