/* ==========================================================================
   TRADEVILO storefront
   --------------------------------------------------------------------------
   Three colours only: white surface, deep navy for structure and type,
   cobalt as the single accent. Everything else is a tint of those three.
   ========================================================================== */

:root {
  --white: #ffffff;
  --navy: #0b1b33;
  --cobalt: #1a55e8;

  --surface: #ffffff;
  --surface-soft: #f6f8fc;
  --surface-tint: #eef3fe;
  --line: #e6eaf2;
  --line-soft: #f0f3f9;
  --ink: #0b1b33;
  --ink-muted: #5b6880;
  --ink-faint: #8d97a9;
  --cobalt-dark: #1444c4;
  --navy-soft: #16294a;

  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --shadow-sm: 0 1px 3px rgba(11, 27, 51, .06);
  --shadow: 0 8px 30px rgba(11, 27, 51, .08);
  --shadow-lg: 0 24px 64px rgba(11, 27, 51, .14);

  --header-h: 68px;
  --wrap: 1200px;

  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
    "Segoe UI", "Apple SD Gothic Neo", system-ui, sans-serif;
  /* Pretendard is listed after the monospace faces so Latin and digits stay
     monospaced while Hangul, which JetBrains Mono has no glyphs for, falls
     through to the body face instead of rendering as tofu boxes. */
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
    "Pretendard Variable", Pretendard, "Malgun Gothic", monospace;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
  overflow-wrap: break-word;
}

a { color: inherit; text-decoration: none; }
img, video { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }
svg { display: block; }

h1, h2, h3, h4 { margin: 0; letter-spacing: -.025em; line-height: 1.3; font-weight: 750; }

.wrap { width: min(100% - 40px, var(--wrap)); margin-inline: auto; }
.wrap--narrow { width: min(100% - 40px, 820px); margin-inline: auto; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--navy); color: var(--white); padding: 10px 16px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* ----------------------------------------------------------------- header */

.top-strip {
  background: var(--navy);
  color: rgba(255, 255, 255, .82);
  font-size: 12.5px;
}

.top-strip__inner { display: flex; align-items: center; gap: 18px; height: 34px; }
.top-strip a:hover { color: var(--white); }
.top-strip__spacer { flex: 1; }
.top-strip__rates { display: flex; gap: 12px; font-family: var(--mono); font-size: 11.5px; }

.header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--line);
}

.header__inner { display: flex; align-items: center; gap: 26px; height: var(--header-h); }
.header__logo img { height: 26px; width: auto; }

/* ------------------------------------------------------------------- logo
   Vector mark plus real type, so it stays sharp at any size and recolours
   with the theme instead of being a picture of a logo. */

.logo { display: inline-flex; align-items: center; gap: .42em; line-height: 1; }
.logo__mark { flex: 0 0 auto; }

.logo__word {
  font-size: calc(var(--logo-h, 26px) * .69);
  font-weight: 800;
  letter-spacing: .05em;
  color: var(--navy);
  white-space: nowrap;
}

.logo--inverse .logo__word { color: var(--white); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.nav { display: flex; align-items: center; gap: 4px; flex: 1; }

.nav__link {
  padding: 8px 13px;
  border-radius: 9px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-muted);
  transition: background .14s ease, color .14s ease;
  white-space: nowrap;
}

.nav__link:hover { background: var(--surface-soft); color: var(--ink); }
.nav__link.is-active { color: var(--cobalt); }

.nav__badge {
  margin-left: 5px; padding: 1px 5px; border-radius: 5px;
  background: var(--cobalt); color: var(--white);
  font-size: 9.5px; font-weight: 800; letter-spacing: .04em; vertical-align: 2px;
}

.header__actions { display: flex; align-items: center; gap: 8px; }

.icon-btn {
  position: relative;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 10px; border: 1px solid transparent;
  background: transparent; color: var(--ink-muted); cursor: pointer;
  transition: background .14s ease, color .14s ease;
}
.icon-btn:hover { background: var(--surface-soft); color: var(--ink); }

.icon-btn__count {
  position: absolute; top: 3px; right: 3px;
  min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 9px; background: var(--cobalt); color: var(--white);
  font-size: 10px; font-weight: 800; display: grid; place-items: center;
}

.burger { display: none; }

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 42px; padding: 0 20px;
  border-radius: 11px; border: 1px solid var(--line);
  background: var(--white); color: var(--ink);
  font-size: 14.5px; font-weight: 650; cursor: pointer; white-space: nowrap;
  transition: transform .12s ease, background .14s ease, border-color .14s ease, color .14s ease;
}

.btn:hover { border-color: var(--ink-faint); }
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--cobalt); border-color: var(--cobalt); color: var(--white); }
.btn--primary:hover { background: var(--cobalt-dark); border-color: var(--cobalt-dark); }

.btn--navy { background: var(--navy); border-color: var(--navy); color: var(--white); }
.btn--navy:hover { background: var(--navy-soft); border-color: var(--navy-soft); }

.btn--ghost { border-color: transparent; color: var(--ink-muted); }
.btn--ghost:hover { background: var(--surface-soft); color: var(--ink); }

.btn--lg { height: 52px; padding: 0 30px; font-size: 16px; border-radius: 13px; }
.btn--sm { height: 34px; padding: 0 13px; font-size: 13px; border-radius: 9px; }
.btn--block { width: 100%; }

/* Google's brand guidelines ask for their mark on a white or near-white
   button with a visible border, not tinted with our accent. */
.btn--google {
  background: var(--white);
  border-color: var(--line);
  color: var(--ink);
  font-weight: 650;
  gap: 10px;
}

.btn--google:hover { background: var(--surface-soft); border-color: var(--ink-faint); }
.btn[disabled] { opacity: .5; pointer-events: none; }

/* ------------------------------------------------------------------- hero */

.hero { position: relative; overflow: hidden; background: var(--white); }

.hero__media {
  position: absolute; inset: 0;
  overflow: hidden;
}

/* The clips are stacked and cross-faded, so each one sits in the same box and
   only the active one is opaque. */
.hero__clip {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0;
  filter: saturate(.72);
  transition: opacity 1.2s ease-in-out;
  will-change: opacity;
}

.hero__clip.is-active { opacity: .78; }

/* The scrim, not the footage, is what protects the type: the video stays
   bright and legible on the right while the headline sits on solid white. */
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg,
      #ffffff 0%,
      rgba(255, 255, 255, .97) 34%,
      rgba(255, 255, 255, .72) 56%,
      rgba(255, 255, 255, .28) 78%,
      rgba(255, 255, 255, .12) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, .82) 0%, rgba(255, 255, 255, 0) 20%),
    linear-gradient(0deg, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, 0) 24%);
}

.hero__inner { position: relative; padding: 96px 0 104px; }
.hero__content { max-width: 600px; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 13px; border-radius: 999px;
  background: var(--surface-tint); color: var(--cobalt-dark);
  font-size: 12.5px; font-weight: 700; letter-spacing: .01em;
  margin-bottom: 20px;
}

.hero__title {
  font-size: clamp(32px, 4.4vw, 48px);
  line-height: 1.18;
  letter-spacing: -.035em;
  margin-bottom: 20px;
}

.hero__title em { display: block; font-style: normal; color: var(--cobalt); }

.hero__lead {
  font-size: clamp(15px, 1.5vw, 17px);
  color: var(--ink-muted);
  max-width: 470px;
  margin-bottom: 30px;
  max-width: 520px;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 34px; }

.hero__proof { display: flex; flex-wrap: wrap; gap: 30px; }
.hero__proof-item strong { display: block; font-size: 24px; letter-spacing: -.02em; }
.hero__proof-item span { font-size: 12.5px; color: var(--ink-muted); }

/* -------------------------------------------------------------- page hero

   The banner every inner page opens with. Shorter than the home hero and
   centred on its type, but it reuses .hero__clip so the cross-fade behaviour
   is identical everywhere.                                                */

.page-hero {
  position: relative;
  overflow: hidden;
  background: var(--surface-soft);
  border-bottom: 1px solid var(--line);
}

.page-hero__media { position: absolute; inset: 0; overflow: hidden; }

.page-hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg,
      rgba(255, 255, 255, .98) 0%,
      rgba(255, 255, 255, .92) 40%,
      rgba(255, 255, 255, .70) 66%,
      rgba(255, 255, 255, .42) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, .78) 0%, rgba(255, 255, 255, 0) 30%);
}

.page-hero--center .page-hero__scrim {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, .62) 45%, rgba(255, 255, 255, .9) 100%),
    linear-gradient(90deg, rgba(255, 255, 255, .88) 0%, rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, .88) 100%);
}

.page-hero__inner { position: relative; padding: 62px 0 56px; }
.page-hero--center .page-hero__inner { text-align: center; }

.page-hero__title {
  font-size: clamp(26px, 3.2vw, 38px);
  letter-spacing: -.035em;
  margin: 12px 0 10px;
}

.page-hero__lead {
  font-size: clamp(14px, 1.4vw, 16px);
  color: var(--ink-muted);
  max-width: 620px;
  margin: 0;
}

.page-hero--center .page-hero__lead { margin-inline: auto; }

@media (max-width: 720px) {
  .page-hero__inner { padding: 42px 0 38px; }
}

/* --------------------------------------------------------- URL quote box */

.quote-box {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 8px;
  display: flex; gap: 8px; align-items: center;
  max-width: 560px;
}

.quote-box input {
  flex: 1; min-width: 0;
  height: 44px; padding: 0 14px;
  border: none; background: transparent;
  font-size: 15px; font-family: inherit; color: var(--ink);
}

.quote-box input:focus { outline: none; }
.quote-box input::placeholder { color: var(--ink-faint); }

/* ---------------------------------------------------------------- section */

.section { padding: 84px 0; }
.section--soft { background: var(--surface-soft); }
.section--tight { padding: 56px 0; }

.section__head { max-width: 680px; margin-bottom: 40px; }
.section__head--center { margin-inline: auto; text-align: center; }
.section__title { font-size: clamp(24px, 3vw, 34px); margin-bottom: 12px; }
.section__lead { color: var(--ink-muted); font-size: 15.5px; }

.section__head-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; margin-bottom: 28px; flex-wrap: wrap;
}

/* ------------------------------------------------------------------ cards */

.grid { display: grid; gap: 20px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.grid--auto { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.card--pad { padding: 26px; }
.card--hover { transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.card--hover:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--line); }

/* ------------------------------------------------------------------ steps */

.step {
  position: relative;
  padding: 28px 24px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.step__num {
  font-family: var(--mono);
  font-size: 12px; font-weight: 600;
  color: var(--cobalt);
  letter-spacing: .08em;
  margin-bottom: 14px;
}

/* A tinted square holds the line icon, so the mark reads as a deliberate
   element rather than a small drawing floating in the card. */
.step__icon,
.feature__icon {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  border-radius: 12px;
  background: var(--surface-tint);
  color: var(--cobalt);
}

.step__icon { width: 46px; height: 46px; margin-bottom: 16px; }

.step__title { font-size: 17px; margin-bottom: 8px; }
.step__desc { font-size: 14px; color: var(--ink-muted); margin: 0; }

/* --------------------------------------------------------------- features */

.feature { display: flex; gap: 14px; align-items: flex-start; padding: 20px 0; }
.feature__icon { width: 40px; height: 40px; border-radius: 11px; }
.feature__title { font-size: 15.5px; margin-bottom: 4px; }
.feature__desc { font-size: 13.5px; color: var(--ink-muted); margin: 0; }

/* -------------------------------------------------------------- warehouse */

.warehouse-card { display: flex; flex-direction: column; height: 100%; }

.warehouse-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 22px;
  background: var(--surface-soft);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

/* Left over from the map illustrations this header replaced; scoped so it
   cannot stretch the flag, which sizes itself from its own height. */
.warehouse-card__media > img { width: 100%; height: 100%; object-fit: cover; }

/* Flags carry the country; the code beside them stays for anyone who does not
   recognise a flag at a glance. */
/* Same reason as .shop-logo img: the height comes from the component, the
   width follows the viewBox aspect ratio. */
/* flag-icons ships every flag on a 4:3 canvas. Stating the ratio means the
   width is definite from the height before the SVG has decoded, so nothing
   reflows and no flag ever measures zero wide. */
.flag {
  display: block;
  width: auto;
  aspect-ratio: 4 / 3;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(11, 27, 51, .10);
}

.flag--text {
  display: inline-flex; align-items: center;
  font-weight: 700; letter-spacing: .02em; color: var(--ink-muted);
}

.warehouse-card__flagline {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 12px;
}

.warehouse-card__cc {
  font-size: 34px; font-weight: 800; letter-spacing: -.04em; line-height: 1;
  color: var(--navy);
}

.warehouse-card__city {
  position: relative; z-index: 1;
  margin-top: 6px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .04em;
  color: var(--ink-faint);
}

.warehouse-card__route {
  position: absolute; right: -6px; bottom: 0;
  width: 68%; height: auto;
  color: var(--cobalt);
  pointer-events: none;
}

.card--hover:hover .warehouse-card__media { background: var(--surface-tint); }
.warehouse-card__body { padding: 20px; flex: 1; display: flex; flex-direction: column; }
.warehouse-card__code { font-family: var(--mono); font-size: 11.5px; color: var(--cobalt); letter-spacing: .06em; }
.warehouse-card__name { font-size: 17px; margin: 4px 0 8px; }
.warehouse-card__meta { font-size: 13px; color: var(--ink-muted); margin: 0 0 14px; flex: 1; }

.warehouse-card__stats {
  display: flex; gap: 16px; padding-top: 14px; border-top: 1px solid var(--line-soft);
  font-size: 12.5px;
}
.warehouse-card__stats strong { display: block; font-size: 14px; }
.warehouse-card__stats span { color: var(--ink-faint); }

/* --------------------------------------------------------------- products */

.product-card { display: flex; flex-direction: column; height: 100%; }

.product-card__media {
  position: relative;
  aspect-ratio: 1;
  background: var(--surface-soft);
  overflow: hidden;
}

.product-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .4s ease;
}
.card--hover:hover .product-card__media img { transform: scale(1.04); }

.product-card__flags { position: absolute; top: 10px; left: 10px; display: flex; gap: 5px; }

.chip {
  padding: 3px 8px; border-radius: 6px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .02em;
  background: var(--navy); color: var(--white);
}
.chip--accent { background: var(--cobalt); }
.chip--soft { background: var(--surface-tint); color: var(--cobalt-dark); }

.product-card__body { padding: 16px; display: flex; flex-direction: column; flex: 1; }

.product-card__site {
  font-size: 11.5px; color: var(--ink-faint); font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; margin-bottom: 6px;
}

.product-card__title {
  font-size: 14px; font-weight: 600; line-height: 1.5;
  margin: 0 0 10px; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.product-card__price { font-size: 17px; font-weight: 750; letter-spacing: -.02em; }
.product-card__price small { font-size: 12px; font-weight: 500; color: var(--ink-faint); margin-left: 3px; }
.product-card__origin { font-size: 12px; color: var(--ink-faint); text-decoration: line-through; }

/* ------------------------------------------------------------- categories */

.cat-chip {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 20px 10px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--white);
  transition: border-color .14s ease, background .14s ease, transform .14s ease;
  text-align: center;
}
.cat-chip:hover { border-color: var(--cobalt); background: var(--surface-tint); transform: translateY(-2px); }
.cat-chip img { width: 40px; height: 40px; object-fit: contain; }

/* --------------------------------------------------------- shop wordmarks

   Third-party marks sit on their own, unrecoloured, at a shared optical size.
   Greyscale at rest keeps the row calm against our two-colour palette; colour
   returns on hover so the shop is unmistakable.                            */

.shop-strip {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 10px 14px;
}

.shop-strip__item {
  display: inline-flex; align-items: center; justify-content: center;
  height: 54px; min-width: 128px; padding: 0 22px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--white);
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.shop-strip__item:hover {
  border-color: var(--cobalt);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}

.shop-logo {
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--shop-h, 22px);
}

/* A definite height is required: these SVGs carry only a viewBox, so an
   <img> has no intrinsic size to lay out from and would collapse to nothing
   under height:auto. */
.shop-logo img {
  height: var(--shop-h, 22px);
  width: auto;
  max-width: 118px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .74;
  transition: filter .16s ease, opacity .16s ease;
}

.shop-strip__item:hover .shop-logo img { filter: none; opacity: 1; }

.shop-logo__word {
  font-size: calc(var(--shop-h, 22px) * .92);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1;
  filter: grayscale(1);
  opacity: .74;
  transition: filter .16s ease, opacity .16s ease;
}

.shop-strip__item:hover .shop-logo__word { filter: none; opacity: 1; }

.cat-chip__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 11px;
  background: var(--surface-tint); color: var(--cobalt);
}

.cat-chip:hover .cat-chip__icon { background: var(--white); }
.cat-chip span { font-size: 13.5px; font-weight: 600; }

/* ------------------------------------------------------------------ media */

.media-split { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.media-split--flip > :first-child { order: 2; }

.media-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface-soft);
  aspect-ratio: 3 / 2;
}

.media-frame img, .media-frame video { width: 100%; height: 100%; object-fit: cover; }

.check-list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; }
.check-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; }
.check-list svg { flex: 0 0 auto; color: var(--cobalt); margin-top: 3px; }

/* ------------------------------------------------------------------ table */

.data-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }

.data-table th {
  text-align: left; padding: 12px 14px;
  background: var(--surface-soft);
  border-bottom: 1px solid var(--line);
  font-size: 12.5px; font-weight: 700; color: var(--ink-muted);
  white-space: nowrap;
}

.data-table td { padding: 14px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table .mid { text-align: center; }

/* ----------------------------------------------------------------- panels */

.panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.panel__head { padding: 18px 22px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 12px; }
.panel__title { font-size: 16px; }
.panel__body { padding: 22px; }
.panel__foot { padding: 18px 22px; border-top: 1px solid var(--line); background: var(--surface-soft); }

/* ------------------------------------------------------------------ forms */

.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.field__label { font-size: 13.5px; font-weight: 650; }
.field__label .req { color: var(--cobalt); margin-left: 3px; }
.field__help { font-size: 12.5px; color: var(--ink-muted); }
.field__error { font-size: 12.5px; color: #b42318; font-weight: 600; }

.input, .select, .textarea {
  width: 100%; min-height: 44px; padding: 10px 14px;
  border: 1px solid var(--line); border-radius: 11px;
  background: var(--white); color: var(--ink);
  font-size: 15px; font-family: inherit;
  transition: border-color .14s ease, box-shadow .14s ease;
}

.textarea { min-height: 110px; resize: vertical; }

.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--cobalt);
  box-shadow: 0 0 0 4px rgba(26, 85, 232, .1);
}

.select {
  appearance: none; padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%235b6880' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}

.form-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 18px; }

/* The whole set, not just the spans in use today: a view asking for a span
   that has no rule silently collapses to one twelfth of the row, which is how
   the purchase form ended up with a label broken across three lines. */
.col-1  { grid-column: span 1; }
.col-2  { grid-column: span 2; }
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.col-9  { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }

.check {
  display: inline-flex; gap: 9px; align-items: flex-start;
  font-size: 14px; cursor: pointer; line-height: 1.5;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  transition: border-color .14s ease, background .14s ease;
}

.check:hover { border-color: var(--cobalt); background: var(--surface-tint); }
.check:has(input:checked) { border-color: var(--cobalt); background: var(--surface-tint); }
.check input { width: 18px; height: 18px; accent-color: var(--cobalt); margin-top: 1px; flex: 0 0 auto; }

.radio-card {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  cursor: pointer; transition: border-color .14s ease, background .14s ease;
}
.radio-card:hover { border-color: var(--ink-faint); }
.radio-card input { accent-color: var(--cobalt); margin-top: 3px; }
.radio-card:has(input:checked) { border-color: var(--cobalt); background: var(--surface-tint); }
.radio-card__title { font-weight: 650; font-size: 14.5px; }
.radio-card__desc { font-size: 12.5px; color: var(--ink-muted); }

/* ---------------------------------------------------------------- summary */

.summary-row { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; font-size: 14px; }
.summary-row span:first-child { color: var(--ink-muted); }
.summary-row--total {
  border-top: 1px solid var(--line); margin-top: 8px; padding-top: 16px;
  font-size: 17px; font-weight: 750;
}
.summary-row--total span:first-child { color: var(--ink); }
.summary-row--accent span:last-child { color: var(--cobalt); }

/* --------------------------------------------------------------- timeline */

.progress-track { display: flex; gap: 0; margin: 24px 0; overflow-x: auto; padding-bottom: 4px; }

.progress-step {
  flex: 1; min-width: 96px; text-align: center; position: relative;
  font-size: 12.5px; color: var(--ink-faint); padding-top: 26px;
}

.progress-step::before {
  content: ""; position: absolute; top: 7px; left: 50%; transform: translateX(-50%);
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--white); border: 2px solid var(--line); z-index: 1;
}

.progress-step::after {
  content: ""; position: absolute; top: 12px; left: 50%; width: 100%; height: 2px;
  background: var(--line);
}

.progress-step:last-child::after { display: none; }
.progress-step.is-done { color: var(--ink); font-weight: 650; }
.progress-step.is-done::before { background: var(--cobalt); border-color: var(--cobalt); }
.progress-step.is-done::after { background: var(--cobalt); }
.progress-step.is-current::before { box-shadow: 0 0 0 4px rgba(26, 85, 232, .16); }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { position: relative; padding: 0 0 22px 24px; border-left: 2px solid var(--line); }
.timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline li::before {
  content: ""; position: absolute; left: -6px; top: 4px;
  width: 10px; height: 10px; border-radius: 50%; background: var(--line);
}
.timeline li:first-child::before { background: var(--cobalt); }
.timeline__title { font-weight: 650; font-size: 14.5px; }
.timeline__meta { font-size: 12.5px; color: var(--ink-muted); }

/* ----------------------------------------------------------------- badges */

.tag {
  display: inline-flex; align-items: center; gap: 5px;
  height: 24px; padding: 0 9px; border-radius: 999px;
  font-size: 12px; font-weight: 700;
  background: var(--surface-soft); color: var(--ink-muted);
}
.tag--accent { background: var(--surface-tint); color: var(--cobalt-dark); }
.tag--navy { background: var(--navy); color: var(--white); }

/* --------------------------------------------------------------- accordion */

.accordion { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.accordion__item + .accordion__item { border-top: 1px solid var(--line); }

.accordion__q {
  width: 100%; text-align: left; padding: 20px 22px;
  background: var(--white); border: none; cursor: pointer;
  font-size: 15px; font-weight: 650;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.accordion__q:hover { background: var(--surface-soft); }
.accordion__q svg { flex: 0 0 auto; color: var(--ink-faint); transition: transform .2s ease; }
.accordion__item.is-open .accordion__q svg { transform: rotate(180deg); }

.accordion__a { padding: 0 22px 22px; font-size: 14.5px; color: var(--ink-muted); display: none; }
.accordion__item.is-open .accordion__a { display: block; }
.accordion__a p:first-child { margin-top: 0; }

/* ------------------------------------------------------------------- misc */

.alert {
  padding: 14px 18px; border-radius: var(--radius-sm);
  font-size: 14px; border: 1px solid var(--line); background: var(--surface-soft);
  margin-bottom: 18px;
}
.alert--info { background: var(--surface-tint); border-color: #c3d4fb; color: var(--cobalt-dark); }
.alert--warn { background: #fdf6e8; border-color: #f0dcb6; color: #8a5a00; }
.alert--danger { background: #fdeceb; border-color: #f3c9c5; color: #b42318; }

.muted { color: var(--ink-muted); }
.faint { color: var(--ink-faint); }
.tiny { font-size: 12.5px; }
.small { font-size: 13.5px; }
.strong { font-weight: 700; }
.mono { font-family: var(--mono); }
.center { text-align: center; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.flex { display: flex; }
.flex-between { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.flex-center { display: flex; align-items: center; gap: 10px; }
.wrap-flex { flex-wrap: wrap; }
.gap-1 { gap: 6px; } .gap-2 { gap: 10px; } .gap-3 { gap: 18px; }
.mt-1 { margin-top: 6px; } .mt-2 { margin-top: 12px; } .mt-3 { margin-top: 20px; } .mt-4 { margin-top: 32px; } .mt-5 { margin-top: 48px; }
.mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: 12px; } .mb-3 { margin-bottom: 20px; }
.full { width: 100%; }

.empty-state { padding: 64px 20px; text-align: center; color: var(--ink-muted); }
.empty-state__title { font-size: 17px; font-weight: 700; color: var(--ink); margin: 14px 0 6px; }

.spinner {
  width: 18px; height: 18px;
  border: 2px solid rgba(26, 85, 232, .25); border-top-color: var(--cobalt);
  border-radius: 50%; animation: spin .7s linear infinite; display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------- pagination */

.pagination { display: flex; gap: 5px; justify-content: center; margin-top: 36px; flex-wrap: wrap; }

.pagination a, .pagination span {
  min-width: 38px; height: 38px; padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 10px;
  font-size: 14px; font-weight: 600; color: var(--ink-muted); background: var(--white);
}
.pagination a:hover { border-color: var(--cobalt); color: var(--cobalt); }
.pagination .is-current { background: var(--navy); border-color: var(--navy); color: var(--white); }
.pagination .is-disabled { opacity: .4; pointer-events: none; }

/* ----------------------------------------------------------------- footer */

.footer { background: var(--navy); color: rgba(255, 255, 255, .68); padding: 60px 0 34px; margin-top: 90px; font-size: 13.5px; }
.footer a { color: rgba(255, 255, 255, .82); }
.footer a:hover { color: var(--white); }
.footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 36px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.footer__logo { margin-bottom: 16px; }
.footer__brand-ko {
  margin: -8px 0 12px;
  font-size: 13px; font-weight: 650; letter-spacing: .04em;
  color: rgba(255, 255, 255, .78);
}

.footer__desc { max-width: 300px; line-height: 1.75; }
.footer__title { color: var(--white); font-size: 14px; font-weight: 700; margin-bottom: 14px; }
.footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.footer__bottom { padding-top: 26px; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 12.5px; color: rgba(255, 255, 255, .5); }
.footer__legal { line-height: 1.9; }

/* ------------------------------------------------------------------ modal */

.modal-backdrop {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(11, 27, 51, .5);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  overflow-y: auto;
}
.modal-backdrop[hidden] { display: none; }

.modal {
  width: 100%; max-width: 560px;
  background: var(--white); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); overflow: hidden;
  max-height: 90vh; display: flex; flex-direction: column;
}
.modal__head { padding: 20px 24px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 12px; }
.modal__title { font-size: 17px; }
.modal__close { margin-left: auto; border: none; background: none; cursor: pointer; color: var(--ink-faint); padding: 4px; }
.modal__body { padding: 24px; overflow-y: auto; }
.modal__foot { padding: 18px 24px; border-top: 1px solid var(--line); background: var(--surface-soft); display: flex; gap: 10px; justify-content: flex-end; }

/* ----------------------------------------------------------------- toasts */

.toasts { position: fixed; right: 20px; bottom: 20px; z-index: 140; display: grid; gap: 10px; max-width: 380px; }
.toast {
  padding: 14px 18px; border-radius: var(--radius-sm);
  background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow);
  font-size: 14px;
}
.toast--success { border-left: 3px solid var(--cobalt); }
.toast--error { border-left: 3px solid #b42318; }

/* ------------------------------------------------------------------ mypage */

.mypage { display: grid; grid-template-columns: 232px 1fr; gap: 34px; align-items: start; }

.mypage-nav { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; position: sticky; top: calc(var(--header-h) + 16px); }
.mypage-nav__head { padding: 20px; border-bottom: 1px solid var(--line); background: var(--surface-soft); }
.mypage-nav__name { font-weight: 700; font-size: 15px; }
.mypage-nav__code { font-family: var(--mono); font-size: 11.5px; color: var(--ink-faint); }
.mypage-nav__list { padding: 8px; }
.mypage-nav__link { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; border-radius: 9px; font-size: 14px; color: var(--ink-muted); }
.mypage-nav__link:hover { background: var(--surface-soft); color: var(--ink); }
.mypage-nav__link.is-active { background: var(--surface-tint); color: var(--cobalt-dark); font-weight: 650; }

.stat-tile { padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.stat-tile__value { font-size: 24px; font-weight: 750; letter-spacing: -.02em; }
.stat-tile__label { font-size: 12.5px; color: var(--ink-muted); }

/* ------------------------------------------------------------- responsive */

@media (max-width: 1024px) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .media-split { grid-template-columns: 1fr; gap: 30px; }
  .media-split--flip > :first-child { order: 0; }
  .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
  .mypage { grid-template-columns: 1fr; }
  .mypage-nav { position: static; }

  .nav { display: none; }
  .burger { display: grid; }

  .nav.is-open {
    display: flex; flex-direction: column; align-items: stretch;
    position: absolute; top: var(--header-h); left: 0; right: 0;
    background: var(--white); border-bottom: 1px solid var(--line);
    padding: 12px; gap: 2px; box-shadow: var(--shadow);
  }
}

@media (max-width: 768px) {
  .section { padding: 56px 0; }
  .hero__inner { padding: 60px 0 68px; }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
  .col-7, .col-8, .col-9, .col-10, .col-11 { grid-column: span 12; }
  .top-strip__rates { display: none; }
  .quote-box { flex-direction: column; align-items: stretch; }
  .quote-box .btn { width: 100%; }
}

@media (max-width: 560px) {
  .grid--2, .grid--3, .grid--4, .grid--6 { grid-template-columns: 1fr; }
  .grid--auto { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__top { grid-template-columns: 1fr; }
  .hero__proof { gap: 20px; }
}

/* --------------------------------------------------------- transitions

   Page and section entrances. Everything is a plain opacity/translate fade so
   it degrades to "just visible" if the script never runs, and it is switched
   off entirely for viewers who asked for reduced motion.                   */

/* Fade-in is a CSS animation rather than a scripted class swap: if site.js
   never loads, the animation still runs and the page still appears. Only the
   fade-out on navigation needs JavaScript, and failing to fade out simply
   means an ordinary page change. */
body {
  animation: page-in .42s ease both;
}

@keyframes page-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

body.is-leaving {
  animation: none;
  opacity: 0;
  transition: opacity .22s ease;
}

/* Sections rise slightly into place the first time they are scrolled to.
   Scoped to html.js: without JavaScript nothing is ever un-hidden, so the
   hiding must not happen at all. */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .62s ease, transform .62s cubic-bezier(.22, .61, .36, 1);
}

html.js [data-reveal].is-visible { opacity: 1; transform: none; }

/* Staggered children, for grids of cards. */
html.js [data-reveal] [data-reveal-child] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.22, .61, .36, 1);
  transition-delay: calc(var(--reveal-i, 0) * 60ms);
}

html.js [data-reveal].is-visible [data-reveal-child] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .hero__clip { display: none; }
  body { animation: none !important; }
  [data-reveal], html.js [data-reveal] [data-reveal-child] { opacity: 1 !important; transform: none !important; }
}