/* ============================================================
   Bluecrest — Homepage (neo)  ·  Apple.com–inspired redesign
   ------------------------------------------------------------
   Clean, light, generous-whitespace aesthetic modelled on
   apple.com: large refined headlines with tight tracking, an
   off-white canvas, soft elevated cards, and the brand blue
   reserved for primary actions.

   This file is now SELF-CONTAINED: the `.hn` wrapper redefines
   its own light token set (--hn-*) so the homepage no longer
   inherits the dark dashboard palette. All existing `.hn-*`
   class hooks in the Blade partials are preserved.
   ============================================================ */

.hn {
    /* --- Apple-like light palette --- */
    --hn-bg:          #ffffff;
    --hn-bg-alt:      #f5f5f7;
    --hn-surface:     #ffffff;
    --hn-border:      #d2d2d7;
    --hn-border-soft: #e8e8ed;

    --hn-ink:         #1d1d1f;
    --hn-ink-2:       #6e6e73;
    --hn-ink-3:       #86868b;

    --hn-accent:        #0071e3;
    --hn-accent-hover:  #0077ed;
    --hn-accent-ink:    #06c;
    --hn-accent-soft:   rgba(0,113,227,0.10);

    --hn-success:     #1d9d5b;
    --hn-warn:        #b25e00;
    --hn-danger:      #d92c20;

    --hn-r-sm:   12px;
    --hn-r:      18px;
    --hn-r-lg:   28px;
    --hn-pill:   980px;

    --hn-shadow:    0 4px 24px rgba(0,0,0,0.06);
    --hn-shadow-lg: 0 18px 48px rgba(0,0,0,0.10);

    --hn-gap: 24px;
    --hn-section-pad: 110px;
    --hn-maxw: 1024px;

    color: var(--hn-ink);
    background: var(--hn-bg);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display",
                 "SF Pro Text", "Helvetica Neue", Helvetica, Arial,
                 "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* ===== Section rhythm ===== */
.hn-section {
    padding: var(--hn-section-pad) 0;
    position: relative;
    background: var(--hn-bg);
}
.hn-section--tint { background: var(--hn-bg-alt); }

.hn-container {
    width: 100%;
    max-width: var(--hn-maxw);
    margin: 0 auto;
    padding: 0 22px;
}

/* ===== Section header ===== */
.hn-head { max-width: 720px; margin: 0 0 56px; }
.hn-head.is-center { margin-left: auto; margin-right: auto; text-align: center; }

.hn-eyebrow {
    display: inline-block;
    color: var(--hn-accent-ink);
    font-size: 19px;
    line-height: 1.2;
    font-weight: 600;
    text-transform: none;
    margin-bottom: 6px;
}
.hn-title {
    font-size: clamp(32px, 5vw, 56px);
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--hn-ink);
    margin: 0;
}
.hn-sub {
    margin: 18px 0 0;
    font-size: clamp(17px, 2vw, 21px);
    line-height: 1.5;
    font-weight: 400;
    color: var(--hn-ink-2);
}

/* ===== Buttons ===== */
.hn-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 50px;
    padding: 0 28px;
    border-radius: var(--hn-pill);
    font-size: 17px;
    font-weight: 400;
    line-height: 1;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background .25s ease, color .2s ease,
                border-color .2s ease, transform .15s ease;
}
.hn-btn:hover { transform: translateY(-1px); }
.hn-btn:active { transform: translateY(0); }

.hn-btn--primary { background: var(--hn-accent); color: #fff; }
.hn-btn--primary:hover { background: var(--hn-accent-hover); color: #fff; }

.hn-btn--white { background: var(--hn-accent); color: #fff; }
.hn-btn--white:hover { background: var(--hn-accent-hover); color: #fff; }

.hn-btn--ghost {
    background: transparent;
    color: var(--hn-accent-ink);
    border-color: transparent;
    padding: 0 8px;
    min-height: 28px;
}
.hn-btn--ghost:hover { background: transparent; text-decoration: underline; transform: none; }
.hn-btn--block { width: 100%; }

/* ===== Card ===== */
.hn-card {
    background: var(--hn-surface);
    border: 1px solid var(--hn-border-soft);
    border-radius: var(--hn-r-lg);
    padding: 34px;
    box-shadow: var(--hn-shadow);
    transition: box-shadow .3s ease, transform .3s ease;
}
.hn-section--tint .hn-card { border-color: transparent; }

.hn-grid { display: grid; gap: var(--hn-gap); }
.hn-grid--3 { grid-template-columns: repeat(3, 1fr); }
.hn-grid--4 { grid-template-columns: repeat(4, 1fr); }

.hn-ficon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--hn-accent-soft);
    color: var(--hn-accent-ink);
    margin-bottom: 20px;
}
.hn-ficon img { width: 28px; height: 28px; object-fit: contain; }
.hn-ficon i { font-size: 24px; }

/* ===== HERO ===== */
.hn-hero {
    background: linear-gradient(180deg, #fbfbfd 0%, #ffffff 70%);
    padding: clamp(72px, 11vw, 140px) 0 clamp(56px, 8vw, 96px);
    text-align: center;
    overflow: hidden;
}
.hn-hero-grid {
    max-width: var(--hn-maxw);
    margin: 0 auto;
    padding: 0 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}
.hn-hero-copy { max-width: 820px; }
.hn-hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--hn-accent-ink);
    font-size: 19px;
    font-weight: 600;
    margin-bottom: 12px;
}
.hn-dot, .hn-hero-pill .hn-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--hn-accent);
}
.hn-hero-copy h1 {
    font-size: clamp(40px, 7vw, 80px);
    line-height: 1.04;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--hn-ink);
    margin: 0 0 18px;
}
.hn-hero-copy p {
    font-size: clamp(19px, 2.4vw, 28px);
    line-height: 1.4;
    font-weight: 400;
    color: var(--hn-ink-2);
    margin: 0 auto 30px;
    max-width: 680px;
}
.hn-hero-btns {
    display: flex;
    gap: 28px;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
}
.hn-hero-btns .hn-btn--ghost {
    color: var(--hn-accent-ink) !important;
    border-color: transparent !important;
    background: transparent;
    min-height: 50px;
    padding: 0 4px;
}
/* The primary hero button is a solid accent fill; force white label text at
   high specificity so a stale cached rule or stray inline color can never
   render blue-on-blue (invisible) text. */
.hn .hn-hero-btns a.hn-btn.hn-btn--white,
.hn-hero-btns a.hn-btn--white {
    background: var(--hn-accent) !important;
    color: #ffffff !important;
}
.hn .hn-hero-btns a.hn-btn.hn-btn--white:hover,
.hn-hero-btns a.hn-btn--white:hover {
    background: var(--hn-accent-hover) !important;
    color: #ffffff !important;
}
.hn-hero-btns .hn-btn--ghost:hover { text-decoration: underline; }
.hn-hero-visual { width: 100%; max-width: 980px; }
.hn-hero-visual img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--hn-r-lg);
}
.hn-hero-stats {
    display: flex;
    gap: 56px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 8px;
}
.hn-hero-stat { text-align: center; }
.hn-hero-stat strong {
    display: block;
    font-size: 40px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--hn-ink);
}
.hn-hero-stat span { font-size: 15px; color: var(--hn-ink-3); }

/* ===== COUNTER ===== */
.hn-counter-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--hn-gap);
}
.hn-counter { text-align: center; }
.hn-counter img { width: 44px; height: 44px; object-fit: contain; margin-bottom: 14px; }
.hn-counter h3, .hn-counter .count {
    font-size: clamp(34px, 4vw, 48px);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--hn-ink);
    margin: 0;
}
.hn-counter p { margin: 6px 0 0; font-size: 17px; color: var(--hn-ink-2); }

/* ===== PLANS ===== */
.hn-plan { position: relative; text-align: center; }
.hn-plan:hover { box-shadow: var(--hn-shadow-lg); transform: translateY(-4px); }
.hn-plan.is-featured {
    border: 1px solid var(--hn-accent);
    box-shadow: 0 18px 48px rgba(0,113,227,0.14);
}
.hn-plan-badge {
    position: absolute;
    top: 20px; right: 20px;
    padding: 5px 12px;
    border-radius: var(--hn-pill);
    background: var(--hn-accent);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
}
.hn-plan-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px; height: 64px;
    border-radius: 50%;
    background: var(--hn-bg-alt);
    margin-bottom: 18px;
}
.hn-plan-icon img { width: 34px; height: 34px; object-fit: contain; }
.hn-plan-name { font-size: 22px; font-weight: 600; color: var(--hn-ink); margin: 0 0 8px; }
.hn-plan-price .amt {
    font-size: clamp(30px, 3.4vw, 40px);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--hn-ink);
}
.hn-plan-period { font-size: 15px; color: var(--hn-ink-3); margin: 6px 0 22px; }
.hn-plan-feats {
    list-style: none;
    margin: 0 0 26px;
    padding: 22px 0 0;
    border-top: 1px solid var(--hn-border-soft);
    text-align: left;
}
.hn-plan-feats li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    font-size: 15px;
    color: var(--hn-ink-2);
}
.hn-plan-feats li strong { color: var(--hn-ink); font-weight: 600; }

/* ===== HOW IT WORKS ===== */
.hn-step { text-align: left; }
.hn-step:hover { transform: translateY(-4px); box-shadow: var(--hn-shadow-lg); }
.hn-step-num {
    display: inline-block;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--hn-accent-ink);
    margin-bottom: 14px;
}
.hn-step h4 { font-size: 21px; font-weight: 600; color: var(--hn-ink); margin: 0 0 8px; }
.hn-step p  { font-size: 16px; line-height: 1.55; color: var(--hn-ink-2); margin: 0; }

/* ===== WHY CHOOSE US ===== */
.hn-feat { text-align: left; }
.hn-feat:hover { transform: translateY(-4px); box-shadow: var(--hn-shadow-lg); }
.hn-feat h4 { font-size: 20px; font-weight: 600; color: var(--hn-ink); margin: 0 0 8px; }
.hn-feat p  { font-size: 15.5px; line-height: 1.55; color: var(--hn-ink-2); margin: 0; }

/* ===== CALCULATOR ===== */
.hn-calc-wrap { max-width: 760px; margin: 0 auto; }
.hn-calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.hn-field label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--hn-ink-2);
    margin-bottom: 8px;
}
.hn-select, .hn-input {
    width: 100%;
    height: 52px;
    padding: 0 16px;
    font-size: 16px;
    color: var(--hn-ink);
    background: var(--hn-bg);
    border: 1px solid var(--hn-border);
    border-radius: var(--hn-r-sm);
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
    -webkit-appearance: none;
    appearance: none;
}
/* Dropdown chevron — `appearance:none` strips the native arrow, so draw one
   with a background SVG and leave room for it on the right. */
.hn-select {
    padding-right: 44px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 16px 16px;
    cursor: pointer;
}
.hn-select:focus, .hn-input:focus {
    border-color: var(--hn-accent);
    box-shadow: 0 0 0 4px var(--hn-accent-soft);
}
.hn-input-group { position: relative; display: flex; align-items: center; }
.hn-input-group .hn-input { padding-right: 64px; }
.hn-input-suffix {
    position: absolute;
    right: 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--hn-ink-3);
    pointer-events: none;
}
.hn-calc-result {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 28px;
    padding-top: 28px;
    border-top: 1px solid var(--hn-border-soft);
}
.hn-calc-cell { text-align: center; }
.hn-calc-cell span { display: block; font-size: 13px; color: var(--hn-ink-3); margin-bottom: 6px; }
.hn-calc-cell strong {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--hn-ink);
}
.hn-calc-cell strong.is-profit { color: var(--hn-success); }
.hn-calc-cell strong.is-accent { color: var(--hn-accent-ink); }

/* ===== LIVE ===== */
.hn-live-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--hn-gap); }
.hn-live-title {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 18px;
    font-weight: 600;
    color: var(--hn-ink);
    margin: 0 0 20px;
}
.hn-live-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--hn-success);
    box-shadow: 0 0 0 4px rgba(29,157,91,0.16);
}
.hn-live-list { display: flex; flex-direction: column; }
.hn-live-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--hn-border-soft);
}
.hn-live-row:last-child { border-bottom: none; }
.hn-live-av {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--hn-accent-soft);
    color: var(--hn-accent-ink);
    flex: none;
}
.hn-live-av.is-out { background: rgba(217,44,32,0.10); color: var(--hn-danger); }
.hn-live-meta { flex: 1 1 auto; min-width: 0; }
.hn-live-meta strong {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: var(--hn-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hn-live-meta span { font-size: 13px; color: var(--hn-ink-3); }
.hn-live-amt { text-align: right; flex: none; }
.hn-live-amt .gain { display: block; font-size: 13px; color: var(--hn-success); font-weight: 600; }
.hn-live-amt strong { font-size: 15px; font-weight: 700; color: var(--hn-ink); }

.hn-chip {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 11px;
    border-radius: var(--hn-pill);
    font-size: 12px;
    font-weight: 600;
    flex: none;
}
.hn-chip.is-success { background: rgba(29,157,91,0.12);  color: var(--hn-success); }
.hn-chip.is-warn    { background: rgba(178,94,0,0.12);   color: var(--hn-warn); }
.hn-chip.is-danger  { background: rgba(217,44,32,0.12);  color: var(--hn-danger); }

/* ===== BLOG ===== */
.hn-blog { padding: 0; overflow: hidden; text-align: left; }
.hn-blog:hover { transform: translateY(-4px); box-shadow: var(--hn-shadow-lg); }
.hn-blog-img { aspect-ratio: 16 / 10; overflow: hidden; background: var(--hn-bg-alt); }
.hn-blog-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.hn-blog:hover .hn-blog-img img { transform: scale(1.04); }
.hn-blog-body { padding: 26px 28px 30px; }
.hn-blog-date { font-size: 13px; color: var(--hn-ink-3); }
.hn-blog-body h4 { margin: 8px 0 16px; font-size: 20px; line-height: 1.3; font-weight: 600; }
.hn-blog-body h4 a { color: var(--hn-ink); text-decoration: none; }
.hn-blog-body h4 a:hover { color: var(--hn-accent-ink); }
.hn-blog-link { font-size: 15px; font-weight: 500; color: var(--hn-accent-ink); text-decoration: none; }
.hn-blog-link:hover { text-decoration: underline; }

/* ===== FAQ ===== */
.hn-faq-wrap { max-width: 800px; margin: 0 auto; }
.hn-acc-item { border-bottom: 1px solid var(--hn-border); }
.hn-acc-btn {
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    padding: 26px 40px 26px 0;
    font-size: clamp(18px, 2vw, 21px);
    font-weight: 500;
    color: var(--hn-ink);
    cursor: pointer;
    position: relative;
}
.hn-acc-btn::after {
    content: "+";
    position: absolute;
    right: 4px; top: 50%;
    transform: translateY(-50%);
    font-size: 26px;
    font-weight: 300;
    color: var(--hn-ink-3);
    transition: transform .25s ease;
}
.hn-acc-btn:not(.collapsed)::after { content: "\2212"; color: var(--hn-accent-ink); }
.hn-acc-body {
    padding: 0 40px 28px 0;
    font-size: 17px;
    line-height: 1.6;
    color: var(--hn-ink-2);
}

/* ===== CTA ===== */
.hn-cta-panel {
    background: linear-gradient(135deg, #0071e3 0%, #42a5f5 100%);
    border-radius: var(--hn-r-lg);
    padding: clamp(48px, 7vw, 80px) clamp(28px, 6vw, 72px);
    text-align: center;
    color: #fff;
}
.hn-cta-panel h2 {
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 700;
    letter-spacing: -0.015em;
    margin: 0 0 14px;
    color: #fff;
}
.hn-cta-panel p {
    font-size: clamp(17px, 2vw, 21px);
    line-height: 1.5;
    margin: 0 auto 30px;
    max-width: 620px;
    color: rgba(255,255,255,0.92);
}
.hn-cta-panel .hn-btn--white { background: #fff; color: var(--hn-accent-ink); }
.hn-cta-panel .hn-btn--white:hover { background: #f2f2f2; color: var(--hn-accent-ink); }

/* ===== GATEWAYS ===== */
.hn-gw-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.hn-gw {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 92px;
    padding: 16px;
    background: var(--hn-surface);
    border: 1px solid var(--hn-border-soft);
    border-radius: var(--hn-r);
    transition: box-shadow .25s ease, transform .25s ease;
}
.hn-gw:hover { box-shadow: var(--hn-shadow); transform: translateY(-2px); }
.hn-gw img { max-width: 100%; max-height: 48px; object-fit: contain; filter: grayscale(1); opacity: .75; transition: all .25s ease; }
.hn-gw:hover img { filter: none; opacity: 1; }

/* ===== NEWSLETTER ===== */
.hn-news-wrap { max-width: 620px; margin: 0 auto; text-align: center; }
.hn-news-wrap .hn-sub { margin-bottom: 28px; }
.hn-news-form { display: flex; gap: 12px; max-width: 480px; margin: 0 auto; }
.hn-news-form input {
    flex: 1 1 auto;
    height: 52px;
    padding: 0 18px;
    font-size: 16px;
    color: var(--hn-ink);
    background: var(--hn-bg);
    border: 1px solid var(--hn-border);
    border-radius: var(--hn-pill);
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.hn-news-form input:focus {
    border-color: var(--hn-accent);
    box-shadow: 0 0 0 4px var(--hn-accent-soft);
}
.hn-news-form button {
    flex: none;
    height: 52px;
    padding: 0 28px;
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    background: var(--hn-accent);
    border: none;
    border-radius: var(--hn-pill);
    cursor: pointer;
    transition: background .2s ease;
}
.hn-news-form button:hover { background: var(--hn-accent-hover); }

/* ===== Responsive ===== */
@media (max-width: 980px) {
    .hn-grid--4 { grid-template-columns: repeat(2, 1fr); }
    .hn-counter-grid { grid-template-columns: repeat(2, 1fr); }
    .hn-gw-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
    .hn { --hn-section-pad: 72px; }
    .hn-grid--3,
    .hn-live-grid,
    .hn-calc-grid,
    .hn-calc-result { grid-template-columns: 1fr; }
    .hn-head { margin-bottom: 40px; }
    .hn-hero-btns { gap: 16px; }
    .hn-hero-stats { gap: 36px; }
    .hn-news-form { flex-direction: column; }
    .hn-news-form input, .hn-news-form button { width: 100%; }
}
@media (max-width: 520px) {
    .hn-grid--4,
    .hn-counter-grid,
    .hn-gw-grid { grid-template-columns: 1fr; }
    .hn-card { padding: 26px; }
}