/* Blog page — self-contained (its shared-class values differ slightly from base.css). */

:root{
  --background:oklch(1 0 0);--foreground:oklch(0.141 0.005 285.823);
  --card:oklch(1 0 0);--card-foreground:oklch(0.141 0.005 285.823);
  --primary:oklch(0.141 0.005 285.823);--primary-foreground:oklch(0.985 0 0);
  --secondary:oklch(0.967 0.001 286.375);--secondary-foreground:oklch(0.21 0.006 285.885);
  --muted:oklch(0.967 0.001 286.375);--muted-foreground:oklch(0.552 0.016 285.938);
  --border:oklch(0.92 0.004 286.32);--input:oklch(0.92 0.004 286.32);
  --ring:oklch(0.705 0.015 286.067);
  --radius:0.625rem;
  --r-2xl:calc(var(--radius)*1.8);
  --r-3xl:calc(var(--radius)*2.2);
  --r-4xl:calc(var(--radius)*2.6);
  --hair:oklch(1 0 0 / .22);
  --side:clamp(1.25rem,4vw,3.5rem);
}
*{box-sizing:border-box;border-color:var(--border);}
html{scroll-behavior:smooth;scroll-padding-top:var(--nav-h,5.5rem);}
body{
  margin:0;background:var(--background);color:var(--foreground);
  font-family:Inter,ui-sans-serif,system-ui,sans-serif;
  font-size:14px;-webkit-font-smoothing:antialiased;
}

/* ---------- shared ---------- */
.kicker{
  display:block;margin-bottom:1.25rem;
  color:var(--muted-foreground);
  font-size:.6875rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.14em;
}
.luma-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  height:2.5rem;padding:0 1.25rem;border-radius:var(--r-4xl);
  border:1px solid transparent;font-family:inherit;
  font-size:.8125rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.07em;
  cursor:pointer;transition:all .15s;text-decoration:none;white-space:nowrap;
  background:oklch(1 0 0);color:oklch(0.141 0.005 285.823);
}
.luma-btn:hover{background:oklch(0.9 0 0);}
.luma-btn:not(.ghostlight):not(.ink):hover{background:#FF6001;color:#fff;}
.luma-btn:active{transform:translateY(1px);}
.luma-btn.lg{height:3.25rem;padding:0 2rem;font-size:.875rem;}
.luma-btn.ghostlight{
  background:transparent;color:oklch(1 0 0 / .88);
  border-color:oklch(1 0 0 / .28);
}
.luma-btn.ghostlight:hover{background:oklch(1 0 0 / .14);color:#fff;}
.luma-btn.ink{background:var(--foreground);color:var(--background);}
.luma-btn.ink:hover{opacity:.85;background:var(--foreground);}
.textlink{
  display:inline-flex;align-items:center;gap:.4375rem;
  color:var(--foreground);text-decoration:none;
  font-size:.75rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.09em;
  padding-bottom:.125rem;border-bottom:1px solid var(--foreground);
  transition:opacity .15s;
}
.textlink:hover{opacity:.6;}
.textlink svg{width:.8125rem;height:.8125rem;transition:transform .18s;}
.textlink:hover svg{transform:translateX(2px);}
.reveal{
  opacity:0;transform:translateY(18px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);
  transition-delay:var(--d,0s);
}
.reveal.in{opacity:1;transform:none;}
@keyframes blip{0%,100%{opacity:1}50%{opacity:.25}}

/* ---------- nav ---------- */
.top{
  position:relative;
  background:var(--foreground);color:oklch(0.985 0 0);
  padding:var(--nav-h,5.5rem) var(--side) 0;
}
.nav{
  position:fixed;top:0;left:0;right:0;z-index:90;
  display:flex;align-items:center;justify-content:space-between;
  gap:2rem;padding:1.5rem var(--side);
  border-bottom:1px solid var(--hair);
  transition:background-color .3s cubic-bezier(.16,1,.3,1),border-color .3s;
}
/* On scroll the bar goes solid black (its white logo/links/buttons stay as-is) and keeps that black
   for every section — no colour flipping. At the very top it stays transparent (its default look). */
.nav.scrolled{background:oklch(0.15 0 0);border-bottom-color:oklch(1 0 0 / .08);}
.brand{display:inline-flex;align-items:center;}
.brand img{display:block;height:2rem;width:auto;}
.nav-links{display:flex;align-items:center;gap:clamp(1.125rem,2.4vw,2.25rem);}
.nav-link{
  color:oklch(1 0 0 / .88);text-decoration:none;
  font-size:.8125rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.09em;
  white-space:nowrap;transition:color .15s;
}
.nav-link:hover,.nav-link[aria-current="page"]{color:#fff;}
.nav-actions{display:flex;align-items:center;gap:.5rem;}

.nav-drop{position:relative;}
.nav-trigger{
  display:inline-flex;align-items:center;gap:.375rem;
  background:none;border:0;padding:0;cursor:pointer;font-family:inherit;
}
.nav-trigger svg{width:.8125rem;height:.8125rem;transition:transform .25s cubic-bezier(.16,1,.3,1);}
.nav-drop.open .nav-trigger{color:#fff;}
.nav-drop.open .nav-trigger svg{transform:rotate(180deg);}
.nav-menu{
  position:absolute;top:calc(100% + 1.25rem);left:-1rem;
  z-index:40;min-width:17rem;
  display:flex;flex-direction:column;gap:.125rem;
  padding:.5rem;border-radius:var(--r-3xl);
  background:var(--card);
  border:1px solid color-mix(in oklch,var(--foreground) 8%,transparent);
  box-shadow:0 20px 40px -14px oklch(0 0 0 / .35);
  opacity:0;transform:translateY(-6px);pointer-events:none;
  transition:opacity .22s ease,transform .28s cubic-bezier(.16,1,.3,1);
}
.nav-menu::before{content:"";position:absolute;left:0;right:0;top:-1.25rem;height:1.25rem;}
.nav-drop.open .nav-menu{opacity:1;transform:none;pointer-events:auto;}
.nav-item{display:block;padding:.6875rem .875rem;border-radius:var(--r-2xl);text-decoration:none;transition:background .2s;}
.nav-item:hover,.nav-item:focus-visible{background:var(--secondary);outline:none;}
.nav-item-t{display:block;color:var(--foreground);font-size:.875rem;font-weight:600;letter-spacing:-.01em;}
.nav-item-s{display:block;margin-top:.1875rem;color:var(--muted-foreground);font-size:.75rem;line-height:1.4;}

/* ---------- closing CTA + footer ---------- */
.close{
  position:relative;background:var(--foreground);color:oklch(0.985 0 0);
  padding:0 var(--side);overflow:hidden;isolation:isolate;
}
.close-grid{
  position:absolute;inset:0;z-index:-2;pointer-events:none;
  background-image:
    linear-gradient(oklch(1 0 0 / .05) 1px, transparent 1px),
    linear-gradient(90deg, oklch(1 0 0 / .05) 1px, transparent 1px);
  background-size:clamp(3rem,6vw,5rem) clamp(3rem,6vw,5rem);
  -webkit-mask-image:radial-gradient(80% 70% at 50% 40%,#000,transparent);
  mask-image:radial-gradient(80% 70% at 50% 40%,#000,transparent);
}
.close-stage{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:clamp(4rem,10vh,7rem) 0 clamp(3.5rem,8vh,5.5rem);
}
.close h2{
  margin:0;color:#fff;max-width:20ch;
  font-size:clamp(1.875rem,5vw,4rem);
  font-weight:600;line-height:1.02;letter-spacing:-.035em;
}
.close h2 .dim{color:oklch(1 0 0 / .42);}
.close-sub{
  margin:clamp(1rem,2.5vh,1.625rem) 0 0;max-width:42ch;
  color:oklch(1 0 0 / .68);
  font-size:clamp(.9375rem,1.4vw,1.0625rem);line-height:1.55;
}
.close-acts{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;margin-top:clamp(1.75rem,4vh,2.5rem);}
.close-fine{margin:clamp(1rem,2.5vh,1.5rem) 0 0;color:oklch(1 0 0 / .45);font-size:.75rem;}

.foot{padding:clamp(3rem,6vh,4.5rem) 0 clamp(1.5rem,3.5vh,2.25rem);}
.foot-cols{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid oklch(1 0 0 / .16);
}
.fcol{
  padding:clamp(1.5rem,3vh,2rem) clamp(1rem,2vw,1.75rem);
  border-right:1px solid oklch(1 0 0 / .14);
  border-bottom:1px solid oklch(1 0 0 / .14);
}
.fcol:first-child{padding-left:0;}
.fcol:last-child{border-right:0;padding-right:0;}
.foot-h{
  display:block;margin-bottom:1.125rem;
  font-size:.625rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.12em;
  color:oklch(1 0 0 / .4);
}
.foot-list{display:flex;flex-direction:column;gap:.0625rem;}
.foot-list a{
  display:flex;align-items:center;padding:.375rem 0;
  color:oklch(1 0 0 / .7);text-decoration:none;font-size:.875rem;
  transition:color .2s;
}
.foot-list a span{position:relative;transition:transform .32s cubic-bezier(.16,1,.3,1);}
.foot-list a span::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .32s cubic-bezier(.16,1,.3,1);
}
.foot-list a:hover{color:#fff;}
.foot-list a:hover span{transform:translateX(4px);}
.foot-list a:hover span::after{transform:scaleX(1);transform-origin:left;}
.foot-addr{margin:0;color:oklch(1 0 0 / .5);font-size:.8125rem;line-height:1.75;font-style:normal;}
.foot-addr b{display:block;color:oklch(1 0 0 / .82);font-weight:600;margin-bottom:.25rem;}
.foot-social{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.5rem;}
.soc{
  display:inline-flex;align-items:center;justify-content:center;
  width:2.25rem;height:2.25rem;border-radius:9999px;
  border:1px solid oklch(1 0 0 / .2);color:oklch(1 0 0 / .7);
  transition:all .25s cubic-bezier(.16,1,.3,1);
}
.soc svg{width:.9375rem;height:.9375rem;}
.soc:hover{background:#fff;color:var(--foreground);border-color:transparent;transform:translateY(-2px);}
.foot-status{display:flex;align-items:center;gap:.5rem;margin-top:1.25rem;font-size:.75rem;color:oklch(1 0 0 / .55);}
.foot-status i{width:.4375rem;height:.4375rem;border-radius:9999px;background:oklch(.78 0 0);box-shadow:0 0 0 3px oklch(1 0 0 / .08);}
.foot-base{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.5rem;padding-top:clamp(1.25rem,3vh,1.75rem);}
.foot-copy{margin:0;color:oklch(1 0 0 / .42);font-size:.75rem;}
.foot-legal{display:flex;flex-wrap:wrap;gap:1.25rem;margin-left:auto;}
.foot-legal a{color:oklch(1 0 0 / .42);text-decoration:none;font-size:.75rem;transition:color .15s;}
.foot-legal a:hover{color:#fff;}
.to-top{
  display:inline-flex;align-items:center;justify-content:center;
  width:2rem;height:2rem;border-radius:9999px;
  border:1px solid oklch(1 0 0 / .2);background:none;cursor:pointer;
  color:oklch(1 0 0 / .7);transition:all .25s cubic-bezier(.16,1,.3,1);
}
.to-top svg{width:.8125rem;height:.8125rem;}
.to-top:hover{background:#fff;color:var(--foreground);border-color:transparent;transform:translateY(-2px);}

/* ---------- responsive ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .reveal{opacity:1;transform:none;transition:none;}
  .nav-menu{transition:none;}
}
@media (max-width:940px){
  .foot-cols{grid-template-columns:repeat(2,minmax(0,1fr));}
  .fcol:nth-child(2n){border-right:0;padding-right:0;}
  .fcol:nth-child(2n+1){padding-left:0;}
}
@media (max-width:620px){
  .brand img{height:1.75rem;}
  .close-acts .luma-btn{width:100%;}
  .close-grid{display:none;}
  .foot-cols{grid-template-columns:1fr;}
  .fcol{border-right:0;padding-left:0;padding-right:0;}
  .foot-legal{margin-left:0;}
}


/* ---------- index hero ---------- */
.ihero{padding:clamp(3.5rem,9vh,6.5rem) 0 clamp(2.5rem,6vh,4rem);}
.ihero .kicker{color:oklch(1 0 0 / .5);}
.ihero h1{
  margin:0;color:#fff;max-width:20ch;
  font-size:clamp(2.25rem,6.4vw,5rem);
  font-weight:600;line-height:1.01;letter-spacing:-.038em;
}
.ihero h1 .dim{color:oklch(1 0 0 / .45);}
.ihero-sub{
  margin:clamp(1.125rem,2.5vh,1.75rem) 0 0;max-width:48ch;
  color:oklch(1 0 0 / .68);
  font-size:clamp(.9375rem,1.4vw,1.125rem);line-height:1.6;
}
.ihero-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.5rem;
  margin-top:clamp(2rem,4.5vh,3rem);
  padding-top:1.25rem;border-top:1px solid var(--hair);
  font-size:.6875rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.12em;
  color:oklch(1 0 0 / .45);
}
.ihero-meta b{color:#fff;font-weight:600;}

/* ---------- feed ---------- */
.feed{
  background:var(--secondary);color:var(--foreground);
  padding:clamp(2.5rem,6vh,4rem) var(--side) clamp(4rem,9vh,7rem);
}

.filters{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;
  padding-bottom:clamp(1.75rem,4vh,2.5rem);
}
.filt{
  display:inline-flex;align-items:center;gap:.4375rem;
  height:2.25rem;padding:0 .9375rem;border-radius:9999px;
  background:var(--card);color:var(--muted-foreground);
  border:1px solid color-mix(in oklch,var(--foreground) 8%,transparent);
  font-family:inherit;font-size:.75rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.08em;
  cursor:pointer;transition:all .22s cubic-bezier(.16,1,.3,1);
}
.filt:hover{color:var(--foreground);border-color:color-mix(in oklch,var(--foreground) 24%,transparent);}
.filt[aria-pressed="true"]{
  background:var(--foreground);color:var(--background);border-color:transparent;
}
.filt em{
  font-style:normal;font-variant-numeric:tabular-nums;
  opacity:.55;font-size:.6875rem;
}
.filt-count{
  margin-left:auto;font-size:.6875rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.1em;
  color:var(--muted-foreground);
}

.cards{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(.875rem,1.6vw,1.375rem);
}
.uc-card{
  display:flex;flex-direction:column;
  padding:clamp(1.375rem,2.2vw,1.875rem);
  border-radius:var(--r-4xl);
  background:var(--card);text-decoration:none;color:inherit;
  outline:1px solid color-mix(in oklch,var(--foreground) 6%,transparent);
  outline-offset:-1px;
  box-shadow:0 4px 6px -1px color-mix(in oklch,var(--foreground) 6%,transparent);
  transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s;
}
.uc-card:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 34px -14px color-mix(in oklch,var(--foreground) 20%,transparent);
}
.uc-card[hidden]{display:none;}

/* blog card image placeholder (swap the span for an <img> when real images are ready) */
.card-img{
  display:block;aspect-ratio:16/10;
  margin-bottom:clamp(1.25rem,2.2vw,1.75rem);
  border-radius:var(--r-3xl);
  outline:1px solid color-mix(in oklch,var(--foreground) 5%,transparent);outline-offset:-1px;
  background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23a1a1aa'%20stroke-width='1.4'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='3'%20width='18'%20height='18'%20rx='2.5'/%3E%3Ccircle%20cx='8.5'%20cy='8.5'%20r='1.6'/%3E%3Cpath%20d='M21%2015l-5-5L5%2021'/%3E%3C/svg%3E") center / 2rem no-repeat, linear-gradient(135deg,var(--secondary),var(--muted));
}
/* All nine blog cards use static artwork (assets/img/blog/*.png). object-fit fills the 16:10 box. */
img.card-img{width:100%;object-fit:cover;}

.card-top{
  display:flex;align-items:center;gap:.5rem;
  padding-bottom:clamp(1.75rem,3.5vh,2.5rem);
}
.tag{
  display:inline-flex;align-items:center;
  padding:.1875rem .5625rem;border-radius:9999px;
  background:var(--secondary);
  font-size:.5625rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.1em;
  color:var(--muted-foreground);
}
.card-n{
  margin-left:auto;
  font-size:.625rem;font-weight:600;
  font-variant-numeric:tabular-nums;letter-spacing:.12em;
  color:color-mix(in oklch,var(--foreground) 28%,transparent);
}

.card-t{
  display:block;margin-bottom:.625rem;
  font-size:clamp(1.0625rem,1.5vw,1.25rem);
  font-weight:600;line-height:1.18;letter-spacing:-.022em;
}
.card-s{
  display:block;margin-bottom:1.5rem;
  color:var(--muted-foreground);
  font-size:.875rem;line-height:1.6;
}

.card-foot{
  display:flex;align-items:center;gap:.5rem;
  margin-top:auto;padding-top:1.125rem;
  border-top:1px solid var(--border);
}
.card-date{
  font-size:.6875rem;font-weight:500;
  letter-spacing:.04em;color:var(--muted-foreground);
  font-variant-numeric:tabular-nums;
}
.card-go{
  margin-left:auto;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  width:1.75rem;height:1.75rem;border-radius:9999px;
  border:1px solid var(--border);color:var(--foreground);
  transition:all .25s cubic-bezier(.16,1,.3,1);
}
.card-go svg{width:.75rem;height:.75rem;}
.uc-card:hover .card-go{
  background:var(--foreground);color:var(--background);border-color:transparent;
  transform:translateX(2px);
}

.feed-empty{
  display:none;padding:clamp(2.5rem,6vh,4rem) 0;
  text-align:center;color:var(--muted-foreground);font-size:.9375rem;
}
.feed-empty.on{display:block;}

@media (max-width:1040px){ .cards{grid-template-columns:repeat(2,1fr);} }
@media (max-width:640px){
  .cards{grid-template-columns:1fr;}
  .filt-count{display:none;}
}

/* ---------- mobile nav (hamburger, <=1040px) ---------- */
.nav-burger{display:none;}
@media (max-width:1040px){
  .nav{flex-wrap:wrap;gap:0 1rem;}
  /* the open burger menu is a solid dark panel */
  .nav.open{background:oklch(0.15 0 0);max-height:100svh;overflow-y:auto;}
  .brand{order:1;}
  .nav-burger{
    display:flex;order:2;margin-left:auto;
    flex-direction:column;justify-content:center;align-items:center;gap:5px;
    width:2.75rem;height:2.75rem;padding:0;background:none;border:0;cursor:pointer;
  }
  .nav-burger span{
    display:block;height:2px;width:1.375rem;border-radius:2px;background:oklch(1 0 0 / .9);
    transition:transform .25s cubic-bezier(.16,1,.3,1),opacity .2s;
  }
  .nav.open .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .nav.open .nav-burger span:nth-child(2){opacity:0;}
  .nav.open .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

  .nav-links,.nav-actions{flex-basis:100%;display:none;}
  .nav-links{order:3;}
  .nav-actions{order:4;}
  .nav.open .nav-links{
    display:flex;flex-direction:column;align-items:stretch;gap:.125rem;
    margin-top:1rem;padding:.75rem;
    background:oklch(0.17 0 0);border-radius:var(--r-3xl) var(--r-3xl) 0 0;
  }
  .nav.open .nav-actions{
    display:flex;flex-direction:column;align-items:stretch;gap:.625rem;
    padding:.75rem;margin-bottom:.75rem;
    background:oklch(0.17 0 0);border-radius:0 0 var(--r-3xl) var(--r-3xl);
  }
  .nav.open .nav-actions .luma-btn{width:100%;height:2.875rem;}

  .nav.open .nav-link,.nav.open .nav-item{padding:.8125rem .875rem;border-radius:var(--r-2xl);}
  .nav.open .nav-link:hover,.nav.open .nav-link[aria-current="page"],.nav.open .nav-item:hover{background:oklch(1 0 0 / .06);color:#fff;}

  /* Platform dropdown flattened: hide the trigger, show Features + Use Cases inline */
  .nav.open .nav-drop{display:flex;flex-direction:column;}
  .nav.open .nav-trigger{display:none;}
  .nav.open .nav-menu{
    position:static;min-width:0;display:flex;
    opacity:1;transform:none;pointer-events:auto;
    background:transparent;border:0;box-shadow:none;padding:0;margin:0;gap:.125rem;
  }
  .nav.open .nav-item-t{color:oklch(1 0 0 / .88);font-weight:500;text-transform:uppercase;letter-spacing:.09em;font-size:.8125rem;}
  .nav.open .nav-item-s{display:none;}
}