:root{
    --blue:#1546FF; --blue-deep:#0B2BB0; --neon:#D9FF3F;
    --ink:#0E1430; --muted:#5B6385; --line:#E3E7F5; --bg:#FFFFFF; --soft:#F3F6FF;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  body{font-family:Pretendard,-apple-system,sans-serif;background:var(--bg);color:var(--ink);line-height:1.5;-webkit-font-smoothing:antialiased}
  a{color:inherit;text-decoration:none}
  .wrap{max-width:1080px;margin:0 auto;padding:0 20px}

  /* NAV */
  nav{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
  nav .wrap{display:flex;align-items:center;justify-content:space-between;height:60px}
  .logo{font-weight:800;font-size:18px;letter-spacing:-.02em}
  .logo span{background:var(--neon);padding:0 6px;border-radius:4px}
  .menu{display:flex;gap:22px;font-size:14px;font-weight:600;color:var(--muted)}
  .menu a:hover{color:var(--blue)}
  .lang{display:flex;border:1.5px solid var(--ink);border-radius:999px;overflow:hidden}
  .lang a{padding:6px 12px;font-weight:700;font-size:12px;color:var(--ink)}
  .lang a.on{background:var(--ink);color:#fff}

  /* HERO */
  .hero{background:var(--blue);color:#fff;padding:72px 0 64px;overflow:hidden;position:relative}
  .hero .wrap{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:center}
  .eyebrow{font-size:12px;font-weight:700;letter-spacing:.2em;color:var(--neon)}
  .hero h1{font-size:clamp(40px,7vw,76px);font-weight:900;line-height:1.05;letter-spacing:-.04em;margin:14px 0 18px}
  .hero h1 em{font-style:normal;color:var(--neon)}
  .hero p{font-size:17px;opacity:.88;max-width:440px}
  .hero-cta{display:flex;gap:10px;margin-top:28px;flex-wrap:wrap}
  .btn{display:inline-flex;align-items:center;gap:8px;padding:13px 20px;border-radius:999px;font-weight:700;font-size:15px}
  .btn.neon{background:var(--neon);color:var(--ink)}
  .btn.ghost{border:1.5px solid rgba(255,255,255,.6)}
  .photo{aspect-ratio:4/5;border-radius:28px;background:linear-gradient(160deg,#3D6BFF,var(--blue-deep));border:2px solid rgba(255,255,255,.25);display:grid;place-items:center;color:rgba(255,255,255,.6);font-size:14px;position:relative}
  .photo img{width:100%;height:100%;object-fit:cover;border-radius:26px}
  .badge{position:absolute;bottom:-14px;left:-14px;background:var(--neon);color:var(--ink);font-weight:800;padding:12px 16px;border-radius:16px;font-size:14px;transform:rotate(-4deg)}

  /* SECTIONS */
  section{padding:80px 0}
  .head{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-bottom:32px}
  .head .eyebrow{color:var(--blue)}
  .head h2{font-size:clamp(28px,4vw,40px);font-weight:800;letter-spacing:-.03em;margin-top:6px}
  .head p{color:var(--muted);font-size:15px;max-width:560px}

  /* CHANNELS */
  .channels{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
  .ch{border:1.5px solid var(--line);border-radius:20px;padding:22px;transition:.2s;display:flex;flex-direction:column;gap:30px}
  .ch:hover{border-color:var(--blue);transform:translateY(-3px)}
  .ch.main{background:var(--ink);color:#fff;border-color:var(--ink)}
  .ch .top{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:700;color:var(--muted)}
  .ch.main .top{color:var(--neon)}
  .ch b{font-size:19px;letter-spacing:-.02em}
  .arrow{width:30px;height:30px;border-radius:50%;background:var(--soft);display:grid;place-items:center;color:var(--blue);font-size:14px}
  .ch.main .arrow{background:var(--neon);color:var(--ink)}

  /* VIDEOS */
  #videos{background:var(--soft)}
  .tabs{display:flex;gap:8px;margin-bottom:22px;flex-wrap:wrap}
  .tab{border:1.5px solid var(--line);background:#fff;padding:9px 16px;border-radius:999px;font:700 14px Pretendard,sans-serif;cursor:pointer;color:var(--muted)}
  .tab.on{background:var(--blue);border-color:var(--blue);color:#fff}
  .tab .soon{font-size:10px;background:var(--neon);color:var(--ink);padding:2px 6px;border-radius:6px;margin-left:4px}
  .vid-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
  .vid{position:relative;aspect-ratio:9/16;border-radius:20px;overflow:hidden;background:linear-gradient(170deg,#C9D5FF,#8FA6FF);display:block;transition:.2s}
  .vid:hover{transform:translateY(-4px)}
  .vid img{width:100%;height:100%;object-fit:cover}
  .vid .ph{position:absolute;inset:0;display:grid;place-items:center;color:rgba(14,20,48,.45);font-size:13px}
  .vid .views{position:absolute;top:12px;left:12px;background:var(--neon);color:var(--ink);font-size:12px;font-weight:800;padding:5px 9px;border-radius:8px}
  .vid .info{position:absolute;left:0;right:0;bottom:0;padding:40px 14px 14px;background:linear-gradient(transparent,rgba(14,20,48,.85));color:#fff}
  .vid h3{font-size:15px;line-height:1.35;letter-spacing:-.02em}
  .vid .place{font-size:12px;opacity:.8;margin-top:4px}
  .vid .map{cursor:pointer;display:inline-block;margin-top:8px;font-size:11px;font-weight:700;padding:5px 9px;border-radius:999px;background:rgba(255,255,255,.18)}
  .vid[hidden],.empty[hidden]{display:none}
  .empty{background:#fff;border-radius:18px;padding:40px;text-align:center;color:var(--muted);grid-column:1/-1}

  /* ITEMS */
  .item-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
#items{background:var(--soft)}
.item{border-radius:22px;background:#fff;border:1.5px solid transparent;overflow:hidden;display:flex;flex-direction:column;transition:.25s;box-shadow:0 6px 20px rgba(21,70,255,.06)}
.item:hover{border-color:var(--blue);transform:translateY(-3px)}
  .item .img{aspect-ratio:1/1;background:linear-gradient(160deg,#EEF2FF,#DCE4FF);display:grid;place-items:center;color:var(--muted);font-size:13px;position:relative}
  .item .img img{width:100%;height:100%;object-fit:cover}
  .item .cat{position:absolute;top:12px;left:12px;background:var(--neon);color:var(--ink);font-size:11px;font-weight:800;padding:5px 10px 5px 18px;border-radius:4px 10px 10px 4px}
.item .cat::before{content:"";position:absolute;left:6px;top:50%;width:6px;height:6px;border-radius:50%;background:var(--soft);transform:translateY(-50%)}
  .item .body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
  .item h3{font-size:16px;letter-spacing:-.02em}
  .item p{font-size:13px;color:var(--muted);flex:1}
  .item .buy{margin-top:8px;font-weight:800;font-size:13px;color:var(--blue)}
.item:hover .buy{text-decoration:underline}
  .disclose{font-size:12px;color:var(--muted);margin-top:14px}

  /* GUIDES */
  .guides{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  .guide{border-radius:20px;overflow:hidden;border:1.5px solid var(--line);transition:.2s}
  .guide:hover{border-color:var(--blue)}
  .thumb{aspect-ratio:16/10;background:var(--soft);display:grid;place-items:center;color:var(--muted);font-size:13px}
  .thumb img{width:100%;height:100%;object-fit:cover}
  .guide div.t{padding:16px 18px 20px}
  .tag{font-size:11px;font-weight:800;color:var(--blue);letter-spacing:.08em}
  .guide h3{font-size:17px;margin-top:6px;letter-spacing:-.02em}

  /* CONTACT */
  .contact{background:var(--blue);color:#fff;border-radius:28px;padding:48px;display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center}
  .contact h2{font-size:clamp(26px,4vw,38px);font-weight:800;letter-spacing:-.03em}
  .contact h2 em{font-style:normal;color:var(--neon)}
  .contact p{opacity:.7;margin-top:10px}

  footer{padding:50px 0 40px;border-top:1px solid var(--line);margin-top:80px}
  footer .wrap{display:grid;grid-template-columns:200px 1fr;gap:30px}
  footer .eyebrow{color:var(--blue)}
  footer p{color:var(--muted);font-size:14px}
  .copy{margin-top:30px;font-size:12px;color:var(--muted)}

  @media(max-width:760px){
    .menu{display:none}
    .hero{padding:48px 0}
    .hero .wrap{grid-template-columns:1fr}
    .photo{max-width:300px}
    section{padding:56px 0}
    .guides{grid-template-columns:1fr}
    .item-row{grid-template-columns:1fr 1fr;gap:10px}
    .item .body{padding:12px 14px 14px}
    .item h3{font-size:14px}
    .channels{grid-template-columns:1fr 1fr}
    .vid-grid{grid-template-columns:repeat(2,1fr);gap:10px}
    .vid h3{font-size:13px}
    .contact{grid-template-columns:1fr;padding:32px 24px}
    footer .wrap{grid-template-columns:1fr}
  }

/* ───────── SENSORY TRAVEL LAYER ───────── */
.hero{padding:80px 0 110px}
.hero::before{content:"";position:absolute;inset:auto -10% -40% auto;width:60vw;height:60vw;border-radius:50%;background:radial-gradient(circle,rgba(217,255,63,.18),transparent 60%);pointer-events:none}

/* collage */
.collage{position:relative;aspect-ratio:1/1;width:100%;max-width:480px;justify-self:end}
.flight{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.flight path{fill:none;stroke:rgba(255,255,255,.55);stroke-width:2;stroke-dasharray:2 10;stroke-linecap:round;animation:dash 6s linear infinite}
@keyframes dash{to{stroke-dashoffset:-120}}
.plane{position:absolute;right:-6px;top:-14px;font-size:30px;color:var(--neon);transform:rotate(-20deg);animation:bob 3s ease-in-out infinite}
.tile{position:absolute;margin:0;border-radius:18px;overflow:hidden;background:#fff;padding:7px 7px 34px;box-shadow:0 20px 40px rgba(5,15,80,.35);transform:rotate(var(--r));animation:float 6s ease-in-out infinite;animation-delay:var(--dl);transition:transform .35s}
.tile:hover{transform:rotate(0) scale(1.04);z-index:5}
.tile img,.tile-ph{display:block;width:100%;height:100%;object-fit:cover;border-radius:12px}
.tile-ph{background:linear-gradient(150deg,#7FA0FF,#1546FF 60%,#0B2BB0)}
.t2 .tile-ph{background:linear-gradient(160deg,#D9FF3F,#7BD3A8 70%)}
.t3 .tile-ph{background:linear-gradient(140deg,#FFB38A,#FF6F91 50%,#6C5CE7)}
.t4 .tile-ph{background:linear-gradient(170deg,#BEE3FF,#5AA9FF)}
.tile figcaption{position:absolute;left:12px;right:12px;bottom:8px;font-size:12px;font-weight:700;color:var(--ink);display:flex;gap:8px;align-items:center}
.tile figcaption b{background:var(--ink);color:var(--neon);padding:2px 7px;border-radius:6px;font-size:11px;letter-spacing:.05em}
.t1{left:2%;top:8%;width:44%;height:50%;--r:-7deg;--dl:0s}
.t2{left:54%;top:4%;width:36%;height:38%;--r:6deg;--dl:-1.5s}
.t3{left:44%;top:44%;width:50%;height:52%;--r:-3deg;--dl:-3s}
.t4{left:4%;top:62%;width:36%;height:34%;--r:5deg;--dl:-4.5s}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -10px}}
@keyframes bob{0%,100%{translate:0 0}50%{translate:4px -6px}}
.stamp{position:absolute;left:25%;top:30%;width:170px;height:170px;z-index:6;filter:drop-shadow(0 12px 24px rgba(5,15,80,.4))}
.stamp .ring{position:absolute;inset:0;width:100%;height:100%;animation:spin 14s linear infinite}
.stamp circle{fill:none;stroke:var(--neon);stroke-width:3;stroke-dasharray:10 7;stroke-linecap:round}
.stamp .face{position:absolute;inset:8%;border-radius:50%;overflow:hidden;border:4px solid #fff;background:var(--blue);display:grid;place-items:center}
.stamp .face img{width:100%;height:100%;object-fit:cover}
.stamp .face span{color:var(--neon);font-size:36px}
@keyframes spin{to{transform:rotate(360deg)}}

/* marquee band */
.marquee{position:relative;z-index:3;margin:-34px -2% 0;background:var(--neon);color:var(--ink);transform:rotate(-2deg);overflow:hidden;padding:16px 0;box-shadow:0 10px 30px rgba(14,20,48,.15)}
.marquee .track{display:flex;width:max-content;animation:roll 28s linear infinite}
.marquee span{font-weight:900;font-size:22px;letter-spacing:.06em;white-space:nowrap;padding-right:8px}
@keyframes roll{to{transform:translateX(-50%)}}

/* angled section */
#videos{clip-path:polygon(0 50px,100% 0,100% calc(100% - 50px),0 100%);padding:120px 0}

/* boarding-pass main channel */
.ch.main{position:relative}
.ch.main::before,.ch.main::after{content:"";position:absolute;top:50%;width:22px;height:22px;border-radius:50%;background:var(--bg);transform:translateY(-50%)}
.ch.main::before{left:-12px}.ch.main::after{right:-12px}
.ch.main .top{padding-bottom:22px;border-bottom:2px dashed rgba(255,255,255,.25)}

/* scroll reveal */
.js .rv{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.js .rv.in{opacity:1;transform:none}
.js .vid.rv.in:hover{transform:translateY(-4px)}

@media(max-width:760px){
  .hero{padding:48px 0 90px}
  .collage{max-width:340px;justify-self:center;margin-top:10px}
  .stamp{width:130px;height:130px;left:28%;top:29%}
  .marquee span{font-size:17px}
  #videos{clip-path:polygon(0 24px,100% 0,100% calc(100% - 24px),0 100%);padding:80px 0}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .rv{opacity:1;transform:none}
}
html,body{overflow-x:clip}
