/* ===== v11 — futuristic interactive background theme ===== */
/* Loaded after styles.css. Flips the light sections to a dark, glass-panel
   look so the animated canvas network reads through the whole site. */

:root{
  --ink-light:#eaf1f7;
  --bg: transparent;
  --bg-alt: rgba(255,255,255,.035);
  --border: rgba(255,255,255,.14);
  --text: #dbe4ea;
  --text-muted: #93a6b4;
}

html, body{background:#0b141c;}

body{
  background:
    radial-gradient(900px 500px at 12% -10%, rgba(200,26,6,.10), transparent 60%),
    radial-gradient(1100px 700px at 100% 0%, rgba(41,64,79,.55), transparent 55%),
    #0b141c;
}

/* these sections carry their own solid navy background in styles.css (by
   design for the light theme) which otherwise paints over the fixed
   particle canvas — swap it for a translucent tint so the canvas shows through */
.hero,
.promo-strip,
.cta-section{
  background:
    radial-gradient(1200px 500px at 85% -10%, rgba(200,26,6,.14), transparent 60%),
    rgba(20,32,43,.55) !important;
}

#futuristic-bg{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  display:block;
}

/* promote the real content above the fixed background canvas explicitly,
   instead of relying on the canvas having a negative z-index (unreliable
   once html/body themselves have an opaque background — the browser can
   paint that root background above a negative-z-index fixed descendant) */
.announce-bar,
main,
.site-footer{
  position:relative;
  z-index:1;
}

h1,h2,h3,
.btn-ghost,
.logo,
.main-nav a:hover,
.main-nav a.active,
.cert-logo,
.callout strong,
.spec-table td,
.scan-shape span,
.faq-item summary,
.origin-card-kr .origin-copy h3{
  color:var(--ink-light);
}

.btn-ghost{border-color:var(--border);}
.btn-ghost:hover{border-color:var(--ink-light); background:rgba(255,255,255,.06);}

/* ===== Header ===== */
.site-header{
  background:rgba(11,20,28,.72);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--border);
}
.nav-toggle span{background:var(--ink-light);}

/* the wordmark SVG hardcodes navy fills in its own inline <style>; beat it explicitly */
.logo-mark-full .lm-word,
.logo-mark-full .lm-line{fill:#eaf1f7 !important; stroke:#eaf1f7 !important;}
.logo-mark-full .lm-dot{fill:#c81a06 !important;}

body.nav-open .main-nav{
  background:#0e1a24;
  border-top:1px solid var(--border);
}
body.nav-open .main-nav a{border-bottom:1px solid var(--border);}

/* ===== Glass panels (cards that were solid white) ===== */
.feature-card,
.pieza-card,
.haz-card,
.faq-item,
.callout{
  background:rgba(255,255,255,.045);
  border:1px solid var(--border);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 20px 44px -28px rgba(0,0,0,.6);
}
.feature-card:hover,
.equipo-card:hover{
  box-shadow:0 24px 54px -24px rgba(0,0,0,.7);
  border-color:rgba(255,255,255,.26);
}
.feature-icon{background:rgba(200,26,6,.14);}
.callout{border-left:4px solid var(--red); border-radius:0 var(--radius) var(--radius) 0;}

.tag{border-color:rgba(200,26,6,.45); color:#ff8f7a;}

.scan-shape{background:rgba(255,255,255,.035); border:1px solid var(--border);}
.scan-shape-accent{background:rgba(200,26,6,.16); color:var(--ink-light);}

/* ===== Origin card (was light gradient) ===== */
.origin-card-kr{
  background:linear-gradient(135deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 100%);
  color:var(--ink-light);
}
.origin-card-kr .origin-flag{border-color:var(--border);}

/* ===== Certifications bar ===== */
.cert-bar{background:rgba(255,255,255,.03); border-bottom:1px solid var(--border);}

/* ===== Spec table ===== */
.table-wrap{border-color:var(--border);}
.spec-table tr:nth-child(even){background:rgba(255,255,255,.03);}
.spec-table th,.spec-table td{border-bottom:1px solid var(--border);}

/* ===== Footer ===== */
.site-footer{background:rgba(255,255,255,.03); border-top:1px solid var(--border);}

/* ===== Media photos — slightly brighter border on dark ===== */
.media-photo,.pieza-media,.hero-media img{border-color:rgba(255,255,255,.18) !important;}

/* ===== FAQ icon ring on dark ===== */
.faq-item summary .faq-icon{border-color:var(--border);}

@media (prefers-reduced-motion: reduce){
  #futuristic-bg{display:none;}
}