/* ==========================================================================
   Malta Web Hosting — maltawebhosting.com · v5
   Deep-indigo SaaS layout, Malta-red accents kept deliberately restrained.
   Type: Poppins (display) / DM Sans (body).
   ========================================================================== */

:root {
  --bg: #050c36;
  --bg-alt: #030827;
  --card: #101a4a;
  --card-2: #0c1440;
  --line: rgba(159, 172, 232, .14);
  --ink: #ffffff;
  --ink-dim: #ccd0f0;      /* 12.4:1 */
  --ink-faint: #a3a9d8;    /*  8.3:1 */

  /* Malta red. Deliberately deep — the bright version was overpowering on
     large surfaces, so fills use the dark pair and only text uses the light. */
  --red: #ff5f6d;          /* 6.4:1 on --bg — red for TEXT only */
  --red-flag: #cf142b;
  --red-hot: #c9142c;      /* fill start: white on it = 5.8:1  */
  --red-deep: #7d0a1b;     /* fill end:   white on it = 10.9:1 */
  --grad: linear-gradient(135deg, #c9142c 0%, #7d0a1b 100%);
  --grad-bright: linear-gradient(135deg, #ff6b78 0%, #ff2d43 100%);
  /* big surfaces resolve red into the indigo so they never read as a slab */
  --grad-panel: linear-gradient(118deg, #8f1024 0%, #5e0d20 44%, #241246 100%);
  --ok: #5be08e;           /* domain available */

  --font-display: "Poppins", system-ui, sans-serif;
  --font-body: "DM Sans", system-ui, sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --nav-h: 78px;
  --r: 14px;
  --wrap: 1200px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink-faint);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.72;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  /* deterrent only — see README */
  -webkit-user-select: none;
  user-select: none;
}

img, svg, video, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; }

h1, h2, h3 { font-family: var(--font-display); color: var(--ink); font-weight: 600; line-height: 1.18; }

::selection { background: var(--red-deep); color: #fff; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 clamp(1.1rem, 4vw, 2rem); }

/* ---------- background field ---------- */

.bg-fx {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background-image: repeating-linear-gradient(115deg,
    rgba(159, 172, 232, .035) 0 1px, transparent 1px 92px);
}

.blob { position: absolute; border-radius: 50%; }

.b1 { top: -28vmax; left: -14vmax; width: 62vmax; height: 62vmax;
      background: radial-gradient(circle, rgba(160, 18, 40, .17), transparent 62%); }
.b2 { top: 34%; right: -22vmax; width: 58vmax; height: 58vmax;
      background: radial-gradient(circle, rgba(201, 20, 44, .10), transparent 62%); }
.b3 { bottom: -26vmax; left: 18%; width: 54vmax; height: 54vmax;
      background: radial-gradient(circle, rgba(64, 112, 255, .10), transparent 62%); }

@media (prefers-reduced-motion: no-preference) {
  .b1 { animation: drift-a 30s ease-in-out infinite alternate; }
  .b2 { animation: drift-b 36s ease-in-out infinite alternate; }
  .b3 { animation: drift-a 42s ease-in-out infinite alternate reverse; }
}

@keyframes drift-a { to { transform: translate3d(7vmax, 5vmax, 0) scale(1.14); } }
@keyframes drift-b { to { transform: translate3d(-6vmax, -6vmax, 0) scale(.9); } }

main, footer { position: relative; z-index: 1; }

/* ---------- preloader ---------- */

.preloader {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  background: var(--bg);
  transition: opacity .5s var(--ease), visibility .5s;
}

/* pointer-events flips immediately, so a click during the half-second fade
   reaches the page instead of being swallowed by the overlay */
.preloader.done { opacity: 0; visibility: hidden; pointer-events: none; }

.pl-logo { width: 76px; height: 76px; }

@media (prefers-reduced-motion: no-preference) {
  .pl-logo { animation: pl-breathe 1.6s var(--ease) infinite alternate; }
  /* LEDs blink like a rack booting */
  .pl-logo .led { animation: pl-led 1.05s steps(2) infinite; }
  .pl-logo .led:nth-of-type(2) { animation-delay: .13s; }
  .pl-logo .led:nth-of-type(3) { animation-delay: .26s; }
  .pl-logo .led:nth-of-type(4) { animation-delay: .40s; }
  .pl-logo .led:nth-of-type(5) { animation-delay: .53s; }
  .pl-logo .led:nth-of-type(6) { animation-delay: .66s; }
}

@keyframes pl-breathe { from { transform: scale(.94); } to { transform: scale(1); } }
@keyframes pl-led { 0%, 55% { opacity: 1; } 56%, 100% { opacity: .2; } }

/* ---------- scroll progress ---------- */

.progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 200;
  background: var(--grad-bright);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 48px;
  padding: .8rem 1.7rem;
  border-radius: 8px;
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
  transition: transform .25s var(--ease), box-shadow .25s, background-color .25s,
              border-color .25s, color .25s, opacity .25s;
}

.btn-sm { min-height: 44px; padding: .6rem 1.3rem; font-size: .9rem; }
.full { width: 100%; }

.btn-grad {
  background: var(--grad);
  color: #fff;
  box-shadow: 0 10px 26px -14px rgba(201, 20, 44, .75);
}

.btn-grad:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -14px rgba(201, 20, 44, .85); }

.btn-line {
  border: 1px solid rgba(255, 95, 109, .42);
  color: var(--ink);
  background: rgba(201, 20, 44, .07);
}

.btn-line:hover { border-color: var(--red); background: rgba(201, 20, 44, .16); transform: translateY(-2px); }

/* ---------- nav ---------- */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 150;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.4rem;
  padding: 0 clamp(1.1rem, 4vw, 2.4rem);
  transition: transform .45s var(--ease), background-color .35s, box-shadow .35s;
}

.nav.is-tinted {
  background: rgba(3, 8, 39, .86);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(159, 172, 232, .1);
}

.nav.is-hidden { transform: translateY(-100%); }

.brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-height: 44px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--ink);
  white-space: nowrap;
}

.brand-mark { width: 34px; height: 34px; flex: 0 0 auto; }
.brand b { font-weight: 600; color: var(--red); }

.nav-links { display: flex; align-items: center; gap: .3rem; }

.nav-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 1rem;
  border-radius: 7px;
  font-size: .93rem;
  font-weight: 500;
  color: var(--ink-dim);
  transition: color .25s, background-color .25s;
}

.nav-links a:hover { color: var(--ink); background: rgba(159, 172, 232, .08); }
.nav-links a.is-active { color: var(--red); }

.nav-right { display: flex; align-items: center; gap: .6rem; }

.burger {
  display: none;
  position: relative;
  width: 46px; height: 46px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid var(--line);
}

.burger span, .burger span::before, .burger span::after {
  content: "";
  display: block;
  position: absolute;
  width: 20px; height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform .4s var(--ease), opacity .25s;
}

.burger span::before { transform: translateY(-6px); }
.burger span::after  { transform: translateY(6px); }
.burger.is-open span { background: transparent; }
.burger.is-open span::before { transform: rotate(45deg); }
.burger.is-open span::after  { transform: rotate(-45deg); }

.mobile-menu {
  position: fixed;
  top: var(--nav-h); left: 0; right: 0;
  z-index: 149;
  display: flex;
  flex-direction: column;
  gap: .2rem;
  padding: 1rem clamp(1.1rem, 5vw, 2rem) 1.6rem;
  background: rgba(3, 8, 39, .97);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  transform: translateY(-12px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}

.mobile-menu.is-open { opacity: 1; visibility: visible; transform: none; }

.mobile-menu a {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 0 .3rem;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--ink-dim);
  border-bottom: 1px solid rgba(159, 172, 232, .08);
}

.mobile-menu .btn { margin-top: 1rem; }

@media (max-width: 980px) {
  .nav-links { display: none; }
  .burger { display: flex; }
}

@media (max-width: 420px) { .nav-right .btn-grad { display: none; } }

/* ---------- section furniture ---------- */

.band { padding: clamp(3.4rem, 7vw, 5.6rem) 0; position: relative; }

/* darker bands ease in and out of the page background instead of butting
   against it, so no section starts or ends on a hard horizontal line */
.band-alt {
  background: linear-gradient(180deg,
    var(--bg) 0,
    var(--bg-alt) 90px,
    var(--bg-alt) calc(100% - 90px),
    var(--bg) 100%);
}

.eyebrow {
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: .7rem;
}

.sec-head { text-align: center; max-width: 640px; margin: 0 auto clamp(2.2rem, 4vw, 3rem); }

.sec-title {
  font-size: clamp(1.85rem, 3.9vw, 2.7rem);
  font-weight: 700;
  letter-spacing: -.015em;
  text-wrap: balance;
}

.sec-sub { margin-top: .9rem; color: var(--ink-faint); text-wrap: pretty; }

.grad-text {
  background: var(--grad-bright);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.fineprint {
  margin-top: 1.4rem;
  font-size: .87rem;
  color: var(--ink-faint);
  text-align: center;
  text-wrap: pretty;
}

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: var(--rd, 0s);
}
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ---------- hero ---------- */

.hero {
  position: relative;
  padding: calc(var(--nav-h) + clamp(2rem, 5vw, 3.6rem)) 0 clamp(3rem, 6vw, 4.6rem);
  overflow: hidden;
}

.hero-net {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  align-items: center;
  gap: clamp(1.6rem, 4vw, 3.4rem);
}

.hero h1 {
  font-size: clamp(2.2rem, 4.9vw, 3.6rem);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.1;
}

.lede {
  max-width: 34rem;
  margin-top: 1.2rem;
  font-size: clamp(1rem, 1.35vw, 1.1rem);
  color: var(--ink-dim);
  text-wrap: pretty;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.9rem; }

/* the copy has to sit above the cables, which now run right across the banner,
   and above the edge-fade too, so the headline stays crisp */
.hero-copy { position: relative; z-index: 3; }

/* .hero clips the cables, which would otherwise end on a hard straight line at
   the top and bottom of the banner. This fades them out into the page colour
   just before that clip, so the hero melts into the next section. It sits
   above the artwork (z-1) but below the copy (z-3). */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(to bottom, var(--bg) 0, transparent 90px),
    linear-gradient(to top,    var(--bg) 0, transparent 190px);
}

@media (max-width: 900px) {
  .hero::after {
    background:
      linear-gradient(to bottom, var(--bg) 0, transparent 60px),
      linear-gradient(to top,    var(--bg) 0, transparent 110px);
  }
}

/* nothing between the artwork and .hero may clip, or the cables get cut short;
   .hero itself is overflow:hidden and is the intended clip boundary */
.hero-art {
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 1;
  overflow: visible;
}

.hero-art .iso { width: 100%; max-width: 660px; height: auto; overflow: visible; }

/* ---- fibre cables running out of the rack ---- */

.cbl-sheath {
  fill: none;
  stroke: #0a1030;
  stroke-width: 7;
  stroke-linecap: round;
  opacity: .85;
}

.cbl-core {
  fill: none;
  stroke: var(--c);
  stroke-width: 2.4;
  stroke-linecap: round;
  opacity: .32;
}

/* the travelling light inside the fibre */
.cbl-flow {
  fill: none;
  stroke: var(--c);
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-dasharray: 20 180;   /* 200 divides 1000 exactly -> seamless cycle */
  filter: drop-shadow(0 0 5px var(--c));
  opacity: .95;
}

.cbl-port {
  fill: var(--c);
  filter: drop-shadow(0 0 6px var(--c));
  opacity: .9;
}

@media (prefers-reduced-motion: no-preference) {
  .hero-art .iso { animation: float 7s ease-in-out infinite alternate; }
  .cbl-flow {
    animation: cbl-run var(--t, 3s) linear infinite;
    animation-delay: var(--d, 0s);
  }
  /* half the cables carry data the other way, so it reads as in *and* out */
  .cbl-flow.rev { animation-name: cbl-run-rev; }
  .cbl-port { animation: cbl-blink 2.4s ease-in-out infinite; animation-delay: var(--d, 0s); }
}

@keyframes cbl-run     { to { stroke-dashoffset: -200; } }
@keyframes cbl-run-rev { to { stroke-dashoffset:  200; } }
@keyframes cbl-blink   { 0%, 100% { opacity: .9; } 50% { opacity: .45; } }

@keyframes float { from { transform: translateY(-10px); } to { transform: translateY(10px); } }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; text-align: center; }
  .lede { margin-left: auto; margin-right: auto; }
  .hero-actions { justify-content: center; }
  .hero-art { order: -1; }
  .hero-art img { max-width: 420px; }
}

/* ---------- about: full-bleed Malta photograph ---------- */

.about {
  position: relative;
  isolation: isolate;
  padding: clamp(4rem, 9vw, 7rem) 0;
  text-align: center;
}

.about-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }

.about-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }

.about-bg::after {
  /* resolves to the page background top and bottom so the photo has no seam */
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, var(--bg) 0%, rgba(5, 12, 54, .82) 26%,
                    rgba(5, 12, 54, .86) 74%, var(--bg) 100%),
    linear-gradient(96deg, rgba(125, 10, 27, .34), transparent 62%);
}

.about-inner { max-width: 780px; }

.about-title {
  font-size: clamp(1.9rem, 4.2vw, 2.9rem);
  font-weight: 700;
  letter-spacing: -.02em;
  text-wrap: balance;
}

.about-lead {
  margin-top: 1.2rem;
  color: var(--ink-dim);
  font-size: clamp(1rem, 1.3vw, 1.08rem);
  text-wrap: pretty;
}

.about-lead strong { color: var(--ink); font-weight: 500; }

.about-note {
  margin-top: 1.6rem;
  font-family: var(--font-display);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ---------- stats ---------- */

.stats-band { padding: clamp(2.4rem, 5vw, 3.4rem) 0; }

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1rem;
}

.stat {
  text-align: center;
  padding: 1.6rem 1.2rem;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--card-2);
  transition: transform .3s var(--ease), border-color .3s;
}

.stat:hover { transform: translateY(-4px); border-color: rgba(255, 95, 109, .4); }

.stat-icon {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  margin: 0 auto .8rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 95, 109, .28);
  background: rgba(201, 20, 44, .1);
  color: var(--red);
}

.stat-icon svg { width: 20px; height: 20px; }

.stat b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  background: var(--grad-bright);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.stat-label { font-size: .86rem; color: var(--ink-faint); }

/* ---------- tech marquee ---------- */

.techbar {
  /* short strip, so it needs a tighter fade than a full band */
  background: linear-gradient(180deg,
    var(--bg) 0,
    var(--bg-alt) 28px,
    var(--bg-alt) calc(100% - 28px),
    var(--bg) 100%);
  overflow: hidden;
  padding: 1.6rem 0;
}

.tech-track { display: flex; width: max-content; }

@media (prefers-reduced-motion: no-preference) {
  .tech-track { animation: marquee 38s linear infinite; }
}

@keyframes marquee { to { transform: translate3d(-50%, 0, 0); } }

.tech-half { display: flex; align-items: center; flex: 0 0 auto; }

.tech-half li {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: 0 clamp(1.1rem, 2.6vw, 2.1rem);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink-dim);
  white-space: nowrap;
}

/* official product logos need a light chip: several brand colours
   (WordPress 3.4:1, Apache 3.3:1) are too dark to read on the indigo */
.tm {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  flex: 0 0 auto;
  padding: 8px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 2px 10px -4px rgba(0, 0, 0, .5);
}

.tm svg { width: 100%; height: 100%; }

/* Softaculous ships a wordmark rather than an icon, so its chip is a pill */
.tm-wide { width: auto; min-width: 116px; padding: 8px 12px; }
.tm-wide img { width: auto; height: 20px; }

/* ---------- services ---------- */

.svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: 1.1rem;
}

.svc {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.7rem 1.5rem;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--card-2);
  transition: transform .3s var(--ease), border-color .3s;
}

.svc:hover { transform: translateY(-6px); border-color: rgba(255, 95, 109, .42); }

.svc-icon {
  display: grid;
  place-items: center;
  width: 50px; height: 50px;
  margin-bottom: 1.1rem;
  border-radius: 50%;
  border: 1px solid rgba(159, 172, 232, .2);
  background: rgba(159, 172, 232, .06);
  color: var(--red);
}

.svc-icon svg { width: 23px; height: 23px; }

.svc h3 { font-size: 1.1rem; font-weight: 600; margin-bottom: .45rem; text-wrap: balance; }
.svc p { font-size: .9rem; color: var(--ink-faint); text-wrap: pretty; }

/* ---------- domain check ---------- */

.domain-band { text-align: center; }

.domain-title {
  font-size: clamp(1.3rem, 2.6vw, 1.75rem);
  font-weight: 600;
  margin-bottom: 1.3rem;
}

.domain-row {
  display: flex;
  gap: .6rem;
  max-width: 560px;
  margin: 0 auto;
  flex-wrap: wrap;
  justify-content: center;
}

.domain-input {
  flex: 1 1 260px;
  min-height: 52px;
  padding: .8rem 1.2rem;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(16, 26, 74, .8);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
}

.domain-input::placeholder { color: #7d85bb; }
.domain-input:focus { outline: 2px solid var(--red); outline-offset: 1px; border-color: transparent; }

.domain-result {
  min-height: 1.7em;
  margin-top: 1.1rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: .95rem;
  color: var(--ink-faint);
}

.domain-result b { font-weight: 600; }
.domain-result.is-free { color: var(--ok); }
.domain-result.is-taken { color: var(--red); }

.domain-tlds {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .5rem .8rem;
  margin-top: 1rem;
  font-size: .87rem;
}

.domain-tlds span {
  padding: .28rem .8rem;
  border-radius: 99px;
  border: 1px solid var(--line);
  background: rgba(16, 26, 74, .6);
  color: var(--ink-dim);
  font-weight: 500;
}

.domain-tlds em { font-style: normal; color: var(--ink-faint); }

/* ---------- pricing ---------- */

.price-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 1.2rem;
  align-items: center;
}

.price {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2rem 1.7rem;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--card-2);
  transition: transform .3s var(--ease), border-color .3s;
}

.price:hover { transform: translateY(-5px); border-color: rgba(255, 95, 109, .4); }

.price.is-featured {
  background: var(--card);
  border-color: rgba(255, 95, 109, .45);
  padding-top: 2.6rem;
  padding-bottom: 2.6rem;
  box-shadow: 0 26px 60px -36px rgba(201, 20, 44, .7);
}

.price-flag {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  padding: .3rem 1rem;
  border-radius: 99px;
  background: var(--grad);
  color: #fff;
  font-family: var(--font-display);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.price h3 { font-size: 1.3rem; font-weight: 600; }
.price-for { font-size: .86rem; color: var(--ink-faint); margin-top: .2rem; text-wrap: pretty; }

.price-tag {
  display: flex;
  align-items: baseline;
  gap: .3rem;
  margin: 1rem 0 1.3rem;
  padding-bottom: 1.3rem;
  border-bottom: 1px solid var(--line);
}

.price-tag .amt {
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 700;
  letter-spacing: -.03em;
  background: var(--grad-bright);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.price-tag .per { font-size: .9rem; color: var(--ink-faint); }

.ticks { flex: 1; margin-bottom: 1.6rem; }

.ticks li {
  position: relative;
  padding: .38rem 0 .38rem 1.7rem;
  font-size: .93rem;
  color: var(--ink-dim);
}

.ticks li::before {
  content: "";
  position: absolute;
  left: 0; top: .72em;
  width: 16px; height: 16px;
  transform: translateY(-50%);
  background: var(--grad-bright);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 12.5l5 5 10-11' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 12.5l5 5 10-11' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}

.included {
  margin-top: 2.4rem;
  padding: 1.9rem clamp(1.2rem, 3vw, 2.2rem);
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--card-2);
}

.included-head {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
  text-align: center;
  margin-bottom: 1.5rem;
}

.included-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 1.1rem 1.4rem;
}

.included-grid li {
  padding-left: 1.7rem;
  position: relative;
  font-size: .87rem;
  color: var(--ink-faint);
  text-wrap: pretty;
}

.included-grid li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 9px; height: 9px;
  border-radius: 2px;
  background: var(--grad-bright);
}

.included-grid b {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .95rem;
  color: var(--ink);
}

/* ---------- VPS ---------- */

.vps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  gap: 1.1rem;
  align-items: start;
}

.vps {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.9rem 1.6rem;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--card-2);
  transition: transform .3s var(--ease), border-color .3s;
}

.vps:hover { transform: translateY(-5px); border-color: rgba(255, 95, 109, .4); }

.vps.is-featured {
  background: var(--card);
  border-color: rgba(255, 95, 109, .45);
  box-shadow: 0 26px 60px -36px rgba(201, 20, 44, .65);
}

/* stacked layers: one per tier */
.vps-icon { width: 46px; height: 34px; margin-bottom: .9rem; color: var(--red); }
.vps-icon svg { width: 100%; height: 100%; }
.vps-icon .l { fill: currentColor; opacity: .9; }
.vps-icon .l + .l { opacity: .62; }
.vps-icon .l + .l + .l { opacity: .44; }
.vps-icon .l + .l + .l + .l { opacity: .3; }

.vps h3 { font-size: 1.14rem; font-weight: 600; }

.spec { margin-bottom: 1.5rem; }

.spec > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .44rem 0;
  border-bottom: 1px solid rgba(159, 172, 232, .07);
}

.spec > div:last-child { border-bottom: 0; }
.spec dt { font-size: .84rem; color: var(--ink-faint); }

.spec dd {
  font-family: var(--font-display);
  font-size: .92rem;
  font-weight: 600;
  color: var(--ink);
}

.vps-feats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem;
  margin-top: 1.8rem;
}

.vps-feats li {
  padding: .5rem 1.05rem;
  border-radius: 99px;
  border: 1px solid var(--line);
  background: rgba(16, 26, 74, .6);
  font-size: .85rem;
  color: var(--ink-dim);
}

/* ---------- network map ---------- */

.map-wrap { position: relative; }

#worldMap {
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 620;
}

.loc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin-top: 1.8rem;
}

.loc {
  padding: 1.2rem 1.4rem;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--card-2);
}

.loc h3 { font-size: .98rem; font-weight: 600; margin-bottom: .3rem; }
.loc p { font-size: .87rem; color: var(--ink-faint); text-wrap: pretty; }
.loc.is-us { border-color: rgba(255, 95, 109, .45); background: var(--card); }
.loc.is-us h3 { color: var(--red); }

/* ---------- video interlude ---------- */

.interlude {
  position: relative;
  height: clamp(320px, 52vh, 520px);
  overflow: hidden;
}

.interlude video, .interlude .poster {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

.interlude .poster { background: url("../assets/video/valletta-poster.jpg") center / cover; }

.interlude::after {
  content: "";
  position: absolute;
  inset: 0;
  /* a long ramp at both ends — the bright sky shows through early, so a short
     fade still reads as a hard edge against the section above */
  background:
    linear-gradient(180deg,
      var(--bg) 0%,
      rgba(5, 12, 54, .88) 10%,
      rgba(5, 12, 54, .55) 24%,
      rgba(5, 12, 54, .44) 42%,
      rgba(5, 12, 54, .5) 66%,
      rgba(5, 12, 54, .88) 90%,
      var(--bg) 100%),
    radial-gradient(60% 70% at 50% 50%, rgba(3, 8, 39, .55), transparent 75%);
}

.interlude-quote {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 1.4rem;
}

.q-mark {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6vw, 4rem);
  font-weight: 700;
  line-height: .7;
  color: var(--red);
  margin-bottom: .5rem;
}

.interlude-quote p {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 3.4vw, 2.15rem);
  font-weight: 600;
  line-height: 1.28;
  color: #fff;
  max-width: 18ch;
  text-wrap: balance;
  text-shadow: 0 2px 26px rgba(0, 0, 0, .55);
}

.interlude-quote cite {
  margin-top: 1.1rem;
  font-style: normal;
  font-family: var(--font-display);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .8);
}

/* ---------- CTA ---------- */

.cta-band { padding-bottom: clamp(3.4rem, 7vw, 5.6rem); }

.cta-panel {
  position: relative;
  overflow: hidden;
  padding: clamp(2.2rem, 5vw, 3.4rem) clamp(1.4rem, 5vw, 3.2rem);
  border-radius: 20px;
  background: var(--grad-panel);
  border: 1px solid rgba(255, 95, 109, .26);
  text-align: center;
  box-shadow: 0 30px 70px -44px rgba(0, 0, 0, .9);
}

.cta-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 110% at 88% 8%, rgba(255, 255, 255, .1), transparent 62%);
  pointer-events: none;
}

.cta-panel h2 {
  position: relative;
  font-size: clamp(1.5rem, 3.4vw, 2.2rem);
  font-weight: 700;
  color: #fff;
  text-wrap: balance;
}

.cta-panel p {
  position: relative;
  max-width: 46rem;
  margin: .9rem auto 0;
  color: rgba(255, 255, 255, .92);
  text-wrap: pretty;
}

.cta-panel p strong { color: #fff; font-weight: 600; }

.cta-panel .btn {
  position: relative;
  margin-top: 1.7rem;
  background: #fff;
  color: #6d0917;
  box-shadow: 0 14px 30px -16px rgba(0, 0, 0, .8);
}

.cta-panel .btn:hover { background: #fff; transform: translateY(-2px); }

/* ---------- footer ---------- */

/* only the top edge needs easing — the bottom is the end of the page */
.footer {
  background: linear-gradient(180deg, var(--bg) 0, var(--bg-alt) 130px, var(--bg-alt) 100%);
}

.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: 2rem;
  padding-top: clamp(2.6rem, 5vw, 3.4rem);
  padding-bottom: clamp(2rem, 4vw, 2.6rem);
}

.footer-brand p { margin-top: .9rem; font-size: .88rem; max-width: 30rem; text-wrap: pretty; }
.footer-brand a { color: var(--red); }

.footer-col h3 { font-size: .95rem; font-weight: 600; margin-bottom: .7rem; }

.footer-col li a, .linkish {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: .88rem;
  color: var(--ink-faint);
  transition: color .25s;
  text-align: left;
}

.footer-col li a:hover, .linkish:hover { color: var(--red); }

/* inline prose links: padded to a 44px hit area without moving the text */
.footer-brand p a, .footer-bottom a {
  display: inline-block;
  padding: 13px 4px;
  margin: -13px -4px;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.5rem;
  justify-content: space-between;
  padding-top: 1.3rem;
  padding-bottom: 1.6rem;
  border-top: 1px solid var(--line);
  font-size: .82rem;
}

.footer-bottom a { color: var(--red); }

@media (max-width: 800px) {
  .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
}

/* ---------- back to top ---------- */

.to-top {
  position: fixed;
  right: 1.1rem;
  bottom: 1.1rem;
  z-index: 140;
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--grad);
  color: #fff;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .3s, visibility .3s, transform .3s var(--ease);
  box-shadow: 0 12px 26px -14px rgba(201, 20, 44, .85);
}

.to-top svg { width: 18px; height: 18px; }
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }

/* ---------- modal ---------- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 250;
  display: grid;
  place-items: center;
  padding: 1.2rem;
}

.modal[hidden] { display: none; }

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 4, 20, .8);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .28s;
}

.modal.is-open .modal-backdrop { opacity: 1; }

.modal-panel {
  position: relative;
  width: min(500px, 100%);
  padding: 2.1rem clamp(1.4rem, 4vw, 2.2rem);
  border-radius: 18px;
  border: 1px solid rgba(255, 95, 109, .28);
  background: #0b1236;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .9);
  opacity: 0;
  transform: translateY(12px) scale(.98);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}

.modal.is-open .modal-panel { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .modal-backdrop, .modal-panel { transition: none; }
}

.modal-mark { width: 46px; height: 46px; margin-bottom: 1rem; }
.modal-panel h2 { font-size: clamp(1.2rem, 3vw, 1.5rem); font-weight: 600; margin-bottom: .7rem; text-wrap: balance; }
.modal-panel p { font-size: .92rem; color: var(--ink-faint); text-wrap: pretty; }
.modal-panel p strong { color: var(--ink); font-weight: 500; }

.modal-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.6rem; }
.modal-actions .btn { flex: 1 1 auto; }