/* Audax Media — shared design system. Extracted from the original single-file site,
   with retired components (AI agents, guarantee, comparison table) removed. */

  :root{
    /* Light theme, v3 tokens (2026-10-16 art direction pass). Brand cyan kept,
       values aligned to the brief's exact palette rather than the looser
       approximations the first pivot pass used. */
    --bg:#F7F8FA;
    --bg-2:#EDF1F6;
    --card:#FFFFFF;
    --card-2:#F8FAFC;
    --border:#D8DFE6;
    --border-2:#C7D2DD;
    --accent:#12B8DE;        /* fills, icons, glows */
    --accent-2:#00748C;      /* any cyan TEXT (AA on white) */
    --accent-deep:#05566F;
    --accent-display:#00748C;/* the big headline line (large text) — no longer auto-applied to every H1's last line, see .shine */
    --ink:#101C2B;           /* dark navy — headlines, primary button */
    --text:#101C2B;
    --text-dim:#526070;
    --text-faint:#67748A;
    --green:#1F9D5B;
    --red:#E0263D;
    --ai-glow-1:#B25AFF;
    --ai-glow-2:#CE5AFF;
    --r:10px;
    --r-lg:16px;
    --max:1240px;
    --ease:cubic-bezier(.22,.61,.36,1);
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
  section[id]{scroll-margin-top:84px;}
  body{
    background:var(--bg);
    color:var(--text);
    font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
    position:relative;
  }
  /* Fixed page backdrop: grid + radial glow */
  body::before{
    content:'';
    position:fixed;
    inset:0;
    z-index:-2;
    background:
      radial-gradient(1000px 600px at 50% -5%, rgba(22,194,245,0.16), transparent 60%),
      radial-gradient(800px 500px at 85% 12%, rgba(159,68,255,0.07), transparent 55%),
      var(--bg);
  }
  body::after{
    content:'';
    position:fixed;
    inset:0;
    z-index:-1;
    background-image:
      linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px);
    background-size:56px 56px;
    -webkit-mask-image:radial-gradient(circle at 50% 0%, #000 30%, transparent 80%);
    mask-image:radial-gradient(circle at 50% 0%, #000 30%, transparent 80%);
    pointer-events:none;
  }
  a{color:inherit;text-decoration:none;}
  ul{list-style:none;}
  svg{display:block;}
  .wrap{max-width:var(--max);margin:0 auto;padding:0 24px;}

  /* ============ Buttons ============ */
  .btn{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:9px;
    padding:15px 26px;
    border-radius:10px;
    font-weight:700;
    font-size:15px;
    letter-spacing:-0.01em;
    cursor:pointer;
    border:1px solid transparent;
    transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
    white-space:nowrap;
    overflow:hidden;
  }
  .btn .arrow{
    display:inline-flex;
    transition:transform .3s var(--ease);
  }
  .btn:hover .arrow{transform:translateX(5px);}
  .btn-primary{
    background:linear-gradient(180deg, var(--accent-2), var(--accent));
    color:#04141C;
    box-shadow:0 8px 22px -8px rgba(22,194,245,0.6), inset 0 1px 0 rgba(255,255,255,0.25);
  }
  .btn-primary:hover{
    transform:translateY(-2px);
    box-shadow:0 14px 34px -8px rgba(22,194,245,0.7), inset 0 1px 0 rgba(255,255,255,0.3);
  }
  /* Shine sweep on primary */
  .btn-primary::before{
    content:'';
    position:absolute;
    top:0;left:-120%;
    width:60%;height:100%;
    background:linear-gradient(100deg, transparent, rgba(255,255,255,0.45), transparent);
    transform:skewX(-18deg);
    transition:left .6s var(--ease);
  }
  .btn-primary:hover::before{left:150%;}
  .btn-secondary{
    background:rgba(255,255,255,0.02);
    color:var(--text);
    border:1px solid var(--border-2);
    backdrop-filter:blur(6px);
  }
  .btn-secondary:hover{
    border-color:var(--accent);
    color:var(--accent-2);
    transform:translateY(-2px);
  }
  .btn-small{padding:11px 18px;font-size:14px;}
  .btn:focus-visible{outline:2px solid var(--accent-2);outline-offset:3px;}

  /* ============ Hero Nav (pill, overlaid on video) ============ */
  .hx-nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    width:100%;
  }
  .hx-pill{
    display:flex;
    align-items:center;
    gap:2px;
    padding:6px 8px;
    border:1px solid var(--border-2);
    border-radius:100px;
    background:rgba(255,255,255,0.03);
    backdrop-filter:blur(12px) saturate(140%);
  }
  .hx-pill a{
    color:rgba(255,255,255,0.8);
    font-size:14px;
    font-weight:500;
    letter-spacing:-0.01em;
    padding:8px 14px;
    border-radius:100px;
    transition:color .2s var(--ease), background .2s var(--ease);
    white-space:nowrap;
  }
  .hx-pill a:hover{color:#fff;background:rgba(255,255,255,0.07);}
  .hx-pill a.contact{display:inline-flex;align-items:center;gap:6px;}
  .hx-pill a.contact svg{width:14px;height:14px;}
  .hx-hamburger{
    display:none;
    width:46px;height:46px;
    align-items:center;justify-content:center;
    border-radius:13px;
    border:1px solid var(--border-2);
    background:rgba(255,255,255,0.04);
    color:#fff;cursor:pointer;
    transition:background .2s var(--ease);
  }
  .hx-hamburger:hover{background:rgba(255,255,255,0.08);}
  .hx-hamburger svg{width:22px;height:22px;}
  /* Full-screen mobile menu (designed for phone, not a dropdown) */
  .hx-menu{
    position:fixed;
    inset:0;
    z-index:200;
    display:flex;
    flex-direction:column;
    padding:calc(18px + env(safe-area-inset-top)) 24px calc(26px + env(safe-area-inset-bottom));
    background:rgba(9,8,7,0.92);
    backdrop-filter:blur(22px) saturate(140%);
    opacity:0;
    visibility:hidden;
    transform:translateY(-10px);
    transition:opacity .32s var(--ease), transform .32s var(--ease), visibility .32s;
  }
  .hx-menu.open{opacity:1;visibility:visible;transform:none;}
  .hx-menu-head{display:flex;align-items:center;justify-content:space-between;}
  .hx-close{
    width:46px;height:46px;
    border-radius:13px;
    border:1px solid var(--border-2);
    background:rgba(255,255,255,0.05);
    color:#fff;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
  }
  .hx-close svg{width:22px;height:22px;}
  .hx-menu-links{
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:2px;
  }
  .hx-menu-links a{
    display:flex;align-items:center;justify-content:space-between;
    font-size:clamp(24px,7vw,32px);
    font-weight:700;
    letter-spacing:-0.02em;
    color:#fff;
    padding:15px 2px;
    border-bottom:1px solid rgba(255,255,255,0.07);
    transition:color .2s var(--ease), padding-left .25s var(--ease);
  }
  .hx-menu-links a::after{
    content:'';width:8px;height:8px;border-right:2px solid var(--text-faint);border-top:2px solid var(--text-faint);
    transform:rotate(45deg);transition:border-color .2s var(--ease);
  }
  .hx-menu-links a:active{color:var(--accent-2);padding-left:10px;}
  .hx-menu-links a:active::after{border-color:var(--accent-2);}
  .hx-menu-cta{width:100%;justify-content:center;margin-top:22px;}
  @media (max-width:1024px){
    .hx-pill{display:none;}
    .hx-hamburger{display:inline-flex;}
  }
  @media (min-width:1025px){
    .hx-menu{display:none !important;}
  }
  .logo img{height:40px;width:auto;display:block;}
  .foot .logo img{height:44px;}
  .hx-menu-head .logo img{height:34px;}
  @media (max-width:768px){ .logo img{height:33px;} .foot .logo img{height:36px;} }
  .logo{
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:800;
    font-size:18px;
    letter-spacing:-0.02em;
  }
  .logo .mark{
    width:30px;height:30px;
    border-radius:8px;
    background:linear-gradient(140deg, var(--accent-2), var(--accent-deep));
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 4px 14px -4px rgba(22,194,245,0.6);
  }
  .logo .mark svg{width:17px;height:17px;}

  /* ============ Section scaffolding ============ */
  section{position:relative;}
  .section-pad{padding:78px 24px;}
  .section-head{text-align:center;max-width:720px;margin:0 auto 44px;}
  .tag{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:var(--accent-2);
    font-weight:700;
    font-size:12.5px;
    text-transform:uppercase;
    letter-spacing:0.1em;
    margin-bottom:16px;
    padding:6px 13px;
    border:1px solid var(--border-2);
    border-radius:100px;
    background:rgba(22,194,245,0.06);
  }
  h2{
    font-size:clamp(29px,4.2vw,44px);
    font-weight:800;
    letter-spacing:-0.03em;
    line-height:1.12;
    margin-bottom:16px;
  }
  .section-desc{color:var(--text-dim);font-size:17px;line-height:1.6;}

  /* ============ Hero (video background) ============ */
  .hx-hero{
    position:relative;
    min-height:100svh;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    background:#000;
  }
  .hx-video{
    position:absolute;
    inset:0;
    width:100%;height:100%;
    object-fit:cover;
    z-index:0;
  }
  .hx-overlay{
    position:absolute;
    inset:0;
    z-index:1;
    background:
      radial-gradient(1200px 700px at 50% 22%, rgba(22,194,245,0.14), transparent 60%),
      linear-gradient(180deg, rgba(11,10,9,0.62) 0%, rgba(11,10,9,0.32) 42%, rgba(11,10,9,0.88) 100%);
  }
  .hx-content{
    position:relative;
    z-index:10;
    display:flex;
    flex-direction:column;
    flex:1;
    width:100%;
    max-width:var(--max);
    margin:0 auto;
    padding:calc(20px + env(safe-area-inset-top)) 24px 52px;
  }
  .hx-center{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    gap:24px;
    padding:44px 0;
  }
  .hx-lead{
    max-width:620px;
    color:rgba(255,255,255,0.8);
    font-size:clamp(15px,1.8vw,18px);
    line-height:1.6;
  }
  .hx-stat{
    font-size:14px;
    color:rgba(255,255,255,0.7);
    letter-spacing:0.01em;
  }
  .hx-stat b{color:#fff;font-weight:800;}
  .hx-substat{
    font-size:12.5px;
    color:rgba(255,255,255,0.5);
    letter-spacing:0.01em;
    margin-top:6px;
    max-width:520px;
  }
  .hx-kicker{
    text-transform:uppercase;
    letter-spacing:0.09em;
    color:rgba(255,255,255,0.8);
    font-size:13px;
    font-weight:600;
  }
  .hx-h1{
    font-weight:500;
    font-size:clamp(44px,12.5vw,150px);
    line-height:0.85;
    letter-spacing:-0.045em;
    color:#fff;
  }
  .hx-h1 .shine{display:block;font-weight:800;}
  .btn-round{border-radius:100px;padding:16px 32px;font-size:16px;}
  /* CSS-only shiny animated gradient (framer-motion equivalent) */
  .shine{
    background:linear-gradient(100deg, var(--accent) 0%, var(--accent) 38%, #ffffff 50%, var(--accent) 62%, var(--accent) 100%);
    background-size:200% auto;
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    color:transparent;
    animation:shine 3s linear infinite;
  }
  @keyframes shine{to{background-position:-200% center;}}
  @media (max-width:720px){
    .hx-center{padding:24px 0;gap:16px;}
    .hx-lead{line-height:1.5;}
    .hx-kicker{font-size:11.5px;letter-spacing:0.07em;}
    .hx-stat{font-size:13px;}
  }

  /* ============ Pain ============ */
  .pain-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
    gap:20px;
  }
  .pain-card{
    background:linear-gradient(180deg, var(--card), var(--bg-2));
    border:1px solid var(--border);
    border-radius:var(--r);
    padding:30px 28px;
    transition:transform .3s var(--ease), border-color .3s var(--ease);
  }
  .pain-card:hover{transform:translateY(-4px);border-color:var(--red);}
  .pain-ic{
    width:46px;height:46px;
    border-radius:11px;
    background:rgba(245,56,79,0.1);
    border:1px solid rgba(245,56,79,0.22);
    display:flex;align-items:center;justify-content:center;
    margin-bottom:18px;
  }
  .pain-ic svg{width:22px;height:22px;color:var(--red);}
  .pain-card h3{font-size:17px;font-weight:700;margin-bottom:9px;letter-spacing:-0.01em;}
  .pain-card p{color:var(--text-dim);font-size:14.5px;line-height:1.6;}

  /* ============ How it works ============ */
  .steps{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;}
  .step{
    position:relative;
    background:linear-gradient(180deg, var(--card), var(--bg-2));
    border:1px solid var(--border);
    border-radius:var(--r-lg);
    padding:34px 30px;
  }
  .step-top{display:flex;align-items:center;gap:14px;margin-bottom:18px;}
  .step-num{
    flex-shrink:0;
    width:46px;height:46px;
    border-radius:12px;
    background:linear-gradient(140deg, var(--accent-2), var(--accent-deep));
    color:#04141C;font-weight:700;font-size:19px;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 8px 20px -8px rgba(22,194,245,0.6);
  }
  .step-ic{width:26px;height:26px;color:var(--accent-2);}
  .step h3{font-size:19px;font-weight:700;margin-bottom:10px;letter-spacing:-0.01em;}
  .step p{color:var(--text-dim);font-size:15px;line-height:1.62;}

  /* ============ Pricing ============ */
  .pricing-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:18px;align-items:stretch;
  }
  /* 4 tiers side-by-side on desktop — tighten cards so they fit cleanly */
  @media(min-width:1060px){
    .pricing-grid{grid-template-columns:repeat(4,1fr);}
    .pricing-grid .price{padding:30px 22px;}
    .pricing-grid .price-amt{font-size:34px;}
    .pricing-grid .price-feats li{font-size:13.5px;}
  }
  .price{
    display:flex;flex-direction:column;
    background:linear-gradient(180deg, var(--card), var(--bg-2));
    border:1px solid var(--border);
    border-radius:var(--r-lg);
    padding:34px 28px;
  }
  .price.featured{
    border-color:rgba(22,194,245,0.55);
    background:
      radial-gradient(120% 80% at 50% 0%, rgba(22,194,245,0.14), transparent 60%),
      linear-gradient(180deg, var(--card-2), var(--bg-2));
    box-shadow:0 30px 70px -30px rgba(22,194,245,0.4);
  }
  @media(min-width:940px){
    .price.featured{transform:scale(1.045);}
    .anim .price.featured.is-in{transform:scale(1.045) !important;}
  }
  .price-badge{
    align-self:flex-start;
    background:linear-gradient(180deg,var(--accent-2),var(--accent));
    color:#04141C;font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:0.05em;
    padding:6px 13px;border-radius:100px;margin-bottom:16px;
  }
  .price-tier{font-size:13px;font-weight:700;color:var(--text-faint);text-transform:uppercase;letter-spacing:0.07em;margin-bottom:12px;}
  .price-amt{font-size:40px;font-weight:700;letter-spacing:-0.03em;line-height:1;margin-bottom:6px;}
  .price-amt span{font-size:15px;font-weight:600;color:var(--text-faint);letter-spacing:0;}
  .price-desc{color:var(--text-dim);font-size:14px;line-height:1.55;margin-bottom:24px;min-height:44px;}
  .price-feats{display:flex;flex-direction:column;gap:13px;margin-bottom:28px;flex-grow:1;}
  .price-feats li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;line-height:1.45;}
  .price-feats li svg{width:18px;height:18px;color:var(--accent);flex-shrink:0;margin-top:1px;}
  .price .btn{width:100%;justify-content:center;}
  .pricing-note{text-align:center;color:var(--text-faint);font-size:13.5px;margin-top:34px;}
  /* Sub-label under the Recommended badge */
  .price-badge-sub{
    font-size:12px;color:var(--accent-2);font-weight:600;
    margin-top:-10px;margin-bottom:14px;letter-spacing:0.01em;
  }
  /* Cross-sell notes — one per available add-on */
  .price-crosssell{
    font-size:12px;line-height:1.5;color:var(--text-dim);
    background:rgba(178,90,255,0.08);
    border:1px solid rgba(178,90,255,0.22);
    border-radius:10px;padding:9px 11px;margin-bottom:8px;
  }
  .price-crosssell:last-of-type{margin-bottom:16px;}
  .price-crosssell b{color:#C99BFF;font-weight:700;white-space:nowrap;}
  /* Premium — value of bundled agents */
  .price-includes{
    font-size:12.5px;line-height:1.5;font-weight:700;color:var(--accent-2);
    margin-top:-2px;margin-bottom:12px;
  }
  /* Per-tier guarantee line */
  .price-guarantee{
    display:flex;gap:8px;align-items:flex-start;
    font-size:12.5px;line-height:1.55;color:var(--text-dim);
    border-top:1px solid var(--border);
    padding-top:14px;margin-bottom:18px;
  }
  .price-guarantee svg{width:15px;height:15px;color:var(--accent);flex-shrink:0;margin-top:2px;}
  .price-guarantee b{color:#fff;font-weight:700;}
  .price-guarantee .fine{display:block;margin-top:4px;color:var(--text-faint);font-size:11.5px;}

  /* ============ About ============ */
  .about{
    display:grid;
    grid-template-columns:200px 1fr;
    gap:48px;align-items:center;
    max-width:920px;margin:0 auto;
  }
  .headshot{
    width:200px;height:200px;
    border-radius:50%;
    background:
      radial-gradient(circle at 50% 35%, #2A2118, #14110D);
    border:1px solid var(--border-2);
    display:flex;align-items:center;justify-content:center;
    position:relative;
    box-shadow:0 24px 60px -24px rgba(0,0,0,0.8);
  }
  .headshot::before{
    content:'';position:absolute;inset:-2px;border-radius:50%;
    background:conic-gradient(from 180deg, var(--accent), transparent 30%, transparent 70%, var(--accent-2));
    z-index:-1;opacity:.5;filter:blur(2px);
  }
  .headshot span{font-size:52px;font-weight:700;color:var(--accent-2);letter-spacing:-0.03em;}
  .headshot-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%;z-index:2;}
  .about-body .tag{margin-bottom:14px;}
  .about-body h2{text-align:left;font-size:clamp(26px,3.5vw,36px);margin-bottom:18px;}
  .about-body p{color:var(--text-dim);font-size:16.5px;line-height:1.75;margin-bottom:16px;}
  .about-body p strong{color:var(--text);}
  .about-sig{margin-top:20px;font-weight:800;color:var(--text);font-size:16px;}
  .about-sig span{display:block;font-weight:500;color:var(--text-faint);font-size:14px;margin-top:2px;}

  /* ============ FAQ ============ */
  .faq-list{max-width:780px;margin:0 auto;display:flex;flex-direction:column;gap:13px;}
  .faq-item{
    background:linear-gradient(180deg, var(--card), var(--bg-2));
    border:1px solid var(--border);
    border-radius:14px;overflow:hidden;
    transition:border-color .25s var(--ease);
  }
  .faq-item.open{border-color:var(--border-2);}
  .faq-q{
    width:100%;text-align:left;
    padding:22px 24px;
    background:none;border:none;
    color:var(--text);font-size:16px;font-weight:600;font-family:inherit;
    cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;
  }
  .faq-q:focus-visible{outline:2px solid var(--accent-2);outline-offset:-2px;}
  .faq-q .ic{
    flex-shrink:0;width:26px;height:26px;border-radius:8px;
    border:1px solid var(--border-2);
    display:flex;align-items:center;justify-content:center;
    color:var(--accent-2);transition:transform .3s var(--ease), background .25s var(--ease);
  }
  .faq-q .ic svg{width:15px;height:15px;}
  .faq-item.open .faq-q .ic{transform:rotate(45deg);background:rgba(22,194,245,0.12);}
  .faq-a{max-height:0;overflow:hidden;transition:max-height .35s var(--ease);}
  .faq-a-in{padding:0 24px 22px;color:var(--text-dim);font-size:15px;line-height:1.72;}

  /* ============ Final CTA + Footer ============ */
  .final{
    text-align:center;
    padding:120px 24px 90px;
    background:radial-gradient(700px 450px at 50% 120%, rgba(22,194,245,0.2), transparent 65%);
  }
  .final h2{max-width:760px;margin:0 auto 18px;font-size:clamp(30px,5vw,52px);}
  .final p{color:var(--text-dim);font-size:18px;margin-bottom:38px;}
  footer{border-top:1px solid var(--border);padding:38px 24px;}
  .foot{
    max-width:var(--max);margin:0 auto;
    display:flex;justify-content:space-between;align-items:center;
    flex-wrap:wrap;gap:20px;
  }
  .foot-links{display:flex;gap:18px;flex-wrap:wrap;align-items:center;}
  .foot-links a{color:var(--text-faint);font-size:14px;transition:color .2s var(--ease);display:inline-flex;align-items:center;min-height:44px;padding:0 2px;}
  .foot-links a:hover{color:var(--accent-2);}
  .foot-copy{color:var(--text-faint);font-size:13px;margin-top:22px;text-align:center;}

  /* ============ Responsive ============ */
  @media (max-width:820px){
    .about{grid-template-columns:1fr;text-align:center;gap:28px;}
    .headshot{margin:0 auto;}
    .about-body h2,.about-body{text-align:center;}
    .about-body .tag{margin-left:auto;margin-right:auto;}
  }
  @media (max-width:680px){
    .section-pad{padding:52px 20px;}
    /* Old Way vs Audax → one compact card per topic (was ~386px/row, now ~170px) */
    .compare-grid{gap:12px;}
    .compare-row{grid-template-columns:1fr;padding:16px 16px 14px;}
    .compare-mid{display:none;}
    .compare-col{padding:0;background:none;justify-content:flex-start;}
    .compare-col.before{
      border-bottom:1px solid var(--border);
      padding-bottom:11px;margin-bottom:11px;
    }
    /* Topic becomes the card title, shown once */
    .compare-col.before .compare-topic{
      order:-1;font-size:14.5px;color:var(--text);
      text-transform:none;letter-spacing:0;font-weight:800;margin-bottom:9px;
    }
    .compare-col.after .compare-topic{display:none;}
    .compare-label{font-size:10.5px;margin-bottom:4px;}
    .compare-col p{font-size:13px;line-height:1.5;}
    .foot{flex-direction:column;text-align:center;}
  }

  /* ============ Designed-for-mobile layer ============ */
  /* Sticky bottom CTA bar — phone only */
  .mobile-cta-bar{
    display:none;
    position:fixed;
    left:14px;right:14px;
    bottom:calc(14px + env(safe-area-inset-bottom));
    z-index:120;
    align-items:center;justify-content:center;gap:9px;
    padding:16px 22px;
    border-radius:100px;
    background:linear-gradient(180deg,var(--accent-2),var(--accent));
    color:#04141C;font-weight:800;font-size:16px;letter-spacing:-0.01em;
    box-shadow:0 16px 38px -10px rgba(22,194,245,0.75), inset 0 1px 0 rgba(255,255,255,0.3);
    transform:translateY(160%);
    transition:transform .42s var(--ease);
  }
  .mobile-cta-bar.show{transform:none;}
  .mobile-cta-bar:active{filter:brightness(0.94);}
  .mobile-cta-bar .arrow{transition:transform .3s var(--ease);}

  @media (max-width:768px){
    .mobile-cta-bar{display:flex;}

    /* Pricing → vertical stack, all plans visible at once, Core on top */
    .pricing-grid{
      display:flex;
      flex-direction:column;
      gap:16px;
    }
    .price.featured{order:-1;}

    /* AI-agent cards: single full-width column (fixes 340px min overflow) */
    .agents-grid{grid-template-columns:1fr;gap:16px;}
    .agent{padding:26px 20px;}
    .price{padding:26px 20px;}
    .pain-card{padding:24px 20px;}
    .pain-grid{gap:14px;}
    .guarantee{padding-top:64px;padding-bottom:64px;}
    .guarantee,.final{padding-left:20px;padding-right:20px;}
    .final{padding-bottom:78px;}  /* clear the sticky bar */

    /* Full-width primary CTAs with big touch targets */
    .hx-center .btn-round,
    .guarantee .btn,
    .final .btn{width:100%;justify-content:center;min-height:54px;}
  }

  /* Touch feedback — phones have no hover */
  @media (hover:none){
    .btn-primary:active{transform:scale(0.97);}
    .btn-secondary:active{border-color:var(--accent);color:var(--accent-2);}
    .pain-card:active,.step:active,.price:active{border-color:var(--accent);}
    .agent:active{border-color:rgba(178,90,255,0.5);}
    .faq-q:active{background:rgba(255,255,255,0.03);}
    .hx-pill a:active,.foot-links a:active{color:var(--accent-2);}
  }

  /* ============ Handcrafted micro-interactions ============ */
  /* Scroll reveal — subtle rise + blur-clear, staggered (gated by .anim to avoid FOUC) */
  .anim .section-head,
  .anim .segments > *,
  .anim .pillars > *,
  .anim .why-grid > *,
  .anim .platforms > *,
  .anim .cases > *,
  .anim .quotes > *,
  .anim .work-grid > *,
  .anim .pain-grid > *,
  .anim .compare-grid > *,
  .anim .steps > .step,
  .anim .agents-grid > *,
  .anim .pricing-grid > *,
  .anim .faq-list > *,
  .anim .about > *,
  .anim .guarantee > *,
  .anim .final .wrap > *{
    opacity:0;
    transform:translateY(18px);
    filter:blur(5px);
    transition:opacity .75s var(--ease), transform .75s var(--ease), filter .75s var(--ease);
  }
  .anim .is-in{opacity:1 !important;transform:none !important;filter:none !important;}

  /* v4: the block above starts every section-head/pillar/card/etc at
     opacity:0 + blur(5px) until a JS IntersectionObserver adds .is-in,
     with up to a 420ms stagger delay on top of a 750ms transition. That's
     exactly the "contenido invisible hasta que corre una animación de
     entrada" the brief rules out, confirmed live: Selected Work rendered
     fully blurred for over a second after scrolling to it. Neutralized
     instead of deleting the rule above, in case something still reads
     .is-in as a hook. */
  .anim .section-head,.anim .segments > *,.anim .pillars > *,.anim .pain-grid > *,
  .anim .steps > .step,.anim .why-grid > *,.anim .platforms > *,.anim .cases > *,
  .anim .quotes > *,.anim .work-grid > *,.anim .agents-grid > *,.anim .pricing-grid > *,
  .anim .faq-list > *,.anim .about > *,.anim .guarantee > *,.anim .final .wrap > *{
    opacity:1;transform:none;filter:none;transition:none;
  }

  /* Compact "good to know" list, v4, replaces the old Good Fit/Not a Fit
     two-column block. */
  .fit-list{list-style:none;margin:0;padding:0;display:grid;gap:14px;}
  .fit-list li{display:flex;align-items:flex-start;gap:12px;font-size:15px;color:var(--text-dim);line-height:1.5;}
  .fit-list svg{flex-shrink:0;width:20px;height:20px;color:var(--accent-2);margin-top:1px;}

  /* Pointer-tracking spotlight on cards */
  .pain-card,.step,.agent,.price{position:relative;isolation:isolate;}
  .pain-card::before,.step::before,.price::before{
    content:'';position:absolute;inset:0;border-radius:inherit;
    background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%), rgba(22,194,245,0.10), transparent 62%);
    opacity:0;transition:opacity .4s var(--ease);pointer-events:none;z-index:0;
  }
  .agent::before{
    content:'';position:absolute;inset:0;border-radius:inherit;
    background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%), rgba(178,90,255,0.15), transparent 62%);
    opacity:0;transition:opacity .4s var(--ease);pointer-events:none;z-index:0;
  }
  .pain-card:hover::before,.step:hover::before,.price:hover::before,.agent:hover::before{opacity:1;}
  .pain-card > *,.step > *,.price > *{position:relative;z-index:1;}

  /* How It Works — connector line drawn on scroll */
  .steps-line{
    position:absolute;top:58px;left:9%;right:9%;height:2px;z-index:0;
    background:linear-gradient(90deg, transparent, rgba(22,194,245,0.55), transparent);
    transform:scaleX(0);transform-origin:left center;
    transition:transform 1.1s var(--ease);
  }
  .steps-line.is-in{transform:scaleX(1);}
  @media (max-width:900px){ .steps-line{display:none;} }

  /* Before / After — refined hover */
  .compare-row{transition:border-color .3s var(--ease);}
  .compare-row:hover{border-color:var(--border-2);}
  .compare-mid svg{transition:transform .35s var(--ease);}
  .compare-row:hover .compare-mid svg{transform:translateX(4px);}
  .compare-row:hover .compare-col.after{background:rgba(84,192,138,0.075);}

  /* FAQ — accent bar grows when open */
  .faq-item{position:relative;}
  .faq-item::before{
    content:'';position:absolute;left:0;top:12px;bottom:12px;width:2px;border-radius:2px;
    background:linear-gradient(180deg,var(--accent-2),var(--accent));
    transform:scaleY(0);transform-origin:top;
    transition:transform .4s var(--ease);
  }
  .faq-item.open::before{transform:scaleY(1);}

  /* ============ Reduced motion ============ */
  @media (prefers-reduced-motion:reduce){
    *{animation:none !important;transition:none !important;scroll-behavior:auto !important;}
    .shine{-webkit-text-fill-color:var(--accent-2);color:var(--accent-2);}
  }
  /* ============ Trust strip ============ */
  .trust-strip {
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 20px 24px;
    background: rgba(255,255,255,0.015);
  }
  .trust-inner {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .trust-label {
    font-size: 11.5px;
    color: var(--text-faint);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    white-space: nowrap;
  }
  .trust-logos {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
  }
  .trust-logo-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: var(--text-faint);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    transition: color .2s var(--ease), opacity .2s var(--ease);
    cursor: default;
  }
  a.trust-logo-link { cursor: pointer; }
  a.trust-logo-link:hover { color: var(--text-dim); opacity: 1; }
  .trust-logo {
    width: 26px;
    height: 26px;
    object-fit: contain;
    filter: brightness(0) invert(0.55);
    transition: filter .2s var(--ease);
  }
  a.trust-logo-link:hover .trust-logo { filter: brightness(0) invert(0.8); }
  .trust-logo-google-ads { filter: brightness(0) invert(0.55); }
  .trust-logo-google    { filter: brightness(0) invert(0.55); }
  .trust-logo-meta      { filter: brightness(0) invert(0.55); }
  .trust-badge-pill {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-dim);
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border-2);
    border-radius: 100px;
    padding: 7px 16px;
    white-space: nowrap;
  }

  /* ============ Lead form ============ */
  .lead-form,.lead-success{max-width:560px;margin:0 auto;}
  .lead-form{
    display:flex;flex-direction:column;gap:18px;
    background:linear-gradient(180deg,var(--card),var(--bg-2));
    border:1px solid var(--border);border-radius:var(--r-lg);
    padding:34px 30px;
  }
  .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
  .form-row{display:flex;flex-direction:column;gap:8px;}
  .lead-form label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-faint);}
  .lead-form input,.lead-form select,.lead-form textarea{
    width:100%;font-family:inherit;font-size:15px;color:var(--text);
    background:rgba(255,255,255,0.03);border:1px solid var(--border-2);border-radius:10px;
    padding:13px 14px;transition:border-color .2s var(--ease), background .2s var(--ease);
  }
  .lead-form input::placeholder,.lead-form textarea::placeholder{color:var(--text-faint);}
  .lead-form input:focus,.lead-form select:focus,.lead-form textarea:focus{
    outline:none;border-color:var(--accent);background:rgba(22,194,245,0.05);
  }
  .lead-form select{
    appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:40px;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23847C6E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
    background-repeat:no-repeat;background-position:right 14px center;
  }
  .lead-form select:invalid{color:var(--text-faint);}
  .lead-form option{color:var(--text);background:var(--card);}
  .lead-form textarea{resize:vertical;min-height:110px;}
  .lf-submit{width:100%;justify-content:center;margin-top:4px;min-height:54px;}
  .lf-note{font-size:12.5px;color:var(--text-faint);text-align:center;margin-top:-4px;}
  .lf-optional{font-weight:400;color:var(--text-faint);font-size:0.9em;}
  /* Honeypot: off-screen, not display:none (some bots skip hidden fields but
     still fill in anything positioned off-canvas), real visitors never see it. */
  .hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
  .lead-success{
    text-align:center;background:linear-gradient(180deg,var(--card),var(--bg-2));
    border:1px solid var(--border);border-radius:var(--r-lg);padding:52px 30px;
  }
  .lead-success-ic{
    width:62px;height:62px;border-radius:50%;
    background:rgba(84,192,138,0.14);border:1px solid rgba(84,192,138,0.42);color:var(--green);
    display:flex;align-items:center;justify-content:center;margin:0 auto 20px;
  }
  .lead-success-ic svg{width:30px;height:30px;}
  .lead-success h3{font-size:23px;font-weight:800;letter-spacing:-0.01em;margin-bottom:12px;}
  .lead-success p{color:var(--text-dim);font-size:16px;line-height:1.6;}
  .lead-success a{color:var(--accent-2);text-decoration:underline;text-underline-offset:3px;}
  @media (max-width:560px){ .form-grid{grid-template-columns:1fr;} }

  /* ============ NEW: Hero (two columns, no background video) ============ */
  .hx-hero{min-height:auto;}
  .hero-grid{
    display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;
    padding:56px 0 72px;
  }
  .hero-copy .hx-kicker{display:inline-block;margin-bottom:18px;}
  .hero-h1{
    font-weight:800;letter-spacing:-0.035em;line-height:1.02;
    font-size:clamp(40px,5.4vw,72px);color:#fff;margin:0 0 20px;
  }
  .hero-h1 .shine{
    background:linear-gradient(90deg,var(--accent-2),#fff 45%,var(--accent-2));
    background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;
    animation:shine 6s linear infinite;
  }
  .hero-lead{font-size:clamp(16px,1.6vw,19px);color:var(--text-dim);line-height:1.6;max-width:52ch;margin:0 0 30px;}
  .hero-ctas{display:flex;gap:12px;flex-wrap:wrap;align-items:center;}
  .hero-note{margin-top:18px;font-size:13px;color:var(--text-faint);}
  .hero-note b{color:var(--text);font-weight:700;}

  /* ============ NEW: 9:16 reel ============ */
  .reel{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:end;}
  .reel .phone{
    aspect-ratio:9/16;border-radius:22px;overflow:hidden;
    background:linear-gradient(180deg,var(--card-2),var(--bg-2));
    border:1px solid var(--border-2);position:relative;
    box-shadow:0 30px 60px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.03) inset;
  }
  .reel .phone:nth-child(2){transform:translateY(-22px);}
  .reel .phone video,.reel .phone img{width:100%;height:100%;object-fit:cover;display:block;}
  /* Placeholder state — replace the inner markup with a <video> when a sample exists */
  .reel .phone.is-placeholder{
    border:1px dashed rgba(88,214,255,.45);
    background:
      radial-gradient(120% 70% at 50% 0%, rgba(22,194,245,.10), transparent 60%),
      linear-gradient(180deg,var(--card),var(--bg-2));
    display:flex;align-items:center;justify-content:center;text-align:center;padding:18px;
  }
  .reel .ph-label{font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-2);}
  .reel .ph-sub{display:block;margin-top:6px;font-size:11.5px;color:var(--text-faint);letter-spacing:.02em;}
  .reel .tag-pill{
    position:absolute;left:10px;top:10px;z-index:2;
    font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
    background:rgba(11,10,9,.72);border:1px solid rgba(255,255,255,.12);color:#fff;
    padding:5px 8px;border-radius:100px;backdrop-filter:blur(6px);
  }

  /* ============ NEW: two segment doors ============ */
  .segments{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
  .seg{
    display:flex;flex-direction:column;gap:14px;
    background:linear-gradient(180deg, var(--card), var(--bg-2));
    border:1px solid var(--border);border-radius:var(--r-lg);padding:34px 30px;
    text-decoration:none;color:inherit;position:relative;isolation:isolate;
    transition:transform .3s var(--ease), border-color .3s var(--ease);
  }
  .seg:hover{transform:translateY(-4px);border-color:var(--accent);}
  .seg .seg-kicker{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-2);}
  .seg h3{font-size:24px;font-weight:800;letter-spacing:-0.02em;margin:0;}
  .seg p{color:var(--text-dim);font-size:15px;line-height:1.6;margin:0;}
  .seg ul{margin:6px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;}
  .seg li{display:flex;gap:9px;align-items:flex-start;font-size:14px;color:var(--text-dim);}
  .seg li svg{width:16px;height:16px;color:var(--accent);flex-shrink:0;margin-top:2px;}
  .seg .seg-cta{margin-top:auto;padding-top:14px;display:inline-flex;align-items:center;gap:8px;color:var(--accent-2);font-weight:700;font-size:14.5px;}
  .seg .seg-cta svg{width:16px;height:16px;transition:transform .3s var(--ease);}
  .seg:hover .seg-cta svg{transform:translateX(4px);}

  /* ============ NEW: three pillars ============ */
  .pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
  .pillars.four{grid-template-columns:repeat(4,1fr);}
  @media (max-width:860px){ .pillars.four{grid-template-columns:repeat(2,1fr);} }
  .pillar{
    background:linear-gradient(180deg, var(--card), var(--bg-2));
    border:1px solid var(--border);border-radius:var(--r);padding:30px 26px;
    position:relative;isolation:isolate;
  }
  .pillar .num{
    display:inline-flex;align-items:center;justify-content:center;
    width:40px;height:40px;border-radius:11px;margin-bottom:16px;
    background:linear-gradient(140deg,var(--accent-2),var(--accent-deep));
    color:#04141C;font-weight:700;font-size:15px;
  }
  .pillar h3{font-size:20px;font-weight:800;letter-spacing:-0.015em;margin:0 0 10px;}
  .pillar p{color:var(--text-dim);font-size:14.5px;line-height:1.6;margin:0;}

  /* ============ NEW: work grid (portfolio) ============ */
  /* v3, 2026-10-16: title/category/description used to sit absolutely
     positioned over the bottom of the video with a dark gradient, the
     brief calls this out directly ("texto fuera del video"). Meta is now
     a normal content block below the media, in flow, plain card background. */
  /* Mobile-first: one column, everything stacks in document order
     (featured, then the two side pieces, then the extra one). The
     featured/side split only applies at 640px+, see below. */
  .work-grid{display:grid;grid-template-columns:1fr;gap:20px;max-width:900px;margin:0 auto;}
  .work-side{display:grid;gap:20px;}
  .work{
    border-radius:18px;overflow:hidden;position:relative;display:flex;flex-direction:column;
    background:var(--card);border:1px solid var(--border);
    box-shadow:0 14px 34px -26px rgba(15,27,42,.3);
  }
  .work video,.work img{width:100%;aspect-ratio:9/16;object-fit:cover;display:block;}
  .work .meta{position:static;padding:14px 16px 16px;background:none;}
  .work .meta b{display:block;font-size:14px;color:var(--ink);}
  .work .meta span{display:block;font-size:12.5px;color:var(--text-dim);margin-top:4px;line-height:1.5;}
  /* One featured piece, the rest secondary, per the v3 brief (6.5).
     .work-side stacks its own two children, so its height is whatever
     those two naturally need, independent of the featured column, no
     fighting CSS grid's implicit row-sizing to make two unrelated
     columns match pixel-for-pixel. */
  @media (min-width:640px){
    .work-grid{grid-template-columns:1.3fr 1fr;align-items:start;}
    .work-featured{grid-column:1;}
    .work-featured .work video,.work-featured .work img{aspect-ratio:3/4;}
    .work-featured .meta b{font-size:16px;}
    .work-side{grid-column:2;display:flex;flex-direction:column;gap:20px;}
    /* A 4th demo doesn't fit "one featured, two secondary" cleanly, so it
       gets its own row rather than being force-cropped into a wide frame
       (would cut the product or the burned-in captions, which the brief
       explicitly rules out). */
    .work-extra{grid-column:1/3;flex-direction:row;max-width:420px;margin:0 auto;}
    .work-extra video,.work-extra img{width:140px;aspect-ratio:9/16;flex-shrink:0;}
    .work-extra .meta{display:flex;flex-direction:column;justify-content:center;}
  }
  .work.is-placeholder{
    border:1px dashed rgba(88,214,255,.35);
    display:flex;align-items:center;justify-content:center;text-align:center;padding:16px;
  }
  .work.is-placeholder .ph-label{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-2);}

  /* ============ NEW: pricing tweaks for the new tiers ============ */
  .price-meta{display:flex;gap:10px;flex-wrap:wrap;margin:-6px 0 18px;}
  .price-meta span{
    font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
    color:var(--text-dim);background:rgba(255,255,255,.04);border:1px solid var(--border);
    padding:5px 9px;border-radius:100px;
  }
  .price-amt.is-placeholder{color:var(--accent-2);}
  .price-amt.is-placeholder small{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint);margin-top:6px;}

  /* ============ NEW: responsive for the new components ============ */
  @media (max-width:960px){
    .hero-grid{grid-template-columns:1fr;gap:36px;padding:36px 0 56px;}
    .reel{grid-template-columns:repeat(3,1fr);max-width:520px;}
    .reel .phone:nth-child(2){transform:none;}
    .pillars{grid-template-columns:1fr;}
  }
  @media (max-width:720px){
    .segments{grid-template-columns:1fr;}
    .reel{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;max-width:none;
          margin-left:-24px;margin-right:-24px;padding-left:24px;padding-right:24px;-webkit-overflow-scrolling:touch;}
    .reel .phone{flex:0 0 62vw;max-width:260px;scroll-snap-align:center;}
    .hero-ctas .btn{width:100%;justify-content:center;}
  }


  /* =====================================================================
     LIGHT THEME OVERRIDES
     Everything above was written dark-first. Variables handle most of it;
     this block pins the rules that used hard-coded whites, blacks and glows.
     ===================================================================== */

  /* page ground: soft light, faint cyan bloom top-centre, no grid texture */
  body{background:var(--bg);color:var(--text);}
  body::before{
    background:
      radial-gradient(900px 480px at 50% -10%, rgba(22,194,245,.14), transparent 65%),
      radial-gradient(700px 400px at 90% 20%, rgba(178,90,255,.06), transparent 60%);
    -webkit-mask-image:none;mask-image:none;opacity:1;
  }

  /* buttons — dark primary (Admiral), white outlined secondary */
  .btn-primary{
    background:var(--ink);color:#fff;
    box-shadow:0 10px 24px -12px rgba(15,27,42,.55);
  }
  .btn-primary:hover{box-shadow:0 16px 34px -12px rgba(15,27,42,.6);}
  .btn-primary::before{background:linear-gradient(100deg, transparent, rgba(255,255,255,.22), transparent);}
  .btn-secondary{background:#fff;color:var(--text);border-color:var(--border-2);backdrop-filter:none;}
  .btn-secondary:hover{border-color:var(--ink);color:var(--ink);}
  .btn .arrow{color:inherit;}

  /* hero shell */
  .hx-hero{background:transparent;}
  .hx-overlay{background:none;}
  .hx-content{padding-top:calc(16px + env(safe-area-inset-top));}

  /* nav pill — white glass, dark text */
  .hx-pill{background:rgba(255,255,255,.78);border-color:var(--border);backdrop-filter:blur(10px);
           box-shadow:0 10px 30px -18px rgba(15,27,42,.35);}
  .hx-pill a{color:var(--text-dim);}
  .hx-pill a:hover{color:var(--ink);background:rgba(15,27,42,.05);}
  .hx-pill a.contact{color:var(--ink);}
  .hx-pill a[aria-current]{color:var(--ink);font-weight:700;}
  .hx-hamburger{background:#fff;border-color:var(--border);color:var(--ink);box-shadow:0 8px 20px -14px rgba(15,27,42,.4);}
  .hx-hamburger:hover{background:var(--bg-2);}
  .hx-menu{background:var(--bg);}
  .hx-close{background:#fff;border-color:var(--border);color:var(--ink);}
  .hx-menu-links a{color:var(--text);border-bottom-color:var(--border);}
  .hx-menu-links a::after{border-color:var(--text-faint);}

  /* kicker pill (Admiral style) */
  .hx-kicker{
    display:inline-flex;align-items:center;gap:9px;
    padding:9px 16px 9px 13px;border-radius:100px;
    background:#fff;border:1px solid var(--border);
    box-shadow:0 8px 24px -16px rgba(15,27,42,.35);
    color:var(--text-dim);font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  }
  .hx-kicker .spark{width:14px;height:14px;color:var(--accent-2);flex-shrink:0;}
  .hx-kicker b{color:var(--accent-2);font-weight:800;}

  /* headline — dark, last line in brand cyan (no gradient animation on light) */
  .hero-h1{color:var(--ink);font-weight:700;letter-spacing:-0.04em;font-size:clamp(42px,5.6vw,76px);}
  .hero-h1 .shine{background:none;-webkit-text-fill-color:initial;color:var(--accent-display);animation:none;}
  .hero-lead{color:var(--text-dim);}
  .hero-note{color:var(--text-faint);}
  .hero-note b{color:var(--text);}

  /* stats row under the lead (Admiral) */
  .hero-stats{display:flex;gap:0;margin:26px 0 30px;flex-wrap:wrap;}
  .hero-stats > div{padding:0 28px 0 0;margin-right:28px;border-right:1px solid var(--border-2);}
  .hero-stats > div:last-child{border-right:none;margin-right:0;padding-right:0;}
  .hero-stats .n{display:block;font-size:clamp(26px,2.6vw,32px);font-weight:700;letter-spacing:-0.03em;color:var(--ink);line-height:1.1;}
  .hero-stats .l{display:block;margin-top:5px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint);}

  /* ===== masonry reel: 3 offset columns of 9:16 cards, bleeding off top & bottom ===== */
  .reel{display:none;}
  .masonry{
    position:relative;height:640px;overflow:hidden;
    display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:start;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%);
            mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%);
  }
  .masonry .col{display:flex;flex-direction:column;gap:16px;}
  .masonry .col:nth-child(1){margin-top:-70px;}
  .masonry .col:nth-child(2){margin-top:40px;}
  .masonry .col:nth-child(3){margin-top:-30px;}
  .masonry .card{
    aspect-ratio:9/16;border-radius:18px;overflow:hidden;position:relative;
    background:#fff;border:1px solid var(--border);
    box-shadow:0 18px 40px -22px rgba(15,27,42,.35);
  }
  .masonry .card video,.masonry .card img{width:100%;height:100%;object-fit:cover;display:block;}
  .masonry .card .tag-pill{
    position:absolute;left:10px;top:10px;z-index:2;
    font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
    background:rgba(15,27,42,.82);color:#fff;padding:5px 8px;border-radius:100px;
  }
  /* placeholder card — swap the inner markup for a <video> when a sample exists */
  .masonry .card.is-placeholder{
    border:1px dashed rgba(10,126,164,.45);
    background:
      radial-gradient(120% 70% at 50% 0%, rgba(22,194,245,.16), transparent 60%),
      linear-gradient(180deg,#fff,var(--bg-2));
    display:flex;align-items:center;justify-content:center;text-align:center;padding:14px;
  }
  .masonry .ph-label{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-2);}
  .masonry .ph-sub{display:block;margin-top:5px;font-size:11px;color:var(--text-faint);}
  /* gentle drift so the wall feels alive (disabled under reduced-motion via .anim gate) */

  /* trust strip — logos go dark on light */
  .trust-strip{background:#fff;border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
  .trust-logo,.trust-logo-google-ads,.trust-logo-google,.trust-logo-meta{filter:brightness(0) opacity(.55);}
  a.trust-logo-link:hover .trust-logo{filter:brightness(0) opacity(.9);}
  .trust-badge-pill{background:var(--bg);border-color:var(--border);color:var(--text-dim);}

  /* cards & sections */
  .pain-card,.step,.price,.seg,.pillar,.faq-item{
    background:#fff;border-color:var(--border);
    box-shadow:0 14px 34px -24px rgba(15,27,42,.28);
  }
  .pain-card:hover{border-color:var(--red);}
  .pain-card::before,.step::before,.price::before,.seg::before,.pillar::before{
    background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%), rgba(22,194,245,.12), transparent 62%);
  }
  .price.featured{
    border-color:rgba(12,156,203,.55);
    background:radial-gradient(120% 80% at 50% 0%, rgba(22,194,245,.12), transparent 60%),#fff;
    box-shadow:0 30px 70px -30px rgba(12,156,203,.35);
  }
  .price-badge{background:var(--ink);color:#fff;}
  .price-amt{color:var(--ink);}
  .price-guarantee b,.hx-stat b{color:var(--ink);}
  .price-meta span{background:var(--bg);border-color:var(--border);color:var(--text-dim);}
  .step-num,.pillar .num{color:#fff;background:var(--ink);}
  .steps-line{background:linear-gradient(90deg, transparent, rgba(12,156,203,.45), transparent);}
  .faq-q{color:var(--text);}
  .faq-q .ic{background:var(--bg);border-color:var(--border);color:var(--accent-2);}
  .faq-item.open .faq-q .ic{background:rgba(22,194,245,.12);}
  .faq-item::before{background:var(--accent);}

  /* about, v4: removed the white card background. The section already
     sits on its own light gradient background; wrapping photo+text in
     another white rectangle on top of that didn't add real separation. */
  .about{background:none;border:0;}
  .headshot{box-shadow:0 20px 50px -22px rgba(15,27,42,.4);}
  .about-sig{color:var(--ink);}

  /* final CTA band + footer */
  .final{background:radial-gradient(820px 520px at 50% 118%, rgba(22,194,245,.18), transparent 66%);}
  .final h2{color:var(--ink);}
  footer{background:#fff;border-top-color:var(--border);}

  /* form */
  .lead-form{background:#fff;border-color:var(--border);box-shadow:0 20px 50px -30px rgba(15,27,42,.3);}
  .lead-form input,.lead-form select,.lead-form textarea{background:#fff;border-color:var(--border-2);color:var(--text);}
  .lead-form input:focus,.lead-form select:focus,.lead-form textarea:focus{border-color:var(--accent-2);box-shadow:0 0 0 3px rgba(22,194,245,.18);}
  /* The light-theme rule above uses the `background` shorthand, which resets
     background-repeat and background-position. Re-declaring only the image
     left the chevron tiling across the whole field, so both are restated. */
  .lead-form select{
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237A8896' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
    background-repeat:no-repeat;
    background-position:right 14px center;
  }
  .lead-form option{color:var(--text);background:#fff;}

  /* sticky mobile bar — dark like the primary button */
  .mobile-cta-bar{background:var(--ink);color:#fff;box-shadow:0 16px 38px -10px rgba(15,27,42,.5);}

  /* responsive for the masonry */
  @media (max-width:960px){
    .masonry{height:520px;max-width:560px;}
    .hero-stats > div{padding-right:18px;margin-right:18px;}
  }
  @media (max-width:720px){
    .masonry{height:auto;overflow:visible;display:flex;gap:12px;-webkit-mask-image:none;mask-image:none;
             overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;
             margin-left:-24px;margin-right:-24px;padding-left:24px;padding-right:24px;-webkit-overflow-scrolling:touch;}
    .masonry .col{flex-direction:row;gap:12px;margin-top:0 !important;animation:none !important;}
    .masonry .card{flex:0 0 58vw;max-width:240px;scroll-snap-align:center;}
    .hero-stats{gap:0;margin:22px 0 26px;}
    .hero-stats > div{flex:1 1 0;min-width:0;padding-right:12px;margin-right:12px;}
    .hero-stats .n{font-size:24px;}
    .hero-stats .l{font-size:9.5px;letter-spacing:.08em;}
  }


  /* =====================================================================
     DARK HEADER BAR (Admiral) — full-width, sticky, white logo, coloured CTA
     ===================================================================== */
  .site-header{
    position:sticky;top:0;z-index:150;
    background:var(--ink);
    border-bottom:1px solid rgba(255,255,255,.06);
    box-shadow:0 10px 30px -20px rgba(15,27,42,.6);
  }
  .site-header .wrap{display:flex;align-items:center;min-height:68px;}
  .site-header .hx-nav{width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0;}
  .site-header .logo img{height:34px;width:auto;display:block;}
  /* links: plain, white, no pill */
  .site-header .hx-pill{
    background:none;border:0;box-shadow:none;backdrop-filter:none;padding:0;gap:6px;
    margin-left:auto;
  }
  .site-header .hx-pill a{color:rgba(255,255,255,.82);font-weight:600;font-size:14.5px;padding:9px 13px;border-radius:9px;}
  .site-header .hx-pill a:hover{color:#fff;background:rgba(255,255,255,.08);}
  .site-header .hx-pill a[aria-current]{color:#fff;font-weight:800;}
  /* Header CTA shares the primary-button geometry defined for .btn: 8px
     radius, 48px min height, no cyan glow. Edited here at the source rule
     rather than overridden later, so there is one place that sets it. */
  .site-header .hdr-cta{
    display:inline-flex;align-items:center;gap:8px;margin-left:8px;
    background:var(--accent);color:#04141C !important;font-weight:700 !important;
    padding:11px 18px !important;border-radius:8px !important;min-height:48px;
    box-shadow:none;transition:transform .2s var(--ease), background .2s var(--ease);
  }
  .site-header .hdr-cta:hover{background:var(--accent) !important;transform:translateY(-1px);box-shadow:none;}
  .site-header .hdr-cta:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
  .site-header .hdr-cta svg{width:15px;height:15px;}

  /* Services dropdown, desktop: click/keyboard-driven, never hover-only
     (brief requirement: "No depender de hover"). */
  .hx-drop{position:relative;}
  .hx-drop-btn{
    color:rgba(255,255,255,.82);font-weight:600;font-size:14.5px;padding:9px 13px;border-radius:9px;
    background:none;border:0;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:5px;
  }
  .hx-drop-btn:hover{color:#fff;background:rgba(255,255,255,.08);}
  .hx-drop-btn svg{width:12px;height:12px;transition:transform .2s var(--ease);}
  .hx-drop.open .hx-drop-btn svg{transform:rotate(180deg);}
  .hx-drop-menu{
    position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);
    width:460px;max-width:90vw;background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);
    box-shadow:0 24px 50px -20px rgba(15,27,42,.4);padding:10px;
    display:grid;grid-template-columns:1fr 1fr;gap:6px;
    opacity:0;visibility:hidden;transform:translateX(-50%) translateY(-6px);
    transition:opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
    z-index:160;
  }
  .hx-drop.open .hx-drop-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
  .hx-drop-menu a{display:block;padding:12px 14px;border-radius:10px;text-decoration:none;}
  .hx-drop-menu a:hover,.hx-drop-menu a:focus-visible{background:var(--bg-2);}
  .hx-drop-menu b{display:block;font-size:13.5px;font-weight:800;color:var(--ink);margin-bottom:2px;}
  .hx-drop-menu span{display:block;font-size:12px;color:var(--text-faint);line-height:1.4;}
  @media (max-width:980px){ .hx-drop{display:none;} } /* mobile nav uses the accordion in .hx-menu instead */

  /* Services accordion inside the full-screen mobile menu */
  .hx-menu-group-btn{
    width:100%;display:flex;align-items:center;justify-content:space-between;
    background:none;border:0;cursor:pointer;font-family:inherit;text-align:left;
    color:#fff;font-size:17px;font-weight:600;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.08);
  }
  .hx-menu-group-btn svg{width:14px;height:14px;transition:transform .2s var(--ease);flex-shrink:0;}
  .hx-menu-group.open .hx-menu-group-btn svg{transform:rotate(180deg);}
  .hx-menu-group-list{display:none;padding:4px 0 10px 12px;}
  .hx-menu-group.open .hx-menu-group-list{display:block;}
  .hx-menu-group-list a{display:block;padding:10px 0;color:rgba(255,255,255,.78);font-size:15px;text-decoration:none;}
  .hx-menu-group-list a:hover{color:#fff;}
  .site-header .hx-hamburger{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);color:#fff;box-shadow:none;}
  .site-header .hx-hamburger:hover{background:rgba(255,255,255,.14);}
  /* mobile menu goes dark to match */
  .hx-menu{background:var(--ink);}
  .hx-close{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);color:#fff;}
  .hx-menu-links a{color:#fff;border-bottom-color:rgba(255,255,255,.08);}
  .hx-menu-links a::after{border-color:rgba(255,255,255,.45);}
  .hx-menu .hx-menu-cta{background:var(--accent);color:#04141C;}
  /* hero no longer hosts the nav */
  .hx-content{padding-top:12px;}
  .hero-grid{padding-top:44px;}
  @media (max-width:900px){ .site-header .hx-pill{display:none;} }

  /* =====================================================================
     VIDEO WALL — continuous vertical marquee (site.js clones each column
     once so the loop is seamless; -50% == exactly one set of cards)
     ===================================================================== */
  .masonry .col{will-change:transform;gap:0;} /* spacing lives in .set padding so -50% == one set exactly */
  .masonry .col .set{display:flex;flex-direction:column;gap:16px;padding-bottom:16px;}
  @keyframes wallUp  {from{transform:translateY(0)}    to{transform:translateY(-50%)}}
  @keyframes wallDown{from{transform:translateY(-50%)} to{transform:translateY(0)}}
  .anim .masonry .col:nth-child(1){animation:wallUp   14s linear infinite;}
  .anim .masonry .col:nth-child(2){animation:wallDown 17s linear infinite;}
  .anim .masonry .col:nth-child(3){animation:wallUp   15s linear infinite;}
  .anim .masonry:hover .col{animation-play-state:paused;}
  /* the offsets now come from the loop itself — reset the static ones */
  .masonry .col:nth-child(1),.masonry .col:nth-child(2),.masonry .col:nth-child(3){margin-top:0;}
  .masonry .col:nth-child(2){transform:translateY(-50%);} /* start position for the down column when motion is off */
  @media (max-width:720px){
    .masonry .col{animation:none !important;transform:none !important;}
    .masonry .col .set{flex-direction:row;padding-bottom:0;}
    .masonry .col .set + .set{display:none;} /* no clones needed when it's a swipe row */
  }


  /* =====================================================================
     NEW SECTIONS — why AI video · platforms · proof placeholders
     ===================================================================== */

  /* Why AI video — 4 arguments */
  .why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
  .why{
    background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:28px 24px;
    box-shadow:0 14px 34px -24px rgba(15,27,42,.28);position:relative;isolation:isolate;
  }
  .why .ic{
    width:42px;height:42px;border-radius:12px;margin-bottom:16px;
    display:flex;align-items:center;justify-content:center;
    background:rgba(22,194,245,.12);color:var(--accent-2);
  }
  .why .ic svg{width:20px;height:20px;}
  /* reused (cyan icon chip) for the portfolio category cards */
  .pain-card > .ic{width:42px;height:42px;border-radius:12px;margin-bottom:16px;display:flex;align-items:center;justify-content:center;background:rgba(22,194,245,.12);color:var(--accent-2);}
  .pain-card > .ic svg{width:20px;height:20px;}
  .why h3{font-size:18px;font-weight:800;letter-spacing:-0.015em;margin:0 0 8px;}
  .why p{color:var(--text-dim);font-size:14.5px;line-height:1.6;margin:0;}

  /* Platforms — two large cards */
  .platforms{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
  .platform{
    background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:34px 32px;
    box-shadow:0 14px 34px -24px rgba(15,27,42,.28);position:relative;isolation:isolate;
    display:flex;flex-direction:column;gap:14px;
  }
  .platform .head{display:flex;align-items:center;gap:14px;}
  .platform .mark{
    width:48px;height:48px;border-radius:13px;display:flex;align-items:center;justify-content:center;
    background:var(--ink);color:#fff;flex-shrink:0;
  }
  .platform .mark svg{width:24px;height:24px;}
  .platform h3{font-size:22px;font-weight:800;letter-spacing:-0.02em;margin:0;}
  .platform .sub{font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint);margin-top:2px;}
  .platform p{color:var(--text-dim);font-size:15px;line-height:1.6;margin:0;}
  .platform ul{margin:4px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px;}
  .platform li{display:flex;gap:9px;align-items:flex-start;font-size:14.5px;color:var(--text);}
  .platform li svg{width:16px;height:16px;color:var(--accent);flex-shrink:0;margin-top:2px;}

  /* Client logos strip (hidden until real) */
  .logos-label{text-align:center;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint);margin:0 0 22px;}
  .logos-row{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;align-items:center;}
  .logo-slot{
    height:64px;border-radius:12px;display:flex;align-items:center;justify-content:center;
    background:#fff;border:1px solid var(--border);
  }
  .logo-slot img{max-height:30px;max-width:80%;filter:grayscale(1) opacity(.7);}
  .logo-slot.is-placeholder{border-style:dashed;border-color:rgba(10,126,164,.4);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-2);}

  /* Case studies (hidden until real) */
  .cases{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
  .case{
    background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:30px 28px;
    box-shadow:0 14px 34px -24px rgba(15,27,42,.28);display:flex;flex-direction:column;gap:10px;
  }
  .case .stat{font-size:clamp(34px,3.4vw,44px);font-weight:700;letter-spacing:-0.04em;color:var(--accent-2);line-height:1;}
  .case .what{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint);}
  .case h3{font-size:18px;font-weight:800;margin:6px 0 0;letter-spacing:-0.015em;}
  .case p{color:var(--text-dim);font-size:14.5px;line-height:1.6;margin:0;}
  .case.is-placeholder{border-style:dashed;border-color:rgba(10,126,164,.4);}

  /* Testimonials (hidden until real) */
  .quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
  .quote{
    background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:30px 28px;
    box-shadow:0 14px 34px -24px rgba(15,27,42,.28);display:flex;flex-direction:column;gap:16px;
  }
  .quote blockquote{margin:0;font-size:16px;line-height:1.65;color:var(--text);}
  .quote blockquote::before{content:'\201C';color:var(--accent);font-size:40px;line-height:0;vertical-align:-14px;margin-right:4px;font-weight:700;}
  .quote .who{display:flex;align-items:center;gap:12px;margin-top:auto;}
  .quote .who .avatar{width:40px;height:40px;border-radius:50%;background:var(--bg-2);border:1px solid var(--border);flex-shrink:0;}
  .quote .who b{display:block;font-size:14px;color:var(--ink);}
  .quote .who span{display:block;font-size:12.5px;color:var(--text-faint);}
  .quote.is-placeholder{border-style:dashed;border-color:rgba(10,126,164,.4);}

  @media (max-width:960px){
    .why-grid{grid-template-columns:1fr 1fr;}
    .cases,.quotes{grid-template-columns:1fr;}
    .logos-row{grid-template-columns:repeat(3,1fr);}
  }
  @media (max-width:720px){
    .why-grid,.platforms{grid-template-columns:1fr;}
    .logos-row{grid-template-columns:repeat(2,1fr);}
  }

  /* =====================================================================
     HERO RIBBON, SPECS, FORMAT LIBRARY, VENDOR COMPARISON
     Appended 2026-09-24. These are the last rules in the file, so they win
     the cascade over the earlier dark-theme and light-override blocks.
     Brand tokens in :root are untouched on purpose.
     ===================================================================== */

  /* --- hero: copy is now full width, the work sits under it --- */
  .hx-hero .hx-content > .hero-copy{
    max-width:860px;margin:0 auto;text-align:center;
    padding:52px 0 40px;
  }
  .hx-hero .hx-content > .hero-copy .hero-lead{margin-left:auto;margin-right:auto;max-width:660px;}
  .hx-hero .hx-content > .hero-copy .hero-stats{justify-content:center;}
  /* four stats now, so tighten the dividers to keep them on one line */
  .hx-hero .hx-content > .hero-copy .hero-stats > div{padding-right:20px;margin-right:20px;}
  .hx-hero .hx-content > .hero-copy .hero-stats > div:last-child{padding-right:0;margin-right:0;}
  .hx-hero .hx-content > .hero-copy .hero-ctas{justify-content:center;}
  .hx-hero .hx-content > .hero-copy .hero-note{max-width:560px;margin-left:auto;margin-right:auto;}

  /* --- the ribbon itself: one continuous horizontal marquee --- */
  .hero-ribbon{padding-bottom:64px;}
  .ribbon-label{
    text-align:center;margin:0 0 18px;
    font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint);
  }
  .ribbon-viewport{
    overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
            mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
  }
  .ribbon-track{display:flex;width:max-content;}
  .ribbon-set{display:flex;gap:16px;padding-right:16px;}
  @keyframes ribbonSlide{from{transform:translateX(0)} to{transform:translateX(-50%)}}
  .anim .ribbon-track{animation:ribbonSlide 64s linear infinite;}
  .anim .ribbon-viewport:hover .ribbon-track{animation-play-state:paused;}

  .rb{
    position:relative;margin:0;height:330px;flex:0 0 auto;
    border-radius:18px;overflow:hidden;background:#fff;
    border:1px solid var(--border);
    box-shadow:0 18px 40px -22px rgba(15,27,42,.35);
  }
  .rb.r-916{aspect-ratio:9/16;}
  .rb.r-34{aspect-ratio:3/4;}
  .rb.r-11{aspect-ratio:1/1;}
  .rb video,.rb img{width:100%;height:100%;object-fit:cover;display:block;}
  .rb figcaption{
    position:absolute;left:10px;bottom:10px;right:10px;z-index:2;
    display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  }
  .rb figcaption b,.rb figcaption span{
    font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
    padding:5px 8px;border-radius:100px;line-height:1;
  }
  .rb figcaption b{background:rgba(15,27,42,.86);color:#fff;}
  .rb figcaption span{background:rgba(22,194,245,.92);color:#04141C;}

  /* --- "Live in two weeks" as the payoff of the four steps --- */
  .how-outcome{
    margin:36px auto 0;max-width:680px;text-align:center;
    font-size:16px;line-height:1.6;color:var(--text-dim);
  }
  .how-outcome b{color:var(--ink);font-weight:800;}

  /* --- demo / client label on each portfolio piece --- */
  .work{position:relative;}
  .work-pill{
    position:absolute;left:10px;top:10px;z-index:2;
    font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
    background:rgba(15,27,42,.86);color:#fff;padding:5px 8px;border-radius:100px;
  }

  /* --- see-what-you-get disclosure above the plans --- */
  .specs,.static-card{
    max-width:820px;margin:0 auto 34px;background:#fff;
    border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;
    box-shadow:0 14px 34px -24px rgba(15,27,42,.28);
  }
  .specs-q{
    width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
    background:none;border:0;cursor:pointer;text-align:left;padding:22px 24px;
    font-family:inherit;font-size:15px;color:var(--text-dim);
  }
  .specs-q b{display:block;font-size:17px;font-weight:800;letter-spacing:-0.015em;color:var(--ink);margin-bottom:3px;}
  .specs-q .ic{
    width:30px;height:30px;border-radius:50%;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    background:var(--bg-2);border:1px solid var(--border);color:var(--accent-2);
    transition:transform .3s ease;
  }
  .specs-q .ic svg{width:15px;height:15px;}
  .specs.open .specs-q .ic{transform:rotate(45deg);}
  .specs-a{max-height:0;overflow:hidden;transition:max-height .35s ease;}
  .specs-a-in{padding:0 24px 24px;}
  .specs-list{margin:0;display:grid;gap:0;border-top:1px solid var(--border);}
  .specs-list > div{
    display:grid;grid-template-columns:180px 1fr;gap:18px;
    padding:14px 0;border-bottom:1px solid var(--border);
  }
  .specs-list dt{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint);}
  .specs-list dd{margin:0;font-size:14.5px;line-height:1.6;color:var(--text);}
  .price-amt small{
    display:block;margin-top:8px;font-size:11.5px;font-weight:700;
    letter-spacing:.06em;text-transform:uppercase;color:var(--accent-2);
  }

  /* --- angle & format library --- */
  .fmt-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
  .fmt{
    background:#fff;border:1px solid var(--border);border-radius:var(--r);
    padding:22px 20px;display:flex;flex-direction:column;gap:7px;
    box-shadow:0 14px 34px -26px rgba(15,27,42,.28);
  }
  .fmt.has-img{padding:0;overflow:hidden;}
  .fmt-thumb{aspect-ratio:4/5;background:var(--bg-2);border-bottom:1px solid var(--border);}
  /* text-only cards share a row with the illustrated ones, so centre them */
  .fmt:not(.has-img){justify-content:center;}
  .fmt-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
  .fmt.has-img .fmt-n{margin:20px 20px 0;}
  .fmt.has-img h3{margin-left:20px;margin-right:20px;}
  .fmt.has-img p{margin:0 20px 22px;}
  .fmt-n{font-size:11px;font-weight:800;letter-spacing:.1em;color:var(--accent-2);}
  .fmt h3{font-size:16.5px;font-weight:800;letter-spacing:-0.015em;margin:0;}
  .fmt p{color:var(--text-dim);font-size:14px;line-height:1.55;margin:0;}

  /* --- three vendors vs one team --- */
  .compare{
    max-width:920px;margin:0 auto;background:#fff;
    border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;
    box-shadow:0 14px 34px -24px rgba(15,27,42,.28);
  }
  .compare-row{display:grid;grid-template-columns:1.15fr 1fr 1fr;align-items:center;}
  .compare-row + .compare-row{border-top:1px solid var(--border);}
  .compare-row > div{padding:16px 20px;font-size:14.5px;line-height:1.5;}
  .compare-row .dim{font-weight:700;color:var(--ink);}
  .compare-row .trad{color:var(--text-faint);}
  .compare-row .aud{color:var(--ink);font-weight:600;background:rgba(22,194,245,.07);}
  .compare-head > div{
    font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
    color:var(--text-faint);padding-top:18px;padding-bottom:18px;
  }
  .compare-head .aud{color:var(--accent-2);}

  @media (max-width:1000px){
    .fmt-grid{grid-template-columns:repeat(3,1fr);}
  }
  @media (max-width:820px){
    .hx-hero .hx-content > .hero-copy{padding:36px 0 30px;text-align:left;}
    .hx-hero .hx-content > .hero-copy .hero-stats,.hx-hero .hx-content > .hero-copy .hero-ctas{justify-content:flex-start;}
    .hx-hero .hx-content > .hero-copy .hero-lead,.hx-hero .hx-content > .hero-copy .hero-note{margin-left:0;}
    .fmt-grid{grid-template-columns:repeat(2,1fr);}
    .specs-list > div{grid-template-columns:1fr;gap:5px;}
    .rb{height:240px;}
    .hero-ribbon{padding-bottom:44px;}
    .compare-row{grid-template-columns:1fr;}
    .compare-row > div{padding:10px 18px;}
    .compare-row .dim{padding-top:16px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint);}
    .compare-row .trad::before{content:"Usual: ";font-weight:700;color:var(--text-faint);}
    .compare-row .trad{color:var(--text);}
    .compare-row .aud::before{content:"Audax: ";font-weight:800;color:var(--accent-2);}
    .compare-row .aud{padding-bottom:16px;}
    .compare-head{display:none;}
  }
  @media (max-width:560px){
    .fmt-grid{grid-template-columns:1fr 1fr;}
    .fmt{padding:16px 14px;}
    .fmt.has-img .fmt-n{margin:14px 14px 0;}
    .fmt.has-img h3{margin-left:14px;margin-right:14px;}
    .fmt.has-img p{margin:0 14px 16px;}
  }

  /* reduced motion: the ribbon freezes and becomes a plain swipe row */
  @media (prefers-reduced-motion: reduce){
    .ribbon-track{animation:none !important;}
    .ribbon-viewport{overflow-x:auto;-webkit-overflow-scrolling:touch;}
    .ribbon-track .ribbon-set + .ribbon-set{display:none;}
  }

  /* four hero stats do not fit one phone row, so pair them 2x2 */
  @media (max-width:560px){
    .hx-hero .hx-content > .hero-copy .hero-stats{
      display:grid;grid-template-columns:1fr 1fr;gap:20px 0;margin:22px 0 26px;
    }
    .hx-hero .hx-content > .hero-copy .hero-stats > div{
      flex:none;min-width:0;padding:0 14px 0 0;margin:0;
      border-right:1px solid var(--border-2);
    }
    .hx-hero .hx-content > .hero-copy .hero-stats > div:nth-child(2n){border-right:none;padding-left:14px;}
    .hx-hero .hx-content > .hero-copy .hero-stats .n{font-size:21px;}
    .hx-hero .hx-content > .hero-copy .hero-stats .l{font-size:9.5px;letter-spacing:.07em;}
  }

  /* =====================================================================
     AUDAX VISUAL LANGUAGE — appended 2026-09-25, last block wins.
     The isotipo is built from hard diagonals and a chevron "x". None of that
     was expressed in the layout, which is what made the page read as a
     generic template: one soft white card repeated for every section.
     Four moves, all derived from the mark, none of them touching :root:
       1. chevron + diagonal corner notch as the recurring motif
       2. ONE dark editorial band in the body (the brand's real black)
       3. oversized tabular numerals, echoing the superscript in the mark
       4. asymmetric, left-anchored section heads on why / how / formats,
          so the centred rhythm is a deliberate contrast instead of the default
     ===================================================================== */

  /* --- 1. the chevron, straight off the isotipo, as the eyebrow mark --- */
  .tag::before{
    content:"";flex:0 0 auto;width:13px;height:10px;margin-right:2px;
    background:var(--accent);
    clip-path:polygon(0 0, 52% 0, 100% 50%, 52% 100%, 0 100%, 48% 50%);
  }
  /* the diagonal corner cut, same angle, on the surfaces that carry weight */
  .notch{position:relative;overflow:hidden;}
  .notch::before{
    content:"";position:absolute;top:0;right:0;width:34px;height:34px;z-index:3;
    background:var(--accent);
    clip-path:polygon(100% 0, 100% 100%, 0 0);
  }

  /* --- 2. the dark band --- */
  .band{
    background:var(--ink);
    padding:clamp(88px,9vw,132px) 24px;
    clip-path:polygon(0 2.6vw, 100% 0, 100% 100%, 0 calc(100% - 2.6vw));
  }
  .band .section-head h2{color:#fff;}
  .band .section-desc{color:rgba(255,255,255,.60);}
  .band .tag{color:var(--accent);}
  .band .pillar{
    background:rgba(255,255,255,.045);
    border-color:rgba(255,255,255,.13);
    box-shadow:none;
  }
  .band .pillar h3{color:#fff;}
  .band .pillar p{color:rgba(255,255,255,.64);}
  .band .pillar::after{
    content:"";position:absolute;left:0;top:0;width:100%;height:1px;
    background:linear-gradient(90deg,var(--accent),transparent 65%);opacity:.5;
  }

  /* --- 3. numerals as an index, not a chip ---
     Only .step-num keeps the large numeral. Pillars list parallel options
     (ecommerce / service / local), not an ordered sequence, so numbering
     them at this size implied an order that does not exist; their .num is
     hidden further down instead of restyled here. */
  .pillar .num,
  .step-num{
    width:auto;height:auto;border-radius:0;background:none;box-shadow:none;
    display:block;margin:0 0 14px;padding:0;
    font-size:clamp(34px,3.4vw,44px);font-weight:700;line-height:.9;
    letter-spacing:-0.05em;font-variant-numeric:tabular-nums;
    color:transparent;-webkit-text-stroke:1.5px var(--accent-2);
  }
  .band .pillar .num{-webkit-text-stroke-color:var(--accent);}
  .step-top{align-items:flex-start;gap:16px;}
  .step-top .step-num{margin-bottom:0;}
  .step-ic{margin-left:auto;opacity:.5;}

  /* --- 4. left-anchored section heads ---
     These were position:sticky;top:104px. A sticky item keeps its grid area
     but paints outside it once it detaches, so any sibling auto-placed into
     the same column lands underneath it: on the home #how, .section-desc
     ("Some of this is a one-time project...") sat in column 1 under the head
     and the two rendered on top of each other while scrolling. Made static
     at the source rather than patched with z-index, so every page using
     .section-split keeps its text inside its own block. */
  .section-split > .wrap{
    display:grid;grid-template-columns:minmax(0,390px) minmax(0,1fr);
    gap:clamp(30px,4vw,60px);align-items:start;
  }
  .section-split .section-head{
    text-align:left;max-width:none;margin:0;
    position:static;
  }
  .section-split .section-head h2{font-size:clamp(26px,2.5vw,35px);line-height:1.12;}
  .section-split .section-head .tag{justify-content:flex-start;}
  .section-split .why-grid{grid-template-columns:1fr 1fr;}
  .section-split .fmt-grid{grid-template-columns:repeat(3,1fr);}
  .section-split .steps{grid-template-columns:1fr 1fr;}
  .section-split .steps-line{display:none;}
  .section-split .how-outcome{margin-left:0;text-align:left;max-width:none;}
  .section-split .pricing-note{text-align:left;}

  @media (max-width:980px){
    .section-split > .wrap{grid-template-columns:1fr;gap:30px;}
    .section-split .section-head{position:static;margin-bottom:6px;}
    .section-split .fmt-grid{grid-template-columns:repeat(2,1fr);}
  }
  @media (max-width:720px){
    .band{clip-path:polygon(0 4.5vw, 100% 0, 100% 100%, 0 calc(100% - 4.5vw));}
    .section-split .why-grid,
    .section-split .steps{grid-template-columns:1fr;}
    .notch::before{width:26px;height:26px;}
  }
  @media (prefers-reduced-motion: reduce){
    .section-split .section-head{position:static;}
  }

  /* second pill on the video-wall cards (category + type), same system as the
     home ribbon so the two pages read as one site */
  .masonry .card .tag-type{
    position:absolute;right:10px;top:10px;z-index:2;
    font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
    background:rgba(22,194,245,.92);color:#04141C;padding:5px 8px;border-radius:100px;
  }
  .wall-label{
    text-align:center;margin:0 0 14px;
    font-size:10.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
    color:var(--text-faint);
  }

  /* subpage heroes keep the two-column grid, so their stat row has less width
     than the home page's. Tighten the dividers so three stats stay on one line. */
  .hero-grid .hero-stats > div{padding-right:18px;margin-right:18px;}
  .hero-grid .hero-stats > div:last-child{padding-right:0;margin-right:0;}
  /* home-services has no video wall (no real trade creative), so its hero is one column */
  .hero-grid.is-single{grid-template-columns:1fr;max-width:820px;}

  /* =====================================================================
     VOZ TIPOGRAFICA — v3, 2026-10-16
     Archivo Black (weight 400, one weight only) was carrying every H1 and
     numeral at near-max boldness by default, the house style everyone
     reaches for first and the exact "which template is this" look the v3
     brief calls out. Replaced with Instrument Sans at 500/600: still has
     real character at large sizes, but stops forcing every headline to
     read as a shout. Picked over Sora and Hanken Grotesk (the other two
     compared on this same hero/portfolio/form) for warmer letterforms that
     hold up better in the editorial, work-forward composition this pass
     is going for. OFL-licensed, served from Google Fonts, no purchase or
     availability assumption. Inter stays for body copy and UI, it was
     already doing that job well.
     Los tokens van en body, NO en :root, para no tocar la paleta.
     ===================================================================== */
  body{
    --f-display:'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
    --f-ui:'Inter', system-ui, -apple-system, sans-serif;
  }

  /* Titulares: pesos 500-600, nunca 900. Instrument Sans ya tiene personalidad
     propia a estos tamanos, no necesita el peso maximo para notarse. */
  .hero-h1,
  .section-head h2,
  .final h2,
  .about h2{
    font-family:var(--f-display);
    font-weight:600;
    letter-spacing:-0.01em;
    text-transform:none;
  }
  .hero-h1{
    font-size:clamp(38px,5.2vw,72px);
    line-height:1.02;
    letter-spacing:-0.03em;
  }
  .section-head h2{
    font-size:clamp(26px,3vw,42px);
    line-height:1.08;
    letter-spacing:-0.025em;
  }
  .section-split .section-head h2{font-size:clamp(24px,2.5vw,34px);line-height:1.1;}

  /* el acento del titular deja de ser "lo mismo en cyan" y pasa a ser
     un cambio de familia: serif italica. Es el golpe de caracter. */
  .hero-h1 .shine{
    font-family:inherit;
    font-weight:inherit;
    font-style:normal;
    letter-spacing:inherit;
    color:var(--accent-display);
    text-transform:none;
  }

  /* numerales en la misma display, tabulares, para que el indice se lea como indice */
  .pillar .num,
  .step-num,
  .hero-stats .n,
  .price-amt,
  .case .stat{
    font-family:var(--f-display);
    font-weight:400;
    letter-spacing:0;
  }
  .hero-stats .n{font-size:clamp(26px,2.5vw,33px);letter-spacing:-0.02em;}
  .pillar .num,.step-num{-webkit-text-stroke-width:1.2px;}

  /* el resto sigue en Inter, explicito para que nadie lo herede por error */
  body,.hero-lead,.section-desc,p,li,dd,dt,input,select,textarea,.btn,.tag,.faq-q{
    font-family:var(--f-ui);
  }

  /* =====================================================================
     HERO: TIRA DE TRABAJO — 2026-09-27
     Fila alineada con scroll continuo, al estilo de las galerias de producto
     del rubro: etiqueta de tipo arriba a la izquierda, categoria al pie, y
     las piezas de los extremos sangrando fuera de pantalla.
     ===================================================================== */
  .hx-hero{position:relative;overflow:hidden;}
  .hx-hero .hx-content{position:relative;z-index:2;}
  .hx-hero .hx-content > .hero-copy{padding:64px 0 46px;}

  .strip{padding-bottom:70px;}
  .strip-label{
    text-align:center;margin:0 0 20px;
    font-family:var(--f-ui);
    font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
    color:var(--text-faint);
  }
  .strip-viewport{
    overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
            mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
  }
  .strip-track{display:flex;width:max-content;}
  .strip-set{display:flex;gap:14px;padding-right:14px;}
  @keyframes stripSlide{from{transform:translateX(0)} to{transform:translateX(-50%)}}
  .anim .strip-track{animation:stripSlide 68s linear infinite;}
  .anim .strip-viewport:hover .strip-track{animation-play-state:paused;}

  .sc{
    position:relative;margin:0;height:340px;flex:0 0 auto;
    border-radius:16px;overflow:hidden;background:#fff;
    border:1px solid var(--border);
    box-shadow:0 20px 44px -26px rgba(15,27,42,.4);
  }
  .sc.r-916{aspect-ratio:9/16;}
  .sc.r-34 {aspect-ratio:3/4;}
  .sc.r-11 {aspect-ratio:1/1;}
  .sc.r-169{aspect-ratio:16/9;}
  .sc video,.sc img{width:100%;height:100%;object-fit:cover;display:block;}

  /* etiqueta de tipo arriba a la izquierda, en monoespaciada */
  .sc-type{
    position:absolute;left:9px;top:9px;z-index:2;
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size:10px;font-weight:600;letter-spacing:.02em;
    background:rgba(15,27,42,.82);color:#fff;
    padding:4px 7px;border-radius:6px;
    backdrop-filter:blur(4px);
  }
  /* categoria al pie, sobre un degrade para que se lea sobre cualquier frame */
  .sc figcaption{
    position:absolute;left:0;right:0;bottom:0;z-index:2;
    padding:22px 11px 9px;
    font-family:var(--f-ui);
    font-size:11px;font-weight:700;letter-spacing:.04em;color:#fff;
    background:linear-gradient(180deg,transparent,rgba(15,27,42,.72));
  }

  @media (max-width:820px){
    .hx-hero .hx-content > .hero-copy{padding:36px 0 30px;}
    .sc{height:236px;}
    .strip{padding-bottom:44px;}
  }
  @media (prefers-reduced-motion: reduce){
    .strip-track{animation:none !important;}
    .strip-viewport{overflow-x:auto;-webkit-overflow-scrolling:touch;}
    .strip-track .strip-set + .strip-set{display:none;}
  }

  /* =====================================================================
     FAMILIAS DE ANGULO + STATS INTERACTIVOS — 2026-09-25
     La seccion de familias va como LISTA con reglas, no como tarjetas:
     el sitio ya tenia cinco grillas de tarjetas blancas identicas y esa
     repeticion era buena parte de la sensacion de plantilla.
     ===================================================================== */
  .fam-list{display:flex;flex-direction:column;border-top:1px solid var(--border);}
  .fam{
    display:grid;grid-template-columns:minmax(0,230px) minmax(0,1fr);
    gap:clamp(16px,3vw,44px);align-items:baseline;
    padding:26px 0;border-bottom:1px solid var(--border);
    position:relative;
  }
  .fam::before{
    content:"";position:absolute;left:0;top:-1px;width:0;height:1px;
    background:var(--accent);transition:width .45s cubic-bezier(.2,.7,.3,1);
  }
  .fam:hover::before{width:100%;}
  .fam h3{
    font-family:var(--f-display);font-weight:400;
    font-size:clamp(19px,1.9vw,25px);line-height:1.05;letter-spacing:-0.025em;
    margin:0;color:var(--ink);
  }
  .fam p{margin:0;color:var(--text-dim);font-size:15px;line-height:1.62;}
  @media (max-width:640px){
    .fam{grid-template-columns:1fr;gap:8px;padding:20px 0;}
  }

  /* --- stats del hero: contador + detalle al hover --- */
  .hero-stats .stat{position:relative;cursor:default;}
  .hero-stats .stat .l{transition:opacity .22s ease;}
  .stat-detail{
    position:absolute;left:0;top:100%;margin-top:6px;z-index:5;
    font-family:var(--f-ui);
    font-size:11px;font-weight:600;line-height:1.35;color:var(--accent-2);
    opacity:0;transform:translateY(-3px);
    transition:opacity .22s ease, transform .22s ease;
    pointer-events:none;max-width:210px;
  }
  .hero-stats .stat:hover .stat-detail,
  .hero-stats .stat:focus-within .stat-detail{opacity:1;transform:translateY(0);}
  .hero-stats .stat:hover .l{opacity:.35;}
  /* el numero no debe saltar de ancho mientras cuenta */
  .hero-stats .n{font-variant-numeric:tabular-nums;}
  @media (max-width:820px){
    .stat-detail{display:none;}   /* en touch no hay hover, no tiene sentido */
  }

  /* =====================================================================
     FOUNDER — rehecho 2026-09-27
     Antes: la foto quedaba centrada verticalmente contra un bloque de texto
     mucho mas alto, asi que flotaba en el medio con un hueco vacio debajo, y
     el titular ocupaba cuatro lineas en display. Ahora la columna de la foto
     se alinea arriba y lleva la firma pegada, y el titular es corto.
     ===================================================================== */
  .about{
    grid-template-columns:minmax(0,220px) minmax(0,1fr);
    align-items:start;
    gap:clamp(24px,4vw,52px);
  }
  .about-media{display:flex;flex-direction:column;gap:16px;align-items:flex-start;}
  .about .headshot{width:100%;max-width:220px;height:auto;aspect-ratio:4/5;border-radius:16px;margin:0;}
  .about .headshot-img{width:100%;height:100%;object-fit:cover;object-position:center 22%;border-radius:16px;}
  .about .about-sig{margin-top:0;font-size:15px;}
  .about .about-sig span{font-size:13px;}

  .about-body h2{
    font-size:clamp(24px,2.8vw,38px);
    line-height:1.06;
    letter-spacing:-0.025em;
    margin-bottom:16px;
    max-width:17ch;
  }
  .about-body p{font-size:16px;line-height:1.72;}

  /* credenciales verificables: es la unica prueba real que hay hasta que
     exista un caso de cliente, asi que cierra la seccion en vez de la firma */
  .about-proof{
    list-style:none;margin:26px 0 0;padding:20px 0 0;
    border-top:1px solid var(--border);
    display:flex;flex-wrap:wrap;gap:0;
  }
  .about-proof li{
    padding-right:26px;margin-right:26px;
    border-right:1px solid var(--border);
  }
  .about-proof li:last-child{border-right:none;margin-right:0;padding-right:0;}
  .about-proof b{
    display:block;font-family:var(--f-display);font-weight:400;
    font-size:22px;letter-spacing:-0.02em;color:var(--ink);line-height:1;
  }
  .about-proof span{
    display:block;margin-top:5px;
    font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
    color:var(--text-faint);
  }

  @media (max-width:760px){
    .about{grid-template-columns:1fr;gap:22px;}
    .about-media{flex-direction:row;align-items:center;gap:14px;}
    .about .headshot{width:96px;max-width:96px;flex:0 0 96px;}
    .about-body h2{max-width:none;}
    .about-proof li{padding-right:18px;margin-right:18px;}
  }

  /* la etiqueta de la tira paso de arriba a abajo: ya no compite con el titular */
  .strip-label{margin:18px 0 0;}

  /* el titular del hero son tres lineas fijas con <br>: si la mas larga se parte
     se pierde el ritmo de tres tiempos, asi que la caja va mas ancha y el cuerpo
     un punto mas chico */
  .hx-hero .hx-content > .hero-copy{max-width:980px;}
  .hero-h1{font-size:clamp(34px,4.8vw,66px);}

  /* la fila de credenciales quedaba pegada al borde inferior de la tarjeta */
  .about{padding-bottom:clamp(34px,4vw,46px);}
  .about-proof{margin-bottom:0;}

  /* =====================================================================
     PULIDO DE LA MITAD DE ABAJO — 2026-09-27
     Tres problemas distintos:
       1. BUG de layout: en las secciones partidas, cualquier TERCER hijo del
          .wrap caia en la columna 1 de la fila 2 y quedaba huerfano abajo a
          la izquierda, con 94px de hueco. Pasa a la columna del contenido.
       2. Archivo Black se veia dura en tamanos chicos. Se reserva para los
          momentos grandes (h1, h2, numerales) y lo chico vuelve a Inter.
       3. Interlineado y cuerpo apretados para una pagina de 13.000px.
     ===================================================================== */

  /* --- 1. el huerfano --- */
  .section-split > .wrap > .how-outcome,
  .section-split > .wrap > .pricing-note{
    grid-column:2;
    margin-top:26px;
  }

  /* --- 2. Archivo Black solo en los momentos grandes --- */
  .fam h3{
    font-family:var(--f-ui);
    font-weight:800;
    font-size:clamp(17px,1.6vw,20px);
    letter-spacing:-0.015em;
    line-height:1.25;
  }
  .about-proof b{
    font-family:var(--f-ui);
    font-weight:800;
    font-size:20px;
    letter-spacing:-0.015em;
  }
  /* el tracking muy cerrado es parte de lo que la hace sentir dura */
  .section-head h2,
  .about-body h2{letter-spacing:-0.015em;}
  .hero-h1{letter-spacing:-0.02em;}

  /* --- 3. aire para leer --- */
  .section-desc{line-height:1.72;}
  .why p,
  .step p,
  .fam p,
  .platform p,
  .pillar p,
  .seg p{font-size:15.5px;line-height:1.72;}
  .work .meta span{line-height:1.5;}
  .specs-list dd{line-height:1.7;}
  .faq-a-in{line-height:1.75;}

  /* --- ritmo entre secciones: 78px era corto para una pagina tan larga --- */
  .section-pad{padding-top:94px;padding-bottom:94px;}
  .section-head{margin-bottom:52px;}
  .section-split .section-head{margin-bottom:0;}

  @media (max-width:980px){
    /* apilado: el huerfano vuelve a columna unica */
    .section-split > .wrap > .how-outcome,
    .section-split > .wrap > .pricing-note{grid-column:1;margin-top:20px;}
  }
  @media (max-width:720px){
    .section-pad{padding-top:64px;padding-bottom:64px;}
    .section-head{margin-bottom:36px;}
  }

  /* el row-gap del grid partido se sumaba al margen del pie de seccion y daba
     84px de separacion; el gap horizontal se mantiene, el vertical lo controla
     el propio elemento */
  .section-split > .wrap{row-gap:0;}
  .section-split > .wrap > .how-outcome,
  .section-split > .wrap > .pricing-note{margin-top:30px;}

  /* =====================================================================
     RITMO DE SECCION — 2026-09-27
     Alineado con como marcan y espacian las secciones pynk.studio,
     99ads.com y 225media.com. Los tres coinciden en tres cosas que este
     sitio no hacia: la etiqueta de seccion es texto pelado (sin pastilla,
     sin borde, sin icono), el tracking es mucho mas ancho, y respiran
     entre 100 y 140px por seccion contra los 94 de aca.
     ===================================================================== */

  /* --- A. la etiqueta deja de ser pastilla y pasa a ser texto --- */
  .tag{
    display:block;
    padding:0;
    border:0;
    border-radius:0;
    background:none;
    font-size:11.5px;
    font-weight:700;
    letter-spacing:0.14em;      /* ~1.6px, el tracking de 225media */
    margin-bottom:14px;          /* C */
  }
  /* el chevron era un motivo propio, pero ninguna de las tres pone icono
     ahi y sumaba ruido repetido 15 veces. El motivo diagonal sigue vivo
     en la muesca de las tarjetas y en la banda oscura. */
  .tag::before{content:none;}
  .section-split .section-head .tag{justify-content:flex-start;}

  /* --- B. aire entre secciones: 94 -> 120 --- */
  .section-pad{padding-top:120px;padding-bottom:120px;}
  .band{padding-top:clamp(104px,10vw,140px);padding-bottom:clamp(104px,10vw,140px);}

  /* --- C. separacion etiqueta -> titular -> contenido --- */
  .section-head{margin-bottom:56px;}
  .section-split .section-head{margin-bottom:0;}
  .about-body .tag{margin-bottom:14px;}

  /* --- D. Archivo Black queda solo para el hero y los numerales --- */
  .section-head h2,
  .final h2,
  .about h2,
  .about-body h2{
    font-family:var(--f-ui);
    font-weight:800;
    letter-spacing:-0.03em;
  }
  .section-head h2{font-size:clamp(28px,3.2vw,44px);line-height:1.1;}
  .section-split .section-head h2{font-size:clamp(25px,2.6vw,36px);line-height:1.14;}
  .about-body h2{font-size:clamp(25px,2.9vw,38px);line-height:1.12;}
  /* el hero y los numerales NO cambian: siguen en Archivo Black */

  @media (max-width:720px){
    .section-pad{padding-top:64px;padding-bottom:64px;}
    .section-head{margin-bottom:34px;}
  }

  /* BUG preexistente: `.hero-copy .hx-kicker` fijaba display:inline-block con mas
     especificidad que el `.hx-kicker{display:inline-flex}` del bloque light, asi
     que la chispa y el texto se apilaban en dos renglones (53px de alto en vez
     de 33). Mismo selector, mas abajo, para ganar por orden. */
  .hero-copy .hx-kicker{display:inline-flex;align-items:center;}

  /* el <small> del precio heredaba Archivo Black a 11.5px: mismo problema de
     dureza en tamano chico que los subtitulos de familia */
  .price-amt small{font-family:var(--f-ui);font-weight:700;letter-spacing:.06em;}

  /* =====================================================================
     CTA POR SECCION + FUSIONES — 2026-09-29
     Patron tomado de madgicx.com: cada seccion grande cierra con su propia
     accion en verbo, en vez de dejar toda la conversion para el final.
     ===================================================================== */
  .section-cta{margin-top:44px;display:flex;justify-content:center;}
  .section-split > .wrap > .section-cta{grid-column:2;justify-content:flex-start;margin-top:34px;}
  .band .section-cta .btn-secondary{
    border-color:rgba(255,255,255,.28);color:#fff;background:transparent;
  }
  .band .section-cta .btn-secondary:hover{border-color:#fff;background:rgba(255,255,255,.06);}

  /* separador entre formato y familia de angulo dentro de #make */
  .make-split{
    margin:58px 0 26px;padding-top:34px;border-top:1px solid var(--border);
    display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 28px;
  }
  .make-sub{
    font-family:var(--f-ui);font-weight:800;font-size:clamp(19px,2vw,24px);
    letter-spacing:-0.02em;margin:0;color:var(--ink);
  }
  .make-note{margin:0;font-size:14.5px;line-height:1.6;color:var(--text-dim);flex:1 1 320px;}

  /* fila de cierre de la comparativa: es la conclusion, no una dimension mas */
  .compare-row.compare-bottom{
    border-top:2px solid var(--border-2);
    background:rgba(22,194,245,.04);
  }
  .compare-bottom > div{padding-top:20px;padding-bottom:20px;font-weight:600;}
  .compare-bottom .dim{font-weight:800;}
  .compare-bottom .aud{color:var(--accent-2);font-weight:800;}

  @media (max-width:820px){
    .section-cta,.section-split > .wrap > .section-cta{margin-top:30px;justify-content:stretch;}
    .section-cta .btn{width:100%;justify-content:center;}
    .make-split{margin:38px 0 20px;padding-top:26px;}
  }

  /* The old 5-equal-column #work rule that lived here was from when there
     were 5 demo pieces in a flat row; it's gone now that #work uses the
     featured/secondary layout defined earlier (search ".work-featured"). */

  /* dentro de #make las familias van en dos columnas: apiladas costaban ~520px
     y el contenido de cada una entra comodo en media fila */
  #make .fam-list{
    display:grid;grid-template-columns:1fr 1fr;
    column-gap:44px;border-top:1px solid var(--border);
  }
  #make .fam{grid-template-columns:1fr;gap:6px;padding:22px 0;}
  #make .fam:nth-child(-n+2){border-top:0;}
  @media (max-width:820px){
    #make .fam-list{grid-template-columns:1fr;}
    #make .fam:nth-child(2){border-top:1px solid var(--border);}
  }

  /* BUG propio: el CTA de las secciones partidas va en grid-column:2, pero en
     mobile el grid colapsa a una sola columna y esa segunda columna fantasma
     empujaba la pagina a 477px (102px de overflow, tapado por el overflow-x
     del body, asi que no se veia pero rompia el ancho del menu fijo). */
  @media (max-width:980px){
    .section-split > .wrap > .section-cta{grid-column:1;justify-content:center;}
  }

  /* =====================================================================
     HERO v3 — asymmetric composition, 2026-10-16.
     Reverses the "copy centered, work scrolls somewhere below" pattern:
     message left (~45%), a real piece beside it (~55%), visible in the
     first screen on a normal desktop viewport instead of requiring a
     scroll past a big centered text block. Appended last on purpose so it
     wins over the centered rule earlier in the cascade.
     ===================================================================== */
  @media (min-width:981px){
    .hx-hero .hx-content{
      display:grid;grid-template-columns:minmax(0,0.86fr) minmax(0,1fr);
      align-items:center;gap:56px;
      padding-top:calc(48px + env(safe-area-inset-top));padding-bottom:64px;
    }
    .hx-hero .hx-content > .hero-copy{
      max-width:none;margin:0;text-align:left;padding:0;grid-column:1;
    }
    .hx-hero .hx-content > .hero-copy .hero-lead{margin-left:0;margin-right:0;}
    .hx-hero .hx-content > .hero-copy .hero-ctas{justify-content:flex-start;}
  }
  /* Home hero, v5: a single featured video shown whole, in its own
     proportion. Kept separate from .hero-show (below), which /ecommerce/
     still uses for its two-card composition. */
  .hero-single{margin-top:28px;}
  .hero-single figure{
    position:relative;margin:0 auto;max-width:280px;
    border-radius:var(--r-lg);overflow:hidden;
    background:var(--card);border:1px solid var(--border);
  }
  .hero-single video{display:block;width:100%;height:auto;}
  .hero-single figcaption{
    position:absolute;left:0;right:0;bottom:0;z-index:2;
    padding:26px 12px 10px;font-size:12.5px;font-weight:700;color:#fff;
    background:linear-gradient(180deg, transparent, rgba(7,12,18,.72));
    pointer-events:none;
  }
  @media (min-width:981px){
    .hero-single{margin-top:0;display:flex;justify-content:center;}
    .hero-single figure{max-width:none;width:max-content;}
    .hero-single video{height:480px;width:auto;max-width:100%;}
  }

  .hero-show{
    position:relative;display:grid;grid-template-columns:1fr 1fr;gap:16px;
    margin-top:28px;
  }
  .hero-show-main,.hero-show-sub{
    position:relative;border-radius:var(--r-lg);overflow:hidden;
    background:var(--card);border:1px solid var(--border);
    box-shadow:0 24px 50px -30px rgba(15,27,42,.45);
  }
  .hero-show-main{aspect-ratio:9/16;}
  .hero-show-sub{aspect-ratio:3/4;align-self:end;margin-bottom:-10%;transform:translateY(6%);}
  .hero-show video,.hero-show img{width:100%;height:100%;object-fit:cover;display:block;}
  .hero-show .sc-type{
    position:absolute;left:9px;top:9px;z-index:2;
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size:10px;font-weight:600;letter-spacing:.02em;
    background:rgba(15,27,42,.82);color:#fff;padding:4px 7px;border-radius:6px;
    backdrop-filter:blur(4px);
  }
  .hero-show figcaption{
    position:absolute;left:0;right:0;bottom:0;z-index:2;
    padding:22px 12px 10px;font-size:12.5px;font-weight:700;color:#fff;
    background:linear-gradient(180deg, transparent, rgba(7,12,18,.72));
  }
  @media (max-width:980px){
    .hero-show{max-width:420px;margin-left:auto;margin-right:auto;}
  }

  /* =====================================================================
     ECOSYSTEM SELECTOR — CSS-only radio/label tabs, v3, 2026-10-16.
     Replaces four equal cards with a left selector / right panel. Every
     panel exists in the DOM regardless of CSS or JS support, so nothing
     essential is hidden if either fails to load; the radio+label pattern
     is natively keyboard-operable (arrow keys move the native radio
     group, Tab/Enter work with no extra script).
     ===================================================================== */
  .eco-switch{position:relative;}
  .eco-switch > input[type="radio"]{
    position:absolute;opacity:0;width:1px;height:1px;pointer-events:none;
  }
  .eco-list{display:grid;gap:8px;margin-bottom:0;}
  .eco-tab{
    display:flex;align-items:center;gap:12px;
    padding:16px 18px;border-radius:var(--r);cursor:pointer;
    border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);
    color:rgba(255,255,255,.72);font-weight:600;transition:background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
  }
  .eco-tab .num{font-family:var(--f-display);font-weight:600;color:var(--accent);font-size:14px;}
  .eco-tab:hover{background:rgba(255,255,255,.08);color:#fff;}
  .eco-panel{display:none;}
  .eco-panel h3{color:#fff;font-size:clamp(22px,2.4vw,28px);margin-bottom:10px;}
  .eco-problem{color:rgba(255,255,255,.78);font-size:16px;line-height:1.55;margin-bottom:18px;}
  .eco-deliv{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:10px;}
  .eco-deliv li{
    position:relative;padding-left:22px;color:rgba(255,255,255,.72);font-size:14.5px;line-height:1.5;
  }
  .eco-deliv li::before{content:'';position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--accent);}
  .eco-connects{margin-top:18px;font-size:13.5px;color:rgba(255,255,255,.56);}
  .eco-connects label{color:var(--accent);cursor:pointer;text-decoration:underline;text-underline-offset:2px;}
  #eco1:checked ~ .eco-list label[for="eco1"],
  #eco2:checked ~ .eco-list label[for="eco2"],
  #eco3:checked ~ .eco-list label[for="eco3"],
  #eco4:checked ~ .eco-list label[for="eco4"]{
    background:var(--accent);border-color:var(--accent);color:#04141C;
  }
  #eco1:checked ~ .eco-list label[for="eco1"] .num,
  #eco2:checked ~ .eco-list label[for="eco2"] .num,
  #eco3:checked ~ .eco-list label[for="eco3"] .num,
  #eco4:checked ~ .eco-list label[for="eco4"] .num{color:#04141C;}
  #eco1:checked ~ .eco-panel[data-n="1"],
  #eco2:checked ~ .eco-panel[data-n="2"],
  #eco3:checked ~ .eco-panel[data-n="3"],
  #eco4:checked ~ .eco-panel[data-n="4"]{display:block;}
  @media (min-width:769px){
    .eco-switch{display:grid;grid-template-columns:280px 1fr;gap:40px;align-items:start;}
    .eco-list{grid-column:1;}
    .eco-panel{grid-column:2;grid-row:1;}
  }
  @media (max-width:768px){
    .eco-list{grid-template-columns:1fr 1fr;}
  }

  /* =====================================================================
     SERVICE-PAGE HERO, v3, 2026-10-16. Left-aligned text + an honest
     visual summary of the deliverable, not a centered, near-empty hero
     repeated on every route, and not a fabricated screenshot for a
     service with no client work to show yet.
     ===================================================================== */
  .svc-hero{display:grid;gap:40px;align-items:center;}
  .svc-hero-copy{text-align:left;}
  .svc-hero-copy .hero-lead{margin-left:0;max-width:52ch;}
  .svc-hero-copy .hero-ctas{justify-content:flex-start;}
  .svc-visual{
    background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);
    padding:28px 26px;box-shadow:0 24px 50px -30px rgba(15,27,42,.3);
  }
  .svc-visual-label{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint);margin-bottom:18px;}
  .svc-visual-row{display:flex;align-items:flex-start;gap:14px;padding:14px 0;border-top:1px solid var(--border);}
  .svc-visual-row:first-of-type{border-top:0;padding-top:0;}
  .svc-visual-ic{
    flex-shrink:0;width:36px;height:36px;border-radius:10px;
    display:flex;align-items:center;justify-content:center;
    background:var(--bg-2);color:var(--accent-2);
  }
  .svc-visual-ic svg{width:18px;height:18px;}
  .svc-visual-row b{display:block;font-size:14.5px;color:var(--ink);}
  .svc-visual-row span{display:block;font-size:12.5px;color:var(--text-dim);margin-top:2px;line-height:1.5;}
  @media (min-width:860px){
    .svc-hero{grid-template-columns:1.1fr 1fr;}
  }

  /* Contact, v3: pitch+calendar beside the form on desktop, stacked on
     mobile. See the HTML comment at #apply for why these two used to be
     separate sections. */
  @media (min-width:860px){
    .contact-grid{display:grid;grid-template-columns:0.85fr 1fr;gap:56px;align-items:start;}
    .contact-pitch{position:sticky;top:100px;}
  }

  /* Founder proof, v3: plain text, not a decorative stat-tile counter row
     (brief 6.5/6.9: "sin contadores decorativos"). .about-proof above is
     now unused, left in place rather than risk breaking something else
     that still references it. */
  .about-proof-text{font-size:13.5px;color:var(--text-faint);line-height:1.6;margin-top:18px;padding-top:18px;border-top:1px solid var(--border);}

  /* =====================================================================
     v4 REFINEMENT, 2026-10-16. Appended last on purpose, wins the cascade
     over the several earlier .hero-h1 overrides this file accumulated.
     ===================================================================== */
  .hero-h1{font-size:clamp(38px,5.5vw,72px);line-height:1.08;letter-spacing:-0.02em;}
  @media (max-width:640px){ .hero-h1{font-size:clamp(38px,9vw,44px);} }

  /* Secondary hero action: a plain link, not a second pill competing with
     the primary button (brief: "un enlace secundario de menor peso"). */
  .hero-link{
    display:inline-flex;align-items:center;height:48px;padding:0 4px;
    color:var(--accent-2);font-weight:600;font-size:15px;text-decoration:none;
    border-bottom:1px solid transparent;transition:border-color .18s var(--ease);
  }
  .hero-link:hover{border-bottom-color:var(--accent-2);}

  /* Hero note: one factual line, no stat-tile treatment. */
  .hero-note{font-size:13.5px;color:var(--text-faint);margin-top:18px;}

  /* The old scrolling ribbon (.strip) is gone from the DOM; nothing here
     references it anymore, left the rule noted for whoever greps next. */

  /* Button geometry, v4: one radius everywhere instead of every primary
     button (.btn-round, a full 100px pill) disagreeing with the header CTA.
     ~8px, 48px min height. Overriding .btn-round here instead of removing
     the class from every page, so this is one change instead of 8 files.
     The header CTA sets its own matching geometry at its source rule. */
  .btn{border-radius:8px;min-height:48px;}
  .btn-round{border-radius:8px;}

  /* Primary/secondary keep their hierarchy through colour and weight, not
     through glow. Drops the cyan halo under the primary pill. */
  .btn-primary{box-shadow:none;}
  .btn-primary:hover{box-shadow:none;}
  .btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}

  /* Flat light background, v4: body::before/::after were a sitewide ambient
     cyan+purple glow and a faint grid texture behind every page, exactly
     the "degradados ambientales sin función" the brief flags. Same for the
     dark band's diagonal top/bottom cut and the hero overlay's glow. */
  body::before,body::after{background:none !important;content:none !important;}

  /* Selected Work, v4: cap preview height at 420-520px instead of letting
     aspect-ratio:9/16 grow unbounded on the wide featured column, which
     is what forced the section into a long scroll. */
  .work video,.work img{max-height:520px;}
  @media (min-width:860px){ .work-featured .work video,.work-featured .work img{max-height:500px;} }

  /* Reasoning disclosure per project, replaces the separate "Case Notes"
     section. Native <details>, no JS needed for open/close, keyboard
     works automatically. */
  .work-detail{margin-top:10px;}
  .work-detail summary{
    cursor:pointer;font-size:12.5px;font-weight:700;color:var(--accent-2);
    list-style:none;display:flex;align-items:center;gap:5px;
  }
  .work-detail summary::-webkit-details-marker{display:none;}
  .work-detail summary::after{content:'+';font-size:15px;line-height:1;}
  .work-detail[open] summary::after{content:'–';}
  .work-detail dl{margin-top:12px;}
  .work-detail dt{font-size:10.5px;}
  .work-detail dd{font-size:12.5px;}

  /* Ecosystem panel samples, v4. Honest, clearly-labeled demos, not
     fabricated screenshots or invented results: a schematic content
     outline, a real creative piece paired with its stated hypothesis, a
     wireframe-level landing fragment, and plain example email subject
     lines. Nothing here claims to be a real client deliverable. */
  .eco-sample{margin:18px 0;padding:16px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);}
  .eco-sample-tag{display:block;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin-bottom:12px;}
  .eco-sample-outline{display:grid;gap:7px;}
  .eco-sample-bar{display:block;height:7px;border-radius:4px;background:rgba(255,255,255,.18);}
  .eco-sample-bar.w1{width:70%;}
  .eco-sample-bar.w2{width:45%;}
  .eco-sample-bar.w3{width:92%;}
  .eco-sample-ad{display:flex;align-items:center;gap:12px;}
  .eco-sample-ad img{width:52px;height:52px;border-radius:8px;object-fit:cover;flex-shrink:0;}
  .eco-sample-ad p{font-size:12px;color:rgba(255,255,255,.65);line-height:1.5;margin:0;}
  .eco-sample-landing{display:flex;flex-direction:column;align-items:flex-start;gap:0;}
  .eco-sample-cta{
    margin-top:10px;font-size:10.5px;font-weight:700;color:#04141C;
    background:var(--accent);padding:6px 12px;border-radius:6px;
  }
  .eco-sample-flow{display:grid;gap:8px;}
  .eco-sample-msg{
    font-size:11.5px;color:rgba(255,255,255,.72);padding:8px 10px;
    border-radius:6px;background:rgba(255,255,255,.05);
  }
  .band{clip-path:none;}
  /* Hero sits on the flat light background now (dark text, not white-on-
     dark), so the old dark gradient overlay was just muddying it. */
  .hx-overlay{display:none !important;}
  .final{background:none;}

  /* =====================================================================
     SELECTED WORK GALLERY + PROJECT MODAL, v5, 2026-10-16.
     Horizontal, manually scrolled, snap-aligned. The track lives inside a
     .wrap so the next card is clipped at the content edge (that clipping
     IS the peek) without using 100vw, which would add a page-level
     horizontal scrollbar.
     ===================================================================== */
  .gal-sec{padding-bottom:56px;}
  .gal-head{
    display:flex;align-items:flex-end;justify-content:space-between;
    gap:24px;margin-bottom:26px;
  }
  .gal-head-copy{text-align:left;max-width:60ch;}
  .gal-head-copy h2{margin:10px 0 8px;}
  .gal-head-copy .section-desc{margin:0;}
  .gal-nav{display:none;gap:10px;flex-shrink:0;}
  .gal-arrow{
    width:44px;height:44px;border-radius:8px;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    background:var(--card);border:1px solid var(--border);color:var(--ink);
    transition:background .18s var(--ease), border-color .18s var(--ease);
  }
  .gal-arrow svg{width:19px;height:19px;}
  .gal-arrow:hover{background:var(--bg-2);border-color:var(--ink);}
  .gal-arrow:disabled{opacity:.35;cursor:default;}
  .gal-arrow:disabled:hover{background:var(--card);border-color:var(--border);}
  .gal-arrow:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}

  .gal-track{
    list-style:none;margin:0;padding:4px 0 10px;
    display:flex;gap:26px;
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scroll-behavior:smooth;
    scrollbar-width:thin;
  }
  .gal-track:focus-visible{outline:2px solid var(--ink);outline-offset:4px;}
  .gal-card{flex:0 0 auto;scroll-snap-align:start;}
  .gal-media{
    border-radius:var(--r-lg);overflow:hidden;
    background:var(--card);border:1px solid var(--border);
    line-height:0;
  }
  /* Sized by height so every card lines up; width follows each piece's own
     proportion, nothing is stretched or cropped. */
  .gal-media img{display:block;height:300px;width:auto;}
  /* 400px keeps the row wider than the content column at every desktop
     size, so the next card is always partly visible. */
  @media (min-width:768px){ .gal-media img{height:400px;} }

  /* The media box defines the card width; the meta row is allowed to wrap
     so a long category name can't stretch the card wider than its image
     and leave an empty strip beside the poster. */
  .gal-media{width:fit-content;}
  /* width:0 + min-width:100% lets the meta fill the card without being
     able to widen it, so the card is exactly as wide as its poster. */
  .gal-meta{
    display:flex;flex-direction:column;align-items:flex-start;
    gap:6px;padding:12px 2px 0;
    width:0;min-width:100%;
  }
  .gal-cat{font-size:13.5px;font-weight:700;color:var(--ink);}
  .gal-open{
    font-size:13px;font-weight:700;cursor:pointer;
    background:none;border:0;padding:4px 2px;color:var(--accent-2);
    text-decoration:underline;text-underline-offset:3px;
  }
  .gal-open:hover{color:var(--ink);}
  .gal-open:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:4px;}
  .gal-note{margin:22px 0 0;font-size:13px;color:var(--text-faint);max-width:70ch;}

  @media (min-width:860px){ .gal-nav{display:flex;} }
  @media (prefers-reduced-motion:reduce){ .gal-track{scroll-behavior:auto;} }

  /* ---- Project modal ---- */
  .gal-modal{position:fixed;inset:0;z-index:999;display:flex;align-items:center;justify-content:center;padding:20px;}
  .gal-modal[hidden]{display:none;}
  .gal-modal-backdrop{position:absolute;inset:0;background:rgba(7,12,18,.72);}
  .gal-modal-box{
    position:relative;z-index:1;background:var(--card);color:var(--ink);
    border-radius:var(--r-lg);border:1px solid var(--border);
    width:min(880px,100%);max-height:90vh;overflow-y:auto;
    display:grid;gap:0;padding:0;
  }
  .gal-modal-close{
    position:absolute;top:12px;right:12px;z-index:3;
    width:40px;height:40px;border-radius:8px;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    background:rgba(7,12,18,.72);border:0;color:#fff;
  }
  .gal-modal-close svg{width:19px;height:19px;}
  .gal-modal-close:focus-visible{outline:2px solid #fff;outline-offset:2px;}
  .gal-modal-media{background:#0b1118;display:flex;justify-content:center;}
  .gal-modal-media video{display:block;width:auto;max-width:100%;max-height:58vh;}
  .gal-modal-body{padding:22px 24px 26px;}
  .gal-modal-body h3{margin:6px 0 16px;font-size:clamp(20px,2.4vw,26px);}
  .gal-modal-note{margin:16px 0 0;font-size:12.5px;color:var(--text-faint);}
  @media (min-width:860px){
    .gal-modal-box{grid-template-columns:auto 1fr;align-items:start;}
    .gal-modal-media video{max-height:72vh;}
    .gal-modal-body{padding:26px 28px 28px 4px;}
  }

  /* Hero -> gallery -> journeys -> ecosystem read as one run, so the
     generic .section-pad rhythm (120-140px) left disproportionate gaps
     between them. Tightened for this sequence only; mobile keeps the
     existing, already smaller rhythm. */
  @media (min-width:768px){
    #journeys{padding-top:72px;padding-bottom:72px;}
    #ecosystem{padding-top:88px;}
  }

  /* Marks the one gallery piece that has no audio track, so "no sound" reads
     as a property of the cut and not as a broken player. */
  .gal-modal-media{flex-direction:column;align-items:center;}
  .gal-silent-note{
    margin:0;width:100%;padding:8px 12px;text-align:center;
    font-size:12px;font-weight:600;color:rgba(255,255,255,.72);
    background:rgba(7,12,18,.85);
  }

  /* =====================================================================
     DEMO SAMPLES, v6. One component for the "show, don't just describe"
     blocks on the service pages (SEO findings, CRO friction, media-buying
     plan, email flow). Every instance carries a visible "Demonstration"
     label: there is no client work behind any of them, and nothing here
     states a result.
     ===================================================================== */
  .demo-wrap{border:1px solid var(--border);border-radius:var(--r-lg);background:var(--card);overflow:hidden;}
  .demo-head{padding:16px 20px;border-bottom:1px solid var(--border);background:var(--bg-2);}
  .demo-tag{
    display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.08em;
    text-transform:uppercase;color:#7a4b00;background:#ffeec2;border:1px solid #f0d9a8;
    padding:3px 8px;border-radius:5px;margin-bottom:8px;
  }
  .demo-head p{margin:0;font-size:13px;line-height:1.55;color:var(--text-dim);}
  .demo-rows{list-style:none;margin:0;padding:0;}
  .demo-row{display:flex;gap:16px;padding:18px 20px;border-top:1px solid var(--border);}
  .demo-row:first-child{border-top:0;}
  .demo-pri{
    flex-shrink:0;align-self:flex-start;font-size:10.5px;font-weight:800;
    letter-spacing:.06em;text-transform:uppercase;padding:4px 9px;border-radius:5px;
    min-width:64px;text-align:center;
  }
  .demo-pri.is-high{background:#fde3e3;color:#9b2222;}
  .demo-pri.is-med{background:#fff0d4;color:#8a5a00;}
  .demo-pri.is-low{background:var(--bg-2);color:var(--text-dim);}
  .demo-body{min-width:0;}
  .demo-body > b{display:block;font-size:14.5px;margin-bottom:6px;}
  .demo-body p{margin:0 0 5px;font-size:13px;line-height:1.55;color:var(--text-dim);}
  .demo-body p span{font-weight:700;color:var(--ink);}
  .demo-foot{padding:14px 20px;border-top:1px solid var(--border);font-size:12.5px;color:var(--text-faint);}

  /* Email flow variant */
  .demo-flow{display:grid;gap:14px;padding:18px 20px;}
  .demo-mail{border:1px solid var(--border);border-radius:var(--r);padding:14px 16px;background:var(--bg);}
  .demo-mail-when{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-2);margin-bottom:6px;}
  .demo-mail-subj{font-size:14.5px;font-weight:700;margin-bottom:6px;}
  .demo-mail dl{margin:0;display:grid;gap:3px;}
  .demo-mail dt{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--text-faint);}
  .demo-mail dd{margin:0 0 6px;font-size:13px;line-height:1.5;color:var(--text-dim);}
  @media (min-width:860px){ .demo-flow{grid-template-columns:repeat(3,1fr);} }
  @media (max-width:560px){ .demo-row{flex-direction:column;gap:10px;} .demo-pri{align-self:flex-start;} }

  /* Pillars are parallel choices, not steps: the numeral is dropped so the
     large index stays reserved for genuinely ordered sequences. */
  .pillar .num{display:none;}