/* ==========================================================================
   newcodelines | style.css — newcodelines.com
   ========================================================================== */

/* 0 · Fonts
   ========================================================================== */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../assets/fonts/dm-sans.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('../assets/fonts/dm-sans-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/dm-mono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/dm-mono-500.woff2') format('woff2');
}

/* 1 · Custom Properties
   ========================================================================== */
:root {
  --cyan:    #00C2CB;
  --blue:    #0077FF;
  --dark:    #0f1e35;
  --navy:    #1A2E4A;
  --bg:      #ffffff;
  --bg-alt:  #f4f7fc;
  --text:    #1A2E4A;
  --muted:   #64748b;
  --border:  #dde5f0;

  --grad: linear-gradient(135deg, #00C2CB 0%, #0077FF 100%);

  --sp-1:  0.5rem;
  --sp-2:  1rem;
  --sp-3:  1.5rem;
  --sp-4:  2rem;
  --sp-6:  3rem;
  --sp-8:  4rem;
  --sp-12: 6rem;

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 24px;

  --sh-sm: 0 2px 12px rgba(10,22,40,.07);
  --sh-md: 0 6px 30px rgba(10,22,40,.10);
  --sh-lg: 0 12px 50px rgba(10,22,40,.15);

  --t: 220ms ease;
  --mw: 1200px;
}

/* 2 · Reset
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 100%; scroll-behavior: smooth; scroll-padding-top: 100px; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; }
input, textarea, select, button { font: inherit; }

/* 3 · Skip link
   ========================================================================== */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  background: var(--dark);
  color: #fff;
  padding: .5rem 1rem;
  border-radius: var(--r-sm);
  font-size: .875rem;
  z-index: 9999;
  transition: top var(--t);
}
.skip-link:focus { top: 1rem; }

/* 4 · Top accent bar
   ========================================================================== */
.top-bar {
  height: 4px;
  background: var(--grad);
  position: relative;
  z-index: 101;
}

/* 5 · Navigation
   ========================================================================== */
header {
  position: sticky;
  top: 0;
  z-index: 100;
}
/* Reserve nav height while header.html loads – prevents layout shift */
#site-header { min-height: 120px; }

.nav {
  position: relative;
  border-bottom: 1px solid var(--border);
}
.nav::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: -1;
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 120px;
  gap: var(--sp-4);
}
.nav__logo {
  display: flex;
  align-items: center;
  gap: .625rem;
  font-weight: 800;
  font-size: 1.125rem;
  color: var(--dark);
  letter-spacing: -.02em;
  flex-shrink: 0;
}
.nav__logo img {
  height: 100px;
  width: auto;
  flex-shrink: 0;
}
.nav__links {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
/* Brand logo inside mobile menu – hidden on desktop */
.nav__menu-brand { display: none; }
.nav__links a {
  font-size: .9375rem;
  font-weight: 500;
  color: var(--muted);
  transition: color var(--t);
  padding: .25rem 0;
  position: relative;
  white-space: nowrap;
}
.nav__links a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--grad);
  border-radius: 2px;
  transition: width var(--t);
}
.nav__links a:hover,
.nav__links a[aria-current="page"] { color: var(--dark); }
.nav__links a:hover::after,
.nav__links a[aria-current="page"]::after { width: 100%; }
.nav__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 32px;
  padding: 4px;
}
.nav__toggle span {
  display: block;
  height: 2px;
  background: var(--dark);
  border-radius: 2px;
  transition: transform var(--t), opacity var(--t);
  width: 100%;
}
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav__overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10,22,40,.45);
  z-index: 98;
}
.nav__overlay.is-open { display: block; }

/* 6 · Container
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--mw);
  margin-inline: auto;
  padding-inline: var(--sp-4);
}

/* 7 · Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1.75rem;
  border-radius: var(--r-sm);
  font-weight: 600;
  font-size: .9375rem;
  transition: all var(--t);
  white-space: nowrap;
  line-height: 1.3;
}
.btn--primary {
  background: var(--grad);
  color: #fff;
  box-shadow: 0 4px 16px rgba(0,119,255,.28);
}
.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0,119,255,.38);
}
.btn--outline {
  border: 2px solid var(--border);
  color: var(--navy);
  background: transparent;
}
.btn--outline:hover { border-color: var(--blue); color: var(--blue); }
.btn--outline-light {
  border: 2px solid rgba(255,255,255,.25);
  color: rgba(255,255,255,.85);
  background: transparent;
}
.btn--outline-light:hover { border-color: #fff; color: #fff; }
.btn--sm  { padding: .5rem 1.25rem; font-size: .875rem; }
.btn--lg  { padding: 1rem 2.25rem; font-size: 1.0625rem; }

/* 8 · Section base
   ========================================================================== */
.section { padding-block: var(--sp-12); }
.section--alt { background: var(--bg-alt); }
.section__label {
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
  margin-bottom: var(--sp-2);
}
.section__title {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 800;
  line-height: 1.2;
  color: var(--dark);
  margin-bottom: var(--sp-2);
  letter-spacing: -.02em;
}
.section__sub {
  font-size: 1.0625rem;
  color: var(--muted);
  max-width: 600px;
  line-height: 1.75;
  margin-bottom: var(--sp-6);
}
.section__header { margin-bottom: var(--sp-8); }
.section__header--center { text-align: center; }
.section__header--center .section__sub { margin-inline: auto; }
.section__actions { display: flex; justify-content: center; gap: var(--sp-2); flex-wrap: wrap; }
.cta__email {
  margin-top: var(--sp-3);
  font-size: .9375rem;
  color: var(--muted);
  text-align: center;
}
.cta__email a {
  color: var(--blue);
  font-weight: 500;
}
.cta__email a:hover { text-decoration: underline; }

/* 9 · Hero
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: calc(var(--sp-12) * 1.2);
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(26,46,74,.1) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}
.hero::after {
  content: '';
  position: absolute;
  top: -180px;
  right: -120px;
  width: 640px;
  height: 640px;
  background: radial-gradient(circle, rgba(0,194,203,.07) 0%, transparent 70%);
  pointer-events: none;
}
.hero__glow-bl {
  position: absolute;
  bottom: -120px;
  left: -80px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(0,119,255,.05) 0%, transparent 70%);
  pointer-events: none;
}
.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-8);
  align-items: center;
}
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(0,194,203,.08);
  border: 1px solid rgba(0,194,203,.22);
  border-radius: 100px;
  padding: .375rem 1rem;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--cyan);
  margin-bottom: var(--sp-3);
}
.hero__eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan);
  animation: pulse 2s ease-in-out infinite;
}
.hero__title {
  font-size: clamp(1.875rem, 5vw, 3.75rem);
  font-weight: 900;
  line-height: 1.1;
  color: var(--dark);
  margin-bottom: var(--sp-3);
  letter-spacing: -.025em;
}
.hero__title .grad-text {
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero__sub {
  font-size: 1.125rem;
  color: var(--muted);
  max-width: 500px;
  margin-bottom: var(--sp-4);
  line-height: 1.75;
}
.hero__actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.hero__visual { display: flex; justify-content: center; align-items: center; position: relative; }

/* 10 · Code card
   ========================================================================== */
.code-card {
  position: relative;
  background: var(--dark);
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 32px 64px rgba(10,22,40,.2), 0 0 0 1px rgba(255,255,255,.06);
  font-family: 'DM Mono', monospace;
  font-size: .82rem;
  line-height: 1.8;
  min-width: 340px;
  animation: float 6s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-12px); }
}
.code-card .dot-row { display: flex; gap: 6px; margin-bottom: 18px; }
.dot        { width: 11px; height: 11px; border-radius: 50%; }
.dot.red    { background: #FF5F57; }
.dot.yellow { background: #FEBC2E; }
.dot.green  { background: #28C840; }
.c-comment { color: #4E6B8A; }
.c-keyword { color: #00C2CB; }
.c-fn      { color: #7EC8F0; }
.c-string  { color: #A8D8A8; }
.c-var     { color: #E0E0E0; }
.c-punct   { color: #6B7E95; }

/* 11 · Stats bar
   ========================================================================== */
.stats {
  background: var(--dark);
  padding-block: var(--sp-6);
}
.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
  text-align: center;
}
.stats__num {
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  font-weight: 900;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  margin-bottom: .5rem;
}
.stats__label { font-size: .875rem; color: rgba(255,255,255,.5); }

/* 12 · Service cards
   ========================================================================== */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-6) var(--sp-8);
}
.card {
  display: flex;
  gap: var(--sp-3);
  padding: 0;
}
.card__body {
  flex: 1;
}
.card__icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: var(--r-sm);
  background: linear-gradient(135deg, rgba(0,194,203,.1), rgba(0,119,255,.12));
  display: flex;
  align-items: center;
  justify-content: center;
}
.card__icon svg {
  width: 26px;
  height: 26px;
  stroke: var(--blue);
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.card__title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: .5rem;
}
.card__text {
  font-size: .9375rem;
  color: var(--muted);
  line-height: 1.65;
}
.card__link {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  margin-top: var(--sp-2);
  font-size: .875rem;
  font-weight: 600;
  color: var(--blue);
  transition: gap var(--t);
}
.card__link svg {
  width: 14px;
  height: 14px;
  stroke: var(--blue);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.card__link:hover { gap: .625rem; }

/* 13 · Features / USPs
   ========================================================================== */
.about__intro {
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--muted);
  max-width: 780px;
  margin-inline: auto;
  margin-bottom: var(--sp-8);
  text-align: center;
}
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--sp-4);
}
.feature { display: flex; gap: var(--sp-2); align-items: flex-start; }
.feature__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  background: var(--grad);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.feature__icon svg {
  width: 20px;
  height: 20px;
  stroke: #fff;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.feature__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: .25rem;
}
.feature__text { font-size: .9rem; color: var(--muted); line-height: 1.65; }

/* 14 · Project cards
   ========================================================================== */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: var(--sp-3);
}
.project-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: all var(--t);
}
.project-card:hover {
  border-color: transparent;
  box-shadow: var(--sh-md);
  transform: translateY(-3px);
}
.project-card__visual {
  height: 200px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.project-card__visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.18) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
}
.project-card__visual svg {
  position: relative;
  z-index: 1;
  width: 72px;
  height: 72px;
  stroke: rgba(255,255,255,.9);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.project-card__body { padding: var(--sp-3) var(--sp-3) var(--sp-4); }
.tags { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: var(--sp-2); }
.tag {
  font-size: .75rem;
  font-weight: 600;
  padding: .25rem .625rem;
  border-radius: 100px;
  background: rgba(0,119,255,.08);
  color: var(--blue);
}
.project-card__title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: .375rem;
}
.project-card__text {
  font-size: .9rem;
  color: var(--muted);
  line-height: 1.65;
}

/* Visual gradients for project cards */
.vis-1 { background: linear-gradient(135deg, #0A1628, #1A2E4A); }
.vis-2 { background: linear-gradient(135deg, #00C2CB, #0077FF); }
.vis-3 { background: linear-gradient(135deg, #0077FF, #0A1628); }
.vis-4 { background: linear-gradient(135deg, #1A2E4A, #00C2CB); }
.vis-5 { background: linear-gradient(135deg, #0A1628, #0077FF); }
.vis-6 { background: linear-gradient(135deg, #00C2CB, #1A2E4A); }

/* 15 · CTA section
   ========================================================================== */
.cta-section {
  background: var(--bg-alt);
  padding-block: var(--sp-12);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-section::before {
  content: '';
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 450px;
  background: radial-gradient(ellipse, rgba(0,194,203,.1) 0%, transparent 70%);
  pointer-events: none;
}
.cta-section__label {
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cyan);
  opacity: .8;
  margin-bottom: var(--sp-2);
  position: relative;
}
.cta-section__title {
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  font-weight: 800;
  color: #fff;
  margin-bottom: var(--sp-2);
  position: relative;
  letter-spacing: -.02em;
}
.cta-section__sub {
  font-size: 1.0625rem;
  color: rgba(255,255,255,.6);
  max-width: 520px;
  margin: 0 auto var(--sp-4);
  position: relative;
  line-height: 1.75;
}
.cta-section__actions {
  display: flex;
  gap: var(--sp-2);
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
}

/* 16 · Page hero (inner pages)
   ========================================================================== */
.page-hero {
  background: var(--bg-alt);
  padding-block: var(--sp-8) var(--sp-6);
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(26,46,74,.08) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}
.page-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-8);
  align-items: center;
}
.page-hero__visual {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.page-hero__visual .code-card {
  min-width: 280px;
  max-width: 420px;
  width: 100%;
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}
.c-cursor {
  display: inline-block;
  width: 2px;
  height: .9em;
  background: #00C2CB;
  vertical-align: text-bottom;
  margin-left: 2px;
  animation: blink 1s step-end infinite;
}
.page-hero__label {
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: var(--sp-2);
}
.page-hero__title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 900;
  color: var(--dark);
  letter-spacing: -.025em;
  margin-bottom: var(--sp-2);
}
.page-hero__sub {
  font-size: 1.0625rem;
  color: var(--muted);
  max-width: 580px;
  line-height: 1.75;
}

/* 17 · Process steps
   ========================================================================== */
.process {
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-3);
}
.process__step {
  counter-increment: step;
  padding: var(--sp-4);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: all var(--t);
}
.process__step:hover {
  border-color: transparent;
  box-shadow: var(--sh-sm);
}
.process__step::before {
  content: counter(step, decimal-leading-zero);
  font-size: 2rem;
  font-weight: 900;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: block;
  margin-bottom: var(--sp-2);
  line-height: 1;
}
.process__step-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: .375rem;
}
.process__step-text { font-size: .9rem; color: var(--muted); line-height: 1.6; }

/* 18 · Team & Values
   ========================================================================== */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-4);
}
.team-card { text-align: center; padding: var(--sp-4) var(--sp-2); }
.team-card__avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--grad);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--sp-2);
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.02em;
}
.team-card__name {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: .25rem;
}
.team-card__role { font-size: .875rem; color: var(--muted); margin-bottom: var(--sp-2); }
.team-card__bio { font-size: .875rem; color: var(--muted); line-height: 1.6; }

.values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--sp-3);
}
.value-card {
  padding: var(--sp-4);
  border-radius: var(--r-md);
  background: var(--bg);
  border: 1px solid var(--border);
}
.value-card__num {
  font-size: .75rem;
  font-weight: 700;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: .08em;
  margin-bottom: .75rem;
}
.value-card__title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: .5rem;
}
.value-card__text { font-size: .9rem; color: var(--muted); line-height: 1.65; }

/* 19 · Contact / Form
   ========================================================================== */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-8);
  align-items: start;
}
.form-group { display: flex; flex-direction: column; gap: .375rem; margin-bottom: var(--sp-3); }
label { font-size: .875rem; font-weight: 600; color: var(--navy); }
.required { color: var(--blue); }
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
  padding: .75rem 1rem;
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg);
  color: var(--text);
  font-size: .9375rem;
  transition: border-color var(--t), box-shadow var(--t);
  outline: none;
  width: 100%;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0,119,255,.12);
}
textarea { resize: vertical; min-height: 140px; }
.contact-info { display: flex; flex-direction: column; gap: var(--sp-3); }
.contact-info__item { display: flex; gap: var(--sp-2); align-items: flex-start; }
.contact-info__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm);
  background: linear-gradient(135deg, rgba(0,194,203,.1), rgba(0,119,255,.12));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.contact-info__icon svg {
  width: 22px;
  height: 22px;
  stroke: var(--blue);
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.contact-info__label {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.contact-info__value {
  font-size: .9375rem;
  color: var(--dark);
  font-weight: 500;
}
.contact-info__value a { color: var(--blue); }
.contact-info__value a:hover { text-decoration: underline; }

/* 20 · Footer
   ========================================================================== */
.footer {
  background: var(--dark);
  color: rgba(255,255,255,.65);
  padding-top: var(--sp-6);
  padding-bottom: var(--sp-2);
}
.footer__logo img {
  height: 56px;
  width: auto;
  flex-shrink: 0;
  filter: brightness(0) invert(1);
  opacity: .8;
}
.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  font-size: .8125rem;
  color: rgba(255,255,255,.3);
}
.footer__bottom-links { display: flex; gap: var(--sp-2); }
.footer__bottom a { color: rgba(255,255,255,.45); transition: color var(--t); }
.footer__bottom a:hover { color: rgba(255,255,255,.8); }

/* 21 · Legal pages
   ========================================================================== */
.legal {
  max-width: 760px;
  margin-inline: auto;
  padding-block: var(--sp-12);
}
.legal h1 {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 800;
  color: var(--dark);
  margin-bottom: var(--sp-4);
  letter-spacing: -.02em;
}
.legal h2 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--dark);
  margin-top: var(--sp-4);
  margin-bottom: var(--sp-2);
}
.legal h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--dark);
  margin-top: var(--sp-3);
  margin-bottom: .75rem;
}
.legal p { font-size: .9375rem; color: var(--muted); line-height: 1.75; margin-bottom: .75rem; }
.legal ul { margin-left: var(--sp-3); margin-bottom: .75rem; }
.legal li { list-style: disc; font-size: .9375rem; color: var(--muted); line-height: 1.75; margin-bottom: .25rem; }
.legal a { color: var(--blue); }
.legal a:hover { text-decoration: underline; }

/* 22 · Utilities
   ========================================================================== */
.grad-text {
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.text-center { text-align: center; }
.mt-2 { margin-top: var(--sp-2); }
.mt-4 { margin-top: var(--sp-4); }

/* 23 · Animations
   ========================================================================== */
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .6; transform: scale(.85); }
}

@media (prefers-reduced-motion: no-preference) {

  /* Scroll fade-up */
  .fade-up {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .55s ease, transform .55s ease;
  }
  .fade-up.visible { opacity: 1; transform: none; }
  .fade-up:nth-child(2) { transition-delay: .08s; }
  .fade-up:nth-child(3) { transition-delay: .16s; }
  .fade-up:nth-child(4) { transition-delay: .24s; }

  /* Hero entrance – staggered on page load */
  @keyframes hero-in {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
  }
  .hero__eyebrow { animation: hero-in .5s ease both .05s; }
  .hero__title   { animation: hero-in .5s ease both .2s; }
  .hero__sub     { animation: hero-in .5s ease both .35s; }
  .hero__actions { animation: hero-in .5s ease both .5s; }

  /* Top bar shimmer */
  @keyframes bar-shift {
    from { background-position: 0 center; }
    to   { background-position: 200% center; }
  }
  .top-bar {
    background: linear-gradient(90deg, var(--cyan), var(--blue), var(--cyan));
    background-size: 200% auto;
    animation: bar-shift 3s linear infinite;
  }


  /* Feature icon – scale on hover */
  .feature__icon svg { transition: transform .25s ease; }
  .feature:hover .feature__icon svg { transform: scale(1.15); }

  /* Process steps – subtle lift */
  .process__step { transition: transform .2s ease, box-shadow .2s ease; }
  .process__step:hover { transform: translateY(-4px); }

  /* Logo hover – playful bounce */
  @keyframes logo-bounce {
    0%   { transform: scale(1)    translateY(0); }
    25%  { transform: scale(1.05) translateY(-4px); }
    55%  { transform: scale(0.97) translateY(2px); }
    75%  { transform: scale(1.02) translateY(-2px); }
    100% { transform: scale(1)    translateY(0); }
  }
  .nav__logo:hover img { animation: logo-bounce .55s ease forwards; }

}

@media (prefers-reduced-motion: reduce) {
  .fade-up { opacity: 1; transform: none; }
  .nav__links li { opacity: 1; transform: none; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* 24 · Responsive
   ========================================================================== */

/* ── 1024px – Tablet ─────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .hero__inner          { grid-template-columns: 1fr; }
  .hero__visual         { display: none; }
  .contact-grid         { grid-template-columns: 1fr; gap: var(--sp-4); }
  .stats__grid          { grid-template-columns: repeat(2, 1fr); }
  .project-card__visual { height: 160px; }
}

/* ── 768px – Mobile ──────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .page-hero__inner  { grid-template-columns: 1fr; }
  .page-hero__visual { display: none; }
  .responsive-2col { grid-template-columns: 1fr !important; }
  .cards-grid { grid-template-columns: 1fr; }
  .responsive-2col > *:last-child { display: none; }
  :root {
    --sp-12: 4rem;
    --sp-8:  3rem;
    --sp-6:  2.5rem;
  }

  /* Container */
  .container { padding-inline: var(--sp-3); }

  /* Navigation toggle – must sit above the fixed nav__links (z-index 99) */
  .nav__toggle {
    display: flex;
    width: 44px;
    padding: 8px;
    position: relative;
    z-index: 100;
  }

  /* Dropdown panel below header */
  .nav__links {
    display: none;
    position: fixed;
    top: 61px;
    left: 0;
    right: 0;
    max-height: calc(100svh - 61px);
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 0;
    padding: var(--sp-4) var(--sp-4) var(--sp-6);
    background: var(--dark);
    border-radius: 0 0 var(--r-lg) var(--r-lg);
    box-shadow: var(--sh-lg);
    z-index: 99;
    overflow-y: auto;
  }

  /* Slide down from header */
  @keyframes menu-in {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: none; }
  }
  .nav__links.is-open {
    display: flex;
    animation: menu-in .3s cubic-bezier(.16, 1, .3, 1) forwards;
  }

  /* Menu links – large & bold */
  .nav__links li {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .3s ease, transform .3s ease;
    text-align: center;
    width: 100%;
  }
  .nav__links.is-open li:nth-child(1) { opacity: 1; transform: none; transition-delay: .05s; }
  .nav__links.is-open li:nth-child(2) { opacity: 1; transform: none; transition-delay: .10s; }
  .nav__links.is-open li:nth-child(3) { opacity: 1; transform: none; transition-delay: .15s; }
  .nav__links.is-open li:nth-child(4) { opacity: 1; transform: none; transition-delay: .20s; }

  .nav__links a {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: rgba(255,255,255,.85);
    display: block;
    padding: .625rem var(--sp-2);
    transition: color .2s ease;
    width: 100%;
    text-align: center;
  }
  .nav__links a::after { display: none; }
  .nav__links a:hover  { color: #fff; }
  .nav__links a[aria-current="page"] {
    background: var(--grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  /* Hamburger lines hell auf dunklem Hintergrund */
  .nav__toggle[aria-expanded="true"] span { background: #fff; }


  /* Hero */
  .hero__title { font-size: clamp(1.875rem, 7vw, 2.75rem); }
  .hero__sub   { font-size: 1rem; max-width: 100%; }

  /* Project cards */
  .project-card__visual { height: 140px; }

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

/* ── 480px – Small Mobile ────────────────────────────────────────────────── */
@media (max-width: 480px) {
  :root {
    --sp-12: 3rem;
    --sp-8:  2.5rem;
    --sp-6:  2rem;
    --sp-4:  1.5rem;
  }

  /* Container */
  .container { padding-inline: var(--sp-2); }

  /* Section */
  .section        { padding-block: var(--sp-6); }
  .section__header { margin-bottom: var(--sp-4); }

  /* Navigation – full-width slide-in on small phones */
  .nav__inner   { height: 90px; }
  .nav__logo    { font-size: 1rem; }
  .nav__logo img { height: 76px; }
  .nav__links a { font-size: clamp(1.75rem, 9vw, 2.25rem); }

  /* Hero */
  .hero { padding-block: calc(var(--sp-8) * 0.9); }
  .hero__title   { font-size: clamp(1.625rem, 8vw, 2.25rem); }
  .hero__eyebrow { font-size: .75rem; padding: .3rem .875rem; }
  .hero__sub     { font-size: .9375rem; }
  .hero__actions {
    flex-direction: column;
    align-items: stretch;
    gap: .625rem;
  }
  .hero__actions .btn { width: 100%; justify-content: center; }

  /* Stats */
  .stats__grid { gap: var(--sp-2); }

  /* Grids */
  .cards-grid    { gap: var(--sp-2); }
  .features      { gap: var(--sp-3); }
  .projects-grid { grid-template-columns: 1fr; gap: var(--sp-2); }
  .process       { gap: var(--sp-2); }
  .team-grid     { gap: var(--sp-2); }
  .values-grid   { gap: var(--sp-2); }

  /* Cards */
  .project-card__visual { height: 120px; }
  .project-card__body   { padding: var(--sp-2) var(--sp-2) var(--sp-3); }
  .value-card           { padding: var(--sp-3); }

  /* CTA */
  .cta-section__actions {
    flex-direction: column;
    align-items: stretch;
  }
  .cta-section__actions .btn { width: 100%; justify-content: center; }

  /* Forms – bigger touch targets */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  textarea,
  select {
    padding: .875rem 1rem;
    font-size: 1rem;
  }

  /* Footer */
  .footer__col-title { font-size: .875rem; }
  .footer__links a   { font-size: .9375rem; }
}

/* 25 · Terminal trigger button (hero)
   ========================================================================== */
.code-card__term-btn {
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-2);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-sm);
  color: rgba(255,255,255,.45);
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
  z-index: 2;
}
.code-card__term-btn:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.25);
  color: #fff;
}

/* 26 · Easter-egg terminal
   ========================================================================== */
.e-term {
  position: fixed;
  bottom: var(--sp-6);
  right: var(--sp-6);
  width: min(480px, calc(100vw - var(--sp-4)));
  background: #0d1117;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-md);
  box-shadow: 0 24px 64px rgba(0,0,0,.65);
  font-family: 'DM Mono', 'Courier New', monospace;
  font-size: .85rem;
  z-index: 9999;
  overflow: hidden;
  animation: e-term-in .25s cubic-bezier(.16,1,.3,1);
}

@keyframes e-term-in {
  from { opacity: 0; transform: translateY(20px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

/* title bar */
.e-term__bar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: .5rem var(--sp-3);
  background: rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(255,255,255,.07);
  user-select: none;
}
.e-term__dots { display: flex; gap: 6px; }
.e-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: none;
  cursor: default;
  padding: 0;
  line-height: 12px;
  font-size: 0;
  transition: filter .15s;
}
.e-dot--close {
  background: #ff5f57;
  cursor: pointer;
  color: #6e0000;
  font-size: 0;
}
.e-dot--close:hover { filter: brightness(1.15); }
.e-dot--min { background: #febc2e; }
.e-dot--max { background: #28c840; }
.e-term__title {
  flex: 1;
  text-align: center;
  font-size: .72rem;
  color: rgba(255,255,255,.35);
  letter-spacing: .04em;
}

/* output */
.e-term__body {
  padding: var(--sp-3) var(--sp-4);
  min-height: 100px;
  max-height: 260px;
  overflow-y: auto;
  line-height: 1.75;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.1) transparent;
}
.e-term__line             { color: rgba(255,255,255,.82); margin: 0; }
.e-term__line--cmd        { color: #79c0ff; }
.e-term__line--err        { color: #ff7b7b; }
.e-term__line--ok         { color: #56d364; }
.e-term__line--dim        { color: rgba(255,255,255,.38); }
.e-term__line--pwd        { color: rgba(255,255,255,.55); }

/* CTA link inside terminal */
.e-term__cta {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: .4rem;
  padding: .3rem .9rem;
  background: var(--grad);
  color: #fff !important;
  border-radius: var(--r-sm);
  text-decoration: none;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .01em;
  transition: opacity .2s;
}
.e-term__cta:hover { opacity: .85; }

/* input row */
.e-term__input-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: .5rem var(--sp-4);
  border-top: 1px solid rgba(255,255,255,.06);
}
.e-term__prompt { color: #56d364; flex-shrink: 0; }
#e-term-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: rgba(255,255,255,.88);
  font-family: inherit;
  font-size: inherit;
  caret-color: #79c0ff;
}
#e-term-input::placeholder { color: rgba(255,255,255,.2); }

@media (max-width: 480px) {
  .e-term {
    bottom: var(--sp-3);
    right: var(--sp-2);
    left: var(--sp-2);
    width: auto;
  }
}