/* ══════════════════════════════════════════════════
   ZETAKAPPA FUTURES — Global Styles
   ══════════════════════════════════════════════════ */

/* ── DESIGN TOKENS ── */
:root {
  --black:   #ffffff;
  --deep:    #f4f8f7;
  --surface: #eef3f2;
  --card:    #ffffff;
  --card-h:  #f0faf7;
  --border:  rgba(0,0,0,.08);
  --border2: rgba(0,0,0,.04);
  --teal:    #00b894;
  --violet:  #6c63ff;
  --coral:   #ff6b6b;
  --gold:    #e2a813;
  --white:   #1c2d3a;
  --dim:     rgba(28,45,58,.55);
  --dim2:    rgba(28,45,58,.30);
  --D: 'Syne', sans-serif;
  --M: 'DM Mono', monospace;
  --I: 'Instrument Serif', serif;
}

/* ── RESET ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth }
body {
  background:var(--black);
  color:var(--white);
  font-family:var(--I);
  font-weight:400;
  line-height:1.6;
  overflow-x:hidden;
}
a { color:inherit; text-decoration:none }
img { max-width:100%; height:auto; display:block }

/* ── CANVAS ── */
#cvs { position:fixed; inset:0; z-index:0; pointer-events:none; background:transparent }

/* ── NAV ── */
nav {
  position:fixed; top:0; left:0; right:0; z-index:300;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 56px;
  border-bottom:1px solid transparent;
  transition:background .45s, border-color .45s;
}
nav.sc {
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border-color:var(--border);
}
.logo { display:flex; align-items:center; gap:11px }
.logo-img {
  width:36px; height:auto; flex-shrink:0;
  transition:opacity .2s;
}
.logo:hover .logo-img { opacity:.8 }
.logo-name { font-family:var(--D); font-weight:700; font-size:1.05rem; letter-spacing:.01em }
.logo-name em { font-style:normal; color:var(--teal) }
.nav-r { display:flex; align-items:center; gap:28px }
.nav-links { display:flex; align-items:center; gap:28px }
.nav-a {
  font-family:var(--M); font-size:.68rem; letter-spacing:.08em;
  color:var(--dim); text-transform:uppercase; transition:color .2s;
}
.nav-a:hover, .nav-a.active { color:var(--white) }
.lswitch {
  display:flex; background:rgba(0,0,0,.04);
  border:1px solid var(--border); border-radius:6px;
  overflow:hidden; padding:2px; gap:2px;
}
.lbtn {
  font-family:var(--M); font-size:.63rem; font-weight:500;
  letter-spacing:.08em; padding:5px 10px;
  border:none; background:transparent; color:var(--dim);
  cursor:pointer; border-radius:4px; transition:all .2s;
}
.lbtn.on { background:var(--teal); color:#fff }

/* ── HAMBURGER ── */
.hamburger {
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; cursor:pointer; padding:4px;
  z-index:400;
}
.hamburger span {
  display:block; width:22px; height:1.5px; background:var(--white);
  transition:all .3s;
}

.hamburger.open span:nth-child(1) { transform:rotate(45deg) translate(4.5px,4.5px) }
.hamburger.open span:nth-child(2) { opacity:0 }
.hamburger.open span:nth-child(3) { transform:rotate(-45deg) translate(4.5px,-4.5px) }

/* ── MOBILE NAV OVERLAY ── */
.mobile-nav {
  display:none; position:fixed; inset:0; z-index:350;
  background:rgba(255,255,255,.97); backdrop-filter:blur(24px);
  flex-direction:column; align-items:center; justify-content:center; gap:32px;
}
.mobile-nav.open { display:flex }
.mobile-nav a {
  font-family:var(--D); font-weight:600; font-size:1.3rem;
  letter-spacing:-.01em; color:var(--dim); transition:color .2s;
}
.mobile-nav a:hover { color:var(--white) }

/* ── SECTION SCAFFOLDING ── */
section { position:relative; z-index:1 }
.sec-inner { max-width:1360px; margin:0 auto; padding:108px 56px }
.sec-label {
  font-family:var(--M); font-size:.65rem; letter-spacing:.14em;
  color:var(--dim); text-transform:uppercase;
  margin-bottom:16px; display:flex; align-items:center; gap:10px;
}
.sec-label::before { content:''; width:14px; height:1px; background:currentColor }
.sec-h2 {
  font-family:var(--D); font-weight:700;
  font-size:clamp(1.9rem,3.2vw,2.8rem);
  letter-spacing:-.025em; line-height:1.08; margin-bottom:20px;
}
.sec-h2 .t { color:var(--teal) }
.sec-h2 .v { color:var(--violet) }
.sec-h2 .c { color:var(--coral) }
.sec-h2 .g { color:var(--gold) }

/* ── BUTTONS ── */
.btn-primary {
  font-family:var(--M); font-size:.73rem; letter-spacing:.05em; font-weight:500;
  padding:13px 26px; background:var(--teal); color:#fff;
  border:none; border-radius:6px; cursor:pointer; display:inline-block;
  transition:opacity .2s, transform .2s;
}
.btn-primary:hover { opacity:.85; transform:translateY(-1px) }
.btn-ghost {
  font-family:var(--M); font-size:.73rem; letter-spacing:.05em; font-weight:400;
  padding:13px 26px; background:transparent; color:var(--dim);
  border:1px solid var(--border); border-radius:6px; cursor:pointer; display:inline-block;
  transition:all .2s;
}
.btn-ghost:hover { color:var(--white); border-color:rgba(255,255,255,.2); transform:translateY(-1px) }

/* Button color variants */
.btn-violet { background:var(--violet); color:#fff }
.btn-coral  { background:var(--coral);  color:#fff }
.btn-gold   { background:var(--gold);   color:#fff }

/* ── FOOTER ── */
footer {
  position:relative; z-index:1;
  max-width:1360px; margin:0 auto;
  padding:44px 56px;
  border-top:1px solid var(--border);
}
.footer-top {
  display:flex; justify-content:space-between; align-items:flex-start;
  flex-wrap:wrap; gap:40px; margin-bottom:36px;
}
.footer-brand .logo { margin-bottom:12px }
.footer-tagline {
  font-family:var(--M); font-size:.62rem; letter-spacing:.07em;
  color:var(--dim2); max-width:30ch;
}
.footer-cols { display:flex; gap:64px; flex-wrap:wrap }
.footer-col h4 {
  font-family:var(--M); font-size:.58rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--dim2); margin-bottom:14px;
}
.footer-col a {
  display:block; font-family:var(--M); font-size:.65rem;
  letter-spacing:.05em; color:var(--dim); margin-bottom:8px;
  transition:color .2s;
}
.footer-col a:hover { color:var(--white) }
.footer-bottom {
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:16px;
  padding-top:24px; border-top:1px solid var(--border2);
}
.f-copy {
  font-family:var(--M); font-size:.62rem; letter-spacing:.07em; color:var(--dim2);
}
.f-links { display:flex; gap:28px; flex-wrap:wrap }
.f-links a {
  font-family:var(--M); font-size:.62rem; letter-spacing:.07em;
  color:var(--dim); transition:color .2s;
}
.f-links a:hover { color:var(--white) }

/* ── ANIMATIONS ── */
.fu { opacity:0; transform:translateY(22px); transition:opacity .8s ease, transform .8s ease }
.fu.vis { opacity:1; transform:translateY(0) }

/* ── LANGUAGE ── */
/* Italian (default) */
[data-it]      { display:block }
[data-en]      { display:none }
span[data-it]  { display:inline }
span[data-en]  { display:none }
a[data-it]     { display:inline-block }
a[data-en]     { display:none }
div.flex-lang[data-it] { display:flex }
div.flex-lang[data-en] { display:none }
/* English */
body.en [data-it]      { display:none }
body.en [data-en]      { display:block }
body.en span[data-it]  { display:none }
body.en span[data-en]  { display:inline }
body.en a[data-it]     { display:none }
body.en a[data-en]     { display:inline-block }
body.en div.flex-lang[data-it] { display:none }
body.en div.flex-lang[data-en] { display:flex }

/* ── RESPONSIVE ── */
@media(max-width:960px) {
  nav { padding:18px 24px }
  .nav-links { display:none }
  .hamburger { display:flex }
  .sec-inner { padding:72px 24px }
  footer { padding:32px 24px }
  .footer-top { flex-direction:column; gap:28px }
  .footer-cols { gap:36px }
}

@media(max-width:640px) {
  .sec-h2 { font-size:clamp(1.5rem,5vw,2rem) }
  .footer-cols { flex-direction:column; gap:24px }
}

/* ── REDUCED MOTION ── */
@media(prefers-reduced-motion:reduce) {
  .fu { opacity:1; transform:none; transition:none }
  #cvs { display:none }
}