:root{
    --bg:#F5F7FB;
    --surface:#FFFFFF;
    --surface-soft:#FBFCFE;
    --ink:#101828;
    --slate:#5B6472;
    --slate-dim:#8B93A1;
    --ember:#FF7A3D;
    --ember-deep:#E85D25;
    --cobalt:#1E56C4;
    --cobalt-deep:#153E90;
    --border:rgba(16,24,40,0.09);
    --glass:rgba(255,255,255,0.72);
    --grad:linear-gradient(120deg,var(--ember),var(--cobalt));
    --radius-lg:20px;
    --radius-md:14px;
    --maxw:1180px;
    --shadow-sm:0 1px 2px rgba(16,24,40,0.04), 0 1px 1px rgba(16,24,40,0.03);
    --shadow-md:0 12px 32px -12px rgba(16,24,40,0.14);
  }
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
    background:var(--bg);
    color:var(--ink);
    font-family:'Inter',sans-serif;
    line-height:1.6;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
h1,h2,h3,.font-display{
    font-family:'Space Grotesk',sans-serif;
    font-weight:600;
    letter-spacing:-0.01em;
    line-height:1.12;
    color:var(--ink);
  }
.mono{
    font-family:'JetBrains Mono',monospace;
    letter-spacing:0.12em;
    text-transform:uppercase;
    font-size:12px;
    font-weight:600;
  }
.grad-text{
    background:var(--grad);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px;}
a:focus-visible, button:focus-visible{
    outline:2px solid var(--cobalt);
    outline-offset:3px;
    border-radius:4px;
  }
.glow{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;z-index:0;}
@keyframes float{
    0%{transform:translate(0,0) scale(1);}
    50%{transform:translate(18px,-14px) scale(1.06);}
    100%{transform:translate(0,0) scale(1);}
  }
.glow{animation:float 13s ease-in-out infinite;}
.glow.glow-b{animation-duration:16s;animation-delay:1.5s;}
/* ---------- nav ---------- */
header{
    position:fixed;top:0;left:0;right:0;z-index:100;
    /* extra top padding drops the nav row without detaching the bar from
       the viewport edge — a top offset would leak content behind it on scroll */
    padding:34px 0 20px;
    transition:background .35s ease, box-shadow .35s ease, padding .35s ease;
  }
header.scrolled{
    background:rgba(255,255,255,0.82);
    -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
    box-shadow:var(--shadow-sm);
    padding:13px 0;
  }
.nav-row{display:flex;align-items:center;justify-content:space-between;gap:32px;}
.logo-link{display:flex;align-items:center;flex-shrink:0;}
.logo-link img{height:48px;width:auto;}
/* nav group hugs the right edge; links share one centre line with the logo */
.nav-links{display:flex;align-items:center;gap:34px;margin-left:auto;}
nav ul{display:flex;align-items:center;gap:34px;}
nav a{font-size:15px;font-weight:600;color:var(--ink);line-height:1;white-space:nowrap;transition:color .25s ease;}
nav a:hover{color:var(--cobalt-deep);}
/* current section, set by header.php from $active */
nav a.active{color:var(--cobalt-deep);position:relative;}
nav a.active::after{
    content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;
    border-radius:2px;background:var(--grad);
  }
/* button is a peer of the nav list, so it centres on the same row as the links.
   Slightly roomier than the base .btn and offset so it reads as a CTA, not a nav item. */
.nav-links > .btn{flex-shrink:0;margin-left:10px;padding:12px 26px;}
.btn{
    display:inline-flex;align-items:center;gap:8px;
    font-family:'Inter',sans-serif;font-weight:600;font-size:14px;
    padding:12px 22px;border-radius:999px;
    transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
    border:1px solid transparent;cursor:pointer;white-space:nowrap;
  }
.btn-primary{
    background:var(--grad);
    color:#fff;
    box-shadow:0 8px 22px -8px rgba(232,93,37,0.45);
  }
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 30px -8px rgba(30,86,196,0.4);}
.btn-ghost{border-color:var(--border);color:var(--ink);background:var(--surface);}
.btn-ghost:hover{background:var(--surface-soft);border-color:rgba(16,24,40,0.16);}
.menu-toggle{display:none;background:none;border:none;color:var(--ink);}
/* ---------- hero ---------- */
.hero{position:relative;padding:180px 0 80px;overflow:hidden;}
/* subpage heroes: shorter than the homepage's. -flush sits directly above an
   image or card grid that brings its own top spacing. */
.hero.hero-sub{padding:150px 0 70px;}
.hero.hero-flush{padding:150px 0 0;}
.hero .glow-a{width:480px;height:480px;background:var(--ember);opacity:0.16;top:-160px;left:-140px;}
.hero .glow-b{width:460px;height:460px;background:var(--cobalt);opacity:0.14;top:40px;right:-160px;}
.hero-inner{position:relative;z-index:2;max-width:820px;}
.eyebrow{color:var(--cobalt-deep);display:inline-flex;align-items:center;gap:10px;margin-bottom:22px;}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--grad);box-shadow:0 0 0 4px rgba(30,86,196,0.14);}
.hero h1{font-size:clamp(34px,5.4vw,60px);margin-bottom:24px;}
.hero p.lede{font-size:18px;color:var(--slate);max-width:580px;margin-bottom:36px;}
.hero-cta{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:16px;}
/* ECG line */
.ecg-wrap{position:relative;height:90px;margin-top:36px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);}
.ecg-track{display:flex;width:200%;height:100%;animation:ecg-scroll 9s linear infinite;}
.ecg-track svg{width:50%;height:100%;flex-shrink:0;}
@keyframes ecg-scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.ecg-path{fill:none;stroke:url(#ecgGrad);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px rgba(30,86,196,0.28));}
/* marquee ticker */
.ticker-wrap{border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--surface-soft);overflow:hidden;position:relative;z-index:2;}
.ticker-track{display:flex;width:max-content;gap:48px;padding:16px 0;animation:ticker-scroll 26s linear infinite;}
.ticker-wrap:hover .ticker-track{animation-play-state:paused;}
@keyframes ticker-scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.ticker-item{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--slate);white-space:nowrap;}
.ticker-item .pulse-dot{width:6px;height:6px;border-radius:50%;background:var(--grad);}
/* ---------- section shell ---------- */
/* single source of truth for section rhythm: every boundary is 56+56 = 112px */
section{position:relative;padding:56px 0;}
/* no width cap: heading and intro paragraph both run the full content width */
.section-head{margin-bottom:52px;}
/* nothing follows it inside the wrap, so the 52px separator is dead space */
.wrap > .section-head:only-child{margin-bottom:0;}
.section-head .eyebrow{margin-bottom:16px;}
.section-head h2{font-size:clamp(26px,3.6vw,38px);}
.section-head p{color:var(--slate);margin-top:16px;font-size:16px;}
/* ---------- founder strip ---------- */
.founder{background:var(--surface);}
.founder-card{
    display:flex;align-items:center;gap:32px;flex-wrap:wrap;
    background:linear-gradient(135deg, var(--surface-soft), var(--surface));
    border:1px solid var(--border);border-radius:var(--radius-lg);
    padding:36px 40px;box-shadow:var(--shadow-md);
  }
.avatar{
    width:76px;height:76px;border-radius:50%;
    background:var(--grad);
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
  }
.founder-copy{flex:1;min-width:240px;}
.founder-copy .name{font-size:13px;color:var(--slate-dim);margin-bottom:4px;}
.founder-copy h3{font-size:19px;margin-bottom:8px;}
.founder-copy p{font-size:14.5px;color:var(--slate);max-width:520px;}
.founder-stats{display:flex;gap:16px;flex-wrap:wrap;}
.founder-stat{text-align:center;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:14px 18px;min-width:100px;}
.founder-stat .num{font-family:'Space Grotesk',sans-serif;font-size:22px;font-weight:700;}
.founder-stat .num.ember{color:var(--ember-deep);}
.founder-stat .num.cobalt{color:var(--cobalt-deep);}
.founder-stat .label{font-size:11.5px;color:var(--slate-dim);margin-top:2px;}
/* ---------- stat chips ---------- */
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px;}
.stat-chip{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:30px 28px;box-shadow:var(--shadow-sm);}
.stat-chip .num{font-family:'Space Grotesk',sans-serif;font-size:34px;line-height:1.05;font-weight:700;color:var(--cobalt-deep);display:block;margin-bottom:8px;}
.stat-chip .label{font-size:14px;color:var(--slate);}
/* ---------- why ---------- */
.why-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:64px;align-items:start;}
.why-copy p{color:var(--slate);margin-bottom:18px;font-size:16px;max-width:520px;}
.why-list{display:flex;flex-direction:column;gap:18px;}
.why-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:18px 20px;display:flex;gap:14px;align-items:flex-start;box-shadow:var(--shadow-sm);}
.why-item .dot{width:8px;height:8px;border-radius:50%;background:var(--grad);margin-top:7px;flex-shrink:0;}
.why-item h3{font-size:15px;font-family:'Inter',sans-serif;font-weight:600;margin-bottom:4px;}
.why-item p{font-size:14px;color:var(--slate);margin:0;}
/* ---------- capability cards ---------- */
.cap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.cap-card{
    display:block;
    background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
    padding:28px 24px;position:relative;overflow:hidden;
    transition:transform .3s ease, box-shadow .3s ease;box-shadow:var(--shadow-sm);
  }
.cap-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);}
.cap-icon{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg, rgba(255,122,61,0.14), rgba(30,86,196,0.12));display:flex;align-items:center;justify-content:center;margin-bottom:20px;}
.cap-card h3{font-size:17px;margin-bottom:10px;}
.cap-card p{font-size:14px;color:var(--slate);margin-bottom:14px;}
.cap-link{font-size:13px;font-weight:600;color:var(--ink);display:inline-flex;align-items:center;gap:6px;}
.cap-link svg{transition:transform .25s ease;}
.cap-card:hover .cap-link svg{transform:translateX(4px);}
/* ---------- work / case studies ---------- */
.work{background:var(--surface-soft);}
.vert-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.vert-card{
    background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
    overflow:hidden;transition:transform .3s ease, box-shadow .3s ease;box-shadow:var(--shadow-sm);
    display:block;
  }
.vert-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);}
.vert-mock{
    height:140px;position:relative;
    background:linear-gradient(150deg, rgba(255,122,61,0.10), rgba(30,86,196,0.10));
    display:flex;align-items:center;justify-content:center;
  }
.vert-mock > img, .post-mock > img{width:100%;height:100%;object-fit:cover;}
.vert-mock .chrome{position:absolute;top:10px;left:12px;display:flex;gap:5px;}
.vert-mock .chrome span{width:7px;height:7px;border-radius:50%;background:rgba(16,24,40,0.14);}
.vert-mock .bars{width:70%;display:flex;flex-direction:column;gap:8px;}
.vert-mock .bars i{display:block;height:8px;border-radius:4px;background:rgba(16,24,40,0.10);}
.vert-mock .bars i:nth-child(1){width:60%;}
.vert-mock .bars i:nth-child(2){width:90%;}
.vert-mock .bars i:nth-child(3){width:40%;}
.vert-body{padding:20px 22px 24px;}
.vert-card .tag{color:var(--cobalt-deep);margin-bottom:8px;display:block;}
.vert-card h3{font-size:16px;margin-bottom:8px;}
.vert-card p{font-size:13.5px;color:var(--slate);margin-bottom:14px;}
.vert-link{font-size:13px;font-weight:600;color:var(--ink);display:inline-flex;align-items:center;gap:6px;}
.vert-link svg{transition:transform .25s ease;}
.vert-card:hover .vert-link svg{transform:translateX(4px);}
/* ---------- process ---------- */
.process-row{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative;}
.process-row::before{content:"";position:absolute;top:19px;left:5%;right:5%;height:1px;background:linear-gradient(90deg, transparent, var(--border) 15%, var(--border) 85%, transparent);}
.process-step{padding-right:20px;position:relative;}
.step-num{
    font-family:'JetBrains Mono',monospace;font-size:13px;color:#fff;background:var(--grad);
    width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    margin-bottom:20px;position:relative;z-index:1;font-weight:600;
  }
.process-step h3{font-size:16px;margin-bottom:8px;}
.process-step p{font-size:14px;color:var(--slate);}
/* ---------- video ---------- */
.video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.video-card{
    aspect-ratio:9/11;border-radius:var(--radius-lg);
    background:linear-gradient(160deg, var(--surface), var(--surface-soft));
    border:1px solid var(--border);display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:14px;text-align:center;padding:24px;box-shadow:var(--shadow-sm);
  }
.play-btn{width:52px;height:52px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px -8px rgba(30,86,196,0.4);}
.video-card .cap{font-size:13px;color:var(--slate-dim);}
.video-card h3{font-size:14px;font-weight:600;color:var(--slate);}
/* ---------- faq ---------- */
.faq-list{display:flex;flex-direction:column;gap:18px;}
.faq-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:22px 26px;box-shadow:var(--shadow-sm);}
.faq-item h3{font-size:15.5px;margin-bottom:8px;}
.faq-item p{font-size:14.5px;color:var(--slate);}
/* accordion variant: <details class="faq-item">. Plain .faq-item divs are untouched. */
details.faq-item{padding:0;}
details.faq-item summary{
    list-style:none;cursor:pointer;padding:20px 26px;
    display:flex;align-items:center;justify-content:space-between;gap:20px;
  }
details.faq-item summary::-webkit-details-marker{display:none;}
details.faq-item summary h3{margin:0;}
details.faq-item summary:hover h3{color:var(--cobalt-deep);}
details.faq-item summary:focus-visible{outline:2px solid var(--cobalt-deep);outline-offset:-4px;border-radius:var(--radius-md);}
/* chevron: half-square rotated 45deg points down, -135deg points up */
details.faq-item summary::after{
    content:"";flex-shrink:0;width:8px;height:8px;margin-right:4px;
    border-right:2px solid var(--slate-dim);border-bottom:2px solid var(--slate-dim);
    transform:translateY(-2px) rotate(45deg);transition:transform .25s ease;
  }
details.faq-item[open] summary::after{transform:translateY(2px) rotate(-135deg);}
details.faq-item p{margin:0;padding:0 26px 22px;}
/* ---------- cta ---------- */
.cta-band{
    background:linear-gradient(135deg, #101828, #1c2942);
    border-radius:28px;padding:64px 56px;position:relative;overflow:hidden;text-align:center;
  }
.cta-band .glow-c{width:400px;height:400px;background:var(--ember);opacity:0.25;bottom:-200px;left:20%;}
.cta-band .glow-d{width:360px;height:360px;background:var(--cobalt);opacity:0.3;top:-160px;right:10%;}
.cta-band h2{font-size:clamp(26px,4vw,38px);margin-bottom:16px;position:relative;z-index:1;color:#fff;}
.cta-band p{color:#AEB8C8;max-width:480px;margin:0 auto 32px;position:relative;z-index:1;}
/* .cap-link is var(--ink) by default — invisible on the dark band */
.cta-band .cap-link{color:#8FB4FF;position:relative;z-index:1;margin-right:28px;}
.cta-band .cap-link:hover{color:#fff;}
.cta-actions{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;position:relative;z-index:1;margin-bottom:28px;}
.contact-strip{display:flex;justify-content:center;gap:28px;flex-wrap:wrap;font-size:14px;color:#8B96AB;position:relative;z-index:1;}
.contact-strip a:hover{color:#fff;}
/* ---------- footer ---------- */
footer{padding:56px 0 40px;border-top:1px solid var(--border);}
.footer-row{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:32px;}
.footer-links{display:flex;gap:32px;flex-wrap:wrap;}
.footer-links a{font-size:14px;color:var(--slate);}
.footer-links a:hover{color:var(--ink);}
.footer-bottom{margin-top:40px;padding-top:24px;border-top:1px solid var(--border);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:12.5px;color:var(--slate-dim);}
/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease, transform .7s ease;}
.reveal.is-visible{opacity:1;transform:translateY(0);}
.stagger .is-visible:nth-child(1){transition-delay:.05s;}
.stagger .is-visible:nth-child(2){transition-delay:.15s;}
.stagger .is-visible:nth-child(3){transition-delay:.25s;}
.stagger .is-visible:nth-child(4){transition-delay:.35s;}
.stagger .is-visible:nth-child(5){transition-delay:.45s;}
.stagger .is-visible:nth-child(6){transition-delay:.55s;}
@media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    .ecg-track, .ticker-track, .glow{animation:none;}
    .reveal{opacity:1;transform:none;transition:none;}
    .cap-card:hover, .btn-primary:hover, .vert-card:hover{transform:none;}
  }
/* ---------- responsive ---------- */
@media (max-width:980px){
    .why-grid{grid-template-columns:1fr;gap:36px;}
    .cap-grid{grid-template-columns:repeat(2,1fr);}
    .vert-grid{grid-template-columns:repeat(2,1fr);}
    .process-row{grid-template-columns:repeat(2,1fr);row-gap:36px;}
    .process-row::before{display:none;}
    .stat-row{grid-template-columns:repeat(3,1fr);}
    .founder-card{padding:28px;}
  }
/* the full nav row (logo + 7 links + CTA) needs ~1100px, so it has to collapse
   to the drawer well before the 720px phone breakpoint */
@media (max-width:1140px){
    .nav-links{
      position:fixed;top:0;right:0;height:100vh;width:78%;max-width:320px;
      background:rgba(255,255,255,0.98);backdrop-filter:blur(16px);
      flex-direction:column;align-items:flex-start;padding:100px 28px 28px;
      transform:translateX(100%);transition:transform .35s ease;gap:28px;
      border-left:1px solid var(--border);box-shadow:-10px 0 30px rgba(16,24,40,0.08);
    }
    .nav-links.open{transform:translateX(0);}
    .nav-links > .btn{margin-top:28px;margin-left:0;}
    nav ul{flex-direction:column;gap:22px;}
    .menu-toggle{display:block;}
  }
@media (max-width:720px){
    .wrap{padding:0 20px;}
    .hero{padding:150px 0 70px;}
    .cap-grid{grid-template-columns:1fr;}
    .vert-grid{grid-template-columns:1fr;}
    .process-row{grid-template-columns:1fr;}
    .video-grid{grid-template-columns:1fr 1fr;}
    .stat-row{grid-template-columns:1fr;}
    .cta-band{padding:44px 24px;}
    .footer-row{flex-direction:column;}
    .founder-card{flex-direction:column;align-items:flex-start;}
  }
.stat-chip .source{font-size:12px;color:var(--slate-dim);margin-top:10px;display:block;}
/* ---------- scale cards ---------- */
.scale-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.scale-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:26px 24px;box-shadow:var(--shadow-sm);}
.scale-card .tag{color:var(--cobalt-deep);margin-bottom:10px;display:block;}
.scale-card h3{font-size:16.5px;margin-bottom:10px;}
.scale-card p{font-size:14px;color:var(--slate);margin-bottom:14px;}
.scale-card ul{display:flex;flex-direction:column;gap:8px;}
.scale-card ul li{font-size:13px;color:var(--slate);padding-left:16px;position:relative;}
.scale-card ul li::before{content:"";position:absolute;left:0;top:7px;width:5px;height:5px;border-radius:50%;background:var(--grad);}
@media (max-width:980px){.scale-grid{grid-template-columns:1fr;}}
/* ---------- breadcrumb ---------- */
.breadcrumb{font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:0.04em;color:var(--slate-dim);display:flex;gap:8px;align-items:center;margin-bottom:22px;}
.breadcrumb a{color:var(--slate-dim);}
.breadcrumb a:hover{color:var(--cobalt-deep);}
.breadcrumb .sep{opacity:0.5;}
.breadcrumb .current{color:var(--slate);}
/* ---------- pricing ---------- */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.pricing-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:26px 24px;box-shadow:var(--shadow-sm);}
.pricing-card .tag{color:var(--cobalt-deep);margin-bottom:10px;display:block;}
.pricing-card h3{font-size:16px;margin-bottom:10px;}
.pricing-card p{font-size:14px;color:var(--slate);}
@media (max-width:980px){.pricing-grid{grid-template-columns:1fr;}}
.linkedin-link{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--cobalt-deep);}
.linkedin-link:hover{color:var(--ember-deep);}
/* ---------- blog ---------- */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.post-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .3s ease, box-shadow .3s ease;display:block;}
.post-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);}
.post-mock{height:120px;background:linear-gradient(150deg, rgba(255,122,61,0.10), rgba(30,86,196,0.10));position:relative;}
.post-mock .chrome{position:absolute;top:10px;left:12px;display:flex;gap:5px;}
.post-mock .chrome span{width:7px;height:7px;border-radius:50%;background:rgba(16,24,40,0.14);}
.post-body{padding:22px 22px 24px;}
.post-card .tag{color:var(--cobalt-deep);margin-bottom:8px;display:block;}
.post-card h3{font-size:16px;margin-bottom:8px;line-height:1.35;}
.post-card p{font-size:13.5px;color:var(--slate);margin-bottom:14px;}
@media (max-width:980px){.post-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:720px){.post-grid{grid-template-columns:1fr;}}
/* ---------- article ---------- */
.article-body{max-width:none;}
.article-body h2{font-size:24px;margin:44px 0 16px;}
.article-body h3{font-size:18px;margin:32px 0 12px;font-family:'Inter',sans-serif;font-weight:600;}
.article-body p{font-size:16px;color:var(--slate);line-height:1.75;margin-bottom:18px;}
/* ul{list-style:none} is global, so give list items their own marker and
   hang it in the gutter — text then aligns flush with the paragraphs */
.article-body ul, .article-body ol{margin:0 0 18px;padding-left:0;color:var(--slate);font-size:16px;line-height:1.75;}
.article-body li{margin-bottom:8px;padding-left:22px;position:relative;}
.article-body ul li::before{
    content:"";position:absolute;left:2px;top:11px;
    width:6px;height:6px;border-radius:50%;background:var(--grad);
  }
.article-body ol{list-style:decimal;padding-left:22px;}
.article-body ol li{padding-left:4px;}
.article-body strong{color:var(--ink);}
.article-meta{display:flex;gap:16px;align-items:center;color:var(--slate-dim);font-size:13px;margin-bottom:8px;}
/* ---------- contact page ---------- */
/* two cards, so two tracks — a third empty track left them hugging the left edge */
.contact-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;}
.contact-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:30px 28px;box-shadow:var(--shadow-sm);}
.contact-card .tag{color:var(--cobalt-deep);margin-bottom:10px;display:block;}
.contact-card h3{font-size:16px;margin-bottom:8px;}
.contact-card p{font-size:14px;color:var(--slate);}
.contact-card a{color:var(--ink);font-weight:600;}
.contact-card a:hover{color:var(--cobalt-deep);}
@media (max-width:980px){.contact-grid{grid-template-columns:1fr;}}
.dev-placeholder{
    border:1.5px dashed var(--border-strong, rgba(16,24,40,0.22));
    border-radius:var(--radius-lg);
    background:var(--surface-soft);
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-align:center;gap:8px;padding:48px 24px;min-height:280px;
  }
.dev-placeholder .icon{width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg, rgba(255,122,61,0.14), rgba(30,86,196,0.12));display:flex;align-items:center;justify-content:center;margin-bottom:6px;}
.dev-placeholder h3{font-size:15px;color:var(--ink);}
.dev-placeholder p{font-size:13px;color:var(--slate-dim);max-width:380px;}
.dev-placeholder .tag-note{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--cobalt-deep);background:rgba(30,86,196,0.08);padding:4px 10px;border-radius:999px;margin-top:6px;}
.contact-form{display:flex;flex-direction:column;gap:16px;max-width:560px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.form-field{display:flex;flex-direction:column;gap:6px;}
.form-field label{font-size:13px;font-weight:600;color:var(--ink);}
.form-field input, .form-field textarea{
    font-family:'Inter',sans-serif;font-size:14px;color:var(--ink);
    background:var(--surface);border:1px solid var(--border);border-radius:10px;
    padding:12px 14px;outline:none;transition:border-color .2s ease;
  }
.form-field input:focus, .form-field textarea:focus{border-color:var(--cobalt);}
.form-field textarea{resize:vertical;min-height:120px;font-family:'Inter',sans-serif;}
@media (max-width:720px){.form-row{grid-template-columns:1fr;}}


/* sits outside .wrap in the markup — mirror .wrap so it lines up with the
   breadcrumb above and the article body below */
/* deliberately full-bleed: sits outside .wrap and spans the viewport */
.article-hero-image{
    width:100%;
    margin-top:40px;
}

/* sources are mostly 3:1 but not all — lock the ratio so every article hero
   renders at identical height regardless of the file it was given */
.article-hero-image img{
    width:100%;
    aspect-ratio:3 / 1;
    object-fit:cover;
    object-position:center;
    display:block;
    border-radius:16px;
}

.logo-scroll-wrap {
  overflow: hidden;
  width: 100%;
  padding: 20px 0;
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.logo-scroll-track {
  display: flex;
  width: max-content;
  animation: logoScroll 30s linear infinite;
}

.logo-scroll-group {
  display: flex;
  align-items: center;
  gap: 80px;
  padding-right: 80px;
}

.logo-item {
  height: 44px !important;
  width: 180px !important;
  object-fit: contain !important;
  flex-shrink: 0;
  display: block;
}

.logo-item.logo-big {
  height: 65px !important;
  width: 180px !important;
}

/* very wide wordmarks: widen the slot so they aren't width-starved */
.logo-item.logo-wide {
  height: 48px !important;
  width: 240px !important;
}

@keyframes logoScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- floating WhatsApp button ---------- */
/* Rendered from footer.php, so it is present on every page.
   z-index sits under the header's 100: when the mobile nav drawer is open it
   should cover this, not fight it. */
.wa-float{
    position:fixed;z-index:90;
    right:24px;bottom:24px;
    /* keeps clear of the iOS home indicator / browser chrome */
    right:calc(24px + env(safe-area-inset-right));
    bottom:calc(24px + env(safe-area-inset-bottom));
    width:56px;height:56px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:#25D366;color:#FFFFFF;
    box-shadow:0 10px 26px -6px rgba(37,211,102,0.55), 0 2px 6px rgba(16,24,40,0.12);
    transition:transform .25s ease, box-shadow .25s ease;
  }
.wa-float:hover{
    transform:translateY(-3px);
    box-shadow:0 16px 34px -8px rgba(37,211,102,0.6), 0 3px 8px rgba(16,24,40,0.14);
  }
.wa-float:focus-visible{outline:2px solid var(--cobalt);outline-offset:3px;}
.wa-float svg{display:block;}

@media (max-width:720px){
    .wa-float{
      width:52px;height:52px;
      right:calc(16px + env(safe-area-inset-right));
      bottom:calc(16px + env(safe-area-inset-bottom));
    }
  }
@media (prefers-reduced-motion: reduce){
    .wa-float{transition:none;}
    .wa-float:hover{transform:none;}
  }