@font-face {
    font-family: 'SKF Sans';
    src: url('./fonts/SKFSans-Regular.woff2') format('woff2'),
        url('./fonts/SKFSans-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SKFDisplayBold';
    src: url('./fonts/SKFDisplayBold.eot');
    src: url('./fonts/SKFDisplayBold.eot') format('embedded-opentype'),
         url('./fonts/SKFDisplayBold.woff2') format('woff2'),
         url('./fonts/SKFDisplayBold.woff') format('woff'),
         url('./fonts/SKFDisplayBold.ttf') format('truetype'),
         url('./fonts/SKFDisplayBold.svg#SKFDisplayBold') format('svg');
}

/* ============================================================
   SKF TEXTILE — Industrial Precision Editorial
   ============================================================ */
:root {
  --ink:#0A0C11; --ink-2:#0E1219; --surface:#141922; --surface-2:#1A212C;
  --bone:#ECE7DE; --bone-dim:rgb(255 255 255); --bone-faint:rgb(255 255 255);
  --line:rgba(236,231,222,0.12); --line-soft:rgba(236,231,222,0.07);
  --blue:#0000fe; --blue-bright:#5B93FF; --amber:#fff;
  --spot:#F5F2EC; --spot-2:#E3DED3;
  --ease:cubic-bezier(0.22,1,0.36,1); --maxw:1320px;
}
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; overflow-x:hidden; }
html.lenis, html.lenis body { height:auto; }
.lenis.lenis-smooth { scroll-behavior:auto !important; }
.logo img {
    max-width: 130px;
}
body { background:var(--ink); color:var(--bone); /*font-family:"Chivo",system-ui,sans-serif;*/ font-family: 'SKF Sans'; font-weight:400; line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
/*@media (hover:hover) and (pointer:fine) { body { cursor:none; } }*/
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
.mono { font-family: 'SKF Sans'; font-weight:500; letter-spacing:0.04em; }
::selection { background:var(--blue); color:#fff; }

.grain { position:fixed; inset:0; z-index:9998; pointer-events:none; opacity:0.045; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
/*
.cursor-dot,.cursor-ring { position:fixed; top:0; left:0; z-index:9999; pointer-events:none; border-radius:50%; transform:translate(-50%,-50%); mix-blend-mode:difference; }
.cursor-dot { width:7px; height:7px; background:var(--bone); transition:width .25s var(--ease),height .25s var(--ease); }
.cursor-ring { width:38px; height:38px; border:1px solid rgba(236,231,222,0.5); transition:width .3s var(--ease),height .3s var(--ease),border-color .3s var(--ease); }
.cursor-ring.is-hover { width:62px; height:62px; border-color:var(--blue-bright); }
.cursor-dot.is-hover { width:0; height:0; }
@media (hover:none),(pointer:coarse) { .cursor-dot,.cursor-ring { display:none; } }*/

.nav { position:fixed; top:0; left:0; right:0; z-index:900; display:flex; align-items:center; justify-content:space-between; padding:22px clamp(20px,4vw,56px); transition:background .4s var(--ease),padding .4s var(--ease),border-color .4s; border-bottom:1px solid transparent; background: #fff;}
.nav.is-scrolled { background:#fff; backdrop-filter:blur(16px); border-bottom:1px solid rgb(189 189 189 / 34%); padding-top:14px; padding-bottom:14px; }
.nav__brand { display:flex; align-items:baseline; gap:8px; }
.nav__logo { font-family: 'SKF Sans'; font-weight:800; font-size:1.5rem; letter-spacing:-0.02em; }
.nav__brandsub { font-family: 'SKF Sans'; font-size:0.7rem; color:var(--bone-dim); text-transform:uppercase; letter-spacing:0.2em; }
.nav__links { display:flex; gap:38px; }
.nav__link { position:relative; font-size:1rem; color:var(--bone-dim); transition:color .3s; color: #000;
    cursor: pointer;
    font-weight: 600; }
/*.nav__link::after { content:""; position:absolute; left:0; bottom:-6px; width:0; height:1px; background:var(--blue-bright); transition:width .35s var(--ease); }
.nav__link:hover { color:var(--bone); }
.nav__link:hover::after { width:100%; }*/
.nav__burger { display:none; background:none; border:0; flex-direction:column; gap:6px; cursor:pointer; }
.nav__burger span { width:26px; height:2px; background:#000; transition:transform .3s var(--ease),opacity .3s; }

.btn { position:relative; display:inline-flex; align-items:center; gap:10px; font-size:0.92rem; font-weight:500; padding:15px 26px; border-radius:100px; overflow:hidden; transition:transform .4s var(--ease),color .35s,background .35s,border-color .35s; white-space:nowrap; }
.btn__arrow { transition:transform .4s var(--ease); }
.btn:hover .btn__arrow { transform:translateX(5px); }
.btn--solid { background:var(--blue); color:#fff; }
/*.btn--solid::before { content:""; position:absolute; inset:0; background:var(--blue-bright); transform:translateY(101%); transition:transform .45s var(--ease); z-index:0; }*/
.btn--solid:hover::before { transform:translateY(0); }
.btn--solid > * { position:relative; z-index:1; }
.btn--ghost { border:1px solid var(--line); color:var(--bone); }
.btn--ghost:hover { border-color:var(--bone); background:rgba(236,231,222,0.05); }
.btn--pill { border:1px solid #000; font-size:0.82rem; padding:11px 20px;color: #000;font-weight: 600; }
.btn--pill:hover { border-color:var(--blue-bright); color:var(--blue-bright); }
.btn--full { width:100%; justify-content:center; padding:18px;cursor: pointer; }

.hero { position:relative; min-height:100svh; padding:140px clamp(20px,4vw,56px) 60px; display:grid; grid-template-columns:1.15fr 0.85fr; align-items:center; gap:40px; max-width:var(--maxw); margin:0 auto; 
    inset: 0;
    background: linear-gradient(135deg, rgba(5, 15, 30, .97) 0%, rgba(0, 83, 166, .88) 50%, rgba(5, 15, 30, .97) 100%);
}

.hero {
    position: relative;
    min-height: 100svh;
    padding: 140px clamp(20px, 4vw, 56px) 60px;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    align-items: center;
    gap: 40px;
    max-width: var(--maxw);
    margin: 0 auto;
    width: 100%;
    max-width: 100%;
    position: relative;
}
section.hero:after {
    content: "";
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("https://plugincomm.com/skf/june24/images/cylindrical-roller-bearings-bg01.jpg");
    background-size: cover;
    background-position: center;
    opacity: .07;
}
.hero__bgword { position:absolute; top:50%; left:-3vw; transform:translateY(-50%); font-family: 'SKF Sans'; font-weight:800; font-size:34vw; line-height:0.8; color:transparent; -webkit-text-stroke:1px rgba(236,231,222,0.045); pointer-events:none; z-index:0; white-space:nowrap; }
.hero__inner { position:relative; z-index:2; max-width:640px; }
.hero__eyebrow { display:inline-flex; align-items:center; gap:10px; font-family: 'SKF Sans'; font-size:0.78rem; text-transform:uppercase; letter-spacing:0.22em; color:var(--bone-dim); margin-bottom:30px; }
.hero__eyebrow .dot { width:8px; height:8px; border-radius:50%; background:var(--blue-bright); box-shadow:0 0 12px var(--blue); animation:pulse 2.4s var(--ease) infinite; }
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:0.35;} }
.hero__title { font-family: 'SKF Sans';font-family: 'SKFDisplayBold'; font-weight:800; font-size:clamp(1.6rem,6.4vw,2.6rem); line-height:0.98; letter-spacing:-0.03em; margin-bottom:30px; }
.hero__title .line { display:block; overflow:hidden; padding-bottom:0.04em; }
.hero__title .line > span { display:block; transform:translateY(110%); animation:heroLine 1.1s var(--ease) forwards; }
.hero__title .line:nth-child(1) > span { animation-delay:0.45s; }
.hero__title .line:nth-child(2) > span { animation-delay:0.58s; }
.hero__title .line:nth-child(3) > span { animation-delay:0.71s; }
@keyframes heroLine { to { transform:translateY(0); } }
.hero__title em { font-family: 'SKF Sans'; font-style:italic; font-weight:500; color:var(--blue-bright); }
.hero__lead { font-size:clamp(1rem,1.4vw,1.18rem); color:var(--bone-dim); max-width:500px; margin-bottom:38px; }
.hero__actions { display:flex; gap:16px; flex-wrap:wrap; }
.hero__stage { position:relative; z-index:1; display:grid; place-items:center; min-height:420px; }
.hero__spot { position:absolute; width:115%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 50% 45%,rgba(60,123,255,0.28),rgba(60,123,255,0.06) 40%,transparent 62%); filter:blur(6px); }
.hero__product-frame { position:relative; z-index:2; width:100%; max-width:560px; background:#fff; border-radius:24px; padding:clamp(16px,4vw,32px); filter:drop-shadow(0 50px 70px rgba(0,0,0,0.6)) drop-shadow(0 0 40px rgba(60,123,255,0.12)); will-change:transform; }
.hero__product { display:block; width:100%; border-radius:15px; }
.hero__ticket { position: absolute;
    bottom: 4%;
    right: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 18px;
    background: var(--blue);
    backdrop-filter: blur(10px);
    border: 1px solid #fff;
    border-radius: 12px;
    font-size: 0.82rem;
    }
.hero__ticket .mono { color: var(--amber); font-size:0.7rem; }
.hero__scroll { position:absolute; bottom:34px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:10px; font-size:0.7rem; text-transform:uppercase; letter-spacing:0.2em; color:var(--bone-faint); }

.hero__scrollline { width:100px; height:46px; background:transparent; position:relative; overflow:hidden; }

.hero__scrollline::after { content:""; position:absolute; top:-50%; left:0; width:100%; height:50%; 
background:url(../images/arrow.png) no-repeat bottom; animation:scrolldown 2s var(--ease) infinite; }

@keyframes scrolldown { 0%{top:-50%;} 100%{top:100%;} }

.marquee { border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:26px 0; overflow:hidden; white-space:nowrap; background:var(--ink-2); }
.marquee__track { display:inline-flex; align-items:center; gap:40px; will-change:transform; }
.marquee__track span { font-family: 'SKF Sans'; font-weight:700; font-size:clamp(1.6rem,3.4vw,3rem); letter-spacing:-0.02em; color:var(--bone); text-transform:uppercase; }
.marquee__track i { color:var(--blue); font-size:1.1rem; font-style:normal; }
.container {
    max-width: var(--maxw);
    margin: auto;
}
section.stats,section.solutions,section.selector,section.contact { max-width:var(--maxw); margin:0 auto; padding:clamp(80px,12vh,160px) clamp(20px,4vw,56px); }
section.contact {
    background-color: rgb(0, 0, 254);
    max-width: 100%;
}
section.stats {
    max-width: 100%;
}
.section-head { margin-bottom:64px; }
.section-head--split { display:grid; grid-template-columns:1.2fr 0.8fr; gap:40px; align-items:end; }
.section-kicker { display:block; color:#fff; font-size:0.8rem; text-transform:uppercase; margin-bottom:18px; }
.section-title { font-family: 'SKF Sans'; font-weight:700; font-size:clamp(2rem,4.6vw,2.8rem); line-height:1.02; letter-spacing:-0.025em; }
.section-desc { color:var(--bone-dim); font-size:1.05rem; max-width:440px; }

.stats__grid { display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border: 0;
    gap: 20px;
    background: transparent; }
.stat { background: #fff;
    padding: 40px 32px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: background .4s var(--ease);
    border: 1px solid #ffffff52;
    border-radius: 10px; text-align:center;}
.stat img{display:inline; width:50%;}
/*.stat:hover { background:var(--ink-2); }*/
.stat__glyph,.stat__num { font-family: 'SKF Sans'; font-weight:800; font-size:clamp(3rem,6vw,5rem); line-height:1; color:var(--blue); }
.stat__pct { font-family: 'SKF Sans'; font-weight:800; font-size:clamp(2rem,4vw,3rem); color:var(--blue); }
.stat__unit { font-size:1rem; color:var(--amber); text-transform:uppercase; color: #000; font-weight: bold;}
.stat__label { font-size:0.92rem; color:var(--bone-dim); margin-top:auto;color: #000; font-weight: bold; }

.chapters { border-top:1px solid rgb(0 0 0 / 12%); } 
.chapter { border-bottom:1px solid rgb(0 0 0 / 12%); }
.chapter__head { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:28px; padding:20px 8px; cursor:pointer; width:100%; background:none; border:0; text-align:left; color:inherit; font-family:inherit; }
/*@media (hover:hover) and (pointer:fine) { .chapter__head { cursor:none; } }*/
.chapter__num { font-family: 'SKF Sans'; font-size:0.9rem; color:#fff; }
.chapter__name { font-family: 'SKF Sans'; font-weight:700; font-size:clamp(1.5rem,3.4vw,1.6rem); letter-spacing:-0.02em; line-height:1; transition:color .35s,transform .5s var(--ease); color: var(--blue-bright)}
.chapter__toggle { width:44px; height:44px; border:1px solid var(--line); border-radius:50%; display:grid; place-items:center; position:relative; flex-shrink:0; transition:background .35s,border-color .35s; }
.chapter__toggle::before,.chapter__toggle::after { content:""; position:absolute; background:var(--bone); transition:transform .4s var(--ease),background .35s; }
.chapter__toggle::before { width:15px; height:1.5px; }
.chapter__toggle::after { width:1.5px; height:15px; }
.chapter:hover .chapter__name { /*color:#fff; */transform:translateX(10px); }
.chapter:hover .chapter__toggle { /*border-color:#fff;*/ }
.chapter.is-open .chapter__toggle { background:var(--blue); border-color:var(--blue); }
.chapter.is-open .chapter__toggle::after { transform:rotate(90deg); }
.chapter.is-open .chapter__toggle::before,.chapter.is-open .chapter__toggle::after { background:#fff; }
.chapter.is-open .chapter__name { }
.chapter__body { display:grid; grid-template-rows:0fr; transition:grid-template-rows .6s var(--ease); }
.chapter__body > div { overflow:hidden; }
.chapter.is-open .chapter__body { grid-template-rows:1fr; }
.chapter__content { padding:8px 8px 48px; display:grid; grid-template-columns:0.9fr 1.1fr; gap:48px; }
.chapter__info { display:flex; flex-direction:column; gap:26px; }
.chapter__block .mono { display:block; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.18em; margin-bottom:10px; }
.chapter__block--challenge .mono { color:var(--amber); }
.chapter__block--outcome .mono { color:var(--amber); }
.chapter__block p { color:var(--bone-dim); font-size:1rem; line-height:1.6; }
.chapter__block--outcome p { color:var(--bone); }
.products { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.product { background:#fff; border:1px solid #e2eaf5;; border-radius:16px; overflow:hidden; display:flex; flex-direction:column; transition:transform .5s var(--ease),border-color .4s,box-shadow .5s; border: 1px solid rgb(0 0 0 / 18%); }
.product:hover { transform:translateY(-6px); border-color:#fff; box-shadow:0 20px 40px rgba(0,0,0,0.4); }

.product__media { position:relative; aspect-ratio:4/3; background:#fff; display:grid; place-items:center; overflow:hidden; }

.product__media::after { content:""; position:absolute; inset:0; background:#fff; }

.product__media img { width:78%; object-fit:contain; transition:transform .6s var(--ease); position:relative; z-index:1; filter:drop-shadow(0 20px 24px rgba(0,0,0,0.22)); }
.product:hover .product__media img { transform:scale(1.07) rotate(-2deg);color:#000 }
.product__body { padding:20px; display:flex; flex-direction:column; gap:8px; flex:1; }
.product__name { font-family: 'SKF Sans'; font-weight:700; font-size:1.05rem; letter-spacing:-0.01em;color:#000 }
.product__desc { font-size:0.88rem; color:#000; line-height:1.5; }
section.selector {
    background: #f4f7fb;
    max-width: 100%;
}

.selector span.section-kicker, .selector .section-title, .selector .section-desc, .chapter .chapter__block--challenge span.mono, .chapter .chapter__num, .chapter__block p,.chapter__block--outcome .mono{
    color: #000;
}

.selector .field__label, .selector .selector__count {
    color: #000;
}

section.solutions {
    background: #fff;
    max-width: 100%;
}
.solutions span.section-kicker, .solutions .section-title, .solutions .section-desc, .chapter .chapter__block--challenge span.mono, .chapter .chapter__num, .chapter__block p,.chapter__block--outcome .mono {
    color: #000;
}

.chapter .chapter__num {
    /* color: #000; */
}

.chapter span.chapter__name {
    color: #000;
}

.chapter .chapter__block--challenge span.mono {}

.chapter span.chapter__toggle {
    border: 1px solid #000;
}

.chapter span.chapter__toggle:before,.chapter span.chapter__toggle:after {
    color: #000;
    background: #000;
}

.selector { background:var(--ink-2); max-width:none; }
.selector > * { max-width:var(--maxw); margin-left:auto; margin-right:auto; }
.selector__controls { display:grid; grid-template-columns:1fr 1fr auto; gap:20px; align-items:end; margin-bottom:48px; }
.field { display:flex; flex-direction:column; gap:10px; }
.field__label { font-size:0.72rem; text-transform:uppercase; letter-spacing:0.16em; color:#fff; }
form .field__label { font-size:0.72rem; text-transform:uppercase; letter-spacing:0.16em; color:#000; }
.field select,.field input,.field textarea { font-family:"Chivo",sans-serif; font-size:1rem; color:var(--bone); background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:15px 16px; width:100%; transition:border-color .3s,background .3s;

    font-family: "Chivo", sans-serif;
    font-size: 1rem;
    color: var(--bone);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 15px 16px;
    width: 100%;
    transition: border-color .3s, background .3s;
    background: #fff;
    border: 1px solid #ccc;
    color: #000;
}
.field select { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%233C7BFF' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; padding-right:42px; }
/*.field select:focus,.field input:focus,.field textarea:focus { outline:none; border-color:var(--blue-bright); background:var(--surface-2); }*/
.field select:focus,.field input:focus,.field textarea:focus {outline: none;}
.field textarea { resize:vertical; min-height:110px; }
.selector__count { color:var(--bone-dim); font-size:0.82rem; padding-bottom:15px; white-space:nowrap; }
.selector__results { display:grid; grid-template-columns:repeat(5,1fr); gap:18px; }
.selector__results .product { animation:fadeUp .5s var(--ease) both; }
.selector__empty { grid-column:1/-1; text-align:center; color:var(--bone-dim); padding:60px 0; font-family: 'SKF Sans'; font-style:italic; font-size:1.3rem; }
@keyframes fadeUp { from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:none;} }

.contact__grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,96px); align-items:start; }
.contact__intro .section-title { margin-bottom:26px; }
.contact__lines { margin-top:40px; display:flex; flex-direction:column; }
.contact__line { display:flex; align-items:baseline; gap:18px; padding:22px 0; border-top:1px solid var(--line); font-family: 'SKF Sans'; font-weight:700; font-size:clamp(1.1rem,2vw,1.6rem); transition:color .3s,padding-left .4s var(--ease); }
.contact__line:last-child { border-bottom:1px solid var(--line); }
.contact__line .mono { font-family: 'SKF Sans'; font-weight:500; font-size:0.72rem; color:#fff; text-transform:uppercase; letter-spacing:0.16em; width:60px; flex-shrink:0; }
.contact__line:hover { /*color:var(--blue-bright); padding-left:12px;*/ }
.form { background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:clamp(24px,3vw,40px); display:flex; flex-direction:column; gap:18px; 
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: clamp(24px, 3vw, 40px);
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.form__note { color:#000; font-size:0.92rem; }
.form__row { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field--dark .field__error { display:none; font-size:0.76rem; color:#FF6B6B; }
.field--dark.is-error input,.field--dark.is-error select { border-color:#FF6B6B; }
.field--dark.is-error .field__error { display:block; }
.form__success { color:var(--blue-bright); font-size:0.92rem; font-weight:500; padding:4px; }

.footer { max-width:var(--maxw); margin:0 auto; padding:80px clamp(20px,4vw,56px) 40px; border-top:1px solid var(--line); }
.footer__top { display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:40px; margin-bottom:60px; }
.footer__logo { font-family: 'SKF Sans'; font-weight:800; font-size:2.4rem; letter-spacing:-0.02em; display:block; margin-bottom:18px; }
.footer__brand p { color:var(--bone-dim); max-width:320px; font-size:0.95rem; }
.footer__col { display:flex; flex-direction:column; gap:14px; }
.footer__h { font-size:0.72rem; text-transform:uppercase; letter-spacing:0.16em; color:var(--blue-bright); margin-bottom:6px; }
.footer__col a { color:var(--bone-dim); font-size:0.95rem; width:fit-content; transition:color .3s,transform .3s var(--ease); }
.footer__col a:hover { color:var(--bone); transform:translateX(5px); }
.footer__bottom { display:flex; justify-content:space-between; gap:20px; padding-top:30px; border-top:1px solid var(--line-soft); color:var(--bone-faint); font-size:0.82rem; flex-wrap:wrap; }

.toast { position:fixed; bottom:30px; left:50%; transform:translate(-50%,200%); background:var(--surface-2); border:1px solid var(--line); color:var(--bone); padding:16px 24px; border-radius:12px; z-index:9997; font-size:0.92rem; box-shadow:0 20px 50px rgba(0,0,0,0.5); transition:transform .5s var(--ease); max-width:90vw; }
.toast.is-visible { transform:translate(-50%,0); }
.toast::before { content:"✓"; color:var(--blue-bright); font-weight:700; margin-right:10px; }

[data-reveal] { will-change:transform,opacity; }
html.reveal-on [data-reveal] { opacity:0; transform:translateY(30px); transition:opacity .9s var(--ease),transform .9s var(--ease); }
html.reveal-on [data-reveal].in-view { opacity:1; transform:none; }

@media (max-width:1024px) {
  .hero { grid-template-columns:1fr; padding-top:120px; }
  .hero__stage { order:-1; min-height:300px; }
  .hero__product-frame { max-width:400px; }
  .hero__bgword { font-size:48vw; }
  /* Stacked single-column hero content is taller here, so the absolutely-
     positioned scroll hint (fixed bottom:34px) would otherwise overlap
     the CTA buttons — same reason .hero__ticket is already hidden below. */
  .hero__scroll { display:none; }
  .section-head--split { grid-template-columns:1fr; align-items:start; }
  .chapter__content { grid-template-columns:1fr; gap:28px; }
  .stats__grid { grid-template-columns:repeat(2,1fr); }
  .selector__results { grid-template-columns:repeat(2,1fr); }
  .contact__grid { grid-template-columns:1fr; }
}
@media (max-width:720px) {
  .nav__links,.nav__cta { display:none; }
  .nav.is-open .nav__links { display:flex; position:fixed; inset:0; background:var(--ink); flex-direction:column; justify-content:center; align-items:center; gap:32px; z-index:-1; }
  .nav.is-open .nav__links .nav__link { font-size:1.6rem; color:var(--bone); }
  .nav__burger { display:flex; }
  .nav.is-open .nav__burger span:first-child { transform:translateY(4px) rotate(45deg); }
  .nav.is-open .nav__burger span:last-child { transform:translateY(-4px) rotate(-45deg); }
  .hero__ticket { display:none; }
  .stats__grid { grid-template-columns:1fr; }
  .products { grid-template-columns:1fr; }
  .selector__controls { grid-template-columns:1fr; }
  .selector__results { grid-template-columns:1fr; }
  .form__row { grid-template-columns:1fr; }
  .footer__top { grid-template-columns:1fr; gap:32px; }
  .chapter__head { gap:16px; padding:24px 4px; }
}
@media (prefers-reduced-motion:reduce) {
  * { animation:none !important; transition:none !important; }
  .hero__title .line > span { transform:none !important; }
  html.reveal-on [data-reveal] { opacity:1; transform:none; }
}



/* Tab grid */
.solutions .chapters { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; align-items:stretch; padding-top: 60px;}
.solutions .chapter-tab { display:flex; flex-direction:column; justify-content:space-between; gap:22px; text-align:left; min-height:150px; padding:24px; background:#fff; border:1px solid rgb(0 0 0 / 12%); border-radius:16px; color:inherit; font-family:inherit; cursor:pointer; transition:border-color .4s, background .4s; }
.solutions .chapter-tab:hover { /*border-color:rgba(60,123,255,0.4); background:#141922;*/ }
.solutions .chapter-tab__top { display:flex; flex-direction:column; gap:10px; }
.solutions .chapter-tab__num { font-family:"IBM Plex Mono",monospace; font-size:0.82rem; color:#000; }
.solutions .chapter-tab__name {  font-weight:700; font-size:clamp(1.15rem,1.4vw,1.5rem); letter-spacing:-0.02em; line-height:1.12;color: #000; }
.solutions .chapter-tab__cta { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:16px; border-top:1px solid rgba(236,231,222,0.12); }
.solutions .chapter-tab__label { font-size:0.92rem; font-weight:500; color:#000; }
.solutions .chapter-tab__chev { width:11px; height:11px; border-right:2px solid #000; border-bottom:2px solid #000; transform:rotate(45deg); transition:transform .4s; margin-bottom:4px; flex-shrink:0; }
.solutions .chapter-tab.is-active { /*background:#141922;*/ border-color:#000; }
.solutions .chapter-tab.is-active .chapter-tab__chev { transform:rotate(-135deg); margin-bottom:-4px; }
.solutions .chapter-tab.is-active .chapter-tab__label { color:#000; }

/* Bottom panel */
.solutions .chapter-panels { margin-top:16px; }
.solutions .chapter-panel { border:0px solid #ccc; border-radius:20px; background:#0000fe; padding:clamp(24px,3vw,40px); opacity:0; transform:translateY(14px); transition:opacity .5s, transform .5s; }
.chapter__block--challenge .mono {
    color: #000;
}

.solutions .chapter-panel span.mono, .solutions .chapter-panel .chapter__block  p {
    color: #fff;
}
.solutions .chapter-panel[hidden] { display:none; }
.solutions .chapter-panel.is-open { opacity:1; transform:none; }
.solutions .chapter-panel__inner { display:flex; flex-direction:column; gap:32px; }
.solutions .chapter-panel__intro { display:grid; grid-template-columns:1fr 1fr; gap:36px; padding-bottom:28px; border-bottom:1px solid rgba(236,231,222,0.12); }

/* Product cards with blue name bar */
.solutions .products { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:18px; }
.solutions .product { /*background:#141922;*/ border:1px solid #ccc; border-radius:16px; overflow:hidden; display:flex; flex-direction:column; transition:transform .5s, border-color .4s, box-shadow .5s; }
.solutions .product:hover { transform:translateY(-6px); border-color:#fff; box-shadow:0 30px 50px rgba(0,0,0,0.4); }
.solutions .product__media { position:relative; aspect-ratio:4/3; background:linear-gradient(160deg,#F5F2EC,#E3DED3); display:grid; place-items:center; }
.solutions .product__media img { width:78%; object-fit:contain; transition:transform .6s; filter:drop-shadow(0 20px 24px rgba(0,0,0,0.22)); }
.solutions .product:hover .product__media img { transform:scale(1.07) rotate(-2deg); }
.solutions .product__bar { /*background:#3C7BFF;*/ color:#000; font-weight:700; text-align:left; padding: 20px 16px 0px 16px; }
.solutions .product__body { padding:10px 15px 15px 15px; }
.solutions .product__desc { font-size:0.88rem; color:#000 line-height:1.5; }

@media (max-width:1024px){ .solutions .chapters{ grid-template-columns:repeat(2,1fr);} .solutions .chapter-panel__intro{ grid-template-columns:1fr; gap:24px;} }
@media (max-width:720px){ .solutions .chapters{ grid-template-columns:1fr;} .solutions .products{ grid-template-columns:1fr;} }