/* LingoSpin — Modern dark / bluish gradient + glassmorphism */
/* --------------------------------------------------------- */
:root{
  /* Bluer gradient */
  --bg-top:   #0A1633;  /* deep navy blue */
  --bg-mid:   #0C2366;  /* indigo/royal blue */
  --bg-bottom:#07132A;  /* midnight blue */

  /* Optional: make glow orbs blue/cyan */
  --orb-1: #4C7DFF;     /* sapphire */
  --orb-2: #2BD4FF;     /* cyan */
}

html, body { min-height: 100%; }

body {
  /* Bluish gradient you liked */
  background: linear-gradient(160deg, #0E0F21 0%, #151738 52%, #101233 100%);
  background-attachment: fixed; /* smooth scroll feel */
}


/* Body wrapper enables fixed gradient layer & orbs behind everything */
.ls-body{ position:relative; min-height:100dvh; overflow-x:hidden; }

/* Background: layered radial + linear gradients for depth */
.ls-bg{
  position:fixed; inset:0; z-index:-3;
  background:
    radial-gradient(140% 80% at 10% 0%, #0A1633 0%, #0C2366 55%, transparent 60%),
    radial-gradient(120% 90% at 90% 100%, #0A1440 0%, #07132A 65%, #050B1E 100%),
    linear-gradient(160deg, #0A183F 0%, #0C2B6F 40%, #081536 100%);
  background-attachment: fixed;
}

/* Optional decorative blurred glow orbs (won’t block clicks) */
.ls-orb{
  position:fixed; border-radius:50%; filter:blur(72px);
  opacity:.25; z-index:-2; pointer-events:none;
  animation: ls-float 18s ease-in-out infinite;
}
.ls-orb-1{ width:360px; height:360px; right:-120px; top:-120px; background:var(--orb-1); }
.ls-orb-2{ width:300px; height:300px; left:-100px; bottom:-120px; background:var(--orb-2); animation-duration:22s; }

@keyframes ls-float{
  0%{ transform: translate3d(0,0,0) }
  50%{ transform: translate3d(0,-12px,0) }
  100%{ transform: translate3d(0,0,0) }
}
@media (prefers-reduced-motion: reduce){
  .ls-orb{ animation:none }
}

/* Light glass cards you can apply alongside Bootstrap’s .card if desired */
.ls-glass{
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-bd) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--deep-shadow);
}

/* Accent callout (good for “New Features”) */
.ls-card-accent{
  background: linear-gradient(180deg, rgba(124,92,255,.22), rgba(124,92,255,.08));
  border: 1px solid rgba(124,92,255,.45) !important;
  color:#fff;
}

/* Gradient headline text helper */
.ls-grad-text{
  background: linear-gradient(90deg, #c7bfff, #7C5CFF);
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}

/* Subtle modern border tone to match background */
.border, .navbar, .border-top, .border-bottom{
  --bs-border-color: var(--soft-border);
}

/* Navbar: faint glass feel (keeps Bootstrap layout) */
.navbar{
  background: rgba(10,12,32,.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* App store buttons (dummy links) */
.btn-store{
  display:inline-flex; align-items:center; gap:.5rem;
  border-radius:12px;
  padding:.5rem .9rem;
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
}
.btn-store i{ font-style:normal; opacity:.85; }

/* Phone mock (for hero preview images, optional) */
.ls-phone{
  width:320px; aspect-ratio:9/19.5; border-radius:28px;
  background: rgba(0,0,0,.38);
  border:1px solid rgba(255,255,255,.18);
  box-shadow: var(--deep-shadow);
  padding:18px; position:relative;
}
.ls-phone-notch{
  position:absolute; top:10px; left:50%; transform: translateX(-50%);
  width:140px; height:16px; border-radius:8px; background: rgba(255,255,255,.12);
}
.ls-phone-screen{
  margin-top:24px; height: calc(100% - 24px);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px; padding:14px;
}

/* Links: understated hover */
a.link-clean{ text-decoration:none; }
a.link-clean:hover{ text-decoration: underline; text-underline-offset: 3px; }

/* Screenshot grid helpers (works with your template) */
.ls-shot{
  width:100%; object-fit:cover; object-position: top;
  height: 540px;                 /* tall, immersive */
  border-radius: 14px;
  border: 1px solid var(--soft-border);
  background: rgba(255,255,255,.04);
}
@media (max-width: 576px){
  .ls-shot{ height: 420px; }
}

/* Utility: soft panel */
.ls-callout{ border-radius:16px; padding:18px; }

/* Footer tone */
footer{ background: transparent; }

/* Home hero screenshot (landing.png) — clean image, no box */
.home-hero-img{
  display: block;
  width: 72%;
  max-width: 900px;       /* large but capped */
  max-height: 52vh;       /* keep it from dominating the viewport */
  height: auto;
  object-fit: contain;
  margin-inline: auto;    /* center */
  /* no border, no radius, no shadow */
}

@media (max-width: 1200px){
  .home-hero-img{ width: 76%; max-height: 54vh; }
}
@media (max-width: 992px){
  .home-hero-img{ width: 82%; max-height: 56vh; }
}
@media (max-width: 576px){
  .home-hero-img{ width: 94%; max-height: 58vh; }
}