/* Layout: the physical NFC card is the page header; below it a profile strip, a WhatsApp bar, a tight 2-column link grid and one contact panel.
   Behind everything: a flowing pastel gradient with Dart code typing itself. Light-only by design. */
:root{--bg:#f4f5fb;--glass:rgba(255,255,255,.93);--glass-h:#ffffff;--line:rgba(20,22,40,.07);--ink:#141628;--muted:#5f6680;
 --blue:#2f6bff;--violet:#7b4dff;--pink:#ff3d8b;--teal:#00bfa6;--sun:#ffb020;--green:#1fc46b;
 --r:18px;--r-sm:12px;--grad:linear-gradient(110deg,#2f6bff,#7b4dff 50%,#ff3d8b);
 --disp:"Unbounded",system-ui,sans-serif;--sans:"DM Sans",system-ui,sans-serif;--mono:"JetBrains Mono",ui-monospace,monospace;color-scheme:light}
html{scroll-behavior:smooth}
html,body{background:var(--bg)}
body{color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.5;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:20px 36px;overflow-x:hidden;position:relative;min-height:100vh}

/* ---------- background ---------- */
.mesh{position:fixed;inset:-10%;z-index:0;pointer-events:none;opacity:.7;
 background:linear-gradient(115deg,#e9efff 0%,#f1e9ff 22%,#ffe9f2 44%,#e5faf4 66%,#fff4e0 84%,#e9efff 100%);background-size:400% 400%;animation:mesh 22s ease-in-out infinite alternate}
.mesh::before,.mesh::after{content:"";position:absolute;border-radius:50%;filter:blur(80px);opacity:.4;animation:drift 18s ease-in-out infinite alternate}
.mesh::before{width:46vmax;height:46vmax;left:-8vmax;top:-10vmax;background:#9db8ff}
.mesh::after{width:40vmax;height:40vmax;right:-10vmax;bottom:-6vmax;background:#ffb7d6;animation-duration:24s}
#code{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;
 -webkit-mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent)}
.veil{display:none}
@media (min-width:600px){.veil{display:block;position:fixed;inset:0;z-index:0;pointer-events:none;background:linear-gradient(90deg,transparent calc(50% - 360px),rgba(244,245,251,.8) calc(50% - 250px),rgba(244,245,251,.8) calc(50% + 250px),transparent calc(50% + 360px))}}
.prog{position:fixed;left:0;top:0;height:3px;width:100%;z-index:40;transform-origin:0 50%;transform:scaleX(0);background:var(--grad)}

/* ---------- splash ---------- */
.splash{position:fixed;inset:0;z-index:30;background:var(--bg);display:grid;place-items:center;animation:splashOut .7s cubic-bezier(.7,0,.3,1) 2s forwards}
.boot{display:flex;flex-direction:column;align-items:center;gap:14px;animation:bootOut .7s cubic-bezier(.7,0,.3,1) 2s forwards}
.boot svg{width:120px;height:120px}
.boot .pin{stroke:url(#sg);stroke-width:3;stroke-linecap:round;fill:none;stroke-dasharray:40;stroke-dashoffset:40;animation:draw .5s ease-out forwards}
.boot .body{fill:#fff;stroke:url(#sg);stroke-width:3;stroke-dasharray:300;stroke-dashoffset:300;animation:draw .8s ease-out .1s forwards}
.boot .core{fill:url(#sg);opacity:0;animation:fadeIn .3s ease-out .8s forwards}
.boot .word{font-family:var(--disp);font-weight:800;font-size:28px;letter-spacing:-.02em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:0;animation:wordIn .5s cubic-bezier(.3,1.4,.5,1) .85s forwards}
.boot .log{font-family:var(--mono);font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;width:0;min-height:1.4em;border-right:2px solid var(--violet);animation:type .9s steps(22) 1s forwards,caret .6s step-end infinite}

.wrap{position:relative;z-index:1;max-width:460px;margin:0 auto;display:flex;flex-direction:column;gap:12px;padding-top:8px}
.rv{animation:up .7s cubic-bezier(.2,.9,.25,1.1) both;animation-delay:calc(var(--base,2.15s) + var(--i) * 70ms)}
.rv.later{animation:none!important;opacity:0;transform:translateY(28px);transition:opacity .6s ease,transform .7s cubic-bezier(.2,.9,.25,1.1)}
.rv.later.in{opacity:1;transform:none}

/* ---------- the card ---------- */
.stage{perspective:1100px;animation:cardIn 1.2s cubic-bezier(.2,.9,.25,1) 2.05s both}
.card{position:relative;aspect-ratio:85.6/54;max-width:100%;border-radius:14px;overflow:hidden;background:#fbfbfe;
 box-shadow:0 1px 0 #fff inset,0 0 0 1px rgba(20,22,40,.06),0 24px 50px -24px rgba(50,40,140,.45);
 transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .25s ease-out;transform-style:preserve-3d;container-type:inline-size}
.card .wash{position:absolute;inset:0;background:radial-gradient(55% 60% at 100% 0%,rgba(123,77,255,.16),transparent 70%),radial-gradient(50% 55% at 0% 100%,rgba(0,191,166,.13),transparent 70%),radial-gradient(40% 45% at 90% 100%,rgba(255,61,139,.1),transparent 70%)}
.card .pcb{position:absolute;inset:0;width:100%;height:100%}
.card .pcb .flow{stroke-dasharray:3 9;animation:flow 3s linear infinite}
.card .fade{position:absolute;inset:0;background:linear-gradient(90deg,#fbfbfe 0%,rgba(251,251,254,.92) 36%,rgba(251,251,254,0) 68%)}
.card .shine{position:absolute;inset:-50%;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.75) 50%,transparent 60%);transform:translateX(var(--sx,-60%));transition:transform .3s ease-out;pointer-events:none;animation:sweep 1.4s ease-out 2.9s both}
.card .in{position:absolute;inset:0;padding:7.5cqw 8cqw}
.brand{position:absolute;left:8cqw;top:7.5cqw;font-family:var(--disp);font-weight:800;font-size:7cqw;letter-spacing:-.03em;line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.brand small{display:block;font-family:var(--mono);font-weight:500;font-size:2.15cqw;letter-spacing:.32em;margin-top:1.7cqw;-webkit-text-fill-color:#6a7190}
.tap{position:absolute;right:8cqw;top:8cqw;font-family:var(--mono);font-size:2.2cqw;letter-spacing:.15em;color:#6a7190;text-align:right;line-height:1.5}
.emv{position:absolute;left:8cqw;top:25cqw;width:13cqw;height:auto}
.num{position:absolute;left:8cqw;top:39.5cqw;font-family:var(--mono);font-weight:700;font-size:3.2cqw;letter-spacing:.22em;color:#2a2f4a;white-space:nowrap}
.num span{color:var(--violet)}
.holder{position:absolute;left:8cqw;bottom:8.5cqw;font-family:var(--disp);font-weight:700;font-size:4.3cqw;letter-spacing:.01em;line-height:1;white-space:nowrap}
.holder small{display:block;font-family:var(--sans);font-weight:700;font-size:2cqw;letter-spacing:.3em;color:#6a7190;margin-bottom:1.5cqw}
.nfc{position:absolute;right:7cqw;bottom:6.5cqw;display:flex;flex-direction:column;align-items:center;gap:.6cqw;padding:2cqw 2.4cqw 1.5cqw;border-radius:2.6cqw;background:rgba(255,255,255,.94);
 box-shadow:0 0 0 1px rgba(123,77,255,.16),0 6px 16px -8px rgba(60,40,140,.35)}
.nfc svg{width:12cqw;height:12cqw;display:block}
.nfc svg path{animation:wave 1.8s ease-in-out infinite}
.nfc .w2{animation-delay:.15s!important}.nfc .w3{animation-delay:.3s!important}.nfc .w4{animation-delay:.45s!important}
.nfc b{font-family:var(--disp);font-weight:800;font-size:2.8cqw;letter-spacing:.12em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- profile strip ---------- */
.panel{background:var(--glass);border:1px solid var(--line);border-radius:var(--r);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);
 box-shadow:0 1px 2px rgba(20,22,40,.04),0 16px 36px -22px rgba(30,40,90,.38)}
.me{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;padding:18px;align-items:center}
.av{width:68px;height:68px;border-radius:16px;padding:2px;background:conic-gradient(from 0deg,var(--blue),var(--violet),var(--pink),var(--sun),var(--teal),var(--blue));animation:hue 6s linear infinite;grid-row:span 2}
.av img{width:100%;height:100%;border-radius:14px;object-fit:cover;display:block;border:2px solid #fff}
.me h1{font-family:var(--disp);font-weight:700;font-size:17px;line-height:1.2;margin:0;letter-spacing:-.01em;min-width:0}
.me .st{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted)}
.me .st::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green);animation:ping 1.8s infinite;flex:none}
.me p{grid-column:1/-1;margin:8px 0 0;font-size:13.5px;color:var(--muted)}
.me p b{color:var(--ink);font-weight:700}
.term{grid-column:1/-1;margin-top:10px;font-family:var(--mono);font-size:12px;background:#141628;color:#cfd6ff;border-radius:var(--r-sm);padding:8px 11px;display:flex;gap:8px;align-items:center;overflow:hidden;white-space:nowrap}
.term .p{color:var(--teal)}.term .k{color:#ff9ac4}.term .s{color:#ffd27a}
.term .cur{width:7px;height:14px;background:#cfd6ff;animation:caret .8s step-end infinite;flex:none}

.lbl{font-family:var(--mono);font-size:11.5px;color:var(--ink);margin:6px 0 -2px;display:flex;align-items:center;gap:8px}
.lbl span{background:var(--glass-h);border:1px solid var(--line);border-radius:999px;padding:3px 9px;backdrop-filter:blur(8px)}
.lbl::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}
.lbl b{color:var(--violet);font-weight:500}

/* ---------- links ---------- */
a.l{display:flex;align-items:center;gap:12px;padding:12px 14px;text-decoration:none;color:var(--ink);min-width:0;position:relative;overflow:hidden;
 transition:transform .2s,background .2s,box-shadow .2s,border-color .2s}
a.l::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--c,var(--grad));transform:scaleX(0);transform-origin:0 50%;transition:transform .35s}
a.l:hover{transform:translateY(-2px);background:var(--glass-h);border-color:rgba(20,22,40,.14)}
a.l:hover::after{transform:scaleX(1)}
a.l:active{transform:scale(.98)}
a.l:focus-visible,button.cp:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
.ico{width:36px;height:36px;border-radius:var(--r-sm);display:grid;place-items:center;color:#fff;flex:none;background:var(--c);transition:transform .25s}
.ico svg{width:19px;height:19px}
a.l:hover .ico{transform:rotate(-8deg) scale(1.06)}
.tx{min-width:0;flex:1}
.tx b{display:block;font-weight:700;font-size:14px;line-height:1.25}
.tx span{display:block;font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--mono);letter-spacing:-.01em}
.ar{color:var(--muted);flex:none;font-size:14px;transition:transform .2s,color .2s}
a.l:hover .ar{transform:translate(2px,-2px);color:var(--ink)}
.wide .eq{margin-right:6px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:440px){.grid .ar{display:none}.grid a.l{gap:10px;padding:10px}.tx span{font-size:11.5px}}

a.wa{padding:12px 14px;border:none;border-radius:var(--r);box-shadow:0 12px 26px -16px rgba(0,150,140,.6);color:#fff;background:linear-gradient(115deg,#13b45c,#00bfa6 50%,#2fb6ff);background-size:200% 100%;animation:shift 6s ease-in-out infinite alternate}
a.wa .ico{background:rgba(255,255,255,.2);width:40px;height:40px}
a.wa .tx b{font-family:var(--disp);font-size:15px}
a.wa .tx span{color:rgba(255,255,255,.85);font-family:var(--sans)}
a.wa .ar{color:#fff;font-size:18px}
a.wa:hover{background:linear-gradient(115deg,#13b45c,#00bfa6 50%,#2fb6ff);background-size:200% 100%}
.c-li{--c:linear-gradient(135deg,#2f6bff,#5aa9ff)}
.c-gh{--c:linear-gradient(135deg,#141628,#454b75)}
.c-ig{--c:linear-gradient(135deg,#ffb020,#ff3d8b 50%,#7b4dff)}
.c-sp{--c:linear-gradient(135deg,#1fc46b,#00bfa6)}
.c-tt{--c:linear-gradient(135deg,#141628,#ff3d8b)}
.c-fb{--c:linear-gradient(135deg,#2f6bff,#7b4dff)}
.c-tg{--c:linear-gradient(135deg,#2aabee,#2f6bff)}
.c-ip{--c:linear-gradient(135deg,#5b2dbd,#a24bff)}
.c-td{--c:linear-gradient(135deg,#141628,#2b2f45)}
.c-td .ico{color:#c8ff4d}
.grid .wide{grid-column:1/-1}
.pay .tx b::after{content:"PAY";margin-left:7px;font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.08em;color:var(--violet);background:rgba(123,77,255,.1);padding:2px 6px;border-radius:5px;vertical-align:1px}
.eq{display:inline-flex;gap:2px;align-items:flex-end;height:12px;flex:none}
.eq i{width:2px;background:var(--green);border-radius:1px;animation:eq .9s ease-in-out infinite alternate}
.eq i:nth-child(2){animation-delay:.2s}.eq i:nth-child(3){animation-delay:.4s}

.contact{display:flex;flex-direction:column}
button.cp{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:12px;padding:14px 16px;cursor:pointer;min-width:0}
button.cp+button.cp{border-top:1px solid var(--line)}
button.cp svg{width:17px;height:17px;color:var(--violet);flex:none}
button.cp .v{flex:1;min-width:0;overflow-wrap:anywhere;font-weight:600;font-size:14px;font-variant-numeric:tabular-nums}
button.cp .cl{font-family:var(--mono);font-size:11px;color:var(--muted);background:rgba(20,22,40,.05);padding:3px 8px;border-radius:5px;flex:none;transition:background .2s,color .2s}
button.cp:hover .cl{background:rgba(123,77,255,.12);color:var(--violet)}
button.cp.ok .cl{background:var(--green);color:#fff}

.foot{display:flex;justify-content:space-between;align-items:center;margin-top:6px;padding:0 6px;font-family:var(--mono);font-size:11px;color:var(--muted)}
.foot .m{font-family:var(--disp);font-weight:800;font-size:14px;letter-spacing:-.02em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.ripple{position:fixed;z-index:0;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;border:2px solid var(--violet);pointer-events:none;animation:rip .8s ease-out forwards}

@keyframes mesh{0%{background-position:0% 50%}100%{background-position:100% 50%}}
@keyframes drift{to{transform:translate(8vmax,6vmax) scale(1.12)}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fadeIn{to{opacity:1}}
@keyframes wordIn{from{opacity:0;transform:translateY(8px) scale(.9)}to{opacity:1;transform:none}}
@keyframes type{to{width:22ch}}
@keyframes caret{50%{border-color:transparent;opacity:0}}
@keyframes splashOut{to{opacity:0;visibility:hidden;clip-path:circle(0% at 50% 45%)}}
@keyframes bootOut{to{transform:scale(.6) translateY(-40px);opacity:0}}
@keyframes cardIn{0%{opacity:0;transform:translateY(-30px) rotateX(70deg) scale(.85)}60%{opacity:1}100%{opacity:1;transform:none}}
@keyframes sweep{from{transform:translateX(-60%)}to{transform:translateX(60%)}}
@keyframes up{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes flow{to{stroke-dashoffset:-24}}
@keyframes wave{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes hue{to{filter:hue-rotate(360deg)}}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(31,196,107,.5)}70%,100%{box-shadow:0 0 0 7px rgba(31,196,107,0)}}
@keyframes shift{to{background-position:100% 0}}
@keyframes eq{from{height:2px}to{height:11px}}
@keyframes rip{to{transform:scale(9);opacity:0}}

.av .ini{width:100%;height:100%;border-radius:14px;display:grid;place-items:center;background:#fff;font-family:var(--disp);font-weight:700;font-size:22px;color:var(--violet)}