/* landing page: reference-inspired arena layout (hero + status panel, dashboard card rows) */
.hero{padding-block:clamp(28px,4vw,48px) clamp(28px,4vw,44px);overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(45% 60% at 52% 35%,rgba(30,139,255,.30),transparent 70%),
  radial-gradient(35% 50% at 5% 95%,rgba(14,86,201,.22),transparent 70%)}
.hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr) minmax(0,.74fr);gap:clamp(20px,2.4vw,36px);align-items:center}
@media (max-width:1280px){.hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.status-panel{grid-column:1/-1}}
@media (max-width:900px){.hero-grid{grid-template-columns:minmax(0,1fr)}}
.hero-copy{display:grid;gap:18px;min-width:0}
.hero h1{font-size:clamp(1.55rem,2.75vw,3.2rem);line-height:1.04;overflow-wrap:normal}
@media (max-width:1280px){.hero h1{font-size:clamp(1.55rem,3.6vw,3.2rem)}}
@media (max-width:900px){.hero h1{font-size:clamp(1.55rem,7.4vw,2.6rem)}}
.hero h1 .blue{display:block}
.hero .sub{font:800 clamp(1.02rem,1.5vw,1.2rem)/1.35 var(--f-body);color:var(--ink)}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px}
.features{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px;margin-top:4px}
.features div{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:start;font-size:.86rem;line-height:1.3;color:var(--muted)}
.features b{display:block;color:var(--ink);font-weight:800;font-size:.9rem}
.features svg{width:26px;height:26px;color:var(--blue)}

/* centre composition */
.visual{position:relative;min-height:470px;display:grid;align-content:center;gap:14px;isolation:isolate}
.visual .streak{position:absolute;inset:-20% -30%;z-index:-1;background:linear-gradient(112deg,transparent 47.4%,rgba(120,190,255,.55) 49.6%,rgba(30,139,255,.15) 51.5%,transparent 54%);filter:blur(.6px)}
.visual .balls{position:absolute;inset:0;z-index:-1;opacity:.55}
.spaced{position:absolute;font:700 .74rem/1.55 var(--f-mono);letter-spacing:.32em;color:var(--muted);text-transform:uppercase;white-space:nowrap}
.spaced.a{top:0;left:2%}.spaced.b{top:2%;right:0;text-align:right}
.script{font-family:"Marck Script","Segoe Script",cursive;font-size:clamp(1.7rem,3vw,2.5rem);color:var(--blue2);transform:rotate(-7deg);text-shadow:0 0 18px rgba(30,139,255,.55);justify-self:center;margin-top:4px;line-height:1.05;text-align:center}
.lm-card{position:relative;padding:16px 16px 12px;background:linear-gradient(180deg,rgba(14,23,48,.92),rgba(10,17,34,.92));backdrop-filter:blur(4px)}
.lm-top{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between}
.lm-title{font:700 .88rem var(--f-mono);color:var(--ink)}
.lm-title span{color:var(--dim)}
.lm-chart{width:100%;height:auto;margin-top:8px;display:block}
.lm-chart .grid line{stroke:rgba(120,160,255,.12)}
.lm-chart .lbl{font:600 11px var(--f-mono);fill:var(--muted)}
.lm-chart .lbl-b{font:700 13px var(--f-mono);fill:var(--ink)}
.lm-line{fill:none;stroke:url(#lmg);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:900;stroke-dashoffset:900;animation:draw 2.4s .3s ease-out forwards}
.lm-area{fill:url(#lma);opacity:0;animation:fade 1s 1.6s ease-out forwards}
.lm-dot{fill:var(--blue2);opacity:0;animation:fade .4s 2.4s forwards}
.lm-pulse{fill:none;stroke:var(--blue2);stroke-width:2;opacity:0;transform-origin:center;transform-box:fill-box;animation:pulse 1.8s 2.6s ease-out infinite}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fade{to{opacity:1}}
@keyframes pulse{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(3.2)}}
.statuses{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:8px;font:700 .7rem var(--f-mono);letter-spacing:.06em;color:var(--dim)}
.statuses span{padding:5px 8px;border-radius:8px;border:1px solid var(--line)}
.statuses span.on{color:var(--blue2);border-color:rgba(88,180,255,.5);background:rgba(30,139,255,.1)}
.tg-msg{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;align-items:start;padding:13px 15px;margin-left:clamp(0px,8%,56px);background:linear-gradient(180deg,#13213F,#0E1730)}
.tg-ava{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#2C96FF,#0E56C9);font:800 .82rem var(--f-display);color:#fff}
.tg-head{display:flex;justify-content:space-between;gap:8px;font-weight:800;font-size:.88rem}
.tg-head .pill{padding:3px 7px}
.tg-body{font-size:.9rem;color:var(--ink);margin-top:4px}
.tg-body .mono{color:var(--blue2)}
@media (max-width:900px){.visual{min-height:0}.spaced{display:none}}

/* right status panel */
.status-panel{display:grid;gap:4px;padding:18px 18px 14px;align-self:stretch;align-content:start}
.panel-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:6px}
.k-title{font:800 .8rem/1.2 var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.st-row{display:grid;grid-template-columns:36px minmax(0,1fr);gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.st-row:last-of-type{border-bottom:0}
.st-ic{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:rgba(30,139,255,.12);color:var(--blue2)}
.st-ic svg{width:18px;height:18px}
.st-row b{display:block;font-size:.92rem}
.st-row small{font-size:.8rem}
.status-panel .note{margin-top:6px}
@media (max-width:1280px) and (min-width:901px){.status-panel .st-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:22px}.status-panel .st-row:nth-last-child(-n+3){border-bottom:0}}

/* dashboard rows */
.dash{padding-block:0 clamp(40px,6vw,64px)}
.dash-row{display:grid;gap:16px}
.row-a{grid-template-columns:minmax(0,1.1fr) minmax(0,1.1fr) minmax(0,.95fr) minmax(0,1.2fr)}
.row-b{grid-template-columns:minmax(0,1.75fr) minmax(0,1fr) minmax(0,1.1fr);margin-top:16px}
@media (max-width:1280px){.row-a{grid-template-columns:repeat(2,minmax(0,1fr))}.row-b{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.row-b .academy{grid-column:1/-1}}
@media (max-width:760px){.row-a,.row-b{grid-template-columns:minmax(0,1fr)}}
.dcard{display:grid;gap:12px;align-content:start;padding:18px;container-type:inline-size}
@container (max-width:330px){.plans{grid-template-columns:minmax(0,1fr)!important}.covers{grid-template-columns:minmax(0,1fr)!important}}
@container (max-width:520px){.covers{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.covers .cover:last-child{grid-column:1/-1}}
.dcard .head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.dcard .head a{font-size:.82rem;font-weight:700}
.sig-row{display:grid;grid-template-columns:30px minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line);font-size:.9rem}
.sig-row:last-of-type{border-bottom:0}
.sig-row .m b{display:block;font-weight:800}
.sig-row .m span{color:var(--blue2);font-size:.82rem}
.sig-row .o{font-family:var(--f-mono);font-weight:700}
.sport{width:30px;height:30px}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;text-align:center}
.kpis div{display:grid;gap:2px}
.kpis b{font:800 1.4rem/1 var(--f-mono);color:var(--dim)}
.kpis small{font-size:.74rem;color:var(--muted)}
.locked{position:relative;height:150px;border:1px dashed var(--line2);border-radius:12px;display:grid;place-items:center;text-align:center;padding:12px;background:repeating-linear-gradient(0deg,transparent 0 37px,rgba(120,160,255,.07) 37px 38px)}
.locked p{font-size:.86rem;color:var(--muted);max-width:30ch}
.quote{font:700 clamp(1.15rem,1.8vw,1.4rem)/1.35 var(--f-body);color:var(--ink)}
.quote-by{display:flex;gap:10px;align-items:center;color:var(--muted);font-size:.86rem}
.quote-by .tg-ava{width:34px;height:34px;font-size:.72rem}
.mini-list{list-style:none;padding:0;display:grid;gap:8px}
.mini-list li{display:flex;gap:9px;align-items:flex-start;font-size:.9rem}
.mini-list li::before{content:"";flex:none;width:16px;height:16px;margin-top:3px;border-radius:50%;background:rgba(30,139,255,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3L15 6.8' fill='none' stroke='%2358B4FF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.plan-mini{display:grid;gap:8px;align-content:start;border:1px solid var(--line);border-radius:14px;padding:12px;background:rgba(6,10,20,.4);position:relative}
.plan-mini.pro{border-color:rgba(30,139,255,.65);background:radial-gradient(120% 100% at 100% 0%,rgba(30,139,255,.2),transparent 60%),rgba(6,10,20,.4)}
.plan-mini h3{font-size:.95rem;text-align:center}
.plan-mini .price{text-align:center;font:700 1.35rem var(--f-mono)}
.plan-mini .price small{display:block;font:600 .74rem var(--f-body);color:var(--muted)}
.plan-mini .mini-list li{font-size:.8rem}
.plan-mini .btn{padding:10px 8px;font-size:.84rem}
.plan-mini .tag{position:absolute;top:-10px;right:10px;background:var(--blue);color:#fff;font:800 .62rem var(--f-mono);letter-spacing:.06em;padding:4px 7px;border-radius:6px;text-transform:uppercase}
@media (max-width:420px){.plans{grid-template-columns:minmax(0,1fr)}}
.covers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media (max-width:560px){.covers{grid-template-columns:minmax(0,1fr)}}
.cover{position:relative;display:grid;align-content:end;min-height:170px;border-radius:14px;overflow:hidden;padding:14px;text-decoration:none!important;color:var(--ink);border:1px solid var(--line)}
.cover svg.art{position:absolute;inset:0;width:100%;height:100%}
.cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(6,10,20,.92))}
.cover h3,.cover small{position:relative;z-index:1}
.cover h3{font:800 .98rem/1.25 var(--f-body);letter-spacing:0}
.cover small{font:700 .7rem var(--f-mono);letter-spacing:.12em;color:var(--blue2);margin-top:6px}
.cover:hover{border-color:var(--line2)}
.topics{list-style:none;padding:0;display:grid;gap:4px}
.topics li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px;align-items:center;padding:7px 0;border-bottom:1px solid var(--line);font-size:.9rem}
.topics li:last-child{border-bottom:0}
.topics .t-ic{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:rgba(30,139,255,.12);color:var(--blue2);font:800 .74rem var(--f-mono)}
.globe-card{position:relative;overflow:hidden;min-height:220px;display:grid;align-content:start;gap:10px}
.globe-card .globe{position:absolute;right:-120px;bottom:-150px;width:330px;height:330px;opacity:.6;pointer-events:none}
.globe-card .k-title{color:var(--blue2);font-size:.95rem}
.globe-card h3{font-size:1.15rem;max-width:22ch;position:relative}
.globe-card p{color:var(--muted);max-width:32ch;position:relative;font-size:.92rem}
.globe-card .script{position:relative;justify-self:start;font-size:1.7rem;margin-top:8px}

/* lower sections */
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;list-style:none;padding:0}
.steps li{counter-increment:s;display:grid;gap:8px;align-content:start}
.steps li::before{content:"0" counter(s);font:800 .9rem var(--f-mono);color:var(--blue2);border:1px solid rgba(88,180,255,.4);border-radius:10px;padding:6px 10px;justify-self:start}
.steps p{color:var(--muted);font-size:.95rem}
@media (max-width:980px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.steps{grid-template-columns:minmax(0,1fr)}}
.tool{display:grid;gap:8px;text-decoration:none!important;color:var(--ink)}
.tool:hover{border-color:var(--line2)}
.tool .ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:rgba(30,139,255,.12);color:var(--blue2);font:800 .9rem var(--f-mono)}
.tool p{color:var(--muted);font-size:.92rem}
.comm{display:grid;gap:12px;align-content:start}
.comm p{color:var(--muted)}
.ladder{list-style:none;padding:0;display:grid;gap:10px}
.ladder li{display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:rgba(10,17,34,.6)}
.ladder b{font:800 1.3rem var(--f-mono);color:var(--blue2);text-align:center}
.rules-list{display:grid;gap:8px;padding-left:1.2em;color:var(--muted);font-size:.93rem}
.rules-list b{color:var(--ink)}
.lb{width:100%;border-collapse:collapse;font-size:.95rem}
.lb td{padding:9px 6px;border-bottom:1px solid var(--line)}
.lb td:first-child{width:2.4em;color:var(--dim);font-family:var(--f-mono)}
.lb td:last-child{text-align:right;font-family:var(--f-mono);font-weight:700;color:var(--blue2)}
.empty{color:var(--dim);font-size:.92rem;padding:10px 0}
.faq{display:grid;gap:10px;max-width:860px}
.faq details{border:1px solid var(--line);border-radius:14px;background:var(--card);padding:0 18px}
.faq summary{cursor:pointer;list-style:none;padding:16px 0;font-weight:800;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:700 1.2rem var(--f-mono);color:var(--blue2)}
.faq details[open] summary::after{content:"−"}
.faq details p{padding:0 0 16px;color:var(--muted)}
.rg{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center;justify-content:space-between;border-color:rgba(255,90,106,.3)}
.rg p{color:var(--muted);max-width:70ch}
/* the reference uses the full width for the hero and dashboard rows */
.hero > .wrap,.dash > .wrap{max-width:1440px}