:root {
  color-scheme: dark;
  --bg: #070b14;
  --bg-raised: #0b1120;
  --panel: #0e1525;
  --line: rgba(169, 187, 224, .12);
  --text: #f4f6fc;
  --muted: #99a4b9;
  --blue: #4288ff;
  --violet: #9872ff;
  --cyan: #48c5e8;
  --font-display: "Space Grotesk", sans-serif;
  --font-body: "DM Sans", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 15px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
body::before { position: fixed; z-index: -1; inset: 0; background: radial-gradient(ellipse at 72% 8%, rgba(46, 79, 160, .12), transparent 35%), radial-gradient(ellipse at 4% 55%, rgba(55, 34, 121, .08), transparent 32%); content: ""; pointer-events: none; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.site-shell { overflow: hidden; }
.section-wrap, .site-header { width: min(1160px, calc(100% - 64px)); margin-inline: auto; }

.site-header { position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; min-height: 82px; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 11px; min-width: 220px; }
.brand-mark { display: grid; width: 39px; height: 39px; place-items: center; border: 1px solid rgba(89, 145, 255, .36); border-radius: 11px; background: linear-gradient(140deg, rgba(56, 120, 255, .17), rgba(139, 81, 246, .12)); color: #dce8ff; font-family: var(--font-display); font-size: 15px; font-weight: 700; letter-spacing: -1px; }
.brand-mark span { color: var(--blue); }
.brand-name { font-family: var(--font-display); font-size: 13px; font-weight: 600; line-height: 1.3; }
.brand-name small { display: block; margin-top: 4px; color: var(--muted); font-family: var(--font-body); font-size: 10px; font-weight: 400; }
.main-nav { display: flex; align-items: center; gap: 30px; }
.nav-link { position: relative; padding: 32px 0 28px; color: #b5bfd0; font-size: 12px; transition: color .2s; }
.nav-link:hover, .nav-link.active { color: #fff; }
.nav-link.active::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: var(--blue); content: ""; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 13px; min-height: 48px; padding: 0 20px; border: 1px solid rgba(112, 158, 255, .52); border-radius: 7px; background: linear-gradient(105deg, #2868e9, #3b61db 68%, #6451d9); box-shadow: 0 8px 25px rgba(40, 93, 224, .16); color: #fff; font-size: 12px; font-weight: 600; transition: transform .2s, box-shadow .2s; }
.button:hover { transform: translateY(-2px); box-shadow: 0 11px 30px rgba(40, 93, 224, .3); }
.button-small { min-height: 39px; padding-inline: 13px; font-size: 11px; }
.menu-toggle { display: none; }

.hero { position: relative; display: grid; grid-template-columns: .92fr 1.08fr; min-height: 570px; align-items: center; }
.hero-copy { position: relative; z-index: 2; padding: 56px 0 84px; }
.eyebrow { margin: 0 0 18px; color: #7895d9; font-size: 10px; font-weight: 700; letter-spacing: 1.5px; }
.status-dot { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: #52d7a3; box-shadow: 0 0 12px rgba(82, 215, 163, .5); vertical-align: 1px; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--font-display); }
h1 { margin-bottom: 18px; font-size: clamp(45px, 6vw, 70px); font-weight: 600; letter-spacing: -3.7px; line-height: 1.07; }
h1 span, .section-heading h2 span, .contact h2 span { background: linear-gradient(100deg, #4c91ff 4%, #9b67ff 88%); background-clip: text; -webkit-text-fill-color: transparent; }
.hero-intro { max-width: 455px; margin-bottom: 26px; color: #aab5c8; font-size: 14px; line-height: 1.8; }
.hero-actions { display: flex; align-items: center; gap: 24px; }
.text-link { display: inline-flex; align-items: center; gap: 9px; color: #d5dceb; font-size: 12px; font-weight: 600; transition: color .2s; }
.text-link:hover { color: #83acff; }
.hero-trust { display: flex; align-items: center; gap: 12px; margin-top: 46px; color: #8d9ab1; font-size: 11px; line-height: 1.65; }
.hero-trust strong { color: #d2d9e7; font-weight: 500; }
.trust-icon { display: grid; width: 35px; height: 35px; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: #75a0ff; font-size: 18px; }
.hero-visual { position: relative; display: flex; min-height: 510px; align-items: flex-end; justify-content: center; }
.portrait-glow { position: absolute; top: 25%; left: 50%; width: 410px; height: 340px; transform: translate(-50%, -5%); border-radius: 50%; background: radial-gradient(ellipse, rgba(52, 95, 215, .23), rgba(87, 52, 172, .09) 48%, transparent 72%); filter: blur(13px); }
.portrait-orbit { position: absolute; top: 14%; left: 50%; width: 370px; height: 370px; transform: translateX(-50%); border: 1px solid rgba(79, 133, 255, .27); border-radius: 50%; box-shadow: 0 0 45px rgba(65, 108, 239, .08), inset 0 0 25px rgba(79, 133, 255, .04); }
.orbit-two { top: 19%; width: 304px; height: 304px; border-color: rgba(155, 100, 255, .18); }
.portrait-frame { position: relative; z-index: 1; display: flex; width: min(100%, 490px); height: 495px; align-items: flex-end; justify-content: center; overflow: hidden; }
.portrait-frame::after { position: absolute; z-index: 2; right: 0; bottom: 0; left: 0; height: 22%; background: linear-gradient(transparent, var(--bg)); content: ""; pointer-events: none; }
.portrait-frame img { position: absolute; z-index: 1; top: 0; left: 50%; display: block; width: 116%; height: 116%; max-width: none; transform: translateX(-50%); object-fit: contain; object-position: center top; }
.hero-note { position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 11px 14px; border: 1px solid rgba(177, 193, 226, .14); border-radius: 9px; background: rgba(13, 20, 35, .82); box-shadow: 0 12px 35px rgba(0, 0, 0, .22); color: #dce3f0; font-size: 10px; font-weight: 600; backdrop-filter: blur(14px); }
.hero-note small { display: block; margin-top: 3px; color: #8996ad; font-size: 9px; font-weight: 400; }
.note-icon { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 7px; background: rgba(66, 136, 255, .15); color: #78a7ff; font-size: 16px; }
.note-top { top: 25%; right: 0; }
.note-bottom { bottom: 22%; left: 0; }
.note-code { color: #b493ff; background: rgba(152, 114, 255, .15); font-size: 11px; }
.visual-caption { position: absolute; right: 7%; bottom: 10px; color: #61708b; font-size: 8px; letter-spacing: 1.7px; }
.hero-scroll { position: absolute; bottom: 0; left: 0; display: flex; align-items: center; gap: 10px; color: #66748b; font-size: 8px; letter-spacing: 1.4px; }
.hero-scroll span { width: 25px; height: 1px; background: #556b94; }

.section-block { padding-top: 100px; }
.section-heading { margin-bottom: 37px; }
.section-heading h2, .contact h2 { margin: 0; font-size: clamp(32px, 4.2vw, 46px); font-weight: 500; letter-spacing: -1.7px; line-height: 1.15; }
.section-heading .eyebrow { margin-bottom: 13px; }
.heading-row { display: flex; align-items: end; justify-content: space-between; gap: 28px; }
.section-aside { max-width: 295px; margin: 0 0 4px; color: var(--muted); font-size: 12px; line-height: 1.7; }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; padding: 33px 0 3px; border-top: 1px solid var(--line); }
.about-copy h3 { max-width: 420px; margin-bottom: 15px; font-size: 21px; font-weight: 500; letter-spacing: -.5px; line-height: 1.35; }
.about-copy p { max-width: 485px; margin-bottom: 14px; color: var(--muted); font-size: 12px; line-height: 1.9; }
.about-copy .text-link { margin-top: 9px; }
.about-details { display: flex; flex-direction: column; gap: 18px; padding-top: 3px; }
.detail-card { display: flex; align-items: center; gap: 14px; }
.detail-icon { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; border: 1px solid var(--line); border-radius: 10px; background: rgba(19, 30, 52, .65); color: #87a8f9; font-family: var(--font-display); font-size: 17px; }
.detail-card strong, .detail-card span:not(.detail-icon) { display: block; }
.detail-card strong { margin-bottom: 3px; font-size: 11px; font-weight: 600; }
.detail-card div span { color: var(--muted); font-size: 10px; }
.about-location { margin-top: 5px; padding-top: 17px; border-top: 1px solid var(--line); color: #a3aec1; font-size: 10px; }
.location-divider { margin-inline: 7px; color: #4d5b73; }

.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.service-card { position: relative; display: flex; min-height: 480px; flex-direction: column; padding: 23px 23px 19px; border: 1px solid var(--line); border-radius: 10px; background: linear-gradient(155deg, rgba(17, 26, 44, .89), rgba(10, 15, 27, .91)); transition: border-color .2s, transform .2s; }
.service-card:hover { transform: translateY(-4px); border-color: rgba(96, 145, 245, .44); }
.service-card.featured { border-color: rgba(129, 102, 245, .38); background: radial-gradient(ellipse at 100% 0%, rgba(111, 72, 197, .12), transparent 52%), linear-gradient(155deg, rgba(19, 23, 43, .97), rgba(10, 15, 27, .96)); }
.popular-label { position: absolute; top: -11px; right: 15px; padding: 4px 9px; border-radius: 4px; background: #7756db; color: #fff; font-size: 8px; font-weight: 700; letter-spacing: .6px; }
.service-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.service-icon { display: grid; width: 41px; height: 41px; place-items: center; border: 1px solid currentColor; border-radius: 9px; background: rgba(55, 113, 238, .1); font-size: 19px; }
.icon-blue { color: #73a4ff; }.icon-violet { color: #b293ff; background: rgba(152, 114, 255, .12); }.icon-cyan { color: #5ecde9; background: rgba(72, 197, 232, .1); }
.service-number { color: #65738b; font-family: var(--font-display); font-size: 11px; }
.service-kicker { margin-bottom: 7px; color: #7d91b7; font-size: 8px; font-weight: 700; letter-spacing: 1.1px; }
.service-card h3 { margin-bottom: 11px; font-size: 21px; font-weight: 500; letter-spacing: -.5px; }
.service-description { min-height: 75px; margin-bottom: 15px; color: #a5b0c3; font-size: 10px; line-height: 1.8; }
.service-list { display: flex; flex-direction: column; gap: 9px; margin: 0; padding: 0; list-style: none; }
.service-list li { position: relative; padding-left: 16px; color: #c3ccda; font-size: 9px; }
.service-list li::before { position: absolute; top: 4px; left: 0; color: #63a0ff; content: "✓"; }
.service-price { display: flex; flex-direction: column; gap: 1px; margin-top: auto; padding-top: 21px; }
.service-price > span:first-child { color: #8996ac; font-size: 9px; }
.service-price strong { color: #f4f6fc; font-family: var(--font-display); font-size: 24px; font-weight: 600; letter-spacing: -.8px; }
.service-price strong small { font-size: 13px; font-weight: 500; }
.service-price > span:last-child { color: #8e9ab0; font-size: 9px; }
.service-link { display: flex; align-items: center; justify-content: space-between; margin-top: 17px; padding-top: 12px; border-top: 1px solid var(--line); color: #aec6f5; font-size: 10px; font-weight: 600; }
.service-link:hover { color: #fff; }
.pricing-note { display: flex; align-items: center; gap: 11px; margin-top: 17px; padding: 13px 16px; border: 1px solid rgba(93, 132, 215, .15); border-radius: 8px; background: rgba(20, 33, 58, .4); }
.pricing-note-icon { color: #88aaff; font-size: 17px; }
.pricing-note p { margin: 0; color: #9da9bd; font-size: 10px; line-height: 1.65; }
.pricing-note strong { color: #dce4f2; font-weight: 600; }
.extras { margin-top: 37px; }
.extras h3 { margin-bottom: 17px; font-size: 14px; font-weight: 500; }
.extra-items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 23px; }
.extra-item { display: flex; gap: 12px; align-items: flex-start; }
.extra-icon { display: grid; width: 30px; height: 30px; flex: 0 0 30px; place-items: center; border: 1px solid var(--line); border-radius: 8px; color: #83a6ed; font-size: 14px; }
.extra-item p { margin: 0; }
.extra-item strong, .extra-item p span { display: block; }
.extra-item strong { margin-bottom: 4px; color: #d8deea; font-size: 10px; font-weight: 600; }
.extra-item p span { color: #8996aa; font-size: 9px; line-height: 1.7; }

.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.process-step { position: relative; min-height: 204px; padding: 26px 22px 24px 0; }
.process-step:not(:last-child)::after { position: absolute; top: 31px; right: 20px; width: 1px; height: calc(100% - 62px); background: var(--line); content: ""; }
.step-index { position: absolute; top: 26px; right: 33px; color: #62718d; font-family: var(--font-display); font-size: 10px; }
.step-icon { display: grid; width: 35px; height: 35px; margin-bottom: 17px; place-items: center; border: 1px solid rgba(85, 133, 231, .24); border-radius: 9px; background: rgba(50, 93, 176, .1); color: #83a8ff; font-size: 16px; }
.process-step h3 { margin-bottom: 9px; font-size: 14px; font-weight: 500; }
.process-step p { max-width: 220px; margin: 0; color: #909cb1; font-size: 10px; line-height: 1.8; }
.process-promise { display: flex; align-items: center; gap: 12px; margin-top: 19px; padding: 14px 17px; border: 1px solid rgba(122, 97, 219, .18); border-radius: 8px; background: rgba(37, 27, 78, .18); }
.promise-star { color: #aa91ff; font-size: 18px; }
.process-promise p { margin: 0; color: #a9b3c6; font-size: 10px; }
.process-promise strong { color: #e0e3ed; }

.contact { padding-bottom: 91px; }
.contact-panel { display: grid; grid-template-columns: 1fr .91fr; gap: 75px; padding: 49px; border: 1px solid rgba(106, 139, 204, .17); border-radius: 13px; background: radial-gradient(ellipse at 0% 0%, rgba(53, 85, 160, .14), transparent 45%), linear-gradient(145deg, #0d1423, #0a0f1b); }
.contact-copy { padding-top: 9px; }
.contact-copy .eyebrow { margin-bottom: 16px; }
.contact h2 { margin-bottom: 17px; }
.contact-copy > p:not(.eyebrow) { max-width: 390px; margin-bottom: 26px; color: #a1adc0; font-size: 11px; line-height: 1.85; }
.contact-links { display: flex; flex-direction: column; gap: 9px; max-width: 390px; }
.contact-links a { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: rgba(7, 11, 20, .32); transition: border-color .2s; }
.contact-links a:hover { border-color: rgba(90, 142, 245, .4); }
.contact-link-icon { display: grid; width: 32px; height: 32px; flex: 0 0 32px; place-items: center; border-radius: 8px; background: rgba(60, 111, 226, .13); color: #82aaff; font-size: 14px; }
.contact-links a > span:nth-child(2) { color: #d5ddeb; font-size: 10px; }
.contact-links small { display: block; margin-bottom: 2px; color: #75839c; font-size: 8px; letter-spacing: .7px; }
.contact-arrow { margin-left: auto; color: #8598bb; font-size: 13px; }
.contact-form { padding: 23px; border: 1px solid rgba(163, 180, 218, .12); border-radius: 10px; background: rgba(6, 10, 18, .43); }
.contact-form h3 { margin-bottom: 5px; font-size: 16px; font-weight: 500; }
.contact-form > p:not(.form-feedback) { margin-bottom: 19px; color: #8693a8; font-size: 10px; }
.contact-form label { display: block; margin: 12px 0 6px; color: #b7c1d2; font-size: 9px; font-weight: 600; }
.contact-form input, .contact-form textarea { width: 100%; border: 1px solid rgba(160, 176, 211, .15); border-radius: 6px; outline: none; background: rgba(15, 22, 36, .8); color: var(--text); font-size: 10px; transition: border-color .2s; }
.contact-form input { height: 39px; padding: 0 11px; }
.contact-form textarea { min-height: 88px; padding: 10px 11px; resize: vertical; }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: #68768d; }
.contact-form input:focus, .contact-form textarea:focus { border-color: rgba(82, 138, 255, .7); }
.form-submit { width: 100%; min-height: 42px; margin-top: 14px; font-size: 10px; }
.form-feedback { min-height: 16px; margin: 9px 0 0; color: #80d9b0; font-size: 10px; }

.site-footer { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; gap: 16px; padding-top: 21px; padding-bottom: 20px; border-top: 1px solid var(--line); }
.site-footer > p { margin: 0; color: #7e8ba0; font-size: 10px; text-align: center; }
.back-top { justify-self: end; color: #aab6c9; font-size: 10px; }
.back-top span { margin-left: 5px; color: #80a5f3; }
.footer-bottom { display: flex; grid-column: 1 / -1; justify-content: space-between; margin-top: 3px; padding-top: 15px; border-top: 1px solid rgba(169, 187, 224, .08); color: #69768b; font-size: 9px; }
.footer-heart { color: #e87893; }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .65s ease, transform .65s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.service-card:nth-child(2) { transition-delay: .08s; }
.service-card:nth-child(3) { transition-delay: .16s; }

@media (max-width: 980px) {
  .site-header, .section-wrap { width: min(100% - 44px, 800px); }
  .main-nav { gap: 17px; }
  .brand { min-width: initial; }
  .header-cta { display: none; }
  .hero { grid-template-columns: 1fr 1fr; min-height: 540px; }
  .hero-visual { min-height: 460px; }
  .portrait-frame { height: 450px; }
  .note-top { right: -3px; }
  .note-bottom { left: -5px; }
  .about-grid { gap: 42px; }
  .service-card { min-height: 500px; padding-inline: 17px; }
  .contact-panel { gap: 35px; padding: 35px; }
}
@media (max-width: 700px) {
  html { scroll-padding-top: 72px; }
  .site-header, .section-wrap { width: calc(100% - 36px); }
  .site-header { min-height: 70px; }
  .brand-mark { width: 35px; height: 35px; }
  .brand-name { font-size: 12px; }
  .menu-toggle { display: flex; width: 38px; height: 38px; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--line); border-radius: 8px; background: transparent; }
  .menu-toggle span { width: 16px; height: 1px; background: #e2e9f5; transition: transform .2s; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .main-nav { position: absolute; top: calc(100% + 1px); right: -18px; left: -18px; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 8px 18px 15px; border-bottom: 1px solid var(--line); background: rgba(7, 11, 20, .97); backdrop-filter: blur(15px); }
  .main-nav.is-open { display: flex; }
  .nav-link { padding: 12px 5px; font-size: 13px; }
  .nav-link.active::after { right: auto; bottom: 5px; width: 27px; height: 1px; }
  .hero { grid-template-columns: 1fr; min-height: initial; padding-top: 34px; }
  .hero-copy { padding: 14px 0 5px; }
  h1 { font-size: clamp(47px, 12vw, 64px); letter-spacing: -2.8px; }
  .hero-intro { max-width: 500px; font-size: 13px; }
  .hero-trust { margin-top: 26px; }
  .hero-visual { min-height: 405px; margin-top: 0; }
  .portrait-frame { width: min(100%, 410px); height: 405px; }
  .portrait-orbit { top: 13%; width: 300px; height: 300px; }
  .orbit-two { top: 18%; width: 250px; height: 250px; }
  .portrait-glow { top: 21%; width: 340px; height: 290px; }
  .note-top { top: 24%; right: 0; }
  .note-bottom { bottom: 19%; left: -3px; }
  .visual-caption { right: 4%; bottom: 3px; }
  .hero-scroll { display: none; }
  .section-block { padding-top: 72px; }
  .section-heading { margin-bottom: 26px; }
  .section-heading h2, .contact h2 { font-size: 36px; }
  .heading-row { align-items: flex-start; flex-direction: column; gap: 12px; }
  .section-aside { max-width: 410px; }
  .about-grid { grid-template-columns: 1fr; gap: 27px; padding-top: 23px; }
  .service-grid { grid-template-columns: 1fr; gap: 17px; }
  .service-card { min-height: initial; padding: 22px; }
  .service-description { min-height: initial; }
  .service-price { margin-top: 21px; }
  .service-card.featured { margin-top: 3px; }
  .extra-items { grid-template-columns: 1fr; gap: 18px; }
  .process-grid { grid-template-columns: 1fr 1fr; }
  .process-step { min-height: 193px; padding-right: 12px; }
  .process-step:nth-child(2)::after { display: none; }
  .process-step:nth-child(1), .process-step:nth-child(2) { border-bottom: 1px solid var(--line); }
  .process-step:nth-child(2n) { padding-left: 16px; }
  .process-step:nth-child(2n)::before { position: absolute; top: 20px; bottom: 20px; left: 0; width: 1px; background: var(--line); content: ""; }
  .step-index { right: 13px; }
  .process-step:nth-child(2n) .step-index { right: 11px; }
  .process-step p { font-size: 9px; }
  .contact { padding-bottom: 66px; }
  .contact-panel { grid-template-columns: 1fr; gap: 26px; padding: 25px 18px; }
  .contact-form { padding: 18px; }
  .site-footer { grid-template-columns: 1fr auto; }
  .site-footer > p { display: none; }
  .footer-bottom { gap: 12px; font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}
