/* ==========================================================================
   Hard Consultoria — index.css
   Estilos exclusivos da página inicial: hero (vídeo/canvas), catálogo de
   soluções com índice sticky, bloco de tecnologia + visual do Guardian,
   experiência/cases e trilho da metodologia.
   Padrões reaproveitáveis (narrativa sticky, jornada, split screen, cadeia,
   grupos, cenários, CTA final) vivem em base.css.
   ========================================================================== */

/* ============ 01 HERO ============ */
.hero{position:relative;min-height:94vh;min-height:94svh;display:flex;flex-direction:column;justify-content:flex-end;padding:calc(var(--nav-h) + clamp(40px,10vh,120px)) 0 0;background:#000;color:#fff;overflow:hidden;isolation:isolate}
.hero .bg{position:absolute;inset:0;overflow:hidden;background:#000;z-index:0;background-image:radial-gradient(120% 92% at 74% 20%,#14586B 0%,#08222B 58%,#03121A 100%)}
.bg-video,.bg-canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;z-index:0;display:block}
.v-tint{position:absolute;inset:0;background:#176F83;mix-blend-mode:color;opacity:.75;z-index:1}
.v-grade{position:absolute;inset:0;z-index:2;background:
  linear-gradient(100deg,rgba(3,16,22,.95) 0%,rgba(4,22,29,.9) 38%,rgba(9,50,62,.62) 70%,rgba(13,90,105,.4) 100%),
  linear-gradient(to top,rgba(3,16,22,.95) 0%,rgba(3,16,22,.28) 32%,transparent 62%)}
.v-lines{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.45;background:repeating-linear-gradient(to right,rgba(255,255,255,.05) 0 1px,transparent 1px calc(100% / 12))}
.bg[data-mode="canvas"] .bg-video,.bg[data-mode="canvas"] .v-tint{display:none}
.bg[data-mode="video"] .bg-canvas{display:none}
.hero-watermark{position:absolute;right:-6vw;top:50%;width:min(40vw,470px);height:min(40vw,470px);transform:translateY(-52%);opacity:.09;z-index:4;pointer-events:none;will-change:transform}
.hero-in{position:relative;z-index:5;width:100%}
.hero .eyebrow{color:rgba(255,255,255,.62);margin-bottom:26px}
.hero .eyebrow::before{border-color:var(--teal-lit)}
.hero h1{font-family:var(--serif);font-weight:300;font-size:clamp(34px,6vw,78px);line-height:1.04;letter-spacing:-.026em;max-width:17ch}
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.05em}
.hero h1 .ln>span{display:block;transition:transform 1.05s cubic-bezier(.19,1,.22,1)}
.js .hero h1 .ln>span{transform:translateY(106%)}
.hero.lit h1 .ln>span{transform:none}
.hero h1 .ln:nth-child(1)>span{color:#fff;transition-delay:.18s}
.hero h1 .ln:nth-child(2)>span{color:#8FD3DB;transition-delay:.34s}
.hero-body{margin-top:clamp(22px,3.4vh,34px);max-width:54ch}
.hero-body p{color:rgba(226,240,243,.74);font-size:clamp(15.5px,1.3vw,17px)}
.hero .btns{margin-top:clamp(24px,3.4vh,34px)}
.hero .btn-line{border-color:rgba(255,255,255,.3);color:#fff}
.hero .btn-line:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.hero-rail{position:relative;z-index:5;margin-top:clamp(40px,7vh,76px);border-top:1px solid rgba(255,255,255,.15)}
.hero-rail .shell{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:16px;padding-bottom:20px}
.tags{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:11.5px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:rgba(226,240,243,.6)}
.cue{display:flex;align-items:center;gap:11px;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(226,240,243,.42);flex-shrink:0}
.cue i{position:relative;display:block;width:1px;height:32px;background:rgba(255,255,255,.2);overflow:hidden}
.cue i::after{content:"";position:absolute;left:0;top:0;width:1px;height:11px;background:var(--teal-lit);animation:cueRun 2.4s cubic-bezier(.6,0,.4,1) infinite}
@keyframes cueRun{0%{transform:translateY(-13px)}60%,100%{transform:translateY(34px)}}

/* ============ 03 COMO AJUDAMOS (catálogo com índice sticky) ============ */
.help{background:var(--paper-2);padding:clamp(80px,12vh,150px) 0 clamp(70px,10vh,120px)}
.help-top{max-width:24ch;margin-bottom:clamp(40px,7vh,80px)}
.help-grid{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:clamp(30px,6vw,90px);align-items:start}
.help-side{position:sticky;top:calc(var(--nav-h) + 70px)}
.help-index{list-style:none;display:grid;gap:0;border-top:1px solid var(--line)}
.help-index li{border-bottom:1px solid var(--line)}
.help-index a{display:flex;gap:14px;align-items:baseline;padding:15px 0;text-decoration:none;color:rgba(10,33,41,.4);transition:color .35s,padding-left .35s}
.help-index a b{font-size:11.5px;font-weight:600;letter-spacing:.1em;color:inherit}
.help-index a span{font-family:var(--serif);font-size:22px;font-weight:400}
.help-index li.on a{color:var(--ink);padding-left:8px}
.help-index li.on a b{color:var(--teal)}
.help-item{padding:clamp(26px,5vh,48px) 0 clamp(34px,6vh,64px);border-bottom:1px solid var(--line)}
.help-item:first-child{padding-top:0}
.help-item:last-child{border-bottom:0}
.help-item .ph,.help-item .hard-visual{aspect-ratio:16/8;margin-bottom:clamp(22px,3.6vh,34px)}
.help-item h3{font-family:var(--serif);font-weight:400;font-size:clamp(25px,3vw,38px);line-height:1.12;letter-spacing:-.014em;max-width:18ch}
.help-item p{color:var(--muted);margin-top:14px;max-width:52ch}
.help-item .link{margin-top:20px}
/* ============ 05 TECNOLOGIA + GUARDIAN (visual próprio da Home) ============ */
.tech{padding:clamp(90px,14vh,170px) 0 0}
.tech-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,6vw,90px);align-items:start}
.tech-top .display{max-width:15ch}
.tech-block{margin-top:clamp(60px,10vh,120px);border-top:1px solid var(--line-dark);padding-top:clamp(34px,5vh,58px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,6vw,90px);align-items:start}
.microline{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:24px;font-size:11.5px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:#7FA0A9}
.microline span{display:inline-flex;align-items:center;gap:18px}
.microline span+span::before{content:"";width:14px;height:1px;background:rgba(255,255,255,.22)}
.guardian{margin-top:clamp(70px,11vh,130px);padding-bottom:clamp(80px,12vh,140px)}
.g-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(34px,5.5vw,80px);align-items:start}
.gmark{display:flex;align-items:center;gap:13px;margin-bottom:20px}
.gmark svg{width:32px;height:32px}
.gmark b{font-family:var(--serif);font-size:26px;font-weight:400;color:#fff;letter-spacing:.01em}
.gmark b span{color:var(--teal-lit)}
.g-copy .display{max-width:17ch}
.g-copy .lead{margin-top:26px}
.g-points{list-style:none;margin-top:clamp(42px,6vh,64px);border-top:1px solid var(--line-dark)}
.g-points li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:8px;padding:20px 0 20px;border-bottom:1px solid var(--line-dark);position:relative}
.g-points b{font-size:11.5px;font-weight:600;letter-spacing:.1em;color:#66858E;padding-top:5px}
.g-points h4{font-family:var(--serif);font-size:clamp(20px,2vw,24px);font-weight:400;color:#fff;line-height:1.2}
.g-points p{font-size:15px;color:#8FA9B1;margin-top:7px;max-width:56ch;line-height:1.55}
.g-points li.hi{padding-left:20px;background:linear-gradient(90deg,rgba(16,162,175,.1),transparent 62%)}
.g-points li.hi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--teal)}
.g-points li.hi b{color:var(--teal-lit)}
.g-points li.hi p{color:#B4CBD1}

/* composição da inteligência do Guardian (SVG próprio, sem mockup) */
.g-visual{position:sticky;top:calc(var(--nav-h) + 60px)}
.g-visual-in{border:1px solid var(--line-dark);padding:clamp(18px,2vw,26px) clamp(16px,1.8vw,22px) 16px;background:linear-gradient(160deg,rgba(16,162,175,.07),rgba(16,162,175,.01) 60%)}
.g-visual svg{width:100%;height:auto;display:block;overflow:visible}
.g-visual .hair{stroke:rgba(255,255,255,.14);stroke-width:1}
.g-visual text{font-family:var(--sans)}
.g-visual .lbl-agent{font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;fill:var(--teal-lit)}
.g-visual .lbl{font-size:14px;fill:#D8E6E9}
.g-visual .sub{font-size:11px;fill:#7A959D;letter-spacing:.01em}
.g-visual .hub-l{font-size:16px;font-weight:500;fill:#fff}
.g-visual .risk-l{font-size:15px;font-weight:500;fill:var(--teal-lit)}
.g-visual .act-l{font-family:var(--serif);font-size:22px;fill:#fff}
.g-visual .cnt{font-family:var(--serif);font-size:26px;fill:var(--teal-lit)}
.g-visual .n-hub rect{fill:rgba(255,255,255,.05);stroke:rgba(255,255,255,.28);stroke-width:1}
.g-visual .n-src rect{fill:rgba(255,255,255,.035);stroke:rgba(255,255,255,.2);stroke-width:1}
.g-visual .g-dot{fill:var(--teal);stroke:rgba(255,255,255,.4);stroke-width:1}
.g-visual .n-risk rect{fill:rgba(16,162,175,.12);stroke:var(--teal);stroke-width:1}
.g-visual .n-act rect{fill:rgba(255,255,255,.04);stroke:rgba(255,255,255,.2);stroke-width:1}
.g-visual .warn{fill:none;stroke:var(--teal-lit);stroke-width:1.4}
.g-visual .conn{fill:none;stroke:rgba(255,255,255,.24);stroke-width:1;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.15s cubic-bezier(.4,0,.2,1)}
.g-visual .conn-hot{stroke:var(--teal);stroke-width:1.4}
.g-visual.in .conn{stroke-dashoffset:0}
.g-visual .links .conn:nth-child(1){transition-delay:.15s}
.g-visual .links .conn:nth-child(2){transition-delay:.27s}
.g-visual .links .conn:nth-child(3){transition-delay:.39s}
.g-visual .links .conn:nth-child(4){transition-delay:.51s}
.g-visual .links .conn:nth-child(5){transition-delay:.63s}
.g-visual .conn-hot{transition-delay:1.05s}
.g-visual .node{transition:opacity .8s ease}
.js .g-visual .node{opacity:0}
.js .g-visual.in .node{opacity:1}
.g-visual .n-src:nth-child(1){transition-delay:.05s}
.g-visual .n-src:nth-child(2){transition-delay:.13s}
.g-visual .n-src:nth-child(3){transition-delay:.21s}
.g-visual .n-src:nth-child(4){transition-delay:.29s}
.g-visual .n-src:nth-child(5){transition-delay:.37s}
.g-visual .n-hub{transition-delay:.85s}
.g-visual .n-risk{transition-delay:1.25s}
.g-visual .n-act{transition-delay:1.6s}
.g-visual .n-cnt{transition-delay:1.85s}

/* ============ 06 EXPERIÊNCIA ============ */
.exp{background:var(--paper-3);padding:clamp(80px,12vh,150px) 0}
.exp-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,6vw,90px);align-items:end}
.exp-head .display{max-width:15ch}
.method{margin-top:clamp(52px,8vh,96px);border-top:1px solid var(--line);padding-top:clamp(30px,5vh,50px);display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:clamp(28px,5vw,70px);align-items:start}
.method-rail{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.method-rail b{font-family:var(--serif);font-weight:400;font-size:clamp(21px,2.3vw,29px);color:var(--ink);transition:opacity .6s,transform .6s}
.js .method-rail b{opacity:0;transform:translateY(8px)}
.js .method-rail.in b{opacity:1;transform:none}
.method-rail b:nth-child(1){transition-delay:.05s}.method-rail b:nth-child(3){transition-delay:.15s}
.method-rail b:nth-child(5){transition-delay:.25s}.method-rail b:nth-child(7){transition-delay:.35s}
.method-rail b:nth-child(9){transition-delay:.45s}
.method-rail i{display:block;width:16px;height:1px;background:var(--teal);transition:opacity .6s}
.js .method-rail i{opacity:0}
.js .method-rail.in i{opacity:1}


/* ============ RESPONSIVO (home) ============ */
@media (max-width:900px){
  .help-grid,.tech-top,.tech-block,.g-grid,.exp-head,.method{grid-template-columns:1fr;gap:26px}
  .help-side,.g-visual{position:static}
  .g-visual{margin-top:34px}
  .help-index{display:none}
  .hero{min-height:auto;padding-bottom:0}
  .hero-in{padding-top:clamp(24px,7vh,52px);padding-bottom:clamp(28px,5vh,44px)}
  .hero-watermark{right:-22vw;top:auto;bottom:14%;width:74vw;height:74vw;transform:none;opacity:.07}
  .hero-rail .shell{flex-direction:column;align-items:flex-start;gap:12px}
  .cue{display:none}
}
@media (prefers-reduced-motion:reduce){
  .method-rail b,.method-rail i{opacity:1!important;transform:none!important;transition:none!important;color:var(--ink)}
  .js .hero h1 .ln>span{transform:none}
  .cue i::after{animation:none;height:32px;opacity:.4}
  .g-visual .node{opacity:1}
  .g-visual .conn{stroke-dashoffset:0;transition:none}
}