/* ==========================================================================
   RIFT SERVER — design system v3
   Base: the approved "mixed" prototype+uncompleted look (glow background,
   portal visual, category grid, section dividers). Header/footer are now
   theme-aware (the logo has its own opaque fill, so it no longer needs a
   forced dark backdrop). Colors from color-system.svg.
   ========================================================================== */

:root{
  color-scheme: dark;
  --bg:#0B0714;
  --surface:#180F28;
  --surface2:#1E1330;
  --border:#2E1F45;
  --border-soft: rgba(167,139,250,0.16);
  --text:#F1F5F9;
  --muted:#B9C2D0;
  --muted2:#7C8BA1;

  --primary:#6D28D9;
  --primary-light:#A78BFA;
  --highlight:#DDD6FE;
  --on-primary:#FFFFFF;

  --success:#22C55E;
  --warning:#F59E0B;
  --danger:#EF4444;

  --radius-sm:10px;
  --radius:16px;
  --radius-lg:22px;
}

html[data-theme="light"]{
  color-scheme: light;
  --bg:#FFFFFF;
  --surface:#F5F3FF;
  --surface2:#EDE9FE;
  --border:#E2E8F0;
  --border-soft: rgba(109,40,217,0.14);
  --text:#0F172A;
  --muted:#475569;
  --muted2:#64748B;

  --primary:#6D28D9;
  --primary-light:#7C3AED;
  --highlight:#5B21B6;
  --on-primary:#FFFFFF;

  --success:#16A34A;
  --warning:#D97706;
  --danger:#DC2626;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Vazirmatn', Tahoma, sans-serif;
  line-height:1.9;
  overflow-x:hidden;
  transition:background .25s ease, color .25s ease;
}
bdi{unicode-bidi:isolate;}
.num{font-variant-numeric:tabular-nums; font-weight:700; letter-spacing:.2px;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
img,svg{display:block;}
button{font-family:inherit;}
.wrap{max-width:1180px; margin:0 auto; padding:0 28px;}

/* ---------- background ambience (dark only) ---------- */
.bg-glow{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(600px 400px at 82% -5%, rgba(109,40,217,0.35), transparent 60%),
    radial-gradient(500px 380px at 8% 15%, rgba(167,139,250,0.14), transparent 60%),
    var(--bg);
}
html[data-theme="light"] .bg-glow{ background:var(--bg); }
.bg-stars{position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:0.5;}
html[data-theme="light"] .bg-stars{display:none;}
.bg-stars span{position:absolute; width:3px; height:3px; border-radius:50%; background:var(--highlight); opacity:0.5; animation:twinkle 4s ease-in-out infinite;}
@keyframes twinkle{0%,100%{opacity:.15} 50%{opacity:.7}}

/* ---------- section divider ---------- */
.rift-divider{width:100%; height:30px; margin:0; display:block;}
.rift-divider path{fill:url(#riftGrad);}
html[data-theme="light"] .rift-divider{opacity:.5;}

/* ---------- header ---------- */
header{
  position:sticky; top:0; z-index:40;
  background:rgba(11,7,20,0.82);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border-soft);
}
html[data-theme="light"] header{ background:rgba(255,255,255,0.86); }
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 28px; max-width:1180px; margin:0 auto; gap:18px;}
.brand{display:flex; align-items:center; gap:12px;}
.brand-icon{width:38px; height:auto; flex-shrink:0;}
.brand-text{display:flex; flex-direction:column; line-height:1.15;}
.brand-text .en{font-family:Arial, Helvetica, sans-serif; direction:ltr; font-weight:800; font-size:16.5px; letter-spacing:0.5px; color:var(--text);}
.brand-text .en span{color:var(--primary-light);}
.brand-text .fa{font-size:12px; color:var(--muted2); font-weight:500;}

.nav-links{display:none; align-items:center; gap:4px; font-size:14.5px; color:var(--muted);}
@media(min-width:820px){.nav-links{display:flex;}}
.nav-item{position:relative;}
.nav-item > button{background:none; border:none; color:inherit; font:inherit; cursor:pointer; display:flex; align-items:center; gap:5px; padding:9px 10px; border-radius:8px;}
.nav-item > button .arw{font-size:10px; opacity:.7; transform:translateY(1px);}
.nav-item:hover > button, .nav-item.open > button{color:var(--text);}
.dropdown{
  position:absolute; top:100%; inset-inline-start:0; margin-top:10px;
  background:var(--surface); border:1px solid var(--border-soft);
  border-radius:14px; padding:8px; width:250px;
  box-shadow:0 20px 45px rgba(0,0,0,0.28);
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .16s ease, transform .16s ease, visibility .16s ease;
}
.nav-item:hover .dropdown, .nav-item.open .dropdown{opacity:1; visibility:visible; transform:translateY(0);}
.dropdown a{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border-radius:9px; font-size:13.5px; color:var(--muted);}
.dropdown a:hover{background:rgba(167,139,250,0.10); color:var(--text);}
.dropdown a .tag{font-size:10.5px; color:var(--muted2); border:1px solid var(--border-soft); border-radius:999px; padding:2px 8px;}

.nav-cta{display:flex; align-items:center; gap:10px;}
.theme-toggle{width:38px; height:38px; border-radius:10px; border:1px solid var(--border-soft); background:transparent; color:var(--text); display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;}
.theme-toggle:hover{border-color:var(--primary-light);}
.theme-toggle svg{width:17px; height:17px;}
.theme-toggle .i-sun{display:none;}
html[data-theme="light"] .theme-toggle .i-moon{display:none;}
html[data-theme="light"] .theme-toggle .i-sun{display:block;}
.menu-btn{display:flex; width:38px; height:38px; border-radius:10px; border:1px solid var(--border-soft); background:transparent; color:var(--text); align-items:center; justify-content:center; cursor:pointer;}
@media(min-width:820px){.menu-btn{display:none;}}

.btn{display:inline-flex; align-items:center; gap:8px; padding:11px 22px; border-radius:10px; font-size:14.5px; font-weight:600; cursor:pointer; border:1px solid transparent; transition:opacity .15s ease, border-color .15s ease; white-space:nowrap;}
.btn:hover{opacity:.9;}
.btn-primary{background:linear-gradient(135deg,var(--primary-light),var(--primary)); color:#fff;}
.btn-ghost{background:transparent; border-color:var(--border); color:var(--text);}
.btn-ghost:hover{border-color:var(--primary-light);}
.btn-sm{padding:8px 16px; font-size:13px;}
.btn-block{width:100%; justify-content:center;}

/* ---------- mobile nav ---------- */
.mobile-panel{display:none; position:fixed; inset:0; z-index:60; background:rgba(6,4,12,0.55);}
.mobile-panel.open{display:block;}
.mobile-panel .sheet{position:absolute; inset-inline-end:0; top:0; bottom:0; width:min(320px,84vw); background:var(--surface); border-inline-start:1px solid var(--border-soft); padding:22px; display:flex; flex-direction:column; gap:6px; overflow-y:auto;}
.mobile-panel .sheet a{padding:13px 10px; border-radius:10px; color:var(--text); font-size:15px;}
.mobile-panel .sheet a:hover{background:rgba(167,139,250,0.10);}
.mobile-panel .grp-label{font-size:11.5px; color:var(--muted2); padding:16px 10px 4px; text-transform:uppercase; letter-spacing:.5px;}
.mobile-panel .close-btn{align-self:flex-start; width:36px; height:36px; border-radius:9px; border:1px solid var(--border-soft); background:transparent; color:var(--text); margin-bottom:8px;}

/* ---------- hero ---------- */
.hero{padding:80px 0 40px; text-align:center;}
.eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--primary-light); font-weight:600; background:rgba(167,139,250,0.09); border:1px solid var(--border-soft); padding:7px 16px; border-radius:999px;}
.eyebrow .dot{width:6px; height:6px; border-radius:50%; background:var(--success); box-shadow:0 0 8px var(--success);}
h1{font-size:clamp(2rem, 4.4vw, 3.1rem); font-weight:800; line-height:1.35; max-width:720px; margin:18px auto 20px;}
h1 .grad{background:linear-gradient(135deg,var(--highlight),var(--primary-light) 60%, var(--primary)); -webkit-background-clip:text; background-clip:text; color:transparent;}
.hero p.sub{max-width:600px; margin:0 auto 34px; color:var(--muted); font-size:16px;}
.badges{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-bottom:8px;}
.badge{display:flex; align-items:center; gap:8px; border:1px solid var(--border); background:var(--surface); padding:9px 15px; border-radius:9px; font-size:13px; color:var(--muted);}
.badge b{color:var(--text); font-weight:700;}

.hero-visual{margin-top:44px;}
html[data-theme="light"] .hero-visual{display:none;}
.portal-wrap{position:relative; max-width:600px; margin:0 auto; aspect-ratio:16/6.2; display:flex; align-items:center; justify-content:center;}

/* ---------- generic section shell ---------- */
section{padding:80px 0;}
.section-head{text-align:center; max-width:600px; margin:0 auto 48px;}
.section-head h2{font-size:clamp(1.6rem,3.2vw,2.2rem); font-weight:800; margin-bottom:12px;}
.section-head p{color:var(--muted); font-size:15px;}

/* ---------- category grid ---------- */
.cat-grid{display:grid; grid-template-columns:1fr; gap:18px;}
@media(min-width:640px){.cat-grid{grid-template-columns:1fr 1fr;}}
@media(min-width:960px){.cat-grid{grid-template-columns:repeat(3,1fr);}}
.cat-card{background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius); padding:24px 22px; display:flex; flex-direction:column; gap:12px; transition:border-color .2s ease, transform .2s ease;}
.cat-card:hover{border-color:var(--primary-light); transform:translateY(-2px);}
.cat-card .flag{font-size:26px;}
.cat-card h3{font-size:16px; font-weight:700;}
.cat-card p{font-size:13.5px; color:var(--muted2); flex:1;}
.cat-card .foot{display:flex; align-items:center; justify-content:space-between; font-size:12.5px; color:var(--muted2); padding-top:10px; border-top:1px dashed var(--border);}
.cat-card .foot .arrow{color:var(--primary-light); font-weight:700;}
.badge-soon{font-size:10.5px; color:var(--warning); border:1px solid rgba(245,158,11,.35); background:rgba(245,158,11,.08); padding:2px 9px; border-radius:999px;}

/* ---------- panel & lists ---------- */
.panel{background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius); padding:28px;}
.grid2{display:grid; grid-template-columns:1fr; gap:20px;}
@media(min-width:760px){.grid2{grid-template-columns:1.1fr 1fr;}}

.spec-list{list-style:none; margin:0 0 18px; padding:0;}
.spec-list li{display:flex; justify-content:space-between; align-items:baseline; padding:10px 0; border-bottom:1px dashed var(--border); font-size:13.5px;}
.spec-list li:last-child{border-bottom:none;}
.spec-list li .k{color:var(--muted);}
.spec-list li .v{font-weight:600; color:var(--text); font-size:13px;}
.plan-region{font-size:12.5px; color:var(--primary-light); font-weight:600; margin:-6px 0 14px;}

.price-block{display:flex; align-items:baseline; gap:8px; margin:16px 0;}
.price-block .amount{font-size:26px; font-weight:800; color:var(--text);}
.price-block .per{font-size:12.5px; color:var(--muted);}

.mini-badges{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px;}
.mini-badge{font-size:12px; padding:6px 12px; border-radius:20px; background:rgba(167,139,250,.12); color:var(--primary-light); font-weight:600;}

.addon-title{font-size:13px; font-weight:700; color:var(--muted); margin:0 0 10px; text-transform:uppercase; letter-spacing:.5px;}
.addon-row{display:flex; justify-content:space-between; align-items:center; padding:13px 0; border-bottom:1px solid var(--border);}
.addon-row:last-child{border-bottom:none;}
.addon-row .label{font-size:13.5px; color:var(--muted);}
.addon-row .val{color:var(--text); font-weight:600; font-size:13.5px;}
.addon-row .val.tbd{color:var(--muted2); font-weight:500;}
.rial-note{font-size:12.5px; color:var(--muted2); background:var(--bg); border:1px dashed var(--border); border-radius:10px; padding:11px 13px; margin-top:6px;}

/* ---------- germany multi-plan grid ---------- */
.de-grid{display:grid; grid-template-columns:1fr; gap:18px;}
@media(min-width:640px){.de-grid{grid-template-columns:1fr 1fr;}}
@media(min-width:960px){.de-grid{grid-template-columns:repeat(4,1fr);}}
.de-card{background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius); padding:24px 22px; display:flex; flex-direction:column;}
.de-card h4{margin:0 0 14px; font-size:15px; font-weight:800;}
.de-card .spec-list li{padding:8px 0; font-size:12.5px;}
.de-card .price-block .amount{font-size:21px;}
.de-card .btn-primary, .de-card .btn-ghost{width:100%; justify-content:center; margin-top:auto;}
.de-card.custom{background:var(--bg); border-style:dashed;}
.de-card.custom p{font-size:12.5px; color:var(--muted); margin:0 0 18px; flex:1;}

/* ---------- linode / config panel ---------- */
.field{margin-bottom:16px;}
.field label{display:block; font-size:13px; color:var(--muted); margin-bottom:7px; font-weight:600;}
.field select{width:100%; padding:12px 13px; border-radius:10px; border:1px solid var(--border); background:var(--bg); color:var(--text); font-size:14px; font-family:inherit;}
.linode-plans{list-style:none; margin:0 0 8px;}
.linode-plans li{display:flex; justify-content:space-between; padding:11px 0; border-bottom:1px dashed var(--border); font-size:13.5px;}
.linode-plans li .p-name{color:var(--muted);}
.linode-plans li .p-price{color:var(--text); font-weight:700;}

/* ---------- trust ---------- */
.trust-grid{display:grid; grid-template-columns:1fr; gap:18px;}
@media(min-width:760px){.trust-grid{grid-template-columns:repeat(3,1fr);}}
.trust-card{background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius); padding:26px; text-align:center;}
.trust-card .icon-box{width:44px; height:44px; border-radius:11px; margin:0 auto 15px; display:flex; align-items:center; justify-content:center; background:rgba(167,139,250,.12); color:var(--primary-light); font-weight:800; font-size:15px;}
.trust-card h4{font-size:15px; font-weight:700; margin-bottom:8px;}
.trust-card p{font-size:13px; color:var(--muted2);}

/* ---------- coming-soon panel ---------- */
.soon-panel{background:var(--surface); border:1px dashed var(--border-soft); border-radius:var(--radius-lg); padding:52px 36px; text-align:center; max-width:680px; margin:0 auto;}
.soon-panel .icon-box{width:56px; height:56px; border-radius:15px; margin:0 auto 20px; display:flex; align-items:center; justify-content:center; background:rgba(167,139,250,.12); border:1px solid var(--border-soft);}
.soon-panel h3{font-size:19px; font-weight:800; margin-bottom:10px;}
.soon-panel p{color:var(--muted); font-size:14px; margin-bottom:24px; max-width:460px; margin-inline:auto;}
.soon-panel .spec-list{text-align:right; max-width:360px; margin:0 auto 24px;}
.soon-panel .btn-row{display:flex; gap:10px; justify-content:center; flex-wrap:wrap;}

/* ---------- CTA band ---------- */
.cta-band{text-align:center; padding:80px 0;}
.cta-band h2{font-size:clamp(1.5rem,3.2vw,2.2rem); font-weight:800; margin-bottom:16px;}
.cta-band p{color:var(--muted); margin-bottom:28px;}

/* ---------- auth ---------- */
.auth-shell{min-height:58vh; display:flex; align-items:center; justify-content:center; padding:56px 20px;}
.auth-card{width:100%; max-width:380px; background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius-lg); padding:34px 28px; text-align:center;}
.auth-card .icon-box{width:50px; height:50px; border-radius:13px; margin:0 auto 18px; display:flex; align-items:center; justify-content:center; background:rgba(167,139,250,.12); border:1px solid var(--border-soft);}
.auth-card h2{font-size:18px; font-weight:800; margin-bottom:10px;}
.auth-card p{font-size:13px; color:var(--muted); margin-bottom:22px;}

/* ---------- page hero / crumbs ---------- */
.page-hero{padding:56px 0 8px;}
.page-hero h1{margin:0 0 14px; max-width:none;}
.crumbs{display:flex; align-items:center; gap:6px; font-size:12px; color:var(--muted2); margin-bottom:16px; flex-wrap:wrap;}
.crumbs a:hover{color:var(--primary-light);}
.crumbs .sep{opacity:.6;}
.status-line{display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--muted); margin-bottom:10px;}
.status-line .led{width:7px; height:7px; border-radius:50%; background:var(--success);}
.status-line .led.warn{background:var(--warning);}

/* ---------- footer ---------- */
footer{background:var(--surface); border-top:1px solid var(--border-soft); padding:52px 0 30px; color:var(--muted);}
.footer-grid{display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:36px; margin-bottom:40px;}
@media(max-width:760px){.footer-grid{grid-template-columns:1fr 1fr;}}
.footer-brand .en{font-weight:800; font-size:16px; color:var(--text);}
.footer-brand .en span{color:var(--primary-light);}
.footer-brand p{font-size:13.5px; color:var(--muted2); margin-top:14px; max-width:280px;}
.footer-col h5{font-size:14px; font-weight:700; margin-bottom:16px; color:var(--text);}
.footer-col li{margin-bottom:11px;}
.footer-col a{font-size:13.5px; color:var(--muted2);}
.footer-col a:hover{color:var(--primary-light);}
.footer-bottom{display:flex; align-items:center; justify-content:space-between; padding-top:26px; border-top:1px solid var(--border-soft); font-size:12.5px; color:var(--muted2); flex-wrap:wrap; gap:12px;}
.footer-bottom .domain{color:var(--primary-light); font-weight:600;}

@media (prefers-reduced-motion: reduce){ *{animation:none !important; transition:none !important;} }