/* ═══════════════════════════════════════════════════════════
   shared.css — Variables, Reset, Nav, Footer, Utilities
   ═══════════════════════════════════════════════════════════ */

/* ── THEME VARIABLES ──────────────────────────────────────── */
:root {
  --orange:    #FF6B00;
  --orange-w:  #FF8533;
  --bg:        #08080B;
  --surface:   #111116;
  --surf2:     #1A1A21;
  --border:    rgba(255,255,255,0.07);
  --border-o:  rgba(255,107,0,0.28);
  --text:      #F0F0F4;
  --muted:     #7A7A8C;
  --head:      #FFFFFF;
}

[data-theme="light"] {
  --bg:       #F5F5F8;
  --surface:  #FFFFFF;
  --surf2:    #EDEDF2;
  --border:   rgba(0,0,0,0.08);
  --border-o: rgba(255,107,0,0.22);
  --text:     #0E0E14;
  --muted:    #60606E;
  --head:     #0E0E14;
}

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

body {
  font-family: 'Outfit', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  transition: background .25s, color .25s;
}

/* ── NAVIGATION ────────────────────────────────────────────── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: space-between;
  padding: .85rem 5%;
  background: rgba(8,8,11,.82);
  backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--border);
  transition: background .3s, border-color .25s;
}
[data-theme="light"] nav                 { background: rgba(245,245,248,.88); }
nav.scrolled                             { background: rgba(8,8,11,.98) !important; }
[data-theme="light"] nav.scrolled       { background: rgba(245,245,248,.98) !important; }

.nav-logo { display:flex; align-items:center; gap:.65rem; text-decoration:none; }
.nav-logo img { height:38px; width:38px; object-fit:cover; border-radius:50%; border:2px solid var(--orange); }
.nav-logo-text { font-family:'Anton',sans-serif; font-size:1.2rem; color:var(--orange); letter-spacing:1px; }

.nav-center { display:flex; align-items:center; gap:1.8rem; list-style:none; }
.nav-center a {
  text-decoration:none; color:var(--muted); font-weight:500; font-size:.86rem;
  position:relative; transition:color .2s;
}
.nav-center a::after {
  content:''; position:absolute; bottom:-3px; left:0;
  width:0; height:2px; background:var(--orange); transition:width .25s;
}
.nav-center a:hover           { color:var(--text); }
.nav-center a:hover::after    { width:100%; }

/* Mobile menu */
.nav-center.open {
  display:flex; flex-direction:column;
  position:absolute; top:62px; left:0; right:0;
  background:rgba(8,8,11,.98);
  padding:1.5rem 5%; border-bottom:1px solid var(--border);
  gap:1.1rem; z-index:200;
}
[data-theme="light"] .nav-center.open { background:rgba(245,245,248,.98); }

.nav-right { display:flex; align-items:center; gap:.9rem; }

/* Language toggle */
.lang-toggle { display:flex; align-items:center; gap:.25rem; }
.lang-btn {
  background:none; border:none; cursor:pointer;
  font-family:'Outfit',sans-serif; font-size:.8rem; font-weight:600;
  color:var(--muted); padding:.22rem .45rem; border-radius:5px;
  transition:all .2s; letter-spacing:.5px;
}
.lang-btn.active    { color:var(--orange); background:rgba(255,107,0,.10); }
.lang-btn:hover:not(.active) { color:var(--text); }
.lang-sep { color:var(--border); font-size:.9rem; user-select:none; }

/* Theme toggle */
.theme-btn {
  width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,.06); border:1px solid var(--border);
  cursor:pointer; font-size:.95rem;
  display:flex; align-items:center; justify-content:center;
  transition:all .2s;
}
[data-theme="light"] .theme-btn { background:rgba(0,0,0,.05); }
.theme-btn:hover { background:rgba(255,107,0,.10); border-color:var(--border-o); }

/* Nav CTA */
.nav-cta {
  background:var(--orange); color:#FFF !important; text-decoration:none;
  padding:.48rem 1.1rem; border-radius:8px; font-size:.84rem; font-weight:600;
  white-space:nowrap; transition:background .2s;
}
.nav-cta:hover { background:var(--orange-w); }

/* Hamburger */
.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:4px; }
.hamburger span { width:22px; height:2px; background:var(--text); border-radius:2px; transition:.3s; }

/* ── BUTTONS ───────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.8rem 1.7rem; border-radius:10px;
  font-size:.93rem; font-weight:600; font-family:'Outfit',sans-serif;
  text-decoration:none; cursor:pointer; border:none; transition:all .22s;
}
.btn-primary {
  background:var(--orange); color:#FFF;
  box-shadow:0 8px 28px rgba(255,107,0,.38);
}
.btn-primary:hover { background:var(--orange-w); transform:translateY(-2px); box-shadow:0 14px 36px rgba(255,107,0,.5); }
.btn-ghost { background:rgba(255,255,255,.06); color:var(--text); border:1px solid var(--border); }
[data-theme="light"] .btn-ghost { background:rgba(0,0,0,.05); }
.btn-ghost:hover { background:rgba(255,255,255,.10); transform:translateY(-2px); }
[data-theme="light"] .btn-ghost:hover { background:rgba(0,0,0,.08); }
.btn-white { background:#FFF; color:var(--orange); font-weight:700; }
.btn-white:hover { background:rgba(255,255,255,.9); transform:translateY(-2px); }
.btn-lg { padding:.92rem 2rem; font-size:1rem; }

/* ── FORM ELEMENTS ─────────────────────────────────────────── */
.fgroup { margin-bottom:.9rem; }
.flabel {
  display:block; font-size:.72rem; font-weight:600; color:var(--muted);
  text-transform:uppercase; letter-spacing:.5px; margin-bottom:.36rem;
}
.finput {
  width:100%; padding:.76rem 1rem;
  background:var(--surface); border:1px solid var(--border);
  border-radius:10px; color:var(--text); font-size:.91rem;
  font-family:'Outfit',sans-serif; outline:none;
  transition:border-color .2s, background .25s;
}
.finput:focus { border-color:var(--orange); }
.finput::placeholder { color:rgba(122,122,140,.4); }
[data-theme="light"] .finput::placeholder { color:rgba(96,96,110,.4); }
.frow { display:grid; grid-template-columns:1fr 1fr; gap:.85rem; }
.fsubmit {
  width:100%; padding:.88rem; margin-top:.4rem;
  background:var(--orange); color:#FFF; border:none;
  border-radius:10px; font-size:.96rem; font-weight:700;
  font-family:'Outfit',sans-serif; cursor:pointer;
  transition:background .2s, transform .2s;
}
.fsubmit:hover { background:var(--orange-w); transform:translateY(-1px); }
.fnote { font-size:.71rem; color:var(--muted); text-align:center; margin-top:.85rem; line-height:1.5; }
.fnote a { color:var(--orange); text-decoration:none; }

/* ── SECTION UTILITIES ─────────────────────────────────────── */
.sec       { padding:6rem 5%; max-width:1240px; margin:0 auto; }
.sec-wrap  { padding:6rem 5%; }
.sec-inner { max-width:1240px; margin:0 auto; }
.sec-header { margin-bottom:3.2rem; }
.sec-tag   { display:inline-block; color:var(--orange); font-size:.73rem; font-weight:700; text-transform:uppercase; letter-spacing:2px; margin-bottom:.65rem; }
.sec-title { font-family:'Anton',sans-serif; font-size:clamp(1.9rem,4.5vw,3.2rem); line-height:1.05; color:var(--head); transition:color .25s; }
.sec-sub   { font-size:.93rem; color:var(--muted); line-height:1.75; margin-top:.65rem; max-width:480px; }

/* ── REVEAL ANIMATION ──────────────────────────────────────── */
.rv { opacity:0; transform:translateY(26px); transition:opacity .6s ease, transform .6s ease; }
.rv.in { opacity:1; transform:translateY(0); }
.d1 { transition-delay:.1s; } .d2 { transition-delay:.2s; } .d3 { transition-delay:.3s; }

/* ── FOOTER — always dark ──────────────────────────────────── */
footer {
  background:#050508; padding:4rem 5% 2rem;
  border-top:1px solid rgba(255,255,255,.06);
}
.foot-inner { max-width:1240px; margin:0 auto; }
.foot-top {
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:3rem;
  padding-bottom:3rem; border-bottom:1px solid rgba(255,255,255,.06);
}
.foot-brand img { height:48px; border-radius:13px; margin-bottom:.9rem; }
.foot-brand p { font-size:.84rem; color:#7A7A8C; line-height:1.65; margin-bottom:1rem; }
.foot-domain { display:inline-flex; align-items:center; gap:.4rem; color:var(--orange); font-size:.82rem; font-weight:600; text-decoration:none; }
.foot-col h4 { font-family:'Anton',sans-serif; font-size:.82rem; color:#FFF; letter-spacing:1px; text-transform:uppercase; margin-bottom:1rem; }
.foot-col ul { list-style:none; display:flex; flex-direction:column; gap:.55rem; }
.foot-col a { color:#7A7A8C; text-decoration:none; font-size:.83rem; transition:color .2s; }
.foot-col a:hover { color:var(--orange); }
.foot-bottom { padding-top:1.6rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.foot-copy { font-size:.78rem; color:rgba(122,122,140,.5); }
.foot-legal { display:flex; gap:1.4rem; }
.foot-legal a { font-size:.78rem; color:rgba(122,122,140,.5); text-decoration:none; transition:color .2s; }
.foot-legal a:hover { color:var(--orange); }

/* ── RESPONSIVE: NAV & FOOTER ──────────────────────────────── */
@media (max-width:860px) {
  .nav-center { display:none; }
  .hamburger  { display:flex; }
}
@media (max-width:1024px) {
  .foot-top { grid-template-columns:1fr 1fr; }
}
@media (max-width:640px) {
  .foot-top { grid-template-columns:1fr; }
  .nav-right { gap:.5rem; }
  .lang-btn  { font-size:.74rem; padding:.18rem .35rem; }
  .frow      { grid-template-columns:1fr; }
}