/* ═══════════════════════════════════════════════════════════
   BOSCHKOO.DEV v3 — opus.ai inspired
   Schwarz · Cyan · Pink · Yellow Akzent · Bold Typo · Card-Stack
═══════════════════════════════════════════════════════════ */
:root{
  --bg:#000308;
  --bg-2:#050a14;
  --fg:#d8e4f0;
  --fg-dim:#6b7d8f;
  --fg-dimer:#3a4a5c;
  --cyan:#00f5ff;
  --cyan-dim:rgba(0,245,255,0.55);
  --pink:#ff006e;
  --yellow:#ffc800;
  --cream:#f4eeec;
  --line:rgba(0,245,255,0.08);
  --line-2:rgba(0,245,255,0.2);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:'Inter','Helvetica Neue',sans-serif;
  font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

.bg-grid{
  position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    linear-gradient(rgba(0,245,255,0.035) 1px, transparent 1px) 0 0/70px 70px,
    linear-gradient(90deg, rgba(0,245,255,0.035) 1px, transparent 1px) 0 0/70px 70px;
}
.bg-scanlines{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:repeating-linear-gradient(
    0deg, transparent, transparent 2px,
    rgba(0,0,0,0.18) 2px, rgba(0,0,0,0.18) 4px
  );
  opacity:0.5;
}

/* ─── TOP NAV ──────────────────────────── */
.topnav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:2rem;
  padding:0.9rem 2rem;
  background:linear-gradient(180deg, rgba(0,3,8,0.9), rgba(0,3,8,0.6));
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.brand{
  font-family:'Orbitron',monospace;font-weight:900;font-size:1.1rem;
  letter-spacing:0.18em;color:var(--fg);text-decoration:none;
}
.brand:hover{color:var(--cyan)}
.navlinks{display:flex;gap:1.8rem;justify-content:center}
.navlinks a{
  font-family:'Share Tech Mono',monospace;font-size:0.78rem;
  letter-spacing:0.22em;color:var(--fg-dim);text-decoration:none;
  transition:color 0.18s;
}
.navlinks a:hover{color:var(--cyan)}
.nav-cta{
  font-family:'Share Tech Mono',monospace;font-size:0.78rem;
  letter-spacing:0.22em;color:var(--bg);text-decoration:none;
  background:var(--yellow);padding:0.5rem 1rem;
  transition:transform 0.15s;
}
.nav-cta:hover{transform:translateY(-2px)}

@media (max-width:780px){
  .topnav{grid-template-columns:auto auto;gap:0.8rem;padding:0.7rem 1rem}
  .navlinks{display:none}
  .brand{font-size:0.95rem}
  .nav-cta{font-size:0.7rem;padding:0.4rem 0.7rem}
}

/* ─── HERO ──────────────────────────── */
.hero{
  position:relative;min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;padding:5rem 1.5rem 2rem;
}
.hero-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
  opacity:0.55;
}
.hero::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(0,3,8,0.4) 0%, rgba(0,3,8,0.85) 100%);
}
.hero-overlay{
  position:relative;z-index:2;text-align:center;max-width:900px;
}
.hero-kicker{
  font-family:'Share Tech Mono',monospace;color:var(--yellow);
  font-size:0.85rem;letter-spacing:0.32em;margin:0 0 2rem;
}
.hero-line{
  font-family:'Orbitron',monospace;font-weight:900;
  font-size:clamp(2.4rem,8vw,5.6rem);line-height:0.95;letter-spacing:0.02em;
  margin:0 0 2.5rem;
  display:flex;flex-wrap:wrap;justify-content:center;gap:0.35em;
}
.hl-fill{color:var(--fg)}
.hl-stroke{
  color:transparent;
  -webkit-text-stroke:2px var(--cyan);
}
.hl-yellow{
  color:var(--yellow);
  display:inline-block;min-width:8ch;text-align:left;
  position:relative;
}
.hl-yellow::after{
  content:'';position:absolute;left:-0.2em;right:-0.2em;bottom:-6px;height:3px;
  background:var(--yellow);opacity:0.4;
}
.hero-cta{
  display:inline-block;
  font-family:'Share Tech Mono',monospace;font-size:0.95rem;letter-spacing:0.22em;
  padding:1rem 2.4rem;
  background:var(--yellow);color:var(--bg);
  text-decoration:none;font-weight:600;
  transition:transform 0.15s, box-shadow 0.15s;
  border:2px solid var(--yellow);
}
.hero-cta:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 0 rgba(255,200,0,0.25);
}

.scroll-hint{
  position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);
  font-family:'Share Tech Mono',monospace;color:var(--fg-dim);
  font-size:0.75rem;letter-spacing:0.3em;
  animation:bounce 2s infinite;
  z-index:2;
}
@keyframes bounce{
  0%,100%{transform:translateX(-50%) translateY(0)}
  50%{transform:translateX(-50%) translateY(8px)}
}

@media (max-width:600px){
  .hero-line{font-size:2.2rem}
  .hl-yellow{min-width:auto}
  .hero-cta{font-size:0.82rem;padding:0.9rem 1.6rem}
}

/* ─── SECTIONS ──────────────────────────── */
.section{
  max-width:1280px;margin:0 auto;
  padding:6rem 1.5rem;
}
.section-narrow{max-width:760px}
.sec-head{margin-bottom:3rem}
.sec-label{
  font-family:'Share Tech Mono',monospace;color:var(--yellow);
  font-size:0.78rem;letter-spacing:0.3em;margin:0 0 0.6rem;
}
.sec-head h2{
  font-family:'Orbitron',monospace;font-weight:900;
  font-size:clamp(2rem,5vw,3.2rem);line-height:1;letter-spacing:0.02em;
  margin:0 0 0.5rem;
}
.sec-sub{color:var(--fg-dim);font-size:0.95rem;margin:0}

/* ─── OPUS CARD STACK ──────────────────── */
.ostack{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1.2rem;
}
.ocard{
  --c-bg:#1a1a2a;
  --c-fg:#fff;
  --c-letter:rgba(255,255,255,0.15);
  background:var(--c-bg);color:var(--c-fg);
  position:relative;overflow:hidden;
  min-height:380px;
  transition:transform 0.25s ease;
  isolation:isolate;
}
.ocard:hover{transform:translateY(-4px)}
.ocard summary{
  display:block;cursor:pointer;list-style:none;
  height:100%;min-height:380px;
  padding:1.4rem 1.4rem 1.4rem 3rem;
  position:relative;overflow:hidden;
}
.ocard summary::-webkit-details-marker{display:none}
.ocard[open] summary{min-height:0}

/* Giant background letter — clipped to card via parent overflow */
.ocard-letter{
  position:absolute;right:-0.05em;bottom:-0.18em;
  font-family:'Orbitron',monospace;font-weight:900;
  font-size:16rem;line-height:0.78;
  color:var(--c-letter);
  pointer-events:none;user-select:none;
  z-index:0;
}
/* Vertical side label */
.ocard-side{
  position:absolute;top:1.4rem;left:1.1rem;
  font-family:'Share Tech Mono',monospace;font-size:0.65rem;
  letter-spacing:0.2em;writing-mode:vertical-rl;transform:rotate(180deg);
  color:var(--c-fg);opacity:0.7;
  z-index:2;
  max-height:calc(100% - 2.8rem);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* Card content */
.ocard-meta{
  position:relative;z-index:3;margin-top:45%;
  display:flex;flex-direction:column;gap:0.55rem;
}
.ocard-pill{
  display:inline-block;align-self:flex-start;
  font-family:'Share Tech Mono',monospace;font-size:0.62rem;
  letter-spacing:0.18em;padding:0.18rem 0.6rem;
  border:1px solid currentColor;color:var(--c-fg);
  opacity:0.9;
}
.pill-new{background:#ff006e;border-color:#ff006e;color:#fff}
.ocard h3{
  font-family:'Orbitron',monospace;font-weight:900;
  font-size:1.15rem;letter-spacing:0.05em;margin:0;
  line-height:1.1;
}
.ocard summary p{margin:0;font-size:0.9rem;opacity:0.85}
.ocard-url{
  font-family:'Share Tech Mono',monospace;font-size:0.72rem;
  letter-spacing:0.08em;opacity:0.55;
}
.ocard-body{
  padding:1.2rem 1.4rem 1.5rem;
  background:rgba(0,0,0,0.18);
  font-size:0.86rem;
  border-top:1px dashed rgba(255,255,255,0.18);
}
.ocard-body p{margin:0.4rem 0}
.ocard-body strong{font-weight:600;opacity:0.95}
.ocard-body code{
  background:rgba(0,0,0,0.25);padding:0.1rem 0.4rem;
  font-family:'Share Tech Mono',monospace;font-size:0.82em;
}
.ocard-body a{color:inherit;border-bottom:1px solid currentColor}

/* Mobile */
@media (max-width:600px){
  .ocard{min-height:280px}
  .ocard summary{min-height:280px;padding:1.2rem 1.2rem 1.2rem 2.6rem}
  .ocard-letter{font-size:12rem}
  .ocard-meta{margin-top:38%}
  .ocard h3{font-size:1.05rem}
  .ocard-side{font-size:0.6rem;left:0.9rem}
}

.see-more{
  margin-top:3rem;text-align:center;
  font-family:'Share Tech Mono',monospace;font-size:0.82rem;
  color:var(--fg-dim);letter-spacing:0.12em;
}
.see-more a{color:var(--cyan);text-decoration:none}
.see-more a:hover{text-decoration:underline}

/* ─── ABOUT ──────────────────────────── */
.about-block{margin-bottom:2rem}
.about-block p{margin:0 0 1rem;font-size:1rem;line-height:1.75}
.about-block strong{color:var(--cyan);font-weight:500}
.about-meta{
  border-top:1px solid var(--line-2);
  padding-top:1.5rem;
}
.amr{
  display:flex;justify-content:space-between;align-items:center;
  padding:0.6rem 0;border-bottom:1px dashed var(--line);
  font-family:'Share Tech Mono',monospace;font-size:0.82rem;
}
.amr span:first-child{color:var(--fg-dim);letter-spacing:0.18em;font-size:0.7rem}
.amr span:last-child{color:var(--cyan-dim)}

/* ─── FEED ──────────────────────────── */
.feed-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:0.9rem;
}
.feed-item{
  border:1px solid var(--line-2);background:rgba(8,14,22,0.4);
  padding:0.5rem;text-decoration:none;color:inherit;
  transition:border-color 0.2s;
}
.feed-item:hover{border-color:var(--cyan-dim)}
.feed-thumb{
  width:100%;aspect-ratio:1;object-fit:cover;display:block;
  background:var(--bg-2);
}
.feed-title{
  margin-top:0.5rem;font-size:0.74rem;color:var(--fg-dim);
  font-family:'Share Tech Mono',monospace;letter-spacing:0.06em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* ─── FOOTER ──────────────────────────── */
.foot{
  border-top:1px solid var(--line);
  margin-top:4rem;padding:1.8rem 1.5rem;
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;
  font-family:'Share Tech Mono',monospace;font-size:0.72rem;
  color:var(--fg-dim);letter-spacing:0.12em;
}
.foot a{color:var(--cyan);text-decoration:none}
.foot a:hover{text-decoration:underline}