/* Shared public stylesheet: home + SEO pages. */
        :root {
            --primary: #2563eb;
            --primary-dark: #1d4ed8;
            --primary-deep: #1e3a8a;
            --primary-soft: #eff6ff;
            --primary-line: #bfdbfe;
            --primary-softer: #f6f9ff;
            --ink: #101828;
            --text: #344054;
            --muted: #667085;
            --line: #e2e8f0;
            --surface: #ffffff;
            --surface-alt: #f8fafc;
            --soft: var(--surface-alt);
            --success: #16a34a;
            --success-soft: #ecfdf3;
            --warning: #f59e0b;
            --warning-soft: #fffaeb;
            --danger: #dc2626;
            --navy: #0f172a;
            --shadow-sm: 0 8px 24px rgba(15, 23, 42, .06);
            --shadow-md: 0 18px 45px rgba(15, 23, 42, .09);
            --shadow-blue: 0 18px 36px rgba(37, 99, 235, .22);
            --radius-sm: 14px;
            --radius-md: 20px;
            --radius-lg: 28px;
            --radius: var(--radius-md);
            --container: 1200px;
        }

        *, *::before, *::after { box-sizing: border-box; }
        html { scroll-behavior: smooth; scroll-padding-top: 90px; }
        body {
            margin: 0;
            min-width: 320px;
            color: var(--text);
            background: var(--surface);
            font-family: 'Hodoorak Cairo', Cairo, Tahoma, Arial, sans-serif;
            line-height: 1.8;
            -webkit-font-smoothing: antialiased;
        }
        body.menu-open { overflow: hidden; }
        button, a { font: inherit; }
        button { color: inherit; }
        a { color: inherit; text-decoration: none; }
        img, svg { display: block; }
        h1, h2, h3, p { margin-top: 0; }
        h1, h2, h3 { color: var(--ink); line-height: 1.35; }
        .icon { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
        .svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
        .container { width: min(100% - 48px, var(--container)); margin-inline: auto; }
        .section { padding: 96px 0; position: relative; overflow: hidden; }
        .section--alt { background: var(--surface-alt); }
        .section--soft { background: var(--primary-soft); }
        .section-heading { max-width: 730px; margin: 0 auto 48px; text-align: center; }
        .section-more { margin-top: 26px; display: flex; justify-content: center; }
        .split-copy .section-more, .location-points + .section-more { justify-content: flex-start; }
        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 14px;
            color: var(--primary-dark);
            font-size: 14px;
            font-weight: 800;
        }
        .eyebrow::before { content: ''; width: 26px; height: 3px; border-radius: 99px; background: var(--primary); }
        .section-title { margin-bottom: 14px; font-size: clamp(29px, 4vw, 40px); font-weight: 800; letter-spacing: -.02em; }
        .section-lead { margin-bottom: 0; color: var(--muted); font-size: 17px; line-height: 1.95; }
        .highlight { color: var(--primary); }
        .btn {
            min-height: 48px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 9px;
            padding: 11px 23px;
            border: 1px solid transparent;
            border-radius: 13px;
            font-weight: 800;
            cursor: pointer;
            transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
        }
        .btn:hover { transform: translateY(-2px); }
        .btn:focus-visible, .nav-link:focus-visible, summary:focus-visible, .report-tab:focus-visible {
            outline: 3px solid rgba(37, 99, 235, .28);
            outline-offset: 3px;
        }
        .btn--primary { color: #fff; background: var(--primary); box-shadow: var(--shadow-blue); }
        .btn--primary:hover { background: var(--primary-dark); }
        .btn--outline { color: var(--primary-dark); background: #fff; border-color: #cbd5e1; }
        .btn--outline:hover { background: var(--primary-soft); border-color: #bfdbfe; }
        .btn--white { color: var(--primary-dark); background: #fff; box-shadow: 0 14px 30px rgba(15, 23, 42, .16); }
        .btn--ghost-white { color: #fff; border-color: rgba(255,255,255,.46); background: rgba(255,255,255,.08); }
        .btn .icon { width: 20px; height: 20px; }

        /* Header */
        .site-header {
            position: sticky;
            top: 0;
            z-index: 100;
            height: 76px;
            display: flex;
            align-items: center;
            background: rgba(255, 255, 255, .92);
            border-bottom: 1px solid transparent;
            backdrop-filter: blur(16px);
            transition: box-shadow .2s ease, border-color .2s ease;
        }
        .site-header.is-scrolled { border-color: rgba(226, 232, 240, .9); box-shadow: 0 8px 24px rgba(15, 23, 42, .06); }
        .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 26px; }
        .brand { display: inline-flex; align-items: center; gap: 11px; flex: 0 0 auto; }
        .site-header .brand { gap: 7px; }
        .brand-logo {
            width: 46px;
            height: 46px;
            display: grid;
            place-items: center;
            border-radius: 14px;
            background: #fff;
            border: 1px solid rgba(37, 99, 235, .13);
            box-shadow: 0 8px 20px rgba(37, 99, 235, .12);
        }
        .brand-logo img { width: 29px; height: 35px; object-fit: contain; }
        .site-header .brand-logo {
            width: 52px;
            height: 56px;
            border: 0;
            background: transparent;
            box-shadow: none;
        }
        .site-header .brand-logo img { width: 40px; height: 50px; }
        .brand-name { color: var(--ink); font-size: 21px; font-weight: 900; }
        .site-nav { display: flex; align-items: center; gap: 4px; }
        .nav-link { padding: 9px 11px; border-radius: 10px; color: #475467; font-size: 14px; font-weight: 700; transition: color .18s, background .18s; }
        .nav-link:hover { color: var(--primary-dark); background: var(--primary-soft); }
        .header-actions { display: flex; align-items: center; gap: 10px; }
        .header-actions .btn { min-height: 44px; padding: 9px 17px; font-size: 14px; }
        .mobile-nav-actions { display: none; }
        .menu-toggle { display: none; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 12px; background: #fff; place-items: center; cursor: pointer; }
        .menu-toggle .icon-close { display: none; }
        .menu-toggle[aria-expanded="true"] .icon-menu { display: none; }
        .menu-toggle[aria-expanded="true"] .icon-close { display: block; }

        /* Hero */
        .hero {
            padding: 76px 0 48px;
            background:
                radial-gradient(circle at 88% 10%, rgba(37, 99, 235, .15), transparent 25rem),
                radial-gradient(circle at 8% 78%, rgba(96, 165, 250, .13), transparent 24rem),
                linear-gradient(180deg, #f7faff 0%, #fff 82%);
            overflow: hidden;
            position: relative;
        }
        .hero::before {
            content: '';
            position: absolute;
            inset: 30px auto auto 4%;
            width: 210px;
            height: 150px;
            opacity: .28;
            background-image: radial-gradient(#93c5fd 1.5px, transparent 1.5px);
            background-size: 18px 18px;
        }
        .hero-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 62px; align-items: center; position: relative; }
        .hero-copy { position: relative; z-index: 2; }
        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            margin-bottom: 22px;
            padding: 8px 13px;
            border: 1px solid #bfdbfe;
            border-radius: 999px;
            color: var(--primary-dark);
            background: rgba(239, 246, 255, .82);
            font-size: 13px;
            font-weight: 800;
        }
        .hero-badge-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 5px rgba(22, 163, 74, .1); }
        .hero-title { margin-bottom: 22px; font-size: clamp(39px, 5.1vw, 58px); font-weight: 900; letter-spacing: -.035em; }
        .hero-text { max-width: 640px; margin-bottom: 29px; color: var(--muted); font-size: 18px; line-height: 2; }
        .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 27px; }
        .hero-points { display: flex; flex-wrap: wrap; gap: 12px 22px; margin: 0; padding: 0; list-style: none; }
        .hero-points li { display: flex; align-items: center; gap: 7px; color: #475467; font-size: 13px; font-weight: 700; }
        .check-dot { width: 22px; height: 22px; display: grid; place-items: center; color: var(--success); border-radius: 50%; background: var(--success-soft); }
        .check-dot .icon { width: 14px; height: 14px; stroke-width: 2.5; }
        .hero-visual { min-width: 0; position: relative; padding: 24px 8px 20px 28px; }
        .hero-glow { position: absolute; inset: 8% 8% 10% 2%; border-radius: 50%; background: rgba(37, 99, 235, .18); filter: blur(55px); }
        .hero-phone-stage { min-height: 520px; display: grid; place-items: center; position: relative; z-index: 2; }
        .hero-phone-stage::before {
            content: '';
            position: absolute;
            width: 430px;
            height: 430px;
            border: 1px solid rgba(96,165,250,.2);
            border-radius: 50%;
            background: radial-gradient(circle, rgba(219,234,254,.88) 0%, rgba(239,246,255,.72) 54%, rgba(255,255,255,0) 72%);
            box-shadow: 0 0 0 34px rgba(37,99,235,.035), 0 0 0 70px rgba(37,99,235,.018);
        }
        .hero-phone-stage .phone { width: 280px; transform: translateX(8px) rotate(-1.5deg); box-shadow: 0 34px 76px rgba(15,23,42,.26); }
        .hero-phone-stage .phone-screen { min-height: 490px; }
        .browser-frame { position: relative; z-index: 2; overflow: hidden; border: 1px solid rgba(148, 163, 184, .35); border-radius: 22px; background: #fff; box-shadow: 0 28px 70px rgba(30, 64, 175, .18); transform: perspective(1100px) rotateY(3deg) rotateX(1deg); }
        .browser-top { height: 39px; display: flex; align-items: center; gap: 7px; padding: 0 15px; border-bottom: 1px solid var(--line); background: #f8fafc; }
        .browser-dot { width: 8px; height: 8px; border-radius: 50%; background: #cbd5e1; }
        .browser-address { width: 44%; height: 15px; margin-inline-start: 10px; border-radius: 99px; background: #e9eef5; }
        .mock-app { height: 390px; display: grid; grid-template-columns: 94px 1fr; direction: ltr; }
        .mock-sidebar { padding: 18px 12px; color: #fff; background: linear-gradient(180deg, var(--primary), var(--primary-dark)); }
        .mock-side-brand { width: 36px; height: 36px; margin: 0 auto 28px; border-radius: 11px; background: rgba(255,255,255,.94); }
        .mock-nav-item { height: 9px; margin: 0 6px 16px; border-radius: 99px; background: rgba(255,255,255,.34); }
        .mock-nav-item.active { height: 27px; margin-inline: 0; background: rgba(255,255,255,.22); border: 1px solid rgba(255,255,255,.24); }
        .mock-content { min-width: 0; padding: 21px; background: #f8fafc; direction: rtl; }
        .mock-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 17px; }
        .mock-heading-lines span { display: block; height: 8px; border-radius: 99px; background: #cbd5e1; }
        .mock-heading-lines span:first-child { width: 105px; height: 12px; margin-bottom: 8px; background: #334155; }
        .mock-heading-lines span:last-child { width: 160px; }
        .mock-avatar { width: 34px; height: 34px; border-radius: 50%; background: #dbeafe; }
        .mock-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 13px; }
        .mock-stat { min-width: 0; padding: 13px; border: 1px solid #e5eaf1; border-radius: 13px; background: #fff; }
        .mock-stat-icon { width: 27px; height: 27px; margin-bottom: 11px; border-radius: 8px; background: #dbeafe; }
        .mock-stat strong { display: block; color: #1e293b; font-size: 16px; line-height: 1; }
        .mock-stat small { color: #94a3b8; font-size: 7px; }
        .mock-panels { display: grid; grid-template-columns: 1.25fr .75fr; gap: 10px; }
        .mock-panel { padding: 13px; border: 1px solid #e5eaf1; border-radius: 13px; background: #fff; }
        .mock-panel-title { width: 92px; height: 8px; margin-bottom: 19px; border-radius: 99px; background: #475569; }
        .bar-chart { height: 115px; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; padding-top: 10px; border-bottom: 1px solid #e2e8f0; }
        .bar-chart span { flex: 1; max-width: 20px; border-radius: 5px 5px 0 0; background: linear-gradient(180deg, #60a5fa, #2563eb); }
        .bar-height--68 { height: 68%; }
        .bar-height--74 { height: 74%; }
        .bar-height--82 { height: 82%; }
        .bar-height--88 { height: 88%; }
        .bar-height--91 { height: 91%; }
        .bar-height--96 { height: 96%; }
        .mini-list { display: grid; gap: 10px; }
        .mini-list-row { display: grid; grid-template-columns: 25px 1fr; gap: 8px; align-items: center; }
        .mini-list-avatar { width: 25px; height: 25px; border-radius: 50%; background: #e0e7ff; }
        .mini-list-lines span { display: block; height: 5px; border-radius: 99px; background: #e2e8f0; }
        .mini-list-lines span:first-child { width: 85%; margin-bottom: 5px; background: #94a3b8; }
        .floating-card { position: absolute; z-index: 5; display: flex; align-items: center; gap: 11px; padding: 12px 14px; border: 1px solid rgba(226,232,240,.94); border-radius: 15px; background: rgba(255,255,255,.96); box-shadow: var(--shadow-md); backdrop-filter: blur(8px); }
        .floating-card--attendance { top: 0; right: -24px; }
        .floating-card--hours { bottom: 0; left: -10px; }
        .floating-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; color: var(--primary); background: var(--primary-soft); }
        .floating-icon.success { color: var(--success); background: var(--success-soft); }
        .floating-icon .icon { width: 20px; height: 20px; }
        .floating-copy strong { display: block; color: var(--ink); font-size: 13px; line-height: 1.45; }
        .floating-copy span { color: var(--muted); font-size: 11px; }



        /* Trust bar */
        .trust-wrap { position: relative; z-index: 3; margin-top: 42px; }
        .trust-bar { display: grid; grid-template-columns: repeat(4, 1fr); padding: 18px 8px; border: 1px solid var(--line); border-radius: 19px; background: var(--surface); box-shadow: var(--shadow-sm); }
        .trust-item { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 40px; padding: 0 15px; color: #475467; font-size: 14px; font-weight: 800; border-left: 1px solid var(--line); }
        .trust-item:last-child { border-left: 0; }
        .trust-item .icon { color: var(--primary); width: 21px; height: 21px; }

        /* Cards */
        .cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
        .cards-3--4 { grid-template-columns: repeat(4, 1fr); }
        .feature-card { padding: 27px; border: 1px solid var(--line); border-radius: var(--radius-md); background: #fff; box-shadow: 0 10px 30px rgba(15,23,42,.035); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
        .feature-card:hover { transform: translateY(-4px); border-color: #bfdbfe; box-shadow: var(--shadow-md); }
        .feature-card--text-only { min-height: 100%; }
        .icon-box { width: 50px; height: 50px; display: grid; place-items: center; margin-bottom: 20px; color: var(--primary); border-radius: 15px; background: var(--primary-soft); }
        .icon-box .icon { width: 25px; height: 25px; }
        .feature-card h3 { margin-bottom: 10px; font-size: 19px; font-weight: 800; }
        .feature-card p { margin-bottom: 0; color: var(--muted); font-size: 14px; }
        .solution-banner { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-top: 25px; padding: 29px 34px; border-radius: var(--radius-md); color: #fff; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); box-shadow: var(--shadow-blue); }
        .solution-banner .icon-box { flex: 0 0 auto; margin: 0; color: #fff; background: rgba(255,255,255,.14); }
        .solution-copy { flex: 1; }
        .solution-copy h3 { margin-bottom: 5px; color: #fff; font-size: 22px; }
        .solution-copy p { margin-bottom: 0; color: rgba(255,255,255,.85); font-size: 14px; }
        .solution-banner-action { flex: 0 0 auto; white-space: nowrap; box-shadow: 0 12px 26px rgba(15, 23, 42, .15); }

        /* Steps */
        .steps { display: grid; grid-template-columns: repeat(4, 1fr); position: relative; }
        .steps::before { content: ''; position: absolute; top: 31px; right: 12.5%; left: 12.5%; height: 2px; background: #dbeafe; }
        .step { position: relative; z-index: 1; padding: 0 20px; text-align: center; }
        .step-number { width: 64px; height: 64px; display: grid; place-items: center; margin: 0 auto 19px; color: #fff; border: 7px solid #eff6ff; border-radius: 50%; background: var(--primary); box-shadow: 0 8px 22px rgba(37,99,235,.2); font-size: 18px; font-weight: 900; }
        .step h3 { margin-bottom: 7px; font-size: 17px; }
        .step p { margin-bottom: 0; color: var(--muted); font-size: 13px; }

        /* Split product sections */
        .product-split { display: grid; grid-template-columns: .9fr 1.1fr; gap: 72px; align-items: center; }
        .product-split.reverse { grid-template-columns: 1.1fr .9fr; }
        .split-copy .section-title { margin-bottom: 16px; }
        .split-copy .section-lead { margin-bottom: 27px; }
        .feature-list { display: grid; gap: 15px; margin: 0; padding: 0; list-style: none; }
        .feature-list li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: start; }
        .feature-list .mini-icon { width: 40px; height: 40px; display: grid; place-items: center; color: var(--primary); border-radius: 12px; background: #fff; box-shadow: var(--shadow-sm); }
        .feature-list .mini-icon .icon { width: 20px; height: 20px; }
        .feature-list strong { display: block; margin-bottom: 2px; color: var(--ink); font-size: 15px; }
        .feature-list span { display: block; color: var(--muted); font-size: 13px; }
        .phone-stage { min-height: 540px; display: grid; place-items: center; position: relative; }
        .phone-stage::before { content: ''; position: absolute; width: 380px; height: 380px; border-radius: 50%; background: rgba(96,165,250,.17); }
        .phone { width: 260px; position: relative; z-index: 2; padding: 11px; border: 6px solid #0f172a; border-radius: 38px; background: #0f172a; box-shadow: 0 30px 60px rgba(15,23,42,.22); }
        .phone-notch { position: absolute; z-index: 3; top: 13px; left: 50%; width: 82px; height: 20px; transform: translateX(-50%); border-radius: 99px; background: #0f172a; }
        .phone-screen { min-height: 485px; overflow: hidden; padding: 36px 17px 20px; border-radius: 27px; background: linear-gradient(180deg, #eff6ff 0%, #fff 44%); }
        .phone-brand { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
        .phone-logo { display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: 13px; font-weight: 900; }
        .phone-logo img { width: 22px; height: 27px; object-fit: contain; }
        .phone-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); }
        .phone-welcome { margin-bottom: 17px; }
        .phone-welcome strong { display: block; color: var(--ink); font-size: 17px; }
        .phone-welcome span { color: var(--muted); font-size: 11px; }
        .phone-state { padding: 11px; border: 1px solid #dbeafe; border-radius: 13px; color: var(--primary-dark); background: rgba(255,255,255,.9); text-align: center; font-size: 11px; font-weight: 800; }
        .attendance-actions { display: flex; justify-content: center; gap: 14px; margin: 28px 0 24px; }
        .attendance-action { width: 88px; height: 88px; display: grid; place-items: center; align-content: center; gap: 2px; border-radius: 50%; color: #fff; background: linear-gradient(145deg, var(--primary), var(--primary-dark)); box-shadow: 0 15px 26px rgba(37,99,235,.22); }
        .attendance-action.checkout { color: var(--primary-dark); border: 2px solid #bfdbfe; background: #eff6ff; box-shadow: none; }
        .attendance-action .icon { width: 26px; height: 26px; }
        .attendance-action span { font-size: 11px; font-weight: 900; }
        .phone-info { display: grid; gap: 8px; }
        .phone-info-row { display: flex; align-items: center; justify-content: space-between; padding: 9px 10px; border-radius: 10px; background: #f8fafc; color: var(--muted); font-size: 9px; }
        .phone-info-row strong { color: var(--ink); }
        .admin-visual { position: relative; }
        .admin-visual .browser-frame { transform: none; }
        .admin-badge { position: absolute; z-index: 4; left: -18px; bottom: -18px; padding: 14px 17px; border-radius: 15px; color: #fff; background: var(--primary); box-shadow: var(--shadow-blue); font-size: 13px; font-weight: 800; }
        .feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
        .feature-mini { display: flex; align-items: flex-start; gap: 11px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
        .feature-mini .icon { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 2px; color: var(--primary); }
        .feature-mini strong { display: block; color: var(--ink); font-size: 13px; }
        .feature-mini span { display: block; color: var(--muted); font-size: 11px; }

        /* Location */
        .location-section { color: #dbeafe; background: radial-gradient(circle at 18% 35%, rgba(59,130,246,.2), transparent 25rem), linear-gradient(135deg, #0f172a, #172554); }
        .location-section .section-title, .location-section h3 { color: #fff; }
        .location-section .section-lead { color: #cbd5e1; }
        .location-section .eyebrow { color: #93c5fd; }
        .location-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 70px; align-items: center; }
        .location-points { display: grid; gap: 13px; margin-top: 24px; }
        .location-point { display: flex; gap: 11px; align-items: center; color: #dbeafe; font-size: 14px; }
        .location-point .icon { width: 19px; height: 19px; color: #60a5fa; }
        .map-visual { min-height: 400px; display: grid; place-items: center; position: relative; }
        .map-grid { position: absolute; inset: 2%; opacity: .12; background-image: linear-gradient(rgba(255,255,255,.4) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.4) 1px, transparent 1px); background-size: 32px 32px; mask-image: radial-gradient(circle, #000 45%, transparent 76%); }
        .geo-circle { width: 260px; height: 260px; position: relative; display: grid; place-items: center; border: 1px solid rgba(96,165,250,.72); border-radius: 50%; background: rgba(37,99,235,.08); box-shadow: 0 0 0 34px rgba(37,99,235,.055), 0 0 0 70px rgba(37,99,235,.03); }
        .geo-circle::before, .geo-circle::after { content: ''; position: absolute; background: rgba(96,165,250,.24); }
        .geo-circle::before { width: 1px; height: 138%; }
        .geo-circle::after { width: 138%; height: 1px; }
        .work-pin { position: relative; z-index: 2; width: 70px; height: 70px; display: grid; place-items: center; border: 7px solid rgba(255,255,255,.14); border-radius: 50%; color: #fff; background: var(--primary); box-shadow: 0 0 0 12px rgba(37,99,235,.2); }
        .work-pin .icon { width: 28px; height: 28px; }
        .person-pin { position: absolute; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 11px; color: #fff; background: rgba(15,23,42,.9); border: 1px solid rgba(255,255,255,.13); box-shadow: var(--shadow-md); font-size: 10px; font-weight: 800; }
        .person-pin::before { content: ''; width: 9px; height: 9px; border-radius: 50%; }
        .person-pin.inside { top: 18%; right: 6%; }
        .person-pin.inside::before { background: #22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,.13); }
        .person-pin.outside { bottom: 7%; left: -29%; }
        .person-pin.outside::before { background: #ef4444; box-shadow: 0 0 0 4px rgba(239,68,68,.13); }

        /* Reports */
        .report-tabs { width: fit-content; display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin: 0 auto 30px; padding: 6px; border: 1px solid var(--line); border-radius: 15px; background: #fff; }
        .report-tab { padding: 9px 16px; border: 0; border-radius: 10px; color: var(--muted); background: transparent; font-weight: 800; cursor: pointer; }
        .report-tab.active { color: #fff; background: var(--primary); box-shadow: 0 8px 18px rgba(37,99,235,.18); }
        .report-panel { display: none; grid-template-columns: .62fr 1.38fr; gap: 28px; align-items: stretch; padding: 26px; border: 1px solid var(--line); border-radius: 24px; background: #fff; box-shadow: var(--shadow-sm); }
        .report-panel.active { display: grid; }
        .report-summary { padding: 15px 10px; }
        .report-summary h3 { margin-bottom: 10px; font-size: 24px; }
        .report-summary p { margin-bottom: 20px; color: var(--muted); font-size: 14px; }
        .report-summary ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
        .report-summary li { display: flex; align-items: center; gap: 9px; color: #475467; font-size: 13px; font-weight: 700; }
        .report-summary li .icon { width: 17px; height: 17px; color: var(--success); stroke-width: 2.5; }
        .report-table-wrap { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
        .report-topline { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 15px; border-bottom: 1px solid var(--line); background: #f8fafc; }
        .report-topline strong { color: var(--ink); font-size: 13px; }
        .fake-export { display: flex; align-items: center; gap: 5px; padding: 5px 8px; color: var(--primary); border: 1px solid #bfdbfe; border-radius: 7px; background: var(--primary-soft); font-size: 9px; font-weight: 800; }
        .fake-export .icon { width: 12px; height: 12px; }
        .report-table { width: 100%; border-collapse: collapse; font-size: 10px; }
        .report-table th, .report-table td { padding: 12px 8px; text-align: right; border-bottom: 1px solid #edf0f4; white-space: nowrap; }
        .report-table th { color: var(--muted); background: #fbfcfe; font-weight: 800; }
        .report-table td { color: #475467; }
        .report-table tr:last-child td { border-bottom: 0; }
        .status-pill { display: inline-flex; padding: 3px 7px; border-radius: 99px; color: var(--success); background: var(--success-soft); font-weight: 800; }
        .status-pill.warning { color: #b54708; background: var(--warning-soft); }
        .progress { width: 68px; height: 6px; overflow: hidden; border-radius: 99px; background: #e2e8f0; }
        .progress span { display: block; height: 100%; border-radius: inherit; background: var(--primary); }
        .progress-value--90 { width: 90%; }
        .progress-value--95 { width: 95%; }
        .progress-value--100 { width: 100%; }

        /* Audiences and reasons */
        .audience-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
        .audience-card { padding: 22px 12px; border: 1px solid var(--line); border-radius: 17px; background: #fff; text-align: center; transition: transform .2s, border-color .2s, box-shadow .2s; }
        .audience-card:hover { transform: translateY(-3px); border-color: #bfdbfe; box-shadow: var(--shadow-sm); }
        .audience-card .icon-box { width: 46px; height: 46px; margin: 0 auto 13px; }
        .audience-card h3 { margin-bottom: 0; font-size: 14px; }
        .reason-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

        /* Pricing */
        .pricing-section {
            background:
                radial-gradient(circle at 90% 8%, rgba(37,99,235,.11), transparent 25rem),
                radial-gradient(circle at 4% 92%, rgba(96,165,250,.09), transparent 22rem),
                var(--surface-alt);
        }
        .pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
        .pricing-card {
            min-width: 0;
            position: relative;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            padding: 27px 23px 23px;
            border: 1px solid #dbeafe;
            border-radius: 22px;
            background: #fff;
            box-shadow: 0 12px 34px rgba(15,23,42,.055);
            transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
        }
        .pricing-card--free {
            border-color: #bbf7d0;
            background: linear-gradient(180deg, #f0fdf4 0%, #fff 38%);
        }
        .pricing-card--free::before { background: linear-gradient(90deg, #4ade80, #16a34a, #15803d); }
        .pricing-card--free:hover { border-color: #86efac; }
        .pricing-card--free .pricing-capacity { color: #166534; background: #dcfce7; }
        .pricing-card--free .pricing-price strong { color: #15803d; }
        .pricing-card--free .pricing-details { margin-bottom: auto; }
        .pricing-card--custom {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            align-items: center;
            gap: 26px;
            margin-top: 18px;
            padding: 25px 27px;
            border-color: #bfdbfe;
            background: linear-gradient(135deg, #eff6ff 0%, #fff 70%);
        }
        .pricing-card--custom:hover { transform: translateY(-3px); }
        .pricing-custom-content { display: grid; gap: 7px; }
        .pricing-card--custom .pricing-capacity { margin-bottom: 4px; }
        .pricing-card--custom h3 { margin: 0; color: var(--primary-deep); font-size: clamp(20px, 2.2vw, 27px); }
        .pricing-card--custom p { max-width: 720px; margin: 0; color: #475467; font-size: 14px; line-height: 1.9; }
        .pricing-card--custom .btn { width: auto; min-width: 155px; }
        .pricing-card::before {
            content: '';
            position: absolute;
            inset: 0 0 auto;
            height: 4px;
            background: linear-gradient(90deg, #60a5fa, var(--primary), var(--primary-dark));
        }
        .pricing-card:hover { transform: translateY(-5px); border-color: #93c5fd; box-shadow: var(--shadow-md); }
        .pricing-capacity {
            width: fit-content;
            margin-bottom: 19px;
            padding: 6px 11px;
            border-radius: 999px;
            color: var(--primary-dark);
            background: var(--primary-soft);
            font-size: 13px;
            font-weight: 900;
        }
        .pricing-regular {
            display: flex;
            align-items: center;
            gap: 7px;
            margin-bottom: 4px;
            color: var(--muted);
            font-size: 13px;
        }
        .pricing-regular del { color: #98a2b3; font-size: 16px; font-weight: 800; text-decoration-thickness: 1.5px; }
        .pricing-price { display: flex; align-items: flex-end; gap: 7px; margin-bottom: 9px; color: var(--ink); }
        .pricing-price strong { color: var(--primary-dark); font-size: clamp(31px, 3.3vw, 42px); font-weight: 900; line-height: 1; letter-spacing: -.03em; }
        .pricing-price span { padding-bottom: 2px; color: var(--text); font-size: 13px; font-weight: 800; white-space: nowrap; }
        .pricing-saving {
            width: fit-content;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            margin-bottom: 21px;
            padding: 5px 9px;
            border-radius: 9px;
            color: #067647;
            background: var(--success-soft);
            font-size: 13px;
            font-weight: 900;
        }
        .pricing-details {
            display: grid;
            gap: 10px;
            margin: 0 0 22px;
            padding: 17px 0;
            border-top: 1px solid var(--line);
            border-bottom: 1px solid var(--line);
            list-style: none;
        }
        .pricing-details li { display: flex; align-items: flex-start; gap: 8px; color: #475467; font-size: 13px; font-weight: 700; }
        .pricing-details .icon { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 4px; color: var(--success); stroke-width: 2.5; }
        .pricing-annual { margin: auto 0 17px; color: var(--muted); font-size: 13px; }
        .pricing-annual strong { display: block; margin-top: 2px; color: var(--ink); font-size: 18px; }
        .pricing-card .btn { width: 100%; min-height: 45px; padding: 9px 13px; font-size: 13px; box-shadow: none; }
        .pricing-support {
            width: 100%;
            display: grid;
            gap: 16px;
            margin: 28px auto 0;
        }
        .pricing-support > * {
            width: 100%;
            max-width: none;
            box-sizing: border-box;
        }
        .pricing-note {
            width: 100%;
            display: grid;
            grid-template-columns: auto 1fr;
            gap: 15px;
            align-items: start;
            margin: 0;
            padding: 21px 23px;
            border: 1px solid #bfdbfe;
            border-radius: 18px;
            color: #1e3a5f;
            background: rgba(239,246,255,.88);
        }
        .pricing-note .icon-box { width: 43px; height: 43px; margin: 0; border-radius: 13px; background: #fff; }
        .pricing-note strong { display: block; margin-bottom: 3px; color: var(--primary-deep); font-size: 15px; }
        .pricing-note p { margin-bottom: 0; color: #475467; font-size: 13px; }
        .pricing-note b { color: var(--primary-dark); }
        /* Company custom solutions */
        .company-solutions-section {
            color: #dbeafe;
            background:
                radial-gradient(circle at 18% 35%, rgba(59,130,246,.2), transparent 25rem),
                linear-gradient(135deg, #0f172a, #172554);
        }
        .company-solutions-section .section-title { color: #fff; }
        .company-solutions-section .section-lead { color: #cbd5e1; }
        .company-solutions-section .eyebrow { color: #93c5fd; }
        .company-solutions-section .eyebrow::before { background: #60a5fa; }
        .company-solutions-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
        .company-solution-card {
            min-height: 220px;
            padding: 25px 22px;
            border: 1px solid rgba(147,197,253,.18);
            border-radius: 19px;
            background: rgba(15,23,42,.42);
            box-shadow: 0 14px 34px rgba(2,6,23,.16);
            backdrop-filter: blur(8px);
            transition: transform .2s, border-color .2s, background .2s, box-shadow .2s;
        }
        .company-solution-card:hover {
            transform: translateY(-3px);
            border-color: rgba(96,165,250,.62);
            background: rgba(30,41,59,.7);
            box-shadow: 0 18px 38px rgba(2,6,23,.24);
        }
        .company-solution-card .icon-box {
            margin-bottom: 17px;
            color: #60a5fa;
            background: rgba(37,99,235,.16);
            border: 1px solid rgba(96,165,250,.12);
        }
        .company-solution-card h3 { margin-bottom: 8px; color: #fff; font-size: 17px; }
        .company-solution-card p { margin: 0; color: #cbd5e1; font-size: 13px; line-height: 1.9; }
        .company-solutions-cta {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            align-items: center;
            gap: 28px;
            margin-top: 24px;
            padding: 29px 32px;
            border: 1px solid rgba(255,255,255,.12);
            border-radius: 20px;
            color: #fff;
            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
            box-shadow: 0 18px 42px rgba(2,6,23,.28);
        }
        .company-solutions-cta strong { display: block; margin-bottom: 6px; color: #fff; font-size: 20px; font-weight: 900; }
        .company-solutions-cta p { max-width: 760px; margin: 0; color: rgba(255,255,255,.9); font-size: 13px; line-height: 1.9; }
        .company-solutions-cta .btn { white-space: nowrap; }

        /* FAQ */
        .faq-list { max-width: 860px; display: grid; gap: 12px; margin: 0 auto; }
        .faq-item { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: #fff; transition: border-color .2s, box-shadow .2s; }
        .faq-item[open] { border-color: #bfdbfe; box-shadow: var(--shadow-sm); }
        .faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 19px 21px; color: var(--ink); font-weight: 800; cursor: pointer; list-style: none; }
        .faq-item summary::-webkit-details-marker { display: none; }
        .faq-toggle { width: 28px; height: 28px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 9px; color: var(--primary); background: var(--primary-soft); font-size: 20px; line-height: 1; }
        .faq-toggle::before { content: '+'; }
        .faq-item[open] .faq-toggle::before { content: '−'; }
        .faq-answer { padding: 0 21px 20px; color: var(--muted); font-size: 14px; }
        .faq-answer p { margin-bottom: 0; }

        /* CTA + Footer */
        .cta-section { padding: 76px 0; }
        .cta-card { position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr auto; gap: 35px; align-items: center; padding: 50px 54px; border-radius: var(--radius-lg); color: #fff; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); box-shadow: 0 25px 60px rgba(37,99,235,.24); }
        .cta-card::before, .cta-card::after { content: ''; position: absolute; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; }
        .cta-card::before { width: 230px; height: 230px; top: -145px; right: -50px; }
        .cta-card::after { width: 310px; height: 310px; bottom: -255px; left: 25%; }
        .cta-copy, .cta-actions { position: relative; z-index: 2; }
        .cta-copy h2 { margin-bottom: 10px; color: #fff; font-size: clamp(28px, 4vw, 39px); }
        .cta-copy p { max-width: 670px; margin-bottom: 0; color: rgba(255,255,255,.84); font-size: 16px; }
        .cta-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
        .site-footer { padding: 64px 0 22px; color: #cbd5e1; background: var(--navy); }
        .footer-grid { display: grid; grid-template-columns: 1.3fr .65fr .72fr .78fr 1fr; gap: 34px; padding-bottom: 44px; }
        .footer-brand .brand-name { color: #fff; }
        .footer-brand .brand-logo { background: #fff; }
        .footer-description { max-width: 380px; margin: 18px 0 0; color: #94a3b8; font-size: 14px; }
        .footer-title { margin-bottom: 17px; color: #fff; font-size: 15px; }
        .footer-links { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
        .footer-brand-links { margin-top: 18px; }
        .footer-links a { color: #cbd5e1; font-size: 13px; transition: color .18s; }
        .footer-links a:hover { color: #60a5fa; }
        .contact-link { display: flex; align-items: center; gap: 9px; }
        .contact-link .icon { width: 17px; height: 17px; color: #60a5fa; }
        .footer-bottom { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 18px; padding-top: 20px; border-top: 1px solid rgba(148,163,184,.16); color: #94a3b8; font-size: 12px; }
        .footer-copyright { justify-self: start; }
        .footer-bottom-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; justify-self: end; gap: 14px; }
        .footer-bottom a { color: #bfdbfe; font-weight: 800; }
        .footer-developer-credit { justify-self: center; }

        /* Fixed page actions */
        .fixed-page-action {
            width: 58px;
            height: 58px;
            position: fixed;
            bottom: 24px;
            z-index: 95;
            display: grid;
            place-items: center;
            padding: 0;
            border: 0;
            border-radius: 50%;
            color: #fff;
            cursor: pointer;
            box-shadow: 0 12px 28px rgba(15,23,42,.22);
            transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease, visibility .2s ease;
        }
        .fixed-page-action:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 16px 34px rgba(15,23,42,.27); }
        .fixed-page-action:focus-visible { outline: 3px solid rgba(37,99,235,.3); outline-offset: 4px; }
        .fixed-page-action svg { width: 29px; height: 29px; }
        .whatsapp-float { left: 24px; background: #25d366; }
        .whatsapp-float:hover { background: #1fbd5b; }
        .scroll-top {
            left: 24px;
            bottom: 94px;
            background: var(--primary);
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transform: translateY(12px);
        }
        .scroll-top.scroll-top--standalone { bottom: 24px; }
        .scroll-top.is-visible { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
        .scroll-top.is-visible:hover { transform: translateY(-3px) scale(1.03); }
        .scroll-top svg { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

        .js .reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
        .js .reveal.is-visible { opacity: 1; transform: translateY(0); }

        @media (min-width: 861px) {
            .hero-points {
                display: grid;
                grid-template-columns: repeat(2, max-content);
                grid-auto-flow: row;
                justify-content: start;
            }
        }

        @media (max-width: 1160px) {
            .pricing-grid { grid-template-columns: repeat(2, 1fr); }
        }

        @media (max-width: 1050px) {
            .cards-3--4 { grid-template-columns: repeat(2, 1fr); }
            .menu-toggle { display: grid; }
            .header-actions { margin-right: auto; }
            .header-actions > .btn { display: none; }
            .site-nav {
                position: fixed;
                top: 76px;
                right: 16px;
                left: 16px;
                display: grid;
                gap: 3px;
                padding: 13px;
                border: 1px solid var(--line);
                border-radius: 17px;
                background: #fff;
                box-shadow: var(--shadow-md);
                opacity: 0;
                visibility: hidden;
                transform: translateY(-10px);
                transition: .2s ease;
            }
            .site-nav.open { opacity: 1; visibility: visible; transform: translateY(0); }
            .nav-link { padding: 11px 13px; font-size: 14px; }
            .mobile-nav-actions {
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 9px;
                margin-top: 8px;
                padding-top: 12px;
                border-top: 1px solid var(--line);
            }
            .mobile-nav-actions .btn { width: 100%; min-width: 0; padding-inline: 10px; }
            .hero-grid, .product-split, .product-split.reverse, .location-grid { gap: 38px; }
            .hero-grid { grid-template-columns: .95fr 1.05fr; }
            .audience-grid { grid-template-columns: repeat(3, 1fr); }
        }

        @media (max-width: 860px) {
            .container { width: min(100% - 32px, var(--container)); }
            .section { padding: 68px 0; }
            .site-header { height: 68px; }
            .site-nav { top: 68px; }
            .hero { padding: 58px 0 40px; }
            .hero-grid, .product-split, .product-split.reverse, .location-grid { grid-template-columns: 1fr; }
            .hero-grid { gap: 48px; }
            .hero-copy { text-align: center; }
            .hero-text { margin-inline: auto; }
            .hero-actions, .hero-points { justify-content: center; }
            .hero-visual { max-width: 680px; margin-inline: auto; }
            .hero-phone-stage .phone { transform: none; }
            .trust-wrap { margin-top: 36px; }
            .trust-bar { grid-template-columns: repeat(2, 1fr); }
            .trust-item { border-bottom: 1px solid var(--line); }
            .trust-item:nth-child(2) { border-left: 0; }
            .trust-item:nth-child(n+3) { border-bottom: 0; }
            .cards-3, .reason-grid { grid-template-columns: 1fr; }
            .steps { grid-template-columns: repeat(2, 1fr); row-gap: 35px; }
            .steps::before { display: none; }
            .product-split .split-copy, .product-split.reverse .split-copy { order: 1; }
            .product-split > :not(.split-copy), .product-split.reverse > :not(.split-copy) { order: 2; }
            .split-copy { text-align: center; }
            .feature-list { max-width: 590px; margin-inline: auto; text-align: right; }
            .phone-stage { min-height: 520px; }
            .admin-visual { max-width: 690px; margin-inline: auto; }
            .location-grid { text-align: center; }
            .location-points { width: fit-content; margin-inline: auto; text-align: right; }
            .map-visual { min-height: 370px; }
            .report-panel { grid-template-columns: 1fr; }
            .report-summary { text-align: center; }
            .report-summary ul { width: fit-content; margin-inline: auto; text-align: right; }
            .company-solutions-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
            .company-solutions-cta { grid-template-columns: 1fr; text-align: center; }
            .company-solutions-cta .btn { justify-self: center; }
            .cta-card { grid-template-columns: 1fr; padding: 40px 30px; text-align: center; }
            .cta-actions { justify-content: center; }
            .footer-grid { grid-template-columns: repeat(2, 1fr); }
        }

        @media (max-width: 560px) {
            html { scroll-padding-top: 76px; }
            .brand-name { font-size: 18px; }
            .brand-logo { width: 42px; height: 42px; }
            .hero-title { font-size: 35px; }
            .hero-text, .section-lead { font-size: 15px; }
            .hero-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
            .hero-actions .btn { width: 100%; min-width: 0; padding-inline: 10px; white-space: nowrap; }
            .hero-points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; gap: 12px 10px; width: 100%; max-width: 400px; margin-inline: auto; text-align: right; }
            .hero-points li { min-width: 0; }
            .hero-visual { width: 100%; max-width: none; margin-inline: 0; padding: 22px 0 30px; }
            .hero-phone-stage { min-height: 500px; }
            .hero-phone-stage::before { width: 320px; height: 320px; box-shadow: 0 0 0 24px rgba(37,99,235,.03); }
            .hero-phone-stage .phone { width: 250px; }
            .hero-phone-stage .phone-screen { min-height: 460px; }
            .mock-app { height: auto; min-height: 350px; grid-template-columns: 58px 1fr; }
            .mock-sidebar { padding-inline: 8px; }
            .mock-content { padding: 12px; }
            .mock-stats { grid-template-columns: repeat(2, 1fr); }
            .mock-stat:last-child { display: none; }
            .mock-panels { grid-template-columns: 1fr; }
            .mock-panels .mock-panel:last-child { display: none; }
            .floating-card--attendance { right: -5px; }
            .floating-card--hours { left: -4px; }
            .floating-card { padding: 9px 10px; }
            .trust-wrap { margin-top: 30px; }
            .trust-item { justify-content: flex-start; padding: 9px 12px; font-size: 12px; }
            .solution-banner { align-items: stretch; flex-direction: column; padding: 24px; }
            .solution-banner .icon-box { display: none; }
            .solution-banner-action { width: 100%; margin-top: 2px; }
            .steps { grid-template-columns: 1fr; }
            .step { max-width: 340px; margin-inline: auto; }
            .feature-grid { grid-template-columns: 1fr; }
            .geo-circle { width: 215px; height: 215px; }
            .person-pin.outside { left: -15%; }
            .report-tabs { width: 100%; display: grid; grid-template-columns: 1fr; }
            .report-panel { padding: 15px; }
            .report-table-wrap { overflow-x: auto; }
            .report-table { min-width: 520px; }
            .audience-grid { grid-template-columns: repeat(2, 1fr); }
            .pricing-grid { grid-template-columns: 1fr; }
            .pricing-card { padding: 25px 21px 21px; }
            .pricing-card--custom { grid-template-columns: 1fr; gap: 18px; }
            .pricing-card--custom .btn { width: 100%; }
            .pricing-price strong { font-size: 40px; }
            .pricing-note { grid-template-columns: 1fr; text-align: center; }
            .pricing-note .icon-box { margin-inline: auto; }
            .company-solutions-grid { grid-template-columns: 1fr; }
            .company-solution-card { min-height: 0; }
            .company-solutions-cta { padding: 24px 20px; text-align: center; }
            .company-solutions-cta .btn { width: 100%; justify-self: stretch; }
            .fixed-page-action { width: 52px; height: 52px; bottom: calc(16px + env(safe-area-inset-bottom)); }
            .fixed-page-action svg { width: 26px; height: 26px; }
            .whatsapp-float { left: 16px; }
            .scroll-top { left: 16px; bottom: calc(80px + env(safe-area-inset-bottom)); }
            .scroll-top.scroll-top--standalone { bottom: calc(16px + env(safe-area-inset-bottom)); }
            .footer-grid { grid-template-columns: 1fr; gap: 30px; }
            .footer-bottom { grid-template-columns: 1fr; justify-items: center; gap: 13px; text-align: center; }
            .footer-copyright,
            .footer-developer-credit,
            .footer-bottom-links { justify-self: center; }
            .footer-bottom-links { justify-content: center; }
            .cta-actions { display: grid; }
            .cta-actions .btn { width: 100%; }
        }

        @media (prefers-reduced-motion: reduce) {
            html { scroll-behavior: auto; }
            *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
            .js .reveal { opacity: 1; transform: none; }
        }
body.seo-page .text-link { display: inline-flex; align-items: center; gap: 6px; color: var(--primary); font-weight: 900; text-decoration: none; }

body.seo-page .breadcrumbs { position: relative; z-index: 2; margin-bottom: 32px; color: #667085; font-size: 13px; }
body.seo-page .breadcrumbs ol { margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
body.seo-page .breadcrumbs li:not(:last-child)::after { content: '/'; margin-inline-start: 8px; color: #cbd5e1; }
body.seo-page .breadcrumbs li[aria-current="page"] { color: #475467; font-weight: 700; }
body.seo-page .breadcrumbs a { color: #667085; text-decoration: none; transition: color .18s ease; }
body.seo-page .breadcrumbs a:hover { color: var(--primary-dark); }

body.seo-page .page-hero {
    position: relative;
    overflow: hidden;
    padding: 22px 0 78px;
    background:
        radial-gradient(circle at 88% 10%, rgba(37, 99, 235, .15), transparent 25rem),
        radial-gradient(circle at 8% 78%, rgba(96, 165, 250, .13), transparent 24rem),
        linear-gradient(180deg, #f7faff 0%, #fff 82%);
}
body.seo-page .page-hero::before { content: ''; position: absolute; inset: 30px auto auto 4%; width: 210px; height: 150px; opacity: .28; background-image: radial-gradient(#93c5fd 1.5px, transparent 1.5px); background-size: 18px 18px; }
body.seo-page .hero-content { position: relative; max-width: 900px; margin-inline: auto; text-align: center; }
body.seo-page .page-hero .hero-badge { margin-inline: auto; }
body.seo-page .hero-title { margin: 0; font-size: clamp(34px, 5vw, 58px); line-height: 1.28; letter-spacing: -.035em; }
body.seo-page .hero-lead { max-width: 800px; margin: 20px auto 0; color: var(--muted); font-size: clamp(17px, 2vw, 20px); }
body.seo-page .article-meta { margin-top: 16px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; color: #64748b; font-size: 13px; }
body.seo-page .article-meta time { color: #475569; font-weight: 800; }
body.seo-page .hero-actions { margin-top: 28px; margin-bottom: 0; justify-content: center; }
body.seo-page .highlight-grid { position: relative; margin-top: 42px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; text-align: right; }
body.seo-page .highlight-card { padding: 22px; border: 1px solid rgba(191, 219, 254, .88); border-radius: 20px; background: rgba(255, 255, 255, .88); box-shadow: 0 16px 38px rgba(37, 99, 235, .08); }
body.seo-page .highlight-card strong { display: block; margin-bottom: 4px; font-size: 16px; }
body.seo-page .highlight-card span { color: var(--muted); font-size: 14px; }

body.seo-page .body-copy { display: grid; gap: 14px; color: #475569; font-size: 17px; }
body.seo-page .body-copy p { margin: 0; }

body.seo-page .points { margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; list-style: none; }
body.seo-page .points li { position: relative; min-height: 54px; padding: 14px 48px 14px 16px; border: 1px solid var(--line); border-radius: 16px; color: #334155; background: #fff; }
body.seo-page .points li::before { content: '✓'; position: absolute; top: 14px; right: 15px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 8px; color: #fff; background: var(--success); font-size: 13px; font-weight: 900; }

body.seo-page .steps--five { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 38px; }
body.seo-page .steps--five > .step { grid-column: span 2; }
body.seo-page .steps--five > .step:nth-child(4) { grid-row: 2; grid-column: 2 / span 2; }
body.seo-page .steps--five > .step:nth-child(5) { grid-row: 2; grid-column: 4 / span 2; }

body.seo-page .table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 22px; background: #fff; box-shadow: 0 14px 34px rgba(15, 23, 42, .05); }
body.seo-page .comparison-table { width: 100%; border-collapse: collapse; min-width: 680px; }
body.seo-page .comparison-table th, body.seo-page .comparison-table td { padding: 18px; border-bottom: 1px solid var(--line); text-align: right; vertical-align: top; }
body.seo-page .comparison-table th { color: #1e3a8a; background: var(--primary-soft); font-size: 14px; }
body.seo-page .comparison-table tr:last-child td { border-bottom: 0; }
body.seo-page .comparison-table td:first-child { font-weight: 900; }

body.seo-page .related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
body.seo-page .related-card { padding: 22px; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 20px; background: #fff; text-decoration: none; transition: .2s ease; }
body.seo-page .related-card:hover { transform: translateY(-3px); border-color: var(--primary-line); box-shadow: 0 16px 32px rgba(37, 99, 235, .09); }
body.seo-page .related-card strong { display: block; margin-bottom: 5px; }
body.seo-page .related-card span { color: var(--muted); font-size: 13px; }
body.seo-page .related-card em { margin-top: 14px; color: var(--primary); font-size: 13px; font-style: normal; font-weight: 900; }

@media (max-width: 1050px) {
    body.seo-page .steps--five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.seo-page .steps--five::before { display: none; }
    body.seo-page .steps--five > .step,
    body.seo-page .steps--five > .step:nth-child(4),
    body.seo-page .steps--five > .step:nth-child(5) { grid-row: auto; grid-column: auto; }
}

@media (max-width: 760px) {
    body.seo-page .page-hero { padding: 17px 0 58px; }
    body.seo-page .breadcrumbs { margin-bottom: 26px; font-size: 12px; }
    body.seo-page .hero-title { font-size: 34px; }
    body.seo-page .highlight-grid,
    body.seo-page .related-grid { grid-template-columns: 1fr; }
    body.seo-page .highlight-card { text-align: center; }
    body.seo-page .points { grid-template-columns: 1fr; }
    body.seo-page .steps--five { grid-template-columns: 1fr; }
}