:root{--ink:#06031a;--lilac:#d9c4ff;--mut:rgba(255,255,255,.72);--r:28px;--ease:cubic-bezier(.2,.8,.2,1)}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{font-family:"Saira Semi Condensed",system-ui,sans-serif;background:var(--ink);color:#fff;overflow-x:hidden;line-height:1.4}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid #fff;outline-offset:3px}
.nav{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:16px clamp(18px,4vw,56px)}
.nav div{display:flex;align-items:center;gap:26px;color:var(--mut)}
.nav a:hover{color:#fff}
.brand{display:flex;align-items:center;gap:10px;font-size:22px;font-weight:700;color:#fff}
.brand img{width:32px;height:32px}
.pill{padding:8px 18px;border-radius:99px;background:#fff;color:#1a0f4a!important;font-weight:600}

/* HERO: vòm đen -> dải sáng + logo -> vòm tím (như ảnh mẫu) */
.hero{position:relative;overflow:hidden;background:linear-gradient(#030110 0,#5a46c8 55%,#6c55dc 100%)}
.copy{position:relative;z-index:2;text-align:center;padding:150px 20px 210px}
.copy::before{content:"";position:absolute;z-index:-1;left:-25vw;right:-25vw;top:-320px;bottom:-60px;background:#02010c;border-radius:0 0 50% 50%/0 0 100% 100%;box-shadow:0 30px 140px 20px rgba(150,110,255,.85),0 12px 40px 4px rgba(217,196,255,.9)}
h1{font-size:clamp(44px,8.5vw,112px);font-weight:300;line-height:.98;letter-spacing:-.025em}
h1 b{font-weight:700}
.w{display:inline-block;opacity:0;filter:blur(14px);transform:translateY(24px);animation:in 1s var(--ease) forwards;animation-delay:calc(var(--i)*90ms)}
@keyframes in{to{opacity:1;filter:none;transform:none}}
h1 b .w{background:linear-gradient(180deg,#fff,var(--lilac));-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{max-width:560px;margin:26px auto 0;font-size:clamp(18px,2.2vw,22px);color:var(--mut);animation:rise 1s .9s var(--ease) both}
.actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:34px;animation:rise 1s 1.05s var(--ease) both}
.btn{display:inline-block;padding:16px 32px;border-radius:99px;background:#fff;color:#1a0f4a;font-size:19px;font-weight:600;box-shadow:0 8px 50px rgba(150,110,255,.9);transition:transform .25s,box-shadow .25s}
.btn:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 14px 80px rgba(190,150,255,1)}
.btn.ghost{background:rgba(255,255,255,.1);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.meta{margin-top:16px;font-size:15px;color:var(--mut)}
@keyframes rise{from{opacity:0;transform:translateY(26px)}}

.orb{position:relative;z-index:3;height:260px;margin-top:-130px;display:grid;place-items:center;perspective:700px}
.band{position:absolute;left:50%;top:50%;translate:-50% -50%;width:150vw;height:190px;border-radius:50%;background:radial-gradient(closest-side,#fff 30%,rgba(217,196,255,.85) 62%,transparent);filter:blur(22px);animation:breathe 6s ease-in-out infinite}
@keyframes breathe{50%{height:240px;opacity:.9}}
.ring{position:absolute;left:50%;top:50%;translate:-50% -50%;border-radius:50%;border:1.5px solid rgba(120,90,255,.55);animation:ping 5s var(--ease) infinite}
.r1{width:190px;height:190px}.r2{width:190px;height:190px;animation-delay:1.6s}.r3{width:190px;height:190px;animation-delay:3.2s}
@keyframes ping{from{scale:.8;opacity:1}to{scale:3.2;opacity:0}}
#orbLogo{position:relative;width:176px;height:176px;border-radius:40px;filter:drop-shadow(0 0 60px rgba(60,140,255,.9));transition:transform .15s;will-change:transform;animation:rise 1.2s .6s var(--ease) both}

.lower{position:relative;padding:60px 20px 120px;margin-top:-30px}
.lower::before{content:"";position:absolute;inset:0 -20vw;border-radius:50% 50% 0 0/90px 90px 0 0;background:linear-gradient(#7a5cf0,#4a38b0 60%,var(--ink));z-index:0}
.mac{position:relative;z-index:1;width:min(860px,100%);margin:0 auto;border-radius:var(--r);overflow:hidden;padding-bottom:26px;text-align:center;background:linear-gradient(160deg,rgba(30,16,90,.85),rgba(8,5,36,.92));border:1px solid rgba(255,255,255,.28);box-shadow:0 40px 120px rgba(10,4,60,.8),inset 0 1px 0 rgba(255,255,255,.3)}
.menubar{height:34px;display:flex;gap:7px;align-items:center;padding:0 16px;background:rgba(0,0,0,.35)}
.menubar span{width:11px;height:11px;border-radius:50%;background:#ff5f57}.menubar span:nth-child(2){background:#febc2e}.menubar span:nth-child(3){background:#28c840}
.notch{position:relative;margin:-34px auto 0;height:var(--h,32px);width:var(--w,190px);background:#000;border-radius:0 0 var(--br,20px) var(--br,20px);transition:width .6s cubic-bezier(.3,1.4,.4,1),height .6s cubic-bezier(.3,1.4,.4,1),border-radius .6s;overflow:hidden;box-shadow:0 20px 60px rgba(138,99,255,.5);text-align:left}
.n-in{padding:14px 20px;display:flex;align-items:center;gap:14px;white-space:nowrap;animation:fade .5s .15s both}
@keyframes fade{from{opacity:0;transform:scale(.94)}}
.n-in small{display:block;color:var(--mut);font-size:13px}
.n-in strong{font-size:17px;font-weight:600}
.art{width:52px;height:52px;border-radius:14px;background:linear-gradient(135deg,#5aa8ff,#8a63ff);flex:none}
.eq,.n-eq{display:flex;align-items:flex-end;gap:3px;height:28px;margin-left:auto}
.eq i,.n-eq i{width:4px;border-radius:3px;background:linear-gradient(#9ad0ff,#7c5cff);height:30%;animation:bar 1s ease-in-out infinite alternate}
.eq i:nth-child(2n),.n-eq i:nth-child(2n){animation-delay:-.4s}.eq i:nth-child(3n),.n-eq i:nth-child(3n){animation-delay:-.7s}
@keyframes bar{to{height:100%}}
.chip{padding:8px 12px;border-radius:10px;background:rgba(255,255,255,.14);font-size:14px}
.cam{width:56px;height:56px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#7c5cff 45%,#1a0f4a);box-shadow:0 0 0 3px #16e0c4}
.bat{width:120px;height:10px;border-radius:9px;background:rgba(255,255,255,.2);overflow:hidden;margin-top:6px}.bat i{display:block;width:82%;height:100%;background:#30d158}
.hint{margin:120px 0 12px;color:var(--mut);font-size:15px}
.tabs{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;padding:0 16px}
.tabs button{font:inherit;font-size:16px;color:#fff;padding:10px 20px;border-radius:99px;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);cursor:pointer;transition:background .2s,color .2s}
.tabs button[aria-selected=true]{background:#fff;color:#1a0f4a}

/* Tính năng + tải về trên nền tối, chữ trắng dễ đọc */
.features,.get{position:relative;max-width:1120px;margin:0 auto;padding:60px clamp(18px,4vw,56px) 110px}
h2{font-size:clamp(34px,5.5vw,68px);font-weight:600;text-align:center;line-height:1.02;letter-spacing:-.02em}
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:56px}
.c{position:relative;padding:26px;border-radius:var(--r);min-height:230px;display:flex;flex-direction:column;background:linear-gradient(160deg,rgba(40,24,120,.45),rgba(14,8,50,.7));border:1px solid rgba(255,255,255,.14);overflow:hidden;transition:transform .3s,border-color .3s;opacity:0;transform:translateY(40px)}
.c.on{opacity:1;transform:none;transition:opacity .8s var(--ease),transform .8s var(--ease),border-color .3s}
.c::before{content:"";position:absolute;inset:0;background:radial-gradient(320px circle at var(--x,50%) var(--y,0%),color-mix(in srgb,var(--c) 40%,transparent),transparent 70%);opacity:0;transition:opacity .3s}
.c:hover{border-color:var(--c)}.c:hover::before{opacity:1}
.c.wide{grid-column:span 2;grid-row:span 2}
.ic{position:relative;width:54px;height:54px;border-radius:16px;display:grid;place-items:center;color:var(--c);background:color-mix(in srgb,var(--c) 22%,#0a0620);margin-bottom:auto}
.ic svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.c h3{position:relative;font-size:26px;font-weight:600;margin-top:40px}
.c p{position:relative;color:var(--mut);margin-top:4px;font-size:17px}
.c .eq{position:relative;height:110px;gap:8px;margin:26px 0 0}.c .eq i{width:100%;max-width:24px}
.get{text-align:center;padding-bottom:150px}
.get::before{content:"";position:absolute;left:50%;top:40%;translate:-50% -50%;width:min(900px,120vw);height:420px;border-radius:50%;background:radial-gradient(closest-side,rgba(138,99,255,.6),transparent);z-index:-1}
.get img{width:120px;border-radius:28px;filter:drop-shadow(0 0 60px rgba(90,168,255,.9))}
.get h2{margin-top:24px}
.get .btn{margin-top:32px}
footer{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:24px clamp(18px,4vw,56px);color:rgba(255,255,255,.7);border-top:1px solid rgba(255,255,255,.14);font-size:15px}
@media(max-width:860px){.bento{grid-template-columns:repeat(2,1fr)}.nav div a:not(.pill){display:none}}
@media(max-width:520px){.bento{grid-template-columns:1fr}.c.wide{grid-column:auto;grid-row:auto}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.w,.c{opacity:1;filter:none;transform:none}}