/* =============================================================================
   ChillaxAryan — public/css/main.css
   "Signal & Noise" — Decoded (light) / Terminal (dark)

   Contents
   01. Design tokens (both themes)        08. Topics marquee
   02. Reset & base                       09. Section heads + scroll dividers
   03. Typography                         10. Post cards (data packet)
   04. Layout primitives                  11. Video cards (signal/hex/ring)
   05. Buttons, badges, utilities         12. Project cards (terminal panel)
   06. Header / nav / search              13. Tool cards (rack module)
   07. Hero (hex grid, typewriter…)       14. Category cards (draw-on-scroll)
   15. Pagination   16. Prose/article   17. Footer/oscilloscope   18. Misc/ads
   19. Reveal animations   20. Responsive breakpoints
============================================================================= */

/* ---------------------------------------------------------------------------
   01. DESIGN TOKENS
   Raw palette tokens flip per theme; semantic aliases below stay stable so the
   rest of the file never references a "-light" name directly.
--------------------------------------------------------------------------- */
:root{
  /* LIGHT — "Decoded" */
  --bg-primary-light:#F8F9FA;
  --bg-panel-light:#FFFFFF;
  --bg-surface-light:#F1F3F5;
  --bg-elevated:#FFFFFF;
  --text-primary-light:#0D1117;
  --text-secondary-light:#495057;
  --text-muted-light:#868E96;
  --border-light:#DEE2E6;
  --border-accent:#00C853;
  --border-glow:rgba(0,200,83,.18);
  --scanline-color:rgba(0,200,83,.02);

  /* Code blocks are always dark — "portals into the dark world" */
  --bg-code:#0D1117;
  --code-text:#E6EDF3;

  /* Accents (light values) */
  --accent-green:#00C853;
  --accent-cyan:#00B4D8;
  --accent-orange:#FF6B35;
  --accent-purple:#7C3AED;

  /* Fonts */
  --font-display:"Space Grotesk",system-ui,-apple-system,sans-serif;
  --font-body:"Inter",system-ui,-apple-system,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;

  /* Type scale */
  --t-hero:clamp(48px,8vw,96px);
  --t-h1:clamp(32px,5vw,56px);
  --t-h2:clamp(24px,3.5vw,40px);
  --t-h3:20px; --t-h4:17px; --t-body:16px; --t-small:14px; --t-mono:14px; --t-label:11px;

  /* Spacing / radius / motion */
  --gap:24px; --radius:14px; --radius-sm:8px;
  --maxw:1200px;
  --ease:cubic-bezier(.4,0,.2,1);
  --shadow-1:0 1px 2px rgba(13,17,23,.06),0 8px 24px rgba(13,17,23,.05);

  /* Semantic aliases */
  --bg:var(--bg-primary-light);
  --panel:var(--bg-panel-light);
  --surface:var(--bg-surface-light);
  --elevated:var(--bg-elevated);
  --text:var(--text-primary-light);
  --text-2:var(--text-secondary-light);
  --muted:var(--text-muted-light);
  --border:var(--border-light);
}

[data-theme="dark"]{
  /* DARK — "Terminal" */
  --bg-primary-light:#080C10;
  --bg-panel-light:#0D1117;
  --bg-surface-light:#161B22;
  --bg-elevated:#1C2128;
  --text-primary-light:#E6EDF3;
  --text-secondary-light:#8B949E;
  --text-muted-light:#484F58;
  --border-light:rgba(48,54,61,.8);
  --border-accent:#00FF94;
  --border-glow:rgba(0,255,148,.14);
  --scanline-color:rgba(0,255,148,.03);

  --accent-green:#00FF94;
  --accent-cyan:#00D4FF;
  --accent-orange:#FF6B35;
  --accent-purple:#A78BFA;

  --shadow-1:0 1px 2px rgba(0,0,0,.4),0 12px 40px rgba(0,0,0,.5);
}

/* ---------------------------------------------------------------------------
   02. RESET & BASE
--------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font-body);font-size:var(--t-body);line-height:1.75;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  transition:background .3s var(--ease),color .3s var(--ease);
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img,svg,canvas{display:block;max-width:100%}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
.mono{font-family:var(--font-mono)}
:focus-visible{outline:2px solid var(--accent-green);outline-offset:3px;border-radius:4px}
::selection{background:var(--accent-green);color:#000}

.skip-link{position:absolute;left:-9999px;top:0;z-index:1000;background:var(--accent-green);color:#000;padding:.6rem 1rem;border-radius:0 0 8px 0;font-weight:600}
.skip-link:focus{left:0}

/* ---------------------------------------------------------------------------
   03. TYPOGRAPHY
--------------------------------------------------------------------------- */
h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:600;line-height:1.15;letter-spacing:-.02em}
h1{font-size:var(--t-h1)} h2{font-size:var(--t-h2)}
h3{font-size:var(--t-h3);font-family:var(--font-body)} h4{font-size:var(--t-h4);font-family:var(--font-body)}
p{margin:0 0 1rem}
.label{font-size:var(--t-label);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
code,pre{font-family:var(--font-mono)}

/* ---------------------------------------------------------------------------
   04. LAYOUT PRIMITIVES
--------------------------------------------------------------------------- */
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px}
.section{padding:80px 0;position:relative}
.section-tight{padding:48px 0}
.grid{display:grid;gap:var(--gap)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-auto{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}

/* ---------------------------------------------------------------------------
   05. BUTTONS, BADGES, UTILITIES
--------------------------------------------------------------------------- */
.btn-primary,.btn-secondary,.btn-ghost{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.8rem 1.4rem;border-radius:var(--radius-sm);
  font-weight:600;font-size:var(--t-small);letter-spacing:.01em;
  transition:transform .15s var(--ease),box-shadow .25s var(--ease),background .2s var(--ease),border-color .2s var(--ease);
}
.btn-primary svg,.btn-secondary svg,.btn-ghost svg{width:18px;height:18px;flex:none}
.btn-sm{padding:.5rem 1rem;font-size:13px}
.btn-primary{background:var(--accent-green);color:#04130b}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 28px var(--border-glow)}
.btn-secondary{background:var(--surface);color:var(--text);border:1px solid var(--border)}
.btn-secondary:hover{transform:translateY(-2px);border-color:var(--accent-cyan)}
.btn-ghost{color:var(--text-2);border:1px solid var(--border)}
.btn-ghost:hover{color:var(--text);border-color:var(--text-2)}
[data-theme="dark"] .btn-primary:hover{box-shadow:0 0 0 1px var(--accent-green),0 10px 36px var(--border-glow)}

.badge{display:inline-block;padding:.22rem .6rem;border-radius:6px;font-size:var(--t-label);font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.cat-badge{color:var(--cat-color,var(--accent-green));border:1px solid currentColor;background:color-mix(in srgb,var(--cat-color,var(--accent-green)) 10%,transparent)}
.dot-sep{opacity:.4;margin:0 .15rem}

/* ---------------------------------------------------------------------------
   06. HEADER / NAV / SEARCH
--------------------------------------------------------------------------- */
.site-header{position:sticky;top:0;z-index:100;background:color-mix(in srgb,var(--bg) 84%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}
.site-header .container{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;font-size:18px}
.brand-mark{display:inline-flex;width:30px;height:30px;color:var(--accent-green)}
.brand-mark svg{width:100%;height:100%}
.brand-accent{color:var(--accent-green)}
.brand-text{display:inline-block}

.nav-toggle{display:none;width:42px;height:42px;align-items:center;justify-content:center;border-radius:var(--radius-sm)}
.nav-toggle svg{width:24px;height:24px}

.primary-nav{display:flex;align-items:center;gap:1.5rem}
.primary-nav>ul{display:flex;align-items:center;gap:.4rem}
.primary-nav a{position:relative;padding:.5rem .7rem;font-size:var(--t-small);font-weight:500;color:var(--text-2);border-radius:6px;transition:color .2s var(--ease)}
.primary-nav a::after{content:"";position:absolute;left:.7rem;right:.7rem;bottom:.28rem;height:2px;background:var(--accent-green);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
.primary-nav a:hover{color:var(--text)}
.primary-nav a:hover::after,.primary-nav a.active::after{transform:scaleX(1)}
.primary-nav a.active{color:var(--text)}

.nav-actions{display:flex;align-items:center;gap:.4rem}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--radius-sm);color:var(--text-2);border:1px solid transparent;transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.icon-btn:hover{background:var(--surface);color:var(--text);border-color:var(--border)}
.icon-btn svg{width:20px;height:20px}
.theme-toggle .icon-moon{display:none}
[data-theme="dark"] .theme-toggle .icon-sun{display:block}
[data-theme="dark"] .theme-toggle .icon-moon{display:none}
[data-theme="light"] .theme-toggle .icon-sun{display:none}
[data-theme="light"] .theme-toggle .icon-moon{display:block}

/* Search overlay */
.search-overlay{position:fixed;inset:0;z-index:200;background:color-mix(in srgb,var(--bg) 70%,transparent);backdrop-filter:blur(8px);display:flex;align-items:flex-start;justify-content:center;padding:12vh 24px}
.search-overlay[hidden]{display:none}
.search-box{width:100%;max-width:640px;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-1);overflow:hidden;animation:searchIn .25s var(--ease)}
@keyframes searchIn{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
.search-field{display:flex;align-items:center;gap:.7rem;padding:1rem 1.1rem;border-bottom:1px solid var(--border)}
.search-field svg{width:20px;height:20px;color:var(--muted);flex:none}
.search-field input{flex:1;border:none;background:none;outline:none;font-size:17px}
.search-results{max-height:50vh;overflow:auto}
.search-results a{display:block;padding:.85rem 1.1rem;border-bottom:1px solid var(--border);transition:background .15s var(--ease)}
.search-results a:hover{background:var(--surface)}
.search-results .sr-kind{font-family:var(--font-mono);font-size:11px;color:var(--accent-cyan);text-transform:uppercase;letter-spacing:.06em}
.search-results .sr-title{font-weight:600;margin-top:.15rem}
.search-empty{padding:1.5rem 1.1rem;color:var(--muted);font-family:var(--font-mono);font-size:13px}

/* ---------------------------------------------------------------------------
   07. HERO
--------------------------------------------------------------------------- */
.hero{
    position:relative;
    overflow:hidden;
    padding:96px 10px 72px;
    max-width:1200px;
    margin:0 auto;
    display:grid;
    grid-template-columns:1.15fr .85fr;
    gap:48px;
    align-items:center;
}
/*.hero{position:relative;overflow:hidden;padding:96px 0 72px;display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}*/
.hero .container{display:contents}
.hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-hex-grid{position:absolute;inset:-10%;width:120%;height:120%;color:var(--text);opacity:.04}
[data-theme="dark"] .hero-hex-grid{opacity:.06;color:var(--accent-green)}
/* Dark-mode scanline signature */
[data-theme="dark"] .hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:repeating-linear-gradient(0deg,var(--scanline-color) 0,var(--scanline-color) 2px,transparent 2px,transparent 4px)}

.hero-content{position:relative;z-index:2;grid-column:1}
.hero-eyebrow{display:inline-flex;align-items:center;gap:.55rem;color:var(--accent-green);font-family:var(--font-mono);font-size:13px;letter-spacing:.04em;margin-bottom:1rem}
.eyebrow-icon{width:34px;height:12px}
.hero-title{font-size:var(--t-hero);font-family:var(--font-display);font-weight:700;letter-spacing:-.03em;line-height:1;margin:0 0 .6rem}
.typewriter-wrap{display:inline-flex;align-items:baseline}
.typewriter .char{display:inline-block;opacity:0;transform:translateY(.12em)}
.typewriter .char.is-in{opacity:1;transform:none;transition:opacity .12s var(--ease),transform .12s var(--ease)}
.typewriter .char.glitch{color:var(--accent-cyan);animation:charGlitch .14s steps(2) 1}
@keyframes charGlitch{0%{opacity:.5;transform:translateY(-.06em) skewX(8deg)}100%{opacity:1;transform:none}}
.cursor-blink{display:inline-block;color:var(--accent-green);margin-left:.04em;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.hero-tagline{font-size:clamp(16px,2.2vw,20px);color:var(--text-2);margin:0 0 .35rem;max-width:34ch}
.hero-tagline-rotator{font-family:var(--font-mono);font-size:14px;color:var(--accent-cyan);min-height:1.5em;margin-bottom:1.6rem}
.hero-tagline-rotator span{display:inline-block;animation:rotIn .5s var(--ease)}
@keyframes rotIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.hero-ctas{display:flex;flex-wrap:wrap;gap:.8rem;margin-bottom:2rem}
.hero-stats{display:flex;gap:1.4rem;flex-wrap:wrap}
.hero-stat{display:flex;flex-direction:column}
.hero-stat .num{font-family:var(--font-display);font-weight:700;font-size:26px;line-height:1}
.hero-stat .lbl{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:.25rem}
.hero-stat .num{color:var(--accent-green)}

/* Floating terminal */
.hero-terminal{position:relative;z-index:2;grid-column:2;background:var(--bg-code);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-1);overflow:hidden;font-family:var(--font-mono);font-size:13px}
[data-theme="dark"] .hero-terminal{box-shadow:0 0 0 1px var(--border),0 24px 60px rgba(0,0,0,.55),0 0 40px var(--border-glow)}
.hero-terminal .term-bar{display:flex;align-items:center;gap:.45rem;padding:.65rem .9rem;background:rgba(255,255,255,.03);border-bottom:1px solid rgba(255,255,255,.06)}
.hero-terminal .term-bar .d{width:11px;height:11px;border-radius:50%}
.hero-terminal .term-bar .r{background:#FF5F56}.hero-terminal .term-bar .y{background:#FFBD2E}.hero-terminal .term-bar .g{background:#27C93F}
.hero-terminal .term-bar .ttl{margin-left:.4rem;color:#8B949E;font-size:12px}
.hero-terminal .term-out{padding:1rem 1.1rem;line-height:1.8;color:var(--code-text);min-height:180px}
.hero-terminal .term-out .ln{white-space:pre-wrap}
.hero-terminal .c-cmd{color:#E6EDF3}.hero-terminal .c-dim{color:#8B949E}
.hero-terminal .c-green{color:#00FF94}.hero-terminal .c-cyan{color:#00D4FF}.hero-terminal .c-yellow{color:#FFBD2E}
.hero-terminal .tcaret{display:inline-block;width:.5em;background:#00FF94;animation:blink 1s steps(1) infinite}

/* ---------------------------------------------------------------------------
   08. TOPICS MARQUEE
--------------------------------------------------------------------------- */
.topics{padding:28px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--panel);overflow:hidden;position:relative}
.topics::before,.topics::after{content:"";position:absolute;top:0;bottom:0;width:80px;z-index:2;pointer-events:none}
.topics::before{left:0;background:linear-gradient(90deg,var(--panel),transparent)}
.topics::after{right:0;background:linear-gradient(270deg,var(--panel),transparent)}
.marquee-track{display:flex;gap:1rem;width:max-content;animation:marquee 38s linear infinite}
.topics:hover .marquee-track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
.topic-chip{display:inline-flex;align-items:center;gap:.6rem;padding:.55rem 1rem;border:1px solid var(--border);border-radius:100px;background:var(--bg);white-space:nowrap;font-size:13px;font-weight:500;color:var(--text-2);transition:border-color .2s var(--ease),color .2s var(--ease)}
.topic-chip:hover{border-color:var(--accent-green);color:var(--text)}
.topic-chip .chip-ico{width:22px;height:22px;color:var(--accent-cyan);flex:none}
.topic-chip:nth-child(3n) .chip-ico{color:var(--accent-green)}
.topic-chip:nth-child(3n+1) .chip-ico{color:var(--accent-orange)}
.topic-chip:nth-child(3n+2) .chip-ico{color:var(--accent-purple)}

/* ---------------------------------------------------------------------------
   09. SECTION HEADS + SCROLL DIVIDERS
--------------------------------------------------------------------------- */
.section-head{margin-bottom:40px;max-width:60ch}
.section-eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-green);margin-bottom:.7rem}
.section-title{font-size:var(--t-h2)}
.section-sub{color:var(--text-2);margin-top:.6rem}

.section-divider{height:64px;display:flex;align-items:center;justify-content:center;color:var(--accent-green);overflow:hidden}
.section-divider svg{width:100%;height:48px}
/* scan-line sweep (hero→topics) */
.divider-scan .scan-line{stroke:var(--accent-green);stroke-width:2;opacity:.7}
.is-visible .divider-scan .scan-line{animation:scanSweep .6s var(--ease) forwards}
@keyframes scanSweep{from{stroke-dashoffset:1000}to{stroke-dashoffset:0}}
/* packet flow dots */
.divider-packet .pkt{fill:var(--accent-cyan)}
.is-visible .divider-packet .pkt{animation:pktFlow 1.2s var(--ease) infinite}
.divider-packet .pkt:nth-child(2){animation-delay:.15s}
.divider-packet .pkt:nth-child(3){animation-delay:.3s}
@keyframes pktFlow{0%{transform:translateX(0);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateX(220px);opacity:0}}
/* binary rain */
.divider-binary text{fill:var(--accent-green);font-family:var(--font-mono);font-size:12px;opacity:0}
.is-visible .divider-binary text{animation:binDrop .8s var(--ease) forwards}
@keyframes binDrop{from{opacity:0;transform:translateY(-14px)}60%{opacity:.8}to{opacity:.25;transform:none}}

/* ---------------------------------------------------------------------------
   10. POST CARDS — "data packet"
--------------------------------------------------------------------------- */
.post-card{position:relative;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:transform .25s var(--ease),border-color .25s var(--ease)}
.post-card:hover{transform:translateY(-4px);border-color:transparent}
.post-card-link{display:block;height:100%;padding:0}
.packet-strip{display:block;padding:.4rem .9rem;font-size:10px;color:var(--muted);opacity:.55;letter-spacing:.04em;border-bottom:1px solid var(--border);background:var(--surface);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card-border-draw{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}
.card-border-draw rect{stroke-dasharray:100;stroke-dashoffset:100;opacity:0;transition:opacity .2s var(--ease)}
.post-card:hover .card-border-draw rect{opacity:1;animation:borderDraw .5s var(--ease) forwards}
@keyframes borderDraw{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
.post-card-body{padding:1.1rem 1.1rem 1.3rem}
.cat-badge{margin-bottom:.7rem}
.post-card-title{font-size:18px;font-weight:600;margin:.2rem 0 .5rem;line-height:1.35}
.post-card-excerpt{color:var(--text-2);font-size:14px;margin:0 0 1rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.post-card-meta{display:flex;align-items:center;gap:.4rem;font-size:12px;color:var(--muted)}
.read-signal{display:inline-flex;align-items:center;gap:.35rem;color:var(--text-2)}
.read-signal svg{width:18px;height:14px}
.read-signal rect{fill:var(--border)}
.read-signal rect.on{fill:var(--accent-green)}

/* ---------------------------------------------------------------------------
   11. VIDEO CARDS
--------------------------------------------------------------------------- */
.video-card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:transform .25s var(--ease),border-color .25s var(--ease)}
.video-card:hover{transform:translateY(-4px);border-color:var(--accent-cyan)}
.video-thumb{position:relative;width:100%;padding-bottom:56.25%;background:var(--surface);overflow:hidden}
.video-thumb img,.video-thumb-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.video-thumb-fallback{background:linear-gradient(135deg,var(--surface),var(--elevated))}
.signal-meter{position:absolute;top:8px;right:8px;z-index:3;background:rgba(8,12,16,.6);border-radius:6px;padding:4px 5px}
.signal-meter svg{width:22px;height:16px}
.signal-meter rect{fill:rgba(255,255,255,.25)}
.signal-meter rect.on{fill:var(--accent-green)}
.video-duration{position:absolute;bottom:8px;right:8px;z-index:3;background:rgba(8,12,16,.78);color:#E6EDF3;font-size:12px;padding:.12rem .4rem;border-radius:4px}
.video-series{position:absolute;top:8px;left:8px;z-index:3;background:color-mix(in srgb,var(--accent-purple) 86%,#000);color:#fff;font-size:11px;padding:.16rem .5rem;border-radius:4px;letter-spacing:.04em}
.video-play{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .25s var(--ease)}
.video-card:hover .video-play{opacity:1}
.play-hex{width:58px;height:58px;color:#fff;filter:drop-shadow(0 4px 14px rgba(0,0,0,.5));position:relative;z-index:2}
.play-ring{position:absolute;width:72px;height:72px;border-radius:50%;background:conic-gradient(var(--accent-green) 0deg,transparent 60deg);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px))}
.video-card:hover .play-ring{animation:ringSpin .8s var(--ease) 1}
@keyframes ringSpin{from{transform:rotate(0);opacity:1}to{transform:rotate(360deg);opacity:0}}
.video-card-body{padding:.9rem 1rem 1.1rem}
.video-card-title{font-size:15px;font-weight:600;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.video-card-meta{margin-top:.5rem;font-size:12px;color:var(--muted);display:flex;gap:.4rem;align-items:center}

/* ---------------------------------------------------------------------------
   12. PROJECT CARDS — terminal panel + alternating layout
--------------------------------------------------------------------------- */
.project-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:center;padding:28px;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:28px}
.project-card.is-featured{border-color:var(--accent-green)}
.project-card:nth-child(even){direction:rtl}
.project-card:nth-child(even)>*{direction:ltr}
.project-terminal{background:var(--bg-code);border-radius:var(--radius-sm);overflow:hidden;border:1px solid rgba(255,255,255,.06)}
.term-chrome{display:flex;align-items:center;gap:.4rem;padding:.55rem .8rem;background:rgba(255,255,255,.03);border-bottom:1px solid rgba(255,255,255,.06);color:#8B949E;font-size:12px}
.term-dot{width:10px;height:10px;border-radius:50%}
.term-dot.r{background:#FF5F56}.term-dot.y{background:#FFBD2E}.term-dot.g{background:#27C93F}
.term-title{margin-left:.4rem}
.term-body{width:100%;height:auto;font-family:var(--font-mono);font-size:12.5px}
.term-body text{font-family:var(--font-mono);font-size:12.5px}
.t-cmd{fill:#E6EDF3}.t-dim{fill:#8B949E}.t-info{fill:#FFBD2E}.t-ok{fill:#00FF94}.t-run{fill:#00D4FF}
.t-caret{fill:#00FF94}.is-visible .t-caret{animation:blink 1s steps(1) infinite}
.project-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.6rem}
.project-title{font-size:22px}
.project-status{font-size:10px;padding:.2rem .5rem;border-radius:5px;border:1px solid currentColor;letter-spacing:.06em}
.status-active{color:var(--accent-green)}.status-wip{color:var(--accent-orange)}.status-archived{color:var(--muted)}
.project-desc{color:var(--text-2);margin-bottom:1rem}
.tech-stack{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1.2rem}
.tech-stack li{font-size:11px;padding:.2rem .55rem;border-radius:5px;background:var(--surface);border:1px solid var(--border);color:var(--text-2)}
.project-actions{display:flex;gap:.6rem}

/* ---------------------------------------------------------------------------
   13. TOOL CARDS — rack module
--------------------------------------------------------------------------- */
.tool-card{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:18px 18px 18px 30px;overflow:hidden;transition:box-shadow .2s var(--ease),transform .2s var(--ease)}
.tool-card:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px var(--border-glow),0 8px 24px rgba(0,0,0,.12)}
.tool-card.is-coming{opacity:.7}
.rack-screw{position:absolute;width:8px;height:8px;border-radius:50%;background:radial-gradient(circle at 35% 35%,var(--muted),var(--border));box-shadow:inset 0 0 0 1px var(--border)}
.rack-screw::after{content:"";position:absolute;inset:2px;border-top:1px solid var(--bg);transform:rotate(45deg)}
.rack-screw-tl{top:8px;left:8px}.rack-screw-tr{top:8px;right:8px}
.rack-rail{position:absolute;left:0;top:0;bottom:0;width:18px;display:flex;align-items:center;justify-content:center;writing-mode:vertical-rl;transform:rotate(180deg);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);background:var(--panel);border-right:1px solid var(--border)}
.tool-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:.8rem}
.tool-icon{display:inline-flex;width:40px;height:40px;color:var(--accent-cyan)}
.tool-icon svg{width:100%;height:100%}
.pwr-led{display:inline-flex;flex-direction:column;align-items:center;gap:2px}
.pwr-led svg{width:14px;height:14px}
.pwr-led circle{fill:var(--pwr,var(--accent-green));animation:pwrPulse 2s var(--ease) infinite}
@keyframes pwrPulse{0%,100%{opacity:1;filter:drop-shadow(0 0 0 var(--pwr))}50%{opacity:.45;filter:drop-shadow(0 0 4px var(--pwr))}}
.pwr-label{font-size:8px;letter-spacing:.1em;color:var(--muted)}
.tool-name{font-size:17px;font-weight:600;margin-bottom:.4rem}
.tool-desc{font-size:13px;color:var(--text-2);margin-bottom:1rem;min-height:2.6em}
.tool-foot{display:flex;align-items:center;justify-content:space-between;font-size:11px}
.tool-open{display:inline-flex;align-items:center;gap:.3rem;color:var(--accent-green);font-weight:600;letter-spacing:.06em}
.tool-open svg{width:14px;height:14px;transition:transform .2s var(--ease)}
.tool-open:hover svg{transform:translateX(3px)}
.tool-uses,.tool-tag{color:var(--muted);letter-spacing:.06em}
.tool-tag{color:var(--accent-orange)}
.rack-vents{position:absolute;left:30px;right:14px;bottom:6px;height:10px;color:var(--border);opacity:.7}

/* ---------------------------------------------------------------------------
   14. CATEGORY CARDS — draw-on-scroll SVG
--------------------------------------------------------------------------- */
.category-card{position:relative;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:24px;overflow:hidden;transition:border-color .25s var(--ease),transform .25s var(--ease)}
.category-card:hover{transform:translateY(-3px);border-color:var(--cat-color,var(--accent-green))}
.category-illu{height:120px;margin-bottom:1rem;color:var(--cat-color,var(--accent-green))}
.category-illu svg{width:100%;height:100%}
.category-illu svg [data-draw]{stroke-dasharray:1;stroke-dashoffset:1;}
.is-visible .category-illu svg [data-draw]{animation:drawIn 1.2s var(--ease) forwards}
@keyframes drawIn{to{stroke-dashoffset:0}}
.category-name{font-size:18px;margin-bottom:.4rem}
.category-desc{font-size:14px;color:var(--text-2)}
.category-count{font-family:var(--font-mono);font-size:11px;color:var(--muted);margin-top:.8rem;letter-spacing:.06em}

/* ---------------------------------------------------------------------------
   15. PAGINATION
--------------------------------------------------------------------------- */
.pagination{display:flex;align-items:center;justify-content:center;gap:.4rem;margin-top:48px}
.page-num,.page-arrow{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 .5rem;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:13px;color:var(--text-2);transition:border-color .2s var(--ease),color .2s var(--ease),background .2s var(--ease)}
.page-num:hover,.page-arrow:hover{border-color:var(--accent-green);color:var(--text)}
.page-num.is-current{background:var(--accent-green);color:#04130b;border-color:var(--accent-green);font-weight:600}
.page-arrow svg{width:18px;height:18px}
.page-arrow.is-disabled{opacity:.35;pointer-events:none}
.page-gap{color:var(--muted);padding:0 .2rem}

/* ---------------------------------------------------------------------------
   16. PROSE / ARTICLE (blog-single, tool-single, about)
--------------------------------------------------------------------------- */
.page-hero{padding:56px 0 24px}
.page-hero .eyebrow{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-green)}
.page-hero h1{margin:.6rem 0;max-width:24ch}
.post-meta-row{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;color:var(--muted);font-family:var(--font-mono);font-size:13px}
.article-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:48px;align-items:start}
.prose{font-size:17px;line-height:1.85;max-width:72ch}
.prose h2{font-size:var(--t-h2);margin:2.2rem 0 1rem}
.prose h3{font-size:22px;margin:1.8rem 0 .8rem}
.prose p{margin:0 0 1.3rem;color:var(--text)}
.prose a{color:var(--accent-cyan);text-decoration:underline;text-underline-offset:3px}
.prose ul,.prose ol{margin:0 0 1.3rem 1.2rem}
.prose li{margin:.3rem 0;list-style:disc}
.prose ol li{list-style:decimal}
.prose blockquote{margin:1.5rem 0;padding:1rem 1.3rem;border-left:3px solid var(--accent-green);background:var(--surface);border-radius:0 var(--radius-sm) var(--radius-sm) 0;color:var(--text-2);font-style:italic}
.prose code{background:var(--bg-code);color:var(--code-text);padding:.12em .4em;border-radius:5px;font-size:.88em}
.prose pre{background:var(--bg-code);color:var(--code-text);padding:1.1rem 1.2rem;border-radius:var(--radius-sm);overflow:auto;margin:0 0 1.4rem;border:1px solid rgba(255,255,255,.06)}
.prose pre code{background:none;padding:0}
.prose img{border-radius:var(--radius-sm);margin:1.4rem 0}
.article-aside{position:sticky;top:88px;display:flex;flex-direction:column;gap:24px}
.aside-card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:18px}
.aside-card h4{margin-bottom:.7rem}
.tag-list{display:flex;flex-wrap:wrap;gap:.4rem}
.tag-list a{font-size:12px;font-family:var(--font-mono);padding:.2rem .55rem;border:1px solid var(--border);border-radius:100px;color:var(--text-2);transition:border-color .2s,color .2s}
.tag-list a:hover{border-color:var(--accent-green);color:var(--text)}

/* video single */
.video-embed{position:relative;width:100%;padding-bottom:56.25%;border-radius:var(--radius);overflow:hidden;background:#000;border:1px solid var(--border)}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------------------------------------------------------------------------
   17. FOOTER + OSCILLOSCOPE
--------------------------------------------------------------------------- */
.site-footer{position:relative;margin-top:80px;border-top:1px solid var(--border);background:var(--panel)}
.footer-scope{width:100%;height:80px;overflow:hidden;border-bottom:1px solid var(--border)}
#oscilloscope{width:100%;height:80px;display:block}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1.3fr;gap:40px;padding:48px 24px}
.footer-tagline{color:var(--text-2);margin:.8rem 0 .3rem}
.footer-mono{font-family:var(--font-mono);font-size:12px;color:var(--muted)}
.footer-h{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:1rem}
.footer-links{display:flex;flex-direction:column;gap:.6rem}
.footer-links a{color:var(--text-2);font-size:14px;transition:color .2s var(--ease)}
.footer-links a:hover{color:var(--accent-green)}
.footer-connect{display:flex;flex-direction:column;gap:.7rem}
.footer-social{display:inline-flex;align-items:center;gap:.5rem;color:var(--text-2);font-size:14px;transition:color .2s var(--ease)}
.footer-social svg{width:20px;height:20px}
.footer-social:hover{color:var(--accent-green)}
.subscribe{margin-top:.6rem}
.subscribe-row{display:flex;gap:.5rem}
.subscribe-row input{flex:1;padding:.6rem .8rem;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);outline:none;font-size:14px;transition:border-color .2s var(--ease)}
.subscribe-row input:focus{border-color:var(--accent-green)}
.subscribe-msg{font-size:12px;font-family:var(--font-mono);margin-top:.5rem;min-height:1em}
.subscribe-msg.ok{color:var(--accent-green)}.subscribe-msg.err{color:var(--accent-orange)}
.footer-bottom{padding:18px 24px;border-top:1px solid var(--border);color:var(--muted);font-size:12px}

.scroll-top{position:fixed;right:24px;bottom:24px;z-index:90;width:46px;height:46px;display:flex;align-items:center;justify-content:center;background:var(--panel);border:1px solid var(--border);border-radius:50%;color:var(--accent-green);box-shadow:var(--shadow-1);transition:transform .2s var(--ease),border-color .2s var(--ease)}
.scroll-top svg{width:22px;height:22px}
.scroll-top:hover{transform:translateY(-3px);border-color:var(--accent-green)}
.scroll-top:hover svg path:nth-child(2),.scroll-top:hover svg path:nth-child(3){animation:sigPulse .6s var(--ease)}
@keyframes sigPulse{0%{opacity:0;transform:translateY(2px)}100%{opacity:.5;transform:none}}

/* ---------------------------------------------------------------------------
   18. AD UNITS
--------------------------------------------------------------------------- */
.ad-unit{display:block;margin:24px auto;text-align:center;max-width:var(--maxw)}
.ad-header,.ad-footer{min-height:90px}
.ad-sidebar{min-height:250px}
.ad-inarticle{margin:2rem 0}

/* Container wrappers referenced by markup (explicit for layout stability) */
.video-card-link{display:block;color:inherit;height:100%}
.tool-card-inner{display:flex;flex-direction:column;height:100%}
.project-body{min-width:0}
.footer-brand{display:flex;flex-direction:column}

/* ---------------------------------------------------------------------------
   19. REVEAL ANIMATIONS (IntersectionObserver toggles .is-visible)
--------------------------------------------------------------------------- */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.is-visible{opacity:1;transform:none}
.reveal-stagger>*{opacity:0;transform:translateY(20px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.reveal-stagger.is-visible>*{opacity:1;transform:none}
.reveal-stagger.is-visible>*:nth-child(2){transition-delay:.06s}
.reveal-stagger.is-visible>*:nth-child(3){transition-delay:.12s}
.reveal-stagger.is-visible>*:nth-child(4){transition-delay:.18s}
.reveal-stagger.is-visible>*:nth-child(5){transition-delay:.24s}
.reveal-stagger.is-visible>*:nth-child(6){transition-delay:.3s}

/* Empty / status states */
.empty-state{text-align:center;padding:64px 24px;color:var(--muted)}
.empty-state .mono{font-size:13px}

/* ---------------------------------------------------------------------------
   20. RESPONSIVE — 1440 / 1024 / 768 / 480
--------------------------------------------------------------------------- */
@media (max-width:1440px){
  .container{max-width:1120px}
}
@media (max-width:1024px){
  .hero{grid-template-columns:1fr;gap:32px;padding:72px 10px 48px}
  .hero-terminal{grid-column:1;max-width:560px}
  .article-layout{grid-template-columns:1fr}
  .article-aside{position:static}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .ad-sidebar{display:none}
}
@media (max-width:768px){
  .section{padding:56px 0}
  .nav-toggle{display:inline-flex}
  .primary-nav{position:fixed;inset:64px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;background:var(--panel);border-bottom:1px solid var(--border);padding:1rem 24px 1.4rem;transform:translateY(-12px);opacity:0;pointer-events:none;transition:transform .25s var(--ease),opacity .25s var(--ease)}
  .primary-nav.open{transform:none;opacity:1;pointer-events:auto}
  .primary-nav>ul{flex-direction:column;align-items:stretch;gap:0}
  .primary-nav>ul a{padding:.8rem .3rem;border-bottom:1px solid var(--border)}
  .primary-nav a::after{display:none}
  .nav-actions{margin-top:.8rem;justify-content:flex-start}
  .project-card{grid-template-columns:1fr;gap:20px}
  .project-card:nth-child(even){direction:ltr}
  .grid-3,.grid-2{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;gap:28px}
  .hero-title{font-size:clamp(40px,12vw,64px)}
}
@media (max-width:480px){
  .container{padding:0 16px}
  .section{padding:44px 0}
  .hero{padding:48px 15px 36px}
  .hero-ctas{flex-direction:column;align-items:stretch}
  .hero-ctas .btn-primary,.hero-ctas .btn-secondary{justify-content:center}
  .hero-stats{gap:1rem}
  .grid-auto{grid-template-columns:1fr}
  .scroll-top{right:14px;bottom:14px}
  .subscribe-row{flex-direction:column}
}

/* ---------------------------------------------------------------------------
   Accessibility: kill decorative motion when the user opts out.
--------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .marquee-track{animation:none!important}
  .reveal,.reveal-stagger>*{opacity:1;transform:none}
}

/* =============================================================================
   21. PAGE-SPECIFIC (home sections, listings, single pages, about, search, 404)
============================================================================= */

/* Section head with right-aligned "view all" link */
.section-head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem}
.section-link{font-size:12px;letter-spacing:.06em;color:var(--accent-green);white-space:nowrap;transition:transform .2s var(--ease)}
.section-link:hover{transform:translateX(3px)}

/* Knowledge category grid */
.category-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}

/* Remaining scroll dividers */
.divider-terminal{justify-content:flex-start}
.divider-terminal .dt-line{font-size:13px;color:var(--accent-cyan);padding-left:24px}
.divider-terminal .dt-caret{color:var(--accent-green)}
.is-visible .divider-terminal .dt-caret{animation:blink 1s steps(1) infinite}
.divider-api{gap:.8rem}
.divider-api .da-req{font-size:12px;color:var(--text-2)}
.divider-api .da-res{font-size:12px;color:var(--accent-green);border:1px solid var(--accent-green);border-radius:5px;padding:.1rem .5rem;opacity:0}
.is-visible .divider-api .da-res{animation:rotIn .4s var(--ease) .25s forwards}

/* Listing filter bar */
.filter-bar{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:32px}
.filter-pill{font-size:12px;letter-spacing:.04em;padding:.4rem .85rem;border:1px solid var(--border);border-radius:100px;color:var(--text-2);transition:border-color .2s var(--ease),color .2s var(--ease),background .2s var(--ease)}
.filter-pill:hover{color:var(--text);border-color:var(--cat-color,var(--accent-green))}
.filter-pill.is-active{color:#04130b;background:var(--cat-color,var(--accent-green));border-color:var(--cat-color,var(--accent-green));font-weight:600}
[data-theme="dark"] .filter-pill.is-active{color:#04130b}

/* Featured post block (blog index) */
.featured-post{display:block;position:relative;padding:32px;margin-bottom:36px;background:var(--panel);border:1px solid var(--border);border-left:4px solid var(--cat-color,var(--accent-green));border-radius:var(--radius);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.featured-post:hover{transform:translateY(-3px);box-shadow:var(--shadow-1)}
.featured-meta{display:flex;align-items:center;gap:.6rem;margin-bottom:.8rem}
.featured-tag{font-size:10px;letter-spacing:.1em;color:var(--accent-orange)}
.featured-title{font-size:clamp(24px,3.4vw,34px);margin-bottom:.6rem;line-height:1.2}
.featured-excerpt{color:var(--text-2);max-width:70ch;margin-bottom:1rem}
.featured-meta-row{font-size:12px;color:var(--muted)}

/* Blog single sidebar extras */
.related-list{display:flex;flex-direction:column;gap:.6rem}
.related-list a{font-size:14px;color:var(--text-2);line-height:1.4;transition:color .2s var(--ease)}
.related-list a:hover{color:var(--accent-green)}
.aside-note{font-size:14px;color:var(--text-2);margin-bottom:.9rem}
.aside-card .btn-primary,.aside-card .btn-secondary{margin-right:.4rem;margin-top:.3rem}

/* Video single */
.video-desc{margin-top:24px}
.video-desc h2{font-size:20px;margin-bottom:.6rem}
.video-actions{margin-top:20px}

/* Projects archived */
.archived-head{margin:48px 0 24px;font-size:var(--t-h3)}
.archived-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px}
.archived-card .project-title{font-size:18px;margin-bottom:.4rem}

/* Tool single */
.tool-hero-head{display:flex;align-items:center;gap:16px;margin-top:.6rem}
.tool-hero-icon{display:inline-flex;width:48px;height:48px;color:var(--accent-cyan);flex:none}
.tool-hero-icon svg{width:100%;height:100%}
.tool-longdesc{font-size:17px;color:var(--text-2);max-width:72ch;margin-bottom:1.2rem}
.tool-tags{margin-bottom:1.6rem}
.tool-tags .mono{font-size:12px;padding:.2rem .55rem;border:1px solid var(--border);border-radius:100px;color:var(--text-2)}
.tool-frame-wrap{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--panel)}
.tool-frame{width:100%;min-height:560px;border:0;display:block}
.tool-state{border:1px dashed var(--border);border-radius:var(--radius)}
.tool-state .mono{color:var(--accent-orange);letter-spacing:.1em;margin-bottom:.5rem}
.back-link{margin-top:24px}
.back-link a{color:var(--muted)}
.back-link a:hover{color:var(--accent-green)}

/* About */
.about-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:40px;align-items:start}
.about-mission .section-title{margin-bottom:1rem}
.mission-text{font-size:18px;line-height:1.9;color:var(--text-2);max-width:68ch}
.about-cta{display:flex;gap:.8rem;margin-top:1.6rem}
.about-side{display:flex;flex-direction:column;gap:20px}
.topic-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.topic-item{display:flex;align-items:center;gap:.7rem;padding:14px 16px;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-sm);transition:border-color .2s var(--ease)}
.topic-item:hover{border-color:var(--accent-green)}
.topic-num{font-size:12px;color:var(--accent-green);font-weight:600}
.topic-label{font-size:14px}

/* Search page */
.search-form-lg{display:flex;align-items:center;gap:.6rem;margin:1.2rem 0;max-width:640px;padding:.5rem .9rem;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius)}
.search-form-lg svg{width:20px;height:20px;color:var(--muted);flex:none}
.search-form-lg input{flex:1;border:none;background:none;outline:none;font-size:16px}
.search-group{margin-bottom:40px}
.search-group-head{font-size:13px;color:var(--accent-cyan);letter-spacing:.06em;margin-bottom:18px}

/* 404 */
.notfound{padding-top:64px}
.nf-terminal{max-width:560px;background:var(--bg-code);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-bottom:32px}
[data-theme="dark"] .nf-terminal{box-shadow:0 0 40px var(--border-glow)}
.nf-bar{display:flex;align-items:center;gap:.45rem;padding:.6rem .9rem;background:rgba(255,255,255,.03);border-bottom:1px solid rgba(255,255,255,.06)}
.nf-bar .d{width:11px;height:11px;border-radius:50%}
.nf-bar .r{background:#FF5F56}.nf-bar .y{background:#FFBD2E}.nf-bar .g{background:#27C93F}
.nf-ttl{margin-left:.4rem;color:#8B949E;font-size:12px}
.nf-body{padding:1rem 1.1rem;color:var(--code-text);font-size:13px;line-height:1.9}
.nf-code{color:var(--accent-orange);font-weight:600}
.nf-title{font-size:var(--t-h2);margin-bottom:.6rem}
.nf-sub{color:var(--text-2);margin-bottom:1.4rem}
.nf-links{display:flex;flex-wrap:wrap;gap:.6rem}

/* Page-specific responsive */
@media (max-width:1024px){
  .category-grid{grid-template-columns:repeat(2,1fr)}
  .about-grid{grid-template-columns:1fr}
  .topic-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:768px){
  .section-head-row{flex-direction:column;align-items:flex-start;gap:.4rem}
  .category-grid{grid-template-columns:1fr}
  .topic-grid{grid-template-columns:1fr}
  .featured-post{padding:22px}
  .tool-hero-head{align-items:flex-start}
  .search-form-lg{flex-wrap:wrap}
}