/* VAR */
  :root{
    --white:        #ffffff;
    --off-white:    #f6f7fa;
    --navy:         #0c1f3f;   /* 2 */
    --navy-deep:    #081733;   /* 3 */
    --navy-soft:    #16305c;   /* 1 */
    --orange:       #ffae34;   /* 4 */
    --orange-dark:  #e2551f;
    --ink:          #0c1f3f;
    --ink-soft:     #55617c;
    --mist:         #aeb8cc;
    --line:         #e4e8f0;
    --line-dark:    rgba(255,255,255,0.12);

    --font-display: 'Sora', sans-serif;
    --font-body:    'Inter', sans-serif;

    --radius-s: 10px;
    --radius-m: 16px;
    --radius-l: 28px;
    --container: 1180px;

    --ease: cubic-bezier(.22,.9,.32,1);
  }

  *,*::before,*::after{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{
    margin:0;
    font-family: var(--font-body);
    color: var(--ink);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
    overflow-x:hidden;
  }
  img,svg{ display:block; max-width:100%; }
  a{ color:inherit; text-decoration:none; }
  ul{ margin:0; padding:0; list-style:none; }
  h1,h2,h3,h4{ font-family:var(--font-display); margin:0; line-height:1.08; letter-spacing:-0.02em; }
  p{ margin:0; }
  button{ font-family:inherit; cursor:pointer; }

  .wrap{
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 32px;
  }
  @media (max-width: 640px){ .wrap{ padding: 0 22px; } }

  .eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-family: var(--font-body);
    font-weight:600;
    font-size:13px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color: var(--orange);
  }

  /* REVEAL */
  .reveal{
    opacity:0;
    transform: translateY(24px);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
  }
  .reveal.in-view{ opacity:1; transform:none; }
  @media (prefers-reduced-motion: reduce){
    .reveal{ opacity:1; transform:none; transition:none; }
    *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; }
  }

  /* BTN */
  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding: 15px 28px;
    border-radius: var(--radius-s);
    font-weight:600;
    font-size:15px;
    border: 1.5px solid transparent;
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .2s ease, border-color .2s ease;
    white-space:nowrap;
  }
  .btn-primary{
    background: var(--orange);
    color: var(--white);
    box-shadow: 0 1px 0 rgba(0,0,0,0.05);
  }
  .btn-primary:hover{
    background: var(--orange-dark);
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(255,106,52,0.32);
  }
  .btn-primary:active{ transform: translateY(0); }
  .btn-ghost-dark{
    background: transparent;
    color: var(--white);
    border-color: var(--line-dark);
  }
  .btn-ghost-dark:hover{
    border-color: var(--orange);
    color: var(--orange);
  }
  .btn-outline{
    background: transparent;
    color: var(--navy);
    border-color: var(--line);
  }
  .btn-outline:hover{
    border-color: var(--navy);
  }
  .btn-block{ width:100%; }

  /* STORE */
  .store-row{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
  }
  .store-btn{
    display:flex;
    align-items:center;
    gap:10px;
    padding: 11px 20px 11px 16px;
    border-radius: var(--radius-s);
    background: var(--white);
    border: 1.5px solid rgba(255,255,255,0.14);
    background: #ffffff;
  }
  .store-btn svg{ width:22px; height:22px; flex-shrink:0; }
  .store-btn .store-text{ display:flex; flex-direction:column; line-height:1.2; }
  .store-btn .store-text small{ font-size:10.5px; color: var(--ink-soft); font-weight:500; }
  .store-btn .store-text strong{ font-size:14.5px; font-family:var(--font-display); color:var(--navy); font-weight:700; }
  .store-btn{ transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
  .store-btn:hover{ transform: translateY(-2px); box-shadow: 0 12px 24px rgba(0,0,0,0.18); }

  /*NAV*/
  .nav{
    position: fixed;
    top:0; left:0; right:0;
    z-index: 500;
    padding: 18px 0;
    transition: background .35s ease, padding .35s ease, box-shadow .35s ease, border-color .35s ease;
    border-bottom: 1px solid transparent;
  }
  .nav.scrolled{
    background: rgba(8,23,51,0.86);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    padding: 12px 0;
    border-bottom: 1px solid var(--line-dark);
  }
  .nav .wrap{ display:flex; align-items:center; justify-content:space-between; }
  .brand{
    display:flex; align-items:center; gap:10px;
    font-family: var(--font-display);
    font-weight:700;
    font-size:19px;
    color: var(--white);
  }
  .brand-logo{
    width: 26px;
    height: 26px;
    border-radius: 6px;
    object-fit: contain;
  }
  .footer-brand .brand-logo{ width: 18px; height: 18px; }
  .nav-links{
    display:flex;
    align-items:center;
    gap:36px;
  }
  .nav-links a{
    font-size:14.5px;
    font-weight:500;
    color: rgba(255,255,255,0.72);
    transition: color .2s ease;
  }
  .nav-links a:hover{ color: var(--white); }
  .nav-cta{ display:flex; align-items:center; gap:18px; }
  .nav-toggle{
    display:none;
    width:38px; height:38px;
    border:none;
    background:transparent;
    position:relative;
  }
  .nav-toggle span{
    position:absolute; left:8px; right:8px; height:2px; background:var(--white);
    transition: transform .3s var(--ease), opacity .3s var(--ease), top .3s var(--ease);
  }
  .nav-toggle span:nth-child(1){ top:13px; }
  .nav-toggle span:nth-child(2){ top:19px; }
  .nav-toggle span:nth-child(3){ top:25px; }
  .nav-toggle.open span:nth-child(1){ top:19px; transform: rotate(45deg); }
  .nav-toggle.open span:nth-child(2){ opacity:0; }
  .nav-toggle.open span:nth-child(3){ top:19px; transform: rotate(-45deg); }

  @media (max-width: 860px){
    .nav-links{
      position:fixed;
      top:0; right:0;
      height:100vh;
      width:min(78vw, 320px);
      background: var(--navy-deep);
      flex-direction:column;
      align-items:flex-start;
      justify-content:center;
      gap:26px;
      padding: 40px;
      transform: translateX(100%);
      transition: transform .4s var(--ease);
      border-left: 1px solid var(--line-dark);
    }
    .nav-links.open{ transform: translateX(0); }
    .nav-links a{ font-size:20px; }
    .nav-cta .btn-primary.desktop-only{ display:none; }
    .nav-toggle{ display:block; }
  }

  /* HERO */
  .hero{
    position:relative;
    background: var(--navy);
    color: var(--white);
    padding: 168px 0 120px;
    overflow:hidden;
  }
  .hero-dots{
    position:absolute; inset:0;
    background-image: radial-gradient(rgba(255,255,255,0.14) 1px, transparent 1px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 78% 30%, black 10%, transparent 72%);
            mask-image: radial-gradient(ellipse 70% 60% at 78% 30%, black 10%, transparent 72%);
    pointer-events:none;
  }
  .hero-h-mark{
    position:absolute;
    top:-140px;
    right:-60px;
    font-family: var(--font-display);
    font-weight:800;
    font-size: 560px;
    line-height:1;
    color: rgba(255,255,255,0.05);
    pointer-events:none;
    user-select:none;
    z-index:0;
  }

  .inline-logo{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5em;
    height: 1.5em;
    margin-right: 0.14em;
    vertical-align: -0.08em;
    border-radius: 0.22em;
    background: var(--orange);
    color: var(--white);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 0.55em;
  }

  .hero .wrap{
    position:relative;
    display:grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 40px;
    align-items:center;
  }
  .hero-copy h1{
    font-size: clamp(38px, 4.6vw, 60px);
    font-weight:700;
    margin: 18px 0 22px;
  }
  .hero-copy h1 em{
    font-style:normal;
    color: var(--orange);
  }
  .hero-copy p.lede{
    font-size:17.5px;
    line-height:1.65;
    color: rgba(255,255,255,0.68);
    max-width: 460px;
    margin-bottom: 34px;
  }
  .hero-actions{ margin-bottom: 30px; }

  /* PHONE */
  .hero-visual{ position:relative; display:flex; justify-content:center; }
  .phone{
    position:relative;
    width: 278px;
    height: 566px;
    background: var(--navy-deep);
    border-radius: 42px;
    border: 8px solid #071026;
    box-shadow: 0 40px 80px -20px rgba(0,0,0,0.55);
    padding: 20px 18px;
    overflow: hidden;
    animation: floatY 6s ease-in-out infinite;
  }
  @keyframes floatY{
    0%,100%{ transform: translateY(0); }
    50%{ transform: translateY(-14px); }
  }
  .phone::before{
    content:"";
    position:absolute;
    top:8px; left:50%; transform:translateX(-50%);
    width:86px; height:20px;
    background:#071026;
    border-radius:12px;
  }
  .phone-head{
    display:flex; align-items:center; justify-content:space-between;
    color: rgba(255,255,255,0.85);
    font-size:12.5px;
  }
  .phone-head span{
    padding-bottom: 10px;
  }


  .float-card{
    position:absolute;
    background: var(--white);
    color: var(--navy);
    border-radius: var(--radius-m);
    padding: 12px 16px;
    box-shadow: 0 18px 34px rgba(4,14,33,0.28);
    display:flex; align-items:center; gap:10px;
  }
  .float-card strong{ display:block; font-family:var(--font-display); font-size:15px; }
  .float-card span{ display:block; font-size:11px; color: var(--ink-soft); }
  .float-card .ico{
    width:34px; height:34px; border-radius:9px;
    display:flex; align-items:center; justify-content:center;
    background: rgba(255,106,52,0.12);
  }
  .float-card.streak{ top: 58px; left: -34px; animation: floatY 5s ease-in-out infinite; }
  .float-card.streak .ico{ background: rgba(255,106,52,0.14); }
  .float-card.focus{ bottom: 46px; right: -30px; animation: floatY 5.6s ease-in-out infinite 0.4s; }
  .float-card.focus .ico{ background: rgba(12,31,63,0.08); }

  @media (max-width: 940px){
    .hero .wrap{ grid-template-columns:1fr; }
    .hero-copy{ text-align:center; }
    .hero-copy p.lede{ margin-left:auto; margin-right:auto; }
    .hero-actions, .store-row{ justify-content:center; }
    .store-row{ display:flex; }
    .hero-proof{ justify-content:center; }
    .hero-visual{ margin-top: 20px; }
    .float-card{ display:none; }
  }
  @media (max-width: 480px){
    .hero{ padding: 140px 0 90px; }
    .phone{ width: 240px; height: 488px; }
  }

  /* STRIP */
  .trust{
    background: var(--off-white);
    padding: 30px 0;
    border-bottom: 1px solid var(--line);
  }
  .trust .wrap{
    display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  }
  .trust-item{ display:flex; align-items:baseline; gap:8px; }
  .trust-item strong{ font-family:var(--font-display); font-size:26px; color:var(--navy); }
  .trust-item span{ font-size:13px; color: var(--ink-soft); }

  /* HEAD */
  .section{ padding: 108px 0; }
  .section-head{ max-width: 620px; margin-bottom: 60px; }
  .section-head h2{ font-size: clamp(28px, 3.4vw, 40px); margin-top:14px; }
  .section-head p{ margin-top:16px; font-size:16px; line-height:1.7; color: var(--ink-soft); }
  .section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }

  /*FEATURES */
  .feature-grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
  }
  .feature-card{
    padding: 34px 28px;
    border-radius: var(--radius-l);
    border: 1px solid var(--line);
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s ease;
  }
  .feature-card:hover{
    transform: translateY(-6px);
    box-shadow: 0 24px 40px rgba(12,31,63,0.10);
    border-color: transparent;
  }
  .feature-ico{
    width:48px; height:48px;
    border-radius: 13px;
    background: var(--navy);
    display:flex; align-items:center; justify-content:center;
    margin-bottom: 22px;
  }
  .feature-ico svg{ width:22px; height:22px; stroke: var(--orange); }
  .feature-card h3{ font-size:19px; margin-bottom:10px; }
  .feature-card p{ font-size:14.5px; line-height:1.7; color: var(--ink-soft); }

  @media (max-width: 900px){ .feature-grid{ grid-template-columns: repeat(2,1fr); } }
  @media (max-width: 600px){ .feature-grid{ grid-template-columns: 1fr; } }

  /* CARDS */
  .how{ background: var(--off-white); }
  .steps{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    position:relative;
    counter-reset: step;
  }
  .steps::before{
    content:"";
    position:absolute;
    top:26px; left:8%; right:8%;
    height:1px;
    background: repeating-linear-gradient(90deg, var(--line) 0 8px, transparent 8px 16px);
  }
  .step{ position:relative; }
  .step-num{
    width:52px; height:52px;
    border-radius:50%;
    background: var(--white);
    border: 1.5px solid var(--line);
    display:flex; align-items:center; justify-content:center;
    font-family: var(--font-display); font-weight:700; font-size:17px; color: var(--navy);
    margin-bottom: 22px;
    position:relative; z-index:1;
    transition: border-color .3s ease, color .3s ease, background .3s ease;
  }
  .step:hover .step-num{ background: var(--orange); border-color: var(--orange); color: var(--white); }
  .step h3{ font-size:18px; margin-bottom:10px; }
  .step p{ font-size:14.5px; line-height:1.7; color: var(--ink-soft); }
  @media (max-width: 760px){
    .steps{ grid-template-columns:1fr; gap:36px; }
    .steps::before{ display:none; }
  }

  /* PHONE INIDE */
  .phone.light-screen{
    background: var(--off-white);
    overflow:hidden;
  }
  .phone.light-screen .phone-head{ color: var(--navy); }
  .device-header .back{ font-size:15px; line-height:1; }
  .device-header h5{
    flex:1; text-align:center; padding-right:15px;
    font-family: var(--font-display); font-weight:600; font-size:12.5px;
  }
  .segment{
    display:flex;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 3px;
    margin-bottom: 10px;
  }
  .segment button{
    flex:1; border:none; background:transparent;
    padding: 7px 0; border-radius:999px;
    font-family: var(--font-body); font-weight:600; font-size:10.5px;
    color: var(--ink-soft);
  }
  .segment button.active{ background: var(--navy); color: var(--white); }
  .chip-row{ display:flex; gap:6px; overflow-x:auto; margin-bottom:12px; }
  .chip{
    flex:0 0 auto;
    background: var(--white);
    border:1px solid var(--line);
    padding: 5px 11px;
    border-radius: 999px;
    font-size:10px; font-weight:500; color: var(--ink-soft);
    white-space:nowrap;
  }
  .offer-item{
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 12px;
    margin-bottom: 10px;
    box-shadow: 0 8px 16px rgba(12,31,63,0.06);
    opacity:0;
    transform: translateY(10px);
    animation: offerIn .6s var(--ease) forwards;
  }
  .offer-item.o1{ animation-delay: .35s; }
  .offer-item.o2{ animation-delay: .75s; }
  @keyframes offerIn{ to{ opacity:1; transform:none; } }
  .offer-item .row-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; margin-bottom:8px; }
  .offer-item .who{ display:flex; gap:8px; align-items:center; }
  .offer-item .avatar{
    width:32px; height:32px; border-radius:50%; flex-shrink:0;
    background: var(--navy); color: var(--white);
    display:flex; align-items:center; justify-content:center;
    font-family: var(--font-display); font-weight:700; font-size:10.5px;
  }
  .offer-item .name{ font-family: var(--font-display); font-weight:700; font-size:12.5px; color: var(--navy); }
  .offer-item .rating{ font-size:10px; color: var(--ink-soft); margin-top:1px; }
  .offer-item .rating .star{ color: var(--orange); }
  .offer-item .price{ text-align:right; flex-shrink:0; }
  .offer-item .price strong{ display:block; font-family: var(--font-display); font-size:13px; color: var(--navy); }
  .offer-item .price span{ font-size:9px; color: var(--ink-soft); }
  .offer-item .desc{
    background: var(--off-white);
    border-radius: 8px;
    padding: 8px 9px;
    font-size:10.5px; line-height:1.5; color: var(--ink-soft);
    margin-bottom: 9px;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }
  .offer-item .actions{ display:flex; gap:8px; }
  .offer-item .compare-btn{
    width:34px; height:32px; flex-shrink:0;
    border-radius:8px; border: 1.5px solid var(--line);
    display:flex; align-items:center; justify-content:center;
    color: var(--navy); font-size:12px;
  }
  .offer-item .detail-btn{
    flex:1; background: var(--navy); color: var(--white);
    border:none; border-radius:8px;
    font-family: var(--font-body); font-weight:600; font-size:11px;
  }
  .compare-pill{
    position:absolute; left:44%; bottom:16px; transform:translateX(-50%);
    display:flex; align-items:center; gap:6px;
    background: var(--orange); color: var(--white);
    padding: 9px 16px; border-radius: 999px;
    font-family: var(--font-body); font-weight:700; font-size:11px;
    box-shadow: 0 14px 24px rgba(255,106,52,0.32);
    white-space:nowrap;
    opacity:0;
    animation: offerIn .6s var(--ease) 1.15s forwards;
  }

  /* SHOWCASE*/
  .showcase{ background: var(--navy); color: var(--white); position:relative; overflow:hidden; }
  .showcase .section-head p{ color: rgba(255,255,255,0.62); }
  .showcase .section-head .eyebrow{ color: var(--orange); }
  .showcase-scroll{
    display: flex;
    gap: 22px;
    justify-content: center;
    overflow-x: auto;
    padding-bottom: 12px;
    scroll-snap-type: x mandatory;
    margin: 0 -32px;
    padding-left: 32px;
    padding-right: 32px;
  }
  .showcase-scroll::-webkit-scrollbar{ height:6px; }
  .showcase-scroll::-webkit-scrollbar-thumb{ background: var(--line-dark); border-radius:6px; }
  .show-card {
    flex: 0 0 220px;
    scroll-snap-align: start;
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-l);
    border: 1px solid var(--line-dark);
    height: 340px;
    background: var(--navy-deep);
    border-color: var(--orange);
    }

    .show-card-img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Dark overlay */
    .show-card::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
            to top,
            rgba(7, 17, 31, 0.95) 35%,
            rgba(7, 17, 31, 0.2) 80%,
            transparent 100%
        );
    }

    .show-card-text {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 20px;
        z-index: 2;

        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .show-card .tag {
        display: inline-block;
        width: fit-content;

        font-size: 11px;
        font-weight: 600;
        letter-spacing: .05em;
        text-transform: uppercase;

        color: var(--orange);
        background: rgba(255,106,52,.14);

        padding: 5px 10px;
        border-radius: 6px;
    }

    .show-card h4 {
        margin: 0;
        font-size: 17px;
    }

    .show-card p {
        margin: 0;
        font-size: 13px;
        line-height: 1.6;
        color: rgba(255,255,255,.7);
    }

  /* TESTI */
  .testimonial{ padding: 100px 0; }
  .testimonial .wrap{ max-width: 780px; text-align:center; }
  .testimonial blockquote{
    font-family: var(--font-display);
    font-size: clamp(21px, 2.6vw, 30px);
    font-weight:600;
    line-height:1.5;
    color: var(--navy);
    margin: 0 0 28px;
    letter-spacing:-0.01em;
  }
  .testimonial cite{
    font-style:normal;
    display:flex; align-items:center; justify-content:center; gap:12px;
    font-size:14px; color: var(--ink-soft);
  }
  .testimonial cite strong{ color: var(--navy); font-family:var(--font-body); }
  .testimonial-avatar{
    width:38px; height:38px; border-radius:50%;
    background: var(--orange);
    display:flex; align-items:center; justify-content:center;
    color:var(--white); font-family:var(--font-display); font-weight:700; font-size:13px;
  }

  /* FINAL */
  .cta{
    background: var(--navy-deep);
    color: var(--white);
    padding: 100px 0;
    text-align:center;
    position:relative;
    overflow:hidden;
  }
  .cta .hero-ring-deco.r1{ width:520px; height:520px; top:-260px; left:50%; transform:translateX(-50%); right:auto; }
  .cta h2{ font-size: clamp(28px, 4vw, 44px); margin-bottom:16px; }
  .cta p{ color: rgba(255,255,255,0.62); font-size:16px; margin-bottom:36px; }
  .cta .store-row{ justify-content:center; }

  /* FOOTER */
  footer{ background: var(--navy-deep); color: rgba(255,255,255,0.55); padding: 40px 0; border-top:1px solid var(--line-dark); }
  footer .wrap{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
  .footer-links{ display:flex; gap:24px; }
  .footer-links a{ font-size:13.5px; transition: color .2s ease; }
  .footer-links a:hover{ color: var(--white); }
  .footer-brand{ display:flex; align-items:center; gap:8px; font-family:var(--font-display); font-weight:700; color:var(--white); font-size:15px; }
  .footer-brand .ring-mark{ width:18px; height:18px; border:2.5px solid var(--orange); border-right-color:transparent; border-radius:50%; transform:rotate(-40deg); }
  footer small{ font-size:12.5px; }

  /* STICKY*/
  .sticky-cta{
    position:fixed; left:0; right:0; bottom:0; z-index:400;
    background: var(--white);
    border-top:1px solid var(--line);
    padding: 12px 18px;
    display:none;
    align-items:center; justify-content:space-between; gap:14px;
    box-shadow: 0 -8px 24px rgba(12,31,63,0.10);
    transform: translateY(100%);
    transition: transform .4s var(--ease);
  }
  .sticky-cta.show{ transform: translateY(0); }
  .sticky-cta strong{ font-family:var(--font-display); font-size:14px; color:var(--navy); display:block; }
  .sticky-cta span{ font-size:12px; color:var(--ink-soft); }
  @media (max-width: 640px){ .sticky-cta{ display:flex; } }