/* Apple-minimal, glassmorphism, SHINY text (robust), shiny CTA, typed hero, DOB component */

:root{ --wl-radius:22px; --wl-field-radius:14px; }

/* ---------- HERO ---------- */
.wl-hero{ position:relative; padding-top: calc(var(--nav-h,64px) + 30px); padding-bottom: 8px; text-align:center; overflow: clip; }
.wl-hero-inner{ max-width: 980px; margin: 0 auto; }

/* page identity pill */
.wl-pill{
  display:inline-block; margin-bottom: 10px; padding: .36rem .7rem;
  font-size: .82rem; font-weight: 700; letter-spacing: .4px; color: #0d1b2a;
  background:
    radial-gradient(60% 120% at 30% 0%, rgba(170,190,255,.55), rgba(170,190,255,.15)),
    radial-gradient(60% 160% at 100% 60%, rgba(160,120,255,.35), rgba(160,120,255,.08));
  border: 1px solid rgba(0,0,0,.08); border-radius: 999px; backdrop-filter: blur(8px) saturate(120%);
}

/* “Virtual try-on that’s” — core + shine overlay (Safari-safe) */
.wl-title{ margin:0; line-height:1.05; }
.wl-title-stack{ position:relative; display:inline-block; }
.wl-title-core{
  color:#000; font-size: clamp(40px, 6.4vw, 72px); font-weight: 800; letter-spacing: -0.02em;
  text-shadow: 0 0 .5px rgba(0,0,0,.5), 0 0 36px rgba(90,120,255,.28), 0 0 86px rgba(164,90,255,.18);
}
.wl-title-shine{
  position:absolute; left:0; top:0; width:100%; height:100%;
  pointer-events:none; user-select:none; z-index:1;

  /* clip gradient INTO the glyphs */
  color: transparent; -webkit-text-fill-color: transparent;
  background: linear-gradient(120deg,
              rgba(0,0,0,0) 0%,
              rgba(170,190,255,0) 42%,
              rgba(255,255,255,.95) 50%,
              rgba(170,190,255,0) 58%,
              rgba(0,0,0,0) 100%);
  background-size: 240% 100%;
  background-position: 200% 0;
  -webkit-background-clip: text; background-clip: text;
  will-change: background-position;
  animation: text-shine 5s ease-in-out infinite 1s;
}
@keyframes text-shine{ to{ background-position: -40% 0; } }

/* Typed line */
.wl-typed-line{ margin-top: 8px; font-size: clamp(42px, 7vw, 76px); font-weight: 800; letter-spacing: -0.02em; }
.wl-typed{ position:relative; white-space:nowrap; }
.wl-typed::after{ content:""; display:inline-block; width:.08em; height:.9em; background:#111; margin-left:.16em; transform: translateY(.15em); animation: wl-caret 1s steps(1,end) infinite; }
@keyframes wl-caret{ 50%{ opacity:0 } }

.wl-tag{ margin: 12px 0 0; color: var(--sub, rgba(0,0,0,.62)); font-size: clamp(16px, 2.3vw, 18px); }

/* ambient mesh & glow */
.wl-mesh{ position:absolute; inset:0; background:
  radial-gradient(900px 260px at 18% 10%, rgba(255,255,255,.65), transparent 60%),
  radial-gradient(900px 300px at 82% 90%, rgba(255,255,255,.65), transparent 60%),
  linear-gradient(180deg, #fff, #fff); pointer-events:none; z-index:-1; }
.wl-glow{ position:absolute; inset:-12% -12% auto -12%; height:36vh; background:
  radial-gradient(650px 220px at 60% 18%, rgba(130,130,255,.14), transparent 60%),
  radial-gradient(760px 300px at 40% 82%, rgba(170,100,255,.12), transparent 60%);
  filter: blur(14px) saturate(120%); pointer-events:none; z-index:-1; animation: wl-glow-move 18s ease-in-out infinite alternate; }
@keyframes wl-glow-move{ to{ transform: translateY(12px) } }

/* hairline divider */
.wl-sep{ display:block; max-width:1120px; height:1px; margin:16px auto 10px; background: linear-gradient(90deg,transparent,rgba(0,0,0,.08),transparent); border-radius:1px; }

/* ---------- MAIN GRID ---------- */
.wl-main{ padding-top:14px }
.wl-wrap{ max-width:1120px; margin:0 auto; display:grid; gap:18px; grid-template-columns:1fr; }
@media (min-width:980px){ .wl-wrap{ grid-template-columns: 1.15fr .85fr; align-items:start; } }

/* ---------- GLASS ---------- */
.glass{ border:1px solid rgba(0,0,0,.06); border-radius: var(--wl-radius); background: rgba(255,255,255,.58); backdrop-filter: blur(18px) saturate(120%); box-shadow: 0 28px 58px rgba(0,0,0,.08); }
.glass-card{ border:1px solid rgba(0,0,0,.06); border-radius:18px; background: rgba(255,255,255,.58); backdrop-filter: blur(16px) saturate(120%); box-shadow: 0 22px 46px rgba(0,0,0,.07); padding: 16px 18px; }

/* ---------- FORM ---------- */
.wl-card{ padding:18px }
.wl-title-form{ margin:0 0 6px; }
.wl-form-title-stack{ position:relative; display:inline-block; }

/* form title: core + shine (same approach as hero) */
.wl-form-title-core{
  font-size: clamp(34px, 4.4vw, 46px); font-weight: 800; letter-spacing: -0.02em; color:#000;
  text-shadow: 0 0 .5px rgba(0,0,0,.45), 0 0 26px rgba(120,140,255,.25);
}
.wl-form-title-shine{
  position:absolute; left:0; top:0; width:100%; height:100%;
  pointer-events:none; user-select:none; z-index:1;
  color: transparent; -webkit-text-fill-color: transparent;
  background: linear-gradient(120deg,
              rgba(0,0,0,0) 0%,
              rgba(170,190,255,0) 42%,
              rgba(255,255,255,.95) 50%,
              rgba(170,190,255,0) 58%,
              rgba(0,0,0,0) 100%);
  background-size: 240% 100%; background-position: 200% 0;
  -webkit-background-clip: text; background-clip: text;
  will-change: background-position;
  animation: text-shine 5.2s ease-in-out infinite 1.2s;
}

.wl-sub{ margin:0; color: var(--sub,#666) }
.priority{ transform-origin: top center; animation: wl-card-enter .55s cubic-bezier(.2,.9,.3,1); border:1px solid rgba(0,0,0,.05); box-shadow: 0 36px 80px rgba(0,0,0,.10), 0 1px 0 rgba(255,255,255,.75) inset; }
@keyframes wl-card-enter{ from{ transform: translateY(14px) scale(.997); opacity:0; filter: blur(6px) } to{ transform: none; opacity:1; filter: none } }

.wl-form{ margin-top: 12px }
.wl-grid{ display:grid; grid-template-columns:1fr; gap:12px }
@media (min-width:760px){ .wl-grid{ grid-template-columns:1fr 1fr } }
.span-2{ grid-column: 1 / -1 }

.wl-field{ display:flex; flex-direction:column; gap:6px }
.wl-label{ font-weight:700; letter-spacing:.2px }
.wl-input{
  appearance:none; width:100%; padding:12px 14px; border-radius:var(--wl-field-radius);
  border:1px solid var(--hair,rgba(0,0,0,.08)); background:#fff; color:var(--fg,#111); font:inherit;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
  transition: box-shadow .25s ease, border-color .25s ease, transform .18s ease;
}
.wl-input::placeholder{ color: rgba(0,0,0,.4) }
.wl-input:focus{ outline:none; border-color:#111; box-shadow: 0 0 0 4px rgba(0,0,0,.06), 0 8px 28px rgba(0,0,0,.08); transform: translateY(-1px); }

/* DOB component */
.dob-field{ margin-top:2px }
.dob-inputs{ display:flex; align-items:center; gap:8px; }
.dob-input{
  width:56px; text-align:center; font-variant-numeric: tabular-nums;
  padding:10px 10px; border-radius:12px; border:1px solid var(--hair,rgba(0,0,0,.08)); background:#fff; color:#111;
  transition: box-shadow .2s ease, border-color .2s ease, transform .12s ease;
}
.dob-yyyy{ width:86px; }
.dob-input:focus{ outline:none; border-color:#111; box-shadow: 0 0 0 4px rgba(0,0,0,.06); transform: translateY(-1px); }
.dob-slash{ color: rgba(0,0,0,.4); user-select:none }
.dob-help{ margin:.2rem 0 0; color: var(--sub,#666); font-size:.88rem }
.dob-calendar{
  width:42px; height:42px; border-radius:12px; margin-left:6px;
  border:1px solid var(--hair,rgba(0,0,0,.08)); background:#fff; cursor:pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center;
}
.visually-hidden{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }

/* CTA button — reliable shiny sweep */
.cta-btn{ position:relative; overflow:hidden; }
.shiny::before{
  content:""; position:absolute; top:-20%; left:-30%; width:60%; height:140%;
  background: linear-gradient(120deg, rgba(255,255,255,0) 20%, rgba(255,255,255,.65) 45%, rgba(255,255,255,0) 70%);
  transform: translateX(-120%);
  will-change: transform;
  animation: btn-shine 3s ease-in-out infinite 1.4s;
  pointer-events:none;
}
@keyframes btn-shine{ to{ transform: translateX(140%); } }

.wl-actions{ display:flex; align-items:center; gap:12px; margin-top:12px; flex-wrap:wrap }
.cta-xxl{ padding: 1.25rem 2.8rem; font-size: 1.12rem; border-radius: 16px; box-shadow: 0 18px 36px rgba(0,0,0,.14); }
.cta-btn.waiting{ animation: wl-pulse 1.2s ease-in-out infinite }
@keyframes wl-pulse{ 0%{transform:scale(1)} 50%{transform:scale(1.02)} 100%{transform:scale(1)} }
.wl-status{ color: var(--sub,#666); min-height: 1.2em }
.wl-mini{ color: var(--sub,#666); font-size: .9rem; margin-top: 6px }

/* honeypot */
.hp{ position:absolute; left:-9999px; opacity:0; pointer-events:none }

/* benefits */
.wl-side .wl-side-title{ margin:0 0 6px; font-size: clamp(20px,2.6vw,24px) }
.wl-list{ margin:10px 0 0; padding:0; list-style:none; display:grid; gap:10px; color:#222; line-height:1.35 }
.wl-bullet{ display:inline-block; font-weight:700; margin-right:10px; }
.wl-note{ color: var(--sub,#666); margin-top: 8px }

/* ---------- MODAL ---------- */
.wl-modal[hidden]{ display:none !important; } /* never visible at load */
.wl-modal{ position: fixed; inset: 0; display: grid; place-items: center; background: rgba(11,11,11,.42); z-index: 200; opacity: 0; pointer-events: none; transition: opacity .28s ease; }
.wl-modal[aria-hidden="false"]{ opacity:1; pointer-events:auto }
.wl-modal-inner{
  position:relative; width:min(580px,92vw); border-radius:22px; padding: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(248,248,248,.97));
  box-shadow: 0 40px 88px rgba(0,0,0,.22);
  transform: translateY(18px) scale(.99);
  transition: transform .36s cubic-bezier(.2,.9,.3,1);
  text-align:center; overflow:hidden;
}
.wl-modal-inner::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background: linear-gradient(120deg, rgba(160,120,255,.55), rgba(120,160,255,.55));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events:none;
}
.wl-modal[aria-hidden="false"] .wl-modal-inner{ transform: none }
.wl-modal-close{ position:absolute; right:14px; top:12px; background:transparent; border:none; font-size:22px; color:rgba(0,0,0,.6); cursor:pointer; }
.wl-modal-mark{
  width:56px; height:56px; border-radius:50%; margin: 2px auto 8px; display:grid; place-items:center; color:#0d1b2a;
  background: radial-gradient(100% 100% at 50% 0%, rgba(170,190,255,.85), rgba(170,190,255,.35));
  border: 1px solid rgba(0,0,0,.06); box-shadow: 0 10px 30px rgba(0,0,0,.12);
}
.wl-modal-title{ margin:6px 0 6px; font-size:1.35rem; font-weight:800; letter-spacing:-.01em; }
.wl-modal-sub{ color: rgba(0,0,0,.66); margin:6px auto 10px; max-width: 46ch; }
.wl-modal-actions{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap }
.cta-insta{ background: linear-gradient(180deg,#E4405F,#C13584); color:#fff; border:none; height:46px; padding:0 1.2rem; border-radius:14px; box-shadow: 0 12px 28px rgba(226,64,95,.24); }
.cta-ghost{ background:transparent; color:#111; border:1px solid rgba(0,0,0,.08); height:46px; padding:0 1.1rem; border-radius:12px; }


/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .wl-title-shine, .wl-form-title-shine, .shiny::before{ animation: none !important; }
}

@media (max-width:520px){
  .cta-xxl{ width:100% }
  .wl-actions{ gap:10px }
  .wl-card{ padding:16px }
}