/* OMNI Agent OS — /agent-os, /en/agent-os · 2026-10-18
   "Halka" direction: night background, blue ring, approval card inside the ring.
   Builds on site.css (tokens, header, buttons, invite form, FAQ). No inline styles (CSP style-src 'self'). */

.ao-page{--ao-gap:clamp(88px,11vw,140px)}
.ao-page main{overflow-x:clip}

/* Touch targets ≥ 44 px for the shared header/footer pieces on this page */
.ao-page .brand{min-height:44px}
.ao-page .brand-ring{flex:none}
.ao-page .lang a{position:relative;min-width:44px}
.ao-page .lang a::after{content:"";position:absolute;inset:-7px 0}
.ao-page .nav a{display:inline-flex;align-items:center;min-height:44px}
.ao-page .btn-sm{height:44px}

/* Primary button with dark text: 6.9:1 on the brand blue (white text would be ~3:1) */
.ao-btn{color:#05070C;background:linear-gradient(180deg,#7CC6FF 0%,#4FAEFF 50%,#2F9BFF 100%);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 10px 30px -10px rgba(47,155,255,.75),0 0 0 1px rgba(108,192,255,.6)}
.ao-btn:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 14px 44px -8px rgba(47,155,255,.95),0 0 0 1px rgba(191,225,255,.9)}
.ao-btn .ico{stroke-width:2}

.ao-kick{font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.ao-soon{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--warn);box-shadow:inset 0 0 0 1px rgba(243,201,143,.45);background:rgba(243,201,143,.06)}

/* ---------- Hero ---------- */
.ao-hero{position:relative;padding:calc(var(--header-h) + clamp(40px,7vw,96px)) 0 var(--ao-gap);isolation:isolate}
.ao-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(50% 55% at 76% 48%,rgba(47,140,255,.14),transparent 70%)}
.ao-hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:clamp(40px,6vw,80px)}
.ao-hero .eyebrow{margin-bottom:24px}
.ao-display{font-size:clamp(46px,6.4vw,96px);line-height:.98;letter-spacing:-.05em;font-weight:520;margin-bottom:26px}
.ao-display em{font-family:var(--f-serif);font-style:italic;font-weight:400;letter-spacing:-.02em;
 background:linear-gradient(100deg,var(--brand-3) 0%,var(--brand-2) 45%,var(--brand) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em}
.ao-hero .lead{max-width:31em;margin-bottom:32px}
.ao-cta{display:flex;flex-wrap:wrap;gap:12px}
.ao-note{margin-top:16px;font-size:14px;color:var(--muted);max-width:34em}

.ao-ring-wrap{display:grid;justify-items:center;gap:14px;min-width:0}
.ao-ring{position:relative;width:min(460px,100%);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
 box-shadow:inset 0 0 0 clamp(10px,1.5vw,16px) var(--brand),0 0 90px 4px rgba(47,155,255,.5),inset 0 0 70px 12px rgba(47,155,255,.35)}
.ao-card{width:78%;padding:20px;border-radius:var(--r-lg);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line),0 20px 60px rgba(0,0,0,.6)}
.ao-card .ao-kick{font-size:11px;color:var(--warn)}
.ao-card-title{font-size:18px;font-weight:700;line-height:1.3;margin-top:8px;letter-spacing:-.01em}
.ao-card-meta{font-size:14px;line-height:1.5;color:var(--muted);margin-top:8px;overflow-wrap:anywhere}
.ao-card-actions{display:flex;gap:8px;margin-top:16px}
.ao-fake{flex:1;display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 12px;border-radius:999px;font-size:14px;font-weight:650;text-align:center;line-height:1.2}
.ao-fake-g{box-shadow:inset 0 0 0 1px var(--line-3);color:var(--text)}
.ao-fake-p{background:var(--brand);color:#05070C}
.ao-caption{font-size:13px;color:var(--subtle)}

/* ---------- Install (not available yet) ---------- */
.ao-install{padding-bottom:var(--ao-gap)}
.ao-install-card{padding:clamp(20px,3vw,28px);border-radius:var(--r-lg);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.ao-install-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.ao-install-box{display:flex;align-items:center;gap:12px;margin-top:16px;padding:16px 18px;border-radius:14px;border:1px dashed var(--line-3);background:var(--bg-1);color:var(--muted);font-size:15px}
.ao-install-box .ico{color:var(--subtle)}
.ao-install-foot{margin-top:12px;font-size:14px;color:var(--muted)}

/* ---------- Sections ---------- */
.ao-sec{padding-bottom:var(--ao-gap)}
.ao-sec .eyebrow{margin-bottom:18px}
.ao-h2{font-size:clamp(34px,4.6vw,60px);line-height:1.02;letter-spacing:-.04em;font-weight:560;max-width:16em}
.ao-h2 em{font-family:var(--f-serif);font-style:italic;font-weight:400;letter-spacing:-.02em;color:var(--brand-2)}
.ao-lead{margin-top:18px;font-size:clamp(16px,1.3vw,18px);color:var(--muted);max-width:36em}

.ao-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:40px}
.ao-tile{padding:28px;border-radius:var(--r-lg);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.ao-tile svg{width:28px;height:28px;color:var(--brand-2)}
.ao-tile svg use{stroke-width:1.8}
.ao-tile h3{font-size:22px;font-weight:650;letter-spacing:-.02em;margin:18px 0 8px}
.ao-tile p{color:var(--muted);line-height:1.6}

.ao-flow{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1.2fr) auto minmax(0,1.2fr) auto minmax(0,1fr);align-items:stretch;gap:12px;margin-top:44px}
.ao-step{padding:22px;border-radius:var(--r-lg);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);min-width:0}
.ao-step-box{box-shadow:inset 0 0 0 1px rgba(47,155,255,.4)}
.ao-step-gate{background:#0F1F33;box-shadow:inset 0 0 0 1px var(--brand)}
.ao-step-gate .ao-kick{color:var(--brand-3)}
.ao-step-gate p{color:#D3E2F2}
.ao-step .ao-kick{font-size:11px}
.ao-step b{display:block;font-size:18px;font-weight:700;margin-top:10px;letter-spacing:-.01em}
.ao-step p{font-size:14.5px;line-height:1.5;color:var(--muted);margin-top:6px}
.ao-arrow{display:flex;align-items:center;color:var(--brand)}
.ao-arrow svg{width:22px;height:22px}

.ao-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin-top:36px;border-radius:var(--r-lg);overflow:hidden;background:var(--line)}
.ao-grid>div{padding:28px;background:var(--bg)}
.ao-grid b{font-size:18px;font-weight:650}
.ao-grid p{margin-top:8px;color:var(--muted);line-height:1.55}

.ao-plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:36px}
.ao-plan{display:flex;flex-direction:column;padding:30px;border-radius:var(--r-lg);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.ao-plan-main{box-shadow:inset 0 0 0 1px var(--brand)}
.ao-price{font-size:clamp(32px,3.4vw,44px);font-weight:750;letter-spacing:-.03em;margin-top:10px;line-height:1.1}
.ao-price-sm{font-size:clamp(26px,2.6vw,32px)}
.ao-plan>p{margin-top:6px;color:var(--muted)}
.ao-plan ul{margin:20px 0 0;display:grid;gap:10px}
.ao-plan li{position:relative;padding-left:24px;line-height:1.5}
.ao-plan li::before{content:"";position:absolute;left:2px;top:.5em;width:8px;height:8px;border-radius:50%;box-shadow:inset 0 0 0 1.6px var(--brand-2)}
.ao-plan .btn{margin-top:auto;width:100%}
.ao-plan ul{margin-bottom:24px}

.ao-faq{max-width:900px}
.ao-faq .faq-list{margin-top:28px}

.ao-join{text-align:center}
.ao-join .beta-inner{gap:24px}
.ao-join .invite-done strong{font-size:22px}

.ao-foot-note{max-width:44em}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
 .ao-flow{grid-template-columns:repeat(2,minmax(0,1fr))}
 .ao-arrow{display:none}
 .ao-grid,.ao-plans,.ao-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
 .ao-hero-grid{grid-template-columns:minmax(0,1fr)}
 .ao-hero .lead{margin-bottom:26px}
 .ao-cta .btn{flex:1 1 auto}
 .ao-ring{width:min(420px,100%)}
 .ao-grid,.ao-plans,.ao-cards,.ao-flow{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:520px){
 .ao-page .header-actions .btn{display:inline-flex;padding:0 14px}
 .ao-card{width:84%;padding:14px}
 .ao-card-title{font-size:15px}
 .ao-card-meta{font-size:12.5px;margin-top:6px}
 .ao-card-actions{margin-top:12px;gap:6px}
 .ao-fake{min-height:36px;font-size:12.5px;padding:0 8px}
 .ao-tile,.ao-plan,.ao-grid>div{padding:22px}
}
@media (max-width:420px){
 .ao-page .header-actions .btn{display:none}
}
.ao-page .footer-links{gap:0}
.ao-page .footer-links a{display:inline-flex;align-items:center;min-height:44px}
.ao-page .invite-note a,.ao-page .invite-code a{display:inline-flex;align-items:center;min-height:44px}
.ao-page .invite-note a{min-width:44px;justify-content:center}