/* ============================================
   PROCYON RESEARCH - Landing Page Styles

   Contents:
     1. Tokens        - fonts, custom properties
     2. Base          - reset, root elements
     3. Backgrounds   - gradient blobs, star-field, grid overlay
     4. Reveal        - scroll-triggered entrance animation
     5. Nav           - fixed header, mobile menu
     6. Hero          - title lockup, buttons, scroll chevron
     7. Sections      - shared section scaffold and headings
     8. Services      - card grid, glass card
     9. Approach      - principle grid
    10. About         - prose block
    11. Contact       - contact tile grid
    12. Footer        - footer bar, social icons
   ============================================ */

/* ============================================
   1. TOKENS
   ============================================ */

/* --- Font Faces --- */
@font-face {
  font-family: 'Viper Display';
  src: url('fonts/ViperDisplay-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Viper Display';
  src: url('fonts/ViperDisplay-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* --- Custom Properties --- */
:root {
  --bg-deep: #0A0D12;
  --bg-primary: #0D1218;
  --bg-elevated: #121922;

  --cyan: #53D7EE;
  --cyan-dim: #35A8C2;
  --blue: #4C8DF5;
  --steel: #8CA3B8;
  --ice: #D7EEF7;

  --line: rgba(210, 228, 240, 0.10);
  --line-strong: rgba(210, 228, 240, 0.22);

  --glass-bg: rgba(15, 21, 28, 0.35);
  --glass-blur: 22px;

  --text-primary: #E9EFF4;
  --text-muted: rgba(233, 239, 244, 0.62);
  --text-subtle: rgba(233, 239, 244, 0.36);

  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, Consolas, 'Liberation Mono', monospace;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-display: 'Viper Display', Georgia, serif;

  --space-xs: clamp(0.5rem, 1vw, 0.75rem);
  --space-sm: clamp(0.75rem, 2vw, 1.25rem);
  --space-md: clamp(1.5rem, 4vw, 3rem);
  --space-lg: clamp(3rem, 8vw, 6rem);
  --space-xl: clamp(4rem, 10vw, 8rem);

  --radius-sm: 2px;
  --radius-md: 4px;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 72px;
  -webkit-text-size-adjust: 100%;
}

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

img, svg { display: block; }
a { color: inherit; text-decoration: none; }
button { border: none; background: none; cursor: pointer; font: inherit; color: inherit; }

::selection {
  background: rgba(83, 215, 238, 0.28);
}

/* ============================================
   3. BACKGROUNDS
   ============================================ */

/* --- Animated Gradient Blobs --- */
.gradient-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  /* Group opacity, not per-blob: where blurred blobs overlap, the top
     one must occlude the lower one before the fade is applied, or the
     overlap doubles up and brightens. */
  opacity: 0.45;
  pointer-events: none;
}

.gradient-bg__blob {
  position: absolute;
  width: 50vmax;
  height: 50vmax;
  border-radius: 50%;
  /* Blur each blob, not the parent: a parent-level filter has to
     re-blur the whole viewport every frame the blobs drift, while a
     per-blob filter blurs a static disc once, caches it, and lets the
     drift animation run entirely on the compositor. */
  filter: blur(120px);
}

.gradient-bg__blob--cyan {
  background: #0E96B5;
  top: -15%;
  left: -10%;
  animation: blob-drift-1 18s ease-in-out infinite alternate;
}

.gradient-bg__blob--blue {
  background: #2563EB;
  bottom: -20%;
  right: -10%;
  animation: blob-drift-2 22s ease-in-out infinite alternate;
}

.gradient-bg__blob--deep {
  background: #1E3A8A;
  top: 40%;
  right: -15%;
  animation: blob-drift-3 20s ease-in-out infinite alternate;
}

.gradient-bg__blob--slate {
  background: #58677A;
  bottom: 10%;
  left: 20%;
  animation: blob-drift-4 24s ease-in-out infinite alternate;
}

@keyframes blob-drift-1 {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(30vw, 20vh) scale(1.15); }
  66%  { transform: translate(10vw, 50vh) scale(0.9); }
  100% { transform: translate(40vw, 10vh) scale(1.05); }
}

@keyframes blob-drift-2 {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(-25vw, -30vh) scale(1.1); }
  66%  { transform: translate(-40vw, -10vh) scale(0.95); }
  100% { transform: translate(-15vw, -40vh) scale(1.08); }
}

@keyframes blob-drift-3 {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(-35vw, 15vh) scale(1.12); }
  66%  { transform: translate(-15vw, -25vh) scale(0.88); }
  100% { transform: translate(-30vw, 30vh) scale(1.05); }
}

@keyframes blob-drift-4 {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(20vw, -35vh) scale(0.92); }
  66%  { transform: translate(35vw, -15vh) scale(1.1); }
  100% { transform: translate(10vw, -45vh) scale(1.02); }
}

@media (prefers-reduced-motion: reduce) {
  .gradient-bg { display: none; }
}

/* --- Procyon Binary System (fixed background layer) --- */
.star-field {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.9;
  /* The canvas backing store only ever grows (cheap live resizes), so
     the element can be larger than the viewport; clip the excess. */
  overflow: hidden;
}

.star-field canvas {
  display: block;
  /* Size is set inline by procyon-hero.js to buffer/dpr, keeping
     canvas pixels 1:1 with device pixels. */
}

/* --- Grid Overlay --- */
/* Besides the grid lines, this layer carries the viewport-edge fade
   for the gradient blobs underneath it. The parent-level blur that the
   blobs used to share clipped them at the viewport before blurring, so
   they faded out across roughly two blur radii at every screen edge;
   these background-color gradients reproduce that falloff (Gaussian
   CDF of the 120px blur against the clip edge). Living here instead of
   on its own layer keeps the compositor's per-frame layer count down. */
.grid-overlay {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(148, 209, 227, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 209, 227, 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(10, 13, 18, 0.5) 0, rgba(10, 13, 18, 0.309) 60px, rgba(10, 13, 18, 0.159) 120px, rgba(10, 13, 18, 0.067) 180px, rgba(10, 13, 18, 0.023) 240px, rgba(10, 13, 18, 0.006) 300px, rgba(10, 13, 18, 0) 360px),
    linear-gradient(to top, rgba(10, 13, 18, 0.5) 0, rgba(10, 13, 18, 0.309) 60px, rgba(10, 13, 18, 0.159) 120px, rgba(10, 13, 18, 0.067) 180px, rgba(10, 13, 18, 0.023) 240px, rgba(10, 13, 18, 0.006) 300px, rgba(10, 13, 18, 0) 360px),
    linear-gradient(to right, rgba(10, 13, 18, 0.5) 0, rgba(10, 13, 18, 0.309) 60px, rgba(10, 13, 18, 0.159) 120px, rgba(10, 13, 18, 0.067) 180px, rgba(10, 13, 18, 0.023) 240px, rgba(10, 13, 18, 0.006) 300px, rgba(10, 13, 18, 0) 360px),
    linear-gradient(to left, rgba(10, 13, 18, 0.5) 0, rgba(10, 13, 18, 0.309) 60px, rgba(10, 13, 18, 0.159) 120px, rgba(10, 13, 18, 0.067) 180px, rgba(10, 13, 18, 0.023) 240px, rgba(10, 13, 18, 0.006) 300px, rgba(10, 13, 18, 0) 360px);
  background-size: 88px 88px, 88px 88px, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat;
}

/* ============================================
   4. REVEAL
   ============================================ */
/* Reveals are one-shot keyframe animations, not transitions: a
   transition here would clash with the components' own hover
   transitions (equal specificity, last one wins), which used to break
   the card fade and leave stagger delays polluting hover forever.
   Hidden only under .js (set inline in <head>), so a visitor without
   JS still sees everything. */
.js [data-animate] {
  opacity: 0;
}

.js [data-animate].visible {
  opacity: 1;
  animation: reveal 0.45s ease backwards;
}

@keyframes reveal {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
}

/* Staggered reveals for the three card grids. animation-delay only
   affects the reveal; hover transitions stay instant. */
:is(.services__grid, .approach__grid, .contact__grid) [data-animate]:nth-child(2) { animation-delay: 0.05s; }
:is(.services__grid, .approach__grid, .contact__grid) [data-animate]:nth-child(3) { animation-delay: 0.1s; }
:is(.services__grid, .approach__grid, .contact__grid) [data-animate]:nth-child(4) { animation-delay: 0.15s; }
.services__grid [data-animate]:nth-child(5) { animation-delay: 0.2s; }
.services__grid [data-animate]:nth-child(6) { animation-delay: 0.25s; }
.services__grid [data-animate]:nth-child(7) { animation-delay: 0.3s; }

@media (prefers-reduced-motion: reduce) {
  .js [data-animate],
  .js [data-animate].visible {
    opacity: 1;
    animation: none;
  }
}

/* ============================================
   5. NAV
   ============================================ */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: 0 var(--space-md);
  height: 56px;
  background: rgba(10, 13, 18, 0.6);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--text-primary);
}

.nav__brand span {
  font-weight: 400;
  color: var(--cyan);
  margin-left: -0.25em;
}

.nav__mark {
  width: 14px;
  height: 14px;
  color: var(--cyan);
}

.nav__links {
  display: flex;
  gap: clamp(0.9rem, 2.5vw, 2rem);
}

.nav__links a {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color 0.25s ease;
}

.nav__links a:hover {
  color: var(--cyan);
}

.nav__toggle {
  display: none;
  position: relative;
  z-index: 12;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  margin-right: -10px;
  background: none;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.nav__toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--text-primary);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

@media (max-width: 640px) {
  .nav__toggle { display: flex; }

  .nav__links {
    display: none;
    position: absolute;
    top: 56px;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    padding: 0.5rem var(--space-md) 1rem;
    background: rgba(10, 13, 18, 0.92);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border-bottom: 1px solid var(--line);
  }

  .nav--open .nav__links { display: flex; }

  .nav__links a { padding: 0.7rem 0; font-size: 0.8rem; }

  .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); }
}

/* ============================================
   6. HERO
   ============================================ */
.hero {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding-top: 56px;
}

.hero__content {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: var(--space-md);
  max-width: 900px;
  width: 100%;
}


.hero__kicker {
  font-family: var(--font-mono);
  font-size: clamp(0.7rem, 1.5vw, 0.8rem);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: var(--space-sm);
}

.hero__title {
  display: inline-flex;
  flex-direction: column;
  position: relative;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.05;
  margin-bottom: var(--space-sm);
}

/* The glow is a static gradient halo, not a drop-shadow filter: WebKit
   rasterizes filters on the main thread over the title's whole filter
   region, and re-rasterizes when the reveal animation ends, freezing
   rendering (canvas, scroll, reveals) for time proportional to device
   pixels - measured 0.3s at 1440x900 up to 2.1s at 5K. */
.hero__title::before {
  content: "";
  position: absolute;
  inset: -30% -20%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 34% at 50% 42%, rgba(83, 215, 238, 0.13), transparent 70%),
    radial-gradient(ellipse 55% 22% at 50% 72%, rgba(215, 238, 247, 0.05), transparent 70%),
    radial-gradient(ellipse 85% 80% at 50% 48%, rgba(76, 141, 245, 0.10), transparent 75%);
}

.hero__title-main {
  font-size: clamp(2.6rem, 9.5vw, 6.5rem);
  /* Trim the trailing letter-space so the box matches the ink and
     RESEARCH below it spans it symmetrically (tuned for Viper Display). */
  margin-right: -0.03em;
  background: linear-gradient(135deg, #F0F6FA 25%, #BFE9F5 60%, #56C4DF);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* RESEARCH is one letter-per-span, spread to the width of PROCYON.
   letter-spacing is zeroed so justify-content alone sets the gaps and
   there is no trailing space skewing the right edge. */
.hero__title-sub {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-size: clamp(0.95rem, 3.2vw, 2.1rem);
  font-weight: 400;
  letter-spacing: 0;
  margin: 0.15em auto 0;
  color: var(--ice);
  opacity: 0.85;
}

.hero__tagline {
  font-size: clamp(1rem, 2.5vw, 1.2rem);
  color: var(--text-muted);
  max-width: 640px;
  margin: 0 auto var(--space-md);
  line-height: 1.6;
}

/* --- Buttons --- */
.hero__actions {
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

/* Both hero buttons share one width so they read as a matched pair.
   The 16rem basis also makes them stack once the row is too narrow to
   hold two at full label width, instead of squeezing the text. */
.hero__actions .btn {
  flex: 1 1 16rem;
  max-width: 16rem;
  text-align: center;
}

.btn {
  display: inline-block;
  white-space: nowrap;
  padding: 0.9rem clamp(1.5rem, 4vw, 2.5rem);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid transparent;
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.btn--primary {
  background: rgba(83, 215, 238, 0.5);
  border-color: rgba(154, 233, 247, 0.55);
  color: #EAFBFF;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 4px 25px rgba(83, 215, 238, 0.18);
}

.btn--primary:hover {
  background: rgba(105, 224, 244, 0.62);
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 6px 35px rgba(83, 215, 238, 0.3);
}

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

.btn--ghost {
  background: rgba(140, 163, 184, 0.16);
  border-color: var(--line-strong);
  color: var(--text-primary);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.btn--ghost:hover {
  background: rgba(140, 163, 184, 0.24);
  border-color: var(--cyan);
  color: var(--cyan);
  transform: translateY(-2px);
}

/* --- Scroll Chevron --- */
.hero__scroll {
  margin-top: var(--space-md);
  display: flex;
  justify-content: center;
}

.scroll-chevron {
  width: 32px;
  height: 32px;
  color: var(--text-subtle);
  animation: bounce 2s ease-in-out infinite;
}

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

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

/* ============================================
   7. SECTIONS
   ============================================ */
.section {
  padding: var(--space-xl) var(--space-md);
  position: relative;
  z-index: 1;
}

.section__inner {
  max-width: 1200px;
  margin: 0 auto;
}

.section-head {
  border-top: 1px solid var(--line);
  padding-top: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.section-head__label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: var(--space-xs);
}

.section-head__title {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: clamp(1.5rem, 3.5vw, 2.4rem);
  letter-spacing: 0.03em;
  color: var(--ice);
}

.section-head__sub {
  color: var(--text-muted);
  font-size: clamp(0.95rem, 2vw, 1.05rem);
  max-width: 640px;
  margin-top: var(--space-xs);
}

/* ============================================
   8. SERVICES
   ============================================ */
.services__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
}

@media (min-width: 768px) {
  .services__grid { grid-template-columns: repeat(2, 1fr); }
}

/* --- Glass Card --- */
.card {
  background: var(--glass-bg);
  border: 1px solid var(--line);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.card:hover {
  transform: translateY(-4px);
  border-color: rgba(83, 215, 238, 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 30px rgba(83, 215, 238, 0.08);
}

.card__icon {
  width: 44px;
  height: 44px;
  margin-bottom: var(--space-sm);
}

.card__icon--cyan  { color: var(--cyan); }
.card__icon--blue  { color: var(--blue); }
.card__icon--ice   { color: var(--ice); }
.card__icon--steel { color: var(--steel); }
.card__icon--dim   { color: var(--cyan-dim); }

.card__icon svg {
  width: 100%;
  height: 100%;
}

.card__title {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: clamp(1.05rem, 2.5vw, 1.2rem);
  letter-spacing: 0.02em;
  margin-bottom: var(--space-xs);
}

.card__text {
  font-size: clamp(0.88rem, 1.8vw, 0.97rem);
  color: var(--text-muted);
  line-height: 1.65;
}

.card__tech {
  font-family: var(--font-mono);
  font-size: clamp(0.7rem, 1.5vw, 0.76rem);
  color: var(--cyan-dim);
  letter-spacing: 0.05em;
  margin-top: var(--space-sm);
}

/* With an odd number of cards the last one runs full width so the
   grid never ends on a half-empty row. */
@media (min-width: 768px) {
  .services__grid .card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ============================================
   9. APPROACH
   ============================================ */
.approach__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

@media (min-width: 768px) {
  .approach__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md) var(--space-lg);
  }
}

.principle {
  border-top: 1px solid var(--line-strong);
  padding-top: var(--space-sm);
}

.principle__title {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(0.95rem, 2vw, 1.1rem);
  letter-spacing: 0.02em;
  color: var(--ice);
  margin-bottom: 0.6rem;
}

.principle__text {
  font-size: clamp(0.9rem, 2vw, 1.02rem);
  color: var(--text-muted);
  line-height: 1.75;
}

/* ============================================
   10. ABOUT
   ============================================ */
.about__content {
  max-width: 760px;
}

.about__content p {
  font-size: clamp(0.9rem, 2vw, 1.05rem);
  color: var(--text-muted);
  line-height: 1.75;
  margin-bottom: var(--space-sm);
}

.about__content p:last-child {
  margin-bottom: 0;
}

/* ============================================
   11. CONTACT
   ============================================ */
.contact__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
  max-width: 900px;
}

@media (min-width: 768px) {
  .contact__grid { grid-template-columns: repeat(3, 1fr); }
}

/* With an odd number of tiles the 2-column phone grid never ends on a
   half-empty row. */
@media (max-width: 767px) {
  .contact__grid .contact-btn:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

.contact-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-md) var(--space-sm);
  background: var(--glass-bg);
  border: 1px solid var(--line);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease, color 0.3s ease;
}

.contact-btn:hover {
  transform: translateY(-3px);
  border-color: rgba(83, 215, 238, 0.4);
  box-shadow: 0 0 25px rgba(83, 215, 238, 0.12);
  color: var(--cyan);
}

.contact-btn__icon {
  width: 28px;
  height: 28px;
  color: var(--steel);
  transition: color 0.3s ease;
}

.contact-btn:hover .contact-btn__icon {
  color: var(--cyan);
}

/* ============================================
   12. FOOTER
   ============================================ */
.footer {
  padding: var(--space-lg) var(--space-md);
  border-top: 1px solid var(--line);
  position: relative;
  z-index: 1;
}

.footer__content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.footer__studio {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  margin-bottom: 0.35rem;
}

.footer__copy {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--text-subtle);
}

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

.footer__social {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  background: var(--glass-bg);
  border: 1px solid var(--line);
  transition: border-color 0.3s ease, transform 0.3s ease;
}

.footer__social:hover {
  border-color: rgba(83, 215, 238, 0.4);
  transform: translateY(-2px);
}

.footer__social:hover svg {
  color: var(--cyan);
}

.footer__social svg {
  width: 17px;
  height: 17px;
  color: var(--text-muted);
  transition: color 0.3s ease;
}