/* QualityShades v2 — "Sun & Shade". Pure CSS. Outfit (headings) + Inter (body) */
:root{color-scheme:light;--bg:#f7fcf7;--card:#ffffff;--soft:#e8f5e8;--line:#d2e6d2;--ink:#0f1a0f;--muted:#566856;--accent:#41a541;--accent-dark:#2f7f2f;--accent-light:#e8f5e8;--on-accent:#06130a;--wa:#25D366;--r:28px;--max:1160px}
:root[data-theme=dark]{color-scheme:dark;--bg:#0b110b;--card:#131d13;--soft:#0f170f;--line:#243324;--ink:#eef7ee;--muted:#9bb09b}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){color-scheme:dark;--bg:#0b110b;--card:#131d13;--soft:#0f170f;--line:#243324;--ink:#eef7ee;--muted:#9bb09b}}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.65 Inter,system-ui,-apple-system,"Segoe UI",sans-serif;padding-bottom:env(safe-area-inset-bottom,0)}
h1,h2,h3,.display{font-family:Outfit,system-ui,sans-serif;font-weight:600;letter-spacing:-.04em;line-height:1;margin:0}
a{color:inherit;text-decoration:none}img{max-width:100%;display:block}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.eyebrow{font:600 12px/1 Outfit,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:10px}
.eyebrow:before{content:"";width:22px;height:2px;background:var(--accent)}.center .eyebrow,.eyebrow.center{justify-content:center}
h2{font-size:clamp(34px,5.2vw,60px);margin-top:16px}h2 span{color:var(--muted)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:52px;padding:0 28px;border-radius:99px;font:600 14px Outfit,sans-serif;letter-spacing:.02em;border:1px solid transparent;cursor:pointer;transition:.25s}
.btn:hover{transform:translateY(-2px)}.btn-dark{background:var(--ink);color:var(--bg)}.btn-light{background:#fff;color:#0e1a0e}.btn-ghost{border-color:rgba(255,255,255,.45);color:#fff;background:rgba(255,255,255,.12);backdrop-filter:blur(6px)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--accent)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* floating pill header */
header{position:sticky;top:0;z-index:40;padding:12px 12px 0;padding-top:max(12px,env(safe-area-inset-top))}
header .wrap{display:flex;align-items:center;gap:12px;height:66px;max-width:var(--max);padding:0 10px 0 12px;border-radius:99px;background:color-mix(in srgb,var(--card) 82%,transparent);backdrop-filter:blur(18px);border:1px solid var(--line);transition:box-shadow .3s}
header.scrolled .wrap{box-shadow:0 12px 36px rgba(0,0,0,.16)}
.brand{margin-right:auto;background:#fff;border-radius:99px;padding:5px 14px}.brand img{height:36px;width:auto}
nav{display:flex;align-items:center;gap:6px}
nav a.l{font:500 13px Outfit,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:9px 16px;border-radius:99px;transition:.2s}
nav a.l:hover{color:var(--ink);background:var(--soft)}nav a.l.on{color:var(--ink);background:var(--soft)}
nav .btn-dark{background:var(--accent);color:var(--on-accent);height:44px;margin-left:6px}
.theme,.burger{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:none;color:var(--ink);font-size:18px;cursor:pointer;transition:.25s}.theme:hover,.burger:hover{background:var(--soft);transform:rotate(15deg)}.burger{display:none}
@media(max-width:900px){.burger{display:block}nav{position:absolute;top:calc(100% + 8px);left:12px;right:12px;flex-direction:column;align-items:stretch;gap:2px;background:var(--card);border:1px solid var(--line);border-radius:24px;padding:12px;display:none}nav.open{display:flex}nav a.l{padding:14px 16px}nav .btn-dark{margin:8px 0 0}}
/* heroes */
.hero,.page-hero{position:relative;color:#fff;margin:12px 12px 0;border-radius:36px;overflow:hidden;background:#111 url(../assets/img/hero-services.webp) center/cover}
.hero:before,.page-hero:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05) 0%,rgba(0,0,0,.25) 40%,rgba(0,0,0,.85) 100%)}
.hero{min-height:min(84vh,760px);display:flex;align-items:flex-end;margin-top:-78px;padding-top:78px;background-position:center 14%}
.hero .wrap,.page-hero .wrap{position:relative;width:100%}
.hero .wrap{padding:260px 40px 120px}.hero .eyebrow,.page-hero .eyebrow{color:rgba(255,255,255,.75)}
.hero h1{font-size:clamp(42px,7vw,92px);margin-top:20px;max-width:900px}.hero h1 span{color:var(--accent)}
.hero p{max-width:540px;margin:22px 0 0;font-size:17px;color:rgba(255,255,255,.85)}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px}.chips span{font:500 12px Outfit,sans-serif;letter-spacing:.08em;text-transform:uppercase;padding:9px 16px;border-radius:99px;background:rgba(255,255,255,.14);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.25)}
.page-hero{margin-top:-78px;padding:190px 0 56px;display:flex;align-items:flex-end;min-height:420px;background-position:center 30%}
.page-hero h1{font-size:clamp(40px,6.4vw,76px);margin-top:16px}.page-hero p{max-width:560px;color:rgba(255,255,255,.85);margin:18px 0 0}
/* stats */
.stats{padding:0 24px;margin:-56px 0 0;position:relative;z-index:3}
.stats .wrap{max-width:var(--max);display:grid;grid-template-columns:repeat(4,1fr);padding:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 20px 50px rgba(0,0,0,.12)}
.stats div{padding:26px 14px;text-align:center;border-left:1px solid var(--line)}.stats div:first-child{border:0}
.stats b{display:block;font:600 15px Outfit,sans-serif;letter-spacing:.06em;text-transform:uppercase}.stats span{font-size:12px;color:var(--muted)}
@media(max-width:700px){.stats .wrap{grid-template-columns:1fr 1fr}.stats div:nth-child(3){border-left:0}.stats div:nth-child(n+3){border-top:1px solid var(--line)}}
section{padding:96px 0}.stats+section,.marquee+section{padding-top:84px}
.marquee{overflow:hidden;margin:72px 0 0;padding:20px 0;border-block:1px solid var(--line)}
.marquee div{display:flex;gap:44px;width:max-content;animation:mq 32s linear infinite;font:600 clamp(24px,3.6vw,42px) Outfit,sans-serif;letter-spacing:-.02em;white-space:nowrap}
.marquee i{font-style:normal;color:var(--accent)}@keyframes mq{to{transform:translateX(-50%)}}
/* mark / split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}@media(max-width:860px){.split{grid-template-columns:1fr;gap:34px}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:36px}
.card .tile-logo{background:#fff;border-radius:22px;padding:26px}.card img{width:300px;margin:0 auto}
.legend{margin-top:22px;display:grid;gap:12px;font-size:13px}.legend i{display:inline-block;vertical-align:middle;margin-right:14px;background:var(--accent);border-radius:99px}
.split p{color:var(--muted)}.split p strong{color:var(--ink)}
.pills{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:28px}
.pill{border:1px solid var(--line);background:var(--card);border-radius:22px;padding:20px}.pill.d{background:var(--accent);color:var(--on-accent);border:0}
.pill b{font:600 22px Outfit,sans-serif;display:block}.pill span{font-size:11px;letter-spacing:.08em;text-transform:uppercase;opacity:.7}
/* gallery */
.dark{background:#0e1a0e;color:#eef7ee;margin:0 12px;border-radius:36px}.dark .eyebrow{color:rgba(255,255,255,.65)}.dark h2 span{color:rgba(255,255,255,.5)}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}.head p{max-width:360px;font-size:14px;margin:0;color:var(--muted)}.dark .head p{color:rgba(255,255,255,.6)}
.grid{columns:3 260px;column-gap:20px;margin-top:44px}
.tile{display:block;position:relative;width:100%;margin:0 0 20px;padding:0;border:0;border-radius:24px;overflow:hidden;background:#222;break-inside:avoid;cursor:zoom-in;color:#fff;text-align:left;transition:transform .3s,box-shadow .3s}
.tile img{width:100%;height:auto;transition:transform .6s}.tile:hover img{transform:scale(1.05)}.tile:hover{box-shadow:0 18px 40px rgba(0,0,0,.35)}
.tile span{position:absolute;left:14px;bottom:14px;padding:7px 14px;border-radius:99px;font:500 12px Outfit,sans-serif;background:rgba(15,13,11,.72);backdrop-filter:blur(8px)}
/* plans & types */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px}@media(max-width:900px){.price-grid{grid-template-columns:1fr}}
.plan,.type{position:relative;overflow:hidden;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:32px;transition:transform .3s,box-shadow .3s,border-color .3s}
.plan.f{background:linear-gradient(160deg,#1d2e1d,#091209);color:#fff;border-color:#2c442c}
.plan:before,.type:before{content:"";position:absolute;left:0;top:0;height:4px;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .45s}
.plan:hover,.type:hover,.card:hover,.pill:hover,.info a:hover{transform:translateY(-6px);box-shadow:0 22px 44px rgba(0,0,0,.16);border-color:var(--accent)}.plan:hover:before,.type:hover:before{transform:scaleX(1)}
.tag{align-self:flex-start;font:600 11px Outfit,sans-serif;letter-spacing:.1em;text-transform:uppercase;padding:7px 14px;border-radius:99px;background:color-mix(in srgb,var(--accent) 18%,transparent);border:1px solid var(--accent);color:var(--ink)}.plan.f .tag{background:var(--accent);color:var(--on-accent)}
.plan h3{font-size:32px;margin:22px 0 6px}.plan .sz{font:600 18px Outfit,sans-serif}.plan p{font-size:13px;opacity:.7;margin:10px 0 0}
.plan ul{list-style:none;padding:0;margin:22px 0 28px;display:grid;gap:9px;font-size:13px;font-weight:500}.plan li:before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-right:10px;vertical-align:middle}
.plan .btn{margin-top:auto;width:100%}.plan.f .btn{background:var(--accent);color:var(--on-accent)}.fine{margin-top:18px;font-size:12px;color:var(--muted)}
.types{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px}@media(max-width:960px){.types{grid-template-columns:1fr 1fr}}@media(max-width:620px){.types{grid-template-columns:1fr}}
.type{padding:28px}.type .no{font:600 40px/1 Outfit,sans-serif;color:var(--accent);letter-spacing:-.04em}.type h3{font-size:24px;margin:14px 0 6px}
.type .poles{font:600 12px Outfit,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}.type p{font-size:14px;color:var(--muted);margin:14px 0 0}
.type dl{margin:18px 0 0;display:grid;gap:10px;font-size:13px}.type dt{font:600 11px Outfit,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}.type dd{margin:2px 0 0}
.type .badge{align-self:flex-start;margin-top:16px;font:600 11px Outfit,sans-serif;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--accent);border-radius:99px;padding:5px 12px}
.help{margin-top:36px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:28px 32px}.help b{font:600 22px Outfit,sans-serif}.help span{display:block;color:var(--muted);font-size:14px}
/* steps */
.steps{background:transparent}.center{text-align:center}
.steps ol{list-style:none;margin:54px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;text-align:left}@media(max-width:760px){.steps ol{grid-template-columns:1fr}}
.steps li{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:30px;transition:transform .3s,box-shadow .3s}.steps li:hover{transform:translateY(-6px);box-shadow:0 22px 44px rgba(0,0,0,.14)}
.n{width:60px;height:60px;border-radius:50%;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;font:600 22px Outfit,sans-serif;transition:transform .3s}.steps li:hover .n{transform:scale(1.1) rotate(-8deg)}
.steps h3{margin:22px 0 8px;font-size:20px}.steps p{margin:0;font-size:14px;color:var(--muted)}
/* CTA band + contact */
.cta-band{border-radius:36px;background:var(--accent-dark);color:#fff;padding:64px;display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center}@media(max-width:860px){.cta-band{grid-template-columns:1fr;padding:36px 24px}}
.cta-band h2 span{color:rgba(255,255,255,.6)}.cta-band p{color:rgba(255,255,255,.82);max-width:470px}.cta-band .row{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.cta-band .btn-light{background:#fff;color:var(--accent-dark)}.cta-band .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55);backdrop-filter:none}
.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:40px}@media(max-width:860px){.contact-grid{grid-template-columns:1fr}}
.info{display:grid;gap:14px}.info a,.info div.i{display:block;border:1px solid var(--line);background:var(--card);border-radius:22px;padding:18px 22px;transition:transform .3s,box-shadow .3s,border-color .3s}
.info small{display:block;font:600 11px Outfit,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}.info b{font:500 18px Outfit,sans-serif}
.cta-band .info a{background:#fff;color:#0f1a0f;border-color:transparent}.cta-band .info small{color:var(--accent-dark)}
form{display:grid;gap:16px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:32px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}@media(max-width:560px){.two{grid-template-columns:1fr}}
label{display:grid;gap:6px;font:500 13px Outfit,sans-serif;letter-spacing:.04em}
input,select,textarea{font:inherit;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:14px;width:100%}input:focus,select:focus,textarea:focus{border-color:var(--accent)}.note{font-size:12px;color:var(--muted);margin:0}
/* footer */
footer{background:#0e1a0e;color:#eef7ee;margin:40px 12px 12px;border-radius:36px;padding:72px 0 40px}
footer img{height:70px;width:auto;background:#fff;border-radius:16px;padding:8px 12px}footer p{color:rgba(243,238,229,.65)!important}
.fgrid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:40px}@media(max-width:760px){.fgrid{grid-template-columns:1fr}}
footer h4{margin:0 0 14px;font:600 12px Outfit,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}footer ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:14px;color:rgba(243,238,229,.8)}footer a:hover{color:var(--accent)}
.copy{display:flex;justify-content:space-between;gap:8px 24px;flex-wrap:wrap;margin-top:48px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);font-size:12px;color:rgba(243,238,229,.55)}.copy a{font-weight:600;color:#eef7ee;text-decoration:underline;text-underline-offset:3px}
.wa{position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));width:58px;height:58px;border-radius:50%;background:var(--accent);display:grid;place-items:center;box-shadow:0 12px 30px rgba(65,165,65,.45);z-index:50;animation:pulse 2.4s infinite}.wa svg{width:28px;height:28px;fill:#fff}
dialog{border:0;padding:0;background:transparent;max-width:100vw;max-height:100vh;width:100vw;height:100vh}dialog::backdrop{background:rgba(0,0,0,.92)}
.lb{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:#fff;padding:16px}.lb img{max-height:78vh;max-width:92vw;border-radius:20px;object-fit:contain}
.lb .bar{display:flex;gap:10px;align-items:center}.lb button{width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:20px;cursor:pointer}
/* motion */
@keyframes up{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(65,165,65,.5)}70%{box-shadow:0 0 0 18px rgba(65,165,65,0)}100%{box-shadow:0 0 0 0 rgba(65,165,65,0)}}
.hero .wrap>*,.page-hero .wrap>*{animation:up .9s cubic-bezier(.2,.7,.2,1) both}.hero .wrap>*:nth-child(2),.page-hero .wrap>*:nth-child(2){animation-delay:.12s}.hero .wrap>*:nth-child(3),.page-hero .wrap>*:nth-child(3){animation-delay:.24s}.hero .wrap>*:nth-child(n+4){animation-delay:.36s}
.js .rv{opacity:0;translate:0 28px;transition:opacity .8s ease var(--d,0s),translate .8s cubic-bezier(.2,.7,.2,1) var(--d,0s),transform .3s,box-shadow .3s,border-color .3s}.js .rv.in{opacity:1;translate:0 0}
@media(max-width:700px){.hero{min-height:0}.hero .wrap{padding:290px 24px 96px}.hero{background-position:center 84px;background-size:100% auto;background-repeat:no-repeat;background-color:#0e1a0e}.hero:before{background:linear-gradient(180deg,rgba(14,26,14,0) 190px,#0e1a0e 300px)}.page-hero{padding:150px 0 40px;min-height:340px}.cta-band{padding:32px 22px}.stats{margin-top:-36px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}.hero .wrap>*,.page-hero .wrap>*,.wa,.marquee div{animation:none!important}.js .rv{opacity:1;translate:none}}