/* Notivaro Landing — styles.css */
:root{
  --bg: #fff;
  --panel: rgba(225, 175, 175, 0.06);
  --panel-2: rgba(255,255,255,0.08);
  --border: rgba(255,255,255,0.12);
  --text: #656d80;
  --muted: #6f81a8;
  --primary: #6ea8fe;
  --primary-2: #3b82f6;
  --accent: #a78bfa;
  --success: #22c55e;
  --radius: 16px;
  --shadow: 0 8px 30px rgba(0,0,0,.35);
}

*{ box-sizing:border-box }
html,body{ height:100% }
body{
  overflow-x: hidden;
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  line-height:1.55;
}

/* Prevent media from overflowing narrow screens */
img, video, svg { max-width: 100%; height: auto; display: block }

/* Container */
.container{ width:min(1120px, 92vw); margin-inline:auto }

/* Header */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--border);
  background: rgba(211, 245, 255, 0.6);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
}
.nav-row{ display:flex; align-items:center; justify-content:space-between; padding:14px 0 }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:#5071bd; font-weight:700; letter-spacing:.2px }
.brand-badge{
  /* keep color/shape; ensure consistent sizing and centering */
  display:grid; place-items:center;
  width:32px; height:32px;
  border-radius:10px;
  color:white; 
}
.brand-name{ font-size:1.05rem }
.nav-links{ display:flex; gap:22px }
.nav-links a{ color:#6d7995; text-decoration:none; font-weight:550 }
.nav-links a:hover{ color:#739dff }
.nav-cta .btn{ margin-left:8px; font-weight: bold;}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 18px; border-radius:12px; text-decoration:none;
  border:1px solid var(--border); cursor:pointer; user-select:none;
  transition: transform .02s ease, background .15s ease, border-color .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover{ transform: translateY(-1px) }
.btn:active{ transform: translateY(0) }
.btn-primary{ background: linear-gradient(135deg, var(--primary), var(--accent)); color:white; border-color: transparent; font-weight: bold; }
.btn-secondary{ background: var(--panel-2); color:var(--text) }
.btn-ghost{ background-color: #aaffdf;
  color: #568f81;
  font-weight: bold; }

/* Hero */
.hero{ position:relative; padding: clamp(36px, 5vw, 64px) 0 36px }
.hero-grid{ display:grid; grid-template-columns: 1.1fr .9fr; align-items:center; gap: min(6vw, 44px) }
.pill{
  display:inline-flex; align-items:center; gap:10px;
  background: rgba(167,139,250,.2); color:#6c578f; border:1px solid rgba(167,139,250,.45);
  padding:8px 12px; border-radius:999px; font-weight:600; letter-spacing:.2px; margin-bottom:14px;
}
.hero h1{ font-size: clamp(2rem, 4.4vw, 3.4rem); line-height:1.05; margin:0 0 10px }
.lead{ color: var(--muted); margin: 0 0 18px; max-width: 46ch }
.cta-row{ display:flex; gap:12px; align-items:center; margin: 14px 0 22px; flex-wrap:wrap }
.social-proof{ display:flex; align-items:center; gap:14px; color: var(--muted) }
.social-proof .stat{ display:flex; flex-direction:column }
.social-proof strong{ color: var(--text) }

.hero-media{ position:relative }

/* ======= Carousel ======= */
.carousel{
  position: relative;
  border-radius: 22px;
  border: 10px solid rgba(255,255,255,.10);
  background-color: #fff;
  box-shadow: 0 10px 20px rgba(134, 134, 134, 0.55);
  overflow: clip;
  isolation: isolate;
  width: 550px;
  max-width: 100%;
}
.carousel-viewport{ position: relative; width: 100%; }
.carousel-track{
  list-style:none; margin:0; padding:0; display:flex;
  will-change: transform; transform: translate3d(0,0,0);
  transition: transform .8s cubic-bezier(.22,.61,.36,1);
}
.carousel-slide{
  position: relative; flex: 0 0 100%;
  aspect-ratio: 16 / 9; height: auto; overflow: hidden;
}
.carousel-slide .layer.bg{
  position:absolute; inset:0; background-size: cover; background-position: center; background-repeat:no-repeat;
  transform: scale(1.08); will-change: transform;
}
.carousel-slide .layer.grain{
  position:absolute; inset:-20%; pointer-events:none; opacity:.15;
  background-image: radial-gradient(rgba(255,255,255,.06), transparent 60%); mix-blend-mode: overlay;
}
.carousel-slide .layer.glare{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(40% 50% at 90% 15%, rgba(110,168,254,.25), transparent 60%),
    radial-gradient(50% 55% at 0% 100%, rgba(167,139,250,.25), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.35));
  mix-blend-mode: screen;
}

.caption.glass{
  position:absolute; left:18px; bottom:16px;
  padding:6px 12px;
  color:#e9eeff; border:1px solid rgba(255,255,255,.14);
  background: rgba(7,12,22,.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 14px;
  max-width: min(90%, 520px);
  width: auto;
  min-height: 40px;
}
.caption.glass h3{ margin:.25rem 0 .15rem; color:#f5f7ff; font-size: clamp(1.05rem, 2.2vw, 1.4rem) }
.caption.glass p{ margin:0; color:#d0dbff }
.pill-sm{
  display:inline-grid; place-items:center; padding:4px 8px;
  font-size:.74rem; border-radius:999px; background:rgba(110,168,254,.22);
  color:#dce8ff; border:1px solid rgba(110,168,254,.5)
}

/* Parallax inner blobs driven by mouse */
.parallax.orb{
  position:absolute; border-radius:50%; filter: blur(50px); opacity:.35; pointer-events:none;
}
.parallax.orb-a{ width:280px; height:280px; right:-80px; top:-60px; background: radial-gradient(#6ea8fe, transparent 60%) }
.parallax.orb-b{ width:240px; height:240px; left:-70px; bottom:-90px; background: radial-gradient(#a78bfa, transparent 60%) }

/* Controls */
.ctrl{
  position:absolute; top:50%; transform: translateY(-50%);
  width:42px; height:42px; border-radius:12px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(10,15,28,.55);
  color:#fff; display:grid; place-items:center; cursor:pointer;
  transition: transform .15s ease, background .2s ease, opacity .2s ease;
  opacity:.92;
}
.ctrl:hover{ transform: translateY(-50%) scale(1.05) }
.ctrl:active{ transform: translateY(-50%) scale(1) }
.ctrl.prev{ left:12px }
.ctrl.next{ right:12px }

/* Footer: progress + fraction + thumbs */
.carousel-footer{
  position:absolute; left:0; right:0; bottom:10px;
  display:flex; align-items:center; gap:12px;
  padding-inline:12px;
}
.progress{
  flex:1; height:3px; background: rgba(255,255,255,.25); border-radius:999px; overflow:hidden;
}
.progress .bar{
  display:block; width:0%; height:100%;
  background: linear-gradient(90deg, #6ea8fe, #a78bfa);
  transition: width .2s linear;
}
.fraction{
  font-feature-settings: "tnum";
  color:#e8eeff; font-weight:600; letter-spacing:.06em; display:flex; align-items:center; gap:3px;
}
.fraction .sep{ opacity:.55 }
.fraction .cur, .fraction .tot{ min-width: 2ch; text-align:center }
.thumbs{ display:flex; gap:8px; align-items:center; }
.thumbs button{
  width:42px; height:26px; border-radius:6px; border:1px solid rgba(255,255,255,.22);
  background-size: cover; background-position:center; background-repeat:no-repeat;
  opacity:.6; cursor:pointer; transition: transform .2s ease, opacity .2s ease, box-shadow .2s ease;
  box-shadow: 0 4px 20px rgba(0,0,0,.25);
}
.thumbs button[aria-selected="true"]{
  opacity:1; box-shadow: 0 0 0 2px #fff, 0 6px 24px rgba(0,0,0,.35);
  transform: translateY(-1px);
}

/* Orbs outside (page decor) */
.orb{ position:absolute; border-radius:50%; filter: blur(60px); opacity:.35; pointer-events:none }
.orb-1{ width:480px; height:480px; left:-120px; bottom:-80px; background: radial-gradient(#6ea8fe, transparent 60%) }
.orb-2{ width:420px; height:420px; right:-80px; top:-60px; background: radial-gradient(#a78bfa, transparent 60%) }

/* About */
.about{ padding: 64px 0 }
.about-grid{ display:grid; grid-template-columns: .95fr 1.05fr; align-items:center; gap:min(6vw, 44px) }
.media-card{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid var(--border); border-radius: 20px; padding:12px; box-shadow: var(--shadow); width: 600px; height: 100%;
  max-width: 100%;
}
.media-card img{ max-width:100%; width:100%; display:block; border-radius: 16px; object-fit: cover;}
.about h2{ margin:0 0 10px; font-size: clamp(1.6rem, 3.2vw, 2.2rem) }
.about p{ color: var(--muted) }
.checklist{ margin: 14px 0 8px; padding:0; list-style:none; display:grid; gap:8px }
.checklist li{ display:flex; align-items:center; gap:10px }
.checklist .icon{ width:22px; height:22px; display:inline-grid; place-items:center; color:#f1fff6; background-color:#08cb6e; border-radius:50px; font-weight:700 }

/* Features */
.features{ padding: 56px 0 }
.features h2{ text-align:center; margin:0 0 22px }
.feat-grid{
  display:grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.feat-card{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid var(--border); border-radius: 16px; padding:16px;
  box-shadow: 1px 1px 20px 1px #e8e8e8; display:flex; flex-direction:column; gap:6px;
}
.feat-ico{ font-size:20px; background: rgba(255,255,255,.06); border:1px solid var(--border); width:36px; height:36px; border-radius:10px; display:grid; place-items:center }

/* FAQ */
.faq{ padding: 56px 0 }
.faq h2{ text-align:center; margin:0 0 16px }
details{
  background: #d9e3ec;
  border:1px solid var(--border);
  border-radius:12px; margin:10px 0; padding:12px 16px
}
details p{ color:var(--muted); margin:.6em 0 0 }

/* Footer */
.site-footer{ border-top:1px solid var(--border); padding: 22px 0 30px; color: #fbfbfb; background-color: #1a3c4d; }
.foot-grid{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap }
.foot-brand{ text-decoration:none; color:var(--text) }
.foot-links a{ color:#6d7995; text-decoration:none; margin-left:14px }
.foot-links a:hover{ color:#739dff }

#about, #faq { background-color: aliceblue; }

/* Screen-reader only */
.sr-only{
  position:absolute !important;
  height:1px; width:1px;
  overflow:hidden; clip: rect(1px,1px,1px,1px);
  white-space:nowrap; border:0; padding:0; margin:-1px;
}

/* -------------------- Responsive -------------------- */

/* Tablet & small laptop tweaks */
@media (max-width: 900px) {
  .hero-grid,
  .about-grid { grid-template-columns: 1fr; }

  .nav-row { padding: 12px 0; }

  .carousel { width: 100%; }

  .media-card { width: 100%; }

  .feat-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* Hide non-essential decorative orbs on small screens (visual only) */
@media (max-width: 768px) {
  .orb, .parallax.orb { display:none; }
  .brand-name { font-size: 1rem; }
  .brand-badge { width:28px; height:28px; }
}

/* Phones */
@media (max-width: 640px){
  .nav-links{ display:none }
  .feat-grid{ grid-template-columns: 1fr; }
  .cta-row{ flex-wrap:wrap }
  .carousel-footer{ gap:8px }
  .thumbs{ display:none } /* hide thumbs on very small screens */
}

/* Very small phones */
@media (max-width: 480px) {
  .hero { padding: 28px 0 28px; }
  .hero-grid,
  .about-grid { grid-template-columns: 1fr; }

  .cta-row { flex-direction: column; gap: 10px; width:100% }
  .btn { width: 100%; padding: 12px 16px; }

  .carousel { border-width: 6px; border-radius: 18px; }
  .ctrl { width:36px; height:36px; }
  .caption.glass { left:12px; right:12px; bottom:12px; max-width: calc(100% - 24px); }

  .foot-grid { flex-direction: column; align-items: flex-start; gap: 8px; }
  .foot-links a{ display:inline-block; margin: 6px 12px 0 0 }
}

/* Accent Secondary Button */
.btn.btn-secondary {
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: #fff;
font-weight: bold;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .carousel-track { transition: none !important; }
}