/* Home page — qatm-style studio layout. Depends on site.css tokens. */
:root{--hm-dark:#12283A;--hm-dark-2:#0E2233;--hm-tint:rgba(70,130,180,.10)}

/* ===== Hero — dark studio + blueprint callouts ===== */
.hm-hero{position:relative;min-height:min(calc(100vh - var(--nav-h)),860px);display:flex;align-items:center;overflow:hidden;color:#e6edf3;
  background:radial-gradient(ellipse at 68% 45%,#173653 0%,#0d1f30 50%,#070f17 100%);clip-path:polygon(0 0,100% 0,100% 90%,50% 100%,0 90%);padding:40px 0 190px}
/* drafting grid, faded around the machine */
.hm-hero::before{content:"";position:absolute;inset:0;background:
  linear-gradient(rgba(140,190,230,.09) 1px,transparent 1px) 0 0/100% 96px,
  linear-gradient(90deg,rgba(140,190,230,.09) 1px,transparent 1px) 0 0/96px 100%;
  -webkit-mask:radial-gradient(ellipse at 70% 50%,#000 10%,transparent 70%);mask:radial-gradient(ellipse at 70% 50%,#000 10%,transparent 70%)}
.hm-hero .wrap{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:center}
.hm-hero .eyebrow{display:inline-flex;align-items:center;gap:10px;color:#7fb4dc;font-weight:600;letter-spacing:.12em;text-transform:uppercase;font-size:12px;margin-bottom:26px}
.hm-hero .eyebrow::before{content:"";width:28px;height:2px;background:#7fb4dc}
.hm-hero h1{font-size:clamp(38px,4.6vw,66px);font-weight:300;line-height:1.06;letter-spacing:-.015em;color:#fff;margin:0 0 24px;max-width:13ch}
.hm-hero h1 b{font-weight:600;color:#8ec5ee}
.hm-hero .lede{font-size:17px;line-height:1.65;color:#a9b8c6;max-width:50ch;margin:0 0 36px}
.hm-hero .acts{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin-bottom:56px}
.hm-hero .wbtn{background:var(--accent);border-color:var(--accent);color:#fff}
.hm-hero .wbtn::after{border-left-color:rgba(255,255,255,.3);background-image:var(--arrow-lt)}
.hm-hero .wbtn:hover{color:#fff}
.hm-hero .wbtn:hover::after{background-color:var(--accent-dk)}
.hm-hero .more{color:#cfe0ee}
.hm-hero .more:hover{color:#fff}
/* slide pager: glass thumbnails + label of the active machine */
.hm-pager{display:flex;align-items:center;gap:14px}
.hm-pager button{width:64px;height:64px;padding:6px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:4px;cursor:pointer;display:grid;place-items:center;position:relative;overflow:hidden;transition:border-color .2s,transform .2s,background .2s}
.hm-pager button img{max-width:100%;max-height:100%;object-fit:contain}
.hm-pager button::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:#8ec5ee}
.hm-pager button.on{border-color:rgba(142,197,238,.7);background:rgba(255,255,255,.12)}
.hm-pager button.on::after{width:100%;transition:width var(--hero-delay,6000ms) linear}
.hm-pager button:hover{transform:translateY(-2px)}
.hm-pager .cap{margin-left:10px;font-size:13px;color:#a9b8c6;line-height:1.45;max-width:38ch}
.hm-pager .cap span{display:block;color:#7d8f9f;font-size:12px;margin-top:2px}
.hm-pager .cap b{display:block;font-weight:600;color:#fff;font-size:14px}
/* studio figure */
.hm-fig{position:relative;height:min(640px,72vh);min-height:460px}
.hm-fig .glow{position:absolute;left:50%;top:-10%;width:140%;height:120%;transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse at 50% 30%,rgba(120,190,240,.28),rgba(120,190,240,0) 60%);filter:blur(20px)}
.hm-fig .floor{position:absolute;left:50%;bottom:4%;width:70%;height:60px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse,rgba(120,190,240,.4),transparent 70%);filter:blur(14px)}
.hm-fig .ring{display:none}
.hm-fig .slide{position:absolute;inset:0;display:grid;grid-template-rows:100%;place-items:center;opacity:0;transform:translateY(24px) scale(.97);transition:opacity .8s ease,transform .8s ease;pointer-events:none}
.hm-fig .slide.on{opacity:1;transform:none;pointer-events:auto}
.hm-fig .slide img{max-height:100%;max-width:88%;object-fit:contain;filter:drop-shadow(0 40px 60px rgba(0,0,0,.7))}
/* blueprint callouts: leader lines + labels, redrawn on every slide change */
.hm-fig .draw{position:absolute;inset:0;width:100%;height:100%;z-index:3;overflow:visible;pointer-events:none}
.hm-fig .draw *{fill:none;stroke:rgba(159,208,242,.8);stroke-width:1.2;vector-effect:non-scaling-stroke}
.hm-fig .draw .axis{stroke-dasharray:4 4;stroke:rgba(159,208,242,.3)}
.hm-fig .draw .dot{fill:#9fd0f2;stroke:none}
.hm-fig .draw text{fill:#9fd0f2;stroke:none;font:600 10px var(--head);letter-spacing:.12em;text-transform:uppercase}
.hm-fig .draw .lead{stroke-dasharray:600;stroke-dashoffset:600;animation:hmDraw 2.4s ease forwards}
.hm-fig .draw text{opacity:0;animation:hmFade .6s ease 1.6s forwards}
@keyframes hmDraw{to{stroke-dashoffset:0}}
@keyframes hmFade{to{opacity:1}}
.hm-fig .tag{display:none;position:absolute;right:2%;top:8%;z-index:4;background:rgba(255,255,255,.06);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.14);border-radius:4px;padding:12px 16px;font-size:12px;color:#b9c8d6;line-height:1.5;max-width:220px}
.hm-fig .tag b{display:block;font-weight:600;color:#fff;font-size:13px}
.hm-fig .tag i{display:block;font-style:normal;color:#8ec5ee;font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;margin-bottom:4px}
.hm-scroll{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.5);display:flex;flex-direction:column;align-items:center;gap:8px}
.hm-scroll::after{content:"";width:1px;height:34px;background:linear-gradient(#8ec5ee,transparent);animation:hmDrop 1.8s ease-in-out infinite}
@keyframes hmDrop{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media (prefers-reduced-motion:reduce){.hm-fig .draw .lead{animation:none;stroke-dashoffset:0}.hm-fig .draw text{animation:none;opacity:1}}

/* ===== Stat strip ===== */
.hm-stats{position:relative;z-index:2;margin:-76px auto 0}
.hm-stats .grid{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border:1px solid var(--line);border-radius:6px;box-shadow:0 24px 60px rgba(18,40,58,.12);overflow:hidden}
.hm-stats .stat{padding:32px 30px;border-right:1px solid var(--line);margin:0}
.hm-stats .stat:last-child{border-right:0}
.hm-stats .stat b{display:flex;align-items:baseline;gap:4px;font:600 42px var(--head);color:var(--ink);line-height:1}
.hm-stats .stat b small{font-size:22px;font-weight:400;color:var(--accent);line-height:1}
.hm-stats .stat span{display:block;margin-top:10px;font-size:13px;color:var(--text);line-height:1.5;max-width:none}

/* ===== Shared section furniture ===== */
.hm-sec{padding:110px 0 100px}
.hm-sec.alt{background:var(--bg-alt)}
.hm-k{font:600 12px var(--head);letter-spacing:.12em;color:var(--accent);text-transform:uppercase;margin-bottom:16px;display:flex;align-items:center;gap:12px}
.hm-k::before{content:"";width:22px;height:2px;background:var(--accent)}
.hm-title{font-size:clamp(30px,3.2vw,46px);font-weight:300;line-height:1.12;letter-spacing:-.01em;color:var(--black);margin:0 0 18px}
.hm-title b{font-weight:600;color:var(--ink)}
.hm-lead{font-size:16px;line-height:1.7;color:var(--text);max-width:58ch;margin:0}
.hm-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:end;margin-bottom:56px}

/* ===== Families bento ===== */
.fam-grid{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:300px;gap:20px}
.fam{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:6px;padding:30px 30px 26px;overflow:hidden;transition:transform .3s ease,box-shadow .3s ease,border-color .3s}
.fam:hover{transform:translateY(-6px);box-shadow:0 24px 60px rgba(18,40,58,.12);border-color:transparent}
.fam.big{grid-column:span 3;grid-row:span 2}
.fam.half{grid-column:span 3}
.fam.wide{grid-column:span 4}
.fam.sm{grid-column:span 2}
.fam .ic{width:44px;height:44px;border-radius:10px;background:var(--hm-tint);display:grid;place-items:center;color:var(--accent-dk);margin-bottom:auto}
.fam .ic svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.fam .n{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-lt);font-weight:500;margin:0 0 6px}
.fam h3{font-size:24px;font-weight:600;color:var(--ink);margin:0 0 6px;line-height:1.2}
.fam.big h3{font-size:32px}
.fam p{font-size:13.5px;color:var(--text);line-height:1.55;margin:0 0 18px;max-width:34ch}
.fam .more{font-size:13px;margin-top:auto}
.fam .txt{position:relative;z-index:1;display:flex;flex-direction:column;height:100%}
.fam img{position:absolute;right:5%;bottom:8%;height:74%;width:auto;max-width:50%;object-fit:contain;filter:drop-shadow(0 20px 26px rgba(18,40,58,.18));transition:transform .4s ease}
.fam.big img{height:84%;right:5%;bottom:6%;max-width:56%}
.fam.half img{height:74%;max-width:44%}
.fam.sm img{height:66%;max-width:46%}
.fam:hover img{transform:translateY(-6px) scale(1.02)}
.fam::after{content:"";position:absolute;right:-30%;bottom:-40%;width:90%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(70,130,180,.16),rgba(70,130,180,0) 62%);pointer-events:none}

/* ===== Spotlight band ===== */
.hm-spot{position:relative;background:var(--hm-dark);color:#fff;padding:150px 0 190px;clip-path:polygon(0 0,50% 8%,100% 0,100% 100%,50% 92%,0 100%);margin:-40px 0}
.hm-spot::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 30% 55%,rgba(70,130,180,.35),transparent 55%)}
.hm-spot .wrap{position:relative;display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:56px;align-items:center}
.hm-spot .fig{position:relative;height:520px;display:grid;place-items:center}
.hm-spot .fig::after{content:"";position:absolute;left:16%;right:16%;bottom:6%;height:26px;border-radius:50%;background:rgba(0,0,0,.45);filter:blur(14px)}
.hm-spot .fig img{position:relative;height:100%;width:auto;max-width:90%;object-fit:contain;filter:drop-shadow(0 40px 50px rgba(0,0,0,.45))}
.hm-spot .hm-k{color:var(--brand-lt)}
.hm-spot .hm-k::before{background:var(--brand-lt)}
.hm-spot .hm-title,.hm-spot .hm-title b{color:#fff}
.hm-spot .hm-lead{color:rgba(255,255,255,.75)}
.hm-spot .specs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:34px 0 36px}
.hm-spot .spec{border:1px solid rgba(255,255,255,.14);border-radius:4px;padding:16px 18px;background:rgba(255,255,255,.04)}
.hm-spot .spec i{display:block;font-style:normal;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:6px}
.hm-spot .spec b{font-weight:600;font-size:15px;color:#fff;line-height:1.35}
.hm-spot .acts{display:flex;gap:16px;align-items:center;flex-wrap:wrap}

/* ===== Why ETS ===== */
.hm-why .wrap{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:80px}
.hm-why .lead{position:sticky;top:calc(var(--nav-h) + 40px);align-self:start}
.hm-why .lead .badge-mii{height:64px;margin-top:32px;display:block}
.pillars{display:grid;gap:0}
.pillar{display:grid;grid-template-columns:64px 1fr;gap:24px;padding:36px 0;border-top:1px solid var(--line)}
.pillar:last-child{border-bottom:1px solid var(--line)}
.pillar .ic{width:56px;height:56px;border-radius:12px;background:var(--hm-tint);display:grid;place-items:center;color:var(--accent-dk)}
.pillar .ic svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.pillar .num{font-size:12px;letter-spacing:.12em;color:var(--accent);font-weight:600;margin-bottom:6px}
.pillar h3{font-size:22px;font-weight:500;color:var(--black);margin:0 0 10px;line-height:1.3}
.pillar p{font-size:15px;line-height:1.7;color:var(--text);margin:0}
.pillar .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.chip{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 14px;border:1px solid var(--line);border-radius:999px;font-size:13px;color:var(--text-md);background:#fff}
.chip i{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none}

/* ===== Industries ===== */
.ind-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.itile{position:relative;display:block;height:470px;border-radius:6px;overflow:hidden;background:var(--hm-dark);color:#fff}
.itile img{position:absolute;left:50%;top:5%;height:50%;width:auto;max-width:80%;transform:translateX(-50%);object-fit:contain;filter:drop-shadow(0 18px 24px rgba(0,0,0,.45));opacity:.95;transition:transform .7s ease,opacity .4s}
.itile::before{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse at 50% 28%,rgba(70,130,180,.28),transparent 60%),linear-gradient(180deg,rgba(14,34,51,0) 0%,rgba(14,34,51,0) 52%,rgba(14,34,51,.85) 72%,rgba(14,34,51,.96) 100%)}
.itile:hover img{transform:translateX(-50%) scale(1.04);opacity:.45}
.itile .in{position:absolute;left:0;right:0;bottom:0;padding:28px 28px 26px;z-index:2}
.itile .num{font-size:12px;letter-spacing:.12em;color:var(--brand-lt);font-weight:600;margin-bottom:8px}
.itile h3{color:#fff;font-size:22px;font-weight:500;margin:0 0 6px;line-height:1.25}
.itile .chips{display:flex;flex-wrap:wrap;gap:6px;max-height:0;opacity:0;overflow:hidden;transition:max-height .45s ease,opacity .35s ease,margin .35s}
.itile:hover .chips,.itile:focus-visible .chips{max-height:90px;opacity:1;margin-top:10px}
.itile .chips span{font-size:12px;color:#fff;border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:4px 10px;background:rgba(255,255,255,.08)}
.itile .more{color:#fff;font-size:13px;margin-top:12px}
.itile:hover .more{color:var(--brand-lt)}

/* ===== Process ===== */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative}
.steps::before{content:"";position:absolute;left:32px;right:32px;top:31px;height:1px;background:var(--line)}
.step{position:relative;padding:0 32px 0 0}
.step .dot{width:64px;height:64px;border-radius:50%;background:#fff;border:1px solid var(--line);display:grid;place-items:center;font:600 18px var(--head);color:var(--accent-dk);position:relative;margin-bottom:24px;transition:background .3s,color .3s,border-color .3s}
.step:hover .dot{background:var(--accent);color:#fff;border-color:var(--accent)}
.step h3{font-size:19px;font-weight:500;color:var(--black);margin:0 0 10px}
.step p{font-size:14px;line-height:1.7;color:var(--text);margin:0;max-width:30ch}

/* ===== News ===== */
.hm-news .news-grid{gap:32px}
.hm-news .ncard{background:#fff;border:1px solid var(--line);border-radius:6px;padding:0 0 26px;overflow:hidden;transition:transform .3s,box-shadow .3s}
.hm-news .ncard:hover{transform:translateY(-6px);box-shadow:0 24px 60px rgba(18,40,58,.10)}
.hm-news .ncard .pic{height:220px;background:linear-gradient(180deg,#f6f8f9,#e9eef1);padding:20px;margin-bottom:20px}
.hm-news .ncard time,.hm-news .ncard h3,.hm-news .ncard p,.hm-news .ncard .more{margin-left:26px;margin-right:26px}

/* ===== CTA ===== */
.hm-cta{background:linear-gradient(180deg,#1B3D5A 0%,#12283A 100%);color:#fff;padding:120px 0 110px;border-bottom:1px solid rgba(255,255,255,.10);clip-path:polygon(0 10%,50% 0,100% 10%,100% 100%,0 100%);margin-top:-1px;position:relative}
.hm-cta::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 80% 40%,rgba(70,130,180,.3),transparent 55%)}
.hm-cta .wrap{position:relative;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:48px;align-items:center}
.hm-cta .hm-title,.hm-cta .hm-title b{color:#fff}
.hm-cta p{color:rgba(255,255,255,.75);font-size:15px;line-height:1.7;max-width:52ch;margin:0}
.hm-cta .acts{display:flex;gap:14px;flex-wrap:wrap;justify-content:flex-end}
.hm-cta .contact{display:grid;gap:10px;margin-top:22px;font-size:14px}
.hm-cta .contact a{color:#fff;display:inline-flex;gap:10px;align-items:center}
.hm-cta .contact a:hover{color:var(--brand-lt)}
.hm-cta .contact svg{width:16px;height:16px;fill:none;stroke:var(--brand-lt);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ===== Responsive ===== */
@media (max-width:1400px){.fam-grid{grid-auto-rows:270px}.fam.big h3{font-size:28px}}
@media (max-width:1200px){
  .hm-stats .grid{grid-template-columns:repeat(2,1fr)}
  .hm-stats .stat:nth-child(2){border-right:0}.hm-stats .stat:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .fam-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:260px}
  .fam.big,.fam.half,.fam.wide,.fam.sm{grid-column:span 1;grid-row:span 1}
  .fam.big{grid-column:span 2}
  .steps{grid-template-columns:repeat(2,1fr);gap:36px 24px}.steps::before{display:none}
  .ind-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .hm-hero{clip-path:polygon(0 0,100% 0,100% 95%,50% 100%,0 95%);padding:32px 0 96px;max-height:none;min-height:0}
  .hm-hero .wrap{grid-template-columns:1fr}
  .hm-fig{height:380px;min-height:0;order:-1}
  .hm-fig .tag,.hm-fig .draw{display:none}
  .hm-hero .acts{margin-bottom:32px}
  .hm-scroll{display:none}
  .hm-sec{padding:72px 0 64px}
  .hm-head{grid-template-columns:1fr;gap:20px;align-items:start;margin-bottom:36px}
  .hm-spot{clip-path:polygon(0 0,50% 4%,100% 0,100% 100%,50% 96%,0 100%);padding:96px 0}
  .hm-spot .wrap{grid-template-columns:1fr}
  .hm-spot .fig{height:380px}
  .hm-spot .specs{grid-template-columns:1fr}
  .hm-why .wrap{grid-template-columns:1fr;gap:40px}
  .hm-why .lead{position:static}
  .hm-cta .wrap{grid-template-columns:1fr}.hm-cta .acts{justify-content:flex-start}
  .hm-news .news-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .fam-grid{grid-template-columns:1fr;grid-auto-rows:auto}.fam.big{grid-column:span 1}
  /* Mobile: image sits in flow beside the text instead of floating over it */
  .fam{display:grid;grid-template-columns:minmax(0,1fr) 38%;gap:14px;align-items:end;padding:22px 20px 20px;min-height:0}
  .fam .txt{height:auto}
  .fam .ic{margin-bottom:14px}
  .fam h3,.fam.big h3{font-size:20px}
  .fam p{max-width:none;margin-bottom:12px}
  .fam img,.fam.big img,.fam.half img,.fam.sm img{position:static;width:100%;max-width:none;height:auto;max-height:180px;justify-self:end;align-self:end}
  .steps,.ind-grid{grid-template-columns:1fr}
  .itile{height:340px}
  .itile img{top:14px;height:46%;max-width:70%}
  .itile .in{padding:20px 20px 18px}
  .itile h3{font-size:20px}
  .hm-stats{margin-top:-48px}
  .hm-pager .cap{display:none}
}