/* ============================================================
   Hero AI-builder mockup — light theme, native to the landing UI.
   Reuses the markup the old hero used (so hero-anim.js drives it
   unchanged), but restyled with this page's tokens: Inter + JetBrains
   Mono, indigo --accent, soft --surface/--border, Stripe-like shadows.
   Only loaded on index.html.
   ============================================================ */

/* ---- ambient blush: a soft radial glow that fades to nothing (never clips) ---- */
.hero-beam {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  top: 0;
  left: 16%;
  right: 0;
  height: 88%;
  background: radial-gradient(58% 58% at 64% 34%,
    color-mix(in oklab, var(--accent) 30%, transparent),
    color-mix(in oklab, var(--accent-2) 16%, transparent) 44%,
    transparent 72%);
  filter: blur(34px);
  opacity: .85;
}
.hero .wrap { position: relative; z-index: 1; }

/* secondary hero button stays solid so the beam/lines don't show through it */
.hero .btn--ghost { background: var(--surface); }

/* ---- intertwining wavy ribbons (one orange) as the section divider ---- */
.beam-divider {
  position: relative;
  z-index: 1;
  height: 240px;
  margin: -12px 0 -76px;    /* sit just below the hero content; pull the next section up */
  overflow: hidden;
  pointer-events: none;
}
.beam-waves {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.beam-waves .bw {
  fill: none;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  will-change: transform;
}
/* opposite-phase bobbing makes the ribbons weave through each other */
.bw--1 { opacity: .92; animation: bw-bob1 12s ease-in-out infinite; }
.bw--2 { opacity: .95; animation: bw-bob2 10s ease-in-out infinite; }  /* orange */
.bw--3 { opacity: .66; animation: bw-bob3 14s ease-in-out infinite; }
@keyframes bw-bob1 { 0%,100% { transform: translateY(-7px); } 50% { transform: translateY(11px); } }
@keyframes bw-bob2 { 0%,100% { transform: translateY(9px); }  50% { transform: translateY(-13px); } }
@keyframes bw-bob3 { 0%,100% { transform: translateY(-4px); } 50% { transform: translateY(9px); } }

/* ---- preview wrapper (perspective for the hover tilt) ---- */
.hero__preview {
  position: relative;
  perspective: 1400px;
  width: 100%;
}

/* ---- window card ---- */
.hero__window {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transform-style: preserve-3d;
  transition: transform .25s ease;
  will-change: transform;
}
.hero__window-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border-soft);
}
.hero__window-dots { display: flex; gap: 6px; }
.hero__window-dots span { width: 10px; height: 10px; border-radius: 99px; }
.hero__window-url {
  margin-left: 4px;
  font: 400 11.5px/1 var(--mono);
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: 7px;
  padding: 6px 11px;
}

/* ---- feature tabs + progress ---- */
.hero__tabs {
  display: flex;
  gap: 4px;
  padding: 8px 10px;
  background: var(--surface);
  border-bottom: 1px solid var(--border-soft);
}
.hero__tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 7px 8px 8px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s ease;
}
.hero__tab:hover { background: var(--surface-2); }
.hero__tab-label {
  font: 600 11.5px/1 var(--font);
  letter-spacing: -.01em;
  color: var(--muted);
  text-align: left;
  transition: color .15s ease;
}
.hero__tab--active .hero__tab-label { color: var(--accent-ink); }
.hero__tab--done .hero__tab-label { color: var(--ink-2); }
.hero__tab-progress {
  height: 3px;
  border-radius: 99px;
  background: var(--border);
  overflow: hidden;
}
.hero__tab-progress-bar {
  height: 100%;
  width: 0;
  border-radius: 99px;
  background: var(--accent);
}
.hero__tab--done .hero__tab-progress-bar { width: 100% !important; background: #22C55E; }

/* ---- builder body: sidebar | chat | canvas ---- */
.hero__builder {
  display: grid;
  grid-template-columns: 46px 172px 1fr;
  height: 326px;
}

/* sidebar */
.hero__sidebar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 0;
  background: var(--surface-2);
  border-right: 1px solid var(--border-soft);
}
.hero__sidebar-icon {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.hero__sidebar-icon:hover { background: var(--surface); color: var(--ink-2); }
.hero__sidebar-icon--active { background: var(--accent-tint); color: var(--accent-ink); }
.hero__sidebar-spacer { flex: 1; }

/* chat panel */
.hero__chat-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--surface);
  border-right: 1px solid var(--border-soft);
}
.hero__chat-header {
  padding: 11px 13px;
  font: 600 11.5px/1 var(--font);
  letter-spacing: .02em;
  color: var(--ink-2);
  border-bottom: 1px solid var(--border-soft);
}
.hero__chat-messages {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  overflow: hidden;
}
.hero__chat-msg {
  max-width: 90%;
  padding: 7px 11px;
  border-radius: 12px;
  font: 500 11.5px/1.4 var(--font);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .3s ease, transform .3s ease;
}
.hero__chat-msg.visible { opacity: 1; transform: none; }
.hero__chat-msg--user {
  align-self: flex-end;
  background: var(--accent);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.hero__chat-msg--bot {
  align-self: flex-start;
  background: var(--surface-2);
  color: var(--ink-2);
  border: 1px solid var(--border-soft);
  border-bottom-left-radius: 4px;
}
.hero__chat-typing { display: flex; gap: 4px; padding: 1px 2px; }
.hero__chat-typing-dot {
  width: 6px; height: 6px; border-radius: 99px;
  background: var(--muted);
  animation: bld-typing 1.2s ease-in-out infinite;
}
.hero__chat-typing-dot:nth-child(2) { animation-delay: .15s; }
.hero__chat-typing-dot:nth-child(3) { animation-delay: .3s; }
@keyframes bld-typing { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

.hero__chat-input {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 12px 12px;
  padding: 8px 8px 8px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.hero__chat-input-text {
  flex: 1;
  min-height: 15px;
  font: 400 11.5px/1.3 var(--mono);
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
}
.hero__chat-input-text:empty::before { content: 'Ask Netiva to build…'; color: var(--muted); }
.hero__chat-send {
  width: 26px; height: 26px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 7px;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
}

/* ---- canvas ---- */
.hero__canvas-wrap {
  position: relative;
  overflow: hidden;
  background-color: var(--bg);
  background-image:
    linear-gradient(var(--border-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-soft) 1px, transparent 1px);
  background-size: 22px 22px;
}
.hero__tab-canvas {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  overflow: hidden;
}
.hero__canvas-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 12px;
  box-shadow: var(--shadow-sm);
  opacity: 0;
  transform: translateY(10px) scale(.98);
  transition: opacity .4s ease, transform .4s ease;
}
.hero__canvas-block.visible { opacity: 1; transform: none; }

/* skeleton bits shared across blocks */
.hero__block-tag {
  display: inline-block;
  margin-bottom: 9px;
  padding: 3px 9px;
  border-radius: 6px;
  background: var(--accent-tint);
  color: var(--accent-ink);
  font: 600 10px/1 var(--font);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.hero__block-line {
  height: 8px;
  margin-top: 7px;
  border-radius: 99px;
  background: var(--border);
}
.hero__block-line:nth-child(3) { width: 80%; }
.hero__block-line:last-child { width: 55%; }

/* website: columns */
.hero__canvas-block--cols { display: flex; gap: 10px; }
.hero__canvas-col {
  flex: 1;
  height: 58px;
  border-radius: 9px;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  display: flex; align-items: center; justify-content: center;
}
.hero__canvas-col-dot { width: 18px; height: 18px; border-radius: 99px; background: color-mix(in oklab, var(--accent) 30%, var(--surface)); }

/* buttons (cta-row, cart, lead form, email) */
.hero__canvas-block--cta-row { display: flex; gap: 9px; }
.hero__canvas-btn {
  height: 30px;
  padding: 0 16px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
  font: 600 11.5px/1 var(--font);
}
.hero__canvas-btn--primary { background: var(--accent); color: #fff; }
.hero__canvas-btn--ghost { background: var(--surface); color: var(--ink-2); border: 1px solid var(--border); }

/* website: image placeholder */
.hero__canvas-block--image {
  height: 76px;
  border: 1px solid var(--border-soft);
  background: linear-gradient(135deg,
      color-mix(in oklab, var(--accent) 16%, var(--surface)),
      color-mix(in oklab, var(--accent-2) 14%, var(--surface)));
}

/* store: products */
.hero__canvas-block--product-grid { display: flex; gap: 9px; }
.hero__canvas-product {
  flex: 1;
  display: flex; flex-direction: column; gap: 6px;
}
.hero__canvas-product-img {
  height: 42px; border-radius: 8px;
  background: linear-gradient(135deg, color-mix(in oklab, var(--accent) 14%, var(--surface-2)), var(--surface-2));
  border: 1px solid var(--border-soft);
}
.hero__canvas-product-name { height: 7px; width: 80%; border-radius: 99px; background: var(--border); }
.hero__canvas-product-price { font: 700 12px/1 var(--font); color: var(--ink); }

/* store: cart bar */
.hero__canvas-block--cart-bar { display: flex; align-items: center; gap: 10px; }
.hero__canvas-cart-icon { font-size: 16px; }
.hero__canvas-cart-text { flex: 1; font: 500 12px/1 var(--font); color: var(--ink-2); }

/* store: payment */
.hero__canvas-block--payment { display: flex; align-items: center; gap: 10px; }
.hero__canvas-pay-icon { font-size: 16px; }
.hero__canvas-pay-line { flex: 1; height: 8px; border-radius: 99px; background: var(--border); }
.hero__canvas-pay-badge {
  font: 600 10.5px/1 var(--font);
  color: #16a34a;
  background: #dcfce7;
  border-radius: 6px;
  padding: 5px 9px;
  white-space: nowrap;
}

/* blog: schema */
.hero__canvas-block--schema { display: flex; flex-direction: column; gap: 7px; }
.hero__canvas-schema-row { display: flex; align-items: center; gap: 9px; }
.hero__canvas-schema-type {
  font: 600 9.5px/1 var(--mono);
  color: var(--accent-ink);
  background: var(--accent-tint);
  border-radius: 5px;
  padding: 4px 7px;
  min-width: 38px;
  text-align: center;
}
.hero__canvas-schema-name { font: 500 11.5px/1 var(--font); color: var(--ink-2); }

/* blog: cards */
.hero__canvas-block--blog-grid { display: flex; gap: 10px; }
.hero__canvas-blog-card { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.hero__canvas-blog-thumb {
  height: 44px; border-radius: 8px;
  background: linear-gradient(135deg, color-mix(in oklab, var(--accent-2) 18%, var(--surface-2)), var(--surface-2));
  border: 1px solid var(--border-soft);
}
.hero__canvas-blog-title { height: 7px; width: 85%; border-radius: 99px; background: var(--border); }
.hero__canvas-blog-date { font: 500 10px/1 var(--mono); color: var(--muted); }

/* blog: seo */
.hero__canvas-block--seo-bar { display: flex; align-items: center; gap: 9px; }
.hero__canvas-seo-icon { font-size: 14px; }
.hero__canvas-seo-text { font: 500 11.5px/1 var(--font); color: var(--ink-2); }

/* marketing: lead form */
.hero__canvas-block--lead-form { display: flex; flex-direction: column; gap: 7px; }
.hero__canvas-form-label { font: 600 10.5px/1 var(--font); color: var(--muted); }
.hero__canvas-form-input { height: 28px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border); }

/* marketing: email template */
.hero__canvas-block--email-tpl { display: flex; flex-direction: column; gap: 7px; }
.hero__canvas-email-header {
  height: 30px; border-radius: 8px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}
.hero__canvas-email-body { display: flex; flex-direction: column; gap: 6px; }
.hero__canvas-email-cta {
  align-self: flex-start;
  font: 600 11px/1 var(--font); color: #fff;
  background: var(--accent); border-radius: 7px; padding: 7px 13px;
}

/* marketing: analytics */
.hero__canvas-block--analytics { display: flex; flex-direction: column; gap: 9px; }
.hero__canvas-analytics-label { font: 600 10.5px/1 var(--font); color: var(--muted); }
.hero__canvas-analytics-bars { display: flex; align-items: flex-end; gap: 6px; height: 64px; }
.hero__canvas-analytics-bar {
  flex: 1;
  border-radius: 5px 5px 0 0;
  background: linear-gradient(180deg, var(--accent), color-mix(in oklab, var(--accent) 55%, var(--surface)));
}

/* ---- collaborative + user cursors ---- */
.hero__cursor, .hero__user-cursor {
  position: absolute;
  z-index: 5;
  display: flex;
  align-items: flex-start;
  gap: 3px;
  pointer-events: none;
}
.hero__cursor { transition: top .7s cubic-bezier(.4,0,.2,1), left .7s cubic-bezier(.4,0,.2,1); }
.hero__cursor--1 { top: 12%; left: 25%; }
.hero__cursor--2 { top: 10%; left: 70%; }
.hero__cursor-label, .hero__user-cursor-label {
  transform: translateY(2px);
  padding: 2px 7px;
  border-radius: 6px;
  font: 600 10px/1.3 var(--font);
  color: #fff;
  white-space: nowrap;
}
.hero__user-cursor {
  top: 0; left: 0;
  opacity: 0;
  transition: opacity .2s ease;
}
.hero__preview:hover .hero__user-cursor { opacity: 1; }
.hero__user-cursor-label { background: #facc15; color: #422006; }
/* hide the OS cursor over the editor so only the yellow "You" cursor shows */
.hero__preview, .hero__preview * { cursor: none; }

/* ---- entrance ---- */
.hero__preview.reveal { will-change: opacity, transform; }

/* ---- responsive ---- */
@media (max-width: 980px) {
  .hero__builder { grid-template-columns: 40px 150px 1fr; height: 300px; }
  .hero-beam { opacity: .4; }
}
@media (max-width: 560px) {
  .hero__sidebar { display: none; }
  .hero__builder { grid-template-columns: 140px 1fr; height: 300px; }
  .hero__window-url { display: none; }
}

/* ============================================================
   "One platform" showcase — clean, text-led cards that match
   the site's surface-card language (white card, subtle border,
   soft shadow) with a refined accent-tinted glyph.
   ============================================================ */
.showcase-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  margin-top: 56px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.showcase-card {
  position: relative;
  padding: 40px 40px 44px;
  transition: background .25s ease;
}
/* dashed dividers — only on the internal edges, forming a + cross */
.showcase-card:nth-child(odd) { border-right: 1px dashed var(--divider); }
.showcase-card:nth-child(1),
.showcase-card:nth-child(2)   { border-bottom: 1px dashed var(--divider); }
.showcase-card:hover {
  background: color-mix(in oklab, var(--accent) 4%, var(--surface));
}
.showcase-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--accent-tint);
  color: var(--accent-ink);
  margin-bottom: 22px;
  transition: background .25s ease, color .25s ease;
}
.showcase-card__icon svg { width: 26px; height: 26px; }
.showcase-card:hover .showcase-card__icon {
  background: var(--accent);
  color: #fff;
}
.showcase-card h3 {
  font-size: 22px;
  letter-spacing: -.02em;
  color: var(--ink);
  margin-bottom: 10px;
}
.showcase-card p {
  margin: 0;
  max-width: 46ch;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}

@media (max-width: 760px) {
  .showcase-grid { grid-template-columns: 1fr; }
  .showcase-card { padding: 30px 26px 32px; }
  /* single column: dividers become horizontal between all rows */
  .showcase-card:nth-child(odd) { border-right: 0; }
  .showcase-card:nth-child(3)   { border-bottom: 1px dashed var(--divider); }
  .showcase-card:last-child     { border-bottom: 0; }
}

/* ---- lavender pixel dissolve into the agent section ----
   The band sits over the white neighbour, densest lavender at the bottom
   (merging seamlessly into the lavender section) and thinning to sparse
   flecks rising up into the white. margins net 0. */
.pixel-transition {
  position: relative;
  z-index: 1;
  height: 160px;
  margin-top: -160px;
  pointer-events: none;
  background: url('assets/pixel-edge.svg') repeat-x bottom center;
  background-size: 360px 160px;
}
/* mirrored for the bottom seam (dense at the agent edge → fading into the section below) */
.pixel-transition--flip {
  margin-top: 0;
  margin-bottom: -160px;
  transform: scaleY(-1);
}
/* the pixel band overlaps 160px into each white neighbour — keep just enough
   padding that the band stays clear of the content (lavender side is free) */
.band--after-pixel { padding-top: 180px; }
#features { padding-bottom: 180px; }