:root {
  --brand-purple: #5720a3;
  --brand-purple-dark: #351170;
  --brand-pink: #f20a8b;
  --brand-pink-dark: #c80070;
  --brand-ink: #29105f;
  --brand-soft: #fbf8ff;
  --bs-body-color: #261c33;
  --bs-body-font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html { scroll-behavior: smooth; scroll-padding-top: 86px; }
body { overflow-x: hidden; background: #fff; }

.navbar { --bs-navbar-padding-y: .45rem; }
.navbar-brand img { display: block; width: 180px; height: auto; object-fit: contain; }
.nav-link { color: #4f435d; font-weight: 600; }
.nav-link:hover, .nav-link:focus { color: var(--brand-purple); }

.btn { border-radius: 999px; font-weight: 700; }
.btn-brand {
  color: #fff;
  border: 0;
  background: linear-gradient(110deg, var(--brand-purple), var(--brand-pink));
  box-shadow: 0 10px 28px rgba(112, 23, 158, .18);
}
.btn-brand:hover, .btn-brand:focus { color: #fff; transform: translateY(-1px); filter: brightness(.97); }
.btn-outline-brand { color: var(--brand-purple); border: 2px solid rgba(87, 32, 163, .22); background: #fff; }
.btn-outline-brand:hover, .btn-outline-brand:focus { color: #fff; border-color: var(--brand-purple); background: var(--brand-purple); }

.hero { background: radial-gradient(circle at 75% 25%, rgba(242, 10, 139, .055), transparent 26%), #fff; }
.min-vh-hero { min-height: 700px; }
.hero-copy { z-index: 2; }
.hero-copy h1 { color: var(--brand-ink); letter-spacing: -.055em; }
.hero-copy h1 span { color: var(--brand-pink); }
.hero-copy .lead { max-width: 610px; color: #5a5065; }
.hero-contact a { color: var(--brand-purple-dark); text-decoration: none; font-weight: 700; }
.hero-contact a:hover { color: var(--brand-pink); }
.hero-visual { position: relative; z-index: 1; }
.hero-visual img { display: block; width: min(980px, 125%); max-width: none; margin-left: -6%; margin-bottom: -2px; }
.hero-orb { position: absolute; border-radius: 50%; border: 1px solid rgba(150, 57, 199, .24); box-shadow: inset 12px 12px 25px rgba(255,255,255,.8), 0 10px 35px rgba(117,34,165,.09); }
.hero-orb::after { content:""; position:absolute; width:22%; aspect-ratio:1; background:#fff; border-radius:50%; top:16%; left:22%; opacity:.85; }
.hero-orb-1 { width: 80px; aspect-ratio: 1; left: 4%; bottom: 9%; background: rgba(246, 195, 238, .28); }
.hero-orb-2 { width: 44px; aspect-ratio: 1; right: 5%; top: 20%; background: rgba(219, 190, 246, .25); }

.eyebrow { display: inline-flex; align-items: center; gap: .45rem; color: var(--brand-pink); font-size: .82rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.section-pad { padding: 6rem 0; }
.bg-soft { background: var(--brand-soft); }
.section-heading { max-width: 760px; }
.section-heading h2, #pro-koho h2 { color: var(--brand-ink); letter-spacing: -.035em; }

.service-card {
  padding: 1.75rem;
  background: #fff;
  border: 1px solid rgba(87, 32, 163, .09);
  border-radius: 24px;
  box-shadow: 0 14px 38px rgba(53, 17, 112, .055);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.service-card:hover { transform: translateY(-5px); box-shadow: 0 22px 48px rgba(53, 17, 112, .10); border-color: rgba(242, 10, 139, .20); }
.service-card h3 { margin: 1rem 0 .5rem; color: var(--brand-ink); font-size: 1.2rem; font-weight: 800; }
.service-card p { margin: 0; color: #6b6274; }
.service-icon { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 16px; color: #fff; font-size: 1.35rem; background: linear-gradient(135deg, var(--brand-pink), var(--brand-purple)); box-shadow: 0 10px 22px rgba(181, 17, 138, .17); }

.benefit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.benefit { display: flex; align-items: center; gap: 1rem; padding: 1.15rem 1.2rem; border-radius: 20px; background: #fff; border: 1px solid rgba(87,32,163,.10); box-shadow: 0 8px 28px rgba(53,17,112,.045); }
.benefit > i { flex: 0 0 48px; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; color: var(--brand-pink); background: #fff1f8; font-size: 1.2rem; }
.benefit strong, .benefit small { display: block; }
.benefit strong { color: var(--brand-ink); }
.benefit small { color: #746a7d; margin-top: .12rem; }

.contact-section { color: #fff; background: linear-gradient(118deg, #421287 0%, #7222af 48%, #ed087f 100%); }
.contact-section::before { content:""; position:absolute; inset:auto -6% -70% auto; width:430px; height:430px; border:38px solid rgba(255,255,255,.09); border-radius:50%; }
.contact-section::after { content:""; position:absolute; inset:-65% auto auto -8%; width:480px; height:480px; border:46px solid rgba(255,255,255,.055); border-radius:50%; }
.contact-card { max-width: 840px; }
.eyebrow-light { color: #fff; opacity: .85; }
.btn-contact-outline { color:#fff; border:2px solid rgba(255,255,255,.55); background:transparent; }
.btn-contact-outline:hover, .btn-contact-outline:focus { color:var(--brand-purple-dark); background:#fff; border-color:#fff; }
.contact-sparkle { position:absolute; color:#fff; opacity:.65; font-size:2rem; }
.contact-sparkle.s1 { left:8%; top:18%; }
.contact-sparkle.s2 { right:9%; bottom:18%; font-size:1.3rem; }

.gap-x-4 { column-gap: 1.5rem; }
.gap-y-2 { row-gap: .5rem; }

@media (min-width: 992px) {
  .py-lg-6 { padding-top: 6rem !important; padding-bottom: 6rem !important; }
}

@media (max-width: 991.98px) {
  .navbar-collapse { padding: .75rem 0 1rem; }
  .navbar-nav .btn { margin-top: .4rem; }
  .min-vh-hero { min-height: auto; }
  .hero { padding-top: 1rem; }
  .hero-copy { text-align: center; }
  .hero-copy .lead { margin-left: auto; margin-right: auto; }
  .hero-copy .d-flex, .hero-contact { justify-content: center; }
  .hero-visual img { width: 112%; margin-left: -6%; margin-top: -2rem; }
}

@media (max-width: 767.98px) {
  .section-pad { padding: 4.5rem 0; }
  .navbar-brand img { width: 155px; }
  .hero-copy h1 { font-size: clamp(3.1rem, 16vw, 4.6rem); }
  .benefit-grid { grid-template-columns: 1fr; }
}

@media (max-width: 575.98px) {
  .hero-copy { padding-top: 2.5rem !important; }
  .hero-visual img { width: 128%; margin-left: -14%; margin-top: -1rem; }
  .service-card { padding: 1.5rem; border-radius: 20px; }
  .contact-card .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}