@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap');

:root {
  --bg: #020607;
  --bg-soft: #071012;
  --panel: rgba(10, 24, 27, .68);
  --panel-solid: #091416;
  --text: #eef7f8;
  --muted: #8ca0a4;
  --line: rgba(125, 228, 238, .14);
  --cyan: #21dff3;
  --cyan-2: #7bf5ff;
  --blue: #027d96;
  --success: #66efb0;
  --radius: 24px;
  --max: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--text);
  background:
    radial-gradient(circle at 12% 3%, rgba(9, 140, 165, .13), transparent 26rem),
    radial-gradient(circle at 92% 45%, rgba(15, 115, 135, .08), transparent 28rem),
    var(--bg);
  font-family: 'Manrope', Arial, sans-serif;
  line-height: 1.7;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .22;
  z-index: 99;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E");
}
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
img { max-width: 100%; display: block; }
.container { width: min(calc(100% - 40px), var(--max)); margin-inline: auto; }
.section { padding: 110px 0; position: relative; }
.section-sm { padding: 70px 0; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--cyan-2);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.eyebrow::before { content: ""; width: 20px; height: 1px; background: var(--cyan); box-shadow: 0 0 9px var(--cyan); }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { line-height: 1.08; letter-spacing: -.035em; }
h1 { font-size: clamp(3.25rem, 8.3vw, 7.7rem); margin-bottom: 25px; }
h2 { font-size: clamp(2.25rem, 5vw, 4.65rem); margin-bottom: 22px; }
h3 { font-size: 1.35rem; }
.text-gradient { color: transparent; background: linear-gradient(110deg, #fff 10%, var(--cyan-2) 86%); background-clip: text; -webkit-background-clip: text; }
.muted { color: var(--muted); }
.lead { color: #acbfc2; font-size: clamp(1rem, 1.5vw, 1.2rem); max-width: 660px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 52px; }
.section-heading > div { max-width: 760px; }
.section-heading p { max-width: 430px; margin-bottom: 7px; }
.btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 51px;
  padding: 0 25px;
  border: 1px solid transparent;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #001013;
  background: linear-gradient(135deg, #e8fdff, var(--cyan-2));
  font-weight: 750;
  font-size: .88rem;
  cursor: pointer;
  box-shadow: 0 0 28px rgba(33, 223, 243, .16);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: transform .25s, box-shadow .25s, border-color .25s, background .25s;
}
.btn::before { content: ""; position: absolute; inset: 1px; z-index: -1; border-radius: inherit; background: linear-gradient(120deg, rgba(255,255,255,.26), transparent 38%); opacity: .75; }
.btn::after { content: ""; position: absolute; width: 48px; height: 140%; left: -70px; top: -20%; z-index: -1; background: linear-gradient(90deg, transparent, rgba(255,255,255,.72), transparent); transform: skewX(-22deg); transition: left .55s ease; }
.btn:hover { transform: translateY(-3px); box-shadow: 0 9px 34px rgba(33, 223, 243, .25); }
.btn:hover::after { left: calc(100% + 30px); }
.btn-neon { border-color: rgba(153, 250, 255, .72); box-shadow: 0 0 0 1px rgba(33,223,243,.12), 0 0 24px rgba(33,223,243,.2), inset 0 1px rgba(255,255,255,.65); }
.btn-neon:hover { box-shadow: 0 0 0 1px rgba(33,223,243,.2), 0 0 38px rgba(33,223,243,.38), 0 12px 38px rgba(0,110,130,.28); }
.btn-outline, .btn-glass { color: var(--text); background: linear-gradient(135deg, rgba(130,242,252,.1), rgba(4,13,15,.5)); border-color: rgba(123,245,255,.23); box-shadow: inset 0 1px rgba(255,255,255,.08), 0 8px 30px rgba(0,0,0,.15); }
.btn-outline:hover, .btn-glass:hover { border-color: rgba(123,245,255,.58); background: linear-gradient(135deg, rgba(130,242,252,.16), rgba(4,13,15,.58)); box-shadow: 0 0 25px rgba(33,223,243,.14), inset 0 1px rgba(255,255,255,.12); }
.arrow { font-size: 1.15em; transform: translateY(-1px); }

/* Header */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 80;
  transition: background .3s, border .3s;
}
.site-header.scrolled { background: rgba(2, 6, 7, .82); backdrop-filter: blur(18px); border-bottom: 1px solid var(--line); }
.nav { height: 86px; display: flex; align-items: center; justify-content: space-between; }
.brand img { width: 190px; height: auto; }
.nav-links { display: flex; align-items: center; gap: 33px; font-size: .77rem; color: #a6b5b7; }
.nav-links a { position: relative; transition: color .2s; }
.nav-links a:hover, .nav-links a.active { color: #fff; }
.nav-links a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -10px; margin: auto; width: 4px; height: 4px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.nav-cta { padding: 10px 19px; border: 1px solid rgba(111, 236, 248, .28); border-radius: 999px; color: #e9fdff !important; }
.menu-toggle { display: none; width: 46px; height: 46px; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: #fff; cursor: pointer; }
.menu-toggle span, .menu-toggle::before, .menu-toggle::after { content: ""; display: block; width: 18px; height: 1px; background: currentColor; margin: 5px auto; transition: .25s; }
.menu-toggle.is-open span { opacity: 0; }
.menu-toggle.is-open::before { transform: translateY(6px) rotate(45deg); }
.menu-toggle.is-open::after { transform: translateY(-6px) rotate(-45deg); }

/* Hero */
.hero { min-height: 100svh; display: grid; align-items: center; padding: 145px 0 72px; position: relative; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; min-height: 700px; }
.hero h1 { max-width: 790px; position: relative; z-index: 2; }
.hero h1 .line { display: block; }
.hero .lead { max-width: 580px; }
.hero-actions { display: flex; gap: 14px; margin-top: 38px; }
.hero-meta { display: flex; align-items: center; gap: 20px; margin-top: 62px; color: #73868a; font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; }
.avatars { display: flex; }
.avatar { width: 29px; height: 29px; margin-left: -7px; border: 2px solid var(--bg); border-radius: 50%; background: linear-gradient(135deg, #15414a, #6cd5df); }
.avatar:first-child { margin-left: 0; }
.avatar:nth-child(2) { background: linear-gradient(135deg, #4e2441, #d884bb); }
.avatar:nth-child(3) { background: linear-gradient(135deg, #46542d, #d7ee92); }
.planet-wrap { --planet-x: 0deg; --planet-y: 0deg; position: relative; height: 650px; margin-right: -5vw; perspective: 1100px; transform-style: preserve-3d; }
.planet-aura { position: absolute; width: 78%; aspect-ratio: 1; left: 13%; top: 12%; border-radius: 50%; background: radial-gradient(circle, rgba(33,223,243,.16), rgba(3,56,64,.08) 45%, transparent 70%); filter: blur(26px); animation: aura-pulse 5s ease-in-out infinite; }
.planet-scene { position: absolute; width: min(44vw, 570px); aspect-ratio: 1; left: 10%; top: 9%; transform-style: preserve-3d; transform: rotateX(var(--planet-x)) rotateY(var(--planet-y)); transition: transform .18s ease-out; }
.planet-tilt { position: absolute; inset: 8%; transform-style: preserve-3d; transform: rotateX(68deg) rotateZ(-14deg); }
.planet-sphere { position: absolute; inset: 5%; border-radius: 50%; transform: rotateX(-68deg); transform-style: preserve-3d; overflow: hidden; background: radial-gradient(circle at 34% 28%, rgba(82,237,250,.13), rgba(2,17,20,.68) 51%, rgba(0,4,5,.96) 73%); border: 1px solid rgba(123,245,255,.45); box-shadow: inset 25px 0 42px rgba(81,236,249,.12), inset -28px -10px 55px rgba(0,0,0,.78), -12px 0 27px rgba(33,223,243,.28), 0 0 85px rgba(33,223,243,.13); }
.planet-core { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 31% 31%, rgba(255,255,255,.11), transparent 11%), repeating-radial-gradient(ellipse at 48% 50%, transparent 0 21px, rgba(94,235,246,.09) 22px 23px); }
.planet-grid { position: absolute; inset: -2%; border-radius: 50%; background-image: repeating-linear-gradient(90deg, transparent 0 37px, rgba(100,239,249,.11) 38px 39px), repeating-linear-gradient(0deg, transparent 0 37px, rgba(100,239,249,.1) 38px 39px); background-size: 210% 100%, 100% 100%; mix-blend-mode: screen; }
.planet-grid-back { opacity: .28; filter: blur(.4px); transform: scaleX(.96); animation: globe-spin 17s linear infinite reverse; }
.planet-grid-front { opacity: .74; mask-image: linear-gradient(90deg, #000, rgba(0,0,0,.72) 55%, transparent 96%); -webkit-mask-image: linear-gradient(90deg, #000, rgba(0,0,0,.72) 55%, transparent 96%); animation: globe-spin 13s linear infinite; }
.planet-shine { position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(110deg, rgba(139,249,255,.32), transparent 20% 76%, rgba(0,0,0,.64)); box-shadow: inset 8px 0 12px rgba(140,250,255,.15); }
.planet-ring { position: absolute; left: -13%; top: 37%; width: 126%; height: 26%; border-radius: 50%; border: 1px solid rgba(106,239,250,.37); box-shadow: 0 0 14px rgba(33,223,243,.12); }
.planet-ring-back { clip-path: inset(0 0 50% 0); opacity: .35; }
.planet-ring-front { clip-path: inset(50% 0 0 0); border-color: rgba(146,249,255,.67); filter: drop-shadow(0 0 5px rgba(33,223,243,.62)); }
.orbit-light { position: absolute; width: 7px; height: 7px; left: 12%; top: 60%; border-radius: 50%; background: #fff; box-shadow: 0 0 8px 3px #fff, 0 0 21px 8px var(--cyan); animation: orbit-light 5.6s ease-in-out infinite; }
.signal-line { position: absolute; width: 23%; height: 1px; background: linear-gradient(90deg, transparent, rgba(123,245,255,.45), transparent); transform-origin: left; }
.signal-line::after { content: ""; position: absolute; right: 8%; top: -2px; width: 4px; height: 4px; border-radius: 50%; background: var(--cyan-2); box-shadow: 0 0 9px var(--cyan); }
.signal-line-one { left: 6%; top: 32%; transform: rotate(-27deg); }
.signal-line-two { right: 7%; bottom: 28%; transform: rotate(24deg); }
.planet-card { position: absolute; z-index: 4; min-width: 112px; padding: 10px 13px 10px 10px; display: flex; align-items: center; gap: 10px; border: 1px solid rgba(132,244,253,.25); border-radius: 15px; color: #eafdff; background: linear-gradient(145deg, rgba(17,42,46,.68), rgba(3,11,13,.6)); box-shadow: inset 0 1px rgba(255,255,255,.08), 0 12px 35px rgba(0,0,0,.3), 0 0 19px rgba(33,223,243,.08); backdrop-filter: blur(13px); -webkit-backdrop-filter: blur(13px); animation: card-float 5s ease-in-out infinite; }
.planet-card-icon { width: 36px; height: 36px; flex: 0 0 36px; display: grid; place-items: center; border: 1px solid rgba(123,245,255,.22); border-radius: 10px; color: var(--cyan-2); background: rgba(56,224,239,.07); box-shadow: inset 0 0 13px rgba(33,223,243,.06); }
.planet-card-icon svg { width: 21px; height: 21px; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.planet-card-icon.apple-mark svg { fill: currentColor; stroke: none; width: 19px; height: 19px; }
.planet-card small, .planet-card strong { display: block; line-height: 1.25; }
.planet-card small { color: #749397; font-size: .53rem; letter-spacing: .16em; }
.planet-card strong { margin-top: 2px; font-size: .7rem; font-weight: 650; letter-spacing: .02em; }
.planet-card-seo { left: 0; top: 14%; animation-delay: -.7s; }
.planet-card-web { right: 1%; top: 22%; animation-delay: -2.4s; }
.planet-card-code { left: 2%; bottom: 18%; animation-delay: -3.5s; }
.planet-card-apple { right: 0; bottom: 12%; animation-delay: -1.6s; }
@keyframes globe-spin { to { background-position: -210% 0, 0 0; } }
@keyframes aura-pulse { 50% { opacity: .65; transform: scale(1.06); } }
@keyframes card-float { 50% { transform: translateY(-9px); border-color: rgba(132,244,253,.42); box-shadow: inset 0 1px rgba(255,255,255,.1), 0 18px 38px rgba(0,0,0,.35), 0 0 24px rgba(33,223,243,.13); } }
@keyframes orbit-light { 0%, 100% { left: 11%; opacity: .65; } 50% { left: 85%; opacity: 1; } }
.scroll-note { position: absolute; bottom: 30px; right: 34px; writing-mode: vertical-rl; color: #5e7376; font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; }

/* Shared cards */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.glass-card { padding: 34px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg, rgba(12, 27, 30, .72), rgba(4, 10, 12, .72)); transition: transform .3s, border-color .3s; }
.glass-card:hover { transform: translateY(-6px); border-color: rgba(70, 226, 240, .34); }
.card-number { color: var(--cyan); font-size: .72rem; letter-spacing: .16em; }
.service-card { min-height: 330px; display: flex; flex-direction: column; justify-content: space-between; }
.service-card h3 { font-size: 1.65rem; max-width: 260px; }
.service-icon { width: 54px; height: 54px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 17px; color: var(--cyan); background: rgba(23, 218, 238, .05); }
.service-icon svg { width: 25px; }
.service-card p { color: var(--muted); font-size: .9rem; }
.text-link { color: var(--cyan-2); font-size: .76rem; font-weight: 700; letter-spacing: .06em; }

/* Work */
.work-grid { display: grid; grid-template-columns: 1.18fr .82fr; gap: 18px; }
.work-card { position: relative; min-height: 510px; border-radius: 28px; overflow: hidden; border: 1px solid var(--line); background: #081214; }
.work-card.small { min-height: 246px; }
.work-stack { display: grid; gap: 18px; }
.work-visual { position: absolute; inset: 0; transition: transform .5s; }
.work-card:hover .work-visual { transform: scale(1.035); }
.visual-aurora { background: radial-gradient(circle at 67% 34%, #52d5de 0 2%, transparent 3%), radial-gradient(circle at 60% 40%, rgba(28, 209, 225, .32), transparent 24%), linear-gradient(135deg, #021013, #132b2d); }
.visual-aurora::after { content: "A"; position: absolute; right: 11%; top: 2%; font-size: 23rem; line-height: 1; font-weight: 800; color: rgba(107, 244, 250, .07); }
.visual-nova { background: radial-gradient(circle at 78% 20%, #f7cb75, transparent 3%), radial-gradient(circle at 73% 38%, #693a1e, transparent 32%), linear-gradient(135deg, #160e0a, #071011); }
.visual-luma { background: radial-gradient(circle at 72% 38%, #9e71e9, transparent 3%), radial-gradient(circle at 63% 45%, #2e164c, transparent 32%), linear-gradient(135deg, #0d0716, #071011); }
.work-info { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 34px; background: linear-gradient(transparent, rgba(2, 6, 7, .93)); }
.work-info p { color: var(--muted); font-size: .78rem; margin: 0; text-transform: uppercase; letter-spacing: .1em; }
.work-info h3 { margin: 7px 0 0; font-size: 1.8rem; }
.work-card.small .work-info { padding: 26px; }
.work-card.small .work-info h3 { font-size: 1.35rem; }

/* Stats / process / quote */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid var(--line); }
.stat { padding: 44px 24px; text-align: center; border-right: 1px solid var(--line); }
.stat:last-child { border-right: 0; }
.stat strong { display: block; font-size: clamp(2rem, 4vw, 3.6rem); color: #fff; letter-spacing: -.06em; }
.stat span { color: var(--muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; }
.process-list { border-top: 1px solid var(--line); }
.process-item { display: grid; grid-template-columns: 100px 1fr 1fr; gap: 30px; padding: 37px 0; border-bottom: 1px solid var(--line); align-items: start; }
.process-item h3 { font-size: 1.75rem; margin: 0; }
.process-item p { color: var(--muted); margin: 0; max-width: 440px; font-size: .9rem; }
.quote-panel { padding: 74px; border: 1px solid var(--line); border-radius: 32px; text-align: center; background: radial-gradient(circle at 50% 0, rgba(35, 213, 229, .12), transparent 55%), var(--panel); }
.quote-panel blockquote { max-width: 900px; margin: 0 auto 30px; font-size: clamp(1.6rem, 3vw, 2.7rem); line-height: 1.35; letter-spacing: -.03em; }
.quote-panel cite { color: var(--muted); font-style: normal; font-size: .8rem; }

/* Inner pages */
.page-hero { padding: 180px 0 95px; min-height: 650px; display: flex; align-items: end; position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.page-hero::after { content: ""; position: absolute; width: 560px; height: 560px; right: -170px; top: 70px; border: 1px solid rgba(71, 224, 239, .18); border-radius: 50%; box-shadow: -24px 0 65px rgba(25, 202, 222, .1), inset 22px 0 50px rgba(32, 212, 230, .06); }
.page-hero h1 { max-width: 1000px; margin: 22px 0; font-size: clamp(3.7rem, 8vw, 7rem); }
.page-hero .lead { max-width: 620px; }
.page-hero .container { position: relative; z-index: 2; }
.service-detail { display: grid; grid-template-columns: 110px .8fr 1fr; gap: 40px; padding: 56px 0; border-bottom: 1px solid var(--line); }
.service-detail h2 { font-size: clamp(2rem, 4vw, 3.5rem); }
.pill-list { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 25px; }
.pill { padding: 8px 13px; border: 1px solid var(--line); border-radius: 999px; color: #aec1c4; font-size: .72rem; }
.case-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.case-card { min-height: 450px; }
.case-card:nth-child(3n) { grid-column: 1 / -1; }
.case-card:nth-child(1) .work-visual { background: radial-gradient(circle at 68% 35%, #18bed0, transparent 3%), radial-gradient(circle at 63% 43%, #0a6670, transparent 28%), linear-gradient(130deg, #031012, #0a2023); }
.case-card:nth-child(2) .work-visual { background: radial-gradient(circle at 50% 37%, #ee7f69, transparent 3%), radial-gradient(circle at 53% 45%, #6e2e25, transparent 31%), linear-gradient(130deg, #170706, #111); }
.case-card:nth-child(3) .work-visual { background: radial-gradient(ellipse at 67% 42%, #a7ef91, transparent 4%), radial-gradient(ellipse at 63% 43%, #1e5e36, transparent 28%), linear-gradient(130deg, #061009, #0b1913); }
.dynamic-work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.dynamic-work-card { min-height: 251px; }
.dynamic-work-card:first-child { grid-column: span 2; grid-row: span 2; min-height: 520px; }
.project-visual {
  --accent: #18bed0;
  background-color: #071214;
  background-image: radial-gradient(circle at 68% 34%, var(--accent) 0 2%, transparent 3%), radial-gradient(circle at 63% 42%, color-mix(in srgb, var(--accent) 42%, transparent), transparent 29%), linear-gradient(130deg, #031012, #0a1719);
  background-size: cover;
  background-position: center;
}
.work-card .work-visual.project-visual {
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}
.cms-empty { grid-column: 1 / -1; padding: 55px; border: 1px dashed rgba(70, 226, 240, .3); border-radius: var(--radius); text-align: center; background: var(--panel); }
.cms-empty p { color: var(--muted); }
.project-hero { min-height: 92svh; position: relative; display: flex; align-items: end; overflow: hidden; }
.project-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(2,6,7,.9), transparent 65%); }
.project-hero-visual { position: absolute; inset: 0; transform: scale(1.02); }
.project-hero-copy { position: relative; z-index: 2; padding-bottom: 80px; }
.project-hero h1 { max-width: 1050px; margin: 20px 0 0; }
.project-detail-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 90px; align-items: start; }
.project-description { color: #a8babc; font-size: 1.08rem; }
.project-description p { margin-bottom: 1.3em; }
.about-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 90px; align-items: start; }
.about-copy p { color: #9bafb2; font-size: 1.05rem; }
.value-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.value-card { min-height: 220px; }
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.team-card { padding: 18px; border: 1px solid var(--line); border-radius: 22px; background: #071012; text-align: center; }
.team-photo { width: 100%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 50% 25%, #284b50, #0a191b 50%, #040b0c 70%); background-position: center center; background-size: cover; background-repeat: no-repeat; overflow: hidden; position: relative; }
.team-photo::after { content: ""; position: absolute; width: 45%; aspect-ratio: .75; border-radius: 50% 50% 35% 35%; left: 28%; bottom: -2%; background: linear-gradient(#608088, #152d32); opacity: .7; }
.team-photo.has-image::after { display: none; }
.team-card-empty { opacity: .42; }
.team-card:nth-child(2) .team-photo { background: radial-gradient(circle at 50% 25%, #50374c, #19101a 55%, #080508 70%); }
.team-card:nth-child(3) .team-photo { background: radial-gradient(circle at 50% 25%, #4f4931, #18160c 55%, #090804 70%); }
.team-card:nth-child(4) .team-photo { background: radial-gradient(circle at 50% 25%, #2c3657, #0c101d 55%, #05060a 70%); }
.team-card .team-photo.has-image { background-position: center center; background-size: cover; background-repeat: no-repeat; }
.team-info { padding: 19px 9px 4px; }
.team-info h3 { margin-bottom: 4px; font-size: 1rem; }
.team-info p { margin: 0; color: var(--muted); font-size: .73rem; }

/* Contact */
.contact-layout { display: grid; grid-template-columns: .78fr 1.22fr; gap: 70px; align-items: start; }
.contact-points { margin-top: 45px; }
.contact-point { padding: 22px 0; border-bottom: 1px solid var(--line); }
.contact-point small { color: var(--muted); display: block; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 5px; }
.contact-form { padding: 38px; border: 1px solid var(--line); border-radius: 28px; background: var(--panel); }
.field-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.field { margin-bottom: 20px; }
.field label { display: block; font-size: .74rem; color: #b9c8ca; margin: 0 0 8px 3px; }
.field input, .field textarea, .field select { width: 100%; color: #edfafa; border: 1px solid var(--line); border-radius: 13px; background: rgba(1, 7, 8, .72); padding: 14px 16px; outline: none; transition: border-color .2s; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: rgba(33, 223, 243, .58); }
.field textarea { min-height: 145px; resize: vertical; }
.form-status { margin: 16px 0 0; color: var(--success); font-size: .85rem; min-height: 1.4em; }
.form-alert { padding: 14px 16px; margin-bottom: 22px; border: 1px solid; border-radius: 13px; font-size: .85rem; }
.form-alert.success { color: var(--success); border-color: rgba(102, 239, 176, .28); background: rgba(102, 239, 176, .07); }
.form-alert.error, .field-error { color: #ff9292; }
.field-error { display: block; margin: 6px 4px 0; font-size: .72rem; }
.contact-form .btn[disabled] { cursor: wait; opacity: .7; transform: none; }
.contact-form [aria-invalid="true"] { border-color: rgba(255, 146, 146, .72); }

/* Logos / CTA / footer */
.logo-cloud { padding: 36px 0; border-block: 1px solid var(--line); }
.logo-viewport { overflow: hidden; }
.logo-list { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; align-items: center; text-align: center; color: #66777a; font-weight: 800; font-size: .8rem; letter-spacing: .08em; }
.logo-list span { transition: color .2s; }
.logo-list span:hover { color: #d4e5e7; }
.brand-cloud-item { min-height: 42px; display: flex; align-items: center; justify-content: center; color: #66777a; transition: color .2s, opacity .2s; }
.brand-cloud-item strong { font-size: .8rem; letter-spacing: .08em; }
.brand-cloud-item img { width: auto; max-width: 130px; max-height: 38px; object-fit: contain; filter: grayscale(1) brightness(1.35); opacity: .62; transition: filter .2s, opacity .2s; }
.brand-cloud-item:hover { color: #d4e5e7; }
.brand-cloud-item:hover img { filter: grayscale(0) brightness(1); opacity: 1; }
.logo-list.marquee-ready {
  display: flex;
  width: max-content;
  animation: brand-marquee var(--logo-duration, 24s) linear infinite;
  will-change: transform;
}
.logo-list.marquee-ready:hover { animation-play-state: paused; }
.logo-list.marquee-ready .brand-cloud-item { flex: 0 0 var(--logo-item-width); }
@keyframes brand-marquee {
  to { transform: translateX(calc(-1 * var(--logo-shift))); }
}
.cta { overflow: hidden; }
.cta-box { min-height: 470px; padding: 70px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border: 1px solid var(--line); border-radius: 34px; background: radial-gradient(circle at 50% 110%, rgba(26, 219, 237, .17), transparent 52%), #050d0f; position: relative; overflow: hidden; }
.cta-box::before, .cta-box::after { content: ""; position: absolute; width: 460px; height: 460px; border: 1px solid rgba(76, 227, 242, .11); border-radius: 50%; bottom: -390px; }
.cta-box::after { width: 700px; height: 700px; bottom: -590px; }
.cta-box h2 { max-width: 830px; position: relative; z-index: 2; }
.cta-box p, .cta-box a { position: relative; z-index: 2; }
.site-footer { padding: 70px 0 26px; border-top: 1px solid var(--line); }
.footer-grid { display: flex; flex-wrap: wrap; gap: 50px; }
.footer-brand { flex: 1.6 1 260px; }
.footer-col { flex: 1 1 130px; }
.footer-brand img { width: 185px; margin-bottom: 22px; }
.footer-brand p { max-width: 330px; color: var(--muted); font-size: .82rem; }
.footer-col h4 { font-size: .76rem; text-transform: uppercase; letter-spacing: .15em; margin: 0 0 20px; color: #d7e8ea; }
.footer-col a { display: block; color: var(--muted); font-size: .82rem; margin-bottom: 11px; transition: color .2s; }
.footer-col a:hover { color: var(--cyan); }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; margin-top: 58px; padding-top: 24px; border-top: 1px solid var(--line); color: #5d6e71; font-size: .7rem; }
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s, transform .7s; }
.reveal.visible { opacity: 1; transform: none; }

@media (max-width: 980px) {
  .section { padding: 85px 0; }
  .menu-toggle { display: block; position: relative; z-index: 3; }
  .nav-links { position: fixed; inset: 0; padding: 120px 30px 40px; background: rgba(2, 7, 8, .97); flex-direction: column; justify-content: center; gap: 25px; font-size: 1.2rem; opacity: 0; visibility: hidden; transition: .25s; }
  .nav-links.open { opacity: 1; visibility: visible; }
  .nav-links a.active::after { bottom: -6px; }
  .hero-grid { grid-template-columns: 1fr; min-height: auto; }
  .hero-copy { position: relative; z-index: 2; }
  .planet-wrap { position: absolute; width: 82vw; height: 82vw; right: -18vw; top: 18%; opacity: .76; margin: 0; }
  .planet-scene { width: 72vw; }
  .planet-card { transform: scale(.9); }
  .hero h1 { font-size: clamp(3.5rem, 11vw, 6rem); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 .service-card:last-child { grid-column: span 2; }
  .process-item { grid-template-columns: 70px 1fr 1fr; }
  .service-detail { grid-template-columns: 70px 1fr 1fr; }
  .about-grid { gap: 50px; }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-layout { gap: 35px; }
  .dynamic-work-grid { grid-template-columns: repeat(2, 1fr); }
  .dynamic-work-card:first-child { grid-column: span 2; grid-row: auto; min-height: 420px; }
  .project-detail-grid { gap: 50px; }
  .footer-grid { gap: 38px; }
}

@media (max-width: 680px) {
  .container { width: min(calc(100% - 28px), var(--max)); }
  .nav { height: 75px; }
  .brand img { width: 160px; }
  .hero { padding-top: 120px; min-height: 930px; align-items: start; }
  .hero h1 { font-size: clamp(3rem, 15vw, 4.7rem); }
  .hero-actions { align-items: stretch; flex-direction: column; width: min(100%, 320px); }
  .hero-meta { margin-top: 42px; align-items: flex-start; flex-direction: column; gap: 10px; }
  .planet-wrap { width: 105vw; height: 105vw; top: 52%; right: -32vw; opacity: .78; }
  .planet-scene { width: 92vw; left: 3%; }
  .planet-card { min-width: 94px; padding: 8px; transform: scale(.82); }
  .planet-card-icon { width: 31px; height: 31px; flex-basis: 31px; }
  .planet-card-seo, .planet-card-code { left: -2%; }
  .planet-card-web, .planet-card-apple { right: -2%; }
  .scroll-note { display: none; }
  .section { padding: 68px 0; }
  .section-heading { display: block; margin-bottom: 35px; }
  .section-heading p { margin-top: 20px; }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-3 .service-card:last-child { grid-column: auto; }
  .service-card { min-height: 290px; }
  .work-grid, .case-grid { grid-template-columns: 1fr; }
  .dynamic-work-grid, .project-detail-grid { grid-template-columns: 1fr; }
  .dynamic-work-card:first-child { grid-column: auto; grid-row: auto; min-height: 390px; }
  .dynamic-work-card { min-height: 390px; }
  .project-hero { min-height: 760px; }
  .project-hero-copy { padding-bottom: 55px; }
  .work-card, .case-card { min-height: 390px; }
  .case-card:nth-child(3n) { grid-column: auto; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2) { border-right: 0; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .process-item, .service-detail { grid-template-columns: 45px 1fr; gap: 15px; }
  .process-item p, .service-detail > div:last-child { grid-column: 2; }
  .quote-panel { padding: 48px 22px; }
  .page-hero { min-height: 590px; padding: 145px 0 70px; }
  .page-hero h1 { font-size: clamp(3.2rem, 15vw, 5rem); }
  .page-hero::after { right: -370px; }
  .about-grid, .contact-layout { grid-template-columns: 1fr; gap: 45px; }
  .value-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .team-info { padding: 14px 4px 6px; }
  .contact-form { padding: 23px 17px; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .logo-list { grid-template-columns: repeat(2, 1fr); row-gap: 30px; }
  .cta-box { padding: 55px 22px; min-height: 430px; }
  .footer-grid { gap: 35px; }
  .footer-brand { flex-basis: 100%; }
  .footer-col { flex: 1 1 calc(50% - 18px); }
  .footer-bottom { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .logo-list.marquee-ready { animation: none !important; transform: none; }
  .planet-scene { transition: none; }
}