/* Aviral Jain — aviraljain.com
   Tokens: OKLCH, warm-tinted neutrals, one committed green + amber highlight.
   Glass procedure: translucent fill + 1px translucent border + inset top hairline + backdrop blur,
   over a fixed fan of blurred ellipses (Stripe-style ribbons) so the blur has colour to work with.
   Cursor: a difference-blended bubble that lags the pointer; the glass cards carry a hairline
   that follows the pointer through a radial mask (Linear-style). */

/* Palette: Color Hunt "425b9a · 76c0ec · fff6dc · ff95a5" (https://colorhunt.co/palette/425b9a76c0ecfff6dcff95a5)
   royal blue #425b9a · sky #76c0ec · cream #fff6dc · pink #ff95a5, converted to OKLCH; navy base for dark mode. */
:root{
  --bg:oklch(97.5% 0.03 92);            /* cream #fff6dc */
  --ink:oklch(24% 0.06 268);            /* deep navy text */
  --muted:oklch(46% 0.05 268);
  --line:oklch(88% 0.03 268);
  --primary:oklch(46% 0.11 268);        /* royal blue #425b9a */
  --primary-hover:oklch(40% 0.11 268);
  --primary-ink:oklch(98% 0.01 92);
  --primary-soft:oklch(92% 0.04 262);
  --accent:oklch(80% 0.12 12);          /* pink #ff95a5 */
  --accent-ink:oklch(24% 0.06 268);
  --band:oklch(24% 0.07 268);           /* navy */
  --band-ink:oklch(97% 0.02 92);
  --band-muted:oklch(80% 0.04 262);

  /* glass */
  --glass:oklch(100% 0 0 / .55);
  --glass-strong:oklch(100% 0 0 / .72);
  --glass-border:oklch(100% 0 0 / .8);
  --glass-edge:oklch(24% 0.06 268 / .10);
  --glass-hair:oklch(100% 0 0 / .95);
  --glass-blur:18px;
  --glass-shadow:0 1px 2px oklch(24% 0.06 268 / .06),0 18px 40px -20px oklch(24% 0.08 268 / .35);

  /* ribbons */
  --r1:oklch(78% 0.10 235);             /* sky #76c0ec */
  --r2:oklch(80% 0.13 12);              /* pink #ff95a5 */
  --r3:oklch(62% 0.13 268);             /* royal blue */
  --r4:oklch(93% 0.07 92);              /* cream-yellow */
  --ribbon-opacity:.95;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:oklch(19% 0.07 268);           /* navy #0d1c42 */
    --ink:oklch(96% 0.02 92);           /* cream */
    --muted:oklch(78% 0.03 262);
    --line:oklch(32% 0.06 268);
    --primary:oklch(78% 0.10 235);      /* sky #76c0ec */
    --primary-hover:oklch(84% 0.10 235);
    --primary-ink:oklch(18% 0.07 268);
    --primary-soft:oklch(32% 0.07 255);
    --accent:oklch(80% 0.13 12);        /* pink */
    --accent-ink:oklch(20% 0.07 268);
    --band:oklch(13% 0.06 268);
    --band-ink:oklch(96% 0.02 92);
    --band-muted:oklch(76% 0.04 262);
    --glass:oklch(100% 0 0 / .08);
    --glass-strong:oklch(100% 0 0 / .13);
    --glass-border:oklch(100% 0 0 / .2);
    --glass-edge:oklch(0% 0 0 / .35);
    --glass-hair:oklch(100% 0 0 / .5);
    --glass-shadow:0 1px 2px oklch(0% 0 0 / .4),0 24px 48px -24px oklch(0% 0 0 / .7);
    --r1:oklch(64% 0.14 235);
    --r2:oklch(68% 0.17 12);
    --r3:oklch(52% 0.16 268);
    --r4:oklch(82% 0.10 92);
    --ribbon-opacity:.6;
  }
}
:root[data-theme="dark"]{
  --bg:oklch(19% 0.07 268);--ink:oklch(96% 0.02 92);--muted:oklch(78% 0.03 262);--line:oklch(32% 0.06 268);
  --primary:oklch(78% 0.10 235);--primary-hover:oklch(84% 0.10 235);--primary-ink:oklch(18% 0.07 268);--primary-soft:oklch(32% 0.07 255);
  --accent:oklch(80% 0.13 12);--accent-ink:oklch(20% 0.07 268);--band:oklch(13% 0.06 268);--band-ink:oklch(96% 0.02 92);--band-muted:oklch(76% 0.04 262);
  --glass:oklch(100% 0 0 / .08);--glass-strong:oklch(100% 0 0 / .13);--glass-border:oklch(100% 0 0 / .2);--glass-edge:oklch(0% 0 0 / .35);--glass-hair:oklch(100% 0 0 / .5);
  --glass-shadow:0 1px 2px oklch(0% 0 0 / .4),0 24px 48px -24px oklch(0% 0 0 / .7);
  --r1:oklch(64% 0.14 235);--r2:oklch(68% 0.17 12);--r3:oklch(52% 0.16 268);--r4:oklch(82% 0.10 92);--ribbon-opacity:.6;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font:16px/1.55 "DM Sans",system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;position:relative}
a{color:inherit}
img,svg{display:block;max-width:100%}
.wrap{max-width:1120px;margin:0 auto;padding-left:16px;padding-right:16px;position:relative}
@media(min-width:760px){.wrap{padding-left:32px;padding-right:32px}}
h1,h2,h3,.display{font-family:"Bricolage Grotesque","DM Sans",sans-serif;letter-spacing:-.015em;line-height:1.08}
h2{font-size:clamp(28px,4.2vw,40px);font-weight:700;max-width:22ch}
h3{font-size:20px;font-weight:700;letter-spacing:-.01em}
p{max-width:62ch}
.muted{color:var(--muted)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:focus-visible{outline:2px solid var(--primary);outline-offset:3px}

/* ---------- Background: fan of blurred ribbons, fixed ---------- */
.bgfx{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:var(--bg)}
.ribbon{position:absolute;top:-30%;left:30%;width:34%;height:220%;margin-left:-17%;border-radius:50%;transform-origin:50% 0;opacity:var(--ribbon-opacity);will-change:transform}
.ribbon.r1{background:var(--r1);rotate:-52deg;filter:blur(70px)}
.ribbon.r2{background:var(--r2);rotate:-74deg;filter:blur(60px)}
.ribbon.r3{background:var(--r3);rotate:-96deg;filter:blur(66px);left:36%}
.ribbon.r4{background:var(--r4);rotate:-118deg;filter:blur(80px);left:42%}
.bgfx .orb{position:absolute;right:-12%;bottom:-18%;width:46vw;height:46vw;border-radius:50%;background:radial-gradient(circle at 35% 35%,var(--r1),transparent 62%);filter:blur(40px);opacity:calc(var(--ribbon-opacity) * .9)}
@media (prefers-reduced-motion:no-preference){
  .ribbon{animation:drift 26s ease-in-out infinite alternate}
  .ribbon.r2{animation-duration:31s}.ribbon.r3{animation-duration:37s}.ribbon.r4{animation-duration:43s}
  @keyframes drift{from{translate:0 0}to{translate:-3% 2%}}
}

/* ---------- Glass primitive ---------- */
.glass{
  position:relative;
  background:var(--glass);
  border:1px solid var(--glass-border);
  box-shadow:inset 0 1px 0 var(--glass-hair),0 0 0 1px var(--glass-edge),var(--glass-shadow);
  backdrop-filter:blur(var(--glass-blur)) saturate(1.5);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.5);
  border-radius:18px;
}
.glass.strong{background:var(--glass-strong)}
/* hairline that follows the pointer (radial mask on a second border) */
.glass.track::after{
  content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
  border:1px solid var(--primary);opacity:0;transition:opacity .25s ease;
  -webkit-mask-image:radial-gradient(220px 220px at var(--x,50%) var(--y,50%),#000 0%,#0009 30%,#0003 50%,#0000 70%);
  mask-image:radial-gradient(220px 220px at var(--x,50%) var(--y,50%),#000 0%,#0009 30%,#0003 50%,#0000 70%);
}
.glass.track:hover::after{opacity:1}

/* ---------- Contact strip (top) ---------- */
.contactbar{background:var(--band);color:var(--band-ink);font-size:14px;position:relative;z-index:21}
.contactbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding-top:6px;padding-bottom:6px}
.contactbar .where{display:none;color:var(--band-muted)}
@media(min-width:760px){.contactbar .where{display:inline-flex;align-items:center;gap:6px}}
.contactbar ul{list-style:none;display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.contactbar a{display:inline-flex;align-items:center;gap:7px;text-decoration:none;padding:6px 10px;border-radius:8px;min-height:32px;color:var(--band-ink)}
.contactbar a:hover{background:oklch(100% 0 0 / .08)}
.contactbar a span{display:none}
@media(min-width:900px){.contactbar a span{display:inline}}
.contactbar svg{width:16px;height:16px;fill:currentColor}

/* ---------- Nav (glass, Linear-style graded translucent + blur) ---------- */
nav.main{position:sticky;top:0;z-index:20;background:linear-gradient(to bottom,color-mix(in oklab,var(--bg) 78%,transparent),color-mix(in oklab,var(--bg) 62%,transparent));backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);border-bottom:1px solid var(--glass-border);box-shadow:inset 0 -1px 0 var(--glass-edge)}
nav.main .wrap{display:flex;align-items:center;justify-content:space-between;min-height:64px}
.brand{text-decoration:none;display:flex;align-items:center;gap:10px;font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:18px}
.brand .mark{width:32px;height:32px;border-radius:9px;background:var(--primary);color:var(--primary-ink);display:grid;place-items:center;font-size:13px;font-weight:800;letter-spacing:0}
.navlinks{display:flex;gap:4px;align-items:center}
.navlinks a{text-decoration:none;font-size:15px;font-weight:500;color:var(--muted);padding:8px 10px;border-radius:8px}
.navlinks a:hover{color:var(--ink);background:var(--glass)}
.navlinks a.hide-sm{display:none}
@media(min-width:640px){.navlinks a.hide-sm{display:inline-block}}
.navlinks .btn{margin-left:6px}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 20px;border-radius:12px;font-weight:600;font-size:15px;text-decoration:none;border:1px solid var(--glass-border);background:var(--glass-strong);color:var(--ink);cursor:pointer;white-space:nowrap;transition:transform .12s ease,background .12s ease;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:inset 0 1px 0 var(--glass-hair)}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:var(--primary);color:var(--primary-ink);border-color:transparent;box-shadow:inset 0 1px 0 oklch(100% 0 0/.25),0 8px 20px -10px var(--primary)}
.btn.primary:hover{background:var(--primary-hover)}
.btn.sm{min-height:38px;padding:0 14px;font-size:14px;border-radius:10px}
.btn svg{width:18px;height:18px;fill:currentColor}

/* ---------- Hero ---------- */
.hero{padding:52px 0 60px}
@media(min-width:900px){.hero{padding:80px 0 88px}}
.hero .wrap{display:grid;gap:40px;align-items:center}
@media(min-width:900px){.hero .wrap{grid-template-columns:7fr 5fr;gap:56px}}
.hero h1{font-size:clamp(38px,6.8vw,68px);font-weight:800;max-width:14ch;margin-bottom:18px}
.hero h1 mark{background:linear-gradient(transparent 62%,var(--accent) 62%);color:inherit;padding:0 .04em}
.hero .lead{font-size:clamp(17px,2vw,20px);color:var(--muted);max-width:44ch;margin-bottom:28px}
.hero .ctas{display:flex;flex-wrap:wrap;gap:12px}
.hero .ctas .btn{flex:1 1 auto}
@media(min-width:480px){.hero .ctas .btn{flex:0 0 auto}}
.hero .crumbs{font-size:13.5px;color:var(--muted);margin-bottom:18px}
.hero .crumbs a{text-decoration:none}
.hero .crumbs a:hover{color:var(--ink)}

/* Chat card: the product, not a stock image */
.chat{padding:16px;display:flex;flex-direction:column;gap:10px;max-width:420px;margin:0 auto}
.chat .head{display:flex;align-items:center;gap:10px;padding-bottom:10px;border-bottom:1px solid var(--glass-border);font-size:13px;color:var(--muted)}
.chat .head b{color:var(--ink);font-weight:600}
.chat .head .dot{width:9px;height:9px;border-radius:50%;background:oklch(78% 0.10 235);margin-left:auto;box-shadow:0 0 0 3px oklch(78% 0.10 235/.3)}
.bubble{max-width:86%;padding:10px 13px;border-radius:14px;font-size:14.5px;line-height:1.45}
.bubble.them{align-self:flex-start;background:var(--glass-strong);border:1px solid var(--glass-border);border-bottom-left-radius:4px}
.bubble.me{align-self:flex-end;background:var(--primary);color:var(--primary-ink);border-bottom-right-radius:4px}
.bubble small{display:block;margin-top:4px;font-size:11px;opacity:.7}

/* ---------- How it works ---------- */
.how{padding:40px 0 56px}
.how ol{list-style:none;counter-reset:s;display:grid;gap:20px;margin-top:28px}
@media(min-width:760px){.how ol{grid-template-columns:1.2fr 1fr 1fr;gap:28px}}
.how li{counter-increment:s;padding-left:54px;position:relative}
.how li::before{content:counter(s);position:absolute;left:0;top:-2px;width:40px;height:40px;border-radius:12px;background:var(--accent);color:var(--accent-ink);font:700 18px/40px "Bricolage Grotesque",sans-serif;text-align:center;box-shadow:inset 0 1px 0 oklch(100% 0 0/.5)}
.how h3{margin-bottom:6px}
.how p{color:var(--muted);font-size:15.5px}

/* ---------- Packages (bento, 5 items = 5 cells) ---------- */
.packages{padding:64px 0 72px}
@media(min-width:900px){.packages{padding:88px 0 96px}}
.packages .intro{display:grid;gap:12px;margin-bottom:36px}
@media(min-width:900px){.packages .intro{grid-template-columns:1fr 1fr;align-items:end}}
.packages .intro p{color:var(--muted);font-size:17px}
.bento{display:grid;gap:16px}
@media(min-width:760px){.bento{grid-template-columns:repeat(6,1fr)}
  .pkg:nth-child(1){grid-column:span 3}.pkg:nth-child(2){grid-column:span 3}
  .pkg:nth-child(3),.pkg:nth-child(4),.pkg:nth-child(5){grid-column:span 2}}
.pkg{padding:24px;display:flex;flex-direction:column;gap:14px}
.pkg.featured{background:color-mix(in oklab,var(--band) 86%,transparent);color:var(--band-ink);border-color:oklch(100% 0 0/.18)}
.pkg.featured .muted,.pkg.featured .for,.pkg.featured li{color:var(--band-muted)}
.pkg.featured .tag{background:var(--accent);color:var(--accent-ink)}
.pkg .tag{align-self:flex-start;font-size:12px;font-weight:600;padding:4px 9px;border-radius:999px;background:var(--primary-soft);color:var(--primary)}
.pkg h3{font-size:22px}
.pkg .for{font-size:15px;color:var(--muted)}
.pkg ul{list-style:none;display:grid;gap:7px;font-size:15px;margin-top:2px}
.pkg li{padding-left:22px;position:relative;color:var(--ink)}
.pkg li::before{content:"";position:absolute;left:0;top:7px;width:12px;height:12px;background:var(--primary);mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat}
.pkg.featured li::before{background:var(--accent)}
.pkg .actions{margin-top:auto;display:flex;flex-wrap:wrap;gap:8px;padding-top:6px}
.pkg.featured .btn:not(.primary){background:oklch(100% 0 0/.08);color:var(--band-ink);border-color:oklch(100% 0 0/.22)}
.pkg.featured .btn.primary{background:var(--accent);color:var(--accent-ink);box-shadow:none}
.pkg .more{font-size:14px;font-weight:600;color:var(--primary);text-decoration:none}
.pkg.featured .more{color:var(--accent)}

/* ---------- AI in plain words ---------- */
.ai{padding:72px 0 64px}
.ai .wrap{display:grid;gap:36px}
@media(min-width:900px){.ai .wrap{grid-template-columns:5fr 7fr;gap:64px;align-items:start}}
.ai .sticky{position:sticky;top:88px}
.ai .sticky p{color:var(--muted);font-size:17px;margin-top:14px}
.ai .stats{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:26px}
.stat{border-left:3px solid var(--accent);padding-left:12px}
.stat b{display:block;font-family:"Bricolage Grotesque",sans-serif;font-size:28px;line-height:1.1}
.stat span{font-size:13px;color:var(--muted)}
.uses{display:grid;gap:12px}
@media(min-width:600px){.uses{grid-template-columns:1fr 1fr}}
.use{padding:18px 18px 16px;border-radius:14px}
.use .ico{width:36px;height:36px;border-radius:10px;background:var(--primary-soft);color:var(--primary);display:grid;place-items:center;margin-bottom:12px}
.use .ico svg{width:20px;height:20px;fill:currentColor}
.use h3{font-size:17px;margin-bottom:4px}
.use p{font-size:14.5px;color:var(--muted)}

/* ---------- Work (list) ---------- */
.work{padding:56px 0 72px}
.work .rows{margin-top:28px;padding:4px 24px}
.row{display:grid;gap:6px;padding:20px 0;border-bottom:1px solid var(--glass-border)}
.row:last-child{border-bottom:0}
@media(min-width:760px){.row{grid-template-columns:2fr 5fr 2fr;gap:24px;align-items:baseline}}
.row h3{font-size:18px}
.row p{color:var(--muted);font-size:15px}
.row .num{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:22px;color:var(--primary)}
.row .num small{display:block;font:500 12.5px/1.3 "DM Sans",sans-serif;color:var(--muted)}
.row a{color:var(--primary);font-weight:600;text-decoration:none;font-size:14px}

/* ---------- Long-form local SEO copy ---------- */
.local{padding:56px 0 64px}
.local .cols{display:grid;gap:28px;margin-top:24px}
@media(min-width:900px){.local .cols{grid-template-columns:1fr 1fr;gap:48px}}
.local h3{font-size:19px;margin:22px 0 8px}
.local h3:first-child{margin-top:0}
.local p{color:var(--muted);font-size:15.5px;margin-bottom:10px;max-width:none}
.local .areas{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.local .areas span{font-size:13px;padding:5px 10px;border-radius:999px;background:var(--glass-strong);border:1px solid var(--glass-border)}

/* ---------- FAQ ---------- */
.faq{padding:56px 0 64px}
.faq .wrap{display:grid;gap:28px}
@media(min-width:900px){.faq .wrap{grid-template-columns:4fr 8fr;gap:56px}}
.faq .list{padding:6px 22px}
.faq details{border-bottom:1px solid var(--glass-border);padding:4px 0}
.faq details:last-child{border-bottom:0}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center;padding:14px 0;font-weight:600;font-size:16.5px;font-family:"Bricolage Grotesque",sans-serif}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:22px;color:var(--muted);flex:none;width:28px;text-align:center}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 0 16px;color:var(--muted);font-size:15.5px;max-width:60ch}

/* ---------- Quote form ---------- */
.quote{padding:72px 0 80px;background:color-mix(in oklab,var(--band) 90%,transparent);color:var(--band-ink);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid oklch(100% 0 0/.12)}
.quote .wrap{display:grid;gap:32px}
@media(min-width:900px){.quote .wrap{grid-template-columns:5fr 6fr;gap:64px;align-items:start}}
.quote h2{color:var(--band-ink)}
.quote .alt{margin-top:22px;display:grid;gap:10px;font-size:15px;color:var(--band-muted)}
.quote .alt a{color:var(--band-ink);text-decoration:none;display:inline-flex;align-items:center;gap:8px;font-weight:500}
.quote .alt svg{width:16px;height:16px;fill:currentColor}
form.q{background:var(--glass-strong);color:var(--ink);border-radius:18px;padding:22px;display:grid;gap:14px;border:1px solid var(--glass-border);box-shadow:inset 0 1px 0 var(--glass-hair),var(--glass-shadow);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur))}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) form.q{color:var(--band-ink)}}
:root[data-theme="dark"] form.q{color:var(--band-ink)}
@media(min-width:600px){form.q{padding:28px}}
.q label{display:grid;gap:6px;font-size:14px;font-weight:600}
.q input,.q select,.q textarea{font:inherit;font-size:15px;padding:11px 12px;border:1px solid var(--glass-border);border-radius:10px;background:var(--glass);color:inherit;width:100%;min-height:44px}
.q select option{color:#1b1a17}
.q textarea{min-height:110px;resize:vertical}
.q .two{display:grid;gap:14px}
@media(min-width:600px){.q .two{grid-template-columns:1fr 1fr}}
.q .fine{font-size:12.5px;color:var(--muted)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .q .fine{color:var(--band-muted)}}
:root[data-theme="dark"] .q .fine{color:var(--band-muted)}

/* ---------- Footer ---------- */
footer{padding:36px 0 48px;font-size:14px;color:var(--muted)}
footer .wrap{display:grid;gap:18px}
@media(min-width:760px){footer .wrap{grid-template-columns:1fr auto;align-items:start}}
footer address{font-style:normal;line-height:1.7}
footer address b{color:var(--ink)}
footer .links{display:flex;flex-wrap:wrap;gap:14px}
footer .links a{text-decoration:none}
footer .links a:hover{color:var(--ink)}

/* ---------- Service pages ---------- */
.svc{padding:48px 0 24px}
.svc .grid{display:grid;gap:16px;margin-top:24px}
@media(min-width:760px){.svc .grid{grid-template-columns:1fr 1fr}}
.svc .card{padding:22px}
.svc .card h3{margin-bottom:6px;font-size:18px}
.svc .card p{color:var(--muted);font-size:15px}
.prose{padding:24px 0 56px}
.prose .glass{padding:28px 24px}
@media(min-width:760px){.prose .glass{padding:36px 40px}}
.prose h2{font-size:clamp(24px,3.4vw,32px);margin-bottom:10px}
.prose h3{font-size:19px;margin:22px 0 8px}
.prose p{color:var(--muted);font-size:16px;margin-bottom:12px;max-width:70ch}
.prose ul{margin:0 0 12px 20px;color:var(--muted);font-size:16px;max-width:70ch}
.prose li{margin-bottom:4px}
.prose a{color:var(--primary);font-weight:600}
.related{padding:0 0 56px}
.related .glass{padding:22px 24px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.related .glass span{font-weight:600;margin-right:6px}

/* ---------- Floating WhatsApp on phones ---------- */
.fab{position:fixed;right:16px;bottom:16px;z-index:30;display:inline-flex;align-items:center;gap:8px;background:var(--primary);color:var(--primary-ink);padding:12px 16px;border-radius:999px;font-weight:600;font-size:14px;text-decoration:none;box-shadow:var(--glass-shadow)}
.fab svg{width:20px;height:20px;fill:currentColor}
@media(min-width:900px){.fab{display:none}}

/* ---------- Bubble cursor (fine pointers only) ---------- */
.cursor,.cursor-dot{display:none}
@media (hover:hover) and (pointer:fine){
  body.has-cursor{cursor:none}
  body.has-cursor a,body.has-cursor button,body.has-cursor summary,body.has-cursor label,body.has-cursor input,body.has-cursor select,body.has-cursor textarea{cursor:none}
  .cursor{display:block;position:fixed;left:0;top:0;z-index:9999;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;pointer-events:none;
    background:oklch(100% 0 0 / .9);mix-blend-mode:difference;
    backdrop-filter:blur(3px) saturate(1.8);-webkit-backdrop-filter:blur(3px) saturate(1.8);
    transition:width .25s ease,height .25s ease,margin .25s ease,opacity .3s ease;will-change:transform;opacity:0}
  .cursor-dot{display:block;position:fixed;left:0;top:0;z-index:10000;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:oklch(100% 0 0);mix-blend-mode:difference;pointer-events:none;will-change:transform;opacity:0}
  body.cursor-in .cursor,body.cursor-in .cursor-dot{opacity:1}
  body.cursor-link .cursor{width:64px;height:64px;margin:-32px 0 0 -32px}
  body.cursor-text .cursor{width:4px;height:36px;margin:-18px 0 0 -2px;border-radius:2px}
  body.cursor-down .cursor{width:30px;height:30px;margin:-15px 0 0 -15px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* ---------- Blog ---------- */
.post-hero{padding:44px 0 28px}
.post-hero .wrap{display:block;max-width:860px}
.post-hero h1{font-size:clamp(32px,5.2vw,52px);max-width:22ch}
.post-hero .lead{max-width:62ch}
.post-hero .meta{font-size:14px;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:6px}
.post-hero .meta b{color:var(--ink);font-weight:600}
.post{padding:0 0 56px}
.post .wrap{max-width:860px}
.post .glass{padding:28px 22px}
@media(min-width:760px){.post .glass{padding:40px 44px}}
.post .quick{border-left:4px solid var(--accent);background:var(--glass-strong);border-radius:0 14px 14px 0;padding:16px 18px;margin-bottom:28px}
.post .quick b{display:block;font-family:"Bricolage Grotesque",sans-serif;font-size:14px;letter-spacing:.04em;text-transform:uppercase;color:var(--primary);margin-bottom:6px}
.post .quick p{color:var(--ink);font-size:16.5px;margin:0;max-width:none}
.post h2{font-size:clamp(22px,3vw,28px);margin:32px 0 10px;max-width:none}
.post h2:first-of-type{margin-top:0}
.post p{color:var(--muted);font-size:16.5px;line-height:1.65;margin-bottom:14px;max-width:70ch}
.post ul,.post ol{margin:0 0 14px 22px;color:var(--muted);font-size:16.5px;line-height:1.6;max-width:70ch}
.post li{margin-bottom:8px}
.post li strong,.post p strong{color:var(--ink)}
.post a{color:var(--primary);font-weight:600}
.post details{border-bottom:1px solid var(--glass-border);padding:2px 0}
.post details:last-of-type{border-bottom:0}
.post summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center;padding:12px 0;font-weight:600;font-size:16.5px;font-family:"Bricolage Grotesque",sans-serif}
.post summary::-webkit-details-marker{display:none}
.post summary::after{content:"+";font-size:22px;color:var(--muted);flex:none;width:28px;text-align:center}
.post details[open] summary::after{content:"–"}
.post details p{padding:0 0 14px;font-size:15.5px}
.post .endcta{margin-top:30px;padding:20px 22px;border-radius:14px;background:color-mix(in oklab,var(--band) 88%,transparent);color:var(--band-ink);display:grid;gap:12px}
.post .endcta p{color:var(--band-muted);margin:0}
.post .endcta b{color:var(--band-ink);font-family:"Bricolage Grotesque",sans-serif;font-size:19px}
.post .endcta .btn.primary{justify-self:start}
.post .byline{display:flex;align-items:center;gap:12px;margin-top:30px;padding-top:20px;border-top:1px solid var(--glass-border);font-size:14.5px;color:var(--muted)}
.post .byline .mark{width:40px;height:40px;border-radius:12px;background:var(--primary);color:var(--primary-ink);display:grid;place-items:center;font:800 14px "Bricolage Grotesque",sans-serif;flex:none}
.post .byline b{color:var(--ink)}
.bloglist{padding:8px 0 56px}
.bloglist .grid{display:grid;gap:16px}
@media(min-width:760px){.bloglist .grid{grid-template-columns:1fr 1fr}}
.bloglist .card{padding:24px;display:flex;flex-direction:column;gap:10px}
.bloglist .tag{align-self:flex-start;font-size:12px;font-weight:600;padding:4px 9px;border-radius:999px;background:var(--primary-soft);color:var(--primary)}
.bloglist h2{font-size:21px;max-width:none;line-height:1.2}
.bloglist h2 a{text-decoration:none}
.bloglist h2 a::after{content:"";position:absolute;inset:0}
.bloglist p{color:var(--muted);font-size:15px;flex:1}
.bloglist .meta{font-size:13px;color:var(--muted)}