:root {
  --bg: #06101d;
  --bg-2: #081626;
  --bg-3: #0b1a2d;
  --paper: #f4f8fc;
  --ink: #061527;
  --white: #f8fbff;
  --muted: #8ea1b7;
  --line: rgba(255,255,255,.12);
  --line-strong: rgba(255,255,255,.2);
  --blue: #087cff;
  --cyan: #20c7ff;
  --violet: #7058ff;
  --radius: 28px;
  --header-h: 82px;
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --shadow: 0 40px 100px rgba(0,0,0,.35);
}

* { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--white);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .45s ease, transform .45s ease;
}
body.page-ready { opacity: 1; transform: none; }
body.page-leaving { opacity: 0; transform: translateY(-6px); transition-duration: .18s; }
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
img { display: block; max-width: 100%; }
::selection { background: var(--blue); color: #fff; }

.noise {
  position: fixed; inset: 0; z-index: 1000; pointer-events: none; opacity: .035;
  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='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}
.cursor-dot,.cursor-ring { position: fixed; left: 0; top: 0; z-index: 1200; pointer-events: none; border-radius: 999px; transform: translate(-100px,-100px); }
.cursor-dot { width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; background: var(--blue); box-shadow: 0 0 20px rgba(8,124,255,.7); }
.cursor-ring { width: 36px; height: 36px; margin: -18px 0 0 -18px; border: 1px solid rgba(255,255,255,.42); transition: width .2s ease,height .2s ease,margin .2s ease,background .2s ease,border-color .2s ease; }
.cursor-active .cursor-ring { width: 58px; height: 58px; margin: -29px 0 0 -29px; border-color: rgba(8,124,255,.6); background: rgba(8,124,255,.08); }
.scroll-progress { position: fixed; z-index: 1100; top: 0; left: 0; right: 0; height: 3px; background: rgba(255,255,255,.04); }
.scroll-progress span { display: block; width: 100%; height: 100%; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg,var(--blue),var(--violet),var(--cyan)); }

/* Header */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 800; height: var(--header-h);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 28px;
  padding: 0 clamp(20px,4vw,62px); border-bottom: 1px solid transparent;
  transition: height .3s ease, background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
}
.site-header.is-scrolled { height: 68px; background: rgba(5,13,24,.82); border-color: rgba(255,255,255,.08); backdrop-filter: blur(20px); }
.brand { width: clamp(135px,11vw,172px); position: relative; z-index: 2; }
.brand img { width: 100%; height: auto; }
.desktop-nav > div { display: flex; align-items: center; justify-content: center; gap: clamp(17px,1.7vw,29px); }
.desktop-nav a { position: relative; color: rgba(255,255,255,.67); font-size: 12.5px; white-space: nowrap; transition: color .22s ease; }
.desktop-nav a::after { content: ''; position: absolute; left: 0; bottom: -8px; width: 100%; height: 1px; background: var(--blue); transform: scaleX(0); transform-origin: 100% 50%; transition: transform .25s ease; }
.desktop-nav a:hover,.desktop-nav a.is-active { color: #fff; }
.desktop-nav a:hover::after,.desktop-nav a.is-active::after { transform: scaleX(1); transform-origin: 0 50%; }
.header-cta { justify-self: end; display: inline-flex; align-items: center; gap: 13px; padding: 10px 11px 10px 17px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; font-size: 12.5px; transition: border-color .2s ease,background .2s ease,transform .15s ease; }
.header-cta:hover { border-color: var(--blue); background: rgba(8,124,255,.08); }
.header-cta i { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--blue); font-style: normal; }
.menu-toggle { display: none; justify-self: end; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; background: rgba(255,255,255,.04); padding: 0; cursor: pointer; }
.menu-toggle span { display: block; width: 18px; height: 1px; background: #fff; margin: 5px auto; transition: transform .25s ease; }
.menu-toggle.is-open span:first-child { transform: translateY(3px) rotate(45deg); }
.menu-toggle.is-open span:last-child { transform: translateY(-3px) rotate(-45deg); }
.mobile-panel { position: fixed; inset: 0; z-index: 700; padding: 108px 24px 32px; background: #06101d; transform: translateY(-100%); visibility: hidden; transition: transform .45s cubic-bezier(.7,0,.1,1),visibility .45s; }
.mobile-panel.is-open { transform: none; visibility: visible; }
.mobile-menu { display: flex; flex-direction: column; }
.mobile-menu a { padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.11); font: 600 clamp(31px,9vw,50px)/1.08 var(--font-display); letter-spacing: -.05em; }
.mobile-panel-cta { display: flex; justify-content: space-between; margin-top: 30px; padding: 18px 21px; border-radius: 16px; background: var(--blue); font-weight: 700; }

/* Universal sections */
.section-dark { background: var(--bg); }
.section-deep { background: #030b14; }
.section-light { background: var(--paper); color: var(--ink); }
.section-blue { background: linear-gradient(145deg,#087cff 0%,#126cff 47%,#20c7ff 135%); color: #031123; }
.section-shell { padding: clamp(90px,11vh,150px) clamp(22px,5vw,82px); }
.section-shell--tight { padding-top: clamp(70px,8vh,105px); padding-bottom: clamp(70px,8vh,105px); }
.section-kicker { display: block; margin-bottom: 20px; color: rgba(255,255,255,.42); font-size: 10px; font-weight: 700; letter-spacing: .19em; text-transform: uppercase; }
.section-light .section-kicker,.section-blue .section-kicker { color: rgba(6,21,39,.48); }
.section-head { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(280px,.55fr); align-items: end; gap: 6vw; margin-bottom: clamp(50px,7vh,90px); }
.section-head h2,.page-hero h1,.home-statement h2 { margin: 0; font: 500 clamp(50px,6.4vw,102px)/.94 var(--font-display); letter-spacing: -.07em; }
.section-head h2 em,.page-hero h1 em,.home-statement h2 em { color: var(--blue); font-style: italic; font-weight: 500; }
.section-head > p { margin: 0 0 7px; max-width: 480px; color: rgba(255,255,255,.52); font-size: clamp(15px,1.25vw,18px); line-height: 1.6; }
.section-light .section-head > p { color: rgba(6,21,39,.58); }
.blue-link { display: inline-flex; align-items: center; gap: 12px; margin-top: 24px; color: #fff; font-weight: 700; }
.blue-link span { color: var(--blue); }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 54px; padding: 0 10px 0 22px; border: 0; border-radius: 999px; cursor: pointer; font-size: 13.5px; font-weight: 700; transition: transform .15s ease,background .25s ease,border-color .25s ease; }
.button i { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; font-style: normal; }
.button-primary { background: var(--blue); color: #fff; }
.button-primary i { background: #04101f; }
.button-primary:hover { background: #1591ff; }
.button-ghost { border: 1px solid rgba(255,255,255,.18); background: transparent; color: #fff; }
.button-ghost i { background: rgba(255,255,255,.07); }
.button-ghost:hover { border-color: rgba(255,255,255,.4); }
.tag-row { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-row span,.service-tags span { padding: 8px 11px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; color: rgba(255,255,255,.56); font-size: 10px; }
.empty-state { padding: clamp(40px,6vw,80px); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius); background: rgba(255,255,255,.025); }
.empty-state span { color: var(--blue); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; }
.empty-state h3 { margin: 22px 0 10px; font: 500 clamp(28px,4vw,52px)/1 var(--font-display); letter-spacing: -.05em; }
.empty-state p { max-width: 700px; margin: 0; color: rgba(255,255,255,.5); line-height: 1.6; }

/* Home hero */
.home-hero { position: relative; min-height: 100svh; overflow: hidden; display: grid; grid-template-columns: minmax(0,1.02fr) minmax(430px,.98fr); align-items: center; gap: 3vw; padding: calc(var(--header-h) + 5vh) clamp(22px,5vw,82px) 8vh; isolation: isolate; }
.home-hero::before { content: ''; position: absolute; inset: 0; z-index: -3; background: radial-gradient(circle at 86% 7%,rgba(8,124,255,.34),transparent 37%),radial-gradient(circle at 45% 110%,rgba(32,199,255,.16),transparent 35%),#06101d; }
.hero-grid { position: absolute; inset: 0; z-index: -2; opacity: .19; background-image: linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px); background-size: 70px 70px; mask-image: linear-gradient(90deg,transparent 8%,#000 60%,#000); }
.hero-copy { position: relative; z-index: 3; max-width: 900px; }
.eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; color: rgba(255,255,255,.58); font-size: 10px; font-weight: 700; letter-spacing: .19em; text-transform: uppercase; }
.eyebrow::before { content: ''; width: 28px; height: 1px; background: var(--blue); }
.hero-title { margin: 0; font: 600 clamp(58px,7.15vw,122px)/.89 var(--font-display); letter-spacing: -.075em; }
.hero-title .line { display: block; overflow: hidden; padding: .03em 0 .08em; }
.hero-title .line > span { display: block; transform: translateY(108%); animation: titleIn 1s cubic-bezier(.17,.84,.38,1) forwards; }
.hero-title .line:nth-child(2) > span { animation-delay: .12s; }
.hero-title .line:nth-child(3) > span { animation-delay: .24s; }
.hero-title .accent { color: var(--blue); font-style: italic; font-weight: 500; }
.hero-lead { max-width: 630px; margin: 27px 0 0; color: rgba(255,255,255,.67); font-size: clamp(16px,1.35vw,20px); line-height: 1.58; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 34px; }
.hero-proof { display: flex; align-items: center; gap: clamp(28px,4vw,58px); margin-top: 46px; padding-top: 23px; border-top: 1px solid rgba(255,255,255,.1); max-width: 650px; }
.hero-proof div { display: grid; gap: 4px; }
.hero-proof strong { font: 600 22px/1 var(--font-display); }
.hero-proof span { color: rgba(255,255,255,.42); font-size: 10px; }
.hero-stage { --hero-scroll:0px; --hero-rx:0deg; --hero-ry:0deg; position: relative; min-height: min(72vh,720px); perspective: 1500px; transform: translateY(var(--hero-scroll)); }
.hero-stage-inner { position: absolute; inset: 4% -6% 0 0; transform-style: preserve-3d; transform: rotateX(var(--hero-rx)) rotateY(calc(-9deg + var(--hero-ry))) rotateZ(1deg); transition: transform .18s ease-out; }
.hero-orbit { position: absolute; width: 86%; aspect-ratio: 1; right: -24%; top: -15%; border: 1px solid rgba(255,255,255,.09); border-radius: 50%; animation: rotate 32s linear infinite; }
.hero-orbit::after { content:''; position:absolute; width:7px;height:7px;border-radius:50%;background:var(--blue);left:25%;top:7%;box-shadow:0 0 22px var(--blue); }
.hero-browser { position: absolute; top: 10%; right: 0; width: min(47vw,720px); aspect-ratio: 1.46; padding: 10px; border: 1px solid rgba(255,255,255,.22); border-radius: 24px; background: linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.025)); box-shadow: var(--shadow),inset 0 1px rgba(255,255,255,.14); backdrop-filter: blur(16px); transform: translateZ(30px); animation: floatBrowser 7s ease-in-out infinite; }
.hero-browser-bar,.project-browser-bar { height: 34px; display: flex; align-items: center; gap: 7px; padding: 0 10px; }
.hero-browser-bar span,.project-browser-bar span { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.28); }
.hero-browser-bar em,.project-browser-bar em { margin: 0 auto; padding-right: 25px; color: rgba(255,255,255,.35); font-size: 8px; font-style: normal; }
.hero-browser-screen { position: relative; height: calc(100% - 34px); overflow: hidden; border-radius: 16px; background: #07111e; }
.hero-browser-screen img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transform: scale(1.025); }
.hero-browser-screen::after { content:''; position:absolute; inset:0; box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); pointer-events:none; }
.hero-phone { position: absolute; z-index: 3; left: 0; bottom: 0; width: min(17vw,245px); aspect-ratio: .49; padding: 9px; border: 1px solid rgba(255,255,255,.22); border-radius: 35px; background: linear-gradient(145deg,rgba(255,255,255,.13),rgba(255,255,255,.03)); box-shadow: 0 38px 80px rgba(0,0,0,.45); transform: translateZ(90px) rotateZ(-4deg); animation: floatPhone 6s ease-in-out infinite .35s; }
.hero-phone-screen { position: relative; height: 100%; overflow: hidden; border-radius: 27px; background: #06101d; }
.hero-phone-screen img { width: 100%; height: 100%; object-fit: cover; object-position: 50% top; }
.phone-notch,.mini-notch { position:absolute; z-index:4; top:12px; left:50%; transform:translateX(-50%); width:34%; height:16px; border-radius:20px; background:#030b14; }
.hero-project-badge { position: absolute; z-index: 5; right: 2%; bottom: 3%; width: min(265px,40%); padding: 16px 17px; border: 1px solid rgba(255,255,255,.17); border-radius: 18px; background: rgba(5,13,24,.72); backdrop-filter: blur(16px); }
.hero-project-badge span { color: var(--blue); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; }
.hero-project-badge strong { display: block; margin-top: 7px; font: 600 20px/1.05 var(--font-display); }
.hero-project-badge small { display:block;margin-top:6px;color:rgba(255,255,255,.45);font-size:10px; }
.scroll-cue { position: absolute; left: clamp(22px,5vw,82px); bottom: 22px; display:flex;align-items:center;gap:13px;color:rgba(255,255,255,.34);font-size:8px;letter-spacing:.19em;text-transform:uppercase; }
.scroll-cue i { width:55px;height:1px;background:rgba(255,255,255,.16);position:relative;overflow:hidden; }
.scroll-cue i::after { content:'';position:absolute;inset:0;background:var(--blue);transform:translateX(-100%);animation:cue 2.3s ease-in-out infinite; }

/* Homepage statement */
.home-statement { display:grid;grid-template-columns:.32fr 1fr;gap:6vw;padding:clamp(90px,12vh,160px) clamp(22px,6vw,100px);background:var(--paper);color:var(--ink); }
.home-statement .section-kicker { color:rgba(6,21,39,.45);padding-top:11px; }
.home-statement h2 { max-width:1180px; }
.home-statement h2 em { color:#6d58dd; }
.home-statement-bottom { grid-column:2;display:grid;grid-template-columns:minmax(280px,620px) auto;justify-content:space-between;align-items:end;gap:40px;margin-top:35px;padding-top:30px;border-top:1px solid rgba(6,21,39,.17); }
.home-statement-bottom p { margin:0;color:rgba(6,21,39,.62);font-size:clamp(16px,1.3vw,20px);line-height:1.65; }
.statement-mark { width:clamp(95px,10vw,145px); }

/* Projects */
.projects-section { padding: clamp(90px,11vh,145px) clamp(22px,4vw,66px); }
.project-stack { display:grid;gap:clamp(22px,4vh,50px); }
.project-panel { --project-parallax:0px; position:relative;overflow:hidden;min-height:min(78vh,760px);display:grid;grid-template-columns:minmax(330px,.38fr) minmax(0,.62fr);gap:3vw;padding:clamp(30px,4vw,62px);border:1px solid rgba(255,255,255,.12);border-radius:32px;background:linear-gradient(135deg,rgba(255,255,255,.025),rgba(255,255,255,.01));isolation:isolate; }
.project-panel::before { content:'';position:absolute;z-index:-1;width:540px;aspect-ratio:1;right:-12%;top:0;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--project-color) 24%, transparent),transparent 68%);filter:blur(4px); }
.project-panel--compact { min-height:min(72vh,690px); }
.project-copy { position:relative;z-index:3;display:flex;flex-direction:column;align-items:flex-start; }
.project-count { color:rgba(255,255,255,.34);font-size:10px;letter-spacing:.14em; }
.project-type { margin:clamp(60px,10vh,105px) 0 17px;color:var(--project-color);font-size:10px;font-weight:700;letter-spacing:.15em;text-transform:uppercase; }
.project-copy h3 { margin:0;font:600 clamp(48px,5vw,86px)/.92 var(--font-display);letter-spacing:-.07em; }
.project-description { max-width:500px;margin:24px 0;color:rgba(255,255,255,.57);font-size:clamp(15px,1.2vw,18px);line-height:1.62; }
.project-stat { display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:28px;color:rgba(255,255,255,.58);font-size:12px; }
.project-stat i { width:8px;height:8px;border-radius:50%;background:var(--project-color);box-shadow:0 0 18px var(--project-color); }
.project-link { display:inline-flex;align-items:center;gap:13px;margin-top:22px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.18);font-weight:700;font-size:13px; }
.project-link span { color:var(--project-color); }
.project-visual { position:relative;min-height:540px;transform:translateY(var(--project-parallax));transition:transform .08s linear; }
.project-glow { position:absolute;width:70%;aspect-ratio:1;right:-12%;top:5%;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--project-color) 18%,transparent),transparent 65%); }
.project-browser { position:absolute;right:0;top:9%;width:86%;aspect-ratio:1.52;padding:9px;border:1px solid rgba(255,255,255,.18);border-radius:22px;background:rgba(255,255,255,.94);box-shadow:0 38px 90px rgba(0,0,0,.36);transform:rotateZ(1deg); }
.project-browser-bar { color:#061527; }
.project-browser-bar span { background:rgba(6,21,39,.25); }
.project-browser-bar em { color:rgba(6,21,39,.42); }
.project-image-mask { position:relative;overflow:hidden;width:100%;height:calc(100% - 34px);border-radius:14px;background:#0a1728;clip-path:inset(0 0 100% 0 round 14px);transition:clip-path 1.05s cubic-bezier(.17,.84,.38,1) .12s; }
.project-image-mask img { width:100%;height:100%;object-fit:cover;object-position:top center;transform:scale(1.07);transition:transform 1.15s cubic-bezier(.17,.84,.38,1) .08s; }
.project-phone { position:absolute;z-index:3;left:1%;bottom:6%;width:28%;aspect-ratio:.52;padding:8px;border:1px solid rgba(255,255,255,.2);border-radius:31px;background:#06101d;box-shadow:0 34px 70px rgba(0,0,0,.5);transform:rotateZ(-4deg) translateY(28px);opacity:0;transition:transform .9s cubic-bezier(.17,.84,.38,1) .22s,opacity .8s ease .22s; }
.project-phone .project-image-mask { height:100%;border-radius:23px; }
.project-panel.is-visible .project-image-mask { clip-path:inset(0 0 0 0 round 14px); }
.project-panel.is-visible .project-image-mask img { transform:scale(1); }
.project-panel.is-visible .project-phone { transform:rotateZ(-4deg) translateY(0);opacity:1; }

/* Capabilities home */
.capabilities-home { padding:clamp(85px,10vh,130px) clamp(22px,5vw,82px);background:#030b14; }
.capability-grid { display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line); }
.capability-card { position:relative;min-height:330px;padding:30px 27px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;transition:background .3s ease; }
.capability-card:hover { background:rgba(255,255,255,.03); }
.capability-card > span { color:rgba(255,255,255,.34);font-size:10px; }
.capability-card h3 { margin:92px 0 13px;font:500 clamp(25px,2.2vw,37px)/1 var(--font-display);letter-spacing:-.045em; }
.capability-card p { margin:0;color:rgba(255,255,255,.49);font-size:14px;line-height:1.58; }
.capability-card i { position:absolute;right:22px;top:22px;width:40px;height:40px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.14);border-radius:50%;font-style:normal;transition:transform .3s ease,background .3s ease; }
.capability-card:hover i { transform:rotate(45deg);background:var(--blue);border-color:var(--blue); }

/* Page hero */
.page-hero { position:relative;min-height:70svh;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(300px,.55fr);align-items:end;gap:7vw;padding:calc(var(--header-h) + 11vh) clamp(22px,5vw,82px) clamp(70px,9vh,120px);overflow:hidden;isolation:isolate; }
.page-hero::before { content:'';position:absolute;z-index:-2;inset:0;background:radial-gradient(circle at 83% 12%,rgba(8,124,255,.26),transparent 35%),#06101d; }
.page-hero::after { content:'+';position:absolute;z-index:-1;right:-.02em;bottom:-.38em;color:rgba(255,255,255,.025);font:700 min(65vw,900px)/1 var(--font-display); }
.page-hero-copy { max-width:1000px; }
.page-hero .eyebrow { margin-bottom:25px; }
.page-hero > p,.page-hero-aside { margin:0 0 9px;color:rgba(255,255,255,.56);font-size:clamp(16px,1.45vw,21px);line-height:1.62;max-width:500px; }
.page-hero-meta { margin-top:34px;display:flex;flex-wrap:wrap;gap:10px; }
.page-hero-meta span { padding:9px 13px;border:1px solid rgba(255,255,255,.13);border-radius:999px;color:rgba(255,255,255,.55);font-size:10px; }

/* About */
.about-story { display:grid;grid-template-columns:.35fr 1fr;gap:7vw;padding:clamp(95px,12vh,155px) clamp(22px,6vw,100px);background:var(--paper);color:var(--ink); }
.about-story .section-kicker { color:rgba(6,21,39,.45);padding-top:12px; }
.about-story-main h2 { margin:0;max-width:1180px;font:500 clamp(48px,6.6vw,104px)/.96 var(--font-display);letter-spacing:-.07em; }
.about-story-main h2 em { color:#6d58dd;font-style:italic; }
.about-story-bottom { display:grid;grid-template-columns:minmax(280px,620px) auto;align-items:end;justify-content:space-between;gap:40px;margin-top:70px;padding-top:30px;border-top:1px solid rgba(6,21,39,.16); }
.about-story-bottom p { margin:0;color:rgba(6,21,39,.62);font-size:clamp(16px,1.35vw,20px);line-height:1.68; }
.about-story-bottom img { width:clamp(100px,11vw,155px); }
.principles { padding:clamp(90px,11vh,145px) clamp(22px,5vw,82px); }
.principle-grid { display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line); }
.principle { min-height:340px;padding:35px;border-right:1px solid var(--line);border-bottom:1px solid var(--line); }
.principle span { color:var(--blue);font-size:10px;letter-spacing:.16em; }
.principle h3 { margin:110px 0 15px;font:500 clamp(27px,2.7vw,42px)/1 var(--font-display);letter-spacing:-.05em; }
.principle p { margin:0;color:rgba(255,255,255,.5);line-height:1.62; }

/* Services */
.services-list { border-top:1px solid var(--line); }
.service-row { display:grid;grid-template-columns:70px minmax(270px,.95fr) minmax(220px,.6fr) 52px;align-items:center;gap:28px;min-height:195px;padding:34px 0;border-bottom:1px solid var(--line);position:relative; }
.service-number { color:rgba(255,255,255,.34);font-size:10px; }
.service-main h3 { margin:0 0 13px;font:500 clamp(31px,3vw,49px)/1 var(--font-display);letter-spacing:-.05em; }
.service-main p { max-width:680px;margin:0;color:rgba(255,255,255,.5);line-height:1.62; }
.service-tags { display:flex;flex-wrap:wrap;gap:7px;justify-content:flex-end; }
.service-arrow { width:46px;height:46px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.14);border-radius:50%;font-style:normal;transition:transform .3s ease,background .3s ease; }
.service-row:hover .service-arrow { transform:rotate(45deg);background:var(--blue); }

/* Process */
.process-layout { display:grid;grid-template-columns:.7fr 1.3fr;gap:8vw;padding:clamp(90px,11vh,145px) clamp(22px,5vw,82px); }
.process-sticky { position:sticky;top:130px;align-self:start; }
.process-sticky h2 { margin:0;font:500 clamp(50px,5.6vw,88px)/.95 var(--font-display);letter-spacing:-.07em; }
.process-sticky h2 em { color:#7755e9;font-style:italic; }
.process-sticky p { max-width:490px;margin:28px 0 0;color:rgba(6,21,39,.67);font-size:17px;line-height:1.65; }
.process-list { border-top:1px solid rgba(6,21,39,.25); }
.process-step { display:grid;grid-template-columns:55px 1fr 48px;gap:25px;align-items:start;padding:38px 0;border-bottom:1px solid rgba(6,21,39,.25); }
.process-step > span { font-size:10px; }
.process-step h3 { margin:-4px 0 12px;font:600 clamp(30px,3vw,48px)/1 var(--font-display);letter-spacing:-.05em; }
.process-step p { max-width:680px;margin:0;color:rgba(6,21,39,.68);font-size:16px;line-height:1.62; }
.process-step i { width:42px;height:42px;display:grid;place-items:center;border:1px solid rgba(6,21,39,.24);border-radius:50%;font-style:normal; }

/* Gallery */
.gallery-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px; }
.gallery-card { position:relative;overflow:hidden;min-height:500px;border:1px solid rgba(255,255,255,.12);border-radius:28px;background:rgba(255,255,255,.02); }
.gallery-card--wide { grid-column:span 2;min-height:650px; }
.gallery-image { height:calc(100% - 92px);min-height:400px;overflow:hidden;background:#0a1728; }
.gallery-image img { width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .8s cubic-bezier(.2,.7,.2,1),filter .5s ease; }
.gallery-card:hover .gallery-image img { transform:scale(1.035); }
.gallery-meta { height:92px;display:flex;align-items:center;justify-content:space-between;padding:16px 22px; }
.gallery-meta span { color:rgba(255,255,255,.38);font-size:9px;letter-spacing:.12em;text-transform:uppercase; }
.gallery-meta h3 { margin:5px 0 0;font:500 23px/1 var(--font-display);letter-spacing:-.04em; }
.gallery-meta i { width:42px;height:42px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.14);border-radius:50%;font-style:normal; }

/* Reviews */
.reviews-grid { display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line); }
.review-card { min-height:420px;padding:clamp(28px,4vw,55px);border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column; }
.stars { color:var(--blue);letter-spacing:.15em;font-size:12px; }
.review-card blockquote { margin:85px 0 60px;font:500 clamp(25px,2.7vw,43px)/1.18 var(--font-display);letter-spacing:-.045em; }
.review-author { margin-top:auto;display:flex;align-items:center;gap:13px; }
.review-author > span { width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:rgba(8,124,255,.12);color:var(--blue);font-weight:700;font-size:12px; }
.review-author strong,.review-author small { display:block; }
.review-author strong { font-size:13px; }
.review-author small { margin-top:3px;color:rgba(255,255,255,.42);font-size:10px; }

/* Contact */
.contact-layout { display:grid;grid-template-columns:minmax(0,1.1fr) minmax(330px,.55fr);gap:8vw;padding:clamp(80px,10vh,135px) clamp(22px,5vw,82px) clamp(90px,12vh,150px); }
.contact-form { display:grid;grid-template-columns:1fr 1fr;gap:25px 24px; }
.contact-form label { display:grid;gap:9px; }
.contact-form label.full { grid-column:1/-1; }
.contact-form label.honeypot { position:absolute;left:-9999px; }
.contact-form label > span { color:rgba(255,255,255,.45);font-size:9px;font-weight:700;letter-spacing:.15em;text-transform:uppercase; }
.contact-form input,.contact-form textarea,.contact-form select { width:100%;border:0;border-bottom:1px solid rgba(255,255,255,.2);border-radius:0;padding:14px 0;color:#fff;background:transparent;outline:none;resize:vertical;transition:border-color .22s ease; }
.contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus { border-color:var(--blue); }
.contact-form input::placeholder,.contact-form textarea::placeholder { color:rgba(255,255,255,.27); }
.contact-form select option { color:#061527;background:#fff; }
.contact-form .button { justify-self:start;margin-top:5px; }
.form-status { grid-column:1/-1;min-height:20px;margin:0;color:rgba(255,255,255,.48);font-size:11px; }
.contact-card { align-self:start;padding:30px;border:1px solid rgba(255,255,255,.13);border-radius:25px;background:rgba(255,255,255,.02); }
.contact-card .label { color:rgba(255,255,255,.38);font-size:9px;letter-spacing:.16em;text-transform:uppercase; }
.contact-row { padding:28px 0;border-bottom:1px solid rgba(255,255,255,.12); }
.contact-row.is-hidden { display:none; }
.contact-row a { font:500 clamp(21px,2vw,31px)/1.1 var(--font-display);letter-spacing:-.04em;word-break:break-word; }
.contact-card p { margin:22px 0 0;color:rgba(255,255,255,.43);font-size:12px;line-height:1.55; }

/* CTA + footer */
.final-cta { position:relative;overflow:hidden;padding:clamp(95px,12vh,165px) clamp(22px,5vw,82px);border-top:1px solid rgba(255,255,255,.08); }
.final-cta::after { content:'+';position:absolute;right:-.03em;bottom:-.42em;color:rgba(8,124,255,.09);font:700 min(63vw,850px)/1 var(--font-display); }
.final-cta h2 { position:relative;z-index:2;max-width:1050px;margin:0;font:500 clamp(54px,7vw,114px)/.92 var(--font-display);letter-spacing:-.075em; }
.final-cta h2 em { color:var(--blue);font-style:italic; }
.final-cta .button { position:relative;z-index:2;margin-top:35px; }
.site-footer { padding:50px clamp(22px,5vw,82px) 26px;background:#020912;border-top:1px solid rgba(255,255,255,.08); }
.footer-top { display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;gap:36px; }
.footer-top img { width:145px; }
.footer-top p { margin:0;max-width:430px;color:rgba(255,255,255,.42);font-size:12px;line-height:1.55; }
.footer-top nav { justify-self:end;display:flex;gap:18px;flex-wrap:wrap;justify-content:flex-end; }
.footer-top nav a { color:rgba(255,255,255,.55);font-size:11px; }
.footer-bottom { display:flex;justify-content:space-between;gap:20px;margin-top:45px;padding-top:20px;border-top:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.27);font-size:9px; }

/* Reveal */
.reveal-up,.reveal-row,.reveal-card { opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal-row { transform:translateY(18px); }
.reveal-card:nth-child(2n) { transition-delay:.07s; }
.reveal-panel { opacity:0;transform:translateY(42px) scale(.985);transition:opacity .85s ease,transform .95s cubic-bezier(.2,.7,.2,1); }
.reveal-up.is-visible,.reveal-row.is-visible,.reveal-card.is-visible,.reveal-panel.is-visible { opacity:1;transform:none; }

@keyframes titleIn { to { transform:translateY(0); } }
@keyframes floatBrowser { 0%,100%{transform:translateZ(30px) translateY(0)}50%{transform:translateZ(30px) translateY(-12px)} }
@keyframes floatPhone { 0%,100%{transform:translateZ(90px) rotateZ(-4deg) translateY(0)}50%{transform:translateZ(90px) rotateZ(-4deg) translateY(10px)} }
@keyframes rotate { to{transform:rotate(360deg)} }
@keyframes cue { 0%{transform:translateX(-100%)}50%,100%{transform:translateX(100%)} }

@media (max-width: 1240px) {
  .desktop-nav { display:none; }
  .site-header { grid-template-columns:1fr auto auto; }
  .menu-toggle { display:block; }
  .capability-grid { grid-template-columns:repeat(2,1fr); }
}

@media (max-width: 960px) {
  :root { --header-h:72px; }
  .cursor-dot,.cursor-ring { display:none; }
  .header-cta { display:none; }
  .site-header { grid-template-columns:1fr auto;padding:0 20px; }
  .home-hero { min-height:auto;grid-template-columns:1fr;padding:125px 22px 75px; }
  .hero-title { font-size:clamp(50px,12.7vw,90px); }
  .hero-stage { min-height:570px;margin-top:15px; }
  .hero-stage-inner { inset:4% 0 0 3%;transform:rotateY(-6deg) rotateX(2deg) rotateZ(1deg); }
  .hero-browser { width:88vw;right:-9%; }
  .hero-phone { width:31vw;left:0; }
  .scroll-cue { display:none; }
  .home-statement { grid-template-columns:1fr;gap:30px;padding:100px 22px; }
  .home-statement-bottom { grid-column:1;margin-top:30px; }
  .section-head { grid-template-columns:1fr;gap:27px; }
  .project-panel { grid-template-columns:1fr;min-height:auto; }
  .project-type { margin-top:40px; }
  .project-visual { min-height:480px;margin-top:20px; }
  .page-hero { min-height:65svh;grid-template-columns:1fr;gap:35px;padding:135px 22px 75px; }
  .about-story { grid-template-columns:1fr;gap:30px;padding:100px 22px; }
  .principle-grid { grid-template-columns:1fr; }
  .principle { min-height:280px; }
  .principle h3 { margin-top:72px; }
  .service-row { grid-template-columns:48px 1fr 45px;gap:18px; }
  .service-tags { grid-column:2;justify-content:flex-start; }
  .service-arrow { grid-column:3;grid-row:1; }
  .process-layout { grid-template-columns:1fr;gap:55px; }
  .process-sticky { position:relative;top:auto; }
  .gallery-grid { grid-template-columns:1fr; }
  .gallery-card--wide { grid-column:auto;min-height:520px; }
  .reviews-grid { grid-template-columns:1fr; }
  .contact-layout { grid-template-columns:1fr;gap:55px; }
  .footer-top { grid-template-columns:1fr; }
  .footer-top nav { justify-self:start;justify-content:flex-start; }
}

@media (max-width: 640px) {
  .brand { width:137px; }
  .home-hero { padding-left:18px;padding-right:18px; }
  .hero-title { font-size:clamp(47px,14.5vw,72px);letter-spacing:-.065em; }
  .hero-lead { font-size:15.5px; }
  .hero-actions { display:grid; }
  .button { width:100%; }
  .hero-proof { display:grid;grid-template-columns:repeat(2,1fr);gap:20px; }
  .hero-stage { min-height:410px; }
  .hero-browser { width:96vw;right:-23%;border-radius:18px; }
  .hero-phone { width:36vw;border-radius:26px; }
  .hero-phone-screen { border-radius:19px; }
  .hero-project-badge { right:0;bottom:-3%;width:60%;padding:12px; }
  .hero-project-badge strong { font-size:16px; }
  .section-shell,.projects-section,.capabilities-home,.principles,.process-layout { padding-left:18px;padding-right:18px; }
  .section-head h2,.page-hero h1,.home-statement h2,.final-cta h2 { font-size:clamp(43px,12vw,66px); }
  .home-statement { padding-left:18px;padding-right:18px; }
  .home-statement-bottom,.about-story-bottom { grid-template-columns:1fr; }
  .statement-mark,.about-story-bottom img { justify-self:end; }
  .project-panel { padding:28px 19px;border-radius:23px; }
  .project-copy h3 { font-size:clamp(48px,14vw,65px); }
  .project-description { font-size:14.5px; }
  .project-visual { min-height:315px; }
  .project-browser { width:95%;right:-16%;border-radius:16px; }
  .project-phone { width:32%;left:-2%;border-radius:22px;padding:6px; }
  .project-phone .project-image-mask { border-radius:16px; }
  .project-image-mask { border-radius:10px; }
  .capability-grid { grid-template-columns:1fr; }
  .capability-card { min-height:270px; }
  .capability-card h3 { margin-top:65px; }
  .page-hero { padding-left:18px;padding-right:18px; }
  .about-story { padding-left:18px;padding-right:18px; }
  .service-row { grid-template-columns:38px 1fr;gap:14px; }
  .service-arrow { display:none; }
  .service-tags { grid-column:2; }
  .process-step { grid-template-columns:37px 1fr;gap:13px; }
  .process-step i { display:none; }
  .gallery-card,.gallery-card--wide { min-height:410px;border-radius:22px; }
  .gallery-image { min-height:320px; }
  .review-card { min-height:350px;padding:29px 20px; }
  .review-card blockquote { margin:55px 0 45px; }
  .contact-form { grid-template-columns:1fr; }
  .contact-form label.full,.form-status { grid-column:auto; }
  .contact-form .button { width:100%; }
  .contact-card { padding:23px 18px; }
  .final-cta { padding-left:18px;padding-right:18px; }
  .footer-bottom { flex-direction:column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important; }
  body { opacity:1;transform:none; }
  .reveal-up,.reveal-row,.reveal-card,.reveal-panel { opacity:1;transform:none; }
  .hero-title .line > span { transform:none; }
  .project-image-mask { clip-path:none; }
  .project-phone { opacity:1;transform:rotateZ(-4deg); }
}