:root {
  --bg: #06080d;
  --bg-surface: #0c0e18;
  --bg-card: #10121c;
  --accent: #3b82f6;
  --accent-light: #60a5fa;
  --accent-cyan: #22d3ee;
  --neon: #3b82f6;
  --neon-glow: 0 0 10px #3b82f6, 0 0 40px rgba(59,130,246,0.35);
  --neon-glow-strong: 0 0 15px #3b82f6, 0 0 50px rgba(59,130,246,0.45), 0 0 100px rgba(59,130,246,0.15);
  --text: #f0f0f0;
  --text-dim: #94a3b8;
  --text-muted: #475569;
  --border: rgba(59,130,246,0.08);
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --ease: cubic-bezier(0.22,1,0.36,1);
  --ease-bounce: cubic-bezier(0.34,1.56,0.64,1);
  --max-width: 1200px;
  --radius: 12px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
button,input{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
html{scroll-behavior:smooth}

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

/* Site visible transition */
#floating-nav.nav-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-100%);
}

/* Noise overlay */
body::after {
  content:'';position:fixed;inset:0;pointer-events:none;z-index:9999;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  opacity:0.4;
}

/* Scrollbar */
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--neon);border-radius:3px}

.container{max-width:var(--max-width);margin:0 auto;padding:0 2rem}

/* ===================== INTRO ===================== */
#intro-overlay {
  position:fixed;
  top: 0; left: 0; width: 100vw; height: 100vh; height: 100dvh;
  z-index: 9000;
  background:var(--bg);
  display:flex;align-items:center;justify-content:center;
}
#intro-overlay.hidden{display:none}

#intro-canvas {
  position:absolute;inset:0;
  background-size:cover;background-position:center top;
  opacity:0;transition:opacity 0.08s linear;
}
#intro-canvas.visible{opacity:1}

#intro-canvas.glitch-frame::before,
#intro-canvas.glitch-frame::after {
  content:'';position:absolute;inset:0;
  background:inherit;background-size:inherit;background-position:inherit;
}
#intro-canvas.glitch-frame::before {
  opacity:0.5;mix-blend-mode:screen;filter:hue-rotate(90deg);
  transform:translate(3px,-2px);clip-path:inset(20% 0 30% 0);
}
#intro-canvas.glitch-frame::after {
  opacity:0.5;mix-blend-mode:multiply;filter:hue-rotate(-90deg);
  transform:translate(-3px,2px);clip-path:inset(60% 0 10% 0);
}

#intro-canvas.heavy-glitch{animation:heavy-glitch .15s infinite}
#intro-canvas.heavy-glitch::before{animation:glitch-1 .1s infinite;opacity:.8}
#intro-canvas.heavy-glitch::after{animation:glitch-2 .1s infinite;opacity:.8}

#intro-flash {
  position:absolute;inset:0;opacity:0;
  transition:opacity .03s linear;z-index:2;
  pointer-events:none;mix-blend-mode:screen;
}

#intro-code-rain {
  position:absolute;inset:0;z-index:0;
}

#intro-logo {
  position:relative;z-index:3;
  width:90px;height:90px;
  border-radius:22px;
  opacity:0;
  pointer-events:none;
  filter:drop-shadow(0 0 40px rgba(59,130,246,.5));
}
#intro-logo.visible{opacity:1;transition:opacity .15s linear}
#intro-logo.morph {
  animation:logo-morph .5s var(--ease) forwards;
}
@keyframes logo-morph {
  0%{transform:scale(1);filter:drop-shadow(0 0 40px rgba(59,130,246,.5));opacity:1}
  25%{transform:scale(1.15) skewX(8deg);filter:hue-rotate(90deg) drop-shadow(0 0 60px rgba(59,130,246,.8));opacity:.9}
  50%{transform:scale(0.7) skewX(-12deg);filter:hue-rotate(270deg) brightness(2);opacity:.6}
  75%{transform:scale(0.4) rotate(10deg);filter:blur(4px) brightness(3);opacity:.3}
  100%{transform:scale(0) rotate(20deg);filter:blur(12px);opacity:0}
}

#intro-name {
  position:relative;z-index:3;
  font-family:var(--font-mono);
  font-size:clamp(2rem,8vw,5rem);
  font-weight:700;
  letter-spacing:.12em;
  color:var(--text);
  text-shadow:var(--neon-glow-strong);
  opacity:0;pointer-events:none;text-align:center;
  white-space:nowrap;
}
#intro-name.visible{animation:name-reveal .8s var(--ease) forwards}

#intro-overlay::before {
  content:'';position:absolute;inset:0;z-index:4;pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.12) 2px,rgba(0,0,0,.12) 4px);
}
#intro-overlay.dissolve{animation:fade-out .8s var(--ease) forwards}

/* ===================== ANIMATIONS ===================== */
@keyframes fade-out{to{opacity:0}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes fade-in-up{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}

@keyframes name-reveal {
  0%{opacity:0;letter-spacing:.5em;filter:blur(10px)}
  50%{opacity:1;letter-spacing:.3em;filter:blur(2px)}
  100%{opacity:1;letter-spacing:.15em;filter:blur(0)}
}

@keyframes heavy-glitch {
  0%{transform:translate(0);filter:hue-rotate(0)}
  10%{transform:translate(-5px,3px) skewX(2deg);filter:hue-rotate(90deg)}
  30%{transform:translate(3px,-2px);filter:hue-rotate(270deg)}
  50%{transform:translate(-2px,2px) skewX(-2deg);filter:hue-rotate(90deg)}
  70%{transform:translate(4px,-1px);filter:hue-rotate(180deg)}
  100%{transform:translate(0);filter:hue-rotate(0)}
}
@keyframes glitch-1 {
  0%{clip-path:inset(40% 0 61% 0);transform:translate(-2px,-1px)}
  20%{clip-path:inset(56% 0 31% 0);transform:translate(0,1px)}
  40%{clip-path:inset(92% 0 1% 0);transform:translate(2px,0)}
  60%{clip-path:inset(85% 0 8% 0);transform:translate(-1px,-1px)}
  80%{clip-path:inset(20% 0 65% 0);transform:translate(1px,1px)}
  100%{clip-path:inset(42% 0 43% 0);transform:translate(-2px,-1px)}
}
@keyframes glitch-2 {
  0%{clip-path:inset(65% 0 20% 0);transform:translate(2px,1px)}
  20%{clip-path:inset(78% 0 10% 0);transform:translate(-2px,2px)}
  40%{clip-path:inset(22% 0 63% 0);transform:translate(2px,1px)}
  60%{clip-path:inset(8% 0 82% 0);transform:translate(0,0)}
  80%{clip-path:inset(42% 0 45% 0);transform:translate(-1px,2px)}
  100%{clip-path:inset(70% 0 15% 0);transform:translate(1px,1px)}
}

@keyframes float {
  0%,100%{transform:translateY(0) rotate(0)}
  33%{transform:translateY(-8px) rotate(.5deg)}
  66%{transform:translateY(4px) rotate(-.5deg)}
}

/* ===================== 1. TOP FLOATING BAR (Logo + Focused Dynamic CTA) ===================== */
#top-floating-bar {
  position: fixed;
  top: calc(14px + env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  width: calc(100% - 2rem);
  max-width: 600px;
  z-index: 8500;
  transition: opacity .4s var(--ease), transform .4s var(--ease);
  pointer-events: none;
}
#top-floating-bar.nav-hidden {
  opacity: 0;
  transform: translateX(-50%) translateY(-20px);
  pointer-events: none;
}
#top-floating-bar.nav-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: all;
}

.top-nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: rgba(6, 9, 16, 0.9);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(59, 130, 246, 0.35);
  box-shadow: 
    0 18px 45px rgba(0, 0, 0, 0.85), 
    0 0 35px rgba(59, 130, 246, 0.2),
    inset 0 1px 2px rgba(255, 255, 255, 0.25);
  border-radius: 40px;
  padding: 6px 8px 6px 12px;
  transition: all .35s var(--ease);
}
.top-nav-container:hover {
  border-color: rgba(34, 211, 238, 0.6);
  box-shadow: 
    0 20px 55px rgba(0, 0, 0, 0.9), 
    0 0 45px rgba(34, 211, 238, 0.35);
}

.top-nav-brand {
  display: flex;
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.brand-heartbeat-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.top-nav-logo {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  object-fit: cover;
  position: relative;
  z-index: 2;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 14px rgba(16, 185, 129, 0.4);
  transition: transform .3s var(--ease);
}
.top-nav-brand:hover .top-nav-logo {
  transform: scale(1.08) rotate(-3deg);
}

/* Green Heartbeat Background Pulse Aura */
.heartbeat-pulse {
  position: absolute;
  inset: -6px;
  border-radius: 16px;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.7) 0%, rgba(16, 185, 129, 0) 70%);
  z-index: 1;
  animation: green-heartbeat 3s infinite ease-in-out;
  pointer-events: none;
}
@keyframes green-heartbeat {
  0%   { transform: scale(0.92); opacity: 0.4; filter: drop-shadow(0 0 4px #10b981); }
  15%  { transform: scale(1.4);  opacity: 1;   filter: drop-shadow(0 0 18px #34d399); }
  30%  { transform: scale(1.05); opacity: 0.6; filter: drop-shadow(0 0 8px #10b981); }
  45%  { transform: scale(1.5);  opacity: 1;   filter: drop-shadow(0 0 22px #34d399); }
  100% { transform: scale(0.92); opacity: 0.4; filter: drop-shadow(0 0 4px #10b981); }
}

.top-nav-action {
  flex: 1;
  display: flex;
  justify-content: flex-end;
}
.top-nav-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 45%, #0ea5e9 100%);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 9px 18px;
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 
    0 4px 20px rgba(37, 99, 235, 0.5), 
    0 0 15px rgba(14, 165, 233, 0.35);
  transition: all .3s var(--ease);
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  max-width: 100%;
}
.top-nav-cta-btn .cta-sparkle {
  color: #38bdf8;
  font-size: 0.85rem;
  animation: sparkle-twinkle 2s infinite ease-in-out;
}
@keyframes sparkle-twinkle {
  0%, 100% { opacity: 0.4; transform: scale(0.85) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.2) rotate(15deg); filter: drop-shadow(0 0 6px #38bdf8); }
}
.top-nav-cta-btn .cta-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.top-nav-cta-btn .cta-arrow {
  transition: transform .25s var(--ease);
  color: #bae6fd;
}
.top-nav-cta-btn:hover {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 45%, #22d3ee 100%);
  box-shadow: 0 6px 28px rgba(59, 130, 246, 0.75), 0 0 25px rgba(34, 211, 238, 0.55);
  transform: translateY(-1px) scale(1.02);
}
.top-nav-cta-btn:hover .cta-arrow {
  transform: translateX(4px);
}
/* Shimmer Light Sweep */
.top-nav-cta-btn::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -60%;
  width: 40%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: rotate(25deg);
  animation: cta-shimmer-sweep 4s infinite ease-in-out;
}
@keyframes cta-shimmer-sweep {
  0%, 70% { left: -60%; }
  100% { left: 140%; }
}

/* ===================== 2. BOTTOM FLOATING DOCK (Section Navigation) ===================== */
#bottom-floating-dock {
  position: fixed;
  bottom: calc(26px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  width: calc(100% - 2rem);
  max-width: 960px;
  z-index: 8500;
  transition: opacity .4s var(--ease), transform .4s var(--ease);
  pointer-events: none;
}
#bottom-floating-dock.nav-hidden {
  opacity: 0;
  transform: translateX(-50%) translateY(20px);
  pointer-events: none;
}
#bottom-floating-dock.nav-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: all;
}

.bottom-dock-container {
  background: rgba(6, 9, 16, 0.92);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(59, 130, 246, 0.35);
  box-shadow: 
    0 20px 50px rgba(0, 0, 0, 0.9), 
    0 0 35px rgba(59, 130, 246, 0.25),
    inset 0 1px 2px rgba(255, 255, 255, 0.2);
  border-radius: 40px;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .35s var(--ease);
}
.bottom-dock-container:hover {
  border-color: rgba(34, 211, 238, 0.6);
  box-shadow: 
    0 22px 55px rgba(0, 0, 0, 0.95), 
    0 0 45px rgba(34, 211, 238, 0.35);
}

.bottom-dock-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  overflow-x: auto;
  scrollbar-width: none;
  width: 100%;
  padding: 2px 4px;
}
.bottom-dock-menu::-webkit-scrollbar { display: none; }

.dock-link {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-dim);
  background: transparent;
  border: 1px solid transparent;
  padding: 8px 14px;
  border-radius: 25px;
  white-space: nowrap;
  letter-spacing: 0.02em;
  transition: all .25s var(--ease);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
}
.dock-link:hover {
  color: #fff;
  background: rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.3);
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
}
.dock-link.active {
  color: #04070e;
  font-weight: 700;
  background: linear-gradient(135deg, #38bdf8 0%, #22d3ee 100%);
  border-color: #38bdf8;
  box-shadow: 0 0 20px rgba(34, 211, 238, 0.6), 0 2px 10px rgba(0, 0, 0, 0.5);
  transform: scale(1.04);
}
/* Chic Shimmer Light Sweep */
.nav-cta-btn::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -60%;
  width: 40%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: rotate(25deg);
  animation: cta-shimmer-sweep 4.5s infinite ease-in-out;
}
@keyframes cta-shimmer-sweep {
  0%, 70% { left: -60%; }
  100% { left: 140%; }
}
.nav-cta-btn:hover {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 50%, #22d3ee 100%);
  box-shadow: 0 6px 25px rgba(59, 130, 246, 0.7), 0 0 20px rgba(34, 211, 238, 0.5);
  transform: translateY(-1px) scale(1.02);
}
.nav-cta-btn .cta-arrow {
  transition: transform .25s var(--ease);
}
.nav-cta-btn:hover .cta-arrow {
  transform: translateX(4px);
}

/* ===================== REVEAL ===================== */
.reveal{opacity:0;transform:translateY(35px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-d1{transition-delay:.1s}.reveal-d2{transition-delay:.2s}.reveal-d3{transition-delay:.3s}

/* ===================== HERO ===================== */
#hero {
  min-height:100vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  text-align:center;padding:2rem;position:relative;overflow:hidden;
}

#hero::before, #hero::after {
  content:'';position:absolute;border-radius:50%;pointer-events:none;
  filter:blur(80px);
}
#hero::before {
  width:500px;height:500px;
  background:radial-gradient(circle,rgba(59,130,246,.12) 0%,transparent 70%);
  top:20%;left:15%;animation:float 10s ease-in-out infinite;
}
#hero::after {
  width:400px;height:400px;
  background:radial-gradient(circle,rgba(34,211,238,.08) 0%,transparent 70%);
  bottom:15%;right:10%;animation:float 12s ease-in-out infinite reverse;
}

.prompt {
  color:var(--accent-cyan);
  text-shadow:0 0 10px rgba(34,211,238,.5),0 0 30px rgba(34,211,238,.2);
  -webkit-text-fill-color:var(--accent-cyan);
}

.glitch {
  position:relative;
  font-family:var(--font-mono);
  font-size:clamp(2rem,8vw,5rem);
  font-weight:700;
  color:var(--text);
  letter-spacing:.06em;
  line-height:1;
  text-shadow:var(--neon-glow);
  animation:fade-in-up .6s var(--ease) .4s both;
  margin-bottom:1rem;
  white-space:nowrap;
}
.cursor {
  color:var(--neon);
  animation:blink 1s step-end infinite;
  text-shadow:var(--neon-glow);
}
@keyframes blink {
  0%,100%{opacity:1}
  50%{opacity:0}
}
.glitch::before,.glitch::after {
  content:attr(data-text);position:absolute;top:0;left:0;
  width:100%;height:100%;pointer-events:none;
}
.glitch::before{color:#ff3366;animation:glitch-1 4s infinite linear alternate-reverse;opacity:.4}
.glitch::after{color:var(--accent-cyan);animation:glitch-2 5s infinite linear alternate-reverse;opacity:.4}

.hero-claim {
  font-family:var(--font-mono);
  font-size:clamp(.75rem,1.8vw,.95rem);
  color:var(--neon);
  letter-spacing:.18em;text-transform:uppercase;
  margin-bottom:.5rem;
  animation:fade-in-up .6s var(--ease) .6s both;
  text-shadow:var(--neon-glow);
}
.hero-sub {
  font-size:clamp(.9rem,2.2vw,1.15rem);
  color:var(--text-dim);font-weight:400;letter-spacing:.03em;
  animation:fade-in-up .6s var(--ease) .8s both;
}

/* Scroll indicator (Clickable & Enhanced) */
.scroll-indicator {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px 16px;
  border-radius: 20px;
  animation: fade-in 1s var(--ease) 1.2s both;
  transition: transform .3s var(--ease), background .3s var(--ease);
}
.scroll-indicator:hover {
  transform: translateX(-50%) translateY(4px);
  background: rgba(59, 130, 246, 0.06);
}
.scroll-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  color: var(--text-dim);
  margin-bottom: 8px;
  transition: color .25s var(--ease), text-shadow .25s var(--ease);
}
.scroll-indicator:hover .scroll-label {
  color: var(--accent-cyan);
  text-shadow: 0 0 10px rgba(34, 211, 238, 0.6);
}
.scroll-line {
  width: 2px;
  height: 52px;
  background: rgba(59, 130, 246, 0.15);
  position: relative;
  overflow: hidden;
  border-radius: 2px;
}
.scroll-dot {
  width: 2px;
  height: 18px;
  background: linear-gradient(to bottom, #22d3ee, #3b82f6);
  box-shadow: 0 0 10px rgba(34, 211, 238, 0.8);
  position: absolute;
  top: 0;
  animation: scroll-line-move 2.2s ease-in-out infinite;
}
@keyframes scroll-line-move {
  0% { top: 0; opacity: 1; height: 14px; }
  75% { opacity: 0.8; height: 22px; }
  100% { top: 38px; opacity: 0; height: 8px; }
}

/* ===================== SECTION COMMON ===================== */
section{padding:8rem 0}

.section-label {
  font-family:var(--font-mono);font-size:.8rem;
  color:var(--neon);letter-spacing:.15em;text-transform:uppercase;
  text-shadow:var(--neon-glow);margin-bottom:.5rem;
}

.section-title {
  font-family:var(--font-display);
  font-size:clamp(2rem,5vw,3rem);
  font-weight:700;letter-spacing:-.02em;
  margin-bottom:1rem;
}

.section-claim {
  font-size:1.05rem;color:var(--text-dim);
  max-width:700px;margin-bottom:4rem;line-height:1.7;
}
.section-claim em {
  font-style:normal;color:var(--accent-light);
}

/* ===================== MANIFESTO ===================== */
#manifesto{padding:9rem 0 5rem;text-align:center}

.manifesto-text {
  font-family:var(--font-display);
  font-size:clamp(1.7rem,4.2vw,3rem);
  font-weight:600;line-height:1.35;
  color:var(--text);letter-spacing:-.02em;
  margin-bottom:2.5rem;
}
.manifesto-text em {
  font-style:normal;
  background:linear-gradient(135deg,var(--accent-light),var(--accent-cyan));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.tags{display:flex;justify-content:center;gap:.8rem;flex-wrap:wrap}
.tag {
  font-family:var(--font-mono);font-size:.8rem;
  color:var(--neon);
  border:1px solid rgba(59,130,246,.25);
  padding:.4rem 1.2rem;border-radius:20px;
  letter-spacing:.05em;
  transition:all .3s var(--ease);
}
.tag:hover {
  background:rgba(59,130,246,.1);border-color:var(--neon);
  box-shadow:var(--neon-glow);text-shadow:var(--neon-glow);
}

/* ===================== GLOW DIVIDER ===================== */
.glow-divider {
  width:100%;height:1px;position:relative;
  background:linear-gradient(90deg,transparent,rgba(59,130,246,.25) 30%,rgba(34,211,238,.25) 70%,transparent);
}
.glow-divider::after {
  content:'';position:absolute;top:-4px;left:50%;transform:translateX(-50%);
  width:50%;height:9px;
  background:linear-gradient(90deg,transparent,rgba(59,130,246,.1),rgba(34,211,238,.1),transparent);
  filter:blur(4px);
}

/* ===================== 3D ISOMETRIC DEVICES & HARDWARE VARIETY ===================== */

/* Device Perspective Stage */
.showcase-devices {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1200px;
  transform-style: preserve-3d;
  min-height: 380px;
  padding: 1rem 0;
}

/* 1. 3D LAPTOP / MACBOOK */
.device-laptop-3d {
  position: relative;
  width: 100%;
  max-width: 540px;
  transform: rotateY(-14deg) rotateX(8deg) rotateZ(-1deg);
  transition: transform .6s var(--ease), filter .6s var(--ease);
  z-index: 1;
}
.showcase:hover .device-laptop-3d {
  transform: rotateY(-6deg) rotateX(4deg) translateY(-8px);
}

.device-laptop-3d .screen-frame {
  position: relative;
  background: linear-gradient(135deg, #2a2d36 0%, #16181e 50%, #0d0e12 100%);
  border-radius: 14px 14px 0 0;
  padding: 12px 12px 0;
  border: 1.5px solid #454958;
  border-bottom: none;
  box-shadow: 
    -15px 25px 50px rgba(0,0,0,0.8),
    inset 0 1px 1px rgba(255,255,255,0.2),
    inset -1px 0 2px rgba(255,255,255,0.1);
}

.device-laptop-3d .screen-frame::before {
  content: '';
  display: block;
  width: 5px;
  height: 5px;
  background: #08090c;
  border-radius: 50%;
  margin: 0 auto 8px;
  box-shadow: 0 0 0 1px #2d303b, inset 0 0 2px #3b82f6;
}

.device-laptop-3d .screen-content {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
  border-radius: 3px 3px 0 0;
  background: #090a0f;
}
.device-laptop-3d .screen-content img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.device-laptop-3d .laptop-base {
  width: 110%;
  margin-left: -5%;
  height: 14px;
  background: linear-gradient(to bottom, #3b3f4d 0%, #20232c 40%, #111317 100%);
  border-radius: 0 0 10px 10px;
  position: relative;
  border-top: 1px solid #54596b;
  box-shadow: -10px 20px 40px rgba(0,0,0,0.9);
}
.device-laptop-3d .laptop-base::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 18%;
  height: 4px;
  background: #0d0e12;
  border-radius: 0 0 4px 4px;
}

/* 2. 3D STUDIO DISPLAY (Desktop Monitor) */
.device-monitor-3d {
  position: relative;
  width: 100%;
  max-width: 560px;
  transform: rotateY(-12deg) rotateX(6deg);
  transition: transform .6s var(--ease);
  z-index: 1;
}
.showcase:hover .device-monitor-3d {
  transform: rotateY(-4deg) rotateX(2deg) translateY(-6px);
}
.device-monitor-3d .monitor-frame {
  position: relative;
  background: linear-gradient(145deg, #262933 0%, #12141a 100%);
  border-radius: 16px;
  padding: 14px;
  border: 2px solid #4a4f61;
  box-shadow: 
    -20px 30px 60px rgba(0,0,0,0.85),
    inset 0 1px 2px rgba(255,255,255,0.25);
}
.device-monitor-3d .monitor-screen {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
  border-radius: 4px;
  background: #090a0f;
}
.device-monitor-3d .monitor-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.device-monitor-3d .monitor-stand {
  width: 80px;
  height: 50px;
  margin: 0 auto -20px;
  background: linear-gradient(to bottom, #3b3f4d 0%, #1a1c22 100%);
  clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
  border-top: 1px solid #666c82;
}
.device-monitor-3d .monitor-foot {
  width: 140px;
  height: 10px;
  margin: 0 auto;
  background: linear-gradient(to bottom, #4a4e5e 0%, #1a1c22 100%);
  border-radius: 4px;
  box-shadow: 0 15px 30px rgba(0,0,0,0.9);
}

/* 3. 3D IPAD / TABLET */
.device-tablet-3d {
  position: relative;
  width: 100%;
  max-width: 520px;
  transform: rotateY(-14deg) rotateX(10deg) rotateZ(2deg);
  transition: transform .6s var(--ease);
  z-index: 1;
}
.showcase:hover .device-tablet-3d {
  transform: rotateY(-6deg) rotateX(4deg) translateY(-6px);
}
.device-tablet-3d .tablet-frame {
  position: relative;
  background: linear-gradient(145deg, #2d303b 0%, #14161c 100%);
  border-radius: 20px;
  padding: 14px;
  border: 2px solid #4c5163;
  box-shadow: 
    -20px 30px 60px rgba(0,0,0,0.85),
    inset 0 1px 2px rgba(255,255,255,0.2);
}
.device-tablet-3d .tablet-screen {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: 8px;
  background: #090a0f;
}
.device-tablet-3d .tablet-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

/* 4. 3D TITANIUM IPHONE (Angled & Floating) */
.device-phone-3d {
  position: relative;
  width: 190px;
  flex-shrink: 0;
  margin-left: -40px;
  margin-bottom: -25px;
  z-index: 3;
  transform: rotateY(16deg) rotateX(12deg) rotateZ(-4deg);
  transition: transform .6s var(--ease), filter .6s var(--ease);
}
.showcase:hover .device-phone-3d {
  transform: rotateY(8deg) rotateX(6deg) translateY(-12px) rotateZ(-2deg);
}

.device-phone-3d .phone-chassis {
  position: relative;
  background: linear-gradient(145deg, #383c4a 0%, #1e2028 40%, #0e1014 100%);
  border-radius: 36px;
  padding: 8px 6px 10px;
  border: 2px solid #585e72;
  box-shadow: 
    15px 25px 50px rgba(0,0,0,0.9),
    -10px 15px 30px rgba(0,0,0,0.7),
    inset 0 1px 2px rgba(255,255,255,0.3),
    inset -1px 0 2px rgba(255,255,255,0.15);
}

/* Titanium side buttons & antenna */
.device-phone-3d .phone-chassis::before {
  content: '';
  display: block;
  width: 38px;
  height: 11px;
  margin: 2px auto 6px;
  background: #000;
  border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.1);
}

.device-phone-3d .phone-screen {
  position: relative;
  aspect-ratio: 9/19.5;
  overflow: hidden;
  border-radius: 26px;
  background: #090a0f;
}
.device-phone-3d .phone-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
}

/* Ambient Floor Spotlight Glow */
.device-spotlight {
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 40px;
  border-radius: 50%;
  filter: blur(25px);
  pointer-events: none;
  opacity: 0.6;
  z-index: 0;
}
.spotlight-blue { background: radial-gradient(ellipse, rgba(59,130,246,0.45) 0%, transparent 70%); }
.spotlight-cyan { background: radial-gradient(ellipse, rgba(34,211,238,0.4) 0%, transparent 70%); }
.spotlight-warm { background: radial-gradient(ellipse, rgba(245,158,11,0.35) 0%, transparent 70%); }
.spotlight-purple { background: radial-gradient(ellipse, rgba(168,85,247,0.35) 0%, transparent 70%); }

/* Standalone ZonaBlindata 3D Render Display */
.zonablindata-render-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}
.zonablindata-render-box img {
  max-height: 420px;
  width: auto;
  filter: drop-shadow(0 25px 45px rgba(0,0,0,0.8));
  transition: transform .5s var(--ease);
}
.zonablindata-render-box img:hover {
  transform: translateY(-8px) scale(1.02);
}

.device-laptop {
  position:relative;display:inline-block;width:100%;max-width:680px;
  filter:drop-shadow(0 25px 45px rgba(0,0,0,0.65));
  transition:transform .5s var(--ease);
}
.device-laptop:hover {
  transform:translateY(-4px);
}

.device-laptop-screen {
  position:relative;
  padding:14px 14px 0;
  background:linear-gradient(145deg, #1f222a 0%, #111317 100%);
  border-radius:14px 14px 0 0;
  border: 1px solid #323642;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
}

/* Camera dot */
.device-laptop-screen::before {
  content:'';display:block;width:5px;height:5px;
  background:#090a0d;border-radius:50%;
  margin:0 auto 9px;
  box-shadow:0 0 0 1px #2a2d36, inset 0 0 2px #3b82f6;
}

/* Screen Scroll Window */
.screen-scroll-window {
  position:relative;
  aspect-ratio:16/10;
  overflow:hidden;
  border-radius:3px 3px 0 0;
  background:#0c0e14;
}
.screen-scroll-window img {
  width:100%;
  display:block;
  object-fit:cover;
  object-position:top;
  transition:transform 6s ease-in-out;
}
.showcase:hover .screen-scroll-window img {
  transform:translateY(-30%);
}

.device-laptop-base {
  width:110%;margin-left:-5%;height:14px;
  background:linear-gradient(to bottom, #2d303b 0%, #1c1e26 40%, #13141a 100%);
  border-radius:0 0 9px 9px;
  position:relative;
  border-top:1px solid #3c404e;
  box-shadow:0 6px 20px rgba(0,0,0,0.5);
}
/* Recessed notch */
.device-laptop-base::before {
  content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:16%;height:4px;
  background:#0f1015;
  border-radius:0 0 4px 4px;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.device-laptop-shadow {
  width:94%;height:25px;margin:0 auto;
  background:radial-gradient(ellipse, rgba(0,0,0,0.6) 0%, transparent 70%);
  filter:blur(10px);margin-top:2px;
}

/* ===================== FOTOREALISTIC DEVICE: PHONE ===================== */
.device-phone {
  display:inline-block;max-width:195px;width:100%;
  padding:10px 7px 12px;
  background:linear-gradient(145deg, #1f222a 0%, #0e1014 100%);
  border-radius:34px;
  border:1px solid #323642;
  box-shadow: 0 25px 60px rgba(0,0,0,0.7), 0 0 25px rgba(59,130,246,0.1), inset 0 0 0 1px rgba(255,255,255,0.05);
  filter:drop-shadow(0 20px 30px rgba(0,0,0,0.6));
  transition:transform .5s var(--ease);
}
.device-phone:hover {
  transform:translateY(-5px) rotate(1deg);
}

/* Dynamic Island */
.device-phone::before {
  content:'';display:block;width:38px;height:11px;
  margin:2px auto 7px;background:#000;border-radius:7px;
  box-shadow:0 0 0 1px rgba(255,255,255,0.05);
}

.device-phone-screen {
  position:relative;
  aspect-ratio:9/19.5;
  overflow:hidden;
  border-radius:24px;
  background:#0c0e14;
}
.device-phone-screen img {
  width:100%;height:100%;
  object-fit:cover;object-position:top;
  display:block;
}

/* ===================== SHOWCASE LAYOUT ===================== */
.showcase-stack {
  display:flex;flex-direction:column;gap:5.5rem;
}

.showcase {
  display:grid;
  grid-template-columns:1.35fr 1fr;
  gap:4rem;
  align-items:center;
  padding:1rem 0;
}
.showcase--reverse {
  grid-template-columns:1fr 1.35fr;
}
.showcase--reverse .showcase-devices{order:2}
.showcase--reverse .showcase-text{order:1}

.showcase-devices {
  position:relative;
  display:flex;
  align-items:flex-end;
  gap:1.5rem;
}
.showcase-devices .device-phone {
  flex-shrink:0;
  margin-left:-25px;
  z-index:3;
}
.showcase--reverse .showcase-devices .device-phone {
  margin-left:0;
  margin-right:-25px;
}

/* Text block */
.project-header-with-icon {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 0.8rem;
}
.project-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(59, 130, 246, 0.2);
  padding: 4px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
  flex-shrink: 0;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.showcase:hover .project-icon {
  transform: scale(1.1) rotate(-3deg);
  box-shadow: 0 0 15px rgba(59, 130, 246, 0.4);
}

.showcase-badge {
  font-family:var(--font-mono);
  font-size:0.68rem;
  color:var(--accent-cyan);
  text-transform:uppercase;
  letter-spacing:0.12em;
  margin-bottom:0.2rem;
}
.showcase-text h3 {
  font-family:var(--font-display);
  font-size:1.65rem;font-weight:700;
  letter-spacing:-0.01em;
  margin-bottom:.6rem;
  line-height:1.25;
}
.cycle-title-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.5rem;
}
.cycle-title-name {
  color: #fff;
  transition: opacity 0.15s ease, transform 0.15s ease, color 0.2s ease;
  display: inline-block;
}
.cycle-title-name.glitch-text-swap {
  animation: title-glitch-swap 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes title-glitch-swap {
  0% {
    opacity: 0.3;
    transform: translateX(-4px) skewX(-4deg);
    color: var(--neon);
    text-shadow: 2px 0 var(--accent-cyan), -2px 0 #ec4899;
  }
  50% {
    opacity: 0.8;
    transform: translateX(2px) skewX(2deg);
    text-shadow: -1px 0 var(--accent-cyan);
  }
  100% {
    opacity: 1;
    transform: translateX(0) skewX(0);
    color: #fff;
    text-shadow: none;
  }
}
.cycle-title-sep {
  color: var(--accent-cyan);
  opacity: 0.8;
}
.cycle-title-desc {
  color: var(--text-dim);
  font-weight: 600;
}
.cycle-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 0.35rem;
  margin-bottom: 0.95rem;
}
.cycle-pill {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(59, 130, 246, 0.2);
  color: var(--text-dim);
  cursor: pointer;
  transition: all 0.25s var(--ease);
  user-select: none;
  line-height: 1.3;
}
.cycle-pill:hover {
  color: var(--text);
  background: rgba(59, 130, 246, 0.12);
  border-color: rgba(59, 130, 246, 0.4);
  transform: translateY(-1px);
}
.cycle-pill.active {
  background: rgba(59, 130, 246, 0.22);
  border-color: var(--neon);
  color: #fff;
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.35);
  font-weight: 600;
}
.showcase-text p {
  font-size:.95rem;color:var(--text-dim);
  line-height:1.7;margin-bottom:1.2rem;
}
.tech-tags {
  display:flex;flex-wrap:wrap;gap:6px;margin-bottom:1rem;
}
.tech-tag {
  font-family:var(--font-mono);font-size:.68rem;
  color:var(--accent-light);
  background:rgba(59,130,246,.08);
  border:1px solid rgba(59,130,246,.15);
  padding:3px 10px;border-radius:4px;
}

/* Product CTA Button */
.product-cta-btn {
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:rgba(59,130,246,0.1);
  border:1px solid rgba(59,130,246,0.3);
  color:var(--text);
  font-family:var(--font-mono);
  font-size:0.82rem;
  font-weight:500;
  padding:9px 18px;
  border-radius:30px;
  margin-top:0.6rem;
  transition:all .3s var(--ease);
}
.product-cta-btn:hover {
  background:rgba(59,130,246,0.25);
  border-color:var(--neon);
  box-shadow:var(--neon-glow);
  transform:translateY(-2px);
}
.product-cta-btn span {
  transition:transform .25s var(--ease);
}
.product-cta-btn:hover span {
  transform:translateX(4px);
}

/* Presenza Attiva Callout Box */
.feature-callout {
  position:relative;
  background:linear-gradient(135deg, rgba(16, 22, 36, 0.9), rgba(12, 14, 24, 0.95));
  border:1px solid rgba(59, 130, 246, 0.25);
  border-radius:var(--radius);
  padding:2.5rem;
  margin-top:5rem;
  overflow:hidden;
  box-shadow:0 15px 40px rgba(0,0,0,0.4), inset 0 0 30px rgba(59,130,246,0.05);
}
.callout-glow {
  position:absolute;top:-50%;right:-20%;
  width:400px;height:400px;
  background:radial-gradient(circle, rgba(59,130,246,0.15) 0%, transparent 70%);
  filter:blur(50px);pointer-events:none;
}
.callout-tag {
  font-family:var(--font-mono);
  font-size:0.7rem;
  color:var(--accent-cyan);
  text-transform:uppercase;
  letter-spacing:0.12em;
  display:inline-block;
  margin-bottom:0.5rem;
}
.feature-callout h3 {
  font-family:var(--font-display);
  font-size:1.5rem;font-weight:700;
  margin-bottom:0.6rem;
}
.feature-callout p {
  color:var(--text-dim);
  max-width:700px;
  font-size:0.95rem;
  line-height:1.65;
  margin-bottom:1.5rem;
}
.callout-link {
  font-family:var(--font-mono);
  font-size:0.85rem;
  color:var(--neon);
  font-weight:500;
  text-shadow:0 0 10px rgba(59,130,246,0.4);
  transition:all .25s var(--ease);
}
.callout-link:hover {
  color:var(--accent-cyan);
  text-shadow:0 0 15px rgba(34,211,238,0.7);
  letter-spacing:0.02em;
}

/* ===================== CYCLING CONTAINERS ===================== */
.cycle-container {
  position:relative;
  aspect-ratio:16/10;
  overflow:hidden;
  border-radius:3px 3px 0 0;
  background:#0c0e14;
}
.cycle-container img {
  position:absolute;top:0;left:0;width:100%;height:100%;
  object-fit:cover;object-position:top;
  opacity:0;transition:opacity .2s linear;
}
.cycle-container img.active {
  position:relative;opacity:1;
}

.cycle-phone-container {
  position:relative;
  aspect-ratio:9/19.5;
  overflow:hidden;
  border-radius:24px;
  background:#0c0e14;
}
.cycle-phone-container img {
  position:absolute;top:0;left:0;width:100%;height:100%;
  object-fit:cover;object-position:top;
  opacity:0;transition:opacity .2s linear;
}
.cycle-phone-container img.active {
  position:relative;opacity:1;
}

.glitch-flash {
  position:absolute;inset:0;
  background:var(--neon);opacity:0;
  mix-blend-mode:screen;pointer-events:none;
  z-index:5;
  transition:opacity .04s linear;
}

/* ===================== GLITCH REVEAL ===================== */
.glitch-reveal .device-laptop,
.glitch-reveal .device-phone {
  opacity:0;
}
.glitch-reveal.visible .device-laptop,
.glitch-reveal.visible .device-phone {
  animation:mockup-glitch-in .7s var(--ease) forwards;
}
.glitch-reveal.visible .device-phone {
  animation-delay:.15s;
}

@keyframes mockup-glitch-in {
  0%{opacity:0;transform:translate(0) skewX(0);filter:brightness(1) hue-rotate(0)}
  8%{opacity:1;transform:translate(-6px,3px) skewX(2deg);filter:brightness(1.6) hue-rotate(90deg)}
  16%{transform:translate(5px,-2px) skewX(-2deg);filter:brightness(.7) hue-rotate(200deg)}
  24%{transform:translate(-3px,1px) skewX(1deg);filter:brightness(1.4) hue-rotate(300deg)}
  32%{transform:translate(4px,-1px) skewX(-1deg);filter:brightness(.9) hue-rotate(120deg)}
  44%{transform:translate(-1px,0);filter:brightness(1.1) hue-rotate(40deg)}
  100%{opacity:1;transform:translate(0);filter:brightness(1) hue-rotate(0)}
}

/* ===================== OFFERTA: COME POSSIAMO LAVORARE INSIEME ===================== */
.offer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 3rem;
}
.offer-card {
  position: relative;
  background: linear-gradient(145deg, rgba(16, 20, 32, 0.85) 0%, rgba(10, 12, 20, 0.95) 100%);
  border: 1px solid rgba(59, 130, 246, 0.18);
  border-radius: var(--radius);
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  box-shadow: 0 15px 35px rgba(0,0,0,0.5), inset 0 0 20px rgba(59,130,246,0.03);
  transition: all .35s var(--ease);
}
.offer-card:hover {
  border-color: var(--neon);
  box-shadow: var(--neon-glow), 0 20px 45px rgba(0,0,0,0.7);
  transform: translateY(-6px);
}
.offer-card.offer-card--highlight {
  border-color: rgba(34, 211, 238, 0.4);
  background: linear-gradient(145deg, rgba(20, 26, 44, 0.9) 0%, rgba(10, 14, 26, 0.98) 100%);
  box-shadow: 0 20px 50px rgba(0,0,0,0.6), inset 0 0 25px rgba(34, 211, 238, 0.06);
}
.offer-tag {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--accent-cyan);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 0.8rem;
}
.offer-card h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.8rem;
  line-height: 1.25;
}
.offer-desc {
  font-size: 0.92rem;
  color: var(--text-dim);
  line-height: 1.65;
  margin-bottom: 1.5rem;
  flex-grow: 1;
}
.offer-features {
  list-style: none;
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.offer-features li {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}
.offer-features li::before {
  content: '✓';
  color: var(--accent-cyan);
  font-weight: bold;
}
.offer-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(59, 130, 246, 0.12);
  border: 1px solid rgba(59, 130, 246, 0.3);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 500;
  padding: 10px 18px;
  border-radius: 30px;
  transition: all .25s var(--ease);
  text-align: center;
}
.offer-card:hover .offer-btn,
.offer-card--highlight .offer-btn {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  border-color: rgba(255,255,255,0.2);
  color: #fff;
  box-shadow: 0 4px 15px rgba(37, 99, 235, 0.4);
}

/* ===================== CHI È PALOTA79 (PAOLO TURCI) ===================== */
.about-paolo-box {
  position: relative;
  background: linear-gradient(135deg, rgba(14, 18, 28, 0.85) 0%, rgba(8, 10, 16, 0.95) 100%);
  border: 1px solid rgba(59, 130, 246, 0.15);
  border-radius: var(--radius);
  padding: 3.5rem 3rem;
  max-width: 900px;
  margin: 0 auto;
  box-shadow: 0 20px 50px rgba(0,0,0,0.6);
}
.about-paolo-box h2 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 700;
  margin-bottom: 1.2rem;
}
.about-paolo-box h2 em {
  font-style: normal;
  color: var(--accent-light);
}
.about-paolo-text {
  font-size: 1.05rem;
  color: var(--text-dim);
  line-height: 1.8;
  margin-bottom: 1.5rem;
}
.about-paolo-signature {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--accent-cyan);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ===================== FINAL CTA SECTION ===================== */
.final-cta-box {
  text-align: center;
  padding: 6rem 2rem;
  max-width: 800px;
  margin: 0 auto;
}
.final-cta-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 700;
  margin-bottom: 1rem;
  letter-spacing: -0.02em;
}
.final-cta-sub {
  font-size: 1.15rem;
  color: var(--text-dim);
  line-height: 1.7;
  margin-bottom: 2.5rem;
}
.final-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 50%, #0ea5e9 100%);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 600;
  padding: 16px 36px;
  border-radius: 40px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 8px 30px rgba(37, 99, 235, 0.5), 0 0 20px rgba(14, 165, 233, 0.3);
  transition: all .35s var(--ease);
  text-decoration: none;
  cursor: pointer;
}
.final-cta-btn:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 12px 40px rgba(37, 99, 235, 0.7), 0 0 30px rgba(34, 211, 238, 0.5);
}
.final-cta-btn .cta-arrow {
  transition: transform .25s var(--ease);
}
.final-cta-btn:hover .cta-arrow {
  transform: translateX(5px);
}

/* ===================== LEAD FORM MODAL (CHIC CYBER) ===================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(3, 6, 12, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .35s var(--ease), visibility .35s var(--ease);
}
.modal-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}
.modal-card {
  position: relative;
  background: linear-gradient(145deg, rgba(14, 18, 30, 0.96) 0%, rgba(8, 10, 18, 0.98) 100%);
  border: 1px solid rgba(59, 130, 246, 0.35);
  box-shadow: 
    0 25px 70px rgba(0, 0, 0, 0.9), 
    0 0 45px rgba(59, 130, 246, 0.2), 
    inset 0 1px 2px rgba(255, 255, 255, 0.2);
  border-radius: 24px;
  width: 100%;
  max-width: 580px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 2.2rem;
  transform: scale(0.94) translateY(15px);
  transition: transform .35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.modal-overlay.active .modal-card {
  transform: scale(1) translateY(0);
}
.modal-close-btn {
  position: absolute;
  top: 1.2rem;
  right: 1.4rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-dim);
  font-size: 1.4rem;
  line-height: 1;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .25s var(--ease);
}
.modal-close-btn:hover {
  color: #fff;
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.5);
  transform: rotate(90deg);
}

.modal-badge {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--accent-cyan);
  letter-spacing: 0.12em;
  margin-bottom: 0.6rem;
  display: flex;
  align-items: center;
  gap: 6px;
}
.modal-badge .terminal-prompt {
  color: var(--neon);
  font-weight: bold;
}
.modal-title {
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: #fff;
}
.modal-subtitle {
  font-size: 0.88rem;
  color: var(--text-dim);
  line-height: 1.5;
  margin-bottom: 1.8rem;
}

/* Form Styles */
.form-group {
  margin-bottom: 1.3rem;
}
.form-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--text);
  margin-bottom: 0.5rem;
  letter-spacing: 0.02em;
}
.form-label .req {
  color: var(--accent-cyan);
}
.form-input, .form-textarea {
  width: 100%;
  background: rgba(6, 9, 16, 0.8);
  border: 1px solid rgba(59, 130, 246, 0.25);
  border-radius: 12px;
  padding: 10px 14px;
  color: #fff;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  transition: all .25s var(--ease);
}
.form-input:focus, .form-textarea:focus {
  outline: none;
  border-color: var(--accent-cyan);
  box-shadow: 0 0 15px rgba(34, 211, 238, 0.35);
  background: rgba(8, 12, 22, 0.95);
}
.form-textarea {
  resize: vertical;
  min-height: 85px;
  line-height: 1.6;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.form-hint {
  font-size: 0.76rem;
  color: var(--text-dim);
  margin-top: -0.4rem;
  margin-bottom: 1.1rem;
  display: flex;
  align-items: center;
  gap: 6px;
}
.form-hint.error {
  color: #f87171;
  animation: pulse-red .3s ease-in-out;
}
.contact-field.error {
  border-color: #f87171 !important;
  box-shadow: 0 0 12px rgba(248, 113, 113, 0.4) !important;
}

/* Project Chips */
.project-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chip-btn {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  padding: 7px 13px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(59, 130, 246, 0.2);
  color: var(--text-dim);
  cursor: pointer;
  transition: all .25s var(--ease);
  white-space: nowrap;
}
.chip-btn:hover {
  color: #fff;
  border-color: var(--neon);
  background: rgba(59, 130, 246, 0.1);
}
.chip-btn.active {
  color: #fff;
  background: rgba(34, 211, 238, 0.15);
  border-color: var(--accent-cyan);
  box-shadow: 0 0 12px rgba(34, 211, 238, 0.35);
  font-weight: 600;
}

/* Timeline Chips */
.timeline-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.radio-chip {
  cursor: pointer;
}
.radio-chip input {
  display: none;
}
.radio-chip span {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  padding: 6px 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-muted);
  transition: all .2s var(--ease);
}
.radio-chip input:checked + span {
  background: rgba(59, 130, 246, 0.15);
  border-color: var(--neon);
  color: #fff;
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.3);
}

/* Privacy Checkbox */
.form-privacy-check {
  margin-top: 1rem;
  margin-bottom: 0.8rem;
}
.form-checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 0.82rem;
  color: var(--text-dim);
}
.form-checkbox-label input[type="checkbox"] {
  width: 17px;
  height: 17px;
  accent-color: var(--neon);
  cursor: pointer;
  flex-shrink: 0;
}
.form-checkbox-label a {
  color: var(--accent-cyan);
  text-decoration: underline;
}
.form-checkbox-label a:hover {
  color: #fff;
}

/* Laser Progress Scanner Bar on Modal */
.modal-laser-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #3b82f6, #00f0ff, #38bdf8, #3b82f6);
  background-size: 200% 100%;
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
  pointer-events: none;
}
.modal-card.sending .modal-laser-bar {
  opacity: 1;
  transform: scaleX(1);
  animation: laser-sweep 1.2s linear infinite;
}
@keyframes laser-sweep {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.modal-card.sending {
  border-color: rgba(0, 240, 255, 0.6) !important;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.95), 0 0 50px rgba(0, 240, 255, 0.25) !important;
}

/* Modal Submit Button & Spinner */
.modal-submit-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 50%, #0ea5e9 100%);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 600;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 25px rgba(37, 99, 235, 0.45);
  cursor: pointer;
  transition: all .3s var(--ease);
  margin-top: 1.5rem;
  position: relative;
  overflow: hidden;
}
.modal-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(37, 99, 235, 0.65), 0 0 20px rgba(34, 211, 238, 0.4);
}
.modal-submit-btn.loading {
  background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 50%, #0369a1 100%) !important;
  cursor: wait;
  box-shadow: 0 0 35px rgba(0, 240, 255, 0.45) !important;
  transform: scale(0.99);
}

.btn-spinner {
  width: 18px;
  height: 18px;
  border: 2.5px solid rgba(255, 255, 255, 0.2);
  border-top-color: #00f0ff;
  border-right-color: #38bdf8;
  border-radius: 50%;
  animation: spin-fast .7s linear infinite;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.6);
}
@keyframes spin-fast {
  to { transform: rotate(360deg); }
}

.btn-status-msg {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.88rem;
  letter-spacing: 0.04em;
  color: #fff;
  text-shadow: 0 0 8px rgba(0, 240, 255, 0.6);
  animation: pulse-glow 1s ease-in-out infinite alternate;
}
@keyframes pulse-glow {
  from { opacity: 0.85; transform: scale(0.99); }
  to { opacity: 1; transform: scale(1); }
}
.modal-privacy-note {
  font-size: 0.74rem;
  color: var(--text-muted);
  text-align: center;
  margin-top: 1rem;
  line-height: 1.5;
}

/* Success Screen */
.modal-success-hidden {
  display: none;
}
.modal-success-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2.5rem 1rem;
}
.success-icon-wrap {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.15);
  border: 2px solid #10b981;
  box-shadow: 0 0 25px rgba(16, 185, 129, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  animation: success-pop .5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes success-pop {
  0% { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.success-check {
  color: #10b981;
  font-size: 2rem;
  font-weight: bold;
}
.success-title {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 0.8rem;
  color: #fff;
}
.success-desc {
  font-size: 0.95rem;
  color: var(--text-dim);
  line-height: 1.7;
  margin-bottom: 2rem;
}
.success-close-btn {
  background: rgba(59, 130, 246, 0.15);
  border: 1px solid rgba(59, 130, 246, 0.4);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  padding: 10px 24px;
  border-radius: 25px;
  cursor: pointer;
  transition: all .25s var(--ease);
}
.success-close-btn:hover {
  background: var(--neon);
  border-color: var(--neon);
  box-shadow: var(--neon-glow);
}

@media(max-width:600px){
  .modal-card { padding: 1.5rem 1.2rem; }
  .form-row { grid-template-columns: 1fr; gap: 0.8rem; }
  .project-chips { gap: 6px; }
  .chip-btn { font-size: 0.7rem; padding: 6px 10px; }
}

/* ===================== BACK TO TOP BUTTON ===================== */
.back-to-top-btn {
  position: fixed;
  bottom: calc(90px + env(safe-area-inset-bottom, 0px));
  right: 2rem;
  z-index: 8400;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(6, 9, 16, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(59, 130, 246, 0.35);
  color: var(--text-dim);
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), 0 0 15px rgba(59, 130, 246, 0.15);
  opacity: 0;
  visibility: hidden;
  transform: translateY(15px);
  transition: all .35s var(--ease);
}
.back-to-top-btn.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.back-to-top-btn:hover {
  color: var(--accent-cyan);
  border-color: var(--accent-cyan);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.85), 0 0 25px rgba(34, 211, 238, 0.45);
  transform: translateY(-4px);
}
.back-to-top-btn .top-arrow {
  font-size: 1.05rem;
  line-height: 1;
  font-weight: bold;
  transition: transform .2s var(--ease);
}
.back-to-top-btn:hover .top-arrow {
  transform: translateY(-2px);
}
.back-to-top-btn .top-text {
  font-family: var(--font-mono);
  font-size: 0.52rem;
  letter-spacing: 0.12em;
  margin-top: 1px;
}

/* ===================== FOOTER ===================== */
.site-footer {
  padding: 5rem 2rem 3rem;
  border-top: 1px solid rgba(59, 130, 246, 0.15);
  background: rgba(4, 7, 14, 0.6);
}
.footer-brand-wrap {
  text-align: center;
  margin-bottom: 2.5rem;
}
.footer-logo {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  margin: 0 auto 0.8rem;
  transition: all .3s var(--ease);
}
.footer-logo:hover {
  transform: scale(1.1) rotate(-3deg);
  filter: drop-shadow(0 0 16px rgba(59, 130, 246, 0.7));
}
.footer-brand-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
}
.footer-claim {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-dim);
  letter-spacing: 0.05em;
  margin-top: 0.3rem;
}

.footer-divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.2), transparent);
  margin-bottom: 2.5rem;
}

.footer-details-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  max-width: 900px;
  margin: 0 auto 3rem;
  text-align: left;
}
.footer-col-title {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--accent-cyan);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.8rem;
}
.footer-text {
  font-size: 0.84rem;
  color: var(--text-dim);
  line-height: 1.7;
}
.footer-text strong {
  color: #fff;
}
.footer-text a {
  color: var(--neon);
  transition: color .2s var(--ease), text-shadow .2s var(--ease);
}
.footer-text a:hover {
  color: #fff;
  text-shadow: var(--neon-glow);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 1.8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 900px;
  margin: 0 auto;
}
.footer-links {
  font-size: 0.8rem;
  color: var(--text-muted);
}
.footer-links a {
  color: var(--text-dim);
  transition: color .2s var(--ease);
}
.footer-links a:hover {
  color: var(--accent-cyan);
}
.footer-links .sep {
  margin: 0 8px;
  color: var(--border);
}
.footer-copy {
  font-size: 0.76rem;
  color: var(--text-muted);
}

@media(max-width: 768px) {
  .footer-details-grid {
    grid-template-columns: 1fr;
    gap: 1.8rem;
    text-align: center;
  }
  .footer-bottom {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }
}

/* ===================== RESPONSIVE ===================== */
@media(max-width:1024px){
  .showcase,.showcase--reverse{grid-template-columns:1fr;gap:2rem}
  .showcase--reverse .showcase-devices{order:1}
  .showcase--reverse .showcase-text{order:2}
  .device-laptop{max-width:100%}
  .offer-grid { grid-template-columns: 1fr; gap: 1.5rem; }

  #top-floating-bar {
    width: calc(100% - 1.2rem);
    max-width: 100%;
    top: calc(12px + env(safe-area-inset-top, 0px));
  }
  .top-nav-container {
    padding: 6px 10px 6px 12px;
    gap: 0.6rem;
  }
  .top-nav-logo {
    width: 34px;
    height: 34px;
  }
  .top-nav-cta-btn {
    padding: 9px 16px;
    font-size: 0.85rem;
    font-weight: 700;
  }

  #bottom-floating-dock {
    bottom: calc(26px + env(safe-area-inset-bottom, 0px));
    width: calc(100% - 1.2rem);
    max-width: 100%;
  }
  .bottom-dock-container {
    padding: 6px 8px;
    border-radius: 35px;
  }
  .bottom-dock-menu {
    justify-content: flex-start;
    gap: 0.35rem;
    -webkit-overflow-scrolling: touch;
  }
  .dock-link {
    padding: 8px 14px;
    font-size: 0.84rem;
    font-weight: 600;
  }

  .showcase-devices {
    min-height: auto;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    justify-content: center;
  }
  .showcase-text {
    position: relative;
    z-index: 5;
  }
}
@media(max-width:768px){
  section{padding:5rem 0}
  #manifesto{padding:6rem 0 4rem}
  .container{padding:0 1.2rem}
  .showcase-devices{
    flex-direction: column;
    align-items: center;
    gap: 0;
    min-height: auto;
    padding: 0.5rem 0 2rem;
    margin-bottom: 1.8rem;
    perspective: none;
  }
  .device-laptop-3d, .device-monitor-3d, .device-tablet-3d {
    transform: none !important;
    max-width: 100%;
    width: 100%;
  }
  .device-phone-3d {
    width: 145px;
    margin-left: 0;
    margin-top: -25px;
    margin-bottom: 0;
    transform: none !important;
    z-index: 3;
  }
  .device-phone-3d .phone-chassis {
    box-shadow: 0 12px 28px rgba(0,0,0,0.8), 0 0 15px rgba(59,130,246,0.15);
    border-radius: 28px;
    padding: 6px 5px 8px;
  }
  .device-phone-3d .phone-screen {
    border-radius: 22px;
  }
  .device-spotlight {
    bottom: 0;
    height: 25px;
    filter: blur(15px);
    opacity: 0.4;
  }
  .showcase-text {
    position: relative;
    z-index: 5;
    margin-top: 0;
  }
  .showcase-stack{gap:3.5rem}
  .feature-callout{padding:1.8rem}
  .back-to-top-btn {
    bottom: calc(92px + env(safe-area-inset-bottom, 0px));
    right: 14px;
  }
}
@media(max-width:480px){
  .glitch{font-size:1.8rem}
  .device-phone{max-width:140px}
  .device-phone-3d{width:130px; margin-top:-20px; margin-bottom:0;}
  .device-phone-3d .phone-chassis{box-shadow:0 8px 20px rgba(0,0,0,0.75); border-radius:24px; padding:5px 4px 7px;}
  .device-phone-3d .phone-screen{border-radius:18px;}
  .showcase-text h3{font-size:1.35rem}
  
  #top-floating-bar {
    top: calc(10px + env(safe-area-inset-top, 0px));
    width: calc(100% - 1rem);
  }
  .top-nav-container { 
    padding: 6px 8px 6px 10px; 
    gap: 0.5rem; 
  }
  .top-nav-logo { width: 32px; height: 32px; }
  .top-nav-cta-btn { 
    padding: 9px 15px; 
    font-size: 0.88rem; 
    font-weight: 700;
    letter-spacing: 0.01em;
  }
  .top-nav-cta-btn .cta-sparkle { 
    display: inline-block; 
    font-size: 0.8rem; 
  }

  #bottom-floating-dock { 
    bottom: calc(26px + env(safe-area-inset-bottom, 0px)); 
    width: calc(100% - 1rem); 
  }
  .bottom-dock-container {
    padding: 6px 6px;
  }
  .dock-link { 
    padding: 8px 13px; 
    font-size: 0.84rem; 
    font-weight: 600;
  }
  .back-to-top-btn { 
    bottom: calc(88px + env(safe-area-inset-bottom, 0px)); 
    right: 12px; 
    width: 40px; 
    height: 40px; 
  }
  .showcase-devices{padding: 0 0 1.5rem; margin-bottom: 1.2rem;}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
}