:root{
  --bg:#050505;
  --panel:#101010;
  --panel-2:#161616;
  --text:#f5f5f5;
  --muted:#c4c4c7;
  --line:#262626;
  --red:#dc2626;
  --red2:#ef4444;
  --shadow:0 18px 50px rgba(0,0,0,.22);
  --shadow-red:0 26px 70px rgba(220,38,38,.14);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at top right, rgba(220,38,38,.18), transparent 20%),
    radial-gradient(circle at bottom left, rgba(220,38,38,.16), transparent 25%),
    radial-gradient(circle at center, rgba(220,38,38,.08), transparent 30%),
    radial-gradient(circle at left, rgba(255,255,255,.05), transparent 18%),
    var(--bg);
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.container{width:min(1220px, calc(100% - 32px)); margin:0 auto}
.topbar{
  position:sticky; top:0; z-index:50;
  border-bottom:1px solid var(--line);
  background:rgba(0,0,0,.85);
  backdrop-filter:blur(16px);
  transition:padding .2s ease, background .2s ease;
}
.topbar.scrolled{background:rgba(0,0,0,.92)}
.topbar-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; padding:14px 0;
}
.brand{
  display:flex; align-items:center; gap:14px; min-width:0;
}
.brand-logo-wrap{
  display:flex; align-items:center; justify-content:center;
  width:120px; height:56px; flex:0 0 auto;
  background:#fff; border-radius:14px; padding:10px 12px;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.brand-logo{width:100%; height:100%; object-fit:contain}
.brand-text{min-width:0}
.brand-title{
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-size:16px; font-weight:700; letter-spacing:.14em;
}
.brand-sub{
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  margin-top:4px; font-size:10px; text-transform:uppercase;
  letter-spacing:.16em; color:#a1a1aa;
}
.nav{display:none}
.nav a{transition:color .2s ease}
.nav a:hover{color:#fff}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:13px 20px; border-radius:18px; border:1px solid transparent;
  font-weight:700; transition:.25s ease; cursor:pointer;
  background:var(--red); color:#fff;
}
.btn:hover{transform:translateY(-1px); background:var(--red2); box-shadow:0 12px 30px rgba(220,38,38,.28)}
.btn.secondary{background:rgba(0,0,0,.25); border-color:#52525b}
.btn.secondary:hover{background:#111}
header .cta{display:none}
.hero{border-bottom:1px solid var(--line)}
.hero-grid{
  display:grid; grid-template-columns:1fr; gap:34px; align-items:center;
  padding:40px 0 56px;
}
.badge{
  display:inline-flex; width:max-content; padding:7px 14px; border-radius:999px;
  border:1px solid rgba(220,38,38,.3); background:rgba(220,38,38,.1); color:#fecaca;
  font-size:13px;
}
.hero h1{font-size:34px; line-height:1.05; margin:18px 0 0; max-width:760px}
.hero .lead{margin:22px 0 0; max-width:680px; color:#e4e4e7; font-size:20px; line-height:1.65}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap; margin-top:28px}
.hero-stats{display:grid; grid-template-columns:1fr; gap:14px; margin-top:34px}
.stat{padding:16px; border:1px solid var(--line); border-radius:18px; background:rgba(16,16,16,.7)}
.stat .k{font-size:14px; color:#a1a1aa}
.stat .v{font-size:14px; font-weight:600; margin-top:6px}
.hero-visual-wrap{position:relative}
.hero-glow{
  position:absolute; inset:-18px; border-radius:34px;
  background:rgba(220,38,38,.10); filter:blur(40px);
}
.hero-card{
  position:relative; overflow:hidden; border-radius:34px;
  border:1px solid var(--line); background:#0a0a0a;
  box-shadow:0 30px 80px rgba(0,0,0,.45);
}
.hero-image{width:100%; min-height:520px; aspect-ratio:1/1; object-fit:cover; object-position:center}
.hero-overlay{position:absolute; inset:0; background:linear-gradient(45deg, rgba(0,0,0,.72), rgba(0,0,0,.12), transparent)}
.hero-caption{position:absolute; left:24px; right:24px; bottom:24px}
.hero-chip,.hero-copy{
  -webkit-text-stroke:.4px rgba(0,0,0,.9);
  text-shadow:0 1px 3px rgba(0,0,0,.9);
}
.hero-chip{
  display:inline-flex; padding:7px 12px; border-radius:999px;
  border:1px solid rgba(255,255,255,.12); background:rgba(0,0,0,.5);
  color:#e4e4e7; font-size:11px; text-transform:uppercase; letter-spacing:.2em;
  backdrop-filter:blur(8px);
}
.hero-copy{max-width:420px; margin-top:14px; font-size:14px; line-height:1.65; color:#e4e4e7}

section.block{padding:56px 0}
.section-title .eyebrow{
  font-size:13px; font-weight:700; text-transform:uppercase;
  letter-spacing:.25em; color:var(--red2);
}
.section-title h2{margin:14px 0 0; font-size:32px; line-height:1.1}
.section-title p{margin:16px 0 0; max-width:850px; color:#d4d4d8; font-size:18px; line-height:1.7}

.cards-4, .models, .faq-grid, .seo-grid, .hero-stats, .service-grid{
  display:grid; grid-template-columns:1fr; gap:22px;
}
.card, .model{
  overflow:hidden; border-radius:28px; border:1px solid var(--line);
  background:rgba(16,16,16,.72); box-shadow:var(--shadow);
  transition:.45s ease;
}
.card:hover{
  transform:translateY(-8px); border-color:rgba(220,38,38,.5);
  box-shadow:var(--shadow-red);
}
.card img{width:100%; height:230px; object-fit:cover; transition:.45s ease}
.card:hover img{transform:scale(1.03)}
.card-body, .model .inner{padding:20px}
.card h3, .model h3{margin:0; color:#fff}
.card h3{font-size:20px; transition:color .25s ease}
.card:hover h3{color:#f87171}
.card p, .model p{margin:12px 0 0; color:#d4d4d8; line-height:1.65}
.two-col{
  display:grid; grid-template-columns:1fr; gap:36px; align-items:start; margin-top:42px;
}
.feature-image{
  overflow:hidden; border-radius:28px; border:1px solid var(--line);
  background:#0a0a0a; box-shadow:var(--shadow);
}
.feature-image img{width:100%; min-height:340px; object-fit:cover}
.list{display:grid; gap:14px}
.list-item{
  display:flex; gap:12px; align-items:flex-start;
  padding:16px; border-radius:18px;
  border:1px solid rgba(63,63,70,.6); background:rgba(24,24,27,.6);
}
.dot{width:10px; height:10px; border-radius:999px; background:var(--red); margin-top:8px; flex:0 0 auto}
.model .aud{margin-top:8px; font-size:14px; font-weight:700; color:#f87171}
.stars{display:flex; gap:4px; align-items:center; margin-top:14px}
.star{color:#52525b}
.star.on{color:#ef4444}
.form-card{
  margin-top:36px; border-radius:28px; border:1px solid var(--line);
  background:rgba(10,10,10,.82); box-shadow:var(--shadow);
}
.form-inner{padding:28px}
.form-grid{display:grid; grid-template-columns:1fr; gap:18px; margin-top:22px}
.form-field.full{grid-column:1/-1}
label{display:block; margin-bottom:8px; color:#f4f4f5; font-size:14px; font-weight:700}
input, textarea, select{
  width:100%; padding:12px 14px; border-radius:10px;
  border:1px solid #3f3f46; background:#18181b; color:#fff; font:inherit;
}
textarea{min-height:130px; resize:vertical}
.contact-grid{display:grid; grid-template-columns:1fr; gap:32px; margin-top:42px}
.contact-lines{display:grid; gap:14px; color:#d4d4d8}
.icon-line{display:flex; gap:10px; align-items:center}
footer{border-top:1px solid var(--line); padding:44px 0 24px}
.footer-grid{display:grid; grid-template-columns:1fr; gap:30px; color:#a1a1aa}
.footer-grid h3{margin:0 0 12px; color:#fff}
.footer-note{margin-top:28px; font-size:12px; color:#71717a}
.small{font-size:14px; line-height:1.7; color:#d4d4d8}
.legal-card{margin-top:32px}
.legal-card h3{margin-top:0;color:#fff}
@media (min-width: 640px){
  .brand-logo-wrap{width:150px; height:64px}
  .brand-title{font-size:18px; letter-spacing:.18em}
  .brand-sub{font-size:11px; letter-spacing:.22em}
  .hero h1{font-size:42px}
  .hero-stats, .form-grid, .service-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:repeat(3,1fr)}
}
@media (min-width: 860px){
  .hero-grid, .two-col, .contact-grid{grid-template-columns:1fr 1fr}
  .nav{display:flex; gap:28px; font-size:14px; color:#d4d4d8}
  header .cta{display:inline-flex}
  .hero h1{font-size:56px}
}
@media (min-width: 1100px){
  .cards-4{grid-template-columns:repeat(4,1fr)}
  .models{grid-template-columns:repeat(3,1fr)}
  .seo-grid{grid-template-columns:repeat(2,1fr)}
  .faq-grid{grid-template-columns:1fr}
  .hero-stats{grid-template-columns:repeat(3,1fr)}
  .form-grid{grid-template-columns:repeat(2,1fr)}
  .service-grid{grid-template-columns:repeat(3,1fr)}
  .hero h1{font-size:64px}
}