/* ============================================================
   Awestruck — Welcome Popup (mobile)
   welcome-popup.css — scoped under .aws-wp, no globals.

   Responsive coverage:
   · width: min(360px, 100vw − 32px) → works from 280px foldables
     (Galaxy Fold cover) to tablets; type scales with clamp()/vw
   · height: dvh units + JS fit-scale → no clipping on short or
     keyboard-shrunk viewports; never scrolls internally
   · safe areas: padding respects env(safe-area-inset-*) for
     notches, Dynamic Island, curved corners, home indicators
   · crisp everywhere: all graphics are CSS/SVG vectors; the
     fit-scale only ever scales DOWN (never up) so nothing blurs
   ============================================================ */
.aws-wp{
  --blue:#2F3BD8;--yellow:#FFCE00;--ink:#0F111A;--ink-2:#1d2030;--line:#ECEDF2;--soft:#F3F4FA;
  --disp:'Bricolage Grotesque',system-ui,sans-serif;--body:'Plus Jakarta Sans',system-ui,sans-serif;
  font-family:var(--body);-webkit-font-smoothing:antialiased;
}
.aws-wp *{box-sizing:border-box;margin:0;padding:0}

/* ---- fullscreen backdrop ---- */
.aws-wp.aws-backdrop{position:fixed;inset:0;z-index:2147480000;display:flex;align-items:center;justify-content:center;
  padding:calc(16px + env(safe-area-inset-top,0px)) calc(16px + env(safe-area-inset-right,0px))
          calc(16px + env(safe-area-inset-bottom,0px)) calc(16px + env(safe-area-inset-left,0px));
  background:rgba(10,11,20,0);-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0);opacity:0;pointer-events:none;
  transition:opacity .4s ease,backdrop-filter .4s ease}
.aws-wp.aws-backdrop.aws-open{opacity:1;pointer-events:auto;background:rgba(10,11,20,.5);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}

/* ---- card ---- */
.aws-card{width:min(360px,calc(100vw - 32px));background:#fff;border-radius:20px;position:relative;overflow:hidden;
  box-shadow:0 30px 70px -18px rgba(8,9,18,.6),0 0 0 1px rgba(15,17,26,.06);
  transform:translateY(14px) scale(calc(var(--fit,1) * .96));opacity:0;
  transition:transform .5s cubic-bezier(.22,1,.36,1),opacity .4s ease}
.aws-open .aws-card{transform:scale(var(--fit,1));opacity:1}

/* ---- cosmos hero ---- */
.aws-hero{position:relative;height:clamp(118px,16dvh,148px);overflow:hidden;isolation:isolate;background:#05060e}
.aws-hero .sky{position:absolute;inset:0;z-index:-4;
  background:
    radial-gradient(90% 80% at 82% 110%, rgba(47,59,216,.34) 0%, transparent 55%),
    radial-gradient(70% 65% at 12% -8%, rgba(122,92,255,.22) 0%, transparent 55%),
    #05060e}
.aws-hero .stars,.aws-hero .stars2{position:absolute;inset:0;z-index:-3;pointer-events:none;
  background-image:
    radial-gradient(1.3px 1.3px at 22px 34px,#fff,transparent),
    radial-gradient(1px 1px at 68px 12px,rgba(255,255,255,.9),transparent),
    radial-gradient(1.6px 1.6px at 118px 52px,#fff,transparent),
    radial-gradient(1px 1px at 156px 22px,rgba(255,255,255,.75),transparent),
    radial-gradient(1.2px 1.2px at 196px 64px,#fff,transparent),
    radial-gradient(1px 1px at 242px 30px,rgba(255,255,255,.85),transparent),
    radial-gradient(1.5px 1.5px at 288px 58px,#fff,transparent),
    radial-gradient(1px 1px at 328px 16px,rgba(255,255,255,.8),transparent);
  background-size:360px 90px;background-repeat:repeat;animation:aws-twA 3.2s ease-in-out infinite}
.aws-hero .stars2{background-position:40px 46px;animation:aws-twB 4.1s ease-in-out infinite}
@keyframes aws-twA{0%,100%{opacity:.95}50%{opacity:.4}}
@keyframes aws-twB{0%,100%{opacity:.45}50%{opacity:1}}
.aws-hero .shoot{position:absolute;z-index:-3;top:26%;left:-12%;width:70px;height:1.5px;border-radius:2px;
  background:linear-gradient(90deg,transparent,#fff);transform:rotate(-14deg);opacity:0;animation:aws-shoot 7s ease-in 2.2s infinite}
@keyframes aws-shoot{0%,88%{opacity:0;transform:translate(0,0) rotate(-14deg)}90%{opacity:.9}100%{opacity:0;transform:translate(480px,120px) rotate(-14deg)}}
.aws-hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.4;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix type='saturate' values='0'/></filter><rect width='120' height='120' filter='url(%23n)' opacity='0.35'/></svg>");mix-blend-mode:overlay}
.aws-hero .scrim{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,6,14,0) 40%,rgba(5,6,14,.66) 100%)}

.aws-top{position:absolute;top:12px;right:12px;z-index:2}
.aws-x{width:38px;height:38px;border:0;border-radius:10px;cursor:pointer;background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.26);color:#fff;font-size:22px;line-height:1;display:grid;place-items:center;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:.16s}
.aws-x:hover{background:rgba(255,255,255,.32);transform:rotate(90deg)}

.aws-hero-cap{position:absolute;left:20px;right:20px;bottom:19px;z-index:2}
.aws-h1{font-family:var(--disp);font-weight:500;font-size:clamp(24px,7.2vw,32px);line-height:1.16;
  letter-spacing:-.03em;color:#fff;text-shadow:0 2px 18px rgba(8,6,30,.45)}
.aws-h1 span{position:relative;font-weight:800;color:var(--yellow);display:inline-block;
  transition:opacity .55s ease;animation:aws-pop .6s cubic-bezier(.2,1.4,.4,1) .25s backwards}
.aws-h1 span.fade{opacity:0}
@keyframes aws-pop{0%{transform:scale(.7) rotate(-3deg);opacity:0}100%{transform:scale(1) rotate(0);opacity:1}}

/* ---- offer ribbon ---- */
.aws-offer{position:relative;overflow:hidden;background:var(--yellow);color:var(--ink);text-align:center;
  font-weight:900;font-size:clamp(12px,3.6vw,13.5px);letter-spacing:.05em;text-transform:uppercase;padding:10px 12px}
.aws-offer::after{content:"";position:absolute;top:0;bottom:0;width:46%;left:-50%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.65),transparent);animation:aws-sheen 2.8s ease-in-out infinite}
@keyframes aws-sheen{0%{left:-50%}60%,100%{left:120%}}

/* ---- body ---- */
.aws-body{padding:16px clamp(16px,5.5vw,22px) calc(20px + env(safe-area-inset-bottom,0px)/2)}
.aws-sub{font-size:clamp(14.5px,4.4vw,16.5px);color:var(--ink);font-weight:600;line-height:1.5;text-wrap:pretty;text-align:center}
.aws-sub mark{background:linear-gradient(0deg,var(--yellow),var(--yellow)) no-repeat 0 68%/100% 42%;padding:0 2px}

/* pill tabs */
.aws-tabs{display:flex;gap:6px;margin-top:17px}
.aws-tab{flex:1;border:2px solid var(--ink);background:#fff;cursor:pointer;font-family:var(--body);font-weight:800;
  font-size:clamp(11.5px,3.4vw,13px);color:var(--ink);padding:9px 1px;border-radius:999px;white-space:nowrap;
  min-height:38px;transition:background .18s,color .18s,transform .14s}
.aws-tab:active{transform:scale(.95)}
.aws-tab.on{background:var(--ink);color:var(--yellow)}
.aws-tab .spark{display:inline-block;animation:aws-spark 1.8s ease-in-out infinite}
@keyframes aws-spark{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.3) rotate(22deg)}}

/* tab panel — height set by JS to tallest slide */
.aws-panel{height:120px;padding-top:13px;position:relative}
.aws-slide{position:absolute;inset:13px 0 0;opacity:0;transform:translateY(8px);pointer-events:none;
  display:flex;flex-direction:column;justify-content:center;
  transition:opacity .28s ease,transform .28s ease}
.aws-slide.on{opacity:1;transform:none;pointer-events:auto}
.aws-line{font-family:var(--disp);font-weight:700;font-size:clamp(19px,5.8vw,23px);line-height:1.14;letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.aws-supp{font-size:clamp(13.5px,4.2vw,15px);color:var(--ink-2);font-weight:600;margin-top:9px;line-height:1.5}
.aws-supp b{font-weight:800;background:linear-gradient(0deg,var(--yellow),var(--yellow)) no-repeat 0 70%/100% 40%;padding:0 2px}

/* verified line — above the CTA */
.aws-vv{display:flex;align-items:center;justify-content:center;gap:8px;font-size:clamp(11.5px,3.6vw,12.5px);font-weight:800;color:var(--ink);margin:15px 0 0}
.aws-vv .badge{position:relative;width:22px;height:22px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:linear-gradient(145deg,#22c164,#0e9e4e);box-shadow:0 4px 10px -3px rgba(14,158,78,.7)}
.aws-vv .badge svg{width:12px;height:12px;stroke:#fff;stroke-width:3.4}
.aws-vv .badge::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid #17b662;
  animation:aws-vvp 2s cubic-bezier(.3,.6,.4,1) infinite}
@keyframes aws-vvp{0%{opacity:.7;transform:scale(.82)}70%,100%{opacity:0;transform:scale(1.3)}}
.aws-vv .shimm{background:linear-gradient(100deg,var(--ink) 40%,#0e9e4e 50%,var(--ink) 60%);background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:aws-vvs 3.2s ease-in-out infinite}
@keyframes aws-vvs{0%{background-position:150% 0}60%,100%{background-position:-150% 0}}

/* CTA — rotating text */
.aws-cta{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:16px;width:100%;text-decoration:none;
  font-weight:800;font-size:clamp(15px,4.6vw,17px);color:#fff;padding:17px;min-height:54px;border-radius:999px;border:0;cursor:pointer;
  background:var(--blue);box-shadow:0 14px 26px -12px rgba(47,59,216,.6);transition:transform .15s,box-shadow .2s}
.aws-cta:hover{box-shadow:0 18px 32px -12px rgba(47,59,216,.8);transform:translateY(-1px)}
.aws-cta:active{transform:scale(.985)}
.aws-cta svg{width:16px;height:16px;flex:none;transition:transform .18s}
.aws-cta:hover svg{transform:translate(2px,-2px)}
.aws-cta .txt.swap{animation:aws-ctas .38s cubic-bezier(.2,.9,.3,1)}
@keyframes aws-ctas{0%{opacity:0;transform:translateY(9px)}100%{opacity:1;transform:translateY(0)}}

/* trust strip */
.aws-trust{margin-top:14px;display:flex;flex-direction:column;gap:8px;align-items:center}
.aws-badges{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.aws-badges .tb{display:inline-flex;align-items:center;gap:5px;min-height:24px;padding:2px 10px;border-radius:999px;
  background:var(--soft);border:1.5px solid var(--line);font-size:clamp(10px,3vw,11px);font-weight:800;color:var(--ink)}
.aws-pay{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center}
.aws-pay .lbl{font-size:10.5px;font-weight:700;color:var(--ink-2);letter-spacing:.04em;text-transform:uppercase}
.aws-pay .chip{height:20px;display:inline-flex;align-items:center;border:1.5px solid var(--line);border-radius:5px;padding:0 6px;background:#fff}
.aws-pay .chip.visa{font-style:italic;font-weight:900;font-size:10px;color:#1A1F71;letter-spacing:.02em}
.aws-pay .chip.mc i{width:10px;height:10px;border-radius:50%;display:inline-block}
.aws-pay .chip.mc i:first-child{background:#EB001B}
.aws-pay .chip.mc i:last-child{background:#F79E1B;margin-left:-4px;mix-blend-mode:multiply}
.aws-pay .chip.upi{font-weight:900;font-size:9.5px;color:#0e6e3c;letter-spacing:.03em}
.aws-pay .chip.rzp{font-weight:800;font-size:9.5px;color:#0f5cff}

/* very narrow devices (foldable cover screens ~280px) */
@media(max-width:340px){
  .aws-tabs{gap:4px}
  .aws-badges .tb{padding:2px 7px}
}
/* reduced motion */
@media(prefers-reduced-motion:reduce){
  .aws-card,.aws-slide{transition:none}
  .aws-hero .stars,.aws-hero .stars2,.aws-hero .shoot,.aws-h1 span,.aws-offer::after,
  .aws-vv .badge::after,.aws-vv .shimm,.aws-cta .txt{animation:none}
}