.header-time p{
    min-width: 125px;
}
.after-text{
    text-align: center;
    margin-bottom: 25px;
    color: #ffffff;
}
.cab-project {
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: flex-start;
    -moz-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    border-radius: 4px;
    border: 1px solid rgba(32, 33, 54, 0.1);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    padding: 20px 40px;
    box-shadow: 0px 2px 21px 0px rgba(0, 0, 0, 0.07);
    margin-bottom: 30px;
}
.cab-project__box {
    width: 100%;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: row;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: stretch;
    -moz-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    -webkit-justify-content: space-between;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.cab-project__item {
    width: -moz-calc(50% - 12px);
    width: calc(50% - 12px);
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
    padding: 8px;
    min-height: 130px;
    position: relative;
    margin-bottom: 15px;
    z-index: 1;
    -moz-transition: all .3s ease;
    transition: all .3s ease;
    border-radius: 4px;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.07);
}
.cab-project_yellow .cab-project__item {
    width: -moz-calc(100% / 3 - 10px);
    width: calc(100% / 3 - 10px);
    min-height: 100px;
    padding: 8px 5px;
}
.cab-progress__bar-line span.left-pos{
    right: auto;
    left: 0;
}
.cab-progress__bar-line span.left-pos:after{
    right: auto;
    left: 8px;
}
.cab-confirm__qr {
    display: block;
    text-align:center;
    color: #ffffff;
}
.cab-confirm__qr img {
    margin-bottom: 30px;
}
.row.invest-top {
    z-index: 1;
    position: relative;
}
.cab-confirm__btns{
    text-align: center;
}
span#calc-daily {
    min-width: 51px;
    display: inline-block;
}
span#calc-total{
    min-width: 66px;
    display: inline-block;
}
.cab-pagination{
    flex-wrap: wrap;
}
a.main-btn span {
    margin-left: 5px;
}
.stat-table__val{
    margin-right: 40px;
    position: relative;
}
.stat-table__val img{
    position: absolute;
    right: -30px;
    top: -3px;
    width: 20px;
}
.header-bot__title p, .header-bot__title a{
    max-width: 320px;
}
@media screen and (min-width: 1200px) and (max-width: 1350px){
    .about-right .main-text{
        padding-right: 115px;
    }
}
@media screen and (max-width: 480px){
    .cab-project_yellow .cab-project__item{
        width: 100%;
    }
}


/* The wordmark was logo-text.png, 89x16px, sitting under the icon in a column
   flex. Live text so the brand is editable and a crawler can read it — but it
   has to occupy the same box, or it widens .header-logo and pushes the whole
   nav row out of shape. 13px lands close to the original's 89px width; the
   max-width and ellipsis are the guard if a longer name is ever set. */
.header-logo .logo-text,
.footer-logo .logo-text {
    display: block;
    max-width: 100%;
    font-family: "Magistral", sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.2;
    letter-spacing: 0.01em;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

@media (max-width: 991px) {
    .header-logo .logo-text,
    .footer-logo .logo-text {
        font-size: 14px;
    }
}

/* Plan features. The template's .invest-plan__info carries margin-bottom: 20px,
   which is right for four label/value rows and far too airy for six short
   feature lines. These sit tight, with the accent dot doing the separating. */
.invest-plan__list {
    /* .invest-plan is a column flex with align-items: center, so a child
       without an explicit width shrink-wraps and gets centred. The template's
       own rows all set width: 100% for exactly this reason. */
    width: 100%;
    list-style: none;
    margin: 0 0 30px;
    padding: 0;
    text-align: left;
}

.invest-plan__list li {
    position: relative;
    /* The dot sits on the same left edge as the "Commission" row above; the text
       is indented past it. Owner's choice between this and hanging the dot out
       in the card's padding. */
    padding-left: 15px;
    margin-bottom: 7px;
    font-size: 13px;
    line-height: 1.45;
    color: #868894;
}

.invest-plan__list li:last-child {
    margin-bottom: 0;
}

.invest-plan__list li:before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: #7f5cd2;
}

/* Hero paragraph: wrap on the same right edge as the title above it.
   The title's widest line is "chatter" (27px Magistral Light, +63px of margins)
   plus the wordmark (46px Magistral Bold) = 503px, from the font metrics. The
   template capped .header-text at 290px, which broke the sentence into three
   short lines well short of the title. Border-box, so this includes the 95px
   padding-left.

   Scoped above 480px on purpose: the template resets .header-text to
   max-width: 100% and padding-left: 0 at that width, and custom.css loads after
   style.css — an unscoped rule here overrode that reset and pushed 503px of text
   into a 375px viewport, which is a horizontal scroll on every phone. */
@media (min-width: 481px) {
    .header-text {
        max-width: 503px;
    }
}

/* The purple rule under the wordmark, restored and re-anchored.
   The template hung it off a lowercase "p", whose stem is at the far left of the
   glyph — hence its 18.5px inset. An uppercase "T" is a different shape: no
   descender, and its stem is in the middle. Measured from Magistral Bold at 46px,
   the T box is 32.20px and its stem centre sits 16.10px in, so the bar stops
   there — 0.35em, in em so it holds when the title scales down at 480px.
   The letter itself stays white; only the rule is purple. */
.header-title .pp {
    color: inherit;
}

.header-title .pp:after {
    content: "";
    right: 0.35em;
    bottom: 0.065em;
}

/* The wordmark sits inside <a class="header-logo">, and Bootstrap underlines
   every anchor. text-decoration set on an ancestor cannot be cancelled from the
   child, so it has to come off the anchor itself — which is why setting it on
   .logo-text alone did nothing. The colour is pinned here too, above Bootstrap's
   link colour, so the wordmark never reads as a link. */
a.header-logo,
a.footer-logo,
a.header-logo:hover,
a.footer-logo:hover {
    text-decoration: none;
    color: #fff;
}

a.header-logo .logo-text,
a.footer-logo .logo-text {
    color: #fff;
    text-decoration: none;
}

/* Nav items with no page yet. They render and read exactly like the rest — the
   "Soon" kicker above the label is what says they are not live — but they carry
   no href, so nothing can click through to a 404.

   The .nav-soon class is load-bearing, not decorative: Bootstrap's reboot has
   `a:not([href]):not([class]) { color: inherit }`, whose specificity (0,2,1)
   beats `.header-menu a` (0,1,1). Without a class these rendered in the
   inherited colour instead of the menu grey. Any class defeats the :not(); this
   one also carries the cursor and hover behaviour. */
.header-menu a.nav-soon {
    color: #868894;
    cursor: default;
}

.header-menu a.nav-soon span {
    color: #868894;
}

.header-menu a.nav-soon:hover,
.header-menu a.nav-soon:hover span {
    color: #868894;
}

html {
    scroll-behavior: smooth;
}

#pricing {
    scroll-margin-top: 20px;
}

/* ---- Inner pages ---- */
/* Content pages share the template's shell but need a readable column and a
   heading rhythm the landing sections never required. Nothing here overrides a
   template rule; it only fills gaps the template has no equivalent for. */

.inner-page {
    padding: 60px 0 90px;
}

.inner-page .main-title {
    margin-bottom: 20px;
}

.inner-standfirst {
    max-width: 68ch;
    margin: 0 0 24px;
    color: #9d9fab;
    font-size: 15px;
    line-height: 1.7;
}

.inner-notice {
    max-width: 68ch;
    margin: 0 0 32px;
    padding: 12px 16px;
    border-left: 3px solid #7f5cd2;
    background: rgba(127, 92, 210, 0.1);
    color: #fff;
    font-size: 13px;
    line-height: 1.6;
}

.inner-body {
    max-width: 68ch;
}

.inner-body h2 {
    margin: 36px 0 12px;
    font-family: "Magistral", sans-serif;
    font-weight: 700;
    font-size: 20px;
    color: #fff;
}

.inner-body h2:first-child {
    margin-top: 0;
}

.inner-body p,
.inner-body li {
    color: #9d9fab;
    font-size: 14px;
    line-height: 1.75;
}

.inner-body p {
    margin: 0 0 14px;
}

.inner-body ul,
.inner-body ol {
    margin: 0 0 18px;
    padding-left: 20px;
}

.inner-body li {
    margin-bottom: 8px;
}

.inner-body a {
    color: #6aa9dd;
}

.inner-body strong {
    color: #fff;
    font-weight: 700;
}

/* The header on a content page has no hero beneath it, so it needs its own
   bottom edge. */
.header_inner {
    border-bottom: 1px solid #34374e;
    margin-bottom: 0;
}

/* SCOPED to .footer_inner on purpose. .footer-menu is the template's own class,
   used by Home and Contacts in the homepage footer — styling it unscoped here
   overrode the template's centred column layout and broke that footer. Content
   pages need a plain wrapping link row; the homepage keeps its own. */
.footer_inner .footer-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: flex-end;
    align-items: center;
}

.footer_inner .footer-menu a {
    display: inline;
    padding: 0;
    color: #9496a2;
    font-size: 13px;
    text-decoration: none;
}

.footer_inner .footer-menu a:hover {
    color: #fff;
}

@media (max-width: 991px) {
    .footer_inner .footer-menu {
        justify-content: flex-start;
        margin-top: 24px;
    }
}

/* ---------------------------------------------------------------------------
   Focus visibility.

   style.css sets `outline: none` in eleven places, .main-btn among them — so
   the primary CTA, the most important control on the page, gave a keyboard
   user no indication of where they were. These rules restore a ring on the
   keyboard path only; :focus-visible means a mouse click still shows nothing.

   White rather than the brand blue on purpose. #3a8dd0 clears 3:1 against the
   page background (3.65:1) but falls to 2.56:1 against the raised surfaces
   (#43475f) that several focusable controls sit on. White holds 9:1 or better
   everywhere on this palette, so one value covers every surface.
--------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 3px;
}

.main-btn:focus-visible,
.header-btn:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 3px;
}

/* ---------------------------------------------------------------------------
   Reduced motion.

   .claude/rules/frontend.md requires every animation to respect this, and
   nothing on the page did — AOS 2.3.4 has no reduced-motion handling of its
   own, and it is initialised with once:false, so scrolling back up replays the
   whole sequence on every pass.

   The [data-aos] block is the load-bearing half. AOS ships its elements at
   opacity:0 and relies on its JavaScript to animate them in; with transitions
   disabled that content would otherwise stay invisible. Forcing it visible
   also means these users are unaffected if aos.js fails to load at all.

   Targeted rather than the usual blanket `* { animation: none }` reset, for two
   reasons. The preloader hides itself with `animation: ofm-preloader-failsafe
   0s 8s forwards` — a universal reset disables that failsafe and traps the page
   behind the splash, which is a far worse outcome than the motion it prevents.
   And check-static.mjs cannot tell a media-query-scoped `*` from a top-level
   one, so allowlisting it would let a genuinely accidental global rule through
   later. Hover transitions are left alone deliberately: they are sub-200ms and
   not the class of motion this query exists to suppress.
--------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto !important;
    }

    [data-aos] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }

    .animate__animated {
        animation: none !important;
    }
}

/* Only .wrapper carried a background colour, so anything outside it — the
   overscroll area at the bottom of a phone, and any gap when the page is shorter
   than the viewport — fell through to the browser's default white. Painting the
   root elements the same colour closes that gap. */
html,
body {
    background-color: #2b2e43;
}