:root{--mag:#D81B86;--magd:#b0136b;--ink:#000;--foot:#DDE3F5;--bg:#F7F7FC;--chip:#E6E0FA;--red:#FF2020;--mut:#5b5b6e;--line:#e6e6f0}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Poppins,Outfit,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:#000;background:#fff;font-size:15px;line-height:1.55}
a{color:inherit}
h1,h2,h3,h4{font-weight:700;color:#000;line-height:1.2;margin:0 0 .5em}
h1{font-size:clamp(28px,4.5vw,46px)}h2{font-size:clamp(22px,3vw,32px)}h3{font-size:18px}
p{margin:0 0 1em}
.mockbanner{background:#FFD83A;color:#000;font-size:12px;font-weight:600;text-align:center;padding:4px 8px;letter-spacing:.02em}
.mocknav{background:#fff8d6;border-bottom:1px solid #f0e2a0;font-size:11px;padding:4px 10px;display:flex;flex-wrap:wrap;gap:4px 12px;justify-content:center}
.mocknav b{color:#7a6a00}.mocknav a{color:#5b4f00;text-decoration:none}.mocknav a:hover{text-decoration:underline}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
header.site{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
header.site .wrap{display:flex;align-items:center;gap:20px;height:68px}
.logo{font-weight:800;font-size:26px;text-decoration:none;letter-spacing:-.5px}
header nav{display:flex;gap:18px;flex:1;margin-left:10px}
header nav a{text-decoration:none;font-weight:500}header nav a:hover{color:var(--mag)}
.hdr-right{display:flex;align-items:center;gap:12px}
.icon-btn{background:var(--bg);border:0;border-radius:50%;width:36px;height:36px;cursor:pointer;font-size:16px}
.btn{display:inline-block;border:0;border-radius:999px;padding:11px 24px;font:600 15px inherit;font-family:inherit;cursor:pointer;text-decoration:none;text-align:center}
.btn-primary{background:var(--mag);color:#fff}.btn-primary:hover{background:var(--magd)}
.btn-dark{background:#000;color:#fff}
.btn-outline{background:#fff;color:#000;border:1.5px solid #000}
.btn-sm{padding:8px 16px;font-size:14px}
.btn-block{display:block;width:100%}
.dd{position:relative}.dd>button{background:var(--bg);border:0;border-radius:999px;padding:8px 14px;font-family:inherit;font-weight:500;cursor:pointer}
.dd-menu{display:none;position:absolute;right:0;top:44px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.12);padding:12px;min-width:210px}
.dd.open .dd-menu{display:block}
.dd-menu a{display:block;padding:8px 10px;border-radius:8px;text-decoration:none}.dd-menu a:hover{background:var(--bg)}
.dd-menu small{display:block;padding:4px 10px;color:var(--mut)}
.burger{display:none;background:none;border:0;font-size:24px;cursor:pointer}
section{padding:56px 0}
.bg{background:var(--bg)}
.hero{background:linear-gradient(135deg,#F7F7FC 0%,#E6E0FA 100%);padding:70px 0 60px;text-align:center}
.hero p.sub{max-width:680px;margin:0 auto 28px;color:var(--mut);font-size:17px}
.searchbar{display:flex;flex-wrap:wrap;gap:10px;max-width:900px;margin:0 auto;background:#fff;padding:12px;border-radius:22px;box-shadow:0 8px 28px rgba(80,60,160,.12)}
.searchbar input{flex:1 1 220px}
input,select,textarea{font-family:inherit;font-size:15px;background:var(--bg);border:1.5px solid transparent;border-radius:12px;padding:12px 16px;outline:none;width:100%}
input:focus,select:focus,textarea:focus{border-color:var(--mag)}
.searchbar .btn{flex:0 0 auto}
.grid{display:grid;gap:20px}
.g4{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.g7{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:22px;box-shadow:0 4px 18px rgba(80,60,160,.06)}
.bg .card{border-color:transparent}
a.card{text-decoration:none;display:block;transition:transform .15s,box-shadow .15s}a.card:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(80,60,160,.16)}
.cat{text-align:center;padding:24px 14px}.cat .em{font-size:34px;display:block;margin-bottom:8px}.cat b{font-size:15px}
.ph{border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:44px;color:#fff;font-weight:700}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.chip{background:var(--chip);border-radius:999px;padding:3px 12px;font-size:12px;font-weight:500}
.stars{color:#f5a623;letter-spacing:1px}.mut{color:var(--mut)}.small{font-size:13px}
.center{text-align:center}
.iconrow{display:flex;gap:18px;overflow-x:auto;padding:6px 2px 14px}
.iconrow a{flex:0 0 auto;text-align:center;text-decoration:none;font-size:13px;font-weight:600}
.iconrow span{display:flex;width:64px;height:64px;border-radius:50%;background:var(--chip);align-items:center;justify-content:center;font-size:28px;margin:0 auto 6px}
.steps .num,.num{width:44px;height:44px;border-radius:50%;background:var(--mag);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px;margin-bottom:12px}
.cta{background:#000;color:#fff;text-align:center;border-radius:28px;padding:50px 20px}.cta h2{color:#fff}
.cta-wrap{padding:30px 0 60px}
footer.site{background:var(--foot);padding:44px 0 24px}
footer.site .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:24px}
footer.site h4{font-size:14px;margin-bottom:8px}footer.site a{display:block;text-decoration:none;font-size:14px;padding:2px 0;color:#222}footer.site a:hover{color:var(--mag)}
footer.site .copy{margin-top:26px;font-size:13px;color:#333}
.ribbon{background:repeating-linear-gradient(45deg,#fff1a8,#fff1a8 10px,#ffe680 10px,#ffe680 20px);border-bottom:2px dashed #c9a800;text-align:center;font-weight:600;font-size:12px;padding:5px;color:#5b4f00}
.split{display:grid;grid-template-columns:1fr 1fr;min-height:560px}
.split .left{background:linear-gradient(160deg,#E6E0FA,#F7F7FC);padding:60px 40px;display:flex;flex-direction:column;justify-content:center}
.split .right{padding:50px 40px;display:flex;flex-direction:column;justify-content:center;max-width:520px;width:100%;margin:0 auto}
.quote{font-size:24px;font-weight:600;line-height:1.35}
label.f{display:block;font-weight:600;font-size:13px;margin:14px 0 5px}
.rolecard{display:flex;gap:12px;align-items:center;border:2px solid var(--line);border-radius:16px;padding:16px;margin:10px 0;cursor:pointer;background:#fff}
.rolecard:has(input:checked){border-color:var(--mag);background:#fff5fa}
.rolecard input{width:auto;accent-color:var(--mag)}
.rules{list-style:none;padding:0;margin:10px 0;font-size:13px}.rules li{padding:2px 0;color:var(--mut)}.rules li:before{content:"○ ";}
.rules li.ok{color:#0a7a3a}.rules li.ok:before{content:"✔ "}
.err{color:var(--red);font-size:13px;display:none;margin-top:4px}
.tabs{display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin-bottom:24px}
.tabs button,.tabs a{background:none;border:0;padding:12px 16px;font:600 14px inherit;font-family:inherit;cursor:pointer;border-bottom:3px solid transparent;text-decoration:none;color:#000}
.tabs .on{border-color:var(--mag);color:var(--mag)}
.acc details{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 18px;margin-bottom:10px}
.acc summary{font-weight:600;cursor:pointer}
.layout{display:grid;grid-template-columns:230px 1fr;gap:34px;padding:34px 0}
.side{position:sticky;top:90px;align-self:start;display:flex;flex-direction:column;gap:2px}
.side a{padding:9px 14px;border-radius:10px;text-decoration:none;font-weight:500}.side a:hover{background:var(--bg)}.side a.on{background:var(--chip);font-weight:700}
.results{display:grid;grid-template-columns:1.25fr 1fr;gap:24px;align-items:start}
.rcard{display:flex;gap:16px;margin-bottom:16px;cursor:pointer;text-decoration:none;color:inherit}
.rcard .ph{flex:0 0 110px;height:110px;font-size:36px}
.rcard h3{font-size:16px}.price{font-weight:700;font-size:20px}
.map{height:560px;border-radius:20px;background:
 linear-gradient(90deg,transparent 49%,#fff 49%,#fff 51%,transparent 51%) 0 0/120px 120px,
 linear-gradient(0deg,transparent 49%,#fff 49%,#fff 51%,transparent 51%) 0 0/90px 90px,#dfe8e2;position:sticky;top:90px;display:flex;align-items:center;justify-content:center;color:#456;font-weight:700;position:sticky}
.pin{position:absolute;font-size:26px}
.toolbar{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin:16px 0 24px}
.toolbar select{width:auto}
.pager{display:flex;gap:8px;justify-content:center;margin:20px 0}.pager span{width:36px;height:36px;border-radius:50%;background:var(--mag);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600}
.tile{aspect-ratio:1/1.1;border-radius:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;font-size:56px;text-decoration:none;position:relative;overflow:hidden}
.tile b{font-size:18px;position:absolute;bottom:14px;left:16px;background:rgba(0,0,0,.45);padding:2px 14px;border-radius:999px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center}
.pricerow{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line)}
.chat{display:grid;grid-template-columns:280px 1fr;border:1px solid var(--line);border-radius:20px;overflow:hidden;min-height:440px}
.chat .list{background:var(--bg);padding:10px}.chat .list div{padding:12px;border-radius:12px}.chat .list .on{background:#fff}
.chat .thread{padding:20px;display:flex;flex-direction:column;gap:10px}
.bub{background:var(--chip);padding:10px 14px;border-radius:16px 16px 16px 4px;max-width:70%}.bub.me{background:var(--mag);color:#fff;align-self:flex-end;border-radius:16px 16px 4px 16px}
.pill{display:inline-block;padding:2px 12px;border-radius:999px;font-size:12px;font-weight:600;background:var(--chip)}
.pill.g{background:#d8f5e3;color:#0a7a3a}.pill.y{background:#fff1a8;color:#5b4f00}
table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:10px;border-bottom:1px solid var(--line);font-size:14px}
@media(max-width:900px){
 header nav{display:none;position:absolute;top:68px;left:0;right:0;background:#fff;flex-direction:column;padding:14px 20px;border-bottom:1px solid var(--line);margin:0}
 header nav.open{display:flex}.burger{display:block}
 .hdr-right .hide-m{display:none}
 .split,.layout,.results,.row2,.chat{grid-template-columns:1fr}
 .side{position:static;flex-direction:row;flex-wrap:wrap}
 .map{height:260px;position:static}
 footer.site .cols{grid-template-columns:1fr 1fr}
 .split .left,.split .right{padding:36px 20px}
 section{padding:38px 0}
}

/* ===== v3: images, Freeio-style layout patterns, scroll reveal (appended by gen.py) ===== */
.pimg{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit;background:#E6E0FA}
.imgbox{position:relative;overflow:hidden;border-radius:24px;background:linear-gradient(135deg,#E6E0FA,#F7F7FC)}
.imgbox .pimg{border-radius:0}
.ph{position:relative;overflow:hidden}
.ph>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.car-in{position:absolute;left:0;right:0;top:-7%;bottom:-7%;will-change:transform}
.car-in>.pimg{position:absolute;inset:0;border-radius:0}
.ratio43{aspect-ratio:4/3}.ratio54{aspect-ratio:5/4}.ratio11{aspect-ratio:1/1}
/* hero split */
.hero-split{text-align:left;padding:56px 0 64px;overflow:hidden}
.hero-split .hs{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
.hero-split h1{font-size:clamp(30px,4.4vw,52px)}
.hero-split p.sub{margin:0 0 24px;max-width:560px}
.hero-split .searchbar{margin:0 0 18px;max-width:none}
.eyebrow{display:inline-block;background:#fff;color:var(--mag);font-weight:600;font-size:13px;border-radius:999px;padding:5px 14px;margin-bottom:14px;box-shadow:0 4px 14px rgba(80,60,160,.1)}
.popular{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:22px}
.popular a{background:#fff;border-radius:999px;padding:4px 14px;font-size:13px;font-weight:500;text-decoration:none;border:1px solid var(--line)}.popular a:hover{border-color:var(--mag);color:var(--mag)}
.mini-stats{display:flex;gap:28px;flex-wrap:wrap}.mini-stats b{display:block;font-size:22px;color:var(--mag)}.mini-stats span{font-size:12px;color:var(--mut)}
.hs-media{position:relative}
.hero-car,.hero-img{position:relative;overflow:hidden;border-radius:32px;aspect-ratio:5/4;box-shadow:0 22px 50px rgba(80,60,160,.25);background:#E6E0FA}
.hero-car .slide{position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease;border-radius:0}
.hero-car:not(.live) .slide:first-child,.hero-car .slide.on{opacity:1}
.hero-car.live .slide.on{animation:kb 7s ease-out both}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.08)}}
.hero-car .dots{position:absolute;left:0;right:0;bottom:12px;display:flex;gap:7px;justify-content:center;z-index:3}
.hero-car .dots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.6);cursor:pointer;transition:all .3s}.hero-car .dots i.on{background:#fff;width:24px;border-radius:8px}
.float{position:absolute;background:#fff;border-radius:16px;padding:10px 16px;font-size:13px;font-weight:600;box-shadow:0 10px 28px rgba(80,60,160,.22);z-index:4}
.float.f1{left:-18px;bottom:46px}.float.f2{right:-10px;top:28px}
/* category image tiles */
.gcat{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.ctile{position:relative;display:block;border-radius:24px;overflow:hidden;aspect-ratio:4/3.4;text-decoration:none;color:#fff;box-shadow:0 6px 20px rgba(80,60,160,.14);transition:transform .2s,box-shadow .2s}
.ctile:hover{box-shadow:0 14px 32px rgba(80,60,160,.28)}
.ctile>img{position:absolute;inset:0;transition:transform .6s ease;border-radius:0}.ctile:hover>img{transform:scale(1.07)}
.ctile:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(60,20,90,0) 45%,rgba(60,20,90,.78))}
.ctile b{position:absolute;left:16px;bottom:14px;z-index:2;font-size:17px;color:#fff}
.ctile .cb{position:absolute;right:12px;top:12px;z-index:2;width:42px;height:42px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;box-shadow:0 4px 12px rgba(0,0,0,.2)}
.g7.gcat7{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.gcat7 .ctile{aspect-ratio:1/1.1}.gcat7 .ctile b{font-size:14px}
.iconrow span{overflow:hidden;padding:0}.iconrow span img{width:100%;height:100%;object-fit:cover;border-radius:50%}
/* popular services carousel */
.hs-head{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:22px;flex-wrap:wrap}.hs-head h2{margin:0}
.arrows{display:flex;gap:10px}.arrows button{width:44px;height:44px;border-radius:50%;border:1.5px solid #000;background:#fff;font-size:18px;cursor:pointer}.arrows button:hover{background:var(--mag);color:#fff;border-color:var(--mag)}
.hscroll{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 4px 20px;scrollbar-width:none}.hscroll::-webkit-scrollbar{display:none}
.hscroll>.card{flex:0 0 min(280px,78vw);scroll-snap-align:start}
.tcard .ph{height:170px;margin-bottom:0}
/* steps with icons */
.step{position:relative}.step .ibub{width:68px;height:68px;border-radius:22px;background:var(--chip);display:flex;align-items:center;justify-content:center;font-size:30px;margin-bottom:14px}
.step .num{position:absolute;top:18px;right:18px;margin:0;width:34px;height:34px;font-size:15px}
/* stats */
.stats{background:linear-gradient(135deg,#D81B86,#7b5cff);color:#fff;border-radius:32px;padding:38px 20px}
.stats .grid{text-align:center}.stat b{display:block;font-size:clamp(30px,4vw,46px);line-height:1.1;color:#fff}.stat span{opacity:.9;font-size:14px}
.trusted{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center}.trusted .tchip{background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 20px;font-weight:600;color:#6b6b82}
/* feature cards with photo */
.fcard{padding:0;overflow:hidden}.fcard .imgbox{border-radius:0;aspect-ratio:4/3}.fcard .fb{padding:20px 22px 24px}.fcard .fb h3{margin-bottom:6px}
.banner{display:grid;grid-template-columns:1fr 1fr;gap:0;border-radius:32px;overflow:hidden;background:linear-gradient(135deg,#E6E0FA,#F7F7FC);align-items:stretch}
.banner .bt{padding:48px 40px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.banner .bi{position:relative;min-height:260px}.banner .bi>img{position:absolute;inset:0;border-radius:0}
.banner.mag{background:linear-gradient(135deg,#D81B86,#7b5cff);color:#fff}.banner.mag h2,.banner.mag p{color:#fff}
.tcard-t{display:flex;gap:12px;align-items:center;margin-top:12px}.tcard-t img{width:48px;height:48px;border-radius:50%;object-fit:cover}
.avatar{width:84px;height:84px;border-radius:50%;object-fit:cover;border:4px solid #fff;box-shadow:0 6px 16px rgba(80,60,160,.25);margin-bottom:12px}
.cat-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;text-align:left}.cat-hero .sub{margin-left:0}
.strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}.strip .imgbox{aspect-ratio:4/3}
.tile>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s}.tile:hover>img{transform:scale(1.07)}
.tile:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(60,20,90,.6))}.tile b{z-index:2}
.rcard .ph{border-radius:16px}
/* scroll reveal: classes are added by JS only, so content stays visible without JS */
body.anim{overflow-x:clip}
@media (prefers-reduced-motion:no-preference){
 [data-rv]{transition:opacity .85s cubic-bezier(.22,.8,.3,1),transform .85s cubic-bezier(.22,.8,.3,1),filter .9s ease;transition-delay:var(--d,0ms);will-change:opacity,transform}
 [data-rv].r-pre{opacity:0;transform:translateX(72px)}
 [data-rv].r-out{opacity:0;transform:translateX(-72px)}
 [data-rv].r-in{opacity:1;transform:none;filter:none}
 [data-rv=zoom].r-pre{opacity:0;transform:scale(1.14) translateX(36px);filter:brightness(1.8) saturate(.5)}
 [data-rv].r-done{transition:transform .15s,box-shadow .15s,opacity .35s;transition-delay:0s;will-change:auto}
 .float{animation:bob 4s ease-in-out infinite}.float.f2{animation-delay:-2s}
 @keyframes bob{50%{transform:translateY(-8px)}}
}
@media (prefers-reduced-motion:reduce){.hero-car .slide{transition:none}.hero-car.live .slide.on{animation:none}.ctile>img,.tile>img{transition:none}}
@media(max-width:900px){
 .hero-split .hs,.banner,.cat-hero{grid-template-columns:1fr}
 .float.f1{left:8px}.float.f2{right:8px}
 .banner .bt{padding:30px 22px}
}