:root{--bg:#f7f4ee;--ink:#1d2a2f;--muted:#5b6b70;--sun:#f2a53a;--sea:#1f6f8b;--card:#fff;--line:#e3ddd2}
*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--ink);line-height:1.55}
a{color:var(--sea)}header.top{background:var(--ink);color:#fff;position:sticky;top:0;z-index:5}
.nav{max-width:1100px;margin:auto;display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1rem;padding:.7rem 1rem}
.nav .brand{font-weight:800;color:#fff;text-decoration:none;margin-right:auto}.nav .brand span{color:var(--sun)}
.nav a{color:#dfe7ea;text-decoration:none;font-size:.95rem}.nav a.solar{color:var(--sun);font-weight:700}
.nav .call{background:var(--sun);color:var(--ink);padding:.35rem .8rem;border-radius:99px;font-weight:700}
.wrap{max-width:1100px;margin:auto;padding:2rem 1rem}
.hero{background:linear-gradient(135deg,#1f6f8b,#1d2a2f);color:#fff}.hero h1{font-size:clamp(2rem,5vw,3.2rem);margin:.2rem 0}
.hero p{font-size:1.15rem;max-width:720px;color:#e8f0f2}
.btn{display:inline-block;padding:.75rem 1.2rem;border-radius:10px;background:var(--sun);color:var(--ink);font-weight:700;text-decoration:none;border:0;cursor:pointer;font-size:1rem;margin:.25rem .4rem .25rem 0}
.btn.alt{background:transparent;color:inherit;border:2px solid currentColor}
.grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:1.2rem}
.card h3{margin-top:0}.badge{display:inline-block;background:#fff3df;color:#8a5a00;border-radius:99px;padding:.15rem .6rem;font-size:.8rem;font-weight:700}
.feature{border:3px solid var(--sun)}
details{background:#fff;border:1px solid var(--line);border-radius:10px;padding:.8rem 1rem;margin:.5rem 0}summary{font-weight:700;cursor:pointer}
footer{background:var(--ink);color:#cfd8db;margin-top:2rem}footer .wrap{padding:1.5rem 1rem;font-size:.9rem}footer a{color:#fff}
.chips{display:flex;flex-wrap:wrap;gap:.4rem}.chip{border:1px solid var(--line);background:#fff;border-radius:8px;padding:.45rem .7rem;cursor:pointer}
.chip.on{background:var(--sea);color:#fff;border-color:var(--sea)}.chip[disabled]{opacity:.4;cursor:not-allowed}
input,select,textarea{width:100%;padding:.6rem;border:1px solid var(--line);border-radius:8px;font:inherit;margin:.2rem 0 .8rem}
.muted{color:var(--muted)}.err{color:#b00020}.skel{background:#ece7de;border-radius:14px;height:150px}
.video{aspect-ratio:16/9;background:#1d2a2f;color:#cfd8db;display:flex;align-items:center;justify-content:center;border-radius:12px;text-align:center;padding:1rem}

/* ---- engaging layer (video heroes, motion) ---- */
.hero{position:relative;overflow:hidden}
.hero-v{min-height:min(88vh,760px);display:flex;align-items:center;background:#1d2a2f var(--poster) center/cover no-repeat}
.hero-v .wrap{position:relative;z-index:2;padding-top:4rem;padding-bottom:4rem;width:100%}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-video{width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity 1s ease}
.hero-video.on{opacity:1}
.hero-shade{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(13,22,26,.35) 0%,rgba(13,22,26,.55) 55%,rgba(13,22,26,.85) 100%)}
.hero h1{font-size:clamp(2.4rem,7vw,4.8rem);line-height:1.02;font-weight:900;letter-spacing:-.02em;text-shadow:0 2px 24px rgba(0,0,0,.45);max-width:16ch}
.hero p{font-size:clamp(1.05rem,2.2vw,1.35rem);text-shadow:0 1px 12px rgba(0,0,0,.5)}
.hero .btn{padding:.9rem 1.4rem;font-size:1.05rem;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.hero-v .wrap>*{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.hero-v .wrap>*:nth-child(2){animation-delay:.12s}.hero-v .wrap>*:nth-child(3){animation-delay:.24s}.hero-v .wrap>*:nth-child(n+4){animation-delay:.36s}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.scroll-cue{position:absolute;left:50%;bottom:1.2rem;z-index:2;transform:translateX(-50%);color:#fff;opacity:.8;font-size:1.6rem;text-decoration:none;animation:bob 2s ease-in-out infinite}
@keyframes bob{50%{transform:translate(-50%,8px)}}
.btn{transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,.18)}
.card{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.card:hover{transform:translateY(-5px);box-shadow:0 14px 34px rgba(29,42,47,.14);border-color:var(--sun)}
h2{font-size:clamp(1.6rem,3.5vw,2.3rem);letter-spacing:-.01em}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.sticky-book{position:fixed;left:1rem;bottom:1rem;z-index:20;background:var(--sun);color:var(--ink);font-weight:800;text-decoration:none;padding:.85rem 1.25rem;border-radius:99px;box-shadow:0 10px 28px rgba(0,0,0,.28);transition:transform .2s ease,opacity .3s ease}
.sticky-book:hover{transform:translateY(-3px) scale(1.03)}
@media (max-width:600px){.sticky-book{left:1rem;right:auto;bottom:4.2rem}.hero-v{min-height:78vh}footer{padding-bottom:4.5rem}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}.hero-video{display:none}.scroll-cue{display:none}}