/* VoIPAI.nl — ontwerpsysteem "Ground". Donker, rustig, technisch. Eén accent (goud), spaarzaam gebruikt. */
@font-face{font-family:Geist;src:url(/fonts/Geist-Variable.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(/fonts/GeistMono-Variable.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --ground:#0c0b0a;--s1:#12110f;--s2:#181715;--s3:#201f1c;
  --line:rgba(238,236,230,.11);--line2:rgba(238,236,230,.2);
  --text:#eeece6;--body:#cfccc4;--muted:#a3a097;
  --gold:#d9ab68;--gold-hi:#f0c987;--ink:#14110b;
  --sans:Geist,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --w:1180px;--gut:clamp(20px,5vw,56px);--r:8px;
  --nav:56px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--ground)}
body{position:relative;margin:0;min-height:100vh;color:var(--body);font:400 1rem/1.65 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img{max-width:100%;height:auto}
a{color:var(--text);text-decoration-color:rgba(217,171,104,.55);text-underline-offset:.2em;text-decoration-thickness:1px;transition:color .2s,text-decoration-color .2s}
a:hover{color:var(--gold-hi);text-decoration-color:var(--gold-hi)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
::selection{background:rgba(217,171,104,.32);color:var(--text)}
.skip{position:absolute;left:-9999px;top:8px;z-index:200;background:var(--gold);color:var(--ink);padding:.6rem 1rem;border-radius:var(--r);font-weight:500;text-decoration:none}
.skip:focus{left:12px}
.wrap{max-width:var(--w);margin:0 auto;padding:0 var(--gut)}

/* ---------- achtergrond: lichtlek, raster, golflijn ---------- */
.bg{position:absolute;inset:0 0 auto 0;height:min(1100px,130svh);z-index:-1;pointer-events:none;overflow:hidden;
  -webkit-mask-image:linear-gradient(#000 0,#000 55%,transparent 100%);mask-image:linear-gradient(#000 0,#000 55%,transparent 100%)}
.bg .leak{position:absolute;inset:-20% -10% 0 -10%;
  background:
    radial-gradient(58% 52% at 16% 0%,rgba(217,171,104,.46),transparent 74%),
    radial-gradient(46% 42% at 88% 2%,rgba(240,201,135,.20),transparent 76%),
    radial-gradient(80% 58% at 50% -8%,rgba(176,120,52,.34),transparent 72%);
  animation:drift 38s ease-in-out infinite alternate}
.bg .grid{position:absolute;top:0;bottom:0;left:50%;width:min(100% - 2*var(--gut),calc(var(--w) - 2*var(--gut)));transform:translateX(-50%);
  background:linear-gradient(90deg,var(--line) 1px,transparent 1px) 0 0/calc(100%/6) 100%;border-right:1px solid var(--line)}
.bg .waves{position:absolute;inset:0}
.bg .waves svg{width:100%;height:100%;display:block}
.bg .waves path{fill:none;stroke-linecap:round;vector-effect:non-scaling-stroke}
.bg .waves .base{stroke:url(#gw);stroke-width:1}
.bg .waves .glint path{stroke-dasharray:.01 1900;animation:spark 18s linear infinite}
.bg .waves .gl-a{stroke:#d9893a;stroke-width:22;opacity:.45;filter:url(#b1)}
.bg .waves .gl-b{stroke:#f6c47a;stroke-width:8;opacity:.8;filter:url(#b2)}
.bg .waves .gl-c{stroke:#fff6e2;stroke-width:3.5}
@keyframes drift{from{transform:translate3d(-2%,0,0) scale(1)}to{transform:translate3d(3%,2%,0) scale(1.06)}}
@keyframes spark{from{stroke-dashoffset:200}to{stroke-dashoffset:-1900}}

/* ---------- navigatie ---------- */
.topnav{position:sticky;top:0;z-index:100;background:rgba(12,11,10,.6);-webkit-backdrop-filter:saturate(160%) blur(16px);backdrop-filter:saturate(160%) blur(16px);border-bottom:1px solid var(--line)}
.topnav .bar{max-width:var(--w);margin:0 auto;padding:0 var(--gut);height:var(--nav);display:flex;align-items:center;gap:.5rem}
.topnav .brand{display:flex;align-items:center;gap:.65rem;margin-right:auto;text-decoration:none;color:var(--text)}
.topnav .brand img{display:block;width:30px;height:30px}
.topnav .wm{font:500 1.02rem/1 var(--sans);letter-spacing:-.02em}
.topnav .wm span{color:var(--muted)}
.topnav .links{display:flex;gap:2rem;list-style:none;margin:0 1.2rem 0 0;padding:0}
.topnav .links a{font-size:.88rem;color:var(--muted);text-decoration:none;transition:color .15s}
.topnav .links a:hover,.topnav .links a[aria-current=page]{color:var(--text)}
.topnav details{position:static}
.topnav summary{list-style:none;cursor:pointer;color:var(--muted);width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:var(--r);transition:color .15s,background .15s}
.topnav summary::-webkit-details-marker{display:none}
.topnav summary:hover,.topnav details[open]>summary{color:var(--text);background:rgba(238,236,230,.07)}
.topnav .burger{display:none}
.topnav .panel{position:fixed;top:var(--nav);left:0;right:0;background:rgba(12,11,10,.97);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-bottom:1px solid var(--line);max-height:calc(100svh - var(--nav));overflow:auto;animation:pin .22s ease-out}
.topnav .panel .in{max-width:var(--w);margin:0 auto;padding:1.6rem var(--gut) 2.2rem}
.topnav .ph{font:400 .7rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 1rem}
.topnav .big{list-style:none;margin:0;padding:0}
.topnav .big li{border-top:1px solid var(--line)}
.topnav .big a{display:block;padding:.85rem 0;font:400 clamp(1.4rem,3.2vw,2rem)/1.2 var(--sans);letter-spacing:-.03em;color:var(--text);text-decoration:none}
.topnav .big a:hover{color:var(--gold-hi)}
.topnav .burger .l1,.topnav .burger .l2{transition:transform .25s,opacity .2s;transform-origin:50% 50%}
.topnav .burger[open] .l1{transform:translateY(3px) rotate(45deg)}
.topnav .burger[open] .l2{transform:translateY(-3px) rotate(-45deg)}
@keyframes pin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.notice{border-bottom:1px solid var(--line);background:rgba(217,171,104,.06)}
.notice p{margin:0;max-width:var(--w);margin-inline:auto;padding:.5rem var(--gut);font:400 .72rem/1.5 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:center}
.notice a{color:var(--text)}

/* ---------- typografie ---------- */
h1,h2,h3,h4{color:var(--text);font-family:var(--sans);margin:0;text-wrap:balance}
h1{font-weight:400;font-size:clamp(2.6rem,6.2vw,4.9rem);line-height:1;letter-spacing:-.04em}
h1 span{color:var(--muted)}
h2{font-weight:400;font-size:clamp(1.9rem,4.2vw,3.2rem);line-height:1.06;letter-spacing:-.035em}
h3{font-weight:500;font-size:1.2rem;line-height:1.3;letter-spacing:-.015em}
p{margin:0 0 1.15rem;text-wrap:pretty}
.lead{font-size:clamp(1.08rem,1.7vw,1.3rem);line-height:1.5;color:var(--body);max-width:36rem}
.muted{color:var(--muted)}
.label{display:inline-flex;align-items:center;gap:.6rem;margin:0 0 1.4rem;font:400 .72rem/1.5 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.label::before{content:"";width:7px;height:7px;background:var(--gold);flex:none}
code{font-family:var(--mono);font-size:.86em;background:var(--s2);border:1px solid var(--line);border-radius:4px;padding:.12em .42em;color:var(--text)}
.hash{display:inline-block;max-width:100%;overflow-wrap:anywhere;font-size:.78rem;color:var(--muted)}
ul,ol{margin:0 0 1.2rem;padding-left:1.2rem}
li{margin:.4rem 0}
li::marker{color:var(--muted)}
strong{color:var(--text);font-weight:500}

/* ---------- knoppen ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.65rem;padding:.9rem 1.35rem;border-radius:var(--r);border:1px solid transparent;background:var(--gold);color:var(--ink);font:500 .95rem/1.2 var(--sans);letter-spacing:-.005em;text-decoration:none;cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .2s}
.btn:hover{background:var(--gold-hi);color:var(--ink);transform:translateY(-1px)}
.btn.arrow::after{content:"\2192";transition:transform .2s}
.btn.arrow:hover::after{transform:translateX(3px)}
.btn.ghost{background:transparent;color:var(--text);border-color:var(--line2)}
.btn.ghost:hover{background:rgba(238,236,230,.06);border-color:rgba(238,236,230,.4);color:var(--text)}
.actions{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.hero .actions .btn{white-space:nowrap;padding-inline:1.15rem}

/* ---------- opbouw ---------- */
main{display:block}
.hero{padding:clamp(56px,9vw,128px) 0 clamp(40px,6vw,88px)}
.hero .cols2{display:grid;grid-template-columns:minmax(0,6.2fr) minmax(0,4.6fr);gap:clamp(24px,5vw,72px);align-items:end}
.hero h1{margin:0}
.hero .side .lead{margin-bottom:1.8rem}
.sec{padding:clamp(64px,10vw,136px) 0;border-top:1px solid var(--line)}
.sec>.wrap>.label{margin-bottom:1.1rem}
.sec h2{max-width:20ch;margin-bottom:clamp(28px,4vw,56px)}
.phead{padding:clamp(56px,9vw,120px) 0 clamp(28px,4vw,56px)}
.phead h1{font-size:clamp(2.3rem,5.6vw,4.2rem);max-width:16ch}
.phead .lead{margin-top:1.6rem}
.prose{max-width:44rem;padding-bottom:clamp(64px,9vw,128px)}
.prose h2{font-size:clamp(1.5rem,2.6vw,2rem);letter-spacing:-.03em;margin:clamp(40px,5vw,64px) 0 1rem;padding-top:clamp(28px,4vw,44px);border-top:1px solid var(--line)}
.prose h2:first-child{border-top:0;padding-top:0;margin-top:0}
.prose h3{margin:2rem 0 .5rem}
.prose .muted{font-size:.95rem}
.card{background:var(--s1);border:1px solid var(--line);border-radius:var(--r);padding:clamp(20px,3vw,32px);margin:0 0 1.2rem}
.card h2,.card h3{margin-top:0}
.card>:last-child{margin-bottom:0}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1rem;margin:1rem 0}
.cols .card{margin:0;padding:1.1rem 1.25rem}

/* kader om productbeeld (haarlijn met hoekstreepjes) */
.frame{position:relative;border:1px solid var(--line2);border-radius:var(--r);padding:clamp(10px,2vw,22px);background:linear-gradient(180deg,rgba(238,236,230,.035),rgba(238,236,230,.01))}
.frame::before,.frame::after{content:"";position:absolute;width:11px;height:11px;border:1px solid var(--gold);opacity:.85}
.frame::before{left:-1px;top:-1px;border-right:0;border-bottom:0;border-radius:var(--r) 0 0 0}
.frame::after{right:-1px;bottom:-1px;border-left:0;border-top:0;border-radius:0 0 var(--r) 0}
.frame .demo{margin:0}
.frame>.cap{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin:.9rem .2rem 0;font:400 .7rem/1.5 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}

/* producten */
.products{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:1rem}
a.product,.product{position:relative;display:flex;flex-direction:column;gap:1rem;background:var(--s1);border:1px solid var(--line);border-radius:var(--r);padding:clamp(24px,3.4vw,44px);color:var(--body);text-decoration:none;transition:border-color .25s,background .25s}
a.product:hover{border-color:rgba(217,171,104,.55);background:var(--s2);color:var(--body)}
.product h3{font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:400;letter-spacing:-.03em;line-height:1.1}
.product p{margin:0;max-width:34rem}
.product .tag{align-self:flex-start;font:400 .68rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);background:var(--gold);padding:.35rem .55rem;border-radius:4px}
.product.soon .tag{background:transparent;color:var(--muted);border:1px solid var(--line2)}
.product .more{margin-top:auto;padding-top:1.2rem;font:500 .92rem/1 var(--sans);color:var(--text)}
.product .more::after{content:"\2192";display:inline-block;margin-left:.55rem;transition:transform .2s}
a.product:hover .more::after{transform:translateX(4px)}
.facts{display:flex;flex-wrap:wrap;gap:.5rem;margin:.3rem 0 0;padding:0;list-style:none}
.facts li{margin:0;font:400 .7rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:.45rem .6rem}

/* uitgangspunten */
.pr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line)}
.pr>div{padding:clamp(22px,3vw,36px) clamp(0px,2.4vw,32px) 0 0}
.pr>div+div{border-left:1px solid var(--line);padding-left:clamp(0px,2.4vw,32px)}
.pr .n{display:block;margin:0 0 2.4rem;font:400 .72rem/1 var(--mono);letter-spacing:.08em;color:var(--muted)}
.pr h3{font-size:1.5rem;font-weight:400;letter-spacing:-.03em;margin:0 0 .7rem}
.pr p{margin:0;max-width:20rem}

/* slotband */
.cta{padding:clamp(72px,11vw,150px) 0;border-top:1px solid var(--line);text-align:left}
.cta h2{max-width:16ch;margin-bottom:1.6rem}
.cta p{max-width:32rem}

/* installatiestappen */
ol.steps{list-style:none;counter-reset:s;padding:0;margin:0 0 2rem}
ol.steps>li{counter-increment:s;position:relative;margin:0;padding:1.4rem 0 1.4rem 4.2rem;border-top:1px solid var(--line)}
ol.steps>li:last-child{border-bottom:1px solid var(--line)}
ol.steps>li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:1.55rem;font:400 .8rem/1 var(--mono);letter-spacing:.06em;color:var(--muted)}
ol.steps .cols{margin:1rem 0 0}

/* figuren en FAQ */
figure.shot{margin:2rem 0 2.4rem;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--s1)}
figure.shot img{display:block;width:100%;height:auto}
figure.shot figcaption{padding:.8rem 1rem;font:400 .72rem/1.5 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--muted);border-top:1px solid var(--line)}
.faq h3{margin:0;padding-top:1.4rem;border-top:1px solid var(--line)}
.faq h3+p{margin:.5rem 0 1.4rem}
.meta{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.6rem 0 0;padding:0;list-style:none}
.meta li{margin:0;font:400 .7rem/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:.45rem .6rem}
.dl{margin:1.8rem 0 0;display:flex;flex-direction:column;gap:.9rem;align-items:flex-start}

/* voettekst */
footer.site{border-top:1px solid var(--line);padding:clamp(48px,7vw,96px) 0 32px;background:linear-gradient(180deg,transparent,rgba(238,236,230,.02))}
footer.site .top{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,56px)}
footer.site .brandcol img{display:block;width:min(15rem,70%);height:auto;mix-blend-mode:lighten;margin:0 0 1.2rem}
footer.site .brandcol p{max-width:22rem;color:var(--muted);font-size:.92rem}
footer.site .fh{font:400 .7rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 1.1rem}
footer.site ul{list-style:none;margin:0;padding:0}
footer.site li{margin:.5rem 0}
footer.site li a{color:var(--body);text-decoration:none;font-size:.95rem}
footer.site li a:hover{color:var(--gold-hi)}
footer.site .bottom{margin-top:clamp(36px,5vw,64px);padding-top:1.4rem;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font:400 .7rem/1.6 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .hero .cols2{grid-template-columns:1fr;align-items:start}
  .products{grid-template-columns:1fr}
  .pr{grid-template-columns:1fr}
  .pr>div,.pr>div+div{padding:1.6rem 0 1.6rem;border-left:0;border-top:1px solid var(--line)}
  .pr>div:first-child{border-top:0}
  .pr .n{margin-bottom:1rem}
  footer.site .top{grid-template-columns:1fr 1fr}
  footer.site .brandcol{grid-column:1/-1}
  .bg .grid{background-size:calc(100%/3) 100%}
}
@media (max-width:760px){
  .topnav .links{display:none}
  .topnav .burger{display:block}
  .topnav .wm{font-size:.98rem}
  ol.steps>li{padding-left:3rem}
  .btn{width:100%}
  .actions{width:100%}
  .dl .btn{width:100%}
}
@media (max-width:420px){
  :root{--gut:18px}
  h1{font-size:2.55rem}
  footer.site .top{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .bg .waves .glint{display:none}
}

/* demo-animatie extensiepagina */
.demo{container-type:inline-size;position:relative;max-width:100%;margin:0;border:1px solid var(--line2);border-radius:6px;overflow:hidden;background:var(--s1)}
.demo *{box-sizing:border-box}
.d-bar{position:relative;height:6.4cqw;background:linear-gradient(180deg,#24221e,#1b1a17);display:flex;align-items:center;gap:1.2cqw;padding:0 2cqw;min-height:30px}
.d-bar i{width:1.5cqw;height:1.5cqw;min-width:8px;min-height:8px;border-radius:50%;background:#6b7075}
.d-url{margin-left:2cqw;flex:1;max-width:52cqw;background:rgba(0,0,0,.28);border-radius:99px;font-size:max(10px,2.1cqw);padding:.5cqw 2cqw;color:var(--muted)}
.d-ti{position:absolute;right:2.6cqw;top:50%;width:3.6cqw;height:3.6cqw;min-width:18px;min-height:18px;transform:translateY(-50%);border-radius:28%;background:radial-gradient(circle at 35% 30%,#f0c987,#b98a47);box-shadow:0 0 0 1px rgba(0,0,0,.4)}
.d-page{position:relative;height:50cqw;background:#f4f6fb;color:#1a2340;overflow:hidden;font-size:max(11px,2.6cqw)}
.d-h{position:absolute;left:5cqw;top:4cqw;font-size:max(18px,4.2cqw)}
.d-page p{position:absolute;left:5cqw;margin:0;white-space:nowrap}
.d-l1{top:15cqw}.d-l2{top:23cqw}.d-l3{top:31cqw}
.d-n,.d-n2{text-decoration:underline;padding:.5cqw 1cqw;margin:0 -1cqw;border-radius:3px}
.d-n{animation:dHi 12s infinite}
.d-rip{position:absolute;left:23cqw;top:16.4cqw;width:3cqw;height:3cqw;border-radius:50%;border:2px solid #d9ab68;opacity:0;animation:dRip 12s infinite}
.d-cur{position:absolute;left:70cqw;top:40cqw;opacity:0;z-index:5;filter:drop-shadow(0 1px 2px rgba(0,0,0,.4));animation:dCur 12s infinite}
.d-grow{position:absolute;right:2cqw;bottom:2cqw;max-width:60cqw;padding:1.4cqw 3cqw;background:#131312;border:1px solid #d9ab68;border-radius:2px;color:#ece8e0;font-size:max(11px,2.3cqw);transform:translateY(160%);animation:dGrow 12s infinite;z-index:4}
.d-pop{position:absolute;right:2.4cqw;top:1.4cqw;width:33cqw;padding:1.6cqw;border-radius:12px;background:linear-gradient(180deg,rgba(32,31,28,.98),rgba(20,19,17,.98));border:1px solid rgba(255,255,255,.2);box-shadow:0 14px 40px rgba(0,0,0,.5);color:#f0ede6;opacity:0;transform:translateY(-6px);animation:dPop 12s infinite;z-index:3;font-size:max(9px,1.8cqw)}
.d-tabs{display:flex;gap:1cqw;margin-bottom:1.2cqw;color:var(--muted);font-size:max(8px,1.5cqw);white-space:nowrap}
.d-tabs .on{color:#d9ab68;border-bottom:2px solid #d9ab68}
.d-in{background:rgba(0,0,0,.28);border-radius:8px;padding:.9cqw 1.4cqw;margin-bottom:1.2cqw;min-height:3.4cqw;font-size:max(10px,2.2cqw)}
.d-type{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;max-width:0;animation:dType 12s infinite steps(14)}
.d-keys{display:grid;grid-template-columns:repeat(3,1fr);gap:.8cqw}
.d-keys i{font-style:normal;text-align:center;border-radius:7px;padding:.5cqw 0;background:rgba(255,255,255,.1)}
.d-call{margin-top:1.2cqw;text-align:center;padding:.8cqw;border-radius:8px;background:linear-gradient(180deg,#e6bd7e,#c4964f);color:#17120a;font-weight:600}
.fl{position:absolute;left:0;white-space:nowrap;color:#b98a47;opacity:0;font-size:max(10px,2.1cqw);pointer-events:none;animation:dFl 16s linear infinite}
.f1{top:44cqw;animation-delay:0s}.f2{top:36cqw;animation-delay:-5s;animation-duration:19s}.f3{top:9cqw;animation-delay:-9s;animation-duration:22s}.f4{top:27cqw;animation-delay:-13s;animation-duration:17s}.f5{top:41cqw;animation-delay:-3s;animation-duration:24s}
.d-cap{display:grid;padding:1.6cqw 3cqw;background:var(--s1);color:var(--text);font-size:max(12px,2.3cqw);min-height:8cqw;align-items:center}
.d-cap span{grid-area:1/1;opacity:0}
.d-cap .c1{animation:dC1 12s infinite}.d-cap .c2{animation:dC2 12s infinite}.d-cap .c3{animation:dC3 12s infinite}
.demo-note{font:400 .7rem/1.5 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin:.9rem 0 0}
@keyframes dHi{0%,20%{background:transparent;color:inherit}24%,58%{background:#d9ab68;color:#17120a}62%,100%{background:transparent;color:inherit}}
@keyframes dRip{0%,29%{opacity:0;transform:scale(.4)}30%{opacity:.8;transform:scale(.4)}40%,100%{opacity:0;transform:scale(2.2)}}
@keyframes dCur{0%{left:70cqw;top:40cqw;opacity:0}4%{opacity:1}20%{left:27cqw;top:17cqw;transform:scale(1)}29%{left:27cqw;top:17cqw;transform:scale(1)}30%{transform:scale(.8)}32%{transform:scale(1)}56%{left:27cqw;top:17cqw;opacity:1}66%{left:92cqw;top:-3cqw;transform:scale(1);opacity:1}67.5%{transform:scale(.8)}69%{transform:scale(1)}74%{opacity:0}100%{left:70cqw;top:40cqw;opacity:0}}
@keyframes dGrow{0%,31%{transform:translateY(160%)}35%,56%{transform:translateY(0)}60%,100%{transform:translateY(160%)}}
@keyframes dPop{0%,67%{opacity:0;transform:translateY(-6px)}71%,94%{opacity:1;transform:none}98%,100%{opacity:0;transform:translateY(-6px)}}
@keyframes dType{0%,72%{max-width:0}84%,100%{max-width:20ch}}
@keyframes dFl{0%{transform:translateX(-30cqw);opacity:0}12%{opacity:.5}85%{opacity:.4}100%{transform:translateX(112cqw) translateY(-4cqw);opacity:0}}
@keyframes dC1{0%,24%{opacity:1}28%,96%{opacity:0}99%,100%{opacity:1}}
@keyframes dC2{0%,26%{opacity:0}30%,58%{opacity:1}62%,100%{opacity:0}}
@keyframes dC3{0%,62%{opacity:0}67%,94%{opacity:1}98%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.demo *{animation:none!important}.fl,.d-cur,.d-rip{display:none}.d-n{background:#d9ab68;color:#17120a}.d-grow{transform:none}.d-pop{opacity:1;transform:none}.d-type{max-width:20ch}.d-cap{gap:.3rem}.d-cap span{grid-area:auto;opacity:1}}