@font-face { font-family:"Ubuntu"; src:url("../assets/fonts/ubuntu-400.ttf") format("truetype"); font-weight:400; font-style:normal; font-display:swap; }
:root { --bg:#020b19; --surface:#121212; --surface-hi:#191919; --text:#f7f6f2; --muted:#aaa9a4; --line:rgba(255,255,255,.13); --accent:#2198D6; --accent-light:#68bee8; --shell:min(1180px, calc(100% - 48px)); --ease:cubic-bezier(.22,.61,.36,1); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; overflow-x:hidden; background:var(--bg); color:var(--text); font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; line-height:1.5; } a { color:inherit; } a:focus-visible { outline:3px solid var(--accent-light); outline-offset:5px; } .shell { width:var(--shell); margin-inline:auto; }
.site-loader { position:fixed; z-index:100; inset:0; display:grid; place-content:center; justify-items:center; background:#020b19; color:var(--text); transition:opacity .24s var(--ease),visibility .24s var(--ease); }
.site-loader.is-hidden { visibility:hidden; opacity:0; pointer-events:none; }
.site-loader.is-exiting .loader-graphic { opacity:0; transform:scale(18); transition:transform .72s cubic-bezier(.2,.8,.2,1),opacity .72s ease; }
.site-loader.is-exiting .loader-label,.site-loader.is-exiting .loader-copy { opacity:0; transform:translateY(8px); transition:opacity .18s ease,transform .18s ease; }
.loader-graphic { position:relative; width:190px; height:104px; margin-bottom:22px; transform-origin:50% 50%; transition:transform .72s cubic-bezier(.2,.8,.2,1),opacity .72s ease; }
.loader-ring { position:absolute; top:21px; left:0; width:190px; height:64px; border:1px solid rgba(104,190,232,.62); border-radius:50%; transform:rotateX(66deg); animation:loader-orbit 2.8s ease-in-out infinite; }
.loader-ring-inner { top:30px; left:29px; width:132px; height:43px; border-color:rgba(33,152,214,.4); animation-delay:-1.4s; }
.loader-core { position:absolute; top:49px; left:91px; width:8px; height:8px; border-radius:50%; background:var(--accent-light); box-shadow:0 0 13px rgba(104,190,232,.8); animation:loader-pulse 1.25s ease-in-out infinite; }
.loader-label { margin:0 0 5px; color:var(--accent-light); font-size:12px; font-weight:800; letter-spacing:.22em; transition:opacity .18s ease,transform .18s ease; }
.loader-copy { margin:0; color:#d5d9da; font-size:14px; transition:opacity .18s ease,transform .18s ease; }
@keyframes loader-orbit { 0%,100% { opacity:.36; transform:rotateX(66deg) scale(.92); } 50% { opacity:1; transform:rotateX(66deg) scale(1.06); } }
@keyframes loader-pulse { 0%,100% { transform:scale(.72); opacity:.55; } 50% { transform:scale(1.18); opacity:1; } }
.cursor-light { z-index:0; pointer-events:none; position:fixed; inset:0; overflow:hidden; } .cursor-light-core { position:absolute; width:360px; height:360px; border-radius:50%; background:radial-gradient(circle,rgba(33,152,214,.18),rgba(33,152,214,0) 67%); transform:translate(-50%,-50%); filter:blur(8px); }
.site-header { z-index:10; position:fixed; inset:0 0 auto; border-bottom:1px solid rgba(255,255,255,.07); background:rgba(2,11,25,.74); backdrop-filter:blur(16px); } .nav-shell { min-height:96px; display:flex; align-items:center; justify-content:center; } .brand { width:210px; line-height:0; } .brand img { display:block; width:100%; height:auto; } .main-nav { display:flex; align-items:center; gap:30px; } .main-nav a { color:#d0cfca; font-size:13px; text-decoration:none; transition:color .2s var(--ease); } .main-nav a:hover { color:#fff; } .nav-action { min-height:38px; display:inline-flex; align-items:center; gap:9px; padding:0 14px; border:1px solid var(--line); border-radius:999px; font-size:13px; font-weight:650; text-decoration:none; transition:background .2s var(--ease),border-color .2s var(--ease); } .nav-action:hover { border-color:var(--accent); background:var(--accent); }
.hero { z-index:1; position:relative; min-height:930px; padding:175px 0 90px; overflow:hidden; isolation:isolate; } .hero-content { position:relative; z-index:2; text-align:center; display:flex; flex-direction:column; align-items:center; } .announcement,.eyebrow { margin:0; color:#c9c5bd; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; } .announcement { display:inline-flex; align-items:center; gap:9px; padding:8px 13px; border:1px solid var(--line); border-radius:999px; background:rgba(19,19,19,.72); } .announcement-dot { width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 12px var(--accent); } h1,h2,h3,p { margin-top:0; } h1 { max-width:980px; margin:29px 0 22px; font-size:3.5rem; font-weight:650; letter-spacing:-.07em; line-height:1.1; } .hero h1 { font-family:"League Spartan",Inter,ui-sans-serif,system-ui,sans-serif; font-weight:700; } h1 em { color:#8d8a84; font-style:normal; } .hero-copy { max-width:590px; margin-bottom:29px; color:var(--muted); font-size:18px; } .hero-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; } .button { min-height:48px; display:inline-flex; align-items:center; justify-content:center; gap:18px; padding:0 21px; border-radius:8px; font-size:14px; font-weight:700; text-decoration:none; transition:transform .2s var(--ease),background .2s var(--ease),border-color .2s var(--ease); } .button:hover { transform:translateY(-3px); } .button-primary { background:var(--accent); color:#fff; box-shadow:0 13px 32px rgba(33,152,214,.2); } .button-primary:hover { background:var(--accent-light); } .button-quiet { border:1px solid var(--line); color:#e9e7e1; background:rgba(20,20,20,.62); } .button-quiet:hover { border-color:rgba(255,255,255,.35); }
.product-stage { position:relative; width:min(930px,100%); height:326px; margin-top:52px; perspective:1300px; } .stage-grid { position:absolute; inset:100px 3% 0; opacity:.42; background:linear-gradient(rgba(33,152,214,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(33,152,214,.12) 1px,transparent 1px); background-size:28px 28px; mask-image:linear-gradient(to bottom,transparent,black 35%,transparent); transform:perspective(500px) rotateX(58deg); transform-origin:top; } .core-panel,.floating-panel { border:1px solid rgba(255,255,255,.16); background:linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,.02) 40%),rgba(18,18,18,.9); box-shadow:0 28px 55px rgba(0,0,0,.4); backdrop-filter:blur(10px); } .core-panel { position:absolute; z-index:2; inset:24px 25% 0; min-width:350px; border-radius:16px; overflow:hidden; transform:rotateX(6deg); animation:core-float 7s ease-in-out infinite; } .core-panel-top,.core-panel-footer { display:flex; align-items:center; justify-content:space-between; padding:13px 17px; border-bottom:1px solid var(--line); color:#a9a7a1; font-size:9px; font-weight:700; letter-spacing:.11em; } .core-panel-footer { border-top:1px solid var(--line); border-bottom:0; color:#d3d0c9; } .status { color:#d8d5ce; } .status i { display:inline-block; width:5px; height:5px; margin-right:4px; border-radius:50%; background:#75d570; box-shadow:0 0 8px #75d570; } .core-panel-body { padding:22px 23px 19px; text-align:left; } .panel-kicker { margin-bottom:7px; color:var(--accent-light); font-size:10px; font-weight:700; letter-spacing:.1em; } .core-panel h2 { margin-bottom:11px; font-size:35px; letter-spacing:-.055em; line-height:1; } .core-panel-body > p:not(.panel-kicker) { max-width:310px; margin-bottom:21px; color:#aaa8a2; font-size:12px; } .data-row { display:grid; grid-template-columns:1fr auto; gap:8px; color:#bdbab3; font-size:9px; letter-spacing:.08em; } .data-row b { color:var(--accent-light); } .data-bar { grid-column:1/-1; height:4px; overflow:hidden; border-radius:8px; background:#34312d; } .data-bar i { display:block; width:88%; height:100%; background:linear-gradient(90deg,var(--accent),var(--accent-light)); } .floating-panel { position:absolute; z-index:1; width:230px; padding:18px; border-radius:12px; text-align:left; } .panel-left { top:75px; left:5%; transform:rotateY(17deg) rotateZ(-5deg); animation:left-float 6s ease-in-out infinite; } .panel-right { right:5%; top:82px; transform:rotateY(-17deg) rotateZ(5deg); animation:right-float 6.7s ease-in-out infinite; } .panel-label { display:block; margin-bottom:32px; color:#9c9992; font-size:9px; font-weight:700; letter-spacing:.1em; } .floating-panel strong { display:block; font-size:21px; letter-spacing:-.05em; } .panel-line { display:block; width:100%; height:1px; margin:15px 0 10px; background:var(--line); } .floating-panel small { color:#afada7; font-size:11px; }
.areas { position:relative; z-index:2; padding:110px 0 130px; } .section-heading { display:flex; justify-content:space-between; align-items:end; gap:30px; margin-bottom:34px; } .section-heading h2,.process-grid h2 { max-width:680px; margin:0; font-size:clamp(2.25rem,4.5vw,4.4rem); font-weight:620; letter-spacing:-.06em; line-height:.97; } .area-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; } .area-card { position:relative; min-height:370px; display:flex; flex-direction:column; padding:25px; overflow:hidden; border:1px solid var(--line); border-radius:14px; background:linear-gradient(145deg,#1b1b1b,#101010 65%); color:var(--text); text-decoration:none; transition:border-color .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease); } .area-card:hover { transform:translateY(-8px); border-color:rgba(33,152,214,.75); box-shadow:0 24px 44px rgba(0,0,0,.3); } .card-number { color:var(--accent-light); font-size:10px; font-weight:700; letter-spacing:.11em; } .corner-mark { position:absolute; top:0; right:0; width:56px; height:56px; border-left:1px solid var(--line); border-bottom:1px solid var(--line); clip-path:polygon(100% 0,100% 100%,0 0); } .area-card h3 { max-width:260px; margin:57px 0 15px; font-size:clamp(1.65rem,2.3vw,2.25rem); font-weight:600; letter-spacing:-.055em; line-height:1.02; } .area-card p { max-width:280px; color:var(--muted); font-size:14px; } .card-link { display:flex; justify-content:space-between; align-items:center; gap:13px; margin-top:auto; padding-top:18px; border-top:1px solid var(--line); font-size:12px; font-weight:700; } .card-link b { color:var(--accent); font-size:20px; transition:transform .2s var(--ease); } .area-card:hover .card-link b { transform:translate(4px,-4px); }
.process-section { border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:#101010; } .process-grid { display:grid; grid-template-columns:1fr 2fr; gap:50px; padding:105px 0; } .process-grid h2 { margin-bottom:26px; } .process-grid div p { max-width:480px; margin:0; color:var(--muted); font-size:17px; } .site-footer { padding:30px 0; } .footer-inner { display:flex; align-items:center; justify-content:space-between; gap:24px; color:#9c9992; font-size:12px; } .footer-inner p { margin:0; } .footer-inner a { margin-right:17px; text-decoration:none; transition:color .2s var(--ease); } .footer-inner a:hover { color:var(--accent-light); } .footer-inner p:last-child { text-align:right; }
.reveal { opacity:0; transform:translateY(18px); transition:opacity .55s var(--ease),transform .55s var(--ease); } .reveal.is-visible { opacity:1; transform:translateY(0); } .area-card:nth-child(2) { transition-delay:.07s; } .area-card:nth-child(3) { transition-delay:.14s; }
@keyframes core-float { 0%,100% { transform:rotateX(6deg) translateY(0); } 50% { transform:rotateX(6deg) translateY(-10px); } } @keyframes left-float { 0%,100% { transform:rotateY(17deg) rotateZ(-5deg) translateY(0); } 50% { transform:rotateY(17deg) rotateZ(-5deg) translateY(-13px); } } @keyframes right-float { 0%,100% { transform:rotateY(-17deg) rotateZ(5deg) translateY(0); } 50% { transform:rotateY(-17deg) rotateZ(5deg) translateY(11px); } }
@media (max-width:800px) { :root { --shell:min(calc(100% - 32px),1180px); } .main-nav { display:none; } .nav-shell { min-height:82px; } .brand { width:172px; } .hero { min-height:860px; padding-top:135px; } h1 { font-size:3.5rem; } .hero-copy { font-size:16px; } .product-stage { height:300px; margin-top:38px; } .core-panel { inset:54px 11% 0; min-width:0; } .panel-left { top:15px; left:-3px; } .panel-right { top:24px; right:-3px; } .floating-panel { width:150px; padding:13px; } .panel-label { margin-bottom:18px; font-size:8px; } .floating-panel strong { font-size:16px; } .floating-panel small { display:none; } .area-grid,.process-grid { grid-template-columns:1fr; } .section-heading { display:block; } .section-heading .eyebrow { margin-bottom:18px; } .areas { padding:75px 0; } .area-card { min-height:300px; } .process-grid { gap:26px; padding:74px 0; } .footer-inner { align-items:flex-start; flex-direction:column; gap:16px; } .footer-inner p:last-child { text-align:left; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } .reveal { opacity:1; transform:none; } .cursor-light { display:none; } }

.hero h1 { font-family:"Ubuntu"; font-weight:400; letter-spacing:normal; }
.hero h1 em { color:var(--accent); }
.cursor-light { z-index:6; }


/* Selettore delle aree: la card aggiorna il pannello principale. */
.floating-panel { color:var(--text); cursor:pointer; font:inherit; transition:border-color .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease); }
.floating-panel:hover,.floating-panel.is-active { border-color:var(--accent-light); background:linear-gradient(135deg,rgba(33,152,214,.2),rgba(18,18,18,.92) 55%); box-shadow:0 20px 42px rgba(33,152,214,.13); }
.area-card { width:100%; cursor:pointer; font:inherit; text-align:left; touch-action:manipulation; }
.area-card.is-active { border-color:rgba(33,152,214,.75); background:linear-gradient(145deg,rgba(33,152,214,.2),#13110f 65%); box-shadow:0 24px 44px rgba(0,0,0,.3); }
.area-card:active { transform:translateY(-3px) scale(.995); }
.area-card.is-active .card-link b { transform:translate(4px,-4px); }
.core-panel.is-updating { animation:panel-swap .38s var(--ease); }
@keyframes panel-swap { 0% { opacity:1; } 45% { opacity:.2; transform:rotateX(6deg) scale(.97); } 100% { opacity:1; } }

/* I tre pannelli restano sempre leggibili: nessun elemento copre gli altri. */
.product-stage { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); align-items:end; gap:20px; height:330px; }
.product-stage .floating-panel,.product-stage .core-panel { position:relative; inset:auto; width:auto; min-width:0; }
.product-stage .panel-left { grid-column:1; grid-row:1; top:auto; left:auto; }
.product-stage .core-panel { grid-column:2; grid-row:1; height:302px; }
.product-stage .panel-right { grid-column:3; grid-row:1; top:auto; right:auto; }

@media (max-width:800px) {
  .product-stage { height:auto; grid-template-columns:1fr; gap:14px; }
  .product-stage .floating-panel,.product-stage .core-panel { grid-column:auto; grid-row:auto; width:100%; }
  .product-stage .panel-left { order:1; }
  .product-stage .core-panel { order:2; height:auto; min-height:280px; }
  .product-stage .panel-right { order:3; }
  .product-stage .floating-panel { min-height:140px; }
}

/* I pannelli sono informativi, uniformi e non interattivi. */
.product-stage .hero-panel { grid-row:1; height:302px; }
.product-stage .hero-panel:nth-of-type(1) { grid-column:1; animation:left-float 6s ease-in-out infinite; }
.product-stage .hero-panel:nth-of-type(2) { grid-column:2; animation:core-float 7s ease-in-out infinite; }
.product-stage .hero-panel:nth-of-type(3) { grid-column:3; animation:right-float 6.7s ease-in-out infinite; }
.area-card { cursor:default; touch-action:auto; }
.area-card:hover { transform:none; border-color:var(--line); box-shadow:none; }
.area-card:hover .card-link b { transform:none; }

@media (max-width:800px) {
  .product-stage .hero-panel { grid-column:auto; grid-row:auto; min-height:280px; height:auto; }
  .product-stage .hero-panel:nth-of-type(1) { order:1; }
  .product-stage .hero-panel:nth-of-type(2) { order:2; }
  .product-stage .hero-panel:nth-of-type(3) { order:3; }
}

/* Movimento verticale: pannelli sempre frontali e allineati. */
.product-stage .hero-panel { transform:none; }
.product-stage .hero-panel:nth-of-type(1) { animation:hero-drift-one 6s ease-in-out infinite; }
.product-stage .hero-panel:nth-of-type(2) { animation:hero-drift-two 7s ease-in-out infinite; }
.product-stage .hero-panel:nth-of-type(3) { animation:hero-drift-three 6.7s ease-in-out infinite; }
.hero-panel .core-panel-body h3 { margin:0 0 9px; color:#e7e4dd; font-size:14px; font-weight:650; letter-spacing:-.02em; line-height:1.2; }
.hero-panel .panel-brand { display:flex; align-items:center; height:46px; margin:0 0 11px; }
.hero-panel .panel-brand img { display:block; width:auto; max-width:100%; height:46px; }
@keyframes hero-drift-one { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-8px); } }
@keyframes hero-drift-two { 0%,100% { transform:translateY(-5px); } 50% { transform:translateY(5px); } }
@keyframes hero-drift-three { 0%,100% { transform:translateY(3px); } 50% { transform:translateY(-6px); } }

/* Accento NeaLogic: blu. */
:root { --accent:#2198D6; --accent-light:#68bee8; }
.product-stage { width:min(1120px,100%); }
.cursor-light-core { background:radial-gradient(circle,rgba(33,152,214,.18),rgba(33,152,214,0) 67%); }
.button-primary { box-shadow:0 13px 32px rgba(33,152,214,.2); }
.stage-grid { background:linear-gradient(rgba(33,152,214,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(33,152,214,.12) 1px,transparent 1px); }

/* Segnale di sincronizzazione dei pannelli. */
.hero-panel::before { position:absolute; z-index:3; top:0; left:0; width:42%; height:2px; content:""; background:linear-gradient(90deg,transparent,var(--accent-light),transparent); box-shadow:0 0 13px rgba(33,152,214,.7); animation:sync-scan 7.4s linear infinite; }
.hero-panel:nth-of-type(2)::before { animation-delay:2.45s; }
.hero-panel:nth-of-type(3)::before { animation-delay:4.9s; }
.hero-panel .status i { animation:status-pulse 2.4s ease-in-out infinite; }
.hero-panel .data-bar i { position:relative; overflow:hidden; }
.hero-panel .data-bar i::after { position:absolute; top:0; bottom:0; width:28px; content:""; background:linear-gradient(90deg,transparent,rgba(255,255,255,.72),transparent); animation:data-pulse 4.5s ease-in-out infinite; }
.hero-panel:nth-of-type(2) .data-bar i::after { animation-delay:1.1s; }
.hero-panel:nth-of-type(3) .data-bar i::after { animation-delay:2.2s; }
@keyframes sync-scan { 0%,15% { transform:translateX(-130%); opacity:0; } 20% { opacity:1; } 42%,100% { transform:translateX(335%); opacity:0; } }
@keyframes status-pulse { 0%,100% { opacity:.5; box-shadow:0 0 4px #75d570; } 50% { opacity:1; box-shadow:0 0 12px #75d570; } }
@keyframes data-pulse { 0%,55% { transform:translateX(-36px); opacity:0; } 60% { opacity:1; } 82%,100% { transform:translateX(280px); opacity:0; } }

/* Flusso luminoso diffuso su tutta la superficie, sotto ai contenuti. */
.hero-panel::after { position:absolute; z-index:0; inset:-55%; content:""; pointer-events:none; background:radial-gradient(circle,rgba(33,152,214,.15) 0,rgba(33,152,214,.045) 23%,transparent 54%); animation:ambient-flow 12s ease-in-out infinite; }
.hero-panel:nth-of-type(2)::after { animation-delay:-4s; }
.hero-panel:nth-of-type(3)::after { animation-delay:-8s; }
.hero-panel .core-panel-top,.hero-panel .core-panel-body,.hero-panel .core-panel-footer { position:relative; z-index:1; }
@keyframes ambient-flow { 0%,100% { transform:translate3d(-13%,-8%,0) scale(.92); opacity:.38; } 50% { transform:translate3d(17%,12%,0) scale(1.08); opacity:.75; } }

/* CTA ispirata al bottone "Get started" del riferimento. */
.product-stage { height:374px; }
.product-stage .hero-panel { height:346px; }
.panel-cta { position:relative; z-index:0; min-height:42px; display:flex; align-items:center; justify-content:center; width:100%; margin:0 0 17px; padding:10px 16px; overflow:hidden; border:1px solid rgba(214,241,255,.38); border-radius:10px; background:#126a99; background-image:linear-gradient(112deg,rgba(255,255,255,.15),transparent 32%),radial-gradient(ellipse at 25% 120%,#4cc2fa 0,transparent 52%),linear-gradient(116deg,#1689c4 4%,#126895 94%); box-shadow:inset 0 1px 0 rgba(255,255,255,.29),inset 0 -10px 16px rgba(0,43,69,.26),0 8px 22px rgba(4,105,160,.25); color:#fff; font-size:13px; font-weight:650; line-height:1; text-decoration:none; transition:border-color .35s ease,box-shadow .35s ease,transform .35s cubic-bezier(.175,.885,.32,1.275),filter .35s ease,opacity .28s ease; }
.panel-cta::before { content:""; position:absolute; z-index:-1; inset:0; opacity:.35; background:repeating-linear-gradient(115deg,transparent 0 7px,rgba(255,255,255,.16) 8px,transparent 9px 16px); transform:translateX(-34%); transition:transform .55s cubic-bezier(.2,.7,.2,1),opacity .35s ease; }
.panel-cta::after { content:""; position:absolute; z-index:-1; width:72px; height:150%; top:-25%; left:-84px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.52),transparent); transform:skewX(-24deg); transition:left .65s cubic-bezier(.2,.75,.25,1); }
.panel-cta-label { position:relative; display:block; height:14px; overflow:hidden; }
.panel-cta-text { display:block; transition:transform .35s cubic-bezier(.175,.885,.32,1.275); }
.panel-cta-text--out { transform:translateY(0); }
.panel-cta-text--in { position:absolute; inset:0; transform:translateY(135%); }
.panel-cta:hover { border-color:rgba(235,250,255,.8); transform:translateY(-2px) scale(1.015); filter:brightness(1.1); box-shadow:inset 0 1px 0 rgba(255,255,255,.42),inset 0 -10px 16px rgba(0,35,62,.32),0 12px 30px rgba(12,144,214,.44); }
.panel-cta:hover::before { opacity:.56; transform:translateX(24%); }
.panel-cta:hover::after { left:125%; }
.panel-cta:hover .panel-cta-text--out { transform:translateY(-135%); }
.panel-cta:hover .panel-cta-text--in { transform:translateY(0); }
.panel-cta:focus-visible { outline:2px solid #d8f4ff; outline-offset:3px; }

/* Come nel riferimento: l'azione viene rivelata entrando nella card.
   Su touch resta sempre disponibile, perché non esiste hover. */
@media (hover:hover) and (pointer:fine) {
  .product-stage .panel-cta { opacity:0; pointer-events:none; transform:translateY(10px) scale(.97); }
  .product-stage .hero-panel:hover .panel-cta,
  .product-stage .hero-panel:focus-within .panel-cta { opacity:1; pointer-events:auto; transform:translateY(0) scale(1); }
  .product-stage .hero-panel:hover .panel-cta:hover { transform:translateY(-2px) scale(1.015); }
  .product-stage .panel-cta:focus { opacity:1; pointer-events:auto; transform:translateY(0) scale(1); }
}


/* CTA compatta, mantenendo un'area interattiva adeguata anche su touch. */
.product-stage .panel-cta { min-height:38px; margin:13px 0 0; padding:8px 14px; }

@media (max-width:800px) {
  .product-stage { height:auto; }
  .product-stage .hero-panel { height:auto; min-height:316px; }
}

@media (hover:hover) {
  .hero-panel { transition:border-color .22s var(--ease), box-shadow .22s var(--ease), filter .22s var(--ease); }
  .hero-panel:hover { border-color:rgba(104,190,232,.9); box-shadow:0 0 0 1px rgba(33,152,214,.18),0 30px 62px rgba(33,152,214,.16); filter:brightness(1.08); }
  .hero-panel:hover .data-bar i { filter:brightness(1.18); }
}

/* Hero più alto nella viewport: resta solo un respiro sotto la barra fissa. */
.hero { min-height:750px; margin-top:96px; padding-top:42px; padding-bottom:56px; background:#020b19; }
.hero h1 { margin-top:0; }
.hero::before,
.hero::after { display:none; }

/* Card della home con lo stesso fondo dell'hero. */
.hero .product-stage .website-card,
.area-card {
  background-color:#020b19 !important;
  background-image:none !important;
}

/* La nostra storia su fondo chiaro. */
.history {
  background:#fff;
  border-top-color:rgba(2,11,25,.14);
}
.history::before,
.history::after { display:none; }
.history .eyebrow,
.history-heading h2,
.history-heading > p:last-child,
.timeline-year,
.timeline h3,
.timeline article p,
.history-story h3,
.history-story p,
.history-story p:last-child,
.timeline li.is-active .timeline-year,
.timeline li.is-active h3,
.timeline article:hover h3 { color:#020b19; }
.timeline::before { background:rgba(2,11,25,.28); }
.timeline-dot { border-color:#fff; background:#020b19; box-shadow:0 0 0 1px rgba(2,11,25,.35); }
.timeline-dot:hover,
.timeline li.is-active .timeline-dot { background:var(--accent); box-shadow:0 0 0 1px var(--accent),0 0 0 6px rgba(33,152,214,.15); }
.history-story { border-top-color:rgba(2,11,25,.18); }
.hero .product-stage { margin-top:32px; }
.hero::before { position:absolute; z-index:0; inset:0; pointer-events:none; content:""; opacity:.68; background:linear-gradient(118deg,transparent 0 31%,rgba(104,190,232,.1) 31.1% 31.25%,transparent 31.35% 100%),linear-gradient(118deg,transparent 0 63%,rgba(104,190,232,.08) 63.1% 63.22%,transparent 63.32% 100%),repeating-linear-gradient(118deg,transparent 0 58px,rgba(104,190,232,.038) 59px 60px,transparent 61px 126px); }
.hero::after { position:absolute; z-index:0; top:50%; left:50%; width:min(1040px,92vw); height:470px; border:1px solid rgba(104,190,232,.2); content:""; pointer-events:none; clip-path:polygon(0 24%,31% 0,100% 21%,79% 100%,16% 78%); transform:translate(-50%,-40%); box-shadow:inset 0 0 0 32px rgba(104,190,232,.018),inset 0 0 0 66px rgba(104,190,232,.012); }

@media (max-width:800px) {
  .hero { min-height:0; margin-top:82px; padding-top:40px; padding-bottom:56px; }
  .hero .product-stage { margin-top:30px; }
}

/* Le tre card restano nel flusso verticale su schermi piccoli: nessuna viene tagliata dal contenitore hero. */
@media (max-width:800px) {
  .hero { overflow:visible; }
  .hero .product-stage { display:flex; flex-direction:column; align-items:stretch; gap:16px; height:auto; }
  .hero .product-stage .hero-panel { display:block; flex:0 0 auto; width:100%; min-height:316px; }
  .site-header { z-index:50; }
  .site-header .nav-shell { display:flex; justify-content:center; width:var(--shell); margin-inline:auto; padding-inline:0; }
  .site-header .brand { position:static; width:172px; margin:0; transform:none; }
  .site-header .brand img { display:block; width:100%; max-width:100%; visibility:visible; opacity:1; transform:none; }
  .hero .panel-brand img { display:block; width:auto; max-width:100%; height:46px; }
}

/* Reveal tipografico in due tempi, ispirato al titolo del riferimento. */
.title-line { display:block; overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em; }
.title-line-inner { display:block; animation:title-line-reveal .82s cubic-bezier(.16,1,.3,1) both; }
.title-line:nth-child(2) .title-line-inner { animation-delay:.13s; }
@keyframes title-line-reveal {
  from { opacity:0; transform:translateY(112%); filter:blur(7px); }
  to { opacity:1; transform:translateY(0); filter:blur(0); }
}

/* Timeline ispirata al riferimento grafico, archiviata per un eventuale riutilizzo.
.history { position:relative; isolation:isolate; overflow:hidden; scroll-margin-top:112px; padding:56px 0 64px; border-top:1px solid rgba(143,211,255,.18); background:#102f48; }
.history::before { position:absolute; z-index:0; inset:0; content:""; opacity:.58; background:radial-gradient(circle at 8% 12%,rgba(143,211,255,.17) 0 2px,transparent 2.5px),radial-gradient(circle at 90% 78%,rgba(143,211,255,.16) 0 2px,transparent 2.5px),linear-gradient(rgba(143,211,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(143,211,255,.055) 1px,transparent 1px); background-size:160px 160px,210px 210px,38px 38px,38px 38px; }
.history::after { position:absolute; z-index:0; top:50%; left:50%; width:min(900px,88vw); aspect-ratio:1; border:1px solid rgba(143,211,255,.16); border-radius:50%; content:""; transform:translate(-50%,-42%); box-shadow:0 0 0 42px rgba(143,211,255,.035),0 0 0 84px rgba(143,211,255,.025); }
.history > .shell { position:relative; z-index:1; }
.history-link { min-height:44px; margin:0 0 4px; }
.history-link span { font-size:18px; }
.history-heading { max-width:670px; margin-inline:auto; text-align:center; }
.history-heading .eyebrow { margin-bottom:14px; color:#8fd3ff; }
.history-heading h2 { margin-bottom:14px; font-size:clamp(2.25rem,4.6vw,4.35rem); font-weight:620; letter-spacing:-.06em; line-height:.98; }
.history-heading > p:last-child { max-width:560px; margin-inline:auto; color:#d6e6f1; font-size:16px; }
.timeline { position:relative; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:0; max-width:1120px; min-height:420px; margin:54px auto 0; padding:0; list-style:none; }
.timeline li { --timeline-color:#1f7eb8; position:relative; display:grid; grid-template-rows:1fr 64px 1fr; min-width:0; }
.timeline li:nth-child(2) { --timeline-color:#1a6fa9; }
.timeline li:nth-child(3) { --timeline-color:#155d93; }
.timeline li:nth-child(4) { --timeline-color:#104b79; }
.timeline li:nth-child(5) { --timeline-color:#0c3d66; }
.timeline article { position:relative; display:grid; grid-template-columns:78px minmax(0,1fr); align-items:center; gap:13px; grid-row:3; align-self:start; margin-top:31px; color:#f7f6f2; }
.timeline li:nth-child(even) article { grid-row:1; align-self:end; margin-top:0; margin-bottom:31px; }
.timeline article::after { position:absolute; left:39px; bottom:calc(100% + 4px); height:27px; content:""; border-left:1px dashed rgba(143,211,255,.7); }
.timeline li:nth-child(even) article::after { top:calc(100% + 4px); bottom:auto; }
.timeline-icon { position:relative; display:grid; place-items:center; width:74px; height:74px; border:2px dashed rgba(143,211,255,.48); border-radius:50%; color:#8fd3ff; }
.timeline-icon::before { position:absolute; width:59px; height:59px; border-radius:50%; content:""; background:#102f48; }
.timeline-icon svg { position:relative; z-index:1; width:36px; height:36px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.timeline-month { margin:0 0 6px; color:#8fd3ff!important; font-size:15px!important; line-height:1.1!important; }
.timeline article p:last-child { margin:0; color:#edf7ff; font-size:12px; line-height:1.4; }
.timeline-year { position:relative; z-index:1; grid-row:2; display:grid; place-items:center; width:calc(100% + 2px); min-height:64px; margin:0 -1px; padding:0; border:0; clip-path:polygon(0 13%,94% 13%,100% 50%,94% 87%,0 87%,4% 50%); background:var(--timeline-color); color:#fff; cursor:pointer; font:inherit; font-size:clamp(1rem,2.3vw,1.55rem); font-weight:500; letter-spacing:-.03em; text-shadow:0 1px 1px rgba(0,0,0,.14); transition:filter .2s var(--ease),transform .2s var(--ease); }
.timeline-year:hover,.timeline-year[aria-pressed="true"] { filter:brightness(1.12); transform:scale(1.045); }
.timeline-year:focus-visible { outline:3px solid #fff; outline-offset:4px; }
.timeline li:first-child .timeline-year::before { position:absolute; right:calc(100% + 18px); color:#b9d9eb; content:"INIZIO"; font-size:10px; font-weight:600; letter-spacing:.05em; text-shadow:none; }
.timeline li:not(.is-active) article { opacity:.58; transition:opacity .22s var(--ease); }
.timeline li.is-active article { opacity:1; }
.timeline li.is-active .timeline-icon { box-shadow:0 0 0 5px rgba(255,255,255,.11); }
.timeline-detail { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:20px; max-width:640px; margin:34px auto 0; padding:15px 19px; border:1px solid rgba(143,211,255,.3); border-radius:9px; background:rgba(6,31,52,.52); }
.timeline-detail p { margin:0; }
.timeline-detail-date { color:#8fd3ff; font-size:13px; font-weight:700; letter-spacing:.08em; }
.timeline-detail-copy { color:#edf7ff; font-size:13px; }

@media (max-width:800px) {
  .history { padding:48px 0 56px; }
  .history-heading h2 { font-size:clamp(2.1rem,10vw,3.35rem); }
  .history-heading > p:last-child { font-size:15px; }
  .timeline { display:block; min-height:0; margin-top:42px; padding-left:34px; }
  .timeline li { display:grid; grid-template-columns:72px minmax(0,1fr); grid-template-rows:auto; gap:14px; padding-bottom:24px; }
  .timeline li:last-child { padding-bottom:0; }
  .timeline-year { grid-column:1; grid-row:1; width:64px; min-height:54px; margin:0; font-size:16px; clip-path:polygon(0 15%,92% 15%,100% 50%,92% 85%,0 85%,6% 50%); }
  .timeline li:first-child .timeline-year::before { display:none; }
  .timeline article,.timeline li:nth-child(even) article { grid-column:2; grid-row:1; display:grid; grid-template-columns:58px minmax(0,1fr); gap:12px; align-self:center; margin:0; }
  .timeline article::after,.timeline li:nth-child(even) article::after { display:none; }
  .timeline-icon { width:56px; height:56px; }
  .timeline-icon::before { width:43px; height:43px; }
  .timeline-icon svg { width:28px; height:28px; }
  .timeline-detail { grid-template-columns:1fr; gap:5px; margin-top:24px; }
}
*/

/* Regole della timeline precedente, disattivate perché sostituite dal layout lineare qui sotto.
Timeline orizzontale essenziale: date, pallini e contenuti demo.
.history { position:relative; isolation:isolate; overflow:hidden; scroll-margin-top:112px; padding:64px 0; border-top:1px solid rgba(143,211,255,.18); background:#102f48; }
.history::before { position:absolute; inset:0; content:""; opacity:.25; background:linear-gradient(90deg,rgba(143,211,255,.06) 1px,transparent 1px),linear-gradient(rgba(143,211,255,.06) 1px,transparent 1px); background-size:46px 46px; }
.history::after { display:none; }
.history > .shell { position:relative; z-index:1; }
.history-link { min-height:44px; margin:0 0 4px; }
.history-link span { font-size:18px; }
.history-heading { max-width:670px; margin-inline:auto; text-align:center; }
.history-heading .eyebrow { margin-bottom:14px; color:#8fd3ff; }
.history-heading h2 { margin-bottom:14px; font-size:clamp(2.25rem,4.6vw,4.35rem); font-weight:620; letter-spacing:-.06em; line-height:.98; }
.history-heading > p:last-child { max-width:560px; margin-inline:auto; color:#d6e6f1; font-size:16px; }
.timeline { position:relative; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:0; max-width:1040px; margin:54px auto 0; padding:0; list-style:none; }
.timeline::before { position:absolute; top:32px; right:8%; left:8%; height:1px; content:""; background:rgba(143,211,255,.72); }
.timeline li { position:relative; min-width:0; text-align:center; }
.timeline-year { position:relative; z-index:1; display:inline-block; padding:0 8px 42px; border:0; background:transparent; color:#edf9ff; cursor:pointer; font:inherit; font-size:16px; font-weight:700; letter-spacing:.02em; transition:color .2s var(--ease); }
.timeline-year::after { position:absolute; top:21px; bottom:auto; left:50%; width:16px; height:16px; border:3px solid #102f48; border-radius:50%; content:""; background:#8fd3ff; box-shadow:0 0 0 1px rgba(143,211,255,.7); transform:translateX(-50%); transition:transform .2s var(--ease),background .2s var(--ease),box-shadow .2s var(--ease); }
.timeline-year:hover,.timeline-year[aria-pressed="true"] { color:#fff; }
.timeline-year:hover::after,.timeline-year[aria-pressed="true"]::after { background:#fff; box-shadow:0 0 0 5px rgba(143,211,255,.18); transform:translateX(-50%) scale(1.12); }
.timeline-year:focus-visible { outline:3px solid #fff; outline-offset:4px; }
.timeline li:first-child .timeline-year::before { display:none; }
.timeline article { margin:18px 12px 0; color:#f7f6f2; transition:opacity .2s var(--ease); }
.timeline-icon { display:none; }
.timeline-month { margin:0 0 6px; color:#8fd3ff!important; font-size:13px!important; line-height:1.1!important; }
.timeline article p:last-child { max-width:160px; margin:0 auto; color:#edf7ff; font-size:12px; line-height:1.45; }
.timeline li:not(.is-active) article { opacity:.58; }
.timeline li.is-active article { opacity:1; }
.timeline-detail { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:20px; max-width:640px; margin:40px auto 0; padding:15px 19px; border:1px solid rgba(143,211,255,.3); border-radius:9px; background:rgba(6,31,52,.52); }
.timeline-detail p { margin:0; }
.timeline-detail-date { color:#8fd3ff; font-size:13px; font-weight:700; letter-spacing:.08em; }
.timeline-detail-copy { color:#edf7ff; font-size:13px; }

@media (max-width:800px) {
  .history { padding:50px 0 58px; }
  .history-heading h2 { font-size:clamp(2.1rem,10vw,3.35rem); }
  .history-heading > p:last-child { font-size:15px; }
  .timeline { display:block; margin-top:42px; padding-left:36px; }
  .timeline::before { top:12px; bottom:8px; left:8px; width:1px; height:auto; }
  .timeline li { padding:0 0 26px 19px; text-align:left; }
  .timeline li:last-child { padding-bottom:0; }
  .timeline-year { display:block; padding:0; background:transparent; font-size:16px; }
  .timeline-year::after { top:2px; bottom:auto; left:-27px; width:14px; height:14px; transform:none; }
  .timeline-year:hover::after,.timeline-year[aria-pressed="true"]::after { transform:scale(1.12); }
  .timeline article { margin:8px 0 0; }
  .timeline article p:last-child { max-width:360px; margin:0; }
  .timeline-detail { grid-template-columns:1fr; gap:5px; margin-top:28px; }
}
*/

/* Stili sperimentali delle due varianti di card, conservati per riferimento.
Card prodotto: composizione editoriale con visual del servizio.
.hero .product-stage { height:438px; gap:18px; }
.hero .product-stage .promo-card { position:relative; display:flex; flex-direction:column; align-items:center; height:428px; min-height:0; padding:27px 22px 0; overflow:hidden; border:1px solid rgba(143,211,255,.26); border-radius:22px; background:linear-gradient(155deg,#172938,#0b121a 70%); box-shadow:0 18px 48px rgba(0,0,0,.3); color:#f6fbff; text-align:center; transform:none!important; animation:none!important; }
.hero .product-stage .promo-card::before,.hero .product-stage .promo-card::after { display:none; }
.hero .product-stage .promo-card--gest { background:linear-gradient(155deg,#173044,#0b141e 70%); }
.hero .product-stage .promo-card--com { background:linear-gradient(155deg,#1a2841,#0b1320 70%); }
.promo-kicker { margin:0 0 7px; color:#8fd3ff; font-size:10px; font-weight:750; letter-spacing:.1em; }
.promo-title { display:flex; align-items:center; justify-content:center; min-height:39px; margin:0 0 10px!important; color:#f6fbff; font-size:clamp(1.65rem,2.25vw,2.2rem)!important; font-weight:700; letter-spacing:-.055em!important; line-height:1!important; }
.promo-title img { display:block; width:auto; max-width:154px; height:37px; object-fit:contain; }
.promo-card h3 { max-width:270px; margin:0!important; color:#f6fbff!important; font-size:clamp(1.28rem,1.8vw,1.72rem)!important; font-weight:680!important; letter-spacing:-.055em!important; line-height:1.05!important; }
.promo-actions { position:relative; z-index:2; display:flex; align-items:center; justify-content:center; gap:13px; margin-top:17px; }
.promo-actions a { position:relative; isolation:isolate; display:inline-flex; align-items:center; justify-content:center; min-height:42px; padding:0 49px 0 19px; overflow:hidden; border:1px solid rgba(143,211,255,.55); border-radius:999px; background:linear-gradient(110deg,#0a121b 0%,#172938 44%,#0a121b 88%); background-size:180% 100%; box-shadow:inset 0 1px 0 rgba(255,255,255,.13),0 8px 19px rgba(0,0,0,.24); color:#f5fbff; font-size:12px; font-weight:720; letter-spacing:.01em; text-decoration:none; transition:background-position .4s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease),transform .25s var(--ease); }
.promo-actions a::after { position:absolute; right:6px; display:grid; place-items:center; width:28px; height:28px; border:1px solid rgba(143,211,255,.44); border-radius:50%; content:"↗"; color:#8fd3ff; font-size:16px; font-weight:500; line-height:1; transition:transform .25s var(--ease),background .25s var(--ease),color .25s var(--ease); }
.promo-actions a:hover { border-color:#d8f3ff; background-position:100% 0; box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 12px 26px rgba(33,152,214,.2); transform:translateY(-2px); }
.promo-actions a:hover::after { background:#d8f3ff; color:#0c1a28; transform:translate(2px,-2px); }
.promo-actions a:focus-visible { outline:3px solid #d8f3ff; outline-offset:4px; }
.promo-visual { position:absolute; right:0; bottom:0; left:0; height:220px; overflow:hidden; }
.device-screen { position:absolute; bottom:-86px; left:50%; width:185px; height:276px; border:7px solid #1c2028; border-radius:29px; background:linear-gradient(145deg,#70d3ff,#2d64ee 46%,#1b2760); box-shadow:0 18px 24px rgba(15,20,35,.28); transform:translateX(-50%) rotate(-24deg); }
.device-screen::before { position:absolute; inset:15px 11px 28px; border-radius:18px; content:""; background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(219,235,255,.6)),repeating-linear-gradient(0deg,transparent 0 30px,rgba(31,65,131,.25) 31px 32px); }
.device-screen::after { position:absolute; bottom:9px; left:50%; width:53px; height:4px; border-radius:8px; content:""; background:#c9d0d8; transform:translateX(-50%); }
.visual-card { position:absolute; z-index:1; right:18px; bottom:38px; width:143px; padding:16px 12px; border:1px solid rgba(255,255,255,.7); border-radius:14px; background:rgba(255,255,255,.92); box-shadow:0 12px 24px rgba(25,42,79,.18); color:#26355e; font-size:10px; font-weight:650; letter-spacing:.06em; line-height:1.45; text-align:left; }
.visual-card b { color:#275cf5; font-size:11px; }
.promo-card--opera .device-screen { background:linear-gradient(145deg,#b6d8ff,#4363d4 45%,#18214d); }
.promo-card--opera .visual-card { color:#253a72; }
.promo-card--com .device-screen { background:linear-gradient(145deg,#a8e0ff,#4a8de0 45%,#1b376b); }
.promo-card--com .visual-card b { color:#8fd3ff; }

@media (max-width:800px) {
  .hero .product-stage { height:auto; gap:18px; }
  .hero .product-stage .promo-card { flex:0 0 438px; width:100%; height:438px; min-height:438px; }
}

Variante di prova: card fotografiche, ispirate al secondo riferimento.
.photo-card-stage { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; width:min(1120px,100%); margin-top:18px; }
.photo-card { position:relative; isolation:isolate; display:flex; flex-direction:column; justify-content:space-between; min-height:520px; padding:30px 27px; overflow:hidden; border-radius:23px; background-color:#07101d; background-image:linear-gradient(180deg,rgba(4,17,34,.93) 0%,rgba(8,55,91,.5) 43%,rgba(4,16,31,.16) 100%),url("../foto/card-neaopera-consulenza.png"); background-position:center; background-size:cover; box-shadow:0 18px 46px rgba(0,0,0,.34); color:#fff; }
.photo-card--gest { background-image:linear-gradient(180deg,rgba(4,18,35,.92) 0%,rgba(12,74,120,.47) 43%,rgba(4,17,34,.16) 100%),url("../foto/card-neagest-cassa.png"); }
.photo-card--com { background-image:linear-gradient(180deg,rgba(4,16,32,.93) 0%,rgba(17,65,109,.5) 43%,rgba(4,15,30,.16) 100%),url("../foto/card-neacom-comunicazione.png"); }
.photo-card p { margin:0 0 9px; color:rgba(255,255,255,.76); font-size:11px; font-weight:720; letter-spacing:.1em; text-transform:uppercase; }
.photo-card h2 { margin:0 0 10px; color:#fff; font-size:clamp(1.85rem,3vw,2.35rem); font-weight:720; letter-spacing:-.055em; line-height:1; }
.photo-card h2 img { display:block; width:auto; max-width:164px; height:42px; filter:drop-shadow(0 3px 12px rgba(0,0,0,.42)); object-fit:contain; }
.photo-card--gest h2,.photo-card--com h2 { display:flex; justify-content:center; }
.photo-card h3 { max-width:290px; margin:0; color:#fff; font-size:17px; font-weight:560; letter-spacing:-.025em; line-height:1.35; }
.photo-card a { position:relative; isolation:isolate; align-self:center; display:inline-flex; align-items:center; min-height:42px; padding:0 49px 0 19px; overflow:hidden; border:1px solid rgba(143,211,255,.55); border-radius:999px; background:linear-gradient(110deg,#0a121b 0%,#172938 44%,#0a121b 88%); background-size:180% 100%; box-shadow:inset 0 1px 0 rgba(255,255,255,.13),0 8px 19px rgba(0,0,0,.24); color:#f5fbff; font-size:12px; font-weight:720; letter-spacing:.01em; text-decoration:none; transition:background-position .4s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease),transform .25s var(--ease); }
.photo-card a span { display:none; }
.photo-card a::after { position:absolute; right:6px; display:grid; place-items:center; width:28px; height:28px; border:1px solid rgba(143,211,255,.44); border-radius:50%; content:"↗"; color:#8fd3ff; font-size:16px; font-weight:500; line-height:1; transition:transform .25s var(--ease),background .25s var(--ease),color .25s var(--ease); }
.photo-card a:hover { border-color:#d8f3ff; background-position:100% 0; box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 12px 26px rgba(33,152,214,.2); transform:translateY(-2px); }
.photo-card a:hover::after { background:#d8f3ff; color:#0c1a28; transform:translate(2px,-2px); }
.photo-card a:focus-visible { outline:3px solid #d8f3ff; outline-offset:4px; }

@media (max-width:800px) {
  .photo-card-stage { grid-template-columns:1fr; gap:16px; margin-top:18px; }
  .photo-card { min-height:500px; }
}

Visual astratti per i tre servizi: flusso, dati e diffusione.
.promo-card--opera .device-screen { bottom:30px; width:224px; height:118px; border:0; border-radius:18px; background:linear-gradient(135deg,rgba(143,211,255,.95),rgba(45,111,220,.9)); box-shadow:0 18px 32px rgba(5,28,63,.45); transform:translateX(-50%) rotate(-8deg); }
.promo-card--opera .device-screen::before { inset:17px 18px; border-radius:10px; background:linear-gradient(90deg,rgba(10,29,63,.96) 0 27%,transparent 27% 36%,rgba(10,29,63,.82) 36% 65%,transparent 65% 74%,rgba(10,29,63,.68) 74%); box-shadow:0 16px 0 -8px rgba(222,247,255,.88),0 -16px 0 -8px rgba(222,247,255,.45); }
.promo-card--opera .device-screen::after { right:-25px; bottom:25px; left:auto; width:74px; height:2px; border-radius:0; background:linear-gradient(90deg,rgba(143,211,255,0),#d8f3ff); box-shadow:none; transform:rotate(-8deg); }
.promo-card--gest .device-screen { bottom:-8px; width:164px; height:214px; border:1px solid rgba(178,228,255,.72); border-radius:5px; background:linear-gradient(160deg,#e5f7ff 0%,#9bcdf1 100%); box-shadow:0 18px 34px rgba(3,22,48,.43); transform:translateX(-50%) rotate(-10deg); }
.promo-card--gest .device-screen::before { inset:22px 21px 35px; border-radius:0; background:repeating-linear-gradient(0deg,rgba(22,66,119,.88) 0 3px,transparent 3px 17px),linear-gradient(90deg,transparent 0 68%,rgba(27,107,194,.76) 68% 100%); box-shadow:none; }
.promo-card--gest .device-screen::after { bottom:15px; left:21px; width:111px; height:7px; border-radius:999px; background:linear-gradient(90deg,#275fbd 0 56%,#8fd3ff 56% 77%,#275fbd 77%); box-shadow:none; transform:none; }
.promo-card--com .device-screen { bottom:36px; width:156px; height:156px; border:2px solid rgba(143,211,255,.92); border-radius:28px; background:linear-gradient(145deg,rgba(44,105,188,.5),rgba(9,27,62,.08)); box-shadow:inset 0 0 0 15px rgba(15,51,100,.38),0 18px 30px rgba(3,21,48,.42); transform:translateX(-50%) rotate(11deg); }
.promo-card--com .device-screen::before { top:23px; right:23px; bottom:23px; left:23px; border:2px solid rgba(216,243,255,.9); border-radius:20px; background:linear-gradient(135deg,rgba(143,211,255,.7),rgba(50,111,210,.05)); box-shadow:inset 0 0 0 12px rgba(22,71,139,.38); transform:none; }
.promo-card--com .device-screen::after { top:auto; right:-35px; bottom:8px; left:auto; width:82px; height:2px; border-radius:0; background:linear-gradient(90deg,#8fd3ff,rgba(143,211,255,0)); box-shadow:none; transform:rotate(11deg); }
*/

@media (hover:hover) and (pointer:fine) {
  .hero .product-stage .promo-card { transition:transform .28s var(--ease),border-color .28s var(--ease),box-shadow .28s var(--ease),filter .28s var(--ease); }
  .hero .product-stage .promo-card:hover,.hero .product-stage .promo-card:focus-within { border-color:#b9e9ff; box-shadow:0 0 0 1px rgba(143,211,255,.2),0 25px 54px rgba(9,91,145,.27); filter:brightness(1.08); transform:translateY(-8px)!important; }
  .promo-visual { transition:transform .32s var(--ease); }
  .promo-card:hover .promo-visual,.promo-card:focus-within .promo-visual { transform:scale(1.045) translateY(-3px); }
  .photo-card { transition:transform .3s var(--ease),box-shadow .3s var(--ease),background-size .45s var(--ease); }
  .photo-card:hover,.photo-card:focus-within { background-size:106%; box-shadow:0 26px 58px rgba(4,36,67,.48); transform:translateY(-8px); }
}

/* CTA delle card iniziali: stessa firma visiva delle card grafiche. */
.product-stage .panel-cta { position:relative; isolation:isolate; display:inline-flex; align-items:center; justify-content:center; align-self:flex-start; width:auto; min-height:42px; margin:15px 0 0; padding:0 49px 0 19px; overflow:hidden; border:1px solid rgba(143,211,255,.55); border-radius:999px; background:linear-gradient(110deg,#0a121b 0%,#172938 44%,#0a121b 88%); background-size:180% 100%; box-shadow:inset 0 1px 0 rgba(255,255,255,.13),0 8px 19px rgba(0,0,0,.24); color:#f5fbff; font-size:12px; font-weight:720; letter-spacing:.01em; text-decoration:none; transition:background-position .4s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease),transform .25s var(--ease),opacity .2s var(--ease); }
.product-stage .panel-cta::before { display:none; }
.product-stage .panel-cta::after { display:none; }
.panel-cta-icon { position:absolute; z-index:2; right:6px; display:grid; place-items:center; width:28px; height:28px; border:1px solid rgba(143,211,255,.44); border-radius:50%; color:#8fd3ff; font-size:16px; font-weight:500; line-height:1; transition:transform .25s var(--ease),background .25s var(--ease),color .25s var(--ease); }
.product-stage .panel-cta:hover { border-color:#d8f3ff; background-position:100% 0; box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 12px 26px rgba(33,152,214,.2); filter:none; transform:translateY(-2px); }
.product-stage .panel-cta:hover .panel-cta-icon { background:#d8f3ff; color:#0c1a28; transform:translate(2px,-2px); }
.product-stage .panel-cta:focus-visible { outline:3px solid #d8f3ff; outline-offset:4px; }

/* Card NeaMind: composizione editoriale a colonna, con azione sempre in fondo. */
.product-stage .neamind-card { display:flex; flex-direction:column; padding:30px; overflow:hidden; border-color:rgba(170,190,197,.26); border-radius:22px; background:linear-gradient(145deg,#0d1114 0%,#0a0e10 70%,#073338 145%); box-shadow:0 18px 48px rgba(0,0,0,.3); color:#f4f6f6; }
.product-stage .neamind-card::before { display:none; }
.product-stage .neamind-card::after { inset:auto -24% -45%; width:85%; height:52%; border-radius:50%; background:radial-gradient(ellipse,rgba(0,176,187,.24),rgba(0,102,111,.08) 42%,transparent 70%); animation:none; }
.neamind-card .card-index { position:relative; z-index:1; color:#abb5b8; font-size:11px; letter-spacing:.08em; }
.neamind-card .neamind-wordmark { position:relative; z-index:1; align-self:flex-end; margin-top:-5px; color:#f1f4f4; font-size:29px; font-style:italic; font-weight:300; letter-spacing:-.09em; line-height:.8; }
.neamind-card .neamind-wordmark b { color:#2198d6; font-weight:400; }
.neamind-card .neamind-wordmark small { display:block; margin-top:7px; color:#aebabc; font-size:5px; font-style:normal; font-weight:700; letter-spacing:.27em; text-align:right; text-transform:uppercase; }
.neamind-card .neamind-logo { position:relative; z-index:1; align-self:center; display:block; width:164px; height:auto; margin:-2px auto 0; object-fit:contain; }
.neagest-card .core-panel-body { padding-top:15px; }.neagest-card .panel-brand { height:58px; margin:0 0 10px; }.neagest-card .panel-brand img { height:58px; }
.neamind-card-body { position:relative; z-index:1; display:flex; flex:1; flex-direction:column; justify-content:flex-start; padding-top:20px; text-align:center; }
.neamind-card-body > p:first-child { margin:0 0 14px; color:#bdc7c9; font-size:9px; font-weight:700; letter-spacing:.025em; }
.neamind-card-body h2 { margin:0 0 6px; color:#f5f6f6; font-size:31px; font-weight:650; letter-spacing:-.06em; line-height:1; }
.neamind-card-body h3 { margin:0 0 12px; color:#43c7d5; font-size:10px; font-weight:750; letter-spacing:.13em; line-height:1.2; }
.neamind-card-body > p { max-width:270px; margin:0; color:#c6ccce; font-size:13px; line-height:1.45; }
.neamind-card .panel-cta { align-self:center; width:max-content; margin:27px auto 0; padding-left:0; border:0; border-radius:0; background:none; box-shadow:none; color:#fff; }
.neamind-card .panel-cta:hover { background:none; box-shadow:none; transform:translateX(3px); }
.neamind-card .panel-cta-icon { position:static; width:auto; height:auto; margin-left:12px; border:0; border-radius:0; color:#eaf5f6; font-size:20px; }
.neamind-card .panel-cta:hover .panel-cta-icon { background:none; color:#43c7d5; transform:translateX(4px); }
@media (max-width:800px) { .product-stage .neamind-card { min-height:430px; padding:30px; } .neamind-card-body { padding-top:20px; } }

@media (hover:hover) and (pointer:fine) {
  .product-stage .neamind-card .panel-cta { opacity:1; pointer-events:auto; transform:none; }
}

/* Card AI Website: riprende la composizione minimale del riferimento. */
.product-stage .website-card { display:flex; flex-direction:column; padding:25px 23px 20px; overflow:hidden; border-color:rgba(104,190,232,.3); border-radius:22px; background:linear-gradient(145deg,#0d1114 0%,#0a0e10 70%,#062f47 145%); box-shadow:0 18px 48px rgba(0,0,0,.3); color:#f5f3f8; }
.product-stage a.website-card { text-decoration:none; }
.product-stage a.website-card:focus-visible { outline:3px solid #d8f3ff; outline-offset:4px; }
.product-stage .website-card::before { display:none; }.product-stage .website-card::after { display:block; inset:auto -24% -45%; width:85%; height:52%; border-radius:50%; background:radial-gradient(ellipse,rgba(33,152,214,.3),rgba(33,152,214,.09) 42%,transparent 70%); animation:none; }
.website-index { color:#8e8a96; font-size:10px; letter-spacing:.08em; }
.website-orbit { position:relative; display:grid; place-items:center; width:27px; height:27px; margin-top:54px; border:1px solid #8159d7; border-radius:50%; box-shadow:0 0 15px rgba(125,79,219,.3); }
.website-orbit::before,.website-orbit::after { position:absolute; background:#6e48bd; content:""; }.website-orbit::before { width:35px; height:1px; }.website-orbit::after { width:1px; height:35px; }.website-orbit i { position:relative; z-index:1; width:11px; height:11px; border-radius:50%; background:#8a62e8; box-shadow:0 0 0 4px rgba(138,98,232,.16),0 0 14px rgba(138,98,232,.75); }
.website-logo { display:block; width:142px; height:auto; margin-top:24px; object-fit:contain; }
.website-card-body { display:flex; flex:1; flex-direction:column; justify-content:flex-end; padding-top:24px; text-align:left; }.website-card-body h2 { margin:0 0 13px; color:#f7f5f8; font-size:24px; font-weight:600; letter-spacing:-.055em; line-height:1; }.website-card-body p { max-width:238px; margin:0; color:#b6b2be; font-size:13px; line-height:1.55; }.website-card .panel-cta { align-self:stretch; justify-content:space-between; width:100%; min-height:42px; margin:19px 0 0; padding:15px 0 0; border:0; border-top:1px solid rgba(151,121,209,.3); border-radius:0; background:none; box-shadow:none; color:#f6f4f7; font-size:12px; }.website-card .panel-cta:hover { background:none; box-shadow:none; transform:none; }.website-card .panel-cta-icon { position:static; width:auto; height:auto; border:0; border-radius:0; color:#8fd3ff; font-size:20px; }.website-card .panel-cta:hover .panel-cta-icon { background:none; color:#8fd3ff; transform:translateX(4px); }
@media (hover:hover) and (pointer:fine) { .product-stage .website-card .panel-cta { opacity:1; pointer-events:auto; transform:none; } }
@media (max-width:800px) { .product-stage .website-card { min-height:324px; } }

@media (hover:hover) and (pointer:fine) {
  .product-stage .panel-cta { opacity:0; pointer-events:none; transform:translateY(10px) scale(.97); }
  .product-stage .hero-panel:hover .panel-cta,.product-stage .hero-panel:focus-within .panel-cta { opacity:1; pointer-events:auto; transform:translateY(0) scale(1); }
  .product-stage .hero-panel:hover .panel-cta:hover { transform:translateY(-2px); }
  .product-stage .panel-cta:focus { opacity:1; pointer-events:auto; transform:translateY(0) scale(1); }
}

/* La card comunicazione segue lo stesso feedback di NeaGest. */
@media (hover:hover) and (pointer:fine) {
  .product-stage .website-card:hover,
  .product-stage .website-card:focus-within {
    border-color:rgba(104,190,232,.9);
    box-shadow:0 0 0 1px rgba(33,152,214,.18),0 30px 62px rgba(33,152,214,.16);
    filter:brightness(1.08);
  }
  .product-stage .website-card:hover .panel-cta,
  .product-stage .website-card:focus-within .panel-cta {
    opacity:1;
    pointer-events:auto;
    transform:translateY(0) scale(1);
  }
}

/* Timeline del gruppo: lineare su desktop, verticale e leggibile su mobile. */
.history { position:relative; isolation:isolate; overflow:hidden; scroll-margin-top:112px; padding:104px 0 112px; border-top:1px solid rgba(143,211,255,.18); background:#102f48; }
.history::before { position:absolute; z-index:0; inset:0; content:""; opacity:.58; background:radial-gradient(circle at 8% 12%,rgba(143,211,255,.17) 0 2px,transparent 2.5px),radial-gradient(circle at 90% 78%,rgba(143,211,255,.16) 0 2px,transparent 2.5px),linear-gradient(rgba(143,211,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(143,211,255,.055) 1px,transparent 1px); background-size:160px 160px,210px 210px,38px 38px,38px 38px; }
.history::after { position:absolute; z-index:0; top:50%; left:50%; width:min(900px,88vw); aspect-ratio:1; border:1px solid rgba(143,211,255,.16); border-radius:50%; content:""; transform:translate(-50%,-42%); box-shadow:0 0 0 42px rgba(143,211,255,.035),0 0 0 84px rgba(143,211,255,.025); }
.history > .shell { position:relative; z-index:1; }
.history-heading { max-width:670px; margin-inline:auto; text-align:center; }
.history-heading .eyebrow { margin-bottom:17px; color:var(--accent-light); }
.history-heading h2 { margin-bottom:18px; font-size:clamp(2.25rem,4.6vw,4.35rem); font-weight:620; letter-spacing:-.06em; line-height:.98; }
.history-heading > p:last-child { max-width:560px; margin-inline:auto; color:var(--muted); font-size:16px; }
.timeline { position:relative; display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:12px; margin:62px 0 0; padding:0; list-style:none; }
.timeline::before { position:absolute; top:calc(clamp(1.15rem,1.8vw,1.65rem) + 21px); right:7%; left:7%; height:1px; content:""; background:linear-gradient(90deg,transparent,rgba(104,190,232,.7) 8% 92%,transparent); }
.timeline li { position:relative; display:flex; flex-direction:column; align-items:center; min-width:0; }
.timeline-year { margin:0 0 14px; color:rgba(216,241,255,.7); font-size:clamp(1.15rem,1.8vw,1.65rem); font-weight:620; letter-spacing:-.05em; line-height:1; transition:color .2s var(--ease),text-shadow .2s var(--ease); }
.timeline li.is-active .timeline-year { color:#fff; text-shadow:0 0 22px rgba(104,190,232,.3); }
.timeline-dot { position:relative; z-index:1; width:14px; height:14px; margin:0 0 20px; padding:0; border:3px solid #102f48; border-radius:50%; background:var(--accent); box-shadow:0 0 0 1px rgba(104,190,232,.68); cursor:pointer; transition:background .2s var(--ease),box-shadow .2s var(--ease),transform .2s var(--ease); }
.timeline-dot:hover,.timeline li.is-active .timeline-dot { background:#fff; box-shadow:0 0 0 1px rgba(104,190,232,.9),0 0 0 6px rgba(33,152,214,.15); transform:scale(1.12); }
.timeline-dot:focus-visible { outline:3px solid #fff; outline-offset:4px; }
.timeline article { width:100%; min-height:0; padding:0 5px; border:0; background:transparent; text-align:center; transition:transform .2s var(--ease); }
.timeline article:hover { transform:translateY(-3px); }
.timeline h3 { margin:0; color:rgba(237,247,255,.72); font-size:clamp(13px,1.18vw,16px); font-weight:500; letter-spacing:-.025em; line-height:1.35; transition:color .2s var(--ease); }
.timeline li.is-active h3,.timeline article:hover h3 { color:#fff; }
.timeline article p { margin:0; color:var(--muted); font-size:13px; line-height:1.55; }
.history-story { max-width:780px; margin:82px auto 0; padding-top:52px; border-top:1px solid rgba(143,211,255,.28); }
.history-story h3 { margin:0 0 28px; color:#fff; font-size:clamp(1.9rem,3.4vw,3rem); font-weight:620; letter-spacing:-.055em; line-height:1.04; }
.history-story p { max-width:720px; margin:0 0 24px; color:#d6e6f1; font-size:17px; line-height:1.65; }
.history-story p:last-child { margin-bottom:0; color:#fff; font-weight:600; }

@media (max-width:960px) {
  .history { padding:74px 0 80px; }
  .history-heading h2 { font-size:clamp(2.1rem,10vw,3.35rem); }
  .history-heading > p:last-child { font-size:15px; }
  .timeline { display:block; margin-top:42px; padding-left:29px; }
  .timeline::before { top:32px; bottom:32px; left:6px; width:1px; height:auto; }
  .timeline li { display:block; padding-bottom:28px; }
  .timeline li:last-child { padding-bottom:0; }
  .timeline-year { margin:0 0 10px; }
  .timeline-dot { position:absolute; top:4px; left:-29px; margin:0; }
  .timeline article { min-height:0; padding:14px 0 0; text-align:left; }
  .timeline article:hover { transform:none; }
  .history-story { margin-top:58px; padding-top:38px; }
  .history-story h3 { margin-bottom:22px; }
  .history-story p { margin-bottom:20px; font-size:16px; line-height:1.6; }
}

/* Variante chiara della sezione La nostra storia. */
.history { background:#fff !important; border-top-color:rgba(2,11,25,.14) !important; }
.history::before,.history::after { display:none !important; }
.history .eyebrow,.history-heading h2,.history-heading > p:last-child,
.timeline-year,.timeline h3,.timeline article p,.history-story h3,
.history-story p,.history-story p:last-child,.timeline li.is-active .timeline-year,
.timeline li.is-active h3,.timeline article:hover h3 { color:#020b19 !important; }
.timeline::before { background:rgba(2,11,25,.28) !important; }
.timeline-dot { border-color:#fff !important; background:#020b19 !important; box-shadow:0 0 0 1px rgba(2,11,25,.35) !important; }
.timeline-dot:hover,.timeline li.is-active .timeline-dot { background:var(--accent) !important; box-shadow:0 0 0 1px var(--accent),0 0 0 6px rgba(33,152,214,.15) !important; }
.history-story { border-top-color:rgba(2,11,25,.18) !important; }

.site-footer{display:grid;grid-template-columns:minmax(130px,.65fr) minmax(280px,1.4fr) minmax(185px,1fr);align-items:start;gap:36px;padding:46px max(24px,calc((100vw - 960px)/2));border-top:1px solid var(--line);background:#080909;color:var(--muted);font-size:12px;line-height:1.55}.footer-brand{display:block;width:176px;line-height:0}.footer-brand img{width:100%;height:auto}.footer-company-info p{margin:0 0 5px}.footer-links{display:flex;flex-direction:column;align-items:flex-start;gap:7px}.footer-links span{margin-bottom:5px;color:var(--text)}.footer-links a{color:var(--muted);text-decoration:none}.footer-links a:hover{text-decoration:underline;color:var(--text)}.footer-address{margin:4px 0 0!important}.footer-address strong{color:var(--text)}@media(max-width:700px){.site-footer{grid-template-columns:1fr;gap:25px;padding:34px 16px}.footer-links{gap:9px}}

/* Sottotitolo dell'hero: contrasto ed enfasi del messaggio principale. */
.hero-copy { color:#fff; }
.hero-copy strong { color:#fff; font-weight:700; }

/* Accesso alla storia: stesso tono delle card, ancorato a destra sul desktop. */
.history-link {
  align-self:flex-end;
  background:#020b19;
}

@media (max-width:800px) {
  .history-link { align-self:center; }
}

/* Timeline: tappe alternate attorno alla linea, con punti essenziali e interattivi. */
@media (min-width:961px) {
  .timeline {
    grid-template-columns:repeat(7,minmax(0,1fr));
    min-height:350px;
    margin-top:54px;
  }

  .timeline::before {
    top:50%;
    right:6.8%;
    left:6.8%;
    background:rgba(2,11,25,.28) !important;
  }

  .timeline li {
    display:grid;
    grid-template-rows:1fr 8px 1fr;
    align-items:stretch;
  }

  .timeline-dot {
    grid-row:2;
    align-self:center;
    justify-self:center;
    width:8px;
    height:8px;
    margin:0;
    border:0 !important;
    background:#020b19 !important;
    box-shadow:none !important;
  }

  .timeline-dot:hover,
  .timeline li.is-active .timeline-dot {
    background:var(--accent) !important;
    box-shadow:0 0 0 4px rgba(33,152,214,.16),0 0 14px rgba(33,152,214,.6) !important;
    transform:scale(1.35);
  }

  .timeline-year,
  .timeline article { width:100%; padding:0 7px; text-align:center; }

  .timeline li:nth-child(odd) .timeline-year {
    grid-row:3;
    align-self:start;
    margin:25px 0 0;
  }

  .timeline li:nth-child(odd) article {
    grid-row:3;
    align-self:start;
    margin:55px 0 0;
  }

  .timeline li:nth-child(even) .timeline-year {
    grid-row:1;
    align-self:end;
    margin:0 0 25px;
  }

  .timeline li:nth-child(even) article {
    grid-row:1;
    align-self:end;
    margin:0 0 55px;
  }
}

@media (max-width:960px) {
  .timeline-dot {
    width:8px;
    height:8px;
    border:0 !important;
    box-shadow:none !important;
  }

  .timeline-dot:hover,
  .timeline li.is-active .timeline-dot {
    box-shadow:0 0 0 4px rgba(33,152,214,.16),0 0 14px rgba(33,152,214,.6) !important;
  }
}

/* Le descrizioni emergono quando si esplora una tappa. */
.timeline article { opacity:.42; transition:opacity .2s var(--ease),transform .2s var(--ease); }
.timeline li:hover article,
.timeline li:focus-within article { opacity:1; }

/* Data e descrizione sono un unico blocco verticale. */
@media (min-width:961px) {
  .timeline-entry {
    display:flex;
    flex-direction:column;
    align-items:center;
    width:100%;
    padding:0 7px;
    text-align:center;
  }

  .timeline-entry .timeline-year { align-self:stretch; width:auto; margin:0 0 10px; }
  .timeline-entry article { width:auto; margin:0; padding:0; }

  .timeline li:nth-child(odd) .timeline-entry {
    grid-row:3;
    align-self:start;
    margin-top:25px;
  }

  .timeline li:nth-child(even) .timeline-entry {
    grid-row:1;
    align-self:end;
    margin-bottom:25px;
  }
}

@media (max-width:960px) {
  .timeline-entry { display:block; }
  .timeline-entry article,
  .timeline li:nth-child(even) .timeline-entry article {
    display:block;
    margin:0;
    padding:0;
  }
}

/* Timeline editoriale: linea centrale e tappe alternate come nel riferimento. */
@media (min-width:961px) {
  .timeline {
    grid-template-columns:repeat(7,minmax(0,1fr));
    min-height:430px;
    margin-top:58px;
  }

  .timeline::before {
    top:50%;
    right:2%;
    left:2%;
    height:3px;
    background:#020b19 !important;
  }

  .timeline li {
    --step-color:#4e9ddd;
    grid-template-rows:1fr 14px 1fr;
  }
  .timeline li:nth-child(2) { --step-color:#f0753e; }
  .timeline li:nth-child(3) { --step-color:#f4a51c; }
  .timeline li:nth-child(4) { --step-color:#e7c637; }
  .timeline li:nth-child(5) { --step-color:#78ad5d; }
  .timeline li:nth-child(6) { --step-color:#38b7cf; }
  .timeline li:nth-child(7) { --step-color:#264d7f; }

  .timeline-dot {
    width:16px;
    height:16px;
    border:0 !important;
    background:var(--step-color) !important;
    box-shadow:none !important;
    transform:none;
  }

  .timeline-dot:hover,
  .timeline li.is-active .timeline-dot {
    background:var(--step-color) !important;
    box-shadow:0 0 0 5px color-mix(in srgb,var(--step-color) 24%,transparent),0 0 16px color-mix(in srgb,var(--step-color) 62%,transparent) !important;
    transform:scale(1.08);
  }

  .timeline-entry {
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    width:100%;
    padding:0 14px;
    text-align:left;
  }

  .timeline li .timeline-entry .timeline-year {
    width:100%;
    margin:0;
    color:var(--step-color) !important;
    font-size:clamp(1.6rem,2.4vw,2.25rem);
    font-weight:700;
    letter-spacing:0;
    line-height:1;
    text-align:center;
    text-shadow:none;
  }

  .timeline-entry article {
    width:100%;
    margin:0;
    padding:0;
    opacity:1;
    text-align:left;
    transform:none;
  }

  .timeline-entry article h3 {
    color:#020b19 !important;
    font-size:16px;
    font-weight:700;
    letter-spacing:0;
    line-height:1.35;
  }

  .timeline li:nth-child(odd) .timeline-entry {
    grid-row:3;
    align-self:start;
    margin-top:52px;
  }
  .timeline li:nth-child(odd) .timeline-entry::before {
    position:absolute;
    top:-52px;
    left:50%;
    width:1px;
    height:52px;
    background:rgba(2,11,25,.48);
    content:"";
  }
  .timeline li:nth-child(odd) .timeline-entry::after {
    position:absolute;
    top:-57px;
    left:calc(50% - 5px);
    width:10px;
    height:10px;
    border-radius:50%;
    background:var(--step-color);
    content:"";
  }

  .timeline li:nth-child(even) .timeline-entry {
    grid-row:1;
    align-self:end;
    margin-bottom:52px;
  }
  .timeline li:nth-child(even) .timeline-entry::before {
    position:absolute;
    bottom:-52px;
    left:50%;
    width:1px;
    height:52px;
    background:rgba(2,11,25,.48);
    content:"";
  }
  .timeline li:nth-child(even) .timeline-entry::after {
    position:absolute;
    bottom:-57px;
    left:calc(50% - 5px);
    width:10px;
    height:10px;
    border-radius:50%;
    background:var(--step-color);
    content:"";
  }

  .timeline li:nth-child(even) .timeline-entry article { order:1; margin-bottom:5px; }
  .timeline li:nth-child(even) .timeline-entry .timeline-year { order:2; }
  .timeline li:nth-child(odd) .timeline-entry .timeline-year { margin-bottom:0; }
  .timeline li:nth-child(odd) .timeline-entry article { margin-top:1px; }
}

@media (max-width:960px) {
  .timeline { margin-top:42px; }
  .timeline::before { background:rgba(2,11,25,.4) !important; }
  .timeline-entry .timeline-year { color:#020b19 !important; }
  .timeline-entry article { opacity:1; }
}

/* Date della timeline: colore istituzionale uniforme. */
.timeline li .timeline-entry .timeline-year { color:#020b19 !important; }
.timeline-dot,
.timeline-dot:hover,
.timeline li.is-active .timeline-dot,
.timeline li .timeline-entry::after { background:#020b19 !important; }

/* Spaziatura più compatta all'ingresso della sezione storia. */
.history { padding-top:34px !important; }

@media (min-width:961px) {
  .timeline { margin-top:16px; }
}

@media (max-width:960px) {
  .history { padding-top:32px !important; }
  .timeline { margin-top:18px; }
}

/* Lo stato attivo resta coerente con il tratto scuro della timeline. */
.timeline-dot,
.timeline-dot:hover,
.timeline li.is-active .timeline-dot {
  background:#020b19 !important;
  box-shadow:none !important;
}

.timeline li .timeline-entry .timeline-year {
  font-size:clamp(.8rem,1.2vw,1.125rem);
}

@media (max-width:960px) {
  .timeline-entry .timeline-year { margin-bottom:0; }
}

/* Le frasi acquistano rilevanza durante l'esplorazione della timeline. */
.timeline li .timeline-entry article { opacity:.42; transition:opacity .2s var(--ease); }
.timeline li:hover .timeline-entry article,
.timeline li:focus-within .timeline-entry article { opacity:1; }

.timeline-entry article,
.timeline-entry article h3 { text-align:center; }

.timeline-entry article p {
  margin:0;
  color:#020b19 !important;
  font-family:"Poppins", Arial, sans-serif;
  font-size:16px;
  font-weight:300;
  line-height:1.35;
  text-align:center;
}

/* Il payoff del logo NeaMind resta leggibile sul fondo scuro della card. */
.neamind-logo { position:relative; display:grid; }
.neamind-logo img { grid-area:1 / 1; width:100%; height:auto; }
.neamind-logo .neamind-logo-subtitle {
  pointer-events:none;
  filter:brightness(0) invert(1);
  clip-path:inset(72% 0 0 0);
}

/* Sottotitolo dell'hero leggermente più presente. */
.hero-copy {
  margin-top:8px;
  font-size:19px;
}

.history-link-row {
  display:flex;
  justify-content:flex-end;
  width:min(1120px,100%);
}
.history-link { align-self:auto; }

.product-stage .website-logo { width:210px; }

@media (max-width:800px) {
  .hero-copy { font-size:17px; }
  .history-link-row { justify-content:center; }
  .product-stage .website-logo { width:190px; }
}

/* Timeline verticale tratta da nealogic-effects e adattata alla home. */
.history-timeline-shell {
  display:grid;
  grid-template-columns:minmax(260px,.78fr) minmax(0,1.22fr);
  gap:clamp(42px,7vw,92px);
  max-width:1080px;
  margin:16px auto 0;
}
.history-timeline-sticky { position:sticky; top:130px; align-self:start; padding-top:18px; }
.history-timeline-label { margin:0 0 14px; color:#020b19; font-family:"Poppins",Arial,sans-serif; font-size:12px; font-weight:300; letter-spacing:.14em; text-transform:uppercase; }
.history-timeline-display { margin:0; color:rgba(2,11,25,.08); font-size:clamp(5.5rem,10vw,9rem); font-weight:700; letter-spacing:-.07em; line-height:.8; }
.history-timeline-current { margin:20px 0 12px; color:#020b19; font-size:clamp(1.85rem,3vw,2.65rem); font-weight:400; line-height:1.05; }
.history-timeline-summary { max-width:370px; margin:0; color:#020b19; font-family:"Poppins",Arial,sans-serif; font-size:16px; font-weight:300; line-height:1.65; }
.history-timeline-progress { display:block; width:100%; height:3px; margin-top:28px; overflow:hidden; border-radius:999px; background:rgba(2,11,25,.12); }
.history-timeline-progress i { display:block; width:14.285%; height:100%; border-radius:inherit; background:#020b19; transition:width .35s var(--ease); }
.history-vertical-timeline { position:relative; margin:0; padding:0; list-style:none; }
.history-vertical-timeline::before { position:absolute; top:38px; bottom:38px; left:12px; width:1px; background:rgba(2,11,25,.22); content:""; }
.history-timeline-item { position:relative; padding:20px 0 58px 52px; color:#020b19; opacity:.38; transform:translateY(4px); transition:opacity .3s var(--ease),transform .3s var(--ease); }
.history-timeline-item::before { position:absolute; top:27px; left:6px; width:13px; height:13px; border:2px solid #fff; border-radius:50%; background:#020b19; box-shadow:0 0 0 1px rgba(2,11,25,.28); content:""; }
.history-timeline-item.is-active { opacity:1; transform:none; }
.history-timeline-year { margin:0 0 7px; color:#020b19; font-family:"Poppins",Arial,sans-serif; font-size:12px; font-weight:300; letter-spacing:.12em; }
.history-timeline-item > p:last-child { max-width:410px; margin:0; color:#020b19; font-family:"Poppins",Arial,sans-serif; font-size:clamp(1.25rem,2vw,1.75rem); font-weight:300; line-height:1.22; }
.history-timeline-item:last-child { padding-bottom:14px; }

@media (max-width:800px) {
  .history-timeline-shell { grid-template-columns:1fr; gap:30px; margin-top:18px; }
  .history-timeline-sticky { position:relative; top:auto; padding-top:0; }
  .history-timeline-display { font-size:5.25rem; }
  .history-timeline-current { margin-top:10px; }
  .history-timeline-item { padding-bottom:37px; }
}

/* Variante originale di nealogic-effects, lasciata accanto alla timeline precedente per confronto. */
.effects-story-section { padding:42px 0 120px; background:#020b19; color:#fff; }
.effects-story-shell { display:grid; grid-template-columns:.8fr 1.2fr; gap:80px; align-items:start; }
.effects-story-sticky { position:sticky; top:130px; padding:15px 0; }
.effects-story-heading { max-width:980px; margin:0 auto 80px; color:#fff; font-size:3.5rem; font-weight:400; letter-spacing:normal; line-height:1.1; text-align:center; }
.effects-year-display { margin:15px 0; color:rgba(255,255,255,.08); font-size:clamp(90px,14vw,180px); font-weight:800; letter-spacing:-.08em; line-height:.85; }
.effects-story-event-title { margin:0 0 18px; color:#fff; font-size:32px; font-weight:400; line-height:1.05; }.effects-story-sticky > p:not(.effects-year-display) { max-width:450px; margin:0; color:#b9c8d2; font-family:"Poppins",Arial,sans-serif; font-size:16px; font-weight:300; line-height:1.7; }
.effects-story-progress { display:block; height:4px; margin-top:28px; overflow:hidden; border-radius:999px; background:rgba(255,255,255,.1); }
.effects-story-progress i { display:block; width:14%; height:100%; background:#2198d6; transition:width .35s; }
.effects-timeline { position:relative; }
.effects-timeline::before { position:absolute; top:24px; bottom:24px; left:13px; width:2px; background:rgba(255,255,255,.12); content:""; }
.effects-timeline-item { position:relative; padding:30px 28px 70px 60px; opacity:.42; transform:scale(.98); transition:.4s; }
.effects-timeline-item::before { position:absolute; top:40px; left:6px; width:16px; height:16px; border:3px solid #0d2a3d; border-radius:50%; background:#244a62; box-shadow:0 0 0 1px rgba(255,255,255,.15); content:""; }
.effects-timeline-item.is-active { opacity:1; transform:scale(1); }
.effects-timeline-item.is-active::before { background:#2198d6; box-shadow:0 0 0 8px rgba(33,152,214,.12); }
.effects-timeline-year { margin:0 0 10px; color:#73c8f3; font-family:"Poppins",Arial,sans-serif; font-size:13px; font-weight:300; letter-spacing:.16em; }
.effects-timeline-item h3 { margin:0 0 10px; color:#fff; font-size:32px; font-weight:400; line-height:1.1; }
.effects-timeline-item > p:last-of-type { margin:0; color:#aebec9; font-family:"Poppins",Arial,sans-serif; font-size:16px; font-weight:300; line-height:1.7; }
.effects-timeline-media { margin:26px 0 0; overflow:hidden; border-radius:14px; background:#102c3d; aspect-ratio:4 / 3; }.effects-timeline-media img { display:block; width:100%; height:100%; object-fit:cover; }.effects-timeline-detail { margin-top:24px; }.effects-timeline-detail h4 { margin:0 0 14px; color:#fff; font-size:22px; font-weight:400; line-height:1.2; }.effects-timeline-detail p { margin:0 0 15px; color:#b9c8d2; font-family:"Poppins",Arial,sans-serif; font-size:16px; font-weight:300; line-height:1.7; }.effects-timeline-detail p:last-child { margin-bottom:0; }
.effects-nina-item .effects-timeline-media { position:relative; display:block; aspect-ratio:3 / 2; background:#07121f; }
.effects-nina-item .effects-nina-chat-preview > img { position:absolute; bottom:-26%; left:22%; display:block; width:auto; max-width:none; height:132%; object-fit:contain; object-position:center bottom; transform:translateX(-50%); }
.effects-nina-chat-preview::after { position:absolute; inset:0; background:linear-gradient(90deg,rgba(2,11,25,.28),transparent 38%); content:""; pointer-events:none; }
.effects-nina-chat-preview figcaption { position:absolute; z-index:1; right:22px; bottom:22px; width:min(278px,calc(100% - 34px)); margin:0; padding:17px; border:1px solid rgba(255,255,255,.16); border-radius:15px; background:rgba(2,11,25,.94); box-shadow:0 14px 30px rgba(0,0,0,.28); }
.effects-nina-chat-preview__eyebrow { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 0 9px; color:#dbe6eb; font-family:"Poppins",Arial,sans-serif; font-size:9px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.effects-nina-chat-preview__eyebrow span { padding:4px 7px; border:1px solid rgba(119,214,152,.48); border-radius:999px; color:#9ce1b1; font-size:8px; letter-spacing:0; text-transform:lowercase; }
.effects-nina-chat-messages { display:grid; gap:8px; min-height:100px; margin:0 0 10px; transition:opacity .18s ease,transform .18s ease; }
.effects-nina-chat-messages.is-changing { opacity:0; transform:translateY(6px); }
.effects-nina-message { width:fit-content; max-width:92%; margin:0; padding:9px 11px; border-radius:10px; font-family:"Poppins",Arial,sans-serif; font-size:11px; line-height:1.35; animation:effects-nina-chat-message-in .42s cubic-bezier(.22,1,.36,1) both; }
.effects-nina-message--user { justify-self:end; border-bottom-right-radius:3px; background:#ca6622; color:#fff; }
.effects-nina-message--nina { justify-self:start; border:1px solid rgba(255,255,255,.13); border-bottom-left-radius:3px; background:rgba(255,255,255,.08); color:#edf1f2; animation-delay:.22s; }
.effects-nina-chat-preview__input { display:flex; align-items:center; justify-content:space-between; margin:0; padding:10px; border:1px solid rgba(255,255,255,.12); border-radius:7px; color:#8e989d; font-family:"Poppins",Arial,sans-serif; font-size:10px; }
.effects-nina-chat-preview__input span { display:grid; width:26px; height:22px; margin:-6px -6px -6px 0; place-items:center; border-radius:4px; background:#ca6622; color:#fff; font-size:15px; }
.effects-nina-typing { display:inline-flex; align-items:center; gap:3px; min-width:32px; }
.effects-nina-typing i { width:4px; height:4px; border-radius:50%; background:#dfe7e9; animation:effects-nina-typing-dot .8s ease-in-out infinite alternate; }
.effects-nina-typing i:nth-child(2) { animation-delay:.18s; }
.effects-nina-typing i:nth-child(3) { animation-delay:.36s; }
@keyframes effects-nina-chat-message-in { from { opacity:0; transform:translateY(9px) scale(.97); } to { opacity:1; transform:none; } }
@keyframes effects-nina-typing-dot { from { opacity:.35; transform:translateY(0); } to { opacity:1; transform:translateY(-2px); } }
.effects-nina-chat { display:flex; align-items:center; gap:14px; margin-top:26px; padding:18px; border:1px solid rgba(255,255,255,.12); border-radius:18px; background:rgba(255,255,255,.06); box-shadow:0 0 0 1px rgba(33,152,214,.04),0 0 42px rgba(33,152,214,.12); }
.effects-nina-chat > span { display:grid; place-items:center; width:46px; height:46px; flex:0 0 46px; border-radius:50%; background:linear-gradient(145deg,#49b7ee,#1377b1); font-weight:800; }
.effects-nina-chat p { margin:0; color:#b9c8d2; font-family:"Poppins",Arial,sans-serif; font-size:14px; font-weight:300; line-height:1.5; }
.effects-nina-chat strong { color:#fff; font-weight:700; }

@media (max-width:900px) {
  .effects-story-section { padding:40px 0 80px; }
  .effects-story-heading { margin-bottom:48px; }
  .effects-story-shell { grid-template-columns:1fr; gap:46px; }
  .effects-story-sticky { position:relative; top:auto; }
  .effects-year-display { font-size:110px; }
}
@media (max-width:600px) {
  .effects-timeline-item { padding-left:48px; padding-right:0; }
  .effects-timeline-item h3 { font-size:26px; }
  .effects-nina-item .effects-nina-chat-preview > img { left:24%; height:125%; }
  .effects-nina-chat-preview figcaption { right:14px; bottom:14px; width:min(255px,calc(100% - 28px)); padding:14px; }
}
@media (prefers-reduced-motion:reduce) { .effects-nina-chat-messages,.effects-nina-message { transition:none; animation:none; } .effects-nina-typing i { animation:none; } }

/* Racconto editoriale della storia del Gruppo. */
.history-story {
  max-width: 1120px;
  margin-top: 74px;
  padding-top: 44px;
}
.history-story > h3 {
  max-width: 660px;
  margin-bottom: 52px;
}
.history-chapters { display: grid; gap: 72px; }
.history-chapter {
  display: grid;
  grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr);
  gap: clamp(36px, 7vw, 96px);
  align-items: center;
}
.history-chapter--reversed .history-chapter__image { order: 2; }
.history-chapter__image {
  position: relative;
  min-height: 360px;
  margin: 0;
  overflow: hidden;
  border-radius: 4px;
  background: #e9edf0;
}
.history-chapter__image::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(2, 11, 25, .08), transparent 54%);
  content: "";
  pointer-events: none;
}
.history-chapter__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.history-chapter__copy { max-width: 510px; }
.history-chapter--reversed .history-chapter__copy { justify-self: end; }
.history-chapter__year {
  margin: 0 0 13px !important;
  color: var(--accent) !important;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .14em;
}
.history-chapter h4 {
  max-width: 500px;
  margin: 0 0 18px;
  color: #020b19;
  font-size: clamp(1.75rem, 2.7vw, 2.55rem);
  font-weight: 400;
  letter-spacing: -.055em;
  line-height: 1.05;
}
.history-chapter__copy p:not(.history-chapter__year) {
  max-width: 490px;
  margin: 0 0 15px;
  color: #020b19 !important;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.66;
}
.history-chapter__copy p:last-child { margin-bottom: 0; }

@media (max-width: 800px) {
  .history-story { margin-top: 54px; padding-top: 34px; }
  .history-story > h3 { margin-bottom: 36px; }
  .history-chapters { gap: 48px; }
  .history-chapter { grid-template-columns: 1fr; gap: 26px; }
  .history-chapter--reversed .history-chapter__image { order: 0; }
  .history-chapter__image { min-height: 300px; aspect-ratio: 1.18 / 1; }
  .history-chapter--reversed .history-chapter__copy { justify-self: start; }
  .history-chapter h4 { font-size: clamp(1.75rem, 8vw, 2.3rem); }
  .history-chapter__copy p:not(.history-chapter__year) { font-size: 16px; line-height: 1.62; }
}

/* Ecosistema: laptop che entra in scena al raggiungimento della sezione. */
.ecosystem-showcase { position:relative; overflow:hidden; padding:clamp(82px,11vw,148px) 0; background:#020b19; color:#f7f6f2; }
.ecosystem-showcase::before { position:absolute; inset:0; background:radial-gradient(circle at 76% 50%,rgba(33,152,214,.19),transparent 27%),linear-gradient(90deg,rgba(33,152,214,.08) 1px,transparent 1px),linear-gradient(rgba(33,152,214,.07) 1px,transparent 1px); background-size:auto,44px 44px,44px 44px; content:""; mask-image:linear-gradient(90deg,transparent 2%,#000 52%,transparent); pointer-events:none; }
.ecosystem-showcase__grid { position:relative; display:grid; grid-template-columns:minmax(280px,.78fr) minmax(470px,1.22fr); align-items:center; gap:clamp(36px,6vw,90px); }
.ecosystem-showcase__copy { position:relative; z-index:2; max-width:480px; }
.ecosystem-showcase__eyebrow { margin:0 0 18px; color:#68bee8; font-size:11px; font-weight:700; letter-spacing:.15em; }
.ecosystem-showcase h2 { margin:0 0 22px; font-family:inherit; font-size:clamp(2.55rem,4.1vw,4.4rem); font-weight:400; letter-spacing:-.06em; line-height:.97; }
.ecosystem-showcase h2 em { color:var(--accent); font-style:normal; }
.ecosystem-showcase__copy > p:not(.ecosystem-showcase__eyebrow) { max-width:440px; margin:0; color:#bcc9d2; font-size:17px; line-height:1.62; }
.ecosystem-showcase__action { display:inline-flex; align-items:center; gap:18px; margin-top:31px; color:#fff; font-size:14px; font-weight:700; text-decoration:none; transition:color .2s var(--ease),transform .2s var(--ease); }
.ecosystem-showcase__action span { color:#68bee8; font-size:22px; font-weight:400; transition:transform .2s var(--ease); }
.ecosystem-showcase__action:hover { color:#68bee8; transform:translateX(3px); }.ecosystem-showcase__action:hover span { transform:translateX(5px); }
.ecosystem-laptop { position:relative; z-index:1; width:min(720px,100%); margin-left:auto; perspective:1500px; transform-style:preserve-3d; }
.ecosystem-laptop__lid { position:relative; padding:clamp(7px,1.05vw,12px); border:1px solid rgba(223,238,247,.42); border-radius:clamp(12px,1.4vw,19px) clamp(12px,1.4vw,19px) 7px 7px; background:linear-gradient(135deg,#c9d4dd,#576672 39%,#d5e1e8 100%); box-shadow:0 34px 70px rgba(0,0,0,.46),inset 0 1px rgba(255,255,255,.7); transform:rotateX(18deg) rotateY(-11deg) rotateZ(2deg); transform-origin:center bottom; transition:transform 1.15s cubic-bezier(.16,.84,.27,1),opacity .65s ease; }
.ecosystem-laptop__camera { position:absolute; z-index:2; top:clamp(3px,.55vw,7px); left:50%; width:5px; height:5px; border-radius:50%; background:#202b34; box-shadow:0 0 0 1px rgba(255,255,255,.45); transform:translateX(-50%); }
.ecosystem-laptop__screen { overflow:hidden; aspect-ratio:16 / 10; border:1px solid #091521; border-radius:clamp(7px,.8vw,11px); background:#07121b; box-shadow:inset 0 0 0 1px rgba(0,0,0,.1); }
.ecosystem-laptop__video { display:block; width:100%; height:100%; object-fit:cover; }
.laptop-appbar { height:9%; display:flex; align-items:center; gap:5px; padding:0 4.5%; background:#fff; border-bottom:1px solid #dce5ea; }.laptop-appbar__brand { margin-right:auto; color:#102d4b; font-family:"Ubuntu",sans-serif; font-size:clamp(8px,1.15vw,14px); font-weight:400; letter-spacing:-.06em; }.laptop-appbar__brand span { color:#2198d6; }.laptop-appbar i { width:clamp(4px,.48vw,6px); height:clamp(4px,.48vw,6px); border-radius:50%; background:#d7e2e8; }
.laptop-dashboard { display:grid; grid-template-columns:10% 1fr; height:91%; }.laptop-dashboard__nav { display:flex; flex-direction:column; align-items:center; gap:8%; padding:13% 0; background:#082945; }.laptop-dashboard__nav b { width:27%; aspect-ratio:1; border-radius:3px; background:#4d7190; }.laptop-dashboard__nav b.is-active { background:#53b7e7; box-shadow:0 0 11px rgba(83,183,231,.72); }
.laptop-dashboard__main { padding:5.5% 6%; background:linear-gradient(135deg,#f7fbfd,#e8f3f7); }.laptop-dashboard__heading { display:flex; align-items:center; justify-content:space-between; }.laptop-dashboard__heading span { display:block; width:33%; height:clamp(5px,.7vw,9px); border-radius:999px; background:#17395c; }.laptop-dashboard__heading small { color:#7890a4; font-size:clamp(4px,.52vw,7px); }.laptop-dashboard__stats { display:grid; grid-template-columns:repeat(3,1fr); gap:3%; margin-top:6%; }.laptop-dashboard__stats div { padding:8% 9%; border:1px solid #ddeaf0; border-radius:5px; background:#fff; }.laptop-dashboard__stats small { display:block; color:#7690a3; font-size:clamp(4px,.53vw,7px); }.laptop-dashboard__stats strong { display:block; margin-top:7%; color:#15375b; font-size:clamp(7px,.9vw,12px); }.laptop-dashboard__stats i { display:block; width:45%; height:2px; margin-top:12%; border-radius:5px; background:#65c4ea; }
.laptop-dashboard__chart { display:flex; align-items:end; gap:5%; height:30%; margin-top:6%; padding:5% 5% 0; border:1px solid #dce8ed; border-radius:5px; background:#fff; }.laptop-dashboard__chart span { width:9%; border-radius:3px 3px 0 0; background:linear-gradient(#68c4eb,#2496d3); animation:laptop-bars 2.7s ease-in-out infinite; }.laptop-dashboard__chart span:nth-child(1){height:31%}.laptop-dashboard__chart span:nth-child(2){height:58%;animation-delay:-.9s}.laptop-dashboard__chart span:nth-child(3){height:43%;animation-delay:-1.4s}.laptop-dashboard__chart span:nth-child(4){height:74%;animation-delay:-.5s}.laptop-dashboard__chart span:nth-child(5){height:54%;animation-delay:-1.8s}.laptop-dashboard__chart span:nth-child(6){height:81%;animation-delay:-1.1s}.laptop-dashboard__chart span:nth-child(7){height:64%;animation-delay:-2.1s}.laptop-dashboard__chart span:nth-child(8){height:91%;animation-delay:-.25s}
.laptop-dashboard__table { display:grid; gap:9%; margin-top:6%; }.laptop-dashboard__table i { display:block; height:3px; border-radius:999px; background:linear-gradient(90deg,#c4d7e1 58%,transparent 58%); }
.ecosystem-laptop__base { position:relative; z-index:2; width:112%; height:clamp(14px,2.5vw,28px); margin:-1px 0 0 -6%; border:1px solid #71828e; border-top:0; border-radius:0 0 50% 50% / 0 0 65% 65%; background:linear-gradient(#b8c6ce,#71818d 52%,#45535d); box-shadow:0 15px 17px rgba(0,0,0,.35); transform:rotateX(18deg) rotateY(-11deg) rotateZ(2deg); transform-origin:top; transition:transform 1.15s cubic-bezier(.16,.84,.27,1); }.ecosystem-laptop__base i { position:absolute; top:13%; left:43%; width:14%; height:23%; border:1px solid rgba(36,48,57,.5); border-radius:0 0 8px 8px; background:rgba(218,229,235,.35); }
.ecosystem-laptop__shadow { position:absolute; z-index:-1; bottom:-3%; left:7%; width:94%; height:14%; border-radius:50%; background:rgba(0,0,0,.62); filter:blur(20px); opacity:.8; transform:scale(.75); transition:transform 1.15s cubic-bezier(.16,.84,.27,1),opacity .7s ease; }
.ecosystem-showcase:not(.is-visible) .ecosystem-laptop__lid { opacity:0; transform:translateY(130px) rotateX(45deg) rotateY(-18deg) rotateZ(5deg); }.ecosystem-showcase:not(.is-visible) .ecosystem-laptop__base { transform:translateY(55px) rotateX(31deg) rotateY(-18deg) rotateZ(5deg); }.ecosystem-showcase:not(.is-visible) .ecosystem-laptop__shadow { opacity:0; transform:scale(.35); }
.ecosystem-showcase.is-visible .ecosystem-laptop__lid { animation:ecosystem-laptop-hover 6s ease-in-out 1.2s infinite; }.ecosystem-showcase.is-visible .ecosystem-laptop__base { animation:ecosystem-laptop-base-hover 6s ease-in-out 1.2s infinite; }
@keyframes laptop-bars { 0%,100% { filter:brightness(1); transform:scaleY(.88); transform-origin:bottom; } 50% { filter:brightness(1.2); transform:scaleY(1); transform-origin:bottom; } }@keyframes ecosystem-laptop-hover { 0%,100% { transform:rotateX(18deg) rotateY(-11deg) rotateZ(2deg) translateY(0); } 50% { transform:rotateX(17deg) rotateY(-9deg) rotateZ(1deg) translateY(-10px); } }@keyframes ecosystem-laptop-base-hover { 0%,100% { transform:rotateX(18deg) rotateY(-11deg) rotateZ(2deg) translateY(0); } 50% { transform:rotateX(17deg) rotateY(-9deg) rotateZ(1deg) translateY(-8px); } }
/* Ingresso della sezione: testo in sequenza e laptop con la stessa traiettoria prospettica del tablet NeaGest. */
.ecosystem-showcase:not(.is-visible) .ecosystem-showcase__copy > * { opacity:0; transform:translateX(-42px); }.ecosystem-showcase.is-visible .ecosystem-showcase__copy > * { animation:ecosystem-copy-in .72s cubic-bezier(.22,1,.36,1) both; }.ecosystem-showcase.is-visible .ecosystem-showcase__copy > p { animation-delay:.12s; }.ecosystem-showcase.is-visible .ecosystem-showcase__copy > a { animation-delay:.24s; }
.ecosystem-showcase:not(.is-visible) .ecosystem-laptop { opacity:1; transform:none; }html.motion-enabled .ecosystem-laptop.motion-section:not(.is-visible) { opacity:0; }html.motion-enabled .ecosystem-laptop.motion-section.is-visible { animation:ecosystem-laptop-in 1100ms cubic-bezier(.22,1,.36,1) both; }
.ecosystem-showcase:not(.is-visible) .ecosystem-laptop__lid { opacity:1; transform:rotateX(18deg) rotateY(-11deg) rotateZ(2deg); }.ecosystem-showcase:not(.is-visible) .ecosystem-laptop__base { opacity:1; transform:rotateX(18deg) rotateY(-11deg) rotateZ(2deg); }.ecosystem-showcase:not(.is-visible) .ecosystem-laptop__shadow { opacity:.8; transform:scale(.75); }
@keyframes ecosystem-copy-in { from { opacity:0; transform:translateX(-42px); } to { opacity:1; transform:translateX(0); } }@keyframes ecosystem-laptop-in { from { opacity:0; transform:translateY(210px) translateZ(-180px) rotateX(58deg) scale(.84); } to { opacity:1; transform:translateY(0) translateZ(22px) rotateX(4deg) scale(1); } }
@media (max-width:800px) { .ecosystem-showcase { padding:76px 0 84px; }.ecosystem-showcase__grid { grid-template-columns:1fr; gap:50px; }.ecosystem-showcase__copy { max-width:570px; }.ecosystem-showcase h2 { max-width:540px; }.ecosystem-laptop { width:min(650px,100%); margin-inline:auto; }.ecosystem-showcase__copy > p:not(.ecosystem-showcase__eyebrow) { font-size:16px; } }
@media (prefers-reduced-motion:reduce) { .ecosystem-showcase__copy > *,.ecosystem-laptop,.ecosystem-laptop__lid,.ecosystem-laptop__base,.ecosystem-laptop__shadow { transition:none!important; animation:none!important; }.ecosystem-showcase:not(.is-visible) .ecosystem-showcase__copy > *,.ecosystem-showcase:not(.is-visible) .ecosystem-laptop,.ecosystem-showcase:not(.is-visible) .ecosystem-laptop__lid,.ecosystem-showcase:not(.is-visible) .ecosystem-laptop__base { opacity:1; transform:none; }.ecosystem-showcase:not(.is-visible) .ecosystem-laptop__shadow { opacity:.8; transform:scale(.75); } }

/* Card delle aree: immagini editoriali a tutta altezza, logo e contenuto sovrapposti. */
.hero .product-stage { height:460px; gap:20px; }
.hero .product-stage .website-card {
  position:relative;
  isolation:isolate;
  height:460px;
  min-height:0;
  padding:28px 22px 17px;
  border-color:rgba(104,190,232,.42);
  border-radius:20px;
  background-position:center;
  background-size:cover;
  box-shadow:0 18px 46px rgba(0,0,0,.38);
  transition:border-color .3s var(--ease);
}
.hero .product-stage .opera-card { background-image:linear-gradient(180deg,rgba(1,10,23,.94) 0%,rgba(1,10,23,.52) 43%,rgba(1,10,23,.18) 62%,rgba(1,10,23,.93) 100%),url("../neamind/images/neamind.jpeg")!important; }
.hero .product-stage .gest-card { background-image:linear-gradient(180deg,rgba(1,10,23,.94) 0%,rgba(1,10,23,.48) 43%,rgba(1,10,23,.14) 62%,rgba(1,10,23,.93) 100%),url("../foto/software.png")!important; }
.hero .product-stage .website-card:nth-child(3) { background-image:linear-gradient(180deg,rgba(1,10,23,.94) 0%,rgba(1,10,23,.5) 43%,rgba(1,10,23,.16) 62%,rgba(1,10,23,.93) 100%),url("../foto/marketing.jpg")!important; }
.hero .product-stage .website-card::before,.hero .product-stage .website-card::after { display:none; }
.hero .product-stage .website-card > * { position:relative; z-index:1; }
.hero .product-stage .website-logo,.hero .product-stage .neamind-logo { align-self:flex-start; width:210px; flex:0 0 auto; margin:0; }
.hero .product-stage .opera-card .neamind-logo { width:180px; }
.hero .product-stage .neacom-logo { width:178px; height:24px; overflow:hidden; }
.hero .product-stage .neacom-logo img { display:block; width:210px; max-width:none; height:auto; transform:translateX(-32px); }
.hero .product-stage .website-card-body { position:absolute; right:22px; bottom:17px; left:22px; display:flex; flex-direction:column; justify-content:flex-end; padding-top:0; }
.hero .product-stage .website-card-body h2 { margin-bottom:12px; color:#fff; font-size:25px; font-weight:400; line-height:1.08; text-shadow:0 2px 14px rgba(0,0,0,.58); }
.hero .product-stage .website-card-body p { max-width:270px; color:#d7e0e9; font-size:15px; line-height:1.45; text-shadow:0 1px 12px rgba(0,0,0,.7); }
.hero .product-stage .website-card .panel-cta { min-height:44px; margin-top:18px; padding-top:14px; border-top-color:rgba(213,229,242,.32); color:#fff; font-size:13px; text-shadow:0 1px 10px rgba(0,0,0,.7); }
.hero .product-stage .website-card .panel-cta-icon { color:#8fd3ff; font-size:23px; }

@media (hover:hover) and (pointer:fine) {
  .hero .product-stage .website-card:hover,
  .hero .product-stage .website-card:focus-visible {
    border-color:#b9e9ff;
    box-shadow:0 18px 46px rgba(0,0,0,.38);
    filter:none;
    transform:none;
  }
  .hero .product-stage .website-card:hover .panel-cta-icon,
  .hero .product-stage .website-card:focus-visible .panel-cta-icon { transform:none; }
}

@media (max-width:800px) {
  .hero .product-stage { height:auto; gap:16px; }
  .hero .product-stage .website-card { width:100%; height:440px; min-height:440px; }
}