@property --grad-angle{
  syntax:'<angle>';
  inherits:true;
  initial-value:96deg;
}

:root{
  --bg:#faf9f6;
  --bg-alt:#f4f2ec;
  --ink:#17171c;
  --ink-2:#3a3a42;
  --ink-3:#2a2a32;
  --muted:#54545e;
  --muted-2:#5c5c66;
  --mono-ink:#8a8a93;
  --line:#e8e6df;
  --line-2:#e6e4dc;
  --violet:#8b5cf6;
  --violet-deep:#7c3aed;
  --grad:linear-gradient(96deg,#4d5cff 0%,#8b5cf6 55%,#a855f7 100%);
  --grad-btn:linear-gradient(96deg,#4d5cff,#8b5cf6 65%,#a855f7);
  --grad-btn-lg:linear-gradient(96deg,#5b6bff,#8b5cf6 65%,#a855f7);
  --grad-badge:linear-gradient(140deg,#4d5cff,#a855f7);
  --font:'Hanken Grotesk',sans-serif;
  --mono:'JetBrains Mono',monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:auto}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}

/* lenis smooth-scroll */
html.lenis,html.lenis body{height:auto}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-smooth iframe{pointer-events:none}
a{color:var(--ink);text-decoration:none}
a:hover{color:#5b5cf0}
img{display:block}

@keyframes riseIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ---- page shell ---- */
.page{width:100%;min-width:320px;color:var(--ink);background:var(--bg);overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none}

/* ---- shared layout helpers ---- */
.wrap{width:100%;max-width:1280px;margin:0 auto;padding-left:clamp(20px,5vw,48px);padding-right:clamp(20px,5vw,48px)}
.section{border-top:1px solid var(--line)}
.section--alt{background:var(--bg-alt)}
.sec-pad{padding-top:clamp(64px,9vw,100px);padding-bottom:clamp(64px,9vw,100px)}

.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--mono-ink)}
.eyebrow--violet{color:var(--violet)}
.link-arrow{display:inline-flex;align-items:center;gap:9px;font-size:16px;font-weight:600;color:var(--ink)}
.link-arrow .arw{color:var(--violet)}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--font);font-weight:600;cursor:pointer;white-space:nowrap;border:none}
.btn-dark{height:40px;padding:0 20px;border-radius:8px;background:var(--ink);color:#fff;font-weight:500;font-size:15px;transition:background .2s ease}
.btn-dark:hover{background:#333340;color:#fff}
.btn-gradient{--grad-angle:96deg;height:52px;padding:0 28px;border-radius:9px;background:linear-gradient(var(--grad-angle),#4d5cff,#8b5cf6 65%,#a855f7);color:#fff;font-size:16px;letter-spacing:.01em;box-shadow:0 10px 30px -12px rgba(109,76,232,.6);transition:--grad-angle .4s ease}
.btn-gradient-lg{--grad-angle:96deg;height:56px;padding:0 32px;border-radius:10px;background:linear-gradient(var(--grad-angle),#5b6bff,#8b5cf6 65%,#a855f7);color:#fff;font-size:17px;box-shadow:0 14px 40px -14px rgba(139,92,246,.7);transition:--grad-angle .4s ease}
.btn-gradient:hover,.btn-gradient-lg:hover{--grad-angle:276deg;color:#fff}
.btn-gradient-sm{--grad-angle:96deg;height:48px;padding:0 24px;border-radius:9px;background:linear-gradient(var(--grad-angle),#4d5cff,#8b5cf6 65%,#a855f7);color:#fff;font-size:15px;box-shadow:0 10px 30px -12px rgba(109,76,232,.6);transition:--grad-angle .4s ease}
.btn-gradient-sm:hover{--grad-angle:276deg;color:#fff}

/* ---- header ---- */
.site-header{position:fixed;top:0;left:0;right:0;z-index:50;transition:transform .45s cubic-bezier(.4,0,.2,1);will-change:transform}
.header-spacer{height:116px}

.announce-bar{position:relative;display:flex;align-items:center;justify-content:center;gap:16px;min-height:40px;padding:8px 52px;background:#111117;color:#e9e9ef;font-size:13px;letter-spacing:.01em;text-align:center}
.announce-tag{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#8b8cf0}
.announce-text{color:#c9c9d2}
.announce-link{color:#fff;border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:1px;white-space:nowrap}
.announce-dismiss{position:absolute;right:clamp(14px,3vw,26px);top:50%;transform:translateY(-50%);background:none;border:none;color:#7a7a86;font-size:16px;cursor:pointer;padding:4px;line-height:1}

.nav-glass{position:relative;z-index:40;background:rgba(250,249,246,.5);-webkit-backdrop-filter:saturate(170%) blur(20px);backdrop-filter:saturate(170%) blur(20px)}
.nav{width:100%;max-width:1280px;margin:0 auto;position:relative;height:76px;padding:0 clamp(20px,5vw,48px);display:flex;align-items:center;justify-content:space-between}
.nav-logo{display:flex;align-items:center}
.nav-logo img{height:50px;width:auto}
.nav-links{display:flex;align-items:center;gap:40px;font-size:15px;font-weight:500;color:var(--ink-2)}
.nav-link{color:var(--ink-2)}
.nav-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:0;background:none;border:none;cursor:pointer}
.nav-burger span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px}
.nav-panel{display:none;position:absolute;top:76px;left:0;right:0;z-index:50;background:var(--bg);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:8px clamp(20px,5vw,48px) 20px;flex-direction:column;gap:4px;box-shadow:0 20px 40px -24px rgba(20,20,40,.3)}
.nav-panel a{padding:14px 4px;font-size:17px;font-weight:500;color:var(--ink-2);border-bottom:1px solid #ece9e1}
.nav-panel .btn-panel{margin-top:12px;height:50px;border-radius:9px;background:var(--ink);color:#fff;font-size:16px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;border-bottom:none}

/* ---- blog preview ---- */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.post-card{display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--line-2);border-radius:14px;overflow:hidden;color:var(--ink)}
.post-card:hover{border-color:#b9a8f0}
.post-cover{aspect-ratio:4/3;border-bottom:1px solid var(--line-2);background:#eceae2;display:flex;align-items:center;justify-content:center;overflow:hidden}
.post-cover img{width:100%;height:100%;object-fit:cover}
.post-cover-ph{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:#a4a49c}
.post-body{padding:clamp(24px,3vw,30px);display:flex;flex-direction:column;gap:14px;flex:1}
.post-meta{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:#9a9aa2}
.post-cat{color:var(--violet);text-transform:uppercase;letter-spacing:.1em}
.post-title{margin:0;font-size:clamp(19px,1.6vw,22px);font-weight:600;letter-spacing:-.01em;line-height:1.25;text-wrap:pretty}
.post-excerpt{margin:0;font-size:15px;line-height:1.55;color:var(--muted-2)}
.post-empty{grid-column:1/-1;margin:0;font-size:16px;color:#7a7a84}

/* ---- footer ---- */
.footer{background:#08080b;color:#c9c9d2}
.footer-grid{width:100%;max-width:1280px;margin:0 auto;padding:clamp(56px,7vw,84px) clamp(20px,5vw,48px) 40px;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:clamp(32px,4vw,48px)}
.footer-logo{display:flex;align-items:center;margin-bottom:18px}
.footer-logo img{height:45px;width:auto}
.footer-tagline{margin:0;font-size:14.5px;line-height:1.6;color:#7a7a86;max-width:280px}
.footer-col{display:flex;flex-direction:column;gap:14px}
.footer-head{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#6a6a76}
.footer-link{font-size:14.5px;color:#c9c9d2}
.footer-bottom{width:100%;max-width:1280px;margin:0 auto;padding:0 clamp(20px,5vw,48px) 40px}
.footer-legal{border-top:1px solid rgba(255,255,255,.08);padding-top:26px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:#6a6a76}
.footer-loc{font-family:var(--mono);letter-spacing:.04em}
.footer-legal-right{display:flex;align-items:center;gap:16px}
.footer-social{display:flex;align-items:center;gap:12px}
.footer-social-link{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;border:1px solid rgba(255,255,255,.12);color:#c9c9d2;font-size:14px;transition:color .15s,border-color .15s,background .15s}
.footer-social-link:hover{color:#fff;border-color:rgba(139,92,246,.6);background:rgba(139,92,246,.12)}
.edge-bar{height:6px;background:linear-gradient(90deg,#4d5cff,#8b5cf6 50%,#a855f7)}

@media (max-width:960px){
  .blog-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr;row-gap:36px}
}
@media (max-width:640px){
  .nav-links{gap:20px}
  .nav-link{display:none}
  .nav-demo{display:none}
  .nav-burger{display:flex}
}