@font-face{
 font-family:'Space Grotesk';
 src:url('../assets/font/SpaceGrotesk-Regular.woff2') format('woff2'),
 url('../assets/font/SpaceGrotesk-Regular.woff') format('woff');
 font-weight:400;
 font-style:normal;
 font-display:swap;
}
 
 @font-face{
 font-family:'Space Grotesk';
 src:url('../assets/font/SpaceGrotesk-Medium.woff2') format('woff2'),
 url('../assets/font/SpaceGrotesk-Medium.woff') format('woff');
 font-weight:500;
 font-style:normal;
 font-display:swap;
}
 
 @font-face{
 font-family:'Space Grotesk';
 src:url('../assets/font/SpaceGrotesk-SemiBold.woff2') format('woff2'),
 url('../assets/font/SpaceGrotesk-SemiBold.woff') format('woff');
 font-weight:600;
 font-style:normal;
 font-display:swap;
}
 
 @font-face{
 font-family:'Space Grotesk';
 src:url('../assets/font/SpaceGrotesk-Bold.woff2') format('woff2'),
 url('../assets/font/SpaceGrotesk-Bold.woff') format('woff');
 font-weight:700;
 font-style:normal;
 font-display:swap;
}
 
 
:root{
 
 --color-bg:#0a0a0f;
 --color-bg-elevated:#12121a;
 --color-bg-card:rgba(18,18,26,0.8);
 --color-bg-glass:rgba(255,255,255,0.03);
 
 --color-primary:#1a8bcb;
 --color-primary-light:#3ba3e0;
 --color-primary-dark:#1270a8;
 --color-primary-glow:rgba(26,139,203,0.4);
 
 --color-accent:#4fc3f7;
 --color-accent-light:#81d4fa;
 --color-accent-glow:rgba(79,195,247,0.3);
 
 --color-success:#10b981;
 --color-warning:#f59e0b;
 --color-error:#ef4444;
 
 --color-text:#f8fafc;
 --color-text-secondary:#94a3b8;
 --color-text-muted:#64748b;
 
 --color-border:rgba(255,255,255,0.08);
 --color-border-hover:rgba(255,255,255,0.15);
 
 
 --font-primary:'Space Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
 --font-mono:'JetBrains Mono','Fira Code',monospace;
 
 
 --space-xs:0.25rem;
 --space-sm:0.5rem;
 --space-md:1rem;
 --space-lg:1.5rem;
 --space-xl:2rem;
 --space-2xl:3rem;
 --space-3xl:4rem;
 --space-4xl:6rem;
 --space-5xl:8rem;
 
 
 --radius-sm:0.5rem;
 --radius-md:0.75rem;
 --radius-lg:1rem;
 --radius-xl:1.5rem;
 --radius-2xl:2rem;
 --radius-full:9999px;
 
 
 --ease-out:cubic-bezier(0.33,1,0.68,1);
 --ease-in-out:cubic-bezier(0.65,0,0.35,1);
 --ease-spring:cubic-bezier(0.34,1.56,0.64,1);
 
 --duration-fast:150ms;
 --duration-normal:300ms;
 --duration-slow:500ms;
 
 
 --shadow-sm:0 2px 8px rgba(0,0,0,0.3);
 --shadow-md:0 4px 16px rgba(0,0,0,0.4);
 --shadow-lg:0 8px 32px rgba(0,0,0,0.5);
 --shadow-glow:0 0 60px var(--color-primary-glow);
 
 
 --z-dropdown:100;
 --z-sticky:200;
 --z-fixed:300;
 --z-modal:400;
 --z-tooltip:500;
}
 
 
 *,*::before,*::after{
 box-sizing:border-box;
 margin:0;
 padding:0;
}
 
 html{
 scroll-behavior:smooth;
 -webkit-text-size-adjust:100%;
 scroll-padding-top:100px;
}
 
 body{
 font-family:var(--font-primary);
 font-size:16px;
 line-height:1.6;
 color:var(--color-text);
 background-color:var(--color-bg);
 -webkit-font-smoothing:antialiased;
 -moz-osx-font-smoothing:grayscale;
 overflow-x:hidden;
 
 font-synthesis:none;
 text-rendering:optimizeLegibility;
}
 
::selection{
 background:var(--color-primary);
 color:white;
}
 
 img,svg{
 max-width:100%;
 height:auto;
 display:block;
}
 
 a{
 color:inherit;
 text-decoration:none;
}
 
 button{
 font:inherit;
 cursor:pointer;
 background:none;
 border:none;
}
 
 ul,ol{
 list-style:none;
}
 
 
 h1{
 font-size:clamp(2.5rem,8vw,4.5rem);
}
 
 
 .bg-gradient{
 position:fixed;
 inset:0;
 background:
 radial-gradient(ellipse 80% 50% at 50% -20%,rgba(26,139,203,0.15),transparent),
 radial-gradient(ellipse 60% 40% at 80% 50%,rgba(79,195,247,0.08),transparent),
 radial-gradient(ellipse 60% 40% at 20% 80%,rgba(26,139,203,0.1),transparent);
 pointer-events:none;
 z-index:-3;
}
 
 .bg-glow{
 position:fixed;
 border-radius:50%;
 filter:blur(120px);
 pointer-events:none;
 z-index:-2;
 opacity:0;
 transition:opacity 1s ease-out;
 animation:float 20s ease-in-out infinite;
}
 
 .bg-glow.visible{
 opacity:0.5;
}
 
 .bg-glow-1{
 width:600px;
 height:600px;
 background:var(--color-primary);
 top:-200px;
 left:-200px;
 animation-delay:0s;
}
 
 .bg-glow-2{
 width:500px;
 height:500px;
 background:var(--color-accent);
 bottom:-150px;
 right:-150px;
 animation-delay:-7s;
}
 
 .bg-glow-3{
 width:400px;
 height:400px;
 background:var(--color-primary-light);
 top:50%;
 left:50%;
 transform:translate(-50%,-50%);
 animation-delay:-14s;
}
 
 @keyframes float{
 0%,100%{transform:translate(0,0) scale(1);}
 25%{transform:translate(50px,50px) scale(1.1);}
 50%{transform:translate(-30px,80px) scale(0.95);}
 75%{transform:translate(40px,-40px) scale(1.05);}
}
 
 
 .pcb-traces{
 position:fixed;
 inset:0;
 width:100%;
 height:100%;
 pointer-events:none;
 z-index:-1;
 opacity:0;
 transition:opacity 1s ease-out 0.3s;
}
 
 .pcb-traces.visible{
 opacity:1;
}
 
 .pcb-trace{
 fill:none;
 stroke:rgba(26,139,203,0.12);
 stroke-width:1.5;
 stroke-linecap:square;
 stroke-linejoin:miter;
}
 
 .pcb-via{
 fill:rgba(26,139,203,0.15);
 stroke:rgba(79,195,247,0.25);
 stroke-width:1.5;
}
 
 .pcb-glow{
 fill:var(--color-accent);
 filter:drop-shadow(0 0 8px rgba(79,195,247,0.9)) drop-shadow(0 0 20px rgba(79,195,247,0.5));
}
 
 
 .container{
 width:100%;
 max-width:1280px;
 margin:0 auto;
 padding:0 var(--space-lg);
}
 
 @media (min-width:768px){
 .container{padding:0 var(--space-xl);}
}
 
 @media (min-width:1280px){
 .container{padding:0 var(--space-2xl);}
}
 
 
 .header{
 position:fixed;
 top:0;
 left:0;
 right:0;
 z-index:var(--z-sticky);
 transition:all var(--duration-normal) var(--ease-out);
 
 height:72px;
 contain:layout style;
}
 
 .header::before{
 content:'';
 position:absolute;
 inset:0;
 background:rgba(10,10,15,0.8);
 backdrop-filter:blur(20px);
 -webkit-backdrop-filter:blur(20px);
 border-bottom:1px solid var(--color-border);
 opacity:0;
 transition:opacity var(--duration-normal);
}
 
 .header.scrolled::before{
 opacity:1;
}
 
 .header-content{
 position:relative;
 display:flex;
 align-items:center;
 justify-content:space-between;
 height:72px;
 gap:var(--space-lg);
 z-index:200;
}
 
 
 .logo{
 display:flex;
 align-items:center;
 gap:var(--space-sm);
 z-index:10;
}
 
 .logo-icon{
 width:40px;
 height:40px;
 color:var(--color-primary);
 transition:transform var(--duration-normal) var(--ease-spring);
}
 
 .logo-svg{
 width:100%;
 height:100%;
}
 
 .logo-diamond{
 transition:all var(--duration-normal) var(--ease-spring);
 filter:drop-shadow(0 0 8px rgba(26,139,203,0.4));
}
 
 .logo-cursor{
 transition:all var(--duration-normal) var(--ease-spring);
 transform-origin:14px 12px;
}
 
 .logo:hover .logo-diamond{
 filter:drop-shadow(0 0 15px rgba(26,139,203,0.7));
}
 
 .logo:hover .logo-cursor{
 transform:translate(2px,2px);
}
 
 
 @keyframes logo-pulse{
 0%,100%{filter:drop-shadow(0 0 8px rgba(26,139,203,0.4));}
 50%{filter:drop-shadow(0 0 15px rgba(79,195,247,0.6));}
}
 
 .logo-diamond{
 animation:logo-pulse 3s ease-in-out infinite;
}
 
 .logo:hover .logo-diamond{
 animation:none;
}
 
 .logo-text{
 font-size:1.375rem;
 font-weight:700;
 letter-spacing:-0.02em;
}
 
 .logo-accent{
 color:var(--color-primary);
}
 
 
 .nav{
 display:none;
 align-items:center;
 gap:var(--space-xs);
}
 
 .nav-link{
 position:relative;
 padding:var(--space-sm) var(--space-md);
 font-size:0.9375rem;
 font-weight:500;
 color:var(--color-text-secondary);
 border-radius:var(--radius-md);
 transition:all var(--duration-fast);
 overflow:hidden;
}
 
 .nav-link::before{
 content:'';
 position:absolute;
 inset:0;
 background:var(--color-bg-glass);
 opacity:0;
 transition:opacity var(--duration-fast);
}
 
 .nav-link:hover{
 color:var(--color-text);
}
 
 .nav-link:hover::before{
 opacity:1;
}
 
 .nav-link span{
 position:relative;
 z-index:1;
}
 
 
 .header-actions{
 display:none;
 align-items:center;
 gap:var(--space-md);
}
 
 .status-badge{
 display:flex;
 align-items:center;
 gap:var(--space-sm);
 padding:var(--space-xs) var(--space-md);
 background:rgba(16,185,129,0.1);
 border:1px solid rgba(16,185,129,0.2);
 border-radius:var(--radius-full);
 font-size:0.8125rem;
 color:var(--color-success);
}
 
 .status-dot{
 width:8px;
 height:8px;
 background:var(--color-success);
 border-radius:50%;
 animation:pulse 2s ease-in-out infinite;
}
 
 @keyframes pulse{
 0%,100%{opacity:1;transform:scale(1);}
 50%{opacity:0.5;transform:scale(1.2);}
}
 
 .status-text{
 font-weight:500;
}
 
 
 .hamburger{
 display:flex;
 flex-direction:column;
 justify-content:center;
 gap:6px;
 width:32px;
 height:32px;
 padding:4px;
 z-index:10;
}
 
 .hamburger span{
 display:block;
 width:100%;
 height:2px;
 background:var(--color-text);
 border-radius:2px;
 transition:all var(--duration-normal) var(--ease-out);
 transform-origin:center;
}
 
 .hamburger.active span:nth-child(1){
 transform:translateY(8px) rotate(45deg);
}
 
 .hamburger.active span:nth-child(2){
 opacity:0;
 transform:scaleX(0);
}
 
 .hamburger.active span:nth-child(3){
 transform:translateY(-8px) rotate(-45deg);
}
 
 
 .mobile-nav{
 position:fixed;
 top:0;
 left:0;
 right:0;
 bottom:0;
 width:100%;
 height:100%;
 height:100dvh;
 background:#0a0a0f;
 opacity:0;
 visibility:hidden;
 transition:all var(--duration-slow) var(--ease-out);
 z-index:150;
 overflow-y:auto;
 -webkit-overflow-scrolling:touch;
}
 
 .mobile-nav.active{
 opacity:1;
 visibility:visible;
}
 
 .mobile-nav-content{
 display:flex;
 flex-direction:column;
 justify-content:flex-start;
 min-height:100%;
 padding:120px 2rem 2rem 2rem;
 gap:var(--space-sm);
 box-sizing:border-box;
}
 
 .mobile-nav-link{
 display:flex;
 align-items:center;
 gap:var(--space-md);
 padding:var(--space-md) 0;
 border-bottom:1px solid var(--color-border);
 opacity:0;
 transform:translateX(-30px);
 transition:all var(--duration-normal) var(--ease-out);
}
 
 .mobile-nav.active .mobile-nav-link{
 opacity:1;
 transform:translateX(0);
}
 
 .mobile-nav.active .mobile-nav-link:nth-child(1){transition-delay:0.1s;}
 .mobile-nav.active .mobile-nav-link:nth-child(2){transition-delay:0.15s;}
 .mobile-nav.active .mobile-nav-link:nth-child(3){transition-delay:0.2s;}
 .mobile-nav.active .mobile-nav-link:nth-child(4){transition-delay:0.25s;}
 
 .mobile-nav-number{
 font-family:var(--font-mono);
 font-size:0.875rem;
 color:var(--color-primary);
}
 
 .mobile-nav-text{
 font-size:1.5rem;
 font-weight:600;
 letter-spacing:-0.02em;
}
 
 .mobile-nav-footer{
 margin-top:var(--space-xl);
 padding-top:var(--space-lg);
}
 
 @media (min-width:768px){
 .hamburger{display:none;}
 .nav{display:flex;}
 .header-actions{display:flex;}
 .mobile-nav{display:none;}
}
 
 
 .btn{
 display:inline-flex;
 align-items:center;
 justify-content:center;
 gap:var(--space-sm);
 padding:var(--space-sm) var(--space-lg);
 font-family:inherit;
 font-size:0.9375rem;
 font-weight:600;
 border-radius:var(--radius-lg);
 transition:all var(--duration-fast) var(--ease-out);
 white-space:nowrap;
 position:relative;
 overflow:hidden;
}
 
 .btn .icon{
 width:18px;
 height:18px;
 flex-shrink:0;
}
 
 
 .btn-primary{
 background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-dark) 100%);
 color:white;
 box-shadow:0 4px 20px var(--color-primary-glow);
}
 
 .btn-primary:hover{
 transform:translateY(-2px);
 box-shadow:0 8px 30px var(--color-primary-glow);
}
 
 .btn-primary:active{
 transform:translateY(0);
}
 
 
 .btn-ghost{
 background:transparent;
 color:var(--color-text);
 border:1px solid var(--color-border);
}
 
 .btn-ghost:hover{
 background:var(--color-bg-glass);
 border-color:var(--color-border-hover);
}
 
 
 .btn-glow{
 background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-accent) 100%);
 color:white;
 box-shadow:0 0 30px var(--color-primary-glow);
}
 
 .btn-glow:hover{
 box-shadow:0 0 50px var(--color-primary-glow);
 transform:translateY(-2px);
}
 
 
 .btn-large{
 padding:var(--space-md) var(--space-xl);
 font-size:1rem;
}
 
 .btn-block{
 width:100%;
}
 
 
 .hero{
 min-height:100vh;
 min-height:100svh;
 display:flex;
 align-items:center;
 padding:calc(72px + var(--space-3xl)) 0 var(--space-3xl);
 position:relative;
 
 contain:layout style;
}
 
 .hero .container{
 display:grid;
 grid-template-columns:1fr;
 gap:var(--space-3xl);
 align-items:center;
}
 
 
 .hero-content{
 max-width:640px;
 
 min-height:450px;
}
 
 .hero-badge{
 display:inline-flex;
 align-items:center;
 gap:var(--space-sm);
 padding:var(--space-sm) var(--space-md);
 background:var(--color-bg-glass);
 border:1px solid var(--color-border);
 border-radius:var(--radius-full);
 font-size:0.875rem;
 color:var(--color-text-secondary);
 margin-bottom:var(--space-xl);
 
 min-height:38px;
}
 
 .hero-badge-dot{
 width:8px;
 height:8px;
 background:var(--color-primary);
 border-radius:50%;
 animation:pulse 2s infinite;
}
 
 .hero-title{
 font-size:clamp(2.5rem,8vw,4.5rem);
 font-weight:700;
 line-height:1.1;
 letter-spacing:-0.03em;
 margin-bottom:var(--space-lg);
 
 min-height:1.1em;
}
 
 .hero-title-line{
 display:block;
}
 
 .hero-title-accent{
 background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-accent) 100%);
 -webkit-background-clip:text;
 -webkit-text-fill-color:transparent;
 background-clip:text;
}
 
 .hero-description{
 font-size:1.125rem;
 color:var(--color-text-secondary);
 line-height:1.7;
 margin-bottom:var(--space-2xl);
 
 min-height:57px;
}
 
 .text-gradient{
 background:linear-gradient(135deg,var(--color-primary-light) 0%,var(--color-accent) 100%);
 -webkit-background-clip:text;
 -webkit-text-fill-color:transparent;
 background-clip:text;
 font-weight:600;
}
 
 
 .hero-stats{
 display:flex;
 flex-wrap:wrap;
 gap:var(--space-lg);
 margin-bottom:var(--space-2xl);
 padding:var(--space-lg);
 background:var(--color-bg-glass);
 border:1px solid var(--color-border);
 border-radius:var(--radius-xl);
 
 min-height:94px;
}
 
 .hero-stat{
 flex:1;
 min-width:100px;
 text-align:center;
}
 
 .hero-stat-value{
 display:block;
 font-size:1.75rem;
 font-weight:700;
 color:var(--color-text);
 font-family:var(--font-mono);
 
 min-height:1.75rem;
}
 
 .hero-stat-label{
 font-size:0.8125rem;
 color:var(--color-text-muted);
}
 
 .hero-stat-divider{
 width:1px;
 background:var(--color-border);
 display:none;
}
 
 
 .hero-actions{
 display:flex;
 flex-direction:column;
 gap:var(--space-md);
 margin-bottom:var(--space-3xl);
 
 min-height:112px;
}
 
 
 .hero-scroll{
 display:none;
 align-items:center;
 gap:var(--space-md);
 color:var(--color-text-muted);
 font-size:0.8125rem;
}
 
 .hero-scroll-line{
 width:1px;
 height:60px;
 background:linear-gradient(to bottom,var(--color-text-muted),transparent);
 animation:scroll-line 2s ease-in-out infinite;
}
 
 @keyframes scroll-line{
 0%,100%{transform:scaleY(1);opacity:1;}
 50%{transform:scaleY(0.5);opacity:0.5;}
}
 
 
 .hero-visual{
 display:none;
 position:relative;
 height:400px;
}
 
 .hero-card{
 position:absolute;
 display:flex;
 align-items:center;
 gap:var(--space-md);
 padding:var(--space-lg);
 background:var(--color-bg-card);
 border:1px solid var(--color-border);
 border-radius:var(--radius-xl);
 backdrop-filter:blur(20px);
 box-shadow:var(--shadow-lg);
 transition:all var(--duration-normal) var(--ease-out);
}
 
 .hero-card:hover{
 transform:translateY(-5px);
 border-color:var(--color-primary);
 box-shadow:var(--shadow-glow);
}
 
 .hero-card-icon{
 width:56px;
 height:56px;
 display:flex;
 align-items:center;
 justify-content:center;
 background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-dark) 100%);
 border-radius:var(--radius-lg);
 color:white;
}
 
 .hero-card-icon svg{
 width:28px;
 height:28px;
}
 
 .hero-card-content{
 display:flex;
 flex-direction:column;
 gap:var(--space-xs);
}
 
 .hero-card-label{
 font-size:0.8125rem;
 color:var(--color-text-muted);
}
 
 .hero-card-value{
 font-size:1.25rem;
 font-weight:700;
 color:var(--color-text);
}
 
 .hero-card-main{
 top:10%;
 left:0;
}
 
 .hero-card-secondary{
 top:40%;
 right:0;
}
 
 .hero-card-tertiary{
 bottom:10%;
 left:15%;
}
 
 @media (min-width:768px){
 .hero-stats{
 flex-wrap:nowrap;
}
 
 .hero-stat-divider{
 display:block;
}
 
 .hero-actions{
 flex-direction:row;
}
 
 .hero-scroll{
 display:flex;
}
}
 
 @media (min-width:1024px){
 .hero .container{
 grid-template-columns:1fr 1fr;
}
 
 .hero-visual{
 display:block;
}
}
 
 
 .section{
 padding:var(--space-4xl) 0;
 position:relative;
}
 
 .section-dark{
 background:var(--color-bg-elevated);
}
 
 .section-dark::before{
 content:'';
 position:absolute;
 top:0;
 left:0;
 right:0;
 height:1px;
 background:linear-gradient(90deg,transparent,var(--color-border),transparent);
}
 
 .section-header{
 text-align:center;
 max-width:640px;
 margin:0 auto var(--space-3xl);
}
 
 .section-tag{
 display:inline-block;
 padding:var(--space-xs) var(--space-md);
 background:var(--color-bg-glass);
 border:1px solid var(--color-border);
 border-radius:var(--radius-full);
 font-size:0.8125rem;
 font-weight:500;
 color:var(--color-primary);
 text-transform:uppercase;
 letter-spacing:0.1em;
 margin-bottom:var(--space-md);
}
 
 .section-title{
 font-size:clamp(2rem,5vw,3rem);
 font-weight:700;
 letter-spacing:-0.02em;
 margin-bottom:var(--space-md);
}
 
 .section-description{
 font-size:1.125rem;
 color:var(--color-text-secondary);
 line-height:1.6;
}
 
 
 .bento-grid{
 display:grid;
 grid-template-columns:1fr;
 gap:var(--space-lg);
}
 
 .bento-card{
 position:relative;
 padding:var(--space-xl);
 background:var(--color-bg-card);
 border:1px solid var(--color-border);
 border-radius:var(--radius-xl);
 backdrop-filter:blur(20px);
 overflow:hidden;
 transition:all var(--duration-normal) var(--ease-out);
}
 
 .bento-card:hover{
 border-color:var(--color-border-hover);
 transform:translateY(-4px);
}
 
 .bento-card-glow{
 position:absolute;
 top:0;
 left:0;
 right:0;
 bottom:0;
 background:radial-gradient(ellipse at center,var(--color-primary-glow),transparent 70%);
 opacity:0.3;
 transition:opacity var(--duration-normal);
 animation:card-glow-pulse 4s ease-in-out infinite;
 pointer-events:none;
 z-index:0;
}
 
 @keyframes card-glow-pulse{
 0%,100%{opacity:0.2;}
 50%{opacity:0.4;}
}
 
 .bento-card:hover .bento-card-glow{
 opacity:0.7;
 animation:none;
}
 
 .bento-card-content{
 position:relative;
 z-index:1;
}
 
 .bento-icon{
 width:56px;
 height:56px;
 display:flex;
 align-items:center;
 justify-content:center;
 background:var(--color-bg-glass);
 border:1px solid var(--color-border);
 border-radius:var(--radius-lg);
 margin-bottom:var(--space-lg);
 color:var(--color-primary);
 transition:all var(--duration-normal);
}
 
 .bento-card:hover .bento-icon{
 background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-dark) 100%);
 color:white;
 border-color:transparent;
}
 
 .bento-icon svg{
 width:28px;
 height:28px;
}
 
 .bento-icon-accent{color:var(--color-accent);}
 .bento-icon-warning{color:var(--color-warning);}
 .bento-icon-success{color:var(--color-success);}
 
 .bento-title{
 font-size:1.25rem;
 font-weight:600;
 margin-bottom:var(--space-sm);
}
 
 .bento-description{
 font-size:0.9375rem;
 color:var(--color-text-secondary);
 line-height:1.6;
}
 
 .bento-features{
 display:flex;
 flex-wrap:wrap;
 gap:var(--space-sm);
 margin-top:var(--space-lg);
}
 
 .bento-features li{
 padding:var(--space-xs) var(--space-md);
 background:var(--color-bg-glass);
 border:1px solid var(--color-border);
 border-radius:var(--radius-full);
 font-size:0.8125rem;
 color:var(--color-text-secondary);
}
 
 .bento-tag{
 display:inline-block;
 margin-top:var(--space-lg);
 padding:var(--space-xs) var(--space-md);
 background:rgba(245,158,11,0.1);
 border:1px solid rgba(245,158,11,0.2);
 border-radius:var(--radius-full);
 font-size:0.8125rem;
 font-weight:600;
 color:var(--color-warning);
}
 
 
 a.bento-card-link{
 text-decoration:none;
 display:block;
}
 
 a.bento-card-link:hover{
 border-color:var(--color-primary);
}
 
 a.bento-card-link:hover .bento-title{
 color:var(--color-primary-light);
}
 
 
 .bento-icon-buderus{
 width:120px;
 height:40px;
 margin-bottom:var(--space-lg);
 color:#e31e24;
 font-weight:700;
}
 
 @media (min-width:768px){
 .bento-grid{
 grid-template-columns:repeat(2,1fr);
}
 
 .bento-card-large{
 grid-column:span 2;
}
 
 .bento-card-wide{
 grid-column:span 2;
}
}
 
 @media (min-width:1024px){
 .bento-grid{
 grid-template-columns:repeat(4,1fr);
}
 
 .bento-card-large{
 grid-column:span 2;
 grid-row:span 2;
}
 
 .bento-card-wide{
 grid-column:span 2;
}
}
 
 
 .pricing-grid{
 display:grid;
 grid-template-columns:1fr;
 gap:var(--space-lg);
 max-width:900px;
 margin:0 auto var(--space-3xl);
}
 
 .pricing-card{
 position:relative;
 background:var(--color-bg-card);
 border:1px solid var(--color-border);
 border-radius:var(--radius-2xl);
 overflow:hidden;
 transition:all var(--duration-normal) var(--ease-out);
}
 
 .pricing-card:hover{
 transform:translateY(-4px);
 border-color:var(--color-border-hover);
}
 
 .pricing-card-glow{
 position:absolute;
 top:0;
 left:0;
 right:0;
 bottom:0;
 background:radial-gradient(ellipse at center,var(--color-primary-glow),transparent 70%);
 opacity:0.3;
 transition:opacity var(--duration-normal);
 pointer-events:none;
 z-index:0;
}
 
 .pricing-card:hover .pricing-card-glow{
 opacity:0.5;
}
 
 .pricing-card-featured{
 border-color:var(--color-primary);
 background:linear-gradient(180deg,rgba(99,102,241,0.1) 0%,var(--color-bg-card) 100%);
}
 
 .pricing-card-featured .pricing-card-glow{
 opacity:0.3;
}
 
 .pricing-badge{
 position:absolute;
 top:var(--space-lg);
 right:var(--space-lg);
 padding:var(--space-xs) var(--space-md);
 background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-accent) 100%);
 border-radius:var(--radius-full);
 font-size:0.75rem;
 font-weight:700;
 color:white;
 text-transform:uppercase;
 letter-spacing:0.05em;
}
 
 .pricing-header{
 padding:var(--space-xl);
 padding-bottom:0;
}
 
 .pricing-icon{
 display:flex;
 align-items:center;
 justify-content:center;
 width:56px;
 height:56px;
 background:var(--color-bg-glass);
 border:1px solid var(--color-border);
 border-radius:var(--radius-lg);
 margin-bottom:var(--space-lg);
 color:var(--color-primary);
}
 
 .pricing-icon svg{
 width:28px;
 height:28px;
}
 
 .pricing-title{
 font-size:1.375rem;
 font-weight:600;
 margin-bottom:var(--space-xs);
}
 
 .pricing-subtitle{
 font-size:0.9375rem;
 color:var(--color-text-muted);
}
 
 .pricing-body{
 padding:var(--space-xl);
}
 
 .pricing-price{
 display:flex;
 align-items:baseline;
 gap:var(--space-sm);
 margin-bottom:var(--space-sm);
}
 
 .pricing-amount{
 font-size:3.5rem;
 font-weight:700;
 font-family:var(--font-mono);
 line-height:1;
 background:linear-gradient(135deg,var(--color-text) 0%,var(--color-text-secondary) 100%);
 -webkit-background-clip:text;
 -webkit-text-fill-color:transparent;
 background-clip:text;
}
 
 .pricing-currency{
 font-size:1rem;
 color:var(--color-text-muted);
}
 
 .pricing-note{
 font-size:0.875rem;
 color:var(--color-text-muted);
 margin-bottom:var(--space-xl);
}
 
 .pricing-features{
 display:flex;
 flex-direction:column;
 gap:var(--space-md);
 margin-bottom:var(--space-xl);
}
 
 .pricing-features li{
 display:flex;
 align-items:center;
 gap:var(--space-sm);
 font-size:0.9375rem;
 color:var(--color-text-secondary);
}
 
 .pricing-features .check{
 width:20px;
 height:20px;
 color:var(--color-success);
 flex-shrink:0;
}
 
 @media (min-width:768px){
 .pricing-grid{
 grid-template-columns:repeat(2,1fr);
}
}
 
 
 .guarantee{
 position:relative;
 display:flex;
 flex-direction:column;
 align-items:center;
 gap:var(--space-lg);
 padding:var(--space-2xl);
 background:var(--color-bg-card);
 border:1px solid var(--color-success);
 border-radius:var(--radius-2xl);
 text-align:center;
 max-width:700px;
 margin:0 auto;
 overflow:hidden;
}
 
 .guarantee-glow{
 position:absolute;
 top:0;
 left:0;
 right:0;
 height:100%;
 background:radial-gradient(ellipse at center,rgba(16,185,129,0.1),transparent);
}
 
 .guarantee-icon{
 position:relative;
 width:72px;
 height:72px;
 color:var(--color-success);
}
 
 .guarantee-icon svg{
 width:100%;
 height:100%;
}
 
 .guarantee-content{
 position:relative;
}
 
 .guarantee-title{
 font-size:1.25rem;
 font-weight:600;
 margin-bottom:var(--space-sm);
}
 
 .guarantee-text{
 color:var(--color-text-secondary);
}
 
 @media (min-width:768px){
 .guarantee{
 flex-direction:row;
 text-align:left;
}
}
 
 
 .features-grid{
 display:grid;
 grid-template-columns:1fr;
 gap:var(--space-lg);
}
 
 .feature-card{
 padding:var(--space-xl);
 background:var(--color-bg-card);
 border:1px solid var(--color-border);
 border-radius:var(--radius-xl);
 text-align:center;
 transition:all var(--duration-normal) var(--ease-out);
}
 
 .feature-card:hover{
 border-color:var(--color-border-hover);
 transform:translateY(-4px);
}
 
 .feature-icon{
 width:72px;
 height:72px;
 display:flex;
 align-items:center;
 justify-content:center;
 margin:0 auto var(--space-lg);
 background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-dark) 100%);
 border-radius:var(--radius-xl);
 color:white;
}
 
 .feature-icon svg{
 width:36px;
 height:36px;
}
 
 .feature-title{
 font-size:1.125rem;
 font-weight:600;
 margin-bottom:var(--space-sm);
}
 
 .feature-description{
 font-size:0.9375rem;
 color:var(--color-text-secondary);
 line-height:1.6;
}
 
 @media (min-width:768px){
 .features-grid{
 grid-template-columns:repeat(2,1fr);
}
}
 
 @media (min-width:1024px){
 .features-grid{
 grid-template-columns:repeat(4,1fr);
}
}
 
 
 .contact-grid{
 display:grid;
 grid-template-columns:1fr;
 gap:var(--space-2xl);
}
 
 .contact-info{
 display:flex;
 flex-direction:column;
 gap:var(--space-lg);
}
 
 .contact-card{
 position:relative;
 background:var(--color-bg-card);
 border:1px solid var(--color-border);
 border-radius:var(--radius-xl);
 overflow:hidden;
}
 
 .contact-card-glow{
 position:absolute;
 top:0;
 left:0;
 right:0;
 height:100%;
 background:radial-gradient(ellipse at center,var(--color-primary-glow),transparent);
 opacity:0.3;
}
 
 .contact-card-primary{
 border-color:var(--color-primary);
}
 
 .contact-item{
 display:flex;
 align-items:center;
 gap:var(--space-md);
 padding:var(--space-lg);
 position:relative;
 z-index:1;
 transition:all var(--duration-fast);
}
 
 .contact-item + .contact-item{
 border-top:1px solid var(--color-border);
}
 
 .contact-item:hover{
 background:var(--color-bg-glass);
}
 
 .contact-item-large{
 padding:var(--space-xl);
}
 
 .contact-icon{
 width:48px;
 height:48px;
 display:flex;
 align-items:center;
 justify-content:center;
 background:var(--color-bg-glass);
 border:1px solid var(--color-border);
 border-radius:var(--radius-lg);
 color:var(--color-primary);
 flex-shrink:0;
}
 
 .contact-icon svg{
 width:22px;
 height:22px;
}
 
 .contact-text{
 display:flex;
 flex-direction:column;
 gap:var(--space-xs);
 flex:1;
}
 
 .contact-label{
 font-size:0.75rem;
 color:var(--color-text-muted);
 text-transform:uppercase;
 letter-spacing:0.05em;
}
 
 .contact-value{
 font-size:1.125rem;
 font-weight:600;
}
 
 .contact-arrow{
 width:24px;
 height:24px;
 color:var(--color-text-muted);
 transition:transform var(--duration-fast);
}
 
 .contact-item:hover .contact-arrow{
 transform:translateX(4px);
 color:var(--color-primary);
}
 
 .contact-actions{
 margin-top:var(--space-md);
}
 
 
 .contact-map{
 min-height:300px;
}
 
 .map-container{
 position:relative;
 height:100%;
 min-height:400px;
 border-radius:var(--radius-xl);
 overflow:hidden;
 border:1px solid var(--color-border);
}
 
 .map-container iframe{
 position:absolute;
 inset:0;
 width:100%;
 height:100%;
}
 
 .map-btn{
 position:absolute;
 bottom:var(--space-lg);
 left:50%;
 transform:translateX(-50%);
 display:flex;
 align-items:center;
 gap:var(--space-sm);
 padding:var(--space-sm) var(--space-lg);
 background:var(--color-bg);
 border:1px solid var(--color-border);
 border-radius:var(--radius-full);
 font-size:0.875rem;
 font-weight:600;
 color:var(--color-text);
 box-shadow:var(--shadow-lg);
 transition:all var(--duration-fast);
}
 
 .map-btn:hover{
 background:var(--color-primary);
 border-color:var(--color-primary);
 transform:translateX(-50%) translateY(-2px);
}
 
 .map-btn .icon{
 width:16px;
 height:16px;
}
 
 @media (min-width:1024px){
 .contact-grid{
 grid-template-columns:1fr 1.5fr;
}
 
 .contact-map{
 min-height:500px;
}
}
 
 
 .footer{
 background:var(--color-bg);
 border-top:1px solid var(--color-border);
 padding:var(--space-3xl) 0 var(--space-xl);
}
 
 .footer-content{
 display:grid;
 grid-template-columns:1fr;
 gap:var(--space-2xl);
 margin-bottom:var(--space-2xl);
}
 
 .footer-brand .logo{
 margin-bottom:var(--space-md);
}
 
 .footer-description{
 font-size:0.9375rem;
 color:var(--color-text-secondary);
 max-width:300px;
}
 
 .footer-title{
 font-size:0.75rem;
 font-weight:600;
 text-transform:uppercase;
 letter-spacing:0.1em;
 color:var(--color-text-secondary);
 margin-bottom:var(--space-md);
}
 
 .footer-owner{
 font-weight:600;
 margin-bottom:var(--space-sm);
}
 
 .footer-contact p,
 .footer-hours p{
 font-size:0.9375rem;
 color:var(--color-text-secondary);
 margin-bottom:var(--space-sm);
}
 
 .footer-contact a{
 color:var(--color-primary);
 transition:color var(--duration-fast);
}
 
 .footer-contact a:hover{
 color:var(--color-primary-light);
}
 
 .footer-highlight{
 font-size:1.5rem;
 font-weight:700;
 color:var(--color-primary);
}
 
 .footer-bottom{
 padding-top:var(--space-xl);
 border-top:1px solid var(--color-border);
 text-align:center;
}
 
 .footer-bottom p{
 font-size:0.875rem;
 color:var(--color-text-secondary);
}
 
 .footer-bottom time{
 color:var(--color-text-secondary);
}
 
 @media (min-width:768px){
 .footer-content{
 grid-template-columns:2fr 1fr 1fr;
}
}
 
 
 .floating-cta{
 position:fixed;
 bottom:var(--space-xl);
 right:var(--space-lg);
 width:64px;
 height:64px;
 display:flex;
 align-items:center;
 justify-content:center;
 background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-accent) 100%);
 border-radius:var(--radius-full);
 color:white;
 box-shadow:0 0 40px var(--color-primary-glow);
 z-index:var(--z-fixed);
 
 opacity:0;
 transform:translateY(20px);
 transition:opacity 0.5s ease-out,transform 0.5s ease-out,box-shadow var(--duration-normal) var(--ease-out);
}
 
 .floating-cta.visible{
 opacity:1;
 transform:translateY(0);
}
 
 .floating-cta.visible:hover{
 transform:translateY(0) scale(1.1);
 box-shadow:0 0 60px var(--color-primary-glow);
}
 
 .floating-cta svg{
 width:28px;
 height:28px;
}
 
 .floating-cta-pulse{
 position:absolute;
 inset:0;
 border-radius:var(--radius-full);
 background:inherit;
 animation:cta-pulse 2s ease-in-out infinite;
}
 
 @keyframes cta-pulse{
 0%,100%{transform:scale(1);opacity:0.5;}
 50%{transform:scale(1.3);opacity:0;}
}
 
 .floating-cta-label{
 position:absolute;
 right:100%;
 margin-right:var(--space-md);
 padding:var(--space-sm) var(--space-md);
 background:var(--color-bg-elevated);
 border:1px solid var(--color-border);
 border-radius:var(--radius-lg);
 font-size:0.875rem;
 font-weight:600;
 white-space:nowrap;
 opacity:0;
 transform:translateX(10px);
 transition:all var(--duration-fast);
}
 
 .floating-cta:hover .floating-cta-label{
 opacity:1;
 transform:translateX(0);
}
 
 @media (min-width:768px){
 .floating-cta{
 display:none;
}
}
 
 
 [data-animate]{
 opacity:0;
 transition:opacity 0.8s var(--ease-out),transform 0.8s var(--ease-out);
 will-change:opacity,transform;
}
 
 
 .hero [data-animate]{
 transform:scale(0.98);
}
 
 .hero [data-animate].animated{
 opacity:1;
 transform:scale(1);
}
 
 
 [data-animate="fade-up"]:not(.hero *){
 transform:translateY(30px);
}
 
 [data-animate="fade-up"].animated{
 opacity:1;
 transform:translateY(0) scale(1);
}
 
 [data-animate="fade-left"]{
 transform:translateX(50px);
}
 
 [data-animate="fade-left"].animated{
 opacity:1;
 transform:translateX(0);
}
 
 
 @media (prefers-reduced-motion:reduce){
 *,
 *::before,
 *::after{
 animation-duration:0.01ms !important;
 animation-iteration-count:1 !important;
 transition-duration:0.01ms !important;
}
 
 html{
 scroll-behavior:auto;
}
 
 .bg-glow,
 .floating-cta-pulse{
 display:none;
}
}
 
 a:focus-visible,
 button:focus-visible{
 outline:2px solid var(--color-primary);
 outline-offset:2px;
}
 
 
 .sr-only{
 position:absolute;
 width:1px;
 height:1px;
 padding:0;
 margin:-1px;
 overflow:hidden;
 clip:rect(0,0,0,0);
 white-space:nowrap;
 border:0;
}