*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --bg:      #0B1430;
      --surface: #101B3D;
      --card:    #13204A;
      --card2:   #182758;
      --border:  rgba(229,240,252,.08);
      --border2: rgba(229,240,252,.14);
      --border3: rgba(229,240,252,.20);
      --t1: #EAF1FB;
      --t2: #93A4C7;
      --t3: #51618A;
      --blue:    #1183E6;
      --blue-l:  #4BA8F2;
      --blue-xl: #9CCBF7;
      --ice:     #E5F0FC;
      --ice-d:   #B9CFEA;
      --orange:  #FF9A49;
      --orange-l:#FFB877;
      --green:   #22c55e;
      --font: 'Space Grotesk', -apple-system, 'Segoe UI', sans-serif;
      --mono: 'Space Mono', 'Geist Mono', ui-monospace, monospace;
      --r: 10px;
      --r-lg: 16px;
      --r-xl: 24px;
      --ease: cubic-bezier(0.16, 1, 0.3, 1);
      --ease-out: cubic-bezier(0.0, 0.0, 0.2, 1);
      --t: .2s var(--ease);
    }

    html { scroll-behavior: smooth; }

    body {
      font-family: var(--font);
      background: var(--bg);
      color: var(--t1);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }

    /* ─── NOISE OVERLAY ─── */
    body::before {
      content: '';
      position: fixed; inset: 0; z-index: 0;
      pointer-events: none;
      opacity: .032;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      background-size: 200px 200px;
    }

    /* ─── GLOBAL GRID BACKGROUND ─── */
    .grid-bg {
      position: fixed; inset: 0; z-index: 0; pointer-events: none;
      background-image:
        linear-gradient(rgba(17,131,230,.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(17,131,230,.07) 1px, transparent 1px);
      background-size: 72px 72px;
    }
    /* Dot at every grid intersection */
    .grid-bg::after {
      content: '';
      position: absolute; inset: 0;
      background-image: radial-gradient(circle, rgba(17,131,230,.18) 1px, transparent 1px);
      background-size: 72px 72px;
      background-position: -1px -1px;
    }

    /* ─── CANVAS PARTICLES ─── */
    #bg-canvas {
      position: fixed; inset: 0; z-index: 0;
      pointer-events: none; opacity: .55;
    }

    /* ─── GLOBAL AMBIENT ORBS (scattered throughout page) ─── */
    .ambient-orbs {
      position: absolute; inset: 0; pointer-events: none;
      overflow: hidden;
    }
    .ao {
      position: absolute; border-radius: 50%;
      filter: blur(100px); pointer-events: none;
    }
    /* Each section gets its own ambient orb via data attribute */
    #hero      .ao { width:700px;height:700px; background:radial-gradient(circle,rgba(17,131,230,.2) 0%,transparent 70%); top:-180px;left:50%;transform:translateX(-50%); }
    #problema  .ao { width:500px;height:500px; background:radial-gradient(circle,rgba(229,240,252,.14) 0%,transparent 70%); top:0;right:-100px; }
    #screen    .ao { width:600px;height:600px; background:radial-gradient(circle,rgba(229,240,252,.1) 0%,transparent 70%); bottom:-100px;left:-150px; }
    #perchi    .ao { width:550px;height:550px; background:radial-gradient(circle,rgba(17,131,230,.16) 0%,transparent 70%); top:-80px;right:-80px; }
    #moduli    .ao { width:600px;height:600px; background:radial-gradient(circle,rgba(229,240,252,.12) 0%,transparent 70%); bottom:0;left:50%;transform:translateX(-50%); }
    #principi  .ao { width:450px;height:450px; background:radial-gradient(circle,rgba(229,240,252,.1) 0%,transparent 70%); top:50%;left:-120px;transform:translateY(-50%); }
    #chi       .ao { width:500px;height:500px; background:radial-gradient(circle,rgba(17,131,230,.15) 0%,transparent 70%); bottom:-100px;right:-80px; }
    #faq       .ao { width:450px;height:450px; background:radial-gradient(circle,rgba(229,240,252,.12) 0%,transparent 70%); top:0;left:50%;transform:translateX(-50%); }
    #cta       .ao { width:700px;height:700px; background:radial-gradient(circle,rgba(17,131,230,.2) 0%,transparent 65%); top:50%;left:50%;transform:translate(-50%,-50%); }

    /* ─── ANIMATED BEAM / SCAN LINE ─── */
    .beam {
      position: fixed; top: 0; left: 50%; z-index: 0;
      width: 1px; height: 100vh;
      background: linear-gradient(180deg, transparent 0%, rgba(17,131,230,.25) 30%, rgba(229,240,252,.2) 60%, transparent 100%);
      pointer-events: none;
      animation: beamDrift 18s ease-in-out infinite alternate;
      transform-origin: top center;
      opacity: .4;
    }
    .beam:nth-child(2) {
      left: 30%; animation-duration: 22s; animation-delay: -6s;
      background: linear-gradient(180deg, transparent 0%, rgba(229,240,252,.15) 40%, transparent 100%);
      opacity: .25;
    }
    .beam:nth-child(3) {
      left: 70%; animation-duration: 26s; animation-delay: -12s;
      background: linear-gradient(180deg, transparent 0%, rgba(229,240,252,.15) 40%, transparent 100%);
      opacity: .25;
    }
    @keyframes beamDrift {
      0%   { transform: translateX(-50%) skewX(-2deg); }
      50%  { transform: translateX(calc(-50% + 40px)) skewX(1deg); }
      100% { transform: translateX(calc(-50% - 30px)) skewX(-1deg); }
    }

    /* ─── HORIZONTAL GLOW BANDS (between sections) ─── */
    .glow-band {
      position: absolute; left: 0; right: 0; height: 1px;
      background: linear-gradient(90deg, transparent 0%, rgba(17,131,230,.3) 30%, rgba(255,154,73,.28) 60%, transparent 100%);
      pointer-events: none;
    }

    /* ─── NAV ─── */
    nav.topnav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 100;
      height: 58px;
      border-bottom: 1px solid transparent;
      background: transparent;
      transition: background .3s, border-color .3s, backdrop-filter .3s;
    }
    nav.topnav.scrolled {
      background: rgba(11,20,48,.85);
      border-bottom-color: var(--border);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
    }
    .nav-inner {
      display: flex; align-items: center; justify-content: space-between;
      height: 100%; max-width: 1100px; margin: 0 auto; padding: 0 40px;
    }
    .logo {
      display: flex; align-items: center; gap: 10px;
      text-decoration: none; color: var(--t1);
    }
    .logo img { width: 28px; height: 28px; }
    .logo .wordmark {
      font-family: var(--font); font-size: .98rem; font-weight: 500;
      letter-spacing: .01em; color: var(--t1); line-height: 1;
      display: inline-flex; align-items: baseline; gap: .34em;
    }
    .logo .wordmark b { font-weight: 700; letter-spacing: .12em; color: var(--ice); }
    .nav-links { display: flex; align-items: center; gap: 2px; list-style: none; }
    .nav-links a {
      font-size: .82rem; color: var(--t2); text-decoration: none;
      padding: 6px 14px; border-radius: 8px;
      transition: color var(--t), background var(--t);
    }
    .nav-links a:hover { color: var(--t1); background: rgba(255,255,255,.05); }
    .nav-cta {
      font-size: .82rem; font-weight: 600;
      background: var(--blue);
      color: #fff;
      padding: 8px 18px; border-radius: var(--r);
      text-decoration: none;
      transition: box-shadow var(--t), transform var(--t), opacity var(--t);
      box-shadow: 0 0 0 0 rgba(17,131,230,0);
    }
    .nav-cta:hover {
      box-shadow: 0 0 20px rgba(17,131,230,.5);
      transform: translateY(-1px);
      opacity: .92;
    }
    @media (max-width: 640px) { .nav-links { display: none; } }

    /* ─── LAYOUT ─── */
    .section {
      position: relative; z-index: 1;
      padding: 140px 0 100px;
      min-height: 100vh;
      display: flex;
      align-items: center;
      overflow: hidden;
    }
    .section:first-of-type { padding-top: 160px; }
    .wrap {
      width: 100%; max-width: 1100px;
      margin: 0 auto; padding: 0 40px;
    }
    .wrap.narrow { max-width: 760px; }

    /* ─── ANIMATE ON SCROLL ─── */
    .reveal {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity .7s var(--ease), transform .7s var(--ease);
    }
    .reveal.visible { opacity: 1; transform: translateY(0); }
    .reveal-delay-1 { transition-delay: .1s; }
    .reveal-delay-2 { transition-delay: .2s; }
    .reveal-delay-3 { transition-delay: .3s; }
    .reveal-delay-4 { transition-delay: .4s; }

    /* ─── TYPOGRAPHY ─── */
    .eyebrow {
      font-family: var(--mono); font-size: .68rem;
      letter-spacing: .1em; text-transform: uppercase;
      color: var(--t3); margin-bottom: 18px;
      display: flex; align-items: center; gap: 10px;
    }
    .eyebrow-dot {
      width: 5px; height: 5px; border-radius: 50%;
      background: var(--blue); flex-shrink: 0;
      box-shadow: 0 0 8px var(--blue);
      animation: blink 2.4s ease infinite;
    }
    @keyframes blink { 0%,100%{opacity:1;box-shadow:0 0 8px var(--blue)} 50%{opacity:.25;box-shadow:none} }

    h1 {
      font-size: clamp(2.2rem, 5vw, 3.8rem);
      font-weight: 800; letter-spacing: -.05em; line-height: 1.05;
      color: var(--t1); margin-bottom: 22px;
    }
    h1 .accent {
      background: linear-gradient(120deg, var(--blue-l), var(--orange));
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    h2 {
      font-size: clamp(1.7rem, 3.5vw, 2.6rem);
      font-weight: 700; letter-spacing: -.04em; line-height: 1.1;
      color: var(--t1); margin-bottom: 14px;
    }
    h2 .accent {
      background: linear-gradient(135deg, var(--blue-l), var(--ice));
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .lead {
      font-size: 1.05rem; color: var(--t2);
      line-height: 1.8; max-width: 540px;
    }

    /* ─── BUTTONS ─── */
    .btn-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 40px; }
    .btn {
      display: inline-flex; align-items: center; gap: 8px;
      font-family: var(--font); font-size: .9rem; font-weight: 600;
      padding: 12px 26px; border-radius: var(--r);
      text-decoration: none; border: none; cursor: pointer;
      transition: opacity var(--t), transform var(--t), box-shadow var(--t);
    }
    .btn:hover { transform: translateY(-2px); }
    .btn-primary {
      background: var(--blue);
      color: #fff;
      box-shadow: 0 0 0 0 rgba(17,131,230,0);
    }
    .btn-primary:hover { box-shadow: 0 0 28px rgba(17,131,230,.5); opacity: .9; }
    .btn-ghost {
      color: var(--t2); border: 1px solid var(--border3);
      background: rgba(255,255,255,.03);
    }
    .btn-ghost:hover { color: var(--t1); border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.06); }

    /* ─── HERO ─── */
    #hero { text-align: center; overflow: hidden; }
    #hero .wrap { display: flex; flex-direction: column; align-items: center; position: relative; }
    #hero .lead { text-align: center; max-width: 580px; }
    #hero .btn-row { justify-content: center; }

    /* Aurora orbs */
    .orb {
      position: absolute; border-radius: 50%;
      pointer-events: none; z-index: -1;
      filter: blur(80px);
      animation: drift 12s ease-in-out infinite alternate;
    }
    .orb-1 {
      width: 600px; height: 600px;
      background: radial-gradient(circle, rgba(17,131,230,.22) 0%, transparent 70%);
      top: -200px; left: 50%;
      transform: translateX(-60%);
      animation-duration: 15s;
    }
    .orb-2 {
      width: 500px; height: 500px;
      background: radial-gradient(circle, rgba(255,154,73,.12) 0%, transparent 70%);
      top: -100px; left: 50%;
      transform: translateX(10%);
      animation-duration: 20s;
      animation-delay: -5s;
    }
    .orb-3 {
      width: 350px; height: 350px;
      background: radial-gradient(circle, rgba(229,240,252,.12) 0%, transparent 70%);
      top: 100px; left: 50%;
      transform: translateX(-120%);
      animation-duration: 18s;
      animation-delay: -9s;
    }
    @keyframes drift {
      0%   { transform: translateX(-60%) translateY(0) scale(1); }
      50%  { transform: translateX(-55%) translateY(-40px) scale(1.05); }
      100% { transform: translateX(-65%) translateY(20px) scale(.95); }
    }

    /* Hero badge */
    .hero-badge {
      display: inline-flex; align-items: center; gap: 8px;
      background: rgba(17,131,230,.08);
      border: 1px solid rgba(17,131,230,.2);
      border-radius: 50px;
      padding: 6px 16px 6px 8px;
      font-size: .75rem; color: var(--blue-xl);
      margin-bottom: 28px;
      font-family: var(--mono); letter-spacing: .04em;
      animation: fadein .8s var(--ease) both;
    }
    @keyframes fadein { from { opacity:0; transform: translateY(12px); } to { opacity:1; transform:none; } }
    .hero-badge .badge-dot {
      width: 6px; height: 6px; border-radius: 50%;
      background: var(--blue); box-shadow: 0 0 8px var(--blue);
      animation: blink 2s infinite;
    }

    h1 { animation: fadein .9s .1s var(--ease) both; }
    #hero .lead { animation: fadein .9s .2s var(--ease) both; }
    #hero .btn-row { animation: fadein .9s .35s var(--ease) both; }

    /* ─── HERO STATS ─── */
    .hero-stats {
      display: flex; gap: 40px; margin-top: 60px;
      padding-top: 40px;
      border-top: 1px solid var(--border);
      animation: fadein .9s .5s var(--ease) both;
    }
    .stat-item { text-align: center; }
    .stat-num {
      font-size: 1.6rem; font-weight: 700; letter-spacing: -.04em;
      background: linear-gradient(135deg, var(--t1), var(--blue-xl));
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .stat-label { font-size: .72rem; color: var(--t3); font-family: var(--mono); letter-spacing: .06em; text-transform: uppercase; margin-top: 3px; }
    @media (max-width: 480px) { .hero-stats { gap: 24px; } }

    /* ─── PROBLEMA ─── */
    .compare {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 1px; background: var(--border);
      border: 1px solid var(--border); border-radius: var(--r-xl);
      overflow: hidden; margin-top: 40px;
    }
    .compare-cell {
      background: var(--bg); padding: 28px 32px;
      transition: background var(--t);
      position: relative;
    }
    .compare-cell:hover { background: var(--surface); }
    .compare-cell.good::before {
      content: '';
      position: absolute; top: 0; left: 0; right: 0; height: 2px;
      background: linear-gradient(90deg, transparent, var(--green), transparent);
      opacity: 0;
      transition: opacity var(--t);
    }
    .compare-cell.good:hover::before { opacity: 1; }
    .compare-cell.bad::before {
      content: '';
      position: absolute; top: 0; left: 0; right: 0; height: 2px;
      background: linear-gradient(90deg, transparent, #f87171, transparent);
      opacity: 0;
      transition: opacity var(--t);
    }
    .compare-cell.bad:hover::before { opacity: 1; }
    .cell-tag {
      font-family: var(--mono); font-size: .65rem;
      letter-spacing: .1em; text-transform: uppercase;
      margin-bottom: 10px; font-weight: 600;
      display: flex; align-items: center; gap: 7px;
    }
    .cell-tag::before { content:''; width:5px; height:5px; border-radius:50%; background:currentColor; flex-shrink:0; }
    .cell-tag.bad  { color: #f87171; }
    .cell-tag.good { color: #4ade80; }
    .compare-cell h3 { font-size: .92rem; font-weight: 600; color: var(--t1); margin-bottom: 7px; }
    .compare-cell p  { font-size: .84rem; color: var(--t2); line-height: 1.65; }
    @media (max-width: 580px) { .compare { grid-template-columns: 1fr; } }

    /* ─── SCREENSHOT ─── */
    .screen-layout {
      display: grid; grid-template-columns: 280px 1fr;
      gap: 56px; align-items: start; margin-top: 8px;
    }
    .stab-list { display: flex; gap: 4px; margin-top: 22px; flex-wrap: wrap; }
    .stab {
      font-family: var(--font); font-size: .8rem; font-weight: 500;
      color: var(--t3); padding: 7px 14px; border-radius: 8px;
      border: 1px solid transparent; cursor: pointer; background: none;
      transition: color var(--t), background var(--t), border-color var(--t), box-shadow var(--t);
    }
    .stab:hover { color: var(--t2); background: rgba(255,255,255,.04); }
    .stab.active {
      color: var(--blue-xl); background: rgba(17,131,230,.08);
      border-color: rgba(17,131,230,.2);
      box-shadow: 0 0 12px rgba(17,131,230,.1);
    }
    .app-frame {
      border-radius: 16px; overflow: hidden;
      border: 1px solid rgba(255,255,255,.1);
      box-shadow: 0 32px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(17,131,230,.05);
    }
    .app-bar {
      height: 38px; background: #14141e;
      border-bottom: 1px solid rgba(255,255,255,.06);
      display: flex; align-items: center; padding: 0 14px; gap: 7px;
    }
    .tb-dot { width: 11px; height: 11px; border-radius: 50%; }
    .tb-dot:nth-child(1) { background: #ff5f57; }
    .tb-dot:nth-child(2) { background: #febc2e; }
    .tb-dot:nth-child(3) { background: #28c840; }
    .tb-url {
      flex: 1; background: rgba(255,255,255,.05); border-radius: 6px;
      height: 22px; margin-left: 6px;
      display: flex; align-items: center; padding: 0 10px;
      font-family: var(--mono); font-size: .58rem; color: var(--t3);
    }
    .screen-imgs { position: relative; }
    .screen-img { width: 100%; display: none; }
    .screen-img.active { display: block; animation: imgfadein .3s var(--ease); }
    @keyframes imgfadein { from { opacity:0; transform:scale(.99); } to { opacity:1; transform:none; } }
    @media (max-width: 860px) { .screen-layout { grid-template-columns: 1fr; gap: 28px; } }

    /* ─── AUDIENCE CARDS ─── */
    .audience-grid {
      display: grid; grid-template-columns: repeat(3,1fr);
      gap: 14px; margin-top: 40px;
    }
    .audience-card {
      background: var(--card); border: 1px solid var(--border);
      border-radius: var(--r-xl); padding: 28px 24px;
      position: relative; overflow: hidden;
      transition: border-color var(--t), transform var(--t), box-shadow var(--t);
    }
    .audience-card::before {
      content: '';
      position: absolute; inset: 0; border-radius: inherit;
      background: radial-gradient(circle at 50% 0%, rgba(17,131,230,.08) 0%, transparent 60%);
      opacity: 0; transition: opacity var(--t);
    }
    .audience-card:hover { border-color: rgba(17,131,230,.25); transform: translateY(-4px); box-shadow: 0 20px 48px rgba(0,0,0,.4), 0 0 0 1px rgba(17,131,230,.08); }
    .audience-card:hover::before { opacity: 1; }
    .audience-icon { font-size: 1.5rem; margin-bottom: 16px; }
    .audience-role { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); margin-bottom: 8px; }
    .audience-card h3 { font-size: .92rem; font-weight: 600; color: var(--t1); margin-bottom: 8px; }
    .audience-card p { font-size: .83rem; color: var(--t2); line-height: 1.65; }
    @media (max-width: 680px) { .audience-grid { grid-template-columns: 1fr; } }

    /* ─── SUITE CARDS (Orbit + Desk) ─── */
    .suite-grid {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 16px; margin-top: 48px;
    }
    @media (max-width: 780px) { .suite-grid { grid-template-columns: 1fr; } }

    .suite-card {
      border-radius: var(--r-xl);
      border: 1px solid var(--border);
      overflow: hidden;
      position: relative;
      background: var(--card);
      transition: border-color var(--t), box-shadow var(--t), transform var(--t);
    }
    .suite-card:hover { transform: translateY(-3px); box-shadow: 0 24px 60px rgba(0,0,0,.5); }

    .suite-card.orbit { border-color: rgba(229,240,252,.2); }
    .suite-card.orbit:hover { border-color: rgba(229,240,252,.4); box-shadow: 0 24px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(229,240,252,.1); }
    .suite-card.desk  { border-color: rgba(17,131,230,.2); }
    .suite-card.desk:hover  { border-color: rgba(17,131,230,.4); box-shadow: 0 24px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(17,131,230,.1); }

    .suite-card-header {
      padding: 28px 28px 20px;
      border-bottom: 1px solid var(--border);
      position: relative;
    }
    .suite-card.orbit .suite-card-header::before {
      content: '';
      position: absolute; inset: 0;
      background: radial-gradient(ellipse 80% 120% at 50% 0%, rgba(229,240,252,.1) 0%, transparent 70%);
      pointer-events: none;
    }
    .suite-card.desk .suite-card-header::before {
      content: '';
      position: absolute; inset: 0;
      background: radial-gradient(ellipse 80% 120% at 50% 0%, rgba(17,131,230,.1) 0%, transparent 70%);
      pointer-events: none;
    }
    .suite-product-name {
      font-size: .68rem; font-family: var(--mono);
      letter-spacing: .1em; text-transform: uppercase;
      font-weight: 600; margin-bottom: 10px;
      display: flex; align-items: center; gap: 8px;
    }
    .suite-card.orbit .suite-product-name { color: var(--ice); }
    .suite-card.desk  .suite-product-name { color: var(--blue-xl); }
    .suite-product-dot {
      width: 6px; height: 6px; border-radius: 50%;
      flex-shrink: 0;
    }
    .suite-card.orbit .suite-product-dot { background: var(--ice); box-shadow: 0 0 8px var(--ice); }
    .suite-card.desk  .suite-product-dot { background: var(--blue);   box-shadow: 0 0 8px var(--blue); }
    .suite-card-header h3 { font-size: 1.15rem; font-weight: 700; color: var(--t1); margin-bottom: 8px; letter-spacing: -.03em; }
    .suite-card-header p  { font-size: .84rem; color: var(--t2); line-height: 1.65; }

    .suite-modules {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 1px; background: var(--border);
    }
    .mod {
      background: var(--card); padding: 18px 20px;
      transition: background var(--t);
      position: relative;
    }
    .mod:hover { background: var(--card2); }
    .mod-dot {
      width: 7px; height: 7px; border-radius: 50%;
      margin-bottom: 10px;
      transition: box-shadow var(--t);
    }
    .suite-card.orbit .mod-dot { background: var(--ice); }
    .suite-card.desk  .mod-dot { background: var(--blue); }
    .suite-card.orbit .mod:hover .mod-dot { box-shadow: 0 0 12px rgba(229,240,252,.6); }
    .suite-card.desk  .mod:hover .mod-dot { box-shadow: 0 0 12px rgba(17,131,230,.6); }
    .mod-name { font-size: .84rem; font-weight: 600; color: var(--t1); margin-bottom: 4px; }
    .mod-desc { font-size: .76rem; color: var(--t2); line-height: 1.5; }

    /* ─── PRINCIPLES ─── */
    .principles { list-style: none; margin-top: 40px; }
    .principle {
      display: flex; gap: 20px;
      padding: 22px 0; border-bottom: 1px solid var(--border);
      transition: background var(--t);
    }
    .principle:first-child { border-top: 1px solid var(--border); }
    .p-num {
      font-family: var(--mono); font-size: .68rem; color: var(--t3);
      letter-spacing: .06em; flex-shrink: 0; margin-top: 4px; width: 22px;
      transition: color var(--t);
    }
    .principle:hover .p-num { color: var(--blue); }
    .p-text h3 { font-size: .92rem; font-weight: 600; color: var(--t1); margin-bottom: 4px; }
    .p-text p  { font-size: .83rem; color: var(--t2); line-height: 1.65; }

    /* ─── FOUNDER ─── */
    .founder {
      background: var(--card); border: 1px solid var(--border);
      border-radius: var(--r-xl); padding: 40px;
      display: flex; gap: 28px; align-items: flex-start;
      margin-top: 40px; position: relative; overflow: hidden;
    }
    .founder::before {
      content: '';
      position: absolute; top: 0; left: 0; right: 0; height: 1px;
      background: linear-gradient(90deg, transparent, rgba(17,131,230,.4), rgba(229,240,252,.4), transparent);
    }
    .founder-av {
      width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0;
      background: linear-gradient(135deg, var(--blue), var(--orange));
      display: flex; align-items: center; justify-content: center;
      font-size: .95rem; font-weight: 700; color: #fff;
      box-shadow: 0 0 20px rgba(17,131,230,.3);
    }
    .founder-name { font-size: .95rem; font-weight: 600; color: var(--t1); margin-bottom: 3px; }
    .founder-role { font-family: var(--mono); font-size: .68rem; color: var(--t3); letter-spacing: .05em; margin-bottom: 14px; }
    .founder-bio { font-size: .87rem; color: var(--t2); line-height: 1.75; }
    .badges { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 24px; }
    .badge {
      font-family: var(--mono); font-size: .63rem; letter-spacing: .06em;
      text-transform: uppercase; padding: 4px 10px; border-radius: 50px; border: 1px solid;
      transition: box-shadow var(--t);
    }
    .badge:hover { box-shadow: 0 0 14px rgba(17,131,230,.25); }
    .badge-blue   { color: var(--blue-xl); border-color: rgba(17,131,230,.25); background: rgba(17,131,230,.08); }
    .badge-green  { color: #86efac; border-color: rgba(74,222,128,.25);  background: rgba(74,222,128,.08); }
    .badge-violet { color: var(--ice); border-color: rgba(229,240,252,.28);  background: rgba(229,240,252,.07); }
    @media (max-width: 580px) { .founder { flex-direction: column; padding: 28px; } }

    /* ─── FAQ ─── */
    .faq-list {
      margin-top: 40px; border: 1px solid var(--border);
      border-radius: var(--r-xl); overflow: hidden;
    }
    details { border-bottom: 1px solid var(--border); }
    details:last-child { border-bottom: none; }
    summary {
      display: flex; align-items: center; justify-content: space-between;
      padding: 20px 26px; cursor: pointer;
      font-size: .9rem; font-weight: 500; color: var(--t1);
      list-style: none; user-select: none; background: var(--bg);
      transition: background var(--t), color var(--t);
    }
    summary::-webkit-details-marker { display: none; }
    summary:hover { background: var(--surface); color: var(--blue-xl); }
    .faq-icon {
      width: 20px; height: 20px; border-radius: 50%;
      border: 1px solid var(--border2);
      display: flex; align-items: center; justify-content: center;
      font-size: .9rem; color: var(--t3); flex-shrink: 0;
      transition: transform var(--t), border-color var(--t), color var(--t);
    }
    details[open] .faq-icon { transform: rotate(45deg); border-color: var(--blue); color: var(--blue); }
    details[open] summary { background: var(--surface); }
    .faq-body { padding: 0 26px 22px; background: var(--surface); }
    .faq-body p { font-size: .86rem; color: var(--t2); line-height: 1.75; }

    /* ─── CTA ─── */
    #cta { text-align: center; position: relative; overflow: hidden; }
    #cta .wrap { display: flex; flex-direction: column; align-items: center; position: relative; }
    #cta .lead { text-align: center; max-width: 480px; }
    #cta .orb-cta {
      position: absolute; border-radius: 50%; pointer-events: none;
      filter: blur(100px); z-index: 0;
    }
    #cta .orb-cta-1 {
      width: 500px; height: 500px;
      background: radial-gradient(circle, rgba(17,131,230,.15) 0%, transparent 70%);
      top: -100px; left: 50%; transform: translateX(-60%);
    }
    #cta .orb-cta-2 {
      width: 400px; height: 400px;
      background: radial-gradient(circle, rgba(255,154,73,.14) 0%, transparent 70%);
      top: -50px; left: 50%; transform: translateX(10%);
    }
    .early-form {
      display: flex; gap: 8px; max-width: 400px; width: 100%;
      flex-wrap: wrap; justify-content: center; margin-top: 32px;
    }
    .early-input {
      flex: 1; min-width: 190px;
      background: rgba(255,255,255,.05); border: 1px solid var(--border2);
      border-radius: var(--r); padding: 12px 18px;
      font-family: var(--font); font-size: .88rem; color: var(--t1);
      outline: none; transition: border-color var(--t), box-shadow var(--t);
    }
    .early-input::placeholder { color: var(--t3); }
    .early-input:focus {
      border-color: rgba(17,131,230,.5);
      box-shadow: 0 0 0 3px rgba(17,131,230,.12), 0 0 20px rgba(17,131,230,.08);
    }
    .form-note { font-size: .73rem; color: var(--t3); margin-top: 12px; }

    /* ─── FOOTER ─── */
    footer {
      position: relative; z-index: 1;
      border-top: 1px solid var(--border);
      padding: 28px 40px;
      display: flex; align-items: center; justify-content: space-between;
      flex-wrap: wrap; gap: 10px;
      max-width: 1100px; margin: 0 auto;
    }
    .footer-copy { font-size: .74rem; color: var(--t3); }
    .footer-links { display: flex; gap: 16px; list-style: none; }
    .footer-links a { font-size: .74rem; color: var(--t3); text-decoration: none; transition: color var(--t); }
    .footer-links a:hover { color: var(--t2); }

    /* ─── SIDE DOTS ─── */
    .side-dots {
      position: fixed; right: 28px; top: 50%; transform: translateY(-50%);
      z-index: 99; display: flex; flex-direction: column; gap: 12px;
    }
    .dot {
      width: 5px; height: 5px; border-radius: 50%;
      background: var(--t3); border: none; cursor: pointer; padding: 0;
      transition: background var(--t), height var(--t), border-radius var(--t), box-shadow var(--t);
    }
    .dot.active { background: var(--blue); height: 22px; border-radius: 3px; box-shadow: 0 0 8px rgba(17,131,230,.6); }
    .dot:hover  { background: var(--t2); }
    @media (max-width: 768px) { .side-dots { display: none; } }

    /* ─── GRADIENT BORDER UTILITY ─── */
    .glow-border {
      position: relative;
    }
    .glow-border::after {
      content: '';
      position: absolute; inset: -1px; border-radius: inherit;
      background: linear-gradient(135deg, rgba(17,131,230,.3), rgba(229,240,252,.2), transparent);
      z-index: -1; border-radius: calc(var(--r-xl) + 1px);
      opacity: 0; transition: opacity var(--t);
    }
    .glow-border:hover::after { opacity: 1; }

    /* ─── SECTION DIVIDER ─── */
    .section-glow {
      position: absolute; inset: 0; pointer-events: none;
      background: radial-gradient(ellipse 60% 40% at 50% 100%, rgba(17,131,230,.05) 0%, transparent 100%);
    }

    /* ─── NOVITÀ / RELEASE NOTES ─── */
    .release-grid {
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: 14px; margin-top: 44px;
    }
    @media (max-width: 880px) { .release-grid { grid-template-columns: 1fr 1fr; } }
    @media (max-width: 580px) { .release-grid { grid-template-columns: 1fr; } }

    .release-card {
      background: var(--card); border: 1px solid var(--border);
      border-radius: var(--r-xl); padding: 24px 22px;
      position: relative; overflow: hidden;
      transition: border-color var(--t), transform var(--t), box-shadow var(--t);
    }
    .release-card::before {
      content: '';
      position: absolute; top: 0; left: 0; right: 0; height: 2px;
      background: linear-gradient(90deg, transparent, var(--blue), var(--orange), transparent);
      opacity: 0; transition: opacity var(--t);
    }
    .release-card:hover {
      border-color: rgba(17,131,230,.25); transform: translateY(-4px);
      box-shadow: 0 20px 48px rgba(0,0,0,.4), 0 0 0 1px rgba(17,131,230,.08);
    }
    .release-card:hover::before { opacity: 1; }

    .release-head {
      display: flex; align-items: center; justify-content: space-between;
      gap: 10px; margin-bottom: 16px;
    }
    .release-tag {
      font-size: .7rem; font-weight: 700; letter-spacing: .04em;
      color: var(--blue-xl);
    }
    .release-date {
      font-family: var(--mono); font-size: .62rem;
      letter-spacing: .08em; text-transform: uppercase;
      color: var(--t3); flex-shrink: 0;
    }
    .release-list { list-style: none; display: flex; flex-direction: column; gap: 11px; }
    .release-list li {
      position: relative; padding-left: 20px;
      font-size: .82rem; color: var(--t2); line-height: 1.55;
    }
    .release-list li::before {
      content: '';
      position: absolute; left: 0; top: 8px;
      width: 6px; height: 6px; border-radius: 50%;
      background: var(--blue); box-shadow: 0 0 8px rgba(17,131,230,.5);
    }
    .release-list li b { color: var(--t1); font-weight: 600; }

    /* ─── ROADMAP (cards "in arrivo") ─── */
    .release-card.soon::before {
      background: linear-gradient(90deg, transparent, var(--ice), transparent);
      opacity: .55;
    }
    .release-card.soon:hover::before { opacity: 1; }
    .release-card.soon .release-tag { color: var(--ice); }
    .release-card.soon .release-list li::before { background: var(--ice); box-shadow: 0 0 8px rgba(229,240,252,.45); }
    .release-card.soon .release-date {
      color: var(--ice); border: 1px solid rgba(229,240,252,.22);
      background: rgba(229,240,252,.06); padding: 2px 9px; border-radius: 50px;
    }