@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&display=swap');

:root {
  --noir: #0a0a0a;
  --blanc: #f4f1eb;
  --orange: #ff4d00;
  --orange2: #ff6b2b;
  --gris: #141414;
  --gris2: #1c1c1c;
  --gris3: #272727;
  --muted: #666;
  --border: rgba(255,255,255,0.07);
  --radius: 5px;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }

body {
  background: var(--noir);
  color: var(--blanc);
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  line-height: 1.6;
  overflow-x: hidden;
  cursor: none;
}

/* ── CURSOR ── */
#cur, #cur2 {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%,-50%);
}
#cur  { width:10px; height:10px; background:var(--orange); transition:transform .1s; }
#cur2 { width:34px; height:34px; border:1px solid rgba(255,77,0,.35); transition:transform .3s ease; }

/* ── SCROLL BAR ── */
::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:var(--gris); }
::-webkit-scrollbar-thumb { background:var(--orange); border-radius:2px; }

/* ── PROGRESS BAR ── */
#prog {
  position:fixed; top:0; left:0; height:2px;
  background:var(--orange); z-index:9998; width:0;
  box-shadow: 0 0 8px rgba(255,77,0,.6);
  transition: width .08s;
}

/* ── NAV ── */
nav {
  position: fixed; top:0; left:0; right:0; z-index:100;
  padding: 22px 64px;
  display: flex; align-items:center; justify-content:space-between;
  transition: all .3s;
}
nav.stuck {
  background: rgba(10,10,10,.96);
  backdrop-filter: blur(18px);
  padding: 14px 64px;
  border-bottom: 1px solid var(--border);
}
.nav-logo {
  font-family:'Syne',sans-serif; font-weight:800; font-size:21px;
  letter-spacing:-.5px; text-decoration:none; color:var(--blanc);
}
.nav-logo em { color:var(--orange); font-style:normal; }
.nav-links { display:flex; gap:32px; list-style:none; align-items:center; }
.nav-links a {
  color:rgba(244,241,235,.55); text-decoration:none;
  font-size:13.5px; font-weight:500; letter-spacing:.2px;
  transition: color .2s;
}
.nav-links a:hover, .nav-links a.active { color:var(--blanc); }
.nav-links .nav-btn {
  background:var(--orange); color:#fff !important;
  padding:9px 22px; border-radius:var(--radius);
  font-weight:600 !important;
  box-shadow: 0 4px 18px rgba(255,77,0,.3);
  transition: background .2s, transform .2s !important;
}
.nav-links .nav-btn:hover { background:var(--orange2) !important; transform:translateY(-1px); }

/* ── MOBILE NAV ── */
.nav-burger { display:none; background:none; border:none; cursor:none; flex-direction:column; gap:5px; }
.nav-burger span { display:block; width:24px; height:2px; background:var(--blanc); transition:.3s; }

/* ── SECTIONS ── */
section { padding: 96px 64px; }
.s-label {
  font-size:11px; font-weight:600; letter-spacing:3px;
  text-transform:uppercase; color:var(--orange); margin-bottom:14px;
}
.s-title {
  font-family:'Syne',sans-serif; font-weight:800;
  font-size:clamp(36px,4.5vw,58px);
  letter-spacing:-2px; line-height:1.02;
}

/* ── BUTTONS ── */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 32px; border-radius:var(--radius);
  font-family:'Syne',sans-serif; font-weight:700; font-size:14px;
  letter-spacing:.3px; text-decoration:none; border:none; cursor:none;
  transition: transform .2s, box-shadow .2s, background .2s;
}
.btn-orange {
  background:var(--orange); color:#fff;
  box-shadow: 0 6px 24px rgba(255,77,0,.28);
}
.btn-orange:hover { background:var(--orange2); transform:translateY(-2px); box-shadow:0 10px 32px rgba(255,77,0,.4); }
.btn-outline {
  background:transparent; color:var(--blanc);
  border:1px solid var(--border);
}
.btn-outline:hover { border-color:rgba(255,77,0,.4); background:rgba(255,77,0,.06); }

/* ── REVEAL ── */
.reveal { opacity:0; transform:translateY(36px); transition: opacity .65s ease, transform .65s ease; }
.reveal.in { opacity:1; transform:translateY(0); }

/* ── CARDS ── */
.card {
  background:var(--gris2); border:1px solid var(--border);
  border-radius:var(--radius); overflow:hidden;
  transition: border-color .3s, transform .3s;
}
.card:hover { border-color:rgba(255,77,0,.25); transform:translateY(-3px); }

/* ── FORMS ── */
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-row.full { grid-template-columns:1fr; }
.f-group { display:flex; flex-direction:column; gap:7px; }
.f-group label { font-size:11px; font-weight:600; letter-spacing:1px; text-transform:uppercase; color:var(--muted); }
.f-control {
  background:rgba(255,255,255,.04); border:1px solid var(--border);
  border-radius:var(--radius); padding:12px 15px;
  color:var(--blanc); font-family:'DM Sans',sans-serif; font-size:14px;
  outline:none; width:100%; transition: border-color .2s, background .2s;
}
.f-control:focus { border-color:var(--orange); background:rgba(255,77,0,.03); }
.f-control::placeholder { color:rgba(102,102,102,.7); }
select.f-control option { background:var(--gris2); }
textarea.f-control { resize:vertical; min-height:110px; }

/* ── TOAST ── */
#toast {
  position:fixed; bottom:28px; right:28px; z-index:9999;
  background:var(--gris2); border:1px solid rgba(255,77,0,.3);
  border-left:3px solid var(--orange);
  padding:14px 22px; border-radius:var(--radius);
  font-size:14px; max-width:320px;
  transform:translateY(90px); opacity:0;
  transition: all .4s cubic-bezier(.175,.885,.32,1.275);
}
#toast.show { transform:translateY(0); opacity:1; }

/* ── FOOTER ── */
footer {
  background:var(--gris); border-top:1px solid var(--border);
  padding:60px 64px 36px;
}
.footer-grid {
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr;
  gap:48px; padding-bottom:44px; border-bottom:1px solid var(--border);
  margin-bottom:28px;
}
.footer-brand p { font-size:13px; color:var(--muted); line-height:1.8; max-width:220px; margin-top:12px; }
.footer-col h5 { font-family:'Syne',sans-serif; font-size:13px; font-weight:700; margin-bottom:18px; }
.footer-col ul { list-style:none; display:flex; flex-direction:column; gap:10px; }
.footer-col a { color:var(--muted); text-decoration:none; font-size:13px; transition:color .2s; }
.footer-col a:hover { color:var(--blanc); }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; }
.footer-bottom p { font-size:12px; color:var(--muted); }
.socials { display:flex; gap:10px; }
.socials a {
  width:34px; height:34px; border:1px solid var(--border); border-radius:var(--radius);
  display:flex; align-items:center; justify-content:center;
  color:var(--muted); text-decoration:none; font-size:13px; font-weight:600;
  transition: border-color .2s, color .2s;
}
.socials a:hover { border-color:var(--orange); color:var(--orange); }

/* ── RESPONSIVE ── */
@media(max-width:900px) {
  nav, nav.stuck { padding:16px 24px; }
  section { padding:72px 24px; }
  footer { padding:48px 24px 28px; }
  .nav-links { display:none; }
  .nav-burger { display:flex; }
  .nav-links.open {
    display:flex; flex-direction:column; gap:0;
    position:fixed; top:0; left:0; right:0; bottom:0;
    background:rgba(10,10,10,.98); z-index:99;
    align-items:center; justify-content:center;
  }
  .nav-links.open a { font-size:22px; padding:14px 0; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:32px; }
  .form-row { grid-template-columns:1fr; }
}
