@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

/* ── DESIGN TOKENS ── */
:root {
  /* Brand */
  --brand-green:       #4a7c59;
  --brand-green-deep:  #2e5233;
  --brand-green-soft:  rgba(74,124,89,.08);
  --forest:            #152b18;
  --earth:             #8a6a42;

  /* Surface */
  --canvas:            #fafaf9;
  --canvas-dark:       #152b18;
  --surface:           #f3f4f2;
  --surface-soft:      #f8f9f7;
  --hairline:          rgba(0,0,0,.10);
  --hairline-soft:     rgba(0,0,0,.06);

  /* Hero atmospheric */
  --hero-sky-from:     #d4e8da;
  --hero-sky-to:       #f5f4f0;
  --hero-dark-from:    #152b18;
  --hero-dark-to:      #2e5233;

  /* Text */
  --ink:               #111111;
  --charcoal:          #2d2d2d;
  --slate:             #555555;
  --steel:             #888888;
  --muted:             #bbbbbb;
  --on-dark:           #ffffff;
  --on-dark-muted:     rgba(255,255,255,.60);

  /* Spacing */
  --sp-xxs:         4px;
  --sp-xs:          8px;
  --sp-sm:          12px;
  --sp-md:          16px;
  --sp-lg:          20px;
  --sp-xl:          24px;
  --sp-xxl:         32px;
  --sp-section-sm:  48px;
  --sp-section:     64px;
  --sp-section-lg:  96px;
  --sp-hero:        120px;

  /* Border radius */
  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   16px;
  --r-xxl:  24px;
  --r-full: 9999px;

  /* Shadow */
  --shadow-1:        0 1px 2px rgba(0,0,0,.04);
  --shadow-card:     0 4px 12px rgba(0,0,0,.08);
  --shadow-mockup:   0 24px 48px -8px rgba(0,0,0,.12);
  --shadow-featured: 0 8px 24px rgba(74,124,89,.12);
}

/* ── RESET ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--canvas);
  color: var(--charcoal);
  overflow-x: hidden;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ── NAV ── */
nav {
  position: fixed; top:0; width:100%; z-index:500;
  height: 64px;
  display: flex; align-items:center; justify-content:space-between;
  padding: 0 var(--sp-section);
  background: rgba(250,250,249,.93);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hairline-soft);
}
.logo { display:flex; align-items:center; gap:10px; text-decoration:none; }
.logo-mark {
  width:28px; height:28px; border-radius:var(--r-md);
  background:var(--forest);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; color:#fff; letter-spacing:-.3px;
  flex-shrink:0;
}
.logo-ko  { font-size:14px; font-weight:600; color:var(--ink); letter-spacing:-.2px; }
.logo-en  { display:none; }

.nav-links { display:flex; gap:4px; list-style:none; }
.nav-links a {
  font-size:15px; font-weight:500; color:var(--slate);
  text-decoration:none; padding:6px 12px; border-radius:var(--r-full);
  transition: color .15s, background .15s;
}
.nav-links a:hover     { color:var(--ink); background:var(--surface); }
.nav-links a.nav-active { color:var(--ink); }

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

/* Hamburger */
.nav-hamburger {
  display:none; flex-direction:column; gap:5px;
  cursor:pointer; background:none; border:none; padding:4px; z-index:600;
}
.nav-hamburger span {
  display:block; width:22px; height:2px;
  background:var(--ink); border-radius:2px; transition:all .3s;
}
.nav-hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity:0; }
.nav-hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* ── BUTTONS ── */
.btn {
  display:inline-flex; align-items:center; gap:6px;
  font-family:inherit; font-size:14px; font-weight:500; line-height:1.3;
  padding:10px 20px; border-radius:var(--r-full);
  cursor:pointer; text-decoration:none; border:none;
  transition: background .15s, color .15s, box-shadow .15s;
  white-space:nowrap;
}
.btn-primary   { background:var(--ink);         color:#fff; }
.btn-primary:hover { background:var(--charcoal); }

.btn-accent    { background:var(--brand-green);  color:#fff; }
.btn-accent:hover  { background:var(--brand-green-deep); }

.btn-on-dark   { background:#fff; color:var(--ink); }
.btn-on-dark:hover { background:rgba(255,255,255,.88); }

.btn-secondary {
  background:transparent; color:var(--ink);
  border:1px solid var(--hairline);
}
.btn-secondary:hover { background:var(--surface); }

.btn-ghost {
  background:transparent; color:var(--ink);
  padding:8px 12px; border-radius:var(--r-md);
}
.btn-ghost:hover { background:var(--surface); }

.btn-sm { padding:8px 16px; font-size:13px; }
.btn-lg { padding:13px 28px; font-size:15px; }

/* ── PAGE HERO (inner pages) ── */
.page-hero {
  padding: 128px var(--sp-section) 72px;
  background: linear-gradient(170deg, var(--hero-dark-from) 0%, var(--hero-dark-to) 100%);
  position:relative; overflow:hidden;
}
.page-hero::before {
  content:''; position:absolute; inset:0;
  background-image: radial-gradient(circle, rgba(120,168,130,.12) 1px, transparent 1px);
  background-size:40px 40px;
}
.page-hero-eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; font-weight:600; color:rgba(180,212,187,.8);
  letter-spacing:.5px; text-transform:uppercase;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  padding:4px 12px; border-radius:var(--r-full);
  margin-bottom:20px;
}
.page-hero-title {
  font-size: clamp(44px, 6vw, 72px);
  font-weight:700; line-height:1.05; letter-spacing:-2px;
  color:var(--on-dark);
}
.page-hero-title span { color:#78a882; }
.page-hero-sub {
  font-size: clamp(16px, 2vw, 20px);
  font-weight:400; color:var(--on-dark-muted);
  margin-top:14px; font-style:italic;
}

/* ── SECTION SHELL ── */
.section { padding:var(--sp-section-lg) var(--sp-section); max-width:1280px; margin:0 auto; }

.label-tag {
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:600; color:var(--brand-green);
  letter-spacing:.5px; text-transform:uppercase; margin-bottom:16px;
}
.label-tag::before { content:''; width:24px; height:1px; background:var(--brand-green); }

.section-heading {
  font-size: clamp(30px, 3vw, 46px);
  font-weight:600; line-height:1.15; letter-spacing:-1px;
  color:var(--ink); margin-bottom:12px;
}
.section-heading em { font-style:normal; color:var(--brand-green); }

/* ── TICKER ── */
.ticker { background:var(--forest); padding:14px 0; overflow:hidden; }
.ticker-track { display:flex; animation:marquee 30s linear infinite; white-space:nowrap; }
.ticker-item {
  font-size:12px; font-weight:500; color:rgba(255,255,255,.5);
  letter-spacing:.25em; text-transform:uppercase;
  padding:0 40px; border-right:1px solid rgba(255,255,255,.1); flex-shrink:0;
}

/* ── FOOTER ── */
footer {
  background:var(--canvas);
  border-top:1px solid var(--hairline);
  padding:var(--sp-section) var(--sp-section);
}
.footer-inner {
  max-width:1280px; margin:0 auto;
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr;
  gap:48px; padding-bottom:48px;
}
.footer-brand-name { font-size:15px; font-weight:700; color:var(--ink); margin-bottom:4px; }
.footer-brand-en   { font-size:11px; color:var(--steel); margin-bottom:12px; font-weight:500; letter-spacing:.1em; }
.footer-brand p    { font-size:15px; color:var(--steel); line-height:1.7; }
.footer-col h4     { font-size:15px; font-weight:600; color:var(--ink); margin-bottom:16px; }
.footer-col ul     { list-style:none; display:flex; flex-direction:column; gap:12px; }
.footer-col ul a   { font-size:15px; color:var(--steel); text-decoration:none; transition:color .15s; }
.footer-col ul a:hover { color:var(--ink); }
.footer-bottom {
  max-width:1280px; margin:0 auto;
  padding-top:24px; border-top:1px solid var(--hairline-soft);
  display:flex; justify-content:space-between;
  font-size:13px; color:var(--muted);
}

/* ── ANIMATIONS ── */
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes drift {
  0%,100%{transform:translate(0,0)}
  33%    {transform:translate(16px,-12px)}
  66%    {transform:translate(-12px,16px)}
}
@keyframes float {
  0%,100%{transform:translateY(0)}
  50%    {transform:translateY(-10px)}
}
@keyframes up {
  to{opacity:1;transform:translateY(0)}
}

/* ════════════════════════════════
   MOBILE RESPONSIVE
   ════════════════════════════════ */
@media (max-width:768px) {
  /* Nav */
  nav { padding:0 20px; }
  .nav-hamburger { display:flex; }
  .nav-actions   { display:none; }
  .nav-links {
    display:none; position:fixed; top:0;left:0;right:0;bottom:0;
    background:rgba(250,250,249,.97);
    flex-direction:column; align-items:center; justify-content:center;
    gap:8px; z-index:400;
  }
  .nav-links.open { display:flex; }
  .nav-links a { font-size:20px; padding:12px 24px; }

  /* Page hero */
  .page-hero { padding:104px 20px 56px; }

  /* Section */
  .section { padding:64px 20px; }

  /* Footer */
  footer { padding:48px 20px; }
  .footer-inner { grid-template-columns:1fr 1fr; gap:32px; padding-bottom:32px; }
  .footer-brand { grid-column:span 2; }
  .footer-bottom { flex-direction:column; gap:8px; text-align:center; }
}

@media (max-width:480px) {
  .footer-inner  { grid-template-columns:1fr; }
  .footer-brand  { grid-column:span 1; }
}