/* ===========================================================
   alankan.net — styles
   Base reset, fonts, keyframes, interactive states, responsive.
   Per-element layout/appearance lives inline in index.html;
   this file owns the reset, motion, :hover/:focus states,
   and responsive stacking.
   =========================================================== */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:#0a0b12;
  color:#f5f4ef;
  font-family:'Manrope',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{background:#38bdf8;color:#06110d}
a{color:inherit}
h1,h2,h3{margin:0}
p{margin:0}
img{display:block;max-width:100%}

/* ---- Motion ---- */
@keyframes auroraDrift{
  0%{transform:translate3d(-5%,-3%,0) scale(1)}
  50%{transform:translate3d(6%,4%,0) scale(1.18)}
  100%{transform:translate3d(-5%,-3%,0) scale(1)}
}
@keyframes cueBob{
  0%,100%{transform:translateY(0);opacity:.5}
  50%{transform:translateY(8px);opacity:1}
}

/* ---- Interactive states (inline styles can't do :hover/:focus) ---- */
.nav-link{transition:color .3s}
.nav-link:hover{color:#ffffff}

.nav-cta{transition:border-color .3s,background .3s}
.nav-cta:hover{border-color:rgba(56,189,248,.6);background:rgba(255,255,255,.1)}

.btn-primary{transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 52px rgba(77,124,255,.4)}

.btn-ghost{transition:border-color .35s,background .35s}
.btn-ghost:hover{border-color:rgba(56,189,248,.6);background:rgba(255,255,255,.04)}

.text-link{transition:color .3s,border-color .3s}
.text-link:hover{color:#ffffff;border-color:rgba(56,189,248,.7)}

.help-text-link{transition:color .3s}
.help-text-link:hover{color:#f5f4ef}

.logo-tile{transition:filter .4s,opacity .4s}
.logo-tile:hover{filter:grayscale(0);opacity:1}

.talk-card{transition:border-color .35s,background .35s,transform .35s}
.talk-card:hover{border-color:rgba(56,189,248,.5);background:rgba(255,255,255,.05);transform:translateY(-2px)}

.field{transition:border-color .3s,background .3s}
.field:focus{border-color:rgba(56,189,248,.6);background:rgba(255,255,255,.06)}
.field::placeholder{color:#7f818c}

.foot-link{transition:color .3s}
.foot-link:hover{color:#38bdf8}

/* ---- Hamburger nav (mobile) ---- */
.nav-burger{
  display:none;
  position:relative;
  width:44px;height:44px;
  padding:10px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px;
  cursor:pointer;
}
.nav-burger-line{
  display:block;
  width:22px;height:2px;
  margin:4px auto;
  border-radius:2px;
  background:#f5f4ef;
  transition:transform .3s cubic-bezier(.2,.7,.2,1),opacity .25s;
}
.nav-burger[aria-expanded="true"] .nav-burger-line:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-burger[aria-expanded="true"] .nav-burger-line:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] .nav-burger-line:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.mobile-menu{
  display:none;
  position:absolute;
  top:100%;left:0;right:0;
  flex-direction:column;
  padding:.6rem 1.2rem 1.4rem;
  background:#0a0b12;
  box-shadow:0 30px 60px rgba(0,0,0,.5);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.mobile-menu.is-open{display:flex}
.mobile-link{
  padding:1rem .2rem;
  text-decoration:none;
  color:#e9e8e2;
  font-family:'Space Grotesk',system-ui,sans-serif;
  font-weight:500;
  font-size:1.25rem;
  letter-spacing:-.01em;
  border-bottom:1px solid rgba(255,255,255,.07);
  opacity:0;
  transform:translateY(8px);
}
.mobile-menu.is-open .mobile-link{
  animation:menuIn .45s cubic-bezier(.2,.7,.2,1) forwards;
}
.mobile-menu.is-open .mobile-link:nth-child(2){animation-delay:.05s}
.mobile-menu.is-open .mobile-link:nth-child(3){animation-delay:.1s}
.mobile-menu.is-open .mobile-link:nth-child(4){animation-delay:.15s}
.mobile-menu.is-open .mobile-link:nth-child(5){animation-delay:.2s}
.mobile-menu.is-open .mobile-link:nth-child(6){animation-delay:.25s}
@keyframes menuIn{to{opacity:1;transform:none}}
.mobile-link-cta{
  margin-top:1rem;
  border:1px solid rgba(56,189,248,.5);
  border-radius:999px;
  border-bottom:1px solid rgba(56,189,248,.5);
  text-align:center;
  padding:.9rem 1.2rem;
  font-size:1.05rem;
}

/* ---- Keyboard focus (quality floor) ---- */
a:focus-visible,button:focus-visible,.field:focus-visible{
  outline:2px solid #38bdf8;
  outline-offset:3px;
  border-radius:6px;
}

/* ---- Responsive stacking ---- */
@media (max-width:820px){
  .split{grid-template-columns:1fr !important;gap:2.4rem !important}
  .grid-2{grid-template-columns:1fr !important}
  .grid-4{grid-template-columns:1fr 1fr !important}
  .nav-links .nav-link{display:none !important}
  .nav-links{gap:.8rem !important}
  .nav-burger{display:block}
  .sticky-col{position:static !important;top:auto !important}
  .logo-row{gap:.8rem !important}
  .logo-tile{width:calc(50% - .6rem) !important;height:64px !important;padding:12px 16px !important}
}
@media (max-width:520px){
  .grid-4{grid-template-columns:1fr !important}
  .belief-row{grid-template-columns:1fr !important;gap:.6rem !important}
}

/* ---- Respect reduced motion ---- */
@media (prefers-reduced-motion:reduce){
  .js-aur{animation:none !important}
  .js-cue{animation:none !important}
}