:root { --yellow:#ffc400; --black:#121212; --ink:#1d1d1d; --paper:#f6f4ee; --muted:#6c6a64; }
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { background:var(--paper); color:var(--ink); font-family:'DM Sans',sans-serif; }
.site-header { position:absolute; z-index:3; top:0; left:0; width:100%; display:flex; align-items:center; justify-content:space-between; padding:25px clamp(24px,6vw,95px); }
.brand { width:138px; height:138px; overflow:hidden; border-radius:50%; display:block; }
.brand img { width:100%; height:100%; display:block; object-fit:contain; }
nav { display:flex; align-items:center; gap:31px; } nav a { color:#fff; font-size:.9rem; font-weight:600; text-decoration:none; } .nav-cta { border:1px solid rgba(255,255,255,.58); border-radius:999px; padding:12px 20px; }
.hero { min-height:780px; overflow:hidden; display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(40px,7vw,120px); align-items:center; padding:145px clamp(24px,9vw,150px) 85px; background:radial-gradient(circle at 74% 35%,#393631 0, #1d1d1b 30%,#111 66%); color:#fff; }
.hero-copy { max-width:620px; position:relative; z-index:1; }.eyebrow { color:inherit; letter-spacing:.13em; font-size:.71rem; font-weight:700; display:flex; align-items:center; gap:10px; }.eyebrow span { display:inline-block; width:24px; height:2px; background:var(--yellow); }
h1,h2,h3 { font-family:Outfit,sans-serif; line-height:.98; } h1 { letter-spacing:-.052em; font-size:clamp(3.35rem,6.2vw,6.55rem); margin:20px 0 25px; } h1 em { color:var(--yellow); font-style:normal; display:block; }.hero-description { max-width:510px; font-size:1.05rem; line-height:1.7; color:#d4d1c9; }.benefits { display:grid; gap:9px; margin:26px 0 30px; list-style:none; color:#eee; font-size:.93rem; }.benefits li::before { content:'✓'; color:var(--yellow); margin-right:10px; font-weight:700; }.button { display:inline-flex; align-items:center; justify-content:center; gap:22px; padding:16px 22px; min-height:54px; text-decoration:none; font-weight:700; font-size:.84rem; border-radius:3px; transition:transform .2s ease, background .2s ease; }.button:hover { transform:translateY(-3px); }.button span { font-size:1.35rem; }.button-primary { background:var(--yellow); color:var(--black); }.button-dark { background:var(--black); color:#fff; }
.hero-media { position:relative; justify-self:center; width:min(100%,375px); }.video-card { aspect-ratio:9/14.4; position:relative; overflow:hidden; border:1px solid rgba(255,196,0,.9); border-radius:20px; background:#252525; box-shadow:0 28px 70px rgba(0,0,0,.45); }.video-card video { width:100%; height:100%; object-fit:cover; display:block; }.video-caption { position:absolute; left:14px; bottom:14px; right:14px; padding:11px 13px; border-radius:8px; background:rgba(12,12,12,.8); backdrop-filter:blur(7px); color:#fff; font-size:.68rem; display:flex; align-items:center; gap:8px; }.pulse { width:8px; height:8px; display:block; border-radius:50%; background:var(--yellow); box-shadow:0 0 0 5px rgba(255,196,0,.15); }.accent-card { position:absolute; background:var(--yellow); color:#131313; padding:18px 17px; bottom:33px; left:-72px; font-family:Outfit,sans-serif; line-height:.8; font-size:1.9rem; font-weight:800; letter-spacing:-.08em; box-shadow:0 10px 28px rgba(0,0,0,.28); }.accent-card small { font-family:'DM Sans',sans-serif; font-size:.47rem; letter-spacing:.16em; }
.section { padding:120px clamp(24px,9vw,150px); }.section-heading { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:48px; }.section-heading h2,.why-copy h2,.contact h2 { font-size:clamp(2.55rem,4.5vw,4.8rem); letter-spacing:-.052em; margin-top:19px; }.service-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid #d8d5cd; }.service-card { min-height:265px; padding:29px 25px; border-right:1px solid #d8d5cd; display:flex; flex-direction:column; }.service-card:first-child { border-left:1px solid #d8d5cd; }.service-card.featured { background:var(--yellow); }.service-number { color:#89857c; font-size:.73rem; font-weight:700; }.service-card h3 { margin:42px 0 14px; font-size:1.65rem; letter-spacing:-.04em; }.service-card p { color:#5f5c55; max-width:250px; font-size:.89rem; line-height:1.65; }
.why-us { background:#171716; color:#fff; display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(45px,8vw,140px); align-items:center; }.why-image { aspect-ratio:1; overflow:hidden; background:#10100f; }.why-image img { width:100%; height:100%; object-fit:contain; }.why-copy>p:not(.eyebrow) { color:#bcb9b2; max-width:470px; line-height:1.75; margin:25px 0 38px; }.difference-grid { display:grid; grid-template-columns:1fr 1fr; gap:0; border-top:1px solid #42413d; }.difference-grid div { min-height:96px; border-bottom:1px solid #42413d; display:flex; gap:15px; align-items:center; }.difference-grid strong { color:var(--yellow); font-size:.77rem; }.difference-grid span { font-size:.85rem; line-height:1.35; }
.contact { text-align:center; padding:108px 24px; background:var(--yellow); }.contact .eyebrow { justify-content:center; }.contact h2 { margin:18px 0; }.contact>p:not(.eyebrow) { color:#4f4300; margin-bottom:27px; }.whatsapp-float { position:fixed; right:20px; bottom:20px; z-index:5; display:grid; place-items:center; width:58px; height:58px; border-radius:50%; background:#25d366; box-shadow:0 8px 23px rgba(0,0,0,.25); }.whatsapp-float img { width:34px; height:34px; object-fit:contain; } footer { background:#121212; padding:25px; color:#aaa69c; text-align:center; font-size:.75rem; }
@media (max-width:760px) { .site-header { padding:17px 20px; }.brand img { width:76px; height:76px; } nav { gap:15px; } nav a:not(.nav-cta) { display:none; }.nav-cta { padding:10px 14px; font-size:.74rem; }.hero { grid-template-columns:1fr; padding:128px 24px 70px; min-height:auto; }.hero-copy { text-align:left; }.hero-media { grid-row:2; margin-top:5px; width:min(76vw,315px); }.accent-card { left:-38px; bottom:25px; }.section { padding:76px 24px; }.section-heading { display:block; }.service-grid { grid-template-columns:1fr; }.service-card,.service-card:first-child { border-left:1px solid #d8d5cd; border-bottom:1px solid #d8d5cd; min-height:195px; }.service-card h3 { margin:26px 0 10px; }.why-us { grid-template-columns:1fr; gap:38px; }.why-image { height:310px; }.difference-grid { margin-top:0; }.contact { padding:80px 24px; } }