/* Morning Breeze — clean, modern, fast */
:root{
  --bg:#f8fafc;
  --surface:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --primary:#0ea5e9;
  --primary-600:#0284c7;
  --ring: rgba(14,165,233,.35);
  --shadow: 0 10px 30px rgba(2,8,23,.06);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji','Segoe UI Emoji';
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
}

img{max-width:100%;display:block}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
.container{width:min(1100px, 92%); margin:auto}

.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:1rem;top:1rem;background:#fff;padding:.5rem 1rem;border-radius:.5rem;box-shadow:var(--shadow)}

.header{background:var(--surface); position:sticky;top:0; z-index:50; box-shadow: 0 1px 0 rgba(2,8,23,.06)}
.header__inner{display:grid;grid-template-columns:1fr auto auto; gap:1rem; align-items:center; padding:.75rem 0}
.brand{display:flex;align-items:center;gap:.75rem}
.brand__logo{width:42px;height:42px;object-fit:cover;border-radius:.5rem; box-shadow: var(--shadow)}
.brand__text{display:flex;flex-direction:column;font-size:.9rem}
.brand__text span{color:var(--muted);font-weight:500;font-size:.8rem}

.nav__toggle{display:none}
.nav__list{display:flex; gap:1rem; list-style:none; padding:0;margin:0; align-items:center}
.nav__list a{padding:.5rem .75rem;border-radius:.6rem}
.nav__list a:hover{background:#eef6fb; text-decoration:none}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:.7rem 1rem;border-radius:.8rem;border:1px solid transparent; font-weight:600; box-shadow: var(--shadow)}
.btn--primary{background:var(--primary);color:white}
.btn--primary:hover{background:var(--primary-600)}
.btn--ghost{background:transparent;border-color:#cfe8f7;color:var(--primary)}

.header__cta .tel{font-weight:700}

.hero{
  position:relative; isolation:isolate;
  background: radial-gradient(1200px 500px at 80% -20%, rgba(14,165,233,.15), transparent),
              linear-gradient(180deg, #ecfeff 0%, #ffffff 30%);
  overflow:hidden;
}
.hero__inner{padding:clamp(2rem, 4vw, 4rem) 0 2rem}
.hero h1{font-size:clamp(2rem, 4vw, 3rem); line-height:1.15; margin:0 0 .75rem}
.hero p{font-size:1.1rem; color:var(--muted); margin:0 0 1rem}
.hero__actions{display:flex; gap:.75rem; flex-wrap:wrap; margin:1rem 0}
.hero__badges{display:flex;gap:1rem;flex-wrap:wrap; list-style:none; padding:0;margin:1rem 0 0; color:#0a5c7b; font-weight:600}
.hero__image{position:absolute; right:2%; bottom:-10%; width:min(44%, 520px); border-radius:1rem; box-shadow:0 30px 60px rgba(2,8,23,.15); transform: rotate(-2deg)}
.breeze{position:absolute; inset:-10% -10% auto -10%; height:340px; background: linear-gradient(90deg, rgba(14,165,233,.08), rgba(59,130,246,.06) 55%, rgba(14,165,233,.08));
  filter: blur(20px); animation: float 12s ease-in-out infinite alternate; border-radius:100%}
@keyframes float{to{transform: translateY(16px)}}

.section{padding:clamp(2rem, 4.5vw, 4rem) 0}
.section--em{background: #f0f9ff}
.section__title{font-size:clamp(1.4rem,3vw,2rem); margin:0 0 1rem}
.grid{display:grid; gap:1rem}
.cards{grid-template-columns: repeat(4, minmax(0,1fr))}
.cards .card{background:var(--surface); padding:1rem;border-radius:1rem; box-shadow: var(--shadow)}
.cards .card h3{margin:.25rem 0 .5rem}
.cards .card ul{margin:.5rem 0 0 1.2rem; color:var(--muted)}

.cards--pricing{grid-template-columns: repeat(3, minmax(0,1fr))}
.card--price .price{font-size:1.8rem; font-weight:800; color:var(--primary)}

.features{grid-template-columns: repeat(4, minmax(0,1fr))}
.feature{background:var(--surface);border-radius:1rem;padding:1rem; box-shadow: var(--shadow)}

.chiplist{display:flex; gap:.5rem; flex-wrap:wrap; list-style:none; padding:0;margin:0}
.chiplist li{background:var(--surface); border:1px solid #e2f0fb; padding:.5rem .7rem; border-radius:999px}

.contact{display:grid; grid-template-columns: 1.2fr 1fr; gap:1.25rem; align-items:start}
.form{background:var(--surface); padding:1rem; border-radius:1rem; box-shadow: var(--shadow)}
.form label{display:flex; flex-direction:column; gap:.35rem; margin-bottom:.75rem; font-weight:600}
.form input,.form select,.form textarea{
  border:1px solid #dbeafe; border-radius:.6rem; padding:.7rem .8rem; font:inherit; outline:none; background:white;
}
.form input:focus,.form select:focus,.form textarea:focus{box-shadow:0 0 0 4px var(--ring); border-color:#93c5fd}
.form__actions{display:flex; gap:.75rem; align-items:center; flex-wrap:wrap; margin-top:.25rem}
.form__fineprint{font-size:.85rem; color:var(--muted); margin:0}
.form output{display:block; margin-top:.5rem; font-weight:700}

.section--cta{background: linear-gradient(180deg, #f0f9ff, #ffffff)}

.footer{background:#f8fafc; border-top:1px solid rgba(2,8,23,.06)}
.footer__inner{display:flex; justify-content:space-between; align-items:center; padding:1rem 0; flex-wrap:wrap; gap:.75rem}
.footer nav{display:flex; gap:1rem}
.footer nav a{color:var(--muted)}

.muted{color:var(--muted)}

@media (max-width: 960px){
  .cards{grid-template-columns: repeat(2, minmax(0,1fr))}
  .features{grid-template-columns: repeat(2, minmax(0,1fr))}
  .contact{grid-template-columns: 1fr}
  .hero__image{position:static; width:100%; transform:none; margin:1rem auto 0}
}

@media (max-width: 720px){
  .header__inner{grid-template-columns: 1fr auto}
  .header__cta{display:none}
  .nav__toggle{display:inline-flex; align-items:center; gap:.5rem; border:1px solid #e2f0fb; padding:.5rem .75rem; border-radius:.6rem; background:white}
  .nav__list{display:none; position:absolute; right:4%; top:56px; background:white; border:1px solid #e2f0fb; border-radius:.8rem; box-shadow:var(--shadow); padding:.5rem; flex-direction:column; width:min(280px, 86vw)}
  .nav__list.show{display:flex}
}


/* ===== Breezer Theme Enhancements ===== */
:root{
  --breeze1:#e0f2fe; /* sky */
  --breeze2:#cffafe; /* mint */
  --breeze3:#ecfeff; /* ice */
  --breeze-ink:#0e7490; /* teal ink */
}

/* global animated gradient background */
body::before{
  content:"";
  position:fixed; inset:-10%;
  background:
    radial-gradient(60% 40% at 80% 10%, rgba(14,165,233,.08), transparent 60%),
    radial-gradient(50% 60% at 10% 20%, rgba(56,189,248,.10), transparent 60%);
  filter: blur(20px);
  z-index:-2;
  animation: drift 40s ease-in-out infinite alternate;
}
@keyframes drift{ to{ transform: translate3d(0,12px,0) scale(1.02);} }

.hero--breezer{
  background:
    linear-gradient(180deg, var(--breeze3), #fff 40%);
}
.bg{position:absolute; inset:0; pointer-events:none; z-index:0}
.bg--dots{background-image:url('assets/breeze-dots.svg'); background-size:cover; opacity:.35; mix-blend-mode:soft-light;
          animation: floatDots 30s ease-in-out infinite alternate; }
.bg--lines{background-image:url('assets/breeze-lines.svg'); background-size:cover; opacity:.45; mix-blend-mode:screen;
           animation: floatLines 26s ease-in-out infinite alternate-reverse;}
@keyframes floatDots{to{transform: translateY(18px) scale(1.015)}}
@keyframes floatLines{to{transform: translateY(-14px) scale(1.01)}}

.wave{height:120px; background:url('assets/breeze-waves.svg') center/cover no-repeat;}
.wave--bottom{transform: translateY(-1px)}
.wave--top{transform: scaleY(-1) translateY(1px)}

.hero__inner{position:relative; z-index:1}
.hero__badges li{background:rgba(255,255,255,.7); padding:.4rem .7rem; border-radius:.7rem; box-shadow: var(--shadow);}

/* Scroll-reveal animations */
[data-animate]{
  opacity:0; transform: translateY(14px);
  transition: opacity .7s ease, transform .7s ease, rotate .7s ease, scale .4s ease;
  will-change: transform, opacity;
}
[data-animate].in-view{ opacity:1; transform:none }
[data-animate="rise"].in-view{ transform: translateY(0); }
[data-animate="tilt"].in-view{ transform: perspective(600px) rotateX(0); }
[data-animate="pop"]{ transform: scale(.96); }
[data-animate="pop"].in-view{ transform: scale(1); }
[data-animate="tilt"]{ transform: perspective(600px) rotateX(8deg); transform-origin: top; }

/* Floating cards subtle motion */
.cards .card{ position:relative; overflow:hidden }
.cards .card::after{
  content:""; position:absolute; inset: -40% -60% auto -60%; height: 60%;
  background: radial-gradient(closest-side, rgba(56,189,248,.08), transparent 60%);
  transform: rotate(6deg);
  animation: cardGlow 10s ease-in-out infinite alternate;
}
@keyframes cardGlow{to{ transform: translateY(8px) rotate(8deg);}}

/* Parallax hero image */
.hero__image{ will-change: transform; transition: transform .6s ease; }
.hero:hover .hero__image{ transform: rotate(-1deg) translateY(-6px); }

/* Decorative breeze elements in sections */
.section{ position:relative }
.section::before{
  content:""; position:absolute; inset: -20px -5% auto -5%; height: 120px;
  background: linear-gradient(90deg, rgba(14,165,233,.06), rgba(125,211,252,.05), rgba(14,165,233,.06));
  filter: blur(14px); pointer-events:none; border-radius: 100%;
}

/* Accessibility: reduce motion */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* --- Overflow & paint fixes to avoid right-side black bar --- */
html{background:var(--bg); overflow-x:hidden}
body{overflow-x:hidden}
.hero, .section, .footer{overflow-x:clip}
.wave{background-repeat:no-repeat; background-position:center; background-size:cover}


/* ========= Watermark rebuild ========= */
html, body { background:#ffffff; }
body { overflow-x:hidden; }
.site-watermark{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background: url('assets/logo-C-prWIbZ.jpg') center/ min(70vmin, 720px) no-repeat;
  opacity:.06; filter: saturate(0.9) blur(0.2px);
  /* Prevent pixel seams on some GPUs */
  backface-visibility:hidden; transform: translateZ(0);
}
/* Secondary soft gradient so edges never show black */
body::before{
  content:""; position:fixed; inset:-10%; z-index:-2; pointer-events:none;
  background: radial-gradient(60% 40% at 80% 10%, rgba(14,165,233,.05), transparent 60%),
              radial-gradient(50% 60% at 10% 20%, rgba(56,189,248,.06), transparent 60%);
  filter: blur(20px);
}
/* Foreground readability */
.content-focus .section, .hero, .footer{
  background: transparent;
}
.hero__inner, .cards .card, .feature, .form, .footer__inner {
  background: rgba(255,255,255,.86);
  backdrop-filter: saturate(120%) blur(2px);
  border: 1px solid rgba(2,8,23,.06);
}
.hero__inner{ border-radius: 1rem; padding: clamp(1.5rem, 3.5vw, 2.25rem); }
.cards .card, .feature, .form{ border-radius: 1rem; }

/* Replace prior big hero image: keep copy focused */
.hero__image{ display:none }

/* Keep subtle motion only on hover/focus */
[data-animate]{ opacity:1; transform:none; transition: none; }

/* Ensure no overflow bars */
.hero, .section, .footer{ overflow-x: clip; }