/* ════════════════════════════════════════
   CATANA CITY — Shared Stylesheet
════════════════════════════════════════ */
:root {
  --blue:   #1a6fff;
  --blue-l: #4d8fff;
  --blue-b: #6ab0ff;
  --blue-d: #0d4db5;
  --glow:   rgba(26,111,255,.28);
  --sub:    rgba(26,111,255,.09);
  --bdr:    rgba(26,111,255,.18);
  --bdr-s:  rgba(26,111,255,.45);

  --bg0: #050c1a;
  --bg1: #080f20;
  --bg2: #0c1428;
  --bg3: #101930;

  --txt:   #dde8ff;
  --muted: #6a7fa8;

  --ease: cubic-bezier(0.19,1,0.22,1);
  --spring: cubic-bezier(0.34,1.56,0.64,1);
}

*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:'Inter',sans-serif;
  background:var(--bg0);
  color:var(--txt);
  overflow-x:hidden;
  padding-top:64px;
}
a { text-decoration:none; color:inherit; }
button { cursor:pointer; font-family:inherit; }

/* ── NAV ── */
#nav {
  position:fixed; top:0; left:0; right:0; z-index:300;
  height:64px;
  background:rgba(5,12,26,.88);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--bdr);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 2.5rem;
  transition:background .4s;
}
.nav-logo { display:flex; align-items:center; gap:11px; user-select:none; }
.logo-wrap {
  width:40px; height:40px; border-radius:9px; overflow:hidden;
  border:1px solid var(--bdr-s); background:var(--sub);
  display:flex; align-items:center; justify-content:center;
  transition:box-shadow .3s; flex-shrink:0;
}
.logo-wrap:hover { box-shadow:0 0 18px var(--glow); }
.logo-wrap img { width:100%; height:100%; object-fit:cover; display:block; }
.logo-fallback { font-family:'Bebas Neue',cursive; font-size:18px; color:var(--blue-b); letter-spacing:1px; }
.logo-text { font-family:'Bebas Neue',cursive; font-size:22px; letter-spacing:3px; color:var(--blue-b); line-height:1; }
.logo-sub  { font-size:9px; letter-spacing:2px; color:var(--muted); text-transform:uppercase; }

.nav-links { display:flex; }
.nav-links a {
  color:var(--muted); font-family:'Rajdhani',sans-serif;
  font-weight:600; font-size:13px; letter-spacing:1.5px; text-transform:uppercase;
  padding:0 1.1rem; height:64px; display:flex; align-items:center;
  position:relative;
}
.nav-links a::after {
  content:''; position:absolute; bottom:-1px; left:50%; right:50%;
  height:2px; background:var(--blue);
  transition:left .3s var(--ease),right .3s var(--ease);
}
.nav-links a:hover::after,
.nav-links a.active::after { left:0; right:0; }
.nav-links a:hover,
.nav-links a.active { color:var(--blue-b); }

.nav-actions { display:flex; gap:10px; align-items:center; }
.btn-ghost {
  background:transparent; border:1px solid var(--bdr-s);
  color:var(--blue-b); font-family:'Rajdhani',sans-serif;
  font-weight:700; font-size:12px; letter-spacing:1.5px; text-transform:uppercase;
  padding:7px 18px; border-radius:5px;
  transition:background .2s,transform .15s;
}
.btn-ghost:hover { background:var(--sub); transform:translateY(-1px); }
.btn-cta {
  background:var(--blue); border:none; color:#fff;
  font-family:'Rajdhani',sans-serif; font-weight:700;
  font-size:12px; letter-spacing:1.5px; text-transform:uppercase;
  padding:8px 22px; border-radius:5px;
  box-shadow:0 0 20px var(--glow);
  transition:background .2s,box-shadow .2s,transform .15s;
}
.btn-cta:hover { background:var(--blue-l); box-shadow:0 0 32px var(--glow); transform:translateY(-1px); }

.burger {
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; padding:4px;
}
.burger span {
  width:24px; height:2px; background:var(--muted);
  border-radius:2px; transition:all .3s;
}
.burger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity:0; }
.burger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* ── SECTION COMMONS ── */
section { padding:5.5rem 2rem; }
.s-in  { max-width:1100px; margin:0 auto; }
.s-lbl { font-family:'Rajdhani',sans-serif; font-size:11px; letter-spacing:3px; text-transform:uppercase; color:var(--blue-b); margin-bottom:.7rem; }
.s-ttl { font-family:'Bebas Neue',cursive; font-size:clamp(2rem,5vw,3.5rem); letter-spacing:3px; color:#fff; margin-bottom:.8rem; }
.s-ttl span { color:var(--blue-b); }
.s-div { width:44px; height:2px; background:var(--blue); margin-bottom:1.5rem; }
.s-desc { color:var(--muted); max-width:520px; line-height:1.78; margin-bottom:3rem; font-size:.95rem; }

/* ── REVEAL ── */
.reveal { opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease),transform .7s var(--ease); }
.reveal.visible { opacity:1; transform:translateY(0); }

/* ── BUTTONS ── */
.btn-primary {
  background:var(--blue); color:#fff;
  font-family:'Rajdhani',sans-serif; font-weight:700;
  font-size:13px; letter-spacing:2px; text-transform:uppercase;
  padding:14px 36px; border:none; border-radius:5px;
  box-shadow:0 0 26px var(--glow);
  transition:background .2s,transform .15s,box-shadow .2s;
  display:inline-block;
}
.btn-primary:hover { background:var(--blue-l); transform:translateY(-2px); box-shadow:0 0 42px var(--glow); }
.btn-secondary {
  background:transparent; color:var(--txt);
  font-family:'Rajdhani',sans-serif; font-weight:700;
  font-size:13px; letter-spacing:2px; text-transform:uppercase;
  padding:13px 36px; border:1px solid rgba(255,255,255,.18); border-radius:5px;
  transition:border-color .2s,color .2s,transform .15s;
  display:inline-block;
}
.btn-secondary:hover { border-color:var(--blue-b); color:var(--blue-b); transform:translateY(-2px); }

/* ── FOOTER ── */
footer { background:var(--bg2); border-top:1px solid var(--bdr); padding:4rem 2rem 2rem; }
.foot-in  { max-width:1100px; margin:0 auto; }
.foot-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:3rem; margin-bottom:3rem; }
.foot-brand p { font-size:.875rem; color:var(--muted); line-height:1.78; margin:1rem 0 1.5rem; }
.foot-col h4 {
  font-family:'Rajdhani',sans-serif; font-weight:700;
  font-size:10px; letter-spacing:2px; text-transform:uppercase;
  color:var(--blue-b); margin-bottom:.9rem;
}
.foot-col a { display:block; color:var(--muted); font-size:.875rem; padding:3px 0; transition:color .2s,padding-left .2s; }
.foot-col a:hover { color:var(--txt); padding-left:4px; }
.foot-bottom {
  border-top:1px solid var(--bdr); padding-top:1.5rem;
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:1rem;
}
.foot-bottom p { font-size:11px; color:var(--muted); }
.social-row { display:flex; gap:8px; }
.soc-btn {
  width:34px; height:34px; border-radius:6px;
  background:rgba(255,255,255,.03); border:1px solid var(--bdr);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; transition:all .2s;
}
.soc-btn:hover { border-color:var(--bdr-s); background:var(--sub); transform:translateY(-2px); }

/* ── MOBILE ── */
@media(max-width:900px) { .foot-grid { grid-template-columns:1fr 1fr; } }
@media(max-width:768px) {
  #nav { padding:0 1.2rem; }
  .nav-links {
    display:none; position:fixed; top:64px; left:0; right:0;
    background:rgba(5,12,26,.97); flex-direction:column;
    border-bottom:1px solid var(--bdr); z-index:299;
    animation:mobileIn .3s var(--ease);
  }
  .nav-links.open { display:flex; }
  @keyframes mobileIn { from{opacity:0;transform:translateY(-10px)} to{opacity:1;transform:translateY(0)} }
  .nav-links a { height:auto; padding:1rem 2rem; border-bottom:1px solid var(--bdr); }
  .nav-actions .btn-ghost { display:none; }
  .burger { display:flex; }
  .foot-grid { grid-template-columns:1fr; gap:2rem; }
}