*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; margin: 0; letter-spacing: -.012em; color: var(--head); }

img { height: auto; }
h1, h2, h3 { line-height: 1.12; }
/* Prayura Group — prayura.com (vibrant) */
:root {
  --bg: #FFF8EC; --ink: #25314F; --head: #12224B; --navy: #12224B; --accent: #B8661F; --btn: #A8581A;
  --blue: #2147D6; --green: #0E7A62; --orange: #F2641A; --pink: #E0457B;
  --foot-bg: #FFFDF8;
}
body { background:
  radial-gradient(900px 520px at 100% -6%, rgba(33,71,214,.13), transparent 62%),
  radial-gradient(760px 520px at -4% 6%, rgba(242,100,26,.13), transparent 60%),
  radial-gradient(800px 600px at 60% 38%, rgba(14,122,98,.07), transparent 60%), var(--bg); }
.px-btn.primary { background: linear-gradient(135deg, #C9803A, #A8581A); box-shadow: 0 14px 26px -12px rgba(168,88,26,.8); }
.px-nav > a::after, .px-nav .dd > button::after { background: linear-gradient(90deg, var(--blue), var(--green), var(--orange)); }

/* hero */
.hx-hero { padding: 26px 0 36px; }
.hx-hero-in { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.3fr); gap: 30px; align-items: center; }
.hx-eb { display: flex; align-items: center; gap: 12px; color: var(--navy); }
.hx-eb span { width: 34px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--blue), var(--orange)); }
.hx-copy h1 { font-size: clamp(48px, 5.6vw, 82px); line-height: .98; font-weight: 500; letter-spacing: -.02em; }
.hx-copy h1 em { font-style: normal; background: linear-gradient(95deg, #2147D6 0%, #0E7A62 48%, #F2641A 100%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .08em; display: inline-block; }
.hx-lead { margin: 22px 0 26px; font-size: 17.5px; line-height: 1.65; max-width: 440px; color: #3A4666; }
.hx-actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.hx-link { font-weight: 600; color: var(--navy); border-bottom: 2px solid var(--orange); padding-bottom: 2px; }
.hx-chips { list-style: none; display: flex; gap: 10px; flex-wrap: wrap; margin: 28px 0 0; padding: 0; }
.hx-chips li { font-size: 13px; font-weight: 600; padding: 7px 14px 7px 12px; border-radius: 999px; background: #fff; color: var(--c); border: 1px solid color-mix(in srgb, var(--c) 28%, transparent); display: flex; align-items: center; gap: 8px; box-shadow: 0 8px 18px -12px var(--c); }
.hx-chips li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.hx-media { position: relative; margin-right: calc((min(var(--wrapw), 100vw - 48px) - 100vw) / 2); }
.hx-media img { width: 100%; height: auto; border-radius: 28px 0 0 28px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%); mask-image: linear-gradient(90deg, transparent 0, #000 9%); }
.hx-media::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 42%; border-radius: 0 0 0 28px; background: linear-gradient(180deg, transparent, rgba(8,16,44,.62)); pointer-events: none; }
.hx-tag { position: absolute; bottom: 6%; z-index: 2; transform: translateX(-50%); text-align: center; color: #fff; transition: transform .25s; }
.hx-tag b { display: block; font-family: var(--serif); font-weight: 400; font-size: clamp(22px, 2.5vw, 38px); letter-spacing: .07em; line-height: 1.1; }
.hx-tag span { display: block; margin-top: 8px; white-space: nowrap; font-size: clamp(8px, .78vw, 11px); font-weight: 500; letter-spacing: .22em; text-transform: uppercase; opacity: .92; }
.hx-tag:hover { transform: translateX(-50%) translateY(-4px); }
.hx-tag.t1 { left: 17%; } .hx-tag.t2 { left: 47%; } .hx-tag.t3 { left: 81%; }
@media (max-width: 1000px) {
  .hx-hero-in { grid-template-columns: 1fr; }
  .hx-media { margin-right: 0; }
  .hx-media img { border-radius: 22px; -webkit-mask-image: none; mask-image: none; }
  .hx-media::after { border-radius: 0 0 22px 22px; }
  .hx-lead { max-width: 560px; }
}

/* purpose */
.hx-purpose { padding: 34px 0 20px; }
.hx-ph { text-align: center; }
.hx-ph .px-eyebrow { margin-bottom: 10px; }
.hx-ph h2 { font-size: clamp(32px, 4vw, 54px); font-weight: 500; }
.hx-ph h2 em { font-style: italic; color: var(--orange); }
.hx-pillars { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 34px; }
.hx-pillars > div { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 18px; font-size: 15px; color: #3A4666; line-height: 1.35; }
.hx-pillars > div + div { border-left: 1px solid rgba(18,34,75,.14); }
.hx-pillars span { width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 14px; color: #fff; background: linear-gradient(145deg, var(--c), color-mix(in srgb, var(--c) 62%, #12224B)); box-shadow: 0 14px 24px -12px var(--c); }
.hx-pillars svg { width: 28px; height: 28px; }
.hx-pillars b { font-weight: 600; color: var(--navy); font-size: 16.5px; }
@media (max-width: 760px) { .hx-pillars { grid-template-columns: 1fr 1fr; row-gap: 28px; } .hx-pillars > div:nth-child(3) { border-left: 0; } }

/* business cards */
.hx-biz { padding: 34px 0 54px; }
.hx-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.hx-card { position: relative; border-radius: 26px; padding: 30px 30px 0; min-height: 590px; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; isolation: isolate; transition: transform .35s, box-shadow .35s; box-shadow: 0 30px 50px -34px var(--sh); }
.hx-card:hover { transform: translateY(-6px); box-shadow: 0 40px 60px -32px var(--sh); }
.hx-card .no { font-size: 12px; font-weight: 600; letter-spacing: .12em; margin: 0 0 4px; opacity: .85; }
.hx-card .no span { display: block; letter-spacing: .3em; margin-top: 4px; }
.hx-card h3 { font-family: var(--serif); font-size: clamp(40px, 4vw, 54px); font-weight: 500; letter-spacing: .01em; color: inherit; line-height: 1.05; }
.hx-card .bar { display: block; width: 34px; height: 3px; border-radius: 3px; background: currentColor; margin: 14px 0 16px; opacity: .8; }
.hx-card h4 { font-size: 26px; line-height: 1.2; color: inherit; font-weight: 400; max-width: 300px; }
.hx-card .d { margin: 12px 0 20px; font-size: 14.5px; line-height: 1.6; max-width: 300px; opacity: .85; }
.hx-card .px-btn { padding: 11px 20px; font-size: 14px; color: #fff; background: var(--cb); box-shadow: 0 12px 22px -12px var(--cb); }
.hx-card img { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 44%; object-fit: cover; z-index: -1; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 34%); mask-image: linear-gradient(180deg, transparent 0, #000 34%); transition: transform .8s; }
.hx-card:hover img { transform: scale(1.05); }
.hx-card.medha { color: #0F2563; --cb: #1A2F78; --sh: #2147D6; background: linear-gradient(170deg, #E3EDFF 0%, #B7CEFF 58%, #8FB0FF 100%); }
.hx-card.tara { color: #0A4A3C; --cb: #0B5B49; --sh: #0E7A62; background: linear-gradient(170deg, #E4F8EE 0%, #B5EAD3 55%, #E9D49A 130%); }
.hx-card.kanuka { color: #B23C06; --cb: #E5560F; --sh: #F2641A; background: linear-gradient(170deg, #FFEBD6 0%, #FFC38F 58%, #FF9A55 100%); }
.hx-card.kanuka h3, .hx-card.kanuka h4 { color: #D4500C; }
@media (max-width: 960px) { .hx-cards { grid-template-columns: 1fr; } .hx-card { min-height: 540px; } }

/* story */
.hx-story { position: relative; padding: 20px 0; background: linear-gradient(100deg, #FFF3DD 0%, #FFE5C4 55%, #FFD6B0 100%); overflow: hidden; }
.hx-story-in { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; gap: 20px; }
.hx-story h2 { font-size: clamp(36px, 4.4vw, 58px); font-weight: 500; line-height: 1.05; margin-bottom: 18px; }
.hx-sp { font-size: 16.5px; line-height: 1.7; color: #3A4666; max-width: 440px; margin-bottom: 24px; }
.hx-story-img { margin-right: calc((min(var(--wrapw), 100vw - 48px) - 100vw) / 2); }
.hx-story-img img { width: 100%; height: auto; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%); mask-image: linear-gradient(90deg, transparent 0, #000 12%); }
@media (max-width: 900px) { .hx-story-in { grid-template-columns: 1fr; padding: 34px 0 0; } .hx-story-img { margin-right: 0; } .hx-story-img img { -webkit-mask-image: none; mask-image: none; } }

/* trust */
.hx-trust { padding: 56px 0 60px; background: linear-gradient(180deg, #FFF8EC, #FFFDF8); }
.px-eyebrow.center { text-align: center; color: var(--navy); margin-bottom: 30px; }
.hx-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.hx-stats > div { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 26px 14px 24px; border-radius: 22px; background: #fff; border: 1px solid color-mix(in srgb, var(--c) 18%, transparent); box-shadow: 0 24px 38px -30px var(--c); }
.hx-stats svg { width: 34px; height: 34px; color: var(--c); }
.hx-stats svg.big { width: 64px; height: 64px; margin: 14px 0 12px; }
.hx-stats b { font-family: var(--serif); font-weight: 500; font-size: 58px; line-height: 1.1; margin: 8px 0 2px; color: var(--c); }
.hx-stats span { font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: #4A5575; }
@media (max-width: 760px) { .hx-stats { grid-template-columns: 1fr 1fr; } .hx-stats svg.big { width: 64px; height: 64px; margin: 14px 0 12px; }
.hx-stats b { font-size: 46px; } }

/* contact */
.hx-contact { padding: 30px 0 70px; background: #FFFDF8; }
.hx-contact-in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 54px; align-items: start; }
.hx-contact h2 { font-size: clamp(32px, 3.8vw, 48px); font-weight: 500; margin-bottom: 16px; }
@media (max-width: 900px) { .hx-contact-in { grid-template-columns: 1fr; gap: 30px; } }

/* cta */
.hx-cta { position: relative; background: linear-gradient(110deg, #0C1A44 0%, #172B66 55%, #1E3A8A 100%); color: #fff; padding: 62px 0 100px; overflow: hidden; }
.hx-cta-sw { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 190px; }
.hx-cta-in { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.hx-cta h2 { color: #fff; font-size: clamp(34px, 4.2vw, 56px); font-weight: 400; line-height: 1.1; }
@media (max-width: 760px) { .hx-cta { padding: 46px 0 90px; } }
@media (max-width: 640px) {
  .hx-tag b { font-size: 15px; letter-spacing: .04em; }
  .hx-tag span { font-size: 6.5px; letter-spacing: .1em; margin-top: 4px; }
  .hx-card { min-height: 600px; }
}