/* =========================================================
   CyberWatch — "Bright Glass" design system
   Light vivid gradient-mesh canvas, frosted light-glass cards,
   3D tilt + depth on hover, glowing color, smooth motion.
   OKLCH throughout.
========================================================= */
:root{
  /* Canvas (bright, airy, calm blue) */
  --bg:        oklch(0.975 0.008 240);
  --bg-2:      oklch(0.96 0.012 240);
  --surface:   oklch(1 0 0 / 0.72);      /* glass panel base */
  --surface-2: oklch(0.99 0.006 240 / 0.65);
  --line:      oklch(0.4 0.04 240 / 0.12);
  --line-soft: oklch(0.4 0.04 240 / 0.08);

  /* Text */
  --ink:       oklch(0.26 0.03 240);
  --ink-soft:  oklch(0.36 0.025 240);
  --muted:     oklch(0.50 0.02 240);

  /* Brand & accents — single blue, varying only in lightness */
  --accent:      oklch(0.62 0.15 240);          /* blue */
  --accent-2:    oklch(0.62 0.15 240);          /* blue (same hue) */
  --accent-3:    oklch(0.62 0.15 240);          /* blue (same hue) */
  --on-accent:   oklch(0.99 0.005 240);
  --accent-deep: oklch(0.50 0.16 240);          /* readable blue link on white */
  --teal:        oklch(0.58 0.10 210);

  --grad-brand: var(--accent);
  --grad-text:  var(--ink);

  /* Severity / level tags — bright glass chips */
  --crit-bg: oklch(0.93 0.07 20);   --crit-tx: oklch(0.48 0.18 22);
  --high-bg: oklch(0.94 0.06 55);   --high-tx: oklch(0.50 0.14 55);
  --med-bg:  oklch(0.95 0.06 95);   --med-tx:  oklch(0.50 0.10 90);
  --acc-bg:  oklch(0.93 0.05 240);  --acc-tx:  oklch(0.48 0.15 240);
  --beg-bg:  oklch(0.93 0.05 230);  --beg-tx:  oklch(0.48 0.13 230);
  --int-bg:  oklch(0.93 0.06 200);  --int-tx:  oklch(0.46 0.11 200);
  --adv-bg:  oklch(0.93 0.06 260);  --adv-tx:  oklch(0.48 0.13 260);

  /* Soft blue glow shadows */
  --shadow-sm: 0 2px 8px -2px rgba(40,80,150,0.10);
  --shadow:    0 20px 46px -20px rgba(40,80,150,0.26), 0 4px 14px -8px rgba(40,80,150,0.12), 0 0 0 1px var(--line-soft) inset;
  --shadow-lg: 0 34px 70px -26px rgba(40,80,150,0.34), 0 10px 26px -12px rgba(40,80,150,0.16), 0 0 0 1px var(--line-soft) inset;

  --maxw: 1140px;
  --r: 22px;
  --r-sm: 14px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --z-nav: 50; --z-overlay: 100;

  --font-ui: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  --font-read: "Newsreader", Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--ink-soft);
  font-family:var(--font-ui); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  background:
    radial-gradient(1000px 680px at 10% -10%, color-mix(in oklab, var(--accent-2) 38%, transparent), transparent 60%),
    radial-gradient(860px 620px at 105% 8%, color-mix(in oklab, var(--accent-3) 32%, transparent), transparent 60%),
    radial-gradient(940px 720px at 45% 115%, color-mix(in oklab, var(--accent) 28%, transparent), transparent 60%),
    var(--bg);
  background-attachment:fixed;
  overflow-x:hidden;
}
h1,h2,h3,h4,.display{font-family:var(--font-ui); color:var(--ink); line-height:1.12; letter-spacing:-0.02em; text-wrap:balance; margin:0; font-weight:700;}
p{margin:0 0 1em; text-wrap:pretty;}
a{color:var(--accent-deep); text-underline-offset:3px;}
.mono{font-family:var(--font-mono); letter-spacing:0;}
.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:24px;}
.prose{max-width:68ch;}
img{max-width:100%; display:block;}

/* ---------- Floating decorative blobs ---------- */
.blob{position:absolute; border-radius:50%; filter:blur(50px); pointer-events:none; z-index:0; opacity:.55; animation:float 14s ease-in-out infinite;}
@keyframes float{0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-16px,22px) scale(1.06);}}

/* ---------- Floating island nav ---------- */
header.site{position:sticky; top:0; z-index:var(--z-nav); padding-top:14px; background:transparent;}
.nav{
  display:flex; align-items:center; gap:28px; height:64px; padding:0 12px 0 18px;
  max-width:var(--maxw); margin-inline:auto;
  background:linear-gradient(180deg, var(--surface), var(--surface-2));
  backdrop-filter:saturate(180%) blur(18px); -webkit-backdrop-filter:saturate(180%) blur(18px);
  border:1px solid var(--line); border-radius:999px; box-shadow:var(--shadow-sm), 0 0 30px -14px color-mix(in oklab, var(--accent) 35%, transparent);
  transition:box-shadow .3s var(--ease);
}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--font-ui); font-weight:800; font-size:19px; color:var(--ink); text-decoration:none; letter-spacing:-0.02em;}
.brand .mark{width:26px; height:26px; flex:none; filter:drop-shadow(0 2px 6px color-mix(in oklab, var(--accent) 50%, transparent)); transition:transform .4s var(--bounce);}
.brand:hover .mark{transform:rotate(-8deg) scale(1.08);}
.brand b{color:var(--accent-deep);}
.nav nav{display:flex; gap:22px; margin-left:auto;}
.nav nav a{position:relative; color:var(--muted); text-decoration:none; font-family:var(--font-ui); font-size:14.5px; font-weight:500; transition:color .2s var(--ease);}
.nav nav a::after{content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; border-radius:2px; background:var(--grad-brand); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease);}
.nav nav a:hover{color:var(--ink);}
.nav nav a:hover::after{transform:scaleX(1);}
.nav nav a.active{color:var(--ink); font-weight:600;}
.nav nav a.active::after{transform:scaleX(1);}
.btn{
  font-family:var(--font-ui); font-weight:700; font-size:14.5px;
  background:var(--grad-brand); background-size:160% 160%; color:var(--on-accent); border:none; border-radius:999px;
  padding:11px 20px; text-decoration:none; cursor:pointer; white-space:nowrap; display:inline-flex; align-items:center; gap:8px;
  box-shadow:0 10px 26px -10px color-mix(in oklab, var(--accent) 65%, transparent);
  transition:transform .3s var(--bounce), box-shadow .3s var(--ease), background-position .5s var(--ease);
}
.btn:hover{transform:translateY(-3px) scale(1.03); box-shadow:0 16px 36px -10px color-mix(in oklab, var(--accent-3) 65%, transparent); background-position:100% 50%;}
.btn:active{transform:scale(0.97);}
.btn.ghost{background:var(--surface); color:var(--ink); border:1px solid var(--line); backdrop-filter:blur(14px); box-shadow:var(--shadow-sm);}
.btn.ghost:hover{border-color:color-mix(in oklab, var(--accent) 40%, var(--line));}
.nav-toggle{display:none; margin-left:auto; background:var(--surface); border:1px solid var(--line); color:var(--ink); border-radius:50%; width:42px; height:42px; font-size:17px; cursor:pointer; backdrop-filter:blur(14px);}

/* ---------- Hero / page header ---------- */
.hero{padding:96px 0 44px; position:relative; overflow:visible;}
.hero .glow{position:absolute; inset:-30% -10% auto auto; width:680px; height:680px; pointer-events:none; z-index:0;
  background:radial-gradient(closest-side, color-mix(in oklab, var(--accent-2) 55%, transparent), transparent 70%); filter:blur(44px); opacity:.6;}
.hero .wrap{position:relative; z-index:1;}
.hero-layout{display:grid; grid-template-columns:1.1fr 0.9fr; gap:48px; align-items:center;}
.hero-media{position:relative; perspective:1200px;}
.hero-media img{width:100%; aspect-ratio:4/3.1; object-fit:cover; border-radius:28px; box-shadow:var(--shadow-lg);
  border:6px solid var(--surface); transform:rotateY(-8deg) rotateX(4deg) translateZ(0); transition:transform .6s var(--ease), box-shadow .6s var(--ease);}
.hero-media:hover img{transform:rotateY(0deg) rotateX(0deg) scale(1.02);}
.hero-media .float-card{position:absolute; bottom:-22px; left:-26px; display:flex; align-items:center; gap:12px; padding:14px 18px;
  background:linear-gradient(180deg, var(--surface), var(--surface-2)); backdrop-filter:blur(16px); border:1px solid var(--line);
  border-radius:18px; box-shadow:var(--shadow); animation:floaty 5s ease-in-out infinite;}
.hero-media .float-card .ic{width:38px; height:38px; border-radius:12px; background:var(--grad-brand); display:flex; align-items:center; justify-content:center; color:var(--on-accent); font-size:18px; flex:none;}
.hero-media .float-card strong{display:block; font-size:14px; color:var(--ink);}
.hero-media .float-card span{display:block; font-size:12.5px; color:var(--muted);}
@keyframes floaty{0%,100%{transform:translateY(0);} 50%{transform:translateY(-10px);}}
.kicker{display:inline-block; font-family:var(--font-ui); font-size:12px; font-weight:600; letter-spacing:0.16em; color:var(--accent-deep); text-transform:uppercase;
  background:var(--acc-bg); border:1px solid color-mix(in oklab,var(--accent) 35%, transparent); padding:6px 14px; border-radius:999px;
  backdrop-filter:blur(10px); box-shadow:0 0 24px -12px color-mix(in oklab, var(--accent) 50%, transparent);}
.hero h1{font-size:clamp(2.6rem, 5.4vw, 4.4rem); margin:22px 0 0; max-width:18ch; font-weight:800; letter-spacing:-0.035em; color:var(--ink);}
.hero .lede{font-size:clamp(1.1rem,2vw,1.3rem); color:var(--ink-soft); max-width:54ch; margin-top:22px;}
.hero .cta{display:flex; gap:14px; flex-wrap:wrap; margin-top:32px;}

.page-head{padding:84px 0 48px; position:relative; overflow:visible;}
.page-head .glow{position:absolute; inset:-40% -10% auto auto; width:560px; height:560px; pointer-events:none; z-index:0;
  background:radial-gradient(closest-side, color-mix(in oklab, var(--accent) 50%, transparent), transparent 70%); filter:blur(40px); opacity:.55;}
.page-head .wrap{position:relative; z-index:1;}
.page-head h1{font-size:clamp(2.2rem,5vw,3.6rem); margin:16px 0 0; letter-spacing:-0.03em; color:var(--ink);}
.page-head p{color:var(--ink-soft); max-width:64ch; margin-top:18px; font-size:1.15rem;}

/* threat-level strip */
.threat{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:44px; padding:18px 22px;
  border-radius:var(--r); box-shadow:var(--shadow); max-width:680px;
  background:linear-gradient(180deg, var(--surface), var(--surface-2)); backdrop-filter:blur(20px); border:1px solid var(--line);}
.threat .dot{width:12px; height:12px; border-radius:50%; background:var(--high-tx); box-shadow:0 0 0 5px color-mix(in oklab,var(--high-tx) 22%, transparent), 0 0 14px color-mix(in oklab, var(--high-tx) 55%, transparent); flex:none; animation:pulse 2.2s ease-in-out infinite;}
@keyframes pulse{0%,100%{box-shadow:0 0 0 5px color-mix(in oklab,var(--high-tx) 22%, transparent), 0 0 14px color-mix(in oklab, var(--high-tx) 55%, transparent);} 50%{box-shadow:0 0 0 9px color-mix(in oklab,var(--high-tx) 12%, transparent), 0 0 20px color-mix(in oklab, var(--high-tx) 70%, transparent);}}
.threat .label{font-family:var(--font-mono); font-size:12.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em;}
.threat .val{font-family:var(--font-ui); font-weight:700; color:var(--ink);}
.threat .note{color:var(--muted); font-size:15px;}

/* ---------- Sections ---------- */
section{padding:84px 0; position:relative;}
.sec-head{display:flex; align-items:baseline; justify-content:space-between; gap:20px; margin-bottom:34px; flex-wrap:wrap;}
.sec-head h2{font-size:clamp(1.7rem,3.2vw,2.4rem); letter-spacing:-0.03em;}
.sec-head p{margin:0; color:var(--muted); max-width:46ch;}
.sec-head a.more{font-family:var(--font-ui); font-weight:600; font-size:15px; text-decoration:none; white-space:nowrap; color:var(--accent-deep); transition:transform .25s var(--ease); display:inline-block;}
.sec-head a.more:hover{transform:translateX(4px);}

/* ---------- Lead / featured ---------- */
.lead{display:grid; grid-template-columns:1.15fr 1fr; gap:36px; align-items:center; padding:14px; border-radius:calc(var(--r) + 6px);
  background:linear-gradient(180deg, var(--surface), var(--surface-2)); backdrop-filter:blur(20px); border:1px solid var(--line);
  box-shadow:var(--shadow); margin-bottom:30px; cursor:pointer; transition:transform .4s var(--ease), box-shadow .4s var(--ease);}
.lead:hover{transform:translateY(-6px) scale(1.005); box-shadow:var(--shadow-lg);}
.lead > div:first-child{padding:26px 14px 26px 26px;}
.lead .meta{display:flex; gap:12px; align-items:center; margin-bottom:16px; flex-wrap:wrap;}
.lead h3{font-size:clamp(1.4rem,3vw,2.05rem); margin-bottom:14px; letter-spacing:-0.02em;}
.lead p{color:var(--ink-soft); margin-bottom:18px;}
.lead .art{aspect-ratio:4/3; border-radius:var(--r); position:relative; overflow:hidden; background:var(--bg-2);}
.lead .art img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease);}
.lead:hover .art img{transform:scale(1.06);}

/* ---------- Feed (news list) ---------- */
.feed{display:flex; flex-direction:column; gap:12px;}
.item{display:grid; grid-template-columns:130px 1fr auto; gap:24px; align-items:center; padding:22px 24px; border-radius:var(--r);
  background:linear-gradient(180deg, var(--surface), var(--surface-2)); backdrop-filter:blur(16px); border:1px solid var(--line);
  box-shadow:var(--shadow-sm); cursor:pointer; transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);}
.item:hover{transform:translateY(-3px) translateX(2px); box-shadow:var(--shadow); border-color:color-mix(in oklab, var(--accent) 35%, var(--line));}
.item .when{font-family:var(--font-mono); font-size:12.5px; color:var(--muted);}
.item h3{font-size:1.18rem; margin-bottom:6px; letter-spacing:-0.01em;}
.item p{margin:0; color:var(--muted); font-size:15.5px;}
.item .go{display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; background:var(--acc-bg); color:var(--accent-deep); font-size:18px; transition:transform .3s var(--bounce), background .3s var(--ease), color .3s var(--ease);}
.item:hover .go{transform:translateX(4px) rotate(8deg); background:var(--grad-brand); color:var(--on-accent);}

/* ---------- Tags ---------- */
.tag{font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  padding:5px 11px; border-radius:999px; display:inline-block; white-space:nowrap; backdrop-filter:blur(8px);}
.tag.crit{background:var(--crit-bg); color:var(--crit-tx);}
.tag.high{background:var(--high-bg); color:var(--high-tx);}
.tag.med{background:var(--med-bg); color:var(--med-tx);}
.tag.learn{background:var(--acc-bg); color:var(--acc-tx);}
.tag.beginner{background:var(--beg-bg); color:var(--beg-tx);}
.tag.intermediate{background:var(--int-bg); color:var(--int-tx);}
.tag.advanced{background:var(--adv-bg); color:var(--adv-tx);}

/* ---------- Filters ---------- */
.filters{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:28px;}
.chip{font-family:var(--font-ui); font-size:14px; font-weight:500; color:var(--muted); background:var(--surface);
  border:1px solid var(--line); border-radius:999px; padding:9px 17px; cursor:pointer; transition:all .25s var(--bounce); box-shadow:var(--shadow-sm); backdrop-filter:blur(10px);}
.chip:hover{color:var(--ink); border-color:color-mix(in oklab,var(--accent) 50%, var(--line)); transform:translateY(-2px) scale(1.03);}
.chip.active{background:var(--grad-brand); color:var(--on-accent); border-color:transparent; box-shadow:0 10px 24px -10px color-mix(in oklab, var(--accent-2) 65%, transparent); transform:scale(1.04);}

/* ---------- Card grid (lessons, tools) ---------- */
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:22px; perspective:1400px;}
.card{border-radius:var(--r); padding:28px; cursor:pointer; display:flex; flex-direction:column; gap:11px; position:relative; overflow:hidden;
  background:linear-gradient(180deg, var(--surface), var(--surface-2)); backdrop-filter:blur(18px); border:1px solid var(--line);
  box-shadow:var(--shadow-sm); transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
  transform-style:preserve-3d;}
.card::before{content:""; position:absolute; inset:0; opacity:0; background:var(--grad-brand); mix-blend-mode:overlay; transition:opacity .4s var(--ease); pointer-events:none;}
.card:hover{transform:translateY(-8px) rotateX(3deg) rotateY(-3deg) scale(1.015); box-shadow:var(--shadow-lg); border-color:color-mix(in oklab, var(--accent) 45%, var(--line));}
.card:hover::before{opacity:.06;}
.card .eyebrow{font-family:var(--font-mono); font-size:12px; color:var(--accent-deep);}
.card h3{font-size:1.22rem; letter-spacing:-0.01em;}
.card p{margin:0; color:var(--muted); font-size:15.5px;}
.card .read{margin-top:auto; font-family:var(--font-ui); font-size:14px; color:var(--accent-deep); font-weight:600; transition:transform .25s var(--ease); display:inline-block;}
.card:hover .read{transform:translateX(4px);}
.card .cardmeta{display:flex; gap:8px; flex-wrap:wrap; align-items:center;}

/* tool card (non-clickable) */
.toolcard{cursor:default;}
.toolcard:hover{transform:translateY(-6px) scale(1.01);}
.toolcard .tlabel{display:inline-block; font-family:var(--font-mono); font-size:11px; color:var(--teal);
  background:var(--beg-bg); border-radius:999px; padding:4px 10px;}
.toolcard .price{font-family:var(--font-ui); font-weight:600; color:var(--accent-deep); font-size:13.5px;}
.toolcard a.tlink{margin-top:auto; font-family:var(--font-ui); font-weight:600; font-size:14px; text-decoration:none;}

/* starter callout */
.starter{display:grid; grid-template-columns:auto 1fr auto; gap:26px; align-items:center; margin-top:40px; padding:30px 34px;
  border-radius:calc(var(--r) + 4px); background:linear-gradient(120deg, color-mix(in oklab, var(--accent-2) 16%, var(--surface)), color-mix(in oklab, var(--accent-3) 14%, var(--surface-2)));
  backdrop-filter:blur(20px); border:1px solid color-mix(in oklab,var(--accent) 30%, var(--line)); box-shadow:var(--shadow-sm); transition:transform .35s var(--ease), box-shadow .35s var(--ease);}
.starter:hover{transform:translateY(-3px); box-shadow:var(--shadow);}
.starter h3{font-size:1.3rem; margin-bottom:5px;}
.starter p{margin:0; color:var(--ink-soft);}
.starter .big{font-family:var(--font-ui); font-size:2.2rem; font-weight:800; color:var(--accent-deep); line-height:1;}

/* ---------- Glossary ---------- */
.glossary-search{width:100%; max-width:440px; font-family:var(--font-ui); font-size:16px; background:var(--surface);
  border:1px solid var(--line); color:var(--ink); border-radius:999px; padding:13px 22px; margin-bottom:30px; box-shadow:var(--shadow-sm); backdrop-filter:blur(14px); transition:box-shadow .3s var(--ease), border-color .3s var(--ease);}
.glossary-search::placeholder{color:var(--muted);}
.glossary-search:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 4px var(--acc-bg);}
.terms{display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:18px;}
.term{border-radius:var(--r); padding:24px; background:linear-gradient(180deg, var(--surface), var(--surface-2)); backdrop-filter:blur(16px); border:1px solid var(--line);
  box-shadow:var(--shadow-sm); transition:transform .3s var(--ease), box-shadow .3s var(--ease);}
.term:hover{transform:translateY(-4px); box-shadow:var(--shadow);}
.term h3{font-size:1.18rem; margin-bottom:7px; color:var(--accent-deep);}
.term p{margin:0; color:var(--ink-soft); font-size:15.5px;}
.term .also{margin-top:10px; font-size:13.5px; color:var(--muted);}

/* ---------- Feature blocks ---------- */
.feature-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:22px; margin-top:8px;}
.feature{padding:28px; border-radius:var(--r); background:linear-gradient(180deg, var(--surface), var(--surface-2)); backdrop-filter:blur(16px); border:1px solid var(--line); box-shadow:var(--shadow-sm); transition:transform .35s var(--ease), box-shadow .35s var(--ease);}
.feature:hover{transform:translateY(-5px); box-shadow:var(--shadow);}
.feature .n{display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:12px; background:var(--grad-brand);
  font-family:var(--font-ui); font-weight:800; color:var(--on-accent); font-size:1.1rem; box-shadow:0 10px 22px -8px color-mix(in oklab, var(--accent-2) 65%, transparent);}
.feature h3{font-size:1.15rem; margin:14px 0 6px;}
.feature p{margin:0; color:var(--muted); font-size:15px;}

/* ---------- Subscribe ---------- */
.subscribe{text-align:center;}
.subscribe h2{font-size:clamp(1.8rem,3.4vw,2.6rem); margin-bottom:12px; letter-spacing:-0.03em; color:var(--ink);}
.subscribe p{color:var(--muted); max-width:48ch; margin-inline:auto;}
form.sub{display:flex; gap:10px; justify-content:center; margin-top:28px; flex-wrap:wrap;}
form.sub input{font-family:var(--font-ui); font-size:16px; background:var(--surface); border:1px solid var(--line); color:var(--ink);
  border-radius:999px; padding:14px 22px; min-width:300px; box-shadow:var(--shadow-sm); backdrop-filter:blur(14px); transition:box-shadow .3s var(--ease), border-color .3s var(--ease);}
form.sub input::placeholder{color:var(--muted);}
form.sub input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 4px var(--acc-bg);}
.sub-note{margin-top:14px; font-size:14px; color:var(--muted);}

/* ---------- Footer ---------- */
footer.site{border-top:1px solid var(--line); padding:54px 0 64px; color:var(--muted); font-size:15px; background:var(--bg-2);}
footer .cols{display:flex; justify-content:space-between; gap:30px; flex-wrap:wrap; margin-bottom:32px;}
footer h4{font-family:var(--font-ui); color:var(--ink); font-size:13px; text-transform:uppercase; letter-spacing:.06em; margin:0 0 12px; font-weight:700;}
footer a{color:var(--muted); text-decoration:none; display:block; margin-bottom:8px; transition:color .2s var(--ease), transform .2s var(--ease);}
footer a:hover{color:var(--accent-deep); transform:translateX(3px);}
.disclaimer{border-top:1px solid var(--line); padding-top:24px; font-size:13.5px; line-height:1.7;}

/* ---------- Reader overlay ---------- */
.overlay{position:fixed; inset:0; z-index:var(--z-overlay); display:none; background:oklch(0.3 0.04 270 / 0.45); padding:5vh 18px; backdrop-filter:blur(8px);}
.overlay.open{display:block;}
.reader{max-width:720px; margin-inline:auto; background:linear-gradient(180deg, oklch(1 0 0 / 0.92), oklch(0.98 0.01 270 / 0.96));
  backdrop-filter:blur(24px); border:1px solid var(--line); border-radius:24px; padding:44px clamp(24px,5vw,56px);
  max-height:90vh; overflow:auto; box-shadow:var(--shadow-lg); animation:rise .45s var(--ease); font-family:var(--font-read);}
@keyframes rise{from{opacity:0; transform:translateY(18px);} to{opacity:1; transform:none;}}
.reader .meta{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:18px;}
.reader h2{font-family:var(--font-ui); font-size:clamp(1.6rem,4vw,2.3rem); margin-bottom:18px; letter-spacing:-0.025em; color:var(--ink);}
.reader p{color:var(--ink-soft); font-size:19px; line-height:1.7;}
.reader h4{font-family:var(--font-ui); color:var(--ink); font-size:1.12rem; margin:28px 0 8px;}
.reader ul{color:var(--ink-soft); font-size:18px; padding-left:1.2em; line-height:1.7;}
.reader li{margin-bottom:.5em;}
.reader .src{margin-top:30px; padding-top:18px; border-top:1px solid var(--line); font-size:15px; color:var(--muted); font-family:var(--font-ui);}
.reader-close{position:sticky; top:0; float:right; background:var(--surface); border:1px solid var(--line); color:var(--ink);
  width:42px; height:42px; border-radius:50%; font-size:18px; cursor:pointer; margin:-12px -12px 0 0; backdrop-filter:blur(10px); transition:transform .25s var(--bounce);}
.reader-close:hover{border-color:var(--accent); color:var(--accent-deep); transform:rotate(90deg);}

.empty{padding:44px; text-align:center; color:var(--muted); border:1px dashed var(--line); border-radius:var(--r); background:var(--surface); backdrop-filter:blur(14px);}

/* ---------- Scroll reveal (added via JS; reduced-motion safe) ---------- */
.reveal-init{opacity:0; transform:translateY(20px) scale(.985);}
.reveal-init.in{opacity:1; transform:none; transition:opacity .7s var(--ease), transform .7s var(--bounce);}

@media (max-width:900px){
  .hero-layout{grid-template-columns:1fr;}
  .hero-media{order:-1;}
}
@media (max-width:820px){
  .nav nav{display:none;} .nav .btn.subscribe-top{display:none;} .nav-toggle{display:flex; align-items:center; justify-content:center;}
  .nav.open nav{display:flex; position:absolute; top:78px; left:16px; right:16px; flex-direction:column;
    background:linear-gradient(180deg, var(--surface), var(--surface-2)); backdrop-filter:blur(20px);
    border:1px solid var(--line); border-radius:var(--r); padding:20px 24px; gap:18px; box-shadow:var(--shadow-lg);}
  .lead{grid-template-columns:1fr;} .lead > div:first-child{padding:8px 18px 22px;} .lead .art{order:-1;}
  .item{grid-template-columns:1fr; gap:10px; padding:20px;} .item .go{display:none;}
  .starter{grid-template-columns:1fr; text-align:center;}
}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto;}
  .reveal-init{opacity:1 !important; transform:none !important;}
}