/* ============================================================
   TruLata — Sections (cinematic hybrid)
   ============================================================ */

/* ---------- Scroll progress ---------- */
.scroll-progress {
  position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 120;
  background: transparent; pointer-events: none;
}
.scroll-progress span {
  display: block; height: 100%; width: 0%;
  background: var(--grad); transform-origin: left;
  box-shadow: 0 0 12px rgba(76,209,244,0.6);
}

/* ---------- Cursor glow ---------- */
.cursor-glow {
  position: fixed; top: 0; left: 0; width: 380px; height: 380px;
  margin: -190px 0 0 -190px; border-radius: 50%; z-index: 1; pointer-events: none;
  background: radial-gradient(circle, rgba(76,209,244,0.16), rgba(154,63,193,0.10) 40%, transparent 70%);
  opacity: 0; transition: opacity 0.4s ease; will-change: transform; mix-blend-mode: screen;
}
body.has-cursor .cursor-glow { opacity: 1; }
@media (hover: none) { .cursor-glow { display: none; } }

/* ---------- Utility banner ---------- */
.util-banner {
  position: relative; z-index: 110;
  background: var(--ink-900); color: rgba(255,255,255,0.9);
  font-size: 0.85rem; border-bottom: 1px solid rgba(255,255,255,0.07);
}
.util-banner.is-hidden { display: none; }
.util-banner__inner { display: flex; align-items: center; justify-content: center; gap: 1rem; min-height: 40px; position: relative; }
.util-banner__link { font-weight: 600; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.util-banner__close { position: absolute; right: 0; font-size: 1.2rem; line-height: 1; color: rgba(255,255,255,0.5); padding: 0.3rem; }
.util-banner__close:hover { color: #fff; }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 100;
  transition: background 0.4s var(--ease), backdrop-filter 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s ease;
  border-bottom: 1px solid transparent;
}
.nav__inner { display: flex; align-items: center; gap: 2rem; min-height: 76px; }
.nav__brand { display: flex; align-items: center; }
.nav__logo { height: 34px; width: auto; transition: opacity 0.35s ease; }
.nav__logo--dark { display: none; }

.nav__links { display: flex; gap: 2rem; margin-left: auto; font-size: 0.96rem; font-weight: 500; }
.nav__links a { position: relative; padding: 0.4rem 0; transition: color 0.25s ease; }
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0;
  background: var(--grad); transition: width 0.35s var(--ease);
}
.nav__links a:hover::after { width: 100%; }
.nav__actions { margin-left: 0.5rem; }
.nav__cta { --pad-y: 0.7rem; padding-block: 0.7rem; font-size: 0.92rem; }

/* nav theme: over dark sections (default) */
.nav[data-nav-theme="dark"] .nav__links a { color: rgba(255,255,255,0.82); }
.nav[data-nav-theme="dark"] .nav__links a:hover { color: #fff; }
.nav[data-nav-theme="dark"] .nav__logo--light { display: block; }
.nav[data-nav-theme="dark"] .nav__logo--dark { display: none; }

/* nav theme: over light sections ("paper" is also a light theme — same treatment) */
.nav[data-nav-theme="light"] .nav__links a,
.nav[data-nav-theme="paper"] .nav__links a { color: var(--text-on-light); }
.nav[data-nav-theme="light"] .nav__links a:hover,
.nav[data-nav-theme="paper"] .nav__links a:hover { color: var(--ink); }
.nav[data-nav-theme="light"] .nav__logo--light,
.nav[data-nav-theme="paper"] .nav__logo--light { display: none; }
.nav[data-nav-theme="light"] .nav__logo--dark,
.nav[data-nav-theme="paper"] .nav__logo--dark { display: block; }

/* scrolled (frosted) */
.nav.is-scrolled { box-shadow: 0 10px 40px -22px rgba(0,0,0,0.45); }
.nav.is-scrolled[data-nav-theme="dark"] { background: rgba(28,30,31,0.72); backdrop-filter: blur(14px) saturate(140%); border-color: rgba(255,255,255,0.06); }
.nav.is-scrolled[data-nav-theme="light"],
.nav.is-scrolled[data-nav-theme="paper"] { background: rgba(255,255,255,0.78); backdrop-filter: blur(14px) saturate(140%); border-color: var(--line); }

/* dropdown menus */
.nav__item { position: relative; display: inline-flex; align-items: center; }
.nav__item--has-menu > a::after { content: ""; position: static; bottom: auto; left: auto; vertical-align: middle; display: inline-block; width: 11px; height: 11px; margin-left: 0.4rem; background: currentColor; opacity: 0.55; transition: transform 0.3s var(--ease), opacity 0.3s ease; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat; }
.nav__item--has-menu:hover > a::after { transform: rotate(180deg); opacity: 0.9; width: 11px; height: 11px; }
.nav__menu {
  position: absolute; top: 100%; left: 0; transform: translateY(8px);
  min-width: 230px; padding: 0.6rem; display: grid; gap: 0.1rem;
  background: rgba(24,26,27,0.92); backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.1); border-radius: 14px;
  box-shadow: 0 30px 60px -24px rgba(0,0,0,0.6);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
  z-index: 50;
}
.nav__item--has-menu:hover .nav__menu, .nav__item--has-menu:focus-within .nav__menu {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
}
/* mega (multi-column) + grid menus */
.nav__menu--mega { display: flex; gap: 1.6rem; padding: 1.1rem; }
.nav__menu-col { display: grid; gap: 0.05rem; align-content: start; min-width: 188px; }
.nav__menu-h { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--warm); padding: 0.3rem 0.8rem 0.35rem; }
.nav__menu--grid { grid-template-columns: 1fr 1fr; min-width: 430px; }
/* mega menu items with icon + description */
.nav__menu-col { min-width: 238px; }
.nav__menu--mega a { display: flex; gap: 0.7rem; align-items: center; padding: 0.5rem 0.6rem; }
.nav__menu-ico { flex: 0 0 auto; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); color: var(--accent); transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease; }
.nav__menu-ico svg { width: 17px; height: 17px; }
.nav__menu--mega a:hover .nav__menu-ico { background: var(--grad); border-color: transparent; color: #fff; }
.nav__menu-txt { display: flex; flex-direction: column; line-height: 1.25; }
.nav__menu-txt b { font-weight: 600; font-size: 0.88rem; color: #fff !important; }
.nav__menu-txt span { font-size: 0.72rem; color: rgba(255,255,255,0.5) !important; margin-top: 1px; }
.nav__item--right .nav__menu { left: auto; right: 0; }
.nav__menu a { padding: 0.6rem 0.8rem; border-radius: 9px; font-size: 0.92rem; color: rgba(255,255,255,0.82) !important; transition: background 0.2s ease, color 0.2s ease; }
.nav__menu a::after { display: none; }
.nav__menu a:hover { background: rgba(255,255,255,0.07); color: #fff !important; }

/* burger + mobile */
.nav__burger { display: none; flex-direction: column; gap: 5px; width: 30px; height: 30px; justify-content: center; align-items: center; margin-left: auto; }
.nav__burger span { width: 22px; height: 2px; background: currentColor; transition: transform 0.3s var(--ease), opacity 0.3s; }
.nav[data-nav-theme="dark"] .nav__burger { color: #fff; }
.nav[data-nav-theme="light"] .nav__burger,
.nav[data-nav-theme="paper"] .nav__burger { color: var(--ink); }
.nav.is-open .nav__burger span:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav.is-open .nav__burger span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.nav__mobile {
  display: none; flex-direction: column; gap: 0.4rem; padding: 1rem var(--gutter) 1.6rem;
  background: rgba(20,22,23,0.98); backdrop-filter: blur(14px);
  position: absolute; top: 100%; left: 0; right: 0;
  max-height: calc(100dvh - 120px); overflow-y: auto; overscroll-behavior: contain;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.65); border-top: 1px solid rgba(255,255,255,0.08);
}
.nav__mobile a { padding: 0.7rem 0; color: rgba(255,255,255,0.85); font-weight: 500; border-bottom: 1px solid rgba(255,255,255,0.06); }
.nav__m-label { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--warm); padding: 0.9rem 0 0.2rem; display: block; }
.nav__mobile .nav__m-sub { padding-left: 0.9rem; font-size: 0.95rem; color: rgba(255,255,255,0.72); }
.nav__mobile .btn { margin-top: 0.6rem; }
.nav.is-open .nav__mobile { display: flex; }

/* ---------- Gradient mesh + blobs ---------- */
.hero__mesh, .product__mesh, .cta__mesh, .services__glow { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.blob {
  position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.55;
  will-change: transform; animation: float 18s var(--ease) infinite alternate;
}
.blob--1 { width: 46vw; height: 46vw; max-width: 640px; max-height: 640px; left: -8vw; top: -10vh;
  background: radial-gradient(circle, #9a3fc1, transparent 68%); }
.blob--2 { width: 40vw; height: 40vw; max-width: 560px; max-height: 560px; right: -6vw; top: 6vh;
  background: radial-gradient(circle, #3a43ad, transparent 66%); animation-delay: -6s; }
.blob--3 { width: 38vw; height: 38vw; max-width: 520px; max-height: 520px; left: 30vw; bottom: -18vh;
  background: radial-gradient(circle, #4cd1f4, transparent 66%); opacity: 0.4; animation-delay: -11s; }
@keyframes float {
  0%   { transform: translate(0,0) scale(1); }
  50%  { transform: translate(4vw, 3vh) scale(1.08); }
  100% { transform: translate(-3vw, -2vh) scale(0.96); }
}
/* Film grain — ~12% over gradient sections kills banding, reads premium */
.hero__grain, .grain {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.12; mix-blend-mode: overlay; z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Blueprint grid — faint guide lines behind hero, fades toward bottom */
.hero__grid {
  position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: 0.6;
  background-image:
    linear-gradient(rgba(76,209,244,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(76,209,244,0.05) 1px, transparent 1px);
  background-size: 52px 52px;
  -webkit-mask-image: radial-gradient(130% 95% at 50% 0%, #000 35%, transparent 78%);
  mask-image: radial-gradient(130% 95% at 50% 0%, #000 35%, transparent 78%);
}

/* Kinetic per-word headline reveal (hero + any .split heading) */
.split .word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.28em; margin-bottom: -0.28em; }
.split .word__in { display: inline-block; transform: translateY(112%); transition: transform 0.85s cubic-bezier(0.22,1,0.36,1); transition-delay: calc(var(--wi) * 50ms + 60ms); }
.split.is-revealed .word__in { transform: none; }

/* ---------- HERO ---------- */
.hero {
  position: relative; background: var(--ink); color: var(--text-on-dark);
  min-height: calc(100vh - 116px); display: flex; align-items: center;
  padding-block: clamp(3rem, 8vh, 7rem); overflow: hidden;
}
.hero__inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 3rem; align-items: center; }
/* readability scrim: darkens the charcoal behind the copy column so text never fights the mesh */
.hero__copy { position: relative; }
.hero__copy::before {
  content: ""; position: absolute; inset: -8% -12% -8% -14%; z-index: -1; pointer-events: none;
  background: radial-gradient(70% 80% at 30% 50%, rgba(20,22,23,0.78), rgba(20,22,23,0.4) 55%, transparent 78%);
}
.hero__title { font-size: var(--fs-hero); margin: 1.1rem 0 1.4rem; color: #fff; }
.hero__title-accent { display: inline-block; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }
.btn-lg { --pad-y: 1.1rem; padding: 1.1rem 2rem; font-size: 1.05rem; }
.hero__meta { margin-top: 2.2rem; font-size: 0.92rem; color: var(--text-on-dark-dim); display: flex; align-items: center; gap: 0.6rem; }
.hero__meta-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--warm); box-shadow: 0 0 0 4px rgba(255,200,97,0.2); animation: pulse 2.4s ease infinite; }
@keyframes pulse { 0%,100%{ box-shadow:0 0 0 4px rgba(255,200,97,0.2);} 50%{ box-shadow:0 0 0 9px rgba(255,200,97,0.0);} }

/* hero orb visual */
.hero__visual { display: flex; justify-content: center; align-items: center; }
.orb { position: relative; width: clamp(240px, 30vw, 380px); aspect-ratio: 1; }
.orb__core {
  position: absolute; inset: 18%; border-radius: 50%;
  background: var(--grad-conic); filter: blur(2px); animation: spin 14s linear infinite;
  box-shadow: 0 0 90px -10px rgba(76,209,244,0.55), inset 0 0 60px rgba(0,0,0,0.35);
}
.orb__glass {
  position: absolute; inset: 18%; border-radius: 50%;
  background: radial-gradient(120% 120% at 30% 25%, rgba(255,255,255,0.45), rgba(255,255,255,0.05) 40%, transparent 60%);
  border: 1px solid rgba(255,255,255,0.18); backdrop-filter: blur(2px);
}
.orb__ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,0.14); animation: spin 26s linear infinite; }
.orb__ring--2 { inset: 9%; border-style: dashed; border-color: rgba(76,209,244,0.25); animation-duration: 18s; animation-direction: reverse; }
@keyframes spin { to { transform: rotate(360deg); } }

/* scroll cue */
.hero__scroll { position: absolute; left: 50%; bottom: 1.6rem; transform: translateX(-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; color: var(--text-on-dark-dim); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; }
.hero__scroll-line { width: 1px; height: 46px; background: linear-gradient(var(--warm), transparent); position: relative; overflow: hidden; }
.hero__scroll-line::after { content: ""; position: absolute; top: -50%; left: 0; width: 100%; height: 50%; background: var(--warm); animation: drop 1.8s var(--ease) infinite; }
@keyframes drop { 0%{ top:-50%;} 60%,100%{ top:100%;} }

/* ---------- Trust marquee ---------- */
.trust { background: var(--ink); color: var(--text-on-dark); padding-block: 2.4rem 3rem; border-top: 1px solid rgba(255,255,255,0.06); overflow: hidden; }
.trust__label { text-align: center; font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-on-dark-dim); margin-bottom: 1.6rem; }
.marquee { position: relative; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee__track { display: flex; gap: 4rem; width: max-content; animation: marquee 28s linear infinite; }
.marquee__track a, .marquee__track span { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.2rem, 2.2vw, 1.85rem); color: rgba(255,255,255,0.55); white-space: nowrap; transition: color 0.3s ease; }
.marquee__track a:hover { color: #fff; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Section head ---------- */
.section-head { max-width: 720px; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head__title { font-size: var(--fs-h2); margin: 1rem 0 1.1rem; }

/* ---------- Pillars / cards ---------- */
.pillars__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.card {
  position: relative; padding: 2.2rem; border-radius: var(--radius);
  background: var(--paper); border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s ease;
  transform-style: preserve-3d;
}
.card:hover { transform: translateY(-6px); box-shadow: 0 34px 70px -30px rgba(58,67,173,0.35); border-color: transparent; }
.card::before { content: ""; position: absolute; inset: 0; border-radius: var(--radius); padding: 1px; background: var(--grad); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 0.4s ease; }
.card:hover::before { opacity: 1; }
.card__num { font-family: var(--font-head); font-weight: 800; font-size: 0.9rem; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.card h3 { font-size: var(--fs-h3); margin: 0.8rem 0 0.7rem; color: var(--ink); }
.card p { color: var(--text-on-light-dim); }

/* ---------- Services ---------- */
.services { position: relative; overflow: hidden; }
.services__glow { background: radial-gradient(60% 50% at 80% 0%, rgba(58,67,173,0.35), transparent 70%); }
.services__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; position: relative; z-index: 2; }
.svc {
  padding: 2.4rem; border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.06);
  -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.12);
  transition: transform 0.45s var(--ease), border-color 0.4s ease, background 0.4s ease;
}
.svc:hover { transform: translateY(-6px); border-color: rgba(76,209,244,0.4); background: linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.03)); }
.svc__head { margin-bottom: 1.2rem; }
.svc__tag { display: inline-block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.3rem 0.7rem; border-radius: 100px; color: var(--accent); border: 1px solid rgba(76,209,244,0.4); margin-bottom: 1rem; }
.svc__tag--alt { color: #d59bef; border-color: rgba(154,63,193,0.5); }
.svc__tag--build { color: var(--warm); border-color: rgba(255,200,97,0.45); }
.svc h3 { font-size: var(--fs-h3); }
.svc__desc { color: var(--text-on-dark-dim); margin-bottom: 1.4rem; }
.svc__list { display: grid; gap: 0.85rem; margin-bottom: 1.8rem; }
.svc__list li { position: relative; padding-left: 1.7rem; color: rgba(255,255,255,0.82); }
.svc__list li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 9px; height: 9px; border-radius: 50%; background: var(--grad); }

/* ---------- Product moment ---------- */
.product { position: relative; background: var(--ink-900); overflow: hidden; }
.product__inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.product h2 { font-size: var(--fs-h2); margin: 1rem 0 1.1rem; }
.product__points { display: grid; gap: 0.9rem; margin: 1.6rem 0 2rem; }
.product__points li { padding-left: 1.7rem; position: relative; color: var(--text-on-dark-dim); }
.product__points strong { color: #fff; }
.product__points li::before { content: "→"; position: absolute; left: 0; color: var(--accent); }

/* product window mock */
.window { border-radius: var(--radius); overflow: hidden; border: 1px solid rgba(255,255,255,0.12); background: #1a1c1d; box-shadow: 0 50px 90px -40px rgba(0,0,0,0.8), 0 0 70px -20px rgba(76,209,244,0.25); }
.window__bar { display: flex; gap: 0.5rem; padding: 0.9rem 1.1rem; background: rgba(255,255,255,0.04); border-bottom: 1px solid rgba(255,255,255,0.07); }
.window__bar span { width: 11px; height: 11px; border-radius: 50%; background: rgba(255,255,255,0.18); }
.window__bar span:first-child { background: #ff5f57; } .window__bar span:nth-child(2) { background: #febc2e; } .window__bar span:nth-child(3) { background: #28c840; }
.window__body { padding: 1.6rem; display: grid; gap: 0.9rem; }
.window__line { height: 12px; border-radius: 6px; background: rgba(255,255,255,0.09); }
.window__line--head { height: 18px; width: 60%; background: var(--grad); opacity: 0.85; }
.w-90{width:90%;}.w-80{width:80%;}.w-70{width:70%;}.w-50{width:50%;}
.window__chip { align-self: start; font-size: 0.8rem; font-weight: 600; padding: 0.4rem 0.8rem; border-radius: 100px; color: var(--accent); background: rgba(76,209,244,0.12); border: 1px solid rgba(76,209,244,0.3); }
.window__bars { display: flex; align-items: flex-end; gap: 0.6rem; height: 90px; margin-top: 0.6rem; }
.window__bars span { flex: 1; height: var(--h); border-radius: 6px 6px 0 0; background: var(--grad); opacity: 0.85; }

/* product capability bento */
.product__bento { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.1rem; margin-top: 3.5rem; }
.bento { position: relative; padding: 1.8rem; border-radius: var(--radius); background: rgba(255,255,255,0.05); -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); border: 1px solid rgba(255,255,255,0.12); overflow: hidden; transition: transform 0.4s var(--ease), border-color 0.4s ease; }
.bento:hover { transform: translateY(-4px); border-color: rgba(76,209,244,0.4); }
.bento::before { content: ""; position: absolute; inset: 0; border-radius: var(--radius); padding: 1px; background: var(--grad-bright); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 0.4s ease; }
.bento:hover::before { opacity: 0.8; }
.bento--wide { grid-column: span 3; }
.bento--reg { grid-column: span 3; }
.bento__icon { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--warm); }
.bento h3 { font-size: 1.15rem; margin: 0.7rem 0 0.5rem; color: #fff; }
.bento p { color: var(--text-on-dark-dim); font-size: 0.96rem; }

/* ---------- Proof ---------- */
.proof .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-bottom: 3.5rem; }
.stat { padding: 1.6rem 1.2rem; border-radius: var(--radius); background: var(--paper-50); border: 1px solid var(--line); }
.stat__num { font-family: var(--font-head); font-weight: 800; font-size: clamp(2.4rem, 4vw, 3.4rem); line-height: 1.02; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; display: block; }
.stat__num--text { font-size: clamp(1.6rem, 2.8vw, 2.3rem); }
.stat__label { display: block; margin-top: 0.7rem; font-size: 0.92rem; color: var(--text-on-light-dim); }
.proof__sub { text-align: center; font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-on-light-dim); margin-bottom: 1.4rem; }
.media { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1.5rem, 5vw, 4rem); margin-bottom: 3rem; }
.media a, .media span { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.1rem, 2vw, 1.6rem); color: var(--ink); opacity: 0.55; transition: opacity 0.3s ease, color 0.3s ease; }
.media a:hover { opacity: 1; color: var(--secondary); }
.badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.8rem; }
.badge { font-size: 0.82rem; font-weight: 500; padding: 0.55rem 1.1rem; border-radius: 100px; border: 1px solid var(--line); color: var(--text-on-light-dim); background: var(--paper); transition: border-color 0.3s ease, color 0.3s ease; }
a.badge:hover { border-color: var(--secondary); color: var(--ink); }

/* ---------- How it works ---------- */
.steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem; counter-reset: step; list-style: none; padding: 0; margin: 0; }
.steps li::marker { content: ""; }
.step { position: relative; padding: 2rem 1.6rem; border-radius: var(--radius); background: var(--paper); border: 1px solid var(--line); }
.step__num { font-family: var(--font-head); font-weight: 800; font-size: 2.2rem; -webkit-text-fill-color: transparent; -webkit-text-stroke: 1.5px var(--secondary); color: transparent; opacity: 0.7; }
.step h3 { font-size: var(--fs-h3); margin: 0.6rem 0 0.6rem; color: var(--ink); }
.step p { color: var(--text-on-light-dim); font-size: 0.96rem; }
.step:not(:last-child)::after { content: ""; position: absolute; top: 3.2rem; right: -0.7rem; width: 1.4rem; height: 2px; background: var(--grad); opacity: 0.5; }

/* ---------- CTA + newsletter ---------- */
.cta { position: relative; background: var(--ink); overflow: hidden; }
.cta__inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 3rem; align-items: center; }
.cta__lead { position: relative; }
.cta__lead::before {
  content: ""; position: absolute; inset: -12% -14%; z-index: -1; pointer-events: none;
  background: radial-gradient(78% 88% at 35% 50%, rgba(20,22,23,0.82), rgba(20,22,23,0.45) 55%, transparent 82%);
}
.cta h2 { font-size: var(--fs-h1); margin-bottom: 1.1rem; }
.newsletter { padding: 2rem; border-radius: var(--radius-lg); background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); backdrop-filter: blur(8px); }
.newsletter__title { font-family: var(--font-head); font-weight: 700; font-size: 1.25rem; color: #fff; }
.newsletter__sub { font-size: 0.9rem; color: var(--text-on-dark-dim); margin: 0.5rem 0 1.4rem; }
.newsletter__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; margin-bottom: 0.8rem; }
.newsletter input { width: 100%; padding: 0.9rem 1rem; border-radius: var(--radius-sm); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); color: #fff; font: inherit; font-size: 0.95rem; margin-bottom: 0.8rem; transition: border-color 0.3s ease, background 0.3s ease; }
.newsletter__row input { margin-bottom: 0; }
.newsletter input::placeholder { color: rgba(255,255,255,0.45); }
.newsletter input:focus { border-color: var(--accent); background: rgba(255,255,255,0.09); outline: none; }
.newsletter__btn { width: 100%; margin-top: 0.4rem; }
.newsletter__note { font-size: 0.85rem; margin-top: 0.8rem; min-height: 1.1rem; color: var(--accent); }

/* ---------- Footer ---------- */
.footer { background: var(--ink-900); color: var(--text-on-dark-dim); padding-block: clamp(3.5rem, 7vw, 5rem) 2rem; border-top: 1px solid rgba(255,255,255,0.06); }
.footer__inner { display: grid; grid-template-columns: 1.3fr 2fr; gap: 3rem; padding-bottom: 3rem; }
.footer__logo { height: 36px; margin-bottom: 1.2rem; }
.footer__brand p { max-width: 36ch; font-size: 0.95rem; }
.footer__social { display: flex; gap: 0.7rem; margin-top: 1.4rem; }
.footer__social a { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255,255,255,0.14); font-size: 0.8rem; font-weight: 600; color: rgba(255,255,255,0.7); transition: all 0.3s ease; text-transform: lowercase; }
.footer__social a:hover { color: #fff; border-color: transparent; background: var(--grad); }
.footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.footer__col h4 { font-family: var(--font-head); font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.85); margin-bottom: 1rem; }
.footer__col a { display: block; padding: 0.35rem 0; font-size: 0.95rem; transition: color 0.25s ease; }
.footer__col a:hover { color: #fff; }
.footer__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,0.07); }
.footer__badges { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.footer__badges span, .footer__badges a { font-size: 0.78rem; padding: 0.4rem 0.8rem; border-radius: 100px; border: 1px solid rgba(255,255,255,0.12); transition: border-color 0.3s ease, color 0.3s ease; }
.footer__badges a:hover { border-color: rgba(255,255,255,0.5); color: #fff; }
.footer__copy { font-size: 0.85rem; }
.footer__recaptcha { display: block; margin-top: 0.4rem; font-size: 0.72rem; opacity: 0.6; }
.footer__recaptcha a { text-decoration: underline; }
.grecaptcha-badge { visibility: hidden !important; }

/* ---------- FAQ ---------- */
.faq__list { max-width: 820px; margin-inline: auto; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.5rem 0; font-family: var(--font-head); font-weight: 700; font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: var(--ink); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::marker { content: ""; }
.faq__icon { position: relative; flex: 0 0 auto; width: 20px; height: 20px; }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: var(--secondary); border-radius: 2px; }
.faq__icon::before { width: 16px; height: 2px; }
.faq__icon::after { width: 2px; height: 16px; transition: transform 0.3s var(--ease); }
.faq__item[open] .faq__icon::after { transform: translate(-50%,-50%) scaleY(0); }
.faq__a { padding: 0 0 1.5rem; max-width: 64ch; }
.faq__a p { color: var(--text-on-light-dim); }
.faq__item[open] .faq__a { animation: faq-in 0.4s var(--ease); }
@keyframes faq-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ============================================================
   INNER PAGES — page hero, services detail, about, contact
   ============================================================ */
.page-hero { position: relative; background: var(--ink); color: var(--text-on-dark); overflow: hidden; padding-block: clamp(6rem, 11vh, 7.5rem) clamp(3rem, 6vh, 5rem); }
.page-hero__inner { position: relative; z-index: 2; max-width: 900px; }
.page-hero__title { font-family: var(--font-head); font-weight: 800; line-height: 1.04; letter-spacing: -0.02em; font-size: var(--fs-h1); margin: 1rem 0 1.3rem; color: #fff; }
.page-hero__sub { font-size: var(--fs-lead); line-height: 1.5; color: var(--text-on-dark-dim); max-width: 62ch; }

.svc-detail { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(1.5rem, 5vw, 4rem); align-items: start; padding-block: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--line); }
.theme-dark .svc-detail { border-color: rgba(255,255,255,0.12); }
.svc-detail:first-of-type { border-top: 0; padding-top: 0; }
.svc-detail__num { font-family: var(--font-mono); color: var(--warm-deep); font-size: 0.82rem; letter-spacing: 0.2em; text-transform: uppercase; }
.theme-dark .svc-detail__num { color: var(--warm); }
.svc-detail h2 { font-size: var(--fs-h2); margin: 0.7rem 0 1rem; }
.svc-detail__lead { color: var(--text-on-light-dim); margin-bottom: 1.2rem; }
.theme-dark .svc-detail__lead { color: var(--text-on-dark-dim); }
.svc-detail__list { display: grid; gap: 0.85rem; }
.svc-detail__list li { position: relative; padding-left: 1.7rem; }
.svc-detail__list li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 9px; height: 9px; border-radius: 50%; background: var(--grad); }

.leaders { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.leader { padding: 2rem; border-radius: var(--radius); background: var(--paper); border: 1px solid var(--line); }
.leader h3 { font-size: var(--fs-h3); color: var(--ink); }
.leader__role { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--warm-deep); margin: 0.3rem 0 0.8rem; display: block; }
.leader p { color: var(--text-on-light-dim); font-size: 0.96rem; }

/* team photos + bio portraits */
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.team-card { margin: 0; display: block; width: 100%; text-align: left; background: transparent; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.team-card__photo { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; object-position: top center; border-radius: var(--radius); margin-bottom: 1rem; background: var(--paper-100); transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.team-card:hover .team-card__photo { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.team-card__more { display: inline-block; margin-top: 0.6rem; font-size: 0.82rem; font-weight: 600; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; opacity: 0; transform: translateY(4px); transition: opacity 0.3s ease, transform 0.3s ease; }
.team-card:hover .team-card__more, .team-card:focus-visible .team-card__more { opacity: 1; transform: none; }
@media (hover: none) { .team-card__more { opacity: 1; transform: none; } }
@media (max-width: 860px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .team-grid { grid-template-columns: 1fr 1fr; } }
.team-card h3 { font-size: 1.1rem; margin-bottom: 0.15rem; }
.team-card__role { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--warm-deep); display: block; margin-bottom: 0.5rem; }
.theme-dark .team-card__role { color: var(--warm); }
.team-card p { font-size: 0.92rem; }
.theme-light .team-card p { color: var(--text-on-light-dim); }
.theme-dark .team-card p { color: var(--text-on-dark-dim); }

/* modal (team bios + clickable cards) */
.modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 1.5rem; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; }
.modal.is-open { opacity: 1; visibility: visible; }
.modal__overlay { position: absolute; inset: 0; background: rgba(15,16,17,0.72); backdrop-filter: blur(6px); }
.modal__card { position: relative; z-index: 1; width: 100%; max-width: 640px; max-height: 86vh; overflow-y: auto; background: var(--paper); border-radius: var(--radius-lg); padding: clamp(1.6rem, 4vw, 2.6rem); box-shadow: 0 40px 90px -30px rgba(0,0,0,0.6); transform: translateY(16px) scale(0.98); transition: transform 0.35s var(--ease); }
.modal.is-open .modal__card { transform: none; }
.modal__close { position: absolute; top: 1rem; right: 1rem; width: 38px; height: 38px; border-radius: 50%; background: var(--paper-100); border: 0; display: grid; place-items: center; font-size: 1.3rem; line-height: 1; color: var(--ink); cursor: pointer; }
.modal__close:hover { background: var(--line); }
.modal__head { display: flex; gap: 1.2rem; align-items: center; margin-bottom: 1.3rem; }
.modal__photo { width: 92px; height: 124px; object-fit: cover; object-position: top center; border-radius: var(--radius-sm); flex: 0 0 auto; }
.modal__name { font-family: var(--font-head); font-weight: 800; font-size: 1.4rem; color: var(--ink); line-height: 1.1; }
.modal__role { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--warm-deep); margin-top: 0.4rem; }
.modal__bio p { color: var(--text-on-light-dim); line-height: 1.75; margin-bottom: 1rem; }
body.modal-open { overflow: hidden; }

/* scroll to top */
.to-top { position: fixed; right: 1.4rem; bottom: 1.4rem; z-index: 90; width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--grad); color: #fff; font-size: 1.25rem; cursor: pointer; display: grid; place-items: center; box-shadow: 0 14px 32px -10px rgba(58,67,173,0.6); opacity: 0; transform: translateY(12px) scale(0.9); pointer-events: none; transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); }
.to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { transform: translateY(-3px); }
@media (max-width: 600px) { .to-top { right: 1rem; bottom: 1rem; width: 44px; height: 44px; } }

/* ============================================================
   FROSTED GLASS CARDS (iOS-style, theme-aware) — never solid white on dark
   ============================================================ */
.card, .step, .leader, .blog-card, .stat {
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 18px 50px -28px rgba(40, 42, 43, 0.26);
}
[data-theme="dark"] .card, [data-theme="dark"] .step, [data-theme="dark"] .leader, [data-theme="dark"] .blog-card, [data-theme="dark"] .stat,
.theme-dark .card, .theme-dark .step, .theme-dark .leader, .theme-dark .blog-card, .theme-dark .stat {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 20px 50px -30px rgba(0, 0, 0, 0.55);
}
/* text adapts to the frosted card's context */
[data-theme="dark"] :is(.card, .step, .leader, .blog-card) h3,
.theme-dark :is(.card, .step, .leader, .blog-card) h3 { color: #fff; }
[data-theme="dark"] :is(.card, .step, .leader, .blog-card) p,
.theme-dark :is(.card, .step, .leader, .blog-card) p,
[data-theme="dark"] .stat__label, .theme-dark .stat__label { color: var(--text-on-dark-dim); }
[data-theme="dark"] .blog-card__date, .theme-dark .blog-card__date { color: var(--text-on-dark-dim); }
.bio-portrait { width: 100%; max-width: 380px; border-radius: var(--radius-lg); object-fit: cover; box-shadow: var(--shadow-card); }
.content-img { width: 100%; border-radius: var(--radius); object-fit: cover; }

/* blog post body + index */
.post-body { max-width: 760px; margin-inline: auto; }
.post-body p { margin-bottom: 1.1rem; color: var(--text-on-light-dim); line-height: 1.8; }
.post-body h2 { font-size: var(--fs-h3); margin: 2.1rem 0 0.8rem; color: var(--ink); }
.post-body h3 { margin: 1.6rem 0 0.6rem; color: var(--ink); }
.post-body img { width: 100%; height: auto; border-radius: var(--radius); margin: 1.6rem 0; }
.post-body ul, .post-body ol { margin: 0 0 1.2rem 1.3rem; display: grid; gap: 0.45rem; color: var(--text-on-light-dim); }
.post-body li { line-height: 1.7; }
.post-body a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
.post-body blockquote { border-left: 3px solid var(--secondary); padding-left: 1.1rem; margin: 1.6rem 0; font-style: italic; color: var(--text-on-light-dim); }
.post-meta { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--warm); display: inline-flex; gap: 0.8rem; }
.post-featured { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-lg); margin: 0 0 2rem; }
.author-box { display: flex; align-items: center; gap: 1rem; max-width: 760px; margin: 0 auto 2.2rem; padding: 0.9rem 1.2rem; border-radius: var(--radius); background: rgba(255,255,255,0.55); -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); border: 1px solid rgba(255,255,255,0.7); }
.author-box__photo { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; object-position: top center; flex: 0 0 auto; }
.author-box__label { display: block; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-on-light-dim); }
.author-box__name { display: block; font-weight: 700; color: var(--ink); }
.author-box__role { display: block; font-size: 0.85rem; color: var(--text-on-light-dim); }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.blog-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; border-radius: var(--radius); transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.3s ease; }
.blog-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-card); border-color: transparent; }
.blog-card__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--paper-100); }
.blog-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.blog-card:hover .blog-card__media img { transform: scale(1.05); }
.blog-card__media--ph { background: var(--grad); opacity: 0.85; }
.blog-card__body { display: flex; flex-direction: column; flex: 1; padding: 1.4rem 1.5rem 1.5rem; }
.blog-card.is-hidden { display: none; }
.blog-card__cat { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--warm-deep); }
.blog-filters { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-bottom: 2rem; }
.blog-filter { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.5rem 1rem; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--text-on-light-dim); cursor: pointer; transition: all 0.25s ease; }
.blog-filter:hover { border-color: var(--secondary); color: var(--ink); }
.blog-filter.is-active { background: var(--grad); border-color: transparent; color: #fff; }
.blog-card h3 { font-size: 1.12rem; line-height: 1.3; margin: 0.5rem 0; color: var(--ink); }
.blog-card p { font-size: 0.92rem; color: var(--text-on-light-dim); }
.blog-card__date { margin-top: auto; padding-top: 1rem; font-size: 0.8rem; color: var(--text-on-light-dim); }
@media (max-width: 860px) { .blog-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .blog-grid { grid-template-columns: 1fr; } }

.prose { max-width: 70ch; }
.legal-prose { max-width: 760px; }
.legal-prose h2 { font-size: var(--fs-h3); margin: 2.2rem 0 0.8rem; }
.legal-prose p { margin-bottom: 1.1rem; color: var(--text-on-light-dim); line-height: 1.75; }
.legal-list { margin: 0 0 1.2rem; padding-left: 1.3rem; display: grid; gap: 0.5rem; }
.legal-list li { list-style: disc; color: var(--text-on-light-dim); line-height: 1.7; }
.prose p { margin-bottom: 1.1rem; }
.theme-dark .prose p { color: var(--text-on-dark-dim); }
.theme-light .prose p { color: var(--text-on-light-dim); }

.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.field { display: block; margin-bottom: 1rem; }
.field label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.4rem; color: #fff; }
.field input, .field textarea, .field select { width: 100%; padding: 0.9rem 1rem; border-radius: var(--radius-sm); border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.06); color: #fff; font: inherit; font-size: 0.95rem; transition: border-color 0.3s ease, background 0.3s ease; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); background: rgba(255,255,255,0.09); }
.field textarea { min-height: 130px; resize: vertical; }
.contact-aside h3 { font-size: var(--fs-h3); margin-bottom: 1.2rem; }
.contact-aside ul { display: grid; gap: 0.9rem; }
.contact-aside li { padding-left: 1.7rem; position: relative; color: var(--text-on-dark-dim); }
.contact-aside li::before { content: "\2192"; position: absolute; left: 0; color: var(--warm); }
.form-note { font-size: 0.85rem; margin-top: 0.8rem; min-height: 1.1rem; color: var(--accent); }

@media (max-width: 860px) {
  .svc-detail, .contact-grid, .leaders { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* ============================================================
   FLAGSHIP FX — preloader, custom cursor, WebGL hero canvas
   ============================================================ */

/* WebGL hero canvas (behind grid/mesh/grain) */
.hero__gl { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }
.hero.gl-on .hero__mesh { opacity: 0; }      /* shader replaces CSS blobs when active */
.hero.gl-on .blob { animation: none; }

/* Preloader */
.preloader {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background: var(--ink-900);
  transition: transform 0.9s cubic-bezier(0.76,0,0.24,1);
}
.preloader.is-done { transform: translateY(-100%); }
.preloader__inner { display: flex; flex-direction: column; align-items: center; gap: 1.6rem; }
.preloader__logo { height: 42px; width: auto; opacity: 0; animation: pl-fade 0.8s var(--ease) forwards; }
.preloader__bar { width: 200px; height: 2px; background: rgba(255,255,255,0.12); border-radius: 2px; overflow: hidden; }
.preloader__bar span { display: block; height: 100%; width: 0%; background: var(--grad-bright); }
.preloader__count {
  position: absolute; bottom: 7vh; right: 7vw; font-family: var(--font-head); font-weight: 800;
  font-size: clamp(3rem, 12vw, 9rem); line-height: 1; color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,0.16); letter-spacing: -0.03em;
}
@keyframes pl-fade { to { opacity: 1; } }
body.pl-active { overflow: hidden; }

/* Custom cursor */
.cursor { position: fixed; top: 0; left: 0; z-index: 300; pointer-events: none; opacity: 0; mix-blend-mode: difference; }
body.has-cursor .cursor { opacity: 1; }
.cursor__dot { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #fff; transform: translate(-50%,-50%); transition: opacity 0.25s ease, transform 0.2s ease; }
.cursor__ring { position: absolute; width: 38px; height: 38px; border: 1.5px solid rgba(255,255,255,0.7); border-radius: 50%; transform: translate(-50%,-50%); transition: width 0.3s var(--ease), height 0.3s var(--ease), background 0.3s ease, border-color 0.3s ease; }
.cursor.is-hover .cursor__ring { width: 66px; height: 66px; background: rgba(255,255,255,0.1); border-color: transparent; }
.cursor.is-hover .cursor__dot { opacity: 0; }
body.has-cursor, body.has-cursor a, body.has-cursor button, body.has-cursor [data-magnetic], body.has-cursor [data-tilt] { cursor: none; }
body.has-cursor input, body.has-cursor textarea { cursor: text; }

/* 3D tilt perf hint */
[data-tilt] { transform-style: preserve-3d; will-change: transform; }

@media (hover: none), (prefers-reduced-motion: reduce) {
  .cursor { display: none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px) {
  .hero__inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero__visual { order: -1; }
  .orb { width: clamp(180px, 40vw, 260px); }
  .product__inner, .cta__inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .pillars__grid, .services__grid { grid-template-columns: 1fr; }
  .product__bento { grid-template-columns: repeat(2, 1fr); }
  .bento--wide, .bento--reg { grid-column: span 1; }
  .proof .stats { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .step:not(:last-child)::after { display: none; }
  .footer__inner { grid-template-columns: 1fr; gap: 2.5rem; }
}
@media (max-width: 760px) {
  .nav__links, .nav__actions { display: none; }
  .nav__burger { display: flex; }
  .util-banner__close { right: 0; }
  /* hero: tighter, CTA higher, smaller orb */
  .hero { min-height: auto; padding-block: 2.25rem 3rem; }
  .hero__inner { gap: 1.6rem; }
  .orb { width: clamp(120px, 36vw, 175px); }
  .hero__title { margin: 0.7rem 0 1rem; }
  .hero__actions { gap: 0.7rem; }
  .hero__actions .btn { flex: 1 1 100%; justify-content: center; }
  .hero__scroll { display: none; }
  .util-banner { font-size: 0.78rem; }
  .util-banner__inner { padding-right: 1.6rem; }
}
@media (max-width: 480px) {
  .proof .stats, .steps, .footer__cols, .newsletter__row, .product__bento { grid-template-columns: 1fr; }
}

/* event / webinar pages */
.event-meta { display:flex; flex-wrap:wrap; gap:0.6rem; justify-content:center; margin-top:1.7rem; }
.event-badge { font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; padding:0.5rem 1rem; border-radius:999px; border:1px solid rgba(255,255,255,0.18); color:var(--text-on-dark-dim); }
.event-badge--free { background:var(--grad); border-color:transparent; color:#fff; }
.event-embed { max-width:560px; margin:0 auto; border-radius:var(--radius); overflow:hidden; }
.event-embed iframe { display:block; border:0; border-radius:var(--radius); width:100%; }
.speakers-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; max-width:760px; margin:0 auto; }
.speaker { margin:0; }
.speaker .team-card__photo { margin-bottom:1rem; }
.speaker h3 { font-size:1.1rem; margin:0 0 0.15rem; color:var(--ink); }
@media (max-width:560px){ .speakers-grid{ grid-template-columns:1fr 1fr; } }

/* ============ Deep pass: per-page polish ============ */
.post-body table { border-collapse: collapse; margin: 1.6rem 0; font-size: 0.92rem; display: block; max-width: 100%; overflow-x: auto; }
.post-body th, .post-body td { border: 1px solid var(--line); padding: 0.6rem 0.85rem; text-align: left; vertical-align: top; }
.post-body thead th { background: var(--paper-100); font-weight: 700; }
.post-body img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
@media (max-width: 960px) { .svc-detail { grid-template-columns: 1fr; gap: 1.25rem; } }
.pillars__grid { align-items: stretch; }
.pillars__grid a.card { display: flex; flex-direction: column; height: 100%; }
.pillars__grid a.card .btn-text { margin-top: auto; }
[data-theme="light"] .blog-card, .theme-light .blog-card { background: #fff; border: 1px solid var(--line); }
.blog-card h3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.blog-card__body p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 560px) { .blog-filters { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 0.4rem; } .blog-filter { flex: 0 0 auto; } }
.team-card__role { line-height: 1.35; }
@media (max-width: 520px) { .team-card__role { letter-spacing: 0.08em; font-size: 0.68rem; } }
.modal__bio { max-width: 64ch; }
.modal__bio p { line-height: 1.65; margin-bottom: 0.9rem; }
.steps { overflow: clip; }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }
.footer__legal { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 0.5rem; }
.footer__legal a { font-size: 0.78rem; opacity: 0.7; }
.footer__legal a:hover { opacity: 1; }

/* deep pass wave 3 */
.proof .stat, .stats .stat { min-height: 168px; display: flex; flex-direction: column; justify-content: center; }
.field select { -webkit-appearance: none; appearance: none; padding-right: 2.6rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%239a3fc1' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; }
@media (max-width: 460px) { .team-grid { grid-template-columns: 1fr; } }
.footer__social a svg { width: 18px; height: 18px; }

.case-metric { display: block; font-family: var(--font-head); font-weight: 800; font-size: clamp(1.9rem, 4vw, 2.7rem); line-height: 1; margin-bottom: 0.7rem; letter-spacing: -0.02em; }

.blog-card.is-paged { display: none; }
.blog-grid.show-all .blog-card.is-paged { display: flex; }
.blog-more { text-align: center; margin-top: 2.5rem; }
.blog-grid.show-all + .blog-more, .blog-more.is-done { display: none; }

.contact-ways { margin-top: 1.8rem; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.contact-ways h3 { font-size: 1.05rem; margin-bottom: 0.5rem; }
.contact-addr { font-style: normal; color: var(--text-on-light-dim); line-height: 1.6; margin-top: 0.6rem; }

/* ============ Deep pass: section uniformity + dividers ============ */
/* uniform left edge: narrow sections share the full container width (same left edge as wide
   sections); only the text blocks inside are capped, left-aligned (no more centered/offset jump) */
/* text intros center within their section so content never sits left with an empty right gutter
   (narrow reverts to the base .narrow 820 centered reading column) */
.section-head { margin-left: auto; margin-right: auto; }
.prose { margin-left: auto; margin-right: auto; }
.section.faq .section-head, .section.faq .faq__list { margin-left: auto; margin-right: auto; }

/* divider between two adjacent same-family sections (no more two white blocks blending) */
section[data-theme="light"] + section[data-theme="light"],
section[data-theme="light"] + section[data-theme="paper"],
section[data-theme="paper"] + section[data-theme="light"],
section[data-theme="paper"] + section[data-theme="paper"] { border-top: 1px solid var(--line); }
section[data-theme="dark"] + section[data-theme="dark"] { border-top: 1px solid rgba(255,255,255,0.08); }

.steps--metrics { grid-template-columns: repeat(2, 1fr); gap: 1.6rem; }
.steps--metrics .step { padding: 1.6rem 1.8rem; }
@media (max-width: 680px) { .steps--metrics { grid-template-columns: 1fr; } }

/* Subtle grey gradient offset for FAQ sections (site-wide) */
.section.faq { background: linear-gradient(180deg, var(--paper-50) 0%, var(--paper) 70%); border-top: 0; }
.post-body + .faq__list { background: linear-gradient(180deg, var(--paper-50) 0%, var(--paper) 80%); padding: 1.6rem 1.85rem 0.4rem; border-radius: var(--radius); margin-top: 2.6rem; }

/* spacing when prose/heading follows a grid or card row (no more touching) */
.pillars__grid + .prose, .steps + .prose, .steps--metrics + .prose, .svc-detail + .prose,
.services__grid + .prose, .blog-grid + .prose, .team-grid + .prose, .speakers-grid + .prose,
.pillars__grid + .section-head, .steps + .section-head, .steps--metrics + .section-head,
.svc-detail + .section-head, .services__grid + .section-head { margin-top: clamp(2.2rem, 4.5vw, 3.2rem); }

.contact-social { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.contact-social a { color: var(--accent); font-weight: 600; }
.contact-social a:hover { color: #fff; }
.contact-aside p { color: var(--text-on-dark-dim); }

.cta__lead .btn { margin-top: clamp(1.6rem, 3vw, 2.2rem); }