*,: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:Inter,ui-sans-serif,system-ui;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}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.relative{position:relative}.mb-1{margin-bottom:.25rem}.ml-1{margin-left:.25rem}.mr-1{margin-right:.25rem}.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.mt-8{margin-top:2rem}.mt-auto{margin-top:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.h-1\.5{height:.375rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-7{height:1.75rem}.h-8{height:2rem}.w-1\.5{width:.375rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-7{width:1.75rem}.w-8{width:2rem}.w-full{width:100%}.min-w-0{min-width:0}.max-w-2xl{max-width:42rem}.max-w-\[82\%\]{max-width:82%}.flex-1{flex:1 1 0%}.flex-shrink-0{flex-shrink:0}.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 bounce{0%,to{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,.2,1)}}.animate-bounce{animation:bounce 1s infinite}.flex-row-reverse{flex-direction:row-reverse}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.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))}.rounded-full{border-radius:9999px}.rounded-md{border-radius:.375rem}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.border-white\/5{border-color:hsla(0,0%,100%,.05)}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.p-1\.5{padding:.375rem}.p-2\.5{padding:.625rem}.p-4{padding:1rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-8{padding-left:2rem;padding-right:2rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.pb-20{padding-bottom:5rem}.pt-2{padding-top:.5rem}.pt-24{padding-top:6rem}.pt-32{padding-top:8rem}.text-right{text-align:right}.text-2xl{font-size:1.5rem;line-height:2rem}.text-\[10px\]{font-size:10px}.text-\[9px\]{font-size:9px}.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-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.italic{font-style:italic}.leading-relaxed{line-height:1.625}.tracking-wider{letter-spacing:.05em}.text-\[\#aaabb0\]{--tw-text-opacity:1;color:rgb(170 171 176/var(--tw-text-opacity,1))}.text-\[\#f6f6fc\]{--tw-text-opacity:1;color:rgb(246 246 252/var(--tw-text-opacity,1))}.underline{text-decoration-line:underline}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.opacity-0{opacity:0}.opacity-100{opacity:1}.shadow-2xl{--tw-shadow:0 25px 50px -12px rgba(0,0,0,.25);--tw-shadow-colored:0 25px 50px -12px 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{--tw-blur:blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-filter{-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.delay-200{transition-delay:.2s}[data-aos]{opacity:0;transform:translateY(32px);transition:opacity .7s ease,transform .7s ease}[data-aos].aos-visible{opacity:1;transform:translateY(0)}.hover\:opacity-90:hover{opacity:.9}.active\:scale-95:active{--tw-scale-x:.95;--tw-scale-y:.95;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))}@media (min-width:768px){.md\:p-6{padding:1.5rem}.md\:pt-32{padding-top:8rem}.md\:text-base{font-size:1rem;line-height:1.5rem}}/* ==========================================================================
   Variáveis Nativas Baseadas no Tema do Tailwind Original
   ========================================================================== */
   :root {
    --primary-dim: #2d6bf5;
    --primary: #8fabff;
    --primary-fixed: #7b9cff;
    --primary-container: #7b9cff;
    --on-primary: #002873;
    --on-primary-container: #001e5a;
    
    --secondary: #8b94ff;
    --secondary-dim: #8b94ff;
    --secondary-container: #313aa1;
    --on-secondary: #000478;

    --background: #0c0e12;
    --on-background: #f6f6fc;
    
    --surface-container-lowest: #000000;
    --surface-container-low: #111318;
    --surface-container: #171a1f;
    --surface-container-high: #1d2025;
    --surface-container-highest: #23262c;
    
    --on-surface: #f6f6fc;
    --on-surface-variant: #aaabb0;
    
    --outline: #74757a;
    --border-subtle: rgba(255, 255, 255, 0.05);

    --font-headline: 'Space Grotesk', sans-serif;
    --font-body: 'Manrope', sans-serif;
    --font-label: 'Inter', sans-serif;
}

/* ==========================================================================
   Reset & Base Styles
   ========================================================================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body { 
    width: 100%;
    overflow-x: hidden;
    scroll-behavior: smooth;
    position: relative;
}

body {
    background-color: var(--background);
    color: var(--on-background);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    background-image: radial-gradient(circle at 2px 2px, var(--surface-container-high) 1px, transparent 0);
    background-size: 40px 40px;
    line-height: 1.5;
}

h1, h2, h3, h4, h5, h6, .font-headline {
    font-family: var(--font-headline);
}

a {
    text-decoration: none;
    color: inherit;
}

button {
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    outline: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ==========================================================================
   Classes Utilitárias Semânticas
   ========================================================================== */
.hidden { display: none !important; }
.text-primary { color: var(--primary); }
.text-secondary { color: var(--secondary); }
.text-on-surface { color: var(--on-surface); }
.text-on-surface-variant { color: var(--on-surface-variant); }
.font-label { font-family: var(--font-label); }
.font-body { font-family: var(--font-body); }
.font-headline { font-family: var(--font-headline); }

/* Utility Classes para SVGs e Layout */
.w-4 { width: 1rem !important; }
.h-4 { height: 1rem !important; }
.w-5 { width: 1.25rem !important; }
.h-5 { height: 1.25rem !important; }
.w-6 { width: 1.5rem !important; }
.h-6 { height: 1.5rem !important; }
.p-1\.5 { padding: 0.375rem !important; }
.rounded-full { border-radius: 9999px !important; }
.flex-shrink-0 { flex-shrink: 0 !important; }
.transition-colors { transition-property: background-color, border-color, color, fill, stroke; transition-duration: 150ms; }
.animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.hover\:bg-surface-container:hover { background-color: var(--surface-container) !important; }
.text-xs { font-size: 0.75rem !important; }
.w-8 { width: 2rem !important; }
.h-8 { height: 2rem !important; }

/* Layout Utilities (Original Tailwind) */
.pt-24 { padding-top: 6rem !important; }
.pt-32 { padding-top: 8rem !important; }
.pb-20 { padding-bottom: 5rem !important; }
@media (min-width: 768px) {
    .md\:pt-32 { padding-top: 8rem !important; }
    .md\:pt-40 { padding-top: 10rem !important; }
}

/* ==========================================================================
   Layout Base
   ========================================================================== */
.container {
    max-width: 80rem; /* 1280px */
    margin: 0 auto;
    padding: 0 1.5rem;
}
@media (min-width: 768px) {
    .container { padding: 0 3rem; }
}
@media (min-width: 1280px) {
    .container { padding: 0 4rem; }
}

.glass-card {
    background: rgba(41, 44, 51, 0.4);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--border-subtle);
    border-radius: 0.75rem; 
}

/* ==========================================================================
   Componentes: Navegação (Navbar)
   ========================================================================== */
.hidden { display: none !important; }

.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 50;
    background-color: rgba(12, 14, 18, 0.9);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-bottom: 1px solid var(--border-subtle);
}

.navbar-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    max-width: 80rem;
    margin: 0 auto;
}
@media (min-width: 768px) {
    .navbar-inner { padding: 1rem 3rem; }
}
@media (min-width: 1280px) {
    .navbar-inner { padding: 1rem 4rem; }
}

.navbar-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.navbar-brand img { height: 1.75rem; }
@media (min-width: 768px) { .navbar-brand img { height: 2rem; } }

.navbar-brand-text {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.05em;
    color: var(--on-surface);
}
@media (min-width: 768px) { .navbar-brand-text { font-size: 1.5rem; } }

.nav-links {
    display: none;
    align-items: center;
    gap: 2rem;
}
@media (min-width: 1024px) { .nav-links { display: flex; } }

.nav-link {
    color: var(--on-surface-variant);
    font-family: var(--font-label);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.6875rem; /* 11px */
    transition: color 0.15s;
}
.nav-link:hover { color: var(--on-surface); }

.nav-badge-link {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    cursor: not-allowed;
}
.nav-badge-link span:first-child {
    color: rgba(170, 171, 176, 0.5);
    font-family: var(--font-label);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.6875rem;
}
.nav-badge-link span:last-child {
    padding: 0.125rem 0.375rem;
    background-color: var(--surface-container-highest);
    font-size: 0.5rem;
    font-weight: 700;
    color: var(--primary);
    border: 1px solid rgba(143, 171, 255, 0.2);
    border-radius: 0.25rem;
    text-transform: uppercase;
    letter-spacing: -0.05em;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}
@media (min-width: 768px) { .nav-actions { gap: 1.5rem; } }

/* Botões */
.btn-login {
    display: none;
    padding: 0.5rem 1rem;
    color: var(--primary-fixed);
    font-weight: 700;
    font-family: var(--font-body);
    transition: all 0.15s;
    border-radius: 0.375rem;
    font-size: 0.875rem;
}
.btn-login:hover { background-color: var(--surface-container-high); }
@media (min-width: 640px) { .btn-login { display: block; } }

.btn-primary {
    padding: 0.5rem 1rem;
    background: linear-gradient(to right, var(--primary), var(--primary-container));
    color: var(--on-primary-container);
    font-weight: 700;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    transition: all 0.15s;
    box-shadow: 0 10px 15px -3px rgba(143, 171, 255, 0.1);
}
@media (min-width: 768px) { .btn-primary { padding: 0.5rem 1.5rem; } }
.btn-primary:active { transform: scale(0.95); }

.btn-icon {
    padding: 0.5rem;
    color: var(--on-surface-variant);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-icon:hover { color: var(--on-surface); }
@media (min-width: 1024px) { .btn-icon.mobile-toggle { display: none; } }

/* ==========================================================================
   Componentes: Menu Mobile
   ========================================================================== */
.mobile-menu {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    width: 280px;
    z-index: 100;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    background-color: #0c0e12;
    border-left: 1px solid rgba(255,255,255,0.1);
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
}

@media (min-width: 1024px) { 
    .mobile-menu { display: none; } 
}

.mobile-menu.open {
    transform: translateX(0);
}

.mobile-menu-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 2rem;
}

.mobile-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3rem;
}

.mobile-menu-header span {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--on-surface);
}

.mobile-menu-header button {
    padding: 0.5rem;
    color: var(--on-surface);
}

.mobile-menu-nav {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.mobile-menu-nav a {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--on-surface);
}

.mobile-menu-nav a.disabled {
    color: var(--on-surface-variant);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.mobile-menu-nav a.disabled span {
    font-size: 0.625rem;
    background-color: rgba(143, 171, 255, 0.2);
    color: var(--primary);
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
}

.mobile-menu-divider {
    height: 1px;
    background-color: var(--border-subtle);
    margin: 1rem 0;
}

.mobile-menu-nav .text-primary {
    font-size: 1.25rem;
}

/* ==========================================================================
   Componentes: Hero Section
   ========================================================================== */
.hero-section {
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 1.5rem;
    margin-bottom: 5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
}
@media (min-width: 768px) {
    .hero-section { padding: 0 3rem; margin-bottom: 8rem; }
}
@media (min-width: 1280px) {
    .hero-section { padding: 0 4rem; }
}
@media (min-width: 1024px) {
    .hero-section { flex-direction: row; gap: 4rem; }
}

.hero-content {
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding-top: 2rem; /* Add extra breathing room requested */
}
@media (min-width: 1024px) {
    .hero-content { flex: 1; text-align: left; gap: 2rem; padding-top: 0; }
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    background-color: var(--surface-container-high);
    border-radius: 9999px;
    border: 1px solid rgba(70, 72, 77, 0.2);
    align-self: center;
}
@media (min-width: 1024px) { .hero-badge { align-self: flex-start; } }

.hero-badge-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background-color: var(--primary);
    box-shadow: 0 0 8px rgba(143, 171, 255, 0.8);
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.hero-badge-text {
    font-size: 0.625rem;
    font-family: var(--font-label);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--primary);
}

.hero-title {
    font-size: 2.25rem;
    line-height: 1.1;
    font-weight: 700;
    color: var(--on-surface);
    letter-spacing: -0.025em;
}
@media (min-width: 768px) { .hero-title { font-size: 3.75rem; } }
@media (min-width: 1024px) { .hero-title { font-size: 4.5rem; } }

.text-gradient {
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    background-image: linear-gradient(to right, var(--primary), #ef8fe5);
}

.hero-subtitle {
    font-size: 1.125rem;
    color: var(--on-surface-variant);
    line-height: 1.625;
    max-width: 36rem;
    margin: 0 auto;
}
@media (min-width: 768px) { .hero-subtitle { font-size: 1.25rem; } }
@media (min-width: 1024px) { .hero-subtitle { margin: 0; } }

.hero-actions {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
}
@media (min-width: 640px) { .hero-actions { flex-direction: row; } }
@media (min-width: 1024px) { .hero-actions { justify-content: flex-start; } }

.btn-large {
    width: 100%;
    padding: 1rem 2rem;
    font-size: 1.125rem;
    font-weight: 700;
    border-radius: 0.375rem;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
@media (min-width: 640px) { .btn-large { width: auto; } }

.btn-primary-large {
    background: linear-gradient(to right, var(--primary), var(--primary-container));
    color: var(--on-primary-container);
    box-shadow: 0 10px 15px -3px rgba(143, 171, 255, 0.1);
}
.btn-primary-large:active { transform: scale(0.95); }

.btn-outline-large {
    background: transparent;
    border: 1px solid rgba(70, 72, 77, 0.3);
    color: var(--on-surface);
}
.btn-outline-large:hover { background-color: rgba(255, 255, 255, 0.05); }

/* Hero Illustration / Mockup */
.hero-illustration {
    flex: 1;
    width: 100%;
    position: relative;
    overflow: hidden; /* Garantia que os brilhos não vazem lateralmente */
}

.mockup-card {
    background: rgba(41, 44, 51, 0.4);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--border-subtle);
    border-radius: 1rem;
    padding: 1.5rem;
    position: relative;
    z-index: 10;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    max-width: 28rem;
    margin: 0 auto;
}

.mockup-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid rgba(70, 72, 77, 0.2);
    padding-bottom: 1rem;
}

.mockup-avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    background-color: rgba(143, 171, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.mockup-name {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--on-surface);
}

.mockup-status {
    font-size: 0.625rem;
    color: var(--primary);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.status-dot {
    width: 0.375rem;
    height: 0.375rem;
    background-color: var(--primary);
    border-radius: 9999px;
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .5; }
}

.mockup-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    font-family: var(--font-body);
}

.msg-customer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 85%;
}

.msg-ai {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    max-width: 90%;
    margin-left: auto;
}

.whatsapp-bubble-left {
    background-color: #232d36;
    border-radius: 0 12px 12px 12px;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: var(--on-surface-variant);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.whatsapp-bubble-right {
    background-color: #056162;
    border-radius: 12px 0 12px 12px;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: white;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.msg-time {
    font-size: 0.5625rem;
    color: var(--on-surface-variant);
    margin-top: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.typing-indicator {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.625rem;
    color: var(--primary);
    font-weight: 500;
    padding-left: 0.25rem;
}

.typing-dots {
    display: flex;
    gap: 0.125rem;
}

.typing-dot {
    width: 0.25rem;
    height: 0.25rem;
    background-color: var(--primary);
    border-radius: 9999px;
    animation: bounce 1s infinite;
}
.delay-200 { animation-delay: 0.2s; }
.delay-400 { animation-delay: 0.4s; }

@keyframes bounce {
    0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8,0,1,1); }
    50% { transform: none; animation-timing-function: cubic-bezier(0,0,0.2,1); }
}

.ambient-glow {
    position: absolute;
    border-radius: 9999px;
    pointer-events: none;
}
.glow-primary {
    top: -5rem; right: -5rem;
    width: 16rem; height: 16rem;
    background-color: rgba(143, 171, 255, 0.2);
    filter: blur(100px);
}
.glow-tertiary {
    bottom: -5rem; left: -5rem;
    width: 20rem; height: 20rem;
    background-color: rgba(255, 180, 244, 0.1);
    filter: blur(120px);
}

/* ==========================================================================
   Componentes: Bento Grid Section
   ========================================================================== */
.section-bento {
    background-color: var(--surface-container-low);
    padding: 4rem 1.5rem;
}
@media (min-width: 768px) { .section-bento { padding: 6rem 3rem; } }
@media (min-width: 1280px) { .section-bento { padding: 6rem 4rem; } }

.container {
    max-width: 80rem;
    margin: 0 auto;
    width: 100%;
}

.section-header {
    display: flex;
    flex-direction: column;
    margin-bottom: 3rem;
    gap: 1.5rem;
}
@media (min-width: 768px) {
    .section-header {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-end;
        margin-bottom: 4rem;
        gap: 2rem;
    }
}

.section-label {
    font-size: 0.625rem;
    font-family: var(--font-label);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--primary);
    margin-bottom: 0.75rem;
}
@media (min-width: 768px) { .section-label { font-size: 0.875rem; margin-bottom: 1rem; } }

.section-title {
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--on-surface);
}
@media (min-width: 768px) { .section-title { font-size: 2.25rem; } }

.section-subtitle {
    font-size: 1rem;
    color: var(--on-surface-variant);
    max-width: 24rem;
}
@media (min-width: 768px) { .section-subtitle { font-size: 1.125rem; } }

.bento-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 768px) {
    .bento-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.5rem;
    }
}

.bento-card {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: border-color 0.15s;
}
.bento-card:hover { border-color: rgba(143, 171, 255, 0.3); }
@media (min-width: 768px) { .bento-card { padding: 2rem; } }

@media (min-width: 768px) { .bento-large { grid-column: span 2 / span 2; } }

.bento-gradient {
    background-image: linear-gradient(to bottom right, var(--surface-container-high), var(--surface-container));
}

.bento-icon {
    font-size: 1.875rem;
    margin-bottom: 1rem;
    color: var(--primary);
}
@media (min-width: 768px) { .bento-icon { font-size: 2.25rem; margin-bottom: 1.5rem; } }

.bento-card-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    font-family: var(--font-headline);
}
@media (min-width: 768px) { .bento-card-title { font-size: 1.5rem; margin-bottom: 1rem; } }

.bento-card-text {
    font-size: 0.875rem;
    color: var(--on-surface-variant);
    line-height: 1.625;
}
@media (min-width: 768px) { .bento-card-text { font-size: 1rem; } }

.bento-metric {
    margin-top: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}
@media (min-width: 768px) { .bento-metric { margin-top: 2rem; } }

.bento-metric-value {
    font-size: 2.25rem;
    font-weight: 800;
    color: rgba(143, 171, 255, 0.2);
    font-family: var(--font-headline);
}
@media (min-width: 768px) { .bento-metric-value { font-size: 3rem; } }

.bento-metric-label {
    font-size: 0.625rem;
    text-transform: uppercase;
    color: var(--on-surface-variant);
    letter-spacing: -0.05em;
    font-family: var(--font-label);
}
@media (min-width: 768px) { .bento-metric-label { font-size: 0.75rem; } }

.bento-progress {
    margin-top: 1.5rem;
}
@media (min-width: 768px) { .bento-progress { margin-top: 2rem; } }

.progress-track {
    height: 0.25rem;
    width: 100%;
    background-color: var(--surface-container-highest);
    border-radius: 9999px;
    overflow: hidden;
}
.progress-fill {
    height: 100%;
    background-color: var(--primary);
    width: 75%;
    border-radius: 9999px;
}
.progress-label {
    font-size: 0.5625rem;
    font-family: var(--font-label);
    text-transform: uppercase;
    color: var(--primary);
    margin-top: 0.5rem;
    display: block;
    letter-spacing: 0.1em;
}
@media (min-width: 768px) { .progress-label { font-size: 0.625rem; } }

/* ==========================================================================
   Componentes: Integrações / Workflow
   ========================================================================== */
.section-features {
    padding: 4rem 1.5rem;
    max-width: 80rem;
    margin: 0 auto;
    text-align: center;
}
@media (min-width: 768px) {
    .section-features { padding: 6rem 3rem; text-align: left; }
}
@media (min-width: 1280px) {
    .section-features { padding: 6rem 4rem; }
}

.features-container {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    align-items: center;
}
@media (min-width: 768px) {
    .features-container { flex-direction: row; gap: 4rem; }
}

.features-visual {
    flex: 1;
    width: 100%;
}
@media (min-width: 768px) { .features-visual { order: 1; } }

.features-visual-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.features-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
@media (min-width: 768px) { .features-content { order: 2; } }

.features-title {
    font-size: 2.25rem;
    line-height: 1.1;
    font-weight: 700;
    font-family: var(--font-headline);
}
@media (min-width: 768px) { .features-title { font-size: 3rem; } }

.features-description {
    font-size: 1.125rem;
    color: var(--on-surface-variant);
}

.features-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    list-style: none;
    padding: 0;
}
.features-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}
.features-list span.text-on-surface {
    color: var(--on-surface);
}
.features-list-icon {
    color: var(--primary);
    font-size: 1.25rem;
}

.btn-secondary {
    padding: 0.75rem 2rem;
    background-color: var(--surface-container-highest);
    border: 1px solid rgba(143, 171, 255, 0.2);
    color: var(--primary);
    font-weight: 700;
    border-radius: 0.375rem;
    transition: all 0.15s;
}
.btn-secondary:hover { background-color: var(--primary); color: var(--on-primary); }

/* Integrações mini-cards */
.mini-card {
    padding: 1.5rem;
    border-radius: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.mini-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.icon-box {
    padding: 0.5rem;
    border-radius: 0.5rem;
}
.icon-box-primary { background-color: rgba(143, 171, 255, 0.1); }
.icon-box-tertiary { background-color: rgba(255, 180, 244, 0.1); }

.mini-card-time {
    font-size: 0.625rem;
    font-family: var(--font-label);
    color: var(--on-surface-variant);
}

.mini-card-text {
    font-size: 0.875rem;
    color: var(--on-surface);
}

.mini-card-text-italic { font-style: italic; }
.mini-card-bold { font-weight: 700; }

.mini-card-tag {
    padding: 0.5rem;
    background-color: rgba(143, 171, 255, 0.2);
    border-radius: 0.5rem;
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--primary);
    text-align: center;
}

/* ==========================================================================
   Componentes: CTA Section
   ========================================================================== */
.section-cta {
    padding: 5rem 0;
    background-image: linear-gradient(to bottom, var(--background), var(--surface-container-low));
    position: relative;
    overflow: hidden;
}
@media (min-width: 768px) { .section-cta { padding: 8rem 0; } }

.cta-container {
    max-width: 56rem;
    margin: 0 auto;
    padding: 0 1rem;
    text-align: center;
    position: relative;
    z-index: 10;
}

.cta-title {
    font-size: 1.875rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    letter-spacing: -0.025em;
    color: var(--on-surface);
    font-family: var(--font-headline);
}
@media (min-width: 768px) { .cta-title { font-size: 3rem; margin-bottom: 2rem; } }
@media (min-width: 1024px) { .cta-title { font-size: 3.75rem; } }

.cta-subtitle {
    font-size: 1.25rem;
    color: var(--on-surface-variant);
    margin-bottom: 3rem;
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
    font-family: var(--font-body);
}

.cta-actions {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
}
@media (min-width: 640px) { .cta-actions { flex-direction: row; } }

.btn-cta {
    padding: 1.25rem 3rem;
    background: linear-gradient(to right, var(--primary), var(--primary-container));
    color: var(--on-primary-container);
    font-weight: 800;
    border-radius: 0.375rem;
    font-size: 1.25rem;
    box-shadow: 0 25px 50px -12px rgba(143, 171, 255, 0.2);
    transition: all 0.15s;
    display: inline-block;
}
.btn-cta:active { transform: scale(0.95); }

.cta-deco-line {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background-image: linear-gradient(to right, transparent, rgba(143, 171, 255, 0.2), transparent);
}
.cta-deco-dot-1 {
    position: absolute;
    top: 50%;
    left: 25%;
    width: 0.25rem;
    height: 0.25rem;
    background-color: var(--primary);
    border-radius: 9999px;
    box-shadow: 0 0 15px rgba(143, 171, 255, 1);
}
.cta-deco-dot-2 {
    position: absolute;
    top: 50%;
    left: 75%;
    width: 0.25rem;
    height: 0.25rem;
    background-color: #ef8fe5;
    border-radius: 9999px;
    box-shadow: 0 0 15px rgba(255, 180, 244, 1);
}

/* ==========================================================================
   Componentes: Chat Widget
   ========================================================================== */
.chat-widget-container {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem; /* Removido o max() para evitar ambiguidades no mobile */
    z-index: 60;
    max-width: calc(100vw - 3rem); /* Previne que o widget seja maior que a tela */
}

.chat-tooltip {
    position: absolute;
    bottom: 100%;
    right: 0;
    margin-bottom: 0.75rem;
    padding: 1rem;
    text-align: left;
    width: 14rem;
    transition: all 0.3s;
}
.chat-tooltip p {
    font-size: 0.75rem;
    font-family: var(--font-body);
    color: var(--on-surface);
    margin-bottom: 0.75rem;
}

.chat-backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(12, 14, 18, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 55;
    transition: opacity 0.3s;
}
.chat-backdrop.hidden { display: none !important; }

.chat-panel {
    position: fixed;
    top: 4%; bottom: 4%; left: 4%; right: 4%;
    z-index: 60;
    background-color: #0c0e12;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
}
@media (min-width: 768px) {
    .chat-panel {
        position: absolute;
        inset: auto;
        bottom: 5rem;
        right: 0;
        width: 20rem;
        height: 480px;
        max-height: 70vh;
    }
}

.chat-panel-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: rgba(23, 26, 31, 0.98);
    border-bottom: 1px solid rgba(70,72,77,0.2);
    flex-shrink: 0;
}
.chat-panel-avatar {
    width: 2.25rem; height: 2.25rem;
    border-radius: 9999px;
    background-color: rgba(143, 171, 255, 0.1);
    border: 1px solid rgba(143, 171, 255, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.chat-panel-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--on-surface);
    font-family: var(--font-headline);
}
.chat-panel-status {
    font-size: 0.625rem;
    color: var(--primary);
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-family: var(--font-label);
}

.chat-panel-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    background-color: #0c0e12;
    font-family: var(--font-body);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.chat-bubble-ai {
    background-color: #1d2025;
    border-radius: 0 12px 12px 12px;
    padding: 0.625rem 0.75rem;
    font-size: 0.875rem;
    color: var(--on-surface-variant);
}
.chat-bubble-user {
    background-color: #056162;
    border-radius: 12px 0 12px 12px;
    padding: 0.625rem 0.75rem;
    font-size: 0.875rem;
    color: white;
}
.chat-msg-time {
    font-size: 0.5625rem;
    color: var(--on-surface-variant);
    margin-top: 0.25rem;
    display: block;
}

.chat-panel-input-area {
    padding: 0.625rem 0.75rem;
    background: rgba(23, 26, 31, 0.98);
    border-top: 1px solid rgba(70,72,77,0.2);
    flex-shrink: 0;
}
.chat-input-form {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.chat-input-field {
    flex: 1;
    background: rgba(29, 32, 37, 0.9);
    border: 1px solid rgba(70,72,77,0.4);
    color: var(--on-surface);
    font-size: 1rem;
    padding: 0.5rem 0.75rem;
    border-radius: 9999px;
    outline: none;
    font-family: var(--font-body);
}

.chat-toggle-btn {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary), #2d6bf5);
    box-shadow: 0 8px 30px rgba(143, 171, 255, 0.3);
    transition: all 0.2s;
    position: relative;
    cursor: pointer;
    border: none;
}
.chat-toggle-btn:hover { transform: scale(1.1); }
.chat-toggle-btn:active { transform: scale(0.95); }
.chat-toggle-icon { 
    color: var(--on-primary); 
    display: flex;
    align-items: center;
    justify-content: center;
}
.chat-toggle-icon svg {
    width: 1.5rem;
    height: 1.5rem;
}

.chat-badge {
    position: absolute;
    top: -0.25rem;
    right: -0.25rem;
    display: flex;
    width: 1rem;
    height: 1rem;
}
.chat-badge-ping {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 9999px;
    background-color: var(--primary);
    opacity: 0.75;
    animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.chat-badge-dot {
    position: relative;
    width: 1rem;
    height: 1rem;
    border-radius: 9999px;
    background-color: var(--primary);
    border: 2px solid #0c0e12;
}

@keyframes ping {
    75%, 100% { transform: scale(2); opacity: 0; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer {
    width: 100%;
    padding-top: 4rem;
    padding-bottom: 3rem;
    background-color: #06090f;
    border-top: 1px solid rgba(70, 72, 77, 0.15);
}
.footer-container {
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 1.5rem;
}
@media (min-width: 768px) { .footer-container { padding: 0 3rem; } }
@media (min-width: 1280px) { .footer-container { padding: 0 4rem; } }

.footer-grid {
    display: grid;
    gap: 3rem;
    margin-bottom: 3rem;
}
@media (min-width: 768px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.footer-brand-col {
    grid-column: span 1;
}
@media (min-width: 1024px) { .footer-brand-col { grid-column: span 2 / span 2; } }

.footer-logo {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 1.5rem;
}
.footer-logo-text {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--on-surface);
    font-family: var(--font-headline);
}

.footer-info {
    color: var(--on-surface-variant);
    font-size: 0.875rem;
    font-family: var(--font-body);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.footer-label {
    color: var(--on-surface);
    font-weight: 700;
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 1.5rem;
    font-family: var(--font-label);
}

.footer-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    color: var(--on-surface-variant);
    font-size: 0.875rem;
    font-family: var(--font-body);
}
.footer-links a, .footer-links button {
    color: inherit;
    transition: color 0.15s;
    text-decoration: none;
    background: none; border: none; cursor: pointer; padding: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.footer-links a:hover, .footer-links button:hover {
    color: var(--primary);
}

.footer-bottom {
    padding-top: 2rem;
    border-top: 1px solid rgba(70, 72, 77, 0.15);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
@media (min-width: 768px) { .footer-bottom { flex-direction: row; } }

.footer-bottom p {
    font-size: 0.625rem;
    font-family: var(--font-label);
    color: rgba(170, 171, 176, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0;
}

/* ==========================================================================
   Privacy Modal
   ========================================================================== */
.modal-layer {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.modal-layer.hidden { display: none !important; }

.modal-backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.modal-card {
    position: relative;
    width: 100%;
    max-width: 56rem;
    max-height: 90vh;
    background-color: #111318;
    border: 1px solid rgba(70, 72, 77, 0.3);
    border-radius: 1rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.modal-header {
    padding: 2rem 2rem 1rem 2rem;
    border-bottom: 1px solid rgba(70, 72, 77, 0.2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.modal-icon {
    width: 2.5rem; height: 2.5rem;
    border-radius: 0.75rem;
    background: linear-gradient(to bottom right, var(--primary), var(--primary-container));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--on-primary-container);
}

.modal-content {
    flex-grow: 1;
    overflow-y: auto;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}
@media (min-width: 768px) { .modal-content { padding: 3rem; } }

.modal-footer {
    padding: 2rem;
    border-top: 1px solid rgba(70, 72, 77, 0.2);
    background: rgba(17, 19, 24, 0.9);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.modal-section-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--on-surface);
    font-family: var(--font-headline);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.modal-section-num {
    width: 2rem; height: 2rem;
    border-radius: 0.5rem;
    background-color: var(--primary);
    color: var(--on-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 900;
    flex-shrink: 0;
}

.modal-text {
    color: var(--on-surface-variant);
    line-height: 1.625;
    font-family: var(--font-body);
}

.modal-grid {
    display: grid;
    gap: 1rem;
    margin-top: 1rem;
}
@media (min-width: 768px) { .modal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.modal-grid-card {
    padding: 1.25rem;
    border-radius: 0.75rem;
    background: rgba(29, 32, 37, 0.8);
    border: 1px solid rgba(70, 72, 77, 0.2);
}
.modal-grid-card-title {
    color: var(--primary);
    font-weight: 700;
    display: block;
    margin-bottom: 0.25rem;
    font-family: var(--font-body);
}
.modal-grid-card-text {
    color: var(--on-surface-variant);
    font-size: 0.875rem;
    font-family: var(--font-body);
}