:root { --bg:#0e1217; --text:#eef3fa; --muted:#9fb0c4; --accent:#ff8f45; --accent-2:#3fc7ae; --line:#273241; --card:#161f29; }
* { box-sizing: border-box; }
html,body { margin:0; padding:0; }
body { font-family:"Manrope","Segoe UI",sans-serif; background:radial-gradient(1200px 500px at 12% -10%, #26384a 0%, transparent 60%),radial-gradient(800px 400px at 100% 0%, #273123 0%, transparent 60%),var(--bg); color:var(--text); }
.noise { position:fixed; inset:0; pointer-events:none; background-image:radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px); background-size:3px 3px; opacity:.12; }
.topbar { position:sticky; top:0; z-index:5; display:flex; justify-content:space-between; align-items:center; padding:14px 5vw; background:rgba(14,18,23,.75); border-bottom:1px solid var(--line); backdrop-filter:blur(10px); }
.brand { display:flex; gap:12px; align-items:center; font-weight:800; letter-spacing:.08em; font-size:12px; }
.brand-mark { width:28px; height:28px; display:grid; place-items:center; border-radius:8px; background:linear-gradient(145deg,var(--accent),#ffc082); color:#1c1207; font-weight:900; }
.nav { display:flex; gap:18px; }
.nav a { text-decoration:none; color:var(--muted); font-weight:700; font-size:14px; }
.nav a:hover { color:var(--text); }
main { width:min(1240px,94vw); margin:0 auto; }
.hero { display:grid; grid-template-columns:1.1fr 1fr; gap:30px; align-items:center; padding:56px 0 26px; }
.eyebrow { color:var(--accent-2); text-transform:uppercase; letter-spacing:.1em; font-weight:800; font-size:12px; }
h1,h2 { font-family:"Cormorant Garamond",serif; line-height:.95; margin:0 0 16px; }
h1 { font-size:clamp(42px,6vw,84px); }
h2 { font-size:clamp(34px,4.8vw,58px); }
.lead { color:var(--muted); max-width:62ch; }
.cta-row { display:flex; flex-wrap:wrap; gap:12px; margin-top:20px; }
.btn { display:inline-flex; text-decoration:none; padding:12px 16px; border-radius:12px; font-weight:800; border:1px solid transparent; transition:.25s ease; }
.btn-main { background:linear-gradient(145deg,var(--accent),#ffbf78); color:#281406; box-shadow:0 10px 25px rgba(255,143,69,.28); }
.btn-main:hover { transform:translateY(-2px); }
.btn-ghost { border-color:#3a4759; color:var(--text); background:rgba(255,255,255,.03); }
.btn-ghost:hover { border-color:#7086a3; }
.hero-art a { display:block; }
.hero-art img { width:100%; border-radius:18px; border:1px solid #344457; box-shadow:0 24px 60px rgba(0,0,0,.45); }
.works,.pipeline { padding:44px 0 10px; }
.section-head p { color:var(--accent-2); letter-spacing:.09em; text-transform:uppercase; font-size:12px; font-weight:800; margin:0 0 8px; }
.gallery-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.gallery-card { display:block; text-decoration:none; color:#dfe7ef; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:#131a22; transition:transform .18s ease, border-color .18s ease; }
.gallery-card:hover { transform:translateY(-3px); border-color:#6f8eb3; }
.gallery-card img { width:100%; height:280px; object-fit:cover; display:block; }
.gallery-card span { display:block; padding:10px 12px; font-weight:700; font-size:13px; }
.steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.step { border:1px solid var(--line); background:linear-gradient(165deg,#1a2430,#121922); border-radius:14px; padding:14px; }
.step span { display:inline-block; border:1px solid #4b637d; color:#bfd6f0; border-radius:999px; padding:3px 10px; font-size:12px; font-weight:800; }
.step h4 { margin:10px 0 6px; }
.step p { margin:0; color:var(--muted); }
.contact { margin:40px 0 80px; border:1px solid #3a465a; background:linear-gradient(130deg,rgba(28,38,52,.9),rgba(19,25,33,.95)); border-radius:18px; padding:24px; }
@media (max-width:1100px){ .gallery-grid{grid-template-columns:repeat(3,minmax(0,1fr));} }
@media (max-width:900px){ .hero{grid-template-columns:1fr;} .steps{grid-template-columns:1fr 1fr;} .gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:640px){ .topbar{padding-inline:4vw;} .nav{display:none;} .steps{grid-template-columns:1fr;} .gallery-grid{grid-template-columns:1fr;} .gallery-card img{height:auto;} }