/* =========================================================
   ALANDSG — Sistema de Design (v3)
   Baseado na referência enviada pelo cliente: fundo preto,
   gradiente laranja→rosa como assinatura única, cards com glow,
   seções centralizadas, botões com movimento.
   Fonte: Plus Jakarta Sans (única família, várias weights)
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,600&display=swap');

:root{
  --bg:#08080A;
  --surface:#151519;
  --surface-2:#1C1C22;
  --ink:#F6F6F8;
  --muted:#9C9CA8;
  --line:rgba(255,255,255,.09);

  --grad-a:#FF7A45;
  --grad-b:#FF2D6B;
  --gradient:linear-gradient(120deg, var(--grad-a), var(--grad-b));
  --accent:#FF5A55;
  --accent-ink:#FFFFFF;
  --glow: 0 0 60px -12px rgba(255,60,90,.55);
  --glow-soft: 0 0 40px -14px rgba(255,90,70,.4);

  --radius:18px;
  --radius-sm:10px;
  --measure:62ch;
  --container:1180px;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  font-size:16px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  position:relative;
}
body::before{
  content:'';
  position:fixed; inset:0; pointer-events:none; z-index:1; opacity:.4; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.3'/%3E%3C/svg%3E");
}
img{max-width:100%; display:block;}
a{color:inherit;}
.skip-link{
  position:absolute; left:-9999px; top:0; background:var(--accent); color:#fff;
  padding:10px 16px; z-index:200; font-weight:700;
}
.skip-link:focus{left:16px; top:16px;}
::selection{background:var(--grad-b); color:#fff;}

h1,h2,h3,h4{
  font-family:'Plus Jakarta Sans', sans-serif;
  font-weight:800;
  line-height:1.1;
  letter-spacing:-0.02em;
  text-wrap:balance;
  margin:0;
  color:var(--ink);
}
h1{font-size:clamp(2.6rem,6.5vw,4.6rem);}
h2{font-size:clamp(1.9rem,4vw,2.9rem);}
h3{font-size:clamp(1.2rem,2vw,1.4rem); font-weight:700;}
p{margin:0;}
.lede{font-size:clamp(1rem,1.4vw,1.15rem); color:var(--muted); max-width:var(--measure); line-height:1.7;}
.mono{font-family:'Plus Jakarta Sans', sans-serif; font-weight:600;}

.grad-text{
  background:var(--gradient); -webkit-background-clip:text; background-clip:text; color:transparent;
}
em{font-style:normal; font-weight:800;
  background:var(--gradient); -webkit-background-clip:text; background-clip:text; color:transparent;
}

.eyebrow{
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  background:var(--gradient); -webkit-background-clip:text; background-clip:text; color:transparent;
  display:inline-block;
  margin-bottom:14px;
}

:focus-visible{outline:2px solid var(--accent); outline-offset:3px;}

.container{max-width:var(--container); margin-inline:auto; padding-inline:24px; position:relative; z-index:2;}
@media (max-width:640px){ .container{padding-inline:18px;} }

section{padding-block:clamp(64px,10vw,120px); position:relative;}
.section-tight{padding-block:clamp(40px,6vw,72px);}

.section-head{max-width:640px; margin-inline:auto; text-align:center; margin-bottom:52px;}
.section-head .eyebrow{display:block;}
.section-head .lede{margin-inline:auto; margin-top:14px;}

.band{
  background:radial-gradient(120% 160% at 50% 0%, rgba(255,45,107,.35), transparent 60%), #16090C;
  color:#fff;
}
.surface{background:var(--surface);}
.surface-2{background:var(--surface-2);}

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  padding-block:18px;
  padding-top:calc(18px + env(safe-area-inset-top,0px));
  background:color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease, padding .3s ease;
}
.site-header.is-scrolled{border-bottom-color:var(--line); padding-block:12px; padding-top:calc(12px + env(safe-area-inset-top,0px));}
.site-header .container{display:flex; align-items:center; justify-content:space-between; gap:24px;}
.logo{
  font-weight:800; font-size:1.15rem;
  text-decoration:none; letter-spacing:-.01em; display:flex; align-items:baseline; gap:1px;
}
.logo span{background:var(--gradient); -webkit-background-clip:text; background-clip:text; color:transparent;}
.nav-desktop{display:flex; gap:30px; list-style:none; margin:0; padding:0; font-size:.92rem; font-weight:600;}
.nav-desktop a{text-decoration:none; position:relative; padding-block:4px; color:var(--muted); transition:color .2s ease;}
.nav-desktop a:hover, .nav-desktop a[aria-current="page"]{color:var(--ink);}
.nav-cta{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--gradient); color:#fff;
  padding:11px 22px; text-decoration:none; font-weight:700; font-size:.86rem;
  border-radius:99px; box-shadow:var(--glow-soft);
  transition:transform .2s ease, box-shadow .2s ease;
}
.nav-cta:hover{transform:translateY(-2px) scale(1.03); box-shadow:var(--glow);}
.nav-toggle{display:none; background:none; border:1px solid var(--line); border-radius:var(--radius-sm); padding:8px 10px; color:var(--ink);}
.nav-toggle svg{display:block;}

@media (max-width:880px){
  .nav-desktop{display:none;}
  .nav-toggle{display:inline-flex;}
  .nav-cta{display:none;}
}

.mobile-menu{
  display:none; position:fixed; inset:0; z-index:150; background:var(--bg);
  padding:24px; overflow-y:auto;
}
.mobile-menu.is-open{display:block;}
.mobile-menu .top-row{display:flex; justify-content:space-between; align-items:center; margin-bottom:48px;}
.mobile-menu ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px;}
.mobile-menu a{
  display:block; padding-block:16px; border-bottom:1px solid var(--line);
  font-size:1.7rem; font-weight:700; text-decoration:none;
}
.mobile-menu .foot{margin-top:40px; font-size:.85rem; color:var(--muted);}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:16px 28px; border-radius:99px;
  font-weight:700; font-size:.95rem; text-decoration:none;
  border:1.5px solid transparent; cursor:pointer;
  transition:transform .2s cubic-bezier(.2,.8,.3,1.4), box-shadow .25s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn-primary{background:var(--gradient); color:#fff; box-shadow:var(--glow-soft);}
.btn-primary:hover{transform:translateY(-3px) scale(1.03); box-shadow:var(--glow);}
.btn-outline{border-color:var(--line); color:var(--ink); background:rgba(255,255,255,.03);}
.btn-outline:hover{border-color:rgba(255,255,255,.35); transform:translateY(-3px);}
.band .btn-outline{border-color:rgba(255,255,255,.35); color:#fff;}
.btn-ghost{color:var(--ink); text-decoration:underline; text-decoration-color:var(--grad-b); text-underline-offset:5px; padding:16px 4px;}
.btn-arrow{transition:transform .2s ease;}
.btn:hover .btn-arrow{transform:translateX(4px);}

/* ---------- Grid / layout ---------- */
.grid{display:grid; gap:var(--gap,24px);}
.cols-2{grid-template-columns:repeat(2,1fr);}
.cols-3{grid-template-columns:repeat(3,1fr);}
.cols-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:900px){ .cols-3{grid-template-columns:repeat(2,1fr);} .cols-4{grid-template-columns:repeat(2,1fr);} }
@media (max-width:640px){ .cols-2,.cols-3,.cols-4{grid-template-columns:1fr;} }

.split{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
@media (max-width:820px){ .split{grid-template-columns:1fr; gap:32px;} }

/* ---------- Hero ---------- */
.hero{padding-block:clamp(72px,11vw,112px) clamp(56px,8vw,96px); overflow:hidden; text-align:center;}
.hero-head{max-width:820px; margin-inline:auto;}
.hero-glow{
  position:absolute; z-index:0; pointer-events:none; filter:blur(90px); opacity:.55;
  width:900px; height:500px; left:50%; top:-160px; transform:translateX(-50%);
  background:radial-gradient(closest-side, var(--grad-a), transparent 70%),
             radial-gradient(closest-side, var(--grad-b), transparent 70%);
  background-position:30% 50%, 70% 50%; background-repeat:no-repeat; background-size:60% 100%, 60% 100%;
}
.hero-badge{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--line); background:rgba(255,255,255,.04);
  padding:8px 18px; border-radius:99px; font-size:.82rem; font-weight:600; color:var(--muted);
  margin-bottom:28px;
}
.hero-badge .star{color:var(--grad-a);}
.hero-badge b{color:var(--ink); font-weight:700;}
.hero .lede{margin-inline:auto; margin-top:22px;}
.hero .row{justify-content:center; margin-top:34px;}
.hero-stats{
  display:flex; flex-wrap:wrap; justify-content:center; gap:48px;
  margin-top:64px; padding-top:32px; border-top:1px solid var(--line);
}
.hero-stat{text-align:center;}
.hero-stat b{
  display:block; font-size:2rem; font-weight:800;
  background:var(--gradient); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-stat span{font-size:.8rem; color:var(--muted);}

.floating-chip{
  position:absolute; bottom:18px; right:24px; z-index:3;
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(255,255,255,.05); border:1px solid var(--line); backdrop-filter:blur(8px);
  padding:8px 14px; border-radius:99px; font-size:.78rem; font-weight:600; color:var(--muted);
}
@media (max-width:640px){ .floating-chip{display:none;} }

/* ---------- Cards ---------- */
.card{
  background:var(--surface); border:1px solid var(--line);
  padding:28px; border-radius:var(--radius);
}

/* Serviços */
.service-card{
  padding:32px 28px;
  background:var(--surface); border:1px solid var(--line);
  display:flex; flex-direction:column; gap:14px; text-decoration:none; color:inherit;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  border-radius:var(--radius); position:relative;
}
.service-card:hover{transform:translateY(-6px); border-color:rgba(255,255,255,.2);}
.service-card.featured{
  background:var(--gradient); border-color:transparent; color:#fff; box-shadow:var(--glow-soft);
}
.service-card.featured:hover{box-shadow:var(--glow);}
.service-card.featured p, .service-card.featured .go{color:#fff !important;}
.service-card .badge-pill{
  position:absolute; top:20px; right:20px;
  background:rgba(255,255,255,.22); color:#fff; font-size:.72rem; font-weight:700;
  padding:5px 12px; border-radius:99px;
}
.service-card .icon-badge{
  width:48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.06); font-size:1.3rem;
}
.service-card.featured .icon-badge{background:rgba(255,255,255,.22);}
.service-card ul{margin:0; padding:0; list-style:none; font-size:.9rem; color:var(--muted); display:flex; flex-direction:column; gap:8px;}
.service-card.featured ul{color:rgba(255,255,255,.9);}
.service-card ul li{padding-left:22px; position:relative;}
.service-card ul li::before{content:'✓'; position:absolute; left:0; font-weight:800; color:var(--grad-a);}
.service-card.featured ul li::before{color:#fff;}
.service-card .go{margin-top:auto; font-weight:700; font-size:.86rem; display:flex; align-items:center; gap:8px; color:var(--grad-a);}

/* ---------- Portfolio ---------- */
.filter-tabs{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:40px;}
.filter-tab{
  border:1px solid var(--line); background:rgba(255,255,255,.03); color:var(--muted);
  padding:9px 20px; border-radius:99px; font-size:.85rem; font-weight:600; cursor:pointer;
  transition:all .2s ease;
}
.filter-tab.is-active{background:var(--gradient); color:#fff; border-color:transparent;}
.filter-tab:hover:not(.is-active){border-color:rgba(255,255,255,.3); color:var(--ink);}

.case-tile{
  aspect-ratio:4/5; border-radius:var(--radius); padding:22px;
  display:flex; flex-direction:column; justify-content:flex-end;
  text-decoration:none; position:relative; overflow:hidden;
  transition:transform .3s ease;
  background-size:cover; background-position:center;
}
.case-tile::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(0,0,0,.75) 10%, transparent 55%);
}
.case-tile:hover{transform:translateY(-6px);}
.case-tile .cat, .case-tile h3{position:relative; z-index:1; color:#fff;}
.case-tile .cat{font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; opacity:.85;}
.case-tile h3{font-size:1.3rem; margin-top:4px;}
.case-scroll{display:flex; gap:16px; overflow-x:auto; padding-bottom:12px; scroll-snap-type:x mandatory;}
.case-scroll .case-tile{min-width:230px; scroll-snap-align:start;}
.case-scroll::-webkit-scrollbar{height:6px;}
.case-scroll::-webkit-scrollbar-thumb{background:var(--line); border-radius:99px;}

/* ---------- Tags / badges ---------- */
.tag{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.72rem; font-weight:600; letter-spacing:.04em;
  padding:5px 12px; border:1px solid var(--line); border-radius:99px; color:var(--muted);
}

/* ---------- Testimonials ---------- */
.testi-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:28px; display:flex; flex-direction:column; gap:18px;
}
.stars{display:flex; gap:3px; color:var(--grad-a); font-size:1rem;}
.testi-card p{font-size:1.02rem; color:var(--ink); line-height:1.6;}
.testi-person{display:flex; align-items:center; gap:12px; margin-top:auto;}
.testi-avatar{
  width:40px; height:40px; border-radius:50%; background:var(--gradient);
  display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:.95rem; flex:none;
}
.testi-person b{display:block; font-size:.92rem;}
.testi-person span{font-size:.8rem; color:var(--muted);}

/* ---------- Process ---------- */
.process-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:32px; text-align:center; position:relative;}
@media (max-width:780px){ .process-grid{grid-template-columns:1fr;} }
.process-step .icon-badge{
  width:60px; height:60px; border-radius:50%; margin-inline:auto; margin-bottom:20px;
  display:flex; align-items:center; justify-content:center; font-size:1.5rem;
  background:var(--surface); border:1px solid var(--line);
}
.process-step h3{margin-bottom:8px;}
.process-step p{color:var(--muted); font-size:.94rem; max-width:32ch; margin-inline:auto;}

/* ---------- FAQ ---------- */
.faq-item{border-top:1px solid var(--line); padding-block:6px;}
.faq-item:last-child{border-bottom:1px solid var(--line);}
.faq-q{
  width:100%; text-align:left; background:none; border:none; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding-block:20px; font-weight:700; font-size:1.1rem; color:var(--ink);
}
.faq-q .plus{font-size:1.3rem; color:var(--grad-a); flex:none; transition:transform .25s ease;}
.faq-item[data-open="true"] .plus{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .3s ease;}
.faq-a p{padding-bottom:20px; color:var(--muted); max-width:65ch; font-size:.98rem;}

/* ---------- Forms ---------- */
.field{display:flex; flex-direction:column; gap:8px; margin-bottom:20px;}
.field label{font-size:.82rem; font-weight:700; letter-spacing:.02em;}
.field input, .field select, .field textarea{
  border:1px solid var(--line); background:var(--bg); color:var(--ink);
  padding:14px 16px; font-family:inherit; font-size:1rem; border-radius:var(--radius-sm);
}
.field input:focus, .field select:focus, .field textarea:focus{border-color:var(--grad-a); outline:none;}
.field textarea{resize:vertical; min-height:120px;}

/* ---------- Footer ---------- */
.site-footer{background:#050506; color:var(--ink); padding-block:56px 28px; border-top:1px solid var(--line);}
.site-footer .logo{color:var(--ink);}
.site-footer a{text-decoration:none;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; margin-bottom:48px;}
@media (max-width:780px){ .footer-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:480px){ .footer-grid{grid-template-columns:1fr;} }
.site-footer h4{font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:#6C6C76; margin-bottom:16px; font-weight:700;}
.site-footer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; font-size:.92rem; color:var(--muted); font-weight:500;}
.site-footer ul a:hover{color:var(--ink);}
.site-footer .bottom{
  border-top:1px solid var(--line); padding-top:24px;
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px;
  font-size:.78rem; color:#6C6C76;
}
.site-footer .bottom a:hover{color:var(--ink);}
.social-row{display:flex; gap:10px; margin-top:18px;}
.social-row a{
  width:36px; height:36px; border-radius:50%; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-size:.9rem; color:var(--muted);
  transition:all .2s ease;
}
.social-row a:hover{border-color:transparent; background:var(--gradient); color:#fff;}

/* ---------- Breadcrumb ---------- */
.crumbs{font-size:.8rem; color:var(--muted); margin-bottom:20px;}
.crumbs a{text-decoration:none; color:var(--muted);}
.crumbs a:hover{color:var(--grad-a);}

/* ---------- Misc ---------- */
.divider{height:1px; background:var(--line); border:none; margin:0;}
.center{text-align:center; margin-inline:auto;}
.stack{display:flex; flex-direction:column; gap:var(--gap,16px);}
.row{display:flex; gap:var(--gap,16px); flex-wrap:wrap; align-items:center;}
.mt-xl{margin-top:56px;}
.numbered{counter-reset:n;}
.numbered .n{counter-increment:n;}
.numbered .n::before{content:counter(n,decimal-leading-zero); font-weight:800; color:var(--grad-a); font-size:.8rem; margin-right:10px;}

body.reveal-ready [data-reveal]{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
body.reveal-ready [data-reveal].is-visible{opacity:1; transform:none;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; transition-duration:0.01ms !important;}
}