@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
:root { --brand-primary: 210 92% 75%; --brand-secondary: 170 53% 74%; --brand-tertiary: 116 48% 78%; --bg: 220 20% 98%; --bg-elev: 220 25% 96%; --text: 224 18% 12%; --text-muted: 224 10% 40%; --glass-bg: 220 30% 96% / 65%; --glass-stroke: 220 25% 85% / 45%; --shadow: 220 30% 20% / 8%; --radius: 16px; --radius-sm: 12px; --radius-lg: 22px; --blur: 14px; --container: 1120px; --transition: 180ms cubic-bezier(.2,.6,.2,1);} 
@media (prefers-color-scheme: dark){:root{--bg:220 20% 7%;--bg-elev:220 18% 9%;--text:210 15% 96%;--text-muted:210 8% 70%;--glass-bg:220 30% 12% / 50%;--glass-stroke:220 20% 35% / 35%;--shadow:210 60% 2% / 50%;}}
html[data-theme="light"]{color-scheme:light;--bg:220 20% 98%;--bg-elev:220 25% 96%;--text:224 18% 12%;--text-muted:224 10% 40%;--glass-bg:220 30% 96% / 65%;--glass-stroke:220 25% 85% / 45%;--shadow:220 30% 20% / 8%}
html[data-theme="dark"]{color-scheme:dark;--bg:220 20% 7%;--bg-elev:220 18% 9%;--text:210 15% 96%;--text-muted:210 8% 70%;--glass-bg:220 30% 12% / 50%;--glass-stroke:220 20% 35% / 35%;--shadow:210 60% 2% / 50%}
*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;line-height:1.6;color:hsl(var(--text));background:linear-gradient(180deg,hsl(var(--bg)) 0%,hsl(var(--bg-elev)) 1000%)}img{max-width:100%;display:block}
.container{width:min(100% - 2rem, var(--container));margin-inline:auto}.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}.skip-link:focus{position:fixed;left:1rem;top:1rem;padding:.5rem .75rem;background:hsl(var(--bg-elev));border-radius:8px;box-shadow:0 6px 24px hsl(var(--shadow))}
.site-header{position:sticky;top:0;z-index:50;backdrop-filter:blur(var(--blur))}.nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;padding:.75rem 0}.brand{display:flex;align-items:center;gap:.6rem;font-weight:600;color:inherit;text-decoration:none}.brand-text{letter-spacing:.2px}.nav-list{list-style:none;display:flex;gap:1rem;margin:0;padding:0;justify-content:center}.nav-list a{color:hsl(var(--text));text-decoration:none;padding:.5rem .75rem;border-radius:10px}.nav-list a:visited{color:hsl(var(--text))}.nav-list a[aria-current="page"]{background:hsl(var(--text)/.06)}.nav-actions{justify-self:end;display:inline-flex;gap:.5rem}
.glass{background:hsl(var(--glass-bg));border:1px solid hsl(var(--glass-stroke));backdrop-filter:blur(var(--blur)) saturate(1.1);-webkit-backdrop-filter:blur(var(--blur)) saturate(1.1);border-radius:var(--radius);box-shadow:0 10px 40px hsl(var(--shadow))}.glass.heavy{backdrop-filter:blur(calc(var(--blur)*1.2)) saturate(1.2)}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1rem;border-radius:12px;border:1px solid transparent;cursor:pointer;text-decoration:none;transition:transform var(--transition),box-shadow var(--transition),background var(--transition)}.btn:hover{transform:translateY(-1px);box-shadow:0 8px 28px hsl(var(--shadow))}.btn:active{transform:translateY(0)}.btn.primary{background:linear-gradient(135deg,hsl(var(--brand-primary)),hsl(var(--brand-secondary)));color:#0F1216;font-weight:600}.btn.subtle{background:hsl(var(--text)/.06);color:hsl(var(--text))}.btn.icon-btn{padding:.6rem;background:hsl(var(--text)/.06)}.icon{width:20px;height:20px;fill:currentColor}
.hero{position:relative;padding:7rem 0 4rem;overflow:clip}.hero .hero-content{padding:2rem;text-align:center}.hero .hero-badge{display:inline-block;padding:.25rem .6rem;border-radius:999px;background:hsl(var(--text)/.08);color:hsl(var(--text));font-size:.85rem}.hero h1{font-size:clamp(2rem,4vw + 1rem,3.6rem);line-height:1.1;margin:1rem 0 .75rem}.lead{font-size:1.125rem;color:hsl(var(--text-muted))}.cta-group{margin-top:1.25rem;display:inline-flex;gap:.75rem;flex-wrap:wrap;justify-content:center}
.bg-orbs::before,.bg-orbs::after{content:"";position:absolute;inset:-10% -20% auto auto;width:46vmax;height:46vmax;border-radius:50%;filter:blur(60px);opacity:.45;z-index:-1}.bg-orbs::before{background:radial-gradient(circle at 30% 30%,hsl(var(--brand-primary)/.6),transparent 60%),radial-gradient(circle at 70% 70%,hsl(var(--brand-secondary)/.5),transparent 60%)}.bg-orbs::after{left:-20%;top:20%;background:radial-gradient(circle at 50% 50%,hsl(var(--brand-tertiary)/.5),transparent 60%)}
.section{padding:3rem 0}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.card{padding:1.2rem}.feature{display:grid;gap:.5rem;align-content:start}.feature-icon{width:36px;height:36px;border-radius:10px;background:hsl(var(--brand-primary));box-shadow:0 8px 24px hsl(var(--brand-primary)/.3)}.feature-icon[data-color="secondary"]{background:hsl(var(--brand-secondary));box-shadow:0 8px 24px hsl(var(--brand-secondary)/.3)}.feature-icon[data-color="tertiary"]{background:hsl(var(--brand-tertiary));box-shadow:0 8px 24px hsl(var(--brand-tertiary)/.3)}
.callout{text-align:center;padding:2rem}.site-footer{margin-top:2rem;padding:1rem 0}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:1rem;align-items:start}.foot-list{list-style:none;padding:0;margin:0;display:grid;gap:.5rem}.foot-list a{color:hsl(var(--text));text-decoration:none}.foot-list a:visited{color:hsl(var(--text))}.foot-list a:hover{text-decoration:underline}.foot-list a:focus-visible{outline:2px solid currentColor;outline-offset:2px;border-radius:6px}.small{font-size:.9rem}.muted{color:hsl(var(--text-muted))}
.blog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1rem;margin-top:1.2rem;align-items:stretch}
.blog-grid > *{height:100%}
.post{display:grid;grid-template-columns:140px 1fr;gap:1rem;align-items:stretch}
.post .thumb{border-radius:var(--radius-sm);background:linear-gradient(135deg,hsl(var(--brand-primary)/.65),hsl(var(--brand-secondary)/.65));aspect-ratio:1/1;height:auto;min-height:100px}
.post .content{display:grid;gap:.25rem;align-content:start}
.post h3 a{color:hsl(var(--text));text-decoration:none}
.post h3 a:visited{color:hsl(var(--text))}
.post h3 a:hover{text-decoration:underline}
.post h3 a:focus-visible{outline:2px solid currentColor;outline-offset:2px;border-radius:6px}
.skeleton{position:relative;overflow:hidden}.skeleton-thumb{height:140px;border-radius:var(--radius-sm);background:hsl(var(--text)/.08)}.skeleton-lines{display:grid;gap:.5rem;margin-top:.75rem}.line{height:12px;border-radius:8px;background:hsl(var(--text)/.08)}.w-90{width:90%}.w-80{width:80%}.w-75{width:75%}.w-60{width:60%}.w-55{width:55%}.w-50{width:50%}.w-40{width:40%}.w-35{width:35%}.w-30{width:30%}
.shimmer{position:relative;overflow:hidden}.shimmer::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,hsl(var(--text)/.06),transparent);animation:shimmer 1.25s infinite}@keyframes shimmer{to{transform:translateX(100%)}}
.gradient-text{background:linear-gradient(135deg,hsl(var(--brand-primary)),hsl(var(--brand-secondary)));-webkit-background-clip:text;background-clip:text;color:transparent}
@media (max-width:1000px){.grid-3{grid-template-columns:1fr 1fr}.footer-grid{grid-template-columns:1fr 1fr}.post{grid-template-columns:1fr}}
@media (max-width:640px){.grid-3{grid-template-columns:1fr}.blog-grid{grid-template-columns:1fr}.nav{grid-template-columns:1fr auto;grid-auto-flow:row}.nav-list{display:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Extra padding for latest section to avoid visual overflow of shadows at various zooms */
#latest { padding-bottom: 4rem; }

/* Post cover */
.post-cover { margin: 1rem 0 1.5rem; }
.post-cover img { width: 100%; height: auto; border-radius: 16px; display: block; }

/* Line clamp utility */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-clamp: 2; }

/* Bots row */
.bots-row { margin-top: 1.5rem; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.bot-card { display: grid; grid-template-columns: auto 1fr; gap: .75rem; align-items: center; height: 100%; }
.bots-row > * { height: 100%; }
.bot-media img { border-radius: 12px; background: hsl(var(--text)/.06); }
.bot-body { display: grid; gap: .25rem; align-content: start; grid-template-rows: auto 1fr auto; }
.bot-body .btn { margin-top: .6rem; }
@media (max-width: 1000px){ .bots-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px){ .bots-row { grid-template-columns: 1fr; } }

/* Equal height post cards on homepage and pinned button */
.blog-grid { align-items: stretch; }
.equal-post { display: grid; grid-template-columns: 140px 1fr; gap: .75rem; align-items: stretch; height: 100%; }
.equal-post.card { padding: .9rem; }
.equal-post .thumb { aspect-ratio: 1 / 1; height: auto; min-height: 100px; }
.stick-bottom { display: flex; flex-direction: column; }
.stick-bottom .read-btn { margin-top: auto; align-self: flex-start; }
@media (max-width: 1000px){ .equal-post { grid-template-columns: 1fr; } }

/* Bots page grid */
.bots-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.bots-grid > * { height: 100%; }
@media (max-width: 1000px){ .bots-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px){ .bots-grid { grid-template-columns: 1fr; } }

/* Footer SEO pairs */
.seo-pair a{color:inherit}
.seo-pair a:visited{color:inherit}

/* Footer SEO pairs */
.seo-pair a { color: inherit; }
.pros { margin: .25rem 0 0; padding-left: 1.1rem; }

/* Reusable badge style */
.hero-badge { display: inline-block; padding: .25rem .6rem; border-radius: 999px; background: hsl(var(--text)/.08); color: hsl(var(--text)); font-size: .85rem; }
