:root{
  --bg:#0b0c11;
  --panel:#111217;
  --panel-2:#181a22;
  --line:#23252f;
  --text:#f3f4f7;
  --muted:#b5b8c4;
  --soft:#8f94a3;
  --orange:#ff9218;
  --pink:#ee00b8;
  --violet:#6e46ff;
  --blue:#0b8bff;
  --cyan:#4ce3ff;
  --radius-xl:28px;
  --radius-lg:22px;
  --radius-md:16px;
  --shadow:0 22px 60px rgba(0,0,0,.28);
  --grad:linear-gradient(135deg,var(--orange) 0%,var(--pink) 48%,var(--violet) 100%);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(circle at 15% -10%, rgba(255,146,24,.16), transparent 28%),
    radial-gradient(circle at 85% 0%, rgba(11,139,255,.14), transparent 30%),
    linear-gradient(180deg,#0c0d12 0%,#0b0c11 100%);
  color:var(--text);
  font-family:"DM Sans",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
.topline{height:4px;background:var(--grad)}
.shell{width:min(1180px,calc(100% - 32px));margin:0 auto}
.site-header{
  position:sticky;top:0;z-index:20;
  backdrop-filter:saturate(140%) blur(12px);
  background:rgba(11,12,17,.78);
  border-bottom:1px solid rgba(255,255,255,.05)
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:16px 0}
.brand{display:flex;align-items:center;gap:14px;min-width:0}
.brand img{width:46px;height:46px;object-fit:contain}
.brand-name{display:flex;flex-direction:column;line-height:1.05}
.brand-name span{font:700 16px/1 "Space Grotesk",sans-serif;letter-spacing:.01em}
.brand-name small{margin-top:5px;color:var(--soft);font-size:12px}
.nav{display:flex;gap:16px;align-items:center}
.nav a{
  padding:10px 14px;border-radius:999px;border:1px solid transparent;
  color:var(--muted);font-size:14px;font-weight:600
}
.nav a.active,.nav a:hover{color:var(--text);border-color:rgba(255,255,255,.08);background:rgba(255,255,255,.035)}

.hero{padding:48px 0 26px}
.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:26px;align-items:stretch}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  text-transform:uppercase;letter-spacing:.16em;font-size:12px;font-weight:700;color:#ffb05d
}
h1,h2,h3{font-family:"Space Grotesk",sans-serif}
.hero h1{margin:12px 0 14px;font-size:clamp(52px,8vw,88px);line-height:.92;letter-spacing:-.04em}
.hero-copy{max-width:800px;font-size:20px;line-height:1.55;color:var(--muted)}
.hero-panel{
  background:linear-gradient(180deg,#13151d 0%,#101116 100%);
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius-xl);
  padding:26px;
  box-shadow:var(--shadow)
}
.hero-panel h2{margin:12px 0 10px;font-size:28px;line-height:1.08}
.hero-panel p{margin:0;color:var(--muted);line-height:1.6}
.hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:24px}
.stat{
  background:#0f1016;border:1px solid rgba(255,255,255,.06);
  border-radius:18px;padding:18px 16px;min-height:92px
}
.stat strong{display:block;font:700 30px/1 "Space Grotesk",sans-serif}
.stat span{display:block;margin-top:8px;color:var(--soft);font-size:13px}

.filter-zone{padding:10px 0 4px}
.filter-card{
  background:#12131a;border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius-xl);padding:24px;box-shadow:var(--shadow)
}
.filter-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:18px}
.filter-head h2,.section-head h2{margin:8px 0 0;font-size:34px;line-height:1.05}
.filters{display:grid;grid-template-columns:1fr auto;gap:12px}
.field{display:flex;flex-direction:column;gap:10px}
.field label{font-size:13px;color:var(--muted);font-weight:600}
.field input{
  width:100%;height:52px;border-radius:14px;border:1px solid rgba(255,255,255,.08);
  background:#0d0e14;color:var(--text);padding:0 16px;outline:none;font-size:15px
}
.field input::placeholder{color:#7d8292}
.field input:focus{border-color:rgba(76,227,255,.45);box-shadow:0 0 0 4px rgba(76,227,255,.08)}
.filter-btn{
  height:52px;align-self:end;padding:0 18px;border-radius:14px;border:1px solid rgba(255,255,255,.08);
  background:#171923;color:var(--text);font:700 14px/1 "DM Sans",sans-serif;cursor:pointer
}
.filter-btn:hover{background:#1b1e28}

.section{padding:30px 0 34px}
.section-head{
  display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:20px
}
.cards{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:stretch
}
.fiche-card{
  background:#12131a;border:1px solid rgba(255,255,255,.06);
  border-radius:24px;overflow:hidden;box-shadow:var(--shadow);transition:transform .18s ease, box-shadow .18s ease,border-color .18s ease
}
.fiche-card:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.12);box-shadow:0 26px 70px rgba(0,0,0,.34)}
.fiche-card a{display:flex;flex-direction:column;height:100%}
.media-visual{
  position:relative;
  aspect-ratio: 16 / 9;
  background:#0f1016;
  border-bottom:1px solid rgba(255,255,255,.05)
}
.media-visual img{
  width:100%;height:100%;object-fit:cover;object-position:center center
}
.card-body{padding:18px 18px 14px}
.meta{
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  color:var(--soft);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em
}
.card-body h3{
  margin:12px 0 10px;font-size:26px;line-height:1.05;letter-spacing:-.02em
}
.card-body p{
  margin:0 0 15px;color:var(--muted);font-size:15px;line-height:1.6
}
.model-label{
  color:var(--soft);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px
}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tags span{
  display:inline-flex;align-items:center;min-height:30px;padding:0 10px;border-radius:999px;
  font-size:13px;font-weight:700;background:#0d0e14;color:#d9dcE5;border:1px solid rgba(255,255,255,.07)
}
.generic-model{background:rgba(255,146,24,.12)!important;border-color:rgba(255,146,24,.22)!important;color:#ffc178!important}
.card-foot{
  margin-top:auto;display:flex;justify-content:space-between;align-items:center;
  padding:16px 18px 18px;color:#ffffff;font-weight:700;border-top:1px solid rgba(255,255,255,.05)
}
.card-foot span:last-child{color:#ffb05d}

.lab-method{padding:8px 0 76px}
.lab-method-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.lab-method-card{
  background:#111217;color:#fff;border-radius:22px;padding:24px;min-height:190px;position:relative;overflow:hidden
}
.lab-method-card:after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--grad)}
.lab-method-card b{display:block;font:700 42px/1 "Space Grotesk";background:var(--grad);-webkit-background-clip:text;color:transparent}
.lab-method-card h3{font:700 21px/1.1 "Space Grotesk";margin:22px 0 10px}
.lab-method-card p{margin:0;color:#b9bcc6;font-size:14px;line-height:1.6}

.footer{
  border-top:1px solid rgba(255,255,255,.06);padding:22px 0 28px;background:#0d0e14
}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.footer-brand{display:flex;align-items:center;gap:14px}
.footer-brand img{width:42px;height:42px;object-fit:contain}
.footer-brand strong{display:block;font:700 16px/1 "Space Grotesk",sans-serif}
.footer-brand span span{display:block;margin-top:5px;color:var(--soft);font-size:12px}
.footer-links{display:flex;gap:18px;flex-wrap:wrap}
.footer-links a{font-size:14px;color:var(--muted)}
.footer-links a:hover{color:#fff}

@media (max-width: 1024px){
  .hero-grid,.cards,.lab-method-grid{grid-template-columns:1fr 1fr}
  .hero-grid{grid-template-columns:1fr}
}
@media (max-width: 760px){
  .shell{width:min(100% - 24px,1180px)}
  .header-inner{padding:14px 0}
  .brand-name small{display:none}
  .filters,.cards,.lab-method-grid,.hero-stats{grid-template-columns:1fr}
  .section-head,.filter-head,.footer-inner{align-items:flex-start}
  .section-head,.filter-head{flex-direction:column}
  .hero-copy{font-size:18px}
  .card-body h3{font-size:22px}
}