@import "components.css";
/* ============================================================
   alfatar tech: global token layer (identity v2)
   Palette, type and greys come from the identity deck
   (the alpha = "alfa, primul"): ink #16181D, blue #0563C1, warm greys.
   Fonts are self-hosted; Century Gothic renders where installed,
   otherwise Jost (same geometric family) takes over.
   ============================================================ */
@font-face{font-family:"Manrope";src:url("/assets/fonts/Manrope.ttf") format("truetype-variations");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"Jost";src:url("/assets/fonts/Jost.ttf") format("truetype-variations");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Inconsolata";src:url("/assets/fonts/Inconsolata.ttf") format("truetype-variations");font-weight:200 900;font-style:normal;font-display:swap}

:root{
/* ---- Brand ink ---- */
--color-ink:#16181D;             /* primary brand ink */
--color-ink-deep:#101219;        /* deepest ground: hero, footer */
--color-ink-raised:#1E2128;      /* raised surface on dark */
--color-ink-line:#2C2F37;        /* hairline on dark */

/* ---- Accent blue ---- */
--color-accent:#0563C1;          /* primary accent: text-safe on white, 5.8:1 */
--color-accent-hover:#2E86DE;
--color-accent-press:#044A91;
--color-accent-on-dark:#2A8FE0;  /* accent on ink grounds, 5.4:1 */
--color-accent-tint:#E9F1FA;
--color-accent-ink:#0563C1;      /* small accent text on light */
--color-accent-deep:#0563C1;     /* large figures on light */

/* ---- Warm grey ramp (slightly olive; never mix in a cool grey) ---- */
--color-grey-000:#FFFFFF;
--color-grey-050:#F6F6F4;
--color-grey-100:#ECECEA;
--color-grey-200:#E0E0DC;
--color-grey-300:#D3D3CF;
--color-grey-400:#B0B0A8;
--color-grey-500:#8A8A83;        /* muted ink, 4.6:1 */
--color-grey-700:#5C5C56;        /* body ink, 6.7:1 */
--color-grey-900:#16181D;

/* ---- On dark ---- */
--color-on-dark:#FFFFFF;
--color-on-dark-muted:#B0B0A8;   /* 8.2:1 on ink-deep */
--color-on-dark-faint:#9A9A92;   /* 6.6:1 on ink-deep */

/* ---- Semantic ---- */
--color-positive:#2E7D5B;
--color-critical:#B3261E;

/* ---- Ink roles ---- */
--ink-strong:var(--color-ink);
--ink-body:var(--color-grey-700);
--ink-muted:var(--color-grey-500);
--surface:var(--color-grey-000);
--surface-soft:var(--color-grey-050);
--surface-mid:var(--color-grey-100);
--border:var(--color-grey-200);

/* ---- Legacy aliases (the component layer still uses the navy names) ---- */
--color-navy:var(--color-ink);
--color-navy-deep:var(--color-ink-deep);
--color-navy-raised:var(--color-ink-raised);
--color-navy-line:var(--color-ink-line);

/* ---- Type: three roles ---- */
--font-display:"Century Gothic","Jost","Questrial","Avenir Next",system-ui,sans-serif;
--font-core:"Manrope","Helvetica Neue",Helvetica,Arial,sans-serif;
--font-mono:"Inconsolata","Consolas",ui-monospace,SFMono-Regular,Menlo,monospace;
--text-display:68px;  --lh-display:1.05; --ls-display:-0.03em;
--text-h1:54px;       --lh-h1:1.06;      --ls-h1:-0.028em;
--text-h2:40px;       --lh-h2:1.16;      --ls-h2:-0.022em;
--text-h3:26px;       --lh-h3:1.22;      --ls-h3:-0.016em;
--text-h4:19px;       --lh-h4:1.34;      --ls-h4:-0.008em;
--text-lead:19px;     --lh-lead:1.6;
--text-body:16px;     --lh-body:1.65;
--text-sm:14px;       --lh-sm:1.55;
--text-xs:13px;       --lh-xs:1.5;
--text-eyebrow:12px;  --ls-eyebrow:0.18em;
--text-stat:56px;     --ls-stat:-0.035em;
--weight-regular:400; --weight-medium:500; --weight-semi:600; --weight-bold:700;

/* ---- Space (4px base) ---- */
--space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px; --space-5:20px;
--space-6:24px; --space-8:32px; --space-10:40px;--space-12:48px;--space-16:64px;
--space-20:80px;--space-24:96px;--space-28:112px;--space-32:128px;
--section-y:112px;
--section-y-mobile:64px;
--page-max:1200px;
--page-gutter:40px;
--grid-gap:24px;

/* ---- Radius / line / elevation ---- */
--radius-xs:2px; --radius-sm:4px; --radius-md:8px; --radius-pill:999px;
--border-width:1px;
--rule-accent:2px;
--shadow-card:0 1px 2px rgba(22,24,29,.05);
--shadow-raised:0 10px 30px -14px rgba(22,24,29,.24);
--focus-ring:0 0 0 3px rgba(5,99,193,.42);
--ease:cubic-bezier(.22,.61,.36,1);
--dur:180ms;
}

/* ================= base ================= */
.af{font-family:var(--font-core);color:var(--ink-body);font-size:var(--text-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;container-type:inline-size;container-name:site;background:var(--surface)}
.af *{box-sizing:border-box}
.af h1,.af h2,.af h3,.af h4{font-family:var(--font-display);color:var(--ink-strong);font-weight:var(--weight-bold);margin:0;text-wrap:balance}
:where(.af) p{margin:0;text-wrap:pretty}
.af-nowrap{white-space:nowrap}
.af a{color:var(--color-accent);text-decoration:none}
.af a:hover{color:var(--color-accent-press)}
.af-container{max-width:var(--page-max);margin:0 auto;padding:0 var(--page-gutter)}
.af-section{padding:var(--section-y) 0}
.af-section--soft{background:var(--surface-soft)}
.af-section--mid{background:var(--surface-mid)}
.af-section--dark{background:var(--color-ink-deep);color:var(--color-on-dark-muted)}
.af-section--dark h2,.af-section--dark h3,.af-section--dark h4{color:var(--color-on-dark)}

.af-display{font-family:var(--font-display);font-size:var(--text-display);line-height:var(--lh-display);letter-spacing:var(--ls-display)}
.af-h1{font-size:var(--text-h1);line-height:var(--lh-h1);letter-spacing:var(--ls-h1)}
.af-h2{font-size:var(--text-h2);line-height:var(--lh-h2);letter-spacing:var(--ls-h2)}
.af-h3{font-size:var(--text-h3);line-height:var(--lh-h3);letter-spacing:var(--ls-h3)}
.af-h4{font-size:var(--text-h4);line-height:var(--lh-h4);letter-spacing:var(--ls-h4);font-weight:var(--weight-semi)}
.af-lead{font-size:var(--text-lead);line-height:var(--lh-lead)}
.af-sm{font-size:var(--text-sm);line-height:var(--lh-sm)}
.af-xs{font-size:var(--text-xs);line-height:var(--lh-xs)}
/* eyebrow is the brand's mono voice: the lockup's letterspaced TECH */
.af-eyebrow{font-family:var(--font-mono);font-size:var(--text-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;font-weight:var(--weight-bold);color:var(--color-accent);margin:0}
.af-eyebrow--on-dark{color:var(--color-accent-on-dark)}
.af-muted{color:var(--ink-muted)}
.af-mono{font-family:var(--font-mono);letter-spacing:.02em}

/* ================= button ================= */
.af-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font-family:var(--font-core);font-size:var(--text-sm);font-weight:var(--weight-bold);letter-spacing:.005em;line-height:1;padding:0 var(--space-6);height:48px;border-radius:var(--radius-xs);border:1px solid transparent;cursor:pointer;transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease);white-space:nowrap}
.af-btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.af .af-btn--primary{background:var(--color-accent);color:#fff}
.af .af-btn--primary:hover{background:var(--color-accent-press);color:#fff}
.af .af-btn--secondary{background:transparent;color:var(--color-ink);border-color:var(--color-grey-300)}
.af .af-btn--secondary:hover{border-color:var(--color-ink);background:var(--color-grey-050);color:var(--color-ink)}
.af .af-btn--ghost-dark{background:transparent;color:var(--color-on-dark);border-color:rgba(255,255,255,.34)}
.af .af-btn--ghost-dark:hover{border-color:#fff;background:rgba(255,255,255,.08);color:#fff}
.af-btn--sm{height:40px;padding:0 var(--space-5);font-size:var(--text-xs)}
.af-btn__arrow{font-size:1.05em;line-height:1;transform:translateY(-.5px)}

/* ================= nav ================= */
.af-nav{position:relative;z-index:5}
.af-nav__inner{max-width:var(--page-max);margin:0 auto;padding:0 var(--page-gutter);height:84px;display:flex;align-items:center;gap:var(--space-10)}
.af-nav__logo{display:flex;align-items:center}
.af-nav__logo img{width:168px;height:auto;display:block}
.af-nav__links{display:flex;align-items:center;gap:var(--space-8);margin-left:auto;list-style:none;padding:0;margin-top:0;margin-bottom:0}
.af-nav__links a{font-size:var(--text-sm);font-weight:var(--weight-medium);letter-spacing:.002em;white-space:nowrap}
.af-nav__end{display:flex;align-items:center;gap:var(--space-5)}
.af-nav__burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;background:transparent;border:1px solid var(--color-ink-line);border-radius:var(--radius-xs);cursor:pointer}
.af-nav__burger span{display:block;width:18px;height:1.5px;background:currentColor;box-shadow:0 5px 0 currentColor,0 -5px 0 currentColor}
.af-nav--dark{background:var(--color-ink-deep);color:var(--color-on-dark)}
.af-nav--dark a{color:var(--color-on-dark-muted)}
.af-nav--dark a:hover{color:#fff}
.af-nav--dark .af-nav__burger{color:#fff}
.af-nav--light{background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--border);color:var(--color-ink)}
.af-nav--light a{color:var(--color-grey-700)}
.af-nav--light a:hover{color:var(--color-ink)}
.af-nav--light .af-nav__burger{color:var(--color-ink);border-color:var(--color-grey-300)}

/* language toggle (links): mono to match the lockup */
.af-lang{display:inline-flex;align-items:center;border:1px solid var(--color-grey-300);border-radius:var(--radius-xs);overflow:hidden;height:32px}
.af .af-lang a{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:var(--weight-bold);letter-spacing:.1em;padding:0 var(--space-3);height:100%;display:inline-flex;align-items:center;background:transparent;border:0;color:var(--ink-muted)}
.af .af-lang a[aria-current="true"]{background:var(--color-ink);color:#fff}
.af-lang--on-dark{border-color:var(--color-ink-line)}
.af .af-lang--on-dark a{color:var(--color-on-dark-faint)}
.af .af-lang--on-dark a[aria-current="true"]{background:var(--color-accent-on-dark);color:var(--color-ink-deep)}
.af-nav--light .af-lang{border-color:var(--color-grey-300)}
.af-nav--light .af-lang a{color:var(--ink-muted)}
.af-nav--light .af-lang a[aria-current="true"]{background:var(--color-ink);color:#fff}
.af-nav--light .af-btn--ghost-dark{color:var(--color-ink);border-color:var(--color-grey-300)}
.af-nav--light .af-btn--ghost-dark:hover{border-color:var(--color-ink);background:var(--color-grey-050);color:var(--color-ink)}

/* ================= hero ================= */
.af-hero{position:relative;background:var(--color-ink-deep);color:var(--color-on-dark-muted);overflow:hidden;isolation:isolate}
.af-hero__motif{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
/* the alpha IS the brand idea, so it is the ground rather than a pasted mark */
.af-hero__motif img{position:absolute;right:-4%;top:50%;transform:translateY(-50%);width:560px;height:auto;opacity:.05;user-select:none;display:block}
.af-hero__rules{position:absolute;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(to right,rgba(255,255,255,.05) 1px,transparent 1px);background-size:100px 100%;mask-image:linear-gradient(to bottom,transparent,#000 58%)}
.af-hero__body{position:relative;z-index:1;max-width:var(--page-max);margin:0 auto;padding:var(--space-24) var(--page-gutter) var(--space-28)}
.af-hero__col{max-width:730px}
.af-hero h1{color:#fff;font-size:var(--text-display);line-height:var(--lh-display);letter-spacing:var(--ls-display);margin:var(--space-6) 0 0}
.af-hero__col > h1:first-child{margin-top:0}
.af-hero__sub{font-size:var(--text-lead);line-height:var(--lh-lead);color:var(--color-on-dark-muted);max-width:60ch;margin-top:var(--space-8)}
.af-hero__sub + .af-hero__sub{margin-top:var(--space-4)}
.af-hero__cta{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-10)}
.af-hero__meta{display:flex;flex-wrap:wrap;gap:var(--space-6);align-items:center;margin-top:var(--space-16);padding-top:var(--space-5);border-top:1px solid var(--color-ink-line);font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--color-on-dark-faint);font-weight:var(--weight-bold)}
.af-hero__meta span{white-space:nowrap}
.af-hero__meta b{color:var(--color-accent-on-dark);font-weight:var(--weight-bold)}

/* ================= container-query responsive ================= */
@container site (max-width:900px){
.af-container,.af-nav__inner,.af-hero__body,.af-section{--page-gutter:24px}
.af-section{padding:var(--section-y-mobile) 0}
.af-nav__inner{height:68px;gap:var(--space-4);padding:0 var(--page-gutter)}
.af-nav__logo img{width:138px}
.af-nav__links{display:none}
.af-nav__burger{display:inline-flex}
.af-nav__end{margin-left:auto}
.af-nav__end .af-btn{display:none}
.af-hero__body{padding:var(--space-12) var(--page-gutter) var(--space-16)}
.af-hero h1{font-size:36px;letter-spacing:-.024em;line-height:1.08}
.af-hero__sub{font-size:16px;margin-top:var(--space-4)}
.af-hero__cta{margin-top:var(--space-8);flex-direction:column;align-items:stretch}
.af-hero__cta .af-btn{width:100%}
.af-hero__meta{margin-top:var(--space-12);gap:var(--space-3);font-size:11px}
.af-hero__motif img{width:360px;right:-14%;top:auto;bottom:-9%;transform:none;opacity:.07}
.af-h2{font-size:28px}
.af-h3{font-size:21px}
}
@container site (min-width:901px) and (max-width:1200px){
.af-hero h1{font-size:52px}
}

/* ================= wide screens: keep the 1440 proportions ================= */
/* The design is composed at 1440px. Above that, scale the whole page so the content
   column keeps the same share of the viewport instead of floating in empty margins. */
@media (min-width:1600px){.af{zoom:1.12}}
@media (min-width:1800px){.af{zoom:1.25}}
@media (min-width:2100px){.af{zoom:1.4}}
@media (min-width:2400px){.af{zoom:1.55}}
@media (min-width:1441px){.af{zoom:clamp(1,calc(100vw / 1440px),1.55)}}