:root{
      --bg:#0b0b0c; --elev:#121214; --card:#141417; --text:#f5f6f8; --muted:#b4b7c2; --line:#2a2a2e;
      --accent-1:#6aa7ff; /* cool */
      --accent-2:#79ffbd; /* health‑mint */
      --accent-3:#ffd56b; /* sunshine */
      --radius-lg:20px; --radius-sm:12px; --shadow-soft:0 20px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04);
      --dot:#8b93a1;
      --dot-active:#fff;
    }
    html,body{height:100%}
    body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Inter,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;letter-spacing:.01em}
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    .container{width:min(1120px,92vw);margin-inline:auto}

    /* Header */
    .site-header{position:sticky;top:0;z-index:40;backdrop-filter:saturate(140%) blur(8px);background:linear-gradient(180deg,rgba(11,11,12,.8),rgba(11,11,12,.55));border-bottom:1px solid var(--line)}
    .nav{height:64px;display:flex;align-items:center;justify-content:space-between}
    .brand{display:flex;align-items:center;gap:12px;font-weight:800;font-size:15px}
    .logo{width:28px;height:28px;border-radius:9px;display:inline-block;/*background:linear-gradient(90deg, rgba(106,167,255,.9), rgba(121,255,189,.9));*/ /*background: #007bff;*/ /*box-shadow:0 0 24px rgba(106,167,255,.35),inset 0 0 0px rgba(255,255,255,.25)*/}
    .pill{display:inline-flex;align-items:center;gap:10px;padding:8px 12px;border-radius:999px;color:var(--muted);font-size:13px}
    .nav-cta{display:flex;align-items:center;gap:10px}
    .cta-secondary{display:inline-flex;align-items:center;gap:10px;padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:#101012;color:var(--text);font-size:13px}

    /* Hero */
    .hero{text-align:center;padding:clamp(56px,10vw,96px) 0 40px}
    .eyebrow{display:inline-flex;align-items:center;gap:10px;padding:7px 11px;border-radius:999px;font-size:12px;color:#fff;/*background:linear-gradient(90deg, rgba(106,167,255,.22), rgba(121,255,189,.22));*/box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
    .hero h1{margin:18px auto 10px;font-size:clamp(36px,6vw,64px);line-height:1.05;letter-spacing:-.02em}
    .sub{margin:0 auto 22px;max-width:760px;color:var(--muted);font-size:clamp(16px,2.4vw,19px)}
    .price{font-size:clamp(22px,4vw,34px);font-weight:700;margin:6px 0 14px;background:#007bff;-webkit-background-clip:text;background-clip:text;color:transparent}
    .cta{display:inline-flex;align-items:center;gap:12px;padding:14px 20px;border-radius:999px;font-weight:700;font-size:16px;background:#007bff;/*box-shadow:0 12px 40px rgba(106,167,255,.22),0 8px 28px rgba(121,255,189,.18)*/;transition:transform .15s ease, box-shadow .2s ease, opacity .2s ease}
    .cta:hover{/*transform:translateY(-1px);box-shadow:0 18px 60px rgba(106,167,255,.22),0 12px 36px rgba(121,255,189,.18)*/filter:brightness(1.20);}
    .cta small{opacity:.85;font-weight:600}
    .cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

    /* Steps card */
    .steps{display:grid;grid-template-columns:1.2fr .8fr;gap:14px;align-items:stretch}
    .card{background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:var(--shadow-soft)}
    .card h3{margin:4px 0 10px;letter-spacing:-.01em}

    /* Uploader */
    .drop{border:1.5px dashed rgba(255,255,255,.18);border-radius:16px;background:#0f0f12;padding:18px;display:grid;place-items:center;text-align:center;gap:10px}
    .drop.over{background:#121216;border-color:rgba(255,255,255,.35)}
    .drop small{color:var(--muted)}
    .file-name{font-weight:600}
    .micro{font-size:12px;color:var(--muted)}
    .row{display:flex;gap:10px;flex-wrap:wrap}
    .btn{appearance:none;border:none;cursor:pointer;font-family:inherit;font-size:15px;font-weight:700;line-height:1.3;padding:12px 16px;border-radius:12px;transition:all .18s ease;display:inline-flex;align-items:center;justify-content:center;text-align:center;white-space:nowrap}
    .btn-primary{background:#007bff;color:#fff}
    .btn-primary:hover{filter:brightness(1.2)}
    .btn-secondary{background:#18181d;border:1px solid var(--line);color:var(--text)}
    .btn-secondary:hover{background:#202024;border-color:rgba(255,255,255,.15)}

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

    /* Modal base */
    .modal-backdrop{position:fixed;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);z-index:1000;opacity:0;pointer-events:none;transition:opacity .3s ease}
    .modal-backdrop.open{opacity:1;pointer-events:auto}
    .modal{width:min(420px,92vw);max-height:85vh;background:#111114;color:var(--text);border:1px solid rgba(255,255,255,.08);border-radius:18px;box-shadow:0 20px 80px rgba(0,0,0,.6);padding:22px 20px 20px;position:relative;transform:translateY(12px);opacity:.98;transition:transform .32s ease, opacity .32s ease, height .3s ease;overflow-y:auto}
    .modal-backdrop.open .modal{transform:translateY(0);opacity:1}
    .modal-close{position:absolute;top:8px;right:10px;width:36px;height:36px;border-radius:10px;border:1px solid var(--line);background:#18181d;color:#fff;cursor:pointer;font-size:22px;line-height:1}
    .modal-head{padding:8px 4px 14px}
    .modal-head h3{margin:0 0 6px;letter-spacing:-.01em}
    .label{display:block;margin:0 0 8px;font-weight:700}
    .select,.text{width:100%;padding:12px;border-radius:12px;background:#0f0f12;color:#fff;border:1px solid var(--line)}
    .modal-section{border-top:1px solid var(--line);padding:16px 4px 4px;opacity:1;transform:translateX(0);transition:opacity .3s ease, transform .3s ease, height .3s ease;height:auto;overflow:hidden}
    .modal-section[hidden]{display:block!important;opacity:0;transform:translateX(20px);height:0;padding:0 4px;pointer-events:none}
    [hidden]{display:none!important}
    .pending{display:grid;place-items:center;gap:8px;padding:14px 0}
    .spinner{width:34px;height:34px;border-radius:50%;border:3px solid rgba(255,255,255,.15);border-top-color:#6ab7ff;animation:spin .9s linear infinite}
    @keyframes spin{to{transform:rotate(360deg)}}

    /* Sections */
    .section{padding:clamp(32px,4vw,86px) 0}
    .section h2{text-align:center;margin:0 0 24px;font-size:clamp(26px,4vw,40px);letter-spacing:-.015em}

    /* Features grid */
    .features{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
    .feat{background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:var(--shadow-soft)}
    .feat h3{margin:10px 0 6px;font-size:18px}
    .feat p{margin:0;color:var(--muted);font-size:14.5px}
    .icon{width:22px;height:22px;opacity:.95}

    /* Quotes */
    .quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
    .quote{padding:22px;border-radius:16px;background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));border:1px solid var(--line);box-shadow:var(--shadow-soft);margin:0}
    .quote p{font-size:15.5px;line-height:1.55;margin:0 0 14px}
    .q-meta{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:14px}
    .avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg, rgba(106,167,255,.7), rgba(121,255,189,.7))}

    /* FAQ */
    .faq{max-width:860px;margin-inline:auto}
    details{border:1px solid var(--line);border-radius:14px;padding:14px 16px;background:#101014;margin:10px 0}
    summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;font-weight:700}
    summary::-webkit-details-marker{display:none}
    details p{color:var(--muted);margin:10px 2px 6px;font-size:15px;line-height:1.65}
    .chev{rotate:0deg;transition:rotate .2s ease}
    details[open] .chev{rotate:180deg}

    /* Bottom CTA */
    .cta-panel{margin-top:18px;border-radius:20px;padding:28px;border:1px solid var(--line);background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));text-align:center;box-shadow:var(--shadow-soft);position:relative;overflow:hidden}

    /* Footer */
    footer{border-top:1px solid var(--line);color:var(--muted);padding:28px 0 40px;font-size:13px}
    .foot-flex{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}

    @media (max-width:960px){.features{grid-template-columns:1fr 1fr}.quotes{grid-template-columns:1fr 1fr}.steps{grid-template-columns:1fr}}
    @media (max-width:640px){.features{grid-template-columns:1fr}.quotes{grid-template-columns:1fr;gap:14px}.nav{height:56px}.pill{display:none}}



/* ============================
   Upload success tick (animated)
   ============================ */
.result{
  display:grid;
  place-items:center;
  text-align:center;
  gap:10px;
  padding-top: 16px;
}
.result .msg{font-weight:700}

.ok-svg{width:84px; height:84px; display:block}
.ok-ring{
  fill: rgba(46, 204, 113, .18);
  stroke: rgba(46, 204, 113, .32);
  stroke-width: 8;
  stroke-dasharray: 290;
  stroke-dashoffset: 290;
  animation: ring 700ms ease forwards;
}
.ok-check{
  fill:none; stroke:#fff; stroke-width:10; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray: 120; stroke-dashoffset: 120;
  animation: check 500ms 400ms ease forwards;
}
@keyframes ring{to{stroke-dashoffset:0}}
@keyframes check{to{stroke-dashoffset:0}}

/* Optional: make the upload icon a touch larger */
.drop i.fa-file-arrow-up{
  font-size: 28px;
  opacity: .9;
}

/* ============================
   Payment method pills”
   ============================ */
.pay-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:6px;
}

.pay{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:16px 36px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#0f0f12;
  font-size:13px;
  color:#eaecef;
  cursor:pointer;
  transition: all .2s ease;
}
.pay:hover{ background:#1a1a1e; filter:brightness(1.08) }
.pay.selected{ border-color: var(--accent-1); background:#1a1a1e }

/* Variants (all share same base; these exist for clarity/overrides later) */
.pay-apple{ }
.pay-google{ }
.pay-link{ }
.pay-card{ }

/* ============================
   Card form / pending
   ============================ */
/* You already have .text + .select; this just smooths spacing for the card form */
#cardForm .text{ display:100%; margin-top:0; }
#cardForm #card-element{ margin-top:10px }

/* Spinner colors (reuse your accent) */
#cardPending .spinner{ border-top-color: var(--accent-1) }

/* Accessibility: visible focus */
.pay:focus,
.btn:focus,
.select:focus,
.text:focus{
  outline: 2px solid var(--accent-1);
  outline-offset: 2px;
}

/* Small helper to tone down muted text inside modals */
.modal .micro.muted{ color: var(--muted) }


  /* Container uses 100% width of its parent */
  .xcar{
    width:100%;
    position:relative;
    margin: clamp(32px, 4vw, 86px) 0;
  }

  /* soft edge fades (hint it scrolls) */
  .xcar::before,
  .xcar::after{
    content:""; pointer-events:none;
    position:absolute; height:100%; top:0; bottom:42px; width:min(8vw,72px); z-index:3;
    background:linear-gradient(90deg, rgba(11,12,15,1), rgba(11,12,15,0));
  }
  .xcar::before{ left:0 }
  .xcar::after{ right:0; transform:scaleX(-1) }

  /* scroller: flex + snap */
  .xcar-track{
    display:flex;
    gap:20px;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;
    padding:0px clamp(16px, 6vw, 64px) 16px;
    scroll-padding-inline: clamp(16px, 6vw, 64px);
    list-style:none; margin:0;
  }
  .xcar-track::-webkit-scrollbar{ display:none }
  .xcar-track{ scrollbar-width:none }

  /* slides are min(1200px, 88%) so neighbors always peek */
  .xcar-slide{
    flex:0 0 min(600px, 88%);
    scroll-snap-align:center;
    scroll-snap-stop:always;
    aspect-ratio:4/5;
    border-radius:22px;
    overflow:hidden;
    background:#111316;
    box-shadow:0 18px 50px rgba(0,0,0,.35), 0 6px 18px rgba(0,0,0,.22);
    margin:0; padding:0;
    
    position: relative;
  }
  .xcar-slide img{
    width:100%; object-fit:cover; display:block;
  }

  /* arrows (namespaced) */
  .xcar-nav{
    position:absolute; top:calc(50% - 20px); z-index:4;
    width:44px; height:44px; border-radius:999px; border:0; cursor:pointer;
    display:grid; place-items:center;
    background:rgba(255,255,255,.10); color:#fff; backdrop-filter:blur(6px);
    transition:background .2s ease, transform .15s ease;
  }
  .xcar-nav:hover{ background:rgba(255,255,255,.16); transform:translateY(-1px) }
  .xcar-nav:active{ transform:none }
  .xcar-prev{ left:12px }
  .xcar-next{ right:12px }
  .xcar-nav svg{ width:18px; height:18px }

  /* dots (namespaced) */
  .xcar-dots{ display:flex; gap:10px; justify-content:center; margin-top:10px }
  .xcar-dot{
    width:9px; height:9px; border-radius:999px; border:0; cursor:pointer;
    background:#8b93a1; opacity:.85;
  }
  .xcar-dot[aria-current="true"]{ background:#ffffff; opacity:1 }

  /* explicit focus to avoid inheriting global styles */
  .xcar :focus-visible{ outline:2px solid #6aa7ff; outline-offset:2px }


/* Optional: subtle bottom fade for readability */
.xcar-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,0) 45%);
  pointer-events: none;
}

.xcar-caption{
  position:absolute; z-index:1; color:#fff;
  text-shadow:0 2px 12px rgba(0,0,0,.65);
  opacity:0; transform:translateX(-20px);
  transition:opacity .6s ease .2s, transform .6s ease;
}
.xcar-caption h2{ margin:0; font-weight:700; line-height:1.15; font-size:clamp(18px,3.2vw,34px) }


.xcar-caption.xcar-shown{
  opacity:1;
  transform:translateX(0);
}


/* === Positioning modifiers === */
.xcar-pos-bottom-left {
  left: 16px;
  bottom: 16px;
  text-align: left;
}

.xcar-pos-center-left {
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  text-align: left;
}

.xcar-pos-center-top {
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}

.xcar-pos-center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.xcar-pos-bottom-center {
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  text-align: center;
}




/* Reveal: bottom → top */
.reveal-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
  will-change: opacity, transform;
}

/* When in view */
.reveal-up.in {
  opacity: 1;
  transform: translateY(0);
}



/* Optional delay utilities */
.reveal-delay-100 { transition-delay: .1s }
.reveal-delay-200 { transition-delay: .2s }
.reveal-delay-300 { transition-delay: .3s }
.reveal-delay-500 { transition-delay: .5s }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .reveal-up { opacity: 1; transform: none; transition: none; }
}