@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Syne:wght@500;600&display=swap');

:root {
  --ink: #070609;
  --panel: #111015;
  --line: rgba(255,255,255,.12);
  --muted: #aaa6b0;
  --pink: #ff8fd4;
  --lavender: #b59ae6;
  --paper: #f5f0f4;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--paper);
  background: var(--ink);
  font-family: "DM Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
.shell { width: min(1200px, calc(100% - 48px)); margin-inline: auto; }

.nav {
  height: 92px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 10;
}
.brand img { width: 260px; display: block; }
.navLinks { display: flex; align-items: center; gap: 34px; font-size: 14px; }
.navLinks > a:not(.navCta) { color: #c5c1ca; }
.navCta { padding: 13px 18px; border: 1px solid rgba(255,143,212,.5); color: var(--pink); }
.navCta span { margin-left: 18px; }

.hero {
  min-height: 735px;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; inset: 0 50% 0 auto; width: 1px;
  background: linear-gradient(transparent, var(--line), transparent);
}
.eyebrow {
  color: var(--pink); text-transform: uppercase; letter-spacing: .18em;
  font-size: 11px; font-weight: 600; display: flex; align-items: center; gap: 10px;
}
.eyebrow span { width: 7px; height: 7px; background: var(--pink); transform: rotate(45deg); }
h1, h2 { font-family: "Syne", sans-serif; font-weight: 500; letter-spacing: -.055em; margin: 22px 0; line-height: .96; }
h1 { font-size: clamp(60px, 7vw, 102px); }
h2 { font-size: clamp(48px, 6vw, 80px); }
h1 em, h2 em { font-style: normal; color: transparent; -webkit-text-stroke: 1px var(--lavender); }
.heroCopy { position: relative; z-index: 2; padding-right: 36px; }
.heroCopy > p { max-width: 550px; color: var(--muted); font-size: 18px; line-height: 1.7; }
.heroActions { display: flex; gap: 12px; margin-top: 38px; }
.button { min-height: 54px; padding: 0 22px; display: inline-flex; align-items: center; justify-content: space-between; gap: 32px; font-size: 14px; font-weight: 600; }
.primary { color: #161019; background: linear-gradient(110deg, var(--pink), #d8b0ee); }
.ghost { border: 1px solid var(--line); color: #d8d4dc; }
.button:hover, .navCta:hover { transform: translateY(-2px); transition: .2s ease; }
.heroMark { position: relative; height: 520px; display: grid; place-items: center; }
.heroMark img { width: 88%; position: relative; z-index: 2; filter: drop-shadow(0 18px 50px rgba(194,132,236,.17)); }
.orbit { position: absolute; border: 1px solid rgba(181,154,230,.18); border-radius: 50%; }
.orbitOne { width: 500px; height: 500px; }
.orbitTwo { width: 365px; height: 365px; }
.orbitOne::before, .orbitTwo::after { content:""; position:absolute; width:8px; height:8px; background:var(--pink); border-radius:50%; box-shadow:0 0 22px var(--pink); }
.orbitOne::before { top: 85px; right: 38px; }
.orbitTwo::after { left: 12px; bottom: 90px; }
.statusChip { position:absolute; right:6%; bottom:11%; padding:11px 15px; background:rgba(17,16,21,.92); border:1px solid var(--line); color:#c7c3cc; font-size:11px; text-transform:uppercase; letter-spacing:.14em; z-index:3; }
.statusChip i { display:inline-block; width:7px; height:7px; border-radius:50%; background:#8deda9; margin-right:8px; box-shadow:0 0 10px #8deda9; }
.signal { position:absolute; border-radius:50%; filter:blur(1px); opacity:.35; pointer-events:none; }
.signalOne { width:450px; height:450px; right:-220px; top:30px; background:radial-gradient(circle,rgba(181,154,230,.3),transparent 65%); }
.signalTwo { width:300px; height:300px; left:-180px; bottom:-100px; background:radial-gradient(circle,rgba(255,143,212,.2),transparent 68%); }

.marquee { overflow:hidden; border-block:1px solid var(--line); padding:15px 0; color:#b9b4bf; font-size:11px; letter-spacing:.2em; white-space:nowrap; }
.marquee div { display:flex; justify-content:space-around; min-width:1000px; }
.marquee b { color:var(--pink); }
.section { padding-block:140px; }
.sectionHead { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:58px; }
.sectionHead h2 { margin-bottom:0; }
.sectionHead > p { color:var(--muted); line-height:1.7; max-width:370px; margin:0 0 5px; }
.serviceGrid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.serviceCard { min-height:410px; padding:26px; background:var(--panel); border:1px solid var(--line); display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden; }
.serviceCard::before { content:""; position:absolute; inset:auto -50px -80px auto; width:180px; height:180px; background:radial-gradient(circle,rgba(255,143,212,.13),transparent 70%); }
.serviceCard:hover { border-color:rgba(255,143,212,.45); transform:translateY(-4px); transition:.25s ease; }
.cardTop { display:flex; justify-content:space-between; color:var(--pink); font-family:"Syne"; }
.cardTop > span { font-size:12px; letter-spacing:.15em; }
.cardTop > span + span { font-size:24px; }
.serviceCard h3 { font-family:"Syne"; font-size:27px; font-weight:500; margin:0 0 16px; }
.serviceCard p { color:var(--muted); line-height:1.7; font-size:14px; }
.tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:22px; }
.tags span { padding:7px 9px; border:1px solid var(--line); color:#bab6c0; font-size:10px; text-transform:uppercase; letter-spacing:.1em; }

.processWrap { background:#ede6eb; color:#171219; }
.process { padding-block:125px; display:grid; grid-template-columns:.9fr 1.1fr; gap:100px; align-items:center; }
.process .eyebrow { color:#9b5f93; }
.process .eyebrow span { background:#9b5f93; }
.process h2 em { -webkit-text-stroke-color:#7f609d; }
.processIntro > p { max-width:410px; color:#6e6870; line-height:1.7; }
.process ol { margin:0; padding:0; list-style:none; }
.process li { display:grid; grid-template-columns:64px 1fr; gap:24px; padding:28px 0; border-top:1px solid rgba(23,18,25,.16); }
.process li:last-child { border-bottom:1px solid rgba(23,18,25,.16); }
.process li > span { color:#a35f96; font-size:12px; letter-spacing:.15em; padding-top:5px; }
.process h3 { font-family:"Syne"; margin:0 0 8px; font-size:23px; font-weight:500; }
.process li p { margin:0; color:#706a72; font-size:14px; }

.quote { padding-block:140px; text-align:center; }
.quote > p { font-family:"Syne"; font-size:clamp(32px,4.5vw,62px); line-height:1.18; letter-spacing:-.04em; max-width:950px; margin:0 auto 40px; }
.quote > p::before { content:"“"; color:var(--pink); }
.quote > div { display:flex; justify-content:center; align-items:center; gap:14px; }
.quote > div > span { width:42px; height:42px; border:1px solid var(--pink); border-radius:50%; display:grid; place-items:center; color:var(--pink); font-family:"Syne"; }
.quote small { text-align:left; color:var(--muted); text-transform:uppercase; letter-spacing:.11em; line-height:1.6; font-size:9px; }
.contact { padding:75px; margin-bottom:24px; background:linear-gradient(130deg,#18131a,#0f0c11); border:1px solid rgba(255,143,212,.25); display:grid; grid-template-columns:1.15fr .85fr; gap:70px; align-items:center; position:relative; overflow:hidden; }
.contact::after { content:""; position:absolute; width:350px; height:350px; border:1px solid rgba(181,154,230,.12); border-radius:50%; right:-170px; top:-170px; }
.contact h2 { margin-bottom:0; }
.contactPanel { position:relative; z-index:2; }
.contactPanel p { color:var(--muted); line-height:1.7; margin:0 0 24px; }
.contactPanel .button { width:100%; }
.contactPanel small { display:block; color:#77727d; font-size:10px; margin-top:14px; text-transform:uppercase; letter-spacing:.12em; }
footer { min-height:120px; display:flex; align-items:center; gap:30px; color:#77727d; font-size:11px; text-transform:uppercase; letter-spacing:.12em; }
footer img { width:180px; margin-right:auto; }
.homeTestimonials { padding-bottom: 140px; }
.homeTestimonials .sectionHead { margin-bottom: 48px; }
.testimonialGrid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.testimonialGrid article { padding: 28px; background: var(--panel); border: 1px solid var(--line); display: flex; flex-direction: column; min-height: 310px; }
.homeStars { color: var(--pink); letter-spacing: .13em; font-size: 12px; }
.testimonialGrid blockquote { margin: 30px 0; color: #d8d3dc; font: 500 19px/1.55 "Syne"; }
.testimonialGrid footer { min-height: auto; margin-top: auto; display: flex; gap: 11px; }
.testimonialGrid footer > span { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg,var(--pink),var(--lavender)); color: #1c1420; font-weight: 600; }
.testimonialGrid footer strong, .testimonialGrid footer small { display: block; }
.testimonialGrid footer strong { color: var(--paper); font-size: 11px; }
.testimonialGrid footer small { color: var(--muted); font-size: 9px; margin-top: 4px; }
.notFound { min-height:100vh; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; }
.notFound > img { width:min(480px,100%); margin-bottom:70px; }
.notFound h1 { margin-top:20px; }

@media (max-width: 850px) {
  .shell { width:min(100% - 30px, 680px); }
  .nav { height:76px; }
  .brand img { width:190px; }
  .navLinks > a:not(.navCta) { display:none; }
  .navCta { padding:10px 13px; }
  .hero { grid-template-columns:1fr; padding-block:80px 40px; }
  .hero::after { display:none; }
  .heroMark { height:410px; }
  .heroMark img { width:min(92%,560px); }
  .orbitOne { width:390px; height:390px; }
  .orbitTwo { width:290px; height:290px; }
  .section { padding-block:90px; }
  .sectionHead { display:block; }
  .sectionHead > p { margin-top:25px; }
  .serviceGrid { grid-template-columns:1fr; }
  .serviceCard { min-height:330px; }
  .process { grid-template-columns:1fr; gap:50px; padding-block:90px; }
  .contact { grid-template-columns:1fr; padding:50px 30px; gap:35px; }
  .testimonialGrid { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .brand img { width:155px; }
  .navCta { font-size:0; }
  .navCta span { font-size:18px; margin:0; }
  h1 { font-size:54px; }
  h2 { font-size:45px; }
  .hero { min-height:auto; padding-top:65px; }
  .heroCopy > p { font-size:16px; }
  .heroActions { flex-direction:column; }
  .heroMark { height:330px; margin-top:20px; }
  .orbitOne { width:310px; height:310px; }
  .orbitTwo { width:230px; height:230px; }
  .statusChip { right:0; bottom:4%; }
  .sectionHead h2 br, .contact h2 br { display:none; }
  .quote { padding-block:95px; }
  footer { flex-wrap:wrap; padding-block:30px; gap:15px; }
  footer img { width:170px; flex-basis:100%; }
}