/* ===== Oksydian — Landing — uses tokens.css ===== */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--color-neutral-text);
  font: 400 calc(var(--typography-body-size) * 1px)/var(--typography-body-lineHeight) var(--typography-body-family);
  background:var(--color-neutral-bg);
}
.container{max-width:calc(var(--layout-container-xl) * 1px);margin:0 auto;padding:0 24px}

/* Accessibility */
a{color:var(--interactive-link-default);text-decoration:underline;text-underline-offset:2px}
a:hover{color:var(--interactive-link-hover)}
a:focus-visible,button:focus-visible,.btn:focus-visible{
  outline:3px solid var(--interactive-focusRing-outline);
  outline-offset:calc(var(--interactive-focusRing-offset) * 1px);
}
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{position:fixed;left:16px;top:16px;width:auto;height:auto;padding:10px 12px;background:#fff;color:#000;border:2px solid var(--interactive-focusRing-outline);border-radius:10px;z-index:1000}
.visually-hidden{position:absolute!important;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;width:1px;overflow:hidden;white-space:nowrap;border:0;padding:0;margin:0}
[hidden]{display:none!important}

/* Header */
header.site{position:sticky;top:0;background:rgba(255,255,255,.92);backdrop-filter:saturate(120%) blur(8px);border-bottom:1px solid var(--color-neutral-border);z-index:var(--zIndex-sticky)}
header .bar{display:flex;gap:16px;align-items:center;justify-content:space-between;padding:16px 24px}
.brand{font-weight:900;letter-spacing:.02em;text-decoration:none}
.brand__wordmark{font-size:20px;font-weight:900;letter-spacing:.18em;color:var(--color-neutral-text);text-transform:uppercase}
.nav{display:flex;gap:18px;align-items:center}
.nav a,.nav__link{text-decoration:none;color:var(--color-neutral-text);padding:8px 6px}
.nav a:hover{text-decoration:underline}
.nav a.active{color:var(--color-primary-500);font-weight:600}

/* Burger */
.nav-toggle{display:none;margin-left:auto;align-items:center;gap:8px;padding:10px 12px;border-radius:16px;border:2px solid var(--color-neutral-border);background:#fff;box-shadow:0 6px 16px rgba(0,0,0,.08);cursor:pointer}
.nav-toggle__bars{width:20px;height:14px;position:relative;display:inline-block}
.nav-toggle__bars:before,.nav-toggle__bars:after{content:"";position:absolute;left:0;right:0;height:2px;background:currentColor;border-radius:2px}
.nav-toggle__bars:before{top:0;box-shadow:0 6px 0 0 currentColor}
.nav-toggle__bars:after{bottom:0}
.nav-toggle__label{font-weight:700}
@media(max-width:1023px){
  .nav-desktop{display:none}
  .nav-toggle{display:flex}
}

/* Mobile panel */
.mobile-nav{position:fixed;inset:72px 12px auto 12px;border:1px solid var(--color-neutral-border);border-radius:16px;box-shadow:0 24px 36px rgba(0,0,0,.18);padding:20px;display:flex;flex-direction:column;gap:16px;z-index:60;background:var(--color-neutral-surface)}
.mobile-nav .nav{flex-direction:column;gap:10px}
.mobile-cta{margin-top:8px}
body.menu-open{overflow:hidden}

/* Buttons */
.btn{padding:10px 16px;border-radius:calc(var(--radius-md) * 1px);border:1px solid var(--color-neutral-text);background:transparent;color:var(--color-neutral-text);font-weight:600;min-height:44px;min-width:44px;display:inline-flex;align-items:center;cursor:pointer;text-decoration:none}
.btn:hover{background:var(--color-neutral-text);color:#fff}
.btn-primary{border-color:#D40000;background:#D40000;color:var(--interactive-buttonPrimary-text)}
.btn-primary:hover{background:#A80000;border-color:#A80000}

/* ===== HERO ===== */
.hero{padding:96px 0 64px;border-bottom:6px solid var(--color-neutral-text)}
.hero__inner{display:flex;justify-content:space-between;align-items:flex-end;gap:48px}
.hero__name{font-size:clamp(18px,1.4vw,22px);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--color-neutral-mutedText);margin:0 0 12px}
.hero h1{font-size:clamp(52px,6.2vw,calc(var(--typography-heading-scale-h1) * 1px));line-height:.94;letter-spacing:-.01em;margin:0;color:#3B1FA0}
.hero__subtitle{font-size:clamp(22px,2.2vw,32px);font-weight:700;line-height:1.15;margin:8px 0 0;color:var(--color-neutral-text)}
.hero__modes{font-size:clamp(16px,1.2vw,20px);font-weight:600;color:var(--color-primary-500);margin:16px 0 0}
.hero__geo{font-size:15px;color:var(--color-neutral-mutedText);margin:8px 0 0;letter-spacing:.04em}
.hero__cta{flex-shrink:0}
@media(max-width:980px){
  .hero__inner{flex-direction:column;align-items:flex-start}
  .hero{padding:64px 0 48px}
}

/* ===== SECTIONS ===== */
.section{padding:64px 0}
.section.alt{background:var(--color-neutral-surface)}
@media(max-width:980px){.section{padding:48px 0}}
@media(max-width:640px){.section{padding:40px 0}}
.head{display:grid;gap:12px;margin-bottom:24px}
.kicker{font-weight:800;text-transform:uppercase;letter-spacing:.16em;font-size:12px;color:var(--color-neutral-mutedText)}
h2{font-size:clamp(36px,3.4vw,calc(var(--typography-heading-scale-h2) * 1px));line-height:1.05;margin:0;color:#3B1FA0}
h3{font-size:clamp(20px,1.2vw,calc(var(--typography-heading-scale-h3) * 1px));margin:0 0 8px}
.muted{color:var(--color-neutral-mutedText)}

/* ===== INTRODUCTION ===== */
.intro-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:64px;align-items:start}
.intro__lead{font-size:clamp(18px,1.3vw,21px);line-height:1.55;margin:0 0 16px}
.intro__main p{color:var(--color-neutral-mutedText);margin:0 0 12px}
.intro__voice blockquote{font-size:clamp(24px,2vw,32px);font-weight:800;line-height:1.15;margin:0;padding-left:24px;border-left:6px solid var(--color-primary-500);color:var(--color-neutral-text)}
@media(max-width:980px){.intro-grid{grid-template-columns:1fr;gap:32px}}

/* ===== SCOPE (What I bring) ===== */
.scope-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.scope-block{border-top:4px solid var(--color-primary-500);padding:20px 0 0}
.scope-block p{color:var(--color-neutral-mutedText);margin:0}
.scope-block--highlight{border-top-color:var(--color-accent-400)}
.scope-block--highlight p{font-size:15px}
@media(max-width:640px){.scope-grid{grid-template-columns:1fr}}

/* ===== CAPABILITIES ===== */
.cap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.cap-block{border-top:3px solid var(--color-neutral-border);padding:16px 0 0}
.cap-block p{color:var(--color-neutral-mutedText);margin:0}
@media(max-width:980px){.cap-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.cap-grid{grid-template-columns:1fr}}

/* ===== IMPACT (facts) ===== */
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
@media(max-width:980px){.facts{grid-template-columns:repeat(2,1fr);gap:24px}}
@media(max-width:640px){.facts{grid-template-columns:1fr;gap:20px}}
.fact{display:grid;gap:8px}
.num{font-weight:900;font-size:clamp(36px,3.6vw,56px);color:var(--color-primary-700);line-height:1;white-space:nowrap}
.label{color:var(--color-neutral-mutedText);font-size:15px}

/* ===== CREDENTIALS ===== */
.cred-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.cred-col h3{font-size:16px;margin:0 0 4px}
.cred-col p{font-size:15px;margin:0}
@media(max-width:980px){.cred-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.cred-grid{grid-template-columns:1fr}}

/* ===== ABOUT (AI + Ecosystem) ===== */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.about-block h3{margin-bottom:12px}
.about-block p{color:var(--color-neutral-mutedText);margin:0 0 8px}
@media(max-width:640px){.about-grid{grid-template-columns:1fr}}

/* ===== CONTACT ===== */
.contact{background:var(--color-dark-bg);color:var(--color-dark-text);padding:64px 0}
.contact-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:48px;align-items:end}
@media(max-width:980px){.contact-grid{grid-template-columns:1fr}}
.contact h2{color:var(--color-dark-text)}
.contact .lead{color:var(--color-dark-mutedText);margin:8px 0 0}
.contact-details{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.contact-info{margin:0}
.contact-info a{color:var(--color-dark-mutedText)}

/* ===== FOOTER ===== */
.site-footer{border-top:1px solid var(--color-neutral-border);padding:24px 0;font-size:14px;color:var(--color-neutral-mutedText)}
.footer-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}
.site-footer a{color:var(--color-neutral-mutedText)}
.site-footer a:hover{color:var(--color-neutral-text)}

/* ===== SCROLL TO TOP ===== */
.scroll-top{
  position:fixed;bottom:24px;right:24px;z-index:50;
  width:48px;height:48px;border-radius:50%;border:1px solid var(--color-neutral-border);
  background:rgba(255,255,255,.92);backdrop-filter:blur(6px);
  color:var(--color-neutral-text);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 16px rgba(0,0,0,.1);
  transition:opacity .2s ease,transform .2s ease;
}
.scroll-top:hover{background:var(--color-neutral-text);color:#fff}
.scroll-top[hidden]{opacity:0;pointer-events:none;transform:translateY(12px)}
.scroll-top:not([hidden]){opacity:1;transform:translateY(0)}
@media(prefers-reduced-motion:reduce){.scroll-top{transition:none}}

/* ===== MODAL ===== */
.c-modal[hidden]{display:none}
.c-modal{position:fixed;inset:0;z-index:1000}
.c-modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.5)}
.c-modal__panel{position:relative;margin:8vh auto 0;max-width:720px;background:#fff;border-radius:16px;padding:28px;box-shadow:0 24px 72px rgba(0,0,0,.28)}
.c-modal__header{display:flex;align-items:flex-start;justify-content:space-between;margin:0 0 12px}
.c-modal__title{margin:0}
.c-modal__close{border:0;background:transparent;font-size:28px;line-height:1;cursor:pointer;color:inherit}
.c-row{display:flex;gap:16px}
.c-field{flex:1;display:flex;flex-direction:column;gap:6px}
.c-field input,.c-field textarea{padding:10px;border:1px solid var(--color-neutral-border);border-radius:calc(var(--radius-sm) * 1px);font:inherit}
.c-field input:focus,.c-field textarea:focus{outline:2px solid var(--interactive-focusRing-outline);outline-offset:1px}
.c-actions{display:flex;gap:12px;margin-top:12px}
.c-form__note{margin-top:12px;font-size:14px;color:var(--color-neutral-mutedText)}
.c-form__flash{padding:8px 12px;border-radius:6px;font-size:14px;margin-top:8px}
.c-form__flash--ok{background:#e8f5e9;color:#1b5e20}
.c-form__flash--err{background:#fce4ec;color:#b71c1c}
@media(max-width:768px){.c-row{flex-direction:column}.c-modal__panel{margin:10vh 12px 0;max-width:none;padding:22px}}