/* Enzo Montana Theme — main.css
   Generated from HTML source. All section styles live here.
   Critical above-the-fold styles are in critical.css (inlined).
*/
@font-face {
    font-family: 'SF Pro Display';
    src: url('../fonts/SFProDisplay-Regular.woff2') format('woff2'),
         url('../fonts/SFProDisplay-Regular.woff')  format('woff'),
         local('SF Pro Display'), local('-apple-system');
    font-weight: 400; font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'SF Pro Display';
    src: url('../fonts/SFProDisplay-Bold.woff2') format('woff2'),
         url('../fonts/SFProDisplay-Bold.woff')  format('woff'),
         local('SF Pro Display'), local('-apple-system');
    font-weight: 700; font-style: normal;
    font-display: swap;
  }
  /* Italic weights fall back to system italics until variable italic files are added. */
  @font-face {
    font-family: 'SF Pro Display';
    src: local('SF Pro Display'), local('-apple-system');
    font-weight: 300; font-style: italic;
    font-display: swap;
  }
  @font-face {
    font-family: 'SF Pro Display';
    src: local('SF Pro Display'), local('-apple-system');
    font-weight: 100; font-style: italic;
    font-display: swap;
  }
  @font-face {
    font-family: 'SF Pro Display';
    src: local('SF Pro Display'), local('-apple-system');
    font-weight: 200; font-style: italic;
    font-display: swap;
  }

  :root {
    --bg:   #080808;
    --bg2:  #0D0D0D;
    --bg3:  #141414;
    --ink:  #FFFFFF;
    --ink-soft: rgba(255,255,255,.55);
    --ink-dim:  rgba(255,255,255,.28);
    --rule:      rgba(255,255,255,.08);
    --rule-soft: rgba(255,255,255,.04);
    --glass:        rgba(255,255,255,.04);
    --glass-border: rgba(255,255,255,.08);
    --ai-grad: conic-gradient(from 220deg at 50% 50%, #ffffff 0deg, #D6A989 120deg, #ffffff 240deg, #D6A989 360deg);
    --ai-grad-linear: linear-gradient(135deg, #ffffff 0%, #f4e0cf 35%, #D6A989 65%, #ffffff 100%);
    --shadow-md: 0 20px 60px rgba(0,0,0,.6);
  }

  *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; -webkit-font-smoothing:antialiased; }
  html { scroll-behavior: smooth; }
  body {
    background: var(--bg);
    color: var(--ink);
    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
    font-weight: 400; line-height: 1.5; letter-spacing: -.01em;
    overflow-x: hidden;
  }
  a { color: inherit; text-decoration: none; }
  button { font: inherit; cursor: pointer; border: none; background: none; }
  ::selection { background: rgba(255,255,255,.12); }

  /* ============================================================
     KEYFRAMES
  ============================================================ */
  @keyframes fadeUp   { from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:none;} }
  @keyframes rotate   { to { transform: rotate(360deg); } }
  @keyframes pulse    { 50% { transform: scale(1.3); opacity: .7; } }
  @keyframes orbSpin  { to { transform: rotate(360deg); } }
  @keyframes breath   { 50% { transform: scale(1.05); } }
  @keyframes speakPulse { 50% { transform: scale(1.09); } }
  @keyframes bubbleIn { to { opacity:1; transform:none; } }
  @keyframes dot      { 0%,60%,100%{opacity:.3;transform:translateY(0);}30%{opacity:1;transform:translateY(-3px);} }
  @keyframes typeBlink{ 50%{opacity:0;} }
  @keyframes ringPulse{ 0%{transform:scale(.95);opacity:1;}100%{transform:scale(1.22);opacity:0;} }
  @keyframes scrollLine { 0%,100%{transform:translateY(0);opacity:.25;} 50%{transform:translateY(10px);opacity:.9;} }
  @keyframes ambientDrift { to { transform: translate(18px,-12px) scale(1.06); } }
  @keyframes marquee  { from{transform:translate3d(0,0,0);}to{transform:translate3d(-50%,0,0);} }
  @keyframes bgFloat  { to { transform: translate(-14px,-10px) scale(1.04); } }
  @keyframes auroraSpin {
    to { transform: translate(-50%,-50%) rotate(360deg); }
  }
  @keyframes meshDrift1 {
    0%,100% { transform: translate(0,0) scale(1); }
    33%     { transform: translate(8vw,4vw) scale(1.1); }
    66%     { transform: translate(4vw,-6vw) scale(.95); }
  }
  @keyframes meshDrift2 {
    0%,100% { transform: translate(0,0) scale(1); }
    33%     { transform: translate(-6vw,5vw) scale(1.08); }
    66%     { transform: translate(-10vw,-4vw) scale(.92); }
  }
  @keyframes meshDrift3 {
    0%,100% { transform: translate(0,0) scale(1); }
    33%     { transform: translate(5vw,-5vw) scale(1.12); }
    66%     { transform: translate(-4vw,-8vw) scale(.96); }
  }

  /* ============================================================
     NAV
  ============================================================ */
  .nav {
    position: fixed; top:0; left:0; right:0; z-index:100;
    backdrop-filter: saturate(180%) blur(24px);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    background: rgba(8,8,8,.78);
    border-bottom: 1px solid var(--rule);
  }
  .nav-inner {
    max-width:1200px; margin:0 auto;
    display:flex; justify-content:space-between; align-items:center;
    height:52px; padding:0 24px;
  }
  .logo {
    display:flex; align-items:center; gap:9px;
    font-weight:700; font-size:15px; letter-spacing:-.03em; color:#fff;
  }
  .logo-orb {
    width:20px; height:20px; border-radius:50%;
    background: var(--ai-grad);
    animation: rotate 14s linear infinite;
    box-shadow: 0 0 14px rgba(214,169,137,.35);
    flex-shrink:0;
  }
  .nav-cta {
    display:inline-flex; align-items:center; gap:7px;
    padding:8px 18px; border-radius:999px;
    background:transparent; color:rgba(255,255,255,.7);
    border:1px solid rgba(255,255,255,.15);
    font-size:13px; font-weight:500; letter-spacing:-.015em;
    transition: all .2s;
  }
  .nav-cta:hover { border-color:rgba(255,255,255,.35); color:#fff; transform:scale(1.02); }
  .nav-cta .dot {
    width:6px; height:6px; border-radius:50%; background:#30D158;
    box-shadow:0 0 0 3px rgba(48,209,88,.22);
    animation: pulse 2.4s ease-in-out infinite;
  }

  /* ============================================================
     HERO
  ============================================================ */
  .hero {
    min-height: 100vh;
    display:flex; flex-direction:column; justify-content:center; align-items:center;
    text-align:center; padding:130px 24px 120px;
    position:relative; overflow:clip;
  }

  /* ambient radial glows */
  .hero-ambient {
    position:absolute; inset:0; pointer-events:none; z-index:0;
    background:
      radial-gradient(ellipse 80% 55% at 50% -5%,  rgba(168,197,255,.11), transparent 65%),
      radial-gradient(ellipse 55% 45% at 82% 55%,  rgba(213,180,255,.07), transparent 60%),
      radial-gradient(ellipse 50% 45% at 18% 80%,  rgba(180,240,232,.05), transparent 60%);
    animation: ambientDrift 14s ease-in-out infinite alternate;
  }

  /* grain */
  .hero-grain {
    position:absolute; inset:0; pointer-events:none; z-index:0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .055 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  }

  /* big diffused orb behind headline */
  .hero-orb-bg {
    position:absolute; top:50%; left:50%;
    transform:translate(-50%,-55%);
    width:700px; height:700px;
    border-radius:50%;
    background: conic-gradient(from 220deg at 50% 50%,
      #ffffff 0deg,
      #D6A989 90deg,
      #ffffff 180deg,
      #D6A989 270deg,
      #ffffff 360deg);
    filter: blur(140px);
    opacity: .12;
    animation: rotate 28s linear infinite;
    pointer-events:none; z-index:0;
  }

  .hero > *:not(.hero-ambient):not(.hero-grain):not(.hero-orb-bg) { position:relative; z-index:1; }

  .hero-badge {
    display:inline-flex; align-items:center; gap:8px;
    padding:6px 14px 6px 10px; border-radius:999px;
    background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
    backdrop-filter:blur(20px);
    font-size:12px; font-weight:500; color:rgba(255,255,255,.5);
    letter-spacing:.04em; text-transform:uppercase;
    margin-bottom:32px;
    opacity:0; animation: fadeUp 1s ease .1s forwards;
  }
  .hero-badge .live-dot {
    width:6px; height:6px; border-radius:50%; background:#30D158;
    box-shadow:0 0 0 3px rgba(48,209,88,.18);
    animation: pulse 2.4s ease-in-out infinite;
  }

  .hero h1 {
    font-size: clamp(58px, 10.5vw, 136px);
    font-weight:700; line-height:.9; letter-spacing:-.045em;
    color:#fff; max-width:1100px; margin-bottom:12px;
    opacity:0; animation: fadeUp 1.1s cubic-bezier(.2,.7,.2,1) .22s forwards;
  }
  .hero h1 .line2 {
    display:block;
    font-weight:300; font-style:italic;
    background: var(--ai-grad-linear);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent;
    margin-top:6px;
  }

  .hero-sub {
    font-size: clamp(16px, 1.9vw, 20px);
    font-weight:400; color:rgba(255,255,255,.38);
    max-width:500px; line-height:1.55; letter-spacing:-.01em;
    margin-bottom:44px;
    opacity:0; animation: fadeUp 1.1s cubic-bezier(.2,.7,.2,1) .38s forwards;
  }

  .hero-ctas {
    display:flex; gap:12px; flex-wrap:wrap; justify-content:center;
    opacity:0; animation: fadeUp 1s ease .54s forwards;
  }
  .btn-primary {
    display:inline-flex; align-items:center; gap:8px;
    padding:15px 28px; border-radius:999px;
    background:#fff; color:#000;
    font-size:15px; font-weight:600; letter-spacing:-.02em;
    transition: all .25s cubic-bezier(.2,.7,.2,1);
  }
  .btn-primary:hover {
    background:rgba(255,255,255,.9);
    transform:scale(1.03);
    box-shadow:0 0 50px rgba(255,255,255,.14);
  }
  .btn-ghost {
    display:inline-flex; align-items:center; gap:8px;
    padding:15px 28px; border-radius:999px;
    background:transparent; color:rgba(255,255,255,.6);
    font-size:15px; font-weight:500; letter-spacing:-.02em;
    border:1px solid rgba(255,255,255,.13);
    transition: all .25s cubic-bezier(.2,.7,.2,1);
  }
  .btn-ghost:hover {
    border-color:rgba(255,255,255,.35);
    color:#fff; background:rgba(255,255,255,.05);
  }

  .hero-scroll {
    display:flex; flex-direction:column; align-items:center; gap:8px;
    font-size:10px; color:var(--ink-dim); letter-spacing:.14em; text-transform:uppercase;
    opacity:0; animation: fadeUp 1s ease 1.1s forwards;
    pointer-events:none;
    margin-top:48px;
  }
  .hero-scroll-line {
    width:1px; height:34px;
    background:linear-gradient(180deg,rgba(255,255,255,.25),transparent);
    animation: scrollLine 2.2s ease-in-out infinite;
  }

  /* ============================================================
     MARQUEE
  ============================================================ */
  .marquee-sec {
    border-top:1px solid var(--rule);
    border-bottom:1px solid var(--rule);
    padding:17px 0;
    overflow:hidden;
    background:var(--bg2);
  }
  .marquee-track {
    display:flex;
    animation: marquee 60s linear infinite;
    width:max-content;
    will-change: transform;
    backface-visibility: hidden;
  }
  .marquee-group { display:flex; flex-shrink:0; }
  .marquee-item {
    display:inline-flex; align-items:center; gap:14px;
    padding:0 28px;
    font-size:12px; font-weight:500;
    color:rgba(255,255,255,.3);
    letter-spacing:.06em; text-transform:uppercase;
    white-space:nowrap;
  }
  .m-dot {
    width:3px; height:3px; border-radius:50%;
    background:rgba(255,255,255,.18); flex-shrink:0;
  }

  /* ============================================================
     CHAT SECTION
  ============================================================ */
  .chat-section {
    padding:60px 24px 140px;
    background:var(--bg);
    position:relative;
    overflow:hidden;
    isolation:isolate;
  }
  /* premium aurora backdrop — enzo.marketing palette */
  .chat-glow {
    position:absolute; inset:0;
    pointer-events:none;
    z-index:0;
    background:
      radial-gradient(ellipse 900px 600px at 50% 0%, rgba(236,72,153,.18) 0%, transparent 60%),
      radial-gradient(ellipse 700px 500px at 100% 100%, rgba(152,150,240,.12) 0%, transparent 60%),
      radial-gradient(ellipse 700px 500px at 0% 100%, rgba(254,45,45,.08) 0%, transparent 60%);
  }
  /* slow rotating conic aurora */
  .chat-aurora {
    position:absolute;
    top:50%; left:50%;
    width:140vmax; height:140vmax;
    transform:translate(-50%,-50%);
    pointer-events:none;
    z-index:0;
    background: conic-gradient(from 0deg at 50% 50%,
      rgba(236,72,153,0) 0deg,
      rgba(236,72,153,.32) 60deg,
      rgba(255,206,236,.22) 140deg,
      rgba(236,72,153,0) 200deg,
      rgba(152,150,240,.26) 280deg,
      rgba(236,72,153,0) 360deg);
    filter: blur(90px);
    opacity:.6;
    animation: auroraSpin 60s linear infinite;
  }
  /* animated mesh blobs — pink / rose / soft-purple */
  .chat-mesh {
    position:absolute; inset:-10%;
    pointer-events:none;
    z-index:0;
    filter: blur(80px);
  }
  .chat-mesh span {
    position:absolute; display:block;
    border-radius:50%;
    will-change: transform;
    mix-blend-mode: screen;
  }
  .chat-mesh .m1 {
    width:54vw; height:54vw; max-width:780px; max-height:780px;
    top:-18%; left:-12%;
    background: radial-gradient(circle at 40% 40%, rgba(236,72,153,.55), rgba(236,72,153,0) 65%);
    animation: meshDrift1 28s ease-in-out infinite;
  }
  .chat-mesh .m2 {
    width:46vw; height:46vw; max-width:680px; max-height:680px;
    top:10%; right:-14%;
    background: radial-gradient(circle at 50% 50%, rgba(152,150,240,.50), rgba(152,150,240,0) 65%);
    animation: meshDrift2 34s ease-in-out infinite;
  }
  .chat-mesh .m3 {
    width:44vw; height:44vw; max-width:640px; max-height:640px;
    bottom:-16%; left:20%;
    background: radial-gradient(circle at 50% 50%, rgba(255,206,236,.45), rgba(255,206,236,0) 65%);
    animation: meshDrift3 40s ease-in-out infinite;
  }
  .chat-mesh .m4 {
    width:38vw; height:38vw; max-width:540px; max-height:540px;
    top:48%; right:22%;
    background: radial-gradient(circle at 50% 50%, rgba(254,45,45,.28), rgba(254,45,45,0) 65%);
    animation: meshDrift2 46s ease-in-out infinite reverse;
  }
  /* faint grid — modern SaaS feel */
  .chat-grid {
    position:absolute; inset:0;
    pointer-events:none;
    z-index:0;
    background-image:
      linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 20%, transparent 80%);
            mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 20%, transparent 80%);
  }
  /* subtle noise for texture */
  .chat-noise {
    position:absolute; inset:0;
    pointer-events:none;
    z-index:0;
    opacity:.06;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    mix-blend-mode: overlay;
  }
  .chat-wrap { max-width:740px; margin:0 auto; position:relative; z-index:1; }

  .chat-header { text-align:center; margin-bottom:48px; }
  .chat-eyebrow {
    display:inline-flex; align-items:center; gap:8px;
    padding:6px 14px; border-radius:999px;
    background:var(--glass); border:1px solid var(--glass-border);
    font-size:11px; font-weight:500; color:var(--ink-soft);
    letter-spacing:.08em; text-transform:uppercase;
    margin-bottom:22px;
  }
  .chat-eyebrow .e-orb {
    width:16px; height:16px; border-radius:50%;
    background: conic-gradient(from 220deg at 50% 50%, #ffffff 0deg, #D6A989 120deg, #ffffff 240deg, #D6A989 360deg);
    animation: rotate 10s linear infinite;
  }
  .chat-header h2 {
    font-size:clamp(42px,7vw,76px);
    font-weight:700; line-height:.94; letter-spacing:-.045em;
    color:#fff; margin-bottom:16px;
  }
  .chat-header h2 em {
    font-weight:300; font-style:italic;
    background:var(--ai-grad-linear);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent;
  }
  .chat-header p {
    font-size:17px; color:rgba(255,255,255,.38);
    max-width:440px; margin:0 auto; line-height:1.5;
  }

  /* chat card — frosted glass */
  .chat-surface {
    position:relative;
    background: linear-gradient(155deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.03) 60%, rgba(255,255,255,.06) 100%);
    border:1px solid rgba(255,255,255,.14);
    border-radius:28px;
    padding:20px 20px 16px;
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    box-shadow:
      0 30px 80px -20px rgba(0,0,0,.55),
      0 2px 0 0 rgba(255,255,255,.06) inset,
      0 -1px 0 0 rgba(255,255,255,.03) inset;
  }
  .chat-surface::before {
    content:''; position:absolute; inset:0;
    border-radius:inherit; pointer-events:none;
    background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0) 38%);
    mix-blend-mode: overlay;
  }
  .chat-surface::after {
    content:''; position:absolute; inset:0;
    border-radius:inherit; pointer-events:none;
    padding:1px;
    background: linear-gradient(140deg, rgba(255,255,255,.25), rgba(255,255,255,0) 40%, rgba(255,255,255,.08) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
  }
  .chat-top {
    display:flex; align-items:center; gap:12px;
    padding:4px 6px 16px;
    border-bottom:1px solid var(--rule);
    margin-bottom:16px;
  }
  .orb-lg {
    width:36px; height:36px; border-radius:50%;
    background: conic-gradient(from 220deg at 50% 50%, #ffffff 0deg, #D6A989 120deg, #ffffff 240deg, #D6A989 360deg);
    box-shadow:0 0 0 2px var(--bg3), 0 0 0 3px var(--rule), 0 8px 24px -8px rgba(214,169,137,.5);
    animation: rotate 14s linear infinite;
    position:relative; flex-shrink:0;
  }
  .orb-lg::after {
    content:''; position:absolute; inset:4px; border-radius:50%;
    background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.5), transparent 50%);
  }
  .chat-top .who { flex:1; }
  .chat-top .name { font-size:14px; font-weight:600; letter-spacing:-.01em; color:#fff; }
  .chat-top .status {
    font-size:12px; color:var(--ink-dim);
    display:flex; align-items:center; gap:5px;
  }
  .chat-top .status::before {
    content:''; width:6px; height:6px; border-radius:50%; background:#30D158;
  }
  .chat-top .mode-chip {
    font-size:11px; font-weight:500; color:var(--ink-dim);
    padding:4px 10px; border-radius:999px;
    background:var(--glass); border:1px solid var(--rule);
  }

  /* messages */
  .stack {
    display:flex; flex-direction:column; gap:10px;
    height: clamp(360px, 55vh, 520px);
    overflow-y:auto;
    padding:4px 2px 8px; scroll-behavior:smooth;
  }
  .stack::-webkit-scrollbar { width:4px; }
  .stack::-webkit-scrollbar-thumb { background:var(--rule); border-radius:2px; }

  .msg {
    max-width:86%; padding:12px 16px; border-radius:20px;
    font-size:15px; line-height:1.45; letter-spacing:-.005em;
    opacity:0; transform:translateY(8px);
    animation: bubbleIn .45s cubic-bezier(.2,.7,.2,1) forwards;
  }
  .msg.ai {
    align-self:flex-start;
    background:rgba(255,255,255,.07);
    color:rgba(255,255,255,.88);
    border-bottom-left-radius:6px;
  }
  .msg.user {
    align-self:flex-end;
    background:#fff; color:#000;
    border-bottom-right-radius:6px;
  }

  .typing {
    align-self:flex-start;
    background:rgba(255,255,255,.07);
    padding:14px 18px; border-radius:20px; border-bottom-left-radius:6px;
    display:inline-flex; gap:4px; align-items:center;
    opacity:0; animation: bubbleIn .3s ease forwards;
  }
  .typing span {
    width:7px; height:7px; border-radius:50%;
    background:rgba(255,255,255,.35);
    animation: dot 1.3s ease-in-out infinite;
  }
  .typing span:nth-child(2) { animation-delay:.18s; }
  .typing span:nth-child(3) { animation-delay:.36s; }

  .type-cursor {
    display:inline-block; width:2px; height:14px;
    background:rgba(255,255,255,.65);
    vertical-align:-2px; margin-left:2px;
    animation: typeBlink 1.05s steps(1) infinite;
  }

  .options {
    display:flex; flex-direction:column; gap:6px; margin-top:4px;
    align-self:flex-start; max-width:100%;
    opacity:0; animation: bubbleIn .4s ease forwards;
  }
  .opt {
    display:flex; align-items:center; gap:12px; justify-content:space-between;
    padding:12px 16px; border-radius:16px;
    background:var(--bg); border:1px solid var(--rule);
    cursor:pointer; text-align:left;
    font-size:14px; font-weight:500; color:rgba(255,255,255,.8);
    transition: all .2s cubic-bezier(.2,.7,.2,1);
  }
  .opt:hover {
    border-color:rgba(255,255,255,.25);
    background:rgba(255,255,255,.04);
    transform:translateY(-1px);
  }
  .opt .label { flex:1; }
  .opt .label b { font-weight:600; display:block; color:#fff; }
  .opt .label small { color:rgba(255,255,255,.3); font-size:12px; font-weight:400; display:block; margin-top:1px; }
  .opt .go { font-size:16px; opacity:.25; transition:all .2s; }
  .opt:hover .go { opacity:.7; transform:translateX(2px); }

  .final { display:flex; flex-direction:column; gap:8px; margin-top:6px; opacity:0; animation:bubbleIn .4s ease forwards; }
  .final .row { display:flex; gap:8px; flex-wrap:wrap; }
  .btn {
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:12px 22px; border-radius:999px;
    font-size:14px; font-weight:500; letter-spacing:-.005em;
    border:1px solid transparent; cursor:pointer; text-decoration:none;
    transition: all .22s cubic-bezier(.2,.7,.2,1);
  }
  .btn.dark { background:#fff; color:#000; flex:1; min-width:0; }
  .btn.dark:hover { background:rgba(255,255,255,.9); transform:scale(1.02); }
  .btn.light { background:transparent; color:rgba(255,255,255,.6); border-color:var(--rule); flex:1; min-width:0; }
  .btn.light:hover { border-color:rgba(255,255,255,.28); color:#fff; }

  .control-bar {
    margin-top:16px; padding-top:16px;
    border-top:1px solid var(--rule);
    display:flex; align-items:center; gap:10px;
  }
  .talk-btn {
    flex:1;
    display:flex; align-items:center; justify-content:center; gap:10px;
    padding:12px 18px 12px 14px; border-radius:999px;
    background:#fff; color:#000; border:none;
    font-size:14px; font-weight:600; letter-spacing:-.01em;
    transition: all .25s cubic-bezier(.2,.7,.2,1);
  }
  .talk-btn:hover { background:rgba(255,255,255,.9); transform:scale(1.01); }
  .talk-btn .mic-orb {
    width:22px; height:22px; border-radius:50%;
    background:var(--ai-grad);
    animation: rotate 10s linear infinite;
  }
  .reset-mini {
    background:none; border:none; cursor:pointer;
    color:var(--ink-dim); font-size:12px; padding:8px 12px; border-radius:999px;
    transition:all .2s;
  }
  .reset-mini:hover { color:rgba(255,255,255,.5); background:var(--glass); }

  /* ============================================================
     VOICE OVERLAY
  ============================================================ */
  .voice-overlay {
    position:fixed; inset:0; z-index:300;
    background:radial-gradient(120% 80% at 50% 40%, #0F0F12 0%, #09090C 60%, #06060A 100%);
    display:flex; flex-direction:column; align-items:center; justify-content:space-between;
    padding:max(48px,env(safe-area-inset-top)) 24px max(40px,env(safe-area-inset-bottom));
    opacity:0; pointer-events:none;
    transform:scale(1.02);
    transition:opacity .45s cubic-bezier(.2,.7,.2,1), transform .45s cubic-bezier(.2,.7,.2,1);
  }
  .voice-overlay::before {
    content:''; position:absolute; inset:0; pointer-events:none;
    background-image:
      radial-gradient(600px 400px at 20% 20%, rgba(168,197,255,.07), transparent 60%),
      radial-gradient(500px 400px at 80% 30%, rgba(213,180,255,.06), transparent 60%),
      radial-gradient(600px 500px at 50% 100%, rgba(180,240,232,.05), transparent 60%);
    animation: bgFloat 18s ease-in-out infinite alternate;
  }
  .voice-overlay.open { opacity:1; pointer-events:auto; transform:scale(1); }
  .voice-head {
    position:relative; z-index:2;
    display:flex; justify-content:space-between; align-items:center;
    width:100%; max-width:720px;
  }
  .voice-head .vtitle {
    font-size:13px; font-weight:500; color:var(--ink-dim); letter-spacing:-.005em;
    display:flex; align-items:center; gap:8px;
  }
  .voice-head .vtitle .d {
    width:6px; height:6px; border-radius:50%; background:#30D158;
    box-shadow:0 0 0 3px rgba(48,209,88,.15);
    animation:pulse 2.4s ease-in-out infinite;
  }
  .close-v {
    width:40px; height:40px; border-radius:50%;
    background:var(--glass); border:1px solid var(--rule);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; transition:all .2s;
  }
  .close-v:hover { background:rgba(255,255,255,.08); }
  .close-v svg { width:16px; height:16px; stroke:rgba(255,255,255,.6); stroke-width:1.8; fill:none; stroke-linecap:round; }
  .voice-stage {
    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:40px; position:relative; z-index:2; width:100%;
  }
  .voice-orb {
    position:relative; width:240px; height:240px;
    display:flex; align-items:center; justify-content:center;
  }
  .voice-orb .core {
    position:absolute; inset:0; border-radius:50%;
    background:
      radial-gradient(circle at 32% 28%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 45%),
      conic-gradient(from 220deg at 50% 50%,
        #ffffff 0deg,
        #f4e0cf 60deg,
        #D6A989 120deg,
        #f4e0cf 180deg,
        #ffffff 240deg,
        #D6A989 300deg,
        #ffffff 360deg);
    animation:orbSpin 16s linear infinite;
    box-shadow:
      0 30px 80px -20px rgba(214,169,137,.55),
      0 20px 60px -20px rgba(255,255,255,.35),
      inset 0 0 40px rgba(255,255,255,.35),
      inset 0 -20px 40px -10px rgba(214,169,137,.3);
    transition:transform .15s ease-out;
  }
  .voice-orb .glow {
    position:absolute; inset:-30px; border-radius:50%;
    background: conic-gradient(from 220deg at 50% 50%, #ffffff 0deg, #D6A989 120deg, #ffffff 240deg, #D6A989 360deg);
    filter:blur(48px); opacity:.38;
    animation:orbSpin 24s linear infinite reverse;
  }
  .voice-orb .gloss {
    position:absolute; inset:12px; border-radius:50%; pointer-events:none;
    background:radial-gradient(circle at 32% 28%, rgba(255,255,255,.55) 0%, transparent 42%);
  }
  .voice-orb .ring {
    position:absolute; inset:-18px; border-radius:50%;
    border:1px solid rgba(255,255,255,.07);
    transition:transform .12s ease-out, opacity .2s; opacity:.7;
  }
  .voice-orb .ring.r2 { inset:-36px; border-color:rgba(255,255,255,.04); }
  .voice-orb .ring.r3 { inset:-56px; border-color:rgba(255,255,255,.025); }
  .voice-orb.idle .core   { animation:orbSpin 16s linear infinite, breath 3.6s ease-in-out infinite; }
  .voice-orb.listening .core { animation:orbSpin 10s linear infinite; }
  .voice-orb.listening .glow { opacity:.75; }
  .voice-orb.speaking .core  { animation:orbSpin 8s linear infinite, speakPulse 1.4s ease-in-out infinite; }
  .voice-orb.speaking .glow  { opacity:.9; }
  .voice-transcript {
    text-align:center; max-width:560px; min-height:64px;
    font-weight:400;
    font-size:clamp(22px,4vw,30px); line-height:1.25; letter-spacing:-.02em;
    color:rgba(255,255,255,.82); padding:0 8px;
  }
  .voice-transcript .interim { color:var(--ink-dim); font-style:italic; }
  .voice-transcript .label {
    display:block; font-size:11px; font-weight:500; color:var(--ink-dim);
    letter-spacing:.1em; text-transform:uppercase; margin-bottom:10px;
  }
  .voice-ctrls {
    position:relative; z-index:2;
    display:flex; align-items:center; justify-content:center; gap:14px;
    width:100%; max-width:720px;
  }
  .vbtn {
    width:64px; height:64px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:var(--glass); border:1px solid var(--rule);
    cursor:pointer; transition:all .2s;
  }
  .vbtn:hover { transform:scale(1.05); border-color:rgba(255,255,255,.18); }
  .vbtn svg { width:22px; height:22px; stroke:rgba(255,255,255,.65); stroke-width:1.8; fill:none; stroke-linecap:round; stroke-linejoin:round; }
  .vbtn.primary { width:76px; height:76px; background:#fff; border-color:#fff; }
  .vbtn.primary svg { stroke:#000; width:26px; height:26px; }
  .vbtn.primary:hover { background:rgba(255,255,255,.9); }
  .vbtn.primary.listening { background:#FF3B30; border-color:#FF3B30; }
  .vbtn.primary.listening svg { stroke:#fff; }
  .vbtn.primary.listening::before {
    content:''; position:absolute; inset:-6px; border-radius:50%;
    border:2px solid rgba(255,59,48,.38);
    animation:ringPulse 1.2s ease-in-out infinite;
  }
  .vbtn .caption {
    position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%);
    font-size:11px; color:var(--ink-dim); letter-spacing:.06em; text-transform:uppercase;
    white-space:nowrap; pointer-events:none;
  }
  .voice-foot {
    position:relative; z-index:2; margin-top:50px; text-align:center;
    font-size:12px; color:var(--ink-dim);
  }
  .voice-foot b { color:rgba(255,255,255,.45); font-weight:500; }

  /* ============================================================
     SOCIAL STRIP
  ============================================================ */
  .social-strip-sec {
    padding:52px 24px;
    background:var(--bg2);
    border-top:1px solid var(--rule);
    border-bottom:1px solid var(--rule);
  }
  .social-strip-inner {
    max-width:1200px; margin:0 auto;
    display:flex; align-items:center; justify-content:space-between;
    gap:24px; flex-wrap:wrap;
  }
  .social-strip-left { display:flex; align-items:center; gap:18px; }
  .ig-avatar {
    width:44px; height:44px; border-radius:50%;
    background: conic-gradient(from 220deg at 50% 50%, #ffffff 0deg, #D6A989 120deg, #ffffff 240deg, #D6A989 360deg);
    box-shadow:0 0 0 2px var(--bg2), 0 0 0 3px var(--rule), 0 0 24px rgba(214,169,137,.25);
    animation:rotate 14s linear infinite;
    position:relative; flex-shrink:0;
  }
  .ig-avatar::after {
    content:''; position:absolute; inset:4px; border-radius:50%;
    background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.6), transparent 50%);
  }
  .social-strip-copy { display:flex; flex-direction:column; gap:4px; }
  .social-strip-title { font-size:17px; font-weight:600; color:#fff; letter-spacing:-.025em; }
  .social-strip-sub   { font-size:14px; color:rgba(255,255,255,.32); font-weight:400; letter-spacing:-.01em; }
  .social-strip-btn {
    display:inline-flex; align-items:center; gap:8px;
    padding:13px 24px; border-radius:999px;
    background:#fff; color:#000;
    font-size:14px; font-weight:600; letter-spacing:-.015em;
    transition:all .25s cubic-bezier(.2,.7,.2,1); white-space:nowrap;
  }
  .social-strip-btn:hover { background:rgba(255,255,255,.9); transform:scale(1.02); }

  /* ============================================================
     BLOG / JOURNAL
  ============================================================ */
  .blog-sec {
    position:relative;
    padding: 120px 24px 140px;
    background: var(--bg);
    overflow:hidden;
  }
  .blog-sec::before {
    content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
    background:
      radial-gradient(ellipse 700px 420px at 15% 20%, rgba(214,169,137,.08) 0%, transparent 60%),
      radial-gradient(ellipse 700px 420px at 85% 80%, rgba(184,158,217,.06) 0%, transparent 60%);
  }
  .blog-wrap {
    max-width:1200px; margin:0 auto;
    position:relative; z-index:1;
  }
  .blog-head {
    display:flex; align-items:flex-end; justify-content:space-between;
    gap:32px; flex-wrap:wrap;
    margin-bottom:56px;
  }
  .blog-head-left { max-width:560px; }
  .blog-eyebrow {
    display:inline-flex; align-items:center; gap:8px;
    padding:6px 14px; border-radius:999px;
    background:var(--glass); border:1px solid var(--glass-border);
    font-size:11px; font-weight:500; color:var(--ink-soft);
    letter-spacing:.08em; text-transform:uppercase;
    margin-bottom:22px;
  }
  .blog-eyebrow::before {
    content:''; width:6px; height:6px; border-radius:50%;
    background:#D6A989;
    box-shadow: 0 0 10px rgba(214,169,137,.6);
  }
  .blog-head h2 {
    font-size:clamp(42px,6vw,68px);
    font-weight:700; line-height:.96; letter-spacing:-.04em;
    color:#fff; margin-bottom:14px;
  }
  .blog-head h2 em {
    font-weight:300; font-style:italic;
    background:var(--ai-grad-linear);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent;
  }
  .blog-head p {
    font-size:16px; color:rgba(255,255,255,.45);
    line-height:1.55; max-width:460px;
  }
  .blog-all {
    display:inline-flex; align-items:center; gap:8px;
    padding:12px 22px; border-radius:999px;
    background:transparent; color:rgba(255,255,255,.75);
    border:1px solid rgba(255,255,255,.12);
    font-size:13.5px; font-weight:500; letter-spacing:-.005em;
    transition:all .25s cubic-bezier(.2,.7,.2,1);
    white-space:nowrap;
  }
  .blog-all:hover {
    border-color:rgba(255,255,255,.3);
    color:#fff;
    background:rgba(255,255,255,.04);
    transform:translateX(2px);
  }
  .blog-all .arrow { transition:transform .25s; }
  .blog-all:hover .arrow { transform:translateX(3px); }

  /* Grid: 1 featured big + 3 stacked on the right */
  .blog-grid {
    display:grid;
    grid-template-columns: 1.25fr 1fr;
    gap:20px;
  }
  .blog-list {
    display:flex; flex-direction:column; gap:20px;
  }

  /* Card base */
  .blog-card {
    position:relative;
    display:flex; flex-direction:column;
    border-radius:22px;
    background: linear-gradient(155deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.02) 60%, rgba(255,255,255,.04) 100%);
    border:1px solid rgba(255,255,255,.08);
    overflow:hidden;
    cursor:pointer;
    transition: transform .35s cubic-bezier(.2,.7,.2,1),
                border-color .35s, box-shadow .35s;
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    text-decoration:none; color:inherit;
  }
  .blog-card::after {
    content:''; position:absolute; inset:0;
    border-radius:inherit; pointer-events:none;
    padding:1px;
    background: linear-gradient(140deg, var(--c1, rgba(255,255,255,.14)), transparent 50%, var(--c2, rgba(255,255,255,.06)) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0;
    transition: opacity .35s;
  }
  .blog-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255,255,255,.14);
    box-shadow: 0 30px 70px -30px rgba(0,0,0,.7),
                0 0 0 1px rgba(255,255,255,.04) inset;
  }
  .blog-card:hover::after { opacity: 1; }

  /* Cover — gradient placeholder */
  .blog-cover {
    position:relative;
    aspect-ratio: 16/10;
    overflow:hidden;
    background: var(--cover-grad, linear-gradient(135deg,#D6A989,#9896F0));
  }
  .blog-cover::before {
    content:''; position:absolute; inset:0;
    background:
      radial-gradient(circle at 25% 30%, rgba(255,255,255,.35), transparent 45%),
      radial-gradient(circle at 80% 75%, rgba(0,0,0,.25), transparent 60%);
    mix-blend-mode: overlay;
  }
  .blog-cover::after {
    content:''; position:absolute; inset:0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .08 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    opacity:.6; mix-blend-mode: overlay;
  }
  .blog-cat {
    position:absolute; top:16px; left:16px; z-index:2;
    padding:6px 12px; border-radius:999px;
    background: rgba(8,8,8,.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border:1px solid rgba(255,255,255,.18);
    font-size:11px; font-weight:600; letter-spacing:.05em;
    text-transform:uppercase; color:#fff;
  }
  .blog-glyph {
    position:absolute; right:18px; bottom:18px;
    font-size:32px;
    filter: drop-shadow(0 6px 16px rgba(0,0,0,.35));
    z-index:2;
  }

  /* Body */
  .blog-body {
    padding: 22px 22px 20px;
    display:flex; flex-direction:column;
    flex:1;
  }
  .blog-card h3 {
    font-size:20px; font-weight:600;
    letter-spacing:-.025em; line-height:1.25;
    color:#fff; margin-bottom:10px;
  }
  .blog-card p {
    font-size:14px; color:rgba(255,255,255,.5);
    line-height:1.55; letter-spacing:-.005em;
    margin-bottom:16px;
  }
  .blog-meta {
    display:flex; align-items:center; gap:8px;
    margin-top:auto;
    font-size:12px; color:rgba(255,255,255,.4);
    letter-spacing:-.005em;
  }
  .blog-meta .dot { width:3px; height:3px; border-radius:50%; background:rgba(255,255,255,.25); }
  .blog-meta .read-time { color:rgba(255,255,255,.5); }

  /* Featured card variant */
  .blog-card.featured { flex: 1; }
  .blog-card.featured .blog-cover { aspect-ratio: 16/11; }
  .blog-card.featured .blog-body { padding: 28px 28px 26px; }
  .blog-card.featured h3 {
    font-size: clamp(22px, 2.3vw, 30px);
    line-height: 1.18; letter-spacing:-.03em;
    margin-bottom: 14px;
  }
  .blog-card.featured p {
    font-size: 15px;
    color: rgba(255,255,255,.55);
    margin-bottom: 20px;
  }
  .blog-card.featured .blog-glyph { font-size: 44px; right:24px; bottom:22px; }
  .blog-card.featured .blog-cat { top:20px; left:20px; }

  /* Stacked small cards — horizontal layout */
  .blog-list .blog-card {
    flex-direction: row;
    min-height: 0;
  }
  .blog-list .blog-cover {
    aspect-ratio: auto;
    width: 38%;
    flex-shrink: 0;
    min-height: 150px;
  }
  .blog-list .blog-cover::before,
  .blog-list .blog-cover::after {
    border-radius: inherit;
  }
  .blog-list .blog-body { padding: 20px 22px 20px; }
  .blog-list h3 {
    font-size: 17px;
    margin-bottom: 8px;
  }
  .blog-list p {
    font-size: 13.5px;
    margin-bottom: 14px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .blog-list .blog-cat { font-size:9.5px; padding:4px 9px; top:12px; left:12px; }
  .blog-list .blog-glyph { font-size: 24px; right:14px; bottom:12px; }

  /* Mobile: horizontal carousel with scroll-snap */
  @media (max-width: 860px) {
    .blog-sec { padding: 80px 0 80px; }
    .blog-wrap { padding: 0 20px; }
    .blog-head { margin-bottom: 28px; gap: 18px; }
    .blog-head h2 { font-size: clamp(38px, 10vw, 54px); }
    .blog-head p { font-size: 14.5px; }
    .blog-all { padding: 10px 18px; font-size: 13px; }

    /* turn grid into horizontal flex carousel, breaking out of wrap padding */
    .blog-grid {
      display: flex;
      grid-template-columns: none;
      gap: 14px;
      overflow-x: auto;
      overflow-y: visible;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      scroll-padding-left: 20px;
      padding: 4px 20px 14px;
      margin: 0 -20px;
    }
    .blog-grid::-webkit-scrollbar { display: none; }
    .blog-list { display: contents; }

    /* all cards equal size + vertical layout */
    .blog-card,
    .blog-list .blog-card,
    .blog-card.featured {
      flex: 0 0 82%;
      max-width: 340px;
      flex-direction: column;
      scroll-snap-align: start;
    }
    .blog-list .blog-cover,
    .blog-card .blog-cover {
      width: 100%;
      aspect-ratio: 16/10;
      min-height: 0;
    }
    .blog-card .blog-body,
    .blog-list .blog-body { padding: 20px 20px 18px; }
    .blog-card h3,
    .blog-list h3 { font-size: 18px; }
    .blog-card p,
    .blog-list p,
    .blog-card.featured p {
      font-size: 13.5px;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
      margin-bottom: 14px;
    }
    .blog-card.featured h3 { font-size: 20px; }
    .blog-card.featured .blog-glyph { font-size: 28px; }
  }

  /* ============================================================
     FOOTER
  ============================================================ */
  .footer-wrap {
    border-top:1px solid var(--rule);
    padding:32px 24px;
    max-width:1200px; margin:0 auto;
    display:flex; justify-content:space-between; align-items:center;
    gap:16px; flex-wrap:wrap;
    font-size:12px; color:rgba(255,255,255,.22);
  }
  .footer-wrap .socials { display:flex; gap:20px; }
  .footer-wrap a { color:rgba(255,255,255,.22); transition:color .2s; }
  .footer-wrap a:hover { color:rgba(255,255,255,.55); }

  /* ============================================================
     REVEAL ON SCROLL
  ============================================================ */
  .reveal { opacity:0; transform:translateY(28px); transition:opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1); }
  .reveal.in { opacity:1; transform:none; }

  

  /* ============================================================
     SWEEP TEXT SECTION
  ============================================================ */
  .sweep-sec {
    height: 400vh;
    background: var(--bg);
    position: relative;
  }
  .sweep-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex; align-items:center; justify-content:center;
    padding: 0 24px;
  }
  .sweep-text {
    font-size: clamp(30px, 4.5vw, 60px);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.035em;
    text-align: center;
    max-width: 800px;
    overflow: hidden;
    background: linear-gradient(90deg, #080808, #fff, #080808);
    background-repeat: no-repeat;
    background-size: 80%;
    background-position: -500% 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: rgba(255,255,255,0);
  }

  /* ============================================================
     AGENTS / PRODUCTS SECTION
  ============================================================ */
  .agents-sec {
    position:relative;
    padding: 140px 24px 60px;
    background: var(--bg);
    overflow:hidden;
    isolation:isolate;
  }
  .agents-bg {
    position:absolute; inset:0; pointer-events:none; z-index:0;
    background:
      radial-gradient(ellipse 700px 450px at 50% 30%, rgba(214,169,137,.08), transparent 65%),
      radial-gradient(ellipse 500px 400px at 12% 80%, rgba(255,255,255,.04), transparent 70%);
  }
  .agents-wrap {
    max-width:1160px; margin:0 auto;
    position:relative; z-index:1;
  }
  .agents-head { text-align:center; margin-bottom:40px; }
  .agents-eyebrow {
    display:inline-flex; align-items:center; gap:8px;
    padding:6px 14px; border-radius:999px;
    background:var(--glass); border:1px solid var(--glass-border);
    font-size:11px; font-weight:500; color:var(--ink-soft);
    letter-spacing:.08em; text-transform:uppercase;
    margin-bottom:22px;
  }
  .agents-eyebrow .dot {
    width:6px; height:6px; border-radius:50%;
    background: var(--ai-grad); animation: rotate 10s linear infinite;
  }
  .agents-head h2 {
    font-size:clamp(42px,7vw,76px);
    font-weight:700; line-height:.94; letter-spacing:-.045em;
    color:#fff; margin-bottom:14px;
  }
  .agents-head h2 em {
    font-weight:300; font-style:italic;
    background:var(--ai-grad-linear);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent;
  }
  .agents-head p {
    font-size:16px; color:rgba(255,255,255,.42);
    max-width:440px; margin:0 auto; line-height:1.5;
  }

  .agents-tabs {
    display:flex; gap:8px; justify-content:center;
    flex-wrap:wrap; margin-bottom:14px;
  }
  /* hint banner */
  .agents-hint {
    display:flex; align-items:center; justify-content:center;
    gap:8px;
    font-size:12px; letter-spacing:.02em;
    color: rgba(255,255,255,.5);
    margin-bottom: 28px;
    transition: opacity .5s ease, transform .5s ease;
  }
  .agents-hint.gone { opacity:0; transform:translateY(-4px); pointer-events:none; }
  .agents-hint .hint-live {
    width:7px; height:7px; border-radius:50%;
    background:#D6A989;
    box-shadow: 0 0 0 0 rgba(214,169,137,.7);
    animation: liveDot 1.8s ease-out infinite;
  }
  .agents-hint .hint-text { color: rgba(255,255,255,.75); }
  .agents-hint .hint-sep  { color: rgba(255,255,255,.25); }
  .agents-hint .hint-cta  { color: rgba(255,255,255,.45); }
  @keyframes liveDot {
    0%   { box-shadow: 0 0 0 0 rgba(214,169,137,.55); }
    70%  { box-shadow: 0 0 0 8px rgba(214,169,137,0); }
    100% { box-shadow: 0 0 0 0 rgba(214,169,137,0); }
  }
  /* pulse ring around active pill */
  .agent-pill.active::before,
  .agent-pill.active::after {
    content:''; position:absolute; inset:-2px;
    border-radius: inherit;
    border: 1px solid rgba(214,169,137,.5);
    pointer-events:none;
    animation: pillPing 2.4s cubic-bezier(.2,.7,.2,1) infinite;
  }
  .agent-pill.active::after {
    animation-delay: 1.2s;
  }
  @keyframes pillPing {
    0%   { transform: scale(1); opacity: .75; }
    100% { transform: scale(1.22); opacity: 0; }
  }
  /* autoplay progress bar — sand line under active pill */
  .agent-pill .progress-bar { display:none; }
  .agent-pill.autoplay .progress-bar {
    display:block;
    position:absolute; left:14px; right:14px; bottom:-8px;
    height:2px; border-radius:2px;
    background: rgba(214,169,137,.15);
    overflow:hidden;
    pointer-events:none;
  }
  .agent-pill.autoplay .progress-bar::after {
    content:''; display:block;
    width:100%; height:100%;
    background: linear-gradient(90deg, #D6A989, #F4E0CF);
    border-radius:inherit;
    transform-origin: left center;
    animation: progressFill 3500ms linear forwards;
  }
  @keyframes progressFill {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
  }
  .agents-tab {
    position:relative;
    display:inline-flex; align-items:center; gap:8px;
    padding:10px 18px; border-radius:999px;
    background: rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.08);
    color: rgba(255,255,255,.6);
    font-size:13px; font-weight:500; letter-spacing:-.005em;
    cursor:pointer; transition: all .25s cubic-bezier(.2,.7,.2,1);
  }
  .agents-tab:hover {
    border-color: rgba(255,255,255,.2);
    color:#fff;
    background: rgba(255,255,255,.05);
  }
  .agents-tab.active {
    background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
    border-color: var(--tab-color, rgba(255,255,255,.22));
    color:#fff;
    box-shadow: 0 0 0 1px var(--tab-color-glow, rgba(255,255,255,.08)),
                0 8px 24px -12px var(--tab-color, rgba(255,255,255,.3));
  }
  /* category accent colors (used for active tab border/glow) */
  .agents-tab[data-cat="A"] { --tab-color: #B89ED9; --tab-color-glow: rgba(184,158,217,.3); }
  .agents-tab[data-cat="B"] { --tab-color: #E8A87C; --tab-color-glow: rgba(232,168,124,.3); }
  .agents-tab[data-cat="C"] { --tab-color: #A8D4A8; --tab-color-glow: rgba(168,212,168,.3); }
  .agents-tab[data-cat="D"] { --tab-color: #8FB8D4; --tab-color-glow: rgba(143,184,212,.3); }

  /* wireframe stage */
  .agents-stage {
    position:relative;
    width:100%;
    height: 720px;
    display:flex; align-items:center; justify-content:center;
  }
  /* 3D perspective tunnel — Three.js canvas, full-bleed */
  .agents-grid3d {
    position:absolute;
    top:-320px; bottom:-180px;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    pointer-events:none;
    overflow:hidden;
    filter: blur(1.2px);
    /* composite mask: hides center horizontally + fades ends vertically (longer top) */
    -webkit-mask-image:
      linear-gradient(90deg, #000 0%, #000 14%, transparent 24%, transparent 76%, #000 86%, #000 100%),
      linear-gradient(180deg, transparent 0%, #000 10%, #000 85%, transparent 100%);
    -webkit-mask-composite: source-in;
            mask-image:
      linear-gradient(90deg, #000 0%, #000 14%, transparent 24%, transparent 76%, #000 86%, #000 100%),
      linear-gradient(180deg, transparent 0%, #000 10%, #000 85%, transparent 100%);
    mask-composite: intersect;
  }
  /* mobile: replace tunnel with a static glow backdrop (no three.js) */
  @media (max-width: 860px), (pointer: coarse) {
    .agents-grid3d {
      top: 0; bottom: 0;
      filter: none;
      -webkit-mask-image: none;
              mask-image: none;
      background:
        radial-gradient(ellipse 70% 50% at 50% 30%, rgba(214,169,137,.12) 0%, transparent 65%),
        radial-gradient(ellipse 40% 30% at 18% 78%, rgba(184,158,217,.10) 0%, transparent 70%),
        radial-gradient(ellipse 40% 30% at 82% 82%, rgba(143,184,212,.08) 0%, transparent 70%),
        linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px) 0 0 / 40px 40px,
        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px) 0 0 / 40px 40px;
    }
    .agents-grid3d canvas { display:none; }
  }
  .agents-grid3d canvas { display:block; width:100%; height:100%; }
  .agents-grid3d .vignette { display:none; }

  .agents-arcs {
    position:absolute; inset:0;
    width:100%; height:100%;
    pointer-events:none;
  }
  .agents-arcs .wire {
    fill:none;
    stroke: rgba(255,255,255,.12);
    stroke-width:1;
    stroke-linecap:round;
  }
  .agents-arcs .wire.active {
    stroke: rgba(214,169,137,.55);
    stroke-width:1.2;
  }
  .agents-arcs .node {
    fill: rgba(255,255,255,.18);
    stroke: rgba(255,255,255,.35);
    stroke-width:.8;
  }
  .agents-arcs .node.active {
    fill: #D6A989;
    stroke: #fff;
  }
  .agents-arcs .pulse {
    fill: #D6A989;
    filter: drop-shadow(0 0 4px rgba(214,169,137,.8));
  }

  .agents-ring {
    position:absolute;
    top:50%; left:50%;
    width: 720px; height: 720px;
    transform:translate(-50%,-50%);
    pointer-events:none;
  }
  .agent-pill {
    position:absolute;
    top:50%; left:50%;
    transform: translate(-50%,-50%) translate(var(--x), var(--y));
    display:inline-flex; align-items:center; gap:10px;
    padding:8px 16px 8px 8px; border-radius:999px;
    background: rgba(14,14,14,.82);
    border:1px solid rgba(255,255,255,.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: rgba(255,255,255,.78);
    font-size:13px; font-weight:500; letter-spacing:-.005em;
    cursor:pointer; pointer-events:auto;
    white-space:nowrap;
    transition: background .25s, border-color .25s, color .25s, box-shadow .25s;
  }
  .agent-pill:hover {
    border-color: rgba(255,255,255,.28);
    color:#fff;
    background: rgba(22,22,22,.9);
  }
  .agent-pill.active {
    background: #fff;
    color: #000;
    border-color: transparent;
    box-shadow:
      0 8px 32px -8px rgba(214,169,137,.5),
      0 0 0 3px rgba(255,255,255,.06),
      0 0 0 5px rgba(214,169,137,.18);
  }
  .agent-pill .pill-orb {
    width:24px; height:24px; border-radius:50%;
    background: conic-gradient(from 220deg, var(--oc1,#fff) 0deg, var(--oc2,#D6A989) 180deg, var(--oc1,#fff) 360deg);
    animation: rotate 8s linear infinite;
    flex-shrink:0;
    position:relative;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
  }
  .agent-pill .pill-orb::after {
    content:''; position:absolute; inset:3px; border-radius:50%;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.55), transparent 55%);
  }
  .agent-pill .pill-idx {
    font-size:10px; font-weight:600; letter-spacing:.08em;
    color: rgba(255,255,255,.32);
    font-variant-numeric: tabular-nums;
    margin-right: 2px;
  }
  .agent-pill.active .pill-idx { color: rgba(0,0,0,.45); }

  /* center detail card */
  .agents-card {
    position:relative; z-index:2;
    width: 100%; max-width: 360px;
    padding: 26px 24px 22px;
    border-radius: 20px;
    background: linear-gradient(155deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.025) 60%, rgba(255,255,255,.05) 100%);
    border:1px solid rgba(255,255,255,.14);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    box-shadow: 0 30px 80px -20px rgba(0,0,0,.55);
    transition: opacity .35s ease;
  }
  .agents-card.switching { opacity: 0; }
  /* corner crop marks — schematic/wireframe feel */
  .agents-card .corner {
    position:absolute; width:14px; height:14px; pointer-events:none;
    border-color: rgba(214,169,137,.7);
    border-style:solid;
  }
  .agents-card .corner.tl { top:-1px; left:-1px; border-width:1.5px 0 0 1.5px; border-top-left-radius:6px; }
  .agents-card .corner.tr { top:-1px; right:-1px; border-width:1.5px 1.5px 0 0; border-top-right-radius:6px; }
  .agents-card .corner.bl { bottom:-1px; left:-1px; border-width:0 0 1.5px 1.5px; border-bottom-left-radius:6px; }
  .agents-card .corner.br { bottom:-1px; right:-1px; border-width:0 1.5px 1.5px 0; border-bottom-right-radius:6px; }
  .agents-card .card-code {
    position:absolute; top:10px; right:14px;
    font-size:9.5px; font-weight:600; letter-spacing:.14em;
    color: rgba(214,169,137,.55);
    font-variant-numeric: tabular-nums;
  }
  .card-head {
    display:flex; align-items:center; gap:14px;
    margin-bottom:18px;
  }
  .card-head .card-orb {
    width:44px; height:44px; border-radius:50%;
    background: conic-gradient(from 220deg, var(--oc1,#fff) 0deg, var(--oc2,#D6A989) 180deg, var(--oc1,#fff) 360deg);
    box-shadow: 0 0 0 2px var(--bg), 0 8px 24px -8px var(--oc2,#D6A989);
    animation: rotate 14s linear infinite;
    position:relative; flex-shrink:0;
  }
  .card-head .card-orb::after {
    content:''; position:absolute; inset:5px; border-radius:50%;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.55), transparent 50%);
  }
  .card-head h3 {
    font-size:20px; font-weight:600; color:#fff;
    letter-spacing:-.02em; line-height:1.2;
  }
  .card-label {
    display:block;
    font-size:10.5px; font-weight:500;
    letter-spacing:.12em; text-transform:uppercase;
    color: rgba(255,255,255,.38);
    margin-bottom:10px;
  }
  .card-features {
    list-style:none; padding:0; margin:0 0 22px;
    display:flex; flex-direction:column; gap:10px;
  }
  .card-features li {
    display:flex; align-items:center; gap:10px;
    font-size:14px; color: rgba(255,255,255,.82);
    letter-spacing:-.005em;
  }
  .card-features li .ico {
    width:18px; height:18px; flex-shrink:0;
    opacity:.7;
    display:inline-flex; align-items:center; justify-content:center;
    font-size:14px;
  }
  .card-collabs {
    display:flex; flex-wrap:wrap; gap:6px;
    margin-bottom:22px;
  }
  .card-collabs span {
    padding:5px 11px; border-radius:999px;
    background: rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);
    font-size:12px; color: rgba(255,255,255,.7);
  }
  .card-collabs .more {
    color: rgba(255,255,255,.4);
    background:transparent;
  }
  .card-cta {
    display:flex; align-items:center; justify-content:center; gap:8px;
    width:100%;
    padding: 13px 18px; border-radius: 14px;
    background: #0f0f0f;
    color: #fff;
    font-size: 13.5px; font-weight:500; letter-spacing:-.005em;
    border: 1px solid rgba(255,255,255,.08);
    cursor:pointer;
    transition: all .2s;
  }
  .card-cta:hover {
    background: #1a1a1a;
    border-color: rgba(255,255,255,.18);
  }
  .card-cta .spark {
    width:14px; height:14px; border-radius:50%;
    background: var(--ai-grad);
    animation: rotate 6s linear infinite;
  }

  @keyframes arcFlow {
    to { stroke-dashoffset: -44; }
  }
  @keyframes pillFloat {
    0%,100% { transform: translate(-50%,-50%) translate(var(--x), var(--y)); }
    50%     { transform: translate(-50%,-50%) translate(calc(var(--x) + 3px), calc(var(--y) - 4px)); }
  }

  /* Responsive: mobile = horizontal scroll pills + full-width card */
  @media (max-width: 860px) {
    /* === tighter section spacing === */
    .agents-sec { padding: 90px 0 70px; }
    .agents-wrap { padding: 0 20px; }
    .agents-head { margin-bottom: 30px; }
    .agents-head h2 { font-size: clamp(42px, 11vw, 60px); margin-bottom: 12px; }
    .agents-head p { font-size: 15px; max-width: 340px; }

    /* === tabs: horizontal scroll-snap row === */
    .agents-tabs {
      display: flex;
      gap: 8px;
      overflow-x: auto;
      overflow-y: visible;
      flex-wrap: nowrap;
      justify-content: flex-start;
      padding: 4px 20px 10px;
      margin: 0 -20px 22px;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
    }
    .agents-tabs::-webkit-scrollbar { display: none; }
    .agents-tab {
      flex-shrink: 0;
      padding: 11px 18px;
      font-size: 13.5px;
      scroll-snap-align: start;
    }

    /* === stage: no fixed height, content stacks === */
    .agents-stage {
      flex-direction: column;
      height: auto;
      min-height: 0;
      gap: 20px;
    }
    .agents-arcs { display: none; }
    .agents-ring { display: none !important; }

    /* === card: mobile hero styling (square-ish) === */
    .agents-card {
      max-width: 100%;
      width: 100%;
      padding: 22px 20px 20px;
      border-radius: 22px;
      touch-action: pan-y;
    }
    .agents-card.switching { opacity: .35; }
    .card-head {
      flex-direction: row;
      align-items: center;
      gap: 12px;
      margin-bottom: 16px;
    }
    .card-head .card-orb {
      width: 40px; height: 40px;
      box-shadow: 0 0 0 2px var(--bg), 0 8px 24px -10px var(--oc2,#D6A989);
    }
    .card-head .card-orb::after { inset: 5px; }
    .card-head h3 {
      font-size: 20px;
      letter-spacing: -.025em;
      line-height: 1.15;
    }
    .card-code {
      font-size: 9.5px;
      top: 10px; right: 14px;
    }
    .card-label { margin-bottom: 8px; font-size: 10px; }
    .card-features { gap: 9px; margin-bottom: 18px; }
    .card-features li { font-size: 14px; }
    .card-features li .ico { width: 16px; height: 16px; font-size: 13px; }
    .card-collabs { margin-bottom: 18px; gap: 5px; }
    .card-collabs span { font-size: 11.5px; padding: 4px 10px; }
    .card-cta {
      padding: 12px 18px;
      font-size: 13.5px;
      border-radius: 12px;
    }
    .agents-card .corner { width: 13px; height: 13px; }

    /* === pagination dots + swipe arrows === */
    .agents-nav {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 18px;
      margin-top: 4px;
    }
    .agents-nav .nav-btn {
      width: 44px; height: 44px;
      display: flex; align-items: center; justify-content: center;
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(255,255,255,.08);
      color: rgba(255,255,255,.7);
      border-radius: 50%;
      cursor: pointer;
      transition: all .2s;
      font-size: 18px;
      -webkit-tap-highlight-color: transparent;
    }
    .agents-nav .nav-btn:active { transform: scale(.92); background: rgba(255,255,255,.08); }
    .agents-dots {
      display: flex; gap: 7px;
      align-items: center;
      flex: 0 0 auto;
    }
    .agents-dot {
      width: 6px; height: 6px; border-radius: 50%;
      background: rgba(255,255,255,.18);
      border: none; padding: 0;
      transition: all .3s cubic-bezier(.2,.7,.2,1);
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }
    .agents-dot.active {
      width: 22px; border-radius: 3px;
      background: linear-gradient(90deg, var(--oc1,#fff), var(--oc2,#D6A989));
    }
  }
  @media (min-width: 861px) {
    .agents-nav { display: none; }
  }

  /* ============================================================
     CHAT ZOOM-IN ON SCROLL
  ============================================================ */
  .chat-zoom {
    opacity: 0;
    transform: scale(0.45) translateY(80px);
    transition:
      opacity 1.2s cubic-bezier(.16,1,.3,1),
      transform 1.5s cubic-bezier(.16,1,.3,1);
    will-change: transform, opacity;
  }
  .chat-zoom.in {
    opacity: 1;
    transform: scale(1) translateY(0);
  }

  /* ============================================================
     RESPONSIVE
  ============================================================ */
  @media(max-width:640px){
    .hero { padding:44px 20px 0; }
    .hero-scroll { margin-top:24px; margin-bottom:20px; }
    .hero h1 { font-size:clamp(42px,12vw,58px); }
    .hero h1 .line2 { white-space:nowrap; }
    .hero-orb-bg { width:350px; height:350px; }
    .hero-ctas { gap:10px; }
    .btn-primary { padding:12px 22px; font-size:14px; }
    .btn-ghost { padding:12px 22px; font-size:14px; }
    .hero-scroll { margin-top:32px; }
    .nav-cta { font-size:10px; padding:5px 10px; }
    .nav-inner { height:44px; padding:0 16px; }
    .logo { font-size:13px; }
    .logo-orb { width:16px; height:16px; }
    .nav-cta .dot { width:5px; height:5px; }
    .marquee-item { font-size:10px; padding:0 18px; }
    .sweep-sec { height:140vh; }
    .sweep-text { font-size:clamp(18px,5vw,28px); white-space:nowrap; word-spacing:.15em; font-weight:400; font-style:normal; }
    .chat-section { padding:60px 16px 100px; }
    .chat-surface { padding:16px 14px 12px; border-radius:24px; }
    .chat-eyebrow {
      font-size: 9.5px;
      letter-spacing: .05em;
      padding: 5px 12px;
      gap: 7px;
      margin-bottom: 18px;
      white-space: nowrap;
    }
    .chat-eyebrow .e-orb { width: 12px; height: 12px; }
    .chat-header { margin-bottom: 36px; }
    .msg { font-size:14.5px; padding:11px 14px; }
    .opt { padding:11px 14px; font-size:13.5px; }
    .voice-orb { width:190px; height:190px; }

    /* ===== MOBILE PERF: kill all animated chat-section background layers =====
       On desktop they add depth; on mobile they chew battery, jank scroll,
       and cause visual tearing on the composited layer. Swap the whole
       background for a simple static radial glow that matches the vibe. */
    .chat-section {
      background: var(--bg);
    }
    .chat-section::before {
      content: ''; position: absolute; inset: 0;
      pointer-events: none; z-index: 0;
      background:
        radial-gradient(ellipse 90% 50% at 50% 35%, rgba(214,169,137,.10) 0%, transparent 65%),
        radial-gradient(ellipse 60% 40% at 15% 85%, rgba(184,158,217,.08) 0%, transparent 70%),
        radial-gradient(ellipse 60% 40% at 85% 90%, rgba(143,184,212,.07) 0%, transparent 70%);
    }
    .chat-glow,
    .chat-aurora,
    .chat-mesh,
    .chat-grid,
    .chat-noise,
    .chat-clouds,
    .chat-stars { display: none !important; }

    .chat-surface {
      backdrop-filter: blur(12px) saturate(140%);
      -webkit-backdrop-filter: blur(12px) saturate(140%);
    }
    .social-strip-inner { flex-direction:column; align-items:flex-start; }
    .social-strip-btn { width:100%; justify-content:center; }
    .footer-wrap {
      flex-direction:column;
      justify-content:center;
      align-items:center;
      text-align:center;
      gap:14px;
    }
    .footer-wrap .socials { justify-content:center; width:100%; }
  }