/* FreeSOF: Fluent-style storefront. Sticky bar, flat hero panel, hairline-divided lists instead of card grids. */
:root{
  --bg:#ffffff;
  --surface:#f3f5f9;
  --surface-2:#e8ecf4;
  --fg:#17191f;
  --muted:#5b6272;
  --line:#dde1ea;
  --accent:#1f5cf2;
  --accent-fg:#ffffff;
  --accent-2:#1ed3c0;
  --code-bg:#14171f;
  --code-fg:#dfe6f5;
  --warn-bg:#fff4d6;
  --warn-fg:#6b4a00;
  --font-ui:"Segoe UI","Noto Sans","PingFang SC","Microsoft YaHei","Noto Sans CJK SC",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --wrap:1180px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#12141a;--surface:#1a1d26;--surface-2:#242836;--fg:#eef1f8;--muted:#a3abbd;--line:#2c3141;
  --accent:#5b8cff;--accent-fg:#0b1020;--accent-2:#2fe0cd;--code-bg:#0b0d12;--code-fg:#dfe6f5;
  --warn-bg:#3a2f12;--warn-fg:#ffd98a;color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#12141a;--surface:#1a1d26;--surface-2:#242836;--fg:#eef1f8;--muted:#a3abbd;--line:#2c3141;
  --accent:#5b8cff;--accent-fg:#0b1020;--accent-2:#2fe0cd;--code-bg:#0b0d12;--code-fg:#dfe6f5;
  --warn-bg:#3a2f12;--warn-fg:#ffd98a;color-scheme:dark}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font-ui);font-size:16px;line-height:1.55}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:20px}
h1,h2,h3{text-wrap:balance;margin:0;line-height:1.18;letter-spacing:-.01em}
p{margin:0}

/* top bar */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:var(--bg);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:28px;min-height:56px;flex-wrap:wrap;padding-block:6px}
.brand{display:flex;align-items:center;text-decoration:none;color:var(--fg)}
.brand .logo-img{height:34px;width:auto;display:block;background:#fff;padding:4px 10px;border-radius:2px}
.nav{display:flex;gap:22px;flex:1;min-width:0;flex-wrap:wrap}
.nav a{text-decoration:none;font-size:14px;padding-block:6px;border-bottom:2px solid transparent}
.nav a:hover{border-color:var(--muted)}
.nav a[aria-current="page"]{border-color:var(--accent);font-weight:600}
.btn{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:8px 22px;border-radius:2px;font:600 15px/1.2 var(--font-ui);text-decoration:none;border:1px solid transparent;cursor:pointer}
.btn-primary{background:var(--accent);color:var(--accent-fg)}
.btn-primary:hover{filter:brightness(1.1)}
.btn-ghost{background:transparent;color:var(--fg);border-color:var(--fg)}
.btn-ghost:hover{background:var(--surface)}
.btn-sm{min-height:34px;padding:6px 16px;font-size:14px}

.lang{min-height:34px;padding:4px 8px;font:14px var(--font-ui);color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:2px;cursor:pointer;max-width:100%}
.lang:hover{border-color:var(--muted)}
body{overflow-wrap:break-word}

/* hero panel */
.hero{padding-block:28px 0}
.hero-panel{background:var(--surface);display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);min-height:380px}
.hero-text{padding:56px 48px;display:flex;flex-direction:column;justify-content:center;min-width:0}
.eyebrow{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.hero h1{font-size:clamp(32px,4.6vw,50px);font-weight:600;margin-top:12px}
.hero .lead{font-size:18px;color:var(--muted);max-width:50ch;margin-top:16px}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.hero-art{display:grid;place-items:center;padding:40px;background:var(--surface-2);min-width:0}
.hero-art img{width:min(240px,70%);height:auto;max-width:100%;display:block}
.hero-art:has(img[src="orizon-logo.png"]){background:linear-gradient(135deg,#1c4be0,#2f84f0 55%,#1ed3c0)}
.hero-art img.plate{width:min(460px,100%);background:#fff;padding:22px 26px;border-radius:2px}

/* sections */
section{padding-block:64px}
section.tight{padding-top:0}
.sec-head{max-width:62ch;margin-bottom:28px}
.sec-head h2{font-size:clamp(24px,3vw,32px);font-weight:600;margin-top:8px}
.sec-head p{color:var(--muted);margin-top:10px;font-size:17px}

/* product row */
.prod{display:grid;grid-template-columns:200px minmax(0,1fr) auto;gap:32px;align-items:center;border:1px solid var(--line);padding:28px 32px}
.prod-logo{display:grid;place-items:center;background:linear-gradient(135deg,#1c4be0,#2f84f0 55%,#1ed3c0);aspect-ratio:1;max-width:100%}
.prod-logo img{width:62%;height:auto;display:block}
.prod h3{font-size:26px;font-weight:600}
.prod p{color:var(--muted);margin-top:8px;max-width:58ch}
.tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.tag{font-size:12px;font-weight:600;padding:2px 9px;border:1px solid var(--line);color:var(--muted);border-radius:2px}
.tag.beta{background:var(--warn-bg);color:var(--warn-fg);border-color:transparent}

/* hairline lists */
.cols3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--line)}
.cols3>div{padding:22px 28px 22px 0}
.cols3 h3{font-size:18px;font-weight:600}
.cols3 p{color:var(--muted);font-size:15px;margin-top:6px}
.rows{border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:24px;padding:16px 0;border-bottom:1px solid var(--line)}
.row dt{font-weight:600;overflow-wrap:anywhere}
.row .k{font-family:var(--font-mono);font-size:14px;overflow-wrap:anywhere}
.row dd,.row .v{margin:0;color:var(--muted)}
dl.rows{margin:0}

/* split text blocks */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:48px;align-items:start}
.split h2{font-size:clamp(24px,3vw,32px);font-weight:600}
.split .body p+p{margin-top:14px}
.split .body{color:var(--muted);font-size:17px}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:0;padding-block:22px;border-block:1px solid var(--line)}
.facts dt{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.facts dd{margin:3px 0 0;font-weight:600;font-variant-numeric:tabular-nums}

/* install */
.install{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px;align-items:start}
.steps{display:grid;gap:18px;padding:0;margin:0;list-style:none;counter-reset:s}
.steps li{display:grid;grid-template-columns:36px minmax(0,1fr);gap:14px;counter-increment:s}
.steps li::before{content:counter(s);width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--line);font-weight:600;color:var(--accent);font-variant-numeric:tabular-nums}
.steps h3{font-size:17px;font-weight:600}
.steps p{color:var(--muted);font-size:15px;margin-top:2px}
.term{background:var(--code-bg);color:var(--code-fg);border-radius:4px;overflow:hidden;min-width:0}
.term-bar{display:flex;justify-content:space-between;align-items:center;padding:8px 14px;border-bottom:1px solid rgba(255,255,255,.08);font:12px var(--font-mono);color:#8b94ab}
.term pre{margin:0;padding:18px;overflow-x:auto;font:400 14px/1.8 var(--font-mono)}
.term .c{color:#6f7a93}
.term .p{color:#2fe0cd}
.copy{background:transparent;color:#cfd7ea;border:1px solid rgba(255,255,255,.2);border-radius:2px;font:12px var(--font-ui);padding:3px 10px;cursor:pointer}
.copy:hover{background:rgba(255,255,255,.08)}
.note{display:flex;gap:12px;background:var(--warn-bg);color:var(--warn-fg);padding:14px 16px;margin-top:20px;font-size:14px}
.note b{white-space:nowrap}

/* band */
.band{background:var(--surface)}
.band .wrap{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:40px;align-items:center}
.band h2{font-size:clamp(24px,3vw,32px);font-weight:600;margin-top:8px}
.band p{color:var(--muted);margin-top:12px;max-width:52ch}
.slogan{font-size:clamp(20px,2.6vw,28px);font-weight:600;line-height:1.4}
.slogan span{display:block}

/* footer */
footer{border-top:1px solid var(--line);padding-block:22px 26px;font-size:14px}
.foot-min{display:flex;flex-direction:column;gap:12px}
.foot-links{display:flex;flex-wrap:wrap;gap:6px 24px}
.foot-links a{color:var(--fg);text-decoration:none;padding-block:2px}
.foot-links a:hover{text-decoration:underline}
.legal{margin:0;display:flex;gap:4px 20px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.brand .logo-lg{height:40px;background:none;padding:0;border-radius:0}
.lgaw-art{width:min(380px,86%);height:auto;max-width:100%;display:block}
.wm-text{font-weight:700;letter-spacing:.14em;font-size:clamp(40px,8vw,76px);color:var(--fg);padding-left:.14em}

@media (max-width:900px){
  .hero-panel{grid-template-columns:minmax(0,1fr)}
  .hero-text{padding:36px 24px}
  .hero-art{padding:32px}
  .prod{grid-template-columns:minmax(0,1fr);padding:22px 20px}
  .prod-logo{max-width:140px}
  .cols3,.split,.install,.band .wrap{grid-template-columns:minmax(0,1fr)}
  .cols3>div{padding-right:0}
  .split{gap:20px}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  section{padding-block:48px}
  .top .wrap{gap:12px}
  .nav{order:3;flex-basis:100%;gap:18px}
  .row{grid-template-columns:minmax(0,1fr);gap:2px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* theme toggle button */
.theme-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:2px;cursor:pointer}
.theme-btn:hover{border-color:var(--muted)}
.theme-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}