/* ── RESET & BASE ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --ice:      #c8d8e8;
  --slate:    #3d4f63;
  --slate-dk: #2a3848;
  --white:    #ffffff;
  --off:      #f0f4f7;
  --accent:   #c8d8e8;
  --accent-dim: rgba(200,216,232,0.45);
  --dark-bg:  #0c1018;
  --dark-card:#141c26;
  --dark-brd: #1e2c3a;

  --font: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* theme tokens — light */
  --bg:       var(--off);
  --text:     var(--slate);
  --nav-bg:   rgba(240, 244, 247, 0.72);
  --nav-brd:  rgba(61, 79, 99, 0.12);
}

body.dark {
  --bg:      #0c1018;
  --text:    #c8d8e8;
  --nav-bg:  rgba(12, 16, 24, 0.72);
  --nav-brd: rgba(200, 216, 232, 0.08);
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  transition: background 0.4s, color 0.4s;
  overflow-x: hidden;
}

/* ── NAV ── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2.5rem;
  height: 64px;
  background: var(--nav-bg);
  border-bottom: 1px solid var(--nav-brd);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* logo */
.logo { text-decoration: none; display: flex; }
.logo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  line-height: 1;
}
.l-cr, .l-ux {
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--text);
}
.l-x { font-weight: 300; }

.nav-links {
  display: flex;
  gap: 2.5rem;
  list-style: none;
}
.nav-links a {
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--text);
  text-decoration: none;
  opacity: 0.75;
  transition: opacity 0.2s;
}
.nav-links a:hover { opacity: 1; }

/* controls */
.nav-controls { display: flex; align-items: center; gap: 1.25rem; }

/* theme toggle pill */
.theme-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.toggle-track {
  display: flex;
  align-items: center;
  width: 42px;
  height: 22px;
  border-radius: 11px;
  background: var(--slate);
  padding: 2px;
  transition: background 0.3s;
}
body.dark .toggle-track { background: var(--ice); }
.toggle-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--white);
  transition: transform 0.3s;
}
body.dark .toggle-thumb { transform: translateX(20px); background: var(--slate-dk); }

/* lang */
.lang-switch {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
}
.lang-sep { opacity: 0.4; }
.lang-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  opacity: 0.45;
  font-family: var(--font);
  transition: opacity 0.2s;
}
.lang-btn.active, .lang-btn:hover { opacity: 1; }

/* ── HERO ── */
.hero {
  position: relative;
  height: 100vh;
  min-height: 600px;
  display: flex;
  align-items: flex-end;
  padding-bottom: 3rem;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  /* day: sky + steppe gradient */
  background:
    linear-gradient(180deg,
      #a8cce0 0%,
      #c8dff0 28%,
      #dceaf5 46%,
      #e8eed8 58%,
      #d0cca0 72%,
      #b8b878 100%
    );
  transition: background 0.6s;
}
body.dark .hero-bg {
  background:
    linear-gradient(180deg,
      #020610 0%,
      #060e22 18%,
      #0e1e38 38%,
      #1a2840 52%,
      #1c2030 68%,
      #141618 100%
    );
}
/* star-like dots in dark mode */
body.dark .hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 15% 12%, rgba(255,255,255,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 38% 8%,  rgba(255,255,255,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 62% 18%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 80% 6%,  rgba(255,255,255,0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 55% 5%,  rgba(255,255,255,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 25% 22%, rgba(255,255,255,0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 90% 14%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(2px 2px at 44% 10%, rgba(255,255,255,0.2) 0%, transparent 100%);
}

/* grass silhouette at bottom */
.hero-bg::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0; right: 0;
  height: 38%;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.08) 100%);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 220' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M0 220 Q30 160 60 200 Q90 140 120 180 Q150 120 180 170 Q210 110 240 160 Q270 100 300 150 Q330 90 360 140 Q390 80 420 130 Q450 70 480 120 Q510 60 540 110 Q570 50 600 100 Q630 40 660 90 Q690 30 720 80 Q750 20 780 70 Q810 10 840 60 Q870 0 900 50 Q930 10 960 60 Q990 20 1020 70 Q1050 30 1080 80 Q1110 40 1140 90 Q1170 50 1200 100 Q1230 60 1260 110 Q1290 70 1320 120 Q1350 80 1380 130 Q1410 90 1440 140 L1440 220 Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 220' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M0 220 Q30 160 60 200 Q90 140 120 180 Q150 120 180 170 Q210 110 240 160 Q270 100 300 150 Q330 90 360 140 Q390 80 420 130 Q450 70 480 120 Q510 60 540 110 Q570 50 600 100 Q630 40 660 90 Q690 30 720 80 Q750 20 780 70 Q810 10 840 60 Q870 0 900 50 Q930 10 960 60 Q990 20 1020 70 Q1050 30 1080 80 Q1110 40 1140 90 Q1170 50 1200 100 Q1230 60 1260 110 Q1290 70 1320 120 Q1350 80 1380 130 Q1410 90 1440 140 L1440 220 Z'/%3E%3C/svg%3E");
  mask-size: 100% 100%;
  -webkit-mask-size: 100% 100%;
}

/* glass card */
.hero-glass {
  position: relative;
  z-index: 2;
  margin: 0 3rem 3rem;
  padding: 2.5rem 3rem;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  max-width: 680px;
}
body.dark .hero-glass {
  border-color: rgba(200,216,232,0.12);
  background: rgba(10,20,35,0.35);
}

.hero-title {
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--slate-dk);
  text-transform: uppercase;
}
body.dark .hero-title { color: #c8d8e8; }

/* decorative cross marks */
.cross {
  position: absolute;
  z-index: 2;
  font-size: 1rem;
  color: var(--slate);
  opacity: 0.35;
  font-weight: 300;
}
body.dark .cross { color: var(--ice); opacity: 0.25; }
.cross-1 { top: 22%; left: 60%; }
.cross-2 { top: 16%; left: 70%; }
.cross-3 { top: 35%; right: 18%; }
.cross-4 { top: 48%; right: 10%; }

.hero-domain {
  position: absolute;
  bottom: 1.75rem;
  right: 2.5rem;
  z-index: 2;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  color: var(--slate);
  opacity: 0.55;
}
body.dark .hero-domain { color: var(--ice); }

/* ── ABOUT ── */
.about {
  padding: 7rem 2.5rem;
  background: var(--off);
  transition: background 0.4s;
}
body.dark .about { background: #0f1520; }

.about-inner { max-width: 720px; margin: 0 auto; }
.about-label {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.5;
  margin-bottom: 1.25rem;
}
.about-heading {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 1.5rem;
  color: var(--slate-dk);
}
body.dark .about-heading { color: var(--ice); }
.about-text {
  font-size: 1.05rem;
  line-height: 1.75;
  opacity: 0.75;
  max-width: 560px;
}

/* ── PRODUCT ── */
.product {
  background: var(--dark-bg);
  color: #c8d8e8;
  padding: 7rem 2.5rem;
}
body.light .product { background: #111c2a; }

.product-header {
  max-width: 800px;
  margin: 0 auto 5rem;
  text-align: center;
}
.product-label {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0.6;
  margin-bottom: 1rem;
}
.product-name {
  font-size: clamp(3rem, 8vw, 6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: 1rem;
}
/* highlight ERU in lime */
.product-name::after { content: ''; }
.product-sub {
  font-size: 1.1rem;
  opacity: 0.7;
  margin-bottom: 0.75rem;
}
.product-desc {
  font-size: 1rem;
  opacity: 0.55;
  line-height: 1.6;
}
.product-desc strong { color: var(--accent); font-weight: 600; opacity: 1; }

/* caps grid */
.caps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
  max-width: 1000px;
  margin: 0 auto 5rem;
}
.cap-card {
  background: var(--dark-card);
  border: 1px solid var(--dark-brd);
  border-radius: 16px;
  padding: 2rem 1.75rem;
  transition: border-color 0.25s, transform 0.25s;
}
.cap-card:hover {
  border-color: rgba(200,216,232,0.35);
  transform: translateY(-4px);
}
.cap-icon {
  width: 48px;
  height: 48px;
  background: rgba(200,216,232,0.12);
  border: 1px solid rgba(200,216,232,0.25);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  color: var(--accent);
}
.cap-icon svg { width: 24px; height: 24px; }
.cap-card h3 {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin-bottom: 0.85rem;
  text-transform: uppercase;
}
.cap-card p {
  font-size: 0.92rem;
  line-height: 1.65;
  color: rgba(200,216,232,0.65);
}

/* kinetic */
.kinetic {
  max-width: 800px;
  margin: 0 auto;
  border-top: 1px solid var(--dark-brd);
  padding-top: 3.5rem;
}
.kinetic-title {
  font-size: 1.6rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 2rem;
}
.kinetic-title span { color: var(--accent); }
.kinetic-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.kinetic-list li {
  display: flex;
  gap: 0.5rem;
  padding-left: 1.25rem;
  position: relative;
  font-size: 0.95rem;
  line-height: 1.6;
}
.kinetic-list li::before {
  content: '▪';
  position: absolute;
  left: 0;
  color: var(--accent);
  font-size: 0.65rem;
  top: 0.4em;
  opacity: 0.6;
}
.k-label {
  color: var(--accent);
  font-weight: 600;
  white-space: nowrap;
  margin-right: 0.35rem;
}
.k-text { color: rgba(200,216,232,0.65); }

/* ── CONTACT ── */
.contact {
  padding: 7rem 2.5rem;
  background: var(--bg);
  transition: background 0.4s;
}
.contact-inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.contact-label {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.5;
  margin-bottom: 1.25rem;
}
.contact-heading {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 600;
  margin-bottom: 2rem;
  color: var(--slate-dk);
}
body.dark .contact-heading { color: var(--ice); }
.contact-email {
  display: inline-block;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  color: var(--slate);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: opacity 0.2s;
}
body.dark .contact-email { color: var(--ice); }
.contact-email:hover { opacity: 0.6; }

/* ── FOOTER ── */
.footer {
  padding: 1.5rem 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--nav-brd);
  font-size: 0.8rem;
  opacity: 0.5;
}
.footer-logo { font-weight: 700; letter-spacing: 0.08em; }

/* ── RESPONSIVE ── */
@media (max-width: 640px) {
  .nav { padding: 0 1.25rem; }
  .nav-links { display: none; }
  .hero-glass { margin: 0 1rem 2rem; padding: 1.75rem; }
  .about, .contact { padding: 5rem 1.25rem; }
  .product { padding: 5rem 1.25rem; }
  .caps-grid { grid-template-columns: 1fr; }
  .kinetic-list li { flex-direction: column; gap: 0.2rem; }
}