/* linnik.pro — light "white with blue tones" theme, used only by the root landing page.
   Overrides the shared dark-navy custom properties from style.css; every component
   class (cards, buttons, header, footer...) already reads these variables, so no
   component rules need duplicating — only the values change, plus a few page-only
   additions for the landing hero and the three category panels. */

:root{
  --bg: #FFFFFF;
  --surface: #F3F8FE;
  --surface-2: #E7F1FC;
  --accent: #2E5FD9;
  --accent-light: #5A93E8;
  --accent-gold: #C9A15A;
  --accent-gold-soft: rgba(201,161,90,0.10);
  --text: #10233F;
  --text-muted: #4A5F82;
  --rule: rgba(16,35,63,0.12);
  --rule-gold: rgba(201,161,90,0.35);
}

body{
  background:
    radial-gradient(1100px 560px at 50% -12%, rgba(46,95,217,0.10), transparent 60%),
    radial-gradient(900px 500px at 100% 40%, rgba(201,161,90,0.05), transparent 55%),
    var(--bg);
}
/* the grain texture reads as dust on white — switch it off for the light theme */
body::before{ opacity: 0; }
::selection{ color: var(--text); }
::-webkit-scrollbar-thumb{ background: var(--accent-light); }
::-webkit-scrollbar-thumb:hover{ background: var(--accent); }

header.site{
  background: rgba(255,255,255,0.86);
  box-shadow: 0 1px 0 rgba(16,35,63,0.04);
}

/* ---------- Landing hero ---------- */
.landing-hero{ padding: 96px 0 64px; text-align: center; }
.landing-hero .wrap{ max-width: 720px; }
.landing-hero .eyebrow{ justify-content: center; }
.landing-hero h1{
  font-size: clamp(34px, 5vw, 54px);
  line-height: 1.12;
  margin: 16px 0 20px;
}
.landing-lede{ color: var(--text-muted); font-size: 18px; max-width: 620px; margin: 0 auto; }

/* ---------- Category panels ---------- */
.panels{ padding: 16px 0 96px; }
.panels-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 900px){
  .panels-grid{ grid-template-columns: repeat(3, 1fr); }
}
.panel-card{
  display: flex;
  flex-direction: column;
  background: linear-gradient(165deg, var(--surface) 0%, var(--surface-2) 130%);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  text-decoration: none;
  color: var(--text);
  box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset, 0 24px 48px -34px rgba(16,35,63,0.22);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.panel-card:hover{
  border-color: var(--accent-light);
  transform: translateY(-4px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset, 0 30px 56px -28px rgba(16,35,63,0.28);
}
.panel-card h3{ font-size: 23px; margin: 12px 0 12px; }
.panel-card p{ color: var(--text-muted); font-size: 15px; flex-grow: 1; margin-bottom: 22px; }
.panel-link{
  font-family: 'IBM Plex Mono', monospace;
  font-size: 14px;
  color: var(--accent);
}