:root {
  --bg:#090a12;
  --ink:#f3f1ea;
  --muted:#aaa9b6;
  --glass:rgba(255,255,255,.065);
  --edge:rgba(255,255,255,.16);
  --violet:#875dff;
  --pink:#ff70bb;
  --cyan:#5ae7f5;
  --lime:#b9ff5a
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth
}

body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:15px/1.6 Manrope,Arial,sans-serif;
  overflow-x:hidden
}

.wrap {
  width:min(1190px,calc(100% - 48px));
  margin:auto
}

.grain {
  pointer-events:none;
  position:fixed;
  z-index:30;
  inset:0;
  opacity:.065;
  background:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect filter='url(%23a)' width='100%25' height='100%25'/%3E%3C/svg%3E")
}

.pointer-glow {
  width:520px;
  height:520px;
  pointer-events:none;
  position:fixed;
  z-index:10;
  border-radius:50%;
  background:radial-gradient(circle,rgba(135,93,255,.13),transparent 67%);
  transform:translate(-50%,-50%)
}

.header {
  position:relative;
  z-index:11;
  border-bottom:1px solid rgba(255,255,255,.09);
  background:rgba(9,10,18,.6);
  backdrop-filter:blur(22px)
}

.header-top {
  height:46px;
  border-bottom:1px solid rgba(255,255,255,.08);
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  align-items:center
}

.brand {
  font:10px 'DM Mono',monospace;
  letter-spacing:.8px;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--ink)
}

.brand span {
  color:var(--cyan)
}

.header-top p {
  margin:0;
  text-align:center;
  font:8px/1.35 'DM Mono';
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.8px
}

.mini-cta {
  justify-self:end;
  color:var(--ink);
  font-size:10px;
  text-decoration:none;
  font-weight:700
}

.mini-cta b {
  color:var(--cyan);
  font-size:16px;
  margin-left:6px
}

.main-nav {
  height:88px;
  display:flex;
  align-items:center;
  justify-content:space-between
}

.monogram {
  font:700 24px/.8 'DM Mono',monospace;
  letter-spacing:-5px;
  text-decoration:none;
  color:#fff
}

.monogram span {
  color:var(--pink)
}

nav {
  display:flex;
  gap:31px;
  margin-left:83px
}

nav a {
  font-size:10px;
  font-weight:800;
  text-decoration:none;
  color:#d5d4de;
  transition:color .2s
}

nav a:hover {
  color:var(--cyan)
}

.nav-button,.action {
  display:inline-flex;
  align-items:center;
  gap:23px;
  padding:14px 17px 14px 21px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  background:linear-gradient(115deg,rgba(135,93,255,.78),rgba(255,112,187,.63));
  box-shadow:inset 0 1px rgba(255,255,255,.43),0 9px 27px rgba(108,60,255,.21);
  color:#fff;
  text-decoration:none;
  font-size:11px;
  font-weight:800;
  transition:.3s
}

.nav-button span,.action b {
  font-size:19px;
  font-weight:400
}

.nav-button:hover,.action:hover {
  transform:translateY(-4px) scale(1.02);
  box-shadow:inset 0 1px rgba(255,255,255,.6),0 17px 35px rgba(112,62,255,.4)
}

.hero {
  position:relative;
  display:grid;
  grid-template-columns:50% 50%;
  padding:101px 0 116px;
  min-height:705px
}

.kicker {
  font:10px 'DM Mono',monospace;
  letter-spacing:.3px;
  text-transform:uppercase;
  margin:0 0 19px;
  font-weight:bold;
  color:#d9d6e2
}

.kicker i {
  display:inline-block;
  width:7px;
  height:7px;
  background:var(--cyan);
  border-radius:50%;
  margin-right:10px;
  box-shadow:0 0 0 5px rgba(90,231,245,.12),0 0 18px var(--cyan)
}

h1,h2,h3,p {
  margin-top:0
}

h1,h2 {
  font-family:'Playfair Display',Georgia,serif;
  font-weight:700;
  letter-spacing:-3px;
  line-height:.98
}

h1 {
  font-size:clamp(50px,5.7vw,79px);
  margin-bottom:29px;
  text-shadow:0 9px 45px rgba(100,73,255,.3)
}

h2 {
  font-size:clamp(40px,4.8vw,64px);
  margin-bottom:0
}

em {
  font-weight:600;
  font-style:italic;
  background:linear-gradient(110deg,var(--cyan),#d4b5ff 45%,var(--pink));
  background-clip:text;
  -webkit-background-clip:text;
  color:transparent
}

.hero-lead {
  max-width:450px;
  color:#bab9c4;
  font-size:16px
}

.hero-buttons {
  display:flex;
  align-items:center;
  gap:28px;
  margin-top:32px
}

.primary {
  background:linear-gradient(115deg,#925dff,#ff62b4)
}

.watch-work {
  font-size:10px;
  font-weight:800;
  text-decoration:none;
  color:#e4e2eb;
  border-bottom:1px solid rgba(255,255,255,.45);
  padding-bottom:3px
}

.watch-work span {
  color:var(--cyan);
  font-size:18px;
  margin-right:6px
}

.hero-visual {
  position:relative;
  min-height:445px;
  isolation:isolate;
  perspective:1000px
}

.hero-visual:before {
  content:'';
  position:absolute;
  inset:10px -28px -20px 0;
  border-radius:50%;
  background:radial-gradient(ellipse at 62% 47%,rgba(135,93,255,.25),transparent 48%);
  filter:blur(15px)
}

.sun {
  position:absolute;
  z-index:-1;
  width:280px;
  height:280px;
  border-radius:50%;
  right:71px;
  top:57px;
  background:radial-gradient(circle at 31% 25%,#fff 0, #ffb4da 6%,#ff6fc1 27%,#8d60ff 61%,#24175c 100%);
  box-shadow:inset -20px -25px 34px rgba(22,11,62,.68),inset 12px 15px 18px rgba(255,255,255,.42),0 0 48px 6px rgba(162,85,255,.37);
  animation:float 7s ease-in-out infinite
}

.sun:after {
  content:'';
  position:absolute;
  inset:-30px;
  border-radius:50%;
  border:1px solid rgba(196,166,255,.22);
  box-shadow:0 0 0 28px rgba(112,74,255,.045),0 0 0 68px rgba(112,74,255,.025)
}

.hero-card {
  position:absolute;
  z-index:2;
  border:1px solid rgba(255,255,255,.24);
  background:linear-gradient(130deg,rgba(255,255,255,.22),rgba(255,255,255,.035));
  backdrop-filter:blur(16px);
  box-shadow:inset 0 1px rgba(255,255,255,.32),0 22px 44px rgba(0,0,0,.36)
}

.card-note {
  top:48px;
  left:5px;
  width:118px;
  height:101px;
  padding:20px;
  border-radius:18px;
  font:13px/1.1 'DM Mono';
  transform:rotate(-10deg);
  animation:floatTilt 7s ease-in-out infinite
}

.card-note b {
  font-size:19px;
  color:var(--cyan)
}

.card-browser {
  width:247px;
  height:178px;
  right:4px;
  bottom:28px;
  padding:14px;
  border-radius:17px;
  transform:rotateY(-9deg) rotateX(4deg);
  animation:cardFloat 8s ease-in-out infinite
}

.browser-bar {
  display:flex;
  gap:4px
}

.browser-bar span {
  width:5px;
  height:5px;
  border-radius:50%;
  background:#d7d7d7
}

.browser-title {
  font:12px/1.25 'DM Mono';
  margin:15px 0 11px
}

.browser-title b {
  font-size:16px;
  color:#fff
}

.browser-lines {
  display:flex;
  gap:3px;
  margin-bottom:12px
}

.browser-lines i {
  height:20px;
  flex:1;
  border-radius:4px;
  background:rgba(255,255,255,.2)
}

.browser-lines i:nth-child(2) {
  background:linear-gradient(#b5ff71,#6ed3d1)
}

.browser-action {
  font-size:7px;
  text-align:center;
  border-radius:7px;
  background:linear-gradient(90deg,var(--violet),var(--pink));
  color:#fff;
  padding:7px
}

.card-stat {
  width:149px;
  height:96px;
  padding:11px;
  left:40px;
  bottom:21px;
  border-radius:15px;
  transform:rotate(5deg);
  animation:floatTilt 6s 1s ease-in-out infinite
}

.card-stat small {
  font-size:7px;
  text-transform:uppercase;
  color:#d6d3e2
}

.card-stat b {
  display:block;
  font:20px 'DM Mono';
  margin-top:1px;
  color:var(--lime);
  text-shadow:0 0 20px rgba(185,255,90,.5)
}

.card-stat svg {
  position:absolute;
  width:108px;
  bottom:5px;
  left:12px
}

.card-stat path {
  fill:none;
  stroke:var(--cyan);
  filter:drop-shadow(0 0 3px var(--cyan));
  stroke-width:2.5
}

.scribble {
  position:absolute;
  right:24px;
  top:25px;
  z-index:3;
  font:italic 19px/1.05 'Playfair Display';
  transform:rotate(11deg);
  color:#fff;
  text-shadow:0 2px 12px #2c1552
}

.scribble span {
  font-size:12px
}

.visual-number {
  position:absolute;
  z-index:-1;
  font:115px/.8 'DM Mono';
  color:rgba(255,255,255,.07);
  left:22px;
  top:166px
}

.hero-bottom {
  position:absolute;
  bottom:28px;
  left:0;
  right:0;
  border-top:1px solid rgba(255,255,255,.14);
  padding-top:13px;
  display:flex;
  justify-content:space-between;
  text-transform:uppercase;
  font:8px/1.35 'DM Mono';
  color:#9795a4;
  letter-spacing:.5px
}

.scroll {
  color:#e9e7ef
}

.scroll i {
  display:inline-block;
  background:var(--cyan);
  box-shadow:0 0 9px var(--cyan);
  width:30px;
  height:1px;
  vertical-align:middle;
  margin-right:8px
}

.trust-bar {
  position:relative;
  overflow:hidden;
  background:linear-gradient(90deg,#512ee1,#882ec3,#ed5b9d);
  color:#fff;
  padding:17px 0
}

.trust-bar:before {
  content:'';
  position:absolute;
  width:480px;
  height:160px;
  left:25%;
  top:-120px;
  background:rgba(255,255,255,.35);
  filter:blur(45px);
  transform:rotate(-15deg)
}

.trust-bar .wrap {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between
}

.trust-bar p {
  margin:0;
  font:10px 'DM Mono';
  letter-spacing:.5px
}

.trust-bar div {
  display:flex;
  align-items:center;
  gap:16px;
  font-size:10px
}

.trust-bar i {
  height:17px;
  width:1px;
  background:rgba(255,255,255,.5)
}

.trust-bar span:first-child {
  color:var(--lime);
  font:12px 'DM Mono';
  text-shadow:0 0 10px rgba(185,255,90,.7)
}

.manifesto {
  display:grid;
  grid-template-columns:22% 1fr;
  padding:158px 0 140px
}

.side-label {
  font:10px 'DM Mono';
  text-transform:uppercase;
  color:var(--cyan);
  padding-top:13px
}

.manifesto h2 {
  font-size:clamp(39px,5.1vw,67px)
}

.manifesto>div>p {
  max-width:440px;
  margin:32px 0 0 auto;
  color:#aaa9b5;
  font-size:15px
}

.services {
  padding:20px 0 150px
}

.heading {
  display:flex;
  align-items:end;
  justify-content:space-between;
  margin-bottom:50px
}

.heading h2 {
  font-size:clamp(39px,5vw,65px)
}

.service-cards {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:17px
}

.service-card {
  min-height:386px;
  padding:25px;
  display:flex;
  flex-direction:column;
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.18);
  border-radius:24px;
  box-shadow:inset 0 1px rgba(255,255,255,.23),0 26px 45px rgba(0,0,0,.25);
  transition:.4s
}

.service-card:hover {
  transform:translateY(-10px) rotateX(2deg);
  box-shadow:inset 0 1px rgba(255,255,255,.34),0 30px 55px rgba(83,51,224,.25)
}

.service-card:after {
  content:'';
  position:absolute;
  width:250px;
  height:250px;
  border-radius:50%;
  right:-110px;
  top:-82px;
  background:rgba(255,255,255,.2);
  filter:blur(4px)
}

.service-card>span,.service-card>* {
  position:relative;
  z-index:1
}

.service-card>span {
  font:10px 'DM Mono'
}

.service-card .icon {
  font:70px/.8 'Playfair Display';
  margin:47px 0 28px
}

.service-card h3 {
  font:600 25px/1.1 'Playfair Display';
  letter-spacing:-1px;
  margin-bottom:12px
}

.service-card p {
  font-size:12px;
  line-height:1.55;
  max-width:280px
}

.service-card a {
  margin-top:auto;
  font-size:10px;
  font-weight:800;
  color:inherit;
  text-decoration:none;
  border-bottom:1px solid currentColor;
  align-self:start;
  padding-bottom:3px
}

.violet {
  background:linear-gradient(135deg,#7351ed,#332582);
  color:#fff
}

.lime {
  background:linear-gradient(135deg,#d1ff7d,#65d6c7);
  color:#111b1c
}

.ink {
  background:linear-gradient(135deg,#2a2d41,#11121d);
  color:#fff
}

.reasons {
  position:relative;
  overflow:hidden;
  background:radial-gradient(ellipse at 88% 50%,rgba(116,79,238,.38),transparent 40%),#151522;
  padding:143px 0
}

.reasons:before {
  content:'';
  position:absolute;
  width:500px;
  height:500px;
  border-radius:50%;
  left:-260px;
  bottom:-285px;
  border:1px solid rgba(255,255,255,.13);
  box-shadow:0 0 0 60px rgba(255,255,255,.018),0 0 0 135px rgba(255,255,255,.015)
}

.reasons .wrap {
  position:relative;
  display:grid;
  grid-template-columns:48% 52%
}

.reasons-head h2 {
  font-size:clamp(39px,4.9vw,63px)
}

.reason {
  display:grid;
  grid-template-columns:57px 1fr;
  gap:17px;
  padding:0 0 28px;
  margin-bottom:28px;
  border-bottom:1px solid rgba(255,255,255,.17)
}

.reason>span {
  width:33px;
  height:33px;
  border:1px solid rgba(255,255,255,.5);
  border-radius:50%;
  display:grid;
  place-items:center;
  font:11px 'DM Mono';
  color:var(--cyan);
  box-shadow:0 0 12px rgba(90,231,245,.15)
}

.reason h3 {
  font:600 23px/1.1 'Playfair Display';
  letter-spacing:-.8px;
  margin-bottom:7px
}

.reason p {
  font-size:12px;
  color:#afafbb;
  margin:0;
  max-width:410px
}

.portfolio {
  padding:150px 0
}

.portfolio-head {
  display:flex;
  justify-content:space-between;
  align-items:end
}

.portfolio-head h2 {
  font-size:clamp(39px,5vw,65px)
}

.portfolio-head>p {
  width:300px;
  font-size:12px;
  color:#aaa9b6;
  margin-bottom:4px
}

.filters {
  display:flex;
  gap:8px;
  margin:50px 0 19px
}

.filters button {
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  background:rgba(255,255,255,.04);
  color:#dddbe6;
  padding:9px 17px;
  font:10px 'DM Mono';
  cursor:pointer;
  transition:.2s
}

.filters button.chosen,.filters button:hover {
  background:linear-gradient(110deg,var(--violet),var(--pink));
  border-color:transparent;
  color:#fff;
  box-shadow:0 5px 15px rgba(131,70,255,.28)
}

.portfolio-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px
}

.project {
  height:380px;
  position:relative;
  padding:25px;
  display:flex;
  align-items:end;
  color:white;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.17);
  border-radius:25px;
  box-shadow:inset 0 1px rgba(255,255,255,.25),0 20px 45px rgba(0,0,0,.23);
  transition:.4s
}

.project:hover {
  transform:translateY(-9px) rotateX(1.5deg);
  box-shadow:inset 0 1px rgba(255,255,255,.4),0 26px 55px rgba(87,63,238,.3)
}

.project.hidden {
  display:none
}

.project:before {
  content:'';
  position:absolute;
  width:385px;
  height:385px;
  right:-85px;
  top:-102px;
  border-radius:50%;
  background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.8),var(--color) 23%,rgba(0,0,0,.45) 100%);
  box-shadow:inset -23px -26px 36px rgba(0,0,0,.3),inset 8px 8px 18px rgba(255,255,255,.45);
  transition:transform .65s
}

.project:hover:before {
  transform:scale(1.17) translate(-12px,10px)
}

.project:nth-child(3n+1):after {
  content:'↗';
  position:absolute;
  right:12%;
  top:20%;
  font:200px/.8 'Playfair Display';
  color:rgba(255,255,255,.92);
  text-shadow:0 10px 17px rgba(0,0,0,.2)
}

.project:nth-child(3n+2):after {
  content:'';
  position:absolute;
  border:8px solid rgba(255,255,255,.92);
  width:43%;
  height:62%;
  right:12%;
  top:17%;
  transform:rotate(-9deg);
  border-radius:13px;
  box-shadow:10px 13px 0 rgba(0,0,0,.18)
}

.project:nth-child(3n):after {
  content:'●';
  position:absolute;
  right:13%;
  top:12%;
  font:220px/.8 'DM Mono';
  color:rgba(255,255,255,.9);
  filter:drop-shadow(0 10px 12px rgba(0,0,0,.15))
}

.project-info,.project-link {
  position:relative;
  z-index:1
}

.project-info span {
  font:9px 'DM Mono';
  text-transform:uppercase
}

.project h3 {
  font:600 27px/1.1 'Playfair Display';
  letter-spacing:-1px;
  margin:7px 0
}

.project-link {
  position:absolute;
  right:24px;
  bottom:24px;
  width:37px;
  height:37px;
  border:1px solid #fff;
  border-radius:50%;
  display:grid;
  place-items:center
}

.portfolio-foot {
  border-top:1px solid rgba(255,255,255,.16);
  padding:20px 0 0;
  margin-top:18px;
  display:flex;
  justify-content:space-between;
  font:10px 'DM Mono';
  text-transform:uppercase;
  color:#aaa9b4
}

.line-cta {
  color:#fff;
  text-decoration:none;
  font-family:Manrope;
  font-weight:800;
  text-transform:none;
  border-bottom:1px solid rgba(255,255,255,.6)
}

.line-cta b {
  font-size:16px;
  color:var(--cyan)
}

.timeline {
  padding:32px 0 155px;
  display:grid;
  grid-template-columns:43% 57%
}

.timeline-intro h2 {
  font-size:clamp(39px,5.1vw,67px)
}

.big-year {
  font:clamp(85px,14vw,194px)/.8 'DM Mono';
  background:linear-gradient(120deg,var(--cyan),var(--violet),var(--pink));
  -webkit-background-clip:text;
  color:transparent;
  letter-spacing:-13px;
  margin-bottom:57px;
  filter:drop-shadow(0 0 20px rgba(110,78,255,.25))
}

.timeline-items {
  border-left:1px solid rgba(255,255,255,.2)
}

.timeline-items article {
  padding:0 0 32px 32px;
  position:relative;
  max-width:470px
}

.timeline-items article:before {
  content:'';
  position:absolute;
  width:9px;
  height:9px;
  background:var(--cyan);
  box-shadow:0 0 12px var(--cyan);
  border-radius:50%;
  left:-5px;
  top:6px
}

.timeline-items span {
  font:9px 'DM Mono';
  color:var(--cyan)
}

.timeline-items h3 {
  font:600 24px/1.1 'Playfair Display';
  letter-spacing:-1px;
  margin:10px 0 7px
}

.timeline-items p {
  font-size:12px;
  color:#aaa9b6;
  margin:0
}

.approach {
  position:relative;
  overflow:hidden;
  background:linear-gradient(115deg,#4c2cc6,#8939bd 63%,#d44596);
  color:#fff;
  padding:143px 0
}

.approach:after {
  content:'';
  position:absolute;
  width:520px;
  height:520px;
  border-radius:50%;
  right:-125px;
  bottom:-380px;
  border:1px solid rgba(255,255,255,.35);
  box-shadow:0 0 0 45px rgba(255,255,255,.045),0 0 0 110px rgba(255,255,255,.035)
}

.approach .wrap {
  position:relative;
  z-index:1
}

.approach .kicker i {
  background:var(--lime);
  box-shadow:0 0 0 5px rgba(198,245,60,.16)
}

.approach h2 em {
  color:var(--lime);
  -webkit-text-fill-color:var(--lime);
  background:none
}

.steps {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  margin-top:64px;
  border-top:1px solid rgba(255,255,255,.45)
}

.steps article {
  min-height:199px;
  padding:19px 20px 0 0;
  border-right:1px solid rgba(255,255,255,.45)
}

.steps article:not(:first-child) {
  padding-left:20px
}

.steps article:last-child {
  border:0
}

.steps span {
  font:11px 'DM Mono';
  color:var(--lime);
  text-shadow:0 0 9px rgba(185,255,90,.5)
}

.steps h3 {
  font:600 23px 'Playfair Display';
  margin:39px 0 8px
}

.steps p {
  font-size:11px;
  line-height:1.55;
  opacity:.85
}

.final-cta {
  position:relative;
  overflow:hidden;
  background:radial-gradient(circle at 81% 13%,#5bd9eb 0,rgba(91,217,235,.3) 8%,transparent 31%),linear-gradient(120deg,#c4ff65,#92f1bc);
  padding:145px 0;
  color:#101a1d
}

.final-cta .wrap {
  position:relative;
  z-index:1
}

.final-cta h2 {
  font-size:clamp(40px,5.4vw,70px)
}

.final-cta h2 em {
  color:#122c31;
  background:none;
  -webkit-text-fill-color:#122c31;
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:8px
}

.final-cta .wrap>p:not(.kicker) {
  max-width:449px;
  margin:25px 0 0;
  font-size:15px
}

/* Contrast on the lime contact block. */
.final-cta .kicker,
.final-cta .wrap > p:not(.kicker),
.final-cta .cta-row span {
  color:#132428;
}

.final-cta .kicker i {
  background:#132428;
  box-shadow:0 0 0 5px rgba(19,36,40,.14);
}

.final-shape {
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(23,24,23,.26)
}

.final-shape.one {
  width:590px;
  height:590px;
  right:-100px;
  top:-162px;
  box-shadow:inset -20px -20px 70px rgba(44,166,194,.15)
}

.final-shape.two {
  width:400px;
  height:400px;
  right:40px;
  top:-54px
}

.cta-row {
  display:flex;
  align-items:center;
  gap:22px;
  margin-top:36px
}

.action.light {
  background:#132428;
  border-color:#132428
}

.cta-row span {
  font-size:10px;
  line-height:1.35
}

.footer {
  height:102px;
  display:grid;
  grid-template-columns:1fr 2fr 1fr 1fr;
  align-items:center
}

.footer p {
  font-size:9px;
  line-height:1.5;
  color:#8e8d9b;
  margin:0
}

.footer div {
  display:flex;
  gap:16px
}

.footer a {
  font-size:10px;
  font-weight:800;
  text-decoration:none;
  color:#e5e3ea
}

.footer>a:last-child {
  text-align:right
}

.reveal {
  opacity:0;
  transform:translateY(25px);
  transition:.7s ease
}

.reveal.visible {
  opacity:1;
  transform:none
}

@keyframes float {
  50% {
    transform:translateY(-15px) rotate(6deg)
  }
}

@keyframes floatTilt {
  50% {
    transform:translateY(-12px) rotate(-6deg)
  }
}

@keyframes cardFloat {
  50% {
    transform:translateY(-12px) rotateY(-4deg) rotateX(7deg)
  }
}

@media(max-width:760px) {
  .wrap {
    width:min(100% - 34px,570px)
  }

  .header-top p {
    display:none
  }

  .header-top {
    grid-template-columns:1fr 1fr
  }

  .main-nav {
    height:67px
  }

  .main-nav nav {
    display:none
  }

  .nav-button {
    font-size:10px
  }

  .hero {
    grid-template-columns:1fr;
    padding:61px 0 93px
  }

  .hero-visual {
    margin-top:44px;
    min-height:370px
  }

  .hero-bottom {
    bottom:20px
  }

  .hero-bottom span:first-child {
    display:none
  }

  .trust-bar .wrap {
    display:block
  }

  .trust-bar p {
    margin-bottom:9px
  }

  .trust-bar div {
    gap:8px;
    font-size:8px
  }

  .manifesto,.reasons .wrap,.timeline {
    grid-template-columns:1fr;
    padding-top:83px;
    padding-bottom:83px
  }

  .side-label {
    padding:0
  }

  .manifesto h2 {
    margin-top:18px
  }

  .manifesto>div>p {
    margin:23px 0
  }

  .services,.portfolio {
    padding:83px 0
  }

  .heading,.portfolio-head {
    display:block
  }

  .heading h2 {
    margin-top:19px
  }

  .service-cards {
    grid-template-columns:1fr
  }

  .service-card {
    min-height:320px
  }

  .reasons {
    padding:83px 0
  }

  .reason-list {
    margin-top:42px
  }

  .portfolio-head>p {
    width:auto;
    margin-top:20px
  }

  .portfolio-grid {
    grid-template-columns:1fr
  }

  .timeline-intro {
    margin-bottom:55px
  }

  .big-year {
    margin-bottom:38px
  }

  .approach {
    padding:83px 0
  }

  .steps {
    grid-template-columns:1fr 1fr;
    margin-top:40px
  }

  .steps article:nth-child(2) {
    border:0;
    padding-left:20px
  }

  .steps article:nth-child(3) {
    padding-top:20px
  }

  .steps article:nth-child(4) {
    padding:20px 0 0 20px;
    border:0
  }

  .steps h3 {
    margin-top:22px
  }

  .final-cta {
    padding:88px 0
  }

  .footer {
    height:auto;
    padding:30px 0;
    grid-template-columns:1fr 1fr;
    gap:20px
  }

  .footer p {
    grid-column:span 2;
    order:3
  }

  .footer>a:last-child {
    order:2
  }

  .pointer-glow {
    display:none
  }
}

/* Order form in the contact block. */
.order-form {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  max-width:790px;
  margin-top:58px;
  padding:28px;
  border:1px solid rgba(19,36,40,.25);
  border-radius:20px;
  background:rgba(255,255,255,.2);
  box-shadow:inset 0 1px rgba(255,255,255,.48),0 16px 35px rgba(23,106,89,.12);
}

.form-heading,.form-message,.form-status { grid-column:span 2; }
.form-heading span { font:700 17px Unbounded; letter-spacing:-1px; }
.form-heading p { margin:6px 0 0; color:#24444a; font-size:14px; }
.order-form label { display:grid; gap:8px; color:#16323a; font-size:12px; font-weight:800; }
.order-form input,.order-form textarea { width:100%; border:1px solid rgba(19,36,40,.26); border-radius:10px; background:rgba(255,255,255,.62); color:#132428; padding:12px 13px; font:14px Manrope; outline:none; resize:vertical; }
.order-form input:focus,.order-form textarea:focus { border-color:#132428; box-shadow:0 0 0 3px rgba(19,36,40,.12); }
.order-form input::placeholder,.order-form textarea::placeholder { color:#648084; }
.form-status { min-height:20px; margin:0; color:#173c40 !important; font-size:12px !important; }

@media(max-width:760px) {
  .main-nav { top:7px; width:calc(100% - 16px); }
  .order-form { grid-template-columns:1fr; padding:20px; }
  .form-heading,.form-message,.form-status { grid-column:span 1; }
}

@media(max-width:430px) {
  h1 {
    font-size:47px
  }

  .hero-buttons {
    align-items:flex-start;
    flex-direction:column;
    gap:20px
  }

  .hero-bottom {
    display:none
  }

  .hero {
    padding-bottom:52px
  }

  .card-browser {
    right:2px;
    bottom:17px;
    transform:scale(.9);
    transform-origin:right bottom
  }

  .card-note {
    left:7px
  }

  .sun {
    right:-20px
  }

  .trust-bar div span:last-child,.trust-bar div i:last-of-type {
    display:none
  }

  .steps {
    grid-template-columns:1fr
  }

  .steps article,.steps article:not(:first-child) {
    border:0;
    border-bottom:1px solid rgba(255,255,255,.45);
    padding:19px 0
  }

  .portfolio-foot {
    display:block
  }

  .line-cta {
    display:inline-block;
    margin-top:12px
  }
}

/* Premium typography, live portfolio previews, and author feature. */
h1,h2 {
  font-family:Unbounded,Arial,sans-serif!important;
  font-weight:700!important;
  letter-spacing:-3.6px!important;
  line-height:1.04!important
}

h1 {
  font-size:clamp(47px,5.1vw,72px)!important
}

h2 {
  font-size:clamp(35px,4vw,55px)!important
}

em {
  font-style:normal!important
}

.hero-lead {
  font-size:18px!important;
  color:#c5c3cf!important
}

.kicker {
  font-size:12px!important
}

.service-card h3,.reason h3,.timeline-items h3,.steps h3,.project h3 {
  font-family:Unbounded,Arial,sans-serif!important;
  font-style:normal!important
}

.service-card h3 {
  font-size:19px!important;
  line-height:1.25!important
}

.service-card p,.reason p,.timeline-items p {
  font-size:14px!important;
  line-height:1.65!important;
  color:#c2c0cc!important
}

.steps h3 {
  font-size:18px!important;
  line-height:1.3!important
}

.steps p {
  font-size:13px!important;
  line-height:1.65!important
}

.project h3 {
  font-size:17px!important;
  line-height:1.3!important
}

.service-card a {
  font-size:12px!important
}

.project-info span,.timeline-items span {
  font-size:10px!important
}

.website-shot {
  position:absolute;
  z-index:1;
  width:69%;
  height:57%;
  right:11%;
  top:12%;
  overflow:hidden;
  border-radius:12px;
  background:#f5f3ee;
  box-shadow:15px 19px 25px rgba(0,0,0,.29);
  transform:rotate(-5deg);
  transition:.5s
}

.project:hover .website-shot {
  transform:rotate(-2deg) scale(1.06)
}

.shot-nav {
  height:18px;
  background:#e2dfd9;
  padding:6px;
  display:flex;
  gap:3px
}

.shot-nav i {
  height:4px;
  width:4px;
  border-radius:50%;
  background:#f37577
}

.shot-nav i:nth-child(2) {
  background:#f6bd59
}

.shot-nav i:nth-child(3) {
  background:#61c454
}

.shot-nav b {
  height:4px;
  width:42%;
  background:#c8c4be;
  border-radius:99px;
  margin-left:8px
}

.shot-hero {
  height:73%;
  padding:15px;
  color:#161827;
  background:linear-gradient(135deg,#e5ddff,#d6f9ff 48%,#ffdfed);
  position:relative;
  overflow:hidden
}

.shot-hero:after {
  content:'';
  position:absolute;
  width:82px;
  height:82px;
  right:-20px;
  bottom:-31px;
  border-radius:50%;
  background:var(--color);
  box-shadow:-13px -13px 28px rgba(255,255,255,.5)
}

.shot-hero span {
  font:6px 'DM Mono';
  text-transform:uppercase
}

.shot-hero strong {
  display:block;
  max-width:126px;
  margin-top:9px;
  font:700 13px/1.15 Unbounded;
  letter-spacing:-1px
}

.shot-hero em {
  display:block;
  width:55px;
  height:6px;
  margin-top:13px;
  background:var(--color);
  border-radius:99px
}

.shot-bottom {
  height:27%;
  padding:9px;
  display:flex;
  gap:5px
}

.shot-bottom i {
  height:100%;
  flex:1;
  background:#e4e3df
}

.shot-2 .shot-hero {
  background:linear-gradient(135deg,#282a48,#7651ef);
  color:white
}

.shot-3 .shot-hero {
  background:linear-gradient(135deg,#dbffb8,#75d7cc)
}

.shot-4 .shot-hero {
  background:linear-gradient(135deg,#ffe1d2,#f8acd0)
}

.shot-5 .shot-hero {
  background:linear-gradient(135deg,#d4e2ff,#7659ff);
  color:white
}

.shot-6 .shot-hero {
  background:linear-gradient(135deg,#172a3a,#196e92);
  color:white
}

.author {
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:80px;
  align-items:center;
  padding:25px 0 150px
}

.author-portrait {
  position:relative;
  min-height:600px;
  display:grid;
  place-items:center
}

.portrait-glow {
  position:absolute;
  width:520px;
  height:520px;
  border-radius:50%;
  background:radial-gradient(circle at 30% 25%,#fff 0,#d9c5ff 5%,#7958ff 34%,#211750 76%);
  box-shadow:inset -25px -35px 45px rgba(5,5,28,.8),0 0 75px rgba(126,82,255,.4);
  animation:float 8s ease-in-out infinite
}

.portrait-frame {
  position:relative;
  width:min(100%,445px);
  height:545px;
  border:1px solid rgba(255,255,255,.45);
  border-radius:220px 220px 42px 42px;
  background:linear-gradient(150deg,rgba(255,255,255,.28),rgba(255,255,255,.04));
  box-shadow:inset 0 1px rgba(255,255,255,.45),0 24px 55px rgba(0,0,0,.35);
  backdrop-filter:blur(10px);
  overflow:hidden
}

.portrait-initials {
  position:absolute;
  font:800 92px/.8 Unbounded;
  letter-spacing:-12px;
  left:38px;
  top:88px;
  color:rgba(255,255,255,.83);
  text-shadow:0 8px 23px rgba(38,18,99,.45)
}

.portrait-copy {
  position:absolute;
  bottom:27px;
  left:27px;
  font:12px/1.2 'DM Mono';
  text-transform:uppercase
}

.portrait-copy b {
  font-size:15px;
  color:var(--cyan)
}

.portrait-tag {
  position:absolute;
  right:-12px;
  bottom:55px;
  padding:14px 17px;
  border-radius:13px;
  border:1px solid rgba(255,255,255,.23);
  background:rgba(16,14,35,.45);
  backdrop-filter:blur(12px);
  font:12px/1.35 'DM Mono';
  transform:rotate(-8deg)
}

.author-copy h2 {
  margin-bottom:27px
}

.author-copy>p:not(.kicker) {
  font-size:16px;
  color:#c2c0cc;
  max-width:475px
}

.author-sign {
  margin-top:30px;
  display:flex;
  align-items:center;
  gap:12px
}

.plain-language {
  max-width:475px;
  margin-top:22px;
  padding:16px 18px;
  border-left:2px solid var(--cyan);
  border-radius:0 12px 12px 0;
  background:rgba(255,255,255,.06);
  color:#e3e1e9 !important;
  font-size:15px !important;
  line-height:1.65;
}

.author-sign span {
  font:600 17px Unbounded;
  letter-spacing:-1px
}

.author-sign a {
  color:var(--ink);
  font:600 17px Unbounded;
  letter-spacing:-1px;
  text-decoration:none;
  border-bottom:1px solid rgba(90,231,245,.65);
  transition:color .2s,border-color .2s;
}

.author-sign a:hover { color:var(--cyan); border-color:var(--cyan); }

.author-sign i {
  height:25px;
  width:1px;
  background:rgba(255,255,255,.3)
}

.author-sign small {
  font:10px 'DM Mono';
  color:#aaa9b6
}

@media(max-width:760px) {
  .author {
    grid-template-columns:1fr;
    gap:35px;
    padding:10px 0 83px
  }

  .author-portrait {
    min-height:450px
  }

  .author-copy>p:not(.kicker) {
    font-size:15px
  }

  .author-sign {
    align-items:flex-start;
    flex-direction:column;
    gap:8px
  }

  .author-sign i {
    display:none
  }

  .portrait-frame {
    width:330px;
    height:420px;
  }

  .portrait-glow {
    width:410px;
    height:410px;
  }
}

@media(max-width:430px) {
  h1 {
    font-size:40px!important
  }

  h2 {
    font-size:30px!important
  }

  .website-shot {
    width:77%;
    right:6%
  }

  .portrait-glow {
    transform:scale(.82)
  }

  .portrait-frame {
    transform:scale(.88)
  }
}

/* Real photos from /images take priority; the graphic remains as a fallback. */
.work-image {
  display:block;
  position:absolute;
  z-index:1;
  width:69%;
  height:57%;
  right:11%;
  top:12%;
  border-radius:12px;
  object-fit:cover;
  background:#171827;
  box-shadow:15px 19px 25px rgba(0,0,0,.29);
  transform:rotate(-5deg);
  transition:transform .5s, opacity .25s;
}

/* Floating navigation and animated image layer in the first screen. */
.header {
  position:relative;
  top:auto;
  width:100%;
  margin:0;
  border:0;
  border-radius:0;
  overflow:visible;
  box-shadow:none;
}

.header-top {
  width:min(1190px,calc(100% - 48px));
}

.main-nav {
  position:fixed;
  z-index:50;
  top:14px;
  left:50%;
  width:min(1190px,calc(100% - 48px));
  height:72px;
  padding:0 20px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:18px;
  background:rgba(12,13,25,.76);
  box-shadow:0 16px 44px rgba(0,0,0,.32),inset 0 1px rgba(255,255,255,.15);
  backdrop-filter:blur(20px);
  transform:translateX(-50%);
}

.main-nav nav a {
  font-size:13px;
  padding:9px 0;
  position:relative;
}

.main-nav nav a::after {
  content:"";
  position:absolute;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 10px var(--cyan);
  left:50%;
  bottom:0;
  opacity:0;
  transform:translate(-50%,6px);
  transition:.25s;
}

.main-nav nav a:hover::after {
  opacity:1;
  transform:translate(-50%,0);
}

.nav-button {
  font-size:13px;
  padding:15px 21px;
}

.hero {
  overflow:hidden;
  border-radius:0 0 35px 35px;
  isolation:isolate;
  min-height:100vh;
}

.hero-background {
  position:absolute;
  z-index:-1;
  inset:-8% -10%;
  opacity:.38;
  background-image:
    linear-gradient(110deg,rgba(9,10,18,.98) 12%,rgba(9,10,18,.71) 52%,rgba(9,10,18,.87)),
    url("https://xebia.com/media/2025/03/header2-Fears.png");
  background-size:cover;
  background-position:center;
  filter:saturate(1.2) contrast(1.08);
  animation:heroDrift 18s ease-in-out infinite alternate;
}

.hero-background::after {
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 72% 37%,rgba(135,93,255,.5),transparent 26%),radial-gradient(circle at 36% 68%,rgba(90,231,245,.13),transparent 30%);
  mix-blend-mode:screen;
}

@keyframes heroDrift {
  from { transform:scale(1.03) translate3d(-1%,-1%,0); }
  to { transform:scale(1.12) translate3d(1.5%,1%,0); }
}

/* Portfolio cards are buttons; the full case opens in the modal gallery. */
.project-open {
  position:absolute;
  inset:0;
  width:100%;
  padding:0;
  border:0;
  color:inherit;
  text-align:left;
  background:transparent;
  cursor:pointer;
}

.project-open:focus-visible {
  outline:3px solid var(--cyan);
  outline-offset:-5px;
}

.project .work-image.image-missing {
  display:none;
}

.portfolio-modal {
  position:fixed;
  inset:0;
  z-index:100;
  display:grid;
  place-items:center;
  padding:28px;
  opacity:0;
  visibility:hidden;
  transition:opacity .3s,visibility .3s;
}

.portfolio-modal.is-open {
  opacity:1;
  visibility:visible;
}

.modal-backdrop {
  position:absolute;
  inset:0;
  background:rgba(3,4,10,.8);
  backdrop-filter:blur(15px);
}

.modal-dialog {
  position:relative;
  z-index:1;
  width:min(1080px,100%);
  min-height:550px;
  padding:28px 70px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:27px;
  background:linear-gradient(135deg,rgba(38,37,63,.95),rgba(10,11,20,.97));
  box-shadow:0 30px 90px rgba(0,0,0,.55),inset 0 1px rgba(255,255,255,.14);
  transform:translateY(22px) scale(.98);
  transition:transform .35s;
}

.is-open .modal-dialog { transform:none; }

.modal-content {
  height:100%;
  min-height:490px;
  display:grid;
  grid-template-columns:1.3fr .7fr;
  gap:38px;
  align-items:center;
}

.modal-image-wrap {
  position:relative;
  min-height:420px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:17px;
  background:linear-gradient(145deg,#252448,#151627);
}

.modal-image-wrap::before {
  content:"";
  position:absolute;
  width:380px;
  height:380px;
  border-radius:50%;
  background:var(--violet);
  filter:blur(50px);
  opacity:.42;
}

.modal-image-wrap img {
  position:relative;
  z-index:1;
  display:none;
  max-width:100%;
  max-height:450px;
  object-fit:contain;
}

.modal-image-wrap img.is-loaded { display:block; }

.modal-image-fallback {
  position:relative;
  z-index:1;
  display:none;
  width:190px;
  height:190px;
  place-items:center;
  border-radius:50%;
  background:radial-gradient(circle at 30% 25%,#fff,var(--fallback-color) 35%,#211743 100%);
  box-shadow:inset -20px -25px 30px rgba(0,0,0,.35),0 0 55px var(--fallback-color);
  color:#fff;
  font:700 50px Unbounded;
}

.modal-image-fallback.is-visible { display:grid; }

.modal-details > span {
  color:var(--cyan);
  font:12px 'DM Mono';
  text-transform:uppercase;
}

.modal-details h2 {
  margin:14px 0 19px;
  font-size:clamp(27px,3vw,40px) !important;
}

.modal-details p {
  color:#c3c1cc;
  font-size:16px;
}

.modal-details a {
  display:inline-flex;
  margin-top:16px;
  padding:12px 16px;
  border-radius:999px;
  background:linear-gradient(110deg,var(--violet),var(--pink));
  color:#fff;
  text-decoration:none;
  font-size:12px;
  font-weight:800;
}

.modal-counter {
  margin-top:44px;
  color:#b0afba;
  font:12px 'DM Mono';
}

.modal-counter b { color:var(--lime); }

.modal-close,.modal-arrow {
  position:absolute;
  z-index:2;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.24);
  border-radius:50%;
  background:rgba(255,255,255,.08);
  color:#fff;
  cursor:pointer;
  transition:.2s;
}

.modal-close:hover,.modal-arrow:hover { background:var(--violet); transform:scale(1.08); }
.modal-close { top:17px; right:17px; width:35px; height:35px; font-size:25px; }
.modal-arrow { top:50%; width:43px; height:43px; font-size:21px; transform:translateY(-50%); }
.modal-prev { left:16px; }
.modal-next { right:16px; }
.modal-open { overflow:hidden; }

@media(max-width:760px) {
  .header { top:auto; width:100%; margin:0; border-radius:0; }
  .header-top { display:none; }
  .main-nav { height:66px; }
  .nav-button { font-size:11px; padding:12px 16px; }
  .modal-dialog { min-height:auto; padding:58px 17px 17px; }
  .modal-content { min-height:auto; grid-template-columns:1fr; gap:22px; }
  .modal-image-wrap { min-height:255px; }
  .modal-image-wrap img { max-height:310px; }
  .modal-arrow { top:240px; }
  .modal-prev { left:10px; }
  .modal-next { right:10px; }
  .modal-counter { margin-top:24px; }
}

.work-image:not([src=""]) {
  opacity:1;
}

/* Full-bleed hero: the first screen is intentionally wider than the content grid. */
.hero {
  width:100%;
  min-height:100svh;
  margin:0;
  padding:0;
  display:block;
  border-radius:0 0 42px 42px;
  background:#090a12;
}

.hero-inner {
  position:relative;
  z-index:2;
  min-height:100svh;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(390px,.95fr);
  gap:28px;
  align-items:center;
  padding:142px 0 104px;
}

.hero-background {
  inset:0;
  opacity:.62;
  background-image:
    linear-gradient(90deg,rgba(7,8,16,.98) 0%,rgba(7,8,16,.89) 36%,rgba(7,8,16,.34) 68%,rgba(7,8,16,.74) 100%),
    linear-gradient(0deg,rgba(7,8,16,.56),transparent 45%),
    url("https://xebia.com/media/2025/03/header2-Fears.png");
  background-position:center;
  filter:saturate(1.25) contrast(1.1);
}

.hero-background::after {
  background:
    radial-gradient(circle at 79% 39%,rgba(255,112,187,.38),transparent 18%),
    radial-gradient(circle at 62% 68%,rgba(90,231,245,.2),transparent 28%),
    linear-gradient(125deg,rgba(135,93,255,.17),transparent 42%);
}

.hero-grid {
  position:absolute;
  z-index:0;
  inset:0;
  opacity:.18;
  pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.18) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(90deg,transparent 0%,#000 38%,#000 100%);
}

.hero-orb {
  position:absolute;
  z-index:1;
  border-radius:50%;
  pointer-events:none;
  filter:blur(2px);
  mix-blend-mode:screen;
}

.orb-one { width:430px; height:430px; top:13%; right:-135px; background:radial-gradient(circle,rgba(135,93,255,.28),transparent 66%); animation:orbPulse 8s ease-in-out infinite; }
.orb-two { width:260px; height:260px; bottom:2%; left:25%; background:radial-gradient(circle,rgba(90,231,245,.11),transparent 67%); animation:orbPulse 10s -4s ease-in-out infinite reverse; }

.hero-copy { position:relative; z-index:2; max-width:680px; }
.hero-copy .kicker { margin-bottom:25px; color:#e8e4ef; }
.hero-copy h1 {
  max-width:720px;
  margin:0 0 26px;
  font-family:Unbounded,Manrope,sans-serif;
  font-size:clamp(39px,5vw,75px);
  font-weight:700;
  letter-spacing:-.075em;
  line-height:1.07;
  text-wrap:balance;
  text-shadow:0 9px 46px rgba(0,0,0,.48);
}
.hero-copy h1 em { letter-spacing:-.09em; }
.hero-lead { max-width:495px; color:#d0ced7; font-size:16px; }
.hero-buttons { margin-top:35px; }

.hero-visual { width:100%; min-height:500px; align-self:center; }
.hero-visual:before { inset:0 -15% -5% -8%; background:radial-gradient(ellipse at 62% 48%,rgba(135,93,255,.38),transparent 53%); }
.sun { width:330px; height:330px; top:78px; right:12%; animation:float 7s ease-in-out infinite, sunGlow 5s ease-in-out infinite alternate; }
.visual-orbit { position:absolute; z-index:-1; border:1px solid rgba(206,190,255,.33); border-radius:50%; }
.orbit-large { width:490px; height:490px; top:-2px; right:-28px; border-style:dashed; animation:spin 24s linear infinite; }
.orbit-small { width:370px; height:210px; top:131px; right:7%; transform:rotate(-28deg); animation:spinReverse 17s linear infinite; }
.visual-tag { position:absolute; z-index:4; padding:10px 13px; border:1px solid rgba(255,255,255,.27); border-radius:999px; background:rgba(18,18,35,.56); box-shadow:inset 0 1px rgba(255,255,255,.18),0 12px 28px rgba(0,0,0,.25); backdrop-filter:blur(14px); color:#f7f3fb; font:10px 'DM Mono',monospace; letter-spacing:.04em; }
.visual-tag b { color:var(--lime); font-size:14px; margin-left:7px; }
.tag-ads { top:38px; right:8%; animation:floatTilt 6s 1s ease-in-out infinite; }
.tag-web { right:2%; bottom:85px; color:var(--cyan); animation:floatTilt 7s .5s ease-in-out infinite reverse; }
.card-note { top:88px; left:0; }
.card-browser { right:2%; bottom:10px; }
.card-stat { left:8%; bottom:18px; }
.scribble { right:2%; top:112px; }
.visual-number { left:0; top:197px; font-size:145px; }

.hero-bottom { z-index:3; bottom:28px; left:0; right:0; }

@keyframes orbPulse { 0%,100% { transform:scale(.9); opacity:.55; } 50% { transform:scale(1.16); opacity:1; } }
@keyframes sunGlow { from { box-shadow:inset -20px -25px 34px rgba(22,11,62,.68),inset 12px 15px 18px rgba(255,255,255,.42),0 0 48px 6px rgba(162,85,255,.37); } to { box-shadow:inset -20px -25px 34px rgba(22,11,62,.68),inset 12px 15px 18px rgba(255,255,255,.42),0 0 72px 14px rgba(255,92,185,.48); } }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes spinReverse { to { transform:rotate(-388deg); } }

@media (max-width:850px) {
  .hero-inner { grid-template-columns:1fr; gap:0; padding:122px 0 145px; }
  .hero-copy { max-width:650px; }
  .hero-visual { min-height:385px; width:min(550px,100%); justify-self:end; margin-top:-7px; }
  .sun { transform:scale(.84); transform-origin:center right; }
  .hero-bottom { bottom:25px; }
  .hero-bottom span:first-child { display:none; }
}

@media (max-width:560px) {
  .hero { border-radius:0 0 25px 25px; }
  .hero-inner { min-height:850px; padding:112px 0 91px; }
  .hero-copy h1 { font-size:clamp(32px,10vw,47px); line-height:1.12; }
  .hero-lead { font-size:14px; }
  .hero-buttons { align-items:flex-start; gap:19px; flex-wrap:wrap; }
  .hero-visual { min-height:312px; margin-top:9px; transform:scale(.9); transform-origin:right bottom; width:112%; }
  .visual-tag,.scribble { display:none; }
  .hero-bottom { font-size:7px; }
  .hero-bottom span:last-child { display:none; }
  .hero-grid { background-size:42px 42px; }
}

@media (prefers-reduced-motion:reduce) {
  .hero *, .hero-background { animation:none !important; }
}

/* High-impact services statement. */
.services-showcase {
  position:relative;
  min-height:490px;
  margin:0 0 58px;
  padding:52px 56px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.2);
  border-radius:32px;
  background:linear-gradient(125deg,#171330 0%,#281a69 47%,#a43d9d 100%);
  box-shadow:inset 0 1px rgba(255,255,255,.34),0 30px 75px rgba(85,51,213,.26);
  isolation:isolate;
}

.services-showcase .kicker,.services-showcase h2,.services-showcase p,.services-showcase span,.services-showcase .services-stamp { position:relative; z-index:2; }
.services-showcase h2 { margin:31px 0 0; color:#fff; font-size:clamp(43px,6.5vw,87px)!important; line-height:.94!important; letter-spacing:-5px!important; }
.services-showcase h2 span { display:block; font-size:.42em; letter-spacing:-2px; color:#d2c9ff; }
.services-showcase h2 strong { display:inline-block; color:var(--lime); font-weight:800; text-shadow:0 0 30px rgba(185,255,90,.42); }
.services-showcase h2 small { font-size:.4em; color:#f8c6e2; letter-spacing:-2px; }
.services-showcase h2 b { display:inline-block; color:#fff; font-weight:800; text-shadow:0 10px 35px rgba(6,2,26,.38); }
.services-showcase h2 em { font-size:.76em; }
.services-lead { max-width:400px; margin:28px 0 0; color:#e5e0f1; font-size:15px; }
.services-small-copy { position:absolute!important; top:55px; right:55px; color:#e5e0f1; font:11px/1.5 'DM Mono'; text-transform:uppercase; text-align:right; }
.services-stamp { position:absolute!important; right:12%; bottom:30px; width:124px; height:124px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.55); border-radius:50%; color:#fff; font:10px/1.45 'DM Mono'; text-transform:uppercase; text-align:center; transform:rotate(12deg); animation:stampSpin 18s linear infinite; }
.services-orbit { position:absolute; z-index:1; border:1px solid rgba(255,255,255,.3); border-radius:50%; }
.orbit-a { width:540px; height:540px; right:-82px; top:-128px; box-shadow:0 0 0 33px rgba(255,255,255,.035),0 0 0 85px rgba(255,255,255,.025); animation:orbitSpin 25s linear infinite; }
.orbit-b { width:360px; height:180px; right:9%; top:145px; border-color:rgba(185,255,90,.58); transform:rotate(-36deg); animation:orbitSpin 14s linear infinite reverse; }
.services-glow { position:absolute; z-index:0; width:260px; height:260px; right:15%; top:64px; border-radius:50%; background:radial-gradient(circle at 31% 22%,#fff,#ff90c9 8%,#875dff 45%,transparent 72%); filter:blur(3px); box-shadow:0 0 65px rgba(196,108,255,.62); animation:float 6s ease-in-out infinite; }
@keyframes orbitSpin { to { transform:rotate(360deg); } }
@keyframes stampSpin { to { transform:rotate(372deg); } }

/* The main menu must remain visible while the top information row scrolls away. */
.main-nav {
  position:fixed!important;
  z-index:90!important;
  top:14px!important;
  left:50%!important;
  width:min(1190px,calc(100% - 48px))!important;
  transform:translateX(-50%)!important;
}

@media(max-width:760px) {
  .main-nav { top:8px!important; width:calc(100% - 16px)!important; }
  .services-showcase { min-height:530px; padding:34px 25px; border-radius:24px; }
  .services-showcase h2 { font-size:clamp(38px,11vw,55px)!important; letter-spacing:-3px!important; }
  .services-small-copy { top:32px; right:25px; font-size:8px; }
  .services-lead { position:absolute!important; z-index:3!important; bottom:31px; max-width:280px; font-size:13px; }
  .services-stamp { right:22px; bottom:22px; width:92px; height:92px; font-size:8px; }
  .orbit-a { width:390px; height:390px; right:-170px; top:102px; }
  .orbit-b { right:-6%; top:192px; }
  .services-glow { right:-9%; top:170px; }
}

.project:has(.work-image) .website-shot {
  z-index:0;
}

.project .project-info,
.project .project-link {
  z-index:4;
}

.project .project-info {
  max-width:72%;
  padding:12px 14px;
  border-radius:12px;
  background:linear-gradient(90deg,rgba(7,8,17,.84),rgba(7,8,17,.3));
  backdrop-filter:blur(6px);
}

.project .project-link {
  background:rgba(7,8,17,.5);
  backdrop-filter:blur(7px);
}

/* Services become three bold, self-explanatory product scenes. */
.service-cards {
  gap:22px;
}

.service-card {
  min-height:590px;
  padding:0;
  border-radius:28px;
  display:grid;
  grid-template-rows:245px 1fr;
}

.service-card::after { display:none; }
.service-card > span,.service-card > .icon { display:none; }
.service-scene { position:relative; overflow:hidden; padding:25px; }
.service-content { display:flex; flex-direction:column; padding:29px 27px 27px; }
.service-number { color:inherit; opacity:.65; font:10px 'DM Mono'; letter-spacing:.5px; }
.service-card h3 { margin:17px 0 15px; font-size:25px!important; line-height:1.12!important; }
.service-card p { margin:0; max-width:none; font-size:14px!important; }
.service-card a { display:flex; justify-content:space-between; width:100%; margin-top:auto; padding:14px 0 0; border-top:1px solid currentColor; border-bottom:0; font-size:12px!important; }
.service-card a b { font-size:21px; line-height:.7; }

.site-scene { background:radial-gradient(circle at 75% 10%,#e0c7ff,transparent 25%),linear-gradient(140deg,#7d54f2,#21164e); }
.scene-browser { position:absolute; width:220px; height:145px; right:19px; bottom:17px; padding:17px; border:1px solid rgba(255,255,255,.65); border-radius:12px; background:rgba(16,8,59,.5); box-shadow:13px 16px 0 rgba(18,8,60,.27); transform:rotate(-7deg); }
.scene-browser i { display:inline-block; width:5px; height:5px; margin-right:3px; border-radius:50%; background:#fff; opacity:.7; }.scene-browser b { display:block; margin-top:17px; font:8px 'DM Mono'; letter-spacing:1px; }.scene-browser strong { display:block; margin-top:9px; font:700 22px/1 Unbounded; letter-spacing:-2px; }.site-scene em,.landing-scene em,.ads-scene em { position:absolute; top:19px; left:23px; color:rgba(255,255,255,.5); font:12px 'DM Mono'; font-style:normal; }

.landing-scene { background:radial-gradient(circle at 17% 20%,#fff5b6,transparent 15%),linear-gradient(135deg,#d8ff72,#5bd9ce); color:#11242a; }.landing-scene span { position:absolute; left:26px; top:58px; font:700 19px/1.05 Unbounded; letter-spacing:-1px; }.landing-scene i { position:absolute; right:27px; top:60px; font:80px/.6 Unbounded; font-style:normal; }.landing-scene b { position:absolute; right:28px; bottom:30px; padding:10px 13px; border-radius:99px; background:#14292e; color:#fff; font:10px 'DM Mono'; }.landing-scene em { color:#18363d; }

.ads-scene { background:radial-gradient(circle at 22% 25%,#314766,transparent 30%),linear-gradient(145deg,#181b2a,#080a13); }.ads-scene span { position:absolute; top:28px; left:26px; font:700 20px/1.1 Unbounded; letter-spacing:-1px; color:#fff; }.ads-scene svg { position:absolute; width:89%; left:5%; bottom:28px; }.ads-scene path { fill:none; stroke:var(--lime); stroke-width:4; filter:drop-shadow(0 0 5px var(--lime)); }.ads-scene b { position:absolute; top:89px; right:27px; font:700 38px Unbounded; letter-spacing:-3px; color:var(--lime); text-shadow:0 0 22px rgba(185,255,90,.4); }.ads-scene em { color:#a4a9be; }

@media(max-width:760px) {
  .service-card { min-height:530px; grid-template-rows:210px 1fr; }
  .service-card h3 { font-size:23px!important; }
}

.project:hover .work-image {
  transform:rotate(-2deg) scale(1.06);
}

.author-photo {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
  position:relative;
  z-index:3;
}

.portrait-frame:has(.author-photo) .portrait-initials,
.portrait-frame:has(.author-photo) .portrait-copy {
  display:none;
}

.author-photo.image-missing {
  display:none;
}

.portrait-frame:has(.author-photo.image-missing) .portrait-initials,
.portrait-frame:has(.author-photo.image-missing) .portrait-copy {
  display:block;
}

@media(max-width:430px) {
  .work-image {
    width:77%;
    right:6%;
  }
}

/* Keep only one clear, always-on navigation layer. */
.header {
  position:static;
  z-index:auto;
  height:0;
  background:transparent;
  border:0;
  backdrop-filter:none;
}

.header-top {
  display:none !important;
}

.main-nav {
  position:fixed !important;
  z-index:999 !important;
  top:24px !important;
  left:50% !important;
  right:auto !important;
  bottom:auto !important;
  transform:translate3d(-50%,0,0) !important;
  will-change:transform;
}

@media(max-width:760px) {
  .main-nav {
    top:10px !important;
  }
}

/* Services: clear hierarchy, readable contrast and an intentional hover state. */
.service-card {
  overflow:hidden;
  transform-style:preserve-3d;
  transition:transform .38s cubic-bezier(.2,.8,.2,1),box-shadow .38s ease,filter .38s ease;
}

.service-scene {
  transition:transform .5s cubic-bezier(.2,.8,.2,1),filter .5s ease;
}

.service-card h3 {
  font-size:27px !important;
  font-weight:700;
  letter-spacing:-.06em;
}

.service-card.violet p,
.service-card.ink p {
  color:rgba(255,255,255,.76) !important;
}

.service-card.lime .service-number,
.service-card.lime p {
  color:#173940 !important;
  opacity:1;
}

.service-card.lime a {
  color:#102a30;
  border-color:rgba(16,42,48,.46);
}

.landing-scene span {
  color:#102e35;
  text-shadow:0 1px rgba(255,255,255,.34);
}

.landing-scene i {
  color:#14373d;
  text-shadow:0 3px 0 rgba(255,255,255,.24);
}

.service-card:hover,
.service-card:focus-within {
  transform:translateY(-13px) scale(1.018);
  filter:brightness(1.06);
}

.service-card.violet:hover,
.service-card.violet:focus-within { box-shadow:0 28px 65px rgba(112,75,255,.43),inset 0 1px rgba(255,255,255,.34); }
.service-card.lime:hover,.service-card.lime:focus-within { box-shadow:0 28px 65px rgba(91,217,206,.32),inset 0 1px rgba(255,255,255,.6); }
.service-card.ink:hover,.service-card.ink:focus-within { box-shadow:0 28px 65px rgba(185,255,90,.2),inset 0 1px rgba(255,255,255,.28); }
.service-card:hover .service-scene,.service-card:focus-within .service-scene { transform:scale(1.045); filter:saturate(1.15); }
.service-card:hover .scene-browser,.service-card:focus-within .scene-browser { transform:rotate(-2deg) translateY(-8px) scale(1.045); }
.service-card:hover .landing-scene i,.service-card:focus-within .landing-scene i { transform:translateX(12px); }
.service-card:hover .ads-scene path,.service-card:focus-within .ads-scene path { stroke-width:5.5; filter:drop-shadow(0 0 10px var(--lime)); }
.service-card:hover .ads-scene b,.service-card:focus-within .ads-scene b { transform:translateY(-6px) scale(1.1); }
.scene-browser,.landing-scene i,.ads-scene path,.ads-scene b { transition:transform .45s cubic-bezier(.2,.8,.2,1),stroke-width .3s ease,filter .3s ease; }

@media (prefers-reduced-motion:reduce) {
  .service-card,.service-scene,.scene-browser,.landing-scene i,.ads-scene path,.ads-scene b { transition:none; }
  .service-card:hover,.service-card:focus-within,.service-card:hover .service-scene,.service-card:focus-within .service-scene { transform:none; }
}

/* Prices and limited-time consultation offer. */
.service-content { position:relative; }
.service-price {
  position:absolute;
  top:28px;
  right:27px;
  padding:6px 9px;
  border:1px solid currentColor;
  border-radius:999px;
  font:10px 'DM Mono',monospace;
  letter-spacing:.03em;
}
.service-card h3 { margin-top:38px; }
.service-card.lime .service-price { color:#173940; background:rgba(255,255,255,.3); }
.service-card.ink .service-price { color:var(--lime); border-color:rgba(185,255,90,.57); }

/* Make the product and its entry price unmistakable. */
.service-price,
.service-card.lime .service-price,
.service-card.ink .service-price {
  top:22px;
  right:24px;
  padding:0;
  border:0;
  background:transparent;
  color:#ff4e57;
  font:800 clamp(24px,2.25vw,34px)/1 'DM Mono',monospace;
  letter-spacing:-.1em;
  text-transform:uppercase;
  text-shadow:0 0 18px rgba(255,42,63,.32);
}

.service-card.lime .service-price { color:#e92e3d; text-shadow:0 2px 0 rgba(255,255,255,.32); }
.service-card h3 { margin-top:48px; }
.service-scene-title {
  position:absolute;
  z-index:3;
  top:22px;
  left:23px;
  color:#fff;
  font:700 clamp(17px,1.6vw,23px)/1.05 Unbounded,Manrope,sans-serif;
  letter-spacing:-.075em;
  text-shadow:0 3px 14px rgba(0,0,0,.25);
}
.landing-scene .service-scene-title { color:#102e35; text-shadow:0 1px rgba(255,255,255,.48); }
.ads-scene .service-scene-title { color:#fff; font-size:clamp(14px,1.3vw,18px); }
.landing-scene .scene-message { position:absolute; left:26px; top:112px; font:700 19px/1.05 Unbounded; letter-spacing:-1px; color:#102e35; }
.ads-scene .scene-message { position:absolute; top:93px; left:26px; font:700 20px/1.1 Unbounded; letter-spacing:-1px; color:#fff; }
.landing-scene > span:not(.service-scene-title):not(.scene-message),.ads-scene > span:not(.service-scene-title):not(.scene-message) { display:none; }

/* Present the person first, then their professional journey. */
.author:not(.author-primary) { display:none; }
.author-primary { padding-top:32px; }

.consultation-offer {
  position:relative;
  display:grid;
  grid-template-columns:1.35fr .65fr;
  gap:36px;
  align-items:center;
  margin:72px auto 115px;
  padding:54px 57px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.2);
  border-radius:31px;
  background:radial-gradient(circle at 78% 19%,rgba(255,199,93,.36),transparent 22%),radial-gradient(circle at 15% 83%,rgba(255,74,92,.4),transparent 25%),linear-gradient(125deg,#3a0716 0%,#941832 50%,#ed3f34 100%);
  box-shadow:inset 0 1px rgba(255,255,255,.34),0 30px 70px rgba(204,25,48,.34);
}
.consultation-offer::before { content:""; position:absolute; width:440px; height:440px; right:-150px; bottom:-310px; border:1px solid rgba(255,222,216,.36); border-radius:50%; box-shadow:0 0 0 40px rgba(255,255,255,.06),0 0 0 100px rgba(255,255,255,.035); }
.consultation-offer::after { content:"LIMITED / OFFER"; position:absolute; right:34px; top:25px; color:rgba(255,239,232,.55); font:10px 'DM Mono',monospace; letter-spacing:.2em; }
.offer-copy,.offer-timer { position:relative; z-index:1; }
.offer-copy h2 { margin:20px 0; font:700 clamp(30px,3.5vw,52px)/1.02 Unbounded,Manrope,sans-serif; letter-spacing:-.07em; }
.offer-copy h2 em { font-style:normal; background:linear-gradient(100deg,#fff4e5,#ffc26b); background-clip:text; -webkit-background-clip:text; }
.offer-copy > p:not(.kicker) { max-width:560px; color:#e1ddeb; font-size:15px; }
.offer-copy .action { margin-top:13px; }
.offer-timer { padding:34px 17px 28px; border:1px solid rgba(255,228,214,.48); border-radius:21px; background:rgba(46,2,12,.38); text-align:center; backdrop-filter:blur(14px); box-shadow:inset 0 1px rgba(255,255,255,.26),0 15px 37px rgba(72,0,9,.24); }
.offer-timer > span { color:#fff1e9; font:10px 'DM Mono',monospace; text-transform:uppercase; letter-spacing:.12em; }
.timer-units { display:flex; align-items:flex-start; justify-content:center; gap:7px; margin:23px 0 16px; }
.timer-units div { min-width:56px; }
.timer-units b { display:block; color:#fff7e9; font:700 clamp(29px,3vw,42px)/.95 'DM Mono',monospace; letter-spacing:-.13em; text-shadow:0 0 17px rgba(255,211,151,.37); font-variant-numeric:tabular-nums; }
.timer-units small { display:block; margin-top:9px; color:#ffd9ca; font:8px 'DM Mono',monospace; text-transform:uppercase; }
.timer-units > i { color:#ffd185; font:29px/.85 'DM Mono',monospace; font-style:normal; transform:translateY(3px); }
.offer-timer p { margin:0; color:#ffddae; font:10px 'DM Mono',monospace; }

/* Contact modal for service and offer CTAs. */
.lead-modal { position:fixed; z-index:1100; inset:0; display:grid; place-items:center; padding:12px; overflow-y:auto; opacity:0; visibility:hidden; transition:opacity .25s ease,visibility .25s ease; }
.lead-modal.is-open { opacity:1; visibility:visible; }
.lead-modal-backdrop { position:absolute; inset:0; background:rgba(4,5,13,.79); backdrop-filter:blur(14px); }
.lead-dialog { position:relative; z-index:1; width:min(500px,100%); max-height:calc(100dvh - 24px); padding:28px 32px 25px; overflow-y:auto; border:1px solid rgba(255,255,255,.2); border-radius:24px; background:linear-gradient(145deg,#282249,#10111f); box-shadow:0 30px 90px rgba(0,0,0,.58),inset 0 1px rgba(255,255,255,.16); transform:translateY(20px) scale(.97); transition:transform .3s cubic-bezier(.2,.8,.2,1); }
.lead-modal.is-open .lead-dialog { transform:none; }
.lead-dialog h2 { margin:11px 0 8px; font:700 clamp(24px,3.4vw,34px)/1.05 Unbounded,Manrope,sans-serif; letter-spacing:-.075em; }
.lead-service { margin:0 0 16px; color:#cfccda; font-size:14px; }
.lead-close { position:absolute; top:15px; right:16px; display:grid; place-items:center; width:36px; height:36px; border:1px solid rgba(255,255,255,.25); border-radius:50%; background:rgba(255,255,255,.07); color:#fff; font-size:24px; cursor:pointer; transition:.2s; }
.lead-close:hover { background:var(--violet); transform:rotate(90deg); }
.lead-form { display:grid; gap:10px; }
.lead-form label { display:grid; gap:7px; color:#e4e0eb; font-size:11px; font-weight:700; }
.lead-form input,.lead-form textarea { width:100%; padding:10px 12px; border:1px solid rgba(255,255,255,.17); border-radius:11px; outline:0; background:rgba(0,0,0,.18); color:#fff; font:14px Manrope,sans-serif; resize:vertical; transition:border-color .2s,box-shadow .2s; }
.lead-form input:focus,.lead-form textarea:focus { border-color:var(--cyan); box-shadow:0 0 0 3px rgba(90,231,245,.11); }
.lead-form input::placeholder,.lead-form textarea::placeholder { color:#9693a3; }
.lead-form .action { justify-content:center; margin-top:4px; border:0; cursor:pointer; }
.lead-status { min-height:20px; margin:0; color:var(--lime); font-size:12px; }

@media(max-width:760px) {
  .consultation-offer { grid-template-columns:1fr; gap:27px; margin-top:45px; margin-bottom:73px; padding:35px 25px; border-radius:24px; }
  .offer-copy h2 { font-size:clamp(29px,9vw,43px); }
  .offer-timer { max-width:360px; width:100%; }
  .lead-dialog { max-height:calc(100dvh - 16px); padding:30px 20px 20px; border-radius:22px; }
  .service-price { top:24px; right:22px; }
  .service-price,.service-card.lime .service-price,.service-card.ink .service-price { top:18px; right:20px; font-size:29px; }
  .service-scene-title { top:18px; left:20px; font-size:17px; }
}