/* ------------------------------------------------------------------
   home-apple.css - the FLUTEK home page layer (English + ru/fr/pt/ar).
   Linked ONLY by the five home pages; every rule is scoped with the hp- prefix,
   so nothing here can collide with assets/site.min.css or assets/flutek.css.
   F-VIS-001: this layer used to re-declare --brand as Apple blue, which made the
   home page a different colour system from all 5,500 inner pages (wine red).
   The override is gone: the home page now paints every accent with the same
   --brand token as the rest of the site, and only the neutral canvas and the
   glass hero buttons stay home-page specific.
   ------------------------------------------------------------------ */
/* ------------------------------------------------------------------
   F-VIS-001 - one accent colour for the whole site.
   The home page previously ran its own blue (#0071e3) while contact, machines,
   parts, product and 404 pages ran the wine red #b3202d, and a few black
   buttons added a third accent. --brand now comes from assets/flutek.css on
   every page; the rules below only re-point the literals that used to hard-
   code the blue.
   ------------------------------------------------------------------ */
/* css/design-system.css underlines every link inside .wrap with a translucent red
   (.wrap a:not(.btn):not(.card):not(.pill) - specificity 0,4,1). The page chrome is a nav,
   not prose, so the underline is switched off there and the remaining prose rule is
   recoloured; the selector below matches the design-system specificity to win. */
.topbar .wrap a:not(.btn):not(.card):not(.pill),
.header .wrap a:not(.btn):not(.card):not(.pill),
.footer .wrap a:not(.btn):not(.card):not(.pill){text-decoration:none}
.wrap a:not(.btn):not(.card):not(.pill){text-decoration-color:rgba(179,32,45,.32)}
/* F-VIS-003: the 12px priority chip needs AA contrast on its 10% brand tint.
   --brand-strong (#8d1723) on rgba(179,32,45,.1) over white measures 7.4:1. */
.tag-p1{color:var(--brand-strong);border-color:rgba(141,23,35,.45);background:rgba(179,32,45,.1)}
.logo-mark{background:var(--brand)}
.logo-name{color:var(--brand)}
.hp-hero{position:relative;display:flex;align-items:center;min-height:100vh;background-color:#0a0a0e;background-image:url(../images/hero-pump-cutaway-1400.webp);background-position:58% center;background-size:cover;background-repeat:no-repeat;color:#f5f5f7;overflow:hidden}
.hp-hero::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(90deg,rgba(6,6,10,.94) 0%,rgba(6,6,10,.82) 30%,rgba(6,6,10,.42) 58%,rgba(6,6,10,.04) 100%)}
.hp-hero::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(10,10,14,.78) 0%,rgba(10,10,14,0) 20%,rgba(10,10,14,0) 62%,rgba(10,10,14,.8) 100%)}
.hp-hero-inner{position:relative;z-index:1;width:100%;max-width:1200px;margin:0 auto;padding:120px 24px}
.hp-hero-copy{max-width:640px}
.hp-hero-copy>*{animation:hpRise .9s cubic-bezier(.2,.7,.2,1) both}
.hp-hero-copy>*:nth-child(1){animation-delay:.15s}
.hp-hero-copy>*:nth-child(2){animation-delay:.3s}
.hp-hero-copy>*:nth-child(3){animation-delay:.45s}
.hp-hero-copy>*:nth-child(4){animation-delay:.6s}
.hp-hero-copy>*:nth-child(5){animation-delay:.75s}
@keyframes hpRise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.hp-eyebrow{font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.82)}
.hp-hero h1{margin-top:20px;font-size:clamp(38px,6.2vw,74px);line-height:1.03;letter-spacing:-.025em;font-weight:600;color:#fff}
/* F-VIS-003: measured 1.9:1 over the brighter part of the hero photograph.
   #e8e8e8 is the value the audit asked for and clears AA over the overlay. */
.hp-lead{margin-top:22px;font-size:clamp(17px,1.5vw,21px);line-height:1.5;letter-spacing:-.01em;color:#e8e8e8;max-width:600px}
.hp-hero-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.hp-btn{display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 28px;border-radius:980px;border:1px solid transparent;font-size:16px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;cursor:pointer;transition:background .2s ease,border-color .2s ease,transform .2s ease}
.hp-btn:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.hp-btn-primary{background:var(--brand);color:#fff}
.hp-btn-primary:hover{background:var(--brand-strong)}
.hp-btn-primary:active{transform:scale(.98)}
.hp-btn-dark{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.3)}
.hp-btn-dark:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.45)}
.hp-btn-dark:active{transform:scale(.98)}
.hp-trust{display:flex;flex-wrap:wrap;gap:12px 26px;margin-top:38px;font-size:14px;color:#e8e8e8}
.hp-trust span{display:inline-flex;align-items:center;gap:9px}
.hp-trust span::before{content:"";width:6px;height:6px;border-radius:50%;background:#30d158;box-shadow:0 0 0 3px rgba(48,209,88,.18)}
.hp-stats{background:#0a0a0e;border-top:1px solid rgba(255,255,255,.08);color:#f5f5f7;padding:64px 0}
.hp-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;max-width:1200px;margin:0 auto;padding:0 24px}
.hp-stat{border-top:1px solid rgba(255,255,255,.14);padding-top:20px}
.hp-stat .num{display:block;font-size:clamp(34px,4.4vw,56px);font-weight:600;line-height:1;letter-spacing:-.025em;color:#fff;font-variant-numeric:tabular-nums}
.hp-stat .lbl{display:block;margin-top:12px;font-size:14px;line-height:1.45;color:#c9c9d2}
.hp-browse{background:#f5f5f7;padding:72px 0 92px;text-align:center}
.hp-label{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#6e6e73}
.hp-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;max-width:1040px;margin:26px auto 0;padding:0 24px}
.hp-pill{display:inline-flex;align-items:center;gap:9px;height:48px;padding:0 22px;border-radius:980px;background:#fff;border:1px solid rgba(0,0,0,.07);color:#1d1d1f;font-size:15px;font-weight:500;letter-spacing:-.01em;box-shadow:0 1px 2px rgba(0,0,0,.04);transition:color .2s ease,border-color .2s ease,box-shadow .2s ease}
.hp-pill:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.hp-pill:hover{color:var(--brand);border-color:rgba(179,32,45,.45);box-shadow:0 6px 18px rgba(179,32,45,.14)}
.hp-pill svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.hp-checks{position:relative;background:#0a0a0e;color:#f5f5f7;padding:96px 0;overflow:hidden}
.hp-checks::before{content:"";position:absolute;top:-180px;right:-140px;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,rgba(10,132,255,.2),rgba(10,132,255,0) 70%);pointer-events:none}
.hp-checks-inner{position:relative;max-width:1200px;margin:0 auto;padding:0 24px}
.hp-checks h2{font-size:clamp(28px,3.6vw,44px);font-weight:600;line-height:1.1;letter-spacing:-.025em;color:#fff;max-width:720px}
.hp-check-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:46px}
.hp-check{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:28px}
.hp-check .n{font-size:13px;font-weight:600;letter-spacing:.08em;color:#0a84ff}
.hp-check h3{margin-top:14px;font-size:19px;font-weight:600;line-height:1.3;letter-spacing:-.02em;color:#fff}
.hp-check p.tx{margin-top:12px;font-size:15px;line-height:1.6;color:#b6b6c0}
@media (prefers-reduced-motion: reduce){
.hp-hero-copy>*{animation:none}
}
@media (max-width:900px){
.hp-checks{padding:72px 0}
.hp-check-grid{grid-template-columns:1fr;gap:16px}
}
@media (max-width:560px){
/* Narrow screens: top-align the hero copy and tighten the vertical rhythm. The site-wide
   fixed wa-float / mobile-bar own the bottom of the viewport (718-844 of an 844px screen),
   so a vertically centred copy would bury the three trust lines behind them. */
.hp-hero{align-items:flex-start;min-height:92vh;background-position:64% center}
.hp-hero::before{background:linear-gradient(180deg,rgba(6,6,10,.86) 0%,rgba(6,6,10,.8) 46%,rgba(6,6,10,.92) 100%)}
.hp-hero-inner{padding:40px 20px 36px}
.hp-eyebrow{font-size:12px}
.hp-hero h1{margin-top:12px;font-size:clamp(27px,8.4vw,38px)}
.hp-lead{margin-top:12px;font-size:15.5px}
.hp-btn{height:46px;padding:0 20px;font-size:14.5px}
.hp-hero-ctas{gap:8px;margin-top:18px}
.hp-trust{gap:6px 16px;margin-top:18px;font-size:12.5px}
.hp-stats{padding:48px 0}
.hp-stats-grid{grid-template-columns:repeat(2,1fr);gap:22px;padding:0 20px}
.hp-browse{padding:56px 0 76px}
.hp-pills{padding:0 16px;gap:10px}
.hp-pill{height:46px;padding:0 18px;font-size:14.5px}
.hp-checks{padding:64px 0}
.hp-checks-inner{padding:0 20px}
.hp-check{padding:22px}
}
/* Very small screens (360x740 class): the fixed wa-float eats the viewport bottom, so the
   hero copy is tightened once more. */
@media (max-width:380px){
.hp-hero-inner{padding:30px 18px 26px}
.hp-eyebrow{font-size:11px;letter-spacing:.1em}
.hp-hero h1{margin-top:12px;font-size:clamp(26px,8.6vw,32px)}
.hp-lead{margin-top:12px;font-size:15px}
.hp-hero-ctas{margin-top:18px;gap:8px}
.hp-btn{height:46px;padding:0 18px;font-size:14.5px}
.hp-trust{margin-top:18px;gap:4px 12px;font-size:12px}
}
/* 320x640 class: the site's own chrome (topbar 118 + header 61 + mobile-bar 75 +
   wa-float 48) owns 302 of 640 viewport px, so the brand kicker steps aside and the
   copy is compressed to keep the H1, lead, both CTAs and the trust row clear of the
   fixed elements. 360x740 and up keep the full treatment. */
@media (max-width:380px) and (max-height:700px){
.hp-hero-inner{padding:18px 16px 16px}
.hp-eyebrow{display:none}
.hp-hero h1{margin-top:0;font-size:clamp(22px,7.6vw,27px)}
.hp-lead{margin-top:10px;font-size:13.5px}
.hp-hero-ctas{margin-top:14px;gap:6px}
.hp-btn{height:40px;padding:0 16px;font-size:13.5px}
.hp-trust{margin-top:12px;gap:2px 10px;font-size:11px}
}

/* ------------------------------------------------------------------
   Arabic home page is dir="rtl": mirror the scrim, flip the image anchor so the
   copy always sits on the dark side, and drop the Latin tracking rules that make
   Arabic script look loose.
   ------------------------------------------------------------------ */
html[lang="ar"] .hp-hero{background-position:42% center}
html[lang="ar"] .hp-hero::before{background:linear-gradient(270deg,rgba(6,6,10,.94) 0%,rgba(6,6,10,.82) 30%,rgba(6,6,10,.42) 58%,rgba(6,6,10,.04) 100%)}
html[lang="ar"] .hp-eyebrow{letter-spacing:0;text-transform:none}
html[lang="ar"] .hp-hero h1,html[lang="ar"] .hp-lead,html[lang="ar"] .hp-pill,html[lang="ar"] .hp-check h3,html[lang="ar"] .hp-stat .lbl{letter-spacing:0}
@media (max-width:560px){html[lang="ar"] .hp-hero{background-position:36% center}}
/* Arabic desktop keeps extra room under the copy: in RTL the trust row sits on the right,
   exactly where the fixed wa-float lives. */
@media (min-width:561px){html[lang="ar"] .hp-hero-inner{padding-bottom:168px}}
/* The localised nav labels are longer than the English ones, so at >=1081px the shared header's
   action row (compact search + language switch + WhatsApp pill) can push past the viewport and
   raise a horizontal scrollbar. That is a shared-chrome issue and it happens on every localised
   page (measured on /ru/standards/, /ru/machines/ and /pt/parts/ as well), not something this
   layer introduced. On the four localised home pages the compact search box steps aside, which
   is exactly what assets/flutek.css already does below 1080px. */
@media (min-width:1081px){html:not([lang="en"]) .search-mini{display:none}}