/* ============================================================
   Tronologic — shared stylesheet
   Link on every page:  <link rel="stylesheet" href="/styles.css">
   ============================================================ */
:root{
  --paper:#F7F6F2;--paper-2:#EFEEE7;--ink:#0E1116;--ink-soft:#454B54;--line:#DCD9CF;
  --blue:#2B34E8;--blue-tint:#E7E8FD;--blue-deep:#1B22B0;--radius:14px;--wrap:1160px;
  --font-display:"Bricolage Grotesque",system-ui,sans-serif;
  --font-body:"Inter",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);background:var(--paper);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}

h1,h2,h3{font-family:var(--font-display);line-height:1.05;letter-spacing:-.02em;font-weight:800}
p{color:var(--ink-soft)}
.eyebrow{font-weight:600;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);display:inline-flex;align-items:center;gap:.55rem}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--blue)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;font-size:.95rem;padding:.85rem 1.4rem;border-radius:999px;transition:transform .15s,background .2s,box-shadow .2s;cursor:pointer;border:1px solid transparent}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 6px 22px -8px rgba(43,52,232,.7)}
.btn-primary:hover{background:var(--blue-deep);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{background:var(--paper-2);transform:translateY(-2px)}

/* header */
header{position:sticky;top:0;z-index:50;background:rgba(247,246,242,.82);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:68px}
.logo{font-family:var(--font-display);font-weight:800;font-size:1.3rem;letter-spacing:-.03em}
.logo span{color:var(--blue)}
.nav-links{display:flex;gap:1.7rem;align-items:center}
.nav-links a{font-size:.93rem;font-weight:500;color:var(--ink-soft)}
.nav-links a:hover{color:var(--ink)}
.nav-cta{display:flex;align-items:center;gap:1rem}
.nav-phone{font-weight:600;font-size:.92rem;color:var(--ink)}
.burger{display:none;background:none;border:0;cursor:pointer;flex-direction:column;gap:5px;padding:6px}
.burger span{width:24px;height:2px;background:var(--ink);display:block;transition:.25s}

.crumbs{padding:22px 0 0;font-size:.82rem;color:var(--ink-soft)}
.crumbs a:hover{color:var(--blue)}

/* hero */
.hero{padding:36px 0 56px}
.hero h1{font-size:clamp(2.4rem,5.4vw,4rem);margin:.9rem 0 1.1rem;max-width:17ch}
.hero h1 .u{color:var(--blue)}
.hero .lead{font-size:1.18rem;max-width:60ch;margin-bottom:1.8rem}
.hero-ctas{display:flex;gap:.8rem;flex-wrap:wrap}
.stats{display:flex;gap:2.4rem;margin-top:2.4rem;flex-wrap:wrap}
.stats b{display:block;font-family:var(--font-display);font-size:1.9rem;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.stats span{font-size:.88rem;color:var(--ink-soft)}

/* sections */
section{padding:64px 0}
.sec-head{max-width:60ch;margin-bottom:40px}
.sec-head h2{font-size:clamp(1.8rem,3.6vw,2.7rem);margin:.6rem 0 .7rem}
.prose p{font-size:1.05rem;margin-bottom:1.1rem;max-width:72ch}
.prose h3{font-size:1.4rem;margin:2rem 0 .8rem;color:var(--ink)}
.prose ul{margin:0 0 1.1rem 1.1rem;color:var(--ink-soft);font-size:1.05rem}
.prose li{margin-bottom:.4rem}

/* cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cards.two{grid-template-columns:repeat(2,1fr)}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;transition:transform .2s,box-shadow .2s,border-color .2s}
.card:hover{transform:translateY(-4px);box-shadow:0 20px 40px -24px rgba(14,17,22,.28);border-color:var(--blue)}
.card h3{font-size:1.2rem;margin-bottom:.4rem;font-weight:700}
.card p{font-size:.95rem}
.card.link:hover h3{color:var(--blue)}

/* dark split band */
.split{background:var(--ink);color:var(--paper);border-radius:24px}
.split .inner{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;padding:52px 40px}
.split h2{color:var(--paper)}
.split p{color:#c3c7d4;margin-top:1rem}
.split ul{list-style:none;display:grid;gap:12px;margin-top:6px}
.split li{display:flex;gap:.7rem;font-size:.98rem;color:#e7e9f0}
.split li b{color:#7c84ff}

/* process steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.step{border-top:2px solid var(--ink);padding-top:18px}
.step .n{font-family:var(--font-display);font-weight:800;color:var(--blue)}
.step h3{font-size:1.1rem;margin:.4rem 0;font-weight:700}
.step p{font-size:.92rem}

/* misc blocks */
.note{background:var(--blue-tint);border:1px dashed var(--blue);border-radius:12px;padding:18px 20px;color:var(--blue-deep);font-size:.92rem;margin:12px 0}
.placeholder{background:#fff;border:1px dashed var(--line);border-radius:var(--radius);padding:30px;text-align:center;color:var(--ink-soft)}

/* faq */
.faq{max-width:none;display:grid;grid-template-columns:1fr 1fr;column-gap:52px;align-items:start}
@media(max-width:760px){.faq{grid-template-columns:1fr;column-gap:0}}
.q{border-bottom:1px solid var(--line)}
.q button{width:100%;text-align:left;background:none;border:0;cursor:pointer;padding:20px 0;display:flex;justify-content:space-between;gap:20px;align-items:center;font-family:var(--font-display);font-weight:700;font-size:1.08rem;color:var(--ink)}
.q .plus{flex:none;width:24px;height:24px;position:relative}
.q .plus::before,.q .plus::after{content:"";position:absolute;background:var(--blue);top:50%;left:50%;transform:translate(-50%,-50%)}
.q .plus::before{width:13px;height:2px}
.q .plus::after{width:2px;height:13px;transition:transform .25s}
.q[aria-expanded="true"] .plus::after{transform:translate(-50%,-50%) scaleY(0)}
.q .a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.q .a p{padding:0 0 20px;font-size:.98rem;max-width:70ch}

/* cta band */
.cta{background:var(--blue);color:#fff;border-radius:24px;text-align:center}
.cta .inner{padding:56px 24px}
.cta h2{color:#fff;font-size:clamp(1.8rem,3.6vw,2.6rem)}
.cta p{color:#dfe1ff;max-width:52ch;margin:1rem auto 1.8rem}
.cta .btn-primary{background:#fff;color:var(--blue)}
.cta .btn-primary:hover{background:var(--paper)}

/* footer */
footer{padding:44px 0 30px;border-top:1px solid var(--line);margin-top:20px}
.foot-bottom{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.85rem;color:var(--ink-soft)}

/* responsive */
@media(max-width:900px){
  .cards,.steps{grid-template-columns:1fr 1fr}
  .cards.two,.split .inner{grid-template-columns:1fr}
  .nav-links,.nav-phone{display:none}
  .burger{display:flex}
  .nav-links.open{display:flex;position:absolute;top:68px;left:0;right:0;flex-direction:column;background:var(--paper);border-bottom:1px solid var(--line);padding:20px 24px;gap:1.1rem}
}
@media(max-width:560px){
  .cards,.steps{grid-template-columns:1fr}
  .stats{gap:1.6rem}
  .split .inner,.cta .inner{padding:34px 24px}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto;transition:none}}

/* ============================================================
   Homepage-specific styles (used by the data-generated home page)
   ============================================================ */
.hero-home{
  display:flex;align-items:center;
  min-height:calc(100vh - 68px);      /* fallback for older browsers */
  min-height:calc(100svh - 68px);     /* svh avoids mobile browser-chrome cut-off */
  padding:clamp(24px,5vh,64px) 0;position:relative;
}
.hero-home > .wrap{width:100%}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,5vw,56px);align-items:center}
.hero-home h1{font-size:clamp(2.6rem,6vw,4.5rem);margin:.9rem 0 1.2rem;max-width:none}
.hero-home h1 .u{color:var(--blue)}
.hero-home .lead{font-size:1.15rem;color:var(--ink-soft);max-width:34ch;margin-bottom:2rem}
.hero-meta{margin-top:2.2rem;display:flex;gap:2rem;flex-wrap:wrap}
.hero-meta div{font-size:.9rem;color:var(--ink-soft)}
.hero-meta b{display:block;font-family:var(--font-display);font-size:1.7rem;color:var(--ink);font-weight:800;letter-spacing:-.02em}

.perf{background:var(--ink);color:var(--paper);border-radius:20px;padding:30px;position:relative;overflow:hidden;box-shadow:0 30px 60px -30px rgba(14,17,22,.6)}
.perf::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:26px 26px;opacity:.6;pointer-events:none}
.perf-top{display:flex;justify-content:space-between;align-items:center;position:relative;margin-bottom:22px}
.perf-top .tag{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#9aa0ff}
.perf-top .live{display:flex;align-items:center;gap:.4rem;font-size:.75rem;color:#c8ccff}
.dot{width:7px;height:7px;border-radius:50%;background:#4ade80;animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(74,222,128,.5)}70%{box-shadow:0 0 0 8px rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}}
.rings{display:flex;gap:14px;position:relative}
.ring{flex:1;text-align:center}
.ring svg{width:100%;max-width:88px;margin:0 auto}
.ring .val{font-family:var(--font-display);font-weight:800;font-size:1.15rem;fill:var(--paper)}
.ring .lbl{font-size:.72rem;color:#b6bad6;margin-top:6px}
.track{stroke:rgba(255,255,255,.12)}
.meter{stroke:#7c84ff;stroke-linecap:round;transform:rotate(-90deg);transform-origin:center;transition:stroke-dashoffset 1.4s cubic-bezier(.3,1,.4,1)}
.perf-foot{margin-top:20px;font-size:.82rem;color:#b6bad6;position:relative}

.strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0;margin-top:14px}
.strip .wrap{display:flex;align-items:center;gap:2.4rem;flex-wrap:wrap;justify-content:space-between}
.strip small{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.strip .stack{font-family:var(--font-display);font-weight:700;color:var(--ink-soft);font-size:1rem;letter-spacing:-.01em}

.local{background:var(--ink);color:var(--paper);border-radius:24px}
.local .inner{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding:56px 40px}
.local h2{color:var(--paper);font-size:clamp(1.9rem,3.6vw,2.7rem)}
.local p{color:#c3c7d4;margin-top:1rem;font-size:1.02rem}
.local ul{list-style:none;display:grid;gap:14px;margin-top:6px}
.local li{display:flex;gap:.7rem;align-items:flex-start;font-size:.98rem;color:#e7e9f0}
.local li svg{flex:none;width:20px;height:20px;stroke:#7c84ff;margin-top:2px}

.contact{background:var(--paper-2);border-radius:24px}
.contact .inner{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;padding:56px 40px}
.contact h2{font-size:clamp(1.9rem,3.6vw,2.7rem)}
.contact .sub{color:var(--ink-soft);margin-top:1rem;font-size:1.02rem}
.contact .nap{margin-top:2rem;display:grid;gap:.8rem}
.contact .nap a,.contact .nap span{display:flex;gap:.6rem;align-items:center;font-size:.98rem;color:var(--ink)}
.contact .nap svg{width:18px;height:18px;stroke:var(--blue);flex:none}
form{display:grid;gap:14px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
label{font-size:.82rem;font-weight:600;color:var(--ink);display:block;margin-bottom:5px}
input,select,textarea{width:100%;font-family:inherit;font-size:.95rem;padding:.7rem .85rem;border:1px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--blue);outline-offset:1px;border-color:transparent}
textarea{resize:vertical;min-height:92px}
form .btn-primary{justify-content:center;margin-top:4px}

/* Reveal-on-scroll — progressive enhancement.
   Content is ONLY hidden when JS is active AND the user allows motion,
   so no-JS and reduced-motion visitors always see everything. */
@media (prefers-reduced-motion: no-preference){
  .js .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
  .js .reveal.in{opacity:1;transform:none}
}

@media(max-width:900px){
  .hero-grid,.local .inner,.contact .inner{grid-template-columns:1fr}
}
@media(max-width:560px){
  .hero-meta{gap:1.4rem}
  .local .inner,.contact .inner{padding:36px 24px}
  .row{grid-template-columns:1fr}
}

/* ============================================================
   Apple-style motion polish (transform/opacity only — GPU cheap)
   ============================================================ */
@media (prefers-reduced-motion: no-preference){
  /* staggered cascade for grouped items (hero lines, card grids, steps) */
  [data-stagger] > .reveal:nth-child(1){transition-delay:0s}
  [data-stagger] > .reveal:nth-child(2){transition-delay:.06s}
  [data-stagger] > .reveal:nth-child(3){transition-delay:.12s}
  [data-stagger] > .reveal:nth-child(4){transition-delay:.18s}
  [data-stagger] > .reveal:nth-child(5){transition-delay:.24s}
  [data-stagger] > .reveal:nth-child(6){transition-delay:.30s}
  [data-stagger] > .reveal:nth-child(7){transition-delay:.36s}
  [data-stagger] > .reveal:nth-child(8){transition-delay:.42s}

  .dot{animation:pulse 2s infinite}
}
@media (prefers-reduced-motion: reduce){ .dot{animation:none} }

/* header gains a soft depth cue once you start scrolling (Apple-like) */
header{transition:box-shadow .3s ease, background .3s ease}
header.scrolled{box-shadow:0 1px 0 rgba(14,17,22,.06),0 8px 30px -18px rgba(14,17,22,.25)}

/* refined easing on the interactive micro-motions already in the design */
.btn{transition:transform .25s cubic-bezier(.16,1,.3,1),background .25s ease,box-shadow .25s ease}
.card{transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s ease,border-color .25s ease}
.card:hover{transform:translateY(-6px)}

/* buttery smooth in-page anchor scrolling */
@media (prefers-reduced-motion: no-preference){ html{scroll-behavior:smooth} }

/* ============================================================
   Hero: fit-to-screen across all sizes (incl. laptop/retina heights)
   ============================================================ */
/* Shorter desktop/laptop viewports: compact the hero so nothing clips */
@media (min-width:901px) and (max-height:860px){
  .hero-home h1{font-size:clamp(2.2rem,4.2vw,3.4rem);margin:.7rem 0 1rem}
  .hero-home .lead{margin-bottom:1.4rem}
  .hero-meta{margin-top:1.5rem}
  .perf{padding:22px}
  .ring svg{max-width:74px}
  .perf-foot{margin-top:16px}
}
/* Very short viewports: don't force full height — let it flow naturally */
@media (max-height:640px){
  .hero-home{min-height:0;padding:36px 0}
}
/* Stacked (mobile/tablet): natural height, comfortable top spacing */
@media (max-width:900px){
  .hero-home{min-height:0;padding:40px 0 8px;align-items:stretch}
  .hero-grid{align-items:stretch}
}

/* ============================================================
   Blog — index cards + article layout
   ============================================================ */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.post-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;display:flex;flex-direction:column;gap:.5rem;transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s ease,border-color .25s ease}
.post-card:hover{transform:translateY(-6px);box-shadow:0 20px 40px -24px rgba(14,17,22,.28);border-color:var(--blue)}
.post-card h3{font-family:var(--font-display);font-weight:700;font-size:1.2rem;line-height:1.2;letter-spacing:-.01em;color:var(--ink)}
.post-card:hover h3{color:var(--blue)}
.post-card p{font-size:.95rem;color:var(--ink-soft);flex:1}
.post-tag{align-self:flex-start;font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);background:var(--blue-tint);padding:.3rem .6rem;border-radius:999px}
.post-meta{font-size:.82rem;color:var(--ink-soft)}

.post-head{max-width:760px;margin:0 auto;padding-top:8px;display:flex;flex-direction:column;gap:.9rem;align-items:flex-start}
.post-head h1{font-size:clamp(2rem,4.4vw,3.1rem);line-height:1.08;max-width:20ch}
.post-body{max-width:760px;margin:32px auto 0}
.post-body p{font-size:1.08rem;line-height:1.7;margin-bottom:1.15rem}
.post-body h2{font-size:1.5rem;margin:2.2rem 0 .8rem;color:var(--ink)}
.post-body ul{margin:0 0 1.15rem 1.2rem;font-size:1.08rem;color:var(--ink-soft)}
.post-body li{margin-bottom:.45rem}
.post-body .faq{max-width:760px;margin:0 auto}

@media(max-width:900px){.post-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.post-grid{grid-template-columns:1fr}}

/* Footer version stamp (bottom-right corner) */
.foot-right{display:inline-flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.version{font-size:.72rem;font-weight:600;letter-spacing:.02em;color:var(--ink-soft);background:var(--paper-2);border:1px solid var(--line);border-radius:999px;padding:.15rem .5rem;font-variant-numeric:tabular-nums}

/* Hero panel "verify" link (inside dark performance panel) */
.perf-verify{color:#9aa0ff;font-weight:600;white-space:nowrap}
.perf-verify:hover{color:#c8ccff;text-decoration:underline}

/* Logo image in header */
.logo{display:inline-flex;align-items:center;line-height:0}
.logo-img{height:30px;width:auto;display:block}
@media(max-width:560px){.logo-img{height:26px}}

/* WhatsApp floating button */
.wa-float{position:fixed;right:20px;bottom:20px;z-index:60;width:56px;height:56px;border-radius:50%;background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px -6px rgba(37,211,102,.6),0 2px 8px rgba(0,0,0,.15);transition:transform .2s cubic-bezier(.16,1,.3,1),box-shadow .2s ease}
.wa-float:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 12px 30px -6px rgba(37,211,102,.7)}
.wa-float:focus-visible{outline:3px solid #0E1116;outline-offset:2px}
@media(max-width:560px){.wa-float{width:52px;height:52px;right:16px;bottom:16px}}
@media (prefers-reduced-motion:reduce){.wa-float{transition:none}}