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

:root {
  --bg:        #2a1248;
  --bg-2:      #331758;
  --bg-3:      #3d1e65;
  --surface:   #2a1845;
  --surface-2: #341f55;
  --amber:     #e8921a;
  --amber-lt:  #f5a93a;
  --amber-dim: #c4780e;
  --teal:      #4a9e8e;
  --teal-lt:   #5fbfad;
  --purple:    #7b4fd4;
  --purple-lt: #9b6fe8;
  --cream:     #f5efe6;
  --text:      #ede8f5;
  --text-2:    #b09ec8;
  --text-3:    #7a6a94;
  --border:    rgba(123,79,212,0.2);
  --border-2:  rgba(123,79,212,0.08);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'DM Sans', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
}
body::before {
  content: '';
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none; z-index: 0; opacity: 0.4;
}

/* ── AMBIENT ORBS ── */
.ambient { position: fixed; border-radius: 50%; filter: blur(100px); pointer-events: none; z-index: 0; }
.ambient-1 { width:600px; height:600px; background:radial-gradient(circle,rgba(123,79,212,0.12) 0%,transparent 70%); top:-200px; left:-200px; }
.ambient-2 { width:500px; height:500px; background:radial-gradient(circle,rgba(232,146,26,0.08) 0%,transparent 70%); top:30%; right:-150px; }
.ambient-3 { width:400px; height:400px; background:radial-gradient(circle,rgba(74,158,142,0.07) 0%,transparent 70%); bottom:10%; left:20%; }

/* ── NAV ── */
nav {
  position: fixed; top:0; left:0; right:0; z-index:100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 48px; height: 72px;
  background: rgba(26,10,46,0.88);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
}
.nav-logo { display:flex; align-items:center; gap:12px; text-decoration:none; }
.nav-logo-mark {
  width: 40px; height: 40px; border-radius: 50%;
  object-fit: cover; object-position: center;
  background: #f5efe6;
  border: 1.5px solid rgba(232,146,26,0.3); flex-shrink: 0;
  display: block;
}
.nav-logo-text {
  font-family: 'Syne', sans-serif; font-weight: 800;
  font-size: 1.05rem; letter-spacing: 0.07em; color: var(--text);
}
.nav-logo-text span { color: var(--amber); }
.nav-links { display:flex; align-items:center; gap:32px; list-style:none; }
.nav-links a {
  font-size: 0.875rem; font-weight: 500; color: var(--text-2);
  text-decoration: none; letter-spacing: 0.03em; transition: color 0.2s;
}
.nav-links a:hover { color: var(--text); }
.nav-links a.active { color: var(--amber); }
.nav-actions { display:flex; gap:12px; align-items:center; }

/* ── BUTTONS ── */
.btn {
  font-family: 'DM Sans', sans-serif; font-weight: 500; font-size: 0.875rem;
  border-radius: 8px; padding: 10px 20px; cursor: pointer;
  transition: all 0.2s; border: none; letter-spacing: 0.02em;
  text-decoration: none; display: inline-block;
}
.btn-ghost { background:transparent; border:1px solid var(--border); color:var(--text-2); }
.btn-ghost:hover { border-color:var(--purple); color:var(--text); }
.btn-primary { background:var(--amber); color:#1a0a2e; font-weight:600; }
.btn-primary:hover { background:var(--amber-lt); transform:translateY(-1px); box-shadow:0 8px 24px rgba(232,146,26,0.3); }

/* ── LAYOUT HELPERS ── */
.divider { height:1px; background:linear-gradient(90deg,transparent,var(--border),transparent); margin:0 48px; position:relative; z-index:1; }
section { position:relative; z-index:1; padding:100px 48px; overflow:hidden; }
.section-label { font-size:0.75rem; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--amber); margin-bottom:16px; }
h2 { font-family:'Syne',sans-serif; font-size:clamp(1.8rem,3vw,2.6rem); font-weight:800; letter-spacing:-0.02em; line-height:1.1; margin-bottom:16px; }
.section-sub { font-size:1rem; color:var(--text-2); line-height:1.7; max-width:500px; font-weight:300; }

/* ── FOOTER ── */
footer {
  position: relative; z-index:1;
  padding: 40px 48px;
  border-top: 1px solid var(--border-2);
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px;
}
.footer-note { font-size:0.8rem; color:var(--text-3); line-height:1.7; }
.footer-note a { color:var(--text-2); text-decoration:none; transition:color 0.2s; }
.footer-note a:hover { color:var(--text); }
.footer-links { display:flex; gap:24px; flex-wrap:wrap; }
.footer-links a { font-size:0.82rem; color:var(--text-3); text-decoration:none; transition:color 0.2s; letter-spacing:0.02em; }
.footer-links a:hover { color:var(--text-2); }

/* ── MOBILE ── */
@media (max-width: 860px) {
  nav { padding: 0 24px; }
  .nav-links { gap: 20px; }
  .nav-actions .btn-ghost { display: none; }
}
@media (max-width: 640px) {
  nav { flex-wrap: wrap; height: auto; padding: 16px 24px; gap: 12px; }
  .nav-links { order: 3; width: 100%; gap: 16px; flex-wrap: wrap; }
  section { padding: 64px 24px; }
  .divider { margin: 0 24px; }
  footer { padding: 32px 24px; flex-direction: column; align-items: flex-start; }
}