/* ==========================================================================
   استار هاستینگ | Star Hosting — Design System v2
   Light-first · White + Blue · Dark-mode ready · RTL · Responsive
   ========================================================================== */

/* IRANYekanX — variable weight (same family hidata uses) — served locally */
@font-face {
  font-family: "IRANYekanX";
  src: url("../fonts/IRANYekanX-VF.woff2") format("woff2");
  font-weight: 100 1000;
  font-display: swap;
  font-style: normal;
}
/* Vazirmatn — local fallback (variable) */
@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/Vazirmatn-VF.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}

:root {
  /* Brand — blue family */
  --blue-500: #3b82f6;
  --blue-600: #2563eb;
  --blue-400: #60a5fa;
  --sky-400:  #38bdf8;
  --sky-500:  #22d3ee;
  --brand-grad: linear-gradient(135deg, #2563eb 0%, #22d3ee 100%);
  --brand-soft: linear-gradient(135deg, rgba(37,99,235,.12), rgba(34,211,238,.12));

  /* Light theme surfaces (default) */
  --bg:        #f6f9ff;
  --bg-2:      #eef4ff;
  --surface:   #ffffff;
  --surface-2: #f2f6ff;
  --border:    #e3ebf7;
  --border-2:  #d3e0f4;

  /* Text */
  --text:      #0f1f3d;
  --heading:   #0a1733;
  --muted:     #4a5a7a;
  --muted-2:   #7a86a3;

  /* Feedback */
  --success:   #16a34a;
  --warning:   #d97706;
  --danger:    #dc2626;

  /* Accent for pricing check */
  --check:     #2563eb;

  /* Shape */
  --radius:    22px;
  --radius-sm: 14px;
  --radius-lg: 30px;

  /* Motion */
  --ease: cubic-bezier(.16, 1, .3, 1);

  /* Shadows */
  --shadow-sm: 0 4px 16px rgba(15, 31, 61, .06);
  --shadow:    0 18px 50px rgba(29, 78, 216, .12);
  --shadow-lg: 0 30px 70px rgba(29, 78, 216, .18);
  --glow:      0 12px 34px rgba(37, 99, 235, .32);

  --nav-bg:    rgba(255, 255, 255, .72);
  --hero-glow-1: rgba(56, 189, 248, .35);
  --hero-glow-2: rgba(37, 99, 235, .28);
  --grid-line: rgba(37, 99, 235, .07);

  --container: 1180px;
}

/* -------- Dark theme (DEFAULT) overrides -------- */
html[data-theme="dark"] {
  --bg:        #060911;
  --bg-2:      #0a0f1d;
  --surface:   #0e1524;
  --surface-2: #141d31;
  --border:    rgba(120, 160, 255, .12);
  --border-2:  rgba(120, 160, 255, .22);

  --text:      #d7e2f7;
  --heading:   #f4f8ff;
  --muted:     #93a4c8;
  --muted-2:   #64728f;

  --check:     #38bdf8;

  --shadow-sm: 0 4px 18px rgba(0, 0, 0, .4);
  --shadow:    0 20px 55px rgba(0, 0, 0, .55);
  --shadow-lg: 0 34px 80px rgba(0, 0, 0, .65);
  --glow:      0 14px 40px rgba(37, 99, 235, .55);

  --nav-bg:    rgba(8, 12, 22, .68);
  --hero-glow-1: rgba(34, 211, 238, .30);
  --hero-glow-2: rgba(37, 99, 235, .34);
  --grid-line: rgba(120, 170, 255, .08);
}

/* --------------------------------------------------------------- Reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: clip; max-width: 100%; }

body {
  font-family: "IRANYekanX", "Vazirmatn", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.8;
  font-weight: 500;
  overflow-x: clip;
  direction: rtl;
  overflow-wrap: break-word;
  width: 100%;
  position: relative;
  -webkit-font-smoothing: antialiased;
  transition: background .4s var(--ease), color .4s var(--ease);
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { list-style: none; }
::selection { background: var(--blue-500); color: #fff; }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg-2); }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--blue-400); }

/* ------------------------------------------------------------ Layout --- */
.container {
  width: 100%; max-width: var(--container);
  margin-inline: auto; padding-inline: 24px;
  position: relative; z-index: 1;
}
section { padding-block: 92px; position: relative; z-index: 1; }

.section-head { text-align: center; max-width: 660px; margin: 0 auto 54px; }
.section-head .eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 800; letter-spacing: .3px;
  color: var(--blue-600);
  background: var(--brand-soft);
  border: 1px solid var(--border-2);
  padding: 7px 16px; border-radius: 999px; margin-bottom: 18px;
}
html[data-theme="dark"] .section-head .eyebrow { color: var(--sky-400); }
.section-head h2 {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 800; line-height: 1.28; letter-spacing: -.6px; color: var(--heading);
}
.section-head p { color: var(--muted); margin-top: 14px; font-size: 17px; }

.grad-text {
  background: linear-gradient(135deg, #2563eb 0%, #38bdf8 50%, #2563eb 100%);
  background-size: 220% 220%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: grad-shift 6s ease-in-out infinite;
}
@keyframes grad-shift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* ------------------------------------------------------------ Buttons --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: inherit; font-size: 15px; font-weight: 700;
  padding: 13px 26px; border-radius: 12px; border: 1.5px solid transparent;
  cursor: pointer; transition: all .3s var(--ease); white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; }
.btn-primary { background: var(--brand-grad); color: #fff; box-shadow: var(--glow); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(37, 99, 235, .42); }
.btn-ghost { background: var(--surface); color: var(--text); border-color: var(--border-2); box-shadow: var(--shadow-sm); }
.btn-ghost:hover { transform: translateY(-2px); border-color: var(--blue-400); color: var(--blue-600); }
html[data-theme="dark"] .btn-ghost:hover { color: var(--sky-400); }
.btn-lg { padding: 15px 32px; font-size: 16px; }
.btn-block { width: 100%; }

/* ------------------------------------------------------------ Navbar --- */
.nav {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 100;
  padding-block: 18px; transition: all .4s var(--ease);
}
.nav.scrolled {
  background: var(--nav-bg); backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--border); padding-block: 12px;
  box-shadow: var(--shadow-sm);
}
.nav .container { display: flex; align-items: center; justify-content: space-between; gap: 20px; position: relative; z-index: 3; }

.logo { display: flex; align-items: center; gap: 12px; font-weight: 900; font-size: 21px; color: var(--heading); white-space: nowrap; }
.logo .mark {
  width: 42px; height: 42px; border-radius: 13px; position: relative; overflow: hidden;
  background: var(--brand-grad); display: grid; place-items: center; box-shadow: var(--glow);
}
.logo .mark svg { width: 23px; height: 23px; color: #fff; }
.logo .mark .mark-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.logo .txt-2 { color: var(--blue-600); }
html[data-theme="dark"] .logo .txt-2 { color: var(--sky-400); }

.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links > li > a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px; border-radius: 10px; font-weight: 700; font-size: 15px;
  color: var(--muted); transition: all .25s var(--ease); white-space: nowrap;
}
.nav-links > li > a:hover { color: var(--blue-600); background: var(--surface-2); }
html[data-theme="dark"] .nav-links > li > a:hover { color: var(--sky-400); }

.nav-cta { display: flex; align-items: center; gap: 10px; }

/* Theme toggle */
.theme-btn {
  width: 44px; height: 44px; border-radius: 12px; flex: none;
  background: var(--surface); border: 1.5px solid var(--border-2);
  color: var(--muted); cursor: pointer; display: grid; place-items: center;
  transition: all .3s var(--ease); box-shadow: var(--shadow-sm);
}
.theme-btn:hover { color: var(--blue-600); border-color: var(--blue-400); transform: translateY(-2px); }
.theme-btn svg { width: 20px; height: 20px; }
.theme-btn .i-sun { display: none; }
.theme-btn .i-moon { display: block; }
html[data-theme="dark"] .theme-btn .i-sun { display: block; color: var(--warning); }
html[data-theme="dark"] .theme-btn .i-moon { display: none; }

.nav-toggle {
  display: none; background: var(--surface); border: 1.5px solid var(--border-2); color: var(--text);
  cursor: pointer; width: 44px; height: 44px; border-radius: 12px; box-shadow: var(--shadow-sm);
}
.nav-toggle:hover { border-color: var(--blue-400); }
.nav-toggle svg { width: 24px; height: 24px; }

/* Dropdown */
.has-drop { position: relative; }
.drop {
  position: absolute; inset-block-start: calc(100% + 12px); inset-inline-end: 0;
  min-width: 270px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 10px;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: all .3s var(--ease);
}
.has-drop:hover .drop { opacity: 1; visibility: visible; transform: translateY(0); }
.drop a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; transition: background .2s; }
.drop a:hover { background: var(--surface-2); }
.drop a .di { width: 40px; height: 40px; border-radius: 11px; flex: none; background: var(--brand-soft); display: grid; place-items: center; color: var(--blue-600); }
html[data-theme="dark"] .drop a .di { color: var(--sky-400); }
.drop a .di svg { width: 20px; height: 20px; }
.drop a b { font-size: 15px; color: var(--heading); }
.drop a small { color: var(--muted); font-size: 12.5px; display: block; }

/* ------------------------------------------------------------ Hero --- */
.hero { padding-top: 168px; padding-bottom: 84px; text-align: center; overflow: hidden; position: relative; }
.hero .badge {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--border-2);
  padding: 7px 16px 7px 7px; border-radius: 999px; font-size: 14px; font-weight: 700;
  margin-bottom: 26px; box-shadow: var(--shadow-sm); color: var(--muted);
}
.hero .badge .pill { background: var(--brand-grad); color: #fff; font-size: 12px; font-weight: 800; padding: 3px 12px; border-radius: 999px; animation: pill-glow 2.4s ease-in-out infinite; }
@keyframes pill-glow { 0%,100% { box-shadow: 0 0 0 0 rgba(37,99,235,.5); } 50% { box-shadow: 0 0 0 6px rgba(37,99,235,0); } }
.hero h1 {
  font-size: clamp(36px, 6.2vw, 68px); font-weight: 900; line-height: 1.2;
  letter-spacing: -1.4px; margin-bottom: 22px; color: var(--heading);
}
.hero p.lead { font-size: clamp(16px, 2.1vw, 20px); color: var(--muted); max-width: 620px; margin: 0 auto 36px; }
.hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

.hero-stats { display: flex; gap: 46px; justify-content: center; flex-wrap: wrap; margin-top: 60px; padding-top: 38px; border-top: 1px solid var(--border); }
.hero-stats .stat b { font-size: clamp(26px, 4vw, 40px); font-weight: 900; display: block; color: var(--heading); }
.hero-stats .stat span { color: var(--muted); font-size: 14px; }

/* Domain search */
.domain-box {
  max-width: 700px; margin: 42px auto 0;
  background: var(--surface); border: 1px solid var(--border-2);
  border-radius: 16px; padding: 9px; box-shadow: var(--shadow);
  display: flex; gap: 9px;
}
.domain-box input {
  flex: 1; background: transparent; border: none; outline: none;
  color: var(--text); font-family: inherit; font-size: 16px; padding: 0 18px; text-align: right;
}
.domain-box input::placeholder { color: var(--muted-2); }
.tld-row { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; margin-top: 20px; color: var(--muted); font-size: 14px; }
.tld-row b { color: var(--blue-600); }
html[data-theme="dark"] .tld-row b { color: var(--sky-400); }

/* Floating soft orbs */
.orb { position: absolute; border-radius: 50%; filter: blur(70px); z-index: 0; pointer-events: none; }
.orb.o1 { width: 360px; height: 360px; background: var(--hero-glow-2); top: 4%; right: -90px; animation: float 9s ease-in-out infinite; }
.orb.o2 { width: 300px; height: 300px; background: var(--hero-glow-1); bottom: 2%; left: -70px; animation: float 11s ease-in-out infinite reverse; }
@keyframes float { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-36px) } }

/* Living butterflies — JEFworks animated-svg-butterfly, flown by JS */
.svg-defs { position: absolute; height: 0; width: 0; }
.bfly-layer { position: fixed; inset: 0; z-index: 9; pointer-events: none; overflow: hidden; }
.bfly { position: absolute; top: 0; left: 0; width: 100px; height: 100px; pointer-events: none; will-change: transform; }

.butterfly_container { width: 100px; height: 100px; transform-style: preserve-3d; }
.butterfly_container var { position: absolute; left: 0; top: 50%; width: 100px; height: 100px; margin-left: -50px; margin-top: -50px; transform-style: preserve-3d; }
.butterfly_container var.rotate3d { transform: rotate3d(1, 0.5, 0, 50deg); }
.butterfly_container figure.butterfly { position: absolute; left: 50%; top: 50%; width: 100px; height: 100px; margin-left: -50px; margin-top: -50px; transform-style: preserve-3d; transform-origin: 50% 50%; }
.butterfly_container figure.butterfly .wing { position: absolute; width: 50px; height: 100px; transform-style: preserve-3d; transform-origin: 50% 50%; transform: translate3d(0,0,0) rotate3d(1,0.5,0,45deg); }
.butterfly_container figure.butterfly .wing use { display: block; }
.butterfly_container figure.butterfly .wing.right { transform-origin: 50px 50px; transform: translate3d(0,0,0) scaleX(-1) rotate3d(0,1,0,45deg); animation: right-wing-flap 2s ease-in-out infinite; }
.butterfly_container figure.butterfly .wing.left { transform-origin: 50px 50px; animation: left-wing-flap 2s ease-in-out infinite; }
.bfly.resting .wing.left, .bfly.resting .wing.right { animation-duration: 3.2s; }
.bfly.fleeing .wing.left, .bfly.fleeing .wing.right { animation-duration: 0.55s; }

@keyframes left-wing-flap {
  0%   { transform: translate3d(0,0,0) scaleX(1) rotate3d(0,1,0,60deg); }
  50%  { transform: translate3d(0,0,0) scaleX(1) rotate3d(0,1,0,-70deg); }
  100% { transform: translate3d(0,0,0) scaleX(1) rotate3d(0,1,0,60deg); }
}
@keyframes right-wing-flap {
  0%   { transform: translate3d(0,0,0) scaleX(-1) rotate3d(0,1,0,60deg); }
  50%  { transform: translate3d(0,0,0) scaleX(-1) rotate3d(0,1,0,-70deg); }
  100% { transform: translate3d(0,0,0) scaleX(-1) rotate3d(0,1,0,60deg); }
}
@media (prefers-reduced-motion: reduce) { .bfly-layer { display: none; } }

/* Butterfly is a fixed 100px sprite — scale it down so it stays proportional
   on smaller screens (the JS flight engine only sets transform on .bfly, so
   scaling the inner container here is safe and won't be overwritten). */
@media (max-width: 992px) { .butterfly_container { transform: scale(.72); transform-origin: center; } }
@media (max-width: 560px) { .butterfly_container { transform: scale(.55); transform-origin: center; } }
@media (max-width: 380px) { .bfly-layer { display: none; } }

/* ---- Hero — type-forward, centered ---- */
.hero-inner { max-width: 860px; margin-inline: auto; text-align: center; }
.hero-inner .badge { margin-bottom: 26px; }
.hero-inner .hero-cta { justify-content: center; }
.hero-stats { margin-top: 62px; }

/* Tech spec chips under the search */
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; }
.chips span {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; color: var(--muted);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  border: 1px solid var(--border); padding: 7px 14px; border-radius: 999px;
  backdrop-filter: blur(6px);
}
.chips span i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--sky-500);
  box-shadow: 0 0 8px var(--sky-500);
}

/* -------------------------------------------------------- Trust bar --- */
.trust { padding-block: 44px !important; border-block: 1px solid var(--border); background: var(--bg-2); }
.trust .row { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.trust .row .lbl { color: var(--muted-2); font-size: 13px; font-weight: 800; letter-spacing: .5px; }
.trust .logos { display: flex; align-items: center; gap: 38px; flex-wrap: wrap; }
.trust .logos span { font-weight: 800; font-size: 19px; color: var(--muted-2); opacity: .85; }

/* ------------------------------------------------------------ Cards --- */
.grid { display: grid; gap: 24px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 30px;
  transition: all .35s var(--ease); box-shadow: var(--shadow-sm);
}
.card:hover { transform: translateY(-6px); border-color: var(--border-2); box-shadow: var(--shadow); }

.feature .ic {
  width: 56px; height: 56px; border-radius: 15px; display: grid; place-items: center;
  background: var(--brand-soft); color: var(--blue-600); margin-bottom: 20px; transition: all .35s var(--ease);
}
html[data-theme="dark"] .feature .ic { color: var(--sky-400); }
.feature:hover .ic { background: var(--brand-grad); color: #fff; transform: rotate(-6deg) scale(1.05); }
.feature .ic svg { width: 27px; height: 27px; }
.feature h3 { font-size: 19px; font-weight: 800; margin-bottom: 10px; color: var(--heading); }
.feature p { color: var(--muted); font-size: 15px; }

/* ------------------------------------------------------- Pricing --- */
.plan {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 34px 30px;
  transition: all .35s var(--ease); position: relative; display: flex; flex-direction: column;
  box-shadow: var(--shadow-sm);
}
.plan:hover { transform: translateY(-8px); box-shadow: var(--shadow); border-color: var(--border-2); }
.plan.featured {
  border: 2px solid transparent;
  background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--brand-grad) border-box;
  box-shadow: var(--shadow-lg); transform: scale(1.04);
}
.plan.featured:hover { transform: scale(1.04) translateY(-8px); }
.plan .tag {
  position: absolute; inset-block-start: -13px; inset-inline-start: 50%; transform: translateX(50%);
  background: var(--brand-grad); color: #fff; font-size: 12.5px; font-weight: 800;
  padding: 5px 18px; border-radius: 999px; box-shadow: var(--glow);
}
.plan h3 { font-size: 22px; font-weight: 800; margin-bottom: 6px; color: var(--heading); }
.plan .desc { color: var(--muted); font-size: 14px; margin-bottom: 22px; }
.plan .price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.plan .price .amt { font-size: 40px; font-weight: 900; color: var(--heading); }
.plan .price .per { color: var(--muted); font-size: 15px; }
.plan .price-note { color: var(--muted-2); font-size: 13px; margin-bottom: 24px; }
.plan ul { display: flex; flex-direction: column; gap: 13px; margin-bottom: 28px; flex: 1; }
.plan ul li { display: flex; align-items: center; gap: 11px; font-size: 15px; color: var(--muted); }
.plan ul li svg { width: 19px; height: 19px; color: var(--check); flex: none; }
.plan ul li.off { opacity: .45; text-decoration: line-through; }
.plan ul li.off svg { color: var(--muted-2); }

.billing-toggle { display: inline-flex; align-items: center; gap: 14px; margin: 0 auto 42px; justify-content: center; width: 100%; }
.switch { width: 56px; height: 30px; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 999px; position: relative; cursor: pointer; transition: background .3s; }
.switch::after { content: ""; position: absolute; inset-block-start: 3px; inset-inline-start: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--brand-grad); transition: transform .3s var(--ease); box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.switch.on { background: rgba(37, 99, 235, .18); }
.switch.on::after { transform: translateX(-26px); }
.billing-toggle .save { background: rgba(22,163,74,.12); color: var(--success); font-size: 12.5px; font-weight: 800; padding: 4px 12px; border-radius: 999px; }
.billing-toggle .lbl-t { font-weight: 800; font-size: 15px; color: var(--heading); cursor: pointer; user-select: none; }
.switch { cursor: pointer; }

/* ------------------------------------------------------- Split --- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split .visual { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 26px; box-shadow: var(--shadow); position: relative; overflow: hidden; }
.split-list { display: flex; flex-direction: column; gap: 22px; margin-top: 28px; }
.split-list .item { display: flex; gap: 16px; }
.split-list .item .ic { width: 46px; height: 46px; flex: none; border-radius: 12px; background: var(--brand-soft); display: grid; place-items: center; color: var(--blue-600); }
html[data-theme="dark"] .split-list .item .ic { color: var(--sky-400); }
.split-list .item .ic svg { width: 22px; height: 22px; }
.split-list .item h4 { font-size: 17px; font-weight: 800; margin-bottom: 4px; color: var(--heading); }
.split-list .item p { color: var(--muted); font-size: 14.5px; }

.terminal { background: #0a1428; border-radius: 14px; border: 1px solid rgba(255,255,255,.08); overflow: hidden; }
.terminal .bar { display: flex; align-items: center; gap: 8px; padding: 13px 16px; background: rgba(255,255,255,.04); border-bottom: 1px solid rgba(255,255,255,.06); direction: ltr; }
.terminal .bar i { width: 12px; height: 12px; border-radius: 50%; display: block; }
.terminal .bar i:nth-child(1){background:#ff5f57} .terminal .bar i:nth-child(2){background:#febc2e} .terminal .bar i:nth-child(3){background:#28c840}
.terminal .body { padding: 20px; font-family: Consolas, "SFMono-Regular", monospace; font-size: 13.5px; line-height: 2; direction: ltr; text-align: left; color: #cdd8ee; overflow-x: auto; }
.terminal .body > div { white-space: nowrap; }
.terminal .c-g{color:#3ddc84} .terminal .c-b{color:#54a0ff} .terminal .c-m{color:#6b7aa0} .terminal .c-y{color:#ffd166}

/* ------------------------------------------------------- Stats band --- */
.band { background: var(--bg-2); border-block: 1px solid var(--border); }
.band .grid-4 { text-align: center; }
.band .s b { font-size: clamp(30px, 5vw, 50px); font-weight: 900; display: block; color: var(--heading); }
.band .s b span { background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.band .s span.lbl2 { color: var(--muted); font-size: 15px; }

/* ------------------------------------------------------- Testimonials --- */
.tcard { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow-sm); }
.tcard .stars { color: #f5a623; margin-bottom: 14px; letter-spacing: 3px; }
.tcard p { font-size: 15.5px; margin-bottom: 22px; color: var(--text); }
.tcard .who { display: flex; align-items: center; gap: 12px; }
.tcard .who .av { width: 46px; height: 46px; border-radius: 50%; background: var(--brand-grad); display: grid; place-items: center; font-weight: 800; color: #fff; }
.tcard .who b { display: block; font-size: 15px; color: var(--heading); }
.tcard .who small { color: var(--muted); }

/* ------------------------------------------------------- FAQ --- */
.faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 14px; overflow: hidden; transition: border-color .3s, box-shadow .3s; box-shadow: var(--shadow-sm); }
.faq-item.open { border-color: var(--blue-400); box-shadow: var(--shadow); }
.faq-q { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; cursor: pointer; font-weight: 800; font-size: 16.5px; color: var(--heading); }
.faq-q .plus { width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--brand-soft); display: grid; place-items: center; color: var(--blue-600); transition: transform .3s; }
html[data-theme="dark"] .faq-q .plus { color: var(--sky-400); }
.faq-item.open .faq-q .plus { transform: rotate(45deg); background: var(--brand-grad); color: #fff; }
.faq-q .plus svg { width: 18px; height: 18px; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .4s var(--ease); }
.faq-a p { padding: 0 24px 22px; color: var(--muted); font-size: 15px; }

/* ------------------------------------------------------- CTA --- */
.cta-band { text-align: center; }
.cta-inner { background: var(--brand-grad); border-radius: var(--radius-lg); padding: 62px 40px; position: relative; overflow: hidden; box-shadow: var(--shadow-lg); }
.cta-inner::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(420px circle at 18% 20%, rgba(255,255,255,.28), transparent 60%); }
.cta-inner h2 { font-size: clamp(28px, 4vw, 44px); font-weight: 900; color: #fff; margin-bottom: 16px; position: relative; }
.cta-inner p { color: rgba(255,255,255,.92); font-size: 18px; margin-bottom: 30px; position: relative; }
.cta-inner .hero-cta { position: relative; }
.cta-inner .btn-primary { background: #fff; color: var(--blue-600); box-shadow: 0 10px 30px rgba(0,0,0,.18); }
.cta-inner .btn-ghost { background: transparent; border-color: rgba(255,255,255,.55); color: #fff; box-shadow: none; }
.cta-inner .btn-ghost:hover { background: rgba(255,255,255,.12); color: #fff; }

/* ------------------------------------------------------- Footer --- */
footer { background: var(--bg-2); border-top: 1px solid var(--border); padding-block: 66px 28px; }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 46px; }
footer .logo { margin-bottom: 18px; }
footer .about p { color: var(--muted); font-size: 14.5px; max-width: 320px; margin-bottom: 22px; }
.socials { display: flex; gap: 12px; }
.socials a { width: 42px; height: 42px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); display: grid; place-items: center; color: var(--muted); transition: all .3s; }
.socials a:hover { background: var(--brand-grad); color: #fff; transform: translateY(-3px); border-color: transparent; }
.socials a svg { width: 20px; height: 20px; }
.foot-col h5 { font-size: 15px; font-weight: 800; margin-bottom: 20px; color: var(--heading); }
.foot-col ul { display: flex; flex-direction: column; gap: 12px; }
.foot-col ul li a { color: var(--muted); font-size: 14.5px; transition: color .2s; }
.foot-col ul li a:hover { color: var(--blue-600); }
html[data-theme="dark"] .foot-col ul li a:hover { color: var(--sky-400); }
.foot-bottom { border-top: 1px solid var(--border); padding-top: 26px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; color: var(--muted-2); font-size: 14px; }
.foot-bottom .pays { display: flex; gap: 12px; align-items: center; }
.foot-bottom .pays span { background: var(--surface); border: 1px solid var(--border); padding: 6px 14px; border-radius: 10px; font-size: 13px; font-weight: 700; color: var(--muted); }
.foot-bottom .pays a { display: inline-flex; }
.foot-bottom .pays img { height: 92px; width: auto; border-radius: 12px; background: #fff; padding: 6px; box-shadow: var(--shadow-sm); transition: transform .25s var(--ease); }
.foot-bottom .pays a:hover img { transform: translateY(-3px); }

/* ------------------------------------------------------- Reveal --- */
.reveal { opacity: 0; transform: translateY(36px); transition: all .75s var(--ease); }
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal.d1 { transition-delay: .08s } .reveal.d2 { transition-delay: .16s } .reveal.d3 { transition-delay: .24s } .reveal.d4 { transition-delay: .32s }

/* ======================================================================
   RESPONSIVE — mobile-first hardening (v3)
   Breakpoints: 1100 / 992 / 768 / 560 / 400
   ====================================================================== */

/* Large tablet / small desktop */
@media (max-width: 1100px) {
  .container { padding-inline: 20px; }
  .split { gap: 40px; }
}

/* Tablet */
@media (max-width: 992px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; gap: 40px; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .dc-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-stats { gap: 34px; }
  .hero-wrap { grid-template-columns: 1fr; gap: 40px; }
  .hero-copy { text-align: center; }
  .hero-copy .hero-cta, .hero-copy .tld-row { justify-content: center; }
  .hero-copy p.lead, .hero-copy .domain-box { margin-inline: auto; }
  .hero-panel { width: 100%; max-width: 440px; margin-inline: auto; }
}

/* --- Mobile nav breakpoint --- */
@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-cta .btn-ghost:not(.theme-btn),
  .nav-cta .btn-primary { display: none; }
  .nav-toggle { display: grid; place-items: center; }

  .nav.open .nav-links {
    display: flex; flex-direction: column; align-items: stretch; gap: 2px;
    position: fixed; inset-block-start: 72px; inset-inline: 12px;
    z-index: 2;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px; box-shadow: var(--shadow-lg);
    max-height: calc(100vh - 88px); overflow-y: auto;
  }
  .nav.open .nav-links > li { width: 100%; }
  .nav.open .nav-links > li > a { padding: 14px 16px; width: 100%; font-size: 16px; }
  /* Hide the redundant services mega-dropdown on mobile — the standalone
     هاست / سرور مجازی / … links below already cover it, keeps drawer short.
     Also drop the parent "خدمات" item since it's a dead (#) link on mobile. */
  .nav.open .nav-links > li.has-drop { display: none; }
  .has-drop .drop { display: none; }
  /* CTA buttons inside the mobile drawer */
  .nav.open .nav-links .m-cta { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--border); }
  .nav.open .nav-links .m-cta .btn { width: 100%; }
  /* Dim the page behind the open drawer so nothing bleeds through */
  .nav.open::after {
    content: ""; position: fixed; inset: 0; z-index: 1;
    background: rgba(3, 6, 16, .72);
  }
}
.m-cta { display: none; }

/* Phones */
@media (max-width: 768px) {
  section { padding-block: 56px; }
  .section-head { margin-bottom: 40px; }

  .hero { padding-top: 120px; padding-bottom: 52px; }
  .hero .badge { font-size: 12px; padding: 6px 12px 6px 6px; margin-bottom: 20px; }
  .hero .badge .pill { font-size: 11px; }
  .hero h1 { font-size: 28px; line-height: 1.32; letter-spacing: -.4px; margin-bottom: 16px; }
  .hero p.lead { font-size: 15.5px; margin-bottom: 26px; }
  .hero-cta { gap: 10px; }
  .hero-cta .btn { width: 100%; }

  .domain-box { flex-direction: column; padding: 12px; }
  .domain-box input { text-align: center; padding: 14px; }
  .domain-box .btn { width: 100%; }
  .tld-row { gap: 12px 16px; font-size: 13px; }

  .hero-stats { gap: 26px 40px; margin-top: 44px; padding-top: 30px; }

  .grid-3, .grid-4, .grid-2 { grid-template-columns: 1fr; }
  .dc-grid { grid-template-columns: 1fr; }

  .plan.featured { transform: none; }
  .plan.featured:hover { transform: translateY(-8px); }

  .svc-foot { flex-direction: column; align-items: stretch; gap: 14px; }
  .svc-foot .btn { width: 100%; }
  .svc-price { flex-direction: row; align-items: baseline; gap: 8px; }

  .cta-inner { padding: 44px 24px; }
  .cta-inner .hero-cta .btn { width: 100%; }

  .foot-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .foot-bottom { justify-content: center; text-align: center; }
  .trust .row { justify-content: center; text-align: center; }

  .split .visual { padding: 18px; }
  .terminal .body { font-size: 12px; padding: 16px; }
}

/* Small phones */
@media (max-width: 560px) {
  .container { padding-inline: 16px; }
  .nav { padding-block: 12px; }
  .logo { font-size: 18px; }
  .logo .mark { width: 38px; height: 38px; }
  .nav-cta { gap: 8px; }

  .hero h1 { letter-spacing: -.8px; }
  .hero-stats { gap: 22px 30px; }
  .hero-stats .stat { min-width: 44%; }

  .foot-grid { grid-template-columns: 1fr; gap: 26px; }
  .foot-bottom .pays { justify-content: center; flex-wrap: wrap; }

  .btn { padding: 12px 20px; font-size: 14.5px; }
  .btn-lg { padding: 14px 24px; font-size: 15px; }

  .card, .plan, .svc { padding: 24px 20px; }
  .section-head p { font-size: 15.5px; }
}

/* Tiny phones */
@media (max-width: 400px) {
  .hero-stats { flex-direction: column; gap: 18px; }
  .hero-stats .stat { min-width: 100%; }
  .tld-row { flex-direction: column; gap: 8px; }
}

/* Short / landscape phones — reduce oversized vertical rhythm */
@media (max-height: 560px) and (orientation: landscape) {
  .hero { padding-top: 104px; padding-bottom: 40px; }
  .hero-stats { margin-top: 30px; padding-top: 22px; }
  section { padding-block: 48px; }
  .nav.open .nav-links { max-height: calc(100vh - 76px); }
}

/* ============================================================
   Mobile performance — drop the GPU-heavy decorative effects
   (large blurs + continuously animated/blurred layers) that make
   phones feel laggy. Purely cosmetic; layout/content unaffected.
   ============================================================ */
@media (max-width: 900px) {
  /* Two 300–360px elements with blur(70px) are the biggest paint cost */
  .orb { display: none; }
  /* Rotating + blurred conic halo behind the featured plan = constant repaint */
  .plan.featured::after { display: none; }
  /* Stop always-on background animations */
  .cta-inner { animation: none; background-position: 0% 50%; }
  .feature .ic, .split-list .item .ic, .svc .svc-ic { animation: none; }
  /* backdrop-filter blur is expensive on mobile — use a more opaque bar instead */
  .nav.scrolled { backdrop-filter: none; }
  html[data-theme="dark"] .nav.scrolled { background: rgba(8, 12, 22, .92); }
  html:not([data-theme="dark"]) .nav.scrolled { background: rgba(255, 255, 255, .92); }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
  .orb, .grad-text, .hero .badge .pill,
  .panel-top .pt-name .dot, .regions .reg b i,
  .spark .line, .meter .bar i, .dc .ping i {
    animation: none !important;
  }
  .grad-text { background-position: 0 50% !important; }
  .spark .line { stroke-dashoffset: 0 !important; }
  .meter .bar i { width: var(--w) !important; }
  * { scroll-behavior: auto !important; }
}

/* ============ v3 — hidata-inspired: gold accent + services + datacenters ============ */
:root {
  --gold:      #ffc107;
  --gold-600:  #f0a500;
  --navy:      #0b2a52;
}
html[data-theme="dark"] { --navy: #0a1730; }

/* Gold highlight text */
.gold-text { color: var(--gold-600); }
html[data-theme="dark"] .gold-text { color: var(--gold); }

/* ---- Service cards (host / vps / dedicated) ---- */
.svc {
  position: relative; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 32px; overflow: hidden;
  transition: all .35s var(--ease); box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
}
.svc::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 5px;
  background: var(--brand-grad); transform: scaleX(0); transform-origin: right;
  transition: transform .4s var(--ease);
}
.svc:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: var(--border-2); }
.svc:hover::before { transform: scaleX(1); }
.svc .svc-ic {
  width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center;
  background: var(--brand-grad); color: #fff; margin-bottom: 20px; box-shadow: var(--glow);
}
.svc .svc-ic svg { width: 32px; height: 32px; }
/* Real product photography (replaces the icon on product/service cards) */
.svc-media { margin: -32px -32px 22px; height: 190px; overflow: hidden; }
.svc-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease); }
.svc:hover .svc-media img { transform: scale(1.06); }
.card-photo { overflow: hidden; }
.card-photo .feat-media { margin: -30px -30px 18px; height: 150px; overflow: hidden; border-radius: var(--radius) var(--radius) 0 0; }
.card-photo .feat-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease); }
.card-photo:hover .feat-media img { transform: scale(1.06); }
.svc h3 { font-size: 21px; font-weight: 800; color: var(--heading); margin-bottom: 8px; }
.svc p { color: var(--muted); font-size: 14.5px; margin-bottom: 18px; }
.svc .svc-feats { display: flex; flex-direction: column; gap: 9px; margin-bottom: 22px; flex: 1; }
.svc .svc-feats li { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--muted); }
.svc .svc-feats li svg { width: 17px; height: 17px; color: var(--check); flex: none; }
.svc .svc-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 18px; border-top: 1px solid var(--border); }
.svc .svc-price { display: flex; flex-direction: column; }
.svc .svc-price small { color: var(--muted-2); font-size: 12px; }
.svc .svc-price b { font-size: 22px; font-weight: 900; color: var(--heading); }
.svc .svc-price b span { font-size: 13px; font-weight: 600; color: var(--muted); }

/* ---- Datacenters / global locations ---- */
.dc-band { background: linear-gradient(160deg, var(--navy), var(--navy)); position: relative; overflow: hidden; }
.dc-band::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(500px circle at 85% 10%, rgba(56,189,248,.22), transparent 55%),
    radial-gradient(500px circle at 10% 90%, rgba(255,193,7,.14), transparent 55%);
}
.dc-band .section-head h2, .dc-band .section-head .eyebrow { color: #fff; }
.dc-band .section-head .eyebrow { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.22); }
.dc-band .section-head p { color: rgba(255,255,255,.75); }
.dc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.dc {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius); padding: 26px 22px; text-align: center;
  transition: all .35s var(--ease); backdrop-filter: blur(6px);
}
.dc:hover { transform: translateY(-6px); background: rgba(255,255,255,.1); border-color: rgba(255,193,7,.4); }
.dc .flag { width: 60px; height: 42px; margin: 0 auto 14px; border-radius: 7px; overflow: hidden; box-shadow: 0 4px 14px rgba(0,0,0,.3); display: block; position: relative; }
.dc .flag .s { position: absolute; inset-inline: 0; height: 33.34%; }
/* Iran 🇮🇷 */
.flag.ir .s1 { top: 0; background: #239f40; } .flag.ir .s2 { top: 33.33%; background: #fff; } .flag.ir .s3 { top: 66.66%; background: #da0000; }
/* Germany 🇩🇪 */
.flag.de .s1 { top: 0; background: #000; } .flag.de .s2 { top: 33.33%; background: #dd0000; } .flag.de .s3 { top: 66.66%; background: #ffce00; }
/* Turkey 🇹🇷 */
.flag.tr { background: #e30a17; }
.flag.tr::before { content: ""; position: absolute; top: 50%; inset-inline-end: 30%; width: 20px; height: 20px; border-radius: 50%; background: #e30a17; box-shadow: -6px 0 0 0 #fff; transform: translateY(-50%); }
.flag.tr::after { content: "★"; position: absolute; top: 50%; inset-inline-end: 20%; transform: translateY(-50%); color: #fff; font-size: 13px; }
/* Russia 🇷🇺 */
.flag.ru .s1 { top: 0; background: #fff; } .flag.ru .s2 { top: 33.33%; background: #0039a6; } .flag.ru .s3 { top: 66.66%; background: #d52b1e; }
.dc h4 { color: #fff; font-size: 18px; font-weight: 800; margin-bottom: 6px; }
.dc p { color: rgba(255,255,255,.65); font-size: 13.5px; margin-bottom: 14px; }
.dc .ping { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: #eafff2; background: rgba(61,220,132,.14); border: 1px solid rgba(61,220,132,.4); padding: 4px 12px; border-radius: 999px; }
.dc .ping i { width: 8px; height: 8px; border-radius: 50%; background: #3ddc84; display: inline-block; box-shadow: 0 0 8px #3ddc84; animation: pulse 1.6s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }

@media (max-width: 992px) { .dc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .dc-grid { grid-template-columns: 1fr; } }

/* ======================================================================
   v4 — dark-first premium refresh (IRANSans)
   ====================================================================== */

/* Ambient aurora behind everything */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(720px circle at 82% -6%, var(--hero-glow-2), transparent 60%),
    radial-gradient(620px circle at 8% 4%, var(--hero-glow-1), transparent 58%);
  opacity: .9;
}
html[data-theme="light"] body::before { opacity: .55; }

/* Tighter, more confident headings */
.section-head h2 { letter-spacing: -1px; }
.section-head .eyebrow { text-transform: none; }

/* Glassy elevated surfaces for the marketing cards */
.card, .plan, .svc, .tcard, .faq-item {
  backdrop-filter: blur(8px);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
}
.card::after, .svc::after, .plan::after { }

/* Nav: always a hint of glass, solidifies on scroll */
.nav .container { }
.nav-toggle, .theme-btn { border-radius: 14px; }

/* Buttons — a touch bolder + subtle sheen */
.btn { letter-spacing: .2px; }
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .6s var(--ease);
}
.btn-primary:hover::after { transform: translateX(120%); }

/* Pricing featured plan — richer glow on dark */
html[data-theme="dark"] .plan.featured { box-shadow: 0 30px 80px rgba(34,211,238,.16), var(--shadow-lg); }

/* Datacenter band uses the theme surface on dark rather than flat navy */
html[data-theme="dark"] .dc-band { background: linear-gradient(160deg, #08101f, #0a1428); }

/* ======================================================================
   Bold typography pass — heavier, tighter, more confident
   ====================================================================== */
h1, h2, h3, h4, h5,
.logo, .hero h1, .section-head h2,
.plan h3, .svc h3, .feature h3, .dc h4, .foot-col h5,
.stat b, .band .s b, .plan .price .amt, .svc .svc-price b {
  font-weight: 900;
}
.hero h1 { letter-spacing: -1.6px; }
.section-head h2 { letter-spacing: -1px; }
.nav-links > li > a { font-weight: 800; }
.btn { font-weight: 800; }
.badge, .eyebrow, .chips span, .billing-toggle .lbl-t { font-weight: 800; }
.hero p.lead, .section-head p { font-weight: 500; }
strong, b { font-weight: 800; }

/* ======================================================================
   Motion layer — make the page feel alive
   ====================================================================== */

/* 1) Scroll progress bar */
.scroll-prog {
  position: fixed; inset-block-start: 0; inset-inline-start: 0; z-index: 200;
  height: 3px; width: 0; background: var(--brand-grad);
  box-shadow: 0 0 12px rgba(34,211,238,.6); transition: width .12s linear;
}

/* 2) Infinite technology ticker */
.ticker-band {
  padding-block: 20px !important; overflow: hidden; direction: ltr;
  border-block: 1px solid var(--border); background: var(--bg-2);
}
.ticker { display: flex; width: max-content; }
.ticker-row {
  display: flex; align-items: center; direction: ltr;
  animation: ticker-run 111s linear infinite;
}
.ticker-band:hover .ticker-row { animation-play-state: paused; }
.ticker-row span {
  font-size: 17px; font-weight: 900; color: var(--muted-2);
  white-space: nowrap; letter-spacing: .3px; transition: color .3s;
  padding-inline: 23px;
}
.ticker-row span:hover { color: var(--blue-600); }
@keyframes ticker-run { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* 3) Icons breathe */
.feature .ic, .split-list .item .ic { animation: icon-float 5.5s ease-in-out infinite; }
.svc .svc-ic { animation: icon-float 5s ease-in-out infinite; }
@keyframes icon-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.grid > *:nth-child(2) .ic, .grid > *:nth-child(2) .svc-ic { animation-delay: .7s; }
.grid > *:nth-child(3) .ic, .grid > *:nth-child(3) .svc-ic { animation-delay: 1.4s; }
.grid > *:nth-child(4) .ic { animation-delay: 2.1s; }
.grid > *:nth-child(5) .ic { animation-delay: 2.8s; }
.grid > *:nth-child(6) .ic { animation-delay: 3.5s; }
.feature:hover .ic { animation-play-state: paused; }

/* 4) Featured plan gets a slow rotating halo */
.plan.featured { isolation: isolate; }
.plan.featured::after {
  content: ""; position: absolute; inset: -40%; z-index: -1; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0 70%, rgba(34,211,238,.35) 85%, transparent 100%);
  animation: halo-spin 9s linear infinite; filter: blur(22px);
}
@keyframes halo-spin { to { transform: rotate(360deg); } }

/* 5) CTA band gradient drifts */
.cta-inner {
  background: linear-gradient(120deg, #1d4ed8, #2563eb 35%, #22d3ee 70%, #2563eb 100%);
  background-size: 260% 260%;
  animation: cta-drift 14s ease-in-out infinite;
}
@keyframes cta-drift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* 6) Cards get a soft glow ring on hover */
.card, .svc, .plan, .tcard { position: relative; }
.card::before, .tcard::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5); opacity: .6;
}
.card:hover, .svc:hover, .tcard:hover { box-shadow: 0 22px 60px rgba(37,99,235,.18); }

/* 7) Nav links get a sliding underline */
.nav-links > li > a { position: relative; }
.nav-links > li > a::after {
  content: ""; position: absolute; inset-block-end: 4px; inset-inline: 14px; height: 2px;
  background: var(--brand-grad); border-radius: 2px;
  transform: scaleX(0); transform-origin: right; transition: transform .3s var(--ease);
}
.nav-links > li > a:hover::after { transform: scaleX(1); }

/* 8) Live pulse on the stats strip numbers' underline */
.hero-stats .stat b { position: relative; }

/* Reduced motion — silence the whole layer */
@media (prefers-reduced-motion: reduce) {
  .ticker-row, .feature .ic, .split-list .item .ic, .svc .svc-ic,
  .plan.featured::after, .cta-inner, .grad-text, .orb {
    animation: none !important;
  }
  .scroll-prog { display: none; }
}

/* ======================================================================
   hidata-inspired: ripple buttons, zoom reveals, datacenter tabs
   ====================================================================== */

/* Ripple on buttons */
.btn { position: relative; overflow: hidden; }
.ripple-ink {
  position: absolute; border-radius: 50%; transform: scale(0);
  background: rgba(255, 255, 255, .45); pointer-events: none;
  animation: ripple .6s ease-out; will-change: transform, opacity;
}
.btn-ghost .ripple-ink, .theme-btn .ripple-ink, .nav-toggle .ripple-ink { background: rgba(37, 99, 235, .22); }
@keyframes ripple { to { transform: scale(2.6); opacity: 0; } }

/* Zoom-in reveal variants (AOS-style) */
.reveal.zoom { transform: scale(.9); }
.reveal.zoom.in { transform: scale(1); }
.reveal.up { transform: translateY(46px) scale(.98); }
.reveal.up.in { transform: none; }

/* Give the standard reveal a touch of scale so it feels springier */
.reveal { transform: translateY(34px) scale(.985); }
.reveal.in { transform: none; }

/* ---- Datacenter tabs ---- */
/* generic flag base so flags render outside .dc too */
.flag { position: relative; overflow: hidden; display: inline-block; border-radius: 6px; box-shadow: 0 4px 14px rgba(0,0,0,.28); flex: none; }
.flag .s { position: absolute; inset-inline: 0; height: 33.34%; }
.dc-tabs { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: 30px; }
.dc-tab {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  font-family: inherit; font-weight: 800; font-size: 15px; color: rgba(255,255,255,.8);
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16);
  padding: 11px 20px; border-radius: 999px; transition: all .3s var(--ease);
  position: relative; overflow: hidden;
}
.dc-tab .flag { width: 26px; height: 18px; margin: 0; border-radius: 4px; }
.dc-tab:hover { background: rgba(255,255,255,.12); transform: translateY(-2px); }
.dc-tab.active { background: var(--brand-grad); border-color: transparent; color: #fff; box-shadow: var(--glow); }
.dc-panels { position: relative; }
.dc-panel { display: none; }
.dc-panel.active { display: block; animation: panel-in .5s var(--ease); }
@keyframes panel-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.dc-panel-inner {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius); padding: 30px; backdrop-filter: blur(8px);
}
.dc-panel-inner .dc-lead { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.12); margin-bottom: 4px; }
.dc-panel-inner .dc-lead .flag { width: 60px; height: 42px; margin: 0; }
.dc-panel-inner .dc-lead h4 { color: #fff; font-size: 22px; font-weight: 900; }
.dc-panel-inner .dc-lead p { color: rgba(255,255,255,.7); font-size: 14px; }
.dc-spec { text-align: center; }
.dc-spec b { display: block; color: #fff; font-size: 20px; font-weight: 900; }
.dc-spec span { color: rgba(255,255,255,.65); font-size: 13px; }

@media (max-width: 560px) {
  .dc-panel-inner { grid-template-columns: 1fr 1fr; padding: 22px; }
  .dc-panel-inner .dc-lead { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .ripple-ink { display: none; }
  .dc-panel.active { animation: none; }
}

/* ---- Loading screen ---- */
.loader {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  background: var(--bg); transition: opacity .5s var(--ease), visibility .5s var(--ease);
}
.loader.done { opacity: 0; visibility: hidden; }
.loader-mark { width: 74px; height: 74px; color: var(--blue-500); }
.loader-img { width: 88px; height: 88px; border-radius: 22px; object-fit: cover; box-shadow: var(--shadow-lg); animation: loader-bob 1.6s ease-in-out infinite; }
@keyframes loader-bob { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-8px) scale(1.04); } }
.loader-mark polygon {
  stroke-dasharray: 74; stroke-dashoffset: 74;
  animation: loader-draw 1.6s var(--ease) infinite alternate;
}
@keyframes loader-draw {
  0%   { stroke-dashoffset: 74; fill: rgba(37,99,235,0); }
  60%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; fill: rgba(37,99,235,.9); }
}
.loader-name { font-size: 22px; font-weight: 900; color: var(--heading); letter-spacing: -.5px; opacity: .85; animation: loader-pulse 1.6s ease-in-out infinite; }
.loader-name .txt-2 { color: var(--blue-600); }
html[data-theme="dark"] .loader-name .txt-2 { color: var(--sky-400); }
@keyframes loader-pulse { 0%,100% { opacity: .5; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .loader-mark polygon { animation: none; stroke-dashoffset: 0; fill: rgba(37,99,235,.9); }
  .loader-name { animation: none; }
  .loader-img { animation: none; }
}

/* ---- Illustrated hero (split + animated SVG) ---- */
.hero-split {
  max-width: 1160px; display: grid; grid-template-columns: 1.1fr .9fr;
  gap: 40px; align-items: center; text-align: initial;
}
.hero-split .hero-copy { text-align: right; }
.hero-split .hero-copy h1 { font-size: clamp(30px, 4.4vw, 52px); line-height: 1.32; }
.hero-split .hero-copy .hero-cta,
.hero-split .hero-copy .chips { justify-content: flex-start; }
.hero-split .hero-copy p.lead,
.hero-split .hero-copy .domain-box { margin-inline: 0; max-width: 560px; }
.hero-art { position: relative; display: flex; justify-content: center; }
.art-svg { width: 100%; max-width: 430px; height: auto; overflow: visible; }
/* keep Latin labels inside the SVG flowing left-to-right (page is RTL) */
.art-svg text { direction: ltr; unicode-bidi: isolate; text-anchor: start; }

.art-cloud, .node, .art-chip { transform-box: fill-box; transform-origin: center; }
.art-cloud { animation: art-bob 6s ease-in-out infinite; }
.art-chip.c1 { animation: art-bob 5s ease-in-out infinite .3s; }
.art-chip.c2 { animation: art-bob 5.5s ease-in-out infinite 1.1s; }
@keyframes art-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.art-ring  { animation: art-spin 26s linear infinite; }
.art-ring.r2 { animation-duration: 18s; animation-direction: reverse; }
@keyframes art-spin { to { transform: rotate(360deg); } }
.art-glow { animation: art-pulse 5s ease-in-out infinite; }
@keyframes art-pulse { 0%,100% { opacity: .14; } 50% { opacity: .26; } }
.led { animation: led-blink 1.8s steps(1, end) infinite; }
.led.l2 { animation-delay: .3s } .led.l3 { animation-delay: .6s }
.led.l4 { animation-delay: .9s } .led.l5 { animation-delay: 1.2s } .led.l6 { animation-delay: 1.5s }
@keyframes led-blink { 0%,100% { opacity: 1; } 50% { opacity: .2; } }
.node { animation: node-bob 4.5s ease-in-out infinite; }
.node.n2 { animation-delay: .7s } .node.n3 { animation-delay: 1.4s } .node.n4 { animation-delay: 2.1s }
@keyframes node-bob { 0%,100% { transform: translateY(0); opacity: .95; } 50% { transform: translateY(-12px); opacity: .55; } }

/* decorative wave into the next section */
.hero-wave { position: absolute; inset-inline: 0; inset-block-end: -1px; width: 100%; height: 90px; display: block; z-index: 0; }
.hero-wave path { fill: var(--bg-2); }

@media (max-width: 900px) {
  .hero-split { grid-template-columns: 1fr; gap: 30px; }
  .hero-split .hero-copy { text-align: center; }
  .hero-split .hero-copy .hero-cta,
  .hero-split .hero-copy .chips { justify-content: center; }
  .hero-split .hero-copy p.lead,
  .hero-split .hero-copy .domain-box { margin-inline: auto; }
  .art-svg { max-width: 320px; }
}

@media (prefers-reduced-motion: reduce) {
  .art-cloud, .art-rack, .art-ring, .art-glow, .led, .node, .art-chip { animation: none !important; }
}

/* ---- Testimonials slider (crossfade) ---- */
.tslide { display: grid; max-width: 720px; margin-inline: auto; }
.tslide-item {
  grid-area: 1 / 1; opacity: 0; visibility: hidden;
  transform: translateY(16px) scale(.98); pointer-events: none;
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.tslide-item.active { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.tslide .tcard { text-align: center; padding: 40px 34px; }
.tslide .tcard p { font-size: 18px; line-height: 2.1; }
.tslide .tcard .stars { font-size: 20px; }
.tslide .tcard .who { justify-content: center; }
.tslide-dots { display: flex; gap: 10px; justify-content: center; margin-top: 26px; }
.tslide-dots button { width: 10px; height: 10px; padding: 0; border-radius: 999px; border: none; background: var(--border-2); cursor: pointer; transition: all .3s var(--ease); }
.tslide-dots button.active { width: 30px; background: var(--brand-grad); }

/* ---- Partner logos strip ---- */
.partners-band { padding-block: 40px !important; overflow: hidden; border-block: 1px solid var(--border); background: var(--bg-2); }
.partners-lbl { text-align: center; color: var(--muted-2); font-weight: 800; font-size: 13px; letter-spacing: .5px; margin-bottom: 24px; }
.logos-row { animation-duration: 44s; }
.logos-row span { font-size: 22px; font-weight: 900; color: var(--muted-2); opacity: .8; }
.logos-row span:hover { color: var(--blue-600); opacity: 1; }

/* ============================================================
   Inner-page helpers (shared by shared-hosting/vps/dedicated/
   domains/contact/about) — reuse the existing design tokens.
   ============================================================ */
/* Compact page hero (no split art) */
.page-hero { padding-top: 150px; padding-bottom: 60px; text-align: center; position: relative; overflow: hidden; }
.page-hero .container { max-width: 820px; }
.page-hero h1 { font-size: clamp(30px, 5vw, 50px); font-weight: 900; line-height: 1.3; color: var(--heading); margin-bottom: 18px; }
.page-hero p.lead { font-size: clamp(16px, 2.2vw, 19px); color: var(--muted); max-width: 640px; margin: 0 auto 30px; }
.page-hero .hero-cta { justify-content: center; }
.breadcrumb { display: flex; gap: 8px; justify-content: center; align-items: center; font-size: 13.5px; color: var(--muted-2); margin-bottom: 22px; }
.breadcrumb a { color: var(--blue-600); font-weight: 700; }
html[data-theme="dark"] .breadcrumb a { color: var(--sky-400); }

/* Contact / generic form */
.form-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow-sm); }
.form { display: flex; flex-direction: column; gap: 16px; }
.form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: 14px; font-weight: 700; color: var(--heading); }
.field input, .field textarea, .field select {
  width: 100%; font-family: inherit; font-size: 15px; color: var(--text);
  background: var(--surface-2); border: 1.5px solid var(--border-2); border-radius: var(--radius-sm);
  padding: 13px 15px; transition: border-color .25s, box-shadow .25s; outline: none;
}
.field textarea { resize: vertical; min-height: 130px; line-height: 1.9; }
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--blue-400); box-shadow: 0 0 0 4px rgba(37,99,235,.12);
}
.field input::placeholder, .field textarea::placeholder { color: var(--muted-2); }

/* Contact info tiles */
.contact-tile { display: flex; gap: 16px; align-items: flex-start; }
.contact-tile .ic { width: 52px; height: 52px; flex: none; border-radius: 14px; background: var(--brand-soft); color: var(--blue-600); display: grid; place-items: center; }
html[data-theme="dark"] .contact-tile .ic { color: var(--sky-400); }
.contact-tile .ic svg { width: 24px; height: 24px; }
.contact-tile h4 { font-size: 16px; font-weight: 800; color: var(--heading); margin-bottom: 4px; }
.contact-tile p, .contact-tile a { color: var(--muted); font-size: 14.5px; }

/* Domain TLD price cards */
.tld { text-align: center; }
.tld .ext { font-size: 26px; font-weight: 900; color: var(--blue-600); direction: ltr; }
html[data-theme="dark"] .tld .ext { color: var(--sky-400); }
.tld .tld-price { font-size: 20px; font-weight: 900; color: var(--heading); margin-top: 8px; }
.tld .tld-price span { font-size: 13px; font-weight: 600; color: var(--muted); }
.tld small { display: block; color: var(--muted-2); font-size: 12.5px; margin-top: 4px; }

/* Spec list used on VPS / dedicated plans */
.spec-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px dashed var(--border); font-size: 14px; }
.spec-row:last-child { border-bottom: 0; }
.spec-row span { color: var(--muted); } .spec-row b { color: var(--heading); font-weight: 800; }

@media (max-width: 560px) { .form .row2 { grid-template-columns: 1fr; } }

/* ---- Knowledgebase / tutorial article ---- */
.kb { max-width: 880px; margin-inline: auto; }
.kb-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow-sm); margin-bottom: 24px; }
.kb-card > h2 { font-size: 1.25rem; margin-bottom: 16px; color: var(--heading); }
.kb p { color: var(--muted); margin-bottom: 12px; line-height: 2; }
.kb a { color: var(--blue-600); font-weight: 700; }
html[data-theme="dark"] .kb a { color: var(--sky-400); }
.kb ul { margin: 0 0 14px; padding-inline-start: 22px; list-style: disc; color: var(--muted); }
.kb li { margin-bottom: 6px; line-height: 1.9; }
.kb-step { border-top: 1px solid var(--border); padding-top: 22px; margin-top: 22px; }
.kb-step:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.kb-step-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.kb-num { width: 36px; height: 36px; flex: none; border-radius: 50%; background: var(--brand-grad); color: #fff; display: grid; place-items: center; font-weight: 900; }
.kb-step h3 { font-size: 17px; color: var(--heading); font-weight: 800; }
.kb-code { direction: ltr; text-align: left; background: #0a1428; color: #cdd8ee; border-radius: 12px; padding: 14px 16px; font-family: Consolas, "SFMono-Regular", monospace; font-size: 13.5px; overflow-x: auto; margin-bottom: 14px; border: 1px solid rgba(255,255,255,.08); white-space: pre-wrap; word-break: break-all; }
.kb-note { background: var(--surface-2); border-inline-start: 4px solid var(--blue-400); border-radius: 10px; padding: 12px 16px; margin-bottom: 14px; }
.kb-note p { margin: 0 0 6px; } .kb-note p:last-child { margin: 0; }
.kb-warning { background: rgba(217,119,6,.10); border-inline-start: 4px solid var(--warning); border-radius: 10px; padding: 12px 16px; margin-bottom: 14px; color: var(--heading); }
.kb-warning p { margin: 0; }
.kb-img { width: 100%; border-radius: 12px; border: 1px solid var(--border); margin: 8px 0 16px; display: block; }