/* ============================================================================
   Global Data — About page styles. SELF-CONTAINED.
   Same token system as solutions.css / use-cases.css — no dependency on
   portal.css or Tailwind. Pairs with about.js. Markup scoped under .about.
   Tokens: primary #13ec80 / accessible green #047857 / Manrope /
   Material Symbols Outlined.
   ============================================================================ */

.about{
  --p:#13ec80; --p-dark:#0eb561;
  --green:#047857; --green-700:#065f46; --green-soft:#ecfdf5; --green-line:#a7f3d0;
  --ink:#0f172a; --body:#475569; --muted:#64748b; --faint:#94a3b8;
  --line:#e2e8f0; --line-soft:#eef2f7; --surface:#ffffff; --surface-2:#f8fafc; --surface-3:#f1f5f9;
  --deep:#06281a;
  font-family:'Manrope',sans-serif; color:var(--ink); background:#fff;
}
.about *{ box-sizing:border-box; }
.about .material-symbols-outlined{ font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;
  width:1em; height:1em; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; flex:none; line-height:1; }

.about .gab-wrap{ max-width:80rem; margin-inline:auto; padding-inline:24px; }
@media (min-width:1024px){ .about .gab-wrap{ padding-inline:48px; } }

/* ---- shared: badge, buttons, reveal ---- */
.about .pt-badge{ display:inline-flex; align-items:center; gap:8px; font-size:11px; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:var(--green-700); background:var(--green-soft); padding:7px 14px; border-radius:100px; border:1px solid var(--green-line); }
.about .pt-dot{ width:7px; height:7px; border-radius:50%; background:var(--p); box-shadow:0 0 0 0 rgba(19,236,128,.55); animation:gab-pulse 1.8s infinite; }
@keyframes gab-pulse{ 0%{box-shadow:0 0 0 0 rgba(19,236,128,.55)} 70%{box-shadow:0 0 0 7px rgba(19,236,128,0)} 100%{box-shadow:0 0 0 0 rgba(19,236,128,0)} }

.about .pt-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer;
  font-family:inherit; font-weight:700; font-size:14.5px; line-height:1; border:1px solid transparent; border-radius:12px;
  padding:13px 22px; transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s,background .2s,color .2s; white-space:nowrap; text-decoration:none; }
.about .pt-btn .material-symbols-outlined{ font-size:18px; }
.about .pt-btn-primary{ background:var(--p); color:#06281a; box-shadow:0 8px 22px -8px rgba(19,236,128,.6); }
.about .pt-btn-primary:hover{ background:var(--p-dark); transform:translateY(-2px); box-shadow:0 14px 30px -8px rgba(19,236,128,.7); }
.about .pt-btn-ghost{ background:rgba(255,255,255,.85); border-color:var(--line); color:var(--green-700); }
.about .pt-btn-ghost:hover{ background:#fff; transform:translateY(-2px); box-shadow:0 4px 20px -2px rgba(15,23,42,.06); }
.about .pt-btn-ghost-on-dark{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.25); color:#fff; }
.about .pt-btn-ghost-on-dark:hover{ background:rgba(255,255,255,.16); transform:translateY(-2px); }

/* reveal (gated on JS; shows end-state if the script never runs) */
html.gab-js .about .pt-reveal{ opacity:0; transform:translateY(18px);
  transition:opacity .6s cubic-bezier(.2,.8,.2,1), transform .6s cubic-bezier(.2,.8,.2,1); }
html.gab-js .about .pt-reveal.is-in{ opacity:1; transform:none; }
html.gab-js .about .pt-reveal.d1{ transition-delay:.08s; }
html.gab-js .about .pt-reveal.d2{ transition-delay:.16s; }
html.gab-js .about .pt-reveal.d3{ transition-delay:.24s; }

/* section head */
.about .gab-head{ max-width:52rem; }
.about .gab-head h2{ margin:16px 0 0; font-size:clamp(26px,3.2vw,38px); font-weight:800; letter-spacing:-.02em; line-height:1.12; }
.about .gab-head p{ margin:14px 0 0; font-size:16.5px; line-height:1.65; color:var(--body); text-wrap:pretty; }

/* image placeholder (striped) */
.about .gab-ph{ border:1px dashed #cbd5e1; border-radius:16px;
  background:repeating-linear-gradient(-45deg,#f8fafc 0 14px,#eef2f7 14px 28px);
  display:flex; align-items:center; justify-content:center; }
.about .gab-ph code{ font-family:ui-monospace,monospace; font-size:12px; color:var(--muted); background:#fff; border:1px solid var(--line); border-radius:8px; padding:5px 10px; }

/* ============================ hero ============================ */
.about .gab-hero{ background-color:#fff; border-bottom:1px solid var(--line);
  background-image:radial-gradient(circle at top left,rgba(19,236,128,.16),transparent 48%),radial-gradient(circle at 12% 8%,rgba(4,120,87,.08),transparent 40%); }
.about .gab-hero-in{ padding-block:72px 56px; display:grid; gap:44px; align-items:center; }
@media (min-width:1024px){ .about .gab-hero-in{ grid-template-columns:1.1fr .9fr; } }
.about .gab-hero h1{ margin:20px 0 0; font-size:clamp(34px,4.6vw,54px); font-weight:800; letter-spacing:-.025em; line-height:1.06; max-width:20ch; }
.about .gab-hero h1 em{ font-style:normal; }
.about .gab-hero .lead{ margin:18px 0 0; font-size:18px; line-height:1.65; color:var(--body); max-width:56ch; text-wrap:pretty; }
.about .gab-stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line);
  border-radius:16px; overflow:hidden; margin-top:0; grid-column:1 / -1; }
@media (min-width:768px){ .about .gab-stats{ grid-template-columns:repeat(4,1fr); } }
.about .gab-stat{ background:#fff; padding:22px 24px; }
.about .gab-stat b{ display:block; font-size:clamp(24px,2.6vw,32px); font-weight:800; letter-spacing:-.02em; color:var(--ink); font-variant-numeric:tabular-nums; }
.about .gab-stat b i{ font-style:normal; color:var(--green); }
.about .gab-stat b span{ display:inline; margin:0; font-size:inherit; font-weight:inherit; color:inherit; }
.about .gab-stat > span{ display:block; margin-top:4px; font-size:13px; font-weight:600; color:var(--muted); }

/* ---- hero orbit: the 7 products around one platform ---- */
.about .gab-orbit{ width:min(460px,86vw); aspect-ratio:1/1; padding:34px; margin-inline:auto; }
.about .gab-orbit-field{ position:relative; width:100%; height:100%; }
.about .gab-orbit-ring{ position:absolute; inset:0; border:1.5px dashed #cbe9d9; border-radius:50%; }
.about .gab-orbit-ring.r2{ inset:19%; border-color:var(--line-soft); border-style:solid; }
.about .gab-orbit-core{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:#fff;
  border:1px solid var(--line); border-radius:16px; padding:16px 20px; box-shadow:0 18px 40px -18px rgba(15,23,42,.18); }
.about .gab-orbit-core img{ display:block; width:118px; height:auto; }
.about .gab-orbit-spin{ position:absolute; inset:0; animation:gab-orbit 56s linear infinite; }
.about .gab-sat{ position:absolute; width:56px; height:56px; margin:-28px 0 0 -28px; }
.about .gab-sat .in{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:#fff;
  border:1px solid var(--line); border-radius:15px; box-shadow:0 10px 24px -12px rgba(15,23,42,.22);
  animation:gab-orbit-rev 56s linear infinite; }
.about .gab-sat img{ width:32px; height:32px; object-fit:contain; display:block; }
@keyframes gab-orbit{ to{ transform:rotate(1turn); } }
@keyframes gab-orbit-rev{ to{ transform:rotate(-1turn); } }

/* ============================ story ============================ */
.about .gab-story{ padding-block:80px; }
.about .gab-story-grid{ display:grid; gap:44px; align-items:center; }
@media (min-width:1024px){ .about .gab-story-grid{ grid-template-columns:1.05fr .95fr; gap:72px; } }
.about .gab-story-copy p{ margin:16px 0 0; font-size:16px; line-height:1.7; color:var(--body); text-wrap:pretty; }
.about .gab-story-media{ min-height:320px; }
@media (min-width:1024px){ .about .gab-story-media{ min-height:400px; } }

/* ============================ timeline ============================ */
.about .gab-timeline{ padding-block:80px; background:var(--surface-2); border-block:1px solid var(--line); }
.about .gab-tl{ margin-top:52px; position:relative; display:flex; flex-direction:column; gap:0; }
.about .gab-tl::before{ content:""; position:absolute; left:19px; top:8px; bottom:8px; width:2px; background:var(--line); }
.about .gab-tl-item{ position:relative; padding:0 0 40px 64px; }
.about .gab-tl-item:last-child{ padding-bottom:0; }
.about .gab-tl-item .yr{ position:absolute; left:0; top:0; width:40px; height:40px; border-radius:50%; background:#fff; border:2px solid var(--line);
  display:flex; align-items:center; justify-content:center; color:var(--muted); transition:border-color .4s,color .4s,background .4s; }
.about .gab-tl-item .yr .material-symbols-outlined{ font-size:19px; }
.about .gab-tl-item.is-in .yr{ border-color:var(--p); color:var(--green-700); background:var(--green-soft); }
.about .gab-tl-item .when{ font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--green-700); }
.about .gab-tl-item h3{ margin:6px 0 0; font-size:19px; font-weight:800; letter-spacing:-.01em; }
.about .gab-tl-item p{ margin:8px 0 0; font-size:15px; line-height:1.65; color:var(--body); max-width:60ch; }
@media (min-width:900px){
  .about .gab-tl::before{ left:50%; transform:translateX(-1px); }
  .about .gab-tl-item{ width:50%; padding:0 56px 48px 0; text-align:right; }
  .about .gab-tl-item .yr{ left:auto; right:-20px; }
  .about .gab-tl-item p{ margin-left:auto; }
  .about .gab-tl-item:nth-child(even){ align-self:flex-end; text-align:left; padding:0 0 48px 56px; }
  .about .gab-tl-item:nth-child(even) .yr{ right:auto; left:-20px; }
  .about .gab-tl-item:nth-child(even) p{ margin-left:0; }
}

/* ============================ values ============================ */
.about .gab-values{ padding-block:80px; }
.about .gab-cards{ display:grid; gap:16px; margin-top:48px; }
@media (min-width:768px){ .about .gab-cards{ grid-template-columns:repeat(3,1fr); } }
.about .gab-card{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:26px;
  transition:transform .25s,box-shadow .25s,border-color .25s; }
.about .gab-card:hover{ transform:translateY(-3px); box-shadow:0 18px 36px -22px rgba(15,23,42,.22); border-color:var(--green-line); }
.about .gab-card .ico{ width:44px; height:44px; border-radius:12px; background:var(--green-soft); border:1px solid var(--green-line);
  display:flex; align-items:center; justify-content:center; color:var(--green); }
.about .gab-card .ico .material-symbols-outlined{ font-size:22px; }
.about .gab-card h3{ margin:16px 0 0; font-size:17px; font-weight:800; letter-spacing:-.01em; }
.about .gab-card p{ margin:8px 0 0; font-size:14.5px; line-height:1.65; color:var(--body); }

/* ============================ security & compliance ============================ */
.about .gab-certs{ padding-block:72px; background:var(--deep); color:#a9cdbb;
  background-image:radial-gradient(circle at top right,rgba(19,236,128,.16),transparent 55%); }
.about .gab-certs .gab-head h2{ color:#fff; }
.about .gab-certs .gab-head p{ color:#a9cdbb; }
.about .gab-certs .pt-badge{ background:rgba(255,255,255,.08); color:var(--p); border-color:rgba(19,236,128,.35); }
.about .gab-cert-grid{ display:grid; gap:14px; margin-top:44px; }
@media (min-width:768px){ .about .gab-cert-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1100px){ .about .gab-cert-grid{ grid-template-columns:repeat(4,1fr); } }
.about .gab-cert{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:16px; padding:24px; }
.about .gab-cert .material-symbols-outlined{ font-size:24px; color:var(--p); }
.about .gab-cert b{ display:block; margin-top:14px; font-size:15.5px; font-weight:800; color:#fff; }
.about .gab-cert p{ margin:7px 0 0; font-size:13.5px; line-height:1.6; color:#a9cdbb; }

/* ============================ team ============================ */
.about .gab-team{ padding-block:80px; }
.about .gab-team-grid{ display:grid; gap:16px; margin-top:48px; grid-template-columns:repeat(2,1fr); }
@media (min-width:768px){ .about .gab-team-grid{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1100px){ .about .gab-team-grid{ grid-template-columns:repeat(6,1fr); gap:32px;} }
.about .gab-person .ph{ aspect-ratio:4/5; border-radius:14px; position:relative; }
.about .gab-li{ position:absolute; top:10px; right:10px; width:32px; height:32px; border-radius:9px; background:#fff;
  border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--muted);
  box-shadow:0 4px 12px -6px rgba(15,23,42,.18); transition:color .2s,border-color .2s,background .2s,transform .2s; }
.about .gab-li svg{ width:14px; height:14px; }
.about .gab-li:hover{ color:var(--green-700); background:var(--green-soft); border-color:var(--green-line); transform:translateY(-1px); }
.about .gab-person b{ display:block; margin-top:12px; font-size:14.5px; font-weight:800; }
.about .gab-person span{ display:block; margin-top:2px; font-size:12.5px; font-weight:600; color:var(--muted); }

/* ============================ careers + partnerships ============================ */
.about .gab-join{ padding-block:0 80px; }
.about .gab-join-grid{ display:grid; gap:16px; }
@media (min-width:900px){ .about .gab-join-grid{ grid-template-columns:1fr 1fr; } }
.about .gab-join-card{ background:var(--surface-2); border:1px solid var(--line); border-radius:18px; padding:34px; }
.about .gab-join-card .ico{ width:44px; height:44px; border-radius:12px; background:#fff; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; color:var(--green); }
.about .gab-join-card .ico .material-symbols-outlined{ font-size:22px; }
.about .gab-join-card h3{ margin:18px 0 0; font-size:20px; font-weight:800; letter-spacing:-.01em; }
.about .gab-join-card p{ margin:10px 0 0; font-size:15px; line-height:1.68; color:var(--body); text-wrap:pretty; }
.about .gab-join-card .pt-btn{ margin-top:22px; }

/* ============================ contact band (preview stand-in) ============================ */
.about .gab-contact{ padding-block:80px; background:var(--surface-2); border-top:1px solid var(--line); }
.about .gab-contact-card{ background:var(--deep); border-radius:22px; padding:48px; color:#a9cdbb;
  background-image:radial-gradient(circle at top right,rgba(19,236,128,.2),transparent 55%);
  display:grid; gap:32px; align-items:center; }
@media (min-width:1024px){ .about .gab-contact-card{ grid-template-columns:1.2fr .8fr; padding:56px; } }
.about .gab-contact-card h2{ margin:16px 0 0; font-size:clamp(26px,3vw,36px); font-weight:800; letter-spacing:-.02em; line-height:1.12; color:#fff; }
.about .gab-contact-card .lead{ margin:14px 0 0; font-size:16px; line-height:1.65; color:#a9cdbb; max-width:48ch; }
.about .gab-contact-card .pt-badge{ background:rgba(255,255,255,.08); color:var(--p); border-color:rgba(19,236,128,.35); }
.about .gab-contact-lines{ display:flex; flex-direction:column; gap:14px; font-size:14.5px; }
.about .gab-contact-lines a, .about .gab-contact-lines span{ display:flex; align-items:flex-start; gap:10px; color:#d9fbe9; font-weight:600; text-decoration:none; }
.about .gab-contact-lines a:hover{ color:var(--p); }
.about .gab-contact-lines .material-symbols-outlined{ font-size:18px; color:var(--p); margin-top:1px; }
.about .gab-contact-cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:26px; }

@media (prefers-reduced-motion:reduce){
  html.gab-js .about .pt-reveal{ opacity:1; transform:none; transition:none; }
  .about .pt-dot{ animation:none; }
  .about .gab-orbit-spin, .about .gab-sat .in{ animation:none; }
}