/* Base layout: resets, body/background, body glow, container, header, footer */
*{box-sizing:border-box}
html,body{height:100%; overflow-x:hidden;}
body{
  margin:0; color:var(--text); 
  background: radial-gradient(1200px 800px at 10% 10%, rgba(168,85,247,0.12), rgba(168,85,247,0) 60%),
            radial-gradient(1000px 700px at 90% 30%, rgba(6,182,212,0.12), rgba(6,182,212,0) 60%),
            linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 100vh);
  background-attachment: fixed;
  background-size: 100% 100%;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  display:flex; flex-direction:column; min-height:100svh;
  width:100%;
}

main{ flex:1; }

/* Floating gradient orbs */
.body-glow::before, .body-glow::after{
  content:""; position:fixed; inset:auto; width:52vmax; height:52vmax; filter: blur(80px);
  background: radial-gradient(circle at 30% 30%, rgba(168,85,247,0.55), rgba(168,85,247,0) 60%),
              radial-gradient(circle at 70% 70%, rgba(99,102,241,0.55), rgba(99,102,241,0) 60%);
  border-radius: 50%; z-index:-1; opacity:.3; animation: float 24s ease-in-out infinite;
  overflow: hidden;
}
.body-glow::after{ left:auto; right:-10vmax; top:-10vmax; animation-duration: 28s; opacity:.25;}
.body-glow::before{ left:-12vmax; bottom:-12vmax;}

/* Prevent horizontal overflow from orbs on mobile */
@media (max-width: 640px) {
  .body-glow::before, .body-glow::after {
    width: 80vw;
    height: 80vw;
  }
  .body-glow::after { right: -20vw; top: -20vw; }
  .body-glow::before { left: -20vw; bottom: -20vw; }
}

.container{ max-width:1280px; margin:0 auto; padding: 0 24px; }

/* Header (minimal) */
.header{ position:sticky; top:0; backdrop-filter:saturate(160%) blur(8px); background: rgba(10,15,30,0.35); border-bottom:1px solid var(--border); z-index:20; }
.nav{ display:flex; align-items:center; gap:16px; padding:14px 0; }
.nav .brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text); font-weight:700; letter-spacing:0.2px; }
.nav .brand img{ width:28px; height:28px; filter: drop-shadow(0 0 10px rgba(99,102,241,0.6)); }
.nav .brand .space{ color:#00ff32 }
.nav .spacer{ flex:1 }

/* Desktop adjustments */
@media (min-width: 721px){
  .nav .brand{ font-size: 1.5rem; }
}

/* Responsive navigation */
.nav .nav-links{ display:flex; gap:12px; align-items:center; }
.nav .nav-toggle{ display:none; appearance:none; background:none; border:0; color:var(--text); padding:8px; border-radius:10px; }
.nav .nav-toggle svg{ display:block }
@media (max-width: 720px){
  .nav{ position:relative }
  .nav .nav-toggle{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border:1px solid var(--border); background: linear-gradient(180deg, rgba(17,25,46,0.6), rgba(13,20,40,0.45)); }
  /* Marketing layout: hide nav-links behind hamburger on mobile */
  .nav .nav-links:not(:has(.menu)){ position:absolute; right:0; top:calc(100% + 8px); display:none; flex-direction:column; gap:10px; width:min(280px, calc(100vw - 48px)); padding:12px; border:1px solid var(--border); border-radius:12px; background: linear-gradient(180deg, rgba(16,23,44,0.7), rgba(13,20,40,0.55)); box-shadow: var(--shadow); z-index:30; }
  .nav .nav-links:not(:has(.menu)).open, .nav .nav-toggle[aria-expanded="true"] + .nav-links:not(:has(.menu)){ display:flex }
  /* Authenticated layout: always show nav-links with profile menu */
  .nav .nav-links:has(.menu){ display:flex; }
  .header {padding: 16px;}
}

/* Footer */
.footer{ border-top:1px solid var(--border); padding: 22px 0; color: var(--muted); }
.footer .row{ display:flex; align-items:center; gap:16px; }
.footer .links{ display:flex; gap:16px; margin-left:auto; }
.footer a{ color:var(--muted); text-decoration:none; }
.footer a:hover{ color:var(--text) }
.footer .logo{ width:22px; height:22px; filter: drop-shadow(0 0 12px rgba(99,102,241,0.5)); }

/* Mobile adjustments (iPhone) */
@media (max-width: 480px){
  .container{ padding: 0 12px; max-width: 100%; }
  /* Footer: wrap and center links on narrow screens */
  .footer .row{ flex-wrap: wrap; align-items: center; gap: 10px 16px; }
  .footer .links{ margin-left: 0; width: 100%; justify-content: center; flex-wrap: wrap; }
}

/* Respect iOS safe area when available */
@supports (padding: max(0px)){
  .container{
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
  /* Give the footer a bit more room above the Home indicator on iOS */
  .footer{ padding-bottom: max(22px, env(safe-area-inset-bottom)); }
}