@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap');

:root {
    --purple: #5138a9;
    --purple-dark: #352174;
    --purple-soft: #806ad0;
    --lavender: #eeeaff;
    --ink: #17171c;
    --muted: #696873;
    --line: #e8e6ee;
    --white: #ffffff;
    --offwhite: #f8f7fb;
    --radius: 24px;
    --shadow: 0 24px 70px rgba(54, 36, 117, .11);
}

html { scroll-behavior: smooth; }
body {
    margin: 0;
    color: var(--ink);
    background: var(--white);
    font-family: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    overflow-x: hidden;
}
h1,h2,h3,h4,h5,h6 { font-family: "Manrope", sans-serif; }
a { text-decoration: none; }

.site-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 1000;
    padding: 17px 0;
    transition: .3s ease;
}
.site-header.is-scrolled {
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(18px);
    box-shadow: 0 1px 0 rgba(20,20,30,.08);
}
.navbar { padding: 0; }
.brand-logo { width: 150px; height: auto; display: block; }
.nav-menu {
    display: flex;
    align-items: center;
    gap: 34px;
}
.nav-menu a {
    color: #2b2933;
    font-size: 14px;
    font-weight: 600;
    transition: color .2s ease;
}
.nav-menu a:hover { color: var(--purple); }
.nav-menu .nav-cta {
    background: var(--ink);
    color: #fff;
    padding: 13px 18px;
    border-radius: 12px;
}
.nav-cta span { margin-left: 8px; }
.mobile-toggle {
    display: none;
    border: 0;
    background: transparent;
    padding: 6px;
}
.mobile-toggle span {
    display: block;
    width: 25px;
    height: 2px;
    background: var(--ink);
    margin: 5px 0;
    transition: .25s;
}
.mobile-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-toggle.is-active span:nth-child(2) { opacity: 0; }
.mobile-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.hero {
    min-height: 800px;
    display: flex;
    align-items: center;
    position: relative;
    padding: 145px 0 95px;
    background:
        radial-gradient(circle at 77% 34%, rgba(123,100,207,.17), transparent 28%),
        linear-gradient(120deg, #fff 0%, #fff 57%, #f4f1ff 100%);
    overflow: hidden;
}
.hero-glow { position: absolute; border-radius: 50%; filter: blur(1px); pointer-events: none; }
.hero-glow-one { width: 500px; height: 500px; right: -180px; top: 80px; background: rgba(113,89,195,.10); }
.hero-glow-two { width: 300px; height: 300px; left: -180px; bottom: -130px; background: rgba(82,56,169,.07); }
.eyebrow, .section-kicker {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--purple);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .17em;
}
.eyebrow-dot {
    width: 7px;
    height: 7px;
    background: var(--purple);
    border-radius: 50%;
}
.hero h1 {
    font-size: clamp(58px, 7vw, 98px);
    line-height: .96;
    letter-spacing: -.065em;
    margin: 23px 0 25px;
    font-weight: 800;
}
.hero h1 span { color: var(--purple); }
.hero-lead {
    max-width: 620px;
    color: #595762;
    font-size: 19px;
    line-height: 1.7;
}
.hero-actions { display: flex; align-items: center; gap: 18px; margin-top: 34px; }
.btn-primary-custom {
    border-radius: 12px;
    background: var(--purple);
    color: white;
    font-weight: 700;
    padding: 15px 22px;
    box-shadow: 0 14px 30px rgba(81,56,169,.20);
}
.btn-primary-custom:hover { background: var(--purple-dark); color: white; transform: translateY(-1px); }
.btn-primary-custom span { margin-left: 17px; font-size: 18px; }
.btn-link-custom { color: var(--ink); font-weight: 700; padding: 14px 8px; }
.btn-link-custom span { margin-left: 10px; color: var(--purple); }
.hero-trust {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-top: 55px;
}
.trust-item { display: flex; align-items: center; gap: 9px; }
.trust-item strong { color: var(--purple); font-size: 18px; }
.trust-item span { font-size: 13px; color: #77747f; line-height: 1.25; font-weight: 600; }
.trust-line { height: 32px; width: 1px; background: #ddd9e8; }

.hero-visual { min-height: 570px; position: relative; display: flex; align-items: center; justify-content: center; }
.visual-backdrop {
    position: absolute;
    width: 440px; height: 510px;
    background: linear-gradient(160deg, #e5defb, #f5f3ff);
    border-radius: 180px 40px 180px 40px;
    transform: rotate(7deg);
}
.visual-card-main {
    width: 330px; height: 455px;
    position: relative;
    z-index: 2;
    padding: 27px;
    border-radius: 27px;
    color: white;
    background: linear-gradient(155deg, #5b41b6 0%, #3d2786 100%);
    box-shadow: 0 35px 70px rgba(49,32,112,.28);
    overflow: hidden;
}
.visual-card-main:after {
    content: "";
    position: absolute; width: 250px; height: 250px; border: 1px solid rgba(255,255,255,.13);
    border-radius: 50%; right: -110px; top: 115px;
}
.visual-top { display: flex; justify-content: space-between; align-items: center; }
.mini-label { font-weight: 800; font-size: 16px; letter-spacing: -.02em; }
.mini-status { font-size: 9px; background: rgba(255,255,255,.13); padding: 7px 9px; border-radius: 20px; }
.mini-status i { display: inline-block; width: 5px; height: 5px; background: #d5ffaf; border-radius: 50%; margin-right: 4px; }
.visual-play {
    margin: 60px auto 43px;
    width: 82px; height: 82px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.13);
    border: 1px solid rgba(255,255,255,.2);
}
.visual-play span { font-size: 20px; margin-left: 4px; }
.visual-copy small { font-size: 9px; letter-spacing: .2em; opacity: .65; font-weight: 700; }
.visual-copy h3 { font-size: 34px; line-height: 1.08; letter-spacing: -.05em; margin-top: 9px; }
.visual-progress { position: absolute; left: 27px; right: 27px; bottom: 28px; font-size: 9px; opacity: .9; }
.visual-progress strong { font-size: 11px; }
.progress-track { height: 5px; background: rgba(255,255,255,.16); border-radius: 10px; margin-top: 8px; overflow: hidden; }
.progress-track span { display: block; width: 82%; height: 100%; background: #fff; border-radius: 10px; }
.floating-card {
    position: absolute; z-index: 3; background: #fff; box-shadow: var(--shadow);
    border-radius: 14px; color: var(--ink);
}
.floating-card-top {
    top: 75px; right: 0; padding: 13px 16px; display: flex; gap: 10px; align-items: center;
}
.float-icon { width: 31px; height: 31px; border-radius: 50%; display:flex; align-items:center; justify-content:center; background: var(--lavender); color: var(--purple); font-weight: 800; }
.floating-card small, .floating-card strong { display:block; font-size: 9px; }
.floating-card strong { font-size: 11px; margin-top: 2px; }
.floating-card-bottom {
    bottom: 80px; left: -10px; padding: 16px 19px; display:flex; align-items:center; gap:11px;
}
.floating-card-bottom strong { font-size: 20px; color: var(--purple); }
.floating-card-bottom span { font-size: 10px; line-height: 1.2; color:#6d6975; }

.statement { background: var(--purple); color: #fff; padding: 17px 0; overflow: hidden; }
.statement-inner { display:flex; align-items:center; justify-content:space-between; gap: 20px; white-space: nowrap; font-size: 10px; letter-spacing: .18em; font-weight: 700; }
.statement b { opacity: .45; }

.section { padding: 120px 0; }
.section-light { background: #faf9fc; }
.section-heading h2, .about-section h2, .difference-section h2, .process-section h2 {
    font-size: clamp(42px, 5vw, 64px);
    line-height: 1.05; letter-spacing: -.055em; font-weight: 800; margin: 13px 0 0;
}
.section-heading h2 em, .about-section h2 em, .difference-section h2 em, .process-section h2 em {
    color: var(--purple); font-style: normal;
}
.section-heading p { color: var(--muted); line-height: 1.75; margin: 0; max-width: 450px; }

.why-grid { display:grid; grid-template-columns: 1fr 1fr 1.15fr; gap: 18px; }
.feature-card {
    min-height: 455px; padding: 31px; border-radius: var(--radius);
    background:#fff; border:1px solid var(--line); position:relative; overflow:hidden;
}
.feature-card-large { background: #fff; }
.feature-card-purple { background: var(--purple); color: #fff; border-color: var(--purple); }
.feature-number { font-size: 10px; letter-spacing: .16em; font-weight: 800; opacity:.65; }
.feature-icon {
    width: 45px; height:45px; display:flex; align-items:center; justify-content:center;
    border-radius:50%; background:var(--lavender); color:var(--purple); font-size:22px; margin: 58px 0 25px;
}
.feature-icon.light { background:rgba(255,255,255,.13); color:#fff; }
.feature-card h3 { font-size: 26px; line-height: 1.13; letter-spacing: -.04em; margin-bottom: 15px; }
.feature-card p { color:#6c6974; line-height:1.65; font-size:16px; }
.feature-card-purple p { color:rgba(255,255,255,.72); }
.feature-bottom { position:absolute; left:31px; right:31px; bottom:28px; padding-top:17px; border-top:1px solid rgba(30,25,45,.10); font-size:9px; font-weight:800; letter-spacing:.15em; color:var(--purple); }
.feature-card-purple .feature-bottom { border-color:rgba(255,255,255,.15); color:#fff; }
.feature-bottom span { float:right; font-size:15px; letter-spacing:0; }
.feature-card-image { padding:0; color:#fff; }
.feature-card-image img { width:100%; height:100%; min-height:455px; object-fit:cover; display:block; }
.image-overlay { position:absolute; inset:0; padding:31px; display:flex; flex-direction:column; justify-content:flex-end; background:linear-gradient(0deg, rgba(32,21,72,.92), transparent 65%); }
.image-overlay h3 { font-size:27px; line-height:1.08; margin: 9px 0; }
.image-overlay p { color:rgba(255,255,255,.76); margin:0; }

.about-section { background:#fff; }
.about-visual {
    min-height: 520px; border-radius: 28px; position:relative; overflow:hidden;
    background: linear-gradient(145deg, #f7f5fc, #f7f5fc);
}
.about-visual:before, .about-visual:after {
    content:""; position:absolute; border:1px solid rgba(255,255,255,.15); border-radius:50%;
}
.about-visual:before { width: 470px; height:470px; right:-220px; top:-130px; }
.about-visual:after { width: 360px; height:360px; left:-180px; bottom:-170px; }
.about-mark { position:absolute; left:8%; top:11%; width:85%; opacity:.36; }
.about-mark img { width:100%; }
.about-caption { position:absolute; bottom:37px; left:38px; color:#000; z-index:2; }
.about-caption span { font-size:9px; letter-spacing:.2em; opacity:.7; display:block; margin-bottom:8px; }
.about-caption strong { font-family:Manrope,sans-serif; font-size:28px; line-height:1.15; letter-spacing:-.04em; }
.about-section h2 { margin-bottom:28px; }
.about-lead { color:#35333d; font-size:18px; line-height:1.7; }
.about-section p:not(.about-lead) { color:var(--muted); line-height:1.8; }
.about-points { margin-top:30px; display:grid; gap:12px; }
.about-points div { display:flex; align-items:center; gap:12px; font-size:15px; }
.about-points span { display:flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; background:var(--lavender); color:var(--purple); font-size:12px; font-weight:800; }

.process-section { background:#f7f5fc; padding:115px 0; }
.centered { text-align:center; max-width:760px; margin:0 auto; }
.centered .section-kicker { justify-content:center; }
.centered p { max-width:650px; margin:22px auto 0; }
.process-grid { display:grid; grid-template-columns: 1fr 45px 1fr 45px 1fr 45px 1fr; align-items:center; margin-top:70px; }
.process-item { text-align:center; }
.process-item > span { color:var(--purple); font-size:13px; letter-spacing:.12em; font-weight:800; }
.process-icon { width:117px; height:117px; display:flex; align-items:center; justify-content:center; margin:14px auto 19px; border-radius:20px; background:#fff; box-shadow:0 15px 40px rgba(61,39,134,.08); color:var(--purple); font-size:55px; }
.process-item h3 { font-size:20px; margin-bottom:9px; letter-spacing:-.03em; }
.process-item p { color:var(--muted); font-size:15px; line-height:1.6; margin:0 auto; max-width:180px; }
.process-connector { height:1px; background:#d5d0e5; }

.pricing-section { background:#fff; }
.pricing-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; margin-top:60px; align-items:stretch; }
.price-card {
    border:1px solid var(--line); border-radius:24px; padding:34px; position:relative; background:#fff;
    display:flex; flex-direction:column; transition:.25s ease;
}
.price-card:hover { transform:translateY(-5px); box-shadow:var(--shadow); }
.price-card-featured { border-color:var(--purple); box-shadow:0 20px 65px rgba(81,56,169,.14); }
.popular {
    position:absolute; top:0; left:50%; transform:translate(-50%,-50%);
    background:var(--purple); color:#fff; padding:8px 13px; border-radius:30px; white-space:nowrap;
    font-size:9px; letter-spacing:.11em; font-weight:800;
}
.price-tag { font-size:14px; color:var(--purple); font-weight:800; letter-spacing:.16em; }
.price-card h3 { font-size:29px; letter-spacing:-.045em; margin:13px 0 7px; }
.price-top p { color:var(--muted); font-size:15px; line-height:1.5; min-height:38px; }
.price { border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:23px 0; margin:25px 0 22px; }
.price strong { font-family:Manrope,sans-serif; font-size:38px; letter-spacing:-.06em; }
.price span { color:#77747f; font-size:16px; }
.price-card ul { list-style:none; padding:0; margin:0 0 30px; display:grid; gap:12px; }
.price-card li { color:#57545f; font-size:15px; line-height:1.45; display:flex; gap:8px; }
.price-card li span { color:var(--purple); font-weight:800; }
.price-button { margin-top:auto; border:1px solid #dedbe6; border-radius:11px; padding:13px 15px; color:var(--ink); font-weight:700; font-size:12px; display:flex; justify-content:space-between; }
.price-card-featured .price-button { background:var(--purple); color:#fff; border-color:var(--purple); }
.extra-services { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:18px; }
.extra-card { padding:25px; border-radius:20px; background:#f8f7fb; display:flex; gap:18px; align-items:flex-start; }
.extra-icon { width:48px; height:48px; flex:0 0 48px; display:flex; align-items:center; justify-content:center; background:#fff; color:var(--purple); border-radius:14px; font-size:21px; }
.extra-card span { color:var(--purple); font-size:14px; font-weight:800; letter-spacing:.13em; }
.extra-card h3 { font-size:24px; margin:6px 0; }
.extra-card h3 small { font-size:13px; color:#7b7883; }
.extra-card p { margin:0; color:var(--muted); font-size:14px; line-height:1.55; }

.difference-section { padding:120px 0; background:#f8f7fb; }
.difference-lead { color:var(--muted); font-size:16px; line-height:1.75; max-width:570px; margin:27px 0 30px; }
.difference-list { display:grid; gap:17px; }
.difference-list div { display:flex; gap:17px; align-items:flex-start; }
.difference-list span { color:var(--purple); font-size:13px; font-weight:800; padding-top:3px; }
.difference-list p { margin:0; color:var(--muted); font-size:15px; line-height:1.55; }
.difference-list strong { color:var(--ink); font-size:17px; }
.report-card { background:#fff; border-radius:25px; padding:31px; box-shadow:var(--shadow); }
.report-header { display:flex; align-items:center; justify-content:space-between; }
.report-header small { color:var(--purple); font-size:9px; font-weight:800; letter-spacing:.16em; }
.report-header h3 { font-size:23px; margin:7px 0 0; letter-spacing:-.04em; }
.report-dot { width:9px; height:9px; background:#5fb06b; border-radius:50%; box-shadow:0 0 0 6px #eaf7eb; }
.chart { margin-top:35px; position:relative; height:230px; }
.chart-grid { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-between; }
.chart-grid i { display:block; border-top:1px dashed #e7e4ec; }
.chart svg { position:absolute; inset:0; width:100%; height:100%; color:var(--purple); overflow:visible; }
.chart-labels { position:absolute; bottom:-25px; left:0; right:0; display:flex; justify-content:space-between; font-size:8px; color:#9995a1; }
.report-stats { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); margin-top:50px; padding-top:20px; gap:10px; }
.report-stats small { display:block; color:#898590; font-size:9px; }
.report-stats strong { display:block; color:var(--purple); font-size:18px; margin-top:4px; }

.cta-section { padding:95px 0; background:#fff; }
.cta-box {
    border-radius:30px; background:linear-gradient(130deg,#38247d,#5941b4);
    color:#fff; padding:75px 85px; position:relative; overflow:hidden;
}
.cta-box:after { content:""; position:absolute; width:460px; height:460px; border:1px solid rgba(255,255,255,.11); border-radius:50%; right:-140px; top:-190px; }
.cta-mark { position:absolute; right:55px; bottom:-85px; font-family:Manrope,sans-serif; font-size:360px; font-weight:800; line-height:1; color:rgba(255,255,255,.055); }
.cta-content { position:relative; z-index:2; max-width:650px; }
.cta-content .section-kicker { color:#cfc5ff; }
.cta-content h2 { font-size:clamp(42px,5vw,65px); line-height:1.02; letter-spacing:-.055em; margin:14px 0 20px; }
.cta-content h2 em { font-style:normal; color:#cfc5ff; }
.cta-content p { color:rgba(255,255,255,.68); line-height:1.7; max-width:560px; }
.cta-actions { display:flex; gap:12px; margin-top:29px; }
.btn-white { background:#fff; color:var(--purple-dark); padding:14px 20px; border-radius:11px; font-weight:800; font-size:15px; }
.btn-white:hover { background:#f0edff; color:var(--purple-dark); }
.btn-outline-white { color:#fff; border:1px solid rgba(255,255,255,.27); padding:14px 20px; border-radius:11px; font-weight:700; font-size:15px; }
.btn-outline-white:hover { background:rgba(255,255,255,.1); color:#fff; }
.btn-white span { margin-left:18px; }

.footer { background:#17151d; color:#fff; padding:65px 0 25px; }
.footer-logo { width:150px; opacity:.95; }
.footer p { color:#87838f; font-size:16px; line-height:1.6; margin-top:15px; }
.footer-links { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:25px; }
.footer-links a { color:#b0acb6; font-size:16px; }
.footer-links a:hover { color:#fff; }
.footer-bottom { margin-top:45px; padding-top:18px; border-top:1px solid rgba(255,255,255,.08); display:flex; justify-content:space-between; gap:20px; color:#67636e; font-size:12px; letter-spacing:.04em; }

@media (max-width: 991.98px) {
    .site-header { padding:13px 0; }
    .brand-logo { width:130px; }
    .mobile-toggle { display:block; }
    .nav-menu {
        position:absolute; left:12px; right:12px; top:calc(100% + 8px);
        padding:15px; border-radius:16px; background:#fff; box-shadow:var(--shadow);
        display:none; flex-direction:column; align-items:stretch; gap:4px;
    }
    .nav-menu.is-open { display:flex; }
    .nav-menu a { padding:12px; }
    .nav-menu .nav-cta { text-align:center; }
    .hero { padding-top:125px; }
    .hero-visual { margin-top:20px; min-height:500px; }
    .why-grid { grid-template-columns:1fr 1fr; }
    .feature-card-image { grid-column:1/-1; min-height:400px; }
    .feature-card-image img { min-height:400px; }
    .process-grid { grid-template-columns:1fr 1fr; gap:45px 20px; }
    .process-connector { display:none; }
    .pricing-grid { grid-template-columns:1fr; max-width:620px; margin-left:auto; margin-right:auto; }
    .extra-services { grid-template-columns:1fr; }
    .footer-links { justify-content:flex-start; }
}
@media (max-width: 767.98px) {
    .section { padding:80px 0; }
    .hero { min-height:auto; padding:120px 0 75px; }
    .hero h1 { font-size:58px; }
    .hero-lead { font-size:16px; }
    .hero-actions { flex-wrap:wrap; }
    .hero-trust { margin-top:38px; gap:12px; }
    .trust-line { margin:0 2px; }
    .hero-visual { min-height:430px; }
    .visual-backdrop { width:310px; height:380px; }
    .visual-card-main { width:285px; height:385px; padding:23px; }
    .visual-play { margin:43px auto 30px; width:65px; height:65px; }
    .visual-copy h3 { font-size:29px; }
    .visual-progress { left:23px; right:23px; bottom:23px; }
    .floating-card-top { top:45px; right:2px; }
    .floating-card-bottom { bottom:45px; left:0; }
    .statement-inner { overflow:auto; justify-content:flex-start; padding-bottom:2px; }
    .section-heading h2, .about-section h2, .difference-section h2, .process-section h2 { font-size:43px; }
    .why-grid { grid-template-columns:1fr; }
    .feature-card, .feature-card-image, .feature-card-image img { min-height:400px; }
    .process-grid { grid-template-columns:1fr 1fr; }
    .about-visual { min-height:390px; }
    .about-caption { left:25px; bottom:25px; }
    .about-caption strong { font-size:22px; }
    .cta-box { padding:50px 30px; }
    .cta-mark { right:-20px; font-size:250px; }
    .cta-actions { flex-direction:column; align-items:flex-start; }
    .footer-bottom { flex-direction:column; }
}
@media (max-width: 480px) {
    .container { --bs-gutter-x: 1.5rem; }
    .hero h1 { font-size:51px; }
    .hero-trust { display:grid; grid-template-columns:1fr 1fr 1fr; gap:7px; }
    .trust-line { display:none; }
    .trust-item { align-items:flex-start; }
    .process-grid { grid-template-columns:1fr; }
    .process-item p { max-width:250px; }
    .price-card { padding:26px; }
    .report-card { padding:22px; }
    .report-stats strong { font-size:15px; }
}
