/* DashPath.org — v1.3 SideDrawer + Splash */
:root{
  --bg:#0b1220;
  --ink:#e8f3ff;
  --muted:#b7c5d6;
  --brand:#0ea5e9;
  --brand-deep:#1d4ed8;
  --gold:#f59e0b;
  --card:#0f172a;
  --ring: 1px solid rgba(255,255,255,.08);
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color:var(--ink); background: radial-gradient(1200px 600px at 70% -10%, rgba(14,165,233,.25), transparent),
                     radial-gradient(900px 500px at -10% 30%, rgba(29,78,216,.25), transparent),
                     var(--bg);
  line-height:1.6;
}

.container{width:min(1100px, 92%); margin:0 auto}

header{position:sticky; top:0; z-index:20; backdrop-filter: blur(10px); background: rgba(11,18,32,.5); border-bottom:var(--ring)}
.nav{display:flex; align-items:center; justify-content:space-between; padding:10px 0}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--ink)}
.brand img{width:36px; height:36px}
.brand span{font-weight:700; letter-spacing:.2px}

nav a{color:var(--muted); text-decoration:none; margin-left:18px; font-weight:600}
nav a.cta{color:black; background:linear-gradient(90deg, var(--gold), #fbbf24); padding:10px 14px; border-radius:10px}

.hero{padding:80px 0 50px}
.hero-inner{display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:center}
.hero h1{font-size: clamp(32px, 3.4vw + 12px, 54px); line-height:1.1; margin:0 0 12px}
.hero p{color:var(--muted); font-size: clamp(16px, 1vw + 12px, 20px); margin: 0 0 24px}
.hero .cta-row{display:flex; gap:14px; flex-wrap:wrap}
.button{
  display:inline-flex; align-items:center; gap:10px; padding:12px 16px; border-radius:12px; font-weight:700; text-decoration:none;
  background:linear-gradient(90deg, var(--brand), var(--brand-deep)); color:white;
  box-shadow: var(--shadow);
}
.button.alt{background:transparent; border:2px solid rgba(255,255,255,.15); color:var(--ink)}

.card-row{display:grid; grid-template-columns: repeat(3, 1fr); gap:18px}
.card{background:rgba(255,255,255,.03); border:var(--ring); border-radius:14px; padding:18px; box-shadow: var(--shadow)}
.card h3{margin:6px 0 8px}
.card p{margin:0; color:var(--muted)}

.section{padding:60px 0}
.section h2{font-size: clamp(24px, 2.2vw + 10px, 36px); margin:0 0 8px}
.section .sub{color:var(--muted); margin-top:0}

.feature{display:grid; grid-template-columns: 1.1fr .9fr; gap:26px; align-items:center}
.feature .panel{background:rgba(255,255,255,.03); border:var(--ring); border-radius:14px; padding:20px}

.badge{display:inline-block; padding:6px 10px; border-radius:999px; background:rgba(14,165,233,.2); color:#93c5fd; font-weight:700; font-size:12px; letter-spacing:.3px}

footer{padding:50px 0; border-top:var(--ring); color:var(--muted)}
footer a{color:var(--muted)}
small, .muted{color:var(--muted)}

@media (max-width:900px){
  .hero-inner, .feature{grid-template-columns:1fr}
  .card-row{grid-template-columns:1fr; gap:14px}
}

/* === v1.3 Mobile Drawer & Hamburger === */
.menu-toggle{display:none;flex-direction:column;gap:6px;cursor:pointer;z-index:1001;background:transparent;border:0;padding:8px;margin-left:8px}
.menu-toggle span{width:28px;height:3px;background:linear-gradient(90deg,#fbbf24,#f59e0b);border-radius:2px;transition:all .3s ease}
.menu-toggle.active span:nth-child(1){transform:rotate(45deg) translate(5px,6px)}
.menu-toggle.active span:nth-child(2){opacity:0}
.menu-toggle.active span:nth-child(3){transform:rotate(-45deg) translate(6px,-7px)}
.menu-toggle.active span{ box-shadow:0 0 10px rgba(14,165,233,.6); } /* cyan glow when active */

.mobile-drawer{
  position:fixed; top:0; right:-100%; width:min(78%, 360px); height:100vh;
  background: linear-gradient(180deg, rgba(11,19,39,.97), rgba(11,19,39,.98)),
              radial-gradient(600px 400px at 0% 0%, rgba(14,165,233,.18), transparent);
  border-left: 1px solid rgba(255,255,255,.08);
  box-shadow:-10px 0 28px rgba(0,0,0,.45);
  display:flex; flex-direction:column; gap:8px;
  padding:88px 22px 24px; transition:right .35s ease; z-index:1000;
}
.mobile-drawer.open{ right:0; }
.mobile-drawer a{ color:#e8f3ff; text-decoration:none; font-weight:700; font-size:18px; padding:10px 0; }
.mobile-drawer a.cta{ background:linear-gradient(90deg, var(--gold), #fbbf24); color:#000; padding:12px 16px; border-radius:10px; margin-top:6px; }
.mobile-drawer a:hover{ text-shadow:0 0 12px rgba(14,165,233,.6); }

@media (max-width:900px){
  nav.main-nav{ display:none; }
  .menu-toggle{ display:flex; }
}

/* === Splash Animation === */
@keyframes dashpathSplash {
  0% {opacity:0; transform:scale(0.95);}
  50% {opacity:1; filter:drop-shadow(0 0 24px rgba(14,165,233,.55)) drop-shadow(0 0 10px rgba(245,158,11,.35));}
  100% {opacity:1; transform:scale(1);}
}
.logo-splash{ animation: dashpathSplash 2s ease-out forwards; }