/* Final visual cleanup
   Goal: unified modern block style, calmer typography, less AI-looking borders,
   and an inverted price block.
*/

:root {
  --bg: #07080c;
  --bg-deep: #050609;
  --bg-soft: #0d0f15;
  --surface: rgba(255, 247, 236, 0.045);
  --surface-strong: rgba(255, 247, 236, 0.07);
  --surface-hover: rgba(255, 247, 236, 0.09);

  --text: #f7f1e8;
  --text-soft: rgba(247, 241, 232, 0.74);
  --text-muted: rgba(247, 241, 232, 0.56);

  --accent: #d9a85f;
  --accent-soft: rgba(217, 168, 95, 0.16);
  --line-soft: rgba(255, 247, 236, 0.075);

  --radius: 24px;
  --radius-lg: 34px;
  --shadow-soft: 0 22px 70px rgba(0, 0, 0, 0.24);
}

/* Unified typography */

html,
body,
button,
input,
textarea,
select {
  font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Arial,
    sans-serif !important;
}

body {
  background:
    radial-gradient(circle at 18% 8%, rgba(217, 168, 95, 0.07), transparent 30%),
    radial-gradient(circle at 86% 0%, rgba(255, 247, 236, 0.035), transparent 26%),
    var(--bg) !important;
}

/* Remove overly decorative AI-like texture */

.noise {
  opacity: 0.025 !important;
}

/* Header */

.site-header {
  border: 1px solid rgba(255, 247, 236, 0.085) !important;
  background: rgba(7, 8, 12, 0.42) !important;
  box-shadow: none !important;
}

.site-header.is-scrolled {
  background: rgba(7, 8, 12, 0.78) !important;
  border-color: rgba(255, 247, 236, 0.08) !important;
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.22) !important;
}

.brand-mark {
  background: #f7f1e8 !important;
  color: #07080c !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
}

.brand-text,
.nav,
.header-cta,
.mobile-menu a {
  letter-spacing: 0 !important;
}

.header-cta {
  background: #f7f1e8 !important;
  color: #07080c !important;
  font-weight: 700 !important;
}

/* Hero typography */

.hero-center h1,
.hero-title {
  font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Arial,
    sans-serif !important;
  font-weight: 650 !important;
  letter-spacing: -0.035em !important;
  line-height: 0.98 !important;
  text-transform: none !important;
}

.hero-center h1 {
  font-size: clamp(44px, 5.4vw, 88px) !important;
}

.hero-role,
.eyebrow,
.section-kicker {
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
}

/* Section rhythm */

.section {
  padding: 108px 0 !important;
}

.section-head {
  margin-bottom: 38px !important;
}

.section-title {
  font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Arial,
    sans-serif !important;
  max-width: 900px !important;
  font-size: clamp(32px, 4.1vw, 58px) !important;
  line-height: 1.06 !important;
  letter-spacing: -0.038em !important;
  font-weight: 650 !important;
}

.section-text {
  color: var(--text-soft) !important;
  font-size: clamp(17px, 1.25vw, 19px) !important;
  line-height: 1.72 !important;
}

/* Common cards: calmer, less outlined */

.service-card,
.review-card,
.price-box,
.contact-panel,
.work-card,
.clients,
.video-modal-dialog {
  border: 1px solid var(--line-soft) !important;
  background: var(--surface) !important;
  box-shadow: var(--shadow-soft) !important;
}

.service-card,
.review-card,
.work-card,
.contact-panel,
.clients {
  backdrop-filter: none !important;
}

.service-card:hover,
.contact-link:hover {
  background: var(--surface-hover) !important;
  border-color: rgba(255, 247, 236, 0.11) !important;
}

/* Remove decorative neural glow circles */

.service-card::after {
  display: none !important;
}

.work-preview::after {
  border-color: rgba(255, 247, 236, 0.055) !important;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.34)) !important;
}

/* Chips and small pills */

.client-list span,
.work-category {
  border: 0 !important;
  background: rgba(255, 247, 236, 0.075) !important;
  color: rgba(247, 241, 232, 0.82) !important;
  font-weight: 600 !important;
}

.service-number {
  color: rgba(247, 241, 232, 0.42) !important;
  font-weight: 600 !important;
}

/* Card titles */

.service-card h3,
.work-info h3,
.review-card strong,
.contact-link strong,
.video-modal-dialog h3 {
  font-weight: 650 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.12 !important;
}

.service-card p,
.work-info p,
.review-card p,
.price-box p:not(.section-kicker) {
  color: var(--text-muted) !important;
}

/* Portfolio preview: quieter placeholder */

.work-preview {
  background:
    linear-gradient(145deg, rgba(255, 247, 236, 0.075), rgba(255, 247, 236, 0.018)),
    #0b0d13 !important;
}

.play-button {
  background: rgba(247, 241, 232, 0.92) !important;
  box-shadow: 0 14px 42px rgba(0, 0, 0, 0.24) !important;
}

/* Price block: inverted palette */

.price-strip {
  padding-top: 34px !important;
  padding-bottom: 34px !important;
}

.price-box {
  position: relative !important;
  overflow: hidden !important;
  border: 0 !important;
  background:
    radial-gradient(circle at 84% 14%, rgba(7, 8, 12, 0.12), transparent 30%),
    linear-gradient(135deg, #f7f1e8 0%, #e7d6bc 100%) !important;
  color: #07080c !important;
  box-shadow: 0 24px 80px rgba(217, 168, 95, 0.13) !important;
}

.price-box::before {
  content: "" !important;
  position: absolute !important;
  inset: 1px !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  border: 1px solid rgba(7, 8, 12, 0.055) !important;
}

.price-box .section-kicker {
  color: rgba(7, 8, 12, 0.56) !important;
}

.price-box h2 {
  color: #07080c !important;
  font-size: clamp(34px, 4.4vw, 56px) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.04em !important;
  font-weight: 680 !important;
}

.price-box p:not(.section-kicker) {
  color: rgba(7, 8, 12, 0.68) !important;
}

.price-box .btn-primary {
  background: #07080c !important;
  color: #f7f1e8 !important;
  box-shadow: none !important;
}

.price-box .btn-primary:hover {
  background: #161922 !important;
}

/* Reviews */

.stars {
  color: rgba(217, 168, 95, 0.86) !important;
}

/* Contacts */

.contact-panel {
  padding: 14px !important;
}

.contact-link {
  border-radius: 20px !important;
}

.contact-main {
  background: rgba(255, 247, 236, 0.065) !important;
}

.contact-link span {
  color: rgba(247, 241, 232, 0.42) !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
}

.contact-link strong {
  color: rgba(247, 241, 232, 0.9) !important;
}

/* Buttons */

.btn {
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}

.btn-primary {
  background: #f7f1e8 !important;
  color: #07080c !important;
}

.btn-secondary {
  border-color: rgba(255, 247, 236, 0.09) !important;
  background: rgba(255, 247, 236, 0.045) !important;
}

/* Footer */

.footer-inner {
  border-top-color: rgba(255, 247, 236, 0.075) !important;
}

/* Mobile */

@media (max-width: 1040px) {
  .section-title {
    font-size: clamp(32px, 6vw, 52px) !important;
  }
}

@media (max-width: 720px) {
  .section {
    padding: 78px 0 !important;
  }

  .hero-center h1 {
    font-size: clamp(36px, 11vw, 60px) !important;
    letter-spacing: -0.032em !important;
    line-height: 1.02 !important;
  }

  .hero-role {
    font-size: 17px !important;
  }

  .section-title {
    font-size: clamp(30px, 9vw, 46px) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.034em !important;
  }

  .section-text {
    font-size: 16px !important;
    line-height: 1.68 !important;
  }

  .price-box {
    padding: 28px !important;
  }

  .price-box h2 {
    font-size: clamp(30px, 9vw, 44px) !important;
  }
}