:root{--bg:#f6f9fd;--surface:#ffffff;--text:#0f172a;--muted:#52627a;--accent:#0d9488;--accent-ink:#0f766e;--accent2:#2563eb;--border:#e1e8f2;--shadow:0 10px 30px -14px rgba(15,23,42,.18)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--text);font:1rem/1.65 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:radial-gradient(900px 520px at 88% -8%,rgba(20,184,166,.16),transparent 60%),radial-gradient(800px 520px at -6% 14%,rgba(59,130,246,.14),transparent 60%),var(--bg);background-attachment:fixed}
a{color:var(--accent-ink)}
.wrap{max-width:960px;margin:0 auto;padding:0 16px}
.bar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding-top:14px;padding-bottom:14px}
.site-header{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.78);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.brand{font-weight:800;font-size:1.15rem;letter-spacing:-.01em;color:var(--text);text-decoration:none}
.brand span{background:linear-gradient(90deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
nav{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
nav a:not(.btn){color:var(--muted);text-decoration:none;font-weight:500;position:relative}
nav a:not(.btn):hover{color:var(--text)}
nav a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:linear-gradient(90deg,var(--accent),var(--accent2));transform:scaleX(0);transition:transform .2s}
nav a:not(.btn):hover::after,nav a.active:not(.btn)::after{transform:scaleX(1)}
nav a.active:not(.btn){color:var(--text)}
.btn{display:inline-block;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;padding:11px 22px;border-radius:10px;font-weight:600;text-decoration:none;box-shadow:0 8px 22px -8px rgba(37,99,235,.55);transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px -8px rgba(37,99,235,.6)}
.btn.small{padding:7px 16px;color:#fff!important}
.btn.ghost{background:var(--surface);color:var(--text);border:1px solid var(--border);box-shadow:none}
.btn.ghost:hover{border-color:var(--accent)}
.hero{padding:64px 0 48px}
.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center}
h1{font-size:clamp(1.9rem,5vw,3rem);line-height:1.12;letter-spacing:-.02em;margin:.3em 0}
h2{font-size:clamp(1.5rem,3vw,2rem);letter-spacing:-.01em;margin:.2em 0 .8em}
.grad{background:linear-gradient(90deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{color:var(--muted);font-size:1.15rem;max-width:560px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;margin:0;color:var(--accent-ink);font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;border:1px solid var(--border);background:var(--surface);padding:4px 12px;border-radius:999px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(13,148,136,.2)}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.hero-art{width:100%;height:auto;filter:drop-shadow(0 24px 36px rgba(15,23,42,.16))}
.trail{stroke-dasharray:6 8;animation:dash 14s linear infinite}.t2{animation-duration:20s}
.pulse{animation:pulse 2.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes dash{to{stroke-dashoffset:-280}}
@keyframes pulse{50%{transform:scale(1.8);opacity:.5}}
.block{padding-top:40px;padding-bottom:40px}
.kicker{color:var(--accent-ink);font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin:0}
.prose{padding-top:40px;padding-bottom:56px}
.prose>p,.prose>ul,.prose>h2,.prose>pre{max-width:860px}
p,li,figcaption{text-wrap:pretty}
h1,h2,h3{text-wrap:balance}
.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.grid.two{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.stack{display:grid;gap:18px;margin:24px 0}
.card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:22px;box-shadow:var(--shadow);transition:transform .2s,border-color .2s,box-shadow .2s}
.card:hover{transform:translateY(-4px);border-color:rgba(13,148,136,.45);box-shadow:0 18px 38px -16px rgba(37,99,235,.28)}
.card h3{margin:0 0 .4em}.card p{margin:.3em 0;color:var(--muted)}
.ico{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:12px;color:var(--accent-ink);background:linear-gradient(135deg,rgba(20,184,166,.16),rgba(59,130,246,.14));margin-bottom:12px}
.more{font-weight:600;text-decoration:none}.more:hover{text-decoration:underline}
.band{background:linear-gradient(180deg,rgba(235,243,252,0),rgba(235,243,252,.7) 18%,rgba(235,243,252,.7) 82%,rgba(235,243,252,0));margin:0}
.steps{list-style:none;padding:0;margin:0;display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));counter-reset:s}
.steps li{position:relative;padding:22px;border-radius:16px;background:var(--surface);border:1px solid var(--border);counter-increment:s}
.steps li::before{content:"0" counter(s);position:absolute;top:14px;right:18px;font-weight:800;color:#d5deea;font-size:1.8rem}
.steps h3{margin:0 0 .3em}.steps p{margin:0;color:var(--muted)}
.shot{padding:12px}
.shot .crop{overflow:hidden;border-radius:10px;background:#f5f6fa}
.shot img{display:block;width:100%;height:auto}
.shot figcaption{color:var(--muted);font-size:.9rem;padding:10px 6px 2px}
.cta-panel{display:flex;gap:20px;align-items:center;flex-wrap:wrap;padding:28px;border-radius:20px;border:1px solid var(--border);background:linear-gradient(120deg,rgba(20,184,166,.16),rgba(59,130,246,.14))}
.cta-panel .ico{margin:0;background:var(--surface)}.cta-panel div{flex:1;min-width:240px}.cta-panel h2{margin:0 0 .2em}.cta-panel p{margin:0;color:var(--muted)}
.posts{list-style:none;padding:0}
.posts li{padding:12px 0;border-bottom:1px solid var(--border)}
.posts time,.meta{color:var(--muted);font-size:.9rem;margin-left:12px}.meta{margin-left:0}
.posts p{margin:.3em 0 0;color:var(--muted)}
.site-footer{border-top:1px solid var(--border);color:var(--muted);margin-top:40px;font-size:.9rem;background:rgba(255,255,255,.6)}
pre,code{background:#eaf0f8;border-radius:6px}code{padding:2px 6px}pre{padding:12px;overflow:auto}
@media (max-width:760px){.hero-grid{grid-template-columns:1fr}.art{order:-1;max-width:420px}}
/* richer sections */
.pills{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:28px 0 0}
.pills li{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 10px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--muted);font-size:.9rem;font-weight:500}
.pills .icon{width:18px;height:18px;color:var(--accent-ink)}
.sub{color:var(--muted);max-width:640px;margin:-.4em 0 1.4em}
.getshead{margin:1.2em 0 0;font-size:1rem;color:var(--accent-ink);text-transform:uppercase;letter-spacing:.08em}
.gets,.points{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.gets li,.points li{display:flex;gap:12px;align-items:flex-start;color:var(--muted);font-size:.95rem}
.gets .icon,.points .icon{flex:none;width:26px;height:26px;margin-top:2px;color:var(--accent-ink)}
.gets strong,.points strong{display:block;color:var(--text)}
.grid.mini{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-bottom:28px}
.grid.mini .card{padding:18px}.grid.mini .ico{width:40px;height:40px;margin-bottom:8px}.grid.mini .card p{font-size:.92rem}

/* full-screen snapping sections (home only, roomy screens) */
:root{--hh:64px}
@media (min-width:761px) and (min-height:600px){
  html.home{scroll-snap-type:y mandatory;scroll-padding-top:var(--hh)}
  .home main>section{min-height:calc(100svh - var(--hh));display:flex;flex-direction:column;justify-content:center;scroll-snap-align:start;scroll-snap-stop:always}
  .home main>.hero{padding:0}
  .home main>.band{margin:0}
  .home main>.band>.wrap,.home main>.hero>.wrap{width:100%}
  .home .site-footer{margin-top:0;scroll-snap-align:end}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html,html.home{scroll-behavior:auto;scroll-snap-type:none}}