@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/outfit-700.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 800; font-display: swap; src: url(/assets/fonts/outfit-800.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/plus-jakarta-sans-400.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/plus-jakarta-sans-500.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/plus-jakarta-sans-600.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/plus-jakarta-sans-700.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } *,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Plus Jakarta Sans,system-ui,sans-serif;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}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;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.-bottom-32{bottom:-8rem}.-left-32{left:-8rem}.-right-32{right:-8rem}.-right-6{right:-1.5rem}.-top-32{top:-8rem}.-top-6{top:-1.5rem}.bottom-8{bottom:2rem}.left-1\/2{left:50%}.z-10{z-index:10}.order-1{order:1}.order-2{order:2}.m-0{margin:0}.mx-auto{margin-left:auto;margin-right:auto}.\!mb-0{margin-bottom:0!important}.mb-1{margin-bottom:.25rem}.mb-10{margin-bottom:2.5rem}.mb-12{margin-bottom:3rem}.mb-14{margin-bottom:3.5rem}.mb-16{margin-bottom:4rem}.mb-2{margin-bottom:.5rem}.mb-24{margin-bottom:6rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.mt-12{margin-top:3rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.hidden{display:none}.aspect-square{aspect-ratio:1/1}.h-12{height:3rem}.h-96{height:24rem}.h-\[420px\]{height:420px}.h-full{height:100%}.min-h-\[100vh\],.min-h-screen{min-height:100vh}.w-12{width:3rem}.w-96{width:24rem}.w-full{width:100%}.w-px{width:1px}.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.max-w-4xl{max-width:56rem}.max-w-none{max-width:none}.max-w-xl{max-width:36rem}.flex-shrink-0{flex-shrink:0}.-translate-x-1\/2{--tw-translate-x:-50%}.-translate-x-1\/2,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes pulse{50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.list-disc{list-style-type:disc}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-12{gap:3rem}.gap-16{gap:4rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-7{gap:1.75rem}.gap-x-8{-moz-column-gap:2rem;column-gap:2rem}.gap-y-3{row-gap:.75rem}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem*var(--tw-space-y-reverse))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem*var(--tw-space-y-reverse))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem*var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem*var(--tw-space-y-reverse))}.space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(2rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2rem*var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.break-all{word-break:break-all}.rounded-2xl{border-radius:1rem}.rounded-3xl{border-radius:1.5rem}.rounded-full{border-radius:9999px}.rounded-xl{border-radius:.75rem}.\!border-0{border-width:0!important}.border-0{border-width:0}.border-b{border-bottom-width:1px}.\!border-bg-soft{--tw-border-opacity:1!important;border-color:rgb(241 240 235/var(--tw-border-opacity,1))!important}.\!border-primary{--tw-border-opacity:1!important;border-color:rgb(11 42 74/var(--tw-border-opacity,1))!important}.border-\[--c-border\]{border-color:var(--c-border)}.border-bg-soft{--tw-border-opacity:1;border-color:rgb(241 240 235/var(--tw-border-opacity,1))}.\!bg-bg-soft{--tw-bg-opacity:1!important;background-color:rgb(241 240 235/var(--tw-bg-opacity,1))!important}.\!bg-primary{--tw-bg-opacity:1!important;background-color:rgb(11 42 74/var(--tw-bg-opacity,1))!important}.\!bg-primary\/15{background-color:rgba(11,42,74,.15)!important}.\!bg-white\/10{background-color:hsla(0,0%,100%,.1)!important}.bg-accent{--tw-bg-opacity:1;background-color:rgb(245 180 0/var(--tw-bg-opacity,1))}.bg-accent\/15{background-color:rgba(245,180,0,.15)}.bg-bg{--tw-bg-opacity:1;background-color:rgb(250 250 247/var(--tw-bg-opacity,1))}.bg-primary\/20{background-color:rgba(11,42,74,.2)}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.bg-white\/10{background-color:hsla(0,0%,100%,.1)}.bg-white\/30{background-color:hsla(0,0%,100%,.3)}.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.from-accent{--tw-gradient-from:#f5b400 var(--tw-gradient-from-position);--tw-gradient-to:rgba(245,180,0,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-primary{--tw-gradient-from:#0b2a4a var(--tw-gradient-from-position);--tw-gradient-to:rgba(11,42,74,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.via-\[\#FFA42E\]{--tw-gradient-to:rgba(255,164,46,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),#ffa42e var(--tw-gradient-via-position),var(--tw-gradient-to)}.to-accent-2{--tw-gradient-to:#ff6b35 var(--tw-gradient-to-position)}.to-primary-600{--tw-gradient-to:#1e5ba8 var(--tw-gradient-to-position)}.\!p-10{padding:2.5rem!important}.\!p-5{padding:1.25rem!important}.\!p-6{padding:1.5rem!important}.\!p-8{padding:2rem!important}.p-0{padding:0}.\!py-10{padding-top:2.5rem!important;padding-bottom:2.5rem!important}.px-3{padding-left:.75rem;padding-right:.75rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-10{padding-top:2.5rem;padding-bottom:2.5rem}.py-4{padding-top:1rem;padding-bottom:1rem}.\!pt-16{padding-top:4rem!important}.pb-16{padding-bottom:4rem}.pb-20{padding-bottom:5rem}.pb-3{padding-bottom:.75rem}.pl-6{padding-left:1.5rem}.pt-2{padding-top:.5rem}.pt-24{padding-top:6rem}.pt-3{padding-top:.75rem}.pt-32{padding-top:8rem}.pt-40{padding-top:10rem}.text-center{text-align:center}.font-display{font-family:Outfit,system-ui,sans-serif}.\!text-lg{font-size:1.125rem!important;line-height:1.75rem!important}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-5xl{font-size:3rem;line-height:1}.text-7xl{font-size:4.5rem;line-height:1}.text-\[10rem\]{font-size:10rem}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.italic{font-style:italic}.not-italic{font-style:normal}.leading-\[0\.95\]{line-height:.95}.leading-none{line-height:1}.leading-relaxed{line-height:1.625}.tracking-tight{letter-spacing:-.025em}.tracking-wide{letter-spacing:.025em}.\!text-accent{--tw-text-opacity:1!important;color:rgb(245 180 0/var(--tw-text-opacity,1))!important}.\!text-primary{--tw-text-opacity:1!important;color:rgb(11 42 74/var(--tw-text-opacity,1))!important}.\!text-white{--tw-text-opacity:1!important;color:rgb(255 255 255/var(--tw-text-opacity,1))!important}.text-\[--c-text-soft\]{color:var(--c-text-soft)}.text-accent{--tw-text-opacity:1;color:rgb(245 180 0/var(--tw-text-opacity,1))}.text-accent-2{--tw-text-opacity:1;color:rgb(255 107 53/var(--tw-text-opacity,1))}.text-primary{--tw-text-opacity:1;color:rgb(11 42 74/var(--tw-text-opacity,1))}.text-primary\/85{color:rgba(11,42,74,.85)}.text-primary\/90{color:rgba(11,42,74,.9)}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.text-white\/50{color:hsla(0,0%,100%,.5)}.text-white\/55{color:hsla(0,0%,100%,.55)}.text-white\/60{color:hsla(0,0%,100%,.6)}.text-white\/70{color:hsla(0,0%,100%,.7)}.text-white\/75{color:hsla(0,0%,100%,.75)}.text-white\/85{color:hsla(0,0%,100%,.85)}.text-white\/90{color:hsla(0,0%,100%,.9)}.underline{text-decoration-line:underline}.opacity-20{opacity:.2}.shadow-2xl{--tw-shadow:0 25px 50px -12px rgba(0,0,0,.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color)}.shadow-2xl,.shadow-lg{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.shadow-xl{--tw-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.blur-3xl{--tw-blur:blur(64px);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)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.hover\:text-accent:hover{--tw-text-opacity:1;color:rgb(245 180 0/var(--tw-text-opacity,1))}.hover\:text-accent-2:hover{--tw-text-opacity:1;color:rgb(255 107 53/var(--tw-text-opacity,1))}.hover\:no-underline:hover{text-decoration-line:none}.hover\:shadow-lg:hover{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.group:hover .group-hover\:text-primary{--tw-text-opacity:1;color:rgb(11 42 74/var(--tw-text-opacity,1))}@media (min-width:640px){.sm\:col-span-2{grid-column:span 2/span 2}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}}@media (min-width:768px){.md\:flex{display:flex}.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\:text-3xl{font-size:1.875rem;line-height:2.25rem}.md\:text-4xl{font-size:2.25rem;line-height:2.5rem}.md\:text-5xl{font-size:3rem;line-height:1}.md\:text-6xl{font-size:3.75rem;line-height:1}.md\:text-7xl{font-size:4.5rem;line-height:1}.md\:text-\[14rem\]{font-size:14rem}.md\:text-xl{font-size:1.25rem;line-height:1.75rem}}@media (min-width:1024px){.lg\:order-1{order:1}.lg\:order-2{order:2}.lg\:flex{display:flex}.lg\:hidden{display:none}.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:grid-cols-\[1\.4fr\2c 1fr\]{grid-template-columns:1.4fr 1fr}.lg\:\!p-10{padding:2.5rem!important}.lg\:\!p-12{padding:3rem!important}.lg\:text-\[5\.5rem\]{font-size:5.5rem}}:root { --c-primary: #0B2A4A; --c-primary-600: #1E5BA8; --c-primary-400: #4A8AD4; --c-accent: #F5B400; --c-accent-2: #FF6B35; --c-bg: #FAFAF7; --c-bg-soft: #F1F0EB; --c-text: #0B2A4A; --c-text-soft: #475569; --c-border: #E2E8F0; --c-success: #10b981; --shadow-sm: 0 1px 2px rgba(11, 42, 74, 0.06); --shadow-md: 0 8px 24px -8px rgba(11, 42, 74, 0.12); --shadow-lg: 0 24px 48px -16px rgba(11, 42, 74, 0.18); --shadow-glow: 0 16px 48px -8px rgba(245, 180, 0, 0.35); --radius-sm: 8px; --radius: 16px; --radius-lg: 24px; --radius-xl: 32px; --t-fast: 200ms cubic-bezier(0.4, 0, 0.2, 1); --t-base: 400ms cubic-bezier(0.4, 0, 0.2, 1); --t-slow: 700ms cubic-bezier(0.4, 0, 0.2, 1); } * { -webkit-tap-highlight-color: transparent; } html { scroll-behavior: smooth; scroll-padding-top: 90px; } body { font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; color: var(--c-text); background: var(--c-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } h1, h2, h3, h4, h5, h6 { font-family: 'Outfit', system-ui, sans-serif; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; color: var(--c-primary); } ::selection { background: var(--c-accent); color: var(--c-primary); } /* ========== ANIMATED HERO BACKGROUND ========== */ .hero-bg { position: absolute; inset: 0; overflow: hidden; z-index: 0; } .hero-bg::before { content: ""; position: absolute; inset: -10%; background: radial-gradient(circle at 20% 30%, rgba(255, 107, 53, 0.35) 0%, transparent 45%), radial-gradient(circle at 80% 20%, rgba(245, 180, 0, 0.40) 0%, transparent 50%), radial-gradient(circle at 50% 90%, rgba(30, 91, 168, 0.55) 0%, transparent 55%), linear-gradient(135deg, #0B2A4A 0%, #1E5BA8 60%, #FF6B35 100%); background-size: 200% 200%; animation: heroShift 18s ease-in-out infinite alternate; filter: saturate(1.1); } .hero-bg::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.08) 1px, transparent 0); background-size: 32px 32px; mask-image: linear-gradient(180deg, black 0%, transparent 90%); } @keyframes heroShift { 0% { background-position: 0% 0%; } 50% { background-position: 100% 50%; } 100% { background-position: 50% 100%; } } /* Big sun behind hero */ .hero-sun { position: absolute; top: -120px; right: -120px; width: 520px; height: 520px; pointer-events: none; opacity: 0.85; animation: sunSpin 60s linear infinite; filter: drop-shadow(0 0 80px rgba(245, 180, 0, 0.6)); z-index: 1; } @keyframes sunSpin { to { transform: rotate(360deg); } } /* Floating particles */ .particles { position: absolute; inset: 0; pointer-events: none; z-index: 1; } .particles span { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.5); box-shadow: 0 0 12px rgba(245, 180, 0, 0.7); animation: floatUp linear infinite; } @keyframes floatUp { 0% { transform: translateY(0) scale(0.6); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(-110vh) scale(1); opacity: 0; } } /* ========== HEADER ========== */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; transition: all var(--t-base); padding: 18px 0; } .site-header.scrolled { background: rgba(250, 250, 247, 0.85); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); box-shadow: var(--shadow-sm); padding: 12px 0; } .site-header.scrolled .nav-link { color: var(--c-text); } .site-header.scrolled .logo-mark { color: var(--c-primary); } .nav-link { position: relative; color: rgba(255,255,255,0.92); font-weight: 500; font-size: 0.94rem; padding: 8px 4px; transition: color var(--t-fast); } .nav-link::after { content: ""; position: absolute; left: 4px; right: 4px; bottom: 2px; height: 2px; background: var(--c-accent); transform: scaleX(0); transform-origin: left; transition: transform var(--t-base); border-radius: 2px; } .nav-link:hover::after, .nav-link[aria-current="page"]::after { transform: scaleX(1); } .nav-link:hover { color: var(--c-accent); } /* ========== BUTTONS ========== */ .btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; border-radius: 999px; font-weight: 600; font-size: 0.95rem; letter-spacing: 0.01em; transition: all var(--t-base); cursor: pointer; border: 0; white-space: nowrap; position: relative; overflow: hidden; } .btn-primary { background: linear-gradient(135deg, var(--c-accent) 0%, var(--c-accent-2) 100%); color: var(--c-primary); box-shadow: var(--shadow-glow); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 24px 64px -8px rgba(245, 180, 0, 0.5); } .btn-primary:active { transform: translateY(0); } .btn-ghost { background: rgba(255,255,255,0.12); color: white; backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.25); } .btn-ghost:hover { background: rgba(255,255,255,0.20); border-color: rgba(255,255,255,0.4); } .btn-outline { background: transparent; color: var(--c-primary); border: 2px solid var(--c-primary); } .btn-outline:hover { background: var(--c-primary); color: white; } /* Shine effect */ .btn-primary::before { content: ""; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent); transition: left 700ms; } .btn-primary:hover::before { left: 130%; } /* ========== CARDS ========== */ .card { background: white; border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow-sm); border: 1px solid var(--c-border); transition: all var(--t-base); position: relative; overflow: hidden; } .card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; } .card-glass { background: rgba(255,255,255,0.06); backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3); border: 1px solid rgba(255,255,255,0.18); color: white; } .card-feature { background: linear-gradient(180deg, white 0%, var(--c-bg-soft) 100%); } .card-feature::after { content: ""; position: absolute; top: 0; right: 0; width: 120px; height: 120px; background: radial-gradient(circle, var(--c-accent) 0%, transparent 70%); opacity: 0.08; border-radius: 50%; transform: translate(40px, -40px); transition: all var(--t-slow); } .card-feature:hover::after { transform: translate(20px, -20px) scale(1.5); opacity: 0.15; } .icon-bubble { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 16px; background: linear-gradient(135deg, rgba(245, 180, 0, 0.15), rgba(255, 107, 53, 0.10)); color: var(--c-accent-2); margin-bottom: 18px; } .icon-bubble svg { width: 26px; height: 26px; stroke-width: 2; } /* ========== SECTIONS ========== */ .section { padding: clamp(60px, 8vw, 120px) 0; position: relative; } .section-dark { background: var(--c-primary); color: white; } .section-dark h1, .section-dark h2, .section-dark h3 { color: white; } .section-soft { background: var(--c-bg-soft); } .eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; background: rgba(245, 180, 0, 0.14); color: var(--c-accent-2); margin-bottom: 18px; } .eyebrow::before { content: ""; width: 6px; height: 6px; background: var(--c-accent-2); border-radius: 50%; animation: pulse 2s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.4); } } /* Gradient text */ .text-gradient { background: linear-gradient(135deg, var(--c-accent) 0%, var(--c-accent-2) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* ========== TIMELINE ========== */ .timeline { position: relative; display: grid; gap: 32px; } @media (min-width: 1024px) { .timeline { grid-template-columns: repeat(5, 1fr); gap: 24px; } .timeline::before { content: ""; position: absolute; left: 5%; right: 5%; top: 55px; height: 2px; background: linear-gradient(90deg, var(--c-accent) 0%, var(--c-accent-2) 50%, var(--c-primary-400) 100%); z-index: 0; } } .timeline-step { position: relative; text-align: center; z-index: 1; } .timeline-num { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 50%; background: white; border: 2px solid var(--c-accent); color: var(--c-accent-2); font-family: 'Outfit', sans-serif; font-size: 1.7rem; font-weight: 700; margin-bottom: 18px; box-shadow: 0 0 0 8px rgba(245, 180, 0, 0.08); transition: all var(--t-base); } .timeline-step:hover .timeline-num { transform: scale(1.05); box-shadow: 0 0 0 12px rgba(245, 180, 0, 0.15); } /* ========== FAQ ========== */ .faq-item { border-bottom: 1px solid var(--c-border); } .faq-item summary { cursor: pointer; list-style: none; padding: 22px 0; font-weight: 600; font-size: 1.05rem; color: var(--c-primary); display: flex; justify-content: space-between; align-items: center; gap: 16px; transition: color var(--t-fast); } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: "+"; font-size: 1.6rem; font-weight: 300; color: var(--c-accent-2); transition: transform var(--t-base); flex-shrink: 0; } .faq-item[open] summary::after { transform: rotate(45deg); } .faq-item summary:hover { color: var(--c-accent-2); } .faq-item p { padding: 0 0 22px; color: var(--c-text-soft); line-height: 1.7; } /* ========== FORMS ========== */ .field { display: block; margin-bottom: 18px; } .field-label { display: block; font-size: 0.88rem; font-weight: 600; margin-bottom: 6px; color: var(--c-primary); } .field-label .req { color: var(--c-accent-2); } .field-input, .field-select, .field-textarea { width: 100%; padding: 13px 16px; border: 1.5px solid var(--c-border); border-radius: var(--radius-sm); font: inherit; background: white; color: var(--c-text); transition: all var(--t-fast); } .field-input:focus, .field-select:focus, .field-textarea:focus { outline: 0; border-color: var(--c-accent); box-shadow: 0 0 0 4px rgba(245, 180, 0, 0.18); } .field-textarea { resize: vertical; min-height: 120px; } .field-checkbox { display: flex; align-items: flex-start; gap: 10px; font-size: 0.9rem; color: var(--c-text-soft); cursor: pointer; } .field-checkbox input { margin-top: 4px; flex-shrink: 0; } .honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } /* ========== TRUST BAR ========== */ .trust-bar { display: grid; gap: 24px; grid-template-columns: repeat(2, 1fr); } @media (min-width: 768px) { .trust-bar { grid-template-columns: repeat(4, 1fr); } } .trust-item { text-align: center; padding: 24px 16px; } .trust-num { font-family: 'Outfit', sans-serif; font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 800; background: linear-gradient(135deg, var(--c-accent) 0%, var(--c-accent-2) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; line-height: 1; } .trust-label { display: block; margin-top: 8px; font-size: 0.9rem; color: var(--c-text-soft); font-weight: 500; } /* ========== CALCULATOR ========== */ .calc { background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-600) 100%); border-radius: var(--radius-xl); padding: clamp(32px, 5vw, 56px); color: white; box-shadow: var(--shadow-lg); position: relative; overflow: hidden; } .calc::before { content: ""; position: absolute; top: -50%; right: -20%; width: 600px; height: 600px; background: radial-gradient(circle, rgba(245, 180, 0, 0.25) 0%, transparent 60%); pointer-events: none; } .calc-grid { position: relative; display: grid; gap: 40px; grid-template-columns: 1fr; } @media (min-width: 1024px) { .calc-grid { grid-template-columns: 1fr 1.1fr; align-items: center; } } .calc-slider-wrap { margin-bottom: 28px; } .calc-slider-wrap label { display: flex; justify-content: space-between; font-weight: 500; margin-bottom: 12px; font-size: 0.95rem; } .calc-slider-wrap label span { color: var(--c-accent); font-weight: 700; } .calc-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; background: rgba(255,255,255,0.18); border-radius: 3px; outline: none; } .calc-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; border-radius: 50%; background: var(--c-accent); cursor: pointer; box-shadow: 0 0 0 6px rgba(245, 180, 0, 0.18); transition: transform var(--t-fast); } .calc-slider::-webkit-slider-thumb:hover { transform: scale(1.15); } .calc-slider::-moz-range-thumb { width: 24px; height: 24px; border: 0; border-radius: 50%; background: var(--c-accent); cursor: pointer; box-shadow: 0 0 0 6px rgba(245, 180, 0, 0.18); } .calc-result { background: rgba(255,255,255,0.06); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.18); border-radius: var(--radius-lg); padding: 32px; text-align: center; } .calc-result-num { font-family: 'Outfit', sans-serif; font-size: clamp(2.4rem, 6vw, 3.8rem); font-weight: 800; background: linear-gradient(135deg, var(--c-accent) 0%, var(--c-accent-2) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; line-height: 1; margin: 8px 0 4px; } .calc-result-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.18); font-size: 0.9rem; } .calc-result-mini b { display: block; font-family: 'Outfit', sans-serif; font-size: 1.5rem; color: var(--c-accent); } /* ========== CITY CHIPS ========== */ .city-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; } .city-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 999px; background: white; border: 1.5px solid var(--c-border); color: var(--c-primary); font-size: 0.88rem; font-weight: 500; transition: all var(--t-fast); } .city-chip:hover { border-color: var(--c-accent); background: var(--c-accent); transform: translateY(-2px); box-shadow: var(--shadow-md); } /* ========== TESTIMONIALS ========== */ .testi { background: white; border-radius: var(--radius); padding: 32px; box-shadow: var(--shadow-sm); border: 1px solid var(--c-border); position: relative; height: 100%; } .testi::before { content: "β€œ"; position: absolute; top: 12px; right: 24px; font-size: 6rem; font-family: Georgia, serif; color: var(--c-accent); opacity: 0.25; line-height: 1; } .testi-stars { color: var(--c-accent); margin-bottom: 16px; letter-spacing: 2px; } .testi-text { color: var(--c-text-soft); line-height: 1.7; font-size: 1rem; margin-bottom: 20px; } .testi-author { display: flex; align-items: center; gap: 12px; } .testi-avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--c-accent) 0%, var(--c-accent-2) 100%); display: inline-flex; align-items: center; justify-content: center; color: var(--c-primary); font-weight: 700; } .testi-name { font-weight: 600; color: var(--c-primary); } .testi-meta { font-size: 0.85rem; color: var(--c-text-soft); } /* ========== FOOTER ========== */ .site-footer { background: var(--c-primary); color: rgba(255,255,255,0.75); padding: 80px 0 32px; position: relative; overflow: hidden; } .site-footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--c-accent) 0%, var(--c-accent-2) 50%, var(--c-primary-400) 100%); } .site-footer h4 { color: white; font-size: 1rem; margin-bottom: 18px; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } .site-footer a { color: rgba(255,255,255,0.75); transition: color var(--t-fast); } .site-footer a:hover { color: var(--c-accent); } .footer-grid { display: grid; gap: 40px; grid-template-columns: 1fr; } @media (min-width: 768px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; } } .footer-bottom { margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.15); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; font-size: 0.86rem; } /* ========== MOBILE NAV ========== */ .mobile-nav { position: fixed; inset: 0; background: var(--c-primary); z-index: 60; padding: 100px 24px 40px; transform: translateX(100%); transition: transform var(--t-base); display: flex; flex-direction: column; gap: 8px; } .mobile-nav.open { transform: translateX(0); } .mobile-nav a { color: white; font-size: 1.4rem; font-family: 'Outfit', sans-serif; font-weight: 600; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,0.1); display: block; } .mobile-nav a:last-child { border-bottom: 0; } .burger { width: 28px; height: 22px; position: relative; cursor: pointer; background: transparent; border: 0; padding: 0; z-index: 70; } .burger span { position: absolute; left: 0; right: 0; height: 2px; background: white; border-radius: 2px; transition: all var(--t-base); } .burger span:nth-child(1) { top: 0; } .burger span:nth-child(2) { top: 50%; transform: translateY(-50%); } .burger span:nth-child(3) { bottom: 0; } .site-header.scrolled .burger span { background: var(--c-primary); } .burger.open span:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); background: white; } .burger.open span:nth-child(2) { opacity: 0; } .burger.open span:nth-child(3) { bottom: 50%; transform: translateY(50%) rotate(-45deg); background: white; } /* ========== AOS-LIKE FALLBACK ========== */ [data-reveal] { opacity: 0; transform: translateY(30px); transition: all 800ms cubic-bezier(0.4, 0, 0.2, 1); } [data-reveal].is-visible { opacity: 1; transform: translateY(0); } [data-reveal="left"] { transform: translateX(-30px); } [data-reveal="left"].is-visible { transform: translateX(0); } [data-reveal="right"] { transform: translateX(30px); } [data-reveal="right"].is-visible { transform: translateX(0); } [data-reveal][data-delay="100"] { transition-delay: 100ms; } [data-reveal][data-delay="200"] { transition-delay: 200ms; } [data-reveal][data-delay="300"] { transition-delay: 300ms; } [data-reveal][data-delay="400"] { transition-delay: 400ms; } [data-reveal][data-delay="500"] { transition-delay: 500ms; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } [data-reveal] { opacity: 1; transform: none; } } /* ========== UTILITIES ========== */ .container-x { max-width: 1200px; margin: 0 auto; padding: 0 24px; } .container-tight { max-width: 1200px; margin: 0 auto; padding: 0 24px; } .glow-card { position: relative; overflow: hidden; } .glow-card::before { content: ""; position: absolute; top: var(--my, 50%); left: var(--mx, 50%); width: 300px; height: 300px; background: radial-gradient(circle, rgba(245, 180, 0, 0.25), transparent 70%); transform: translate(-50%, -50%); opacity: 0; transition: opacity var(--t-base); pointer-events: none; } .glow-card:hover::before { opacity: 1; } .bg-grid { background-image: linear-gradient(rgba(11, 42, 74, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(11, 42, 74, 0.06) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%); } .skip-link { position: absolute; top: -40px; left: 8px; background: var(--c-accent); color: var(--c-primary); padding: 8px 16px; border-radius: var(--radius-sm); font-weight: 600; z-index: 100; transition: top var(--t-fast); } .skip-link:focus { top: 8px; } /* ============ A11Y / CONTRAST FIXES (no visual change to design) ============ */ /* Boost contrast on transparent header by adding subtle text-shadow */ .site-header:not(.scrolled) .nav-link, .site-header:not(.scrolled) .logo-mark, .site-header:not(.scrolled) .logo-mark span { text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55), 0 0 4px rgba(0, 0, 0, 0.35); } .site-header:not(.scrolled) a[href^="tel:"] { text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55); font-weight: 700; } .site-header:not(.scrolled) { background: linear-gradient(180deg, rgba(11, 42, 74, 0.45), rgba(11, 42, 74, 0.0)); } /* Buttons ghost on dark hero get a slightly darker bg for AA contrast */ .hero-bg ~ .container-x .btn-ghost, section.relative.text-white .btn-ghost { background: rgba(0, 0, 0, 0.22); border-color: rgba(255, 255, 255, 0.4); } /* Footer "title" β€” replaces semantic h4 with visually identical div */ .footer-title { color: white; font-size: 1rem; margin-bottom: 18px; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } /* Lazy iframe placeholder (avoids layout shift) */ .iframe-lazy { background: linear-gradient(135deg, #0B2A4A 0%, #1E5BA8 100%); position: relative; } .iframe-lazy::after { content: "πŸ—ΊοΈ Carte interactive"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.7); font-size: 0.95rem; } .iframe-lazy.loaded::after { display: none; } /* ============ ARTICLE / GUIDES STYLES ============ */ .article-shell { max-width: 1120px; margin: 0 auto; padding: 0 24px; } .article-prose { color: var(--c-text-soft); } /* All article elements use the full shell width */ .article-prose > p, .article-prose > ul, .article-prose > ol, .article-prose > h2, .article-prose > h3, .article-prose > details, .article-prose > .author-card { max-width: 100%; } .article-prose h2 { margin-top: 3rem; margin-bottom: 1.25rem; font-size: clamp(1.7rem, 3vw, 2.2rem); line-height: 1.15; color: var(--c-primary); font-family: 'Outfit', system-ui, sans-serif; font-weight: 700; } .article-prose h3 { margin-top: 2rem; margin-bottom: 0.75rem; font-size: 1.3rem; color: var(--c-primary); font-family: 'Outfit', system-ui, sans-serif; font-weight: 700; } .article-prose p { margin-bottom: 1.1rem; line-height: 1.75; color: var(--c-text-soft); font-size: 1.05rem; } .article-prose ul, .article-prose ol { margin: 1rem auto 1.5rem; padding-left: 1.5rem; line-height: 1.7; color: var(--c-text-soft); } .article-prose li { margin-bottom: 0.5rem; } .article-prose strong { color: var(--c-primary); font-weight: 700; } .article-prose a:not(.btn) { color: var(--c-accent-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; } .article-prose a:not(.btn):hover { text-decoration-thickness: 2.5px; } /* Wide elements use the full shell width */ .article-prose > table, .article-prose > .callout, .article-prose > .article-cta, .article-prose > .toc, .article-prose > .related-articles { max-width: 100%; } .article-prose table { width: 100%; border-collapse: collapse; margin: 2rem 0; font-size: 0.95rem; box-shadow: var(--shadow-sm); border-radius: var(--radius-sm); overflow: hidden; background: white; } .article-prose thead { background: var(--c-primary); color: white; } .article-prose th { padding: 14px 16px; text-align: left; font-weight: 600; font-size: 0.9rem; color: white; } .article-prose td { padding: 14px 16px; border-bottom: 1px solid var(--c-border); background: white; } .article-prose tr:last-child td { border-bottom: 0; } .article-prose tr:nth-child(even) td { background: #fafaf7; } /* Callouts */ .callout { border-left: 4px solid var(--c-accent); background: #fff8e6; padding: 18px 24px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin: 1.75rem 0; color: var(--c-text); } .callout strong { color: var(--c-accent-2); } .callout-warning { border-left-color: #b91c1c; background: #fef2f2; } .callout-warning strong { color: #991b1b; } .callout-success { border-left-color: #047857; background: #ecfdf5; } .callout-success strong { color: #065f46; } /* TOC */ .toc { background: var(--c-bg-soft); border-radius: var(--radius); padding: 24px 28px; margin: 1rem 0 3rem; border: 1px solid var(--c-border); } .toc-title { font-family: 'Outfit', sans-serif; font-weight: 700; color: var(--c-primary); font-size: 0.95rem; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 14px; } .toc ol { margin: 0; padding: 0; counter-reset: toc; list-style: none; } .toc li { counter-increment: toc; margin-bottom: 8px; padding-left: 0; display: flex; gap: 12px; align-items: baseline; } .toc li::before { content: counter(toc, decimal-leading-zero) "."; color: var(--c-accent-2); font-weight: 700; font-family: 'Outfit', sans-serif; flex-shrink: 0; } /* Author E-E-A-T card */ .author-card { display: flex; gap: 18px; align-items: flex-start; padding: 24px; background: white; border: 1px solid var(--c-border); border-radius: var(--radius); margin: 2.5rem auto; box-shadow: var(--shadow-sm); } .author-avatar { width: 56px; height: 56px; flex-shrink: 0; border-radius: 50%; background: linear-gradient(135deg, var(--c-accent), var(--c-accent-2)); display: inline-flex; align-items: center; justify-content: center; } /* Related articles grid */ .related-articles { display: grid; gap: 18px; grid-template-columns: 1fr; margin-top: 1.5rem; } @media (min-width: 768px) { .related-articles { grid-template-columns: repeat(3, 1fr); } } /* Article CTA β€” fix contrast: explicit colors instead of inheriting --c-text-soft */ .article-cta { background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-600) 100%); color: white; padding: 32px; border-radius: var(--radius-lg); margin: 2.5rem 0; } .article-cta h3 { color: white !important; font-family: 'Outfit', system-ui, sans-serif; font-weight: 700; font-size: 1.5rem; margin-bottom: 0.75rem; } .article-cta p { color: rgba(255, 255, 255, 0.92) !important; margin-bottom: 1.25rem; font-size: 1.05rem; line-height: 1.7; } .article-cta strong { color: var(--c-accent) !important; font-weight: 700; } .article-cta a:not(.btn) { color: var(--c-accent) !important; text-decoration: underline; } /* ============ SOLAR BULLETS - article lists with mini sun bullet ============ */ .article-prose ul.solar-bullets, ul.solar-bullets { list-style: none; padding-left: 0; margin-left: 0; } .article-prose ul.solar-bullets li, ul.solar-bullets li { position: relative; padding-left: 32px; margin-bottom: 0.65rem; line-height: 1.6; } .article-prose ul.solar-bullets li::before, ul.solar-bullets li::before { content: ""; position: absolute; left: 0; top: 0.32em; width: 18px; height: 18px; background-image: url("data:image/svg+xml;utf8,"); background-size: contain; background-repeat: no-repeat; background-position: center; flex-shrink: 0; } /* Default