:root{
  --lapis:#26619c; --lapis2:#3d7dd1; --sky:#87ceeb;
  --ink:#0e2a49; --muted:#456c98; --line:rgba(38,97,156,.22);
  --panel:#f6f9ff; --bg1:#ffffff; --bg2:#f1f6ff; --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box} html{scroll-behavior:auto}
body{margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; color:var(--ink);
 background: linear-gradient(180deg, #eaf6ff, #dff2ff 60%, #eaf6ff);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;}

.nav{position:sticky; top:0; z-index:100; backdrop-filter:blur(3px) saturate(120%);
  background:linear-gradient(to bottom, rgba(255,255,255,.95), rgba(255,255,255,.6)); border-bottom:1px solid var(--line)}
.nav .inner{max-width:1240px; margin:0 auto; height:68px; display:flex; align-items:center; justify-content:space-between; padding:0 20px}
.brand{display:flex; align-items:center; gap:12px; font-weight:900; color:var(--lapis)}
.brand img.logo{height:105px; width:auto; transform:translateZ(0); transition:transform .25s var(--ease)}
.brand img.logo:hover{transform:scale(1.06)}
.links a{color:#2e5686; text-decoration:none; margin:0 12px; font-weight:700}
.links a:hover{color:var(--lapis)}
.cta{padding:10px 18px; border-radius:999px; background:linear-gradient(135deg,var(--lapis2),var(--sky)); color:white; font-weight:900; text-decoration:none; border:1px solid var(--line); box-shadow:0 10px 30px rgba(61,125,209,.25)}

.hero{position:relative; min-height:92vh; display:grid; place-items:center; overflow:hidden}
.hero .bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(.98); transform:scale(1); will-change:transform}
.hero .scrim{position:absolute; inset:0; background:linear-gradient(to bottom, rgba(255,255,255,0.15), rgba(255,255,255,.92) 70%)}
.hero .content{position:relative; z-index:2; text-align:center; padding:12vh 20px 18vh; will-change:transform, opacity}
.hero h1{font-size:clamp(48px,8.8vw,98px); line-height:1.02; margin:0; font-weight:900; color:var(--ink)}
.hero p{max-width:920px; margin:16px auto 26px; color:#2b4c72; font-size:clamp(16px,2.6vw,22px)}
.actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.btn{display:inline-block; padding:14px 22px; border-radius:999px; font-weight:900; text-decoration:none; border:1px solid var(--line); transition:transform .2s var(--ease), box-shadow .2s var(--ease)}
.btn-primary {
  background-color: rgba(255, 255, 255, 0.35);
  backdrop-filter: glass(3px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: var(--lapis);
  box-shadow: 0 4px 20px rgba(61,125,209,0.25);
}
.btn-primary:hover {
  background-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
}

.btn-ghost {
  background-color: rgba(255, 255, 255, 0.25);
  backdrop-filter: glass(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  color: var(--lapis);
  border: 1px solid rgba(255, 255, 255, 0.4);
}
.btn-ghost:hover {
  background-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-2px);
}

.btn:hover{box-shadow:0 12px 40px rgba(61,125,209,.25); transform:translateY(-2px)}

/* HERO — scrolling marquee text strip (Option 3) */
.marquee {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
backdrop-filter:blur(3px)  
background: rgba(255,255,255,0.85);
  border-top: 1px solid var(--line);
  white-space: nowrap;
  overflow: hidden;
}
.marquee .track {
  display: inline-block;
  padding: 10px 0;
  animation: scrollText 22s linear infinite;
}
.marquee span {
  margin: 0 28px;
  color: var(--lapis);
  font-weight: 700;
  letter-spacing: 0.5px;
}
@keyframes scrollText {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.section{padding:96px 20px}
.section-title{text-align:center; font-size:clamp(30px,5vw,48px); margin:0 0 6px; color:#0d2a48; font-weight:900; opacity:0; transform:translateY(18px); animation:rise .8s var(--ease) .1s forwards}
.section-sub{text-align:center; color:#456c98; margin:0 0 28px; opacity:0; transform:translateY(18px); animation:rise .8s var(--ease) .2s forwards}
@keyframes rise{to{opacity:1; transform:translateY(0)}}

.row{max-width:1240px; margin:40px auto; display:grid; grid-template-columns:1.1fr .9fr; gap:28px; align-items:center}
.row.alt{grid-template-columns:.9fr 1.1fr}
.card{background:var(--panel); border:1px solid var(--line); border-radius:24px; overflow:hidden; box-shadow:0 16px 50px rgba(5,26,55,.10);
  opacity:0; transform:translateY(26px); animation:rise .9s var(--ease) .1s forwards}
.card img{width:100%; height:520px; object-fit:cover; transform:scale(1); transition:transform .6s var(--ease)}
.card:hover img{transform:scale(1.05)}
.copy h3{font-size:clamp(26px,4.8vw,46px); margin:0 0 8px; color:#0d2a48; font-weight:900; opacity:0; transform:translateY(18px); animation:rise .8s var(--ease) .25s forwards}
.copy p{margin:0 0 12px; color:#3f6289; font-size:clamp(16px,2.4vw,20px); opacity:0; transform:translateY(18px); animation:rise .8s var(--ease) .35s forwards}
.pills{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px}
.pills span{border:1px solid var(--line); padding:8px 12px; border-radius:999px; background:#fff; color:#2e5686}

.gallery{background:linear-gradient(180deg,#ffffff,#eef5ff); padding:20px 0 40px; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.strip{display:flex; gap:16px; overflow-x:auto; padding:16px; scroll-snap-type:x mandatory}
.tile{flex:0 0 70vw; height:60vh; scroll-snap-align:center; border-radius:26px; overflow:hidden; border:1px solid var(--line);
  box-shadow:0 18px 70px rgba(5,26,55,.12); transform:translateY(18px); opacity:0; animation:rise .9s var(--ease) .2s forwards}
.tile img{width:100%; height:100%; object-fit:cover}

.footer{border-top:1px solid var(--line); background:#f6f9ff; color:#4a6b93; padding:22px 20px}
.footer .inner{max-width:1240px; margin:0 auto; display:flex; align-items:center; justify-content:space-between}
/* Scroll Text Animation */
.rv {
  opacity: 0;
  transform: translateY(20px);
  filter: blur(4px);
  transition: all 1.2s ease-out;
}

.rv.seen {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
/* ===== Cloud9Blinds — Mobile Layout ONLY (keeps motion intact) ===== */
@media (max-width: 900px){

  /* Base legibility */
  html, body { overflow-x:hidden; }
  body { font-size:15px; line-height:1.6; }

  /* Header */
  .nav .inner { height:64px; padding:0 12px; }
  .brand img.logo { height:32px; width:auto; display:block; }
  .links { display:none; }                    /* hide desktop nav links on mobile */
  .cta { padding:10px 14px; font-size:.95rem; }

  /* Hero (sizes only; no transforms here) */
  .hero { min-height:82vh; }
  .hero h1 { font-size:clamp(28px,8vw,36px); line-height:1.15; padding:0 12px; }
  .hero p  { font-size:1rem; padding:0 14px; }

  /* Sections & headings */
  .section { padding:56px 16px; }
  .section-title { font-size:clamp(24px,6.5vw,30px); }
  .section-sub   { font-size:.98rem; padding:0 8px; }

  /* Two-column rows collapse to one column */
  .row, .row.alt { display:block; max-width:980px; margin:24px auto; }
  .row .card, .row .copy { margin:0 0 16px; }

  /* Product images */
  .card img { width:100%; height:auto; border-radius:12px; }

  /* Buttons */
  .btn { padding:12px 18px; font-size:.95rem; line-height:1.1; }
  .btn-row { flex-direction:column; align-items:stretch; gap:10px; }
  .btn-row .btn { width:100%; max-width:420px; margin:0 auto; }

  /* Gallery tiles */
  .tile { flex:0 0 86vw; height:52vh; }

  /* Marquee spacing */
  .marquee .track { padding:8px 0; }
  .marquee span { margin:0 18px; }

  /* Safety: media fit & no wrap explosions */
  img, video { max-width:100%; height:auto; }
  p, li { word-break:break-word; }
}

@media (max-width: 600px){
  .hero h1 { font-size:clamp(26px,9vw,32px); }
  .hero p  { font-size:.95rem; }
}
/* Thank-you panel: hidden by default, shows only when #thanks is in URL */
#thanks { 
  display: none; 
}

#thanks:target { 
  display: block; 
}
/* ===== MOBILE LOGO SIZE ===== */
@media (max-width: 900px) {
  .brand img.logo {
    height: 60px;      /* adjust the number until it looks right */
    width: auto;       /* keeps proportions */
  }
}

@media (max-width: 600px) {
  .brand img.logo {
    height: 50px;      /* slightly smaller for very small screens */
  }
}
/* Reviews layout */
.reviews-aggregate{
  text-align:center;
  margin:8px 0 22px;
  color:#2b4c72;
  font-weight:600;
}

/* 3 equal columns on desktop, 1 on mobile */
.reviews-grid{
  max-width:980px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}

.review{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:16px;
  padding:16px;
  box-shadow:0 10px 24px rgba(10,33,58,.06);
  display:flex;
  flex-direction:column;
  height:100%;           /* equal card heights */
}

.review .stars{ color:#f5a623; font-weight:700; margin-bottom:8px; letter-spacing:1px; }
.review .text{ color:#2b4c72; flex:1; }
.review .by{ color:#5c789c; margin-top:8px; font-size:.95rem; }

@media (max-width:900px){
  .reviews-grid{ grid-template-columns:1fr; gap:14px; padding:0 16px; }
}