/* ─── DESIGN TOKENS ─── */ :root { --navy: #080F1E; --navy-1: #0A1628; --navy-2: #0D1F3C; --navy-3: #112340; --blue: #1A6BFF; --cyan: #00D4FF; --white: #FFFFFF; --gray: #6B83A8; --gray-2: #8DA4C4; --gray-3: #B8CCDE; --red: #FF5A5A; --green: #2ECC71; --amber: #FFB020; --border: rgba(0,212,255,0.10); --border-2: rgba(0,212,255,0.22); --grad: linear-gradient(90deg,#1A6BFF,#00D4FF); --grad-d: linear-gradient(140deg,#1A6BFF 0%,#00D4FF 100%); } /* Questi selettori NON hanno classe (*, html, body, h1-h5, a, img, button, input/textarea/select): sulle pagine /landing/*.html — dove questo è l'UNICO foglio di stile della pagina — vanno bene globali. Ma "/" (vedi app/page.tsx) inietta questo stesso HTML dentro l'albero React accanto a Tailwind e a componenti come CookieBanner: un reset universale caricato dopo i chunk Tailwind (stessa specificità, ordine di sorgente successivo) vince e sballa il layout di TUTTO ciò che non è dentro la landing (bug osservato: banner cookie React decentrato solo su "/", mai su /landing/ dove non c'è nient'altro attorno). .landing-scope avvolge il markup iniettato in HomeStaticContent.tsx — scopando qui il reset resta identico per le 9 pagine statiche (che hanno comunque quella classe sul loro effettivo tramite l'involucro), senza più fuoriuscire su "/". */ .landing-scope, .landing-scope *, .landing-scope *::before, .landing-scope *::after{box-sizing:border-box;margin:0;padding:0} .landing-scope{scroll-behavior:smooth;-webkit-text-size-adjust:100%} .landing-scope{background:var(--navy);color:var(--white);font-family:'Inter',sans-serif;font-size:16px;line-height:1.65;overflow-x:hidden;padding-top:68px} .landing-scope h1,.landing-scope h2,.landing-scope h3,.landing-scope h4,.landing-scope h5{font-family:'Space Grotesk',sans-serif;line-height:1.12;letter-spacing:-.03em} .landing-scope a{text-decoration:none;color:inherit} .landing-scope img{display:block;max-width:100%} .landing-scope button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit} .landing-scope input,.landing-scope textarea,.landing-scope select{font-family:inherit;font-size:inherit;color:inherit} .grad-text{background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent} .container{max-width:1240px;margin:0 auto;padding:0 5%} /* ─── NAV ─── */ .site-nav{ position:fixed;top:0;left:0;right:0;z-index:200; display:flex;align-items:center;justify-content:space-between;gap:24px; padding:0 5%;height:68px; background:rgba(8,15,30,0.88); backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px); border-bottom:1px solid var(--border); } .nav-logo{display:flex;align-items:center;gap:10px;flex-shrink:0} .nav-logo img{height:32px;width:auto} .nav-logo-text{ font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:22px; background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent; letter-spacing:-.04em; } .nav-pages{display:flex;align-items:center;gap:6px;justify-content:center;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)} .nav-page-link{ color:var(--gray-2);font-size:14px;font-weight:500; padding:8px 14px;border-radius:8px; transition:color .2s,background .2s; } .nav-page-link:hover{color:var(--white);background:rgba(255,255,255,.05)} .nav-page-link.active{color:var(--white);background:rgba(0,212,255,.08)} .nav-right{display:flex;align-items:center;gap:10px;flex-shrink:0} .btn-ghost{ color:var(--gray-3);font-size:13px;font-weight:600; padding:8px 16px;border-radius:8px; border:1px solid rgba(255,255,255,.14); transition:border-color .2s,color .2s; } .btn-ghost:hover{border-color:var(--cyan);color:var(--white)} .btn-cta{ background:var(--grad);color:var(--navy); font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:14px; padding:10px 22px;border-radius:100px; box-shadow:0 0 20px rgba(0,212,255,.18); transition:box-shadow .2s,transform .2s; } .btn-cta:hover{box-shadow:0 4px 32px rgba(0,212,255,.35);transform:translateY(-1px)} .nav-login{ color:var(--gray-2);font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:14px; padding:9px 14px;border-radius:8px; transition:color .2s,background .2s; } .nav-login:hover{color:var(--white);background:rgba(255,255,255,.05)} .nav-hamburger{display:none;flex-direction:column;gap:5px;padding:8px;cursor:pointer} .nav-hamburger span{display:block;width:24px;height:2px;background:var(--white);border-radius:2px;transition:transform .25s,opacity .2s} .nav-hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)} .nav-hamburger.open span:nth-child(2){opacity:0} .nav-hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .nav-drawer{ position:fixed;top:68px;left:0;right:0;z-index:199; background:rgba(8,15,30,0.98);backdrop-filter:blur(20px); border-bottom:1px solid var(--border); padding:16px 5%; transform:translateY(-110%);transition:transform .25s ease; display:flex;flex-direction:column;gap:4px; } .nav-drawer.open{transform:translateY(0)} .drawer-link{ color:var(--gray-2);font-size:16px;font-weight:500; padding:14px 12px;border-radius:8px; } .drawer-link.active{color:var(--white);background:rgba(0,212,255,.08)} .drawer-sub{display:flex;flex-direction:column;gap:2px;margin:2px 0 4px;padding-left:14px;border-left:1px solid var(--border)} .drawer-sublink{ display:flex;align-items:center;gap:10px; color:var(--gray-2);font-size:15px;font-weight:500; padding:12px 12px;border-radius:8px; } .drawer-sublink.active{color:var(--white);background:rgba(0,212,255,.08)} .drawer-sublink.disabled{color:var(--gray-3);opacity:.55;pointer-events:none;cursor:default} .drawer-sub-badge{font-size:11px;font-weight:600;color:var(--gray-3);border:1px solid var(--border);border-radius:100px;padding:2px 8px;text-transform:uppercase;letter-spacing:.04em} .drawer-cta{ margin-top:6px;background:var(--grad);color:var(--navy); font-family:'Space Grotesk',sans-serif;font-weight:700; } .drawer-cta:hover,.drawer-cta.active{color:var(--navy)} /* ─── BUTTONS (page-level) ─── */ .btn-primary{ display:inline-flex;align-items:center;gap:8px; background:var(--grad);color:var(--navy); font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:16px; padding:16px 32px;border-radius:12px; box-shadow:0 0 32px rgba(0,212,255,.28); transition:transform .2s,box-shadow .2s; } .btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 48px rgba(0,212,255,.4)} .btn-secondary{ display:inline-flex;align-items:center;gap:8px; color:var(--gray-3);font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:15px; border:1.5px solid rgba(255,255,255,.14); padding:15px 26px;border-radius:12px; transition:border-color .2s,color .2s; } .btn-secondary:hover{border-color:var(--cyan);color:var(--white)} /* ─── HOME — HERO ─── */ .home-wrap{position:relative;padding:80px 0 60px;overflow:hidden} .home-glow-1{position:absolute;top:-200px;left:-200px;width:600px;height:600px;background:radial-gradient(circle,rgba(26,107,255,.10) 0%,transparent 70%);pointer-events:none} /* Il centro del gradiente (dove è più luminoso) deve stare vicino alla linea del footer, non lontano da essa: bottom qui è la distanza fra il CENTRO del cerchio (300px di raggio) e il fondo del wrapper, quindi bottom:-80px lasciava il centro luminoso a 220px dalla linea — ancora dentro il wrapper ma lontano dal bordo, da qui la fascia che restava scura. bottom vicino a 0 porta il centro a ridosso del fondo del wrapper, cioè proprio accanto al footer. */ .home-glow-2{position:absolute;bottom:0;right:-200px;width:600px;height:600px;background:radial-gradient(circle,rgba(0,212,255,.10) 0%,transparent 70%);pointer-events:none} .home-hero{text-align:center;max-width:820px;margin:0 auto 80px;position:relative;z-index:1} .home-tagline{font-size:clamp(38px,5.5vw,64px);font-weight:800;margin-bottom:24px;line-height:1.1} .home-sub{font-size:clamp(16px,1.7vw,18px);color:var(--gray-3);max-width:640px;margin:0 auto 36px;line-height:1.75} .home-ctas{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-bottom:24px} .home-trust{font-size:13px;color:var(--gray-2)} .home-trust .hl{color:var(--cyan);font-weight:600} /* ─── HOME — EXEC CARDS (5) ─── */ .exec-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:48px} .exec-card{ display:flex;flex-direction:column;gap:14px; background:var(--navy-2);border:1px solid var(--border); border-radius:20px;padding:28px 22px; transition:border-color .3s,transform .3s;color:inherit; } .exec-card:hover{border-color:var(--border-2);transform:translateY(-4px)} .exec-icon{ width:72px;height:72px;display:flex;align-items:center;justify-content:center; } .exec-icon img{width:72px;height:72px;object-fit:contain} .exec-title{font-family:'Space Grotesk',sans-serif;font-size:18px;font-weight:700;color:var(--white)} .exec-desc{font-size:13.5px;color:var(--gray-2);line-height:1.7;flex:1} .exec-btn{ display:inline-flex;align-items:center;gap:6px; color:var(--cyan);font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:13px; margin-top:6px; } /* ─── GENERIC SECTION ─── */ .section{padding:96px 0;position:relative} .section + .section{border-top:1px solid var(--border)} .section-eyebrow{ display:inline-block;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase; color:var(--cyan);margin-bottom:14px; } .section-h1{font-size:clamp(36px,5vw,56px);font-weight:800;margin-bottom:20px;line-height:1.1} .section-h2{font-size:clamp(28px,3.6vw,42px);font-weight:700;margin-bottom:16px;line-height:1.15} .section-intro{font-size:17px;color:var(--gray-3);max-width:720px;line-height:1.75} /* ─── ABOUT — MISSION/VISION ─── */ .mv-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:48px} .mv-card{ background:var(--navy-2);border:1px solid var(--border);border-radius:20px; padding:36px 32px;display:flex;flex-direction:column;gap:18px; } .mv-label{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan)} .mv-h3{font-family:'Space Grotesk',sans-serif;font-size:22px;font-weight:700;line-height:1.2} .mv-body{font-size:15px;color:var(--gray-3);line-height:1.75} /* ─── ABOUT — SUITE TEASER (3 cards Rendy/Richy/Candy) ─── */ .suite-teaser{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px} .suite-chip{ display:flex;align-items:center;gap:14px;width:100%; background:var(--navy-2);border:1px solid var(--border); border-radius:14px;padding:16px 20px;color:inherit; font:inherit;text-align:left; transition:border-color .3s,transform .25s; cursor:pointer; } .suite-chip:hover{border-color:var(--border-2);transform:translateY(-3px)} .suite-chip-logo{width:36px;height:36px;flex-shrink:0;border-radius:10px;display:flex;align-items:center;justify-content:center;background:rgba(0,212,255,.08)} .suite-chip-logo img{width:24px;height:24px;object-fit:contain} .suite-chip-name{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:18px;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent} .suite-chip-status{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:3px 9px;border-radius:100px;white-space:nowrap;margin-left:auto} .status-live{background:rgba(0,212,255,.12);color:var(--cyan);border:1px solid rgba(0,212,255,.28)} .status-soon{background:rgba(255,176,32,.10);color:var(--amber);border:1px solid rgba(255,176,32,.28)} /* ─── TEAM ─── */ .team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px} .team-card{background:var(--navy-2);border:1px solid var(--border);border-radius:20px;padding:32px} .team-avatar{width:56px;height:56px;border-radius:50%;background:var(--grad);color:var(--navy);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;margin-bottom:16px} .team-name{font-family:'Space Grotesk',sans-serif;font-size:22px;font-weight:700;margin-bottom:4px} .team-role{font-size:13px;color:var(--cyan);font-weight:600;text-transform:uppercase;letter-spacing:.05em;margin-bottom:18px} .team-bio{font-size:14px;color:var(--gray-3);line-height:1.7;margin-bottom:20px} .team-contact{display:flex;flex-direction:column;gap:8px;font-size:13px;color:var(--gray-2)} .team-contact span{display:inline-flex;align-items:center;gap:8px} .team-contact .ic{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;color:var(--cyan);font-size:14px} /* ─── FOUNDERS BOX (team + rendy pages) ─── */ .founders-box{ margin-top:48px; background:linear-gradient(135deg,rgba(26,107,255,.10) 0%,rgba(0,212,255,.05) 100%); border:1px solid var(--border-2);border-radius:24px; padding:48px 40px; display:grid;grid-template-columns:1.4fr 1fr;gap:32px;align-items:center; } .founders-eyebrow{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.10em;text-transform:uppercase;color:var(--cyan);padding:5px 12px;border-radius:100px;background:rgba(0,212,255,.10);border:1px solid rgba(0,212,255,.25);margin-bottom:18px} .founders-h2{font-family:'Space Grotesk',sans-serif;font-size:clamp(22px,2.6vw,30px);font-weight:700;line-height:1.2;margin-bottom:16px} .founders-body{font-size:15px;color:var(--gray-3);line-height:1.75;margin-bottom:18px} .founders-chip{display:inline-block;font-size:12px;color:var(--amber);background:rgba(255,176,32,.08);border:1px solid rgba(255,176,32,.25);padding:5px 12px;border-radius:100px;font-weight:600} .founders-side{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px} .founders-progress{width:100%} .founders-progress-bar{height:6px;background:rgba(255,255,255,.08);border-radius:100px;overflow:hidden;margin-bottom:10px} .founders-progress-fill{height:100%;background:var(--grad)} .founders-pct{font-size:13px;color:var(--gray-2)} .founders-pct strong{color:var(--white);font-weight:700} .founders-cta{ display:inline-flex;align-items:center;gap:8px; background:var(--grad);color:var(--navy); font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:15px; padding:14px 28px;border-radius:100px;margin-top:6px; } /* ─── CONTACT TEASER (team page) ─── */ .contact-teaser{margin-top:64px;padding:36px;background:var(--navy-2);border:1px solid var(--border);border-radius:20px;text-align:center} .contact-teaser h3{font-family:'Space Grotesk',sans-serif;font-size:22px;font-weight:700;margin-bottom:10px} .contact-teaser p{font-size:15px;color:var(--gray-3);max-width:520px;margin:0 auto 22px;line-height:1.7} /* ─── SUITE — PRODUCT CARDS ─── */ .suite-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px} .suite-card{ background:var(--navy-2);border:1px solid var(--border); border-radius:22px;overflow:hidden; display:flex;flex-direction:column; transition:border-color .3s,transform .3s; } .suite-card:hover{border-color:var(--border-2);transform:translateY(-5px)} .suite-card-top{ padding:32px 28px 20px; background:linear-gradient(135deg,rgba(26,107,255,.08) 0%,rgba(0,212,255,.04) 100%); border-bottom:1px solid var(--border); } .suite-card-logo{width:48px;height:48px;border-radius:12px;background:rgba(0,212,255,.08);display:flex;align-items:center;justify-content:center;margin-bottom:14px} .suite-card-logo img{width:30px;height:30px;object-fit:contain} .suite-card-name{font-family:'Space Grotesk',sans-serif;font-size:28px;font-weight:800;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:6px} .suite-card-body{padding:24px 28px;flex:1;display:flex;flex-direction:column;gap:20px} .suite-card-desc{font-size:14px;color:var(--gray-3);line-height:1.75} .suite-card-features{display:flex;flex-direction:column;gap:8px} .suite-feat{display:flex;align-items:flex-start;gap:8px;font-size:13px;color:var(--gray-2)} .suite-feat::before{content:'→';color:var(--cyan);font-weight:700;flex-shrink:0;margin-top:1px} .suite-card-cta{padding:18px 28px;border-top:1px solid var(--border)} .btn-suite-primary{ display:block;width:100%;text-align:center; background:var(--grad);color:var(--navy); font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:14px; padding:13px;border-radius:10px; transition:opacity .2s,transform .2s; } .btn-suite-primary:hover{opacity:.88;transform:translateY(-1px)} button.btn-suite-waitlist{ display:block;width:100%;text-align:center; background:rgba(26,107,255,.12);color:#7EB0FF; font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:14px; padding:13px;border-radius:10px;border:1px solid rgba(26,107,255,.28); transition:background .2s,border-color .2s;cursor:pointer; } .btn-suite-waitlist:hover{background:rgba(26,107,255,.2);border-color:rgba(26,107,255,.5)} /* ─── RENDY — PROBLEM CARDS ─── */ .problem-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:48px} .problem-card{ background:var(--navy-2);border:1px solid var(--border); border-radius:18px;padding:28px 26px; } .problem-icon{width:64px;height:64px;display:flex;align-items:center;justify-content:center;margin-bottom:18px} .problem-icon img{width:64px;height:64px;object-fit:contain} .problem-h3{font-family:'Space Grotesk',sans-serif;font-size:19px;font-weight:700;margin-bottom:10px} .problem-body{font-size:14px;color:var(--gray-3);line-height:1.7} /* ─── RENDY — DASHBOARD MOCKUP ─── */ .dashboard-mock{ background:var(--navy-1);border:1px solid var(--border-2);border-radius:18px; overflow:hidden; } .dashboard-mock-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--border);background:var(--navy-2)} .dashboard-mock-dot{width:10px;height:10px;border-radius:50%} .dashboard-mock-dot.r{background:#FF5A5A} .dashboard-mock-dot.y{background:#FFB020} .dashboard-mock-dot.g{background:#5AD15A} .dashboard-mock-title{margin-left:auto;font-size:12px;color:var(--gray-2)} .dashboard-mock-body{padding:24px} .dashboard-mock-placeholder{ display:flex;align-items:center;justify-content:center; min-height:280px;color:var(--gray);font-size:14px; border:1.5px dashed rgba(255,255,255,.08);border-radius:12px; text-align:center;padding:24px; } /* SAL dashboard mock (stats + list) */ .dash-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:18px} .dash-stat{background:var(--navy);border:1px solid var(--border);border-radius:12px;padding:18px 14px;text-align:center} .dash-stat-val{font-family:'Space Grotesk',sans-serif;font-size:28px;font-weight:800;color:var(--cyan);line-height:1.1;margin-bottom:6px} .dash-stat-val.warn{color:#5AD15A} .dash-stat-lbl{font-size:11px;color:var(--gray-2);text-transform:uppercase;letter-spacing:.04em} .dash-list{display:flex;flex-direction:column;gap:6px} .dash-row{display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--navy);border:1px solid var(--border);border-radius:10px;padding:12px 14px;font-size:13px} .dash-row-name{color:var(--gray-3)} .dash-badge{font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:100px;white-space:nowrap} .dash-badge.ok{color:#5AD15A;background:rgba(90,209,90,.12)} .dash-badge.err{color:#FF7A7A;background:rgba(255,90,90,.12)} .dash-badge.warn{color:#FFB020;background:rgba(255,176,32,.12)} /* RENDY — ROADMAP */ .roadmap{margin-top:56px;padding:32px 28px;background:var(--navy-2);border:1px solid var(--border);border-radius:18px} .roadmap-head{margin-bottom:24px} .roadmap-h3{font-family:'Space Grotesk',sans-serif;font-size:22px;font-weight:700;color:var(--white);margin-top:6px} .roadmap-line{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;position:relative} .roadmap-line::before{content:'';position:absolute;left:14px;right:14px;top:8px;height:2px;background:linear-gradient(90deg,var(--cyan) 0%,var(--cyan) 40%,rgba(255,255,255,.10) 40%,rgba(255,255,255,.10) 100%);border-radius:2px} .roadmap-step{position:relative;padding-top:30px} .roadmap-dot{position:absolute;top:0;left:0;width:18px;height:18px;border-radius:50%;background:var(--navy);border:3px solid rgba(255,255,255,.20)} .roadmap-step.done .roadmap-dot,.roadmap-step.now .roadmap-dot{border-color:var(--cyan);background:var(--cyan)} .roadmap-step.now .roadmap-dot{box-shadow:0 0 0 4px rgba(0,212,255,.18)} .roadmap-when{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--cyan);margin-bottom:6px} .roadmap-step.next .roadmap-when{color:var(--gray-2)} .roadmap-what{font-family:'Space Grotesk',sans-serif;font-size:15px;font-weight:700;color:var(--white);line-height:1.4} .roadmap-what span{display:block;font-family:'Inter',sans-serif;font-size:12.5px;font-weight:400;color:var(--gray-3);margin-top:4px;line-height:1.55} @media(max-width:900px){.roadmap-line{grid-template-columns:1fr;gap:24px}.roadmap-line::before{display:none}} /* ─── RENDY — FEATURE GRID ─── */ .feature-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:48px} .feature-grid-3{grid-template-columns:repeat(3,1fr);gap:22px} @media(max-width:1024px){.feature-grid-3{grid-template-columns:1fr}} .feature-card{ background:var(--navy-2);border:1px solid var(--border); border-radius:16px;padding:24px 26px;display:flex;gap:16px;align-items:flex-start; } .feature-grid-3 .feature-card{flex-direction:column;gap:18px} .feature-grid-3 .feature-body{font-size:14px;line-height:1.7} .feature-icon{width:60px;height:60px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--cyan);font-size:20px} .feature-icon img{width:60px;height:60px;object-fit:contain} .feature-h4{font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:700;margin-bottom:6px} .feature-body{font-size:13.5px;color:var(--gray-3);line-height:1.65} /* ─── RENDY — WAITLIST FORM ─── */ .waitlist-box{ margin-top:64px; background:linear-gradient(135deg,rgba(26,107,255,.10) 0%,rgba(0,212,255,.05) 100%); border:1px solid var(--border-2);border-radius:22px; padding:40px 36px; } .waitlist-row{display:grid;grid-template-columns:1.4fr 1fr;gap:24px;align-items:start} .waitlist-title{font-family:'Space Grotesk',sans-serif;font-size:24px;font-weight:700;margin-bottom:10px} .waitlist-sub{font-size:14px;color:var(--gray-3);line-height:1.7} .waitlist-form{display:flex;flex-direction:column;gap:12px} .waitlist-form input[type="email"]{ background:var(--navy);border:1px solid var(--border-2);border-radius:10px; padding:14px 16px;color:var(--white);font-size:14px; } .waitlist-form input[type="email"]:focus{outline:none;border-color:var(--cyan)} .waitlist-checks{display:flex;flex-direction:column;gap:8px;font-size:13px;color:var(--gray-2)} .waitlist-checks label{display:block;position:relative;padding-left:26px;cursor:pointer} .waitlist-checks input[type="checkbox"]{position:absolute;left:0;top:3px;accent-color:var(--cyan)} a.btn-waitlist,button.btn-waitlist{ background:var(--grad);color:var(--navy); font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:14px; padding:14px;border-radius:10px;text-align:center; } /* ─── CONTATTI ─── */ .contact-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:32px;margin-top:48px} .contact-channels{display:flex;flex-direction:column;gap:14px} .contact-channel{ display:flex;align-items:center;gap:14px; background:var(--navy-2);border:1px solid var(--border); border-radius:14px;padding:18px 22px; } .contact-channel .ic{width:36px;height:36px;flex-shrink:0;border-radius:10px;background:rgba(0,212,255,.08);display:flex;align-items:center;justify-content:center;color:var(--cyan);font-weight:700} .contact-channel-label{font-size:11px;color:var(--gray);letter-spacing:.08em;text-transform:uppercase;font-weight:700;margin-bottom:2px} .contact-channel-value{font-size:14px;color:var(--white);font-weight:500} .contact-channel a{color:inherit} .contact-form{ background:var(--navy-2);border:1px solid var(--border); border-radius:18px;padding:32px;display:flex;flex-direction:column;gap:18px; } .contact-form h3{font-family:'Space Grotesk',sans-serif;font-size:20px;font-weight:700} .contact-form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px} .form-group{display:flex;flex-direction:column;gap:6px} .form-group label{font-size:12px;color:var(--gray);font-weight:600;letter-spacing:.04em;text-transform:uppercase} .form-group input,.form-group textarea{ background:var(--navy);border:1px solid var(--border-2);border-radius:10px; padding:13px 14px;color:var(--white);font-size:14px; transition:border-color .15s; } .form-group input:focus,.form-group textarea:focus{outline:none;border-color:var(--cyan)} .form-group textarea{min-height:120px;resize:vertical} .contact-form button[type="submit"]{ background:var(--grad);color:var(--navy); font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:15px; padding:14px;border-radius:10px; } /* ─── VALIDAZIONE FORM (errori) ─── */ .field-invalid, .form-group input.field-invalid, .form-group textarea.field-invalid, .waitlist-form input.field-invalid{ border-color:var(--red) !important; box-shadow:0 0 0 2px rgba(255,90,90,.22) !important; } .waitlist-checks label.field-invalid{color:var(--red)} .waitlist-checks label a{color:var(--cyan);text-decoration:underline} .form-error-banner{ color:var(--red);font-size:13px;font-weight:600; margin:0 0 4px;padding:10px 14px; background:rgba(255,90,90,.10);border:1px solid rgba(255,90,90,.35);border-radius:10px; } /* ─── WAITLIST POPUP (suite + about) ─── */ .modal-overlay{ position:fixed;inset:0;background:rgba(8,15,30,.78); display:flex;align-items:center;justify-content:center;padding:20px; z-index:300;opacity:0;pointer-events:none;transition:opacity .2s; } .modal-overlay.open{opacity:1;pointer-events:auto} .modal{ background:var(--navy-1);border:1px solid var(--border-2);border-radius:20px; max-width:460px;width:100%;padding:36px 32px;position:relative; } .modal-close{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--gray-2);font-size:18px} .modal-close:hover{color:var(--white);background:rgba(255,255,255,.08)} .modal h3{font-family:'Space Grotesk',sans-serif;font-size:20px;font-weight:700;margin-bottom:8px} .modal h3.modal-title-success{color:var(--green)} .modal p{font-size:14px;color:var(--gray-3);line-height:1.7;margin-bottom:18px} /* ─── FOOTER ─── */ .site-footer{ border-top:1px solid var(--border); padding:48px 5% 32px;margin-top:64px; } .footer-inner{max-width:1240px;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:space-between;gap:32px;align-items:flex-start} .footer-logo{display:flex;align-items:center;gap:10px;flex-shrink:0} .footer-logo img{height:30px} .footer-nav{display:flex;flex-wrap:wrap;gap:16px;font-size:13px;color:var(--gray-2);flex:1;justify-content:center} .footer-nav a:hover{color:var(--white)} .footer-meta{font-size:12px;color:var(--gray);text-align:right;line-height:1.7} .footer-meta a{color:var(--cyan)} .footer-legal{max-width:1240px;margin:24px auto 0;padding-top:18px;border-top:1px solid var(--border);font-size:12px;color:var(--gray);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px} .footer-legal a{color:var(--gray-2)} .footer-legal a:hover{color:var(--cyan)} /* ─── REVEAL ON SCROLL (subtle) ─── */ .reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease} .reveal.visible{opacity:1;transform:translateY(0)} /* ─── RESPONSIVE ─── */ @media(max-width:1024px){ .exec-grid{grid-template-columns:repeat(2,1fr)} .suite-grid{grid-template-columns:1fr} .feature-grid{grid-template-columns:1fr} .contact-grid{grid-template-columns:1fr} .founders-box{grid-template-columns:1fr} .waitlist-row{grid-template-columns:1fr} } @media(max-width:768px){ body{padding-top:60px} .site-nav{height:60px} .nav-pages,.nav-right .btn-ghost,.nav-right .btn-cta,.nav-right .nav-login{display:none} .nav-hamburger{display:flex} .nav-drawer{top:60px} .exec-grid{grid-template-columns:1fr 1fr} .mv-grid{grid-template-columns:1fr} .team-grid{grid-template-columns:1fr} .suite-teaser{grid-template-columns:1fr} .problem-grid{grid-template-columns:1fr} .contact-form-row{grid-template-columns:1fr} .footer-inner{flex-direction:column;align-items:flex-start;gap:18px} .footer-nav{justify-content:flex-start} .footer-meta{text-align:left} .footer-legal{flex-direction:column;gap:8px} /* Su desktop i 600px di diametro con offset -200px lasciano vedere solo la porzione centrale già sfumata del cerchio radiale (il bordo netto cade fuori dal viewport). Su mobile lo stesso offset porta il bordo dentro al viewport, in un punto dove il gradiente non si è ancora dissolto — da qui il taglio visibile sopra/sotto la hero. Cerchio più piccolo e offset proporzionalmente più profondo: il bordo resta fuori dal viewport come su desktop invece di limitarsi a scalare con esso. */ .home-glow-1,.home-glow-2{width:320px;height:320px} .home-glow-1{top:-160px;left:-140px} /* Stesso ragionamento di .home-glow-2 desktop sopra: bottom è la distanza del CENTRO del cerchio dal fondo del wrapper, quindi deve stare vicino a 0 perché la parte più luminosa del gradiente sia a ridosso del footer invece che lontana da esso. */ .home-glow-2{bottom:0;right:-140px} } @media(max-width:500px){ .exec-grid{grid-template-columns:1fr} .home-ctas{flex-direction:column;align-items:stretch} .btn-primary,.btn-secondary{width:100%;justify-content:center;text-align:center} } /* ─── NAV SUITE DROPDOWN (slide 9) ─── */ .nav-suite{position:relative;display:flex;align-items:center} .nav-suite-toggle{display:inline-flex;align-items:center;gap:5px} .nav-suite-caret{font-size:10px;transition:transform .2s} .nav-suite:hover .nav-suite-caret,.nav-suite:focus-within .nav-suite-caret{transform:rotate(180deg)} .nav-suite-menu{ position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(-6px); min-width:230px;background:var(--navy-2);border:1px solid var(--border-2);border-radius:14px; padding:8px;display:flex;flex-direction:column;gap:4px; box-shadow:0 18px 50px rgba(0,0,0,.45); opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s,transform .18s;z-index:60; } .nav-suite:hover .nav-suite-menu,.nav-suite:focus-within .nav-suite-menu{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)} .nav-suite-menu::before{content:'';position:absolute;bottom:100%;left:0;right:0;height:14px} .nav-suite-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;text-decoration:none;transition:background .15s} a.nav-suite-item:hover{background:rgba(0,212,255,.08)} a.nav-suite-item.active{background:rgba(0,212,255,.10)} .nav-suite-item.disabled{opacity:.42;cursor:not-allowed} .nav-suite-item-logo{width:30px;height:30px;flex-shrink:0;border-radius:8px;display:flex;align-items:center;justify-content:center;background:rgba(0,212,255,.08)} .nav-suite-item-logo img{width:20px;height:20px;object-fit:contain} .nav-suite-item-name{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:15px;color:var(--white)} .nav-suite-item-badge{margin-left:auto;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:2px 8px;border-radius:100px;white-space:nowrap} .nav-suite-item-badge.live{background:rgba(0,212,255,.12);color:var(--cyan);border:1px solid rgba(0,212,255,.28)} .nav-suite-item-badge.soon{background:rgba(255,176,32,.10);color:var(--amber);border:1px solid rgba(255,176,32,.28)} @media(max-width:920px){.nav-suite-menu{display:none}} /* ─── FIX CHECKBOX PRIVACY POLICY: evita che il link spezzi le parole (slide 2/4) ─── */ .waitlist-checks label a{white-space:nowrap} /* ─── PAGINE LEGALI: Privacy / Cookie Policy (slide 5/6) ─── */ .legal-doc{max-width:820px;margin-top:8px;color:var(--gray-3);font-size:15.5px;line-height:1.8} .legal-doc .legal-subtitle{font-style:italic;color:var(--gray-2);margin:-4px 0 28px} .legal-doc h2{font-family:'Space Grotesk',sans-serif;font-size:20px;font-weight:700;color:var(--white);margin:38px 0 10px;padding-bottom:8px;border-bottom:1px solid var(--border)} .legal-doc h3{font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:700;color:var(--white);margin:24px 0 4px} .legal-doc p{margin:0 0 14px} .legal-doc ul{padding-left:22px;margin:0 0 16px} .legal-doc li{margin-bottom:8px} .legal-doc a{color:var(--cyan);text-decoration:underline;word-break:break-word} .legal-doc hr{border:none;border-top:1px solid var(--border);margin:28px 0} .legal-doc .base-giuridica{font-style:italic;color:var(--gray-2);font-size:14px;margin:0 0 12px} .legal-doc .last-updated{font-style:italic;color:var(--gray-2);font-size:14px} .legal-doc .footer-note{color:var(--gray-2);font-size:14px;margin-top:36px} .legal-doc table{width:100%;border-collapse:collapse;font-size:14px;margin:18px 0} .legal-doc th{background:rgba(0,212,255,.06);text-align:left;padding:9px 11px;border:1px solid var(--border-2);font-weight:700;color:var(--white)} .legal-doc td{padding:8px 11px;border:1px solid var(--border);vertical-align:top} .legal-doc .notice{background:rgba(255,176,32,.08);border-left:3px solid var(--amber);padding:12px 16px;margin:20px 0;font-size:14px;color:var(--gray-3);border-radius:0 8px 8px 0} .legal-doc .notice strong{color:var(--amber)} .team-photo{width:88px;height:88px;border-radius:50%;object-fit:cover;margin:0 auto 18px;display:block;border:2px solid var(--border-2)} /* ─── RENDY · FUNZIONALITÀ A LAYOUT ALTERNATO (slide 10) ─── */ .feat-rows{display:flex;flex-direction:column;gap:56px;margin-top:8px} .feat-row{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center} .feat-row.reverse .feat-text{order:2} .feat-row.reverse .feat-visual{order:1} .feat-text .feature-icon{margin-bottom:14px} .feat-text .feature-h4{font-family:'Space Grotesk',sans-serif;font-size:22px;font-weight:700;color:var(--white);margin-bottom:12px;line-height:1.25} .feat-text .feature-body{font-size:15.5px;color:var(--gray-3);line-height:1.75;margin-bottom:22px} .feat-cta{display:inline-flex} .feat-visual{display:flex;justify-content:center} .feat-mock{width:100%;background:var(--navy-2);border:1px solid var(--border-2);border-radius:18px;padding:22px;box-shadow:0 18px 50px rgba(0,0,0,.35);display:flex;flex-direction:column;gap:10px} @media(max-width:900px){ .feat-row,.feat-row.reverse{grid-template-columns:1fr;gap:24px} .feat-row.reverse .feat-text{order:1} .feat-row.reverse .feat-visual{order:2} }