/* Edge SI — one page. Tokens first, then layout top to bottom. */

:root {
  --bg: #07080C;
  --bg-foot: #000000;
  --ink: #EEF0F5;
  --ink-2: #B4B9C6;
  --muted: #9AA0B0;
  --line: rgba(255, 255, 255, 0.10);
  --line-strong: rgba(255, 255, 255, 0.34);
  --card: rgba(255, 255, 255, 0.05);

  --blue: #3B6CF6;
  --gold: #E8B04B;
  --pink: #E46B9A;
  --cyan: #6FD3F2;

  --head: "Outfit", system-ui, sans-serif;
  --body: "DM Sans", system-ui, sans-serif;

  --wrap: 1200px;
  --gutter: 24px;

  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --fast: 200ms;
  --base: 500ms;
  --slow: 900ms;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  color-scheme: dark;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body { margin: 0; min-height: 100dvh; overflow-x: hidden; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

h1, h2, p, ul { margin: 0; }
h1, h2 { text-wrap: balance; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.skip {
  position: absolute; left: 16px; top: 16px;
  padding: 10px 16px; background: var(--ink); color: var(--bg);
  border-radius: 999px; font-weight: 500; z-index: 100;
  transform: translateY(-80px); opacity: 0;
  transition: transform var(--fast) var(--ease), opacity var(--fast) var(--ease);
}
.skip:focus { transform: none; opacity: 1; }

/* Header: sits over the hero, never sticky. */
.top {
  position: absolute; inset: 0 0 auto 0;
  height: 96px; z-index: 10;
  display: flex; align-items: center;
}
.top__row { display: flex; align-items: center; justify-content: space-between; }
.mono { display: inline-flex; color: var(--ink); padding: 4px; }
.mono svg { display: block; }

.pill {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 44px; padding: 6px 6px 6px 20px;
  border: 1px solid var(--line-strong); border-radius: 999px;
  font-family: var(--head); font-weight: 500; font-size: 15px; letter-spacing: 0.01em;
  transition: border-color var(--base) var(--ease), background-color var(--base) var(--ease), transform var(--base) var(--ease);
}
.pill__arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.10);
  transition: transform var(--base) var(--ease), background-color var(--base) var(--ease);
}
.pill:hover { border-color: var(--ink); background: rgba(255, 255, 255, 0.04); }
.pill:hover .pill__arrow { transform: translate(1px, -1px); background: rgba(255, 255, 255, 0.18); }
.pill:active { transform: scale(0.98); }

/* Hero */
.hero {
  position: relative; overflow: hidden;
  display: flex; align-items: center;
  padding: 140px 0 72px;
}
/* The glow fades out before the hero ends, so it melts into the stars below instead of stopping at a hard line. */
.hero__bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 45%, rgba(0,0,0,0.4) 75%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 45%, rgba(0,0,0,0.4) 75%, transparent 100%);
}
.glow {
  position: absolute; pointer-events: none; z-index: 0;
  left: -14vw; top: 6vh;
  width: min(68vw, 760px); aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 42% 44%, rgba(59, 108, 246, 0.70), transparent 58%),
    radial-gradient(circle at 66% 58%, rgba(232, 176, 75, 0.55), transparent 55%),
    radial-gradient(circle at 30% 70%, rgba(228, 107, 154, 0.50), transparent 56%),
    radial-gradient(circle at 60% 30%, rgba(111, 211, 242, 0.35), transparent 50%);
  filter: blur(56px);
  opacity: 0.95;
  will-change: transform;
}
.hero__grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr; gap: 56px;
  align-items: center;
}
.wordmark {
  font-family: var(--head); font-weight: 700;
  font-size: clamp(72px, 13vw, 156px);
  line-height: 0.95; letter-spacing: -0.045em;
  color: var(--ink);
}
.wordmark__text { display: inline-block; transform: skewX(-7deg); transform-origin: left bottom; }

.statement {
  font-family: var(--head); font-weight: 500;
  font-size: clamp(22px, 2.4vw, 28px); line-height: 1.3; letter-spacing: -0.015em;
}
.lede { margin-top: 18px; font-size: 17px; line-height: 1.65; color: var(--ink-2); max-width: 46ch; }
.textlink {
  display: inline-block; margin-top: 28px;
  font-family: var(--head); font-weight: 500; font-size: 15px; color: var(--gold);
  border-bottom: 1px solid transparent;
  transition: border-color var(--fast) var(--ease);
}
.textlink:hover { border-color: var(--gold); }

/* Galaxy */
/* The galaxy has no hard edges: the star field reaches up into the hero and fades in slowly, then fades out
   just below the products, before "Talk to us". Only the sides are clipped (the glow band is wider than the page). */
.galaxy { position: relative; overflow-x: clip; overflow-y: visible; padding: 80px 0 72px; }
.stars {
  position: absolute; left: 0; top: -220px; width: 100%; height: calc(100% + 300px); z-index: 0; pointer-events: none;
}
.galaxy .wrap { position: relative; z-index: 1; }

.eyebrow {
  display: inline-block; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px;
  font-family: var(--head); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-2);
}
.title {
  margin-top: 22px;
  font-family: var(--head); font-weight: 500;
  font-size: clamp(32px, 4.2vw, 48px); line-height: 1.1; letter-spacing: -0.025em;
  max-width: 18ch;
}

.orbit {
  position: relative; margin-top: 56px;
  display: flex; flex-direction: column; align-items: center; gap: 72px;
  padding-top: 24px; padding-bottom: 24px;
}
.branch {
  position: absolute; pointer-events: none; z-index: 0;
  left: -20%; right: -20%; top: 40%;
  height: 220px; transform: rotate(-9deg);
  background:
    radial-gradient(ellipse at 28% 50%, rgba(59, 108, 246, 0.58), transparent 60%),
    radial-gradient(ellipse at 62% 50%, rgba(232, 176, 75, 0.42), transparent 58%),
    radial-gradient(ellipse at 85% 50%, rgba(228, 107, 154, 0.32), transparent 55%);
  filter: blur(46px);
  opacity: 1;
}

.orb {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  width: 300px; padding: 12px; border-radius: 24px;
  color: var(--ink);
}
.orb__float { display: block; will-change: transform; }
.orb__sphere {
  position: relative; display: block; border-radius: 50%;
  width: 136px; height: 136px;
  transition: transform var(--base) var(--ease), box-shadow var(--base) var(--ease);
}
.orb__sphere::before {
  content: ""; position: absolute; inset: -34%; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, var(--halo) 0%, transparent 62%);
  filter: blur(14px); opacity: 0.9;
  transition: opacity var(--base) var(--ease), transform var(--base) var(--ease);
}
.orb:hover .orb__sphere::before, .orb:focus-visible .orb__sphere::before { opacity: 1; transform: scale(1.12); }
.orb--restoiq .orb__sphere {
  --halo: rgba(232, 176, 75, 0.45);
  background:
    radial-gradient(circle at 36% 30%, rgba(255, 246, 225, 0.95) 0%, rgba(255, 246, 225, 0) 28%),
    radial-gradient(circle at 50% 50%, #F1BC55 0%, #D99B3A 42%, rgba(217, 155, 58, 0.55) 66%, rgba(217, 155, 58, 0) 74%);
  box-shadow: 0 0 36px 8px rgba(232, 176, 75, 0.28), 0 0 120px 36px rgba(232, 176, 75, 0.14), inset 0 0 28px rgba(255, 236, 190, 0.35);
}
.orb--sonar .orb__sphere {
  --halo: rgba(80, 130, 255, 0.45);
  width: 112px; height: 112px;
  background:
    radial-gradient(circle at 36% 30%, rgba(230, 243, 255, 0.95) 0%, rgba(230, 243, 255, 0) 28%),
    radial-gradient(circle at 50% 50%, #6F96FF 0%, #3B6CF6 42%, rgba(59, 108, 246, 0.55) 66%, rgba(59, 108, 246, 0) 74%);
  box-shadow: 0 0 36px 8px rgba(59, 108, 246, 0.28), 0 0 120px 36px rgba(59, 108, 246, 0.14), inset 0 0 28px rgba(200, 220, 255, 0.35);
}
/* The third orb is the one we build for you: soft pink, with a dashed ring still being drawn round it. */
.orb--custom .orb__sphere {
  --halo: rgba(228, 107, 154, 0.40);
  width: 104px; height: 104px;
  background:
    radial-gradient(circle at 36% 30%, rgba(255, 232, 242, 0.95) 0%, rgba(255, 232, 242, 0) 28%),
    radial-gradient(circle at 50% 50%, #F08DB3 0%, #D9578A 42%, rgba(217, 87, 138, 0.55) 66%, rgba(217, 87, 138, 0) 74%);
  box-shadow: 0 0 36px 8px rgba(228, 107, 154, 0.26), 0 0 120px 36px rgba(228, 107, 154, 0.12), inset 0 0 28px rgba(255, 210, 228, 0.35);
}
.orb--custom .orb__sphere::after {
  content: ""; position: absolute; inset: -16px; border-radius: 50%;
  border: 1px dashed rgba(240, 141, 179, 0.55);
  animation: spin 40s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.orb:hover .orb__sphere, .orb:focus-visible .orb__sphere { transform: scale(1.08); }
.orb--custom:hover .orb__sphere, .orb--custom:focus-visible .orb__sphere {
  box-shadow: 0 0 56px 16px rgba(228, 107, 154, 0.40), 0 0 180px 60px rgba(228, 107, 154, 0.20);
}
.orb--restoiq:hover .orb__sphere, .orb--restoiq:focus-visible .orb__sphere {
  box-shadow: 0 0 56px 16px rgba(232, 176, 75, 0.42), 0 0 180px 60px rgba(232, 176, 75, 0.22);
}
.orb--sonar:hover .orb__sphere, .orb--sonar:focus-visible .orb__sphere {
  box-shadow: 0 0 56px 16px rgba(59, 108, 246, 0.42), 0 0 180px 60px rgba(59, 108, 246, 0.22);
}
.orb__name { margin-top: 26px; font-family: var(--head); font-weight: 600; font-size: 24px; letter-spacing: -0.01em; }
.orb__line { margin-top: 4px; font-size: 15px; color: var(--ink-2); }
.orb__card {
  display: block; margin-top: 16px; width: 100%;
  padding: 18px 20px; text-align: center;
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  font-size: 14px; line-height: 1.55; color: var(--ink-2);
  transition: opacity var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.orb__open {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 14px; font-family: var(--head); font-weight: 500; color: var(--gold);
}
.orb--sonar .orb__open { color: #9DB8FF; }
.orb--custom .orb__open { color: #F4A9C6; }
.orb__arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 999px; background: rgba(255, 255, 255, 0.08);
  transition: transform var(--base) var(--ease);
}
.orb:hover .orb__arrow { transform: translate(1px, -1px); }

/* Built to order: a panel that opens from the "Yours" orb. */
.build {
  width: min(960px, calc(100% - 32px)); max-height: calc(100dvh - 32px);
  margin: auto; padding: 0; border: 1px solid var(--line); border-radius: 28px;
  color: var(--ink); overflow: auto; overscroll-behavior: contain;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(228, 107, 154, 0.16), transparent 55%),
    radial-gradient(90% 70% at 100% 100%, rgba(59, 108, 246, 0.12), transparent 60%),
    rgba(12, 13, 20, 0.94);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6);
}
.build::backdrop { background: rgba(3, 4, 8, 0.66); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.build[open] { animation: build-in var(--base) var(--ease); }
.build[open]::backdrop { animation: fade-in var(--base) var(--ease); }
@keyframes build-in { from { opacity: 0; transform: translateY(16px) scale(0.98); } }
@keyframes fade-in { from { opacity: 0; } }
html.has-dialog { overflow: hidden; }
.build__inner { position: relative; padding: 48px 24px 32px; }
.build__close {
  position: absolute; top: 16px; right: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04); color: var(--ink); cursor: pointer;
  transition: background-color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.build__close:hover { background: rgba(255, 255, 255, 0.10); border-color: var(--line-strong); }
.build__title {
  font-family: var(--head); font-weight: 500;
  font-size: clamp(30px, 4vw, 44px); line-height: 1.1; letter-spacing: -0.025em;
  max-width: 22ch; padding-right: 48px;
}
.build__lede { margin-top: 18px; font-size: 16px; line-height: 1.65; color: var(--ink-2); max-width: 62ch; }
.steps { list-style: none; margin: 36px 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 12px; }
.step {
  padding: 24px 22px 26px; border: 1px solid var(--line); border-radius: 18px; background: var(--card);
  transition: border-color var(--base) var(--ease), background-color var(--base) var(--ease);
}
.step:hover { border-color: rgba(240, 141, 179, 0.35); background: rgba(255, 255, 255, 0.07); }
.step__num { font-family: var(--head); font-size: 13px; font-weight: 500; letter-spacing: 0.12em; color: #F4A9C6; }
.step__title { margin: 14px 0 0; font-family: var(--head); font-weight: 500; font-size: 20px; letter-spacing: -0.01em; color: var(--ink); }
.step__body { margin-top: 8px; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.build__cta { margin-top: 32px; }

/* Contact */
.contact { position: relative; z-index: 1; padding: 72px 0 88px; }
.contact__grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: start; }
.contact .title { margin-top: 0; }

/* Enquiry form: quiet, dark fields that match the page. */
.form { display: grid; gap: 16px; }
.form__label { display: block; margin-bottom: 8px; font-size: 13px; color: var(--ink-2); }
.form__opt { color: var(--muted); }
.form__chips { margin: 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.form__chips legend { width: 100%; padding: 0; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px;
  border: 1px solid var(--line); border-radius: 999px; font-size: 14px; color: var(--ink-2);
  transition: border-color var(--fast) var(--ease), background-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.chip:hover span { border-color: var(--line-strong); color: var(--ink); }
.chip input:checked + span { border-color: var(--ink); background: rgba(255, 255, 255, 0.08); color: var(--ink); }
.chip input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 3px; }
.form__row { display: grid; grid-template-columns: 1fr; gap: 16px; }
.field { display: block; }
.field input, .field textarea {
  display: block; width: 100%; padding: 13px 16px;
  font: inherit; font-size: 16px; color: var(--ink);
  background: rgba(255, 255, 255, 0.035); border: 1px solid var(--line); border-radius: 14px;
  transition: border-color var(--fast) var(--ease), background-color var(--fast) var(--ease);
}
.field textarea { resize: vertical; min-height: 120px; line-height: 1.5; }
.field input:hover, .field textarea:hover { border-color: var(--line-strong); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--ink); background: rgba(255, 255, 255, 0.06); }
.field .is-bad { border-color: #E46B6B; }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 4px; }
.form__send { background: transparent; color: var(--ink); cursor: pointer; font: inherit; font-family: var(--head); font-weight: 500; font-size: 15px; }
.form__status { font-size: 13px; color: var(--muted); }

/* Footer: quiet fine print. */
.foot { position: relative; z-index: 1; background: linear-gradient(to bottom, var(--bg) 0%, var(--bg-foot) 60%); padding: 0 0 28px; font-size: 13px; line-height: 1.65; color: #7E8494; }
.foot__grid { display: grid; grid-template-columns: 1fr; gap: 32px; padding-top: 48px; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.foot__logo {
  display: inline-flex; align-items: center; gap: 10px; color: var(--ink);
  font-family: var(--head); font-weight: 600; font-size: 17px; letter-spacing: -0.01em;
}
.foot__logo svg { display: block; flex: none; width: 24px; height: 24px; }
.foot__tag { margin-top: 10px; color: var(--muted); max-width: 26ch; }
.foot__head {
  margin: 0 0 12px; font-family: var(--head); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-2);
}
.foot__col p + p { margin-top: 1px; }
.foot address { font-style: normal; }
.foot__col a { border-bottom: 1px solid transparent; transition: border-color var(--fast) var(--ease), color var(--fast) var(--ease); }
.foot__col a:hover { color: var(--ink); border-color: var(--ink); }
.foot__phone { display: flex; align-items: center; gap: 10px; }
.wa {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 26px; height: 26px; border-radius: 999px; border: 1px solid var(--line) !important;
  color: var(--ink-2);
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease), background-color var(--fast) var(--ease);
}
.wa:hover { color: #25D366; border-color: rgba(37, 211, 102, 0.5) !important; background: rgba(37, 211, 102, 0.06); }
.foot__bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px;
  margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.06); font-size: 12px; color: #6C7282;
}
.foot__links { display: flex; gap: 20px; }
.foot__links a { border-bottom: 1px solid transparent; transition: border-color var(--fast) var(--ease), color var(--fast) var(--ease); }
.foot__links a:hover { color: var(--ink); border-color: var(--ink); }

/* Scroll reveal: only when JS is on, so content never hides without it. */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
.js .reveal:nth-child(2) { transition-delay: 80ms; }

/* Wider screens */
@media (min-width: 768px) {
  :root { --gutter: 40px; }
  .hero { min-height: 100dvh; padding: 160px 0 120px; }
  .hero__grid { grid-template-columns: 1.15fr 1fr; gap: 64px; }
  .hero__right { padding-top: 24px; }
  .contact__grid { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .form__row { grid-template-columns: 1fr 1fr; }
  .build__inner { padding: 56px 56px 48px; }
  .foot__grid { grid-template-columns: 1fr 1fr; gap: 36px 40px; }
}

@media (min-width: 1024px) {
  .foot__grid { grid-template-columns: 1.2fr 1fr 1fr 1.25fr 1fr; gap: 36px; }
}

/* Phones: the whole orb is tappable, and they stay lit with a dashed ring, all the time. */
@media (max-width: 899px) {
  .orb { -webkit-tap-highlight-color: transparent; }
  .orb__open { padding: 6px 0; }
  .orb__card { background: rgba(12, 13, 20, 0.72); }
  .orb__sphere::before { opacity: 1; transform: scale(1.12); }
  .orb__sphere::after {
    content: ""; position: absolute; inset: -16px; border-radius: 50%;
    border: 1px dashed var(--ring); animation: spin 40s linear infinite;
  }
  .orb--restoiq .orb__sphere { --ring: rgba(241, 188, 85, 0.55); box-shadow: 0 0 56px 16px rgba(232, 176, 75, 0.42), 0 0 180px 60px rgba(232, 176, 75, 0.22); }
  .orb--sonar .orb__sphere { --ring: rgba(120, 160, 255, 0.6); box-shadow: 0 0 56px 16px rgba(59, 108, 246, 0.42), 0 0 180px 60px rgba(59, 108, 246, 0.22); }
  .orb--custom .orb__sphere { --ring: rgba(240, 141, 179, 0.55); box-shadow: 0 0 56px 16px rgba(228, 107, 154, 0.40), 0 0 180px 60px rgba(228, 107, 154, 0.20); }
}

@media (min-width: 900px) {
  .orbit { display: block; min-height: 680px; margin-top: 24px; }
  .orb { position: absolute; }
  .orb--restoiq { left: 2%; top: 4%; }
  .orb--sonar { left: calc(50% - 150px); top: 40%; }
  .orb--custom { right: 2%; top: 2%; }
  .orb__sphere { width: 168px; height: 168px; }
  .orb--sonar .orb__sphere { width: 136px; height: 136px; }
  .orb--custom .orb__sphere { width: 120px; height: 120px; }
  /* On pointer devices the card waits for hover or focus. */
  .orb__card { position: absolute; left: 12px; right: 12px; top: 100%; margin-top: 0; opacity: 0; transform: translateY(8px); pointer-events: none; }
  .orb__card { transition: opacity var(--fast) var(--ease) 120ms, transform var(--fast) var(--ease) 120ms, visibility 0s linear 320ms; visibility: hidden; }
  .orb:hover .orb__card, .orb:focus-visible .orb__card { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: 0s; }
  .orb:hover, .orb:focus-visible { z-index: 3; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .orb__sphere, .pill, .pill__arrow, .orb__arrow, .orb__card, .step, .chip span, .field input, .field textarea { transition: none; }
  .orb__sphere::after { animation: none !important; }
  .build[open], .build[open]::backdrop { animation: none; }
  .orb:hover .orb__sphere, .orb:focus-visible .orb__sphere { transform: none; }
}

.galaxy .title { max-width: 26ch; margin-top: 0; }