/* ===== Reset & Variables ===== */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }

:root {
  --bg: #0f172a;
  --bg-alt: #13203a;
  --bg-card: #1c2c4d;
  --bg-card-hover: #233660;
  --bg-chip: rgba(255,255,255,0.05);
  --white: #FFFFFF;
  --text: rgba(255,255,255,0.72);
  --muted: rgba(255,255,255,0.45);
  --accent: #2563EB;
  --accent-hover: #1D4ED8;
  --accent-2: #6366F1;
  --accent-soft: rgba(37,99,235,0.12);
  --radius: 16px;
  --radius-sm: 12px;
  --shadow: 0 8px 30px rgba(0,0,0,0.32);
  --shadow-lg: 0 20px 56px rgba(0,0,0,0.45);
  --shadow-blue: 0 14px 44px rgba(37,99,235,0.20);
  --nav-h: 72px;
  --max-w: 1200px;
  --section-py: 140px;
}

html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; }

body {
  font-family: 'Pretendard','Pretendard Variable',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo',sans-serif;
  background: var(--bg);
  color: var(--white);
  overflow-x: hidden;
  line-height: 1.6;
}

a { text-decoration:none; color:inherit; }
ul { list-style:none; }
img { max-width:100%; display:block; }
h1,h2,h3,p,span { word-break:keep-all; overflow-wrap:break-word; }

.container { max-width:var(--max-w); margin:0 auto; padding:0 24px; }

/* ===== Shared Typography ===== */
.section-label {
  font-family:'Inter',sans-serif;
  font-size:12px; font-weight:600;
  letter-spacing:4px; color:var(--accent);
  text-transform:uppercase; margin-bottom:16px;
}
.section-title {
  font-size:clamp(28px,4vw,40px);
  font-weight:700; letter-spacing:-0.5px; margin-bottom:16px;
}
.section-desc {
  font-size:16px; color:var(--text);
  line-height:1.8; max-width:520px;
}

/* ===== Reveal ===== */
.reveal {
  opacity:0; transform:translateY(32px);
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}
.reveal.visible, .reveal.revealed { opacity:1; transform:translateY(0); }
.reveal-d1, .reveal-delay-1 { transition-delay:.1s; }
.reveal-d2, .reveal-delay-2 { transition-delay:.2s; }
.reveal-d3, .reveal-delay-3 { transition-delay:.3s; }
.reveal-d4, .reveal-delay-4 { transition-delay:.4s; }

@keyframes scrollPulse {
  0%   { transform:scaleY(0); transform-origin:top; }
  50%  { transform:scaleY(1); transform-origin:top; }
  51%  { transform-origin:bottom; }
  100% { transform:scaleY(0); transform-origin:bottom; }
}

/* ===== Navigation ===== */
.nav {
  position:fixed; top:0; left:0; right:0;
  z-index:100; height:var(--nav-h);
  transition: background .4s, box-shadow .4s;
}
.nav.scrolled {
  background:rgba(15,23,42,.82);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  box-shadow:0 8px 30px rgba(0,0,0,.28);
}
.nav-inner {
  max-width:var(--max-w); margin:0 auto; padding:0 24px;
  height:100%; display:flex; align-items:center; justify-content:space-between;
}
.nav-logo { display:flex; align-items:center; }
.logo-img { height:30px; width:auto; }
.logo-img-sm { height:22px; width:auto; opacity:.5; }

.nav-links { display:flex; gap:36px; }
.nav-links a {
  font-size:14px; color:var(--text);
  letter-spacing:.5px; transition:color .3s;
}
.nav-links a:hover { color:var(--white); }

/* Back Link */
.nav-back {
  display:inline-flex; align-items:center; gap:6px;
  font-size:13px; color:var(--muted);
  transition:color .3s;
}
.nav-back:hover { color:var(--white); }
.nav-back svg { width:16px; height:16px; }

/* Mobile Toggle */
.mobile-toggle {
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; cursor:pointer; padding:4px; z-index:101;
}
.mobile-toggle span {
  display:block; width:22px; height:1.5px;
  background:var(--white); transition:all .3s;
}
.mobile-toggle.active span:nth-child(1) { transform:rotate(45deg) translate(4px,5px); }
.mobile-toggle.active span:nth-child(2) { opacity:0; }
.mobile-toggle.active span:nth-child(3) { transform:rotate(-45deg) translate(4px,-5px); }

.mobile-nav {
  position:fixed; inset:0; z-index:99;
  background:rgba(15,23,42,.98); backdrop-filter:blur(30px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:32px;
  opacity:0; pointer-events:none; transition:opacity .4s;
}
.mobile-nav.open { opacity:1; pointer-events:all; }
.mobile-nav a {
  font-size:24px; font-weight:300; color:var(--text);
  letter-spacing:1px; transition:color .3s;
}
.mobile-nav a:hover { color:var(--white); }

/* ===== Footer ===== */
.footer {
  padding:48px 0 32px; background:var(--bg-alt);
}
.footer-inner {
  display:flex; justify-content:space-between; align-items:center; margin-bottom:24px;
}
.footer-logo {
  font-family:'Inter',sans-serif;
  font-size:15px; font-weight:700; letter-spacing:1px; margin-bottom:4px;
}
.footer-address { font-size:12px; color:var(--muted); }
.footer-links { display:flex; gap:24px; }
.footer-links a { font-size:12px; color:var(--muted); transition:color .3s; }
.footer-links a:hover { color:var(--text); }
.footer-bottom { padding-top:24px; }
.footer-bottom p { font-size:11px; color:var(--muted); }
/* Legacy footer */
.footer-copy { font-size:12px; color:var(--muted); }
.rion-logo-sm { width:80px; height:22px; }

/* ===== Cards (shared) ===== */
.card {
  background:var(--bg-card); border-radius:var(--radius);
  box-shadow:var(--shadow);
  transition:all .4s cubic-bezier(.16,1,.3,1);
}
.card:hover { background:var(--bg-card-hover); transform:translateY(-3px); box-shadow:var(--shadow-lg); }

/* ===== Responsive (shared) ===== */
@media (max-width:768px) {
  :root { --nav-h:64px; --section-py:100px; }
  .nav-links { display:none; }
  .mobile-toggle { display:flex; }
  .section-desc br, .contact-desc br, .contact-title br { display:none; }
  .footer-inner { flex-direction:column; align-items:flex-start; gap:16px; }
}