/* Fonts loaded via <link> in HTML head for non-render-blocking */ *, *::before, *::after{margin:0; padding:0; box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:'IBM Plex Sans', -apple-system, sans-serif; background:var(--bg); color:var(--text); line-height:var(--leading-normal); -webkit-font-smoothing:antialiased; overflow-x:hidden}a{color:inherit; text-decoration:none}ul{list-style:none}img{max-width:100%; display:block}::selection{background:var(--blue-electric); color:#fff}.container{width:100%; max-width:1200px; margin:0 auto; padding:0 24px}/* Header */ .header{position:fixed; top:0; left:0; right:0; z-index:var(--z-header); background:rgba(255, 255, 255, 0.72); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-bottom:1px solid var(--border); transition:var(--transition-fast)}.header .container{display:flex; align-items:center; justify-content:space-between; height:68px}.header-logo{display:flex; align-items:center; gap:8px; font-weight:700; font-size:1.1rem}.header-logo img{height:56px; width:auto}/* Wordmark logo */ .wordmark{display:inline-flex; flex-direction:column; align-items:flex-start; line-height:1}.wordmark-hexa{font-family:var(--font-display); font-weight:700; font-size:1.45rem; letter-spacing:var(--tracking-widest); color:var(--blue-electric); text-transform:uppercase}.wordmark-studio{font-family:var(--font-sans); font-weight:500; font-size:0.6rem; letter-spacing:0.28em; color:var(--text-muted); text-transform:uppercase; margin-top:4px; white-space:nowrap}.wordmark.is-dark .wordmark-hexa{color:var(--blue-electric-dark)}.wordmark.is-dark .wordmark-studio{color:rgba(244, 247, 255, 0.5)}.hero-wordmark{align-items:center; margin-bottom:12px}.hero-wordmark .wordmark-hexa{font-size:clamp(1.4rem, 3vw, 2rem); letter-spacing:0.08em}.hero-wordmark .wordmark-studio{font-size:clamp(0.55rem, 0.8vw, 0.7rem); margin-top:6px}/* Navigation */ .nav{display:flex; align-items:center; gap:8px}.nav a{font-size:0.9rem; font-weight:500; color:var(--text-secondary); transition:var(--transition-fast); position:relative; padding:8px 14px}.nav a::after{content:''; position:absolute; bottom:0; left:50%; width:0; height:1px; background:var(--text); transition:var(--transition-base); transform:translateX(-50%)}.nav a:hover{color:var(--text)}.nav a:hover::after{width:60%}.header-actions{display:flex; align-items:center; gap:8px}.lang-switch{display:flex; align-items:center; gap:4px; padding:4px 10px; border:1px solid var(--border); border-radius:var(--radius-md); font-size:0.75rem; font-weight:500; color:var(--text-muted); transition:var(--transition-fast); cursor:pointer; background:transparent}.lang-switch:hover{border-color:var(--text-muted); color:var(--text)}.lang-divider{color:var(--border)}/* Buttons */ .btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:8px 20px; border-radius:var(--radius-md); font-size:0.85rem; font-weight:600; transition:var(--transition-fast); cursor:pointer; border:none; white-space:nowrap}.btn-primary{background:var(--gradient-primary); color:#fff; box-shadow:0 4px 20px rgba(0, 87, 255, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2)}.btn-primary:hover{background:var(--gradient-primary); filter:brightness(1.1); box-shadow:0 6px 28px rgba(0, 87, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.25); transform:translateY(-1px)}.btn-outline{background:transparent; color:var(--text); border:1px solid var(--border); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px)}.btn-outline:hover{border-color:var(--blue-electric); color:var(--blue-electric); background:var(--blue-subtle); box-shadow:0 0 20px rgba(0, 87, 255, 0.2)}.btn-large{padding:12px 28px; font-size:0.95rem; border-radius:var(--radius-lg)}/* Mobile menu */ .mobile-menu-btn{display:none; background:none; border:none; color:var(--text); font-size:1.5rem; cursor:pointer; padding:8px}/* Hero */ .hero{min-height:90vh; display:flex; align-items:center; justify-content:center; text-align:center; padding:100px 24px 60px; position:relative; overflow:hidden; background:var(--bg)}/* Gradient Mesh Background */ .hero-mesh{position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden}.hero-mesh-orb{position:absolute; border-radius:50%; filter:blur(70px); -webkit-filter:blur(70px); opacity:0.6; animation:meshFloat 20s ease-in-out infinite}.hero-mesh-1{width:600px; height:600px; background:radial-gradient(circle, rgba(94, 123, 255, 0.26) 0%, transparent 70%); top:-10%; left:-10%; animation-delay:0s}.hero-mesh-2{width:500px; height:500px; background:radial-gradient(circle, rgba(167, 139, 250, 0.2) 0%, transparent 70%); bottom:-10%; right:-10%; animation-delay:-5s}.hero-mesh-3{width:400px; height:400px; background:radial-gradient(circle, rgba(74, 208, 232, 0.18) 0%, transparent 70%); top:40%; left:60%; animation-delay:-10s}.hero-mesh-4{width:350px; height:350px; background:radial-gradient(circle, rgba(94, 123, 255, 0.16) 0%, transparent 70%); top:60%; left:20%; animation-delay:-15s}@keyframes meshFloat{0%, 100%{transform:translate(0, 0) scale(1)}25%{transform:translate(30px, -30px) scale(1.05)}50%{transform:translate(-20px, 20px) scale(0.95)}75%{transform:translate(20px, 10px) scale(1.02)}}/* Floating Glass Cards */ .hero-float-cards{position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden}.hero-float-card{position:absolute; width:200px; padding:16px; pointer-events:auto; animation:cardFloat 15s ease-in-out infinite; box-shadow:var(--shadow-lg), var(--glow-blue)}.hero-float-card.glass-card{position:absolute}.hero-float-card-1{top:15%; right:8%; left:auto; transform:rotate(6deg); animation-delay:0s}.hero-float-card-2{top:55%; left:5%; right:auto; transform:rotate(-4deg); animation-delay:-5s; width:180px}.hero-float-card-3{top:25%; left:6%; right:auto; transform:rotate(-8deg); animation-delay:-10s; width:190px}@media (min-width:641px) and (max-width:968px){.hero-float-card{width:150px; padding:14px}.hero-float-card-1{top:10%; right:4%; left:auto}.hero-float-card-2{top:auto; bottom:8%; left:4%; right:auto; width:138px}.hero-float-card-3{top:20%; left:4%; right:auto; width:144px}}@keyframes cardFloat{0%, 100%{transform:translateY(0) rotate(var(--r, 0deg))}33%{transform:translateY(-12px) rotate(calc(var(--r, 0deg) + 2deg))}66%{transform:translateY(8px) rotate(calc(var(--r, 0deg) - 1deg))}}.hero-float-card-1{--r:6deg}.hero-float-card-2{--r:-4deg}.hero-float-card-3{--r:-8deg}.hero-float-cards-gradient .hero-float-card-1{background:linear-gradient(135deg, rgba(0, 87, 255, 0.30), rgba(124, 92, 224, 0.16)); border:1px solid rgba(0, 87, 255, 0.30)}.hero-float-cards-gradient .hero-float-card-2{background:linear-gradient(135deg, rgba(18, 165, 200, 0.28), rgba(94, 123, 255, 0.16)); border:1px solid rgba(18, 165, 200, 0.28)}.hero-float-cards-gradient .hero-float-card-3{background:linear-gradient(135deg, rgba(16, 185, 129, 0.28), rgba(5, 150, 105, 0.16)); border:1px solid rgba(16, 185, 129, 0.30)}.float-card-header{display:flex; gap:6px; margin-bottom:12px}.float-card-dot{width:8px; height:8px; border-radius:50%; background:var(--border)}.float-card-dot:nth-child(1){background:#EF4444}.float-card-dot:nth-child(2){background:#F59E0B}.float-card-dot:nth-child(3){background:#10B981}.float-card-body{display:flex; flex-direction:column; gap:8px; margin-bottom:12px}.float-card-line{height:8px; border-radius:4px; background:linear-gradient(90deg, var(--border) 0%, var(--border-light) 100%); width:100%}.float-card-line-short{width:60%}.float-card-line-medium{width:80%}.float-card-chart{display:flex; align-items:flex-end; gap:6px; height:50px}.chart-bar{flex:1; border-radius:3px 3px 0 0; background:linear-gradient(180deg, var(--blue) 0%, rgba(94, 123, 255, 0.3) 100%); animation:chartPulse 3s ease-in-out infinite}.chart-bar:nth-child(2){animation-delay:0.3s}.chart-bar:nth-child(3){animation-delay:0.6s}.chart-bar:nth-child(4){animation-delay:0.9s}.chart-bar:nth-child(5){animation-delay:1.2s}@keyframes chartPulse{0%, 100%{opacity:0.7}50%{opacity:1}}.float-card-avatar{width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg, var(--blue), var(--purple)); flex-shrink:0}.float-card-lines{display:flex; flex-direction:column; gap:6px; flex:1}.float-card-tags{display:flex; gap:6px; flex-wrap:wrap}.float-tag{font-size:0.7rem; font-weight:600; padding:3px 10px; border-radius:100px; background:var(--blue-subtle); color:var(--blue)}.float-card-progress{display:flex; justify-content:center; align-items:center; height:50px}.progress-ring{position:relative; width:50px; height:50px}.progress-ring svg{width:100%; height:100%; transform:rotate(-90deg)}.progress-ring-bg{fill:none; stroke:var(--border); stroke-width:3}.progress-ring-fill{fill:none; stroke:var(--blue); stroke-width:3; stroke-linecap:round; transition:stroke-dasharray 1s ease}.progress-text{position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); font-size:0.7rem; font-weight:700; color:var(--blue)}.hero-content{position:relative; z-index:2; max-width:800px}.hero h1{font-family:var(--font-display); font-size:clamp(2.8rem, 6vw, 4.5rem); font-weight:700; line-height:var(--leading-tight); letter-spacing:var(--tracking-tight); margin-bottom:20px; color:var(--text); text-shadow:none}.hero h1 .highlight{color:var(--blue-electric); background:var(--accent-gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text}.hero p{font-size:clamp(1rem, 1.5vw, 1.15rem); color:var(--text-secondary); max-width:640px; margin:0 auto 36px; line-height:var(--leading-relaxed)}.hero-actions{display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap}/* Section */ .section{padding:var(--space-24) 0; content-visibility:auto; contain-intrinsic-size:auto 600px}.section-header{text-align:center; max-width:720px; margin:0 auto 64px}.section-label{display:inline-flex; align-items:center; gap:8px; font-family:var(--font-display); font-size:0.75rem; font-weight:600; color:var(--blue-electric); text-transform:uppercase; letter-spacing:0.15em; margin-bottom:16px}.section-label::before{content:""; display:inline-block; width:20px; height:1px; background:linear-gradient(90deg, var(--blue-electric), transparent); flex-shrink:0}.section h2{font-family:var(--font-display); font-size:var(--text-3xl); font-weight:700; letter-spacing:var(--tracking-snug); margin-bottom:16px; color:var(--text)}.section-header p{color:var(--text-secondary); font-size:var(--text-lg); line-height:var(--leading-relaxed)}/* Features grid */ .features-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:20px}.feature-card{background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:28px; transition:var(--transition-base); position:relative}.feature-card::before{content:''; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(135deg, rgba(94, 123, 255, 0.08), transparent 60%); opacity:0; transition:opacity 0.3s ease; pointer-events:none}.feature-card:hover{border-color:rgba(94, 123, 255, 0.5); transform:translateY(-2px); box-shadow:var(--shadow-md), var(--glow-blue)}.feature-card:hover::before{opacity:1}.feature-icon{width:44px; height:44px; display:flex; align-items:center; justify-content:center; background:var(--blue-subtle); border:1px solid rgba(94, 123, 255, 0.2); border-radius:var(--radius-md); margin-bottom:16px; font-size:1.15rem; color:var(--blue); box-shadow:0 0 16px rgba(94, 123, 255, 0.12)}.feature-card h3{font-family:var(--font-display); font-size:1.15rem; font-weight:700; margin-bottom:10px; color:var(--text)}.feature-card p{color:var(--text-secondary); font-size:0.9rem; line-height:1.7}/* Contact */ .contact-section{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start}@media (max-width:767px){.contact-section{grid-template-columns:1fr; gap:40px}}.contact-info h2{font-family:var(--font-display); font-size:2.5rem; font-weight:700; margin-bottom:16px; color:var(--text)}.contact-info > p{color:var(--text-secondary); margin-bottom:40px}.contact-method{display:flex; align-items:flex-start; gap:16px; margin-bottom:24px}.contact-method-icon{width:44px; height:44px; display:flex; align-items:center; justify-content:center; background:rgba(94, 123, 255, 0.08); border-radius:10px; flex-shrink:0; font-size:1.2rem; color:var(--blue)}.contact-method h4{font-size:0.95rem; font-weight:600; margin-bottom:4px; color:var(--text)}.contact-method p, .contact-method a{color:var(--text-secondary); font-size:0.9rem}.contact-form{background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:36px}.form-group{margin-bottom:20px}.form-group label{display:block; font-size:0.85rem; font-weight:600; color:var(--text); margin-bottom:8px}.form-group input, .form-group textarea, .form-group select{width:100%; padding:12px 16px; background:var(--bg); border:1px solid var(--border); border-radius:10px; color:var(--text); font-size:0.9rem; transition:var(--transition); outline:none}.form-group input:focus, .form-group textarea:focus, .form-group select:focus{border-color:var(--text-muted); box-shadow:0 0 0 2px var(--border)}.form-group textarea{min-height:130px; resize:vertical}.form-group select{cursor:pointer}/* Legal pages */ .legal-page{padding:140px 24px 80px; max-width:800px; margin:0 auto}.legal-page h1{font-size:2.5rem; font-weight:800; margin-bottom:8px; color:var(--text)}.legal-page .date{color:var(--text-muted); font-size:0.9rem; margin-bottom:40px}.legal-page h2{font-size:1.5rem; font-weight:700; margin:40px 0 16px; color:var(--text)}.legal-page h3{font-family:var(--font-display); font-size:1.15rem; font-weight:600; margin:24px 0 12px; color:var(--text)}.legal-page p{color:var(--text-secondary); margin-bottom:16px; line-height:1.8}.legal-page ul{margin:12px 0 20px; padding-left:24px}.legal-page li{color:var(--text-secondary); margin-bottom:8px; list-style:disc; line-height:1.7}/* Footer */ .footer{background:var(--bg-dark); padding:48px 0 0; color:var(--text-light); border-top:1px solid rgba(94, 123, 255, 0.25); position:relative}.footer::before{content:''; position:absolute; top:-1px; left:0; right:0; height:1px; background:linear-gradient(90deg, transparent, rgba(94, 123, 255, 0.7), rgba(167, 139, 250, 0.5), transparent); pointer-events:none}.footer-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:48px; padding-bottom:40px; border-bottom:1px solid rgba(255, 255, 255, 0.06)}.footer .wordmark-hexa{font-size:1.45rem; letter-spacing:var(--tracking-widest); color:var(--blue-electric-dark)}.footer .wordmark-studio{color:rgba(244, 247, 255, 0.6); font-weight:500; margin-top:5px}.footer-col-brand p{color:rgba(244, 247, 255, 0.6); font-size:0.8rem; line-height:var(--leading-relaxed); margin-top:12px; max-width:300px}.footer-col-brand .footer-social{display:flex; gap:10px; margin-top:20px}.footer-col-brand .footer-social a{display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:var(--radius-md); background:rgba(255, 255, 255, 0.06); color:rgba(244, 247, 255, 0.7); font-size:0.9rem; transition:var(--transition-fast); border:1px solid rgba(255, 255, 255, 0.08)}.footer-col-brand .footer-social a:hover{background:rgba(255, 255, 255, 0.12); border-color:rgba(94, 123, 255, 0.5); color:#fff}.footer-col h4{font-size:0.7rem; font-weight:700; color:rgba(255, 255, 255, 0.6); text-transform:uppercase; letter-spacing:var(--tracking-widest); margin-bottom:16px}.footer-col a{display:block; color:rgba(244, 247, 255, 0.85); font-size:0.85rem; padding:3px 0; transition:var(--transition-fast); text-decoration:none}.footer-col a:hover{opacity:1; color:var(--blue-hover)}.footer-bottom{padding:16px 0 24px}.footer-bottom-inner{display:flex; justify-content:space-between; align-items:center}.footer-bottom p{color:rgba(255, 255, 255, 0.6); font-size:0.75rem}/* Parallax helpers */ .hero::after{content:''; position:absolute; top:0; left:0; right:0; bottom:0; background:radial-gradient(ellipse at 50% 50%, rgba(94, 123, 255, 0.08) 0%, rgba(167, 139, 250, 0.05) 45%, transparent 75%); pointer-events:none; z-index:0}/* 3D Tilt Cards — uses CSS custom properties to avoid GSAP conflict */ .feature-card, .bento-item, .team-card{transform-style:preserve-3d; -webkit-transform-style:preserve-3d; perspective:1000px; -webkit-perspective:1000px; transition:box-shadow 0.3s ease, border-color 0.3s ease; will-change:transform; --tilt-x:0deg; --tilt-y:0deg; --tilt-scale:1; transform:perspective(1000px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) scale(var(--tilt-scale))}.feature-card:hover, .bento-item:hover, .team-card:hover{border-color:var(--blue); box-shadow:var(--shadow-md)}/* Spotlight Effect */ .card-spotlight{position:relative; overflow:hidden}.card-spotlight::before{content:''; position:absolute; inset:0; border-radius:inherit; background:radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(0, 0, 0, 0.03) 0%, transparent 60%); pointer-events:none; opacity:0; transition:opacity 0.3s ease; z-index:1}.card-spotlight:hover::before{opacity:1}/* Avatar Circle */ .avatar-circle{width:100px; height:100px; border-radius:50%; background:var(--bg-dark); display:flex; align-items:center; justify-content:center; font-size:2rem; color:white; font-weight:700; margin:0 auto 16px; user-select:none}/* Team Card Expand */ .team-card{cursor:pointer}.team-bio{max-height:0; opacity:0; overflow:hidden; transition:max-height 0.5s ease, opacity 0.4s ease, margin 0.4s ease; margin-top:0}.team-card.expanded .team-bio{max-height:300px; opacity:1; margin-top:16px}.expand-hint{display:block; font-size:0.75rem; color:var(--text-muted); margin-top:10px; transition:opacity 0.3s ease}.team-card.expanded .expand-hint{opacity:0; height:0; margin:0}.team-bio-content{color:var(--text-secondary); font-size:0.9rem; line-height:1.7; padding-top:12px; border-top:1px solid var(--border)}.team-social-links{display:flex; gap:12px; margin-top:12px}.team-social-links a{display:flex; align-items:center; justify-content:center; width:32px; height:32px; border:1px solid var(--border); border-radius:8px; color:var(--text-secondary); transition:all 0.3s ease}.team-social-links a:hover{border-color:var(--blue); color:var(--blue); background:rgba(94, 123, 255, 0.05)}/* Pulse Animation */ @keyframes pulse-glow{0%, 100%{transform:scale(1)}50%{transform:scale(1.08)}}.quote-icon{animation:pulse-glow 3s ease-in-out infinite; display:inline-block}/* Title Glow */ @keyframes title-glow{0%, 100%{text-shadow:0 0 20px rgba(94, 123, 255, 0.08)}50%{text-shadow:0 0 50px rgba(94, 123, 255, 0.2)}}:where(html.js) .fade-in{opacity:0; transform:translateY(20px); transition:opacity 0.7s ease, transform 0.7s ease}.fade-in.visible{opacity:1; transform:translateY(0)}.fade-in-delay-1{transition-delay:0.1s}.fade-in-delay-2{transition-delay:0.2s}.fade-in-delay-3{transition-delay:0.3s}.fade-in-delay-4{transition-delay:0.4s}/* Divider */ .divider{height:1px; background:var(--border); margin:0}/* Page header for inner pages */ .page-header, .error-page{padding:100px 24px 0; text-align:center}.page-header h1, .error-page h1{font-family:var(--font-display); font-size:var(--text-4xl); font-weight:700; letter-spacing:var(--tracking-snug); margin-bottom:16px; color:var(--text)}.page-header p, .error-page p{color:var(--text-secondary); font-size:var(--text-lg); max-width:600px; margin:0 auto}.error-page h2{font-size:var(--text-2xl); font-weight:600; margin-bottom:12px; color:var(--text)}.error-page .btn{margin-top:24px}/* Responsive */ @media (max-width:968px){.footer-grid{grid-template-columns:1fr 1fr; gap:40px 32px}.footer-col-brand{grid-column:1 / -1}.footer-col-brand p{max-width:100%}}@media (max-width:640px){.footer-grid{grid-template-columns:1fr; gap:32px}.hero-float-cards{display:block}.hero-float-card{width:104px; padding:10px}.hero-float-card-1{top:8%; right:2%; left:auto}.hero-float-card-2{top:auto; bottom:10%; left:2%; right:auto; width:96px}.hero-float-card-3{top:14%; left:2%; right:auto; width:100px}.float-card-header{gap:5px; margin-bottom:8px}.float-card-avatar{width:20px; height:20px}.float-card-dot{width:6px; height:6px}.float-card-body{gap:6px; margin-bottom:0}.float-card-line{height:6px}.float-card-chart{height:32px; gap:4px}.float-tag{font-size:0.6rem; padding:2px 7px}}@media (max-width:768px){body.nav-open{overflow:hidden}.nav{display:none; position:fixed; top:68px; left:0; right:0; z-index:var(--z-header); background:var(--bg); flex-direction:column; padding:20px; gap:4px; border-bottom:1px solid var(--border); max-height:calc(100dvh - 68px); overflow-y:auto; -webkit-overflow-scrolling:touch}.nav.open{display:flex}.nav a{padding:12px 16px; border-radius:var(--radius-md); width:100%; font-size:1rem}.nav a:hover{background:rgba(15, 27, 61, 0.06)}.nav a::after{display:none}.nav .header-actions{display:flex; width:100%; padding-top:12px; border-top:1px solid var(--border)}.mobile-menu-btn{display:block}.header-actions.desktop-only{display:none}.features-grid{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr; gap:32px; padding-bottom:32px}.footer{padding:40px 0 0}.footer-bottom-inner{flex-direction:column; gap:12px; text-align:center}.section{padding:var(--space-16) 0}}@media (min-width:769px){.mobile-menu-btn{display:none}.nav .header-actions{display:none}}/* Screen-reader-only utility */ .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}/* High contrast mode for accessibility */ @media (prefers-contrast:more){:root{--border:rgba(15, 27, 61, 0.35); --border-light:rgba(15, 27, 61, 0.2); --text-muted:#5A6686; --text-secondary:#1A2444}.glass-card:hover{transform:translateY(-2px)}}/* Skip link (accessibility) */ .skip-link{position:fixed; top:-100%; left:16px; z-index:10000; padding:12px 24px; background:var(--gradient-primary); color:#fff; font-size:0.875rem; font-weight:600; border-radius:0 0 10px 10px; transition:top 0.2s ease; text-decoration:none}.skip-link:focus{top:0; outline:3px solid var(--blue); outline-offset:2px}button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{outline:3px solid var(--blue); outline-offset:2px; border-radius:4px}/* Scrollbar customization */ ::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--border); border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}/* Cookie Banner */ .cookie-banner{position:fixed; bottom:0; left:0; right:0; z-index:9999; background:var(--bg-dark); color:var(--text-light); padding:16px 24px; transform:translateY(100%); transition:transform 0.4s ease; box-shadow:0 -4px 20px rgba(0,0,0,0.15)}.cookie-banner.show{transform:translateY(0)}.cookie-banner-content{max-width:1200px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap}.cookie-banner-content p{font-size:0.85rem; color:rgba(255,255,255,0.8); flex:1; min-width:280px; line-height:1.6}.cookie-banner-content a{color:var(--blue); text-decoration:underline}.cookie-banner-content a:hover{color:#6a9fff}.cookie-banner-actions{display:flex; gap:10px; flex-shrink:0}.cookie-banner .btn-small{padding:8px 18px; font-size:0.8rem; border-radius:8px}.cookie-banner .btn-outline{border:1px solid rgba(255,255,255,0.3); color:var(--text-light); background:transparent}.cookie-banner .btn-outline:hover{border-color:var(--text-light); background:rgba(255,255,255,0.1)}@media (max-width:640px){.cookie-banner{padding:14px 18px}.cookie-banner-content{flex-direction:column; align-items:stretch; gap:12px}.cookie-banner-content p{min-width:0; font-size:0.8rem}.cookie-banner-actions{justify-content:stretch}.cookie-banner-actions .btn{flex:1}}/* ─── Division Grid (3 Divisions) ─── */ .division-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:24px}.division-card{background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:48px 32px; text-align:center; transition:var(--transition); position:relative; overflow:hidden; display:flex; flex-direction:column}.division-card:hover{border-color:var(--blue); transform:translateY(-3px); box-shadow:var(--shadow-md)}.division-card-icon{width:56px; height:56px; display:flex; align-items:center; justify-content:center; background:var(--blue-subtle); border-radius:var(--radius); margin:0 auto 20px; font-size:1.4rem; color:var(--blue); transition:var(--transition-fast)}.division-card:hover .division-card-icon{background:var(--blue); color:#fff}.division-card h3{font-family:var(--font-display); font-size:1.3rem; font-weight:700; margin-bottom:12px; color:var(--text)}.division-card p{color:var(--text-secondary); font-size:0.9rem; line-height:1.7; margin-bottom:20px}.division-card .btn{display:inline-flex; margin-top:auto; align-self:center}.division-card--future{text-decoration:none; color:inherit; display:flex; flex-direction:column}.division-card--future .badge-future{margin-top:auto; align-self:center; border:1px solid var(--text-muted); border-radius:20px; padding:4px 12px; font-size:0.75rem; color:var(--text-muted); display:inline-block}/* ─── Product Badge ─── */ .product-badge{display:inline-flex; align-items:center; gap:6px; font-size:0.75rem; font-weight:600; color:var(--blue); background:rgba(94, 123, 255, 0.08); padding:4px 14px; border-radius:100px; margin-bottom:12px}/* ─── Responsive Division Grid ─── */ @media (max-width:768px){.division-grid{grid-template-columns:1fr; gap:16px}.division-card{padding:36px 24px}}/* ─── FAQ Accordion ─── */ .faq-item{padding:0; overflow:hidden}.faq-item-title{margin:0}.faq-toggle{width:100%; display:flex; align-items:center; gap:16px; padding:20px 24px; background:none; border:none; cursor:pointer; text-align:left; font-family:inherit; color:var(--text); transition:var(--transition-fast)}.faq-toggle:hover{background:rgba(94, 123, 255, 0.06)}.faq-icon{flex-shrink:0; width:44px; height:44px; display:flex; align-items:center; justify-content:center; border-radius:12px; background:var(--blue-subtle); font-size:1.2rem; color:var(--blue)}.faq-question{flex:1; font-family:var(--font-display); font-size:1.05rem; font-weight:600}.faq-chevron{flex-shrink:0; color:var(--text-muted); font-size:0.8rem; transition:transform var(--transition-base)}.faq-item.is-open .faq-chevron{transform:rotate(180deg)}.faq-panel{display:none; padding:0 24px 24px 84px}.faq-panel p{margin:0; color:var(--text-secondary); font-size:0.9rem; line-height:1.6}.faq-item.is-open .faq-panel{display:block; animation:faqFade 0.25s var(--ease-out)}@keyframes faqFade{from{opacity:0; transform:translateY(-4px)}to{opacity:1; transform:translateY(0)}}/* Utility */ .hidden{display:none}/* Reduced motion:disable decorative animations */ @media (prefers-reduced-motion:reduce){*, *::before, *::after{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important}.hero-mesh-orb, .hero-float-card, .chart-bar{animation:none !important}.hero-float-card{transform:none !important}}/* ========================================================================== TOOLTIP "?" (info-tip) + FLOW SECTIONS + APP MOCKUP + PLATFORMS LIST Aggiunte per pagina Piattaforma (saas.html) /* --- Tooltip "?" --- */ .info-tip{display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; font-size:0.72rem; font-weight:700; font-style:normal; line-height:1; color:var(--blue); background:var(--blue-subtle); border:1px solid rgba(94, 123, 255, 0.35); cursor:help; vertical-align:middle; margin-left:6px; flex-shrink:0; transition:var(--transition-base); user-select:none}.info-tip:hover, .info-tip:focus-visible{background:var(--blue); color:#fff; outline:none}.tooltip-pop{position:absolute; z-index:1000; width:260px; left:50%; bottom:calc(100% + 10px); margin-left:-130px; padding:14px 16px; background:var(--bg-dark); color:var(--text-light); border:1px solid rgba(255, 255, 255, 0.12); border-radius:var(--radius-lg); box-shadow:var(--shadow-xl), 0 0 0 1px rgba(0, 87, 255, 0.35); font-size:0.82rem; line-height:1.55; opacity:0; visibility:hidden; transform:translateY(4px); transition:opacity 0.18s ease, transform 0.18s ease, visibility 0.18s; pointer-events:none}.tooltip-pop::before{content:''; position:absolute; bottom:-6px; left:50%; margin-left:-6px; width:12px; height:12px; background:var(--bg-dark); border-left:1px solid rgba(255, 255, 255, 0.12); border-top:1px solid rgba(255, 255, 255, 0.12); transform:rotate(45deg)}.tooltip-wrap{position:relative; display:inline-flex; align-items:center}.tooltip-wrap:hover .tooltip-pop, .tooltip-wrap:focus-within .tooltip-pop, .tooltip-wrap.tip-open .tooltip-pop{opacity:1; visibility:visible; transform:translateY(0)}/* --- Flow sections (visual + text alternati) --- */ .flow-section{display:flex; flex-direction:column; align-items:center; gap:clamp(32px, 6vh, 56px)}.flow-section .flow-visual{order:2}.flow-section .flow-text{order:1}.flow-section--reverse .flow-visual{order:2}.flow-section--reverse .flow-text{order:1}.flow-visual{width:100%; max-width:1080px; min-width:0}.flow-text{width:100%; max-width:780px; min-width:0; text-align:left}.flow-number{width:40px; height:40px; border-radius:var(--radius); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; font-size:1rem; color:#fff; background:linear-gradient(135deg, #0057FF, #5E7BFF); box-shadow:var(--glow-blue-electric); margin-bottom:16px}.flow-tags{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px}.flow-tag{font-size:0.7rem; font-weight:600; padding:4px 12px; border-radius:100px; background:var(--blue-subtle); color:var(--blue); border:1px solid rgba(94, 123, 255, 0.25)}.flow-text h3{font-size:clamp(1.3rem, 2vw, 1.6rem); font-weight:700; margin-bottom:12px; letter-spacing:-0.01em}.flow-text p{color:var(--text-secondary); font-size:0.95rem; line-height:var(--leading-relaxed); margin-bottom:16px}.flow-text ul{display:flex; flex-direction:column; gap:8px; list-style:none; padding:0; margin:0}.flow-text ul li{display:flex; align-items:flex-start; gap:10px; font-size:0.9rem; color:var(--text-secondary); line-height:1.5}.flow-text ul li i.fa-check-circle{color:var(--blue); font-size:0.85rem; margin-top:2px}/* --- App mockup (window browser) --- */ .app-mockup{background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-xl); box-shadow:var(--shadow-lg); overflow:hidden}.app-mockup-header{display:flex; align-items:center; gap:6px; padding:12px 16px; background:var(--bg-elevated); border-bottom:1px solid var(--border)}.app-mockup-dot{width:10px; height:10px; border-radius:50%; background:rgba(15, 27, 61, 0.18)}.app-mockup-dot:nth-child(1){background:#F87171}.app-mockup-dot:nth-child(2){background:#FBBF24}.app-mockup-dot:nth-child(3){background:#34D399}.app-mockup-screenshot img{display:block; width:100%; height:auto; border-radius:0 0 var(--radius-xl) var(--radius-xl)}/* --- Promotional video --- */ .promo-video-section{padding:var(--space-24) 0}.promo-video-frame{position:relative; border-radius:var(--radius-xl); overflow:hidden; background:var(--bg-card); border:1px solid var(--border); box-shadow:var(--shadow-lg)}.promo-video-frame video{display:block; width:100%; height:auto}.promo-video-badge{position:absolute; top:16px; left:16px; display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:100px; background:rgba(11, 18, 38, 0.7); color:#fff; font-size:0.8rem; font-weight:600; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px)}.promo-video-badge i{color:#FF5C5C; animation:pulse-dot 1.5s ease-in-out infinite}@keyframes pulse-dot{0%, 100%{opacity:1}50%{opacity:0.4}}/* --- Mockup calendar --- */ .mockup-calendar{display:grid; grid-template-columns:repeat(7, 1fr); gap:4px}.mockup-calendar-day{font-size:0.7rem; text-align:center; padding:6px 0; border-radius:var(--radius-sm); color:var(--text-secondary)}.mockup-calendar-day.today{background:linear-gradient(135deg, #0057FF, #5E7BFF); color:#fff; font-weight:700; box-shadow:var(--glow-blue-electric)}.mockup-calendar-day.has-post{position:relative}.mockup-calendar-day.has-post::after{content:''; position:absolute; bottom:2px; left:50%; margin-left:-3px; width:6px; height:6px; border-radius:50%; background:#0057FF}/* --- Mockup post (feed) --- */ .mockup-post{border:1px solid var(--border); border-radius:var(--radius-lg); padding:14px}.mockup-post-header{display:flex; align-items:center; gap:10px; margin-bottom:12px}.mockup-avatar{width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg, #0057FF, #7C5CE0)}.mockup-bar{height:10px; border-radius:100px; background:var(--border)}.mockup-bar--w30{width:30%}.mockup-bar--w50{width:50%}.mockup-bar--w70{width:70%}.mockup-image{aspect-ratio:4/3; border-radius:var(--radius-md); background:linear-gradient(135deg, var(--blue-subtle), var(--border)); margin-bottom:12px}.mockup-platform-badge{display:inline-flex; align-items:center; gap:4px; font-size:0.68rem; font-weight:600; padding:3px 8px; border-radius:100px; background:var(--bg-elevated); color:var(--text-secondary); border:1px solid var(--border)}/* --- Mockup analytics --- */ .mockup-stats{display:grid; grid-template-columns:repeat(3, 1fr); gap:8px}.mockup-stat{padding:12px; border-radius:var(--radius); border:1px solid var(--border); text-align:center}.mockup-stat-value{font-family:var(--font-display); font-weight:700; font-size:1.15rem; color:var(--text)}.mockup-stat-label{font-size:0.66rem; color:var(--text-muted); margin-top:2px}.trend-up{color:var(--success); font-weight:600}.trend-down{color:var(--error); font-weight:600}/* --- Cursor spotlight --- */ .cursor-spotlight{position:relative}.cursor-spotlight::after{content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:radial-gradient(400px circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(0, 87, 255, 0.08), transparent 60%); opacity:0; transition:opacity 0.3s ease}.cursor-spotlight:hover::after{opacity:1}/* --- Platforms list --- */ .platforms-list{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:32px}.platform-badge{display:inline-flex; align-items:center; gap:10px; padding:14px 24px; border-radius:100px; font-size:0.9rem; font-weight:500}.platform-icon{display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:8px; background:var(--bg-elevated)}.platform-icon i{font-size:1.1rem}/* Responsive flow */ @media (max-width:968px){.flow-section, .flow-section--reverse{gap:32px}.flow-visual{order:2 !important}.flow-text{order:1 !important}}@media (max-width:640px){.tooltip-wrap:hover .tooltip-pop, .tooltip-wrap:focus-within .tooltip-pop{visibility:hidden; opacity:0}}/* ========================================================================== SUPPORT PAGE:colorful value cards .support-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; margin-top:40px}.support-card{border-radius:var(--radius-xl); padding:28px 24px; color:#fff; position:relative; overflow:hidden; transition:var(--transition-base); min-height:180px; display:flex; flex-direction:column; justify-content:space-between}.support-card:hover{transform:translateY(-4px)}.support-card::after{content:''; position:absolute; width:140px; height:140px; border-radius:50%; background:rgba(255, 255, 255, 0.12); top:-50px; right:-50px}.support-card-icon{width:48px; height:48px; border-radius:14px; background:rgba(255, 255, 255, 0.18); display:flex; align-items:center; justify-content:center; font-size:1.3rem; margin-bottom:16px}.support-card h3{font-size:1.02rem; font-weight:700; margin-bottom:6px}.support-card p{font-size:0.84rem; opacity:0.92; line-height:1.55}.support-card--blue{background:linear-gradient(135deg, #0057FF, #2F6BFF); box-shadow:0 8px 28px rgba(0,87,255,0.35)}.support-card--purple{background:linear-gradient(135deg, #7C5CE0, #5E7BFF); box-shadow:0 8px 28px rgba(124,92,224,0.35)}.support-card--green{background:linear-gradient(135deg, #0EA57A, #34D399); box-shadow:0 8px 28px rgba(14,165,122,0.35)}.support-card--orange{background:linear-gradient(135deg, #F59E0B, #FBBF24); box-shadow:0 8px 28px rgba(245,158,11,0.35)}.support-card--cyan{background:linear-gradient(135deg, #12A5C8, #4ECBD9); box-shadow:0 8px 28px rgba(18,165,200,0.35)}.support-card--pink{background:linear-gradient(135deg, #E11D7B, #F472B6); box-shadow:0 8px 28px rgba(225,29,123,0.35)}@media (max-width:968px){.support-grid{grid-template-columns:repeat(2, 1fr)}}@media (max-width:560px){.support-grid{grid-template-columns:1fr}}/* ========================================================================== FEATURES BENTO:gradient support-card variants Reuses the support-card gradient system for platform feature cards. .bento-item.support-card{border-radius:var(--radius-xl)}.bento-item.support-card h3{font-family:var(--font-display); font-weight:700; font-size:1.05rem}.bento-item.support-card p{font-size:0.85rem; opacity:0.94}.bento-item--large.support-card{padding:40px 36px}.bento-item--large.support-card .support-card-icon{width:56px; height:56px; font-size:1.5rem; margin-bottom:20px}.bento-item--large.support-card h3{font-size:1.32rem}.bento-item--wide.support-card h3{font-size:1.12rem}/* CLS prevention */.hero-float-cards{contain:layout}