/* Directory Network Visual System v2 — vertical-aware, original, generator-safe */
:root {
  --dn-v2-primary: #006778;
  --dn-v2-accent: #d79a18;
  --dn-v2-ink: #061114;
  --dn-v2-paper: #ffffff;
  --dn-v2-soft: #f4f7f7;
  --dn-v2-radius: 18px;
  --dn-v2-shadow: 0 22px 58px rgba(4, 24, 31, .16);
}

.dn-v2-hero {
  min-height: clamp(500px, 70vh, 760px);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 74% 28%, color-mix(in srgb, var(--dn-v2-accent) 28%, transparent), transparent 30%),
    linear-gradient(90deg, rgba(0,0,0,.26), rgba(0,0,0,0) 56%),
    linear-gradient(135deg, color-mix(in srgb, var(--dn-v2-primary) 88%, black), #020608 72%) !important;
}
.dn-v2-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(110deg, transparent, black 38%, black 78%, transparent);
  opacity: .28;
}
.dn-v2-hero::after {
  content: "";
  position: absolute;
  inset: auto 8% 0 8%;
  height: 1px;
  z-index: 1;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--dn-v2-accent) 74%, white), transparent);
  opacity: .7;
}

.dn-v2-hero > :not(.dn-v2-art) { position: relative; z-index: 2; }
.dn-v2-art {
  position: absolute;
  z-index: 0;
  width: min(46vw, 660px);
  right: clamp(-110px, 2vw, 44px);
  bottom: clamp(24px, 7vh, 90px);
  color: var(--dn-v2-accent);
  opacity: .32;
  filter: drop-shadow(0 18px 45px rgba(0,0,0,.36));
  pointer-events: none;
}
.dn-v2-art svg { display: block; width: 100%; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.dn-v2-art [data-fill] { fill: color-mix(in srgb, currentColor 18%, transparent); stroke-width: 2; }
.dn-v2-art [data-thin] { stroke-width: 1.6; opacity: .62; }

.hero h1, .dn-v2-hero h1 { max-width: 850px; margin-inline: auto; text-wrap: balance; }
.hero p, .dn-v2-hero p { text-wrap: pretty; }
.hero-cta, .btn, .affiliate-btn, .gear-link, .gear-buy {
  border-radius: 12px !important;
  box-shadow: 0 12px 30px color-mix(in srgb, var(--dn-v2-primary) 30%, transparent);
}

.dn-v2-hero .hero-cta,
.dn-v2-hero .btn,
.dn-v2-hero .affiliate-btn {
  background: var(--dn-v2-accent) !important;
  border-color: color-mix(in srgb, var(--dn-v2-accent) 70%, white) !important;
  color: color-mix(in srgb, var(--dn-v2-primary) 86%, black) !important;
}

.service-card {
  border-radius: var(--dn-v2-radius) !important;
  border-color: color-mix(in srgb, var(--dn-v2-primary) 18%, #d7dfe3) !important;
  box-shadow: 0 9px 26px rgba(8, 32, 39, .07);
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.service-card .icon {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: #fff !important;
  background: var(--dn-v2-primary);
  font: 800 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .08em;
}
.service-card:hover { transform: translateY(-5px); box-shadow: var(--dn-v2-shadow) !important; }

.card, .curated-card, .product-card, .gear-card, .affiliate-card, .article-card {
  border-radius: var(--dn-v2-radius) !important;
  box-shadow: 0 12px 34px rgba(8, 32, 39, .08);
}
.kw-tag, .curated-tag, .badge, .tag {
  border-radius: 999px !important;
}
.dn-v2-commerce-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--dn-v2-accent) 28%, #d7dfe3) !important;
}
.dn-v2-commerce-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 15% 12%, color-mix(in srgb, var(--dn-v2-accent) 14%, transparent), transparent 28%),
    linear-gradient(135deg, color-mix(in srgb, var(--dn-v2-soft) 88%, white), #fff);
}

.trust { position: relative; z-index: 4; }
.trust-item span { color: var(--dn-v2-primary) !important; }
.sec-label, .article-link { color: var(--dn-v2-primary) !important; }
.form-section { background: linear-gradient(145deg, color-mix(in srgb, var(--dn-v2-primary) 35%, #020608), #020608) !important; }

html[data-dn-vertical="marine"] { --dn-v2-primary: #00274c; --dn-v2-accent: #ffcb05; }
html[data-dn-vertical="travel"] { --dn-v2-primary: #006778; --dn-v2-accent: #ff9f1c; }
html[data-dn-vertical="property"] { --dn-v2-primary: #12304a; --dn-v2-accent: #c9a84c; }
html[data-dn-vertical="health"] { --dn-v2-primary: #3f3151; --dn-v2-accent: #d991a7; }
html[data-dn-vertical="outdoor"] { --dn-v2-primary: #213d2a; --dn-v2-accent: #d6a53a; }
html[data-dn-vertical="technology"] { --dn-v2-primary: #061f2b; --dn-v2-accent: #19c3c8; }
html[data-dn-vertical="professional"] { --dn-v2-primary: #17233b; --dn-v2-accent: #c3a55b; }
html[data-dn-vertical="emergency"] { --dn-v2-primary: #142630; --dn-v2-accent: #f0a629; }
html[data-dn-vertical="food"] { --dn-v2-primary: #23442d; --dn-v2-accent: #c58a2c; --dn-v2-soft: #fbf7ed; }
html[data-dn-vertical="faith"] { --dn-v2-primary: #2e2541; --dn-v2-accent: #d8b75c; }
html[data-dn-vertical="sports"] { --dn-v2-primary: #122943; --dn-v2-accent: #e84f35; }
html[data-dn-vertical="beauty"] { --dn-v2-primary: #5b2d46; --dn-v2-accent: #e6a6b8; }
html[data-dn-vertical="home"] { --dn-v2-primary: #17434a; --dn-v2-accent: #d79a18; }

@media (max-width: 760px) {
  .dn-v2-hero { min-height: 620px; }
  .dn-v2-art { width: 92vw; right: -28vw; bottom: 20px; opacity: .16; }
  .dn-v2-hero::before { background-size: 32px 32px; opacity: .2; }
}

@media (prefers-reduced-motion: reduce) {
  .service-card, .hero-cta, .btn, .affiliate-btn, .gear-link, .gear-buy { transition: none !important; }
}