/* ==========================================================================
   DI VPN — unified dark-cinematic visual system
   Restrained blur, high-contrast typography, colour-coded tools and soft
   network motion. This file loads after each page's own styles.
   ========================================================================== */

:root {
  --di-ink:#030711;
  --di-panel:#081321;
  --di-panel-2:#0b1b30;
  --di-line:rgba(114,166,210,.22);
  --di-muted:#9aacc2;
  --di-text:#eef6ff;
  --di-cyan:#26d9ff;
  --di-blue:#2878ff;
  --di-violet:#9b7bff;
  --di-green:#42dfad;
  --di-amber:#f5b84b;
  --di-rose:#ff6487;
}
html { scroll-behavior:smooth; }
body:not(.home-page) {
  color:var(--di-text);
  background:
    radial-gradient(ellipse at 12% 0%,rgba(28,103,174,.105),transparent 38%),
    radial-gradient(ellipse at 88% 28%,rgba(95,54,171,.065),transparent 34%),
    #030711;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body { overflow-x:hidden; }
::selection { color:#03111b; background:#62e4ff; }

/* Header: crisp and legible, with a small glass navigation dock. */
.site-header {
  position:relative;
  z-index:100;
  background:rgba(2,6,15,.94) !important;
  border-bottom:1px solid rgba(75,139,193,.2) !important;
  box-shadow:0 8px 28px rgba(0,0,0,.22);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}
#desktopNav {
  background:linear-gradient(125deg,rgba(7,22,39,.82),rgba(6,12,27,.78)) !important;
  border:1px solid rgba(83,153,211,.19);
  border-radius:999px;
  box-shadow:0 10px 32px rgba(0,0,0,.24),inset 0 1px rgba(255,255,255,.035);
}
#desktopNav a, #desktopNav button { transition:color .18s ease,text-shadow .18s ease; }
#desktopNav a:hover, #desktopNav button:hover { color:#69eaff !important; text-shadow:0 0 15px rgba(38,217,255,.3); }
.site-header .di-header-actions a,
.site-header .di-header-actions button { transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; }
.site-header .di-header-actions a:hover,
.site-header .di-header-actions button:hover { transform:translateY(-1px); }
.site-header a:focus-visible,.site-header button:focus-visible,
.visual-refresh a:focus-visible { outline:2px solid #62e4ff; outline-offset:3px; }

/* Shared page heading language. */
.page-content-section,.contact-section,.pricing-page,.ext-hero,.ext-section {
  position:relative;
  isolation:isolate;
}
.page-content-section {
  background:
    radial-gradient(ellipse at 10% 0%,rgba(20,122,181,.12),transparent 40%),
    linear-gradient(180deg,rgba(4,12,24,.94),rgba(3,7,17,.96));
  padding-top:76px !important;
  padding-bottom:90px !important;
}
.page-content-container {
  max-width:1280px !important;
  padding:0 clamp(18px,3vw,32px);
}
.page-content-header { max-width:900px; margin:0 auto 42px; }
.page-content-header h1 {
  color:#f3f8ff !important;
  font-size:clamp(32px,4.8vw,54px) !important;
  font-weight:850 !important;
  letter-spacing:-.045em;
  line-height:1.08;
}
.page-content-header p { color:#a7b9cf !important; font-size:15px; line-height:1.75; }
.page-content-body,.page-content-container article {
  color:#c4d2e3;
  font-size:15px;
  line-height:1.8;
}
.page-content-container h2,.page-content-container h3 {
  color:#eff7ff;
  font-weight:750 !important;
  letter-spacing:-.02em;
  margin-top:1.6em;
}
.page-content-container a { color:#62dfff; text-decoration-color:rgba(98,223,255,.38); }
.page-content-container a:hover { color:#fff; }
.page-content-container article,.page-content-container .policy-card {
  padding:clamp(20px,3vw,38px);
  border:1px solid rgba(93,154,201,.19);
  border-radius:22px;
  background:linear-gradient(145deg,rgba(11,26,44,.86),rgba(5,13,25,.88));
  box-shadow:0 22px 70px rgba(0,0,0,.18);
}

/* Contact page. */
.contact-section {
  padding:78px 20px 90px !important;
  background:
    radial-gradient(ellipse at 9% 8%,rgba(0,160,226,.12),transparent 38%),
    radial-gradient(ellipse at 92% 80%,rgba(104,70,230,.08),transparent 32%);
}
.contact-container { max-width:1240px; }
.contact-badge,.pricing-kicker,.why-section-kicker {
  display:inline-flex;
  align-items:center;
  gap:9px;
  border:1px solid rgba(60,199,239,.3);
  border-radius:999px;
  padding:8px 14px;
  color:#89e9ff;
  background:linear-gradient(100deg,rgba(0,157,214,.13),rgba(78,92,211,.08));
  font:800 10px/1.2 Inter,sans-serif;
  letter-spacing:.13em;
}
.contact-title,.pricing-head h1 {
  color:#f5f9ff !important;
  letter-spacing:-.045em;
  font-weight:850 !important;
}
.contact-title { font-size:clamp(38px,5vw,62px) !important; line-height:1.04; }
.contact-description { color:#a4b6ca !important; font-size:16px; line-height:1.75; max-width:64ch; }
.glass-card,.contact-form-card {
  border:1px solid rgba(91,156,204,.23) !important;
  background:linear-gradient(145deg,rgba(12,30,50,.83),rgba(5,13,26,.92)) !important;
  box-shadow:0 20px 58px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.035);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-radius:20px !important;
}
.glass-card { transition:transform .22s,border-color .22s,box-shadow .22s; }
.glass-card:hover {
  transform:translateY(-3px);
  border-color:rgba(53,208,245,.46) !important;
  box-shadow:0 24px 60px rgba(0,0,0,.28),0 0 25px rgba(33,168,236,.08);
}
.info-icon {
  background:linear-gradient(145deg,rgba(0,166,221,.22),rgba(67,88,204,.16)) !important;
  border:1px solid rgba(64,202,239,.23);
  color:#79e7ff !important;
}
.contact-form-card input,.contact-form-card textarea,.contact-form-card select {
  background:rgba(3,11,22,.82) !important;
  color:#f3f8ff !important;
  border:1px solid rgba(113,159,198,.24) !important;
  border-radius:12px !important;
}
.contact-form-card input:focus,.contact-form-card textarea:focus,.contact-form-card select:focus {
  border-color:#35d8ff !important;
  box-shadow:0 0 0 3px rgba(53,216,255,.1) !important;
}

/* Pricing page: clear hierarchy and calm but premium plan panels. */
.pricing-page {
  padding:70px 0 96px !important;
  background:
    radial-gradient(ellipse at 50% 0%,rgba(19,124,190,.13),transparent 43%),
    transparent;
}
.pricing-page > .container { max-width:1280px; }
.pricing-head { margin-bottom:42px; }
.pricing-head h1 {
  font-size:clamp(34px,4.6vw,56px);
  line-height:1.08;
  margin:18px 0 12px;
}
.pricing-head p { color:#a5b8cd !important; font-size:15px; line-height:1.75; }
.mk-card {
  background:linear-gradient(145deg,rgba(13,32,55,.94),rgba(5,13,26,.97)) !important;
  border:1px solid rgba(91,158,209,.24) !important;
  box-shadow:0 18px 52px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.04);
  transition:transform .24s,border-color .24s,box-shadow .24s;
}
.mk-card:hover {
  transform:translateY(-4px);
  border-color:rgba(46,211,255,.55) !important;
  box-shadow:0 24px 65px rgba(0,0,0,.3),0 0 24px rgba(40,160,255,.09);
}
.mk-free-summary {
  border:1px solid rgba(72,143,192,.23);
  border-radius:24px;
  background:linear-gradient(145deg,rgba(8,23,41,.92),rgba(5,11,22,.9));
  padding:clamp(20px,3vw,32px);
}
.mk-free-item {
  border:1px solid rgba(90,154,200,.16) !important;
  background:rgba(13,29,47,.68) !important;
  border-radius:15px !important;
}

/* Extension page and other product sections. */
.ext-hero,.ext-section {
  background:
    radial-gradient(ellipse at 8% 5%,rgba(0,151,220,.11),transparent 38%),
    radial-gradient(ellipse at 94% 75%,rgba(116,75,228,.07),transparent 35%);
}
.ext-hero-copy h1,.ext-v2-sec-h {
  color:#f5f9ff !important;
  font-weight:850 !important;
  letter-spacing:-.045em;
}
.ext-hero-copy p,.ext-v2-sec-sub { color:#a6b8cc !important; line-height:1.75; }
.ext-v2-browser,.ext-v2-compare,.ext-tb-card,.ext-v2-step {
  border-color:rgba(91,156,203,.24) !important;
  box-shadow:0 22px 68px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.035);
}
.ext-v2-compare-col,.ext-tb-card,.ext-v2-step {
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
}
.ext-v2-compare-col.is-good { border-color:rgba(60,216,166,.26) !important; }
.ext-v2-compare-col.is-bad { border-color:rgba(255,105,139,.21) !important; }
.ext-section { padding-block:clamp(46px,6vw,84px); }
.ext-section:nth-of-type(even) { background-color:rgba(0,0,0,.13); }
.ext-tb-card,.ext-tool {
  transition:transform .22s,border-color .22s,box-shadow .22s,background .22s;
}
.ext-tb-card:hover,.ext-tool:hover {
  transform:translateY(-3px);
  border-color:rgba(55,210,255,.44) !important;
  box-shadow:0 18px 46px rgba(0,0,0,.22),0 0 24px rgba(36,170,230,.08);
}

/* Homepage — keep the Earth art but make each section progressively deeper. */
body.home-page .hero-section.dv2-hero {
  background:linear-gradient(rgba(0,0,0,.90),rgba(0,0,0,.90)) !important;
}
body.home-page .why-di-section {
  padding:clamp(34px,4.8vw,66px) 0 clamp(42px,5vw,72px) !important;
  margin:0 !important;
  background:linear-gradient(rgba(0,0,0,.80),rgba(0,0,0,.80)) !important;
  border-top:1px solid rgba(66,143,197,.1);
}
body.home-page #features {
  margin-top:0 !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
}
.why-section-heading {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin:0 0 25px;
}
.why-section-heading .feat-title {
  margin:10px 0 7px !important;
  color:#f4f8ff !important;
  font-size:clamp(27px,3.8vw,43px) !important;
  font-weight:850 !important;
  line-height:1.08;
  letter-spacing:-.045em;
}
.why-section-heading p {
  max-width:62ch;
  margin:0;
  color:#9eb2c7;
  font-size:14px;
  line-height:1.65;
}
.why-section-explore {
  flex:none;
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:10px 14px;
  color:#a8efff;
  border:1px solid rgba(52,202,243,.28);
  border-radius:999px;
  background:rgba(9,68,96,.2);
  font-size:11px;
  font-weight:800;
  text-decoration:none;
  transition:transform .2s,border-color .2s,box-shadow .2s;
}
.why-section-explore:hover {
  color:#fff;
  transform:translateY(-2px);
  border-color:rgba(52,220,255,.65);
  box-shadow:0 0 22px rgba(25,176,227,.12);
}
.why-feature-layout {
  display:grid !important;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:11px;
  align-items:stretch;
}
.why-feature-primary,.why-feature-grid { display:contents !important; }
.why-feature-primary .feat-card {
  grid-column:span 7;
  min-height:226px;
}
.why-feature-grid .feat-card:nth-child(1) { grid-column:span 5; min-height:226px; }
.why-feature-grid .feat-card:nth-child(n+2) { grid-column:span 4; min-height:190px; }
.why-feature-layout .feat-card {
  --feature-accent:#31d8ff;
  --feature-soft:rgba(25,174,235,.15);
  position:relative;
  isolation:isolate;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  min-width:0;
  overflow:hidden;
  padding:clamp(18px,2vw,28px) !important;
  border:1px solid rgba(68,185,235,.35) !important;
  border-radius:20px 28px 18px 24px !important;
  background:
    radial-gradient(ellipse at 85% 4%,var(--feature-soft),transparent 55%),
    linear-gradient(145deg,rgba(11,31,52,.88),rgba(3,11,23,.96)) !important;
  box-shadow:0 16px 38px rgba(0,0,0,.25),inset 0 1px rgba(255,255,255,.04);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  transform:translateZ(0);
  transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease,background .28s ease;
}
.why-feature-layout .feat-card::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  opacity:.34;
  background:
    radial-gradient(circle at 84% 18%,rgba(255,255,255,.14) 0 1px,transparent 2px),
    linear-gradient(120deg,transparent 0 38%,rgba(87,203,255,.06) 38.2% 38.6%,transparent 39% 68%,rgba(87,203,255,.045) 68.2% 68.6%,transparent 69%);
  background-size:22px 22px,100% 100%;
  mask-image:linear-gradient(135deg,black,transparent 82%);
}
.why-feature-layout .feat-card::after {
  content:"";
  position:absolute;
  z-index:4;
  right:-10px;
  top:50%;
  width:19px;
  height:19px;
  border-radius:50%;
  border:4px solid #071321;
  background:var(--feature-accent);
  box-shadow:0 0 16px var(--feature-accent);
  opacity:.75;
  transform:translateY(-50%);
}
.why-feature-layout .feat-card[data-feature="double-vpn"] {
  --feature-accent:#2bd8ff;
  --feature-soft:rgba(0,155,255,.24);
  border-color:rgba(36,186,255,.6) !important;
  border-radius:25px 18px 24px 18px !important;
}
.why-feature-layout .feat-card[data-feature="blocker"] {
  --feature-accent:#ff617f;
  --feature-soft:rgba(239,66,105,.21);
  border-color:rgba(255,98,130,.43) !important;
}
.why-feature-layout .feat-card[data-feature="identity"] {
  --feature-accent:#a68aff;
  --feature-soft:rgba(127,86,255,.2);
  border-color:rgba(161,129,255,.42) !important;
}
.why-feature-layout .feat-card[data-feature="family"] {
  --feature-accent:#41e2ad;
  --feature-soft:rgba(33,190,127,.18);
  border-color:rgba(61,219,164,.39) !important;
}
.why-feature-layout .feat-card[data-feature="threat"] {
  --feature-accent:#ffb34d;
  --feature-soft:rgba(230,135,36,.2);
  border-color:rgba(255,177,72,.42) !important;
}
.why-feature-layout .feat-card h3 {
  position:relative;
  z-index:2;
  max-width:34ch;
  margin:0 0 8px !important;
  color:#f5f9ff !important;
  font-size:clamp(15px,1.35vw,19px) !important;
  font-weight:800 !important;
  line-height:1.28;
  letter-spacing:-.018em;
}
.why-feature-layout .feat-card p {
  position:relative;
  z-index:2;
  max-width:58ch;
  margin:0 !important;
  color:#adbed1;
  font-size:12px;
  line-height:1.58;
}
.why-feature-layout .feat-icon-bg {
  position:absolute;
  top:18px !important;
  right:21px !important;
  z-index:1;
  color:var(--feature-accent) !important;
  font-size:clamp(54px,6vw,82px) !important;
  opacity:.24 !important;
  filter:drop-shadow(0 0 18px var(--feature-accent));
  transform:rotate(-9deg) scale(.94);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .35s,filter .35s;
}
.why-feature-layout .feat-card:hover {
  z-index:5;
  transform:translateY(-6px) scale(1.008);
  border-color:var(--feature-accent) !important;
  box-shadow:0 22px 52px rgba(0,0,0,.34),0 0 28px color-mix(in srgb,var(--feature-accent) 18%,transparent);
}
.why-feature-layout .feat-card:hover .feat-icon-bg {
  opacity:.5 !important;
  transform:rotate(5deg) scale(1.12);
  filter:drop-shadow(0 0 24px var(--feature-accent));
}
.why-feature-layout .feat-card:hover::before { animation:di-ghost-drift 4s linear infinite; }
@keyframes di-ghost-drift { from{background-position:0 0,0 0} to{background-position:44px 44px,28px 0} }

/* Extension map/details row: reverse the upper feature widths for balance. */
body.home-page #extension {
  padding-block:clamp(46px,5.5vw,76px) !important;
  background:linear-gradient(rgba(0,0,0,.70),rgba(0,0,0,.70)) !important;
  border-top:1px solid rgba(67,147,203,.1);
  border-bottom:1px solid rgba(67,147,203,.09);
}
body.home-page #extension > .max-w-7xl { max-width:1320px !important; }
.ext-home-live {
  grid-template-columns:minmax(0,.91fr) minmax(0,1.09fr) !important;
  gap:18px !important;
  align-items:stretch;
}
.ext-home-map,.ext-home-info { min-width:0; }
.ext-home-map .ext-map-card,.ext-home-info .ext-map-info {
  border:1px solid rgba(83,164,213,.24) !important;
  border-radius:20px !important;
  background:linear-gradient(145deg,rgba(9,27,48,.86),rgba(4,11,23,.94)) !important;
  box-shadow:0 20px 56px rgba(0,0,0,.26),inset 0 1px rgba(255,255,255,.035) !important;
}
.ext-home-map .ext-map-head,.ext-home-info .ext-map-info-title {
  color:#eff8ff;
  border-color:rgba(93,165,209,.16) !important;
}
.ext-home-info .ext-map-rows dt { color:#9db4ca !important; }
.ext-home-info .ext-map-rows .is-pill {
  background:rgba(5,18,32,.86) !important;
  border-color:rgba(91,160,205,.2) !important;
  color:#e2f2ff !important;
}
.ext-home-recommend-list.is-detailed a {
  background:linear-gradient(130deg,rgba(7,45,70,.36),rgba(17,17,45,.33)) !important;
  border-color:rgba(72,168,221,.22) !important;
  border-radius:12px !important;
}
.ext-home-recommend-list.is-detailed a:hover {
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(0,0,0,.2),0 0 15px rgba(48,201,245,.08);
}
.ext-home-anonymity-cta {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:13px 16px;
  border-radius:13px;
  border:1px solid rgba(54,194,239,.34);
  color:#dff9ff !important;
  background:linear-gradient(100deg,rgba(0,126,184,.32),rgba(48,67,174,.22)) !important;
  text-decoration:none;
  font-weight:800;
  box-shadow:0 12px 28px rgba(0,0,0,.18);
  transition:transform .2s,border-color .2s,box-shadow .2s;
}
.ext-home-anonymity-cta:hover { transform:translateY(-2px); border-color:#48dfff; box-shadow:0 0 22px rgba(47,197,255,.15); }

/* Android app section: the three screen samples have inverse proportions. */
body.home-page #app-screens {
  padding:clamp(46px,5.5vw,76px) 20px !important;
  background:linear-gradient(rgba(0,0,0,.60),rgba(0,0,0,.60)) !important;
  border-bottom:1px solid rgba(74,143,203,.12);
}
body.home-page #app-screens > .max-w-7xl { max-width:1320px !important; }
.app-head { margin-bottom:12px !important; }
.app-kicker { color:#78e6ff !important; font-weight:800; letter-spacing:.15em !important; }
.app-title {
  text-align:left !important;
  margin:0 0 25px !important;
  font-size:clamp(25px,3.3vw,38px) !important;
  font-weight:850 !important;
  letter-spacing:-.04em !important;
}
.vpn-app-grid.app-preview-grid {
  grid-template-columns:minmax(0,.96fr) minmax(0,.82fr) minmax(0,1.22fr) !important;
  gap:12px !important;
  align-items:stretch;
}
.vpn-app-card {
  border:1px solid rgba(91,155,205,.25) !important;
  border-radius:18px !important;
  background:linear-gradient(145deg,rgba(10,27,48,.93),rgba(4,11,23,.97)) !important;
  box-shadow:0 20px 54px rgba(0,0,0,.27),inset 0 1px rgba(255,255,255,.04);
  transition:transform .24s,border-color .24s,box-shadow .24s;
}
.vpn-app-card:hover {
  transform:translateY(-4px);
  border-color:rgba(60,209,255,.47) !important;
  box-shadow:0 25px 60px rgba(0,0,0,.34),0 0 22px rgba(35,157,232,.08);
}
.vpn-app-card.breach { border-color:rgba(255,99,134,.28) !important; }
.vpn-app-card.map { border-color:rgba(49,207,255,.3) !important; }
.vpn-app-card.toolkit { border-color:rgba(155,125,255,.31) !important; }
.app-download-strip {
  display:flex;
  align-items:center;
  gap:16px;
  width:100%;
  margin-top:16px;
  padding:17px 21px;
  border:1px solid rgba(65,178,224,.25);
  border-radius:17px;
  background:
    radial-gradient(ellipse at 2% 50%,rgba(0,162,223,.18),transparent 45%),
    linear-gradient(105deg,rgba(8,28,49,.94),rgba(8,15,32,.94));
  box-shadow:0 17px 44px rgba(0,0,0,.24);
}
.app-download-icon {
  flex:none;
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border:1px solid rgba(56,215,255,.3);
  border-radius:13px;
  color:#65e9ff;
  background:rgba(5,131,180,.18);
  font-size:23px;
}
.app-download-copy { display:grid; gap:4px; flex:1; min-width:0; }
.app-download-copy b { color:#f2f8ff; font-size:15px; font-weight:850; }
.app-download-copy span { color:#9eb2c8; font-size:12px; line-height:1.5; }
.app-download-strip>a {
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:10px 14px;
  border:1px solid rgba(47,201,246,.3);
  border-radius:11px;
  color:#dff9ff;
  background:linear-gradient(110deg,rgba(0,128,187,.5),rgba(61,67,179,.38));
  font-size:11px;
  font-weight:800;
  text-decoration:none;
  white-space:nowrap;
}
.app-download-strip>a:hover { border-color:#5de3ff; box-shadow:0 0 18px rgba(41,191,244,.16); }

/* App and extension showcase panels connect into the next section like one visual story. */
body.home-page #pricing {
  padding-top:clamp(48px,6vw,82px) !important;
  background:linear-gradient(rgba(0,0,0,.50),rgba(0,0,0,.50)) !important;
}
body.home-page .home-free-cta { background:linear-gradient(rgba(0,0,0,.40),rgba(0,0,0,.40)) !important; }
body.home-page #news { background:linear-gradient(rgba(0,0,0,.30),rgba(0,0,0,.30)) !important; }

/* Tools lab: colourful ghost-network cards, but maintain strong text contrast. */
.di-tools-page {
  min-height:70vh;
  padding:70px 20px 88px !important;
  background:
    radial-gradient(ellipse at 6% 0%,rgba(13,145,204,.13),transparent 36%),
    radial-gradient(ellipse at 96% 18%,rgba(119,77,224,.095),transparent 34%),
    linear-gradient(180deg,rgba(4,11,22,.74),rgba(2,7,16,.94)) !important;
}
.di-tools-page::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.16;
  background-image:
    radial-gradient(circle,rgba(87,211,255,.8) 0 1px,transparent 1.8px),
    linear-gradient(120deg,transparent 49.8%,rgba(52,147,207,.17) 50%,transparent 50.2%);
  background-size:34px 34px,220px 220px;
  mask-image:linear-gradient(180deg,black,transparent 88%);
  animation:di-network-drift 32s linear infinite;
}
@keyframes di-network-drift { to{background-position:68px 68px,440px 0} }
.di-tools-wrap { max-width:1320px !important; }
.di-tools-kicker {
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:8px 13px;
  border:1px solid rgba(53,209,248,.27);
  border-radius:999px;
  background:rgba(5,62,93,.22);
  color:#78eaff !important;
  letter-spacing:.14em;
}
.di-tools-page h1 {
  max-width:900px;
  margin:20px 0 13px !important;
  color:#f5f9ff !important;
  font-size:clamp(35px,5vw,60px) !important;
  font-weight:900 !important;
  letter-spacing:-.05em !important;
  line-height:1.04 !important;
}
.di-tools-page h1 span {
  background:linear-gradient(100deg,#42ddff 4%,#7e9dff 52%,#b48aff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent !important;
}
.di-tools-lead { max-width:780px; color:#b0c2d6 !important; font-size:15px; line-height:1.75; }
.di-tools-note {
  max-width:980px;
  border:1px solid rgba(79,171,216,.23) !important;
  border-radius:16px !important;
  background:linear-gradient(120deg,rgba(5,47,74,.48),rgba(22,20,57,.26)) !important;
  box-shadow:0 14px 38px rgba(0,0,0,.17);
  backdrop-filter:blur(5px);
}
.di-tools-tier-heading {
  position:relative;
  align-items:flex-end !important;
  margin-top:48px !important;
  padding:0 0 17px !important;
  border-bottom-color:rgba(84,152,198,.23) !important;
}
.di-tools-tier-heading h2 {
  margin:10px 0 6px !important;
  color:#f3f8ff !important;
  font-size:clamp(21px,2.4vw,27px) !important;
  font-weight:850 !important;
  letter-spacing:-.03em;
}
.di-tools-tier-heading p { max-width:740px; color:#9eafc3 !important; line-height:1.6; }
.di-tier-count { color:#90a9c3 !important; font-size:10px !important; }
.di-tools-grid {
  display:grid !important;
  grid-template-columns:repeat(12,minmax(0,1fr)) !important;
  gap:12px !important;
  margin-top:18px !important;
}
.di-tools-grid .di-tool-card {
  --tool-accent:#35d9ff;
  --tool-glow:rgba(30,165,226,.17);
  position:relative;
  isolation:isolate;
  grid-column:span 4;
  overflow:hidden;
  min-height:208px !important;
  padding:21px !important;
  border:1px solid rgba(62,164,211,.29) !important;
  border-radius:18px 24px 18px 22px !important;
  background:
    radial-gradient(ellipse at 86% 5%,var(--tool-glow),transparent 54%),
    linear-gradient(145deg,rgba(10,27,47,.95),rgba(4,11,23,.97)) !important;
  box-shadow:0 16px 42px rgba(0,0,0,.24),inset 0 1px rgba(255,255,255,.035);
  text-decoration:none !important;
  transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease,background .24s ease;
}
.di-tools-grid .di-tool-card::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  opacity:.55;
  pointer-events:none;
  background:
    radial-gradient(circle,var(--tool-accent) 0 1px,transparent 1.5px),
    linear-gradient(130deg,transparent 0 48%,rgba(100,177,222,.07) 48.2% 48.6%,transparent 49% 100%);
  background-size:28px 28px,100% 100%;
  mask-image:linear-gradient(130deg,transparent 12%,black 80%);
  transition:opacity .25s,transform .35s;
}
.di-tools-grid .di-tool-card::after {
  content:"";
  position:absolute;
  z-index:-1;
  width:110px;
  height:110px;
  right:-50px;
  top:-52px;
  border:1px solid var(--tool-accent);
  border-radius:50%;
  opacity:.17;
  box-shadow:0 0 0 14px rgba(255,255,255,.012),0 0 0 29px rgba(255,255,255,.01);
  transition:transform .45s,opacity .3s;
}
.di-tools-grid .di-tool-card:nth-child(6n+1) { --tool-accent:#36dcff; --tool-glow:rgba(0,150,230,.2); grid-column:span 5; }
.di-tools-grid .di-tool-card:nth-child(6n+2) { --tool-accent:#aa8cff; --tool-glow:rgba(127,78,232,.2); grid-column:span 4; }
.di-tools-grid .di-tool-card:nth-child(6n+3) { --tool-accent:#43e0b0; --tool-glow:rgba(27,169,116,.16); grid-column:span 3; }
.di-tools-grid .di-tool-card:nth-child(6n+4) { --tool-accent:#f6bf59; --tool-glow:rgba(198,128,32,.17); grid-column:span 3; }
.di-tools-grid .di-tool-card:nth-child(6n+5) { --tool-accent:#ff7295; --tool-glow:rgba(199,61,111,.18); grid-column:span 4; }
.di-tools-grid .di-tool-card:nth-child(6n+6) { --tool-accent:#5e9cff; --tool-glow:rgba(37,96,216,.18); grid-column:span 5; }
.di-tools-grid .di-tool-card[data-tool="double-vpn"] { --tool-accent:#36dcff; --tool-glow:rgba(0,150,230,.2); }
.di-tools-grid .di-tool-card[data-tool="family-guard"] { --tool-accent:#43e0b0; --tool-glow:rgba(27,169,116,.16); }
.di-tools-grid .di-tool-card[data-tool="post-quantum-security"] { --tool-accent:#aa8cff; --tool-glow:rgba(127,78,232,.2); }
.di-tools-grid .di-tool-card .di-tool-icon {
  width:47px;
  height:47px;
  border:1px solid color-mix(in srgb,var(--tool-accent) 40%,transparent);
  border-radius:14px;
  color:var(--tool-accent) !important;
  background:color-mix(in srgb,var(--tool-accent) 12%,transparent) !important;
  box-shadow:0 8px 24px color-mix(in srgb,var(--tool-accent) 11%,transparent);
  transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s;
}
.di-tools-grid .di-tool-card:hover {
  z-index:2;
  transform:translateY(-5px) scale(1.006);
  border-color:var(--tool-accent) !important;
  box-shadow:0 24px 54px rgba(0,0,0,.34),0 0 26px color-mix(in srgb,var(--tool-accent) 17%,transparent);
}
.di-tools-grid .di-tool-card:hover::before { opacity:.9; transform:translate3d(8px,-5px,0); }
.di-tools-grid .di-tool-card:hover::after { opacity:.4; transform:scale(1.35); }
.di-tools-grid .di-tool-card:hover .di-tool-icon {
  transform:translateY(-4px) rotate(-7deg) scale(1.07);
  box-shadow:0 10px 28px color-mix(in srgb,var(--tool-accent) 22%,transparent);
}
.di-tools-grid .di-tool-card .di-tool-meta { margin:15px 0 7px; }
.di-tools-grid .di-tool-card .di-tool-meta b { color:var(--tool-accent); }
.di-tools-grid .di-tool-card .di-tool-meta em { color:var(--tool-accent); border-color:currentColor; }
.di-tools-grid .di-tool-card h3 {
  color:#f2f8ff !important;
  font-size:clamp(15px,1.4vw,18px) !important;
  font-weight:850 !important;
  letter-spacing:-.025em;
}
.di-tools-grid .di-tool-card p { color:#9eb2c8 !important; font-size:12px; line-height:1.6; }
.di-tools-grid .di-tool-link { color:var(--tool-accent) !important; font-size:11px; }
.di-tools-grid .di-tool-card.is-locked-pro { opacity:.94; }
.di-tools-grid .di-tier-pro .di-tool-card { border-color:rgba(183,151,255,.26) !important; }
.di-tools-grid .di-tool-card.is-locked-pro .di-tool-link { color:#e2c27b !important; }
.di-tools-bottom {
  margin-top:26px !important;
  border:1px solid rgba(49,190,232,.25) !important;
  border-radius:18px !important;
  padding:21px 23px !important;
  background:linear-gradient(105deg,rgba(7,48,72,.56),rgba(27,22,62,.35)) !important;
  box-shadow:0 16px 38px rgba(0,0,0,.2);
}
.di-tools-bottom a { color:#78eaff !important; }

/* Individual tool page — the test is the focal point, supporting information remains readable. */
.di-tool-detail { padding-top:60px !important; }
.di-tool-crumb { color:#8298b2 !important; margin-bottom:22px !important; }
.di-tool-crumb a { color:#69dfff !important; }
.di-tool-hero { margin-bottom:24px !important; }
.di-tool-hero h1 {
  font-size:clamp(31px,4.2vw,50px) !important;
  font-weight:900 !important;
  letter-spacing:-.045em !important;
  line-height:1.06 !important;
}
.di-tool-hero .di-tools-kicker { color:#72e5ff !important; }
.di-tool-hero-icon {
  border-radius:24px !important;
  border-color:rgba(73,190,236,.3) !important;
  background:linear-gradient(145deg,rgba(12,82,122,.25),rgba(80,59,166,.17)) !important;
  color:#70e6ff !important;
  box-shadow:0 0 42px rgba(31,153,226,.1);
  animation:di-tool-icon-float 6s ease-in-out infinite;
}
@keyframes di-tool-icon-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
.di-tool-detail .di-tool-layout { grid-template-columns:minmax(0,1fr) 270px !important; gap:16px !important; }
.di-test-panel,.di-tool-explain,.di-aside-card {
  border:1px solid rgba(82,155,205,.22) !important;
  border-radius:18px !important;
  background:
    radial-gradient(ellipse at 92% 0%,rgba(12,113,167,.09),transparent 44%),
    linear-gradient(145deg,rgba(10,26,45,.92),rgba(4,11,22,.96)) !important;
  box-shadow:0 19px 52px rgba(0,0,0,.23),inset 0 1px rgba(255,255,255,.03) !important;
}
.di-test-head h2,.di-tool-explain h2 { color:#f2f8ff !important; font-weight:850 !important; letter-spacing:-.025em; }
.di-test-kicker { color:#71e4ff !important; }
.di-test-desc,.di-tool-explain p { color:#a7b8cb !important; line-height:1.72 !important; }
.di-test-actions button,.di-tool-subcheck button {
  background:linear-gradient(105deg,#13c9ed,#306bf0) !important;
  color:#02121c !important;
  border:1px solid rgba(124,231,255,.28) !important;
  border-radius:11px !important;
  font-weight:850 !important;
  box-shadow:0 8px 22px rgba(0,136,217,.18);
  transition:transform .2s,filter .2s,box-shadow .2s;
}
.di-test-actions button:hover,.di-tool-subcheck button:hover { transform:translateY(-2px); filter:brightness(1.08); box-shadow:0 12px 28px rgba(0,136,217,.24); }
.di-test-actions .di-test-secondary,.di-tool-subcheck .di-test-secondary {
  color:#cdeeff !important;
  background:rgba(22,53,80,.72) !important;
  border-color:rgba(104,165,203,.28) !important;
  box-shadow:none;
}
.di-result-row,.di-empty-result {
  background:rgba(2,10,21,.62) !important;
  border-color:rgba(91,151,192,.14) !important;
}
.di-tool-explain h2 { margin-bottom:12px !important; }
.di-check-list div { color:#c2d4e6 !important; }
.di-check-list i { color:#57dfff !important; }
.di-tool-limit { border-radius:15px !important; }
.di-aside-card>b { color:#f2f8ff !important; }
.di-aside-links a { color:#bdd0e4 !important; }
.di-aside-links a:hover { color:#64e6ff !important; }
.di-tool-article {
  border-color:rgba(62,178,224,.25) !important;
  background:linear-gradient(110deg,rgba(6,54,81,.45),rgba(37,34,83,.25)) !important;
}
.di-pro-cta { box-shadow:0 12px 26px rgba(216,145,34,.13); }

/* Footer keeps its own existing Earth/map artwork; desktop fixed background adds restrained parallax. */
@media(min-width:768px) {
  .dv-footer-panel { background-attachment:fixed !important; }
}
@media(max-width:767px) {
  .dv-footer-panel { background-attachment:scroll !important; }
}

/* Responsive layout. */
@media(max-width:1100px) {
  .why-feature-primary .feat-card { grid-column:span 6; }
  .why-feature-grid .feat-card:nth-child(1) { grid-column:span 6; }
  .why-feature-grid .feat-card:nth-child(n+2) { grid-column:span 4; }
  .vpn-app-grid.app-preview-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .vpn-app-grid.app-preview-grid .vpn-app-card.toolkit { grid-column:span 2; }
}
@media(max-width:900px) {
  .di-tool-detail .di-tool-layout { grid-template-columns:minmax(0,1fr) !important; }
  .di-tool-detail .di-tool-aside { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:767px) {
  .site-header { background:rgba(2,6,15,.97) !important; }
  .why-di-section { padding:32px 0 42px !important; }
  .why-section-heading { align-items:flex-start; flex-direction:column; gap:13px; margin-bottom:18px; }
  .why-section-heading .feat-title { font-size:27px !important; }
  .why-section-heading p { font-size:12px; }
  .why-section-explore { padding:8px 12px; font-size:10px; }
  .why-feature-layout { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
  .why-feature-primary .feat-card { grid-column:1/-1; min-height:170px; }
  .why-feature-grid .feat-card:nth-child(1),
  .why-feature-grid .feat-card:nth-child(n+2) { grid-column:span 1; min-height:166px; }
  .why-feature-layout .feat-card { padding:15px !important; border-radius:16px 20px 15px 18px !important; }
  .why-feature-layout .feat-card h3 { font-size:13px !important; line-height:1.3; }
  .why-feature-layout .feat-card p { font-size:10.5px; line-height:1.45; }
  .why-feature-layout .feat-icon-bg { top:10px !important; right:11px !important; font-size:48px !important; }
  .why-feature-layout .feat-card::after { display:none; }
  .ext-home-live { grid-template-columns:minmax(0,1fr) !important; gap:13px !important; }
  .home-extension-section { padding-block:42px !important; }
  .home-app-section { padding:42px 12px !important; }
  .app-title { font-size:24px !important; line-height:1.15; margin-bottom:18px !important; }
  .vpn-app-grid.app-preview-grid { grid-template-columns:1fr !important; }
  .vpn-app-grid.app-preview-grid .vpn-app-card.toolkit { grid-column:auto; }
  .app-download-strip { align-items:flex-start; flex-wrap:wrap; gap:11px; padding:14px; }
  .app-download-icon { width:37px; height:37px; font-size:19px; }
  .app-download-copy { flex:1 1 calc(100% - 55px); }
  .app-download-copy b { font-size:13px; }
  .app-download-copy span { font-size:10.5px; }
  .app-download-strip>a { width:100%; justify-content:center; }
  .di-tools-page { padding:48px 13px 58px !important; }
  .di-tools-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:9px !important; }
  .di-tools-grid .di-tool-card,
  .di-tools-grid .di-tool-card:nth-child(n) { grid-column:span 1 !important; min-height:178px !important; padding:13px !important; }
  .di-tools-grid .di-tool-card .di-tool-icon { width:37px; height:37px; }
  .di-tools-grid .di-tool-card h3 { font-size:13px !important; }
  .di-tools-grid .di-tool-card p { font-size:10px !important; line-height:1.45; }
  .di-tools-tier-heading { align-items:flex-start !important; gap:9px; margin-top:31px !important; }
  .di-tools-tier-heading h2 { font-size:19px !important; }
  .di-tools-tier-heading p { display:none; }
  .di-tool-detail { padding:42px 13px 56px !important; }
  .di-tool-hero { align-items:flex-start; }
  .di-tool-hero-icon { width:66px; height:66px; flex-basis:66px; font-size:25px; border-radius:18px !important; }
  .di-tool-detail .di-tool-aside { grid-template-columns:1fr; }
  .pricing-page { padding:46px 0 66px !important; }
  .pricing-head { padding:0 14px; margin-bottom:29px; }
  .pricing-head h1 { font-size:32px !important; }
  .page-content-section { padding:44px 0 60px !important; }
  .page-content-container { padding:0 15px; }
  .page-content-header { margin-bottom:24px; }
  .page-content-header h1 { font-size:30px !important; }
  .contact-section { padding:45px 14px 58px !important; }
}
@media(max-width:420px) {
  .why-feature-layout { gap:8px; }
  .why-feature-grid .feat-card:nth-child(1),.why-feature-grid .feat-card:nth-child(n+2) { min-height:154px; }
  .why-feature-layout .feat-card h3 { font-size:12px !important; }
  .why-feature-layout .feat-card p { font-size:9.8px; }
  .di-tools-grid .di-tool-card,.di-tools-grid .di-tool-card:nth-child(n) { min-height:163px !important; padding:10px !important; }
}
@media(prefers-reduced-motion:reduce) {
  .why-feature-layout .feat-card,.why-feature-layout .feat-icon-bg,
  .di-tools-grid .di-tool-card,.di-tools-grid .di-tool-icon,
  .di-tool-hero-icon,.app-download-strip>a { animation:none !important; transition:none !important; }
  .di-tools-page::before { animation:none !important; }
}