:root {
      --bg: #050816;
      --bg-2: #080d1f;
      --card: rgba(255,255,255,.075);
      --card-2: rgba(255,255,255,.11);
      --stroke: rgba(255,255,255,.14);
      --stroke-2: rgba(125, 249, 255, .34);
      --text: #f7fbff;
      --muted: #9aa7c7;
      --muted-2: #c5cef0;
      --accent: #7df9ff;
      --accent-2: #8a5cff;
      --accent-3: #00ff9d;
      --warning: #ffcf70;
      --danger: #ff5c9a;
      --shadow: 0 24px 80px rgba(0,0,0,.55);
      --radius: 26px;
      --radius-sm: 18px;
      --container: 1900px;
      --ease: cubic-bezier(.2,.8,.2,1);
      --blur: blur(22px);
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; background: #050816; }
    body {
      margin: 0;
      width: 100%;
      position: relative;
      isolation: isolate;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: var(--text);
      background:
        radial-gradient(circle at 18% -8%, rgba(138,92,255,.34), transparent 31rem),
        radial-gradient(circle at 84% 8%, rgba(125,249,255,.22), transparent 28rem),
        radial-gradient(circle at 52% 104%, rgba(0,255,157,.13), transparent 34rem),
        linear-gradient(180deg, #050816 0%, #070b1a 45%, #050816 100%);
      min-height: 100vh;
      overflow-x: hidden;
    }

    body::before,
    body::after {
      content: "";
      position: fixed;
      left: 50%;
      width: 100vw;
      transform: translateX(-50%);
      pointer-events: none;
    }

    body::before {
      z-index: -3;
      bottom: -100px;
      height: calc(min(66vh, 680px) + 100px);
      background: url("https://offerist.su/system/templates/front/img/auth-v.svg") center bottom / 100vw auto no-repeat;
      opacity: .055;
      mix-blend-mode: screen;
      mask-image: linear-gradient(to top, rgba(0,0,0,.95) 0%, rgba(0,0,0,.5) 56%, transparent 100%);
    }

    body::after {
      z-index: -2;
      top: 0;
      bottom: 0;
      opacity: .75;
      background:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 58px 58px,
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 58px 58px,
        linear-gradient(120deg, transparent 0 46%, rgba(125,249,255,.045) 49%, transparent 52% 100%) 0 0 / 320px 320px,
        radial-gradient(circle at 1px 1px, rgba(255,255,255,.18) 1px, transparent 0) 0 0 / 28px 28px,
        radial-gradient(circle at 22% 18%, rgba(125,249,255,.14), transparent 22rem),
        radial-gradient(circle at 78% 34%, rgba(138,92,255,.13), transparent 24rem),
        linear-gradient(180deg, rgba(255,255,255,.035), transparent 18%, rgba(255,255,255,.02) 72%, transparent);
      mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.72) 12%, rgba(0,0,0,.42) 58%, transparent 94%);
    }

    a { color: inherit; text-decoration: none; }
    img, svg { display: block; max-width: 100%; }
    button { font: inherit; }

    .container {
      width: min(calc(100% - 40px), var(--container));
      margin: 0 auto;
    }

    .noise-glow {
      position: fixed;
      width: 500px;
      height: 500px;
      border-radius: 999px;
      pointer-events: none;
      z-index: -1;
      opacity: .45;
      transform: translate3d(var(--mx, 50vw), var(--my, 30vh), 0) translate(-50%, -50%);
      background: radial-gradient(circle, rgba(125,249,255,.18), rgba(138,92,255,.12) 38%, transparent 70%);
      filter: blur(8px);
      transition: transform .18s ease-out;
    }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 50;
      backdrop-filter: blur(22px);
      background: rgba(5,8,22,.64);
      border-bottom: 1px solid rgba(255,255,255,.08);
    }

    .nav {
      min-height: 76px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      letter-spacing: -.04em;
      font-size: 12px;
      font-weight: 950;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: #dffcff;
    }

    .brand-mark {
      width: 40px;
      height: 40px;
      display: grid;
      place-items: center;
      border-radius: 14px;
      background: linear-gradient(135deg, rgba(125,249,255,.95), rgba(138,92,255,.95));
      box-shadow: 0 0 34px rgba(125,249,255,.26);
      color: #050816;
      font-weight: 950;
    }

    .brand-logo {
      width: clamp(134px, 8.6vw, 178px);
      height: auto;
      filter: drop-shadow(0 0 18px rgba(253,172,11,.18));
    }

    .brand-sub {
      color: var(--muted);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .14em;
      text-transform: uppercase;
      white-space: nowrap;
      margin-left: 2px;
    }

    .brand small {
      display: block;
      color: var(--muted);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
      margin-top: -2px;
    }

    .nav-links {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 7px;
      border: 1px solid rgba(255,255,255,.1);
      background: rgba(255,255,255,.045);
      border-radius: 999px;
    }

    .nav-links a {
      color: var(--muted-2);
      padding: 10px 14px;
      border-radius: 999px;
      font-size: 14px;
      transition: background .25s var(--ease), color .25s var(--ease);
    }

    .nav-links a:hover { background: rgba(255,255,255,.08); color: #fff; }

    .nav-actions {
      display: flex;
      gap: 10px;
      align-items: center;
    }

    .burger {
      display: none;
      width: 44px;
      height: 44px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.06);
      border-radius: 14px;
      color: #fff;
      cursor: pointer;
    }

    .burger span, .burger span::before, .burger span::after {
      display: block;
      width: 18px;
      height: 2px;
      background: currentColor;
      border-radius: 2px;
      margin: auto;
      position: relative;
      transition: transform .25s var(--ease), opacity .25s var(--ease);
    }
    .burger span::before, .burger span::after { content: ""; position: absolute; left: 0; }
    .burger span::before { top: -6px; }
    .burger span::after { top: 6px; }
    .burger.is-open span { transform: rotate(45deg); }
    .burger.is-open span::before { transform: translateY(6px) rotate(90deg); }
    .burger.is-open span::after { opacity: 0; }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-height: 46px;
      padding: 13px 20px;
      border: 0;
      border-radius: 999px;
      color: #fff;
      font-weight: 800;
      letter-spacing: -.01em;
      cursor: pointer;
      transition: transform .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
      position: relative;
      isolation: isolate;
      white-space: nowrap;
    }

    .btn:hover { transform: translateY(-2px); }
    .btn-primary {
      color: #04111b;
      background: linear-gradient(135deg, var(--accent), var(--accent-3));
      box-shadow: 0 16px 46px rgba(0,255,157,.22), 0 0 38px rgba(125,249,255,.18);
    }
    .btn-primary::after {
      content: "";
      position: absolute;
      inset: 2px;
      border-radius: inherit;
      background: linear-gradient(120deg, rgba(255,255,255,.55), transparent 40%, rgba(255,255,255,.18));
      opacity: .6;
      z-index: -1;
    }
    .btn-ghost {
      background: rgba(255,255,255,.07);
      border: 1px solid rgba(255,255,255,.13);
      color: #fff;
    }
    .btn-ghost:hover { border-color: rgba(125,249,255,.55); box-shadow: 0 0 30px rgba(125,249,255,.1); }
    .btn-sm { min-height: 40px; padding: 10px 14px; font-size: 14px; }
    .btn-wide { width: 100%; }

    .pill {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      border: 1px solid rgba(125,249,255,.28);
      background: rgba(125,249,255,.08);
      color: #dffcff;
      border-radius: 999px;
      padding: 8px 12px;
      font-size: 13px;
      font-weight: 800;
      letter-spacing: .01em;
    }
    .pill::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: var(--accent-3);
      box-shadow: 0 0 18px var(--accent-3);
    }

    .section { padding: 106px 0; position: relative; }
    .section.compact { padding: 78px 0; }
    section.breadcrumbs.section, .is-page .section {padding: 30px 0;}

  /* Контейнер */
  .detail__content.is-text {
    max-width: 1000px;
    margin: 0 auto;
    line-height: 1.6;
    color: #2d3436;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  }

  /* Заголовки */
  .detail__content.is-text h1,
  .detail__content.is-text h2,
  .detail__content.is-text h3,
  .detail__content.is-text h4,
  .detail__content.is-text h5 {
    font-weight: 700;
    line-height: 1.25;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
  }

  .detail__content.is-text h1 {
    font-size: 2.5rem;
    letter-spacing: -0.02em;
  }

  .detail__content.is-text h2 {
    font-size: 2rem;
    border-bottom: 1px solid #eee;
    padding-bottom: 0.3em;
  }

  .detail__content.is-text h3 {
    font-size: 1.5rem;
  }

  .detail__content.is-text h4 {
    font-size: 1.25rem;
    font-weight: 600;
  }

  .detail__content.is-text h5 {
    font-size: 1.1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #636e72;
  }

  /* Параграфы */
  .detail__content.is-text p {
    font-size: 1.125rem;
    margin-bottom: 1.25em;
    word-wrap: break-word;
  }

  /* Строчные элементы */
  .detail__content.is-text span {
    /* Базовый span обычно наследует стили p, 
      здесь можно задать специфику, если нужно */
  }

  .detail__content.is-text span.highlight {
    background-color: #fff9c4;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
  }

  .detail__content.is-text span.meta {
    font-size: 0.9rem;
    color: #b2bec3;
  }

  /* Адаптивность */
  @media (max-width: 768px) {
    .detail__content.is-text h1 { font-size: 2rem; }
    .detail__content.is-text h2 { font-size: 1.75rem; }
    .detail__content.is-text p { font-size: 1rem; }
  }

    .hero {
      min-height: calc(100vh - 76px);
      display: grid;
      align-items: center;
      padding: 40px 0;
      overflow: hidden;
    }

    .hero-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(420px, .86fr);
      gap: 58px;
      align-items: center;
    }

    .eyebrow {
      color: var(--accent);
      font-weight: 900;
      letter-spacing: .18em;
      text-transform: uppercase;
      font-size: 12px;
      margin-bottom: 18px;
    }

    h1, h2, h3, p { margin-top: 0; }
    h1 {
      font-size: clamp(44px, 7vw, 75px);
      line-height: .94;
      letter-spacing: -.075em;
      margin: 30px 0;
      max-width: 820px;
    }

    h1 .gradient-text, h2 .gradient-text {
      background: linear-gradient(100deg, #fff 0%, #bffbff 28%, #9d83ff 65%, #00ff9d 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      filter: drop-shadow(0 0 28px rgba(125,249,255,.13));
    }

    .lead {
      color: var(--muted-2);
      font-size: clamp(18px, 2vw, 22px);
      line-height: 1.62;
      max-width: 720px;
      margin-bottom: 30px;
    }

    .hero-actions {
      display: flex;
      align-items: center;
      gap: 14px;
      flex-wrap: wrap;
      margin: 30px 0 24px;
    }

    .microcopy {
      color: var(--muted);
      font-size: 14px;
      display: flex;
      gap: 10px;
      align-items: center;
      flex-wrap: wrap;
    }
    .microcopy b { color: #fff; }

    .stat-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      margin-top: 36px;
      max-width: 730px;
    }

    .stat-card {
      padding: 18px;
      border-radius: 22px;
      background: rgba(255,255,255,.055);
      border: 1px solid rgba(255,255,255,.1);
      backdrop-filter: blur(16px);
    }
    .stat-card strong {
      display: block;
      font-size: clamp(26px, 4vw, 42px);
      line-height: 1;
      letter-spacing: -.055em;
      margin-bottom: 8px;
    }
    .stat-card span { color: var(--muted); font-size: 13px; line-height: 1.35; display: block; }

    .hero-visual { position: relative; min-height: 640px; perspective: 1000px; }
    .orb {
      position: absolute;
      inset: 4% 7% auto auto;
      width: 400px;
      aspect-ratio: 1;
      border-radius: 50%;
      background:
        radial-gradient(circle at 35% 25%, rgba(255,255,255,.95), transparent 10%),
        radial-gradient(circle at 40% 35%, rgba(125,249,255,.88), transparent 28%),
        radial-gradient(circle at 72% 72%, rgba(138,92,255,.92), transparent 38%),
        radial-gradient(circle at 42% 80%, rgba(0,255,157,.52), transparent 38%),
        #111827;
      box-shadow: inset -20px -24px 60px rgba(0,0,0,.46), 0 36px 130px rgba(125,249,255,.18), 0 0 100px rgba(138,92,255,.18);
      animation: float 7s var(--ease) infinite alternate;
      filter: saturate(1.15);
    }
    .orb::before, .orb::after {
      content: "";
      position: absolute;
      inset: 7%;
      border-radius: inherit;
      border: 1px solid rgba(255,255,255,.28);
      mask-image: linear-gradient(115deg, black, transparent 64%);
      animation: spin 16s linear infinite;
    }
    .orb::after { inset: -7%; border-color: rgba(125,249,255,.22); animation-duration: 24s; animation-direction: reverse; }

    .dashboard {
      position: absolute;
      left: 0;
      bottom: 12px;
      width: min(560px, 100%);
      border: 1px solid rgba(255,255,255,.16);
      background: linear-gradient(180deg, rgba(12,18,42,.8), rgba(8,12,29,.78));
      border-radius: 34px;
      box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.12);
      backdrop-filter: blur(24px);
      overflow: hidden;
      transform: rotateX(3deg) rotateY(-8deg) rotateZ(-1deg);
    }

    .window-bar {
      height: 54px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 18px;
      border-bottom: 1px solid rgba(255,255,255,.1);
      background: rgba(255,255,255,.04);
    }
    .dots { display: flex; gap: 7px; }
    .dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.28); }
    .dot:nth-child(1) { background: #ff5f57; } .dot:nth-child(2) { background: #ffbd2e; } .dot:nth-child(3) { background: #28c840; }
    .window-title { color: var(--muted); font-size: 12px; font-weight: 700; }

    .dashboard-body { padding: 24px; }
    .command {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 16px;
      border: 1px solid rgba(125,249,255,.22);
      background: rgba(125,249,255,.065);
      border-radius: 20px;
      margin-bottom: 18px;
      color: #eaffff;
      font-size: 14px;
      box-shadow: inset 0 0 40px rgba(125,249,255,.035);
    }
    .command-kbd {
      min-width: 38px;
      height: 38px;
      border-radius: 12px;
      display: grid;
      place-items: center;
      color: #06111c;
      font-weight: 950;
      background: linear-gradient(135deg, var(--accent), var(--accent-3));
    }

    .proposal-card {
      border-radius: 24px;
      padding: 18px;
      background: linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.045));
      border: 1px solid rgba(255,255,255,.12);
      margin-bottom: 18px;
    }
    .proposal-top { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
    .proposal-top h3 { margin: 0; font-size: 21px; letter-spacing: -.03em; }
    .status { color: #06111c; font-size: 12px; font-weight: 900; border-radius: 999px; padding: 7px 10px; background: var(--accent-3); }
    .progress-lines { display: grid; gap: 11px; }
    .line { height: 12px; border-radius: 999px; background: rgba(255,255,255,.09); overflow: hidden; }
    .line span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent-2)); animation: load 3s var(--ease) infinite alternate; }
    .line:nth-child(2) span { width: 74%; animation-delay: .25s; } .line:nth-child(3) span { width: 58%; animation-delay: .45s; }

    .mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .mini-card {
      padding: 14px;
      border-radius: 18px;
      background: rgba(0,0,0,.18);
      border: 1px solid rgba(255,255,255,.09);
    }
    .mini-card span { color: var(--muted); display: block; font-size: 12px; margin-bottom: 7px; }
    .mini-card b { font-size: 23px; letter-spacing: -.04em; }
    .mini-card small { color: var(--accent); font-weight: 800; }

    .floating-card {
      position: absolute;
      border: 1px solid rgba(255,255,255,.15);
      background: rgba(8,12,29,.72);
      backdrop-filter: blur(18px);
      border-radius: 22px;
      box-shadow: var(--shadow);
      padding: 16px;
      animation: float 5s var(--ease) infinite alternate;
    }
    .floating-card.one {
		right: 27px;
		top: 111px;
		width: 230px;
		animation-delay: .4s;
		z-index: 9999;
	}
    .floating-card.two { left: 38px; top: -85px; width: 230px; animation-delay: 1s; }
    .floating-card.three { right: 16px; bottom: -100px; width: 212px; animation-delay: .7s; }
    .floating-card strong { display: block; font-size: 28px; letter-spacing: -.04em; margin-bottom: 5px; }
    .floating-card span { color: var(--muted); font-size: 13px; line-height: 1.38; }

    .marquee-wrap {
      border-block: 1px solid rgba(255,255,255,.09);
      background: rgba(255,255,255,.035);
      overflow: hidden;
      backdrop-filter: var(--blur)
    }
    .marquee {
      display: flex;
      width: max-content;
      animation: marquee 28s linear infinite;
    }
    .marquee span {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 18px 26px;
      color: var(--muted-2);
      font-weight: 800;
      white-space: nowrap;
    }
    .marquee i {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 18px var(--accent);
    }

    .section-head {
      display: grid;
      grid-template-columns: minmax(0, .9fr) minmax(280px, .48fr);
      gap: 36px;
      align-items: end;
      margin-bottom: 44px;
    }
    .section-kicker {
      color: var(--accent);
      text-transform: uppercase;
      letter-spacing: .18em;
      font-size: 12px;
      font-weight: 950;
      margin-bottom: 14px;
    }
    h2 {
      font-size: clamp(34px, 5vw, 64px);
      line-height: 1;
      letter-spacing: -.06em;
      margin-bottom: 0;
    }
    .section-copy {
      color: var(--muted-2);
      line-height: 1.7;
      margin: 0;
      font-size: 17px;
    }

    .pain-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .glass-card {
      position: relative;
      border: 1px solid rgba(255,255,255,.12);
      background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035));
      border-radius: var(--radius);
      padding: 26px;
      box-shadow: 0 18px 60px rgba(0,0,0,.28);
      overflow: hidden;
      transition: transform .32s var(--ease), border-color .32s var(--ease), background .32s var(--ease);
      backdrop-filter: var(--blur)
    }
    .glass-card::before {
      content: "";
      position: absolute;
      inset: -1px;
      background: radial-gradient(circle at var(--x, 50%) var(--y, 0%), rgba(125,249,255,.18), transparent 34%);
      opacity: 0;
      transition: opacity .32s var(--ease);
      pointer-events: none;
    }
    .glass-card:hover { transform: translateY(-7px); border-color: rgba(125,249,255,.3); }
    .glass-card:hover::before { opacity: 1; }
    .glass-card > * { position: relative; z-index: 1; }
    .icon-chip {
      width: 48px;
      height: 48px;
      border-radius: 17px;
      display: grid;
      place-items: center;
      background: linear-gradient(135deg, rgba(125,249,255,.18), rgba(138,92,255,.18));
      border: 1px solid rgba(255,255,255,.13);
      margin-bottom: 18px;
      font-size: 12px;
      font-weight: 950;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: #dffcff;
    }
    .glass-card h3 { font-size: 22px; letter-spacing: -.03em; margin-bottom: 12px; }
    .glass-card p { color: var(--muted-2); line-height: 1.62; margin: 0; }

    .compare {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      align-items: stretch;
      margin-top: 22px;
    }
    .compare-card {
      border-radius: var(--radius);
      padding: 30px;
      border: 1px solid rgba(255,255,255,.11);
      background: rgba(255,255,255,.045);
    }
    .compare-card.good {
      background: linear-gradient(135deg, rgba(125,249,255,.12), rgba(0,255,157,.07));
      border-color: rgba(125,249,255,.25);
    }
    .compare-card h3 { font-size: 28px; letter-spacing: -.045em; margin-bottom: 22px; }
    .check-list { display: grid; gap: 13px; padding: 0; margin: 0; list-style: none; }
    .check-list li { color: var(--muted-2); display: flex; gap: 11px; align-items: flex-start; line-height: 1.5; }
    .check-list li::before {
      content: "✦";
      color: var(--accent);
      flex: 0 0 auto;
      margin-top: 1px;
    }
    .compare-card.bad .check-list li::before { content: "×"; color: var(--danger); font-weight: 900; }

    .timeline {
      position: relative;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
    }
    .step-card { min-height: 330px; display: flex; flex-direction: column; justify-content: space-between; }
    .step-number {
      font-size: 13px;
      color: #06111c;
      font-weight: 950;
      display: inline-flex;
      width: 42px;
      height: 42px;
      border-radius: 14px;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, var(--accent), var(--accent-3));
      margin-bottom: 48px;
      box-shadow: 0 0 30px rgba(125,249,255,.22);
    }
    .step-card h3 { font-size: 23px; line-height: 1.12; }

    .bento {
      display: grid;
      grid-template-columns: 1.2fr .8fr 1fr;
      grid-auto-rows: minmax(245px, auto);
      gap: 16px;
    }
    .bento .wide { grid-column: span 2; }
    .bento .tall { grid-row: span 2; }
    .feature-visual {
      margin-top: 20px;
      display: grid;
      gap: 10px;
    }
    .chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
    .tag {
      display: inline-flex;
      padding: 8px 10px;
      border-radius: 999px;
      color: var(--muted-2);
      background: rgba(255,255,255,.07);
      border: 1px solid rgba(255,255,255,.1);
      font-size: 13px;
      font-weight: 800;
    }
    .mock-table {
      border: 1px solid rgba(255,255,255,.1);
      border-radius: 18px;
      overflow: hidden;
      background: rgba(0,0,0,.16);
      margin-top: 18px;
    }
    .mock-row {
      display: grid;
      grid-template-columns: 1fr .6fr .7fr;
      gap: 12px;
      padding: 12px 14px;
      border-bottom: 1px solid rgba(255,255,255,.08);
      color: var(--muted-2);
      font-size: 13px;
    }
    .mock-row:last-child { border-bottom: 0; }
    .mock-row b { color: #fff; }

    .template-stage {
      display: grid;
      grid-template-columns: .8fr 1.2fr;
      gap: 18px;
      align-items: center;
    }
    .template-list { display: grid; gap: 12px; }
    .template-tab {
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.055);
      border-radius: 18px;
      padding: 16px;
      text-align: left;
      color: #fff;
      cursor: pointer;
      transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
    }
    .template-tab:hover, .template-tab.is-active { background: rgba(125,249,255,.09); border-color: rgba(125,249,255,.34); transform: translateX(5px); }
    .template-tab strong { display: block; margin-bottom: 4px; }
    .template-tab span { color: var(--muted); font-size: 13px; line-height: 1.45; }

    .pdf-preview {
      position: relative;
      min-height: 560px;
      border-radius: 34px;
      background: linear-gradient(135deg, rgba(255,255,255,.1), rgba(255,255,255,.045));
      border: 1px solid rgba(255,255,255,.14);
      box-shadow: var(--shadow);
      padding: 18px;
      overflow: hidden;
    }
    .pdf-sheet {
      width: min(370px, 86%);
      min-height: 500px;
      margin: 24px auto;
      border-radius: 24px;
      background: #f5f8ff;
      color: #0a1020;
      padding: 22px;
      box-shadow: 0 24px 80px rgba(0,0,0,.42);
      transform: rotate(-2.3deg);
      transition: transform .45s var(--ease);
    }
    .pdf-preview:hover .pdf-sheet { transform: rotate(0deg) translateY(-4px); }
    .pdf-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 26px; }
    .pdf-logo { width: 42px; height: 42px; border-radius: 14px; background: linear-gradient(135deg, #121a35, #8a5cff); }
    .pdf-price { color: #0a1020; font-weight: 950; font-size: 24px; letter-spacing: -.05em; }
    .pdf-title { font-size: 28px; line-height: 1; letter-spacing: -.06em; font-weight: 950; margin-bottom: 12px; }
    .pdf-sub { color: #4b5675; line-height: 1.45; margin-bottom: 22px; }
    .pdf-blocks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .pdf-block { height: 86px; border-radius: 18px; background: linear-gradient(135deg, rgba(10,16,32,.1), rgba(138,92,255,.13)); }
    .pdf-lines { display: grid; gap: 10px; margin-top: 20px; }
    .pdf-lines span { height: 9px; border-radius: 99px; background: rgba(10,16,32,.12); }

    .roles-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
    .role-card {
      min-height: 260px;
      display: grid !important;
      grid-template-columns: 220px minmax(0, 1fr);
      align-items: center;
      gap: 24px;
      overflow: hidden;
      padding: 24px 30px 24px 18px;
    }
    .role-card__visual {
      width: 210px;
      height: 210px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0;
      pointer-events: none;
      filter: drop-shadow(0 26px 36px rgba(0, 245, 208, .15)) drop-shadow(0 14px 24px rgba(138, 92, 255, .22));
    }
    .role-card__visual img {
      display: block;
      width: 210px;
      max-width: 100%;
      height: auto;
      object-fit: contain;
    }
    .role-card__content {
      min-width: 0;
      display: grid;
      gap: 12px;
      align-content: center;
    }
    .role-card__content h3,
    .role-card__content p {
      position: relative;
      z-index: 1;
      margin: 0;
    }

    .pricing-top {
      display: grid;
      justify-items: center;
      text-align: center;
      gap: 18px;
      margin-bottom: 34px;
    }
    .pricing-title {
      display: grid;
      justify-items: center;
      gap: 12px;
    }
    .pricing-title h2 { max-width: 920px; }
    .pricing-subtitle {
      max-width: 760px;
      margin: 0;
      color: var(--muted-2);
      font-size: 17px;
      line-height: 1.55;
    }
    .billing-toggle {
      position: relative;
      isolation: isolate;
      display: flex;
      align-items: center;
      padding: 7px;
      border-radius: 999px;
      background: rgba(255,255,255,.065);
      border: 1px solid rgba(255,255,255,.14);
      gap: 6px;
      flex-wrap: wrap;
      justify-content: center;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 18px 60px rgba(0,0,0,.28);
      max-width: 100%;
    }
    .billing-slider {
      position: absolute;
      left: 0;
      top: 0;
      z-index: 0;
      width: 0;
      height: 0;
      border-radius: 999px;
      background: linear-gradient(135deg, var(--accent), var(--accent-3));
      box-shadow: 0 14px 36px rgba(125,249,255,.24), 0 0 0 1px rgba(255,255,255,.26) inset;
      transition: width .42s var(--ease), height .42s var(--ease), transform .42s var(--ease);
      will-change: width, height, transform;
    }
    .billing-toggle button {
      position: relative;
      z-index: 1;
      border: 0;
      background: transparent;
      color: var(--muted-2);
      cursor: pointer;
      border-radius: 999px;
      padding: 10px 14px;
      font-weight: 900;
      font-size: 13px;
      white-space: nowrap;
      transition: color .25s var(--ease), transform .25s var(--ease);
    }
    .billing-toggle button:hover { color: #fff; transform: translateY(-1px); }
    .billing-toggle button.is-active { color: #06111c; }

    .pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
    .price-card {
      display: flex;
      flex-direction: column;
      min-height: 520px;
    }
    .price-card.highlight {
      border-color: rgba(125,249,255,.42);
      background: linear-gradient(180deg, rgba(125,249,255,.12), rgba(138,92,255,.08));
      box-shadow: 0 28px 100px rgba(125,249,255,.12);
    }
    .price-card .badge {
      align-self: flex-start;
      color: #06111c;
      border-radius: 999px;
      padding: 7px 10px;
      font-weight: 950;
      background: linear-gradient(135deg, var(--accent), var(--accent-3));
      font-size: 12px;
      margin-bottom: 16px;
    }
    .price-card h3 { font-size: 28px; letter-spacing: -.045em; margin-bottom: 6px; }
    .price-card p { color: var(--muted); line-height: 1.45; min-height: 44px; }
    .price {
      margin: 18px 0 18px;
      font-size: 42px;
      letter-spacing: -.06em;
      font-weight: 950;
    }
    .price small { color: var(--muted); font-size: 14px; letter-spacing: 0; font-weight: 700; }
    .price-card ul {
      list-style: none;
      padding: 0;
      margin: 0 0 24px;
      display: grid;
      gap: 12px;
      color: var(--muted-2);
    }
    .price-card li { display: flex; gap: 9px; line-height: 1.45; }
    .price-card li::before { content: "✓"; color: var(--accent-3); font-weight: 950; }
    .price-card .btn { margin-top: auto; }

    .cta-band {
      position: relative;
      border-radius: 42px;
      padding: clamp(34px, 6vw, 70px);
      overflow: hidden;
      border: 1px solid rgba(125,249,255,.27);
      background:
        radial-gradient(circle at 10% 20%, rgba(125,249,255,.26), transparent 24rem),
        radial-gradient(circle at 78% 80%, rgba(138,92,255,.36), transparent 26rem),
        linear-gradient(135deg, rgba(255,255,255,.11), rgba(255,255,255,.045));
      box-shadow: var(--shadow);
      backdrop-filter: var(--blur)
    }
    .cta-band::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(115deg, transparent, rgba(255,255,255,.14), transparent);
      transform: translateX(-110%);
      animation: shine 6s ease-in-out infinite;
    }
    .cta-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: center; }
    .cta-inner h2 { max-width: 840px; }
    .cta-inner p { color: var(--muted-2); font-size: 18px; line-height: 1.6; padding: 20px 0; max-width: 690px; }
    .cta-band--with-photo {
      padding-top: clamp(48px, 5vw, 72px);
      padding-right: clamp(24px, 4vw, 52px);
      padding-bottom: 0;
      overflow: visible;
    }
    .cta-inner--with-photo {
      grid-template-columns: minmax(0, 1fr) minmax(500px, 640px);
      gap: clamp(10px, 2vw, 32px);
      align-items: stretch;
      min-height: clamp(500px, 34vw, 610px);
    }
    .cta-copy {
      max-width: 760px;
      align-self: stretch;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding-bottom: clamp(34px, 6vw, 70px);
    }
    .cta-founder {
      position: relative;
      align-self: stretch;
      min-height: 100%;
      margin-top: clamp(-112px, -6vw, -56px);
      margin-bottom: 0;
      transform: translateX(-92px);
      display: flex;
      align-items: flex-end;
      justify-content: center;
      overflow: visible;
    }
    .cta-founder-stage {
      position: relative;
      isolation: isolate;
      width: min(100%, 700px);
      min-height: calc(100% + clamp(82px, 7vw, 132px));
      height: calc(100% + clamp(82px, 7vw, 132px));
      display: flex;
      align-items: flex-end;
      justify-content: center;
      padding-top: 0;
    }
    .cta-founder-stage::before {
      content: "";
      position: absolute;
      inset: 7% 8% 6%;
      border-radius: 46px;
      background:
        radial-gradient(circle at 28% 26%, rgba(125,249,255,.28), transparent 0 34%),
        radial-gradient(circle at 68% 30%, rgba(138,92,255,.28), transparent 0 40%),
        radial-gradient(circle at 50% 96%, rgba(0,0,0,.65), transparent 0 48%);
      filter: blur(10px);
      opacity: .98;
      z-index: 1;
      pointer-events: none;
    }
    .cta-founder-stage::after {
      content: "";
      position: absolute;
      left: 10%;
      right: 10%;
      bottom: 0;
      height: 26px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(0,0,0,.6) 0, rgba(0,0,0,.22) 45%, transparent 76%);
      filter: blur(12px);
      z-index: 2;
      pointer-events: none;
    }
    .cta-founder-light {
      position: absolute;
      pointer-events: none;
      mix-blend-mode: screen;
      z-index: 4;
    }
    .cta-founder-light--cyan {
      left: 10%;
      top: 10%;
      width: 55%;
      height: 40%;
      background: radial-gradient(circle, rgba(125,249,255,.18) 0, rgba(125,249,255,.08) 36%, transparent 72%);
      filter: blur(18px);
    }
    .cta-founder-light--violet {
      right: 4%;
      top: 26%;
      width: 44%;
      height: 50%;
      background: radial-gradient(circle, rgba(138,92,255,.24) 0, rgba(138,92,255,.1) 36%, transparent 74%);
      filter: blur(22px);
    }
    .cta-founder-photo {
      position: relative;
      z-index: 3;
      display: block;
      width: auto;
      max-width: none;
      height: clamp(655px, 48vw, 860px);
      margin-bottom: 0;
      object-fit: contain;
      object-position: center bottom;
      filter:
        brightness(1.02)
        contrast(1.05)
        saturate(1.06)
        drop-shadow(0 34px 76px rgba(125,249,255,.18))
        drop-shadow(0 16px 54px rgba(138,92,255,.20));
    }

    .final-signup-section { padding-top: 28px; }
    .registration-card {
      position: relative;
      overflow: hidden;
      display: grid;
      grid-template-columns: minmax(0, 1.05fr) minmax(420px, .78fr);
      gap: clamp(24px, 4vw, 56px);
      align-items: center;
      border-radius: 46px;
      padding: clamp(28px, 5vw, 64px);
      border: 1px solid rgba(125,249,255,.32);
      background:
        radial-gradient(circle at 12% 12%, rgba(125,249,255,.3), transparent 24rem),
        radial-gradient(circle at 88% 92%, rgba(138,92,255,.38), transparent 28rem),
        linear-gradient(135deg, rgba(255,255,255,.13), rgba(255,255,255,.045));
      box-shadow: 0 34px 120px rgba(0,0,0,.52), 0 0 80px rgba(125,249,255,.09);
      backdrop-filter: var(--blur)
    }
    .registration-card::before {
      content: "";
      position: absolute;
      left: 50%;
      right: auto;
      bottom: -100px;
      width: 100vw;
      height: calc(76% + 100px);
      transform: translateX(-50%);
      opacity: .055;
      mix-blend-mode: screen;
      mask-image: linear-gradient(to top, rgba(0,0,0,.95), rgba(0,0,0,.36) 58%, transparent 100%);
      pointer-events: none;
    }
    .registration-card::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(125,249,255,.16), transparent 22rem);
      pointer-events: none;
    }
    .registration-content,
    .signup-form { position: relative; z-index: 1; }
    .registration-content h2 { max-width: 850px; }
    .registration-content p {
      max-width: 760px;
      margin: 18px 0 0;
      color: var(--muted-2);
      font-size: clamp(17px, 1.4vw, 21px);
      line-height: 1.65;
    }
    .trial-badges {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 26px;
    }
    .trial-badges span {
      border-radius: 999px;
      padding: 9px 12px;
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.14);
      color: var(--muted-2);
      font-weight: 850;
      font-size: 13px;
    }
    .trial-badges span:first-child {
      color: #06111c;
      background: linear-gradient(135deg, var(--accent), var(--accent-3));
      border-color: transparent;
    }
    .mini-proof {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      margin-top: 28px;
    }
    .mini-proof div {
      min-height: 92px;
      border-radius: 22px;
      padding: 16px;
      background: rgba(5,8,22,.4);
      border: 1px solid rgba(255,255,255,.12);
    }
    .mini-proof strong { display: block; font-size: 22px; letter-spacing: -.04em; color: #fff; }
    .mini-proof small { display: block; margin-top: 6px; color: var(--muted); line-height: 1.35; }
    .signup-form {
      display: grid;
      gap: 14px;
      border-radius: 30px;
      padding: clamp(20px, 3vw, 30px);
      background: rgba(5,8,22,.74);
      border: 1px solid rgba(255,255,255,.14);
      box-shadow: 0 24px 80px rgba(0,0,0,.32);
      backdrop-filter: blur(22px);
    }
    .signup-form h3 {
      margin: 0 0 2px;
      font-size: 24px;
      letter-spacing: -.04em;
    }
    .signup-form .form-note {
      margin: 0 0 8px;
      color: var(--muted);
      line-height: 1.45;
    }
    .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }
    .signup-form label {
      display: grid;
      gap: 7px;
      color: var(--muted-2);
      font-size: 13px;
      font-weight: 800;
    }
    .signup-form input {
      width: 100%;
      border: 1px solid rgba(255,255,255,.14);
      border-radius: 16px;
      background: rgba(255,255,255,.07);
      color: #fff;
      padding: 14px 15px;
      outline: none;
      transition: border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
    }
    .signup-form input::placeholder { color: rgba(197,206,240,.5); }
    .signup-form input:focus {
      border-color: rgba(125,249,255,.6);
      box-shadow: 0 0 0 4px rgba(125,249,255,.12);
      background: rgba(255,255,255,.09);
    }
    .signup-form .btn { width: 100%; justify-content: center; margin-top: 4px; }
    .privacy-note {
      margin: 0;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.5;
    }
    .privacy-note a { color: var(--accent); text-decoration: underline; text-decoration-color: rgba(125,249,255,.35); text-underline-offset: 3px; }

    .faq { display: grid; gap: 12px; max-width: 920px; margin: 0 auto; }
    .faq-item {
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 22px;
      background: rgba(255,255,255,.055);
      overflow: hidden;
    }
    .faq-q {
      width: 100%;
      display: flex;
      justify-content: space-between;
      gap: 20px;
      align-items: center;
      border: 0;
      background: transparent;
      color: #fff;
      padding: 20px 22px;
      cursor: pointer;
      text-align: left;
      font-weight: 900;
      font-size: 17px;
    }
    .faq-q span { color: var(--accent); font-size: 24px; transition: transform .25s var(--ease); }
    .faq-a {
      max-height: 0;
      overflow: hidden;
      transition: max-height .3s var(--ease);
    }
    .faq-a p { margin: 0; padding: 0 22px 22px; color: var(--muted-2); line-height: 1.65; }
    .faq-item.is-open .faq-a { max-height: 460px; }
    .faq-item.is-open .faq-q span { transform: rotate(45deg); }

    .seo-grid {
      display: grid;
      grid-template-columns: 1.1fr .9fr .9fr;
      gap: 18px;
      align-items: stretch;
    }

    .seo-card h3,
    .seo-card h4,
    .seo-card h5,
    .seo-card h6 {
      margin: 0 0 12px;
      letter-spacing: -.03em;
    }

    .seo-card h4 { font-size: 21px; }
    .seo-card h5 { font-size: 17px; color: var(--accent); }
    .seo-card h6 {
      font-size: 13px;
      line-height: 1.55;
      color: var(--muted-2);
      text-transform: uppercase;
      letter-spacing: .12em;
    }

    .seo-card p { margin: 0 0 18px; color: var(--muted-2); line-height: 1.7; }

    .keyword-cloud {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 22px;
    }

    .keyword-cloud span {
      padding: 9px 12px;
      border: 1px solid rgba(255,255,255,.1);
      background: rgba(255,255,255,.045);
      border-radius: 999px;
      color: var(--muted-2);
      font-size: 13px;
    }

    .footer {
      padding: 56px 0 36px;
      border-top: 1px solid rgba(255,255,255,.09);
      color: var(--muted);
    }
    .footer-grid {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 36px;
      align-items: start;
    }
    .footer-links { display: flex; flex-wrap: wrap; gap: 14px; justify-content: flex-end; }
    .footer a { color: var(--muted-2); }
    .footer a:hover { color: #fff; }
    .legal { margin-top: 30px; font-size: 13px; line-height: 1.65; color: rgba(197,206,240,.72); }

    .reveal {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity .7s var(--ease), transform .7s var(--ease);
    }
    .reveal.is-visible { opacity: 1; transform: translateY(0); }

    @keyframes float { from { transform: translate3d(0,0,0); } to { transform: translate3d(0,-18px,0); } }
    @keyframes spin { to { transform: rotate(360deg); } }
    @keyframes load { from { width: 48%; } to { width: 94%; } }
    @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
    @keyframes shine { 0%, 38% { transform: translateX(-115%); } 55%, 100% { transform: translateX(115%); } }


    /* Product screenshots: lightweight, responsive and clickable */
    .screen-link {
      position: relative;
      display: block;
      overflow: hidden;
      border-radius: 24px;
      border: 1px solid rgba(255,255,255,.14);
      background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.035));
      box-shadow: 0 22px 70px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.1);
      color: inherit;
      transform: translateZ(0);
    }

    .screen-link::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 2;
      pointer-events: none;
      background:
        linear-gradient(120deg, rgba(255,255,255,.2), transparent 20%, transparent 72%, rgba(125,249,255,.14)),
        radial-gradient(circle at var(--x, 50%) var(--y, 0%), rgba(125,249,255,.2), transparent 34%);
      opacity: .62;
      transition: opacity .28s var(--ease);
    }

    .screen-link:hover::before { opacity: .95; }

	.screen-link img {
		width: 100%;
		height: auto;
		display: block;
		object-fit: cover;
		transition: transform .42s var(--ease), filter .42s var(--ease);
	}

    .screen-link:hover img { transform: scale(1.025); filter: saturate(1.08) contrast(1.02); }

    .screen-label,
    .zoom-cue {
      position: absolute;
      z-index: 3;
      border: 1px solid rgba(255,255,255,.18);
      backdrop-filter: blur(16px);
      background: rgba(5,8,22,.62);
      box-shadow: 0 16px 40px rgba(0,0,0,.32);
    }

    .screen-label {
      left: 14px;
      bottom: 14px;
      max-width: calc(100% - 28px);
      border-radius: 16px;
      padding: 10px 12px;
      color: #fff;
      font-weight: 900;
      line-height: 1.25;
      font-size: 13px;
    }

    .zoom-cue {
      top: 12px;
      right: 12px;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      border-radius: 999px;
      padding: 8px 10px;
      color: #dffcff;
      font-size: 12px;
      font-weight: 900;
      opacity: 0;
      transform: translateY(-6px);
      transition: opacity .25s var(--ease), transform .25s var(--ease);
    }

    .zoom-cue::before { content: "+"; color: var(--accent); font-size: 16px; line-height: 1; }
    .screen-link:hover .zoom-cue,
    .screen-link:focus-visible .zoom-cue { opacity: 1; transform: translateY(0); }

    .hero-screens {
      position: absolute;
      inset: 0;
      transform-style: preserve-3d;
    }

    .hero-screen-main {
      position: absolute;
      left: 0;
      bottom: 26px;
      width: min(760px, 92%);
      transform: rotateX(3deg) rotateY(-8deg) rotateZ(-1deg);
      border-radius: 34px;
      box-shadow: var(--shadow), 0 0 70px rgba(125,249,255,.12);
    }

    .hero-screen-main img { aspect-ratio: 692 / 389; }

    .hero-screen-side {
      position: absolute;
      width: min(370px, 48%);
      border-radius: 26px;
    }

	.hero-screen-side-a {
		top: 32px;
		left: 104px;
		transform: rotate(-3.5deg);
		box-shadow: 0 26px 80px rgba(0, 0, 0, .44), 0 0 52px rgba(138, 92, 255, .16);
	}

    .hero-screen-side-b {
      right: 0;
      bottom: 56px;
      transform: rotate(4deg);
      box-shadow: 0 26px 80px rgba(0,0,0,.44), 0 0 52px rgba(0,255,157,.12);
    }

    .interface-note {
      position: absolute;
      right: 10px;
      top: -70px;
      width: min(270px, 42%);
      padding: 18px;
      border-radius: 24px;
      border: 1px solid rgba(125,249,255,.28);
      background: rgba(8,12,29,.72);
      box-shadow: var(--shadow);
      backdrop-filter: blur(18px);
      color: var(--muted-2);
      line-height: 1.5;
      font-size: 14px;
    }

    .interface-note b { color: #fff; display: block; margin-bottom: 6px; font-size: 18px; letter-spacing: -.03em; }

    .step-card { gap: 18px; }
    .step-copy { margin: 0; }
    .step-shot { margin-top: auto; border-radius: 18px; }
    .step-shot .screen-label { display: none; }
    .step-shot .zoom-cue { opacity: 1; transform: none; padding: 7px 9px; }

    .interface-showcase {
      position: relative;
      overflow: hidden;
    }

    .interface-showcase::before {
      content: "";
      position: absolute;
      inset: 11% auto auto 50%;
      width: min(980px, 72vw);
      height: 340px;
      transform: translateX(-50%);
      pointer-events: none;
      background: radial-gradient(circle, rgba(125,249,255,.16), rgba(138,92,255,.1) 42%, transparent 70%);
      filter: blur(22px);
      opacity: .7;
    }

    .showcase-grid {
      position: relative;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px;
      align-items: stretch;
      margin-bottom: 18px;
    }

    .showcase-grid .screen-link { min-height: 100%; }
    .showcase-grid .screen-link img { height: 100%; min-height: 360px; object-fit: cover; }

    .showcase-copy {
      border: 1px solid rgba(255,255,255,.12);
      background: linear-gradient(135deg, rgba(125,249,255,.1), rgba(138,92,255,.08));
      border-radius: 34px;
      padding: clamp(26px, 4vw, 48px);
      box-shadow: var(--shadow);
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .showcase-copy h3 {
      font-size: clamp(30px, 4vw, 54px);
      line-height: 1;
      letter-spacing: -.055em;
      margin: 0 0 18px;
    }

    .showcase-copy p {
      color: var(--muted-2);
      line-height: 1.72;
      font-size: 17px;
      margin: 0 0 20px;
    }

    .screen-flow {
      position: relative;
      display: grid;
      grid-template-columns: repeat(4, minmax(290px, 1fr));
      gap: 16px;
    }

    .screen-flow .screen-link { border-radius: 22px; }
    .screen-flow img { aspect-ratio: 718 / 403; }

    .template-screens {
      position: relative;
      min-height: 600px;
      border-radius: 36px;
      border: 1px solid rgba(255,255,255,.12);
      background:
        radial-gradient(circle at 20% 15%, rgba(125,249,255,.18), transparent 22rem),
        radial-gradient(circle at 86% 80%, rgba(138,92,255,.2), transparent 22rem),
        rgba(255,255,255,.045);
      box-shadow: var(--shadow);
      padding: 22px;
      overflow: hidden;
    }

    .template-screens .screen-link:first-child {
      width: min(640px, 88%);
      margin: 34px auto 0;
      transform: rotate(-1.6deg);
      border-radius: 28px;
    }

    .template-screens .screen-link:last-child {
      position: absolute;
      width: min(430px, 48%);
      right: 22px;
      bottom: 24px;
      transform: rotate(3deg);
      border-radius: 24px;
    }

    .lightbox {
      position: fixed;
      inset: 0;
      z-index: 1000;
      display: grid;
      place-items: center;
      padding: 28px;
      background: rgba(2,4,12,.82);
      backdrop-filter: blur(18px);
    }

    .lightbox[hidden] { display: none; }

    .lightbox-inner {
      position: relative;
      width: min(1320px, 96vw);
      max-height: 92vh;
      display: grid;
      gap: 14px;
    }

    .lightbox img {
      max-width: 100%;
      max-height: 82vh;
      margin: 0 auto;
      border-radius: 24px;
      border: 1px solid rgba(255,255,255,.2);
      box-shadow: 0 30px 120px rgba(0,0,0,.7);
      background: #fff;
      object-fit: contain;
    }

    .lightbox-caption {
      color: var(--muted-2);
      text-align: center;
      margin: 0;
      font-weight: 800;
      line-height: 1.45;
    }

    .lightbox-close {
      position: absolute;
      top: -18px;
      right: -18px;
      width: 46px;
      height: 46px;
      border: 1px solid rgba(255,255,255,.2);
      border-radius: 999px;
      background: rgba(255,255,255,.1);
      color: #fff;
      font-size: 28px;
      line-height: 1;
      cursor: pointer;
      backdrop-filter: blur(16px);
      transition: transform .25s var(--ease), background .25s var(--ease);
    }

    .lightbox-close:hover { transform: scale(1.06); background: rgba(255,255,255,.16); }

/* Dynamic rendering helpers */
[data-render]:empty::before {
  content: "";
}
.no-js-note {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 13px;
}

/* Catalog Specific Styles */
.catalog-layout {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 40px;
    align-items: start;
}

.filter-sidebar {
    position: sticky;
    top: 100px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--stroke);
    border-radius: var(--radius);
    padding: 24px;
}

.search-input-wrapper {
    position: relative;
    margin-bottom: 24px;
}

.search-input-wrapper input {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--stroke);
    padding: 14px 18px;
    border-radius: 999px;
    color: #fff;
    outline: none;
    transition: border-color 0.3s var(--ease);
}

.search-input-wrapper input:focus {
    border-color: var(--accent);
}

.filter-category-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.filter-item {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-size: 14px;
    color: var(--muted-2);
    transition: color 0.2s var(--ease);
}

.filter-item:hover {
    color: #fff;
}

.filter-item input[type="checkbox"] {
    appearance: none;
    width: 18px;
    height: 18px;
    border: 1px solid var(--stroke);
    border-radius: 5px;
    background: rgba(255,255,255,0.05);
    cursor: pointer;
    position: relative;
}

.filter-item input[type="checkbox"]:checked {
    background: var(--accent);
    border-color: var(--accent);
}

.filter-item input[type="checkbox"]:checked::after {
    content: "✓";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #050816;
    font-size: 12px;
    font-weight: 900;
}

.templates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
}

.template-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.template-card .screen-label {
    padding: 4px 8px;
}

@media (max-width: 1200px) {
    .catalog-layout {
        grid-template-columns: 1fr;
    }
    .filter-sidebar {
        position: static;
    }
    .templates-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
}
/* Problem section illustrations */
.pain-card {
  min-height: 214px;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(140px, .95fr);
  gap: 18px;
  align-items: center;
  padding: 26px 18px 22px 26px;
}
.pain-card h3 { margin-top: 0; }
.pain-card__copy { min-width: 0; }
.pain-card__visual {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 142px;
  margin: -10px -8px -10px 0;
  pointer-events: none;
}
.pain-card__visual img {
  width: 100%;
  max-width: 230px;
  height: 100%;
  max-height: 178px;
  object-fit: contain;
  filter: drop-shadow(0 18px 34px rgba(0, 0, 0, .32));
}
.compare-card {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: stretch;
  overflow: hidden;
  padding: 24px 28px 30px;
  backdrop-filter: var(--blur)
}
.compare-card__copy {
  min-width: 0;
  order: 2;
}
.compare-card__visual {
  order: 1;
  min-height: 330px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: -8px -12px 0;
  pointer-events: none;
}
.compare-card__visual img {
  width: 100%;
  max-width: 560px;
  max-height: 345px;
  object-fit: contain;
  filter: drop-shadow(0 24px 44px rgba(0, 0, 0, .42));
}

/* 20260707 explicit legal and marketing consent on public signup forms */
.signup-consent {
  display: grid !important;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 10px !important;
  align-items: flex-start;
  color: var(--muted-2);
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.45;
}
.signup-consent input[type="checkbox"] {
  width: 18px !important;
  height: 18px;
  margin-top: 1px;
  accent-color: var(--accent);
}
.signup-consent a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.signup-consent--required span::after {
  content: ' *';
  color: var(--accent);
}
.legal-document h1 {
  margin-top: 34px;
  margin-bottom: 16px;
  color: #fff;
  font-size: 24px;
  line-height: 1.25;
}
.legal-document table {
  width: 100%;
  margin: 18px 0 26px;
  border-collapse: collapse;
  color: rgba(237, 243, 255, .92);
}
.legal-document th,
.legal-document td {
  border: 1px solid rgba(255,255,255,.10);
  padding: 12px 14px;
  vertical-align: top;
}
.legal-document th {
  background: rgba(255,255,255,.07);
  font-weight: 700;
}
.legal-document ol,
.legal-document ul {
  padding-left: 24px;
}
.legal-document li {
  margin-bottom: 8px;
}
.legal-document p {
  margin-bottom: 12px;
}

/* 20260707 shared public blog detail layout for blog and legal pages */
.public-blog-detail-section {
  padding-top: 28px;
  padding-bottom: 74px;
}
.public-blog-detail-container {
  max-width: 1440px;
}
.public-blog-detail-head {
  display: grid;
  gap: 16px;
  width: 100%;
  max-width: none;
  margin: 0 0 24px;
}
.public-blog-detail-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  min-width: 0;
}
.public-blog-detail-breadcrumbs {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  min-width: 0;
  margin: 0;
  color: rgba(222, 232, 255, .68);
  font-size: 14px;
  line-height: 1.45;
  font-weight: 700;
}
.public-blog-detail-breadcrumbs a,
.public-blog-detail-breadcrumbs span {
  min-width: 0;
  max-width: 100%;
}
.public-blog-detail-breadcrumbs a {
  color: rgba(222, 232, 255, .78);
  text-decoration: none;
  transition: color .18s ease;
}
.public-blog-detail-breadcrumbs a:hover {
  color: var(--accent);
}
.public-blog-detail-breadcrumbs span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.public-blog-detail-topline {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
  margin-left: auto;
}
.public-blog-detail-back,
.public-blog-detail-date {
  margin: 0;
}
.public-blog-detail-back.btn,
.public-blog-detail-date.tag {
  min-height: 40px;
  border-radius: 999px;
  border-color: rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .055);
  box-shadow: none;
}
.public-blog-detail-date.tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 15px;
  color: rgba(255, 255, 255, .88);
  font-size: 13px;
  font-weight: 900;
}
.public-blog-detail-title {
  width: 100%;
  max-width: none;
  margin: 2px 0 0;
  line-height: .98;
  letter-spacing: -.065em;
}
.public-blog-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(280px, .82fr);
  gap: 22px;
  align-items: start;
}
.public-blog-detail-card {
  min-width: 0;
  overflow: hidden;
}
.public-blog-detail-content {
  color: var(--muted-2) !important;
  line-height: 1.78 !important;
  font-size: 17px !important;
}
.public-blog-detail-content,
.public-blog-detail-content * {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}
.public-blog-detail-content > :first-child {
  margin-top: 0 !important;
}
.public-blog-detail-sidebar {
  min-width: 0;
  position: sticky;
  top: 84px;
  align-self: start;
}
.detail__content a:not(.btn) {
  color: #35d6ff;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  font-weight: 800;
  transition: color .18s ease, text-decoration-color .18s ease;
}
.detail__content a:not(.btn):hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}
.public-blog-sidebar-card {
  overflow: hidden;
}
.public-blog-sidebar-card__scroll {
  max-height: calc(100vh - 112px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 14px;
  margin-right: -2px;
  scrollbar-width: thin;
  scrollbar-color: rgba(53,214,255,.45) rgba(255,255,255,.06);
}
.public-blog-sidebar-card__scroll::-webkit-scrollbar {
  width: 8px;
}
.public-blog-sidebar-card__scroll::-webkit-scrollbar-track {
  background: rgba(255,255,255,.06);
  border-radius: 999px;
}
.public-blog-sidebar-card__scroll::-webkit-scrollbar-thumb {
  background: rgba(53,214,255,.45);
  border-radius: 999px;
}
.public-blog-sidebar-card__scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(53,214,255,.65);
}
.public-blog-neighbours {
  display: grid;
  gap: 14px;
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.10);
}
.public-blog-neighbour-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  background: rgba(255,255,255,.04);
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.public-blog-neighbour-card:hover {
  transform: translateY(-2px);
  border-color: rgba(53,214,255,.42);
  background: rgba(53,214,255,.08);
}
.public-blog-neighbour-card img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 14px;
}
.public-blog-neighbour-card__label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.public-blog-neighbour-card__title {
  color: #fff;
  font-size: 15px;
  line-height: 1.35;
  font-weight: 900;
}
.public-blog-legal-lead {
  width: 100%;
  max-width: 980px;
  margin: 0;
  color: rgba(222, 232, 255, .78);
  font-size: 18px;
  line-height: 1.72;
}
.public-blog-legal-content.legal-document h1,
.public-blog-legal-content.legal-document h2,
.public-blog-legal-content.legal-document h3,
.public-blog-legal-content.legal-document h4 {
  color: #fff !important;
  margin: 1.45em 0 .7em !important;
  line-height: 1.22 !important;
}
.public-blog-legal-content.legal-document h1 {
  font-size: clamp(26px, 2vw, 34px) !important;
}
.public-blog-legal-content.legal-document h2 {
  font-size: clamp(22px, 1.65vw, 28px) !important;
}
.public-blog-legal-content.legal-document h3 {
  font-size: clamp(19px, 1.35vw, 24px) !important;
}
.public-blog-legal-content.legal-document p {
  margin: 0 0 14px !important;
}
.public-blog-legal-content.legal-document ol,
.public-blog-legal-content.legal-document ul {
  margin: 0 0 18px !important;
  padding-left: 24px !important;
}
.public-blog-legal-content.legal-document li {
  margin-bottom: 9px !important;
}
.public-blog-legal-content.legal-document table {
  display: block;
  width: 100%;
  overflow-x: auto;
  margin: 18px 0 28px;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.035);
  color: rgba(237, 243, 255, .92) !important;
}
.public-blog-legal-content.legal-document th,
.public-blog-legal-content.legal-document td {
  min-width: 180px;
  border: 1px solid rgba(255,255,255,.08);
  padding: 14px 16px;
  vertical-align: top;
  background: transparent;
  color: rgba(237, 243, 255, .92) !important;
}
.public-blog-legal-content.legal-document th {
  color: #fff !important;
  font-weight: 800;
  background: rgba(255,255,255,.07);
}
.public-blog-legal-content.legal-document td p,
.public-blog-legal-content.legal-document td strong,
.public-blog-legal-content.legal-document td b,
.public-blog-legal-content.legal-document td span,
.public-blog-legal-content.legal-document td li,
.public-blog-legal-content.legal-document th p,
.public-blog-legal-content.legal-document th strong,
.public-blog-legal-content.legal-document th b,
.public-blog-legal-content.legal-document th span,
.public-blog-legal-content.legal-document th li {
  color: inherit !important;
}
@media (max-width: 980px) {
  .public-blog-detail-section {
    padding-top: 24px;
    padding-bottom: 56px;
  }
  .public-blog-detail-layout {
    grid-template-columns: 1fr;
  }
  .public-blog-detail-head,
  .public-blog-detail-title {
    width: 100%;
    max-width: none;
  }
  .public-blog-detail-sidebar {
    position: relative;
    top: auto;
  }
  .public-blog-sidebar-card {
    overflow: visible;
  }
  .public-blog-sidebar-card__scroll {
    max-height: none;
    overflow: visible;
    padding-right: 0;
    margin-right: 0;
  }
}
@media (max-width: 720px) {
  .public-blog-detail-section {
    padding-top: 18px;
    padding-bottom: 46px;
  }
  .public-blog-detail-head {
    gap: 12px;
    margin-bottom: 18px;
  }
  .public-blog-detail-meta-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }
  .public-blog-detail-breadcrumbs {
    font-size: 13px;
  }
  .public-blog-detail-breadcrumbs span:last-child {
    white-space: normal;
  }
  .public-blog-detail-topline {
    width: 100%;
    justify-content: flex-start;
    gap: 8px;
    margin-left: 0;
  }
  .public-blog-detail-back.btn,
  .public-blog-detail-date.tag {
    min-height: 38px;
    font-size: 12px;
  }
  .public-blog-detail-title {
    margin-top: 4px;
    font-size: clamp(38px, 12vw, 58px);
    line-height: 1;
    letter-spacing: -.055em;
  }
  .public-blog-detail-card {
    padding: 20px;
    border-radius: 24px;
  }
  .public-blog-detail-content {
    font-size: 16px !important;
    line-height: 1.7 !important;
  }
}