:root{--ink:#11110f;--paper:#f2efe7;--lime:#d8ff63;--line:rgba(17,17,15,.18)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif}
.shell{width:min(1360px,calc(100% - 64px));margin:auto}
.topbar{height:100px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
.brand{display:block;color:inherit;text-decoration:none}
.brand img{display:block;width:260px;height:auto}
.contact{color:inherit;text-decoration:none;font-size:13px;text-transform:uppercase;letter-spacing:.08em;border-bottom:1px solid;padding-bottom:6px}
.contact span{margin-left:15px}
.hero{min-height:690px;padding:64px 0 58px;display:flex;flex-direction:column;justify-content:space-between}
.eyebrow{display:flex;justify-content:space-between;font-size:12px;text-transform:uppercase;letter-spacing:.16em}
.hero h1{font-family:Georgia,serif;font-size:clamp(72px,10vw,158px);font-weight:400;letter-spacing:-.075em;line-height:.79;margin:60px 0}
.hero h1 em{font-weight:400;color:transparent;-webkit-text-stroke:1.5px var(--ink)}
.hero-foot{display:flex;align-items:end;justify-content:space-between}
.hero-foot p{font-size:20px;line-height:1.45;width:min(590px,62%);margin:0}
.seal{width:116px;height:116px;border-radius:50%;background:var(--lime);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:11px;line-height:1;text-align:center;transform:rotate(7deg)}
.seal strong{font:700 34px/1 Georgia,serif}
.seal small{font-size:7px;letter-spacing:.1em;margin-top:7px}
.portfolio{padding:120px 0}
.section-intro{display:grid;grid-template-columns:1fr 2fr;gap:20px;border-top:1px solid var(--line);padding-top:24px;margin-bottom:65px}
.section-intro p{margin:0;max-width:620px;font-size:18px;line-height:1.5}
.section-intro p:first-child{text-transform:uppercase;letter-spacing:.14em;font-size:11px}
.demo-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px 26px}
.demo-card{text-decoration:none;color:inherit;display:block}
.demo-art{height:clamp(310px,42vw,570px);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;transition:transform .4s ease}
.demo-card:hover .demo-art{transform:translateY(-8px)}
.demo-art:before,.demo-art:after{content:"";position:absolute}
.demo-art span{font:400 clamp(110px,15vw,220px)/1 Georgia,serif;z-index:1}
.demo-art i{position:absolute;right:22px;bottom:22px;background:#fff;color:#111;border-radius:50px;padding:12px 16px;font-size:11px;font-style:normal;text-transform:uppercase;letter-spacing:.1em;opacity:0;transform:translateY(10px);transition:.3s}
.demo-card:hover .demo-art i{opacity:1;transform:none}
.barber .demo-art{background:#20201e;color:#b99664}
.barber .demo-art:before{width:40%;height:140%;border:1px solid #b99664;transform:rotate(28deg)}
.cake .demo-art{background:#d8a58e;color:#fff2e8}
.cake .demo-art:before{width:230px;height:230px;border:1px solid #fff2e8;border-radius:50%}
.beauty .demo-art{background:#d7c3bb;color:#4a352f}
.beauty .demo-art:after{width:42%;height:80%;border-radius:50% 50% 0 0;background:#eadfd8;bottom:-20%}
.build .demo-art{background:#0e2940;color:#f47b3a}
.build .demo-art:before{left:12%;top:12%;width:62%;height:70%;border:22px solid #d7d1c5;border-right:0}
.villa .demo-art{background:#6aa7b6;color:#f4ead7}
.retail .demo-art{background:#dfc8ad;color:#2b211d}
.retail .demo-art:before{width:48%;height:80%;border:1px solid #2b211d;border-radius:50% 50% 0 0;bottom:-20%;transform:rotate(-8deg)}
.auto .demo-art{background:#0b0e12;color:#178cff}
.auto .demo-art:before{width:70%;height:32%;border:3px solid #178cff;border-top-left-radius:80% 100%;border-top-right-radius:45% 100%;transform:skewX(-10deg)}
.auto .demo-art:after{width:12px;height:12px;background:#fff;transform:rotate(45deg);right:18%;top:22%;box-shadow:0 0 25px #178cff}
.demo-copy{display:flex;justify-content:space-between;gap:30px;padding-top:22px}
.demo-copy small{text-transform:uppercase;letter-spacing:.12em;font-size:9px}
.demo-copy h2{font:400 clamp(28px,3.2vw,48px)/1 Georgia,serif;margin:8px 0 0}
.demo-copy p{width:42%;font-size:14px;line-height:1.55;margin:0}
.offer{background:#11110f;color:#f2efe7;padding:120px 0}
.offer-inner>p{text-transform:uppercase;letter-spacing:.14em;font-size:11px}
.offer h2{font:400 clamp(55px,8vw,118px)/.9 Georgia,serif;max-width:1100px;margin:70px 0}
.offer-foot{display:flex;justify-content:space-between;align-items:end}
.offer-foot span{font-size:14px;line-height:1.5;color:#aaa}
.offer-foot a{display:inline-flex;align-items:center;justify-content:space-between;width:260px;background:var(--lime);color:#111;text-decoration:none;padding:20px 22px;border-radius:50px;text-transform:uppercase;letter-spacing:.08em;font-size:12px}
.offer-foot b{font-size:18px}
.footer{min-height:100px;display:grid;grid-template-columns:240px 1fr auto;gap:30px;align-items:center;font-size:11px;text-transform:uppercase;letter-spacing:.08em}
.footer img{display:block;width:220px;height:auto}
@media(max-width:760px){.shell{width:min(100% - 32px,1360px)}
.topbar{height:78px}
.brand img{width:190px}
.contact{font-size:0}
.contact:after{content:"WhatsApp ↗";font-size:11px}
.hero{min-height:610px;padding:40px 0}
.eyebrow{font-size:9px}
.hero h1{font-size:19vw;line-height:.86;margin:50px 0}
.hero-foot p{width:72%;font-size:16px}
.seal{width:88px;height:88px}
.demo-grid{grid-template-columns:1fr;gap:55px}
.demo-art{height:390px}
.section-intro{grid-template-columns:1fr;gap:18px}
.portfolio{padding:80px 0}
.demo-copy{display:block}
.demo-copy p{width:100%;margin-top:16px}
.offer{padding:80px 0}
.offer h2{margin:45px 0 70px}
.offer-foot{display:block}
.offer-foot a{margin-top:30px;width:100%}
.footer{height:auto;padding:30px 0;display:block}
.footer img{width:190px;margin-bottom:20px}
.footer span{display:block;margin:8px 0}
}
