/* ===========================================================
   Cre8Labs — shared design system
   Colors sampled directly from the real logo file (not approximated):
   cyan #00b8d4 -> blue #0074a5 -> purple #6519a0 -> magenta #c128c1
   =========================================================== */

:root {
  --cyan: #00b8d4;
  --blue: #0074a5;
  --blue-deep: #00598f;
  --purple: #6519a0;
  --magenta: #c128c1;
  --gradient: linear-gradient(120deg, var(--cyan) 0%, var(--blue) 32%, var(--purple) 68%, var(--magenta) 100%);
  --gradient-text: linear-gradient(90deg, var(--cyan), var(--blue-deep));

  --ink: #0a0c1a;
  --ink-soft: #12152a;
  --ink-card: #191d38;
  --bg: #fafafd;
  --paper: #ffffff;
  --text: #14141f;
  --muted: #62636f;
  --border: #e7e7f0;
  --radius: 18px;
  --ease: cubic-bezier(.22,.9,.28,1);
  --font-heading: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  line-height: 1.65;
  font-size: 16px;
  overflow-x: hidden;
}
h1, h2, h3, .brand { font-family: var(--font-heading); }
a { color: inherit; }
img { max-width: 100%; display: block; }
.container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.skip-link {
  position: absolute; left: -9999px; top: auto;
  background: var(--ink); color: #fff; padding: 12px 20px; border-radius: 8px; z-index: 300;
}
.skip-link:focus { left: 16px; top: 16px; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--cyan); outline-offset: 2px; border-radius: 4px;
}

.text-gradient {
  background: var(--gradient);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- reveal-on-scroll ---------- */
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal].in-view { opacity: 1; transform: translateY(0); }
[data-reveal="scale"] { transform: scale(.94); }
[data-reveal="scale"].in-view { transform: scale(1); }
.stagger [data-reveal]:nth-child(1) { transition-delay: 0ms; }
.stagger [data-reveal]:nth-child(2) { transition-delay: 90ms; }
.stagger [data-reveal]:nth-child(3) { transition-delay: 180ms; }
.stagger [data-reveal]:nth-child(4) { transition-delay: 270ms; }
.stagger [data-reveal]:nth-child(5) { transition-delay: 360ms; }
.stagger [data-reveal]:nth-child(6) { transition-delay: 450ms; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ---------- header ---------- */
header.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 26px 0;
  border-bottom: 1px solid transparent;
  transition: background .35s var(--ease), padding .35s var(--ease), box-shadow .35s var(--ease), border-color .35s ease;
}
header.site-header.scrolled {
  background: rgba(10,12,26,.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  padding: 14px 0; box-shadow: 0 12px 32px -12px rgba(0,0,0,.35);
  border-bottom-color: rgba(255,255,255,.08);
}
.nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand-wrap { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.brand-wrap img { height: 30px; width: auto; }
.brand { font-size: 18px; font-weight: 800; color: #fff; letter-spacing: -.01em; }
.brand .dot { color: var(--cyan); }
.nav-links { display: flex; align-items: center; gap: 2px; font-size: 14.5px; font-weight: 600; color: #cfd1e0; list-style: none; }
.nav-links a {
  text-decoration: none; display: block; padding: 9px 16px; border-radius: 999px;
  transition: color .2s ease, background .2s ease;
}
.nav-links a:hover { color: #fff; background: rgba(255,255,255,.07); }
.nav-links a.active { color: #fff; background: rgba(255,255,255,.1); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-weight: 700; text-decoration: none; cursor: pointer; border: none;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), filter .22s ease;
  position: relative; overflow: hidden; font-family: var(--font-body);
}
.btn-primary { background: var(--gradient); color: #fff; padding: 13px 26px; border-radius: 999px; font-size: 14.5px; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -10px rgba(101,25,160,.55); filter: brightness(1.08); }
.btn-ghost {
  background: rgba(255,255,255,.08); color: #fff; padding: 13px 24px; border-radius: 999px; font-size: 14.5px;
  border: 1px solid rgba(255,255,255,.25);
}
.btn-ghost:hover { background: rgba(255,255,255,.16); transform: translateY(-2px); }
.btn-dark { background: var(--ink); color: #fff; padding: 13px 26px; border-radius: 999px; font-size: 14.5px; }
.btn-dark:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -10px rgba(10,12,26,.4); }
.icon { width: 18px; height: 18px; flex-shrink: 0; }
.ripple { position: absolute; border-radius: 50%; background: rgba(255,255,255,.35); transform: scale(0); animation: ripple .6s ease-out; pointer-events: none; }
@keyframes ripple { to { transform: scale(3); opacity: 0; } }

.hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; }
.hamburger span { width: 24px; height: 2px; background: #fff; border-radius: 2px; transition: transform .3s var(--ease), opacity .3s ease; }
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-drawer {
  position: fixed; inset: 0; z-index: 90; background: rgba(10,12,26,.98);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px;
  opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease;
}
.mobile-drawer.open { opacity: 1; visibility: visible; }
.mobile-drawer a { color: #fff; font-size: 22px; font-weight: 700; text-decoration: none; }

/* ---------- page hero (non-home pages) ---------- */
.page-hero {
  background: var(--ink); color: #fff; padding: 168px 0 88px; position: relative; overflow: hidden;
}
.page-hero::before {
  content: ""; position: absolute; inset: -20% -10% auto -10%; height: 420px;
  background: radial-gradient(circle at 30% 20%, rgba(0,184,212,.28), transparent 60%),
              radial-gradient(circle at 75% 30%, rgba(193,40,193,.24), transparent 55%);
  background-size: 160% 160%; filter: blur(10px);
  animation: aurora-drift 16s ease-in-out infinite alternate;
}
.page-hero .eyebrow { position: relative; }
.page-hero h1 { position: relative; font-size: clamp(32px,5vw,52px); font-weight: 800; letter-spacing: -.02em; max-width: 720px; }
.page-hero p { position: relative; color: #c3c5d6; font-size: 17.5px; max-width: 560px; margin-top: 16px; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; margin-bottom: 14px;
  background-image: linear-gradient(100deg, var(--cyan) 30%, #fff 50%, var(--cyan) 70%);
  background-size: 220% auto; background-position: 150% center;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--cyan);
  animation: shine-sweep 3.4s ease-in-out infinite;
}
.eyebrow.dark {
  background-image: linear-gradient(100deg, var(--blue-deep) 30%, #7dd3fc 50%, var(--blue-deep) 70%);
  color: var(--blue-deep);
}
@keyframes shine-sweep {
  0%, 15% { background-position: 150% center; }
  85%, 100% { background-position: -50% center; }
}

section { padding: 100px 0; }
.section-head { max-width: 640px; margin-bottom: 52px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 { font-size: clamp(28px, 4vw, 42px); font-weight: 800; letter-spacing: -.01em; margin-bottom: 14px; }
.section-head p { color: var(--muted); font-size: 17px; }

/* ---------- cards / grids ---------- */
.card {
  background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px 28px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s ease;
  position: relative; overflow: hidden;
}
.card:hover { transform: translateY(-6px); box-shadow: 0 24px 48px -24px rgba(20,20,35,.22); border-color: transparent; }
.card .icon-wrap {
  width: 52px; height: 52px; border-radius: 14px; background: var(--gradient);
  display: flex; align-items: center; justify-content: center; margin-bottom: 20px;
  position: relative;
}
.card .icon-wrap .icon { color: #fff; width: 24px; height: 24px; }
.card h3, .card p { position: relative; }
.card h3 { font-size: 18px; font-weight: 700; margin-bottom: 10px; }
.card p { color: var(--muted); font-size: 15px; }

/* cursor-tracking spotlight (technique adapted from React Bits' Spotlight Card) */
.card::after, .portfolio-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  transition: opacity .4s ease;
  background: radial-gradient(circle 240px at var(--spot-x, 50%) var(--spot-y, 50%), rgba(0,184,212,.14), transparent 70%);
}
.card:hover::after, .portfolio-card:hover::after { opacity: 1; }

/* ---------- footer ---------- */
footer { background: var(--ink); color: #9a9cb0; padding: 64px 0 48px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
.footer-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.footer-brand img { height: 30px; }
.footer-brand span { color: #fff; font-weight: 800; font-family: var(--font-heading); font-size: 17px; }
footer h4 { color: #fff; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 16px; }
footer ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
footer a { text-decoration: none; color: #9a9cb0; font-size: 14.5px; transition: color .2s ease; }
footer a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.08); padding-top: 24px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 13px; }

@media (max-width: 900px) {
  .nav-links, header .btn-ghost, header .btn-primary { display: none; }
  .hamburger { display: flex; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* ===========================================================
   Home hero + live-typed TypeScript background
   =========================================================== */
.code-hero-text h1 { font-size: clamp(34px, 5vw, 56px); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; margin-bottom: 20px; }
.code-hero-text p.lead { color: #c3c5d6; font-size: 18px; max-width: 480px; margin-bottom: 34px; }
.hero-cta { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 44px; }
.hero-trust { display: flex; gap: 26px; flex-wrap: wrap; }
.hero-trust div { display: flex; flex-direction: column; padding-left: 20px; border-left: 1px solid rgba(255,255,255,.14); }
.hero-trust div:first-child { padding-left: 0; border-left: none; }
.hero-trust .num { font-size: 22px; font-weight: 800; font-family: var(--font-heading); }
.hero-trust .lbl { font-size: 12px; color: #9a9cb0; text-transform: uppercase; letter-spacing: .06em; }

/* ---- full-bleed live-typed TypeScript background ---- */
.code-hero {
  position: relative; min-height: 100vh; display: flex; align-items: center;
  background: var(--ink); color: #fff; overflow: hidden; padding: 150px 0 90px;
}
.code-hero .container { position: relative; z-index: 2; width: 100%; }
.code-hero-text { max-width: 520px; }
/* the typed code lives in the empty right side of the hero (not directly
   behind the headline) so it can stay vividly visible instead of needing to
   be dimmed into near-invisibility for text contrast. Positioned as an
   explicit percentage (not flex auto-margin against the code's own width) so
   its left edge is predictable and can be kept clear of .code-hero-text's
   520px column across viewport widths. */
.code-hero-bg { position: absolute; inset: 0; z-index: 0; }
.code-bg {
  position: absolute; left: 62%; right: 4vw; top: 50%; transform: translateY(-50%); margin: 0; padding: 0;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 17px; line-height: 1.95; color: #9aa1cc; opacity: .88;
  white-space: pre-wrap; word-break: break-word; transition: opacity .5s ease;
}
.code-bg.fading { opacity: .18; }
.tok-kw { color: var(--magenta); }
.tok-str { color: #7dd3fc; }
.tok-type { color: var(--cyan); }
.tok-fn { color: #c9a6ff; }
.tok-com { color: #4d5578; font-style: italic; }
.tok-punc { color: #6a71a0; }
.code-cursor { display: inline-block; width: 9px; background: var(--cyan); margin-left: 1px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.code-hero-bg::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, var(--ink) 0%, var(--ink) 48%, rgba(10,12,26,.75) 56%, rgba(10,12,26,.25) 66%, rgba(10,12,26,.12) 100%),
    linear-gradient(180deg, rgba(10,12,26,.65) 0%, transparent 20%, transparent 78%, rgba(10,12,26,.9) 100%);
}
.code-hero-bg::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(circle at 15% 20%, rgba(0,184,212,.2), transparent 55%),
              radial-gradient(circle at 85% 75%, rgba(193,40,193,.18), transparent 55%);
  background-size: 160% 160%; animation: aurora-drift 18s ease-in-out infinite alternate;
}
@keyframes aurora-drift {
  0% { background-position: 0% 0%; }
  50% { background-position: 100% 30%; }
  100% { background-position: 20% 100%; }
}

@media (max-width: 1180px) {
  /* below the container's own max-width there isn't reliably enough spare
     width right of a readable text column for a distinct two-zone layout —
     fall back to a single faint full-bleed backdrop instead */
  .code-hero { padding: 120px 0 70px; }
  .code-bg { position: absolute; inset: 0; left: 0; right: 0; top: 0; transform: none; padding: 90px 6vw 30px; font-size: 12.5px; opacity: .3; }
  .code-hero-bg::before {
    background:
      linear-gradient(180deg, var(--ink) 0%, rgba(10,12,26,.55) 35%, rgba(10,12,26,.85) 100%);
  }
}

/* ===========================================================
   Shared: portfolio cards, process steps, stats band, contact form
   =========================================================== */
.portfolio-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 28px; }
.portfolio-card {
  border-radius: var(--radius); overflow: hidden; background: var(--paper); border: 1px solid var(--border);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
  text-decoration: none; color: inherit; display: block; position: relative;
}
.portfolio-card:hover { transform: translateY(-8px); box-shadow: 0 30px 60px -28px rgba(20,20,35,.28); }
.portfolio-thumb { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--ink); }
.portfolio-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .6s var(--ease); }
.portfolio-card:hover .portfolio-thumb img { transform: scale(1.06); }
.portfolio-thumb::after {
  content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .3s ease;
  background: linear-gradient(180deg, transparent 40%, rgba(10,12,26,.75));
}
.portfolio-card:hover .portfolio-thumb::after { opacity: 1; }
.portfolio-tag {
  position: absolute; top: 14px; left: 14px; background: rgba(255,255,255,.92); color: var(--text);
  font-size: 11.5px; font-weight: 700; padding: 5px 12px; border-radius: 999px; text-transform: uppercase; letter-spacing: .04em;
}
.portfolio-body { padding: 22px 24px; }
.portfolio-body h3 { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.portfolio-body p { color: var(--muted); font-size: 14.5px; margin-bottom: 14px; }
.portfolio-body .view-link { font-size: 13.5px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.portfolio-body .view-link .icon { width: 14px; height: 14px; transition: transform .25s var(--ease); }
.portfolio-card:hover .view-link .icon { transform: translateX(4px); }

.process-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px; position: relative; }
.process-step { position: relative; }
.process-step .num {
  width: 46px; height: 46px; border-radius: 50%; background: var(--gradient); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-family: var(--font-heading);
  font-size: 17px; margin-bottom: 18px;
}
.process-step h3 { font-size: 16.5px; font-weight: 700; margin-bottom: 8px; }
.process-step p { color: var(--muted); font-size: 14.5px; }

.stats-band { background: var(--ink); color: #fff; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 28px; text-align: center; }
.stats-grid .stat .num { font-family: var(--font-heading); font-size: 40px; font-weight: 800; }
.stats-grid .stat .num.grad { background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stats-grid .stat .lbl { font-size: 12.5px; color: #9a9cb0; text-transform: uppercase; letter-spacing: .07em; margin-top: 6px; }

.cta-banner {
  position: relative; overflow: hidden; text-align: center; padding: 96px 0; color: #fff; background: var(--ink);
}
.cta-banner .build-glow-bg {
  position: absolute; inset: 0; background: var(--gradient); opacity: .18; filter: blur(80px);
}
.cta-banner h2 { position: relative; font-size: clamp(28px,4vw,42px); font-weight: 800; margin-bottom: 16px; }
.cta-banner p { position: relative; color: #c3c5d6; max-width: 520px; margin: 0 auto 32px; font-size: 16.5px; }
.cta-banner .hero-cta { position: relative; justify-content: center; }

/* ---- contact ---- */
.contact-layout { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: start; }
.contact-info-card {
  background: var(--ink); color: #fff; border-radius: var(--radius); padding: 36px 32px;
}
.contact-info-card h3 { font-size: 20px; font-weight: 800; margin-bottom: 8px; }
.contact-info-card p { color: #c3c5d6; font-size: 15px; margin-bottom: 26px; }
.contact-info-row { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 22px; }
.contact-info-row .icon-wrap { width: 42px; height: 42px; border-radius: 12px; background: rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.contact-info-row .icon-wrap .icon { color: var(--cyan); }
.contact-info-row strong { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: #9a9cb0; margin-bottom: 3px; }
.contact-info-row div.value { font-size: 15px; font-weight: 600; }
.contact-info-row a { text-decoration: none; }
.contact-info-row a:hover { color: var(--cyan); }

.form-card { background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius); padding: 38px; }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.form-group input, .form-group select, .form-group textarea {
  width: 100%; padding: 13px 16px; border: 1.5px solid var(--border); border-radius: 10px; font-size: 15px;
  font-family: var(--font-body); color: var(--text); background: var(--paper); transition: border-color .2s ease, box-shadow .2s ease;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none; border-color: var(--cyan); box-shadow: 0 0 0 4px rgba(0,184,212,.14);
}
.form-group textarea { resize: vertical; min-height: 140px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
#formNote { font-size: 13.5px; color: var(--muted); margin-top: 14px; }

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