/* ============================================================
   OLIDMX — Standalone single-file build (light premium theme)
   ============================================================ */
:root{
  --base:#F4F3EF; --surface:#FFFFFF; --elevated:#ECEAE4;
  --ink:#16161A; --accent:#0891B2;
  --border:rgba(20,20,26,.10); --border-2:rgba(20,20,26,.25);
  --ease:cubic-bezier(.22,1,.36,1);
  --font:'Roboto',ui-sans-serif,system-ui,sans-serif;
  --display:'Poppins',sans-serif;
  --mono:'Roboto',ui-monospace,monospace;
  --max:1240px;
}
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--font);background:var(--base);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
ul{list-style:none;padding:0}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.font-display{font-family:var(--display)}
.mono{font-family:var(--mono)}
.container{max-width:var(--max);margin:0 auto;padding:0 2rem;width:100%}
@media(max-width:640px){.container{padding:0 1.25rem}}

/* noise */
.noise{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.035;mix-blend-mode:multiply;
 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")}

/* typography */
h1,h2,h3{font-family:var(--display);font-weight:600;letter-spacing:-.03em;line-height:1.02;color:var(--ink)}
.eyebrow{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.28em;color:var(--accent);display:inline-flex;align-items:center;gap:.75rem}
.eyebrow.line::before{content:"";width:32px;height:1px;background:var(--accent)}
.label{font-family:var(--mono);font-size:.65rem;text-transform:uppercase;letter-spacing:.2em;color:rgba(22,22,26,.35)}

/* buttons */
.btn-primary{display:inline-flex;align-items:center;gap:.6rem;background:var(--ink);color:#fff;border-radius:999px;padding:.9rem 1.75rem;font-size:.9rem;font-weight:600;transition:background .3s,transform .3s var(--ease)}
.btn-primary:hover{background:var(--accent);transform:translateY(-2px)}
.btn-primary svg{width:16px;height:16px;transition:transform .3s}
.btn-primary:hover svg{transform:translateX(4px)}
.link-arrow{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;font-size:.9rem;transition:color .3s}
.link-arrow:hover{color:var(--accent)}
.link-arrow svg{width:16px;height:16px;transition:transform .3s}
.link-arrow:hover svg{transform:translate(2px,-2px)}

/* placeholder */
.ph{position:relative;overflow:hidden;background:rgba(20,20,26,.03);border:1px solid var(--border);transition:border-color .5s}
.ph:hover{border-color:var(--border-2)}
.ph::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 40%,rgba(0,0,0,.04),transparent 62%)}
.ph .tick{position:absolute;width:16px;height:16px}
.ph .t1{left:16px;top:16px;border-left:1px solid var(--border-2);border-top:1px solid var(--border-2)}
.ph .t2{right:16px;top:16px;border-right:1px solid var(--border-2);border-top:1px solid var(--border-2)}
.ph .t3{left:16px;bottom:16px;border-left:1px solid var(--border-2);border-bottom:1px solid var(--border-2)}
.ph .t4{right:16px;bottom:16px;border-right:1px solid var(--border-2);border-bottom:1px solid var(--border-2)}
.ph-inner{position:relative;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.7rem;text-align:center;padding:2rem;z-index:1}
.ph-inner svg{width:28px;height:28px;color:rgba(22,22,26,.25);transition:transform .5s,color .5s}
.ph:hover .ph-inner svg{transform:scale(1.1);color:var(--accent)}
.ph-note{font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.28em;color:rgba(22,22,26,.4)}
.ph-label{font-family:var(--display);font-size:1.1rem;font-weight:500;letter-spacing:-.01em;color:rgba(22,22,26,.8)}
.ph-tag{font-size:.72rem;text-transform:uppercase;letter-spacing:.2em;color:rgba(22,22,26,.3)}

/* real product photography */
.product-image{position:relative;overflow:hidden;background:transparent;border:0;transition:transform .5s var(--ease)}
.product-image::after{content:"";position:absolute;inset:auto 0 0;height:28%;background:linear-gradient(transparent,rgba(8,145,178,.045));pointer-events:none}
.product-image img{width:100%;height:100%;object-fit:contain;padding:clamp(1rem,4vw,3.5rem);mix-blend-mode:multiply;transition:transform .65s var(--ease)}
.product-image:hover{border-color:var(--border-2)}
.product-image:hover img{transform:scale(1.045)}

/* hero */
.hero{position:relative;height:auto;min-height:640px;min-height:max(640px,100svh);overflow:hidden;background:#0b0f14;color:#fff}
.hero-bg{position:absolute;inset:-4%;background:#0b0f14}
.hero-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;filter:none;transform:scale(1.02);transition:opacity 1.1s cubic-bezier(.2,.6,.2,1);will-change:opacity,transform}
.hero-bg img.is-active{opacity:1;animation:heroKenBurns 7s ease-out forwards}
@keyframes heroKenBurns{from{transform:scale(1.02)}to{transform:scale(1.09)}}
.hero-ov1{position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,12,22,.9) 0%,rgba(7,12,22,.72) 42%,rgba(7,12,22,.24) 72%,rgba(7,12,22,.08) 100%)}
.hero-ov2{position:absolute;inset:0;background:linear-gradient(0deg,rgba(7,12,22,.48) 0%,transparent 42%),linear-gradient(180deg,rgba(7,12,22,.3) 0%,transparent 24%)}
.hero-inner{position:relative;z-index:10;height:100%;display:flex;align-items:center}
.hero-grid{display:grid;gap:2.5rem;align-items:center;width:100%;padding-top:5rem}
.hero-lead{position:relative;z-index:3;display:flex;min-width:0;flex-direction:column;align-items:flex-start}
.hero-diagram{position:relative;z-index:3;isolation:isolate;width:100%;max-width:570px;padding:1.75rem;border:1px solid rgba(255,255,255,.3);border-radius:20px;background:linear-gradient(145deg,rgba(7,12,22,.94),rgba(7,12,22,.82));box-shadow:0 20px 46px rgba(0,0,0,.24)}
.hero-diagram[hidden],.hero-application-visual[hidden],.hero-prod[hidden]{display:none!important}
.hero-application-visual{position:relative;z-index:3;width:100%;max-width:760px;margin:0;isolation:isolate}
.hero-application-visual img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 22px 30px rgba(0,0,0,.34))}
.hero-diagram .eyebrow{color:var(--accent)}
.hero-diagram-title{max-width:20ch;margin:1rem 0 0;color:#fff;font-family:var(--display);font-size:clamp(1.75rem,3vw,2.55rem);font-weight:700;letter-spacing:-.04em;line-height:1.02}
.hero-diagram-description{max-width:32rem;margin:1rem 0 0;color:rgba(255,255,255,.96);font-size:1.06rem;font-weight:500;line-height:1.66;text-shadow:0 1px 10px rgba(0,0,0,.26)}
.hero-diagram-flow{display:flex;flex-direction:column;gap:.6rem;margin:1.45rem 0 0;padding:0;list-style:none}
.hero-diagram-flow li{display:flex;flex-direction:column;align-items:flex-start;gap:.6rem}
.hero-diagram-step{display:inline-flex;align-items:center;min-height:2.8rem;padding:.68rem 1rem;border:1px solid rgba(255,255,255,.23);border-radius:10px;background:rgba(255,255,255,.08);color:#fff;font-family:var(--display);font-size:.98rem;font-weight:600;line-height:1.2;box-shadow:inset 0 1px rgba(255,255,255,.05)}
.hero-diagram-arrow{height:1.1rem;margin-left:1.25rem;color:var(--accent);font-size:1.15rem;font-weight:700;line-height:1}
.hero-series-title{max-width:13ch;font-family:var(--display);font-size:clamp(3rem,5.4vw,5rem);font-weight:700;letter-spacing:-.055em;line-height:.9;color:#fff;text-shadow:0 3px 28px rgba(0,0,0,.28)}
.hero-desc{margin-top:1.3rem;max-width:31rem;color:rgba(255,255,255,.82);font-size:1.02rem;line-height:1.7}
.hero .btn-primary{position:relative;z-index:6;margin-top:2.2rem;background:#fff;color:#0b0f14}
.hero .btn-primary:hover{background:var(--accent);color:#fff}
.hero .btn-primary.is-disabled{cursor:default;pointer-events:none;opacity:.78;box-shadow:none}
.hero--application .btn-primary svg{display:none}
.hero--application #heroCta{display:none!important}
.hero-prod{display:block;position:relative;z-index:2;width:min(72vw,330px);margin:1.75rem auto 0;pointer-events:none}
.hero-product-stage{position:relative;width:100%;aspect-ratio:4/5;isolation:isolate}
.hero-product-stage::after{position:absolute;z-index:0;right:8%;bottom:5%;left:8%;height:18%;content:"";border-radius:50%;background:radial-gradient(ellipse,rgba(0,0,0,.48) 0%,rgba(0,0,0,.2) 38%,transparent 72%);filter:blur(12px);pointer-events:none}
.hero-product-layer{position:absolute;z-index:1;inset:0;margin:0;opacity:0;transform:translateY(18px) scale(.92);transition:opacity 1.1s cubic-bezier(.2,.6,.2,1),transform 1.1s cubic-bezier(.16,1,.3,1);will-change:opacity,transform}
.hero-product-layer.is-active{opacity:1;transform:none}
.hero-product-layer img{width:100%;height:100%;object-fit:contain;padding:.25rem;transform:translateY(var(--hero-device-ground-y,0)) scale(var(--hero-device-scale,1.3));mix-blend-mode:normal;filter:drop-shadow(0 20px 28px rgba(0,0,0,.38))}
@media(min-width:1024px){
  .hero-inner>.container,.hero-ctrl{width:min(1680px,calc(100% - clamp(3rem,7vw,12rem)));max-width:none;padding-right:0;padding-left:0}
  .hero-grid{grid-template-columns:minmax(340px,1fr) minmax(260px,.72fr) minmax(410px,1.1fr);gap:clamp(1.5rem,2.6vw,3rem);align-items:stretch}
  .hero-lead{min-height:468px;padding-bottom:3rem;transform:none}
  .hero:not(.hero--application) .hero-inner{position:absolute;inset:0;height:auto;align-items:flex-start}
  .hero:not(.hero--application) .hero-grid{margin-top:0;padding-top:clamp(6.5rem,10vh,7.25rem);padding-bottom:0;align-items:start}
  .hero:not(.hero--application) :is(.hero-lead,.hero-side){align-self:start}
  /* Restore the desktop composition: product artwork sits to the left and below
     the series copy, while the short-viewport rule below keeps compact layouts safe. */
  .hero-prod{position:relative;z-index:4;align-self:end;justify-self:start;left:calc(clamp(-10rem,-10.5vw,-7.5rem) + var(--hero-product-offset,0px));bottom:3rem;width:min(100%,430px);margin:0;pointer-events:none}
  .hero-prod.fade{transform:translateY(20px)}
  .hero.play .hero-prod.fade{transform:none}
  .hero-product-stage{aspect-ratio:1}
  .hero-product-layer img{padding:0;transform:translateY(var(--hero-device-ground-y-desktop,var(--hero-device-ground-y,0))) scale(var(--hero-device-scale-desktop,var(--hero-device-scale,1.5)));filter:drop-shadow(0 28px 36px rgba(0,0,0,.4))}
  .hero--application .hero-inner{align-items:flex-start}
  .hero--application .hero-grid{grid-template-columns:minmax(340px,1fr) minmax(260px,.72fr) minmax(410px,1.1fr);gap:clamp(1.5rem,2.6vw,3rem);align-items:start;margin-top:clamp(1.5rem,3vh,2.2rem);padding-bottom:6rem}
  .hero--application .hero-lead{grid-column:1 / 3;min-height:0;padding-bottom:0}
  .hero--application .hero-application-visual{align-self:center;width:100%;max-width:940px;height:auto;margin:0;transform:translate(clamp(.5rem,1.6vw,1.5rem),clamp(.5rem,1.6vh,1rem))}
  .hero--application .hero-application-visual img{height:auto;object-fit:contain}
  .hero--application .hero-side{grid-column:3;min-height:0;align-self:start;justify-content:flex-start;padding-top:0}
  .hero--application .hero-side-top{max-width:36rem;transform:none}
  .hero--application .hero-series-title{max-width:11ch;font-size:clamp(4rem,6vw,6rem);font-style:normal;font-variant-ligatures:none;line-height:.88}
  .hero--application .hero-series-sub{max-width:35rem;margin-top:1.45rem;color:rgba(255,255,255,.9);font-size:clamp(1.08rem,1.3vw,1.25rem);line-height:1.7}
  .hero--application .hero-side>.btn-primary{align-self:flex-start;margin:1.5rem 0 0 1.25rem}
}
.hero-side{position:relative;z-index:3;display:flex;min-width:0;flex-direction:column;justify-content:space-between;gap:1.75rem}
.hero-side-top{max-width:38rem}
.hero-series-eyebrow{margin:0;color:var(--accent);font-family:var(--mono);font-size:.64rem;font-weight:700;letter-spacing:.25em;text-transform:uppercase}
.hero-series-sub{max-width:29rem;margin:1rem 0 0;color:rgba(255,255,255,.72);font-size:.9rem;line-height:1.65}
.hero-side-bottom{width:100%}
.hero-others-label{display:flex;align-items:center;gap:.7rem;margin-bottom:.65rem}
.hero-others-label span{font-family:var(--mono);font-size:.57rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.68);white-space:nowrap}
.hero-others-label i{display:block;flex:1;height:1px;background:rgba(255,255,255,.18)}
.hero-others{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.55rem}
.hero-other{position:relative;display:block;min-width:0;padding:.55rem;border:1px solid rgba(255,255,255,.18);border-radius:11px;background:rgba(7,12,22,.25);color:#fff;transition:transform .3s var(--ease),background .3s,border-color .3s}
.hero-other:hover{transform:translateY(-2px);border-color:var(--accent);background:rgba(255,255,255,.08)}
.hero-other:focus-visible{outline-color:var(--accent)}
.hero-other-thumb{display:block;aspect-ratio:4/3;margin-bottom:.5rem;overflow:hidden;border-radius:7px;background:rgba(255,255,255,.06)}
.hero-other-thumb img{width:100%;height:100%;object-fit:contain;transform:scale(var(--hero-card-device-scale,1.72));filter:drop-shadow(0 8px 10px rgba(0,0,0,.36))}
.hero-other-tag{display:block;min-height:1.3em;color:var(--accent);font-family:var(--mono);font-size:.5rem;letter-spacing:.13em;line-height:1.25;text-transform:uppercase}
.hero-other-name{display:-webkit-box;overflow:hidden;margin-top:.25rem;color:#fff;font-family:var(--display);font-size:.72rem;font-weight:600;letter-spacing:-.01em;line-height:1.18;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.hero-other-arrow{position:absolute;top:.35rem;right:.35rem;width:13px;height:13px;color:rgba(255,255,255,.55);transition:color .3s,transform .3s}
.hero-other:hover .hero-other-arrow{color:var(--accent);transform:translate(1px,-1px)}
@media(min-width:1024px){.hero-diagram{max-width:none}.hero-side{transform:none;text-align:left;min-height:468px}.hero-side-top{max-width:34rem}.hero-side-bottom{position:relative;z-index:5;width:100%;margin-bottom:4.75rem}.hero:not(.hero--application) .hero-side{position:relative;display:grid;grid-template-rows:clamp(28rem,54vh,32rem) auto;align-content:start;gap:0;min-height:0}.hero:not(.hero--application) .hero-side-top{align-self:start;min-height:0}.hero:not(.hero--application) .hero-series-eyebrow{font-size:.739rem}.hero:not(.hero--application) .hero-series-title{max-width:15ch;font-size:clamp(4.345rem,5.83vw,6rem);line-height:.92}.hero:not(.hero--application) .hero-series-sub{font-size:1.04rem}.hero:not(.hero--application) .hero-side-bottom{position:static;inset:auto;min-height:0;margin-bottom:0}.hero-others-label{flex-direction:row}.hero-others{text-align:left}}
@media (min-width:1024px) and (max-height:720px){
  .hero:not(.hero--application) .hero-inner{position:absolute;inset:0;height:auto;align-items:flex-start}
  .hero:not(.hero--application) .hero-grid{margin-top:0;padding-top:clamp(5.5rem,12vh,6.5rem);padding-bottom:0;align-items:start}
  .hero:not(.hero--application) .hero-lead{min-height:0;padding-bottom:0}
  .hero:not(.hero--application) .hero-prod{left:0;bottom:0;width:min(100%,340px);align-self:center;justify-self:center}
  .hero:not(.hero--application) .hero-side{display:grid;grid-template-rows:calc(100svh - 18.5rem) auto;align-content:start;min-height:0;gap:0}
  .hero:not(.hero--application) .hero-side-top{align-self:start}
  .hero:not(.hero--application) .hero-side-bottom{position:static;inset:auto;margin:0}
  .hero:not(.hero--application) .hero-series-eyebrow{font-size:.739rem}
  .hero:not(.hero--application) .hero-series-title{max-width:11ch;font-size:clamp(3.465rem,4.62vw,4.4rem);line-height:.92}
  .hero:not(.hero--application) .hero-series-sub{margin-top:.85rem;font-size:1.016rem;line-height:1.58}
  .hero:not(.hero--application) .hero-diagram{padding:1rem 1.15rem}
  .hero:not(.hero--application) .hero-diagram-title{margin-top:.7rem;font-size:clamp(1.55rem,2.2vw,2rem)}
  .hero:not(.hero--application) .hero-diagram-description{margin-top:.7rem;font-size:.9rem;line-height:1.5}
  .hero:not(.hero--application) .hero-diagram-flow{gap:.35rem;margin-top:.9rem}
  .hero:not(.hero--application) .hero-diagram-flow li{gap:.35rem}
  .hero:not(.hero--application) .hero-diagram-step{min-height:2.35rem;padding:.5rem .8rem;font-size:.9rem}
  .hero:not(.hero--application) .hero-diagram-arrow{height:.75rem}
  .hero:not(.hero--application) .btn-primary{margin-top:.5rem}
}
.hero-others[data-count="1"]{grid-template-columns:minmax(0,10.5rem);max-width:10.5rem}
.hero-others[data-count="2"]{grid-template-columns:repeat(2,minmax(0,10.5rem));max-width:21.55rem}
@media (min-width:641px) and (max-width:1023px){.hero-grid{display:grid;grid-template-columns:1fr;padding-bottom:5rem}.hero-side{display:contents}.hero-lead{order:1}.hero-side-top{order:2;max-width:640px;margin:0 auto}.hero-prod{order:3;position:relative;left:var(--hero-product-offset,0px);width:min(48vw,390px);justify-self:center}.hero-side-bottom{order:4;max-width:640px;margin:0 auto}.hero-product-stage{aspect-ratio:1}.hero--application .hero-grid{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:1.5rem;align-items:center}.hero--application .hero-lead{grid-column:auto;order:initial}.hero--application .hero-side{grid-column:auto;display:flex;order:initial;align-self:center;justify-content:center;margin:0}.hero--application .hero-side-top{max-width:none;margin:0;transform:none}.hero--application .hero-application-visual{width:104%;max-width:104%;height:auto;margin:0;transform:translate(.35rem,.5rem)}.hero--application .hero-application-visual img{height:auto;object-fit:contain}.hero--application .hero-series-title{font-style:normal;font-variant-ligatures:none}.hero--application .hero-side>.btn-primary{margin:1.25rem 0 0}}
.reveal-mask{overflow:hidden;display:block}
.reveal-mask>span{display:block;transform:translateY(110%);transition:transform .9s var(--ease)}
.hero.play .reveal-mask>span{transform:translateY(0)}
.hero .fade{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.hero.play .fade{opacity:1;transform:none}
.hero.play .fade.d1{transition-delay:.15s}
.hero.play .fade.d2{transition-delay:.3s}
.hero.play .fade.d3{transition-delay:.45s}
/* controls */
.hero-ctrl{position:absolute;left:0;right:0;bottom:2rem;z-index:20;display:flex;align-items:center;justify-content:center;pointer-events:none}
.dots{display:flex;gap:.6rem;pointer-events:auto}
.dot{position:relative;overflow:hidden;width:20px;height:8px;padding:0;border:0;border-radius:999px;background:rgba(255,255,255,.38);cursor:pointer;transition:width .5s var(--ease),background .3s}
.dot::before{position:absolute;inset:0;content:"";border-radius:inherit;background:var(--accent);transform:scaleX(0);transform-origin:left}
.dot:hover{background:rgba(255,255,255,.72)}
.dot.active{width:46px}
.dot.active::before{transform:scaleX(.04)}
.hero.is-progressing .dot.active::before{animation:heroSlideProgress 7s linear forwards}
.hero.is-progress-paused .dot.active::before{animation-play-state:paused}
@keyframes heroSlideProgress{to{transform:scaleX(1)}}
.arrows{position:absolute;right:0;display:flex;gap:.75rem;pointer-events:auto}
.arrow{width:44px;height:44px;padding:0;border:0;background:transparent;color:rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:color .25s var(--ease),transform .25s var(--ease)}
.arrow:hover{background:transparent;color:var(--accent)}
.arrow:focus-visible{outline:1px solid var(--accent);outline-offset:3px}
.arrow svg{width:26px;height:26px}
@media(min-width:641px){.hero-ctrl{inset:0;width:100%;max-width:none;padding:0}.dots{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%)}.arrows{display:contents}.arrow{position:absolute;top:50%;transform:translateY(-50%)}#prev{left:clamp(.5rem,1vw,1.25rem)}#next{right:clamp(.5rem,1vw,1.25rem)}#prev:hover{transform:translate(-2px,-50%)}#next:hover{transform:translate(2px,-50%)}}

@media(max-width:640px){
  .hero{height:auto;min-height:760px;touch-action:pan-y}
  .hero--application{min-height:max(760px,100svh)}
  .arrows{display:none}
  .hero-grid{display:grid;grid-template-columns:1fr;padding-top:7rem;padding-bottom:6rem}
  .hero-side{display:contents}
  .hero-lead{order:1}
  .hero-side-top{order:2}
  .hero-prod{order:3;width:min(70vw,300px);max-width:none;justify-self:center}
  .hero-side-bottom{order:4}
  .hero-product-stage{aspect-ratio:1}
  .hero-series-title{font-size:clamp(2.65rem,13vw,3.55rem)}
  .hero-desc{max-width:90%;font-size:1rem}
  .hero-diagram{width:100%;padding:1.3rem}
  .hero-diagram-title{font-size:clamp(1.55rem,8vw,2rem)}
  .hero-diagram-description{font-size:.98rem}
  .hero-diagram-step{min-height:2.5rem;font-size:.9rem}
  .hero-application-visual{width:100%;max-width:100%;height:auto;margin:0;transform:none}
  .hero-application-visual img{height:auto;object-fit:contain}
  .hero--application .btn-primary{margin-top:1.25rem}
  .hero-side{gap:1.5rem;margin-top:1rem}
  .hero-others{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hero-others[data-count="1"]{grid-template-columns:minmax(0,10.5rem);max-width:10.5rem}
  .hero-others[data-count="2"]{grid-template-columns:repeat(2,minmax(0,10.5rem));max-width:21.55rem}
}
@media (min-width:361px) and (max-width:640px){
  .hero-grid{grid-template-columns:minmax(0,68fr) minmax(0,32fr);column-gap:.5rem;row-gap:1.5rem;align-items:start}
  .hero-lead{display:contents}
  .hero-diagram{grid-column:1 / -1;grid-row:1;order:initial;max-width:none;min-width:0;padding:1rem}
  .hero-diagram>:is(.eyebrow,.hero-diagram-title,.hero-diagram-description){max-width:72%}
  .hero-diagram-flow{max-width:63%}
  .hero-prod{grid-column:2;grid-row:1;order:initial;z-index:5;left:0;width:calc(100% + 3.5rem);margin:calc(clamp(7rem,32vw,8rem) + 85px) 0 0;align-self:start;justify-self:end}
  .hero-prod .hero-product-layer img{transform:translateY(var(--hero-device-ground-y,0)) scale(calc(var(--hero-device-scale,1.3) + .18))}
  #heroCta{grid-column:1;grid-row:2;order:initial;justify-self:start;margin-top:0}
  .hero-side-top{grid-column:1 / -1;grid-row:3;order:initial}
  .hero-side-bottom{grid-column:1 / -1;grid-row:4;order:initial}
  .hero-diagram-title{font-size:clamp(1.25rem,5.8vw,1.55rem)}
  .hero-diagram-description{font-size:.86rem;line-height:1.48}
  .hero-diagram-flow{gap:.4rem;margin-top:.9rem}
  .hero-diagram-flow li{gap:.4rem}
  .hero-diagram-step{min-height:2.2rem;padding:.45rem .65rem;font-size:.78rem}
  .hero-diagram-arrow{height:.72rem;font-size:.95rem}
  .hero .btn-primary{margin-top:0;padding:.75rem 1rem;font-size:.8rem}
}

@media(prefers-reduced-motion:reduce){
  .hero-bg img,.hero-product-layer{transition:none!important;animation:none!important;transform:none!important}
}

/* sections */
.page-home main{display:flex;flex-direction:column}
.page-home #gruplar{order:1}
.page-home .context-faq{order:2}
section{position:relative}
.sec{padding:clamp(6rem,10vw,8rem) 0}
.sec-head{max-width:42rem;margin-bottom:clamp(3rem,6vw,6rem)}
.sec-head--flush{margin-bottom:0}
.sec-head h2{font-size:clamp(2rem,4vw,3rem);margin-top:1.25rem}
#gruplar .sec-head { max-width: none; }
#gruplar .sec-head h2 { white-space: nowrap; font-size: clamp(2rem, 3.35vw, 3rem); }
.divider-top{border-top:1px solid var(--border)}
.divider-bottom{border-bottom:1px solid var(--border)}

/* brand statement */
.brand h2{font-size:clamp(2.2rem,5vw,3.75rem);max-width:56rem;margin-top:2rem;line-height:1.05}
.brand h2 .mut{color:rgba(22,22,26,.4)}
.chapters{margin-top:5rem;display:grid;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:18px;overflow:hidden}
@media(min-width:768px){.chapters{grid-template-columns:repeat(3,1fr)}}
.chapter{background:var(--surface);padding:2.5rem}
.chapter .bar{display:block;height:1px;width:40px;background:var(--accent)}
.chapter h3{font-size:1.25rem;font-weight:500;margin-top:1.5rem;letter-spacing:-.01em}
.chapter p{margin-top:.75rem;font-size:.9rem;color:rgba(22,22,26,.55)}
.accent-line{display:block;height:1px;width:48px;background:var(--accent)}

/* product catalog gateways */
.catalog-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.25rem}
.catalog-card{display:flex;min-width:0;min-height:390px;flex-direction:column;overflow:hidden;border:1px solid var(--border);border-radius:18px;background:var(--surface);transition:transform .4s var(--ease),border-color .4s,box-shadow .4s}
.catalog-card:hover{transform:translateY(-6px);border-color:var(--border-2);box-shadow:0 18px 40px -24px rgba(22,22,26,.38)}
.catalog-card .product-image{display:grid;place-items:center;aspect-ratio:4/3;overflow:hidden;border-bottom:1px solid var(--border);padding:.4rem}
.catalog-card .product-image img{width:100%;height:100%;object-fit:contain;transform:scale(var(--catalog-device-scale,1));transition:transform .4s var(--ease)}
.catalog-card:hover .product-image img{transform:scale(calc(var(--catalog-device-scale,1) * 1.04))}
.catalog-card-copy{display:flex;flex:1;flex-direction:column;align-items:flex-start;padding:1.5rem}
.catalog-card h3{margin-top:.65rem;font-size:clamp(1.25rem,2vw,1.7rem);line-height:1.08}
.catalog-card .link-arrow{margin-top:auto;padding-top:1.5rem}
@media(max-width:900px){.catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.catalog-card .product-image img{transform:scale(var(--catalog-device-scale-compact,var(--catalog-device-scale,1)))}.catalog-card:hover .product-image img{transform:scale(var(--catalog-device-scale-compact,var(--catalog-device-scale,1)))}#gruplar .sec-head h2{white-space:normal}}
@media(max-width:560px){.catalog-grid{grid-template-columns:1fr}.catalog-card{min-height:0}.catalog-card .product-image{aspect-ratio:4/3}.catalog-card-copy{padding:1.25rem}.catalog-card .link-arrow{margin-top:1.1rem;padding-top:0}}

/* DMX learning */
.dmx-learning .sec-head { max-width: 820px; }
.dmx-learning .sec-head > p:last-child { max-width: 720px; margin: 1rem 0 0; color: var(--mut); line-height: 1.7; }
.dmx-learning-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-top: 2.25rem; }
.dmx-learning-card { min-height: 255px; padding: 1.45rem; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); }
.dmx-learning-card h3 { margin: 0 0 .75rem; font-size: clamp(1.1rem, 1.7vw, 1.35rem); line-height: 1.12; }
.dmx-learning-card p:last-child { margin: 0; color: var(--mut); font-size: .9rem; line-height: 1.65; }
.dmx-learning-flow { display: flex; align-items: center; justify-content: space-between; gap: .65rem; margin-top: 1.25rem; padding: 1.2rem 1.35rem; border: 1px solid var(--border); border-radius: 16px; background: linear-gradient(145deg, var(--dmx-home-card-surface-raised), var(--dmx-home-card-surface)); }
.dmx-learning-flow span { flex: 1; color: var(--ink); font-size: .82rem; font-weight: 700; text-align: center; }
.dmx-learning-flow b { color: var(--accent); font-size: 1.1rem; }
@media(max-width:900px){.dmx-learning-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dmx-learning-card{min-height:0}.dmx-learning-flow{flex-wrap:wrap}.dmx-learning-flow span{min-width:38%}}
@media(max-width:560px){.dmx-learning-grid{grid-template-columns:1fr}.dmx-learning-flow{display:grid;grid-template-columns:1fr auto;justify-items:start}.dmx-learning-flow span{min-width:0;text-align:left}.dmx-learning-flow b{transform:rotate(90deg)}.dmx-learning-flow b:last-child{display:none}}

/* Use cases */
.usecase-home-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}
.usecase-home-card{display:flex;min-width:0;flex-direction:column;overflow:hidden;color:var(--ink);text-decoration:none;border:1px solid var(--border);border-radius:18px;background:linear-gradient(145deg,var(--dmx-home-card-surface-raised),var(--dmx-home-card-surface));transition:transform .4s var(--ease),border-color .4s,box-shadow .4s}
.usecase-home-card:hover{transform:translateY(-6px);border-color:var(--border-2);box-shadow:0 18px 40px -24px rgba(0,0,0,.38)}
.usecase-home-card-visual{position:relative;display:block;aspect-ratio:4/3;margin:0;overflow:hidden;border-bottom:1px solid var(--border);background:var(--dmx-home-card-stage-base)}
.usecase-home-card-visual::after{position:absolute;inset:0;content:"";pointer-events:none;background:linear-gradient(180deg,rgba(28,28,28,.02),rgba(28,28,28,.24))}
.usecase-home-card-visual img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.82) contrast(1.04);transition:transform .6s var(--ease),filter .35s ease}
.usecase-home-card:hover .usecase-home-card-visual img{transform:scale(1.045);filter:saturate(.95) contrast(1.06)}
.usecase-home-card-copy{display:flex;flex:1;flex-direction:column;align-items:flex-start;padding:1.5rem;background:var(--dmx-home-card-surface)}
.usecase-home-card-eyebrow{margin:0;color:var(--accent);font-size:.67rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.usecase-home-card h3{margin:.65rem 0 0;color:var(--ink);font-size:clamp(1.25rem,2vw,1.7rem);line-height:1.08}
.usecase-home-card-copy>p:not(.usecase-home-card-eyebrow){margin:.75rem 0 0;color:var(--mut);font-size:.88rem;line-height:1.65}
.usecase-home-card .link-arrow{margin-top:auto;padding-top:1.4rem}
@media(max-width:900px){.usecase-home-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.usecase-home-grid{grid-template-columns:1fr}}

/* scroll reveal */
[data-reveal]{opacity:0;transform:translateY(40px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
[data-reveal].in{opacity:1;transform:none}
.reveal-delay-0{transition-delay:0s}
.reveal-delay-1{transition-delay:.1s}
.reveal-delay-2{transition-delay:.2s}
.reveal-delay-3{transition-delay:.3s}
.reveal-delay-4{transition-delay:.4s}
.reveal-delay-5{transition-delay:.5s}

@media(prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}
  .hero .fade{opacity:1!important;transform:none!important}
  .reveal-mask>span{transform:none!important}
  html{scroll-behavior:auto}
}