:root {
    --bs-primary: #d100d1;
    --bs-primary-rgb: 209, 0, 209;
    --gw-blue: #d100d1;
    --gw-blue-dark: #9c009c;
    --gw-ink: #07111f;
    --gw-muted: #5b6574;
    --gw-border: #e6e9ee;
    --gw-bg: #f7f9fc;
    --gw-soft-blue: #fbe8fb;
    --gw-dark: #07111f;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--gw-ink);
    background: #fff;
    line-height: 1.65;
}
a { color: var(--gw-blue); text-decoration: none; }
a:hover { color: var(--gw-blue-dark); }

.container { max-width: 1200px; }
.narrow-container { max-width: 900px; }

.site-header { box-shadow: 0 10px 30px rgba(12, 20, 33, .04); }
.navbar-brand { min-width: 175px; }
.brand-word {
    display: block;
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: -.06em;
    line-height: 1;
    color: #04080f;
}
.brand-sub {
    display: block;
    margin-left: -1px;
    color: var(--gw-blue);
    font-size: .9rem;
    font-weight: 800;
    line-height: 1;
}
.navbar .nav-link {
    color: #111827;
    font-weight: 700;
    font-size: .98rem;
    white-space: nowrap;
}
.navbar .nav-link:hover { color: var(--gw-blue); }
.btn {
    border-radius: .72rem;
    font-weight: 800;
    padding: .8rem 1.35rem;
}
.btn-primary {
    background: linear-gradient(135deg, #d100d1, #9c009c);
    border-color: #d100d1;
    box-shadow: 0 12px 24px rgba(209, 0, 209, .18);
}
.btn-primary:hover { background: var(--gw-blue-dark); border-color: var(--gw-blue-dark); }
.btn-outline-primary { color: var(--gw-blue); border-color: var(--gw-blue); }
.btn-outline-primary:hover { background: var(--gw-blue); border-color: var(--gw-blue); }
.btn-header { padding: .65rem 1.1rem; font-size: .94rem; white-space: nowrap; }

.hero-section {
    padding: 5.2rem 0 5rem;
    background: radial-gradient(circle at 75% 30%, rgba(209, 0, 209, .15), transparent 34%), linear-gradient(180deg, #fff7ff, #ffffff 78%);
    overflow: hidden;
}
.eyebrow,
.section-kicker {
    color: var(--gw-blue);
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: .82rem;
    margin-bottom: .7rem;
}
.hero-section h1 {
    font-size: clamp(2.4rem, 5vw, 4.7rem);
    font-weight: 900;
    letter-spacing: -.055em;
    line-height: 1.05;
    margin-bottom: 1.4rem;
}
.hero-section .lead {
    color: #344054;
    font-size: 1.14rem;
    max-width: 640px;
}

.hero-device-wrap {
    position: relative;
    min-height: 420px;
}
.desktop-mockup {
    position: relative;
    margin: 0 auto;
    max-width: 570px;
    border: 12px solid #0b0f16;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 30px 70px rgba(10, 20, 38, .24);
    overflow: hidden;
}
.mockup-top { height: 28px; background: #f4f6fb; display: flex; gap: 6px; align-items: center; padding: 0 12px; }
.mockup-top span { width: 8px; height: 8px; background: #cbd5e1; border-radius: 999px; }
.mockup-hero {
    min-height: 150px;
    background: linear-gradient(135deg, rgba(209, 0, 209, .72), rgba(7, 17, 31, .8)), linear-gradient(45deg, #f5d0fe, #f0abfc);
    padding: 2rem;
    color: #fff;
}
.mockup-badge { display: inline-block; font-weight: 900; font-size: 1.45rem; margin-bottom: 1rem; }
.mockup-line { height: 10px; background: rgba(255,255,255,.6); border-radius: 999px; margin: .45rem 0; }
.mockup-content { padding: 1.25rem; margin: -50px .5rem 0; position: relative; z-index: 2; }
.mock-card {
    background: #fff;
    border: 1px solid var(--gw-border);
    border-radius: 14px;
    padding: 1rem;
    box-shadow: 0 14px 35px rgba(15, 23, 42, .12);
    min-height: 132px;
}
.mock-card strong { display: block; margin-bottom: .7rem; }
.mock-card p, .mock-card div { font-size: .82rem; color: #344054; margin-bottom: .45rem; }
.mock-card span { float: right; background: #fbe8fb; color: var(--gw-blue); border-radius: 999px; padding: 0 .4rem; }
.phone-mockup {
    position: absolute;
    right: 0;
    bottom: 10px;
    width: 150px;
    height: 285px;
    border: 9px solid #111827;
    border-radius: 30px;
    background: #fff;
    box-shadow: 0 24px 55px rgba(15, 23, 42, .28);
    padding: 20px 10px 10px;
}
.phone-bar { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 46px; height: 5px; background: #111827; border-radius: 999px; }
.phone-title { color: var(--gw-blue); font-weight: 900; margin-bottom: 10px; }
.map-grid {
    position: relative;
    height: 205px;
    border-radius: 16px;
    overflow: hidden;
    background: linear-gradient(90deg, rgba(209,0,209,.1) 1px, transparent 1px), linear-gradient(rgba(209,0,209,.1) 1px, transparent 1px), #fbe8fb;
    background-size: 24px 24px;
}
.map-grid span { position: absolute; width: 13px; height: 13px; background: var(--gw-blue); border: 3px solid #fff; border-radius: 999px; box-shadow: 0 5px 10px rgba(209,0,209,.3); }
.map-grid span:nth-child(1){ left: 25px; top: 26px; }
.map-grid span:nth-child(2){ right: 25px; top: 52px; }
.map-grid span:nth-child(3){ left: 50px; top: 105px; }
.map-grid span:nth-child(4){ right: 38px; bottom: 40px; }
.map-grid span:nth-child(5){ left: 22px; bottom: 28px; }

.section { padding: 5rem 0; }
.section-muted { background: linear-gradient(180deg, #fffbff, #f6f9fc); }
.section h2 {
    font-size: clamp(2rem, 3vw, 3rem);
    font-weight: 900;
    letter-spacing: -.04em;
    margin-bottom: 1rem;
}
.service-card,
.price-card,
.content-card,
.sidebar-card {
    background: #fff;
    border: 1px solid var(--gw-border);
    border-radius: 18px;
    padding: 1.55rem;
    box-shadow: 0 20px 45px rgba(15, 23, 42, .06);
}
.service-card i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: var(--gw-blue);
    font-size: 1.9rem;
    margin-bottom: 1.3rem;
}
.service-card h3,
.price-card h3,
.audience-card h3,
.process-step h3,
.site-footer h3 {
    font-size: 1.08rem;
    font-weight: 900;
    margin-bottom: .75rem;
}
.service-card ul { margin: 0; padding-left: 1rem; color: #344054; font-size: .93rem; }
.service-card li::marker { color: var(--gw-blue); }

.audience-grid { border-radius: 22px; overflow: hidden; background: #fff; border: 1px solid var(--gw-border); }
.audience-card {
    text-align: center;
    padding: 2.3rem 1.4rem;
    height: 100%;
    border-right: 1px solid var(--gw-border);
}
.audience-grid .col-md-6:last-child .audience-card { border-right: 0; }
.audience-card i { font-size: 3rem; color: var(--gw-blue); margin-bottom: 1rem; display: block; }
.audience-card p { color: #344054; margin: 0 auto; max-width: 260px; }

.process-line {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 2rem;
    position: relative;
}
.process-line::before {
    content: '';
    position: absolute;
    left: 7%;
    right: 7%;
    top: 24px;
    height: 1px;
    background: #cfd7e3;
}
.process-step { position: relative; z-index: 1; }
.process-number {
    width: 48px;
    height: 48px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: var(--gw-blue);
    font-weight: 900;
    margin-bottom: 1rem;
    box-shadow: 0 14px 24px rgba(209, 0, 209, .22);
}
.process-step p { color: #5b6574; font-size: .92rem; margin: 0; }

.cta-strip {
    background: radial-gradient(circle at 20% 30%, rgba(209, 0, 209, .18), transparent 30%), #07111f;
    color: #fff;
    padding: 2.8rem 0;
}
.cta-strip h2 { font-size: 2rem; font-weight: 900; margin: 0 0 .35rem; }
.cta-strip p { margin: 0; color: #cbd5e1; }

.price-card h3 { font-size: 1.25rem; }
.price-card strong { display: block; font-size: 1.35rem; color: #07111f; margin-bottom: .8rem; }
.price-card p { color: #344054; margin: 0; }
.price-note { text-align: center; color: #687386; margin: 1.4rem 0 0; }

.page-section { background: #f8fafc; }
.content-card h1, .content-card .h2 { font-weight: 900; letter-spacing: -.03em; }
.content-card .h2 a { color: var(--gw-ink); }
.entry-meta { color: #687386; font-size: .92rem; }
.entry-content img { max-width: 100%; height: auto; }
.entry-content h2, .entry-content h3 { font-weight: 900; margin-top: 2rem; }

.site-footer {
    background: #07111f;
    color: #d7dee9;
}
.footer-brand {
    color: #fff;
    font-size: 2.1rem;
    font-weight: 900;
    letter-spacing: -.05em;
    line-height: 1;
}
.footer-sub { color: #f0abfc; font-weight: 800; }
.site-footer h3 { color: #fff; font-size: .95rem; text-transform: uppercase; letter-spacing: .06em; }
.site-footer a { color: #f5d0fe; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); color: #9aa8bc; font-size: .92rem; }
.footer-menu { display: flex; gap: 1rem; list-style: none; padding: 0; margin: 0; }
.footer-menu a { color: #9aa8bc; }
.sidebar-card { position: sticky; top: 110px; }

@media (max-width: 991.98px) {
    .navbar-collapse { padding-top: 1rem; }
    .btn-header { width: 100%; margin-top: .6rem; }
    .hero-section { padding: 3.5rem 0; }
    .hero-device-wrap { min-height: 360px; }
    .phone-mockup { right: 15px; }
    .process-line { grid-template-columns: 1fr; text-align: left; max-width: 600px; margin-left: auto; margin-right: auto; }
    .process-line::before { display: none; }
    .process-step { display: grid; grid-template-columns: 56px 1fr; column-gap: 1rem; align-items: start; }
    .process-step p { grid-column: 2; }
    .audience-card { border-right: 0; border-bottom: 1px solid var(--gw-border); }
}

@media (max-width: 575.98px) {
    .brand-word { font-size: 1.55rem; }
    .section { padding: 3.5rem 0; }
    .desktop-mockup { border-width: 8px; }
    .phone-mockup { display: none; }
    .hero-device-wrap { min-height: auto; }
    .mockup-content { margin-top: 0; }
    .mock-card { min-height: auto; }
}