:root {
  --ink: #f7f7ff;
  --muted: #aaaac8;
  --line: rgba(172, 175, 255, 0.17);
  --cyan: #7ae8ff;
  --violet: #9e75ff;
  --magenta: #ff76da;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 17% 8%, rgba(63, 122, 255, .18), transparent 30rem),
    radial-gradient(circle at 88% 32%, rgba(215, 70, 255, .13), transparent 28rem),
    #080816;
  font-family: var(--font-geist), system-ui, sans-serif;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .23;
  background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(to bottom, black, transparent 75%);
}
a { color: inherit; }
main { width: min(940px, calc(100% - 40px)); margin: 0 auto; padding: 28px 0 70px; }
.hero { padding: 22px 4px 74px; }
.brand { display: flex; align-items: center; gap: 13px; font-size: 15px; font-weight: 780; letter-spacing: .18em; }
.tile { width: 33px; height: 33px; border-radius: 10px; background: #252849; border: 1px solid rgba(170,220,255,.5); box-shadow: 0 0 20px rgba(88,205,255,.22); position: relative; transform: rotate(-6deg); }
.tile i { position: absolute; left: -1px; right: -1px; top: 13px; height: 7px; background: var(--cyan); box-shadow: 0 0 16px var(--cyan); }
.eyebrow, .kicker { color: var(--cyan); text-transform: uppercase; letter-spacing: .16em; font-size: 12px; font-weight: 760; }
.eyebrow { margin: 82px 0 20px; }
h1 { margin: 0; font-size: clamp(48px, 8vw, 88px); line-height: .95; letter-spacing: -.055em; max-width: 850px; }
.intro { color: var(--muted); font-size: clamp(18px, 2.3vw, 23px); line-height: 1.55; max-width: 700px; margin: 28px 0 36px; }
nav { display: flex; flex-wrap: wrap; gap: 10px; }
nav a { text-decoration: none; color: #d8d9f0; background: rgba(25, 26, 54, .7); border: 1px solid var(--line); border-radius: 999px; padding: 11px 16px; font-size: 14px; transition: .2s ease; }
nav a:hover, nav a:focus-visible { border-color: var(--cyan); color: white; transform: translateY(-2px); }
.card { display: grid; grid-template-columns: 62px 1fr; gap: 24px; padding: clamp(28px, 5vw, 52px); margin: 16px 0; background: linear-gradient(135deg, rgba(25, 27, 59, .82), rgba(13, 14, 35, .78)); border: 1px solid var(--line); border-radius: 28px; box-shadow: inset 0 1px rgba(255,255,255,.045), 0 24px 80px rgba(0,0,0,.23); backdrop-filter: blur(18px); }
.card.accent { border-color: rgba(148,111,255,.36); background: radial-gradient(circle at 100% 0, rgba(174,92,255,.18), transparent 35%), linear-gradient(135deg, rgba(30, 29, 70, .88), rgba(13, 14, 35, .82)); }
.section-number { color: #6e708f; font-size: 13px; font-weight: 700; letter-spacing: .14em; padding-top: 4px; }
.kicker { margin: 0 0 10px; }
h2 { margin: 0 0 21px; font-size: clamp(30px, 4.4vw, 48px); line-height: 1.02; letter-spacing: -.04em; }
h3 { margin: 30px 0 8px; font-size: 17px; color: #e6e7ff; }
.card p { color: var(--muted); font-size: 16px; line-height: 1.72; max-width: 710px; }
.action { display: inline-flex; gap: 18px; align-items: center; margin-top: 15px; padding: 14px 18px; text-decoration: none; font-weight: 720; border-radius: 14px; color: #071016; background: linear-gradient(135deg, #d6fbff, var(--cyan)); box-shadow: 0 8px 32px rgba(77,217,255,.22); }
.action.magenta { background: linear-gradient(135deg, #ffe2f7, var(--magenta)); box-shadow: 0 8px 32px rgba(255,82,214,.2); }
.action:hover, .action:focus-visible { transform: translateY(-2px); filter: brightness(1.08); }
footer { display: flex; flex-wrap: wrap; gap: 10px 24px; color: #777994; font-size: 13px; padding: 30px 5px 0; }
footer p { margin: 0; }
footer a { color: #aaaee5; }

@media (max-width: 620px) {
  main { width: min(100% - 24px, 940px); padding-top: 14px; }
  .hero { padding: 16px 4px 48px; }
  .eyebrow { margin-top: 58px; }
  .card { grid-template-columns: 1fr; gap: 10px; border-radius: 22px; }
  .section-number { padding: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

.studio-nav{max-width:1260px;margin:0 auto;display:flex;flex-wrap:wrap;gap:8px 20px;padding:14px 24px;border-bottom:1px solid #65758c55;font:14px/1.5 Arial,Helvetica,sans-serif}.studio-nav a{display:inline-flex;align-items:center;min-height:32px;padding:3px 0;color:inherit;text-decoration:underline;text-underline-offset:4px;border:0;border-radius:0;background:none}.studio-nav a:focus-visible{outline:3px solid #ffaa94;outline-offset:4px}.legal .studio-nav{max-width:940px;margin:auto}.legal .studio-nav a:hover{transform:none}.legal main{overflow-wrap:anywhere}.hero-copy{min-width:0}@media(max-width:600px){.studio-nav{padding:10px 18px}.hero{grid-template-columns:minmax(0,1fr)}.hero-image{max-width:min(260px,calc(100% - 2rem))}}@media(max-width:360px){.hero h1{font-size:clamp(2.5rem,12vw,2.7rem);overflow-wrap:anywhere}}