/* ============================================================
   SAVEX MINERALS — style.css
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face{font-family:'Open Sans';font-weight:300;font-style:normal;font-display:swap;
    src:url('../assets/fonts/OpenSansLight/OpenSansLight.woff') format('woff'),
        url('../assets/fonts/OpenSansLight/OpenSansLight.ttf') format('truetype');}
@font-face{font-family:'Open Sans';font-weight:400;font-style:normal;font-display:swap;
    src:url('../assets/fonts/OpenSansRegular/OpenSansRegular.woff') format('woff'),
        url('../assets/fonts/OpenSansRegular/OpenSansRegular.ttf') format('truetype');}
@font-face{font-family:'Open Sans';font-weight:600;font-style:normal;font-display:swap;
    src:url('../assets/fonts/OpenSansSemiBold/OpenSansSemiBold.woff') format('woff'),
        url('../assets/fonts/OpenSansSemiBold/OpenSansSemiBold.ttf') format('truetype');}
@font-face{font-family:'Open Sans';font-weight:700;font-style:normal;font-display:swap;
    src:url('../assets/fonts/OpenSansBold/OpenSansBold.woff') format('woff'),
        url('../assets/fonts/OpenSansBold/OpenSansBold.ttf') format('truetype');}
@font-face{font-family:'Open Sans';font-weight:800;font-style:normal;font-display:swap;
    src:url('../assets/fonts/OpenSansExtraBold/OpenSansExtraBold.woff') format('woff'),
        url('../assets/fonts/OpenSansExtraBold/OpenSansExtraBold.ttf') format('truetype');}

/* ---------- Theme tokens ---------- */
:root{
    --red:#E52030;
    --red-hi:#F5333F;
    --container:1440px;
    --gutter:48px;
    --header-h:96px;
    --ease:cubic-bezier(.22,.61,.36,1);
}
:root[data-theme="dark"]{
    --map-dot:rgba(255,255,255,.25);
    --map-fade:#121212;
    --mission-scrim:linear-gradient(180deg,rgba(0,0,0,.80) 0%,rgba(0,0,0,.66) 45%,rgba(0,0,0,.86) 100%);
    --mcard-bg:rgba(22,20,23,.86);
    --bg:#121212;
    --bg-2:#0E0D0F;
    --text:#FFFFFF;
    --text-strong:#FFFFFF;
    --muted:#9C9AA0;
    --muted-2:#6E6C71;
    --card:linear-gradient(150deg,#242224 0%,#161416 60%,#1b1a1c 100%);
    --card-border:rgba(255,255,255,.10);
    --grid-line:rgba(255,255,255,.13);
    --card-glow:rgba(229,32,48,.22);
    --tab-bg:rgba(255,255,255,.10);
    --stats-bg:#1B191B;
    --stats-border:rgba(255,255,255,.08);
    --footer-bg:#181818;
    --divider:rgba(255,255,255,.14);
    --glass:rgba(255,255,255,.07);
    --glass-border:#F3F3F9;
    --header-glass:rgba(28,26,28,.45);
    --header-border:rgba(255,255,255,.14);
    --hero-overlay:rgba(0,0,0,.40);
    --glow:rgba(229,32,48,.28);
    --to-top-bg:rgba(255,255,255,.02);
    --grain-opacity:1;
    --grain-blend:screen;
    --pcat-bg:#1A181B;
    --pcat-line:rgba(255,255,255,.14);
    --pcat-shadow:rgba(0,0,0,.72);
    --pcat-shadow-hi:rgba(229,32,48,.42);
}
:root[data-theme="light"]{
    --map-dot:rgba(0,0,0,.25);
    --map-fade:#C8C9C3;
    --mission-scrim:linear-gradient(180deg,rgba(200,201,195,.86) 0%,rgba(200,201,195,.74) 45%,rgba(200,201,195,.90) 100%);
    --mcard-bg:rgba(239,239,234,.88);
    --bg:#C8C9C3;
    --bg-2:#E4E5DF;
    --text:#20202A;
    --text-strong:#141019;
    --muted:#5C5A63;
    --muted-2:#8A8790;
    --card:#EFEFEA;
    --card-border:rgba(20,16,25,.10);
    --grid-line:rgba(20,16,25,.10);
    --card-glow:rgba(229,32,48,.15);
    --tab-bg:rgba(20,16,25,.07);
    --stats-bg:#F1F1EC;
    --stats-border:rgba(20,16,25,.08);
    --footer-bg:#C7C8C0;
    --divider:rgba(20,16,25,.12);
    --glass:rgba(255,255,255,.55);
    --glass-border:#ED2531;
    --header-glass:rgba(255,255,255,.55);
    --header-border:rgba(255,255,255,.8);
    --hero-overlay:rgba(200,201,195,.40);
    --glow:rgba(229,32,48,.16);
    --to-top-bg:rgba(255,255,255,.6);
    --grain-opacity:.9;
    --grain-blend:multiply;
    --pcat-bg:#EFEFEA;
    --pcat-line:rgba(20,16,25,.12);
    --pcat-shadow:rgba(20,16,25,.28);
    --pcat-shadow-hi:rgba(229,32,48,.30);
}

/* ---------- Reset / base ---------- */
*{box-sizing:border-box;margin:0;padding:0}
/* overflow-x:clip (not hidden) — hidden would turn body into a scroll container
   and break position:sticky in the product category stack */
html{scroll-behavior:smooth;overflow-x:clip}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{
    font-family:'Open Sans',system-ui,sans-serif;
    background:var(--bg);
    color:var(--text);
    font-size:16px;line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:clip;
    transition:background-color .4s var(--ease),color .4s var(--ease);
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
ul{list-style:none}

.container{max-width:var(--container);margin:0 auto;padding:0 var(--gutter);width:100%}

/* Theme-scoped logo/image swaps */
:root[data-theme="dark"] .logo-img--light,
:root[data-theme="light"] .logo-img--dark,
:root[data-theme="dark"] .logo-sq--light,
:root[data-theme="light"] .logo-sq--dark,
:root[data-theme="dark"] .hero__img--light,
:root[data-theme="light"] .hero__img--dark{display:none}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
    position:fixed;top:0;left:0;right:0;z-index:100;
    height:var(--header-h);
    display:flex;align-items:center;
}
.site-header::before{
    content:"";position:absolute;inset:12px 0;
    margin:0 auto;max-width:calc(var(--container) - 24px);width:calc(100% - 24px);
    background:var(--header-glass);
    -webkit-backdrop-filter:blur(22px) saturate(140%);
    backdrop-filter:blur(22px) saturate(140%);
    border:1px solid var(--header-border);
    border-radius:6px;
    box-shadow:0 8px 40px rgba(0,0,0,.25);
    transition:background-color .4s var(--ease),border-color .4s var(--ease);
}
.header__inner{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;width:100%}
.header__logo{z-index:2;width:228px;height:44px;display:flex;align-items:center;justify-self:start}
.logo-img{height:44px;width:100%;object-fit:contain;object-position:left center}

.header__nav{justify-self:center}
.nav-list{display:flex;align-items:center;gap:34px}
.nav-item{position:relative}
.nav-link{
    display:inline-flex;align-items:center;gap:7px;
    font-size:16px;font-weight:600;color:var(--text);
    padding:6px 0;line-height:1;letter-spacing:.1px;
    transition:color .25s var(--ease);
}
.nav-link:hover,.submenu__link:hover{color:var(--red)}
.nav-link.is-current{position:relative}
.nav-link.is-current::after{
    content:"";position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);
    width:5px;height:5px;border-radius:50%;background:var(--red);
}
.nav-caret{transition:transform .3s var(--ease)}
.nav-item--has-sub:hover .nav-caret{transform:rotate(180deg)}

.submenu{
    position:absolute;top:calc(100% + 16px);left:50%;transform:translateX(-50%) translateY(8px);
    min-width:250px;padding:10px;
    background:var(--header-glass);
    -webkit-backdrop-filter:blur(24px) saturate(150%);
    backdrop-filter:blur(24px) saturate(150%);
    border:1px solid var(--header-border);border-radius:8px;
    box-shadow:0 20px 50px rgba(0,0,0,.35);
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s;
}
.nav-item--has-sub:hover .submenu,
.nav-item--has-sub.is-open .submenu{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.submenu::before{content:"";position:absolute;top:-16px;left:0;right:0;height:16px}
.submenu__link{
    display:block;padding:11px 14px;border-radius:6px;
    font-size:15px;font-weight:600;color:var(--text);
    transition:background-color .2s,color .2s;
}
.submenu__link:hover{background:rgba(229,32,48,.12)}

.header__actions{justify-self:end;display:flex;align-items:center;gap:22px}
.lang-switch{display:flex;align-items:center;gap:5px;font-size:16px}
.lang{font-weight:600;color:var(--muted-2)}
.lang--active{color:var(--text);font-weight:700}
.lang__sep{color:var(--muted-2)}

.theme-toggle{
    position:relative;width:58px;height:30px;border-radius:999px;
    background:var(--red);flex:0 0 auto;
    display:flex;align-items:center;padding:0 5px;
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);
}
.theme-toggle__icon{width:16px;height:16px;position:absolute;top:50%;transform:translateY(-50%);
    background-repeat:no-repeat;background-position:center;background-size:contain;opacity:.9}
.theme-toggle__icon--sun{right:7px;background-image:url('../assets/icon/icon-day.svg')}
.theme-toggle__icon--moon{left:7px;background-image:url('../assets/icon/icon-night.svg')}
.theme-toggle__knob{
    position:absolute;top:3px;width:24px;height:24px;border-radius:50%;
    background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.35);
    transition:left .32s var(--ease);
}
:root[data-theme="dark"] .theme-toggle__knob{left:3px}
:root[data-theme="dark"] .theme-toggle__icon--moon{opacity:0}
:root[data-theme="light"] .theme-toggle__knob{left:31px}
:root[data-theme="light"] .theme-toggle__icon--sun{opacity:0}

/* Contacts button — angular tag */
.btn-contacts{
    display:inline-flex;align-items:center;justify-content:center;
    height:50px;padding:0 34px;
    background:var(--red);color:#fff;font-weight:700;font-size:15px;letter-spacing:.4px;
    text-transform:uppercase;
    clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));
    transition:background-color .25s var(--ease),transform .25s var(--ease);
}
.btn-contacts:hover{background:var(--red-hi);transform:translateY(-1px)}

.nav-item--mobile{display:none}
.nav-mobile-extra{display:none}
.burger{display:none;width:34px;height:26px;position:relative}
.burger span{position:absolute;left:0;height:2.5px;width:100%;background:var(--text);border-radius:2px;transition:.3s var(--ease)}
.burger span:nth-child(1){top:0}
.burger span:nth-child(2){top:50%;transform:translateY(-50%)}
.burger span:nth-child(3){bottom:0}
.burger.is-active span:nth-child(1){top:50%;transform:translateY(-50%) rotate(45deg)}
.burger.is-active span:nth-child(2){opacity:0}
.burger.is-active span:nth-child(3){bottom:auto;top:50%;transform:translateY(-50%) rotate(-45deg)}

.nav-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:90;opacity:0;visibility:hidden;transition:.35s var(--ease)}
.nav-overlay.is-active{opacity:1;visibility:visible}

/* ============================================================
   BUTTONS (shared)
   ============================================================ */
.btn{
    display:inline-flex;align-items:center;justify-content:center;
    height:58px;padding:0 40px;font-weight:700;font-size:15px;letter-spacing:.6px;
    text-transform:uppercase;color:#fff;
    transition:background-color .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease);
}
.btn--hex{clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px))}
.btn--red{background:var(--red)}
.btn--red:hover{background:var(--red-hi);transform:translateY(-2px)}
/* Frosted glass on the element itself (the banner shows through). The border is a
   2px chamfered *ring* on ::before: one evenodd clip-path traces the outer hex and
   an inner hex inset 2px, leaving the centre a hole — so the ring follows every
   edge, cut corners included, while the glass interior stays see-through. */
.btn--glass{
    background:var(--glass);color:var(--text-strong);position:relative;
    -webkit-backdrop-filter:blur(16px) saturate(120%);backdrop-filter:blur(16px) saturate(120%);
    transition:transform .25s var(--ease),background-color .25s var(--ease);
}
.btn--glass::before{
    content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
    background:var(--glass-border);
    clip-path:polygon(evenodd,
        0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px), 0 0,
        2px 2px, 2px calc(100% - 16px), 16px calc(100% - 2px), calc(100% - 2px) calc(100% - 2px),
        calc(100% - 2px) 16px, calc(100% - 16px) 2px, 2px 2px);
    transition:filter .25s var(--ease);
}
.btn--glass span{position:relative;z-index:1}
.btn--glass:hover{transform:translateY(-2px)}
.btn--glass:hover::before{filter:brightness(1.1)}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;width:100%;aspect-ratio:1698/926;min-height:720px;display:flex;align-items:center;padding-top:var(--header-h);overflow:hidden}
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__img{width:100%;height:100%;object-fit:cover;object-position:center;position:absolute;inset:0}
.hero__overlay{position:absolute;inset:0;background:var(--hero-overlay);
    transition:background-color .4s var(--ease)}
:root[data-theme="dark"] .hero__bg::after{content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(0,0,0,0) 55%,var(--bg) 100%)}
:root[data-theme="light"] .hero__bg::after{content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(200,201,195,0) 55%,var(--bg) 100%)}

.hero__inner{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:40px;width:100%;padding-top:40px;padding-bottom:80px}
.hero__content{flex:0 1 640px;color:#fff}
:root[data-theme="light"] .hero__content{color:var(--text-strong)}
.hero__eyebrow{font-size:26px;font-weight:600;margin-bottom:10px}
.hero__title{font-size:88px;font-weight:600;line-height:.98;letter-spacing:-1px;white-space:nowrap}
/* Заголовок банера — монохромний в обох темах (без червоного акценту на «Minerals»). */
.hero__title,
.hero__title .accent{color:#FFFFFF}
:root[data-theme="light"] .hero__title,
:root[data-theme="light"] .hero__title .accent{color:#000000}
.hero__actions{display:flex;gap:22px;margin-top:44px}

/* Hexagon cluster */
.hero__cluster{position:relative;flex:0 0 500px;height:534px}
.hex{position:absolute;filter:drop-shadow(0 14px 30px rgba(0,0,0,.5))}
.hex__svg{width:100%;height:100%;display:block;overflow:visible}
/* Sizes & positions measured 1:1 from the design mockup (regular pointy-top, ratio 1.155) */
.hex--lg{width:247px;height:285px;left:0;top:134px;z-index:3}
.hex--tl{width:130px;height:150px;left:193px;top:5px;z-index:2}
.hex--tr{width:128px;height:147px;left:342px;top:15px;z-index:2}
.hex--bm{width:128px;height:147px;left:223px;top:387px;z-index:2}
.hex--br{width:125px;height:145px;left:371px;top:363px;z-index:2}
.hex--iso{width:164px;height:190px;left:280px;top:170px;z-index:4;filter:drop-shadow(0 10px 24px rgba(229,32,48,.45))}

/* ============================================================
   STATS
   ============================================================ */
.stats-wrap{margin-top:-45px;position:relative;z-index:5;padding-bottom:40px}
.stats{
    display:grid;grid-template-columns:repeat(4,1fr);
    background:var(--stats-bg);border:1px solid var(--stats-border);
    border-radius:8px;padding:44px 20px;
    transition:background-color .4s var(--ease),border-color .4s var(--ease);
}
.stat{padding:6px 40px;position:relative}
.stat + .stat::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:1px;background:var(--divider)}
.stat__num{display:block;font-size:56px;font-weight:600;line-height:1;color:var(--text-strong);letter-spacing:-1px}
.stat__label{display:block;margin-top:14px;font-size:16px;color:var(--muted);line-height:1.35}

/* ============================================================
   Shared section bits
   ============================================================ */
.eyebrow-box{display:inline-block;background:var(--red);color:#fff;font-size:32px;font-weight:600;
    padding:2px 14px;margin-bottom:8px;line-height:1.25}
.section-title{font-size:44px;font-weight:600;color:var(--text-strong);line-height:1.1;letter-spacing:-.5px}
.eyebrow-center{display:block;color:var(--red);font-size:22px;font-weight:600;margin-bottom:10px}
.section-title--center{text-align:center}

.link-more{display:inline-flex;align-items:center;gap:12px;color:var(--red);font-weight:700;font-size:19px;
    transition:gap .25s var(--ease),color .25s var(--ease)}
.link-more:hover{gap:18px;color:var(--red-hi)}
.link-more__arrow{font-size:20px;line-height:1}

/* ============================================================
   ABOUT
   ============================================================ */
.about{padding:120px 0 90px;position:relative}
:root[data-theme="dark"] .about::after{content:"";position:absolute;right:0;top:10%;width:38%;height:80%;
    background:radial-gradient(closest-side,var(--glow),transparent 70%);pointer-events:none;z-index:0}
:root[data-theme="light"] .about::before{content:"";position:absolute;left:-6%;top:20%;width:34%;height:70%;
    background:radial-gradient(closest-side,var(--glow),transparent 72%);pointer-events:none;z-index:0}
.about__inner{position:relative;z-index:1;display:grid;grid-template-columns:44% 1fr;gap:70px;align-items:center}
.about__media{position:relative}
.about__img{width:100%;aspect-ratio:1086/1160;background-size:cover;background-position:center;
    clip-path:polygon(0 0,calc(100% - 46px) 0,100% 46px,100% 100%,46px 100%,0 calc(100% - 46px))}
.about__content .eyebrow-box{margin-bottom:2px}
.about__content .section-title{margin-bottom:30px}
.about__text p{color:var(--muted);margin-bottom:20px;max-width:620px}
.about__content .link-more{margin-top:24px}

/* ============================================================
   PRODUCTS
   ============================================================ */
.products{padding:40px 0 0}
.products__inner{display:grid;grid-template-columns:380px 1fr;column-gap:56px;row-gap:64px;align-items:start}
.products__head-left{grid-column:1;grid-row:1}
.products__head-right{grid-column:2;grid-row:1}
.products__stack{grid-column:1/-1;grid-row:2;min-width:0}

.products__title{font-size:54px;font-weight:600;line-height:1.05;color:var(--text-strong)}
.products__title .hl{background:var(--red);color:#fff;padding:0 14px;display:inline-block;margin-top:6px}
.products__note{border-left:2px solid var(--red);padding-left:26px}
.products__note p{color:var(--text);font-weight:600;line-height:1.55;font-size:17px}

/* Category stack — each card sticks and the next one slides over it */
/* hover glow lives on the parent: clip-path on the card would cut a box-shadow off,
   drop-shadow on .pcat follows the chamfered silhouette instead */
.pcat{position:sticky;top:calc(var(--header-h) + 28px + var(--i) * 34px);
    transition:filter .3s var(--ease)}
.pcat:hover{filter:drop-shadow(0 -10px 30px var(--pcat-shadow-hi))}
.pcat + .pcat{margin-top:52px}
.pcat__card{position:relative;display:grid;grid-template-columns:1fr 1.08fr;align-items:stretch;
    min-height:440px;overflow:hidden;background:var(--pcat-bg);
    clip-path:polygon(0 0,calc(100% - 48px) 0,100% 48px,100% 100%,48px 100%,0 calc(100% - 48px))}
.pcat__card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--red);z-index:3}
/* hairline along the top edge — separates the incoming card from the one below it */
.pcat__card::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;
    background:var(--pcat-line);z-index:2;pointer-events:none}

.pcat__body{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
    padding:56px 56px 56px 62px;gap:18px}
.pcat__count{font-size:13px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--red)}
.pcat__title{font-size:42px;font-weight:600;line-height:1.08;color:var(--text-strong)}
.pcat__desc{color:var(--muted);font-size:17px;line-height:1.6;max-width:440px}
.pcat__btn{margin-top:14px}
.pcat__card:hover .pcat__btn{background:var(--red-hi)}

.pcat__media{position:relative;overflow:hidden;min-height:280px}
.pcat__media img{width:100%;height:100%;object-fit:cover;
    transition:transform .6s var(--ease)}
.pcat__card:hover .pcat__media img{transform:scale(1.04)}
.pcat__media::after{content:"";position:absolute;inset:0;
    background:linear-gradient(90deg,var(--pcat-bg) 0,transparent 22%)}

@media (prefers-reduced-motion:reduce){
    .pcat{position:static;transition:none}
    .pcat__media img{transition:none}
}

/* ============================================================
   PARTNERS
   ============================================================ */
.partners{padding:80px 0 90px;position:relative;overflow:hidden}
:root[data-theme="dark"] .partners::before{content:"";position:absolute;left:-8%;top:0;width:30%;height:100%;
    background:radial-gradient(closest-side,var(--glow),transparent 72%);pointer-events:none}
.partners__inner{position:relative;z-index:1;text-align:center}
.partners__lead{max-width:820px;margin:20px auto 0;color:var(--muted)}
.slider{display:flex;align-items:center;gap:20px;margin-top:56px}
.slider__arrow{flex:0 0 auto;width:40px;height:40px;display:grid;place-items:center;
    transition:transform .25s var(--ease),opacity .25s}
.arrow-ico{display:block;width:30px;height:24px}
.slider__arrow--prev .arrow-ico{transform:scaleX(-1)}
.slider__arrow:hover{transform:scale(1.15)}
.slider__viewport{flex:1;overflow:hidden}
.slider__track{display:flex;align-items:center;will-change:transform}
.slider__slide{flex:0 0 20%;display:flex;align-items:center;justify-content:center;padding:0 20px}
/* Partner logos ship in wildly different aspect ratios (1:1 up to 10:1). Every logo gets an
   identical box and is fitted inside it, so the gaps between them are uniform no matter the shape. */
.slider__slide img{width:100%;max-width:210px;height:52px;object-fit:contain;object-position:center;
    filter:grayscale(1) brightness(1.9) opacity(.55);
    transition:filter .3s var(--ease)}
:root[data-theme="light"] .slider__slide img{filter:grayscale(1) brightness(.7) opacity(.55)}
.slider__slide img:hover{filter:grayscale(1) brightness(1.9) opacity(.9)}
:root[data-theme="light"] .slider__slide img:hover{filter:grayscale(1) brightness(.6) opacity(.9)}
.slider__dots{display:flex;justify-content:center;gap:12px;margin-top:26px}
.slider__dots button{position:relative;width:26px;height:4px;border-radius:2px;background:var(--divider);transition:background .3s}
/* The visible dot stays 26x4, but the tap target is padded out to a usable 36x44 */
.slider__dots button::before{content:"";position:absolute;left:-5px;right:-5px;top:-20px;bottom:-20px}
.slider__dots button:hover{background:var(--muted)}
.slider__dots button.is-active{background:var(--red)}

/* ============================================================
   CTA
   ============================================================ */
.cta{padding:20px 0 100px}
.cta__box{position:relative;border-radius:6px;overflow:hidden;min-height:320px;display:flex;align-items:center}
.cta__bg{position:absolute;inset:0;background-size:cover;background-position:center right;z-index:0}
.cta__box::before{content:"";position:absolute;inset:0;z-index:1;
    background:linear-gradient(90deg,rgba(8,6,6,.94) 18%,rgba(8,6,6,.55) 46%,rgba(8,6,6,0) 70%)}
.cta__content{position:relative;z-index:2;padding:56px 60px;max-width:60%}
.cta__title{font-size:30px;font-weight:600;color:#fff;line-height:1.3}
.cta__hl{display:inline-block;margin-top:16px;background:var(--red);color:#fff;font-weight:600;font-size:16px;padding:4px 12px}
.cta__btn{position:absolute;right:56px;top:50%;transform:translateY(-50%);z-index:3;height:64px;
    clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px))}
.cta__btn:hover{transform:translateY(calc(-50% - 2px))}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{background:var(--footer-bg);padding:70px 0 26px;transition:background-color .4s var(--ease)}
.footer__inner{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:40px}
.logo-sq{height:130px;width:auto;margin-bottom:24px}
.footer__desc{color:var(--muted);font-size:14px;max-width:300px;line-height:1.6}
.footer__title{color:var(--red);font-size:20px;font-weight:600;margin-bottom:24px}
.footer__col ul li{margin-bottom:14px}
.footer__col ul a{color:var(--muted);font-size:15px;transition:color .2s}
.footer__col ul a:hover{color:var(--text)}
.footer__addr{color:var(--muted);font-size:15px;margin-bottom:18px;line-height:1.55}
.footer__link{display:block;color:var(--muted);font-size:15px;margin-bottom:14px;transition:color .2s}
.footer__link:hover{color:var(--text)}
.footer__social{display:flex;gap:14px;margin-top:22px}
.social-hex{position:relative;width:44px;height:48px;display:grid;place-items:center;color:var(--red);
    transition:color .25s var(--ease)}
.social-ico{position:relative;z-index:1}
.social-hex:hover{color:#fff}
/* Reusable hexagon outline (rounded, 2px stroke) */
.hex-outline{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hex-outline path{fill:transparent;stroke:currentColor;stroke-width:1;
    transition:fill .25s var(--ease),stroke .25s var(--ease)}
.social-hex:hover .hex-outline path{fill:var(--red)}
:root[data-theme="light"] .social-hex{color:#5A5553}
:root[data-theme="light"] .social-hex:hover{color:#fff}
.footer__bottom{display:flex;justify-content:space-between;align-items:center;
    margin-top:56px;padding-top:24px;border-top:1px solid var(--divider);
    color:var(--muted-2);font-size:14px}

/* To-top */
.to-top{position:fixed;right:30px;bottom:34px;z-index:80;width:52px;height:57px;
    display:grid;place-items:center;color:var(--red);
    opacity:0;visibility:hidden;transform:translateY(14px);
    transition:opacity .35s var(--ease),transform .35s var(--ease),color .25s var(--ease)}
.to-top.is-visible{opacity:1;visibility:visible;transform:translateY(0)}
.to-top__ico{position:relative;z-index:1}
.to-top .hex-outline path{fill:var(--to-top-bg)}
.to-top:hover{color:#fff}
.to-top:hover .hex-outline path{fill:var(--red)}

/* ============================================================
   Scroll reveal base
   ============================================================ */
[data-anim]{opacity:0;will-change:transform,opacity}
[data-anim="up"]{transform:translateY(40px)}
[data-anim="left"]{transform:translateX(-50px)}
[data-anim="right"]{transform:translateX(50px)}
.is-inview[data-anim]{opacity:1;transform:none}
[data-anim]{transition:opacity .8s var(--ease),transform .8s var(--ease)}
@media (prefers-reduced-motion:reduce){
    [data-anim]{opacity:1!important;transform:none!important;transition:none}
    html{scroll-behavior:auto}
}

/* ============================================================
   LIVING GRAIN OVERLAY
   ============================================================ */
.grain{
    position:fixed;top:-120%;left:-120%;width:340%;height:340%;
    z-index:9998;pointer-events:none;
    background-image:url('../assets/bg/noise-transparent.png');
    background-repeat:repeat;background-size:170px 170px;
    opacity:var(--grain-opacity);
    mix-blend-mode:var(--grain-blend);
    will-change:transform;
    animation:grain-shift .55s steps(6) infinite;
    transition:opacity .4s var(--ease);
}
@keyframes grain-shift{
    0%,100%{transform:translate(0,0)}
    10%{transform:translate(-3%,-4%)}
    20%{transform:translate(-7%,3%)}
    30%{transform:translate(4%,-7%)}
    40%{transform:translate(-4%,6%)}
    50%{transform:translate(-8%,2%)}
    60%{transform:translate(5%,3%)}
    70%{transform:translate(-3%,6%)}
    80%{transform:translate(6%,-5%)}
    90%{transform:translate(-5%,-3%)}
}
@media (prefers-reduced-motion:reduce){.grain{animation:none}}

/* ============================================================
   SCROLL PROGRESS BAR
   ============================================================ */
.scroll-progress{
    position:fixed;top:0;left:0;height:3px;width:0;
    background:#ED2531;box-shadow:0 0 10px rgba(237,37,49,.6);
    z-index:10000;pointer-events:none;
    transition:width .08s linear;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* Below the 1440 design width: stack hero (content above, cluster below) */
@media (max-width:1439px){
    :root{--gutter:32px}
    .hero{aspect-ratio:auto;min-height:auto;height:auto;padding-top:calc(var(--header-h) + 30px)}
    .hero__inner{flex-direction:column;align-items:flex-start;gap:24px;padding-top:20px;padding-bottom:56px}
    .hero__content{flex:0 1 auto}
    .hero__title{font-size:80px}
    /* Give the cluster its real 500px design width so align-self:center actually
       centres it. Without a width the box collapses to 0 (children are absolute)
       and the hexes hang off to the right, clipping on every stacked width. */
    .hero__cluster{width:500px;align-self:center;flex:0 0 auto;height:534px;transform:none;margin-bottom:0}
    .stat{padding:6px 24px}
    .stat__num{font-size:46px}
}
/* 961–1200: keep centered desktop nav but compress so nothing clips */
@media (max-width:1200px) and (min-width:961px){
    .header__inner{gap:16px}
    .header__logo{width:190px}
    .nav-list{gap:18px}
    .nav-link{font-size:14px}
    .header__actions{gap:14px}
    .header__actions > .lang-switch{display:none}
    .btn-contacts{height:44px;padding:0 18px;font-size:13px}
}
@media (max-width:960px){
    :root{--header-h:80px;--gutter:24px}
    .header__inner{display:flex;justify-content:space-between;gap:16px}
    .header__logo{width:190px;height:38px}
    .logo-img{height:38px}
    .header__actions{margin-left:auto}
    /* mobile nav */
    .header__nav{position:fixed;top:0;right:0;bottom:0;width:min(360px,86vw);
        background:var(--bg-2);z-index:95;padding:calc(var(--header-h) + 20px) 30px 40px;
        transform:translateX(100%);transition:transform .4s var(--ease);
        overflow-y:auto;box-shadow:-20px 0 60px rgba(0,0,0,.4);margin:0}
    .header__nav.is-open{transform:translateX(0)}
    .nav-list{flex-direction:column;align-items:stretch;gap:6px}
    .nav-item{width:100%}
    .nav-link{width:100%;justify-content:space-between;padding:14px 0;font-size:18px;border-bottom:1px solid var(--divider)}
    .nav-link.is-current::after{display:none}
    .submenu{position:static;transform:none;opacity:1;visibility:visible;pointer-events:auto;
        min-width:0;background:transparent;border:none;box-shadow:none;padding:0 0 8px;
        max-height:0;overflow:hidden;transition:max-height .35s var(--ease)}
    .nav-item--has-sub:hover .submenu{transform:none}
    .nav-item--has-sub.is-open .submenu{max-height:240px}
    .submenu__link{padding:10px 16px;font-size:16px;color:var(--muted)}
    .nav-item--has-sub.is-open .nav-caret{transform:rotate(180deg)}
    .burger{display:block}
    .btn-contacts{display:none}
    .header__actions > .lang-switch{display:none}
    .header__actions{gap:14px}
    /* mobile drawer extras */
    .nav-mobile-extra{display:flex;flex-direction:column;gap:18px;margin-top:30px}
    .nav-mobile-extra .lang-switch{display:flex;font-size:18px}
    .nav-mobile-extra__btn{width:100%;height:52px}

    .hero{padding-top:calc(var(--header-h) + 20px)}
    .hero__inner{gap:16px;padding-bottom:50px}
    .hero__cluster{transform:none;height:534px;margin-bottom:0}
    .hero__title{font-size:60px;white-space:normal}
    .hero__eyebrow{font-size:20px}

    .stats{grid-template-columns:repeat(2,1fr);gap:26px 0;padding:34px 10px}
    .stat + .stat::before{display:none}
    .stat{border-left:none}

    .about__inner{grid-template-columns:1fr;gap:36px}
    .about__media{max-width:520px}
    .products__inner{grid-template-columns:1fr;row-gap:36px}
    .products__head-left{grid-column:1;grid-row:1}
    .products__head-right{grid-column:1;grid-row:2}
    .products__stack{grid-column:1;grid-row:3}
    .section-title{font-size:34px}
    .products__title{font-size:44px}

    .pcat__card{grid-template-columns:1fr;min-height:0}
    .pcat__body{order:2;padding:34px 30px 38px 36px;gap:14px}
    .pcat__media{order:1;min-height:0;aspect-ratio:16/9}
    .pcat__media::after{background:linear-gradient(to bottom,transparent 55%,var(--pcat-bg) 100%)}
    .pcat__title{font-size:32px}
    .pcat__title br{display:none}

    .cta__content{max-width:100%;padding:40px 30px}
    /* Планшет — проміжний щабель між десктопними 30/16px і мобільними 17/14px. */
    .cta__title{font-size:22px}
    .cta__hl{font-size:15px}
    .cta__box::before{background:linear-gradient(90deg,rgba(8,6,6,.92) 40%,rgba(8,6,6,.4) 100%)}
    .cta__btn{position:static;transform:none;margin:0 30px 40px;width:calc(100% - 60px)}
    .cta__btn:hover{transform:translateY(-2px)}
    .cta__box{flex-direction:column;align-items:flex-start}

    .slider__slide{flex-basis:33.333%}
    .footer__inner{grid-template-columns:1fr 1fr;gap:34px}
    .footer__bottom{flex-direction:column;gap:10px;text-align:center}
}
@media (max-width:600px){
    :root{--gutter:18px}
    .hero__title{font-size:48px}
    .hero__actions{flex-direction:column;gap:14px;width:100%}
    .hero__actions .btn{width:100%}
    /* Mobile: hexagons above the heading/buttons. */
    .hero__cluster{order:-1}
    /* Below the 500px design width the centred cluster is scaled to fit. The box
       height is set to the *scaled* height (534*scale) instead of using a negative
       margin, so reordering can't over-collapse the gap to the next block. */
    .hero__cluster{transform-origin:center top;transform:scale(.9);height:481px;margin-bottom:0}
    /* Кнопки героя тут стоять стовпчиком одразу над картками, тому базовий
       нахлест (margin-top:-45px) міняємо на відступ. */
    .stats-wrap{margin-top:50px}
    .stats{grid-template-columns:1fr;gap:22px;text-align:center}
    .eyebrow-box{font-size:24px}
    .section-title{font-size:28px}
    .products__title{font-size:36px}
    .pcat__card{clip-path:polygon(0 0,calc(100% - 30px) 0,100% 30px,100% 100%,30px 100%,0 calc(100% - 30px))}
    .pcat__body{padding:28px 22px 30px 28px}
    .pcat__title{font-size:27px}
    .pcat__desc{font-size:16px}
    .pcat__btn{width:100%}
    .cta__title{font-size:17px}
    .cta__hl{font-size:14px}
    /* Кнопка тут на всю ширину: якщо довгий підпис переноситься на два рядки,
       inline-flex центрує лише блок рядків, тому вирівнювання задаємо явно. */
    .cta__btn{font-size:12px;text-align:center}
    .pcat + .pcat{margin-top:26px}
    .slider__slide{flex-basis:50%;padding:0 14px}
    .slider__slide img{height:44px}
    .footer__inner{grid-template-columns:1fr}
    .to-top{right:16px;bottom:20px}
    .site-header::before{inset:8px 0}
}
@media (max-width:500px){
    .hero__cluster{transform:scale(.78);height:417px}
}
@media (max-width:420px){
    .hero__cluster{transform:scale(.66);height:352px}
}
@media (max-width:360px){
    .hero__title{font-size:40px}
    .slider__slide{flex-basis:100%}
    .slider{gap:8px}
    .hero__cluster{transform:scale(.58);height:310px}
}
@media (max-width:320px){
    .hero__cluster{transform:scale(.52);height:278px}
}

/* ============================================================
   ABOUT PAGE — «Про компанію»
   Self-contained block: layout, motion primitives and its own
   responsive rules live here so index.html stays untouched.
   ============================================================ */

/* ---------- Motion primitives (split text / media reveal) ---------- */
/* Masks are built by initSplit() in main.js; without JS the text
   stays as-is, so nothing is ever hidden by CSS alone. */
/* padding/negative-margin pair keeps Cyrillic descenders (у, р, д) from being
   clipped by the overflow mask without changing the text's visual baseline */
.sp-mask{display:inline-block;overflow:hidden;vertical-align:top;
    padding-bottom:.14em;margin-bottom:-.14em}
.sp-mask--line{display:block}
.sp-in{display:inline-block;will-change:transform}
/* Holds one word's character masks together — see splitChars() in main.js.
   inline-block rather than nowrap: the word moves to the next line whole, but a
   word wider than the container still wraps internally instead of being clipped
   by the hero's overflow:hidden. */
.sp-word{display:inline-block;vertical-align:top}

[data-reveal="img"]{overflow:hidden;position:relative}
[data-reveal="img"] img{width:100%;height:100%;object-fit:cover;display:block;will-change:transform}

/* ---------- Page hero ---------- */
.phero{
    position:relative;
    padding:calc(var(--header-h) + 96px) 0 128px;
    overflow:hidden;
}
.phero__bg{position:absolute;inset:0;z-index:0}
.phero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 38%}
.phero__veil{position:absolute;inset:0;background:var(--hero-overlay);transition:background-color .4s var(--ease)}
:root[data-theme="dark"] .phero__bg::after{content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.45) 45%,var(--bg) 100%)}
:root[data-theme="light"] .phero__bg::after{content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(200,201,195,.55) 0%,rgba(200,201,195,.35) 45%,var(--bg) 100%)}

.phero__inner{position:relative;z-index:2}
.crumbs{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted);margin-bottom:26px}
.crumbs a{transition:color .2s}
.crumbs a:hover{color:var(--red)}
.crumbs [aria-current]{color:var(--text-strong);font-weight:600}

.phero__title{
    font-size:clamp(44px,7.2vw,104px);font-weight:600;line-height:1;
    letter-spacing:-2px;color:var(--text-strong);
}

/* ---------- Intro ---------- */
.intro{padding:110px 0 0;position:relative}
/* Red glow, same treatment as .about on the homepage. Two blooms — one upper-right,
   one lower-left — using var(--glow) so each theme gets its own intensity. */
.intro::after{content:"";position:absolute;right:-6%;top:-4%;width:52%;height:108%;
    background:radial-gradient(closest-side,var(--glow),transparent 70%);pointer-events:none;z-index:0}
.intro::before{content:"";position:absolute;left:-10%;top:34%;width:48%;height:98%;
    background:radial-gradient(closest-side,var(--glow),transparent 72%);pointer-events:none;z-index:0}
.intro__inner{position:relative;z-index:1;display:grid;grid-template-columns:minmax(280px,38%) 1fr;gap:64px;align-items:start}
.intro__head .eyebrow-box{margin-bottom:10px}
.intro__head .section-title{max-width:13ch}
.intro__lead{font-size:clamp(19px,1.7vw,24px);line-height:1.5;color:var(--text-strong);font-weight:600}
.intro__text{margin-top:22px;color:var(--muted);max-width:640px}
.intro__btn{margin-top:34px}

/* ---------- Mission — cinematic expanding frame ---------- */
/* Defaults are the *end* state (photo full bleed, content visible): the closed
   frame is only ever applied by GSAP, so no-JS and reduced-motion stay readable. */
.mission{position:relative;margin-top:104px}
.mission__stage{position:relative;display:flex;align-items:center;
    padding:96px 0;overflow:hidden}
.mission__frame{position:absolute;inset:0;margin:0;overflow:hidden;will-change:clip-path}
.mission__frame img{width:100%;height:100%;object-fit:cover}
.mission__scrim{position:absolute;inset:0;background:var(--mission-scrim);
    transition:background .4s var(--ease)}

.mission__inner{position:relative;z-index:2;
    display:grid;grid-template-columns:380px 1fr;column-gap:56px;row-gap:52px;align-items:start}
.mission__title{font-size:54px;font-weight:600;line-height:1.05;color:var(--text-strong)}
.mission__title .hl{background:var(--red);color:#fff;padding:0 14px;display:inline-block;margin-top:6px}
.mission__note{border-left:2px solid var(--red);padding-left:26px;color:var(--text);font-weight:600;font-size:17px;line-height:1.55}
.mission__grid{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:28px}

/* Sticky 100vh stage only where there is room for it; below that the section is
   a normal block with the photo as a static backdrop. */
@media (min-width:961px){
    .mission{height:250vh}
    .mission__stage{position:sticky;top:0;height:100vh;padding:0}
}

.mcard{
    position:relative;padding:38px 34px 40px;
    /* Slightly translucent over the photo, but opaque enough to keep body-text contrast */
    background:var(--mcard-bg);
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
    border:1px solid var(--card-border);
    clip-path:polygon(0 0,calc(100% - 26px) 0,100% 26px,100% 100%,26px 100%,0 calc(100% - 26px));
    transition:transform .35s var(--ease),border-color .35s var(--ease);
}
.mcard::before{content:"";position:absolute;left:0;top:0;width:4px;height:100%;background:var(--red);
    transform:scaleY(0);transform-origin:top;transition:transform .45s var(--ease)}
.mcard:hover{transform:translateY(-6px)}
.mcard:hover::before{transform:scaleY(1)}
.mcard__num{display:block;font-size:14px;font-weight:700;letter-spacing:3px;color:var(--red)}
.mcard__title{margin-top:16px;font-size:26px;font-weight:600;color:var(--text-strong)}
.mcard__text{margin-top:14px;color:var(--muted);font-size:16px;line-height:1.6}

/* ---------- Statement ---------- */
.statement{padding:110px 0 0}
.statement__inner{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.statement__media{aspect-ratio:3/2;border-radius:6px}
.statement__big{font-size:clamp(21px,2.1vw,30px);line-height:1.35;font-weight:600;color:var(--text-strong)}
.statement__text{margin-top:24px;color:var(--muted);max-width:560px}
.statement__content .btn{margin-top:34px}

/* ---------- Timeline ---------- */
.tl{padding:120px 0 0}
.tl__head{text-align:center;margin-bottom:64px}
.tl__lead{max-width:780px;margin:20px auto 0;color:var(--muted)}
.tl__list{position:relative;padding:6px 0;list-style:none}
.tl__rail{position:absolute;left:50%;top:0;bottom:0;width:2px;transform:translateX(-50%);
    background:var(--divider);overflow:hidden}
.tl__rail i{display:block;width:100%;height:100%;background:var(--red);
    transform:scaleY(0);transform-origin:top}

/* Two equal columns straddling the rail (gap = 2 x 64px clearance). The item is
   a grid, not an absolutely-positioned card, so a tall illustration grows the
   row instead of overlapping the next entry. */
.tl__item{position:relative;display:grid;grid-template-columns:1fr 1fr;
    column-gap:128px;align-items:start;margin-bottom:56px}
.tl__card{grid-column:1;grid-row:1}
.tl__media{grid-column:2;grid-row:1}
.tl__item:nth-of-type(even) .tl__card{grid-column:2}
.tl__item:nth-of-type(even) .tl__media{grid-column:1}
.tl__item:last-child{margin-bottom:0}

.tl__marker{position:absolute;top:34px;left:calc(50% - 11px);width:22px;height:22px;
    display:grid;place-items:center;
    border-radius:50%;background:var(--bg);border:2px solid var(--red);transition:background-color .4s var(--ease)}
.tl__marker span{width:8px;height:8px;border-radius:50%;background:var(--red)}

.tl__card{
    position:relative;padding:32px 34px 34px;
    background:var(--card);border:1px solid var(--card-border);
    clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px));
}
/* The heading itself is the red chip that used to hold the year */
.tl__title{display:inline-block;background:var(--red);color:#fff;
    font-size:16px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
    line-height:1.3;padding:6px 14px}
.tl__text{margin-top:16px;color:var(--muted);font-size:16px;line-height:1.62}

/* Optional illustration, sitting in the half opposite the card */
.tl__media{margin:0;overflow:hidden;aspect-ratio:3/2;
    clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px))}
.tl__media img{width:100%;height:100%;object-fit:cover}

/* ---------- Geography / world map ---------- */
.geo{padding:120px 0 0}
.geo__head{text-align:center;margin-bottom:44px}
.geo__lead{max-width:780px;margin:20px auto 0;color:var(--muted)}

/* Aspect matches the generated dot grid (170x108) so nothing is stretched */
.worldmap{
    position:relative;width:100%;aspect-ratio:170/108;font-family:inherit;
    /* Same top/bottom fade as the reference component */
    -webkit-mask-image:linear-gradient(to bottom,transparent,#000 8%,#000 92%,transparent);
            mask-image:linear-gradient(to bottom,transparent,#000 8%,#000 92%,transparent);
}
.worldmap__dots,.worldmap__routes{
    position:absolute;inset:0;width:100%;height:100%;
    pointer-events:none;user-select:none;-webkit-user-select:none;
}
.worldmap__routes{overflow:visible}
/* SVG paint set from CSS (not presentation attributes) so the theme toggle applies */
.worldmap__dots path{stroke:var(--map-dot);transition:stroke .4s var(--ease)}
.worldmap__routes .grad-fade{stop-color:var(--map-fade)}
.worldmap__routes .route{fill:none;stroke:url(#path-gradient);stroke-width:.2125}
.worldmap__routes .node{fill:#ED2531}

.geo__chips{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:0 0 44px}
.geo__chip{
    font-size:14px;font-weight:600;color:var(--muted);
    border:1px solid var(--card-border);padding:8px 18px;
    clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
    background:var(--card);
}
.geo__chip--home{background:var(--red);border-color:var(--red);color:#fff}

/* ---------- Certificates ---------- */
.certs{padding:120px 0 0;position:relative}
/* Red glow, same two-bloom treatment as .intro (upper-right + lower-left) */
.certs::after{content:"";position:absolute;right:-6%;top:-18%;width:52%;height:108%;
    background:radial-gradient(closest-side,var(--glow),transparent 70%);pointer-events:none;z-index:0}
.certs::before{content:"";position:absolute;left:-10%;top:34%;width:48%;height:98%;
    background:radial-gradient(closest-side,var(--glow),transparent 72%);pointer-events:none;z-index:0}
.certs > .container{position:relative;z-index:1}
.certs__head{text-align:center;margin-bottom:24px}
.certs__lead{max-width:780px;margin:20px auto 0;color:var(--muted)}

/* Slider — peek layout so the tall portrait scans read as a scrollable set */
.certslider{display:flex;align-items:center;gap:20px}
/* Symmetric vertical padding gives the hover-lift + shadow room inside the
   overflow-hidden box, so a raised card is never clipped at the top. */
.certslider__viewport{flex:1;overflow:hidden;padding:26px 0}
.certslider__track{display:flex;gap:28px;will-change:transform;
    transition:transform .6s var(--ease)}
.certslider__arrow{flex:0 0 auto;width:44px;height:44px;display:grid;place-items:center;
    transition:transform .2s var(--ease),opacity .2s var(--ease)}
.certslider__arrow .arrow-ico{width:30px;height:24px;display:block}
.certslider__arrow--prev .arrow-ico{transform:scaleX(-1)}
.certslider__arrow:hover{transform:scale(1.15)}
.certslider__arrow:disabled{opacity:.3;cursor:default;transform:none}

.cert{flex:0 0 auto;width:calc((100% - 56px) / 3)}   /* set by JS per breakpoint too */
.cert__btn{position:relative;display:block;width:100%;padding:0;cursor:zoom-in;
    background:var(--card);border:1px solid var(--card-border);
    transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)}
.cert__btn img{width:100%;height:auto;aspect-ratio:2464/3424;object-fit:cover;object-position:top}
.cert__btn:hover{transform:translateY(-6px);
    box-shadow:0 10px 20px rgba(229,32,48,.20)}
.cert__zoom{position:absolute;right:14px;bottom:14px;width:42px;height:46px;
    display:grid;place-items:center;color:#fff;background:var(--red);
    clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
    opacity:0;transform:scale(.8);transition:opacity .25s var(--ease),transform .25s var(--ease)}
.cert__btn:hover .cert__zoom,.cert__btn:focus-visible .cert__zoom{opacity:1;transform:scale(1)}

.certslider__dots{display:flex;justify-content:center;gap:12px;margin-top:4px}
.certslider__dots button{width:26px;height:4px;border-radius:2px;background:var(--divider);transition:background .3s}
.certslider__dots button.is-active{background:var(--red)}

/* ---------- Lightbox ---------- */
.lightbox{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
    opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s}
.lightbox.is-open{opacity:1;visibility:visible}
.lightbox__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.86);
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
/* Default: the whole scan is visible — image fits within the viewport box */
.lightbox__stage{position:relative;z-index:1;
    max-width:min(92vw,760px);max-height:90vh;
    display:flex;align-items:center;justify-content:center;border-radius:2px}
.lightbox__img{display:block;width:auto;height:auto;
    max-width:100%;max-height:90vh;object-fit:contain;cursor:zoom-in;
    box-shadow:0 30px 80px rgba(0,0,0,.6)}
/* Zoomed: the stage becomes the scroll viewport, the image goes to natural size */
.lightbox__stage.is-zoomed{overflow:auto;-webkit-overflow-scrolling:touch;
    align-items:flex-start;justify-content:flex-start;cursor:grab}
.lightbox__stage.is-zoomed.is-grabbing{cursor:grabbing}
.lightbox__stage.is-zoomed .lightbox__img{max-width:none;max-height:none;width:auto;height:auto;cursor:inherit}

.lightbox__close{position:absolute;top:22px;right:26px;z-index:3;width:46px;height:46px;
    display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.12);border-radius:50%;
    transition:background .2s var(--ease)}
.lightbox__close:hover{background:var(--red)}
.lightbox__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
    width:52px;height:52px;display:grid;place-items:center;color:#fff;
    background:rgba(255,255,255,.12);border-radius:50%;transition:background .2s var(--ease)}
.lightbox__nav:hover{background:var(--red)}
.lightbox__nav--prev{left:24px}
.lightbox__nav--next{right:24px}
.lightbox__hint{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);z-index:3;
    color:rgba(255,255,255,.7);font-size:14px;text-align:center;pointer-events:none;
    transition:opacity .25s var(--ease)}
.lightbox__stage.is-zoomed ~ .lightbox__hint{opacity:0}

.about-page .cta{padding-top:110px}

/* ---------- Responsive ---------- */
@media (max-width:1200px){
    .intro__inner{grid-template-columns:minmax(260px,34%) 1fr;gap:44px}
    .mission__inner{grid-template-columns:320px 1fr;column-gap:40px}
    .statement__inner{gap:48px}
}
@media (max-width:960px){
    .phero{padding:calc(var(--header-h) + 56px) 0 72px}

    .intro{padding-top:76px}
    .intro__inner{grid-template-columns:1fr;gap:26px}
    .intro__head .section-title{max-width:none}
    .wide-media{margin-top:52px;aspect-ratio:16/9}

    .mission{margin-top:76px}
    .mission__stage{padding:72px 0}
    .mission__inner{grid-template-columns:1fr;row-gap:28px}
    .mission__title{font-size:42px}
    .mission__grid{grid-template-columns:1fr;gap:20px}

    .statement{padding-top:76px}
    .statement__inner{grid-template-columns:1fr;gap:32px}
    .statement__media{aspect-ratio:3/2;max-width:560px}

    /* Timeline collapses to a single left rail */
    .tl{padding-top:80px}
    .tl__head{margin-bottom:44px}
    .tl__rail{left:11px;transform:none}
    .tl__item,.tl__item:nth-of-type(even){display:block;padding-left:46px}
    .tl__marker{left:0;top:28px}
    .tl__card{padding:26px 24px 28px}
    .tl__title{font-size:14px}
    .tl__media{margin-top:18px}

    .geo{padding-top:80px}
    .certs{padding-top:80px}
    .certslider{gap:10px}
    .lightbox__nav{width:44px;height:44px}
    .lightbox__nav--prev{left:10px}
    .lightbox__nav--next{right:10px}
}
@media (max-width:600px){
    /* The 44px floor of the base clamp left the longest single words wider than
       the screen ("конфіденційності" needed 374px inside 284px at 320px), so the
       hero clipped them. Scale with the viewport down to 32px instead — 44px is
       still reached by ~440px, and the value meets the base curve at 600px. */
    .phero__title{font-size:clamp(32px,10vw,44px);letter-spacing:-1px}
    .mission__title{font-size:34px}
    .mcard{padding:30px 24px 32px}
    .geo__chip{font-size:13px;padding:7px 14px}
    /* Arrows would crowd the single visible card — dots + swipe carry navigation */
    .certslider__arrow{display:none}
    .lightbox__stage{max-width:94vw}
}

/* ============================================================
   PRODUCTS PAGE — «Для металургійної галузі»
   Metallurgy product catalogue: chamfered card grid with image
   wipe-reveals and a red accent bar. Reuses the about-page motion
   primitives (data-reveal / data-anim / data-split) so index.html
   and about.html stay untouched.
   ============================================================ */
.mprod{padding:110px 0 0;position:relative}
/* Same two-bloom red glow used on .intro / .certs so the section reads
   as part of the same visual family in both themes. */
.mprod::after{content:"";position:absolute;right:-6%;top:-2%;width:50%;height:64%;
    background:radial-gradient(closest-side,var(--glow),transparent 70%);pointer-events:none;z-index:0}
.mprod::before{content:"";position:absolute;left:-10%;top:42%;width:46%;height:72%;
    background:radial-gradient(closest-side,var(--glow),transparent 72%);pointer-events:none;z-index:0}
.mprod__inner{position:relative;z-index:1}
.mprod__head{margin-bottom:56px;max-width:760px}
.mprod__head .eyebrow-box{margin-bottom:10px}

/* minmax(0,1fr): without the 0 floor the track's implicit min-content is the
   product photo's intrinsic width, which blows the column out past the viewport
   on narrow screens and clips the card text. */
.mprod__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px}

/* Card is a full article: media on top, title + spec text below.
   drop-shadow-free chamfer via clip-path, matching .tl__card / .pcat. */
.mprod__card{
    position:relative;display:flex;flex-direction:column;min-width:0;
    background:var(--card);border:1px solid var(--card-border);
    clip-path:polygon(0 0,calc(100% - 26px) 0,100% 26px,100% 100%,26px 100%,0 calc(100% - 26px));
    transition:transform .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease);
}
.mprod__card::before{content:"";position:absolute;left:0;top:0;width:4px;height:100%;
    background:var(--red);transform:scaleY(0);transform-origin:top;
    transition:transform .45s var(--ease);z-index:3}
.mprod__card:hover{transform:translateY(-6px);box-shadow:0 18px 42px var(--pcat-shadow)}
.mprod__card:hover::before{transform:scaleY(1)}

.mprod__media{position:relative;overflow:hidden;aspect-ratio:16/11;margin:0}
.mprod__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.mprod__card:hover .mprod__media img{transform:scale(1.05)}

.mprod__body{display:flex;flex-direction:column;gap:14px;padding:30px 30px 34px;flex:1;min-width:0}
.mprod__title{font-size:22px;font-weight:600;line-height:1.28;color:var(--text-strong);overflow-wrap:break-word}
.mprod__text{color:var(--muted);font-size:15px;line-height:1.62;overflow-wrap:break-word}

/* Submenu item that points at the current page */
.submenu__link.is-current{color:var(--red);background:rgba(229,32,48,.10)}

@media (max-width:1100px){
    .mprod__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
}
@media (max-width:960px){
    .mprod{padding:72px 0 0}
    .mprod__head{margin-bottom:40px}
}
@media (max-width:600px){
    .mprod__grid{grid-template-columns:minmax(0,1fr);gap:22px}
    .mprod__body{padding:26px 24px 30px}
    .mprod__title{font-size:20px}
}

/* ============================================================
   PARTNERS PAGE — «Партнери»
   Editorial row list: company name + description on the left,
   the logo sits faded on the right and lights up on row hover.
   Reuses the about-page motion primitives (data-anim / data-split).
   ============================================================ */
.plist{padding:110px 0 0;position:relative}
.plist::after{content:"";position:absolute;right:-6%;top:-2%;width:50%;height:60%;
    background:radial-gradient(closest-side,var(--glow),transparent 70%);pointer-events:none;z-index:0}
.plist::before{content:"";position:absolute;left:-10%;top:44%;width:46%;height:70%;
    background:radial-gradient(closest-side,var(--glow),transparent 72%);pointer-events:none;z-index:0}
.plist__inner{position:relative;z-index:1}
.plist__head{margin-bottom:40px;max-width:760px}
.plist__head .eyebrow-box{margin-bottom:10px}
.plist__head .section-title{color:#ED2531}
.plist__lead{margin-top:18px;color:var(--muted);font-size:clamp(16px,1.5vw,18px);line-height:1.6;max-width:640px}

.plist__grid{display:flex;flex-direction:column}

/* One partner = one row straddled by hairline dividers */
.partner{
    position:relative;
    display:grid;grid-template-columns:minmax(0,1fr) clamp(190px,22vw,300px);
    gap:48px;align-items:center;
    padding:44px 34px;
    border-top:1px solid var(--divider);
    transition:background-color .35s var(--ease);
}
.partner:last-child{border-bottom:1px solid var(--divider)}
/* Left-to-right glow wash on hover */
.partner::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
    background:linear-gradient(90deg,var(--card-glow),transparent 62%);
    opacity:0;transition:opacity .4s var(--ease)}
.partner:hover::after{opacity:1}
/* Red accent bar grows from the top edge on hover */
.partner::before{content:"";position:absolute;left:0;top:0;height:100%;width:3px;
    background:var(--red);transform:scaleY(0);transform-origin:top;
    transition:transform .4s var(--ease);z-index:1}
.partner:hover::before{transform:scaleY(1)}

/* grid-row:1 on both keeps them on one track — the logo is first in the DOM
   with grid-column:2, so sparse auto-placement would otherwise push the body
   down into a second implicit row and break vertical centring. */
.partner__body{position:relative;z-index:1;grid-column:1;grid-row:1;
    display:flex;flex-direction:column;gap:14px;min-width:0}
.partner__name{font-size:clamp(21px,2vw,28px);font-weight:600;line-height:1.24;
    color:var(--text-strong);transition:color .3s var(--ease);overflow-wrap:break-word}
.partner:hover .partner__name{color:var(--red)}
.partner__text{color:var(--muted);font-size:15px;line-height:1.62;max-width:64ch;overflow-wrap:break-word}

/* Logo: faded by default, lights up when its row is hovered */
.partner__logo{position:relative;z-index:1;grid-column:2;grid-row:1;margin:0;
    display:flex;align-items:center;justify-content:flex-end}
.partner__logo img{max-height:58px;width:auto;object-fit:contain;
    filter:grayscale(1) brightness(1.8);opacity:.2;
    transition:opacity .4s var(--ease),filter .4s var(--ease)}
:root[data-theme="light"] .partner__logo img{filter:grayscale(1) brightness(.55);opacity:.26}
.partner:hover .partner__logo img{filter:grayscale(1) brightness(1.95);opacity:1}
:root[data-theme="light"] .partner:hover .partner__logo img{filter:grayscale(1) brightness(.5);opacity:1}

/* ---------- Holding rows: a group header + a collapsible plant list ----------
   Only partners that own several plants get `.partner--group`; single-plant
   partners keep the plain row above untouched. The panel spans both columns on
   an implicit second row, so the header keeps its 1fr / logo split. */
/* row-gap would still reserve 48px under a collapsed (height:0) panel, so the
   group row would sit taller than its neighbours; the panel spaces itself. */
.partner--group{column-gap:48px;row-gap:0}
.partner--group .partner__body{gap:16px}
/* Expanded, the row is tall enough that the hover wash reads as a heavy block —
   drop it and keep the accent bar pinned instead, so the bar marks the group. */
.partner--group.is-open:hover::after{opacity:0}
.partner--group.is-open::before{transform:scaleY(1)}

.partner__toggle{
    align-self:flex-start;display:inline-flex;align-items:center;gap:10px;
    min-height:44px;padding:8px 4px 8px 0;margin-top:-2px;
    background:none;border:0;cursor:pointer;
    font:inherit;font-size:14px;letter-spacing:.04em;text-transform:uppercase;
    color:var(--text-strong);transition:color .3s var(--ease)}
.partner__toggle:hover{color:var(--red)}
.partner__toggle:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.partner__toggle-count{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:22px;height:22px;padding:0 6px;border-radius:11px;
    background:var(--red);color:#fff;font-size:12px;letter-spacing:0;font-weight:600}
.partner__caret{transition:transform .35s var(--ease);flex:none}
.partner--group.is-open .partner__caret{transform:rotate(180deg)}

/* Height is driven from JS (scrollHeight → px → auto) so the panel can animate
   open without hard-coding a max-height that would clip longer descriptions. */
.partner__sub{grid-column:1/-1;grid-row:2;overflow:hidden;height:0;
    transition:height .42s var(--ease)}
.partner__sub[inert]{visibility:hidden}

.psub{list-style:none;margin:18px 0 0;padding:0 0 6px;
    border-left:1px solid var(--divider)}
.psub__item{position:relative;
    display:grid;grid-template-columns:minmax(0,1fr) clamp(150px,16vw,240px);
    gap:32px;align-items:center;padding:22px 0 22px 34px;
    transition:background-color .3s var(--ease)}
.psub__item + .psub__item{border-top:1px solid var(--divider)}
/* Short tick joining each plant to the group's vertical rule */
.psub__item::before{content:"";position:absolute;left:0;top:50%;width:18px;height:1px;
    background:var(--divider);transition:background-color .3s var(--ease),width .3s var(--ease)}
.psub__item:hover::before{background:var(--red);width:26px}

.psub__body{min-width:0;display:flex;flex-direction:column;gap:8px}
.psub__name{font-size:clamp(17px,1.35vw,20px);font-weight:600;line-height:1.3;
    color:var(--text-strong);transition:color .3s var(--ease);overflow-wrap:break-word}
.psub__item:hover .psub__name{color:var(--red)}
.psub__text{color:var(--muted);font-size:14px;line-height:1.6;max-width:62ch;overflow-wrap:break-word}

.psub__logo{margin:0;display:flex;align-items:center;justify-content:flex-end}
.psub__logo img{max-height:42px;width:auto;object-fit:contain;
    filter:grayscale(1) brightness(1.8);opacity:.16;
    transition:opacity .4s var(--ease),filter .4s var(--ease); margin: 0 auto;}
:root[data-theme="light"] .psub__logo img{filter:grayscale(1) brightness(.55);opacity:.2}
.psub__item:hover .psub__logo img{filter:grayscale(1) brightness(1.95);opacity:1}
:root[data-theme="light"] .psub__item:hover .psub__logo img{filter:grayscale(1) brightness(.5);opacity:1}

@media (prefers-reduced-motion:reduce){
    .partner__sub{transition:none}
    .partner__caret{transition:none}
}

@media (max-width:960px){
    .plist{padding:72px 0 0}
    .plist__head{margin-bottom:32px}
}
/* No hover on touch: stack the row and keep the logo visible on top */
@media (max-width:900px){
    .partner{grid-template-columns:1fr;gap:20px;padding:32px 24px 36px}
    .partner__body,.partner__logo{grid-column:1;grid-row:auto}
    .partner__logo{order:-1;justify-content:flex-start}
    .partner__logo img{max-height:44px;opacity:.9;filter:grayscale(1) brightness(1.8)}
    :root[data-theme="light"] .partner__logo img{opacity:.85;filter:grayscale(1) brightness(.5)}
    .partner::before{transform:scaleY(1)}

    /* The parent switches to a single column, so the panel must follow it into
       the auto-placed flow instead of staying pinned to row 2 / column span.
       row-gap is 0 on groups, so the logo carries the logo↔body spacing here. */
    .partner__sub{grid-column:1;grid-row:auto}
    .partner--group .partner__logo{margin-bottom:20px}
    .psub__item{grid-template-columns:1fr;gap:14px;padding:20px 0 22px 22px}
    .psub__item::before{top:14px}
    .psub__logo{order:-1;justify-content:flex-start}
    .psub__logo img{max-height:34px;opacity:.85;filter:grayscale(1) brightness(1.8)}
    :root[data-theme="light"] .psub__logo img{opacity:.8;filter:grayscale(1) brightness(.5)}
}

/* ============================================================
   CAREER PAGE — «Кар'єра»
   Two-column layout: a sticky application form on the left (in
   place of a filter menu) + the vacancy list on the right.
   The sticky form scrolls with the page and releases at the end
   of the last vacancy because it sticks inside the grid cell,
   whose height matches the taller vacancy column.
   ============================================================ */
.career{padding:50px 0 0;position:relative}
.career::after{content:"";position:absolute;right:-6%;top:-2%;width:46%;height:56%;
    background:radial-gradient(closest-side,var(--glow),transparent 70%);pointer-events:none;z-index:0}
.career__inner{position:relative;z-index:1}
.career__head{margin-bottom:48px;max-width:820px}
.career__head .section-title{margin-top:2px}
.career__lead{margin-top:18px;color:var(--muted);font-size:clamp(16px,1.5vw,18px);line-height:1.6;max-width:660px}

.career__grid{display:grid;grid-template-columns:380px minmax(0,1fr);gap:56px;align-items:start}
/* The form column sticks; it stops naturally at the grid's bottom = last vacancy */
.career__aside{position:sticky;top:calc(var(--header-h) + 24px);align-self:start}

/* ---------- Vacancy list ---------- */
.career__list{display:flex;flex-direction:column;gap:18px;min-width:0}
.vac{position:relative;min-width:0}
.vac__link{
    position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;
    padding:28px 32px;background:var(--card);border:1px solid var(--card-border);
    clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,20px 100%,0 calc(100% - 20px));
    transition:transform .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease);
}
.vac__link::before{content:"";position:absolute;left:0;top:0;height:100%;width:4px;
    background:var(--red);transform:scaleY(0);transform-origin:top;
    transition:transform .4s var(--ease)}
.vac__link:hover{transform:translateY(-4px);box-shadow:0 16px 34px var(--pcat-shadow)}
.vac__link:hover::before{transform:scaleY(1)}
.vac__main{min-width:0}
.vac__title{font-size:clamp(18px,1.6vw,22px);font-weight:600;line-height:1.25;color:var(--text-strong);
    transition:color .3s var(--ease);overflow-wrap:break-word}
.vac__link:hover .vac__title{color:var(--red)}
.vac__meta{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:12px}
.vac__meta li{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted)}
.vac__meta svg{flex:0 0 auto;color:var(--red)}
/* Hexagon frame (SVG outline, same pattern as .to-top / .social-hex) that
   fills red on hover — replaces the round border. */
.vac__arrow{flex:0 0 auto;position:relative;width:50px;height:54px;display:grid;place-items:center;
    color:var(--red);transition:color .3s var(--ease),transform .3s var(--ease)}
.vac__arrow .hex-outline path{fill:transparent;stroke:var(--card-border);stroke-width:1.4;
    transition:fill .3s var(--ease),stroke .3s var(--ease)}
.vac__arrow-ico{position:relative;z-index:1}
.vac__link:hover .vac__arrow{color:#fff;transform:translateX(3px)}
.vac__link:hover .vac__arrow .hex-outline path{fill:var(--red);stroke:var(--red)}

/* ---------- Application form ---------- */
.apply{position:relative;background:var(--card);border:1px solid var(--card-border);
    clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px));
    padding:34px 30px 36px}
.apply__title{font-size:24px;font-weight:600;line-height:1.2;color:var(--text-strong)}
.apply__note{color:var(--muted);font-size:14px;line-height:1.5;margin:8px 0 24px}

/* Honeypot — visually and semantically removed, but a bot fills it */
.apply__hp{position:absolute!important;left:-9999px!important;top:-9999px!important;
    width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}

.field{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.field > label{font-size:14px;font-weight:600;color:var(--text-strong)}
.field input,.field select{
    height:52px;padding:0 16px;font:inherit;font-size:15px;width:100%;
    background:var(--bg-2);color:var(--text);
    border:1px solid var(--card-border);border-radius:4px;
    transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
.field select{appearance:none;-webkit-appearance:none;cursor:pointer;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%23E52030' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 16px center;padding-right:40px}
.field input::placeholder{color:var(--muted-2)}
.field input:focus,.field select:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px var(--card-glow)}
.field.is-error input,.field.is-error select,.field.is-error .filedrop{border-color:var(--red)}
.field__err{font-size:12.5px;line-height:1.3;color:var(--red);display:none}
.field.is-error .field__err{display:block}

/* File upload — drag/drop, click to browse */
.filedrop{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:6px;padding:22px 16px;text-align:center;cursor:pointer;
    background:var(--bg-2);border:1.5px dashed var(--card-border);border-radius:4px;
    transition:border-color .25s var(--ease),background-color .25s var(--ease)}
.filedrop:hover,.filedrop.is-drag{border-color:var(--red)}
.filedrop input[type="file"]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.filedrop__ico{color:var(--red)}
.filedrop__label{font-size:13.5px;color:var(--muted)}
.filedrop__name{font-size:13px;font-weight:600;color:var(--text-strong);word-break:break-all}

.consent{display:flex;align-items:flex-start;gap:10px;margin:4px 0 22px;
    font-size:13px;line-height:1.45;color:var(--muted);cursor:pointer}
.consent input{margin-top:2px;width:16px;height:16px;flex:0 0 auto;accent-color:var(--red)}
.consent a{color:var(--red);text-decoration:underline}

.apply__submit{width:100%}
.apply__status{margin-top:16px;font-size:14px;line-height:1.45;min-height:1px}
.apply__status.is-ok{color:#3ec97a}
.apply__status.is-bad{color:var(--red)}

@media (max-width:1200px){
    .career__grid{grid-template-columns:340px minmax(0,1fr);gap:40px}
}
@media (max-width:960px){
    .career{padding-top:72px}
    .career__head{margin-bottom:36px}
}
/* Stack on tablet/mobile: vacancies first, form (static) below */
@media (max-width:900px){
    .career__grid{grid-template-columns:1fr;gap:36px}
    .career__aside{position:static;order:2}
    .career__list{order:1}
}
@media (max-width:600px){
    .vac__link{padding:24px 22px;gap:16px}
    .vac__arrow{width:44px;height:48px}
    .apply{padding:28px 22px 30px}
}

/* ============================================================
   MANAGEMENT PAGE — «Наш менеджмент»
   Team grid (team-one style): portrait, name, position. Photos
   are grayscale by default and warm to full colour on hover,
   which also unifies the mixed-quality source shots.
   ============================================================ */
.team{padding:110px 0 0;position:relative}
.team::after{content:"";position:absolute;right:-6%;top:0;width:46%;height:50%;
    background:radial-gradient(closest-side,var(--glow),transparent 70%);pointer-events:none;z-index:0}
.team::before{content:"";position:absolute;left:-10%;top:46%;width:44%;height:60%;
    background:radial-gradient(closest-side,var(--glow),transparent 72%);pointer-events:none;z-index:0}
.team__inner{position:relative;z-index:1}
/* Two-column head like the homepage .products: title on the left, a note with a
   red vertical bar on the right. The left title sticks and only releases at the
   end of the (potentially long) note on the right. */
.team__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    column-gap:56px;row-gap:26px;align-items:start;margin-bottom:56px}
.team__head-left{position:sticky;top:calc(var(--header-h) + 24px);align-self:start}
.team__head .eyebrow-box{margin-bottom:10px}
.team__note{border-left:2px solid var(--red);padding-left:26px;
    color:var(--text);font-weight:600;font-size:clamp(16px,1.3vw,18px);line-height:1.55}

.team__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:38px 30px}
/* Desktop only: narrow the grid so the 3-up stays 3-up but each portrait drops
   to ~70% of its former width. Gated at 1100px — below that the tracks are
   already tight and shrinking them further would leave stamp-sized portraits. */
/* Desktop only: keep the 3-up, but pin each card to 270px — ~63% of the 428px
   it used to stretch to at 1440. Fixed tracks rather than a percentage so the
   card size stays constant from 1100px up and hands off to the fluid tracks
   below the query without a jump (870px of tracks always fits past 1100px). */
@media (min-width:1100px){
    .team__grid{grid-template-columns:repeat(3,270px);justify-content:center}
    /* Narrower cards wrap the longest surnames onto a second line; reserving
       two lines keeps every role on the same baseline across a row. */
    .member__name{min-height:2.6em}
}

.member{position:relative;min-width:0}
.member__media{position:relative;overflow:hidden;margin:0;aspect-ratio:3/4;background:var(--stats-bg);
    clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,20px 100%,0 calc(100% - 20px))}
.member__media img{width:100%;height:100%;object-fit:cover;object-position:center top;
    transition:transform .6s var(--ease)}
.member:hover .member__media img{transform:scale(1.05)}
/* red base line that sweeps in on hover */
.member__media::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:4px;
    background:var(--red);transform:scaleX(0);transform-origin:left;
    transition:transform .45s var(--ease);z-index:2}
.member:hover .member__media::after{transform:scaleX(1)}

.member__name{margin-top:18px;font-size:18px;font-weight:600;line-height:1.3;
    color:var(--text-strong);overflow-wrap:break-word;transition:color .3s var(--ease)}
.member:hover .member__name{color:var(--red)}
.member__role{margin-top:6px;font-size:14px;line-height:1.45;color:var(--muted);overflow-wrap:break-word}

@media (max-width:960px){
    .team{padding-top:72px}
    .team__head{grid-template-columns:1fr;row-gap:22px;margin-bottom:40px}
    .team__head-left{position:static}
}
@media (max-width:820px){
    .team__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px}
}
/* Single column only on the very narrowest screens (down to 300px) */
@media (max-width:340px){
    .team__grid{grid-template-columns:1fr;gap:26px}
    .member__media{aspect-ratio:4/5}
}

/* ============================================================
   CONTACTS PAGE — «Контакти»
   Two columns: contact form (left) + info block (right), then a
   full-bleed theme-aware Leaflet map with a red pin + popup card.
   ============================================================ */
.contacts{padding:110px 0 80px;position:relative}
.contacts::after{content:"";position:absolute;right:-6%;top:-2%;width:44%;height:52%;
    background:radial-gradient(closest-side,var(--glow),transparent 70%);pointer-events:none;z-index:0}
.contacts__inner{position:relative;z-index:1}
/* Grid areas: the heading sits alone on the left top row; the form and the
   right column share the second row, so the map top lines up with the form top
   and (via align-items:stretch) the info card bottom lines up with the form bottom. */
.contacts__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);
    column-gap:56px;row-gap:0;align-items:stretch;
    grid-template-areas:"head ." "form side"}

/* ---------- Form column ---------- */
.cform-col__head{grid-area:head;margin-bottom:26px}
.cform-col__title{font-size:clamp(26px,3vw,38px);font-weight:600;line-height:1.1;color:var(--text-strong)}
.cform-col__lead{margin-top:14px;color:var(--muted);font-size:16px;line-height:1.6;max-width:520px}

.cform{grid-area:form;position:relative;background:var(--card);border:1px solid var(--card-border);
    clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px));
    padding:34px 30px 36px}
.cform__row{display:grid;grid-template-columns:1fr 1fr;gap:0 22px}
.cform__hp{position:absolute!important;left:-9999px!important;top:-9999px!important;
    width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}
.cform__submit{width:100%;margin-top:6px}
.cform__status{margin-top:16px;font-size:14px;line-height:1.45;min-height:1px}
.cform__status.is-ok{color:#3ec97a}
.cform__status.is-bad{color:var(--red)}
.consent.is-error{color:var(--red)}
.consent.is-error input{outline:2px solid var(--red);outline-offset:2px}

/* Question textarea */
.field textarea{width:100%;min-height:118px;padding:14px 16px;font:inherit;font-size:15px;resize:vertical;
    background:var(--bg-2);color:var(--text);border:1px solid var(--card-border);border-radius:4px;line-height:1.55;
    transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
.field textarea::placeholder{color:var(--muted-2)}
.field textarea:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px var(--card-glow)}
.field.is-error textarea{border-color:var(--red)}

/* ---------- Info column ---------- */
.cinfo{flex:1;background:var(--card);border:1px solid var(--card-border);
    clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px));
    padding:34px 30px 36px}
.cinfo__title{font-size:22px;font-weight:600;color:var(--text-strong);margin-bottom:24px}
.cinfo__list{display:flex;flex-direction:column;gap:22px}
.cinfo__item{display:flex;gap:16px;align-items:center}
/* Hexagon frame drawn as an SVG outline (a border on a clip-path element gets
   clipped away — this keeps a visible contour). */
.cinfo__ico{position:relative;flex:0 0 auto;width:48px;height:52px;display:grid;place-items:center;color:var(--red)}
.cinfo__ico .hex-outline path{fill:var(--stats-bg);stroke:var(--red);stroke-width:1.3}
.cinfo__ico > svg:not(.hex-outline){position:relative;z-index:1}
.cinfo__val{display:block;font-size:16px;color:var(--text-strong);line-height:1.5}
.cinfo__val + .cinfo__val{margin-top:3px}
a.cinfo__val{transition:color .2s var(--ease)}
a.cinfo__val:hover{color:var(--red)}

/* ---------- Right column: rectangular map above the info card ---------- */
.contacts__right{grid-area:side;height:100%;display:flex;flex-direction:column;gap:32px;min-width:0}
.contacts__map{position:relative;width:100%;height:300px;overflow:hidden;background:var(--bg-2);
    clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px))}
#map{position:absolute;inset:0;z-index:0}
.leaflet-container{background:var(--bg-2);font-family:inherit;font-size:14px}
/* Theme the popup as a site card */
.leaflet-popup-content-wrapper{background:var(--card);color:var(--text);
    border:1px solid var(--card-border);border-radius:8px;box-shadow:0 16px 40px rgba(0,0,0,.35)}
.leaflet-popup-tip{background:var(--card);border-right:1px solid var(--card-border);
    border-bottom:1px solid var(--card-border)}
.leaflet-popup-content{margin:16px 18px;font-size:14px;line-height:1.5}
.leaflet-container a.leaflet-popup-close-button{color:var(--muted);padding:8px 8px 0 0}
.leaflet-container a.leaflet-popup-close-button:hover{color:var(--red)}
.leaflet-control-attribution{background:var(--card)!important;color:var(--muted-2)!important}
.leaflet-control-attribution a{color:var(--muted)!important}
.leaflet-bar a{background:var(--card);color:var(--text);border-color:var(--card-border)}
.leaflet-bar a:hover{background:var(--stats-bg)}
/* Custom red pin marker */
.map-pin{position:relative;width:34px;height:44px;filter:drop-shadow(0 6px 8px rgba(0,0,0,.4))}
.map-pin svg{width:100%;height:100%;display:block}
.map-card{min-width:210px}
.map-card__name{display:block;font-size:15px;font-weight:700;color:var(--text-strong)}
.map-card__addr{display:block;margin-top:6px;color:var(--muted);font-size:13.5px;line-height:1.5}
.map-card__link{display:inline-flex;align-items:center;gap:6px;margin-top:12px;
    color:var(--red);font-weight:600;font-size:13.5px}
.map-card__link:hover{color:var(--red-hi)}

@media (max-width:960px){
    .contacts{padding:72px 0 60px}
    .contacts__grid{grid-template-columns:1fr;grid-template-areas:"head" "form" "side";row-gap:32px}
    .cform-col__head{margin-bottom:0}
    .contacts__right{height:auto}
    .cinfo{flex:initial}
    .contacts__map{height:280px}
}
@media (max-width:600px){
    .cform,.cinfo{padding:28px 22px 30px}
    .cform__row{grid-template-columns:1fr;gap:0}
    .phone-intl{flex-direction:column;gap:8px}
    .phone-intl select{width:100%;min-width:0}
}

/* ============================================================
   404 PAGE — «Сторінка не знайдена»
   Self-contained block: layout + its own responsive rules, so no
   other page is touched. Deliberately free of [data-anim]: that
   primitive starts at opacity:0 and is revealed by GSAP, and an
   error page must never risk rendering blank if JS fails to load.
   ============================================================ */
.nf{position:relative;display:flex;align-items:center;overflow:hidden;
    min-height:100vh;min-height:100svh;
    padding:calc(var(--header-h) + 64px) 0 88px}
/* Red bloom behind the numeral — same treatment as .intro on the about page. */
.nf::before{content:"";position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);
    width:min(760px,130%);aspect-ratio:1;
    background:radial-gradient(closest-side,var(--glow),transparent 70%);
    pointer-events:none;z-index:0}
.nf__inner{position:relative;z-index:1;max-width:720px;margin:0 auto;text-align:center}
.nf__code{font-size:clamp(96px,20vw,220px);font-weight:700;line-height:.9;
    letter-spacing:-.04em;color:var(--text-strong)}
.nf__code span{color:var(--red)}
.nf__title{margin-top:12px;font-size:clamp(26px,4.4vw,44px);font-weight:600;
    line-height:1.15;letter-spacing:-.5px;color:var(--text-strong)}
.nf__text{margin:18px auto 0;max-width:52ch;color:var(--muted);font-size:17px;line-height:1.6}
.nf__actions{display:flex;justify-content:center;flex-wrap:wrap;gap:18px;margin-top:40px}

@media (max-width:960px){
    .nf{padding:calc(var(--header-h) + 56px) 0 72px}
}
@media (max-width:600px){
    /* Height follows the content: a fixed viewport height would strand the
       buttons below the fold on short landscape screens. */
    .nf{min-height:auto;padding:calc(var(--header-h) + 44px) 0 60px}
    .nf__text{font-size:16px}
    .nf__actions{flex-direction:column;gap:14px;margin-top:32px}
    /* height:auto + min-height keeps the 44px touch target even if a long
       uppercase label wraps to two lines on a 300px screen. */
    .nf__actions .btn{width:100%;height:auto;min-height:58px;
        padding:16px 22px;line-height:1.3;text-align:center}
}
@media (max-width:360px){
    .nf__code{font-size:78px;letter-spacing:-.05em}
    .nf__title{font-size:23px}
    .nf__actions .btn{padding:16px 14px;font-size:13px;letter-spacing:.4px}
}

/* ============================================================
   PRIVACY POLICY — «Політика конфіденційності»
   Self-contained block: long-form legal text with a sticky table
   of contents. Reuses the about/career page motion primitives.
   ============================================================ */
.legal{padding:104px 0 120px;position:relative}
.legal::after{content:"";position:absolute;right:-8%;top:-2%;width:44%;height:52%;
    background:radial-gradient(closest-side,var(--glow),transparent 70%);pointer-events:none;z-index:0}
.legal__inner{position:relative;z-index:1;display:grid;
    grid-template-columns:minmax(0,250px) minmax(0,1fr);gap:64px;align-items:start}

/* ---------- Sticky table of contents ---------- */
.legal__aside{position:sticky;top:calc(var(--header-h) + 24px);align-self:start}
.legal__toc-title{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1.4px;
    color:var(--muted-2);margin-bottom:14px}
.legal__toc{border-left:1px solid var(--divider)}
.legal__toc a{display:block;margin-left:-1px;padding:9px 0 9px 16px;
    border-left:2px solid transparent;
    font-size:14px;line-height:1.4;color:var(--muted);
    transition:color .2s var(--ease),border-color .2s var(--ease)}
.legal__toc a:hover{color:var(--text-strong);border-left-color:var(--red)}

/* ---------- Document body ---------- */
.legal__body{min-width:0;max-width:760px}
.legal__meta{font-size:14px;color:var(--muted-2);padding-bottom:20px;
    border-bottom:1px solid var(--divider);margin-bottom:32px}
.legal__lead{font-size:clamp(17px,1.6vw,19px);line-height:1.65;color:var(--text-strong);font-weight:600}
/* scroll-margin keeps a heading clear of the fixed header when JS is off;
   with JS, Lenis applies its own -100px offset in main.js */
.legal__section{scroll-margin-top:calc(var(--header-h) + 24px)}
.legal__section{margin-top:48px}
.legal__h{font-size:clamp(20px,2.1vw,25px);font-weight:600;line-height:1.28;
    letter-spacing:-.3px;color:var(--text-strong);margin-bottom:16px}
.legal__body p{color:var(--muted);line-height:1.7}
.legal__body p + p{margin-top:14px}
.legal__body strong{color:var(--text-strong);font-weight:600}
.legal__link{color:var(--red);border-bottom:1px solid transparent;transition:border-color .2s var(--ease)}
.legal__link:hover{border-bottom-color:var(--red)}

.legal__list{margin-top:16px;display:flex;flex-direction:column;gap:11px}
.legal__list li{position:relative;padding-left:24px;color:var(--muted);line-height:1.7}
/* hexagon bullet — the brand mark used across the site, scaled down */
.legal__list li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:10px;
    background:var(--red);
    clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}

.legal__note{margin-top:20px;padding:20px 22px;background:var(--card);
    border:1px solid var(--card-border);border-radius:6px;color:var(--muted);line-height:1.65}

@media (max-width:1100px){
    .legal__inner{grid-template-columns:minmax(0,210px) minmax(0,1fr);gap:44px}
}
/* Stack below the tablet breakpoint: the TOC becomes a two-column index
   above the text so it costs little vertical space. */
@media (max-width:900px){
    .legal{padding:76px 0 90px}
    .legal__inner{grid-template-columns:1fr;gap:34px}
    .legal__aside{position:static}
    .legal__toc{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
    .legal__body{max-width:none}
}
@media (max-width:600px){
    .legal{padding:60px 0 72px}
    .legal__section{margin-top:38px}
    .legal__note{padding:18px}
}
@media (max-width:480px){
    .legal__toc{grid-template-columns:1fr}
}
@media (max-width:360px){
    .legal__body p,.legal__list li{font-size:15px}
    .legal__list li{padding-left:20px}
    .legal__note{padding:16px 14px}
}

/* ============================================================
   SINGLE VACANCY — окрема сторінка вакансії
   Three grid children (description / facts card / application form)
   instead of one <aside> wrapper: that way the facts card can jump
   above the description on mobile while the form stays last.
   Form controls reuse the .apply/.field/.filedrop styles from the
   career page — nothing is redefined here.
   ============================================================ */
.vsingle{padding:104px 0 120px;position:relative}
.vsingle::after{content:"";position:absolute;right:-8%;top:-2%;width:44%;height:54%;
    background:radial-gradient(closest-side,var(--glow),transparent 70%);pointer-events:none;z-index:0}
/* grid-template-rows: перший рядок стискається рівно під картку умов.
   Без цього надлишок висоти довгого опису (він розтягнутий на два рядки)
   розподілявся б порівну між рядками і відштовхував форму вниз —
   row-gap там ні до чого. */
.vsingle__inner{position:relative;z-index:1;display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,372px);
    grid-template-rows:min-content auto;
    gap:40px 56px;align-items:start}

/* ---------- Description column ---------- */
.vsingle__main{grid-column:1;grid-row:1 / span 2;min-width:0;max-width:760px}
.vsingle__lead{font-size:clamp(17px,1.6vw,19px);line-height:1.65;color:var(--text-strong);font-weight:600}
.vsingle__main p{color:var(--muted);line-height:1.7}
.vsingle__main p + p{margin-top:14px}
.vblock{margin-top:40px;scroll-margin-top:calc(var(--header-h) + 24px)}
.vblock__h{font-size:clamp(19px,2vw,23px);font-weight:600;line-height:1.3;
    letter-spacing:-.3px;color:var(--text-strong);margin-bottom:14px}
.vlist{margin-top:14px;display:flex;flex-direction:column;gap:11px}
.vlist li{position:relative;padding-left:24px;color:var(--muted);line-height:1.7}
/* hexagon bullet — the brand mark, scaled down */
.vlist li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:10px;
    background:var(--red);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.vsingle__main strong{color:var(--text-strong);font-weight:600}

/* ---------- Facts card (location / employment / salary) ---------- */
/* Зрізані кути — та сама фаска 22px, що в .apply, щоб картка й форма
   читались як одна пара. */
.vfacts{grid-column:2;grid-row:1;
    background:var(--card);border:1px solid var(--card-border);
    clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px));
    padding:26px 26px 24px}
.vfacts__title{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1.4px;
    color:var(--muted-2);margin-bottom:20px}
.vfacts__list{display:flex;flex-direction:column;gap:20px}
.vfact{display:flex;gap:15px;align-items:center}
/* same hexagon frame as the contacts page: a border on clip-path would be
   clipped away, so the outline is its own SVG behind the glyph */
.vfact__ico{position:relative;flex:0 0 auto;width:46px;height:50px;
    display:grid;place-items:center;color:var(--red)}
.vfact__ico .hex-outline path{fill:var(--stats-bg);stroke:var(--red);stroke-width:1.3}
.vfact__ico > svg:not(.hex-outline){position:relative;z-index:1}
.vfact__label{display:block;font-size:12.5px;letter-spacing:.4px;color:var(--muted-2);
    text-transform:uppercase;font-weight:600}
.vfact__val{display:block;margin-top:3px;font-size:16px;font-weight:600;
    color:var(--text-strong);line-height:1.4}

/* ---------- Application form ---------- */
.vapply{grid-column:2;grid-row:2}

@media (max-width:1100px){
    .vsingle__inner{grid-template-columns:minmax(0,1fr) minmax(0,330px);gap:40px}
}
/* Stack: facts first (the numbers a candidate scans for), then the
   description, then the form. Explicit grid-row reset is required —
   `order` alone cannot move an item out of a placed row. */
@media (max-width:960px){
    .vsingle{padding:76px 0 90px}
    /* grid-template-rows скидаємо: у стеку рядків три, і min-content
       на першому підтискав би картку умов. */
    .vsingle__inner{grid-template-columns:1fr;grid-template-rows:none;gap:30px}
    .vsingle__main{grid-column:1;grid-row:auto;order:2;max-width:none}
    .vfacts{grid-column:1;grid-row:auto;order:1}
    .vapply{grid-column:1;grid-row:auto;order:3}
}
@media (max-width:600px){
    .vsingle{padding:56px 0 72px}
    .vblock{margin-top:32px}
    .vfacts{padding:22px 20px 20px}
}
@media (max-width:360px){
    .vsingle__main p,.vlist li{font-size:15px}
    .vlist li{padding-left:20px}
    .vfacts{padding:18px 14px 16px}
    .vfact{gap:12px}
    .vfact__ico{width:40px;height:44px}
    .vfact__val{font-size:15px}
    /* the card already has its own padding — trim the form's so the inputs
       keep a usable width at 300px */
    .vapply{padding:20px 16px 22px}
}



/* ============================================================
   MOBILE NAV — CLOSE BUTTON (хрестик у шестикутнику)
   Додано окремим блоком у кінці файлу, щоб не чіпати наявні правила.
   Використовує той самий патерн, що .to-top і .social-hex (.hex-outline).
   ============================================================ */
.nav-close{display:none}

@media (max-width:960px){
    /* position:fixed рахується від .header__nav, бо в панелі є transform —
       тому хрестик не з'їжджає, якщо вміст меню доводиться прокручувати. */
    .nav-close{
        display:grid;place-items:center;
        position:fixed;top:18px;right:24px;z-index:2;
        width:44px;height:48px;
        color:var(--red);
        transition:color .25s var(--ease)}
    .nav-close__ico{position:relative;z-index:1}
    .nav-close .hex-outline path{fill:transparent;stroke:currentColor;stroke-width:1.4}
    .nav-close:hover,
    .nav-close:focus-visible{color:#fff}
    .nav-close:hover .hex-outline path,
    .nav-close:focus-visible .hex-outline path{fill:var(--red);stroke:var(--red)}
    :root[data-theme="light"] .nav-close{color:#5A5553}
    :root[data-theme="light"] .nav-close:hover,
    :root[data-theme="light"] .nav-close:focus-visible{color:#fff}
}



.apply .wpcf7-file {
	width: 100%;
	padding: 12px;
	/* border: 1px dashed rgba(255,255,255,.3); */
    border: 1px dashed var(--red);
	border-radius: 8px;
	background: rgba(255,255,255,.03);
	color: inherit;
	cursor: pointer;
}

.filedrop input[type="file"] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}
.filedrop {
	position: relative;
	cursor: pointer;
}