:root {
  --ink: #172342;
  --muted: #66728d;
  --cream: #f5f7fc;
  --paper: #ffffff;
  --lime: #d7f45c;
  --orange: #7657f5;
  --line: #e4e8f1;
  --radius: 22px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--cream); color: var(--ink); font-family: "DM Sans", sans-serif; line-height: 1.5; }
a { color: inherit; text-decoration: none; }
.container { width: min(1160px, calc(100% - 48px)); margin: auto; }
.eyebrow { color: var(--orange); font-size: .75rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
h1, h2, h3, .logo { font-family: "Space Grotesk", sans-serif; letter-spacing: -.055em; line-height: 1.03; }
h2 { font-size: clamp(2.35rem, 5vw, 4.2rem); max-width: 670px; }
.button { align-items: center; background: var(--ink); border: 1px solid var(--ink); border-radius: 999px; color: white; display: inline-flex; font-size: .88rem; font-weight: 700; gap: 10px; padding: 14px 21px; transition: transform .2s, background .2s, color .2s; }
.button:hover { background: var(--orange); border-color: var(--orange); transform: translateY(-2px); }
.button.light { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.button.light:hover { background: white; border-color: white; }
.arrow { font-size: 1.15rem; line-height: 0; }
header { background: rgba(245,247,252,.85); border-bottom: 1px solid rgba(228,232,241,.7); padding: 19px 0; position: absolute; top: 0; width: 100%; z-index: 3; }
nav { align-items: center; display: flex; justify-content: space-between; }
.logo { font-size: 1.45rem; font-weight: 700; letter-spacing: -.07em; }
.logo span { color: var(--orange); }
.nav-links { display: flex; gap: 28px; margin-left: auto; margin-right: 34px; }
.nav-links a { color: #49605b; font-size: .86rem; font-weight: 600; transition: color .2s; }
.nav-links a:hover { color: var(--orange); }
.menu { background: none; border: 0; cursor: pointer; display: none; font-size: 1.5rem; }
.hero { background: linear-gradient(120deg, #f5f7fc 0%, #f0efff 100%); min-height: 710px; overflow: hidden; padding: 160px 0 75px; position: relative; }
.hero:before { background: var(--lime); border-radius: 50%; content: ""; height: 560px; opacity: .65; position: absolute; right: -230px; top: -270px; width: 560px; z-index: 0; }
.hero:after { background: #e8e2ff; border-radius: 50%; content: ""; height: 420px; opacity: .7; position: absolute; right: -95px; top: 240px; width: 420px; z-index: 0; }
.hero-grid { align-items: center; display: grid; gap: 50px; grid-template-columns: .9fr 1.1fr; position: relative; z-index: 1; }
.hero h1 { font-size: clamp(3.2rem, 6vw, 5.8rem); margin: 18px 0 25px; max-width: 650px; }
.hero h1 em { color: var(--orange); font-style: normal; }
.hero-copy { color: var(--muted); font-size: 1.05rem; max-width: 450px; }
.hero-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 22px; margin-top: 34px; }
.text-link { font-size: .88rem; font-weight: 700; }
.text-link:hover { color: var(--orange); }
.orbital { align-items: center; display: flex; height: 450px; justify-content: center; position: relative; }
.orbital .ring { border: 1px solid rgba(118,87,245,.18); border-radius: 50%; height: 440px; position: absolute; transform: rotate(-28deg); width: 265px; }
.orbital .ring.two { height: 280px; transform: rotate(48deg); width: 470px; }
.orbital .dot { background: var(--orange); border-radius: 50%; height: 94px; position: absolute; right: 28px; top: 62px; width: 94px; }
.orbital .star { background: var(--ink); border-radius: 50%; box-shadow: 0 0 0 18px rgba(215,244,92,.55); color: var(--lime); font-size: 4.2rem; height: 160px; line-height: 145px; position: relative; text-align: center; width: 160px; }
.product-card { background: white; border: 1px solid #e0e3ef; border-radius: 16px; box-shadow: 0 24px 60px rgba(34,42,88,.16); height: 330px; padding: 18px; position: absolute; right: 10px; top: 60px; transform: rotate(2deg); width: min(100%, 480px); z-index: 2; }
.product-top { align-items: center; border-bottom: 1px solid var(--line); display: flex; gap: 7px; padding-bottom: 14px; }
.product-top i { background: #e9ebf2; border-radius: 50%; height: 8px; width: 8px; }
.product-top b { font-size: .72rem; margin-left: auto; }
.product-content { display: grid; gap: 14px; grid-template-columns: 1fr 1.35fr; padding-top: 18px; }
.profile-box { background: #f1efff; border-radius: 10px; padding: 14px; }
.profile-box strong { display: block; font-size: 1.8rem; margin-top: 18px; }
.mini-label { color: #929bb1; font-size: .62rem; font-weight: 700; text-transform: uppercase; }
.chart { background: #f7f8fb; border-radius: 10px; padding: 14px; }
.chart-bars { align-items: end; display: flex; gap: 9px; height: 130px; margin-top: 13px; }
.chart-bars i { background: #b5a7ff; border-radius: 4px 4px 0 0; flex: 1; }
.chart-bars i:nth-child(2), .chart-bars i:nth-child(5) { background: var(--orange); }
.orbital small { bottom: 50px; color: var(--muted); font-size: .72rem; left: 42px; letter-spacing: .1em; position: absolute; text-transform: uppercase; }
section { padding: 115px 0; }
.section-head { align-items: end; display: flex; justify-content: space-between; margin-bottom: 55px; }
.section-head > div:first-child { max-width: 700px; }
.section-head h2 { margin-top: 14px; }
.section-note { color: var(--muted); font-size: .92rem; max-width: 250px; }
.services { background: var(--paper); }
.service-grid { border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, 1fr); }
.service { border-right: 1px solid var(--line); padding: 34px 30px 20px 0; }
.service:not(:first-child) { padding-left: 30px; }
.service:last-child { border-right: 0; }
.service-num { color: var(--orange); font-size: .8rem; font-weight: 700; }
.service h3 { font-size: 1.65rem; margin: 42px 0 13px; letter-spacing: -.04em; }
.service p { color: var(--muted); font-size: .9rem; max-width: 270px; }
.service a { display: inline-block; font-size: .85rem; font-weight: 700; margin-top: 34px; }
.service a:hover { color: var(--orange); }
.work-grid { display: grid; gap: 24px; grid-template-columns: 1fr 1fr; }
.project { min-height: 395px; overflow: hidden; padding: 28px; position: relative; }
.project:first-child { background: #e9ddcc; }
.project:nth-child(2) { background: #cce7df; }
.project:nth-child(3) { background: #e7edb7; }
.project:nth-child(4) { background: #f3c7ba; }
.project h3 { bottom: 28px; font-size: 2.1rem; max-width: 300px; position: absolute; z-index: 1; }
.project p { font-size: .75rem; font-weight: 700; letter-spacing: .1em; position: relative; text-transform: uppercase; z-index: 1; }
.shape { border-radius: 50%; height: 220px; position: absolute; right: -12px; top: 47px; transform: rotate(24deg); width: 220px; }
.project:first-child .shape { background: #ff744f; box-shadow: -60px 42px 0 #304c47; }
.project:nth-child(2) .shape { background: #f7f4ec; border: 20px solid #ee694c; height: 280px; width: 280px; }
.project:nth-child(3) .shape { background: #1b4540; border-radius: 35% 65% 58% 42%; height: 255px; width: 200px; }
.project:nth-child(4) .shape { background: #d7f35c; box-shadow: -65px -30px 0 #244d46; height: 190px; width: 190px; }
.stats { background: var(--ink); color: white; }
.stats .eyebrow { color: var(--lime); }
.stats-grid { display: grid; gap: 20px; grid-template-columns: 1.4fr repeat(3, 1fr); }
.stat { border-left: 1px solid rgba(255,255,255,.22); padding: 8px 0 8px 25px; }
.stat strong { display: block; font-family: "Space Grotesk"; font-size: 3rem; letter-spacing: -.08em; }
.stat span { color: #a8bbb4; font-size: .8rem; }
.stats-copy { color: #b7c7c1; font-size: .92rem; margin-top: 20px; max-width: 210px; }
.cta { padding: 125px 0; text-align: center; }
.cta h2 { margin: 15px auto 28px; max-width: 760px; }
.cta p { color: var(--muted); margin: 0 auto 30px; max-width: 450px; }
footer { background: var(--paper); border-top: 1px solid var(--line); padding: 26px 0; }
.footer-row { align-items: center; display: flex; justify-content: space-between; }
.footer-row small { color: var(--muted); font-size: .75rem; }
.social { display: flex; gap: 20px; }
.social a { font-size: .78rem; font-weight: 700; }
.social a:hover { color: var(--orange); }
@media (max-width: 760px) {
  .container { width: min(100% - 36px, 560px); }
  header { padding-top: 18px; }
  .nav-links, header .button { display: none; }
  .menu { display: block; }
  .hero { min-height: auto; padding: 125px 0 60px; }
  .hero-grid { gap: 20px; grid-template-columns: 1fr; }
  .hero h1 { font-size: clamp(3.3rem, 16vw, 5.4rem); }
  .orbital { height: 290px; margin-top: 20px; }
  .orbital .ring { height: 300px; width: 185px; }
  .orbital .ring.two { height: 200px; width: 310px; }
  .orbital .star { font-size: 3rem; height: 115px; line-height: 105px; width: 115px; }
  .orbital .dot { height: 60px; right: 13%; top: 15px; width: 60px; }
  .orbital small { bottom: 7px; left: 15px; }
  section { padding: 75px 0; }
  .section-head { align-items: start; display: block; margin-bottom: 36px; }
  .section-note { margin-top: 18px; }
  .service-grid, .stats-grid { grid-template-columns: 1fr; }
  .service, .service:not(:first-child) { border-bottom: 1px solid var(--line); border-right: 0; padding: 28px 0; }
  .service h3 { margin-top: 25px; }
  .work-grid { grid-template-columns: 1fr; }
  .project { min-height: 320px; }
  .stats-grid { gap: 30px; }
  .stat { border-left: 0; border-top: 1px solid rgba(255,255,255,.22); padding: 20px 0 0; }
  .stats-copy { margin-bottom: 8px; }
  .footer-row { align-items: start; flex-direction: column; gap: 18px; }
}