
:root{--bg:#0b0f16;--panel:#141a24;--panel2:#1a2230;--text:#f5f7fb;--muted:#aeb8c7;--line:#2a3444;--accent:#ff8a3d;--accent2:#8fd3ff;--max:1180px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:linear-gradient(180deg,#070a0f 0%,#0e1420 45%,#0b0f16 100%);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Arial,sans-serif;line-height:1.6}a{color:inherit}
.site-header{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px max(20px,calc((100vw - var(--max))/2));background:rgba(10,14,22,.92);border-bottom:1px solid var(--line);backdrop-filter:blur(12px)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:900}.brand img{width:36px;height:36px;border-radius:9px}.nav{display:flex;align-items:center;gap:13px;flex-wrap:wrap}.nav a{font-size:14px;text-decoration:none;color:var(--muted)}.nav a:hover,.nav a.active{color:#fff}.menu-toggle{display:none}
.hero,.section,.page-hero,.footer{max-width:var(--max);margin:0 auto;padding:54px 24px}.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,520px);gap:34px;align-items:center}.category-hero{padding-top:42px}
.eyebrow{color:var(--accent2);font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:13px}.hero h1,.page-hero h1{font-size:clamp(36px,6vw,68px);line-height:1.02;margin:10px 0 18px}.hero p,.page-hero p,.section-intro{color:var(--muted);font-size:18px;max-width:850px}
.hero-actions,.cta-row,.card-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}.button{display:inline-flex;justify-content:center;align-items:center;border:1px solid #ff9b61;background:linear-gradient(135deg,var(--accent),#ffb17b);color:#170b04;text-decoration:none;font-weight:900;padding:12px 18px;border-radius:999px;box-shadow:0 12px 28px rgba(255,138,61,.18)}.button.secondary{background:#202938;color:#fff;border-color:#3a465a}.button.small{font-size:13px;padding:9px 12px}.text-link{color:var(--accent2);text-decoration:none;font-weight:800}
.visual-collage{display:grid;grid-template-columns:1.25fr .85fr;grid-auto-rows:145px;gap:12px}.visual-collage img{display:block;width:100%;height:100%;object-fit:contain;background:#0c111a;border:1px solid var(--line);border-radius:20px;padding:8px;box-shadow:0 18px 44px rgba(0,0,0,.35)}.visual-collage img:first-child{grid-row:span 2}
.category-grid,.trust-grid,.feature-grid,.model-grid,.related-grid{display:grid;gap:18px}.category-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.trust-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.feature-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.model-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));align-items:stretch}.related-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.category-card,.trust-card,.feature-card,.answer-box,.panel,.model-card{background:rgba(255,255,255,.045);border:1px solid var(--line);border-radius:22px}.category-card,.trust-card,.feature-card,.answer-box,.panel{padding:22px}.category-card{text-decoration:none;min-height:155px}.category-card p,.trust-card p,.feature-card p,.model-card p,.panel p,li{color:var(--muted)}
.model-card{overflow:hidden;display:flex;flex-direction:column;background:var(--panel);min-width:0}.image-frame{display:block;width:100%;aspect-ratio:16/9;background:#0b111a;border-bottom:1px solid var(--line);overflow:hidden}.image-frame img{display:block;width:100%;height:100%;object-fit:contain;background:#0b111a;padding:8px}.card-body{padding:16px;display:flex;flex-direction:column;gap:10px;flex:1}.card-body h3{font-size:17px;line-height:1.25;margin:0}.card-body h3 a{text-decoration:none}.card-body p{font-size:14px;margin:0;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.badge{display:inline-flex;align-self:flex-start;background:rgba(255,138,61,.13);color:#ffc096;border:1px solid rgba(255,138,61,.35);padding:4px 9px;border-radius:999px;font-size:12px;font-weight:900}
.breadcrumbs{max-width:var(--max);margin:0 auto;padding:18px 24px 0;color:var(--muted);font-size:14px}.breadcrumbs a{color:var(--accent2);text-decoration:none}.content-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:28px}.toc{position:sticky;top:86px;background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:18px;align-self:start}.toc a{display:block;color:var(--muted);text-decoration:none;margin:8px 0}.answer-box{border-left:4px solid var(--accent)}.filters{display:flex;gap:12px;flex-wrap:wrap;margin:20px 0}.filters input,.filters select{background:#101722;color:#fff;border:1px solid var(--line);border-radius:999px;padding:12px 14px;min-width:220px}.gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.gallery img{display:block;width:100%;aspect-ratio:16/9;object-fit:contain;background:#0b111a;border:1px solid var(--line);border-radius:20px;padding:10px}
.faq details{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px;margin:10px 0}.faq summary{font-weight:900;cursor:pointer}.footer{display:flex;justify-content:space-between;gap:24px;border-top:1px solid var(--line);margin-top:40px;color:var(--muted)}.footer a{display:block;color:var(--muted);text-decoration:none;margin:6px 0}.mini-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:22px}.mini-stats div{background:rgba(255,255,255,.055);border:1px solid var(--line);border-radius:18px;padding:16px}.mini-stats strong{display:block;font-size:24px;color:#fff}
@media(max-width:980px){.hero{grid-template-columns:1fr}.category-grid,.trust-grid,.feature-grid,.related-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.content-grid{grid-template-columns:1fr}.toc{position:static}.nav{display:none}.nav.open{display:flex;position:absolute;left:16px;right:16px;top:66px;padding:16px;background:#101722;border:1px solid var(--line);border-radius:20px}.menu-toggle{display:block;background:#202938;color:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 12px}}
@media(max-width:620px){.hero,.section,.page-hero{padding:34px 18px}.category-grid,.trust-grid,.feature-grid,.related-grid,.gallery{grid-template-columns:1fr}.visual-collage{grid-template-columns:1fr 1fr;grid-auto-rows:118px}.footer{flex-direction:column}.mini-stats{grid-template-columns:1fr}.filters input,.filters select{width:100%}}


/* Final visual fixes: first-version collage, clean model gallery, no stretched image backgrounds */
.visual-collage{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  grid-auto-rows:145px;
  gap:10px;
}
.visual-collage img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:18px;
  border:1px solid var(--line);
  box-shadow:0 20px 50px rgba(0,0,0,.35);
  background:#0b0f16;
  padding:0;
}
.visual-collage img:first-child{grid-row:span 2;}
.model-card .image-link{
  display:block;
  background:#0b0f16;
}
.model-card img{
  width:100%;
  aspect-ratio:16/9;
  height:auto;
  object-fit:contain;
  background:#0b0f16;
  padding:0;
}
.gallery{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
  max-width:980px;
  margin:0 auto;
}
.gallery img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  border-radius:18px;
  border:1px solid var(--line);
  background:transparent;
  padding:0;
}
@media(max-width:620px){
  .visual-collage{grid-template-columns:1fr 1fr;grid-auto-rows:120px;}
}


/* V6 trust, hero, collage and local-image layout */
.hero{
  position:relative;
  overflow:hidden;
  border-bottom:1px solid var(--line);
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 20% 10%, rgba(255,138,61,.24), transparent 28%),
    radial-gradient(circle at 80% 25%, rgba(143,211,255,.20), transparent 30%);
  pointer-events:none;
}
.hero > *{position:relative;z-index:1}
.hero .hero-copy h1{font-size:clamp(42px,7vw,78px);line-height:.95;letter-spacing:-.055em}
.hero .lead{font-size:clamp(18px,2.1vw,23px);max-width:760px;color:#d8e1ee}
.hero-proof-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.hero-proof-row span{border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.07);padding:8px 12px;border-radius:999px;color:#f5f7fb;font-weight:700;font-size:13px}

.trust-block{display:grid;grid-template-columns:1.05fr .95fr;gap:22px;align-items:stretch}
.trust-card{background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03));border:1px solid var(--line);border-radius:24px;padding:24px;box-shadow:0 20px 50px rgba(0,0,0,.22)}
.trust-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.metric{background:#101722;border:1px solid var(--line);border-radius:18px;padding:18px}
.metric strong{display:block;font-size:28px;color:#fff}
.metric span{display:block;color:var(--muted);font-size:13px;line-height:1.35}
.trust-list{margin:12px 0 0;padding-left:20px;color:#d7dfeb}
.trust-list li{margin:8px 0}

.visual-collage{
  display:grid !important;
  grid-template-columns:1.35fr .8fr .8fr !important;
  grid-template-rows:150px 150px !important;
  gap:12px !important;
}
.visual-collage img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  border-radius:20px !important;
  border:1px solid var(--line) !important;
  background:#101722 !important;
  padding:0 !important;
}
.visual-collage img:first-child{grid-row:1 / span 2 !important}
.visual-collage img:nth-child(2){grid-column:2;grid-row:1}
.visual-collage img:nth-child(3){grid-column:2;grid-row:2}
.visual-collage img:nth-child(4){grid-column:3;grid-row:1}
.visual-collage img:nth-child(5){grid-column:3;grid-row:2}

.model-card img{
  width:100% !important;
  aspect-ratio:16 / 9 !important;
  object-fit:cover !important;
  background:#101722 !important;
  border:0 !important;
  padding:0 !important;
}
.gallery{
  max-width:980px !important;
  margin:0 auto !important;
  display:block !important;
}
.gallery img{
  width:100% !important;
  max-width:980px !important;
  height:auto !important;
  max-height:680px !important;
  object-fit:contain !important;
  background:#101722 !important;
  border:1px solid var(--line) !important;
  border-radius:22px !important;
  padding:0 !important;
  display:block !important;
  margin:0 auto !important;
}
.answer-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.answer-card{background:#101722;border:1px solid var(--line);border-radius:20px;padding:20px}
.answer-card h3{margin-top:0}
.model-feature-list{columns:2;column-gap:30px}
.cta-panel{background:linear-gradient(135deg,rgba(255,138,61,.18),rgba(143,211,255,.12));border:1px solid var(--line);border-radius:24px;padding:24px}
@media (max-width:850px){
  .trust-block,.answer-grid{grid-template-columns:1fr}
  .visual-collage{grid-template-columns:1fr 1fr !important;grid-template-rows:auto !important}
  .visual-collage img{height:auto !important;aspect-ratio:16/9}
  .visual-collage img:first-child,.visual-collage img:nth-child(n){grid-column:auto !important;grid-row:auto !important}
  .model-feature-list{columns:1}
}


/* V7 requested fixes */
.visual-collage{
  display:grid !important;
  grid-template-columns:1.3fr .85fr .85fr !important;
  grid-template-rows:160px 160px !important;
  gap:12px !important;
}
.visual-collage img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  border-radius:20px !important;
  border:1px solid var(--line) !important;
  background:#101722 !important;
}
.visual-collage img:first-child{grid-row:1 / span 2 !important}
.visual-collage img:nth-child(2){grid-column:2 !important;grid-row:1 !important}
.visual-collage img:nth-child(3){grid-column:2 !important;grid-row:2 !important}
.visual-collage img:nth-child(4){grid-column:3 !important;grid-row:1 !important}
.visual-collage img:nth-child(5){grid-column:3 !important;grid-row:2 !important}

.gallery{
  width:100% !important;
  max-width:1100px !important;
  margin:22px auto 34px auto !important;
  display:block !important;
}
.gallery img{
  width:100% !important;
  max-width:1100px !important;
  height:auto !important;
  max-height:760px !important;
  object-fit:contain !important;
  display:block !important;
  margin:0 auto !important;
  border-radius:24px !important;
  background:#101722 !important;
  border:1px solid var(--line) !important;
  padding:0 !important;
}
.model-card img{
  aspect-ratio:16 / 9 !important;
  object-fit:cover !important;
}
@media(max-width:850px){
  .visual-collage{grid-template-columns:1fr 1fr !important;grid-template-rows:auto !important}
  .visual-collage img,
  .visual-collage img:first-child,
  .visual-collage img:nth-child(2),
  .visual-collage img:nth-child(3),
  .visual-collage img:nth-child(4),
  .visual-collage img:nth-child(5){
    grid-column:auto !important;
    grid-row:auto !important;
    aspect-ratio:16/9 !important;
    height:auto !important;
  }
}
