:root { color-scheme: dark; --bg: #1d1d1f; --fg: #f5f5f7; --muted: #b0b0b5; --line: #38383a; --accent: #c5d8c4; font-family: Arial, Helvetica, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; position: relative; isolation: isolate; overflow-x: hidden; background: var(--bg); color: var(--fg); font-size: 16px; -webkit-font-smoothing: antialiased; }
body::before, body::after { content: ""; position: fixed; z-index: -1; pointer-events: none; border-radius: 50%; filter: blur(150px) saturate(140%); opacity: .12; }
body::before { width: min(88vw, 847px); aspect-ratio: 1; top: -18%; left: -25%; background: conic-gradient(from 210deg at 50% 50%, #ff6b9d 0deg, #c084fc 55deg, #60a5fa 115deg, #34d399 175deg, #fbbf24 235deg, #fb923c 295deg, #ff6b9d 360deg); }
body::after { width: min(62vw, 600px); aspect-ratio: 1; top: 45%; right: -28%; background: conic-gradient(from 300deg at 50% 50%, #fb7185 0deg, #e879f9 65deg, #60a5fa 130deg, #2dd4bf 200deg, #facc15 270deg, #fb7185 360deg); }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 7px; }
.shell { width: min(1120px, calc(100% - 96px)); margin-inline: auto; }
.site-nav { min-height: 104px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { font-size: 26px; letter-spacing: -.065em; font-weight: 700; }
.brand span:first-child { font-weight: 400; }
.brand-dot, .title-dot { color: var(--accent); }
.contact { font-size: 14px; }
.contact span { margin-left: 18px; color: var(--muted); }
.intro { padding: 90px 0 78px; }
.eyebrow { color: var(--muted); margin: 0 0 23px; font-size: 14px; letter-spacing: .08em; }
h1 { font-size: clamp(4rem, 11vw, 9rem); font-weight: 500; line-height: 1; letter-spacing: -.075em; margin: 0; }
.intro-copy { margin: 25px 0 0; color: var(--muted); font-size: 18px; line-height: 1.6; }
.section-label { display: flex; justify-content: space-between; color: var(--muted); font-size: 14px; padding-bottom: 18px; }
.section-label h2 { font: inherit; margin: 0; }
.section-label > span { font-variant-numeric: tabular-nums; }
.offer { display: grid; grid-template-columns: 190px 1fr 42px; gap: 24px; align-items: center; padding: 31px 0; border-top: 1px solid var(--line); transition: background-color .18s ease; }
.offer:last-child { border-bottom: 1px solid var(--line); }
.offer:hover { background: #191b1c; }
.offer-type { color: var(--muted); font-size: 14px; }
.offer h3 { margin: 0; font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 400; letter-spacing: -.035em; }
.offer p { color: var(--muted); margin: 9px 0 0; font-size: 16px; line-height: 1.5; }
.offer-arrow { justify-self: end; font-size: 28px; color: var(--accent); transition: transform .18s ease; }
.offer:hover .offer-arrow { transform: translate(3px, -3px); }
.beta { display: inline-block; vertical-align: middle; border: 1px solid #484f48; border-radius: 4px; color: var(--accent); padding: 3px 6px; font-size: 12px; letter-spacing: 0; margin-left: 10px; }
footer { display: flex; justify-content: space-between; gap: 20px; color: var(--muted); font-size: 14px; padding: 38px 0; margin-top: 38px; }
footer a:hover, .contact:hover { color: var(--accent); }
.skip-link { position: absolute; left: 24px; top: -80px; background: var(--fg); color: var(--bg); padding: 14px; z-index: 1; }
.skip-link:focus { top: 16px; }
.service-shell { min-height: 100svh; display: flex; flex-direction: column; }
.service-main { flex: 1; padding: 90px 0 60px; }
.service-title { font-size: clamp(3.2rem, 9vw, 7.5rem); line-height: 1.04; }
.service-copy { color: var(--muted); font-size: 18px; line-height: 1.7; margin: 32px 0; }
.inquiry { display: inline-flex; align-items: center; gap: 45px; padding: 17px 22px; background: var(--fg); color: var(--bg); border-radius: 4px; }
.inquiry:hover { background: var(--accent); }
@media (max-width: 700px) {
  .shell { width: calc(100% - 40px); }
  .site-nav { min-height: 80px; }
  .intro { padding: 64px 0 58px; }
  .intro-copy { max-width: 270px; font-size: 16px; }
  .offer { grid-template-columns: 1fr 30px; gap: 13px 16px; padding: 25px 0; }
  .offer-type { grid-column: 1; }
  .offer-content { grid-column: 1; }
  .offer-arrow { grid-column: 2; grid-row: 1 / 3; }
  footer { flex-wrap: wrap; margin-top: 20px; }
  .service-main { padding-top: 64px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }