/* Label CMS LP — page sections (desktop 1440px). Offsets are relative to the
   1312px column unless noted; y values are from each section's top. */

/* ---------- FV ---------- */
.hero { position: relative; overflow: hidden; background: url(../images/hero-bg.svg) center / cover no-repeat, linear-gradient(135deg, #f7fbff, #e7f0ff); }
.hero-inner { position: relative; min-height: 742px; }
.hero-copy { position: relative; z-index: 2; padding-top: 54px; }
.hero-kicker { font-size: 17px; line-height: 30px; color: #3a7be2; font-weight: 500; letter-spacing: .08em; }
.hero-title { margin-top: 18px; font-size: 46px; line-height: 69px; font-weight: 800; color: var(--navy); letter-spacing: .02em; }
.hero-lead { margin-top: 17px; font-size: 16.5px; line-height: 30px; color: var(--text); letter-spacing: .05em; }
.price-mini { display: flex; gap: 23px; margin-top: 28px; }
.price-card { width: 242px; height: 99px; padding: 16px 0 0 30px; border-radius: 14px; background: rgba(255, 255, 255, .88); box-shadow: 0 10px 28px rgba(30, 80, 160, .07); }
.price-card span { display: block; font-size: 13.5px; line-height: 20px; color: #4d5c77; letter-spacing: .06em; }
.price-card strong { display: flex; align-items: baseline; margin-top: 4px; font-size: 38px; line-height: 44px; font-weight: 800; color: var(--navy); letter-spacing: .01em; }
.price-card small { font-size: 15px; margin-left: 2px; }
.price-card em { font-style: normal; font-size: 11px; font-weight: 500; color: var(--muted); margin-left: 2px; }
.domain-note { display: flex; align-items: center; gap: 8px; margin: 12px 0 0 30px; font-size: 13.5px; color: var(--text); font-weight: 500; }
.domain-note .icon { width: 22px; height: 22px; padding: 3px; border-radius: 50%; color: #fff; background: #5d9cf0; }
.hero-cta { display: flex; gap: 17px; margin-top: 22px; }
.hero-cta .btn-primary { width: 300px; }
.hero-cta .btn-ghost { width: 279px; }
.hero-visual { position: absolute; inset: 0; pointer-events: none; }
.script { position: absolute; left: 1033px; top: 40px; font-family: "Caveat", cursive; font-size: 42px; line-height: 40px; color: #86aee9; transform: rotate(-9deg); white-space: nowrap; }
.script span { display: inline-block; margin-left: 52px; }

/* ---------- Pain points ---------- */
.pains { padding: 56px 0 33px; background: #fbfdff; }
.pain-list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 19px; margin-top: 33px; }
.pain { position: relative; height: 289px; padding: 19px 20px 0 29px; border-radius: 14px; background: var(--card); overflow: hidden; }
.pain-ic { width: 30px; height: 30px; color: #2f7be8; stroke-width: 1.8; }
.pain-ic.teal { color: #1fa7a0; }
.pain p { margin-top: 12px; font-size: 14.5px; line-height: 26px; font-weight: 700; color: #1c2b4a; letter-spacing: .03em; }
.person { position: absolute; left: 50%; bottom: 4px; width: 140px; height: 140px; transform: translateX(-40%); fill: none; stroke: #1c2b4a; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Solution ---------- */
.solution { position: relative; overflow: hidden; height: 295px; background: linear-gradient(90deg, #eef4fd 0%, #eef4fd 50%, #e6efff 100%); }
.solution-img { position: absolute; top: 0; bottom: 0; right: 0; width: 60%; background-size: cover; background-position: center 40%; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%); mask-image: linear-gradient(90deg, transparent 0%, #000 34%); }
.solution-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(238, 244, 253, .2), rgba(120, 140, 255, .12)); }
.solution-inner { position: relative; padding-top: 45px; }
.solution .sec-h { margin-top: 12px; }
.solution .sec-lead { margin-top: 12px; color: #4d5c77; }

/* ---------- Features ---------- */
.features { padding: 54px 0 43px; background: #fbfdff; }
.features-head { position: relative; }
.features .sec-h { font-size: 36px; line-height: 50px; }
.features-note { position: absolute; left: 904px; top: -10px; font-size: 13px; line-height: 25px; color: var(--muted); letter-spacing: .04em; }
.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px 21px; margin-top: 22px; }
.feature { position: relative; height: 309px; overflow: hidden; border-radius: 16px; background: var(--card); padding: 25px 0 0 27px; }
.f-title { display: flex; align-items: center; gap: 10px; font-size: 16.5px; line-height: 29px; font-weight: 800; color: var(--navy); }
.f-ic { display: inline-flex; width: 29px; height: 29px; align-items: center; justify-content: center; border-radius: 8px; color: #fff; }
.f-ic .icon { width: 17px; height: 17px; }
.c-teal { background: #36c3b3; } .c-blue { background: #2f7cf0; } .c-sky { background: #3cb0e6; } .c-rose { background: #f47a8b; }
.c-violet { background: #7d8cf5; } .c-pink { background: #f06d9b; } .c-mint { background: #2fc095; } .c-coral { background: #f59a7a; }
.f-desc { margin: 10px 0 0 39px; font-size: 13px; line-height: 24px; color: var(--muted); letter-spacing: .03em; }

/* ---------- Admin feature (design) ---------- */
.design { position: relative; overflow: hidden; background: linear-gradient(180deg, #eef5fe, #e9f2fe); }
.design-inner { position: relative; height: 520px; }
.design-copy { padding-top: 77px; }
.design .sec-h { margin-top: 16px; font-size: 38px; line-height: 55px; }
.design .sec-lead { margin-top: 18px; }
.design-visual { position: absolute; inset: 0; pointer-events: none; }

/* ---------- Security ---------- */
.security { background: #fbfdff; }
.security-inner { position: relative; height: 437px; padding-top: 62px; }
.security .sec-h { margin-top: 16px; font-size: 35px; line-height: 50px; }
.security .sec-lead { margin-top: 14px; font-size: 15px; line-height: 30.5px; }
.cf-mark { position: absolute; left: 456px; top: 172px; width: 281px; display: flex; align-items: center; justify-content: center; gap: 14px; color: var(--navy); }
.cf-mark .icon { width: 64px; height: 64px; color: #f38020; stroke-width: 1.5; }
.cf-mark p { font-size: 14px; line-height: 20px; color: var(--muted); letter-spacing: .04em; }
.cf-mark b { font-size: 34px; line-height: 40px; font-weight: 800; color: var(--navy); letter-spacing: .02em; }
.sec-list { position: absolute; left: 796px; top: 63px; width: 515px; height: 345px; padding: 9px 30px; border-radius: 16px; background: #fff; box-shadow: 0 10px 40px rgba(30, 80, 160, .07); border: 1px solid #edf2fa; display: grid; align-content: space-around; }
.sec-list li { display: flex; align-items: center; gap: 22px; }
.s-ic { display: inline-flex; width: 52px; height: 52px; align-items: center; justify-content: center; border-radius: 50%; background: #eaf3ff; color: #2f7be8; flex-shrink: 0; }
.s-ic .icon { width: 26px; height: 26px; stroke-width: 1.6; }
.sec-list b { display: block; font-size: 17px; line-height: 26px; color: var(--navy); }
.sec-list p { font-size: 13.5px; line-height: 22px; color: var(--muted); }

/* ---------- Use cases ---------- */
.usecases { background: #fbfdff; }
.usecases-inner { position: relative; height: 282px; padding-top: 52px; }
.usecases .sec-h { margin-top: 14px; }
.usecases .sec-lead { margin-top: 16px; }
.case-list { position: absolute; left: 425px; top: 43px; display: grid; grid-template-columns: repeat(5, 170px); gap: 16px; }
.case { display: flex; flex-direction: column; }
.case-img { display: flex; height: 147px; align-items: center; justify-content: center; border-radius: 12px; background-color: #dfe8f6; background-size: cover; background-position: center; box-shadow: 0 8px 22px rgba(30, 80, 160, .08); }
.case b { margin-top: 18px; padding-left: 16px; font-size: 14px; line-height: 20px; color: var(--navy); }
.case span { margin-top: 3px; padding-left: 16px; font-size: 12.5px; line-height: 20px; color: #3f86ea; white-space: nowrap; }
.case.custom span { padding-left: 8px; font-size: 11px; letter-spacing: -.02em; }

/* ---------- Pricing ---------- */
.pricing { padding: 41px 0 42px; background: #fbfdff; }
.pricing .center-h { margin-top: 23px; }
.plans { display: grid; grid-template-columns: 544fr 477fr 247fr; gap: 22px; margin-top: 31px; }
.plan { display: flex; gap: 0; height: 187px; padding: 24px 30px; border-radius: 16px; background: #f5f9fe; border: 1px solid #e3edf9; }
.plan > div:first-child { width: 255px; flex-shrink: 0; }
.plan-main > div:first-child { width: 207px; }
.plan-main { background: #fff; border: 2px solid #c4dbfb; box-shadow: 0 10px 30px rgba(30, 100, 220, .08); }
.plan-label { font-size: 15px; line-height: 24px; font-weight: 700; color: var(--navy); letter-spacing: .06em; }
.plan-price { display: flex; align-items: baseline; margin-top: 4px; font-size: 48px; line-height: 56px; font-weight: 800; color: var(--blue); letter-spacing: .01em; }
.plan-price small { font-size: 20px; margin-left: 2px; }
.plan-tax { font-size: 12px; color: var(--muted); }
.plan ul { display: grid; align-content: start; gap: 6px; padding-top: 48px; font-size: 13px; white-space: nowrap; line-height: 21px; color: var(--text); }
.plan li { position: relative; padding-left: 18px; }
.plan li::before { content: ""; position: absolute; left: 0; top: 6px; width: 9px; height: 9px; border-radius: 50%; background: #c9dcf8; }
.plan-main ul { padding-top: 42px; }
.plan-option { display: block; background: #f3f7fd; }
.opt-h { font-size: 14px; font-weight: 800; color: var(--navy); letter-spacing: .06em; }
.opt-b { margin-top: 8px; font-size: 13px; line-height: 21px; font-weight: 700; color: var(--navy); }
.opt-t { margin-top: 8px; font-size: 12px; line-height: 19px; color: var(--text); }
.opt-n { margin-top: 8px; font-size: 11.5px; line-height: 19px; color: var(--muted); }

/* ---------- Final CTA ---------- */
.final-cta { position: relative; overflow: hidden; color: #fff; background: #0c1a3f url(../images/stage.webp) center 35% / cover no-repeat; }
.final-cta::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 20, 56, .92) 0%, rgba(22, 40, 110, .7) 45%, rgba(40, 50, 140, .35) 100%); }
.cta-inner { position: relative; display: flex; align-items: center; justify-content: space-between; min-height: 213px; padding-block: 24px; }
.final-cta h2 { font-size: 34px; line-height: 52px; font-weight: 800; letter-spacing: .03em; }
.final-cta p { margin-top: 6px; font-size: 15px; line-height: 26px; color: rgba(255, 255, 255, .86); letter-spacing: .06em; }
.cta-btns { display: flex; gap: 15px; margin-top: 18px; }
.cta-btns .btn-primary { width: 247px; height: 62px; }
.cta-btns .btn-white { width: 240px; height: 62px; }