/* ------------------------------------------------------------------
  MoonTide – Static Site Stylesheet
  (HSL palette + layout + utilities)
-------------------------------------------------------------------*/

/* ----  Design-system variables  ---------------------------------- */
:root {
  --color-purple: 270 62% 64%;
  --color-blue:    196 87% 57%;
  --color-yellow:  50 100% 56%;
  --color-orange:  20  89% 57%;
  --color-red:      3  93% 66%;
  --color-darkblue:196 74% 55%;
  --color-grey:      0  0% 63%;
  --color-text-light:210 40% 98%;
  --color-bg-dark: 210 100% 4%;

  --color-now-marker: 270 51% 72%;

  --color-card-bg: 223 27% 16%;

  --color-selection-bg:   270 42% 60%;
  --color-selection-text:  0  0% 100%;

  --color-button-filled:  270 51% 72%;
  --color-button-pressed: 258 39% 51%;

  --radius: 0.75rem;
}

/* ----  CSS Reset / helpers  ------------------------------------- */
*,::before,::after{box-sizing:border-box;margin:0;padding:0}
img{max-width:100%;display:block}
button{font:inherit;border:none;cursor:pointer}

/* Typography */
body{
  background:hsl(var(--color-bg-dark));
  color:hsl(var(--color-text-light));
  font-family:'Inter',Arial,Helvetica,sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:'DM Serif Display',Georgia,serif;font-weight:400;line-height:1.2}
a{text-decoration:none;color:inherit}

/* Layout helpers */
.container{width:100%;max-width:1100px;margin-inline:auto;padding-inline:1rem}
.text-center{text-align:center}

/* Gradient text utility */
.gradient-text{
  background:linear-gradient(135deg,
              hsl(var(--color-purple)),
              hsl(var(--color-blue)));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* Buttons */
.btn{
  display:inline-block;
  padding:.75rem 1.75rem;
  border-radius:.5rem;
  font-weight:500;
  font-size:1rem;
  transition:background .25s,color .25s;
}
.btn-primary{
  background:hsl(var(--color-button-filled));
  color:hsl(var(--color-selection-text));
}
.btn-primary:hover:not(:disabled){
  background:hsl(var(--color-button-pressed));
}
.btn-primary:disabled{opacity:.6;cursor:not-allowed}

/* ----------  HEADER  ------------------------------------------- */
header{
  padding:.75rem 0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:.9rem;
}
.site-logo{display:flex;align-items:center;gap:.5rem;font-size:1.35rem}
nav a{margin-left:1.75rem;color:hsl(var(--color-text-light))}
nav a:hover{color:hsl(var(--color-blue))}

/* ----------  HERO  --------------------------------------------- */
.hero{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  padding-block:4rem 3rem;
}
.hero-copy{flex:1 1 380px}
.hero-copy h1{font-size:3.75rem;margin-bottom:1.25rem}
.hero-copy p{max-width:28rem;color:hsl(var(--color-grey));margin-bottom:2rem}
.hero-visual{flex:1 1 320px;display:flex;justify-content:center}

/* Phone frame */
.phone{
  position:relative;
  width:280px;
  max-width:90vw;
  height:572px;
  border-radius:2.5rem;
  background:#1a1a1a;
  box-shadow:0 20px 50px rgba(0,0,0,.6);
}
.phone::before{
  content:"";
  position:absolute;
  inset:0;
  border:4px solid #3d3d3d;
  border-radius:2.5rem;
  pointer-events:none;
}
.phone-screen{
  position:absolute;
  inset:1rem;
  border-radius:1.8rem;
  overflow:hidden;
  background:#000;
}
.phone-screen img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity .5s ease;
}
.phone-screen img.active{opacity:1}

/* Carousel dots */
.dots{display:flex;justify-content:center;gap:.5rem;margin-top:.75rem}
.dot{
  width:8px;height:8px;border-radius:50%;
  background:hsl(var(--color-grey));
  opacity:.6;cursor:pointer;transition:all .25s;
}
.dot.active{width:24px;background:hsl(var(--color-purple));opacity:1}

/* Caption */
.screen-caption{font-size:.8rem;color:hsl(var(--color-grey));margin-top:.5rem;min-height:1.1rem;text-align:center}

/* ----------  FEATURES  ----------------------------------------- */
.features{padding-block:5rem}
.features h2{font-size:2.25rem;margin-bottom:.75rem}
.features>p{max-width:38rem;margin:0 auto 3.5rem;color:hsl(var(--color-grey))}
.feature-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:3rem 2.5rem;
}
.feature{display:flex;gap:1.25rem}
.feature-icon{
  flex-shrink:0;
  width:48px;height:48px;border-radius:50%;
  background:hsl(var(--color-purple));
  position:relative;
}
.feature-icon::after{
  content:"";
  position:absolute;inset:10px;border-radius:50%;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.35)
}
.feature h3{margin:0 0 .4rem;font-size:1.1rem}
.feature p{margin:0;color:hsl(var(--color-grey));font-size:.95rem}

/* ----------  DOWNLOAD SECTION  --------------------------------- */
.download{padding-block:5rem 6rem;text-align:center}
.download h2{font-size:2rem;margin-bottom:.75rem}
.store-cards{
  display:flex;flex-wrap:wrap;
  justify-content:center;gap:1.25rem;margin-top:2rem;
}
.card{
  background:hsl(var(--color-card-bg));
  border:1px solid hsl(var(--color-purple)/.2);
  border-radius:1rem;
  padding:2rem;
  width:280px;
  max-width:90vw;
}
.card h4{margin:0 0 1rem;font-size:1.15rem}
.card p{margin:0 0 1.25rem;font-size:.9rem;color:hsl(var(--color-grey))}

/* ----------  FOOTER  ------------------------------------------- */
footer{background:#0001;padding-block:3rem 2rem;font-size:.85rem}
.footer-top{
  display:flex;flex-wrap:wrap;gap:3rem 2.5rem;
  justify-content:space-between;margin-bottom:2.5rem;
}
.footer-col h5{font-size:1rem;margin:0 0 1rem}
.footer-col a{display:block;margin:.3rem 0;color:hsl(var(--color-grey))}
.footer-col a:hover{color:hsl(var(--color-blue))}
.copyright{
  border-top:1px solid rgba(255,255,255,.07);
  padding-top:1.25rem;text-align:center;color:hsl(var(--color-grey));
}

/* ----------  MEDIA QUERIES  ------------------------------------ */
@media(max-width:680px){
  .hero-copy h1{font-size:2.75rem}
  .hero{padding-top:3rem}
}

/* ----------  NAV Burger visibility adjustment  ---------- */
@media (max-width: 992px) {
  nav.desk { display: none; }   /* hide desktop links */
  .burger  { display: block; }  /* show hamburger     */
}

/* Prevent long email addresses from overflowing on small screens */
a[href^="mailto:"]{
  overflow-wrap:anywhere;  /* break at any character if needed      */
  word-break:break-word;   /* extra safety for super-long segments  */
}