/* ============================================================
   KOZEN-X.COM — Unified design system
   Sans-only Inter family + JetBrains Mono accents.
   Locked palette: #13292A (teal-ink) · #FF4500 (orange) · #14B0EC (blue) · #E6D4C2 (sand)
   個性 · 前進 · 頂点  ·  KOSEI · ZENSHIN · CHOTEN
   Last revised: 9 May 2026
   ============================================================ */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  /* palette — locked */
  --teal:#13292A;
  --teal-deep:#0A1819;
  --teal-soft:#1E3E3F;
  --teal-line:rgba(230,212,194,0.14);
  --orange:#FF4500;
  --orange-soft:rgba(255,69,0,0.15);
  --blue:#14B0EC;
  --sand:#E6D4C2;
  --sand-mute:rgba(230,212,194,0.7);
  --sand-faint:rgba(230,212,194,0.45);
  --white:#FAFAF7;

  /* type — sans-only Inter family + JetBrains Mono accents */
  --font-display:'Inter Tight','Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --font-body:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --font-mono:'JetBrains Mono','SF Mono',Menlo,monospace;
  --font-jp:'Noto Sans JP','Hiragino Sans','Yu Gothic',var(--font-body);

  --maxw:1320px;
  --pad:36px;
}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--teal);
  color:var(--sand);
  font-family:var(--font-body);
  font-weight:400;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%;display:block}
::selection{background:var(--orange);color:var(--white)}

.container{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
@media(max-width:720px){.container{padding:0 22px}}

.mono{font-family:var(--font-mono);letter-spacing:.02em}
.serif,.display{font-family:var(--font-display)}
.jp{font-family:var(--font-jp)}

/* ----------------------------------------------------------------
   NAV
---------------------------------------------------------------- */
nav.top{position:sticky;top:0;z-index:50;background:rgba(19,41,42,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--teal-line)}
nav.top .inner{display:flex;align-items:center;justify-content:space-between;padding:18px 0}
/* Brand wordmark — locked: all-orange, Inter Bold, wide letter-spacing.
   Mark (Concept 18) renders via ::before so legacy markup stays clean. */
.brand{font-family:var(--font-body);font-weight:700;font-size:18px;letter-spacing:.10em;color:var(--orange);display:inline-flex;align-items:center;gap:10px;text-transform:uppercase}
.brand::before{content:"";display:inline-block;width:28px;height:28px;background:url('/assets/favicon.svg') center/contain no-repeat;flex-shrink:0}
.brand .x{color:var(--orange)} /* legacy split — both halves orange now per lock */
.navlinks{display:flex;gap:30px;font-family:var(--font-mono);font-size:12px;color:var(--sand);text-transform:lowercase;letter-spacing:.04em}
.navlinks a{opacity:.72;transition:opacity .2s,color .2s}
.navlinks a:hover{opacity:1;color:var(--orange)}
@media(max-width:720px){.navlinks{display:none}}
.navcta{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;background:var(--orange);color:var(--white);padding:9px 16px;border-radius:6px;font-weight:600;transition:background .2s}
.navcta:hover{background:#ff6c1f}

/* ----------------------------------------------------------------
   PAGE-WIDE EDITORIAL TOKENS
---------------------------------------------------------------- */
.kicker{font-family:var(--font-mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--orange);display:inline-flex;align-items:center;gap:14px}
.kicker.line::before{content:"";width:50px;height:1px;background:var(--orange)}
.eyebrow{font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--orange)}
.muted{color:var(--sand-mute)}
.faint{color:var(--sand-faint)}

/* hero — story-led */
.hero{padding:110px 0 70px;position:relative}
.hero .kicker{margin-bottom:46px}
.story{font-family:var(--font-display);font-size:clamp(30px,4.4vw,64px);font-weight:450;line-height:1.18;letter-spacing:-.022em;color:var(--sand);max-width:1180px}
.story .em{color:var(--white);font-weight:600}
.story .or{color:var(--orange);font-style:italic;font-weight:600}
.story .bl{color:var(--blue);font-style:italic;font-weight:600}
.story .strike{position:relative;color:var(--sand-mute)}
.story .strike::after{content:"";position:absolute;left:-2%;right:-2%;top:54%;height:3px;background:var(--orange);opacity:.85}
.hero .signature{margin-top:54px;display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.hero .signature .arr{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--orange);padding-bottom:2px;border-bottom:1px solid var(--orange);transition:gap .2s}
.hero .signature .arr:hover{gap:14px}

/* horizontal data strip */
.strip{padding:30px 0;background:var(--teal-deep);border-top:1px solid var(--teal-line);border-bottom:1px solid var(--teal-line);overflow:hidden;position:relative}
.strip-inner{display:flex;align-items:center;gap:64px;white-space:nowrap;animation:slide 60s linear infinite;font-family:var(--font-display);font-size:32px;font-weight:500;font-style:italic;letter-spacing:-.01em}
.strip-inner > span{display:inline-flex;align-items:center;gap:64px;color:var(--sand)}
.strip-inner b{font-style:normal;color:var(--orange);font-weight:600}
.strip-inner .dot{width:8px;height:8px;border-radius:50%;background:var(--orange);display:inline-block}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* CHAPTER row — sticky number column + lead body */
.ch{padding:130px 0;border-bottom:1px solid var(--teal-line)}
.ch-row{display:grid;grid-template-columns:380px 1fr;gap:80px;align-items:start}
@media(max-width:900px){.ch-row{grid-template-columns:1fr;gap:30px}}
.ch-row + .ch-row{margin-top:120px;padding-top:120px;border-top:1px solid var(--teal-line)}
.num-block{display:flex;flex-direction:column;gap:20px;position:sticky;top:120px;align-self:start}
.num{font-family:var(--font-display);font-style:italic;font-weight:500;font-size:160px;line-height:.8;color:var(--orange)}
.num-label{font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--sand-faint)}
.ch h2{font-family:var(--font-display);font-weight:550;font-size:clamp(34px,4.4vw,60px);letter-spacing:-.025em;line-height:1.05;color:var(--white);margin-bottom:28px}
.ch h2 em{font-style:italic;color:var(--orange);font-weight:600}
.ch h2 .bl{font-style:italic;color:var(--blue);font-weight:600}
.ch p.lead{font-size:19px;color:var(--sand);line-height:1.55;max-width:680px;margin-bottom:38px;font-weight:400}
.ch p.lead em{font-style:italic;color:var(--blue)}
.ch p.lead b{color:var(--white);font-weight:500}
.ch p.lead .or{color:var(--orange);font-style:italic;font-weight:600}
.ch .micro{display:grid;grid-template-columns:repeat(2,1fr);gap:24px 60px;max-width:680px}
@media(max-width:720px){.ch .micro{grid-template-columns:1fr}}
.ch .micro div{padding-top:18px;border-top:1px solid var(--teal-line)}
.ch .micro .k{font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--sand-faint);margin-bottom:8px}
.ch .micro .v{font-family:var(--font-display);font-size:18px;font-weight:400;color:var(--sand);line-height:1.4}
.ch .micro .v b{color:var(--orange);font-weight:500}

/* DEVICE — phone snapshot */
.device{padding:120px 0;background:var(--teal-deep);position:relative;overflow:hidden}
.device::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:1100px;height:1100px;background:radial-gradient(circle,rgba(255,69,0,.12),transparent 60%);pointer-events:none}
.device-head{margin-bottom:54px;text-align:center;position:relative;z-index:1}
.device-head .kicker{justify-content:center;margin-bottom:20px}
.device-head h2{font-family:var(--font-display);font-weight:500;font-size:clamp(36px,5vw,72px);letter-spacing:-.03em;color:var(--white)}
.device-head h2 em{font-style:italic;color:var(--orange);font-weight:600}
.device-wrap{max-width:420px;margin:0 auto;position:relative;z-index:1}
.phone{background:var(--teal);border:1px solid var(--teal-line);border-radius:36px;padding:24px;box-shadow:0 60px 120px -30px rgba(0,0,0,.5),0 0 0 1px rgba(255,69,0,.1)}
.phone-bar{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--sand-faint);margin-bottom:24px;padding:0 6px}
.phone-bar .live{color:var(--orange);display:flex;align-items:center;gap:6px}
.phone-bar .live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--orange);box-shadow:0 0 8px var(--orange);animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.4}50%{opacity:1}}
.phone-h{font-family:var(--font-display);font-style:italic;font-size:14px;color:var(--sand-mute);margin-bottom:14px;padding-left:6px}
.rec{display:flex;gap:14px;align-items:center;padding:18px 16px;background:var(--teal-soft);border-radius:14px;margin-bottom:10px;border:1px solid var(--teal-line);transition:transform .2s,border-color .2s}
.rec:hover{transform:translateX(4px);border-color:var(--orange)}
.rec.amber{border-left:3px solid var(--orange)}
.rec.blue{border-left:3px solid var(--blue)}
.rec .ico{width:42px;height:42px;border-radius:11px;background:var(--orange);color:var(--white);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:18px;flex-shrink:0}
.rec.blue .ico{background:var(--blue)}
.rec .body{flex:1;min-width:0}
.rec .ttl{font-weight:600;font-size:15px;color:var(--white);margin-bottom:3px;font-family:var(--font-display)}
.rec .sub{font-family:var(--font-mono);font-size:11px;color:var(--sand-faint);letter-spacing:.02em}
.rec .price{font-family:var(--font-mono);font-size:13px;color:var(--orange);font-weight:500;text-align:right}
.rec .price small{display:block;font-size:9px;letter-spacing:.14em;color:var(--sand-faint);text-transform:uppercase;font-weight:400;margin-top:2px}
.phone-foot{margin-top:24px;padding:14px 16px;background:var(--orange);color:var(--white);border-radius:12px;text-align:center;font-family:var(--font-display);font-weight:600;font-size:14px;cursor:pointer;transition:background .2s}
.phone-foot:hover{background:#ff6c1f}
.device-cap{margin-top:36px;text-align:center;font-family:var(--font-display);font-style:italic;font-size:14px;color:var(--sand-faint);max-width:480px;margin-left:auto;margin-right:auto}

/* INDEX list — pillars/SKUs */
.idx{padding:130px 0}
.idx-head{margin-bottom:60px;max-width:880px}
.idx-head .kicker{margin-bottom:20px}
.idx-head h2{font-family:var(--font-display);font-weight:500;font-size:clamp(36px,5vw,68px);letter-spacing:-.025em;color:var(--white);line-height:1.05}
.idx-head h2 em{font-style:italic;color:var(--orange);font-weight:600}
.idx-list{display:flex;flex-direction:column}
.idx-row{display:grid;grid-template-columns:60px 1.1fr 2fr auto;gap:36px;padding:30px 0;border-top:1px solid var(--teal-line);align-items:baseline;transition:padding .25s,color .25s}
.idx-row:last-child{border-bottom:1px solid var(--teal-line)}
.idx-row:hover{padding-left:14px}
.idx-row:hover .idx-name{color:var(--orange)}
@media(max-width:720px){.idx-row{grid-template-columns:40px 1fr;gap:14px}.idx-row > .idx-blurb,.idx-row > .idx-tag{grid-column:2}}
.idx-no{font-family:var(--font-display);font-style:italic;font-weight:500;font-size:30px;color:var(--orange)}
.idx-name{font-family:var(--font-display);font-weight:550;font-size:28px;letter-spacing:-.015em;color:var(--white);transition:color .2s}
.idx-name em{font-style:italic;color:var(--orange);font-weight:600}
.idx-blurb{font-size:15px;color:var(--sand-mute);line-height:1.55;max-width:560px}
.idx-tag{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--sand-faint);white-space:nowrap}

/* PANEL — used across company / press / contact / brand-system */
.panel{padding:32px;background:var(--teal-soft);border:1px solid var(--teal-line);border-radius:18px}
.panel h3.k{font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--sand-faint);margin-bottom:18px;font-weight:500}
.panel h2{font-family:var(--font-display);font-weight:550;font-size:clamp(28px,3.4vw,42px);letter-spacing:-.02em;color:var(--white);line-height:1.1;margin-bottom:14px}
.panel p{font-size:15px;color:var(--sand-mute);line-height:1.65;margin-bottom:14px}
.panel ul{list-style:none}
.panel li{display:flex;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--teal-line);gap:24px}
.panel li:last-child{border-bottom:0}
.panel li .l{color:var(--sand);font-weight:500;font-size:14px}
.panel li .r{font-family:var(--font-mono);color:var(--orange);font-size:13px;font-weight:500;text-align:right}

.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:32px}}

.section{padding:120px 0}
.section h2{font-family:var(--font-display);font-weight:550;font-size:clamp(36px,5vw,64px);letter-spacing:-.025em;color:var(--white);line-height:1.05;margin-bottom:24px}
.section h2 em{font-style:italic;color:var(--orange);font-weight:600}
.section .lead{font-size:19px;color:var(--sand-mute);max-width:680px;line-height:1.6;margin-bottom:42px}

/* WAITLIST — full-bleed band */
.wl{padding:140px 0;background:var(--teal-deep);position:relative;overflow:hidden;text-align:center;border-top:1px solid var(--teal-line)}
.wl::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:1200px;height:1200px;background:radial-gradient(circle,rgba(255,69,0,.1),transparent 65%);pointer-events:none}
.wl-inner{position:relative;z-index:1;max-width:780px;margin:0 auto}
.wl .kicker{justify-content:center;margin-bottom:30px}
.wl h2{font-family:var(--font-display);font-weight:500;font-size:clamp(46px,7vw,108px);letter-spacing:-.035em;line-height:.96;color:var(--white)}
.wl h2 em{font-style:italic;color:var(--orange);font-weight:600}
.wl p{margin-top:30px;font-family:var(--font-display);font-size:21px;font-weight:450;color:var(--sand);line-height:1.5;max-width:540px;margin-left:auto;margin-right:auto;font-style:italic}
.wl-form{margin-top:46px;display:flex;flex-direction:column;gap:14px;max-width:520px;margin-left:auto;margin-right:auto}
.wl-row{display:flex;gap:8px;background:var(--teal);border:1px solid var(--teal-line);border-radius:12px;padding:7px;box-shadow:0 22px 50px -16px rgba(0,0,0,.4)}
.wl-row input[type="email"]{flex:1;border:0;outline:0;padding:14px 16px;font-family:var(--font-body);font-size:14px;color:var(--sand);background:transparent}
.wl-row input::placeholder{color:var(--sand-faint)}
.wl-row button{background:var(--orange);color:var(--white);border:0;padding:14px 26px;border-radius:8px;font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;font-weight:600;cursor:pointer;text-transform:uppercase;transition:background .2s}
.wl-row button:hover{background:#ff6c1f}
.wl-row button:disabled{opacity:.5;cursor:wait}
.wl-tf{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;color:var(--sand-mute);text-transform:uppercase;align-self:center;cursor:pointer;padding:6px 10px;border-radius:6px;transition:color .2s,background .2s}
.wl-tf:hover{color:var(--orange);background:rgba(255,69,0,.06)}
.wl-tf input{accent-color:var(--orange);width:14px;height:14px}
.wl-tf .seats{color:var(--orange)}
.wl-honey{position:absolute;left:-9999px;height:1px;width:1px;opacity:0;pointer-events:none}
.wl .fine{margin-top:24px;font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;color:var(--sand-faint);text-transform:uppercase}
.wl .ok{margin-top:18px;font-family:var(--font-mono);font-size:11px;color:var(--orange);letter-spacing:.08em;min-height:18px}

/* FOOTER */
footer.foot{padding:64px 0 36px;background:var(--teal);border-top:1px solid var(--teal-line)}
.foot-top{display:flex;justify-content:space-between;align-items:start;margin-bottom:46px;gap:30px;flex-wrap:wrap}
.foot-mark{font-family:var(--font-body);font-weight:700;font-size:20px;letter-spacing:.10em;color:var(--orange);text-transform:uppercase;display:inline-flex;align-items:center;gap:12px}
.foot-mark::before{content:"";display:inline-block;width:32px;height:32px;background:url('/assets/favicon.svg') center/contain no-repeat;flex-shrink:0}
.foot-mark .x{color:var(--orange)} /* locked all-orange */
.foot-tag{font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;color:var(--sand-faint);max-width:380px;margin-top:14px;line-height:1.7}
.foot-tag b{color:var(--sand);font-weight:500}
.foot-jp{margin-top:14px;font-family:var(--font-jp);font-size:13px;color:var(--orange);letter-spacing:.12em;font-weight:500}
.foot-jp small{display:block;color:var(--sand-faint);font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;margin-top:4px}
.foot-links{display:flex;gap:42px;flex-wrap:wrap}
.foot-links div h5{font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--sand-faint);margin-bottom:14px;font-weight:500}
.foot-links div a{display:block;font-size:13px;color:var(--sand);padding:5px 0;opacity:.85}
.foot-links div a:hover{color:var(--orange);opacity:1}
.foot-bot{display:flex;justify-content:space-between;padding-top:26px;border-top:1px solid var(--teal-line);font-family:var(--font-mono);font-size:11px;color:var(--sand-faint);flex-wrap:wrap;gap:14px}
.foot-bot b{color:var(--sand);font-weight:500}

/* reveal */
.r{opacity:0;transform:translateY(24px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.r.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.r{opacity:1;transform:none;transition:none}.strip-inner,.phone-bar .live::before{animation:none}}

/* legal pages — long-form prose */
.legal-wrap{max-width:760px;padding:60px 0 80px}
.legal-wrap h2{font-family:var(--font-display);font-weight:550;font-size:clamp(34px,4.5vw,52px);letter-spacing:-.025em;color:var(--white);margin:48px 0 18px}
.legal-wrap h2:first-of-type{margin-top:0}
.legal-wrap h3{font-family:var(--font-display);font-weight:550;font-size:22px;color:var(--white);margin:32px 0 12px}
.legal-wrap p{margin-bottom:14px;color:var(--sand-mute);font-size:15px;line-height:1.7}
.legal-wrap ul{padding-left:22px;margin-bottom:18px;color:var(--sand-mute)}
.legal-wrap li{padding:4px 0}
.legal-wrap a{color:var(--orange);border-bottom:1px solid rgba(255,69,0,.4)}
.legal-wrap em{font-style:italic;color:var(--sand-faint)}
.legal-wrap strong{color:var(--white);font-weight:600}
.legal-pillchip{display:inline-flex;gap:10px;margin:24px 0 12px}
.legal-pillchip a{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:8px 14px;border:1px solid var(--teal-line);border-radius:999px;color:var(--sand-mute)!important;border-bottom:1px solid var(--teal-line);transition:color .2s,border-color .2s}
.legal-pillchip a:hover{color:var(--orange)!important;border-color:var(--orange)}

/* simple grid for brand-system page */
.brand-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin-top:32px}
.brand-card{background:var(--teal-soft);border:1px solid var(--teal-line);border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:14px}
.brand-card .frame{aspect-ratio:1.6/1;background:var(--teal-deep);border-radius:12px;display:flex;align-items:center;justify-content:center;padding:18px;border:1px solid var(--teal-line);overflow:hidden}
.brand-card .frame.light{background:#FAFAF7}
.brand-card .frame img{max-width:100%;max-height:100%;object-fit:contain}
.brand-card h4{font-family:var(--font-display);font-weight:550;font-size:16px;color:var(--white)}
.brand-card .meta{font-family:var(--font-mono);font-size:11px;color:var(--sand-faint);letter-spacing:.06em}
.brand-card a.dl{display:inline-flex;gap:8px;font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--orange);align-self:flex-start;border-bottom:1px solid var(--orange);padding-bottom:2px}
.swatch-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-top:18px}
.swatch{padding:18px;border-radius:14px;border:1px solid var(--teal-line);font-family:var(--font-mono);font-size:11px;letter-spacing:.06em}
.swatch .name{color:var(--white);font-size:13px;text-transform:uppercase;letter-spacing:.14em;margin-bottom:6px;display:block}
.swatch .hex{color:var(--sand-mute)}