/* ---------- normalize.min.css ---------- */
@layer reset {
:where(html){--csstools-color-scheme--light: ;--link:var(--indigo-3);--link-visited:var(--purple-3);--text-1:var(--gray-0);--text-2:var(--gray-4);--surface-1:var(--gray-9);--surface-2:var(--gray-8);--surface-3:var(--gray-7);--surface-4:var(--gray-6);--scrollthumb-color:var(--gray-6);-webkit-text-size-adjust:none;--shadow-strength:10%;--shadow-color:220 40% 2%;--inner-shadow-highlight:inset 0 -.5px 0 0 hsla(0,0%,100%,.067),inset 0 .5px 0 0 rgba(0,0,0,.467);accent-color:var(--brand,var(--link));background-color:var(--surface-1);block-size:100%;caret-color:var(--brand,var(--link));color:var(--text-1);color-scheme:dark;font-family:var(--font-system-ui);line-height:var(--font-lineheight-3);scrollbar-color:var(--scrollthumb-color) transparent}:where(html) :where(dialog){background-color:var(--surface-2)}:where(html) :where(button,.btn){--_highlight:var(--_highlight-dark);--_bg:var(--_bg-dark);--_ink-shadow:var(--_ink-shadow-dark)}:where(html) :where(button,.btn):where([type=reset]){--_text:var(--red-2);--_border:var(--surface-3)}:where(html) [disabled]:where(button,input[type=button],.btn){--_text:var(--gray-5)}:where(html) [disabled]:where(button,input[type=submit],.btn){--_text:var(--gray-5)}:where(html) [disabled]:where(button,input[type=reset],.btn){--_text:var(--gray-5)}:where(html) :where(textarea,select,input:not([type=button],[type=submit],[type=reset])){background-color:#171a1c}:where(html) :where([disabled]),:where(html) :where([type=reset]),:where(html) :where([type=submit]),:where(html) :where(form button:not([type=button])){--_bg:var(--surface-1)}:where(a[href]){color:var(--brand,var(--link))}:where(a[href]):where(:visited){color:var(--link-visited)}:focus-visible{outline-color:var(--brand,var(--link))}*,:after,:before{box-sizing:border-box}:where(:not(dialog)){margin:0}:where(:not(fieldset,progress,meter)){background-origin:border-box;background-repeat:no-repeat;border-style:solid;border-width:0}@media (prefers-reduced-motion:no-preference){:where(html){scroll-behavior:smooth}}@media (prefers-reduced-motion:no-preference){:where(:focus-visible){transition:outline-offset 145ms var(--ease-2)}:where(:not(:active):focus-visible){transition-duration:.25s}}:where(:not(:active):focus-visible){outline-offset:5px}:where(body){min-block-size:100%}:where(h1,h2,h3,h4,h5,h6){text-wrap:balance;font-weight:var(--font-weight-9);line-height:var(--font-lineheight-1)}:where(h1){font-size:var(--font-size-8);max-inline-size:var(--size-header-1)}:where(h2){font-size:var(--font-size-6);max-inline-size:var(--size-header-2)}:where(h3){font-size:var(--font-size-5)}:where(h4){font-size:var(--font-size-4)}:where(h5){font-size:var(--font-size-3)}:where(h3,h4,h5,h6,dt){max-inline-size:var(--size-header-3)}:where(p,ul,ol,dl,h6){font-size:var(--font-size-2)}:where(a,u,ins,abbr){text-underline-offset:1px}@supports (-moz-appearance:none){:where(a,u,ins,abbr){text-underline-offset:2px}}:where(a[href],area,button,input:not([type=text],[type=email],[type=number],[type=password],[type=""],[type=tel],[type=url]),label[for],select,summary,[tabindex]:not([tabindex*="-"],pre)){cursor:pointer}:where(a[href],area,button,input,label[for],select,summary,textarea,[tabindex]:not([tabindex*="-"])){-webkit-tap-highlight-color:transparent;touch-action:manipulation}:where(a):where([href]){text-decoration-color:var(--indigo-2)}:where(a):where([href]):where(:visited){text-decoration-color:var(--purple-2)}:where(a):where(:not(:hover)){text-decoration:inherit}:where(img,svg,video,canvas,audio,iframe,embed,object){display:block}:where(img,svg,video){block-size:auto;max-inline-size:100%}:where(input,button,textarea,select),:where(input[type=file])::-webkit-file-upload-button{color:inherit;font:inherit;font-size:inherit;letter-spacing:inherit}::placeholder{color:var(--gray-7);color:var(--gray-6);opacity:.75}:where(input:not([type=range]),textarea){padding-block:var(--size-1);padding-inline:var(--size-2)}:where(select){field-sizing:content;padding-block:.75ch;padding-inline:var(--size-relative-4) 0}:where(textarea,select,input:not([type=button],[type=submit],[type=reset])){background-color:var(--surface-2);background-color:var(--gray-10);border-radius:var(--radius-2)}:where(textarea){field-sizing:content;min-block-size:2lh;min-inline-size:var(--size-content-1);resize:vertical}:where(input[type=checkbox],input[type=radio]){block-size:var(--size-3);inline-size:var(--size-3)}:where(svg:not([width])){inline-size:var(--size-10)}:where(code,kbd,samp,pre){font-family:var(--font-monospace-code),monospace}:where(:not(pre)>code,kbd){white-space:nowrap}:where(pre){direction:ltr;max-inline-size:max-content;min-inline-size:0;white-space:pre;writing-mode:lr}:where(:not(pre)>code){background:var(--surface-2);border-radius:var(--radius-2);padding:var(--size-1) var(--size-2);writing-mode:lr}:where(kbd,var){border-color:var(--surface-4);border-radius:var(--radius-2);border-width:var(--border-size-1);padding:var(--size-1) var(--size-2)}:where(mark){border-radius:var(--radius-2);padding-inline:var(--size-1)}:where(ol,ul){padding-inline-start:var(--size-8)}:where(li){padding-inline-start:var(--size-2)}:where(li,dd,figcaption){max-inline-size:var(--size-content-2)}:where(p){text-wrap:pretty;max-inline-size:var(--size-content-3)}:where(dt,summary){font-weight:var(--font-weight-7)}:where(dt:not(:first-of-type)){margin-block-start:var(--size-5)}:where(small){font-size:max(.5em,var(--font-size-0));max-inline-size:var(--size-content-1)}:where(hr){background-color:var(--surface-3);height:var(--border-size-2);margin-block:var(--size-fluid-5)}:where(figure){display:grid;gap:var(--size-2);place-items:center}:where(figure)>:where(figcaption){text-wrap:balance;font-size:var(--font-size-1)}:where(blockquote,:not(blockquote)>cite){border-inline-start-width:var(--border-size-3)}:where(blockquote){display:grid;gap:var(--size-3);max-inline-size:var(--size-content-2);padding-block:var(--size-3);padding-inline:var(--size-4)}:where(:not(blockquote)>cite){padding-inline-start:var(--size-2)}:where(summary){background:var(--surface-3);border-radius:var(--radius-2);margin:calc(var(--size-2)*-1) calc(var(--size-3)*-1);padding:var(--size-2) var(--size-3)}:where(details){background:var(--surface-2);border-radius:var(--radius-2);padding-block:var(--size-2);padding-inline:var(--size-3)}:where(details[open]>summary){border-end-end-radius:0;border-end-start-radius:0;margin-bottom:var(--size-2)}:where(fieldset){border:var(--border-size-1) solid var(--surface-4);border-radius:var(--radius-2)}:where(del){background:var(--red-9);color:var(--red-2)}:where(ins){background:var(--green-9);color:var(--green-1)}:where(abbr){text-decoration-color:var(--blue-5)}:where(dialog){background-color:var(--surface-1);background-color:var(--surface-2);border-radius:var(--radius-3);box-shadow:var(--shadow-6);color:inherit}:where(menu){display:flex;gap:var(--size-3);padding-inline-start:0}:where(sup){font-size:.5em}:where(table){--nice-inner-radius:calc(var(--radius-3) - 2px);background:var(--surface-2);border:1px solid var(--surface-2);border-radius:var(--radius-3);width:fit-content}:where(table:not(:has(tfoot)) tr:last-child td:first-child){border-end-start-radius:var(--nice-inner-radius)}:where(table:not(:has(tfoot)) tr:last-child td:last-child){border-end-end-radius:var(--nice-inner-radius)}:where(table thead tr:first-child th:first-child){border-start-start-radius:var(--nice-inner-radius)}:where(table thead tr:first-child th:last-child){border-start-end-radius:var(--nice-inner-radius)}:where(tfoot tr:last-child th:first-of-type){border-end-start-radius:var(--nice-inner-radius)}:where(tfoot tr:last-child td:first-of-type){border-end-start-radius:var(--nice-inner-radius)}:where(tfoot tr:last-child th:last-of-type){border-end-end-radius:var(--nice-inner-radius)}:where(tfoot tr:last-child td:last-of-type){border-end-end-radius:var(--nice-inner-radius)}:where(th){background-color:var(--surface-2);color:var(--text-1)}:where(table a:not(.does-not-exist):focus-visible){outline-offset:-2px}:where(table button:not(.does-not-exist):focus-visible){outline-offset:-2px}:where(table [contenteditable]:focus-visible){outline-offset:-2px}:where(td){text-wrap:pretty;background:var(--surface-1);max-inline-size:var(--size-content-2)}:where(td,th){padding:var(--size-2);text-align:left}:where(td:not([align])){text-align:center}:where(th:not([align])){text-align:center}:where(thead){border-collapse:collapse}:where(table tr:hover td),:where(tbody tr:nth-child(2n):hover td){background-color:var(--surface-3)}:where(table>caption){margin:var(--size-3)}:where(tfoot button){padding-block:var(--size-1);padding-inline:var(--size-3)}
}

/* ---------- open-props.min.css ---------- */
@layer tokens {
:where(html){--font-system-ui:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;--font-transitional:Charter,Bitstream Charter,Sitka Text,Cambria,serif;--font-old-style:Iowan Old Style,Palatino Linotype,URW Palladio L,P052,serif;--font-humanist:Seravek,Gill Sans Nova,Ubuntu,Calibri,DejaVu Sans,source-sans-pro,sans-serif;--font-geometric-humanist:Avenir,Montserrat,Corbel,URW Gothic,source-sans-pro,sans-serif;--font-classical-humanist:Optima,Candara,Noto Sans,source-sans-pro,sans-serif;--font-neo-grotesque:Inter,Roboto,Helvetica Neue,Arial Nova,Nimbus Sans,Arial,sans-serif;--font-monospace-slab-serif:Nimbus Mono PS,Courier New,monospace;--font-monospace-code:Dank Mono,Operator Mono,Inconsolata,Fira Mono,ui-monospace,SF Mono,Monaco,Droid Sans Mono,Source Code Pro,Cascadia Code,Menlo,Consolas,DejaVu Sans Mono,monospace;--font-industrial:Bahnschrift,DIN Alternate,Franklin Gothic Medium,Nimbus Sans Narrow,sans-serif-condensed,sans-serif;--font-rounded-sans:ui-rounded,Hiragino Maru Gothic ProN,Quicksand,Comfortaa,Manjari,Arial Rounded MT,Arial Rounded MT Bold,Calibri,source-sans-pro,sans-serif;--font-slab-serif:Rockwell,Rockwell Nova,Roboto Slab,DejaVu Serif,Sitka Small,serif;--font-antique:Superclarendon,Bookman Old Style,URW Bookman,URW Bookman L,Georgia Pro,Georgia,serif;--font-didone:Didot,Bodoni MT,Noto Serif Display,URW Palladio L,P052,Sylfaen,serif;--font-handwritten:Segoe Print,Bradley Hand,Chilanka,TSCu_Comic,casual,cursive;--font-sans:var(--font-system-ui);--font-serif:ui-serif,serif;--font-mono:var(--font-monospace-code);--font-weight-1:100;--font-weight-2:200;--font-weight-3:300;--font-weight-4:400;--font-weight-5:500;--font-weight-6:600;--font-weight-7:700;--font-weight-8:800;--font-weight-9:900;--font-lineheight-00:.95;--font-lineheight-0:1.1;--font-lineheight-1:1.25;--font-lineheight-2:1.375;--font-lineheight-3:1.5;--font-lineheight-4:1.75;--font-lineheight-5:2;--font-letterspacing-0:-.05em;--font-letterspacing-1:.025em;--font-letterspacing-2:.050em;--font-letterspacing-3:.075em;--font-letterspacing-4:.150em;--font-letterspacing-5:.500em;--font-letterspacing-6:.750em;--font-letterspacing-7:1em;--font-size-00:.5rem;--font-size-0:.75rem;--font-size-1:1rem;--font-size-2:1.1rem;--font-size-3:1.25rem;--font-size-4:1.5rem;--font-size-5:2rem;--font-size-6:2.5rem;--font-size-7:3rem;--font-size-8:3.5rem;--font-size-fluid-0:max(.75rem,min(2vw,1rem));--font-size-fluid-1:max(1rem,min(4vw,1.5rem));--font-size-fluid-2:max(1.5rem,min(6vw,2.5rem));--font-size-fluid-3:max(2rem,min(9vw,3.5rem));--size-000:-.5rem;--size-00:-.25rem;--size-1:.25rem;--size-2:.5rem;--size-3:1rem;--size-4:1.25rem;--size-5:1.5rem;--size-6:1.75rem;--size-7:2rem;--size-8:3rem;--size-9:4rem;--size-10:5rem;--size-11:7.5rem;--size-12:10rem;--size-13:15rem;--size-14:20rem;--size-15:30rem;--size-px-000:-8px;--size-px-00:-4px;--size-px-1:4px;--size-px-2:8px;--size-px-3:16px;--size-px-4:20px;--size-px-5:24px;--size-px-6:28px;--size-px-7:32px;--size-px-8:48px;--size-px-9:64px;--size-px-10:80px;--size-px-11:120px;--size-px-12:160px;--size-px-13:240px;--size-px-14:320px;--size-px-15:480px;--size-fluid-1:max(.5rem,min(1vw,1rem));--size-fluid-2:max(1rem,min(2vw,1.5rem));--size-fluid-3:max(1.5rem,min(3vw,2rem));--size-fluid-4:max(2rem,min(4vw,3rem));--size-fluid-5:max(4rem,min(5vw,5rem));--size-fluid-6:max(5rem,min(7vw,7.5rem));--size-fluid-7:max(7.5rem,min(10vw,10rem));--size-fluid-8:max(10rem,min(20vw,15rem));--size-fluid-9:max(15rem,min(30vw,20rem));--size-fluid-10:max(20rem,min(40vw,30rem));--size-content-1:20ch;--size-content-2:45ch;--size-content-3:60ch;--size-header-1:20ch;--size-header-2:25ch;--size-header-3:35ch;--size-xxs:240px;--size-xs:360px;--size-sm:480px;--size-md:768px;--size-lg:1024px;--size-xl:1440px;--size-xxl:1920px;--size-relative-000:-.5ch;--size-relative-00:-.25ch;--size-relative-1:.25ch;--size-relative-2:.5ch;--size-relative-3:1ch;--size-relative-4:1.25ch;--size-relative-5:1.5ch;--size-relative-6:1.75ch;--size-relative-7:2ch;--size-relative-8:3ch;--size-relative-9:4ch;--size-relative-10:5ch;--size-relative-11:7.5ch;--size-relative-12:10ch;--size-relative-13:15ch;--size-relative-14:20ch;--size-relative-15:30ch;--ease-1:cubic-bezier(.25,0,.5,1);--ease-2:cubic-bezier(.25,0,.4,1);--ease-3:cubic-bezier(.25,0,.3,1);--ease-4:cubic-bezier(.25,0,.2,1);--ease-5:cubic-bezier(.25,0,.1,1);--ease-in-1:cubic-bezier(.25,0,1,1);--ease-in-2:cubic-bezier(.50,0,1,1);--ease-in-3:cubic-bezier(.70,0,1,1);--ease-in-4:cubic-bezier(.90,0,1,1);--ease-in-5:cubic-bezier(1,0,1,1);--ease-out-1:cubic-bezier(0,0,.75,1);--ease-out-2:cubic-bezier(0,0,.50,1);--ease-out-3:cubic-bezier(0,0,.3,1);--ease-out-4:cubic-bezier(0,0,.1,1);--ease-out-5:cubic-bezier(0,0,0,1);--ease-in-out-1:cubic-bezier(.1,0,.9,1);--ease-in-out-2:cubic-bezier(.3,0,.7,1);--ease-in-out-3:cubic-bezier(.5,0,.5,1);--ease-in-out-4:cubic-bezier(.7,0,.3,1);--ease-in-out-5:cubic-bezier(.9,0,.1,1);--ease-elastic-out-1:cubic-bezier(.5,.75,.75,1.25);--ease-elastic-out-2:cubic-bezier(.5,1,.75,1.25);--ease-elastic-out-3:cubic-bezier(.5,1.25,.75,1.25);--ease-elastic-out-4:cubic-bezier(.5,1.5,.75,1.25);--ease-elastic-out-5:cubic-bezier(.5,1.75,.75,1.25);--ease-elastic-in-1:cubic-bezier(.5,-0.25,.75,1);--ease-elastic-in-2:cubic-bezier(.5,-0.50,.75,1);--ease-elastic-in-3:cubic-bezier(.5,-0.75,.75,1);--ease-elastic-in-4:cubic-bezier(.5,-1.00,.75,1);--ease-elastic-in-5:cubic-bezier(.5,-1.25,.75,1);--ease-elastic-in-out-1:cubic-bezier(.5,-.1,.1,1.5);--ease-elastic-in-out-2:cubic-bezier(.5,-.3,.1,1.5);--ease-elastic-in-out-3:cubic-bezier(.5,-.5,.1,1.5);--ease-elastic-in-out-4:cubic-bezier(.5,-.7,.1,1.5);--ease-elastic-in-out-5:cubic-bezier(.5,-.9,.1,1.5);--ease-step-1:steps(2);--ease-step-2:steps(3);--ease-step-3:steps(4);--ease-step-4:steps(7);--ease-step-5:steps(10);--ease-elastic-1:var(--ease-elastic-out-1);--ease-elastic-2:var(--ease-elastic-out-2);--ease-elastic-3:var(--ease-elastic-out-3);--ease-elastic-4:var(--ease-elastic-out-4);--ease-elastic-5:var(--ease-elastic-out-5);--ease-squish-1:var(--ease-elastic-in-out-1);--ease-squish-2:var(--ease-elastic-in-out-2);--ease-squish-3:var(--ease-elastic-in-out-3);--ease-squish-4:var(--ease-elastic-in-out-4);--ease-squish-5:var(--ease-elastic-in-out-5);--ease-spring-1:linear(0,0.006,0.025 2.8%,0.101 6.1%,0.539 18.9%,0.721 25.3%,0.849 31.5%,0.937 38.1%,0.968 41.8%,0.991 45.7%,1.006 50.1%,1.015 55%,1.017 63.9%,1.001);--ease-spring-2:linear(0,0.007,0.029 2.2%,0.118 4.7%,0.625 14.4%,0.826 19%,0.902,0.962,1.008 26.1%,1.041 28.7%,1.064 32.1%,1.07 36%,1.061 40.5%,1.015 53.4%,0.999 61.6%,0.995 71.2%,1);--ease-spring-3:linear(0,0.009,0.035 2.1%,0.141 4.4%,0.723 12.9%,0.938 16.7%,1.017,1.077,1.121,1.149 24.3%,1.159,1.163,1.161,1.154 29.9%,1.129 32.8%,1.051 39.6%,1.017 43.1%,0.991,0.977 51%,0.974 53.8%,0.975 57.1%,0.997 69.8%,1.003 76.9%,1);--ease-spring-4:linear(0,0.009,0.037 1.7%,0.153 3.6%,0.776 10.3%,1.001,1.142 16%,1.185,1.209 19%,1.215 19.9% 20.8%,1.199,1.165 25%,1.056 30.3%,1.008 33%,0.973,0.955 39.2%,0.953 41.1%,0.957 43.3%,0.998 53.3%,1.009 59.1% 63.7%,0.998 78.9%,1);--ease-spring-5:linear(0,0.01,0.04 1.6%,0.161 3.3%,0.816 9.4%,1.046,1.189 14.4%,1.231,1.254 17%,1.259,1.257 18.6%,1.236,1.194 22.3%,1.057 27%,0.999 29.4%,0.955 32.1%,0.942,0.935 34.9%,0.933,0.939 38.4%,1 47.3%,1.011,1.017 52.6%,1.016 56.4%,1 65.2%,0.996 70.2%,1.001 87.2%,1);--ease-bounce-1:linear(0,0.004,0.016,0.035,0.063,0.098,0.141,0.191,0.25,0.316,0.391 36.8%,0.563,0.766,1 58.8%,0.946,0.908 69.1%,0.895,0.885,0.879,0.878,0.879,0.885,0.895,0.908 89.7%,0.946,1);--ease-bounce-2:linear(0,0.004,0.016,0.035,0.063,0.098,0.141 15.1%,0.25,0.391,0.562,0.765,1,0.892 45.2%,0.849,0.815,0.788,0.769,0.757,0.753,0.757,0.769,0.788,0.815,0.85,0.892 75.2%,1 80.2%,0.973,0.954,0.943,0.939,0.943,0.954,0.973,1);--ease-bounce-3:linear(0,0.004,0.016,0.035,0.062,0.098,0.141 11.4%,0.25,0.39,0.562,0.764,1 30.3%,0.847 34.8%,0.787,0.737,0.699,0.672,0.655,0.65,0.656,0.672,0.699,0.738,0.787,0.847 61.7%,1 66.2%,0.946,0.908,0.885 74.2%,0.879,0.878,0.879,0.885 79.5%,0.908,0.946,1 87.4%,0.981,0.968,0.96,0.957,0.96,0.968,0.981,1);--ease-bounce-4:linear(0,0.004,0.016 3%,0.062,0.141,0.25,0.391,0.562 18.2%,1 24.3%,0.81,0.676 32.3%,0.629,0.595,0.575,0.568,0.575,0.595,0.629,0.676 48.2%,0.811,1 56.2%,0.918,0.86,0.825,0.814,0.825,0.86,0.918,1 77.2%,0.94 80.6%,0.925,0.92,0.925,0.94 87.5%,1 90.9%,0.974,0.965,0.974,1);--ease-bounce-5:linear(0,0.004,0.016 2.5%,0.063,0.141,0.25 10.1%,0.562,1 20.2%,0.783,0.627,0.534 30.9%,0.511,0.503,0.511,0.534 38%,0.627,0.782,1 48.7%,0.892,0.815,0.769 56.3%,0.757,0.753,0.757,0.769 61.3%,0.815,0.892,1 68.8%,0.908 72.4%,0.885,0.878,0.885,0.908 79.4%,1 83%,0.954 85.5%,0.943,0.939,0.943,0.954 90.5%,1 93%,0.977,0.97,0.977,1);--ease-circ-in:cubic-bezier(.6,.04,.98,.335);--ease-circ-in-out:cubic-bezier(.785,.135,.15,.86);--ease-circ-out:cubic-bezier(.075,.82,.165,1);--ease-cubic-in:cubic-bezier(.55,.055,.675,.19);--ease-cubic-in-out:cubic-bezier(.645,.045,.355,1);--ease-cubic-out:cubic-bezier(.215,.61,.355,1);--ease-expo-in:cubic-bezier(.95,.05,.795,.035);--ease-expo-in-out:cubic-bezier(1,0,0,1);--ease-expo-out:cubic-bezier(.19,1,.22,1);--ease-quad-in:cubic-bezier(.55,.085,.68,.53);--ease-quad-in-out:cubic-bezier(.455,.03,.515,.955);--ease-quad-out:cubic-bezier(.25,.46,.45,.94);--ease-quart-in:cubic-bezier(.895,.03,.685,.22);--ease-quart-in-out:cubic-bezier(.77,0,.175,1);--ease-quart-out:cubic-bezier(.165,.84,.44,1);--ease-quint-in:cubic-bezier(.755,.05,.855,.06);--ease-quint-in-out:cubic-bezier(.86,0,.07,1);--ease-quint-out:cubic-bezier(.23,1,.32,1);--ease-sine-in:cubic-bezier(.47,0,.745,.715);--ease-sine-in-out:cubic-bezier(.445,.05,.55,.95);--ease-sine-out:cubic-bezier(.39,.575,.565,1);--layer-1:1;--layer-2:2;--layer-3:3;--layer-4:4;--layer-5:5;--layer-important:2147483647;--shadow-color:220 3% 15%;--shadow-strength:1%;--shadow-strength-3:calc(var(--shadow-strength) + 2%);--shadow-strength-4:calc(var(--shadow-strength) + 3%);--shadow-strength-5:calc(var(--shadow-strength) + 4%);--shadow-strength-6:calc(var(--shadow-strength) + 5%);--shadow-strength-7:calc(var(--shadow-strength) + 6%);--shadow-strength-8:calc(var(--shadow-strength) + 7%);--shadow-strength-10:calc(var(--shadow-strength) + 9%);--inner-shadow-highlight:inset 0 -.5px 0 0 #fff,inset 0 .5px 0 0 rgba(0,0,0,.067);--shadow-1:0 1px 2px -1px hsl(var(--shadow-color)/var(--shadow-strength-10));--shadow-2:0 3px 5px -2px hsl(var(--shadow-color)/var(--shadow-strength-4)),0 7px 14px -5px hsl(var(--shadow-color)/var(--shadow-strength-6));--shadow-3:0 -1px 3px 0 hsl(var(--shadow-color)/var(--shadow-strength-3)),0 1px 2px -5px hsl(var(--shadow-color)/var(--shadow-strength-3)),0 2px 5px -5px hsl(var(--shadow-color)/var(--shadow-strength-5)),0 4px 12px -5px hsl(var(--shadow-color)/var(--shadow-strength-6)),0 12px 15px -5px hsl(var(--shadow-color)/var(--shadow-strength-8));--shadow-4:0 -2px 5px 0 hsl(var(--shadow-color)/var(--shadow-strength-3)),0 1px 1px -2px hsl(var(--shadow-color)/var(--shadow-strength-4)),0 2px 2px -2px hsl(var(--shadow-color)/var(--shadow-strength-4)),0 5px 5px -2px hsl(var(--shadow-color)/var(--shadow-strength-5)),0 9px 9px -2px hsl(var(--shadow-color)/var(--shadow-strength-6)),0 16px 16px -2px hsl(var(--shadow-color)/var(--shadow-strength-7));--shadow-5:0 -1px 2px 0 hsl(var(--shadow-color)/var(--shadow-strength-3)),0 2px 1px -2px hsl(var(--shadow-color)/var(--shadow-strength-4)),0 5px 5px -2px hsl(var(--shadow-color)/var(--shadow-strength-4)),0 10px 10px -2px hsl(var(--shadow-color)/var(--shadow-strength-5)),0 20px 20px -2px hsl(var(--shadow-color)/var(--shadow-strength-6)),0 40px 40px -2px hsl(var(--shadow-color)/var(--shadow-strength-8));--shadow-6:0 -1px 2px 0 hsl(var(--shadow-color)/var(--shadow-strength-3)),0 3px 2px -2px hsl(var(--shadow-color)/var(--shadow-strength-4)),0 7px 5px -2px hsl(var(--shadow-color)/var(--shadow-strength-4)),0 12px 10px -2px hsl(var(--shadow-color)/var(--shadow-strength-5)),0 22px 18px -2px hsl(var(--shadow-color)/var(--shadow-strength-6)),0 41px 33px -2px hsl(var(--shadow-color)/var(--shadow-strength-7)),0 100px 80px -2px hsl(var(--shadow-color)/var(--shadow-strength-8));--inner-shadow-0:inset 0 0 0 1px hsl(var(--shadow-color)/var(--shadow-strength-10));--inner-shadow-1:inset 0 1px 2px 0 hsl(var(--shadow-color)/var(--shadow-strength-10)),var(--inner-shadow-highlight);--inner-shadow-2:inset 0 1px 4px 0 hsl(var(--shadow-color)/var(--shadow-strength-10)),var(--inner-shadow-highlight);--inner-shadow-3:inset 0 2px 8px 0 hsl(var(--shadow-color)/var(--shadow-strength-10)),var(--inner-shadow-highlight);--inner-shadow-4:inset 0 2px 14px 0 hsl(var(--shadow-color)/var(--shadow-strength-10)),var(--inner-shadow-highlight);--ratio-square:1;--ratio-landscape:4/3;--ratio-portrait:3/4;--ratio-widescreen:16/9;--ratio-ultrawide:18/5;--ratio-golden:1.6180/1;--gray-0:#f8f9fa;--gray-1:#f1f3f5;--gray-2:#e9ecef;--gray-3:#dee2e6;--gray-4:#ced4da;--gray-5:#adb5bd;--gray-6:#868e96;--gray-7:#495057;--gray-8:#343a40;--gray-9:#212529;--gray-10:#16191d;--gray-11:#0d0f12;--gray-12:#030507;--stone-0:#f8fafb;--stone-1:#f2f4f6;--stone-2:#ebedef;--stone-3:#e0e4e5;--stone-4:#d1d6d8;--stone-5:#b1b6b9;--stone-6:#979b9d;--stone-7:#7e8282;--stone-8:#666968;--stone-9:#50514f;--stone-10:#3a3a37;--stone-11:#252521;--stone-12:#121210;--red-0:#fff5f5;--red-1:#ffe3e3;--red-2:#ffc9c9;--red-3:#ffa8a8;--red-4:#ff8787;--red-5:#ff6b6b;--red-6:#fa5252;--red-7:#f03e3e;--red-8:#e03131;--red-9:#c92a2a;--red-10:#b02525;--red-11:#962020;--red-12:#7d1a1a;--pink-0:#fff0f6;--pink-1:#ffdeeb;--pink-2:#fcc2d7;--pink-3:#faa2c1;--pink-4:#f783ac;--pink-5:#f06595;--pink-6:#e64980;--pink-7:#d6336c;--pink-8:#c2255c;--pink-9:#a61e4d;--pink-10:#8c1941;--pink-11:#731536;--pink-12:#59102a;--purple-0:#f8f0fc;--purple-1:#f3d9fa;--purple-2:#eebefa;--purple-3:#e599f7;--purple-4:#da77f2;--purple-5:#cc5de8;--purple-6:#be4bdb;--purple-7:#ae3ec9;--purple-8:#9c36b5;--purple-9:#862e9c;--purple-10:#702682;--purple-11:#5a1e69;--purple-12:#44174f;--violet-0:#f3f0ff;--violet-1:#e5dbff;--violet-2:#d0bfff;--violet-3:#b197fc;--violet-4:#9775fa;--violet-5:#845ef7;--violet-6:#7950f2;--violet-7:#7048e8;--violet-8:#6741d9;--violet-9:#5f3dc4;--violet-10:#5235ab;--violet-11:#462d91;--violet-12:#3a2578;--indigo-0:#edf2ff;--indigo-1:#dbe4ff;--indigo-2:#bac8ff;--indigo-3:#91a7ff;--indigo-4:#748ffc;--indigo-5:#5c7cfa;--indigo-6:#4c6ef5;--indigo-7:#4263eb;--indigo-8:#3b5bdb;--indigo-9:#364fc7;--indigo-10:#2f44ad;--indigo-11:#283a94;--indigo-12:#21307a;--blue-0:#e7f5ff;--blue-1:#d0ebff;--blue-2:#a5d8ff;--blue-3:#74c0fc;--blue-4:#4dabf7;--blue-5:#339af0;--blue-6:#228be6;--blue-7:#1c7ed6;--blue-8:#1971c2;--blue-9:#1864ab;--blue-10:#145591;--blue-11:#114678;--blue-12:#0d375e;--cyan-0:#e3fafc;--cyan-1:#c5f6fa;--cyan-2:#99e9f2;--cyan-3:#66d9e8;--cyan-4:#3bc9db;--cyan-5:#22b8cf;--cyan-6:#15aabf;--cyan-7:#1098ad;--cyan-8:#0c8599;--cyan-9:#0b7285;--cyan-10:#095c6b;--cyan-11:#074652;--cyan-12:#053038;--teal-0:#e6fcf5;--teal-1:#c3fae8;--teal-2:#96f2d7;--teal-3:#63e6be;--teal-4:#38d9a9;--teal-5:#20c997;--teal-6:#12b886;--teal-7:#0ca678;--teal-8:#099268;--teal-9:#087f5b;--teal-10:#066649;--teal-11:#054d37;--teal-12:#033325;--green-0:#ebfbee;--green-1:#d3f9d8;--green-2:#b2f2bb;--green-3:#8ce99a;--green-4:#69db7c;--green-5:#51cf66;--green-6:#40c057;--green-7:#37b24d;--green-8:#2f9e44;--green-9:#2b8a3e;--green-10:#237032;--green-11:#1b5727;--green-12:#133d1b;--lime-0:#f4fce3;--lime-1:#e9fac8;--lime-2:#d8f5a2;--lime-3:#c0eb75;--lime-4:#a9e34b;--lime-5:#94d82d;--lime-6:#82c91e;--lime-7:#74b816;--lime-8:#66a80f;--lime-9:#5c940d;--lime-10:#4c7a0b;--lime-11:#3c6109;--lime-12:#2c4706;--yellow-0:#fff9db;--yellow-1:#fff3bf;--yellow-2:#ffec99;--yellow-3:#ffe066;--yellow-4:#ffd43b;--yellow-5:#fcc419;--yellow-6:#fab005;--yellow-7:#f59f00;--yellow-8:#f08c00;--yellow-9:#e67700;--yellow-10:#b35c00;--yellow-11:#804200;--yellow-12:#663500;--orange-0:#fff4e6;--orange-1:#ffe8cc;--orange-2:#ffd8a8;--orange-3:#ffc078;--orange-4:#ffa94d;--orange-5:#ff922b;--orange-6:#fd7e14;--orange-7:#f76707;--orange-8:#e8590c;--orange-9:#d9480f;--orange-10:#bf400d;--orange-11:#99330b;--orange-12:#802b09;--choco-0:#fff8dc;--choco-1:#fce1bc;--choco-2:#f7ca9e;--choco-3:#f1b280;--choco-4:#e99b62;--choco-5:#df8545;--choco-6:#d46e25;--choco-7:#bd5f1b;--choco-8:#a45117;--choco-9:#8a4513;--choco-10:#703a13;--choco-11:#572f12;--choco-12:#3d210d;--brown-0:#faf4eb;--brown-1:#ede0d1;--brown-2:#e0cab7;--brown-3:#d3b79e;--brown-4:#c5a285;--brown-5:#b78f6d;--brown-6:#a87c56;--brown-7:#956b47;--brown-8:#825b3a;--brown-9:#6f4b2d;--brown-10:#5e3a21;--brown-11:#4e2b15;--brown-12:#422412;--sand-0:#f8fafb;--sand-1:#e6e4dc;--sand-2:#d5cfbd;--sand-3:#c2b9a0;--sand-4:#aea58c;--sand-5:#9a9178;--sand-6:#867c65;--sand-7:#736a53;--sand-8:#5f5746;--sand-9:#4b4639;--sand-10:#38352d;--sand-11:#252521;--sand-12:#121210;--camo-0:#f9fbe7;--camo-1:#e8ed9c;--camo-2:#d2df4e;--camo-3:#c2ce34;--camo-4:#b5bb2e;--camo-5:#a7a827;--camo-6:#999621;--camo-7:#8c851c;--camo-8:#7e7416;--camo-9:#6d6414;--camo-10:#5d5411;--camo-11:#4d460e;--camo-12:#36300a;--jungle-0:#ecfeb0;--jungle-1:#def39a;--jungle-2:#d0e884;--jungle-3:#c2dd6e;--jungle-4:#b5d15b;--jungle-5:#a8c648;--jungle-6:#9bbb36;--jungle-7:#8fb024;--jungle-8:#84a513;--jungle-9:#7a9908;--jungle-10:#658006;--jungle-11:#516605;--jungle-12:#3d4d04;--gradient-space: ;--gradient-1:linear-gradient(to bottom right var(--gradient-space),#1f005c,#5b0060,#870160,#ac255e,#ca485c,#e16b5c,#f39060,#ffb56b);--gradient-2:linear-gradient(to bottom right var(--gradient-space),#48005c,#8300e2,#a269ff);--gradient-3:radial-gradient(circle at top right var(--gradient-space),#0ff,rgba(0,255,255,0)),radial-gradient(circle at bottom left var(--gradient-space),#ff1492,rgba(255,20,146,0));--gradient-4:linear-gradient(to bottom right var(--gradient-space),#00f5a0,#00d9f5);--gradient-5:conic-gradient(from -270deg at 75% 110% var(--gradient-space),#f0f,#fffaf0);--gradient-6:conic-gradient(from -90deg at top left var(--gradient-space),#000,#fff);--gradient-7:linear-gradient(to bottom right var(--gradient-space),#72c6ef,#004e8f);--gradient-8:conic-gradient(from 90deg at 50% 0% var(--gradient-space),#111,50%,#222,#111);--gradient-9:conic-gradient(from .5turn at bottom center var(--gradient-space),#add8e6,#fff);--gradient-10:conic-gradient(from 90deg at 40% -25% var(--gradient-space),gold,#f79d03,#ee6907,#e6390a,#de0d0d,#d61039,#cf1261,#c71585,#cf1261,#d61039,#de0d0d,#ee6907,#f79d03,gold,gold,gold);--gradient-11:conic-gradient(at bottom left var(--gradient-space),#ff1493,cyan);--gradient-12:conic-gradient(from 90deg at 25% -10% var(--gradient-space),#ff4500,#d3f340,#7bee85,#afeeee,#7bee85);--gradient-13:radial-gradient(circle at 50% 200% var(--gradient-space),#000142,#3b0083,#b300c3,#ff059f,#ff4661,#ffad86,#fff3c7);--gradient-14:conic-gradient(at top right var(--gradient-space),lime,cyan);--gradient-15:linear-gradient(to bottom right var(--gradient-space),#c7d2fe,#fecaca,#fef3c7);--gradient-16:radial-gradient(circle at 50% -250% var(--gradient-space),#374151,#111827,#000);--gradient-17:conic-gradient(from -90deg at 50% -25% var(--gradient-space),blue,#8a2be2);--gradient-18:linear-gradient(0deg var(--gradient-space),rgba(255,0,0,.8),rgba(255,0,0,0) 75%),linear-gradient(60deg var(--gradient-space),rgba(255,255,0,.8),rgba(255,255,0,0) 75%),linear-gradient(120deg var(--gradient-space),rgba(0,255,0,.8),rgba(0,255,0,0) 75%),linear-gradient(180deg var(--gradient-space),rgba(0,255,255,.8),rgba(0,255,255,0) 75%),linear-gradient(240deg var(--gradient-space),rgba(0,0,255,.8),rgba(0,0,255,0) 75%),linear-gradient(300deg var(--gradient-space),rgba(255,0,255,.8),rgba(255,0,255,0) 75%);--gradient-19:linear-gradient(to bottom right var(--gradient-space),#ffe259,#ffa751);--gradient-20:conic-gradient(from -135deg at -10% center var(--gradient-space),orange,#ff7715,#ff522a,#ff3f47,#ff5482,#ff69b4);--gradient-21:conic-gradient(from -90deg at 25% 115% var(--gradient-space),red,#f06,#f0c,#c0f,#60f,#00f,#00f,#00f,#00f);--gradient-22:linear-gradient(to bottom right var(--gradient-space),#acb6e5,#86fde8);--gradient-23:linear-gradient(to bottom right var(--gradient-space),#536976,#292e49);--gradient-24:conic-gradient(from .5turn at 0% 0% var(--gradient-space),#00c476,10%,#82b0ff,90%,#00c476);--gradient-25:conic-gradient(at 125% 50% var(--gradient-space),#b78cf7,#ff7c94,#ffcf0d,#ff7c94,#b78cf7);--gradient-26:linear-gradient(to bottom right var(--gradient-space),#9796f0,#fbc7d4);--gradient-27:conic-gradient(from .5turn at bottom left var(--gradient-space),#ff1493,#639);--gradient-28:conic-gradient(from -90deg at 50% 105% var(--gradient-space),#fff,orchid);--gradient-29:radial-gradient(circle at top right var(--gradient-space),#bfb3ff,rgba(191,179,255,0)),radial-gradient(circle at bottom left var(--gradient-space),#86acf9,rgba(134,172,249,0));--gradient-30:radial-gradient(circle at top right var(--gradient-space),#00ff80,rgba(0,255,128,0)),radial-gradient(circle at bottom left var(--gradient-space),#adffd6,rgba(173,255,214,0));--noise-1:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.005' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");--noise-2:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.05' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");--noise-3:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.25' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");--noise-4:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 2056 2056' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");--noise-5:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 2056 2056' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");--noise-filter-1:contrast(300%) brightness(100%);--noise-filter-2:contrast(200%) brightness(150%);--noise-filter-3:contrast(200%) brightness(250%);--noise-filter-4:contrast(200%) brightness(500%);--noise-filter-5:contrast(200%) brightness(1000%);--animation-fade-in:fade-in .5s var(--ease-3);--animation-fade-in-bloom:fade-in-bloom 2s var(--ease-3);--animation-fade-out:fade-out .5s var(--ease-3);--animation-fade-out-bloom:fade-out-bloom 2s var(--ease-3);--animation-scale-up:scale-up .5s var(--ease-3);--animation-scale-down:scale-down .5s var(--ease-3);--animation-slide-out-up:slide-out-up .5s var(--ease-3);--animation-slide-out-down:slide-out-down .5s var(--ease-3);--animation-slide-out-right:slide-out-right .5s var(--ease-3);--animation-slide-out-left:slide-out-left .5s var(--ease-3);--animation-slide-in-up:slide-in-up .5s var(--ease-3);--animation-slide-in-down:slide-in-down .5s var(--ease-3);--animation-slide-in-right:slide-in-right .5s var(--ease-3);--animation-slide-in-left:slide-in-left .5s var(--ease-3);--animation-shake-x:shake-x .75s var(--ease-out-5);--animation-shake-y:shake-y .75s var(--ease-out-5);--animation-shake-z:shake-z 1s var(--ease-in-out-3);--animation-spin:spin 2s linear infinite;--animation-ping:ping 5s var(--ease-out-3) infinite;--animation-blink:blink 1s var(--ease-out-3) infinite;--animation-float:float 3s var(--ease-in-out-3) infinite;--animation-bounce:bounce 2s var(--ease-squish-2) infinite;--animation-pulse:pulse 2s var(--ease-out-3) infinite;--border-size-1:1px;--border-size-2:2px;--border-size-3:5px;--border-size-4:10px;--border-size-5:25px;--radius-1:2px;--radius-2:5px;--radius-3:1rem;--radius-4:2rem;--radius-5:4rem;--radius-6:8rem;--radius-drawn-1:255px 15px 225px 15px/15px 225px 15px 255px;--radius-drawn-2:125px 10px 20px 185px/25px 205px 205px 25px;--radius-drawn-3:15px 255px 15px 225px/225px 15px 255px 15px;--radius-drawn-4:15px 25px 155px 25px/225px 150px 25px 115px;--radius-drawn-5:250px 25px 15px 20px/15px 80px 105px 115px;--radius-drawn-6:28px 100px 20px 15px/150px 30px 205px 225px;--radius-round:1e5px;--radius-blob-1:30% 70% 70% 30%/53% 30% 70% 47%;--radius-blob-2:53% 47% 34% 66%/63% 46% 54% 37%;--radius-blob-3:37% 63% 56% 44%/49% 56% 44% 51%;--radius-blob-4:63% 37% 37% 63%/43% 37% 63% 57%;--radius-blob-5:49% 51% 48% 52%/57% 44% 56% 43%;--radius-conditional-1:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-1));--radius-conditional-2:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-2));--radius-conditional-3:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-3));--radius-conditional-4:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-4));--radius-conditional-5:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-5));--radius-conditional-6:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-6));--palette-hue:250;--palette-hue-rotate-by:0;--palette-chroma:0.15;--color-1:oklch(98% calc(var(--palette-chroma)*0.03) calc(var(--palette-hue) + var(--palette-hue-rotate-by)*0));--color-2:oklch(97% calc(var(--palette-chroma)*0.06) calc(var(--palette-hue) + var(--palette-hue-rotate-by)*1));--color-3:oklch(93% calc(var(--palette-chroma)*0.1) calc(var(--palette-hue) + var(--palette-hue-rotate-by)*2));--color-4:oklch(84% calc(var(--palette-chroma)*0.12) calc(var(--palette-hue) + var(--palette-hue-rotate-by)*3));--color-5:oklch(80% calc(var(--palette-chroma)*0.16) calc(var(--palette-hue) + var(--palette-hue-rotate-by)*4));--color-6:oklch(71% calc(var(--palette-chroma)*0.19) calc(var(--palette-hue) + var(--palette-hue-rotate-by)*5));--color-7:oklch(66% calc(var(--palette-chroma)*0.2) calc(var(--palette-hue) + var(--palette-hue-rotate-by)*6));--color-8:oklch(58% calc(var(--palette-chroma)*0.21) calc(var(--palette-hue) + var(--palette-hue-rotate-by)*7));--color-9:oklch(53% calc(var(--palette-chroma)*0.2) calc(var(--palette-hue) + var(--palette-hue-rotate-by)*8));--color-10:oklch(49% calc(var(--palette-chroma)*0.19) calc(var(--palette-hue) + var(--palette-hue-rotate-by)*9));--color-11:oklch(42% calc(var(--palette-chroma)*0.17) calc(var(--palette-hue) + var(--palette-hue-rotate-by)*10));--color-12:oklch(35% calc(var(--palette-chroma)*0.15) calc(var(--palette-hue) + var(--palette-hue-rotate-by)*11));--color-13:oklch(27% calc(var(--palette-chroma)*0.12) calc(var(--palette-hue) + var(--palette-hue-rotate-by)*12));--color-14:oklch(20% calc(var(--palette-chroma)*0.09) calc(var(--palette-hue) + var(--palette-hue-rotate-by)*13));--color-15:oklch(16% calc(var(--palette-chroma)*0.07) calc(var(--palette-hue) + var(--palette-hue-rotate-by)*14));--color-16:oklch(10% calc(var(--palette-chroma)*0.05) calc(var(--palette-hue) + var(--palette-hue-rotate-by)*15))}@media (prefers-color-scheme:dark){:where(html){--shadow-color:220 40% 2%;--shadow-strength:25%;--inner-shadow-highlight:inset 0 -.5px 0 0 hsla(0,0%,100%,.067),inset 0 .5px 0 0 rgba(0,0,0,.467)}}@supports (background:linear-gradient(to right in oklab,#000,#fff)){:where(html){--gradient-space:in oklab}}@keyframes fade-in{to{opacity:1}}@keyframes fade-in-bloom{0%{filter:brightness(1) blur(20px);opacity:0}10%{filter:brightness(2) blur(10px);opacity:1}to{filter:brightness(1) blur(0);opacity:1}}@keyframes fade-out{to{opacity:0}}@keyframes fade-out-bloom{to{filter:brightness(1) blur(20px);opacity:0}10%{filter:brightness(2) blur(10px);opacity:1}0%{filter:brightness(1) blur(0);opacity:1}}@keyframes scale-up{to{transform:scale(1.25)}}@keyframes scale-down{to{transform:scale(.75)}}@keyframes slide-out-up{to{transform:translateY(-100%)}}@keyframes slide-out-down{to{transform:translateY(100%)}}@keyframes slide-out-right{to{transform:translateX(100%)}}@keyframes slide-out-left{to{transform:translateX(-100%)}}@keyframes slide-in-up{0%{transform:translateY(100%)}}@keyframes slide-in-down{0%{transform:translateY(-100%)}}@keyframes slide-in-right{0%{transform:translateX(-100%)}}@keyframes slide-in-left{0%{transform:translateX(100%)}}@keyframes shake-x{0%,to{transform:translateX(0)}20%{transform:translateX(-5%)}40%{transform:translateX(5%)}60%{transform:translateX(-5%)}80%{transform:translateX(5%)}}@keyframes shake-y{0%,to{transform:translateY(0)}20%{transform:translateY(-5%)}40%{transform:translateY(5%)}60%{transform:translateY(-5%)}80%{transform:translateY(5%)}}@keyframes shake-z{0%,to{transform:rotate(0deg)}20%{transform:rotate(-2deg)}40%{transform:rotate(2deg)}60%{transform:rotate(-2deg)}80%{transform:rotate(2deg)}}@keyframes spin{to{transform:rotate(1turn)}}@keyframes ping{90%,to{opacity:0;transform:scale(2)}}@keyframes blink{0%,to{opacity:1}50%{opacity:.5}}@keyframes float{50%{transform:translateY(-25%)}}@keyframes bounce{25%{transform:translateY(-20%)}40%{transform:translateY(-3%)}0%,60%,to{transform:translateY(0)}}@keyframes pulse{50%{transform:scale(.9)}}@media (prefers-color-scheme:dark){@keyframes fade-in-bloom{0%{filter:brightness(1) blur(20px);opacity:0}10%{filter:brightness(.5) blur(10px);opacity:1}to{filter:brightness(1) blur(0);opacity:1}}}@media (prefers-color-scheme:dark){@keyframes fade-out-bloom{to{filter:brightness(1) blur(20px);opacity:0}10%{filter:brightness(.5) blur(10px);opacity:1}0%{filter:brightness(1) blur(0);opacity:1}}}
}

/* ---------- components/base.css ---------- */
@layer tokens {
/* ============================================
   Base — Variables, Resets, Global Styles
   ============================================ */

:root {

  /* Brand colors — derived light variants */
  --primary-light:    color-mix(in srgb, var(--primary) 30%, white);
  --secondary-light:  color-mix(in srgb, var(--secondary) 20%, white);
  --accent-light:     color-mix(in srgb, var(--accent) 40%, white);

  /* Surfaces (dark) */
  --bg:          #111827;
  --bg-raised:   #1F2937;
  --bg-overlay:  #111827;
  --border:      #374151;

  /* Text (dark) */
  --text:        #F1F3F5;
  --text-muted:  #9CA3AF;
  --text-link:   var(--primary-light);
  --text-inverse: white;

  /* Spacing shortcuts */
  --space-xs: var(--size-1);
  --space-sm: var(--size-2);
  --space-md: var(--size-3);
  --space-lg: var(--size-4);
  --space-xl: var(--size-5);

  /* Radius & shadows */
  --radius: var(--radius-2);
  --shadow: 0 2px 8px rgba(0,0,0,0.5);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.4);

  /* Alpha tokens for reuse */
  --primary-alpha-10: color-mix(in srgb, var(--primary) 10%, transparent);
  --primary-alpha-15: color-mix(in srgb, var(--primary) 15%, transparent);
  --primary-alpha-20: color-mix(in srgb, var(--primary) 20%, transparent);
  --primary-alpha-25: color-mix(in srgb, var(--primary) 25%, transparent);
  --primary-alpha-30: color-mix(in srgb, var(--primary) 30%, transparent);
  --accent-alpha-20:  color-mix(in srgb, var(--accent) 20%, transparent);

  /* Dark surface alpha */
  --primary-dark-alpha-85: color-mix(in srgb, var(--primary-dark) 85%, transparent);
  --primary-dark-alpha-95: color-mix(in srgb, var(--primary-dark) 95%, transparent);

  /* Inverse text alpha (for dark backgrounds / navbar) */
  --text-inverse-alpha-10: color-mix(in srgb, var(--text-inverse) 10%, transparent);
  --text-inverse-alpha-30: color-mix(in srgb, var(--text-inverse) 30%, transparent);
  --text-inverse-alpha-40: color-mix(in srgb, var(--text-inverse) 40%, transparent);
  --text-inverse-alpha-60: color-mix(in srgb, var(--text-inverse) 60%, transparent);

  /* Text alpha (adapts to current theme text color) */
  --text-alpha-10: color-mix(in srgb, var(--text) 10%, transparent);
  --text-alpha-30: color-mix(in srgb, var(--text) 30%, transparent);
  --text-alpha-60: color-mix(in srgb, var(--text) 60%, transparent);

  /* Fixed light-text alpha (for dark surfaces like hero that never flip) */
  --text-light-alpha-60: color-mix(in srgb, #F1F3F5 60%, transparent);

  /* Hero overlay */
  --hero-overlay-start: rgba(0,0,0,0.7);
  --hero-overlay-mid:  rgba(0,0,0,0.5);
  --hero-overlay-end:  rgba(0,0,0,0.3);

  /* Shared gradients */
  --gradient-accent-primary: linear-gradient(135deg, var(--accent-dark), var(--primary));

  /* Transition presets */
  --transition-fast:    0.15s var(--ease-3);
  --transition-base:   0.2s var(--ease-3);
  --transition-medium: 0.25s var(--ease-3);
  --transition-slow:   0.3s var(--ease-3);

  --transition-card:   transform var(--transition-slow), box-shadow var(--transition-slow);
  --transition-card-full: transform var(--transition-slow), box-shadow var(--transition-slow), border-color var(--transition-slow);
  --transition-hover: transform var(--transition-base), box-shadow var(--transition-base);
  --transition-btn:    transform var(--transition-base), filter var(--transition-base), box-shadow var(--transition-base);
  --transition-nav:    background var(--transition-slow), backdrop-filter var(--transition-slow), box-shadow var(--transition-slow);
  --transition-input:  border-color var(--transition-medium), box-shadow var(--transition-medium), background var(--transition-medium);
  --transition-link:   color var(--transition-base);

  /* Glass effect token */
  --glass-bg:    rgba(255, 255, 255, 0.05);
  --glass-border: var(--border-size-1) solid rgba(255, 255, 255, 0.08);

  /* Footer */
  --footer-bg: var(--primary-dark);
}

/* ============= Light Mode ============= */
[data-theme="light"] {
  color-scheme: light;

  --bg:          #F3F4F6;
  --bg-raised:   #FFFFFF;
  --bg-overlay:  #E5E7EB;
  --border:      #D1D5DB;

  --text:        #111827;
  --text-muted:  #6B7280;
  --text-link:   var(--primary);

  /* --text-inverse stays white in light mode because it represents text on
     dark/colored surfaces (navbar, accent buttons, tags) that do not flip. */
  --text-inverse: white;

  /* Hero overlay — light mode: lighter than dark mode but still ensures contrast */
  --hero-overlay-start: rgba(0,0,0,0.40);
  --hero-overlay-mid:  rgba(0,0,0,0.35);
  --hero-overlay-end:  rgba(0,0,0,0.20);

  /* Shared gradients */
  --gradient-accent-primary: linear-gradient(135deg, var(--accent-light), #FFFFFF);

  /* Footer */
  --footer-bg: var( --secondary-light);
}

html {
  color-scheme: dark;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  line-height: var(--font-lineheight-3);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

img, svg { display: block; max-width: 100%; }

/* Fixed navbar offset + sticky footer */
main {
  padding-top: 60px;
  flex: 1 0 auto;
}

.hero {
  margin-top: -60px;
}

}

/* ---------- components/layout.css ---------- */
@layer layout {
/* ============================================
   Layout — Container, Grid, Breakpoints
   ============================================ */

.container {
  max-width: var(--size-xl);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

.grid {
  display: grid;
  gap: var(--space-lg);
}

.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 768px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

}

/* ---------- components/utilities.css ---------- */
@layer utilities {
/* ============================================
   Utilities — Zero-specificity helper classes
   ============================================
   All classes are wrapped in :where() so they have 0,0,0 specificity.
   They win purely by cascade layer order (utilities layer is after components).
   This means adding a utility class always overrides component defaults,
   and inline style="" naturally overrides utilities (correct behavior).
   ============================================ */

/* ============= Display ============= */
:where(.block)  { display: block; }
:where(.inline) { display: inline; }
:where(.inline-block) { display: inline-block; }
:where(.flex)   { display: flex; }
:where(.hidden) { display: none; }

/* ============= Flex direction & wrapping ============= */
:where(.flex-col)   { flex-direction: column; }
:where(.flex-wrap)  { flex-wrap: wrap; }

/* ============= Alignment ============= */
:where(.items-center)   { align-items: center; }
:where(.items-start)    { align-items: flex-start; }
:where(.justify-center) { justify-content: center; }
:where(.justify-between){ justify-content: space-between; }

/* ============= Gap ============= */
:where(.gap-2)  { gap: var(--space-sm); }
:where(.gap-3)  { gap: var(--space-md); }
:where(.gap-4)  { gap: var(--space-lg); }
:where(.gap-xl) { gap: var(--space-xl); }

/* ============= Margin ============= */
:where(.mt-1) { margin-top: var(--space-xs); }
:where(.mt-2) { margin-top: var(--space-sm); }
:where(.mt-3) { margin-top: var(--space-md); }
:where(.mt-4) { margin-top: var(--space-lg); }
:where(.mt-5) { margin-top: var(--space-xl); }

:where(.mb-1) { margin-bottom: var(--space-xs); }
:where(.mb-2) { margin-bottom: var(--space-sm); }
:where(.mb-3) { margin-bottom: var(--space-md); }
:where(.mb-4) { margin-bottom: var(--space-lg); }
:where(.mb-5) { margin-bottom: var(--space-xl); }
:where(.mb-6) { margin-bottom: calc(var(--space-xl) * 1.5); }

:where(.mr-2) { margin-right: var(--space-sm); }
:where(.m-0)  { margin: 0; }
:where(.mx-auto) { margin-inline: auto; }

/* ============= Padding ============= */
:where(.p-xs) { padding: var(--space-xs); }
:where(.p-sm) { padding: var(--space-sm); }
:where(.p-md) { padding: var(--space-md); }
:where(.p-lg) { padding: var(--space-lg); }
:where(.p-xl) { padding: var(--space-xl); }

:where(.pl-md) { padding-left: var(--space-md); }
:where(.py-6)  { padding-block: var(--space-md); }
:where(.py-8)  { padding-block: var(--space-lg); }
:where(.pt-0)  { padding-top: 0; }

/* ============= Sizing ============= */
:where(.w-full)    { width: 100%; }
:where(.max-w-xs)  { max-width: 120px; }
:where(.max-w-sm)  { max-width: 400px; }
:where(.max-w-md)  { max-width: 600px; }
:where(.max-w-prose) { max-width: 65ch; }

:where(.min-h-300) { min-height: 300px; }
:where(.h-full)    { height: 100%; }

/* ============= Typography ============= */
:where(.text-sm)   { font-size: var(--font-size-1); }
:where(.font-mono) { font-family: var(--font-mono); }
:where(.text-center)  { text-align: center; }
:where(.text-right)   { text-align: right; }
:where(.text-muted)   { color: var(--text-muted); }

/* ============= Appearance ============= */
:where(.opacity-60)        { opacity: 0.6; }
:where(.resize-v)          { resize: vertical; }
:where(.resize-none)      { resize: none; }
:where(.whitespace-nowrap) { white-space: nowrap; }

/* ============= Background & Border ============= */
:where(.bg-raised) { background: var(--bg-raised); }
:where(.border)    { border: var(--border-size-1) solid var(--border); }

/* ============= Panel (raised surface utility) ============= */
:where(.panel) {
  background: var(--bg-raised);
  border: var(--border-size-1) solid var(--border);
  border-radius: var(--radius);
}

/* ============= Radius ============= */
:where(.rounded)   { border-radius: var(--radius); }
:where(.rounded-2) { border-radius: var(--radius-2); }
:where(.rounded-3) { border-radius: var(--radius-3); }

/* ============= Line clamp ============= */
:where(.line-clamp-3) {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

}

/* ---------- components/typography.css ---------- */
@layer components {
/* ============================================
   Typography — Headings, Text Utilities
   ============================================ */

h1, h2, h3, h4, h5, h6 {
  color: var(--text);
  line-height: var(--font-lineheight-0);
}

.title-1 { font-size: var(--font-size-fluid-3); font-weight: var(--font-weight-7); }
.title-2 { font-size: var(--font-size-fluid-2); font-weight: var(--font-weight-7); }
.title-3 { font-size: var(--font-size-4);             font-weight: var(--font-weight-6); }
.title-4 { font-size: var(--font-size-3);             font-weight: var(--font-weight-6); }
.title-5 { font-size: var(--font-size-2);             font-weight: var(--font-weight-5); }
.title-6 { font-size: var(--font-size-1); font-weight: var(--font-weight-6); letter-spacing: 0.05em; text-transform: uppercase; color: var(--text); }

.subtitle { color: var(--text-muted); }

.text-center  { text-align: center; }
.text-right   { text-align: right; }
.text-muted   { color: var(--text-muted); }

}

/* ---------- components/buttons.css ---------- */
@layer components {
/* ============================================
   Buttons
   ============================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--text-inverse);
  font-weight: var(--font-weight-6);
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: var(--transition-btn);

  &:hover {
    filter: brightness(1.15);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px var(--primary-alpha-30);
  }

  &:active { transform: translateY(0); }

  &-sm { padding: var(--space-xs) var(--space-sm); font-size: var(--font-size-0); }
  &-lg { padding: var(--space-sm) var(--space-lg); font-size: var(--font-size-3); }
}

.btn-outline {
  background: transparent;
  border: var(--border-size-1) solid currentColor;
  color: var(--primary);

  &:hover {
    background: var(--primary-dark);
    color: var(--text-inverse);
    border-color: var(--primary-dark);
    box-shadow: none;
  }
}

.btn-light {
  background: var(--text-inverse);
  color: var(--primary-dark);

  &:hover {
    box-shadow: 0 4px 16px var(--text-inverse-alpha-10);
  }
}

.btn-danger {
  background: var(--red-5);
}

.btn-ghost-light {
  background: transparent;
  border: var(--border-size-1) solid var(--text-inverse-alpha-40);
  color: var(--text-inverse);

  &:hover {
    background: var(--text-inverse-alpha-10);
    border-color: var(--text-inverse);
  }
}

.btn-gradient {
  background: var(--secondary);
  color: var(--text);

  &:hover {
    filter: brightness(1.1);
  }
}

}

/* ---------- components/cards.css ---------- */
@layer components {
/* ============================================
   Cards & Tags
   ============================================ */

.card {
  background: var(--bg-raised);
  border-radius: var(--radius-3);
  border: var(--border-size-1) solid var(--border);
  overflow: hidden;
  transition: var(--transition-card-full);

  &:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-alpha-30);
  }
}

.card:hover .card-icon {
  transform: scale(1.1);
}

.card-image {
  & img,
  & .image-placeholder {
    width: 100%;
    aspect-ratio: var(--ratio-widescreen);
    object-fit: cover;
    background: var(--bg-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.card-body { padding: var(--space-md); }

.card-header {
  display: flex;
  align-items: center;
  gap: var(--space-md);

  & .title-4 {
    margin: 0;
  }
}

.card-icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: var(--radius-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-light);
  transition: background var(--transition-slow), transform var(--transition-slow);
}

/* ============= Tags / Badges ============= */
.tag {
  display: inline-block;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius);
  font-size: var(--font-size-0);
  font-weight: var(--font-weight-6);
  background: var(--secondary-light);
  color: var(--text-muted);
}

.tag + .tag {
  margin-left: var(--space-sm);
}

.tag-brand {
  background: var(--primary-dark);
  color: var(--text-inverse);
}

.tag-accent {
  background: var(--accent);
  color: var(--text-inverse);
}

}

/* ---------- components/navigation.css ---------- */
@layer components {
/* ============================================
   Navigation — Glass Navbar
   ============================================ */

.navbar {
  background: transparent;
  color: var(--text-inverse);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  transition: var(--transition-nav);
}

.navbar.is-scrolled,
.navbar-solid,
.nav-links.is-open {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.navbar.is-scrolled {
  background: var(--primary-dark-alpha-85);
  box-shadow: 0 1px 0 var(--text-inverse-alpha-10);
}

.navbar-solid {
  background: var(--primary-dark-alpha-95);
  box-shadow: 0 1px 0 var(--text-inverse-alpha-10);
}

.navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--size-xl);
  margin-inline: auto;
  padding: var(--space-sm) var(--space-md);
}

.navbar-brand {
  display: flex;
  align-items: center;
  gap: 0;
  font-size: clamp(1rem, 2.5vw, 1.8rem);
  font-weight: var(--font-weight-7);
  color: var(--text-inverse);
  text-decoration: none;
  white-space: nowrap;

  & img {
    width: clamp(48px, 8vw, 96px);
    height: auto;
    max-width: none;
    flex-shrink: 0;
    transform: scale(1.2);
  }
}

.nav-links {
  display: flex;
  gap: var(--space-lg);
  list-style: none;

  & a {
    color: var(--text-inverse-alpha-60);
    text-decoration: none;
    font-weight: var(--font-weight-5);
    position: relative;

    &::after {
      content: '';
      position: absolute;
      bottom: -4px;
      left: 0;
      width: 0;
      height: 2px;
      background: var(--primary);
      transition: width var(--transition-slow);
    }

    &:hover {
      color: var(--text-inverse);

      &::after {
        width: 100%;
      }
    }
  }
}

/* Mobile hamburger */
.nav-burger {
  display: none;
  cursor: pointer;
  color: var(--text-inverse);
  background: none;
  border: none;
  font-size: var(--font-size-4);
}

/* Nav theme toggle */
.nav-actions {
  display: none;
  align-items: center;
  gap: var(--space-sm);
}

.nav-theme-btn {
  background: none;
  border: none;
  color: var(--text-inverse-alpha-60);
  cursor: pointer;
  padding: var(--space-xs);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--transition-fast), background var(--transition-fast);

  &:hover {
    color: var(--text-inverse);
    background: var(--text-inverse-alpha-10);
  }
}

/* Mobile overrides */
@media (max-width: 768px) {
  .nav-links { display: none; }
  .nav-links.is-open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--primary-dark-alpha-95);
    padding: var(--space-md);
  }
  .nav-burger { display: block; }
  .nav-actions { display: flex; }
}
}

/* ---------- components/hero.css ---------- */
@layer components {
/* ============================================
   Hero — Full Viewport with Animated Gradient
   ============================================ */

.hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background:
    linear-gradient(160deg, var(--hero-overlay-start) 0%, var(--hero-overlay-mid) 40%, var(--hero-overlay-end) 100%),
    url('/assets/img/hero_bg.webp') center/cover no-repeat;
  background-color: var(--primary-dark);
  color: var(--text);

  &::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 80% 60% at 20% 50%, var(--primary-alpha-15) 0%, transparent 70%),
      radial-gradient(ellipse 60% 80% at 80% 30%, var(--primary-alpha-10) 0%, transparent 60%);
    animation: gradientShift 12s ease-in-out infinite alternate;
  }
}

.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 800px;
  margin-inline: auto;
  text-align: center;
  padding: var(--space-xl) var(--space-md);
}

.hero-badge {
  display: inline-block;
  padding: var(--space-xs) var(--space-md);
  border-radius: 100px;
  background: var(--primary-alpha-20);
  border: var(--border-size-1) solid var(--primary-alpha-30);
  color: var(--text-inverse);
  font-size: var(--font-size-0);
  font-weight: var(--font-weight-5);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: var(--space-md);
  animation: fadeSlideUp 0.8s var(--ease-3) both;
}

.hero-title {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: var(--font-weight-8);
  line-height: 1.05;
  margin-bottom: var(--space-md);
  color: var(--text-inverse);
  animation: fadeSlideUp 0.8s var(--ease-3) 0.15s both;

  & .accent {
    background: linear-gradient(135deg, var(--secondary), var(--secondary-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
}

.hero-subtitle {
  font-size: clamp(1rem, 2vw, 1.35rem);
  color: var(--text-light-alpha-60);
  max-width: 600px;
  margin-inline: auto;
  margin-bottom: var(--space-xl);
  line-height: 1.6;
  animation: fadeSlideUp 0.8s var(--ease-3) 0.3s both;
}

.hero-ctas {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  flex-wrap: wrap;
  animation: fadeSlideUp 0.8s var(--ease-3) 0.45s both;
}

.hero-stats {
  display: flex;
  justify-content: center;
  gap: var(--space-xl);
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: var(--border-size-1) solid var(--text-alpha-10);
  animation: fadeSlideUp 0.8s var(--ease-3) 0.6s both;

  & .hero-stat-item {
    text-align: center;
  }

  & .hero-stat-value {
    font-size: var(--font-size-4);
    font-weight: var(--font-weight-7);
    color: var(--text-inverse);
    line-height: 1.2;
  }

  & .hero-stat-label {
    font-size: var(--font-size-0);
    color: var(--text-light-alpha-60);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
}

/* Hero decorative floating shapes */
.hero-shape {
  position: absolute;
  border-radius: 50%;
  opacity: 0.08;
  pointer-events: none;
}

.hero-shape-1 {
  width: 500px;
  height: 500px;
  background: var(--primary);
  top: -10%;
  right: -10%;
  animation: float 20s ease-in-out infinite;
}

.hero-shape-2 {
  width: 350px;
  height: 350px;
  background: var(--secondary);
  bottom: -5%;
  left: -8%;
  animation: float 16s ease-in-out infinite reverse;
}

.hero-shape-3 {
  width: 200px;
  height: 200px;
  background: var(--accent);
  top: 40%;
  left: 10%;
  animation: float 12s ease-in-out infinite 2s;
}

/* Hero scroll indicator */
.hero-scroll {
  position: absolute;
  bottom: var(--space-lg);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  animation: fadeSlideUp 0.8s var(--ease-3) 0.8s both;

  & .hero-scroll-icon {
    width: 28px;
    height: 44px;
    border: 2px solid var(--text-light-alpha-60);
    border-radius: 14px;
    display: flex;
    justify-content: center;
    padding-top: 8px;
  }

  & .hero-scroll-dot {
    width: 4px;
    height: 8px;
    background: var(--text-light-alpha-60);
    border-radius: 4px;
    animation: scrollBounce 2s ease-in-out infinite;
  }
}

/* Hero responsive */
@media (max-width: 768px) {
  .hero {
    background:
      linear-gradient(160deg, var(--hero-overlay-start) 0%, var(--hero-overlay-mid) 40%, var(--hero-overlay-end) 100%),
      url('/assets/img/hero_bg_mobile.webp') center/cover no-repeat;
    background-color: var(--primary-dark);
  }

  .hero-stats {
    gap: var(--space-md);
    flex-wrap: wrap;
  }

  .hero-stat-item {
    min-width: 80px;
  }

  .hero-scroll {
    display: none;
  }
}

/* Hero — compact variant (blog, etc.) */
.hero-sm {
  min-height: auto;
  padding: calc(var(--space-xl) * 2) var(--space-md) var(--space-xl);
  margin-top: -60px;
  background:
    linear-gradient(160deg, var(--hero-overlay-start) 0%, var(--hero-overlay-mid) 40%, var(--hero-overlay-end) 100%),
    url('/assets/img/hero_blog.webp') center/cover no-repeat;
  background-color: var(--primary-dark);

  & .title-2 {
    color: var(--text-inverse);
    animation: fadeSlideUp 0.8s var(--ease-3) 0.15s both;
  }

  & .hero-inner {
    max-width: var(--size-lg);
  }

  &::before {
    display: none;
  }
}

/* ============= Reduced Motion ============= */
@media (prefers-reduced-motion: reduce) {
  .hero::before,
  .hero-shape,
  .hero-badge,
  .hero-title,
  .hero-subtitle,
  .hero-ctas,
  .hero-stats,
  .hero-scroll,
  .hero-scroll-dot,
  .hero-sm .title-2 {
    animation: none !important;
  }
}

}

/* ---------- components/sections.css ---------- */
@layer components {
/* ============================================
   Sections & Stats
   ============================================ */

.section {
  padding: calc(var(--space-xl) * 2) 0;
}

.section-alt {
  padding: calc(var(--space-xl) * 2) 0;
  background: var(--bg-raised);
}

.section-header {
  text-align: center;
  margin-bottom: var(--space-xl);

  & .title-2 {
    margin-bottom: var(--space-sm);
  }

  & p {
    max-width: 560px;
    margin-inline: auto;
  }
}

/* ============= Stats Row ============= */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
}

.stat-card {
  text-align: center;
  padding: var(--space-lg);
  background: var(--bg-raised);
  border-radius: var(--radius-3);
  border: var(--border-size-1) solid var(--border);
  transition: var(--transition-card);

  &:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
  }
}

.stat-value {
  font-size: var(--font-size-fluid-2);
  font-weight: var(--font-weight-8);
  color: var(--secondary);
  line-height: 1.1;
}

.stat-label {
  font-size: var(--font-size-0);
  color: var(--text-muted);
  margin-top: var(--space-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

@media (max-width: 768px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============= Manifesto Section ============= */
#manifesto {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, var(--bg) 0%, var(--border) 50%, var(--primary-light) 100%);

  & .stats-grid {
    max-width: 50%;
  }
}

.manifesto-grid {
  grid-template-columns: 1fr;
}

.manifesto-content {
  position: relative;
  z-index: 1;
}

.manifesto-lead {
  font-size: var(--font-size-3);
  font-weight: var(--font-weight-6);
  color: var(--secondary);
  font-style: italic;
  line-height: 1.4;
  margin-bottom: var(--space-sm);
}

.manifesto-text p {
  margin-bottom: var(--space-md);
  line-height: 1.7;
}

.manifesto-text p:last-child {
  margin-bottom: 0;
}

.manifesto-image {
  position: absolute;
  top: -80px;
  bottom: -80px;
  right: -100px;
  width: clamp(300px, 60vw, 1100px);
  filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.45));

  & img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    clip-path: url(#rounded-hex);
  }

  /* Reveal override — slides in from the right instead of bottom */
  &.reveal {
    opacity: 0;
    transform: translateX(60px);
    transition: opacity 0.8s var(--ease-3), transform 0.8s var(--ease-3);

    &.is-visible {
      opacity: 1;
      transform: translateX(0);
    }
  }
}

@media (max-width: 768px) {
  .manifesto-image {
    display: none;
  }
}

/* ============= Expertise Row ============= */
#expertise {
  position: relative;
  overflow: hidden;
}

.expertise-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  align-items: flex-start;

  & .card {
    position: relative;
    width: auto;
    background: var(--bg-raised);
    background-clip: padding-box;
    border: none;
    border-radius: var(--radius-3);
    z-index: 10;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);

    &::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      padding: 2px;
      background: linear-gradient(135deg, var(--accent), var(--primary-light));
      -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events: none;
    }

    & .title-4 {
      background: linear-gradient(135deg, var(--accent), var(--primary-light));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    &:nth-child(even) {
      transform: translateX(20%);
    }
  }
}

.expertise-image {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: clamp(320px, 44vw, 800px);
  border-radius: var(--radius-3);
  overflow: hidden;
  z-index: 0;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.3),
    0 0 40px var(--primary-alpha-20);

  & img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Reveal override — slides in from the right */
  &.reveal {
    opacity: 0;
    transform: translateX(60px);
    transition: opacity 0.8s var(--ease-3), transform 0.8s var(--ease-3);

    &.is-visible {
      opacity: 1;
      transform: translateX(0);
    }
  }
}

@media (max-width: 1024px) {
  .expertise-image {
    display: none;
  }

  .expertise-row .card {
    width: 100%;

    &:nth-child(even) {
      transform: none;
    }
  }
}

/* ============= Lead Section ============= */
.lead-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

.lead-card {
  background: var(--gradient-accent-primary);
  border-radius: var(--radius-3);
  padding: var(--space-xl) var(--space-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-md);
  transition: var(--transition-hover);

  &:hover {
    transform: translateY(-6px);
    box-shadow: 0 0 60px rgba(247, 180, 21, 0.35), 0 8px 36px rgba(0, 0, 0, 0.3);
  }
}

.lead-number {
  font-size: var(--font-size-fluid-2);
  font-weight: var(--font-weight-8);
  color: var(--text);
  opacity: 0.25;
  line-height: 1;
  margin-bottom: var(--space-xs);
}

.lead-title {
  font-size: var(--font-size-3);
  font-weight: var(--font-weight-7);
  color: var(--text);
  line-height: 1.2;
  margin: 0;
}

.lead-desc {
  color: var(--text);
  line-height: 1.65;
  margin: 0;
  font-size: var(--font-size-1);
}

@media (max-width: 768px) {
  .lead-grid {
    grid-template-columns: 1fr;
  }
}

/* ============= Network Section ============= */
#network {
  position: relative;
  overflow: hidden;

  & .section-header {
    text-align: left;

    & p {
      margin-inline: 0;
    }
  }
}

.network-content {
  position: relative;
  z-index: 1;
  max-width: 65ch;
}

:is(#lead, #contact, #testimonials) .section-header {
  text-align: center;

  & h2 {
    text-align: center;
    margin-inline: auto;
  }
}

.network-image {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: clamp(320px, 44vw, 800px);
  overflow: hidden;
  z-index: 0;
  animation: networkFadeIn 0.8s var(--ease-3) 0.3s both;

  & img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

@keyframes networkFadeIn {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}

@media (max-width: 1024px) {
  .network-image {
    display: none;
  }
}

/* ============= About Page ============= */
.about-hero {
  padding: calc(var(--space-xl) * 3) 0 calc(var(--space-xl) * 2);
  margin-top: -20px;
  background: linear-gradient(180deg, var(--primary), var(--bg));
  text-align: center;
  display: flex;

  & .accent {
    background: linear-gradient(135deg, var(--secondary), var(--secondary-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-top: var(--space-xs);
  }
}

.about-hero-title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: var(--font-weight-8);
  line-height: 1.1;
  color: var(--text);
  padding: 2em 0em;
  display: inline;
}

.about-hero-desc {
  color: var(--text);
  max-width: 600px;
  margin: calc(var(--space-lg) * 3) auto 0;
  line-height: 1.7;
  font-size: var(--font-size-2);
}

.about-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
}

.about-card {
  background: var(--bg-raised);
  border: var(--border-size-1) solid var(--border);
  border-radius: var(--radius-3);
  padding: var(--space-lg);
  transition: var(--transition-hover);

  &:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
  }

  &-header {
    margin-bottom: var(--space-xl);

    & h3 {
      font-size: var(--font-size-3);
      font-weight: var(--font-weight-6);
      color: var(--text);
      margin: 0;
    }
  }
}

.about-address {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--text-muted);
  margin: 0 0 var(--space-sm);
  line-height: 1.6;

  & svg {
    flex-shrink: 0;
    color: var(--secondary);
  }
}

.about-phone {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-weight: var(--font-weight-6);
  color: var(--secondary);
  margin: 0;
}

@media (max-width: 768px) {
  .about-grid {
    grid-template-columns: 1fr;
  }
}

/* ============= Testimonials ============= */
.testimonials {
  margin-inline: auto;
  text-align: center;
}

.testimonial {
  margin: 0;
  padding: 0;
  max-width: 700px;
  margin-inline: auto;
}

.testimonial-text {
  font-size: var(--font-size-3);
  font-style: italic;
  line-height: var(--font-lineheight-4);
  margin-bottom: var(--space-md);
}

.testimonial-author {
  font-size: var(--font-size-1);
  font-weight: var(--font-weight-5);
  color: var(--text-muted);

  & strong {
    color: var(--text);
    font-weight: var(--font-weight-6);
  }
}

.testimonial-stars {
  color: var(--accent);
}

}

/* ---------- components/footer.css ---------- */
@layer components {
/* ============================================
   Footer
   ============================================ */

.site-footer {
  background: var(--footer-bg);
  color: var(--text-muted);
  padding: var(--space-xl) var(--space-md) var(--space-lg);
  border-top: var(--border-size-1) solid var(--border);
  font-size: var(--font-size-0);
  flex-shrink: 0;

  & :is(h6, .title-6) {
    color: var(--text);
    margin-bottom: var(--space-md);
  }
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--space-xl);
}

.footer-about p {
  max-width: 400px;
  line-height: 1.6;
}

.footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.footer-links a {
  color: var(--text-muted);
  text-decoration: none;
    transition: var(--transition-link);

  &:hover {
    color: var(--primary-light);
  }
}

.footer-contact-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);

  & svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--primary-light);
  }

  & span {
    font-size: var(--font-size-2);
  }
}

.footer-bottom {
  text-align: center;
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: var(--border-size-1) solid var(--border);
  font-size: var(--font-size-1);

  & span {
    display: block;
    text-align: center;
  }
}

@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
}
}

/* ---------- components/forms.css ---------- */
@layer components {
/* ============================================
   Forms & Inputs
   ============================================ */

.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

@media (min-width: 640px) {
  .form-row {
    grid-template-columns: 1fr 1fr;

    & .field { margin-bottom: 0; }
  }
}

.field { margin-bottom: var(--space-md); }

.label {
  display: block;
  margin-bottom: var(--space-xs);
  margin-top: var(--space-md);
  font-size: var(--font-size-2);
  font-weight: var(--font-weight-6);
  color: var(--text);
  letter-spacing: 0.02em;
}

.input, .textarea, .select select {
  width: 100%;
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-3);
  border: var(--border-size-1) solid var(--border);
  background: var(--bg-raised);
  color: var(--text);
  font-family: inherit;
  font-size: var(--font-size-2);
  transition: var(--transition-input);

  &:hover {
    border-color: var(--text-muted);
  }

  &:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-alpha-30);
    background: var(--bg);
  }

  &::placeholder {
    color: var(--text-muted);
  }
}

.textarea {
  resize: vertical;
  min-height: 120px;
  line-height: var(--font-lineheight-4);
}

/* ============= Notifications / Alerts ============= */
.notification {
  padding: var(--space-md);
  border-radius: var(--radius);
  border-left: var(--border-size-2) solid transparent;
}

.notification-success {
  background: color-mix(in srgb, var(--green-9) 20%, transparent);
  border-color: var(--green-5);
}

.notification-error {
  background: color-mix(in srgb, var(--red-9) 20%, transparent);
  border-color: var(--red-5);
}

.notification-warning {
  background: color-mix(in srgb, var(--yellow-9) 20%, transparent);
  border-color: var(--yellow-5);
}
}

/* ---------- components/articles.css ---------- */
@layer components {
/* ============================================
   Articles — Listing & Single Article
   ============================================ */

/* ============= Article Page Layout ============= */
.article-page {
  padding: calc(var(--space-xl) + 60px) 0 var(--space-xl);
  margin-top: -60px;
}

.article-layout {
  max-width: 800px;
  margin-inline: auto;
  padding-inline: var(--space-md);
}

/* ============= Article Listing Cards ============= */
.article-card {
  text-decoration: none;
  color: inherit;
  display: block;
  transition: var(--transition-card-full);

  &:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-alpha-30);
  }
}

.article-meta {
  font-size: var(--font-size-0);
  color: var(--text-muted);
  margin-top: var(--space-xs);
}

.article-tag {
  display: inline-block;
  margin-top: var(--space-sm);
}

.article-excerpt {
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============= Article Hero ============= */
.article-hero {
  text-align: center;

  & .tag {
    display: inline-block;
    margin-bottom: var(--space-md);
  }

  & .title-2 {
    max-inline-size: none;
    text-wrap: wrap;
    margin-bottom: var(--space-sm);
  }
}

.article-hero-meta {
  max-inline-size: none;
  color: var(--text-muted);
  font-size: var(--font-size-0);

  & a {
    color: var(--text-link);
    text-decoration: none;
    transition: var(--transition-link);

    &:hover {
      color: var(--primary);
    }
  }
}

/* ============= Article Divider ============= */
.article-divider {
  border: none;
  border-top: var(--border-size-1) solid var(--border);
  margin: var(--space-lg) 0;
}

/* ============= Single Article Prose ============= */
.article-content {
  font-size: var(--font-size-2);
  line-height: var(--font-lineheight-4);

  & h2 {
    max-inline-size: none;
    text-wrap: wrap;
    font-size: var(--font-size-4);
    font-weight: var(--font-weight-7);
    margin-top: var(--space-xl);
    margin-bottom: var(--space-md);
    color: var(--text);
  }

  & h3 {
    max-inline-size: none;
    text-wrap: wrap;
    font-size: var(--font-size-3);
    font-weight: var(--font-weight-6);
    margin-top: var(--space-lg);
    margin-bottom: var(--space-sm);
    color: var(--text);
  }

  & p {
    max-inline-size: none;
    margin-bottom: var(--space-md);
    color: var(--text);
  }

  & :is(ul, ol) {
    margin-bottom: var(--space-md);
    padding-left: var(--space-lg);
  }

  & table {
    max-inline-size: none;
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--space-md);
  }

  & :is(th, td) {
    padding: var(--space-sm) var(--space-md);
    text-align: left;
    border: var(--border-size-1) solid var(--border);
  }

  & th {
    font-weight: var(--font-weight-6);
    color: var(--text);
    background: var(--bg-raised);
  }

  & tr:hover td {
    background: var(--bg-overlay);
  }

  & li {
    margin-bottom: var(--space-xs);
  }

  & blockquote {
    border-left: 3px solid var(--primary);
    padding: var(--space-sm) var(--space-md);
    margin: var(--space-lg) 0;
    background: var(--bg-raised);
    border-radius: 0 var(--radius-2) var(--radius-2) 0;
    color: var(--text-muted);
    font-style: italic;
  }

  & code {
    background: var(--bg-overlay);
    padding: 0.15em 0.4em;
    border-radius: var(--radius-1, 3px);
    font-size: 0.9em;
    font-family: var(--font-mono);
  }

  & pre {
    background: var(--bg-raised);
    border: var(--border-size-1) solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-md);
    overflow-x: auto;
    margin-bottom: var(--space-md);
    font-size: var(--font-size-0);
    line-height: var(--font-lineheight-4);

    & code {
      background: none;
      padding: 0;
      font-size: inherit;
    }
  }

  & img {
    border-radius: var(--radius);
    margin: var(--space-lg) 0;
  }

  & a {
    color: var(--text-link);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: var(--transition-link);

    &:hover {
      color: var(--primary);
    }
  }
}

/* ============= Article Back Link ============= */
.article-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--text-muted);
  text-decoration: none;
  font-size: var(--font-size-0);
  font-weight: var(--font-weight-5);
  margin-bottom: var(--space-xl);
  transition: var(--transition-link);

  &:hover {
    color: var(--primary);
  }
}

/* ============= Empty State ============= */
.article-empty {
  text-align: center;
  padding: var(--space-xl) 0;
  color: var(--text-muted);

  & svg {
    margin-inline: auto;
    margin-bottom: var(--space-md);
    opacity: 0.4;
  }
}

/* ============= Article Filters ============= */
.article-filters-label {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: var(--font-size-1);
  font-weight: var(--font-weight-5);
  flex-basis: 100%;
}



.article-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: calc(var(--space-xl) * 1.5);
}

@media (min-width: 640px) {
  .article-filters-label {
    flex-basis: auto;
  }
  .article-filters {
    gap: var(--space-md);
  }
}
.filter-btn {
  display: inline-flex;
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  border-radius: 999px;
  border: var(--border-size-1) solid var(--border);
  background: var(--bg-raised);
  color: var(--text-muted);
  font-size: var(--font-size-1);
  cursor: pointer;
  transition: var(--transition-btn);

  &:hover {
    color: var(--text);
    border-color: var(--primary-alpha-30);
  }

  &:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
  }

  &.is-active,
  &[aria-pressed="true"] {
    background: var(--primary);
    color: var(--text-inverse);
    border-color: var(--primary);
    box-shadow: 0 2px 8px var(--primary-alpha-30);
  }
}

.filter-clear {
  background: none;
  border: none;
  color: var(--primary);
  font: inherit;
  font-weight: var(--font-weight-6);
  cursor: pointer;
  padding: 0;
  text-decoration: underline;

  &:hover {
    color: var(--primary-light);
  }
}

.article-filters-empty {
  text-align: center;
  color: var(--text-muted);
  margin-bottom: var(--space-md);
}

.article-card[hidden] {
  display: none;
}

}

/* ---------- components/animations.css ---------- */
@layer components {
/* ============================================
   Scroll Reveal Animations
   ============================================ */

/* Entry state — hidden below + transparent */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s var(--ease-3), transform 0.6s var(--ease-3);
}

/* Visible state — triggered by IntersectionObserver in foot.php */
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered delays for multi-element rows */
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }

/* ============= Testimonial Enter Animation ============= */
/* Plays once when a new testimonial is swapped in via htmx */
@keyframes fadeSlideInLeft {
  from {
    opacity: 0;
    transform: translateX(-60px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.testimonial-enter {
  animation: fadeSlideInLeft 1.2s var(--ease-1) both;
}

/* ============= Hero Animations ============= */
/* Title, subtitle, CTAs each fade + slide up with staggered delays (defined inline via animation-delay) */
@keyframes fadeSlideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Slow pulsing scale applied to hero::before gradient shapes */
@keyframes gradientShift {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.05);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Gentle floating motion for decorative hero blobs (hero-shape-1/2/3) */
@keyframes float {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  33% {
    transform: translateY(-20px) scale(1.02);
  }
  66% {
    transform: translateY(10px) scale(0.98);
  }
}

/* Bouncing dot animation for the scroll indicator at hero bottom */
@keyframes scrollBounce {
  0%, 100% {
    transform: translateY(0);
    opacity: 1;
  }
  50% {
    transform: translateY(6px);
    opacity: 0.4;
  }
}

/* ============= Reduced Motion ============= */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-delay-1,
  .reveal-delay-2,
  .reveal-delay-3,
  .reveal-delay-4,
  .reveal-delay-5 {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .testimonial-enter {
    animation: none;
  }
}

}

/* ---------- components/light-mode.css ---------- */
@layer overrides {
/* ============================================
   Light Mode Overrides
   ============================================
   All [data-theme="light"] component overrides live here.
   This file is loaded in the @layer overrides cascade layer,
   guaranteeing these rules always win over component defaults.
   ============================================ */

/* ============= Typography ============= */
[data-theme="light"] .title-1,
[data-theme="light"] .title-2,
[data-theme="light"] .title-3 {
  color: var(--primary);
}

/* ============= Cards & Tags ============= */
[data-theme="light"] .tag-accent {
  background: var(--accent-dark);
}

/* ============= Hero ============= */
[data-theme="light"] .hero-title .accent {
  background: linear-gradient(135deg, var(--accent-dark), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ============= Sections ============= */
[data-theme="light"] #manifesto {
  background: linear-gradient(90deg, var(--bg) 0%, var(--bg) 50%, var(--primary-dark-alpha-85) 100%);
}

[data-theme="light"] .stat-card {
  background: #FFFFFF;
  border-color: #E5E7EB;
}

[data-theme="light"] .stat-card:hover {
  border-color: #D1D5DB;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .stat-card-number {
  color: var(--primary-dark);
}

[data-theme="light"] .stat-card-label {
  color: var(--text-muted);
}

[data-theme="light"] .lead-card {
  background: linear-gradient(145deg, #FFF9E6, #F5F5F5);
  border: var(--border-size-1) solid rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .lead-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .lead-number {
  color: var(--primary);
  opacity: 1;
}

[data-theme="light"] .about-card {
  background: #FFFFFF;
  border-color: #E5E7EB;
}

/* ============= Admin ============= */
[data-theme="light"] .admin-sidebar-brand {
  color: var(--primary-dark);
}

[data-theme="light"] .admin-sidebar-link.active {
  color: var(--primary-dark);
}

[data-theme="light"] .admin .stat-card:hover {
  border-color: #D1D5DB;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .admin .stat-card-number {
  color: var(--primary-dark);
}

[data-theme="light"] .stat-card-action .btn-outline {
  color: var(--primary-dark);
  border-color: var(--border);
}

[data-theme="light"] .stat-card-action .btn-outline:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text-inverse);
}

[data-theme="light"] .table .btn-outline {
  color: var(--text);
  border-color: var(--border);
}

[data-theme="light"] .table .btn-outline:hover {
  background: var(--bg-overlay);
  border-color: var(--border);
  color: var(--text);
}

[data-theme="light"] .table th {
  color: var(--text-muted);
}

[data-theme="light"] .table tbody tr:hover {
  background: var(--bg-overlay);
}

[data-theme="light"] .table code {
  background: #F3F4F6;
  color: var(--primary-dark);
}

[data-theme="light"] .table-wrap {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

}