/* ============================================================
   IPTV NAZ — MERGED GLOBAL STYLESHEET (style.css)
   Base design tokens, global header, mobile nav, footer,
   buttons, animations, plus every page & section style.
   Single source of truth for the whole site.
   ============================================================ */

/* ========================================================
   [BASE + HOME] tokens, header, nav, footer, home sections
   ======================================================== */
/* ============================================================
   DIGIWAVE IPTV — DESIGN TOKENS
   Edit brand colors and sizing from this single block.
   ============================================================ */
:root{
  --purple-deep:  #2B0A4E;                  /* header base */
  --purple-edge:  #3C1168;                  /* header gradient top */
  --bg:           #0b0b12;                  /* hero background (per spec) */
  --red:          #FF3B4E;                  /* active link, separators, primary CTA */
  --red-soft:     rgba(255, 59, 78, 0.45);  /* CTA glow */
  --magenta:      #C02485;                  /* CTA gradient end */
  --violet-glow:  rgba(124, 58, 237, 0.30); /* ambient glow 1 */
  --magenta-glow: rgba(217, 70, 160, 0.16); /* ambient glow 2 */
  --text:         #F4F1FA;
  --muted:        #A39DBA;
  --line:         rgba(255,255,255,0.09);
  --surface:      rgba(255,255,255,0.05);
  --header-h:     76px;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  background: var(--bg);
  color: var(--text);
  font-family:'Inter', system-ui, sans-serif;
  overflow-x:hidden;
}

/* ============================================================
   1. HEADER — deep purple, terminal-inspired red separators
   ============================================================ */
.dw-header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:100;
  height:var(--header-h);
  display:flex;
  align-items:center;
  background: rgba(11, 11, 18, 0.85);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(255,255,255,0.06);
  transition:background .35s ease, border-color .35s ease, box-shadow .35s ease;
}
/* on scroll: the bottom border glows deep purple */
.dw-header.scrolled{
  background:rgba(11, 11, 18, 0.92);
  border-bottom-color:rgba(124,58,237,0.5);
  box-shadow:0 6px 28px rgba(0,0,0,0.5), 0 1px 20px rgba(124,58,237,0.28);
}
.dw-container{
  width:100%;
  max-width:1280px;
  margin:0 auto;
  padding:0 28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

/* Logo */
.dw-logo{ display:flex; align-items:center; gap:12px; text-decoration:none; flex-shrink:0; }
.dw-logo-mark{
  width:40px; height:40px;
  border-radius:12px;
  background:rgba(255,255,255,0.07);
  border:1px solid rgba(255,255,255,0.18);
  display:grid;
  place-items:center;
}
.dw-wordmark{
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  font-size:1.25rem;
  letter-spacing:0.02em;
  color:#fff;
  line-height:1;
}
.dw-wordmark em{ font-style:normal; color:var(--red); }
.dw-tagline{
  display:block;
  font-size:0.6rem;
  font-weight:600;
  letter-spacing:0.34em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.55);
  margin-top:3px;
}

/* Nav — white links, red active, red separator "ticks" between items */
.dw-nav{ display:flex; align-items:center; margin:0 auto; }
.dw-nav a{
  position:relative;
  display:block;
  padding:10px 20px;
  font-size:0.94rem;
  font-weight:500;
  color:#fff;
  text-decoration:none;
  white-space:nowrap;
  transition:color .2s ease;
}
/* terminal-style short dashed vertical separator */
.dw-nav a + a::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  height:16px;
  width:0;
  border-left:2px dashed var(--red);
  opacity:0.9;
}
.dw-nav a:hover{ color:var(--red); }
.dw-nav a:focus-visible{ outline:2px solid var(--red); outline-offset:2px; border-radius:6px; }
.dw-nav a.active{ color:var(--red); font-weight:600; }

/* Header pricing button */
.dw-header-cta{
  flex-shrink:0;
  padding:11px 22px;
  font-size:0.9rem;
  font-weight:600;
  color:#fff;
  text-decoration:none;
  border-radius:11px;
  background:linear-gradient(135deg, var(--red), var(--magenta));
  box-shadow:0 4px 18px rgba(255,59,78,0.35);
  transition:transform .2s ease, box-shadow .2s ease;
}
.dw-header-cta:hover{
  transform:translateY(-1px);
  box-shadow:0 7px 26px rgba(255,59,78,0.45);
}
.dw-header-cta:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

/* Mobile burger + menu */
.dw-burger{
  display:none;
  width:44px; height:44px;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.2);
  border-radius:12px;
  cursor:pointer;
  place-items:center;
  flex-direction:column;
  gap:5px;
  padding:0;
}
.dw-burger span{
  display:block;
  width:18px; height:2px;
  border-radius:2px;
  background:#fff;
  transition:transform .25s ease, opacity .25s ease;
}
.dw-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.dw-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.dw-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.dw-mobile-menu{
  display:none;
  position:fixed;
  top:var(--header-h);
  left:0; right:0;
  z-index:99;
  background:rgba(11, 11, 18, 0.97);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);
  padding:10px 28px 24px;
}
.dw-mobile-menu.open{ display:block; }
.dw-mobile-menu a{
  display:block;
  padding:15px 6px;
  color:#fff;
  text-decoration:none;
  font-size:1.02rem;
  font-weight:500;
  border-bottom:1px dashed rgba(255,59,78,0.5);
}
.dw-mobile-menu a.active{ color:var(--red); font-weight:600; }
.dw-mobile-menu a:last-child{ border-bottom:none; }

@media (max-width: 960px){
  .dw-nav, .dw-header-cta{ display:none; }
  .dw-burger{ display:grid; }
}

/* ============================================================
   2. HERO — asymmetrical 60/40 split
   ============================================================ */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  padding: calc(var(--header-h) + 56px) 28px 88px;
  overflow:hidden;
}

/* --- Ambient background layer (swap freely: image / video / canvas) --- */
.hero-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.hero-bg .glow{ position:absolute; border-radius:50%; filter:blur(100px); }
.hero-bg .glow-1{ width:620px; height:620px; top:-240px; left:-140px; background:var(--violet-glow); }
.hero-bg .glow-2{ width:520px; height:520px; bottom:-200px; right:-80px;  background:var(--magenta-glow); }
.hero-bg .glow-3{ width:340px; height:340px; top:30%; right:22%; background:rgba(255,59,78,0.08); }
/* faint grid, fading at edges */
.hero-bg .grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image: radial-gradient(ellipse 75% 65% at 45% 40%, black 25%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 75% 65% at 45% 40%, black 25%, transparent 75%);
}

/* --- Split grid: 60% copy / 40% visual --- */
.hero-inner{
  position:relative;
  z-index:1;
  width:100%;
  max-width:1280px;
  margin:0 auto;
  display:grid;
  grid-template-columns: 60fr 40fr;
  gap:56px;
  align-items:center;
}

/* ----- LEFT: copy ----- */
.hero-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:7px 18px;
  border:1px solid rgba(255,59,78,0.35);
  border-radius:100px;
  background:rgba(255,59,78,0.08);
  font-size:0.74rem;
  font-weight:600;
  letter-spacing:0.17em;
  text-transform:uppercase;
  color:#FF8A96;
  margin-bottom:26px;
}
.hero-eyebrow .dot{
  width:7px; height:7px;
  border-radius:50%;
  background:var(--red);
  box-shadow:0 0 10px var(--red);
  animation:pulse 2.2s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ opacity:1; transform:scale(1); }
  50%{ opacity:0.5; transform:scale(0.8); }
}

.hero h1{
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  font-size:clamp(2.2rem, 4.2vw, 3.6rem);
  line-height:1.1;
  letter-spacing:-0.015em;
  margin-bottom:22px;
}
.hero h1 .accent{
  background:linear-gradient(95deg, #FF3B4E 10%, #B76CFF 90%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.hero .sub{
  font-size:1.05rem;
  line-height:1.75;
  color:var(--muted);
  margin-bottom:26px;
  max-width:600px;
}
.hero .sub strong{ color:var(--text); font-weight:600; }

/* Feature bullets — semantic ul/li with red check badges */
.hero-features{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-bottom:34px;
}
.hero-features li{
  display:flex;
  align-items:center;
  gap:11px;
  font-size:0.95rem;
  font-weight:500;
  color:var(--text);
}
.hero-features li::before{
  content:"✓";
  display:grid;
  place-items:center;
  width:21px; height:21px;
  border-radius:50%;
  font-size:0.72rem;
  font-weight:700;
  color:#fff;
  background:linear-gradient(135deg, var(--red), var(--magenta));
  box-shadow:0 2px 10px rgba(255,59,78,0.35);
  flex-shrink:0;
}

/* CTAs — soft glow + lift on hover per spec */
.hero-ctas{
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:26px;
}
.btn{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:15px 30px;
  font-family:'Inter', sans-serif;
  font-size:1rem;
  font-weight:600;
  text-decoration:none;
  border-radius:13px;
  transition:transform .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease;
}
.btn-primary{
  color:#fff;
  background:linear-gradient(135deg, var(--red), var(--magenta));
  box-shadow:0 6px 26px var(--red-soft);
}
.btn-primary:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 40px var(--red-soft), 0 0 24px rgba(255,59,78,0.30);
}
.btn-outline{
  color:var(--text);
  background:transparent;
  border:1px solid rgba(255,255,255,0.22);
}
.btn-outline:hover{
  transform:translateY(-3px);
  border-color:rgba(255,255,255,0.5);
  background:var(--surface);
  box-shadow:0 10px 30px rgba(124,58,237,0.18);
}
.btn:focus-visible{ outline:2px solid var(--red); outline-offset:3px; }

/* Micro-copy trust line */
.hero-trust{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  font-size:0.84rem;
  font-weight:500;
  color:var(--muted);
  letter-spacing:0.02em;
}
.hero-trust .sep{ color:var(--red); }

/* ----- RIGHT: abstract dashboard visual (pure CSS placeholder) -----
   To replace with your own 3D render or product screenshot:
   delete .dw-visual's inner markup and drop an <img> or <video>
   inside .visual-frame — the frame, glow, and tilt will still apply. */
.dw-visual{ position:relative; }
.visual-frame{
  position:relative;
  border-radius:22px;
  background:linear-gradient(160deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
  border:1px solid rgba(255,255,255,0.12);
  box-shadow:
    0 30px 80px rgba(0,0,0,0.55),
    0 0 60px rgba(124,58,237,0.15);
  padding:22px;
  transform:perspective(1200px) rotateY(-6deg) rotateX(2deg);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
/* glowing edge accent */
.visual-frame::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:22px;
  padding:1px;
  background:linear-gradient(140deg, rgba(255,59,78,0.5), transparent 35%, transparent 65%, rgba(124,58,237,0.5));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
}

/* Mock dashboard: status bar */
.vis-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:16px;
}
.vis-dots{ display:flex; gap:6px; }
.vis-dots i{
  width:9px; height:9px;
  border-radius:50%;
  background:rgba(255,255,255,0.18);
}
.vis-dots i:first-child{ background:var(--red); }
.vis-live{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:0.68rem;
  font-weight:700;
  letter-spacing:0.14em;
  color:#FF8A96;
}
.vis-live::before{
  content:"";
  width:7px; height:7px;
  border-radius:50%;
  background:var(--red);
  box-shadow:0 0 8px var(--red);
  animation:pulse 1.8s ease-in-out infinite;
}

/* Mock player window with animated signal wave */
.vis-player{
  position:relative;
  border-radius:14px;
  background:linear-gradient(150deg, #191225, #0d0a16);
  border:1px solid rgba(255,255,255,0.08);
  height:170px;
  overflow:hidden;
  margin-bottom:16px;
}
.vis-player svg{
  position:absolute;
  inset:0;
  width:100%; height:100%;
}
.vis-badge-4k{
  position:absolute;
  top:12px; right:12px;
  padding:4px 10px;
  border-radius:7px;
  background:rgba(255,59,78,0.15);
  border:1px solid rgba(255,59,78,0.4);
  color:#FF8A96;
  font-size:0.66rem;
  font-weight:700;
  letter-spacing:0.12em;
}

/* Mock stat tiles */
.vis-stats{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:12px;
  margin-bottom:16px;
}
.vis-stat{
  border-radius:12px;
  background:rgba(255,255,255,0.045);
  border:1px solid rgba(255,255,255,0.08);
  padding:12px 10px;
  text-align:center;
}
.vis-stat b{
  display:block;
  font-family:'Space Grotesk', sans-serif;
  font-size:1.05rem;
  font-weight:700;
  color:var(--text);
  margin-bottom:3px;
}
.vis-stat span{
  font-size:0.62rem;
  font-weight:600;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--muted);
}

/* Mock channel rows */
.vis-rows{ display:flex; flex-direction:column; gap:9px; }
.vis-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 12px;
  border-radius:10px;
  background:rgba(255,255,255,0.035);
  border:1px solid rgba(255,255,255,0.06);
}
.vis-row .chip{
  width:26px; height:26px;
  border-radius:8px;
  flex-shrink:0;
  background:linear-gradient(135deg, rgba(255,59,78,0.5), rgba(124,58,237,0.5));
}
.vis-row .bar{
  height:7px;
  border-radius:7px;
  background:rgba(255,255,255,0.12);
}
.vis-row .bar.b1{ width:52%; }
.vis-row .bar.b2{ width:34%; }
.vis-row .bar.b3{ width:44%; }
.vis-row .ok{
  margin-left:auto;
  font-size:0.62rem;
  font-weight:700;
  letter-spacing:0.1em;
  color:#5EE38F;
  flex-shrink:0;
}

/* floating mini-card accent */
.vis-float{
  position:absolute;
  bottom:-22px; left:-30px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 18px;
  border-radius:14px;
  background:rgba(20,14,32,0.9);
  border:1px solid rgba(255,255,255,0.12);
  box-shadow:0 16px 40px rgba(0,0,0,0.5);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  animation:floaty 5s ease-in-out infinite;
}
.vis-float b{
  font-family:'Space Grotesk', sans-serif;
  font-size:1rem;
  color:var(--text);
}
.vis-float span{ font-size:0.7rem; color:var(--muted); }
@keyframes floaty{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-9px); }
}

/* Load-in sequence */
.rise{ opacity:0; transform:translateY(18px); animation:rise .7s ease forwards; }
.rise.d1{ animation-delay:.05s; }
.rise.d2{ animation-delay:.15s; }
.rise.d3{ animation-delay:.25s; }
.rise.d4{ animation-delay:.35s; }
.rise.d5{ animation-delay:.45s; }
.rise.d6{ animation-delay:.4s; }
@keyframes rise{ to{ opacity:1; transform:translateY(0); } }

/* ============================================================
   3. FEATURES — Bento Box grid
   ============================================================ */
.features{
  position:relative;
  padding:96px 28px 110px;
  overflow:hidden;
}
/* soft ambient glow behind the grid */
.features::before{
  content:"";
  position:absolute;
  top:10%; left:50%;
  transform:translateX(-50%);
  width:760px; height:520px;
  background:radial-gradient(ellipse at center, rgba(124,58,237,0.10), rgba(217,70,160,0.05) 45%, transparent 70%);
  pointer-events:none;
}
.features-inner{
  position:relative;
  max-width:1280px;
  margin:0 auto;
}
.features-head{
  max-width:720px;
  margin:0 auto 56px;
  text-align:center;
}
.features-head h2{
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  font-size:clamp(1.7rem, 3.4vw, 2.6rem);
  line-height:1.15;
  letter-spacing:-0.01em;
  margin-bottom:18px;
}
.features-head h2 .accent{
  background:linear-gradient(95deg, #FF3B4E 10%, #B76CFF 90%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.features-head p{
  font-size:1.02rem;
  line-height:1.75;
  color:var(--muted);
}

/* Bento grid: 3 columns — cards 1 & 4 span two columns (asymmetric) */
.bento{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
}
.bento-card{
  position:relative;
  border-radius:20px;
  padding:32px 30px;
  background:linear-gradient(165deg, rgba(255,255,255,0.055), rgba(255,255,255,0.018));
  border:1px solid rgba(255,255,255,0.09);
  overflow:hidden;
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.bento-card.wide{ grid-column:span 2; }

/* glowing gradient border reveal + lift on hover */
.bento-card::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:20px;
  padding:1px;
  background:linear-gradient(140deg, rgba(255,59,78,0.55), transparent 40%, transparent 60%, rgba(124,58,237,0.55));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:0;
  transition:opacity .3s ease;
  pointer-events:none;
}
/* soft inner glow */
.bento-card::after{
  content:"";
  position:absolute;
  top:-60px; right:-60px;
  width:220px; height:220px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(124,58,237,0.14), transparent 70%);
  opacity:0;
  transition:opacity .3s ease;
  pointer-events:none;
}
.bento-card:hover{
  transform:translateY(-5px);
  border-color:transparent;
  box-shadow:0 22px 50px rgba(0,0,0,0.45), 0 0 32px rgba(124,58,237,0.12);
}
.bento-card:hover::before,
.bento-card:hover::after{ opacity:1; }

/* card icon */
.bento-icon{
  display:grid;
  place-items:center;
  width:48px; height:48px;
  border-radius:14px;
  background:linear-gradient(135deg, rgba(255,59,78,0.14), rgba(124,58,237,0.14));
  border:1px solid rgba(255,59,78,0.28);
  margin-bottom:22px;
}
.bento-icon svg{ display:block; }

.bento-card h3{
  font-family:'Space Grotesk', sans-serif;
  font-weight:600;
  font-size:1.22rem;
  letter-spacing:-0.005em;
  margin-bottom:12px;
  color:var(--text);
}
.bento-card p{
  font-size:0.94rem;
  line-height:1.72;
  color:var(--muted);
}
.bento-card p strong{ color:var(--text); font-weight:600; }

/* small corner tag on wide cards */
.bento-tag{
  position:absolute;
  top:26px; right:26px;
  padding:5px 12px;
  border-radius:100px;
  font-size:0.64rem;
  font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:#FF8A96;
  background:rgba(255,59,78,0.10);
  border:1px solid rgba(255,59,78,0.3);
}

/* ============================================================
   4. PRICING — 4-column subscription tiers
   ============================================================ */
.pricing{
  position:relative;
  padding:96px 28px 120px;
  overflow:hidden;
}
.pricing::before{
  content:"";
  position:absolute;
  bottom:-10%; left:50%;
  transform:translateX(-50%);
  width:900px; height:520px;
  background:radial-gradient(ellipse at center, rgba(255,59,78,0.07), rgba(124,58,237,0.06) 45%, transparent 72%);
  pointer-events:none;
}
.pricing-inner{
  position:relative;
  max-width:1280px;
  margin:0 auto;
}
.pricing-head{
  max-width:740px;
  margin:0 auto 60px;
  text-align:center;
}
.pricing-head h2{
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  font-size:clamp(1.7rem, 3.4vw, 2.6rem);
  line-height:1.15;
  letter-spacing:-0.01em;
  margin-bottom:18px;
}
.pricing-head h2 .accent{
  background:linear-gradient(95deg, #FF3B4E 10%, #B76CFF 90%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.pricing-head p{
  font-size:1.02rem;
  line-height:1.75;
  color:var(--muted);
}

/* 4-column grid on desktop */
.plans-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:20px;
  align-items:stretch;
}

.plan-card{
  position:relative;
  display:flex;
  flex-direction:column;
  border-radius:20px;
  padding:32px 26px 28px;
  background:linear-gradient(170deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
  border:1px solid rgba(124, 58, 237, 0.35);   /* sleek deep-purple card border */
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.plan-card:hover{
  transform:translateY(-6px);
  border-color:rgba(124,58,237,0.7);
  box-shadow:0 24px 55px rgba(0,0,0,0.5), 0 0 34px rgba(124,58,237,0.16);
}

.plan-card h3{
  font-family:'Space Grotesk', sans-serif;
  font-weight:600;
  font-size:1.18rem;
  color:var(--text);
  margin-bottom:18px;
}

/* Price block: struck-through original + bold active CAD price */
.plan-price{ margin-bottom:24px; }
.plan-price del{
  display:block;
  font-size:0.86rem;
  font-weight:500;
  color:rgba(163,157,186,0.75);
  text-decoration-color:rgba(255,59,78,0.7);
  text-decoration-thickness:1.5px;
  margin-bottom:7px;
}
.plan-price .now{
  display:flex;
  align-items:baseline;
  gap:7px;
}
.plan-price .now b{
  font-family:'Space Grotesk', sans-serif;
  font-size:2.3rem;
  font-weight:700;
  line-height:1;
  color:var(--text);
}
.plan-price .now .cur{
  font-size:0.95rem;
  font-weight:700;
  color:#FF8A96;
  letter-spacing:0.04em;
}
.plan-price .save{
  display:inline-block;
  margin-top:10px;
  padding:4px 11px;
  border-radius:100px;
  font-size:0.66rem;
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:#5EE38F;
  background:rgba(94,227,143,0.08);
  border:1px solid rgba(94,227,143,0.3);
}

/* Feature list with SVG check badges */
.plan-features{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-bottom:28px;
  flex-grow:1;   /* pushes CTA to card bottom for equal-height cards */
}
.plan-features li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:0.88rem;
  line-height:1.5;
  color:var(--muted);
}
.plan-features li svg{ flex-shrink:0; margin-top:2px; }
.plan-features li.lead{ color:var(--text); font-weight:600; }

/* CTA */
.plan-cta{
  display:block;
  text-align:center;
  padding:13px 18px;
  border-radius:12px;
  font-size:0.93rem;
  font-weight:600;
  text-decoration:none;
  color:var(--text);
  background:var(--surface);
  border:1px solid rgba(255,255,255,0.18);
  transition:transform .22s ease, background .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.plan-cta:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,0.1);
  border-color:rgba(255,255,255,0.4);
}
.plan-cta:focus-visible{ outline:2px solid var(--red); outline-offset:3px; }

.plan-guarantee{
  margin-top:14px;
  text-align:center;
  font-size:0.74rem;
  color:var(--muted);
}

/* ---- Featured card: 12-Months "Best Value" ---- */
.plan-card.featured{
  border-color:transparent;
  background:linear-gradient(170deg, rgba(255,59,78,0.07), rgba(124,58,237,0.06));
  box-shadow:0 0 0 1px rgba(255,59,78,0.45), 0 0 40px rgba(255,59,78,0.14);
}
.plan-card.featured:hover{
  transform:translateY(-8px);
  box-shadow:0 0 0 1px rgba(255,59,78,0.7), 0 26px 60px rgba(0,0,0,0.5), 0 0 55px rgba(255,59,78,0.22);
}
.plan-badge{
  position:absolute;
  top:-13px; left:50%;
  transform:translateX(-50%);
  padding:6px 16px;
  border-radius:100px;
  font-size:0.66rem;
  font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:#fff;
  background:linear-gradient(135deg, var(--red), var(--magenta));
  box-shadow:0 4px 18px rgba(255,59,78,0.45);
  white-space:nowrap;
}
.plan-card.featured .plan-cta{
  color:#fff;
  background:linear-gradient(135deg, var(--red), var(--magenta));
  border:none;
  box-shadow:0 6px 22px rgba(255,59,78,0.4);
}
.plan-card.featured .plan-cta:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 32px rgba(255,59,78,0.5);
}

/* ============================================================
   5. ECOSYSTEM — Integration Matrix (devices)
   ============================================================ */
.ecosystem{
  position:relative;
  padding:96px 28px 110px;
  overflow:hidden;
}
.ecosystem::before{
  content:"";
  position:absolute;
  top:20%; left:50%;
  transform:translateX(-50%);
  width:820px; height:560px;
  background:radial-gradient(ellipse at center, rgba(124,58,237,0.12), rgba(255,59,78,0.05) 50%, transparent 72%);
  pointer-events:none;
}
.ecosystem-inner{
  position:relative;
  max-width:1280px;
  margin:0 auto;
}
.ecosystem-head{
  max-width:720px;
  margin:0 auto 64px;
  text-align:center;
}
.ecosystem-head h2{
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  font-size:clamp(1.7rem, 3.4vw, 2.6rem);
  line-height:1.15;
  letter-spacing:-0.01em;
  margin-bottom:18px;
}
.ecosystem-head h2 .accent{
  background:linear-gradient(95deg, #FF3B4E 10%, #B76CFF 90%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.ecosystem-head p{
  font-size:1.02rem;
  line-height:1.75;
  color:var(--muted);
}

/* Matrix: two cards | central TV | two cards */
.matrix{
  display:grid;
  grid-template-columns:1fr 1.15fr 1fr;
  grid-template-rows:auto auto;
  gap:22px;
  align-items:stretch;
}
.matrix-center{
  grid-column:2;
  grid-row:1 / span 2;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Central focal point: abstract glowing Smart TV outline */
.tv-visual{
  position:relative;
  width:100%;
  max-width:420px;
}
.tv-frame{
  position:relative;
  border-radius:18px;
  border:1.5px solid rgba(183,108,255,0.5);
  background:linear-gradient(160deg, rgba(124,58,237,0.10), rgba(11,11,18,0.6));
  box-shadow:
    0 0 45px rgba(124,58,237,0.22),
    inset 0 0 40px rgba(124,58,237,0.10);
  aspect-ratio:16/10;
  overflow:hidden;
  animation:tvGlow 5s ease-in-out infinite;
}
@keyframes tvGlow{
  0%,100%{ box-shadow:0 0 45px rgba(124,58,237,0.22), inset 0 0 40px rgba(124,58,237,0.10); }
  50%{ box-shadow:0 0 60px rgba(255,59,78,0.20), inset 0 0 50px rgba(124,58,237,0.16); }
}
.tv-frame svg{ position:absolute; inset:0; width:100%; height:100%; }
.tv-frame .tv-label{
  position:absolute;
  top:14px; left:16px;
  font-family:'Space Grotesk', sans-serif;
  font-size:0.68rem;
  font-weight:600;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:rgba(244,241,250,0.6);
}
.tv-frame .tv-badge{
  position:absolute;
  bottom:14px; right:16px;
  padding:4px 11px;
  border-radius:7px;
  background:rgba(255,59,78,0.13);
  border:1px solid rgba(255,59,78,0.4);
  color:#FF8A96;
  font-size:0.64rem;
  font-weight:700;
  letter-spacing:0.12em;
}
/* TV stand */
.tv-stand{
  width:34%;
  height:3px;
  margin:14px auto 0;
  border-radius:3px;
  background:linear-gradient(90deg, transparent, rgba(183,108,255,0.55), transparent);
}
.tv-caption{
  margin-top:18px;
  text-align:center;
  font-size:0.78rem;
  font-weight:600;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--muted);
}
.tv-caption b{ color:#FF8A96; }

/* Device node cards */
.node-card{
  position:relative;
  border-radius:18px;
  padding:28px 26px;
  background:linear-gradient(165deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
  border:1px solid rgba(124,58,237,0.32);
  box-shadow:0 0 22px rgba(124,58,237,0.07);
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
/* hover: glow intensifies, tactile lift */
.node-card:hover{
  transform:translateY(-4px);
  border-color:rgba(217,70,160,0.75);
  box-shadow:
    0 18px 44px rgba(0,0,0,0.45),
    0 0 38px rgba(217,70,160,0.22),
    inset 0 0 26px rgba(124,58,237,0.08);
}
.node-icon{
  display:grid;
  place-items:center;
  width:46px; height:46px;
  border-radius:13px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(183,108,255,0.35);
  margin-bottom:20px;
  transition:border-color .3s ease, box-shadow .3s ease;
}
.node-card:hover .node-icon{
  border-color:rgba(255,59,78,0.6);
  box-shadow:0 0 18px rgba(255,59,78,0.18);
}
.node-icon svg{ display:block; }
.node-card h3{
  font-family:'Space Grotesk', sans-serif;
  font-weight:600;
  font-size:1.08rem;
  letter-spacing:-0.005em;
  color:var(--text);
  margin-bottom:11px;
}
.node-card p{
  font-size:0.89rem;
  line-height:1.7;
  color:var(--muted);
}

/* ============================================================
   6. FAQ — 14-item accordion, two columns
   ============================================================ */
.faq{
  position:relative;
  padding:96px 28px 120px;
  overflow:hidden;
}
.faq::before{
  content:"";
  position:absolute;
  top:0; left:50%;
  transform:translateX(-50%);
  width:760px; height:420px;
  background:radial-gradient(ellipse at center, rgba(124,58,237,0.08), transparent 70%);
  pointer-events:none;
}
.faq-inner{
  position:relative;
  max-width:1180px;
  margin:0 auto;
}
.faq-head{
  max-width:680px;
  margin:0 auto 56px;
  text-align:center;
}
.faq-head h2{
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  font-size:clamp(1.7rem, 3.4vw, 2.6rem);
  line-height:1.15;
  letter-spacing:-0.01em;
  margin-bottom:16px;
}
.faq-head h2 .accent{
  background:linear-gradient(95deg, #FF3B4E 10%, #B76CFF 90%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.faq-head p{
  font-size:1.02rem;
  line-height:1.75;
  color:var(--muted);
}

/* Two responsive columns */
.faq-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2rem;
  align-items:start;
}
.faq-col{ display:flex; flex-direction:column; }

/* Accordion item */
.faq-item{
  border-bottom:1px solid rgba(255,255,255,0.09);
  border-radius:12px 12px 0 0;
  transition:background .35s ease, border-color .35s ease;
}
.faq-item.open{
  background:linear-gradient(165deg, rgba(124,58,237,0.13), rgba(217,70,160,0.07));
  border-bottom-color:rgba(217,70,160,0.45);
}

/* Question row: h3 > button (accessible accordion pattern) */
.faq-item h3{ margin:0; }
.faq-q{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  width:100%;
  padding:20px 18px;
  background:none;
  border:none;
  cursor:pointer;
  text-align:left;
  font-family:'Inter', sans-serif;
  font-size:0.99rem;
  font-weight:600;
  line-height:1.45;
  color:var(--text);
  transition:color .25s ease;
}
.faq-q:hover{ color:#FF8A96; }
.faq-q:focus-visible{
  outline:2px solid var(--red);
  outline-offset:-2px;
  border-radius:10px;
}

/* Chevron: rotates smoothly on expand */
.faq-chev{
  flex-shrink:0;
  display:grid;
  place-items:center;
  width:28px; height:28px;
  border-radius:9px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(183,108,255,0.3);
  transition:transform .35s cubic-bezier(.4,0,.2,1), border-color .3s ease, background .3s ease;
}
.faq-chev svg{ display:block; }
.faq-item.open .faq-chev{
  transform:rotate(180deg);
  background:rgba(255,59,78,0.12);
  border-color:rgba(255,59,78,0.5);
}

/* Answer: silky grid-rows height transition (no JS measuring) */
.faq-a{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .4s cubic-bezier(.4,0,.2,1);
}
.faq-item.open .faq-a{ grid-template-rows:1fr; }
.faq-a > div{ overflow:hidden; }
.faq-a p{
  padding:0 18px 22px;
  font-size:0.91rem;
  line-height:1.75;
  color:var(--muted);
  opacity:0;
  transform:translateY(-4px);
  transition:opacity .35s ease .08s, transform .35s ease .08s;
}
.faq-item.open .faq-a p{
  opacity:1;
  transform:translateY(0);
}
.faq-a p strong{ color:var(--text); font-weight:600; }

/* ============================================================
   7. TESTIMONIALS — staggered social proof grid
   ============================================================ */
.reviews{
  position:relative;
  padding:96px 28px 110px;
  overflow:hidden;
}
.reviews::before{
  content:"";
  position:absolute;
  bottom:-15%; left:50%;
  transform:translateX(-50%);
  width:840px; height:480px;
  background:radial-gradient(ellipse at center, rgba(217,70,160,0.09), rgba(124,58,237,0.06) 45%, transparent 72%);
  pointer-events:none;
}
.reviews-inner{
  position:relative;
  max-width:1180px;
  margin:0 auto;
}
.reviews-head{
  max-width:700px;
  margin:0 auto 60px;
  text-align:center;
}
.reviews-head h2{
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  font-size:clamp(1.7rem, 3.4vw, 2.6rem);
  line-height:1.15;
  letter-spacing:-0.01em;
  margin-bottom:16px;
}
.reviews-head h2 .accent{
  background:linear-gradient(95deg, #FF3B4E 10%, #B76CFF 90%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.reviews-head p{
  font-size:1.02rem;
  line-height:1.75;
  color:var(--muted);
}

/* Staggered 3-column grid: middle card offset down */
.reviews-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
  align-items:start;
}
.review-card:nth-child(2){ margin-top:44px; }
.review-card:nth-child(3){ margin-top:20px; }

/* Frosted glass card */
.review-card{
  position:relative;
  border-radius:20px;
  padding:30px 28px;
  background:linear-gradient(165deg, rgba(255,255,255,0.055), rgba(255,255,255,0.015));
  border:1px solid rgba(255,255,255,0.08);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
/* oversized decorative quote mark */
.review-card::before{
  content:"\201C";
  position:absolute;
  top:12px; right:22px;
  font-family:'Space Grotesk', sans-serif;
  font-size:4.2rem;
  line-height:1;
  color:rgba(183,108,255,0.14);
  pointer-events:none;
}
.review-card:hover{
  transform:translateY(-5px);
  border-color:rgba(217,70,160,0.55);
  box-shadow:0 20px 48px rgba(0,0,0,0.45), 0 0 34px rgba(217,70,160,0.16);
}

/* Star row */
.review-stars{
  display:flex;
  gap:4px;
  margin-bottom:18px;
}
.review-stars svg{ display:block; }

/* Quote */
.review-card blockquote{
  margin:0 0 24px;
  font-size:0.95rem;
  line-height:1.75;
  color:var(--text);
}
.review-card blockquote p{ margin:0; }

/* Author row */
.review-author{
  display:flex;
  align-items:center;
  gap:12px;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,0.07);
}
.review-avatar{
  display:grid;
  place-items:center;
  width:40px; height:40px;
  border-radius:50%;
  flex-shrink:0;
  font-family:'Space Grotesk', sans-serif;
  font-size:0.82rem;
  font-weight:700;
  color:#fff;
  background:linear-gradient(135deg, var(--red), var(--magenta));
}
.review-card:nth-child(2) .review-avatar{
  background:linear-gradient(135deg, #7C3AED, var(--magenta));
}
.review-card:nth-child(3) .review-avatar{
  background:linear-gradient(135deg, var(--magenta), #7C3AED);
}
.review-name{
  font-size:0.9rem;
  font-weight:600;
  color:var(--text);
  line-height:1.3;
}
.review-loc{
  display:block;
  font-size:0.78rem;
  font-weight:500;
  color:#a1a1aa;
  margin-top:2px;
}
/* verified tick */
.review-verified{
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:0.66rem;
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:#5EE38F;
}

/* ============================================================
   8. MEDIA VAULT — tabbed content matrix
   ============================================================ */
.vault{
  position:relative;
  padding:96px 28px 110px;
  overflow:hidden;
}
.vault::before{
  content:"";
  position:absolute;
  top:15%; left:50%;
  transform:translateX(-50%);
  width:860px; height:520px;
  background:radial-gradient(ellipse at center, rgba(124,58,237,0.11), rgba(217,70,160,0.06) 48%, transparent 72%);
  pointer-events:none;
}
.vault-inner{
  position:relative;
  max-width:1180px;
  margin:0 auto;
}
.vault-head{
  max-width:700px;
  margin:0 auto 48px;
  text-align:center;
}
.vault-head h2{
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  font-size:clamp(1.7rem, 3.4vw, 2.6rem);
  line-height:1.15;
  letter-spacing:-0.01em;
  margin-bottom:16px;
}
.vault-head h2 .accent{
  background:linear-gradient(95deg, #FF3B4E 10%, #B76CFF 90%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.vault-head p{
  font-size:1.02rem;
  line-height:1.75;
  color:var(--muted);
}

/* Tab row — horizontally swipeable on small screens */
.vault-tabs{
  display:flex;
  justify-content:center;
  gap:4px;
  margin-bottom:40px;
  border-bottom:1px solid rgba(255,255,255,0.08);
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;         /* Firefox */
}
.vault-tabs::-webkit-scrollbar{ display:none; }  /* Chrome/Safari */

.vault-tab{
  position:relative;
  flex-shrink:0;
  padding:14px 22px 16px;
  background:none;
  border:none;
  cursor:pointer;
  font-family:'Inter', sans-serif;
  font-size:0.93rem;
  font-weight:500;
  color:var(--muted);
  white-space:nowrap;
  transition:color .25s ease;
}
.vault-tab:hover{ color:var(--text); }
.vault-tab:focus-visible{
  outline:2px solid var(--red);
  outline-offset:-2px;
  border-radius:8px;
}
/* glowing bottom border on active tab */
.vault-tab::after{
  content:"";
  position:absolute;
  left:18px; right:18px; bottom:-1px;
  height:2.5px;
  border-radius:3px;
  background:linear-gradient(90deg, var(--red), #B76CFF);
  box-shadow:0 0 12px rgba(255,59,78,0.55);
  opacity:0;
  transform:scaleX(0.4);
  transition:opacity .3s ease, transform .3s ease;
}
.vault-tab[aria-selected="true"]{
  color:var(--text);
  font-weight:700;
}
.vault-tab[aria-selected="true"]::after{
  opacity:1;
  transform:scaleX(1);
}

/* Tab panels */
.vault-panel{ display:none; }
.vault-panel.active{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:20px;
  animation:panelIn .45s ease;
}
@keyframes panelIn{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:translateY(0); }
}

/* Media cards */
.media-card{
  position:relative;
  border-radius:18px;
  padding:26px 22px;
  min-height:190px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  background:linear-gradient(165deg, rgba(255,255,255,0.055), rgba(255,255,255,0.015));
  border:1px solid rgba(124,58,237,0.28);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  overflow:hidden;
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
/* corner sheen */
.media-card::before{
  content:"";
  position:absolute;
  top:-50px; right:-50px;
  width:160px; height:160px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(217,70,160,0.13), transparent 70%);
  pointer-events:none;
}
.media-card:hover{
  transform:scale(1.035);
  border-color:rgba(217,70,160,0.65);
  box-shadow:0 18px 44px rgba(0,0,0,0.45), 0 0 32px rgba(217,70,160,0.18);
}

.media-kind{
  display:inline-flex;
  align-items:center;
  gap:7px;
  width:fit-content;
  padding:5px 12px;
  border-radius:100px;
  font-size:0.62rem;
  font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:#FF8A96;
  background:rgba(255,59,78,0.09);
  border:1px solid rgba(255,59,78,0.3);
}
.media-kind::before{
  content:"";
  width:6px; height:6px;
  border-radius:50%;
  background:var(--red);
  box-shadow:0 0 8px var(--red);
}
.media-card h3{
  font-family:'Space Grotesk', sans-serif;
  font-weight:600;
  font-size:1.04rem;
  line-height:1.4;
  letter-spacing:-0.005em;
  color:var(--text);
  margin-top:auto;
}
.media-card .media-bar{
  margin-top:14px;
  height:4px;
  border-radius:4px;
  background:rgba(255,255,255,0.07);
  overflow:hidden;
}
.media-card .media-bar i{
  display:block;
  height:100%;
  border-radius:4px;
  background:linear-gradient(90deg, var(--red), #B76CFF);
  width:72%;
}
.media-card:nth-child(2) .media-bar i{ width:58%; }
.media-card:nth-child(3) .media-bar i{ width:84%; }
.media-card:nth-child(4) .media-bar i{ width:65%; }

/* ============================================================
   9. FOOTER — global anchor
   ============================================================ */
.footer{
  position:relative;
  background:#050508;
  padding:72px 28px 0;
}
/* subtle glowing purple top border */
.footer::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(124,58,237,0.7), rgba(217,70,160,0.5), transparent);
  box-shadow:0 0 18px rgba(124,58,237,0.35);
}
.footer-inner{
  max-width:1280px;
  margin:0 auto;
}

/* 4-column grid: brand column slightly wider */
.footer-grid{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1fr;
  gap:48px;
  padding-bottom:56px;
}

/* Column 1 · Brand */
.footer-brand .dw-logo{ margin-bottom:18px; }
.footer-brand p{
  font-size:0.9rem;
  line-height:1.75;
  color:var(--muted);
  max-width:340px;
  margin-bottom:22px;
}
.footer-badges{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.footer-badge{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:6px 13px;
  border-radius:100px;
  font-size:0.68rem;
  font-weight:600;
  letter-spacing:0.08em;
  color:var(--muted);
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(124,58,237,0.3);
}
.footer-badge svg{ flex-shrink:0; }

/* Link columns */
.footer-col h4{
  font-family:'Space Grotesk', sans-serif;
  font-size:0.78rem;
  font-weight:600;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--text);
  margin-bottom:20px;
}
.footer-col ul{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:13px;
}
.footer-col a{
  position:relative;
  display:inline-block;
  font-size:0.9rem;
  font-weight:450;
  color:var(--muted);
  text-decoration:none;
  transition:color .22s ease, transform .22s ease;
}
/* clean hover: crisp white + subtle slide right */
.footer-col a:hover{
  color:#FFFFFF;
  transform:translateX(4px);
}
.footer-col a:focus-visible{
  outline:2px solid var(--red);
  outline-offset:3px;
  border-radius:4px;
}

/* Bottom bar */
.footer-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  padding:24px 0 28px;
  border-top:1px solid rgba(255,255,255,0.06);
}
.footer-bottom p{
  font-size:0.8rem;
  color:rgba(163,157,186,0.7);
}
.footer-bottom .made{
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.footer-bottom .made::before{
  content:"";
  width:6px; height:6px;
  border-radius:50%;
  background:var(--red);
  box-shadow:0 0 8px var(--red);
}

/* ============================================================
   10. RESPONSIVE — stacks to single column on mobile
   ============================================================ */
@media (max-width: 1024px){
  .hero-inner{
    grid-template-columns:1fr;
    gap:64px;
  }
  .hero-copy{ text-align:center; }
  .hero .sub{ margin-left:auto; margin-right:auto; }
  .hero-features{ align-items:center; }
  .hero-ctas, .hero-trust{ justify-content:center; }
  .dw-visual{ max-width:520px; margin:0 auto; width:100%; }
  .visual-frame{ transform:none; }
  .vis-float{ left:50%; transform:translateX(-50%); }
  @keyframes floaty{
    0%,100%{ transform:translateX(-50%) translateY(0); }
    50%{ transform:translateX(-50%) translateY(-9px); }
  }
  /* Bento: 2 columns on tablet, wide cards span full row */
  .bento{ grid-template-columns:repeat(2, 1fr); }
  .bento-card.wide{ grid-column:span 2; }
  /* Pricing: 2x2 grid on tablets */
  .plans-grid{ grid-template-columns:repeat(2, 1fr); }
  /* Ecosystem: TV on top (full width), cards in 2x2 below */
  .matrix{ grid-template-columns:repeat(2, 1fr); grid-template-rows:auto; }
  .matrix-center{ grid-column:1 / -1; grid-row:1; padding:8px 0 22px; }
  /* Reviews: stack with comfortable reading width */
  .reviews-grid{ grid-template-columns:1fr; max-width:640px; margin:0 auto; }
  .review-card:nth-child(2),
  .review-card:nth-child(3){ margin-top:0; }
  /* Vault: 2x2 media grid, tabs scroll from left edge */
  .vault-panel.active{ grid-template-columns:repeat(2, 1fr); }
  .vault-tabs{ justify-content:flex-start; }
  /* Footer: 2x2 grid, brand spans full first row */
  .footer-grid{ grid-template-columns:1fr 1fr; gap:40px; }
  .footer-brand{ grid-column:1 / -1; }
}
@media (max-width: 680px){
  /* Bento: single elegant column on mobile */
  .bento{ grid-template-columns:1fr; }
  .bento-card.wide{ grid-column:span 1; }
  .features{ padding:72px 22px 80px; }
  /* Pricing: single column, featured card first-class spacing */
  .plans-grid{ grid-template-columns:1fr; gap:26px; }
  .pricing{ padding:72px 22px 88px; }
  /* Ecosystem: full single-column stack */
  .matrix{ grid-template-columns:1fr; }
  .matrix-center{ grid-column:1; }
  .ecosystem{ padding:72px 22px 84px; }
  /* FAQ: single column */
  .faq-grid{ grid-template-columns:1fr; gap:0.5rem; }
  .faq{ padding:72px 22px 88px; }
  /* Reviews: single column, stagger removed */
  .reviews-grid{ grid-template-columns:1fr; }
  .review-card:nth-child(2),
  .review-card:nth-child(3){ margin-top:0; }
  .reviews{ padding:72px 22px 84px; }
  /* Vault: single column of media cards */
  .vault-panel.active{ grid-template-columns:1fr; }
  .media-card{ min-height:150px; }
  .vault{ padding:72px 22px 84px; }
  /* Footer: single vertical stack, centered bottom bar */
  .footer-grid{ grid-template-columns:1fr; gap:36px; }
  .footer{ padding:56px 22px 0; }
  .footer-bottom{ flex-direction:column; text-align:center; padding:22px 0 26px; }
}
@media (max-width: 560px){
  .hero-ctas{ flex-direction:column; }
  .btn{ width:100%; justify-content:center; }
  .hero-features{ align-items:flex-start; text-align:left; }
}

@media (prefers-reduced-motion: reduce){
  .rise{ opacity:1; transform:none; animation:none; }
  .hero-eyebrow .dot, .vis-live::before{ animation:none; }
  .vis-float{ animation:none; }
  .tv-frame{ animation:none; }
  .faq-a, .faq-chev, .faq-a p, .faq-item{ transition:none; }
  .vault-panel.active{ animation:none; }
  .vault-tab::after{ transition:none; }
  .media-card{ transition:none; }
  .btn{ transition:none; }
  html{ scroll-behavior:auto; }
  .vis-player .wave-anim{ display:none; }
}

/* ========================================================
   [MULTI-CONNECTIONS] page sections
   ======================================================== */
@media (max-width: 960px){
  .dw-nav, .dw-header-cta{ display:none; }
  .dw-burger{ display:grid; }
}

/* ============================================================
   SECTION 1 · HERO — 60/40 asymmetrical split
   ============================================================ */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  padding:calc(var(--header-h) + 56px) 28px 88px;
  overflow:hidden;
}
.hero-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.hero-bg .glow{ position:absolute; border-radius:50%; filter:blur(100px); }
.hero-bg .glow-1{ width:620px; height:620px; top:-240px; left:-140px; background:var(--violet-glow); }
.hero-bg .glow-2{ width:520px; height:520px; bottom:-200px; right:-80px; background:var(--magenta-glow); }
.hero-bg .glow-3{ width:340px; height:340px; top:32%; right:24%; background:rgba(255,59,78,0.08); }
.hero-bg .grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 75% 65% at 45% 40%, black 25%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 75% 65% at 45% 40%, black 25%, transparent 75%);
}

.hero-inner{
  position:relative;
  z-index:1;
  width:100%;
  max-width:1280px;
  margin:0 auto;
  display:grid;
  grid-template-columns:60fr 40fr;
  gap:56px;
  align-items:center;
}

/* LEFT: copy */
.hero-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:7px 18px;
  border:1px solid rgba(255,59,78,0.35);
  border-radius:100px;
  background:rgba(255,59,78,0.08);
  font-size:0.74rem;
  font-weight:600;
  letter-spacing:0.17em;
  text-transform:uppercase;
  color:#FF8A96;
  margin-bottom:26px;
}
.hero-eyebrow .dot{
  width:7px; height:7px;
  border-radius:50%;
  background:var(--red);
  box-shadow:0 0 10px var(--red);
  animation:pulse 2.2s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ opacity:1; transform:scale(1); }
  50%{ opacity:0.5; transform:scale(0.8); }
}
.hero h1{
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  font-size:clamp(2.1rem, 4vw, 3.4rem);
  line-height:1.12;
  letter-spacing:-0.015em;
  margin-bottom:22px;
}
.hero h1 .accent{
  background:linear-gradient(95deg, #FF3B4E 10%, #B76CFF 90%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero .sub{
  font-size:1.05rem;
  line-height:1.75;
  color:var(--muted);
  margin-bottom:26px;
  max-width:600px;
}
.hero .sub strong{ color:var(--text); font-weight:600; }
/* in-copy internal link */
.hero .sub a{
  color:#FF8A96;
  font-weight:600;
  text-decoration:none;
  border-bottom:1px solid rgba(255,59,78,0.45);
  transition:color .2s ease, border-color .2s ease;
}
.hero .sub a:hover{
  color:#FFFFFF;
  border-bottom-color:#FF3B4E;
}
.hero .sub a:focus-visible{
  outline:2px solid var(--red);
  outline-offset:3px;
  border-radius:3px;
}

.hero-features{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-bottom:34px;
}
.hero-features li{
  display:flex;
  align-items:center;
  gap:11px;
  font-size:0.95rem;
  font-weight:500;
  color:var(--text);
}
.hero-features li::before{
  content:"✓";
  display:grid;
  place-items:center;
  width:21px; height:21px;
  border-radius:50%;
  font-size:0.72rem;
  font-weight:700;
  color:#fff;
  background:linear-gradient(135deg, var(--red), var(--magenta));
  box-shadow:0 2px 10px rgba(255,59,78,0.35);
  flex-shrink:0;
}

.hero-ctas{
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:26px;
}
.btn{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:15px 30px;
  font-family:'Inter', sans-serif;
  font-size:1rem;
  font-weight:600;
  text-decoration:none;
  border-radius:13px;
  transition:transform .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease;
}
.btn-primary{
  color:#fff;
  background:linear-gradient(135deg, var(--red), var(--magenta));
  box-shadow:0 6px 26px var(--red-soft);
}
.btn-primary:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 40px var(--red-soft), 0 0 24px rgba(255,59,78,0.30);
}
.btn-outline{
  color:var(--text);
  background:transparent;
  border:1px solid rgba(255,255,255,0.22);
}
.btn-outline:hover{
  transform:translateY(-3px);
  border-color:rgba(255,255,255,0.5);
  background:var(--surface);
  box-shadow:0 10px 30px rgba(124,58,237,0.18);
}
.btn:focus-visible{ outline:2px solid var(--red); outline-offset:3px; }

.hero-trust{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  font-size:0.84rem;
  font-weight:500;
  color:var(--muted);
  letter-spacing:0.02em;
}
.hero-trust .sep{ color:var(--red); }

/* RIGHT: synchronization visual — central hub linked to 3 devices.
   PLACEHOLDER: swap the inner SVG for your own 3D render <img>
   inside .sync-frame; the glow frame carries over. */
.sync-visual{ position:relative; }
.sync-frame{
  position:relative;
  border-radius:22px;
  background:linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015));
  border:1px solid rgba(255,255,255,0.11);
  box-shadow:0 30px 80px rgba(0,0,0,0.55), 0 0 60px rgba(124,58,237,0.15);
  padding:14px;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.sync-frame::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:22px;
  padding:1px;
  background:linear-gradient(140deg, rgba(255,59,78,0.5), transparent 35%, transparent 65%, rgba(124,58,237,0.5));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
}
.sync-frame svg{ display:block; width:100%; height:auto; }

/* animated data streams: dashes flowing hub → devices */
.stream{
  stroke-dasharray:6 8;
  animation:flow 1.6s linear infinite;
}
@keyframes flow{
  to{ stroke-dashoffset:-28; }
}
/* hub breathing glow */
.hub-pulse{
  animation:hubPulse 3s ease-in-out infinite;
  transform-origin:center;
  transform-box:fill-box;
}
@keyframes hubPulse{
  0%,100%{ opacity:0.35; transform:scale(1); }
  50%{ opacity:0.7; transform:scale(1.12); }
}
.sync-caption{
  margin-top:18px;
  text-align:center;
  font-size:0.78rem;
  font-weight:600;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--muted);
}
.sync-caption b{ color:#FF8A96; }

/* Load-in sequence */
.rise{ opacity:0; transform:translateY(18px); animation:rise .7s ease forwards; }
.rise.d1{ animation-delay:.05s; }
.rise.d2{ animation-delay:.15s; }
.rise.d3{ animation-delay:.25s; }
.rise.d4{ animation-delay:.35s; }
.rise.d5{ animation-delay:.45s; }
.rise.d6{ animation-delay:.4s; }
@keyframes rise{ to{ opacity:1; transform:translateY(0); } }

/* ============================================================
   SECTION 2 · BORDERLESS ARCHITECTURE — use-case node grid
   ============================================================ */
.borderless{
  position:relative;
  padding:96px 28px 110px;
  overflow:hidden;
}
.borderless::before{
  content:"";
  position:absolute;
  top:12%; left:50%;
  transform:translateX(-50%);
  width:820px; height:520px;
  background:radial-gradient(ellipse at center, rgba(124,58,237,0.11), rgba(217,70,160,0.05) 48%, transparent 72%);
  pointer-events:none;
}
.borderless-inner{
  position:relative;
  max-width:1180px;
  margin:0 auto;
}
.borderless-head{
  max-width:720px;
  margin:0 auto 56px;
  text-align:center;
}
.borderless-head h2{
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  font-size:clamp(1.7rem, 3.4vw, 2.6rem);
  line-height:1.15;
  letter-spacing:-0.01em;
  margin-bottom:18px;
}
.borderless-head h2 .accent{
  background:linear-gradient(95deg, #FF3B4E 10%, #B76CFF 90%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.borderless-head p{
  font-size:1.02rem;
  line-height:1.75;
  color:var(--muted);
}

/* 2x2 node grid */
.node-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:22px;
}

.use-node{
  position:relative;
  border-radius:20px;
  padding:32px 30px;
  background:linear-gradient(165deg, rgba(255,255,255,0.055), rgba(255,255,255,0.018));
  border:1px solid rgba(124,58,237,0.30);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  overflow:hidden;
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
/* gradient border reveal on hover */
.use-node::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:20px;
  padding:1px;
  background:linear-gradient(140deg, rgba(255,59,78,0.55), transparent 40%, transparent 60%, rgba(124,58,237,0.55));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:0;
  transition:opacity .3s ease;
  pointer-events:none;
}
/* corner glow */
.use-node::after{
  content:"";
  position:absolute;
  top:-60px; right:-60px;
  width:210px; height:210px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(124,58,237,0.14), transparent 70%);
  opacity:0;
  transition:opacity .3s ease;
  pointer-events:none;
}
.use-node:hover{
  transform:translateY(-5px);
  border-color:transparent;
  box-shadow:0 22px 50px rgba(0,0,0,0.45), 0 0 32px rgba(124,58,237,0.14);
}
.use-node:hover::before,
.use-node:hover::after{ opacity:1; }

.use-node-icon{
  display:grid;
  place-items:center;
  width:48px; height:48px;
  border-radius:14px;
  background:linear-gradient(135deg, rgba(255,59,78,0.13), rgba(124,58,237,0.13));
  border:1px solid rgba(255,59,78,0.28);
  margin-bottom:22px;
}
.use-node-icon svg{ display:block; }

.use-node h3{
  font-family:'Space Grotesk', sans-serif;
  font-weight:600;
  font-size:1.2rem;
  letter-spacing:-0.005em;
  color:var(--text);
  margin-bottom:12px;
}
.use-node p{
  font-size:0.94rem;
  line-height:1.72;
  color:var(--muted);
}
/* small corner tag for the critical feature card */
.use-node-tag{
  position:absolute;
  top:26px; right:26px;
  padding:5px 12px;
  border-radius:100px;
  font-size:0.62rem;
  font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:#FF8A96;
  background:rgba(255,59,78,0.10);
  border:1px solid rgba(255,59,78,0.3);
}

/* ============================================================
   SECTION 3 · DYNAMIC PRICING MATRIX — device toggle + cards
   ============================================================ */
.matrix-pricing{
  position:relative;
  padding:96px 28px 120px;
  overflow:hidden;
}
.matrix-pricing::before{
  content:"";
  position:absolute;
  bottom:-12%; left:50%;
  transform:translateX(-50%);
  width:900px; height:520px;
  background:radial-gradient(ellipse at center, rgba(255,59,78,0.07), rgba(124,58,237,0.06) 45%, transparent 72%);
  pointer-events:none;
}
.matrix-pricing-inner{
  position:relative;
  max-width:1240px;
  margin:0 auto;
}
.matrix-pricing-head{
  max-width:720px;
  margin:0 auto 44px;
  text-align:center;
}
.matrix-pricing-head h2{
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  font-size:clamp(1.7rem, 3.4vw, 2.6rem);
  line-height:1.15;
  letter-spacing:-0.01em;
  margin-bottom:18px;
}
.matrix-pricing-head h2 .accent{
  background:linear-gradient(95deg, #FF3B4E 10%, #B76CFF 90%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.matrix-pricing-head p{
  font-size:1.02rem;
  line-height:1.75;
  color:var(--muted);
}

/* Device selector pills */
.device-toggle{
  display:flex;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:48px;
  padding:8px;
  border-radius:100px;
  background:rgba(255,255,255,0.035);
  border:1px solid rgba(255,255,255,0.08);
  width:fit-content;
  margin-left:auto;
  margin-right:auto;
}
.device-pill{
  padding:11px 22px;
  border:none;
  border-radius:100px;
  background:transparent;
  cursor:pointer;
  font-family:'Inter', sans-serif;
  font-size:0.9rem;
  font-weight:600;
  color:var(--muted);
  white-space:nowrap;
  transition:color .25s ease, background .25s ease, box-shadow .25s ease;
}
.device-pill:hover{ color:var(--text); }
.device-pill:focus-visible{
  outline:2px solid var(--red);
  outline-offset:2px;
}
/* active: deep purple glow */
.device-pill[aria-pressed="true"]{
  color:#fff;
  background:linear-gradient(135deg, #7C3AED, #5B21B6);
  box-shadow:0 0 22px rgba(124,58,237,0.55), inset 0 0 12px rgba(183,108,255,0.25);
}

/* Duration cards */
.duration-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:20px;
  align-items:stretch;
}
.duration-card{
  position:relative;
  display:flex;
  flex-direction:column;
  border-radius:20px;
  padding:32px 26px 28px;
  background:linear-gradient(170deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
  border:1px solid rgba(124,58,237,0.35);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.duration-card:hover{
  transform:translateY(-6px);
  border-color:rgba(124,58,237,0.7);
  box-shadow:0 24px 55px rgba(0,0,0,0.5), 0 0 34px rgba(124,58,237,0.16);
}
.duration-card h3{
  font-family:'Space Grotesk', sans-serif;
  font-weight:600;
  font-size:1.18rem;
  color:var(--text);
  margin-bottom:16px;
}

.duration-price{
  display:flex;
  align-items:baseline;
  gap:7px;
  margin-bottom:6px;
}
.duration-price b{
  font-family:'Space Grotesk', sans-serif;
  font-size:2.3rem;
  font-weight:700;
  line-height:1;
  color:var(--text);
}
.duration-price .cur{
  font-size:0.95rem;
  font-weight:700;
  color:#FF8A96;
  letter-spacing:0.04em;
}
.duration-devices{
  font-size:0.76rem;
  font-weight:600;
  letter-spacing:0.06em;
  color:var(--muted);
  margin-bottom:22px;
}
/* price fade-in when the matrix updates */
.price-swap{ animation:priceIn .4s ease; }
@keyframes priceIn{
  from{ opacity:0; transform:translateY(6px); }
  to{ opacity:1; transform:translateY(0); }
}

.duration-features{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-bottom:28px;
  flex-grow:1;
}
.duration-features li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:0.88rem;
  line-height:1.5;
  color:var(--muted);
}
.duration-features li svg{ flex-shrink:0; margin-top:2px; }

.duration-cta{
  display:block;
  text-align:center;
  padding:13px 18px;
  border-radius:12px;
  font-size:0.93rem;
  font-weight:600;
  text-decoration:none;
  color:var(--text);
  background:var(--surface);
  border:1px solid rgba(255,255,255,0.18);
  transition:transform .22s ease, background .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.duration-cta:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,0.1);
  border-color:rgba(255,255,255,0.4);
}
.duration-cta:focus-visible{ outline:2px solid var(--red); outline-offset:3px; }

/* Featured: 1 Year "Best Value" */
.duration-card.featured{
  border-color:transparent;
  background:linear-gradient(170deg, rgba(255,59,78,0.07), rgba(124,58,237,0.06));
  box-shadow:0 0 0 1px rgba(255,59,78,0.45), 0 0 40px rgba(255,59,78,0.14);
}
.duration-card.featured:hover{
  transform:translateY(-8px);
  box-shadow:0 0 0 1px rgba(255,59,78,0.7), 0 26px 60px rgba(0,0,0,0.5), 0 0 55px rgba(255,59,78,0.22);
}
.duration-badge{
  position:absolute;
  top:-13px; left:50%;
  transform:translateX(-50%);
  padding:6px 16px;
  border-radius:100px;
  font-size:0.66rem;
  font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:#fff;
  background:linear-gradient(135deg, var(--red), var(--magenta));
  box-shadow:0 4px 18px rgba(255,59,78,0.45);
  white-space:nowrap;
}
.duration-card.featured .duration-cta{
  color:#fff;
  background:linear-gradient(135deg, var(--red), var(--magenta));
  border:none;
  box-shadow:0 6px 22px rgba(255,59,78,0.4);
}
.duration-card.featured .duration-cta:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 32px rgba(255,59,78,0.5);
}

/* ============================================================
   SECTION 4 · ARCHITECTURE COMPARISON — vs panels
   ============================================================ */
.versus{
  position:relative;
  padding:96px 28px 110px;
  overflow:hidden;
}
.versus::before{
  content:"";
  position:absolute;
  top:18%; left:50%;
  transform:translateX(-50%);
  width:820px; height:500px;
  background:radial-gradient(ellipse at center, rgba(124,58,237,0.10), rgba(255,59,78,0.05) 50%, transparent 72%);
  pointer-events:none;
}
.versus-inner{
  position:relative;
  max-width:1100px;
  margin:0 auto;
}
.versus-head{
  max-width:700px;
  margin:0 auto 56px;
  text-align:center;
}
.versus-head h2{
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  font-size:clamp(1.7rem, 3.4vw, 2.6rem);
  line-height:1.15;
  letter-spacing:-0.01em;
  margin-bottom:18px;
}
.versus-head h2 .accent{
  background:linear-gradient(95deg, #FF3B4E 10%, #B76CFF 90%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.versus-head p{
  font-size:1.02rem;
  line-height:1.75;
  color:var(--muted);
}

/* Split panels: right column slightly wider + elevated */
.versus-grid{
  display:grid;
  grid-template-columns:46fr 54fr;
  gap:24px;
  align-items:center;
}

.versus-panel{
  border-radius:22px;
  padding:38px 34px;
}

/* LEFT: legacy — muted, faint red tint */
.versus-panel.legacy{
  background:linear-gradient(170deg, rgba(255,255,255,0.03), rgba(255,59,78,0.025));
  border:1px solid rgba(255,255,255,0.07);
}
.versus-panel.legacy h3{
  font-family:'Space Grotesk', sans-serif;
  font-weight:600;
  font-size:1.15rem;
  color:rgba(244,241,250,0.6);
  margin-bottom:26px;
}
.versus-panel.legacy .vs-sub{
  display:block;
  font-size:0.68rem;
  font-weight:700;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:rgba(163,157,186,0.55);
  margin-bottom:8px;
}

/* RIGHT: IPTV Naz — premium, glowing, elevated */
.versus-panel.digiwave{
  position:relative;
  background:linear-gradient(170deg, rgba(255,59,78,0.07), rgba(124,58,237,0.07));
  border:1px solid transparent;
  box-shadow:
    0 0 0 1px rgba(217,70,160,0.45),
    0 24px 60px rgba(0,0,0,0.5),
    0 0 44px rgba(124,58,237,0.16);
  transform:translateY(-10px);
  transition:box-shadow .35s ease, background .35s ease;
}
.versus-panel.digiwave:hover{
  background:linear-gradient(170deg, rgba(255,59,78,0.11), rgba(124,58,237,0.11));
  box-shadow:
    0 0 0 1px rgba(217,70,160,0.75),
    0 28px 70px rgba(0,0,0,0.55),
    0 0 62px rgba(124,58,237,0.28);
}
.versus-panel.digiwave h3{
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  font-size:1.3rem;
  color:var(--text);
  margin-bottom:26px;
}
.versus-panel.digiwave .vs-sub{
  display:block;
  font-size:0.68rem;
  font-weight:700;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:#FF8A96;
  margin-bottom:8px;
}

/* Comparison lists */
.vs-list{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:22px;
}
.vs-list li{
  display:flex;
  align-items:flex-start;
  gap:13px;
}
.vs-ico{
  flex-shrink:0;
  display:grid;
  place-items:center;
  width:24px; height:24px;
  border-radius:50%;
  margin-top:1px;
}
.legacy .vs-ico{
  background:rgba(255,59,78,0.10);
  border:1px solid rgba(255,59,78,0.3);
}
.digiwave .vs-ico{
  background:linear-gradient(135deg, var(--red), var(--magenta));
  box-shadow:0 2px 12px rgba(255,59,78,0.4);
}
.vs-label{
  display:block;
  font-size:0.68rem;
  font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
  margin-bottom:4px;
}
.legacy .vs-label{ color:rgba(163,157,186,0.6); }
.digiwave .vs-label{ color:#FF8A96; }
.vs-text{
  font-size:0.93rem;
  line-height:1.6;
}
.legacy .vs-text{ color:rgba(163,157,186,0.85); }
.digiwave .vs-text{ color:var(--text); font-weight:500; }

/* ============================================================
   SECTION 5 · AUTOMATED PROVISIONING — deployment timeline
   ============================================================ */
.deploy{
  position:relative;
  padding:96px 28px 110px;
  overflow:hidden;
}
.deploy::before{
  content:"";
  position:absolute;
  top:20%; left:50%;
  transform:translateX(-50%);
  width:840px; height:480px;
  background:radial-gradient(ellipse at center, rgba(217,70,160,0.08), rgba(124,58,237,0.06) 48%, transparent 72%);
  pointer-events:none;
}
.deploy-inner{
  position:relative;
  max-width:1180px;
  margin:0 auto;
}
.deploy-head{
  max-width:700px;
  margin:0 auto 64px;
  text-align:center;
}
.deploy-head h2{
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  font-size:clamp(1.7rem, 3.4vw, 2.6rem);
  line-height:1.15;
  letter-spacing:-0.01em;
  margin-bottom:18px;
}
.deploy-head h2 .accent{
  background:linear-gradient(95deg, #FF3B4E 10%, #B76CFF 90%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.deploy-head p{
  font-size:1.02rem;
  line-height:1.75;
  color:var(--muted);
}

/* Timeline circuit: stage | connector | stage | connector | stage */
.circuit{
  display:grid;
  grid-template-columns:1fr 72px 1fr 72px 1fr;
  align-items:start;
}

.stage{
  text-align:center;
  padding:0 8px;
}

/* Glowing node */
.stage-node{
  position:relative;
  width:84px; height:84px;
  margin:0 auto 24px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border:1.5px solid rgba(124,58,237,0.45);
  box-shadow:0 0 26px rgba(124,58,237,0.18), inset 0 0 18px rgba(124,58,237,0.08);
  transition:border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.stage:hover .stage-node{
  transform:translateY(-4px);
  border-color:rgba(217,70,160,0.85);
  box-shadow:0 0 44px rgba(217,70,160,0.35), inset 0 0 24px rgba(124,58,237,0.15);
}
.stage-node svg{ display:block; }
/* step number chip on the node */
.stage-num{
  position:absolute;
  top:-9px; right:-6px;
  display:grid;
  place-items:center;
  min-width:28px; height:28px;
  padding:0 7px;
  border-radius:100px;
  font-family:'Space Grotesk', sans-serif;
  font-size:0.72rem;
  font-weight:700;
  color:#fff;
  background:linear-gradient(135deg, var(--red), var(--magenta));
  box-shadow:0 3px 14px rgba(255,59,78,0.45);
}

.stage h3{
  font-family:'Space Grotesk', sans-serif;
  font-weight:600;
  font-size:1.14rem;
  letter-spacing:-0.005em;
  color:var(--text);
  margin-bottom:11px;
}
.stage p{
  font-size:0.91rem;
  line-height:1.7;
  color:var(--muted);
  max-width:300px;
  margin:0 auto;
}

/* Connectors: glowing data lines between nodes */
.connector{
  position:relative;
  height:2px;
  margin-top:41px;      /* aligns with node center (84px / 2 - 1px) */
  background:rgba(124,58,237,0.25);
  border-radius:2px;
  overflow:visible;
}
/* animated pulse traveling the line, revealed on hover of a neighbor stage */
.connector::after{
  content:"";
  position:absolute;
  top:-1.5px; left:0;
  width:34%;
  height:5px;
  border-radius:5px;
  background:linear-gradient(90deg, transparent, #D946A0, #B76CFF, transparent);
  filter:blur(0.5px);
  opacity:0;
  transition:opacity .25s ease;
}
.connector.lit{ background:rgba(183,108,255,0.45); }
.connector.lit::after{
  opacity:1;
  animation:pulseTravel 1.1s linear infinite;
}
@keyframes pulseTravel{
  from{ left:-34%; }
  to{ left:100%; }
}

/* ============================================================
   SECTION 6 · MULTI-SCREEN FAQ — accordion
   ============================================================ */
.mc-faq{
  position:relative;
  padding:96px 28px 120px;
  overflow:hidden;
}
.mc-faq::before{
  content:"";
  position:absolute;
  bottom:-10%; left:50%;
  transform:translateX(-50%);
  width:760px; height:440px;
  background:radial-gradient(ellipse at center, rgba(124,58,237,0.09), transparent 70%);
  pointer-events:none;
}
.mc-faq-inner{
  position:relative;
  max-width:820px;
  margin:0 auto;
}
.mc-faq-head{
  max-width:680px;
  margin:0 auto 52px;
  text-align:center;
}
.mc-faq-head h2{
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  font-size:clamp(1.7rem, 3.4vw, 2.6rem);
  line-height:1.15;
  letter-spacing:-0.01em;
  margin-bottom:16px;
}
.mc-faq-head h2 .accent{
  background:linear-gradient(95deg, #FF3B4E 10%, #B76CFF 90%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.mc-faq-head p{
  font-size:1.02rem;
  line-height:1.75;
  color:var(--muted);
}

/* Accordion item */
.mc-faq-item{
  border-bottom:1px solid rgba(255,255,255,0.09);
  border-radius:12px 12px 0 0;
  transition:border-color .35s ease;
}
.mc-faq-item.open{ border-bottom-color:rgba(217,70,160,0.5); }

.mc-faq-item h3{ margin:0; }
.mc-faq-q{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  width:100%;
  padding:22px 14px;
  background:none;
  border:none;
  cursor:pointer;
  text-align:left;
  font-family:'Inter', sans-serif;
  font-size:1.02rem;
  font-weight:600;
  line-height:1.45;
  color:var(--text);
  transition:color .3s ease, text-shadow .3s ease;
}
.mc-faq-q:hover{ color:#FF8A96; }
.mc-faq-q:focus-visible{
  outline:2px solid var(--red);
  outline-offset:-2px;
  border-radius:10px;
}
/* active question: deep purple/magenta text glow */
.mc-faq-item.open .mc-faq-q{
  color:#E9D5FF;
  text-shadow:0 0 18px rgba(183,108,255,0.65), 0 0 34px rgba(217,70,160,0.35);
}

/* Chevron */
.mc-faq-chev{
  flex-shrink:0;
  display:grid;
  place-items:center;
  width:28px; height:28px;
  border-radius:9px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(183,108,255,0.3);
  transition:transform .35s cubic-bezier(.4,0,.2,1), border-color .3s ease, background .3s ease;
}
.mc-faq-chev svg{ display:block; }
.mc-faq-item.open .mc-faq-chev{
  transform:rotate(180deg);
  background:rgba(124,58,237,0.18);
  border-color:rgba(183,108,255,0.65);
}

/* Answer: silky grid-rows height transition */
.mc-faq-a{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .4s cubic-bezier(.4,0,.2,1);
}
.mc-faq-item.open .mc-faq-a{ grid-template-rows:1fr; }
.mc-faq-a > div{ overflow:hidden; }
.mc-faq-a p{
  padding:0 14px 24px;
  font-size:0.94rem;
  line-height:1.78;
  color:var(--muted);
  opacity:0;
  transform:translateY(-4px);
  transition:opacity .35s ease .08s, transform .35s ease .08s;
}
.mc-faq-item.open .mc-faq-a p{
  opacity:1;
  transform:translateY(0);
}

/* ============================================================
   GLOBAL FOOTER
   ============================================================ */
.footer{
  position:relative;
  background:#050508;
  padding:72px 28px 0;
}
.footer::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(124,58,237,0.7), rgba(217,70,160,0.5), transparent);
  box-shadow:0 0 18px rgba(124,58,237,0.35);
}
.footer-inner{ max-width:1280px; margin:0 auto; }
.footer-grid{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1fr;
  gap:48px;
  padding-bottom:56px;
}
.footer-brand .dw-logo{ margin-bottom:18px; }
.footer-brand p{
  font-size:0.9rem;
  line-height:1.75;
  color:var(--muted);
  max-width:340px;
  margin-bottom:22px;
}
.footer-badges{ display:flex; gap:10px; flex-wrap:wrap; }
.footer-badge{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:6px 13px;
  border-radius:100px;
  font-size:0.68rem;
  font-weight:600;
  letter-spacing:0.08em;
  color:var(--muted);
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(124,58,237,0.3);
}
.footer-col h4{
  font-family:'Space Grotesk', sans-serif;
  font-size:0.78rem;
  font-weight:600;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--text);
  margin-bottom:20px;
}
.footer-col ul{ list-style:none; display:flex; flex-direction:column; gap:13px; }
.footer-col a{
  display:inline-block;
  font-size:0.9rem;
  color:var(--muted);
  text-decoration:none;
  transition:color .22s ease, transform .22s ease;
}
.footer-col a:hover{ color:#fff; transform:translateX(4px); }
.footer-col a:focus-visible{ outline:2px solid var(--red); outline-offset:3px; border-radius:4px; }
.footer-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  padding:24px 0 28px;
  border-top:1px solid rgba(255,255,255,0.06);
}
.footer-bottom p{ font-size:0.8rem; color:rgba(163,157,186,0.7); }
.footer-bottom .made{ display:inline-flex; align-items:center; gap:8px; }
.footer-bottom .made::before{
  content:"";
  width:6px; height:6px;
  border-radius:50%;
  background:var(--red);
  box-shadow:0 0 8px var(--red);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px){
  .hero-inner{ grid-template-columns:1fr; gap:60px; }
  .hero-copy{ text-align:center; }
  .hero .sub{ margin-left:auto; margin-right:auto; }
  .hero-features{ align-items:center; }
  .hero-ctas, .hero-trust{ justify-content:center; }
  .sync-visual{ max-width:520px; margin:0 auto; width:100%; }
  /* Pricing: 2x2 duration grid on tablets */
  .duration-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width: 560px){
  .hero-ctas{ flex-direction:column; }
  .btn{ width:100%; justify-content:center; }
  .hero-features{ align-items:flex-start; text-align:left; }
}
@media (max-width: 820px){
  /* Node grid: single elegant column */
  .node-grid{ grid-template-columns:1fr; }
  .borderless{ padding:72px 22px 84px; }
  /* Versus: stack — legacy first (source order), no elevation offset */
  .versus-grid{ grid-template-columns:1fr; gap:22px; }
  .versus-panel.digiwave{ transform:none; }
  .versus{ padding:72px 22px 84px; }
  /* Timeline: vertical connected pathway */
  .circuit{ grid-template-columns:1fr; justify-items:center; }
  .connector{
    width:2px;
    height:56px;
    margin:18px 0;
  }
  .connector::after{
    top:0; left:-1.5px;
    width:5px;
    height:34%;
  }
  .connector.lit::after{ animation:pulseTravelV 1.1s linear infinite; }
  .deploy{ padding:72px 22px 84px; }
}
@keyframes pulseTravelV{
  from{ top:-34%; }
  to{ top:100%; }
}
@media (max-width: 640px){
  /* Pricing: single column stack */
  .duration-grid{ grid-template-columns:1fr; gap:26px; }
  .matrix-pricing{ padding:72px 22px 88px; }
  .device-toggle{ border-radius:20px; }
}
@media (prefers-reduced-motion: reduce){
  .price-swap{ animation:none; }
  .device-pill, .duration-card, .duration-cta{ transition:none; }
  .connector.lit::after{ animation:none; opacity:0.6; left:33%; }
  .stage-node{ transition:none; }
  .mc-faq-a, .mc-faq-chev, .mc-faq-a p, .mc-faq-q{ transition:none; }
}
@media (max-width: 960px){
  .footer-grid{ grid-template-columns:1fr 1fr; gap:40px; }
  .footer-brand{ grid-column:1 / -1; }
}
@media (max-width: 640px){
  .mc-faq{ padding:72px 22px 88px; }
  .mc-faq-q{ font-size:0.97rem; padding:20px 10px; }
  .mc-faq-a p{ padding:0 10px 22px; }
  .footer-grid{ grid-template-columns:1fr; gap:36px; }
  .footer{ padding:56px 22px 0; }
  .footer-bottom{ flex-direction:column; text-align:center; padding:22px 0 26px; }
}
@media (prefers-reduced-motion: reduce){
  .rise{ opacity:1; transform:none; animation:none; }
  .hero-eyebrow .dot{ animation:none; }
  .stream{ animation:none; }
  .hub-pulse{ animation:none; }
  .btn{ transition:none; }
  html{ scroll-behavior:auto; }
}

/* ========================================================
   [ABOUT]
   ======================================================== */
/* ============================================================
   ABOUT HERO — asymmetric: manifesto copy + stat panel
   ============================================================ */
.about-hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  padding:calc(var(--header-h) + 60px) 28px 90px;
  overflow:hidden;
}
.about-hero-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.about-hero-bg .glow{ position:absolute; border-radius:50%; filter:blur(100px); }
.about-hero-bg .glow-1{ width:640px; height:640px; top:-260px; left:-140px; background:var(--violet-glow); }
.about-hero-bg .glow-2{ width:500px; height:500px; bottom:-200px; right:-80px; background:var(--magenta-glow); }
.about-hero-bg .glow-3{ width:360px; height:360px; top:30%; right:26%; background:rgba(255,59,78,0.08); }
.about-hero-bg .grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 75% 65% at 40% 40%, black 25%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 75% 65% at 40% 40%, black 25%, transparent 75%);
}

.about-hero-inner{
  position:relative; z-index:1;
  width:100%; max-width:1240px; margin:0 auto;
  display:grid; grid-template-columns:1.15fr 0.85fr; gap:56px; align-items:center;
}

/* LEFT: manifesto */
.about-eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  padding:7px 18px; margin-bottom:28px;
  border:1px solid rgba(255,59,78,0.35); border-radius:100px;
  background:rgba(255,59,78,0.08);
  font-size:0.74rem; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:#FF8A96;
}
.about-eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--red); box-shadow:0 0 10px var(--red); animation:pulse 2.2s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:0.5; transform:scale(0.8); } }

.about-hero h1{
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  font-size:clamp(2.3rem, 4.6vw, 3.8rem);
  line-height:1.08;
  letter-spacing:-0.018em;
  margin-bottom:24px;
}
.about-hero h1 .accent{
  background:linear-gradient(95deg, #FF3B4E 10%, #B76CFF 90%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.about-hero .manifesto{
  font-size:1.08rem; line-height:1.78; color:var(--muted);
  max-width:600px; margin-bottom:22px;
}
.about-hero .manifesto strong{ color:var(--text); font-weight:600; }

.about-hero .tech-line{
  display:flex; align-items:flex-start; gap:12px;
  font-size:0.98rem; line-height:1.65; color:var(--muted);
  max-width:580px; margin-bottom:36px;
  padding:16px 18px; border-radius:14px;
  background:var(--surface); border:1px solid var(--line);
}
.about-hero .tech-line svg{ flex-shrink:0; margin-top:1px; }
.about-hero .tech-line b{ color:#FF8A96; font-weight:600; }

.about-hero-ctas{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.btn{ display:inline-flex; align-items:center; gap:9px; padding:15px 30px; font-size:1rem; font-weight:600; text-decoration:none; border-radius:13px; transition:transform .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease; }
.btn-primary{ color:#fff; background:linear-gradient(135deg, var(--red), var(--magenta)); box-shadow:0 6px 26px rgba(255,59,78,0.4); }
.btn-primary:hover{ transform:translateY(-3px); box-shadow:0 12px 40px rgba(255,59,78,0.45), 0 0 24px rgba(255,59,78,0.3); }
.btn-outline{ color:var(--text); background:var(--surface); border:1px solid var(--line); }
.btn-outline:hover{ transform:translateY(-3px); border-color:rgba(255,255,255,0.25); background:rgba(255,255,255,0.09); box-shadow:0 10px 30px rgba(124,58,237,0.18); }
.btn:focus-visible{ outline:2px solid var(--red); outline-offset:3px; }

/* RIGHT: stat panel (the scale, made tangible) */
.about-stats{
  position:relative;
  border-radius:22px;
  padding:12px;
  background:linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015));
  border:1px solid rgba(255,255,255,0.11);
  box-shadow:0 30px 80px rgba(0,0,0,0.55), 0 0 60px rgba(124,58,237,0.15);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.about-stats::before{
  content:""; position:absolute; inset:-1px; border-radius:22px; padding:1px;
  background:linear-gradient(140deg, rgba(255,59,78,0.5), transparent 35%, transparent 65%, rgba(124,58,237,0.5));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
}
.stat-row{
  display:flex; align-items:center; gap:16px;
  padding:20px 20px;
  border-radius:14px;
}
.stat-row + .stat-row{ border-top:1px solid rgba(255,255,255,0.07); }
.stat-ico{
  flex-shrink:0; display:grid; place-items:center;
  width:46px; height:46px; border-radius:13px;
  background:linear-gradient(135deg, rgba(255,59,78,0.14), rgba(124,58,237,0.14));
  border:1px solid rgba(255,59,78,0.28);
}
.stat-num{
  font-family:'Space Grotesk', sans-serif;
  font-size:1.7rem; font-weight:700; line-height:1; color:var(--text);
}
.stat-num .cap{
  background:linear-gradient(95deg, #FF3B4E, #B76CFF);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stat-label{ display:block; font-size:0.8rem; font-weight:500; color:var(--muted); margin-top:5px; letter-spacing:0.02em; }

/* load-in sequence */
.rise{ opacity:0; transform:translateY(18px); animation:rise .7s ease forwards; }
.rise.d1{ animation-delay:.05s; } .rise.d2{ animation-delay:.15s; } .rise.d3{ animation-delay:.25s; }
.rise.d4{ animation-delay:.35s; } .rise.d5{ animation-delay:.42s; }
@keyframes rise{ to{ opacity:1; transform:translateY(0); } }

/* ============================================================
   SECTION 2 · INFRASTRUCTURE & MISSION
   ============================================================ */
.mission{
  position:relative;
  padding:96px 28px 110px;
  overflow:hidden;
}
.mission::before{
  content:"";
  position:absolute;
  top:12%; left:50%;
  transform:translateX(-50%);
  width:820px; height:520px;
  background:radial-gradient(ellipse at center, rgba(124,58,237,0.10), rgba(217,70,160,0.05) 48%, transparent 72%);
  pointer-events:none;
}
.mission-inner{
  position:relative;
  max-width:1180px;
  margin:0 auto;
}
.mission-head{
  max-width:760px;
  margin:0 auto 30px;
  text-align:center;
}
.mission-head h2{
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  font-size:clamp(1.7rem, 3.4vw, 2.6rem);
  line-height:1.15;
  letter-spacing:-0.01em;
  margin-bottom:20px;
}
.mission-head h2 .accent{
  background:linear-gradient(95deg, #FF3B4E 10%, #B76CFF 90%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.mission-head p{
  font-size:1.04rem;
  line-height:1.8;
  color:var(--muted);
}
.mission-head p strong{ color:var(--text); font-weight:600; }

/* decade badge */
.decade-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin:0 auto 40px;
  padding:9px 20px;
  border-radius:100px;
  background:linear-gradient(135deg, rgba(255,59,78,0.1), rgba(124,58,237,0.1));
  border:1px solid rgba(255,59,78,0.3);
}
.decade-badge b{
  font-family:'Space Grotesk', sans-serif;
  font-size:1.05rem;
  font-weight:700;
  background:linear-gradient(95deg, #FF3B4E, #B76CFF);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.decade-badge span{
  font-size:0.82rem;
  font-weight:500;
  letter-spacing:0.06em;
  color:var(--muted);
}
.mission-head-wrap{ text-align:center; }

/* 3-pillar feature grid */
.pillar-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:22px;
  margin-top:10px;
}
.pillar{
  position:relative;
  border-radius:20px;
  padding:34px 30px;
  background:linear-gradient(165deg, rgba(255,255,255,0.055), rgba(255,255,255,0.018));
  border:1px solid rgba(255,255,255,0.09);
  overflow:hidden;
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
/* gradient border reveal on hover */
.pillar::before{
  content:"";
  position:absolute; inset:-1px; border-radius:20px; padding:1px;
  background:linear-gradient(140deg, rgba(255,59,78,0.55), transparent 40%, transparent 60%, rgba(124,58,237,0.55));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .3s ease; pointer-events:none;
}
/* corner glow */
.pillar::after{
  content:"";
  position:absolute; top:-60px; right:-60px;
  width:210px; height:210px; border-radius:50%;
  background:radial-gradient(circle, rgba(124,58,237,0.14), transparent 70%);
  opacity:0; transition:opacity .3s ease; pointer-events:none;
}
.pillar:hover{
  transform:translateY(-6px);
  border-color:transparent;
  box-shadow:0 22px 50px rgba(0,0,0,0.45), 0 0 32px rgba(124,58,237,0.14);
}
.pillar:hover::before, .pillar:hover::after{ opacity:1; }

.pillar-icon{
  display:grid; place-items:center;
  width:52px; height:52px; border-radius:15px;
  background:linear-gradient(135deg, rgba(255,59,78,0.13), rgba(124,58,237,0.13));
  border:1px solid rgba(255,59,78,0.28);
  margin-bottom:22px;
  transition:transform .3s ease;
}
.pillar:hover .pillar-icon{ transform:scale(1.06); }
.pillar-icon svg{ display:block; }

.pillar h3{
  font-family:'Space Grotesk', sans-serif;
  font-weight:600;
  font-size:1.2rem;
  letter-spacing:-0.005em;
  color:var(--text);
  margin-bottom:12px;
}
.pillar p{
  font-size:0.93rem;
  line-height:1.72;
  color:var(--muted);
}
.pillar p strong{ color:var(--text); font-weight:600; }
/* metric chip inside each pillar */
.pillar-metric{
  display:inline-block;
  margin-top:18px;
  padding:5px 13px;
  border-radius:100px;
  font-family:'Space Grotesk', sans-serif;
  font-size:0.78rem;
  font-weight:700;
  letter-spacing:0.02em;
  color:#FF8A96;
  background:rgba(255,59,78,0.09);
  border:1px solid rgba(255,59,78,0.28);
}

/* ============================================================
   SECTION 3 · CLOSING CTA BANNER
   ============================================================ */
.closing{
  position:relative;
  padding:40px 28px 104px;
}
.closing-banner{
  position:relative;
  max-width:1100px;
  margin:0 auto;
  border-radius:28px;
  padding:72px 40px;
  text-align:center;
  overflow:hidden;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(124,58,237,0.5), transparent 55%),
    radial-gradient(ellipse at 85% 100%, rgba(217,70,160,0.45), transparent 55%),
    linear-gradient(135deg, #2B0A4E, #12071f);
  border:1px solid rgba(183,108,255,0.35);
  box-shadow:0 40px 90px rgba(0,0,0,0.5), 0 0 60px rgba(124,58,237,0.2);
}
/* subtle grid texture inside the banner */
.closing-banner::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, black 20%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, black 20%, transparent 75%);
  pointer-events:none;
}
.closing-inner{ position:relative; z-index:1; max-width:680px; margin:0 auto; }

.closing-eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  padding:7px 18px; margin-bottom:24px;
  border:1px solid rgba(255,255,255,0.22); border-radius:100px;
  background:rgba(255,255,255,0.07);
  font-size:0.73rem; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:#fff;
}
.closing-eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:#fff; box-shadow:0 0 10px rgba(255,255,255,0.8); }

.closing h2{
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  font-size:clamp(1.9rem, 3.8vw, 2.9rem);
  line-height:1.13;
  letter-spacing:-0.015em;
  color:#fff;
  margin-bottom:22px;
}
.closing h2 .accent{
  background:linear-gradient(95deg, #FF8A96, #E9D5FF);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.closing .support-copy{
  font-size:1.06rem;
  line-height:1.8;
  color:rgba(244,241,250,0.82);
  margin-bottom:40px;
}
.closing .support-copy strong{ color:#fff; font-weight:600; }

/* CTA button */
.closing-btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:17px 40px;
  font-family:'Inter', sans-serif;
  font-size:1.06rem; font-weight:700;
  color:#1a0730; text-decoration:none;
  border-radius:14px;
  background:linear-gradient(135deg, #ffffff, #F1E9FF);
  box-shadow:0 10px 34px rgba(255,255,255,0.25);
  transition:transform .22s ease, box-shadow .22s ease;
}
.closing-btn:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 44px rgba(255,255,255,0.35);
}
.closing-btn:focus-visible{ outline:2px solid #fff; outline-offset:4px; }
.closing-btn svg{ transition:transform .22s ease; }
.closing-btn:hover svg{ transform:translateX(4px); }

/* trust indicators */
.closing-trust{
  display:flex; align-items:center; justify-content:center;
  gap:14px 26px; flex-wrap:wrap;
  margin-top:30px;
}
.closing-trust span{
  display:inline-flex; align-items:center; gap:8px;
  font-size:0.86rem; font-weight:500; color:rgba(244,241,250,0.75);
}
.closing-trust svg{ flex-shrink:0; }

/* ============================================================
   SECTION 4 · FAQ (details/summary accordion)
   ============================================================ */
.about-faq{
  position:relative;
  padding:40px 28px 96px;
  overflow:hidden;
}
.about-faq::before{
  content:"";
  position:absolute;
  top:0; left:50%;
  transform:translateX(-50%);
  width:720px; height:400px;
  background:radial-gradient(ellipse at center, rgba(124,58,237,0.08), transparent 70%);
  pointer-events:none;
}
.about-faq-inner{
  position:relative;
  max-width:820px;
  margin:0 auto;
}
.about-faq-head{
  max-width:640px;
  margin:0 auto 48px;
  text-align:center;
}
.about-faq-head h2{
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  font-size:clamp(1.7rem, 3.4vw, 2.5rem);
  line-height:1.15;
  letter-spacing:-0.01em;
  margin-bottom:14px;
}
.about-faq-head h2 .accent{
  background:linear-gradient(95deg, #FF3B4E 10%, #B76CFF 90%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.about-faq-head p{
  font-size:1.02rem;
  line-height:1.75;
  color:var(--muted);
}

/* details/summary accordion — pure CSS, no JS */
.faq-item{
  border-bottom:1px solid rgba(255,255,255,0.09);
  border-radius:12px 12px 0 0;
  transition:background .35s ease, border-color .35s ease;
}
.faq-item[open]{
  background:linear-gradient(165deg, rgba(124,58,237,0.12), rgba(217,70,160,0.06));
  border-bottom-color:rgba(217,70,160,0.45);
}
.faq-item summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:22px 16px;
  font-size:1.02rem;
  font-weight:600;
  line-height:1.45;
  color:var(--text);
  transition:color .25s ease;
}
.faq-item summary::-webkit-details-marker{ display:none; }  /* Safari default arrow */
.faq-item summary:hover{ color:#FF8A96; }
.faq-item summary:focus-visible{ outline:2px solid var(--red); outline-offset:-2px; border-radius:10px; }
/* h3 wraps the summary for SEO structure while staying inline */
.faq-item summary h3{
  margin:0;
  font-family:'Inter', sans-serif;
  font-size:inherit;
  font-weight:inherit;
  color:inherit;
  line-height:inherit;
}

/* chevron */
.faq-chev{
  flex-shrink:0;
  display:grid; place-items:center;
  width:28px; height:28px; border-radius:9px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(183,108,255,0.3);
  transition:transform .35s cubic-bezier(.4,0,.2,1), border-color .3s ease, background .3s ease;
}
.faq-item[open] .faq-chev{
  transform:rotate(180deg);
  background:rgba(124,58,237,0.18);
  border-color:rgba(183,108,255,0.6);
}

/* answer reveal — smooth open animation */
.faq-answer{ padding:0 16px 24px; }
.faq-answer p{
  font-size:0.94rem;
  line-height:1.78;
  color:var(--muted);
  margin:0;
}
.faq-answer p strong{ color:var(--text); font-weight:600; }
.faq-item[open] .faq-answer{
  animation:faqReveal .4s ease;
}
@keyframes faqReveal{
  from{ opacity:0; transform:translateY(-6px); }
  to{ opacity:1; transform:translateY(0); }
}

/* ============================================================
   PAGE FOOTER (minimalist)
   ============================================================ */
.about-footer{
  position:relative;
  background:#050508;
  padding:48px 28px;
}
.about-footer::before{
  content:"";
  position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(124,58,237,0.7), rgba(217,70,160,0.5), transparent);
  box-shadow:0 0 18px rgba(124,58,237,0.35);
}
.about-footer-inner{
  max-width:1180px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
}
.about-footer .dw-logo{ flex-shrink:0; }
.about-footer-links{
  display:flex;
  align-items:center;
  gap:8px 26px;
  flex-wrap:wrap;
}
.about-footer-links a{
  font-size:0.88rem;
  font-weight:500;
  color:var(--muted);
  text-decoration:none;
  transition:color .22s ease;
}
.about-footer-links a:hover{ color:#fff; }
.about-footer-links a:focus-visible{ outline:2px solid var(--red); outline-offset:3px; border-radius:4px; }
.about-footer-copy{
  width:100%;
  padding-top:22px;
  margin-top:6px;
  border-top:1px solid rgba(255,255,255,0.06);
  font-size:0.82rem;
  color:rgba(163,157,186,0.7);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px){
  .about-hero-inner{ grid-template-columns:1fr; gap:52px; }
  .about-hero .manifesto, .about-hero .tech-line{ max-width:none; }
  .about-stats{ max-width:520px; }
  /* Pillars: single column on tablet/mobile for full readability */
  .pillar-grid{ grid-template-columns:1fr; max-width:560px; margin-left:auto; margin-right:auto; }
  .mission{ padding:72px 22px 84px; }
  /* Closing banner: tighten padding */
  .closing-banner{ padding:56px 26px; border-radius:24px; }
  .closing{ padding:24px 22px 84px; }
}
@media (max-width: 640px){
  .about-faq{ padding:24px 22px 72px; }
  .faq-item summary{ font-size:0.97rem; padding:20px 12px; }
  .faq-answer{ padding:0 12px 22px; }
  .about-footer-inner{ flex-direction:column; align-items:flex-start; gap:22px; }
  .about-footer-links{ gap:14px 22px; }
}
@media (prefers-reduced-motion: reduce){
  .faq-item, .faq-chev, .faq-item summary{ transition:none; }
  .faq-item[open] .faq-answer{ animation:none; }
}
@media (max-width: 560px){
  .about-hero-ctas{ flex-direction:column; }
  .btn{ width:100%; justify-content:center; }
}
@media (prefers-reduced-motion: reduce){
  .rise{ opacity:1; transform:none; animation:none; }
  .about-eyebrow .dot{ animation:none; }
  .btn, .dw-header, .dw-header-cta{ transition:none; }
  html{ scroll-behavior:auto; }
}

/* ========================================================
   [CONTACT]
   ======================================================== */
/* ============================================================
   CONTACT HERO — split screen: copy | contact cards
   ============================================================ */
.contact-hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  padding:calc(var(--header-h) + 60px) 28px 90px;
  overflow:hidden;
}
.contact-hero-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.contact-hero-bg .glow{ position:absolute; border-radius:50%; filter:blur(100px); }
.contact-hero-bg .glow-1{ width:640px; height:640px; top:-260px; left:-140px; background:var(--violet-glow); }
.contact-hero-bg .glow-2{ width:520px; height:520px; bottom:-200px; right:-80px; background:var(--magenta-glow); }
.contact-hero-bg .glow-3{ width:360px; height:360px; top:30%; right:28%; background:rgba(255,59,78,0.08); }
.contact-hero-bg .grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 75% 65% at 40% 40%, black 25%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 75% 65% at 40% 40%, black 25%, transparent 75%);
}

.contact-hero-inner{
  position:relative; z-index:1;
  width:100%; max-width:1240px; margin:0 auto;
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center;
}

/* LEFT: welcome copy */
.contact-eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  padding:7px 18px; margin-bottom:28px;
  border:1px solid rgba(255,59,78,0.35); border-radius:100px;
  background:rgba(255,59,78,0.08);
  font-size:0.74rem; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:#FF8A96;
}
.contact-eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--red); box-shadow:0 0 10px var(--red); animation:pulse 2.2s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:0.5; transform:scale(0.8); } }

.contact-hero h1{
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  font-size:clamp(2.3rem, 4.6vw, 3.7rem);
  line-height:1.08;
  letter-spacing:-0.018em;
  margin-bottom:24px;
}
.contact-hero h1 .accent{
  background:linear-gradient(95deg, #FF3B4E 10%, #B76CFF 90%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.contact-hero .intro{
  font-size:1.08rem; line-height:1.78; color:var(--muted);
  max-width:560px; margin-bottom:30px;
}
.contact-hero .intro strong{ color:var(--text); font-weight:600; }

/* concierge assurances */
.concierge-points{
  list-style:none; display:flex; flex-direction:column; gap:13px;
}
.concierge-points li{
  display:flex; align-items:center; gap:11px;
  font-size:0.95rem; font-weight:500; color:var(--text);
}
.concierge-points li svg{ flex-shrink:0; }

/* RIGHT: contact cards */
.contact-cards{ display:flex; flex-direction:column; gap:18px; }
.contact-card{
  position:relative;
  display:flex; align-items:center; gap:18px;
  padding:26px 26px;
  border-radius:20px;
  text-decoration:none;
  background:linear-gradient(165deg, rgba(255,255,255,0.055), rgba(255,255,255,0.018));
  border:1px solid rgba(255,255,255,0.1);
  overflow:hidden;
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.contact-card::after{
  content:""; position:absolute; top:-60px; right:-60px;
  width:200px; height:200px; border-radius:50%;
  background:radial-gradient(circle, rgba(124,58,237,0.16), transparent 70%);
  opacity:0; transition:opacity .3s ease; pointer-events:none;
}
.contact-card:hover{
  transform:translateY(-4px);
  border-color:rgba(217,70,160,0.6);
  box-shadow:0 18px 44px rgba(0,0,0,0.45), 0 0 34px rgba(217,70,160,0.18);
}
.contact-card:hover::after{ opacity:1; }
.contact-card:focus-visible{ outline:2px solid var(--red); outline-offset:3px; }

.contact-card-ico{
  flex-shrink:0;
  display:grid; place-items:center;
  width:54px; height:54px; border-radius:15px;
  background:linear-gradient(135deg, rgba(255,59,78,0.14), rgba(124,58,237,0.14));
  border:1px solid rgba(255,59,78,0.28);
  transition:transform .3s ease;
}
.contact-card:hover .contact-card-ico{ transform:scale(1.06); }
.contact-card-ico.wa{
  background:linear-gradient(135deg, rgba(37,211,102,0.16), rgba(18,140,80,0.14));
  border-color:rgba(37,211,102,0.4);
}
.contact-card-body{ min-width:0; }
.contact-card-label{
  display:block;
  font-size:0.72rem; font-weight:700; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--muted); margin-bottom:6px;
}
.contact-card-value{
  display:block;
  font-family:'Space Grotesk', sans-serif;
  font-size:1.12rem; font-weight:600; color:var(--text);
  word-break:break-word;
}
.contact-card-note{
  display:block; font-size:0.82rem; color:var(--muted); margin-top:4px;
}
.contact-card-arrow{
  margin-left:auto; flex-shrink:0; color:var(--muted);
  transition:transform .3s ease, color .3s ease;
}
.contact-card:hover .contact-card-arrow{ transform:translateX(4px); color:#FF8A96; }

/* small reassurance strip under the cards */
.contact-hours{
  display:flex; align-items:center; gap:9px;
  margin-top:4px; padding:14px 18px;
  border-radius:14px;
  background:var(--surface); border:1px solid var(--line);
  font-size:0.86rem; color:var(--muted);
}
.contact-hours .live{
  width:8px; height:8px; border-radius:50%;
  background:#5EE38F; box-shadow:0 0 10px #5EE38F;
  animation:pulse 2.2s ease-in-out infinite;
}
.contact-hours b{ color:var(--text); font-weight:600; }

/* load-in sequence */
.rise{ opacity:0; transform:translateY(18px); animation:rise .7s ease forwards; }
.rise.d1{ animation-delay:.05s; } .rise.d2{ animation-delay:.15s; } .rise.d3{ animation-delay:.25s; }
.rise.d4{ animation-delay:.35s; } .rise.d5{ animation-delay:.42s; } .rise.d6{ animation-delay:.5s; }
@keyframes rise{ to{ opacity:1; transform:translateY(0); } }

/* ============================================================
   SECTION 2 · QUICK SUPPORT & SETUP HUB
   ============================================================ */
.support-hub{
  position:relative;
  padding:40px 28px 100px;
  overflow:hidden;
}
.support-hub::before{
  content:"";
  position:absolute;
  top:6%; left:50%;
  transform:translateX(-50%);
  width:820px; height:520px;
  background:radial-gradient(ellipse at center, rgba(124,58,237,0.10), rgba(217,70,160,0.05) 48%, transparent 72%);
  pointer-events:none;
}
.support-hub-inner{ position:relative; max-width:1180px; margin:0 auto; }
.support-hub-head{ max-width:700px; margin:0 auto 52px; text-align:center; }
.support-hub-head h2{
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  font-size:clamp(1.7rem, 3.4vw, 2.5rem);
  line-height:1.15; letter-spacing:-0.01em; margin-bottom:16px;
}
.support-hub-head h2 .accent{
  background:linear-gradient(95deg, #FF3B4E 10%, #B76CFF 90%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.support-hub-head p{ font-size:1.02rem; line-height:1.75; color:var(--muted); }

/* self-serve card grid */
.hub-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; margin-bottom:34px; }
.hub-card{
  position:relative; display:flex; flex-direction:column;
  border-radius:20px; padding:30px 26px;
  background:linear-gradient(165deg, rgba(255,255,255,0.055), rgba(255,255,255,0.018));
  border:1px solid rgba(255,255,255,0.09);
  text-decoration:none; overflow:hidden;
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.hub-card::before{
  content:""; position:absolute; inset:-1px; border-radius:20px; padding:1px;
  background:linear-gradient(140deg, rgba(255,59,78,0.55), transparent 40%, transparent 60%, rgba(124,58,237,0.55));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .3s ease; pointer-events:none;
}
.hub-card::after{
  content:""; position:absolute; top:-60px; right:-60px;
  width:200px; height:200px; border-radius:50%;
  background:radial-gradient(circle, rgba(124,58,237,0.15), transparent 70%);
  opacity:0; transition:opacity .3s ease; pointer-events:none;
}
.hub-card:hover{
  transform:translateY(-6px); border-color:transparent;
  box-shadow:0 22px 50px rgba(0,0,0,0.45), 0 0 32px rgba(124,58,237,0.14);
}
.hub-card:hover::before, .hub-card:hover::after{ opacity:1; }
.hub-card:focus-visible{ outline:2px solid var(--red); outline-offset:3px; }
.hub-icon{
  display:grid; place-items:center;
  width:50px; height:50px; border-radius:14px;
  background:linear-gradient(135deg, rgba(255,59,78,0.13), rgba(124,58,237,0.13));
  border:1px solid rgba(255,59,78,0.28);
  margin-bottom:20px; transition:transform .3s ease;
}
.hub-card:hover .hub-icon{ transform:scale(1.06); }
.hub-icon svg{ display:block; }
.hub-card h3{
  font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:1.1rem;
  letter-spacing:-0.005em; color:var(--text); margin-bottom:10px;
}
.hub-card p{ font-size:0.9rem; line-height:1.65; color:var(--muted); margin-bottom:20px; flex-grow:1; }
.hub-link{
  display:inline-flex; align-items:center; gap:7px;
  font-size:0.88rem; font-weight:600; color:#FF8A96;
  transition:gap .25s ease, color .25s ease;
}
.hub-card:hover .hub-link{ gap:11px; color:#fff; }
.hub-link svg{ transition:transform .25s ease; }
.hub-card:hover .hub-link svg{ transform:translateX(2px); }

/* live-chat banner under the grid */
.hub-chat{
  display:flex; align-items:center; gap:20px; flex-wrap:wrap; justify-content:space-between;
  padding:26px 30px; border-radius:20px;
  background:linear-gradient(135deg, rgba(37,211,102,0.08), rgba(124,58,237,0.07));
  border:1px solid rgba(37,211,102,0.28);
}
.hub-chat-text{ display:flex; align-items:center; gap:16px; min-width:0; }
.hub-chat-ico{
  flex-shrink:0; display:grid; place-items:center;
  width:48px; height:48px; border-radius:14px;
  background:rgba(37,211,102,0.14); border:1px solid rgba(37,211,102,0.4);
}
.hub-chat-text b{ display:block; font-family:'Space Grotesk', sans-serif; font-size:1.08rem; color:var(--text); margin-bottom:3px; }
.hub-chat-text span{ font-size:0.9rem; color:var(--muted); }
.hub-chat-btn{
  display:inline-flex; align-items:center; gap:9px; flex-shrink:0;
  padding:14px 26px; font-size:0.95rem; font-weight:700;
  color:#06210f; text-decoration:none; border-radius:12px;
  background:linear-gradient(135deg, #25D366, #14a34e);
  box-shadow:0 6px 22px rgba(37,211,102,0.35);
  transition:transform .2s ease, box-shadow .2s ease;
}
.hub-chat-btn:hover{ transform:translateY(-2px); box-shadow:0 10px 30px rgba(37,211,102,0.45); }
.hub-chat-btn:focus-visible{ outline:2px solid #fff; outline-offset:3px; }

/* ============================================================
   SECTION 3 · SUPPORT FAQ (details/summary accordion)
   ============================================================ */
.support-faq{
  position:relative;
  padding:40px 28px 96px;
  overflow:hidden;
}
.support-faq::before{
  content:"";
  position:absolute;
  top:0; left:50%;
  transform:translateX(-50%);
  width:720px; height:400px;
  background:radial-gradient(ellipse at center, rgba(124,58,237,0.08), transparent 70%);
  pointer-events:none;
}
.support-faq-inner{
  position:relative;
  max-width:820px;
  margin:0 auto;
}
.support-faq-head{
  max-width:640px;
  margin:0 auto 48px;
  text-align:center;
}
.support-faq-head h2{
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  font-size:clamp(1.7rem, 3.4vw, 2.5rem);
  line-height:1.15;
  letter-spacing:-0.01em;
  margin-bottom:14px;
}
.support-faq-head h2 .accent{
  background:linear-gradient(95deg, #FF3B4E 10%, #B76CFF 90%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.support-faq-head p{
  font-size:1.02rem;
  line-height:1.75;
  color:var(--muted);
}

/* details/summary accordion — pure CSS */
.faq-item{
  border-bottom:1px solid rgba(255,255,255,0.09);
  border-radius:12px 12px 0 0;
  transition:background .35s ease, border-color .35s ease;
}
.faq-item[open]{
  background:linear-gradient(165deg, rgba(124,58,237,0.12), rgba(217,70,160,0.06));
  border-bottom-color:rgba(217,70,160,0.45);
}
.faq-item summary{
  list-style:none;
  cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:22px 16px;
  font-size:1.02rem; font-weight:600; line-height:1.45;
  color:var(--text);
  transition:color .25s ease;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary:hover{ color:#FF8A96; }
.faq-item summary:focus-visible{ outline:2px solid var(--red); outline-offset:-2px; border-radius:10px; }
.faq-item summary h3{
  margin:0;
  font-family:'Inter', sans-serif;
  font-size:inherit; font-weight:inherit; color:inherit; line-height:inherit;
}
.faq-chev{
  flex-shrink:0;
  display:grid; place-items:center;
  width:28px; height:28px; border-radius:9px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(183,108,255,0.3);
  transition:transform .35s cubic-bezier(.4,0,.2,1), border-color .3s ease, background .3s ease;
}
.faq-item[open] .faq-chev{
  transform:rotate(180deg);
  background:rgba(124,58,237,0.18);
  border-color:rgba(183,108,255,0.6);
}
.faq-answer{ padding:0 16px 24px; }
.faq-answer p{
  font-size:0.94rem; line-height:1.78; color:var(--muted); margin:0;
}
.faq-answer p strong{ color:var(--text); font-weight:600; }
.faq-answer a{ color:#FF8A96; text-decoration:none; border-bottom:1px solid rgba(255,59,78,0.4); transition:color .2s ease, border-color .2s ease; }
.faq-answer a:hover{ color:#fff; border-color:#fff; }
.faq-item[open] .faq-answer{ animation:faqReveal .4s ease; }
@keyframes faqReveal{
  from{ opacity:0; transform:translateY(-6px); }
  to{ opacity:1; transform:translateY(0); }
}

/* ============================================================
   PAGE FOOTER (minimalist)
   ============================================================ */
.contact-footer{
  position:relative;
  background:#050508;
  padding:48px 28px;
}
.contact-footer::before{
  content:"";
  position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(124,58,237,0.7), rgba(217,70,160,0.5), transparent);
  box-shadow:0 0 18px rgba(124,58,237,0.35);
}
.contact-footer-inner{
  max-width:1180px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.contact-footer .dw-logo{ flex-shrink:0; }
.contact-footer-links{ display:flex; align-items:center; gap:8px 26px; flex-wrap:wrap; }
.contact-footer-links a{
  font-size:0.88rem; font-weight:500; color:var(--muted); text-decoration:none;
  transition:color .22s ease;
}
.contact-footer-links a:hover{ color:#fff; }
.contact-footer-links a:focus-visible{ outline:2px solid var(--red); outline-offset:3px; border-radius:4px; }
.contact-footer-copy{
  width:100%;
  padding-top:22px; margin-top:6px;
  border-top:1px solid rgba(255,255,255,0.06);
  font-size:0.82rem; color:rgba(163,157,186,0.7);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px){
  .contact-hero-inner{ grid-template-columns:1fr; gap:48px; }
  .contact-hero .intro{ max-width:none; }
  .contact-cards{ max-width:560px; }
  /* Support hub: 2-column grid on tablet */
  .hub-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width: 560px){
  .contact-card{ padding:22px 20px; gap:15px; }
  .contact-card-value{ font-size:1.02rem; }
  /* Support hub: single column, chat banner stacks */
  .hub-grid{ grid-template-columns:1fr; }
  .hub-chat{ flex-direction:column; align-items:flex-start; }
  .hub-chat-btn{ width:100%; justify-content:center; }
  /* FAQ + footer */
  .support-faq{ padding:24px 22px 72px; }
  .faq-item summary{ font-size:0.97rem; padding:20px 12px; }
  .faq-answer{ padding:0 12px 22px; }
  .contact-footer-inner{ flex-direction:column; align-items:flex-start; gap:22px; }
  .contact-footer-links{ gap:14px 22px; }
}
@media (prefers-reduced-motion: reduce){
  .rise{ opacity:1; transform:none; animation:none; }
  .contact-eyebrow .dot, .contact-hours .live{ animation:none; }
  .btn, .dw-header, .dw-header-cta, .contact-card{ transition:none; }
  .faq-item, .faq-chev, .faq-item summary{ transition:none; }
  .faq-item[open] .faq-answer{ animation:none; }
  html{ scroll-behavior:auto; }
}

/* ========================================================
   [BLOG INDEX + ARTICLE CARDS]
   ======================================================== */
/* ============================================================
   BLOG HERO
   ============================================================ */
.blog-hero{
  position:relative;
  min-height:82vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:calc(var(--header-h) + 80px) 28px 90px;
  overflow:hidden;
  text-align:center;
}
/* ambient background — swap freely */
.blog-hero-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.blog-hero-bg .glow{ position:absolute; border-radius:50%; filter:blur(100px); }
.blog-hero-bg .glow-1{ width:640px; height:640px; top:-260px; left:50%; transform:translateX(-50%); background:var(--violet-glow); }
.blog-hero-bg .glow-2{ width:440px; height:440px; bottom:-160px; left:-120px; background:var(--magenta-glow); }
.blog-hero-bg .glow-3{ width:380px; height:380px; bottom:-120px; right:-100px; background:rgba(255,59,78,0.10); }
.blog-hero-bg .grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 42%, black 28%, transparent 74%);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 42%, black 28%, transparent 74%);
}

.blog-hero-inner{ position:relative; z-index:1; max-width:840px; }

.blog-eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  padding:7px 18px; margin-bottom:28px;
  border:1px solid rgba(255,59,78,0.35); border-radius:100px;
  background:rgba(255,59,78,0.08);
  font-size:0.74rem; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:#FF8A96;
}
.blog-eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--red); box-shadow:0 0 10px var(--red); animation:pulse 2.2s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:0.5; transform:scale(0.8); } }

.blog-hero h1{
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  font-size:clamp(2.3rem, 5.4vw, 4rem);
  line-height:1.1;
  letter-spacing:-0.018em;
  margin-bottom:24px;
}
.blog-hero h1 .accent{
  background:linear-gradient(95deg, #FF3B4E 10%, #B76CFF 90%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.blog-hero .lede{
  font-size:1.1rem; line-height:1.75; color:var(--muted);
  max-width:660px; margin:0 auto 20px;
}
.blog-hero .lede strong{ color:var(--text); font-weight:600; }

.blog-hero .tech-note{
  font-size:0.98rem; line-height:1.7; color:var(--muted);
  max-width:600px; margin:0 auto 40px;
}
.blog-hero .tech-note b{ color:#FF8A96; font-weight:600; }

.blog-hero-ctas{ display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; margin-bottom:34px; }
.btn{ display:inline-flex; align-items:center; gap:9px; padding:15px 32px; font-size:1rem; font-weight:600; text-decoration:none; border-radius:13px; transition:transform .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease; }
.btn-primary{ color:#fff; background:linear-gradient(135deg, var(--red), var(--magenta)); box-shadow:0 6px 26px rgba(255,59,78,0.4); }
.btn-primary:hover{ transform:translateY(-3px); box-shadow:0 12px 40px rgba(255,59,78,0.45), 0 0 24px rgba(255,59,78,0.3); }
.btn-outline{ color:var(--text); background:var(--surface); border:1px solid var(--line); }
.btn-outline:hover{ transform:translateY(-3px); border-color:rgba(255,255,255,0.25); background:rgba(255,255,255,0.09); box-shadow:0 10px 30px rgba(124,58,237,0.18); }
.btn:focus-visible{ outline:2px solid var(--red); outline-offset:3px; }

/* topic chips — signals blog breadth + internal-link scaffolding */
.blog-topics{ display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; }
.blog-topics span.label{ font-size:0.8rem; font-weight:500; color:var(--muted); letter-spacing:0.04em; }
.blog-topics a{
  font-size:0.82rem; font-weight:500; color:var(--muted); text-decoration:none;
  padding:6px 14px; border-radius:100px;
  background:rgba(255,255,255,0.04); border:1px solid var(--line);
  transition:color .2s ease, border-color .2s ease, background .2s ease;
}
.blog-topics a:hover{ color:#fff; border-color:rgba(183,108,255,0.5); background:rgba(124,58,237,0.12); }

/* load-in sequence */
.rise{ opacity:0; transform:translateY(18px); animation:rise .7s ease forwards; }
.rise.d1{ animation-delay:.05s; } .rise.d2{ animation-delay:.15s; } .rise.d3{ animation-delay:.25s; }
.rise.d4{ animation-delay:.35s; } .rise.d5{ animation-delay:.45s; }
@keyframes rise{ to{ opacity:1; transform:translateY(0); } }

/* ============================================================
   BLOG INDEX — single post card
   ============================================================ */
.posts{
  position:relative;
  padding:20px 28px 96px;
}
.posts-inner{
  max-width:1180px;
  margin:0 auto;
}
.posts-head{
  margin-bottom:28px;
}
.posts-head h2{
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  font-size:clamp(1.4rem, 2.8vw, 1.9rem);
  letter-spacing:-0.01em;
  color:var(--text);
}
.posts-head p{ font-size:0.96rem; color:var(--muted); margin-top:6px; }

/* 3-per-row grid */
.posts-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}

/* the post card */
.post-card{
  position:relative;
  display:flex;
  flex-direction:column;
  border-radius:22px;
  overflow:hidden;
  text-decoration:none;
  background:linear-gradient(165deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
  border:1px solid rgba(255,255,255,0.09);
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.post-card::before{
  content:""; position:absolute; inset:-1px; border-radius:22px; padding:1px;
  background:linear-gradient(140deg, rgba(255,59,78,0.55), transparent 40%, transparent 60%, rgba(124,58,237,0.55));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .3s ease; pointer-events:none; z-index:2;
}
.post-card:hover{
  transform:translateY(-5px);
  border-color:transparent;
  box-shadow:0 24px 55px rgba(0,0,0,0.45), 0 0 34px rgba(124,58,237,0.16);
}
.post-card:hover::before{ opacity:1; }
.post-card:focus-visible{ outline:2px solid var(--red); outline-offset:3px; }

/* visual banner (CSS art — no image needed) */
.post-thumb{
  position:relative;
  height:160px;
  background:
    radial-gradient(ellipse at 20% 20%, rgba(124,58,237,0.5), transparent 55%),
    radial-gradient(ellipse at 85% 90%, rgba(217,70,160,0.4), transparent 55%),
    linear-gradient(135deg, #2B0A4E, #12071f);
  overflow:hidden;
}
.post-thumb.alt{
  background:
    radial-gradient(ellipse at 80% 20%, rgba(255,59,78,0.4), transparent 55%),
    radial-gradient(ellipse at 15% 90%, rgba(124,58,237,0.45), transparent 55%),
    linear-gradient(135deg, #10071f, #2B0A4E);
}
.post-thumb.alt2{
  background:
    radial-gradient(ellipse at 50% 15%, rgba(217,70,160,0.42), transparent 55%),
    radial-gradient(ellipse at 15% 95%, rgba(255,59,78,0.32), transparent 55%),
    linear-gradient(135deg, #1a0722, #12071f);
}
.post-thumb::after{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size:34px 34px;
  mask-image:radial-gradient(ellipse 70% 70% at 50% 50%, black 25%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 50%, black 25%, transparent 75%);
}
.post-thumb svg{ position:absolute; inset:0; margin:auto; opacity:0.9; }
.post-thumb .thumb-tag{
  position:absolute; top:16px; left:16px; z-index:1;
  padding:6px 14px; border-radius:100px;
  font-size:0.66rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase;
  color:#fff; background:rgba(0,0,0,0.35); border:1px solid rgba(255,255,255,0.25);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}

.post-body{ padding:24px 24px 26px; display:flex; flex-direction:column; flex-grow:1; }
.post-body .post-meta{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-size:0.78rem; color:var(--muted); margin-bottom:13px;
}
.post-body .post-meta .avatar{
  width:26px; height:26px; border-radius:50%;
  display:grid; place-items:center;
  font-family:'Space Grotesk', sans-serif; font-size:0.58rem; font-weight:700; color:#fff;
  background:linear-gradient(135deg, var(--red), var(--magenta));
}
.post-body .post-meta .dot-sep{ width:4px; height:4px; border-radius:50%; background:rgba(163,157,186,0.5); }
.post-body .post-meta b{ color:var(--text); font-weight:600; }
.post-body h3{
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  font-size:1.18rem;
  line-height:1.25; letter-spacing:-0.01em;
  color:var(--text); margin-bottom:11px;
  transition:color .25s ease;
}
.post-card:hover .post-body h3{ color:#FF8A96; }
.post-body p.excerpt{
  font-size:0.9rem; line-height:1.65; color:var(--muted); margin-bottom:18px;
  flex-grow:1;
}
.post-readmore{
  display:inline-flex; align-items:center; gap:8px;
  font-size:0.88rem; font-weight:700; color:#FF8A96;
  transition:gap .25s ease, color .25s ease;
}
.post-card:hover .post-readmore{ gap:12px; color:#fff; }
.post-readmore svg{ transition:transform .25s ease; }

/* ============================================================
   PAGE FOOTER (minimalist)
   ============================================================ */
.blog-footer{
  position:relative;
  background:#050508;
  padding:48px 28px;
}
.blog-footer::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(124,58,237,0.7), rgba(217,70,160,0.5), transparent);
  box-shadow:0 0 18px rgba(124,58,237,0.35);
}
.blog-footer-inner{
  max-width:1180px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.blog-footer .dw-logo{ flex-shrink:0; }
.blog-footer-links{ display:flex; align-items:center; gap:8px 26px; flex-wrap:wrap; }
.blog-footer-links a{ font-size:0.88rem; font-weight:500; color:var(--muted); text-decoration:none; transition:color .22s ease; }
.blog-footer-links a:hover{ color:#fff; }
.blog-footer-copy{
  width:100%; padding-top:22px; margin-top:6px;
  border-top:1px solid rgba(255,255,255,0.06);
  font-size:0.82rem; color:rgba(163,157,186,0.7);
}

@media (max-width: 900px){
  .posts-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width: 560px){
  .blog-hero-ctas{ flex-direction:column; }
  .btn{ width:100%; justify-content:center; }
  .posts{ padding:12px 22px 72px; }
  .posts-grid{ grid-template-columns:1fr; }
  .post-body{ padding:22px 22px 24px; }
  .blog-footer-inner{ flex-direction:column; align-items:flex-start; gap:22px; }
  .blog-footer-links{ gap:14px 22px; }
}
@media (prefers-reduced-motion: reduce){
  .rise{ opacity:1; transform:none; animation:none; }
  .blog-eyebrow .dot{ animation:none; }
  .btn, .dw-header, .dw-header-cta, .post-card{ transition:none; }
  html{ scroll-behavior:auto; }
}

/* ========================================================
   [FEATURES]
   ======================================================== */
/* ============================================================
   FEATURES HERO
   ============================================================ */
.feat-hero{
  position:relative;
  padding:calc(var(--header-h) + 80px) 28px 60px;
  text-align:center;
  overflow:hidden;
}
.feat-hero-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.feat-hero-bg .glow{ position:absolute; border-radius:50%; filter:blur(100px); }
.feat-hero-bg .glow-1{ width:600px; height:600px; top:-240px; left:50%; transform:translateX(-50%); background:var(--violet-glow); }
.feat-hero-bg .glow-2{ width:420px; height:420px; bottom:-160px; left:-100px; background:var(--magenta-glow); }
.feat-hero-bg .glow-3{ width:380px; height:380px; bottom:-120px; right:-90px; background:rgba(255,59,78,0.09); }
.feat-hero-bg .grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 40%, black 28%, transparent 74%);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 40%, black 28%, transparent 74%);
}
.feat-hero-inner{ position:relative; z-index:1; max-width:760px; margin:0 auto; }
.feat-eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  padding:7px 18px; margin-bottom:26px;
  border:1px solid rgba(255,59,78,0.35); border-radius:100px;
  background:rgba(255,59,78,0.08);
  font-size:0.74rem; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:#FF8A96;
}
.feat-eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--red); box-shadow:0 0 10px var(--red); animation:pulse 2.2s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:0.5; transform:scale(0.8); } }
.feat-hero h1{
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  font-size:clamp(2.2rem, 5vw, 3.7rem);
  line-height:1.1; letter-spacing:-0.018em;
  margin-bottom:22px;
}
.feat-hero h1 .accent{
  background:linear-gradient(95deg, #FF3B4E 10%, #B76CFF 90%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.feat-hero p.intro{
  font-size:1.1rem; line-height:1.75; color:var(--muted);
  max-width:640px; margin:0 auto;
}
.feat-hero p.intro strong{ color:var(--text); font-weight:600; }

/* ============================================================
   FEATURE GRID
   ============================================================ */
.features{
  position:relative;
  padding:40px 28px 100px;
}
.features-inner{ max-width:1180px; margin:0 auto; }
.features-head{
  text-align:center; margin-bottom:44px;
}
.features-head h2{
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  font-size:clamp(1.5rem, 3vw, 2.1rem);
  letter-spacing:-0.01em; color:var(--text);
}
.feat-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:22px;
}
/* 7th card spans wider on desktop for a balanced 3-3-1 layout */
.feat-card:last-child{ grid-column:2 / 3; }

.feat-card{
  position:relative;
  display:flex; flex-direction:column;
  border-radius:20px;
  padding:32px 28px;
  background:linear-gradient(165deg, rgba(255,255,255,0.055), rgba(255,255,255,0.018));
  border:1px solid rgba(255,255,255,0.09);
  overflow:hidden;
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
/* gradient border reveal on hover */
.feat-card::before{
  content:""; position:absolute; inset:-1px; border-radius:20px; padding:1px;
  background:linear-gradient(140deg, rgba(255,59,78,0.55), transparent 40%, transparent 60%, rgba(124,58,237,0.55));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .3s ease; pointer-events:none;
}
/* corner glow */
.feat-card::after{
  content:""; position:absolute; top:-60px; right:-60px;
  width:210px; height:210px; border-radius:50%;
  background:radial-gradient(circle, rgba(124,58,237,0.15), transparent 70%);
  opacity:0; transition:opacity .3s ease; pointer-events:none;
}
.feat-card:hover{
  transform:translateY(-6px);
  border-color:transparent;
  box-shadow:0 22px 50px rgba(0,0,0,0.45), 0 0 32px rgba(124,58,237,0.14);
}
.feat-card:hover::before, .feat-card:hover::after{ opacity:1; }

.feat-icon{
  display:grid; place-items:center;
  width:54px; height:54px; border-radius:15px;
  background:linear-gradient(135deg, rgba(255,59,78,0.13), rgba(124,58,237,0.13));
  border:1px solid rgba(255,59,78,0.28);
  margin-bottom:22px;
  transition:transform .3s ease;
}
.feat-card:hover .feat-icon{ transform:scale(1.07); }
.feat-icon svg{ display:block; }

.feat-card h3{
  font-family:'Space Grotesk', sans-serif;
  font-weight:600;
  font-size:1.18rem;
  letter-spacing:-0.005em;
  color:var(--text);
  margin-bottom:12px;
}
.feat-card p{
  font-size:0.94rem;
  line-height:1.72;
  color:var(--muted);
}

/* ============================================================
   CLOSING CTA
   ============================================================ */
.feat-cta{
  position:relative;
  max-width:1100px; margin:0 auto;
  padding:52px 40px;
  border-radius:24px;
  text-align:center;
  overflow:hidden;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(124,58,237,0.45), transparent 55%),
    radial-gradient(ellipse at 85% 100%, rgba(217,70,160,0.4), transparent 55%),
    linear-gradient(135deg, #2B0A4E, #12071f);
  border:1px solid rgba(183,108,255,0.35);
}
.feat-cta h2{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:clamp(1.5rem,3vw,2.1rem); color:#fff; margin-bottom:14px; }
.feat-cta p{ color:rgba(244,241,250,0.82); font-size:1.02rem; line-height:1.7; max-width:520px; margin:0 auto 28px; }
.feat-cta-btns{ display:flex; gap:15px; flex-wrap:wrap; justify-content:center; }
.feat-cta-btns a{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:15px 30px; font-size:1rem; font-weight:700; text-decoration:none; border-radius:13px;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.feat-cta-btns .primary{ color:#1a0730; background:linear-gradient(135deg,#fff,#F1E9FF); box-shadow:0 8px 26px rgba(255,255,255,0.22); }
.feat-cta-btns .primary:hover{ transform:translateY(-3px); box-shadow:0 14px 38px rgba(255,255,255,0.32); }
.feat-cta-btns .secondary{ color:#fff; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.25); }
.feat-cta-btns .secondary:hover{ transform:translateY(-3px); background:rgba(255,255,255,0.14); border-color:rgba(255,255,255,0.45); }

/* load-in */
.rise{ opacity:0; transform:translateY(18px); animation:rise .7s ease forwards; }
.rise.d1{ animation-delay:.05s; } .rise.d2{ animation-delay:.15s; } .rise.d3{ animation-delay:.25s; }
@keyframes rise{ to{ opacity:1; transform:translateY(0); } }

/* ============================================================
   PAGE FOOTER (minimalist)
   ============================================================ */
.blog-footer{ position:relative; background:#050508; padding:48px 28px; }
.blog-footer::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(124,58,237,0.7), rgba(217,70,160,0.5), transparent);
  box-shadow:0 0 18px rgba(124,58,237,0.35);
}
.blog-footer-inner{ max-width:1180px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.blog-footer .dw-logo{ flex-shrink:0; }
.blog-footer-links{ display:flex; align-items:center; gap:8px 26px; flex-wrap:wrap; }
.blog-footer-links a{ font-size:0.88rem; font-weight:500; color:var(--muted); text-decoration:none; transition:color .22s ease; }
.blog-footer-links a:hover{ color:#fff; }
.blog-footer-copy{ width:100%; padding-top:22px; margin-top:6px; border-top:1px solid rgba(255,255,255,0.06); font-size:0.82rem; color:rgba(163,157,186,0.7); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 920px){
  .feat-grid{ grid-template-columns:repeat(2, 1fr); }
  .feat-card:last-child{ grid-column:auto; }
}
@media (max-width: 620px){
  .feat-grid{ grid-template-columns:1fr; }
  .feat-hero{ padding:calc(var(--header-h) + 48px) 22px 40px; }
  .features{ padding:24px 22px 72px; }
  .feat-cta{ padding:40px 24px; }
  .feat-cta-btns a{ width:100%; }
  .blog-footer-inner{ flex-direction:column; align-items:flex-start; gap:22px; }
  .blog-footer-links{ gap:14px 22px; }
}
@media (prefers-reduced-motion: reduce){
  .rise{ opacity:1; transform:none; animation:none; }
  .feat-eyebrow .dot{ animation:none; }
  .dw-header, .dw-header-cta, .feat-card, .feat-cta-btns a{ transition:none; }
  html{ scroll-behavior:auto; }
}

/* ========================================================
   [LEGAL PAGES (refund/privacy/terms/dmca shared)]
   ======================================================== */
/* ============================================================
   ARTICLE
   ============================================================ */
.article{
  position:relative;
  padding:calc(var(--header-h) + 56px) 28px 90px;
}
.article-inner{ max-width:760px; margin:0 auto; }
/* back-to-blog link */
.article-back{
  display:inline-flex; align-items:center; gap:8px;
  font-size:0.86rem; font-weight:600; color:var(--muted); text-decoration:none;
  margin-bottom:26px; transition:color .2s ease, gap .2s ease;
}
.article-back:hover{ color:#FF8A96; gap:11px; }
.article-back svg{ transition:transform .2s ease; }
.article-back:hover svg{ transform:translateX(-3px); }

.article-cat{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 15px; margin-bottom:20px;
  border-radius:100px;
  font-size:0.72rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase;
  color:#FF8A96; background:rgba(255,59,78,0.09); border:1px solid rgba(255,59,78,0.3);
}
.article h1.article-title{
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  font-size:clamp(1.9rem, 4vw, 2.9rem);
  line-height:1.14; letter-spacing:-0.015em;
  margin-bottom:18px;
}
.article-meta{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding-bottom:28px; margin-bottom:36px;
  border-bottom:1px solid var(--line);
  font-size:0.86rem; color:var(--muted);
}
.article-meta .avatar{
  width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center;
  font-family:'Space Grotesk', sans-serif; font-size:0.72rem; font-weight:700; color:#fff;
  background:linear-gradient(135deg, var(--red), var(--magenta));
}
.article-meta .dot-sep{ width:4px; height:4px; border-radius:50%; background:rgba(163,157,186,0.5); }
.article-meta b{ color:var(--text); font-weight:600; }

/* body typography */
.article-body{ font-size:1.04rem; line-height:1.85; color:#C9C3DC; }
.article-body > p{ margin-bottom:22px; }
.article-body .lede{
  font-size:1.14rem; line-height:1.75; color:var(--text); font-weight:500; margin-bottom:30px;
}
.article-body h2{
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  font-size:clamp(1.35rem, 2.6vw, 1.7rem);
  line-height:1.25; color:var(--text); letter-spacing:-0.01em;
  margin:44px 0 16px;
  scroll-margin-top:calc(var(--header-h) + 20px);
}
.article-body h2 .num{
  display:inline-grid; place-items:center;
  width:32px; height:32px; margin-right:12px;
  border-radius:9px; font-size:0.95rem; font-weight:700; color:#fff; vertical-align:middle;
  background:linear-gradient(135deg, var(--red), var(--magenta));
  box-shadow:0 3px 14px rgba(255,59,78,0.4);
}
.article-body strong{ color:var(--text); font-weight:600; }
.article-body em{ color:#FF8A96; font-style:normal; font-weight:600; }

/* step block */
.step-block{
  position:relative;
  border-radius:18px;
  padding:28px 28px 26px;
  margin:0 0 22px;
  background:linear-gradient(165deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015));
  border:1px solid rgba(255,255,255,0.08);
  transition:border-color .3s ease, box-shadow .3s ease;
}
.step-block:hover{ border-color:rgba(124,58,237,0.4); box-shadow:0 0 30px rgba(124,58,237,0.1); }
.step-block h2{ margin-top:0; }
.step-block p:last-child{ margin-bottom:0; }

/* credential / feature list */
.article-body ul.checks{
  list-style:none; display:flex; flex-direction:column; gap:12px; margin:0 0 22px;
}
.article-body ul.checks li{
  display:flex; align-items:flex-start; gap:11px;
  font-size:0.98rem; line-height:1.6; color:#C9C3DC;
}
.article-body ul.checks li svg{ flex-shrink:0; margin-top:4px; }
.article-body ul.checks li b{ color:var(--text); }

/* pro-tip callout */
.pro-tip{
  display:flex; gap:15px; align-items:flex-start;
  padding:22px 24px; margin:0 0 22px;
  border-radius:16px;
  background:linear-gradient(135deg, rgba(94,227,143,0.07), rgba(124,58,237,0.06));
  border:1px solid rgba(94,227,143,0.28);
}
.pro-tip .pt-ico{
  flex-shrink:0; display:grid; place-items:center;
  width:42px; height:42px; border-radius:12px;
  background:rgba(94,227,143,0.12); border:1px solid rgba(94,227,143,0.35);
}
.pro-tip h2{ margin:0 0 8px; font-size:1.15rem; }
.pro-tip p{ margin:0; font-size:0.95rem; line-height:1.7; color:var(--muted); }
.pro-tip p strong{ color:var(--text); }

/* end CTA */
.article-cta{
  margin-top:40px; padding:34px 30px; border-radius:20px; text-align:center;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(124,58,237,0.4), transparent 55%),
    radial-gradient(ellipse at 85% 100%, rgba(217,70,160,0.35), transparent 55%),
    linear-gradient(135deg, #2B0A4E, #12071f);
  border:1px solid rgba(183,108,255,0.35);
}
.article-cta h2{ margin:0 0 10px; color:#fff; font-family:'Space Grotesk',sans-serif; font-size:1.4rem; font-weight:700; }
.article-cta p{ color:rgba(244,241,250,0.8); margin:0 0 24px; line-height:1.7; }
.article-cta-btns{ display:flex; gap:15px; flex-wrap:wrap; justify-content:center; }
.article-cta-btns a{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 26px; font-size:0.96rem; font-weight:700; text-decoration:none;
  border-radius:12px; flex:1; min-width:220px;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.article-cta-btns .primary{
  color:#fff; background:linear-gradient(135deg, var(--red), var(--magenta));
  box-shadow:0 6px 22px rgba(255,59,78,0.4);
}
.article-cta-btns .primary:hover{ transform:translateY(-2px); box-shadow:0 10px 30px rgba(255,59,78,0.5); }
.article-cta-btns .secondary{
  color:#fff; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.25);
}
.article-cta-btns .secondary:hover{ transform:translateY(-2px); background:rgba(255,255,255,0.12); border-color:rgba(255,255,255,0.45); }

/* ============================================================
   PAGE FOOTER (minimalist)
   ============================================================ */
.blog-footer{ position:relative; background:#050508; padding:48px 28px; }
.blog-footer::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(124,58,237,0.7), rgba(217,70,160,0.5), transparent);
  box-shadow:0 0 18px rgba(124,58,237,0.35);
}
.blog-footer-inner{ max-width:1180px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.blog-footer .dw-logo{ flex-shrink:0; }
.blog-footer-links{ display:flex; align-items:center; gap:8px 26px; flex-wrap:wrap; }
.blog-footer-links a{ font-size:0.88rem; font-weight:500; color:var(--muted); text-decoration:none; transition:color .22s ease; }
.blog-footer-links a:hover{ color:#fff; }
.blog-footer-copy{ width:100%; padding-top:22px; margin-top:6px; border-top:1px solid rgba(255,255,255,0.06); font-size:0.82rem; color:rgba(163,157,186,0.7); }

@media (max-width: 560px){
  .article{ padding:calc(var(--header-h) + 36px) 22px 72px; }
  .step-block{ padding:24px 22px; }
  .article-cta-btns a{ min-width:100%; }
  .blog-footer-inner{ flex-direction:column; align-items:flex-start; gap:22px; }
  .blog-footer-links{ gap:14px 22px; }
}
@media (prefers-reduced-motion: reduce){
  .dw-header, .dw-header-cta, .step-block, .article-back{ transition:none; }
  html{ scroll-behavior:auto; }
}

/* legal / policy page — narrower, highly readable column */
.article.legal .article-inner{ max-width:720px; }
.article.legal .article-body{ font-size:1.02rem; }
.article.legal .article-body h2{
  display:flex; align-items:baseline; gap:12px;
  font-size:clamp(1.25rem, 2.4vw, 1.55rem);
  padding-bottom:12px; margin:46px 0 18px;
  border-bottom:1px solid var(--line);
}
.article.legal .article-body h2 .sec-num{
  flex-shrink:0;
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1rem;
  background:linear-gradient(95deg,#FF3B4E,#B76CFF);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
/* highlight callout for the guarantee */
.legal-highlight{
  border-radius:16px; padding:22px 24px; margin:0 0 24px;
  background:linear-gradient(135deg, rgba(94,227,143,0.07), rgba(124,58,237,0.06));
  border:1px solid rgba(94,227,143,0.28);
}
.legal-highlight p{ margin:0; }
.legal-highlight p + p{ margin-top:12px; }
/* bulleted lists */
.article-body ul.policy-list{
  list-style:none; display:flex; flex-direction:column; gap:13px; margin:0 0 22px;
}
.article-body ul.policy-list li{
  display:flex; align-items:flex-start; gap:12px;
  font-size:0.98rem; line-height:1.65; color:#C9C3DC;
}
.article-body ul.policy-list li svg{ flex-shrink:0; margin-top:4px; }
.article-body ul.policy-list li b{ color:var(--text); }
/* numbered step list */
.article-body ol.policy-steps{
  list-style:none; counter-reset:step; display:flex; flex-direction:column; gap:14px;
  margin:0 0 22px; padding:0;
}
.article-body ol.policy-steps li{
  counter-increment:step;
  display:flex; align-items:flex-start; gap:14px;
  font-size:0.98rem; line-height:1.65; color:#C9C3DC;
}
.article-body ol.policy-steps li::before{
  content:counter(step); flex-shrink:0;
  display:grid; place-items:center; width:30px; height:30px; border-radius:9px;
  font-family:'Space Grotesk',sans-serif; font-size:0.9rem; font-weight:700; color:#fff;
  background:linear-gradient(135deg,var(--red),var(--magenta));
  box-shadow:0 3px 12px rgba(255,59,78,0.35);
}
.article-body a.inline-link{
  color:#FF8A96; text-decoration:none; border-bottom:1px solid rgba(255,59,78,0.4);
  transition:color .2s ease, border-color .2s ease;
}
.article-body a.inline-link:hover{ color:#fff; border-color:#fff; }
/* note callout */
.legal-note{
  border-radius:14px; padding:18px 20px; margin:26px 0 0;
  background:var(--surface); border:1px solid var(--line);
  font-size:0.92rem; line-height:1.7; color:var(--muted);
}
.legal-note b{ color:var(--text); }

/* ========================================================
   [ARTICLE / BLOG POST TEMPLATE]
   ======================================================== */
/* ============================================================
   ARTICLE
   ============================================================ */
.article{
  position:relative;
  padding:calc(var(--header-h) + 56px) 28px 90px;
}
.article-inner{ max-width:760px; margin:0 auto; }
/* back-to-blog link */
.article-back{
  display:inline-flex; align-items:center; gap:8px;
  font-size:0.86rem; font-weight:600; color:var(--muted); text-decoration:none;
  margin-bottom:26px; transition:color .2s ease, gap .2s ease;
}
.article-back:hover{ color:#FF8A96; gap:11px; }
.article-back svg{ transition:transform .2s ease; }
.article-back:hover svg{ transform:translateX(-3px); }

.article-cat{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 15px; margin-bottom:20px;
  border-radius:100px;
  font-size:0.72rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase;
  color:#FF8A96; background:rgba(255,59,78,0.09); border:1px solid rgba(255,59,78,0.3);
}
.article h1.article-title{
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  font-size:clamp(1.9rem, 4vw, 2.9rem);
  line-height:1.14; letter-spacing:-0.015em;
  margin-bottom:18px;
}
.article-meta{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding-bottom:28px; margin-bottom:36px;
  border-bottom:1px solid var(--line);
  font-size:0.86rem; color:var(--muted);
}
.article-meta .avatar{
  width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center;
  font-family:'Space Grotesk', sans-serif; font-size:0.72rem; font-weight:700; color:#fff;
  background:linear-gradient(135deg, var(--red), var(--magenta));
}
.article-meta .dot-sep{ width:4px; height:4px; border-radius:50%; background:rgba(163,157,186,0.5); }
.article-meta b{ color:var(--text); font-weight:600; }

/* body typography */
.article-body{ font-size:1.04rem; line-height:1.85; color:#C9C3DC; }
.article-body > p{ margin-bottom:22px; }
.article-body .lede{
  font-size:1.14rem; line-height:1.75; color:var(--text); font-weight:500; margin-bottom:30px;
}
.article-body h2{
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  font-size:clamp(1.35rem, 2.6vw, 1.7rem);
  line-height:1.25; color:var(--text); letter-spacing:-0.01em;
  margin:44px 0 16px;
  scroll-margin-top:calc(var(--header-h) + 20px);
}
.article-body h2 .num{
  display:inline-grid; place-items:center;
  width:32px; height:32px; margin-right:12px;
  border-radius:9px; font-size:0.95rem; font-weight:700; color:#fff; vertical-align:middle;
  background:linear-gradient(135deg, var(--red), var(--magenta));
  box-shadow:0 3px 14px rgba(255,59,78,0.4);
}
.article-body strong{ color:var(--text); font-weight:600; }
.article-body em{ color:#FF8A96; font-style:normal; font-weight:600; }

/* step block */
.step-block{
  position:relative;
  border-radius:18px;
  padding:28px 28px 26px;
  margin:0 0 22px;
  background:linear-gradient(165deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015));
  border:1px solid rgba(255,255,255,0.08);
  transition:border-color .3s ease, box-shadow .3s ease;
}
.step-block:hover{ border-color:rgba(124,58,237,0.4); box-shadow:0 0 30px rgba(124,58,237,0.1); }
.step-block h2{ margin-top:0; }
.step-block p:last-child{ margin-bottom:0; }

/* credential / feature list */
.article-body ul.checks{
  list-style:none; display:flex; flex-direction:column; gap:12px; margin:0 0 22px;
}
.article-body ul.checks li{
  display:flex; align-items:flex-start; gap:11px;
  font-size:0.98rem; line-height:1.6; color:#C9C3DC;
}
.article-body ul.checks li svg{ flex-shrink:0; margin-top:4px; }
.article-body ul.checks li b{ color:var(--text); }

/* pro-tip callout */
.pro-tip{
  display:flex; gap:15px; align-items:flex-start;
  padding:22px 24px; margin:0 0 22px;
  border-radius:16px;
  background:linear-gradient(135deg, rgba(94,227,143,0.07), rgba(124,58,237,0.06));
  border:1px solid rgba(94,227,143,0.28);
}
.pro-tip .pt-ico{
  flex-shrink:0; display:grid; place-items:center;
  width:42px; height:42px; border-radius:12px;
  background:rgba(94,227,143,0.12); border:1px solid rgba(94,227,143,0.35);
}
.pro-tip h2{ margin:0 0 8px; font-size:1.15rem; }
.pro-tip p{ margin:0; font-size:0.95rem; line-height:1.7; color:var(--muted); }
.pro-tip p strong{ color:var(--text); }

/* end CTA */
.article-cta{
  margin-top:40px; padding:34px 30px; border-radius:20px; text-align:center;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(124,58,237,0.4), transparent 55%),
    radial-gradient(ellipse at 85% 100%, rgba(217,70,160,0.35), transparent 55%),
    linear-gradient(135deg, #2B0A4E, #12071f);
  border:1px solid rgba(183,108,255,0.35);
}
.article-cta h2{ margin:0 0 10px; color:#fff; font-family:'Space Grotesk',sans-serif; font-size:1.4rem; font-weight:700; }
.article-cta p{ color:rgba(244,241,250,0.8); margin:0 0 24px; line-height:1.7; }
.article-cta-btns{ display:flex; gap:15px; flex-wrap:wrap; justify-content:center; }
.article-cta-btns a{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 26px; font-size:0.96rem; font-weight:700; text-decoration:none;
  border-radius:12px; flex:1; min-width:220px;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.article-cta-btns .primary{
  color:#fff; background:linear-gradient(135deg, var(--red), var(--magenta));
  box-shadow:0 6px 22px rgba(255,59,78,0.4);
}
.article-cta-btns .primary:hover{ transform:translateY(-2px); box-shadow:0 10px 30px rgba(255,59,78,0.5); }
.article-cta-btns .secondary{
  color:#fff; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.25);
}
.article-cta-btns .secondary:hover{ transform:translateY(-2px); background:rgba(255,255,255,0.12); border-color:rgba(255,255,255,0.45); }

/* ============================================================
   PAGE FOOTER (minimalist)
   ============================================================ */
.blog-footer{ position:relative; background:#050508; padding:48px 28px; }
.blog-footer::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(124,58,237,0.7), rgba(217,70,160,0.5), transparent);
  box-shadow:0 0 18px rgba(124,58,237,0.35);
}
.blog-footer-inner{ max-width:1180px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.blog-footer .dw-logo{ flex-shrink:0; }
.blog-footer-links{ display:flex; align-items:center; gap:8px 26px; flex-wrap:wrap; }
.blog-footer-links a{ font-size:0.88rem; font-weight:500; color:var(--muted); text-decoration:none; transition:color .22s ease; }
.blog-footer-links a:hover{ color:#fff; }
.blog-footer-copy{ width:100%; padding-top:22px; margin-top:6px; border-top:1px solid rgba(255,255,255,0.06); font-size:0.82rem; color:rgba(163,157,186,0.7); }

@media (max-width: 560px){
  .article{ padding:calc(var(--header-h) + 36px) 22px 72px; }
  .step-block{ padding:24px 22px; }
  .article-cta-btns a{ min-width:100%; }
  .blog-footer-inner{ flex-direction:column; align-items:flex-start; gap:22px; }
  .blog-footer-links{ gap:14px 22px; }
}
@media (prefers-reduced-motion: reduce){
  .dw-header, .dw-header-cta, .step-block, .article-back{ transition:none; }
  html{ scroll-behavior:auto; }
}


/* ========================================================
   [CHECKOUT PAGE]
   ======================================================== */
.checkout{
  position:relative;
  padding:calc(var(--header-h) + 60px) 28px 100px;
  overflow:hidden;
}
.checkout-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.checkout-bg .glow{ position:absolute; border-radius:50%; filter:blur(110px); }
.checkout-bg .glow-1{ width:560px; height:560px; top:-240px; left:-120px; background:var(--violet-glow); }
.checkout-bg .glow-2{ width:460px; height:460px; bottom:-180px; right:-100px; background:var(--magenta-glow); }
.checkout-inner{ position:relative; z-index:1; max-width:1120px; margin:0 auto; }

.checkout-head{ text-align:center; max-width:640px; margin:0 auto 46px; }
.checkout-head .co-eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  padding:7px 18px; margin-bottom:22px;
  border:1px solid rgba(255,59,78,0.35); border-radius:100px;
  background:rgba(255,59,78,0.08);
  font-size:0.74rem; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:#FF8A96;
}
.checkout-head .co-eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--red); box-shadow:0 0 10px var(--red); }
.checkout-head h1{
  font-family:'Space Grotesk', sans-serif; font-weight:700;
  font-size:clamp(2rem, 4.2vw, 3rem); line-height:1.12; letter-spacing:-0.018em; margin-bottom:16px;
}
.checkout-head h1 .accent{
  background:linear-gradient(95deg, #FF3B4E 10%, #B76CFF 90%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.checkout-head p{ font-size:1.02rem; line-height:1.7; color:var(--muted); }

/* two-column grid */
.checkout-grid{
  display:grid;
  grid-template-columns:1.5fr 1fr;
  gap:28px;
  align-items:start;
}

/* shared panel look */
.co-panel{
  position:relative;
  border-radius:22px;
  padding:32px 30px;
  background:linear-gradient(165deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
  border:1px solid rgba(255,255,255,0.1);
  box-shadow:0 30px 70px rgba(0,0,0,0.4);
}
.co-panel h2{
  font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:1.15rem;
  letter-spacing:-0.005em; color:var(--text); margin-bottom:22px;
}
.co-section + .co-section{ margin-top:26px; padding-top:26px; border-top:1px solid var(--line); }
.co-section-label{
  display:block; font-size:0.72rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--muted); margin-bottom:16px;
}

/* customer-type radio cards */
.co-radios{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.co-radio{
  position:relative; display:flex; align-items:center; gap:12px;
  padding:16px 18px; border-radius:14px; cursor:pointer;
  background:rgba(255,255,255,0.035); border:1px solid rgba(255,255,255,0.12);
  transition:border-color .2s ease, background .2s ease;
}
.co-radio:hover{ border-color:rgba(255,255,255,0.24); }
.co-radio input{ position:absolute; opacity:0; pointer-events:none; }
.co-radio .co-dot{
  flex-shrink:0; width:20px; height:20px; border-radius:50%;
  border:2px solid rgba(255,255,255,0.3); display:grid; place-items:center; transition:border-color .2s ease;
}
.co-radio .co-dot::after{ content:""; width:10px; height:10px; border-radius:50%; background:var(--red); transform:scale(0); transition:transform .2s ease; }
.co-radio input:checked ~ .co-dot{ border-color:var(--red); }
.co-radio input:checked ~ .co-dot::after{ transform:scale(1); }
.co-radio input:checked ~ .co-label{ color:var(--text); }
.co-radio:has(input:checked){ border-color:rgba(255,59,78,0.55); background:rgba(255,59,78,0.07); }
.co-radio input:focus-visible ~ .co-dot{ outline:2px solid var(--red); outline-offset:3px; }
.co-radio .co-label{ font-size:0.95rem; font-weight:600; color:var(--muted); line-height:1.3; transition:color .2s ease; }
.co-radio .co-label small{ display:block; font-weight:400; font-size:0.8rem; color:var(--muted); margin-top:2px; }

/* form fields */
.co-field{ margin-bottom:18px; }
.co-field:last-child{ margin-bottom:0; }
.co-field label.co-flabel{ display:block; font-size:0.82rem; font-weight:600; letter-spacing:0.02em; color:var(--text); margin-bottom:9px; }
.co-field label.co-flabel .req{ color:var(--red); }
.co-control{
  width:100%; padding:14px 16px;
  font-family:'Inter', sans-serif; font-size:0.95rem; color:var(--text);
  background:rgba(255,255,255,0.035); border:1px solid rgba(255,255,255,0.12); border-radius:12px;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
  appearance:none; -webkit-appearance:none;
}
.co-control::placeholder{ color:rgba(163,157,186,0.6); }
.co-control:hover{ border-color:rgba(255,255,255,0.22); }
.co-control:focus{
  outline:none; border-color:rgba(255,59,78,0.65); background:rgba(255,255,255,0.05);
  box-shadow:0 0 0 3px rgba(255,59,78,0.15), 0 0 18px rgba(255,59,78,0.18);
}
.co-field-2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }

/* select chevron wrapper */
.co-select-wrap{ position:relative; }
.co-select-wrap::after{
  content:""; position:absolute; right:16px; top:50%;
  width:9px; height:9px; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted);
  transform:translateY(-70%) rotate(45deg); pointer-events:none; transition:border-color .2s ease;
}
.co-select-wrap:focus-within::after{ border-color:#FF8A96; }
select.co-control{ cursor:pointer; padding-right:42px; }
select.co-control option{ background:#161022; color:var(--text); }

/* order summary (sticky) */
.co-summary{ position:sticky; top:calc(var(--header-h) + 20px); }
.co-summary-rows{ margin:22px 0; }
.co-summary-row{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:12px 0; font-size:0.92rem; color:var(--muted);
}
.co-summary-row + .co-summary-row{ border-top:1px solid rgba(255,255,255,0.07); }
.co-summary-row b{ color:var(--text); font-weight:600; }

/* payment notice */
.co-pay-notice{
  display:flex; align-items:flex-start; gap:13px;
  padding:18px 20px; border-radius:14px; margin:22px 0;
  background:linear-gradient(135deg, rgba(94,227,143,0.08), rgba(124,58,237,0.06));
  border:1px solid rgba(94,227,143,0.28);
}
.co-pay-notice .co-pay-ico{
  flex-shrink:0; display:grid; place-items:center; width:40px; height:40px; border-radius:11px;
  background:rgba(94,227,143,0.12); border:1px solid rgba(94,227,143,0.35);
}
.co-pay-notice p{ margin:0; font-size:0.88rem; line-height:1.6; color:var(--muted); }
.co-pay-notice p b{ color:var(--text); font-weight:600; }

/* submit button */
.co-submit{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  width:100%; padding:17px 28px;
  font-family:'Inter', sans-serif; font-size:1.04rem; font-weight:700; color:#fff;
  background:linear-gradient(135deg, var(--red), var(--magenta)); border:none; border-radius:13px; cursor:pointer;
  box-shadow:0 6px 26px rgba(255,59,78,0.4); transition:transform .22s ease, box-shadow .22s ease;
}
.co-submit:hover{ transform:translateY(-2px); box-shadow:0 12px 40px rgba(255,59,78,0.5), 0 0 24px rgba(255,59,78,0.3); }
.co-submit:active{ transform:translateY(0); }
.co-submit:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
.co-submit svg{ transition:transform .22s ease; }
.co-submit:hover svg{ transform:translateX(4px); }

.co-trust{
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin-top:16px; font-size:0.8rem; color:rgba(163,157,186,0.8);
}
.co-trust svg{ flex-shrink:0; }

@media (max-width: 900px){
  .checkout-grid{ grid-template-columns:1fr; gap:22px; }
  .co-summary{ position:static; }
}
@media (max-width: 560px){
  .checkout{ padding:calc(var(--header-h) + 40px) 20px 72px; }
  .co-panel{ padding:26px 22px; }
  .co-radios{ grid-template-columns:1fr; }
  .co-field-2{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce){
  .co-control, .co-radio, .co-submit, .co-radio .co-dot::after{ transition:none; }
}

/* ========================================================
   [THANK YOU / ORDER CONFIRMATION PAGE]
   ======================================================== */
.thankyou{
  position:relative;
  padding:calc(var(--header-h) + 70px) 28px 100px;
  overflow:hidden;
}
.thankyou-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.thankyou-bg .glow{ position:absolute; border-radius:50%; filter:blur(110px); }
.thankyou-bg .glow-1{ width:600px; height:600px; top:-260px; left:50%; transform:translateX(-50%); background:var(--violet-glow); }
.thankyou-bg .glow-2{ width:420px; height:420px; bottom:-160px; right:-90px; background:rgba(94,227,143,0.10); }
.thankyou-inner{ position:relative; z-index:1; max-width:720px; margin:0 auto; }

/* success header */
.ty-head{ text-align:center; margin-bottom:40px; }
.ty-badge{
  display:inline-grid; place-items:center;
  width:76px; height:76px; border-radius:50%; margin-bottom:24px;
  background:linear-gradient(135deg, rgba(94,227,143,0.18), rgba(124,58,237,0.14));
  border:1px solid rgba(94,227,143,0.4);
  box-shadow:0 0 34px rgba(94,227,143,0.22);
  animation:tyPop .5s cubic-bezier(.2,.8,.2,1.2) both;
}
@keyframes tyPop{ from{ opacity:0; transform:scale(0.6); } to{ opacity:1; transform:scale(1); } }
.ty-head h1{
  font-family:'Space Grotesk', sans-serif; font-weight:700;
  font-size:clamp(2rem, 4.2vw, 2.9rem); line-height:1.12; letter-spacing:-0.018em; margin-bottom:14px;
}
.ty-head h1 .accent{
  background:linear-gradient(95deg, #FF3B4E 10%, #B76CFF 90%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.ty-head p{ font-size:1.06rem; line-height:1.7; color:var(--muted); max-width:520px; margin:0 auto; }

/* Interac e-Transfer details card */
.ty-pay-card{
  position:relative;
  border-radius:22px;
  padding:32px 30px;
  margin-bottom:22px;
  overflow:hidden;
  background:
    radial-gradient(ellipse at 18% 0%, rgba(124,58,237,0.16), transparent 55%),
    radial-gradient(ellipse at 90% 100%, rgba(217,70,160,0.12), transparent 55%),
    linear-gradient(165deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border:1px solid rgba(183,108,255,0.35);
  box-shadow:0 30px 70px rgba(0,0,0,0.45), 0 0 44px rgba(124,58,237,0.14);
}
.ty-pay-card::before{
  content:""; position:absolute; inset:-1px; border-radius:22px; padding:1px;
  background:linear-gradient(140deg, rgba(255,59,78,0.5), transparent 38%, transparent 62%, rgba(124,58,237,0.5));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
}
.ty-pay-head{ display:flex; align-items:center; gap:13px; margin-bottom:8px; }
.ty-pay-head .ty-pay-ico{
  flex-shrink:0; display:grid; place-items:center; width:44px; height:44px; border-radius:12px;
  background:linear-gradient(135deg, rgba(255,59,78,0.15), rgba(124,58,237,0.15)); border:1px solid rgba(255,59,78,0.3);
}
.ty-pay-head h2{ font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:1.3rem; color:var(--text); letter-spacing:-0.01em; }
.ty-pay-sub{ font-size:0.92rem; color:var(--muted); margin-bottom:24px; }

.ty-detail{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px 0;
}
.ty-detail + .ty-detail{ border-top:1px solid rgba(255,255,255,0.08); }
.ty-detail .ty-detail-label{
  font-size:0.72rem; font-weight:700; letter-spacing:0.13em; text-transform:uppercase; color:var(--muted);
}
.ty-detail .ty-detail-value{
  font-family:'Space Grotesk', sans-serif; font-size:1.05rem; font-weight:600; color:var(--text);
  text-align:right; word-break:break-word;
}
.ty-detail .ty-detail-value.email{ color:#FF8A96; }
.ty-detail.total .ty-detail-value{
  font-size:1.5rem;
  background:linear-gradient(95deg, #FF3B4E, #B76CFF);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.ty-detail .ty-memo-chip{
  display:inline-block; padding:5px 14px; border-radius:8px;
  font-family:'Space Grotesk', sans-serif; font-weight:700; letter-spacing:0.03em; color:#fff;
  background:rgba(255,59,78,0.14); border:1px solid rgba(255,59,78,0.4);
}

/* warning box */
.ty-warning{
  display:flex; gap:15px; align-items:flex-start;
  padding:20px 22px; border-radius:16px; margin-bottom:34px;
  background:linear-gradient(135deg, rgba(255,59,78,0.1), rgba(217,70,160,0.06));
  border:1px solid rgba(255,59,78,0.4);
}
.ty-warning .ty-warn-ico{
  flex-shrink:0; display:grid; place-items:center; width:40px; height:40px; border-radius:11px;
  background:rgba(255,59,78,0.15); border:1px solid rgba(255,59,78,0.45);
}
.ty-warning p{ margin:0; font-size:0.94rem; line-height:1.65; color:var(--text); }
.ty-warning p strong{ color:#FF8A96; font-weight:700; }
.ty-warning p .memo-em{
  font-family:'Space Grotesk', sans-serif; font-weight:700; color:#fff;
  padding:1px 8px; border-radius:6px; background:rgba(255,59,78,0.2); border:1px solid rgba(255,59,78,0.4);
}

/* next steps timeline */
.ty-steps h2{
  font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:1.3rem; color:var(--text);
  text-align:center; margin-bottom:30px; letter-spacing:-0.01em;
}
.ty-timeline{ display:flex; flex-direction:column; gap:0; }
.ty-step{
  position:relative; display:flex; gap:20px; padding-bottom:28px;
}
.ty-step:last-child{ padding-bottom:0; }
/* connector line */
.ty-step::before{
  content:""; position:absolute; left:23px; top:48px; bottom:0; width:2px;
  background:linear-gradient(to bottom, rgba(255,59,78,0.5), rgba(124,58,237,0.3));
}
.ty-step:last-child::before{ display:none; }
.ty-step-num{
  flex-shrink:0; position:relative; z-index:1;
  display:grid; place-items:center; width:48px; height:48px; border-radius:14px;
  font-family:'Space Grotesk', sans-serif; font-size:1.15rem; font-weight:700; color:#fff;
  background:linear-gradient(135deg, var(--red), var(--magenta));
  box-shadow:0 6px 20px rgba(255,59,78,0.35);
}
.ty-step-body{ padding-top:5px; }
.ty-step-body h3{
  font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:1.05rem; color:var(--text); margin-bottom:6px;
}
.ty-step-body p{ font-size:0.94rem; line-height:1.65; color:var(--muted); margin:0; }

/* support line */
.ty-support{
  text-align:center; margin-top:40px; padding-top:26px; border-top:1px solid var(--line);
  font-size:0.94rem; color:var(--muted);
}
.ty-support a{ color:#FF8A96; text-decoration:none; border-bottom:1px solid rgba(255,59,78,0.4); }
.ty-support a:hover{ color:#fff; border-color:#fff; }

@media (max-width: 560px){
  .thankyou{ padding:calc(var(--header-h) + 44px) 20px 72px; }
  .ty-pay-card{ padding:26px 22px; }
  .ty-detail{ flex-direction:column; align-items:flex-start; gap:6px; }
  .ty-detail .ty-detail-value{ text-align:left; }
}
@media (prefers-reduced-motion: reduce){
  .ty-badge{ animation:none; }
}

/* Checkout summary — emphasized total row */
.co-summary-total{ margin-top:4px; padding-top:16px; border-top:1px solid rgba(255,255,255,0.14) !important; }
.co-summary-total span{ font-size:0.95rem; color:var(--text); font-weight:600; }
.co-summary-total b[data-summary="total"]{
  font-family:'Space Grotesk', sans-serif; font-size:1.35rem; font-weight:700;
  background:linear-gradient(95deg, #FF3B4E, #B76CFF);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* Thank-you — copy-to-clipboard buttons (email + memo) */
.ty-detail-value .ty-copy-text{ word-break:break-all; }
.ty-detail-value.email,
.ty-detail-value:has(.ty-copy-btn){
  display:flex; align-items:center; justify-content:flex-end; gap:10px; flex-wrap:wrap;
}
.ty-detail-value .ty-memo-chip + .ty-copy-btn{ margin-left:2px; }
.ty-copy-btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px; border-radius:9px; cursor:pointer;
  font-family:'Inter', sans-serif; font-size:0.78rem; font-weight:600; color:#FF8A96;
  background:rgba(255,59,78,0.1); border:1px solid rgba(255,59,78,0.35);
  transition:background .18s ease, border-color .18s ease, color .18s ease, transform .12s ease;
  white-space:nowrap;
}
.ty-copy-btn:hover{ background:rgba(255,59,78,0.16); border-color:rgba(255,59,78,0.55); }
.ty-copy-btn:active{ transform:scale(0.96); }
.ty-copy-btn:focus-visible{ outline:2px solid #FF8A96; outline-offset:2px; }
.ty-copy-btn svg{ display:block; }
.ty-copy-btn .ico-check{ display:none; }
/* Copied state -> green confirmation */
.ty-copy-btn.copied{
  color:#5EE38F; background:rgba(94,227,143,0.12); border-color:rgba(94,227,143,0.45);
}
.ty-copy-btn.copied .ico-copy{ display:none; }
.ty-copy-btn.copied .ico-check{ display:block; }

@media (max-width: 560px){
  .ty-detail-value.email,
  .ty-detail-value:has(.ty-copy-btn){ justify-content:flex-start; }
}