/* Miracle.Dev public site theme (matches the brand mockup). Loaded after base.css. */
:root{
  --bg:#02030A; --bg2:#04050D; --panel:#0A0B14; --panel2:#10121D; --line:rgba(255,255,255,.085); --line2:rgba(255,255,255,.16);
  --text:#E8E9F2; --head:#fff; --muted:#9A9BB0; --accent:#7773FF; --accent2:#B8C8FF; --blue:#4F7CFF;
  --grad-text:linear-gradient(92deg,#B7A9FF 0%,#8E8CFF 38%,#6FA0FF 100%);
  --grad-btn:linear-gradient(135deg,#7773FF 0%,#5B8CFF 100%);
  --glass:rgba(255,255,255,.04);
}
html{background:var(--bg)}
body{background:var(--bg);overflow-x:hidden}
::selection{background:rgba(119,115,255,.45)}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.rv.in{opacity:1;transform:none}
html:not(.js) .rv{opacity:1;transform:none}
.grad{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.grad.shimmer{background-size:220% 100%;animation:shimmer 7s linear infinite}
@keyframes shimmer{0%{background-position:0% 0}100%{background-position:-220% 0}}

/* ---------- nav ---------- */
.mnav{position:fixed;inset:0 0 auto 0;z-index:50;transition:background .3s,backdrop-filter .3s,border-color .3s;border-bottom:1px solid transparent}
.mnav.scrolled{background:rgba(3,4,10,.72);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-color:var(--line)}
.mnav-in{display:flex;align-items:center;justify-content:space-between;height:84px;gap:20px}
.mnav .brand img{height:38px}
.mlinks{display:flex;align-items:center;gap:6px}
.mlinks>a,.mlinks .dd>button{background:none;border:0;color:#E6E7F2;font:600 14.5px var(--font);padding:10px 16px;border-radius:999px;cursor:pointer;text-decoration:none;display:inline-flex;gap:6px;align-items:center;transition:background .2s,color .2s}
.mlinks>a:hover,.mlinks .dd>button:hover,.mlinks .dd:focus-within>button,.mlinks>a.on{background:rgba(255,255,255,.07);color:#fff}
.dd{position:relative}
.dd>button svg{width:11px;height:11px;transition:transform .25s}
.dd:hover>button svg,.dd:focus-within>button svg{transform:rotate(180deg)}
.dd-menu{position:absolute;top:calc(100% + 6px);left:50%;transform:translate(-50%,8px);min-width:230px;background:rgba(12,13,24,.96);backdrop-filter:blur(18px);border:1px solid var(--line2);border-radius:18px;padding:8px;opacity:0;visibility:hidden;transition:.22s;box-shadow:0 24px 70px rgba(0,0,0,.6),0 0 40px rgba(94,110,255,.12)}
.dd:hover .dd-menu,.dd:focus-within .dd-menu{opacity:1;visibility:visible;transform:translate(-50%,0)}
.dd-menu a{display:flex;flex-direction:column;gap:2px;padding:10px 14px;border-radius:12px;text-decoration:none;color:#fff;font-weight:650;font-size:14px}
.dd-menu a small{color:var(--muted);font-weight:500;font-size:12.5px}
.dd-menu a:hover{background:rgba(255,255,255,.07)}
.pill-w{display:inline-flex;align-items:center;gap:9px;background:#fff;color:#05060b;border:0;border-radius:999px;padding:13px 24px;font:700 14.5px var(--font);text-decoration:none;cursor:pointer;transition:transform .2s,box-shadow .25s;white-space:nowrap}
.pill-w:hover{transform:translateY(-2px);box-shadow:0 0 0 5px rgba(184,200,255,.18),0 14px 40px rgba(110,130,255,.35)}
.pill-w svg{width:16px;height:16px}
.pill-o{display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.03);color:#fff;border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:13px 24px;font:650 14.5px var(--font);text-decoration:none;cursor:pointer;transition:.25s;white-space:nowrap}
.pill-o:hover{border-color:#fff;background:rgba(255,255,255,.09);transform:translateY(-2px)}
.pill-o svg{width:16px;height:16px}
.pill-w.lg,.pill-o.lg{padding:16px 30px;font-size:15.5px}
.play{width:26px;height:26px;border-radius:50%;background:#05060b;display:grid;place-items:center;margin-left:-10px}
.play svg{width:11px;height:11px;fill:#fff;margin-left:2px}
.burger{display:none;background:rgba(255,255,255,.07);border:1px solid var(--line2);color:#fff;border-radius:12px;width:44px;height:44px;font-size:20px;cursor:pointer}
@media(max-width:900px){
  .mlinks{position:fixed;inset:84px 12px auto 12px;flex-direction:column;align-items:stretch;background:rgba(8,9,18,.97);border:1px solid var(--line2);border-radius:22px;padding:12px;display:none;max-height:calc(100vh - 110px);overflow:auto}
  .mlinks.open{display:flex}
  .dd-menu{position:static;transform:none;opacity:1;visibility:visible;box-shadow:none;border:0;background:none;padding:0 0 6px 10px;min-width:0}
  .dd:hover .dd-menu,.dd:focus-within .dd-menu{transform:none}
  .dd>button{width:100%;justify-content:space-between}
  .burger{display:block}
  .mnav-cta{display:none}
  .mnav-in{height:70px}.mnav .brand img{height:32px}
}

/* ---------- hero ---------- */
.hero{position:relative;padding:170px 0 0;overflow:hidden;isolation:isolate}
.dots{position:absolute;inset:0;z-index:-3;background-image:radial-gradient(circle,rgba(255,255,255,.5) 1.1px,transparent 1.6px);background-size:28px 28px;-webkit-mask-image:radial-gradient(ellipse 62% 55% at 50% 38%,transparent 25%,#000 90%);mask-image:radial-gradient(ellipse 62% 55% at 50% 38%,transparent 25%,#000 90%);opacity:.8}
.dots.t2{background-size:56px 56px;background-position:14px 14px;opacity:.9;animation:twinkle 5s ease-in-out infinite}
.dots.t3{background-size:84px 84px;background-position:40px 26px;opacity:.9;animation:twinkle 7s ease-in-out -2s infinite}
@keyframes twinkle{0%,100%{opacity:.15}50%{opacity:.95}}
.hero-glow{position:absolute;left:50%;top:0;width:1200px;height:700px;transform:translateX(-50%);z-index:-2;background:radial-gradient(ellipse at 50% 0%,rgba(100,92,255,.28),transparent 62%);animation:breathe 8s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.7}50%{opacity:1}}
#fx{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.hero-in{text-align:center;position:relative}
.announce{display:inline-flex;align-items:center;gap:14px;padding:6px 6px 6px 22px;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:rgba(255,255,255,.035);color:#fff;font-weight:600;font-size:14px;text-decoration:none;position:relative;overflow:hidden;transition:.25s}
.announce::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(190,200,255,.25) 50%,transparent 70%);transform:translateX(-120%);animation:sweep 4.5s ease-in-out infinite}
@keyframes sweep{0%,55%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
.announce:hover{border-color:#fff;transform:translateY(-1px)}
.announce i{width:34px;height:34px;border-radius:50%;background:#fff;color:#05060b;display:grid;place-items:center;font-style:normal;transition:transform .25s}
.announce:hover i{transform:translateX(3px)}
.announce i svg{width:16px;height:16px}
.hero h1{font-size:clamp(2.7rem,7.4vw,5.6rem);font-weight:800;letter-spacing:-.045em;line-height:1.04;margin:34px 0 0}
.hero .sub{font-size:clamp(1.25rem,2.8vw,2rem);font-weight:500;color:#E3E4F0;letter-spacing:-.015em;margin:18px 0 0}
.hero .desc{max-width:560px;margin:22px auto 0;color:#C5C6D8;font-size:1.06rem;line-height:1.6}
.hero .cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:34px}
.arc-wrap{position:relative;margin-top:70px}
.arc{position:absolute;left:50%;top:62px;width:max(2400px,230vw);aspect-ratio:1;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,#02030A 90%,#0a0f3a);z-index:-1;border-top:2px solid transparent;box-shadow:0 -8px 50px 4px rgba(120,145,255,.85),0 -40px 160px 30px rgba(100,80,255,.45),inset 0 30px 90px rgba(80,100,255,.5)}
.arc::before{content:"";position:absolute;inset:-2px;border-radius:50%;padding:2px;background:linear-gradient(180deg,#C8D2FF,rgba(120,110,255,.9) 14%,transparent 30%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.arc::after{content:"";position:absolute;left:50%;top:-10px;width:60%;height:60px;transform:translateX(-50%);background:radial-gradient(ellipse at 50% 100%,rgba(190,200,255,.55),transparent 70%);filter:blur(8px);animation:breathe 5s ease-in-out infinite}
.works{text-align:center;position:relative;z-index:1}
.works .lbl{display:flex;align-items:center;gap:22px;justify-content:center;color:#E3E4F0;font-weight:600;font-size:14.5px;margin-bottom:26px}
.works .lbl::before,.works .lbl::after{content:"";height:1px;width:min(18vw,170px);background:linear-gradient(90deg,transparent,rgba(255,255,255,.3))}
.works .lbl::after{transform:scaleX(-1)}
.logos{display:flex;gap:clamp(22px,5vw,64px);justify-content:center;align-items:center;flex-wrap:wrap;color:#D8D9E8;font-weight:700;font-size:1.35rem;letter-spacing:-.02em}
.logos span{display:inline-flex;align-items:center;gap:8px;opacity:.9;transition:.25s}
.logos span:hover{opacity:1;color:#fff;transform:translateY(-2px)}
.logos svg{width:22px;height:22px}

/* ---------- product window ---------- */
.win{position:relative;margin:56px auto 0;max-width:1080px;border-radius:30px;border:1px solid rgba(255,255,255,.14);background:linear-gradient(180deg,rgba(18,20,38,.88),rgba(7,8,16,.95));box-shadow:0 0 0 1px rgba(120,130,255,.12),0 50px 120px rgba(40,50,200,.28),0 0 80px rgba(110,90,255,.14);padding:14px;transform:perspective(1600px) rotateX(3deg);transition:transform .8s;overflow:hidden}
.win:hover{transform:perspective(1600px) rotateX(0)}
.win::before{content:"";position:absolute;inset:0;border-radius:30px;padding:1px;background:linear-gradient(135deg,rgba(190,200,255,.5),transparent 30%,transparent 70%,rgba(120,100,255,.5));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.win-grid{display:grid;grid-template-columns:200px 1fr;gap:14px;min-height:480px;text-align:left}
.w-side{border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.025);padding:18px 14px;display:flex;flex-direction:column;gap:6px}
.w-side .brand{padding:2px 8px 16px}.w-side .brand img{height:30px}
.w-side a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:12px;color:#C9CADB;font-size:13.5px;font-weight:600;text-decoration:none;pointer-events:none}
.w-side a svg{width:16px;height:16px;opacity:.85}
.w-side a.on{background:rgba(119,115,255,.2);color:#fff;box-shadow:inset 0 0 0 1px rgba(150,150,255,.25)}
.w-lic{margin-top:auto;border:1px solid var(--line);border-radius:16px;padding:12px;font-size:12.5px;color:#C9CADB;display:flex;gap:10px;align-items:center;background:rgba(255,255,255,.03)}
.w-lic b{display:block;color:#fff;font-size:12.5px}
.w-lic .ok{width:28px;height:28px;border-radius:9px;background:rgba(61,220,151,.15);color:#3DDC97;display:grid;place-items:center}
.w-main{border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.02);padding:16px;display:flex;flex-direction:column;gap:14px;min-width:0}
.w-top{display:flex;gap:12px;align-items:center}
.w-search{flex:1;height:40px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--line);display:flex;align-items:center;gap:10px;padding:0 16px;color:#8B8CA3;font-size:13px}
.w-search svg{width:15px;height:15px}
.w-bell{position:relative;width:38px;height:38px;display:grid;place-items:center;color:#d6d7e6}
.w-bell svg{width:20px;height:20px;animation:ring 6s ease-in-out infinite;transform-origin:50% 8%}
.w-bell::after{content:"";position:absolute;top:6px;right:8px;width:9px;height:9px;border-radius:50%;background:#ff4d5e;box-shadow:0 0 0 0 rgba(255,77,94,.7);animation:ping 2.2s infinite}
@keyframes ring{0%,88%,100%{transform:rotate(0)}91%{transform:rotate(14deg)}94%{transform:rotate(-12deg)}97%{transform:rotate(8deg)}}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(255,77,94,.7)}70%,100%{box-shadow:0 0 0 10px rgba(255,77,94,0)}}
.w-av{width:38px;height:38px;border-radius:50%;background:#2b2d44;border:1px solid var(--line2);display:grid;place-items:center;font-weight:700;font-size:13px;color:#fff}
.w-body{display:grid;grid-template-columns:1fr 290px;gap:14px;flex:1}
.w-left{display:flex;flex-direction:column;gap:14px;min-width:0}
.w-welcome{display:flex;justify-content:space-between;align-items:center;gap:12px}
.w-welcome h4{margin:0;font-size:1.28rem;letter-spacing:-.02em}
.w-welcome small{color:var(--muted);font-size:12.5px;display:block}
.w-new{background:linear-gradient(135deg,#6B67FF,#7A84FF);color:#fff;border-radius:12px;padding:10px 16px;font-weight:700;font-size:13px;white-space:nowrap;box-shadow:0 8px 24px rgba(100,100,255,.4);animation:glowbtn 3s ease-in-out infinite}
@keyframes glowbtn{0%,100%{box-shadow:0 8px 24px rgba(100,100,255,.35)}50%{box-shadow:0 8px 36px rgba(110,120,255,.75)}}
.w-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.w-stat{border:1px solid var(--line);border-radius:16px;padding:12px 14px;background:rgba(255,255,255,.03);display:flex;gap:12px;align-items:center;transition:.3s}
.w-stat:hover{border-color:rgba(150,150,255,.4);transform:translateY(-2px)}
.w-stat .ic{width:30px;height:30px;color:#8E8CFF;flex:none}
.w-stat b{display:block;font-size:1.3rem;line-height:1.1;color:#fff;white-space:nowrap}.w-stat>span:last-child{min-width:0}.w-stat small{white-space:nowrap}
.w-stat small{color:var(--muted);font-size:11.5px}
.w-stat em{font-style:normal;color:#3DDC97;font-size:10.5px;margin-left:6px;font-weight:600}
.w-projects h5{margin:0 0 10px;font-size:13.5px;display:flex;justify-content:space-between;color:#fff}
.w-projects h5 span{color:var(--muted);font-weight:500}
.w-pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.w-proj{border:1px solid var(--line);border-radius:14px;padding:8px;background:rgba(255,255,255,.025);transition:.3s;min-width:0}
.w-proj:hover{border-color:rgba(150,150,255,.4);transform:translateY(-3px)}
.w-th{height:70px;border-radius:9px;overflow:hidden;position:relative;margin-bottom:8px}
.w-proj b{display:block;font-size:12.2px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.w-proj small{color:var(--muted);font-size:11px}
.w-bar{height:3px;border-radius:3px;background:rgba(255,255,255,.1);margin-top:7px;overflow:hidden}
.w-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#6B67FF,#5BB8FF);border-radius:3px;animation:fillbar 4s ease-in-out infinite}
@keyframes fillbar{0%{width:8%}60%,100%{width:var(--w,80%)}}
.w-live{border:1px solid var(--line);border-radius:18px;background:rgba(0,0,0,.35);padding:10px;display:flex;flex-direction:column;gap:8px;min-width:0}
.w-live .hd{display:flex;align-items:center;gap:7px;font-size:11.5px;color:#fff;font-weight:650}
.w-live .hd::before{content:"";width:8px;height:8px;border-radius:50%;background:#3DDC97;box-shadow:0 0 0 0 rgba(61,220,151,.7);animation:pingg 1.8s infinite}
@keyframes pingg{0%{box-shadow:0 0 0 0 rgba(61,220,151,.7)}70%,100%{box-shadow:0 0 0 8px rgba(61,220,151,0)}}
.w-live .hd span{margin-left:auto;color:var(--muted);font:500 10.5px var(--mono)}
.screen{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:4/3.1;border:1px solid var(--line);background:#06070f}
.slide{position:absolute;inset:0;opacity:0;transition:opacity .9s;padding:16px 14px;display:flex;flex-direction:column;justify-content:center;gap:6px}
.slide.on{opacity:1}
.slide .s-nav{position:absolute;top:8px;left:12px;right:12px;display:flex;justify-content:space-between;font-size:6px;color:#cfd2ff}
.slide .s-nav i{display:flex;gap:6px;font-style:normal}
.slide h6{margin:0;font-size:15px;line-height:1.1;letter-spacing:-.03em;color:#fff}
.slide p{margin:0;font-size:7px;color:#b9bbd6}
.slide .s-btn{width:46px;height:12px;border-radius:7px;background:#fff;margin-top:4px}
.slide.s1{background:radial-gradient(ellipse at 80% 100%,#4a46ff,transparent 60%),#07081a}
.slide.s2{background:linear-gradient(135deg,#1a1033,#0b2a45)}
.slide.s2 h6{font-family:Georgia,serif;font-style:italic;font-weight:400}
.slide.s3{background:radial-gradient(ellipse at 20% 0,#1d7a6a,transparent 60%),#04120f}
.files{display:flex;flex-wrap:wrap;gap:5px;min-height:46px;align-content:flex-start}
.files span{font:500 10px var(--mono);padding:3px 8px;border-radius:7px;background:rgba(119,115,255,.14);border:1px solid rgba(150,150,255,.3);color:#d8d9ff;opacity:0;transform:translateY(6px) scale(.9);transition:.4s}
.files span.on{opacity:1;transform:none}
.files span.on::after{content:" ✓";color:#3DDC97}
.typing{font:500 10.5px/1.45 var(--mono);color:#cfd1ee;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:10px;padding:8px 10px;min-height:48px}
.typing::after{content:"▍";color:#8E8CFF;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.w-note{text-align:center;color:#6E6F86;font-size:12px;margin-top:14px}
@media(max-width:980px){.win-grid{grid-template-columns:1fr}.w-side{display:none}.w-body{grid-template-columns:1fr}.win{transform:none}}
@media(max-width:560px){.w-stats{grid-template-columns:1fr}.w-pgrid{grid-template-columns:1fr 1fr}.w-pgrid .w-proj:nth-child(3){display:none}.w-welcome{flex-direction:column;align-items:flex-start}}

/* ---------- sections ---------- */
.sec{padding:110px 0;position:relative}
.two{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:60px;align-items:center}
@media(max-width:980px){.two{grid-template-columns:1fr;gap:34px}}
.eb{display:inline-flex;align-items:center;gap:12px;color:#A99BFF;font-weight:650;font-size:14px;margin-bottom:18px}
.eb::before{content:"";width:34px;height:2px;border-radius:2px;background:linear-gradient(90deg,#7773FF,#5B8CFF)}
.sec h2{font-size:clamp(2rem,4.4vw,3.15rem);letter-spacing:-.035em;line-height:1.08;margin:0 0 18px}
.sec .txt p{color:#B6B7CB;max-width:420px;font-size:1.04rem;margin-bottom:28px}
.fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:760px){.fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.fgrid{grid-template-columns:1fr}}
.fc{position:relative;border:1px solid var(--line2);border-radius:20px;padding:22px 20px 24px;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));overflow:hidden;transition:transform .35s,border-color .35s,box-shadow .35s}
.fc::before{content:"";position:absolute;inset:0;background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),rgba(119,115,255,.22),transparent 65%);opacity:0;transition:opacity .3s}
.fc:hover{transform:translateY(-5px);border-color:rgba(150,150,255,.45);box-shadow:0 20px 60px rgba(60,70,230,.2)}
.fc:hover::before{opacity:1}
.fc .fi{width:42px;height:42px;color:#7F8CFF;margin-bottom:34px;display:block;transition:transform .4s}
.fc:hover .fi{transform:scale(1.12) rotate(-4deg)}
.fc h3{font-size:1rem;margin:0 0 6px;letter-spacing:-.01em}
.fc p{margin:0;color:#A9AABF;font-size:13.5px;line-height:1.5}
/* tilted showcase */
.show{position:relative;height:430px;perspective:1600px}
.dev{position:absolute;width:44%;aspect-ratio:1.45;border-radius:14px;border:1px solid rgba(255,255,255,.25);background:#05060d;box-shadow:0 30px 70px rgba(0,0,0,.6),0 0 40px rgba(90,100,255,.2);overflow:hidden;transition:transform .6s,box-shadow .6s}
.dev .bar{height:14px;background:rgba(255,255,255,.07);display:flex;gap:4px;align-items:center;padding:0 8px}
.dev .bar i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.35)}
.dev .scr{position:absolute;inset:14px 0 0 0;padding:16px;display:flex;flex-direction:column;justify-content:center;gap:5px}
.dev h6{margin:0;font-size:clamp(11px,1.6vw,17px);line-height:1.1;letter-spacing:-.03em;color:#fff}
.dev p{margin:0;font-size:clamp(6px,.8vw,8px);color:#c3c5de}
.dev .b{width:46px;height:11px;border-radius:6px;background:#fff;margin-top:5px}
.dev.d1{left:0;top:70px;transform:rotateY(24deg) rotateZ(-3deg);animation:float1 7s ease-in-out infinite;z-index:1}
.dev.d2{left:24%;top:10px;width:50%;transform:rotateY(-4deg);z-index:4;animation:float2 8s ease-in-out infinite;box-shadow:0 40px 90px rgba(0,0,0,.7),0 0 70px rgba(110,110,255,.4)}
.dev.d3{right:14%;top:80px;transform:rotateY(-20deg) rotateZ(2deg);z-index:2;animation:float1 9s ease-in-out -2s infinite}
.dev.d4{right:-3%;top:150px;transform:rotateY(-30deg) rotateZ(3deg);z-index:1;animation:float2 10s ease-in-out -4s infinite}
@keyframes float1{0%,100%{translate:0 0}50%{translate:0 -14px}}
@keyframes float2{0%,100%{translate:0 0}50%{translate:0 -20px}}
.dev.d1 .scr{background:radial-gradient(ellipse at 20% 100%,#2c3bff88,transparent 60%),#07091c}
.dev.d2 .scr{background:radial-gradient(ellipse at 70% 100%,#6a4bff,transparent 60%),radial-gradient(ellipse at 10% 0,#1b3dff77,transparent 55%),#05060f;align-items:center;text-align:center}
.dev.d3 .scr{background:linear-gradient(160deg,#f2f3ff,#c7cdf5);} .dev.d3 h6{color:#12142a} .dev.d3 p{color:#43466a} .dev.d3 .b{background:#3b3fff}
.dev.d4 .scr{background:linear-gradient(160deg,#f6f8ff,#d3dcff);} .dev.d4 h6{color:#12142a} .dev.d4 p{color:#43466a} .dev.d4 .b{background:#12142a}
@media(max-width:700px){.show{height:300px}.dev{width:50%}.dev.d3,.dev.d4{display:none}.dev.d2{left:40%}}
.strip{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line2);border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.012));overflow:hidden}
.strip>div{padding:26px 22px;display:flex;gap:16px;align-items:center;border-right:1px solid var(--line);transition:background .3s}
.strip>div:last-child{border:0}
.strip>div:hover{background:rgba(119,115,255,.07)}
.strip svg{width:38px;height:38px;color:#8E9BFF;flex:none}
.strip b{display:block;font-size:1.7rem;letter-spacing:-.03em;color:#fff;line-height:1.1}
.strip small{color:var(--muted);font-size:13px}
@media(max-width:860px){.strip{grid-template-columns:1fr 1fr}.strip>div:nth-child(2){border-right:0}.strip>div:nth-child(-n+2){border-bottom:1px solid var(--line)}}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:860px){.steps{grid-template-columns:1fr}}
.stp{border:1px solid var(--line2);border-radius:20px;padding:24px;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012));position:relative;transition:.35s}
.stp:hover{transform:translateY(-5px);border-color:rgba(150,150,255,.45)}
.stp .n{font:800 2.6rem/1 var(--font);letter-spacing:-.04em;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:16px;display:block}
.stp h3{margin:0 0 8px;font-size:1.1rem}
.stp p{color:#A9AABF;font-size:14px;margin:0}
.stp .mini{margin-top:18px;border-radius:12px;border:1px solid var(--line);background:rgba(0,0,0,.35);padding:10px 12px;font:500 11.5px/1.6 var(--mono);color:#cfd1ee;min-height:62px}
.cta-b{position:relative;border-radius:28px;padding:50px 46px;display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;background:radial-gradient(ellipse at 20% 50%,rgba(70,80,255,.2),transparent 60%),rgba(6,7,18,.9);isolation:isolate;overflow:hidden}
.cta-b::before{content:"";position:absolute;inset:0;border-radius:28px;padding:1.5px;background:conic-gradient(from var(--ang,0deg),#5B8CFF,#B7A9FF,#fff,#5B8CFF,#7773FF,#5B8CFF);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:spin 6s linear infinite;z-index:-1}
@property --ang{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes spin{to{--ang:360deg}}
.cta-b .dotsb{position:absolute;inset:0;z-index:-1;background-image:radial-gradient(circle,rgba(255,255,255,.35) 1px,transparent 1.5px);background-size:24px 24px;-webkit-mask-image:linear-gradient(90deg,#000,transparent 50%,#000);mask-image:linear-gradient(90deg,#000,transparent 50%,#000);opacity:.5}
.cta-b .sp{width:74px;height:74px;flex:none;animation:spinslow 9s linear infinite;filter:drop-shadow(0 0 18px rgba(150,170,255,.8))}
@keyframes spinslow{to{transform:rotate(360deg)}}
.cta-b .tx{flex:1;min-width:240px}
.cta-b h2{margin:0 0 6px;font-size:clamp(1.5rem,3vw,2.2rem)}
.cta-b p{margin:0;color:#B6B7CB}
.cta-l{display:flex;align-items:center;gap:26px;flex:1;min-width:280px}

/* ---------- footer ---------- */
.mfoot{border-top:1px solid var(--line);padding:56px 0 30px;margin-top:60px;position:relative}
.mfoot-in{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:flex-start}
.mfoot .brand img{height:36px}
.mfoot p{color:#9A9BB0;margin:12px 0 0;font-size:14px;max-width:260px}
.mfoot nav{display:flex;gap:30px;flex-wrap:wrap;align-items:center;padding-top:10px}
.mfoot nav a{color:#E3E4F0;text-decoration:none;font-weight:600;font-size:14px;transition:.2s}
.mfoot nav a:hover{color:#fff;text-shadow:0 0 14px rgba(150,160,255,.9)}
.mfoot .fine{margin-top:40px;padding-top:20px;border-top:1px solid var(--line);color:#7E7F96;font-size:13px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* ---------- inner pages ---------- */
.phero{position:relative;padding:150px 0 40px;text-align:center;overflow:hidden;isolation:isolate}
.phero .dots{-webkit-mask-image:radial-gradient(ellipse 55% 80% at 50% 30%,transparent 20%,#000 90%);mask-image:radial-gradient(ellipse 55% 80% at 50% 30%,transparent 20%,#000 90%)}
.phero h1{font-size:clamp(2.2rem,5.2vw,3.7rem);letter-spacing:-.04em;margin:14px 0 12px}
.phero .lead{margin:0 auto;color:#B6B7CB}
.phero .eyebrow{color:#A99BFF}
.card{background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));border-color:var(--line2);box-shadow:none}
.section{padding:70px 0}
.section.alt{background:rgba(255,255,255,.015)}
.container{max-width:1160px}
.btn{border-radius:999px}
.btn.primary{background:#fff;color:#05060b}
.btn.accent{background:var(--grad-btn)}
input:not([type]),input[type=text],input[type=tel],input[type=email],input[type=password],input[type=search],input[type=number],input[type=url],select,textarea.in{background:rgba(255,255,255,.04)}
.auth-card{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));border-color:var(--line2)}

/* ---------- floating members badge ---------- */
.fbadge{position:fixed;left:18px;bottom:18px;z-index:60;display:flex;align-items:center;gap:10px;padding:11px 18px 11px 12px;border-radius:999px;background:#fff;color:#0b0d1a;text-decoration:none;isolation:isolate;box-shadow:0 10px 40px rgba(70,100,255,.45),0 0 0 1px rgba(255,255,255,.6);animation:fbfloat 4.5s ease-in-out infinite;max-width:calc(100vw - 36px)}
.fbadge::before{content:"";position:absolute;inset:-3px;border-radius:999px;z-index:-1;background:conic-gradient(from var(--ang,0deg),#2f6bff,#ffffff,#8fb4ff,#ffffff,#2f6bff,#6aa0ff,#ffffff,#2f6bff);animation:spin 3.2s linear infinite;filter:drop-shadow(0 0 10px rgba(60,120,255,.9))}
.fbadge::after{content:"";position:absolute;inset:0;border-radius:999px;background:#fff;z-index:-1}
.fbadge .shine{position:absolute;inset:0;border-radius:999px;overflow:hidden;pointer-events:none}
.fbadge .shine::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(105deg,transparent,rgba(110,150,255,.35),transparent);animation:shineb 3.6s ease-in-out infinite}
@keyframes shineb{0%,45%{left:-60%}100%{left:130%}}
@keyframes fbfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.fbadge:hover{transform:scale(1.04);animation-play-state:paused}
.fbadge .st{width:36px;height:36px;border-radius:50%;flex:none;display:grid;place-items:center;background:linear-gradient(135deg,#2f6bff,#8fb4ff);box-shadow:0 0 0 4px rgba(60,120,255,.15)}
.fbadge .st svg{width:18px;height:18px;fill:#fff;animation:spinslow 6s linear infinite}
.fbadge .tx{display:flex;flex-direction:column;line-height:1.05}
.fbadge .l1{display:flex;align-items:baseline;gap:7px}
.fbadge .free{font:italic 400 1.55rem/1 'Instrument Serif',Georgia,serif;letter-spacing:-.01em;background:linear-gradient(90deg,#1f4fff,#6aa0ff 60%,#1f4fff);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 4s linear infinite}
.fbadge .for{font:700 .62rem/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:#6b7094}
.fbadge .l2{display:flex;align-items:center;gap:7px;margin-top:4px}
.fbadge .ca{font:600 .86rem/1 var(--mono);letter-spacing:-.03em;color:#0b0d1a;border-bottom:2px solid transparent;border-image:linear-gradient(90deg,#2f6bff,#bcd2ff) 1}
.fbadge .ca b{color:#2f6bff;font-weight:700}
.fbadge .mem{font:700 .56rem/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:#fff;background:#0b0d1a;border-radius:6px;padding:4px 6px}
.fbadge .x{position:absolute;top:-8px;right:-4px;width:22px;height:22px;border-radius:50%;border:1px solid #d5d9ee;background:#fff;color:#555;font-size:13px;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0;box-shadow:0 2px 8px rgba(0,0,0,.25);opacity:0;transition:.2s}
.fbadge:hover .x{opacity:1}
@media(max-width:560px){.fbadge{left:10px;bottom:10px;padding:8px 14px 8px 9px}.fbadge .free{font-size:1.25rem}.fbadge .st{width:30px;height:30px}.fbadge .x{opacity:1}}

/* ---------- checkout ---------- */
.co-top{border-bottom:1px solid var(--line);background:rgba(3,4,10,.8);backdrop-filter:blur(14px);position:sticky;top:0;z-index:40}
.co-top .in{display:flex;align-items:center;justify-content:space-between;height:70px;gap:12px}
.co-top .brand img{height:32px}
.co-top .sec{display:flex;gap:8px;align-items:center;color:#B6B7CB;font-size:13.5px;font-weight:600}
.co-top .sec svg{width:16px;height:16px;color:#3DDC97}
.co-bg{position:relative;isolation:isolate;padding:34px 0 80px}
.co-bg::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 70% 40% at 50% 0,rgba(90,90,255,.22),transparent 70%)}
.co-h{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.co-h h1{font-size:clamp(1.7rem,3.4vw,2.4rem);margin:0;letter-spacing:-.035em}
.co-h a{color:#B6B7CB;font-size:14px;text-decoration:none}.co-h a:hover{color:#fff}
.stepper{display:flex;align-items:center;gap:0;margin:0 0 26px}
.stepper .s{display:flex;align-items:center;gap:10px;color:#8B8CA3;font-weight:650;font-size:14px;transition:.3s}
.stepper .s b{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line2);font-size:13px;transition:.3s}
.stepper .s.on{color:#fff}.stepper .s.on b{background:var(--grad-btn);border-color:transparent;box-shadow:0 0 0 5px rgba(119,115,255,.2)}
.stepper .s.done{color:#C9CADB}.stepper .s.done b{background:#3DDC97;border-color:transparent;color:#04120c}
.stepper .ln{flex:1;height:2px;background:var(--line2);margin:0 14px;border-radius:2px;overflow:hidden;min-width:20px}
.stepper .ln i{display:block;height:100%;width:0;background:var(--grad-btn);transition:width .5s}
.co{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(320px,.85fr);gap:26px;align-items:start}
@media(max-width:940px){.co{grid-template-columns:1fr}.sum{order:-1;position:static!important}}
.cbox{border:1px solid var(--line2);border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));padding:26px;margin-bottom:18px;transition:border-color .3s,box-shadow .3s}
.cbox:focus-within{border-color:rgba(150,150,255,.5);box-shadow:0 0 0 4px rgba(119,115,255,.1)}
.cbox h2{font-size:1.15rem;margin:0 0 4px;display:flex;gap:12px;align-items:center;letter-spacing:-.02em}
.cbox h2 i{width:28px;height:28px;border-radius:50%;background:var(--grad-btn);display:grid;place-items:center;font-style:normal;font-size:13px;font-weight:800}
.cbox>p{margin:0 0 18px 40px;color:var(--muted);font-size:13.5px}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.f2{grid-template-columns:1fr}}
.meth{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
@media(max-width:560px){.meth{grid-template-columns:1fr}}
.meth label{position:relative;border:1px solid var(--line2);border-radius:16px;padding:16px 14px;cursor:pointer;display:flex;flex-direction:column;gap:6px;transition:.25s;background:rgba(255,255,255,.02)}
.meth label:hover{border-color:rgba(150,150,255,.5)}
.meth input{position:absolute;opacity:0}
.meth label b{font-size:14px;color:#fff}.meth label small{color:var(--muted);font-size:12px}
.meth label::after{content:"";position:absolute;top:14px;right:14px;width:18px;height:18px;border-radius:50%;border:2px solid var(--line2);transition:.25s}
.meth label:has(input:checked){border-color:#7773FF;background:rgba(119,115,255,.12);box-shadow:0 0 0 3px rgba(119,115,255,.18)}
.meth label:has(input:checked)::after{border-color:#7773FF;background:radial-gradient(circle,#fff 0 3px,#7773FF 4px)}
.paybox{border:1px dashed rgba(150,150,255,.45);border-radius:16px;padding:16px 18px;background:rgba(119,115,255,.07);font:500 13.5px/1.75 var(--mono);white-space:pre-wrap;color:#e4e6ff}
.paybox .amt{display:block;font:800 1.5rem var(--font);color:#fff;margin-bottom:6px}
.place{width:100%;justify-content:center;font-size:16px;padding:18px;border-radius:16px;background:linear-gradient(135deg,#25D366,#1bb558);color:#04140a;border:0;font-weight:800;cursor:pointer;display:flex;gap:10px;align-items:center;transition:.25s;box-shadow:0 12px 36px rgba(37,211,102,.28)}
.place:hover{transform:translateY(-2px);box-shadow:0 18px 46px rgba(37,211,102,.4)}
.place:disabled{opacity:.6;cursor:wait;transform:none}
.place svg{width:22px;height:22px;fill:currentColor}
.sum{position:sticky;top:96px}
.sum-card{border:1px solid var(--line2);border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));padding:24px;position:relative;overflow:hidden}
.sum-card::before{content:"";position:absolute;right:-60px;top:-60px;width:200px;height:200px;background:radial-gradient(circle,rgba(119,115,255,.35),transparent 70%)}
.sum h3{margin:0 0 16px;font-size:1.05rem}
.prod{display:flex;gap:14px;align-items:center;padding-bottom:18px;border-bottom:1px solid var(--line)}
.prod .th{width:64px;height:64px;border-radius:16px;background:radial-gradient(ellipse at 70% 100%,#5a4bff,transparent 70%),#080a1e;border:1px solid var(--line2);display:grid;place-items:center;flex:none}
.prod .th img{width:44px}
.prod b{display:block;color:#fff;font-size:15px}.prod small{color:var(--muted);font-size:12.5px}
.ln2{display:flex;justify-content:space-between;padding:10px 0;font-size:14px;color:#C9CADB}
.ln2.grand{border-top:1px solid var(--line);margin-top:6px;padding-top:16px;color:#fff;font-weight:800;font-size:1.25rem}
.ln2 s{color:#7E7F96}.ln2 .sv{color:#3DDC97;font-weight:700}
.sum ul{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:10px;font-size:13.5px;color:#C9CADB}
.sum li{display:flex;gap:10px;align-items:flex-start}
.sum li svg{width:17px;height:17px;color:#3DDC97;flex:none;margin-top:2px}
.trust{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap;justify-content:center;color:#8B8CA3;font-size:12.5px}
.trust span{display:flex;gap:6px;align-items:center}.trust svg{width:14px;height:14px}
.done-box{text-align:center;padding:34px 20px}
.done-box .ck{width:76px;height:76px;margin:0 auto 18px;border-radius:50%;background:rgba(61,220,151,.14);display:grid;place-items:center;color:#3DDC97;animation:pop .6s cubic-bezier(.2,1.6,.4,1)}
.done-box .ck svg{width:38px;height:38px;stroke-dasharray:40;stroke-dashoffset:40;animation:draw .6s .25s forwards}
@keyframes pop{from{transform:scale(.3);opacity:0}to{transform:none;opacity:1}}@keyframes draw{to{stroke-dashoffset:0}}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}

.auth-wrap{padding-top:120px;min-height:100vh}
.toast{background:#10121D}