/* Shared styles for the blog pages */
:root{
    --ink:#0b1018; --paper:#eaf0f9; --paper-2:#ffffff;
    --blue:#0a6ed1; --blue-ink:#04539f; --cyan:#64d2ff; --blue-bright:#2a90ff;
    --text:#0b1018; --muted:rgba(11,16,24,.64);
    --text-inv:#f5f5f7; --muted-inv:rgba(245,245,247,.66);
    --edge:rgba(11,16,24,.12); --edge-soft:rgba(11,16,24,.09); --edge-inv:rgba(255,255,255,.16);
    --r-sm:14px; --r-md:20px; --r-lg:26px; --r-xl:34px;
  }
  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; scrollbar-width:thin; scrollbar-color:#0c2f63 rgba(11,16,24,.06); }
  ::-webkit-scrollbar{ width:11px; }
  ::-webkit-scrollbar-track{ background:rgba(11,16,24,.05); }
  ::-webkit-scrollbar-thumb{ background:linear-gradient(180deg,#0c2f63,#0a55c7); border-radius:999px; border:3px solid transparent; background-clip:padding-box; }
  @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } *{ animation-duration:.01ms !important; transition-duration:.01ms !important; } }

  body{
    margin:0; font-family:'Inter',system-ui,sans-serif; font-size:17px; line-height:1.7;
    color:var(--text); background:linear-gradient(180deg,#ffffff 0%,var(--paper) 38%,#d9e4f3 100%);
    background-attachment:fixed; -webkit-font-smoothing:antialiased;
  }
  a{ color:inherit; text-decoration:none; }
  img{ display:block; max-width:100%; }
  :focus-visible{ outline:2px solid var(--blue); outline-offset:3px; border-radius:4px; }

  .scroll-progress{
    position:fixed; top:0; left:0; height:3px; width:var(--p,0%); z-index:95;
    background:linear-gradient(90deg,#0c2f63,#0a55c7 60%,#2a90ff);
    box-shadow:0 1px 10px rgba(10,60,140,.55); transition:width .08s linear; pointer-events:none;
  }

  .wrap{ max-width:820px; margin:0 auto; padding-inline:clamp(20px,5vw,32px); }

  /* nav */
  .nav{
    position:sticky; top:14px; z-index:60; margin:14px auto 0; width:min(1180px,calc(100% - 28px));
    display:flex; align-items:center; justify-content:space-between; gap:14px;
    padding:10px 10px 10px 20px; border-radius:999px;
    background:rgba(255,255,255,.78); border:1px solid rgba(255,255,255,.9);
    backdrop-filter:blur(26px) saturate(180%); -webkit-backdrop-filter:blur(26px) saturate(180%);
    box-shadow:inset 0 1px 0 #fff, 0 16px 40px -26px rgba(11,16,24,.45);
  }
  .brand{ display:flex; flex-direction:column; line-height:1.15; }
  .brand b{ font-family:'Inter Tight',sans-serif; font-size:15.5px; font-weight:600; letter-spacing:-.02em; }
  .brand span{ font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
  .nav-cta{
    font-family:'Inter Tight',sans-serif; font-size:13.5px; font-weight:600;
    padding:11px 18px; border-radius:999px; white-space:nowrap;
    background:linear-gradient(135deg,#2a90ff,#0a55c7); color:#fff;
    box-shadow:0 10px 22px -9px rgba(10,85,199,.7);
  }
  .arrow{ display:inline-block; transition:transform .3s cubic-bezier(.2,.7,.2,1); }
  .nav-cta:hover .arrow, .btn:hover .arrow{ transform:translate(3px,-3px); }
  @media (max-width:560px){ .nav-cta{ display:none; } }

  /* header */
  .post-head{ padding:clamp(48px,8vw,86px) 0 clamp(28px,4vw,44px); }
  .eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    font-family:'Inter Tight',sans-serif; font-size:11.5px; font-weight:700;
    letter-spacing:.15em; text-transform:uppercase; color:var(--blue-ink);
    padding:9px 16px; border-radius:999px; margin:0 0 20px;
    background:linear-gradient(150deg,rgba(42,144,255,.16),rgba(42,144,255,.07));
    border:1px solid rgba(42,144,255,.28); box-shadow:inset 0 1px 0 rgba(255,255,255,.75);
  }
  h1{
    font-family:'Inter Tight',sans-serif; font-weight:600; letter-spacing:-.035em;
    font-size:clamp(2.1rem,5.4vw,3.5rem); line-height:1.08; margin:0 0 20px;
  }
  .byline{
    display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px;
    padding-top:20px; border-top:1px solid var(--edge);
    font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.12em;
    text-transform:uppercase; color:var(--muted);
  }
  .byline b{ font-family:'Inter Tight',sans-serif; font-size:14px; font-weight:600; letter-spacing:-.01em; text-transform:none; color:var(--text); }

  /* article */
  article{ padding-bottom:clamp(48px,7vw,88px); }
  article p{ margin:0 0 1.15em; color:rgba(11,16,24,.78); text-align:justify; hyphens:auto; -webkit-hyphens:auto; }
  article h2{
    font-family:'Inter Tight',sans-serif; font-weight:600; letter-spacing:-.028em;
    font-size:clamp(1.4rem,3vw,1.85rem); line-height:1.2; margin:44px 0 16px;
  }
  .lead{
    font-size:1.16rem; line-height:1.6; color:var(--text); font-weight:400;
    text-align:left;
  }
  .pull{
    margin:34px 0; padding:22px 26px; border-radius:var(--r-md);
    background:linear-gradient(150deg,#ffffff,rgba(233,240,251,.85));
    border:1px solid rgba(255,255,255,.95);
    box-shadow:0 22px 46px -30px rgba(17,38,80,.45);
    border-left:3px solid transparent; border-image:linear-gradient(180deg,#2a90ff,#0a55c7) 1;
    font-family:'Inter Tight',sans-serif; font-size:1.22rem; font-weight:500;
    letter-spacing:-.02em; line-height:1.4; color:var(--text); text-align:left;
  }
  figure{ margin:34px 0; }
  figure img{
    width:100%; border-radius:var(--r-lg);
    border:1px solid rgba(255,255,255,.9);
    box-shadow:0 30px 64px -34px rgba(17,38,80,.5);
  }
  figcaption{
    margin-top:12px; font-family:'IBM Plex Mono',monospace; font-size:11px;
    letter-spacing:.1em; text-transform:uppercase; color:var(--muted); text-align:center;
  }
  .benefits{ list-style:none; margin:26px 0; padding:0; display:grid; gap:12px; }
  .benefits li{
    padding:18px 20px; border-radius:var(--r-sm);
    background:linear-gradient(150deg,#ffffff,rgba(235,242,252,.9));
    border:1px solid var(--edge); box-shadow:0 14px 30px -26px rgba(17,38,80,.6);
    font-size:15.5px; line-height:1.55; color:rgba(11,16,24,.78);
  }
  .benefits b{ display:block; font-family:'Inter Tight',sans-serif; font-size:16px; font-weight:600; letter-spacing:-.02em; color:var(--text); margin-bottom:3px; }

  /* closing card */
  .closing{
    margin:48px 0 0; padding:clamp(28px,4vw,44px); border-radius:var(--r-xl);
    color:var(--text-inv); position:relative; overflow:hidden;
    background:
      radial-gradient(700px 400px at 8% 8%, rgba(120,190,255,.20), transparent 64%),
      linear-gradient(168deg,#12315c 0%,#17427a 52%,#1b5090 100%);
  }
  .closing h2{ color:#fff; margin:0 0 12px; }
  .closing p{ color:var(--muted-inv); text-align:left; margin-bottom:22px; }
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    font-family:'Inter Tight',sans-serif; font-size:14.5px; font-weight:600;
    padding:14px 24px; border-radius:999px;
    background:linear-gradient(135deg,#2a90ff,#0a55c7); color:#fff;
    box-shadow:0 18px 38px -16px rgba(10,85,199,.75);
    transition:transform .3s cubic-bezier(.2,.7,.2,1);
  }
  .btn:hover{ transform:translateY(-2px); }

  .back{
    display:inline-flex; align-items:center; gap:8px; margin:36px 0 0;
    font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.14em;
    text-transform:uppercase; color:var(--blue-ink);
  }
  .social{
    display:flex; flex-wrap:wrap; justify-content:center; gap:12px;
  }
  .social a{
    width:46px; height:46px; border-radius:14px; display:grid; place-items:center;
    color:var(--blue-ink);
    background:linear-gradient(150deg,#ffffff,rgba(233,240,251,.88));
    border:1px solid var(--edge);
    box-shadow:0 14px 30px -20px rgba(17,38,80,.6), inset 0 1px 0 #fff;
    transition:transform .28s cubic-bezier(.2,.7,.2,1), color .28s;
  }
  .social a svg{ width:22px; height:22px; }
  .social a:hover{ transform:translateY(-3px); color:#fff; background:linear-gradient(150deg,#2a90ff,#0a55c7); }
  footer{
    margin-top:26px; padding:26px 0 40px; border-top:1px solid var(--edge);
    display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between;
    font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.12em;
    text-transform:uppercase; color:var(--muted);
  }
  @media (max-width:640px){
    body{ font-size:16px; }
    article p{ text-align:left; }
    .nav{ padding:9px 9px 9px 16px; }
  }

/* ---------- blog index ---------- */
.post-list{ display:grid; gap:18px; padding-bottom:clamp(40px,6vw,72px); }
.post-card{
  display:block; padding:clamp(24px,3.4vw,34px); border-radius:var(--r-lg);
  background:linear-gradient(150deg,#ffffff,rgba(235,242,252,.9));
  border:1px solid rgba(255,255,255,.95);
  box-shadow:0 24px 52px -32px rgba(17,38,80,.45);
  transition:transform .32s cubic-bezier(.2,.7,.2,1), box-shadow .32s;
}
.post-card:hover{ transform:translateY(-4px); box-shadow:0 34px 66px -30px rgba(17,38,80,.5); }
.post-card .kicker{
  display:inline-flex; align-items:center; padding:7px 14px; border-radius:999px;
  font-family:'Inter Tight',sans-serif; font-size:10.5px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--blue-ink);
  background:linear-gradient(150deg,rgba(42,144,255,.15),rgba(42,144,255,.06));
  border:1px solid rgba(42,144,255,.26); margin-bottom:14px;
}
.post-card h2{
  font-family:'Inter Tight',sans-serif; font-weight:600; letter-spacing:-.03em;
  font-size:clamp(1.35rem,3vw,1.85rem); line-height:1.2; margin:0 0 10px;
}
.post-card p{ margin:0 0 16px; color:var(--muted); font-size:15.5px; line-height:1.6; }
.post-card .read{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Inter Tight',sans-serif; font-size:13.5px; font-weight:600; color:var(--blue-ink);
}
.post-card:hover .arrow{ transform:translate(3px,-3px); }

/* ---------- social ---------- */
.social-head{
  margin:clamp(40px,6vw,64px) 0 16px; text-align:center;
  font-family:'Inter Tight',system-ui,sans-serif; font-size:11px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--blue-ink);
}


/* ---------- ambient background, matching the main site ---------- */
.aurora{ position:fixed; inset:-20% -10%; z-index:-2; pointer-events:none; filter:blur(90px); opacity:.78; }
.aurora span{ position:absolute; border-radius:50%; display:block; }
.aurora .a1{ width:52vw; height:52vw; left:-8vw; top:-6vw;  background:radial-gradient(circle,rgba(10,110,209,.36),transparent 66%); animation:drift1 26s ease-in-out infinite; }
.aurora .a2{ width:46vw; height:46vw; right:-6vw; top:22vh;  background:radial-gradient(circle,rgba(42,144,255,.30),transparent 66%); animation:drift2 32s ease-in-out infinite; }
.aurora .a3{ width:40vw; height:40vw; left:22vw;  top:64vh;  background:radial-gradient(circle,rgba(100,210,255,.30),transparent 66%); animation:drift3 38s ease-in-out infinite; }
@keyframes drift1{ 50%{ transform:translate3d(8vw,6vh,0) scale(1.12); } }
@keyframes drift2{ 50%{ transform:translate3d(-9vw,-5vh,0) scale(1.08); } }
@keyframes drift3{ 50%{ transform:translate3d(5vw,-8vh,0) scale(1.15); } }
.grain{
  position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
@media (max-width:640px){ .aurora{ filter:blur(60px); opacity:.4; } }
@media (prefers-reduced-motion:reduce){ .aurora span{ animation:none; } }