/* ============================================================
   ROOT & RESET
   ============================================================ */
   :root {
    --bg:       #0b0d12;
    --ink:      #141821;
    --text:     #eef1f5;
    --muted:    #b9c2cf;
    --accent:   #f27446;
    --accent-2: #34567e;
  }
  
  *, *::before, *::after { box-sizing: border-box; }
  html, body { height: 100%; }
  
  body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: Montserrat, system-ui, sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;
    width: 100vw;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
  }
  
  p { font-family: Montserrat, sans-serif; }
  
  
  /* ============================================================
     HEADER & NAV
     ============================================================ */
     header {
      position: fixed;
      inset: 0 auto auto 0;
      width: 100%;
      z-index: 1000;
  
      background: rgba(255,255,255,.03);
  
      backdrop-filter:
          blur(14px)
          saturate(140%);
  
      -webkit-backdrop-filter:
          blur(14px)
          saturate(140%);
  
      border-bottom: 1px solid rgba(255,255,255,.05);
  
      box-shadow:
          0 8px 30px rgba(0,0,0,.15);
  }
  
  /* soft fade underneath */
  header::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:100%;
    height:80px;

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,.025),
            rgba(255,255,255,.01),
            transparent
        );

    pointer-events:none;
}
  .nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    padding: .8rem 1rem;
  }
  
  .brand {
    font-family: Syncopate, sans-serif;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: .08em;
  }
  
  nav ul {
    display: flex;
    gap: 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  
  nav a {
    color: var(--text);
    text-decoration: none;
    padding: .5rem .75rem;
    border-radius: 999px;
  }
  
  nav a:hover,
  nav a.active { background: rgba(255,255,255,.06); }
  
  /* Hamburger */
  .hamburger {
    display: none;
    width: 36px;
    height: 28px;
    position: relative;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
  }
  
  .hamburger span {
    position: absolute;
    left: 0; right: 0;
    height: 2px;
    background: var(--text);
    transition: transform .25s, opacity .25s;
  }
  
  .hamburger span:nth-child(1) { top: 4px; }
  .hamburger span:nth-child(2) { top: 13px; }
  .hamburger span:nth-child(3) { bottom: 4px; }
  
  @media (max-width: 820px) {
    nav ul    { display: none; }
    .hamburger { display: block; }
  
    nav.open ul {
      display: flex;
      position: absolute;
      top: 56px;
      right: 12px;
      flex-direction: column;
      background: var(--ink);
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 14px;
      padding: .5rem;
    }
  }
  
  .site-scene {
    position: fixed;
    inset: 0;
    z-index: -3;
    overflow: hidden;
    pointer-events: none;
  }
  
  .site-scene img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .scene-bg {
    z-index: 1;
  }
  
  .scene-moon {
    z-index: 2;
    animation: moonDrift 18s ease-in-out infinite;
  }
  
 
  .scene-tree-left {
    z-index: 4;
  }
  
  .scene-lantern {
    z-index: 5;
    transform-origin: 88% 8%;
    animation: lanternSway 6s ease-in-out infinite;
    left: -20%;
  }
  
  .scene-moon-glow {
    position: absolute;
    z-index: 2;
    top: 9%;
    left: 16%;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: radial-gradient(
      circle,
      rgba(255,245,220,.34),
      rgba(120,170,255,.18) 45%,
      transparent 75%
    );
    filter: blur(18px);
    animation: moonPulse 12s ease-in-out infinite;
  }
  
  .scene-lantern-glow {
    position: absolute;
    z-index: 6;
    right: 2%;
    top: 26%;
    width: 180px;
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(
      circle,
      rgba(255,150,80,.28),
      rgba(255,130,70,.12) 42%,
      transparent 72%
    );
    filter: blur(24px);
    animation: lanternPulse 7s ease-in-out infinite;
  }
  
  .bg-overlay {
    z-index: -2;
  }
  /* ============================================================
   BLIMP
   ============================================================ */

.blimp-wrap {
  position: absolute;
  inset: 0;

  z-index: 3;

  pointer-events: none;

  animation: blimpTravel 35s linear infinite;
}

.scene-blimp {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;

  filter:
    drop-shadow(0 0 8px rgba(160,210,255,.25))
    drop-shadow(0 0 24px rgba(80,140,255,.12));

  animation: blimpFloat 8s ease-in-out infinite;
}

@keyframes blimpTravel {

  0% {

    transform: translate(54vw, -100px);

  }

  25% {

    transform: translate(30vw, 35px);

  }

  100% {

    transform: translate(-40vw, 60px);

  }

}

@keyframes blimpFloat {
  0%,100% {
    transform:
      translateY(0)
      rotate(-.4deg);
  }

  50% {
    transform:
      translateY(-10px)
      rotate(.4deg);
  }
}
@keyframes lanternGlow {
  0%,100% {
    opacity: .85;
    filter: blur(30px);
  }

  50% {
    opacity: 1;
    filter: blur(40px);
  }
}
  @keyframes lanternSway {
    0%, 100% {
      transform: rotate(-.8deg);
    }
  
    50% {
      transform: rotate(.8deg);
    }
  }
  
  @keyframes lanternPulse {
    0%, 100% {
      opacity: .65;
    }
  
    50% {
      opacity: .95;
    }
  }
  
  @keyframes moonPulse {
    0%, 100% {
      opacity: .5;
      transform: scale(1);
    }
  
    50% {
      opacity: .8;
      transform: scale(1.08);
    }
  }
  
  @keyframes moonDrift {
    0%, 100% {
      transform: translateY(0);
    }
  
    50% {
      transform: translateY(-4px);
    }
  }
  
  /* ============================================================
     SECTIONS & LAYOUT
     ============================================================ */
  section {
    padding: clamp(72px, 12vw, 140px) 1rem;
    scroll-margin-top: 72px;
  }
  
  .container {
    max-width: 1200px;
    margin: 0 auto;
  }
  
  
  /* ============================================================
     ABOUT
     ============================================================ */
     #about {
        min-height: 100vh; /* keeps #create fully below the fold on load */
      }
      #about::before{
        content:"";
        position:absolute;
        inset:0;
    
        background:
            radial-gradient(
                circle at 25% 40%,
                rgba(8,12,22,.82),
                rgba(8,12,22,.55) 35%,
                transparent 70%
            );
    
        z-index:2;
        pointer-events:none;
    }
    
    .about-wrap{
        position:relative;
        z-index:10;
    }
     
  #about h1 {
    font-family: Syncopate, sans-serif;
    font-weight: 700;
    font-size: clamp(28px, 6vw, 56px);
    letter-spacing: .06em;
    margin: .5rem 0;
  }
  
  #about h3 {
    font-weight: 600;
    color: var(--muted);
    margin-top: 0;
  }
  #about h4 {
    font-family: Montserrat, sans-serif;
    font-weight: 600;
    font-size: clamp(1rem, 2.2vw, 1.25rem);
    color: var(--text);
    border-left: 3px solid var(--accent);
    padding-left: .75rem;
    margin: .5rem 0 1.5rem;
    line-height: 1.5;
  }
  
  #about p { max-width: 60ch; }
  
  .about-wrap {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 2rem;
    align-items: center;
  }
  
  @media (max-width: 960px) {
    .about-wrap { grid-template-columns: 1fr; }
  }
  
  
  /* ============================================================
     AVATAR
     ============================================================ */
  .avatarStage {
    position: relative;
    min-height: 420px;
  }
  
  #animatedSVG {
    position: absolute;
    width: min(280px, 60%);
    height: auto;
    left: 0; top: 0;
    image-rendering: crisp-edges;
  }
  
  #headGroup,
  #leftArmGroup,
  #rightArmGroup,
  #leftLeg,
  #rightLegGroup,
  #rightLow {
    will-change: transform;
  }
  
  
  /* ============================================================
     OBSERVER DOCK  (fixed corner widget)
     ============================================================ */
  #observerDock {
    position: fixed;
    right: 1rem;
    bottom: 5rem;
    width: 160px;
    height: auto;
    z-index: 99999;
    pointer-events: auto;
    opacity: 0;
    visibility: visible;
    overflow: hidden;
  }
  
  #observerDock svg {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    z-index: 99999;
  }
  
  /* Applied by JS when avatar is docked */
  .avatar-observer {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    left: auto;
    top: auto;
    transform-origin: 50% 50%;
  }
  .hero-quote {
    margin-top: 2rem;
  
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    letter-spacing: .02em;
    line-height: 1.8;
  
    color: rgba(255,255,255,.75);
  
    max-width: 40rem;
  }
  
  /* ============================================================
     BUTTONS & BADGES
     ============================================================ */
  .btn {
    display: inline-block;
    background: var(--accent);
    color: #fff;
    padding: .7rem 1rem;
    border-radius: 12px;
    text-decoration: none;
    margin-right: .6rem;
  }
  
  .btn:hover { filter: brightness(1.05); }
  
  .btn-ghost {
    background: transparent;
    border: 1px solid rgba(255,255,255,.2);
  }
  
  .badge {
    display: inline-block;
    margin-left: .5rem;
    padding: .35rem .6rem;
    border-radius: 999px;
    background: rgba(242,116,70,.15);
    color: #ffd8cc;
    font-size: .85rem;
  }
  
  .cta-row { margin-top: 1rem; }
  
  
  /* ============================================================
     CREATE SECTION
     ============================================================ */
     #create {
        background-color: #e27b52; /* set here instead of gsap.set */
        position: relative;
        min-height: 100vh;
      }
  
  .glow-lines {
    font-family: Syncopate, sans-serif;
    font-size: clamp(22px, 8vw, 100px);
    line-height: 1;
    text-transform: uppercase;
    font-weight: 700;
  }
  
  .glow-lines h2 { margin: 0; }
  
  .stars,
  .fireflies {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
  
  .star {
    position: absolute;
    border-radius: 50%;
    background: #fff;
    opacity: .8;
  }
  
  .firefly {
    position: absolute;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: rgba(255,238,170,.95);
    box-shadow: 0 0 8px 4px rgba(255,238,170,.55);
  }
  
  #moonRise {
    position: absolute;
    top: 35%;
    left: 10%;
    width: 550px;
    height: auto;
    opacity: 0;
    transform-origin: center;
    mix-blend-mode:hard-light;
    filter: saturate(0.75) contrast(0.85) brightness(0.85);
    filter:

        drop-shadow(0 0 40px rgba(90, 150, 255, 0.25))

        drop-shadow(0 0 80px rgba(90, 150, 255, 0.15));
  }

  /* ============================================================
   CONSTELLATION NAV
   ============================================================ */

.constellation-nav {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
}

.constellation-star {

  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  pointer-events: auto;
  text-decoration: none;

  box-shadow:
    0 0 6px rgba(255,255,255,.95),
    0 0 14px rgba(255,240,180,.72),
    0 0 30px rgba(130,190,255,.42);

  animation: twinkle 3s ease-in-out infinite;

  transition:
    box-shadow .35s ease,
    filter .35s ease;
}

.constellation-star:hover,
.constellation-star:focus-visible {
  animation-play-state: paused;
  filter: brightness(1.2);

  box-shadow:
    0 0 8px rgba(255,255,255,1),
    0 0 22px rgba(255,240,180,.95),
    0 0 48px rgba(130,190,255,.75);
}

.constellation-star::after {
  content: attr(data-label);
  position: absolute;
  left: 22px;
  top: 50%;
  transform: translateY(-50%) translateX(-8px);
  opacity: 0;

  white-space: nowrap;
  color: rgba(255,255,255,.78);
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;

  text-shadow:
    0 0 8px rgba(255,255,255,.35),
    0 0 16px rgba(130,190,255,.25);

  transition:
    opacity .3s ease,
    transform .3s ease;
}

.constellation-star:hover::after,
.constellation-star:focus-visible::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* Star positions */
.star-work {
  top: 22%;
  left: 72%;
}

.star-services {
  top: 30%;
  left: 85%;
}

.star-contact {
  top: 68%;
  left: 76%;
}

/* Constellation lines */
.constellation-nav::before,
.constellation-nav::after {
  content: "";
  position: absolute;
  height: 1px;
  pointer-events: none;
  opacity: .65;

  background: linear-gradient(

    to right,

    rgba(255,255,255,0),

    rgba(255,255,255,.07),

    rgba(130,190,255,.06),

    rgba(255,255,255,0)

  );
  transform-origin: left center;
}

/* Work → Services */
.constellation-nav::before {
  left: 72%;
  top: 22%;
  width: 16%;
  transform: rotate(27deg);
}

/* Services → Contact */
.constellation-nav::after {
  left: 85%;
  top: 30%;
  width: 30%;
  transform: rotate(122deg);
}

@keyframes twinkle {
  0%, 100% {
    opacity: .62;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.25);
  }
}

/* Mobile: hide constellation nav so it doesn't clutter the text */
@media (max-width: 800px) {
  .constellation-nav {
    display: none;
  }
}
/* =========================================
   THE OBSERVATORY
   ========================================= */

   .star-observatory {
    position: absolute;
    top: 65%;
    left: 54%;
  
    width: 16px;
    height: 16px;
    border-radius: 50%;
  
    background:
      radial-gradient(
        circle at 30% 30%,
        rgba(255,255,255,.95),
        rgba(180,220,255,.9) 35%,
        rgba(80,140,255,.95) 70%,
        rgba(35,55,110,1)
      );
  
    z-index: 50;
    cursor: pointer;
    pointer-events: auto;
  
    box-shadow:
      0 0 8px rgba(255,255,255,.8),
      0 0 20px rgba(150,210,255,.75),
      0 0 48px rgba(100,170,255,.6),
      0 0 90px rgba(80,130,255,.25);
    
    animation:
      observatoryTwinkle 5s ease-in-out infinite,
      observatoryPulse 8s ease-in-out infinite;
  }
  
  /* subtle orbital ring */
  .star-observatory::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
  
    width: 30px;
    height: 30px;
    border-radius: 50%;
  
    transform: translate(-50%, -50%) rotate(-25deg);
    border: 1px solid rgba(150,210,255,.14);
  
    pointer-events: none;
  }
  
  /* label below planet */
  .star-observatory::after {
    content: attr(data-label);
    position: absolute;
  
    top: 24px;
    left: 50%;
  
    transform: translateX(-50%) translateY(-4px);
    opacity: 0;
  
    white-space: nowrap;
    color: rgba(235,245,255,.9);
  
    font-size: .68rem;
    letter-spacing: .22em;
    text-transform: uppercase;
  
    text-shadow:
      0 0 10px rgba(255,255,255,.25),
      0 0 20px rgba(120,190,255,.22);
  
    transition:
      opacity .35s ease,
      transform .35s ease;
  }
  
  .star-observatory:hover::after,
  .star-observatory:focus-visible::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  
  @keyframes observatoryTwinkle {
    0%, 100% {
      transform: scale(1);
    }
  
    50% {
      transform: scale(1.12);
    }
  }
  
  @keyframes observatoryPulse {
    0%, 100% {
      filter: brightness(1);
    }
  
    50% {
      filter: brightness(1.25);
    }
  }

  /* ============================================================
   PORTFOLIO
   ============================================================ */


   #portfolio {
    position: relative;
    isolation: isolate;
    overflow: hidden;
  
    background:
      radial-gradient(circle at 50% 0%, rgba(90,140,220,.08), transparent 40%),
      linear-gradient(
        to bottom,
        #132236 0%,
        #0f1a2c 60%,
        #0b1424 100%
      );
  }
  
  /* dim stars + moonbeam */
  #portfolio::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
  
    background:
      linear-gradient(
        108deg,
        transparent 0%,
        transparent 22%,
        rgba(130,190,255,.07) 36%,
        rgba(180,220,255,.11) 44%,
        rgba(130,190,255,.055) 54%,
        transparent 70%
      ),
      radial-gradient(circle, rgba(255,255,255,.5) 1px, transparent 1.5px),
      radial-gradient(circle, rgba(255,240,180,.5) 1px, transparent 1.7px),
      radial-gradient(circle at 22% 6%, rgba(180,220,255,.18), transparent 30%);
  
    background-size:
      100% 100%,
      220px 220px,
      310px 310px,
      100% 100%;
  
    background-position:
      0 0,
      30px 70px,
      150px 20px,
      0 0;
  
    opacity: .55;
  }
  
  /* glow behind the cards */
  #portfolio::after {
    content: "";
    position: absolute;
    left: 5%;
    right: 5%;
    top: 34%;
    height: 55%;
    z-index: -1;
    pointer-events: none;
  
    background:
      radial-gradient(
        ellipse at 28% 20%,
        rgba(100,175,255,.2),
        transparent 48%
      ),
      radial-gradient(
        ellipse at 55% 42%,
        rgba(120,190,255,.12),
        transparent 58%
      ),
      radial-gradient(
        ellipse at 85% 60%,
        rgba(255,145,90,.055),
        transparent 48%
      );
  
    filter: blur(26px);
    opacity: .9;
  }
  .card.featured {
    box-shadow:
      0 30px 80px rgba(0,0,0,.38),
      0 0 45px rgba(90,160,255,.16),
      inset 0 1px 0 rgba(255,255,255,.1);
  }

#portfolio h2 {
  font-family: Syncopate, sans-serif;
  font-size: clamp(24px, 5vw, 52px);
  letter-spacing: .06em;
  margin-bottom: 1rem;
}

.section-intro {
  max-width: 720px;
  margin: 0 0 3rem;
  color: rgba(255,255,255,.72);
  font-size: 1.05rem;
  line-height: 1.7;
}

.grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.5rem;
}

.card {
  position: relative;
  grid-column: span 3;
  overflow: hidden;
  border-radius: 20px;

  background:
    linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.025)),
    rgba(8,16,30,.76);

  border: 1px solid rgba(180,220,255,.16);

  box-shadow:
    0 24px 55px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.08);

  backdrop-filter: blur(12px);

  display: flex;
  flex-direction: column;

  transition:
    transform .28s ease,
    border-color .28s ease,
    box-shadow .28s ease;
}

.card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      120deg,
      transparent 0%,
      rgba(170,220,255,.12) 35%,
      transparent 70%
    );
  opacity: 0;
  transform: translateX(-35%);
  transition: opacity .35s ease, transform .6s ease;
  pointer-events: none;
}

.card:hover {
  transform: translateY(-6px);
  border-color: rgba(190,230,255,.34);
  box-shadow:
    0 30px 70px rgba(0,0,0,.32),
    0 0 35px rgba(120,185,255,.12),
    inset 0 1px 0 rgba(255,255,255,.12);
}

.card:hover::before {
  opacity: 1;
  transform: translateX(35%);
}

.card.featured {
  grid-column: span 6;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  min-height: 390px;
}

.card img {
  display: block;
  width: 100%;
  height: 235px;
  object-fit: cover;
  background:
    radial-gradient(circle at center, rgba(120,190,255,.18), transparent 55%),
    #101827;
}

.card.featured img {
  height: 100%;
  min-height: 390px;
}

.card .pad {
  padding: 1.45rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.project-type {
  margin: 0 0 .75rem;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(180,220,255,.72);
}

.card h3 {
  margin: 0 0 .75rem;
  color: #fff;
  font-size: 1.35rem;
}

.card p {
  color: rgba(230,238,248,.72);
  line-height: 1.65;
}

.card a {
  margin-top: auto;
  text-decoration: none;
  color: #fff;
  background:
    linear-gradient(135deg, var(--accent), #ff9a66);
  padding: .6rem .85rem;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(242,116,70,.22);
}

.card a:hover {
  transform: translateY(-1px);
}

.tags {
  display: flex;
  gap: .45rem;
  flex-wrap: wrap;
  margin: 1rem 0 1.2rem;
  padding: 0;
  list-style: none;
}

.tags li {
  font-size: .72rem;
  color: rgba(230,238,248,.82);
  background: rgba(255,255,255,.065);
  border: 1px solid rgba(180,220,255,.13);
  padding: .25rem .55rem;
  border-radius: 999px;
}

@media (max-width: 900px) {
  .grid {
    grid-template-columns: 1fr;
  }

  .card,
  .card.featured {
    grid-column: span 1;
  }

  .card.featured {
    display: flex;
  }

  .card.featured img {
    height: 235px;
    min-height: 0;
  }
}
  /* ============================================================
   SERVICES
   ============================================================ */

   #services {
    position: relative;
    min-height: 100vh;
    padding: clamp(8rem, 12vw, 12rem) 1rem clamp(6rem, 10vw, 9rem);
    overflow: hidden;
    margin-top: 0;
  }
  #services::before{
    content:'';

    position:absolute;
    left:0;
    right:0;
    top:0;

    height: 160px;

  background: linear-gradient(

    to bottom,

    rgba(58,89,126,.75) 0%,

    rgba(58,89,126,.28) 50%,

    rgba(58,89,126,0) 100%

  );

    pointer-events:none;
    z-index:1;
}
#services .container {
  position: relative;
  z-index: 2;
}

#services h2 {
  font-family: Syncopate, sans-serif;
  font-size: clamp(2.8rem, 6vw, 5rem);
  letter-spacing: .06em;
  line-height: .95;
  margin: 0 0 1.5rem;
}

#services .section-intro {
  max-width: 760px;
  margin: 0 0 3.25rem;
  color: rgba(255,255,255,.78);
  line-height: 1.75;
  font-size: 1.05rem;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.6rem;
}
.services-copy p {
  font-family: Montserrat, sans-serif;
    font-weight: 400;
    font-size: clamp(1rem, 2.2vw, 1rem);
    color: rgba(255,255,255,.76);
    max-width: 880px;
    border-left: 3px solid var(--accent);
    padding-left: .75rem;
    margin: .5rem 0 1.5rem;
    line-height: 1.5;
}
.service-card {
  position: relative;
  overflow: hidden;
  min-height: 270px;
  padding: 1.5rem;
  border-radius: 22px;

  background:
    linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.025)),
    rgba(8,18,32,.58);

  border: 1px solid rgba(190,225,255,.14);

  box-shadow:
    0 22px 55px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.08);

  backdrop-filter: blur(14px);

  transition:
    transform .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;
}

.service-card:hover {
  transform: translateY(-8px);
  border-color: rgba(190,225,255,.36);

  box-shadow:
    0 30px 70px rgba(0,0,0,.4),
    0 0 40px rgba(120,185,255,.14),
    inset 0 1px 0 rgba(255,255,255,.14);
}

.service-card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .55;
  pointer-events: none;
}

.service-card:nth-child(1)::before {
  background: radial-gradient(circle at top left, rgba(90,180,255,.18), transparent 50%);
}

.service-card:nth-child(2)::before {
  background: radial-gradient(circle at top left, rgba(180,120,255,.18), transparent 50%);
}

.service-card:nth-child(3)::before {
  background: radial-gradient(circle at top left, rgba(255,220,140,.16), transparent 50%);
}

.service-card:nth-child(4)::before {
  background: radial-gradient(circle at top left, rgba(255,160,110,.16), transparent 50%);
}

.service-card::after {
  content: "";
  position: absolute;
  left: 1.5rem;
  right: 1.5rem;
  top: 0;
  height: 1px;

  background: linear-gradient(
    to right,
    transparent,
    rgba(180,225,255,.55),
    transparent
  );

  opacity: .55;
}

.service-card:nth-child(2),
.service-card:nth-child(4) {
  margin-top: 25px;
}

.service-icon {
  display: inline-grid;
  place-items: center;

  width: 42px;
  height: 42px;
  margin-bottom: 1.25rem;

  border-radius: 50%;

  color: rgba(255,245,210,.95);
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);

  box-shadow:
    0 0 18px rgba(255,230,150,.18),
    inset 0 1px 0 rgba(255,255,255,.12);

  animation: iconFloat 6s ease-in-out infinite;
}

.service-label {
  margin: 0 0 .65rem;
  color: rgba(180,220,255,.76);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.service-card h3 {
  margin: 0 0 .85rem;
  color: #fff;
  font-size: 1.15rem;
}

.service-card p:last-child {
  margin: 0;
  color: rgba(230,238,248,.74);
  line-height: 1.65;
}

@keyframes iconFloat {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-5px);
  }
}

@media (max-width: 1100px) {
  .service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .service-card:nth-child(2),
  .service-card:nth-child(4) {
    margin-top: 0;
  }
}

@media (max-width: 650px) {
  .service-grid {
    grid-template-columns: 1fr;
  }

  .service-card {
    min-height: auto;
  }
}

/* ============================================================
   CONTACT
   ============================================================ */

   #contact {
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: clamp(6rem, 10vw, 9rem) 1rem;
    overflow: hidden;
  }
  
  /* quiet nighttime overlay */
  #contact::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
  
    background:
      radial-gradient(
        circle at 28% 42%,
        rgba(6,10,18,.9),
        rgba(6,10,18,.72) 42%,
        transparent 75%
      ),
      linear-gradient(
        to bottom,
        rgba(5,10,20,.35),
        rgba(5,10,20,.86)
      );
  }
  

  
  #contact .container {
    position: relative;
    z-index: 2;
  }
  
  .contact-wrap {
    width: 100%;
  }
  
  .contact-content {
    max-width: 760px;
  }
  
  #contact h2 {
    font-family: Syncopate, sans-serif;
    font-size: clamp(2rem, 4vw, 3.6rem);
    line-height: 1.1;
    letter-spacing: .04em;
    max-width: 720px;
    margin: .5rem 0 1.5rem;
  }
  
  .contact-copy {
    max-width: 680px;
    color: rgba(255,255,255,.82);
    line-height: 1.85;
    margin-bottom: 1.5rem;
  }
  
  .contact-note {
    max-width: 600px;
    margin: 2.75rem 0 0;
    color: rgba(255,255,255,.55);
    font-style: italic;
    line-height: 1.8;
  }
  
  .contact-actions {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    margin-top: 2rem;
  }
  
  .contact-link {
    color: #ff8a5b;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,138,91,.35);
  }
  
  .contact-link:hover {
    border-color: #ff8a5b;
  }
  /* ============================================================
     FOOTER
     ============================================================ */
  footer {
    padding: 56px 1rem;
    border-top: 1px solid rgba(255,255,255,.06);
    background:
   
        rgba(6,10,18,1)
       
  
    
  }
  
  footer .links {
    display: flex;
    gap: .8rem;
    flex-wrap: wrap;
  }
  
  footer a { color: var(--muted); }