@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(../fonts/geist-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(../fonts/geist-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/instrument-serif-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/instrument-serif-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Metric-matched fallback for Geist (Arial per weight band with Geist's widths and line metrics, measured in
   Chromium: Geist/Arial width 400 1.008, 500 1.034, 600 vs Arial Bold 0.998, 700 1.021; ascent 1005 / descent 295):
   the first paint uses it (the web fonts load right after it) and the swap does not reflow lines. */
@font-face{font-family:'Geist Fallback';font-style:normal;font-weight:100 449;src:local('Arial'),local('ArialMT'),local('Liberation Sans');size-adjust:100.8%;ascent-override:99.7%;descent-override:29.3%;line-gap-override:0%}
@font-face{font-family:'Geist Fallback';font-style:normal;font-weight:450 549;src:local('Arial'),local('ArialMT'),local('Liberation Sans');size-adjust:103.4%;ascent-override:97.2%;descent-override:28.5%;line-gap-override:0%}
@font-face{font-family:'Geist Fallback';font-style:normal;font-weight:550 649;src:local('Arial Bold'),local('Arial-BoldMT'),local('Liberation Sans Bold');size-adjust:99.8%;ascent-override:100.7%;descent-override:29.6%;line-gap-override:0%}
@font-face{font-family:'Geist Fallback';font-style:normal;font-weight:650 1000;src:local('Arial Bold'),local('Arial-BoldMT'),local('Liberation Sans Bold');size-adjust:102.1%;ascent-override:98.4%;descent-override:28.9%;line-gap-override:0%}
:root{--font-sans:'Geist','Geist Fallback',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif}
/* Metric-matched fallback for the serif accent words: until Instrument Serif arrives the text keeps the same width and
   line height, so the swap does not reflow the heads (it caused CLS 0.12-0.18 on mobile). Measured in Chromium:
   Instrument Serif italic is 87.3 % of Times New Roman italic; ascent 990, descent 310 per 1000 units. */
@font-face {
  font-family: 'Instrument Serif Fallback';
  font-style: italic;
  src: local('Times New Roman Italic'), local('TimesNewRomanPS-ItalicMT'), local('Times-Italic');
  size-adjust: 87.3%;
  ascent-override: 113.4%;
  descent-override: 35.5%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Instrument Serif Fallback';
  font-style: normal;
  src: local('Times New Roman'), local('TimesNewRomanPSMT'), local('Times-Roman');
  ascent-override: 99%;
  descent-override: 31%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/instrument-serif-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/instrument-serif-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}



@property --ang{syntax:'<angle>';inherits:false;initial-value:0deg}
@property --n{syntax:'<integer>';inherits:false;initial-value:0}
.dg *{box-sizing:border-box}
/* speed: the page sections after the first one are styled, laid out and painted only when they come
   near the viewport; this keeps the work after the first paint (full stylesheets arriving, fonts) small */
.column.main > section ~ section,.column.main > section.sp > section ~ section,.column.main > section.sp > section ~ .sp-light{content-visibility:auto;contain-intrinsic-size:auto 900px}
.dg{overflow-x:clip;-webkit-font-smoothing:antialiased}
.serif{font-family:'Instrument Serif','Instrument Serif Fallback',Georgia,'Times New Roman',serif;font-style:italic;font-weight:400;letter-spacing:-0.01em}
.wrap{max-width:1240px;margin:0 auto;padding:0 24px}
.eyebrow{font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.nav-link{text-decoration:none;color:#c7c7cc;font-size:14px;transition:color .2s}
.nav-link:hover{color:#ffffff}
.dg-btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 24px;border-radius:999px;font-size:15px;font-weight:500;text-decoration:none;transition:transform .35s cubic-bezier(.2,.7,.1,1),background-color .25s,color .25s,box-shadow .35s}
.dg-btn:hover{transform:translateY(-2px)}
.dg-btn svg{transition:transform .35s cubic-bezier(.2,.7,.1,1)}
.dg-btn:hover svg{transform:translateX(4px)}
.btn-glow{box-shadow:0 0 0 0 transparent,0 10px 30px -10px var(--accent)}
.btn-glow:hover{box-shadow:0 0 0 6px color-mix(in oklab,var(--accent) 22%,transparent),0 16px 40px -12px var(--accent)}
.line{display:block;padding-bottom:.12em;clip-path:inset(-0.6em -0.8em -0.3em -0.8em)}
.line > span{display:inline-block;padding:0 .1em 0 0}

/* hero */
.hero-grid{position:relative;display:block}
.hero-link{color:#f5f4f1;text-decoration:underline;text-decoration-color:color-mix(in oklab,var(--accent) 70%,transparent);text-underline-offset:4px;text-decoration-thickness:1.5px}
.hero-link:hover{color:var(--accent)}
.hero-copy{display:flex;flex-direction:column;align-items:flex-start;gap:28px;text-align:left;padding:40px 0;max-width:820px}
.hero-copy > p{max-width:540px !important}
.gl-wrap{position:absolute;right:64px;top:-34px;width:300px;height:90px;z-index:3;pointer-events:none}
.hero-gl{position:absolute;left:0;right:0;top:0;height:1057px;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,#000 80%,transparent 99%);mask-image:linear-gradient(180deg,#000 80%,transparent 99%)}
.hero-gl canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

/* cards with cursor spotlight */
.spot{position:relative;isolation:isolate}
.spot::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;opacity:0;transition:opacity .4s;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),color-mix(in oklab,var(--accent) 16%,transparent),transparent 60%)}
.spot:hover::before{opacity:1}

/* references */
.ref-row{display:flex;gap:20px;width:max-content;padding:0 24px}
.ref-card{width:520px;flex:none}
.rows-clip{overflow-x:auto;scrollbar-width:none}
.rows-clip::-webkit-scrollbar{display:none}

/* why */
.why{display:flex;flex-wrap:wrap;gap:64px;align-items:flex-start}
.why-left{flex:1 1 380px;position:sticky;top:96px}
.why-right{flex:999 1 520px;min-width:0;position:relative}
/* the reasons open one at a time while scrolling; a line on the left fills up as you go */
.why-right::before{content:"";position:absolute;left:-28px;top:0;bottom:0;width:2px;border-radius:2px;background:rgba(245,244,241,.1)}
.why-right::after{content:"";position:absolute;left:-28px;top:0;width:2px;height:calc(var(--why,0) * 100%);border-radius:2px;background:var(--accent);box-shadow:0 0 12px var(--accent);transition:height .6s cubic-bezier(.2,.7,.1,1)}
.why-t{all:unset;cursor:pointer;font-size:clamp(24px,2.4vw,32px);font-weight:600;letter-spacing:-0.03em;line-height:1.1;color:#6e6e73;transition:color .4s}
.why-t:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.why-li:hover .why-t{color:#c7c7cc}
.why-n{transition:transform .6s cubic-bezier(.2,.7,.1,1),opacity .4s;opacity:.45;transform-origin:0 50%}
.why-x{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s cubic-bezier(.2,.7,.1,1),opacity .5s;opacity:0}
.why-x > span{overflow:hidden}
.why-li{transition:padding .5s}
.why-li.on .why-t{color:#f5f4f1}
.why-li.on .why-n{opacity:1;transform:scale(1.9)}
.why-li.on .why-x{grid-template-rows:1fr;opacity:1}
.dg:not(.motion) .why-x{grid-template-rows:1fr;opacity:1}
/* phones: the progress line runs down the right edge (the left one would be off screen), the number grows less */
@media (max-width: 760px){.why-right::before,.why-right::after{left:auto;right:-12px}.why-li.on .why-n{transform:scale(1.25)}}
.portrait{position:relative;max-width:380px;aspect-ratio:486/540;border-radius:28px;overflow:hidden;background:radial-gradient(90% 70% at 50% 28%,#34343a 0%,#1a1a1d 55%,#0f0f11 100%)}
.portrait::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(245,244,241,.1)}

/* configurator */

/* module feed */

/* blog */
.post{text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:18px}
.post .ph{overflow:hidden;border-radius:22px;background:#1c1c1f}
.post .ph img{transition:transform 1s cubic-bezier(.2,.7,.1,1)}
.post:hover .ph img{transform:scale(1.05)}
.blog-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:40px}
.toast{position:absolute;right:0;top:0;pointer-events:auto;z-index:2;display:flex;align-items:center;gap:12px;min-width:270px;padding:12px 16px 12px 12px;border-radius:18px;background:rgba(28,28,30,.66);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(245,244,241,.12);box-shadow:0 24px 48px -18px rgba(0,0,0,.75)}
.toast .ti{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;flex:none;background:var(--accent);color:#0a0a0b}

.foot-link{text-decoration:none;color:#c7c7cc;font-size:15.5px;line-height:1.4;transition:color .2s}
.foot-link:hover{color:#f5f4f1}


.nav-btn{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;border:0;border-radius:999px;background:transparent;color:#c7c7cc;font:500 14px 'Geist','Geist Fallback',ui-sans-serif,system-ui,sans-serif;text-decoration:none;cursor:pointer;transition:background-color .2s,color .2s}
.nav-btn:hover{background:rgba(245,244,241,.08);color:#ffffff}
.nav-btn.on{background:#f5f4f1;color:#0a0a0b}
.nav-btn svg{transition:transform .3s}
.nav-btn.on svg{transform:rotate(180deg)}
.show-m{display:none !important}
.langs{display:flex;gap:4px;padding:4px;border-radius:999px;border:1px solid rgba(245,244,241,.12)}
.lang{display:grid;place-items:center;width:36px;height:30px;border-radius:999px;opacity:.55;transition:opacity .2s,background-color .2s}
.lang svg{border-radius:3px;display:block}
.lang:hover,.lang.on{opacity:1;background:rgba(245,244,241,.1)}
@keyframes megaIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.demo{position:relative;padding:4px 0 8px}
.dlist{position:relative;height:292px;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18px,#000 calc(100% - 46px),transparent);mask-image:linear-gradient(180deg,transparent 0,#000 18px,#000 calc(100% - 46px),transparent)}
.dtrack{display:flex;flex-direction:column;gap:8px;padding-right:14px;transition:transform .8s cubic-bezier(.6,0,.2,1)}
.dbtn{white-space:nowrap}
.dcount{display:inline-grid;place-items:center;min-width:24px;height:24px;margin-left:10px;padding:0 7px;border-radius:999px;background:#0a0a0b;color:#ffffff;font-size:13px;font-weight:700;vertical-align:middle}
.dbar{position:absolute;right:2px;width:4px;border-radius:4px;background:rgba(245,244,241,.28);transition:top .8s cubic-bezier(.6,0,.2,1)}
.drow{display:flex;align-items:center;gap:12px;height:52px;padding:0 16px;border-radius:14px;border:1px solid rgba(245,244,241,.1);background:rgba(245,244,241,.02);color:#d1d1d6;font-size:15px;transition:background-color .35s,border-color .35s,color .35s}
.drow .box{width:20px;height:20px;border-radius:6px;border:1.5px solid rgba(245,244,241,.4);display:grid;place-items:center;color:transparent;transition:all .3s}
.drow.on{border-color:color-mix(in oklab,var(--accent) 60%,transparent);background:color-mix(in oklab,var(--accent) 12%,transparent);color:#ffffff}
.drow.on .box{background:var(--accent);border-color:var(--accent);color:#0a0a0b}
.dbtn{margin-top:16px;height:52px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:var(--accent);color:#0a0a0b;font-weight:600;transition:transform .2s,filter .2s}
.dbtn.press{transform:scale(.96);filter:brightness(.9)}
.dcursor{position:absolute;z-index:3;width:22px;height:22px;transition:top .7s cubic-bezier(.6,0,.2,1),left .7s cubic-bezier(.6,0,.2,1),opacity .3s;filter:drop-shadow(0 4px 8px rgba(0,0,0,.5))}
.dcursor .dg-ring{position:absolute;left:-12px;top:-12px;width:28px;height:28px;border-radius:50%;border:2px solid var(--accent);opacity:0;transform:scale(.4)}
.dcursor .dg-ring.go{animation:ripple .5s ease-out}
@keyframes ripple{0%{opacity:1;transform:scale(.4)}100%{opacity:0;transform:scale(1.6)}}
.dresult{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;border-radius:18px;background:rgba(16,16,18,.94);opacity:0;transform:scale(.96);pointer-events:none;transition:opacity .45s,transform .45s}
.dresult.show{opacity:1;transform:none}
.dcursor.hid{opacity:0}
.know-stat{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:10px;padding:32px;border-radius:28px;background:#141416;border:1px solid rgba(245,244,241,.08);text-decoration:none;color:#f5f4f1}
.asm-sec{position:relative;padding:60px 0 120px}
.asm-stage{max-width:1100px;margin:56px auto 0;padding:0 24px;perspective:1800px}
.asm-page{position:relative;border-radius:22px;background:#ffffff;color:#0a0a0b;padding:0;box-shadow:0 60px 120px -50px rgba(0,0,0,.9),0 0 0 1px rgba(245,244,241,.1);transform-style:preserve-3d}
.part{position:relative;background:#ffffff}
.part .tag{position:absolute;left:12px;top:-15px;z-index:2;padding:4px 10px;border-radius:999px;background:#0a0a0b;color:#f5f4f1;font-size:12px;font-weight:600;white-space:nowrap;opacity:0;box-shadow:0 6px 16px -6px rgba(0,0,0,.6)}
.part .tag::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-right:6px;vertical-align:1px}
.sk{display:block;height:9px;border-radius:5px;background:#e8e6e1}
.asm-done{position:absolute;right:18px;bottom:-22px;z-index:5;display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;background:var(--accent);color:#0a0a0b;font-weight:600;font-size:14px;opacity:0;box-shadow:0 16px 32px -12px rgba(0,0,0,.6)}
@keyframes asm{from{transform:translate3d(var(--tx),var(--ty),var(--tz)) rotateX(var(--rx)) rotateZ(var(--rz));box-shadow:0 30px 60px -20px rgba(0,0,0,.45)}to{transform:none;box-shadow:0 0 0 rgba(0,0,0,0)}}
@keyframes asmM{from{transform:translate3d(calc(var(--tx) * .32),calc(var(--ty) * .45 + 60px),0) rotateZ(var(--rz));opacity:.15;box-shadow:0 30px 60px -20px rgba(0,0,0,.45)}to{transform:none;opacity:1;box-shadow:0 0 0 rgba(0,0,0,0)}}
@keyframes asmPage{from{transform:rotateX(24deg) rotateZ(-4deg) scale(.82);background-color:rgba(255,255,255,0)}60%{background-color:rgba(255,255,255,0)}to{transform:none;background-color:#ffffff}}
@keyframes tagOut{from{opacity:1}to{opacity:0}}
@keyframes doneIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.lang-dd{position:relative}
.hdr-ic{display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:999px;background:transparent;color:#ffffff;cursor:pointer;transition:background-color .25s}
.hdr-ic:hover,.hdr-ic[aria-expanded="true"]{background:rgba(245,244,241,.1)}
.lang-menu.ct-menu{min-width:300px}
.ct-menu .lang-item{align-items:flex-start;gap:14px;padding:12px 14px}
.ct-menu .lang-item > svg{flex:none;margin-top:2px;color:var(--accent,#f26322)}
.ct-t{display:flex;flex-direction:column;gap:2px;line-height:1.3}
.ct-t strong{font-weight:600;font-size:15px}
.ct-t span{font-size:13px;color:#8e8e93;font-weight:400}
.hdr-acc{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px 0 12px;border-radius:999px;color:#ffffff;font:500 16px/1 'Geist','Geist Fallback',ui-sans-serif,system-ui,sans-serif;text-decoration:none;transition:background-color .25s}
.hdr-acc:hover{background:rgba(245,244,241,.1)}
.hdr-acc svg{flex:none;display:block}
.hdr-sep{width:1px;height:22px;background:rgba(245,244,241,.16);margin:0 4px}
.hdr-cart{position:relative;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;color:#ffffff;text-decoration:none;background:transparent;animation:cartIn .6s cubic-bezier(.3,1.5,.5,1) both;transition:background-color .25s}
.hdr-cart:hover{background:rgba(245,244,241,.1)}
.hdr-badge{position:absolute;right:0;top:1px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;display:grid;place-items:center;background:var(--accent,#f26322);color:#0a0a0b;font:700 11px/1 'Geist','Geist Fallback',ui-sans-serif,system-ui,sans-serif;box-shadow:0 0 0 2px #0a0a0b;animation:badgePop .5s cubic-bezier(.3,1.8,.5,1) .35s both}
@keyframes cartIn{from{opacity:0;transform:scale(.4) rotate(-20deg)}to{opacity:1;transform:none}}
@keyframes badgePop{from{transform:scale(0)}to{transform:scale(1)}}
@media (max-width: 900px){.hdr-acc{width:40px;padding:0;justify-content:center}}
.lang-btn{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 6px;border:0;background:none;color:#c7c7cc;cursor:pointer;border-radius:10px}
.lang-btn svg:first-child{border-radius:3px;display:block}
.lang-btn:hover{color:#ffffff}
.lang-menu{position:absolute;right:0;top:calc(100% + 10px);min-width:190px;padding:6px;border-radius:16px;background:#f5f4f1;box-shadow:0 30px 60px -20px rgba(0,0,0,.7);animation:megaIn .3s cubic-bezier(.2,.7,.1,1) both;z-index:60}
.lang-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;color:#0a0a0b;font-size:14px;font-weight:500;text-decoration:none}
.lang-item svg{border-radius:3px}
.lang-item:hover,.lang-item.on{background:#e8e6e1}
.nav-cfg{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 20px 0 16px;border-radius:999px;background:var(--accent);color:#0a0a0b;font-size:14px;font-weight:700;text-decoration:none;box-shadow:0 10px 28px -10px var(--accent),inset 0 1px 0 rgba(255,255,255,.4);transition:transform .3s cubic-bezier(.2,.7,.1,1),box-shadow .3s}
.nav-cfg:hover{transform:translateY(-1px);box-shadow:0 0 0 5px color-mix(in oklab,var(--accent) 22%,transparent),0 14px 34px -10px var(--accent),inset 0 1px 0 rgba(255,255,255,.4)}
.nav-cfg::after,.cta-main::before{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);transform:skewX(-20deg);pointer-events:none}
.motion .nav-cfg::after{animation:shine 4.5s ease-in-out 3s infinite}
.motion .cta-main::before{animation:shine 3.8s ease-in-out 1.8s infinite}
@keyframes shine{0%,70%{left:-60%}100%{left:130%}}
.cta-main{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;gap:16px;height:62px;padding:0 8px 0 28px;border-radius:999px;background:var(--accent);color:#0a0a0b;font-size:16px;font-weight:700;text-decoration:none;box-shadow:0 18px 44px -14px var(--accent),inset 0 1px 0 rgba(255,255,255,.4),inset 0 -2px 0 rgba(0,0,0,.12);transition:transform .45s cubic-bezier(.2,.7,.1,1),box-shadow .45s,color .35s}
.cta-main::after{content:"";position:absolute;right:8px;top:50%;width:46px;height:46px;margin-top:-23px;border-radius:50%;background:#0a0a0b;z-index:-1;transform:scale(1);transition:transform .6s cubic-bezier(.7,0,.2,1)}
.cta-main:hover{color:#ffffff;box-shadow:0 0 0 6px color-mix(in oklab,var(--accent) 20%,transparent),0 24px 50px -14px var(--accent)}
.cta-main:hover::after{transform:scale(9)}
.cta-ico{position:relative;width:46px;height:46px;border-radius:50%;overflow:hidden;color:var(--accent);display:grid;place-items:center;transition:transform .4s cubic-bezier(.2,.7,.1,1)}
.cta-ico .a1,.cta-ico .a2{position:absolute;inset:0;display:grid;place-items:center;transition:transform .45s cubic-bezier(.7,0,.2,1)}
.cta-ico .a2{transform:translateX(-120%)}
.cta-main:hover .a1{transform:translateX(120%)}
.cta-main:hover .a2{transform:none}
.cta-label{position:relative;z-index:1}
.ref-fan{position:relative;display:inline-flex}
.ref-btn{position:relative;z-index:2;min-height:62px;padding:0 28px;background:rgba(245,244,241,.05);color:#f5f4f1;border:1px solid rgba(245,244,241,.24);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.ref-btn:hover{border-color:rgba(245,244,241,.6);background:rgba(245,244,241,.1)}
.fan{position:absolute;left:50%;top:50%;z-index:1;width:190px;aspect-ratio:16/10;object-fit:cover;object-position:top;border-radius:12px;box-shadow:0 24px 48px -14px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.14);opacity:0;transform:translate(-50%,-50%) scale(.4) rotate(0deg);transition:transform .65s cubic-bezier(.2,.9,.25,1.15),opacity .3s;pointer-events:none}
.ref-fan:hover .fan{opacity:1}
.ref-fan:hover .f1{transform:translate(calc(-50% - 175px),calc(-50% - 118px)) rotate(-13deg)}
.ref-fan:hover .f2{transform:translate(-50%,calc(-50% - 150px)) rotate(-2deg);transition-delay:.05s}
.ref-fan:hover .f3{transform:translate(calc(-50% + 175px),calc(-50% - 118px)) rotate(11deg);transition-delay:.1s}
.toast{opacity:0;transform:translateY(14px) scale(.97);transition:opacity .5s,transform .6s cubic-bezier(.2,.7,.1,1)}
.toast.show{opacity:1;transform:none}
.toast.show.p1{opacity:.72;transform:translateY(-70px) scale(.96)}
.toast.show.p2{opacity:.38;transform:translateY(-140px) scale(.92)}
.toast.gone{opacity:0;transform:translateY(-200px) scale(.88)}
@media (max-width: 960px){
  .hero-dev{margin-top:150px !important}
  .gl-wrap{display:block !important;right:40px;top:-46px;width:220px;height:60px}
  .toast{min-width:0;width:220px;padding:8px 10px 8px 8px;gap:8px;border-radius:14px}
  .toast .ti{width:28px;height:28px;border-radius:8px}
  .toast .ti svg{width:14px;height:14px}
  .toast strong{font-size:12px !important}
  .toast span span{font-size:11px !important}
  .toast > span:last-child{display:none}
  .toast.show.p1{transform:translateY(-54px) scale(.96)}
  .toast.show.p2{transform:translateY(-108px) scale(.92)}
}
.screen,.screen *{-webkit-text-size-adjust:none;text-size-adjust:none}
.drawer span{white-space:nowrap;overflow:hidden;text-overflow:clip}
.screen{position:relative;container-type:inline-size;aspect-ratio:16/10;overflow:hidden;border-radius:12px;background:#ffffff}
.scr{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;transform:scale(1.015);transition:opacity .55s ease,transform .9s cubic-bezier(.2,.7,.1,1)}
.scr.on{opacity:1;transform:none}
.atc-hl{position:absolute;left:65.2%;top:81.6%;width:12.2%;height:5.8%;border-radius:999px;background:rgba(0,0,0,.18);opacity:0;transition:opacity .2s}
.atc-hl.on{opacity:1}
.cart-badge{position:absolute;left:92.1%;top:6%;width:1.6cqw;height:1.6cqw;border-radius:50%;display:grid;place-items:center;background:#00866b;color:#ffffff;font-size:1cqw;font-weight:700;transform:scale(0);transition:transform .45s cubic-bezier(.3,1.7,.5,1)}
.cart-badge.show{transform:none}
.drawer-bd{position:absolute;inset:0;background:rgba(10,10,11,.38);opacity:0;transition:opacity .45s}
.drawer-bd.open{opacity:1}
.drawer{position:absolute;top:0;right:0;bottom:0;width:31%;display:flex;flex-direction:column;gap:1.3cqw;padding:2.2cqw 1.8cqw;background:#ffffff;color:#0a0a0b;box-shadow:-2cqw 0 4cqw rgba(0,0,0,.25);transform:translateX(105%);transition:transform .6s cubic-bezier(.2,.7,.1,1)}
.drawer.open{transform:none}
.dg-success{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.2cqw;text-align:center;background:rgba(255,255,255,.95);opacity:0;transform:scale(1.04);transition:opacity .5s,transform .6s cubic-bezier(.2,.7,.1,1)}
.dg-success.show{opacity:1;transform:none}
.ok-ring{width:7cqw;height:7cqw;border-radius:50%;display:grid;place-items:center;background:#1e8e3e;color:#ffffff;transform:scale(.4);transition:transform .6s cubic-bezier(.3,1.7,.5,1) .1s}
.ok-ring svg{width:55%;height:55%}
.dg-success.show .ok-ring{transform:none}
.jcursor{position:absolute;z-index:5;width:2.1cqw;height:2.1cqw;margin:-.2cqw 0 0 -.2cqw;transition:left .9s cubic-bezier(.6,0,.2,1),top .9s cubic-bezier(.6,0,.2,1),opacity .3s;filter:drop-shadow(0 .3cqw .6cqw rgba(0,0,0,.4))}
.jcursor svg{width:100%;height:100%;display:block}
.jcursor.hid{opacity:0}
.jcursor .dg-ring{position:absolute;left:-1.1cqw;top:-1.1cqw;width:2.6cqw;height:2.6cqw;border-radius:50%;border:2px solid var(--accent);opacity:0}
.jcursor .dg-ring.go{animation:ripple .5s ease-out}
.logos{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:30px 60px;max-width:1120px}
.clogo{display:block;width:auto;opacity:.5;transition:opacity .35s,transform .35s}
.clogo:hover{opacity:1;transform:translateY(-2px)}
.integ{display:flex;flex-direction:column;align-items:center;gap:36px;width:calc(100% - 48px);max-width:1192px;margin-top:36px;padding-top:40px;border-top:1px solid rgba(245,244,241,.08)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:1px;background:rgba(245,244,241,.1);border-radius:28px;overflow:hidden}
.stat{background:#0a0a0b;padding:40px 32px;display:flex;flex-direction:column;gap:10px;min-height:300px}
.stat-n{font-size:clamp(56px,6vw,84px);font-weight:600;letter-spacing:-0.05em;line-height:1;font-variant-numeric:tabular-nums}
.stat-l{color:#a1a1a6}
.bars{display:flex;align-items:flex-end;gap:4px;height:60px;margin-top:auto}
.bars i{flex:1;height:var(--h);border-radius:3px;background:color-mix(in oklab,var(--accent) calc(var(--i) * 6.5%),#2a2a2e);transform-origin:bottom}
.cells{display:grid;grid-template-columns:repeat(20,minmax(0,1fr));gap:3px;margin-top:auto}
.cells i{aspect-ratio:1/1;border-radius:2px;background:var(--accent)}
.stars{display:flex;gap:6px;margin-top:auto;color:var(--accent)}
.st{position:relative;display:inline-block}
.st svg{display:block}
.st::after{content:"";position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px;border-radius:50%;opacity:0;box-shadow:0 -20px 0 #ffd08a,17px -10px 0 #ffd08a,17px 10px 0 #ffd08a,0 20px 0 #ffd08a,-17px 10px 0 #ffd08a,-17px -10px 0 #ffd08a}
.tl{position:relative;display:block;height:56px;margin-top:auto}
.tl-line{position:absolute;left:0;right:0;top:12px;height:2px;border-radius:2px;background:linear-gradient(90deg,#2a2a2e,var(--accent));transform-origin:left}
.tl-dot{position:absolute;top:7px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:#0a0a0b;border:2px solid var(--accent)}
.tl-y{position:absolute;top:20px;left:50%;transform:translateX(-50%);font-size:12px;color:#8e8e93;white-space:nowrap}
.motion .bars i{transform:scaleY(0);transition:transform .8s cubic-bezier(.2,.7,.1,1) calc(var(--i) * 140ms)}
.motion .go .bars i{transform:none}
.motion .cells i{background:#232326;transition:background-color .3s calc(var(--i) * 22ms),transform .3s calc(var(--i) * 22ms);transform:scale(.6)}
.motion .go .cells i{background:var(--accent);transform:none}
.motion .st{transform:scale(0) rotate(-50deg);opacity:0}
.motion .go .st{animation:starPop .7s cubic-bezier(.3,1.7,.5,1) calc(.3s + var(--i) * 160ms) both,twinkle 4.5s ease-in-out calc(2s + var(--i) * 700ms) infinite}
.motion .go .st::after{animation:burst .8s ease-out calc(.5s + var(--i) * 160ms) both}
@keyframes starPop{to{transform:none;opacity:1}}
@keyframes twinkle{0%,88%,100%{filter:none}92%{filter:brightness(1.6) drop-shadow(0 0 8px #ffb36b)}}
@keyframes burst{0%{opacity:1;transform:scale(.3)}100%{opacity:0;transform:scale(1.5)}}
.motion .tl-line{transform:scaleX(0);transition:transform 1.6s cubic-bezier(.2,.7,.1,1)}
.motion .go .tl-line{transform:none}
.motion .tl-dot{opacity:0;transform:scale(.3);transition:opacity .3s calc(var(--i) * 320ms),transform .5s cubic-bezier(.3,1.7,.5,1) calc(var(--i) * 320ms)}
.motion .go .tl-dot{opacity:1;transform:none}

.hdr{position:sticky;top:0;z-index:50;background:rgba(10,10,11,.72);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid rgba(245,244,241,.08);transition:background-color .3s}
.hdr.open{background:rgba(10,10,11,.92)}
.hdr-shine{position:absolute;left:0;right:0;top:0;height:77px;overflow:hidden;pointer-events:none;z-index:2}
.hdr-shine::before{content:"";position:absolute;top:-20px;bottom:-20px;left:0;width:240px;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.07) 40%,rgba(255,236,220,.16) 50%,rgba(255,255,255,.07) 60%,rgba(255,255,255,0));transform:translateX(-300px) skewX(-24deg);mix-blend-mode:screen;animation:hdrShine 11s cubic-bezier(.45,0,.2,1) 2.5s infinite}
.hdr-shine::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:320px;background:linear-gradient(90deg,transparent,rgba(242,99,34,.9),rgba(255,230,210,.95),rgba(242,99,34,.9),transparent);transform:translateX(-340px);animation:hdrShine 11s cubic-bezier(.45,0,.2,1) 2.62s infinite}
@keyframes hdrShine{0%{translate:0 0}16%,100%{translate:calc(100vw + 680px) 0}}
@media (prefers-reduced-motion: reduce){.hdr-shine{display:none}}
.hdr-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:76px}
.hdr-logo{display:flex;align-items:center;color:#f5f4f1;text-decoration:none}
.hdr-links{position:relative;display:flex;align-items:stretch;align-self:stretch;gap:2px}
.hlink{position:relative;z-index:1;display:inline-flex;align-items:center;min-height:40px;padding:0 20px;border:0;background:none;color:#ffffff;font:500 16px 'Geist','Geist Fallback',ui-sans-serif,system-ui,sans-serif;letter-spacing:-0.005em;text-decoration:none;cursor:pointer;transition:color .2s}
.hlink:hover,.hlink.on{color:#ffffff}
.ink{position:absolute;left:0;top:0;bottom:-1px;width:var(--ink-w);transform:translateX(var(--ink-x));background:linear-gradient(180deg,rgba(26,26,29,0) 0%,rgba(26,26,29,.55) 45%,rgb(26,26,29) 100%);opacity:0;transition:transform .4s cubic-bezier(.2,.7,.1,1),width .4s cubic-bezier(.2,.7,.1,1),opacity .25s;pointer-events:none}
.ink::before,.ink::after{content:"";position:absolute;top:0;bottom:0;width:1px;background:linear-gradient(180deg,rgba(245,244,241,0),rgba(245,244,241,.1))}
.ink::before{left:0}
.ink::after{right:0}
.ink.on{opacity:1}
.hdr-right{display:flex;align-items:center;gap:4px}
.hdr-right .btn-konf{margin-left:10px}
.flag{width:24px;height:24px;border-radius:50%;object-fit:cover;display:block;box-shadow:0 0 0 1.5px rgba(255,255,255,.22)}
.lang-dd{position:relative}
.lang-btn{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 10px 0 8px;border:0;border-radius:999px;background:none;color:#a1a1a6;cursor:pointer;transition:background-color .25s}
.lang-btn:hover{color:#ffffff}
.lang-btn:hover .flag{box-shadow:0 0 0 1.5px rgba(255,255,255,.6)}
.lang-btn:hover,.lang-btn[aria-expanded="true"]{background:rgba(245,244,241,.1)}
.lang-menu{position:absolute;right:-8px;top:calc(100% + 12px);min-width:210px;padding:6px;border-radius:16px;background:rgba(28,28,30,.98);border:1px solid rgba(245,244,241,.1);box-shadow:0 30px 60px -20px rgba(0,0,0,.8);animation:megaIn .3s cubic-bezier(.2,.7,.1,1) both;z-index:60}
.lang-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;color:#f5f4f1;font-size:14px;font-weight:500;text-decoration:none}
.lang-item:hover,.lang-item.on{background:rgba(245,244,241,.08)}
.lang-item .flag{width:22px;height:22px}
.lang-cur{margin-left:auto;font-size:12px;color:#8e8e93}
.btn-konf{display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 22px 0 26px;border-radius:360px;background:linear-gradient(0deg,#db5518 0%,#f26322 100%);color:#ffffff;font-weight:600;font-size:15px;letter-spacing:.02em;text-decoration:none;box-shadow:0 4px 10px rgba(207,70,11,.28),inset 0 1px 0 rgba(255,255,255,.28);transition:box-shadow .3s,transform .2s,filter .3s}
.btn-konf svg{width:18px;height:18px;overflow:visible}
.btn-konf:hover{transform:translateY(-1px);filter:brightness(1.06);box-shadow:0 12px 28px -8px rgba(242,99,34,.65),inset 0 1px 0 rgba(255,255,255,.28)}
.btn-konf:active{transform:translateY(1px)}
.btn-konf g{transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.btn-konf:hover .k1{transform:translateY(-3px)}
.btn-konf:hover .k2{transform:translateY(4px)}
.btn-konf:hover .k3{transform:translateY(-5px)}
.fly{position:absolute;left:0;right:0;top:100%;z-index:2;background:rgb(26,26,29);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);border-bottom:1px solid rgba(245,244,241,.08);box-shadow:0 40px 80px -40px rgba(0,0,0,.9);animation:flyIn .45s cubic-bezier(.2,.7,.1,1) both}
@keyframes flyIn{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
.fly-grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr)) minmax(220px,1.15fr);gap:48px;padding-top:44px;padding-bottom:52px}
.fly-big,.fly-col{display:flex;flex-direction:column;gap:4px;min-width:0}
.fly-t{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#8e8e93;margin-bottom:12px}
.fly-bl{font-size:26px;font-weight:600;letter-spacing:-0.03em;line-height:1.3;color:#f5f4f1;text-decoration:none;opacity:0;transform:translateY(10px);animation:flyItem .5s cubic-bezier(.2,.7,.1,1) calc(.08s + var(--d) * 45ms) both;transition:color .2s}
.fly-bl:hover{color:var(--accent)}
.fly-sl{font-size:14.5px;line-height:1.3;color:#c7c7cc;text-decoration:none;padding:6px 0;opacity:0;transform:translateY(8px);animation:flyItem .45s cubic-bezier(.2,.7,.1,1) calc(.14s + var(--d) * 35ms) both;transition:color .2s}
.fly-sl:hover{color:#ffffff}
@keyframes flyItem{to{opacity:1;transform:none}}
.fly-feat{display:flex;flex-direction:column;gap:10px;align-self:start;min-width:0;max-width:100%;box-sizing:border-box;white-space:normal;overflow-wrap:anywhere;padding:12px 12px 16px;border-radius:22px;background:rgba(245,244,241,.04);border:1px solid rgba(245,244,241,.08);text-decoration:none;opacity:0;transform:translateY(10px);animation:flyItem .55s cubic-bezier(.2,.7,.1,1) .2s both}
.fly-feat>span{min-width:0;white-space:normal;overflow-wrap:break-word;line-height:1.4}
.fly-img{display:block;aspect-ratio:640/420;height:auto;max-height:190px;border-radius:14px;overflow:hidden;background:#0a0a0b}
.fly-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.1,1)}
.fly-feat:hover .fly-img img{transform:scale(1.05)}
.fly-cta{display:inline-flex;align-items:center;gap:8px;color:var(--accent);font-weight:600;font-size:14px}
.nav-dim{position:fixed;inset:0;z-index:-1;background:rgba(0,0,0,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:megaIn .3s both}
.sec-label{display:flex;align-items:center;justify-content:center;gap:20px;margin:0;font-size:13px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#a1a1a6}
.sec-label .ln{width:clamp(32px,8vw,96px);height:1px;background:linear-gradient(90deg,transparent,rgba(245,244,241,.35))}
.sec-label .ln.r{background:linear-gradient(90deg,rgba(245,244,241,.35),transparent)}
.logo-rail{position:relative;width:100%;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.logo-track{display:flex;align-items:center;gap:72px;width:max-content;padding:14px 0}
.motion .logo-track{animation:marq 70s linear infinite}
.motion .logo-track.rev{animation-direction:reverse;animation-duration:84s}
.logo-rail:hover .logo-track{animation-play-state:paused}
.partners{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;width:100%}
.ptile{position:relative;display:grid;place-items:center;height:86px;padding:0 18px;border-radius:18px;background:rgba(245,244,241,.03);border:1px solid rgba(245,244,241,.07);transition:background-color .3s,border-color .3s,transform .3s}
.ptile img{display:block;max-width:100%;max-height:34px;width:auto;opacity:.7;transition:opacity .3s}
.ptile:hover{background:rgba(245,244,241,.07);border-color:rgba(245,244,241,.16);transform:translateY(-2px)}
.ptile:hover img{opacity:1}
.ptile.more{text-decoration:none}
.dots{display:flex;gap:9px}
.dots i{width:10px;height:10px;border-radius:50%;background:#a1a1a6;transition:background-color .3s,transform .3s}
.ptile.more:hover .dots i{background:var(--accent)}
.ptile.more:hover .dots i:nth-child(2){transform:translateY(-4px)}
@media (max-width: 1100px){.fly-grid{gap:32px}}
@media (max-width: 900px){
  .fly-grid{grid-template-columns:minmax(0,1fr);gap:28px}
  .fly-bl{font-size:22px}
  .fly-feat{display:none}
}

.rc{display:flex;flex-direction:column;gap:16px;text-decoration:none;color:#0a0a0b}
.rc-frame{position:relative;display:block;border-radius:18px;overflow:hidden;background:#ffffff;cursor:none;box-shadow:0 0 0 1px rgba(10,10,11,.07),0 30px 60px -32px rgba(0,0,0,.4)}
.rc:hover .rc-frame{transform:translateY(-8px);box-shadow:0 0 0 1px rgba(10,10,11,.08),0 50px 80px -36px rgba(0,0,0,.5)}
.rc-bar{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;background:#f1efeb;border-bottom:1px solid rgba(10,10,11,.06)}
.rc-bar i{width:8px;height:8px;border-radius:50%;background:#d4d1ca}
.rc-url{margin-left:10px;font-size:11px;color:#8e8e93;letter-spacing:.02em}
.rc-view{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:#ffffff}
.rc-img{display:block;width:100%;height:auto;transition:transform 1.4s cubic-bezier(.6,0,.2,1)}
.rc:hover .rc-img{transform:translateY(var(--s));transition:transform 7s cubic-bezier(.45,0,.25,1)}
.rc-bubble{position:absolute;left:var(--mx,50%);top:var(--my,50%);z-index:3;width:86px;height:86px;margin:-43px 0 0 -43px;border-radius:50%;display:grid;place-items:center;background:#0a0a0b;color:#ffffff;font-size:13px;font-weight:600;letter-spacing:.02em;transform:scale(0);transition:transform .4s cubic-bezier(.3,1.5,.5,1);pointer-events:none}
.rc:hover .rc-bubble{transform:scale(1)}
.rc-meta{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:0 4px}
.rc-name{font-size:20px;font-weight:600;letter-spacing:-0.02em}
.rc-tag{font-size:13px;color:#6e6e73}
.rc-hyva{display:inline-block;margin-left:6px;padding:1px 7px;border:1px solid #d2d2d7;border-radius:999px;font-size:11px;font-weight:600;line-height:1.5;color:#1d1d1f;vertical-align:1px}
.uline{position:relative;display:inline-block}
.scribble{position:absolute;left:-3%;bottom:-.1em;width:106%;height:.32em;overflow:visible}
.scribble path{fill:none;stroke:var(--accent);stroke-width:5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.motion .scribble path{stroke-dasharray:420;stroke-dashoffset:420;transition:stroke-dashoffset 1.3s cubic-bezier(.6,0,.2,1) .35s}
.motion .go .scribble path{stroke-dashoffset:0}
.rev-sec{position:relative;background:#0a0a0b;border-radius:40px 40px 0 0;margin-top:-40px;padding:150px 0 40px}
.rev-score{display:flex;align-items:center;gap:16px}
.rev-card{margin:0;position:relative;padding:clamp(32px,5vw,72px);border-radius:36px;background:#f5f4f1;color:#0a0a0b;display:flex;flex-direction:column;gap:40px;overflow:hidden}
.rev-stage{display:grid}
.rev-slide{grid-area:1/1;display:flex;flex-direction:column;justify-content:space-between;gap:36px;opacity:0;visibility:hidden;transition:opacity .5s,visibility .5s}
.rev-slide.on{opacity:1;visibility:visible}
.rev-q{margin:0;max-width:1000px;font-size:clamp(26px,3.3vw,46px);line-height:1.18;letter-spacing:-0.03em;font-weight:500;text-wrap:pretty}
.rev-q .w{display:inline-block}
.motion .rev-slide .w{opacity:0;filter:blur(6px);transform:translateY(.35em);transition:opacity .5s,filter .5s,transform .6s cubic-bezier(.2,.7,.1,1)}
.motion .rev-slide.on .w{opacity:1;filter:none;transform:none;transition-delay:calc(var(--i) * 32ms)}
.rev-by{display:flex;align-items:center;gap:14px}
.rev-av{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;background:#0a0a0b;color:#f5f4f1;font-weight:600;font-size:15px}
.rev-prog{display:flex;gap:8px}
.rp{flex:1;height:30px;padding:0;border:0;background:none;cursor:pointer;display:flex;align-items:center}
.rp i{display:block;width:100%;height:3px;border-radius:3px;background:rgba(10,10,11,.12);position:relative;overflow:hidden}
.rp i::after{content:"";position:absolute;inset:0;background:#0a0a0b;transform:scaleX(0);transform-origin:left}
.rp.done i::after{transform:none}
.rp.on i::after{transform:none}
.motion .rp.on i::after{animation:revBar 7s linear both}
/* held under the pointer: the bar is full; leaving starts a fresh 7s countdown, in step with the timer */
.motion .rp.on.paused i::after{animation:none;transform:none}
@keyframes revBar{from{transform:scaleX(0)}to{transform:none}}
.cpanel{padding:8px 0}
.mm-n{font-size:64px;font-weight:700;letter-spacing:-0.05em;line-height:1}
.mm-n span{font-size:.6em}
.mm-t{font-size:15px;font-weight:500;color:#2a1206}
.mm-go{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14px}
.foot-giant{height:min(19vw,240px);overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#000 45%,rgba(0,0,0,.55) 75%,transparent);mask-image:linear-gradient(180deg,#000 45%,rgba(0,0,0,.55) 75%,transparent)}
.foot-bottom{position:relative;z-index:1;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:10px 32px;margin-top:calc(-1 * min(9vw,112px));padding-top:22px;border-top:1px solid rgba(245,244,241,.08);font-size:13px;line-height:1.5;color:#8e8e93}
.foot-legal{font-size:12px;color:#8e8e93;max-width:720px}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:48px}
@media (max-width: 1080px){.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.foot-grid > div:first-child{grid-column:1 / -1}}
@media (max-width: 560px){.foot-grid{grid-template-columns:minmax(0,1fr)}}

.pillars{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.pillar{position:relative;display:flex;flex-direction:column;gap:10px;padding:22px 24px 24px;border-radius:28px;background:#ffffff;color:#0a0a0b;text-decoration:none;overflow:hidden;box-shadow:0 0 0 1px rgba(10,10,11,.05);transition:transform .55s cubic-bezier(.2,.7,.1,1),box-shadow .55s}
.pillar:hover{transform:translateY(-8px);box-shadow:0 0 0 1px rgba(10,10,11,.06),0 44px 70px -40px rgba(0,0,0,.45)}
.pl-go{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(10,10,11,.14);transition:background-color .35s,color .35s,border-color .35s,transform .45s cubic-bezier(.2,.7,.1,1)}
.pillar:hover .pl-go{background:#0a0a0b;border-color:#0a0a0b;color:#ffffff;transform:rotate(-45deg)}
.pl-art{display:block;height:200px;margin:-22px -24px 8px;overflow:hidden;border-radius:28px 28px 0 0;background:#141416}
.pl-art img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.1,1)}
.pillar:hover .pl-art img{transform:scale(1.05)}
.pl-t{font-size:clamp(32px,2.9vw,42px);font-weight:600;letter-spacing:-0.045em;line-height:1}
.pl-x{color:#55555a;font-size:15.5px;line-height:1.5}
.pl-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:auto;padding-top:8px}
.pl-foot .pl-go{flex:none}
.pl-tags{flex:1;min-width:0;font-size:13px;line-height:1.5;color:#6e6e73}
@media (max-width: 1100px){.pillars{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width: 640px){.pillars{grid-template-columns:minmax(0,1fr)}}

.cpanel{display:block;text-decoration:none;color:inherit;padding:18px;margin:-18px;border-radius:26px;transition:background-color .35s}
.cpanel:hover{background:rgba(245,244,241,.03)}
.mgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
@media (max-width: 1100px){.mgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
@media (max-width: 540px){.mgrid{grid-template-columns:minmax(0,1fr)}}
.mc{display:flex;flex-direction:column;border-radius:28px;overflow:hidden;text-decoration:none;color:#1D1D1F;background:linear-gradient(170deg,#F7F7F9 0%,#EBEBEF 100%);-webkit-font-smoothing:antialiased}
.mc:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* phones: less empty space between sections, denser blocks, so there is less to scroll */
@media (max-width: 760px){
  #top{padding-bottom:64px !important}
  .sec-clients{margin-top:-24px !important}
  .sec-statement{padding:72px 0 56px !important}
  .sec-stats{padding-bottom:64px !important}
  #storitve{padding:72px 0 56px !important}
  #reference{padding:32px 0 88px !important}
  .rev-sec{padding-top:72px !important;padding-bottom:24px !important}
  #zakaj{padding:72px 0 64px !important}
  .asm-sec{padding-top:72px !important}
  #konfigurator{padding:32px 0 72px !important}
  #moduli,.sec-guide,#znanje,#blog{padding-bottom:72px !important}
  .cta-sec{height:760px !important}
  footer{padding:56px 0 32px !important}
  .partners{grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:8px !important}
  .ptile{height:62px !important;padding:0 10px !important;border-radius:14px !important}
  .pl-art{height:110px !important}
  .portrait{max-width:none;aspect-ratio:4/3}
  .why-li{grid-template-columns:40px minmax(0,1fr) !important;gap:12px !important;padding:24px 0 !important}
  .mgrid{display:flex !important;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 24px;gap:12px !important;margin:0 -24px;padding:0 24px 6px;scrollbar-width:none}
  .mgrid::-webkit-scrollbar{display:none}
  .mgrid > *{flex:0 0 78%;scroll-snap-align:start}
}
/* the small box in the corner is the assistant: the orb steps aside, the button stays as the click target */
/* no button: the box is the button, and the chat rises out of it like a speech bubble */
.motion .sheet{transition:transform 1.1s cubic-bezier(.2,.75,.15,1) calc(var(--i) * 90ms),opacity .35s calc(var(--i) * 90ms)}
.motion #reference .rows-clip{transition:opacity .7s,transform 1s cubic-bezier(.2,.8,.2,1);transform-origin:50% 50%}
.pillar{transition:transform .45s cubic-bezier(.3,1.5,.5,1),translate .45s cubic-bezier(.3,1.5,.5,1),scale .45s,box-shadow .45s}
/* the card gives under the box: it sinks and its shadow tightens */
/* the photo gives under the weight: it sinks in, with a soft shadow pooling around the box */
.pl-art{position:relative}
.pl-art::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(58% 60% at 50% 0%,rgba(0,0,0,.6),rgba(0,0,0,.25) 50%,transparent 80%);opacity:0;transition:opacity .4s}
/* the top edge of the photo bends in under the box, like a stretched sheet */
@property --dent{syntax:'<length>';inherits:true;initial-value:0px}
.pillar{--dent:0px;transition:--dent .5s cubic-bezier(.3,1.6,.5,1),transform .45s,translate .45s,box-shadow .45s;-webkit-mask-image:radial-gradient(ellipse 60% calc(var(--dent) * 2.24) at 50% calc(var(--dent) * -1.24),transparent 99%,#000 100%);mask-image:radial-gradient(ellipse 60% calc(var(--dent) * 2.24) at 50% calc(var(--dent) * -1.24),transparent 99%,#000 100%)}

/* ---- page views and the box transition between them ---- */
.pages{transition:opacity .45s ease,transform .5s cubic-bezier(.4,0,.2,1),filter .45s}
.pages.nav-out{opacity:0;transform:scale(.97);filter:blur(6px)}
.pages.nav-in{animation:pageIn .8s cubic-bezier(.2,.75,.15,1) both}
@keyframes pageIn{from{opacity:0;transform:translateY(46px) scale(.96);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
/* ---- subpages ---- */
.sp{display:block}

/* ---- light subpage body (the top stays dark) ---- */
/* ---- module product page ---- */
.dg,.dg *{-webkit-tap-highlight-color:transparent}
#top{-webkit-touch-callout:none}
#top .hero-gl{-webkit-user-select:none;user-select:none}

/* ---- module page, presented like a product launch ---- */
/* the speech bubble that pops out of the box */
/* ---- module product page v4 (one template for every module) ---- */

/* local nav */

/* hero */

/* windows and phones (the "screens") */
/* screen parts */
/* problem */

/* steps */

/* gallery */

/* bento */

/* admin */

/* phones */

/* specs */

/* compare */

/* references */

/* support */

/* pricing */

/* related + end */

/* live demo dialog */
/* sticky mobile buy bar */

/* ---- REF CSS START: references page ---- */
/* ---- REF CSS END ---- */
/* ---- PF CSS START: one reference ---- */
/* ---- PF CSS END ---- */
/* ---- MM CSS START: Magento modules list ---- */
/* text the page runtime wraps in its own span must never pick up span rules meant for real elements */
/* ---- MM CSS END ---- */
/* ---- TP CSS START: technical support ---- */
/* static: show the ticket's own state */
/* motion: each ticket loops received -> in progress -> solved, offset by --o */
/* motion: messages arrive one after another, the answer last, then the thread restarts */
/* motion: one shared 14s cycle, messages arrive in turn, the answer last, all leave together */
/* ---- TP CSS END ---- */
/* ---- KT CSS START: contact ---- */
/* ---- KT CSS END ---- */
/* ---- SV CSS START: services ---- */
/* motion: the 3D box arrives (page script), the four steps fly out of it, the box leaves, a burnt-in idea mark stays and smoulders */
/* ---- SV CSS END ---- */

/* idea into money: the bulb lights up above the box, drops into it, the box spins away, the euro is burnt in where it stood */
/* ---- ZN CSS START: knowledge ---- */
/* ---- ZN CSS END ---- */
/* ---- LG CSS START: legal text page ---- */
/* ---- LG CSS END ---- */
/* ---- EX CSS START: blog, article, login, account, checkouts, growth hacks ---- */
/* article */
/* login */
/* account */
/* checkouts */
/* growth hacks */
/* ---- EX CSS END ---- */
/* ---- NV CSS START: help centre, help article, 404 ---- */
/* help article (Apple-support-like) */
/* 404 */
/* ---- NV CSS END ---- */
/* ---- WS CSS START: website landing ---- */
/* tier 2: bespoke, different palette, asymmetric layout */
/* tier 3: premium, motion + wizard */
/* ---- WS CSS END ---- */
/* ---- ORG CSS START ---- */
.of{display:block;width:100%;height:auto;overflow:visible}
.of-ring{fill:none;stroke:#a8a8ad;stroke-width:.35;stroke-dasharray:.5 1.6}
.of-dark{fill:#2b2b2e}
.of-sw path{fill:none;stroke-linecap:round}
.of-tk{fill:none;stroke:#9a9aa0;stroke-width:.5;stroke-linecap:round}
.of-dt{fill:#9a9aa0}
.of-pop,.of-pop.on{display:none}
/* The photo takes the blob's shape: the blob path is the clip mask of the whole photo (no cut-out popping out of it, which left a hard horizontal edge), enlarged from the centre so that the head and shoulders fit inside. */
.of clipPath path{transform:scale(1.2);transform-origin:50px 50px}
.motion .of-dark,.motion .of-acc{transform-box:fill-box;transform-origin:center;animation:ofDrift 10s ease-in-out infinite}
.motion .of-acc{animation-duration:12s;animation-direction:reverse}
.motion .of-ring{transform-box:fill-box;transform-origin:center;animation:ofSpin 60s linear infinite}
@keyframes ofDrift{0%,100%{transform:translate(0,0) rotate(0deg)}33%{transform:translate(1.5px,-2px) rotate(4deg)}66%{transform:translate(-2px,1.5px) rotate(-3deg)}}
@keyframes ofSpin{to{transform:rotate(360deg)}}
.blog-list .bl-row{isolation:isolate}
.blog-list .bl-row::before{content:"";position:absolute;inset:0;z-index:1;border-radius:16px;background:#ffffff;opacity:0;transition:opacity .35s}
.blog-list .bl-row:hover::before{opacity:1}
.blog-list .bl-row>*:not(.bl-peek){position:relative;z-index:2}
.blog-list .bl-peek{z-index:0;left:auto;right:70px;top:auto;bottom:40%;width:270px;aspect-ratio:1/1;border-radius:0;box-shadow:none;transform:translateY(40px) scale(.6) rotate(-8deg);transform-origin:50% 100%}
.blog-list .bl-row:hover .bl-peek{opacity:1;transform:none}
.bl-peek .of{filter:drop-shadow(0 20px 34px rgba(0,0,0,.5))}
.bl-peek .of-ring{stroke:rgba(245,244,241,.3)}
.blog-list .bl-row:hover .bl-t{color:#0a0a0b;text-shadow:none}
.blog-list .bl-row:hover .bl-date{color:#6e6e73}
.blog-list .bl-row:hover .bl-go{background:var(--accent);border-color:var(--accent);color:#0a0a0b}
/* ---- ORG CSS END ---- */
/* ---- HX CSS START: animated hero background ---- */
/* ---- HX CSS END ---- */
/* keep the dark card text on hover */
.mc:hover{color:#1D1D1F}
.mc.mc-orange:hover{color:#0a0a0b}
.mc-img{display:block;aspect-ratio:4/3;overflow:hidden}
.mc-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.mc:hover .mc-img img{transform:scale(1.04)}
.mc-body{display:flex;flex-direction:column;gap:8px;padding:20px 24px 22px;flex-grow:1}
.mc-new{min-height:18px;font-size:13px;font-weight:700;color:#C2410C}
.mc-name{font-size:21px;font-weight:700;line-height:1.2;letter-spacing:-0.012em}
.mc-ben{font-size:15px;line-height:1.5;color:#6E6E73;flex-grow:1}
.mc-foot{display:flex;justify-content:space-between;align-items:center;margin-top:12px}
.mc-price{font-size:17px;font-weight:700}
.mc-go{width:36px;height:36px;border-radius:999px;border:1.5px solid #1D1D1F;display:flex;align-items:center;justify-content:center;transition:background-color .3s,border-color .3s,color .3s}
.mc:hover .mc-go{background:#E2561C;border-color:#E2561C;color:#ffffff}
.mc-orange{justify-content:space-between;gap:16px;padding:28px;background:var(--accent);color:#0a0a0b}
.nl-card{position:relative;overflow:hidden;border-radius:40px;background:#f26322;color:#0a0a0b;display:flex;flex-wrap:wrap;align-items:stretch}
.nl-form{display:flex;flex-direction:column;gap:12px;max-width:540px;margin-top:6px}
.nl-field{display:flex;align-items:center;gap:6px;padding:6px 6px 6px 22px;border-radius:999px;background:#ffffff;box-shadow:0 18px 40px -20px rgba(42,18,6,.6);transition:box-shadow .3s}
.nl-field:focus-within{box-shadow:0 0 0 4px rgba(10,10,11,.85),0 18px 40px -20px rgba(42,18,6,.6)}
.nl-input{flex:1;min-width:0;height:52px;border:0;background:transparent;font:400 16px 'Geist','Geist Fallback',ui-sans-serif,system-ui,sans-serif;color:#0a0a0b;outline:none}
.nl-btn{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 22px;border:0;border-radius:999px;background:#0a0a0b;color:#f5f4f1;font:600 15px 'Geist','Geist Fallback',ui-sans-serif,system-ui,sans-serif;cursor:pointer;white-space:nowrap;transition:transform .25s}
.nl-btn:hover{transform:translateX(2px)}
.nl-consent{display:flex;align-items:flex-start;gap:10px;padding-left:22px;font-size:14px;color:#2a1206;cursor:pointer;max-height:0;opacity:0;overflow:hidden;transform:translateY(-6px);transition:max-height .45s cubic-bezier(.2,.7,.1,1),opacity .35s,transform .45s}
.nl-consent input{width:18px;height:18px;margin:1px 0 0;accent-color:#0a0a0b}
.nl-consent a{color:#0a0a0b}
.nl-form.open .nl-consent{max-height:60px;opacity:1;transform:none}
/* phones: the field and the button as two separate rounded pieces */
@media (max-width: 560px){.nl-field{flex-direction:column;align-items:stretch;gap:10px;padding:0;border:0;background:none;box-shadow:none;border-radius:0}.nl-input{flex:none;height:54px;padding:0 20px;border-radius:999px;background:#ffffff;box-shadow:0 10px 24px -14px rgba(0,0,0,.45);font-size:16px}.nl-btn{height:54px;justify-content:center}.nl-field:focus-within{box-shadow:none}.nl-input:focus{box-shadow:0 0 0 3px #0a0a0b}}
.book-wrap{flex:1 1 360px;display:grid;place-items:center;min-height:440px;perspective:1600px}
.book{position:relative;width:250px;height:340px;transform-style:preserve-3d;transform:rotateY(-28deg) rotateX(6deg);transition:transform 1s cubic-bezier(.2,.7,.1,1)}
.book-wrap:hover .book{transform:rotateY(-12deg) rotateX(2deg) translateY(-6px)}
.motion .book{animation:bookFloat 6s ease-in-out infinite}
.motion .book-wrap:hover .book{animation-play-state:paused}
@keyframes bookFloat{0%,100%{translate:0 0}50%{translate:0 -10px}}
.b-cover{position:absolute;inset:0;display:flex;flex-direction:column;gap:6px;padding:28px 24px;border-radius:4px 12px 12px 4px;background:linear-gradient(135deg,#1c1c1f 0%,#0a0a0b 70%);color:#f5f4f1;transform:translateZ(22px);box-shadow:inset 6px 0 10px -6px rgba(255,255,255,.25),inset -1px 0 0 rgba(255,255,255,.08);overflow:hidden}
.b-cover::after{content:"";position:absolute;right:-60px;bottom:-60px;width:220px;height:220px;border-radius:50%;background:radial-gradient(closest-side,#f26322,transparent);opacity:.55}
.b-mark{font-weight:700;letter-spacing:-0.03em;font-size:18px}
.b-n{margin-top:auto;font-size:72px;font-weight:700;letter-spacing:-0.06em;line-height:.9;color:#f26322;position:relative;z-index:1}
.b-t{font-size:20px;font-weight:600;letter-spacing:-0.02em;line-height:1.15;position:relative;z-index:1}
.b-s{font-size:12px;color:#a1a1a6;letter-spacing:.08em;text-transform:uppercase;position:relative;z-index:1}
.b-pages{position:absolute;top:6px;bottom:6px;right:0;width:42px;transform:rotateY(90deg) translateZ(229px) translateX(-21px);background:repeating-linear-gradient(90deg,#f5f1ea 0 2px,#e2ddd3 2px 3px)}
.b-back{position:absolute;inset:0;border-radius:4px 12px 12px 4px;background:#0a0a0b;transform:translateZ(-22px);box-shadow:30px 40px 60px -20px rgba(42,18,6,.6)}
.know-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:48px;align-items:center}
/* a small still life in the corner of each tile, fading into it */
.ks-photo{position:absolute;right:-20%;top:-14%;width:105%;height:auto;pointer-events:none;opacity:.22;-webkit-mask-image:radial-gradient(75% 75% at 62% 40%,#000 40%,transparent 78%);mask-image:radial-gradient(75% 75% at 62% 40%,#000 40%,transparent 78%);transition:transform .9s cubic-bezier(.2,.7,.1,1),opacity .5s}
.know-stat > span{position:relative;z-index:1}
.know-stat:hover .ks-photo{transform:translate(-8px,-8px) scale(1.04);opacity:.34}
@media (max-width: 760px){.ks-photo{width:115%;right:-26%;top:-10%;opacity:.24}}
.know-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (max-width: 1000px){.know-wrap{grid-template-columns:minmax(0,1fr)}}
.dg-stack{position:relative;height:540px}
.sheet{position:absolute;left:50%;top:50%;width:300px;height:400px;margin:-200px 0 0 -150px;display:flex;flex-direction:column;gap:10px;padding:22px;border-radius:10px;background:#fbfaf7;color:#0a0a0b;box-shadow:0 30px 60px -30px rgba(0,0,0,.6),0 0 0 1px rgba(10,10,11,.05);transform:rotate(var(--r0))}
.sh-top{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#8e8e93}
.sh-t{font-size:22px;font-weight:700;letter-spacing:-0.025em;line-height:1.15;margin:6px 0 8px}
.sh-img{display:block;height:84px;border-radius:8px;background:linear-gradient(135deg,#ede8df,#f5e3d6)}
.motion .sheet{transition:transform 1.1s cubic-bezier(.2,.75,.15,1) calc(var(--i) * 90ms)}
.go .sheet,.dg:not(.motion) .sheet{transform:translate(var(--fx),var(--fy)) rotate(var(--fr))}
.tip{position:absolute;left:50%;top:50%;z-index:5;width:340px;margin:-150px 0 0 -170px;display:flex;flex-direction:column;gap:14px;padding:24px;border-radius:20px;background:#0a0a0b;color:#f5f4f1;text-decoration:none;box-shadow:0 0 0 1px rgba(245,244,241,.12),0 40px 80px -30px rgba(0,0,0,.9)}
.motion .tip{opacity:0;transform:translateY(30px) scale(.94);transition:opacity .6s .75s,transform .8s cubic-bezier(.2,.75,.15,1) .75s}
.motion .go .tip{opacity:1;transform:none}
.tip-top{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12px}
.tip-tag{padding:4px 10px;border-radius:999px;background:var(--accent);color:#0a0a0b;font-weight:700}
.tip-cat{color:#8e8e93}
.tip-t{font-size:22px;font-weight:700;letter-spacing:-0.025em;line-height:1.2}
.tip-x{font-size:15px;line-height:1.5;color:#c7c7cc}
.tip-x .w{display:inline-block;margin-right:.25em}
.motion .tip-x .w{opacity:0;transition:opacity .35s calc(1.2s + var(--i) * 45ms)}
.motion .go .tip-x .w{opacity:1}
.tip-m{display:flex;align-items:center;justify-content:space-between;font-size:13px;color:#a1a1a6}
.tip-bars{display:flex;gap:4px}
.tip-bars i{width:26px;height:6px;border-radius:3px;background:#2a2a2e}
.tip-bars i.on{background:var(--accent)}
.motion .tip-bars i.on{background:#2a2a2e;transition:background-color .3s calc(2.4s + var(--i) * 140ms)}
.motion .go .tip-bars i.on{background:var(--accent)}
.tip-go{display:inline-flex;align-items:center;gap:8px;color:var(--accent);font-weight:600;font-size:14px}
.cta-sec{position:relative;overflow:hidden;height:980px}
.cta-sec canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.cta-emerge{position:absolute;left:0;right:0;top:0;height:var(--rest,58%);z-index:2;display:flex;align-items:flex-end;justify-content:center;padding:0}
.cta-rise{transform:translateY(calc((1 - var(--p,1)) * (100% + var(--depth,0px)))) perspective(1100px) rotateX(calc((1 - var(--p,1)) * 30deg)) scale(calc(.46 + .54 * var(--p,1)), calc(.86 + .14 * var(--p,1)));transform-origin:50% 100%;filter:brightness(calc(.35 + .65 * var(--p,1)));will-change:transform,filter}
.socials{display:flex;gap:10px;margin-top:8px}
.soc{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:#c7c7cc;border:1px solid rgba(245,244,241,.16);transition:color .25s,border-color .25s,background-color .25s}
.soc:hover{color:#0a0a0b;background:#f5f4f1;border-color:#f5f4f1}
.rc-frame,.rc-meta{transition:opacity .7s,filter .7s,transform .7s cubic-bezier(.2,.7,.1,1)}

.blog-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:56px;align-items:start}
@media (max-width: 960px){
  #top .hero-title{white-space:normal !important}.blog-grid{grid-template-columns:minmax(0,1fr)}}
.feat{display:flex;flex-direction:column;gap:16px;text-decoration:none;color:#f5f4f1}
.feat .ph{display:block;overflow:hidden;border-radius:24px;aspect-ratio:16/10;background:#1c1c1f}
.feat .ph img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform 1.6s cubic-bezier(.2,.7,.1,1),filter .6s}
.feat:hover .ph img{transform:scale(1.09)}
.post-meta{display:flex;align-items:center;gap:10px;font-size:13px;color:#a1a1a6}
.post-meta .dot{width:4px;height:4px;border-radius:50%;background:var(--accent)}
.post-t{font-size:clamp(26px,2.6vw,36px);font-weight:600;letter-spacing:-0.035em;line-height:1.12;text-wrap:pretty}
.ul{background-image:linear-gradient(var(--accent),var(--accent));background-size:0% 2px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .7s cubic-bezier(.2,.7,.1,1);padding-bottom:2px}
.feat:hover .ul{background-size:100% 2px}
.post-x{color:#a1a1a6;font-size:17px;line-height:1.5;text-wrap:pretty}
.blog-list{position:relative;display:flex;flex-direction:column;border-top:1px solid rgba(245,244,241,.12)}
.bl-row{position:relative;display:grid;grid-template-columns:96px minmax(0,1fr) 44px;align-items:center;gap:18px;padding:28px 4px;border-bottom:1px solid rgba(245,244,241,.12);text-decoration:none;color:#f5f4f1;transition:padding .45s cubic-bezier(.2,.7,.1,1),color .3s}
.bl-row:hover{padding-left:16px}
.bl-date{font-size:13px;color:#8e8e93;font-variant-numeric:tabular-nums}
.bl-t{font-size:clamp(19px,1.7vw,24px);font-weight:600;letter-spacing:-0.025em;line-height:1.2;text-wrap:pretty;transition:color .3s}
.bl-row:hover .bl-t{color:#ffffff}
.blog-list:hover .bl-row:not(:hover) .bl-t{color:#6e6e73}
.bl-go{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(245,244,241,.2);transition:background-color .3s,color .3s,border-color .3s,transform .45s cubic-bezier(.2,.7,.1,1)}
.bl-row:hover .bl-go{background:var(--accent);border-color:var(--accent);color:#0a0a0b;transform:rotate(-45deg)}
.bl-peek{position:absolute;left:var(--bx,50%);top:var(--by,50%);z-index:5;width:260px;aspect-ratio:16/10;object-fit:cover;border-radius:14px;box-shadow:0 30px 60px -20px rgba(0,0,0,.85);pointer-events:none;opacity:0;transform:translate(-50%,-115%) scale(.85) rotate(-4deg);transition:opacity .3s,transform .5s cubic-bezier(.2,.7,.1,1)}
.bl-row:hover .bl-peek{opacity:1;transform:translate(-50%,-115%) scale(1) rotate(-2deg)}
@media (hover: none){.bl-peek{display:none}}
.motion .bl-row{opacity:0;transform:translateY(24px);transition:opacity .7s calc(var(--i) * 110ms),transform .8s cubic-bezier(.2,.7,.1,1) calc(var(--i) * 110ms),padding .45s cubic-bezier(.2,.7,.1,1)}
.motion .go .bl-row,.motion .blog-list.go .bl-row{opacity:1;transform:none}
@media (max-width: 900px){
  .hdr-bar{gap:12px}
  .hdr-logo svg{width:118px;height:31px}
  .hdr-right .lang-dd{display:none}
  .hdr-right{gap:2px}
  .hdr-right .btn-konf{width:40px;height:40px;padding:0;justify-content:center;margin-left:6px}
  .hdr-right .btn-konf span{display:none}
  .hdr-right .hlink.show-m{width:40px;height:40px;min-height:40px;padding:0;justify-content:center;margin-left:2px}
  .hero-gl{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 22%,rgba(0,0,0,.3) 34%,rgba(0,0,0,.3) 100%);mask-image:linear-gradient(180deg,#000 0,#000 22%,rgba(0,0,0,.3) 34%,rgba(0,0,0,.3) 100%)}
  .asm-hdr{gap:8px !important;padding:12px 14px !important}
  .asm-hdr > .part:nth-child(2){flex:0 0 42px !important;min-width:0;padding:0 !important;justify-content:center;font-size:0 !important}
  .asm-hdr > .part:nth-child(2) .tag{font-size:12px}
  .asm-hdr > .part:nth-child(3){display:none !important}
}

.cfg-col{display:flex;flex-direction:column;align-items:center;gap:28px;text-align:center}
.cfg-col .cpanel{width:100%;max-width:600px;flex:none !important;margin:12px 0 4px;text-align:left}
@keyframes devIn{from{opacity:0;transform:translateY(60px)}to{opacity:1;transform:none}}
@keyframes up{from{transform:translateY(110%)}to{transform:none}}
@keyframes fadein{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes marq{to{transform:translateX(-50%)}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes count{from{--n:0}to{--n:var(--to)}}
@keyframes sheen{from{background-position:120% 0}to{background-position:-20% 0}}
@keyframes rv{from{opacity:0;transform:translateY(56px)}to{opacity:1;transform:none}}
@keyframes tilt{from{transform:perspective(1800px) rotateX(28deg) scale(.86)}to{transform:perspective(1800px) rotateX(0deg) scale(1)}}
@keyframes fillWord{to{color:#f5f4f1}}
@keyframes driftL{from{transform:translateX(4%)}to{transform:translateX(-32%)}}
@keyframes driftR{from{transform:translateX(-32%)}to{transform:translateX(4%)}}

/* speed: the home head (the largest text of the first screen) is visible at the first paint, no clipped slide-in */
.motion .line > span{animation:none}
  /* speed: the home head paragraph is the largest text of the first screen on phones: visible at the first paint */
  .motion .fi{animation:none}
.motion .fi2{animation:fadein .9s cubic-bezier(.2,.7,.1,1) .85s both}
  .motion .hero-dev{animation:devIn 1.1s cubic-bezier(.2,.7,.1,1) 1.1s both}
.motion .float2{animation:floaty 7s ease-in-out 1.2s infinite}
.motion .float3{animation:floaty 8s ease-in-out .6s infinite}
.motion .sheen{text-shadow:none;filter:drop-shadow(0 4px 18px rgba(10,10,11,.85));color:transparent !important;background-image:linear-gradient(105deg,var(--accent) 0 42%,#ffe0c7 50%,var(--accent) 58% 100%);background-size:260% 100%;-webkit-background-clip:text;background-clip:text;animation:sheen 5s cubic-bezier(.6,0,.4,1) 1.4s infinite}

@supports (animation-timeline: view()){
  .motion .rv{animation:rv linear both;animation-timeline:view();animation-range:entry 0% entry 80%}
  .motion .tilt{transform-origin:50% 0;animation:tilt linear both;animation-timeline:view();animation-range:entry 0% cover 42%}
  .motion .fill-p{view-timeline-name:--fill}
  .motion .fw{color:#5f5f66;animation:fillWord linear both;animation-timeline:--fill;animation-range:cover calc(16% + var(--i) * 1.7%) cover calc(20% + var(--i) * 1.7%)}
  .motion .count{counter-reset:n var(--n)}
  .motion .count.go{animation:count var(--dur,2.4s) cubic-bezier(.3,.55,.35,1) both}
  .motion .count .lit{display:none}
  .motion .count::after{content:counter(n)}
  .motion .rows-clip{overflow:visible}
  .motion .asm-sec{height:1900px;view-timeline-name:--asm;padding-bottom:0}
  .motion .asm-sticky{position:sticky;top:76px}
  .motion .asm-page{animation:asmPage linear both;animation-timeline:--asm;animation-range:contain 0% contain 72%}
  .motion .part{animation:asm linear both;animation-timeline:--asm;animation-range:contain 0% contain 68%}
  .motion .part .tag{animation:tagOut linear both;animation-timeline:--asm;animation-range:contain 40% contain 70%}
  .motion .asm-done{animation:doneIn linear both;animation-timeline:--asm;animation-range:contain 72% contain 82%}
  .motion .drift-l{animation:driftL linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  .motion .drift-r{animation:driftR linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
}
@media (max-width: 960px){
  .hero-grid{grid-template-columns:minmax(0,1fr)}
  .gl-wrap{display:none}
  .blog-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width: 900px){
  .why-left{position:static}
  .show-m{display:inline-flex !important}
  .asm-side{display:none !important}
  .motion .asm-sec{height:auto}
  .motion .asm-sticky{position:static}
  .motion .asm-page,.motion .part .tag,.motion .asm-done{animation:none}
  .motion .part{animation:asmM linear both;animation-timeline:view();animation-range:entry 0% cover 42%}
  .asm-done{opacity:1}
  .part{translate:calc(var(--tx) * var(--spread, 0) + var(--px, 0px)) calc(var(--ty) * var(--spread, 0) + var(--py, 0px));rotate:calc(var(--rz) * var(--spread, 0));transition:translate .25s ease-out,rotate .25s ease-out}
  .hide-m{display:none}
  .ref-card{width:78vw;max-width:440px}
  .motion .rows-clip{overflow-x:auto;padding:12px 0 64px;margin-bottom:-52px}
  .motion .drift-l,.motion .drift-r{animation:none}
}
@media (prefers-reduced-motion: reduce){
  .cta-rise{transform:none !important}
  .motion .count .lit{display:inline !important}
  .motion .count::after{content:none !important}
  .dg *,.dg *::before,.dg *::after{animation:none !important;transition:none !important}
  .fill-text,.fw{color:#f5f4f1 !important;background:none !important}
  .sheen{color:var(--accent) !important;background:none !important}

}

/* ---- Magento / Hyva integration ---- */
body.dg{--accent:#f26322;overflow-x:visible}
.dg .page-wrapper{overflow-x:clip}
body.dg.cms-index-index{background:#0a0a0b;color:#f5f4f1}
.page-header{display:contents}
html{scrollbar-gutter:auto}
.cms-index-index .page-main,.cms-index-index .columns,.cms-index-index .column.main{max-width:none;padding-left:0;padding-right:0;margin:0;display:block;width:100%}
.hdr:not(.hdr-home){background:rgba(10,10,11,.97)}
.hdr [x-cloak],[x-cloak]{display:none !important}
.hdr{color:#f5f4f1;font-family:'Geist','Geist Fallback',ui-sans-serif,system-ui,sans-serif}
.dg-footer{background:#0a0a0b;color:#f5f4f1;font-family:'Geist','Geist Fallback',ui-sans-serif,system-ui,sans-serif;font-size:16px;line-height:1.5}
.page-footer{background:#0a0a0b}
.dg-footer a,.hdr a{text-decoration:none}
.hdr button{font:inherit}
.hdr a,.hdr button{white-space:nowrap}
.hdr-cart{position:relative;display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:transparent;border:0;color:#f5f4f1;cursor:pointer}
.hdr-cart:hover{background:rgba(245,244,241,.08)}
.hdr-badge{position:absolute;top:2px;right:0;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--accent);color:#0a0a0b;font-size:11px;font-weight:700;display:grid;place-items:center}


/* Category tiles (subcategories, as on M1): services, guide chapters, growth hacks areas ... */
.dg-cat-tiles{margin:8px 0 56px}
.dg-cat-grid{list-style:none;margin:0;padding:0;display:grid;gap:24px;grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1023px){.dg-cat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:639px){.dg-cat-grid{grid-template-columns:1fr;gap:16px}}
.dg-cat-card{display:flex;flex-direction:column;background:#fff;border-radius:22px;overflow:hidden;box-shadow:0 1px 2px rgba(10,10,11,.04),0 8px 28px rgba(10,10,11,.06);transition:transform .35s cubic-bezier(.2,.7,.1,1),box-shadow .35s cubic-bezier(.2,.7,.1,1)}
.dg-cat-card:hover{transform:translateY(-3px);box-shadow:0 2px 4px rgba(10,10,11,.05),0 16px 40px rgba(10,10,11,.10)}
.dg-cat-img{display:block;aspect-ratio:420/380;background:#f5f5f7;overflow:hidden}
.dg-cat-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.7,.1,1)}
.dg-cat-card:hover .dg-cat-img img{transform:scale(1.03)}
.dg-cat-body{display:flex;flex-direction:column;flex:1;padding:22px 24px 24px}
.dg-cat-title{font-size:21px;line-height:1.25;font-weight:650;letter-spacing:-.01em;color:#1d1d1f;margin:0 0 10px}
.dg-cat-title a{color:inherit;text-decoration:none}
.dg-cat-title a:hover{color:#c2410c}
.dg-cat-teaser{color:#515154;font-size:15px;line-height:1.6}
.dg-cat-teaser p{margin:0 0 8px}
.dg-cat-teaser strong{color:#1d1d1f;font-weight:600}
.dg-cat-subs{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.dg-cat-subs a{display:inline-block;padding:6px 12px;border-radius:999px;background:#f5f5f7;color:#1d1d1f;font-size:13px;text-decoration:none}
.dg-cat-subs a:hover{background:#f26322;color:#fff}
.dg-cat-more{margin-top:auto;padding-top:16px;align-self:flex-start;color:#c2410c;font-weight:600;font-size:15px;text-decoration:none}
.dg-cat-more:hover{text-decoration:underline}
@media (prefers-reduced-motion:reduce){.dg-cat-card,.dg-cat-img img{transition:none}.dg-cat-card:hover{transform:none}}

/* Contact CTA under service content (replaces the M1 Flexibleforms form) */
.dg-cta-box{margin:48px 0 64px;padding:40px;border-radius:30px;background:#0a0a0b;color:#f5f4f1;display:flex;gap:32px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.dg-cta-title{font-size:30px;line-height:1.15;font-weight:650;letter-spacing:-.02em;margin:0 0 10px;color:#f5f4f1}
.dg-cta-title .serif{font-family:"Instrument Serif",'Instrument Serif Fallback',serif;font-style:italic;font-weight:400;color:#ff9a62}
.dg-cta-text{margin:0;color:rgba(245,244,241,.72);font-size:16px;line-height:1.6;max-width:560px}
.dg-cta-actions{display:flex;gap:12px;flex-wrap:wrap}
.dg-cta-btn{display:inline-flex;align-items:center;padding:14px 24px;border-radius:999px;border:1px solid rgba(245,244,241,.25);color:#f5f4f1;font-weight:600;text-decoration:none}
.dg-cta-btn:hover{border-color:#f5f4f1}
.dg-cta-btn--primary{background:#f26322;border-color:#f26322;color:#fff}
.dg-cta-btn--primary:hover{background:#ff7a3d;border-color:#ff7a3d}
@media (max-width:639px){.dg-cta-box{padding:28px 22px;border-radius:22px}.dg-cta-title{font-size:24px}}

/* ==== Subpages from the design (shared section rules from pp_css.css / ref_css.css) ==== */
.dg-full .page-main,.dg-full .columns,.dg-full .column.main{max-width:none;padding-left:0;padding-right:0;margin:0;display:block;width:100%}
.dg-full .page-main{padding-top:0;padding-bottom:0}
.sp{display:block;font-family:'Geist','Geist Fallback',ui-sans-serif,system-ui,sans-serif}
.sp a{text-decoration:none}
.pp-sec{padding:128px 0;scroll-margin-top:140px}
.pp-grey{background:#f5f5f7}
.pp-k{display:block;font-size:17px;font-weight:600;color:#c2410c;letter-spacing:-0.01em;margin-bottom:10px}
.pp-h2{margin:0 0 18px;font-size:clamp(32px,4.4vw,56px);line-height:1.06;letter-spacing:-0.04em;font-weight:700;text-wrap:balance}
.pp-lead{margin:0;max-width:700px;font-size:clamp(19px,1.8vw,23px);line-height:1.45;color:#6e6e73;letter-spacing:-0.01em;text-wrap:pretty}
.pp-head{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:56px}
.pp-head .pp-lead{margin:0 auto}
.pp-cta{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px;margin-top:10px}
.pp-pill{display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 26px;border-radius:999px;border:1px solid #1d1d1f;color:#1d1d1f;font-size:17px;text-decoration:none;transition:background-color .2s,color .2s,border-color .2s}
.pp-pill:hover{background:#1d1d1f;color:#ffffff}
.pp-pill-on{background:#f26322;border-color:#f26322;color:#ffffff}
.pp-pill-on:hover{background:#d9541a;border-color:#d9541a}
@media (max-width: 900px){.pp-sec{padding:80px 0}}
.rf-eyebrow{font-size:15px;font-weight:600;color:#ff9a62;letter-spacing:.02em}
.rf-sub{margin:0;max-width:640px;font-size:clamp(18px,1.8vw,22px);line-height:1.5;color:#a1a1a6;text-wrap:pretty}
.rf-pill-d{border-color:rgba(245,244,241,.4);color:#f5f4f1}
.rf-pill-d:hover{background:#f5f4f1;color:#0a0a0b}
/* ---- SV CSS START: services ---- */
.sv{background:#ffffff;color:#1d1d1f}
.sv .wrap{max-width:1180px}
.sv-hero{padding:130px 0 90px;background:radial-gradient(900px 460px at 80% 30%,rgba(242,99,34,.16),transparent 62%),#0a0a0b;color:#f5f4f1;overflow:hidden}
.sv-hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:center}
.sv-hero-in{display:flex;flex-direction:column;gap:20px}
.sv-h1{margin:0;font-size:clamp(42px,5.4vw,76px);line-height:1;letter-spacing:-0.05em;font-weight:600;color:#f5f4f1}
.sv-h1 .serif{color:var(--accent);font-size:1.06em;display:inline-block;padding:0 .08em .2em .12em;margin:0 -.02em -.2em -.12em}
.sv-asm{position:relative;width:100%;aspect-ratio:1344/768;isolation:isolate}
.sv-boxdock{position:absolute;inset:0;pointer-events:none}
.sv-char{position:absolute;left:50%;top:50%;width:46%;aspect-ratio:1/1;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(40,16,4,.95) 0,rgba(60,22,6,.75) 30%,rgba(242,99,34,.16) 52%,transparent 70%);filter:blur(2px);z-index:0}
.sv-burn{position:absolute;left:50%;top:50%;width:26%;transform:translate(-50%,-52%);z-index:1;fill:none;stroke:#ff8a3d;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 2px #ffb070) drop-shadow(0 0 10px rgba(242,99,34,.9)) drop-shadow(0 0 26px rgba(242,99,34,.55))}
.sv-burn path{stroke-dasharray:1;stroke-dashoffset:0}
.sv-euro{opacity:0}
.sv-smoke{position:absolute;left:50%;top:30%;width:0;height:0;z-index:1}
.sv-smoke i{position:absolute;left:-20px;top:0;width:40px;height:40px;border-radius:50%;background:radial-gradient(circle,rgba(200,190,180,.18),transparent 70%);filter:blur(6px);opacity:0}
.sv-it{position:absolute;left:var(--l);top:var(--t);z-index:2;width:21%;display:flex;flex-direction:column;align-items:center;gap:8px;transform:translate(-50%,-50%)}
.sv-it svg{display:block;width:56%;aspect-ratio:1/1;padding:18%;box-sizing:content-box;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(242,99,34,.28),rgba(242,99,34,.08) 70%);border:1px solid rgba(242,99,34,.45);fill:none;stroke:#ff9a62;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 12px rgba(242,99,34,.45))}
.sv-it b{margin-top:2px;padding:5px 12px;border-radius:999px;background:rgba(245,244,241,.08);border:1px solid rgba(245,244,241,.14);color:#f5f4f1;font-size:13px;font-weight:600;white-space:nowrap;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.sv-it-a{--l:16%;--t:24%;--i:0}
.sv-it-b{--l:84%;--t:24%;--i:1}
.sv-it-c{--l:16%;--t:80%;--i:2}
.sv-it-d{--l:84%;--t:80%;--i:3}
.sv-done{position:absolute;left:50%;bottom:-2%;z-index:4;display:flex;align-items:center;gap:8px;padding:9px 16px 9px 10px;border-radius:999px;background:#f5f4f1;color:#0a0a0b;font-size:14.5px;font-weight:700;white-space:nowrap;transform:translateX(-50%);box-shadow:0 18px 40px -18px rgba(242,99,34,.8)}
.sv-done i{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#f26322;color:#ffffff;font-style:normal;font-size:12px}
/* motion: the 3D box arrives (page script), the four steps fly out of it, the box leaves, a burnt-in idea mark stays and smoulders */
.motion .sv-asm:not(.sv-go) .sv-done,.motion .sv-asm:not(.sv-go) .sv-smoke{opacity:0;animation:none}
.dg:not(.motion) .sv-it{opacity:0}
.motion .sv-it{animation:svAppear .9s cubic-bezier(.2,.8,.25,1.15) both;animation-delay:calc(.4s + var(--i) * .6s)}
.motion .sv-go .sv-it{animation:svInto 1.5s cubic-bezier(.55,0,.35,1) both;animation-delay:calc(var(--i) * .14s)}
@keyframes svAppear{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes svInto{0%{left:var(--l);top:var(--t);transform:translate(-50%,-50%) scale(1);opacity:1}15%{left:var(--l);top:var(--t);transform:translate(-50%,-50%) scale(1.08);opacity:1}88%{left:50%;top:52%;transform:translate(-50%,-50%) scale(.1) rotate(20deg);opacity:1}100%{left:50%;top:52%;transform:translate(-50%,-50%) scale(.04);opacity:0}}
.motion .sv-char{animation:svChar 1s ease .1s both,svEmber 3.2s ease-in-out 1.2s infinite}
@keyframes svChar{from{opacity:0;transform:translate(-50%,-50%) scale(.6)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes svEmber{0%,100%{filter:blur(2px) brightness(1)}30%{filter:blur(2px) brightness(1.25)}55%{filter:blur(2px) brightness(.9)}75%{filter:blur(2px) brightness(1.15)}}
.motion .sv-burn path{stroke-dashoffset:1}
@keyframes svDraw{to{stroke-dashoffset:0}}
@keyframes svGlow2{0%,100%{filter:drop-shadow(0 0 2px #ffb070) drop-shadow(0 0 10px rgba(242,99,34,.9)) drop-shadow(0 0 26px rgba(242,99,34,.55))}50%{filter:drop-shadow(0 0 3px #ffc48a) drop-shadow(0 0 16px rgba(242,99,34,1)) drop-shadow(0 0 40px rgba(242,99,34,.7))}}
.motion .sv-go .sv-smoke i{animation:svSmoke 4.5s ease-out infinite}
.motion .sv-go .sv-smoke i:nth-child(1){animation-delay:3.3s}
.motion .sv-go .sv-smoke i:nth-child(2){animation-delay:4.8s;left:-6px}
.motion .sv-go .sv-smoke i:nth-child(3){animation-delay:6.3s;left:-30px}
@keyframes svSmoke{0%{opacity:0;transform:translate(0,0) scale(.6)}20%{opacity:1}100%{opacity:0;transform:translate(14px,-120px) scale(2.2)}}
.motion .sv-go .sv-done{animation:svDone .7s cubic-bezier(.2,.7,.1,1) 4.5s both}
@keyframes svDone{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}
.sv-bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:minmax(240px,auto);gap:18px}
.sv-card{position:relative;display:flex;overflow:hidden;border-radius:28px;background:#f5f5f7;color:#1d1d1f;text-decoration:none;transition:transform .4s cubic-bezier(.2,.7,.1,1),box-shadow .4s}
.sv-card:hover{transform:translateY(-4px);box-shadow:0 30px 60px -36px rgba(0,0,0,.45)}
.sv-card-img{position:absolute;right:-8%;top:-10%;width:74%;aspect-ratio:1/1;object-fit:cover;border-radius:50%;opacity:.95;-webkit-mask-image:radial-gradient(circle at 60% 40%,#000 46%,transparent 70%);mask-image:radial-gradient(circle at 60% 40%,#000 46%,transparent 70%);transition:transform .8s cubic-bezier(.2,.7,.1,1)}
.sv-card:hover .sv-card-img{transform:scale(1.05) rotate(-2deg)}
.sv-card-in{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-top:auto;padding:28px 30px 28px}
.sv-card b{font-size:23px;letter-spacing:-0.02em}
.sv-card p{margin:0;max-width:440px;font-size:15.5px;line-height:1.5;color:#515154}
.sv-card em{margin-top:6px;font-style:normal;font-weight:600;color:#c2410c}
.sv-card:not(.big) .sv-card-in{padding-top:120px;background:linear-gradient(180deg,transparent,rgba(15,15,16,.85) 45%)}
.sv-card.big{grid-column:span 2;grid-row:span 2;background:#0a0a0b;color:#f5f4f1;min-height:520px}
.sv-card.big .sv-card-img{right:-6%;top:-14%;width:86%;opacity:1;-webkit-mask-image:radial-gradient(circle at 55% 45%,#000 50%,transparent 72%);mask-image:radial-gradient(circle at 55% 45%,#000 50%,transparent 72%)}
.sv-card.big b{font-size:clamp(30px,3.2vw,44px);letter-spacing:-0.035em}
.sv-card.big p{color:#a1a1a6;font-size:17px}
.sv-card.big em{color:#ff9a62}
.sv-card.wide{grid-column:span 2}
.sv-card.wide .sv-card-img{width:56%;right:-4%;top:-52%}
.sv-card.wide .sv-card-in{padding-top:28px;max-width:58%}
.sv-price{padding:6px 12px;border-radius:999px;background:#f26322;color:#ffffff;font-size:13px;font-weight:700}
.sv-card .sv-card-img{background:#0a0a0b}
.sv-card:not(.big){background:#0f0f10;color:#f5f4f1}
.sv-card:not(.big) p{color:#a1a1a6}
.sv-card:not(.big) em{color:#ff9a62}
.sv-grow{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:start}
.sv-grow-head{position:sticky;top:120px}
.sv-rows{list-style:none;margin:0;padding:0;border-top:1px solid #d2d2d7}
.sv-rows a{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr) 24px;gap:18px;align-items:center;padding:24px 4px;border-bottom:1px solid #d2d2d7;color:#1d1d1f;text-decoration:none;transition:padding .35s cubic-bezier(.2,.7,.1,1),background .35s}
.sv-rows a:hover,.sv-rows a.on{padding-left:14px;background:#ffffff}
.sv-rows a.on b{color:#c2410c}
.sv-row{position:relative}
.sv-row a{position:relative;z-index:0}
.sv-row:hover a,.sv-row:focus-within a{z-index:3}
.sv-pop{position:absolute;right:40px;bottom:calc(100% - 70px);width:250px;aspect-ratio:1/1;z-index:2;pointer-events:none;opacity:0;transform:translateY(40px) scale(.55) rotate(-8deg);transform-origin:50% 100%;transition:opacity .35s ease,transform .6s cubic-bezier(.2,.9,.25,1.25)}
.sv-row:hover .sv-pop,.sv-row:focus-within .sv-pop{opacity:1;transform:none}
.sv-pop-b1,.sv-pop-b2,.sv-pop-b3{position:absolute;inset:10%}
.sv-pop-b3{inset:4% 2% 18% 18%;background:linear-gradient(145deg,#ff9a5c,#f26322 55%,#c2410c);border-radius:42% 58% 63% 37% / 55% 39% 61% 45%;box-shadow:0 26px 50px -24px rgba(242,99,34,.8)}
.sv-pop-b1{overflow:hidden;inset:16% 14% 6% 6%;background:#f26322;border-radius:58% 42% 51% 49% / 46% 56% 44% 54%;box-shadow:0 30px 60px -28px rgba(0,0,0,.45)}
.sv-pop-b2{inset:0 6% 14% 10%;border:1.5px solid rgba(242,99,34,.6);border-radius:44% 56% 40% 60% / 58% 42% 58% 42%}
.motion .sv-pop-b1{animation:svBlobA 6s ease-in-out infinite}
.motion .sv-pop-b3{animation:svBlobB 7.5s ease-in-out infinite}
.motion .sv-pop-b2{animation:svBlobC 9s ease-in-out infinite}
@keyframes svBlobA{0%,100%{border-radius:58% 42% 51% 49% / 46% 56% 44% 54%;transform:translate(0,0) rotate(0deg)}33%{border-radius:40% 60% 62% 38% / 58% 40% 60% 42%;transform:translate(4px,-6px) rotate(3deg)}66%{border-radius:63% 37% 45% 55% / 38% 62% 38% 62%;transform:translate(-5px,3px) rotate(-3deg)}}
@keyframes svBlobB{0%,100%{border-radius:42% 58% 63% 37% / 55% 39% 61% 45%;transform:translate(0,0) rotate(0deg)}40%{border-radius:60% 40% 38% 62% / 40% 60% 40% 60%;transform:translate(-8px,6px) rotate(-6deg)}75%{border-radius:48% 52% 58% 42% / 62% 44% 56% 38%;transform:translate(6px,-4px) rotate(5deg)}}
@keyframes svBlobC{0%,100%{border-radius:44% 56% 40% 60% / 58% 42% 58% 42%;transform:rotate(0deg) scale(1)}50%{border-radius:60% 40% 56% 44% / 42% 58% 42% 58%;transform:rotate(14deg) scale(1.04)}}
.sv-pop-b1 img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.12);transition:transform 1.2s cubic-bezier(.2,.7,.1,1)}
.sv-row:hover .sv-pop-b1 img{transform:scale(1)}
.sv-pop-b1 img[src^="@@"]{display:none}
@media (hover: none){.sv-pop{display:none}}
.sv-rows b{font-size:20px;letter-spacing:-0.02em}
.sv-rows span{font-size:15.5px;line-height:1.5;color:#515154}
.sv-rows i{font-style:normal;color:#c2410c;font-weight:700;transition:translate .35s}
.sv-rows a:hover i{translate:6px 0}
.sv-more{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.sv-more-i{display:flex;flex-direction:column;overflow:hidden;border-radius:22px;background:#f5f5f7;color:#1d1d1f;text-decoration:none;transition:background .3s,transform .4s cubic-bezier(.2,.7,.1,1),box-shadow .4s}
.sv-more-i:hover{background:#fff1e8;transform:translateY(-4px);box-shadow:0 26px 50px -34px rgba(0,0,0,.45)}
.sv-more-img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.1,1)}
.sv-more-i:hover .sv-more-img{transform:scale(1.05)}
.sv-more-img[src^="@@"]{visibility:hidden}
.sv-more-tx{display:flex;flex-direction:column;gap:6px;padding:18px 22px 22px}
.sv-more-i b{font-size:17px;letter-spacing:-0.01em}
.sv-more-i span{font-size:14.5px;line-height:1.45;color:#6e6e73}
.sv-cfg{padding:110px 0;background:radial-gradient(800px 420px at 85% 50%,rgba(242,99,34,.18),transparent 65%),#0a0a0b;color:#f5f4f1;overflow:hidden}
.sv-cfg-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:56px;align-items:center}
.sv-cfg-in>div:first-child{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.sv-cfg-h{margin:0;font-size:clamp(36px,4.6vw,64px);line-height:1.02;letter-spacing:-0.045em;font-weight:600}
.sv-cfg-h .serif{color:var(--accent);font-size:1.06em;display:inline-block;padding:0 .08em .2em .12em;margin:0 -.02em -.2em -.12em}
.sv-cfg-art{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.sv-tile{display:flex;align-items:center;gap:12px;padding:16px 18px;border-radius:16px;background:rgba(245,244,241,.05);border:1px solid rgba(245,244,241,.1);color:#a1a1a6}
.sv-tile i{display:grid;place-items:center;width:24px;height:24px;border-radius:7px;border:1.5px solid rgba(245,244,241,.25);font-style:normal;font-size:13px;font-weight:700;color:transparent}
.sv-tile b{font-size:15px;font-weight:600}
.motion .sv-tile{animation:svPick 9s ease-in-out infinite;animation-delay:calc(var(--i) * .7s)}
.motion .sv-tile i{animation:svTick 9s ease-in-out infinite;animation-delay:calc(var(--i) * .7s)}
@keyframes svPick{0%,4%{background:rgba(245,244,241,.05);border-color:rgba(245,244,241,.1);color:#a1a1a6}8%,70%{background:rgba(242,99,34,.14);border-color:rgba(242,99,34,.6);color:#f5f4f1}78%,100%{background:rgba(245,244,241,.05);border-color:rgba(245,244,241,.1);color:#a1a1a6}}
@keyframes svTick{0%,4%{background:transparent;border-color:rgba(245,244,241,.25);color:transparent}8%,70%{background:#f26322;border-color:#f26322;color:#ffffff}78%,100%{background:transparent;border-color:rgba(245,244,241,.25);color:transparent}}
@media (max-width: 1100px){.sv-bento{grid-template-columns:repeat(2,minmax(0,1fr))}.sv-card.wide{grid-column:auto}.sv-card.wide .sv-card-img{width:62%;top:-6%}.sv-card.wide .sv-card-in{padding-top:120px;max-width:none}.sv-more{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width: 900px){
  .sv-hero{padding:100px 0 70px}
  .sv-hero-grid,.sv-grow,.sv-cfg-in{grid-template-columns:minmax(0,1fr);gap:36px}
  .sv-grow-head{position:static}
  .sv-rows a{grid-template-columns:minmax(0,1fr) 24px}
  .sv-rows span{grid-column:1;grid-row:2}
  .sv-rows i{grid-row:1 / 3;grid-column:2}
}
@media (max-width: 640px){
  .sv-bento{grid-template-columns:minmax(0,1fr)}
  .sv-card.big{grid-column:auto;grid-row:auto;min-height:420px}
  .sv-more{grid-template-columns:minmax(0,1fr)}
  .sv-it b{font-size:11.5px;padding:4px 9px}
}
/* ---- SV CSS END ---- */

/* idea into money: the bulb lights up above the box, drops into it, the box spins away, the euro is burnt in where it stood */
.motion .sv-go .sv-burn:not(.sv-euro){animation:svHide .5s ease .15s forwards}
@keyframes svHide{to{opacity:0;transform:translate(-50%,-52%) scale(.4)}}
.motion .sv-burn:not(.sv-euro) path{animation:svDraw 1.1s cubic-bezier(.5,0,.3,1) .3s forwards}
.motion .sv-burn:not(.sv-euro) path:nth-child(2){animation-delay:1.3s;animation-duration:.3s}
.motion .sv-burn:not(.sv-euro) path:nth-child(3){animation-delay:1.5s;animation-duration:.3s}
.motion .sv-go .sv-euro{opacity:1;animation:svGlow2 2.6s ease-in-out 4.7s infinite}
.motion .sv-go .sv-euro path{animation:svDraw 1.3s cubic-bezier(.5,0,.3,1) 3.2s forwards}
.motion .sv-go .sv-euro path:nth-child(2){animation-delay:4s;animation-duration:.35s}
.motion .sv-go .sv-euro path:nth-child(3){animation-delay:4.2s;animation-duration:.35s}
.dg:not(.motion) .sv-burn:not(.sv-euro){display:none}
.dg:not(.motion) .sv-euro{display:block;opacity:1}
/* Magento: the header above is solid (no overlay as in the design), so the hero needs less top space */
.sv-hero{padding-top:72px}
@media (max-width: 900px){.sv-hero{padding-top:48px}}

/* Route box (design initRoute, degriz-gl.js): canvas, cards it lands on, flying cards */
.route-gl{position:fixed;left:0;top:0;width:100vw;height:100vh;pointer-events:none;z-index:79;opacity:0}
.motion .dg-stack.route-wait .sheet{transform:translateY(40px) scale(.12) rotate(var(--r0));opacity:0;transition:transform .5s,opacity .3s}
.motion #reference .rows-clip.route-wait{opacity:0;transform:scale(.25);transition:opacity .25s,transform .4s}
.motion .dg-stack.route-wait .tip{opacity:0;transform:translateY(30px) scale(.94);transition:opacity .2s,transform .3s}
.ptile.route-print::after{content:"";position:absolute;left:22%;right:22%;bottom:-3px;height:5px;border-radius:3px;background:#050506;box-shadow:0 0 0 1px rgba(242,99,34,.55),0 0 14px rgba(242,99,34,.75)}
.pillar.route-hit .pl-art::after{opacity:1}
.pillar.route-hit{--dent:16px}
@media (max-width: 760px){.pillar.route-hit{--dent:11px}}
.pillar.route-hit .pl-art img{transform:translateY(8px) !important;transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.pillar.route-hit{translate:0 6px;box-shadow:0 0 0 1px rgba(10,10,11,.06),0 6px 14px -8px rgba(0,0,0,.35)}
.ptile.route-hit{border-color:var(--accent);background:color-mix(in oklab,var(--accent) 12%,transparent);box-shadow:0 0 0 5px color-mix(in oklab,var(--accent) 16%,transparent)}
.asm-hdr .part.route-hit{box-shadow:0 0 0 4px color-mix(in oklab,var(--accent) 40%,transparent)}
.rf-fly{position:fixed;left:0;top:0;z-index:45;width:180px;border-radius:10px;overflow:hidden;background:#ffffff;border-top:9px solid #f1efeb;box-shadow:0 24px 50px -18px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.08);pointer-events:none;will-change:transform,opacity}
.rf-fly img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}
.mm-fly{position:fixed;left:0;top:0;z-index:80;width:84px;height:84px;border-radius:22px;overflow:hidden;background:#0a0a0b;box-shadow:0 18px 40px -14px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.1);pointer-events:none;will-change:transform,opacity}
.mm-fly img{display:block;width:100%;height:100%;object-fit:cover}

/* Services hero without three.js (3D only on the home page): the design's open box as an image, arriving like the
   route box (2 s, 1.3 s) and spinning away 2.1 s after sv-go, so the euro burns in where it stood */
.sv-box{position:absolute;left:18%;top:20%;width:64%;height:auto;z-index:3;opacity:0;pointer-events:none;-webkit-mask-image:radial-gradient(closest-side,#000 62%,transparent);mask-image:radial-gradient(closest-side,#000 62%,transparent)}
.motion .sv-box{animation:svBoxIn 1.3s cubic-bezier(.2,.7,.1,1) 2s both}
.motion .sv-go .sv-box{animation:svBoxIn 0s both,svBoxOut 1.1s cubic-bezier(.55,0,.35,1) 2.1s both}
@keyframes svBoxIn{0%{opacity:0;transform:translate(38%,46%) scale(.18) rotate(8deg)}100%{opacity:1;transform:none}}
@keyframes svBoxOut{0%{opacity:1;transform:none}100%{opacity:0;transform:translate(42%,-30%) scale(.2) rotate(140deg)}}
.dg:not(.motion) .sv-box{display:none}

/* reviews come unchanged from Google: longer texts are set smaller, so one long review does not stretch the card */
.rev-q.rev-l{font-size:clamp(22px,2.4vw,34px)}
.rev-q.rev-xl{font-size:clamp(18px,1.8vw,26px)}

/* Video heads on dark page heads (design v145, class vh2 + Magento_Theme::degriz/vh-media.phtml + degriz-vh.js).
   .hx-host>*:not(.hx-bg) would make the layer position:relative (0 height), hence the doubled class. */
.vh2{position:relative;isolation:isolate;overflow:hidden}
.vh2>*:not(.vh-media){position:relative;z-index:1}
.vh2.vh2>.vh-media{position:absolute;inset:0;z-index:0;background:#0a0a0b}
.vh2>.hx-bg,.vh2>.og{display:none}
.vh-media .vh-poster,.vh-media .vh-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.vh-mirror .vh-poster,.vh-mirror .vh-video{transform:scaleX(-1)}
.vh-media .vh-video{opacity:0;transition:opacity .6s ease}
.vh-media .vh-video.on{opacity:1}
.vh2 .vh-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,10,11,.92) 0%,rgba(10,10,11,.72) 38%,rgba(10,10,11,.15) 72%,rgba(10,10,11,0) 100%),linear-gradient(0deg,rgba(10,10,11,.9) 0%,rgba(10,10,11,0) 45%)}
@media (max-width: 900px){.vh2 .vh-shade{background:linear-gradient(0deg,rgba(10,10,11,.96) 0%,rgba(10,10,11,.82) 55%,rgba(10,10,11,.45) 100%)}}
/* short (Vzdrzevanje) and centred (Navodila) heads: even, stronger shade instead of the left-to-right one (design v146) */
.xv-hero.vh2 .vh-shade,.xn-hero.vh2 .vh-shade{background:linear-gradient(0deg,rgba(10,10,11,.92),rgba(10,10,11,.7))}
@media (prefers-reduced-motion: reduce){.vh-media .vh-video{display:none}}
/* GeoRedirect store suggestion (degriznet/m2_georedirect, Hyva template with stock Tailwind classes): a floating dark card
   under the header instead of a bar in the page flow - it appears after the private content loads, so in the flow it
   pushed the whole page down (CLS 0.2 on mobile). Same choices as M1: go to the suggested store, or stay. */
.magelan-geo.magelan-geo{position:fixed;z-index:70;top:88px;right:16px;left:auto;width:min(400px,calc(100vw - 32px));margin:0;border:1px solid rgba(245,244,241,.14);border-radius:18px;background:#0a0a0b;color:#f5f4f1;font-size:14px;line-height:1.45;box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}
.magelan-geo .container{max-width:none;width:auto;margin:0;padding:16px 44px 16px 18px;flex-direction:column;align-items:stretch;gap:12px}
.magelan-geo p{margin:0;color:#f5f4f1;font-weight:500}
.magelan-geo .magelan-geo-go,.magelan-geo .magelan-geo-stay{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:999px;font-size:14px;font-weight:600;text-decoration:none;box-shadow:none}
.magelan-geo .magelan-geo-go{background:#f26322;border:1px solid #f26322;color:#fff}
.magelan-geo .magelan-geo-go:hover{background:#d9541a;border-color:#d9541a}
.magelan-geo .magelan-geo-stay{background:transparent;border:1px solid rgba(245,244,241,.3);color:#f5f4f1}
.magelan-geo .magelan-geo-stay:hover{border-color:#f5f4f1}
.magelan-geo .magelan-geo-select{background-color:#1c1c1f;color:#f5f4f1;border-color:rgba(245,244,241,.2);border-radius:12px}
.magelan-geo .magelan-geo-close{top:8px;right:8px;transform:none;color:rgba(245,244,241,.7)}
.magelan-geo .magelan-geo-close:hover{color:#fff}
@media (max-width: 900px){.magelan-geo.magelan-geo{top:76px;right:12px;width:calc(100vw - 24px)}}

/* Home "store assembled from modules" mockup on phones: compact (the whole shop mockup plus its animation fits one
   phone screen below the header) and time-driven (degriz-home.js adds .asm-go when it is in view; the scroll timeline
   of the desktop version gives each part its own, different moment, so the lower cards never moved when seen) */
@media (max-width: 600px){
  .asm-sec{padding-top:56px !important;padding-bottom:84px}
  .asm-stage{margin-top:26px;padding:0 14px}
  .asm-page{border-radius:18px}
  .asm-page > .part:first-child{border-radius:18px 18px 0 0 !important;padding:7px 0 !important;font-size:12px !important}
  .asm-hdr{padding:10px 12px !important}
  .asm-hdr > .part:nth-child(1){font-size:17px !important}
  .asm-hdr > .part:nth-child(4){padding:8px 12px !important;font-size:13px !important}
  .asm-page > .part:nth-child(3){flex-wrap:nowrap !important;gap:15px !important;padding:9px 12px !important;font-size:13px !important;overflow:hidden;white-space:nowrap}
  .asm-page > div:nth-child(4){padding:12px 12px 0 !important;gap:0 !important}
  .asm-main{gap:10px !important}
  .asm-main > .part:first-child{height:84px !important;padding:12px 16px !important;gap:4px !important;border-radius:14px !important;overflow:visible !important}
  .asm-main > .part:first-child > span:nth-child(2){font-size:19px !important}
  .asm-main > .part:first-child > span:nth-child(3){font-size:12px !important}
  .asm-main > div{gap:8px !important}
  .asm-main > div > .part{padding:6px !important;gap:6px !important;border-radius:11px !important}
  .asm-main > div > .part > span:nth-child(2){aspect-ratio:16 / 9 !important;border-radius:7px !important}
  .asm-main > div > .part > span:nth-child(n+3):nth-child(-n+5){display:none !important}
  .asm-main > div > .part > span:nth-child(6) strong{font-size:13px !important}
  .asm-main > div > .part > span:nth-child(6) > span{width:24px !important;height:24px !important}
  .asm-main > div > .part > span:nth-child(6) svg{width:13px !important;height:13px !important}
  .asm-page > div:nth-child(5){padding:10px 12px 0 !important}
  .asm-page > div:nth-child(5) > .part:nth-child(n+2){display:none !important}
  .asm-page > .part:nth-child(6){margin-top:14px !important;padding:12px 14px !important;gap:10px !important;border-radius:0 0 18px 18px !important}
  .asm-page > .part:nth-child(6) > span .sk:nth-child(n+2){display:none}
  .asm-done{bottom:9px;right:12px;padding:7px 12px;font-size:13px;box-shadow:none}

  /* time-driven assembly: each module flies in from a scattered, tilted place, in reading order (--i set by script) */
  .motion .part{animation:none;translate:none;rotate:none}
  .motion .asm-stage:not(.asm-go) .part{opacity:0;transform:translate3d(calc(var(--tx) * .26),calc(var(--ty) * .3 + 40px),0) rotateZ(var(--rz)) scale(.94)}
  .motion .asm-stage.asm-go .part{animation:asmT .9s cubic-bezier(.2,.8,.2,1) calc(var(--i, 0) * 110ms) both}
  /* one label at a time (never two overlapping), each only for a moment as its module lands */
  .motion .asm-stage.asm-go .part .tag{animation:tagT .5s ease calc(var(--t, 0) * 420ms + 900ms) both}
  .motion .asm-stage:not(.asm-go) .asm-done{opacity:0}
  .motion .asm-stage.asm-go .asm-done{animation:doneIn .6s ease 8s both}
}
@keyframes asmT{from{opacity:0;transform:translate3d(calc(var(--tx) * .26),calc(var(--ty) * .3 + 40px),0) rotateZ(var(--rz)) scale(.94);box-shadow:0 24px 40px -18px rgba(0,0,0,.5)}to{opacity:1;transform:none;box-shadow:0 0 0 rgba(0,0,0,0)}}
@keyframes tagT{0%{opacity:0;transform:translateY(4px)}20%,75%{opacity:1;transform:none}100%{opacity:0}}
.dg-footer{content-visibility:auto;contain-intrinsic-size:auto 650px}@media(max-width:767px){.dg-footer{contain-intrinsic-size:auto 1300px}}

/* 3D scenes: a still poster (2D canvas, degriz-gl.js) fills the scene's box until the first WebGL frame, then the live canvas
   fades in over the poster (300 ms, same box, no layout shift) and the poster fades out. Without WebGL the poster stays. */
.hero-gl canvas[data-hero-gl],.cta-sec canvas[data-cta-gl]{opacity:0;transition:opacity .3s ease}
.hero-gl canvas[data-hero-gl].dg-ready,.cta-sec canvas[data-cta-gl].dg-ready{opacity:1}
.dg-poster{transition:opacity .3s ease;pointer-events:none}
.dg-poster.dg-out{opacity:0}
@media (prefers-reduced-motion:reduce){.hero-gl canvas[data-hero-gl],.cta-sec canvas[data-cta-gl],.dg-poster{transition:none}}

/* ---- minicart drawer "Moja košarica": the site's pill buttons and spacing (markup and behaviour are Hyvä's) ---- */
#cart-drawer{width:min(480px,100vw)!important;max-width:100vw;padding:26px 28px 28px;border:0;border-radius:24px 0 0 24px;background:#fff;color:#1d1d1f;box-shadow:-24px 0 60px -20px rgba(0,0,0,.4)}
#cart-drawer::backdrop{background:rgba(10,10,11,.5)}
#cart-drawer-title{margin:0;font-size:26px;line-height:1.15;letter-spacing:-0.02em}
#cart-drawer-title strong{font-weight:700}
#cart-drawer-title + .btn{display:grid;place-items:center;width:40px;height:40px;min-height:0;padding:0!important;border:1px solid #d2d2d7;border-radius:50%;background:none;color:#1d1d1f}
#cart-drawer-title + .btn:hover{background:#f5f5f7}
#cart-drawer ul>li{gap:16px;padding:18px 0;border-color:#ececf0}
#cart-drawer ul>li img{border-radius:12px;object-fit:cover}
#cart-drawer li .space-y-4{display:flex;flex-direction:column;gap:10px}
#cart-drawer li .space-y-4>*{margin:0}
#cart-drawer li p.text-lg{font-size:16px;line-height:1.35;color:#1d1d1f}
#cart-drawer li p.text-lg strong{font-weight:600}
#cart-drawer li .price-box{flex:none;font-size:16px;font-weight:700;white-space:nowrap}
#cart-drawer li dl{font-size:13.5px;color:#6e6e73}
#cart-drawer li .justify-end .btn{display:inline-grid;place-items:center;width:38px;height:38px;min-height:0;padding:0!important;border:1px solid #d2d2d7;border-radius:50%;background:none;color:#1d1d1f;transition:border-color .2s,color .2s,background-color .2s}
#cart-drawer li .justify-end .btn:hover{border-color:#f26322;color:#c2410c;background:none}
#cart-drawer dl.justify-between{align-items:baseline;margin:0;padding:18px 0 0;border-top:1px solid #ececf0}
#cart-drawer dl.justify-between dt{font-size:15px;font-weight:500;color:#6e6e73}
#cart-drawer dl.justify-between dd{margin:0;font-size:22px;font-weight:700;letter-spacing:-0.01em;color:#1d1d1f}
#cart-drawer .flex-col.gap-y-4{gap:10px;margin-top:18px}
#cart-drawer .btn-primary,#cart-drawer .btn-secondary{display:inline-flex;align-items:center;justify-content:center;width:100%;height:52px;min-height:0;padding:0 26px;border-radius:999px;font-size:17px;font-weight:600;line-height:1;text-decoration:none;box-shadow:none;transition:filter .2s,border-color .2s,background-color .2s}
#cart-drawer .btn-primary{border:1px solid #f26322;background:#f26322;color:#fff}
#cart-drawer .btn-primary:hover{filter:brightness(1.07);background:#f26322;color:#fff}
#cart-drawer .btn-secondary{border:1px solid #d2d2d7;background:transparent;color:#1d1d1f}
#cart-drawer .btn-secondary:hover{border-color:#1d1d1f;background:transparent;color:#1d1d1f}
@media (max-width:640px){#cart-drawer{padding:20px 18px 22px;border-radius:0}#cart-drawer-title{font-size:23px}}