/* ==========================================================================
   Parments design system layer — loaded on every public/user page (not the admin panel).
   One palette, one card, one button family, one form-control look, one page-hero band.
   Page templates keep their own layout; this file unifies colour, shape and type.
   Selectors are prefixed with `body.ds` so they win over per-page inline styles.
   ========================================================================== */
:root {
    --ds-bg: #000;
    --ds-surface: #0b1626;
    --ds-surface-2: #0f1d31;
    --ds-line: rgba(255, 255, 255, 0.10);
    --ds-line-strong: rgba(255, 255, 255, 0.18);
    --ds-primary: #8b1538;
    --ds-primary-2: #a91d3a;
    --ds-gold: #d4af37;
    --ds-text: #fff;
    --ds-text-2: rgba(255, 255, 255, 0.78);
    --ds-text-3: rgba(255, 255, 255, 0.58);
    --ds-radius: 16px;
    --ds-radius-sm: 10px;
    --ds-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}

/* ---------- one content width ---------- */
body.ds .container { max-width: 1240px; }

/* ---------- page hero bands (non-image heroes) ---------- */
body.ds :is(.blog-header, .article-header, .category-header, .search-header, .featured-header, .urgent-header, .archive-header,
    .opportunities-header, .about-hero, .project-hero, .invest-hero, .guide-hero, .detail-hero, .package-hero, .crowdfunding-hero,
    .investments-hero, .contact-hero, .faq-page-header, .guides-page-header, .privacy-hero, .terms-hero, .completed-hero,
    .calculator-hero, .converter-hero, .success-hero, .checkout-hero, .cart-hero, .orders-hero, .order-hero) {
    background: radial-gradient(900px 380px at 88% -25%, rgba(139, 21, 56, 0.55), transparent 62%),
                radial-gradient(700px 320px at 8% 120%, rgba(212, 175, 55, 0.12), transparent 60%),
                linear-gradient(180deg, var(--ds-surface) 0%, #000 100%);
    border-bottom: 1px solid rgba(212, 175, 55, 0.22);
    margin-top: 0; padding-top: 140px; padding-bottom: 64px;
}
body.ds :is(.blog-header, .article-header, .category-header, .search-header, .featured-header, .urgent-header, .archive-header,
    .opportunities-header, .about-hero, .project-hero, .invest-hero, .guide-hero, .detail-hero, .package-hero, .crowdfunding-hero,
    .investments-hero, .contact-hero, .faq-page-header, .guides-page-header, .privacy-hero, .terms-hero, .completed-hero,
    .calculator-hero, .converter-hero, .success-hero, .checkout-hero, .cart-hero, .orders-hero, .order-hero) :is(h1, .hero-title, .page-title) {
    color: var(--ds-text); background: none; -webkit-text-fill-color: var(--ds-text); font-weight: 900; line-height: 1.3;
}

/* ---------- cards ---------- */
body.ds :is(.content-card, .inquiry-form, .contact-cta-card, .hero-info-card, .investment-box, .profit-calculator-box, .article-author,
    .nav-article, .comment-form, .comment, .timeline-content, .summary-card, .sidebar-widget, .info-card, .detail-card, .invest-card,
    .benefit-card, .guide-main-content, .step-item, .related-guide-card, .faq-item, .service-card, .profile-card, .filter-bar, .cta-card,
    .why-invest-card, .tracker-card, .contact-form-wrapper, .contact-form-card, .team-card, .mission-vision-card, .value-card,
    .company-info-card, .why-us-item, .why-card, .pricing-card, .calculator-card, .result-card, .password-card, .form-card, .upload-card,
    .document-card, .update-card, .feature-box, .requirement-card, .post-arrival-card, .guide-card, .featured-guide-card,
    .opportunity-type-card, .rf-card, .hero-converter-card, .ube-card, .ube-form-card, .login-card, .register-card,
    .opportunity-card, .article-card, .related-card, .project-card, .blog-card, .archive-card, .investment-card, .accordion-item) {
    background: linear-gradient(150deg, rgba(15, 29, 49, 0.92), rgba(9, 17, 30, 0.94));
    border: 1px solid var(--ds-line);
    border-radius: var(--ds-radius);
    box-shadow: var(--ds-shadow);
}
body.ds :is(.opportunity-card, .article-card, .related-card, .project-card, .blog-card, .archive-card, .service-card, .guide-card, .featured-guide-card):hover {
    border-color: rgba(212, 175, 55, 0.45);
}
body.ds :is(.content-card, .inquiry-form, .contact-cta-card, .hero-info-card, .investment-box, .article-author, .comment-form,
    .sidebar-widget, .info-card, .detail-card, .benefit-card, .profile-card, .cta-card, .calculator-card, .result-card) { padding: 24px; }

/* secondary info panels share one radius */
body.ds :is(.info-box, .warning-box, .profit-schedule-box, .calculator-empty, .highlight-box, .alert-box, .payment-alert-box,
    .next-payment-info, .investment-note, .comparison-box) { border-radius: 12px; }

/* ---------- buttons ---------- */
body.ds :is(.submit-btn, .btn-save, .hero-cta, .contact-cta-btn, .related-card-button, .btn-view, .action-btn, .btn-primary,
    .invest-button, .summary-btn-primary, .search-btn, .cta-btn, .btn-submit, .btn-hero, .project-cta, .opportunity-cta, .btn-cta-primary,
    .btn-action.btn-primary-action, .new-order-btn, .btn-back-to-list, .guide-action-btn, .guide-card-btn, .featured-guide-btn, .rf-btn, .cta-unique:not(.cta-unique-outline)) {
    background: linear-gradient(135deg, var(--ds-primary), var(--ds-primary-2));
    color: #fff; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 12px;
    font-weight: 700; text-decoration: none; box-shadow: 0 6px 18px rgba(139, 21, 56, 0.35);
}
body.ds :is(.cta-unique:not(.cta-unique-outline)) { background: var(--ds-gold); color: #000; border-color: transparent; }
body.ds :is(.btn-secondary, .btn-contact, .download-btn, .widget-cta, .copy-btn, .copy-all-btn, .btn-cta-secondary, .cta-unique-outline) {
    background: transparent; color: var(--ds-gold); border: 1.5px solid rgba(212, 175, 55, 0.65); border-radius: 12px; font-weight: 700;
}

/* ---------- form controls ---------- */
body.ds :is(.form-control, .form-select, .calculator-input, .filter-select, .sort-select, .ube-input, .input-field, .search-input, .faq-search-input, textarea, select) {
    background-color: rgba(255, 255, 255, 0.05); color: #fff;
    border: 1px solid var(--ds-line-strong); border-radius: var(--ds-radius-sm);
}
body.ds :is(.form-control, .form-select, .calculator-input, .filter-select, .sort-select, .ube-input, .input-field, .search-input, textarea, select):focus {
    border-color: var(--ds-gold); box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.18); outline: 0;
}
body.ds ::placeholder { color: var(--ds-text-3); }

/* ---------- pills / tags ---------- */
body.ds :is(.article-category, .article-category-badge, .tag-link, .filter-tab, .category-btn, .tab-btn, .category-filter-btn,
    .major-badge, .opportunity-category, .service-badge, .opportunity-code-small, .badge) { border-radius: 999px; }

/* ---------- section headings ---------- */
body.ds h2.section-title { font-weight: 800; color: var(--ds-text); line-height: 1.3; }

/* ---------- section headings + intro text: one hierarchy on every page ---------- */
body.ds :is(.section-header, .section-heading, .section-head) h2 { font-weight: 800; color: var(--ds-text); line-height: 1.3; }
body.ds :is(.section-header, .section-heading, .section-head) p, body.ds .section-subtitle { color: var(--ds-text-2); line-height: 1.8; }
body.ds :is(.section-title, .content-title, .widget-title, .comments-title) i { color: var(--ds-gold); }
body.ds main a:not([class]) { color: var(--ds-gold); }
body.ds main a:not([class]):hover { color: #f0cf6a; }

/* ---------- decorative accent lines removed from cards (kept only on quotes, highlight/warning/info notes and the section-title underline) ---------- */
body.ds .archive-card::before,
body.ds .article-card::before,
body.ds .calculator-card::after,
body.ds .calendly-section::before,
body.ds .category-card::before,
body.ds .company-info-card::before,
body.ds .contact-form-card::before,
body.ds .info-card::before,
body.ds .invest-card::after,
body.ds .investment-box::after,
body.ds .map-container::before,
body.ds .mission-vision-card::before,
body.ds .opportunity-card::before,
body.ds .order-card::before,
body.ds .profit-section::before,
body.ds .project-card::after,
body.ds .rate-card::after,
body.ds .stat-card::before,
body.ds .why-card::before,
body.ds .why-invest-card::before,
body.ds .why-masonry-item::before { display: none; }
body.ds :is(.activity-item, .info-item, .phone-helper, .ube-question, .comment-content, .opportunity-card, .user-item, .guide-item) { border-right-width: 0; border-left-width: 0; }

/* thin coloured rule across the top of hero/section bands */
body.ds :is(.project-hero, .guide-hero, .process-section, .guides-section, .faq-page-header, .guides-page-header, .privacy-hero, .terms-hero,
    .active-projects-section, .completed-projects-section)::before { display: none; }
body.ds .hero-converter-card::after { display: none; }

/* ---------- readability: comfortable line length and line height for long text ---------- */
body.ds :is(.privacy-section, .terms-section, .intro-box, .why-invest-card, .calendly-section, .team-intro, .services-intro, .step-content, .faq-category-info) p {
    max-width: 78ch; margin-inline: auto; line-height: 1.95;
}
body.ds :is(.content-text, .article-content, .guide-main-content, .guide-content-inner, .privacy-section, .terms-section) p { line-height: 1.95; }
body.ds :is(.content-text, .article-content, .guide-main-content, .privacy-section, .terms-section) :is(h2, h3) { line-height: 1.5; margin-top: 1.6em; }

/* ---------- keyboard focus: visible and on-brand everywhere ---------- */
body.ds :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--ds-gold); outline-offset: 2px; }

/* ---------- card grids: equal-height cards, consistent gap ---------- */
body.ds :is(.opportunities-grid, .articles-grid, .related-grid, .guides-grid, .services-grid, .features-grid) { align-items: stretch; }

/* ==========================================================================
   Public-page UX review pass (mobile first)
   ========================================================================== */
/* anchors/jump links must not hide under the fixed header; smooth scroll unless the user prefers reduced motion */
html { scroll-padding-top: 96px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media (prefers-reduced-motion: reduce) {
    body.ds *, body.ds *::before, body.ds *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
/* balanced headings, no orphan words; media never overflows */
body.ds :is(h1, h2, h3) { text-wrap: balance; }
body.ds main :is(p, li) { text-wrap: pretty; }
body.ds main img, body.ds main video, body.ds main iframe { max-width: 100%; }
/* long Latin/number strings (codes, emails, urls) wrap instead of overflowing cards */
body.ds main :is(p, li, td, .info-value, .opportunity-title, .article-title) { overflow-wrap: anywhere; }
/* tables on small screens scroll inside their own box */
body.ds main table { max-width: 100%; }
body.ds main .table-responsive, body.ds main .table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* the floating currency widget and cart bar never sit on top of the footer */
body.ds .exchange-rate-badge { max-width: calc(100vw - 30px); }

@media (max-width: 576px) {
    /* contact hero badges: two per row instead of four tall full-width bars */
    body.ds .contact-badges { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 24px; }
    body.ds .contact-badge { justify-content: center; padding: 10px 8px; font-size: 0.82rem; text-align: center; }
    /* services hero stats and FAQ stats: three across */
    body.ds .hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding-top: 24px; }
    body.ds .hero-stats .stat-number { font-size: 1.7rem; }
    body.ds .hero-stats .stat-label { font-size: 0.78rem; }
    body.ds .faq-stats { grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 28px; }
    body.ds .faq-stat-item { padding: 14px 6px; }
    /* chips rows that overflow become a swipeable strip with snap */
    body.ds :is(.category-filter-wrapper, .category-tabs) { scroll-snap-type: x proximity; }
    body.ds :is(.category-filter-wrapper, .category-tabs) > * { scroll-snap-align: start; flex-shrink: 0; }
    /* comfortable thumb-height primary buttons and full-width CTAs inside cards */
    body.ds :is(.btn-primary, .submit-btn, .btn-save, .hero-cta, .related-card-button, .btn-view) { min-height: 46px; }
    /* section rhythm: consistent horizontal gutter */
    body.ds .container { padding-inline: 16px; }
}
@media (max-width: 380px) { body.ds .contact-badges { grid-template-columns: 1fr; } }

/* hover affordances only where hover exists; press feedback everywhere */
@media (hover: none) {
    body.ds :is(.opportunity-card, .article-card, .project-card, .service-card, .guide-card):hover { transform: none; }
}
body.ds :is(a, button, .btn-primary, .btn-secondary):active { transform: scale(0.98); }
body.ds :is(a, button) { -webkit-tap-highlight-color: rgba(212, 175, 55, 0.2); touch-action: manipulation; }
/* skeleton for lazy images so cards do not jump */
body.ds main img[loading="lazy"] { background: rgba(255, 255, 255, 0.04); }
.skip-link { position: fixed; top: -60px; right: 12px; z-index: 20000; padding: 10px 16px; border-radius: 10px; background: #d4af37; color: #000; font-weight: 700; text-decoration: none; transition: top 0.15s ease; }
.skip-link:focus { top: 12px; }
main:focus { outline: none; }

/* ==========================================================================
   Type scale (from the ui-ux-pro-max typography guidance: hero 36–42, H2 28–32, body 16, labels ≥12)
   Page-level CSS had headings up to 56–72px; they are capped here. Phones scale down fluidly.
   ========================================================================== */
body.ds main h1:not(.hero-title-unique) { font-size: clamp(1.6rem, 1.1rem + 1.4vw, 2.2rem) !important; line-height: 1.3; }
body.ds main h2 { font-size: clamp(1.3rem, 1rem + 1vw, 1.75rem) !important; line-height: 1.35; }
body.ds main h3 { font-size: clamp(1.05rem, 0.95rem + 0.3vw, 1.15rem) !important; line-height: 1.45; }
body.ds main h4 { font-size: clamp(0.98rem, 0.92rem + 0.3vw, 1.1rem) !important; line-height: 1.5; }
body.ds .hero-title-unique { font-size: clamp(1.9rem, 1.2rem + 2.4vw, 2.9rem); }
body.ds .hero-title-unique .highlight { font-size: clamp(2.2rem, 1.4rem + 2.8vw, 3.3rem); letter-spacing: 0; }
/* big stat numbers and prices keep emphasis but stay proportionate */
body.ds main :is(.stat-number, .stat-value, .hero-price) { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem) !important; }
/* body copy: 15px phones / 16px desktop, comfortable line height */
body.ds main :is(p, li) { font-size: max(0.94rem, 15px); line-height: 1.9; }
@media (min-width: 993px) { body.ds main :is(p, li) { font-size: 0.97rem; } }
/* card/section sub-headings and intro lines */
body.ds main :is(.section-subtitle, .section-header p, .hero-subtitle, .hero-description, .page-subtitle) { font-size: clamp(0.98rem, 0.9rem + 0.4vw, 1.1rem) !important; }
/* buttons: one label size */
body.ds :is(.btn-primary, .btn-secondary, .submit-btn, .btn-save, .hero-cta, .btn-view, .related-card-button, .cta-btn, .btn-cta-primary, .btn-cta-secondary) { font-size: 0.95rem; }

/* laptop/desktop: slightly smaller root size so all rem-based text, buttons and spacing scale together (≈ 15px base) */
@media (min-width: 993px) { html:has(body.ds) { font-size: 15.5px; } }
@media (min-width: 1600px) { html:has(body.ds) { font-size: 16px; } }
body.ds .hero-title-unique { font-size: clamp(1.9rem, 1.2rem + 2vw, 2.6rem); }
body.ds .hero-title-unique .highlight { font-size: clamp(2.2rem, 1.4rem + 2.4vw, 3rem); }