:root{
  --accent:#ff5f45;
  --accent-2:#18c6b8;
  --accent-3:#2667ff;
  --text:#111827;
  --muted:#5b6472;
  --bg:#ffffff;
  --soft:#f6f8fc;
  --line:rgba(17,24,39,.10);
  --shadow:0 18px 45px rgba(17,24,39,.08);
  --radius:22px;
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
}
a{color:inherit}
img{max-width:100%; height:auto; display:block}
.wrap{max-width:var(--max); margin:0 auto; padding:0 24px}
.skip{position:absolute; left:-9999px; top:10px; background:#111827; color:#fff; padding:10px 12px; border-radius:12px}
.skip:focus{left:20px; z-index:9999}
header{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92); backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}
.site-head{padding:18px 0 14px; text-align:center}
.brand{display:inline-block; text-decoration:none}
.brand img{width:min(760px, 90vw); margin:0 auto 10px}
nav ul{list-style:none; display:flex; justify-content:center; gap:22px; margin:0; padding:0; flex-wrap:wrap}
nav a{text-decoration:none; color:var(--muted); font-size:14px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:6px 4px; position:relative}
nav a::after{content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px; background:linear-gradient(90deg,var(--accent),var(--accent-2),var(--accent-3)); transform:scaleX(0); transform-origin:center; transition:transform .2s ease}
nav a:hover, nav a:focus{color:var(--text); outline:none}
nav a:hover::after, nav a:focus::after{transform:scaleX(1)}
.hero{padding:34px 0 48px}
.hero-grid{display:grid; grid-template-columns: 1fr 1.05fr; gap:30px; align-items:center}
@media (max-width: 980px){.hero-grid{grid-template-columns:1fr}}
.pill{display:inline-flex; align-items:center; gap:10px; padding:8px 14px; border-radius:999px; font-size:13px; font-weight:700; background:linear-gradient(90deg, rgba(255,95,69,.12), rgba(24,198,184,.12)); border:1px solid rgba(17,24,39,.08); color:var(--text)}
.dot{width:10px; height:10px; border-radius:999px; background:linear-gradient(135deg,var(--accent),var(--accent-2))}
.hero h1{margin:16px 0 14px; font-size:clamp(38px, 5vw, 66px); line-height:1.02; letter-spacing:-.04em; max-width:10ch}
.lead{margin:0 0 20px; font-size:18px; color:var(--muted); max-width:62ch}
.cta-row{display:flex; gap:14px; flex-wrap:wrap; margin-top:24px}
.btn{display:inline-flex; align-items:center; justify-content:center; text-decoration:none; border-radius:999px; padding:14px 20px; font-weight:800; border:1px solid var(--line); background:#fff; box-shadow:var(--shadow)}
.btn.primary{color:#fff; border:none; background:linear-gradient(135deg,var(--accent),var(--accent-3))}
.hero-media{position:relative; min-height:540px}
.hero-media .card{position:absolute; overflow:hidden; border-radius:26px; box-shadow:var(--shadow); background:#fff; border:1px solid var(--line)}
.hero-media .main{inset:0 0 0 60px}
.hero-media .small{width:42%; left:0; bottom:28px}
.hero-media img{width:100%; height:100%; object-fit:cover}
.hero-media .main::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(17,24,39,.08))}
@media (max-width:980px){.hero-media{min-height:420px}.hero-media .main{inset:0}.hero-media .small{display:none}}
section{padding:72px 0}
.band{background:var(--soft)}
.section-head{margin-bottom:26px}
.section-head h2{margin:0 0 10px; font-size:clamp(28px, 3vw, 42px); line-height:1.08; letter-spacing:-.03em}
.section-head p{margin:0; color:var(--muted); font-size:17px; max-width:70ch}
.services{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
@media (max-width:1000px){.services{grid-template-columns:repeat(2,1fr)}}
@media (max-width:680px){.services{grid-template-columns:1fr}}
.service{background:#fff; border:1px solid var(--line); border-radius:24px; padding:22px; box-shadow:var(--shadow)}
.service .accent{width:44px; height:6px; border-radius:999px; margin-bottom:16px; background:linear-gradient(90deg,var(--accent),var(--accent-2),var(--accent-3))}
.service h3{margin:0 0 10px; font-size:21px; line-height:1.2}
.service p{margin:0 0 14px; color:var(--muted)}
.badges{display:flex; flex-wrap:wrap; gap:8px}
.badge{font-size:12px; font-weight:700; padding:7px 10px; border-radius:999px; background:var(--soft); border:1px solid rgba(17,24,39,.08)}
.split{display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:center}
@media (max-width:980px){.split{grid-template-columns:1fr}}
.copy-card{background:#fff; border:1px solid var(--line); border-radius:24px; padding:28px; box-shadow:var(--shadow)}
.copy-card h3{margin:0 0 12px; font-size:24px; line-height:1.15}
.copy-card p, .copy-card li{color:var(--muted)}
.copy-card ul{margin:0; padding-left:20px}
.copy-card li{margin:9px 0}
.visual{border-radius:28px; overflow:hidden; box-shadow:var(--shadow); min-height:480px; border:1px solid var(--line)}
.visual img{width:100%; height:100%; object-fit:cover}
.expertise-points{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:20px}
@media (max-width:900px){.expertise-points{grid-template-columns:1fr}}
.point{padding:22px; border-radius:22px; border:1px solid var(--line); background:#fff; box-shadow:var(--shadow)}
.point h3{margin:0 0 10px; font-size:19px}
.point p{margin:0; color:var(--muted)}
.contact-box{display:grid; grid-template-columns:1.1fr .9fr; gap:24px; align-items:start; padding:30px; background:#fff; border:1px solid var(--line); border-radius:28px; box-shadow:var(--shadow)}
@media (max-width:900px){.contact-box{grid-template-columns:1fr}}
.contact-actions{display:flex; flex-wrap:wrap; gap:14px; margin-top:22px}
.contact-links{display:grid; gap:12px}
.contact-link{display:block; text-decoration:none; background:var(--soft); border:1px solid rgba(17,24,39,.08); border-radius:18px; padding:16px 18px; font-weight:700}
.contact-link span{display:block; font-size:12px; color:var(--muted); margin-top:4px; font-weight:600}
footer{padding:28px 0 46px; color:var(--muted); font-size:13px; border-top:1px solid var(--line)}
.footer-row{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap}