/* =========================================================
   KIMCHI CITY — $KICITY
   Desktop-first title-screen layout. Palette per ASSETS.md.1
   ========================================================= */

:root{
  --plum:#100716;
  --cream:#FFF0D8;
  --pink:#FF25B8;
  --cyan:#32D5FF;
  --orange:#FF8738;
  --purple:#25112E;
  --gold:#DDB36B;
  --ink:rgba(255,240,216,.64);
  --panel:rgba(18,8,25,.86);
  --edge:rgba(255,37,184,.28);
  --cut:14px;                       /* angled corner, from the neon mark */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0;
  min-width:1180px;
  background:var(--plum);
  color:var(--cream);
  font:400 16px/1.6 Inter,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}

img{display:block;max-width:100%}
code{font-family:Inter,monospace}

/* the city strip that stays behind every view */
.scene-strip{
  position:fixed; inset:0; z-index:0;
  background:url(assets/hero-thumb.jpg) center/cover no-repeat;
  filter:blur(26px) saturate(1.3);
  opacity:.5;
}
.scene-strip::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(90% 70% at 50% 0%,rgba(255,37,184,.18),transparent 70%),
    linear-gradient(180deg,rgba(16,7,22,.72),rgba(16,7,22,.97));
}

/* ---------- shared type ---------- */
.kicker{
  margin:0 0 10px;
  font:600 13px/1 Inter,sans-serif;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--pink);
}
.h-mid{
  margin:0 0 20px;
  font:800 clamp(34px,3.4vw,52px)/.94 'Barlow Condensed',sans-serif;
  letter-spacing:.012em; text-transform:uppercase;
  color:var(--cream);
}

/* ---------- top bar ---------- */
.topbar{
  position:relative; z-index:5;
  display:flex; align-items:center; gap:14px;
  padding:14px 34px;
  background:rgba(10,4,15,.78);
  border-bottom:1px solid var(--edge);
  backdrop-filter:blur(10px);
}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--cream)}
.brand img{width:30px; height:30px; border-radius:5px; border:1px solid var(--edge)}
.brand span{font:800 21px/1 'Barlow Condensed',sans-serif; letter-spacing:.07em}
.brand-tag{
  padding:4px 10px; border-radius:3px;
  background:var(--pink); color:#fff;
  font:700 12px/1 Inter,sans-serif; letter-spacing:.1em;
}
.topbar-acts{margin-left:auto; display:flex; gap:8px}
.tb-link{
  padding:8px 14px; text-decoration:none;
  border:1px solid var(--edge); border-radius:3px;
  color:var(--cream);
  font:600 12px/1 Inter,sans-serif; letter-spacing:.12em;
  transition:background .15s,border-color .15s;
}
.tb-link:hover{background:rgba(255,37,184,.16); border-color:var(--pink)}

/* ---------- shell ---------- */
.shell{
  position:relative; z-index:2;
  display:grid; grid-template-columns:330px minmax(0,1fr);
  gap:34px;
  max-width:1680px; margin:0 auto; padding:34px;
  align-items:start;
}

/* ---------- title + menu ---------- */
.menu{position:sticky; top:28px}
.title{margin:0; display:flex; flex-direction:column}
.t-line{
  font:800 clamp(62px,6.6vw,104px)/.82 'Barlow Condensed',sans-serif;
  letter-spacing:.005em; text-transform:uppercase;
  color:var(--cream);
  -webkit-text-stroke:2px #15081c;
  text-shadow:4px 5px 0 var(--pink);
  animation:settle .5s cubic-bezier(.2,.8,.3,1) both;
}
.t-line:nth-child(2){animation-delay:.07s}
@keyframes settle{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none}}

.ticker{
  display:inline-block; margin:12px 0 0; padding:5px 13px;
  background:var(--pink); color:#fff; border-radius:3px;
  font:700 17px/1 Inter,sans-serif; letter-spacing:.1em;
  box-shadow:0 0 22px rgba(255,37,184,.5);
}
.tagline{
  margin:16px 0 26px; max-width:290px;
  color:var(--ink); font-size:15px; font-style:italic;
}

.mi-list{display:flex; flex-direction:column; gap:3px}
.mi{
  position:relative;
  display:block; padding:12px 16px 12px 22px;
  text-decoration:none; color:var(--cream);
  font:800 25px/1 'Barlow Condensed',sans-serif;
  letter-spacing:.055em; text-transform:uppercase;
  background:rgba(37,17,46,.5);
  border:1px solid transparent;
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)));
  transition:transform .16s,background .16s,color .16s;
}
.mi::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:5px;
  background:var(--pink); transform:scaleY(0); transform-origin:50% 50%;
  transition:transform .16s;
}
.mi:hover{background:rgba(255,37,184,.14); transform:translateX(5px)}
.mi:hover::before{transform:scaleY(1)}
.mi.on{background:var(--pink); color:#fff; transform:translateX(9px)}
.mi.on::before{transform:scaleY(1); background:var(--cream)}
.mi:focus-visible{outline:none; border-color:var(--cyan); transform:translateX(9px)}

/* ---------- panel / views ---------- */
.panel{
  min-width:0;
  background:var(--panel);
  border:1px solid var(--edge);
  border-radius:4px;
  padding:26px;
  box-shadow:0 30px 70px rgba(0,0,0,.55);
}
.view{animation:slidein .22s ease both}
@keyframes slidein{from{opacity:0; transform:translateX(14px)} to{opacity:1; transform:none}}

/* ---------- landing stage ---------- */
.stage{position:relative; border-radius:3px; overflow:hidden; background:#0b0410}
.stage-img{width:100%; height:auto; transition:filter .3s}
.stage-grad{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg,rgba(10,3,16,.62) 0%,rgba(10,3,16,.2) 34%,transparent 54%);
}

/* cargo hotspot — a real labelled button, placed near the jars */
.hotspot{
  position:absolute; left:41.5%; bottom:7%;
  display:flex; align-items:center; gap:8px;
  padding:9px 14px; cursor:pointer;
  background:rgba(10,3,16,.84); color:var(--cream);
  border:1px solid var(--pink); border-radius:3px;
  font:700 12px/1 Inter,sans-serif; letter-spacing:.11em;
  box-shadow:0 0 20px rgba(255,37,184,.35);
  transition:background .15s,transform .15s;
}
.hotspot:hover,.hotspot:focus-visible{background:var(--pink); color:#fff; transform:translateY(-2px); outline:none}
.hs-dot{width:8px; height:8px; border-radius:50%; background:var(--pink); box-shadow:0 0 10px var(--pink)}
.hotspot:hover .hs-dot{background:#fff; box-shadow:0 0 10px #fff}

/* screenshot frame */
.frame-deco{position:absolute; inset:0; pointer-events:none; border:9px solid rgba(255,240,216,.9); border-radius:3px}
.frame-deco::after{content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 2px var(--pink)}
.fd-brand,.fd-cap{
  position:absolute; padding:5px 11px; background:rgba(10,3,16,.9);
  font:700 12px/1 Inter,sans-serif; letter-spacing:.12em; color:var(--cream);
}
.fd-brand{top:12px; left:12px; color:var(--pink)}
.fd-cap{bottom:12px; right:12px; font-weight:500; letter-spacing:.04em; font-style:italic}

/* ---------- action rail ---------- */
.rail{
  position:relative; overflow:hidden;
  display:flex; gap:11px; align-items:center;
  margin-top:-1px; padding:15px 18px;
  background:rgba(10,3,16,.82);
  border:1px solid var(--edge);
}
.rail-flat{margin-top:22px; border-radius:3px}
.rail-sweep{
  position:absolute; top:0; bottom:0; width:120px;
  background:linear-gradient(100deg,transparent,rgba(255,240,216,.16),transparent);
  animation:sweep 1s .25s ease-out both;
}
@keyframes sweep{from{left:-140px} to{left:105%}}

.btn{
  display:inline-block; padding:13px 24px; cursor:pointer;
  text-decoration:none; text-align:center;
  font:700 14px/1 Inter,sans-serif; letter-spacing:.11em;
  border-radius:3px; border:1px solid transparent;
  transition:transform .14s,background .14s,box-shadow .14s;
}
.btn-sm{padding:10px 17px; font-size:12px}
.btn-pink{background:var(--pink); color:#fff; box-shadow:0 5px 0 #a3146f}
.btn-pink:hover{transform:translateY(2px); box-shadow:0 3px 0 #a3146f}
.btn-ghost{background:transparent; color:var(--cream); border-color:var(--edge)}
.btn-ghost:hover{background:rgba(255,37,184,.16); border-color:var(--pink)}
.btn:focus-visible{outline:2px solid var(--cyan); outline-offset:2px}

/* ---------- CA strip ---------- */
.castrip{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin-top:12px; padding:13px 16px;
  background:rgba(37,17,46,.68);
  border:1px solid rgba(221,179,107,.3); border-radius:3px;
}
.ca-tag{font:700 11px/1 Inter,sans-serif; letter-spacing:.16em; color:var(--gold)}
.ca-val{
  flex:1; min-width:0; overflow-wrap:anywhere;
  font-size:14px; color:var(--cream);
}
.ca-val.tba{color:var(--ink); font-style:italic}
.ca-copy{
  padding:9px 15px; cursor:pointer;
  background:var(--cream); color:#15081c; border:none; border-radius:3px;
  font:700 12px/1 Inter,sans-serif; letter-spacing:.1em;
  transition:background .14s;
}
.ca-copy:hover{background:var(--pink); color:#fff}
.ca-copy:focus-visible{outline:2px solid var(--cyan); outline-offset:2px}

/* ---------- car interaction ---------- */
.carbox{
  display:grid; grid-template-columns:1.15fr 1fr; gap:26px; align-items:center;
  margin-top:26px; padding:22px;
  background:rgba(37,17,46,.5); border:1px solid var(--edge); border-radius:3px;
}
.car{position:relative; margin:0; border-radius:3px; overflow:hidden}
.car img{width:100%}
/* glow pinned to the car's visible rear lights + pavement reflection */
.car-l,.car-refl{position:absolute; opacity:0; pointer-events:none; transition:opacity .3s}
.car-l1{left:44%; top:47%; width:22%; height:10%;
  background:radial-gradient(ellipse at center,rgba(255,37,184,.95),rgba(255,37,184,0) 70%)}
.car-l2{left:70%; top:47%; width:18%; height:10%;
  background:radial-gradient(ellipse at center,rgba(255,135,56,.85),rgba(255,37,184,0) 70%)}
.car-refl{left:38%; top:68%; width:52%; height:26%;
  background:radial-gradient(ellipse at center,rgba(255,37,184,.55),rgba(255,37,184,0) 72%);
  filter:blur(6px)}
.car.lit .car-l,.car.lit .car-refl{opacity:1}
.car-cap{margin:0 0 18px; color:var(--ink); font-style:italic}
.car-ctl{display:flex; gap:10px}

/* ---------- the duo ---------- */
.spread{position:relative; display:grid; grid-template-columns:1fr 1.2fr; gap:0; align-items:start}
.poster{position:relative; margin:0; background:#0b0410; border-radius:3px; overflow:hidden}
.poster img{width:100%; height:560px; object-fit:cover; object-position:top center}
.poster figcaption{position:relative; z-index:2; padding:18px 20px 22px;
  background:linear-gradient(180deg,rgba(11,4,16,.86),rgba(11,4,16,.97))}
.poster p{margin:0; color:var(--ink); font-size:15px}
.h-poster{
  margin:0 0 9px;
  font:800 clamp(24px,2.1vw,32px)/1 'Barlow Condensed',sans-serif;
  letter-spacing:.02em; text-transform:uppercase; color:var(--cream);
}
.p-woman{z-index:2; margin-top:34px; border:2px solid var(--pink); box-shadow:0 0 36px rgba(255,37,184,.3)}
.p-man{z-index:1; margin-left:-26px; border:1px solid var(--edge)}
.p-man figcaption{padding-left:46px}
.p-man img{height:620px}
.p-man .h-poster{color:var(--orange)}

.about{
  max-width:860px; margin:28px 0 22px;
  font-size:17px; color:var(--cream);
}
.duo-wide{width:100%; border-radius:3px; border:1px solid var(--edge)}

/* ---------- plan interaction ---------- */
.plan{margin-top:30px; padding:22px; background:rgba(37,17,46,.5); border:1px solid var(--edge); border-radius:3px}
.plan-row{display:grid; grid-template-columns:230px minmax(0,1fr); gap:22px; align-items:start}
.plan-opts{display:flex; flex-direction:column; gap:7px}
.po{
  position:relative; padding:12px 15px; cursor:pointer; text-align:left;
  background:rgba(10,3,16,.6); color:var(--cream);
  border:1px solid var(--edge); border-radius:3px;
  font:600 15px/1 Inter,sans-serif;
  transition:background .14s,transform .14s;
}
.po:hover{background:rgba(255,37,184,.14); transform:translateX(3px)}
.po[aria-selected="true"]{background:var(--pink); color:#fff; border-color:var(--pink)}
.po[aria-selected="true"]::after{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--cream);
}
.po-all{margin-top:8px; border-style:dashed; font-size:13px; letter-spacing:.08em}
.po:focus-visible{outline:2px solid var(--cyan); outline-offset:2px}

.plan-pane{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:18px; align-items:start}
.plan-img{width:100%; min-width:0; display:block; border-radius:3px; border:1px solid var(--edge); transition:opacity .22s}
.plan-img.fade{opacity:0}
.chat{display:flex; flex-direction:column; gap:9px}
.chat p{
  margin:0; padding:11px 14px; border-radius:11px; max-width:94%;
  font-size:15px; animation:pop .22s ease both;
}
.chat .her{align-self:flex-start; background:rgba(255,37,184,.2); border:1px solid var(--edge)}
.chat .him{align-self:flex-end; background:rgba(50,213,255,.14); border:1px solid rgba(50,213,255,.3)}
.chat b{display:block; font-size:11px; letter-spacing:.14em; color:var(--gold); margin-bottom:3px}
.chat .block{margin-bottom:6px; padding-bottom:10px; border-bottom:1px dashed var(--edge); max-width:100%}
.chat .block h4{margin:0 0 7px; font:700 12px/1 Inter,sans-serif; letter-spacing:.13em; color:var(--pink)}
@keyframes pop{from{opacity:0; transform:translateY(7px)} to{opacity:1; transform:none}}

/* ---------- the stash ---------- */
.gal{display:grid; grid-template-columns:48px minmax(0,1fr) 48px; gap:14px; align-items:center}
.gal-nav{
  height:88px; cursor:pointer;
  background:rgba(10,3,16,.7); color:var(--cream);
  border:1px solid var(--edge); border-radius:3px;
  font-size:28px; line-height:1;
  transition:background .14s;
}
.gal-nav:hover{background:var(--pink); color:#fff}
.gal-nav:focus-visible{outline:2px solid var(--cyan); outline-offset:2px}
.gal-main{position:relative; margin:0; background:#000; border:3px solid #000; border-radius:3px; overflow:hidden}
.gal-main img{width:100%; height:560px; object-fit:cover; transition:opacity .2s}
.gal-main img.fade{opacity:.25}
.gal-main figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:30px 22px 18px;
  background:linear-gradient(transparent,rgba(10,3,16,.94));
  font:800 clamp(20px,1.9vw,29px)/1.1 'Barlow Condensed',sans-serif;
  letter-spacing:.02em; text-transform:uppercase;
}
.gal-open{
  position:absolute; top:14px; right:14px; cursor:pointer;
  padding:9px 14px; background:rgba(10,3,16,.85); color:var(--cream);
  border:1px solid var(--pink); border-radius:3px;
  font:700 11px/1 Inter,sans-serif; letter-spacing:.11em;
}
.gal-open:hover{background:var(--pink); color:#fff}

.gal-strip{display:grid; grid-template-columns:repeat(4,1fr); gap:11px; margin-top:14px}
.gt{position:relative; padding:0; cursor:pointer; background:none; border:2px solid transparent; border-radius:3px; overflow:hidden}
.gt img{width:100%; height:112px; object-fit:cover; opacity:.55; transition:opacity .14s}
.gt:hover img{opacity:1}
.gt.on{border-color:var(--pink)}
.gt.on img{opacity:1}
.gt:focus-visible{outline:2px solid var(--cyan); outline-offset:2px}

/* ---------- how to buy ---------- */
.steps{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px}
.steps li{
  display:flex; gap:20px; align-items:flex-start;
  padding:20px 22px;
  background:rgba(37,17,46,.56); border:1px solid var(--edge); border-radius:3px;
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)));
}
.sn{
  flex:none; width:50px;
  font:800 46px/.8 'Barlow Condensed',sans-serif; color:var(--pink);
}
.steps h3{margin:0 0 5px; font:700 19px/1.2 Inter,sans-serif; color:var(--cream)}
.steps p{margin:0; color:var(--ink); font-size:15px}

/* ---------- chart ---------- */
.chart-box{
  min-height:600px; border-radius:3px; overflow:hidden;
  background:rgba(10,3,16,.64); border:1px solid var(--edge);
}
.chart-box iframe{width:100%; height:600px; border:0; display:block}
.chart-note{display:grid; place-items:center; min-height:600px; padding:40px; text-align:center; color:var(--ink)}
.chart-note b{display:block; margin-bottom:8px; color:var(--cream); font-size:19px}

/* ---------- closing ---------- */
.closing{position:relative; z-index:2; margin-top:46px; border-top:1px solid var(--edge); overflow:hidden}
.close-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 38%; opacity:.4;
}
.close-in{
  position:relative;
  max-width:1680px; margin:0 auto; padding:80px 34px;
  background:linear-gradient(90deg,rgba(10,3,16,.93) 38%,rgba(10,3,16,.42));
}
.close-h{
  margin:0 0 14px; max-width:900px;
  font:800 clamp(40px,4.4vw,70px)/.94 'Barlow Condensed',sans-serif;
  letter-spacing:.012em; text-transform:uppercase; color:var(--cream);
  text-shadow:3px 4px 0 var(--pink);
}
.close-brand{margin:0 0 22px; font:700 17px/1 Inter,sans-serif; letter-spacing:.17em; color:var(--gold)}
.close-chat{margin:0 0 22px; max-width:440px}
.close-chat p{margin:0 0 7px; padding:10px 14px; border-radius:11px; font-size:15px}
.cl-her{background:rgba(255,37,184,.2); border:1px solid var(--edge)}
.cl-him{background:rgba(50,213,255,.14); border:1px solid rgba(50,213,255,.3)}
.close-chat b{color:var(--gold); font-size:12px; letter-spacing:.1em}
.close-in .rail-flat,.close-in .castrip{max-width:760px}

/* ---------- modals ---------- */
.modal{
  position:fixed; inset:0; z-index:40;
  display:grid; place-items:center; padding:34px;
  background:rgba(6,2,10,.9); backdrop-filter:blur(6px);
}
.modal[hidden]{display:none}
.modal-in{
  position:relative; max-width:1060px; width:100%; max-height:90vh; overflow:auto;
  background:var(--purple); border:1px solid var(--pink); border-radius:4px;
  box-shadow:0 0 70px rgba(255,37,184,.3);
  animation:slidein .22s ease both;
}
.modal-x{
  position:absolute; top:11px; right:11px; z-index:3;
  width:38px; height:38px; cursor:pointer;
  background:rgba(10,3,16,.8); color:var(--cream);
  border:1px solid var(--edge); border-radius:3px; font-size:22px; line-height:1;
}
.modal-x:hover{background:var(--pink); color:#fff}

.cargo-in{display:grid; grid-template-columns:1fr 1.05fr; gap:0}
.cargo-shot{position:relative; margin:0; overflow:hidden; background:#000}
.cargo-shot img{width:100%; height:100%; object-fit:cover}
.strap{
  position:absolute; left:-62%; top:44%; width:200%; height:36px;
  background:linear-gradient(180deg,#f0d49a,var(--gold) 45%,#8a6a33);
  box-shadow:0 5px 16px rgba(0,0,0,.6);
  transform:rotate(-19deg) translateX(-130%);
  transition:transform .5s cubic-bezier(.2,.8,.3,1);
}
.strap.on{transform:rotate(-19deg) translateX(0)}
.stamp{
  position:absolute; left:50%; top:50%;
  padding:11px 20px;
  transform:translate(-50%,-50%) rotate(-11deg);
  border:4px solid var(--pink); border-radius:4px;
  color:var(--pink); background:rgba(10,3,16,.72);
  font:800 25px/1 'Barlow Condensed',sans-serif; letter-spacing:.06em;
  animation:stampin .3s cubic-bezier(.2,1.4,.4,1) both;
}
@keyframes stampin{from{opacity:0; transform:translate(-50%,-50%) rotate(-11deg) scale(1.9)}
                   to{opacity:1; transform:translate(-50%,-50%) rotate(-11deg) scale(1)}}
.cargo-side{padding:34px}
.cargo-dl{margin:0 0 24px}
.cargo-dl > div{
  display:flex; justify-content:space-between; gap:16px;
  padding:11px 0; border-bottom:1px dashed var(--edge);
}
.cargo-dl dt{font:700 12px/1.4 Inter,sans-serif; letter-spacing:.15em; color:var(--gold)}
.cargo-dl dd{margin:0; font-size:16px; color:var(--cream)}
.cargo-say{margin:16px 0 0; font-size:19px; font-style:italic; color:var(--cream)}
.cargo-say span{font-size:13px; font-style:normal; color:var(--ink)}
.cargo-fine{margin:20px 0 0; font-size:12px; color:var(--ink)}

.lb-in{padding:16px; text-align:center}
.lb-in img{width:100%; border-radius:3px}
.lb-cap{
  margin:14px 0;
  font:800 25px/1 'Barlow Condensed',sans-serif;
  letter-spacing:.02em; text-transform:uppercase;
}

/* ---------- toast ---------- */
.toast{
  position:fixed; left:50%; bottom:34px; z-index:60;
  transform:translate(-50%,24px);
  padding:13px 24px; border-radius:3px;
  background:var(--pink); color:#fff;
  font:700 13px/1 Inter,sans-serif; letter-spacing:.1em;
  opacity:0; pointer-events:none; transition:opacity .2s,transform .2s;
}
.toast.on{opacity:1; transform:translate(-50%,0)}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important; transition-duration:.001s!important}
  html{scroll-behavior:auto}
}