/* ============================================================
   Kyvee — v2 (kyvee.io-aligned, light & clean)
   Layout on top of kyvee.css tokens. Accent: Science Blue.
   ============================================================ */

:root{
  --ink:var(--color-neutral-darkest);
  --muted:#54525c;            /* secondary text */
  --line:var(--color-dark-15);
  --accent:var(--color-science-blue);
  --accent-soft:var(--color-science-blue-lightest);
  --shadow-sm:0 1px 2px rgba(6,2,13,.04), 0 6px 16px rgba(6,2,13,.05);
  --shadow-md:0 2px 6px rgba(6,2,13,.05), 0 18px 48px rgba(6,2,13,.09);
}

body{ color:var(--ink); background:#fff; }
p{ color:var(--muted); }

/* ---- Shared bits ---- */
.eyebrow2{ display:inline-flex; align-items:center; gap:.5rem; font-family:Inter,"Inter Placeholder",sans-serif; font-weight:600;
  font-size:.8125rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin-bottom:1rem; }
.eyebrow2::before{ content:""; width:1.5rem; height:1px; background:var(--accent); opacity:.5; }
.eyebrow2.center{ }
.sec-head2{ max-width:46rem; margin:0 auto 56px; text-align:center; }
.sec-head2 .eyebrow2{ display:inline-flex; }
.sec-head2 h2{ font-size:var(--text-h2); line-height:1.1; letter-spacing:-.02em; margin-bottom:1rem; }
.sec-head2 p{ font-size:var(--text-large); }
.lead{ font-size:var(--text-large); color:var(--muted); }
.btn .ic{ width:1.15rem; height:1.15rem; }
.btn-primary{ box-shadow:0 6px 16px rgba(0,102,204,.22); }
.btn-primary:hover{ box-shadow:0 8px 22px rgba(0,102,204,.3); }

/* ---- Top nav (contained floating glass box) ---- */
.topbar{ position:sticky; top:0; z-index:900; padding:16px 5% 0; background:transparent; }
.topbar-inner{ max-width:var(--container); margin-inline:auto; height:60px; padding:0 .65rem 0 1.35rem;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  border-radius:16px; background:rgba(255,255,255,.62); backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%); border:1px solid rgba(6,2,13,.07);
  box-shadow:var(--shadow-sm); transition:background .25s, border-color .25s, box-shadow .25s; }
.topbar.scrolled .topbar-inner{ background:rgba(255,255,255,.72); border-color:var(--line); box-shadow:var(--shadow-md); }
.brand{ display:flex; align-items:center; }
.brand img{ height:22px; width:auto; }
.foot-brand img{ height:26px; }
.nav2{ display:none; align-items:center; gap:2rem; }
.nav2 a{ font-size:1rem; color:var(--muted); transition:color .2s; }
.nav2 a:hover{ color:var(--ink); }
.nav2-cta{ display:none; align-items:center; gap:.6rem; }
.btn-nav{ padding:.4rem 1.05rem; font-size:.9rem; }
.burger{ display:inline-flex; flex-direction:column; gap:5px; width:44px; height:44px; align-items:center; justify-content:center; background:none; border:none; }
.burger span{ width:22px; height:2px; background:var(--ink); transition:.3s; }
.burger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; }
.burger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.mobile-menu{ display:none; flex-direction:column; gap:.25rem; max-width:70rem; margin:10px auto 0; padding:.75rem 1.25rem 1rem;
  border-radius:16px; background:rgba(255,255,255,.82); backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%); border:1px solid var(--line); box-shadow:var(--shadow-md); }
.mobile-menu.open{ display:flex; }
.mobile-menu a{ padding:.75rem 0; font-size:1.05rem; color:var(--ink); border-bottom:1px solid var(--line); }
.mobile-menu a:last-of-type{ border-bottom:0; }
.mobile-menu .btn{ margin-top:.75rem; }
@media (min-width:992px){
  .nav2, .nav2-cta{ display:flex; }
  .burger{ display:none; }
}

/* ---- Hero ---- */
.hero2{ position:relative; overflow:hidden; padding:80px 5% 0; text-align:center; }
.hero2::before{ content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(60% 50% at 50% 0%, var(--accent-soft) 0%, rgba(229,239,249,0) 70%),
    linear-gradient(#fff,#fff); }
.hero2-inner{ max-width:60rem; margin:0 auto; }
.hero2 h1{ font-size:clamp(2.1rem, 4.6vw, 3.4rem); line-height:1.08; letter-spacing:-.03em; margin:0 auto 1.25rem; max-width:900px; }
.hero2 .lead{ font-size:18px; max-width:40rem; margin:0 auto; }
.hero2-cta{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; margin-top:2rem; }
.hero2-frame{ margin:64px auto 0; max-width:70rem; }
.pill-note{ display:inline-flex; align-items:center; gap:.5rem; padding:.38rem .8rem; border:1px solid var(--line);
  border-radius:8px; background:#fff; font-size:.8rem; color:var(--muted); margin-bottom:1.5rem; box-shadow:var(--shadow-sm); }
.pill-note .dot{ width:.5rem; height:.5rem; border-radius:999px; background:var(--color-jade); box-shadow:0 0 0 3px color-mix(in srgb,var(--color-jade),transparent 80%); }

/* ---- Product frame placeholder ---- */
.frame{ border:1px solid var(--line); border-radius:14px; background:#fff; box-shadow:var(--shadow-md); overflow:hidden; }
.frame-hero{ border-radius:14px 14px 0 0; border-bottom:0; }
.slideshow{ position:relative; width:100%; height:100%; overflow:hidden; background:#eef1f5; }
.slide{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center;
  opacity:0; transition:opacity .9s ease; }
.slide.is-active{ opacity:1; }
.slide-dots{ position:absolute; left:50%; bottom:14px; transform:translateX(-50%); display:flex; gap:8px; z-index:2; }
.slide-dot{ width:8px; height:8px; border-radius:999px; border:0; padding:0; cursor:pointer;
  background:rgba(6,2,13,.22); box-shadow:0 1px 2px rgba(6,2,13,.15); transition:width .3s, background .3s; }
.slide-dot.is-active{ background:var(--accent); width:22px; }
.frame-bar{ display:flex; align-items:center; gap:.5rem; padding:.75rem 1rem; border-bottom:1px solid var(--line); background:#fbfbfc; }
.frame-bar i{ width:.7rem; height:.7rem; border-radius:999px; background:var(--color-neutral-lighter); display:block; }
.frame-bar .url{ margin-left:.75rem; font-family:"Roboto Mono",monospace; font-size:.72rem; color:var(--color-neutral); }
.frame-body{ aspect-ratio:16/9; }
.frame-hero .frame-body{ aspect-ratio:1900/943; }
.ph2{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; width:100%; height:100%;
  background:var(--color-neutral-lightest);
  background-image:repeating-linear-gradient(135deg, transparent 0 13px, rgba(130,128,134,.07) 13px 14px); color:var(--color-neutral-light); }
.ph2 svg{ width:54px; height:54px; }
.ph2 .cap{ font-family:"Roboto Mono",monospace; font-size:12px; letter-spacing:.03em; color:var(--color-neutral); }

/* ---- Dashed eyebrow badge ---- */
.eyebrow-badge{ display:inline-flex; align-items:center; gap:.6rem; padding:.5rem 1.1rem;
  border:1px dashed color-mix(in srgb,#afb3b6,transparent 55%); border-radius:8px; background:#fff;
  font-family:Inter,"Inter Placeholder",sans-serif; font-weight:600; font-size:13px; color:var(--accent); margin-bottom:1.25rem; }
.eyebrow-badge .d{ width:.6rem; height:.6rem; border-radius:999px; background:var(--accent); flex:none; }

/* ---- Solutions: smaller heading (matches hero scale) ---- */
#solutions .sec-head2 h2{ font-size:clamp(1.9rem,3.6vw,2.6rem); }
#solutions .sec-head2 p{ font-size:var(--text-medium); }

/* ---- Solutions: stacking cards ---- */
.sol-stack{ display:flex; flex-direction:column; gap:32px; }
.sol-card{ display:grid; grid-template-columns:1fr; overflow:hidden; background:#F7F8FD;
  border:0; border-radius:22px; }
.sol-card:nth-child(2){ background:#FDFAF7; }
.sol-card-media{ min-height:240px; padding:1.25rem; }
.sol-card-media img{ width:100%; height:100%; object-fit:cover; border-radius:14px; }
.sol-card-body{ padding:2rem; display:flex; flex-direction:column; }
.sol-num{ font-family:"Roboto Mono",monospace; font-size:.85rem; letter-spacing:.12em; color:var(--accent); margin-bottom:.75rem; }
.sol-card-body h3{ font-size:clamp(1.5rem,2.4vw,2rem); line-height:1.15; letter-spacing:-.02em; margin-bottom:1rem; }
.sol-card-body > p{ font-size:var(--text-medium); }
.sol-feats{ margin-top:1.5rem; display:grid; gap:.75rem; }
.sol-feats li{ display:flex; gap:.6rem; align-items:flex-start; color:var(--ink); font-size:var(--text-medium); }
.sol-feats svg{ flex:none; width:1.25rem; height:1.25rem; color:var(--accent); margin-top:.15rem; }
@media (min-width:880px){
  .sol-card{ grid-template-columns:1.05fr 1fr; align-items:stretch; height:500px; position:sticky; }
  .sol-card-media{ min-height:0; padding:1.25rem 0 1.25rem 1.25rem; }
  .sol-card-body{ padding:3rem; justify-content:center; }
  .sol-card:nth-child(1){ top:84px; }
  .sol-card:nth-child(2){ top:112px; }
  .sol-card:nth-child(3){ top:140px; }
}

/* Tighten gap between Solutions and Industries (halved) */
#solutions{ padding-bottom:32px; }
#industries{ padding-top:32px; }
@media (min-width:768px){ #solutions{ padding-bottom:48px; } #industries{ padding-top:48px; } }
@media (min-width:992px){ #solutions{ padding-bottom:56px; } #industries{ padding-top:56px; } }

/* ---- Section panel (bordered, soft shadow) ---- */
.panel{ background:#fff; border:1px solid var(--line); border-radius:24px;
  box-shadow:0 1px 2px rgba(6,2,13,.03), 0 12px 32px rgba(6,2,13,.045);
  padding:clamp(1.5rem,4vw,3.5rem); }
.split-head{ display:grid; grid-template-columns:1fr; gap:1rem; margin-bottom:2.5rem; }
.split-head h2{ font-size:clamp(1.9rem,3.4vw,2.8rem); line-height:1.08; letter-spacing:-.02em; }
.split-head p{ font-size:var(--text-medium); }
@media (min-width:880px){
  .split-head{ grid-template-columns:1.1fr 1fr; align-items:center; gap:3.5rem; margin-bottom:3rem; }
}

/* ---- Industries tiles (per reference) ---- */
#industries .tile{ background:#F1F4FB; border:0;
  border-radius:18px; box-shadow:none; }
#industries .tile:nth-child(1){ background:#EEF3FB; }
#industries .tile:nth-child(2){ background:#FBF3ED; }
#industries .tile:nth-child(3){ background:#ECF5F0; }
#industries .tile:nth-child(4){ background:#F2EEFB; }
#industries .tile:nth-child(5){ background:#FBEFF2; }
#industries .tile:nth-child(6){ background:#EAF3FB; }
#industries .tile:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
#industries .tile .ico{ background:#fff; color:var(--accent); border-radius:12px;
  box-shadow:0 2px 8px rgba(6,2,13,.07); }

/* ---- Integrations cards (white cards, icon top / text bottom, 2-col) ---- */
.int-grid{ display:grid; grid-template-columns:1fr; gap:1.5rem; }
@media (min-width:768px){ .int-grid{ grid-template-columns:1fr 1fr; } }
.int-card{ display:flex; flex-direction:column; min-height:230px; background:#fff;
  border:1px solid var(--line); border-radius:20px; padding:2.25rem 2.25rem 2.4rem;
  box-shadow:0 1px 2px rgba(6,2,13,.03); transition:transform .25s ease, box-shadow .25s ease; }
.int-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.int-card .int-ico{ height:64px; width:64px; align-self:flex-start; margin-bottom:auto; }
.int-card .int-logos{ height:52px; width:auto; max-width:100%; align-self:flex-start; object-fit:contain; object-position:left center; margin-bottom:auto; }
.int-body{ margin-top:2rem; }
.int-card h3{ font-size:clamp(1.3rem,2vw,1.6rem); line-height:1.2; letter-spacing:-.01em; margin-bottom:.5rem; }
.int-card p{ font-size:var(--text-medium); }

/* ---- Card grids (industries / integrations) ---- */
.grid2{ display:grid; grid-template-columns:1fr; gap:1.25rem; }
@media (min-width:640px){ .grid2{ grid-template-columns:1fr 1fr; } }
@media (min-width:992px){ .grid2{ grid-template-columns:repeat(3,1fr); } }
.tile{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:1.75rem;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.tile:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:transparent; }
.tile .ico{ width:2.75rem; height:2.75rem; border-radius:10px; display:flex; align-items:center; justify-content:center;
  background:var(--accent-soft); color:var(--accent); margin-bottom:1.1rem; }
.tile .ico svg{ width:1.4rem; height:1.4rem; }
.tile h3{ font-size:var(--text-h5); line-height:1.25; margin-bottom:.5rem; }
.tile p{ font-size:var(--text-medium); }
.tile .logo-chip{ width:2.75rem; height:2.75rem; border-radius:10px; border:1px solid var(--line); background:#fbfbfc;
  display:flex; align-items:center; justify-content:center; margin-bottom:1.1rem; color:var(--ink); }
.tile .logo-chip svg{ width:1.5rem; height:1.5rem; }

/* ---- Platform overview (centered 3-col, middle highlighted) ---- */
.plat-grid{ display:grid; grid-template-columns:1fr; gap:1rem; max-width:66rem; margin-inline:auto; }
@media (min-width:768px){ .plat-grid{ grid-template-columns:repeat(3,1fr); gap:.5rem; align-items:stretch; } }
.plat-col{ display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:2.5rem 2rem; border-radius:20px; }
.plat-col.is-feature{ background:#F6F7FB; }
.plat-ico{ width:3rem; height:3rem; border-radius:12px; background:#fff; color:var(--accent);
  display:flex; align-items:center; justify-content:center; box-shadow:0 2px 10px rgba(6,2,13,.08);
  margin-bottom:1.5rem; }
.plat-ico svg{ width:1.4rem; height:1.4rem; }
.plat-col h3{ font-size:clamp(1.3rem,2vw,1.6rem); line-height:1.2; margin-bottom:.75rem; }
.plat-col p{ font-size:var(--text-medium); max-width:32ch; }

/* ---- Ecosystem logos ---- */
.ecos{ text-align:center; }
.ecos .label{ font-family:Inter,"Inter Placeholder",sans-serif; font-weight:600; font-size:.8125rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--color-neutral); margin-bottom:2rem; }
.logos{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:1rem 2.5rem; }
.logo-ph{ height:38px; min-width:120px; border-radius:8px; border:1px dashed var(--line);
  display:flex; align-items:center; justify-content:center; padding:0 1.25rem;
  font-family:"Roboto Mono",monospace; font-size:.7rem; letter-spacing:.04em; color:var(--color-neutral-light);
  filter:grayscale(1); opacity:.75; transition:opacity .2s; }
.logo-ph:hover{ opacity:1; }

/* ---- Ecosystem logo marquee ---- */
.logos-marquee{ overflow:hidden; width:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.logos-track{ display:flex; align-items:center; gap:4.5rem; width:max-content;
  animation:logos-scroll 32s linear infinite; }
.logos-marquee:hover .logos-track{ animation-play-state:paused; }
.eco-logo{ height:42px; width:auto; flex:none; object-fit:contain; display:block; }
@keyframes logos-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
@media (max-width:640px){ .eco-logo{ height:34px; } .logos-track{ gap:3rem; } }
@media (prefers-reduced-motion:reduce){ .logos-track{ animation:none; } }

/* ---- Blog / posts ---- */
.posts-head{ display:flex; flex-wrap:wrap; gap:1.5rem 2rem; align-items:flex-end; justify-content:space-between; margin-bottom:48px; }
.posts-head .eyebrow2{ margin-bottom:.85rem; }
.posts-head h2{ font-size:var(--text-h2); line-height:1.05; letter-spacing:-.02em; }
.posts-viewall{ flex:none; }
.posts-grid{ display:grid; grid-template-columns:1fr; gap:44px 32px; }
@media (min-width:680px){ .posts-grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:980px){ .posts-grid{ grid-template-columns:repeat(3,1fr); } }
.post-card{ display:flex; flex-direction:column; align-items:flex-start; }
.post-thumb{ display:block; width:100%; margin-bottom:1.35rem; border-radius:16px; overflow:hidden; }
.post-thumb img{ width:100%; aspect-ratio:3/2; object-fit:cover; display:block; transition:transform .45s ease; }
.post-card:hover .post-thumb img{ transform:scale(1.045); }
.post-meta{ display:flex; align-items:center; gap:.75rem; margin-bottom:.9rem; }
.post-read{ font-size:var(--text-small); font-weight:600; color:var(--color-neutral); }
.post-card h3{ font-size:var(--text-h5); line-height:1.25; letter-spacing:-.01em; margin-bottom:.5rem; text-wrap:balance; }
.post-card > p{ font-size:var(--text-medium); }
.post-more{ display:inline-flex; align-items:center; gap:.4rem; margin-top:1.15rem; font-weight:600;
  font-size:var(--text-medium); color:var(--accent); }
.post-more svg{ width:1.05rem; height:1.05rem; transition:transform .2s; }
.post-more:hover svg{ transform:translateX(3px); }

/* ---- FAQ accordion ---- */
.faq-layout{ display:grid; grid-template-columns:1fr; gap:40px; align-items:start; }
@media (min-width:900px){
  .faq-layout{ grid-template-columns:0.85fr 1.15fr; gap:80px; }
  .faq-head{ position:sticky; top:120px; }
}
.faq-head{ max-width:34rem; }
.faq-head h2{ font-size:var(--text-h2); line-height:1.05; letter-spacing:-.02em; margin-bottom:1.5rem; }
.faq-head p{ font-size:var(--text-large); color:var(--muted); max-width:28rem; }

.faq2{ display:flex; flex-direction:column; gap:1rem; }
.faq-item{ background:#fff; border:1px solid var(--line); border-radius:16px;
  padding:0 1.75rem; transition:border-color .2s, box-shadow .2s; }
.faq-item:hover{ border-color:color-mix(in oklch, var(--accent) 35%, var(--line)); }
.faq-item.open{ box-shadow:0 8px 24px -12px rgba(15,23,42,.12); }
.faq-q2{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding:1.65rem 0; background:none; border:0; text-align:left; color:var(--ink); cursor:pointer;
  font-family:Inter,"Inter Placeholder",sans-serif; font-weight:600; font-size:var(--text-h6); line-height:1.3; }
.faq-ic{ flex:none; width:1.5rem; height:1.5rem; position:relative; }
.faq-ic::before, .faq-ic::after{ content:""; position:absolute; background:var(--color-neutral); border-radius:2px; transition:transform .3s, opacity .3s, background .2s; }
.faq-ic::before{ top:50%; left:0; right:0; height:2px; transform:translateY(-50%); }
.faq-ic::after{ left:50%; top:0; bottom:0; width:2px; transform:translateX(-50%); }
.faq-item.open .faq-ic::before, .faq-item.open .faq-ic::after{ background:var(--accent); }
.faq-item.open .faq-ic::after{ transform:translateX(-50%) scaleY(0); opacity:0; }
.faq-a{ overflow:hidden; max-height:0; transition:max-height .35s ease; }
.faq-a > div{ padding:0 0 1.65rem; color:var(--muted); font-size:var(--text-medium); }

/* ---- CTA band ---- */
.cta2-wrap{ padding:0 5%; margin-bottom:100px; }
.cta2{ position:relative; overflow:hidden; max-width:var(--container); margin-inline:auto;
  border-radius:28px; padding:88px 8%; text-align:center; color:#fff;
  background:linear-gradient(180deg, #3b5cf2 0%, #5e78f1 42%, #9fb1f3 100%); }
.cta2::after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:88px 88px; background-position:center; }
.cta2 > *{ position:relative; z-index:1; }
.cta2 h2{ font-size:var(--text-h2); line-height:1.08; letter-spacing:-.02em; margin-bottom:1.25rem; color:#fff; max-width:18ch; margin-inline:auto; }
.cta2 p{ color:rgba(255,255,255,.85); font-size:var(--text-large); max-width:34rem; margin:0 auto 2.25rem; }
/* CTA button: same size/shape as every other button — only the colours are
   inverted (white on blue) so it reads on the blue CTA banner. */
.cta2 .btn-primary{ background:#fff; border-color:#fff; color:var(--color-science-blue); }
.cta2 .btn-primary:hover{ background:var(--color-science-blue-lightest); border-color:var(--color-science-blue-lightest); }
.cta2 .btn-primary .ic{ color:var(--color-science-blue); }

/* ---- Footer ---- */
.footer2{ padding:72px 5% 40px; border-top:1px solid var(--line); }
.footer2-inner{ max-width:var(--container); margin-inline:auto; }
.foot-grid{ display:grid; grid-template-columns:1fr; gap:48px; padding-bottom:48px; }
@media (min-width:768px){ .foot-grid{ grid-template-columns:1.6fr 1fr 1fr 1fr; gap:32px; } }
.foot-about{ max-width:24rem; }
.foot-about .brand{ margin-bottom:1.25rem; }
.foot-about p{ font-size:var(--text-medium); }
.foot-col h4{ font-family:Inter,"Inter Placeholder",sans-serif; font-size:.8125rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--color-neutral); margin-bottom:1rem; font-weight:600; }
.foot-col a{ display:block; padding:.4rem 0; color:var(--muted); font-size:var(--text-medium); transition:color .2s; }
.foot-col a:hover{ color:var(--ink); }
.foot-col .talk{ font-size:var(--text-medium); color:var(--muted); }
.foot-col .mail{ color:var(--accent); font-weight:500; }
.foot-bottom2{ display:flex; flex-direction:column; gap:1rem; align-items:flex-start; justify-content:space-between;
  padding-top:28px; border-top:1px solid var(--line); font-size:var(--text-small); color:var(--color-neutral); }
@media (min-width:640px){ .foot-bottom2{ flex-direction:row; align-items:center; } }

/* ---- Reveal (fail-safe) ---- */
html.anim .reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
html.anim .reveal.in{ opacity:1; transform:none; }
html.anim .stagger.in > *{ animation:rise .6s ease backwards; }
html.anim .stagger.in > *:nth-child(2){ animation-delay:.07s; }
html.anim .stagger.in > *:nth-child(3){ animation-delay:.14s; }
html.anim .stagger.in > *:nth-child(4){ animation-delay:.21s; }
html.anim .stagger.in > *:nth-child(5){ animation-delay:.28s; }
html.anim .stagger.in > *:nth-child(6){ animation-delay:.35s; }
@keyframes rise{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }

/* ---- Article page ---- */
.article-wrap{ padding:140px 5% 0; }
.article{ max-width:46rem; margin-inline:auto; }
.article-back{ display:inline-flex; align-items:center; gap:.45rem; color:var(--muted); font-weight:500;
  font-size:var(--text-medium); margin-bottom:2.25rem; }
.article-back svg{ width:1.05rem; height:1.05rem; transition:transform .2s; }
.article-back:hover{ color:var(--ink); }
.article-back:hover svg{ transform:translateX(-3px); }
.article-eyebrow{ display:flex; align-items:center; gap:.75rem; margin-bottom:1.5rem; }
.article-read{ font-size:var(--text-small); font-weight:600; color:var(--color-neutral); }
.article-lang{ margin-left:auto; display:inline-flex; align-items:center; gap:.2rem; }
.article-lang-opt{ font-size:var(--text-small); font-weight:600; color:var(--color-neutral);
  padding:.25rem .55rem; border-radius:999px; line-height:1; transition:color .15s ease, background .15s ease; }
.article-lang-opt:hover{ color:var(--ink); }
.article-lang-opt.is-active{ color:var(--ink); background:color-mix(in srgb, var(--ink), transparent 92%); }
.article-title{ font-size:40px; line-height:1.1; letter-spacing:-.022em;
  margin-bottom:15px; text-wrap:balance; }
@media (max-width:640px){ .article-title{ font-size:30px; } }
.article-byline{ display:flex; flex-wrap:wrap; align-items:center; gap:.7rem; color:var(--color-neutral); font-size:var(--text-medium); }
.article-byline strong{ color:var(--ink); font-weight:600; }
.article-byline .sep{ width:4px; height:4px; border-radius:50%; background:currentColor; opacity:.55; }
.article-hero{ width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:20px; margin:15px 0 3rem; }
.article-body{ font-size:17px; line-height:1.72; color:#3a3942; }
.article-body > * + *{ margin-top:1.5rem; }
.article-body h2{ font-size:var(--text-h4); line-height:1.22; letter-spacing:-.015em; margin-top:3rem; color:var(--ink); }
.article-body h3{ font-size:var(--text-h5); line-height:1.3; margin-top:2.25rem; color:var(--ink); }
.article-body strong{ color:var(--ink); font-weight:600; }
.article-body ul{ list-style:disc; padding-left:1.4rem; }
.article-body li{ margin-top:.55rem; }
.article-body a{ color:var(--accent); font-weight:500; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.article-quote{ margin:2.75rem 0; padding-left:1.6rem; border-left:3px solid var(--accent);
  font-size:var(--text-h5); line-height:1.42; color:var(--ink); font-weight:500; letter-spacing:-.01em; }
.article-foot{ max-width:46rem; margin:3.5rem auto 0; padding:1.75rem 0; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between; }
.article-tags{ display:flex; flex-wrap:wrap; gap:.5rem; }
.article-foot .talk{ font-size:var(--text-medium); color:var(--color-neutral); }

/* Related posts reuse .posts-grid; add top rule */
.article-related{ margin-top:24px; }
.article-related .posts-head{ margin-bottom:40px; }

/* ---- News listing page ---- */
.news-hero{ padding:150px 5% 56px; }
.news-hero-inner{ max-width:42rem; }
.news-hero h1{ font-size:clamp(2.4rem,5vw,3.5rem); line-height:1.04; letter-spacing:-.025em; margin:.25rem 0 1.25rem; }
.news-hero .lead{ max-width:36rem; }
.news-featured{ display:grid; grid-template-columns:1fr; gap:1.75rem; align-items:center;
  border:1px solid var(--line); border-radius:24px; padding:1rem; transition:border-color .2s, box-shadow .2s; }
@media (min-width:860px){ .news-featured{ grid-template-columns:1.15fr 1fr; gap:2.5rem; padding:1.25rem; } }
.news-featured:hover{ border-color:color-mix(in oklch, var(--accent) 32%, var(--line)); box-shadow:0 16px 40px -20px rgba(15,23,42,.22); }
.news-featured-media{ border-radius:16px; overflow:hidden; }
.news-featured-media img{ width:100%; aspect-ratio:16/10; object-fit:cover; display:block; transition:transform .5s ease; }
.news-featured:hover .news-featured-media img{ transform:scale(1.04); }
.news-featured-body{ padding:.5rem 1.25rem 1rem; }
.news-featured-body h2{ font-size:var(--text-h3); line-height:1.12; letter-spacing:-.02em; margin:.85rem 0 .9rem; text-wrap:balance; }
.news-featured-body > p{ font-size:var(--text-large); max-width:34rem; }
.news-featured-body .post-more{ display:inline-flex; align-items:center; gap:.4rem; margin-top:1.25rem;
  font-weight:600; font-size:var(--text-medium); color:var(--accent); }
.news-featured-body .post-more svg{ width:1.05rem; height:1.05rem; transition:transform .2s; }
.news-featured:hover .news-featured-body .post-more svg{ transform:translateX(3px); }
.news-list-title{ font-size:clamp(2rem,4vw,3rem); line-height:1.05; letter-spacing:-.025em; margin:0 0 2rem; }
.news-filters{ display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:48px; }
.news-chip{ border:1px solid var(--line); background:#fff; color:var(--muted); border-radius:999px;
  padding:.5rem 1.1rem; font-family:Inter,"Inter Placeholder",sans-serif; font-weight:500; font-size:var(--text-medium);
  transition:all .18s ease; }
.news-chip:hover{ border-color:color-mix(in oklch, var(--accent) 35%, var(--line)); color:var(--ink); }
.news-chip.is-active{ background:var(--ink); border-color:var(--ink); color:#fff; }
.news-foot{ display:flex; justify-content:center; margin-top:56px; }

/* ============================================================
   Landing-page body copy → 19px (buttons intentionally left as-is).
   Scoped to the specific text blocks, so shared UI tokens such as
   --text-medium (used by .btn) are not affected.
   ============================================================ */
.hero2 .lead,                         /* hero intro */
.sec-head2 p, #solutions .sec-head2 p,/* section intros (Solutions/Integrations/Platform) */
.sol-card-body > p,                   /* solution card copy */
.sol-feats li,                        /* solution feature lists */
.split-head p,                        /* Industries intro */
.tile p,                              /* industry tiles */
.int-card p,                          /* integration cards */
.plat-col p,                          /* platform columns */
.post-card > p,                       /* article preview excerpts */
.faq-head p,                          /* FAQ intro */
.faq-a > div,                         /* FAQ answers */
.cta2 p {                             /* CTA copy */
  font-size: 19px;
}

/* Footer — all text 15px. */
.foot-about p,
.foot-col h4,
.foot-col a,
.foot-col .talk,
.foot-col .mail,
.foot-bottom2,
.foot-bottom2 p {
  font-size: 15px;
}

/* Section titles (e.g. "The Operating System for Electric Fleets") → 40px.
   #solutions … included to beat its id-specific rule above. */
.sec-head2 h2,
#solutions .sec-head2 h2,
.split-head h2,
.posts-head h2,
.faq-head h2 {
  font-size: 40px;
}

/* Card titles (e.g. "Smart Charging Orchestration") + landing post titles → 25px. */
.sol-card-body h3,
.int-card h3,
.tile h3,
.plat-col h3,
.post-card h3 {
  font-size: 25px;
}

/* FAQ questions → 22px. */
.faq-q2 {
  font-size: 22px;
}