*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#f5f7fb;
  --white:#ffffff;
  --ink:#0a0e17;
  --mid:#4a5568;
  --muted:#8a9ab5;
  --blue:#2563eb;
  --blue-light:#dbeafe;
  --border:#e2e8f0;
  --card:#1a1f2e;
  --card2:#242b3d;
  --radius:14px;
  --font-sans:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-sans);
  font-weight:400;
  background:var(--bg);
  color:var(--ink);
  min-height:100vh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* NAV */
nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 5vw;
  background:rgba(245,247,251,.85);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:100;
  transition:top .32s ease,padding .32s ease,width .32s ease,border-radius .32s ease,box-shadow .32s ease,border-color .32s ease;
}
nav.is-capsule{
  top:14px;
  width:min(calc(100% - 32px),1120px);
  margin:0 auto;
  padding:12px 22px;
  border:1px solid rgba(226,232,240,.92);
  border-radius:999px;
  box-shadow:0 12px 32px rgba(15,23,42,.10);
}
.logo{
  display:flex;align-items:center;gap:10px;
  font-size:1.25rem;font-weight:700;
  color:var(--ink);text-decoration:none;letter-spacing:-.02em;
}
.logo-icon{
  width:32px;height:32px;
  background:transparent;
  display:flex;align-items:center;justify-content:center;
}
.squid-logo{
  object-fit:contain;
  display:block;
}
.squid-logo--nav{
  width:32px;
  height:32px;
  filter:brightness(0);
}
.squid-logo--card{
  width:28px;
  height:28px;
  filter:invert(1) brightness(1.15);
}
.hamburger{
  display:flex;flex-direction:column;gap:5px;cursor:pointer;
  background:none;border:none;padding:4px;
}
.hamburger span{
  display:block;width:22px;height:2px;
  background:var(--ink);border-radius:2px;
}
.nav-links{
  display:flex;gap:32px;list-style:none;
}
.nav-links a{
  color:var(--mid);font-size:.875rem;font-weight:400;
  text-decoration:none;transition:color .15s;
}
.nav-links a:hover{color:var(--ink)}
.nav-right{display:flex;gap:10px;align-items:center}
.btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 20px;border-radius:100px;
  font-family:var(--font-sans);
  font-size:.875rem;font-weight:500;
  cursor:pointer;text-decoration:none;
  transition:all .15s;border:none;
}
.btn-black{background:var(--ink);color:#fff;}
.btn-black:hover{background:#1a2035}
.btn-outline{background:transparent;color:var(--mid);border:1px solid var(--border)}
.btn-outline:hover{border-color:#aaa;color:var(--ink)}

/* HERO */
.top-masthead{
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
.top-masthead::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  pointer-events:none;
  background:url("assets/hero-classical-frame.png") center center/cover no-repeat;
  opacity:.6;
  -webkit-mask-image:radial-gradient(ellipse 54% 76% at 50% 42%,transparent 18%,rgba(0,0,0,.16) 38%,rgba(0,0,0,.68) 75%);
  mask-image:radial-gradient(ellipse 54% 76% at 50% 42%,transparent 18%,rgba(0,0,0,.16) 38%,rgba(0,0,0,.68) 75%);
}
.hero{
  padding:80px 5vw 60px;
  max-width:760px;
  margin:0 auto;
  text-align:center;
}
.hero h1{
  font-size:clamp(2.4rem,6vw,3.6rem);
  font-weight:900;
  line-height:1.08;
  letter-spacing:-.04em;
  color:var(--ink);
  margin-bottom:20px;
}
.hero h1 .accent{color:var(--blue)}
.hero-glitch{position:relative;isolation:isolate}
.hero-glitch::before,.hero-glitch::after{
  content:attr(data-text);
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  color:var(--blue);
}
.hero-glitch::before{animation:headlineGlitchA 4.8s steps(1,end) infinite}
.hero-glitch::after{animation:headlineGlitchB 4.8s steps(1,end) infinite}
@keyframes headlineGlitchA{
  0%,88%,100%{opacity:0;transform:translate(0);clip-path:inset(0)}
  89%{opacity:.62;transform:translate(-3px,1px);clip-path:inset(12% 0 70% 0)}
  90%{opacity:.38;transform:translate(3px,-1px);clip-path:inset(61% 0 20% 0)}
  91%{opacity:.56;transform:translate(-1px,0);clip-path:inset(36% 0 44% 0)}
  92%{opacity:0;transform:translate(0);clip-path:inset(0)}
}
@keyframes headlineGlitchB{
  0%,88.5%,100%{opacity:0;transform:translate(0);clip-path:inset(0)}
  89.5%{opacity:.45;transform:translate(4px,0);clip-path:inset(76% 0 6% 0)}
  90.5%{opacity:.6;transform:translate(-2px,1px);clip-path:inset(24% 0 54% 0)}
  91.5%{opacity:0;transform:translate(0);clip-path:inset(0)}
}
.hero p{
  font-family:var(--font-sans);
  font-size:1.05rem;
  color:var(--mid);
  line-height:1.7;
  max-width:480px;
  margin-left:auto;
  margin-right:auto;
  margin-bottom:36px;
  font-weight:400;
  letter-spacing:-.01em;
}
.hero p strong{color:var(--ink);font-weight:600;font-style:italic}

/* CARD MOCKUP */
.card-section{
  padding:18px 5vw 96px;
}
.card-showcase{
  width:min(100%,1100px);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(230px,300px) 1fr;
  gap:34px 28px;
  align-items:center;
  justify-content:center;
}
.card-demo{
  display:grid;
  grid-template-columns:minmax(280px,400px) minmax(200px,1fr);
  gap:22px 28px;
  align-items:center;
}
.card-action{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:flex-start;
}
.card-action h2{
  font-size:clamp(1.8rem,3.6vw,2.7rem);
  line-height:1.05;
  letter-spacing:-.05em;
  font-weight:900;
  margin-bottom:18px;
}
.card-action p{
  font-family:var(--font-sans);
  color:var(--mid);
  font-size:.95rem;
  line-height:1.7;
  font-weight:400;
  letter-spacing:-.01em;
  margin-bottom:26px;
}
.card-stack{
  position:relative;
  perspective:1200px;
}
.card-stack::before{
  content:'';
  position:absolute;
  inset:32px 20px auto;
  height:210px;
  border-radius:28px;
  background:rgba(37,99,235,.12);
  filter:blur(42px);
  pointer-events:none;
  transition:transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}
.agent-card{
  min-height:270px;
  background:
    radial-gradient(circle at 18% 12%,rgba(255,255,255,.12),transparent 24%),
    radial-gradient(circle at 88% 24%,rgba(37,99,235,.18),transparent 28%),
    linear-gradient(135deg,#171c2a,#272d3e 52%,#141925);
  border:1px solid rgba(255,255,255,.16);
  border-radius:30px;
  padding:30px 32px;
  position:relative;
  overflow:hidden;
  box-shadow:
    0 34px 80px rgba(15,23,42,.24),
    inset 0 1px 0 rgba(255,255,255,.12);
  transform-style:preserve-3d;
  transition:transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.5s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  cursor:pointer;
}
.agent-card.is-pressed{
  box-shadow:
    0 0 60px rgba(37, 99, 235, 0.75),
    0 34px 80px rgba(15, 23, 42, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  border-color: rgba(96, 165, 250, 0.85);
  transition:transform 0.12s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.12s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.12s ease;
}
.agent-card::before{
  content:'';
  position:absolute;inset:0;
  background:
    linear-gradient(110deg,rgba(255,255,255,.12),transparent 32%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 1px,transparent 1px 4px);
  pointer-events:none;
}
.agent-card::after{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(circle at var(--mouse-x,50%) var(--mouse-y,120%),rgba(255,255,255,.14),transparent 45%);
  pointer-events:none;
  transition:background 0.2s ease;
}
.agent-card > *{
  position:relative;
  z-index:1;
  transform-style:preserve-3d;
}
.card-top{
  display:flex;justify-content:space-between;align-items:flex-start;
  margin-bottom:64px;
  transform:translateZ(30px);
}
.card-logo{
  width:32px;height:32px;border-radius:8px;
  background:rgba(255,255,255,.1);
  display:grid;place-items:center;
  font-size:1rem;
}
.card-addr{
  text-align:right;
  font-family:'Courier New',monospace;
  font-size:.78rem;
  color:rgba(255,255,255,.54);
  line-height:1.55;
  font-weight:700;
}
.card-chip{
  position:absolute;
  top:124px;
  right:32px;
  z-index:2;
  width:56px;height:42px;
  background:linear-gradient(135deg,rgba(255,255,255,.32),rgba(255,255,255,.08));
  border-radius:9px;
  border:1px solid rgba(255,255,255,.28);
  display:grid;grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;
  gap:3px;
  padding:6px;
  margin:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24);
  transform:translateZ(45px);
  transition:transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}
.card-chip span{
  background:rgba(255,255,255,.42);
  border-radius:3px;
}
.card-bottom{
  display:flex;flex-direction:column;gap:4px;
  transform:translateZ(35px);
  transition:transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}
.card-balance{
  font-size:2.25rem;font-weight:800;
  color:#fff;letter-spacing:-.04em;
  font-family:'Courier New',monospace;
  text-shadow:0 1px 12px rgba(255,255,255,.12);
}
.card-balance.is-updating{animation:balanceUpdate .32s ease}
.card-name{
  font-size:.82rem;letter-spacing:.16em;
  color:rgba(255,255,255,.48);text-transform:uppercase;
  font-family:'Courier New',monospace;
  font-weight:700;
}
.card-caption{
  position:relative;
  margin-top:18px;
  padding:0 4px;
  font-size:.78rem;
  color:#7c8798;
  line-height:1.65;
  max-width:440px;
  font-weight:600;
}
.card-cta{
  border-radius:100px;
  padding:13px 26px;
  font-size:.95rem;
  white-space:nowrap;
}
.discussion-panel{
  background:transparent;
  min-height:0;
  display:flex;
  align-items:center;
  justify-self:start;
}
.discussion-body{
  width:100%;
  max-width:300px;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:11px;
}
.discussion-body .use-case-prompt{
  align-self:flex-end;
  max-width:100%;
  margin-bottom:0;
  font-size:.82rem;
  padding:14px 18px;
  border-radius:26px;
}
.discussion-reply{
  max-width:100%;
  margin:0;
  color:var(--ink);
  font-size:.82rem;
  line-height:1.5;
  font-weight:400;
  letter-spacing:-.02em;
}
.discussion-body.is-swapping .discussion-prompt,
.discussion-body.is-swapping .discussion-reply,
.discussion-body.is-swapping .spent-row{
  opacity:0;
  transform:translateY(10px);
}
.spent-row{
  display:flex;
  align-items:center;
  gap:7px;
  font-size:.82rem;
  font-weight:600;
  letter-spacing:-.01em;
  color:var(--ink);
}
.spent-icon{
  width:10px;
  height:10px;
  flex:0 0 10px;
  opacity:.36;
}
.reveal-message{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .42s ease,transform .42s ease;
}
.discussion-panel.is-visible .reveal-message{
  opacity:1;
  transform:translateY(0);
}
.discussion-panel.is-visible .reveal-message:nth-child(1){transition-delay:.05s}
.discussion-panel.is-visible .reveal-message:nth-child(2){transition-delay:.28s}
.discussion-panel.is-visible .reveal-message:nth-child(3){transition-delay:.52s}

/* SECTION shared */
.section{padding:60px 5vw}
.section-label{
  font-size:.78rem;color:var(--muted);
  margin-bottom:14px;font-weight:500;
}
.section h2{
  font-size:clamp(1.6rem,3.5vw,2.2rem);
  font-weight:800;letter-spacing:-.03em;
  line-height:1.15;margin-bottom:12px;
}
.section p{
  font-size:.95rem;color:var(--mid);
  line-height:1.7;max-width:480px;
  margin-bottom:28px;
}

/* WAITLIST */
.waitlist-section{
  padding:72px 5vw;
  border-top:1px solid var(--border);
  background:
    radial-gradient(circle at 78% 18%,rgba(37,99,235,.14),transparent 28%),
    radial-gradient(circle at 18% 82%,rgba(37,99,235,.08),transparent 24%),
    linear-gradient(180deg,#f8fbff,#eef4ff 58%,#f7faff);
}
.waitlist-shell{
  width:min(100%,1180px);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(280px,430px) minmax(420px,560px);
  gap:56px;
  align-items:center;
}
.waitlist-copy .section-label{color:#6c7a92}
.waitlist-copy h2{
  font-size:clamp(2.2rem,5vw,3.6rem);
  line-height:1;
  letter-spacing:-.06em;
  font-weight:900;
  margin-bottom:22px;
}
.waitlist-copy h2 span{color:var(--blue)}
.waitlist-copy p{
  max-width:420px;
  color:var(--mid);
  font-size:1rem;
  line-height:1.75;
  margin-bottom:0;
}
.waitlist-card{
  position:relative;
  background:rgba(255,255,255,.9);
  border:1px solid rgba(37,99,235,.16);
  border-radius:22px;
  padding:40px;
  box-shadow:
    0 0 44px rgba(37,99,235,.1),
    0 28px 80px rgba(15,23,42,.09);
  backdrop-filter:blur(10px);
}
.waitlist-card::before{
  content:'';
  position:absolute;
  inset:-1px;
  border-radius:22px;
  pointer-events:none;
  background:linear-gradient(135deg,rgba(37,99,235,.22),transparent 38%,rgba(37,99,235,.1));
  opacity:.55;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  padding:1px;
}
.waitlist-card h3{
  font-size:1.45rem;
  letter-spacing:-.03em;
  margin-bottom:10px;
}
.waitlist-card > p{
  font-family:var(--font-sans);
  color:var(--mid);
  font-size:.9rem;
  line-height:1.65;
  font-weight:400;
  letter-spacing:-.01em;
  margin-bottom:22px;
}
.waitlist-form{
  display:flex;
  flex-direction:column;
  gap:11px;
}
.waitlist-form input,
.waitlist-form select{
  width:100%;
  padding:13px 14px;
  border:1.5px solid var(--border);
  border-radius:12px;
  font-family:var(--font-sans);
  font-size:.9rem;
  font-weight:400;
  color:var(--ink);
  background:#f8fafc;
  outline:none;
  transition:border-color .15s,background .15s;
}
.waitlist-form input:focus,
.waitlist-form select:focus{
  border-color:var(--blue);
  background:#fff;
}
.waitlist-form button{
  width:100%;
  margin-top:4px;
}
.waitlist-note{
  margin-top:14px;
  font-size:.75rem;
  line-height:1.5;
  color:var(--muted);
  text-align:center;
}
.waitlist-error{
  display:none;
  margin-top:12px;
  padding:11px 12px;
  border-radius:8px;
  background:#fff1f2;
  border:1px solid #fecdd3;
  color:#be123c;
  font-size:.82rem;
  line-height:1.45;
  text-align:center;
}
.waitlist-error.is-visible{display:block}
.waitlist-error a{color:inherit;font-weight:700}
.waitlist-success{
  display:none;
  text-align:center;
  padding:16px 0 6px;
}
.waitlist-success.is-visible{display:block}
.waitlist-success .check{
  width:58px;
  height:58px;
  margin:0 auto 18px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--ink);
  color:#fff;
  font-size:1.4rem;
  font-weight:800;
}
.waitlist-success h4{
  font-size:1.25rem;
  letter-spacing:-.03em;
  margin-bottom:8px;
}
.waitlist-success p{
  margin-bottom:10px;
  color:var(--mid);
  line-height:1.6;
}
.waitlist-position{
  font-weight:700;
  color:var(--ink);
}

/* INTEGRATIONS */
.integrations{
  padding:58px 5vw;
  border-top:1px solid var(--border);
  background:#fff;
}
.int-row{
  width:min(100%,1780px);
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1px 1fr 1px 1fr;
  gap:0;
  align-items:center;
}
.int-group{
  display:flex;
  flex-direction:column;
  gap:22px;
  min-height:160px;
  justify-content:center;
  padding:0 38px;
}
.int-label{
  font-size:.95rem;
  color:#6f7888;
  font-weight:500;
  letter-spacing:-.01em;
}
.int-badges{
  display:flex;
  align-items:center;
  gap:20px;
  flex-wrap:nowrap;
}
.int-tag{
  display:inline-flex;align-items:center;gap:6px;
  padding:0;
  background:transparent;
  border:0;
  border-radius:0;
  font-size:.82rem;
  font-weight:500;
  color:#747d8c;
  white-space:nowrap;
}
.int-tag-logo{width:1em;height:1em;display:block}
.int-sep{
  width:1px;
  height:160px;
  background:var(--border);
}

/* USE CASES */
.use-cases{
  padding:80px 5vw;
  border-top:1px solid var(--border);
  background:#fff;
}
.use-cases-inner{
  width:min(100%,1320px);
  margin:0 auto;
}
.use-cases h2{
  font-size:clamp(2.3rem,5vw,3.5rem);
  font-weight:900;
  letter-spacing:-.06em;
  line-height:1;
  margin-bottom:34px;
}
.use-case-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:28px;
}
.use-case{
  background:var(--white);
  border:1px solid #dfe5ee;
  border-radius:14px;
  padding:30px 32px;
  min-height:255px;
  display:flex;
  flex-direction:column;
  box-shadow:0 1px 0 rgba(15,23,42,.02);
  transition:
    opacity .55s cubic-bezier(.22,1,.36,1),
    transform .55s cubic-bezier(.22,1,.36,1),
    box-shadow .35s ease,
    border-color .35s ease;
}
.use-cases h2.scroll-reveal,
.use-case.scroll-reveal{
  opacity:0;
  will-change:opacity,transform;
}
.use-cases h2.scroll-reveal{
  transform:translateY(28px);
}
.use-case.scroll-reveal:nth-child(1){transform:translate(28px,36px)}
.use-case.scroll-reveal:nth-child(2){transform:translateY(44px)}
.use-case.scroll-reveal:nth-child(3){transform:translate(-28px,36px)}
.use-cases h2.scroll-reveal.is-visible,
.use-case.scroll-reveal.is-visible{
  opacity:1;
  transform:translate(0,0);
}
.use-case.scroll-reveal.is-visible:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 48px rgba(15,23,42,.1);
  border-color:#c7d2e4;
}
.use-case.scroll-reveal:nth-child(1).is-visible{transition-delay:.05s}
.use-case.scroll-reveal:nth-child(2).is-visible{transition-delay:.15s}
.use-case.scroll-reveal:nth-child(3).is-visible{transition-delay:.25s}
.use-cases h2.scroll-reveal.is-visible{transition-delay:.02s}
@media(prefers-reduced-motion:reduce){
  .hero-glitch::before,.hero-glitch::after{animation:none}
  .use-cases h2.scroll-reveal,
  .use-case.scroll-reveal{opacity:1;transform:none;transition:none}
}
.use-case-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:26px;
}
.use-case-label{
  color:#687080;
  font-size:.72rem;
  font-weight:650;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.use-case-method{
  padding:7px 13px;
  border-radius:100px;
  background:#f1f1f1;
  color:#687080;
  font-family:'Courier New',monospace;
  font-size:.66rem;
  font-weight:600;
  white-space:nowrap;
}
.use-case-prompt{
  align-self:flex-end;
  max-width:100%;
  padding:16px 20px;
  border-radius:28px;
  background:#ededed;
  color:var(--ink);
  font-size:.86rem;
  line-height:1.5;
  font-weight:400;
  letter-spacing:-.02em;
  margin-bottom:20px;
}
.use-case p{
  max-width:100%;
  color:var(--ink);
  font-size:.86rem;
  line-height:1.5;
  font-weight:400;
}
.market-use-case .use-case-label,
.market-use-case .use-case-method,
.market-use-case .use-case-prompt,
.market-use-case p{
  transition:opacity .18s ease,transform .18s ease;
}
.market-use-case.is-changing .use-case-label,
.market-use-case.is-changing .use-case-method,
.market-use-case.is-changing .use-case-prompt,
.market-use-case.is-changing p{
  opacity:0;
  transform:translateY(6px);
}
@media(prefers-reduced-motion:reduce){
  .market-use-case .use-case-label,
  .market-use-case .use-case-method,
  .market-use-case .use-case-prompt,
  .market-use-case p{transition:none}
}

/* PRODUCT EXPLAINER */
.product-explainer{
  padding:80px 5vw;
  border-top:1px solid var(--border);
  background:linear-gradient(135deg,#f8fbff 0%,#fff 50%,#eef5ff 100%);
}
.product-explainer-inner{
  width:min(100%,1320px);
  margin:0 auto;
}
.explainer-intro{
  margin-bottom:34px;
}
.explainer-kicker{
  color:var(--blue);
  font-size:.76rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-bottom:12px;
}
.explainer-intro h2{
  font-size:clamp(2.15rem,4.5vw,3.25rem);
  font-weight:900;
  letter-spacing:-.055em;
  line-height:1.02;
}
.explain-steps{
  position:relative;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
.explain-track{
  position:absolute;
  top:44px;
  left:calc(16.66% - 8px);
  right:calc(16.66% - 8px);
  height:2px;
  background:#dbe4f0;
  border-radius:2px;
  overflow:hidden;
  pointer-events:none;
}
.explain-track span{
  display:block;
  height:100%;
  width:0;
  background:linear-gradient(90deg,var(--blue),#60a5fa);
  transition:width .6s cubic-bezier(.22,1,.36,1);
}
.explain-step{
  position:relative;
  min-width:0;
  display:flex;
  flex-direction:column;
  min-height:300px;
  padding:26px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:#fff;
  cursor:pointer;
  outline:none;
  opacity:0;
  transform:translateY(34px);
  transition:
    opacity .6s cubic-bezier(.22,1,.36,1),
    transform .6s cubic-bezier(.22,1,.36,1),
    box-shadow .35s ease,
    border-color .35s ease,
    background .35s ease;
}
.explain-steps.is-visible .explain-step{opacity:1;transform:none}
.explain-steps.is-visible .explain-step:nth-child(3){transition-delay:.08s,.08s,0s,0s,0s}
.explain-steps.is-visible .explain-step:nth-child(4){transition-delay:.18s,.18s,0s,0s,0s}
.explain-step.is-active{
  border-color:rgba(37,99,235,.45);
  background:#fff;
  box-shadow:0 22px 50px rgba(37,99,235,.12),0 0 0 4px rgba(37,99,235,.06);
}
.explain-steps.is-visible .explain-step.is-active{transform:translateY(-6px)}
.explain-step:focus-visible{box-shadow:0 0 0 3px rgba(37,99,235,.45)}
.step-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:22px;
}
.step-number{
  position:relative;
  z-index:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:50%;
  background:var(--blue-light);
  color:var(--blue);
  font-size:.8rem;
  font-weight:800;
  transition:background .35s ease,color .35s ease,box-shadow .35s ease;
}
.explain-step.is-active .step-number{
  background:var(--blue);
  color:#fff;
  box-shadow:0 0 0 6px rgba(37,99,235,.14);
}
.step-tag{
  color:var(--muted);
  font-family:'Courier New',monospace;
  font-size:.68rem;
  font-weight:700;
}
.explain-step h3{
  margin-bottom:10px;
  font-size:1.14rem;
  letter-spacing:-.025em;
}
.explain-step p{
  color:var(--mid);
  font-size:.92rem;
  line-height:1.65;
}
/* Mini visual per step */
.step-visual{
  margin-top:auto;
  padding-top:20px;
}
.step-visual-box{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
  min-height:64px;
  padding:12px;
  border-radius:12px;
  background:#f6f8fc;
  border:1px dashed #d6dfeb;
  transition:background .35s ease,border-color .35s ease;
}
.explain-step.is-active .step-visual-box{background:#eff5ff;border-color:#bfd3fb;border-style:solid}
.chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  background:#fff;
  border:1px solid var(--border);
  color:var(--ink);
  font-size:.72rem;
  font-weight:600;
  opacity:.55;
  transform:scale(.96);
  transition:opacity .35s ease,transform .35s ease,border-color .35s ease;
}
.explain-step.is-active .chip{opacity:1;transform:none;border-color:#c7d7f5}
.explain-step.is-active .chip:nth-child(2){transition-delay:.08s}
.explain-step.is-active .chip:nth-child(3){transition-delay:.16s}
.chip b{color:var(--blue);font-weight:800}
.code-line{
  width:100%;
  font-family:'Courier New',monospace;
  font-size:.74rem;
  color:#334155;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.code-line .k{color:var(--blue);font-weight:700}
.code-line .caret{
  display:inline-block;
  width:7px;
  height:13px;
  margin-left:2px;
  vertical-align:-2px;
  background:var(--blue);
  opacity:0;
}
.explain-step.is-active .code-line .caret{animation:caretBlink 1s steps(1) infinite}
@keyframes caretBlink{50%{opacity:1}}
.verify-row{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  font-size:.74rem;
  font-weight:600;
  color:var(--mid);
}
.verify-dot{
  display:grid;
  place-items:center;
  width:18px;
  height:18px;
  border-radius:50%;
  background:#e2e8f0;
  color:#fff;
  transition:background .3s ease;
}
.verify-dot svg{width:11px;height:11px}
.explain-step.is-active .verify-row:nth-child(1) .verify-dot{background:#16a34a;transition-delay:.1s}
.explain-step.is-active .verify-row:nth-child(2) .verify-dot{background:#16a34a;transition-delay:.45s}
.explain-step.is-active .verify-row:nth-child(3) .verify-dot{background:#16a34a;transition-delay:.8s}
.step-progress{
  position:absolute;
  left:26px;
  right:26px;
  bottom:0;
  height:3px;
  border-radius:3px 3px 0 0;
  background:transparent;
  overflow:hidden;
}
.step-progress::after{
  content:"";
  display:block;
  height:100%;
  width:0;
  background:var(--blue);
}
.explain-step.is-active .step-progress::after{animation:stepProgress var(--step-ms,4200ms) linear forwards}
.explain-steps.is-paused .explain-step.is-active .step-progress::after{animation-play-state:paused}
@keyframes stepProgress{to{width:100%}}
@media(prefers-reduced-motion:reduce){
  .explain-step,.explain-steps.is-visible .explain-step.is-active{opacity:1;transform:none;transition:none}
  .explain-step.is-active .step-progress::after,.explain-step.is-active .code-line .caret{animation:none}
  .chip{opacity:1;transform:none}
}
/* CTA */
.cta-section{
  padding:80px 5vw;
  text-align:left;
}
.cta-section h2{
  font-size:clamp(1.8rem,4vw,2.4rem);
  font-weight:900;letter-spacing:-.04em;
  line-height:1.1;margin-bottom:16px;
}
.cta-section p{
  font-size:.95rem;color:var(--mid);
  line-height:1.7;max-width:420px;margin-bottom:32px;
}

/* FOOTER */
footer{
  border-top:1px solid var(--border);
  padding:32px 5vw;
  display:flex;align-items:center;
  justify-content:space-between;flex-wrap:wrap;gap:16px;
}
.footer-links{
  display:flex;gap:24px;list-style:none;flex-wrap:wrap;align-items:center;
}
.footer-links a{
  font-size:.8rem;color:var(--muted);text-decoration:none;transition:color .15s;
}
.footer-links a:hover{color:var(--ink)}
.footer-meta{
  display:flex;flex-direction:column;align-items:flex-end;gap:8px;
}
.footer-copy{font-size:.78rem;color:var(--muted)}
.footer-socials{display:flex;align-items:center;gap:6px}
.footer-social{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:8px;
  color:var(--muted);transition:color .15s,background .15s;
}
.footer-social:hover{color:var(--ink);background:rgba(15,23,42,.05)}
.footer-social svg{width:18px;height:18px;display:block}
.footer-disclaimer{
  width:100%;
  font-size:.72rem;
  line-height:1.55;
  color:var(--muted);
}

/* ANIMATIONS */
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes balanceUpdate{50%{opacity:.35;transform:translateY(-4px)}100%{opacity:1;transform:translateY(0)}}
.hero>*{animation:fadeUp .5s ease both}
.hero h1{animation-delay:.05s}
.hero p{animation-delay:.12s}
.hero .btn{animation-delay:.2s}

/* card number flip */
@keyframes flipIn{
  0%  {opacity:0;transform:translateY(-8px)}
  100%{opacity:1;transform:translateY(0)}
}
@keyframes flipOut{
  0%  {opacity:1;transform:translateY(0)}
  100%{opacity:0;transform:translateY(8px)}
}
.card-balance{transition:none}
.balance-changing{animation:flipOut .18s ease forwards}
.balance-entering{animation:flipIn .22s ease forwards}

/* green flash on balance increase */
@keyframes greenFlash{
  0%  {color:#4ade80}
  100%{color:#fff}
}
.balance-up{animation:greenFlash .7s ease forwards}

/* card addr scramble — handled in JS, just smooth opacity */
.card-addr{transition:opacity .15s}

/* chip pulse on transaction */
@keyframes chipPulse{
  0%,100%{border-color:rgba(255,255,255,.15)}
  50%     {border-color:rgba(37,99,235,.6);box-shadow:0 0 10px rgba(37,99,235,.3)}
}
.card-chip.active{animation:chipPulse .5s ease}

@media(max-width:600px){
  .top-masthead::before{
    background-size:auto 100%;
    opacity:.38;
    -webkit-mask-image:radial-gradient(ellipse 58% 68% at 50% 40%,transparent 15%,rgba(0,0,0,.13) 42%,rgba(0,0,0,.58) 85%);
    mask-image:radial-gradient(ellipse 58% 68% at 50% 40%,transparent 15%,rgba(0,0,0,.13) 42%,rgba(0,0,0,.58) 85%);
  }
  .use-case-grid{grid-template-columns:1fr}
  .use-case{min-height:auto}
  .use-case-prompt,.use-case p{max-width:100%}
  .use-case-top{align-items:flex-start;flex-direction:column;gap:10px}
  html,
  body{
    width:100%;
    max-width:100%;
  }
  body{
    background:#f7f9fd;
  }
  nav{
    padding:14px 18px;
  }
  .logo{
    font-size:1.1rem;
  }
  .squid-logo--nav{
    width:29px;
    height:29px;
  }
  .nav-links{display:none}
  .nav-right .btn-outline{display:none}
  .nav-right .btn-black{
    padding:8px 15px;
    font-size:0;
  }
  .nav-right .btn-black::after{
    content:'Join';
    font-size:.8rem;
  }
  .hero{
    padding:48px 22px 28px;
    max-width:430px;
  }
  .hero h1{
    font-size:clamp(2.25rem,11vw,2.85rem);
    line-height:1.02;
    letter-spacing:-.045em;
    margin-bottom:18px;
    overflow-wrap:break-word;
  }
  .hero p{
    font-size:1rem;
    line-height:1.55;
    margin-bottom:0;
  }
  .card-section{
    padding:12px 18px 58px;
  }
  .card-showcase{
    grid-template-columns:1fr;
    gap:28px;
    min-width:0;
  }
  .card-action{
    align-items:center;
    text-align:center;
    max-width:360px;
    margin:0 auto;
    min-width:0;
  }
  .card-action h2{
    font-size:1.95rem;
    line-height:1.04;
    margin-bottom:12px;
    overflow-wrap:break-word;
  }
  .card-action p{
    font-size:.94rem;
    line-height:1.55;
    margin-bottom:20px;
  }
  .btn,
  .card-cta{
    justify-content:center;
    min-height:44px;
  }
  .card-action .card-cta{
    width:100%;
    max-width:280px;
  }
  .waitlist-shell{grid-template-columns:1fr}
  .agent-card{
    width:100%;
    max-width:100%;
    min-height:218px;
    padding:22px;
    border-radius:22px;
  }
  .card-stack::before{
    inset:28px 12px auto;
    height:170px;
    filter:blur(34px);
  }
  .card-top{
    margin-bottom:52px;
  }
  .card-addr{
    max-width:130px;
    overflow:hidden;
  }
  .card-chip{
    top:102px;
    right:22px;
    width:50px;
    height:38px;
  }
  .card-balance{font-size:1.82rem}
  .card-name{
    font-size:.76rem;
    letter-spacing:.13em;
  }
  .card-demo{
    grid-template-columns:1fr;
    gap:22px;
    width:100%;
    max-width:354px;
    margin:0 auto;
    min-width:0;
  }
  .card-stack{
    width:100%;
    min-width:0;
  }
  .discussion-panel{
    justify-self:stretch;
    align-items:flex-start;
  }
  .discussion-body{
    max-width:100%;
    gap:10px;
  }
  .discussion-body .use-case-prompt{
    width:92%;
    padding:13px 16px;
    border-radius:22px;
    font-size:.8rem;
    line-height:1.45;
  }
  .discussion-reply{
    max-width:92%;
    font-size:.83rem;
    line-height:1.55;
  }
  .spent-row{
    font-size:.8rem;
  }
  .integrations{
    padding:36px 22px;
  }
  .int-row{
    gap:18px;
    min-width:0;
  }
  .int-group{
    gap:12px;
    min-width:0;
  }
  .int-label{
    font-size:.88rem;
    line-height:1.4;
  }
  .int-badges{
    gap:10px 14px;
  }
  .int-tag{
    font-size:.78rem;
    line-height:1.35;
    white-space:normal;
  }
  .waitlist-section{
    padding:54px 18px;
  }
  .waitlist-shell{
    gap:28px;
  }
  .waitlist-copy h2{
    font-size:2.45rem;
    line-height:.98;
    margin-bottom:16px;
  }
  .waitlist-copy p{
    font-size:.95rem;
    line-height:1.6;
    margin-bottom:0;
  }
  .waitlist-card{
    padding:24px;
    border-radius:18px;
  }
  .waitlist-card::before{
    border-radius:18px;
  }
  .waitlist-card h3{
    font-size:1.28rem;
  }
  .waitlist-form input,
  .waitlist-form select{
    min-height:46px;
    font-size:16px;
  }
  .waitlist-form button{
    min-height:48px;
  }
  .product-explainer{
    padding:56px 22px;
  }
  .explain-steps{
    grid-template-columns:1fr;
  }
  .explain-step{min-height:0}
  .explain-track{display:none}
  .cta-section{
    padding:56px 22px;
    text-align:center;
  }
  .cta-section h2{
    font-size:2rem;
  }
  .cta-section p{
    margin-left:auto;
    margin-right:auto;
  }
  .cta-section .btn{
    width:100%;
    max-width:280px;
  }
  footer{
    padding:28px 22px;
    flex-direction:column;
    align-items:flex-start;
  }
  .footer-links{
    gap:12px 18px;
  }
  .footer-meta{align-items:flex-start}
}
@media(min-width:601px) and (max-width:900px){
  .card-showcase{
    grid-template-columns:1fr;
    max-width:560px;
    gap:28px;
  }
  .card-demo{
    grid-template-columns:1fr 1fr;
    gap:18px 20px;
  }
  .discussion-reply,.spent-row{font-size:.8rem}
  .discussion-body .use-case-prompt{padding:12px 16px;border-radius:22px}
}
@media(max-width:900px){
  .int-row{
    grid-template-columns:1fr;
    gap:20px;
  }
  .int-badges{
    flex-wrap:wrap;
  }
  .int-group{
    min-height:auto;
    padding:0;
    gap:14px;
  }
  .int-sep{
    width:100%;
    height:1px;
  }
  .use-case-grid{grid-template-columns:1fr}
  .waitlist-shell{grid-template-columns:1fr}
}

/* WAITLIST — mythic cobalt style (matches Compare header) */
.waitlist-section{
  --cobalt:#003bf2;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:96px 5vw;
  background:#fff;
}
.waitlist-section::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:url("assets/waitlist-classical.webp") center bottom/cover no-repeat;
  opacity:.4;
}
.waitlist-section::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:radial-gradient(ellipse 34% 58% at 50% 50%,#fff 55%,rgba(255,255,255,.7) 78%,rgba(255,255,255,0) 100%);
}
.waitlist-section .waitlist-shell{
  grid-template-columns:minmax(0,540px);
  justify-content:center;
  gap:30px;
}
.waitlist-section .waitlist-copy{text-align:center}
.waitlist-section .waitlist-copy p{margin:0 auto;max-width:480px}
.waitlist-section .waitlist-copy h2{margin-bottom:16px}
.waitlist-copy .section-label{
  font-family:var(--mono);
  color:var(--cobalt);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.waitlist-copy h2 span{color:var(--cobalt)}
.waitlist-glitch{position:relative;display:inline-block}
.waitlist-glitch::before,.waitlist-glitch::after{
  content:attr(data-text);
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  color:#0a0e17;
}
.waitlist-glitch::before{animation:headlineGlitchA 4.8s steps(1,end) infinite}
.waitlist-glitch::after{animation:headlineGlitchB 4.8s steps(1,end) infinite}
.waitlist-section .waitlist-card{
  border:1px solid #d5dcea;
  border-radius:6px;
  background:#fbfbfd;
  backdrop-filter:none;
  box-shadow:0 1px 0 rgba(10,14,23,.04),0 30px 70px -30px rgba(0,59,242,.45);
  overflow:clip;
}
.waitlist-section .waitlist-card::before{
  inset:0 0 auto 0;
  height:5px;
  padding:0;
  border-radius:0;
  opacity:1;
  background:var(--cobalt);
  -webkit-mask:none;
  mask:none;
}
.waitlist-section .waitlist-card::after{
  content:"";
  position:absolute;
  right:0;
  top:0;
  width:180px;
  height:110px;
  pointer-events:none;
  background:radial-gradient(circle,rgba(0,59,242,.22) 1.1px,transparent 1.5px) 0 0/9px 9px;
  -webkit-mask-image:linear-gradient(225deg,#000,transparent 70%);
  mask-image:linear-gradient(225deg,#000,transparent 70%);
}
.waitlist-section .waitlist-form-wrap > p{
  color:var(--mid);
  font-size:.9rem;
  line-height:1.6;
  margin:8px 0 18px;
}
.waitlist-section .waitlist-form input,
.waitlist-section .waitlist-form select{
  border-radius:4px;
  background:#fff;
  border-color:#d5dcea;
}
.waitlist-section .waitlist-form input:focus,
.waitlist-section .waitlist-form select:focus{
  border-color:var(--cobalt);
  box-shadow:0 0 0 3px rgba(0,59,242,.12);
}
.waitlist-section .waitlist-form button{
  border-radius:4px;
  background:var(--cobalt);
  justify-content:center;
  padding:14px 20px;
  font-weight:600;
}
.waitlist-section .waitlist-form button:hover{background:#002bb3}
.waitlist-section .waitlist-note a{color:var(--cobalt)!important}
.waitlist-section .waitlist-success .check{background:var(--cobalt)}
@media(max-width:900px){
  .waitlist-section{padding:64px 22px}
  .waitlist-section::before{opacity:.22}
}
@media(prefers-reduced-motion:reduce){
  .waitlist-glitch::before,.waitlist-glitch::after{animation:none}
}

/* Waitlist background glitch */
.waitlist-bg-glitch{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.waitlist-bg-glitch span{
  position:absolute;
  inset:0;
  background:url("assets/waitlist-classical.webp") center bottom/cover no-repeat;
  opacity:0;
  will-change:transform,opacity,clip-path;
}
.waitlist-bg-glitch span:nth-child(1){filter:saturate(3) brightness(.85);mix-blend-mode:multiply;animation:wlGlitchA 5.6s steps(1,end) infinite}
.waitlist-bg-glitch span:nth-child(2){filter:hue-rotate(30deg) saturate(2);mix-blend-mode:multiply;animation:wlGlitchB 5.6s steps(1,end) infinite}
.waitlist-bg-glitch span:nth-child(3){animation:wlSlice 5.6s steps(1,end) infinite}
.waitlist-bg-glitch i{
  position:absolute;
  inset:0;
  opacity:.5;
  background:
    repeating-linear-gradient(0deg,rgba(0,59,242,.05) 0 1px,transparent 1px 4px);
}
.waitlist-bg-glitch::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:6px;
  top:30%;
  opacity:0;
  background:linear-gradient(90deg,transparent,rgba(0,59,242,.55) 12%,transparent 18%,transparent 78%,rgba(0,59,242,.45) 86%,transparent);
  animation:wlBars 5.6s steps(1,end) infinite;
}
@keyframes wlGlitchA{
  0%,84%,100%{opacity:0;transform:none;clip-path:inset(0)}
  85%{opacity:.35;transform:translate(9px,-2px);clip-path:inset(8% 0 62% 0)}
  86.5%{opacity:.28;transform:translate(-6px,1px);clip-path:inset(48% 0 30% 0)}
  88%{opacity:.32;transform:translate(12px,0);clip-path:inset(72% 0 6% 0)}
  89.5%{opacity:0}
}
@keyframes wlGlitchB{
  0%,85%,100%{opacity:0;transform:none;clip-path:inset(0)}
  86%{opacity:.3;transform:translate(-10px,2px);clip-path:inset(20% 0 55% 0)}
  87.5%{opacity:.26;transform:translate(7px,-1px);clip-path:inset(60% 0 18% 0)}
  89%{opacity:0}
}
@keyframes wlSlice{
  0%,85.5%,100%{opacity:0;transform:none;clip-path:inset(0)}
  86%{opacity:.5;transform:translateX(-22px);clip-path:inset(34% 0 58% 0)}
  87%{opacity:.45;transform:translateX(18px);clip-path:inset(66% 0 26% 0)}
  88%{opacity:.4;transform:translateX(-12px);clip-path:inset(14% 0 80% 0)}
  88.8%{opacity:0}
}
@keyframes wlBars{
  0%,85%,100%{opacity:0;top:30%}
  85.5%{opacity:1;top:22%}
  86.5%{opacity:.8;top:58%}
  87.5%{opacity:1;top:74%}
  88.5%{opacity:0}
}
@media(max-width:900px){.waitlist-bg-glitch{opacity:.55}}
@media(prefers-reduced-motion:reduce){
  .waitlist-bg-glitch span,.waitlist-bg-glitch::after{animation:none;opacity:0}
}