/* ══════════════════════════════════════════════════════════════ Hodler — design system Palette pulled from the bot logo: deep violet, indigo, teal. ══════════════════════════════════════════════════════════════ */ :root{ --bg:#07060f; --bg-2:#0b0918; --panel:rgba(255,255,255,.045); --panel-2:rgba(255,255,255,.075); --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.18); --fg:#f2f0ff; --fg-2:#b9b4d6; --fg-3:#7d78a0; --v1:#8b5cf6; --v2:#6366f1; --v3:#22d3ee; --up:#34d399; --dn:#f87171; --gold:#fbbf24; --r:18px; --r-sm:12px; --max:1200px; --ease:cubic-bezier(.22,.61,.36,1); --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace; } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ margin:0;background:var(--bg);color:var(--fg);font-family:var(--font); font-size:16.5px;line-height:1.65;letter-spacing:-.011em; -webkit-font-smoothing:antialiased;overflow-x:clip; } /* `overflow-x:hidden` would force overflow-y to `auto` and turn into a scroll container, which breaks sticky positioning. `clip` keeps y visible. */ @supports not (overflow:clip){ body{overflow-x:hidden} } img{max-width:100%;height:auto;display:block} a{color:inherit;text-decoration:none} h1,h2,h3,h4{margin:0;line-height:1.1;letter-spacing:-.03em;font-weight:700} p{margin:0} ul,ol,dl{margin:0;padding:0;list-style:none} code{font-family:var(--mono);font-size:.92em} ::selection{background:rgba(139,92,246,.4);color:#fff} :focus-visible{outline:2px solid var(--v3);outline-offset:3px;border-radius:6px} .wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:24px} .wrap.narrow{max-width:820px} /* ══ Animated background ══ */ .bg{position:fixed;inset:0;z-index:-1;overflow:hidden;background: radial-gradient(120% 80% at 50% -10%,#140f2e 0%,transparent 60%), linear-gradient(180deg,#07060f 0%,#0a0818 45%,#07060f 100%);} #constellation{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:.85} .aurora{position:absolute;inset:-20%;filter:blur(90px);opacity:.55} .blob{position:absolute;border-radius:50%;mix-blend-mode:screen;animation:drift 26s ease-in-out infinite} .b1{width:46vw;height:46vw;left:-6%;top:-4%;background:radial-gradient(circle,rgba(139,92,246,.75),transparent 68%)} .b2{width:40vw;height:40vw;right:-4%;top:6%;background:radial-gradient(circle,rgba(34,211,238,.45),transparent 68%);animation-duration:32s;animation-direction:reverse} .b3{width:52vw;height:52vw;left:22%;bottom:-16%;background:radial-gradient(circle,rgba(99,102,241,.55),transparent 70%);animation-duration:38s} .b4{width:32vw;height:32vw;right:16%;bottom:2%;background:radial-gradient(circle,rgba(251,191,36,.22),transparent 70%);animation-duration:30s;animation-direction:reverse} @keyframes drift{ 0%,100%{transform:translate3d(0,0,0) scale(1)} 33%{transform:translate3d(6%,-7%,0) scale(1.14)} 66%{transform:translate3d(-5%,6%,0) scale(.92)} } .grid-overlay{position:absolute;inset:0;opacity:.28; background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px); background-size:64px 64px; -webkit-mask-image:radial-gradient(ellipse 90% 60% at 50% 0%,#000 30%,transparent 78%); mask-image:radial-gradient(ellipse 90% 60% at 50% 0%,#000 30%,transparent 78%);} .grain{position:absolute;inset:0;opacity:.16;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");} .vignette{position:absolute;inset:0;background:radial-gradient(ellipse 100% 70% at 50% 45%,transparent 40%,rgba(4,3,10,.75) 100%)} /* ══ Layout guards ══ Grid/flex children default to `min-width:auto`, i.e. their min-content size. One wide descendant (a long address, a nowrap chip) then inflates the whole track and shoves the layout sideways. `minmax(0,1fr)` on the track plus `min-width:0` on the item makes the shrink actually apply. */ .hero-copy,.hero-visual,.split-copy,.split-visual, .pillar,.card,.cmd-col,.plan,.stats li,.hero-btns,.hero-chips{min-width:0} .nav-in>*{min-width:0} .hero-btns>*,.hero-chips>*{min-width:0} .row>span,.row>b{min-width:0;overflow-wrap:anywhere} .split-copy>*,.hero-copy>*{overflow-wrap:break-word} /* ══ Nav ══ */ .nav{position:sticky;top:0;z-index:50;transition:background .3s var(--ease),border-color .3s,backdrop-filter .3s;border-bottom:1px solid transparent} .nav.stuck{background:rgba(9,7,20,.72);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);border-bottom-color:var(--line)} .nav-in{display:flex;align-items:center;gap:20px;height:70px} .brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;letter-spacing:-.03em} .brand img{filter:drop-shadow(0 0 10px rgba(139,92,246,.55))} .nav-links{display:flex;gap:4px;margin-left:auto} .nav-links a{padding:8px 13px;border-radius:10px;font-size:14.5px;color:var(--fg-2);font-weight:500;transition:color .2s,background .2s} .nav-links a:hover{color:var(--fg);background:var(--panel)} .nav-cta{display:flex;align-items:center;gap:10px} .burger{display:none;width:40px;height:40px;border:1px solid var(--line);background:var(--panel);border-radius:11px;cursor:pointer;padding:0;place-items:center} .burger span{display:block;width:17px;height:1.7px;background:var(--fg);border-radius:2px;margin:2.6px auto;transition:transform .3s var(--ease),opacity .2s} .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(4.3px) rotate(45deg)} .burger[aria-expanded="true"] span:nth-child(2){opacity:0} .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-4.3px) rotate(-45deg)} /* ══ Buttons ══ */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:11px 20px;border-radius:12px; font-weight:600;font-size:14.5px;border:1px solid transparent;cursor:pointer; transition:transform .22s var(--ease),box-shadow .28s,background .22s,border-color .22s;white-space:nowrap} .btn:hover{transform:translateY(-2px)} .btn:active{transform:translateY(0)} .btn-primary{background:linear-gradient(135deg,var(--v1),var(--v2) 55%,#4f46e5);color:#fff; box-shadow:0 8px 26px -8px rgba(139,92,246,.75),inset 0 1px 0 rgba(255,255,255,.22)} .btn-primary:hover{box-shadow:0 14px 38px -10px rgba(139,92,246,.95),inset 0 1px 0 rgba(255,255,255,.3)} .btn-ghost{background:var(--panel);border-color:var(--line-2);color:var(--fg);backdrop-filter:blur(8px)} .btn-ghost:hover{background:var(--panel-2);border-color:rgba(139,92,246,.55)} .btn-sm{padding:9px 16px;font-size:14px} .btn-lg{padding:14px 26px;font-size:15.5px} .btn-block{width:100%;margin-top:auto} .skip{position:absolute;left:-9999px} .skip:focus{left:12px;top:12px;z-index:99;background:var(--v1);padding:10px 16px;border-radius:10px} /* ══ Hero ══ */ .hero{padding:78px 0 40px;position:relative} .hero-in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:center} .pill{display:inline-flex;align-items:center;gap:9px;padding:7px 15px 7px 11px;border-radius:999px; background:var(--panel);border:1px solid var(--line-2);font-size:13px;font-weight:600;color:var(--fg-2); backdrop-filter:blur(10px);letter-spacing:.01em} .pill .dot{width:7px;height:7px;border-radius:50%;background:var(--up);box-shadow:0 0 0 0 rgba(52,211,153,.6);animation:pulse 2.2s infinite} @keyframes pulse{70%{box-shadow:0 0 0 9px rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}} h1{font-size:clamp(38px,6.2vw,68px);letter-spacing:-.045em;margin:22px 0 20px;line-height:1.02} .grad{background:linear-gradient(100deg,#a78bfa 0%,#818cf8 42%,#22d3ee 100%); -webkit-background-clip:text;background-clip:text;color:transparent; background-size:220% 100%;animation:slide 9s ease-in-out infinite} @keyframes slide{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}} .lede{font-size:clamp(16.5px,2vw,19px);color:var(--fg-2);max-width:56ch;line-height:1.62} .hero-btns{display:flex;flex-wrap:wrap;gap:13px;margin-top:32px} .hero-btns.center{justify-content:center} .hero-chips{display:flex;flex-wrap:wrap;gap:9px 20px;margin-top:30px} .hero-chips li{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--fg-3);font-weight:500} .hero-chips img{opacity:.85} /* ── Floating phone / alert card ── */ .hero-visual{position:relative;display:flex;align-items:center;justify-content:center;min-height:520px} .phone{position:relative;width:min(340px,100%);border-radius:26px;padding:26px 22px 20px; background:linear-gradient(165deg,rgba(30,24,58,.94),rgba(14,11,30,.96)); border:1px solid rgba(139,92,246,.34); box-shadow:0 40px 90px -30px rgba(0,0,0,.92),0 0 70px -25px rgba(139,92,246,.6),inset 0 1px 0 rgba(255,255,255,.1); backdrop-filter:blur(16px); animation:float 7s ease-in-out infinite;z-index:2} @keyframes float{0%,100%{transform:translateY(0) rotate(-1.2deg)}50%{transform:translateY(-20px) rotate(1.2deg)}} .phone-notch{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:64px;height:4px;border-radius:99px;background:rgba(255,255,255,.16)} .phone-top{display:flex;align-items:center;gap:11px;margin-top:10px;padding-bottom:15px;border-bottom:1px solid var(--line)} .coin{border-radius:50%;filter:drop-shadow(0 0 10px rgba(251,191,36,.4))} .coin-sym{font-weight:800;font-size:16px;letter-spacing:-.02em} .coin-addr{font-family:var(--mono);font-size:11.5px;color:var(--fg-3)} .tag-buy{margin-left:auto;font-size:11px;font-weight:800;letter-spacing:.09em;color:#052e23; background:linear-gradient(135deg,var(--up),#10b981);padding:5px 11px;border-radius:8px; box-shadow:0 0 20px -4px rgba(52,211,153,.75)} .card-body{padding:16px 0;display:grid;gap:9px} .row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:13.5px;color:var(--fg-3)} .row b{color:var(--fg);font-weight:600;font-size:13.5px;text-align:right} .row b.up{color:var(--up)} .card-body hr{border:0;border-top:1px dashed var(--line-2);margin:5px 0} /* Smart-money board row: medal · name+tag · W/L · realized SOL. The stats sit on their own line so a 4-up name never has to share one with a number. */ .sm-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:2px 10px;align-items:baseline; padding:9px 0;border-bottom:1px solid rgba(255,255,255,.05)} .sm-row:last-of-type{border-bottom:0;padding-bottom:0} .sm-medal{font-size:13px;line-height:1.2;align-self:center} .sm-name{display:flex;align-items:center;gap:6px;font-weight:600;font-size:13.5px;color:var(--fg); font-family:var(--mono);min-width:0;overflow-wrap:anywhere} .sm-name i{font-style:normal;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase; color:#c4b5fd;background:rgba(139,92,246,.16);border:1px solid rgba(139,92,246,.3); padding:1.5px 6px;border-radius:5px;white-space:nowrap} .sm-row b{font-size:13.5px;font-weight:700;text-align:right;grid-column:3;grid-row:1/3; align-self:center;white-space:nowrap} .sm-stats{grid-column:2;font-size:11.5px;color:var(--fg-3);font-family:var(--font)} .card-foot{display:flex;gap:8px;padding-top:14px;border-top:1px solid var(--line)} .mini{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;color:var(--fg-3); background:var(--panel);border:1px solid var(--line);padding:5px 10px;border-radius:8px} .mini.ok{color:var(--up);border-color:rgba(52,211,153,.4);background:rgba(52,211,153,.12);margin-left:auto} .float-chip{position:absolute;display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:13px; background:rgba(18,14,38,.92);border:1px solid var(--line-2);font-size:12.5px;font-weight:600; backdrop-filter:blur(12px);box-shadow:0 16px 40px -14px rgba(0,0,0,.8);z-index:3;white-space:nowrap} /* Chips sit at the card's outer edges so they never cover a data row. */ .fc1{top:0;left:-2%;animation:float2 8s ease-in-out infinite;color:var(--up)} .fc2{bottom:13%;right:-2%;animation:float2 9.5s ease-in-out infinite .8s} .fc3{bottom:-3%;left:5%;animation:float2 11s ease-in-out infinite 1.6s;color:var(--v3)} @keyframes float2{0%,100%{transform:translateY(0)}50%{transform:translateY(-15px)}} /* Rings scale with the container so they can never push past the viewport. `translate` and `transform` are separate properties, so the centring offset survives the spin animation. */ .orbit{position:absolute;top:50%;left:50%;translate:-50% -50%;aspect-ratio:1/1; border:1px solid rgba(139,92,246,.16);border-radius:50%;pointer-events:none} .o1{width:min(360px,100%);animation:spin 34s linear infinite} .o2{width:min(420px,100%);border-style:dashed;border-color:rgba(34,211,238,.12);animation:spin 52s linear infinite reverse} @keyframes spin{to{transform:rotate(360deg)}} /* ── Stats strip ── */ .stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:64px; padding:28px;border-radius:var(--r);background:var(--panel);border:1px solid var(--line);backdrop-filter:blur(14px)} .stats li{text-align:center;padding:0 10px;border-right:1px solid var(--line)} .stats li:last-child{border-right:0} .stats b{display:block;font-size:clamp(26px,3.4vw,36px);font-weight:800;letter-spacing:-.04em; background:linear-gradient(135deg,#fff,#c4b5fd);-webkit-background-clip:text;background-clip:text;color:transparent} .stats span{font-size:13px;color:var(--fg-3);font-weight:500} /* ══ Sections ══ */ .section{padding:clamp(70px,10vw,124px) 0;position:relative} .section.alt::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1; background:linear-gradient(180deg,transparent,rgba(139,92,246,.055) 45%,transparent)} .sec-head{max-width:720px;margin:0 auto 54px;text-align:center} .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;letter-spacing:.13em; text-transform:uppercase;color:#c4b5fd;background:rgba(139,92,246,.13);border:1px solid rgba(139,92,246,.3); padding:6px 14px;border-radius:999px;margin-bottom:20px} .sec-head h2{font-size:clamp(28px,4.2vw,44px);letter-spacing:-.038em} .sec-sub{margin-top:16px;font-size:17px;color:var(--fg-2);line-height:1.62} .sec-head code{background:var(--panel);border:1px solid var(--line);padding:2px 8px;border-radius:6px;color:#c4b5fd} /* ══ Pillars ══ */ .pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px} .pillar{position:relative;padding:32px 28px;border-radius:var(--r);background:var(--panel); border:1px solid var(--line);backdrop-filter:blur(12px);display:flex;flex-direction:column; transition:transform .3s var(--ease),border-color .3s,box-shadow .3s;overflow:hidden} .pillar::before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .35s;pointer-events:none; background:radial-gradient(420px 220px at var(--mx,50%) var(--my,0%),rgba(139,92,246,.2),transparent 70%)} .pillar:hover::before{opacity:1} .pillar:hover{border-color:rgba(139,92,246,.45);box-shadow:0 26px 60px -30px rgba(139,92,246,.55)} .p-ico{width:56px;height:56px;border-radius:15px;display:grid;place-items:center;margin-bottom:20px; background:linear-gradient(140deg,rgba(139,92,246,.3),rgba(34,211,238,.16)); border:1px solid rgba(139,92,246,.38);box-shadow:0 10px 28px -12px rgba(139,92,246,.8)} .pillar h3{font-size:21px;margin-bottom:12px;letter-spacing:-.028em} .pillar p{color:var(--fg-2);font-size:15.5px;line-height:1.6} .ticks{display:grid;gap:9px;margin-top:20px} .ticks li{position:relative;padding-left:27px;font-size:14.5px;color:var(--fg-2)} .ticks li::before{content:"";position:absolute;left:0;top:6px;width:15px;height:15px;border-radius:50%; background:rgba(52,211,153,.16);border:1px solid rgba(52,211,153,.5)} .ticks li::after{content:"";position:absolute;left:4.3px;top:10.4px;width:6px;height:3px; border-left:1.7px solid var(--up);border-bottom:1.7px solid var(--up);transform:rotate(-45deg)} .pl{display:inline-flex;align-items:center;gap:7px;margin-top:24px;font-size:14px;font-weight:600;color:#c4b5fd;transition:gap .22s,gap} .pl:hover{gap:12px} /* ══ Split sections ══ */ .split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center} .split.flip .split-visual{order:-1} /* ══ Mock panels (stats card / leaderboard) ══ */ .panel,.board{border-radius:var(--r);padding:24px;background:linear-gradient(165deg,rgba(28,22,54,.82),rgba(13,10,28,.9)); border:1px solid rgba(139,92,246,.3);backdrop-filter:blur(16px); box-shadow:0 34px 74px -34px rgba(0,0,0,.9),0 0 60px -28px rgba(139,92,246,.5)} .panel-head,.board-head{display:flex;align-items:center;justify-content:space-between;gap:12px; padding-bottom:15px;margin-bottom:17px;border-bottom:1px solid var(--line)} .tag-live{font-size:11px;font-weight:800;letter-spacing:.15em;color:#c4b5fd;background:rgba(139,92,246,.16); border:1px solid rgba(139,92,246,.36);padding:5px 11px;border-radius:7px} .panel-date{font-size:12px;color:var(--fg-3)} .kv{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:9px 0;font-size:14px;color:var(--fg-3)} .kv b{color:var(--fg);font-weight:600;display:flex;align-items:center;gap:8px} .kv i,.rw{font-style:normal;font-size:12px;font-weight:700} .up,.rt.up{color:var(--up)}.dn,.rt.dn{color:var(--dn)} .panel-foot,.board-foot{display:flex;align-items:center;gap:9px;margin-top:18px;padding-top:15px; border-top:1px solid var(--line);font-size:12.5px;color:var(--fg-3)} /* sparkline */ .spark{display:flex;align-items:flex-end;gap:6px;height:76px;margin:18px 0 6px} .spark i{flex:1;height:var(--h);border-radius:4px 4px 2px 2px; background:linear-gradient(180deg,#a78bfa,rgba(139,92,246,.18));animation:grow 1s var(--ease) backwards} @keyframes grow{from{height:0;opacity:0}} /* leaderboard */ .ranks{display:grid;gap:7px} .ranks li{display:flex;align-items:center;gap:13px;padding:11px 13px;border-radius:11px; background:rgba(255,255,255,.035);border:1px solid transparent;transition:background .22s,border-color .22s,transform .22s} .ranks li:hover{background:rgba(139,92,246,.12);border-color:rgba(139,92,246,.35);transform:translateX(4px)} .rk{width:23px;height:23px;flex-shrink:0;border-radius:7px;display:grid;place-items:center;font-size:11.5px;font-weight:800; background:var(--panel-2);color:var(--fg-2)} .ranks li:nth-child(1) .rk{background:linear-gradient(140deg,#fbbf24,#f59e0b);color:#3a2500} .ranks li:nth-child(2) .rk{background:linear-gradient(140deg,#e2e8f0,#94a3b8);color:#1e293b} .ranks li:nth-child(3) .rk{background:linear-gradient(140deg,#d97757,#b45309);color:#2a1503} .ranks code{font-size:13px;color:var(--fg);flex:1} .rw{color:var(--fg-2);font-size:12.5px} .rt{font-size:10.5px;font-weight:800;letter-spacing:.08em;padding:3px 8px;border-radius:6px} .rt.up{background:rgba(52,211,153,.14);border:1px solid rgba(52,211,153,.4)} .rt.dn{background:rgba(248,113,113,.13);border:1px solid rgba(248,113,113,.38)} /* ══ Card grid ══ */ .cards-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px} .card{padding:26px 22px;border-radius:var(--r);background:var(--panel);border:1px solid var(--line); backdrop-filter:blur(10px);position:relative;overflow:hidden; transition:transform .3s var(--ease),border-color .3s,box-shadow .3s} .card::after{content:"";position:absolute;inset:0;opacity:0;transition:opacity .35s;pointer-events:none; background:radial-gradient(340px 180px at var(--mx,50%) var(--my,0%),rgba(34,211,238,.14),transparent 70%)} .card:hover::after{opacity:1} .card:hover{transform:translateY(-5px);border-color:rgba(34,211,238,.4);box-shadow:0 26px 56px -30px rgba(34,211,238,.45)} .c-ico{margin-bottom:16px;filter:drop-shadow(0 0 10px rgba(139,92,246,.45))} .card h3{font-size:17.5px;margin-bottom:9px;letter-spacing:-.025em} .card p{font-size:14.5px;color:var(--fg-2);line-height:1.58} /* ══ Commands ══ */ .cmds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px} .cmd-col{padding:26px 24px;border-radius:var(--r);background:var(--panel);border:1px solid var(--line);backdrop-filter:blur(10px)} /* The owner column is a fourth block, not a fourth column: it is a different audience, so it spans the full width under the three public columns rather than being squeezed into the same 3-up grid. */ .cmd-owner{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:6px 34px;align-items:start} .cmd-owner h4{grid-column:1/-1} .cmd-owner .cmd-note{margin:0 0 14px;font-size:13.4px;color:var(--fg-3);line-height:1.5} .cmd-owner dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 30px} .cmd-owner dt{padding-top:0} .cmd-col h4{display:flex;align-items:center;gap:10px;font-size:15px;letter-spacing:.02em; padding-bottom:15px;margin-bottom:6px;border-bottom:1px solid var(--line);text-transform:uppercase;color:#c4b5fd} .cmd-col h4 img{filter:drop-shadow(0 0 7px rgba(139,92,246,.5))} .cmd-col dt{padding-top:12px} .cmd-col dd{margin:5px 0 0;font-size:13.8px;color:var(--fg-2);line-height:1.45} .cmd-col code{background:rgba(139,92,246,.14);border:1px solid rgba(139,92,246,.28);color:#ddd6fe; padding:2.5px 8px;border-radius:6px;font-size:12.5px;font-weight:600;white-space:nowrap} /* The owner note sets a command inline, so it needs the chip to fit a sentence rather than sit in a tight

box. */ .cmd-note code{white-space:normal} .split-copy h2{font-size:clamp(27px,3.6vw,40px);letter-spacing:-.038em;margin-bottom:6px} .featlist{display:grid;gap:20px;margin-top:32px} /* ══ Pricing ══ */ .pricing{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:stretch} .plan{position:relative;display:flex;flex-direction:column;padding:32px 28px;border-radius:22px; background:var(--panel);border:1px solid var(--line);backdrop-filter:blur(12px); transition:transform .3s var(--ease),border-color .3s,box-shadow .3s} .plan:hover{transform:translateY(-6px);border-color:rgba(139,92,246,.5);box-shadow:0 30px 64px -32px rgba(139,92,246,.6)} .plan.featured{border-color:rgba(139,92,246,.55); background:linear-gradient(170deg,rgba(46,33,92,.7),rgba(14,11,30,.88)); box-shadow:0 34px 80px -36px rgba(139,92,246,.75)} .plan-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%); font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap; padding:6px 15px;border-radius:999px;color:#0a0512; background:linear-gradient(135deg,var(--gold),#f59e0b);box-shadow:0 8px 24px -8px rgba(251,191,36,.9)} .plan h3{font-size:19px;margin-bottom:16px} .price{display:flex;align-items:baseline;gap:8px;margin-bottom:10px} .price b{font-size:40px;font-weight:800;letter-spacing:-.045em; background:linear-gradient(135deg,#fff,#c4b5fd);-webkit-background-clip:text;background-clip:text;color:transparent} .price span{font-size:14px;color:var(--fg-3);font-weight:600} .plan-sub{font-size:14.5px;color:var(--fg-2);margin-bottom:24px;min-height:42px} .plan .ticks{margin-bottom:28px;flex:1} /* ══ FAQ ══ */ .faq{display:grid;gap:12px} .faq details{border-radius:var(--r-sm);background:var(--panel);border:1px solid var(--line); backdrop-filter:blur(10px);overflow:hidden;transition:border-color .25s,background .25s} .faq details[open]{border-color:rgba(139,92,246,.42);background:rgba(139,92,246,.075)} .faq summary{cursor:pointer;list-style:none;padding:20px 54px 20px 22px;font-weight:600;font-size:16px; position:relative;transition:color .2s} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"";position:absolute;right:22px;top:50%;width:10px;height:10px; border-right:2px solid var(--v3);border-bottom:2px solid var(--v3); transform:translateY(-70%) rotate(45deg);transition:transform .3s var(--ease)} .faq details[open] summary::after{transform:translateY(-25%) rotate(-135deg)} .faq summary:hover{color:#c4b5fd} .faq p{padding:0 22px 21px;color:var(--fg-2);font-size:15.2px;line-height:1.62} /* ══ CTA ══ */ .cta{padding:clamp(66px,9vw,108px) 0;text-align:center;position:relative} .cta-in{max-width:720px;padding:clamp(38px,6vw,60px);border-radius:28px; background:linear-gradient(165deg,rgba(42,30,88,.6),rgba(12,9,26,.8)); border:1px solid rgba(139,92,246,.4);backdrop-filter:blur(18px); box-shadow:0 40px 90px -40px rgba(139,92,246,.8),inset 0 1px 0 rgba(255,255,255,.1)} .cta-logo{margin:0 auto 22px;border-radius:50%;animation:float 6s ease-in-out infinite; filter:drop-shadow(0 0 26px rgba(139,92,246,.8))} .cta h2{font-size:clamp(28px,4.4vw,44px);letter-spacing:-.04em} .cta p{margin:16px 0 30px;font-size:17.5px;color:var(--fg-2)} /* ══ Footer ══ */ .foot{border-top:1px solid var(--line);padding:44px 0;background:rgba(6,5,14,.6);backdrop-filter:blur(10px)} .foot-in{display:flex;align-items:center;gap:28px;flex-wrap:wrap} .f-brand{display:flex;align-items:center;gap:12px} .f-brand b{display:block;font-size:16px} .f-brand span{font-size:13px;color:var(--fg-3)} .f-links{display:flex;gap:20px;flex-wrap:wrap;margin-left:auto} .f-links a{font-size:14px;color:var(--fg-3);transition:color .2s} .f-links a:hover{color:var(--v3)} .f-note{width:100%;font-size:12.5px;color:var(--fg-3);opacity:.7;padding-top:20px;border-top:1px solid var(--line)} /* ══ Scroll reveal ══ */ [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .75s var(--ease),transform .75s var(--ease)} [data-reveal].in{opacity:1;transform:none} /* ══ Responsive ══ */ @media (max-width:1040px){ .cards-4{grid-template-columns:repeat(3,minmax(0,1fr))} .pillars,.cmds{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .nav-links a{padding:8px 10px;font-size:14px} /* `.cmds` drops to 2-up here, but `.cmd-owner` spans all columns, so its own list has to narrow too or it overflows a now-narrower track. */ .cmd-owner dl{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:900px){ .cmd-owner{grid-template-columns:minmax(0,1fr)} .cmd-owner .cmd-note{margin-bottom:16px} .nav-links{position:fixed;top:70px;left:16px;right:16px;flex-direction:column;gap:2px;margin:0;padding:12px; background:rgba(11,9,24,.97);border:1px solid var(--line-2);border-radius:16px; backdrop-filter:blur(20px);box-shadow:0 26px 60px -20px rgba(0,0,0,.9); opacity:0;visibility:hidden;transform:translateY(-12px);transition:all .3s var(--ease)} .nav-links.open{opacity:1;visibility:visible;transform:none} .nav-links a{padding:12px 14px;font-size:15.5px} /* `.nav-links` carries the `margin-left:auto` that right-aligns the bar on desktop (L93), but on mobile it is `position:fixed` and out of flow, so that auto margin no longer pushes anything and the burger collapses in next to the brand. Re-apply it to .nav-cta, which is the only in-flow sibling left once the Telegram button is hidden. */ .nav-cta{margin-left:auto} .burger{display:block} .hero-in{grid-template-columns:minmax(0,1fr);gap:44px} .hero{padding-top:44px} .hero-visual{min-height:auto;padding:20px 0} .orbit{display:none} .fc1{left:-1%}.fc2{right:-1%} .split,.split.flip .split-visual{grid-template-columns:minmax(0,1fr);gap:38px;order:0} .cards-4{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .pricing{grid-template-columns:minmax(0,1fr);max-width:460px;margin-inline:auto} .stats{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px} .stats li{border-right:0} .foot-in{flex-direction:column;align-items:flex-start} .f-links{margin-left:0} } @media (max-width:620px){ body{font-size:16px} .wrap{padding-inline:18px} .pillars,.cmds,.cards-4{grid-template-columns:minmax(0,1fr)} .stats{grid-template-columns:minmax(0,1fr);padding:24px} .hero-btns .btn{width:100%} .float-chip{font-size:12px;padding:8px 12px} .nav-cta .btn{display:none} .sec-head{margin-bottom:36px} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important; transition-duration:.001ms!important;scroll-behavior:auto!important} [data-reveal]{opacity:1;transform:none} } @media print{.bg,.nav,.foot{display:none}body{background:#fff;color:#000}} .fl{display:flex;gap:15px;align-items:flex-start} .fl img{margin-top:2px;flex-shrink:0;filter:drop-shadow(0 0 8px rgba(139,92,246,.4))} .fl b{display:block;font-size:16px;margin-bottom:4px;letter-spacing:-.018em} .fl span{color:var(--fg-2);font-size:14.8px;line-height:1.55}