/* ============================================================
   DESIGN SYSTEM — CSS CUSTOM PROPERTIES
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300;0,400;0,500;0,600;1,400&family=Space+Mono:wght@400;700&family=Syne:wght@600;700;800;900&display=swap');

:root {
  /* Colors */
  --color-bg:            #060508;
  --color-bg-2:          #0C0A0F;
  --color-surface:       #121018;
  --color-surface-2:     #1A1722;
  --color-border:        rgba(255, 255, 255, 0.065);
  --color-border-hover:  rgba(255, 53, 0, 0.45);

  --color-accent:        #FF3500;
  --color-accent-dark:   #CC2900;
  --color-accent-light:  #FF6040;
  --color-accent-glow:   rgba(255, 53, 0, 0.28);
  --color-accent-glow-s: rgba(255, 53, 0, 0.12);

  /* Secondary accent — acid lime, used sparingly on labels/markers only */
  --color-secondary:     #C6FF00;
  --color-secondary-dim: rgba(198, 255, 0, 0.15);

  --color-blue:          #1C4ED8;
  --color-blue-light:    #3B82F6;
  --color-blue-glow:     rgba(59, 130, 246, 0.2);

  --color-text:          #F2EDF8;
  --color-text-muted:    #8C7FA3;
  --color-text-dim:      #857A99;   /* WCAG AA: 5.1:1 on #060508 (was #524862 = 2.4:1, failed) */

  /* Typography */
  --font-body:    'Figtree', system-ui, sans-serif;
  --font-display: 'Syne', system-ui, sans-serif;
  --font-mono:    'Space Mono', monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --text-6xl:  3.75rem;
  --text-7xl:  4.5rem;

  /* Spacing */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Radius */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   32px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm:     0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:     0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg:     0 12px 40px rgba(0,0,0,0.6);
  --shadow-accent: 0 0 40px var(--color-accent-glow);
  --shadow-blue:   0 0 40px var(--color-blue-glow);

  /* Transitions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --dur-fast: 150ms;
  --dur-base: 300ms;
  --dur-slow: 600ms;

  /* Layout */
  --container-max: 1200px;
  --nav-height: 72px;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
  -webkit-tap-highlight-color: transparent;   /* no grey tap box on iOS; custom :active states instead */
}

/* Kill the 300ms double-tap-zoom delay on interactive controls (pinch-zoom unaffected). */
a, button, [role="button"], .filter-btn, .btn, input, select, textarea, label {
  touch-action: manipulation;
}

body {
  font-family: var(--font-body);
  background-color: var(--color-bg);
  background-image:
    radial-gradient(ellipse 900px 700px at 85% -5%,  rgba(255, 53, 0, 0.06) 0%, transparent 60%),
    radial-gradient(ellipse 700px 500px at -5% 95%,  rgba(198, 255, 0, 0.025) 0%, transparent 55%),
    radial-gradient(ellipse 500px 400px at 50% 110%, rgba(255, 53, 0, 0.04) 0%, transparent 60%);
  color: var(--color-text);
  line-height: 1.6;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.text-gradient {
  background: linear-gradient(135deg, #FF3500 0%, #FF7200 55%, #FFD000 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-gradient-blue {
  background: linear-gradient(135deg, var(--color-blue-light) 0%, #60A5FA 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ============================================================
   LAYOUT
   ============================================================ */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.section {
  padding: var(--space-24) 0;
}

.section--lg {
  padding: var(--space-32) 0;
}

.section-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-secondary);
  margin-bottom: var(--space-4);
}

.section-label::before {
  content: '//';
  display: inline;
  width: auto;
  height: auto;
  background: none;
  border-radius: 0;
  color: rgba(198, 255, 0, 0.45);
  font-family: var(--font-mono);
  font-size: inherit;
  margin-right: var(--space-2);
  vertical-align: middle;
}

.section-title {
  font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl));
  font-weight: 800;
  margin-bottom: var(--space-4);
}

.section-subtitle {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  max-width: 580px;
  line-height: 1.7;
}

.section-header {
  margin-bottom: var(--space-16);
}

.section-header--center {
  text-align: center;
}

.section-header--center .section-label {
  justify-content: center;
}

.section-header--center .section-subtitle {
  margin: 0 auto;
}

/* ============================================================
   NAVBAR — Floating Pill (21st.dev style)
   ============================================================ */

/* Outer shell: transparent, just for positioning */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--nav-height);
  display: flex;
  align-items: flex-start;
  padding-top: 14px;
  pointer-events: none;
}

/* The actual pill */
.navbar__inner {
  pointer-events: all;
  max-width: 860px;
  margin: 0 auto;
  padding: 0 var(--space-8);
  width: calc(100% - var(--space-12));
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 50px;

  background: rgba(6, 5, 8, 0.55);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-full);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 8px 32px rgba(0, 0, 0, 0.55),
    0 0 0 0 rgba(255, 53, 0, 0);

  transition: background var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}

.navbar.scrolled .navbar__inner {
  background: rgba(6, 5, 8, 0.92);
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.07) inset,
    0 12px 48px rgba(0, 0, 0, 0.7),
    0 0 80px rgba(255, 53, 0, 0.05);
}

/* Logo */
.navbar__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.navbar__logo-img {
  height: 44px;
  width: auto;
  display: block;
  transition: opacity var(--dur-base) var(--ease-out);
}

.navbar__logo:hover .navbar__logo-img {
  opacity: 0.85;
}

/* Nav links — pill-within-pill active indicator */
.navbar__nav {
  display: flex;
  align-items: center;
  gap: 2px;
  position: relative;
}

.navbar__pill {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: calc(100% - 6px);
  background: rgba(255, 255, 255, 0.10);
  border-radius: var(--radius-full);
  pointer-events: none;
  z-index: 0;
  transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1),
              width 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.navbar__link {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  padding: 0.38em 0.9em;
  border-radius: var(--radius-full);
  transition: color var(--dur-fast);
  position: relative;
  z-index: 1;
}

/* No underline — we use background pill instead */
.navbar__link::after { display: none; }

.navbar__link:hover {
  color: var(--color-text);
}

.navbar__link.active {
  color: var(--color-text);
}

/* Right side CTA + burger */
.navbar__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

/* Animated hamburger */
.navbar__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;             /* 44px min touch target (bars stay ~24px via padding) */
  height: 44px;
  cursor: pointer;
  padding: 10px;
  border-radius: var(--radius-sm);
  transition: background var(--dur-fast);
}
.navbar__burger span { width: 24px; }

.navbar__burger:hover {
  background: rgba(255,255,255,0.07);
}

.navbar__burger span {
  display: block;
  height: 1.5px;
  background: var(--color-text-muted);
  border-radius: 2px;
  transition: all 0.35s var(--ease-out);
  transform-origin: center;
}

.navbar__burger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); background: var(--color-text); }
.navbar__burger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.navbar__burger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); background: var(--color-text); }

/* Mobile dropdown pill */
.navbar__mobile {
  display: none;
  position: fixed;
  top: calc(14px + 50px + 8px);   /* padding-top + pill height + gap */
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - var(--space-12));
  max-width: 820px;
  background: rgba(6, 5, 8, 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: var(--radius-xl);
  padding: var(--space-4) var(--space-5);
  flex-direction: column;
  gap: var(--space-1);
  z-index: 999;
  box-shadow: 0 16px 48px rgba(0,0,0,0.6);
  pointer-events: all;

  /* Animate in */
  opacity: 0;
  transform: translateX(-50%) translateY(-8px);
  transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}

.navbar__mobile.open {
  display: flex;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.navbar__mobile .navbar__link {
  font-size: var(--text-sm);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  width: 100%;
  min-height: 44px;          /* 44px min touch target */
  display: flex;
  align-items: center;
}

.navbar__mobile .navbar__link:hover {
  background: rgba(255,255,255,0.06);
}

.navbar__mobile .btn {
  margin-top: var(--space-2);
  width: 100%;
  justify-content: center;
}

/* ============================================================
   BUTTONS (21st.dev style)
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.72em 1.6em;
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
  font-family: var(--font-body);
  letter-spacing: 0.01em;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
}

/* ── Primary: orange with shimmer sweep on hover ── */
.btn--primary {
  background: linear-gradient(135deg, var(--color-accent) 0%, #FF6040 100%);
  color: #fff;
  border: none;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.15) inset,
    0 4px 16px rgba(255, 53, 0, 0.35);
}

/* Shimmer layer */
.btn--primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    105deg,
    transparent 20%,
    rgba(255, 255, 255, 0.28) 50%,
    transparent 80%
  );
  transform: skewX(-18deg);
  transition: none;
}

.btn--primary:hover {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.18) inset,
    0 0 0 3px rgba(255, 53, 0, 0.22),
    0 8px 28px rgba(255, 53, 0, 0.5);
  transform: translateY(-2px);
}

.btn--primary:hover::before {
  animation: btn-shimmer 0.55s ease forwards;
}

.btn--primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(255,53,0,0.35);
}

@keyframes btn-shimmer {
  0%   { left: -75%; }
  100% { left: 130%; }
}

/* ── Outline: animated gradient border ── */
.btn--outline {
  color: var(--color-text);
  background: transparent;
  border: none;
  /* The border is a pseudo-element gradient */
}

/* Gradient border via ::before inset */
.btn--outline::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-full);
  padding: 1px; /* border thickness */
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.12),
    rgba(255, 255, 255, 0.06),
    rgba(255, 255, 255, 0.12)
  );
  background-size: 200% 200%;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  pointer-events: none;
  transition: background var(--dur-slow) var(--ease-out);
}

.btn--outline:hover {
  color: var(--color-accent);
  transform: translateY(-2px);
}

.btn--outline:hover::before {
  background: linear-gradient(
    135deg,
    rgba(255, 107, 53, 0.7),
    rgba(59, 130, 246, 0.5),
    rgba(255, 107, 53, 0.7)
  );
  background-size: 200% 200%;
  animation: border-flow 2s linear infinite;
}

/* Subtle inner fill on hover */
.btn--outline::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-full);
  background: var(--color-accent-glow-s);
  opacity: 0;
  transition: opacity var(--dur-base);
  pointer-events: none;
}

.btn--outline:hover::after {
  opacity: 1;
}

.btn--outline:active {
  transform: translateY(0);
}

.btn--outline-mono {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-secondary);
  border-radius: var(--radius-sm);
  letter-spacing: 0.04em;
}
.btn--outline-mono:hover {
  color: var(--color-secondary);
  background: rgba(198, 255, 0, 0.05);
}

.btn--outline-mono::before,
.btn--outline-mono::after {
  border-radius: var(--radius-sm);
}

@keyframes border-flow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ── Ghost ── */
.btn--ghost {
  background: transparent;
  color: var(--color-text-muted);
  border: none;
}

.btn--ghost:hover {
  color: var(--color-text);
  background: rgba(255,255,255,0.05);
}

/* ── Sizes ── */
.btn--lg {
  padding: 0.85em 2.1em;
  font-size: var(--text-base);
}

.btn--icon {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: var(--radius-md);
}

/* ── Navbar pill CTA variant (compact) ── */
.navbar__actions .btn--primary {
  padding: 0.45em 1.1em;
  font-size: 0.8rem;
  box-shadow: 0 0 0 1px rgba(255,53,0,0.45), 0 4px 14px rgba(255,53,0,0.25);
}

/* ============================================================
   HERO SECTION
   ============================================================ */
.hero {
  height: 100svh;
  min-height: 600px;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding-top: var(--nav-height);
  background-image:
    linear-gradient(rgba(255, 53, 0, 0.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 53, 0, 0.032) 1px, transparent 1px);
  background-size: 28px 28px;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}


.hero__glow-1 {
  position: absolute;
  width: 700px;
  height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,53,0,0.18) 0%, transparent 70%);
  top: 5%;
  right: -15%;
  filter: blur(50px);
  animation: float-glow 8s ease-in-out infinite;
}

.hero__glow-2 {
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(198,255,0,0.07) 0%, transparent 70%);
  bottom: -5%;
  left: -8%;
  filter: blur(70px);
  animation: float-glow 11s ease-in-out infinite reverse;
}

.hero__spotlight {
  position: absolute;
  width: 700px;
  height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(255,53,0,0.14) 0%,
    rgba(198,255,0,0.04) 40%,
    transparent 65%
  );
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  filter: blur(40px);
  transition: opacity 0.6s ease;
  will-change: left, top;
  left: 50%;
  top: 50%;
}

.hero--mouse-active .hero__spotlight {
  opacity: 1;
}

@keyframes float-glow {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, -20px) scale(1.05); }
  66% { transform: translate(-20px, 20px) scale(0.95); }
}

.hero__content {
  position: relative;
  z-index: 1;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-8) var(--space-6);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-10);
  align-items: center;
  width: 100%;
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: rgba(198, 255, 0, 0.07);
  border: 1px solid rgba(198, 255, 0, 0.2);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-secondary);
  letter-spacing: 0.07em;
  text-transform: none;
  margin-bottom: var(--space-3);
}

.hero__badge-dot {
  width: 6px;
  height: 6px;
  background: var(--color-secondary);
  border-radius: 50%;
  animation: pulse-dot 2s ease-in-out infinite;
}

.hero__title {
  font-size: clamp(2.2rem, 4.8vw, var(--text-6xl));
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-4);
}

.hero__title .line {
  display: block;
  overflow: hidden;
}

.hero__title .line span {
  display: block;
  transform: translateY(100%);
  animation: slide-up 0.8s var(--ease-out) forwards;
}

.hero__title .line:nth-child(2) span { animation-delay: 0.1s; }
.hero__title .line:nth-child(3) span { animation-delay: 0.2s; }

@keyframes slide-up {
  to { transform: translateY(0); }
}

.hero__description {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-bottom: var(--space-5);
  max-width: 480px;
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.hero__stats {
  display: flex;
  gap: var(--space-8);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}

.hero__stat-value {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 800;
  color: var(--color-accent);
  display: block;
  line-height: 1;
  margin-bottom: var(--space-1);
}

.hero__stat-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 400;
}

.typewriter-rotate--mono {
  font-family: var(--font-mono);
  font-size: 0.82em;
  color: var(--color-secondary);
  font-weight: 700;
}

/* Hero — comment monospace sopra badge */
.hero__comment {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: rgba(255, 53, 0, 0.4);
  letter-spacing: 0.02em;
  margin-bottom: var(--space-3);
}

/* Hero visual side */
.hero__visual {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.hero__code-window {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  width: 100%;
  max-width: 480px;
  box-shadow: var(--shadow-lg), 0 0 60px rgba(28,78,216,0.1);
  transform: perspective(1000px) rotateY(-5deg) rotateX(2deg);
  transition: transform var(--dur-slow) var(--ease-out);
  animation: float-card 6s ease-in-out infinite;
}

.hero__code-window:hover {
  transform: perspective(1000px) rotateY(0deg) rotateX(0deg);
}

@keyframes float-card {
  0%, 100% { transform: perspective(1000px) rotateY(-5deg) rotateX(2deg) translateY(0); }
  50% { transform: perspective(1000px) rotateY(-5deg) rotateX(2deg) translateY(-12px); }
}

.code-window__bar {
  background: var(--color-surface-2);
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

.code-window__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.code-window__dot--red    { background: ; }
.code-window__dot--yellow { background: #FFBD2E; }
.code-window__dot--green  { background: #28CA41; }

.code-window__title {
  font-size: var(--text-xs);
  color: var(--color-text-dim);
  margin-left: var(--space-2);
  font-family: 'SF Mono', 'Fira Code', monospace;
}

.code-window__body {
  padding: var(--space-6);
  font-family: 'SF Mono', 'Fira Code', 'Courier New', monospace;
  font-size: var(--text-sm);
  line-height: 1.7;
}

.code-line {
  display: flex;
  gap: var(--space-4);
}

.code-line__num {
  color: var(--color-text-dim);
  user-select: none;
  min-width: 20px;
  text-align: right;
}

.code-line__content { flex: 1; }

.c-keyword  { color: #C678DD; }
.c-func     { color: #61AFEF; }
.c-string   { color: #98C379; }
.c-comment  { color: var(--color-text-dim); font-style: italic; }
.c-var      { color: #E06C75; }
.c-prop     { color: #E5C07B; }
.c-accent   { color: var(--color-accent); }

.hero__floating-badge {
  position: absolute;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  box-shadow: var(--shadow-lg);
  animation: float-badge 4s ease-in-out infinite;
}

.hero__floating-badge--1 {
  top: -25px;
  left: -20px;
  animation-delay: 0s;
  z-index: 10;
}

.hero__floating-badge--2 {
  bottom: 10%;
  right: -20px;
  animation-delay: 2s;
  color: var(--color-accent);
  border-color: rgba(255,107,53,0.3);
}

@keyframes float-badge {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* ============================================================
   HERO ORBITAL ANIMATION
   ============================================================ */

.hero__orbital {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  max-width: 440px;
  justify-self: center;
}

.site-particles {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}

/* Sfera centrale */
.orbital__sphere {
  position: absolute;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 35% 35%,
    rgba(255, 100, 60, 0.9) 0%,
    rgba(255, 53, 0, 0.7) 40%,
    rgba(180, 30, 0, 0.5) 70%,
    rgba(60, 10, 0, 0.3) 100%
  );
  box-shadow:
    0 0 60px rgba(255, 53, 0, 0.5),
    0 0 120px rgba(255, 53, 0, 0.2),
    inset 0 0 30px rgba(255, 150, 80, 0.3);
  animation: orbital-pulse 3s ease-in-out infinite;
  z-index: 10;
  flex-shrink: 0;
}

.orbital__sphere::before {
  content: '';
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 30% 30%,
    rgba(255, 180, 120, 0.6) 0%,
    transparent 60%
  );
}

.orbital__sphere::after {
  content: '</>';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 700;
  color: rgba(255, 240, 220, 0.9);
  text-shadow: 0 0 10px rgba(255, 100, 60, 0.8);
}

@keyframes orbital-pulse {
  0%, 100% {
    box-shadow:
      0 0 60px rgba(255, 53, 0, 0.5),
      0 0 120px rgba(255, 53, 0, 0.2),
      inset 0 0 30px rgba(255, 150, 80, 0.3);
  }
  50% {
    box-shadow:
      0 0 80px rgba(255, 53, 0, 0.7),
      0 0 160px rgba(255, 53, 0, 0.3),
      inset 0 0 40px rgba(255, 150, 80, 0.4);
  }
}

/* Anelli orbitali */
.orbital__ring {
  position: absolute;
  border-radius: 50%;
  top: 50%;
  left: 50%;
}

.orbital__ring--1 {
  width: 200px;
  height: 200px;
  margin-top: -100px;
  margin-left: -100px;
  border: 1px solid rgba(255, 53, 0, 0.45);
  box-shadow:
    0 0 14px rgba(255, 53, 0, 0.2),
    inset 0 0 14px rgba(255, 53, 0, 0.08);
  animation: orbital-flat 8s linear infinite;
}

.orbital__ring--2 {
  width: 290px;
  height: 290px;
  margin-top: -145px;
  margin-left: -145px;
  border: 1px solid rgba(198, 255, 0, 0.32);
  box-shadow:
    0 0 12px rgba(198, 255, 0, 0.14),
    inset 0 0 12px rgba(198, 255, 0, 0.06);
  animation: orbital-tilt-ccw 12s linear infinite;
}

.orbital__ring--3 {
  width: 380px;
  height: 380px;
  margin-top: -190px;
  margin-left: -190px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow:
    0 0 10px rgba(255, 255, 255, 0.04),
    inset 0 0 10px rgba(255, 255, 255, 0.02);
  animation: orbital-tilt-cw 18s linear infinite;
}

@keyframes orbital-flat {
  from { transform: rotateX(0deg)   rotateZ(0deg);    }
  to   { transform: rotateX(0deg)   rotateZ(360deg);  }
}
@keyframes orbital-tilt-ccw {
  from { transform: rotateX(62deg)  rotateZ(0deg);    }
  to   { transform: rotateX(62deg)  rotateZ(-360deg); }
}
@keyframes orbital-tilt-cw {
  from { transform: rotateX(72deg)  rotateZ(20deg);   }
  to   { transform: rotateX(72deg)  rotateZ(380deg);  }
}

/* Dot container */
.orbital__dot {
  position: absolute;
  top: 50%;
  left: 50%;
}

/* Dot positions — ring 1 (radius 100px) */
.orbital__ring--1 .orbital__dot:nth-child(1) {
  transform: translate(-50%, calc(-100px - 50%));
}
.orbital__ring--1 .orbital__dot:nth-child(2) {
  transform: translate(calc(100px - 50%), -50%);
}
.orbital__ring--1 .orbital__dot:nth-child(3) {
  transform: translate(-50%, calc(100px - 50%));
}

/* Dot positions — ring 2 (radius 145px) */
.orbital__ring--2 .orbital__dot:nth-child(1) {
  transform: translate(-50%, calc(-145px - 50%));
}
.orbital__ring--2 .orbital__dot:nth-child(2) {
  transform: translate(calc(145px - 50%), -50%);
}
.orbital__ring--2 .orbital__dot:nth-child(3) {
  transform: translate(-50%, calc(145px - 50%));
}

/* Dot positions — ring 3 (radius 190px) */
.orbital__ring--3 .orbital__dot:nth-child(1) {
  transform: translate(-50%, calc(-190px - 50%));
}
.orbital__ring--3 .orbital__dot:nth-child(2) {
  transform: translate(calc(190px - 50%), -50%);
}

/* Pill badge */
.orbital__pill {
  background: rgba(6, 5, 8, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 100px;
  padding: 5px 12px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: 0.06em;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.5);
  display: block;
}

.pill--orange {
  color: rgba(255, 140, 90, 1);
  border-color: rgba(255, 53, 0, 0.5);
  box-shadow:
    0 0 18px rgba(255, 53, 0, 0.28),
    inset 0 0 8px rgba(255, 53, 0, 0.08),
    0 2px 16px rgba(0, 0, 0, 0.5);
}

.pill--lime {
  color: rgba(198, 255, 0, 1);
  border-color: rgba(198, 255, 0, 0.45);
  box-shadow:
    0 0 16px rgba(198, 255, 0, 0.22),
    inset 0 0 8px rgba(198, 255, 0, 0.06),
    0 2px 16px rgba(0, 0, 0, 0.5);
}

.pill--muted {
  color: rgba(220, 210, 235, 0.9);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow:
    0 0 12px rgba(255, 255, 255, 0.06),
    0 2px 16px rgba(0, 0, 0, 0.5);
}

/* Counter-rotazioni pill */
.counter-r1 { animation: counter-r1 8s linear infinite; }
.counter-r2 { animation: counter-r2 12s linear infinite; }
.counter-r3 { animation: counter-r3 18s linear infinite; }

/* Ring 1: flat (rotateX=0), solo counter-Z */
@keyframes counter-r1 {
  from { transform: rotateZ(0deg);    }
  to   { transform: rotateZ(-360deg); }
}
/* Ring 2: rotateX(62deg) rotateZ(0→-360). Annulla Z e X. */
@keyframes counter-r2 {
  from { transform: rotateZ(0deg)    rotateX(-62deg); }
  to   { transform: rotateZ(360deg)  rotateX(-62deg); }
}
/* Ring 3: rotateX(72deg) rotateZ(20→380). Annulla Z e X. */
@keyframes counter-r3 {
  from { transform: rotateZ(-20deg)   rotateX(-72deg); }
  to   { transform: rotateZ(-380deg)  rotateX(-72deg); }
}

/* Particelle flottanti */
.orbital__particle {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

.orbital__particle:nth-child(1) {
  top: 20%; left: 70%;
  width: 6px; height: 6px;
  background: var(--color-accent);
  box-shadow: 0 0 10px 3px rgba(255, 53, 0, 0.7), 0 0 22px rgba(255, 53, 0, 0.35);
  animation: orbital-particle-a 5s ease-in-out infinite;
  animation-delay: 0s;
}
.orbital__particle:nth-child(2) {
  top: 75%; left: 20%;
  width: 4px; height: 4px;
  background: var(--color-secondary);
  box-shadow: 0 0 8px 2px rgba(198, 255, 0, 0.6), 0 0 18px rgba(198, 255, 0, 0.3);
  animation: orbital-particle-b 6s ease-in-out infinite;
  animation-delay: 0.7s;
}
.orbital__particle:nth-child(3) {
  top: 40%; left: 85%;
  width: 5px; height: 5px;
  background: var(--color-accent);
  box-shadow: 0 0 10px 3px rgba(255, 53, 0, 0.65), 0 0 20px rgba(255, 53, 0, 0.3);
  animation: orbital-particle-a 4.5s ease-in-out infinite;
  animation-delay: 1.4s;
}
.orbital__particle:nth-child(4) {
  top: 85%; left: 65%;
  width: 3px; height: 3px;
  background: var(--color-secondary);
  box-shadow: 0 0 7px 2px rgba(198, 255, 0, 0.55), 0 0 15px rgba(198, 255, 0, 0.25);
  animation: orbital-particle-b 5.5s ease-in-out infinite;
  animation-delay: 2.1s;
}
.orbital__particle:nth-child(5) {
  top: 15%; left: 30%;
  width: 5px; height: 5px;
  background: var(--color-accent);
  box-shadow: 0 0 9px 3px rgba(255, 53, 0, 0.6), 0 0 20px rgba(255, 53, 0, 0.28);
  animation: orbital-particle-a 6s ease-in-out infinite;
  animation-delay: 2.8s;
}
.orbital__particle:nth-child(6) {
  top: 60%; left: 10%;
  width: 4px; height: 4px;
  background: var(--color-secondary);
  box-shadow: 0 0 8px 2px rgba(198, 255, 0, 0.58), 0 0 16px rgba(198, 255, 0, 0.26);
  animation: orbital-particle-b 5s ease-in-out infinite;
  animation-delay: 0.4s;
}

@keyframes orbital-particle-a {
  0%   { opacity: 0;   transform: translateY(0)     scale(0.6); }
  15%  { opacity: 1;   transform: translateY(-6px)  scale(1.15); }
  70%  { opacity: 0.8; transform: translateY(-18px) scale(1); }
  100% { opacity: 0;   transform: translateY(-32px) scale(0.5); }
}
@keyframes orbital-particle-b {
  0%   { opacity: 0;   transform: translateY(0)     scale(0.5); }
  20%  { opacity: 0.9; transform: translateY(-8px)  scale(1.2); }
  75%  { opacity: 0.6; transform: translateY(-22px) scale(0.9); }
  100% { opacity: 0;   transform: translateY(-38px) scale(0.4); }
}

/* ============================================================
   MARQUEE / TECH STRIP
   ============================================================ */
.marquee-section {
  padding: var(--space-8) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  overflow: hidden;
  position: relative;
}

.marquee-section::before,
.marquee-section::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 120px;
  z-index: 2;
}

.marquee-section::before {
  left: 0;
  background: linear-gradient(to right, var(--color-bg), transparent);
}

.marquee-section::after {
  right: 0;
  background: linear-gradient(to left, var(--color-bg), transparent);
}

.marquee-track {
  display: flex;
  gap: var(--space-12);
  width: max-content;
  animation: marquee 30s linear infinite;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.marquee-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #3a3050;
  white-space: nowrap;
  transition: color var(--dur-fast);
}

.marquee-item--accent {
  color: rgba(255, 53, 0, 0.38);
}

.marquee-item:hover {
  color: var(--color-text-muted);
}

.marquee-item svg,
.marquee-item .tech-icon {
  width: 20px;
  height: 20px;
  opacity: 0.6;
}

/* ============================================================
   CARDS
   ============================================================ */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  transition: all var(--dur-base) var(--ease-out);
  position: relative;
  overflow: hidden;
}

.card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255,107,53,0.06) 0%, transparent 60%);
  opacity: 0;
  transition: opacity var(--dur-base);
}

.card:hover::before {
  opacity: 1;
}

.card:hover {
  border-color: rgba(255,107,53,0.25);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg), 0 0 40px rgba(255,107,53,0.08);
}

.card__icon {
  width: 52px;
  height: 52px;
  background: var(--color-accent-glow-s);
  border: 1px solid rgba(255,107,53,0.2);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-6);
  font-size: 22px;
  transition: all var(--dur-base);
}

.card:hover .card__icon {
  background: var(--color-accent-glow);
  border-color: rgba(255,107,53,0.4);
  box-shadow: 0 0 20px var(--color-accent-glow);
}

.card__title {
  font-size: var(--text-xl);
  font-weight: 700;
  margin-bottom: var(--space-3);
}

.card__text {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.75;
}

/* ============================================================
   SERVICES SECTION
   ============================================================ */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.service-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
  filter: drop-shadow(0 0 0 transparent);
  transition: transform 0.1s ease-out,
              filter var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.service-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(198, 255, 0, 0.5) 0%,
    rgba(198, 255, 0, 0.15) 50%,
    transparent 100%
  );
  pointer-events: none;
}

.service-card__accent-line {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-accent), var(--color-accent-light));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease-out);
}

.service-card:hover .service-card__accent-line {
  transform: scaleX(1);
}

.service-card:hover {
  filter: drop-shadow(0 20px 30px rgba(255, 53, 0, 0.15));
  border-color: rgba(255, 53, 0, 0.2);
}

.service-card__icon {
  font-size: 2rem;
  margin-bottom: var(--space-5);
  display: block;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.service-card__title {
  font-size: var(--text-lg);
  font-weight: 700;
  margin-bottom: var(--space-3);
}

.service-card__desc {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.75;
  flex: 1;
}

.service-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

.service-card__type {
  font-family: var(--font-mono);
  font-size: 0.52rem;
  font-weight: 700;
  color: rgba(198, 255, 0, 0.5);
  letter-spacing: 0.06em;
  margin-bottom: var(--space-3);
}

.service-card:hover .service-card__icon {
  transform: rotate(-8deg) scale(1.15);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.service-card .badge--default {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  border-radius: var(--radius-sm);
  letter-spacing: 0.04em;
}

/* ============================================================
   BADGES / TAGS
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.badge--default {
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}

.badge--accent {
  background: var(--color-accent-glow-s);
  border: 1px solid rgba(255,107,53,0.2);
  color: var(--color-accent-light);
}

.badge--blue {
  background: rgba(59,130,246,0.1);
  border: 1px solid rgba(59,130,246,0.2);
  color: var(--color-blue-light);
}

/* ============================================================
   SKILLS / TECH GRID
   ============================================================ */
.skills-section {
  background: var(--color-bg-2);
}

.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: var(--space-4);
}

.skill-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
  transition: all var(--dur-base) var(--ease-out);
  cursor: default;
}

.skill-item:hover {
  border-color: var(--color-border-hover);
  background: var(--color-surface-2);
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(255,107,53,0.1);
}

.skill-item__icon {
  font-size: 2rem;
  line-height: 1;
}

.skill-item__name {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
}

/* ============================================================
   PORTFOLIO / PROJECTS
   ============================================================ */
.portfolio-filters {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-10);
}

.filter-btn {
  min-height: 44px;                 /* 44px min touch target */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  background: transparent;
  transition: all var(--dur-base) var(--ease-out);
  cursor: pointer;
  font-family: var(--font-body);
}

.filter-btn:hover {
  color: var(--color-text);
  border-color: rgba(255,255,255,0.2);
}

.filter-btn.active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
  box-shadow: 0 0 20px var(--color-accent-glow);
}

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

/* ============================================================
   PORTFOLIO CARD — MORPHING DESIGN
   Fixed card height; image compresses inside and reveals
   the detail panel — the card itself never resizes.
   ============================================================ */
.portfolio-card {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 340px;
  cursor: pointer;
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

.portfolio-card:hover {
  border-color: rgba(255,107,53,0.35);
  box-shadow: 0 20px 60px rgba(0,0,0,0.4), 0 0 40px rgba(255,107,53,0.08);
}

/* Visual area — fills the whole card height by default */
.portfolio-card__visual {
  position: relative;
  height: 340px;
  flex-shrink: 0;
  overflow: hidden;
  transition: height 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

.portfolio-card:hover .portfolio-card__visual {
  height: 110px;
}

/* Thumbnail fills the visual */
.proj-thumb {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.5rem;
  position: relative;
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

.portfolio-card:hover .proj-thumb {
  transform: scale(1.08);
}

.proj-thumb--1 { background: linear-gradient(135deg, #0D1630 0%, #1C2D52 100%); }
.proj-thumb--2 { background: linear-gradient(135deg, #150D20 0%, #2D1040 100%); }
.proj-thumb--3 { background: linear-gradient(135deg, #0A1A10 0%, #0F3020 100%); }
.proj-thumb--4 { background: linear-gradient(135deg, #1A100A 0%, #3A1A05 100%); }
.proj-thumb--5 { background: linear-gradient(135deg, #0A1520 0%, #0A2040 100%); }
.proj-thumb--6 { background: linear-gradient(135deg, #1A0A15 0%, #35082A 100%); }

/* Real screenshot thumbnails */
.proj-screenshot {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
.portfolio-card:hover .proj-screenshot {
  transform: scale(1.05);
}

/* Gradient overlay at bottom of visual */
.portfolio-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 30%, rgba(5,11,24,0.96) 100%);
  transition: opacity 0.55s ease;
}

.portfolio-card:hover .portfolio-card__overlay {
  opacity: 0.5;
}

/* Category badge — top-left */
.portfolio-card__category {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  z-index: 2;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.portfolio-card__category .badge {
  background: rgba(5,11,24,0.72) !important;
  border-color: rgba(255,255,255,0.18) !important;
  color: #fff !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.portfolio-card:hover .portfolio-card__category {
  opacity: 0;
  transform: translateY(-6px);
}

/* Title overlaid at the bottom of the visual */
.portfolio-card__visual-meta {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-5) var(--space-5) var(--space-4);
  z-index: 2;
}

.portfolio-card__title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
  margin: 0;
}

/* Detail panel — lives below the visual, revealed as visual shrinks */
.portfolio-card__body {
  flex: 1;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.3s ease 0.18s;
}

.portfolio-card:hover .portfolio-card__body {
  opacity: 1;
}

.portfolio-card__body-inner {
  padding: var(--space-4) var(--space-5) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  height: 100%;
}

.portfolio-card__desc {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.65;
  margin: 0;
  flex: 1;
}

.portfolio-card__stack {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.portfolio-card__footer {
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.portfolio-card__result {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.portfolio-card__result strong {
  color: var(--color-accent);
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonials-section {
  background: var(--color-bg-2);
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.testimonial-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  transition: all var(--dur-base) var(--ease-out);
}

.testimonial-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255,107,53,0.2);
}

.testimonial-card__stars {
  display: flex;
  gap: 2px;
  margin-bottom: var(--space-4);
  color: var(--color-accent);
  font-size: var(--text-base);
}

.testimonial-card__quote {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.8;
  margin-bottom: var(--space-6);
  font-style: italic;
}

.testimonial-card__quote::before {
  content: '"';
  color: var(--color-accent);
  font-size: var(--text-2xl);
  font-style: normal;
  line-height: 0;
  position: relative;
  top: 8px;
  margin-right: var(--space-1);
}

.testimonial-card__author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.testimonial-card__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-blue-light) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--text-sm);
  color: #fff;
  flex-shrink: 0;
}

.testimonial-card__name {
  font-weight: 700;
  font-size: var(--text-sm);
}

.testimonial-card__role {
  font-size: var(--text-xs);
  color: var(--color-text-dim);
}

/* ============================================================
   WHY CHOOSE ME / FEATURES
   ============================================================ */
.features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

.feature-item {
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
}

.feature-item__icon {
  width: 48px;
  height: 48px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
  transition: all var(--dur-base);
}

.feature-item:hover .feature-item__icon {
  border-color: var(--color-border-hover);
  background: var(--color-accent-glow-s);
}

.feature-item__title {
  font-size: var(--text-base);
  font-weight: 700;
  margin-bottom: var(--space-2);
}

.feature-item__text {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.7;
}

/* ============================================================
   CTA SECTION
   ============================================================ */
.cta-section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  margin: var(--space-24) auto;
  padding: var(--space-20) var(--space-16);
  text-align: center;
  max-width: 800px;
  position: relative;
  overflow: hidden;
}

.cta-section__glow {
  position: absolute;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(255,107,53,0.12) 0%, transparent 70%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  filter: blur(40px);
  pointer-events: none;
}

.cta-section__title {
  font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl));
  font-weight: 800;
  margin-bottom: var(--space-4);
}

.cta-section__text {
  color: var(--color-text-muted);
  font-size: var(--text-lg);
  margin-bottom: var(--space-8);
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.cta-section__actions {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* ============================================================
   ABOUT PAGE — TIMELINE
   ============================================================ */
.timeline {
  position: relative;
  padding-left: var(--space-8);
}

.timeline::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--color-accent), var(--color-blue), transparent);
  border-radius: 2px;
}

.timeline-item {
  position: relative;
  padding-bottom: var(--space-10);
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--space-8) - 4px);
  top: 6px;
  width: 10px;
  height: 10px;
  background: var(--color-accent);
  border-radius: 50%;
  border: 2px solid var(--color-bg);
  box-shadow: 0 0 10px var(--color-accent-glow);
}

.timeline-item__year {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-accent);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}

.timeline-item__title {
  font-size: var(--text-lg);
  font-weight: 700;
  margin-bottom: var(--space-2);
}

.timeline-item__text {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.7;
}

/* ============================================================
   ABOUT — APPROACH BLOCKS
   ============================================================ */
.approach-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

.approach-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  transition: all var(--dur-base) var(--ease-out);
  position: relative;
}

.approach-item__number {
  position: absolute;
  top: var(--space-6);
  right: var(--space-6);
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 900;
  color: rgba(255,107,53,0.08);
  line-height: 1;
}

.approach-item:hover {
  border-color: rgba(255,107,53,0.2);
  transform: translateY(-4px);
}

/* ============================================================
   FAQ
   ============================================================ */
.faq-list {
  max-width: 720px;
  margin: 0 auto;
}

.faq-item {
  border-bottom: 1px solid var(--color-border);
}

.faq-item__question {
  width: 100%;
  text-align: left;
  padding: var(--space-6) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  transition: color var(--dur-fast);
  background: none;
  border: none;
}

.faq-item__question:hover {
  color: var(--color-accent);
}

.faq-item__icon {
  width: 24px;
  height: 24px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 14px;
  transition: all var(--dur-base);
}

.faq-item.open .faq-item__icon {
  background: var(--color-accent);
  border-color: var(--color-accent);
  transform: rotate(45deg);
}

.faq-item__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--dur-slow) var(--ease-out),
              padding var(--dur-base);
}

.faq-item.open .faq-item__answer {
  max-height: 300px;
  padding-bottom: var(--space-6);
}

.faq-item__answer p {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.8;
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: var(--space-16);
  align-items: start;
}

.contact-info__title {
  font-size: var(--text-3xl);
  font-weight: 800;
  margin-bottom: var(--space-4);
}

.contact-info__text {
  color: var(--color-text-muted);
  line-height: 1.8;
  margin-bottom: var(--space-8);
}

.contact-items {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

.contact-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.contact-item__icon {
  width: 44px;
  height: 44px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.contact-item strong {
  display: block;
  color: var(--color-text);
  font-weight: 600;
  margin-bottom: 2px;
}

.availability-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: rgba(34,197,94,0.1);
  border: 1px solid rgba(34,197,94,0.2);
  border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
  font-weight: 600;
  color: #4ADE80;
}

.availability-dot {
  width: 6px;
  height: 6px;
  background: #4ADE80;
  border-radius: 50%;
  animation: pulse-dot 2s ease-in-out infinite;
}

/* Form */
.contact-form {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-10);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

/* Floating label form fields */
.form-group {
  position: relative;
  padding-top: 1.5rem;
  margin-bottom: var(--space-6);
}

.fp-field {
  position: relative;
}

.fp-field__input {
  display: block;
  width: 100%;
  padding: 0.6rem 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  outline: none;
}

.fp-field__input::placeholder { color: transparent; }
.fp-field__input:focus { outline: none; }

select.fp-field__input {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 1.25rem;
}

textarea.fp-field__input {
  resize: vertical;
  min-height: 130px;
  padding-top: 0.4rem;
  line-height: 1.6;
}

.fp-field__label {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: 500;
  font-family: var(--font-body);
  position: absolute;
  pointer-events: none;
  left: 0;
  top: 0.6rem;
  transition: top 0.2s ease, font-size 0.2s ease, color 0.2s ease, letter-spacing 0.2s ease;
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
}

input.fp-field__input:focus ~ .fp-field__label,
textarea.fp-field__input:focus ~ .fp-field__label,
input.fp-field__input:not(:placeholder-shown) ~ .fp-field__label,
textarea.fp-field__input:not(:placeholder-shown) ~ .fp-field__label,
.fp-field__input.is-filled ~ .fp-field__label {
  top: -1.35rem;
  font-size: 0.7rem;
  color: var(--color-accent);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

/* Selects: label always floated above */
.fp-field--select .fp-field__label {
  top: -1.35rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--color-text-muted);
}

.fp-field--select .fp-field__input:focus ~ .fp-field__label,
.fp-field--select .fp-field__input.is-filled ~ .fp-field__label {
  color: var(--color-accent);
}

/* Animated underline bar */
.fp-field__bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  pointer-events: none;
}

.fp-field__bar::before,
.fp-field__bar::after {
  content: '';
  position: absolute;
  top: 0;
  height: 2px;
  width: 0;
  background: var(--color-accent);
  box-shadow: 0 0 8px var(--color-accent-glow);
  transition: width 0.2s ease;
}

.fp-field__bar::before { left: 50%; }
.fp-field__bar::after  { right: 50%; }

.fp-field__input:focus ~ .fp-field__bar::before,
.fp-field__input:focus ~ .fp-field__bar::after { width: 50%; }

/* Focus highlight flash */
.fp-field__highlight {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  opacity: 0;
}

.fp-field__input:focus ~ .fp-field__highlight {
  animation: fp-highlight 0.3s ease;
}

@keyframes fp-highlight {
  from { background: var(--color-accent); opacity: 0.06; }
  to   { background: transparent; opacity: 0; }
}

/* Select dropdown arrow */
.fp-field__arrow {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--color-text-dim);
  display: flex;
  align-items: center;
  transition: color 0.2s ease;
}

.fp-field--select .fp-field__input:focus ~ .fp-field__arrow {
  color: var(--color-accent);
}

.form-message {
  margin-top: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 500;
  display: none;
}

.form-message.success {
  display: block;
  background: rgba(34,197,94,0.1);
  border: 1px solid rgba(34,197,94,0.2);
  color: #4ADE80;
}

.form-message.error {
  display: block;
  background: rgba(239,68,68,0.1);
  border: 1px solid rgba(239,68,68,0.2);
  color: #F87171;
}

/* ============================================================
   PAGE HERO (inner pages)
   ============================================================ */
.page-hero {
  padding: calc(var(--nav-height) + var(--space-20)) 0 var(--space-20);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.page-hero__glow {
  position: absolute;
  width: 500px;
  height: 300px;
  background: radial-gradient(ellipse, rgba(255,107,53,0.1) 0%, transparent 70%);
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  filter: blur(40px);
}

.page-hero__title {
  font-size: clamp(var(--text-4xl), 5vw, var(--text-6xl));
  font-weight: 900;
  margin-bottom: var(--space-4);
  position: relative;
  z-index: 1;
}

.page-hero__subtitle {
  font-size: var(--text-xl);
  color: var(--color-text-muted);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.7;
  position: relative;
  z-index: 1;
}

.page-hero .section-label {
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--color-bg-2);
  border-top: 1px solid var(--color-border);
  padding: var(--space-16) 0 var(--space-8);
}

.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-12);
  margin-bottom: var(--space-12);
}

.footer__brand-logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xl);
  margin-bottom: var(--space-4);
}

.footer__brand-logo span {
  color: var(--color-accent);
}

.footer__brand-text {
  font-size: var(--text-sm);
  color: var(--color-text-dim);
  line-height: 1.7;
  max-width: 300px;
  margin-bottom: var(--space-6);
}

.footer__socials {
  display: flex;
  gap: var(--space-3);
}

.footer__social {
  width: 40px;
  height: 40px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  transition: all var(--dur-base);
  color: var(--color-text-muted);
}

.footer__social:hover {
  border-color: var(--color-border-hover);
  color: var(--color-accent);
  background: var(--color-accent-glow-s);
}

.footer__heading {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-5);
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer__link {
  font-size: var(--text-sm);
  color: var(--color-text-dim);
  transition: color var(--dur-fast);
}

.footer__link:hover {
  color: var(--color-text);
}

.footer__bottom {
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.footer__copy {
  font-size: var(--text-xs);
  color: var(--color-text-dim);
}

.footer__copy span {
  color: var(--color-accent);
}

/* ============================================================
   TYPEWRITER CURSOR
   ============================================================ */
.type-cursor {
  color: var(--color-accent);
  font-weight: 400;
  margin-left: 1px;
  animation: blink-cur 0.85s step-end infinite;
}

@keyframes blink-cur {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ============================================================
   WORD SPLIT REVEAL  (triggered by JS adding .sw-ready)
   ============================================================ */
.sw {
  display: inline-block;
}

.sw-ready .sw {
  opacity: 0;
  transform: translateY(16px);
  filter: blur(4px);
  transition:
    opacity 0.55s var(--ease-out),
    transform 0.55s var(--ease-out),
    filter 0.4s var(--ease-out);
  transition-delay: calc(var(--wi) * 0.075s);
}

.sw-ready.sw-visible .sw {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* ============================================================
   SCROLL ANIMATIONS
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}

.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  min-width: 0;
}

.reveal-left.revealed {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  min-width: 0;
}

.reveal-right.revealed {
  opacity: 1;
  transform: translateX(0);
}

@media (max-width: 640px) {
  .reveal-left  { transform: translateY(20px); }
  .reveal-right { transform: translateY(20px); }
  .reveal-left.revealed,
  .reveal-right.revealed { transform: translateY(0); }
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }

/* ============================================================
   CURSOR GLOW
   ============================================================ */
.cursor-glow {
  pointer-events: none;
  position: fixed;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
  transform: translate(-50%, -50%);
  z-index: 9997;
  transition: opacity 0.3s;
}

/* ============================================================
   TARGET CURSOR
   ============================================================ */
body.has-target-cursor,
body.has-target-cursor * {
  cursor: none !important;
}

.target-cursor {
  pointer-events: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  transform: translate(-50%, -50%);
  will-change: transform;
}

.target-cursor__ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.2s ease, height 0.2s ease, opacity 0.2s ease, border-color 0.2s ease;
}

.target-cursor__outer {
  width: 36px;
  height: 36px;
  border: 1.5px solid #ffffff;
  opacity: 0.75;
  animation: target-spin 2s linear infinite;
}

.target-cursor__inner {
  width: 8px;
  height: 8px;
  background: var(--color-accent);
  opacity: 0.9;
  transition: width 0.2s ease, height 0.2s ease, opacity 0.2s ease;
}

/* crosshair lines */
.target-cursor__lines {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 36px;
  height: 36px;
  transform: translate(-50%, -50%);
  animation: target-spin 2s linear infinite;
  transition: width 0.2s ease, height 0.2s ease, opacity 0.2s ease;
}

.target-cursor__lines::before,
.target-cursor__lines::after {
  content: '';
  position: absolute;
  background: var(--color-accent);
  opacity: 0.5;
  transition: opacity 0.2s ease;
}

/* horizontal line */
.target-cursor__lines::before {
  width: 6px;
  height: 1px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: -14px 0 0 #ffffff, 14px 0 0 #ffffff;
  background: transparent;
}

/* vertical line */
.target-cursor__lines::after {
  width: 1px;
  height: 6px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 -14px 0 #ffffff, 0 14px 0 #ffffff;
  background: transparent;
}

/* hover state */
.target-cursor--hover .target-cursor__outer {
  width: 52px;
  height: 52px;
  opacity: 0.5;
  border-color: #ffffff;
}

.target-cursor--hover .target-cursor__inner {
  width: 6px;
  height: 6px;
  opacity: 0.6;
}

.target-cursor--hover .target-cursor__lines {
  width: 52px;
  height: 52px;
  opacity: 0.5;
}

/* click flash */
.target-cursor--click .target-cursor__outer {
  width: 24px;
  height: 24px;
  opacity: 1;
}

.target-cursor--click .target-cursor__inner {
  width: 12px;
  height: 12px;
  opacity: 1;
}

@keyframes target-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* light theme adjustments */
.light-theme .target-cursor__outer,
.light-theme .target-cursor__lines::before,
.light-theme .target-cursor__lines::after {
  border-color: #ffffff;
}

@media (pointer: coarse) {
  body.has-target-cursor,
  body.has-target-cursor * {
    cursor: auto !important;
  }
  .target-cursor { display: none; }
}

/* ============================================================
   UTILITIES
   ============================================================ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}

.divider {
  height: 1px;
  background: var(--color-border);
  margin: var(--space-12) 0;
}

.text-accent { color: var(--color-accent); }
.text-muted  { color: var(--color-text-muted); }
.text-center { text-align: center; }
.font-display { font-family: var(--font-display); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* Reusable 2-col split layout — replaces hardcoded inline grids */
.split-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: start;
}

@media (max-width: 1024px) {
  .services-grid,
  .portfolio-grid,
  .testimonials-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero__content {
    grid-template-columns: 1fr;
    text-align: center;
    gap: var(--space-12);
  }

  .hero__description { max-width: 100%; }
  .hero__actions { justify-content: center; }
  .hero__stats { justify-content: center; }
  .hero__visual { display: none; }
  .hero__orbital { display: none; }

  .features-grid { grid-template-columns: 1fr; }

  .split-layout {
    grid-template-columns: 1fr;
    gap: var(--space-12);
  }

  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }

  .contact-layout {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }
}

@media (max-width: 900px) {
  .hero__orbital {
    max-width: 320px;
  }

  .orbital__sphere {
    width: 90px;
    height: 90px;
  }

  .orbital__ring--1 {
    width: 150px;
    height: 150px;
    margin-top: -75px;
    margin-left: -75px;
  }
  .orbital__ring--2 {
    width: 220px;
    height: 220px;
    margin-top: -110px;
    margin-left: -110px;
  }
  .orbital__ring--3 {
    width: 290px;
    height: 290px;
    margin-top: -145px;
    margin-left: -145px;
  }

  .orbital__ring--1 .orbital__dot:nth-child(1) { transform: translate(-50%, calc(-75px - 50%)); }
  .orbital__ring--1 .orbital__dot:nth-child(2) { transform: translate(calc(75px - 50%), -50%); }
  .orbital__ring--1 .orbital__dot:nth-child(3) { transform: translate(-50%, calc(75px - 50%)); }

  .orbital__ring--2 .orbital__dot:nth-child(1) { transform: translate(-50%, calc(-110px - 50%)); }
  .orbital__ring--2 .orbital__dot:nth-child(2) { transform: translate(calc(110px - 50%), -50%); }
  .orbital__ring--2 .orbital__dot:nth-child(3) { transform: translate(-50%, calc(110px - 50%)); }

  .orbital__ring--3 .orbital__dot:nth-child(1) { transform: translate(-50%, calc(-145px - 50%)); }
  .orbital__ring--3 .orbital__dot:nth-child(2) { transform: translate(calc(145px - 50%), -50%); }

  .orbital__pill {
    font-size: 0.48rem;
    padding: 3px 8px;
  }
}

@media (max-width: 768px) {
  :root { --nav-height: 68px; }

  .navbar {
    padding-top: 10px;
  }

  .navbar__inner {
    height: 46px;
    padding: 0 var(--space-4);
    width: calc(100% - var(--space-8));
  }

  .navbar__nav,
  .navbar__actions .btn--primary { display: none; }
  .navbar__burger { display: flex; }
  /* .navbar__actions prefix beats the later single-class base rule (media queries
     don't add specificity) — 44px min touch target on mobile. */
  .navbar__actions .navbar__theme-toggle { width: 44px; height: 44px; }

  .services-grid,
  .portfolio-grid,
  .testimonials-grid,
  .approach-grid { grid-template-columns: 1fr; }

  .section { padding: var(--space-16) 0; }
  .section--lg { padding: var(--space-20) 0; }

  .cta-section {
    padding: var(--space-12) var(--space-6);
    border-radius: var(--radius-lg);
    margin: var(--space-12) var(--space-4);
  }

  .form-row { grid-template-columns: 1fr; }

  .contact-form { padding: var(--space-6); }

  /* Footer — 2-col layout on mobile */
  .footer {
    padding: var(--space-12) 0 var(--space-6);
  }

  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8) var(--space-6);
  }

  /* Brand spans full width, centered */
  .footer__grid > *:first-child {
    grid-column: 1 / -1;
    text-align: center;
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--color-border);
  }

  .footer__grid > *:first-child .footer__brand-text {
    max-width: 100%;
  }

  .footer__grid > *:first-child .footer__socials {
    justify-content: center;
  }

  /* Contacts spans full width */
  .footer__grid > *:last-child {
    grid-column: 1 / -1;
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border);
    text-align: center;
  }

  .hero__stats {
    gap: var(--space-6);
    flex-wrap: wrap;
    justify-content: center;
  }

  .footer__bottom {
    flex-direction: column;
    text-align: center;
  }
}

/* ============================================================
   LIGHT THEME — CSS VARIABLE OVERRIDES
   Applied when <html data-theme="light">
   ============================================================ */
[data-theme="light"] {
  --color-bg:            #F2EDE7;
  --color-bg-2:          #EAE3DC;
  --color-surface:       #FFFFFF;
  --color-surface-2:     #F7F2EE;
  --color-border:        rgba(0, 0, 0, 0.07);
  --color-border-hover:  rgba(255, 53, 0, 0.4);

  --color-accent-glow:   rgba(255, 53, 0, 0.15);
  --color-accent-glow-s: rgba(255, 53, 0, 0.07);

  --color-secondary-dim: rgba(80, 100, 0, 0.1);

  --color-blue-glow:     rgba(28, 78, 216, 0.12);

  --color-text:          #18100E;
  --color-text-muted:    #6E5B52;
  --color-text-dim:      #A8968E;

  --shadow-sm:     0 1px 3px rgba(0,0,0,0.1);
  --shadow-md:     0 4px 16px rgba(0,0,0,0.1);
  --shadow-lg:     0 12px 40px rgba(0,0,0,0.14);
  --shadow-accent: 0 0 40px rgba(255, 53, 0, 0.15);
  --shadow-blue:   0 0 40px rgba(28, 78, 216, 0.12);
}

/* Body atmosphere */
[data-theme="light"] body {
  background-image:
    radial-gradient(ellipse 900px 700px at 85% -5%,  rgba(255, 53, 0, 0.06) 0%, transparent 60%),
    radial-gradient(ellipse 700px 500px at -5% 95%,  rgba(100, 120, 0, 0.04) 0%, transparent 55%),
    radial-gradient(ellipse 500px 400px at 50% 110%, rgba(255, 53, 0, 0.03) 0%, transparent 60%);
}

/* Navbar pill — warm translucent cream */
[data-theme="light"] .navbar__inner {
  background: rgba(242, 237, 231, 0.72);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 8px 32px rgba(0, 0, 0, 0.1);
}
[data-theme="light"] .navbar.scrolled .navbar__inner {
  background: rgba(242, 237, 231, 0.97);
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 12px 48px rgba(0, 0, 0, 0.12);
}
[data-theme="light"] .navbar__pill {
  background: rgba(0, 0, 0, 0.07);
}
[data-theme="light"] .navbar__link:hover {
  color: var(--color-text);
}
[data-theme="light"] .navbar__link.active {
  color: var(--color-text);
}
[data-theme="light"] .navbar__burger:hover {
  background: rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .navbar__mobile {
  background: rgba(242, 237, 231, 0.98);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
}
[data-theme="light"] .navbar__mobile .navbar__link:hover {
  background: rgba(0, 0, 0, 0.05);
}


/* Theme toggle button */
.navbar__theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-full);
  color: var(--color-text-muted);
  transition: color var(--dur-fast), background var(--dur-base) var(--ease-out);
  flex-shrink: 0;
}
.navbar__theme-toggle:hover {
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.07);
}
[data-theme="light"] .navbar__theme-toggle:hover {
  background: rgba(0, 0, 0, 0.06);
}
.theme-icon--sun  { display: none; }
.theme-icon--moon { display: block; }
[data-theme="light"] .theme-icon--sun  { display: block; }
[data-theme="light"] .theme-icon--moon { display: none; }

/* Buttons */
[data-theme="light"] .btn--outline::before {
  background: linear-gradient(135deg, rgba(0,0,0,0.1), rgba(0,0,0,0.04), rgba(0,0,0,0.1));
}
[data-theme="light"] .btn--ghost:hover {
  background: rgba(0, 0, 0, 0.05);
}

/* Hero grid — dark lines on light bg */
[data-theme="light"] .hero {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.045) 1px, transparent 1px);
}
[data-theme="light"] .hero__badge {
  background: rgba(80, 100, 0, 0.07);
  border-color: rgba(80, 100, 0, 0.18);
}

/* Code window stays dark — IDEs are dark by convention */
[data-theme="light"] .hero__code-window {
  background: #1C1628;
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: var(--shadow-lg), 0 0 60px rgba(28,78,216,0.12);
}
[data-theme="light"] .code-window__bar {
  background: #251E35;
  border-color: rgba(255, 255, 255, 0.06);
}

/* Badges */
[data-theme="light"] .badge--default {
  background: rgba(0, 0, 0, 0.04);
}

/* Portfolio filter hover */
[data-theme="light"] .filter-btn:hover {
  border-color: rgba(0, 0, 0, 0.18);
}

/* Portfolio card shadow */
[data-theme="light"] .portfolio-card:hover {
  box-shadow: 0 20px 60px rgba(0,0,0,0.18), 0 0 40px rgba(255,107,53,0.08);
}

[data-theme="light"] .orbital__pill {
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
}
[data-theme="light"] .pill--orange,
[data-theme="light"] .pill--lime,
[data-theme="light"] .pill--muted {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
}
[data-theme="light"] .orbital__ring--1 {
  border-color: rgba(255, 53, 0, 0.28);
  box-shadow: none;
}
[data-theme="light"] .orbital__ring--2 {
  border-color: rgba(100, 160, 0, 0.2);
  box-shadow: none;
}
[data-theme="light"] .orbital__ring--3 {
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: none;
}
[data-theme="light"] .orbital__particle {
  box-shadow: none;
}

[data-theme="light"] .hero__comment {
  color: rgba(200, 80, 0, 0.5);
}

/* ============================================================ */

@media (max-width: 480px) {
  .container { padding: 0 var(--space-4); }
  .section-title { font-size: var(--text-3xl); }

  .portfolio-grid,
  .services-grid,
  .testimonials-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   ABOUT PAGE
   ============================================================ */
.about-hero-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}
.about-portrait {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.about-portrait__wrapper {
  position: relative;
  display: inline-block;
}
.about-portrait__frame {
  width: 380px;
  height: 460px;
  background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-surface-2) 100%);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 6rem;
  position: relative;
  overflow: hidden;
}
.about-portrait__frame::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(255,53,0,0.08) 60deg, transparent 120deg);
  animation: rotate-glow 8s linear infinite;
}
@keyframes rotate-glow {
  to { transform: rotate(360deg); }
}
.about-portrait__badge {
  position: absolute;
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 0.5rem 1.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-accent);
  white-space: nowrap;
}
.about-portrait__corner {
  position: absolute;
  z-index: 10;
  background: var(--color-accent);
  border-radius: var(--radius-md);
  padding: 0.5rem 0.75rem;
  font-size: 0.7rem;
  font-weight: 700;
  color: #fff;
}
.about-portrait__corner--tl { top: 1rem; left: -1.5rem; }
.about-portrait__corner--br { bottom: 2rem; right: -1.5rem; }
.stack-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.stack-category {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.25rem 1rem;
  text-align: center;
  transition: all var(--dur-base);
}
.stack-category:hover {
  border-color: var(--color-border-hover);
  transform: translateY(-3px);
}
.stack-category__title {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-dim);
  margin-bottom: 0.5rem;
}
.stack-category__items {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  line-height: 1.6;
}
@media (max-width: 1024px) {
  .about-hero-layout { grid-template-columns: 1fr; }
  .about-portrait { display: none; }
  .stack-columns { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .stack-columns { grid-template-columns: 1fr; }
}

/* ============================================================
   SERVICES PAGE
   ============================================================ */
.service-detail-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 3rem;
  display: grid;
  grid-template-columns: 1fr 1.8fr;
  gap: 3rem;
  align-items: start;
  transition: all var(--dur-base) var(--ease-out);
  margin-bottom: 1.5rem;
  position: relative;
  overflow: hidden;
}
.service-detail-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(to bottom, var(--color-accent), transparent);
  opacity: 0;
  transition: opacity var(--dur-base);
}
.service-detail-card:hover::before { opacity: 1; }
.service-detail-card:hover {
  border-color: rgba(255,53,0,0.2);
  transform: translateX(4px);
  z-index: 10;
}
.service-detail-card__left {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.service-detail-card__icon {
  font-size: 3rem;
  line-height: 1;
}
.service-detail-card__price {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-accent);
  background: var(--color-accent-glow-s);
  border: 1px solid rgba(255,53,0,0.2);
  border-radius: var(--radius-full);
  padding: 0.3rem 0.75rem;
  display: inline-block;
}
.service-detail-card__title {
  font-size: 1.5rem;
  font-weight: 800;
}
.service-detail-card__right {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.service-detail-card__desc {
  color: var(--color-text-muted);
  line-height: 1.8;
  font-size: 1rem;
}
.service-detail-card__list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.service-detail-card__item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}
.service-detail-card__item::before {
  content: '→';
  color: var(--color-accent);
  font-weight: 700;
  flex-shrink: 0;
  line-height: 1.6;
}
.service-detail-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--color-border);
}
.process-step {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  padding: 2rem 0;
  border-bottom: 1px solid var(--color-border);
}
.process-step:last-child { border-bottom: none; }
.process-step__num {
  width: 48px;
  height: 48px;
  background: var(--color-accent-glow-s);
  border: 1px solid rgba(255,53,0,0.2);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--color-accent);
  font-size: 1.1rem;
  flex-shrink: 0;
}
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.pricing-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 2.5rem;
  text-align: center;
  transition: all var(--dur-base);
  position: relative;
  overflow: hidden;
}
.pricing-card--featured {
  border-color: var(--color-accent);
  background: var(--color-surface-2);
}
.pricing-card--featured::before {
  content: 'Più scelto';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-accent);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.3rem 1.5rem;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.pricing-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}
.pricing-card__name {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  margin-bottom: 1rem;
  margin-top: 0.5rem;
}
.pricing-card__price {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 900;
  color: var(--color-text);
  line-height: 1;
  margin-bottom: 0.3rem;
}
.pricing-card__price span {
  font-size: 1.25rem;
  color: var(--color-text-muted);
}
.pricing-card__period {
  font-size: 0.8rem;
  color: var(--color-text-dim);
  margin-bottom: 2rem;
}
.pricing-card__items {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 2rem;
}
.pricing-card__item {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.pricing-card__item::before {
  content: '✓';
  color: var(--color-accent);
  font-weight: 700;
}
@media (max-width: 1024px) {
  .service-detail-card { grid-template-columns: 1fr; padding: 2rem; }
  .pricing-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .process-step { flex-direction: column; gap: 1rem; }
}

/* === Services CTA Button (srv-cta) — uiverse.io/barisdogansutcu/rare-owl-43 === */
.srv-cta-btn {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 600;
  text-decoration: none;
  background-image: linear-gradient(var(--color-accent), var(--color-accent-dark));
  color: white;
  border: solid 2px var(--color-accent-dark);
  font-size: 12px;
  height: 38px;
  width: 50%;
  align-self: center;
  padding: 0 14px;
  border-radius: 6px;
  position: relative;
  z-index: 1;
  margin-top: 1.5rem;
  margin-bottom: 4rem;
}
.srv-cta-btn:hover { z-index: 20; }
.srv-cta-btn:not(:hover) .srv-cta-hide,
.srv-cta-btn:not(:hover) .srv-cta-icon::before,
.srv-cta-btn:not(:hover) .srv-cta-icon::after { opacity: 0; visibility: hidden; transform: scale(1.4); }
.srv-cta-hide { transition: all 0.2s ease; }
.srv-cta-btn:active { background-image: linear-gradient(var(--color-accent-dark), var(--color-accent)); border-color: var(--color-accent-dark); }
.srv-cta-icon { position: relative; }
.srv-cta-icon::before {
  content: ""; position: absolute; left: 0; top: 0; width: 6px; height: 6px;
  transform: translate(-50%, -50%); background-color: rgb(255,0,170); border-radius: 100%;
}
.srv-cta-icon::after {
  content: ""; position: absolute; right: 0; bottom: 0;
  transform: translate(-19%, -60%); width: 50px; height: 28px;
  background-color: transparent; border-radius: 8px 16px 2px 2px;
  border-right: solid 2px rgb(255,0,170); border-top: solid 2px transparent;
}
.srv-cta-text-icon { color: rgb(255,0,170); position: absolute; font-size: 11px; left: -37px; top: -38px; }
.srv-cta-icon svg { width: 20px; height: 20px; border: solid 2px transparent; display: flex; }
.srv-cta-btn:hover .srv-cta-icon svg { border: solid 2px rgba(255,0,170,0.7); }
.srv-cta-padding-left {
  position: absolute; width: 20px; height: 2px; background-color: rgb(255,0,170);
  left: 0; top: 50%; transform: translateY(-50%);
}
.srv-cta-padding-left::before, .srv-cta-padding-left::after {
  content: ""; width: 2px; height: 10px; background-color: rgb(255,0,170);
  position: absolute; top: 50%; transform: translateY(-50%);
}
.srv-cta-padding-left::before { left: 0; }
.srv-cta-padding-left::after  { right: 0; }
.srv-cta-padding-left-line {
  position: absolute; width: 30px; height: 2px; background-color: rgb(255,0,170);
  left: -24px; top: 11px; transform: rotate(-50deg);
}
.srv-cta-padding-left-line::before {
  content: ""; position: absolute; left: 0; top: 0; width: 6px; height: 6px;
  transform: translate(-50%,-50%); background-color: rgb(255,0,170); border-radius: 100%;
}
.srv-cta-padding-left-text {
  color: rgb(255,0,170); font-size: 11px; position: absolute; white-space: nowrap;
  transform: rotate(50deg); bottom: 28px; left: -55px;
}
.srv-cta-padding-right {
  position: absolute; width: 20px; height: 2px; background-color: rgb(255,0,170);
  right: 0; top: 50%; transform: translateY(-50%);
}
.srv-cta-padding-right::before, .srv-cta-padding-right::after {
  content: ""; width: 2px; height: 10px; background-color: rgb(255,0,170);
  position: absolute; top: 50%; transform: translateY(-50%);
}
.srv-cta-padding-right::before { left: 0; }
.srv-cta-padding-right::after  { right: 0; }
.srv-cta-padding-right-line {
  position: absolute; width: 18px; height: 2px; background-color: rgb(255,0,170);
  right: -14px; top: 9px; transform: rotate(50deg);
}
.srv-cta-padding-right-line::before {
  content: ""; position: absolute; left: 18px; top: 0; width: 6px; height: 6px;
  transform: translate(-50%,-50%); background-color: rgb(255,0,170); border-radius: 100%;
}
.srv-cta-padding-right-text {
  color: rgb(255,0,170); font-size: 11px; position: absolute; white-space: nowrap;
  transform: rotate(-50deg); bottom: 30px; left: 12px;
}
.srv-cta-background { position: absolute; }
.srv-cta-background::before {
  content: ""; position: absolute; right: 27px; bottom: -70px; width: 100px; height: 53px;
  background-color: transparent; border-radius: 0 0 22px 22px;
  border-right: solid 2px rgb(255,0,170); border-bottom: solid 2px transparent;
}
.srv-cta-background::after {
  content: ""; position: absolute; right: 25px; bottom: -20px;
  width: 6px; height: 6px; background-color: rgb(255,0,170); border-radius: 100%;
}
.srv-cta-background-text {
  position: absolute; color: rgb(255,0,170); font-size: 11px; bottom: -68px; left: -108px;
}
.srv-cta-border { position: absolute; right: 0; top: 0; }
.srv-cta-border::before {
  content: ""; width: 15px; height: 15px; border: solid 2px rgb(255,0,170);
  position: absolute; right: 0; top: 0; transform: translate(50%,-50%); border-radius: 100%;
}
.srv-cta-border::after {
  content: ""; width: 2px; height: 18px; background-color: rgb(255,0,170);
  position: absolute; right: -6px; top: -10px; transform: translate(50%,-50%) rotate(60deg);
}
.srv-cta-border-text {
  position: absolute; color: rgb(255,0,170); font-size: 11px;
  right: -80px; top: -28px; white-space: nowrap;
}

/* ============================================================
   PORTFOLIO PAGE
   ============================================================ */
.portfolio-page-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.result-strip {
  background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-surface-2) 100%);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 3rem 0;
  text-align: center;
  margin: 4rem 0;
}
.result-strip__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}
.result-strip__value {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 900;
  color: var(--color-accent);
  display: block;
  line-height: 1;
  margin-bottom: 0.25rem;
}
.result-strip__label {
  font-size: 0.75rem;
  color: var(--color-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
}
@media (max-width: 1024px) {
  .portfolio-page-grid { grid-template-columns: repeat(2, 1fr); }
  .result-strip__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .portfolio-page-grid { grid-template-columns: 1fr; }
  .result-strip__grid { grid-template-columns: repeat(2, 1fr); }
  .result-strip { padding: 2rem var(--space-6); }
  .result-strip__value { font-size: 2rem; }
}

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.collab-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
}
.collab-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  text-align: center;
  transition: all var(--dur-base);
}
.collab-card:hover {
  border-color: rgba(255,53,0,0.25);
  transform: translateY(-4px);
}
.collab-card__icon {
  font-size: 2rem;
  margin-bottom: 1rem;
  display: block;
}
.collab-card__title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.collab-card__text {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  line-height: 1.6;
}
@media (max-width: 768px) {
  .collab-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   PAGE TRANSITION OVERLAY
   ============================================================ */
.page-transition {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.page-transition.is-revealing {
  animation: pt-reveal 0.6s cubic-bezier(0.76, 0, 0.24, 1) 0.08s forwards;
}

.page-transition.is-covering {
  animation: pt-cover 0.5s cubic-bezier(0.76, 0, 0.24, 1) both;
  pointer-events: all;
}

@keyframes pt-reveal {
  from { transform: translateY(0); }
  to   { transform: translateY(-100%); }
}

@keyframes pt-cover {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

.page-transition__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  user-select: none;
}

.page-transition__fp {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(5rem, 22vw, 18rem);
  color: var(--color-text);
  line-height: 0.85;
  letter-spacing: -0.05em;
  display: block;
}

.page-transition__dev {
  font-family: var(--font-mono);
  font-size: clamp(0.625rem, 1.5vw, 1rem);
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.4em;
  display: block;
  margin-top: var(--space-3);
  margin-right: 0.1em;
}

.page-transition__bar {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--color-accent);
  margin-top: var(--space-4);
  transform: scaleX(0);
  transform-origin: left;
}

.page-transition.is-covering .page-transition__fp {
  animation: pt-text-rise 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.12s both;
}

.page-transition.is-covering .page-transition__dev {
  animation: pt-text-rise 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.22s both;
}

.page-transition.is-covering .page-transition__bar {
  animation: pt-bar-grow 0.45s ease 0.32s both;
}

@keyframes pt-text-rise {
  from { opacity: 0; transform: translateY(1.25rem); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pt-bar-grow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ============================================================
   CUSTOM SVG ICON SYSTEM — replaces emoji sitewide
   Monoline, currentColor, animated on hover. One cohesive set.
   ============================================================ */
.fp-icon {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
  overflow: visible;
}

/* Home service cards — accent icon, inherits card rotate-on-hover */
.service-card__icon {
  color: var(--color-accent);
  width: 34px;
  height: 34px;
}
.service-card__icon .fp-icon { width: 34px; height: 34px; }

/* Detail service cards (services page) */
.service-detail-card__icon {
  color: var(--color-accent);
  width: 46px;
  height: 46px;
  filter: drop-shadow(0 0 14px var(--color-accent-glow-s));
  transition: transform 0.5s var(--ease-out), filter 0.4s;
}
.service-detail-card__icon .fp-icon { width: 46px; height: 46px; }
.service-detail-card:hover .service-detail-card__icon {
  transform: rotate(-6deg) scale(1.08);
  filter: drop-shadow(0 0 22px var(--color-accent-glow));
}

/* About "values" cards (.card__icon box) */
.card__icon { color: var(--color-accent); }
.card__icon .fp-icon { width: 24px; height: 24px; }

/* Why-choose-me feature items */
.feature-item__icon { color: var(--color-accent); }
.feature-item__icon .fp-icon { width: 22px; height: 22px; }

/* Skills grid */
.skill-item__icon {
  color: var(--color-text-muted);
  width: 30px;
  height: 30px;
  transition: color var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
.skill-item__icon .fp-icon { width: 30px; height: 30px; }
.skill-item:hover .skill-item__icon {
  color: var(--color-accent);
  transform: translateY(-3px) scale(1.12);
}

/* Contact info items */
.contact-item__icon { color: var(--color-accent); }
.contact-item__icon .fp-icon { width: 20px; height: 20px; }

/* Collab cards */
.collab-card__icon {
  color: var(--color-accent);
  width: 30px;
  height: 30px;
  transition: transform var(--dur-base) var(--ease-out);
}
.collab-card__icon .fp-icon { width: 30px; height: 30px; }
.collab-card:hover .collab-card__icon { transform: translateY(-3px) scale(1.1); }

/* Inline icons inside footer links + small text contexts */
.fp-ico-inline {
  width: 15px;
  height: 15px;
  display: inline-block;
  vertical-align: -2px;
  margin-right: 0.45rem;
  color: var(--color-accent);
  flex-shrink: 0;
}
.footer__link { display: inline-flex; align-items: center; }

/* Footer brand social icons → real brand glyphs */
.footer__social .fp-icon { width: 17px; height: 17px; }
.footer__social svg { stroke-width: 1.7; }

/* Form-security note icon */
.form-note-ico {
  width: 14px; height: 14px;
  display: inline-block; vertical-align: -2px;
  margin-right: 0.3rem; color: var(--color-accent);
}

/* Footer "made with" heart */
.fp-heart { width: 13px; height: 13px; display:inline-block; vertical-align:-2px; color: var(--color-accent); animation: fp-heartbeat 1.6s var(--ease-in-out) infinite; }
@keyframes fp-heartbeat {
  0%, 70%, 100% { transform: scale(1); }
  35% { transform: scale(1.25); }
}

.about-portrait__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .fp-heart { animation: none; }
}

/* ============================================================
   TEXT SHUFFLE — vanilla per-letter scramble reveal
   (React-Bits "Shuffle" effect, reimplemented dependency-free)
   ============================================================ */
.shuffle-cw {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  line-height: 1;
}
.shuffle-strip {
  display: inline-flex;
  flex-wrap: nowrap;
}
.shuffle-cell {
  display: inline-block;
  flex: 0 0 auto;
  text-align: center;
  line-height: 1.1;
}

/* ============================================================
   MAMMOTH HERO — blueprint-style layered hero (vanilla)
   Stroked top line + giant scramble word + looping typewriter
   bio + bottom-centered subject cut-out + stroked name marquee.
   Keeps the FPdeveloper brand (near-black + orange + lime).
   ============================================================ */
.hero--mammoth {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  overflow: hidden;
}

/* z-20 — content */
.hero-mammoth__content {
  position: relative;
  z-index: 20;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero--mammoth .hero__badge { margin-bottom: var(--space-5); }

.hero-mammoth__title {
  font-family: var(--font-display);
  line-height: 0.9;
  margin-bottom: var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.04em;
}
.hero-mammoth__line-stroke {
  font-size: clamp(1.5rem, 6vw, 4.2rem);
  font-weight: 900;
  letter-spacing: 0.01em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.92);
  text-stroke: 1px rgba(255, 255, 255, 0.92);
}
@media (min-width: 768px) {
  .hero-mammoth__line-stroke {
    -webkit-text-stroke-width: 2px;
    text-stroke-width: 2px;
  }
}
.hero-mammoth__line-accent {
  display: inline-block;
  font-size: clamp(3.4rem, 15vw, 11rem);
  font-weight: 900;
  line-height: 0.85;
  letter-spacing: -0.015em;
  min-height: 0.85em;
  white-space: nowrap;
}

.hero-mammoth__bio {
  max-width: 640px;
  font-size: clamp(0.95rem, 1.7vw, 1.2rem);
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.6;
  margin-bottom: var(--space-7);
  white-space: pre-wrap;
  min-height: 3.2em;
}
.hero-mammoth__bio .tw-char {
  display: inline-block;
  opacity: 0;
  white-space: pre;
}
.hero-mammoth__bio.is-typing .tw-char {
  animation: tw-char-in 0.4s var(--ease-out) forwards;
}
@keyframes tw-char-in {
  from { opacity: 0; transform: translateY(0.4em); }
  to   { opacity: 1; transform: none; }
}

.hero-mammoth__actions { justify-content: center; }

/* z-10 — subject cut-out, bottom centered, feathered into the bg */
.hero-cutout {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  z-index: 10;
  height: 56%;
  display: flex;
  align-items: flex-end;
  pointer-events: none;
}
.hero-cutout__img {
  height: 100%;
  width: auto;
  max-width: 92vw;
  object-fit: contain;
  opacity: 0.9;
  border-radius: 20px;
  filter: contrast(1.12) saturate(1.04)
          drop-shadow(0 25px 50px rgba(0, 0, 0, 0.55));
  -webkit-mask-image: radial-gradient(ellipse 72% 82% at 50% 42%, #000 52%, transparent 90%);
  mask-image: radial-gradient(ellipse 72% 82% at 50% 42%, #000 52%, transparent 90%);
  transition: transform 0.7s var(--ease-out), filter 0.7s var(--ease-out);
  pointer-events: auto;
}
.hero-cutout__img:hover {
  transform: scale(1.04);
  filter: contrast(1.15) saturate(1.1)
          drop-shadow(0 30px 60px rgba(0, 0, 0, 0.6));
}
@media (min-width: 768px)  { .hero-cutout { height: 70%; } }
@media (min-width: 1200px) { .hero-cutout { height: 80%; } }

/* z-30 — ultra-large stroked name marquee at the bottom edge */
.hero-marquee {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 30;
  overflow: hidden;
  pointer-events: none;
  line-height: 0.78;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.hero-marquee__track {
  display: inline-flex;
  white-space: nowrap;
  animation: hero-marquee-scroll 30s linear infinite;
  will-change: transform;
}
.hero-marquee__track span {
  font-family: var(--font-display);
  font-size: clamp(3rem, 12vw, 10rem);
  font-weight: 900;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.13);
  text-stroke: 1px rgba(255, 255, 255, 0.13);
  letter-spacing: 0.005em;
  padding-right: 0.25em;
}
@keyframes hero-marquee-scroll {
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-marquee__track { animation: none; }
}

/* ============================================================
   MAMMOTH HERO v2 — central photo, split text (left / right)
   Headline left, bio right, subject centered & grayscale.
   ============================================================ */
.hero-split {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 2rem;
  padding: calc(var(--nav-height) + 2.5rem) clamp(1.25rem, 5vw, 4.5rem) clamp(2rem, 5vh, 3.5rem);
  pointer-events: none;
}
.hero-split > * { pointer-events: auto; }

.hero-split__left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  text-align: left;
  max-width: 56%;
}
.hero-split__left .hero-mammoth__title {
  align-items: flex-start;
  text-align: left;
  margin-bottom: 0;
}
.hero-split__left .hero-mammoth__line-accent { white-space: nowrap; }

.hero-split__cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}
.hero-marker {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-secondary);
}
.hero-view-btn { font-size: 0.8rem; }

.hero-split__right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  text-align: right;
  gap: 1.5rem;
  max-width: 32%;
  margin-left: auto;
}
.hero-split__right .hero-mammoth__bio {
  max-width: 340px;
  margin-bottom: 0;
  font-size: clamp(0.8rem, 1vw, 0.95rem);
  font-family: var(--font-mono);
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.62);
}
.hero-meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-secondary);
}

/* Central subject — taller, grayscale (monochrome look) */
.hero-cutout--center { height: 80%; }
.hero-cutout--center .hero-cutout__img {
  opacity: 0.95;
  filter: grayscale(1) contrast(1.12) brightness(0.95)
          drop-shadow(0 25px 55px rgba(0, 0, 0, 0.6));
  -webkit-mask-image: radial-gradient(ellipse 66% 80% at 50% 40%, #000 50%, transparent 88%);
  mask-image: radial-gradient(ellipse 66% 80% at 50% 40%, #000 50%, transparent 88%);
}
@media (min-width: 1200px) { .hero-cutout--center { height: 92%; } }

/* Tablet / mobile: stack the columns, photo fades behind the text */
@media (max-width: 900px) {
  /* Anchor hero text to the top — centering it in the 100svh pin left a
     big empty gap above the headline on phones (esp. in-app webviews). */
  .hero--mammoth { justify-content: flex-start; }
  .hero-split {
    position: relative;
    inset: auto;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    gap: 2rem;
    /* mammoth already pads nav-height to clear the fixed navbar — don't add it
       again here, or content sinks too far down. Just breathing room. */
    padding: 1.5rem 1.25rem 2.5rem;
  }
  .hero-split__left,
  .hero-split__right {
    max-width: 100%;
    align-items: center;
    text-align: center;
    margin: 0;
    gap: 1.25rem;
  }
  .hero-split__left { justify-content: center; gap: 1.75rem; }
  .hero-split__left .hero-mammoth__title { align-items: center; text-align: center; }
  .hero-split__cta { align-items: center; }
  .hero-split__right { justify-content: flex-start; align-items: center; }
  .hero-split__right .hero-mammoth__bio { text-align: center; margin: 0 auto; }
  .hero-cutout--center {
    height: 66%;
    opacity: 0.55;
  }
  .hero-cutout--center .hero-cutout__img {
    -webkit-mask-image: radial-gradient(ellipse 80% 75% at 50% 42%, #000 45%, transparent 85%);
    mask-image: radial-gradient(ellipse 80% 75% at 50% 42%, #000 45%, transparent 85%);
  }
}

/* Bio typewriter: break only at spaces, never mid-word */
.hero-mammoth__bio { white-space: normal; }
.tw-word { display: inline-block; white-space: nowrap; }

/* Shuffle titles: keep each word whole — break only at spaces */
.shuffle-word { display: inline-block; white-space: nowrap; }

/* Mobile: shrink the mammoth headline so the word never leaves the screen */
@media (max-width: 900px) {
  .hero-mammoth__line-stroke { font-size: clamp(1.2rem, 5.5vw, 3rem); }
  .hero-mammoth__line-accent { font-size: clamp(1.9rem, 11vw, 4.5rem); }
}

/* Match the hero's heavier display weight (900) on the main titles */
.section-title,
.cta-section__title { font-weight: 900; }

/* Light theme: make the hero text readable on the cream background */
[data-theme="light"] .hero-mammoth__bio {
  color: var(--color-text);
  /* legible on the cream bg AND over the dark portrait it overlaps */
  text-shadow: 0 0 6px #F2EDE7, 0 0 11px #F2EDE7, 0 1px 2px #F2EDE7;
}
[data-theme="light"] .hero-mammoth__line-stroke {
  -webkit-text-stroke-color: rgba(24, 16, 14, 0.9);
  text-stroke-color: rgba(24, 16, 14, 0.9);
}
[data-theme="light"] .hero-marker,
[data-theme="light"] .hero-meta { color: var(--color-accent); }

/* Light theme: hero outline button (lime is invisible on cream) */
[data-theme="light"] .hero-view-btn {
  color: var(--color-accent);
  border-color: rgba(255, 53, 0, 0.5);
}

/* Light theme: lime text is invisible on cream — use a dark readable green */
[data-theme="light"] { --color-secondary: #466100; }
[data-theme="light"] .section-label::before { color: rgba(70, 97, 0, 0.65); }
[data-theme="light"] .service-card__type   { color: rgba(70, 97, 0, 0.7); }
[data-theme="light"] .pill--lime {
  color: #466100;
  border-color: rgba(70, 97, 0, 0.5);
}

/* Fallback tone when a portfolio screenshot image is missing */
.proj-screenshot { background-color: var(--color-surface-2); }

/* ============================================================
   PORTFOLIO SCROLL-STACK (mobile only, vanilla, JS-driven)
   Cards pin & scale as you scroll; each reveals image → text,
   then the next card stacks over it. React-Bits "ScrollStack"
   reimplemented dependency-free. Activated via body.scrollstack-on.
   ============================================================ */
@media (max-width: 768px) {
  body.scrollstack-on .portfolio-page-grid {
    display: block;
    perspective: 1200px;
    padding-bottom: 48vh;   /* trailing read room (margin would collapse) */
  }
  body.scrollstack-on .portfolio-card {
    height: min(82vh, 680px);
    width: 93%;
    margin: 0 auto 30vh;
    opacity: 1 !important;
    transform-origin: top center;
    backface-visibility: hidden;
    will-change: transform;
    transition: none;                 /* JS drives the transform each frame */
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  }
  body.scrollstack-on .portfolio-card:last-of-type { margin-bottom: 0; }

  /* Scroll-driven equivalent of the desktop :hover reveal */
  body.scrollstack-on .portfolio-card__visual { height: 100%; }
  body.scrollstack-on .portfolio-card.is-open .portfolio-card__visual { height: 44%; }
  body.scrollstack-on .portfolio-card.is-open .portfolio-card__body { opacity: 1; }
  body.scrollstack-on .portfolio-card.is-open .portfolio-card__overlay { opacity: 0.5; }
  body.scrollstack-on .portfolio-card.is-open .portfolio-card__category {
    opacity: 0;
    transform: translateY(-6px);
  }
}

/* ============================================================
   PORTFOLIO — MOBILE: sticky card deck ("raccoglitore")
   Pure CSS position:sticky — cards pin and stack as you scroll,
   each peeking above the next. Robust in in-app browsers (no JS
   on scroll, no transforms, no vh math).
   ============================================================ */
@media (max-width: 768px) {
  .portfolio-page-grid { grid-template-columns: 1fr; display: block; }
  .portfolio-card {
    position: sticky;
    /* staircase fan (capped) so several card tops peek = clearly a deck */
    top: calc(70px + min(var(--si, 0), 4) * 22px);
    height: auto;
    margin: 0 0 30px;
    border-radius: 22px;
    box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.06) inset,
                0 22px 45px rgba(0, 0, 0, 0.55);
  }
  /* image + title always shown; text always visible (no hover needed) */
  .portfolio-card__visual,
  .portfolio-card:hover .portfolio-card__visual { height: 210px; }
  .portfolio-card__body { opacity: 1; overflow: visible; }
  .portfolio-card__body-inner { height: auto; }
  .portfolio-card__category,
  .portfolio-card:hover .portfolio-card__category { opacity: 1; transform: none; }
}

/* ============================================================
   HERO SCROLL-SCRUB (desktop/tablet)
   Pins the hero while scrolling; frames are drawn on <canvas>.
   Placeholder = photo + desk/monitor compositing. Swap in a real
   frame sequence by filling FRAMES in main.js.
   ============================================================ */
.hero-scrub {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;            /* JS shows it when the engine is ready */
  pointer-events: none;
  /* edge dissolve is painted on the canvas itself (see drawFrames) */
}
.hero-track { height: 160vh; }
.hero-track .hero--mammoth { position: sticky; top: 0; height: 100svh; }
/* NB: no prefers-reduced-motion override here. The scrub is scroll-driven (the
   user controls every frame), and iOS Low Power Mode forces reduced-motion —
   collapsing the pin would freeze the hero on a static photo. Pin always on. */