/* ==========================================================================
   mobile.css  -  loaded AFTER each page's own CSS, so it wins on equal
   specificity. Contains: the phone menu (slide-in drawer) + phone tuning.
   ========================================================================== */

/* ---------- Base: all screen sizes ---------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
img, video, svg { max-width: 100%; height: auto; }
.logo-img, .mobile-logo img { height: auto; }

/* Fixed background: avoid the jump when the phone's address bar hides */
body::before { width: auto; height: auto; inset: 0; }

:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
a, button, .btn-tab, .faq-question { -webkit-tap-highlight-color: rgba(16, 120, 240, .18); }

/* ---------- Menu pieces: desktop defaults (desktop looks as before) ---------- */
.nav-backdrop { display: none; }
.menu-toggle { background: none; border: 0; padding: 0; font: inherit; }
.nav-links a[aria-current="page"] { color: #fff; }

/* ==========================================================================
   PHONE, TABLET & SMALL-LAPTOP MENU  (<= 1180px)  -  full-screen overlay
   ========================================================================== */
@media (max-width: 1180px) {

  /* Top bar: scrolls away with the page (like desktop). While the menu is open it is
     pinned to the top so the logo and the X are always visible. */
  nav#mainNav {
    position: absolute; top: 0; left: 0; right: 0; width: 100%;
    height: calc(64px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    background: transparent; border-bottom: 1px solid transparent;
    transition: border-color .3s ease;
  }
  nav#mainNav::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: transparent; opacity: 0;
  }
  nav#mainNav.menu-active { position: fixed; }
  nav#mainNav .nav-content { height: 64px; padding-left: 20px; padding-right: 20px; }
  nav#mainNav .logo-img { max-height: 36px; }

  /* Hamburger -> X (pure CSS, still works if the icon font fails to load) */
  nav#mainNav .menu-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    position: static; transform: none; width: 48px; height: 48px; margin-right: -12px;
    border-radius: 12px; color: #fff; cursor: pointer; z-index: 1006;
  }
  nav#mainNav .menu-toggle .bars { position: relative; display: block; width: 22px; height: 16px; }
  nav#mainNav .menu-toggle .bars i {
    position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: #fff;
    transition: transform .25s ease, opacity .2s ease, width .25s ease;
  }
  nav#mainNav .menu-toggle .bars i:nth-child(1) { top: 0; }
  nav#mainNav .menu-toggle .bars i:nth-child(2) { top: 7px; }
  nav#mainNav .menu-toggle .bars i:nth-child(3) { top: 14px; }
  nav#mainNav.menu-active .menu-toggle .bars i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  nav#mainNav.menu-active .menu-toggle .bars i:nth-child(2) { opacity: 0; }
  nav#mainNav.menu-active .menu-toggle .bars i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Menu (design C): rows with divider lines + two buttons, opening over the WHOLE screen
     under the top bar. Logo and the X stay visible on the bar. */
  nav#mainNav.menu-active { border-bottom-color: transparent; }
  nav#mainNav .logo-link { position: relative; z-index: 1006; }
  nav#mainNav .nav-backdrop { display: none; }

  nav#mainNav .nav-links {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    width: auto; height: auto; max-height: none;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
    padding: calc(72px + env(safe-area-inset-top, 0px)) 20px calc(32px + env(safe-area-inset-bottom, 0px));
    background: #0c1a3f; border: 0; box-shadow: none;
    transform: translateY(-8px); opacity: 0; visibility: hidden; pointer-events: none;
    overflow-y: auto; overscroll-behavior: contain; z-index: 1005;
    transition: transform .25s ease, opacity .2s ease, visibility 0s linear .25s;
  }
  nav#mainNav .nav-links.active { transform: none; opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }

  /* Rows: left-aligned, thumb-sized, a line between every one (same uppercase mono as the site) */
  nav#mainNav .nav-links > a {
    display: flex; align-items: center; justify-content: center; text-align: center; width: 100%; max-width: 420px;
    min-height: 60px; padding: 0 12px; margin: 0;
    font-size: .82rem; font-weight: 600; line-height: 1.3; letter-spacing: 1.5px; text-transform: uppercase;
    color: #cbd5e1; background: none; border: 0; border-bottom: 1px solid rgba(148, 163, 184, .18);
    border-radius: 0; box-shadow: none; transform: none;
  }
  nav#mainNav .nav-links > a:hover, nav#mainNav .nav-links > a:active { background: rgba(16, 120, 240, .1); color: #fff; transform: none; }
  nav#mainNav .nav-links > a[aria-current="page"] { color: #fff; background: rgba(16, 120, 240, .16); box-shadow: inset 0 -2px 0 var(--primary); }

  /* Two buttons side by side, right under the rows */
  nav#mainNav .nav-auth {
    margin: 24px auto 0; padding: 0; width: 100%; max-width: 420px; border: 0;
    display: flex; flex-direction: row; align-items: stretch; justify-content: center; gap: 10px;
  }
  nav#mainNav .nav-auth a {
    flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 10px; margin: 0;
    font-size: .75rem; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; text-align: center; transform: none;
  }
  nav#mainNav .nav-auth a.btn-nav-dashboard {
    background: var(--primary); border: 0; color: #fff; border-radius: 0;
    clip-path: polygon(0 0, 100% 0, 100% 70%, 85% 100%, 0 100%);
  }
  nav#mainNav .nav-auth a.btn-nav-dashboard:hover { background: var(--primary-dark); }
  nav#mainNav .nav-auth a.btn-nav-discord { color: #fff; border: 1px solid rgba(88, 101, 242, .6); border-radius: 4px; background: transparent; }

  body.menu-open { overflow: hidden; touch-action: none; }
}

/* ==========================================================================
   PHONE LAYOUT TUNING  (<= 768px)
   ========================================================================== */
@media (max-width: 768px) {
  .container { padding-left: 18px; padding-right: 18px; }

  /* Battery / smoothness: the full-screen pulsing background is costly on phones */
  body::before { animation: none; }
  .reveal { will-change: auto; }

  /* Hero: less dead space, buttons that are easy to hit */
  header.hero.container { padding: calc(64px + env(safe-area-inset-top, 0px) + 40px) 18px 36px; }
  .hero h1 { font-size: clamp(1.65rem, 7.6vw, 2.2rem); line-height: 1.15; overflow-wrap: break-word; }
  .hero p { font-size: .88rem; line-height: 1.75; letter-spacing: .1px; }
  .hero-tag { font-size: .72rem; letter-spacing: 2px; padding: 6px 12px; }
  header.hero > div[style*="display: flex"] { flex-direction: column; align-items: stretch !important; gap: 12px !important; }
  .hero .btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 54px; padding: 14px 18px; font-size: .78rem; letter-spacing: 1px; }

  /* Section rhythm: 100-180px of padding is far too much on a phone */
  section.locations, section.panel-showcase, section.trustpilot-section { padding-top: 56px; padding-bottom: 56px; }
  section[style*="padding: 100px"] { padding-top: 56px !important; padding-bottom: 40px !important; }
  section.pricing { padding-top: 40px; padding-bottom: 56px; }
  .section-header { margin-bottom: 32px; }
  .section-header h2 { font-size: clamp(1.5rem, 6.4vw, 2rem); letter-spacing: -.5px; }
  .section-header p { font-size: .85rem; }

  /* Pricing cards: shorter, tighter, readable */
  .price-card { padding: 28px 20px; }
  .price-card li, .price-card li b { font-size: .8rem; line-height: 1.5; }
  .price-subtitle, .os-more, .invest-stat, .panel-tag { font-size: .75rem; }
  .btn-price { min-height: 54px; display: flex; align-items: center; justify-content: center; }
  .btn-tab { min-height: 48px; }

  /* FAQ */
  .faq-question { min-height: 56px; padding: 16px 18px; font-size: .82rem; line-height: 1.4; gap: 12px; }

  footer { padding-top: 56px; }

  /* Hover effects stick after a tap on touch screens - switch them off */
  .price-card:hover, .btn:hover, .btn-price:hover, .btn-tab:hover { transform: none; }
}

/* Very small phones (iPhone SE / 320-360px) */
@media (max-width: 380px) {
  .container { padding-left: 14px; padding-right: 14px; }
  header.hero.container { padding-left: 14px; padding-right: 14px; }
  .hero h1 { font-size: 1.55rem; }
  .price-card { padding: 24px 16px; }
}

/* Landscape phones: keep the drawer scrollable and the hero compact */
@media (max-width: 992px) and (orientation: landscape) and (max-height: 500px) {
  header.hero.container { padding-top: calc(64px + env(safe-area-inset-top, 0px) + 16px); }
  nav#mainNav .nav-links > a { min-height: 44px; }
}

/* People who ask their phone for less motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- Extras ---------- */
h1, h2, h3 { text-wrap: balance; }

@media (max-width: 768px) {
  /* Outline "Order now" buttons were nearly invisible: give them a tint */
  .btn-price-outline { background: rgba(16, 120, 240, .14); border-color: rgba(16, 120, 240, .6); }
}

/* ---------- Legal page on phones ---------- */
@media (max-width: 768px) {
  .legal-body { padding: 26px 18px; border-radius: 16px; }
  .legal-section h2 { font-size: 1.3rem; margin-bottom: 18px; }
  .legal-section ul { margin-left: 0; padding-left: 18px; }
  .legal-section p, .legal-section li { font-size: .9rem; line-height: 1.75; }
  .legal-content-wrap { padding-bottom: 64px; }
}

/* ---------- Tap targets & small fixes (phones + tablets) ---------- */
@media (max-width: 1180px) {
  .logo-link { min-height: 44px; }
  footer { padding-bottom: env(safe-area-inset-bottom, 0px); }
  footer .footer-col a { display: inline-flex; align-items: center; min-height: 44px; }
  footer .social-links { gap: 8px; }
  footer .social-links a { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; }
}
/* A grid in the page markup forces 320px columns - that is wider than a small phone */
@media (max-width: 400px) {
  div[style*="minmax(320px"] { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)) !important; }
}

/* ---------- Grid overflow guards ---------- */
.panel-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
@media (max-width: 992px) { .panel-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 768px) {
  .panel-content h2 { font-size: clamp(1.5rem, 7.2vw, 2.2rem); letter-spacing: -.5px; overflow-wrap: break-word; }
  .dd-fact-value { font-size: clamp(.95rem, 4.6vw, 1.3rem); }
}
.shield-feature-card, .shield-text { min-width: 0; }
.shield-text h5, .shield-text p { overflow-wrap: break-word; }


/* ==========================================================================
   FLOATING HEADER - always visible: a rounded outline bar inset from the screen
   edges, with no fill (a light blur keeps the text readable over the page).
   ========================================================================== */
nav#mainNav {
  position: fixed; top: 12px; left: 50%; transform: translateX(-50%);
  width: min(1120px, calc(100% - 24px)); height: 64px; padding-top: 0;
  border: 1px solid rgba(148, 163, 184, .28); border-radius: 18px;
  box-shadow: none; transition: none;
}
nav#mainNav::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: transparent; opacity: 1;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
nav#mainNav .nav-content { padding-left: 20px; padding-right: 20px; }
nav#mainNav .logo-img { max-height: 36px; }
nav#mainNav .nav-links { gap: 22px; }

@media (max-width: 1180px) {
  /* Menu open: the plain full-screen overlay with logo and X only */
  nav#mainNav.menu-active {
    top: 0; left: 0; transform: none; width: 100%; height: calc(64px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px); border-color: transparent; border-radius: 0;
  }
  nav#mainNav.menu-active::before { opacity: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
  nav#mainNav .nav-content { padding-left: 16px; padding-right: 16px; }
}

/* ---------- One blue everywhere: the official dark blue ---------- */
:root { --primary-light: #1078F0; }

/* ==========================================================================
   SUPPORT BAND before the footer - a feature-style card: outline and blue corner accent, no fill
   ========================================================================== */
.support-cta { padding: 30px 20px 64px; }
.support-cta-box {
  max-width: 1120px; margin: 0 auto; padding: 40px 0;
  display: flex; align-items: center; justify-content: space-between; gap: 30px;
  border-top: 1px solid rgba(148, 163, 184, .22); border-bottom: 1px solid rgba(148, 163, 184, .22);
  background: transparent; box-shadow: none; clip-path: none; text-align: left;
}
.support-cta-text { display: flex; align-items: center; gap: 24px; }
.support-cta-logo { width: 64px; height: 64px; flex-shrink: 0; filter: drop-shadow(0 0 14px rgba(16, 120, 240, .6)); }
.support-cta h2 {
  margin: 0; color: #fff; font-family: var(--font-fancy, inherit); font-size: clamp(1.2rem, 3vw, 1.5rem);
  font-weight: 700; line-height: 1.3; text-transform: uppercase; letter-spacing: 0;
}
.support-cta h2 span { color: var(--primary); }
.support-cta p { margin: 6px 0 0; color: var(--text-dim, #94a3b8); font-size: .85rem; line-height: 1.7; text-transform: none; }
.support-cta-actions { display: flex; flex-shrink: 0; gap: 14px; }
.support-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 26px;
  font-size: .75rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; text-decoration: none; color: #fff;
}
.support-btn-primary { background: var(--primary); border: 0; clip-path: polygon(0 0, 100% 0, 92% 100%, 0 100%); }
.support-btn-primary:hover { background: var(--primary-dark, #0A5CC4); }
.support-btn-outline { border: 1px solid rgba(148, 163, 184, .35); border-radius: 4px; background: transparent; }
.support-btn-outline:hover { border-color: var(--primary); background: rgba(16, 120, 240, .12); }
@media (max-width: 900px) {
  .support-cta-box { flex-direction: column; align-items: stretch; text-align: center; gap: 24px; padding: 34px 0; }
  .support-cta-text { flex-direction: column; gap: 14px; }
  .support-cta-actions { flex-direction: column; align-items: center; }
  .support-btn { width: 100%; max-width: 340px; }
}

/* ==========================================================================
   NO BACKGROUNDS: text sits directly on the page. Cards keep their outline
   (and the hover/featured highlight) but have no fill.
   ========================================================================== */
.price-card, .price-card.featured, .shield-feature-card, .panel-mockup-container,
.coming-soon-notice, .legal-nav, .legal-body, .faq-item, .dd-fact, .os-badge {
  background: transparent !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
.price-card.featured { border-color: var(--primary); }
.shield-feature-card:hover, .faq-item:hover { background: transparent !important; border-color: var(--primary); }
.faq-question:hover { background: transparent; }
.legal-nav a:hover, .legal-nav a.active { background: transparent; }

/* ==========================================================================
   HOME HERO (split layout)
   ========================================================================== */
.hero-a { display: grid; grid-template-columns: 1.15fr .85fr; gap: 50px; align-items: center; min-height: 0; padding: 150px 20px 60px; text-align: left; }
.hero-a-text { display: flex; flex-direction: column; align-items: flex-start; }
.hero-a h1 { font-size: clamp(2.1rem, 5vw, 3.6rem); line-height: 1.08; text-transform: uppercase; letter-spacing: -1px; margin: 26px 0; }
.hero-a h1 span { color: var(--primary); display: inline; }
.hero-a p { max-width: 520px; color: var(--text-dim); line-height: 1.8; font-size: .95rem; margin: 0; }
.hero-a-btns { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 34px; }
.hero-a-stats { display: flex; gap: 34px; flex-wrap: wrap; margin-top: 44px; font-size: .72rem; color: var(--text-dim); letter-spacing: 1px; text-transform: uppercase; }
.hero-a-stats b { display: block; color: #fff; font-size: 1.3rem; letter-spacing: 0; }
.hero-a-card { position: relative; border: 1px solid rgba(148,163,184,.28); border-radius: 6px; padding: 30px; font-size: .78rem; line-height: 2.3; }
.hero-a-card::before { content: ""; position: absolute; top: -1px; left: -1px; width: 70px; height: 4px; background: var(--primary); }
.hero-a-card-title { color: var(--text-dim); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 8px; }
.hero-a-card div:not(.hero-a-card-title) { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid rgba(148,163,184,.28); }
.hero-a-card div:last-child { border-bottom: 0; }
.hero-a-card .hl { color: #1078F0; }
@media (max-width: 900px) {
  .hero-a { grid-template-columns: 1fr; gap: 36px; padding: 120px 16px 40px; }
  .hero-a-btns .btn { width: 100%; text-align: center; }
  .hero-a-stats { gap: 22px; }
}
.hero-a { max-width: 1120px; margin-left: auto; margin-right: auto; padding-left: 0; padding-right: 0; }
.hero-a p, .hero-a-card, .hero-a-card b { text-transform: none; }
.hero-a-card-title, .hero-a-stats { text-transform: uppercase; }
@media (max-width: 1180px) { .hero-a { padding-left: 20px; padding-right: 20px; } }
@media (max-width: 900px) { .hero-a { padding-left: 16px; padding-right: 16px; } }
.hero-a-btns { flex-direction: column; align-items: stretch; width: min(100%, 500px); gap: 14px; }
.hero-a-btns .btn { text-align: center; white-space: normal; }

/* ---------- Hero shield animation: attacks hit the logo shield and break ---------- */
.hero-a-shield { display: block; padding: 24px 24px 20px; line-height: 1.4; }
.hero-a-shield .hero-a-card-title { border: 0; margin-bottom: 0; }
.sh-stage { position: relative; width: 300px; height: 300px; margin: 6px auto 0; max-width: 100%; }
.sh-logo { position: absolute; left: 50%; top: 50%; width: 130px; height: 130px; transform: translate(-50%, -50%); animation: shLogo 1.8s ease-in-out infinite; filter: drop-shadow(0 0 18px rgba(16,120,240,.55)); }
.sh-ring { position: absolute; left: 50%; top: 50%; width: 200px; height: 200px; margin: -100px 0 0 -100px; border-radius: 50%; border: 1.5px solid rgba(16, 120, 240,.55); box-shadow: 0 0 24px rgba(16,120,240,.25) inset; animation: shRing 1.8s ease-in-out infinite; }
.sh-ring2 { width: 240px; height: 240px; margin: -120px 0 0 -120px; border-color: rgba(16,120,240,.25); animation: none; }
.sh-hit { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: rotate(var(--a)); }
.sh-hit::before { content: ""; position: absolute; left: 0; top: -1.5px; width: 34px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, #ff5468, rgba(255,84,104,0)); box-shadow: 0 0 8px rgba(255,84,104,.8); opacity: 0; animation: shHit 1.8s linear infinite; animation-delay: var(--d); }
@keyframes shHit {
  0%   { transform: translateX(165px); opacity: 0; }
  8%   { opacity: 1; }
  52%  { transform: translateX(104px) scaleX(1); opacity: 1; }
  60%  { transform: translateX(104px) scaleX(.2); opacity: .9; }
  70%  { transform: translateX(112px) scaleX(.1); opacity: 0; }
  100% { transform: translateX(112px); opacity: 0; }
}
@keyframes shRing { 0%, 100% { box-shadow: 0 0 24px rgba(16,120,240,.25) inset; } 55% { box-shadow: 0 0 34px rgba(16, 120, 240,.55) inset, 0 0 18px rgba(16, 120, 240,.35); } }
@keyframes shLogo { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 55% { transform: translate(-50%, -50%) scale(1.04); } }
.sh-caption { text-align: center; color: var(--text-dim); font-size: .72rem; letter-spacing: 1px; text-transform: uppercase; margin-top: 6px; }
@media (max-width: 900px) { .sh-stage { transform: scale(.9); margin-bottom: -10px; } }
@media (prefers-reduced-motion: reduce) { .sh-hit::before, .sh-ring, .sh-logo { animation: none; } }
.hero-a-shield div, .hero-a-shield .sh-stage { border: 0 !important; display: block; }
.hero-a-shield .sh-caption { max-width: 360px; margin-left: auto; margin-right: auto; text-align: center; }

/* ---------- Hero: blocked vs clean traffic ---------- */
.hero-a-shield { overflow: hidden; }
.fl-stage { position: relative; left: 50%; width: 420px; height: 290px; transform: translateX(-50%); margin-top: 4px; }
.fl-logo { position: absolute; left: 160px; top: 95px; width: 100px; height: 100px; z-index: 2; filter: drop-shadow(0 0 16px rgba(16,120,240,.6)); animation: shLogo 2s ease-in-out infinite; }
.fl-arc { position: absolute; left: 0; top: 0; z-index: 1; filter: drop-shadow(0 0 8px rgba(16, 120, 240,.8)); animation: flArc 2s ease-in-out infinite; }
.fl-atk, .fl-ok { position: absolute; height: 3px; width: 34px; border-radius: 2px; opacity: 0; }
.fl-atk { left: 0; transform-origin: right center; background: linear-gradient(270deg, #ff5468, rgba(255,84,104,0)); box-shadow: 0 0 8px rgba(255,84,104,.8); animation: flAtk 2s linear infinite; animation-delay: var(--d); }
.fl-ok { z-index: 0; background: linear-gradient(270deg, #1078F0, rgba(16, 120, 240,0)); box-shadow: 0 0 8px rgba(16, 120, 240,.8); animation: flOk 2s linear infinite; animation-delay: var(--d); }
.fl-lbl { position: absolute; top: 6px; font-size: .66rem; letter-spacing: 2px; text-transform: uppercase; }
.fl-lbl-r { left: 8px; color: #ff5468; }
.fl-lbl-b { right: 8px; color: #1078F0; }
@keyframes flAtk {
  0%   { transform: translateX(0); opacity: 0; }
  8%   { opacity: 1; }
  52%  { transform: translateX(calc(var(--x) - 34px)) scaleX(1); opacity: 1; }
  60%  { transform: translateX(calc(var(--x) - 34px)) scaleX(.15); opacity: .9; }
  68%  { transform: translateX(calc(var(--x) - 34px)) scaleX(.05); opacity: 0; }
  100% { opacity: 0; }
}
@keyframes flOk {
  0%, 50% { transform: translateX(0); opacity: 0; }
  58%  { opacity: 1; }
  92%  { opacity: 1; }
  100% { transform: translateX(var(--w)); opacity: 0; }
}
@keyframes flArc { 0%, 100% { opacity: .75; } 54% { opacity: 1; filter: drop-shadow(0 0 14px rgba(16, 120, 240,1)); } }
@media (max-width: 520px) { .fl-stage { transform: translateX(-50%) scale(.74); transform-origin: top center; margin-bottom: -72px; } }
@media (prefers-reduced-motion: reduce) { .fl-atk, .fl-ok, .fl-arc, .fl-logo { animation: none; opacity: 1; } }
.hero-a-shield .fl-stage, .hero-a-shield .sh-caption { display: block !important; }
.fl-logo { animation-name: flLogo; }
@keyframes flLogo { 0%, 100% { transform: scale(1); } 55% { transform: scale(1.05); } }

/* ---------- Hero traffic animation: fixed keyframes (no CSS variables inside
   keyframes, which older Safari/iPhone versions ignore) ---------- */
.fl-atk, .fl-ok { animation-duration: 2s; animation-timing-function: linear; animation-iteration-count: infinite; }
@keyframes flA0 { 0% { transform: translateX(0); opacity: 0; } 8% { opacity: 1; } 52% { transform: translateX(143px) scaleX(1); opacity: 1; } 60% { transform: translateX(143px) scaleX(.15); opacity: .9; } 68% { transform: translateX(143px) scaleX(.05); opacity: 0; } 100% { transform: translateX(143px); opacity: 0; } }
.fl-a0 { animation-name: flA0; }
@keyframes flA1 { 0% { transform: translateX(0); opacity: 0; } 8% { opacity: 1; } 52% { transform: translateX(91px) scaleX(1); opacity: 1; } 60% { transform: translateX(91px) scaleX(.15); opacity: .9; } 68% { transform: translateX(91px) scaleX(.05); opacity: 0; } 100% { transform: translateX(91px); opacity: 0; } }
.fl-a1 { animation-name: flA1; }
@keyframes flA2 { 0% { transform: translateX(0); opacity: 0; } 8% { opacity: 1; } 52% { transform: translateX(80px) scaleX(1); opacity: 1; } 60% { transform: translateX(80px) scaleX(.15); opacity: .9; } 68% { transform: translateX(80px) scaleX(.05); opacity: 0; } 100% { transform: translateX(80px); opacity: 0; } }
.fl-a2 { animation-name: flA2; }
@keyframes flA3 { 0% { transform: translateX(0); opacity: 0; } 8% { opacity: 1; } 52% { transform: translateX(91px) scaleX(1); opacity: 1; } 60% { transform: translateX(91px) scaleX(.15); opacity: .9; } 68% { transform: translateX(91px) scaleX(.05); opacity: 0; } 100% { transform: translateX(91px); opacity: 0; } }
.fl-a3 { animation-name: flA3; }
@keyframes flA4 { 0% { transform: translateX(0); opacity: 0; } 8% { opacity: 1; } 52% { transform: translateX(143px) scaleX(1); opacity: 1; } 60% { transform: translateX(143px) scaleX(.15); opacity: .9; } 68% { transform: translateX(143px) scaleX(.05); opacity: 0; } 100% { transform: translateX(143px); opacity: 0; } }
.fl-a4 { animation-name: flA4; }
@keyframes flO0 { 0%, 50% { transform: translateX(0); opacity: 0; } 58% { opacity: 1; } 92% { opacity: 1; } 100% { transform: translateX(257px); opacity: 0; } }
.fl-o0 { animation-name: flO0; }
@keyframes flO1 { 0%, 50% { transform: translateX(0); opacity: 0; } 58% { opacity: 1; } 92% { opacity: 1; } 100% { transform: translateX(268px); opacity: 0; } }
.fl-o1 { animation-name: flO1; }
@keyframes flO2 { 0%, 50% { transform: translateX(0); opacity: 0; } 58% { opacity: 1; } 92% { opacity: 1; } 100% { transform: translateX(257px); opacity: 0; } }
.fl-o2 { animation-name: flO2; }

/* Keep this small decorative animation running even when the device asks for
   reduced motion (the rest of the site still calms down). */
@media (prefers-reduced-motion: reduce) {
  .hero-a-shield .fl-atk, .hero-a-shield .fl-ok { animation-duration: 2s !important; animation-iteration-count: infinite !important; opacity: 0; }
  .hero-a-shield .fl-arc, .hero-a-shield .fl-logo { animation-duration: 2s !important; animation-iteration-count: infinite !important; }
  .hero-a-shield .fl-arc { animation-name: flArc !important; }
  .hero-a-shield .fl-logo { animation-name: flLogo !important; }
}

/* ==========================================================================
   HOVER: every card and button reacts the same way (mouse only)
   ========================================================================== */
.hero-a-card, .shield-feature-card, .check-item, .os-badge, .panel-mockup-container,
.dd-node, .dd-fact, .support-btn, .btn, .legal-nav a, .blog-card, .price-card {
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease, color .3s ease, background-color .3s ease;
}
@media (hover: hover) {
  .hero-a-card:hover, .shield-feature-card:hover, .check-item:hover, .os-badge:hover, .dd-node:hover, .dd-fact:hover {
    transform: translateY(-6px); border-color: var(--primary) !important;
    box-shadow: 0 14px 30px rgba(0, 0, 0, .35), 0 0 22px rgba(16, 120, 240, .18);
  }
  .panel-mockup-container:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0, 0, 0, .35), 0 0 22px rgba(16, 120, 240, .18); }
  .support-btn:hover, .btn-outline:hover { transform: translateY(-3px); }
  .support-btn-primary:hover { box-shadow: 0 10px 20px var(--primary-glow, rgba(16, 120, 240, .4)); }
  .legal-nav a:hover { transform: translateX(4px); color: var(--primary); }
}

/* ==========================================================================
   HOME: Game Server Hosting vs VPS vs Dedicated
   ========================================================================== */
.compare { padding: 90px 0 60px; }
.compare-sub { max-width: 680px; margin: 14px auto 0; color: var(--text-dim); font-size: .9rem; line-height: 1.7; text-transform: none; text-align: center; }
.compare-wrap { position: relative; max-width: 1120px; margin: 40px auto 0; border: 1px solid rgba(148, 163, 184, .28); border-radius: 6px; }
.compare-wrap::before { content: ""; position: absolute; top: -1px; left: -1px; width: 70px; height: 4px; background: var(--primary); z-index: 1; }
.compare-table { width: 100%; border-collapse: collapse; font-size: .8rem; line-height: 1.6; text-transform: none; }
.compare-table th, .compare-table td { padding: 18px 20px; text-align: left; vertical-align: top; border-bottom: 1px solid rgba(148, 163, 184, .18); }
.compare-table tbody tr:last-child th, .compare-table tbody tr:last-child td { border-bottom: 0; }
.compare-table thead th { font-size: .72rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-dim); border-bottom: 1px solid rgba(148, 163, 184, .28); }
.compare-table thead th.cmp-hl { color: #fff; }
.compare-table tbody th { width: 18%; color: #fff; font-size: .72rem; letter-spacing: 1.5px; text-transform: uppercase; }
.compare-table td { width: 27%; color: var(--text-dim); }
.compare-table td.cmp-hl { color: #e2e8f0; }
.compare-table td.cmp-hl::before { content: "✓ "; color: var(--primary); font-weight: 700; }
.compare-table td + td + td, .compare-table th + th + th { border-left: 0; }
.compare-table td.cmp-hl, .compare-table th.cmp-hl { background: transparent; }
.compare-table tr:hover td.cmp-hl { color: #fff; }
.compare-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 36px; }
/* Phones: each row becomes a small card */
@media (max-width: 760px) {
  .compare { padding: 64px 0 40px; }
  .compare-wrap { border: 0; }
  .compare-wrap::before { display: none; }
  .compare-table thead { display: none; }
  .compare-table, .compare-table tbody, .compare-table tr, .compare-table th, .compare-table td { display: block; width: 100%; }
  .compare-table tr { position: relative; border: 1px solid rgba(148, 163, 184, .28); border-radius: 6px; margin-bottom: 14px; padding: 6px 0; }
  .compare-table tr::before { content: ""; position: absolute; top: -1px; left: -1px; width: 50px; height: 3px; background: var(--primary); }
  .compare-table tbody th { padding: 14px 16px 6px; border: 0; }
  .compare-table td { padding: 8px 16px; border: 0; }
  .compare-table td::after { display: block; margin-top: 2px; }
  .compare-table td:nth-of-type(1)::before { content: "Game Server Hosting: "; color: var(--text-dim); font-weight: 700; }
  .compare-table td:nth-of-type(2)::before { content: "✓ VPS: "; color: var(--primary); font-weight: 700; }
  .compare-table td:nth-of-type(3)::before { content: "✓ Dedicated: "; color: var(--primary); font-weight: 700; }
  .compare-actions .btn { width: 100%; max-width: 340px; text-align: center; }
}
@media (max-width: 760px) { .compare-table tbody th, .compare-table td { width: 100%; } }

/* ---------- Comparison as filling bars (red / orange / green) ---------- */
.cmp-grid { max-width: 1120px; margin: 40px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.cmp-card { position: relative; display: flex; flex-direction: column; padding: 28px 24px; border: 1px solid rgba(148, 163, 184, .28); border-radius: 6px; text-transform: none; transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.cmp-card::before { content: ""; position: absolute; top: -1px; left: -1px; width: 70px; height: 4px; background: var(--c); }
.cmp-low  { --c: #ff5468; --c2: #ff8a98; }
.cmp-mid  { --c: #ff9f1c; --c2: #ffc566; }
.cmp-high { --c: #22c55e; --c2: #6ee7a0; }
.cmp-card h3 { margin: 0 0 22px; font-size: .9rem; letter-spacing: 1.5px; text-transform: uppercase; color: #fff; }
.cmp-meter { margin-bottom: 18px; }
.cmp-meter-top { display: flex; justify-content: space-between; font-size: .7rem; letter-spacing: 1px; text-transform: uppercase; color: var(--text-dim); }
.cmp-meter-top b { color: var(--c); }
.cmp-track { height: 8px; margin-top: 8px; border-radius: 4px; background: rgba(148, 163, 184, .15); overflow: hidden; }
.cmp-fill { height: 100%; width: var(--w); border-radius: 4px; background: linear-gradient(90deg, var(--c), var(--c2)); box-shadow: 0 0 10px var(--c); }
.cmp-desc { margin: 6px 0 0; color: var(--text-dim); font-size: .8rem; line-height: 1.7; flex: 1; }
.cmp-btn { margin-top: 22px; text-align: center; }
/* Fill animation: starts when the section scrolls into view, then repeats softly */
.compare.active .cmp-fill { animation: cmpFill 1.4s cubic-bezier(.2, .8, .2, 1) both; animation-delay: var(--d); }
@keyframes cmpFill { from { width: 0; } to { width: var(--w); } }
.compare.active .cmp-card:hover .cmp-fill { animation: cmpFill 1s cubic-bezier(.2, .8, .2, 1) both; animation-name: cmpFillAgain; }
@keyframes cmpFillAgain { from { width: 0; } to { width: var(--w); } }
@media (hover: hover) { .cmp-card:hover { transform: translateY(-6px); border-color: var(--c); box-shadow: 0 14px 30px rgba(0, 0, 0, .35), 0 0 22px color-mix(in srgb, var(--c) 25%, transparent); } }
@media (max-width: 900px) {
  .cmp-grid { grid-template-columns: 1fr; max-width: 520px; }
  .cmp-btn { width: 100%; }
}
.cmp-btn { display: flex; align-items: center; justify-content: center; min-height: 56px; padding: 12px 14px; font-size: .7rem; letter-spacing: 1.2px; }

/* ==========================================================================
   SAME LOOK ON EVERY PAGE
   ========================================================================== */
.panel-content h2 span, .section-header h2 span, .hero h1 span, .hero-a h1 span { color: var(--primary); }
.panel-tag, .hero-tag { background: transparent; }
.hero-tag { font-size: .72rem; }
.hero h1, .hero-a h1 { letter-spacing: -1px; }
.shield-icon-box { background: transparent !important; border: 1px solid rgba(16, 120, 240, .45); }
.dd-node { background: transparent; border-color: rgba(148, 163, 184, .35); border-radius: 4px; }
.dd-node-atk { background: transparent; border-color: #ff5468; color: #ff5468; }
.dd-node-shield { border-color: var(--primary); }
.dd-node-srv { background: transparent; border-color: #1078F0; color: #fff; box-shadow: 0 0 18px rgba(16, 120, 240, .35); }
.nf-path { background: transparent !important; border: 1px solid rgba(148, 163, 184, .28); }

/* ==========================================================================
   HOME: partner communities - a slowly moving row of cards (pauses on hover)
   ========================================================================== */
.partners { padding: 90px 0 60px; }
.pt-marquee { position: relative; margin-top: 40px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.pt-track { display: flex; width: max-content; animation: ptScroll 32s linear infinite; }
.pt-marquee:hover .pt-track { animation-play-state: paused; }
.pt-set { display: flex; gap: 20px; padding: 10px 10px 16px; }
.pt-card { position: relative; display: flex; align-items: center; gap: 16px; width: 280px; padding: 20px 22px; border: 1px solid rgba(148, 163, 184, .28); border-radius: 6px; text-decoration: none; transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.pt-card::before { content: ""; position: absolute; top: -1px; left: -1px; width: 50px; height: 3px; background: var(--primary); }
.pt-logo { flex: 0 0 56px; width: 56px; height: 56px; border-radius: 50%; border: 1px solid rgba(16, 120, 240, .5); display: flex; align-items: center; justify-content: center; overflow: hidden; filter: grayscale(1); opacity: .8; transition: filter .3s ease, opacity .3s ease; }
.pt-logo img { width: 100%; height: 100%; object-fit: cover; }
.pt-initials { color: #1078F0; font-weight: 800; font-size: 1rem; letter-spacing: 1px; }
.pt-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pt-text b { color: #fff; font-size: .82rem; text-transform: uppercase; letter-spacing: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-text small { color: var(--text-dim); font-size: .7rem; text-transform: none; }
@media (hover: hover) {
  .pt-card:hover { transform: translateY(-6px); border-color: var(--primary); box-shadow: 0 14px 30px rgba(0, 0, 0, .35), 0 0 22px rgba(16, 120, 240, .18); }
  .pt-card:hover .pt-logo { filter: none; opacity: 1; }
}
@keyframes ptScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 760px) { .pt-card { width: 240px; padding: 16px 18px; } .pt-track { animation-duration: 26s; } }
@media (prefers-reduced-motion: reduce) { .partners .pt-track { animation-duration: 32s !important; animation-iteration-count: infinite !important; } }

/* ---------- Hero: moving partner logos under the quick facts ---------- */
.hero-partners { grid-column: 1 / -1; margin-top: 10px; min-width: 0; }
.hero-partners-label { margin: 0 0 14px; color: var(--text-dim); font-size: .7rem; letter-spacing: 2px; text-transform: uppercase; }
.hero-partners .pt-marquee { margin-top: 0; }
.hero-partners .pt-set { gap: 48px; padding: 6px 24px 6px 0; }
.hero-partners .pt-track { animation-duration: 28s; }
.pt-item { display: flex; align-items: center; gap: 12px; text-decoration: none; white-space: nowrap; }
.pt-item .pt-logo { flex: 0 0 44px; width: 44px; height: 44px; }
.pt-name { color: var(--text-dim); font-size: .8rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; transition: color .3s ease; }
@media (hover: hover) { .pt-item:hover .pt-logo { filter: none; opacity: 1; } .pt-item:hover .pt-name { color: #fff; } }
@media (max-width: 900px) { .hero-partners .pt-set { gap: 32px; } }
@media (prefers-reduced-motion: reduce) { .hero-partners .pt-track { animation-duration: 28s !important; animation-iteration-count: infinite !important; } }
.hero-a .hero-partners-label { text-transform: uppercase; font-size: .7rem; line-height: 1.4; }
@media (max-width: 900px) { .hero-a-text { order: 1; } .hero-partners { order: 2; margin-top: 0; } .hero-a-card { order: 3; } }
/* Hero partners: bigger cards (same style as the partner cards) */
.hero-partners { margin-top: 24px; }
.hero-partners .pt-set { gap: 20px; padding: 10px 20px 16px 0; }
.hero-partners .pt-track { animation-duration: 32s; }
.hero-a .pt-card { width: 280px; }
@media (max-width: 760px) { .hero-a .pt-card { width: 240px; } }

/* Footer bottom row: social icons on the right */
.footer-bottom-right { display: flex; align-items: center; }
.footer-bottom-right .social-links { display: flex; align-items: center; gap: 14px; margin: 0; }
.footer-bottom-right .social-links a { display: inline-flex; align-items: center; font-size: 1.35rem; line-height: 1; color: #cbd5e1; opacity: .85; }

/* ==========================================================================
   SPLIT HEROES on the other pages (same layout as the home page)
   ========================================================================== */
/* VPS: deploy console - lines appear one by one, then the bar fills */
.hx-lines { margin-top: 14px; font-size: .8rem; line-height: 2.1; text-transform: none; }
.hx-cmd { color: var(--text-dim); }
.hx-line:not(.hx-cmd) { opacity: 0; animation: hxLine 7s ease infinite; animation-delay: calc(var(--i) * .55s); }
.hx-ok { color: #22c55e; font-weight: 700; margin-right: 6px; }
.hx-bar { height: 6px; margin: 18px 0 14px; border-radius: 3px; background: rgba(148, 163, 184, .15); overflow: hidden; }
.hx-bar span { display: block; height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg, var(--primary), #1078F0); box-shadow: 0 0 10px rgba(16, 120, 240, .7); animation: hxBar 7s ease infinite; }
@keyframes hxLine { 0% { opacity: 0; transform: translateX(-8px); } 6%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes hxBar { 0% { width: 0; } 45%, 88% { width: 100%; } 100% { width: 100%; opacity: 0; } }
/* Dedicated: bars fill when the page opens */
.hx-res .cmp-meter-top b { color: #22c55e; text-transform: none; letter-spacing: 0; }
.hx-res .cmp-fill { animation: cmpFill 1.6s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--d) + .3s); }
.hx-res.hero-a-shield .cmp-meter, .hx-res.hero-a-shield .cmp-meter-top, .hx-res.hero-a-shield .cmp-track, .hx-res.hero-a-shield .cmp-fill { display: block !important; border: 0 !important; }
.hx-res.hero-a-shield .cmp-meter-top { display: flex !important; }
.hx-res .hero-a-card-title { margin-bottom: 20px; }
.hx-res::before { background: #22c55e; }
/* Legal: list of documents */
.hx-docs .hx-doc { display: flex; justify-content: space-between; align-items: center; padding: 11px 0; border-bottom: 1px solid rgba(148, 163, 184, .18); color: #e2e8f0; font-size: .8rem; text-decoration: none; text-transform: none; transition: color .25s ease, padding .25s ease; }
.hx-docs .hx-doc:last-child { border-bottom: 0; }
.hx-docs .hx-doc i { font-style: normal; color: var(--primary); }
.hx-docs .hx-doc:hover { color: #fff; padding-left: 6px; }
.hx-docs .hero-a-card-title { margin-bottom: 6px; }
@media (prefers-reduced-motion: reduce) {
  .hx-line:not(.hx-cmd), .hx-bar span { animation-duration: 7s !important; animation-iteration-count: infinite !important; }
}
.hx-console .hx-lines, .hx-console .hx-line, .hx-console .hx-bar, .hx-console .sh-caption { display: block !important; border: 0 !important; }

/* ==========================================================================
   COOKIE NOTICE - wide bar at the bottom, same shape as the header (no fill)
   ========================================================================== */
.cookie-notice {
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 2000;
  width: min(1120px, calc(100% - 24px)); padding: 16px 22px; border: 1px solid rgba(148, 163, 184, .28); border-radius: 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  background: transparent; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-family: 'JetBrains Mono', monospace; animation: cookieIn .35s ease both;
}
.cookie-notice p { margin: 0; color: #94a3b8; font-size: .75rem; line-height: 1.7; text-transform: none; letter-spacing: 0; }
.cookie-notice p b { color: #fff; }
.cookie-notice a { color: #1078F0; text-decoration: underline; }
.cookie-notice-actions { display: flex; gap: 10px; flex-shrink: 0; }
.cookie-btn {
  display: inline-flex; align-items: center; justify-content: center; min-width: 120px; height: 42px; padding: 0 20px; cursor: pointer;
  font-family: inherit; font-size: .68rem; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: #fff;
  background: transparent; border: 1px solid rgba(16, 120, 240, .35); clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%, 0 30%);
  transition: transform .3s ease, background-color .3s ease, border-color .3s ease;
}
.cookie-btn:hover { border-color: #1078F0; transform: translateY(-2px); }
.cookie-btn-primary { background: #1078F0; border-color: #1078F0; clip-path: polygon(0 0, 100% 0, 100% 70%, 85% 100%, 0 100%); }
.cookie-btn-primary:hover { background: #0A5CC4; }
@keyframes cookieIn { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (max-width: 700px) {
  .cookie-notice { flex-direction: column; align-items: stretch; gap: 14px; padding: 16px; border-radius: 14px; }
  .cookie-notice-actions .cookie-btn { flex: 1; }
}
.footer-cookie-link { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: inherit; text-decoration: none; }

/* ==========================================================================
   ABOUT US and CAREERS
   ========================================================================== */
.ab-section { padding: 80px 0 30px; }
.ab-split { display: grid; grid-template-columns: .8fr 1.2fr; gap: 50px; align-items: start; }
.ab-left { text-align: left; margin: 0; }
.ab-left h2 { text-align: left; }
.ab-text p { color: var(--text-dim); font-size: .9rem; line-height: 1.9; text-transform: none; margin: 0 0 18px; }
.ab-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; margin-top: 20px; }
.ab-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ab-card { display: flex; flex-direction: column; gap: 14px; padding: 30px; }
.ab-card > i, .ab-empty > i { color: var(--primary); font-size: 1.8rem; }
.ab-card h3, .ab-empty h3 { margin: 0; color: #fff; font-family: var(--font-fancy); font-size: .95rem; text-transform: uppercase; letter-spacing: .5px; }
.ab-card p, .ab-empty p { margin: 0; color: var(--text-dim); font-size: .78rem; line-height: 1.8; text-transform: none; }
.ab-empty { max-width: 760px; margin: 20px auto 0; padding: 36px 32px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.ab-details { max-width: 860px; margin: 20px auto 0; }
.ab-details b { text-align: right; text-transform: none; }
.ab-details a { color: var(--primary); }
.ab-actions { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; margin-top: 34px; }
.hero-a-card b { text-align: right; }
@media (max-width: 1100px) { .ab-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .ab-split, .ab-grid, .ab-steps { grid-template-columns: 1fr; gap: 18px; }
  .ab-section { padding: 56px 0 20px; }
  .ab-actions .btn { width: 100%; max-width: 340px; text-align: center; }
  .ab-details div { flex-direction: column; gap: 2px; }
  .ab-details b { text-align: left; }
}

/* Footer: four link columns */
.footer-grid { grid-template-columns: auto 1fr 1fr 1fr 1fr; gap: 50px; }
@media (max-width: 1100px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr; } }
/* About / Careers sections line up with the hero and header width */
.ab-section > .container { max-width: 1168px; }

/* ---------- Careers: job cards, job page and application form ---------- */
.job-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; margin-top: 20px; }
.job-card { display: flex; flex-direction: column; gap: 12px; padding: 32px 30px; text-decoration: none; color: inherit; }
.job-dept { color: var(--primary); font-size: .7rem; letter-spacing: 2px; text-transform: uppercase; }
.job-card h3 { margin: 0; color: #fff; font-family: var(--font-fancy); font-size: 1.2rem; text-transform: uppercase; }
.job-card p { margin: 0; color: var(--text-dim); font-size: .8rem; line-height: 1.8; text-transform: none; flex: 1; }
.job-card .btn { align-self: flex-start; margin-top: 8px; }
.job-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.job-list { padding: 32px 30px; }
.job-list h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; color: #fff; font-family: var(--font-fancy); font-size: .95rem; text-transform: uppercase; }
.job-list h3 i { color: var(--primary); }
.job-list ul { margin: 0; padding-left: 18px; }
.job-list li { color: var(--text-dim); font-size: .8rem; line-height: 1.8; margin-bottom: 8px; text-transform: none; }
.job-form { max-width: 900px; margin: 20px auto 0; padding: 34px 32px 30px; display: block; }
.job-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.job-wide { grid-column: 1 / -1; }
.job-field { display: flex; flex-direction: column; gap: 8px; }
.job-field span { color: var(--text-dim); font-size: .62rem; letter-spacing: 1.5px; text-transform: uppercase; }
.job-field input, .job-field select, .job-field textarea {
  width: 100%; padding: 14px 16px; background: transparent; border: 1px solid rgba(16, 120, 240, .25); border-radius: 0; color: #fff;
  font-family: var(--font-fancy); font-size: .8rem; text-transform: none; outline: none; transition: border-color .2s ease;
}
.job-field select option { background: #0c1a3f; }
.job-field textarea { resize: vertical; min-height: 140px; line-height: 1.7; }
.job-field input:focus, .job-field select:focus, .job-field textarea:focus { border-color: var(--primary); }
.job-field input::placeholder, .job-field textarea::placeholder { color: rgba(148, 163, 184, .55); }
.job-field input[type=file] { padding: 12px; color: var(--text-dim); }
.job-field input[type=file]::file-selector-button { margin-right: 14px; padding: 8px 14px; border: 1px solid var(--primary); background: transparent; color: #fff; font-family: var(--font-fancy); font-size: .65rem; letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; }
.job-consent { display: flex; gap: 12px; align-items: flex-start; margin-top: 20px; color: var(--text-dim); font-size: .75rem; line-height: 1.7; text-transform: none; }
.job-consent input { margin-top: 4px; accent-color: #1078F0; width: 16px; height: 16px; flex-shrink: 0; }
.job-consent a { color: var(--primary); }
.job-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 24px; flex-wrap: wrap; }
.job-errors { margin-bottom: 22px; padding: 14px 18px; border: 1px solid #ff5468; border-left-width: 4px; color: #ffd0d6; font-size: .78rem; line-height: 1.7; text-transform: none; }
.job-errors ul { margin: 6px 0 0 18px; padding: 0; }
.job-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.job-thanks i { color: #22c55e !important; }
@media (max-width: 900px) {
  .job-lists, .job-grid { grid-template-columns: 1fr; }
  .job-form { padding: 24px 18px; }
  .job-actions .btn { flex: 1; text-align: center; }
}
.job-lists .job-list, .job-form, .job-card { max-width: none; width: 100%; }
.job-form { max-width: 900px; }

/* ==========================================================================
   WIDER LAYOUT: header, hero, sections, support strip and cookie bar use the
   same width as the footer and the package grids (1352px of content)
   ========================================================================== */
nav#mainNav { width: min(1352px, calc(100% - 48px)); }
.cookie-notice { width: min(1352px, calc(100% - 48px)); }
.hero-a { max-width: 1352px; }
.support-cta-box, .compare-wrap, .cmp-grid { max-width: 1352px; }
.ab-section > .container { max-width: 1400px; }
@media (max-width: 1180px) {
  nav#mainNav:not(.menu-active) { width: calc(100% - 24px); }
  .cookie-notice { width: calc(100% - 24px); }
}

/* Comparison: two cards (Game Server Hosting vs Virtual Private Server) */
.cmp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1000px; }
@media (max-width: 900px) { .cmp-grid { grid-template-columns: 1fr; max-width: 520px; } }

/* Home headline: rotating word (Game Servers / Web Applications / Growing Platforms) */
.rotator { display: inline-grid; color: var(--primary); }
.rot-word { grid-area: 1 / 1; white-space: nowrap; opacity: 0; transform: translateY(14px); transition: opacity .45s ease, transform .45s ease; }
.rot-word.is-on { opacity: 1; transform: none; }
@media (max-width: 420px) { .hero-a h1 { font-size: clamp(1.8rem, 9vw, 2.2rem); } }
@media (prefers-reduced-motion: reduce) { .rot-word { transition: none; } }
.hero-a h1 .rotator { display: grid; justify-items: start; margin: 0; padding: 0; color: var(--primary); }
.hero-a h1 .rot-word { display: block; grid-area: 1 / 1; white-space: normal; text-align: left; margin: 0; padding: 0; color: var(--primary); }
/* Partners: still row when there are only a few */
.pt-static { display: flex; flex-wrap: wrap; gap: 20px; padding: 10px 0 16px; }
.pt-static .pt-logo { filter: none; opacity: 1; }
@media (max-width: 760px) { .pt-static .pt-card { width: 100%; } }

/* Comparison bars: fixed, no moving animation */
.compare .cmp-fill, .compare.active .cmp-fill, .compare.active .cmp-card:hover .cmp-fill { animation: none !important; width: var(--w) !important; }

/* VPS page: first-month discount card (outline only, ticket style) */
.hx-promo { display: flex; flex-direction: column; align-items: stretch; text-align: center; padding: 30px 32px 24px; line-height: 1.5; border: 1px solid rgba(16,120,240,.5); background: none; }
.hx-promo::before { display: none; }
.hx-promo > * { position: relative; z-index: 1; }
.hx-promo .pc { position: absolute; width: 22px; height: 22px; border: 2px solid var(--primary); z-index: 2; }
.hx-promo .pc-tl { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.hx-promo .pc-tr { top: -1px; right: -1px; border-left: 0; border-bottom: 0; }
.hx-promo .pc-bl { bottom: -1px; left: -1px; border-right: 0; border-top: 0; }
.hx-promo .pc-br { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.hx-promo .promo-head { display: flex; justify-content: space-between; align-items: center; font-size: .64rem; letter-spacing: 3px; text-transform: uppercase; color: var(--text-dim); }
.hx-promo .promo-tag { color: var(--primary); display: inline-flex; align-items: center; gap: 8px; }
.hx-promo .promo-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 2px solid var(--primary); }
.hx-promo .promo-big { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 22px 0 6px; }
.hx-promo .promo-num { font-family: var(--font-fancy); font-size: clamp(4.6rem, 10vw, 6.6rem); line-height: .85; font-weight: 800; color: transparent; -webkit-text-stroke: 2px var(--primary); letter-spacing: -2px; }
.hx-promo .promo-stack { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 6px; }
.hx-promo .promo-off { font-family: var(--font-fancy); font-size: clamp(1.8rem, 4vw, 2.4rem); font-weight: 800; color: #fff; line-height: .9; letter-spacing: 3px; }
.hx-promo .promo-line { font-size: .66rem; letter-spacing: 3px; text-transform: uppercase; color: var(--primary); line-height: 1.5; }
.hx-promo .promo-sub { font-size: .8rem; color: var(--text-dim); margin-top: 10px; }
.hx-promo .promo-perks { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 18px 0 0; }
.hx-promo .promo-perks span { font-size: .68rem; color: #e2e8f0; border: 1px solid rgba(148,163,184,.3); border-radius: 30px; padding: 5px 12px; white-space: nowrap; }
.hx-promo .promo-cut { display: flex; align-items: center; gap: 10px; margin: 22px -32px 18px; color: var(--primary); font-size: .8rem; }
.hx-promo .promo-cut::before, .hx-promo .promo-cut::after { content: ""; flex: 1; border-top: 2px dashed rgba(16,120,240,.45); }
.hx-promo .promo-code-label { font-size: .64rem; letter-spacing: 3px; text-transform: uppercase; color: var(--text-dim); margin-bottom: 10px; }
.hx-promo .promo-code { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 14px 16px 14px 20px; background: none; border: 1px solid var(--primary); border-radius: 4px; cursor: pointer; font-family: inherit; color: #fff; transition: border-color .2s, box-shadow .2s; }
.hx-promo .promo-code:hover { box-shadow: 0 0 0 3px rgba(16,120,240,.18); }
.hx-promo .promo-code-val { font-family: var(--font-fancy); font-size: 1.25rem; font-weight: 800; letter-spacing: 4px; }
.hx-promo .promo-code-copy { display: inline-flex; align-items: center; gap: 6px; font-size: .64rem; letter-spacing: 2px; text-transform: uppercase; color: var(--primary); border: 1px solid var(--primary); border-radius: 3px; padding: 5px 11px; transition: color .2s, border-color .2s; }
.hx-promo .promo-code.copied { border-color: #22c55e; }
.hx-promo .promo-code.copied .promo-code-copy { color: #22c55e; border-color: #22c55e; }
.hx-promo .promo-note { font-size: .66rem; color: var(--text-dim); margin-top: 12px; line-height: 1.6; }
@media (max-width: 480px) { .hx-promo { padding: 26px 20px 20px; } .hx-promo .promo-cut { margin-left: -20px; margin-right: -20px; } .hx-promo .promo-code-val { font-size: 1.05rem; letter-spacing: 3px; } .hx-promo .promo-big { gap: 12px; } }

/* Offer: no card frame, content sits on the page */
.hx-promo, .hx-promo:hover { border: 0 !important; box-shadow: none !important; background: none !important; padding: 10px 0 !important; transform: none !important; }
.hx-promo::before, .hx-promo::after { display: none !important; }
.hx-promo .promo-cut { margin-left: 0 !important; margin-right: 0 !important; }

/* VPS page title on one line */
@media (min-width: 901px) { .hero-a h1.h1-one { white-space: nowrap; font-size: clamp(1.7rem, 3.3vw, 3.2rem); } }
/* VirtFusion heading on one line */
@media (min-width: 701px) { .panel-content:has(> h2.h2-one) { container-type: inline-size; } h2.h2-one { white-space: nowrap; font-size: min(2.6rem, 5.9cqi) !important; } }
h2.h2-one span { display: inline !important; }
/* DDoS page: DataForest.net mark in the traffic animation */
.fl-logo.fl-logo-df { object-fit: contain; padding: 6px; filter: drop-shadow(0 0 14px rgba(1,189,128,.45)); }

/* DDoS page: "Protected By DataForest.net" card */
.df-card { display: flex; flex-direction: column; align-items: stretch; padding: 32px 30px 26px; line-height: 1.5; text-transform: none; }
.df-card .df-top { font-size: .66rem; letter-spacing: 3px; text-transform: uppercase; color: var(--text-dim); }
.df-card .df-logo { width: min(260px, 80%); height: auto; margin: 16px 0 14px; }
.df-card .df-sub { font-size: .78rem; color: var(--text-dim); line-height: 1.7; }
.df-card .df-layers { list-style: none; margin: 22px 0 18px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.df-card .df-layers li { display: grid; grid-template-columns: 76px 1fr auto; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid rgba(148,163,184,.25); border-radius: 4px; font-size: .78rem; }
.df-card .df-l { color: var(--primary); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; font-size: .7rem; }
.df-card .df-n { color: #e2e8f0; }
.df-card .df-s { display: inline-flex; align-items: center; gap: 8px; color: #22c55e; font-size: .68rem; letter-spacing: 2px; text-transform: uppercase; }
.df-card .df-s::before, .df-card .df-on::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 8px rgba(34,197,94,.7); }
.df-card .df-foot { display: flex; justify-content: space-between; align-items: center; padding-top: 16px; border-top: 1px dashed rgba(16,120,240,.45); font-size: .72rem; letter-spacing: 2px; text-transform: uppercase; color: #fff; }
.df-card .df-on { display: inline-flex; align-items: center; gap: 8px; color: #22c55e; }
@media (max-width: 420px) { .df-card { padding: 26px 18px 22px; } .df-card .df-layers li { grid-template-columns: 64px 1fr auto; gap: 8px; padding: 11px 12px; } .df-card .df-foot { font-size: .64rem; letter-spacing: 1px; } }

/* DDoS page hero: three steps */
.st-hero { max-width: 1352px; margin: 0 auto; padding: 150px 20px 70px; text-align: center; }
.st-head { max-width: 860px; margin: 0 auto; }
.st-tag { display: inline-block; font-size: .7rem; letter-spacing: 3px; text-transform: uppercase; color: var(--primary); border: 1px solid var(--primary); padding: 5px 12px; }
.st-hero h1 { font-size: clamp(2rem, 4.6vw, 4rem); line-height: 1.1; text-transform: uppercase; letter-spacing: -1px; margin: 22px 0 18px; }
.st-hero h1 span { color: var(--primary); }
.st-head p { color: var(--text-dim); font-size: .95rem; line-height: 1.8; margin: 0 auto; max-width: 720px; text-transform: none; }
.st-steps { list-style: none; margin: 64px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; text-align: left; }
.st-step { --c: var(--primary); opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.st-steps.active .st-step { opacity: 1; transform: none; }
.st-steps.active .st-step:nth-child(2) { transition-delay: .35s; }
.st-steps.active .st-step:nth-child(3) { transition-delay: .7s; }
.st-red { --c: #f43f5e; } .st-blue { --c: var(--primary); } .st-green { --c: #22c55e; }
.st-num { display: block; font-family: var(--font-fancy); font-size: clamp(4rem, 7vw, 6.4rem); font-weight: 800; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--c); }
.st-line { display: block; height: 2px; background: var(--c); margin: 22px 0; transform-origin: left; transform: scaleX(0); transition: transform .9s ease .2s; }
.st-steps.active .st-step:nth-child(2) .st-line { transition-delay: .55s; }
.st-steps.active .st-step:nth-child(3) .st-line { transition-delay: .9s; }
.st-steps.active .st-line { transform: scaleX(1); }
.st-step h2 { font-family: var(--font-fancy); font-size: 1.15rem; letter-spacing: 2px; text-transform: uppercase; color: #fff; margin: 0 0 12px; }
.st-step p { color: var(--text-dim); font-size: .88rem; line-height: 1.8; margin: 0; text-transform: none; }
.st-btns { display: flex; justify-content: center; gap: 14px; margin-top: 60px; flex-wrap: wrap; }
.st-btns .btn { min-width: 240px; justify-content: center; text-align: center; }
@media (max-width: 900px) { .st-hero { padding: 120px 16px 50px; } .st-steps { grid-template-columns: 1fr; gap: 40px; margin-top: 48px; } .st-btns { margin-top: 44px; } .st-btns .btn { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .st-step, .st-line { opacity: 1 !important; transform: none !important; transition: none !important; } }

.st-hero h1.st-one { margin-top: 0; }
@media (min-width: 901px) { .st-hero h1.st-one { white-space: nowrap; font-size: clamp(2rem, 4vw, 4rem); } }
.st-hero .st-head { max-width: none; }
/* Single-line page titles */
h1.h1-line { white-space: nowrap; max-width: 100%; }
h1.h1-line span { display: inline !important; }
@media (max-width: 600px) { h1.h1-line { font-size: clamp(1.25rem, 6.4vw, 2rem) !important; } }

/* Home hero: giant type */
.bh-hero { position: relative; padding: 170px 0 0; overflow: hidden; }
.bh-wrap { max-width: 1352px; margin: 0 auto; padding: 0 20px; }
.bh-kicker { display: block; font-size: .78rem; letter-spacing: 4px; text-transform: uppercase; color: var(--text-dim); }
.bh-title { font-family: var(--font-fancy); font-size: clamp(3rem, 10.4vw, 9.6rem); font-weight: 800; line-height: .95; letter-spacing: -.04em; text-transform: uppercase; color: #fff; margin: 28px 0 0; }
.bh-title .bh-outline { color: transparent; -webkit-text-stroke: 2px var(--primary); }
.bh-cursor { display: inline-block; width: .5em; height: .09em; background: var(--primary); margin-left: .08em; vertical-align: baseline; animation: bhBlink 1.1s steps(1) infinite; }
@keyframes bhBlink { 50% { opacity: 0; } }
.bh-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-top: 44px; }
.bh-row p { max-width: 600px; margin: 0; color: var(--text-dim); font-size: .95rem; line-height: 1.85; text-transform: none; }
.bh-btns { display: flex; gap: 14px; flex-shrink: 0; }
.bh-btns .btn { min-width: 230px; justify-content: center; text-align: center; }
.bh-hero .hero-partners { margin-top: 56px; }
.bh-hero .hero-partners-label { text-transform: uppercase; font-size: .7rem; line-height: 1.4; }
.bh-ticker { margin-top: 64px; border-top: 1px solid rgba(16,120,240,.4); border-bottom: 1px solid rgba(16,120,240,.4); overflow: hidden; }
.bh-track { display: flex; width: max-content; animation: bhScroll 45s linear infinite; }
.bh-ticker:hover .bh-track { animation-play-state: paused; }
.bh-set { display: flex; flex-shrink: 0; }
.bh-set span { padding: 18px 0; font-size: .82rem; letter-spacing: 3px; text-transform: uppercase; color: #fff; white-space: nowrap; }
.bh-set span::after { content: "·"; color: var(--primary); margin: 0 26px; }
@keyframes bhScroll { to { transform: translateX(-50%); } }
@media (max-width: 1100px) { .bh-row { flex-direction: column; align-items: flex-start; } }
@media (max-width: 700px) { .bh-hero { padding-top: 130px; } .bh-wrap { padding: 0 16px; } .bh-title { font-size: clamp(2.5rem, 13.5vw, 4rem); margin-top: 20px; } .bh-title .bh-outline { -webkit-text-stroke: 1.4px var(--primary); } .bh-btns { flex-direction: column; width: 100%; } .bh-btns .btn { width: 100%; min-width: 0; } .bh-ticker { margin-top: 48px; } .bh-set span { font-size: .72rem; padding: 15px 0; } }
@media (prefers-reduced-motion: reduce) { .bh-cursor { animation: none; } .bh-track { animation-duration: 90s; } }
.bh-title { margin-top: 0; }
.bh-hero { padding-bottom: 40px; }

/* VPS page: hardware section */
.hw-section { padding: 90px 0; }
.hw-grid { display: grid; grid-template-columns: 400px 1fr; gap: 90px; align-items: center; }
.hw-chip { width: 100%; max-width: 360px; height: auto; display: block; margin: 0 auto; }
.hw-chip-a { fill: #fff; font: 700 22px var(--font-fancy); letter-spacing: 1px; }
.hw-chip-b { fill: transparent; stroke: #1078F0; stroke-width: 1.4; font: 800 54px var(--font-fancy); }
.hw-kicker { font-size: .7rem; letter-spacing: 3px; text-transform: uppercase; color: var(--primary); }
.hw-text h2 { font-family: var(--font-fancy); font-size: clamp(1.8rem, 3.6vw, 3rem); text-transform: uppercase; color: #fff; margin: 16px 0 18px; line-height: 1.1; }
.hw-text h2 span { color: var(--primary); }
.hw-text > p { color: var(--text-dim); font-size: .92rem; line-height: 1.85; max-width: 580px; margin: 0; text-transform: none; }
.hw-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 30px; margin: 38px 0 26px; }
.hw-facts div { border-left: 2px solid var(--primary); padding: 4px 0 4px 20px; }
.hw-facts b { display: block; font-family: var(--font-fancy); font-size: clamp(1.6rem, 2.6vw, 2.4rem); color: #fff; line-height: 1.1; }
.hw-facts small { display: block; margin-top: 8px; font-size: .68rem; letter-spacing: 2px; text-transform: uppercase; color: var(--text-dim); }
.hw-text .hw-note { font-size: .74rem; }
@media (max-width: 900px) { .hw-section { padding: 60px 0; } .hw-grid { grid-template-columns: 1fr; gap: 40px; } .hw-chip { max-width: 240px; } }
.hw-facts b { text-transform: none; }

/* VPS page hero: Half Price. First Month. */
.vh-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.vh-hero { padding-bottom: 50px; }
.vh-hero .bh-title { font-size: clamp(2.6rem, 9.6vw, 9rem); }
.vh-left { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.vh-left p { max-width: 600px; margin: 0; color: var(--text-dim); font-size: .95rem; line-height: 1.85; text-transform: none; }
.vh-code { display: inline-flex; align-items: center; gap: 18px; padding: 14px 18px; background: none; border: 1px dashed var(--primary); border-radius: 4px; color: #fff; cursor: pointer; font-family: inherit; transition: box-shadow .2s, border-color .2s; }
.vh-code:hover { border-style: solid; box-shadow: 0 0 0 3px rgba(16,120,240,.18); }
.vh-code-label { font-size: .66rem; letter-spacing: 3px; text-transform: uppercase; color: var(--text-dim); }
.vh-code .promo-code-val { font-family: var(--font-fancy); font-size: 1.35rem; font-weight: 800; letter-spacing: 4px; }
.vh-code .promo-code-copy { font-size: .64rem; letter-spacing: 2px; text-transform: uppercase; color: var(--primary); border: 1px solid var(--primary); border-radius: 3px; padding: 5px 11px; }
.vh-code.copied { border-color: #22c55e; }
.vh-code.copied .promo-code-copy { color: #22c55e; border-color: #22c55e; }
.vh-note { font-size: .7rem; color: var(--text-dim); line-height: 1.6; max-width: 520px; }
@media (max-width: 700px) { .vh-hero .bh-title { font-size: clamp(2.3rem, 12.4vw, 3.6rem); } .vh-code { width: 100%; justify-content: space-between; gap: 10px; } .vh-code .promo-code-val { font-size: 1.05rem; letter-spacing: 2px; } }
.vh-note { text-transform: none; letter-spacing: normal; }

/* Careers hero: chat */
.ch-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; max-width: 1352px; margin: 0 auto; padding: 170px 20px 80px; }
.ch-kicker { font-size: .7rem; letter-spacing: 3px; text-transform: uppercase; color: var(--primary); }
.ch-text h1 { font-family: var(--font-fancy); font-size: clamp(2.8rem, 6.4vw, 5.6rem); line-height: 1.02; text-transform: uppercase; letter-spacing: -1px; color: #fff; margin: 20px 0; }
.ch-text h1 span { display: block; color: var(--primary); }
.ch-text p { color: var(--text-dim); font-size: .95rem; line-height: 1.8; margin: 0 0 32px; text-transform: none; }
.ch-btns { display: flex; gap: 14px; flex-wrap: wrap; }
.ch-btns .btn { min-width: 220px; justify-content: center; text-align: center; }
.ch-chat { display: flex; flex-direction: column; gap: 16px; }
.ch-msg { display: flex; align-items: flex-end; gap: 14px; opacity: 0; transform: translateY(12px); animation: chIn .5s ease forwards; animation-delay: var(--d); }
.ch-msg img { width: 34px; height: 34px; object-fit: contain; flex-shrink: 0; }
.ch-msg p { margin: 0; padding: 14px 20px; border-radius: 16px; font-size: .92rem; line-height: 1.6; color: #fff; max-width: 440px; text-transform: none; }
.ch-them p { border: 1px solid var(--primary); border-bottom-left-radius: 4px; }
.ch-me { justify-content: flex-end; }
.ch-me p { border: 1px solid rgba(148,163,184,.4); border-bottom-right-radius: 4px; }
.ch-typing { display: inline-flex; gap: 7px; align-items: center; min-height: 24px; }
.ch-typing i { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); animation: chDot 1.2s ease-in-out infinite; }
.ch-typing i:nth-child(2) { animation-delay: .15s; } .ch-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes chIn { to { opacity: 1; transform: none; } }
@keyframes chDot { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-6px); opacity: 1; } }
@media (max-width: 900px) { .ch-hero { grid-template-columns: 1fr; gap: 44px; padding: 130px 16px 50px; } .ch-btns .btn { width: 100%; min-width: 0; } .ch-msg p { font-size: .86rem; max-width: 82%; } }
@media (prefers-reduced-motion: reduce) { .ch-msg { opacity: 1; transform: none; animation: none; } .ch-typing i { animation: none; opacity: .8; } }

/* About Us hero: Born In Casablanca passport */
.pp-hero { display: grid; grid-template-columns: 1fr 1.1fr; gap: 70px; align-items: center; max-width: 1352px; margin: 0 auto; padding: 170px 20px 90px; }
.pp-kicker { font-size: .7rem; letter-spacing: 3px; text-transform: uppercase; color: var(--primary); }
.pp-text h1 { font-family: var(--font-fancy); font-size: clamp(2.8rem, 7vw, 6.6rem); font-weight: 800; line-height: .95; letter-spacing: -.03em; text-transform: uppercase; color: #fff; margin: 22px 0 24px; }
.pp-text h1 span { display: block; color: transparent; -webkit-text-stroke: 2px var(--primary); }
.pp-text p { color: var(--text-dim); font-size: .95rem; line-height: 1.85; margin: 0 0 32px; max-width: 560px; text-transform: none; }
.pp-btns { display: flex; gap: 14px; flex-wrap: wrap; }
.pp-btns .btn { min-width: 210px; justify-content: center; text-align: center; }
.pp-wrap { position: relative; padding: 30px 30px 40px 0; }
.pp-card { position: relative; display: grid; grid-template-columns: 150px 1fr; gap: 14px 30px; border: 2px solid var(--primary); border-radius: 14px; padding: 32px 34px 22px; transform: rotate(-1.5deg); }
.pp-photo { grid-row: 1; width: 150px; height: 180px; border: 2px solid var(--primary); border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.pp-photo img { width: 90px; height: auto; }
.pp-no { grid-column: 1; grid-row: 2; align-self: start; }
.pp-no small, .pp-fields dt, .pp-head { display: block; font-size: .62rem; letter-spacing: 3px; text-transform: uppercase; color: var(--text-dim); }
.pp-no b { display: block; margin-top: 4px; font-size: .9rem; color: #fff; letter-spacing: 1px; }
.pp-fields { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
.pp-head { color: var(--primary); margin-bottom: 18px; }
.pp-fields > div:not(.pp-head) { margin-bottom: 14px; }
.pp-fields dd { margin: 4px 0 0; color: #fff; font-size: .92rem; line-height: 1.45; text-transform: none; }
.pp-mrz { grid-column: 1 / -1; border-top: 1px dashed rgba(148,163,184,.4); padding-top: 14px; font-size: .74rem; letter-spacing: 3px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: clip; }
.pp-stamp { position: absolute; width: 132px; height: 132px; border-radius: 50%; border: 2px solid var(--primary); color: var(--primary); display: flex; flex-direction: column; align-items: center; justify-content: center; text-transform: uppercase; pointer-events: none; opacity: .9; }
.pp-stamp::before { content: ""; position: absolute; inset: 7px; border: 1px dashed currentColor; border-radius: 50%; }
.pp-stamp b { font-family: var(--font-fancy); font-size: .9rem; letter-spacing: 2px; }
.pp-stamp small { font-size: .56rem; letter-spacing: 2px; margin-top: 4px; }
.pp-stamp-ma { top: -14px; right: -6px; transform: rotate(-14deg); }
.pp-stamp-de { bottom: -6px; right: 70px; transform: rotate(10deg); color: #22c55e; border-color: #22c55e; }
@media (max-width: 1100px) { .pp-hero { grid-template-columns: 1fr; gap: 50px; } .pp-wrap { max-width: 640px; } }
@media (max-width: 600px) { .pp-hero { padding: 130px 16px 60px; } .pp-wrap { padding: 20px 0 50px; } .pp-card { grid-template-columns: 1fr; padding: 24px 20px 18px; transform: none; } .pp-photo { width: 110px; height: 130px; } .pp-photo img { width: 64px; } .pp-no { grid-row: auto; } .pp-fields { grid-column: 1; grid-row: auto; } .pp-mrz { font-size: .6rem; letter-spacing: 1px; } .pp-stamp { width: 100px; height: 100px; } .pp-stamp b { font-size: .72rem; } .pp-stamp-ma { top: 0; right: 0; } .pp-stamp-de { bottom: 0; right: 20px; } .pp-btns .btn { width: 100%; min-width: 0; } }
.pp-stamp-ma { top: -46px; right: -34px; }
.pp-stamp-de { bottom: -40px; right: 10px; }
@media (max-width: 600px) { .pp-stamp-ma { top: -20px; right: -6px; } .pp-stamp-de { bottom: -10px; right: 10px; } }
@media (max-width: 600px) { .pp-stamp-ma { right: 6px; } .pp-wrap { overflow: visible; } }
.pp-hero { overflow-x: clip; }

/* About Us: passport cover (inspired by the Moroccan passport layout) */
.pc-wrap { position: relative; height: 560px; }
.pc-cover { position: absolute; left: 4%; top: 10px; width: 340px; height: 480px; border: 2px solid var(--primary); border-radius: 16px; background: #0c1a3f; transform: rotate(-6deg); display: flex; flex-direction: column; align-items: center; padding: 34px 24px 26px; text-align: center; z-index: 2; box-shadow: 0 30px 60px rgba(0,0,0,.35); }
.pc-cover::before { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(16,120,240,.35); border-radius: 11px; pointer-events: none; }
.pc-ar { font-family: 'Noto Naskh Arabic', 'Amiri', 'Segoe UI', serif; font-size: 1.9rem; line-height: 1.2; color: var(--primary); direction: rtl; }
.pc-fr { margin-top: 8px; font-family: var(--font-fancy); font-weight: 800; letter-spacing: 3px; font-size: 1.05rem; color: #fff; }
.pc-en { margin-top: 2px; font-style: italic; font-weight: 700; letter-spacing: 1px; font-size: .86rem; color: var(--primary); text-transform: uppercase; }
.pc-crest { width: 170px; height: 170px; margin: 22px 0 18px; }
.pc-ar-sm { font-size: 1.5rem; }
.pc-fr-sm { margin-top: 4px; font-size: .95rem; letter-spacing: 4px; font-weight: 700; }
.pc-en-sm { font-size: .82rem; letter-spacing: 3px; }
.pc-chip { width: 44px; height: 30px; margin-top: auto; }
.pc-page { position: absolute; left: 30%; top: 70px; width: 440px; min-height: 360px; border: 2px solid rgba(148,163,184,.5); border-radius: 12px; padding: 26px 26px 18px 150px; transform: rotate(4deg) translateX(-60px); opacity: 0; animation: pcSlide 1s cubic-bezier(.2,.8,.2,1) .4s forwards; overflow: hidden;
  background-image: repeating-radial-gradient(circle at 80% 30%, rgba(16,120,240,.10) 0 1px, transparent 1px 9px); }
.pc-photo { position: absolute; left: 26px; top: 26px; width: 100px; height: 124px; border: 2px solid var(--primary); border-radius: 6px; display: flex; align-items: center; justify-content: center; }
.pc-photo img { width: 58px; height: auto; }
.pc-fields { margin: 0; padding-left: 70px; }
.pc-fields > div { margin-bottom: 12px; }
.pc-fields dt { font-size: .58rem; letter-spacing: 2.5px; text-transform: uppercase; color: var(--text-dim); }
.pc-fields dd { margin: 3px 0 0; font-size: .84rem; color: #fff; line-height: 1.4; text-transform: none; }
.pc-mrz { position: absolute; left: 26px; right: 26px; bottom: 16px; border-top: 1px dashed rgba(148,163,184,.4); padding-top: 10px; font-size: .66rem; letter-spacing: 2px; color: #cbd5e1; white-space: nowrap; overflow: hidden; }
@keyframes pcSlide { to { opacity: 1; transform: rotate(4deg) translateX(0); } }
@media (max-width: 1100px) { .pc-wrap { max-width: 720px; } }
@media (max-width: 700px) {
  .pc-wrap { height: auto; display: flex; flex-direction: column; align-items: center; gap: 24px; }
  .pc-cover { position: relative; left: auto; top: auto; width: 280px; height: 400px; transform: rotate(-3deg); padding: 26px 18px 20px; }
  .pc-ar { font-size: 1.55rem; } .pc-ar-sm { font-size: 1.25rem; } .pc-crest { width: 130px; height: 130px; margin: 16px 0 12px; }
  .pc-page { position: relative; left: auto; top: auto; width: 100%; padding: 22px 18px 50px; transform: none; opacity: 1; animation: none; }
  .pc-photo { position: relative; left: 0; top: 0; margin-bottom: 16px; width: 84px; height: 104px; }
  .pc-fields { padding-left: 0; }
  .pc-mrz { left: 18px; right: 18px; font-size: .56rem; letter-spacing: 1px; }
}
@media (prefers-reduced-motion: reduce) { .pc-page { opacity: 1; animation: none; transform: rotate(4deg); } }
.pc-page { width: 470px; min-height: 410px; padding: 26px 26px 56px 150px; }
.pc-fields { padding-left: 0; }
@media (max-width: 700px) { .pc-cover { order: 1; } .pc-page { order: 2; padding: 22px 18px 50px; width: 100%; min-height: 0; } }
@media (min-width: 701px) {
  .pc-cover { left: 0; width: 300px; height: 440px; padding: 30px 20px 22px; }
  .pc-crest { width: 150px; height: 150px; margin: 18px 0 14px; }
  .pc-page { left: 250px; right: 0; width: auto; max-width: 420px; min-height: 380px; padding: 26px 22px 56px 112px; }
  .pc-photo { display: none; }
  .pc-fields dd { font-size: .8rem; }
  .pc-mrz { left: 112px; right: 22px; }
}

/* About Us: passport data page */
.pp-hero { grid-template-columns: .85fr 1.15fr; }
.dp-wrap { padding: 10px 0; }
.dp-card { position: relative; max-width: 720px; border: 2px solid var(--primary); border-radius: 14px; overflow: hidden; transform: rotate(-1deg); }
.dp-bg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.dp-top { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 26px; border-bottom: 1px solid rgba(16,120,240,.5); }
.dp-top b { font-family: var(--font-fancy); letter-spacing: 4px; font-size: .92rem; color: #fff; text-transform: uppercase; }
.dp-top span { font-size: .62rem; letter-spacing: 2.5px; color: var(--primary); text-transform: uppercase; white-space: nowrap; }
.dp-body { position: relative; display: grid; grid-template-columns: 150px 1fr; gap: 28px; padding: 24px 26px 20px; }
.dp-photo { width: 150px; height: 186px; border: 2px solid var(--primary); border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.dp-photo img { width: 86px; height: auto; }
.dp-no { margin-top: 12px; }
.dp-no small, .dp-fields dt { display: block; font-size: .6rem; letter-spacing: 2.5px; text-transform: uppercase; color: var(--text-dim); }
.dp-no b { display: block; margin-top: 3px; font-size: .95rem; color: #fff; letter-spacing: 1px; }
.dp-fields { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; align-content: start; }
.dp-fields .dp-wide { grid-column: 1 / -1; }
.dp-fields dd { margin: 4px 0 0; color: #fff; font-size: .9rem; line-height: 1.4; text-transform: none; }
.dp-chip { position: absolute; right: 26px; bottom: 16px; width: 70px; height: 40px; }
.dp-mrz { position: relative; padding: 14px 26px; border-top: 1px solid rgba(148,163,184,.3); font-size: .8rem; letter-spacing: 3px; line-height: 1.7; color: #cbd5e1; white-space: nowrap; overflow: hidden; }
@media (max-width: 1100px) { .dp-card { transform: none; } }
@media (max-width: 600px) {
  .dp-top { flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px 18px; } .dp-top b { font-size: .74rem; letter-spacing: 2px; }
  .dp-body { grid-template-columns: 1fr; gap: 18px; padding: 20px 18px 70px; } .dp-photo { width: 104px; height: 128px; } .dp-photo img { width: 62px; }
  .dp-fields { grid-template-columns: 1fr; } .dp-chip { right: 18px; bottom: 18px; }
  .dp-mrz { font-size: .56rem; letter-spacing: 1px; padding: 12px 18px; }
}
.dp-top b { white-space: nowrap; font-size: .8rem; letter-spacing: 3px; }
.dp-chip { position: static; grid-column: 1; width: 70px; height: 40px; }
.dp-left { grid-row: 1; }
.dp-fields { grid-column: 2; grid-row: 1 / span 2; }
.pp-hero > * { min-width: 0; }
@media (max-width: 600px) { .dp-top b { white-space: normal; } .dp-fields { grid-column: 1; grid-row: auto; } .dp-chip { grid-row: auto; } .dp-body { padding-bottom: 20px; } }
.pp-hero { grid-template-columns: 1fr 1fr; gap: 50px; }
.pp-text h1 { font-size: clamp(2.6rem, 5.6vw, 5.6rem); }
@media (max-width: 1100px) { .pp-hero { grid-template-columns: 1fr; } .pp-text h1 { font-size: clamp(2.6rem, 9vw, 5.6rem); } }

/* About Us hero: Built Step By Step */
.sx-hero { display: grid; grid-template-columns: .85fr 1.15fr; gap: 40px; align-items: center; max-width: 1352px; margin: 0 auto; padding: 170px 20px 90px; }
.sx-hero > * { min-width: 0; }
.sx-kicker { font-size: .7rem; letter-spacing: 3px; text-transform: uppercase; color: var(--primary); }
.sx-text h1 { font-family: var(--font-fancy); font-size: clamp(2.6rem, 5.6vw, 5.8rem); font-weight: 800; line-height: .95; letter-spacing: -.03em; text-transform: uppercase; color: #fff; margin: 22px 0 24px; }
.sx-text h1 span { display: block; color: transparent; -webkit-text-stroke: 2px var(--primary); }
.sx-text p { color: var(--text-dim); font-size: .95rem; line-height: 1.85; margin: 0 0 32px; max-width: 520px; text-transform: none; }
.sx-btns { display: flex; gap: 14px; flex-wrap: wrap; }
.sx-btns .btn { min-width: 210px; justify-content: center; text-align: center; }
.sx-stairs-wrap { position: relative; padding-top: 60px; }
.sx-stairs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); align-items: end; height: 440px; }
.sx-step { position: relative; height: calc(90px + var(--i) * 80px); border: 1.5px solid var(--primary); border-right: 0; padding: 16px 14px; display: flex; flex-direction: column; gap: 4px;
  background: linear-gradient(180deg, rgba(16,120,240,.10), rgba(16,120,240,0) 70%); opacity: 0; transform: translateY(24px); animation: sxUp .6s ease forwards; animation-delay: calc(.15s + var(--i) * .18s); }
.sx-step:last-child { border-right: 1.5px solid var(--primary); }
.sx-num { font-family: var(--font-fancy); font-size: 1.9rem; font-weight: 800; line-height: 1; color: transparent; -webkit-text-stroke: 1.2px var(--primary); margin-bottom: 8px; }
.sx-step b { font-size: .95rem; color: #fff; line-height: 1.25; text-transform: none; }
.sx-step small { font-size: .62rem; letter-spacing: 2px; text-transform: uppercase; color: var(--text-dim); line-height: 1.5; }
.sx-now { border-color: #22c55e !important; background: linear-gradient(180deg, rgba(34,197,94,.12), rgba(34,197,94,0) 70%); }
.sx-now .sx-num { -webkit-text-stroke-color: #22c55e; }
.sx-flag { position: absolute; right: 0; top: 0; display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border: 1px solid #22c55e; border-radius: 30px; color: #22c55e; font-size: .68rem; letter-spacing: 2px; text-transform: uppercase; opacity: 0; animation: sxUp .6s ease forwards 1.2s; }
.sx-flag::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgba(34,197,94,.6); animation: sxPing 1.6s ease-out infinite 1.8s; }
.sx-flag img { width: 22px; height: auto; }
@keyframes sxUp { to { opacity: 1; transform: none; } }
@keyframes sxPing { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.6); } 100% { box-shadow: 0 0 0 10px rgba(34,197,94,0); } }
@media (max-width: 1100px) { .sx-hero { grid-template-columns: 1fr; gap: 50px; } .sx-text h1 { font-size: clamp(2.6rem, 9vw, 5.6rem); } }
@media (max-width: 700px) {
  .sx-hero { padding: 130px 16px 60px; }
  .sx-btns .btn { width: 100%; min-width: 0; }
  .sx-stairs-wrap { padding-top: 0; }
  .sx-stairs { grid-template-columns: 1fr; height: auto; gap: 10px; display: flex; flex-direction: column-reverse; }
  .sx-step { height: auto; border-right: 1.5px solid var(--primary); margin-left: calc((4 - var(--i)) * 14px); flex-direction: row; align-items: center; gap: 14px; padding: 14px 16px; }
  .sx-num { margin: 0; font-size: 1.5rem; min-width: 38px; }
  .sx-step small { margin-left: auto; text-align: right; }
  .sx-flag { position: static; margin-bottom: 14px; }
  .sx-stairs-wrap { display: flex; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) { .sx-step, .sx-flag { opacity: 1; transform: none; animation: none; } .sx-flag::after { animation: none; } }
.sx-stairs { height: 500px; }
.sx-step { height: calc(150px + var(--i) * 80px); }
.sx-flag { top: auto; bottom: calc(150px + 4 * 80px + 14px); right: 0; }
.sx-stairs-wrap { padding-top: 0; }
@media (max-width: 700px) {
  .sx-stairs { flex-direction: column; height: auto; }
  .sx-step { margin-left: 0 !important; height: auto; display: grid; grid-template-columns: 46px 1fr; grid-template-rows: auto auto; column-gap: 12px; row-gap: 2px; align-items: center; }
  .sx-num { grid-row: 1 / span 2; }
  .sx-step small { margin-left: 0; text-align: left; }
  .sx-flag { position: static; order: 2; margin: 14px 0 0; align-self: flex-start; }
}
@media (max-width: 700px) { .sx-stairs { align-items: stretch; } .sx-step { width: 100%; } }

/* Home: Why Choose numbers strip */
.wc-section { padding: 100px 0 70px; }
.wc-sub { color: var(--text-dim); font-size: .92rem; margin-top: 12px; text-transform: none; }
.wc-stats { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--primary); border-bottom: 1px solid var(--primary); margin-top: 40px; }
.wc-stats > div { padding: 28px 10px; text-align: center; }
.wc-stats > div + div { border-left: 1px solid rgba(148,163,184,.25); }
.wc-stats b { display: block; font-family: var(--font-fancy); font-size: clamp(1.8rem, 3.4vw, 3rem); font-weight: 800; color: #fff; line-height: 1.1; text-transform: none; }
.wc-stats b.wc-ol { color: transparent; -webkit-text-stroke: 1.5px var(--primary); }
.wc-stats small { display: block; margin-top: 10px; font-size: .64rem; letter-spacing: 3px; text-transform: uppercase; color: var(--text-dim); }
.wc-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 50px; }
.wc-points h3 { font-family: var(--font-fancy); font-size: 1.05rem; color: #fff; margin: 0 0 10px; text-transform: none; }
.wc-points p { color: var(--text-dim); font-size: .85rem; line-height: 1.8; margin: 0; text-transform: none; }
@media (max-width: 900px) {
  .wc-section { padding: 70px 0 50px; }
  .wc-stats { grid-template-columns: repeat(2, 1fr); }
  .wc-stats > div + div { border-left: 0; }
  .wc-stats > div { border-bottom: 1px solid rgba(148,163,184,.2); }
  .wc-stats > div:nth-child(even) { border-left: 1px solid rgba(148,163,184,.25); }
  .wc-stats > div:last-child { grid-column: 1 / -1; border-bottom: 0; border-left: 0; }
  .wc-points { grid-template-columns: 1fr; gap: 26px; }
}


/* Customer reviews (every page) */
.rv-section { padding: 90px 0 70px; }
.rv-sub { color: var(--text-dim); font-size: .9rem; margin-top: 12px; text-transform: none; display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; }
.rv-sub img { width: 16px; height: 16px; }
.rv-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 34px; }
.rv-card { position: relative; display: flex; flex-direction: column; padding: 26px 24px 22px; border: 1px solid rgba(148,163,184,.22); border-radius: 6px; background: none; text-decoration: none; transition: border-color .2s; }
.rv-card::before { content: ""; position: absolute; top: -1px; left: -1px; width: 50px; height: 3px; background: var(--primary); }
.rv-card:hover { border-color: var(--primary); }
.rv-card h3 { font-family: var(--font-fancy); font-size: 1rem; color: #fff; margin: 0 0 12px; line-height: 1.4; text-transform: none; letter-spacing: 0; }
.rv-card p { color: var(--text-dim); font-size: .84rem; line-height: 1.8; margin: 0 0 22px; text-transform: none; flex: 1; }
.rv-meta { display: flex; flex-direction: column; gap: 4px; border-top: 1px dashed rgba(148,163,184,.3); padding-top: 14px; }
.rv-who { display: inline-flex; align-items: center; gap: 8px; }
.rv-who img { width: 16px; height: 12px; }
.rv-who b { color: #fff; font-size: .86rem; text-transform: none; }
.rv-meta small { color: var(--text-dim); font-size: .64rem; letter-spacing: 2px; text-transform: uppercase; }
.rv-all { text-align: center; margin-top: 34px; }
@media (max-width: 1100px) { .rv-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .rv-section { padding: 60px 0 40px; } .rv-grid { grid-template-columns: 1fr; } }
.rv-sub { display: block; text-align: center; } .rv-sub img { display: inline-block; vertical-align: -2px; margin: 0 2px; }

/* Reviews: sliding strip */
.rv-section { padding: 90px 0 60px; overflow: hidden; }
.rv-band { margin-top: 36px; border-top: 1px solid rgba(16,120,240,.4); border-bottom: 1px solid rgba(16,120,240,.4); padding: 36px 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.rv-track { display: flex; width: max-content; animation: rvScroll 50s linear infinite; }
.rv-band:hover .rv-track, .rv-band:focus-within .rv-track { animation-play-state: paused; }
.rv-set { display: flex; gap: 60px; padding-right: 60px; align-items: flex-start; }
.rv-item { flex: 0 0 420px; display: block; border-left: 2px solid var(--primary); padding: 4px 0 4px 24px; text-decoration: none; }
.rv-item p { color: #fff; font-size: .95rem; line-height: 1.75; margin: 0 0 16px; text-transform: none; }
.rv-by { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rv-by img { width: 16px; height: 12px; }
.rv-by b { color: #fff; font-size: .85rem; text-transform: none; }
.rv-by small { color: var(--text-dim); font-size: .64rem; letter-spacing: 2px; text-transform: uppercase; }
.rv-by small::before { content: "· "; }
.rv-item:hover { border-left-color: #fff; }
.rv-source { text-align: center; margin: 20px 0 0; color: var(--text-dim); font-size: .75rem; text-transform: none; }
.rv-source img { width: 15px; height: 15px; vertical-align: -2px; margin: 0 2px; }
.rv-source a { color: var(--primary); }
@keyframes rvScroll { to { transform: translateX(-50%); } }
@media (max-width: 640px) { .rv-section { padding: 60px 0 40px; } .rv-item { flex-basis: 290px; } .rv-item p { font-size: .88rem; } .rv-set { gap: 36px; padding-right: 36px; } .rv-band { padding: 28px 0; } }
/* Reviews keep moving (slower) even when the device asks for less motion - same as the Dashboard and Shield */
@media (prefers-reduced-motion: reduce) { .rv-track { animation-duration: 120s !important; animation-iteration-count: infinite !important; } }

/* Reviews v2: star cards in the sliding strip */
.rv-summary { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 16px; color: var(--text-dim); font-size: .85rem; text-transform: none; }
.rv-summary b { color: #fff; }
.rv-summary img { width: 15px; height: 15px; vertical-align: -2px; margin: 0 2px; }
.rv-summary a { color: var(--primary); }
.rv-stars { display: inline-flex; gap: 3px; }
.rv-stars i { width: 22px; height: 22px; background: rgba(148,163,184,.25); display: inline-flex; align-items: center; justify-content: center; }
.rv-stars i.on { background: #00b67a; }
.rv-stars svg { width: 15px; height: 15px; fill: #fff; }
.rv-band { border: 0; padding: 30px 0 10px; }
.rv-set { gap: 22px; padding-right: 22px; align-items: stretch; }
.rv-item { flex: 0 0 380px; display: flex; flex-direction: column; border: 1px solid rgba(148,163,184,.22); border-left: 1px solid rgba(148,163,184,.22); border-radius: 8px; padding: 24px 24px 20px; position: relative; transition: border-color .2s; }
.rv-item::before { content: ""; position: absolute; top: -1px; left: -1px; width: 50px; height: 3px; background: var(--primary); border-radius: 8px 0 0 0; }
.rv-item:hover { border-color: var(--primary); }
.rv-item .rv-stars i { width: 20px; height: 20px; } .rv-item .rv-stars svg { width: 13px; height: 13px; }
.rv-title { display: block; color: #fff; font-family: var(--font-fancy); font-size: 1rem; margin: 16px 0 8px; text-transform: none; }
.rv-item p { color: var(--text-dim); font-size: .86rem; line-height: 1.75; margin: 0 0 20px; flex: 1; }
.rv-by { display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px dashed rgba(148,163,184,.3); }
.rv-ini { width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--primary); display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: .8rem; flex-shrink: 0; }
.rv-who { display: flex; flex-direction: column; gap: 4px; }
.rv-who b { color: #fff; font-size: .86rem; text-transform: none; }
.rv-who small { display: inline-flex; align-items: center; gap: 6px; color: var(--text-dim); font-size: .62rem; letter-spacing: 2px; text-transform: uppercase; }
.rv-who small::before { content: none; }
.rv-who img { width: 16px; height: 12px; }
@media (max-width: 640px) { .rv-item { flex-basis: 290px; padding: 20px 18px 18px; } .rv-summary { flex-direction: column; gap: 8px; text-align: center; } }
.rv-who { align-items: flex-start; }
.rv-stars i.on { background: var(--primary); }
/* Reviews: compact */
.rv-section { padding: 60px 0 40px; }
.rv-section .section-header h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); }
.rv-summary { margin-top: 10px; font-size: .78rem; gap: 10px; }
.rv-summary .rv-stars i { width: 18px; height: 18px; } .rv-summary .rv-stars svg { width: 12px; height: 12px; }
.rv-band { padding: 22px 0 4px; }
.rv-set { gap: 16px; padding-right: 16px; }
.rv-item { flex: 0 0 300px; padding: 16px 18px 14px; border-radius: 6px; }
.rv-item::before { width: 36px; height: 2px; }
.rv-item .rv-stars { gap: 2px; } .rv-item .rv-stars i { width: 15px; height: 15px; } .rv-item .rv-stars svg { width: 10px; height: 10px; }
.rv-title { font-size: .86rem; margin: 10px 0 6px; }
.rv-item p { font-size: .76rem; line-height: 1.6; margin: 0 0 12px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.rv-by { gap: 10px; padding-top: 10px; }
.rv-ini { width: 28px; height: 28px; font-size: .64rem; border-width: 1px; }
.rv-who { gap: 2px; } .rv-who b { font-size: .76rem; } .rv-who small { font-size: .56rem; letter-spacing: 1.5px; }
@media (max-width: 640px) { .rv-section { padding: 44px 0 28px; } .rv-item { flex-basis: 260px; padding: 14px 16px 12px; } }
.rv-item p { flex: 0 0 auto; max-height: calc(1.6em * 3); }
.rv-by { margin-top: auto; }
.rv-section .section-header { margin-bottom: 0; }
.rv-section .section-header h2 { margin-bottom: 0; }

/* Reviews: yellow emoji-style stars that twinkle */
.rv-stars i, .rv-stars i.on, .rv-summary .rv-stars i, .rv-item .rv-stars i { background: none !important; width: auto; height: auto; }
.rv-stars i svg { display: block; fill: none; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
.rv-stars i:not(.on) svg { opacity: .25; filter: grayscale(1); }
.rv-summary .rv-stars svg { width: 20px; height: 20px; }
.rv-item .rv-stars svg { width: 16px; height: 16px; }
.rv-stars i.on { animation: rvTwinkle 2.4s ease-in-out infinite; animation-delay: calc(var(--s) * .18s); transform-origin: center; }
@keyframes rvTwinkle { 0%, 60%, 100% { transform: scale(1) rotate(0); } 70% { transform: scale(1.28) rotate(-12deg); } 80% { transform: scale(.94) rotate(6deg); } 90% { transform: scale(1.06) rotate(0); } }
@media (prefers-reduced-motion: reduce) { .rv-stars i.on { animation: none; } }
/* 404: Signal Lost (glitch) */
.nf2 { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 140px 20px 80px; }
.nf2-code { position: relative; display: inline-block; font-family: var(--font-fancy); font-weight: 800; font-size: clamp(7rem, 24vw, 19rem); line-height: .9; letter-spacing: -.04em; user-select: none; }
.nf2-code span { display: block; }
.nf2-w { position: relative; color: #fff; }
.nf2-r, .nf2-b { position: absolute; inset: 0; }
.nf2-r { color: #f43f5e; opacity: .55; transform: translate(-8px, 4px); clip-path: inset(10% 0 55% 0); animation: nfGlitchR 3.2s steps(1) infinite; }
.nf2-b { color: var(--primary); opacity: .8; transform: translate(8px, -4px); clip-path: inset(55% 0 8% 0); animation: nfGlitchB 3.2s steps(1) infinite; }
@keyframes nfGlitchR {
  0%, 70%, 100% { transform: translate(-8px, 4px); clip-path: inset(10% 0 55% 0); }
  72% { transform: translate(-16px, 0); clip-path: inset(30% 0 40% 0); }
  74% { transform: translate(6px, 6px); clip-path: inset(70% 0 10% 0); }
  76% { transform: translate(-12px, -3px); clip-path: inset(5% 0 80% 0); }
  78% { transform: translate(-8px, 4px); clip-path: inset(10% 0 55% 0); }
}
@keyframes nfGlitchB {
  0%, 70%, 100% { transform: translate(8px, -4px); clip-path: inset(55% 0 8% 0); }
  72% { transform: translate(16px, 2px); clip-path: inset(15% 0 60% 0); }
  74% { transform: translate(-6px, -6px); clip-path: inset(45% 0 30% 0); }
  76% { transform: translate(12px, 4px); clip-path: inset(80% 0 2% 0); }
  78% { transform: translate(8px, -4px); clip-path: inset(55% 0 8% 0); }
}
.nf2 h1 { font-family: var(--font-fancy); font-size: clamp(1.8rem, 4vw, 2.8rem); text-transform: uppercase; color: #fff; margin: 18px 0 14px; letter-spacing: 0; }
.nf2 h1 span { color: var(--primary); }
.nf2 p { color: var(--text-dim); font-size: .95rem; line-height: 1.8; max-width: 520px; margin: 0 auto 32px; text-transform: none; }
.nf2-actions .btn { min-width: 220px; justify-content: center; }
@media (max-width: 600px) { .nf2 { padding: 120px 16px 60px; } .nf2-r { transform: translate(-4px, 2px); } .nf2-b { transform: translate(4px, -2px); } .nf2-actions, .nf2-actions .btn { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .nf2-r, .nf2-b { animation: none; } }

/* ==========================================================================
   No grow / lift on hover for cards and sections (buttons keep their effect)
   ========================================================================== */
.blog-card:hover, .price-card:hover, .review-card:hover, .review-item:hover, .chatbot-card-modern:hover,
.cmp-card:hover, .hero-a-card:hover, .shield-feature-card:hover, .check-item:hover, .os-badge:hover,
.dd-node:hover, .dd-fact:hover, .panel-mockup-container:hover, .pt-card:hover, .rv-item:hover,
.price-card:hover .compat-icon, .review-card:hover .card-icon, .os-badge img:hover { transform: none !important; }

/* Footer links never break onto two lines ("Virtual Private Servers (VPS)") */
footer .footer-col li a, footer .footer-col a { white-space: nowrap; }