/* Kombi: this site's design and header, with the hero and the dark appearance of the Nebula version. */

/* 1. Hero: the headline leads and the content sits a little above the middle of the first screen.
   Buttons keep this site's shape; the Nebula hero stylesheet only sets their colours. */
.hero .hero-text h1{margin-top:0}
@media(min-width:801px){.hero .hero-stage{padding-block:clamp(12px,2vh,32px) clamp(64px,13vh,160px)}}
@media(max-width:800px){.hero .hero-stage{padding-block:12px clamp(28px,6vh,64px)}}

/* The hero's ground fades into the band below instead of ending in a hard line. The fade carries that band's top
   edge colours and stays within the hero's bottom padding, clear of the buttons. */
[data-theme=dark] .hero{position:relative;--hero-fade:#161129}
.hero .hero-stage{position:relative;z-index:1}
[data-theme=dark] .hero::after{content:"";position:absolute;inset:auto 0 0;height:clamp(64px,13vh,160px);background:var(--hero-fade);-webkit-mask-image:linear-gradient(to bottom,transparent,#000);mask-image:linear-gradient(to bottom,transparent,#000);pointer-events:none}
@media(max-width:800px){.hero::after{height:clamp(28px,6vh,64px)}}

/* The product band in turn fades into the page below, within its own bottom padding */
.gallery-section{position:relative}
.gallery-section>.container{position:relative;z-index:1}
[data-theme=dark] .gallery-section::before{content:"";position:absolute;inset:0 0 auto;height:clamp(160px,22vw,320px);background:linear-gradient(to bottom,#161129,rgb(22 17 41 / .7) 30%,rgb(22 17 41 / .3) 65%,rgb(22 17 41 / 0));pointer-events:none}
[data-theme=dark] .gallery-section::after{content:"";position:absolute;inset:auto 0 0;height:clamp(180px,24vw,340px);background:linear-gradient(to bottom,color-mix(in srgb,var(--white) 0%,transparent),color-mix(in srgb,var(--white) 18%,transparent) 25%,color-mix(in srgb,var(--white) 48%,transparent) 50%,color-mix(in srgb,var(--white) 78%,transparent) 75%,var(--white));pointer-events:none}
@media(max-width:800px){.gallery-section::after{height:120px}}

/* The scroll timeline with the travelling icon is not part of this page */
.journey-track,.journey-orbit{display:none}

/* 2. Dark appearance as in the Nebula version */
:root[data-theme=dark]{color-scheme:dark;--navy:#ece8f7;--blue:#7552d6;--blue-hover:#8463e0;--accent:#e2459b;--accent-text:#ff8fc8;--pale:#161129;--line:#2f2752;--muted:#b3abcc;--lead:#cfc8e3;--frame-border:#2f2752;--secondary-hover:rgb(196 176 255 / .12);--band:#161129;--field-border:#5a4f86;--disabled:#2f2752;--header-bg:rgba(15,11,31,.78);--shadow:0 0 0;--white:#0f0b1f;--surface:#1e1838;--tint:rgb(196 176 255 / .1);--tint-accent:rgb(255 143 200 / .14);--link:#c4b0ff;--dark:#1a1434;--dark-rgb:26 20 52;--dark-hover:#2e2554;--tab-border:#5f557f;--on-dark-accent:#ff8fc8;--on-dark-muted:#cbc5dc;--on-dark-text:#ebe7f5;--focus:#c4b0ff}
[data-theme=dark] body{background:var(--white)}
[data-theme=dark] :is(.overline,.role-tag,.site-header nav a:hover,.site-header nav a[aria-current],.button-secondary,.form-preview a,.form-privacy a,.faq-list summary::after,.faq-list summary:hover){color:var(--link)}
[data-theme=dark] .button-secondary{border-color:var(--link)}
[data-theme=dark] .button-primary{box-shadow:0 6px 20px rgb(117 82 214 / .35)}
[data-theme=dark] .gallery-section{background:linear-gradient(160deg,#1a1434 0%,#2a1a52 55%,#3a1a4f 100%)}
[data-theme=dark] :is(.demo-motion,.flow-preview video){filter:brightness(.9)}
[data-theme=dark] .flow-preview{background:var(--surface);box-shadow:0 0 0 1px rgb(255 255 255 / .08),0 10px 24px rgb(0 0 0 / .4),0 28px 64px rgb(0 0 0 / .5)}
[data-theme=dark] :is(.screen-frame,.feature-shot,.detail-grid figure,.flow,.flow-steps li){background:var(--surface)}
[data-theme=dark] .flow-status:nth-of-type(odd){background:#b52a7a}
[data-theme=dark] :is(.faq,.detail-band){background:transparent}
[data-theme=dark] .demo-section{background:radial-gradient(45% 55% at 82% 55%,rgb(117 82 214 / .24),transparent 70%),radial-gradient(40% 50% at 12% 60%,rgb(226 69 155 / .12),transparent 70%)}
[data-theme=dark] footer{background:transparent;border-top:1px solid var(--line)}
[data-theme=dark] .demo-form{background:var(--surface);box-shadow:inset 0 0 0 1px var(--line),0 30px 80px rgb(0 0 0 / .45)}
[data-theme=dark] :is(.field input,.field select,.field textarea){background:var(--white);color:var(--navy)}
[data-theme=dark] :is(.field input:focus,.field select:focus,.field textarea:focus){background:var(--white);border-color:var(--link);box-shadow:0 0 0 4px rgb(196 176 255 / .2)}
[data-theme=dark] :is(.field input:disabled,.field select:disabled,.field textarea:disabled){background:var(--pale)}
[data-theme=dark] .demo-form .button:disabled{color:var(--muted)}
[data-theme=dark] .field-error{color:#ff8a80}
[data-theme=dark] :is(.field input[aria-invalid="true"],.field input:user-invalid,.field textarea:user-invalid){border-color:#ff8a80}
[data-theme=dark] .form-error{color:#ffb4ab;background:#3a1614;border-left-color:#ff8a80}
@media(prefers-reduced-transparency:reduce){:root[data-theme=dark]{--header-bg:#0f0b1f}[data-theme=dark] .site-header{background:#0f0b1f}}
@media(prefers-contrast:more){:root:root[data-theme=dark]{--line:#6a5f96;--field-border:#8a7fb8}}

.asset-window{background:linear-gradient(160deg,#19123B,#35206D);border-block:1px solid var(--line)}
[data-theme=dark] .asset-window{position:relative;background:transparent;border-block:0}
[data-theme=dark] .asset-window::before,[data-theme=dark] .asset-window::after{content:"";position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,#c4b0ff 18%,#ff8fc8 50%,#c4b0ff 82%,transparent);box-shadow:0 0 12px rgb(255 143 200 / .55);pointer-events:none}
[data-theme=dark] .asset-window::before{top:0}
[data-theme=dark] .asset-window::after{bottom:0}

:root:not([data-theme=dark]) .gallery-section{background:var(--white);color:var(--navy)}
:root:not([data-theme=dark]) .section-intro-light .overline{color:var(--blue)}
:root:not([data-theme=dark]) :is(.section-intro-light>p:last-child,.gallery-detail>p:not(.gallery-index)){color:var(--muted)}
:root:not([data-theme=dark]) .gallery-index{color:var(--accent-text)}
:root:not([data-theme=dark]) .gallery-tabs button{color:var(--navy);border-color:var(--line)}
:root:not([data-theme=dark]) .gallery-tabs button[aria-selected="true"]{background:var(--navy);color:#fff;border-color:var(--navy)}
:root:not([data-theme=dark]) .gallery-tabs button:hover:not([aria-selected="true"]){background:var(--pale)}

[data-theme=dark] .detail-band{position:relative;isolation:isolate;background:none}
[data-theme=dark] .detail-band::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(50% 60% at 76% 50%,rgb(117 82 214 / .2),transparent 70%),linear-gradient(160deg,#1a1434 0%,#2a1a52 55%,#3a1a4f 100%);--fade:clamp(160px,22vw,320px);-webkit-mask-image:linear-gradient(to bottom,transparent,rgb(0 0 0 / .3) calc(var(--fade) * .35),rgb(0 0 0 / .7) calc(var(--fade) * .7),#000 var(--fade),#000 calc(100% - var(--fade)),rgb(0 0 0 / .78) calc(100% - var(--fade) * .75),rgb(0 0 0 / .48) calc(100% - var(--fade) * .5),rgb(0 0 0 / .18) calc(100% - var(--fade) * .25),transparent);mask-image:linear-gradient(to bottom,transparent,rgb(0 0 0 / .3) calc(var(--fade) * .35),rgb(0 0 0 / .7) calc(var(--fade) * .7),#000 var(--fade),#000 calc(100% - var(--fade)),rgb(0 0 0 / .78) calc(100% - var(--fade) * .75),rgb(0 0 0 / .48) calc(100% - var(--fade) * .5),rgb(0 0 0 / .18) calc(100% - var(--fade) * .25),transparent);pointer-events:none}

.flow-play{position:absolute;top:5px;right:5px;display:grid;place-items:center;width:20px;height:20px;overflow:hidden;box-sizing:border-box;border:1px solid var(--accent);border-radius:4px;background:var(--surface,#fff);pointer-events:none}
.flow-play svg{width:8px;height:8px;fill:var(--accent)}
.flow-play::after{content:"";position:absolute;inset:-50%;background:linear-gradient(115deg,transparent 35%,rgb(255 255 255 / .9) 50%,transparent 65%);transform:translateX(-100%)}
:root:not([data-theme=dark]) .flow-play::after{background:linear-gradient(115deg,transparent 35%,rgb(167 139 250 / .95) 50%,transparent 65%)}
.flow.is-shimmering .flow-play::after{animation:flow-play-shine .9s ease-in-out 2}
@keyframes flow-play-shine{to{transform:translateX(100%)}}
@media(max-width:800px){.flow-play{display:none}}

.gallery-side{display:flex;flex-direction:column;align-items:flex-start}
.gallery-side .gallery-detail{padding-bottom:0}
.gallery-side .button{margin-top:clamp(22px,3.4vh,36px)}
.detail-cta{margin-top:28px}

.features{overflow-x:clip}
.feature-row{position:relative;isolation:isolate}
[data-theme=dark] .feature-row:not(.feature-row-reverse)::before{content:"";position:absolute;z-index:-1;inset:-30% -10% -30% 22%;background:radial-gradient(closest-side,rgb(117 82 214 / .3),rgb(117 82 214 / .12) 55%,transparent);pointer-events:none}

[data-theme=dark] .brand-logo-light,:root:not([data-theme=dark]) .brand-logo-dark{display:none}
.theme-toggle{display:grid;place-items:center;flex:none;width:40px;height:40px;margin-left:-16px;padding:0;border:1px solid var(--line);border-radius:var(--radius);background:transparent;color:var(--navy);cursor:pointer;transition:background .2s,border-color .2s}
.theme-toggle:hover{background:var(--secondary-hover);border-color:var(--link,var(--blue))}
.theme-toggle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
[data-theme=dark] .theme-moon,:root:not([data-theme=dark]) .theme-sun{display:none}
@media(max-width:800px){.header-inner{gap:16px}.theme-toggle{margin-left:auto}.site-header .header-action{margin-left:0}}