:root{--bg:#0a0f17;--tx:#eaf0f9;--mu:#9fb0c7;--gl:rgba(24,36,54,.55);--gb:rgba(139,184,255,.2);--ac:#4f8cff;--ac2:#8bb8ff;--on:#07101e;--c1:#f7d65a;--c2:#ff9f43;--c3:#38d0ff;--c4:#4f8cff;--c5:#9b7bff;--pc:139,184,255;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);box-sizing:border-box}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){--bg:#eef3fa;--tx:#0e1a2e;--mu:#475a74;--gl:rgba(255,255,255,.62);--gb:rgba(40,80,150,.2);--ac:#1d5fd6;--ac2:#1f55b8;--on:#fff;--c1:#e6a800;--c2:#e8590c;--c3:#0a8ec4;--c4:#1d5fd6;--c5:#6a3fd6;--pc:29,95,214}}
:root[data-theme="light"]{--bg:#eef3fa;--tx:#0e1a2e;--mu:#475a74;--gl:rgba(255,255,255,.62);--gb:rgba(40,80,150,.2);--ac:#1d5fd6;--ac2:#1f55b8;--on:#fff;--c1:#e6a800;--c2:#e8590c;--c3:#0a8ec4;--c4:#1d5fd6;--c5:#6a3fd6;--pc:29,95,214}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:76px}
body{margin:0;background:var(--bg);color:var(--tx);font:16px/1.65 Montserrat,system-ui,-apple-system,"Segoe UI",sans-serif;overflow-x:hidden}
#bg{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.aur{position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(60vmax 40vmax at 15% 10%,rgba(var(--pc),.18),transparent 60%),radial-gradient(50vmax 40vmax at 90% 80%,rgba(155,123,255,.16),transparent 60%);animation:aur 18s ease-in-out infinite alternate}
@keyframes aur{to{filter:hue-rotate(35deg);transform:scale(1.08)}}
#bar{position:fixed;top:0;left:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--c1),var(--c3),var(--c5));z-index:60}
header{position:fixed;top:0;left:0;right:0;z-index:50;padding:calc(10px + env(safe-area-inset-top,0px)) 14px 10px}
.nv{max-width:1180px;margin:auto;display:flex;align-items:center;gap:10px;padding:8px 14px}
.glass{background:var(--gl);border:1px solid var(--gb);backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);border-radius:18px}
.bn{display:flex;align-items:center;gap:8px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;font-size:13px;color:var(--tx);text-decoration:none;white-space:nowrap}.bn svg{width:30px}
nav{display:flex;flex:1;justify-content:flex-end;overflow-x:auto;scrollbar-width:none}nav::-webkit-scrollbar{display:none}
nav a{padding:8px 12px;border-radius:10px;color:var(--mu);text-decoration:none;font-size:12px;letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;transition:.25s}
nav a:hover{color:var(--tx)}nav a.on{background:var(--ac);color:var(--on);font-weight:700}
#th{border:1px solid var(--gb);background:none;color:var(--tx);border-radius:10px;padding:6px 10px;cursor:pointer}
.btn.sm{padding:8px 16px;margin:0;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
main{position:relative;z-index:2}section{padding:96px 18px;max-width:1180px;margin:auto}
.hero{position:relative;min-height:100svh;display:grid;grid-template-columns:1.05fr .95fr;gap:20px;align-items:center;padding-top:110px}
.kick{letter-spacing:.32em;color:var(--ac2);font-weight:700;font-size:12px}
h1{font-size:clamp(34px,5.2vw,70px);line-height:1;margin:10px 0 18px;letter-spacing:-.03em;font-weight:800}
h1 .w{display:inline-block;overflow:hidden;vertical-align:top}h1 .w i{display:inline-block;font-style:normal;transform:translateY(110%);animation:up .8s cubic-bezier(.2,.9,.2,1) forwards;animation-delay:calc(var(--k)*.09s + .2s)}
h1 .g i{background:linear-gradient(90deg,var(--c3),var(--c5),var(--c1));-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200%;animation:up .8s cubic-bezier(.2,.9,.2,1) forwards,sh 5s linear infinite;animation-delay:calc(var(--k)*.09s + .2s),0s}
@keyframes up{to{transform:none}}@keyframes sh{to{background-position:200%}}
.lead{max-width:34em;color:var(--mu)}
.btn{display:inline-block;padding:13px 26px;border-radius:10px;background:var(--ac);color:var(--on);font-weight:700;text-decoration:none;margin:6px 10px 6px 0;transition:box-shadow .3s;will-change:transform}
.btn:hover{box-shadow:0 12px 30px rgba(var(--pc),.45)}.btn.s{background:none;color:var(--ac2);border:1px solid var(--ac)}
.lw{position:relative;display:grid;place-items:center;aspect-ratio:1}
.lw svg.big{width:82%;overflow:visible;filter:drop-shadow(0 0 30px rgba(var(--pc),.4));transform:translate(calc(var(--mx,0)*14px),calc(var(--my,0)*14px));transition:transform .2s}
.p{fill-opacity:0;stroke-width:3;stroke-dasharray:1;stroke-dashoffset:1;animation:dr 1.6s .3s ease forwards,fi .9s 1.5s forwards,fl 6s 2.4s ease-in-out infinite alternate;transform-box:fill-box;transition:translate .5s}
.p2{animation-delay:.6s,1.8s,2.4s}.p3{animation-delay:.9s,2.1s,2.4s}
.lw:hover .p1{translate:-14px -10px}.lw:hover .p2{translate:12px -14px}.lw:hover .p3{translate:6px 16px}
@keyframes dr{to{stroke-dashoffset:0}}@keyframes fi{to{fill-opacity:1;stroke-width:0}}@keyframes fl{to{transform:translateY(-12px)}}
.rg{position:absolute;inset:14%;border:2px solid var(--ac);border-radius:50%;opacity:0;animation:rp 4.5s ease-out infinite}.rg:nth-child(2){animation-delay:1.5s}.rg:nth-child(3){animation-delay:3s}
@keyframes rp{0%{scale:.4;opacity:.7}100%{scale:1.25;opacity:0}}
.orb{position:absolute;inset:4%;animation:sp 14s linear infinite}.orb i{position:absolute;top:0;left:50%;width:10px;height:10px;border-radius:50%;background:var(--c1);box-shadow:0 0 16px var(--c1)}.orb.o2{inset:12%;animation-duration:20s;animation-direction:reverse}.o2 i{background:var(--c3);box-shadow:0 0 16px var(--c3)}
@keyframes sp{to{rotate:360deg}}
.sc{position:absolute;bottom:0;left:50%;translate:-50% 0;font-size:11px;letter-spacing:.3em;color:var(--mu)}
.motto{padding:130px 18px;text-align:center}.motto p{font-size:clamp(28px,5.6vw,72px);line-height:1.12;font-weight:800;letter-spacing:-.02em;margin:0}
.motto .m{opacity:.15;transition:opacity .3s,color .3s;display:inline-block;margin-right:.25em}.motto .m.on{opacity:1}.motto .m.a.on{color:var(--c1)}
.motto small{display:block;margin-top:22px;letter-spacing:.4em;color:var(--ac2);font-weight:700}
.mq{overflow:hidden;border-block:1px solid var(--gb);padding:14px 0;position:relative;z-index:2;background:var(--gl)}
.mq div{display:flex;gap:44px;width:max-content;animation:mq 26s linear infinite;font-weight:800;letter-spacing:.2em;text-transform:uppercase;font-size:14px;color:var(--mu)}.mq b{color:var(--ac2)}
@keyframes mq{to{translate:-50% 0}}
h2{font-size:clamp(26px,4vw,48px);line-height:1.08;margin:0 0 12px;letter-spacing:-.02em}
.eb{letter-spacing:.3em;font-size:12px;font-weight:700;color:var(--ac2);margin-bottom:8px}
.how{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.stk{position:sticky;top:110px;padding:26px;display:grid;gap:18px;justify-items:center}
.nfc{position:relative;width:150px;aspect-ratio:1;display:grid;place-items:center}.nfc i{position:absolute;inset:0;border:2px solid var(--ac);border-radius:50%;animation:rp 3s ease-out infinite}.nfc i:nth-child(2){animation-delay:1s}.nfc i:nth-child(3){animation-delay:2s}
.nfc b{width:64px;aspect-ratio:1;border-radius:50%;background:linear-gradient(135deg,var(--c3),var(--c5));box-shadow:0 0 30px rgba(var(--pc),.6)}
.stp{display:flex;gap:10px}.stp i{width:38px;aspect-ratio:1;border-radius:50%;border:2px solid var(--ac);transition:.4s;transition-delay:calc(var(--i)*.12s)}
[data-s="2"] .stp i,[data-s="3"] .stp i{background:linear-gradient(135deg,var(--c1),var(--c2));border-color:transparent;box-shadow:0 0 14px var(--c1)}
.qr{display:none;text-align:center}[data-s="3"] .qr{display:block;animation:in .6s}.qr svg{width:120px;fill:var(--tx)}.qr b{display:block;font-size:22px;color:var(--c1)}
[data-s="3"] .nfc{display:none}.cp{font-size:13px;color:var(--mu)}
.st{padding:30px 0;opacity:.35;transition:.4s;min-height:46vh;display:flex;flex-direction:column;justify-content:center}.st.on{opacity:1}.st span{font-size:56px;font-weight:800;color:var(--ac)}
.cds{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin-top:26px}
.cd{padding:26px;position:relative;overflow:hidden;transform:perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .15s,border-color .3s}
.cd::after{content:"";position:absolute;inset:0;background:radial-gradient(260px at var(--gx,50%) var(--gy,0),rgba(var(--pc),.25),transparent);opacity:0;transition:.3s}.cd:hover::after{opacity:1}.cd:hover{border-color:var(--ac)}
.cd h3{margin:0 0 6px;font-size:22px}.cd p,.cd li{color:var(--mu);margin:0;font-size:14px}.cd ul{padding-left:18px;margin:10px 0 0}
.sg{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-top:24px}.sg div{padding:20px}.sg b{display:block;margin:8px 0 2px}.sg p{margin:0;font-size:14px;color:var(--mu)}
.sg svg{width:34px;stroke:var(--ac2);fill:none;stroke-width:2;stroke-dasharray:1;stroke-dashoffset:1}.rv.on svg{animation:dr 1.6s .3s forwards}
.rv{opacity:0;transform:translateY(34px);transition:opacity .8s,transform .8s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--d,0)*.1s)}.rv.on{opacity:1;transform:none}
.tb{display:flex;gap:8px;margin:20px 0;flex-wrap:wrap}.tb button{padding:8px 18px;border-radius:99px;border:1px solid var(--gb);background:none;color:var(--mu);font:inherit;cursor:pointer}.tb button.on{background:var(--ac);color:var(--on);border-color:var(--ac)}
.lp{display:none;max-width:780px;padding:22px}.lp.on{display:block;animation:in .5s}@keyframes in{from{opacity:0;transform:translateY(14px)}}
.lp h2{font-size:26px}details{border-top:1px solid var(--gb);padding:10px 0}summary{cursor:pointer;font-weight:700}details p,.lp p,.lp li{color:var(--mu);margin:8px 0}
.note{border-left:4px solid var(--ac);padding:8px 12px;color:var(--mu);font-size:14px;margin:10px 0}
.ct a{color:var(--ac2)}
footer{position:relative;z-index:2;text-align:center;padding:40px 18px 60px;color:var(--mu);font-size:13px}
@media(max-width:820px){.hero{grid-template-columns:1fr}.lw{max-width:380px;margin:auto}.how{grid-template-columns:1fr}.stk{position:relative;top:0}.st{min-height:auto}.nv .bn span{display:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.p{stroke-dashoffset:0;fill-opacity:1}h1 .w i{transform:none}.rv{opacity:1;transform:none}}
[hidden]{display:none!important}.ih{font-size:13px;color:var(--mu);margin:6px 0 0}.btn.s[type=button]{font:inherit;font-weight:700;cursor:pointer}
.lsel{background:var(--gl);color:var(--tx);border:1px solid var(--gb);border-radius:10px;padding:6px 8px;font:inherit;font-size:12px;max-width:110px}