*, :before, :after
{
    --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: rgb(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: rgb(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: ;
}
*, :before, :after
{
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: #e5e7eb;
}
:before, :after
{
    --tw-content: "";
}
html, :host
{
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    font-family: ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";
    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, samp, pre
{
    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, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre
{
    margin: 0;
}
fieldset
{
    margin: 0;
    padding: 0;
}
legend
{
    padding: 0;
}
ol, ul, menu
{
    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;
}
button, [role=button]
{
    cursor: pointer;
}
:disabled
{
    cursor: default;
}
img, svg, video, canvas, audio, iframe, embed, object
{
    display: block;
    vertical-align: middle;
}
img, video
{
    max-width: 100%;
    height: auto;
}
[hidden]:where(:not([hidden=until-found]))
{
    display: none;
}
.box-content
{
    box-sizing: content-box;
}
.grid
{
    display: grid;
}
.h-4
{
    height: 1rem;
}
.h-5
{
    height: 1.25rem;
}
.h-6
{
    height: 1.5rem;
}
.h-8
{
    height: 2rem;
}
.w-4
{
    width: 1rem;
}
.w-5
{
    width: 1.25rem;
}
.w-6
{
    width: 1.5rem;
}
.w-8
{
    width: 2rem;
}
.transform
{
    transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(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;
}
.object-contain
{
    -o-object-fit: contain;
    object-fit: contain;
}
.ring-1
{
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);
}
.ring-2
{
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);
}
:root
{
    --primary-blue: #0e4dfe;
    --dark-blue: #040247;
    --glass-bg: rgba(255,255,255,.05);
    --glass-border: rgba(255,255,255,.1);
    --glass-shadow: rgba(0,0,0,.3);
    --mobile-menu-bg: rgba(4,2,71,.95);
    --mobile-menu-border: rgba(14,77,254,.3);
    --navbar-height: 80px;
    --navbar-height-mobile: 70px;
    --surface: #111;
    --c: white;
    --c2: #9ae3dc;
    --c3: magenta;
}
@layer properties{@property --elh{syntax:"<number>";inherits:true;initial-value:1;}@property --erx{syntax:"<percentage>";inherits:true;initial-value:0%;}@property --fx{syntax:"<percentage>";inherits:true;initial-value:0%;}@property --ealw{syntax:"<number>";inherits:true;initial-value:1;}@property --earw{syntax:"<number>";inherits:true;initial-value:1;}@property --erh{syntax:"<number>";inherits:true;initial-value:1;}@property --mh{syntax:"<number>";inherits:true;initial-value:1;}@property --mw{syntax:"<number>";inherits:true;initial-value:1;}}
*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html
{
    scroll-behavior: smooth;
}
body
{
    font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;
    background: linear-gradient(135deg,var(--dark-blue) 0%,#000 50%,var(--primary-blue) 100%);
    color: #fff;
    overflow-x: hidden;
}
*
{
    will-change: auto;
}
.grid-background, .floating-nav, .hero-content
{
    will-change: transform;
}
.ai-bot
{
    scale: 4.2;
    width: 34px;
    aspect-ratio: 1;
    position: relative;
    display: grid;
    place-items: center;
    margin: 2rem auto;
    animation: blink 2.4s ease infinite,move-head 4.2s linear(0 0%,0 2.27%,.02 4.53%,.04 6.8%,.06 9.07%,.1 11.33%,.14 13.6%,.25 18.15%,.39 22.7%,.56 27.25%,.77 31.8%,1 36.35%,.89 40.9%,.85 43.18%,.81 45.45%,.79 47.72%,.77 50%,.75 52.27%,.75 54.55%,.75 56.82%,.77 59.1%,.79 61.38%,.81 63.65%,.85 65.93%,.89 68.2%,1 72.7%,.97 74.98%,.95 77.25%,.94 79.53%,.94 81.8%,.94 84.08%,.95 86.35%,.97 88.63%,1 90.9%,.99 93.18%,.98 95.45%,.99 97.73%,1 100%) infinite,mouth 1.2s ease-in infinite;
}
.ai-bot .head
{
    background: linear-gradient(var(--c) 80%,color-mix(in srgb,var(--c),#000 30%),var(--c));
    border-radius: .375rem;
    position: absolute;
    width: 28px;
    height: 20px;
}
.ai-bot .head:before, .ai-bot .head:after
{
    content: "";
    position: absolute;
    left: -4px;
    top: 6px;
    width: 2px;
    height: 8px;
    background: var(--c,1);
    border-radius: 2px 0 0 2px;
    scale: var(--ealw,1) 1;
}
.ai-bot .head:after
{
    right: -4px;
    left: unset;
    border-radius: 0 2px 2px 0;
    scale: var(--earw,1) 1;
}
.ai-bot .face
{
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    top: 0;
    right: 3px;
    bottom: 0;
    left: 3px;
    background: var(--surface);
    translate: var(--fx) 0;
    border-radius: 4px;
    padding: 4px 4px 2px;
    gap: 3px;
}
.ai-bot .face:before
{
    content: "";
    background: var(--c);
    position: absolute;
    height: 1px;
    width: 10px;
    top: -2px;
    border-radius: 2px 2px 0 0;
    -webkit-mask: radial-gradient(circle at 50% 100%,transparent 45%,black 45%);
    mask: radial-gradient(circle at 50% 100%,transparent 45%,black 45%);
}
.ai-bot .eyes
{
    display: flex;
    height: 8px;
    gap: 6px;
}
.ai-bot .eyes:before, .ai-bot .eyes:after
{
    content: "";
    width: 5px;
    height: 8px;
    scale: 1 var(--elh);
    filter: drop-shadow(0 0 2px var(--c2));
    background: repeating-linear-gradient(to bottom,var(--c),var(--c) .25px,transparent .25px,transparent .6px),linear-gradient(to bottom,var(--c3),transparent 60%),var(--c2);
    border-radius: 1px;
    translate: var(--erx) 0;
}
.ai-bot .eyes:after
{
    scale: 1 var(--erh);
    translate: var(--erx) 0;
}
.ai-bot .mouth
{
    width: 10px;
    height: 2px;
    background: var(--c2);
    border-radius: 0 0 1px 1px;
    filter: drop-shadow(0 0 2px var(--c2));
    scale: var(--mw,1) var(--mh,1);
}
@layer animations{@keyframes blink{0%,10%,to{--elh:1;--erh:1}2%{--elh:.2}8%{--erh:.1}}@keyframes mouth{0%,30%,70%,to{--mh:1;--mw:1}20%{--mh:.5}60%{--mw:.7}}@keyframes move-head{0%,20%,40%,to{--erx:0%;--fx:0%;--ealw:1;--earw:1}10%{--erx:20%;--fx:10%;--ealw:1.5;--earw:.5}30%{--erx:-20%;--fx:-10%;--ealw:.5;--earw:1.5}}}
.grid-background
{
    position: fixed;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    z-index: -1;
    pointer-events: none;
    transform-style: preserve-3d;
}
.grid-layer-1, .grid-layer-2, .grid-layer-3
{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(rgba(14,77,254,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(14,77,254,.1) 1px,transparent 1px);
    animation: gridFlow 20s linear infinite;
}
.grid-layer-1
{
    background-size: 50px 50px;
    animation-delay: 0s;
    transform: translateZ(0);
}
.grid-layer-2
{
    background-size: 100px 100px;
    animation-delay: -5s;
    transform: translateZ(-100px);
    opacity: .5;
}
.grid-layer-3
{
    background-size: 200px 200px;
    animation-delay: -10s;
    transform: translateZ(-200px);
    opacity: .3;
}
@keyframes gridFlow
{
    0%
    {
        transform: translate(0) rotateX(0);
    }
    to
    {
        transform: translate(-50px,-50px) rotateX(5deg);
    }
}
.glass-effect
{
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    box-shadow: 0 8px 32px var(--glass-shadow);
}
.double-layer
{
    position: relative;
}
.double-layer:before
{
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    background: linear-gradient(135deg,#0e4dfe4d,#0402474d);
    z-index: -1;
    border-radius: inherit;
}
.double-layer:after
{
    content: "";
    position: absolute;
    top: 1px;
    left: 1px;
    right: 1px;
    bottom: 1px;
    background: #0000001a;
    z-index: -1;
    border-radius: inherit;
}
.app-container
{
    min-height: 100vh;
    position: relative;
}
.floating-nav
{
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translate(-50%);
    z-index: 1000;
    border-radius: 50px;
    padding: 12px 24px;
    transition: all .3s cubic-bezier(.4,0,.2,1);
    width: auto;
    max-width: 90vw;
    height: var(--navbar-height);
    display: flex;
    align-items: center;
}
.nav-container
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
.nav-logo
{
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 1.1rem;
}
.nav-links
{
    display: flex;
    align-items: center;
    gap: 1.5rem;
}
.desktop-nav
{
    display: flex;
}
.nav-link
{
    color: #fffc;
    text-decoration: none;
    font-weight: 500;
    transition: all .3s cubic-bezier(.4,0,.2,1);
    padding: 8px 16px;
    border-radius: 20px;
}
.nav-link:hover
{
    color: #fff;
    background: #ffffff1a;
    transform: translateY(-1px);
}
.nav-cta
{
    background: linear-gradient(135deg,var(--primary-blue),#6366f1);
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 25px;
    font-weight: 600;
    cursor: pointer;
    transition: all .3s cubic-bezier(.4,0,.2,1);
}
.nav-cta:hover
{
    transform: translateY(-2px);
    box-shadow: 0 10px 30px #0e4dfe66;
}
.mobile-menu-button
{
    display: none;
    background: #0e4dfe33;
    border: 1px solid rgba(14,77,254,.4);
    color: #fff;
    cursor: pointer;
    padding: 10px;
    border-radius: 12px;
    transition: all .3s cubic-bezier(.4,0,.2,1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.mobile-menu-button:hover
{
    background: #0e4dfe4d;
    border-color: #0e4dfe99;
    transform: scale(1.05);
}
.mobile-nav
{
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 10px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-20px);
    transition: all .3s cubic-bezier(.4,0,.2,1);
    z-index: 999;
}
.mobile-nav-open
{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.mobile-nav-content
{
    background: var(--mobile-menu-bg);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 2px solid var(--mobile-menu-border);
    border-radius: 20px;
    padding: 25px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    box-shadow: 0 20px 60px #00000080;
    position: relative;
}
.mobile-nav-content:before
{
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(135deg,#0e4dfe66,#04024799);
    z-index: -1;
    border-radius: inherit;
}
.mobile-nav-link
{
    color: #ffffffe6;
    text-decoration: none;
    font-weight: 500;
    padding: 15px 20px;
    border-radius: 12px;
    transition: all .3s cubic-bezier(.4,0,.2,1);
    text-align: center;
    background: #ffffff0d;
    border: 1px solid rgba(255,255,255,.1);
}
.mobile-nav-link:hover
{
    color: #fff;
    background: #0e4dfe4d;
    border-color: #0e4dfe80;
    transform: translateY(-2px);
}
.mobile-nav-cta
{
    background: linear-gradient(135deg,var(--primary-blue),#6366f1);
    color: #fff;
    border: none;
    padding: 15px 20px;
    border-radius: 25px;
    font-weight: 600;
    cursor: pointer;
    transition: all .3s cubic-bezier(.4,0,.2,1);
    width: 100%;
    font-size: 1rem;
    box-shadow: 0 5px 20px #0e4dfe4d;
}
.mobile-nav-cta:hover
{
    transform: translateY(-3px);
    box-shadow: 0 10px 30px #0e4dfe80;
}
@media(max-width: 768px)
{
    .desktop-nav
    {
        display: none;
    }
    .mobile-menu-button
    {
        display: block;
    }
    .floating-nav
    {
        padding: 8px 16px;
        left: 1rem;
        right: 1rem;
        transform: none;
        max-width: none;
        width: auto;
        height: var(--navbar-height-mobile);
    }
}
.hero-section
{
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 5%;
    position: relative;
    padding-top: calc(var(--navbar-height) + 40px);
    text-align: center;
}
.hero-content
{
    max-width: 800px;
    z-index: 10;
}
.hero-badge
{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 25px;
    font-size: .9rem;
    font-weight: 500;
    margin-bottom: 2rem;
    animation: fadeInUp 1s cubic-bezier(.4,0,.2,1) .2s both;
}
.hero-title
{
    font-size: clamp(2.5rem,6vw,4rem);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg,#fff,#ffffffb3);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: fadeInUp 1s cubic-bezier(.4,0,.2,1) .4s both;
}
.title-line
{
    display: block;
}
.title-subtitle
{
    display: block;
    font-size: .6em;
    font-weight: 400;
    color: #fffc;
    margin-top: .5rem;
}
.hero-description
{
    font-size: 1.2rem;
    line-height: 1.6;
    color: #fffc;
    margin-bottom: 2.5rem;
    animation: fadeInUp 1s cubic-bezier(.4,0,.2,1) .6s both;
}
.hero-actions
{
    display: flex;
    gap: 1rem;
    animation: fadeInUp 1s cubic-bezier(.4,0,.2,1) .8s both;
    justify-content: center;
}
.primary-button, .secondary-button
{
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 1rem;
    border: none;
    cursor: pointer;
    transition: all .3s cubic-bezier(.4,0,.2,1);
    text-decoration: none;
}
.primary-button
{
    background: linear-gradient(135deg,var(--primary-blue),#6366f1);
    color: #fff;
}
.primary-button:hover
{
    transform: translateY(-3px);
    box-shadow: 0 15px 40px #0e4dfe66;
}
.secondary-button
{
    color: #fff;
    border: 2px solid rgba(255,255,255,.2);
}
.secondary-button:hover
{
    transform: translateY(-3px);
    border-color: #fff6;
}
.glass-button
{
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
}
.scroll-indicator
{
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translate(-50%);
    color: #fff9;
}
.section-container
{
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}
.section-header
{
    text-align: center;
    margin-bottom: 4rem;
}
.section-icon
{
    margin: 0 auto 1.5rem;
}
.section-title
{
    font-size: clamp(2rem,5vw,3rem);
    font-weight: 700;
    margin-bottom: 1rem;
    background: linear-gradient(135deg,#fff,#ffffffb3);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.section-title.centered
{
    text-align: center;
}
.section-subtitle
{
    font-size: 1.2rem;
    color: #ffffffb3;
    line-height: 1.6;
    max-width: 600px;
}
.section-subtitle.centered
{
    margin: 0 auto;
    text-align: center;
}
.what-section
{
    padding: 8rem 0;
    position: relative;
}
.content-grid
{
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(350px,1fr));
    gap: 2rem;
    margin-top: 3rem;
}
.content-card
{
    padding: 2rem;
    border-radius: 20px;
    transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.content-card:hover
{
    transform: translateY(-10px);
}
.card-inner h3
{
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #fff;
}
.card-inner p
{
    color: #fffc;
    line-height: 1.6;
}
.what-illustration
{
    position: relative;
    width: 300px;
    height: 200px;
    margin: 0 auto 2rem;
}
.ai-brain-network
{
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.brain-center
{
    position: relative;
    width: 80px;
    height: 80px;
}
.neural-core
{
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg,var(--primary-blue),#6366f1);
    border-radius: 50%;
    position: absolute;
    top: 10px;
    left: 10px;
    box-shadow: 0 0 30px #0e4dfe99;
    animation: neuralPulse 2s ease-in-out infinite;
}
.synapses
{
    position: absolute;
    width: 100%;
    height: 100%;
}
.synapse
{
    position: absolute;
    width: 8px;
    height: 8px;
    background: #0e4dfecc;
    border-radius: 50%;
    animation: synapseFire 1.5s ease-in-out infinite;
}
.synapse-1
{
    top: 0;
    left: 36px;
    animation-delay: 0s;
}
.synapse-2
{
    right: 0;
    top: 36px;
    animation-delay: .3s;
}
.synapse-3
{
    bottom: 0;
    left: 36px;
    animation-delay: .6s;
}
.synapse-4
{
    left: 0;
    top: 36px;
    animation-delay: .9s;
}
.neural-pathways
{
    position: absolute;
    width: 100%;
    height: 100%;
}
.pathway
{
    position: absolute;
    background: linear-gradient(90deg,transparent,rgba(14,77,254,.4),transparent);
    height: 2px;
    animation: pathwayFlow 3s ease-in-out infinite;
}
.pathway-1
{
    top: 30%;
    left: 0;
    width: 100px;
    transform: rotate(30deg);
}
.pathway-2
{
    top: 50%;
    right: 0;
    width: 120px;
    transform: rotate(-45deg);
}
.pathway-3
{
    bottom: 30%;
    left: 50px;
    width: 80px;
    transform: rotate(60deg);
}
.code-particles
{
    position: absolute;
    width: 100%;
    height: 100%;
}
.particle
{
    position: absolute;
    color: #0e4dfecc;
    font-weight: 700;
    font-size: 14px;
    animation: particleFloat 4s ease-in-out infinite;
}
.particle-1
{
    top: 10%;
    left: 10%;
    animation-delay: 0s;
}
.particle-2
{
    top: 20%;
    right: 10%;
    animation-delay: 1s;
}
.particle-3
{
    bottom: 20%;
    left: 20%;
    animation-delay: 2s;
}
.particle-4
{
    bottom: 10%;
    right: 20%;
    animation-delay: 3s;
}
.features-section
{
    padding: 8rem 0;
    background: radial-gradient(ellipse at center,rgba(14,77,254,.1) 0%,transparent 70%);
}
.features-header
{
    text-align: center;
    margin-bottom: 4rem;
}
.features-illustration
{
    position: relative;
    width: 600px;
    height: 400px;
    margin: 0 auto 2rem;
}
.box-ecosystem
{
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.central-box
{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 120px;
    height: 80px;
    z-index: 20;
}
.central-box .box-content
{
    width: 100%;
    height: 100%;
    background: #0e4dfe26;
    border: 2px solid rgba(14,77,254,.6);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #fff;
    position: relative;
    z-index: 2;
    animation: centralBoxPulse 3s ease-in-out infinite;
}
.central-box .box-glow
{
    position: absolute;
    width: 130px;
    height: 90px;
    background: radial-gradient(ellipse,rgba(14,77,254,.3) 0%,transparent 70%);
    border-radius: 15px;
    top: -5px;
    left: -5px;
    animation: centralGlow 2s ease-in-out infinite;
}
.feature-boxes
{
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 15;
}
.feature-box
{
    position: absolute;
    width: 100px;
    height: 70px;
    animation: featureBoxFloat 4s ease-in-out infinite;
}
.feature-box .box-content
{
    width: 100%;
    height: 100%;
    background: #0e4dfe1a;
    border: 2px solid rgba(14,77,254,.4);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #fff;
    position: relative;
    z-index: 2;
    transition: all .3s ease;
}
.feature-box:hover .box-content
{
    border-color: #0e4dfecc;
    background: #0e4dfe33;
    transform: scale(1.05);
}
.feature-box .box-glow
{
    position: absolute;
    width: 110px;
    height: 80px;
    background: radial-gradient(ellipse,rgba(14,77,254,.2) 0%,transparent 70%);
    border-radius: 12px;
    top: -5px;
    left: -5px;
    animation: featureGlow 3s ease-in-out infinite;
}
.box-label
{
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    line-height: 1.2;
    color: #fffffff2;
}
.box-ai
{
    top: 8%;
    left: 8%;
    animation-delay: 0s;
}
.box-hub
{
    top: 8%;
    right: 8%;
    animation-delay: 1s;
}
.box-deploy
{
    bottom: 8%;
    left: 8%;
    animation-delay: 2s;
}
.box-guard
{
    bottom: 8%;
    right: 8%;
    animation-delay: 3s;
}
.integration-labels
{
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 10;
}
.integration-label
{
    position: absolute;
    background: #0e4dfe1a;
    border: 1px solid rgba(14,77,254,.3);
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 9px;
    color: #ffffffe6;
    font-weight: 500;
    animation: labelFloat 3s ease-in-out infinite;
}
.label-1
{
    top: 2%;
    left: 15%;
    animation-delay: 0s;
}
.label-2
{
    top: 5%;
    right: 10%;
    animation-delay: 1s;
}
.label-3
{
    bottom: 5%;
    right: 15%;
    animation-delay: 2s;
}
.label-4
{
    bottom: 2%;
    left: 10%;
    animation-delay: 3s;
}
.features-grid
{
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
    gap: 2rem;
    margin-top: 3rem;
}
.feature-card
{
    padding: 2rem;
    border-radius: 20px;
    transition: all .3s cubic-bezier(.4,0,.2,1);
    position: relative;
    overflow: hidden;
}
.feature-card:hover
{
    transform: translateY(-10px);
}
.feature-card:before
{
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);
    transition: left .5s cubic-bezier(.4,0,.2,1);
}
.feature-card:hover:before
{
    left: 100%;
}
.feature-header
{
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.feature-icon-wrapper
{
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg,var(--primary-blue),#6366f1);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.feature-icon
{
    width: 28px;
    height: 28px;
    color: #fff;
}
.feature-header h3
{
    font-size: 1.5rem;
    font-weight: 600;
    color: #fffffff2;
}
.feature-content p
{
    color: #ffffffd9;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}
.feature-list
{
    display: flex;
    flex-direction: column;
    gap: .75rem;
}
.feature-item
{
    display: flex;
    align-items: center;
    gap: .75rem;
    color: #ffffffe6;
    font-weight: 500;
}
.feature-item svg
{
    color: var(--primary-blue);
}
.gridvm-section
{
    padding: 8rem 0;
    background: radial-gradient(ellipse at center,rgba(14,77,254,.08) 0%,transparent 70%);
    position: relative;
}
.gridvm-header
{
    text-align: center;
    margin-bottom: 4rem;
}
.gridvm-title-wrapper
{
    margin-top: 2rem;
}
.gridvm-badge
{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 25px;
    font-size: .9rem;
    font-weight: 500;
    margin-bottom: 1.5rem;
    color: #ffffffe6;
}
.gridvm-overview
{
    padding: 3rem;
    border-radius: 25px;
    margin-bottom: 4rem;
    text-align: center;
}
.overview-content h3
{
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: #fff;
}
.overview-content p
{
    font-size: 1.2rem;
    color: #fffc;
    line-height: 1.7;
    margin-bottom: 2.5rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}
.overview-stats
{
    display: flex;
    justify-content: center;
    gap: 3rem;
    flex-wrap: wrap;
}
.stat-item
{
    text-align: center;
}
.stat-number
{
    font-size: 3rem;
    font-weight: 800;
    background: linear-gradient(135deg,var(--primary-blue),#6366f1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: .5rem;
}
.stat-label
{
    font-size: 1rem;
    color: #ffffffb3;
    font-weight: 500;
}
.gridvm-functions
{
    margin-bottom: 4rem;
}
.functions-title
{
    font-size: 2.5rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 3rem;
    background: linear-gradient(135deg,#fff,#ffffffb3);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.functions-grid
{
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(350px,1fr));
    gap: 2rem;
}
.function-card
{
    padding: 2.5rem;
    border-radius: 20px;
    transition: all .3s cubic-bezier(.4,0,.2,1);
    position: relative;
    overflow: hidden;
}
.function-card:hover
{
    transform: translateY(-10px);
}
.function-card:before
{
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent);
    transition: left .5s cubic-bezier(.4,0,.2,1);
}
.function-card:hover:before
{
    left: 100%;
}
.function-header
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}
.function-icon-wrapper
{
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg,var(--primary-blue),#6366f1);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.function-icon
{
    width: 28px;
    height: 28px;
    color: #fff;
}
.function-number
{
    width: 40px;
    height: 40px;
    background: #0e4dfe33;
    border: 2px solid rgba(14,77,254,.4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--primary-blue);
}
.function-content h4
{
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #fff;
}
.function-content p
{
    color: #fffc;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}
.function-features
{
    display: flex;
    flex-direction: column;
    gap: .75rem;
}
.feature-tag
{
    display: flex;
    align-items: center;
    gap: .75rem;
    color: #ffffffe6;
    font-weight: 500;
}
.feature-dot
{
    width: 6px;
    height: 6px;
    background: var(--primary-blue);
    border-radius: 50%;
    flex-shrink: 0;
}
.gridvm-architecture
{
    text-align: center;
}
.architecture-title
{
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 3rem;
    background: linear-gradient(135deg,#fff,#ffffffb3);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.architecture-diagram
{
    padding: 3rem;
    border-radius: 25px;
    max-width: 900px;
    margin: 0 auto;
}
.arch-layer
{
    margin-bottom: 3rem;
}
.arch-layer:last-child
{
    margin-bottom: 0;
}
.layer-title
{
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: var(--primary-blue);
}
.layer-components
{
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.arch-component
{
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 1rem 1.5rem;
    border-radius: 12px;
    font-weight: 500;
    transition: all .3s cubic-bezier(.4,0,.2,1);
    min-width: 150px;
    justify-content: center;
}
.agent-comp
{
    background: #0e4dfe1a;
    border: 2px solid rgba(14,77,254,.3);
    color: #ffffffe6;
}
.exec-comp
{
    background: #6366f11a;
    border: 2px solid rgba(99,102,241,.3);
    color: #ffffffe6;
}
.infra-comp
{
    background: #8b5cf61a;
    border: 2px solid rgba(139,92,246,.3);
    color: #ffffffe6;
}
.arch-component:hover
{
    transform: translateY(-3px);
    box-shadow: 0 10px 30px #0e4dfe33;
}
.gridvm-illustration
{
    position: relative;
    width: 500px;
    height: 350px;
    margin: 0 auto;
}
.vm-ecosystem
{
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.vm-core
{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 120px;
    height: 120px;
    z-index: 20;
}
.core-inner
{
    position: relative;
    width: 100%;
    height: 100%;
    background: #0e4dfe26;
    border: 3px solid rgba(14,77,254,.6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.core-pulse
{
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg,var(--primary-blue),#6366f1);
    border-radius: 50%;
    animation: vmCorePulse 2s ease-in-out infinite;
    box-shadow: 0 0 30px #0e4dfe99;
}
.core-rings
{
    position: absolute;
    width: 100%;
    height: 100%;
}
.core-ring
{
    position: absolute;
    border: 2px solid rgba(14,77,254,.3);
    border-radius: 50%;
    animation: vmRingRotate 8s linear infinite;
}
.ring-1
{
    width: 100%;
    height: 100%;
    animation-delay: 0s;
}
.ring-2
{
    width: 120%;
    height: 120%;
    top: -10%;
    left: -10%;
    animation-delay: -2s;
}
.ring-3
{
    width: 140%;
    height: 140%;
    top: -20%;
    left: -20%;
    animation-delay: -4s;
}
.vm-label
{
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translate(-50%);
    font-weight: 700;
    font-size: 1.1rem;
    color: #fff;
    text-align: center;
}
.agent-nodes
{
    position: absolute;
    width: 100%;
    height: 100%;
}
.agent-node
{
    position: absolute;
    width: 70px;
    height: 70px;
    animation: agentFloat 3s ease-in-out infinite;
}
.agent-avatar
{
    width: 50px;
    height: 50px;
    background: #0e4dfe33;
    border: 2px solid rgba(14,77,254,.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    animation: agentGlow 2s ease-in-out infinite;
}
.agent-brain
{
    width: 20px;
    height: 20px;
    background: linear-gradient(135deg,var(--primary-blue),#6366f1);
    border-radius: 50%;
    animation: brainPulse 1.5s ease-in-out infinite;
}
.agent-id
{
    font-size: .7rem;
    color: #ffffffb3;
    text-align: center;
    margin-top: 5px;
    font-weight: 500;
}
.node-1
{
    top: 5%;
    left: 20%;
    animation-delay: 0s;
}
.node-2
{
    top: 15%;
    right: 10%;
    animation-delay: .5s;
}
.node-3
{
    top: 60%;
    right: 5%;
    animation-delay: 1s;
}
.node-4
{
    bottom: 10%;
    right: 25%;
    animation-delay: 1.5s;
}
.node-5
{
    bottom: 5%;
    left: 25%;
    animation-delay: 2s;
}
.node-6
{
    top: 55%;
    left: 5%;
    animation-delay: 2.5s;
}
.vm-connections
{
    position: absolute;
    width: 100%;
    height: 100%;
}
.connection-line
{
    position: absolute;
    background: linear-gradient(90deg,transparent,rgba(14,77,254,.6),transparent);
    height: 2px;
    animation: vmConnectionFlow 3s ease-in-out infinite;
}
.line-1
{
    top: 25%;
    left: 30%;
    width: 80px;
    transform: rotate(30deg);
    animation-delay: 0s;
}
.line-2
{
    top: 35%;
    right: 20%;
    width: 70px;
    transform: rotate(-45deg);
    animation-delay: .5s;
}
.line-3
{
    bottom: 35%;
    right: 15%;
    width: 60px;
    transform: rotate(45deg);
    animation-delay: 1s;
}
.line-4
{
    bottom: 25%;
    left: 35%;
    width: 75px;
    transform: rotate(-30deg);
    animation-delay: 1.5s;
}
.line-5
{
    bottom: 45%;
    left: 15%;
    width: 65px;
    transform: rotate(-60deg);
    animation-delay: 2s;
}
.line-6
{
    top: 50%;
    left: 15%;
    width: 55px;
    transform: rotate(60deg);
    animation-delay: 2.5s;
}
.data-packets
{
    position: absolute;
    width: 100%;
    height: 100%;
}
.data-packet
{
    position: absolute;
    width: 12px;
    height: 12px;
    animation: packetMove 4s ease-in-out infinite;
}
.packet-content
{
    width: 100%;
    height: 100%;
    background: #0e4dfecc;
    border-radius: 2px;
    box-shadow: 0 0 8px #0e4dfe99;
    animation: packetGlow 2s ease-in-out infinite;
}
.packet-1
{
    top: 20%;
    left: 25%;
    animation-delay: 0s;
}
.packet-2
{
    top: 40%;
    right: 20%;
    animation-delay: 1s;
}
.packet-3
{
    bottom: 30%;
    right: 30%;
    animation-delay: 2s;
}
.packet-4
{
    bottom: 20%;
    left: 30%;
    animation-delay: 3s;
}
.zero-gas-indicator
{
    position: absolute;
    top: 10%;
    right: 10%;
    background: #22c55e33;
    border: 2px solid rgba(34,197,94,.5);
    border-radius: 20px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    animation: gasIndicatorPulse 2s ease-in-out infinite;
}
.gas-icon
{
    font-size: 1rem;
}
.gas-text
{
    font-size: .8rem;
    font-weight: 600;
    color: #22c55ee6;
}
.evm-badge
{
    position: absolute;
    bottom: 10%;
    right: 10%;
    background: #8b5cf633;
    border: 2px solid rgba(139,92,246,.5);
    border-radius: 20px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    animation: evmBadgePulse 2s ease-in-out infinite;
}
.evm-icon
{
    font-size: 1rem;
}
.evm-text
{
    font-size: .8rem;
    font-weight: 600;
    color: #8b5cf6e6;
}
.why-section
{
    padding: 8rem 0;
}
.why-grid
{
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
    gap: 2rem;
    margin-top: 3rem;
}
.why-card
{
    padding: 2.5rem;
    border-radius: 20px;
    text-align: center;
    transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.why-card:hover
{
    transform: translateY(-10px);
}
.why-icon
{
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg,var(--primary-blue),#6366f1);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}
.why-icon svg
{
    color: #fff;
}
.why-card h3
{
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
}
.why-card p
{
    color: #fffc;
    line-height: 1.6;
}
.why-illustration
{
    margin-bottom: 1.5rem;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.developer-visual
{
    position: relative;
    width: 120px;
    height: 80px;
}
.dev-screen
{
    position: relative;
    width: 80px;
    height: 60px;
    background: #0000004d;
    border: 2px solid rgba(14,77,254,.4);
    border-radius: 8px;
}
.screen-glow
{
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle,rgba(14,77,254,.2) 0%,transparent 70%);
    border-radius: 6px;
    animation: screenFlicker 3s ease-in-out infinite;
}
.code-blocks
{
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
}
.code-block
{
    height: 3px;
    background: #0e4dfe99;
    margin-bottom: 5px;
    border-radius: 2px;
    animation: codeWrite 2s ease-in-out infinite;
}
.block-1
{
    width: 70%;
    animation-delay: 0s;
}
.block-2
{
    width: 50%;
    animation-delay: 1s;
}
.ai-assistant
{
    position: absolute;
    right: -10px;
    top: 10px;
    width: 30px;
    height: 30px;
    background: linear-gradient(135deg,var(--primary-blue),#6366f1);
    border-radius: 50%;
    animation: assistantBob 2s ease-in-out infinite;
}
.team-visual
{
    position: relative;
    width: 120px;
    height: 80px;
}
.team-members
{
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: 100%;
}
.member
{
    width: 25px;
    height: 25px;
    background: linear-gradient(135deg,var(--primary-blue),#6366f1);
    border-radius: 50%;
    animation: memberPulse 2s ease-in-out infinite;
}
.member-1
{
    animation-delay: 0s;
}
.member-2
{
    animation-delay: .5s;
}
.member-3
{
    animation-delay: 1s;
}
.collaboration-lines
{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.collab-line
{
    position: absolute;
    height: 2px;
    background: linear-gradient(90deg,transparent,rgba(14,77,254,.6),transparent);
    top: 50%;
    animation: collabFlow 3s ease-in-out infinite;
}
.line-1
{
    left: 25px;
    width: 30px;
    animation-delay: 0s;
}
.line-2
{
    right: 25px;
    width: 30px;
    animation-delay: 1.5s;
}
.ecosystem-visual
{
    position: relative;
    width: 120px;
    height: 80px;
}
.eco-center
{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 30px;
    height: 30px;
    background: linear-gradient(135deg,var(--primary-blue),#6366f1);
    border-radius: 50%;
    animation: ecoCorePulse 2s ease-in-out infinite;
}
.eco-rings
{
    position: absolute;
    width: 100%;
    height: 100%;
}
.eco-ring
{
    position: absolute;
    border: 2px solid rgba(14,77,254,.3);
    border-radius: 50%;
    animation: ecoRingExpand 4s ease-out infinite;
}
.ring-1
{
    width: 50px;
    height: 50px;
    top: 15px;
    left: 35px;
    animation-delay: 0s;
}
.ring-2
{
    width: 70px;
    height: 70px;
    top: 5px;
    left: 25px;
    animation-delay: 1s;
}
.ring-3
{
    width: 90px;
    height: 90px;
    top: -5px;
    left: 15px;
    animation-delay: 2s;
}
.trust-indicators
{
    position: absolute;
    width: 100%;
    height: 100%;
}
.trust-dot
{
    position: absolute;
    width: 8px;
    height: 8px;
    background: #0e4dfecc;
    border-radius: 50%;
    animation: trustBlink 1.5s ease-in-out infinite;
}
.dot-1
{
    top: 20%;
    left: 20%;
    animation-delay: 0s;
}
.dot-2
{
    top: 30%;
    right: 20%;
    animation-delay: .5s;
}
.dot-3
{
    bottom: 20%;
    left: 50%;
    animation-delay: 1s;
}
.integrations-section
{
    padding: 8rem 0;
    background: radial-gradient(ellipse at center,rgba(4,2,71,.3) 0%,transparent 70%);
}
.integrations-header
{
    text-align: center;
    margin-bottom: 4rem;
}
.integrations-illustration
{
    position: relative;
    width: 400px;
    height: 300px;
    margin: 0 auto 2rem;
}
.integration-web
{
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.web-center
{
    position: relative;
    width: 80px;
    height: 80px;
    background: #0e4dfe33;
    border: 2px solid rgba(14,77,254,.6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: webCenterPulse 3s ease-in-out infinite;
}
.center-logo
{
    color: #fff;
}
.integration-nodes
{
    position: absolute;
    width: 100%;
    height: 100%;
}
.integration-node
{
    position: absolute;
    width: 50px;
    height: 50px;
    background: #0e4dfe1a;
    border: 2px solid rgba(14,77,254,.4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: integrationFloat 4s ease-in-out infinite;
}
.node-icon
{
    font-size: 10px;
    font-weight: 700;
    color: #fffc;
}
.node-eth
{
    top: 10%;
    left: 50%;
    transform: translate(-50%);
    animation-delay: 0s;
}
.node-base
{
    top: 30%;
    right: 10%;
    animation-delay: .5s;
}
.node-arb
{
    bottom: 30%;
    right: 20%;
    animation-delay: 1s;
}
.node-poly
{
    bottom: 10%;
    left: 50%;
    transform: translate(-50%);
    animation-delay: 1.5s;
}
.node-ipfs
{
    bottom: 30%;
    left: 20%;
    animation-delay: 2s;
}
.node-hardhat
{
    top: 30%;
    left: 10%;
    animation-delay: 2.5s;
}
.connection-web
{
    position: absolute;
    width: 100%;
    height: 100%;
}
.web-line
{
    position: absolute;
    background: linear-gradient(90deg,transparent,rgba(14,77,254,.4),transparent);
    height: 2px;
    animation: webLineFlow 4s ease-in-out infinite;
}
.line-1
{
    top: 25%;
    left: 40%;
    width: 80px;
    transform: rotate(30deg);
    animation-delay: 0s;
}
.line-2
{
    top: 40%;
    right: 30%;
    width: 70px;
    transform: rotate(-45deg);
    animation-delay: .5s;
}
.line-3
{
    bottom: 40%;
    right: 35%;
    width: 60px;
    transform: rotate(45deg);
    animation-delay: 1s;
}
.line-4
{
    bottom: 25%;
    left: 40%;
    width: 80px;
    transform: rotate(-30deg);
    animation-delay: 1.5s;
}
.line-5
{
    bottom: 40%;
    left: 35%;
    width: 60px;
    transform: rotate(-45deg);
    animation-delay: 2s;
}
.line-6
{
    top: 40%;
    left: 30%;
    width: 70px;
    transform: rotate(45deg);
    animation-delay: 2.5s;
}
.integrations-grid
{
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
    gap: 2rem;
    margin-top: 3rem;
}
.integration-category
{
    padding: 2rem;
    border-radius: 20px;
    text-align: center;
}
.integration-category h3
{
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: var(--primary-blue);
}
.integration-list
{
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: center;
}
.integration-item
{
    background: #ffffff1a;
    padding: .5rem 1rem;
    border-radius: 20px;
    font-weight: 500;
    font-size: .9rem;
    border: 1px solid rgba(255,255,255,.1);
    transition: all .3s cubic-bezier(.4,0,.2,1);
}
.integration-item:hover
{
    background: #0e4dfe33;
    border-color: var(--primary-blue);
    transform: translateY(-2px);
}
.community-section
{
    padding: 8rem 0;
}
.community-content
{
    padding: 3rem;
    border-radius: 30px;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}
.community-content h2
{
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}
.community-content p
{
    font-size: 1.2rem;
    color: #fffc;
    line-height: 1.6;
    margin-bottom: 2.5rem;
}
.community-actions
{
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.community-link
{
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 1rem 1.5rem;
    border-radius: 25px;
    text-decoration: none;
    color: #fff;
    font-weight: 600;
    transition: all .3s cubic-bezier(.4,0,.2,1);
}
.community-link:hover
{
    transform: translateY(-3px);
    background: #ffffff1a;
}
.community-illustration
{
    position: relative;
    width: 300px;
    height: 200px;
    margin: 0 auto 2rem;
}
.community-network
{
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.network-center
{
    position: relative;
    width: 60px;
    height: 60px;
}
.center-pulse
{
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg,var(--primary-blue),#6366f1);
    border-radius: 50%;
    position: absolute;
    top: 10px;
    left: 10px;
    box-shadow: 0 0 30px #0e4dfe99;
    animation: communityPulse 2s ease-in-out infinite;
}
.user-nodes
{
    position: absolute;
    width: 100%;
    height: 100%;
}
.user-node
{
    position: absolute;
    width: 30px;
    height: 30px;
    animation: userFloat 3s ease-in-out infinite;
}
.user-avatar
{
    width: 100%;
    height: 100%;
    background: #0e4dfe4d;
    border: 2px solid rgba(14,77,254,.6);
    border-radius: 50%;
    animation: avatarGlow 2s ease-in-out infinite;
}
.node-1
{
    top: 10%;
    left: 20%;
    animation-delay: 0s;
}
.node-2
{
    top: 20%;
    right: 15%;
    animation-delay: .5s;
}
.node-3
{
    top: 60%;
    right: 10%;
    animation-delay: 1s;
}
.node-4
{
    bottom: 20%;
    left: 10%;
    animation-delay: 1.5s;
}
.node-5
{
    bottom: 10%;
    right: 30%;
    animation-delay: 2s;
}
.node-6
{
    top: 40%;
    left: 5%;
    animation-delay: 2.5s;
}
.communication-lines
{
    position: absolute;
    width: 100%;
    height: 100%;
}
.comm-line
{
    position: absolute;
    background: linear-gradient(90deg,transparent,rgba(14,77,254,.4),transparent);
    height: 2px;
    animation: commFlow 3s ease-in-out infinite;
}
.line-1
{
    top: 30%;
    left: 25%;
    width: 60px;
    transform: rotate(20deg);
    animation-delay: 0s;
}
.line-2
{
    top: 50%;
    right: 20%;
    width: 50px;
    transform: rotate(-30deg);
    animation-delay: 1s;
}
.line-3
{
    bottom: 35%;
    left: 20%;
    width: 70px;
    transform: rotate(45deg);
    animation-delay: 2s;
}
.line-4
{
    bottom: 25%;
    right: 35%;
    width: 40px;
    transform: rotate(-60deg);
    animation-delay: .5s;
}
.line-5
{
    top: 45%;
    left: 10%;
    width: 55px;
    transform: rotate(70deg);
    animation-delay: 1.5s;
}
.message-bubbles
{
    position: absolute;
    width: 100%;
    height: 100%;
}
.bubble
{
    position: absolute;
    width: 15px;
    height: 15px;
    background: #0e4dfe66;
    border-radius: 50%;
    animation: bubbleFloat 2s ease-in-out infinite;
}
.bubble-1
{
    top: 25%;
    left: 40%;
    animation-delay: 0s;
}
.bubble-2
{
    top: 55%;
    right: 25%;
    animation-delay: 1s;
}
.bubble-3
{
    bottom: 30%;
    left: 60%;
    animation-delay: 2s;
}
.footer
{
    padding: 2rem 0;
    margin-top: 4rem;
    border-top: 1px solid rgba(255,255,255,.1);
}
.footer-container
{
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}
.footer-brand
{
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 600;
    font-size: 1.1rem;
}
.footer-text
{
    color: #fff9;
    text-align: center;
    max-width: 400px;
}
.card-illustration
{
    margin-bottom: 1.5rem;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.contract-visual
{
    position: relative;
    width: 120px;
    height: 60px;
}
.contract-lines
{
    position: absolute;
    width: 80px;
    height: 50px;
    top: 5px;
    left: 0;
}
.code-line
{
    height: 3px;
    background: #ffffff4d;
    margin-bottom: 8px;
    border-radius: 2px;
    animation: codeType 2s ease-in-out infinite;
}
.code-line:nth-child(1)
{
    width: 70px;
    animation-delay: 0s;
}
.code-line:nth-child(2)
{
    width: 50px;
    animation-delay: .5s;
}
.code-line:nth-child(3)
{
    width: 60px;
    animation-delay: 1s;
}
.ai-suggestion
{
    position: absolute;
    right: 0;
    top: 10px;
    width: 30px;
    height: 30px;
    background: linear-gradient(135deg,var(--primary-blue),#6366f1);
    border-radius: 50%;
    animation: suggestionPulse 1.5s ease-in-out infinite;
}
.security-visual
{
    position: relative;
    width: 80px;
    height: 60px;
}
.shield-layers
{
    position: relative;
    width: 60px;
    height: 60px;
}
.shield-layer
{
    position: absolute;
    width: 100%;
    height: 100%;
    border: 2px solid rgba(14,77,254,.4);
    border-radius: 50%;
    animation: shieldPulse 2s ease-in-out infinite;
}
.layer-1
{
    animation-delay: 0s;
}
.layer-2
{
    animation-delay: .3s;
    transform: scale(.8);
}
.layer-3
{
    animation-delay: .6s;
    transform: scale(.6);
}
.scan-beam
{
    position: absolute;
    right: -10px;
    top: 20px;
    width: 30px;
    height: 2px;
    background: linear-gradient(90deg,transparent,var(--primary-blue));
    animation: scanMove 2s ease-in-out infinite;
}
.chain-visual
{
    position: relative;
    width: 120px;
    height: 60px;
}
.chain-nodes
{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
}
.chain-node
{
    width: 25px;
    height: 25px;
    border-radius: 50%;
    animation: chainPulse 2s ease-in-out infinite;
}
.node-eth
{
    background: linear-gradient(135deg,#627eea,#4f6bd5);
    animation-delay: 0s;
}
.node-arb
{
    background: linear-gradient(135deg,#28a0f0,#1e7bb8);
    animation-delay: .5s;
}
.node-base
{
    background: linear-gradient(135deg,#0052ff,#003db8);
    animation-delay: 1s;
}
.bridge-lines
{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.bridge-line
{
    position: absolute;
    height: 2px;
    background: linear-gradient(90deg,transparent,rgba(14,77,254,.6),transparent);
    top: 50%;
    animation: bridgeFlow 3s ease-in-out infinite;
}
.line-1
{
    left: 25px;
    width: 25px;
    animation-delay: 0s;
}
.line-2
{
    right: 25px;
    width: 25px;
    animation-delay: 1.5s;
}
@keyframes vmCorePulse
{
    0%, to
    {
        transform: scale(1);
    }
    50%
    {
        transform: scale(1.1);
    }
}
@keyframes vmRingRotate
{
    0%
    {
        transform: rotate(0);
    }
    to
    {
        transform: rotate(360deg);
    }
}
@keyframes agentFloat
{
    0%, to
    {
        transform: translateY(0);
    }
    50%
    {
        transform: translateY(-8px);
    }
}
@keyframes agentGlow
{
    0%, to
    {
        box-shadow: 0 0 15px #0e4dfe4d;
    }
    50%
    {
        box-shadow: 0 0 25px #0e4dfe99;
    }
}
@keyframes brainPulse
{
    0%, to
    {
        transform: scale(1);
    }
    50%
    {
        transform: scale(1.2);
    }
}
@keyframes vmConnectionFlow
{
    0%, to
    {
        opacity: 0;
    }
    50%
    {
        opacity: 1;
    }
}
@keyframes packetMove
{
    0%, to
    {
        transform: translateY(0) scale(1);
    }
    50%
    {
        transform: translateY(-10px) scale(1.2);
    }
}
@keyframes packetGlow
{
    0%, to
    {
        opacity: .8;
    }
    50%
    {
        opacity: 1;
    }
}
@keyframes gasIndicatorPulse
{
    0%, to
    {
        transform: scale(1);
    }
    50%
    {
        transform: scale(1.05);
    }
}
@keyframes evmBadgePulse
{
    0%, to
    {
        transform: scale(1);
    }
    50%
    {
        transform: scale(1.05);
    }
}
@keyframes centralBoxPulse
{
    0%, to
    {
        transform: scale(1);
    }
    50%
    {
        transform: scale(1.05);
    }
}
@keyframes centralGlow
{
    0%, to
    {
        opacity: .3;
    }
    50%
    {
        opacity: .5;
    }
}
@keyframes featureBoxFloat
{
    0%, to
    {
        transform: translateY(0);
    }
    50%
    {
        transform: translateY(-8px);
    }
}
@keyframes featureGlow
{
    0%, to
    {
        opacity: .2;
    }
    50%
    {
        opacity: .4;
    }
}
@keyframes labelFloat
{
    0%, to
    {
        transform: translateY(0);
        opacity: .8;
    }
    50%
    {
        transform: translateY(-3px);
        opacity: 1;
    }
}
@keyframes fadeInUp
{
    0%
    {
        opacity: 0;
        transform: translateY(30px);
    }
    to
    {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes neuralPulse
{
    0%, to
    {
        transform: scale(1);
    }
    50%
    {
        transform: scale(1.1);
    }
}
@keyframes synapseFire
{
    0%, to
    {
        opacity: .3;
        transform: scale(1);
    }
    50%
    {
        opacity: 1;
        transform: scale(1.5);
    }
}
@keyframes pathwayFlow
{
    0%, to
    {
        opacity: 0;
    }
    50%
    {
        opacity: 1;
    }
}
@keyframes particleFloat
{
    0%, to
    {
        transform: translateY(0);
        opacity: .6;
    }
    50%
    {
        transform: translateY(-10px);
        opacity: 1;
    }
}
@keyframes codeType
{
    0%, to
    {
        width: 0%;
        opacity: 0;
    }
    50%
    {
        width: 100%;
        opacity: 1;
    }
}
@keyframes suggestionPulse
{
    0%, to
    {
        transform: scale(1);
    }
    50%
    {
        transform: scale(1.2);
    }
}
@keyframes shieldPulse
{
    0%, to
    {
        opacity: .4;
        transform: scale(1);
    }
    50%
    {
        opacity: .8;
        transform: scale(1.05);
    }
}
@keyframes scanMove
{
    0%, to
    {
        transform: translate(-20px);
        opacity: 0;
    }
    50%
    {
        transform: translate(0);
        opacity: 1;
    }
}
@keyframes chainPulse
{
    0%, to
    {
        transform: scale(1);
    }
    50%
    {
        transform: scale(1.1);
    }
}
@keyframes bridgeFlow
{
    0%, to
    {
        opacity: 0;
    }
    50%
    {
        opacity: 1;
    }
}
@keyframes screenFlicker
{
    0%, to
    {
        opacity: .3;
    }
    50%
    {
        opacity: .6;
    }
}
@keyframes codeWrite
{
    0%, to
    {
        width: 0%;
    }
    50%
    {
        width: 100%;
    }
}
@keyframes assistantBob
{
    0%, to
    {
        transform: translateY(0);
    }
    50%
    {
        transform: translateY(-5px);
    }
}
@keyframes memberPulse
{
    0%, to
    {
        transform: scale(1);
    }
    50%
    {
        transform: scale(1.1);
    }
}
@keyframes collabFlow
{
    0%, to
    {
        opacity: 0;
    }
    50%
    {
        opacity: 1;
    }
}
@keyframes ecoCorePulse
{
    0%, to
    {
        transform: scale(1);
    }
    50%
    {
        transform: scale(1.2);
    }
}
@keyframes ecoRingExpand
{
    0%
    {
        transform: scale(0);
        opacity: 1;
    }
    to
    {
        transform: scale(1.5);
        opacity: 0;
    }
}
@keyframes trustBlink
{
    0%, to
    {
        opacity: .3;
    }
    50%
    {
        opacity: 1;
    }
}
@keyframes webCenterPulse
{
    0%, to
    {
        transform: scale(1);
    }
    50%
    {
        transform: scale(1.1);
    }
}
@keyframes webLineFlow
{
    0%, to
    {
        opacity: 0;
    }
    50%
    {
        opacity: 1;
    }
}
@keyframes integrationFloat
{
    0%, to
    {
        transform: translateY(0);
    }
    50%
    {
        transform: translateY(-6px);
    }
}
@keyframes communityPulse
{
    0%, to
    {
        transform: scale(1);
    }
    50%
    {
        transform: scale(1.1);
    }
}
@keyframes userFloat
{
    0%, to
    {
        transform: translateY(0);
    }
    50%
    {
        transform: translateY(-8px);
    }
}
@keyframes avatarGlow
{
    0%, to
    {
        box-shadow: 0 0 10px #0e4dfe4d;
    }
    50%
    {
        box-shadow: 0 0 20px #0e4dfe99;
    }
}
@keyframes commFlow
{
    0%, to
    {
        opacity: 0;
    }
    50%
    {
        opacity: 1;
    }
}
@keyframes bubbleFloat
{
    0%, to
    {
        transform: translateY(0);
        opacity: .6;
    }
    50%
    {
        transform: translateY(-15px);
        opacity: 1;
    }
}
@media(max-width: 1024px)
{
    .features-illustration
    {
        width: 500px;
        height: 350px;
    }
    .integrations-illustration
    {
        width: 350px;
        height: 250px;
    }
    .what-illustration
    {
        width: 250px;
        height: 150px;
    }
    .gridvm-illustration
    {
        width: 400px;
        height: 280px;
    }
    .ai-bot
    {
        scale: 3.5;
    }
}
@media(max-width: 768px)
{
    .hero-section
    {
        padding-top: calc(var(--navbar-height-mobile) + 40px);
        min-height: calc(100vh - var(--navbar-height-mobile));
    }
    .hero-actions
    {
        flex-direction: column;
        align-items: center;
    }
    .primary-button, .secondary-button
    {
        width: 200px;
        justify-content: center;
    }
    .content-grid, .features-grid, .why-grid, .integrations-grid, .functions-grid
    {
        grid-template-columns: 1fr;
    }
    .section-container
    {
        padding: 0 1rem;
    }
    .community-actions
    {
        flex-direction: column;
        align-items: center;
    }
    .community-link
    {
        width: 200px;
        justify-content: center;
    }
    .features-illustration
    {
        width: 400px;
        height: 280px;
    }
    .integrations-illustration
    {
        width: 300px;
        height: 200px;
    }
    .what-illustration, .community-illustration
    {
        width: 200px;
        height: 120px;
    }
    .gridvm-illustration
    {
        width: 350px;
        height: 240px;
    }
    .overview-stats
    {
        gap: 2rem;
    }
    .layer-components
    {
        gap: 1rem;
    }
    .arch-component
    {
        min-width: 120px;
        padding: .75rem 1rem;
    }
    .ai-bot
    {
        scale: 3;
    }
}
@media(max-width: 480px)
{
    .hero-section
    {
        padding-top: calc(var(--navbar-height-mobile) + 30px);
    }
    .hero-content
    {
        padding: 0 1rem;
    }
    .hero-description
    {
        font-size: 1rem;
    }
    .feature-card, .content-card, .why-card, .integration-category, .function-card
    {
        padding: 1.5rem;
    }
    .community-content, .gridvm-overview, .architecture-diagram
    {
        padding: 2rem 1.5rem;
    }
    .features-illustration
    {
        width: 350px;
        height: 240px;
    }
    .integrations-illustration
    {
        width: 250px;
        height: 150px;
    }
    .what-illustration, .community-illustration
    {
        width: 180px;
        height: 100px;
    }
    .gridvm-illustration
    {
        width: 300px;
        height: 200px;
    }
    .card-illustration, .why-illustration
    {
        height: 60px;
    }
    .overview-stats
    {
        flex-direction: column;
        gap: 1.5rem;
    }
    .stat-number
    {
        font-size: 2.5rem;
    }
    .layer-components
    {
        flex-direction: column;
        align-items: center;
    }
    .arch-component
    {
        width: 100%;
        max-width: 200px;
    }
    .ai-bot
    {
        scale: 2.5;
    }
}
@media(prefers-reduced-motion: reduce)
{
    *, *:before, *:after
    {
        animation-duration: .01ms!important;
        animation-iteration-count: 1!important;
        transition-duration: .01ms!important;
    }
}
@media(-webkit-min-device-pixel-ratio: 2),(min-resolution: 2dppx)
{
    .glass-effect
    {
        backdrop-filter: blur(25px);
        -webkit-backdrop-filter: blur(25px);
    }
}