/* ============================================================
   AATG — shared design system
   Used by index.html · r-guard.html · about.html
   Edit palette/type here once; every page follows.
   ============================================================ */

:root{
  --paper:#F5F7F8; --panel:#FFFFFF; --panel-2:#FBFCFC;
  --line:#DBE3E7; --line-soft:#E9EEF0;
  --ink:#0D1620; --body:#33454F; --muted:#5E6E78; --faint:#8695A0;
  --navy:#06141F;                 /* matches the logo file's baked-in background */
  --teal:#0E6E72; --teal-deep:#0A5053; --teal-tint:#E4EFEF; --teal-line:#BED8D8;
  --teal-lite:#5fb6b8;
  --coral:#D6552F; --coral-deep:#B8461F; --coral-tint:#FAEBE3;
  --amber:#B7791F; --amber-tint:#FBF1E0;
  --shadow:0 1px 2px rgba(13,22,32,.04), 0 8px 28px -18px rgba(13,22,32,.28);
  --maxw:1180px;
  --display:'Space Grotesk',sans-serif;
  --sans:'IBM Plex Sans',sans-serif;
  --mono:'IBM Plex Mono',monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth; scroll-padding-top:80px}
body{font-family:var(--sans); color:var(--body); background:var(--paper); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden}
h1,h2,h3,h4{font-family:var(--display); color:var(--ink); line-height:1.08; letter-spacing:-.02em; font-weight:600}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
button,input,select,textarea{font-family:inherit}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px}
.mono{font-family:var(--mono)}
.eyebrow{font-family:var(--mono); font-size:11.5px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--teal); display:inline-flex; align-items:center; gap:9px}
.eyebrow::before{content:""; width:22px; height:1px; background:var(--teal-line)}

/* ---------- NAV (identical on every page) ---------- */
header.nav{position:sticky; top:0; z-index:60; background:rgba(6,20,31,.94); backdrop-filter:blur(10px); border-bottom:1px solid rgba(255,255,255,.08)}
.nav-in{display:flex; align-items:center; justify-content:space-between; height:70px; max-width:var(--maxw); margin:0 auto; padding:0 28px}
.nav-logo{display:flex; align-items:center; flex-shrink:0}
.nav-logo img{height:38px; width:auto; display:block}
.nav-links{display:flex; align-items:center; gap:22px}
.nav-links a{font-size:13.5px; color:rgba(255,255,255,.72); font-weight:500; transition:color .15s; white-space:nowrap}
.nav-links a:hover{color:#fff}
.nav-links a.alt{color:var(--teal-lite); font-weight:600}
.nav-cta{font-size:13.5px; font-weight:600; color:#fff!important; background:var(--teal); padding:9px 16px; border-radius:6px; transition:background .15s}
.nav-cta:hover{background:var(--teal-deep)}
.burger{display:none; background:none; border:1px solid rgba(255,255,255,.2); border-radius:6px; width:40px; height:38px; cursor:pointer; align-items:center; justify-content:center}
.burger span{display:block; width:18px; height:2px; background:#fff; position:relative}
.burger span::before,.burger span::after{content:""; position:absolute; left:0; width:18px; height:2px; background:#fff}
.burger span::before{top:-6px}.burger span::after{top:6px}

/* ---------- SECTION SHELL ---------- */
section{padding:76px 0; position:relative}
.section-head{max-width:38em; margin-bottom:46px}
.section-head h2{font-size:clamp(27px,3.4vw,38px); margin:16px 0 14px}
.section-head p{font-size:17px; color:var(--muted)}
.alt-bg{background:var(--panel); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}

/* dark section variant */
.dark{background:var(--ink); color:#cdd8de}
.dark h2,.dark h3{color:#fff}
.dark .eyebrow{color:var(--teal-lite)}
.dark .eyebrow::before{background:#2b5457}
.dark .section-head p{color:#9fb0ba}

/* ---------- BUTTONS ---------- */
.btn{font-weight:600; font-size:15px; padding:13px 22px; border-radius:7px; cursor:pointer; border:1px solid transparent; transition:transform .12s, background .15s, border-color .15s; display:inline-flex; align-items:center; gap:9px}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--teal); color:#fff}
.btn-primary:hover{background:var(--teal-deep)}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink)}
.btn .ar{font-family:var(--mono)}
.dark .btn-ghost{color:#fff; border-color:rgba(255,255,255,.25)}
.dark .btn-ghost:hover{border-color:#fff}

/* ---------- SMALL PARTS ---------- */
.tag{font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--body); background:var(--panel); border:1px solid var(--line); border-radius:100px; padding:5px 12px}
.tag.lead{border-color:var(--teal-line); color:var(--teal-deep); background:var(--teal-tint)}
.tags{display:flex; gap:8px; flex-wrap:wrap}
.pill-live{font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; color:var(--teal-deep); background:var(--teal-tint); border:1px solid var(--teal-line); border-radius:100px; padding:4px 10px; display:inline-flex; align-items:center; gap:6px}
.pulse{width:6px;height:6px;border-radius:50%;background:var(--teal);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(14,110,114,.45)}70%{box-shadow:0 0 0 7px rgba(14,110,114,0)}100%{box-shadow:0 0 0 0 rgba(14,110,114,0)}}
.note-ip{font-family:var(--mono); font-size:11px; color:var(--faint); margin-top:16px; padding-top:14px; border-top:1px solid var(--line-soft)}
.foot-note{font-family:var(--mono); font-size:11px; color:var(--faint); margin-top:14px; line-height:1.6}

/* IP notice band */
.ipband{background:var(--ink); color:#cfd9df; border-radius:12px; padding:24px 26px; display:grid; grid-template-columns:auto 1fr; gap:20px; align-items:start}
.ipband .k{font-family:var(--mono); font-size:11px; letter-spacing:.12em; color:var(--teal-lite); white-space:nowrap; padding-top:3px}
.ipband p{font-size:14px; color:#aebac2; margin:0}
.ipband b{color:#fff; font-weight:600}
.ipband a{color:var(--teal-lite); border-bottom:1px solid rgba(95,182,184,.4)}

/* ---------- STAT STRIP ---------- */
.specrow{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:8px; overflow:hidden}
/* min-width:0 lets cells shrink below their content width instead of overflowing
   and getting clipped by the border-radius overflow:hidden above. */
.specrow div{background:var(--panel); padding:14px 10px; text-align:center; min-width:0}
/* .sq = 2x2 variant, for specrows sitting inside narrow columns/cards */
.specrow.sq{grid-template-columns:1fr 1fr}
.specrow .val{font-family:var(--display); font-weight:600; font-size:19px; color:var(--ink)}
.specrow .cap{font-family:var(--mono); font-size:9.5px; letter-spacing:.04em; color:var(--faint); text-transform:uppercase; margin-top:3px}

/* ---------- NUMBERED PROBLEM / SOLUTION LIST ---------- */
.prob-list{display:flex; flex-direction:column; border-top:1px solid var(--line)}
.prob{display:grid; grid-template-columns:34px 1.1fr 1fr; gap:26px; padding:26px 0; border-bottom:1px solid var(--line); align-items:start}
.prob .idx{font-family:var(--mono); font-size:13px; color:var(--faint); padding-top:3px}
.prob h3{font-size:18px; margin-bottom:8px; letter-spacing:-.01em}
.prob .p-old{font-size:14.5px; color:var(--muted)}
.prob .p-old b{color:var(--body); font-weight:600}
.prob .p-fix{font-size:14.5px; color:var(--body); background:var(--teal-tint); border-left:2px solid var(--teal); padding:12px 15px; border-radius:0 6px 6px 0}
.prob .p-fix b{color:var(--teal-deep); font-weight:600}
.prob .p-fix .lbl{font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--teal); display:block; margin-bottom:5px}

/* ---------- CARD GRIDS ---------- */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:18px}
.card{border:1px solid var(--line); border-radius:12px; padding:24px; background:var(--panel); transition:border-color .15s, transform .15s}
.card:hover{border-color:var(--teal-line); transform:translateY(-2px)}
.card .k{font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); margin-bottom:12px}
.card h3{font-size:18px; margin-bottom:10px}
.card p{font-size:13.5px; color:var(--muted)}
.card ul{list-style:none; margin-top:14px; display:flex; flex-direction:column; gap:7px}
.card li{font-size:13px; color:var(--body); padding-left:18px; position:relative}
.card li::before{content:"—"; position:absolute; left:0; color:var(--teal); font-family:var(--mono)}

/* metric card (value + label) */
.mcard{border:1px solid var(--line); border-radius:10px; padding:22px; background:var(--panel-2)}
.mcard .v{font-family:var(--display); font-weight:600; font-size:30px; color:var(--ink); letter-spacing:-.02em}
.mcard .v small{color:var(--teal); font-size:20px}
.mcard .l{font-size:13px; color:var(--muted); margin-top:6px}

/* ---------- COMPARISON TABLE ---------- */
.cmp-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:12px; background:var(--panel)}
table.cmp{width:100%; border-collapse:collapse; min-width:820px; font-size:13.5px}
table.cmp th,table.cmp td{padding:14px 16px; text-align:left; border-bottom:1px solid var(--line-soft); vertical-align:top}
table.cmp thead th{font-family:var(--mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); font-weight:500; background:var(--panel-2); vertical-align:bottom}
table.cmp thead th small{display:block; font-size:9.5px; color:var(--faint); letter-spacing:.02em; text-transform:none; margin-top:3px}
table.cmp thead th.us{color:var(--teal-deep); background:var(--teal-tint)}
table.cmp tbody th{font-family:var(--sans); font-weight:600; color:var(--ink); font-size:13px}
table.cmp td.us{background:var(--teal-tint); color:var(--teal-deep); font-weight:500}
table.cmp tbody tr:last-child td,table.cmp tbody tr:last-child th{border-bottom:none}

/* ---------- PLATFORM STRIP ---------- */
.guard-strip{background:linear-gradient(120deg,var(--ink),#13252d); border-radius:12px; padding:26px 28px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap}
.guard-strip .gt .k{font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--teal-lite); text-transform:uppercase}
.guard-strip .gt h3{color:#fff; font-size:22px; margin:8px 0 4px}
.guard-strip .gt p{color:#9fb0ba; font-size:14px; max-width:44em}
.guard-strip .btn-primary{background:#fff; color:var(--ink)}
.guard-strip .btn-primary:hover{background:var(--teal-tint)}

/* ---------- TIMELINE / STATUS ---------- */
.tl{display:flex; flex-direction:column; border-left:2px solid var(--line); padding-left:0}
.tl-item{position:relative; padding:0 0 30px 28px; margin-left:0}
.tl-item::before{content:""; position:absolute; left:-7px; top:5px; width:12px; height:12px; border-radius:50%; background:var(--paper); border:2px solid var(--line)}
.tl-item.done::before{background:var(--teal); border-color:var(--teal)}
.tl-item.now::before{background:var(--coral); border-color:var(--coral)}
.tl-item .st{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); margin-bottom:7px}
.tl-item.done .st{color:var(--teal)}
.tl-item.now .st{color:var(--coral)}
.tl-item h3{font-size:17px; margin-bottom:8px}
.tl-item p{font-size:14px; color:var(--muted)}
.chips{display:flex; gap:7px; flex-wrap:wrap; margin-top:12px}
.chips span{font-family:var(--mono); font-size:11px; color:var(--teal-deep); background:var(--teal-tint); border:1px solid var(--teal-line); border-radius:100px; padding:4px 11px}

/* ---------- CONTACT ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start}
.cdetails{display:flex; flex-direction:column; gap:16px; margin-top:4px}
.cdet{display:flex; align-items:center; gap:14px; font-size:15px; color:#cfd9df}
.cdet .ic{width:40px; height:40px; border-radius:8px; background:#12202a; border:1px solid #24343f; display:flex; align-items:center; justify-content:center; color:var(--teal-lite); font-family:var(--mono); font-size:15px; flex-shrink:0}
.cdet a{color:#fff; word-break:break-all}
.cdet a:hover{color:var(--teal-lite)}
.audience{display:flex; flex-direction:column; gap:10px}
.aud{display:flex; align-items:center; gap:12px; background:#0a121a; border:1px solid #1e2c37; border-radius:9px; padding:14px 18px; font-size:14px; color:#cfd9df; transition:border-color .15s}
.aud:hover{border-color:#2f4a52}
.aud .n{font-family:var(--mono); font-size:11px; color:var(--teal-lite)}
.big-cta{display:inline-flex; margin-top:8px; background:var(--teal); color:#fff; font-weight:600; padding:14px 26px; border-radius:8px; font-size:15px}
.big-cta:hover{background:var(--teal-deep)}

/* ---------- FOOTER (identical on every page) ---------- */
footer.ft{background:var(--navy); color:#7d909c; padding:40px 0 32px; font-size:13px}
.ft-in{display:flex; justify-content:space-between; align-items:center; gap:30px; flex-wrap:wrap}
.ft-logo img{height:40px; width:auto; display:block}
.ft-links{display:flex; gap:24px; flex-wrap:wrap}
.ft-links a{color:#9fb0ba}
.ft-links a:hover{color:#fff}
.ft-legal{margin-top:26px; padding-top:22px; border-top:1px solid rgba(255,255,255,.08); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-family:var(--mono); font-size:11px; color:#5f7480}

/* ---------- REVEAL ---------- */
.rv{opacity:0; transform:translateY(16px); transition:opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important} .rv{opacity:1; transform:none}}

/* ---------- RESPONSIVE ---------- */
@media(max-width:940px){
  .grid-3,.grid-2,.contact-grid{grid-template-columns:1fr}
  .prob{grid-template-columns:26px 1fr; gap:16px}
  .prob .p-fix{grid-column:1/-1}
  .nav-links{display:none}
  .burger{display:flex}
  .nav-links.open{display:flex; position:absolute; top:70px; left:0; right:0; background:var(--navy); flex-direction:column; align-items:flex-start; gap:0; border-bottom:1px solid rgba(255,255,255,.1); padding:8px 28px 18px}
  .nav-links.open a{padding:11px 0; width:100%; border-bottom:1px solid rgba(255,255,255,.07)}
  .ipband{grid-template-columns:1fr}
}
@media(max-width:560px){
  .wrap,.nav-in{padding-left:20px; padding-right:20px}
  .specrow{grid-template-columns:1fr 1fr}
  section{padding:56px 0}
  .ft-in{flex-direction:column; align-items:flex-start; gap:20px}
}