/* ==========================================================================
   FENIX MOTORS — дизайн-система сайта
   Оранжевый #FA4D01 · Графит #25282B · Светлый #F2F2F2
   Цвета линеек с этикеток: голубой #00A9E0 (промывки) · зелёный #41B12B (защита)
   Заголовки — HeadingNow 57 ExtraBold Italic (в прототипе Montserrat 900 Italic;
   для сайта нужна Web-лицензия Zetafonts)
   ========================================================================== */
:root{
  --orange:#FA4D01; --orange-dark:#D63F00;
  --graphite:#25282B; --graphite-2:#31363A;
  --light:#F2F2F2; --white:#fff;
  --green:#41B12B; --blue:#00A9E0;
  --muted:#7A8288; --line:#E2E4E6; --line-dark:#3C4247;
  --wrap:1200px; --gap:24px; --radius:14px; --radius-lg:22px;
  --h1:clamp(34px,6vw,68px); --h2:clamp(26px,3.6vw,46px); --h3:clamp(20px,2.2vw,26px);
  --shadow:0 18px 50px rgba(37,40,43,.10); --shadow-lg:0 28px 70px rgba(37,40,43,.18);
}
.fnx, .fnx *, .fnx::before, .fnx *::before, .fnx::after, .fnx *::after{box-sizing:border-box}
html{scroll-behavior:smooth}
.fnx{margin:0;font-family:'Inter','Helvetica Neue',Arial,sans-serif;font-size:17px;line-height:1.6;
  color:var(--graphite);background:#fff;-webkit-font-smoothing:antialiased}
.fnx img{max-width:100%;display:block}
.fnx a{color:inherit;text-decoration:none}
.fnx p{margin:0 0 1em}
.fnx ul{margin:0;padding:0;list-style:none}
.fnx h1, .fnx h2, .fnx h3, .fnx h4{font-family:'Montserrat','Inter',Arial,sans-serif;font-weight:900;font-style:italic;
  text-transform:uppercase;line-height:1.02;letter-spacing:-.01em;margin:0 0 .5em;text-wrap:balance}
.fnx h1{font-size:var(--h1)}
.fnx h2{font-size:var(--h2)}
.fnx h3{font-size:var(--h3)}
.fnx .accent{color:var(--orange)}
.fnx .wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px}
.fnx .section{padding:clamp(56px,7vw,104px) 0}
.fnx .section--light{background:var(--light)}
.fnx .section--dark{background:var(--graphite);color:#fff}
.fnx .section--dark h2, .fnx .section--dark h3{color:#fff}
.fnx .section--dark .lead{color:#C6CCD1}
.fnx .eyebrow{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--orange);margin-bottom:14px}
.fnx .lead{font-size:clamp(17px,1.6vw,20px);color:#54595E;max-width:70ch}
.fnx .section-head{max-width:820px;margin-bottom:clamp(32px,4vw,56px)}

/* Кнопки */
.fnx .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:16px 30px;
  border-radius:999px;border:2px solid transparent;font-weight:700;font-size:16px;line-height:1;
  cursor:pointer;transition:.18s ease;white-space:nowrap}
.fnx .btn--primary{background:var(--orange);color:#fff}
.fnx .btn--primary:hover{background:var(--orange-dark)}
.fnx .btn--ghost{border-color:currentColor;color:var(--graphite)}
.fnx .btn--ghost:hover{background:var(--graphite);color:#fff;border-color:var(--graphite)}
.fnx .section--dark .btn--ghost, .fnx .hero .btn--ghost{color:#fff;border-color:rgba(255,255,255,.55)}
.fnx .section--dark .btn--ghost:hover, .fnx .hero .btn--ghost:hover{background:#fff;color:var(--graphite);border-color:#fff}
.fnx .btn--sm{padding:12px 22px;font-size:15px}
.fnx .btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}

/* Шапка */
.fnx .header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line)}
.fnx .header__in{display:flex;align-items:center;gap:26px;height:76px}
.fnx .logo{display:flex;align-items:center;flex:0 0 auto}
.fnx .logo img{height:38px;width:auto}
.fnx .nav{display:flex;gap:20px;margin-left:auto;flex-wrap:wrap}
.fnx .nav a{font-size:15px;font-weight:600;color:#4A5055;padding:6px 0;border-bottom:2px solid transparent}
.fnx .nav a:hover, .fnx .nav a.is-active{color:var(--graphite);border-color:var(--orange)}
.fnx .header .btn{flex:0 0 auto}
.fnx .burger{display:none;margin-left:auto;background:none;border:0;font-size:26px;line-height:1;cursor:pointer;color:var(--graphite)}

/* Hero */
.fnx .hero{position:relative;background:var(--graphite);color:#fff;overflow:hidden}
.fnx .hero::after{content:"";position:absolute;right:-12%;top:-25%;width:60%;height:150%;
  background:radial-gradient(closest-side,rgba(250,77,1,.42),transparent 72%);pointer-events:none}
.fnx .hero__in{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:48px;
  align-items:center;padding:clamp(48px,6vw,92px) 0}
.fnx .hero h1{color:#fff}
.fnx .hero__sub{font-size:clamp(17px,1.7vw,21px);color:#C6CCD1;max-width:52ch}
.fnx .hero__badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.fnx .badge{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;
  border:1px solid var(--line-dark);font-size:13px;font-weight:600;color:#D8DDE1;background:rgba(255,255,255,.03)}
.fnx .badge--light{color:#4A5055;border-color:var(--line);background:var(--light)}
.fnx .hero__media img{border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}
.fnx .pill{display:inline-block;background:var(--orange);color:#fff;font-weight:800;font-size:13px;
  letter-spacing:.1em;text-transform:uppercase;padding:8px 16px;border-radius:6px;margin-bottom:18px}

/* Сетки и карточки */
.fnx .grid{display:grid;gap:var(--gap)}
.fnx .grid-2{grid-template-columns:repeat(2,1fr)}
.fnx .grid-3{grid-template-columns:repeat(3,1fr)}
.fnx .grid-4{grid-template-columns:repeat(4,1fr)}
.fnx .card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px;transition:.18s ease}
.fnx .card:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.fnx .card h3{margin-bottom:10px}
.fnx .card p{color:#5A6065;margin:0}
.fnx .section--dark .card{background:var(--graphite-2);border-color:var(--line-dark)}
.fnx .section--dark .card p{color:#B9C0C6}
.fnx .icon{width:56px;height:56px;border-radius:50%;border:3px solid var(--orange);display:flex;
  align-items:center;justify-content:center;font-weight:900;font-style:italic;font-size:20px;
  color:var(--orange);margin-bottom:18px;font-family:'Montserrat',sans-serif}
.fnx .section--dark .icon{border-color:#fff;color:#fff}

/* Проблемы */
.fnx .problem{display:flex;gap:14px;align-items:flex-start;padding:20px 0;border-bottom:1px solid var(--line-dark)}
.fnx .problem .problem__x{color:var(--orange);font-weight:900;font-size:20px;line-height:1.3;flex:0 0 auto}
.fnx .problem b{display:block;font-size:17px;margin-bottom:3px}
.fnx .problem span{color:#AEB5BB;font-size:15px}

/* Карточка товара */
.fnx .product{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;transition:.18s ease}
.fnx .product:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.fnx .product__img{background:var(--light);aspect-ratio:3/4;overflow:hidden;position:relative}
.fnx .product__img img{width:100%;height:100%;object-fit:cover}
.fnx .product__tag{position:absolute;left:14px;top:14px;background:var(--orange);color:#fff;font-size:12px;
  font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:6px 12px;border-radius:6px;z-index:2}
.fnx .product__tag--blue{background:var(--blue)}
.fnx .product__tag--green{background:var(--green)}
.fnx .product__tag--graphite{background:var(--graphite)}
.fnx .product__body{padding:24px;display:flex;flex-direction:column;flex:1}
.fnx .product__body h3{font-size:20px;margin-bottom:6px}
.fnx .product__vol{font-size:14px;color:var(--muted);font-weight:600;margin-bottom:12px}
.fnx .product__body p{font-size:15px;color:#5A6065;flex:1}
.fnx .product__link{margin-top:18px;font-weight:700;color:var(--orange);display:inline-flex;gap:8px;align-items:center}

/* Плитка-заглушка вместо фото (пока нет рендеров) */
.fnx .ptile{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
  padding:26px;background:var(--graphite);color:#fff;overflow:hidden}
.fnx .ptile::before{content:"";position:absolute;right:-30%;top:-30%;width:90%;height:90%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,255,255,.20),transparent 70%)}
.fnx .ptile--blue{background:var(--blue)}
.fnx .ptile--green{background:var(--green)}
.fnx .ptile--orange{background:var(--orange)}
.fnx .ptile__art{position:absolute;left:26px;top:26px;font-size:12px;font-weight:800;letter-spacing:.14em;
  opacity:.85;z-index:2}
.fnx .ptile__name{position:relative;z-index:2;font-family:'Montserrat',sans-serif;font-weight:900;
  font-style:italic;text-transform:uppercase;font-size:clamp(20px,2.4vw,30px);line-height:1.02}
.fnx .ptile__vol{position:relative;z-index:2;margin-top:10px;font-size:13px;font-weight:700;letter-spacing:.1em;opacity:.85}
.fnx .ptile__note{position:relative;z-index:2;margin-top:14px;font-size:12px;opacity:.7}
.fnx .product__img .ptile{padding:22px}
.fnx .product__img .ptile__art{display:none}
.fnx .product__img .ptile__name{font-size:19px;letter-spacing:-.02em}
.fnx .product__img .ptile__vol{font-size:12px;margin-top:8px}

/* Линейка */
.fnx .linecard{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:280px;
  padding:30px;border-radius:var(--radius);color:#fff;background:var(--graphite);overflow:hidden;transition:.18s}
.fnx .linecard:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.fnx .linecard--blue{background:var(--blue)}
.fnx .linecard--green{background:var(--green)}
.fnx .linecard--orange{background:var(--orange)}
.fnx .linecard h3{color:#fff;margin-bottom:8px}
.fnx .linecard p{color:rgba(255,255,255,.9);font-size:15px;margin:0}
.fnx .linecard span{margin-top:16px;font-weight:700}

/* Шаги, цифры, кейсы, отзывы */
.fnx .steps{display:grid;gap:20px}
.fnx .step{display:grid;grid-template-columns:66px 1fr;gap:20px;align-items:start;padding:22px 0;border-top:1px solid var(--line)}
.fnx .section--dark .step{border-color:var(--line-dark)}
.fnx .step__n{font-family:'Montserrat',sans-serif;font-weight:900;font-style:italic;font-size:40px;color:var(--orange);line-height:1}
.fnx .step h3{font-size:19px;margin-bottom:6px}
.fnx .step p{margin:0;color:#5A6065}
.fnx .section--dark .step p{color:#B9C0C6}
.fnx .stat__v{font-family:'Montserrat',sans-serif;font-weight:900;font-style:italic;
  font-size:clamp(38px,4.6vw,60px);color:var(--orange);line-height:1}
.fnx .stat__l{font-size:15px;color:#5A6065;margin-top:10px}
.fnx .section--dark .stat__l{color:#B9C0C6}
.fnx .case{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.fnx .case__img{aspect-ratio:16/10;background:var(--light);overflow:hidden}
.fnx .case__img img{width:100%;height:100%;object-fit:cover}
.fnx .case__body{padding:24px}
.fnx .case__body h3{font-size:19px}
.fnx .beforeafter{display:flex;gap:18px;margin:14px 0 4px}
.fnx .ba{flex:1;background:var(--light);border-radius:10px;padding:12px 14px}
.fnx .ba span{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700}
.fnx .ba b{font-size:22px;font-family:'Montserrat',sans-serif;font-style:italic}
.fnx .ba--after b{color:var(--orange)}
.fnx .review{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px}
.fnx .stars{color:var(--orange);letter-spacing:2px;margin-bottom:12px}
.fnx .review p{font-size:15px;color:#4A5055}
.fnx .review__who{font-size:14px;color:var(--muted);font-weight:600;margin-top:14px}

/* FAQ, таблицы */
.fnx .faq{border-top:1px solid var(--line)}
.fnx .faq details{border-bottom:1px solid var(--line)}
.fnx .faq summary{cursor:pointer;list-style:none;padding:22px 44px 22px 0;position:relative;font-weight:700;font-size:17px}
.fnx .faq summary::-webkit-details-marker{display:none}
.fnx .faq summary::after{content:"+";position:absolute;right:8px;top:18px;font-size:26px;color:var(--orange);font-weight:400;transition:.2s}
.fnx .faq details[open] summary::after{transform:rotate(45deg)}
.fnx .faq .faq__a{padding:0 44px 24px 0;color:#5A6065;font-size:16px}
.fnx .specs{width:100%;border-collapse:collapse;font-size:16px}
.fnx .specs td{padding:15px 0;border-bottom:1px solid var(--line);vertical-align:top}
.fnx .specs td:first-child{color:var(--muted);width:44%;padding-right:20px}
.fnx .specs td:last-child{font-weight:600}
.fnx .section--dark .specs td{border-color:var(--line-dark)}
.fnx .section--dark .specs td:first-child{color:#8A9298}
.fnx .section--dark .specs td:last-child{color:#fff}

/* Подбор */
.fnx .picker{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.fnx .picker button{text-align:left;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:22px;cursor:pointer;font:inherit;transition:.16s}
.fnx .picker button:hover, .fnx .picker button.is-on{border-color:var(--orange)}
.fnx .picker button.is-on{box-shadow:inset 0 0 0 1px var(--orange)}
.fnx .picker b{display:block;font-size:17px;margin-bottom:6px}
.fnx .picker span{font-size:14px;color:#5A6065}
.fnx .picker-out{margin-top:24px;background:var(--graphite);color:#fff;border-radius:var(--radius);padding:28px;display:none}
.fnx .picker-out.is-on{display:block}
.fnx .picker-out h3{color:#fff;margin-bottom:8px}
.fnx .picker-out p{color:#C6CCD1;margin-bottom:18px}

/* CTA, формы, крошки, футер */
.fnx .cta{background:var(--orange);color:#fff;border-radius:var(--radius-lg);padding:clamp(32px,4vw,56px);
  display:flex;gap:28px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.fnx .cta h2{color:#fff;margin:0}
.fnx .cta p{color:rgba(255,255,255,.9);margin:8px 0 0;max-width:52ch}
.fnx .cta .btn--primary{background:#fff;color:var(--graphite)}
.fnx .cta .btn--primary:hover{background:var(--graphite);color:#fff}
.fnx .cta .btn--ghost{color:#fff;border-color:rgba(255,255,255,.7)}
.fnx .cta .btn--ghost:hover{background:#fff;color:var(--graphite)}
.fnx .form{display:grid;gap:14px;max-width:520px}
.fnx .form input, .fnx .form textarea{width:100%;padding:15px 18px;border-radius:10px;border:1px solid var(--line-dark);
  background:rgba(255,255,255,.05);color:#fff;font:inherit}
.fnx .form input::placeholder, .fnx .form textarea::placeholder{color:#8A9298}
.fnx .form small{color:#8A9298;font-size:13px}
.fnx .crumbs{font-size:14px;color:var(--muted);padding:18px 0}
.fnx .crumbs a:hover{color:var(--orange)}
.fnx .crumbs span{margin:0 8px}
.fnx .footer{background:var(--graphite);color:#B9C0C6;padding:64px 0 32px;font-size:15px}
.fnx .footer__cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px}
.fnx .footer h4{color:#fff;font-size:14px;letter-spacing:.1em;margin-bottom:16px}
.fnx .footer a:hover{color:var(--orange)}
.fnx .footer li{margin-bottom:10px}
.fnx .footer__logo img{height:34px;filter:brightness(0) invert(1)}
.fnx .footer__bottom{margin-top:44px;padding-top:24px;border-top:1px solid var(--line-dark);display:flex;
  gap:18px;flex-wrap:wrap;justify-content:space-between;font-size:13px;color:#7A8288}
.fnx .doc{max-width:780px}
.fnx .doc h2{font-size:24px;margin-top:40px}
.fnx .doc p, .fnx .doc li{color:#4A5055}
.fnx .doc ul{list-style:disc;padding-left:22px;margin-bottom:1em}
.fnx .note{border-left:3px solid var(--orange);background:var(--light);padding:18px 22px;
  border-radius:0 10px 10px 0;font-size:15px;color:#4A5055}
.fnx .note--warn{border-color:var(--blue)}
.fnx .tbd{background:#FFF1E8;color:var(--orange-dark);font-weight:700;padding:1px 7px;border-radius:4px;font-size:.92em}
.fnx .danger{background:#FFF6F2;border:1px solid #F6D6C6;border-radius:var(--radius);padding:22px 24px;font-size:15px;color:#5A4036}
.fnx .danger b{color:var(--orange-dark)}
@media (max-width:1000px){
  .fnx .hero__in{grid-template-columns:1fr;gap:32px}
  .fnx .grid-4, .fnx .grid-3, .fnx .picker{grid-template-columns:repeat(2,1fr)}
  .fnx .footer__cols{grid-template-columns:1fr 1fr}
  .fnx .nav{display:none}
  .fnx .nav.is-open{display:flex;position:absolute;left:0;right:0;top:76px;background:#fff;flex-direction:column;
    padding:18px 24px;gap:14px;border-bottom:1px solid var(--line)}
  .fnx .burger{display:block}
  .fnx .header .btn{display:none}
}
@media (max-width:640px){
  .fnx{font-size:16px}
  .fnx .grid-2, .fnx .grid-3, .fnx .grid-4, .fnx .picker{grid-template-columns:1fr}
  .fnx .footer__cols{grid-template-columns:1fr}
  .fnx .beforeafter{flex-direction:column;gap:10px}
  .fnx .cta{flex-direction:column;align-items:flex-start}
  .fnx .btn{white-space:normal;text-align:center}
  .fnx .btn-row .btn{flex:1 1 100%}
  .fnx .picker button, .fnx .picker button b{color:var(--graphite)}
  .fnx{overflow-x:hidden}
}