/* ============================================================
   The Masked House — main stylesheet
   Look: vibrant purple→pink→orange gradient hero, deep purple
   sections, gold accents, heavy (but tasteful) animation.
   ============================================================ */

:root {
  --grad-1: #7b2ff7;   /* purple  */
  --grad-2: #e61e9c;   /* pink    */
  --grad-3: #ff7b2f;   /* orange  */
  --bg-deep: #150829;  /* deep purple page bg */
  --bg-panel: #1e1038; /* section panel */
  --bg-card: #241442;  /* card bg */
  --bg-card-2: #2c1a52;
  --border: rgba(255,255,255,.08);
  --gold: #ffc21a;
  --pink: #ff2d78;
  --blue: #29b6f6;
  --green: #2ecc71;
  --purple: #a78bfa;
  --text: #f5f2ff;
  --muted: #b6a9d6;
  --radius: 14px;
  --shadow: 0 18px 50px rgba(0,0,0,.35);
  --font: 'Poppins', system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background: var(--bg-deep);
  color: var(--text);
  overflow-x: hidden;
  line-height: 1.6;
}
img { max-width: 100%; }
a { color: inherit; text-decoration: none; }
.container { width: min(1200px, 92%); margin: 0 auto; }

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

/* ---------- Cursor glow ---------- */
.cursor-glow {
  position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 30%),
              rgba(230,30,156,.10), transparent 55%);
  transition: background .15s;
}

/* ---------- Header ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 14px 0;
  transition: background .3s, box-shadow .3s, padding .3s;
}
.site-header.scrolled {
  background: rgba(21,8,41,.85);
  backdrop-filter: blur(14px);
  box-shadow: 0 8px 30px rgba(0,0,0,.3);
  padding: 8px 0;
}
.header-inner { display: flex; align-items: center; gap: 28px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.05rem; }
.brand-logo { width: 84px; height: 84px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255,194,26,.6), 0 0 22px rgba(255,194,26,.35); animation: logoPulse 3.5s ease-in-out infinite; transition: width .3s, height .3s; }
.site-header.scrolled .brand-logo { width: 52px; height: 52px; }
@keyframes logoPulse {
  0%,100% { box-shadow: 0 0 0 2px rgba(255,194,26,.6), 0 0 18px rgba(255,194,26,.25); }
  50%      { box-shadow: 0 0 0 2px rgba(255,194,26,.9), 0 0 34px rgba(255,194,26,.55); }
}
.brand-name em { font-style: normal; color: var(--gold); }

/* The name and the slogan stack, so the logo keeps its own line height and the
   header does not grow. */
.brand-text { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.brand-slogan {
  display: block; font-size: .68rem; font-weight: 500; letter-spacing: .11em;
  text-transform: uppercase; color: var(--gold); opacity: .85;
  margin-top: 2px; white-space: nowrap;
}
/* Once the header shrinks on scroll there is no room for it. */
.site-header.scrolled .brand-slogan { display: none; }
.site-footer .brand-slogan { color: var(--gold); opacity: .8; }
.main-nav { display: flex; gap: 4px; margin-left: auto; }
.main-nav a {
  padding: 8px 14px; border-radius: 8px; font-size: .92rem; font-weight: 500;
  color: var(--muted); position: relative; transition: color .25s;
}
.main-nav a::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--pink));
  transform: scaleX(0); transform-origin: left; transition: transform .3s;
  border-radius: 2px;
}
.main-nav a:hover, .main-nav a.active { color: #fff; }
.main-nav a:hover::after, .main-nav a.active::after { transform: scaleX(1); }
.header-actions { display: flex; align-items: center; gap: 12px; }

/* The header is one row, always. Nothing in it may wrap to a second line - when
   space gets tight the spacing tightens instead. Eight menu items plus the logo
   and the portal button is a lot to fit, and a header that reflows as you scroll
   looks broken. */
.header-inner { flex-wrap: nowrap; }
.brand { flex: 0 0 auto; }
.brand-name { white-space: nowrap; }
.main-nav a, .header-actions .btn { white-space: nowrap; }

@media (min-width: 861px) and (max-width: 1320px) {
  .header-inner { gap: 14px; }
  .main-nav { gap: 0; }
  .main-nav a { padding: 8px 9px; font-size: .84rem; }
  .main-nav a::after { left: 9px; right: 9px; }
  .brand-logo, .site-header.scrolled .brand-logo { width: 56px; height: 56px; }
  .brand-name { font-size: .92rem; }
  .header-actions .btn { padding: 8px 12px; font-size: .78rem; }
}
@media (min-width: 861px) and (max-width: 1080px) {
  .main-nav a { padding: 8px 7px; font-size: .79rem; }
  .main-nav a::after { left: 7px; right: 7px; }
  /* The logo on its own still says who we are, and it buys 150px. */
  .brand-name, .brand-slogan { display: none; }
}

/* ---------- Dropdown menus ---------- */
.nav-item { position: relative; }
.nav-item > a { display: inline-flex; align-items: center; gap: 5px; }
.caret { font-size: .7em; transition: transform .3s; display: inline-block; }
.nav-item:hover > a .caret, .nav-item:focus-within > a .caret, .nav-item.open > a .caret { transform: rotate(180deg); }
.drop-panel {
  position: absolute; top: calc(100% + 12px); left: 50%;
  transform: translateX(-50%) translateY(12px);
  width: 560px; max-width: calc(100vw - 32px);
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  background: rgba(26,12,51,.97); backdrop-filter: blur(14px);
  border: 1px solid var(--border); border-radius: 16px; padding: 14px;
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.drop-panel::before {
  content: ''; position: absolute; top: -7px; left: 50%; transform: translateX(-50%) rotate(45deg);
  width: 14px; height: 14px; background: rgba(26,12,51,.97);
  border-left: 1px solid var(--border); border-top: 1px solid var(--border);
}
.drop-panel::after { /* invisible hover bridge */
  content: ''; position: absolute; top: -14px; left: 0; right: 0; height: 14px;
}
.nav-item:hover .drop-panel, .nav-item:focus-within .drop-panel, .nav-item.open .drop-panel {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.drop-link {
  display: flex !important; align-items: center; gap: 12px;
  padding: 11px 12px !important; border-radius: 12px;
  transition: background .2s, transform .2s;
  min-width: 0;
  /* A hard boundary. Whatever the text does inside, it cannot be drawn outside
     the card and over the item next to it. Belt and braces on top of the
     wrapping rules below - those explain why it should not happen; this makes
     it impossible. */
  overflow: hidden;
}
.drop-link::after { display: none !important; }
.drop-link:hover { background: rgba(255,255,255,.06); transform: translateX(4px); }

/* A flex item defaults to min-width:auto, which means it refuses to shrink
   below the width of its own text - so a long tagline pushes straight out of
   the panel instead of wrapping. This one line is the fix. */
.drop-link > span:last-child { min-width: 0; flex: 1 1 auto; }

.drop-link strong {
  display: block; font-size: .88rem; color: #fff; font-weight: 600; line-height: 1.25;
  overflow-wrap: anywhere;
}
.drop-link small {
  display: block; font-size: .74rem; color: var(--muted); line-height: 1.3;
  /* One tidy line, trimmed with an ellipsis if the product's tagline is long.
     A menu is a signpost - three wrapped lines under a menu item is worse than
     a few missing words, and the full text is on the page it links to. */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.drop-icon {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center; color: #fff;
  transition: transform .25s;
}
.drop-link:hover .drop-icon { transform: scale(1.12) rotate(-4deg); }
.di-blue   { background: linear-gradient(135deg, #29b6f6, #1565c0); }
.di-gold   { background: linear-gradient(135deg, #ffc21a, #f7971e); color: #241442; }
.di-pink   { background: linear-gradient(135deg, #ff2d78, #c2185b); }
.di-green  { background: linear-gradient(135deg, #2ecc71, #14855f); }
.di-purple { background: linear-gradient(135deg, #a78bfa, #6337d8); }
.di-cyan   { background: linear-gradient(135deg, #26e0d8, #0e9aa7); }
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; flex-direction: column; gap: 5px; padding: 6px; }
.nav-toggle span { width: 24px; height: 2px; background: #fff; border-radius: 2px; transition: .3s; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 28px; border-radius: 10px; font-weight: 600; font-size: .95rem;
  font-family: var(--font); cursor: pointer; border: 0;
  transition: transform .25s, box-shadow .25s, background .25s;
  position: relative; overflow: hidden;
}
.btn-sm { padding: 9px 18px; font-size: .85rem; }
.btn-gold { background: var(--gold); color: #241442; box-shadow: 0 10px 26px rgba(255,194,26,.35); }
.btn-gold:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(255,194,26,.5); }
.btn-pink { background: linear-gradient(135deg, var(--pink), #ff5e3a); color: #fff; box-shadow: 0 10px 26px rgba(255,45,120,.4); }
.btn-pink:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(255,45,120,.55); }
.btn-outline { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.35); }
.btn-outline:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-2px); }
.btn::before {
  content: ''; position: absolute; top: 0; left: -80%; width: 50%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-20deg);
}
.btn:hover::before { animation: btnShine .8s; }
@keyframes btnShine { to { left: 130%; } }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  padding: 150px 0 60px;
  background: linear-gradient(115deg, var(--grad-1) 0%, var(--grad-2) 52%, var(--grad-3) 100%);
  background-size: 200% 200%;
  animation: gradShift 14s ease infinite;
}
@keyframes gradShift {
  0%,100% { background-position: 0% 50%; }
  50%     { background-position: 100% 50%; }
}
.hero-inner { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center; position: relative; z-index: 3; }
.hero-label {
  display: inline-block; color: var(--gold); font-weight: 600; letter-spacing: .5px;
  text-transform: uppercase; font-size: .85rem; margin-bottom: 14px;
}
.hero h1 {
  font-size: clamp(2.2rem, 4.6vw, 3.6rem); font-weight: 800; line-height: 1.15;
  margin-bottom: 26px; color: #fff;
}
.hero h1 .hl { color: var(--gold); text-shadow: 0 0 30px rgba(255,194,26,.5); }
.hero-sub { color: rgba(255,255,255,.85); max-width: 520px; margin-bottom: 28px; font-size: 1.05rem; }

/* Countdown */
.countdown { display: flex; gap: 12px; margin: 26px 0 30px; }
.count-box {
  background: #fff; color: #1e1038; border-radius: 10px; text-align: center;
  padding: 10px 0; width: 74px; box-shadow: 0 10px 24px rgba(0,0,0,.25);
  animation: countPop 3s ease-in-out infinite;
}
.count-box:nth-child(2) { animation-delay: .2s; }
.count-box:nth-child(3) { animation-delay: .4s; }
.count-box:nth-child(4) { animation-delay: .6s; }
@keyframes countPop { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.count-num { font-size: 1.5rem; font-weight: 800; line-height: 1.1; }
.count-label { font-size: .72rem; font-weight: 600; color: #7c6ba8; text-transform: uppercase; }

/* Flash-sale starburst */
.flash-wrap { display: flex; justify-content: center; position: relative; }
.flash-burst {
  position: relative; width: min(360px, 80%); aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
}
.flash-rays {
  position: absolute; inset: -12%;
  background:
    repeating-conic-gradient(from 0deg, rgba(255,255,255,.55) 0deg 3deg, transparent 3deg 18deg);
  border-radius: 50%;
  -webkit-mask: radial-gradient(circle, transparent 38%, #000 39%, #000 62%, transparent 63%);
          mask: radial-gradient(circle, transparent 38%, #000 39%, #000 62%, transparent 63%);
  animation: spin 26s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.flash-badge {
  background: var(--gold); border-radius: 42% 58% 55% 45% / 48% 45% 55% 52%;
  width: 78%; aspect-ratio: 1.05; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; gap: 6px;
  box-shadow: 0 24px 60px rgba(0,0,0,.35), inset 0 0 0 6px rgba(255,255,255,.6);
  animation: blob 9s ease-in-out infinite, floatY 5s ease-in-out infinite;
  padding: 20px;
}
@keyframes blob {
  0%,100% { border-radius: 42% 58% 55% 45% / 48% 45% 55% 52%; }
  50%     { border-radius: 55% 45% 42% 58% / 52% 55% 45% 48%; }
}
@keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
.flash-badge .fb-man {
  width: 86px; height: auto;
  margin: 0 0 4px;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.2));
  animation: cheer 1.8s ease-in-out infinite;
  transform-origin: 50% 90%;
}
@keyframes cheer {
  0%, 100% { transform: rotate(-3deg); }
  50%      { transform: rotate(3deg) translateY(-4px); }
}
.flash-badge .fb-top { font-size: .85rem; font-weight: 600; color: #241442; }
.flash-badge .fb-main {
  font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 900; font-style: italic;
  color: #fff; line-height: 1;
  text-shadow: 3px 3px 0 #6337d8, -1px -1px 0 #6337d8, 1px -1px 0 #6337d8, -1px 1px 0 #6337d8;
  letter-spacing: 1px;
}

/* Confetti particles (JS generated) */
.confetti { position: absolute; inset: 0; overflow: hidden; z-index: 1; pointer-events: none; }
.confetti i {
  position: absolute; display: block; opacity: .85;
  animation: confettiFloat linear infinite;
}
.confetti i.c-tri { width: 0; height: 0; background: none !important; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 14px solid currentColor; }
.confetti i.c-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.confetti i.c-ring { width: 12px; height: 12px; border-radius: 50%; border: 3px solid currentColor; background: none !important; }
.confetti i.c-plus { width: 14px; height: 14px; background: none !important; }
.confetti i.c-plus::before, .confetti i.c-plus::after { content: ''; position: absolute; background: currentColor; }
.confetti i.c-plus::before { left: 50%; top: 0; width: 3px; height: 100%; transform: translateX(-50%); }
.confetti i.c-plus::after { top: 50%; left: 0; height: 3px; width: 100%; transform: translateY(-50%); }
.confetti i.c-zig { width: 18px; height: 8px; background: none !important; border-bottom: 3px solid currentColor; border-radius: 0 0 50% 50%; }
@keyframes confettiFloat {
  0%   { transform: translateY(110vh) rotate(0deg); }
  100% { transform: translateY(-10vh) rotate(720deg); }
}

/* Deal cards strip */
.deal-strip { position: relative; z-index: 3; margin-top: 40px; }
.deal-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.deal-card {
  border-radius: 8px; padding: 20px 18px; color: #12082a; position: relative;
  transition: transform .3s, box-shadow .3s; box-shadow: 0 12px 30px rgba(0,0,0,.22);
}
.deal-card:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 22px 44px rgba(0,0,0,.35); }
.deal-card .off {
  position: absolute; top: -10px; right: 12px; background: var(--pink); color: #fff;
  font-weight: 800; font-size: .8rem; text-align: center; line-height: 1.1;
  padding: 8px 10px; border-radius: 4px; box-shadow: 0 6px 14px rgba(0,0,0,.3);
  animation: wobble 2.6s ease-in-out infinite;
}
@keyframes wobble { 0%,100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
.deal-card h3 { font-size: 1rem; font-weight: 700; }
.deal-card .was { font-size: .8rem; text-decoration: line-through; opacity: .65; }
.deal-card .now { font-size: 1.25rem; font-weight: 800; }
.deal-card .now small { font-size: .75rem; font-weight: 600; }
.dc-blue   { background: var(--blue); }
.dc-gold   { background: var(--gold); }
.dc-cyan   { background: #26e0d8; }
.dc-green  { background: var(--green); }

/* ---------- Generic sections ---------- */
section { position: relative; }
.section { padding: 90px 0; }
.section-alt { background: var(--bg-panel); }
.section-head { text-align: center; max-width: 640px; margin: 0 auto 54px; }
.section-head .kicker {
  color: var(--gold); text-transform: uppercase; letter-spacing: 2px;
  font-size: .8rem; font-weight: 700;
}
.section-head h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); font-weight: 800; margin: 8px 0 12px; }
.section-head p { color: var(--muted); }
.grad-text {
  background: linear-gradient(90deg, var(--gold), var(--pink), var(--purple), var(--gold));
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: gradTextMove 6s linear infinite;
}
@keyframes gradTextMove { to { background-position: 300% 0; } }

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .1s; }
.reveal[data-delay="2"] { transition-delay: .2s; }
.reveal[data-delay="3"] { transition-delay: .3s; }
.reveal[data-delay="4"] { transition-delay: .4s; }

/* ---------- Domain search ---------- */
.domain-search { max-width: 700px; margin: 0 auto; }
.ds-form { display: flex; box-shadow: var(--shadow); border-radius: 10px; overflow: hidden; }
.ds-form input {
  flex: 1; padding: 17px 20px; border: 0; outline: none; font-family: var(--font);
  font-size: 1rem; background: var(--bg-card-2); color: #fff;
}
.ds-form input::placeholder { color: var(--muted); }
.ds-form button { border-radius: 0; }
.ds-result { margin-top: 18px; text-align: center; min-height: 28px; font-weight: 600; }
.ds-result .ok { color: var(--green); }
.ds-result .no { color: var(--pink); }
.tld-strip { display: flex; justify-content: center; gap: 26px; flex-wrap: wrap; margin-top: 22px; font-size: .95rem; }
.tld-strip b { font-weight: 800; }
.tld-strip span { color: var(--muted); font-size: .85rem; }
.tld-com b { color: var(--pink); } .tld-coza b { color: var(--gold); }
.tld-net b { color: var(--blue); } .tld-org b { color: var(--green); }
.tld-africa b { color: var(--purple); }

/* ---------- Pricing cards ---------- */
.plans-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 22px; }
.plan-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 34px 28px; position: relative; overflow: hidden;
  transition: transform .35s, box-shadow .35s, border-color .35s;
}
.plan-card::before {
  content: ''; position: absolute; inset: -1px; border-radius: var(--radius); padding: 1px;
  background: linear-gradient(140deg, var(--gold), transparent 30%, transparent 70%, var(--pink));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .35s;
}
.plan-card:hover { transform: translateY(-10px); box-shadow: var(--shadow); }
.plan-card:hover::before { opacity: 1; }
.plan-icon {
  width: 58px; height: 58px; border-radius: 14px; display: flex; align-items: center;
  justify-content: center; margin-bottom: 18px;
  animation: floatY 4.5s ease-in-out infinite;
}
.pi-gold  { background: rgba(255,194,26,.14); color: var(--gold); }
.pi-pink  { background: rgba(255,45,120,.14); color: var(--pink); }
.pi-blue  { background: rgba(41,182,246,.14); color: var(--blue); }
.pi-green { background: rgba(46,204,113,.14); color: var(--green); }
.plan-card h3 { font-size: 1.15rem; margin-bottom: 4px; }
.plan-tagline { color: var(--muted); font-size: .85rem; margin-bottom: 18px; }
.plan-price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.plan-price .amount { font-size: 2.1rem; font-weight: 800; color: var(--gold); }
.plan-price .cycle { color: var(--muted); font-size: .85rem; }
.plan-price .was { color: var(--muted); text-decoration: line-through; font-size: .9rem; }
.plan-save { color: var(--pink); font-size: .8rem; font-weight: 600; margin-bottom: 18px; }
.plan-features { list-style: none; margin: 18px 0 24px; }
.plan-features li {
  padding: 7px 0; font-size: .88rem; color: var(--muted);
  display: flex; gap: 10px; align-items: center;
}
.plan-features li svg { color: var(--green); flex: 0 0 auto; }
.plan-card .btn { width: 100%; }

/* ---------- Features ---------- */
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; }
.feature-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 30px 26px; transition: transform .3s, border-color .3s, box-shadow .3s;
}
.feature-card:hover { transform: translateY(-6px); border-color: rgba(255,194,26,.4); box-shadow: var(--shadow); }
.feature-card .plan-icon { margin-bottom: 14px; }
.feature-card h3 { font-size: 1.05rem; margin-bottom: 8px; }
.feature-card p { color: var(--muted); font-size: .88rem; }

/* ---------- Stats ---------- */
.stats-band {
  background: linear-gradient(115deg, var(--grad-1), var(--grad-2), var(--grad-3));
  background-size: 200% 200%; animation: gradShift 12s ease infinite;
  padding: 60px 0;
}
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 24px; text-align: center; }
.stat h3 { font-size: 2.4rem; font-weight: 800; }
.stat p { color: rgba(255,255,255,.85); font-weight: 500; }

/* ---------- Marquee ---------- */
.marquee { overflow: hidden; padding: 22px 0; background: var(--bg-panel); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.marquee-track { display: flex; gap: 60px; width: max-content; animation: marquee 28s linear infinite; }
.marquee-track span { display: flex; align-items: center; gap: 12px; color: var(--muted); font-weight: 600; white-space: nowrap; }
.marquee-track span svg { color: var(--gold); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Steps ---------- */
.steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 22px; counter-reset: step; }
.step-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 30px 26px; position: relative; }
.step-card::before {
  counter-increment: step; content: '0' counter(step);
  position: absolute; top: 18px; right: 22px; font-size: 2.2rem; font-weight: 900;
  color: rgba(255,255,255,.06);
}
.step-card h3 { margin: 12px 0 8px; font-size: 1.05rem; }
.step-card p { color: var(--muted); font-size: .88rem; }

/* ---------- CTA ---------- */
.cta-panel {
  background: linear-gradient(115deg, var(--grad-1), var(--grad-2) 60%, var(--grad-3));
  background-size: 200% 200%; animation: gradShift 12s ease infinite;
  border-radius: 22px; padding: 60px 40px; text-align: center; position: relative; overflow: hidden;
}
.cta-panel h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 800; margin-bottom: 12px; }
.cta-panel p { color: rgba(255,255,255,.85); margin-bottom: 26px; }

/* ---------- Page hero (inner pages) ---------- */
.page-hero {
  padding: 150px 0 70px; text-align: center; position: relative; overflow: hidden;
  background: linear-gradient(115deg, var(--grad-1), var(--grad-2), var(--grad-3));
  background-size: 200% 200%; animation: gradShift 14s ease infinite;
}
.page-hero h1 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; position: relative; z-index: 2; }
.page-hero p { color: rgba(255,255,255,.85); max-width: 560px; margin: 12px auto 0; position: relative; z-index: 2; }

/* ---------- Forms ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-grid .full { grid-column: 1 / -1; }
.field label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: 7px; color: var(--muted); }
.field input, .field textarea, .field select {
  width: 100%; padding: 13px 16px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--bg-card-2); color: #fff; font-family: var(--font); font-size: .95rem;
  outline: none; transition: border-color .25s, box-shadow .25s;
}
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--gold); box-shadow: 0 0 0 3px rgba(255,194,26,.15);
}
.alert { padding: 14px 18px; border-radius: 10px; margin-bottom: 20px; font-size: .92rem; }
.alert-ok { background: rgba(46,204,113,.12); border: 1px solid rgba(46,204,113,.4); color: #7dedb0; }
.alert-err { background: rgba(255,45,120,.1); border: 1px solid rgba(255,45,120,.4); color: #ff8fb4; }

/* ---------- Legal pages ---------- */
.legal-doc { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 40px; }
.legal-doc h2 { font-size: 1.1rem; margin: 28px 0 10px; color: var(--gold); }
.legal-doc h2:first-of-type { margin-top: 10px; }
.legal-doc p { color: var(--muted); font-size: .92rem; margin-bottom: 12px; }
.legal-doc a { color: var(--gold); }
.legal-doc strong { color: var(--text); }

/* ---------- Footer ---------- */
.site-footer { background: #100622; padding: 70px 0 30px; position: relative; overflow: hidden; }
.footer-glow {
  position: absolute; top: -120px; left: 50%; transform: translateX(-50%);
  width: 700px; height: 240px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(123,47,247,.25), transparent 70%);
}
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1.2fr; gap: 34px; position: relative; }
.footer-col h4 { margin-bottom: 16px; font-size: 1rem; }
.footer-col a { display: block; color: var(--muted); font-size: .9rem; padding: 5px 0; transition: color .2s, transform .2s; }
.footer-col a:hover { color: var(--gold); transform: translateX(4px); }
.footer-brand p { color: var(--muted); font-size: .9rem; margin-top: 16px; }
.footer-badges { line-height: 2.1; }
.badge-bbee {
  display: inline-block; background: rgba(255,194,26,.14); border: 1px solid rgba(255,194,26,.45);
  color: var(--gold); font-weight: 700; font-size: .82rem; padding: 4px 14px; border-radius: 20px;
}
.badge-proudly { color: var(--text); font-weight: 600; font-size: .88rem; display: inline-flex; align-items: center; gap: 8px; }
.za-flag { border-radius: 2px; box-shadow: 0 1px 4px rgba(0,0,0,.4); flex: 0 0 auto; }
.footer-note { font-size: .8rem !important; }
.footer-note a { display: inline !important; padding: 0 !important; color: var(--gold) !important; }
.footer-bottom {
  border-top: 1px solid var(--border); margin-top: 50px; padding-top: 24px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  color: var(--muted); font-size: .85rem; position: relative;
}

/* ---------- Responsive ---------- */
@media (max-width: 992px) {
  .hero-inner { grid-template-columns: 1fr; text-align: center; }
  .hero-sub { margin-inline: auto; }
  .countdown { justify-content: center; }
  .flash-wrap { margin-top: 30px; }
  .deal-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .main-nav {
    position: fixed; top: 0; right: -290px; width: 280px; height: 100vh;
    background: #1a0c33; flex-direction: column; padding: 100px 26px 26px;
    transition: right .35s; box-shadow: -20px 0 50px rgba(0,0,0,.4); gap: 8px;
  }
  .main-nav.open { right: 0; }
  .nav-toggle { display: flex; z-index: 101; }
  /* dropdowns become inline accordions on mobile */
  .nav-item { width: 100%; }
  .nav-item > a { width: 100%; justify-content: space-between; }
  .drop-panel {
    position: static; transform: none; width: 100%; grid-template-columns: 1fr;
    box-shadow: none; border: 0; background: rgba(255,255,255,.03);
    display: none; opacity: 1; visibility: visible; pointer-events: auto;
    padding: 6px; margin-top: 4px;
  }
  .drop-panel::before, .drop-panel::after { display: none; }
  .nav-item:hover .drop-panel, .nav-item:focus-within .drop-panel { display: none; transform: none; }
  .nav-item.open .drop-panel { display: grid; }
  .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2) { opacity: 0; }
  .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}
@media (max-width: 620px) {
  .deal-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .count-box { width: 62px; }
  .ds-form { flex-direction: column; }
  .ds-form button { padding: 14px; }
  .footer-grid { grid-template-columns: 1fr; }
  /* mobile polish */
  .brand-logo, .site-header.scrolled .brand-logo { width: 52px; height: 52px; }
  .brand-name { font-size: .95rem; }
  .hero { padding: 120px 0 50px; }
  .page-hero { padding: 120px 0 50px; }
  .section { padding: 56px 0; }
  .hero h1 { font-size: 2rem; }
  .hero .btn { width: 100%; margin: 6px 0 0 !important; }
  .flash-burst { width: min(280px, 86%); }
  .tld-strip { gap: 14px; font-size: .85rem; }
  .cta-panel { padding: 40px 22px; }
  .cta-panel .btn { width: 100%; margin: 6px 0 0 !important; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .legal-doc { padding: 24px 18px; }
  .marquee-track { gap: 34px; }
}

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

/* ===== Web Design featured package card ===== */
.plan-card.plan-featured {
  border-color: var(--gold);
  box-shadow: 0 10px 40px rgba(255, 194, 26, .15);
  transform: scale(1.03);
}
.plan-card.plan-featured:hover { transform: scale(1.05) translateY(-4px); }

/* ===== Order / request popups (public site) ===== */
.site-modal-overlay {
  position: fixed; inset: 0; background: rgba(10, 5, 30, .78); backdrop-filter: blur(6px);
  display: none; align-items: flex-start; justify-content: center; z-index: 2000;
  padding: 40px 16px; overflow-y: auto;
}
.site-modal-overlay.open { display: flex; }
.site-modal {
  background: #17102e; border: 1px solid rgba(255,255,255,.12); border-radius: 18px;
  padding: 28px 30px; width: 100%; max-width: 680px; position: relative;
  box-shadow: 0 30px 80px rgba(0,0,0,.5); animation: modalIn .25s ease;
}
@keyframes modalIn { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
.site-modal-x {
  position: absolute; top: 14px; right: 16px; background: none; border: 0;
  color: #b6a9d6; font-size: 20px; cursor: pointer; padding: 6px; border-radius: 8px;
}
.site-modal-x:hover { color: #fff; }
.site-modal .form-grid { position: relative; }
.site-modal input[type="file"] { color: #b6a9d6; font-size: .85rem; }

/* Add-on tick boxes */
.addon-ticks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.addon-tick {
  display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.12); border-radius: 10px; cursor: pointer;
  font-size: .82rem; transition: border-color .15s, background .15s;
}
.addon-tick:hover { border-color: var(--gold); }
.addon-tick input { margin-top: 3px; accent-color: var(--gold); }
.addon-tick em { color: var(--gold); font-style: normal; font-weight: 600; display: block; }
.addon-tick:has(input:checked) { border-color: var(--gold); background: rgba(255,194,26,.08); }

/* Colour palette picker */
.palette-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.pal-card {
  display: flex; flex-direction: column; gap: 8px; align-items: center; padding: 12px 8px;
  border: 1px solid rgba(255,255,255,.12); border-radius: 12px; cursor: pointer;
  transition: border-color .15s, background .15s; text-align: center;
}
.pal-card:hover { border-color: var(--gold); }
.pal-card input { position: absolute; opacity: 0; }
.pal-card:has(input:checked) { border-color: var(--gold); background: rgba(255,194,26,.1); box-shadow: 0 0 0 1px var(--gold); }
.pal-dots { display: flex; gap: 5px; }
.pal-dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(255,255,255,.25); display: inline-block; }
.pal-name { font-size: .74rem; color: #d9d0f0; font-weight: 600; }

/* Working-days note */
.order-note {
  background: rgba(255,194,26,.1); border-left: 4px solid var(--gold);
  padding: 12px 16px; border-radius: 8px; font-size: .82rem; color: #efe8ff;
}
@media (max-width: 560px) { .addon-ticks { grid-template-columns: 1fr; } .site-modal { padding: 22px 16px; } }