:root {
  --ink: #0b1220;
  --ink-soft: #40506a;
  --blue: #0062ff;
  --blue-dark: #0644ae;
  --teal: #14b8a6;
  --canvas: #f6f8fb;
  --surface: #ffffff;
  --line: #e7ecf3;
  --muted: #70809a;
  --radius: 14px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { color: var(--ink); background: var(--surface); font-family: Manrope, "Noto Sans Thai", sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
svg { display: block; }
.container { width: min(100% - 48px, 1180px); margin: 0 auto; }

.header { height: 78px; border-bottom: 1px solid rgba(231,236,243,.7); background: rgba(255,255,255,.9); }
.nav-wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 26px; }
.brand { display: inline-flex; align-items: center; gap: 9px; font-size: 17px; font-weight: 800; letter-spacing: -.06em; }
.brand>span>span { color: var(--blue); }
.logo { width: 32px; height: 32px; object-fit: contain; }
.main-nav { display: flex; align-items: center; gap: 28px; margin-left: auto; }
.main-nav a, .login-link { color: #536178; font-size: 12px; font-weight: 700; transition: color .2s ease; }
.main-nav a:hover, .login-link:hover { color: var(--blue); }
.nav-actions { display: flex; align-items: center; gap: 18px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 0 18px; border: 1px solid var(--blue); border-radius: 10px; background: var(--blue); color: white; font-size: 12px; font-weight: 800; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.button:hover { background: var(--blue-dark); box-shadow: 0 12px 22px rgba(0,98,255,.18); transform: translateY(-1px); }
.button-sm { min-height: 38px; padding: 0 15px; font-size: 11px; }
.arrow { width: 17px; height: 17px; }
.language-menu { position: relative; }
.language-menu summary { display: flex; align-items: center; gap: 6px; color: #536178; cursor: pointer; font-size: 11px; font-weight: 800; list-style: none; }
.language-menu summary::-webkit-details-marker { display: none; }
.chevron { width: 13px; height: 13px; }
.language-dropdown { position: absolute; z-index: 20; top: calc(100% + 14px); right: -10px; width: 174px; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: 0 18px 36px rgba(15,33,61,.12); }
.language-dropdown a { display: flex; align-items: center; gap: 9px; padding: 9px; border-radius: 8px; font-size: 11px; }
.language-dropdown a:hover, .language-dropdown .active { background: #f1f6ff; }
.language-dropdown strong { display: block; font-size: 11px; }
.language-dropdown small { display: block; color: var(--muted); font-size: 9px; margin-top: 1px; }
.language-dropdown .check { width: 16px; height: 16px; margin-left: auto; color: var(--blue); }

.hero { padding: 52px 0 54px; background: linear-gradient(180deg, #fff 0%, #f8faff 100%); }
.hero-surface { position: relative; padding: 70px 0 26px; overflow: hidden; }
.hero-surface::before { content: ""; position: absolute; z-index: 0; top: -120px; right: -170px; width: 560px; height: 560px; border-radius: 50%; background: radial-gradient(circle, rgba(20,184,166,.11), rgba(0,98,255,.045) 42%, transparent 70%); pointer-events: none; }
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 5fr 7fr; align-items: center; gap: 52px; }
.hero-copy { max-width: 475px; }
.eyebrow-pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid #dce8fb; border-radius: 99px; background: #f8fbff; color: #3564ad; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.eyebrow-pill span { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 4px rgba(20,184,166,.11); }
.hero h1 { max-width: 520px; margin: 24px 0 20px; color: var(--ink); font-size: clamp(48px, 5vw, 74px); font-weight: 800; letter-spacing: -.07em; line-height: .99; }
.hero h1 em { color: var(--blue); font-style: normal; }
.hero-copy>p { margin: 0; color: var(--ink-soft); font-size: 15px; line-height: 1.75; }
.hero-actions { display: flex; gap: 11px; margin-top: 30px; }
.button-ghost { border-color: #dbe4f1; background: transparent; color: #30425e; }
.button-ghost:hover { background: #f0f5fc; color: var(--blue); box-shadow: none; }
.hero-note { display: flex; align-items: center; gap: 7px; margin-top: 17px; color: var(--muted); font-size: 10px; }
.hero-note .check { width: 15px; height: 15px; color: var(--teal); }
.hero-footer { display: flex; gap: 24px; margin-left: 0; padding-top: 27px; color: #667890; font-size: 10px; font-weight: 700; }
.hero-footer span { display: flex; align-items: center; gap: 7px; }
.hero-footer i { width: 5px; height: 5px; border-radius: 50%; background: var(--teal); }

.dashboard-wrap { position: relative; margin: 0 -4px -16px 0; }
.dashboard { overflow: hidden; border: 1px solid #dfe7f1; border-radius: 16px; background: #fff; box-shadow: 0 26px 52px rgba(18,37,65,.14), 0 2px 4px rgba(18,37,65,.04); }
.command-center { display: grid; grid-template-columns: 58px minmax(0, 1fr); min-height: 464px; }
.app-rail { display: flex; flex-direction: column; align-items: center; padding: 14px 0; border-right: 1px solid #e8edf5; background: #fbfcfe; }
.rail-mark .logo { width: 23px; height: 23px; }
.rail-nav { display: grid; gap: 10px; margin-top: 35px; }
.rail-item { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; color: #8a98ad; }
.rail-item svg { width: 16px; height: 16px; }
.rail-item.active { background: #eaf2ff; color: var(--blue); }
.rail-settings { margin-top: auto; }
.workspace { min-width: 0; background: #fff; }
.workspace-top { display: flex; align-items: center; justify-content: space-between; height: 62px; padding: 0 20px; border-bottom: 1px solid #edf0f5; }
.workspace-top p { margin: 0 0 3px; color: #91a0b5; font-size: 8px; font-weight: 800; letter-spacing: .08em; }
.workspace-top strong { display: flex; align-items: center; gap: 2px; color: #33435b; font-size: 11px; }
.workspace-top strong .chevron { width: 12px; color: #99a5b7; }
.workspace-account { display: flex; align-items: center; gap: 11px; }
.credit-balance { display: inline-flex; align-items: center; gap: 5px; color: #5c6b82; font-size: 10px; font-weight: 800; }
.credit-balance svg { width: 15px; height: 15px; color: var(--teal); }
.dash-avatar { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, #d4e5ff, #b2f0e5); color: #1d4f88; font-size: 9px; font-weight: 800; }
.workspace-content { padding: 24px 20px 20px; background: #fbfcfe; }
.dashboard-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; }
.dashboard-heading p { margin: 0 0 5px; color: #74839a; font-size: 10px; }
.dashboard-heading h3 { margin: 0; color: #172238; font-size: 21px; line-height: 1; letter-spacing: -.045em; }
.campaign-button { display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 0 10px; border: 0; border-radius: 8px; background: var(--blue); color: #fff; cursor: pointer; font-size: 9px; font-weight: 800; }
.campaign-button span { font-size: 14px; font-weight: 400; line-height: 1; }
.metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 20px; }
.metric { min-width: 0; padding: 12px; border: 1px solid #e8edf4; border-radius: 10px; background: #fff; }
.metric>span { display: block; overflow: hidden; color: #7b8aa0; font-size: 8px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.metric strong { display: block; margin-top: 7px; color: #1b293e; font-size: 20px; letter-spacing: -.055em; font-variant-numeric: tabular-nums; }
.metric small { display: flex; align-items: center; gap: 3px; margin-top: 3px; color: #75849a; font-size: 8px; font-weight: 700; white-space: nowrap; }
.metric small svg { width: 11px; height: 11px; }
.metric-blue small { color: var(--blue); }.metric-teal small { color: #0b9c8d; }.metric-ink small { color: #55667e; }
.dashboard-data { display: grid; grid-template-columns: 1.14fr .86fr; gap: 10px; margin-top: 10px; }
.performance-panel, .orders-panel { min-width: 0; padding: 13px; border: 1px solid #e8edf4; border-radius: 10px; background: #fff; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #203049; font-size: 9px; }
.panel-heading strong { font-size: 10px; }.panel-heading>span { display: flex; align-items: center; color: #8491a5; font-size: 8px; font-weight: 700; white-space: nowrap; }
.panel-heading .chevron { width: 11px; height: 11px; }
.chart-wrap { display: grid; grid-template-columns: 21px 1fr; height: 112px; margin-top: 7px; }
.chart-scale { display: flex; flex-direction: column; justify-content: space-between; padding: 3px 0 0; color: #a7b2c2; font-size: 7px; }
.performance-chart { width: 100%; height: 100%; overflow: visible; }
.chart-grid { fill: none; stroke: #edf1f6; stroke-width: 1; }.chart-area { fill: url(#chart-fill); }.chart-line { fill: none; stroke: var(--blue); stroke-width: 2.2; stroke-linecap: round; }.chart-dot { fill: #fff; stroke: var(--blue); stroke-width: 2.4; }
.chart-days { display: flex; justify-content: space-between; padding: 2px 4px 0 22px; color: #9ba8ba; font-size: 7px; font-weight: 700; }
.orders-panel { display: flex; flex-direction: column; }
.view-all { color: var(--blue)!important; }.view-all .arrow { width: 11px; height: 11px; }
.order-row { display: grid; grid-template-columns: 25px minmax(0,1fr); column-gap: 8px; align-items: center; padding: 12px 0 10px; border-bottom: 1px solid #edf1f5; }
.order-row:last-child { border-bottom: 0; padding-bottom: 0; }
.order-source { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 7px; }.order-source svg { width: 13px; height: 13px; }.order-source.facebook { background: #eaf2ff; color: #1877f2; }.order-source.tiktok { background: #f2f4f7; color: #151b28; }
.order-row>div { min-width: 0; }.order-row strong { display: block; overflow: hidden; color: #405069; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }.order-row small { display: block; margin-top: 3px; color: #9ba7b7; font-size: 7px; }
.status { grid-column: 2; display: flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 7px; font-weight: 800; }.status i { width: 5px; height: 5px; border-radius: 50%; }.status.processing { color: #158a7e; }.status.processing i { background: var(--teal); box-shadow: 0 0 0 3px rgba(20,184,166,.1); }.status.completed { color: #56708e; }.status.completed i { background: #98a8ba; }

.section { padding: 102px 0; }
.section-heading { max-width: 610px; margin-bottom: 42px; }.eyebrow { margin: 0 0 14px; color: var(--blue); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.section-heading h2, .pricing-layout h2, .reseller h2, .cta-box h2 { margin: 0; color: var(--ink); font-size: clamp(35px, 4vw, 53px); line-height: 1.03; letter-spacing: -.065em; }
.section-heading>p:last-child, .section-copy { margin: 16px 0 0; color: var(--ink-soft); font-size: 14px; line-height: 1.7; }
.service-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.service-card { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 396px; padding: 34px; overflow: hidden; border-radius: 16px; }.service-card.blue { background: linear-gradient(140deg, #eff6ff, #dfeefe); color: #152d55; }.service-card.ink { background: #0c1c36; color: #fff; }
.service-top { display: flex; align-items: center; justify-content: space-between; }.service-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(255,255,255,.78); color: var(--blue); }.service-icon svg { width: 21px; height: 21px; }.ink .service-icon { background: rgba(255,255,255,.1); color: #8bd6ff; }.service-top>span { color: #547096; font-size: 10px; font-weight: 800; letter-spacing: .09em; }.ink .service-top>span { color: #a8bbd2; }
.service-card h3 { max-width: 390px; margin: 70px 0 12px; font-size: 32px; line-height: 1.07; letter-spacing: -.055em; }.service-card p { max-width: 400px; margin: 0; color: #526889; font-size: 13px; line-height: 1.7; }.ink p { color: #bbcadc; }
.service-footer { position: relative; z-index: 1; display: flex; align-items: end; justify-content: space-between; gap: 18px; padding-top: 28px; }.service-footer strong { display: block; font-size: 22px; letter-spacing: -.05em; }.service-footer small { display: block; margin-top: 3px; color: #6d819e; font-size: 10px; }.ink .service-footer small { color: #b2c1d3; }.service-footer a { display: flex; align-items: center; gap: 7px; color: var(--blue); font-size: 11px; font-weight: 800; }.ink .service-footer a { color: #9fe6dd; }
.card-orbit { position: absolute; right: -84px; bottom: -115px; width: 310px; height: 310px; border: 1px solid rgba(0,98,255,.13); border-radius: 50%; }.ink .card-orbit { border-color: rgba(153,246,228,.19); }

.pricing-section { background: var(--canvas); }.pricing-layout { display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; gap: 120px; }.text-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; color: var(--blue); font-size: 12px; font-weight: 800; }.price-panel { padding: 12px 26px 20px; border: 1px solid #e0e7f0; border-radius: 16px; background: #fff; box-shadow: 0 16px 32px rgba(19,40,69,.05); }.price-label { display: block; padding: 14px 0; color: #8a98ad; font-size: 9px; font-weight: 800; letter-spacing: .08em; }.price-row { display: flex; align-items: center; justify-content: space-between; padding: 20px 0; border-top: 1px solid #ebeff4; }.price-row>div { display: flex; align-items: center; gap: 11px; color: #31445f; font-size: 13px; font-weight: 700; }.price-row svg { width: 18px; height: 18px; color: var(--blue); }.price-row strong { font-size: 18px; letter-spacing: -.04em; }.price-panel>p { margin: 5px 0 0; color: #8b98a9; font-size: 10px; }

.how-section { padding-top: 102px; }.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }.step { position: relative; padding: 10px 24px 20px 0; }.step>span { position: absolute; top: 3px; right: 0; color: #c9d8ea; font-size: 42px; font-weight: 800; letter-spacing: -.08em; }.step-icon { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 28px; border-radius: 13px; background: #f0f6ff; color: var(--blue); }.step-icon svg { width: 25px; height: 25px; }.step h3 { margin: 0 0 9px; font-size: 17px; letter-spacing: -.03em; }.step p { max-width: 250px; margin: 0; color: var(--ink-soft); font-size: 12px; line-height: 1.7; }

.reseller { display: grid; grid-template-columns: 1.04fr .96fr; align-items: center; gap: 64px; padding: 48px; border-radius: 18px; background: #0c1b34; color: white; }.code-visual { overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; background: #091629; }.code-bar { display: flex; align-items: center; gap: 5px; height: 35px; padding: 0 13px; border-bottom: 1px solid rgba(255,255,255,.09); }.code-bar span { width: 6px; height: 6px; border-radius: 50%; background: #46617f; }.code-bar small { margin-left: 6px; color: #8194ad; font-size: 9px; }.code-visual pre { margin: 0; padding: 23px; color: #d2dced; font: 11px/1.85 ui-monospace, SFMono-Regular, Menlo, monospace; }.code-visual pre>span { color: #73c6ff; }.code-visual b { color: #b3c9e8; font-weight: 500; }.code-visual i { color: #9ae9dd; font-style: normal; }.code-visual em { color: #f3ca7e; font-style: normal; }.api-success { display: flex; align-items: center; gap: 6px; padding: 12px 20px; border-top: 1px solid rgba(255,255,255,.09); color: #9fe6dd; font: 10px ui-monospace, monospace; }.api-success .check { width: 15px; height: 15px; }.reseller .eyebrow { color: #9fe6dd; }.reseller h2 { color: #fff; }.reseller-copy>p:not(.eyebrow) { margin: 17px 0 0; color: #b4c2d4; font-size: 13px; line-height: 1.75; }.reseller ul { display: grid; gap: 11px; padding: 0; margin: 25px 0; list-style: none; }.reseller li { display: flex; align-items: center; gap: 8px; color: #dbe6f5; font-size: 12px; }.reseller li .check { width: 17px; height: 17px; color: #9fe6dd; }.button-light { border-color: #fff; background: #fff; color: #15396e; }.button-light:hover { background: #dff7f2; color: #0d5f59; }

.cta-section { padding-top: 0; }.cta-box { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 42px; padding: 47px 54px; overflow: hidden; border-radius: 18px; background: linear-gradient(120deg, #073b96, #0062ff); color: #fff; }.cta-box h2 { max-width: 620px; color: #fff; font-size: clamp(30px, 3.4vw, 45px); }.cta-box p { margin: 12px 0 0; color: #cfe3ff; font-size: 13px; }.cta-actions { display: flex; flex: none; gap: 10px; }.button-white { border-color: #fff; background: #fff; color: #12469d; }.button-white:hover { background: #e9f6ff; color: #0a57d5; }.button-outline { border-color: rgba(255,255,255,.42); background: transparent; }.button-outline:hover { background: rgba(255,255,255,.11); }.cta-orb { position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,.1); pointer-events: none; }.cta-orb.one { right: 14%; bottom: -120px; width: 310px; height: 310px; }.cta-orb.two { top: -140px; right: -40px; width: 230px; height: 230px; }

footer { padding: 70px 0 22px; }.footer-grid { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 42px; padding-bottom: 52px; border-bottom: 1px solid var(--line); }.footer-grid p { max-width: 210px; margin: 15px 0 0; color: var(--muted); font-size: 11px; line-height: 1.7; }.footer-grid>div:not(:first-child) { display: grid; align-content: start; gap: 11px; }.footer-grid strong { margin-bottom: 4px; color: #475873; font-size: 10px; }.footer-grid a:not(.brand) { color: #7a899e; font-size: 11px; }.footer-grid a:not(.brand):hover { color: var(--blue); }.footer-bottom { display: flex; justify-content: space-between; padding-top: 20px; color: #9aa7b7; font-size: 10px; }.footer-bottom div { display: flex; gap: 11px; }.footer-bottom a.active { color: var(--blue); font-weight: 800; }

@media (max-width: 1000px) { .main-nav { display: none; }.hero-grid { grid-template-columns: 1fr; gap: 44px; }.hero-copy { max-width: 620px; }.dashboard-wrap { max-width: 700px; margin: 0; }.pricing-layout { gap: 48px; }.reseller { gap: 40px; padding: 38px; }.cta-box { align-items: start; flex-direction: column; }.hero-footer { padding-top: 23px; } }
@media (max-width: 700px) { .container { width: min(100% - 32px, 1180px); }.header { height: 68px; }.login-link, .nav-actions>.button { display: none; }.nav-actions { gap: 0; }.hero { padding: 28px 0 30px; }.hero-surface { padding: 37px 0 20px; }.hero h1 { font-size: 47px; }.hero-copy>p { font-size: 14px; }.hero-actions { flex-direction: column; }.hero-actions .button { width: 100%; }.hero-footer { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }.hero-footer span:last-child { grid-column: span 2; }.command-center { grid-template-columns: 1fr; min-height: 0; }.app-rail { display: none; }.workspace-top { padding: 0 15px; }.workspace-content { padding: 18px 14px 14px; }.dashboard-heading h3 { font-size: 18px; }.campaign-button { padding: 0 8px; font-size: 8px; }.metric-grid { gap: 6px; }.metric { padding: 9px; }.metric strong { font-size: 17px; }.metric small { overflow: hidden; text-overflow: ellipsis; }.dashboard-data { grid-template-columns: 1fr; gap: 7px; }.orders-panel { display: none; }.section { padding: 74px 0; }.section-heading { margin-bottom: 30px; }.section-heading h2, .pricing-layout h2, .reseller h2 { font-size: 37px; }.service-grid, .pricing-layout, .steps, .reseller { grid-template-columns: 1fr; }.service-card { min-height: 355px; padding: 26px; }.service-card h3 { margin-top: 52px; font-size: 29px; }.pricing-layout { gap: 30px; }.steps { gap: 26px; }.step { padding-right: 40px; }.reseller { gap: 30px; padding: 28px 22px; border-radius: 16px; }.cta-box { padding: 34px 24px; border-radius: 16px; }.cta-actions { width: 100%; flex-direction: column; }.cta-actions .button { width: 100%; }.footer-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; }.footer-grid>div:first-child { grid-column: span 2; }.footer-bottom { align-items: center; gap: 12px; } }

/* FLYG-2 product-first additions */
body { font-family: "Be Vietnam Pro", "Noto Sans Thai", sans-serif; }
.header { position: sticky; top: 0; z-index: 30; backdrop-filter: blur(12px); }
.metrics { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff; }
.metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr) 1.5fr; align-items: center; min-height: 132px; }
.metrics-grid>div { display: grid; gap: 5px; padding-left: 26px; border-left: 1px solid var(--line); }
.metrics-grid>div:first-child { padding-left: 0; border-left: 0; }
.metrics-grid strong { color: #0f172a; font-size: 31px; letter-spacing: -.08em; }
.metrics-grid span, .metrics-grid p { color: var(--muted); font-size: 11px; font-weight: 600; }
.metrics-grid p { margin: 0; padding-left: 26px; border-left: 1px solid var(--line); line-height: 1.55; }
.panel-preview { display: grid; grid-template-columns: 58px minmax(0,1fr); min-height: 445px; }
.panel-workspace { min-width: 0; background: #f8fafc; }
.order-preview { padding: 25px 21px 20px; }
.order-preview-head { display: flex; justify-content: space-between; align-items: start; margin-bottom: 20px; }
.order-preview-head p { margin: 0 0 5px; color: #8d9aad; font-size: 8px; font-weight: 700; letter-spacing: .08em; }
.order-preview-head h3 { margin: 0; color: #16243b; font-size: 20px; letter-spacing: -.05em; }
.preview-step { padding: 6px 8px; border-radius: 6px; background: #eaf2ff; color: var(--blue); font-size: 9px; font-weight: 700; }
.service-choice { display: grid; grid-template-columns: 30px minmax(0,1fr) 17px; align-items: center; gap: 10px; padding: 13px; margin-top: 9px; border: 1px solid #e4eaf2; border-radius: 10px; background: #fff; }
.service-choice .check { width: 17px; height: 17px; color: var(--blue); }.choice-arrow { color: #95a4b7; }.choice-arrow .chevron { width: 16px; height: 16px; transform: rotate(-90deg); }
.service-choice strong { display: block; overflow: hidden; color: #36455c; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.service-choice small { display: block; margin-top: 3px; color: #8b98aa; font-size: 8px; }
.preview-field { display: grid; gap: 6px; margin-top: 15px; color: #78879b; font-size: 9px; font-weight: 700; }.preview-field i { padding: 11px 12px; border: 1px solid #e4eaf2; border-radius: 8px; background: #fff; color: #a5b0be; font-size: 9px; font-style: normal; font-weight: 400; }
.preview-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 18px; }.preview-footer span { color: #8290a2; font-size: 8px; }.preview-footer button { display: inline-flex; align-items: center; gap: 6px; min-height: 31px; padding: 0 10px; border: 0; border-radius: 8px; background: var(--blue); color: white; font-size: 9px; font-weight: 700; }.preview-footer .arrow { width: 13px; }
.why-section { background: #f8fafc; }.why-layout { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 100px; }.why-proof { padding: 22px; border: 1px solid #dfe8f1; border-radius: 14px; background: #fff; }.proof-header { display: grid; grid-template-columns: 8px 1fr; column-gap: 8px; align-items: center; }.proof-header .pulse { width: 7px; height: 7px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 0 4px rgba(239,68,68,.1); }.proof-header strong { color: #28384f; font-size: 11px; }.proof-header small { grid-column: 2; margin-top: 2px; color: #8a98aa; font-size: 9px; }.proof-progress { margin: 26px 0 20px; }.proof-progress>div { display: flex; justify-content: space-between; color: #607188; font-size: 10px; }.proof-progress strong { color: #0f172a; }.proof-progress>i { display: block; height: 7px; margin-top: 9px; overflow: hidden; border-radius: 99px; background: #ebf0f5; }.proof-progress b { display: block; width: 72%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#2563eb,#14b8a6); }.proof-list { display: grid; grid-template-columns: 1fr 1fr; gap: 13px 16px; padding-top: 18px; border-top: 1px solid #edf1f5; }.proof-list span { display: flex; align-items: center; gap: 6px; color: #5f7087; font-size: 9px; }.proof-list .check { width: 15px; color: #14b8a6; }
.faq-layout { display: grid; grid-template-columns: .75fr 1.25fr; gap: 96px; }.faq-list { border-top: 1px solid var(--line); }.faq-list details { border-bottom: 1px solid var(--line); }.faq-list summary { display: flex; justify-content: space-between; align-items: center; padding: 19px 0; color: #23334a; cursor: pointer; font-size: 13px; font-weight: 700; list-style: none; }.faq-list summary::-webkit-details-marker { display: none; }.faq-list summary .chevron { color: #8291a5; transition: transform .2s ease; }.faq-list details[open] summary .chevron { transform: rotate(180deg); }.faq-list p { max-width: 570px; margin: -3px 0 18px; color: #65758b; font-size: 12px; line-height: 1.7; }
.product-hero { padding: 104px 0 82px; background: #f8fafc; }.product-hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 96px; }.product-hero h1, .reseller-page h1, .legal-copy h1, .not-found h1 { margin: 0; color: #0f172a; font-size: clamp(43px,5vw,68px); line-height: 1; letter-spacing: -.075em; }.product-hero p:not(.eyebrow), .reseller-page p:not(.eyebrow), .not-found p { max-width: 520px; margin: 20px 0 28px; color: #526278; font-size: 15px; line-height: 1.75; }.product-spec { padding: 34px; border: 1px solid #dbe6f1; border-radius: 16px; background: #fff; box-shadow: 0 18px 40px rgba(30,55,84,.07); }.product-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: #eaf2ff; color: #2563eb; }.product-icon svg { width: 22px; height: 22px; }.product-spec>strong { display: block; margin-top: 64px; color: #0f172a; font-size: 52px; letter-spacing: -.09em; }.product-spec>span { color: #617188; font-size: 12px; }.product-spec hr { margin: 26px 0 16px; border: 0; border-top: 1px solid #e6edf4; }.product-spec small { color: #718198; font-size: 11px; }.use-grid { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--line); }.use-grid article { padding: 22px 25px 22px 0; color: #384a63; font-size: 14px; font-weight: 700; }.use-grid article+article { padding-left: 25px; border-left: 1px solid var(--line); }.calculator { display: grid; grid-template-columns: 1fr 1fr; gap: 65px; margin-top: 64px; padding: 35px; border-radius: 16px; background: #0b1220; color: white; }.calculator h2 { margin: 0; font-size: 28px; letter-spacing: -.05em; }.calculator p:not(.eyebrow) { margin: 11px 0 0; color: #b9c7d8; font-size: 12px; line-height: 1.7; }.calculator .eyebrow { color: #99f6e4; }.calculator form { display: grid; grid-template-columns: 1fr 1fr auto; align-items: end; gap: 10px; }.calculator label { display: grid; gap: 7px; color: #bdcad9; font-size: 10px; }.calculator input, .calculator select { width: 100%; min-height: 38px; padding: 0 9px; border: 1px solid #2d405a; border-radius: 8px; outline: 0; background: #111d30; color: #fff; }.calculator .button { min-height: 38px; }
.pricing-page { background: #f8fafc; min-height: 70vh; }.currency-tabs { display: inline-flex; margin-bottom: 22px; padding: 3px; border: 1px solid #dfe7f0; border-radius: 9px; background: #fff; }.currency-tabs a { padding: 8px 12px; border-radius: 6px; color: #718096; font-size: 11px; font-weight: 700; }.currency-tabs a.active { background: #eaf2ff; color: #2563eb; }.pricing-table { border: 1px solid #dfe7f0; border-radius: 14px; background: #fff; overflow: hidden; }.pricing-row { display: grid; grid-template-columns: 1.5fr 1fr .8fr auto; align-items: center; gap: 16px; min-height: 72px; padding: 0 23px; border-top: 1px solid #ebeff4; }.pricing-row:first-child { border-top: 0; }.pricing-row>span:first-child { display: flex; align-items: center; gap: 9px; color: #34475f; font-size: 12px; font-weight: 700; }.pricing-row svg { width: 18px; color: #2563eb; }.pricing-row:not(.pricing-heading)>span:nth-child(2) { color: #718096; font-size: 11px; }.pricing-row strong { font-size: 14px; letter-spacing: -.02em; }.pricing-row a { display: flex; align-items: center; gap: 6px; color: #2563eb; font-size: 11px; font-weight: 700; }.pricing-row .arrow { width: 15px; }.pricing-heading { min-height: 43px; color: #8a98ab; font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }.price-source { margin: 13px 0 0; color: #8090a5; font-size: 10px; }
.reseller-page { padding: 104px 0; background: #0b1220; color: #fff; }.reseller-page-grid { display: grid; grid-template-columns: 1fr .9fr; align-items: center; gap: 95px; }.reseller-page h1 { color: #fff; }.reseller-page p:not(.eyebrow) { color: #bdcada; }.reseller-page .eyebrow { color: #99f6e4; }.api-snippet { overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; background: #111d30; }.api-snippet small { display: block; padding: 13px 16px; border-bottom: 1px solid rgba(255,255,255,.08); color: #92a4bd; font: 10px ui-monospace, monospace; }.api-snippet pre { margin: 0; padding: 27px 20px; color: #d4e0ee; font: 12px/1.9 ui-monospace, monospace; }.api-snippet>span { display: flex; align-items: center; gap: 6px; padding: 12px 16px; border-top: 1px solid rgba(255,255,255,.08); color: #99f6e4; font: 10px ui-monospace, monospace; }.api-snippet .check { width: 14px; }.api-methods { display: flex; flex-wrap: wrap; gap: 9px; }.api-methods span { padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; color: #3f536f; font: 11px ui-monospace, monospace; }
.legal-page { background: #f8fafc; }.legal-copy { max-width: 760px; }.legal-copy h1 { margin-bottom: 13px; }.legal-copy>p { color: #64748b; font-size: 13px; line-height: 1.8; }.legal-copy h2 { margin: 38px 0 10px; color: #18263b; font-size: 20px; letter-spacing: -.04em; }.not-found { text-align: center; }.not-found p { margin-inline: auto; }.not-found .hero-actions { justify-content: center; }
@media (prefers-color-scheme:dark) and (scripting:none) { body { background: #0b1220; }.site-shell { background: #0b1220; }.header { border-color: rgba(148,163,184,.18); background: rgba(11,18,32,.84); }.brand, .hero h1, .section-heading h2, .pricing-layout h2, .reseller h2, .metrics-grid strong { color: #f8fafc; }.main-nav a, .login-link, .hero-copy>p, .section-heading>p:last-child, .section-copy, .metrics-grid span, .metrics-grid p { color: #aebbd0; }.hero { background: #0b1220; }.metrics { border-color: rgba(148,163,184,.16); background: #0f1929; }.metrics-grid>div, .metrics-grid p { border-color: rgba(148,163,184,.16); }.why-section, .pricing-section { background: #101b2d; }.why-proof, .price-panel, .service-card.blue, .pricing-table, .product-spec, .service-choice, .preview-field i { border-color: rgba(148,163,184,.16); background: #111d30; }.why-proof, .proof-header strong, .product-spec>strong, .pricing-row>span:first-child, .pricing-row strong { color: #edf5ff; }.proof-list span, .proof-header small, .product-spec>span, .product-spec small, .pricing-row:not(.pricing-heading)>span:nth-child(2), .price-source { color: #aab9cc; }.faq-list, .faq-list details, .use-grid, .use-grid article+article { border-color: rgba(148,163,184,.17); }.faq-list summary, .step h3, .use-grid article { color: #edf5ff; }.faq-list p, .step p { color: #aebbd0; }.workspace-top, .panel-workspace { background: #0e1828; border-color: rgba(148,163,184,.16); }.order-preview { background: #111d30; }.order-preview-head h3, .service-choice strong { color: #eef5ff; }.pricing-page, .product-hero, .legal-page { background: #0b1220; }.product-hero h1, .legal-copy h1, .legal-copy h2 { color: #f8fafc; }.product-hero p:not(.eyebrow), .legal-copy>p { color: #aebbd0; } }
@media (max-width: 700px) { .metrics-grid { grid-template-columns: repeat(3,1fr); min-height: 112px; }.metrics-grid>div { padding-left: 12px; }.metrics-grid>div:first-child { padding-left: 0; }.metrics-grid strong { font-size: 25px; }.metrics-grid span { font-size: 9px; }.metrics-grid p { display: none; }.panel-preview { grid-template-columns: 1fr; }.panel-preview .app-rail { display: none; }.why-layout, .faq-layout, .product-hero-grid, .reseller-page-grid, .calculator { grid-template-columns: 1fr; gap: 32px; }.why-proof { padding: 18px; }.proof-list { grid-template-columns: 1fr; }.product-hero { padding: 70px 0 58px; }.product-spec>strong { margin-top: 42px; }.use-grid { grid-template-columns: 1fr; }.use-grid article+article { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }.calculator { padding: 25px 20px; }.calculator form { grid-template-columns: 1fr; }.pricing-row { grid-template-columns: 1.3fr .8fr; gap: 8px; min-height: 0; padding: 15px; }.pricing-row>span:nth-child(2) { grid-column: 1; }.pricing-row strong { grid-column: 2; grid-row: 1; }.pricing-row a { grid-column: 2; grid-row: 2; justify-content: end; }.pricing-heading { display: none; }.reseller-page { padding: 72px 0; }.api-snippet pre { font-size: 10px; }.legal-copy h1 { font-size: 42px; } }

/* Refinements kept separate so the product proof contains no invented metrics. */
.proof-list { margin-top: 25px; }
.calculator-total { display: block; margin-top: 18px; color: #99f6e4; font-size: 23px; font-weight: 700; letter-spacing: -.045em; }

/* Brand-led hero: the page opens like the Ongmatmedia product, not a generic SaaS template. */
.hero {
  position: relative;
  overflow: hidden;
  padding: 0;
  isolation: isolate;
  background:
    radial-gradient(circle at 81% 18%, rgba(57, 211, 190, .27), transparent 22%),
    radial-gradient(circle at 57% 89%, rgba(37, 99, 235, .44), transparent 31%),
    linear-gradient(122deg, #07172f 0%, #0b2e59 52%, #0d5971 100%);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .32;
  background-image: linear-gradient(rgba(184, 238, 246, .13) 1px, transparent 1px), linear-gradient(90deg, rgba(184, 238, 246, .13) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(to bottom, #000, transparent 86%);
}
.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -315px;
  right: -145px;
  width: 770px;
  height: 770px;
  border: 1px solid rgba(162, 247, 234, .32);
  border-radius: 50%;
  box-shadow: 0 0 0 86px rgba(93, 212, 222, .04), 0 0 0 172px rgba(93, 212, 222, .035), 0 0 0 258px rgba(93, 212, 222, .025);
}
.hero-surface { min-height: 640px; padding: 98px 0 29px; }
.hero-surface::before, .surface-grid { display: none; }
.hero-grid { gap: 58px; }
.hero-copy { position: relative; z-index: 2; max-width: 515px; }
.eyebrow-pill { border-color: rgba(171, 242, 231, .24); background: rgba(238, 255, 252, .09); color: #b9fbf2; }
.eyebrow-pill span { background: #45e2ca; box-shadow: 0 0 0 5px rgba(69, 226, 202, .14); }
.hero h1 { max-width: 610px; margin: 27px 0 22px; color: #f8fcff; font-size: clamp(53px, 5.2vw, 78px); letter-spacing: -.078em; line-height: .94; }
.hero h1 em { background: linear-gradient(112deg, #8deee1, #8ac7ff 55%, #fff 105%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-copy>p { max-width: 455px; color: #b9d0e4; font-size: 15px; line-height: 1.8; }
.hero-actions { margin-top: 33px; }
.hero .button { border-color: #5be4d3; background: #5be4d3; color: #06304b; box-shadow: 0 12px 34px rgba(53, 226, 206, .19); }
.hero .button:hover { background: #9af7e9; box-shadow: 0 14px 40px rgba(53, 226, 206, .3); }
.hero .button-ghost { border-color: rgba(234, 248, 255, .24); background: rgba(255, 255, 255, .07); color: #e6f4fa; }
.hero .button-ghost:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.hero-note { color: #a6c5d9; }.hero-note .check { color: #65e7d6; }
.hero-footer { position: relative; gap: 29px; margin-top: 43px; padding-top: 18px; color: #bbd3e4; }.hero-footer::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: linear-gradient(90deg, rgba(171, 242, 231, .3), transparent); }.hero-footer i { width: 6px; height: 6px; background: #61e5d2; box-shadow: 0 0 0 4px rgba(97, 229, 210, .11); }
.dashboard-wrap { z-index: 2; margin: -13px -20px -20px 0; perspective: 1400px; }
.panel-preview { position: relative; min-height: 468px; overflow: visible; border-color: rgba(255, 255, 255, .68); border-radius: 20px; box-shadow: 0 42px 78px rgba(0, 8, 25, .36), 0 10px 28px rgba(73, 224, 207, .12); transform: rotateY(-3deg) rotateX(1.5deg); transform-origin: center right; }
.panel-preview::before { content: ""; position: absolute; z-index: 2; inset: 0; border: 1px solid rgba(126, 243, 231, .3); border-radius: inherit; pointer-events: none; }
.panel-preview .app-rail { border-color: #e7edf4; background: linear-gradient(180deg, #fff, #eff9fa); }.panel-workspace { background: linear-gradient(136deg, #fbfdff, #f2fafb); }.order-preview { padding: 29px 25px 24px; }.service-choice { padding: 15px; border-color: #e3ebf2; box-shadow: 0 5px 15px rgba(25, 59, 88, .025); }.preview-field i { padding: 12px; }.preview-footer button { background: #0969e8; }
.panel-signal { position: absolute; z-index: 5; display: inline-flex; align-items: center; gap: 7px; padding: 9px 11px; border: 1px solid rgba(203, 255, 248, .35); border-radius: 999px; background: rgba(5, 26, 50, .74); box-shadow: 0 16px 32px rgba(0, 7, 22, .25); color: #dcfffa; font-size: 9px; font-weight: 700; letter-spacing: .02em; backdrop-filter: blur(12px); }
.panel-signal i { width: 7px; height: 7px; border-radius: 50%; background: #52dfc9; box-shadow: 0 0 0 4px rgba(82, 223, 201, .13); }.signal-top { top: 26px; right: -22px; }.signal-bottom { bottom: 48px; left: -23px; }
.metrics { position: relative; z-index: 3; border: 0; background: #fff; box-shadow: 0 -1px 0 rgba(15, 34, 60, .06); }.metrics-grid { min-height: 114px; }.metrics-grid strong { color: #1c3655; }
@media (max-width: 1000px) { .hero-surface { min-height: 0; padding-top: 72px; }.dashboard-wrap { max-width: 680px; margin: 8px 0 0; }.panel-preview { transform: none; }.signal-top { right: 14px; }.signal-bottom { left: 14px; } }
@media (max-width: 700px) { .hero::after { right: -370px; }.hero-surface { padding: 60px 0 24px; }.hero h1 { font-size: 51px; line-height: .97; }.hero-copy>p { font-size: 14px; }.hero-footer { margin-top: 30px; }.dashboard-wrap { margin-top: 36px; }.panel-preview { min-height: 0; }.panel-signal { font-size: 8px; }.signal-top { top: -13px; right: 10px; }.signal-bottom { bottom: -13px; left: 10px; }.order-preview { padding: 25px 17px 20px; } }

/* Long-form landing rhythm, staggered reveal, and restrained interaction system. */
html.js .reveal,
html.js .reveal-item { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.22, 1, .36, 1), transform .8s cubic-bezier(.22, 1, .36, 1); }
html.js .reveal.is-visible,
html.js .reveal-item.is-visible { opacity: 1; transform: translateY(0); }
html.js .reveal-item:nth-child(2) { transition-delay: .1s; }
html.js .reveal-item:nth-child(3) { transition-delay: .2s; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto!important; animation-duration: .01ms!important; animation-iteration-count: 1!important; transition-duration: .01ms!important; } }

.header { height: 82px; border-bottom-color: rgba(222, 232, 243, .72); background: rgba(255, 255, 255, .82); box-shadow: 0 1px 0 rgba(14, 37, 65, .025); }
.brand { letter-spacing: -.065em; }.main-nav { gap: 31px; }.main-nav a { position: relative; padding: 9px 0; }.main-nav a::after { content: ""; position: absolute; bottom: 3px; left: 0; width: 100%; height: 1.5px; transform: scaleX(0); transform-origin: right; border-radius: 99px; background: linear-gradient(90deg, #2563eb, #14b8a6); transition: transform .28s ease; }.main-nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.button { transition: transform .25s cubic-bezier(.22, 1, .36, 1), box-shadow .25s ease, background .25s ease, border-color .25s ease; }.button:hover { transform: translateY(-2px); }.button:active { transform: translateY(0) scale(.98); }

.services-section { position: relative; padding: 160px 0 172px; overflow: hidden; background: linear-gradient(180deg, #fff 0%, #fbfdff 100%); }.services-section::before { content: ""; position: absolute; width: 590px; height: 590px; top: -285px; right: -160px; border-radius: 50%; background: radial-gradient(circle, rgba(20, 184, 166, .09), transparent 68%); pointer-events: none; }.services-section .section-heading { max-width: 685px; margin-bottom: 58px; }.services-section .section-heading h2 { font-size: clamp(41px, 4.5vw, 62px); }.service-grid { position: relative; gap: 22px; }.service-card { min-height: 470px; padding: 40px; border: 1px solid transparent; border-radius: 22px; box-shadow: 0 19px 45px rgba(21, 48, 82, .055); transition: transform .45s cubic-bezier(.22, 1, .36, 1), box-shadow .45s ease, border-color .45s ease; }.service-card::before { content: ""; position: absolute; inset: 0; border: 1px solid rgba(255, 255, 255, .45); border-radius: inherit; pointer-events: none; }.service-card:hover { z-index: 2; transform: translateY(-9px); box-shadow: 0 34px 70px rgba(20, 54, 88, .14); }.service-card.blue { background: linear-gradient(135deg, #edf6ff 0%, #dceefe 70%, #d8f5f0 140%); }.service-card.ink { background: radial-gradient(circle at 84% 8%, rgba(54, 215, 194, .18), transparent 26%), linear-gradient(135deg, #071b36, #0d315a); }.service-card h3 { margin-top: 98px; font-size: clamp(31px, 3vw, 39px); }.service-footer { padding-top: 38px; }.service-footer a { transition: gap .25s ease; }.service-card:hover .service-footer a { gap: 12px; }.card-orbit { transition: transform .65s cubic-bezier(.22, 1, .36, 1); }.service-card:hover .card-orbit { transform: scale(1.13) translate(-12px, -12px); }

.how-section { position: relative; padding: 154px 0 166px; overflow: hidden; background: #f7fafc; }.how-section::before { content: ""; position: absolute; top: 110px; right: -8%; width: 46%; height: 1px; background: linear-gradient(90deg, transparent, rgba(37, 99, 235, .25), transparent); }.how-section .section-heading { margin-bottom: 67px; }.steps { gap: 0; }.step { min-height: 260px; padding: 22px 42px 30px 0; }.step+ .step { padding-left: 42px; border-left: 1px solid #dce7ee; }.step>span { top: -17px; color: rgba(37, 99, 235, .11); font-size: 65px; transition: color .3s ease; }.step:hover>span { color: rgba(20, 184, 166, .23); }.step-icon { width: 70px; height: 70px; border: 1px solid rgba(37, 99, 235, .08); border-radius: 18px; box-shadow: 0 12px 25px rgba(37, 99, 235, .07); transition: transform .35s cubic-bezier(.22, 1, .36, 1), background .35s ease; }.step:hover .step-icon { transform: translateY(-5px) rotate(-4deg); background: #dff6f2; }.step h3 { font-size: 19px; }.step p { max-width: 290px; font-size: 13px; }

.why-section { position: relative; padding: 168px 0; overflow: hidden; background: #fff; }.why-section::before { content: ""; position: absolute; bottom: -270px; left: -190px; width: 620px; height: 620px; border-radius: 50%; background: radial-gradient(circle, rgba(37, 99, 235, .08), transparent 68%); }.why-layout { position: relative; gap: 130px; }.why-layout>div:first-child h2 { max-width: 520px; font-size: clamp(39px, 4vw, 57px); line-height: 1.05; letter-spacing: -.068em; }.why-proof { position: relative; padding: 31px; border-color: #dce8ef; border-radius: 20px; box-shadow: 0 24px 50px rgba(22, 52, 84, .07); }.why-proof::after { content: ""; position: absolute; right: 24px; top: 23px; width: 70px; height: 70px; border-top: 1px solid rgba(20, 184, 166, .32); border-right: 1px solid rgba(20, 184, 166, .32); border-radius: 0 16px 0 0; }.proof-header strong { font-size: 13px; }.proof-header small { font-size: 10px; }.proof-list { gap: 17px 20px; margin-top: 34px; padding-top: 23px; }.proof-list span { font-size: 10px; }

.reseller-section { padding: 132px 0; background: #f8fafc; }.reseller { position: relative; gap: 78px; padding: 67px; overflow: hidden; border: 1px solid rgba(132, 172, 208, .14); border-radius: 28px; background: radial-gradient(circle at 88% 3%, rgba(48, 221, 200, .16), transparent 26%), linear-gradient(135deg, #08192f, #0c3052); box-shadow: 0 32px 74px rgba(12, 31, 58, .2); }.reseller::before { content: ""; position: absolute; inset: auto -145px -250px auto; width: 560px; height: 560px; border: 1px solid rgba(149, 246, 234, .13); border-radius: 50%; box-shadow: 0 0 0 60px rgba(149, 246, 234, .025), 0 0 0 120px rgba(149, 246, 234, .018); }.code-visual, .reseller-copy { position: relative; z-index: 1; }.code-visual { border-radius: 16px; box-shadow: 0 18px 42px rgba(0, 5, 15, .25); transition: transform .45s cubic-bezier(.22, 1, .36, 1); }.reseller:hover .code-visual { transform: translateY(-5px); }.reseller-copy h2 { font-size: clamp(36px, 3.6vw, 53px); }.reseller-copy>p:not(.eyebrow) { font-size: 14px; }

.pricing-section { position: relative; padding: 164px 0; overflow: hidden; background: linear-gradient(180deg, #eef8f8 0%, #f7fbff 100%); }.pricing-section::before { content: ""; position: absolute; top: 0; left: 14%; width: 1px; height: 100%; background: linear-gradient(transparent, rgba(37, 99, 235, .1), transparent); }.pricing-layout { position: relative; gap: 145px; }.pricing-layout h2 { max-width: 490px; font-size: clamp(39px, 4vw, 57px); }.price-panel { padding: 14px 31px 25px; border: 0; border-radius: 20px; box-shadow: 0 24px 55px rgba(25, 62, 90, .11); transition: transform .4s cubic-bezier(.22, 1, .36, 1), box-shadow .4s ease; }.price-panel:hover { transform: translateY(-6px); box-shadow: 0 30px 65px rgba(25, 62, 90, .15); }.price-row { padding: 24px 0; }.price-row strong { color: #12365e; font-size: 21px; }.text-link { transition: gap .25s ease; }.text-link:hover { gap: 13px; }

.faq-section { padding: 166px 0 158px; background: #fff; }.faq-layout { gap: 118px; }.faq-layout h2 { max-width: 390px; font-size: clamp(39px, 4vw, 56px); line-height: 1.04; letter-spacing: -.065em; }.faq-list { border-top-color: #dce7ee; }.faq-list details { transition: background .25s ease, padding .25s ease; }.faq-list details[open] { margin: 0 -19px; padding: 0 19px; border-radius: 12px; background: #f5faff; }.faq-list summary { padding: 22px 0; }.faq-list details[open] summary { color: #1556b8; }

.cta-section { padding: 0 0 150px; background: #fff; }.cta-box { min-height: 284px; padding: 62px 68px; border-radius: 28px; background: radial-gradient(circle at 80% 10%, rgba(92, 239, 218, .35), transparent 25%), linear-gradient(120deg, #07357d, #075f9d 54%, #087d87); box-shadow: 0 32px 68px rgba(7, 70, 128, .18); }.cta-box::before { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(225, 255, 250, .18); border-radius: 20px; pointer-events: none; }.cta-box h2 { position: relative; z-index: 1; }.cta-box p { position: relative; z-index: 1; font-size: 14px; }.cta-actions { position: relative; z-index: 1; }.cta-actions .button { transition: transform .25s cubic-bezier(.22, 1, .36, 1), box-shadow .25s ease; }.cta-actions .button:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(0, 20, 55, .24); }
footer { padding-top: 86px; background: #fff; }

@media (prefers-color-scheme:dark) and (scripting:none) { .header { background: rgba(11, 18, 32, .84); }.services-section, .why-section, .faq-section, .cta-section, footer { background: #0b1220; }.services-section { background: linear-gradient(180deg, #0b1220, #0d1828); }.how-section, .reseller-section { background: #101b2d; }.pricing-section { background: linear-gradient(180deg, #10212d, #0b1220); }.service-card.blue { background: linear-gradient(135deg, #12233b, #15364a); }.service-card:hover { box-shadow: 0 30px 70px rgba(0, 0, 0, .34); }.step+ .step { border-color: rgba(148, 163, 184, .18); }.why-proof, .price-panel { box-shadow: 0 24px 50px rgba(0, 0, 0, .24); }.price-row strong { color: #eaf6ff; }.faq-list details[open] { background: #13243a; }.metrics { background: #0f1929; } }
@media (max-width: 1000px) { .services-section, .how-section, .why-section, .pricing-section, .faq-section { padding: 112px 0; }.reseller-section { padding: 100px 0; }.reseller { padding: 48px; }.pricing-layout, .why-layout, .faq-layout { gap: 65px; }.cta-section { padding-bottom: 108px; } }
@media (max-width: 700px) { .header { height: 68px; }.services-section, .how-section, .why-section, .pricing-section, .faq-section { padding: 88px 0; }.services-section .section-heading, .how-section .section-heading { margin-bottom: 38px; }.service-grid { gap: 15px; }.service-card { min-height: 380px; padding: 28px; border-radius: 18px; }.service-card h3 { margin-top: 64px; }.service-card:hover { transform: none; }.how-section::before { display: none; }.step { min-height: auto; padding: 19px 18px 34px 0; }.step+ .step { padding-left: 0; border-left: 0; border-top: 1px solid #dce7ee; }.step>span { font-size: 48px; }.why-layout { gap: 42px; }.why-proof { padding: 23px; }.reseller-section { padding: 80px 0; }.reseller { padding: 37px 24px; border-radius: 21px; }.pricing-layout { gap: 42px; }.price-panel { padding: 12px 21px 20px; }.faq-layout { gap: 42px; }.faq-list details[open] { margin: 0 -12px; padding: 0 12px; }.cta-section { padding-bottom: 84px; }.cta-box { min-height: 0; padding: 41px 25px; border-radius: 21px; }.cta-box::before { inset: 9px; border-radius: 15px; } }

/* Hero refinement: a calm product canvas, with the UI entirely inside its frame. */
.hero {
  background:
    radial-gradient(circle at 78% 22%, rgba(20, 184, 166, .15), transparent 26%),
    radial-gradient(circle at 47% 91%, rgba(37, 99, 235, .11), transparent 32%),
    linear-gradient(135deg, #fbfdff 0%, #f4f9ff 52%, #f4fcfb 100%);
}
.hero::before { display: none; }
.hero::after { display: none; }
.hero-surface { min-height: 626px; padding: 102px 0 92px; }
.hero-surface::before { display: block; top: -205px; right: -218px; width: 560px; height: 560px; background: radial-gradient(circle, rgba(20, 184, 166, .11), rgba(37, 99, 235, .045) 48%, transparent 70%); }
.hero-grid { align-items: center; gap: 76px; }
.hero-copy { max-width: 510px; }
.eyebrow-pill { border-color: #d6e7f5; background: rgba(255, 255, 255, .7); color: #3564ad; box-shadow: 0 6px 18px rgba(31, 72, 119, .045); }
.eyebrow-pill span { background: #14b8a6; box-shadow: 0 0 0 5px rgba(20, 184, 166, .1); }
.hero h1 { margin: 26px 0 22px; color: #102340; font-size: clamp(52px, 5vw, 75px); line-height: .96; letter-spacing: -.078em; }
.hero h1 em { background: linear-gradient(110deg, #1763d7, #149fbb 60%, #14b8a6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-copy>p { max-width: 465px; color: #526a85; font-size: 15px; line-height: 1.8; }
.hero .button { border-color: #1763d7; background: #1763d7; color: #fff; box-shadow: 0 14px 28px rgba(23, 99, 215, .2); }
.hero .button:hover { background: #1356c0; box-shadow: 0 17px 34px rgba(23, 99, 215, .26); }
.hero .button-ghost { border-color: #d7e2ed; background: rgba(255, 255, 255, .7); color: #304a68; }
.hero .button-ghost:hover { background: #fff; color: #1763d7; }
.hero-note { color: #758aa0; }.hero-note .check { color: #14a897; }
.hero-footer, .panel-signal { display: none; }
.dashboard-wrap { margin: 0; perspective: none; }
.panel-preview { min-height: 452px; overflow: hidden; border: 1px solid #dbe8ee; border-radius: 22px; box-shadow: 0 30px 60px rgba(39, 78, 109, .13), 0 3px 10px rgba(39, 78, 109, .05); transform: none; }
.panel-preview::before { inset: 0; border-color: rgba(255, 255, 255, .8); border-radius: inherit; }
.panel-preview .app-rail { background: linear-gradient(180deg, #fafdff, #edf9f8); }.panel-workspace { background: linear-gradient(145deg, #fbfdff, #f2fafb); }.order-preview { padding: 27px 23px 23px; }.service-choice { border-color: #e1e9f0; }.preview-footer button { background: #1763d7; }
.services-section { padding-top: 150px; }

@media (prefers-color-scheme:dark) and (scripting:none) {
  .hero { background: radial-gradient(circle at 78% 22%, rgba(20, 184, 166, .18), transparent 26%), linear-gradient(135deg, #08172d 0%, #0c223c 60%, #0c363d 100%); }
  .hero h1 { color: #f5fbff; }.hero-copy>p { color: #b2c7d9; }.eyebrow-pill { border-color: rgba(148, 185, 216, .25); background: rgba(255, 255, 255, .06); color: #b9e8ff; }.hero .button-ghost { border-color: rgba(203, 230, 247, .2); background: rgba(255, 255, 255, .06); color: #e2f3fc; }.panel-preview { border-color: rgba(159, 201, 224, .19); box-shadow: 0 30px 60px rgba(0, 0, 0, .33); }
}
@media (max-width: 1000px) { .hero-surface { padding: 78px 0 72px; }.hero-grid { gap: 52px; }.dashboard-wrap { max-width: 700px; } }
@media (max-width: 700px) { .hero-surface { min-height: 0; padding: 58px 0 70px; }.hero h1 { font-size: 50px; }.hero-grid { gap: 46px; }.panel-preview { min-height: 0; border-radius: 18px; }.order-preview { padding: 23px 17px 20px; }.services-section { padding-top: 88px; } }

/* Cinematic dark product showcase — reference direction adapted to Ongmatmedia blue and teal. */
.hero {
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 79% 27%, rgba(20, 184, 166, .19), transparent 22%),
    radial-gradient(circle at 49% 102%, rgba(37, 99, 235, .25), transparent 31%),
    linear-gradient(128deg, #07111f 0%, #0a1a2e 53%, #0b303d 100%);
}
.hero::before { display: block; inset: 0; opacity: .23; background-image: linear-gradient(112deg, transparent 0 47%, rgba(108, 206, 225, .25) 47.1% 47.2%, transparent 47.3% 100%), radial-gradient(circle at 60% 49%, transparent 0 36%, rgba(110, 222, 218, .3) 36.1% 36.2%, transparent 36.3% 100%); background-size: 100% 100%; mask-image: linear-gradient(90deg, #000, rgba(0,0,0,.72), transparent); }
.hero::after { display: block; top: -275px; right: -234px; width: 720px; height: 720px; border-color: rgba(121, 231, 222, .19); box-shadow: 0 0 0 74px rgba(57, 186, 197, .03), 0 0 0 148px rgba(57, 186, 197, .024), 0 0 0 222px rgba(57, 186, 197, .018); }
.hero-surface { min-height: 705px; padding: 102px 0 75px; }.hero-surface::before { display: none; }.hero-grid { position: relative; gap: 68px; }.hero-copy { z-index: 3; max-width: 492px; }.eyebrow-pill { border-color: rgba(150, 227, 221, .21); background: rgba(234, 255, 252, .08); box-shadow: none; color: #c1faf2; }.eyebrow-pill span { background: #42d9c6; box-shadow: 0 0 0 5px rgba(66, 217, 198, .12); }
.hero h1 { margin: 28px 0 22px; color: #f7fcff; font-size: clamp(53px, 5.1vw, 77px); line-height: .96; }.hero h1 em { background: linear-gradient(110deg, #56d9cd, #7ebcff 66%, #d9f5ff); -webkit-background-clip: text; background-clip: text; color: transparent; }.hero-copy>p { color: #b3c7d8; }.hero .button { border-color: #46d8c7; background: #46d8c7; color: #062137; box-shadow: 0 15px 34px rgba(35, 210, 190, .18); }.hero .button:hover { background: #87eddf; box-shadow: 0 18px 39px rgba(35, 210, 190, .28); }.hero .button-ghost { border-color: rgba(209, 236, 248, .21); background: rgba(255, 255, 255, .055); color: #e4f4fa; }.hero .button-ghost:hover { background: rgba(255, 255, 255, .12); color: #fff; }.hero-note { color: #9fbdce; }.hero-note .check { color: #57e0ce; }

.dashboard-wrap { position: relative; z-index: 2; margin: 0 -36px 0 0; padding: 18px 0 20px; perspective: 1600px; }.browser-frame { position: relative; z-index: 2; overflow: hidden; border: 1px solid rgba(137, 193, 216, .2); border-radius: 19px; background: #0d1727; box-shadow: 0 38px 82px rgba(0, 2, 10, .48), 0 0 0 1px rgba(255, 255, 255, .025); transform: rotateY(-3deg) rotateX(1.2deg); transform-origin: center right; }.browser-chrome { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 43px; padding: 0 15px; border-bottom: 1px solid rgba(159, 204, 222, .12); background: linear-gradient(180deg, #172438, #101b2d); color: #879ab0; }.browser-dots { display: flex; align-items: center; gap: 5px; }.browser-dots i { width: 7px; height: 7px; border-radius: 50%; background: #496179; }.browser-dots i:first-child { background: #14b8a6; }.browser-dots i:nth-child(2) { background: #3c87df; }.browser-dots i:last-child { background: #91acc1; }.browser-address { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 205px; min-height: 25px; padding: 0 12px; border: 1px solid rgba(159, 204, 222, .08); border-radius: 7px; background: rgba(255,255,255,.035); color: #a9b9cb; font-size: 8px; font-weight: 700; letter-spacing: .01em; }.browser-address svg { width: 11px; height: 11px; color: #66d5c8; }.browser-more { justify-self: end; color: #7890a9; font-size: 12px; letter-spacing: 2px; }
.browser-frame .panel-preview { min-height: 427px; overflow: hidden; border: 0; border-radius: 0; box-shadow: none; transform: none; }.browser-frame .panel-preview::before { display: none; }.browser-frame .panel-workspace { background: linear-gradient(135deg, #f9fcff, #effafa); }.browser-frame .order-preview { padding: 24px 22px 21px; }.browser-frame .workspace-top { height: 57px; }.browser-frame .service-choice { padding: 12px; }
.product-float { position: absolute; z-index: 3; display: flex; align-items: center; gap: 9px; border: 1px solid rgba(160, 230, 225, .18); border-radius: 12px; background: rgba(13, 30, 50, .81); box-shadow: 0 16px 34px rgba(0, 5, 16, .33); color: #e7f7fa; backdrop-filter: blur(13px); }.product-float small { display: block; margin-bottom: 2px; color: #86a6bc; font-size: 7px; font-weight: 700; letter-spacing: .08em; }.product-float strong { display: block; max-width: 142px; overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }.float-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: rgba(255,255,255,.08); color: #72b8ff; }.float-icon svg { width: 15px; height: 15px; }.float-service { top: 39px; left: -54px; padding: 10px; animation: om-float-a 6s ease-in-out infinite; }.float-progress { right: -34px; bottom: 63px; padding: 10px 12px; color: #c4f9f2; font-size: 8px; font-weight: 700; animation: om-float-b 7s ease-in-out infinite; }.float-progress i { width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #48ddca; box-shadow: 0 0 0 4px rgba(72,221,202,.12); }.float-tiktok { right: -20px; top: 164px; padding: 10px; animation: om-float-c 6.5s ease-in-out infinite; }.float-tiktok .float-icon { color: #b5dfff; }
@keyframes om-float-a { 50% { transform: translateY(-8px) rotate(1deg); } } @keyframes om-float-b { 50% { transform: translateY(7px) rotate(-1deg); } } @keyframes om-float-c { 50% { transform: translateY(-6px); } }

@media (prefers-color-scheme:dark) and (scripting:none) { .hero { background: radial-gradient(circle at 79% 27%, rgba(20, 184, 166, .19), transparent 22%), radial-gradient(circle at 49% 102%, rgba(37, 99, 235, .25), transparent 31%), linear-gradient(128deg, #07111f 0%, #0a1a2e 53%, #0b303d 100%); }.hero h1 { color: #f7fcff; }.hero-copy>p { color: #b3c7d8; } }
@media (max-width: 1000px) { .hero-surface { min-height: 0; padding: 78px 0 68px; }.hero-grid { gap: 52px; }.dashboard-wrap { max-width: 700px; margin: 0; }.browser-frame { transform: none; }.float-service { left: 14px; }.float-tiktok { right: 14px; }.float-progress { right: 14px; } }
@media (max-width: 700px) { .hero::before, .hero::after { display: none; }.hero-surface { padding: 58px 0 67px; }.hero h1 { font-size: 50px; }.hero-grid { gap: 48px; }.dashboard-wrap { padding-top: 0; }.browser-frame { border-radius: 15px; }.browser-chrome { height: 37px; padding: 0 11px; }.browser-address { min-width: 148px; min-height: 22px; font-size: 7px; }.browser-frame .panel-preview { min-height: 0; }.browser-frame .app-rail { display: none; }.browser-frame .order-preview { padding: 21px 16px 18px; }.product-float { display: none; } }
@media (prefers-reduced-motion: reduce) { .product-float { animation: none; } }

/* Bright editorial product showcase — real Ongmatmedia panel visual. */
.hero {
  isolation: isolate;
  overflow: hidden;
  padding: 0;
  background:
    linear-gradient(90deg, rgba(0, 98, 255, .035) 1px, transparent 1px) 0 0 / 86px 86px,
    linear-gradient(rgba(0, 98, 255, .035) 1px, transparent 1px) 0 0 / 86px 86px,
    linear-gradient(135deg, #fbfdff 0%, #f4faff 46%, #eefbf8 100%);
}
.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(112deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.58) 48%, rgba(233,250,247,.42) 100%);
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  width: 42%;
  height: 5px;
  background: linear-gradient(90deg, #2488ff, #25c5aa);
  pointer-events: none;
}
.hero-surface { min-height: 690px; padding: 106px 0 94px; overflow: visible; }
.hero-surface::before { display: none; }
.hero-grid { grid-template-columns: .82fr 1.18fr; gap: 66px; }
.hero-copy { z-index: 4; max-width: 500px; }
.eyebrow-pill {
  border-color: #dceaf7;
  background: rgba(255,255,255,.82);
  box-shadow: 0 7px 24px rgba(28, 80, 124, .06);
  color: #2a628f;
}
.eyebrow-pill span { background: #19bca3; box-shadow: 0 0 0 5px rgba(25,188,163,.12); }
.hero h1 { margin: 25px 0 22px; color: #0b2033; font-size: clamp(53px, 5.15vw, 78px); line-height: .96; letter-spacing: -.072em; }
.hero h1 em {
  color: transparent;
  background: linear-gradient(95deg, #0875ee 4%, #16a9c5 56%, #1abf9f 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.hero-copy>p { max-width: 475px; color: #526b7e; font-size: 15px; line-height: 1.78; }
.hero .button { border-color: #0875ee; background: #0875ee; box-shadow: 0 14px 30px rgba(8,117,238,.2); }
.hero .button:hover { background: #0563cf; box-shadow: 0 17px 34px rgba(8,117,238,.25); }
.hero .button-ghost { border-color: #d5e2ec; background: rgba(255,255,255,.74); color: #29465d; box-shadow: none; }
.hero .button-ghost:hover { border-color: #b8cfdf; background: #fff; color: #0875ee; }
.hero-note { color: #718798; }
.hero-note .check { color: #16ae96; }

.dashboard-wrap { z-index: 2; margin: 0 -68px 0 0; padding: 20px 0 24px; perspective: 1500px; }
.panel-shot-frame {
  overflow: hidden;
  border: 1px solid rgba(108, 151, 179, .24);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 35px 80px rgba(42, 87, 117, .18), 0 7px 22px rgba(35, 92, 132, .08), 0 0 0 8px rgba(255,255,255,.46);
  transform: rotateY(-2.5deg) rotateX(1deg);
  transform-origin: center right;
}
.panel-shot-frame .browser-chrome {
  height: 44px;
  border-bottom: 1px solid #e8eef3;
  background: #fbfdff;
  color: #8ba0af;
}
.panel-shot-frame .browser-dots i { background: #c8d5de; }
.panel-shot-frame .browser-dots i:first-child { background: #56d7c0; }
.panel-shot-frame .browser-dots i:nth-child(2) { background: #72aef5; }
.panel-shot-frame .browser-dots i:last-child { background: #dce5eb; }
.panel-shot-frame .browser-address { border-color: #e4ebf0; background: #f3f7fa; color: #647d8e; }
.panel-shot-frame .browser-address svg { color: #16ae96; }
.panel-shot-frame .browser-more { color: #9babb6; }
.panel-shot { position: relative; height: 440px; margin: 0; overflow: hidden; background: #f7f9fa; }
.panel-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 59% 4%; filter: saturate(.92) contrast(1.02); }
.panel-shot::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 1px rgba(255,255,255,.8); pointer-events: none; }
.panel-shot figcaption {
  position: absolute;
  right: 18px;
  bottom: 17px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 10px 13px;
  border: 1px solid rgba(157,186,201,.32);
  border-radius: 11px;
  background: rgba(255,255,255,.88);
  box-shadow: 0 12px 28px rgba(38,77,99,.12);
  color: #667f8f;
  backdrop-filter: blur(10px);
}
.panel-shot figcaption span { display: flex; align-items: center; gap: 7px; font-size: 8px; font-weight: 700; }
.panel-shot figcaption span i { width: 7px; height: 7px; border-radius: 50%; background: #22bea5; box-shadow: 0 0 0 4px rgba(34,190,165,.12); }
.panel-shot figcaption strong { padding-left: 12px; border-left: 1px solid #dce7ed; color: #183c55; font-size: 9px; }
.product-float { border-color: rgba(142,178,197,.3); background: rgba(255,255,255,.9); box-shadow: 0 18px 40px rgba(41,85,111,.14); color: #17384e; }
.product-float small { color: #7891a1; }
.float-icon { background: #edf5ff; color: #1479ee; }
.float-service { top: 50px; left: -42px; }
.float-tiktok { top: 177px; right: -24px; }
.float-tiktok .float-icon { background: #eef9f7; color: #12394b; }
.float-progress { right: -30px; bottom: 68px; color: #176d62; }
.float-progress i { background: #22bea5; box-shadow: 0 0 0 4px rgba(34,190,165,.12); }

@media (prefers-color-scheme:dark) and (scripting:none) {
  .hero { background: linear-gradient(90deg, rgba(0,98,255,.035) 1px, transparent 1px) 0 0 / 86px 86px, linear-gradient(rgba(0,98,255,.035) 1px, transparent 1px) 0 0 / 86px 86px, linear-gradient(135deg, #fbfdff 0%, #f4faff 46%, #eefbf8 100%); }
  .hero h1 { color: #0b2033; }
  .hero-copy>p { color: #526b7e; }
}
@media (max-width: 1000px) {
  .hero-surface { min-height: 0; padding: 82px 0 76px; }
  .hero-grid { gap: 58px; }
  .dashboard-wrap { max-width: 760px; margin: 0; }
  .panel-shot-frame { transform: none; }
  .float-service { left: 18px; }
  .float-tiktok, .float-progress { right: 18px; }
}
@media (max-width: 700px) {
  .hero::after { width: 60%; }
  .hero-surface { padding: 61px 0 70px; }
  .hero h1 { font-size: 50px; }
  .hero-grid { gap: 48px; }
  .dashboard-wrap { padding: 0; }
  .panel-shot-frame { border-radius: 16px; box-shadow: 0 24px 55px rgba(42,87,117,.17), 0 0 0 5px rgba(255,255,255,.5); }
  .panel-shot-frame .browser-chrome { height: 38px; padding: 0 11px; }
  .panel-shot-frame .browser-address { min-width: 155px; min-height: 22px; font-size: 7px; }
  .panel-shot { height: 310px; }
  .panel-shot img { object-position: 56% 4%; }
  .panel-shot figcaption { right: 10px; bottom: 10px; padding: 8px 10px; }
  .panel-shot figcaption span { display: none; }
  .panel-shot figcaption strong { padding-left: 0; border-left: 0; }
  .product-float { display: none; }
}

/* v6 — clear product storytelling: minimal, vivid and immediately understandable. */
.container { width: min(100% - 56px, 1240px); }
.header { height: 72px; position: relative; z-index: 20; border-bottom-color: rgba(18,62,100,.07); }
.nav-wrap { gap: 32px; }
.main-nav { gap: 34px; }
.main-nav a, .login-link { color: #3f5267; font-size: 11px; }
.button { min-height: 46px; padding-inline: 20px; border-radius: 10px; box-shadow: 0 10px 24px rgba(8,117,238,.14); }
.button-sm { min-height: 38px; }

.hero {
  background:
    radial-gradient(ellipse at 88% 18%, rgba(37,211,190,.24), transparent 29%),
    radial-gradient(ellipse at 5% 0%, rgba(77,143,255,.13), transparent 24%),
    linear-gradient(135deg, #fff 0%, #f8fbff 56%, #eefcf9 100%);
}
.hero::before {
  display: block;
  inset: 0;
  opacity: 1;
  background:
    linear-gradient(143deg, transparent 0 17%, rgba(24,119,238,.035) 17.2% 17.5%, transparent 17.7%),
    radial-gradient(ellipse at 69% 54%, rgba(255,255,255,.85), transparent 43%);
  mask-image: none;
}
.hero::after { display: none; }
.hero .container { width: min(100% - 56px, 1240px); }
.hero-surface { min-height: 626px; padding: 67px 0 64px; }
.hero-grid { grid-template-columns: .84fr 1.16fr; gap: 58px; }
.hero-copy { max-width: 500px; }
.eyebrow-pill { padding: 6px 10px; border-color: #d9e8fa; background: #edf5ff; box-shadow: none; color: #2970c8; font-size: 8px; }
.hero h1 { max-width: 520px; margin: 19px 0 18px; color: #0b1740; font-size: clamp(51px,4.65vw,67px); font-weight: 800; line-height: 1.02; letter-spacing: -.055em; }
.hero h1 em { background: linear-gradient(100deg,#1686f4 3%,#0a99dc 52%,#16b89e 100%); -webkit-background-clip: text; background-clip: text; }
.hero-copy>p { max-width: 470px; color: #465d73; font-size: 14px; line-height: 1.68; }
.hero-actions { margin-top: 26px; }
.hero-note { margin-top: 15px; color: #61768a; }
.dashboard-wrap { width: 100%; margin: 0; padding: 5px 0 12px; }
.product-demo-frame { border-radius: 18px; box-shadow: 0 30px 70px rgba(32,79,111,.15),0 4px 12px rgba(32,79,111,.06),0 0 0 8px rgba(255,255,255,.55); transform: rotateY(-1.5deg) rotateX(.5deg); }
.product-demo-frame .browser-chrome { height: 40px; }
.product-demo { min-height: 409px; grid-template-columns: 58px minmax(0,1fr); }
.demo-rail { padding: 14px 0; }
.demo-rail>.logo { margin-bottom: 18px; }
.demo-topbar { height: 60px; }
.demo-workspace { padding: 21px 22px 18px; }
.demo-services article { min-height: 91px; }
.float-service { top: 46px; left: -28px; }
.float-progress { right: -16px; bottom: 48px; }

.metrics { position: relative; z-index: 3; border: 0; background: rgba(255,255,255,.96); box-shadow: 0 -12px 35px rgba(36,82,112,.035),0 1px 0 #edf2f6; }
.metrics-grid { min-height: 104px; grid-template-columns: repeat(3,1fr) 1.35fr; }
.metrics-grid>div { gap: 1px; padding-left: 34px; }
.metrics-grid strong { color: #0875ee; font-size: 29px; }
.metrics-grid span,.metrics-grid p { font-size: 10px; }

.section { padding: 112px 0; }
.section-heading { max-width: 620px; margin-bottom: 44px; }
.section-heading h2,.pricing-layout h2,.why-layout>div:first-child h2,.faq-layout h2,.reseller-copy h2 { font-size: clamp(36px,3.7vw,49px); line-height: 1.08; letter-spacing: -.045em; }
.section-heading>p:last-child,.section-copy { max-width: 560px; margin-top: 13px; font-size: 13px; line-height: 1.7; }
.eyebrow { margin-bottom: 11px; color: #1679e8; font-size: 9px; }

.services-section { padding: 110px 0 120px; border: 0; background: #fff; }
.services-section::before { width: 40%; height: 100%; top: 0; right: 0; border-radius: 0; background: linear-gradient(135deg,transparent,rgba(18,139,235,.035)); }
.services-section .section-heading { margin-bottom: 42px; }
.services-section .section-heading h2 { font-size: clamp(36px,3.7vw,49px); }
.service-grid { gap: 20px; }
.service-card { min-height: 372px; padding: 30px 32px; border-color: rgba(67,127,171,.08); border-radius: 18px; box-shadow: 0 15px 35px rgba(27,63,91,.06); }
.service-card.blue { background: radial-gradient(circle at 86% 48%,rgba(47,145,255,.2),transparent 27%),linear-gradient(135deg,#f7fbff,#e6f4ff); }
.service-card.ink { background: radial-gradient(circle at 87% 50%,rgba(255,112,128,.17),transparent 27%),linear-gradient(135deg,#fff,#fff0f1); color: #17213b; }
.ink .service-icon { background: #fff; color: #101828; box-shadow: 0 7px 18px rgba(17,34,52,.08); }
.ink .service-top>span,.ink p,.ink .service-footer small { color: #617086; }
.ink .service-footer a { color: #0875ee; }
.service-card h3 { max-width: 330px; margin: 64px 0 10px; font-size: 29px; }
.service-card p { max-width: 370px; font-size: 12px; line-height: 1.65; }
.service-footer { padding-top: 27px; }
.service-footer strong { font-size: 15px; }
.card-orbit { right: -52px; bottom: -76px; width: 230px; height: 230px; border-color: rgba(8,117,238,.12); box-shadow: 0 0 0 34px rgba(8,117,238,.025),0 0 0 68px rgba(8,117,238,.018); }
.ink .card-orbit { border-color: rgba(239,80,103,.14); box-shadow: 0 0 0 34px rgba(239,80,103,.025),0 0 0 68px rgba(239,80,103,.018); }

.how-section { padding: 105px 0 112px; background: linear-gradient(145deg,#f5faff,#f4fbf9); }
.how-section .section-heading { margin-bottom: 45px; }
.step { min-height: 218px; padding-top: 14px; }
.step>span { top: -9px; font-size: 48px; }
.step-icon { width: 56px; height: 56px; margin-bottom: 22px; border-radius: 15px; box-shadow: none; }
.step h3 { font-size: 17px; }
.step p { font-size: 12px; }

.why-section { padding: 116px 0; background: linear-gradient(90deg,#fff 0 54%,#f4faff 54% 100%); }
.why-layout { gap: 92px; }
.why-proof { padding: 26px; border-radius: 18px; box-shadow: 0 20px 42px rgba(22,52,84,.07); }
.why-proof::after { display: none; }
.proof-list { margin-top: 24px; }

.reseller-section { padding: 92px 0; background: #f7fafc; }
.reseller { gap: 66px; padding: 54px 58px; border-radius: 24px; background: radial-gradient(circle at 92% 4%,rgba(38,211,189,.2),transparent 25%),linear-gradient(135deg,#071a31,#0a3554); box-shadow: 0 26px 60px rgba(12,31,58,.17); }
.reseller-copy>p:not(.eyebrow) { font-size: 13px; }

.pricing-section { padding: 112px 0; background: linear-gradient(145deg,#f3fbf9,#f5f9ff); }
.pricing-layout { gap: 100px; }
.price-panel { border-radius: 17px; box-shadow: 0 18px 44px rgba(25,62,90,.09); }
.faq-section { padding: 112px 0 105px; background: #fff; }
.faq-layout { gap: 90px; }
.faq-list summary { padding: 19px 0; }
.cta-section { padding: 0 0 105px; background: #fff; }
.cta-box { min-height: 188px; padding: 42px 48px; border-radius: 18px; background: linear-gradient(110deg,#1768f0,#0c9cdb 58%,#17b89f); box-shadow: 0 22px 48px rgba(7,89,178,.16); }
.cta-box::before { display: none; }
.cta-box h2 { font-size: clamp(27px,3vw,38px); }
footer { padding-top: 65px; }

@media (prefers-color-scheme:dark) and (scripting:none) {
  .metrics { background:#0d1828; }
  .services-section,.faq-section,.cta-section { background:#0b1220; }
  .service-card.ink { background:radial-gradient(circle at 87% 50%,rgba(239,80,103,.16),transparent 28%),linear-gradient(135deg,#161b2b,#261c2b); color:#f5f7fb; }
  .ink .service-top>span,.ink p,.ink .service-footer small { color:#aeb9ca; }
  .how-section,.pricing-section { background:linear-gradient(145deg,#101d2c,#0c2227); }
  .why-section { background:linear-gradient(90deg,#0b1220 0 54%,#0d1d2c 54% 100%); }
  .reseller-section { background:#101b2d; }
}
@media (max-width:1000px) {
  .hero-grid { grid-template-columns:1fr; }
  .hero-copy { max-width:650px; }
  .dashboard-wrap { max-width:760px; justify-self:start; }
  .metrics-grid { grid-template-columns:repeat(3,1fr); }
  .metrics-grid p { display:none; }
}
@media (max-width:700px) {
  .container,.hero .container { width:min(100% - 32px,1240px); }
  .hero-surface { padding:52px 0 58px; }
  .hero h1 { font-size:43px; }
  .hero-grid { gap:40px; }
  .metrics-grid { min-height:86px; }
  .metrics-grid>div { padding-left:14px; }
  .metrics-grid strong { font-size:23px; }
  .section,.services-section,.how-section,.why-section,.pricing-section,.faq-section { padding:82px 0; }
  .service-card { min-height:350px; }
  .why-section { background:linear-gradient(180deg,#fff,#f4faff); }
  .reseller-section { padding:72px 0; }
  .reseller { padding:34px 23px; }
  .cta-section { padding-bottom:78px; }
  .cta-box { padding:34px 25px; }
}

/* v8 — spacious premium storytelling. One idea, one visual, one pause per section. */
html.js .reveal,html.js .reveal-item { transform:translateY(20px); transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1); }
.hero { background:radial-gradient(ellipse at 88% 12%,rgba(28,196,178,.13),transparent 30%),radial-gradient(ellipse at 2% 4%,rgba(40,112,238,.08),transparent 27%),#fbfdff; }
.hero::before { background:linear-gradient(135deg,transparent 0 20%,rgba(37,99,235,.025) 20.15% 20.3%,transparent 20.45%); }
.hero-surface { min-height:790px; padding:118px 0 128px; }
.hero-grid { grid-template-columns:.62fr 1.38fr; gap:72px; }
.hero-copy { max-width:430px; }
.hero h1 { margin:0 0 27px; font-size:clamp(55px,4.7vw,72px); line-height:1.06; }
.hero-copy>p { max-width:420px; font-size:15px; line-height:1.8; }
.hero-actions { margin-top:36px; }
.dashboard-wrap { width:112%; margin-left:-2%; }
.product-demo-frame { border-color:#ccdbe6; border-radius:20px; background:#fff; box-shadow:0 42px 90px rgba(24,64,94,.19),0 8px 24px rgba(24,64,94,.09); transform:none; }
.product-demo-frame .browser-chrome { height:46px; border-bottom-color:#d9e4ec; background:#f8fbfd; }
.product-demo-frame .browser-address { border-color:#d7e2ea; background:#fff; color:#49667a; }
.product-demo { min-height:505px; grid-template-columns:68px minmax(0,1fr); background:#f4f7f9; }
.demo-rail { border-right-color:#d9e3ea; padding:18px 0; }
.demo-rail>span { color:#748898; }
.demo-topbar { height:74px; border-bottom-color:#d9e3ea; background:#fff; }
.demo-topbar small,.demo-services article div small { color:#677d8e; }
.demo-topbar strong,.demo-heading h3,.demo-services article div strong { color:#102a3d; }
.demo-workspace { padding:34px 34px 29px; }
.demo-heading h3 { font-size:25px; }
.demo-services { gap:16px; margin-top:26px; }
.demo-services article { min-height:112px; padding:18px; border-color:#ccdbe5; box-shadow:0 7px 17px rgba(31,70,96,.06); }
.demo-services article.selected { border-color:#278cf2; box-shadow:0 10px 25px rgba(8,117,238,.13); }
.demo-services article div strong { font-size:11px; }
.demo-services article div em { color:#6d8190; font-size:8px; }
.demo-input { margin-top:20px; }
.demo-input>span { color:#405f73; }
.demo-input>div { height:48px; border-color:#ccd9e2; color:#778b9a; }
.demo-footer { margin-top:20px; }
.demo-footer>span { color:#456579; }
.demo-footer button { min-height:40px; }

.section { padding:176px 0; }
.section-heading { max-width:670px; margin-bottom:80px; }
.section-heading h2,.pricing-layout h2,.why-layout>div:first-child h2,.faq-layout h2,.reseller-copy h2 { font-size:clamp(43px,4.5vw,62px); line-height:1.1; }
.section-heading>p:last-child,.section-copy { max-width:520px; margin-top:20px; font-size:14px; line-height:1.85; }
.eyebrow { margin-bottom:16px; }

.services-section { padding:185px 0 205px; background:#fff; }
.services-section::before { display:none; }
.services-section .section-heading { max-width:660px; margin-bottom:100px; }
.services-section .section-heading h2 { font-size:clamp(43px,4.5vw,62px); }
.service-grid { display:grid; grid-template-columns:1fr; gap:96px; }
.service-card { display:grid; grid-template-columns:.78fr 1.22fr; align-items:center; gap:84px; min-height:590px; padding:74px 76px; border:0; border-radius:32px; box-shadow:none; }
.service-card.ink { grid-template-columns:1.22fr .78fr; background:linear-gradient(135deg,#fbfcfd,#f6f8fa); }
.service-card.ink .service-copy { order:2; }
.service-card.ink .service-visual { order:1; }
.service-card.blue { background:linear-gradient(135deg,#f5faff,#edf7ff); }
.service-card:hover { transform:none; box-shadow:none; }
.service-copy { position:relative; z-index:2; max-width:390px; }
.service-icon { width:54px; height:54px; margin-bottom:34px; border-radius:15px; background:#fff; box-shadow:0 12px 28px rgba(27,75,116,.08); }
.service-icon svg { width:25px; height:25px; }
.service-card h3 { margin:0 0 18px; font-size:clamp(31px,3.2vw,43px); line-height:1.14; }
.service-card p,.service-card.ink p { max-width:390px; color:#536a7d; font-size:14px; line-height:1.85; }
.service-copy>a { display:inline-flex; align-items:center; gap:9px; margin-top:31px; color:#0875ee; font-size:12px; font-weight:800; }
.service-visual { display:grid; place-items:center; min-height:430px; }
.social-preview { width:min(100%,480px); padding:22px; border:1px solid #d4e2ec; border-radius:28px; background:#fff; box-shadow:0 32px 65px rgba(33,80,111,.14); transform:rotate(-2deg); }
.ink .social-preview { transform:rotate(2deg); }
.social-preview-head { display:flex; align-items:center; gap:10px; height:34px; }
.social-preview-head>span { display:grid; place-items:center; width:34px; height:34px; border-radius:10px; background:#e9f3ff; color:#1877f2; }
.ink .social-preview-head>span { background:#f2f4f7; color:#101828; }
.social-preview-head svg { width:17px; height:17px; }
.social-preview-head i { display:block; height:8px; border-radius:99px; background:#e1e9ef; }
.social-preview-head i:nth-child(2) { width:92px; }
.social-preview-head i:nth-child(3) { width:52px; }
.social-preview-media { display:grid; place-items:center; height:268px; margin-top:18px; border-radius:20px; background:radial-gradient(circle at 72% 25%,rgba(51,174,255,.42),transparent 30%),linear-gradient(145deg,#1175e9,#0dc2af); color:#fff; }
.ink .social-preview-media { background:radial-gradient(circle at 70% 28%,rgba(255,94,129,.48),transparent 29%),linear-gradient(145deg,#111827,#26334a); }
.social-preview-media span { display:grid; place-items:center; min-width:64px; height:48px; padding:0 15px; border-radius:14px; background:rgba(255,255,255,.94); box-shadow:0 12px 30px rgba(0,27,68,.18); color:#e83652; font-size:13px; font-weight:800; }
.ink .social-preview-media span { color:#111827; font-size:24px; }
.social-preview-stats { display:flex; gap:10px; padding-top:19px; }
.social-preview-stats b { display:block; width:28%; height:9px; border-radius:99px; background:#e6edf2; }
.social-preview-stats b:first-child { width:40%; background:#b9dbff; }

.how-section { min-height:850px; padding:180px 0 190px; background:linear-gradient(145deg,#f6f9fc,#f2faf8); }
.how-section::after { opacity:.4; }
.how-section .section-heading { margin-bottom:92px; }
.steps { gap:42px; }
.step { min-height:250px; padding:20px 40px 30px 0; }
.step+.step { padding-left:40px; }
.step-icon { width:62px; height:62px; margin-bottom:30px; background:#fff; box-shadow:0 12px 30px rgba(42,82,112,.07); }
.step>span { color:rgba(8,117,238,.09); font-size:56px; }
.step h3 { font-size:19px; }
.step p { max-width:270px; font-size:13px; line-height:1.8; }

.why-section { min-height:800px; padding:185px 0; background:linear-gradient(90deg,#fff 0 55%,#f4f9fc 55% 100%); }
.why-layout { grid-template-columns:.9fr 1.1fr; gap:150px; }
.why-proof { padding:45px; border:0; border-radius:26px; box-shadow:0 28px 65px rgba(22,52,84,.1); }
.proof-header strong { font-size:15px; }
.proof-header small { font-size:11px; }
.proof-list { grid-template-columns:1fr; gap:22px; margin-top:38px; padding-top:30px; }
.proof-list span { font-size:12px; }

.reseller-section { padding:165px 0; background:#f6f8fb; }
.reseller { min-height:620px; grid-template-columns:1.12fr .88fr; gap:100px; padding:86px; border-radius:32px; }
.code-visual { transform:scale(1.04); }
.reseller:hover .code-visual { transform:scale(1.04) translateY(-4px); }
.reseller-copy ul { display:none; }
.reseller-copy>p:not(.eyebrow) { margin-top:24px; font-size:14px; line-height:1.85; }
.reseller-copy .button { margin-top:32px; }

.pricing-section { min-height:760px; padding:180px 0; background:linear-gradient(140deg,#f4faf8,#f6f9fd); }
.pricing-section::before { display:none; }
.pricing-layout { gap:150px; }
.price-panel { padding:24px 38px 32px; border-radius:24px; box-shadow:0 25px 60px rgba(25,62,90,.1); }
.price-row { padding:28px 0; }
.faq-section { padding:185px 0; background:#fff; }
.faq-layout { gap:150px; }
.faq-list summary { padding:24px 0; }
.cta-section { padding:20px 0 150px; background:#fff; }
.cta-box { min-height:260px; padding:64px 70px; border-radius:28px; }
footer { padding-top:90px; }

@media (prefers-color-scheme:dark) and (scripting:none) {
  .hero { background:radial-gradient(ellipse at 88% 12%,rgba(28,196,178,.15),transparent 30%),#091522; }
  .services-section,.faq-section,.cta-section { background:#0b1220; }
  .service-card.blue { background:linear-gradient(135deg,#10243b,#123249); }
  .service-card.ink { background:linear-gradient(135deg,#111827,#182434); }
  .service-card p,.service-card.ink p { color:#b3c1ce; }
  .social-preview { border-color:#33495a; background:#142333; }
  .why-section { background:linear-gradient(90deg,#0b1220 0 55%,#0e1b29 55% 100%); }
}
@media (max-width:1000px) {
  .hero-surface { padding:90px 0 110px; }
  .hero-grid { grid-template-columns:1fr; }
  .dashboard-wrap { width:100%; margin:20px 0 0; }
  .service-card,.service-card.ink { grid-template-columns:1fr; gap:52px; padding:58px; }
  .service-card.ink .service-copy { order:1; }
  .service-card.ink .service-visual { order:2; }
  .why-layout,.pricing-layout,.faq-layout { gap:80px; }
  .reseller { grid-template-columns:1fr; }
}
@media (max-width:700px) {
  .hero-surface { min-height:0; padding:70px 0 86px; }
  .hero h1 { font-size:46px; }
  .dashboard-wrap { margin-top:8px; }
  .product-demo { min-height:0; grid-template-columns:1fr; }
  .demo-workspace { padding:23px 16px 21px; }
  .section,.services-section,.how-section,.why-section,.pricing-section,.faq-section { min-height:0; padding:112px 0; }
  .section-heading,.services-section .section-heading,.how-section .section-heading { margin-bottom:58px; }
  .service-grid { gap:46px; }
  .service-card,.service-card.ink { min-height:0; gap:42px; padding:36px 24px; border-radius:24px; }
  .service-visual { min-height:300px; }
  .social-preview { padding:15px; border-radius:20px; }
  .social-preview-media { height:200px; }
  .steps { gap:0; }
  .why-section { background:linear-gradient(180deg,#fff,#f4f9fc); }
  .why-layout { gap:62px; }
  .why-proof { padding:28px; }
  .reseller-section { padding:105px 0; }
  .reseller { min-height:0; padding:42px 24px; }
  .pricing-layout,.faq-layout { gap:65px; }
  .cta-section { padding:0 0 100px; }
  .cta-box { min-height:0; padding:45px 28px; }
}

/* Typography lock: keep the selected family above legacy refinements. */
body { font-family:"Plus Jakarta Sans",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; letter-spacing:-.006em; }
html[lang="th"] body { font-family:"Noto Sans Thai","Plus Jakarta Sans",sans-serif; }
.brand { font-weight:800; letter-spacing:-.045em; }
.hero h1 { font-weight:800; line-height:1.06; letter-spacing:-.048em; }
.hero-copy>p { letter-spacing:-.01em; line-height:1.72; }
.section-heading h2,.pricing-layout h2,.reseller h2,.cta-box h2,.why-layout>div:first-child h2,.faq-layout h2 { font-weight:700; line-height:1.14; letter-spacing:-.04em; }
.service-card h3 { font-weight:700; line-height:1.2; letter-spacing:-.035em; }
.step h3,.faq-list summary { letter-spacing:-.018em; }
.button,.main-nav a,.login-link { letter-spacing:-.012em; }
@media (max-width:700px) { .hero h1 { line-height:1.09; letter-spacing:-.042em; } }

/* v7 typography — friendly geometric forms with crisp Vietnamese diacritics. */
body { font-family:"Plus Jakarta Sans",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; letter-spacing:-.006em; }
html[lang="th"] body { font-family:"Noto Sans Thai","Plus Jakarta Sans",sans-serif; }
.brand { font-weight:800; letter-spacing:-.045em; }
.hero h1 { font-weight:800; line-height:1.06; letter-spacing:-.048em; }
.hero-copy>p { letter-spacing:-.01em; line-height:1.72; }
.section-heading h2,.pricing-layout h2,.reseller h2,.cta-box h2,.why-layout>div:first-child h2,.faq-layout h2 { font-weight:700; line-height:1.14; letter-spacing:-.04em; }
.service-card h3 { font-weight:700; line-height:1.2; letter-spacing:-.035em; }
.step h3,.faq-list summary { letter-spacing:-.018em; }
.button,.main-nav a,.login-link { letter-spacing:-.012em; }
@media (max-width:700px) {
  .hero h1 { line-height:1.09; letter-spacing:-.042em; }
}

/* Product demo v2 — composed for the hero instead of embedding the full admin page. */
.hero {
  background: linear-gradient(124deg, #ffffff 0%, #f7fbff 52%, #eefaf8 100%);
}
.hero::before {
  background:
    linear-gradient(90deg, transparent 0 49.9%, rgba(51,119,164,.055) 50%, transparent 50.1%) center / 260px 100%,
    linear-gradient(180deg, transparent 0 49.9%, rgba(51,119,164,.045) 50%, transparent 50.1%) center / 100% 150px;
  opacity: .55;
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}
.hero .container { width: min(100% - 64px, 1360px); }
.hero-surface { min-height: 718px; padding: 106px 0 96px; }
.hero-grid { grid-template-columns: .78fr 1.22fr; gap: 76px; }
.hero-copy { max-width: 510px; }
.hero h1 { font-size: clamp(56px, 5vw, 80px); }
.dashboard-wrap { width: 87%; margin-right: 0; justify-self: end; }
.product-demo-frame {
  border-color: rgba(113,151,178,.24);
  background: #fff;
  box-shadow: 0 42px 90px rgba(32,79,111,.17), 0 9px 24px rgba(32,79,111,.08), 0 0 0 9px rgba(255,255,255,.55);
  transform: rotateY(-2deg) rotateX(.7deg);
}
.product-demo-frame .browser-chrome { height: 45px; border-bottom: 1px solid #e7edf3; background: #fbfdff; }
.product-demo-frame .browser-address { border-color: #e3ebf1; background: #f2f6f9; color: #607889; }
.product-demo { display: grid; grid-template-columns: 64px minmax(0,1fr); min-height: 465px; background: #f7f9fb; }
.demo-rail { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 17px 0; border-right: 1px solid #e5ebf0; background: #fff; }
.demo-rail>.logo { width: 28px; height: 28px; margin-bottom: 25px; }
.demo-rail>span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: #91a1ae; }
.demo-rail>span svg { width: 16px; height: 16px; }
.demo-rail>span.active { background: #e9f3ff; color: #0875ee; box-shadow: inset 0 0 0 1px rgba(8,117,238,.06); }
.demo-rail>.demo-settings { margin-top: auto; }
.demo-main { min-width: 0; }
.demo-topbar { display: flex; align-items: center; justify-content: space-between; height: 68px; padding: 0 24px; border-bottom: 1px solid #e5ebf0; background: rgba(255,255,255,.9); }
.demo-topbar small { display: block; margin-bottom: 3px; color: #96a6b3; font-size: 8px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.demo-topbar strong { display: flex; align-items: center; gap: 3px; color: #1d3446; font-size: 11px; }
.demo-topbar strong svg { width: 12px; height: 12px; color: #8fa1ae; }
.demo-account { display: flex; align-items: center; gap: 11px; }
.demo-account>span { padding: 7px 10px; border: 1px solid #dce7ee; border-radius: 8px; background: #fff; color: #416177; font-size: 9px; font-weight: 800; }
.demo-account>i { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 50%; background: linear-gradient(135deg, #0875ee, #19bca3); color: #fff; font-size: 8px; font-style: normal; font-weight: 800; }
.demo-workspace { padding: 25px 25px 21px; }
.demo-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.demo-heading small { display: block; margin-bottom: 5px; color: #158f7d; font-size: 8px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.demo-heading h3 { margin: 0; color: #10293c; font-size: 22px; letter-spacing: -.045em; }
.demo-heading>span { padding: 7px 9px; border-radius: 7px; background: #eaf3ff; color: #0875ee; font-size: 8px; font-weight: 800; }
.demo-services { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; }
.demo-services article { position: relative; display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 11px; min-height: 104px; padding: 15px; border: 1px solid #e0e8ee; border-radius: 13px; background: #fff; box-shadow: 0 5px 13px rgba(43,78,100,.035); }
.demo-services article.selected { border-color: rgba(8,117,238,.36); box-shadow: 0 8px 22px rgba(8,117,238,.09), inset 0 0 0 1px rgba(8,117,238,.07); }
.demo-service-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; }
.demo-service-icon svg { width: 18px; height: 18px; }
.demo-service-icon.facebook { background: #eaf3ff; color: #1877f2; }
.demo-service-icon.tiktok { background: #eef5f6; color: #102a38; }
.demo-services article div { min-width: 0; }
.demo-services article div small { display: block; color: #8b9ca9; font-size: 7px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.demo-services article div strong { display: block; overflow: hidden; margin-top: 4px; color: #243b4c; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.demo-services article div em { display: block; overflow: hidden; margin-top: 3px; color: #8a9aa6; font-size: 7px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.demo-check { display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; background: #0875ee; color: #fff; }
.demo-check svg, .demo-arrow svg { width: 12px; height: 12px; }
.demo-arrow { color: #91a2ae; }
.demo-input { margin-top: 14px; }
.demo-input>span { display: block; margin-bottom: 6px; color: #6f8493; font-size: 8px; font-weight: 800; }
.demo-input>div { display: flex; align-items: center; height: 42px; padding: 0 13px; border: 1px solid #dfe7ed; border-radius: 10px; background: #fff; color: #a1afb9; font-size: 9px; }
.demo-footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 15px; }
.demo-footer>span { display: flex; align-items: center; gap: 7px; color: #718897; font-size: 8px; font-weight: 700; }
.demo-footer>span i { width: 7px; height: 7px; border-radius: 50%; background: #1abf9f; box-shadow: 0 0 0 4px rgba(26,191,159,.12); }
.demo-footer button { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 13px; border: 0; border-radius: 9px; background: #0875ee; box-shadow: 0 9px 18px rgba(8,117,238,.18); color: #fff; font-size: 9px; font-weight: 800; }
.demo-footer button svg { width: 14px; height: 14px; }
.float-service { top: 70px; left: -36px; }
.float-progress { right: -27px; bottom: 62px; }

@media (max-width: 1180px) {
  .hero .container { width: min(100% - 48px, 1180px); }
  .hero-grid { gap: 52px; }
  .dashboard-wrap { width: 94%; margin-right: 0; }
}
@media (max-width: 1000px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy { max-width: 650px; }
  .dashboard-wrap { width: 100%; max-width: 720px; justify-self: start; }
  .product-demo-frame { transform: none; }
}
@media (max-width: 700px) {
  .hero .container { width: min(100% - 32px, 1180px); }
  .product-demo { grid-template-columns: 1fr; min-height: 0; }
  .demo-rail { display: none; }
  .demo-topbar { height: 58px; padding: 0 15px; }
  .demo-account>span { display: none; }
  .demo-workspace { padding: 20px 15px 17px; }
  .demo-services { grid-template-columns: 1fr; }
  .demo-services article { min-height: 88px; }
  .demo-footer>span { display: none; }
  .demo-footer { justify-content: flex-end; }
}

/* Cohesive section backgrounds — blue/teal rhythm with restrained graphic detail. */
.services-section,
.how-section,
.why-section,
.reseller-section,
.pricing-section,
.faq-section,
.cta-section { isolation: isolate; }
.services-section>.container,
.how-section>.container,
.why-section>.container,
.reseller-section>.container,
.pricing-section>.container,
.faq-section>.container,
.cta-section>.container { position: relative; z-index: 2; }

.services-section {
  border-top: 1px solid rgba(91,147,184,.1);
  background:
    linear-gradient(115deg, rgba(8,117,238,.04), transparent 27%),
    linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
}
.services-section::before {
  top: 0;
  right: 0;
  width: 46%;
  height: 100%;
  border-radius: 0;
  background: repeating-linear-gradient(135deg, rgba(8,117,238,.035) 0 1px, transparent 1px 34px);
  mask-image: linear-gradient(90deg, transparent, #000);
}

.how-section {
  border-block: 1px solid rgba(88,145,178,.1);
  background:
    linear-gradient(135deg, rgba(8,117,238,.055), transparent 42%),
    linear-gradient(315deg, rgba(26,191,159,.07), transparent 45%),
    #f5fafc;
}
.how-section::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background: linear-gradient(90deg, transparent 0 19%, rgba(64,134,177,.05) 19.1% 19.2%, transparent 19.3% 79%, rgba(26,191,159,.06) 79.1% 79.2%, transparent 79.3%);
  pointer-events: none;
}

.why-section {
  background:
    linear-gradient(90deg, #ffffff 0%, #ffffff 52%, #f3faff 52%, #f4fbf9 100%);
}
.why-section::before {
  top: 0;
  right: 0;
  bottom: auto;
  left: auto;
  width: 48%;
  height: 100%;
  border-radius: 0;
  background: linear-gradient(rgba(8,117,238,.045) 1px, transparent 1px) 0 0 / 100% 72px;
  mask-image: linear-gradient(90deg, transparent, #000 35%);
}

.reseller-section {
  border-block: 1px solid rgba(77,132,168,.11);
  background:
    linear-gradient(105deg, rgba(8,117,238,.055), transparent 34%),
    linear-gradient(285deg, rgba(26,191,159,.07), transparent 38%),
    #f3f8fb;
}
.reseller-section::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 109px, rgba(68,130,164,.035) 109px 110px);
  mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
  pointer-events: none;
}

.pricing-section {
  background:
    linear-gradient(122deg, rgba(26,191,159,.09), transparent 33%),
    linear-gradient(302deg, rgba(8,117,238,.065), transparent 40%),
    #f4fafb;
}
.pricing-section::before {
  top: 0;
  left: 10%;
  width: 80%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(8,117,238,.2), rgba(26,191,159,.22), transparent);
}

.faq-section {
  border-top: 1px solid rgba(88,145,178,.1);
  background:
    linear-gradient(90deg, #ffffff 0 39%, #f8fbfd 39% 100%);
}
.faq-section::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  left: 39%;
  width: 1px;
  background: linear-gradient(transparent, rgba(8,117,238,.12), transparent);
  pointer-events: none;
}

.cta-section {
  border-bottom: 1px solid rgba(88,145,178,.1);
  background:
    linear-gradient(180deg, #f8fbfd 0%, #ffffff 76%),
    #fff;
}

@media (prefers-color-scheme:dark) and (scripting:none) {
  .services-section { background: linear-gradient(145deg, #0b1422, #0d1b2b); }
  .how-section { background: linear-gradient(135deg, #101d2c, #0c2227); }
  .why-section { background: linear-gradient(90deg, #0b1422 0 52%, #0d1d2c 52% 100%); }
  .reseller-section { background: linear-gradient(120deg, #0f1c2b, #0d2027); }
  .pricing-section { background: linear-gradient(130deg, #10242a, #0d1828); }
  .faq-section { background: linear-gradient(90deg, #0b1422 0 39%, #0e1a28 39% 100%); }
  .cta-section { background: linear-gradient(180deg, #0e1a28, #0b1220); }
}

@media (max-width: 700px) {
  .why-section,
  .faq-section { background: linear-gradient(180deg, #fff, #f5fafc); }
  .why-section::before,
  .faq-section::before { display: none; }
}

/* Typography system — real Vietnamese weights and consistent vertical rhythm. */
body {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}
html[lang="th"] body { font-family: "Noto Sans Thai", "Plus Jakarta Sans", sans-serif; }
h1, h2, h3, strong, .button, .main-nav a, .login-link { font-synthesis: none; }
h1, h2, h3 { text-wrap: balance; }
.brand { font-weight: 700; letter-spacing: -.035em; }
.main-nav a, .login-link, .button { font-weight: 700; letter-spacing: -.01em; }
.eyebrow-pill, .eyebrow { font-weight: 700; letter-spacing: .075em; line-height: 1.35; }
.hero h1 {
  max-width: 560px;
  margin: 27px 0 23px;
  font-size: clamp(54px, 4.8vw, 76px);
  font-weight: 700;
  letter-spacing: -.052em;
  line-height: 1.075;
}
.hero h1 em { display: inline-block; padding-bottom: .07em; }
.hero-copy>p { font-size: 15px; line-height: 1.8; letter-spacing: -.012em; }
.section-heading h2,
.pricing-layout h2,
.reseller h2,
.cta-box h2,
.why-layout>div:first-child h2,
.faq-layout h2 {
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: 1.12;
}
.section-heading>p:last-child,
.section-copy,
.reseller-copy>p:not(.eyebrow),
.cta-box p { line-height: 1.8; letter-spacing: -.01em; }
.service-card h3 { font-weight: 700; letter-spacing: -.038em; line-height: 1.16; }
.step h3 { font-weight: 700; letter-spacing: -.025em; line-height: 1.35; }
.faq-list summary { font-weight: 600; line-height: 1.5; letter-spacing: -.015em; }
.demo-heading h3 { font-weight: 700; letter-spacing: -.03em; line-height: 1.28; }
.demo-services article div strong { font-weight: 700; line-height: 1.35; }

@media (max-width: 700px) {
  .hero h1 { font-size: 46px; line-height: 1.1; letter-spacing: -.045em; }
  .section-heading h2,
  .pricing-layout h2,
  .reseller h2,
  .why-layout>div:first-child h2,
  .faq-layout h2 { font-size: 35px; line-height: 1.16; }
}

/* v6 final cascade — concise landing page inspired by the approved visual direction. */
.container,.hero .container { width:min(100% - 56px,1240px); }
.header { height:72px; position:relative; z-index:20; border-bottom-color:rgba(18,62,100,.07); }
.main-nav { gap:34px; }
.main-nav a,.login-link { color:#3f5267; font-size:11px; }
.button { min-height:46px; padding-inline:20px; border-radius:10px; }
.button-sm { min-height:38px; }

.hero { background:radial-gradient(ellipse at 88% 18%,rgba(37,211,190,.24),transparent 29%),radial-gradient(ellipse at 5% 0%,rgba(77,143,255,.13),transparent 24%),linear-gradient(135deg,#fff 0%,#f8fbff 56%,#eefcf9 100%); }
.hero::before { display:block; inset:0; opacity:1; background:linear-gradient(143deg,transparent 0 17%,rgba(24,119,238,.035) 17.2% 17.5%,transparent 17.7%),radial-gradient(ellipse at 69% 54%,rgba(255,255,255,.85),transparent 43%); mask-image:none; }
.hero::after { display:none; }
.hero-surface { min-height:626px; padding:67px 0 64px; }
.hero-grid { grid-template-columns:.84fr 1.16fr; gap:58px; }
.hero-copy { max-width:500px; }
.eyebrow-pill { padding:6px 10px; border-color:#d9e8fa; background:#edf5ff; box-shadow:none; color:#2970c8; font-size:8px; }
.hero h1 { max-width:520px; margin:19px 0 18px; color:#0b1740; font-size:clamp(51px,4.65vw,67px); font-weight:800; line-height:1.02; letter-spacing:-.055em; }
.hero h1 em { background:linear-gradient(100deg,#1686f4 3%,#0a99dc 52%,#16b89e 100%); -webkit-background-clip:text; background-clip:text; }
.hero-copy>p { max-width:470px; color:#465d73; font-size:14px; line-height:1.68; }
.hero-actions { margin-top:26px; }
.hero-note { margin-top:15px; color:#61768a; }
.dashboard-wrap { width:100%; margin:0; padding:5px 0 12px; }
.product-demo-frame { border-radius:18px; box-shadow:0 30px 70px rgba(32,79,111,.15),0 4px 12px rgba(32,79,111,.06),0 0 0 8px rgba(255,255,255,.55); transform:rotateY(-1.5deg) rotateX(.5deg); }
.product-demo-frame .browser-chrome { height:40px; }
.product-demo { min-height:409px; grid-template-columns:58px minmax(0,1fr); }
.demo-rail { padding:14px 0; }
.demo-rail>.logo { margin-bottom:18px; }
.demo-topbar { height:60px; }
.demo-workspace { padding:21px 22px 18px; }
.demo-services article { min-height:91px; }
.float-service { top:46px; left:-28px; }
.float-progress { right:-16px; bottom:48px; }

.metrics { position:relative; z-index:3; border:0; background:rgba(255,255,255,.96); box-shadow:0 -12px 35px rgba(36,82,112,.035),0 1px 0 #edf2f6; }
.metrics-grid { min-height:104px; grid-template-columns:repeat(3,1fr) 1.35fr; }
.metrics-grid>div { gap:1px; padding-left:34px; }
.metrics-grid strong { color:#0875ee; font-size:29px; }
.metrics-grid span,.metrics-grid p { font-size:10px; }

.section { padding:112px 0; }
.section-heading { max-width:620px; margin-bottom:44px; }
.section-heading h2,.pricing-layout h2,.why-layout>div:first-child h2,.faq-layout h2,.reseller-copy h2 { font-size:clamp(36px,3.7vw,49px); line-height:1.08; letter-spacing:-.045em; }
.section-heading>p:last-child,.section-copy { max-width:560px; margin-top:13px; font-size:13px; line-height:1.7; }
.eyebrow { margin-bottom:11px; color:#1679e8; font-size:9px; }

.services-section { padding:110px 0 120px; border:0; background:#fff; }
.services-section::before { width:40%; height:100%; top:0; right:0; border-radius:0; background:linear-gradient(135deg,transparent,rgba(18,139,235,.035)); }
.services-section .section-heading { margin-bottom:42px; }
.services-section .section-heading h2 { font-size:clamp(36px,3.7vw,49px); }
.service-grid { gap:20px; }
.service-card { min-height:372px; padding:30px 32px; border-color:rgba(67,127,171,.08); border-radius:18px; box-shadow:0 15px 35px rgba(27,63,91,.06); }
.service-card.blue { background:radial-gradient(circle at 86% 48%,rgba(47,145,255,.2),transparent 27%),linear-gradient(135deg,#f7fbff,#e6f4ff); }
.service-card.ink { background:radial-gradient(circle at 87% 50%,rgba(255,112,128,.17),transparent 27%),linear-gradient(135deg,#fff,#fff0f1); color:#17213b; }
.ink .service-icon { background:#fff; color:#101828; box-shadow:0 7px 18px rgba(17,34,52,.08); }
.ink .service-top>span,.ink p,.ink .service-footer small { color:#617086; }
.ink .service-footer a { color:#0875ee; }
.service-card h3 { max-width:330px; margin:64px 0 10px; font-size:29px; }
.service-card p { max-width:370px; font-size:12px; line-height:1.65; }
.service-footer { padding-top:27px; }
.service-footer strong { font-size:15px; }

.how-section { padding:105px 0 112px; background:linear-gradient(145deg,#f5faff,#f4fbf9); }
.how-section .section-heading { margin-bottom:45px; }
.step { min-height:218px; padding-top:14px; }
.step>span { top:-9px; font-size:48px; }
.step-icon { width:56px; height:56px; margin-bottom:22px; border-radius:15px; box-shadow:none; }
.step h3 { font-size:17px; }
.step p { font-size:12px; }
.why-section { padding:116px 0; background:linear-gradient(90deg,#fff 0 54%,#f4faff 54% 100%); }
.why-layout { gap:92px; }
.why-proof { padding:26px; border-radius:18px; box-shadow:0 20px 42px rgba(22,52,84,.07); }
.why-proof::after { display:none; }
.proof-list { margin-top:24px; }
.reseller-section { padding:92px 0; background:#f7fafc; }
.reseller { gap:66px; padding:54px 58px; border-radius:24px; background:radial-gradient(circle at 92% 4%,rgba(38,211,189,.2),transparent 25%),linear-gradient(135deg,#071a31,#0a3554); box-shadow:0 26px 60px rgba(12,31,58,.17); }
.pricing-section { padding:112px 0; background:linear-gradient(145deg,#f3fbf9,#f5f9ff); }
.pricing-layout { gap:100px; }
.price-panel { border-radius:17px; box-shadow:0 18px 44px rgba(25,62,90,.09); }
.faq-section { padding:112px 0 105px; background:#fff; }
.faq-layout { gap:90px; }
.faq-list summary { padding:19px 0; }
.cta-section { padding:0 0 105px; background:#fff; }
.cta-box { min-height:188px; padding:42px 48px; border-radius:18px; background:linear-gradient(110deg,#1768f0,#0c9cdb 58%,#17b89f); box-shadow:0 22px 48px rgba(7,89,178,.16); }
.cta-box::before { display:none; }
.cta-box h2 { font-size:clamp(27px,3vw,38px); }
footer { padding-top:65px; }

@media (prefers-color-scheme:dark) and (scripting:none) {
  .metrics { background:#0d1828; }
  .services-section,.faq-section,.cta-section { background:#0b1220; }
  .service-card.ink { background:radial-gradient(circle at 87% 50%,rgba(239,80,103,.16),transparent 28%),linear-gradient(135deg,#161b2b,#261c2b); color:#f5f7fb; }
  .ink .service-top>span,.ink p,.ink .service-footer small { color:#aeb9ca; }
  .how-section,.pricing-section { background:linear-gradient(145deg,#101d2c,#0c2227); }
  .why-section { background:linear-gradient(90deg,#0b1220 0 54%,#0d1d2c 54% 100%); }
  .reseller-section { background:#101b2d; }
}
@media (max-width:1000px) {
  .hero-grid { grid-template-columns:1fr; }
  .hero-copy { max-width:650px; }
  .dashboard-wrap { max-width:760px; justify-self:start; }
  .metrics-grid { grid-template-columns:repeat(3,1fr); }
  .metrics-grid p { display:none; }
}
@media (max-width:700px) {
  .container,.hero .container { width:min(100% - 32px,1240px); }
  .hero-surface { padding:52px 0 58px; }
  .hero h1 { font-size:43px; }
  .hero-grid { gap:40px; }
  .metrics-grid { min-height:86px; }
  .metrics-grid>div { padding-left:14px; }
  .metrics-grid strong { font-size:23px; }
  .section,.services-section,.how-section,.why-section,.pricing-section,.faq-section { padding:82px 0; }
  .service-card { min-height:350px; }
  .why-section { background:linear-gradient(180deg,#fff,#f4faff); }
  .reseller-section { padding:72px 0; }
  .reseller { padding:34px 23px; }
  .cta-section { padding-bottom:78px; }
  .cta-box { padding:34px 25px; }
}