:root {
      --screen: #FAF9FD;
      --soft: #F5F2FB;
      --warmTop: #F8F5FD;
      --warmMid: #FBF9FD;
      --surface: #FFFFFF;
      --elevated: #FCFAFF;
      --cardSoft: #F7F4FC;
      --ink: #1F1D2B;
      --text: #3F3B4A;
      --muted: #7B7688;
      --tertiary: #9A96A5;
      --line: #EEEAF5;
      --outline: #E3DDF0;
      --accent: #8174D9;
      --accentDeep: #6254B8;
      --accentBright: #9A8CF2;
      --accentSoft: #EEEAFE;
      --accentUltra: #F7F4FF;
      --green: #54CFC3;
      --greenSoft: #E8FAF8;
      --gold: #F5B84B;
      --goldSoft: #FFF3D8;
      --blue: #6F8FF2;
      --blueSoft: #EEF3FF;
      --score: #FF5A1F;
      --red: #EF6A5B;
      --shadow: 0 24px 70px rgba(190, 182, 212, .16);
      --softShadow: 0 14px 38px rgba(190, 182, 212, .12);
      --r-lg: 36px;
      --r-md: 28px;
      --r-sm: 20px;
      --max: 1180px;
    }

    * {
      box-sizing: border-box
    }

    html {
      scroll-behavior: smooth
    }

    body {
      margin: 0;
      background: radial-gradient(circle at 18% 0%, #F7F4FF 0, #FAF9FD 34%, #FFFFFF 100%);
      font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      color: var(--text);
      line-height: 1.65;
      overflow-x: hidden
    }

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

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

    .wrap {
      width: min(var(--max), calc(100% - 44px));
      margin: 0 auto
    }

    .nav {
      position: sticky;
      top: 0;
      z-index: 30;
      background: rgba(250, 249, 253, .78);
      backdrop-filter: saturate(180%) blur(22px);
      border-bottom: 1px solid rgba(238, 234, 245, .8)
    }

    .nav-inner {
      height: 74px;
      display: flex;
      align-items: center;
      justify-content: space-between
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      font-weight: 850;
      color: var(--ink);
      letter-spacing: -.02em
    }

    .brand img {
      width: 42px;
      height: 42px;
      border-radius: 14px;
      box-shadow: 0 12px 26px rgba(129, 116, 217, .22)
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 24px;
      font-size: 14px;
      color: var(--muted);
      font-weight: 650
    }

    .nav-links a:hover {
      color: var(--accentDeep)
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      border-radius: 999px;
      padding: 13px 20px;
      font-weight: 800;
      border: 1px solid transparent;
      white-space: nowrap;
      transition: .18s ease
    }

    .btn.disabled {
      cursor: default;
      pointer-events: none;
    }

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

    .btn.primary {
      background: var(--accent);
      color: white;
      box-shadow: 0 16px 38px rgba(129, 116, 217, .30)
    }

    .btn.secondary {
      background: rgba(255, 255, 255, .86);
      color: var(--accentDeep);
      border-color: var(--line);
      box-shadow: 0 12px 28px rgba(190, 182, 212, .14)
    }

    .section {
      padding: 86px 0
    }

    .hero {
      padding: 80px 0 70px
    }

    .hero-grid {
      display: grid;
      grid-template-columns: 1fr 1.04fr;
      gap: 52px;
      align-items: center
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 13px;
      border-radius: 999px;
      background: rgba(255, 255, 255, .82);
      border: 1px solid var(--line);
      color: var(--accentDeep);
      font-size: 13px;
      font-weight: 800;
      box-shadow: 0 10px 24px rgba(190, 182, 212, .10)
    }

    .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--green)
    }

    h1 {
      margin: 22px 0 18px;
      color: var(--ink);
      font-size: clamp(44px, 6.2vw, 76px);
      letter-spacing: -.065em;
      line-height: 1.04
    }

    h1 .brand-word {
      color: var(--accentBright)
    }

    .lead {
      font-size: 20px;
      color: var(--muted);
      max-width: 620px;
      margin: 0
    }

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

    .chips {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 24px
    }

    .chip {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 8px 12px;
      border-radius: 999px;
      background: var(--surface);
      border: 1px solid var(--line);
      font-size: 13px;
      color: var(--muted);
      font-weight: 650
    }

    .showcase {
      position: relative;
      min-height: 680px
    }

    .glow {
      position: absolute;
      inset: 24px -8px auto auto;
      width: 88%;
      height: 550px;
      border-radius: 72px;
      background: linear-gradient(135deg, #EEEAFE 0, #E8FAF8 55%, #FFF3D8 100%);
      filter: blur(0);
      opacity: .75;
      transform: rotate(-5deg)
    }

    .phone-img {
      position: absolute;
      width: 310px;
      border-radius: 42px;
      box-shadow: var(--shadow);
      background: #fff;
      border: 8px solid rgba(255, 255, 255, .98);
      overflow: hidden
    }

    .phone-img img {
      border-radius: 32px;
      width: 100%;
      height: auto
    }

    .phone-img.main {
      right: 150px;
      top: 0;
      z-index: 3;
      transform: rotate(-2deg)
    }

    .phone-img.side {
      right: 0;
      top: 104px;
      z-index: 2;
      transform: rotate(4deg);
      opacity: .96
    }

    .floating-card {
      position: absolute;
      left: 0;
      bottom: 58px;
      z-index: 4;
      background: rgba(255, 255, 255, .92);
      border: 1px solid var(--line);
      border-radius: 28px;
      padding: 18px 20px;
      box-shadow: var(--softShadow);
      max-width: 330px
    }

    .floating-card b {
      display: block;
      color: var(--ink);
      font-size: 18px
    }

    .floating-card span {
      color: var(--muted);
      font-size: 14px
    }

    .icon-bubble {
      width: 54px;
      height: 54px;
      border-radius: 19px;
      display: grid;
      place-items: center;
      font-size: 25px;
      flex: 0 0 auto
    }

    .purple {
      background: var(--accentSoft);
      color: var(--accent)
    }

    .green {
      background: var(--greenSoft);
      color: #39BDB2
    }

    .gold {
      background: var(--goldSoft);
      color: var(--gold)
    }

    .blue {
      background: var(--blueSoft);
      color: var(--blue)
    }

    .head {
      text-align: center;
      max-width: 760px;
      margin: 0 auto 42px
    }

    .head h2 {
      font-size: clamp(32px, 4vw, 48px);
      line-height: 1.12;
      letter-spacing: -.045em;
      color: var(--ink);
      margin: 0 0 12px
    }

    .head p {
      margin: 0;
      color: var(--muted);
      font-size: 18px
    }

    .steps {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px
    }

    .step {
      background: rgba(255, 255, 255, .82);
      border: 1px solid var(--line);
      border-radius: var(--r-lg);
      padding: 28px;
      box-shadow: 0 16px 42px rgba(190, 182, 212, .10)
    }

    .step .num {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 34px;
      height: 34px;
      border-radius: 999px;
      background: var(--accentSoft);
      color: var(--accentDeep);
      font-weight: 850;
      margin-bottom: 18px
    }

    .step h3 {
      margin: 0 0 8px;
      color: var(--ink);
      font-size: 22px;
      letter-spacing: -.02em
    }

    .step p {
      margin: 0;
      color: var(--muted)
    }

    .feature-row {
      display: grid;
      grid-template-columns: .88fr 1.12fr;
      gap: 38px;
      align-items: center
    }

    .feature-row.rev {
      grid-template-columns: 1.12fr .88fr
    }

    .panel {
      background: rgba(255, 255, 255, .86);
      border: 1px solid var(--line);
      border-radius: 40px;
      padding: 34px;
      box-shadow: var(--softShadow)
    }

    .panel h2 {
      font-size: clamp(30px, 4vw, 44px);
      line-height: 1.15;
      color: var(--ink);
      letter-spacing: -.045em;
      margin: 0 0 14px
    }

    .panel p {
      font-size: 17px;
      color: var(--muted);
      margin: 0 0 22px
    }

    .list {
      display: grid;
      gap: 12px
    }

    .list-item {
      display: flex;
      gap: 12px;
      align-items: flex-start;
      color: var(--text);
      font-weight: 650
    }

    .list-item:before {
      content: '✓';
      width: 25px;
      height: 25px;
      border-radius: 50%;
      background: var(--greenSoft);
      color: #34B7AA;
      display: grid;
      place-items: center;
      font-weight: 900;
      flex: 0 0 auto
    }

    .shot-stack {
      position: relative;
      min-height: 620px
    }

    .shot {
      position: absolute;
      width: 300px;
      background: #fff;
      border: 8px solid rgba(255, 255, 255, .98);
      border-radius: 42px;
      box-shadow: var(--shadow);
      overflow: hidden
    }

    .shot img {
      border-radius: 32px
    }

    .shot.a {
      left: 0;
      top: 0;
      z-index: 3;
      transform: rotate(-2deg)
    }

    .shot.b {
      right: 0;
      top: 72px;
      z-index: 2;
      transform: rotate(3deg)
    }

    .shot.c {
      left: 48%;
      top: 230px;
      z-index: 1;
      transform: translateX(-50%) rotate(-1deg);
      opacity: .96
    }

    .single-shot {
      min-height: 620px
    }

    .single-shot .shot.a {
      left: 8%;
      top: 0
    }

    .single-shot .shot.b {
      right: 5%;
      top: 130px
    }

    .gallery {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px
    }

    .gallery-card {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 32px;
      padding: 12px;
      box-shadow: var(--softShadow)
    }

    .gallery-card img {
      border-radius: 24px
    }

    .gallery-card figcaption {
      padding: 12px 6px 4px;
      color: var(--ink);
      font-weight: 800;
      text-align: center
    }

    .trust-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px
    }

    .trust-card {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 34px;
      padding: 26px;
      box-shadow: var(--softShadow)
    }

    .trust-card h3 {
      color: var(--ink);
      font-size: 21px;
      margin: 16px 0 8px
    }

    .trust-card p {
      color: var(--muted);
      margin: 0
    }

    .pro {
      border-radius: 46px;
      background: linear-gradient(135deg, #F7F4FF, #FFFFFF 58%, #EEEAFE);
      border: 1px solid var(--line);
      padding: 42px;
      box-shadow: var(--shadow);
      overflow: hidden
    }

    .pro-grid {
      display: grid;
      grid-template-columns: .95fr 1.05fr;
      gap: 34px;
      align-items: center
    }

    .pro .panel {
      background: #fff
    }

    .benefits {
      display: grid;
      gap: 12px
    }

    .benefit {
      display: flex;
      align-items: center;
      gap: 14px;
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: 24px;
      padding: 16px
    }

    .benefit b {
      display: block;
      color: var(--ink)
    }

    .benefit span {
      display: block;
      color: var(--muted);
      font-size: 14px
    }

    .faq {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 16px
    }

    .qa {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 26px;
      padding: 24px;
      box-shadow: 0 10px 26px rgba(190, 182, 212, .08)
    }

    .qa h3 {
      margin: 0 0 8px;
      color: var(--ink);
      font-size: 19px
    }

    .qa p {
      margin: 0;
      color: var(--muted)
    }

    .download {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 42px;
      padding: 40px;
      text-align: center;
      box-shadow: var(--shadow)
    }

    .download img {
      width: 84px;
      height: 84px;
      border-radius: 24px;
      margin: 0 auto 18px;
      box-shadow: 0 18px 38px rgba(129, 116, 217, .22)
    }

    .download h2 {
      margin: 0 0 10px;
      color: var(--ink);
      font-size: 38px;
      letter-spacing: -.04em
    }

    .download p {
      margin: 0 auto 24px;
      color: var(--muted);
      max-width: 560px
    }

    .footer {
      padding: 42px 0 60px;
      color: var(--muted);
      font-size: 14px;
      border-top: 1px solid var(--line)
    }

    .footer-inner {
      display: flex;
      justify-content: space-between;
      gap: 20px;
      align-items: center
    }

    .footer a {
      color: var(--muted)
    }

    .mobile-cta {
      display: none
    }

    .only-mobile {
      display: none
    }

    @media(max-width:1020px) {

      .hero-grid,
      .feature-row,
      .feature-row.rev,
      .pro-grid {
        grid-template-columns: 1fr
      }

      .showcase {
        min-height: 720px
      }

      .phone-img.main {
        left: 6%;
        right: auto
      }

      .phone-img.side {
        right: 8%
      }

      .shot-stack {
        min-height: 820px
      }

      .shot.a {
        left: 8%
      }

      .shot.b {
        right: 8%;
        top: 160px
      }

      .shot.c {
        top: 390px
      }

      .single-shot .shot.a {
        left: 8%
      }

      .single-shot .shot.b {
        right: 8%;
        top: 180px
      }

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

      .trust-grid,
      .steps {
        grid-template-columns: 1fr
      }
    }

    @media(max-width:720px) {
      .wrap {
        width: min(100% - 32px, var(--max))
      }

      .nav-links {
        display: none
      }

      .nav-inner {
        height: 66px
      }

      .hero {
        padding: 48px 0 40px
      }

      h1 {
        font-size: 44px
      }

      .lead {
        font-size: 17px
      }

      .showcase {
        min-height: 620px;
        margin-top: 16px
      }

      .glow {
        width: 100%;
        height: 460px;
        right: 0
      }

      .phone-img {
        width: 245px
      }

      .phone-img.main {
        left: 0;
        top: 0
      }

      .phone-img.side {
        right: 0;
        top: 105px
      }

      .floating-card {
        left: 12px;
        right: 12px;
        bottom: 18px
      }

      .section {
        padding: 60px 0
      }

      .steps {
        gap: 14px
      }

      .panel {
        padding: 26px;
        border-radius: 32px
      }

      .shot-stack {
        min-height: 690px
      }

      .shot {
        width: 235px;
        border-radius: 34px
      }

      .shot img {
        border-radius: 26px
      }

      .shot.a {
        left: 0
      }

      .shot.b {
        right: 0;
        top: 136px
      }

      .shot.c {
        left: 48%;
        top: 335px
      }

      .single-shot .shot.a {
        left: 0
      }

      .single-shot .shot.b {
        right: 0;
        top: 190px
      }

      .gallery {
        grid-template-columns: 1fr 1fr;
        gap: 12px
      }

      .gallery-card {
        border-radius: 24px;
        padding: 8px
      }

      .gallery-card img {
        border-radius: 18px
      }

      .gallery-card figcaption {
        font-size: 13px
      }

      .faq {
        grid-template-columns: 1fr
      }

      .pro {
        padding: 24px;
        border-radius: 34px
      }

      .footer-inner {
        flex-direction: column;
        align-items: flex-start
      }

      .mobile-cta {
        display: flex;
        position: fixed;
        left: 16px;
        right: 16px;
        bottom: 16px;
        z-index: 40
      }

      .mobile-cta .btn {
        width: 100%;
        box-shadow: 0 18px 45px rgba(129, 116, 217, .34)
      }

      .only-mobile {
        display: inline
      }
    }

/* Legal / support pages */
.legal-main { padding: 62px 0 90px; }
.legal-header { max-width: 760px; margin: 0 auto 28px; text-align: center; }
.legal-header h1 { margin: 14px 0 10px; font-size: clamp(38px, 5vw, 58px); line-height: 1.08; letter-spacing: -.055em; color: var(--ink); }
.legal-header p { margin: 0; color: var(--muted); font-size: 17px; }
.fine-print { color: var(--tertiary) !important; font-size: 14px !important; margin-top: 8px !important; }
.legal-content { max-width: 860px; margin: 0 auto; background: rgba(255,255,255,.88); border: 1px solid var(--line); border-radius: 40px; padding: 36px; box-shadow: var(--softShadow); }
.legal-content h2 { margin: 28px 0 10px; color: var(--ink); font-size: 22px; letter-spacing: -.02em; }
.legal-content h2:first-child { margin-top: 0; }
.legal-content p, .legal-content li { color: var(--muted); }
.legal-content a { color: var(--accentDeep); font-weight: 800; }
.legal-content ul { padding-left: 1.2em; }
.support-grid { max-width: 940px; margin: 0 auto 24px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.support-card { background: rgba(255,255,255,.88); border: 1px solid var(--line); border-radius: 34px; padding: 28px; box-shadow: var(--softShadow); }
.support-card h2 { margin: 0 0 10px; color: var(--ink); font-size: 24px; letter-spacing: -.025em; }
.support-card p { color: var(--muted); margin: 0 0 20px; }
@media(max-width:720px){ .legal-main{padding:42px 0 78px}.legal-content{padding:26px;border-radius:32px}.support-grid{grid-template-columns:1fr}.legal-header{text-align:left}.legal-header h1{font-size:42px} }