/* Layout: one long page that previews every page of odzer.in, each as a section under a sticky menu. Lapis-blue high-altitude sky, saffron sun, snow-white ground. */
:root{
  --bg:#F4F6F9; --surface:#FFFFFF; --tint:#E9EFF7; --ink:#14223A; --muted:#566377; --line:#D9E0EA;
  --lapis:#1E3F73; --lapis-2:#2C5596; --sun:#E3A11F; --sun-ink:#8C5A00; --sun-tint:#FBF0D9;
  --good:#2E7A4E; --good-tint:#E3F2E9; --hero:#17305A; --on-hero:#FFFFFF; --on-hero-muted:#C9D6EA;
  --todo:#9A5B00; --todo-bg:#FFF5E0; --brand-o:#E28A0E; --brand-y:#FDC613;
  --display:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --brand:'Prosto One', 'Trebuchet MS', system-ui, sans-serif;
  --body:'Mukta', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --r:10px;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#0C1524; --surface:#132037; --tint:#18273F; --ink:#E7ECF4; --muted:#9BA8BB; --line:#26354F;
  --lapis:#8DB0E6; --lapis-2:#A9C4EE; --sun:#F0B43C; --sun-ink:#F3C266; --sun-tint:#2A2414;
  --good:#63C28B; --good-tint:#15291F; --hero:#0F2141; --on-hero:#FFFFFF; --on-hero-muted:#B4C3DA;
  --todo:#F3C266; --todo-bg:#2A2414; color-scheme:dark }}
:root[data-theme="dark"]{
  --bg:#0C1524; --surface:#132037; --tint:#18273F; --ink:#E7ECF4; --muted:#9BA8BB; --line:#26354F;
  --lapis:#8DB0E6; --lapis-2:#A9C4EE; --sun:#F0B43C; --sun-ink:#F3C266; --sun-tint:#2A2414;
  --good:#63C28B; --good-tint:#15291F; --hero:#0F2141; --on-hero:#FFFFFF; --on-hero-muted:#B4C3DA;
  --todo:#F3C266; --todo-bg:#2A2414; color-scheme:dark }
*{box-sizing:border-box}
[hidden]{display:none!important}
body{background:var(--bg); color:var(--ink); font-family:var(--body); font-size:17px; line-height:1.6}
h1,h2,h3{font-family:var(--display); font-weight:600; line-height:1.22; letter-spacing:-.005em; text-wrap:balance; margin:0}
h3{font-weight:500}
.disp,.wm{font-family:var(--brand); font-weight:400; letter-spacing:.5px; color:var(--brand-o)}
h1{font-size:clamp(34px,5vw,56px)} h2{font-size:clamp(32px,4.4vw,50px)} h3{font-size:clamp(23px,2.7vw,30px)}
p{margin:0} a{color:var(--lapis-2)} a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--sun); outline-offset:2px}
.wrap{max-width:1160px; margin:0 auto; padding-inline:20px}
svg.i{width:24px;height:24px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.num{font-variant-numeric:tabular-nums}
/* nav */
header.top{position:sticky; top:env(safe-area-inset-top,0px); z-index:20; background:var(--surface); border-bottom:1px solid var(--line)}
header.top .wrap{display:flex; align-items:center; gap:18px; padding-block:10px; flex-wrap:wrap}
.mark{display:flex; align-items:center; gap:8px; text-decoration:none; color:var(--ink)}
.mark .disp{font-size:38px; letter-spacing:.5px; line-height:1}
.logo{display:inline-block; flex:none; aspect-ratio:266/360; background:url(logo.png) center/contain no-repeat}
.mark .logo{height:60px}
.logo-y{background-image:url(logo-yellow-head.png)}
.hero-mark .logo{height:1.5em; margin-right:.05em}
footer .mark .logo{height:64px}

nav.menu{display:flex; gap:4px 14px; flex-wrap:wrap; flex:1; min-width:0}
nav.menu a{color:var(--muted); text-decoration:none; font-weight:500; font-size:15px; padding:4px 2px; white-space:nowrap}
nav.menu a:hover{color:var(--ink)}
.btn{display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:999px; font-weight:600; text-decoration:none; border:1.5px solid transparent; cursor:pointer; font-family:var(--body); font-size:15.5px; line-height:1.2}
.btn.sun{background:var(--sun); color:#1A1405}
.btn.ghost{border-color:currentColor; color:inherit; background:transparent}
.btn svg.i{width:18px;height:18px}
/* hero */
.hero{background:var(--hero); color:var(--on-hero); position:relative; overflow:hidden}
.hero .wrap{position:relative; padding-block:88px 132px; display:grid; gap:24px}
.hero-mark{font-family:var(--brand); font-weight:400; font-size:clamp(54px,8vw,100px); line-height:.95; letter-spacing:1px; display:flex; align-items:center; gap:.12em; color:var(--brand-y)}
.tagline{font-family:var(--display); font-weight:500; font-size:clamp(20px,2.4vw,28px); line-height:1.3; color:var(--on-hero); margin-top:-4px}
.hero .eyebrow{color:var(--sun); letter-spacing:2px; text-transform:uppercase; font-size:13px; font-weight:600}
.hero p.lead{color:var(--on-hero-muted); font-size:clamp(17px,2vw,20px); max-width:44ch}
.hero .ctas{display:flex; gap:12px; flex-wrap:wrap; margin-top:6px}
.hero svg.range{position:absolute; left:0; right:0; bottom:0; width:100%; height:120px}
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:0; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); margin-top:-48px; position:relative}
.stats>div{padding:18px 20px; border-left:1px solid var(--line)} .stats>div:first-child{border-left:0}
.stats b{display:block; font-family:var(--display); font-weight:600; font-size:26px; color:var(--lapis)}
.stats span{color:var(--muted); font-size:14.5px}
/* page sections */
section.page{padding-block:88px; border-top:1px solid var(--line)}
section.page:first-of-type{border-top:0}
.pagehead{display:flex; justify-content:space-between; align-items:flex-end; gap:12px; flex-wrap:wrap; margin-bottom:40px}
.pagehead .kicker{display:block; font-family:var(--display); font-weight:700; font-size:clamp(30px,4vw,46px); line-height:1.1; letter-spacing:-.01em; color:var(--brand-o); margin-bottom:12px}
.pagehead .kicker.brand{font-family:var(--brand); font-weight:400; letter-spacing:.5px}
.card h4.wm{font-family:var(--brand); font-weight:400; font-size:20px; color:var(--brand-o)}
.pagehead h2{font-size:clamp(23px,2.8vw,32px); font-weight:500; color:var(--ink)}
.slug{font-size:13px; color:var(--muted); background:var(--tint); padding:3px 10px; border-radius:999px; font-variant-numeric:tabular-nums}
.sub{color:var(--muted); font-size:18px; line-height:1.65; max-width:62ch; margin-top:14px}
.block{margin-top:56px; display:grid; gap:20px}
.block>h3{display:flex; align-items:center; gap:10px}
.block>h3 svg.i{color:var(--sun-ink); width:30px; height:30px}
.prose{max-width:68ch; display:grid; gap:12px}
.grid{display:grid; gap:20px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))} .g3{grid-template-columns:repeat(3,minmax(0,1fr))} .g4{grid-template-columns:repeat(4,minmax(0,1fr))} .g5{grid-template-columns:repeat(5,minmax(0,1fr))}
.card{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:24px; display:grid; gap:8px; align-content:start; min-width:0}
.card .ic{width:44px;height:44px;border-radius:10px;background:var(--tint);display:grid;place-items:center;color:var(--lapis)}
.card .ic svg.i{width:24px;height:24px}
.card h4{margin:0; font-size:20px; font-weight:600; font-family:var(--display)}
.card p{color:var(--muted); font-size:15.5px}
.card a.more{font-weight:600; text-decoration:none; font-size:15px; margin-top:4px}
.card.ext{border-style:dashed}
.feature{display:flex; gap:14px; align-items:flex-start}
.feature .ic{width:40px;height:40px;border-radius:50%;background:var(--sun-tint);color:var(--sun-ink);display:grid;place-items:center;flex:none}
.feature h4{margin:0 0 4px; font-size:19px; font-weight:600; font-family:var(--display)}
.feature p{color:var(--muted); font-size:15.5px}
/* tables */
.tbl{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); background:var(--surface)}
table{border-collapse:collapse; width:100%; font-size:15.5px; font-variant-numeric:tabular-nums}
th,td{padding:11px 14px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line)}
tr:last-child td{border-bottom:0}
thead th{background:var(--tint); font-weight:700; font-size:14px; letter-spacing:.3px; color:var(--ink)}
tbody th{font-weight:600; color:var(--ink); width:24%}
td .chip, .chip{display:inline-block; font-size:12.5px; font-weight:700; padding:1px 8px; border-radius:999px; background:var(--good-tint); color:var(--good); white-space:nowrap}
.chip.sun{background:var(--sun-tint); color:var(--sun-ink)}
.chip.blue{background:var(--tint); color:var(--lapis)}
.rowic{display:flex; gap:10px; align-items:center} .rowic svg.i{color:var(--lapis); width:20px; height:20px}
.note{font-size:14px; color:var(--muted)}
.todo{display:inline-block; font-size:12.5px; color:var(--todo); background:var(--todo-bg); border:1px dashed currentColor; border-radius:6px; padding:0 6px; font-weight:600; line-height:1.6}
/* steps */
.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; counter-reset:s; list-style:none; margin:0; padding:0}
.steps li{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:16px; position:relative; counter-increment:s}
.steps li::before{content:counter(s); font-family:var(--display); font-weight:600; color:var(--on-hero); background:var(--lapis); width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font-size:14px; margin-bottom:8px}
:root[data-theme="dark"] .steps li::before{color:#0C1524}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .steps li::before{color:#0C1524} }
.steps b{display:block; font-size:18px; font-family:var(--display); font-weight:600} .steps span{color:var(--muted); font-size:14.5px}
/* bands */
.band{background:var(--hero); color:var(--on-hero); border-radius:14px; padding:28px; display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap}
.band p{color:var(--on-hero-muted)}
.quote{border-left:4px solid var(--sun); padding:6px 0 6px 18px; font-size:19px; max-width:60ch}
.avatar{width:72px;height:72px;border-radius:50%;background:var(--lapis);color:var(--on-hero);display:grid;place-items:center;font-family:var(--display);font-size:24px;flex:none}
/* charts */
.chart{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:18px; overflow-x:auto}
.chart svg{display:block; width:100%; height:auto; min-width:520px}
.chart text{fill:var(--muted); font-family:var(--body); font-size:12px}
.chart .t{fill:var(--ink); font-size:15px; font-weight:600; font-family:var(--display)}
.chart .val{fill:var(--ink); font-weight:600}
.bar{fill:var(--lapis)} .bar.sun{fill:var(--sun)} .bar.good{fill:var(--good)} .bar.mut{fill:var(--line)}
.gridln{stroke:var(--line)}
/* calculator */
.calc{display:grid; grid-template-columns:minmax(0,340px) minmax(0,1fr); gap:20px; align-items:start}
.form{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:18px; display:grid; gap:12px}
.form label{display:grid; gap:4px; font-weight:600; font-size:14.5px}
.form .help{font-weight:400; color:var(--muted); font-size:13px}
input,select,textarea{font:inherit; font-size:16px; color:var(--ink); background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:9px 10px; width:100%}
.seg{display:flex; border:1px solid var(--line); border-radius:8px; overflow:hidden}
.seg button{flex:1; border:0; background:var(--bg); color:var(--muted); padding:8px; font:inherit; font-size:14.5px; font-weight:600; cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--lapis); color:var(--surface)}
.res{display:grid; gap:14px; min-width:0}
.kpis{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px}
.kpi{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:14px}
.kpi span{display:block; color:var(--muted); font-size:13.5px}
.kpi b{font-family:var(--display); font-weight:600; font-size:22px; color:var(--lapis)}
.msg{font-size:14px; color:var(--muted)}
/* faq */
.faq{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 28px}
.faq div h4{margin:0 0 4px; font-size:19px; font-weight:600; font-family:var(--display)} .faq div p{color:var(--muted); font-size:15.5px}
/* contact */
.contact{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:20px}
.kv{display:grid; gap:14px}
.kv div{display:flex; gap:12px; align-items:flex-start}
.kv svg.i{color:var(--sun-ink); margin-top:3px}
.kv small{display:block; color:var(--muted); font-size:13px}
.select-text{user-select:all}
footer{background:var(--hero); color:var(--on-hero-muted); padding-block:40px; margin-top:20px}
footer .cols{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:24px}
footer h5{color:var(--on-hero); margin:0 0 8px; font-size:15px}
footer a{color:var(--on-hero-muted); text-decoration:none; display:block; font-size:15px; line-height:1.9}
footer .disp{color:var(--brand-y); font-size:36px}
@media (max-width:900px){
  .g4,.g5{grid-template-columns:repeat(2,minmax(0,1fr))} .g3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats{grid-template-columns:repeat(2,1fr)} .stats>div:nth-child(3){border-left:0} .stats>div{border-top:1px solid var(--line)} .stats>div:nth-child(-n+2){border-top:0}
  .calc,.contact{grid-template-columns:minmax(0,1fr)} footer .cols{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .g2,.g3,.g4,.g5,.faq,.kpis{grid-template-columns:minmax(0,1fr)}
  nav.menu{order:3; flex:1 1 100%; overflow-x:auto; flex-wrap:nowrap; padding-bottom:4px}
  body{font-size:16px} section.page{padding-block:56px}
  .mark .disp{font-size:30px} .mark .logo{height:46px} header.top .btn.sun{margin-left:auto; padding:9px 14px; font-size:14px}
}
@media (prefers-reduced-motion:no-preference){ .btn{transition:transform .15s} .btn:hover{transform:translateY(-1px)} }
.avatar img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;border-radius:50%;display:block}
.avatar:has(img){background:var(--tint);overflow:hidden}
.founder-intro{display:grid;grid-template-columns:180px minmax(0,1fr);gap:24px;align-items:start}
.founder-intro .portrait{width:100%;height:auto;border-radius:14px;border:1px solid var(--line);background:#fff}
@media (max-width:560px){.founder-intro{grid-template-columns:110px minmax(0,1fr);gap:16px}}
.roles{margin:0;padding-left:18px;display:grid;gap:6px}

/* multi-page additions */
nav.menu a[aria-current="page"]{color:var(--ink); box-shadow:inset 0 -2px 0 var(--brand-o)}
.subnav{background:var(--surface); border-bottom:1px solid var(--line)}
.subnav .wrap{display:flex; gap:6px; overflow-x:auto; padding-block:10px}
.subnav a{white-space:nowrap; text-decoration:none; color:var(--muted); font-size:14.5px; font-weight:600; padding:6px 12px; border-radius:999px}
.subnav a:hover{color:var(--ink); background:var(--tint)}
.subnav a[aria-current="page"]{background:var(--lapis); color:var(--surface)}
.crumbs{font-size:14px; color:var(--muted); margin-bottom:14px}
.crumbs a{color:var(--muted)}
.explore a.card{text-decoration:none; color:inherit}
.explore a.card:hover{border-color:var(--brand-o)}
.legal{max-width:72ch; display:grid; gap:14px}
.legal h3{margin-top:12px}
.legal p,.legal li{color:var(--ink)}
/* live build: hide internal notes */
.todo{display:none!important}
.pagehead h1{font-size:clamp(23px,2.8vw,32px); font-weight:500; margin:0}
.pagehead h1.kicker{font-size:clamp(30px,4vw,46px); font-weight:700}
footer .legalline{margin-top:28px; font-size:13.5px; border-top:1px solid rgba(255,255,255,.15); padding-top:16px}

/* hero photo — full-bleed, with entrance animation */
.hero.hero-bg{background:var(--hero); isolation:isolate}
.hero.hero-bg::before{content:""; position:absolute; inset:0; z-index:-2; background:url(gallery/hero-pangong.jpg) 70% 55%/cover no-repeat; transform-origin:70% 60%}
.hero.hero-bg::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg, rgba(16,32,62,.94) 0%, rgba(16,32,62,.82) 38%, rgba(16,32,62,.35) 68%, rgba(16,32,62,.10) 100%)}
.hero.hero-bg .wrap{min-height:min(88vh,820px); align-content:center; padding-block:96px 150px}
.hero-text{display:grid; gap:24px; min-width:0; max-width:640px}
.hero-text .tagline,.hero-text .lead{text-shadow:0 1px 12px rgba(0,0,0,.35)}
.hero-credit{position:absolute; right:clamp(16px,4vw,48px); bottom:132px; margin:0; font-size:13px; color:rgba(255,255,255,.85); text-shadow:0 1px 6px rgba(0,0,0,.6)}
@media (max-width:900px){
  .hero.hero-bg::before{background-position:60% 50%}
  .hero.hero-bg::after{background:linear-gradient(180deg, rgba(16,32,62,.55) 0%, rgba(16,32,62,.80) 45%, rgba(16,32,62,.94) 100%)}
  .hero.hero-bg .wrap{min-height:auto; padding-block:72px 140px}
  .hero-credit{right:16px; bottom:118px; font-size:12px}
}
@media (prefers-reduced-motion:no-preference){
  @keyframes kb{from{transform:scale(1.14)} to{transform:scale(1)}}
  @keyframes rise{from{opacity:0; transform:translateY(22px)} to{opacity:1; transform:none}}
  @keyframes bolt{0%{opacity:0; transform:translate(-30px,-40px) rotate(-12deg) scale(.6); filter:brightness(2.2) drop-shadow(0 0 0 rgba(253,198,19,0))}
                  60%{opacity:1; transform:none; filter:brightness(1.6) drop-shadow(0 0 28px rgba(253,198,19,.9))}
                  100%{opacity:1; transform:none; filter:brightness(1) drop-shadow(0 0 0 rgba(253,198,19,0))}}
  @keyframes word{from{opacity:0; letter-spacing:.25em} to{opacity:1; letter-spacing:1px}}
  @keyframes glow{0%,100%{filter:drop-shadow(0 0 0 rgba(253,198,19,0))} 50%{filter:drop-shadow(0 0 18px rgba(253,198,19,.55))}}
  .hero.hero-bg::before{animation:kb 14s cubic-bezier(.2,.6,.2,1) both}
  .hero-bg .hero-mark{animation:word 1.1s .35s cubic-bezier(.2,.7,.2,1) both}
  .hero-bg .hero-mark .logo{animation:bolt 1.1s .1s cubic-bezier(.2,.8,.2,1) both, glow 4s 2.4s ease-in-out infinite}
  .hero-bg .tagline{animation:rise .9s 1.0s cubic-bezier(.2,.7,.2,1) both}
  .hero-bg .lead{animation:rise .9s 1.25s cubic-bezier(.2,.7,.2,1) both}
  .hero-bg .ctas{animation:rise .9s 1.5s cubic-bezier(.2,.7,.2,1) both}
  .hero-bg .hero-credit{animation:rise 1s 2s ease both}
}
/* home strip */
.strip .sfig{display:grid; gap:8px; text-decoration:none; color:var(--muted); font-size:14.5px; line-height:1.4}
.strip figure.sfig{margin:0; align-content:start}
.strip .sfig figcaption{color:var(--muted); font-size:14.5px; line-height:1.4}
.strip .sfig img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:12px; display:block; transition:transform .2s}
.strip .sfig:hover img{transform:scale(1.02)}
.btn.ghost-d{border:1px solid var(--line); color:var(--ink); background:var(--surface)}
@media (max-width:560px){ .strip{grid-template-columns:repeat(2,minmax(0,1fr))!important} }
/* gallery */
.filters{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px}
.fchip{font:inherit; font-size:14.5px; font-weight:600; padding:8px 16px; border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--muted); cursor:pointer}
.fchip[aria-pressed="true"]{background:var(--lapis); color:#fff; border-color:var(--lapis)}
.gal{columns:3 280px; column-gap:18px}
.gfig{break-inside:avoid; margin:0 0 18px; display:grid; gap:8px}
.gfig[hidden]{display:none!important}
.gbtn{padding:0; border:0; background:none; cursor:zoom-in; display:block; width:100%; border-radius:12px; overflow:hidden}
.gbtn img{display:block; width:100%; height:auto; transition:transform .25s}
.gbtn:hover img{transform:scale(1.03)}
.gbtn:focus-visible{outline:3px solid var(--brand-o); outline-offset:2px}
.gfig figcaption{font-size:14.5px; color:var(--muted); line-height:1.4}
.lb{border:0; padding:0; background:transparent; max-width:100vw; max-height:100vh; width:100vw; height:100vh; margin:0}
.lb[open]{display:flex; align-items:center; justify-content:center}
.lb::backdrop{background:rgba(6,12,24,.92)}
.lb figure{margin:0; display:grid; gap:12px; justify-items:center; max-width:min(1200px,88vw)}
.lb img{max-width:100%; max-height:80vh; width:auto; height:auto; border-radius:8px; display:block}
.lb figcaption{color:#E8EEF7; font-size:15px; text-align:center}
.lb-x,.lb-nav{position:fixed; background:rgba(255,255,255,.12); color:#fff; border:0; border-radius:999px; width:48px; height:48px; font-size:30px; line-height:1; cursor:pointer}
.lb-x{top:16px; right:16px}
.lb-prev{left:12px; top:50%; transform:translateY(-50%)}
.lb-next{right:12px; top:50%; transform:translateY(-50%)}
.lb-x:hover,.lb-nav:hover{background:rgba(255,255,255,.25)}