/* ============================================================================
   marketing-about.css — premium /about page (Stripe / Linear / Vercel / Apple feel)
   Loaded only on /about via $page_head_extra. Depends on marketing.css tokens
   (--brick #ff4d00, --lava, --papaya, --off-black, --cream, --txt-on-* …) and
   reuses .sec/.sec--light/.sec--dark/.wrap/.eyebrow/.grad-text/.nx-btn plus the
   site-wide .reveal IntersectionObserver in _footer.php.

   Palette: black + white + #FF4D00 only. No fake metrics anywhere.
   Namespace: .abx-*  ·  Motion respects prefers-reduced-motion (bottom).
   ========================================================================== */

/* ---- reveal stagger (observer adds .in; we add per-item delay) ------------ */
.reveal[style*="--d"]{ transition-delay: var(--d); }

/* ---- section rhythm & headings (capped sizes per brief) ------------------ */
.abx section, section.abx-sec{ }
.abx-sec{ padding: 96px 0; position: relative; overflow: hidden; }
.abx-sec--tight{ padding: 80px 0; }
.abx-head{ max-width: 720px; }
.abx-head--center{ margin: 0 auto; text-align: center; }
.abx-h2{
    font-family: "Space Grotesk", "Inter", sans-serif; font-weight: 700;
    font-size: clamp(26px, 3.4vw, 34px); line-height: 1.12; letter-spacing: -.02em;
    margin: 14px 0 0;
}
.abx-lead{ margin: 16px 0 0; font-size: 17px; line-height: 1.65; }
.sec--light .abx-h2{ color: var(--txt-on-papaya); }
.sec--light .abx-lead{ color: var(--txt-on-papaya-muted); }
.sec--dark .abx-h2{ color: var(--txt-on-black); }
.sec--dark .abx-lead{ color: var(--txt-on-black-muted); }
.abx-eyebrow{ display:inline-flex; align-items:center; gap:8px; font-family:"Space Grotesk",sans-serif;
    font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--brick); }
.abx-eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--brick); }

/* ---- soft animated gradient blobs (subtle, brand-only) ------------------- */
.abx-blob{ position:absolute; border-radius:50%; filter:blur(70px); z-index:0; pointer-events:none;
    opacity:.5; animation: abxFloat 16s cubic-bezier(.4,0,.2,1) infinite alternate; }
@keyframes abxFloat{ from{ transform:translate3d(0,0,0) scale(1);} to{ transform:translate3d(30px,-28px,0) scale(1.1);} }
.abx-sec > .wrap{ position:relative; z-index:2; }

/* =====================================================================
   BUTTONS — primary CTA: glow · hover lift · shine · ripple · loading · focus
   ===================================================================== */
.abx-cta{ position:relative; overflow:hidden; isolation:isolate;
    box-shadow: 0 10px 30px -12px rgba(255,77,0,.55);
    transition: transform .2s var(--ease-out), box-shadow .25s var(--ease); }
.abx-cta:hover{ transform: translateY(-2px); box-shadow: 0 18px 44px -14px rgba(255,77,0,.7); }
.abx-cta:active{ transform: translateY(0); }
.abx-cta:focus-visible{ outline: 3px solid var(--brick); outline-offset: 3px; }
/* animated shine sweep */
.abx-cta::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
    background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.35) 48%, transparent 66%);
    transform: translateX(-120%); }
.abx-cta:hover::before{ transform: translateX(120%); transition: transform .8s var(--ease); }
/* ripple (JS injects .abx-ripple at click point) */
.abx-ripple{ position:absolute; border-radius:50%; transform:translate(-50%,-50%) scale(0);
    background: rgba(255,255,255,.45); pointer-events:none; z-index:-1; animation: abxRipple .6s ease-out forwards; }
@keyframes abxRipple{ to{ transform:translate(-50%,-50%) scale(1); opacity:0; } }
/* loading state */
.abx-cta.is-loading{ color: transparent !important; pointer-events:none; }
.abx-cta.is-loading svg{ opacity:0; }
.abx-cta.is-loading::after{ content:""; position:absolute; left:50%; top:50%; width:18px; height:18px;
    margin:-9px 0 0 -9px; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%;
    animation: abxSpin .7s linear infinite; }
@keyframes abxSpin{ to{ transform: rotate(360deg); } }

/* =====================================================================
   HERO (white)
   ===================================================================== */
.abx-hero{ position:relative; overflow:hidden; padding:160px 0 96px; background: var(--cream); }
.abx-hero .abx-blob--1{ width:520px; height:520px; top:-160px; left:-120px;
    background: radial-gradient(circle, rgba(255,77,0,.22), transparent 68%); }
.abx-hero .abx-blob--2{ width:420px; height:420px; top:60px; right:-140px;
    background: radial-gradient(circle, rgba(255,106,26,.16), transparent 70%); animation-delay:-6s; }
.abx-hero__grid{ position:relative; z-index:2; display:grid; grid-template-columns: 1.05fr .95fr;
    gap:56px; align-items:center; }
.abx-badge{ display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:999px;
    background:#fff; border:1px solid var(--line-on-papaya); font-size:13px; font-weight:600;
    color:var(--txt-on-papaya); box-shadow:0 2px 10px rgba(0,0,0,.04); }
.abx-badge .abx-badge__dot{ width:7px; height:7px; border-radius:50%; background:var(--brick);
    box-shadow:0 0 0 4px rgba(255,77,0,.16); }
.abx-hero__h1{ font-family:"Space Grotesk","Inter",sans-serif; font-weight:700;
    font-size: clamp(34px, 5vw, 54px); line-height:1.06; letter-spacing:-.03em;
    color:var(--txt-on-papaya); margin:22px 0 0; }
.abx-hero__lead{ margin:20px 0 0; max-width:520px; font-size:18px; line-height:1.6; color:var(--txt-on-papaya-muted); }
.abx-hero__ctas{ margin:32px 0 0; display:flex; gap:14px; flex-wrap:wrap; }

/* hero product image (real mockup) — rounded, static, no shadow */
.abx-hero__img{ display:block; width:100%; height:auto; border-radius:16px; }

/* =====================================================================
   SPLIT ROWS (Why / Mission / Different / Security / Growth / Developer / Commitment)
   ===================================================================== */
.abx-split{ display:grid; grid-template-columns: 1fr 1fr; gap:56px; align-items:center; }
.abx-split--rev .abx-split__media{ order:2; }
.abx-split__body{ max-width:520px; }
.abx-split__list{ list-style:none; margin:22px 0 0; padding:0; display:grid; gap:14px; }
.abx-split__list li{ display:flex; gap:12px; align-items:flex-start; font-size:15px; line-height:1.55; }
.sec--light .abx-split__list li{ color:var(--txt-on-papaya); }
.sec--dark .abx-split__list li{ color:var(--txt-on-black); }
.abx-tick{ flex:0 0 auto; width:22px; height:22px; border-radius:6px; display:grid; place-items:center;
    background: rgba(255,77,0,.12); color:var(--brick); margin-top:1px; }
.abx-tick svg{ width:13px; height:13px; }

/* premium "panel" illustration used on split media (icon tiles / rounded panel) */
/* BENTO grid — asymmetric cells (one tall hero, one wide) on the section bg.
   Layout from 4 tiles:  [1][2] / [1][3] / [4 4]  */
.abx-panel{ display:grid; grid-template-columns:1fr 1fr; grid-auto-rows:1fr; gap:14px; }
.abx-panel__tile{ position:relative; overflow:hidden; border-radius:16px; padding:20px;
    display:flex; flex-direction:column; gap:10px; min-height:118px;
    transition:transform .3s var(--ease-out), border-color .3s var(--ease), box-shadow .3s var(--ease); }
.sec--light .abx-panel__tile{ background:#fff; border:1px solid var(--line-on-papaya); box-shadow:0 18px 44px -34px rgba(0,0,0,.28); }
.sec--dark .abx-panel__tile{ background:linear-gradient(180deg,#161616,#111); border:1px solid var(--line-on-black); }
.abx-panel__tile:hover{ transform:translateY(-4px); }
.sec--light .abx-panel__tile:hover{ border-color:rgba(255,77,0,.4); }
.sec--dark .abx-panel__tile:hover{ border-color:rgba(255,77,0,.45); box-shadow:0 24px 50px -30px rgba(0,0,0,.85); }
/* bento sizing + hero flourish */
.abx-panel__tile:nth-child(1){ grid-row:span 2; padding:24px; justify-content:flex-start; }
.abx-panel__tile:nth-child(1)::after{ content:""; position:absolute; width:200px; height:200px; right:-70px; top:-70px;
    background:radial-gradient(circle, rgba(255,77,0,.16), transparent 70%); pointer-events:none; }
.abx-panel__tile:nth-child(1) .abx-panel__ico{ width:46px; height:46px; }
.abx-panel__tile:nth-child(1) .abx-panel__ico svg{ width:24px; height:24px; }
.abx-panel__tile:nth-child(1) b{ font-size:16px; }
.abx-panel__tile:nth-child(4){ grid-column:1 / -1; }
.abx-panel__ico{ width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
    background:linear-gradient(135deg,var(--brick),var(--lava)); color:#fff; position:relative; z-index:1;
    transition:transform .3s var(--ease-out); }
.abx-panel__ico svg{ width:20px; height:20px; }
.abx-panel__tile:hover .abx-panel__ico{ transform:translateY(-2px) scale(1.05); }
.abx-panel__tile b{ font-size:14px; position:relative; z-index:1; }
.sec--light .abx-panel__tile b{ color:var(--txt-on-papaya); }
.sec--dark .abx-panel__tile b{ color:var(--txt-on-black); }
.abx-panel__tile span{ font-size:12.5px; line-height:1.5; position:relative; z-index:1; }
.sec--light .abx-panel__tile span{ color:var(--txt-on-papaya-muted); }
.sec--dark .abx-panel__tile span{ color:var(--txt-on-black-muted); }

/* ---- illustrated bento cells (unDraw art, baked #FF4D00 accent) --------- */
/* proportions: wider dominant hero column + taller rows so cells breathe */
.abx-panel--ill{ grid-template-columns:1.25fr 1fr; grid-auto-rows:minmax(140px,auto); gap:16px; }
.abx-icell{ position:relative; overflow:hidden; border-radius:16px; padding:20px;
    display:flex; flex-direction:column; gap:12px; justify-content:space-between;
    transition:transform .3s var(--ease-out), border-color .3s var(--ease), box-shadow .3s var(--ease); }
/* Tiles are ALWAYS white (even on black sections) so the unDraw art —
   which is drawn for a light background — never bleeds into the card. */
.abx-icell{ background:#fff; }
.sec--light .abx-icell{ border:1px solid var(--line-on-papaya); box-shadow:0 18px 44px -34px rgba(0,0,0,.28); }
.sec--dark .abx-icell{ border:1px solid rgba(255,255,255,.14); box-shadow:0 26px 60px -34px rgba(0,0,0,.75); }
.abx-icell:hover{ transform:translateY(-4px); }
.sec--light .abx-icell:hover{ border-color:rgba(255,77,0,.4); }
.sec--dark .abx-icell:hover{ border-color:rgba(255,77,0,.5); box-shadow:0 32px 66px -30px rgba(0,0,0,.9); }
.abx-icell__art{ width:100%; height:auto; max-height:120px; object-fit:contain; }
.abx-icell__txt b{ display:block; font-family:"Space Grotesk",sans-serif; font-size:20px; letter-spacing:-.01em; line-height:1.15; color:var(--txt-on-papaya); }
.abx-icell__txt span{ display:block; font-size:13px; line-height:1.5; margin-top:5px; color:var(--txt-on-papaya-muted); }
/* hero cell — tall & wider, big heading, larger art below the text */
.abx-icell--hero{ grid-row:span 2; padding:28px; }
.abx-icell--hero .abx-icell__txt span{ font-size:14.5px; margin-top:8px; }
.abx-icell--hero .abx-icell__art{ max-height:230px; margin-top:auto; }
/* wide cell — art beside the text */
.abx-icell--wide{ grid-column:1 / -1; flex-direction:row; align-items:center; gap:22px; }
.abx-icell--wide .abx-icell__txt{ flex:1; }
.abx-icell--wide .abx-icell__art{ width:168px; flex:0 0 auto; max-height:112px; }

/* =====================================================================
   PRINCIPLES (black, open grid — no tiles-on-black)
   ===================================================================== */
.abx-princ{ margin-top:56px; display:grid; grid-template-columns:repeat(3,1fr); gap:2px 44px; }
.abx-princ__item{ padding:28px 0 30px; border-top:1px solid var(--line-on-black); }
.abx-princ__ico{ width:40px; height:40px; border-radius:11px; display:grid; place-items:center;
    background:rgba(255,77,0,.12); color:var(--brick); margin-bottom:16px; transition:transform .3s var(--ease-out); }
.abx-princ__ico svg{ width:20px; height:20px; }
.abx-princ__item:hover .abx-princ__ico{ transform:translateY(-3px) rotate(-4deg); }
.abx-princ__item h3{ font-size:18px; color:var(--txt-on-black); margin-bottom:8px; }
.abx-princ__item p{ font-size:14px; line-height:1.6; color:var(--txt-on-black-muted); }

/* =====================================================================
   PLATFORM OVERVIEW — 12 feature cards (black, elevated surface not flat)
   ===================================================================== */
.abx-features{ margin-top:56px; display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.abx-fcard{ position:relative; border-radius:14px; padding:22px; overflow:hidden;
    background: linear-gradient(180deg,#161616,#111); border:1px solid var(--line-on-black);
    transition: transform .3s var(--ease-out), border-color .3s var(--ease), box-shadow .3s var(--ease); }
.abx-fcard:hover{ transform:translateY(-5px); border-color:rgba(255,77,0,.45);
    box-shadow:0 24px 50px -30px rgba(0,0,0,.9); }
.abx-fcard__ico{ width:42px; height:42px; border-radius:11px; display:grid; place-items:center;
    background:rgba(255,77,0,.13); color:var(--brick); margin-bottom:16px; transition:transform .3s var(--ease-out); }
.abx-fcard__ico svg{ width:21px; height:21px; }
.abx-fcard:hover .abx-fcard__ico{ transform:translateY(-2px) scale(1.06); }
.abx-fcard h3{ font-size:15.5px; color:var(--txt-on-black); margin-bottom:6px; }
.abx-fcard p{ font-size:13px; line-height:1.55; color:var(--txt-on-black-muted); }

/* =====================================================================
   FINAL CTA (white)
   ===================================================================== */
.abx-final{ text-align:center; }
.abx-final__card{ position:relative; max-width:720px; margin:0 auto; }
.abx-final__h2{ font-family:"Space Grotesk",sans-serif; font-weight:700;
    font-size:clamp(28px,4vw,42px); line-height:1.08; letter-spacing:-.025em; color:var(--txt-on-papaya); margin:14px 0 0; }
.abx-final__lead{ margin:18px auto 0; max-width:520px; font-size:17px; line-height:1.6; color:var(--txt-on-papaya-muted); }
.abx-chips{ list-style:none; margin:26px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px 20px; justify-content:center; }
.abx-chips li{ display:inline-flex; align-items:center; gap:8px; font-size:14px; color:var(--txt-on-papaya); }
.abx-chip__c{ width:16px; height:16px; border-radius:50%; flex:0 0 auto; position:relative;
    background:linear-gradient(135deg,var(--brick),var(--lava)); }
.abx-chip__c::after{ content:""; position:absolute; left:5px; top:3px; width:4px; height:7px;
    border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); }
.abx-final__ctas{ margin:32px 0 0; display:inline-flex; gap:14px; flex-wrap:wrap; justify-content:center; }
.abx-final__fine{ margin:18px 0 0; font-size:13px; color:var(--txt-on-papaya-muted); }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 960px){
    .abx-hero__grid{ grid-template-columns:1fr; gap:44px; }
    .abx-hero__img{ max-width:520px; margin:0 auto; }
    .abx-split{ grid-template-columns:1fr; gap:36px; }
    .abx-split--rev .abx-split__media{ order:0; }
    .abx-features{ grid-template-columns:repeat(3,1fr); }
    .abx-princ{ grid-template-columns:repeat(2,1fr); gap:0 36px; }
}
@media (max-width: 620px){
    .abx-sec{ padding:72px 0; }
    .abx-hero{ padding:132px 0 76px; }
    .abx-features{ grid-template-columns:1fr 1fr; }
    .abx-princ{ grid-template-columns:1fr; }
    .abx-panel{ grid-template-columns:1fr; grid-auto-rows:auto; }
    .abx-panel__tile:nth-child(1){ grid-row:auto; }
    .abx-panel__tile:nth-child(4){ grid-column:auto; }
    .abx-icell--hero{ grid-row:auto; }
    .abx-icell--wide{ grid-column:auto; flex-direction:column; align-items:flex-start; }
    .abx-icell--wide .abx-icell__art{ width:100%; max-height:130px; }
    .abx-hero__ctas .nx-btn, .abx-final__ctas .nx-btn{ width:100%; }
}
@media (max-width: 400px){
    .abx-features{ grid-template-columns:1fr; }
}

/* =====================================================================
   REDUCED MOTION
   ===================================================================== */
@media (prefers-reduced-motion: reduce){
    .abx-blob, .abx-hero__img{ animation: none; }
    .abx-cta::before{ display:none; }
    .abx-cta:hover, .abx-fcard:hover{ transform: none; }
}