/* ============================================================
   SYM Gente e Gestão — Dani Athia
   Direção: cinematográfica dark-first, colmeia/Sympatheia
   Paleta e tipografia preservadas da marca real.
   Feito por Impero Solutions
   ============================================================ */

:root{
  --cream:#FBF7F4; --cream-2:#F3EAE3; --greige:#E7DEDA;
  --ink:#2C2421; --ink-soft:#4A3F39; --taupe:#7E6F67;
  --espresso:#201815; --espresso-2:#2B211C;
  --clay:#BA715E; --clay-deep:#9C5A45; --copper:#CE9077; --copper-2:#A75E45;
  --wine:#8A323B; --wine-deep:#2A1013; --rose:#DCB1A3;
  --on-dark:#F6EEE8; --on-dark-dim:rgba(246,238,232,.72); --on-dark-faint:rgba(246,238,232,.16);

  --serif:"Playfair Display", Georgia, serif;
  --sans:"DM Sans", system-ui, -apple-system, sans-serif;

  --maxw:1240px;
  --pad:clamp(20px,5vw,84px);
  --grad-copper:linear-gradient(135deg,#D69C82 0%,#BA715E 48%,#A75E45 100%);

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-expo:cubic-bezier(.16,1,.3,1);

  /* z-index semantic scale */
  --z-base:1; --z-fab:700; --z-nav:800; --z-progress:850; --z-cursor:900; --z-loader:1000;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--sans); background:var(--espresso); color:var(--ink);
  line-height:1.6; overflow-x:hidden; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--clay); color:var(--cream); }
:focus-visible{ outline:2px solid var(--clay); outline-offset:3px; border-radius:2px; }

h1,h2,h3{ font-family:var(--serif); font-weight:600; line-height:1.04; letter-spacing:-.02em; text-wrap:balance; }
h1 em,h2 em,h3 em{ font-style:italic; font-weight:500; }
p{ text-wrap:pretty; }

/* ---------- kicker (brand device, sentence-case, hex mark) ---------- */
.kicker{ display:inline-flex; align-items:center; gap:.55em; font-size:.82rem; font-weight:600;
  letter-spacing:.01em; color:var(--clay-deep); margin-bottom:16px; }
.kicker::before{ content:""; width:9px; height:8px; background:var(--clay);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); flex:0 0 auto; }
.kicker--light{ color:var(--copper); }

/* ---------- buttons ---------- */
.btn{ position:relative; display:inline-flex; align-items:center; gap:.55em; font-family:var(--sans);
  font-size:.92rem; font-weight:600; padding:.95em 1.7em; border-radius:100px; cursor:pointer;
  border:1px solid transparent; white-space:nowrap; min-height:44px;
  transition:transform .5s var(--ease), background .4s var(--ease), color .4s var(--ease), box-shadow .5s var(--ease), border-color .4s var(--ease); will-change:transform; }
.btn--solid{ background:var(--grad-copper); color:#fff; box-shadow:0 12px 30px -12px rgba(167,94,69,.7); }
.btn--solid:hover{ box-shadow:0 20px 46px -14px rgba(167,94,69,.85); transform:translateY(-2px); }
.btn--line{ background:transparent; color:var(--ink); border-color:rgba(44,36,33,.28); }
.btn--line:hover{ background:var(--ink); color:var(--cream); border-color:var(--ink); }
.btn--onlight{ color:var(--on-dark); border-color:var(--on-dark-faint); }
.btn--onlight:hover{ background:var(--cream); color:var(--ink); border-color:var(--cream); }
.btn--nav{ padding:.68em 1.3em; font-size:.84rem; }
.btn--block{ width:100%; justify-content:center; padding:1.05em; font-size:1rem; }
/* buttons on the dark hero */
.hero .btn--line{ color:var(--on-dark); border-color:var(--on-dark-faint); }
.hero .btn--line:hover{ background:var(--on-dark); color:var(--espresso); border-color:var(--on-dark); }

/* ============================================================ LOADER */
.loader{ position:fixed; inset:0; z-index:var(--z-loader); background:var(--espresso);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px; color:var(--copper);
  transition:opacity .8s var(--ease), visibility .8s; }
.loader.done{ opacity:0; visibility:hidden; }
.loader__hive{ position:relative; width:120px; height:104px; }
.loader__hex{ position:absolute; inset:0; width:120px; height:104px; opacity:0; animation:hexIn .9s var(--ease) forwards; }
.loader__hex--2{ animation-name:hexIn2; animation-delay:.15s; color:var(--clay); }
.loader__hex--3{ animation-name:hexIn3; animation-delay:.3s; color:var(--rose); }
@keyframes hexIn{ from{opacity:0; transform:scale(1.4) rotate(-12deg);} to{opacity:1;} }
@keyframes hexIn2{ from{opacity:0; transform:scale(.9) rotate(10deg);} to{opacity:.85; transform:scale(.62);} }
@keyframes hexIn3{ from{opacity:0; transform:scale(.1);} to{opacity:.6; transform:scale(.32);} }
.loader__word{ font-family:var(--serif); font-size:1.6rem; letter-spacing:.5em; padding-left:.5em; color:var(--cream);
  opacity:0; animation:fadeUp .8s var(--ease) .5s forwards; }
@keyframes fadeUp{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;} }

/* ============================================================ CURSOR (transform/box-shadow only) */
.cursor{ position:fixed; top:0; left:0; width:12px; height:12px; border:1.5px solid var(--clay); border-radius:50%;
  pointer-events:none; z-index:var(--z-cursor); transform:translate(-50%,-50%); opacity:0;
  transition:box-shadow .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease); mix-blend-mode:multiply; }
.cursor.active{ box-shadow:0 0 0 20px rgba(186,113,94,.14); border-color:transparent; }
@media (hover:none),(pointer:coarse){ .cursor{ display:none; } }

/* ============================================================ SCROLL PROGRESS (scaleX, no width anim) */
.scroll-progress{ position:fixed; top:0; left:0; height:3px; width:100%; z-index:var(--z-progress);
  background:var(--grad-copper); transform:scaleX(0); transform-origin:left; transition:transform .1s linear; }

/* ============================================================ NAV */
.nav{ position:fixed; top:0; left:0; width:100%; z-index:var(--z-nav);
  transition:transform .5s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease); color:var(--ink); }
.nav--onhero{ color:var(--on-dark); }
.nav.scrolled{ background:rgba(251,247,244,.85); backdrop-filter:blur(14px); box-shadow:0 1px 0 rgba(44,36,33,.08); color:var(--ink); }
.nav.hide{ transform:translateY(-115%); }
.nav__inner{ max-width:var(--maxw); margin:0 auto; padding:18px var(--pad); display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand{ display:inline-flex; align-items:center; gap:12px; color:inherit; }
.brand__hex{ width:34px; height:30px; color:var(--clay); flex:0 0 auto; }
.brand__hex svg{ width:100%; height:100%; }
.brand__type{ display:flex; flex-direction:column; line-height:1; }
.brand__mark{ font-family:var(--serif); font-weight:700; font-size:1.35rem; letter-spacing:.12em; color:currentColor; }
.brand__sub{ font-size:.6rem; letter-spacing:.32em; text-transform:uppercase; color:var(--rose); margin-top:3px; }
.nav.scrolled .brand__sub{ color:var(--taupe); }
.nav__links{ display:flex; gap:30px; margin-left:auto; margin-right:8px; }
.nav__links a{ font-size:.85rem; font-weight:500; position:relative; padding:4px 0; opacity:.9; }
.nav__links a::after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:1.5px; background:currentColor;
  transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease); }
.nav__links a:hover{ opacity:1; } .nav__links a:hover::after{ transform:scaleX(1); }
.nav__burger{ display:none; background:none; border:none; cursor:pointer; width:44px; height:44px; flex-direction:column; align-items:center; justify-content:center; gap:6px; color:inherit; }
.nav__burger span{ display:block; height:2px; width:24px; background:currentColor; transition:transform .35s var(--ease), opacity .35s; }
.nav__burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(4px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2){ transform:translateY(-4px) rotate(-45deg); }
.nav__mobile{ display:none; background:rgba(251,247,244,.98); backdrop-filter:blur(14px);
  grid-template-rows:0fr; transition:grid-template-rows .5s var(--ease); }
.nav__mobile.open{ grid-template-rows:1fr; }
.nav__mobile-inner{ overflow:hidden; min-height:0; display:flex; flex-direction:column; padding:0 var(--pad); }
.nav__mobile.open .nav__mobile-inner{ padding:8px var(--pad) 26px; }
.nav__mobile a{ padding:13px 0; border-bottom:1px solid rgba(44,36,33,.08); font-size:1rem; color:var(--ink); }
.nav__mobile .btn{ margin-top:14px; justify-content:center; }

/* ============================================================ HERO (dark, drenched) */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; padding:150px var(--pad) 90px;
  background:var(--espresso); color:var(--on-dark); overflow:hidden; }
.hero__bg{ position:absolute; inset:0; z-index:0; background:url("/images/hero-honeycomb.webp") center right/cover no-repeat;
  transform:scale(1.08); animation:heroZoom 22s ease-in-out infinite alternate; }
@keyframes heroZoom{ from{ transform:scale(1.08);} to{ transform:scale(1.18);} }
.hero__scrim{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(94deg, rgba(24,18,15,.94) 8%, rgba(24,18,15,.78) 42%, rgba(24,18,15,.20) 78%, rgba(24,18,15,.55) 100%),
             linear-gradient(0deg, rgba(24,18,15,.85), rgba(24,18,15,0) 40%); }
.hero__inner{ position:relative; z-index:2; max-width:var(--maxw); margin:0 auto; width:100%; }
.hero__loc{ font-size:.82rem; letter-spacing:.02em; color:var(--rose); margin-bottom:22px; display:flex; align-items:center; gap:.6em; }
.hero__loc::before{ content:""; width:26px; height:1px; background:var(--copper); }
.hero__title{ font-size:clamp(2.9rem,8vw,6rem); font-weight:700; color:#fff; margin-bottom:26px; max-width:16ch; }
.hero__title em{ color:var(--copper); }
.reveal-line{ display:block; overflow:hidden; padding-bottom:.04em; }
.reveal-line>span{ display:block; transform:translateY(110%); transition:transform 1s var(--ease); }
.hero.in .reveal-line>span{ transform:translateY(0); }
.hero.in .reveal-line:nth-child(2)>span{ transition-delay:.12s; }
.hero__sub{ font-size:clamp(1.05rem,1.6vw,1.28rem); max-width:52ch; color:var(--on-dark-dim); margin-bottom:36px; line-height:1.65; }
.hero__cta{ display:flex; gap:14px; flex-wrap:wrap; }
.hero__scroll{ position:absolute; left:var(--pad); bottom:30px; z-index:2; display:flex; align-items:center; gap:14px;
  font-family:var(--serif); font-style:italic; font-size:1rem; color:var(--rose); }
.hero__scroll-line{ width:60px; height:1px; background:linear-gradient(90deg,var(--copper),transparent); transform-origin:left; animation:linePulse 2.4s ease-in-out infinite; }
@keyframes linePulse{ 0%,100%{ transform:scaleX(.4); opacity:.4;} 50%{ transform:scaleX(1); opacity:1;} }

/* ============================================================ TICKER */
.ticker{ background:var(--wine-deep); color:var(--on-dark); padding:20px 0; overflow:hidden; border-top:1px solid rgba(206,144,119,.16); }
.ticker__track{ display:flex; align-items:center; gap:38px; width:max-content; animation:scrollx 30s linear infinite; }
.ticker__track span{ font-family:var(--serif); font-style:italic; font-size:1.45rem; white-space:nowrap; color:var(--on-dark); }
.ticker__track i{ color:var(--clay); font-style:normal; font-size:.85rem; }
@keyframes scrollx{ to{ transform:translateX(-50%);} }

/* ============================================================ PROPÓSITO */
.purpose{ background:var(--cream);
  padding:clamp(80px,12vw,150px) max(var(--pad), calc((100% - var(--maxw)) / 2));
  display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(36px,6vw,84px); align-items:center; }
.purpose__media{ position:relative; }
.purpose__media img{ width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:10px 10px 130px 10px; box-shadow:0 40px 80px -34px rgba(44,36,33,.5); }
.purpose__badge{ position:absolute; top:-24px; right:-22px; width:96px; height:84px; color:var(--clay); opacity:.8; animation:spin 30s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg);} }
.purpose__copy{ max-width:560px; }
.purpose__word{ font-family:var(--serif); font-style:italic; font-weight:500; font-size:clamp(2.8rem,6vw,4.8rem);
  color:var(--clay-deep); line-height:1; margin-bottom:10px; }
.purpose__pron{ font-family:var(--serif); font-size:clamp(1.4rem,2.4vw,2rem); color:var(--ink); margin-bottom:26px; line-height:1.2; }
.purpose__copy p:not(.purpose__pron){ font-size:1.08rem; color:var(--ink-soft); margin-bottom:18px; max-width:52ch; }
.purpose__copy strong{ color:var(--clay-deep); font-weight:600; }

/* ============================================================ SOLUÇÕES (bento assimétrico) */
.solutions{ background:var(--cream-2); padding:clamp(70px,10vw,120px) var(--pad); }
.solutions__head{ max-width:var(--maxw); margin:0 auto 48px; }
.solutions__head h2{ font-size:clamp(1.9rem,4vw,3.1rem); color:var(--ink); max-width:22ch; }
.solutions__head em{ color:var(--clay); }
.bento{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:repeat(6,1fr); gap:16px; }
.tile{ position:relative; background:var(--cream); border:1px solid rgba(44,36,33,.07); border-radius:18px; padding:32px 30px;
  overflow:hidden; grid-column:span 3; display:flex; flex-direction:column; justify-content:flex-end; min-height:220px;
  transition:transform .55s var(--ease), box-shadow .55s var(--ease), border-color .4s; }
.tile--feature{ grid-column:span 3; grid-row:span 2; background:var(--espresso); color:var(--on-dark); border-color:transparent; justify-content:space-between; }
.tile--wide{ grid-column:span 3; }
.tile:hover{ transform:translateY(-6px); box-shadow:0 34px 60px -30px rgba(167,94,69,.5); }
.tile__k{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--clay); font-weight:600; }
.tile--feature .tile__k{ color:var(--copper); }
.tile h3{ font-size:1.4rem; margin:12px 0 10px; color:var(--ink); }
.tile--feature h3{ color:#fff; font-size:1.7rem; margin-top:auto; }
.tile p{ font-size:.98rem; color:var(--ink-soft); }
.tile--feature p{ color:var(--on-dark-dim); }
.tile__hex{ position:absolute; top:-24px; right:-22px; width:120px; height:104px; color:rgba(206,144,119,.14); }
.tile__hex svg{ width:100%; height:100%; } .tile__hex polygon{ fill:currentColor; }
.tile__top{ margin-bottom:auto; }

/* ============================================================ MÉTODO (dark + network) */
.method{ position:relative; background:var(--espresso); color:var(--on-dark); padding:clamp(74px,10vw,130px) var(--pad); overflow:hidden; }
.method__bg{ position:absolute; inset:0; z-index:0; background:url("/images/method-network.webp") center/cover no-repeat; opacity:.22;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent); mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent); }
.method__grid{ position:relative; z-index:1; max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(38px,6vw,90px); align-items:start; }
.method__intro{ position:sticky; top:110px; }
.method__intro h2{ font-size:clamp(1.9rem,3.4vw,2.8rem); color:#fff; margin-bottom:20px; }
.method__intro p{ color:var(--on-dark-dim); margin-bottom:28px; max-width:34ch; }
.steps{ list-style:none; counter-reset:step; }
.step{ display:flex; gap:26px; padding:30px 0; border-top:1px solid var(--on-dark-faint); counter-increment:step; }
.step:last-child{ border-bottom:1px solid var(--on-dark-faint); }
.step::before{ content:counter(step, decimal-leading-zero); font-family:var(--serif); font-size:1.7rem; color:var(--copper); flex:0 0 auto; width:52px; line-height:1.1; }
.step__body h3{ font-size:1.4rem; margin-bottom:8px; color:#fff; }
.step__body p{ color:var(--on-dark-dim); font-size:1rem; max-width:46ch; }

/* ============================================================ DANI */
.dani{ background:var(--cream); display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(36px,6vw,84px); align-items:center;
  padding:clamp(74px,11vw,140px) max(var(--pad), calc((100% - var(--maxw)) / 2)); }
.dani__media{ position:relative; }
.dani__frame{ border-radius:130px 12px 12px 12px; overflow:hidden; box-shadow:0 44px 90px -36px rgba(44,36,33,.6); aspect-ratio:4/5; }
.dani__frame img{ width:100%; height:100%; object-fit:cover; object-position:70% center; filter:saturate(.92) contrast(1.02); }
.dani__cap{ position:absolute; left:22px; bottom:22px; color:var(--cream); text-shadow:0 2px 20px rgba(0,0,0,.5); }
.dani__cap-name{ display:block; font-family:var(--serif); font-size:1.3rem; }
.dani__cap-role{ display:block; font-size:.76rem; letter-spacing:.04em; opacity:.9; }
.dani__name{ font-size:clamp(2.6rem,5vw,4rem); color:var(--ink); margin-bottom:8px; }
.dani__role{ font-size:.9rem; color:var(--clay-deep); font-weight:600; margin-bottom:24px; }
.dani__copy>p{ color:var(--ink-soft); font-size:1.08rem; max-width:52ch; }
.dani__copy strong{ color:var(--ink); }
.dani__facts{ list-style:none; margin:26px 0 30px; display:flex; flex-direction:column; gap:12px; }
.dani__facts li{ display:flex; align-items:center; gap:12px; font-size:1rem; color:var(--ink-soft); }
.dani__facts li::before{ content:""; width:11px; height:10px; background:var(--clay); flex:0 0 auto;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); }
.dani__cta{ display:flex; gap:14px; flex-wrap:wrap; }

/* ============================================================ RESULTADOS (dark, editorial — sem template SaaS) */
.results{ background:var(--wine-deep); color:var(--on-dark); padding:clamp(74px,10vw,120px) var(--pad); }
.results__inner{ max-width:var(--maxw); margin:0 auto; }
.results__lead{ max-width:900px; margin-bottom:60px; }
.results__statement{ font-family:var(--serif); font-size:clamp(1.6rem,3.4vw,2.6rem); line-height:1.28; color:var(--on-dark); font-weight:500; }
.results__hl{ color:var(--copper); font-style:italic; white-space:nowrap; }
.results__clients-label{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--rose); margin-bottom:24px; }
.clients{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); }
.clients__track{ display:flex; gap:44px; width:max-content; align-items:center; animation:scrollx 44s linear infinite; }
.clients__track span{ font-family:var(--serif); font-size:1.35rem; color:rgba(246,238,232,.5); white-space:nowrap; transition:color .3s; }
.clients__track span:hover{ color:var(--copper); }

/* ============================================================ DEPOIMENTOS */
.quotes{ background:var(--cream); padding:clamp(70px,10vw,120px) var(--pad); }
.quotes__head{ max-width:var(--maxw); margin:0 auto 40px; }
.quotes__grid{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.quote{ position:relative; padding:8px 0; }
.quote blockquote{ font-family:var(--serif); font-style:italic; font-size:clamp(1.3rem,2vw,1.65rem); line-height:1.42; color:var(--ink); }
.quote blockquote::before{ content:"“"; font-family:var(--serif); font-size:2.4em; line-height:0; color:var(--clay); vertical-align:-.35em; margin-right:.08em; }
.quote figcaption{ margin-top:24px; padding-left:2px; }
.quote__name{ display:block; font-weight:600; color:var(--ink); }
.quote__org{ display:block; font-size:.88rem; color:var(--taupe); margin-top:2px; }

/* ============================================================ CTA (drenched) */
.cta{ position:relative; color:#fff; overflow:hidden; background:var(--espresso); }
.cta__bg{ position:absolute; inset:0; z-index:0; background:url("/images/cta-particles.webp") center/cover no-repeat; }
.cta__scrim{ position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(32,24,21,.72), rgba(42,16,19,.82)); }
.cta__inner{ position:relative; z-index:2; max-width:720px; margin:0 auto; padding:clamp(74px,10vw,120px) var(--pad); text-align:center; }
.cta__title{ font-size:clamp(2.2rem,5vw,3.7rem); color:#fff; margin-bottom:18px; }
.cta__title em{ color:var(--copper); }
.cta__sub{ font-size:1.1rem; color:var(--on-dark-dim); max-width:46ch; margin:0 auto 40px; }
.cta__form{ text-align:left; background:rgba(32,24,21,.5); backdrop-filter:blur(10px); border:1px solid rgba(246,238,232,.16); border-radius:20px; padding:28px; }
.cta__row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }
.cta__form input, .cta__form textarea{ width:100%; font-family:var(--sans); font-size:1rem; padding:14px 16px; border-radius:11px;
  border:1px solid rgba(246,238,232,.22); background:rgba(251,247,244,.96); color:var(--ink); }
.cta__form textarea{ resize:vertical; margin-bottom:14px; }
.cta__form input::placeholder, .cta__form textarea::placeholder{ color:var(--taupe); }
.cta__form input:focus, .cta__form textarea:focus{ outline:2px solid var(--copper); outline-offset:1px; }
.cta__consent{ display:flex; align-items:flex-start; gap:10px; font-size:.84rem; color:var(--on-dark-dim); margin-bottom:20px; line-height:1.45; }
.cta__consent input{ width:auto; margin-top:3px; flex:0 0 auto; accent-color:var(--clay); }
.cta__consent a{ text-decoration:underline; color:var(--rose); }
.cta__direct{ margin-top:26px; font-size:.95rem; color:var(--on-dark-dim); display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.cta__direct a{ font-weight:600; color:var(--rose); } .cta__direct a:hover{ color:#fff; }

/* ============================================================ FOOTER */
.footer{ background:#160F0D; color:var(--on-dark); padding:70px var(--pad) 30px; }
.footer__inner{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:40px; padding-bottom:46px; border-bottom:1px solid var(--on-dark-faint); }
.brand--footer .brand__mark{ color:var(--on-dark); } .brand--footer .brand__sub{ color:var(--rose); } .brand--footer .brand__hex{ color:var(--clay); }
.footer__brand p{ color:var(--on-dark-dim); margin-top:20px; max-width:38ch; font-size:.96rem; }
.footer__col-title{ display:block; font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--rose); margin-bottom:18px; }
.footer__nav, .footer__contact{ display:flex; flex-direction:column; gap:11px; }
.footer__nav a, .footer__contact a, .footer__contact span{ color:var(--on-dark-dim); font-size:.94rem; transition:color .3s; }
.footer__nav a:hover, .footer__contact a:hover{ color:var(--copper); }
.footer__social{ display:flex; gap:16px; margin-top:8px; }
.footer__social a{ color:var(--copper); font-weight:600; }
.footer__bar{ max-width:var(--maxw); margin:0 auto; padding-top:22px; display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:.8rem; color:rgba(246,238,232,.5); }
.footer__credit a{ color:var(--copper); font-weight:600; }

/* ============================================================ FAB */
.fab{ position:fixed; right:22px; bottom:22px; z-index:var(--z-fab); width:58px; height:58px; border-radius:50%;
  background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 30px -8px rgba(37,211,102,.7); transition:transform .4s var(--ease); }
.fab svg{ width:32px; height:32px; fill:currentColor; }
.fab:hover{ transform:scale(1.1) rotate(6deg); }
.fab::after{ content:""; position:absolute; inset:0; border-radius:50%; border:2px solid #25D366; animation:ping 2.4s var(--ease) infinite; }
@keyframes ping{ 0%{ transform:scale(1); opacity:.7;} 100%{ transform:scale(1.7); opacity:0;} }

/* ============================================================ REVEAL (enhances an already-visible default) */
.js .reveal{ opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.js .reveal.in{ opacity:1; transform:none; }

/* ============================================================ RESPONSIVE */
@media (max-width:1000px){
  .purpose{ grid-template-columns:1fr; } .purpose__media{ max-width:420px; }
  .bento{ grid-template-columns:1fr 1fr; }
  .tile, .tile--feature, .tile--wide{ grid-column:auto; grid-row:auto; }
  .tile--feature{ grid-column:1/-1; }
  .method__grid{ grid-template-columns:1fr; } .method__intro{ position:static; }
  .dani{ grid-template-columns:1fr; } .dani__media{ max-width:420px; }
  .quotes__grid{ grid-template-columns:1fr; gap:40px; }
  .footer__inner{ grid-template-columns:1fr 1fr; } .footer__brand{ grid-column:1/-1; }
}
@media (max-width:680px){
  .nav__links, .nav__inner>.btn--nav{ display:none; }
  .nav__burger{ display:flex; } .nav__mobile{ display:grid; }
  .bento{ grid-template-columns:1fr; }
  .cta__row{ grid-template-columns:1fr; }
  .footer__inner{ grid-template-columns:1fr; }
  .hero{ padding-top:130px; align-items:center; }
  .hero__scroll{ display:none; }
}

/* ============================================================ REDUCED MOTION */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .js .reveal, .reveal-line>span{ opacity:1 !important; transform:none !important; }
  .hero__bg{ animation:none; transform:scale(1.08); }
  .cursor{ display:none; } .loader{ display:none; }
}