:root {
    --shell-px: clamp(24px, 5vw, 56px);
  }
  /* Minimal reset (was provided by Tailwind before, now restored manually) */
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
  body { margin: 0; }
  h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote { margin: 0; padding: 0; }
  ul, ol { list-style: none; }
  a { color: inherit; text-decoration: none; }
  button { font: inherit; cursor: pointer; background: none; border: none; padding: 0; color: inherit; }
  img, svg, video { display: block; max-width: 100%; }

  body {
    background: #000;
    color: #fff;
    font-family: Inter, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  .display {
    font-family: "Inter Tight", system-ui, sans-serif;
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 0.95;
  }
  .eyebrow {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #8a8a8a;
  }
  .pill {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px; border-radius: 999px;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
    border: 1px solid #2a2a2a;
    color: #ededed;
    background: rgba(255,255,255,0.02);
  }
  .pill-lime {
    background: #7b61ff; color: #0a0a0a; border-color: #7b61ff;
  }
  .pill-dot::before {
    content: ""; width: 6px; height: 6px; border-radius: 999px; background: #7b61ff;
  }
  .btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 14px 22px; border-radius: 999px;
    font-family: "Inter Tight", system-ui, sans-serif;
    font-weight: 600; font-size: 15px; letter-spacing: -0.01em;
    transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
  }
  .btn-primary { background: #fff; color: #000; }
  .btn-primary:hover { background: #7b61ff; }
  .btn-ghost { color: #fff; border: 1px solid #2a2a2a; background: transparent; }
  .btn-ghost:hover { border-color: #7b61ff; color: #7b61ff; }
  /* '\FE0E' = Variation Selector-15, forces text presentation so iOS doesn't render the arrow as a blue emoji */
  .arrow-up::after    { content: "\2197\FE0E"; font-weight: 500; font-variant-emoji: text; }
  .arrow-right::after { content: "\2192\FE0E"; font-weight: 500; font-variant-emoji: text; }

  /* Section shell */
  .shell { max-width: 1280px; margin: 0 auto; padding-left: var(--shell-px); padding-right: var(--shell-px); }
  .section { padding: clamp(64px, 10vw, 140px) 0; border-top: 1px solid #1a1a1a; }
  .section-head { display: grid; gap: 18px; margin-bottom: clamp(40px, 6vw, 80px); }
  .section-num { font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: 0.2em; color: #5a5a5a; }
  h2.section-title { font-family: "Inter Tight", sans-serif; font-weight: 700; letter-spacing: -0.025em; line-height: 1.05;
    font-size: clamp(36px, 5.5vw, 72px); }
  .section-sub { color: #8a8a8a; max-width: 640px; font-size: clamp(15px, 1.4vw, 18px); line-height: 1.55; }

  /* Card surfaces */
  .card { background: #0a0a0a; border: 1px solid #1f1f1f; border-radius: 24px; }
  .card-soft { background: rgba(255,255,255,0.025); border: 1px solid #1f1f1f; border-radius: 24px; }
  .img-ph { position: relative; overflow: hidden; border-radius: 20px; background:
    radial-gradient(120% 80% at 30% 20%, #1a1a1a 0%, #0a0a0a 60%, #000 100%);
    border: 1px solid #1f1f1f; }
  .img-ph::after {
    content: attr(data-label); position: absolute; left: 16px; bottom: 14px;
    font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.18em;
    text-transform: uppercase; color: #5a5a5a;
  }

  /* Ticker */
  .ticker { overflow: hidden; border-top: 1px solid #1a1a1a; border-bottom: 1px solid #1a1a1a; background: #050505; }
  .ticker-track { display: flex; gap: 56px; padding: 18px 0; white-space: nowrap;
    animation: ticker 38s linear infinite;
    font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: #ededed; }
  .ticker-track span { color: #5a5a5a; }
  .ticker-track strong { color: #7b61ff; font-weight: 500; }
  @keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

  /* Comparison cards */
  .compare { display: grid; gap: 16px; grid-template-columns: 1fr; }
  @media (min-width: 900px) { .compare { grid-template-columns: repeat(3, 1fr); } }
  .compare-card { padding: 28px; border-radius: 24px; border: 1px solid #1f1f1f; background: #0a0a0a; display: flex; flex-direction: column; gap: 18px; min-height: 360px; }
  .compare-card.win { border-color: #7b61ff; background: linear-gradient(180deg, rgba(201,245,94,0.06) 0%, #0a0a0a 60%); }
  .compare-card h3 { font-family: "Inter Tight", sans-serif; font-weight: 700; font-size: 22px; letter-spacing: -0.02em; }
  .compare-card ul { display: grid; gap: 10px; color: #c9c9c9; font-size: 14.5px; line-height: 1.5; }
  .compare-card li { display: flex; gap: 10px; align-items: flex-start; }
  .compare-card li::before { content: "—"; color: #5a5a5a; }
  .compare-card.win li::before { content: "✓"; color: #7b61ff; }

  /* Feature rows — entry animation via CSS scroll-driven animations.
     Pure CSS, no JS, no IntersectionObserver. Fallback: rows just stay visible. */
  @keyframes slideInFromLeft {
    from { opacity: 0; transform: translateX(-110px); }
    to   { opacity: 1; transform: translateX(0); }
  }
  @keyframes slideInFromRight {
    from { opacity: 0; transform: translateX(110px); }
    to   { opacity: 1; transform: translateX(0); }
  }
  @supports (animation-timeline: view()) {
    .feat-row .feat-text {
      animation: slideInFromLeft linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 35%;
    }
    .feat-row .feat-visual {
      animation: slideInFromRight linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 35%;
    }
    .feat-row.reverse .feat-text   { animation-name: slideInFromRight; }
    .feat-row.reverse .feat-visual { animation-name: slideInFromLeft; }
  }
  @media (prefers-reduced-motion: reduce) {
    .feat-row .feat-text, .feat-row .feat-visual {
      animation: none;
    }
  }

  /* Feature rows — full-bleed split, alternating sides (Leonardo "Bring visuals into motion" style) */
  .feat-stack {
    display: flex; flex-direction: column;
    gap: clamp(140px, 18vw, 240px);   /* much more breathing room between rows */
    width: 100%;
    overflow-x: hidden;   /* fallback */
    overflow-x: clip;     /* prevents horizontal scrollbar from translateX off-screen */
  }
  /* (removed body overflow-x: clip — was causing rendering issues) */
  .feat-row {
    display: grid; grid-template-columns: 1fr;
    gap: 28px; align-items: center;
    width: 100%;
  }
  @media (min-width: 900px) {
    .feat-row {
      grid-template-columns: minmax(320px, 38%) 1fr;  /* text 38% / image 62% */
      gap: 0;
      align-items: stretch;
    }
    .feat-row.reverse {
      grid-template-columns: 1fr minmax(320px, 38%);
    }
    .feat-row.reverse .feat-text  { order: 2; }
    .feat-row.reverse .feat-visual{ order: 1; }
  }
  .feat-text {
    align-self: center;
    /* text hugs LEFT viewport edge — only shell padding, no inner gap */
    padding: clamp(32px, 5vw, 72px) clamp(16px, 3vw, 40px) clamp(32px, 5vw, 72px) var(--shell-px);
    max-width: 620px;
  }
  .feat-row.reverse .feat-text {
    /* text hugs RIGHT viewport edge */
    padding: clamp(32px, 5vw, 72px) var(--shell-px) clamp(32px, 5vw, 72px) clamp(16px, 3vw, 40px);
    margin-left: auto;
  }
  .feat-text .feat-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
  .feat-text h3 {
    font-family: "Anton", "Inter Tight", sans-serif;
    font-weight: 400; text-transform: uppercase;
    letter-spacing: 0.005em; line-height: 0.98;
    font-size: clamp(36px, 5.5vw, 88px);
    max-width: 100%;
  }
  .feat-text p {
    color: #c9c9c9; margin-top: 24px; line-height: 1.6;
    font-size: clamp(15px, 1.3vw, 18px); max-width: 480px;
  }
  .feat-text .ctas { display: flex; gap: 12px; margin-top: 36px; flex-wrap: wrap; }
  .feat-text .cta-note {
    margin-top: 16px; font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #8a8a8a;
  }
  .feat-text .cta-note strong { color: #7b61ff; font-weight: 500; }

  .feat-visual {
    position: relative; overflow: hidden;
    background: radial-gradient(120% 80% at 70% 20%, #161616 0%, #0a0a0a 70%);
    border: 1px solid #1a1a1a;
    aspect-ratio: 16/11;
    min-height: 480px;
    /* Round only the inner corners (toward text), keep outer flush to viewport edge */
    border-top-left-radius: clamp(20px, 2vw, 32px);
    border-bottom-left-radius: clamp(20px, 2vw, 32px);
    border-right: none;
  }
  .feat-row.reverse .feat-visual {
    border-top-left-radius: 0; border-bottom-left-radius: 0;
    border-top-right-radius: clamp(20px, 2vw, 32px);
    border-bottom-right-radius: clamp(20px, 2vw, 32px);
    border-left: none; border-right: 1px solid #1a1a1a;
  }
  /* Mobile: round all corners + edge padding */
  @media (max-width: 899px) {
    .feat-visual {
      margin: 0 var(--shell-px);
      border-radius: clamp(20px, 4vw, 28px);
      border: 1px solid #1a1a1a;
      aspect-ratio: 4/5;
      min-height: 420px;
    }
    .feat-row.reverse .feat-visual {
      border-radius: clamp(20px, 4vw, 28px);
      border: 1px solid #1a1a1a;
    }
  }
  .feat-visual > img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .feat-visual .top-meta {
    position: absolute; inset: 16px 18px auto 18px; display: flex; justify-content: space-between;
    font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.18em;
    text-transform: uppercase; color: rgba(255,255,255,0.85);
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
    z-index: 2;
  }
  /* On phones the top-meta sits right where the model's face is — hide it */
  @media (max-width: 899px) {
    .feat-visual .top-meta { display: none; }
  }

  /* Creative Studio — scrolling panorama of real generated campaigns (cards fill the container height) */
  .feat-visual.studio-showcase { padding: 0; background: #0a0a0a; }
  .studio-rail { position: absolute; inset: 0; overflow: hidden; }
  .studio-rail::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
    background: linear-gradient(90deg, #0a0a0a 0%, transparent 7%, transparent 93%, #0a0a0a 100%);
  }
  .studio-rail-track {
    display: flex; height: 100%; width: max-content;
    animation: railScroll 70s linear infinite;
    will-change: transform; backface-visibility: hidden;
  }
  .studio-shot {
    flex: 0 0 auto; height: 100%; aspect-ratio: 3 / 4; width: auto;
    overflow: hidden; margin-right: 14px; background: #161616;
  }
  .studio-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
  @media (prefers-reduced-motion: reduce) { .studio-rail-track { animation: none; } }

  /* Look showcase — model background + floating product cards (DRESSX-style) */
  .look-showcase .look-bg {
    width: 100%; height: 100%;
    object-fit: cover;          /* fills the whole container — no grey strips ever */
    object-position: 75% center; /* model anchored toward the right; left side stays free for cards */
    display: block;
  }
  .product-card {
    position: absolute;
    width: clamp(110px, 17%, 190px);
    background: #fff;
    border-radius: 10px;
    padding: 6px;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.28),
                0 4px 10px rgba(0, 0, 0, 0.18);
    z-index: 3;
    display: flex; flex-direction: column;
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.25, 1);
  }
  .product-card:hover { transform: translateY(-4px) scale(1.03); }
  .product-card .pc-img {
    aspect-ratio: 1/1;
    background: #f5f5f5;
    border-radius: 6px;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
  }
  .product-card .pc-img img {
    max-width: 100%; max-height: 100%; object-fit: contain; display: block;
  }
  .product-card .pc-meta {
    padding: 8px 4px 4px;
    display: flex; flex-direction: column; gap: 2px;
  }
  .product-card .pc-name {
    font-family: "Inter Tight", sans-serif;
    font-weight: 600; font-size: 13px; color: #0a0a0a;
    letter-spacing: -0.01em;
  }
  .product-card .pc-status {
    font-family: "JetBrains Mono", monospace;
    font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase;
    color: #7b61ff;
    display: inline-flex; align-items: center; gap: 4px;
  }
  /* Positions: dress top-left, shoes bottom-left (offset, staggered, on model's left) */
  .product-card.pc-1 { top: 12%; left: 6%; }
  .product-card.pc-2 { bottom: 8%; left: 14%; }

  /* Pose showcase — 4x2 grid of pose thumbnails with pose label + "more" tile */
  .feat-visual.pose-showcase { background: #fff; padding: 0; }
  .pose-grid {
    width: 100%; height: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 0;
  }
  .pose-card {
    position: relative;
    overflow: hidden;
    margin: 0;
    background: #f0f0f0;
    border-right: 1px solid #ededed;
    border-bottom: 1px solid #ededed;
  }
  .pose-card:nth-child(4n) { border-right: none; }
  .pose-card:nth-child(n+5) { border-bottom: none; }
  .pose-card img {
    position: absolute; inset: 0 0 30px 0;
    width: 100%; height: calc(100% - 30px);
    object-fit: cover;
    object-position: center top;
    display: block;
  }
  .pose-card figcaption {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 30px;
    background: #fff;
    display: flex; align-items: center;
    padding: 0 12px;
    font-family: "JetBrains Mono", monospace;
    font-weight: 500;
    font-size: 10px; letter-spacing: 0.16em;
    color: #0a0a0a;
    text-transform: uppercase;
  }
  .pose-card.more {
    background: #0a0a0a;
    display: flex; align-items: center; justify-content: center;
    text-align: center;
  }
  .pose-card.more::before {
    content: "and more";
    font-family: "Inter Tight", sans-serif;
    font-weight: 700;
    font-size: clamp(14px, 1.6vw, 22px);
    letter-spacing: -0.01em;
    color: #fff;
  }
  .pose-card.more figcaption { background: #0a0a0a; color: #7b61ff; }

  /* Story showcase — 3x2 gallery, all frames of one campaign seen together */
  .feat-visual.story-showcase { padding: 0; background: #0a0a0a; }
  .story-grid {
    width: 100%; height: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 4px;
  }
  .story-grid figure { position: relative; overflow: hidden; margin: 0; background: #161616; }
  .story-grid img { width: 100%; height: 100%; object-fit: cover; display: block; }
  @media (max-width: 899px) {
    .story-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 1fr); }
  }

  /* Sketch Studio showcase — 3x2 flow grid (sketch · e-commerce · campaign), figures shown whole */
  .feat-visual.sketch-showcase {
    padding: 0; background: #0a0a0a;
    aspect-ratio: auto; min-height: 0;
  }
  .sketch-grid {
    width: 100%; height: 100%;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
  }
  .sketch-cell {
    position: relative; margin: 0; overflow: hidden;
    aspect-ratio: 3/4; background: #161616;
  }
  .sketch-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
  /* Sketches are full-figure illustrations on white — show them whole, no crop */
  .sketch-cell.is-sketch { background: #f4f3ef; }
  .sketch-cell.is-sketch img { object-fit: contain; }
  .sketch-tag {
    position: absolute; left: 8px; top: 8px; z-index: 2;
    font-family: "JetBrains Mono", monospace; font-size: 9.5px;
    letter-spacing: 0.14em; text-transform: uppercase;
    padding: 4px 8px; border-radius: 999px;
    background: rgba(10,10,10,0.72); color: #fff; backdrop-filter: blur(3px);
  }
  .sketch-cell.is-sketch .sketch-tag { background: rgba(10,10,10,0.85); }
  @media (max-width: 899px) {
    .feat-visual.sketch-showcase { aspect-ratio: auto; min-height: 0; }
  }

  /* Tech sheet showcase — show the whole interface screenshot, never cropped */
  .feat-visual.tech-showcase {
    aspect-ratio: auto; min-height: 0;
    background: #ece9e3;
    padding: clamp(14px, 1.8vw, 26px);
    display: flex; align-items: center; justify-content: center;
  }
  .feat-visual.tech-showcase img {
    width: 100%; height: auto; max-height: 100%;
    object-fit: contain; display: block;
    border-radius: 10px;
    box-shadow: 0 18px 44px rgba(0,0,0,0.28);
  }

  /* Cast showcase — 3x2 grid of model portraits with name caption */
  .feat-visual.cast-showcase { background: #fff; padding: 0; }
  .cast-grid {
    width: 100%; height: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 0;
  }
  .cast-card {
    position: relative;
    overflow: hidden;
    margin: 0;
    background: #f0f0f0;
    border-right: 1px solid #ededed;
    border-bottom: 1px solid #ededed;
  }
  .cast-card:nth-child(3n) { border-right: none; }
  .cast-card:nth-child(n+4) { border-bottom: none; }
  .cast-card img {
    position: absolute; inset: 0 0 36px 0;
    width: 100%; height: calc(100% - 36px);
    object-fit: cover;
    object-position: center 25%;
    display: block;
  }
  .cast-card figcaption {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 36px;
    background: #fff;
    display: flex; align-items: center;
    padding: 0 16px;
    font-family: "Inter", sans-serif;
    font-weight: 500;
    font-size: 12px; letter-spacing: 0.22em;
    color: #0a0a0a;
  }
  @media (max-width: 899px) {
    /* Mobile: split into 2 columns — product cards on the left, model on the right.
       No more overlap, model fully visible, cards never crop her. */
    .feat-visual.look-showcase {
      aspect-ratio: auto !important;
      min-height: 0;
      padding: 8px;
      display: grid !important;
      grid-template-columns: 35% 1fr;
      grid-template-rows: 1fr 1fr;
      gap: 8px;
      background: #ececec;
      border-radius: clamp(20px, 4vw, 28px);
    }
    .look-showcase .look-bg {
      position: static !important;
      grid-column: 2; grid-row: 1 / -1;
      width: 100%; height: 100%;
      aspect-ratio: auto;
      object-fit: cover;
      object-position: center center;
      border-radius: 14px;
    }
    .product-card {
      position: static !important;
      top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
      width: 100% !important; max-width: none;
      box-shadow: 0 6px 16px rgba(0,0,0,0.18);
    }
    .product-card .pc-img { aspect-ratio: 1/1; }
    .product-card .pc-meta { padding: 8px 4px 4px; }
    .product-card .pc-name { font-size: 12px; }
    .product-card .pc-status { font-size: 9px; }
    .product-card.pc-1 { grid-column: 1; grid-row: 1; }
    .product-card.pc-2 { grid-column: 1; grid-row: 2; }
  }

  /* Stats */
  .stat-row { display: grid; gap: 24px; grid-template-columns: 1fr; }
  @media (min-width: 900px) { .stat-row { grid-template-columns: 1.4fr 1fr 1fr; } }
  .stat-big { font-family: "Inter Tight", sans-serif; font-weight: 800; letter-spacing: -0.035em; line-height: 0.95;
    font-size: clamp(56px, 8vw, 110px); color: #fff; }
  .stat-big em { font-style: normal; color: #7b61ff; }

  /* Pricing */
  .plans { display: grid; gap: 20px; grid-template-columns: 1fr; }
  @media (min-width: 700px)  { .plans { grid-template-columns: 1fr 1fr; } }
  @media (min-width: 1100px) { .plans { grid-template-columns: repeat(4, 1fr); } }
  .plans-note { color: #8a8a8a; font-family: "JetBrains Mono", monospace; font-size: 12px;
    letter-spacing: 0.14em; text-transform: uppercase; margin-top: 24px; text-align: center; }
  .plan { padding: 28px; border-radius: 24px; background: #0a0a0a; border: 1px solid #1f1f1f; display: flex; flex-direction: column; gap: 22px; min-height: 480px; }
  .plan.recommend { border-color: #7b61ff; background: linear-gradient(180deg, rgba(201,245,94,0.05) 0%, #0a0a0a 70%); position: relative; }
  .plan.recommend::after { content: "Recommended"; position: absolute; top: -12px; left: 24px; background: #7b61ff; color: #0a0a0a;
    font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
    padding: 6px 10px; border-radius: 999px; }
  .plan h3 { font-family: "Inter Tight", sans-serif; font-weight: 700; font-size: 22px; letter-spacing: -0.02em; }
  .plan .price { font-family: "Inter Tight", sans-serif; font-weight: 800; font-size: 44px; letter-spacing: -0.03em; line-height: 1; }
  .plan .price small { font-size: 14px; color: #8a8a8a; font-weight: 500; letter-spacing: 0; }
  .plan .credits { font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: 0.14em; color: #7b61ff; text-transform: uppercase; }
  .plan ul { display: grid; gap: 10px; color: #c9c9c9; font-size: 14.5px; }
  .plan ul li { display: flex; gap: 10px; align-items: flex-start; }
  .plan ul li::before { content: "✓"; color: #7b61ff; }
  .plan .module-row { display: flex; gap: 14px; font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #8a8a8a; padding: 12px 0; border-top: 1px solid #1f1f1f; border-bottom: 1px solid #1f1f1f; }
  .plan .module-row .yes { color: #7b61ff; }
  .plan .module-row .no { color: #5a5a5a; }
  .plan-custom { display: grid; gap: 20px; grid-template-columns: 1fr; margin-top: 20px; }
  @media (min-width: 900px) { .plan-custom { grid-template-columns: 1fr 1fr; } }

  /* Banner */
  .banner { background: #7b61ff; color: #0a0a0a; border-radius: 24px; padding: clamp(28px, 4vw, 44px);
    display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
  @media (min-width: 700px) { .banner { flex-direction: row; align-items: center; justify-content: space-between; } }
  .banner h3 { font-family: "Inter Tight", sans-serif; font-weight: 800; font-size: clamp(28px, 3.5vw, 44px); letter-spacing: -0.025em; line-height: 1; }
  .banner .btn-banner { background: #0a0a0a; color: #fff; padding: 14px 22px; border-radius: 999px; font-weight: 600; font-family: "Inter Tight"; font-size: 15px; }

  /* Press list */
  .press-row { display: grid; grid-template-columns: 130px 1fr auto; gap: 24px; align-items: center; padding: 22px 0; border-top: 1px solid #1a1a1a; font-size: 15px; }
  .press-row:last-child { border-bottom: 1px solid #1a1a1a; }
  .press-row .date { font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: 0.14em; color: #5a5a5a; text-transform: uppercase; }
  .press-row .src { font-family: "Inter Tight"; font-weight: 700; }
  .press-row .src em { font-style: normal; color: #8a8a8a; font-weight: 500; }
  .press-row .arr { color: #5a5a5a; }
  @media (max-width: 700px) {
    .press-row { grid-template-columns: 1fr; gap: 6px; }
    .press-row .arr { display: none; }
  }

  /* CTA — simple email contact */
  .cta-contact {
    display: flex; flex-direction: column;
    align-items: flex-start; gap: 18px;
    max-width: 720px;
  }
  .cta-contact-label {
    font-family: "JetBrains Mono", monospace;
    font-size: 12px; letter-spacing: 0.18em; color: #5a5a5a;
    text-transform: uppercase;
  }
  .cta-contact-mail {
    font-family: "Inter Tight", sans-serif;
    font-weight: 700;
    font-size: clamp(28px, 4vw, 56px);
    letter-spacing: -0.025em;
    color: #fff;
    text-decoration: none;
    transition: color .2s ease;
  }
  .cta-contact-mail:hover { color: #7b61ff; }
  .cta-contact-btn { margin-top: 8px; }

  /* Giant wordmark — sits next to the CTA copy on desktop, stacks on mobile */
  .brand-giant {
    line-height: 0.85;
    font-family: "Anton", "Inter Tight", sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    color: #fff;
    font-size: clamp(56px, 11vw, 160px);
    white-space: nowrap;       /* never break the word */
    overflow: hidden;          /* if container is too narrow, just crop edges (won't happen at common breakpoints) */
    user-select: none;
    text-align: left;
  }
  .brand-giant .m { color: #7b61ff; }

  /* CTA split layout: copy + contact on the left, giant wordmark on the right */
  .cta-split {
    display: grid; gap: 40px;
    grid-template-columns: 1fr;
    align-items: center;
  }
  @media (min-width: 900px) {
    .cta-split { grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); }
  }
  /* On phones: stack + center everything */
  @media (max-width: 899px) {
    .cta-split { text-align: center; }
    .cta-split .cta-contact { align-items: center; }
    .cta-split .section-title { text-align: center; }
    .cta-split .brand-giant { text-align: center; }
  }

  /* CTA form (legacy, in case anything still references it) */
  .cta-form { display: grid; gap: 16px; grid-template-columns: 1fr; max-width: 720px; }
  @media (min-width: 700px) { .cta-form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } }
  .input { background: rgba(255,255,255,0.03); border: 1px solid #2a2a2a; border-radius: 14px; padding: 16px 18px;
    color: #fff; font-family: Inter, sans-serif; font-size: 15px; width: 100%; transition: border-color .2s ease; }
  .input:focus { outline: none; border-color: #7b61ff; }
  .input::placeholder { color: #5a5a5a; }
  .checkrow { display: flex; flex-wrap: wrap; gap: 10px; }
  .check { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px;
    border: 1px solid #2a2a2a; cursor: pointer; font-size: 13px; color: #c9c9c9; transition: all .2s ease;
    font-family: "JetBrains Mono", monospace; letter-spacing: 0.06em; }
  .check input { display: none; }
  .check:has(input:checked) { background: #7b61ff; color: #0a0a0a; border-color: #7b61ff; }

  /* FAQ */
  .faq details { border-top: 1px solid #1a1a1a; padding: 24px 0; }
  .faq details:last-child { border-bottom: 1px solid #1a1a1a; }
  .faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; align-items: center;
    font-family: "Inter Tight"; font-weight: 600; font-size: clamp(18px, 2vw, 24px); letter-spacing: -0.015em; }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after { content: "+"; font-family: "Inter Tight"; font-size: 28px; color: #7b61ff; transition: transform .2s ease; }
  .faq details[open] summary::after { content: "−"; }
  .faq details > p { color: #9b9b9b; line-height: 1.6; max-width: 760px; padding-top: 14px; font-size: 16px; }

  /* Footer */
  footer { padding: clamp(64px, 8vw, 120px) 0 40px; border-top: 1px solid #1a1a1a; }
  .footer-grid { display: grid; gap: 40px; grid-template-columns: 1fr 1fr; }
  /* Mobile: brand+contact full width on top, modules + social side by side */
  @media (max-width: 899px) {
    .footer-grid > :nth-child(1),
    .footer-grid > :nth-child(2) { grid-column: 1 / -1; }
  }
  @media (min-width: 900px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
    .footer-grid > :nth-child(1), .footer-grid > :nth-child(2) { grid-column: auto; }
  }
  .footer h4 { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.18em; color: #5a5a5a; text-transform: uppercase; margin-bottom: 16px; }
  .footer ul { display: grid; gap: 10px; color: #c9c9c9; font-size: 14.5px; }
  .footer a:hover { color: #7b61ff; }

  /* Brand lock-up — Anton uppercase, matches the giant wordmark */
  .brand {
    font-family: "Anton", "Inter Tight", sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.005em;
    font-size: 26px;
    line-height: 1;
    color: #fff;
  }
  .brand .m { color: #7b61ff; }
  @media (max-width: 899px) {
    .brand { font-size: 22px; }
    nav.top .row .right .btn-login {
      display: inline-flex !important;
      padding: 8px 16px;
      font-size: 13px;
    }
    nav.top .row { gap: 10px; padding: 12px 0; }
    .nav-toggle { width: 36px; height: 36px; }
  }
  @media (max-width: 480px) {
    nav.top .row .right .btn-login { padding: 7px 12px; font-size: 12.5px; }
  }

  /* Hero — centered, Leonardo-style massive display */
  .hero {
    padding-top: clamp(28px, 3vw, 48px);
    padding-bottom: 0;
    text-align: center;
    position: relative;
    overflow: hidden;
  }
  /* Text below, banner ABOVE — banner rises and covers the text on scroll */
  .hero > .shell { position: relative; z-index: 1; transform-origin: 50% 30%; }

  /* Hero banner — sits below CTA, then rises ON TOP of the text on scroll */
  .hero-banner {
    margin-top: clamp(28px, 3.5vw, 56px);
    padding: 0;
    width: 100%;
    position: relative;
    z-index: 5;
    will-change: transform;
    transition: transform 0.05s linear;
  }
  .hero-banner-inner {
    position: relative;
    max-width: none;
    margin: 0;
    border-radius: 0;
    overflow: hidden;
    transition: opacity 1.4s cubic-bezier(0.2, 0.8, 0.25, 1),
                transform 1.4s cubic-bezier(0.2, 0.8, 0.25, 1);
  }

  /* Hero grid — 5x2 dashboard cards. Cinematic tour: zoom in on one card,
     out to reveal the whole grid, zoom in on the next. Loop. */
  .hero-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 10px;
    background: #f5f5f5;
  }
  @media (max-width: 900px) {
    .hero-grid { grid-template-columns: repeat(2, 1fr); }
    .hero-card .status, .hero-card .count { display: none; }
  }
  .hero-card {
    position: relative;
    aspect-ratio: 3/4;
    overflow: hidden;
    border-radius: clamp(14px, 1.6vw, 22px);
    background: #ededed;
    margin: 0;
    cursor: pointer;
    transition: box-shadow 0.6s cubic-bezier(0.2,0.8,0.25,1);
  }
  .hero-card img {
    width: 100%; height: 100%; object-fit: cover; display: block;
  }
  /* The card currently in focus during the tour gets a soft viola ring */
  .hero-card.focus {
    box-shadow: 0 0 0 2px rgba(123, 97, 255, 0.9),
                0 14px 30px rgba(123, 97, 255, 0.25);
  }
  /* Hover stops the tour visually (handled in JS by class .tour-paused) */
  .hero-grid.tour-paused { transform: scale(1) !important; transform-origin: 50% 50% !important; }

  /* Hero rail — full-width row of large images scrolling horizontally */
  .hero-rail { overflow: hidden; background: #0a0a0a; padding: 0; }
  .hero-rail-track {
    display: flex; width: max-content;
    animation: railScroll 95s linear infinite;
    will-change: transform;
    backface-visibility: hidden;
  }
  .hero-shot {
    position: relative; flex: 0 0 auto;
    width: 462px; height: 616px;
    border-radius: 16px; overflow: hidden; background: #ededed;
    margin-right: 14px;
  }
  @media (max-width: 900px) {
    .hero-shot { width: 264px; height: 352px; }
  }
  .hero-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
  @keyframes railScroll { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
  @media (prefers-reduced-motion: reduce) { .hero-rail-track { animation: none; } }

  /* Status + count badges (dashboard-like overlay) */
  .hero-card .status,
  .hero-card .count {
    position: absolute; top: 6px;
    font-family: "JetBrains Mono", monospace;
    font-size: 8.5px; letter-spacing: 0.14em;
    padding: 3px 7px; border-radius: 999px;
    z-index: 3;
    pointer-events: none;
  }
  .hero-card .status { left: 6px; background: #fff; color: #16a34a; font-weight: 600; }
  .hero-card .count  { right: 6px; background: rgba(0,0,0,0.6); color: #fff; }

  @media (prefers-reduced-motion: reduce) {
    .hero-card, .hero-card img { animation: none; }
  }

  /* Hero entrance — pure CSS keyframes (safe now that Tailwind doesn't interfere) */
  @keyframes heroFadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .hero h1, .hero p.lead, .hero .cta-row, .hero-banner-inner {
    animation: heroFadeUp 0.9s ease-out both;
  }
  .hero p.lead       { animation-delay: 0.15s; }
  .hero .cta-row     { animation-delay: 0.30s; }
  .hero-banner-inner { animation-delay: 0.45s; animation-duration: 1.1s; }
  @media (prefers-reduced-motion: reduce) {
    .hero h1, .hero p.lead, .hero .cta-row, .hero-banner-inner { animation: none; }
  }

  /* Hero shell receives scroll-driven fade (set inline by JS) */
  .hero > .shell { transition: opacity 0.05s linear; will-change: transform, opacity; }

  /* Respect reduced motion on scroll-driven hero */
  @media (prefers-reduced-motion: reduce) {
    .hero-banner, .hero > .shell { transition: none; }
  }
  .hero h1 {
    font-family: "Anton", "Inter Tight", sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.005em;
    line-height: 1.0;
    font-size: clamp(36px, 6vw, 92px);
    max-width: 1100px; margin: 0 auto;
  }
  .hero h1 em { font-style: normal; color: #7b61ff; }
  .hero p.lead {
    color: #c9c9c9;
    font-size: clamp(15px, 1.4vw, 19px);
    line-height: 1.55;
    max-width: 720px;
    margin: 22px auto 0;
  }
  .hero .social-row { display: inline-flex; align-items: center; gap: 12px; margin-top: 36px;
    font-family: "Inter Tight", sans-serif; color: #c9c9c9; font-size: 14px; }
  .hero .social-row .stars { color: #7b61ff; letter-spacing: 1px; font-size: 16px; }
  .hero .social-row strong { font-weight: 700; color: #fff; }
  .hero .social-row em { font-style: normal; color: #8a8a8a; font-size: 12px; line-height: 1.3; max-width: 180px; text-align: left; }
  .hero .cta-row { margin-top: 28px; display: flex; justify-content: center; }
  @media (max-width: 599px) { .hero .cta-row { display: none; } }
  .btn-hero {
    display: inline-flex; align-items: center; gap: 12px;
    background: #fff; color: #000;
    padding: 22px 36px; border-radius: 999px;
    font-family: "Inter Tight", sans-serif; font-weight: 600;
    font-size: 17px; letter-spacing: -0.01em;
    transition: all .2s ease;
  }
  .btn-hero:hover { background: #7b61ff; transform: translateY(-2px); }

  /* Hero collage — absolute background, overlaps with hero text (Leonardo style) */
  .hero-collage {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: clamp(380px, 56vh, 620px);
    z-index: 1;
    pointer-events: none;
  }
  .hero-collage .ph {
    position: absolute;
    border-radius: 14px;
    background: radial-gradient(120% 80% at 30% 20%, #1f1f1f 0%, #0a0a0a 70%);
    border: 1px solid #1f1f1f;
    box-shadow: 0 30px 60px rgba(0,0,0,0.55);
    overflow: hidden;
    pointer-events: auto;
    transition: transform 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.1), box-shadow 0.5s ease;
    will-change: transform;
  }
  .hero-collage .ph:hover {
    transform: scale(1.06) rotate(0deg) !important;
    box-shadow: 0 40px 80px rgba(123, 97, 255, 0.25), 0 30px 60px rgba(0,0,0,0.6);
    z-index: 20 !important;
  }
  .hero-collage .ph .ph-inner {
    width: 100%; height: 100%;
    animation: floatY 7s ease-in-out infinite;
    will-change: transform;
  }
  .hero-collage .ph img {
    width: 100%; height: 100%; object-fit: cover; display: block;
  }
  @keyframes floatY {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-14px); }
  }
  /* Stagger so they don't bob in sync (the "fluid" feel) */
  .hero-collage .p1 .ph-inner { animation-delay:  0s;   animation-duration: 7s; }
  .hero-collage .p2 .ph-inner { animation-delay: -1.1s; animation-duration: 8s; }
  .hero-collage .p3 .ph-inner { animation-delay: -2.4s; animation-duration: 6s; }
  .hero-collage .p4 .ph-inner { animation-delay: -3.6s; animation-duration: 7.5s; }
  .hero-collage .p5 .ph-inner { animation-delay: -4.8s; animation-duration: 6.5s; }
  .hero-collage .p6 .ph-inner { animation-delay: -2s;   animation-duration: 8.5s; }
  .hero-collage .p7 .ph-inner { animation-delay: -5.5s; animation-duration: 7s; }

  /* Polaroid spread — varied sizes, some bleed off the viewport edges (Leonardo style) */
  .hero-collage .p1 { left:  -2%; bottom: 26%; width: 13%; aspect-ratio: 3/4;  transform: rotate(-6deg); z-index: 2; }
  .hero-collage .p2 { left:  10%; bottom: -8%; width: 19%; aspect-ratio: 3/5;  transform: rotate(3deg);  z-index: 4; }
  .hero-collage .p3 { left:  28%; bottom: 30%; width: 10%; aspect-ratio: 1/1;  transform: rotate(-3deg); z-index: 3; }
  .hero-collage .p4 { left:  39%; bottom: -14%; width: 17%; aspect-ratio: 3/4; transform: rotate(2deg);  z-index: 5; }
  .hero-collage .p5 { right: 28%; bottom: 28%; width: 13%; aspect-ratio: 4/5;  transform: rotate(-2deg); z-index: 4; }
  .hero-collage .p6 { right: -3%; bottom: 6%;  width: 17%; aspect-ratio: 3/5;  transform: rotate(5deg);  z-index: 3; }
  .hero-collage .p7 { right: 14%; bottom: -10%; width: 12%; aspect-ratio: 1/1; transform: rotate(-4deg); z-index: 5; }

  /* Mobile: collage becomes static grid below text */
  @media (max-width: 768px) {
    .hero { min-height: auto; }
    .hero-collage { position: static; height: auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 32px var(--shell-px) 0; }
    .hero-collage .ph { position: static; width: 100%; transform: none !important; aspect-ratio: 3/4; box-shadow: none; }
    .hero-collage .p3, .hero-collage .p5, .hero-collage .p7 { aspect-ratio: 3/4; }
  }

  /* Nav — Leonardo style: logo left, menu CENTER, CTAs right */
  nav.top { position: sticky; top: 0; z-index: 50;
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    background: rgba(0,0,0,0.65); border-bottom: 1px solid rgba(255,255,255,0.06); }
  nav.top .row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 10px 0; gap: 24px; position: relative; }
  nav.top .left { justify-self: start; }
  nav.top .links { display: none; gap: 36px; font-family: "Inter Tight"; font-weight: 500; font-size: 15px; color: #c9c9c9; justify-self: center; }
  nav.top .links a:hover { color: #7b61ff; }
  nav.top .right { display: flex; gap: 10px; align-items: center; justify-self: end; }

  /* Hamburger button — mobile only */
  .nav-toggle {
    display: none;
    width: 40px; height: 40px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.2);
    background: transparent;
    align-items: center; justify-content: center;
    cursor: pointer; padding: 0;
    transition: border-color .2s ease;
  }
  .nav-toggle:hover { border-color: #7b61ff; }
  .nav-toggle span {
    display: block; width: 16px; height: 1.5px; background: #fff; position: relative;
    transition: transform .2s ease, opacity .2s ease;
  }
  .nav-toggle span::before, .nav-toggle span::after {
    content: ""; position: absolute; left: 0; width: 16px; height: 1.5px; background: #fff;
    transition: transform .2s ease;
  }
  .nav-toggle span::before { top: -5px; }
  .nav-toggle span::after  { top:  5px; }
  nav.top.is-open .nav-toggle span { background: transparent; }
  nav.top.is-open .nav-toggle span::before { transform: translateY(5px) rotate(45deg); }
  nav.top.is-open .nav-toggle span::after  { transform: translateY(-5px) rotate(-45deg); }

  /* Mobile dropdown panel */
  .nav-mobile-panel {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    background: rgba(0,0,0,0.92);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding: 16px var(--shell-px) 24px;
  }
  .nav-mobile-panel a {
    display: block;
    padding: 14px 0;
    font-family: "Inter Tight", sans-serif;
    font-weight: 500; font-size: 18px;
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .nav-mobile-panel a:last-child { border-bottom: none; }
  nav.top.is-open .nav-mobile-panel { display: block; }
  nav.top .btn-tutorial {
    display: inline-flex; align-items: center;
    padding: 9px 18px; border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.2); color: #fff;
    font-family: "Inter Tight"; font-weight: 500; font-size: 13.5px;
    transition: all .2s ease;
  }
  nav.top .btn-tutorial:hover { border-color: #7b61ff; color: #7b61ff; }
  nav.top .btn-login {
    display: inline-flex; align-items: center;
    padding: 9px 22px; border-radius: 999px;
    background: #fff; color: #000;
    font-family: "Inter Tight"; font-weight: 600; font-size: 13.5px;
    transition: all .2s ease;
  }
  nav.top .btn-login:hover { background: #7b61ff; }
  /* Inline links shown at ALL viewports — no hamburger anywhere.
     The 3 words 'How / Plans / FAQ' are short enough to fit even on 360px. */
  nav.top .links { display: flex !important; gap: 18px; font-size: 13px; }
  .nav-toggle, .nav-mobile-panel { display: none !important; }
  @media (min-width: 600px) {
    nav.top .links { gap: 24px; font-size: 14px; }
  }
  @media (min-width: 900px) {
    nav.top .links { gap: 36px; font-size: 15px; }
  }
  @media (max-width: 899px) {
    nav.top .btn-tutorial { display: none; }
  }

  /* Utility */
  .grid-feat { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
  .text-balance { text-wrap: balance; }