/* Cavetechia 2050 — visual system, homepages only. */
:root {
  --cave-ink: #06111d;
  --cave-blue: #19b9ff;
  --cave-cyan: #7de8ff;
  --cave-gold: #f5c453;
  --cave-paper: #f4f6f4;
  --cave-line: rgba(8, 41, 65, .13);
  --cave-radius: 28px;
  --cave-shadow: 0 24px 70px rgba(5, 24, 40, .12);
  --cave-font: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
@view-transition { navigation: auto; }
html { overflow-x: clip; background: var(--cave-paper); }
body {
  overflow-x: clip;
  font-family: var(--cave-font);
  background: radial-gradient(circle at 8% 20%, rgba(25,185,255,.08), transparent 28rem), radial-gradient(circle at 92% 38%, rgba(245,196,83,.08), transparent 25rem), var(--cave-paper);
  color: var(--cave-ink);
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .26;
  background-image: linear-gradient(rgba(9,55,82,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(9,55,82,.035) 1px, transparent 1px);
  background-size: 42px 42px; mask-image: linear-gradient(to bottom, #000, transparent 68%);
}
header { background: rgba(6,17,29,.82); border-bottom: 1px solid rgba(125,232,255,.16); box-shadow: 0 10px 34px rgba(0,0,0,.12); backdrop-filter: blur(22px) saturate(145%); }
.nav { max-width: 1280px; }
.logo-full { filter: drop-shadow(0 8px 18px rgba(0,0,0,.2)); }
.nav-dropdown-toggle, .nav-about-link { letter-spacing: .01em; font-weight: 750; }
.hero {
  min-height: min(620px, 74vh); padding: clamp(70px, 9vw, 118px) max(24px, calc((100vw - 1280px) / 2)) 52px;
  display: grid; align-content: end; grid-template-columns: minmax(0, 1fr) minmax(300px, .55fr); column-gap: 48px; view-transition-name: cave-hero;
}
.hero::before {
  content: "CAVETECHIA  /  ENERGY INTELLIGENCE"; position: absolute; z-index: 3; top: clamp(30px, 6vw, 72px); left: max(24px, calc((100vw - 1280px) / 2));
  padding: 8px 12px; border: 1px solid rgba(125,232,255,.34); border-radius: 999px; background: rgba(4,22,36,.56); color: #c9f6ff;
  font-size: 10px; font-weight: 900; letter-spacing: .16em; backdrop-filter: blur(14px);
}
.hero::after { background: linear-gradient(90deg, rgba(2,10,17,.78) 0%, rgba(3,14,24,.42) 48%, rgba(3,14,24,.08) 84%), linear-gradient(to top, rgba(2,10,17,.86), rgba(2,10,17,.01) 66%); }
.hero-bg { inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; transform: scale(1.01); filter: saturate(.92) contrast(1.04); }
.hero h1 { align-self: end; margin: 0; max-width: 820px; letter-spacing: -.055em; text-wrap: balance; }
.hero-title-main { font-size: clamp(52px, 6.8vw, 96px); }
.hero-title-sub { margin-top: 8px; color: transparent; font-size: clamp(30px, 4.2vw, 60px); background: linear-gradient(100deg, #fff 0%, var(--cave-cyan) 52%, #ffe69b 100%); background-clip: text; -webkit-background-clip: text; }
.hero p { position: relative; z-index: 3; align-self: end; justify-self: end; max-width: 470px; margin: 0 0 8px; padding: 20px 0 2px 26px; border-left: 1px solid rgba(125,232,255,.54); color: rgba(239,249,255,.84); font-size: clamp(15px, 1.3vw, 18px); line-height: 1.65; }
.home-confidence { width: min(1280px, calc(100% - 40px)); margin-top: -22px; padding: 26px 28px; border: 1px solid rgba(255,255,255,.7); border-radius: var(--cave-radius); background: rgba(250,253,253,.86); box-shadow: var(--cave-shadow), inset 0 0 0 1px var(--cave-line); backdrop-filter: blur(20px); }
.home-confidence-copy h2 { letter-spacing: -.035em; }
.home-confidence-point { border-color: rgba(19,116,162,.14); border-radius: 16px; background: linear-gradient(145deg, rgba(255,255,255,.94), rgba(226,244,251,.70)); }
.decision-tools { position: relative; width: min(1200px, calc(100% - 40px)); margin: 68px auto; border-radius: 34px; box-shadow: 0 38px 100px rgba(5,30,50,.15); }
.decision-tools::before { content: "01  /  ENERGY MODEL"; position: absolute; top: -34px; left: 4px; color: #456274; font-size: 10px; font-weight: 900; letter-spacing: .18em; }
.decision-tools .tools-heading h2 { max-width: 900px; letter-spacing: -.045em; text-wrap: balance; }
.seo-guide-strip, .smart-picks, .brand-worlds, .affiliate-partners, .planning-section, .container { width: min(1280px, calc(100% - 40px)); }
.seo-guide-strip, .brand-worlds, .affiliate-partners { border-radius: var(--cave-radius); }
.seo-guide-card, .brand-world, .affiliate-partner, .product-card { transform: translateZ(0); transition: transform .28s cubic-bezier(.2,.75,.25,1), box-shadow .28s ease, border-color .28s ease; }
.seo-guide-card:hover, .brand-world:hover, .affiliate-partner:hover, .product-card:hover { transform: translateY(-5px); }
.featured-box { border-radius: 32px; box-shadow: 0 35px 90px rgba(5,28,47,.20); }
.brand-worlds-heading h2, .planning-heading h2, .seo-guide-heading h2 { letter-spacing: -.04em; text-wrap: balance; }
.footer-premium { position: relative; overflow: hidden; border-top: 1px solid rgba(125,232,255,.18); background: radial-gradient(circle at 18% 20%, rgba(25,185,255,.16), transparent 30rem), linear-gradient(135deg, #05111d, #0b263b 64%, #071622); }
.footer-premium::before { content: "CAVETECHIA / ENERGY INTELLIGENCE"; display: block; margin-bottom: 22px; color: rgba(125,232,255,.65); font-size: 10px; font-weight: 900; letter-spacing: .2em; }
:focus-visible { outline: 3px solid var(--cave-gold); outline-offset: 4px; }
@media (max-width: 900px) { .hero { grid-template-columns: 1fr; min-height: 610px; } .hero p { justify-self: start; max-width: 620px; margin-top: 30px; } }
@media (max-width: 700px) {
  html, body { max-width: 100%; overflow-x: clip; }
  header { padding: 9px 14px; }
  .logo-full { width: 150px; }
  #navLinks { display: none !important; }
  #mobileNavPanel { right: 0 !important; width: min(340px, 88vw); max-width: calc(100vw - 28px); transform: translate3d(110%, 0, 0); visibility: hidden; pointer-events: none; transition: transform .32s cubic-bezier(.2,.8,.2,1), visibility 0s linear .32s; }
  #mobileNavPanel.open { transform: translate3d(0, 0, 0); visibility: visible; pointer-events: auto; transition-delay: 0s; }
  .hero { min-height: 520px; padding: 80px 20px 30px; align-content: end; background: #03101b; }
  .hero::before { top: 24px; left: 20px; font-size: 8px; letter-spacing: .11em; }
  .hero::after { background: linear-gradient(to bottom, rgba(2,10,17,.22), rgba(2,10,17,.1) 35%, rgba(2,10,17,.94) 78%), linear-gradient(90deg, rgba(2,10,17,.45), transparent 70%); }
  .hero-bg { object-position: 60% center; }
  .hero h1 { margin: 0; }
  .hero-title-main { font-size: clamp(42px, 13vw, 58px); }
  .hero-title-sub { font-size: clamp(27px, 8.6vw, 38px); }
  .hero p { margin-top: 24px; padding: 15px 0 0; border: 0; border-top: 1px solid rgba(125,232,255,.45); font-size: 14px; }
  .home-confidence, .decision-tools, .seo-guide-strip, .smart-picks, .brand-worlds, .affiliate-partners, .planning-section, .container { width: calc(100% - 28px); }
  .home-confidence { margin-top: -16px; padding: 20px; border-radius: 22px; }
  .decision-tools { margin-top: 64px; border-radius: 24px; }
  .featured-box { border-radius: 24px; }
  .mobile-bottom-bar { height: 62px; border-top-color: rgba(125,232,255,.20); background: rgba(5,17,29,.92); backdrop-filter: blur(20px) saturate(150%); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

/* Brand marks are displayed directly: no white capsules, frames or backing cards. */
.brand-logo-frame,
.affiliate-logo-frame {
  width: 124px !important;
  height: 48px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.brand-world-logo,
.affiliate-partner-logo {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  filter: drop-shadow(0 5px 10px rgba(4,20,34,.16));
}
.affiliate-partner-logo { filter: drop-shadow(0 6px 12px rgba(0,0,0,.28)); }