/* ============================================================
   BARGIEL.AI — shared brand base
   Single source of truth for design tokens, resets, a11y utilities,
   shared primitives, buttons, footer and reveal/dark-mode foundations.
   Loaded FIRST on every page (home + /profile); page stylesheets only
   add or override what is specific to that page.
   Brand tokens from canonical/design/tokens.json (Brand System v2).
   ============================================================ */

:root{
  /* Design tokens — emitted from canonical/design/tokens.json at build time by
     tools/_tokens.py. Edit values in tokens.json, not here; the marker below is
     replaced wholesale on build (don't hand-add vars to this block). */
  --ink:#0B1133;--ink-deep:#06080F;--surf:#0B1133;--surf2:#111D45;--paper:#F4F5FB;--paper2:#FFFFFF;--paper3:#ECEEF7;--pri:#4F46E5;--pri-d:#3D35C9;--acc:#06B6D4;--vio:#7C3AED;--head:#0B1133;--num:#4F46E5;--tx:#171B33;--tx-soft:#3C4566;--mu:#5C6489;--tx-dk:#EDF0FD;--mu-dk:#8892B8;--line:rgba(11,17,51,0.10);--line-2:rgba(11,17,51,0.16);--line-dk:rgba(255,255,255,0.10);--grad:linear-gradient(135deg,#2E4BD9 0%,#7C3AED 100%);--fd:'Oxanium',sans-serif;--fb:'Space Grotesk',sans-serif;--fm:'JetBrains Mono',monospace;--accent:var(--pri);--accent-ink:#fff;--pad:clamp(20px,5vw,40px);--maxw:1180px;--sec-y:clamp(72px,11vw,150px);--sec-y-tight:clamp(40px,6vw,84px);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--paper);
  color:var(--tx);
  font-family:var(--fb);
  font-weight:400;
  line-height:1.62;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

/* ---------- accessibility utilities ---------- */
.skip-link{position:absolute;left:-9999px;top:0}
.skip-link:focus{
  position:fixed;left:12px;top:12px;z-index:1000;
  padding:12px 16px;border-radius:8px;
  background:var(--pri);color:#fff;
  font-family:var(--fm);font-size:13px;font-weight:500;letter-spacing:0.04em;
  outline:2px solid #fff;outline-offset:2px;
}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;white-space:nowrap}
/* visible keyboard focus — #6366F1 holds >=3.8:1 on every surface, light & dark */
:focus-visible{outline:2px solid #6366F1;outline-offset:2px}
.btn:focus-visible{outline-offset:3px}

/* ---------- shared primitives ---------- */
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}

.eyebrow{
  font-family:var(--fm);font-size:12.5px;font-weight:500;letter-spacing:0.2em;
  text-transform:uppercase;color:var(--mu);
  display:inline-flex;align-items:center;gap:10px;
}
.eyebrow .tick{width:22px;height:1px;background:var(--accent);display:inline-block}

h1,h2,h3{font-family:var(--fd);font-weight:700;letter-spacing:-0.01em;line-height:1.02;color:var(--head)}
.h1{font-size:clamp(2.45rem,7.2vw,4.55rem);line-height:1.0;letter-spacing:-0.02em;text-wrap:balance}
.h2{font-size:clamp(1.7rem,3.6vw,2.65rem);line-height:1.04;letter-spacing:-0.015em;text-wrap:balance}
.h3{font-size:clamp(1.18rem,2vw,1.42rem);line-height:1.1;letter-spacing:-0.01em}
.lead{font-size:clamp(1.06rem,1.5vw,1.22rem);color:var(--tx-soft);line-height:1.6;text-wrap:pretty}
/* key numbers — the only other place accent appears */
.num{font-family:var(--fd);font-weight:700;color:var(--num);letter-spacing:-0.01em;white-space:nowrap}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--fm);font-size:13px;font-weight:500;letter-spacing:0.04em;
  padding:16px 26px;border-radius:8px;border:1px solid transparent;
  cursor:pointer;transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;
  white-space:nowrap;line-height:1;
}
.btn .arr{transition:transform .2s ease}
.btn-pri{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn-pri:hover{background:var(--pri-d);border-color:var(--pri-d);transform:translateY(-2px)}
.btn-pri:hover .arr{transform:translateX(4px)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--ink);transform:translateY(-2px)}
.btn-ghost:hover .arr{transform:translateX(4px)}
/* on dark surfaces */
.on-dark .btn-ghost{color:var(--tx-dk);border-color:var(--line-dk)}
.on-dark .btn-ghost:hover{border-color:rgba(255,255,255,0.6)}

/* ============================================================
   HEADER — shared sticky glass header (home + /profile).
   Both pages render the same .site-head / .brand / .head-row / .head-cta.
   .head-cta is the primary CTA itself on the home page (an <a class="btn
   head-cta">) and a wrapper <nav class="head-cta"> on /profile — the
   reveal-on-scroll + sizing rules below cover both shapes.
   Page stylesheets add only page-specific variants (e.g. /profile's
   data-wavetop transparent-over-hero header).
   ============================================================ */
.site-head{
  position:sticky;top:0;z-index:60;
  padding-top:env(safe-area-inset-top);
  background:rgba(244,245,251,0.82);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease,background .25s ease;
}
.site-head.scrolled{border-bottom-color:var(--line)}
/* header adopts the colour of the dark section it overlaps */
.site-head.over-dark{background:rgba(7,10,20,0.86);border-bottom-color:rgba(255,255,255,0.08)}
.site-head.over-dark .brand .wm{filter:brightness(0) invert(1)}
.head-row{display:flex;align-items:center;justify-content:space-between;gap:16px;height:68px}
.brand{display:flex;align-items:center;gap:11px}
.brand .wm{height:22px;width:auto;display:block;transition:filter .25s ease}
.head-cta{display:none;gap:10px}
@media(min-width:720px){
  .head-cta{display:inline-flex;opacity:0;pointer-events:none;transition:opacity .25s ease}
  .head-cta.btn,.head-cta .btn{padding:12px 20px}  /* CTA-as-button (home) | CTA wrapper (profile) */
  .site-head.show-cta .head-cta{opacity:1;pointer-events:auto}
  .head-row{height:76px}
}

/* ============================================================
   SECTION INDEX — numbered "01 Section ——" label shared by both pages.
   The trailing rule (.ln) is page-styled: hidden on home, drawn on /profile.
   ============================================================ */
.sec-index{
  font-family:var(--fm);font-size:clamp(13px,1.4vw,15px);font-weight:500;
  letter-spacing:0.16em;text-transform:uppercase;color:var(--mu);
  display:flex;align-items:center;gap:14px;margin-bottom:clamp(20px,2.6vw,30px);
}
.sec-index b{
  font-family:var(--fd);font-size:clamp(22px,2.8vw,30px);font-weight:700;
  letter-spacing:-0.01em;color:var(--accent);line-height:1;
}
.sec-index .ln{flex:1;height:1px;background:var(--line)}

/* ============================================================
   HERO PRIMITIVES — pull-quote + CTA row shared by both heroes.
   margin-top is layout-contextual, so each page sets its own.
   ============================================================ */
.hero-quote{padding-left:20px;border-left:2px solid var(--accent);max-width:540px}
.hero-quote p{margin:0;font-size:clamp(1.06rem,1.7vw,1.28rem);line-height:1.5;color:var(--tx);font-weight:400;text-wrap:pretty}
.hero-ctas{display:flex;flex-direction:column;gap:12px}
.hero-ctas .btn{width:100%}
@media(min-width:560px){
  .hero-ctas{flex-direction:row}
  .hero-ctas .btn{width:auto}
}

/* ============================================================
   TESTIMONIAL / RECOMMENDATION CARD — one canonical design shared by the
   home Testimonials grid (.ts-card) and the /profile Recommendations grid
   (.rec). Selectors are grouped so the two can never visually drift.
   Per-page files own only their grid (column count), nothing else.
   ============================================================ */
.ts-card,.rec{
  position:relative;overflow:hidden;
  background:var(--paper2);border:1px solid var(--line);border-radius:14px;
  padding:clamp(26px,3vw,34px);
  display:flex;flex-direction:column;gap:20px;
  transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.ts-card:hover,.rec:hover{border-color:var(--line-2);transform:translateY(-3px);box-shadow:0 24px 50px -34px rgba(11,17,51,0.4)}
/* faded corner watermark quote mark */
.ts-mark,.rec-mark{
  position:absolute;top:6px;right:22px;height:auto;
  font-family:var(--fd);font-weight:800;font-size:5rem;line-height:1;
  color:var(--accent);opacity:.12;pointer-events:none;
}
.ts-quote,.rec-quote{
  margin:0;flex:1;position:relative;z-index:1;
  font-family:var(--fb);font-weight:400;font-size:1.06rem;line-height:1.6;
  color:var(--tx);text-wrap:pretty;
}
.ts-by,.rec-by{display:flex;align-items:center;gap:13px;margin-top:auto;padding-top:0;border-top:none}
.ts-av,.rec-avatar{
  width:52px;height:52px;border-radius:50%;flex-shrink:0;object-fit:cover;
  border:1px solid var(--line);background:var(--paper3);
  filter:grayscale(1);transition:filter .25s ease;
}
.ts-card:hover .ts-av,.rec:hover .rec-avatar{filter:grayscale(0)}
/* name + role identity block (home wraps in a bare <div>, profile in .rec-id) */
.ts-by > div,.rec-id{display:flex;flex-direction:column;gap:3px;min-width:0}
.ts-name,.rec-name{font-family:var(--fd);font-weight:700;font-size:1.02rem;letter-spacing:-0.01em;color:var(--ink);line-height:1.15}
.ts-name a,a.rec-name{color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:5px;transition:color .2s ease}
.ts-name a::after,a.rec-name::after{content:"\2197";font-size:0.72em;color:var(--mu);transition:color .2s ease,transform .2s ease}
.ts-name a:hover,a.rec-name:hover{color:var(--accent)}
.ts-name a:hover::after,a.rec-name:hover::after{color:var(--accent);transform:translate(1px,-1px)}
.ts-name a:focus-visible,a.rec-name:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}
.ts-role,.rec-role{font-family:var(--fm);font-size:11px;letter-spacing:0.03em;color:var(--mu);line-height:1.4}

/* ============================================================
   FOOTER — shared meta row (brand · nav · legal).
   Both pages render the same structure; only the link hrefs differ
   (home uses in-page #anchors, /profile uses ../index.html#anchors).
   Page stylesheets may add a CTA band above this row.
   ============================================================ */
.foot{background:var(--ink-deep);color:var(--tx-dk);position:relative;overflow:hidden}
.foot .wrap{position:relative;z-index:1}
.foot-meta{display:flex;flex-direction:column;gap:24px;padding-top:36px}
.foot-brand{display:inline-flex;align-items:center;gap:12px;flex-shrink:0}
.foot-brand .wm{height:24px;width:auto;display:block}
.foot-nav{display:flex;flex-wrap:wrap;gap:8px 22px;flex:1}
.foot-nav a{font-family:var(--fm);font-size:12.5px;letter-spacing:0.04em;color:var(--mu-dk);transition:color .18s ease;display:inline-flex;align-items:center;gap:7px;min-height:24px;white-space:nowrap}
.foot-nav a:hover{color:var(--tx-dk)}
.foot-legal{font-family:var(--fm);font-size:10.5px;letter-spacing:0.1em;text-transform:uppercase;color:#707AA6;white-space:nowrap;flex-shrink:0}
@media(min-width:860px){
  .foot-meta{flex-direction:row;align-items:center;gap:clamp(28px,4vw,56px)}
  .foot-nav{justify-content:center}
}

/* ============================================================
   REVEAL — progressive enhancement, never hides content.
   Opacity stays 1; only a small transform animates.
   ============================================================ */
html.js .reveal{transform:translateY(14px);transition:transform .55s ease}
html.js .reveal.in{transform:none}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal{transform:none!important;transition:none!important}
  .btn:hover{transform:none!important}
}

/* ============================================================
   DARK MODE — shared token + foundation overrides (auto, no toggle).
   Page stylesheets add component-specific dark tweaks on top.
   ============================================================ */
@media (prefers-color-scheme: dark){
  :root{ --paper:#070A14;--paper2:#0E1430;--paper3:#0B1028;--tx:#EAEDFB;--tx-soft:#AEB6D6;--mu:#828CB2;--line:rgba(255,255,255,0.10);--line-2:rgba(255,255,255,0.18);--head:#F4F6FF;--num:#A5B4FC; }
  /* h1/h2/h3 + .num now resolve via --head/--num, emitted dark from tokens.json (no hand-sync) */
  .btn-ghost{color:var(--tx);border-color:var(--line-2)}
  .btn-ghost:hover{border-color:rgba(255,255,255,0.65)}
  /* header — shared dark glass + wordmark invert. These live here (not in the
     page files) because the light .site-head rule is now also in this file,
     above, so this override wins on source order. Pages add only their own
     header variants (e.g. /profile's data-wavetop rules) after this file. */
  .site-head{background:rgba(7,10,20,0.82)}
  .brand .wm{filter:brightness(0) invert(1)}
}