/* ============================================================
   Vial Lab — Medical Skin Booster Solution
   Design tokens (rhode-inspired warm gray palette)
   ============================================================ */
:root{
  /* color */
  --bg:        #ffffff;
  --bg-soft:   #f5f4f1;        /* 메인 컬러: 연한 그레이 */
  --bg-cream:  #efeeeb;
  --line:      #e6e4df;
  --ink:       #2b2a28;
  --ink-2:     #67645e;        /* rhode signature warm gray */
  --ink-3:     #9a978f;
  --accent:    #2b2a28;
  --mint:      #cbe6df;        /* 제품 패키지 액센트 */
  --pink:      #f4d6d2;

  /* typography */
  --font-en: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-kr: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard", sans-serif;

  /* layout */
  --max: 1320px;
  --gut: clamp(20px, 4vw, 56px);
  /* Hero geometry — shared so header can align inside hero card */
  --hero-outer: clamp(20px, 2.5vw, 36px);   /* gap between viewport edge and hero card */
  --hero-inner: clamp(24px, 4vw, 80px);     /* hero card inner padding */
  --hero-edge:  calc(var(--hero-outer) + var(--hero-inner)); /* viewport→hero content */
  --radius: 18px;
  --shadow-sm: 0 1px 2px rgba(43,42,40,.04);
  --shadow-md: 0 12px 36px rgba(43,42,40,.08);

  /* motion */
  --ease: cubic-bezier(.2,.7,.2,1);
}

/* ============================================================ reset */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family: var(--font-kr);
  color: var(--ink-2);
  background: var(--bg);
  line-height: 1.6;
  font-size: 16px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font: inherit; color:inherit; cursor:pointer; border:none; background:none; }
ul{ margin:0; padding:0; list-style:none; }

/* ============================================================ utilities */
.eyebrow{
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 14px;
}
.lede{ font-size: 16px; color: var(--ink-2); max-width: 560px; margin: 18px auto 0; }
.display{
  font-family: var(--font-en);
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-size: clamp(34px, 5.4vw, 72px);
  line-height: 1.02;
  margin: 0;
}
.display em{
  font-style: italic;
  font-weight: 300;
  color: var(--ink-2);
}
.section{ padding: clamp(80px, 10vw, 140px) var(--gut); max-width: var(--max); margin: 0 auto; }
.section__head{ text-align:center; margin-bottom: clamp(40px, 6vw, 80px); }

/* ============================================================ buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  height: 48px; padding: 0 24px;
  font-family: var(--font-en);
  font-weight: 600; font-size: 13px;
  letter-spacing: .12em; text-transform: uppercase;
  border-radius: 999px;
  transition: transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
}
.btn--primary{ background: var(--ink); color: #fff; }
.btn--primary:hover{ background:#000; transform: translateY(-1px); }
.btn--ghost{ background: transparent; color: var(--ink); border:1px solid var(--ink); }
.btn--ghost:hover{ background: var(--ink); color:#fff; }

/* ============================================================ topbar */
.topbar{
  background: var(--ink);
  color:#fff;
  height: 36px;
  overflow: hidden;
  display:flex; align-items:center;
  position: relative;
}
.topbar__track{
  display:flex; gap: 32px; white-space: nowrap;
  font-family: var(--font-en); font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  animation: marquee 40s linear infinite;
  padding-left: 32px;
}
@keyframes marquee{
  from{ transform: translateX(0); }
  to  { transform: translateX(-50%); }
}

/* ============================================================ header */
.header{
  position: fixed;
  /* Sit exactly on hero card top so content nests inside the card */
  top: calc(36px + var(--hero-outer));
  left: 0; right: 0; z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: top .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease), backdrop-filter .35s var(--ease);
}
.header.is-scrolled{
  top: 0;
  background: rgba(255,255,255,.88);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom-color: var(--line);
}
/* Modal floats above header — header keeps its current state */

.header__inner{
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items:center;
  padding: 18px var(--hero-edge);
  gap: 16px;
}
.header__logo img{ height: 44px; width:auto; transition: transform .3s var(--ease), filter .3s var(--ease); }
.header__logo:hover img{ transform: scale(1.04); }
.nav{
  display:flex; gap: 28px; justify-content:center;
  font-family: var(--font-en); font-weight:600; font-size: 13px; letter-spacing: .14em;
}
.nav a{ position:relative; padding: 6px 0; color: var(--ink); transition: color .3s var(--ease); }
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease);
}
.nav a:hover::after{ transform: scaleX(1); }
.header__actions{ display:flex; gap:8px; justify-content:flex-end; align-items:center; }
.btn--sm{ height: 38px; padding: 0 16px; font-size: 12px; }

.hamburger{
  display:none; width:42px; height:42px;
  flex-direction:column; gap:5px; align-items:center; justify-content:center;
  border-radius: 999px;
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background .25s var(--ease);
}
.header.is-scrolled .hamburger{ background: transparent; }
.hamburger:hover{ background: #fff; }
.hamburger span{ display:block; width:20px; height:1.6px; background: var(--ink); border-radius: 2px; transition: transform .35s var(--ease), opacity .25s var(--ease), background .25s var(--ease); }
.hamburger[aria-expanded="true"] span:nth-child(1){ transform: translateY(6.6px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2){ opacity:0; transform: scaleX(0); }
.hamburger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-6.6px) rotate(-45deg); }

[hidden]{ display:none !important; }

/* ============================================================ modal menu (centered card) */
.menu-modal{
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  padding: 24px;
}
.menu-modal__backdrop{
  position: absolute; inset: 0;
  background: rgba(20, 19, 17, .55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .35s var(--ease);
}
body.menu-open .menu-modal{ pointer-events: auto; }
body.menu-open .menu-modal__backdrop{ opacity: 1; }

.menu-modal__card{
  position: relative;
  width: 100%;
  max-width: 460px;
  background: #fff;
  border-radius: 28px;
  padding: 56px clamp(28px, 5vw, 44px) clamp(28px, 4vw, 40px);
  box-shadow:
    0 30px 80px -20px rgba(0,0,0,.35),
    0 1px 2px rgba(0,0,0,.08);
  opacity: 0;
  transform: translateY(16px) scale(.96);
  transition: opacity .35s var(--ease), transform .45s var(--ease);
}
body.menu-open .menu-modal__card{
  opacity: 1; transform: none;
}

.menu-modal__close{
  position: absolute; top: 16px; right: 16px;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: var(--bg-soft);
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.menu-modal__close:hover{ background: var(--ink); transform: rotate(90deg); }
.menu-modal__close span{
  position: absolute;
  width: 16px; height: 1.6px;
  background: var(--ink); border-radius: 2px;
  transition: background .25s var(--ease);
}
.menu-modal__close span:nth-child(1){ transform: rotate(45deg); }
.menu-modal__close span:nth-child(2){ transform: rotate(-45deg); }
.menu-modal__close:hover span{ background: #fff; }

.menu-modal__eyebrow{
  font-family: var(--font-en); font-weight: 700; font-size: 11px;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 22px;
}

.menu-modal__nav{
  display: flex; flex-direction: column;
  gap: 4px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
  margin-bottom: 26px;
}
.menu-modal__nav a{
  position: relative;
  display: flex; align-items: center; gap: 14px;
  font-family: var(--font-en); font-weight: 800;
  font-size: clamp(26px, 6vw, 36px);
  line-height: 1.05; letter-spacing: -.02em;
  color: var(--ink);
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  opacity: 0; transform: translateX(-12px);
  transition: opacity .4s var(--ease), transform .45s var(--ease), color .2s var(--ease);
}
.menu-modal__nav a:last-child{ border-bottom: none; }
body.menu-open .menu-modal__nav a{ opacity: 1; transform: none; }
body.menu-open .menu-modal__nav a:nth-child(1){ transition-delay: .12s; }
body.menu-open .menu-modal__nav a:nth-child(2){ transition-delay: .17s; }
body.menu-open .menu-modal__nav a:nth-child(3){ transition-delay: .22s; }
body.menu-open .menu-modal__nav a:nth-child(4){ transition-delay: .27s; }

.menu-modal__nav a::before{
  content: attr(data-num);
  font-family: var(--font-en); font-weight: 500;
  font-size: 10px; letter-spacing: .2em;
  color: var(--ink-3);
  min-width: 22px;
}
.menu-modal__nav a span{
  display: inline-block;
  transition: transform .3s var(--ease);
}
.menu-modal__nav a:hover{ color: var(--ink-2); }
.menu-modal__nav a:hover span{ transform: translateX(8px); }
.menu-modal__nav a::after{
  content: "→";
  margin-left: auto;
  font-weight: 400; font-size: 18px;
  color: var(--ink-3);
  transition: transform .3s var(--ease), color .25s var(--ease);
}
.menu-modal__nav a:hover::after{
  transform: translateX(6px);
  color: var(--ink);
}

.menu-modal__foot{
  display: flex; flex-direction: column;
  gap: 6px;
  font-family: var(--font-en); font-size: 12px; letter-spacing: .06em;
  color: var(--ink-3);
  opacity: 0;
  transition: opacity .5s var(--ease) .35s;
}
body.menu-open .menu-modal__foot{ opacity: 1; }
.menu-modal__foot p{ margin: 0; }
.menu-modal__foot a{
  color: var(--ink);
  text-decoration: underline; text-underline-offset: 3px;
}
.menu-modal__foot a:hover{ color: var(--ink-2); }

/* Lock body scroll while menu open */
body.menu-open{ overflow: hidden; }

/* ============================================================ hero — floating rounded card (sits under fixed header) */
.hero{
  background: var(--bg);
  padding: var(--hero-outer) var(--gut) clamp(24px, 3vw, 40px);
  /* No top offset — header overlays the hero card on purpose */
}
.hero__card{
  position: relative;
  max-width: var(--max);
  margin: 0 auto;
  min-height: clamp(560px, 82vh, 880px);
  border-radius: clamp(24px, 3vw, 42px);
  overflow: hidden;
  background: linear-gradient(160deg, var(--bg-soft) 0%, #faf9f6 60%, #f7eeec 100%);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(96px, 14vh, 160px) var(--hero-inner) clamp(60px, 8vw, 100px);
  box-shadow:
    0 1px 2px rgba(43,42,40,.04),
    0 30px 80px -30px rgba(43,42,40,.16);
  isolation: isolate;
}
.hero__bg{
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(45% 55% at 18% 28%, rgba(203,230,223,.55), transparent 65%),
    radial-gradient(40% 50% at 85% 70%, rgba(244,214,210,.45), transparent 65%),
    radial-gradient(35% 40% at 65% 15%, rgba(255,255,255,.6), transparent 70%);
}
.hero__inner{
  position:relative; z-index:2; max-width: 880px; text-align:center;
  animation: fadeUp .9s var(--ease) both;
}
.hero__eyebrow{
  font-family: var(--font-en); font-weight:600; font-size: 12px; letter-spacing: .28em;
  text-transform: uppercase; color: var(--ink-2); margin: 0 0 22px;
}
.hero__title{
  font-family: var(--font-en); font-weight: 900;
  font-size: clamp(38px, 6.6vw, 96px);
  line-height: .98; letter-spacing: -.025em;
  color: var(--ink); margin: 0 0 28px;
}
.hero__title em{ font-style: italic; font-weight: 300; color: var(--ink-2); }
.hero__title span{ display:block; }
.hero__sub{ font-size: 17px; color: var(--ink-2); margin: 0 0 36px; }
.hero__cta{ display:flex; gap: 12px; justify-content:center; flex-wrap:wrap; }

/* Floating product pills around hero card */
.float-pill{
  position: absolute; z-index: 3;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 16px 8px 8px;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 999px;
  box-shadow: 0 6px 24px rgba(43,42,40,.10);
  font-family: var(--font-en); font-weight: 600; font-size: 12px; letter-spacing: .08em;
  color: var(--ink);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
  animation: floatY 6s ease-in-out infinite;
}
.float-pill img{
  width: 40px; height: 40px; border-radius: 50%;
  object-fit: cover; object-position: center;
  background: var(--bg-soft);
  flex: 0 0 auto;
}
.float-pill__dot{
  width: 36px; height: 36px; border-radius: 50%;
  flex: 0 0 auto;
  position: relative;
  box-shadow: inset 0 -4px 8px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
}
.float-pill__dot[data-color="silver"]{ background: linear-gradient(135deg, #ecebe7 0%, #c8c5be 100%); }
.float-pill__dot[data-color="mint"]  { background: linear-gradient(135deg, #d8eee7 0%, #9fcfc2 100%); }
.float-pill__dot[data-color="pink"]  { background: linear-gradient(135deg, #fbe0dd 0%, #f4b9b1 100%); }
.float-pill__dot[data-color="cream"] { background: linear-gradient(135deg, #f5f0e8 0%, #d9cfbe 100%); }
.float-pill:hover{
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 14px 36px rgba(43,42,40,.18);
}
.float-pill--tl{ top: 12%;   left: 6%;  animation-delay: 0s; }
.float-pill--tr{ top: 16%;   right: 7%; animation-delay: -1.5s; }
.float-pill--bl{ bottom: 14%; left: 8%;  animation-delay: -3s; }
.float-pill--br{ bottom: 18%; right: 6%; animation-delay: -4.5s; }
@keyframes floatY{
  0%,100%{ transform: translateY(0); }
  50%   { transform: translateY(-8px); }
}
@media (max-width: 860px){
  .float-pill span{ display:none; }
  .float-pill{ padding: 6px; }
  .float-pill--tl{ top: 4%;   left: 4%;  }
  .float-pill--tr{ top: 4%;   right: 4%; }
  .float-pill--bl{ bottom: 4%; left: 4%;  }
  .float-pill--br{ bottom: 4%; right: 4%; }
}

/* ============================================================ chips marquee */
.chips{
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #fff;
  overflow: hidden;
  padding: 14px 0;
}
.chips__track{
  display:flex; gap:36px; white-space:nowrap;
  font-family: var(--font-en); font-weight:500; font-size: 12px; letter-spacing: .14em;
  color: var(--ink-3);
  animation: marquee 40s linear infinite reverse;
}

/* ============================================================ products */
.section--products{ padding-top: clamp(80px, 10vw, 140px); }
.products{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 28px;
}
.product{
  display:flex; flex-direction:column; gap: 18px;
}
.product__media{
  position:relative;
  aspect-ratio: 4/5;
  background: var(--bg-soft);
  border-radius: clamp(20px, 2vw, 28px);
  overflow: hidden;
  display:block;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.product__img{
  width:100%; height:100%; object-fit: contain; padding: 18%;
  transition: transform .6s var(--ease), filter .4s var(--ease);
}
.product:hover .product__media{
  transform: translateY(-6px);
  box-shadow: 0 22px 50px -10px rgba(43,42,40,.18);
}
.product:hover .product__img{
  transform: scale(1.08) rotate(-1.2deg);
  filter: brightness(1.02);
}

/* Hover overlay — slides up from bottom */
.product__hover{
  position:absolute; left: 0; right: 0; bottom: 0;
  padding: clamp(18px, 2.2vw, 26px);
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.92) 35%, #fff 100%);
  display: flex; flex-direction: column; gap: 6px;
  opacity: 0; transform: translateY(16px);
  transition: opacity .35s var(--ease), transform .45s var(--ease);
  pointer-events: none;
}
.product:hover .product__hover{
  opacity: 1; transform: none;
}
.product__hover-eyebrow{
  font-family: var(--font-en); font-weight: 700; font-size: 10px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3);
}
.product__hover strong{
  font-family: var(--font-en); font-weight: 700; font-size: 16px;
  letter-spacing: -.01em; color: var(--ink);
}
.product__hover-desc{
  font-size: 13px; color: var(--ink-2); line-height: 1.5;
}
.product__hover-cta{
  margin-top: 6px;
  font-family: var(--font-en); font-weight: 600; font-size: 12px;
  letter-spacing: .08em; color: var(--ink);
  text-decoration: underline; text-underline-offset: 4px;
}

/* Touch devices: show overlay always at low opacity, full on tap-focus */
@media (hover: none){
  .product__hover{ display: none; }
}

.badge{
  position:absolute; top:14px; left:14px;
  font-family: var(--font-en); font-weight:700; font-size: 10px;
  letter-spacing: .18em; text-transform: uppercase;
  background: #fff; color: var(--ink); padding: 6px 10px; border-radius: 999px;
  box-shadow: var(--shadow-sm);
}
.badge--soon{ background: var(--ink); color: #fff; }

.product__cat{
  font-family: var(--font-en); font-weight: 500; font-size: 11px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3);
  margin: 0;
}
.product__name{
  font-family: var(--font-en); font-weight: 700;
  font-size: 17px; letter-spacing:-.01em; line-height: 1.25;
  color: var(--ink); margin: 0;
}
.product__desc{
  font-size: 14px; color: var(--ink-2); margin: 0;
}

/* ============================================================ banner (about) — rounded card */
.banner{
  padding: clamp(40px, 5vw, 80px) var(--gut);
}
.banner > *{ max-width: var(--max); margin-left: auto; margin-right: auto; }
.banner{
  display: block;
}
.banner-card{
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: 1.05fr 1fr;
  background: var(--bg-soft);
  border-radius: clamp(24px, 3vw, 40px);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(43,42,40,.04), 0 30px 80px -30px rgba(43,42,40,.10);
}
.banner__media{
  aspect-ratio: 4/5;
  background: linear-gradient(160deg, #ddd9d2 0%, #c8c3bb 100%);
  display:flex; align-items:center; justify-content:center;
  padding: clamp(40px, 6vw, 80px);
}
.banner__media img{
  max-height: 80%; max-width: 80%;
  filter: drop-shadow(0 24px 50px rgba(0,0,0,.12));
  transition: transform .6s var(--ease);
}
.banner-card:hover .banner__media img{ transform: scale(1.03) rotate(-1deg); }
.banner__copy{
  padding: clamp(40px, 6vw, 90px) clamp(28px, 4vw, 64px);
  display:flex; flex-direction:column; justify-content:center;
  gap: 22px;
  max-width: 620px;
}
.banner__copy p{ margin:0; font-size: 16px; }
.banner__copy .btn{ align-self:flex-start; margin-top: 8px; }

/* ============================================================ split — rounded card */
.split{
  padding: clamp(40px, 5vw, 80px) var(--gut);
}
.split-card{
  max-width: var(--max); margin: 0 auto;
  display:grid; grid-template-columns: 1fr 1fr;
  background: var(--bg);
  border-radius: clamp(24px, 3vw, 40px);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(43,42,40,.04), 0 24px 60px -20px rgba(43,42,40,.10);
}
.split__media{
  background: var(--bg-cream);
  display:flex; align-items:center; justify-content:center;
  padding: clamp(40px, 6vw, 80px);
  aspect-ratio: 5/4;
  overflow:hidden;
}
.split__media img{
  max-height: 100%; object-fit: contain;
  transition: transform .6s var(--ease);
}
.split-card:hover .split__media img{ transform: scale(1.06) rotate(1deg); }
.split__copy{
  padding: clamp(40px, 6vw, 80px) clamp(28px, 4vw, 64px);
  display:flex; flex-direction:column; justify-content:center;
  gap: 18px;
  max-width: 620px;
}
.split__copy p{ margin:0; }
.checks{ display:flex; flex-direction:column; gap: 10px; margin-top: 10px; }
.checks li{
  display:flex; align-items:flex-start; gap:10px;
  font-size: 15px; color: var(--ink-2);
}
.checks li::before{
  content:""; flex:0 0 auto;
  width:18px; height:18px; margin-top: 4px;
  border-radius:50%;
  background: var(--mint);
  background-image: linear-gradient(135deg, #9fcfc2, #cbe6df);
}

/* ============================================================ mission */
.mission{
  background: var(--bg-soft);
  max-width: none; margin: 0;
  padding-left: var(--gut); padding-right: var(--gut);
}
.mission .section__head{ max-width: var(--max); margin-left:auto; margin-right:auto; }
.mission__grid{
  max-width: var(--max); margin:0 auto;
  display:grid; grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.mission__grid article{
  background: #fff;
  border-radius: clamp(20px, 2.4vw, 28px);
  padding: clamp(28px, 3.5vw, 44px);
  border: 1px solid var(--line);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
  cursor: default;
}
.mission__grid article:hover{
  transform: translateY(-6px);
  box-shadow: 0 24px 50px -12px rgba(43,42,40,.14);
  border-color: transparent;
}
.mission__grid h3{
  font-family: var(--font-en); font-weight: 800; font-size: 13px; letter-spacing: .22em;
  color: var(--ink); margin: 0 0 14px;
}
.mission__grid p{ margin: 0; font-size: 15px; color: var(--ink-2); }

/* ============================================================ cta cluster */
.cta-cluster{
  background: linear-gradient(180deg, #fff 0%, var(--bg-soft) 100%);
  padding: clamp(80px, 10vw, 140px) var(--gut);
}
.cta-cluster__inner{ max-width: var(--max); margin:0 auto; text-align:center; }
.cta-cluster__grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px; margin: 48px 0 32px;
}
.cta-card{
  display:flex; flex-direction:column; align-items:center; gap: 8px;
  padding: 32px 20px;
  background:#fff; border:1px solid var(--line);
  border-radius: clamp(18px, 2vw, 24px);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
  text-align:center;
  position: relative; overflow: hidden;
}
.cta-card::before{
  content:""; position:absolute; inset: 0;
  background: linear-gradient(135deg, rgba(203,230,223,.4) 0%, transparent 60%);
  opacity: 0; transition: opacity .3s var(--ease);
  pointer-events: none;
}
.cta-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 24px 50px -12px rgba(43,42,40,.18);
  border-color: transparent;
}
.cta-card:hover::before{ opacity: 1; }
.cta-card > *{ position: relative; z-index: 1; }
.cta-card__icon{
  width: 48px; height:48px; border-radius: 50%;
  background: var(--bg-soft);
  display:flex; align-items:center; justify-content:center;
  font-size: 20px;
  margin-bottom: 4px;
}
.cta-card strong{
  font-family: var(--font-en); font-weight: 700; font-size: 14px; letter-spacing: .12em;
  color: var(--ink);
}
.cta-card span:not(.cta-card__icon){ font-size: 13px; color: var(--ink-2); }

.qr{
  display:inline-flex; align-items:center; gap: 18px;
  margin-top: 16px;
  padding: 18px 24px;
  background:#fff; border: 1px dashed var(--line); border-radius: var(--radius);
  text-align:left;
}
.qr__box{
  width: 64px; height: 64px;
  background: var(--ink); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-en); font-weight:800; letter-spacing: .2em; font-size: 14px;
  border-radius: 8px;
}
.qr strong{ font-family: var(--font-en); font-weight: 700; font-size: 14px; letter-spacing: .1em; color: var(--ink); display:block; }
.qr p{ margin: 4px 0 0; font-size: 13px; color: var(--ink-2); }

/* ============================================================ footer */
.footer{
  background: var(--ink);
  color: #d6d3cd;
  padding: clamp(60px, 8vw, 100px) var(--gut) 24px;
}
.footer__inner{
  max-width: var(--max); margin: 0 auto;
  display:grid; grid-template-columns: 1.2fr 2fr; gap: clamp(40px, 6vw, 80px);
}
.footer__brand p{ margin: 16px 0 0; font-size: 14px; line-height: 1.7; color: #b8b5af; }
.footer__logo{ height: 56px; width:auto; filter: brightness(0) invert(1) opacity(.9); }
.footer__cols{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
}
.footer__cols h4{
  font-family: var(--font-en); font-weight: 700; letter-spacing: .18em; font-size: 12px;
  color: #fff; margin: 0 0 14px;
}
.footer__cols ul li{
  font-size: 13px; line-height: 1.85; color: #b8b5af;
}
.footer__cols a:hover{ color:#fff; }
.footer__bottom{
  max-width: var(--max); margin: 48px auto 0;
  padding-top: 24px; border-top: 1px solid #3a3936;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap: 12px;
  font-family: var(--font-en); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: #8b8884;
}

/* ============================================================ floating CTA */
.float-cta{
  position: fixed; right: 22px; bottom: 22px; z-index: 60;
  width: 64px; height: 64px;
  background: var(--ink); color:#fff;
  border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-en); font-weight:700; font-size: 13px; letter-spacing: .08em;
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
  transition: transform .25s var(--ease);
}
.float-cta:hover{ transform: scale(1.06); }

/* ============================================================ responsive */
@media (max-width: 960px){
  .nav{ display:none; }
  .header__actions .btn{ display:none; }
  .hamburger{ display:flex; }
  .header__inner{ grid-template-columns: 1fr auto; }

  .banner-card, .split-card{ grid-template-columns: 1fr; }
  .banner__media, .split__media{ aspect-ratio: 4/3; }

  .footer__inner{ grid-template-columns: 1fr; }
  .footer__cols{ grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================ mobile compact */
@media (max-width: 720px){
  :root{
    --gut: 16px;
    --hero-outer: 16px;   /* mobile gap viewport→hero card */
    --hero-inner: 18px;   /* mobile hero card inner padding */
  }

  /* Topbar tighter */
  .topbar{ height: 30px; }
  .topbar__track{ font-size: 10px; gap: 22px; }

  /* Header tighter — align to hero card inner edge */
  .header{ top: calc(30px + var(--hero-outer)); }
  .header__inner{ padding: 10px var(--hero-edge); }
  .header__logo img{ height: 30px; }

  /* Hero — drastically shorter, denser */
  .hero{ padding: 12px var(--gut) 14px; }
  .hero__card{
    min-height: 0;
    padding: 78px var(--hero-inner) 32px;  /* extra top to clear fixed header */
    border-radius: 22px;
  }
  .hero__eyebrow{ font-size: 10px; letter-spacing: .22em; margin: 0 0 14px; }
  .hero__title{
    font-size: clamp(34px, 9vw, 44px);
    line-height: 1.0;
    margin: 0 0 18px;
  }
  .hero__sub{ font-size: 14px; line-height: 1.55; margin: 0 0 22px; }
  .hero__sub br{ display:none; }
  .hero__cta{ flex-direction:column; align-items:stretch; gap: 8px; padding: 0; }
  .hero__cta .btn{ width:100%; height: 44px; }

  /* Float pills — compact corner dots only */
  .float-pill{ padding: 5px; box-shadow: 0 4px 14px rgba(43,42,40,.10); }
  .float-pill__dot{ width: 26px; height: 26px; }
  .float-pill--tl{ top: 10px;    left: 10px;  }
  .float-pill--tr{ top: 10px;    right: 10px; }
  .float-pill--bl{ bottom: 10px; left: 10px;  }
  .float-pill--br{ bottom: 10px; right: 10px; }

  /* Chips marquee tighter */
  .chips{ padding: 9px 0; }
  .chips__track{ font-size: 10px; gap: 22px; }

  /* Section spacing — slash to half */
  .section{ padding: 56px var(--gut); }
  .section__head{ margin-bottom: 28px; }

  /* Display headings smaller */
  .display{ font-size: clamp(28px, 8vw, 38px); line-height: 1.05; }
  .lede{ font-size: 14px; }
  .eyebrow{ font-size: 10px; margin: 0 0 10px; }

  /* Products — 2 columns instead of vertical stack */
  .products{ grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .product{ gap: 10px; }
  .product__media{ border-radius: 16px; }
  .product__name{ font-size: 13px; line-height: 1.2; }
  .product__cat{ font-size: 9px; letter-spacing: .18em; }
  .product__desc{ font-size: 11px; line-height: 1.4; }
  .badge{ font-size: 8px; padding: 4px 8px; top: 8px; left: 8px; }
  /* Hide hover overlay on mobile (touch) — handled by hover:none MQ already */

  /* Banner / split — compact card */
  .banner, .split{ padding: 18px var(--gut); }
  .banner-card, .split-card{ border-radius: 22px; }
  .banner__media, .split__media{ aspect-ratio: 1/1; padding: 32px; }
  .banner__copy, .split__copy{ padding: 32px 24px 36px; gap: 14px; }
  .banner__copy p, .split__copy p{ font-size: 14px; line-height: 1.6; }

  /* Mission cards — tighter */
  .mission__grid{ grid-template-columns: 1fr; gap: 12px; }
  .mission__grid article{ padding: 22px 20px; border-radius: 18px; }
  .mission__grid h3{ font-size: 12px; margin: 0 0 8px; }
  .mission__grid p{ font-size: 13px; line-height: 1.55; }

  /* CTA cluster — 2x2 grid + smaller cards */
  .cta-cluster{ padding: 56px var(--gut); }
  .cta-cluster__grid{
    grid-template-columns: repeat(2, 1fr);
    gap: 10px; margin: 28px 0 24px;
  }
  .cta-card{ padding: 20px 12px; border-radius: 16px; gap: 6px; }
  .cta-card__icon{ width: 36px; height: 36px; font-size: 16px; margin-bottom: 0; }
  .cta-card strong{ font-size: 12px; letter-spacing: .08em; }
  .cta-card span:not(.cta-card__icon){ font-size: 11px; line-height: 1.4; }
  .qr{ flex-direction:column; text-align:center; padding: 16px 18px; gap: 12px; }
  .qr__box{ width: 56px; height: 56px; }

  /* Footer — tighter */
  .footer{ padding: 44px var(--gut) 20px; }
  .footer__inner{ gap: 28px; }
  .footer__brand p{ font-size: 13px; }
  .footer__cols{ gap: 22px; }
  .footer__cols h4{ font-size: 11px; margin: 0 0 10px; }
  .footer__cols ul li{ font-size: 12px; line-height: 1.7; }
  .footer__bottom{ margin: 28px auto 0; padding-top: 16px; font-size: 9px; }

  /* Floating CTA — smaller */
  .float-cta{ width: 50px; height: 50px; right: 12px; bottom: 12px; font-size: 11px; }

  /* Buttons */
  .btn{ height: 42px; padding: 0 18px; font-size: 12px; }
}

/* Very small phones */
@media (max-width: 380px){
  .products{ grid-template-columns: 1fr; }
  .cta-cluster__grid{ grid-template-columns: 1fr; }
}

/* ============================================================ subtle hero entrance */
.hero__inner{ animation: fadeUp .9s var(--ease) both; }
@keyframes fadeUp{
  from{ opacity: 0; transform: translateY(16px); }
  to  { opacity: 1; transform: none; }
}