/* ────────────────────────────────────────────────────────────────────────────
   Valentin Industries — High-end Designer Portfolio (Dark)
   No external fonts; responsive type & grid; subtle motion & depth.
   ─────────────────────────────────────────────────────────────────────────── */
:root{
  /* Core palette */
  --bg-0:#05060a;
  --bg-1:#0b1020;
  --bg-2:#0e172a;
  --ink:#e7ecf5;
  --muted:#a6b0c5;
  --line:rgba(148,163,184,.18);

  /* Brand accents (Nordic blues) */
  --brand-1:#67b3ff;
  --brand-2:#4cc9f0;
  --brand-3:#99f6ff;

  --radius:16px;
  --shadow:0 30px 100px rgba(0,0,0,.45);

  /* Dynamic surfaces */
  --body-bg:radial-gradient(1200px 600px at 10% -20%, rgba(103,179,255,.10), transparent 60%),radial-gradient(900px 380px at 90% 0%, rgba(76,201,240,.10), transparent 60%),linear-gradient(180deg, var(--bg-0), var(--bg-1) 42%, var(--bg-2) 100%);
  --nav-bg:linear-gradient(180deg, rgba(5,6,10,.85), rgba(5,6,10,.55));
  --hero-identity-bg:radial-gradient(420px 320px at 85% 0%, rgba(76,201,240,.18), transparent 65%),radial-gradient(540px 360px at 15% 20%, rgba(103,179,255,.14), transparent 60%),linear-gradient(135deg, rgba(9,13,23,.85), rgba(9,13,23,.55));
  --hero-identity-outline:rgba(148,163,184,.15);
  --card-bg:linear-gradient(180deg, rgba(16,23,42,.65), rgba(16,23,42,.35));
  --marquee-chip-bg:rgba(11,17,32,.35);
  --company-hover-bg:rgba(16,23,42,.75);
  --classified-bg:rgba(9,13,23,.55);
  --classified-border:rgba(103,179,255,.35);
  --classified-label:rgba(153,246,255,.85);
  --hover-border:rgba(96,165,250,.35);
  --stat-bg:rgba(9,13,23,.55);
  --halo-outer:rgba(103,179,255,.12);
  --halo-inner:rgba(76,201,240,.35);
  --dot-glow:rgba(76,201,240,.8);
  --heading-glow:rgba(103,179,255,.3);
  --heading-soft:rgba(103,179,255,.2);
  --subheading-glow:rgba(153,246,255,.3);
  --signal-color:rgba(231,236,245,.8);
  --code-bg:rgba(9,13,23,.6);
}

body[data-theme="gold"]{
  --bg-0:#040403;
  --bg-1:#090807;
  --bg-2:#120f09;
  --ink:#f8f5eb;
  --muted:#d2c5a0;
  --line:rgba(214,188,120,.32);
  --brand-1:#f6d365;
  --brand-2:#d4af37;
  --brand-3:#fceabb;
  --body-bg:radial-gradient(1200px 600px at 10% -20%, rgba(246,211,101,.12), transparent 60%),radial-gradient(900px 380px at 90% 0%, rgba(212,175,55,.12), transparent 60%),linear-gradient(180deg, var(--bg-0), var(--bg-1) 40%, var(--bg-2) 100%);
  --nav-bg:linear-gradient(180deg, rgba(12,10,6,.85), rgba(12,10,6,.55));
  --hero-identity-bg:radial-gradient(420px 320px at 85% 0%, rgba(212,175,55,.22), transparent 65%),radial-gradient(540px 360px at 15% 20%, rgba(246,211,101,.18), transparent 60%),linear-gradient(135deg, rgba(14,11,7,.9), rgba(26,20,12,.6));
  --hero-identity-outline:rgba(214,188,120,.35);
  --card-bg:linear-gradient(180deg, rgba(26,20,12,.7), rgba(18,14,10,.42));
  --marquee-chip-bg:rgba(32,24,12,.45);
  --company-hover-bg:rgba(42,30,14,.78);
  --classified-bg:rgba(26,20,12,.58);
  --classified-border:rgba(244,208,119,.45);
  --classified-label:rgba(255,240,200,.9);
  --hover-border:rgba(244,208,119,.55);
  --stat-bg:rgba(26,20,12,.55);
  --halo-outer:rgba(244,208,119,.2);
  --halo-inner:rgba(246,211,101,.45);
  --dot-glow:rgba(255,221,128,.75);
  --heading-glow:rgba(246,211,101,.35);
  --heading-soft:rgba(246,211,101,.22);
  --subheading-glow:rgba(255,236,179,.4);
  --signal-color:rgba(250,240,210,.82);
  --code-bg:rgba(26,20,12,.65);
}

body[data-theme="monochrome"]{
  --bg-0:#000000;
  --bg-1:#111111;
  --bg-2:#222222;
  --ink:#ffffff;
  --muted:#cccccc;
  --line:rgba(255,255,255,.1);
  --brand-1:#ffffff;
  --brand-2:#cccccc;
  --brand-3:#999999;
  --body-bg:linear-gradient(180deg, var(--bg-0), var(--bg-1) 42%, var(--bg-2) 100%);
  --nav-bg:linear-gradient(180deg, rgba(0,0,0,.85), rgba(0,0,0,.55));
  --hero-identity-bg:linear-gradient(135deg, rgba(17,17,17,.85), rgba(34,34,34,.55));
  --hero-identity-outline:rgba(255,255,255,.15);
  --card-bg:linear-gradient(180deg, rgba(34,34,34,.65), rgba(17,17,17,.35));
  --marquee-chip-bg:rgba(17,17,17,.35);
  --company-hover-bg:rgba(34,34,34,.75);
  --classified-bg:rgba(17,17,17,.55);
  --classified-border:rgba(255,255,255,.35);
  --classified-label:rgba(204,204,204,.85);
  --hover-border:rgba(255,255,255,.35);
  --stat-bg:rgba(17,17,17,.55);
  --halo-outer:rgba(255,255,255,.12);
  --halo-inner:rgba(204,204,204,.35);
  --dot-glow:rgba(204,204,204,.8);
  --heading-glow:rgba(255,255,255,.3);
  --heading-soft:rgba(255,255,255,.2);
  --subheading-glow:rgba(204,204,204,.3);
  --signal-color:rgba(255,255,255,.8);
  --code-bg:rgba(17,17,17,.6);
}

body[data-theme="neon"]{
  --bg-0:#000000;
  --bg-1:#0a0a0a;
  --bg-2:#1a1a1a;
  --ink:#ffffff;
  --muted:#cccccc;
  --line:rgba(255,0,255,.2);
  --brand-1:#ff00ff;
  --brand-2:#00ffff;
  --brand-3:#ff0080;
  --body-bg:radial-gradient(1200px 600px at 10% -20%, rgba(255,0,255,.15), transparent 60%),radial-gradient(900px 380px at 90% 0%, rgba(0,255,255,.15), transparent 60%),linear-gradient(180deg, var(--bg-0), var(--bg-1) 42%, var(--bg-2) 100%);
  --nav-bg:linear-gradient(180deg, rgba(0,0,0,.85), rgba(0,0,0,.55));
  --hero-identity-bg:radial-gradient(420px 320px at 85% 0%, rgba(0,255,255,.25), transparent 65%),radial-gradient(540px 360px at 15% 20%, rgba(255,0,255,.2), transparent 60%),linear-gradient(135deg, rgba(10,10,10,.9), rgba(26,26,26,.6));
  --hero-identity-outline:rgba(255,0,255,.3);
  --card-bg:linear-gradient(180deg, rgba(26,26,26,.7), rgba(10,10,10,.4));
  --marquee-chip-bg:rgba(10,10,10,.4);
  --company-hover-bg:rgba(26,26,26,.8);
  --classified-bg:rgba(10,10,10,.6);
  --classified-border:rgba(255,0,255,.4);
  --classified-label:rgba(255,0,255,.9);
  --hover-border:rgba(0,255,255,.4);
  --stat-bg:rgba(10,10,10,.6);
  --halo-outer:rgba(255,0,255,.15);
  --halo-inner:rgba(0,255,255,.4);
  --dot-glow:rgba(0,255,255,.9);
  --heading-glow:rgba(255,0,255,.4);
  --heading-soft:rgba(255,0,255,.25);
  --subheading-glow:rgba(255,0,255,.35);
  --signal-color:rgba(255,255,255,.9);
  --code-bg:rgba(10,10,10,.7);
}



*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  color:var(--ink);
  background:var(--body-bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

.wrapper{max-width:1200px; margin:0 auto; padding:0 24px}
.container{max-width:1300px; margin:0 auto; padding:0 24px}

/* Header / Nav */
header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(120%) blur(10px);
  background:var(--nav-bg);
  border-bottom:1px solid var(--line);
}
.nav{
  min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.nav-links{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.brand{
  display:grid; grid-auto-flow:column; align-items:center; gap:10px; font-weight:900; letter-spacing:.2px;
}
.brand .mark{width:12px; height:12px; border-radius:4px; background:conic-gradient(from 0turn, var(--brand-1), var(--brand-2), var(--brand-1)); box-shadow:0 0 0 5px var(--halo-outer), 0 0 40px var(--halo-inner)}
.nav a, .theme-toggle{color:var(--ink); text-decoration:none; opacity:.92; font-weight:650; border:1px solid transparent; padding:9px 12px; border-radius:12px; letter-spacing:.2px; transition:opacity .25s ease, border-color .25s ease, background .25s ease, color .25s ease}
.nav a:hover, .theme-toggle:hover{opacity:1; border-color:var(--line)}
.theme-toggle{background:transparent; cursor:pointer; font-family:inherit; line-height:1}
.theme-toggle.is-gold{background:linear-gradient(135deg, var(--brand-1), var(--brand-2)); color:#0f0a02; border-color:transparent; opacity:1}
.theme-toggle:focus-visible{outline:2px solid var(--brand-2); outline-offset:2px}
.nav .cta{border-color:var(--line)}
.nav .cta.primary{background:linear-gradient(135deg, var(--brand-1), var(--brand-2)); color:#0f0a02; border:0}

/* Hero */
.hero{padding:84px 0 48px}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center}
@media (max-width: 980px){ .hero-grid{ grid-template-columns:1fr; } }

.kicker{display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:999px; border:1px solid var(--line); color:var(--muted); font-size:.92rem}
.kicker .dot{width:6px; height:6px; border-radius:999px; background:var(--brand-2); box-shadow:0 0 10px var(--dot-glow)}
h1{
  margin:.2rem 0 1rem;
  font-size:clamp(2rem, 4.8vw, 3.8rem);
  line-height:1.05;
  letter-spacing:-.01em;
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2), var(--brand-3));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow:0 0 20px var(--heading-glow);
}
.lead{font-size:clamp(1.05rem,1.6vw,1.2rem); color:var(--muted); max-width:75ch}
.cta-row{display:flex; gap:12px; flex-wrap:wrap; margin-top:18px}
.button{display:inline-block; padding:12px 16px; border-radius:12px; font-weight:800; letter-spacing:.2px; border:1px solid var(--line); text-decoration:none; color:var(--ink)}
.button.primary{background:linear-gradient(135deg, var(--brand-1), var(--brand-2)); color:#0f0a02; border:0}
.button.ghost{background:transparent}
.small{font-size:.92rem; color:var(--muted)}

/* Hero identity panel */
.hero-identity{
  position:relative;
  border:1px solid var(--line);
  border-radius:24px;
  padding:44px;
  min-height:320px;
  display:grid;
  gap:22px;
  align-content:center;
  background:var(--hero-identity-bg);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.hero-identity::after{
  content:"";
  position:absolute;
  inset:12px;
  border-radius:20px;
  border:1px solid var(--hero-identity-outline);
  opacity:.6;
}
.hero-identity span{position:relative; z-index:1;}
.hero-identity .domain{
  font-size:.82rem;
  letter-spacing:.32em;
  text-transform:none;
  color:var(--muted);
}
.hero-identity .wordmark{
  font-size:clamp(2.6rem, 5vw, 3.9rem);
  font-weight:900;
  letter-spacing:-.02em;
  background:linear-gradient(135deg, var(--brand-1), var(--brand-2), var(--brand-3));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  text-shadow:0 0 25px var(--heading-glow);
}
.hero-identity .signal{
  font-size:.95rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--signal-color);
}
@media (max-width: 980px){
  .hero-identity{min-height:260px; padding:32px;}
  .hero-identity .signal{letter-spacing:.18em;}
}

/* Sections */
section.card{background:var(--card-bg); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:28px; margin:40px auto}
h2{
  margin:0 0 10px;
  font-size:clamp(1.35rem, 2.2vw, 1.7rem);
  text-shadow:0 0 10px var(--heading-soft);
  letter-spacing: -.005em;
}
h3{
  margin:16px 0 6px;
  font-size:1.05rem;
  color:var(--brand-3);
  text-shadow:0 0 8px var(--subheading-glow);
  letter-spacing: .005em;
}

.stats .stat-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:22px}
.stat{display:grid; gap:8px; padding:18px 20px; border:1px solid var(--line); border-radius:14px; background:var(--stat-bg); box-shadow:inset 0 1px 0 rgba(255,255,255,.02)}
.stat-value{font-size:1.45rem; font-weight:800; letter-spacing:.01em}
.stat-label{color:var(--muted); font-size:.94rem; line-height:1.55}
.classified-callout{margin-top:32px; padding:24px 26px; border-radius:18px; border:1px dashed var(--classified-border); background:var(--classified-bg); box-shadow:0 18px 50px rgba(0,0,0,.35); display:grid; gap:12px}
.classified-label{font-size:.9rem; letter-spacing:.35em; text-transform:uppercase; color:var(--classified-label)}
.classified-callout p{margin:0; color:var(--muted); font-size:.98rem; line-height:1.7}
.grid-3{display:grid; grid-template-columns:repeat(3, 1fr); gap:20px}
@media (max-width: 980px){ .grid-3 { grid-template-columns: 1fr; } }
.pill{display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px; border:1px solid var(--line); color:var(--muted); font-size:.92rem}
ul.clean{margin:10px 0 0; padding:0 0 0 18px}
li + li{margin-top:6px}

/* Logo marquee */
.marquee{overflow:hidden; border:1px dashed var(--line); border-radius:12px; padding:8px; opacity:.9}
.track{display:flex; gap:36px; align-items:center; animation:scroll 34s linear infinite}
.logo-pill{display:inline-flex; align-items:center; gap:10px; padding:10px 14px; border-radius:12px; border:1px solid var(--line); background:var(--marquee-chip-bg); white-space:nowrap; font-weight:700; letter-spacing:.3px}
.logo-pill .dot{width:10px; height:10px; border-radius:3px; background:var(--brand-2)}
.logo-qbic .dot{background:#0ea5e9}
.logo-www .dot{background:#3b82f6}
.logo-bulwark .dot{background:#a3b72f}
.logo-hoorizon .dot{background:#6366f1}
.logo-holdings .dot{background:#facc15}
.logo-energy .dot{background:#22c55e}
.logo-defence .dot{background:#f97316}
@keyframes scroll{ to{ transform: translateX(-50%);} }

/* Company cards */
.card.company{display:grid; gap:12px; padding:24px; transition: transform .25s ease, border-color .25s ease, background .25s ease}
.card.company:hover{transform:translateY(-2px); background:var(--company-hover-bg); border-color:var(--hover-border)}
.company .top{display:flex; align-items:center; justify-content:space-between; gap:12px}
.company .name{font-weight:800; letter-spacing:.3px}
.company .ext{font-size:.9rem; color:var(--muted); text-decoration:none}
.company .ext:hover{text-decoration:underline}
.company .desc{color:var(--muted)}
.tagrow{display:flex; flex-wrap:wrap; gap:8px}
.tag{font-size:.8rem; padding:.2rem .55rem; border-radius:8px; border:1px solid var(--line); color:var(--muted)}

/* Table / code styling */
.table{width:100%; border-collapse:collapse}
.table th, .table td{padding:14px 10px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top}
.table th{color:var(--brand-3); font-weight:700; min-width:140px}
.table a{color:var(--ink); text-decoration:none; border-bottom:1px dotted rgba(148,163,184,.5)}
.table a:hover{color:var(--brand-3); border-bottom-color:var(--brand-3)}
code{font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; background:var(--code-bg); border:1px solid var(--line); padding:.15rem .35rem; border-radius:6px}

/* Footer */
footer{color:var(--muted); font-size:.94rem; padding:60px 0 90px; text-align:center}

/* Reveal animation */
.reveal{opacity:0; transform:translateY(8px)}
.reveal.reveal-in{opacity:1; transform:none; transition:opacity .6s ease .05s, transform .6s ease .05s}