.passport { position:relative; isolation:isolate; overflow:hidden; background:radial-gradient(circle at 14% 35%,rgba(89,54,202,.28),transparent 39%),radial-gradient(circle at 83% 78%,rgba(253,123,39,.16),transparent 40%),#070411; border-block:1px solid rgba(167,99,222,.33); }
.passport::before { content:'✦'; position:absolute; z-index:-1; right:-.08em; top:-.19em; color:rgba(221,102,255,.055); font:900 clamp(300px,45vw,650px)/1 var(--display,Impact,sans-serif); pointer-events:none; }
.passport__inner { display:grid; grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr); align-items:center; gap:clamp(30px,6vw,86px); max-width:1200px; margin:auto; }
.passport__intro .eyebrow { color:var(--lime,#a6ff54); }
.passport__intro h2 { margin:0 0 25px; color:#fff; font:900 clamp(64px,7vw,102px)/.83 var(--display,Impact,sans-serif); letter-spacing:-.035em; text-transform:uppercase; text-shadow:0 0 25px rgba(186,73,255,.56); }
.passport__intro h2 em { color:#ffc061; font-style:normal; text-shadow:0 0 11px rgba(255,145,42,.85),0 0 32px rgba(255,111,30,.6); }
.passport__intro > p:not(.eyebrow) { max-width:460px; color:#f4e5f5; font:650 clamp(21px,2.2vw,27px)/1.14 var(--display,Impact,sans-serif); }
.passport__intro .passport__fine-print { color:#d5c0df !important; font-size:18px !important; }
.passport__card { position:relative; padding:clamp(19px,3vw,37px); border:2px solid #a77aff; border-radius:25px; background:linear-gradient(140deg,rgba(35,13,65,.98),rgba(9,6,30,.99) 68%,rgba(41,19,60,.98)); box-shadow:0 0 30px rgba(161,75,247,.37),inset 0 0 26px rgba(188,74,245,.16); }
.passport__card::after { content:''; position:absolute; inset:10px; border:1px solid rgba(235,200,255,.19); border-radius:17px; pointer-events:none; }
.passport__card-top { display:flex; justify-content:space-between; gap:10px; margin-bottom:25px; color:#f7edff; font:900 clamp(15px,2vw,20px)/1 var(--display,Impact,sans-serif); letter-spacing:.08em; }
.passport__card-top span:last-child { color:#ffbe5b; text-align:right; }
.passport__stamps { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:0; padding:0; list-style:none; }
.passport__stamps li { min-width:0; }
.passport__stamps a { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:145px; padding:15px 9px; border:2px dashed rgba(200,135,239,.48); border-radius:14px; color:#e9d5f2; background:rgba(7,3,21,.66); text-align:center; text-decoration:none; transition:transform .18s,border-color .18s,box-shadow .18s; }
.passport__stamps a:hover { transform:translateY(-3px); border-color:#9bdbff; box-shadow:0 0 16px rgba(112,198,255,.26); }
.passport__seal { display:grid; place-items:center; width:54px; height:54px; margin-bottom:8px; border:2px solid currentColor; border-radius:50%; color:#8e729d; font-size:27px; line-height:1; transform:rotate(-15deg); }
.passport__stamps strong { font:900 clamp(19px,2vw,26px)/1 var(--display,Impact,sans-serif); text-transform:uppercase; }
.passport__stamps small { margin-top:7px; color:#c8b3d0; font:800 14px/1 var(--display,Impact,sans-serif); letter-spacing:.1em; }
.passport__stamps .is-stamped a { border-style:solid; border-color:#ffc86a; color:#fff4d8; background:linear-gradient(135deg,rgba(95,41,113,.47),rgba(92,60,24,.55)); box-shadow:0 0 17px rgba(255,167,51,.26),inset 0 0 15px rgba(255,206,96,.12); }
.passport__stamps .is-stamped .passport__seal { color:#ffcf68; box-shadow:0 0 15px rgba(255,180,45,.6); text-shadow:0 0 12px #ff9e31; transform:rotate(0deg); }
.passport__stamps .is-stamped small { color:#b7ff8e; }
.passport__progress { margin:21px 0 0; color:#f7eaff; font:900 22px/1.14 var(--display,Impact,sans-serif); letter-spacing:.025em; text-align:center; }
.passport__reward { display:flex; align-items:center; gap:16px; margin-top:20px; padding:17px; border:2px solid #b8fffb; border-radius:14px; color:#f9faff; background:linear-gradient(110deg,rgba(37,95,112,.63),rgba(103,40,146,.65)); box-shadow:0 0 24px rgba(122,244,255,.42),inset 0 0 19px rgba(231,142,255,.2); }
.passport [hidden] { display:none !important; }
.passport__reward-star { flex:none; font-size:52px; line-height:1; color:#baff86; text-shadow:0 0 12px #8af055,0 0 24px #9df8f7; }
.passport__reward strong,.passport__reward span:not(.passport__reward-star),.passport__reward a { display:block; }
.passport__reward strong { font:900 25px/1 var(--display,Impact,sans-serif); text-transform:uppercase; }
.passport__reward span:not(.passport__reward-star) { margin-top:4px; color:#f3e6f7; font:700 18px/1.1 var(--display,Impact,sans-serif); }
.passport__reward a { margin-top:7px; color:#b9ffeb; font:850 18px/1.1 var(--display,Impact,sans-serif); text-decoration:underline; text-underline-offset:3px; }
.passport--complete .passport__card { border-color:#c7ffde; animation:passport-glow 2.6s ease-in-out infinite alternate; }
.passport--complete .passport__reward-star { animation:passport-star 1.8s ease-in-out infinite alternate; }
@keyframes passport-glow { to { box-shadow:0 0 42px rgba(119,241,240,.66),inset 0 0 34px rgba(255,159,85,.18); } }
@keyframes passport-star { to { transform:scale(1.18) rotate(18deg); filter:brightness(1.23); } }
.passport :focus-visible { outline:3px solid var(--lime,#a6ff54); outline-offset:4px; }
@media (max-width:850px) { .passport__inner { grid-template-columns:1fr; }.passport__intro h2 { font-size:clamp(68px,12vw,106px); }.passport__intro > p:not(.eyebrow) { max-width:690px; } }
@media (max-width:520px) { .passport__intro h2 { font-size:clamp(59px,14vw,77px); }.passport__card { padding:17px; border-radius:17px; }.passport__stamps { gap:8px; }.passport__stamps a { min-height:125px; }.passport__seal { width:47px; height:47px; font-size:24px; }.passport__stamps strong { font-size:20px; }.passport__card-top { font-size:14px; }.passport__progress { font-size:19px; }.passport__reward strong { font-size:22px; } }
@media (prefers-reduced-motion:reduce) { .passport--complete .passport__card,.passport--complete .passport__reward-star { animation:none; }.passport__stamps a { transition:none; }.passport__stamps a:hover { transform:none; } }
