.studio-home { position: relative; z-index: 1; overflow: hidden; }
.home-hero { position: relative; height: 100vh; height: 100svh; min-height: 680px; display: grid; place-items: center; isolation: isolate; overflow: hidden; padding: 112px 24px 96px; }
.home-hero::before { content: ''; position: absolute; z-index: -3; width: min(1080px, 90vw); aspect-ratio: 1; left: 50%; top: 47%; border-radius: 50%; background: radial-gradient(circle, rgba(255,0,67,.18) 0, rgba(255,0,67,.07) 31%, transparent 68%); filter: blur(20px); transform: translate(-50%,-50%); pointer-events: none; }
.home-hero::after { content: ''; position: absolute; z-index: -2; inset: 0; background: linear-gradient(90deg, rgba(5,5,7,.82), transparent 30%, transparent 70%, rgba(5,5,7,.82)), linear-gradient(180deg, rgba(5,5,7,.3), transparent 32%, rgba(5,5,7,.64)); pointer-events: none; }
.home-hero-aura { position: absolute; z-index: -1; left: 50%; top: 47%; width: clamp(220px, 24vw, 390px); aspect-ratio: 1; display: grid; place-items: center; opacity: .07; transform: translate(-50%,-50%); filter: drop-shadow(0 0 65px rgba(255,0,67,.35)); }
.home-hero-aura img { width: 100%; height: 100%; object-fit: contain; }
.home-hero-shell { position: relative; z-index: 2; width: min(1040px, 100%); margin: -1vh auto 0; display: flex; align-items: center; flex-direction: column; text-align: center; }
.home-kicker, .home-overline { color: var(--accent); font-size: 10px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.home-kicker { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 26px; }
.home-kicker i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px rgba(255,0,67,.65); }
.home-hero h1 { max-width: 1000px; font-size: clamp(3.65rem, 7.25vw, 7rem); line-height: .9; letter-spacing: -.072em; text-wrap: balance; }
.home-hero-shell > p { max-width: 690px; margin-top: 29px; color: var(--muted-strong); font-size: clamp(.98rem, 1.35vw, 1.1rem); line-height: 1.72; text-wrap: balance; }
.home-hero-actions { margin-top: 34px; display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.home-button { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0 22px; border: 1px solid var(--border); border-radius: 12px; color: var(--text); font-size: 13px; font-weight: 750; transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease; }
.home-button:hover { transform: translateY(-2px); }
.home-button.primary { border-color: rgba(255,0,67,.58); background: var(--accent); color: #fff; box-shadow: 0 14px 35px rgba(255,0,67,.15); }
.home-button.primary:hover { box-shadow: 0 18px 45px rgba(255,0,67,.21); }
.home-button.secondary { background: rgba(255,255,255,.022); }
.home-button.secondary:hover { border-color: var(--border-strong); background: rgba(255,255,255,.05); }
.home-hero-points { margin-top: 34px; display: flex; justify-content: center; gap: 26px; flex-wrap: wrap; color: #777782; font-size: 9px; font-weight: 650; }
.home-hero-points span { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.home-hero-points i { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px rgba(255,0,67,.45); }
.home-scroll-cue { position: absolute; z-index: 3; left: 50%; bottom: 27px; display: flex; align-items: center; flex-direction: column; gap: 8px; color: #6b6b75; cursor: pointer; transform: translateX(-50%); }
.home-scroll-cue span { position: relative; width: 19px; height: 30px; border: 1px solid rgba(255,255,255,.27); border-radius: 12px; }
.home-scroll-cue span::after { content: ''; position: absolute; left: 50%; top: 7px; width: 2px; height: 5px; border-radius: 2px; background: var(--accent); transform: translateX(-50%); animation: scrollDot 1.8s ease-in-out infinite; }
.home-scroll-cue small { font-size: 6px; font-weight: 800; letter-spacing: .22em; }
.home-skyline { position: absolute; z-index: -1; inset: auto 0 0; height: 54px; display: flex; align-items: end; gap: clamp(10px, 2.4vw, 48px); opacity: .15; filter: drop-shadow(0 -10px 25px rgba(255,0,67,.12)); }
.home-skyline i { flex: 1; min-width: 22px; height: 20px; background: var(--accent); }
.home-skyline i:nth-child(2n) { height: 33px; }
.home-skyline i:nth-child(3n) { height: 16px; }
.home-skyline i:nth-child(5n) { height: 46px; }
.home-skyline i:nth-child(7n) { height: 27px; }
@keyframes scrollDot { 0%,100% { transform: translate(-50%,0); opacity: .35; } 50% { transform: translate(-50%,9px); opacity: 1; } }
.mission-section, .services-section, .reasons-section, .reviews-section, .faq-section, .home-cta { width: min(var(--container), calc(100% - 48px)); margin: 0 auto; }
.mission-section { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(60px, 10vw, 140px); padding: 165px 0 145px; border-top: 1px solid var(--border); scroll-margin-top: 110px; }
.home-section-number { position: absolute; right: 0; top: 34px; color: rgba(255,0,67,.17); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; }
.mission-intro h2, .home-section-head h2, .reviews-copy h2, .faq-intro h2, .home-cta h2 { margin-top: 16px; font-size: clamp(2.3rem, 4.8vw, 4.25rem); line-height: 1.03; letter-spacing: -.055em; }
.mission-copy { align-self: end; display: grid; gap: 19px; }
.mission-copy p, .home-section-head > p, .reviews-copy > p, .faq-intro > p, .home-cta > p { color: var(--muted); font-size: 13px; line-height: 1.8; }
.services-section { padding: 40px 0 155px; }
.home-section-head { display: grid; grid-template-columns: 1.1fr .9fr; align-items: end; gap: 80px; margin-bottom: 52px; }
.services-list { display: grid; gap: 18px; }
.service-row { position: relative; min-height: 270px; display: grid; grid-template-columns: 46px minmax(230px,.85fr) minmax(300px,1.05fr) auto; align-items: center; gap: 32px; overflow: hidden; padding: 44px 46px; border: 1px solid var(--border); border-radius: 22px; background: linear-gradient(110deg, rgba(18,18,23,.92), rgba(8,8,11,.78)); box-shadow: 0 24px 70px rgba(0,0,0,.18); transition: border-color .25s ease, transform .25s ease, background .25s ease; }
.service-row::after { content: ''; position: absolute; width: 320px; height: 320px; right: -130px; border-radius: 50%; background: radial-gradient(circle, rgba(255,0,67,.09), transparent 70%); pointer-events: none; }
.service-row:hover { border-color: rgba(255,0,67,.25); background: linear-gradient(110deg, rgba(24,18,22,.96), rgba(8,8,11,.82)); transform: translateY(-2px); }
.service-index { color: rgba(255,0,67,.4); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; }
.service-title { display: flex; align-items: center; gap: 16px; }
.service-icon { width: 44px; height: 44px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid rgba(255,0,67,.16); border-radius: 12px; background: rgba(255,0,67,.045); color: var(--accent); }
.service-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.service-title small { color: var(--accent); font-size: 7px; font-weight: 800; letter-spacing: .15em; }
.service-title h3 { margin-top: 7px; font-size: clamp(1.15rem,2vw,1.55rem); letter-spacing: -.035em; }
.service-row > p { color: var(--muted); font-size: 12px; line-height: 1.8; }
.service-row > a, .reviews-copy > a { display: inline-flex; align-items: center; gap: 8px; color: #ff789d; font-size: 10px; font-weight: 750; white-space: nowrap; }
.reasons-section { padding: 150px 0; }
.reasons-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.reasons-list article { min-height: 230px; padding: 30px; border: 1px solid var(--border); border-radius: 18px; background: rgba(13,13,17,.7); transition: transform .22s ease, border-color .22s ease, background .22s ease; }
.reasons-list article:hover { border-color: rgba(255,0,67,.25); background: rgba(24,18,22,.82); transform: translateY(-3px); }
.reasons-list article > span { color: rgba(255,0,67,.35); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 8px; }
.reasons-list h3 { margin-top: 39px; font-size: 16px; }
.reasons-list p { margin-top: 14px; color: var(--muted); font-size: 11px; line-height: 1.75; }
.reviews-section { min-height: 560px; display: grid; grid-template-columns: .88fr 1.12fr; align-items: center; gap: clamp(60px, 10vw, 135px); padding: 95px clamp(25px, 5vw, 65px); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.reviews-copy > p { margin-top: 22px; }
.reviews-copy > a { margin-top: 25px; }
.reviews-empty { position: relative; min-height: 320px; display: flex; justify-content: center; flex-direction: column; padding: 44px; border: 1px solid var(--border); border-radius: 20px; background: linear-gradient(135deg, rgba(255,255,255,.028), rgba(255,255,255,.008)); }
.quote-mark { position: absolute; right: 27px; top: 10px; color: rgba(255,0,67,.12); font-family: Georgia, serif; font-size: 7rem; line-height: 1; }
.reviews-empty > strong { font-size: 1.5rem; letter-spacing: -.035em; }
.reviews-empty > p { max-width: 510px; margin-top: 14px; color: var(--muted); font-size: 11px; line-height: 1.7; }
.reviews-empty > div { margin-top: 29px; display: flex; align-items: center; gap: 5px; }
.reviews-empty i { width: 13px; height: 13px; background: var(--accent); clip-path: polygon(50% 0,61% 35%,98% 35%,68% 56%,79% 94%,50% 72%,21% 94%,32% 56%,2% 35%,39% 35%); opacity: .28; }
.reviews-empty small { margin-left: 9px; color: #6c6c76; font-size: 7px; font-weight: 800; letter-spacing: .13em; }
.faq-section { display: block; padding: 155px 0; }
.faq-intro { max-width: 820px; margin: 0 auto 58px; text-align: center; }
.faq-intro > p { max-width: 570px; margin: 22px auto 0; }
.faq-intro .home-button { margin-top: 27px; }
.faq-list { width: min(850px, 100%); margin: 0 auto; display: grid; gap: 12px; }
.faq-list details { overflow: hidden; border: 1px solid var(--border); border-radius: 14px; background: rgba(16,16,21,.72); transition: border-color .2s ease, background .2s ease; }
.faq-list details[open] { border-color: rgba(255,0,67,.27); background: rgba(24,18,22,.82); }
.faq-list summary { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 25px; padding: 0 22px; list-style: none; color: var(--muted-strong); font-size: 13px; font-weight: 650; cursor: pointer; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary span { position: relative; width: 26px; height: 26px; flex: 0 0 auto; border: 1px solid var(--border); border-radius: 50%; }
.faq-list summary span::before, .faq-list summary span::after { content: ''; position: absolute; left: 50%; top: 50%; width: 9px; height: 1px; background: var(--accent); transform: translate(-50%,-50%); transition: transform .2s ease; }
.faq-list summary span::after { transform: translate(-50%,-50%) rotate(90deg); }
.faq-list details[open] summary { color: var(--text); }
.faq-list details[open] summary span::after { transform: translate(-50%,-50%) rotate(0); }
.faq-list details > p { max-width: 760px; padding: 0 58px 25px 22px; color: var(--muted); font-size: 11px; line-height: 1.75; }
.home-cta { margin-bottom: 140px; padding: 95px 30px; border: 1px solid rgba(255,0,67,.17); border-radius: 27px; background: radial-gradient(circle at 50% 120%, rgba(255,0,67,.12), transparent 47%), rgba(10,10,13,.72); text-align: center; }
.home-cta > span { color: var(--accent); font-size: 9px; font-weight: 800; letter-spacing: .18em; }
.home-cta h2 { max-width: 840px; margin-inline: auto; }
.home-cta > p { max-width: 590px; margin: 22px auto 0; }
.home-cta > div { margin-top: 30px; display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.coming-page { position: relative; z-index: 1; min-height: 78vh; display: grid; place-items: center; padding: 150px 24px 80px; text-align: center; }
.coming-page > div { max-width: 700px; }
.coming-page h1 { margin-top: 17px; font-size: clamp(2.8rem, 7vw, 5.6rem); line-height: .98; letter-spacing: -.06em; }
.coming-page p { max-width: 560px; margin: 24px auto 0; color: var(--muted); line-height: 1.75; }
.coming-page .home-button { margin-top: 30px; }
@media (max-width: 1020px) {
  .service-row { grid-template-columns: 40px minmax(210px,.8fr) 1fr; padding-inline: 34px; }
  .service-row > a { grid-column: 2 / -1; justify-self: end; }
  .reasons-list { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
  .home-hero { height: 100vh; height: 100svh; min-height: 680px; padding: 118px 14px 100px; }
  .home-hero-shell { width: min(680px,100%); }
  .home-hero-points { gap: 13px 22px; }
  .mission-section, .home-section-head, .reviews-section { grid-template-columns: 1fr; }
  .mission-section { gap: 35px; padding: 105px 0; }
  .home-section-head { gap: 25px; }
  .service-row { grid-template-columns: 34px 1fr; gap: 20px; padding: 38px 32px; }
  .service-row > p, .service-row > a { grid-column: 2; justify-self: start; }
  .reviews-section { gap: 50px; padding-block: 95px; }
  .faq-section { padding: 110px 0; }
}
@media (max-width: 560px) {
  .home-hero { min-height: 700px; padding-inline: 18px; }
  .home-hero h1 { font-size: clamp(3rem,14vw,4.15rem); line-height: .92; }
  .home-hero-shell > p { margin-top: 24px; font-size: .94rem; }
  .home-hero-actions { align-items: stretch; flex-direction: column; }
  .home-button { width: 100%; }
  .home-hero-points { margin-top: 25px; gap: 9px 15px; font-size: 8px; }
  .home-scroll-cue small { display: none; }
  .home-skyline { height: 38px; }
  .mission-section, .services-section, .reasons-section, .reviews-section, .faq-section, .home-cta { width: calc(100% - 28px); }
  .services-section { padding-bottom: 105px; }
  .service-row { grid-template-columns: 1fr; padding: 30px 24px; }
  .service-index { display: none; }
  .service-row > p, .service-row > a { grid-column: 1; }
  .service-row:hover { transform: none; }
  .reasons-section { padding: 105px 0; }
  .reasons-list { grid-template-columns: 1fr; }
  .reasons-list article { min-height: 210px; }
  .reviews-section { padding-inline: 0; }
  .reviews-empty { padding: 32px 22px; }
  .reviews-empty > div { flex-wrap: wrap; }
  .reviews-empty small { width: 100%; margin: 8px 0 0; }
  .faq-list summary { min-height: 76px; font-size: 12px; }
  .faq-list details > p { padding-right: 10px; }
  .home-cta { margin-bottom: 100px; padding: 70px 20px; }
}

.home-hero h1 .title-accent,
.mission-intro h2 .title-accent,
.home-section-head h2 .title-accent,
.reviews-copy h2 .title-accent,
.faq-intro h2 .title-accent,
.home-cta h2 .title-accent { color: var(--accent); text-shadow: 0 0 38px rgba(255,0,67,.16); }