:root{--ink:#0f1722;--ink2:#172234;--amber:#ffb400;--copper:#c9795a;--paper:#f6f3ee;--text:#2b3340;--muted:#6b7480}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{font-family:Barlow,Arial,sans-serif;color:var(--text);background:var(--paper);line-height:1.6}
h1,h2,h3{font-family:'Bricolage Grotesque',Arial,sans-serif;line-height:1.1}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px}

/* nav */
header{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:0 5%;height:68px;background:rgba(15,23,34,.92);backdrop-filter:blur(8px);color:#fff}
.logo{display:flex;align-items:center;gap:10px;font-family:'Bricolage Grotesque';font-weight:800;font-size:18px;line-height:1.05}
.logo span{font-size:28px;filter:drop-shadow(0 0 8px var(--amber))}
.logo small{display:block;color:var(--copper);font-weight:600;font-size:13px}
nav{display:flex;gap:6px}
nav a{padding:8px 14px;border-radius:6px;font-weight:500;transition:.2s}
nav a:hover{color:var(--amber);background:rgba(255,255,255,.06)}
nav a.cta{background:var(--amber);color:var(--ink);font-weight:600}
nav a.cta:hover{background:#fff;color:var(--ink)}

/* hero */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;padding:110px 5% 60px;color:#fff;background:linear-gradient(135deg,#0f1722,#1d2b44);overflow:hidden}
.hero-img{position:absolute;inset:0;background:url('https://images.unsplash.com/photo-1621905251189-08b45d6a269e?auto=format&fit=crop&w=1800&q=70') center/cover;opacity:.28}
.glow{position:absolute;inset:0;background:radial-gradient(circle at 75% 35%,rgba(255,180,0,.3),transparent 38%);transition:opacity .4s}
#lt{position:absolute;opacity:0;pointer-events:none}
#lt:checked ~ .glow{opacity:0}
#lt:focus-visible ~ .hero-in .bulb{outline:3px solid var(--amber);outline-offset:6px;border-radius:12px}
.hero-in{position:relative;z-index:2;max-width:1150px;margin:0 auto;width:100%;display:grid;grid-template-columns:1.25fr .75fr;gap:40px;align-items:center}
.hero h1{font-size:clamp(40px,6.4vw,84px);font-weight:800;letter-spacing:-1.5px}
.hero h1 em{font-style:normal;color:var(--amber);display:inline-block;animation:flicker 4s infinite}
.hero p{max-width:520px;margin:22px 0 32px;font-size:19px;color:#d4dae3}
.btn{display:inline-block;padding:14px 28px;border-radius:8px;font-weight:600;border:2px solid var(--amber);transition:.25s;cursor:pointer;font-size:16px;font-family:inherit}
.btn.fill{background:var(--amber);color:var(--ink)}
.btn.fill:hover{background:transparent;color:var(--amber);transform:translateY(-3px);box-shadow:0 10px 25px rgba(255,180,0,.25)}
.btn.line{color:#fff;margin-left:10px;border-color:rgba(255,255,255,.4)}
.btn.line:hover{border-color:var(--amber);color:var(--amber)}
.bulb{justify-self:center;text-align:center;cursor:pointer;user-select:none;background:none;border:0;color:#fff;font-family:inherit}
.bulb .glass{font-size:clamp(120px,18vw,210px);display:block;filter:drop-shadow(0 0 30px rgba(255,180,0,.7));animation:swing 5s ease-in-out infinite;transform-origin:top center}
#lt:checked ~ .hero-in .glass{filter:grayscale(1) brightness(.5);animation-play-state:paused}
.bulb small{display:block;color:#aab3c0;margin-top:6px}
@keyframes swing{50%{transform:rotate(4deg)}0%,100%{transform:rotate(-4deg)}}
@keyframes flicker{0%,92%,96%,100%{opacity:1;text-shadow:0 0 22px rgba(255,180,0,.55)}93%{opacity:.55;text-shadow:none}95%{opacity:.8}}

/* marquee */
.offer{background:var(--amber);color:var(--ink);font-weight:600;overflow:hidden;white-space:nowrap;padding:12px 0}
.offer div{display:inline-block;padding-left:100%;animation:slide 22s linear infinite}
@keyframes slide{to{transform:translateX(-100%)}}

section{padding:90px 5%}
.wrap{max-width:1150px;margin:0 auto}
.head{max-width:620px;margin-bottom:44px}
.head h2{font-size:clamp(30px,4vw,48px);margin-bottom:12px;letter-spacing:-.5px}
.head p{color:var(--muted);font-size:18px}

/* services */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px}
.svc{background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 6px 22px rgba(15,23,34,.08);transition:.35s}
.svc:hover{transform:translateY(-10px);box-shadow:0 18px 40px rgba(15,23,34,.18)}
.pic{height:170px;background:linear-gradient(135deg,var(--ink2),var(--copper));position:relative;overflow:hidden}
.pic img{width:100%;height:100%;object-fit:cover;transition:.6s}
.svc:hover .pic img{transform:scale(1.12)}
.pic b{position:absolute;right:12px;bottom:-18px;font-size:36px;background:var(--amber);width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font-weight:400;bottom:12px}
.svc div.t{padding:22px}
.svc h3{font-size:21px;margin-bottom:8px}
.svc p{color:var(--muted);font-size:15px}

/* about */
.about{background:var(--ink);color:#fff}
.about .wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.about .photo{border-radius:16px;min-height:380px;background:linear-gradient(135deg,var(--ink2),var(--copper)) center/cover;box-shadow:20px 20px 0 rgba(255,180,0,.9)}
.about p{color:#c9d0db;font-size:18px;margin:16px 0 26px}
.stats{display:flex;gap:34px;flex-wrap:wrap}
.stats b{display:block;font-family:'Bricolage Grotesque';font-size:44px;color:var(--amber)}
.stats span{color:#aab3c0;font-size:14px}

/* reviews */
.rev{background:#fff;border-radius:14px;padding:28px;box-shadow:0 6px 22px rgba(15,23,34,.08);border-top:4px solid var(--amber);transition:.3s}
.rev:hover{transform:translateY(-6px)}
.av{width:54px;height:54px;border-radius:50%;background:var(--ink);display:grid;place-items:center;font-size:26px;margin-bottom:12px}
.rev h4{font-size:18px}.stars{color:var(--amber);letter-spacing:2px;margin:4px 0 10px}
.rev p{color:var(--muted)}
.rform{max-width:560px;margin:50px auto 0;background:var(--ink);padding:32px;border-radius:14px;color:#fff}
.rform h3{margin-bottom:18px;font-size:24px}

/* forms */
form{display:grid;gap:14px}
input,select,textarea{width:100%;padding:13px 14px;border-radius:8px;border:1.5px solid #cfd5de;font:inherit;background:#fff;color:var(--text)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 3px rgba(255,180,0,.3)}
button.btn{width:100%}
.ok{display:none;background:#e7f7ec;color:#17603a;padding:14px;border-radius:8px;font-weight:600}
.ok:target{display:block;animation:pop .4s}
@keyframes pop{from{transform:scale(.9);opacity:0}}

/* contact */
.contact .wrap{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.info{display:grid;gap:16px;align-content:start}
.info div{display:flex;gap:14px;align-items:center;background:#fff;padding:18px;border-radius:12px;box-shadow:0 4px 16px rgba(15,23,34,.07)}
.info span{font-size:28px}
.info small{color:var(--muted);display:block}
.card-form{background:#fff;padding:30px;border-radius:14px;box-shadow:0 6px 22px rgba(15,23,34,.08)}

footer{background:#0a1019;color:#8d97a5;text-align:center;padding:26px}

/* reveal on scroll */
.rv{animation:rise .8s both}
@supports (animation-timeline:view()){.rv{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 45%}}

@media(max-width:820px){
 nav{gap:0;overflow-x:auto}
 nav a{padding:8px 9px;font-size:14px}
 .logo div{display:none}
 .hero-in,.about .wrap,.contact .wrap{grid-template-columns:1fr}
 .about .photo{min-height:260px;box-shadow:10px 10px 0 rgba(255,180,0,.9)}
 section{padding:64px 5%}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}html{scroll-behavior:auto}}

nav a.active:not(.cta){color:var(--amber)}
.phero{position:relative;padding:150px 5% 80px;text-align:center;color:#fff;background:linear-gradient(135deg,#0f1722,#1d2b44);overflow:hidden}
.phero::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 20%,rgba(255,180,0,.25),transparent 40%)}
.phero>*{position:relative;z-index:1}
.phero h1{font-size:clamp(36px,6vw,66px);font-weight:800;letter-spacing:-1px;animation:rise .8s both}
.phero p{max-width:560px;margin:14px auto 0;color:#cfd6e0;font-size:18px;animation:rise .8s .15s both}
@keyframes rise{from{opacity:0;transform:translateY(24px)}}
.band{background:var(--amber);text-align:center;padding:60px 5%}
.band h2{font-size:clamp(26px,4vw,40px);margin-bottom:18px;color:var(--ink)}
.band .btn{background:var(--ink);color:#fff;border-color:var(--ink)}
.band .btn:hover{background:transparent;color:var(--ink)}
.more{text-align:center;margin-top:40px}
.more .btn{color:var(--ink);border-color:var(--ink)}
.more .btn:hover{background:var(--ink);color:var(--amber)}