/* Xiaomi Authorized — light mi.com-inspired design system with 3D depth */
:root{
  --bg:#ffffff;--soft:#f5f5f7;--soft-2:#efeff1;--ink:#111113;--ink-2:#3a3a3e;--muted:#71717a;--line:#e8e8ea;
  --brand:#ff6900;--brand-ink:#e85d00;--brand-soft:#fff3ea;--ok:#16a34a;--off:#9ca3af;
  --dark:#101012;--dark-2:#17171a;
  --r:24px;--r-sm:14px;
  --shadow:0 24px 60px rgba(17,17,19,.10);
  --shadow-sm:0 10px 30px rgba(17,17,19,.07);
  --font:"Onest",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--brand);color:#fff}
.wrap{width:min(1240px,100% - 48px);margin-inline:auto}
.muted{color:var(--muted)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:50px;padding:0 28px;border-radius:999px;font-weight:600;font-size:15px;border:1px solid transparent;cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background-color .2s,border-color .2s,color .2s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--primary{background:var(--brand);color:#fff;box-shadow:0 12px 28px rgba(255,105,0,.30)}
.btn--primary:hover{background:var(--brand-ink);box-shadow:0 16px 36px rgba(255,105,0,.38)}
.btn--ghost{background:#fff;color:var(--ink);border-color:var(--line)}
.btn--ghost:hover{border-color:var(--ink)}
.btn--light{background:#fff;color:var(--ink)}
.btn--light:hover{box-shadow:0 14px 30px rgba(0,0,0,.22)}
.btn--outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn--outline:hover{border-color:#fff}
.btn--sm{height:38px;padding:0 18px;font-size:14px}
.link{color:var(--brand);font-weight:600;display:inline-flex;align-items:center;gap:4px;transition:gap .25s var(--ease)}
.link:hover{gap:9px}
.kicker{display:inline-flex;align-items:center;gap:8px;color:var(--brand);font-weight:700;font-size:12px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:18px}
.kicker::before{content:"";width:26px;height:2px;background:var(--brand);border-radius:2px}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.82);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--line);transition:box-shadow .3s}
.nav.is-scrolled{box-shadow:0 8px 30px rgba(17,17,19,.08)}
.nav__inner{display:flex;align-items:center;gap:36px;height:70px}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px;letter-spacing:-.01em}
.logo__mark{width:34px;height:34px;border-radius:10px;box-shadow:0 6px 16px rgba(255,105,0,.35);transition:transform .35s var(--ease)}
.logo:hover .logo__mark{transform:rotate(-8deg) scale(1.06)}
.logo__text b{color:var(--brand);font-weight:800;margin-inline-start:2px}
.nav__links{display:flex;gap:26px;flex:1}
.nav__links a{font-size:15px;color:var(--ink-2);position:relative;padding:6px 0;transition:color .2s}
.nav__links a:hover,.nav__links a.is-active{color:var(--brand)}
.nav__links a.is-active::after{content:"";position:absolute;inset-inline:0;bottom:-2px;height:2px;border-radius:2px;background:var(--brand)}
.nav__actions{display:flex;align-items:center;gap:14px}
.nav__signin{font-weight:600;font-size:15px;transition:color .2s}
.nav__signin:hover{color:var(--brand)}
.nav__burger{display:none;background:none;border:0;font-size:22px;cursor:pointer;color:var(--ink)}

/* language switcher */
.lang{position:relative}
.lang__btn{display:flex;align-items:center;gap:7px;background:none;border:1px solid var(--line);border-radius:999px;padding:7px 12px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:border-color .2s}
.lang__btn:hover{border-color:var(--ink)}
.lang__menu{position:absolute;inset-inline-end:0;top:calc(100% + 10px);min-width:190px;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--shadow-sm);padding:6px;display:none;max-height:320px;overflow:auto}
.lang.is-open .lang__menu{display:block}
.lang__menu a{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:9px;font-size:14px;transition:background-color .15s}
.lang__menu a:hover{background:var(--soft)}
.lang__menu a.is-active{color:var(--brand);font-weight:600}

/* ---------- hero ---------- */
.hero{position:relative;padding:96px 0 110px;overflow:hidden;background:
  radial-gradient(900px 500px at 85% 10%,rgba(255,105,0,.10),transparent 60%),
  radial-gradient(600px 400px at 5% 90%,rgba(255,105,0,.06),transparent 60%),
  linear-gradient(180deg,#fff 0%,var(--soft) 100%)}
.hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:64px 64px;opacity:.35;mask-image:radial-gradient(70% 60% at 50% 40%,#000 30%,transparent 100%);-webkit-mask-image:radial-gradient(70% 60% at 50% 40%,#000 30%,transparent 100%)}
.hero__grid{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
.hero__title{margin:0 0 22px;font-size:clamp(48px,6.4vw,88px);line-height:.98;font-weight:900;letter-spacing:-.035em}
.hero__title .line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.hero__title .line>span{display:block;transform:translateY(115%);animation:rise 1s var(--ease) forwards}
.hero__title .line:nth-child(2)>span{animation-delay:.12s}
.hero__title .line:nth-child(3)>span{animation-delay:.24s}
.hero__title .accent{color:var(--brand)}
@keyframes rise{to{transform:translateY(0)}}
.reveal-hero{opacity:0;animation:fadeUp .9s var(--ease) forwards}
.hero__sub.reveal-hero{animation-delay:.42s}
.hero__ctas.reveal-hero{animation-delay:.54s}
.hero__trust.reveal-hero{animation-delay:.66s}
.kicker.reveal-hero{animation-delay:.05s}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.hero__sub{max-width:520px;color:var(--muted);font-size:18px;margin:0 0 32px}
.hero__ctas{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:30px}
.hero__trust{list-style:none;display:flex;gap:22px;flex-wrap:wrap;margin:0;padding:0;color:var(--ink-2);font-size:13.5px;font-weight:600}
.hero__trust i{color:var(--brand);margin-inline-end:6px}

/* 3D stage */
.hero__stage{perspective:1300px}
.stage{position:relative;transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .18s ease-out;will-change:transform}
.stage__glow{position:absolute;inset:8% -6% -4%;background:radial-gradient(closest-side,rgba(255,105,0,.34),transparent 72%);filter:blur(30px);transform:translateZ(-80px);animation:breathe 7s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.8}50%{opacity:.45}}
.stage__frame{position:relative;margin:0;border-radius:36px;overflow:hidden;box-shadow:0 40px 90px rgba(17,17,19,.22),0 0 0 1px rgba(17,17,19,.06);transform:translateZ(30px)}
.stage__frame img{width:100%;height:460px;object-fit:cover}
.stage__frame::after{content:"";position:absolute;inset:0;background:linear-gradient(200deg,rgba(255,255,255,.22),transparent 38%);pointer-events:none}
.chip{position:absolute;display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.7);box-shadow:var(--shadow-sm);border-radius:16px;padding:12px 16px;font-size:13px;line-height:1.25}
.chip small{display:block;color:var(--muted);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.chip b{font-size:15px}
.chip--server{top:26px;inset-inline-start:-26px;transform:translateZ(90px);animation:float 6s ease-in-out infinite}
.chip--jobs{bottom:34px;inset-inline-end:-20px;transform:translateZ(110px);animation:float 7s ease-in-out .8s infinite}
.chip--shield{bottom:-18px;inset-inline-start:20%;transform:translateZ(70px);animation:float 8s ease-in-out .4s infinite;color:var(--brand);font-weight:700}
@keyframes float{0%,100%{margin-top:0}50%{margin-top:-12px}}
.pulse{width:9px;height:9px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 rgba(22,163,74,.5);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(22,163,74,0)}100%{box-shadow:0 0 0 0 rgba(22,163,74,0)}}

/* ---------- marquee ---------- */
.marquee{overflow:hidden;border-block:1px solid var(--line);background:#fff;padding:20px 0}
.marquee__track{display:flex;width:max-content;animation:marquee 36s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__seq{white-space:nowrap;font-size:30px;font-weight:800;letter-spacing:-.01em;text-transform:uppercase;color:var(--ink);padding-inline-end:12px}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:72px 0}
.stat{border-inline-start:2px solid var(--brand);padding-inline-start:20px}
.stat b{display:block;font-size:clamp(30px,3.2vw,44px);font-weight:800;letter-spacing:-.03em}
.stat span{color:var(--muted);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}

/* ---------- sections ---------- */
.section{padding:96px 0}
.section--soft{background:var(--soft)}
.section--dark{background:var(--dark);color:#f4f4f5}
.section__head{max-width:640px;margin-bottom:52px}
.section__head h2{margin:0 0 12px;font-size:clamp(30px,3.6vw,46px);font-weight:800;letter-spacing:-.03em;line-height:1.08}
.section__head p{margin:0;color:var(--muted);font-size:17px}
.section--dark .section__head p{color:#a1a1aa}

/* ---------- bento tiles ---------- */
.bento{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:minmax(210px,auto);gap:20px}
.tile{position:relative;border-radius:var(--r);overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm);transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .18s ease-out,box-shadow .3s;will-change:transform}
.tile:hover{box-shadow:var(--shadow)}
.tile--xl{grid-column:span 4;grid-row:span 2;background:var(--dark);color:#fff;border-color:transparent;min-height:440px}
.tile--sm{grid-column:span 2}
.bento .tile--sm:nth-child(4),.bento .tile--sm:nth-child(5){grid-column:span 3}
.tile__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5;transform:translateZ(-40px) scale(1.06)}
.tile--xl::after{content:"";position:absolute;inset:0;background:linear-gradient(12deg,rgba(10,10,12,.92) 22%,rgba(10,10,12,.25) 62%,transparent)}
.tile__body{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding:28px;transform:translateZ(40px)}
.tile__brand{font-size:24px;font-weight:800;letter-spacing:-.02em;margin-bottom:12px}
.tile--xl .tile__brand{font-size:34px;color:#fff}
.tile--xl .tile__brand::after{content:"";display:block;width:44px;height:3px;border-radius:3px;background:var(--brand);margin-top:10px}
.tile ul{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:7px;font-size:14px;color:var(--ink-2)}
.tile--xl ul{color:#d4d4d8;grid-template-columns:1fr 1fr}
.tile ul i{color:var(--brand);margin-inline-end:8px}
.tile__glyph{position:absolute;top:22px;inset-inline-end:22px;font-size:30px;color:var(--brand);opacity:.85;transform:translateZ(30px)}

/* ---------- features ---------- */
.features{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.feature{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:30px 26px;transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.feature:hover{transform:translateY(-6px);box-shadow:var(--shadow-sm);border-color:rgba(255,105,0,.4)}
.feature i{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--brand-soft);color:var(--brand);font-size:22px;margin-bottom:18px}
.feature h3{margin:0 0 8px;font-size:17px;letter-spacing:-.01em}
.feature p{margin:0;color:var(--muted);font-size:14px}

/* ---------- banner ---------- */
.banner{position:relative;margin:24px auto 8px;border-radius:32px;overflow:hidden;display:grid;min-height:320px;box-shadow:var(--shadow)}
.banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.banner::after{content:"";position:absolute;inset:0;background:linear-gradient(95deg,rgba(10,10,12,.88) 30%,rgba(10,10,12,.35) 65%,transparent)}
.banner__copy{position:relative;z-index:1;align-self:center;max-width:520px;padding:56px;color:#fff}
.banner__copy h2{margin:0 0 10px;font-size:clamp(26px,3vw,38px);font-weight:800;letter-spacing:-.02em}
.banner__copy p{margin:0 0 26px;color:#d4d4d8}

/* ---------- steps ---------- */
.steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:0;padding:0;counter-reset:step}
.steps li{position:relative;background:var(--soft);border-radius:var(--r);padding:32px 28px;overflow:hidden;transition:transform .3s var(--ease),background-color .3s}
.steps li:hover{transform:translateY(-5px);background:var(--brand-soft)}
.steps__n{display:block;font-size:52px;font-weight:900;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.5px var(--brand);margin-bottom:14px}
.steps h3{margin:0 0 8px;font-size:18px}
.steps p{margin:0;color:var(--muted);font-size:14px}

/* ---------- status ---------- */
.status-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:14px}
.status{display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);border-inline-start:3px solid var(--off);border-radius:16px;padding:16px 18px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:transform .3s var(--ease),background-color .3s}
.status:hover{transform:translateY(-3px);background:rgba(255,255,255,.08)}
.status.is-on{border-inline-start-color:var(--ok)}
.status.is-off{border-inline-start-color:#ef4444}
.status__dot{width:10px;height:10px;border-radius:50%;background:var(--off);flex:none}
.status.is-on .status__dot{background:var(--ok);box-shadow:0 0 12px rgba(22,163,74,.9);animation:pulse 2s infinite}
.status.is-off .status__dot{background:#ef4444}
.status b{display:block;font-size:15px}
.status small{color:#a1a1aa;font-size:11px;font-weight:700;letter-spacing:.1em}
.status em{margin-inline-start:auto;font-style:normal;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.status.is-on em{color:var(--ok)}
.status.is-off em{color:#f87171}
.status-none{color:#a1a1aa}

/* ---------- cta ---------- */
.cta{display:flex;align-items:center;justify-content:space-between;gap:32px;margin:96px auto;border-radius:32px;padding:64px;background:linear-gradient(120deg,#ff7a1a,#f55a00 60%,#e14e00);color:#fff;box-shadow:0 30px 70px rgba(255,105,0,.35)}
.cta h2{margin:0 0 10px;font-size:clamp(28px,3.4vw,42px);font-weight:800;letter-spacing:-.03em}
.cta p{margin:0;max-width:520px;color:rgba(255,255,255,.85)}
.cta__btns{display:flex;gap:12px;flex:none;flex-wrap:wrap}

/* ---------- generic cards (tool / reseller pages) ---------- */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap;padding:72px 0 40px}
.page-head h1{margin:0 0 10px;font-size:clamp(32px,4vw,52px);font-weight:900;letter-spacing:-.035em}
.page-head p{margin:0;color:var(--muted);max-width:520px}
.search{display:flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:#fff}
.search input{border:0;outline:0;padding:12px 18px;font:inherit;min-width:230px}
.search button{border:0;background:var(--brand);color:#fff;padding:0 20px;font-size:16px;cursor:pointer;transition:background-color .2s}
.search button:hover{background:var(--brand-ink)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;padding-bottom:88px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px;box-shadow:var(--shadow-sm);transition:transform .3s var(--ease),box-shadow .3s}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.card__logo{display:grid;place-items:center;width:56px;height:56px;border-radius:16px;background:var(--brand-soft);color:var(--brand);font-size:24px;font-weight:800;margin-bottom:18px;overflow:hidden}
.card__logo img{width:100%;height:100%;object-fit:cover}
.card h2{margin:0 0 8px;font-size:19px;letter-spacing:-.01em}
.card p{color:var(--muted);font-size:14px;margin:0 0 16px}
.badge{display:inline-block;background:var(--soft-2);color:var(--ink-2);border-radius:999px;padding:4px 12px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px}
.badge--brand{background:var(--brand-soft);color:var(--brand)}
.card__contacts{display:flex;gap:10px}
.card__contacts a{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;border:1px solid var(--line);color:var(--ink-2);transition:color .2s,border-color .2s,transform .2s}
.card__contacts a:hover{color:var(--brand);border-color:var(--brand);transform:translateY(-2px)}
.empty{grid-column:1/-1;text-align:center;color:var(--muted);padding:60px 0}

/* ---------- footer ---------- */
.foot{background:var(--dark);color:#a1a1aa;margin-top:0}
.foot__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding:72px 0 48px}
.foot .logo{color:#fff;margin-bottom:16px}
.foot__brand p{font-size:14px;max-width:320px;margin:0 0 18px}
.foot__secure{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--brand)}
.foot h4{color:#fff;font-size:13px;letter-spacing:.14em;text-transform:uppercase;margin:0 0 16px}
.foot__grid a{display:block;font-size:14px;padding:5px 0;transition:color .2s}
.foot__grid a:hover{color:var(--brand)}
.foot__brand .logo{display:inline-flex}
.foot__bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.08);padding:22px 0;font-size:13px}
.foot__langs{display:flex;gap:12px;flex-wrap:wrap}
.foot__langs a{font-size:12px;transition:color .2s}
.foot__langs a:hover,.foot__langs a.is-active{color:var(--brand)}

/* ---------- reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.is-in{opacity:1;transform:translateY(0)}
.no-js .reveal{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
}

/* ---------- public status page ---------- */
.status-page{background:var(--dark);color:#f4f4f5;min-height:calc(100vh - 70px);padding:88px 0 110px;position:relative;overflow:hidden}
.status-page::before{content:"";position:absolute;inset:0;background:radial-gradient(800px 420px at 80% 0%,rgba(255,105,0,.16),transparent 60%);pointer-events:none}
.status-page__head{position:relative;max-width:680px;margin-bottom:48px}
.status-page__head h1{margin:0 0 12px;font-size:clamp(34px,4.4vw,56px);font-weight:900;letter-spacing:-.035em}
.status-page__head p{color:#a1a1aa;margin:0 0 24px;font-size:17px}
.status-page__summary{display:flex;gap:12px;flex-wrap:wrap}
.sum{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:999px;padding:9px 16px;font-size:12.5px;font-weight:700;color:#d4d4d8}
.sum i{color:var(--brand)}
.sum--on{color:#4ade80}.sum--on i{color:#4ade80}
.status-grid--page{position:relative}
.status-page .status-none{color:#a1a1aa}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .hero__grid{grid-template-columns:1fr;gap:72px}
  .hero__stage{max-width:560px}
  .features{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr);row-gap:40px}
  .bento{grid-template-columns:repeat(2,1fr)}
  .tile--xl,.tile--sm,.bento .tile--sm:nth-child(4),.bento .tile--sm:nth-child(5){grid-column:span 2;grid-row:auto;min-height:300px}
  .cta{flex-direction:column;align-items:flex-start}
  .foot__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:768px){
  .nav__links{position:fixed;inset:70px 0 auto;background:#fff;border-bottom:1px solid var(--line);flex-direction:column;padding:18px 24px 26px;gap:6px;display:none;box-shadow:var(--shadow)}
  .nav__links.is-open{display:flex}
  .nav__burger{display:block}
  .nav__inner{gap:16px}
  .nav__signin{display:none}
  .hero{padding:64px 0 80px}
  .chip--server{inset-inline-start:8px}
  .chip--jobs{inset-inline-end:8px}
  .marquee__seq{font-size:22px}
  .steps{grid-template-columns:1fr}
  .banner__copy{padding:36px}
  .cta{padding:44px 32px;margin:64px auto}
  .stage__frame img{height:340px}
}
@media (max-width:520px){
  .features{grid-template-columns:1fr}
  .foot__grid{grid-template-columns:1fr}
  .hero__trust{gap:12px}
  .nav__actions .btn--primary{display:none}
  .logo__text{font-size:16px}
}

/* ---------- theme toggle ---------- */
.theme-toggle{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);color:var(--ink-2);font-size:16px;transition:color .25s,border-color .25s,transform .35s var(--ease)}
.theme-toggle:hover{color:var(--brand);border-color:var(--brand);transform:rotate(18deg)}

/* ---------- prices page ---------- */
.price-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:20px;padding-bottom:88px}
.price-group{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .3s var(--ease),box-shadow .3s}
.price-group:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.price-group__head{display:flex;align-items:center;gap:10px;padding:18px 24px;font-weight:800;font-size:17px;letter-spacing:-.01em}
.price-group__head i{color:var(--brand);font-size:20px}
.price-row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:13px 24px;border-top:1px solid var(--line);font-size:14px;transition:background-color .2s}
.price-row:hover{background:var(--brand-soft)}
.price-row b{font-weight:600}
.price-row span{color:var(--brand-ink);font-weight:800;white-space:nowrap;font-variant-numeric:tabular-nums}

/* ---------- dark theme ---------- */
[data-theme="dark"]{--bg:#0b0b0d;--soft:#131316;--soft-2:#1b1b20;--ink:#f4f4f5;--ink-2:#dcdce0;--muted:#9c9ca5;--line:#26262c;--brand-soft:#2b1a0e;--shadow:0 24px 60px rgba(0,0,0,.5);--shadow-sm:0 10px 30px rgba(0,0,0,.42)}
[data-theme="dark"] .nav{background:rgba(14,14,17,.82)}
[data-theme="dark"] .hero{background:radial-gradient(900px 500px at 85% 10%,rgba(255,105,0,.14),transparent 60%),radial-gradient(600px 400px at 5% 90%,rgba(255,105,0,.08),transparent 60%),linear-gradient(180deg,#0b0b0d 0%,#131316 100%)}
[data-theme="dark"] .marquee{background:#0e0e11}
[data-theme="dark"] .tile,[data-theme="dark"] .feature,[data-theme="dark"] .card,[data-theme="dark"] .price-group{background:#141417}
[data-theme="dark"] .tile ul{color:#c9c9cf}
[data-theme="dark"] .btn--ghost{background:#141417;color:var(--ink)}
[data-theme="dark"] .lang__menu{background:#141417}
[data-theme="dark"] .lang__menu a:hover{background:#1d1d22}
[data-theme="dark"] .search{background:#141417}
[data-theme="dark"] .search input{background:transparent;color:var(--ink)}
[data-theme="dark"] .chip{background:rgba(20,20,23,.8);border-color:rgba(255,255,255,.09)}
[data-theme="dark"] .chip small{color:#9c9ca5}
[data-theme="dark"] .steps li{background:#131316}
[data-theme="dark"] .steps li:hover{background:#2b1a0e}
[data-theme="dark"] .badge{background:#1d1d22;color:#d4d4d8}
[data-theme="dark"] .card__contacts a{border-color:#26262c;color:#d4d4d8}
[data-theme="dark"] .section--dark{background:#08080a}
[data-theme="dark"] .nav__links{background:#0e0e11;border-color:#26262c}

/* --- Prices page refinements --- */
.price-group__head{position:relative}
.price-group__count{margin-inline-start:auto;font-size:12px;font-weight:800;color:var(--muted);background:var(--brand-soft);border-radius:999px;min-width:26px;height:22px;display:inline-flex;align-items:center;justify-content:center;padding:0 8px}
.price-row .nm{display:flex;align-items:center;gap:10px;min-width:0}
.price-row .nm b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.price-row .sid{flex:none;font-size:10.5px;font-weight:800;letter-spacing:.03em;color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:2px 7px;font-variant-numeric:tabular-nums}
.price-pill{flex:none;display:inline-flex;align-items:center;gap:6px;background:var(--brand-soft);color:var(--brand-ink);font-weight:800;border-radius:999px;padding:5px 13px;font-size:12.5px;white-space:nowrap;font-variant-numeric:tabular-nums}

/* --- Status page: support chips --- */
.status__body{min-width:0}
.status__sup{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}
.status__sup span{font-size:10px;font-weight:800;letter-spacing:.08em;color:#a1a1aa;border:1px solid rgba(255,255,255,.14);border-radius:6px;padding:2px 7px}
.status.is-on .status__sup span{color:#cbd5c0;border-color:rgba(34,197,94,.28)}

/* --- Status page: per-service category headings --- */
.status-cat{display:flex;align-items:center;gap:10px;color:#f4f4f5;font-size:16px;font-weight:800;letter-spacing:.01em;margin:30px 0 14px}
.status-cat:first-of-type{margin-top:8px}
.status-cat i{color:var(--brand);font-size:18px}
.status-cat span{margin-inline-start:4px;font-size:12px;font-weight:800;color:#a1a1aa;background:rgba(255,255,255,.08);border-radius:999px;min-width:24px;height:22px;display:inline-flex;align-items:center;justify-content:center;padding:0 8px}
.status__body{flex:1 1 auto;min-width:0}
.status__sup .is-api{color:var(--brand);border-color:rgba(255,105,0,.4)}

/* ===== Server Status — light white/orange theme ===== */
.svc-page{padding-bottom:80px}
.svc-sum{display:flex;flex-wrap:wrap;gap:10px;margin:-14px 0 26px}
.svc-sum__pill{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--muted);
    background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 15px;box-shadow:var(--shadow-sm)}
.svc-sum__pill i{font-size:14px}
.svc-sum__pill.is-on{color:#15803d;border-color:rgba(22,163,74,.35)}
.svc-sum__pill.is-on i{color:var(--ok)}
.svc-sum__pill.is-mix{color:var(--brand-ink);border-color:rgba(255,105,0,.35)}
.svc-sum__pill.is-mix i{color:var(--brand)}

.svc-cat{display:flex;align-items:center;gap:10px;color:var(--ink,#111);font-size:17px;font-weight:800;letter-spacing:-.01em;margin:30px 0 14px}
.svc-cat:first-of-type{margin-top:6px}
.svc-cat i{color:var(--brand);font-size:19px}
.svc-cat span{margin-inline-start:4px;font-size:12px;font-weight:800;color:var(--brand-ink);background:var(--brand-soft);
    border-radius:999px;min-width:24px;height:22px;display:inline-flex;align-items:center;justify-content:center;padding:0 8px}

.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.svc-card{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);
    border-inline-start:4px solid #cbd5e1;border-radius:16px;padding:16px 18px;box-shadow:var(--shadow-sm);
    transition:transform .3s var(--ease),box-shadow .3s}
.svc-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.svc-card.is-on{border-inline-start-color:var(--ok)}
.svc-card.is-off{border-inline-start-color:#ef4444;opacity:.8}

.svc-card__dot{width:11px;height:11px;border-radius:50%;flex:none;background:#cbd5e1}
.svc-card.is-on .svc-card__dot{background:var(--ok);box-shadow:0 0 0 4px rgba(22,163,74,.14);animation:pulse 2s infinite}
.svc-card.is-off .svc-card__dot{background:#ef4444;box-shadow:0 0 0 4px rgba(239,68,68,.12)}

.svc-card__body{flex:1 1 auto;min-width:0}
.svc-card__body b{display:block;font-size:15px;font-weight:700;color:#111;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.svc-card__tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.svc-card__tags span{font-size:10px;font-weight:800;letter-spacing:.06em;color:var(--muted);
    border:1px solid var(--line);border-radius:6px;padding:2px 7px}
.svc-card__tags .is-api{color:var(--brand);border-color:rgba(255,105,0,.4);background:var(--brand-soft)}

.svc-card__badge{flex:none;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
    padding:5px 11px;border-radius:999px}
.svc-card__badge.on{color:#15803d;background:rgba(22,163,74,.12)}
.svc-card__badge.off{color:#dc2626;background:rgba(239,68,68,.12)}

/* dark theme variants (bila user toggle dark) */
[data-theme="dark"] .svc-sum__pill{background:#141417;border-color:rgba(255,255,255,.1);color:#a1a1aa}
[data-theme="dark"] .svc-cat{color:#f4f4f5}
[data-theme="dark"] .svc-card{background:#141417;border-color:rgba(255,255,255,.1)}
[data-theme="dark"] .svc-card__body b{color:#f4f4f5}
[data-theme="dark"] .svc-card__tags span{color:#a1a1aa;border-color:rgba(255,255,255,.14)}
@media(prefers-reduced-motion:reduce){.svc-card.is-on .svc-card__dot{animation:none}}

/* --- Mobile navbar auth links (login/register di dalam menu burger) --- */
.nav__auth-m{display:none}
@media (max-width:768px){
  .nav__links .nav__auth-m{display:block;margin-top:6px;padding:12px 2px;font-weight:600;color:var(--ink);border-top:1px solid var(--line)}
  .nav__links .nav__auth-m--primary{color:#fff;background:var(--brand);text-align:center;border:0;border-radius:12px;margin-top:10px;padding:13px;box-shadow:0 10px 24px rgba(255,105,0,.3)}
  .nav__links .nav__auth-m--primary:hover{background:var(--brand-ink);color:#fff}
}
[data-theme="dark"] .nav__links .nav__auth-m{border-color:#26262c;color:#f4f4f5}

/* ===== Support page ===== */
.sup-page{padding-bottom:80px}
.sup-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:20px;align-items:start}
@media(max-width:820px){.sup-grid{grid-template-columns:1fr}}
.sup-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px;box-shadow:var(--shadow-sm)}
.sup-card h3{margin:0 0 4px;font-size:18px;display:flex;align-items:center;gap:9px}
.sup-card h3 i{color:var(--brand)}
.sup-muted{color:var(--muted);font-size:13px;margin:0 0 16px}
.sup-channels{display:flex;flex-direction:column;gap:10px}
.sup-chan{display:flex;align-items:center;gap:13px;padding:13px 15px;border:1px solid var(--line);border-radius:13px;transition:transform .2s,border-color .2s,background-color .2s}
.sup-chan:hover{transform:translateY(-2px);border-color:var(--brand);background:var(--brand-soft)}
.sup-chan i{font-size:22px;width:26px;text-align:center}
.sup-chan.tg i{color:#229ED9}.sup-chan.wa i{color:#25D366}.sup-chan.em i{color:var(--brand)}
.sup-chan span{display:flex;flex-direction:column;line-height:1.25}
.sup-chan b{font-size:14px}.sup-chan small{color:var(--muted);font-size:12px}
.sup-form{display:flex;flex-direction:column;gap:14px}
.sup-form label{display:flex;flex-direction:column;gap:7px;font-size:13px;font-weight:600;color:var(--ink)}
.sup-opt{font-weight:400;color:var(--muted);font-size:12px}
.sup-form input,.sup-form textarea{width:100%;border:1px solid var(--line);border-radius:11px;padding:12px 14px;font:inherit;background:#fff;color:var(--ink);transition:border-color .2s,box-shadow .2s}
.sup-form input:focus,.sup-form textarea:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px rgba(255,105,0,.12)}
.sup-form textarea{resize:vertical;min-height:120px}
.sup-form .btn{align-self:flex-start}
.sup-alert{display:flex;align-items:center;gap:9px;border-radius:11px;padding:12px 14px;font-size:13.5px;font-weight:600;margin-bottom:16px}
.sup-alert.ok{color:#15803d;background:rgba(22,163,74,.12)}
.sup-alert.err{color:#dc2626;background:rgba(239,68,68,.12)}
[data-theme="dark"] .sup-card{background:#141417;border-color:#26262c}
[data-theme="dark"] .sup-form input,[data-theme="dark"] .sup-form textarea{background:#0e0e11;border-color:#26262c;color:#f4f4f5}
[data-theme="dark"] .sup-chan{border-color:#26262c}