:root {
    --hp-bg: #ffffff;
    --hp-bg-2: #f8fafc;
    --hp-bg-soft: #f1f5f9;
    --hp-line: #e2e8f0;
    --hp-line-strong: #cbd5e1;
    --hp-ink: #0f172a;
    --hp-ink-2: #1e293b;
    --hp-muted: #64748b;
    --hp-muted-2: #94a3b8;
    --hp-accent: #6366f1;
    --hp-accent-2: #a78bfa;
    --hp-accent-3: #2dd4bf;
    --hp-accent-soft: rgba(99,102,241,.10);
    --hp-light-bg: #ffffff;
    --hp-light-bg-2: #f8fafc;
    --hp-light-ink: #0f172a;
    --hp-light-muted: #64748b;
    --hp-light-line: #e2e8f0;
}
.hp-stage {
    background: transparent;
    color: var(--hp-ink);
    position: relative;
}
.hp-hero {
    background: transparent;
    overflow: hidden;
    padding: 2rem 0 3rem;
    position: relative;
}
.hp-hero::before {
    background-image:
        linear-gradient(rgba(15,23,42,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15,23,42,.03) 1px, transparent 1px);
    background-size: 56px 56px;
    content: "";
    inset: 0;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 80%);
    position: absolute;
    pointer-events: none;
}
.hp-hero .container { position: relative; z-index: 2; }
.hp-shot {
    margin: 0 auto 1rem;
    max-inline-size: 880px;
    position: relative;
}
.hp-shot::after {
    background:
        radial-gradient(ellipse at 30% center, rgba(99,102,241,.35), transparent 60%),
        radial-gradient(ellipse at 70% center, rgba(167,139,250,.32), transparent 60%);
    inset-block-end: -50px;
    content: "";
    filter: blur(50px);
    block-size: 100px;
    inset-inline-start: 8%; inset-inline-end: 8%;
    position: absolute;
    z-index: 0;
}
.hp-shot-frame {
    border: 1px solid rgba(99,102,241,.12);
    border-radius: 18px;
    box-shadow:
        0 1px 0 #fff inset,
        0 30px 60px -20px rgba(99,102,241,.18),
        0 12px 30px -12px rgba(15,23,42,.08);
    padding: .5rem;
    position: relative;
    z-index: 1;
}
.hp-shot-frame img {
    border: 1px solid var(--hp-line);
    border-radius: 14px;
    display: block;
    inline-size: 100%;
}
.hp-shot-chip {
    align-items: center;
    background: rgba(255,255,255,.85);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--hp-line);
    border-radius: 999px;
    box-shadow: 0 6px 16px -6px rgba(15,23,42,.12);
    color: var(--hp-ink);
    display: inline-flex;
    font-size: .78rem;
    font-weight: 600;
    gap: .4rem;
    padding: .4rem .8rem;
    position: absolute;
    z-index: 2;
}
.hp-shot-chip.tl { inset-block-start: 18px; inset-inline-start: 18px; }
.hp-shot-chip.br { inset-block-end: 18px; inset-inline-end: 18px; }
.hp-shot-chip .ldot {
    background: #16a34a;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(22,163,74,.18);
    block-size: 7px; inline-size: 7px;
}
.hp-head {
    margin: 0 auto;
    max-inline-size: 800px;
    text-align: center;
}
.hp-pill .badge-dot {
    background: linear-gradient(135deg, var(--hp-accent), var(--hp-accent-2));
    border-radius: 999px;
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .04em;
    padding: .15rem .5rem;
}
.hp-h1 {
    color: var(--hp-ink);
    font-size: clamp(1.85rem, 3.6vw, 3rem);
    font-weight: 800;
    letter-spacing: -.025em;
    line-height: 1.08;
    margin: 0 0 .9rem;
}
.hp-sub {
    color: var(--hp-muted);
    font-size: clamp(.9rem, 1.15vw, 1rem);
    line-height: 1.7;
    margin: 0 auto 1.25rem;
    max-inline-size: 680px;
}
.hp-actions {
    align-items: center;
    display: inline-flex;
    flex-wrap: wrap;
    gap: .65rem;
    justify-content: center;
}
.hp-btn {
    align-items: center;
    border-radius: 12px;
    display: inline-flex;
    font-size: .95rem;
    font-weight: 700;
    gap: .5rem;
    padding: .85rem 1.5rem;
    text-decoration: none !important;
    transition: transform .15s ease, filter .15s ease, background .15s ease, border-color .15s ease;
}
.hp-btn-pri {
    background: linear-gradient(135deg, var(--hp-accent), var(--hp-accent-2));
    border: 1px solid transparent;
    box-shadow: 0 12px 30px rgba(99,102,241,.32), inset 0 1px 0 rgba(255,255,255,.22);
    color: #fff !important;
}
.hp-btn-pri:hover { filter: brightness(1.08); transform: translateY(-1px); }
.hp-btn-sec {
    background: #ffffff;
    border: 1px solid var(--hp-line);
    color: var(--hp-ink) !important;
}
.hp-btn-sec:hover { background: var(--hp-bg-2); border-color: var(--hp-line-strong); }
.hp-stat-strip {
    background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--hp-line);
    border-radius: 18px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-block-start: 4rem;
    overflow: hidden;
}
.hp-stat {
    display: flex;
    gap: .9rem;
    padding: 1.4rem 1.5rem;
    position: relative;
}
.hp-stat + .hp-stat::before {
    background: var(--hp-line);
    content: "";
    block-size: 60%;
    inset-inline-start: 0; inset-block-start: 20%;
    position: absolute;
    inline-size: 1px;
}
.hp-stat-ico {
    align-items: center;
    background: linear-gradient(135deg, rgba(110,139,255,.22), rgba(139,110,255,.12));
    border: 1px solid rgba(110,139,255,.25);
    border-radius: 11px;
    color: #c5d0ff;
    display: inline-flex;
    flex-shrink: 0;
    font-size: 1rem;
    block-size: 42px; inline-size: 42px;
    justify-content: center;
}
.hp-stat .v { color: #fff; font-size: .98rem; font-weight: 700; line-height: 1.1; }
.hp-stat .l { color: var(--hp-muted-d-2); font-size: .8rem; margin-block-start: .2rem; }
.hp-body {
    background: transparent;
    color: var(--hp-light-ink);
    position: relative;
}
.hp-section {
    padding: 6rem 0;
}
.hp-section-head {
    margin: 0 auto 3.5rem;
    max-inline-size: 720px;
    text-align: center;
}
.hp-section-head .hp-eye {
    align-items: center;
    background: var(--hp-light-bg-2);
    border: 1px solid var(--hp-light-line);
    border-radius: 999px;
    color: var(--hp-light-ink);
    display: inline-flex;
    font-size: .78rem;
    font-weight: 600;
    gap: .4rem;
    margin-block-end: 1rem;
    padding: .3rem .85rem .3rem .35rem;
}
.hp-section-head .hp-eye b {
    background: linear-gradient(135deg, var(--hp-accent), var(--hp-accent-2));
    border-radius: 999px;
    color: #fff;
    font-size: .68rem;
    letter-spacing: .04em;
    padding: .15rem .5rem;
}
.hp-section-head h2 {
    color: var(--hp-light-ink);
    font-size: clamp(1.9rem, 3.2vw, 2.85rem);
    font-weight: 800;
    letter-spacing: -.022em;
    line-height: 1.15;
    margin: 0 0 .85rem;
}
.hp-section-head p {
    color: var(--hp-light-muted);
    font-size: 1.02rem;
    line-height: 1.8;
    margin: 0;
}
.hp-fgrid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(2, minmax(0,1fr));
}
.hp-fcard {
    background: var(--hp-light-bg);
    border: 1px solid var(--hp-light-line);
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    min-block-size: 220px;
    padding: 2rem;
    position: relative;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.hp-fcard:hover {
    border-color: #c7cee0;
    box-shadow: 0 16px 40px -16px rgba(15,23,42,.12);
    transform: translateY(-2px);
}
.hp-fcard-row {
    align-items: center;
    display: flex;
    gap: 1rem;
}
.hp-fcard-ico {
    align-items: center;
    background: var(--hp-accent-soft);
    border: 1px solid rgba(99,102,241,.18);
    border-radius: 12px;
    color: var(--hp-accent);
    display: inline-flex;
    flex-shrink: 0;
    font-size: 1.1rem;
    block-size: 48px; inline-size: 48px;
    justify-content: center;
}
.hp-fcard h3 {
    color: var(--hp-light-ink);
    flex: 1;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -.005em;
    margin: 0;
}
.hp-fcard p {
    color: var(--hp-light-muted);
    font-size: .95rem;
    line-height: 1.75;
    margin: 0;
}
.hp-fcard.c2 .hp-fcard-ico {
    background: rgba(167,139,250,.12);
    border-color: rgba(167,139,250,.18);
    color: var(--hp-accent-2);
}
.hp-fcard.c3 .hp-fcard-ico {
    background: rgba(45,212,191,.14);
    border-color: rgba(45,212,191,.22);
    color: #0d9488;
}
.hp-fcard.c4 .hp-fcard-ico {
    background: rgba(251,191,36,.12);
    border-color: rgba(251,191,36,.18);
    color: #d97706;
}
.hp-tabs { position: relative; }
.hp-tabs > input[type="radio"] {
    block-size: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    inline-size: 0;
}
.hp-tab-bar {
    background: var(--hp-light-bg-2);
    border: 1px solid var(--hp-light-line);
    border-radius: 14px;
    display: grid;
    gap: .35rem;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    margin-block-end: 1.5rem;
    padding: .35rem;
}
.hp-tab-btn {
    align-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--hp-light-muted);
    cursor: pointer;
    display: flex;
    font-weight: 600;
    gap: .55rem;
    margin: 0;
    padding: .75rem 1rem;
    transition: all .18s ease;
    user-select: none;
}
.hp-tab-btn:hover { color: var(--hp-light-ink); }
.hp-tab-btn .num {
    background: var(--hp-light-bg);
    border: 1px solid var(--hp-light-line);
    border-radius: 7px;
    color: var(--hp-light-muted);
    font-size: .72rem;
    font-weight: 800;
    padding: .15rem .4rem;
}
.hp-tab-btn .nm { font-size: .92rem; }
.hp-tab-btn .ico {
    align-items: center;
    color: inherit;
    display: inline-flex;
    font-size: .9rem;
}
#hp-tab-1:checked ~ .hp-tab-bar label[for="hp-tab-1"],
#hp-tab-2:checked ~ .hp-tab-bar label[for="hp-tab-2"],
#hp-tab-3:checked ~ .hp-tab-bar label[for="hp-tab-3"],
#hp-tab-4:checked ~ .hp-tab-bar label[for="hp-tab-4"] {
    background: var(--hp-light-bg);
    border-color: var(--hp-light-line);
    box-shadow: 0 4px 12px -4px rgba(15,23,42,.08);
    color: var(--hp-light-ink);
}
#hp-tab-1:checked ~ .hp-tab-bar label[for="hp-tab-1"] .num,
#hp-tab-2:checked ~ .hp-tab-bar label[for="hp-tab-2"] .num,
#hp-tab-3:checked ~ .hp-tab-bar label[for="hp-tab-3"] .num,
#hp-tab-4:checked ~ .hp-tab-bar label[for="hp-tab-4"] .num {
    background: linear-gradient(135deg, var(--hp-accent), var(--hp-accent-2));
    border-color: transparent;
    color: #fff;
}
#hp-tab-1:checked ~ .hp-tab-bar label[for="hp-tab-1"] .ico,
#hp-tab-2:checked ~ .hp-tab-bar label[for="hp-tab-2"] .ico,
#hp-tab-3:checked ~ .hp-tab-bar label[for="hp-tab-3"] .ico,
#hp-tab-4:checked ~ .hp-tab-bar label[for="hp-tab-4"] .ico { color: var(--hp-accent); }
.hp-tab-panels { position: relative; }
.hp-tab-panel {
    align-items: center;
    background: linear-gradient(180deg, var(--hp-light-bg) 0%, var(--hp-light-bg-2) 100%);
    border: 1px solid var(--hp-light-line);
    border-radius: 18px;
    box-shadow: 0 1px 0 #fff inset, 0 18px 40px -20px rgba(15,23,42,.10);
    display: none;
    gap: 3rem;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    min-block-size: 360px;
    padding: 2.5rem;
}
#hp-tab-1:checked ~ .hp-tab-panels #hp-panel-1,
#hp-tab-2:checked ~ .hp-tab-panels #hp-panel-2,
#hp-tab-3:checked ~ .hp-tab-panels #hp-panel-3,
#hp-tab-4:checked ~ .hp-tab-panels #hp-panel-4 { display: grid; }
.hp-tab-visual { text-align: center; }
.hp-tab-visual img {
    display: block;
    margin: 0 auto;
    max-block-size: 280px;
    max-inline-size: 100%;
}
.hp-tab-copy h3 {
    color: var(--hp-light-ink);
    font-size: clamp(1.4rem, 2.2vw, 1.85rem);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.2;
    margin: 0 0 .85rem;
}
.hp-tab-copy p {
    color: var(--hp-light-muted);
    font-size: .98rem;
    line-height: 1.8;
    margin: 0;
}
.hp-quotes {
    background: transparent;
    padding: 6rem 0;
}
.hp-q-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(3, minmax(0,1fr));
}
.hp-quotes .card {
    background: var(--hp-light-bg) !important;
    border: 1px solid var(--hp-light-line) !important;
    border-radius: 18px !important;
    block-size: 100%;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.hp-quotes .card:hover {
    transform: translateY(-2px);
    border-color: #c7cee0 !important;
    box-shadow: 0 14px 36px -14px rgba(15,23,42,.12);
}
.hp-quotes .card-body {
    display: flex;
    flex-direction: column;
    padding: 1.5rem !important;
}
.hp-quotes .card .font-italic,
.hp-quotes .card .text-muted {
    color: var(--hp-light-ink) !important;
    font-size: .98rem;
    font-style: normal !important;
    line-height: 1.75;
}
.hp-quotes .card .text-primary-800 { color: var(--hp-accent) !important; }
.hp-quotes .card .blockquote-footer {
    color: var(--hp-light-muted) !important;
    margin-block-start: auto !important;
    padding-block-start: 1.25rem !important;
}
.hp-quotes .index-testimonial-avatar {
    border: 2px solid var(--hp-light-bg);
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--hp-light-line);
    block-size: 44px; inline-size: 44px;
    object-fit: cover;
    flex-shrink: 0;
}
.hp-cta-wrap { padding: 5rem 0 6rem; }
.hp-cta {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 60%, #334155 130%);
    border-radius: 22px;
    color: #fff;
    overflow: hidden;
    position: relative;
}
.hp-cta::before {
    background:
        radial-gradient(600px 260px at 90% 0%, rgba(99,102,241,.5), transparent 60%),
        radial-gradient(500px 220px at 0% 100%, rgba(45,212,191,.28), transparent 60%);
    content: "";
    inset: 0;
    position: absolute;
    pointer-events: none;
}
.hp-cta::after {
    background-image:
        linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 40px 40px;
    content: "";
    inset: 0;
    mask-image: radial-gradient(ellipse at 50% 50%, #000 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 30%, transparent 80%);
    opacity: .7;
    pointer-events: none;
    position: absolute;
}
.hp-cta-grid {
    display: grid;
    gap: 0;
    grid-template-columns: 1.4fr 1fr;
    position: relative;
    z-index: 1;
}
.hp-cta-main { padding: clamp(2.5rem, 4vw, 3.5rem); }
.hp-cta-main h2 {
    color: #fff;
    font-size: clamp(1.7rem, 2.8vw, 2.4rem);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.18;
    margin: 0 0 .85rem;
}
.hp-cta-main p {
    color: rgba(255,255,255,.78);
    font-size: 1rem;
    line-height: 1.75;
    margin: 0 0 1.75rem;
}
.hp-cta-side {
    background: rgba(255,255,255,.04);
    border-inline-start: 1px solid var(--hp-line);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(2rem, 4vw, 3rem);
}
.hp-cta-mini {
    align-items: center;
    display: flex;
    gap: 1rem;
    padding: .75rem 0;
}
.hp-cta-mini + .hp-cta-mini { border-block-start: 1px solid var(--hp-line); }
.hp-cta-mini i {
    align-items: center;
    background: rgba(99,102,241,.2);
    border: 1px solid rgba(99,102,241,.3);
    border-radius: 10px;
    color: #c7d2fe;
    display: inline-flex;
    flex-shrink: 0;
    block-size: 38px; inline-size: 38px;
    justify-content: center;
}
.hp-cta-mini .t { color: #fff; font-weight: 700; font-size: .95rem; }
.hp-cta-mini .s { color: rgba(255,255,255,.62); font-size: .8rem; margin-block-start: .15rem; }
.hp-cta .hp-btn-pri { background: #fff; color: var(--hp-ink) !important; box-shadow: 0 8px 22px rgba(0,0,0,.22); }
.hp-cta .hp-btn-pri:hover { background: #f1f5f9; }
@media (max-inline-size: 991.98px) {
    .hp-hero { padding: 2.5rem 0 4rem; }
    .hp-shot { margin-block-start: 0; margin-block-end: 2.5rem; }
    .hp-stat-strip { grid-template-columns: repeat(2, 1fr); }
    .hp-stat:nth-child(3)::before { display: none; }
    .hp-stat:nth-child(2),
    .hp-stat:nth-child(1) { border-block-end: 1px solid var(--hp-line); }
    .hp-fgrid { grid-template-columns: 1fr; }
    .hp-q-grid { grid-template-columns: 1fr; }
    .hp-tab-bar { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(2, 1fr); }
    .hp-tab-btn { padding: .6rem .75rem; }
    .hp-tab-btn .nm { font-size: .85rem; }
    .hp-tab-panel { grid-template-columns: 1fr; gap: 1.5rem; min-block-size: 0; padding: 1.75rem; }
    .hp-tab-visual img { max-block-size: 200px; }
    .hp-cta-grid { grid-template-columns: 1fr; }
    .hp-cta-side { border-inline-start: 0; border-block-start: 1px solid var(--hp-line); }
    body:has(.hp-stage) .navbar-main .navbar-nav .nav-link,
    body:has(.hp-stage) .navbar-main .navbar-nav > li:nth-last-child(2) .nav-link[href*="login"],
    body:has(.hp-stage) .navbar-main .navbar-nav > li:last-child .nav-link[href*="register"] {
        margin-inline-start: 0;
        margin-block-end: .35rem;
    }
}
@media (max-inline-size: 575.98px) {
    .hp-section, .hp-quotes { padding: 4rem 0; }
    .hp-stat-strip { grid-template-columns: 1fr; }
    .hp-stat + .hp-stat::before {
        background: var(--hp-line);
        block-size: 1px; inset-inline-start: 18%; inset-inline-end: 18%; inset-block-start: 0; inline-size: auto;
    }
    .hp-shot-chip.tl, .hp-shot-chip.br {
        font-size: .7rem;
        padding: .3rem .6rem;
    }
    .hp-shot-chip.tl { inset-block-start: 10px; inset-inline-start: 10px; }
    .hp-shot-chip.br { inset-block-end: 10px; inset-inline-end: 10px; }
    .hp-actions { display: flex; inline-size: 100%; }
    .hp-actions .hp-btn { flex: 1; justify-content: center; }
}