/* =========================================================================
     KONNEXION AI — marketing site v2
     Brand tokens are sampled from the logo (see brand-spec.md): the gradient
     (#1566E5 royal blue → #20C4BA teal), navy ink #042148, and the Confluence
     mark. Single self-contained file, no build step — matches the product.
     ========================================================================= */
  :root{
    /* brand */
    --g1:#1566E5;              /* gradient start — royal blue  */
    --g2:#20C4BA;              /* gradient end   — teal/cyan   */
    --grad:linear-gradient(100deg,var(--g1),var(--g2));
    --grad-soft:linear-gradient(100deg,rgba(21,102,229,.14),rgba(32,196,186,.14));
    --ink:#042148;             /* body ink / wordmark navy      */
    --accent:#0E63C9;          /* text-safe link blue           */
    /* light surfaces */
    --bg:#FFFFFF;
    --bg-2:#F4F7FB;
    --muted:#52617A;
    --faint:#6C7C94;
    --border:#E2E9F2;
    --border-2:#EEF2F8;
    /* dark surfaces (hero / stages) */
    --navy:#050E22;            /* deepest stage                 */
    --navy-2:#0A1834;
    --navy-line:rgba(255,255,255,.09);
    --navy-muted:rgba(226,236,250,.62);
    /* type */
    --f-display:'Sora','Avenir Next',system-ui,sans-serif;
    --f-ui:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
    --f-mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
    /* elevation */
    --sh-sm:0 1px 2px rgba(4,33,72,.05), 0 12px 30px -18px rgba(4,33,72,.20);
    --sh-md:0 2px 6px rgba(4,33,72,.06), 0 24px 60px -28px rgba(4,33,72,.30);
    --sh-lg:0 40px 90px -40px rgba(4,33,72,.55);
    --r:14px; --r-lg:22px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth}
  body{background:var(--bg);color:var(--ink);font:16px/1.6 var(--f-ui);overflow-x:hidden}
  a{color:inherit;text-decoration:none}
  img,svg{display:block}
  ::selection{background:rgba(32,196,186,.28)}
  .wrap{max-width:1200px;margin:0 auto;padding:0 24px}

  /* ---------- wordmark ---------- */
  /* line-height 1.15 + a hair of top padding so the tall cap "A" of "AI" is never
     clipped by the text box (background-clip:text crops to the glyph box). */
  .wm{font-family:var(--f-display);font-weight:700;letter-spacing:-.03em;line-height:1.15;color:var(--ink);display:inline-flex;align-items:baseline;padding-top:.06em}
  .wm .ai{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;margin-left:.06em}
  .lock{display:flex;align-items:center;gap:9px}
  .on-dark .wm{color:#fff}

  /* ---------- scroll progress ---------- */
  .progress{position:fixed;inset:0 auto auto 0;height:3px;width:0;background:var(--grad);z-index:80;
    box-shadow:0 0 14px rgba(32,196,186,.7)}

  /* ---------- aurora mesh (used on dark stages) ---------- */
  .aurora{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
  .blob{position:absolute;border-radius:50%;filter:blur(70px);will-change:transform;opacity:.9}
  .b1{width:600px;height:600px;background:radial-gradient(circle,rgba(21,102,229,.55),transparent 68%);top:-220px;left:-120px;animation:d1 26s ease-in-out infinite}
  .b2{width:520px;height:520px;background:radial-gradient(circle,rgba(32,196,186,.5),transparent 68%);top:-120px;right:-140px;animation:d2 30s ease-in-out infinite}
  .b3{width:460px;height:460px;background:radial-gradient(circle,rgba(14,99,201,.4),transparent 70%);bottom:-260px;left:34%;animation:d3 34s ease-in-out infinite}
  @keyframes d1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(80px,60px) scale(1.16)}}
  @keyframes d2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-70px,50px) scale(1.12)}}
  @keyframes d3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(50px,-50px) scale(1.18)}}
  /* faint grid overlay for the dark stages */
  .grid-ov{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
    background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
    background-size:56px 56px;
    -webkit-mask:radial-gradient(120% 80% at 50% 0%,#000 30%,transparent 78%);
            mask:radial-gradient(120% 80% at 50% 0%,#000 30%,transparent 78%)}

  /* ---------- reveal on scroll ---------- */
  .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
  .reveal.in{opacity:1;transform:none}
  .reveal[data-d="1"]{transition-delay:.08s}.reveal[data-d="2"]{transition-delay:.16s}
  .reveal[data-d="3"]{transition-delay:.24s}.reveal[data-d="4"]{transition-delay:.32s}
  .reveal[data-d="5"]{transition-delay:.4s}

  /* ---------- buttons ---------- */
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 20px;
    border-radius:12px;font:600 14.5px/1 var(--f-ui);cursor:pointer;border:1px solid var(--border);
    background:var(--bg);color:var(--ink);white-space:nowrap;
    transition:transform .15s,border-color .15s,box-shadow .18s,filter .15s,background .15s}
  .btn:hover{border-color:var(--ink);transform:translateY(-1px)}
  .btn.grad{background:var(--grad);border-color:transparent;color:#fff;box-shadow:0 10px 20px -16px rgba(4,33,72,.55)}
  .btn.grad:hover{filter:brightness(1.07);box-shadow:0 14px 26px -18px rgba(4,33,72,.6);border-color:transparent}
  .btn.ghost-d{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);color:#fff}
  .btn.ghost-d:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.4)}
  .btn.lg{height:54px;padding:0 26px;font-size:15.5px;border-radius:13px}
  .btn svg{width:16px;height:16px;flex:none}
  .mag{will-change:transform}

  /* ---------- nav ---------- */
  header.nav{position:sticky;top:0;z-index:60;transition:background .25s,border-color .25s,box-shadow .25s}
  header.nav.scrolled{background:rgba(255,255,255,.82);backdrop-filter:saturate(160%) blur(16px);
    -webkit-backdrop-filter:saturate(160%) blur(16px);border-bottom:1px solid var(--border);
    box-shadow:0 10px 30px -24px rgba(4,33,72,.4)}
  .nav-in{display:flex;align-items:center;justify-content:space-between;height:72px}
  .nav-links{display:flex;align-items:center;gap:32px}
  .nav-links a{font:500 14.5px/1 var(--f-ui);color:var(--muted);position:relative;transition:color .15s}
  .nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;background:var(--grad);
    border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform .25s}
  .nav-links a:hover{color:var(--ink)}
  .nav-links a:hover::after{transform:scaleX(1)}
  .nav-cta{display:flex;align-items:center;gap:12px}
  /* modern hamburger: on-brand gradient button, staggered white bars → morph to X */
  .hamb{display:none;width:46px;height:46px;border:0;border-radius:13px;background:var(--grad);
    position:relative;cursor:pointer;flex:none;padding:0;box-shadow:0 8px 18px -10px rgba(21,102,229,.6)}
  .hamb span{position:absolute;height:2.5px;border-radius:2px;background:#fff;left:13px;
    transition:transform .32s cubic-bezier(.2,.7,.3,1),opacity .2s,width .32s,left .32s}
  .hamb span:nth-child(1){top:16px;width:20px}
  .hamb span:nth-child(2){top:22px;width:14px}          /* shorter middle bar = the "stylish" detail */
  .hamb span:nth-child(3){top:28px;width:20px}
  .hamb:hover span:nth-child(2){width:20px}
  body.nav-open .hamb span{left:13px;width:20px}
  body.nav-open .hamb span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  body.nav-open .hamb span:nth-child(2){opacity:0}
  body.nav-open .hamb span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

  /* ---------- mobile drawer (left slide-in) ---------- */
  /* scrim z70; drawer must sit ABOVE it. The drawer lives inside <header> (its own
     stacking context at z60), so we raise the whole header above the scrim when open —
     otherwise the semi-transparent scrim paints over the drawer and dims it. */
  .scrim{position:fixed;inset:0;z-index:70;background:rgba(4,16,34,.55);backdrop-filter:blur(3px);
    -webkit-backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
  body.nav-open .scrim{opacity:1;visibility:visible}
  body.nav-open header.nav{z-index:90}
  .mobile-menu{position:fixed;top:0;left:0;bottom:0;z-index:91;width:min(86vw,340px);
    display:flex;flex-direction:column;gap:2px;padding:22px 22px 28px;background:var(--bg);
    transform:translateX(-100%);transition:transform .34s cubic-bezier(.3,.8,.3,1),box-shadow .34s;
    overflow-y:auto;overscroll-behavior:contain}
  /* shadow ONLY when open — otherwise the closed drawer's blur bleeds a strip onto the page's left edge */
  body.nav-open .mobile-menu{transform:none;box-shadow:0 0 60px -10px rgba(4,33,72,.5)}
  .mm-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
  .mm-close{width:40px;height:40px;border:1px solid var(--border);border-radius:11px;background:var(--bg);
    display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink);flex:none}
  .mm-close svg{width:18px;height:18px}
  .mobile-menu a{padding:15px 6px;font:500 16.5px/1 var(--f-ui);color:var(--ink);border-bottom:1px solid var(--border-2);
    display:flex;align-items:center;justify-content:space-between}
  .mobile-menu a:not(.btn):not(.lock)::after{content:"";width:8px;height:8px;border-right:2px solid var(--faint);border-top:2px solid var(--faint);transform:rotate(45deg);opacity:.6}
  .mobile-menu .mm-head .lock{padding:0;border:0}
  .mobile-menu .btn{margin-top:20px;justify-content:center}
  .mobile-menu .btn::after{display:none}

  /* ---------- hero (dark stage) ---------- */
  .hero{position:relative;background:var(--navy);color:#fff;overflow:hidden;isolation:isolate;
    border-radius:0 0 32px 32px}
  .hero::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
    background:radial-gradient(120% 90% at 50% -10%,rgba(32,196,186,.14),transparent 60%)}
  .hero-in{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;
    padding:clamp(56px,8vw,104px) 0 clamp(64px,9vw,112px)}
  .badge{display:inline-flex;align-items:center;gap:9px;font:600 12px/1 var(--f-mono);letter-spacing:.06em;
    text-transform:uppercase;color:#CFE6FF;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
    padding:9px 14px;border-radius:999px;margin-bottom:26px;backdrop-filter:blur(6px)}
  .badge .dot{width:7px;height:7px;border-radius:50%;background:var(--g2);box-shadow:0 0 0 3px rgba(32,196,186,.28);animation:pulse 2.4s ease-in-out infinite}
  @keyframes pulse{0%,100%{box-shadow:0 0 0 3px rgba(32,196,186,.28)}50%{box-shadow:0 0 0 7px rgba(32,196,186,.02)}}
  h1.hh{font:700 clamp(40px,6vw,68px)/1.02 var(--f-display);letter-spacing:-.036em;max-width:15ch;color:#fff}
  h1.hh em{font-style:normal;background:linear-gradient(100deg,var(--g1),var(--g2),var(--g1));background-size:220% 100%;
    -webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 7s linear infinite}
  @keyframes shimmer{to{background-position:220% 0}}
  .hero p.sub{font-size:clamp(17px,1.7vw,20px);line-height:1.55;color:var(--navy-muted);max-width:52ch;margin:24px 0 32px;text-wrap:pretty}
  .hero-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
  .hero-note{margin-top:20px;font:500 13.5px/1.5 var(--f-ui);color:rgba(226,236,250,.55);display:flex;align-items:center;gap:9px}
  .hero-note svg{width:16px;height:16px;color:var(--g2);flex:none}

  /* hero stat rail */
  .stat-rail{display:flex;gap:30px;flex-wrap:wrap;margin-top:40px;padding-top:30px;border-top:1px solid var(--navy-line)}
  .stat .num{font:700 clamp(24px,3vw,34px)/1 var(--f-display);letter-spacing:-.02em;
    background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
  .stat .lab{font:500 12.5px/1.35 var(--f-ui);color:var(--navy-muted);margin-top:7px;max-width:16ch}

  /* chat device */
  .device-wrap{perspective:1400px}
  .device{position:relative;background:linear-gradient(180deg,#0C1B39,#081228);border-radius:30px;
    box-shadow:var(--sh-lg);overflow:hidden;border:1px solid rgba(255,255,255,.08);
    transition:transform .25s ease-out;will-change:transform;
    background-image:radial-gradient(90% 60% at 85% -5%,rgba(32,196,186,.18),transparent 58%)}
  .device::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:120px;height:26px;
    background:#050E22;border-radius:0 0 16px 16px;z-index:3}
  .d-head{display:flex;align-items:center;gap:12px;padding:20px 18px 16px;border-bottom:1px solid rgba(255,255,255,.08)}
  .d-head .av{width:44px;height:44px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;flex:none}
  .d-head .av svg{width:58%;height:58%;color:#fff}
  .d-head .nm{color:#fff;font:600 15.5px/1.2 var(--f-display);letter-spacing:-.01em;display:flex;align-items:center;gap:6px}
  .d-head .nm .vf{width:15px;height:15px;color:var(--g2)}
  .d-head .st{color:rgba(255,255,255,.5);font:500 12px/1.3 var(--f-ui);margin-top:2px}
  .d-body{padding:18px 16px 22px;display:flex;flex-direction:column;gap:10px;height:520px;overflow:hidden}
  .bub{max-width:82%;padding:11px 14px;border-radius:16px;font-size:14px;line-height:1.45;display:none;color:#fff}
  .bub.show{display:block;animation:msgIn .42s cubic-bezier(.2,.7,.3,1) both}
  @keyframes msgIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  .bub.inb{align-self:flex-start;background:rgba(255,255,255,.11);border-bottom-left-radius:5px}
  .bub.outb{align-self:flex-end;background:var(--grad);border-bottom-right-radius:5px}
  .bub .mt{display:block;font:500 9.5px/1 var(--f-mono);opacity:.66;margin-top:6px;letter-spacing:.04em}
  .typing{align-self:flex-start;background:rgba(255,255,255,.11);padding:13px 15px;border-radius:16px;border-bottom-left-radius:5px;display:none;gap:4px}
  .typing.show{display:flex}
  .typing i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.6);animation:bounce 1.2s infinite}
  .typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
  @keyframes bounce{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-5px);opacity:1}}
  /* product card inside chat */
  .prodc{align-self:flex-start;width:74%;background:#fff;border-radius:16px;border-bottom-left-radius:5px;overflow:hidden;display:none;color:var(--ink)}
  .prodc.show{display:block;animation:msgIn .42s cubic-bezier(.2,.7,.3,1) both}
  .prodc .ph{height:120px;position:relative;overflow:hidden}
  .prodc .ph img{width:100%;height:100%;object-fit:cover}
  .prodc .pi{padding:11px 13px}
  .prodc .pn{font:600 13.5px/1.2 var(--f-display);color:var(--ink)}
  .prodc .pr{font:600 13px/1 var(--f-mono);color:var(--accent);margin-top:4px}
  .prodc .pb{margin-top:10px;width:100%;height:34px;border:0;border-radius:9px;background:var(--ink);color:#fff;font:600 12px/1 var(--f-ui);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px}
  .prodc .pb svg{width:13px;height:13px}
  /* COD confirm buttons inside chat */
  .cta-reply{align-self:flex-start;width:82%;display:none;gap:8px;flex-direction:column}
  .cta-reply.show{display:flex;animation:msgIn .42s cubic-bezier(.2,.7,.3,1) both}
  .cta-reply .rb{height:38px;border-radius:11px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);
    color:#fff;font:600 13px/1 var(--f-ui);display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer}
  .cta-reply .rb.pri{background:var(--grad);border-color:transparent}
  .cta-reply .rb svg{width:15px;height:15px}

  /* ---------- trust strip ---------- */
  .strip{padding:clamp(40px,5vw,60px) 0 20px}
  .strip .lab{text-align:center;font:600 11.5px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-bottom:24px}
  .marquee{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
  .mtrack{display:flex;gap:14px;width:max-content;animation:scrollx 36s linear infinite}
  .marquee:hover .mtrack{animation-play-state:paused}
  @keyframes scrollx{to{transform:translateX(-50%)}}
  .ichip{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border:1px solid var(--border);border-radius:13px;
    background:var(--bg-2);font:600 15px/1 var(--f-display);letter-spacing:-.01em;color:var(--ink);white-space:nowrap}
  .ichip svg{width:19px;height:19px;color:var(--accent);flex:none}

  /* ---------- generic section ---------- */
  .sec{padding:clamp(64px,8vw,112px) 0}
  .sec.alt{background:var(--bg-2)}
  .sec.dark{background:var(--navy);color:#fff;position:relative;overflow:hidden;isolation:isolate}
  .head{max-width:66ch;margin:0 auto 52px;text-align:center}
  .head.left{margin-left:0;text-align:left}
  .kick{font:600 12px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
    display:inline-flex;align-items:center;gap:10px;margin-bottom:16px}
  .kick::before{content:"";width:22px;height:1px;background:var(--accent);opacity:.55}
  .dark .kick{color:var(--g2)}.dark .kick::before{background:var(--g2)}
  .head h2{font:700 clamp(30px,4vw,46px)/1.06 var(--f-display);letter-spacing:-.03em}
  .head p{color:var(--muted);font-size:18px;margin-top:16px;text-wrap:pretty}
  .dark .head p{color:var(--navy-muted)}

  /* ---------- the loop (journey) ---------- */
  .loop{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;position:relative;z-index:2}
  .lstep{position:relative;background:rgba(255,255,255,.04);border:1px solid var(--navy-line);border-radius:var(--r-lg);
    padding:26px 22px;transition:transform .25s,background .25s,border-color .25s}
  .lstep:hover{transform:translateY(-5px);background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.2)}
  .lstep .ln{font:600 11px/1 var(--f-mono);letter-spacing:.14em;color:var(--g2);margin-bottom:16px}
  .lstep .li{width:48px;height:48px;border-radius:13px;background:var(--grad-soft);border:1px solid rgba(255,255,255,.12);
    display:flex;align-items:center;justify-content:center;margin-bottom:16px}
  .lstep .li svg{width:24px;height:24px;color:var(--g2)}
  .lstep h3{font:600 17px/1.2 var(--f-display);letter-spacing:-.01em;color:#fff;margin-bottom:8px}
  .lstep p{font-size:13.5px;line-height:1.5;color:var(--navy-muted)}
  .lstep .arrow{position:absolute;right:-13px;top:50%;transform:translateY(-50%);z-index:3;width:26px;height:26px;
    border-radius:50%;background:var(--navy-2);border:1px solid var(--navy-line);display:flex;align-items:center;justify-content:center;color:var(--g2)}
  .lstep .arrow svg{width:14px;height:14px}
  .lstep:last-child .arrow{display:none}

  /* ---------- bento features ---------- */
  .bento{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
  .card{position:relative;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-lg);padding:28px 26px;
    overflow:hidden;transition:transform .22s,box-shadow .22s,border-color .22s}
  .sec.alt .card{background:var(--bg)}
  .card::before{content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;transition:opacity .3s;pointer-events:none;
    background:radial-gradient(400px circle at var(--mx,50%) var(--my,50%),rgba(21,102,229,.10),transparent 60%)}
  .card:hover{transform:translateY(-5px);box-shadow:var(--sh-md);border-color:#D2DEEE}
  .card:hover::before{opacity:1}
  .card .ico{position:relative;width:50px;height:50px;border-radius:13px;background:#EEF4FE;display:flex;align-items:center;justify-content:center;margin-bottom:20px}
  .card .ico svg{width:25px;height:25px;color:var(--accent)}
  .card h3{position:relative;font:600 19px/1.25 var(--f-display);letter-spacing:-.015em;margin-bottom:9px}
  .card p{position:relative;color:var(--muted);font-size:14.5px;line-height:1.58;text-wrap:pretty}
  .card .tag{position:relative;display:inline-flex;align-items:center;gap:6px;margin-top:16px;font:600 11px/1 var(--f-mono);
    letter-spacing:.06em;text-transform:uppercase;color:var(--accent);background:#EEF4FE;padding:6px 10px;border-radius:7px}
  /* bento spans */
  .c-lead{grid-column:span 3}
  .c-mcp{grid-column:span 3}
  .c-cod{grid-column:span 2}
  .c-cart{grid-column:span 2}
  .c-wismo{grid-column:span 2}
  .c-markup{grid-column:span 3}
  .c-handoff{grid-column:span 3}
  /* the two "lead" cards get a soft gradient wash + bigger type */
  .card.feature-hero{background:linear-gradient(160deg,#F7FAFF,#FFF);border-color:#DDE9F8}
  .card.feature-hero h3{font-size:22px}

  /* ---------- spotlight (live catalog / MCP) ---------- */
  .spot{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center}
  .spot ul{list-style:none;margin-top:26px;display:flex;flex-direction:column;gap:16px}
  .spot li{display:flex;gap:13px;align-items:flex-start;font-size:15.5px;color:var(--ink)}
  .spot li svg{width:22px;height:22px;color:var(--g2);flex:none;margin-top:2px}
  .spot li b{font-weight:600}.spot li span{color:var(--muted)}
  .spot-media{position:relative;perspective:1400px}
  .frame{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-lg);transition:transform .25s ease-out;will-change:transform}
  .frame img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:4/5}
  .frame .glass-top{position:absolute;inset:0 0 auto 0;height:64px;background:linear-gradient(180deg,rgba(5,14,34,.5),transparent);z-index:1}
  .fchip{position:absolute;z-index:3;background:rgba(255,255,255,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,.7);border-radius:14px;box-shadow:0 18px 44px -18px rgba(4,33,72,.55);
    padding:12px 15px;display:flex;align-items:center;gap:12px}
  .fchip .ic{width:36px;height:36px;border-radius:10px;background:var(--grad);display:flex;align-items:center;justify-content:center;flex:none}
  .fchip .ic svg{width:19px;height:19px;color:#fff}
  .fchip .t{font:600 13px/1.2 var(--f-display);color:var(--ink)}
  .fchip .s{font:500 11.5px/1.2 var(--f-ui);color:var(--muted);margin-top:3px}
  .fc-a{top:24px;left:-22px;animation:floaty 6s ease-in-out infinite}
  .fc-b{bottom:26px;right:-24px;animation:floaty 6s ease-in-out infinite .9s}
  @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}

  /* ---------- COD / RTO stat band (dark) ---------- */
  .statband{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:center;position:relative;z-index:2}
  .bigstat{display:flex;flex-direction:column;gap:22px}
  .bigstat .row{display:flex;align-items:baseline;gap:18px}
  .bigstat .n{font:700 clamp(52px,8vw,88px)/.9 var(--f-display);letter-spacing:-.04em;
    background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
  .bigstat .rl{font-size:15.5px;color:var(--navy-muted);max-width:26ch}
  .bigstat .div{height:1px;background:var(--navy-line)}

  /* ---------- comparison table ---------- */
  .cmp{border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-sm);background:var(--bg)}
  .cmp table{width:100%;border-collapse:collapse}
  .cmp th,.cmp td{padding:18px 20px;text-align:left;border-bottom:1px solid var(--border-2);font-size:14.5px;vertical-align:middle}
  .cmp thead th{font:600 13px/1.3 var(--f-display);color:var(--ink);background:var(--bg-2);letter-spacing:-.01em}
  .cmp thead th.us{background:var(--grad);color:#fff;position:relative}
  .cmp tbody td:first-child{font-weight:500;color:var(--ink)}
  .cmp td.us{background:rgba(32,196,186,.055);font-weight:600;color:var(--ink)}
  .cmp .yes{color:#0F9F79;display:inline-flex;align-items:center;gap:8px;font-weight:600}
  .cmp .no{color:#B23B4E;display:inline-flex;align-items:center;gap:8px}
  .cmp .mid{color:var(--faint);display:inline-flex;align-items:center;gap:8px}
  .cmp svg{width:17px;height:17px;flex:none}
  .cmp tr:last-child td{border-bottom:0}

  /* ---------- how it works ---------- */
  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
  .step{position:relative;padding:30px 26px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-lg);transition:transform .2s,box-shadow .2s}
  .sec.alt .step{background:var(--bg)}
  .step:hover{transform:translateY(-5px);box-shadow:var(--sh-md)}
  .step .n{font:700 15px/1 var(--f-display);color:#fff;background:var(--grad);width:40px;height:40px;border-radius:12px;
    display:flex;align-items:center;justify-content:center;margin-bottom:20px}
  .step h3{font:600 20px/1.2 var(--f-display);letter-spacing:-.015em;margin-bottom:9px}
  .step p{color:var(--muted);font-size:14.5px;line-height:1.58}

  /* ---------- capabilities ---------- */
  .caps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  .cap{display:flex;gap:14px;align-items:flex-start;padding:22px;border:1px solid var(--border);border-radius:var(--r);background:var(--bg);transition:transform .2s,box-shadow .2s}
  .cap:hover{transform:translateY(-3px);box-shadow:var(--sh-sm)}
  .cap .ic{width:36px;height:36px;border-radius:10px;background:var(--grad);display:flex;align-items:center;justify-content:center;flex:none}
  .cap .ic svg{width:18px;height:18px;color:#fff}
  .cap .q{font:600 14.5px/1.3 var(--f-display);color:var(--ink)}
  .cap .r{font-size:13px;color:var(--muted);margin-top:4px;line-height:1.45}

  /* ---------- FAQ ---------- */
  .faq{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
  .qa{border:1px solid var(--border);border-radius:var(--r);background:var(--bg);overflow:hidden;transition:border-color .2s,box-shadow .2s}
  .qa.open{border-color:#CFE0F5;box-shadow:var(--sh-sm)}
  .qa button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 22px;
    background:none;border:0;cursor:pointer;text-align:left;font:600 16px/1.35 var(--f-display);color:var(--ink);letter-spacing:-.01em}
  .qa .cv{width:22px;height:22px;flex:none;color:var(--accent);transition:transform .25s}
  .qa.open .cv{transform:rotate(180deg)}
  .qa .ans{max-height:0;overflow:hidden;transition:max-height .3s ease}
  .qa .ans p{padding:0 22px 22px;color:var(--muted);font-size:15px;line-height:1.6;text-wrap:pretty}

  /* ---------- final CTA ---------- */
  .cta{position:relative;overflow:hidden;isolation:isolate;background:var(--navy);border-radius:28px;
    padding:clamp(48px,7vw,80px) clamp(24px,4vw,48px);text-align:center;color:#fff}
  .cta h2{font:700 clamp(30px,4vw,48px)/1.06 var(--f-display);letter-spacing:-.03em;max-width:20ch;margin:0 auto;position:relative;z-index:2}
  .cta p{color:var(--navy-muted);font-size:17.5px;margin:18px auto 34px;max-width:52ch;position:relative;z-index:2}
  .capture{display:flex;gap:10px;max-width:500px;margin:0 auto;flex-wrap:wrap;justify-content:center;position:relative;z-index:2}
  .capture input{flex:1;min-width:230px;height:54px;border-radius:13px;border:1px solid rgba(255,255,255,.18);
    background:rgba(255,255,255,.08);color:#fff;padding:0 18px;font:500 15px/1 var(--f-ui);outline:none;transition:.15s}
  .capture input::placeholder{color:rgba(255,255,255,.45)}
  .capture input:focus{border-color:var(--g2);background:rgba(255,255,255,.13)}
  .capture .msg{flex-basis:100%;font:600 13.5px/1.4 var(--f-ui);margin-top:8px;min-height:18px}
  .capture .msg.err{color:#FF9DA0}.capture .msg.ok{color:var(--g2)}
  .cta-note{margin-top:20px;font:500 13px/1.5 var(--f-ui);color:rgba(226,236,250,.5);position:relative;z-index:2}

  /* ---------- footer ---------- */
  footer.ft{background:var(--bg-2);border-top:1px solid var(--border);padding:64px 0 36px}
  .ft-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px}
  .ft-brand p{color:var(--muted);font-size:14px;margin-top:16px;max-width:32ch;line-height:1.6}
  .ft-col h4{font:600 12px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-bottom:18px}
  .ft-col a{display:block;color:var(--muted);font-size:14.5px;padding:6px 0;transition:color .15s}
  .ft-col a:hover{color:var(--accent)}
  .ft-bot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
    margin-top:48px;padding-top:26px;border-top:1px solid var(--border);color:var(--faint);font-size:13px}

  /* ---------- responsive ---------- */
  @media(max-width:960px){
    .nav-links,.nav-cta .btn:not(.grad){display:none}
    .hamb{display:flex}
    .hero-in,.spot,.statband{grid-template-columns:1fr;gap:40px}
    .loop{grid-template-columns:1fr 1fr}
    .lstep .arrow{display:none}
    .bento{grid-template-columns:repeat(2,1fr)}
    .c-lead,.c-mcp,.c-cod,.c-cart,.c-wismo,.c-markup,.c-handoff{grid-column:span 1}
    .steps,.caps{grid-template-columns:1fr 1fr}
    .ft-grid{grid-template-columns:1fr 1fr}
  }
  @media(max-width:600px){
    .bento,.steps,.caps,.ft-grid,.loop{grid-template-columns:1fr}
    .fc-a{left:8px}.fc-b{right:8px}
    .cmp{overflow-x:auto}
    .stat-rail{gap:22px}
    /* narrow screens: keep the bar to logo + hamburger, CTA lives in the drawer */
    .nav-cta .btn.grad{display:none}
    /* hero heading must fit 360–430px screens without clipping */
    h1.hh{max-width:none;font-size:clamp(30px,10vw,42px);letter-spacing:-.028em}
    .hero p.sub{font-size:16px}
    /* give the hero real breathing room below the sticky nav + stop the chat clipping.
       NOTE: the hero container is `.wrap.hero-in`; the mobile `.wrap{padding:0 18px}` rule
       below would zero the vertical padding on a tie, so we use `.hero .hero-in` (higher
       specificity) + longhand top/bottom padding to win regardless of source order. */
    .hero{border-radius:0 0 24px 24px}
    .hero .hero-in{gap:28px;padding-top:36px;padding-bottom:44px}
    /* chat device: let it size to its content instead of a fixed 520px that overflows */
    .d-body{height:auto;max-height:none;overflow:visible;gap:9px;padding:16px 14px 18px}
    .device{margin-bottom:6px}
    .subhero h1{font-size:clamp(28px,9vw,40px)}
    /* let long words wrap instead of overflowing */
    h1.hh,.head h2,.subhero h1,.frow h3{overflow-wrap:break-word;word-break:break-word}
    /* tighten section rhythm on small screens */
    .wrap{padding:0 18px}
    .stat-rail{flex-wrap:wrap}
    .stat{min-width:44%}
    .globe-stats{gap:18px}
    .ft-bot{flex-direction:column;align-items:flex-start;gap:8px}
    /* buttons go full-width so they never crowd the edge */
    .hero-actions .btn,.hero-actions{width:100%}
    .hero-actions{flex-direction:column;align-items:stretch}
    .btn.lg{width:100%}
  }
  /* very small phones */
  @media(max-width:380px){
    h1.hh{font-size:28px}
    .badge{font-size:11px}
    .wrap{padding:0 15px}
  }
  @media (prefers-reduced-motion:reduce){
    *{scroll-behavior:auto}
    .reveal{opacity:1;transform:none;transition:none}
    .blob,.mtrack,.badge .dot,.fc-a,.fc-b,h1.hh em,.bub.show,.prodc.show,.cta-reply.show{animation:none!important}
    h1.hh em{background-position:0 0}
  }

  /* =========================================================================
     v2.1 additions — product sections, feature/legal sub-pages, animations
     (appended; everything above is unchanged from the original build)
     ========================================================================= */

  /* ---------- generic illustration frame (SVG mockups live inside) ---------- */
  .illus{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--navy);
    border:1px solid var(--navy-line);box-shadow:var(--sh-lg)}
  .illus svg{display:block;width:100%;height:auto}
  .illus.light{background:var(--bg);border-color:var(--border)}
  .illus-cap{margin-top:12px;font:600 11.5px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--faint);text-align:center}

  /* ---------- mark in motion band (ported from the original site) ---------- */
  .band{position:relative;background:var(--navy);overflow:hidden;padding:clamp(64px,10vw,120px) 0;text-align:center;isolation:isolate}
  .band .wrap{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center}
  .band-kick{font:600 12px/1 var(--f-mono);letter-spacing:.24em;text-transform:uppercase;color:var(--g2);margin-bottom:30px}
  .band-logo{width:min(560px,84vw);height:auto;display:block;filter:drop-shadow(0 20px 54px rgba(0,0,0,.45))}
  .band-tag{color:rgba(226,236,250,.66);font-size:clamp(15px,2vw,18px);max-width:44ch;margin-top:28px;text-wrap:pretty}

  /* ---------- globe / connectivity animation ---------- */
  .globe-sec{position:relative;background:var(--navy);color:#fff;overflow:hidden;isolation:isolate;padding:clamp(64px,9vw,120px) 0}
  .globe-grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
  .globe-wrap{position:relative;display:flex;align-items:center;justify-content:center;min-height:440px}
  .globe{width:min(460px,86vw);height:min(460px,86vw);position:relative}
  .globe svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
  /* rotating meridians */
  .g-rot{transform-origin:center;animation:spin 44s linear infinite}
  @keyframes spin{to{transform:rotate(360deg)}}
  .g-line{fill:none;stroke:rgba(255,255,255,.14);stroke-width:1}
  .g-line.eq{stroke:rgba(32,196,186,.4)}
  .g-halo{fill:url(#globeGlow)}
  /* orbiting nodes + arcs */
  .g-arc{fill:none;stroke:url(#kxg);stroke-width:2;stroke-linecap:round;
    stroke-dasharray:6 240;stroke-dashoffset:0;animation:arcflow 3.6s linear infinite;filter:drop-shadow(0 0 6px rgba(32,196,186,.7))}
  .g-arc.a2{animation-delay:1.2s}.g-arc.a3{animation-delay:2.4s}.g-arc.a4{animation-delay:.6s}
  @keyframes arcflow{to{stroke-dashoffset:-246}}
  .g-node{fill:#fff}
  .g-pin{fill:url(#kxg);animation:pinpulse 2.6s ease-in-out infinite}
  .g-pin.p2{animation-delay:.5s}.g-pin.p3{animation-delay:1s}.g-pin.p4{animation-delay:1.5s}.g-pin.p5{animation-delay:2s}
  @keyframes pinpulse{0%,100%{opacity:.5;r:3}50%{opacity:1;r:5}}
  .g-ring{fill:none;stroke:rgba(32,196,186,.5);stroke-width:1.5;transform-origin:center;animation:ringpulse 3s ease-out infinite}
  @keyframes ringpulse{0%{opacity:.7;transform:scale(.2)}100%{opacity:0;transform:scale(1)}}
  .globe-stats{display:flex;gap:28px;flex-wrap:wrap;margin-top:34px;padding-top:28px;border-top:1px solid var(--navy-line)}
  .globe-stats .num{font:700 clamp(22px,2.6vw,30px)/1 var(--f-display);letter-spacing:-.02em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
  .globe-stats .lab{font:500 12.5px/1.35 var(--f-ui);color:var(--navy-muted);margin-top:6px;max-width:18ch}

  /* ---------- product overview grid (cards → feature pages) ---------- */
  .prodgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  .pcard{position:relative;display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--border);
    border-radius:var(--r-lg);padding:28px 26px;overflow:hidden;transition:transform .22s,box-shadow .22s,border-color .22s}
  .sec.alt .pcard{background:var(--bg)}
  .pcard::before{content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;transition:opacity .3s;pointer-events:none;
    background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(21,102,229,.10),transparent 60%)}
  .pcard:hover{transform:translateY(-6px);box-shadow:var(--sh-md);border-color:#D2DEEE}
  .pcard:hover::before{opacity:1}
  .pcard .ico{position:relative;width:52px;height:52px;border-radius:14px;background:#EEF4FE;display:flex;align-items:center;justify-content:center;margin-bottom:20px}
  .pcard .ico svg{width:26px;height:26px;color:var(--accent)}
  .pcard h3{position:relative;font:600 19px/1.25 var(--f-display);letter-spacing:-.015em;margin-bottom:9px}
  .pcard p{position:relative;color:var(--muted);font-size:14.5px;line-height:1.58;text-wrap:pretty;flex:1}
  .pcard .go{position:relative;display:inline-flex;align-items:center;gap:7px;margin-top:18px;font:600 13.5px/1 var(--f-ui);color:var(--accent);transition:gap .2s}
  .pcard .go svg{width:15px;height:15px}
  .pcard:hover .go{gap:11px}

  /* ---------- alternating feature rows (home + feature pages) ---------- */
  .frow{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
  .frow + .frow{margin-top:clamp(56px,7vw,96px)}
  .frow.flip .fr-media{order:2}
  .frow .fr-eyebrow{font:600 12px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);display:inline-flex;align-items:center;gap:9px;margin-bottom:16px}
  .frow .fr-eyebrow::before{content:"";width:20px;height:1px;background:var(--accent);opacity:.55}
  .frow h3{font:700 clamp(24px,2.8vw,32px)/1.1 var(--f-display);letter-spacing:-.025em;margin-bottom:14px}
  .frow p.lead{color:var(--muted);font-size:16.5px;line-height:1.62;text-wrap:pretty}
  .frow ul.ticks{list-style:none;margin-top:20px;display:flex;flex-direction:column;gap:12px}
  .frow ul.ticks li{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--ink)}
  .frow ul.ticks li svg{width:20px;height:20px;color:var(--g2);flex:none;margin-top:2px}

  /* ---------- WhatsApp automation showcase (flow rail) ---------- */
  .autorail{display:flex;gap:0;align-items:stretch;position:relative;overflow-x:auto;padding:6px 2px 14px}
  .autonode{position:relative;flex:1;min-width:180px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r);
    padding:22px 20px;margin-right:34px;transition:transform .2s,box-shadow .2s}
  .sec.alt .autonode{background:var(--bg)}
  .autonode:last-child{margin-right:0}
  .autonode:hover{transform:translateY(-4px);box-shadow:var(--sh-sm)}
  .autonode .tp{font:600 10.5px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
  .autonode .ic{width:40px;height:40px;border-radius:11px;background:var(--grad-soft);border:1px solid rgba(21,102,229,.16);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
  .autonode .ic svg{width:20px;height:20px;color:var(--accent)}
  .autonode h4{font:600 15.5px/1.2 var(--f-display);letter-spacing:-.01em;margin-bottom:6px}
  .autonode p{font-size:13px;line-height:1.5;color:var(--muted)}
  .autonode .cx{position:absolute;right:-30px;top:50%;transform:translateY(-50%);z-index:2;color:var(--g2)}
  .autonode .cx svg{width:22px;height:22px}
  .autonode:last-child .cx{display:none}

  /* ---------- AI capability pillars ---------- */
  .ai-pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;position:relative;z-index:2}
  .pillar{background:rgba(255,255,255,.04);border:1px solid var(--navy-line);border-radius:var(--r-lg);padding:28px 24px;transition:transform .22s,background .22s,border-color .22s}
  .pillar:hover{transform:translateY(-5px);background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.2)}
  .pillar .ic{width:50px;height:50px;border-radius:13px;background:var(--grad-soft);border:1px solid rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
  .pillar .ic svg{width:25px;height:25px;color:var(--g2)}
  .pillar h3{font:600 18px/1.22 var(--f-display);letter-spacing:-.015em;color:#fff;margin-bottom:9px}
  .pillar p{font-size:14px;line-height:1.58;color:var(--navy-muted)}

  /* ---------- sub-page hero (feature + legal pages) ---------- */
  .subhero{position:relative;background:var(--navy);color:#fff;overflow:hidden;isolation:isolate;border-radius:0 0 32px 32px}
  .subhero .aurora{opacity:.9}
  .subhero-in{position:relative;z-index:2;padding:clamp(52px,7vw,96px) 0 clamp(48px,6vw,80px)}
  .crumbs{display:flex;align-items:center;gap:9px;font:500 13px/1 var(--f-ui);color:rgba(226,236,250,.6);margin-bottom:22px}
  .crumbs a{color:rgba(226,236,250,.6);transition:color .15s}.crumbs a:hover{color:#fff}
  .crumbs svg{width:14px;height:14px;opacity:.5}
  .subhero h1{font:700 clamp(32px,5vw,54px)/1.04 var(--f-display);letter-spacing:-.032em;max-width:18ch}
  .subhero p.sub{font-size:clamp(16px,1.6vw,19px);line-height:1.55;color:var(--navy-muted);max-width:56ch;margin:20px 0 0;text-wrap:pretty}
  .subhero .badge{margin-bottom:22px}

  /* ---------- legal / article body ---------- */
  .article{max-width:820px;margin:0 auto}
  .article .updated{font:500 13px/1 var(--f-mono);letter-spacing:.04em;color:var(--faint);margin-bottom:14px}
  .article .toc{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r);padding:22px 24px;margin-bottom:40px}
  .article .toc h4{font:600 12px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-bottom:14px}
  .article .toc ol{margin:0;padding-left:20px;columns:2;column-gap:32px}
  .article .toc li{margin-bottom:8px;font-size:14px}
  .article .toc a{color:var(--accent)}
  .article .toc a:hover{text-decoration:underline}
  .article h2{font:700 22px/1.25 var(--f-display);letter-spacing:-.02em;margin:40px 0 12px;scroll-margin-top:96px}
  .article h2:first-of-type{margin-top:0}
  .article h3{font:600 17px/1.3 var(--f-display);margin:24px 0 8px}
  .article p{color:var(--muted);font-size:15.5px;line-height:1.72;margin-bottom:14px;text-wrap:pretty}
  .article ul,.article ol.body{margin:0 0 16px;padding-left:22px}
  .article li{color:var(--muted);font-size:15px;line-height:1.7;margin-bottom:8px}
  .article strong{color:var(--ink);font-weight:600}
  .article .note{background:#FFF8E6;border:1px solid #F1E1B0;border-radius:var(--r);padding:16px 18px;font-size:14px;color:#725B18;margin:22px 0}
  .article .contact-box{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r);padding:22px 24px;margin-top:16px}
  .article .contact-box p{margin-bottom:6px}

  /* ---------- CTA strip (reusable, light) ---------- */
  .ctastrip{background:var(--grad);border-radius:var(--r-lg);padding:clamp(34px,4vw,52px);display:flex;
    align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
  .ctastrip h3{color:#fff;font:700 clamp(22px,2.6vw,30px)/1.15 var(--f-display);letter-spacing:-.02em;max-width:22ch}
  .ctastrip .btn{background:#fff;color:var(--ink);border-color:#fff}
  .ctastrip .btn:hover{filter:brightness(.96)}

  /* ---------- responsive additions ---------- */
  @media(max-width:960px){
    .globe-grid,.frow,.frow.flip .fr-media{grid-template-columns:1fr;gap:40px}
    .frow.flip .fr-media{order:0}
    .prodgrid,.ai-pillars{grid-template-columns:repeat(2,1fr)}
    .globe-wrap{min-height:340px}
  }
  @media(max-width:600px){
    .prodgrid,.ai-pillars{grid-template-columns:1fr}
    .article .toc ol{columns:1}
    .autonode{margin-right:24px}
    .autonode .cx{right:-23px}
  }
  @media (prefers-reduced-motion:reduce){
    .g-rot,.g-arc,.g-pin,.g-ring{animation:none!important}
  }