:root {
      --bg: #120406;
      --bg-2: #1a080b;
      --surface: rgba(14, 31, 57, .72);
      --surface-2: rgba(17, 39, 73, .86);
      --text: #fff8f8;
      --muted: #c7aeb2;
      --line: rgba(255,255,255,.10);
      --primary: #ff2d3f;
      --primary-2: #ff6a3d;
      --accent: #d61f69;
      --success: #ffb86b;
      --shadow: 0 30px 80px rgba(0, 0, 0, .38);
      --radius-xl: 32px;
      --radius-lg: 24px;
      --radius-md: 18px;
      --container: 1180px;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: var(--text);
      background:
        radial-gradient(circle at 15% 10%, rgba(255,45,63,.20), transparent 26%),
        radial-gradient(circle at 85% 18%, rgba(255,106,61,.14), transparent 25%),
        radial-gradient(circle at 50% 85%, rgba(214,31,105,.16), transparent 28%),
        linear-gradient(180deg, #120406 0%, #160507 45%, #120406 100%);
      min-height: 100vh;
      overflow-x: hidden;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      background-image:
        linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
      background-size: 36px 36px;
      mask-image: linear-gradient(to bottom, rgba(0,0,0,.55), transparent 88%);
      z-index: -1;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    button, input {
      font: inherit;
    }

    img {
      display: block;
      max-width: 100%;
    }

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

    .section {
      padding: 112px 0;
      position: relative;
    }

    .section-tag {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 9px 14px;
      border: 1px solid rgba(255,106,61,.24);
      background: rgba(255,106,61,.08);
      color: #ffd5d8;
      border-radius: 999px;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      margin-bottom: 18px;
    }

    .section-tag::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--primary-2), var(--primary));
      box-shadow: 0 0 16px var(--primary-2);
    }

    .section-title {
      font-family: "Plus Jakarta Sans", sans-serif;
      font-size: clamp(34px, 5vw, 58px);
      line-height: 1.05;
      letter-spacing: -.045em;
      max-width: 760px;
    }

    .section-copy {
      color: var(--muted);
      font-size: 18px;
      line-height: 1.75;
      max-width: 680px;
      margin-top: 18px;
    }

    .glass {
      background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
      border: 1px solid var(--line);
      box-shadow: var(--shadow);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
    }

    header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 100;
      padding: 18px 0;
      transition: .3s ease;
    }

    header.scrolled {
      background: rgba(6,17,31,.82);
      backdrop-filter: blur(18px);
      border-bottom: 1px solid var(--line);
      padding: 12px 0;
    }

    .nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      font-family: "Plus Jakarta Sans", sans-serif;
      font-size: 22px;
      font-weight: 800;
      letter-spacing: -.03em;
    }

    .brand-mark {
      width: 42px;
      height: 42px;
      border-radius: 14px;
      position: relative;
      background: linear-gradient(145deg, #ff2d3f, #ff6a3d);
      box-shadow: 0 12px 30px rgba(255,45,63,.35);
      overflow: hidden;
    }

    .brand-mark::before,
    .brand-mark::after {
      content: "";
      position: absolute;
      border-radius: 8px;
      background: rgba(255,255,255,.92);
    }

    .brand-mark::before {
      width: 18px;
      height: 7px;
      left: 9px;
      top: 10px;
      transform: rotate(-15deg);
    }

    .brand-mark::after {
      width: 18px;
      height: 7px;
      right: 8px;
      bottom: 10px;
      transform: rotate(-15deg);
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 30px;
      color: #dbc2c5;
      font-size: 14px;
      font-weight: 600;
    }

    .nav-links a {
      position: relative;
      transition: color .25s ease;
    }

    .nav-links a:hover {
      color: white;
    }

    .nav-links a::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -8px;
      width: 100%;
      height: 2px;
      transform: scaleX(0);
      transform-origin: right;
      background: linear-gradient(90deg, var(--primary), var(--primary-2));
      transition: transform .25s ease;
    }

    .nav-links a:hover::after {
      transform: scaleX(1);
      transform-origin: left;
    }

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

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-height: 50px;
      padding: 0 20px;
      border-radius: 15px;
      border: 1px solid transparent;
      font-weight: 700;
      cursor: pointer;
      transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
    }

    .btn:hover {
      transform: translateY(-3px);
    }

    .btn-primary {
      background: linear-gradient(135deg, var(--primary), var(--primary-2));
      color: #230507;
      box-shadow: 0 18px 42px rgba(255,45,63,.28);
    }

    .btn-primary:hover {
      box-shadow: 0 22px 56px rgba(255,45,63,.42);
    }

    .btn-secondary {
      color: white;
      border-color: var(--line);
      background: rgba(255,255,255,.05);
    }

    .menu-btn {
      display: none;
      width: 46px;
      height: 46px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: rgba(255,255,255,.05);
      color: white;
      cursor: pointer;
    }

    .hero {
      padding: 160px 0 80px;
      min-height: 100vh;
      display: flex;
      align-items: center;
      position: relative;
    }

    .hero-grid {
      display: grid;
      grid-template-columns: 1.06fr .94fr;
      align-items: center;
      gap: 64px;
    }

    .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 10px 15px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.045);
      color: #e4cdd0;
      font-size: 13px;
      font-weight: 700;
      margin-bottom: 26px;
    }

    .hero-badge span {
      color: #160507;
      background: var(--success);
      border-radius: 999px;
      padding: 5px 9px;
      font-size: 11px;
    }

    .hero h1 {
      font-family: "Plus Jakarta Sans", sans-serif;
      font-size: clamp(54px, 7.3vw, 92px);
      line-height: .98;
      letter-spacing: -.065em;
      max-width: 760px;
    }

    .hero h1 .gradient {
      background: linear-gradient(100deg, #fff 0%, #7fdcff 40%, #4f8fff 75%, #b98dff 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .hero p {
      margin-top: 28px;
      color: var(--muted);
      font-size: 19px;
      line-height: 1.75;
      max-width: 650px;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      margin-top: 34px;
    }

    .play-icon {
      width: 20px;
      height: 20px;
      display: inline-grid;
      place-items: center;
    }

    .hero-proof {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 24px;
      margin-top: 34px;
      color: #e1c3c7;
      font-size: 13px;
      font-weight: 600;
    }

    .proof-item {
      display: flex;
      align-items: center;
      gap: 9px;
    }

    .proof-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--success);
      box-shadow: 0 0 13px rgba(255,184,107,.75);
    }

    .hero-visual {
      position: relative;
      min-height: 650px;
      display: grid;
      place-items: center;
    }

    .orb {
      position: absolute;
      width: 510px;
      height: 510px;
      border-radius: 50%;
      background:
        radial-gradient(circle at 35% 30%, rgba(255,106,61,.55), rgba(255,45,63,.23) 42%, rgba(214,31,105,.08) 70%, transparent 72%);
      filter: blur(4px);
      animation: pulse 6s ease-in-out infinite;
    }

    @keyframes pulse {
      0%,100% { transform: scale(.95); opacity: .8; }
      50% { transform: scale(1.05); opacity: 1; }
    }

    .phone {
      width: 305px;
      padding: 10px;
      border-radius: 42px;
      background: linear-gradient(145deg, #2b1115, #0c0304);
      border: 1px solid rgba(255,255,255,.22);
      box-shadow:
        0 60px 100px rgba(0,0,0,.55),
        inset 0 0 0 1px rgba(255,255,255,.06);
      position: relative;
      transform: rotate(4deg);
      animation: floatPhone 5s ease-in-out infinite;
      z-index: 3;
    }

    @keyframes floatPhone {
      0%,100% { transform: translateY(0) rotate(4deg); }
      50% { transform: translateY(-15px) rotate(1deg); }
    }

    .phone::before {
      content: "";
      position: absolute;
      width: 92px;
      height: 24px;
      border-radius: 0 0 16px 16px;
      background: #0c0304;
      top: 7px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 2;
    }

    .phone-screen {
      border-radius: 33px;
      overflow: hidden;
      background: #170608;
      aspect-ratio: 9 / 19.2;
    }

    .phone-screen img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: top center;
    }

    .floating-card {
      position: absolute;
      z-index: 4;
      border-radius: 18px;
      padding: 14px 16px;
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 174px;
      animation: drift 5s ease-in-out infinite;
    }

    .floating-card:nth-of-type(2) { top: 16%; left: 1%; }
    .floating-card:nth-of-type(3) { bottom: 18%; right: -2%; animation-delay: -2s; }
    .floating-card:nth-of-type(4) { top: 38%; right: -8%; animation-delay: -1s; }

    @keyframes drift {
      0%,100% { transform: translateY(0); }
      50% { transform: translateY(-10px); }
    }

    .floating-icon {
      width: 42px;
      height: 42px;
      border-radius: 13px;
      display: grid;
      place-items: center;
      font-size: 21px;
      background: linear-gradient(135deg, rgba(255,45,63,.23), rgba(255,106,61,.18));
      border: 1px solid rgba(255,106,61,.25);
    }

    .floating-card strong {
      font-size: 13px;
      display: block;
    }

    .floating-card small {
      color: var(--muted);
      font-size: 11px;
      margin-top: 3px;
      display: block;
    }

    .metrics {
      margin-top: 28px;
      border-radius: var(--radius-xl);
      padding: 28px;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
    }

    .metric {
      padding: 18px;
      text-align: center;
      border-right: 1px solid var(--line);
    }

    .metric:last-child {
      border-right: none;
    }

    .metric strong {
      font-family: "Plus Jakarta Sans", sans-serif;
      display: block;
      font-size: 31px;
      letter-spacing: -.04em;
    }

    .metric span {
      color: var(--muted);
      font-size: 13px;
      margin-top: 7px;
      display: block;
    }

    .feature-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 18px;
      margin-top: 46px;
    }

    .feature-card {
      border-radius: var(--radius-lg);
      padding: 28px;
      min-height: 310px;
      position: relative;
      overflow: hidden;
      transition: transform .25s ease, border-color .25s ease;
    }

    .feature-card:hover {
      transform: translateY(-10px);
      border-color: rgba(255,106,61,.32);
    }

    .feature-card::after {
      content: "";
      position: absolute;
      width: 150px;
      height: 150px;
      border-radius: 50%;
      right: -55px;
      bottom: -55px;
      background: radial-gradient(circle, rgba(255,45,63,.28), transparent 68%);
    }

    .feature-icon {
      width: 58px;
      height: 58px;
      border-radius: 18px;
      display: grid;
      place-items: center;
      font-size: 27px;
      background: linear-gradient(145deg, rgba(255,45,63,.22), rgba(255,106,61,.12));
      border: 1px solid rgba(255,106,61,.22);
      margin-bottom: 26px;
    }

    .feature-card h3 {
      font-family: "Plus Jakarta Sans", sans-serif;
      font-size: 22px;
      letter-spacing: -.025em;
    }

    .feature-card p {
      color: var(--muted);
      line-height: 1.65;
      font-size: 14px;
      margin-top: 12px;
    }

    .chips {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 22px;
    }

    .chip {
      border-radius: 999px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,.04);
      color: #e1c9cc;
      padding: 7px 10px;
      font-size: 11px;
      font-weight: 700;
    }

    .steps {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 18px;
      margin-top: 48px;
      position: relative;
    }

    .step {
      padding: 28px;
      border-radius: 22px;
      position: relative;
    }

    .step-number {
      width: 42px;
      height: 42px;
      border-radius: 13px;
      display: grid;
      place-items: center;
      color: #160507;
      background: linear-gradient(135deg, var(--primary-2), var(--primary));
      font-weight: 800;
      margin-bottom: 20px;
    }

    .step h3 {
      font-family: "Plus Jakarta Sans", sans-serif;
      font-size: 19px;
    }

    .step p {
      color: var(--muted);
      font-size: 14px;
      line-height: 1.65;
      margin-top: 9px;
    }

    .screens-wrap {
      margin-top: 54px;
      overflow: hidden;
      position: relative;
      padding: 30px 0 55px;
    }

    .screens-track {
      display: flex;
      align-items: center;
      gap: 26px;
      width: max-content;
      animation: marquee 28s linear infinite;
    }

    .screens-wrap:hover .screens-track {
      animation-play-state: paused;
    }

    @keyframes marquee {
      from { transform: translateX(0); }
      to { transform: translateX(calc(-50% - 13px)); }
    }

    .screen-card {
      width: 245px;
      padding: 8px;
      border-radius: 34px;
      background: linear-gradient(145deg, #35161b, #0d0304);
      border: 1px solid rgba(255,255,255,.18);
      box-shadow: 0 30px 70px rgba(0,0,0,.46);
    }

    .screen-card img {
      border-radius: 27px;
      aspect-ratio: 9 / 19.2;
      object-fit: cover;
      object-position: top center;
    }

    .why-grid {
      display: grid;
      grid-template-columns: .9fr 1.1fr;
      align-items: center;
      gap: 70px;
    }

    .privacy-visual {
      border-radius: var(--radius-xl);
      padding: 28px;
      min-height: 520px;
      position: relative;
      overflow: hidden;
      display: grid;
      place-items: center;
    }

    .privacy-visual::before {
      content: "";
      position: absolute;
      inset: 15%;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255,106,61,.24), transparent 66%);
      filter: blur(10px);
    }

    .shield {
      width: 190px;
      height: 220px;
      position: relative;
      z-index: 2;
      clip-path: polygon(50% 0, 92% 17%, 82% 73%, 50% 100%, 18% 73%, 8% 17%);
      background: linear-gradient(145deg, #4bd9ff, #ff2d3f 58%, #7158e8);
      box-shadow: 0 30px 70px rgba(255,45,63,.38);
      display: grid;
      place-items: center;
      font-size: 72px;
    }

    .mini-card {
      position: absolute;
      z-index: 3;
      padding: 14px 16px;
      border-radius: 17px;
      font-size: 13px;
      font-weight: 700;
    }

    .mini-card.one { left: 28px; top: 45px; }
    .mini-card.two { right: 24px; bottom: 42px; }
    .mini-card.three { right: 24px; top: 85px; }

    .benefits {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 15px;
      margin-top: 38px;
    }

    .benefit {
      display: flex;
      gap: 13px;
      padding: 18px;
      border-radius: 18px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,.035);
    }

    .check {
      flex: 0 0 28px;
      height: 28px;
      border-radius: 9px;
      display: grid;
      place-items: center;
      color: #160507;
      background: var(--success);
      font-weight: 900;
    }

    .benefit strong {
      font-size: 14px;
      display: block;
    }

    .benefit span {
      display: block;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.5;
      margin-top: 4px;
    }

    .premium-card {
      border-radius: 34px;
      padding: 52px;
      display: grid;
      grid-template-columns: 1.1fr .9fr;
      gap: 48px;
      align-items: center;
      position: relative;
      overflow: hidden;
      background:
        radial-gradient(circle at 90% 25%, rgba(255,106,61,.18), transparent 30%),
        radial-gradient(circle at 10% 90%, rgba(214,31,105,.24), transparent 32%),
        linear-gradient(135deg, rgba(20,41,77,.95), rgba(9,24,47,.92));
    }

    .premium-card::after {
      content: "PRO";
      position: absolute;
      right: -15px;
      top: -45px;
      font-family: "Plus Jakarta Sans", sans-serif;
      font-size: 160px;
      font-weight: 800;
      color: rgba(255,255,255,.025);
      letter-spacing: -.08em;
    }

    .premium-card h2 {
      font-family: "Plus Jakarta Sans", sans-serif;
      font-size: clamp(38px, 5vw, 64px);
      line-height: 1.05;
      letter-spacing: -.05em;
    }

    .premium-card p {
      color: var(--muted);
      line-height: 1.7;
      font-size: 17px;
      margin-top: 18px;
      max-width: 620px;
    }

    .premium-list {
      display: grid;
      gap: 13px;
      position: relative;
      z-index: 2;
    }

    .premium-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 15px 17px;
      border-radius: 15px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,.045);
      color: #f0dadd;
      font-size: 14px;
      font-weight: 600;
    }

    .faq-list {
      margin-top: 46px;
      max-width: 900px;
    }

    .faq-item {
      border-bottom: 1px solid var(--line);
    }

    .faq-question {
      width: 100%;
      border: 0;
      color: white;
      background: transparent;
      padding: 24px 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      text-align: left;
      cursor: pointer;
      font-size: 17px;
      font-weight: 700;
      gap: 20px;
    }

    .faq-plus {
      width: 34px;
      height: 34px;
      border-radius: 11px;
      border: 1px solid var(--line);
      display: grid;
      place-items: center;
      transition: transform .25s ease, background .25s ease;
      flex: 0 0 auto;
    }

    .faq-item.active .faq-plus {
      transform: rotate(45deg);
      background: rgba(255,106,61,.10);
    }

    .faq-answer {
      max-height: 0;
      overflow: hidden;
      transition: max-height .35s ease;
    }

    .faq-answer p {
      color: var(--muted);
      line-height: 1.75;
      padding: 0 52px 24px 0;
    }

    .download-card {
      border-radius: 36px;
      padding: 64px;
      position: relative;
      overflow: hidden;
      text-align: center;
      background:
        radial-gradient(circle at 15% 30%, rgba(255,106,61,.25), transparent 28%),
        radial-gradient(circle at 85% 70%, rgba(214,31,105,.28), transparent 34%),
        linear-gradient(135deg, #6b1320, #21070b);
    }

    .download-card h2 {
      font-family: "Plus Jakarta Sans", sans-serif;
      font-size: clamp(42px, 6vw, 72px);
      line-height: 1.02;
      letter-spacing: -.055em;
      max-width: 800px;
      margin-inline: auto;
    }

    .download-card p {
      color: #d9bcc0;
      font-size: 18px;
      line-height: 1.7;
      max-width: 650px;
      margin: 20px auto 30px;
    }

    footer {
      padding: 40px 0 30px;
      border-top: 1px solid var(--line);
      background: rgba(2,10,18,.35);
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 1.35fr .65fr .65fr .8fr;
      gap: 40px;
    }

    .footer-brand p {
      color: var(--muted);
      max-width: 360px;
      line-height: 1.7;
      margin-top: 18px;
      font-size: 14px;
    }

    .footer-col h4 {
      font-size: 14px;
      margin-bottom: 16px;
    }

    .footer-col a {
      display: block;
      color: var(--muted);
      font-size: 13px;
      margin: 11px 0;
      transition: color .2s ease;
    }

    .footer-col a:hover {
      color: white;
    }

    .copyright {
      border-top: 1px solid var(--line);
      margin-top: 34px;
      padding-top: 22px;
      color: #9f7f84;
      font-size: 12px;
      display: flex;
      justify-content: space-between;
      gap: 18px;
      flex-wrap: wrap;
    }

    .reveal {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity .7s ease, transform .7s ease;
    }

    .reveal.show {
      opacity: 1;
      transform: translateY(0);
    }

    .mobile-menu {
      display: none;
    }

    @media (max-width: 1024px) {
      .hero-grid,
      .why-grid,
      .premium-card {
        grid-template-columns: 1fr;
      }

      .hero-copy {
        text-align: center;
      }

      .hero h1,
      .hero p {
        margin-left: auto;
        margin-right: auto;
      }

      .hero-actions,
      .hero-proof {
        justify-content: center;
      }

      .hero-visual {
        min-height: 610px;
      }

      .feature-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .steps {
        grid-template-columns: repeat(2, 1fr);
      }

      .privacy-visual {
        min-height: 430px;
      }

      .footer-grid {
        grid-template-columns: 1fr 1fr;
      }
    }

    @media (max-width: 760px) {
      .container {
        width: min(calc(100% - 26px), var(--container));
      }

      .section {
        padding: 82px 0;
      }

      .nav-links,
      .nav-actions .btn-secondary {
        display: none;
      }

      .menu-btn {
        display: grid;
        place-items: center;
      }

      .mobile-menu {
        position: fixed;
        inset: 76px 13px auto 13px;
        z-index: 90;
        border-radius: 22px;
        padding: 16px;
        background: rgba(7,20,38,.96);
        border: 1px solid var(--line);
        backdrop-filter: blur(20px);
      }

      .mobile-menu.open {
        display: block;
      }

      .mobile-menu a {
        display: block;
        padding: 13px 12px;
        border-radius: 12px;
        color: #d4dfed;
        font-weight: 600;
      }

      .mobile-menu a:hover {
        background: rgba(255,255,255,.06);
      }

      .hero {
        padding-top: 130px;
      }

      .hero-grid {
        gap: 34px;
      }

      .hero h1 {
        font-size: clamp(48px, 14vw, 70px);
      }

      .hero p {
        font-size: 16px;
      }

      .hero-actions .btn {
        width: 100%;
      }

      .hero-visual {
        min-height: 540px;
      }

      .orb {
        width: 390px;
        height: 390px;
      }

      .phone {
        width: 255px;
      }

      .floating-card {
        transform: scale(.85);
      }

      .floating-card:nth-of-type(2) { left: -7%; }
      .floating-card:nth-of-type(3) { right: -7%; }
      .floating-card:nth-of-type(4) { display: none; }

      .metrics,
      .feature-grid,
      .steps,
      .benefits {
        grid-template-columns: 1fr;
      }

      .metric {
        border-right: none;
        border-bottom: 1px solid var(--line);
      }

      .metric:last-child {
        border-bottom: none;
      }

      .premium-card,
      .download-card {
        padding: 34px 24px;
      }

      .screen-card {
        width: 205px;
      }

      .footer-grid {
        grid-template-columns: 1fr;
      }

      .section-title {
        font-size: 38px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
      }
    }

/* Premium Red Theme Enhancements */
body {
  background:
    radial-gradient(circle at 12% 8%, rgba(255,45,63,.22), transparent 28%),
    radial-gradient(circle at 88% 18%, rgba(255,106,61,.16), transparent 25%),
    radial-gradient(circle at 50% 86%, rgba(214,31,105,.16), transparent 30%),
    linear-gradient(180deg, #120406 0%, #160507 46%, #100305 100%);
}

.brand-mark {
  background: linear-gradient(145deg, #ff2d3f, #ff6a3d 58%, #d61f69);
  box-shadow: 0 12px 30px rgba(255,45,63,.36);
}

.btn-primary {
  background: linear-gradient(135deg, #ff2d3f, #ff6a3d);
  color: #250507;
  box-shadow: 0 18px 42px rgba(255,45,63,.28);
}
.btn-primary:hover {
  box-shadow: 0 22px 56px rgba(255,45,63,.42);
}

.hero h1 .gradient {
  background: linear-gradient(100deg, #fff 0%, #ffb0b7 32%, #ff6a3d 68%, #d61f69 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-visual .orb {
  background:
    radial-gradient(circle at 35% 30%, rgba(255,106,61,.58), rgba(255,45,63,.25) 42%, rgba(214,31,105,.10) 70%, transparent 72%);
}

.feature-card:hover {
  border-color: rgba(255,106,61,.36);
  box-shadow: 0 34px 90px rgba(95,0,15,.42);
}

.section-tag {
  border-color: rgba(255,106,61,.26);
  background: rgba(255,106,61,.08);
  color: #ffd1d5;
}

.section-tag::before {
  background: linear-gradient(135deg, #ff6a3d, #ff2d3f);
  box-shadow: 0 0 16px #ff4a45;
}

.download-card {
  background:
    radial-gradient(circle at 15% 30%, rgba(255,106,61,.24), transparent 28%),
    radial-gradient(circle at 85% 70%, rgba(214,31,105,.28), transparent 34%),
    linear-gradient(135deg, #6b1320, #21070b);
}

.premium-card {
  background:
    radial-gradient(circle at 90% 25%, rgba(255,106,61,.18), transparent 30%),
    radial-gradient(circle at 10% 90%, rgba(214,31,105,.24), transparent 32%),
    linear-gradient(135deg, rgba(92,15,28,.95), rgba(28,6,10,.94));
}

.phone {
  box-shadow:
    0 60px 100px rgba(0,0,0,.58),
    0 0 70px rgba(255,45,63,.14),
    inset 0 0 0 1px rgba(255,255,255,.06);
}

/* StuKit official brand logo and premium SVG icon refinements */
.brand-mark, .brand-mark::before, .brand-mark::after { display:none !important; }
.brand-logo { width: 154px; height: auto; max-height: 48px; object-fit: contain; }
.footer-brand .brand-logo { width: 170px; max-height: 54px; }
.icon-svg { width: 27px; height: 27px; display:block; }
.floating-icon .icon-svg { width: 24px; height: 24px; }
.feature-icon .icon-svg { width: 29px; height: 29px; }
.mini-card { display:flex; align-items:center; gap:9px; }
.mini-icon { width:19px; height:19px; flex:0 0 auto; }
.shield-icon { width:92px; height:92px; }
.check-icon { width:16px; height:16px; }
.premium-check { width:18px; height:18px; flex:0 0 auto; }
.play-svg { width:18px; height:18px; display:block; }
.menu-svg { width:23px; height:23px; display:block; }
@media (max-width:760px){
  .brand-logo { width:128px; max-height:40px; }
  .footer-brand .brand-logo { width:150px; }
}

/* Premium multicolour icon treatment */
.floating-icon,
.feature-icon {
  position: relative;
  isolation: isolate;
  overflow: visible;
  border: 1px solid rgba(255,255,255,.18) !important;
  background: linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.035)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 14px 34px rgba(0,0,0,.28);
}
.floating-icon::before,
.feature-icon::before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: inherit;
  background: radial-gradient(circle, rgba(255,65,92,.22), transparent 67%);
  filter: blur(7px);
  z-index: -1;
  opacity: .8;
}
.feature-card:nth-child(2) .feature-icon::before,
.floating-card:nth-of-type(3) .floating-icon::before { background: radial-gradient(circle, rgba(48,131,255,.3), transparent 67%); }
.feature-card:nth-child(3) .feature-icon::before { background: radial-gradient(circle, rgba(255,121,51,.3), transparent 67%); }
.feature-card:nth-child(4) .feature-icon::before,
.floating-card:nth-of-type(4) .floating-icon::before { background: radial-gradient(circle, rgba(161,69,255,.3), transparent 67%); }
.icon-svg { filter: saturate(1.12) contrast(1.04); transition: transform .3s ease, filter .3s ease; }
.feature-card:hover .icon-svg,
.floating-card:hover .icon-svg { transform: translateY(-2px) scale(1.09) rotate(-2deg); filter: saturate(1.28) drop-shadow(0 7px 12px rgba(0,0,0,.28)); }
.mini-icon, .premium-check, .check-icon { filter: drop-shadow(0 4px 8px rgba(0,0,0,.24)); }
.shield-icon { filter: drop-shadow(0 14px 25px rgba(29,116,255,.38)); }

/* Additional mobile responsiveness */
@media (max-width: 760px){
  body{overflow-x:hidden}
  .container{width:min(calc(100% - 24px),var(--container))}
  header{padding:10px 0}
  header.scrolled{padding:8px 0}
  .nav{gap:10px}
  .nav-actions{gap:8px}
  .nav-actions .btn-primary{display:none}
  .brand-logo{width:118px;max-height:38px}
  .hero{min-height:auto;padding:112px 0 54px}
  .hero-grid{grid-template-columns:1fr;gap:20px}
  .hero-badge{font-size:11px;padding:8px 11px;margin-bottom:18px}
  .hero h1{font-size:clamp(43px,13vw,62px);line-height:1.02}
  .hero p{margin-top:20px;font-size:15px;line-height:1.65}
  .hero-actions{margin-top:26px;gap:10px}
  .hero-actions .btn{min-height:48px;border-radius:13px}
  .hero-proof{margin-top:24px;gap:12px 18px;justify-content:flex-start}
  .hero-visual{min-height:470px;overflow:hidden}
  .orb{width:330px;height:330px}
  .phone{width:226px;border-radius:34px}
  .phone-screen{border-radius:27px}
  .floating-card{min-width:148px;padding:10px 12px;border-radius:15px}
  .floating-card:nth-of-type(2){top:12%;left:-8%}
  .floating-card:nth-of-type(3){bottom:14%;right:-9%}
  .metrics{padding:14px;border-radius:22px;gap:0}
  .metric{padding:16px 10px}
  .section{padding:68px 0}
  .section-title{font-size:clamp(32px,10vw,42px)}
  .section-copy{font-size:15px;line-height:1.65}
  .feature-grid,.steps,.benefits{gap:14px}
  .feature-card{min-height:auto;padding:22px;border-radius:20px}
  .feature-icon{margin-bottom:18px}
  .steps{margin-top:34px}
  .step{padding:22px}
  .screens-wrap{margin-top:34px;padding-top:10px}
  .screen-card{width:180px}
  .privacy-visual{min-height:350px;padding:16px}
  .shield{width:145px;height:170px}
  .mini-card{font-size:11px;padding:10px 11px}
  .premium-card,.download-card{padding:28px 20px;border-radius:24px}
  .premium-card h2,.download-card h2{font-size:clamp(34px,11vw,48px)}
  .faq-question{font-size:15px;padding:20px 0}
  .faq-answer p{padding-right:0;font-size:14px}
  .footer-grid{gap:26px}
  .copyright{flex-direction:column;align-items:flex-start}
}

@media (max-width: 390px){
  .container{width:min(calc(100% - 18px),var(--container))}
  .hero h1{font-size:41px}
  .hero-visual{min-height:430px}
  .phone{width:205px}
  .floating-card:nth-of-type(2){left:-16%}
  .floating-card:nth-of-type(3){right:-16%}
}