@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap";/*! tailwindcss v4.3.1 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1}}}@layer theme{:root,:host{--font-sans:"Inter", ui-sans-serif, system-ui, sans-serif;--font-serif:ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;--font-mono:"JetBrains Mono", ui-monospace, SFMono-Regular, monospace;--color-red-200:oklch(88.5% .062 18.334);--color-red-300:oklch(80.8% .114 19.571);--color-red-500:oklch(63.7% .237 25.331);--color-red-950:oklch(25.8% .092 26.042);--color-slate-100:oklch(96.8% .007 247.896);--color-slate-200:oklch(92.9% .013 255.508);--color-slate-300:oklch(86.9% .022 252.894);--color-slate-400:oklch(70.4% .04 256.788);--color-slate-500:oklch(55.4% .046 257.417);--color-slate-700:oklch(37.2% .044 257.287);--color-slate-800:oklch(27.9% .041 260.031);--color-slate-900:oklch(20.8% .042 265.755);--color-slate-950:oklch(12.9% .042 264.695);--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-xs:20rem;--container-sm:24rem;--container-lg:32rem;--container-xl:36rem;--container-2xl:42rem;--container-3xl:48rem;--container-4xl:56rem;--container-5xl:64rem;--container-6xl:72rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height: 1.5 ;--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--text-3xl:1.875rem;--text-3xl--line-height: 1.2 ;--text-4xl:2.25rem;--text-4xl--line-height:calc(2.5 / 2.25);--text-5xl:3rem;--text-5xl--line-height:1;--font-weight-light:300;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--tracking-tight:-.025em;--tracking-wide:.025em;--tracking-wider:.05em;--tracking-widest:.1em;--leading-tight:1.25;--leading-relaxed:1.625;--radius-lg:.5rem;--radius-xl:.75rem;--radius-2xl:1rem;--radius-3xl:1.5rem;--animate-spin:spin 1s linear infinite;--animate-ping:ping 1s cubic-bezier(0, 0, .2, 1) infinite;--animate-pulse:pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;--blur-xs:4px;--blur-md:12px;--blur-lg:16px;--blur-xl:24px;--aspect-video:16 / 9;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--font-display:"Space Grotesk", sans-serif}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){-webkit-appearance:button;-moz-appearance:button;appearance:button}::file-selector-button{-webkit-appearance:button;-moz-appearance:button;appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.pointer-events-none{pointer-events:none}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.sticky{position:sticky}.top-0{top:0}.top-1{top:var(--spacing)}.top-1\/2{top:50%}.top-4{top:calc(var(--spacing) * 4)}.top-12{top:calc(var(--spacing) * 12)}.right-0{right:0}.right-1{right:var(--spacing)}.right-3{right:calc(var(--spacing) * 3)}.right-4{right:calc(var(--spacing) * 4)}.right-10{right:calc(var(--spacing) * 10)}.bottom-1{bottom:var(--spacing)}.bottom-6{bottom:calc(var(--spacing) * 6)}.left-1{left:var(--spacing)}.left-1\/2{left:50%}.left-4{left:calc(var(--spacing) * 4)}.left-10{left:calc(var(--spacing) * 10)}.z-40{z-index:40}.mx-2{margin-inline:calc(var(--spacing) * 2)}.mx-auto{margin-inline:auto}.mt-1{margin-top:var(--spacing)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mt-3{margin-top:calc(var(--spacing) * 3)}.mt-6{margin-top:calc(var(--spacing) * 6)}.mt-8{margin-top:calc(var(--spacing) * 8)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.mb-6{margin-bottom:calc(var(--spacing) * 6)}.ml-auto{margin-left:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-flex{display:inline-flex}.aspect-square{aspect-ratio:1}.aspect-video{aspect-ratio:var(--aspect-video)}.h-1{height:var(--spacing)}.h-1\.5{height:calc(var(--spacing) * 1.5)}.h-2\.5{height:calc(var(--spacing) * 2.5)}.h-3{height:calc(var(--spacing) * 3)}.h-3\.5{height:calc(var(--spacing) * 3.5)}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-8{height:calc(var(--spacing) * 8)}.h-14{height:calc(var(--spacing) * 14)}.h-16{height:calc(var(--spacing) * 16)}.h-24{height:calc(var(--spacing) * 24)}.h-28{height:calc(var(--spacing) * 28)}.h-40{height:calc(var(--spacing) * 40)}.h-\[400px\]{height:400px}.h-\[600px\]{height:600px}.h-full{height:100%}.min-h-\[50px\]{min-height:50px}.min-h-\[350px\]{min-height:350px}.min-h-screen{min-height:100vh}.w-1\.5{width:calc(var(--spacing) * 1.5)}.w-1\/2{width:50%}.w-2\.5{width:calc(var(--spacing) * 2.5)}.w-3{width:calc(var(--spacing) * 3)}.w-3\.5{width:calc(var(--spacing) * 3.5)}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-6{width:calc(var(--spacing) * 6)}.w-8{width:calc(var(--spacing) * 8)}.w-14{width:calc(var(--spacing) * 14)}.w-16{width:calc(var(--spacing) * 16)}.w-56{width:calc(var(--spacing) * 56)}.w-\[400px\]{width:400px}.w-\[600px\]{width:600px}.w-\[calc\(100\%-3rem\)\]{width:calc(100% - 3rem)}.w-full{width:100%}.max-w-2xl{max-width:var(--container-2xl)}.max-w-3xl{max-width:var(--container-3xl)}.max-w-4xl{max-width:var(--container-4xl)}.max-w-5xl{max-width:var(--container-5xl)}.max-w-6xl{max-width:var(--container-6xl)}.max-w-\[160px\]{max-width:160px}.max-w-lg{max-width:var(--container-lg)}.max-w-sm{max-width:var(--container-sm)}.max-w-xl{max-width:var(--container-xl)}.max-w-xs{max-width:var(--container-xs)}.flex-1{flex:1}.flex-shrink-0{flex-shrink:0}.-translate-x-1\/2{--tw-translate-x: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y)}.-translate-y-1\/2{--tw-translate-y: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y)}.rotate-180{rotate:180deg}.animate-ping{animation:var(--animate-ping)}.animate-pulse{animation:var(--animate-pulse)}.animate-spin{animation:var(--animate-spin)}.cursor-pointer{cursor:pointer}.resize-none{resize:none}.appearance-none{-webkit-appearance:none;-moz-appearance:none;appearance:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-1{gap:var(--spacing)}.gap-1\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-4{gap:calc(var(--spacing) * 4)}.gap-5{gap:calc(var(--spacing) * 5)}.gap-6{gap:calc(var(--spacing) * 6)}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-3>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-5>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-6>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-8>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-12>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 12) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 12) * calc(1 - var(--tw-space-y-reverse)))}.self-start{align-self:flex-start}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-hidden{overflow:hidden}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-3xl{border-radius:var(--radius-3xl)}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-xl{border-radius:var(--radius-xl)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-\[\#1b2535\]{border-color:#1b2535}.border-\[\#1d2b42\]\/30{border-color:#1d2b424d}.border-\[\#1f2e46\]{border-color:#1f2e46}.border-\[\#1f2e46\]\/60{border-color:#1f2e4699}.border-\[\#27d7ff\]{border-color:#27d7ff}.border-\[\#27d7ff\]\/10{border-color:#27d7ff1a}.border-\[\#27d7ff\]\/20{border-color:#27d7ff33}.border-\[\#27d7ff\]\/25{border-color:#27d7ff40}.border-\[\#27d7ff\]\/35{border-color:#27d7ff59}.border-\[\#27d7ff\]\/40{border-color:#27d7ff66}.border-red-500\/30{border-color:#fb2c364d}@supports (color:color-mix(in lab,red,red)){.border-red-500\/30{border-color:color-mix(in oklab,var(--color-red-500) 30%,transparent)}}.border-red-950\/25{border-color:#46080940}@supports (color:color-mix(in lab,red,red)){.border-red-950\/25{border-color:color-mix(in oklab,var(--color-red-950) 25%,transparent)}}.border-slate-700{border-color:var(--color-slate-700)}.border-slate-800{border-color:var(--color-slate-800)}.border-slate-800\/60{border-color:#1d293d99}@supports (color:color-mix(in lab,red,red)){.border-slate-800\/60{border-color:color-mix(in oklab,var(--color-slate-800) 60%,transparent)}}.border-slate-900{border-color:var(--color-slate-900)}.border-slate-900\/40{border-color:#0f172b66}@supports (color:color-mix(in lab,red,red)){.border-slate-900\/40{border-color:color-mix(in oklab,var(--color-slate-900) 40%,transparent)}}.border-slate-900\/60{border-color:#0f172b99}@supports (color:color-mix(in lab,red,red)){.border-slate-900\/60{border-color:color-mix(in oklab,var(--color-slate-900) 60%,transparent)}}.border-slate-950{border-color:var(--color-slate-950)}.bg-\[\#0d131f\]\/70{background-color:#0d131fb3}.bg-\[\#0e1624\]\/85{background-color:#0e1624d9}.bg-\[\#0e1624\]\/95{background-color:#0e1624f2}.bg-\[\#27d7ff\]{background-color:#27d7ff}.bg-\[\#27d7ff\]\/2{background-color:#27d7ff05}.bg-\[\#27d7ff\]\/3{background-color:#27d7ff08}.bg-\[\#27d7ff\]\/5{background-color:#27d7ff0d}.bg-\[\#27d7ff\]\/8{background-color:#27d7ff14}.bg-\[\#27d7ff\]\/10{background-color:#27d7ff1a}.bg-\[\#27d7ff\]\/90{background-color:#27d7ffe6}.bg-\[\#141f30\]{background-color:#141f30}.bg-\[\#06090e\]{background-color:#06090e}.bg-\[\#06090e\]\/45{background-color:#06090e73}.bg-\[\#06090e\]\/50{background-color:#06090e80}.bg-\[\#06090e\]\/60{background-color:#06090e99}.bg-\[\#06090e\]\/70{background-color:#06090eb3}.bg-black{background-color:var(--color-black)}.bg-red-500\/10{background-color:#fb2c361a}@supports (color:color-mix(in lab,red,red)){.bg-red-500\/10{background-color:color-mix(in oklab,var(--color-red-500) 10%,transparent)}}.bg-red-950\/10{background-color:#4608091a}@supports (color:color-mix(in lab,red,red)){.bg-red-950\/10{background-color:color-mix(in oklab,var(--color-red-950) 10%,transparent)}}.bg-slate-500{background-color:var(--color-slate-500)}.bg-slate-900\/60{background-color:#0f172b99}@supports (color:color-mix(in lab,red,red)){.bg-slate-900\/60{background-color:color-mix(in oklab,var(--color-slate-900) 60%,transparent)}}.bg-slate-950{background-color:var(--color-slate-950)}.bg-slate-950\/50{background-color:#02061880}@supports (color:color-mix(in lab,red,red)){.bg-slate-950\/50{background-color:color-mix(in oklab,var(--color-slate-950) 50%,transparent)}}.bg-slate-950\/80{background-color:#020618cc}@supports (color:color-mix(in lab,red,red)){.bg-slate-950\/80{background-color:color-mix(in oklab,var(--color-slate-950) 80%,transparent)}}.bg-transparent{background-color:#0000}.bg-gradient-to-b{--tw-gradient-position:to bottom in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.from-\[\#0a0f18\]{--tw-gradient-from:#0a0f18;--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.via-\[\#05080e\]{--tw-gradient-via:#05080e;--tw-gradient-via-stops:var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-via-stops)}.to-\[\#010204\]{--tw-gradient-to:#010204;--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.fill-current{fill:currentColor}.object-contain{object-fit:contain}.object-cover{object-fit:cover}.p-1{padding:var(--spacing)}.p-1\.5{padding:calc(var(--spacing) * 1.5)}.p-4{padding:calc(var(--spacing) * 4)}.p-5{padding:calc(var(--spacing) * 5)}.p-6{padding:calc(var(--spacing) * 6)}.p-8{padding:calc(var(--spacing) * 8)}.p-10{padding:calc(var(--spacing) * 10)}.p-12{padding:calc(var(--spacing) * 12)}.px-1\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.px-6{padding-inline:calc(var(--spacing) * 6)}.px-8{padding-inline:calc(var(--spacing) * 8)}.py-0\.5{padding-block:calc(var(--spacing) * .5)}.py-1{padding-block:var(--spacing)}.py-1\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-3\.5{padding-block:calc(var(--spacing) * 3.5)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-5{padding-block:calc(var(--spacing) * 5)}.py-10{padding-block:calc(var(--spacing) * 10)}.pt-1{padding-top:var(--spacing)}.pt-1\.5{padding-top:calc(var(--spacing) * 1.5)}.pt-2{padding-top:calc(var(--spacing) * 2)}.pt-4{padding-top:calc(var(--spacing) * 4)}.pt-8{padding-top:calc(var(--spacing) * 8)}.pr-10{padding-right:calc(var(--spacing) * 10)}.pb-2{padding-bottom:calc(var(--spacing) * 2)}.pb-5{padding-bottom:calc(var(--spacing) * 5)}.pb-14{padding-bottom:calc(var(--spacing) * 14)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.font-display{font-family:var(--font-display)}.font-mono{font-family:var(--font-mono)}.font-serif{font-family:var(--font-serif)}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[8px\]{font-size:8px}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.leading-tight{--tw-leading:var(--leading-tight);line-height:var(--leading-tight)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-light{--tw-font-weight:var(--font-weight-light);font-weight:var(--font-weight-light)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-\[0\.24em\]{--tw-tracking:.24em;letter-spacing:.24em}.tracking-\[0\.25em\]{--tw-tracking:.25em;letter-spacing:.25em}.tracking-tight{--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight)}.tracking-wide{--tw-tracking:var(--tracking-wide);letter-spacing:var(--tracking-wide)}.tracking-wider{--tw-tracking:var(--tracking-wider);letter-spacing:var(--tracking-wider)}.tracking-widest{--tw-tracking:var(--tracking-widest);letter-spacing:var(--tracking-widest)}.whitespace-nowrap{white-space:nowrap}.text-\[\#9eefff\]{color:#9eefff}.text-\[\#27d7ff\]{color:#27d7ff}.text-red-200{color:var(--color-red-200)}.text-red-300{color:var(--color-red-300)}.text-slate-100{color:var(--color-slate-100)}.text-slate-200{color:var(--color-slate-200)}.text-slate-300{color:var(--color-slate-300)}.text-slate-400{color:var(--color-slate-400)}.text-slate-500{color:var(--color-slate-500)}.text-slate-700{color:var(--color-slate-700)}.text-slate-950{color:var(--color-slate-950)}.text-white{color:var(--color-white)}.uppercase{text-transform:uppercase}.italic{font-style:italic}.placeholder-slate-800::placeholder{color:var(--color-slate-800)}.opacity-0{opacity:0}.opacity-60{opacity:.6}.opacity-70{opacity:.7}.shadow-2xl{--tw-shadow:0 25px 50px -12px var(--tw-shadow-color,#00000040);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-\[0_0_20px_rgba\(39\,215\,255\,0\.2\)\]{--tw-shadow:0 0 20px var(--tw-shadow-color,#27d7ff33);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-\[0_0_20px_rgba\(39\,215\,255\,0\.3\)\]{--tw-shadow:0 0 20px var(--tw-shadow-color,#27d7ff4d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-\[0_0_20px_rgba\(39\,215\,255\,0\.18\)\]{--tw-shadow:0 0 20px var(--tw-shadow-color,#27d7ff2e);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-\[0_0_25px_rgba\(39\,215\,255\,0\.22\)\]{--tw-shadow:0 0 25px var(--tw-shadow-color,#27d7ff38);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-\[0_2px_12px_rgba\(39\,215\,255\,0\.08\)\]{--tw-shadow:0 2px 12px var(--tw-shadow-color,#27d7ff14);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-\[0_10px_30px_rgba\(0\,0\,0\,0\.5\)\]{--tw-shadow:0 10px 30px var(--tw-shadow-color,#00000080);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xl{--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,#0000001a), 0 8px 10px -6px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.blur-\[120px\]{--tw-blur:blur(120px);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.blur-\[140px\]{--tw-blur:blur(140px);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.backdrop-blur-lg{--tw-backdrop-blur:blur(var(--blur-lg));-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.backdrop-blur-md{--tw-backdrop-blur:blur(var(--blur-md));-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.backdrop-blur-xl{--tw-backdrop-blur:blur(var(--blur-xl));-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.backdrop-blur-xs{--tw-backdrop-blur:blur(var(--blur-xs));-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-150{--tw-duration:.15s;transition-duration:.15s}.duration-250{--tw-duration:.25s;transition-duration:.25s}.duration-300{--tw-duration:.3s;transition-duration:.3s}.duration-350{--tw-duration:.35s;transition-duration:.35s}.duration-500{--tw-duration:.5s;transition-duration:.5s}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;user-select:none}@media(hover:hover){.group-hover\:scale-105:is(:where(.group):hover *){--tw-scale-x:105%;--tw-scale-y:105%;--tw-scale-z:105%;scale:var(--tw-scale-x) var(--tw-scale-y)}.group-hover\:rotate-45:is(:where(.group):hover *){rotate:45deg}.group-hover\:opacity-100:is(:where(.group):hover *){opacity:1}}.selection\:bg-\[\#27d7ff\]\/20 ::selection{background-color:#27d7ff33}.selection\:bg-\[\#27d7ff\]\/20::selection{background-color:#27d7ff33}.selection\:text-\[\#27d7ff\] ::selection{color:#27d7ff}.selection\:text-\[\#27d7ff\]::selection{color:#27d7ff}@media(hover:hover){.hover\:scale-110:hover{--tw-scale-x:110%;--tw-scale-y:110%;--tw-scale-z:110%;scale:var(--tw-scale-x) var(--tw-scale-y)}.hover\:scale-\[1\.02\]:hover{scale:1.02}.hover\:border-\[\#27d7ff\]\/30:hover{border-color:#27d7ff4d}.hover\:border-\[\#27d7ff\]\/40:hover{border-color:#27d7ff66}.hover\:border-slate-700\/60:hover{border-color:#31415899}@supports (color:color-mix(in lab,red,red)){.hover\:border-slate-700\/60:hover{border-color:color-mix(in oklab,var(--color-slate-700) 60%,transparent)}}.hover\:bg-\[\#20bacc\]:hover{background-color:#20bacc}.hover\:bg-\[\#27d7ff\]\/5:hover{background-color:#27d7ff0d}.hover\:bg-\[\#06090e\]\/95:hover{background-color:#06090ef2}.hover\:bg-red-500:hover{background-color:var(--color-red-500)}.hover\:bg-slate-900:hover{background-color:var(--color-slate-900)}.hover\:text-\[\#27d7ff\]:hover{color:#27d7ff}.hover\:text-slate-300:hover{color:var(--color-slate-300)}.hover\:text-white:hover{color:var(--color-white)}.hover\:shadow-\[0_0_20px_rgba\(39\,215\,255\,0\.05\)\]:hover{--tw-shadow:0 0 20px var(--tw-shadow-color,#27d7ff0d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}}.focus\:border-\[\#27d7ff\]\/30:focus{border-color:#27d7ff4d}.focus\:border-\[\#27d7ff\]\/40:focus{border-color:#27d7ff66}.focus\:ring-1:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus\:ring-\[\#27d7ff\]\/30:focus{--tw-ring-color:oklab(81.3974% -.110032 -.0877982/.3)}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.active\:scale-\[0\.98\]:active{scale:.98}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-30:disabled{opacity:.3}.disabled\:opacity-50:disabled{opacity:.5}.disabled\:opacity-60:disabled{opacity:.6}@media(hover:hover){.disabled\:hover\:bg-\[\#27d7ff\]:disabled:hover{background-color:#27d7ff}.disabled\:hover\:text-slate-400:disabled:hover{color:var(--color-slate-400)}}@media(min-width:40rem){.sm\:block{display:block}.sm\:grid-cols-9{grid-template-columns:repeat(9,minmax(0,1fr))}.sm\:gap-2{gap:calc(var(--spacing) * 2)}}@media(min-width:48rem){.md\:col-span-3{grid-column:span 3/span 3}.md\:w-64{width:calc(var(--spacing) * 64)}.md\:w-auto{width:auto}.md\:flex-none{flex:none}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:flex-row{flex-direction:row}.md\:items-center{align-items:center}.md\:items-end{align-items:flex-end}.md\:items-start{align-items:flex-start}.md\:self-center{align-self:center}.md\:p-5{padding:calc(var(--spacing) * 5)}.md\:p-6{padding:calc(var(--spacing) * 6)}.md\:p-8{padding:calc(var(--spacing) * 8)}.md\:py-10{padding-block:calc(var(--spacing) * 10)}.md\:text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.md\:text-4xl{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}.md\:text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.md\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}}@media(min-width:64rem){.lg\:col-span-4{grid-column:span 4/span 4}.lg\:col-span-8{grid-column:span 8/span 8}.lg\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.lg\:text-5xl{font-size:var(--text-5xl);line-height:var(--tw-leading,var(--text-5xl--line-height))}}.brand-glow{box-shadow:0 0 25px #27d7ff26}.brand-glow-lg{box-shadow:0 0 45px #27d7ff40}.border-brand-glow{box-shadow:inset 0 0 10px #27d7ff1a,0 0 15px #27d7ff1a}}html,body{font-family:var(--font-sans);color:#f1f5f9;background-color:#0b0f17;overflow-x:hidden}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:#0f172a99}::-webkit-scrollbar-thumb{background:#27d7ff4d;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#27d7ff99}@keyframes wave{0%,to{transform:scaleY(.3)}50%{transform:scaleY(1)}}.wave-bar{animation:1.2s ease-in-out infinite wave}@keyframes fade-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.animate-fade-in{animation:.28s ease-out both fade-in}select option{color:#e2e8f0;background:#06090e}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{75%,to{opacity:0;transform:scale(2)}}@keyframes pulse{50%{opacity:.5}}

/* --- TVC endpoint UI refinements --- */
.solid-form-card {
  background: #0b111c;
  border: 1px solid #1f2e46;
}

.bottom-generate-bar {
  background: #0b111c;
  border: 1px solid #1f2e46;
  border-radius: 1rem;
  padding: 1rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.custom-select-wrap {
  position: relative;
  width: 100%;
}
.custom-select-label {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .5rem;
  color: #cbd5e1;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.custom-select-prefix {
  color: #27d7ff;
  font-family: ui-serif, Georgia, serif;
  font-style: italic;
  font-size: .875rem;
}
.custom-select-label-icon {
  color: #27d7ff;
}
.custom-select-trigger {
  width: 100%;
  min-height: 52px;
  border: 1px solid #0f172a;
  background: #06090e;
  border-radius: .75rem;
  color: #e2e8f0;
  padding: .65rem .85rem .65rem .8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  text-align: left;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.custom-select-trigger:hover,
.custom-select-trigger.is-open {
  border-color: rgba(39,215,255,.35);
  box-shadow: 0 0 0 1px rgba(39,215,255,.1);
}
.custom-select-main {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-width: 0;
}
.custom-select-icon,
.custom-select-option-icon {
  width: 30px;
  height: 30px;
  border-radius: .75rem;
  background: rgba(39,215,255,.08);
  color: #27d7ff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.custom-select-copy,
.custom-select-option-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.custom-select-value,
.custom-select-option-text span {
  font-size: .75rem;
  font-weight: 700;
  color: #e2e8f0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.custom-select-detail,
.custom-select-option-text small {
  font-size: .625rem;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.custom-select-chevron {
  width: 1rem;
  height: 1rem;
  color: #64748b;
  transition: transform .2s ease, color .2s ease;
  flex: 0 0 auto;
}
.custom-select-chevron.rotate-180 {
  transform: rotate(180deg);
  color: #27d7ff;
}
.custom-select-dot {
  width: .45rem;
  height: .45rem;
  border-radius: 999px;
  background: #27d7ff;
}
.custom-select-menu {
  position: absolute;
  z-index: 80;
  top: calc(100% + .5rem);
  left: 0;
  width: 100%;
  max-height: 310px;
  overflow: auto;
  border: 1px solid #1f2e46;
  background: #070b12;
  border-radius: 1rem;
  box-shadow: 0 18px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(39,215,255,.06);
  padding: .45rem;
}
.custom-select-menu.align-right {
  left: auto;
  right: 0;
}
.custom-select-option {
  width: 100%;
  border: 1px solid transparent;
  border-radius: .8rem;
  padding: .55rem;
  display: flex;
  align-items: center;
  gap: .65rem;
  background: transparent;
  text-align: left;
  transition: background .15s ease, border-color .15s ease;
}
.custom-select-option:hover,
.custom-select-option.active {
  background: rgba(39,215,255,.07);
  border-color: rgba(39,215,255,.18);
}
.custom-select-option.active .custom-select-option-icon {
  background: #27d7ff;
  color: #020617;
}

.visual-upload-zone {
  border: 1px dashed #1b2535;
  background: #06090e;
  border-radius: 1rem;
  padding: .85rem;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.visual-upload-zone.is-dragging {
  border-color: #27d7ff;
  box-shadow: 0 0 0 1px rgba(39,215,255,.15), 0 0 25px rgba(39,215,255,.08);
}
.visual-upload-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
  gap: .75rem;
}
.visual-upload-tile {
  aspect-ratio: 1 / 1;
  border-radius: .9rem;
  border: 1px solid #152033;
  background: #0b111c;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  min-width: 0;
}
.visual-upload-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .25s ease;
}
.visual-upload-tile.has-image:hover img {
  transform: scale(1.05);
}
.visual-upload-tile.add-tile {
  cursor: pointer;
  color: #94a3b8;
  border-style: dashed;
  background: linear-gradient(145deg, #06090e, #0b111c);
  transition: border-color .2s ease, color .2s ease, transform .2s ease;
}
.visual-upload-tile.add-tile:hover {
  border-color: rgba(39,215,255,.55);
  color: #27d7ff;
  transform: translateY(-1px);
}
.visual-upload-tile.add-tile:disabled {
  cursor: not-allowed;
  opacity: .65;
  transform: none;
}
.visual-upload-icon {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 999px;
  background: rgba(39,215,255,.08);
  color: #27d7ff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.visual-upload-title {
  font-size: .72rem;
  color: #e2e8f0;
  font-weight: 700;
}
.visual-upload-subtitle {
  font-size: .56rem;
  color: #64748b;
  font-weight: 600;
  letter-spacing: .08em;
}
.visual-upload-badge {
  position: absolute;
  left: .35rem;
  bottom: .35rem;
  border-radius: 999px;
  padding: .18rem .42rem;
  font-size: .5rem;
  font-weight: 800;
  background: rgba(2,6,23,.82);
  color: #cbd5e1;
}
.visual-upload-badge.uploaded {
  background: rgba(39,215,255,.92);
  color: #020617;
}
.visual-upload-remove {
  position: absolute;
  top: .35rem;
  right: .35rem;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 999px;
  background: rgba(2,6,23,.78);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .15s ease, background .15s ease;
}
.visual-upload-tile:hover .visual-upload-remove {
  opacity: 1;
}
.visual-upload-remove:hover {
  background: #ef4444;
}
.visual-upload-help {
  margin-top: .75rem;
  color: #64748b;
  font-size: .7rem;
  line-height: 1.55;
}

.advanced-toggle {
  width: 100%;
  min-height: 54px;
  background: #06090e;
  border: 1px solid #0f172a;
  border-radius: 1rem;
  color: #e2e8f0;
  padding: .95rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.advanced-toggle:hover {
  border-color: rgba(39,215,255,.32);
  box-shadow: 0 0 0 1px rgba(39,215,255,.08);
}
.advanced-toggle-title {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .9rem;
}
.advanced-toggle-title svg {
  color: #27d7ff;
}
.advanced-toggle-arrow {
  color: #64748b;
  font-size: 1.35rem;
  line-height: 1;
  transition: transform .2s ease, color .2s ease;
}
.advanced-toggle-arrow.open {
  transform: rotate(180deg);
  color: #27d7ff;
}
.advanced-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
  padding-top: 1rem;
}
.advanced-language {
  grid-column: 1 / -1;
}

.bottom-showcase-section {
  margin-top: .25rem;
}
.bottom-showcase-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.1rem;
}
.bottom-tab-switch {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem;
  border: 1px solid #0f172a;
  background: #06090e;
  border-radius: 1rem;
}
.bottom-tab-switch button {
  border-radius: .75rem;
  padding: .7rem 1rem;
  color: #94a3b8;
  font-size: .75rem;
  font-weight: 800;
  font-family: var(--font-display);
  transition: color .2s ease, background .2s ease;
}
.bottom-tab-switch button.active {
  background: #27d7ff;
  color: #020617;
}
.history-filter-select {
  width: min(260px, 100%);
}
.bottom-panel-flow {
  width: 100%;
}
.bottom-showcase-meta {
  color: #64748b;
  font-size: .75rem;
  margin-bottom: .85rem;
}
.empty-wide-state {
  border: 1px solid #0f172a;
  background: #06090e;
  border-radius: 1.25rem;
  padding: 2rem;
  color: #64748b;
  text-align: center;
  font-size: .8rem;
}
.project-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 1.1rem;
}
.project-tile {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 1.25rem;
  border: 1px solid #1f2e46;
  min-height: 240px;
  aspect-ratio: 1 / 1.05;
  background: #07111a;
  text-align: left;
  display: block;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.project-tile:hover,
.project-tile.active {
  transform: translateY(-2px);
  border-color: rgba(39,215,255,.65);
  box-shadow: 0 18px 40px rgba(0,0,0,.35), 0 0 0 1px rgba(39,215,255,.08);
}
.project-tile.failed {
  border-color: rgba(239,68,68,.35);
  background: #16060b;
}
.project-tile-media,
.project-tile-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -3;
}
.project-tile-fallback {
  background:
    radial-gradient(circle at 70% 18%, rgba(39,215,255,.35), transparent 20%),
    radial-gradient(circle at 30% 65%, rgba(14,165,233,.14), transparent 35%),
    linear-gradient(145deg, #0d1724, #05080e 70%);
}
.project-tile.failed .project-tile-fallback {
  background: radial-gradient(circle at 20% 20%, rgba(248,113,113,.2), transparent 30%), linear-gradient(145deg, #210610, #08030a 72%);
}
.project-tile.example.cyan .project-tile-fallback,
.project-tile.example.cyan { background: radial-gradient(circle at 70% 18%, rgba(39,215,255,.35), transparent 22%), linear-gradient(145deg, #0a1724, #04070e 72%); }
.project-tile.example.night { background: radial-gradient(circle at 72% 18%, rgba(96,165,250,.28), transparent 22%), linear-gradient(145deg, #0b1022, #04070e 72%); }
.project-tile.example.gold { background: radial-gradient(circle at 68% 18%, rgba(251,191,36,.25), transparent 22%), linear-gradient(145deg, #171206, #04070e 72%); }
.project-tile.example.violet { background: radial-gradient(circle at 72% 18%, rgba(168,85,247,.28), transparent 22%), linear-gradient(145deg, #130d24, #04070e 72%); }
.project-tile.example.dark { background: radial-gradient(circle at 72% 18%, rgba(148,163,184,.18), transparent 22%), linear-gradient(145deg, #101827, #04070e 72%); }
.project-tile-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(0,0,0,.16), rgba(0,0,0,.55) 62%, rgba(0,0,0,.86));
}
.project-tile-menu {
  position: absolute;
  top: .85rem;
  right: .85rem;
  width: 2.55rem;
  height: 2.55rem;
  border-radius: 999px;
  background: rgba(2,6,23,.68);
  border: 1px solid rgba(255,255,255,.08);
  color: #dbeafe;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: .08em;
  font-weight: 900;
}
.project-tile-status {
  position: absolute;
  top: .85rem;
  left: .85rem;
  max-width: calc(100% - 4.7rem);
  border-radius: 999px;
  padding: .35rem .55rem;
  background: rgba(39,215,255,.12);
  border: 1px solid rgba(39,215,255,.22);
  color: #9eefff;
  font-size: .58rem;
  font-weight: 900;
  font-family: var(--font-mono);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.project-tile-status.failed {
  background: rgba(239,68,68,.14);
  border-color: rgba(239,68,68,.3);
  color: #fecaca;
}
.project-tile-copy {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: .32rem;
}
.project-tile-copy strong {
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.1rem;
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -.03em;
}
.project-tile-copy small {
  color: #cbd5e1;
  font-size: .74rem;
  line-height: 1.45;
  font-weight: 650;
}
.project-tile-copy em {
  color: #64748b;
  font-size: .62rem;
  font-style: normal;
  font-family: var(--font-mono);
}

@media (max-width: 760px) {
  .advanced-grid {
    grid-template-columns: 1fr;
  }
  .bottom-showcase-head {
    flex-direction: column;
    align-items: stretch;
  }
  .bottom-tab-switch {
    display: flex;
    width: 100%;
  }
  .bottom-tab-switch button {
    flex: 1;
  }
  .history-filter-select {
    width: 100%;
  }
  .project-card-grid {
    grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  }
  .project-tile {
    min-height: 190px;
  }
}

/* --- Revisi workspace TVC --- */
.custom-select-menu.menu-up {
  top: auto;
  bottom: calc(100% + .5rem);
}

.visual-upload-tile.is-uploading {
  border-color: rgba(39,215,255,.24);
  background: radial-gradient(circle at 50% 35%, rgba(39,215,255,.12), transparent 42%), #07111a;
}
.visual-upload-loader-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  color: #94a3b8;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.visual-upload-loader {
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  border: 2px solid rgba(39,215,255,.16);
  border-top-color: #27d7ff;
  animation: spin .8s linear infinite;
  box-shadow: 0 0 18px rgba(39,215,255,.12);
}
.visual-upload-tile.is-uploading .visual-upload-remove {
  opacity: 0;
  pointer-events: none;
}
.generate-side-status {
  min-width: 0;
  color: #94a3b8;
  border-left: 1px solid #1f2e46;
  padding-left: .75rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.generate-side-status.error {
  color: #fca5a5;
}
.bottom-showcase-section {
  margin-top: 4.5rem;
  padding-top: 1.25rem;
}
@media (max-width: 760px) {
  .bottom-showcase-section {
    margin-top: 3.5rem;
  }
  .generate-side-status {
    display: none;
  }
}

/* --- Custom audio preview --- */
.custom-audio-preview {
  position: relative;
  display: flex;
  align-items: center;
  gap: .85rem;
  border: 1px solid #152033;
  background: linear-gradient(135deg, #070b12, #0b111c);
  border-radius: 1rem;
  padding: .85rem;
  box-shadow: inset 0 0 0 1px rgba(39,215,255,.025);
}
.custom-audio-play {
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 999px;
  background: #27d7ff;
  color: #020617;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  box-shadow: 0 0 22px rgba(39,215,255,.18);
  transition: transform .18s ease, background .18s ease, opacity .18s ease;
}
.custom-audio-play:hover {
  transform: scale(1.04);
  background: #9eefff;
}
.custom-audio-play:disabled {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
}
.custom-audio-body {
  min-width: 0;
  flex: 1;
}
.custom-audio-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: .75rem;
  margin-bottom: .6rem;
}
.custom-audio-top div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .1rem;
}
.custom-audio-top strong {
  color: #e2e8f0;
  font-size: .76rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.custom-audio-top span {
  color: #64748b;
  font-size: .64rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.custom-audio-top em {
  color: #64748b;
  font-family: var(--font-mono);
  font-size: .62rem;
  font-style: normal;
  white-space: nowrap;
}
.custom-audio-track {
  position: relative;
  height: .45rem;
  border-radius: 999px;
  background: #020617;
  border: 1px solid #0f172a;
  overflow: hidden;
}
.custom-audio-track span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: linear-gradient(90deg, #27d7ff, #9eefff);
  border-radius: inherit;
  box-shadow: 0 0 12px rgba(39,215,255,.25);
}
.custom-audio-track input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.custom-audio-track input:disabled {
  cursor: not-allowed;
}
.custom-audio-menu-wrap {
  position: relative;
  flex: 0 0 auto;
}
.custom-audio-menu-btn {
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 999px;
  background: #06090e;
  border: 1px solid #152033;
  color: #cbd5e1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .78rem;
  letter-spacing: .08em;
  line-height: 1;
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.custom-audio-menu-btn:hover {
  color: #27d7ff;
  border-color: rgba(39,215,255,.35);
  background: rgba(39,215,255,.05);
}
.custom-audio-menu {
  position: absolute;
  right: 0;
  top: calc(100% + .5rem);
  z-index: 90;
  min-width: 140px;
  border: 1px solid #1f2e46;
  background: #070b12;
  border-radius: .85rem;
  padding: .35rem;
  box-shadow: 0 18px 36px rgba(0,0,0,.45);
}
.custom-audio-menu a {
  display: block;
  border-radius: .65rem;
  padding: .62rem .7rem;
  color: #cbd5e1;
  font-size: .72rem;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.custom-audio-menu a:hover {
  background: rgba(39,215,255,.08);
  color: #9eefff;
}
@media (max-width: 640px) {
  .custom-audio-preview {
    align-items: flex-start;
  }
  .custom-audio-top {
    flex-direction: column;
    gap: .25rem;
  }
}


/* --- Background fix: gradasi halus menyatu dengan halaman, tanpa garis overlay --- */
html, body, #root {
  min-height: 100%;
  background: #05080e;
}
body {
  background:
    radial-gradient(900px circle at 12% 4%, rgba(39, 215, 255, .16), transparent 46%),
    radial-gradient(760px circle at 88% 14%, rgba(59, 130, 246, .11), transparent 44%),
    radial-gradient(680px circle at 72% 78%, rgba(39, 215, 255, .08), transparent 48%),
    linear-gradient(180deg, #08111c 0%, #05080e 48%, #020407 100%);
  background-attachment: scroll;
}
.app-shell {
  min-height: 100vh;
  background: transparent;
  isolation: isolate;
}
.custom-audio-dots {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.custom-audio-dots i {
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: currentColor;
  display: block;
}
.custom-audio-menu {
  transform-origin: top right;
  animation: audio-menu-pop .18s ease both;
}
.custom-audio-menu a {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.custom-audio-menu a::before {
  content: "↓";
  width: 1.25rem;
  height: 1.25rem;
  border-radius: .45rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(39,215,255,.08);
  color: #27d7ff;
  font-size: .72rem;
  line-height: 1;
}
@keyframes audio-menu-pop {
  from { opacity: 0; transform: translateY(-5px) scale(.97); filter: blur(2px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

/* --- Revisi 6: menu aksi project --- */
.project-tile {
  cursor: pointer;
}
.project-tile-menu-wrap {
  position: absolute;
  top: .85rem;
  right: .85rem;
  z-index: 6;
}
.project-tile-menu {
  position: static;
  width: 2.55rem;
  height: 2.55rem;
  border-radius: 999px;
  background: rgba(2,6,23,.68);
  border: 1px solid rgba(255,255,255,.08);
  color: #dbeafe;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease, opacity .18s ease;
}
.project-tile-menu span {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.project-tile-menu i {
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: currentColor;
  display: block;
}
.project-tile-menu:not(:disabled):hover,
.project-tile-menu-wrap.is-open .project-tile-menu {
  color: #27d7ff;
  border-color: rgba(39,215,255,.35);
  background: rgba(2,6,23,.86);
  transform: translateY(-1px);
}
.project-tile-menu:disabled {
  opacity: .42;
  cursor: not-allowed;
}
.project-tile-menu-pop {
  position: absolute;
  right: 0;
  top: calc(100% + .5rem);
  min-width: 155px;
  border: 1px solid #1f2e46;
  background: #070b12;
  border-radius: .95rem;
  padding: .42rem;
  box-shadow: 0 18px 38px rgba(0,0,0,.48), 0 0 0 1px rgba(39,215,255,.05);
  transform-origin: top right;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-5px) scale(.97);
  filter: blur(2px);
  transition: opacity .18s ease, transform .18s ease, filter .18s ease;
}
.project-tile-menu-wrap.is-open .project-tile-menu-pop {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  filter: blur(0);
}
.project-tile-menu-pop button {
  width: 100%;
  border-radius: .7rem;
  padding: .65rem .72rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .65rem;
  background: transparent;
  color: #cbd5e1;
  font-size: .72rem;
  font-weight: 800;
  text-align: left;
  transition: background .15s ease, color .15s ease, opacity .15s ease;
}
.project-tile-menu-pop button:hover:not(:disabled) {
  background: rgba(39,215,255,.08);
  color: #9eefff;
}
.project-tile-menu-pop button.danger:hover:not(:disabled) {
  background: rgba(239,68,68,.12);
  color: #fecaca;
}
.project-tile-menu-pop button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

/* --- Fix revisi 6: layer halaman tidak saling menutup --- */
.app-header-layer {
  z-index: 80;
}
.step-nav-layer,
.workspace-layer,
.showcase-layer,
.workspace-form-layer {
  position: relative;
}
.step-nav-layer {
  z-index: 40;
}
.workspace-layer {
  z-index: 60;
}
.showcase-layer {
  z-index: 10;
}
.workspace-form-layer {
  z-index: 70;
}
.generate-fixed-wrap {
  z-index: 999;
}

/* --- Revisi 7: background menyatu dan gradasi lebih terasa --- */
html, body, #root {
  min-height: 100%;
  background: #03060b;
}
body {
  background: #03060b;
}
.app-shell {
  min-height: 100vh;
  background:
    radial-gradient(900px circle at 10% 5%, rgba(39, 215, 255, .22), transparent 42%),
    radial-gradient(780px circle at 86% 8%, rgba(30, 64, 175, .2), transparent 46%),
    radial-gradient(760px circle at 50% 30%, rgba(148, 72, 24, .12), transparent 54%),
    radial-gradient(820px circle at 78% 86%, rgba(39, 215, 255, .14), transparent 48%),
    linear-gradient(180deg, #07101a 0%, #05080e 45%, #020407 100%);
  background-attachment: fixed;
}
.project-tile-status:not(.failed) {
  background: rgba(39,215,255,.12);
  border-color: rgba(39,215,255,.22);
  color: #9eefff;
}

/* --- Revisi 7: popup project gagal --- */
.failed-project-modal-layer {
  position: fixed;
  inset: 0;
  z-index: 150;
  background:
    radial-gradient(900px circle at 50% 42%, rgba(39,215,255,.04), transparent 58%),
    rgba(0,0,0,.72);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  animation: failed-modal-fade .18s ease both;
}
.failed-project-modal {
  position: relative;
  width: min(560px, 100%);
  border-radius: 2rem;
  border: 1px solid rgba(248,113,113,.18);
  background:
    radial-gradient(circle at 8% 0%, rgba(248,113,113,.12), transparent 38%),
    linear-gradient(145deg, rgba(26,7,14,.97), rgba(7,5,8,.98) 72%);
  box-shadow: 0 34px 90px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.025);
  padding: 2rem;
  animation: failed-modal-pop .2s ease both;
}
.failed-project-close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 1.85rem;
  height: 2.75rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.78);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  line-height: 1;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.failed-project-close:hover {
  background: rgba(255,255,255,.1);
  color: #fff;
  transform: translateY(-1px);
}
.failed-project-icon {
  width: 3.8rem;
  height: 3.8rem;
  border-radius: 1.4rem;
  border: 1px solid rgba(248,113,113,.26);
  background: rgba(248,113,113,.09);
  color: #fecaca;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  font-weight: 900;
  margin-bottom: 1.2rem;
}
.failed-project-modal h3 {
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.35rem, 4vw, 1.85rem);
  letter-spacing: -.04em;
  line-height: 1.05;
  margin: 0 2.5rem .95rem 0;
}
.failed-project-modal p {
  color: rgba(226,232,240,.64);
  font-size: .95rem;
  line-height: 1.65;
  margin: 0 0 1.9rem;
  max-width: 30rem;
}
.failed-project-info {
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(2,6,23,.34);
  border-radius: 1.4rem;
  padding: 1.35rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.failed-project-info span {
  color: rgba(226,232,240,.45);
  font-size: .72rem;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .22em;
  font-weight: 800;
}
.failed-project-info strong {
  color: #fff;
  font-size: 1.05rem;
  line-height: 1.3;
}
@keyframes failed-modal-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes failed-modal-pop {
  from { opacity: 0; transform: translateY(8px) scale(.98); filter: blur(3px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@media (max-width: 640px) {
  .failed-project-modal {
    padding: 1.35rem;
    border-radius: 1.5rem;
  }
  .failed-project-modal p {
    font-size: .82rem;
  }
}

/* --- Revisi 8: filter ringkas, menu download, contoh video sosial media --- */
.project-tile-menu-pop a {
  width: 100%;
  border-radius: .7rem;
  padding: .65rem .72rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .65rem;
  background: transparent;
  color: #cbd5e1;
  font-size: .72rem;
  font-weight: 800;
  text-align: left;
  text-decoration: none;
  transition: background .15s ease, color .15s ease, opacity .15s ease;
}
.project-tile-menu-pop a::after {
  content: "↓";
  color: #27d7ff;
  font-size: .78rem;
  line-height: 1;
}
.project-tile-menu-pop a:hover {
  background: rgba(39,215,255,.08);
  color: #9eefff;
}
.example-video-social {
  width: 100%;
  display: grid;
  gap: 1rem;
}
.example-video-row {
  width: 100%;
  display: grid;
  grid-template-columns: var(--example-cols);
  gap: 1rem;
  align-items: start;
}
.example-video-item {
  position: relative;
  width: 100%;
  height: auto;
  align-self: start;
  border: 1px solid rgba(39,215,255,.16);
  background: #05080e;
  border-radius: 1.35rem;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(0,0,0,.28);
  cursor: pointer;
  min-width: 0;
  isolation: isolate;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.example-video-item.landscape { aspect-ratio: 16 / 9; }
.example-video-item.portrait { aspect-ratio: 9 / 16; }
.example-video-item:hover {
  transform: translateY(-2px);
  border-color: rgba(39,215,255,.38);
  box-shadow: 0 22px 60px rgba(0,0,0,.36), 0 0 34px rgba(39,215,255,.1);
}
.example-video-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #020407;
}
.example-video-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.05), rgba(0,0,0,.18) 45%, rgba(0,0,0,.72));
  z-index: 1;
  pointer-events: none;
}
.example-video-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 3.1rem;
  height: 3.1rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #eaffff;
  background: rgba(2,6,23,.66);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(10px);
  box-shadow: 0 0 25px rgba(39,215,255,.15);
  transition: transform .2s ease, background .2s ease, color .2s ease;
}
.example-video-item:hover .example-video-play {
  transform: translate(-50%, -50%) scale(1.06);
  background: rgba(39,215,255,.22);
  color: #fff;
}
.example-video-use {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: .9rem;
  transform: translate(-50%, .35rem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  max-width: calc(100% - 1.6rem);
  min-height: 2.25rem;
  padding: .55rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.92);
  background: rgba(2,6,23,.46);
  backdrop-filter: blur(12px);
  box-shadow: 0 12px 28px rgba(0,0,0,.24);
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .02em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, background .2s ease, border-color .2s ease;
}
.example-video-item:hover .example-video-use,
.example-video-item:focus-within .example-video-use {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.example-video-use:hover {
  background: rgba(39,215,255,.24);
  border-color: rgba(39,215,255,.36);
  color: #fff;
}
.example-video-modal-layer {
  position: fixed;
  inset: 0;
  z-index: 180;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(14px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  animation: failed-modal-fade .18s ease both;
}
.example-video-modal {
  width: min(980px, 100%);
  max-height: 86vh;
  border: 1px solid rgba(39,215,255,.22);
  background: #020407;
  border-radius: 1.4rem;
  overflow: hidden;
  box-shadow: 0 35px 100px rgba(0,0,0,.65), 0 0 45px rgba(39,215,255,.08);
  animation: failed-modal-pop .2s ease both;
}
.example-video-modal video {
  width: 100%;
  max-height: 74vh;
  object-fit: contain;
  background: #000;
}
.example-video-modal-action {
  display: flex;
  justify-content: center;
  padding: 1rem;
  border-top: 1px solid rgba(39,215,255,.14);
  background: rgba(2,6,23,.92);
}
.example-video-modal-action button {
  width: min(100%, 360px);
  border: 0;
  border-radius: 1rem;
  padding: .9rem 1.25rem;
  background: #27d7ff;
  color: #031018;
  font-family: var(--font-display);
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .04em;
  cursor: pointer;
  box-shadow: 0 0 24px rgba(39,215,255,.16);
  transition: transform .18s ease, background .18s ease;
}
.example-video-modal-action button:hover {
  background: #9eefff;
  transform: translateY(-1px);
}
.example-video-close {
  position: fixed;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 181;
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(2,6,23,.72);
  color: #e2e8f0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.example-video-close:hover {
  background: rgba(39,215,255,.16);
  color: #fff;
  transform: translateY(-1px);
}
@media (max-width: 760px) {
  .example-video-row {
    grid-template-columns: minmax(0, 1fr);
  }
}


.generate-token-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .25rem .5rem;
  border-radius: 999px;
  background: rgba(3, 16, 23, .16);
  border: 1px solid rgba(3, 16, 23, .18);
  color: #031017;
  font-family: var(--font-mono);
  font-size: .68rem;
  line-height: 1;
  letter-spacing: -.02em;
  white-space: nowrap;
}

/* Equal landing CTA buttons */
.landing-action-button {
  width: 18.25rem !important;
  min-width: 18.25rem !important;
}
@media (max-width: 420px) {
  .landing-action-button {
    width: min(18.25rem, 100%) !important;
    min-width: 0 !important;
  }
}


.generate-status-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(39, 215, 255, 0.28);
  background: rgba(39, 215, 255, 0.1);
  color: #9eefff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  transition: transform .2s ease, border-color .2s ease, background .2s ease, color .2s ease;
}

.generate-status-action:hover {
  transform: translateY(-1px);
  border-color: rgba(39, 215, 255, 0.48);
  background: rgba(39, 215, 255, 0.16);
  color: #ffffff;
}


.generate-top-status {
  width: min(100%, 36rem);
  margin: 0 auto .65rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  flex-wrap: wrap;
  padding: .72rem .95rem;
  border-radius: 1rem;
  border: 1px solid rgba(39,215,255,.20);
  background: rgba(6,9,14,.92);
  box-shadow: 0 18px 45px rgba(0,0,0,.24), 0 0 22px rgba(39,215,255,.10);
  backdrop-filter: blur(14px);
  color: #9eefff;
  font-size: .74rem;
  line-height: 1.35;
  text-align: center;
  animation: generateToastIn .18s ease-out both;
}
.generate-top-status.error {
  border-color: rgba(248,113,113,.26);
  background: rgba(25,9,14,.94);
  color: #fecaca;
}
.token-badge-dark {
  background: rgba(39,215,255,.10);
  border-color: rgba(39,215,255,.22);
  color: #9eefff;
}
@keyframes generateToastIn {
  from { opacity: 0; transform: translateY(6px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 520px) {
  .generate-top-status {
    width: 100%;
    justify-content: flex-start;
    text-align: left;
  }
}

/* --- Voice dropdown audio preview --- */
.custom-select-option.is-previewing {
  border-color: rgba(39,215,255,.34);
  background: rgba(39,215,255,.1);
}
.custom-select-option.is-previewing .custom-select-option-icon,
.custom-select-icon:has(.voice-spectrum) {
  background: #27d7ff;
  color: #020617;
  box-shadow: 0 0 18px rgba(39,215,255,.22);
}
.voice-spectrum {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 18px;
  height: 16px;
}
.voice-spectrum span {
  width: 3px;
  height: 12px;
  border-radius: 999px;
  background: currentColor;
  transform-origin: center bottom;
  animation: voice-spectrum-wave .75s ease-in-out infinite;
}
.voice-spectrum span:nth-child(1) { animation-delay: 0s; height: 8px; }
.voice-spectrum span:nth-child(2) { animation-delay: .1s; height: 14px; }
.voice-spectrum span:nth-child(3) { animation-delay: .2s; height: 11px; }
.voice-spectrum span:nth-child(4) { animation-delay: .3s; height: 15px; }
@keyframes voice-spectrum-wave {
  0%, 100% { transform: scaleY(.38); opacity: .68; }
  50% { transform: scaleY(1); opacity: 1; }
}

/* --- TVC account controls --- */
.tvc-header-actions,
.account-controls {
  display: flex;
  align-items: center;
}
.tvc-header-actions { gap: .55rem; }
.account-controls { gap: .45rem; }
.account-notification-button,
.account-user-button {
  position: relative;
  width: 2.15rem;
  height: 2.15rem;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(71,85,105,.58);
  background: rgba(13,19,31,.9);
  color: #cbd5e1;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
  transition: color .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.account-notification-button {
  border-color: transparent;
  background: transparent;
}
.account-notification-button:hover,
.account-user-button:hover,
.account-user-button.is-open {
  color: #9eefff;
  border-color: rgba(39,215,255,.42);
  background: rgba(39,215,255,.08);
  box-shadow: 0 0 20px rgba(39,215,255,.10), inset 0 1px 0 rgba(255,255,255,.04);
  transform: translateY(-1px);
}
.account-header-icon { width: 1.1rem; height: 1.1rem; }
.account-notification-dot {
  position: absolute;
  top: .22rem;
  right: .22rem;
  width: .55rem;
  height: .55rem;
  border: 2px solid #06090e;
  border-radius: 999px;
  background: #27d7ff;
  box-shadow: 0 0 11px rgba(39,215,255,.95);
}
.account-buy-token-button,
.account-login-button {
  min-height: 2.15rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: .7rem;
  white-space: nowrap;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: -.01em;
  transition: transform .2s ease, filter .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.account-buy-token-button {
  padding: 0 .88rem;
  color: #031017;
  border: 1px solid rgba(158,239,255,.5);
  background: linear-gradient(135deg, #22c8f2 0%, #6ce9ff 52%, #21bde9 100%);
  box-shadow: 0 8px 24px rgba(39,215,255,.14), inset 0 1px 0 rgba(255,255,255,.42);
}
.account-buy-token-button:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(39,215,255,.22), inset 0 1px 0 rgba(255,255,255,.5);
}
.account-login-button {
  padding: 0 .9rem;
  color: #9eefff;
  border: 1px solid rgba(39,215,255,.28);
  background: rgba(39,215,255,.08);
}
.account-login-button:hover {
  transform: translateY(-1px);
  border-color: rgba(39,215,255,.48);
  background: rgba(39,215,255,.14);
}
.account-dropdown-wrap { position: relative; }
.account-dropdown-panel {
  position: absolute;
  z-index: 240;
  top: calc(100% + .7rem);
  right: 0;
  width: 20rem;
  max-width: calc(100vw - 1.5rem);
  overflow: hidden;
  border: 1px solid rgba(39,215,255,.16);
  border-radius: 1.15rem;
  background: linear-gradient(165deg, rgba(13,19,31,.985), rgba(5,9,15,.99));
  box-shadow: 0 24px 60px rgba(0,0,0,.58), 0 0 0 1px rgba(255,255,255,.018), 0 0 34px rgba(39,215,255,.07);
  backdrop-filter: blur(22px);
  animation: account-panel-in .18s ease-out both;
}
.account-dropdown-glow {
  position: absolute;
  pointer-events: none;
  width: 9rem;
  height: 9rem;
  top: -5.5rem;
  right: -3.5rem;
  border-radius: 999px;
  background: rgba(39,215,255,.17);
  filter: blur(36px);
}
.account-profile-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: 1rem;
  border-bottom: 1px solid rgba(71,85,105,.28);
  background: linear-gradient(110deg, rgba(39,215,255,.075), transparent 66%);
}
.account-profile-avatar {
  width: 2.55rem;
  height: 2.55rem;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: .85rem;
  color: #9eefff;
  border: 1px solid rgba(39,215,255,.22);
  background: rgba(39,215,255,.09);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.account-profile-icon { width: 1.2rem; height: 1.2rem; }
.account-profile-copy { min-width: 0; display: flex; flex-direction: column; }
.account-profile-copy strong {
  color: #f8fafc;
  font-family: var(--font-display);
  font-size: .83rem;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-profile-copy span { margin-top: .1rem; color: #64748b; font-size: .65rem; }
.account-menu-list { padding: .48rem; }
.account-menu-footer { padding: .48rem; border-top: 1px solid rgba(71,85,105,.25); }
.account-menu-item {
  width: 100%;
  display: grid;
  grid-template-columns: 2.05rem minmax(0, 1fr) auto;
  align-items: center;
  gap: .65rem;
  padding: .62rem;
  border: 1px solid transparent;
  border-radius: .86rem;
  color: #cbd5e1;
  text-align: left;
  transition: color .16s ease, background .16s ease, border-color .16s ease, transform .16s ease;
}
.account-menu-item:hover {
  color: #e6faff;
  border-color: rgba(39,215,255,.13);
  background: rgba(39,215,255,.065);
  transform: translateX(1px);
}
.account-menu-item > span:nth-child(2) { min-width: 0; display: flex; flex-direction: column; }
.account-menu-item strong { font-size: .73rem; line-height: 1.35; font-weight: 700; }
.account-menu-item small { color: #64748b; font-size: .59rem; line-height: 1.35; margin-top: .08rem; }
.account-menu-item-icon {
  width: 2.05rem;
  height: 2.05rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: .7rem;
  color: #76e8ff;
  background: rgba(39,215,255,.075);
}
.account-menu-item-icon svg { width: 1rem; height: 1rem; }
.account-menu-arrow { width: .85rem; height: .85rem; color: #475569; transition: transform .16s ease, color .16s ease; }
.account-menu-item:hover .account-menu-arrow { color: #76e8ff; transform: translateX(2px); }
.account-menu-logout { grid-template-columns: 2.05rem minmax(0, 1fr); color: #fca5a5; }
.account-menu-logout .account-menu-item-icon { color: #f87171; background: rgba(239,68,68,.085); }
.account-menu-logout:hover { color: #fecaca; border-color: rgba(239,68,68,.15); background: rgba(239,68,68,.075); }
.account-menu-item:disabled { opacity: .58; cursor: wait; transform: none; }
.account-form-view { position: relative; padding: .9rem; }
.account-form-back {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  color: #64748b;
  font-size: .64rem;
  font-weight: 700;
  transition: color .16s ease;
}
.account-form-back:hover { color: #9eefff; }
.account-form-back svg { width: .9rem; height: .9rem; }
.account-form-heading {
  display: flex;
  align-items: center;
  gap: .72rem;
  margin: .8rem 0 1rem;
  padding-bottom: .85rem;
  border-bottom: 1px solid rgba(71,85,105,.25);
}
.account-form-heading-icon {
  width: 2.25rem;
  height: 2.25rem;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: .75rem;
  color: #76e8ff;
  border: 1px solid rgba(39,215,255,.17);
  background: rgba(39,215,255,.075);
}
.account-form-heading-icon svg { width: 1.05rem; height: 1.05rem; }
.account-form-heading > div { display: flex; flex-direction: column; }
.account-form-heading strong { color: #f8fafc; font-family: var(--font-display); font-size: .8rem; }
.account-form-heading span { margin-top: .12rem; color: #64748b; font-size: .59rem; line-height: 1.4; }
.account-modern-form { display: flex; flex-direction: column; gap: .72rem; }
.account-modern-form label {
  display: flex;
  flex-direction: column;
  gap: .34rem;
  color: #94a3b8;
  font-size: .61rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.account-modern-form input {
  width: 100%;
  height: 2.55rem;
  padding: 0 .78rem;
  border: 1px solid rgba(51,65,85,.72);
  border-radius: .72rem;
  outline: none;
  background: rgba(2,6,12,.72);
  color: #e2e8f0;
  font-size: .7rem;
  font-weight: 500;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.account-modern-form input::placeholder { color: #475569; }
.account-modern-form input:focus {
  border-color: rgba(39,215,255,.46);
  background: rgba(3,10,17,.9);
  box-shadow: 0 0 0 3px rgba(39,215,255,.07);
}
.account-modern-form button[type="submit"] {
  min-height: 2.55rem;
  margin-top: .12rem;
  border: 1px solid rgba(158,239,255,.42);
  border-radius: .72rem;
  background: linear-gradient(135deg, #22c8f2, #6ce9ff 52%, #21bde9);
  color: #031017;
  font-size: .69rem;
  font-weight: 850;
  box-shadow: 0 8px 22px rgba(39,215,255,.13), inset 0 1px 0 rgba(255,255,255,.42);
  transition: transform .18s ease, filter .18s ease, opacity .18s ease;
}
.account-modern-form button[type="submit"]:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }
.account-modern-form button[type="submit"]:disabled { opacity: .65; cursor: wait; }
.account-feedback {
  margin-top: .72rem;
  padding: .58rem .65rem;
  border-radius: .66rem;
  border: 1px solid rgba(39,215,255,.13);
  background: rgba(39,215,255,.055);
  color: #9eefff;
  font-size: .61rem;
  line-height: 1.45;
}
.account-feedback.success { border-color: rgba(34,197,94,.19); background: rgba(34,197,94,.07); color: #bbf7d0; }
.account-feedback.error { border-color: rgba(239,68,68,.2); background: rgba(239,68,68,.075); color: #fecaca; }
@keyframes account-panel-in {
  from { opacity: 0; transform: translateY(-5px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 680px) {
  .app-header-layer { padding-left: 1rem; padding-right: 1rem; }
  .app-header-layer > div > a > span { display: none; }
  .tvc-header-actions { gap: .35rem; }
  .account-controls { gap: .28rem; }
  .account-notification-button,
  .account-user-button { width: 2rem; height: 2rem; }
  .account-buy-token-button { min-height: 2rem; padding: 0 .62rem; font-size: .64rem; }
}
@media (max-width: 430px) {
  .app-header-layer > div { gap: .55rem; }
  .app-header-layer > div > a { gap: 0; }
  .tvc-header-actions > span { padding-left: .55rem; padding-right: .55rem; font-size: .62rem; }
  .account-dropdown-panel { position: fixed; top: 4.7rem; right: .75rem; left: .75rem; width: auto; max-width: none; }
}


/* --- TVC footer --- */
.tvc-footer {
  width: 100%;
  margin-top: 3rem;
  border-top: 1px solid rgba(39, 215, 255, .12);
  background: linear-gradient(180deg, #070b12 0%, #05080d 100%);
}
.tvc-footer-inner {
  width: min(100%, 76rem);
  margin: 0 auto;
  padding: 2.75rem 2rem 3rem;
}
.tvc-footer-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr 1.15fr;
  gap: 2.5rem;
  text-align: left;
}
.tvc-footer-section h3 {
  color: #f8fafc;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -.02em;
}
.tvc-footer-section h3 span { color: #27d7ff; }
.tvc-footer-section h4 {
  margin-bottom: 1rem;
  color: #f8fafc;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.tvc-footer-section p {
  color: #94a3b8;
  font-size: .78rem;
  line-height: 1.75;
}
.tvc-footer-brand > p:first-of-type {
  max-width: 22rem;
  margin-top: .8rem;
}
.tvc-footer-copyright {
  margin-top: 1.2rem;
  color: #64748b !important;
  font-size: .7rem !important;
}
.tvc-footer-links,
.tvc-footer-contact {
  display: flex;
  flex-direction: column;
  gap: .7rem;
}
.tvc-footer-links a,
.tvc-footer-contact a {
  width: fit-content;
  color: #94a3b8;
  font-size: .76rem;
  line-height: 1.5;
  transition: color .18s ease;
}
.tvc-footer-links a:hover,
.tvc-footer-contact a:hover { color: #76e8ff; }
.tvc-footer-contact { gap: 1rem; }
.tvc-footer-contact > div {
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.tvc-footer-contact span {
  color: #64748b;
  font-size: .62rem;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.tvc-footer-contact a {
  color: #27d7ff;
  font-weight: 650;
  overflow-wrap: anywhere;
}
@media (max-width: 900px) {
  .tvc-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .tvc-footer-inner { padding: 2.25rem 1.25rem 2.5rem; }
  .tvc-footer-grid { grid-template-columns: 1fr; gap: 2rem; }
}

/* --- TVC FAQ --- */
.tvc-faq-section {
  width: 100%;
  padding: 3.5rem 2rem 0;
}
.tvc-faq-shell {
  position: relative;
  width: min(100%, 72rem);
  margin: 0 auto;
  padding: 2rem;
  overflow: hidden;
  border: 1px solid rgba(39, 215, 255, .13);
  border-radius: 1.5rem;
  background:
    linear-gradient(145deg, rgba(12, 19, 30, .96), rgba(6, 10, 17, .98)),
    #070b12;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, .26),
    inset 0 1px 0 rgba(255, 255, 255, .025);
}
.tvc-faq-glow {
  position: absolute;
  pointer-events: none;
  border-radius: 999px;
  filter: blur(4px);
}
.tvc-faq-glow-one {
  top: -7rem;
  left: -5rem;
  width: 15rem;
  height: 15rem;
  background: radial-gradient(circle, rgba(39, 215, 255, .12), rgba(39, 215, 255, 0) 70%);
}
.tvc-faq-glow-two {
  right: -7rem;
  bottom: -9rem;
  width: 19rem;
  height: 19rem;
  background: radial-gradient(circle, rgba(66, 126, 255, .08), rgba(66, 126, 255, 0) 70%);
}
.tvc-faq-heading {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  max-width: 44rem;
  margin-bottom: 1.75rem;
}
.tvc-faq-heading-icon {
  width: 3rem;
  height: 3rem;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(39, 215, 255, .2);
  border-radius: 1rem;
  color: #76e8ff;
  background: linear-gradient(145deg, rgba(39, 215, 255, .12), rgba(39, 215, 255, .045));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}
.tvc-faq-heading-icon svg { width: 1.45rem; height: 1.45rem; }
.tvc-faq-eyebrow {
  display: block;
  margin-bottom: .22rem;
  color: #27d7ff;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.tvc-faq-heading h2 {
  color: #f8fafc;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.4vw, 1.8rem);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.18;
}
.tvc-faq-heading h2 span { color: #76e8ff; }
.tvc-faq-heading p {
  margin-top: .45rem;
  color: #64748b;
  font-size: .75rem;
  line-height: 1.65;
}
.tvc-faq-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: .75rem;
}
.tvc-faq-item {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border-radius: .95rem;
  background: rgba(255, 255, 255, .018);
  transition: background .22s ease, box-shadow .22s ease, transform .22s ease;
}
.tvc-faq-item::before {
  content: '';
  position: absolute;
  top: .75rem;
  bottom: .75rem;
  left: 0;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, #76e8ff, #427eff);
  opacity: 0;
  transform: scaleY(.45);
  transition: opacity .22s ease, transform .22s ease;
}
.tvc-faq-item:hover {
  background: rgba(255, 255, 255, .035);
}
.tvc-faq-item.is-open {
  background: linear-gradient(135deg, rgba(39, 215, 255, .075), rgba(66, 126, 255, .025));
  box-shadow: 0 14px 30px rgba(0, 0, 0, .12);
}
.tvc-faq-item.is-open::before {
  opacity: 1;
  transform: scaleY(1);
}
.tvc-faq-trigger {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2rem;
  align-items: center;
  gap: .85rem;
  padding: 1rem 1rem 1rem 1.1rem;
  text-align: left;
  cursor: pointer;
}
.tvc-faq-question {
  color: #dbe4ef;
  font-size: .73rem;
  font-weight: 720;
  line-height: 1.45;
  transition: color .2s ease, transform .2s ease;
}
.tvc-faq-item:hover .tvc-faq-question,
.tvc-faq-item.is-open .tvc-faq-question { color: #f8fafc; }
.tvc-faq-item.is-open .tvc-faq-question { transform: translateX(.2rem); }
.tvc-faq-chevron {
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: end;
  border-radius: 999px;
  color: #64748b;
  background: rgba(15, 23, 42, .55);
  transition: color .22s ease, background .22s ease, transform .28s ease;
}
.tvc-faq-item.is-open .tvc-faq-chevron {
  color: #76e8ff;
  background: rgba(39, 215, 255, .09);
  transform: rotate(180deg);
}
.tvc-faq-answer-wrap {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .3s ease, opacity .25s ease;
}
.tvc-faq-item.is-open .tvc-faq-answer-wrap {
  grid-template-rows: 1fr;
  opacity: 1;
}
.tvc-faq-answer {
  min-height: 0;
  overflow: hidden;
}
.tvc-faq-answer p {
  margin: 0 1rem 1rem 1.1rem;
  padding: .05rem 2.85rem 0 .2rem;
  color: #8d9caf;
  font-size: .7rem;
  line-height: 1.7;
}
@media (max-width: 820px) {
  .tvc-faq-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .tvc-faq-section { padding: 2.75rem 1rem 0; }
  .tvc-faq-shell { padding: 1.25rem; border-radius: 1.2rem; }
  .tvc-faq-heading { gap: .75rem; margin-bottom: 1.25rem; }
  .tvc-faq-heading-icon { width: 2.6rem; height: 2.6rem; border-radius: .85rem; }
  .tvc-faq-heading-icon svg { width: 1.25rem; height: 1.25rem; }
  .tvc-faq-heading p { font-size: .7rem; }
  .tvc-faq-trigger { grid-template-columns: minmax(0, 1fr) 1.85rem; gap: .65rem; padding: .85rem .8rem .85rem .95rem; }
  .tvc-faq-chevron { width: 1.85rem; height: 1.85rem; }
  .tvc-faq-question { font-size: .69rem; }
  .tvc-faq-answer p { margin: 0 .8rem .9rem .95rem; padding: .05rem 2.5rem 0 .15rem; font-size: .67rem; }
}

/* --- Rincian estimasi token pada tombol Generate utama --- */
.generate-action-group {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: .7rem;
}
.generate-token-help-wrap {
  position: relative;
  flex: 0 0 auto;
}
.generate-token-help-button {
  width: 2.85rem;
  height: 2.85rem;
  border-radius: .9rem;
  border: 1px solid rgba(39, 215, 255, .3);
  background: linear-gradient(145deg, rgba(39, 215, 255, .12), rgba(15, 23, 42, .86));
  color: #9eefff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .025), 0 8px 22px rgba(0, 0, 0, .24);
  transition: transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
}
.generate-token-help-button:hover,
.generate-token-help-button[aria-expanded="true"] {
  transform: translateY(-1px);
  border-color: rgba(39, 215, 255, .56);
  background: linear-gradient(145deg, rgba(39, 215, 255, .2), rgba(15, 23, 42, .94));
  color: #fff;
}
.generate-token-help-card {
  position: absolute;
  right: 0;
  bottom: calc(100% + .8rem);
  width: min(21rem, calc(100vw - 3rem));
  padding: .85rem;
  border-radius: 1rem;
  border: 1px solid rgba(39, 215, 255, .24);
  background: linear-gradient(145deg, rgba(11, 17, 28, .98), rgba(5, 9, 16, .98));
  box-shadow: 0 22px 55px rgba(0, 0, 0, .5), 0 0 28px rgba(39, 215, 255, .08);
  backdrop-filter: blur(18px);
  animation: generateTokenHelpIn .16s ease-out both;
}
.generate-token-help-card::after {
  content: "";
  position: absolute;
  right: .92rem;
  top: 100%;
  width: .7rem;
  height: .7rem;
  border-right: 1px solid rgba(39, 215, 255, .24);
  border-bottom: 1px solid rgba(39, 215, 255, .24);
  background: #070c15;
  transform: translateY(-50%) rotate(45deg);
}
.generate-token-help-row {
  min-height: 2.35rem;
  padding: .2rem .3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid rgba(148, 163, 184, .1);
  color: #94a3b8;
  font-size: .72rem;
}
.generate-token-help-row.total {
  color: #e2e8f0;
}
.generate-token-help-row strong {
  min-width: 2.2rem;
  padding: .28rem .5rem;
  border-radius: 999px;
  background: rgba(39, 215, 255, .1);
  border: 1px solid rgba(39, 215, 255, .18);
  color: #9eefff;
  font-family: var(--font-mono);
  font-size: .7rem;
  text-align: center;
}
.generate-token-help-note {
  margin-top: .75rem;
  padding: .7rem .75rem;
  border-radius: .75rem;
  background: rgba(39, 215, 255, .055);
  color: #94a3b8;
  font-size: .67rem;
  line-height: 1.55;
}
.generate-token-help-note strong {
  color: #c7f7ff;
}
@keyframes generateTokenHelpIn {
  from { opacity: 0; transform: translateY(5px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 520px) {
  .bottom-generate-bar {
    padding: .8rem;
  }
  .generate-action-group {
    width: 100%;
  }
  .generate-action-group > button:last-child {
    flex: 1;
    justify-content: center;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .generate-token-help-card {
    left: 0;
    right: auto;
  }
  .generate-token-help-card::after {
    left: 1.05rem;
    right: auto;
  }
}

/* --- Halaman Beli Token dengan bahasa visual TVC --- */
.token-page-shell {
  overflow: hidden;
}
.token-page-main {
  position: relative;
  z-index: 5;
  width: min(100%, 76rem);
  margin: 0 auto;
  padding: 4.25rem 2rem 1rem;
}
.token-hero {
  position: relative;
  max-width: 58rem;
  margin: 0 auto 3rem;
  text-align: center;
}
.token-hero::before {
  content: '';
  position: absolute;
  top: -8rem;
  left: 50%;
  width: 32rem;
  height: 19rem;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(39,215,255,.12), rgba(39,215,255,0) 68%);
  transform: translateX(-50%);
  pointer-events: none;
}
.token-hero > * { position: relative; z-index: 1; }
.token-hero-eyebrow,
.token-section-heading span,
.token-guide-eyebrow,
.token-package-kicker {
  color: #27d7ff;
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.token-hero h1 {
  max-width: 54rem;
  margin: .75rem auto 0;
  color: #f8fafc;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5.4vw, 4.75rem);
  font-weight: 600;
  letter-spacing: -.055em;
  line-height: 1.03;
}
.token-hero p {
  max-width: 46rem;
  margin: 1.15rem auto 0;
  color: #8c9bad;
  font-size: 1rem;
  line-height: 1.75;
}
.token-hero-points {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .65rem;
  margin-top: 1.45rem;
}
.token-hero-points span {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 2.25rem;
  padding: 0 .8rem;
  border: 1px solid rgba(39,215,255,.13);
  border-radius: 999px;
  background: rgba(7,13,22,.58);
  color: #9cacbd;
  font-size: .67rem;
  font-weight: 650;
}
.token-hero-points svg { width: .9rem; height: .9rem; color: #76e8ff; }
.token-purchase-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 19rem;
  align-items: start;
  gap: 1.25rem;
}
.token-package-area,
.token-guide-card {
  border: 1px solid rgba(39,215,255,.12);
  background: linear-gradient(145deg, rgba(11,17,28,.97), rgba(5,9,15,.98));
  box-shadow: 0 24px 60px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.025);
}
.token-package-area {
  min-width: 0;
  padding: 1.5rem;
  border-radius: 1.5rem;
}
.token-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.25rem;
  padding: .25rem .15rem .15rem;
}
.token-section-heading h2 {
  margin-top: .22rem;
  color: #f8fafc;
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 3vw, 2.15rem);
  font-weight: 650;
  letter-spacing: -.04em;
}
.token-section-heading p {
  max-width: 27rem;
  color: #66768a;
  font-size: .7rem;
  line-height: 1.65;
  text-align: right;
}
.token-package-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .85rem;
}
.token-package-card {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 1.15rem;
  overflow: hidden;
  border: 1px solid rgba(51,65,85,.58);
  border-radius: 1.1rem;
  background:
    radial-gradient(circle at 100% 0%, rgba(39,215,255,.055), transparent 37%),
    rgba(5,10,18,.76);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease;
}
.token-package-card:hover {
  transform: translateY(-3px);
  border-color: rgba(39,215,255,.3);
  background:
    radial-gradient(circle at 100% 0%, rgba(39,215,255,.09), transparent 40%),
    rgba(6,12,21,.92);
  box-shadow: 0 18px 38px rgba(0,0,0,.2), 0 0 0 1px rgba(39,215,255,.04);
}
.token-package-card.is-featured {
  border-color: rgba(39,215,255,.42);
  background:
    radial-gradient(circle at 100% 0%, rgba(39,215,255,.13), transparent 43%),
    linear-gradient(145deg, rgba(8,22,31,.96), rgba(5,10,18,.98));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 0 30px rgba(39,215,255,.055);
}
.token-package-ribbon {
  position: absolute;
  top: .78rem;
  right: -.1rem;
  padding: .35rem .65rem .35rem .75rem;
  border: 1px solid rgba(158,239,255,.25);
  border-right: 0;
  border-radius: 999px 0 0 999px;
  background: linear-gradient(135deg, rgba(39,215,255,.18), rgba(66,126,255,.12));
  color: #baf4ff;
  font-size: .56rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.token-package-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}
.token-package-icon {
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(39,215,255,.2);
  border-radius: .75rem;
  color: #76e8ff;
  background: rgba(39,215,255,.075);
}
.token-package-icon svg { width: 1.25rem; height: 1.25rem; }
.token-package-badge {
  color: #77879a;
  font-size: .59rem;
  font-weight: 750;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.token-package-card.is-featured .token-package-badge { padding-right: 5.7rem; }
.token-package-heading { margin-top: 1.15rem; }
.token-package-heading h3 {
  margin-top: .18rem;
  color: #f8fafc;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 650;
  letter-spacing: -.035em;
}
.token-package-heading p {
  min-height: 3.7rem;
  margin-top: .48rem;
  color: #748397;
  font-size: .67rem;
  line-height: 1.65;
}
.token-package-amount {
  display: flex;
  align-items: baseline;
  gap: .45rem;
  margin-top: 1rem;
  padding: 1rem 0 .9rem;
  border-top: 1px solid rgba(51,65,85,.35);
  border-bottom: 1px solid rgba(51,65,85,.35);
}
.token-package-amount strong {
  color: #d9f9ff;
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 650;
  letter-spacing: -.04em;
}
.token-package-amount span {
  color: #27d7ff;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.token-package-pricing {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: .7rem;
  margin-top: .9rem;
}
.token-package-pricing > span {
  color: #64748b;
  font-size: .61rem;
  font-weight: 650;
}
.token-package-pricing > div {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.token-package-pricing strong {
  color: #f8fafc;
  font-size: 1rem;
  font-weight: 800;
}
.token-package-pricing small {
  margin-top: .12rem;
  color: #5f7186;
  font-size: .57rem;
}
.token-package-validity {
  display: flex;
  align-items: center;
  gap: .38rem;
  margin-top: .72rem;
  color: #81a296;
  font-size: .59rem;
  font-weight: 650;
}
.token-package-validity-dot {
  width: .42rem;
  height: .42rem;
  border-radius: 999px;
  background: #36d98b;
  box-shadow: 0 0 10px rgba(54,217,139,.4);
}
.token-package-button {
  width: 100%;
  min-height: 2.75rem;
  margin-top: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  border: 1px solid rgba(158,239,255,.34);
  border-radius: .78rem;
  background: linear-gradient(135deg, #22c8f2, #6ce9ff 52%, #21bde9);
  color: #031017;
  font-size: .69rem;
  font-weight: 850;
  box-shadow: 0 9px 24px rgba(39,215,255,.12), inset 0 1px 0 rgba(255,255,255,.42);
  transition: transform .18s ease, filter .18s ease, opacity .18s ease;
}
.token-package-button:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.07); }
.token-package-button:disabled { opacity: .52; cursor: not-allowed; transform: none; }
.token-package-button-arrow { font-size: 1rem; line-height: 1; }
.token-spinner {
  width: 1rem;
  height: 1rem;
  display: inline-block;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 999px;
  animation: token-spin .75s linear infinite;
}
.token-spinner-large { width: 1.5rem; height: 1.5rem; color: #27d7ff; }
@keyframes token-spin { to { transform: rotate(360deg); } }
.token-loading-state {
  min-height: 22rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  color: #748397;
  font-size: .72rem;
}
.token-purchase-message {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin-bottom: 1rem;
  padding: .75rem .85rem;
  border: 1px solid rgba(39,215,255,.15);
  border-radius: .8rem;
  background: rgba(39,215,255,.055);
  color: #a8eaf7;
  font-size: .66rem;
  line-height: 1.55;
}
.token-purchase-message.success { border-color: rgba(34,197,94,.2); background: rgba(34,197,94,.07); color: #b9f6d0; }
.token-purchase-message.error { border-color: rgba(239,68,68,.22); background: rgba(239,68,68,.075); color: #fecaca; }
.token-purchase-message-dot {
  width: .48rem;
  height: .48rem;
  flex: 0 0 auto;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
}
.token-guide-card {
  position: sticky;
  top: 6.5rem;
  padding: 1.35rem;
  border-radius: 1.35rem;
}
.token-guide-icon {
  width: 2.8rem;
  height: 2.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  border: 1px solid rgba(39,215,255,.2);
  border-radius: .9rem;
  color: #76e8ff;
  background: rgba(39,215,255,.075);
}
.token-guide-icon svg { width: 1.35rem; height: 1.35rem; }
.token-guide-card h2 {
  margin-top: .2rem;
  color: #f8fafc;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 650;
  letter-spacing: -.035em;
}
.token-guide-card ol {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  margin-top: 1.05rem;
}
.token-guide-card li {
  display: grid;
  grid-template-columns: 2rem minmax(0,1fr);
  gap: .65rem;
  padding: .72rem 0;
  border-bottom: 1px solid rgba(51,65,85,.3);
}
.token-guide-card li > span {
  color: #27d7ff;
  font-family: var(--font-display);
  font-size: .66rem;
  font-weight: 700;
}
.token-guide-card li p {
  color: #7f8ea1;
  font-size: .65rem;
  line-height: 1.6;
}
.token-guide-note {
  margin-top: 1.05rem;
  padding: .9rem;
  border: 1px solid rgba(39,215,255,.11);
  border-radius: .85rem;
  background: rgba(39,215,255,.045);
}
.token-guide-note strong { color: #dff8ff; font-size: .7rem; }
.token-guide-note p { margin-top: .35rem; color: #718196; font-size: .62rem; line-height: 1.6; }
.token-guide-note a {
  width: 100%;
  min-height: 2.35rem;
  margin-top: .72rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(39,215,255,.21);
  border-radius: .7rem;
  color: #9eefff;
  background: rgba(39,215,255,.075);
  font-size: .63rem;
  font-weight: 750;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.token-guide-note a:hover { border-color: rgba(39,215,255,.38); background: rgba(39,215,255,.12); color: #e1fbff; }
@media (max-width: 980px) {
  .token-purchase-layout { grid-template-columns: 1fr; }
  .token-guide-card { position: relative; top: auto; }
  .token-guide-card ol { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 .9rem; }
}
@media (max-width: 700px) {
  .token-page-main { padding: 3rem 1rem .5rem; }
  .token-hero { margin-bottom: 2rem; }
  .token-hero h1 { font-size: clamp(2.4rem, 11vw, 3.35rem); }
  .token-hero p { max-width: 31rem; font-size: .9rem; line-height: 1.7; }
  .token-package-area { padding: 1rem; border-radius: 1.2rem; }
  .token-section-heading { align-items: flex-start; flex-direction: column; gap: .55rem; }
  .token-section-heading p { text-align: left; }
  .token-package-grid { grid-template-columns: 1fr; }
  .token-package-heading p { min-height: auto; }
}
@media (max-width: 520px) {
  .token-hero-points { flex-direction: column; align-items: stretch; }
  .token-hero-points span { justify-content: center; }
  .token-guide-card ol { grid-template-columns: 1fr; }
}

/* --- Optimasi scroll mobile: kurangi repaint dari blur, fixed background, dan animasi dekoratif --- */
@media (max-width: 700px), (hover: none) and (pointer: coarse) {
  html,
  body {
    scroll-behavior: auto;
    overscroll-behavior-y: auto;
  }

  .token-page-shell {
    overflow-x: clip;
    overflow-y: visible;
    touch-action: pan-y pinch-zoom;
  }

  .token-page-shell.app-shell {
    background-attachment: scroll;
    background:
      radial-gradient(620px circle at 12% 3%, rgba(39, 215, 255, .14), transparent 48%),
      radial-gradient(560px circle at 88% 10%, rgba(30, 64, 175, .12), transparent 52%),
      linear-gradient(180deg, #07101a 0%, #05080e 45%, #020407 100%);
  }

  .token-page-shell .app-header-layer {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: rgba(6, 9, 14, .96) !important;
  }

  .token-page-shell .account-dropdown-panel {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .token-page-shell .token-package-card,
  .token-page-shell .token-package-button,
  .token-page-shell .token-guide-note a,
  .token-page-shell .tvc-faq-item,
  .token-page-shell .tvc-faq-item::before,
  .token-page-shell .tvc-faq-question,
  .token-page-shell .tvc-faq-chevron,
  .token-page-shell .tvc-faq-answer-wrap,
  .token-page-shell .account-notification-button,
  .token-page-shell .account-user-button,
  .token-page-shell .account-buy-token-button,
  .token-page-shell .account-login-button,
  .token-page-shell .account-menu-item,
  .token-page-shell .account-menu-arrow,
  .token-page-shell .account-modern-form input,
  .token-page-shell .account-modern-form button[type="submit"] {
    transition: none !important;
  }

  .token-page-shell .token-package-card:hover,
  .token-page-shell .token-package-button:hover:not(:disabled),
  .token-page-shell .account-notification-button:hover,
  .token-page-shell .account-user-button:hover,
  .token-page-shell .account-buy-token-button:hover,
  .token-page-shell .account-login-button:hover,
  .token-page-shell .account-menu-item:hover,
  .token-page-shell .account-modern-form button[type="submit"]:hover:not(:disabled) {
    transform: none !important;
    filter: none !important;
  }

  .token-page-shell .account-dropdown-panel {
    animation: none !important;
  }

  .token-page-shell .token-package-area,
  .token-page-shell .token-guide-card,
  .token-page-shell .tvc-faq-shell {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 12px 28px rgba(0,0,0,.18);
  }
}

/* --- Penyesuaian tipografi konten: lebih terbaca tanpa mengubah header dan footer --- */
.token-page-shell .token-hero-eyebrow,
.token-page-shell .token-section-heading span,
.token-page-shell .token-guide-eyebrow,
.token-page-shell .token-package-kicker {
  font-size: .75rem;
}

/* Judul utama dikembalikan ke proporsi sebelumnya agar tidak terlalu dominan. */
.token-page-shell .token-hero h1 {
  font-size: clamp(2rem, 5vw, 4.25rem);
}

.token-page-shell .token-hero p {
  max-width: 46rem;
  font-size: 1rem;
  line-height: 1.75;
}

.token-page-shell .token-hero-points span {
  min-height: 2.45rem;
  padding-inline: .95rem;
  font-size: .78rem;
}

.token-page-shell .token-section-heading h2 {
  font-size: clamp(1.7rem, 3vw, 2.3rem);
}

.token-page-shell .token-section-heading p {
  max-width: 29rem;
  font-size: .82rem;
  line-height: 1.7;
}

.token-page-shell .token-package-ribbon {
  font-size: .65rem;
}

.token-page-shell .token-package-badge {
  font-size: .68rem;
}

.token-page-shell .token-package-heading h3 {
  font-size: 1.5rem;
}

.token-page-shell .token-package-heading p {
  min-height: 4.4rem;
  font-size: .78rem;
  line-height: 1.65;
}

.token-page-shell .token-package-amount strong {
  font-size: 1.9rem;
}

.token-page-shell .token-package-amount span {
  font-size: .74rem;
}

.token-page-shell .token-package-pricing > span {
  font-size: .71rem;
}

.token-page-shell .token-package-pricing strong {
  font-size: 1.12rem;
}

.token-page-shell .token-package-pricing small {
  font-size: .67rem;
}

.token-page-shell .token-package-validity {
  font-size: .68rem;
}

.token-page-shell .token-package-button {
  min-height: 3rem;
  font-size: .79rem;
}

.token-page-shell .token-loading-state {
  font-size: .82rem;
}

.token-page-shell .token-purchase-message {
  font-size: .76rem;
}

.token-page-shell .token-guide-card h2 {
  font-size: 1.5rem;
}

.token-page-shell .token-guide-card li {
  grid-template-columns: 2.15rem minmax(0, 1fr);
  gap: .72rem;
  padding-block: .82rem;
}

.token-page-shell .token-guide-card li > span {
  font-size: .76rem;
}

.token-page-shell .token-guide-card li p {
  font-size: .76rem;
  line-height: 1.65;
}

.token-page-shell .token-guide-note strong {
  font-size: .8rem;
}

.token-page-shell .token-guide-note p {
  font-size: .73rem;
  line-height: 1.65;
}

.token-page-shell .token-guide-note a {
  min-height: 2.55rem;
  font-size: .74rem;
}

.token-page-shell .tvc-faq-eyebrow {
  font-size: .72rem;
}

.token-page-shell .tvc-faq-heading h2 {
  font-size: clamp(1.5rem, 2.5vw, 1.95rem);
}

.token-page-shell .tvc-faq-heading p {
  font-size: .85rem;
  line-height: 1.7;
}

.token-page-shell .tvc-faq-question {
  font-size: .83rem;
  line-height: 1.5;
}

.token-page-shell .tvc-faq-answer p {
  font-size: .8rem;
  line-height: 1.72;
}

@media (max-width: 700px) {
  .token-page-shell .token-hero h1 {
    font-size: clamp(2rem, 10vw, 3rem);
  }

  .token-page-shell .token-hero p {
    max-width: 31rem;
    font-size: .9rem;
    line-height: 1.7;
  }

  .token-page-shell .token-section-heading p {
    font-size: .8rem;
  }

  .token-page-shell .token-package-heading p {
    min-height: auto;
  }
}

@media (max-width: 560px) {
  .token-page-shell .tvc-faq-heading p {
    font-size: .8rem;
  }

  .token-page-shell .tvc-faq-question {
    font-size: .8rem;
  }

  .token-page-shell .tvc-faq-answer p {
    font-size: .76rem;
  }
}

/* --- Gradasi kartu paket cyan yang lembut dan tidak mencolok --- */
.token-page-shell .token-package-card {
  --package-glow: rgba(39, 215, 255, .07);
  --package-border: rgba(111, 201, 219, .17);
  isolation: isolate;
  border-color: var(--package-border);
  background:
    radial-gradient(88% 58% at 100% 0%, var(--package-glow) 0%, transparent 66%),
    linear-gradient(145deg, rgba(17, 28, 37, .98) 0%, rgba(10, 18, 27, .985) 52%, rgba(6, 11, 18, .99) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .035),
    0 14px 30px rgba(0, 0, 0, .17);
}

.token-page-shell .token-package-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(118deg, rgba(255, 255, 255, .018), transparent 31%);
}

.token-page-shell .token-package-card:nth-child(2) {
  --package-glow: rgba(39, 215, 255, .08);
}

.token-page-shell .token-package-card:nth-child(3) {
  --package-glow: rgba(45, 194, 228, .085);
}

.token-page-shell .token-package-card:nth-child(4),
.token-page-shell .token-package-card.is-featured {
  --package-glow: rgba(39, 215, 255, .13);
  --package-border: rgba(91, 213, 235, .31);
  background:
    radial-gradient(92% 62% at 100% 0%, var(--package-glow) 0%, transparent 67%),
    linear-gradient(145deg, rgba(17, 33, 43, .985) 0%, rgba(9, 21, 31, .99) 54%, rgba(6, 12, 20, .995) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .05),
    0 16px 32px rgba(0, 0, 0, .18),
    0 0 0 1px rgba(39, 215, 255, .025);
}

.token-page-shell .token-package-card:nth-child(5) {
  --package-glow: rgba(52, 184, 221, .09);
}

.token-page-shell .token-package-card:nth-child(6) {
  --package-glow: rgba(48, 174, 213, .075);
}

.token-page-shell .token-package-card:hover {
  border-color: rgba(105, 220, 239, .30);
  background:
    radial-gradient(92% 62% at 100% 0%, rgba(39, 215, 255, .11) 0%, transparent 67%),
    linear-gradient(145deg, rgba(18, 31, 40, .985) 0%, rgba(10, 19, 28, .99) 52%, rgba(6, 12, 19, .995) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .045),
    0 17px 34px rgba(0, 0, 0, .19);
}

.token-page-shell .token-package-icon {
  border-color: rgba(111, 210, 228, .20);
  background: linear-gradient(145deg, rgba(39, 215, 255, .075), rgba(39, 215, 255, .025));
}

.token-page-shell .token-package-amount {
  border-color: rgba(101, 190, 207, .12);
  background: linear-gradient(90deg, rgba(39, 215, 255, .022), transparent 76%);
}

@media (hover: none), (pointer: coarse) {
  .token-page-shell .token-package-card:hover {
    border-color: var(--package-border);
    background:
      radial-gradient(88% 58% at 100% 0%, var(--package-glow) 0%, transparent 66%),
      linear-gradient(145deg, rgba(17, 28, 37, .98) 0%, rgba(10, 18, 27, .985) 52%, rgba(6, 11, 18, .99) 100%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .035),
      0 12px 26px rgba(0, 0, 0, .15);
  }

  .token-page-shell .token-package-card.is-featured:hover {
    border-color: rgba(91, 213, 235, .31);
    background:
      radial-gradient(92% 62% at 100% 0%, rgba(39, 215, 255, .13) 0%, transparent 67%),
      linear-gradient(145deg, rgba(17, 33, 43, .985) 0%, rgba(9, 21, 31, .99) 54%, rgba(6, 12, 20, .995) 100%);
  }
}

/* =========================================================
   KreasiTor Landing Page
   ========================================================= */
.landing-page-shell {
  overflow-x: clip;
  background:
    radial-gradient(860px circle at 7% 4%, rgba(39, 215, 255, .18), transparent 47%),
    radial-gradient(760px circle at 95% 12%, rgba(37, 99, 235, .17), transparent 48%),
    radial-gradient(900px circle at 47% 47%, rgba(25, 90, 135, .08), transparent 58%),
    linear-gradient(180deg, #07111c 0%, #04080e 39%, #020407 100%);
}
.landing-page-shell .app-header-layer {
  background: rgba(5, 9, 15, .78);
  border-color: rgba(51, 65, 85, .26);
}
.landing-main {
  width: min(1180px, calc(100% - 2.5rem));
  margin-inline: auto;
  padding: 3.25rem 0 1rem;
}
.landing-hero {
  position: relative;
  min-height: 670px;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(460px, 1.1fr);
  align-items: center;
  gap: clamp(2.5rem, 6vw, 6rem);
  padding: 3rem 0 6rem;
}
.landing-hero::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 2rem;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(100, 216, 255, .28), transparent);
}
.landing-hero-glow {
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
  filter: blur(10px);
}
.landing-hero-glow-one {
  width: 480px;
  height: 480px;
  top: 5%;
  right: 6%;
  background: radial-gradient(circle, rgba(39, 215, 255, .11), transparent 68%);
}
.landing-hero-glow-two {
  width: 360px;
  height: 360px;
  left: -18%;
  bottom: 0;
  background: radial-gradient(circle, rgba(66, 126, 255, .09), transparent 70%);
}
.landing-hero-copy,
.landing-hero-visual {
  position: relative;
  z-index: 2;
}
.landing-eyebrow,
.landing-section-kicker,
.landing-feature-kicker {
  color: #63e3ff;
  font-size: .73rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.landing-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .52rem .72rem;
  border: 1px solid rgba(39, 215, 255, .18);
  border-radius: 999px;
  background: rgba(39, 215, 255, .055);
}
.landing-eyebrow svg { width: .92rem; height: .92rem; }
.landing-hero h1 {
  margin-top: 1.45rem;
  color: #f8fafc;
  font-family: var(--font-display);
  font-size: clamp(3.8rem, 7vw, 6.65rem);
  font-weight: 700;
  letter-spacing: -.07em;
  line-height: .88;
}
.landing-hero h1 span {
  color: transparent;
  background: linear-gradient(115deg, #f8fafc 5%, #87ebff 54%, #5993ff 100%);
  background-clip: text;
  -webkit-background-clip: text;
}
.landing-hero-copy > p {
  max-width: 36rem;
  margin-top: 1.75rem;
  color: #96a5b8;
  font-size: 1.05rem;
  line-height: 1.75;
}
.landing-hero-actions {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-top: 2rem;
}
.landing-primary-button {
  min-height: 3.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  padding: .85rem 1.25rem;
  border: 1px solid rgba(126, 232, 255, .55);
  border-radius: .9rem;
  color: #041019;
  background: linear-gradient(135deg, #b9f4ff 0%, #55ddfa 50%, #42a6ff 100%);
  box-shadow: 0 14px 34px rgba(39, 215, 255, .18), inset 0 1px 0 rgba(255, 255, 255, .56);
  font-size: .86rem;
  font-weight: 850;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.landing-primary-button svg { width: 1rem; height: 1rem; }
.landing-primary-button:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow: 0 18px 42px rgba(39, 215, 255, .26), inset 0 1px 0 rgba(255, 255, 255, .66);
}
.landing-trust-note {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: #6f8094;
  font-size: .72rem;
  line-height: 1.4;
}
.landing-trust-note i,
.landing-video-topline i {
  width: .42rem;
  height: .42rem;
  display: inline-block;
  border-radius: 999px;
  background: #27d7ff;
  box-shadow: 0 0 12px rgba(39, 215, 255, .8);
}
.landing-hero-visual {
  min-height: 500px;
}
.landing-visual-orbit {
  position: absolute;
  border: 1px solid rgba(109, 225, 255, .13);
  border-radius: 50%;
  pointer-events: none;
}
.landing-orbit-one { width: 480px; height: 480px; top: 2%; left: 7%; }
.landing-orbit-two { width: 380px; height: 380px; top: 12%; left: 16%; }
.landing-hero-image-frame {
  position: absolute;
  width: min(100%, 520px);
  aspect-ratio: 1 / .94;
  top: 2%;
  right: 0;
  overflow: hidden;
  border: 1px solid rgba(121, 222, 255, .2);
  border-radius: 2rem;
  background: #07101a;
  box-shadow: 0 40px 100px rgba(0, 0, 0, .46), 0 0 70px rgba(39, 215, 255, .08), inset 0 1px 0 rgba(255,255,255,.08);
  transform: perspective(1000px) rotateY(-4deg) rotateX(1deg);
}
.landing-hero-image-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.landing-image-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 48%, rgba(2, 6, 12, .82) 100%);
  box-shadow: inset 0 0 70px rgba(3, 8, 14, .24);
}
.landing-visual-label {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  background: rgba(4, 11, 19, .68);
  backdrop-filter: blur(14px);
  color: #c6f6ff;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.landing-visual-label i {
  width: .4rem;
  height: .4rem;
  border-radius: 50%;
  background: #27d7ff;
  box-shadow: 0 0 10px rgba(39,215,255,.8);
}
.landing-visual-label-top { top: 1rem; left: 1rem; padding: .48rem .66rem; }
.landing-visual-label-bottom { right: 1rem; bottom: 1rem; padding: .5rem .72rem; }
.landing-floating-card {
  position: absolute;
  z-index: 4;
  overflow: hidden;
  border: 1px solid rgba(150, 228, 255, .19);
  border-radius: 1rem;
  background: rgba(5, 11, 18, .86);
  box-shadow: 0 22px 45px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .06);
  backdrop-filter: blur(16px);
}
.landing-floating-card img { width: 100%; height: 100%; object-fit: cover; }
.landing-floating-card span {
  position: absolute;
  right: .65rem;
  bottom: .55rem;
  left: .65rem;
  color: #e9fbff;
  font-size: .58rem;
  font-weight: 750;
  text-shadow: 0 2px 8px rgba(0,0,0,.7);
}
.landing-floating-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 42%, rgba(2, 6, 12, .82));
}
.landing-floating-card span { z-index: 2; }
.landing-floating-card-one {
  width: 165px;
  height: 112px;
  left: -2%;
  top: 18%;
  transform: rotate(-5deg);
}
.landing-floating-card-two {
  width: 190px;
  height: 126px;
  right: -5%;
  bottom: 2%;
  transform: rotate(4deg);
}
.landing-showcase,
.landing-exclusive,
.landing-advantages {
  padding: 6.5rem 0;
}
.landing-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 3rem;
  margin-bottom: 2.4rem;
}
.landing-section-heading h2 {
  margin-top: .7rem;
  color: #f8fafc;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 680;
  letter-spacing: -.055em;
  line-height: 1.04;
}
.landing-section-heading > p,
.landing-section-heading > div + p {
  max-width: 30rem;
  color: #7d8da2;
  font-size: .87rem;
  line-height: 1.75;
}
.landing-section-heading-centered {
  max-width: 760px;
  margin-right: auto;
  margin-bottom: 2.6rem;
  margin-left: auto;
  display: block;
  text-align: center;
}
.landing-section-heading-centered p {
  max-width: 41rem;
  margin: 1rem auto 0;
}
.landing-showcase-grid {
  display: grid;
  grid-template-columns: 1.35fr .85fr .85fr;
  grid-template-rows: 230px 230px;
  gap: 1rem;
}
.landing-showcase-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(100, 190, 222, .13);
  border-radius: 1.35rem;
  background: #07101a;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 18px 50px rgba(0,0,0,.22);
}
.landing-showcase-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .65s cubic-bezier(.2,.7,.2,1);
}
.landing-showcase-card:hover img { transform: scale(1.035); }
.landing-showcase-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 28%, rgba(2, 7, 12, .92) 100%);
}
.landing-showcase-card-wide { grid-row: 1 / 3; }
.landing-showcase-card-tall { grid-row: 1 / 3; }
.landing-showcase-card-small { grid-column: 3; }
.landing-showcase-overlay {
  position: absolute;
  z-index: 2;
  right: 1.1rem;
  bottom: 1rem;
  left: 1.1rem;
}
.landing-showcase-overlay span {
  color: #65e2ff;
  font-family: var(--font-mono);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .12em;
}
.landing-showcase-overlay h3 {
  margin-top: .3rem;
  color: #f8fafc;
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 650;
  letter-spacing: -.025em;
}
.landing-showcase-copy-card {
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.35rem;
  background:
    radial-gradient(circle at 100% 0%, rgba(39,215,255,.16), transparent 42%),
    linear-gradient(145deg, rgba(10, 29, 43, .95), rgba(6, 11, 19, .98));
}
.landing-showcase-copy-card::after { display: none; }
.landing-showcase-copy-icon,
.landing-feature-icon,
.landing-advantage-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(39,215,255,.19);
  color: #76e8ff;
  background: rgba(39,215,255,.07);
}
.landing-showcase-copy-icon {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: .78rem;
}
.landing-showcase-copy-icon svg { width: 1.1rem; height: 1.1rem; }
.landing-showcase-copy-card strong {
  margin-top: 1rem;
  color: #f1f8fb;
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1.25;
}
.landing-showcase-copy-card p {
  margin-top: .55rem;
  color: #76879c;
  font-size: .68rem;
  line-height: 1.6;
}
.landing-exclusive {
  position: relative;
}
.landing-exclusive::before {
  content: '';
  position: absolute;
  inset: 1rem -20vw;
  z-index: -1;
  background:
    radial-gradient(620px circle at 18% 38%, rgba(39,215,255,.055), transparent 62%),
    radial-gradient(650px circle at 83% 74%, rgba(55,95,210,.065), transparent 62%);
}
.landing-feature {
  position: relative;
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
  min-height: 560px;
  margin-top: 1.25rem;
  padding: clamp(2rem, 4vw, 4rem);
  overflow: hidden;
  border: 1px solid rgba(99, 181, 215, .14);
  border-radius: 2rem;
  background:
    radial-gradient(600px circle at 96% 0%, rgba(39, 215, 255, .1), transparent 55%),
    linear-gradient(145deg, rgba(8, 19, 31, .92), rgba(4, 8, 14, .98));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 30px 80px rgba(0,0,0,.22);
}
.landing-feature-storyboard {
  grid-template-columns: 1.2fr .8fr;
  margin-top: 1.4rem;
  background:
    radial-gradient(600px circle at 0% 100%, rgba(39, 215, 255, .09), transparent 55%),
    linear-gradient(215deg, rgba(8, 19, 31, .94), rgba(4, 8, 14, .98));
}
.landing-feature-copy { position: relative; z-index: 2; }
.landing-feature-number {
  position: absolute;
  top: -2.1rem;
  right: 0;
  color: rgba(122, 226, 255, .075);
  font-family: var(--font-display);
  font-size: 8rem;
  font-weight: 700;
  line-height: 1;
}
.landing-feature-icon {
  width: 3.15rem;
  height: 3.15rem;
  margin-bottom: 1rem;
  border-radius: 1rem;
  box-shadow: 0 12px 28px rgba(39,215,255,.08);
}
.landing-feature-icon svg { width: 1.35rem; height: 1.35rem; }
.landing-feature-copy h3 {
  margin-top: .3rem;
  color: #f8fafc;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4vw, 3.65rem);
  font-weight: 680;
  letter-spacing: -.06em;
  line-height: 1;
}
.landing-feature-copy > p {
  margin-top: 1.1rem;
  color: #8595a9;
  font-size: .88rem;
  line-height: 1.78;
}
.landing-feature-copy ul {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  margin-top: 1.35rem;
}
.landing-feature-copy li {
  display: flex;
  align-items: center;
  gap: .65rem;
  color: #b6c4d3;
  font-size: .77rem;
}
.landing-feature-copy li svg {
  width: .95rem;
  height: .95rem;
  color: #55dcf8;
}
.landing-feature-copy > a {
  min-height: 3rem;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-top: 1.7rem;
  padding: .75rem 1rem;
  border: 1px solid rgba(39,215,255,.26);
  border-radius: .85rem;
  color: #a7f2ff;
  background: rgba(39,215,255,.075);
  font-size: .74rem;
  font-weight: 800;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.landing-feature-copy > a svg { width: .95rem; height: .95rem; }
.landing-feature-copy > a:hover {
  transform: translateY(-2px);
  border-color: rgba(39,215,255,.45);
  background: rgba(39,215,255,.12);
}
.landing-video-stage {
  position: relative;
  min-height: 470px;
}
.landing-video-ambient {
  position: absolute;
  width: 420px;
  height: 420px;
  top: 4%;
  left: 10%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(39,215,255,.14), transparent 66%);
  filter: blur(10px);
}
.landing-video-card {
  position: absolute;
  z-index: 2;
  overflow: hidden;
  border: 1px solid rgba(137, 223, 255, .18);
  border-radius: 1.2rem;
  background: #04080d;
  box-shadow: 0 30px 70px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
}
.landing-video-topline {
  min-height: 2.7rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 .85rem;
  color: #c8d8e6;
  background: rgba(7,15,24,.95);
  font-size: .61rem;
  font-weight: 700;
}
.landing-video-topline span { display: inline-flex; align-items: center; gap: .5rem; }
.landing-video-topline small { color: #64748b; font-family: var(--font-mono); font-size: .55rem; }
.landing-video-card video {
  width: 100%;
  height: calc(100% - 2.7rem);
  display: block;
  object-fit: cover;
  background: #020407;
}
.landing-video-landscape {
  width: min(92%, 520px);
  aspect-ratio: 16 / 10.3;
  top: 8%;
  left: 0;
  transform: perspective(1100px) rotateY(5deg) rotateX(1deg);
}
.landing-video-portrait {
  width: 190px;
  height: 365px;
  right: 0;
  bottom: 0;
  transform: perspective(1100px) rotateY(-7deg) rotateZ(1deg);
}
.landing-storyboard-stage {
  position: relative;
  z-index: 2;
  padding: .9rem;
  border: 1px solid rgba(130, 219, 255, .18);
  border-radius: 1.35rem;
  background: rgba(4, 9, 16, .92);
  box-shadow: 0 32px 80px rgba(0,0,0,.43), inset 0 1px 0 rgba(255,255,255,.05);
  transform: perspective(1200px) rotateY(3deg) rotateX(1deg);
}
.landing-board-toolbar {
  min-height: 3.3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 .55rem .75rem;
  color: #dbeaf4;
  font-size: .68rem;
  font-weight: 750;
}
.landing-board-toolbar span { display: inline-flex; align-items: center; gap: .6rem; }
.landing-board-toolbar svg { width: 1rem; height: 1rem; color: #64e2ff; }
.landing-board-toolbar small { color: #607085; font-size: .58rem; }
.landing-board-grid {
  display: grid;
  grid-template-columns: 1.12fr .88fr;
  grid-template-rows: 195px 165px;
  gap: .6rem;
}
.landing-board-shot {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(90, 164, 194, .13);
  border-radius: .8rem;
  background: #07111b;
}
.landing-board-shot img { width: 100%; height: 100%; object-fit: cover; }
.landing-board-shot::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 48%, rgba(2,6,12,.82));
}
.landing-board-shot figcaption {
  position: absolute;
  z-index: 2;
  right: .6rem;
  bottom: .5rem;
  left: .6rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.landing-board-shot figcaption span { color: #c8f7ff; font-family: var(--font-mono); font-size: .55rem; font-weight: 700; }
.landing-board-shot figcaption small { color: #8a9bad; font-size: .51rem; }
.landing-board-shot-one { grid-column: 1; grid-row: 1; }
.landing-board-shot-two { grid-column: 2; grid-row: 1; }
.landing-board-shot-three { grid-column: 1; grid-row: 2; }
.landing-board-shot-four { grid-column: 2; grid-row: 2; }
.landing-board-timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .35rem;
  margin-top: .75rem;
}
.landing-board-timeline span { height: 3px; border-radius: 999px; background: #162535; }
.landing-board-timeline span.active { background: linear-gradient(90deg, #27d7ff, #4d8dff); box-shadow: 0 0 10px rgba(39,215,255,.45); }
.landing-advantages {
  padding-top: 7rem;
}
.landing-advantages-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: .8rem;
}
.landing-advantage-card {
  grid-column: span 2;
  min-height: 235px;
  position: relative;
  overflow: hidden;
  padding: 1.35rem;
  border: 1px solid rgba(84, 164, 196, .13);
  border-radius: 1.15rem;
  background:
    radial-gradient(260px circle at 100% 0%, rgba(39,215,255,.07), transparent 58%),
    rgba(7, 14, 23, .78);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.landing-advantage-card:nth-child(4) { grid-column: 2 / span 2; }
.landing-advantage-card-wide { grid-column: span 2; }
.landing-advantage-card:hover {
  transform: translateY(-3px);
  border-color: rgba(39,215,255,.24);
  background:
    radial-gradient(260px circle at 100% 0%, rgba(39,215,255,.11), transparent 58%),
    rgba(8, 17, 27, .9);
}
.landing-advantage-card > span {
  position: absolute;
  top: .9rem;
  right: 1rem;
  color: rgba(122,225,255,.2);
  font-family: var(--font-mono);
  font-size: .6rem;
  font-weight: 700;
}
.landing-advantage-check {
  width: 2.55rem;
  height: 2.55rem;
  border-radius: .8rem;
}
.landing-advantage-check svg { width: 1rem; height: 1rem; }
.landing-advantage-card h3 {
  margin-top: 1.25rem;
  color: #edf7fb;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 650;
  letter-spacing: -.025em;
}
.landing-advantage-card p {
  margin-top: .55rem;
  color: #718399;
  font-size: .72rem;
  line-height: 1.67;
}
.landing-final-cta {
  position: relative;
  min-height: 310px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  margin: 3rem 0 7rem;
  padding: clamp(2rem, 5vw, 4.2rem);
  overflow: hidden;
  border: 1px solid rgba(95, 197, 229, .18);
  border-radius: 2rem;
  background:
    linear-gradient(105deg, rgba(7, 22, 35, .98), rgba(8, 16, 27, .94)),
    #06101a;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 26px 70px rgba(0,0,0,.28);
}
.landing-final-cta::after {
  content: '';
  position: absolute;
  width: 330px;
  height: 330px;
  right: 8%;
  border: 1px solid rgba(91,224,255,.12);
  border-radius: 50%;
  box-shadow: 0 0 0 42px rgba(39,215,255,.025), 0 0 0 84px rgba(39,215,255,.018);
}
.landing-final-cta-glow {
  position: absolute;
  width: 550px;
  height: 370px;
  right: -8%;
  bottom: -70%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(39,215,255,.21), transparent 66%);
}
.landing-final-cta > * { position: relative; z-index: 2; }
.landing-final-cta h2 {
  margin-top: .75rem;
  color: #f5fbfd;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3.6rem);
  font-weight: 680;
  letter-spacing: -.06em;
  line-height: 1.03;
}

@media (max-width: 1050px) {
  .landing-hero { grid-template-columns: minmax(0, .95fr) minmax(390px, 1.05fr); gap: 2rem; }
  .landing-hero h1 { font-size: clamp(3.5rem, 7.5vw, 5.6rem); }
  .landing-floating-card-one { left: -4%; }
  .landing-floating-card-two { right: -2%; }
  .landing-feature { grid-template-columns: .9fr 1.1fr; gap: 2.3rem; padding: 2.2rem; }
  .landing-feature-storyboard { grid-template-columns: 1.1fr .9fr; }
  .landing-video-portrait { width: 165px; height: 330px; }
}
@media (max-width: 880px) {
  .landing-main { width: min(100% - 2rem, 720px); padding-top: 1.5rem; }
  .landing-hero { min-height: auto; grid-template-columns: 1fr; gap: 3rem; padding: 3.5rem 0 6rem; }
  .landing-hero-copy { text-align: center; }
  .landing-hero-copy > p { margin-inline: auto; }
  .landing-hero-actions { justify-content: center; }
  .landing-hero-visual { width: min(100%, 610px); min-height: 540px; margin-inline: auto; }
  .landing-hero-image-frame { right: 50%; transform: translateX(50%); }
  .landing-floating-card-one { left: 0; }
  .landing-floating-card-two { right: 0; }
  .landing-section-heading { display: block; }
  .landing-section-heading > p, .landing-section-heading > div + p { margin-top: 1rem; }
  .landing-showcase-grid { grid-template-columns: 1.2fr .8fr; grid-template-rows: 260px 220px 220px; }
  .landing-showcase-card-wide { grid-column: 1; grid-row: 1 / 3; }
  .landing-showcase-card-tall { grid-column: 2; grid-row: 1 / 3; }
  .landing-showcase-card-small { grid-column: auto; grid-row: 3; }
  .landing-feature, .landing-feature-storyboard { grid-template-columns: 1fr; gap: 3rem; }
  .landing-feature-tvc .landing-video-stage { order: 2; }
  .landing-feature-storyboard .landing-storyboard-stage { order: 2; }
  .landing-video-stage { width: min(100%, 620px); margin-inline: auto; }
  .landing-advantages-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .landing-advantage-card, .landing-advantage-card:nth-child(4), .landing-advantage-card-wide { grid-column: auto; }
  .landing-advantage-card-wide { grid-column: 1 / 3; }
  .landing-final-cta { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 620px) {
  .landing-page-shell .app-header-layer { padding: .85rem 1rem; }
  .landing-page-shell .app-header-layer > div { gap: .65rem; }
  .landing-page-shell .app-header-layer .tvc-header-actions > span { display: none; }
  .landing-main { width: min(100% - 1.5rem, 540px); }
  .landing-hero { padding-top: 2.6rem; }
  .landing-hero h1 { font-size: clamp(3.1rem, 16vw, 4.6rem); }
  .landing-hero-copy > p { font-size: .92rem; }
  .landing-hero-actions { flex-direction: column; }
  .landing-trust-note { text-align: center; }
  .landing-hero-visual { min-height: 420px; }
  .landing-hero-image-frame { width: calc(100% - 1rem); border-radius: 1.4rem; }
  .landing-floating-card { display: none; }
  .landing-orbit-one { width: 360px; height: 360px; left: 50%; transform: translateX(-50%); }
  .landing-orbit-two { width: 290px; height: 290px; left: 50%; transform: translateX(-50%); }
  .landing-showcase, .landing-exclusive, .landing-advantages { padding: 4.5rem 0; }
  .landing-section-heading h2 { font-size: 2.35rem; }
  .landing-showcase-grid { display: flex; flex-direction: column; }
  .landing-showcase-card { min-height: 240px; }
  .landing-showcase-card-tall { min-height: 340px; }
  .landing-showcase-copy-card { min-height: 220px; }
  .landing-feature, .landing-feature-storyboard { min-height: 0; padding: 1.25rem; border-radius: 1.35rem; }
  .landing-feature-copy { padding: .45rem; }
  .landing-feature-number { top: -1.2rem; font-size: 6rem; }
  .landing-video-stage { min-height: 400px; }
  .landing-video-landscape { width: 100%; top: 0; transform: none; }
  .landing-video-portrait { width: 130px; height: 260px; right: .5rem; transform: none; }
  .landing-storyboard-stage { transform: none; }
  .landing-board-grid { grid-template-rows: 145px 125px; }
  .landing-board-shot figcaption small { display: none; }
  .landing-advantages-grid { grid-template-columns: 1fr; }
  .landing-advantage-card-wide { grid-column: auto; }
  .landing-advantage-card { min-height: 210px; }
  .landing-final-cta { margin-bottom: 4.5rem; padding: 2rem 1.35rem; border-radius: 1.35rem; }
  .landing-final-cta h2 br { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .landing-primary-button,
  .landing-showcase-card img,
  .landing-feature-copy > a,
  .landing-advantage-card { transition: none; }
}

/* --- Revisi landing page: video terpisah, CTA visual, dan header sinematik --- */
.landing-page-shell .app-header-layer {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: linear-gradient(180deg, rgba(6, 11, 18, .72), rgba(4, 8, 14, .58)) !important;
  -webkit-backdrop-filter: blur(22px) saturate(145%) !important;
  backdrop-filter: blur(22px) saturate(145%) !important;
  border-bottom-color: rgba(117, 219, 255, .13);
  box-shadow: 0 12px 38px rgba(0, 0, 0, .2), inset 0 -1px 0 rgba(255, 255, 255, .025);
}

.landing-eyebrow {
  text-transform: none;
  letter-spacing: .045em;
}

.landing-video-stage {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 190px);
  align-items: end;
  gap: 1rem;
  padding: 1.05rem;
  border: 1px solid rgba(116, 210, 244, .11);
  border-radius: 1.55rem;
  background: linear-gradient(145deg, rgba(9, 21, 32, .72), rgba(4, 9, 16, .52));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 28px 70px rgba(0, 0, 0, .24);
}

.landing-video-ambient {
  width: 78%;
  height: 84%;
  top: 8%;
  left: 11%;
}

.landing-video-card {
  position: relative;
  inset: auto;
  width: 100%;
  transform: none;
}

.landing-video-landscape {
  width: 100%;
  aspect-ratio: 16 / 10.25;
  top: auto;
  left: auto;
  transform: none;
}

.landing-video-portrait {
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 17.35;
  right: auto;
  bottom: auto;
  transform: none;
}

.landing-final-cta {
  min-height: 360px;
  justify-content: flex-start;
  padding-right: clamp(2rem, 48%, 34rem);
}

.landing-final-cta-copy {
  max-width: 570px;
}

.landing-final-cta-copy .landing-primary-button {
  margin-top: 1.65rem;
}

.landing-final-cta-visual {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  bottom: 0;
  width: 47%;
  overflow: hidden;
}

.landing-final-cta-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 48% center;
  filter: saturate(.92) contrast(1.03);
}

.landing-final-cta-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, #071623 0%, rgba(7, 22, 35, .88) 13%, rgba(7, 22, 35, .2) 55%, rgba(2, 8, 14, .18) 100%),
    linear-gradient(180deg, rgba(3, 9, 15, .05), rgba(3, 9, 15, .38));
}

.landing-final-cta::after {
  right: 13%;
  z-index: 1;
}

@media (max-width: 1050px) {
  .landing-video-stage {
    grid-template-columns: minmax(0, 1fr) 165px;
  }
}

@media (max-width: 880px) {
  .landing-video-stage {
    grid-template-columns: minmax(0, 1fr) minmax(145px, 180px);
  }

  .landing-final-cta {
    min-height: 350px;
    padding-right: 43%;
  }

  .landing-final-cta-visual {
    width: 48%;
  }
}

@media (max-width: 620px) {
  .landing-video-stage {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: .85rem;
    padding: .8rem;
  }

  .landing-video-landscape {
    width: 100%;
    top: auto;
  }

  .landing-video-portrait {
    width: min(100%, 190px);
    height: auto;
    right: auto;
    justify-self: center;
  }

  .landing-final-cta {
    min-height: 0;
    padding: 2rem 1.35rem 0;
  }

  .landing-final-cta-copy {
    max-width: none;
  }

  .landing-final-cta-visual {
    position: relative;
    inset: auto;
    width: calc(100% + 2.7rem);
    height: 245px;
    margin: 2rem -1.35rem 0;
  }

  .landing-final-cta-shade {
    background:
      linear-gradient(180deg, #071623 0%, rgba(7, 22, 35, .22) 32%, rgba(3, 9, 15, .3) 100%),
      linear-gradient(90deg, rgba(3, 9, 15, .14), rgba(3, 9, 15, .06));
  }
}

/* --- Koreksi posisi visual CTA: gambar mengisi lingkaran kiri --- */
.landing-final-cta {
  min-height: 360px;
  display: grid;
  grid-template-columns: minmax(290px, 380px) minmax(0, 1fr);
  align-items: center;
  justify-content: initial;
  gap: clamp(2rem, 5vw, 5rem);
  padding: clamp(2.4rem, 5vw, 4.2rem);
}

.landing-final-cta-copy {
  grid-column: 2;
  grid-row: 1;
  max-width: 590px;
}

.landing-final-cta-visual {
  position: relative;
  inset: auto;
  grid-column: 1;
  grid-row: 1;
  justify-self: center;
  width: min(100%, 330px);
  height: auto;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid rgba(111, 225, 255, .23);
  border-radius: 50%;
  background: #06111b;
  box-shadow:
    0 0 0 32px rgba(39, 215, 255, .026),
    0 0 0 64px rgba(39, 215, 255, .016),
    0 26px 65px rgba(0, 0, 0, .36),
    inset 0 1px 0 rgba(255, 255, 255, .08);
}

.landing-final-cta-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 52% center;
  filter: saturate(.94) contrast(1.03);
}

.landing-final-cta-shade {
  background:
    linear-gradient(180deg, rgba(3, 9, 15, .02), rgba(3, 9, 15, .34)),
    radial-gradient(circle at 50% 42%, transparent 38%, rgba(2, 8, 14, .22) 100%);
}

.landing-final-cta-glow {
  right: auto;
  left: -8%;
  bottom: -70%;
}

.landing-final-cta::after {
  display: none;
}

@media (max-width: 880px) {
  .landing-final-cta {
    min-height: 340px;
    grid-template-columns: minmax(245px, 310px) minmax(0, 1fr);
    gap: 2rem;
    padding: 2.4rem;
  }

  .landing-final-cta-visual {
    width: min(100%, 280px);
  }
}

@media (max-width: 620px) {
  .landing-final-cta {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 1.8rem;
    padding: 2rem 1.35rem;
  }

  .landing-final-cta-visual {
    position: relative;
    inset: auto;
    grid-column: 1;
    grid-row: 1;
    width: min(82vw, 275px);
    height: auto;
    margin: 0 auto;
  }

  .landing-final-cta-copy {
    grid-column: 1;
    grid-row: 2;
    max-width: none;
  }
}

/* --- Final CTA layout fix: stable desktop and mobile composition --- */
.landing-final-cta {
  isolation: isolate;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(250px, 340px) minmax(0, 1fr);
  grid-template-rows: auto;
  align-items: center;
  justify-content: initial;
  gap: clamp(2.75rem, 6vw, 6rem);
  padding: clamp(2.75rem, 5vw, 4.25rem);
}

.landing-final-cta > * {
  min-width: 0;
}

.landing-final-cta-glow {
  position: absolute !important;
  z-index: 0 !important;
  left: -120px;
  right: auto;
  bottom: -275px;
  width: 520px;
  height: 520px;
  margin: 0;
  pointer-events: none;
}

.landing-final-cta-copy {
  position: relative;
  z-index: 2;
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  max-width: 620px;
  justify-self: start;
}

.landing-final-cta-visual {
  position: relative !important;
  z-index: 2;
  inset: auto;
  grid-column: 1;
  grid-row: 1;
  justify-self: center;
  width: min(100%, 330px);
  height: auto;
  aspect-ratio: 1;
  margin: 0;
  overflow: hidden;
  border-radius: 50%;
}

.landing-final-cta-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 52% center;
}

.landing-final-cta-shade {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
}

@media (max-width: 880px) {
  .landing-final-cta {
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
    gap: 2.5rem;
    padding: 2.75rem;
  }

  .landing-final-cta-visual {
    width: min(100%, 270px);
  }
}

@media (max-width: 700px) {
  .landing-final-cta {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 2rem;
    padding: 2.25rem 1.5rem;
  }

  .landing-final-cta-visual {
    grid-column: 1;
    grid-row: 1;
    width: min(72vw, 255px);
    max-width: 100%;
    margin: 0 auto;
  }

  .landing-final-cta-copy {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    max-width: none;
    justify-self: stretch;
    text-align: center;
  }

  .landing-final-cta-copy .landing-primary-button {
    margin-inline: auto;
  }

  .landing-final-cta-glow {
    left: 50%;
    bottom: -320px;
    width: 480px;
    height: 480px;
    transform: translateX(-50%);
  }
}

@media (max-width: 420px) {
  .landing-final-cta {
    gap: 1.65rem;
    padding: 1.9rem 1.2rem 2rem;
  }

  .landing-final-cta-visual {
    width: min(70vw, 235px);
  }

  .landing-final-cta h2 {
    font-size: clamp(1.95rem, 10vw, 2.45rem);
  }
}


/* --- Revisi hero typography, label visual, dan kontrol preview video --- */
.landing-hero h1 {
  letter-spacing: -.04em;
  line-height: .98;
}

.landing-visual-label-workspace {
  left: 1rem;
  bottom: 1rem;
  padding: .48rem .66rem;
}

.landing-video-card video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  background: #020407;
  cursor: pointer;
}

.landing-video-play {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  width: clamp(3.15rem, 5vw, 4.25rem);
  height: clamp(3.15rem, 5vw, 4.25rem);
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(213, 248, 255, .38);
  border-radius: 50%;
  background: rgba(5, 15, 24, .64);
  color: #effcff;
  box-shadow: 0 16px 34px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(14px) saturate(135%);
  backdrop-filter: blur(14px) saturate(135%);
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition: transform .2s ease, background .2s ease, border-color .2s ease, opacity .2s ease;
}

.landing-video-play svg {
  width: 41%;
  height: 41%;
  margin-left: 5%;
}

.landing-video-play:hover {
  border-color: rgba(213, 248, 255, .68);
  background: rgba(10, 27, 40, .78);
  transform: translate(-50%, -50%) scale(1.05);
}

.landing-video-play[hidden] {
  display: none;
}

@media (max-width: 620px) {
  .landing-hero h1 {
    letter-spacing: -.032em;
    line-height: 1;
  }

  .landing-visual-label-workspace {
    left: .8rem;
    bottom: .8rem;
  }
}

/* --- Revisi preview Iklan TV: hanya video landscape --- */
.landing-feature-tvc .landing-video-stage {
  grid-template-columns: minmax(0, 1fr);
}

.landing-feature-tvc .landing-video-landscape {
  width: 100%;
  aspect-ratio: 16 / 9;
}

/* --- Revisi header landing page: selalu floating dan blur sinematik --- */
.landing-page-shell {
  --landing-header-height: 73px;
  padding-top: var(--landing-header-height);
}

body .landing-page-shell .app-header-layer {
  position: fixed !important;
  top: 0;
  right: 0;
  left: 0;
  z-index: 10000;
  width: 100%;
  box-sizing: border-box;
  background: linear-gradient(180deg, rgba(6, 11, 18, .76), rgba(4, 8, 14, .62)) !important;
  -webkit-backdrop-filter: blur(22px) saturate(145%) !important;
  backdrop-filter: blur(22px) saturate(145%) !important;
  border-bottom-color: rgba(117, 219, 255, .14);
  box-shadow: 0 12px 38px rgba(0, 0, 0, .22), inset 0 -1px 0 rgba(255, 255, 255, .03);
  transform: translateZ(0);
}

@media (max-width: 700px) {
  .landing-page-shell {
    --landing-header-height: 60px;
  }

  body .landing-page-shell .app-header-layer {
    background: linear-gradient(180deg, rgba(6, 11, 18, .84), rgba(4, 8, 14, .72)) !important;
    -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
    backdrop-filter: blur(18px) saturate(140%) !important;
  }
}

/* --- Notification popup --- */
.notification-popup-root {
  position: relative;
  z-index: 1000;
}
body.notification-popup-open {
  overflow: hidden;
}
.notification-popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background: rgba(2, 6, 12, .76);
  backdrop-filter: blur(18px) saturate(118%);
  -webkit-backdrop-filter: blur(18px) saturate(118%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, visibility .18s ease;
}
.notification-popup-overlay.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.notification-popup-card {
  position: relative;
  width: min(100%, 37rem);
  max-height: min(86vh, 46rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(39, 215, 255, .2);
  border-radius: 1.45rem;
  background:
    radial-gradient(circle at 82% -10%, rgba(39, 215, 255, .13), transparent 36%),
    linear-gradient(160deg, rgba(13, 19, 31, .995), rgba(5, 9, 15, .995));
  box-shadow: 0 34px 90px rgba(0, 0, 0, .68), 0 0 0 1px rgba(255, 255, 255, .025), 0 0 50px rgba(39, 215, 255, .08);
  transform: translateY(14px) scale(.975);
  opacity: 0;
  transition: transform .2s ease, opacity .18s ease;
}
.notification-popup-overlay.is-visible .notification-popup-card {
  transform: translateY(0) scale(1);
  opacity: 1;
}
.notification-popup-overlay.is-closing .notification-popup-card {
  transform: translateY(8px) scale(.985);
  opacity: 0;
}
.notification-popup-glow {
  position: absolute;
  top: -7rem;
  right: -5rem;
  width: 15rem;
  height: 15rem;
  border-radius: 999px;
  background: rgba(39, 215, 255, .14);
  filter: blur(48px);
  pointer-events: none;
}
.notification-popup-close {
  position: absolute;
  z-index: 3;
  top: .9rem;
  right: .9rem;
  width: 2.3rem;
  height: 2.3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(100, 116, 139, .38);
  border-radius: .78rem;
  background: rgba(3, 8, 14, .74);
  color: #94a3b8;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
  transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease;
}
.notification-popup-close:hover {
  color: #dffaff;
  border-color: rgba(39, 215, 255, .36);
  background: rgba(39, 215, 255, .09);
  transform: translateY(-1px);
}
.notification-popup-close svg {
  width: 1rem;
  height: 1rem;
}
.notification-popup-scroll {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(39, 215, 255, .28) transparent;
}
.notification-popup-scroll::-webkit-scrollbar {
  width: .42rem;
}
.notification-popup-scroll::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(39, 215, 255, .24);
}
.notification-popup-header {
  position: relative;
  padding: 1.55rem 4rem 1.05rem 1.55rem;
}
.notification-popup-badge {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-bottom: .85rem;
  padding: .38rem .58rem;
  border: 1px solid rgba(39, 215, 255, .2);
  border-radius: 999px;
  background: rgba(39, 215, 255, .075);
  color: #8defff;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.notification-popup-badge svg {
  width: .88rem;
  height: .88rem;
}
.notification-popup-header h2 {
  max-width: 30rem;
  color: #f8fafc;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -.035em;
}
.notification-popup-header > p {
  max-width: 31rem;
  margin-top: .7rem;
  color: #94a3b8;
  font-size: .79rem;
  line-height: 1.72;
}
.notification-popup-hero {
  margin: .15rem 1.55rem 0;
  overflow: hidden;
  border: 1px solid rgba(71, 85, 105, .36);
  border-radius: 1rem;
  background: #05090f;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .28);
}
.notification-popup-hero img {
  width: 100%;
  max-height: 19rem;
  display: block;
  object-fit: cover;
}
.notification-popup-content {
  display: flex;
  flex-direction: column;
  gap: .72rem;
  padding: 1rem 1.55rem 1.45rem;
}
.notification-popup-content-heading {
  margin-top: .25rem;
  color: #f1f5f9;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.015em;
}
.notification-popup-content-subheading {
  color: #cbd5e1;
  font-size: .78rem;
  font-weight: 750;
  line-height: 1.45;
}
.notification-popup-content-paragraph {
  color: #94a3b8;
  font-size: .76rem;
  line-height: 1.7;
}
.notification-popup-prompt {
  overflow: hidden;
  border: 1px solid rgba(39, 215, 255, .15);
  border-radius: .9rem;
  background: rgba(2, 6, 12, .64);
}
.notification-popup-prompt > span {
  display: block;
  padding: .55rem .75rem;
  border-bottom: 1px solid rgba(39, 215, 255, .1);
  color: #76e8ff;
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.notification-popup-prompt pre {
  margin: 0;
  padding: .75rem;
  overflow-x: auto;
  white-space: pre-wrap;
  color: #cbd5e1;
  font-family: var(--font-mono);
  font-size: .68rem;
  line-height: 1.62;
}
.notification-popup-content-media {
  overflow: hidden;
  border: 1px solid rgba(71, 85, 105, .34);
  border-radius: .9rem;
  background: rgba(2, 6, 12, .7);
}
.notification-popup-content-media img,
.notification-popup-content-media video {
  width: 100%;
  max-height: 21rem;
  display: block;
  object-fit: contain;
  background: #02060c;
}
.notification-popup-content-media figcaption {
  padding: .55rem .7rem;
  color: #64748b;
  font-size: .62rem;
  line-height: 1.45;
}
.notification-popup-divider {
  width: 100%;
  height: 1px;
  margin: .15rem 0;
  border: 0;
  background: rgba(71, 85, 105, .3);
}
.notification-popup-inline-button {
  min-height: 2.45rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .65rem .9rem;
  border: 1px solid rgba(39, 215, 255, .22);
  border-radius: .78rem;
  background: rgba(39, 215, 255, .075);
  color: #9eefff;
  font-size: .69rem;
  font-weight: 800;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.notification-popup-inline-button:hover {
  transform: translateY(-1px);
  border-color: rgba(39, 215, 255, .4);
  background: rgba(39, 215, 255, .12);
}
.notification-popup-inline-button svg,
.notification-popup-primary svg {
  width: .9rem;
  height: .9rem;
}
.notification-popup-footer {
  position: relative;
  display: flex;
  justify-content: flex-end;
  gap: .6rem;
  padding: .9rem 1.1rem 1.1rem;
  border-top: 1px solid rgba(71, 85, 105, .26);
  background: rgba(5, 9, 15, .94);
  box-shadow: 0 -12px 28px rgba(2, 6, 12, .32);
}
.notification-popup-dismiss,
.notification-popup-primary {
  min-height: 2.55rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .42rem;
  padding: 0 1rem;
  border-radius: .78rem;
  font-size: .69rem;
  font-weight: 850;
  transition: transform .18s ease, filter .18s ease, border-color .18s ease, background .18s ease;
}
.notification-popup-dismiss {
  border: 1px solid rgba(71, 85, 105, .52);
  background: rgba(15, 23, 42, .62);
  color: #cbd5e1;
}
.notification-popup-dismiss:hover {
  transform: translateY(-1px);
  border-color: rgba(100, 116, 139, .7);
  background: rgba(30, 41, 59, .68);
}
.notification-popup-primary {
  border: 1px solid rgba(158, 239, 255, .46);
  background: linear-gradient(135deg, #22c8f2 0%, #6ce9ff 52%, #21bde9 100%);
  color: #031017;
  box-shadow: 0 9px 24px rgba(39, 215, 255, .16), inset 0 1px 0 rgba(255, 255, 255, .42);
}
.notification-popup-primary:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
@media (max-width: 620px) {
  .notification-popup-overlay {
    place-items: end center;
    padding: .65rem;
  }
  .notification-popup-card {
    width: 100%;
    max-height: 90dvh;
    border-radius: 1.2rem;
  }
  .notification-popup-header {
    padding: 1.3rem 3.75rem .9rem 1.15rem;
  }
  .notification-popup-header > p {
    font-size: .74rem;
  }
  .notification-popup-hero {
    margin-left: 1.15rem;
    margin-right: 1.15rem;
  }
  .notification-popup-content {
    padding: .9rem 1.15rem 1.2rem;
  }
  .notification-popup-footer {
    padding: .8rem;
  }
  .notification-popup-dismiss,
  .notification-popup-primary {
    flex: 1 1 auto;
    padding-left: .75rem;
    padding-right: .75rem;
  }
}
@media (max-width: 390px) {
  .notification-popup-footer {
    flex-direction: column-reverse;
  }
  .notification-popup-dismiss,
  .notification-popup-primary {
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .notification-popup-overlay,
  .notification-popup-card {
    transition: none;
  }
}