:root {
    --bg: #050B14;
    --bg2: #08111f;
    --surface: #0A1325;
    --surface2: #111D36;
    --surface3: #142641;
    --line: rgba(255, 255, 255, .075);
    --line-strong: rgba(29, 228, 189, .22);
    --text: #f7fafc;
    --muted: #91a3b7;
    --cyan: #1de4bd;
    --cyan2: #25c2a0;
    --green: #70ef76;
    --blue: #4ecbff;
    --gold: #f8ce65;
    --rose: #fb7185;
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    font-family: Vazir, Tahoma, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    overflow-x: hidden
}

a {
    text-decoration: none;
    color: inherit
}

button, input {
    font-family: inherit
}

::selection {
    background: rgba(29, 228, 189, .28);
    color: #fff
}

::-webkit-scrollbar {
    width: 7px
}

::-webkit-scrollbar-track {
    background: #050B14
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .11);
    border-radius: 99px
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(29, 228, 189, .42)
}

.site-bg {
    position: fixed;
    inset: 0;
    z-index: -10;
    background: radial-gradient(circle at 82% 4%, rgba(29, 228, 189, .13), transparent 27%), radial-gradient(circle at 8% 24%, rgba(78, 203, 255, .075), transparent 25%), radial-gradient(circle at 55% 95%, rgba(112, 239, 118, .055), transparent 27%), linear-gradient(180deg, #050B14 0%, #07101d 52%, #050B14 100%)
}

.site-bg:after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .22;
    background-image: linear-gradient(rgba(255, 255, 255, .028) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .028) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(to bottom, #000, transparent 82%)
}

.glass {
    background: linear-gradient(145deg, rgba(10, 19, 37, .78), rgba(5, 11, 20, .9));
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--line);
    box-shadow: 0 18px 70px rgba(0, 0, 0, .24)
}

.card {
    position: relative;
    background: linear-gradient(145deg, rgba(17, 29, 54, .84), rgba(7, 16, 29, .92));
    border: 1px solid var(--line);
    box-shadow: 0 18px 68px rgba(0, 0, 0, .21);
    transition: transform .4s cubic-bezier(.2, .8, .2, 1), border-color .4s, box-shadow .4s, background .4s;
    overflow: hidden
}

.card:before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(120deg, transparent 18%, rgba(255, 255, 255, .028), transparent 62%);
    opacity: 0;
    transform: translateX(30%);
    transition: .55s
}

.card:hover {
    transform: translateY(-5px);
    border-color: rgba(29, 228, 189, .22);
    box-shadow: 0 24px 90px rgba(0, 0, 0, .32), 0 0 32px rgba(29, 228, 189, .055)
}

.card:hover:before {
    opacity: 1;
    transform: translateX(-10%)
}

.soft-border {
    border: 1px solid var(--line)
}

.muted {
    color: var(--muted)
}

.ltr {
    direction: ltr
}

.ticker {
    font-variant-numeric: tabular-nums
}

.text-gradient {
    background: linear-gradient(135deg, var(--green) 0%, var(--cyan) 50%, var(--cyan2) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent
}

.text-gradient-blue {
    background: linear-gradient(90deg, var(--cyan), var(--blue));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent
}

.btn-primary {
    position: relative;
    background: linear-gradient(135deg, #70ef76, #1de4bd 55%, #25c2a0);
    color: #03120d;
    box-shadow: 0 10px 30px rgba(29, 228, 189, .17), inset 0 1px rgba(255, 255, 255, .5);
    transition: .3s;
    overflow: hidden
}

.btn-primary:before {
    content: "";
    position: absolute;
    top: -80%;
    left: -30%;
    width: 35%;
    height: 260%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent);
    transform: rotate(24deg);
    transition: .55s
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 38px rgba(29, 228, 189, .27)
}

.btn-primary:hover:before {
    left: 120%
}

.btn-secondary {
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .035);
    box-shadow: inset 0 1px rgba(255, 255, 255, .03);
    transition: .3s
}

.btn-secondary:hover {
    border-color: rgba(29, 228, 189, .22);
    background: rgba(29, 228, 189, .055);
    transform: translateY(-1px)
}

.badge {
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .035);
    box-shadow: inset 0 1px rgba(255, 255, 255, .03)
}

.nav-shell {
    background: rgba(5, 11, 20, .45);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    border-bottom: 1px solid rgba(255, 255, 255, .055)
}

.nav-link {
    color: #a8b8c8;
    position: relative;
    transition: .25s
}

.nav-link:after {
    content: "";
    position: absolute;
    right: 50%;
    left: 50%;
    bottom: -10px;
    height: 2px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--cyan), var(--green));
    transition: .3s
}

.nav-link:hover, .nav-link.active {
    color: #fff
}

.nav-link:hover:after, .nav-link.active:after {
    right: 12%;
    left: 12%
}

.logo-orb {
    box-shadow: 0 0 0 1px rgba(29, 228, 189, .22), 0 0 32px rgba(29, 228, 189, .16);
    background: linear-gradient(145deg, rgba(29, 228, 189, .19), rgba(17, 29, 54, .95));
    position: relative
}

.logo-orb:after {
    content: "";
    position: absolute;
    inset: -8px;
    border: 1px solid rgba(29, 228, 189, .09);
    border-radius: 22px
}

.mobile-menu {
    display: none
}

.mobile-menu.open {
    display: block
}

.hero-wrap {
    position: relative
}

.hero-wrap:before {
    content: "";
    position: absolute;
    width: 560px;
    height: 560px;
    right: -170px;
    top: -210px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(29, 228, 189, .18), transparent 68%);
    filter: blur(2px)
}

.hero-wrap:after {
    content: "";
    position: absolute;
    width: 390px;
    height: 390px;
    left: -190px;
    top: 16%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(78, 203, 255, .09), transparent 70%)
}

.dashboard-frame {
    border: 1px solid rgba(29, 228, 189, .14);
    box-shadow: 0 36px 110px rgba(0, 0, 0, .42), 0 0 60px rgba(29, 228, 189, .065);
    transform: perspective(1200px) rotateY(-2deg) rotateX(1deg);
    transition: .6s
}

.dashboard-frame:hover {
    transform: perspective(1200px) rotateY(0) rotateX(0) translateY(-3px)
}

.dashboard-grid {
    background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 34px 34px
}

.status-dot {
    box-shadow: 0 0 0 5px rgba(112, 239, 118, .07), 0 0 18px rgba(112, 239, 118, .3)
}

.feature-icon {
    display: grid;
    width: 3rem;
    height: 3rem;
    place-items: center;
    border-radius: 1.05rem;
    background: linear-gradient(145deg, rgba(29, 228, 189, .1), rgba(255, 255, 255, .025));
    color: var(--cyan);
    border: 1px solid rgba(29, 228, 189, .13);
    box-shadow: inset 0 1px rgba(255, 255, 255, .06), 0 8px 25px rgba(0, 0, 0, .16)
}

.section-label {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    color: #9cf9d3;
    font-weight: 800;
    font-size: .9rem
}

.section-label:before {
    content: "";
    width: 22px;
    height: 1px;
    background: linear-gradient(90deg, var(--cyan), transparent)
}

.glow-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(29, 228, 189, .33), transparent);
    box-shadow: 0 0 18px rgba(29, 228, 189, .1)
}

.news-card .thumb {
    overflow: hidden;
    position: relative
}

.news-card .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease, filter .6s
}

.news-card:hover .thumb img {
    transform: scale(1.045);
    filter: saturate(1.06)
}

.news-card .thumb:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(5, 11, 20, .32), transparent 50%)
}

.category-chip {
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .035);
    color: #b8c6d5;
    transition: .25s
}

.category-chip:hover, .category-chip.active {
    color: #071019;
    background: linear-gradient(135deg, var(--green), var(--cyan));
    border-color: transparent
}

.timeline-line {
    position: absolute;
    right: 19px;
    top: 44px;
    bottom: 20px;
    width: 1px;
    background: linear-gradient(var(--cyan), rgba(255, 255, 255, .05))
}

.auth-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 28px 16px;
    position: relative
}

.auth-card {
    width: min(100%, 470px);
    background: linear-gradient(145deg, rgba(10, 19, 37, .9), rgba(5, 11, 20, .96));
    border: 1px solid rgba(255, 255, 255, .085);
    box-shadow: 0 35px 120px rgba(0, 0, 0, .5), 0 0 70px rgba(29, 228, 189, .06);
    backdrop-filter: blur(20px)
}

.auth-input {
    width: 100%;
    background: rgba(17, 29, 54, .42);
    border: 1px solid rgba(255, 255, 255, .095);
    color: #fff;
    outline: none;
    transition: .25s
}

.auth-input:focus {
    border-color: rgba(29, 228, 189, .55);
    box-shadow: 0 0 0 3px rgba(29, 228, 189, .09), 0 0 22px rgba(29, 228, 189, .06)
}

.auth-input::placeholder {
    color: #61758a
}

.otp-box {
    direction: ltr;
    text-align: center;
    letter-spacing: .7em;
    font-size: 1.55rem;
    font-weight: 900;
    padding-left: 1.1em
}

.step-hidden {
    display: none
}

.timer-ring {
    background: conic-gradient(var(--cyan) var(--progress, 100%), rgba(255, 255, 255, .07) 0);
    border-radius: 999px;
    padding: 2px
}

.timer-ring > span {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #08111f;
    color: #a9bac9;
    font-size: .73rem
}

.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .75s ease, transform .75s ease
}

.reveal.in {
    opacity: 1;
    transform: none
}

.floaty {
    animation: floaty 6s ease-in-out infinite
}

.pulse-soft {
    animation: pulseSoft 2.5s ease-in-out infinite
}

@keyframes floaty {
    50% {
        transform: translateY(-9px)
    }
}

@keyframes pulseSoft {
    50% {
        opacity: .55;
        transform: scale(.97)
    }
}

.prose-soodino h2 {
    font-size: 1.55rem;
    font-weight: 900;
    margin: 2rem 0 .75rem
}

.prose-soodino h3 {
    font-size: 1.15rem;
    font-weight: 800;
    margin: 1.5rem 0 .5rem
}

.prose-soodino p {
    color: #b5c4d1;
    line-height: 2.05;
    margin: .8rem 0
}

.prose-soodino ul {
    color: #b5c4d1;
    line-height: 2;
    margin: 1rem 1.2rem;
    list-style: disc
}

.prose-soodino strong {
    color: #fff
}

.faq-item[open] summary {
    color: #fff
}

.faq-item summary::-webkit-details-marker {
    display: none
}

@media (max-width: 768px) {
    .desktop-nav {
        display: none
    }

    .nav-link:after {
        display: none
    }

    .dashboard-frame {
        transform: none
    }

    .hero-wrap:before {
        width: 370px;
        height: 370px;
        right: -190px
    }

    .auth-card {
        border-radius: 26px
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        scroll-behavior: auto !important;
        animation: none !important;
        transition: none !important
    }

    .reveal {
        opacity: 1;
        transform: none
    }
}

/* === Product-led homepage v4 === */
.product-shot {
    position: relative;
    border: 1px solid rgba(29, 228, 189, .16);
    border-radius: 28px;
    background: #07111d;
    overflow: hidden;
    box-shadow: 0 32px 100px rgba(0, 0, 0, .42), 0 0 55px rgba(29, 228, 189, .06);
    isolation: isolate
}

.product-shot img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform .7s cubic-bezier(.2, .8, .2, 1), filter .7s
}

.product-shot:hover img {
    transform: scale(1.015);
    filter: saturate(1.05)
}

.hero-shot {
    transform: perspective(1200px) rotateY(-2deg) rotateX(1deg)
}

.hero-shot img {
    max-height: 570px;
    object-fit: cover;
    object-position: top
}

.shot-glow {
    position: absolute;
    inset: auto 8% -14% 8%;
    height: 26%;
    background: rgba(29, 228, 189, .14);
    filter: blur(55px);
    z-index: -1
}

.shot-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background: linear-gradient(180deg, #0c1a2b, #07111d);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    font-size: 11px;
    color: #8fa3b8
}

.shot-dots {
    display: flex;
    gap: 5px
}

.shot-dots span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14)
}

.shot-dots span:first-child {
    background: #fb7185
}

.shot-dots span:nth-child(2) {
    background: #f8ce65
}

.shot-dots span:nth-child(3) {
    background: #70ef76
}

.shot-label {
    font-weight: 800;
    color: #dce8f2
}

.live-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 9px;
    border-radius: 999px;
    background: rgba(29, 228, 189, .07);
    border: 1px solid rgba(29, 228, 189, .14);
    color: #a4f8dc;
    font-size: 10px;
    font-weight: 800
}

.floating-stat {
    position: absolute;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 175px;
    padding: 12px 14px;
    border-radius: 17px;
    background: rgba(7, 17, 29, .86);
    border: 1px solid rgba(255, 255, 255, .09);
    box-shadow: 0 18px 45px rgba(0, 0, 0, .32);
    backdrop-filter: blur(16px)
}

.floating-stat svg {
    width: 21px;
    color: #1de4bd
}

.floating-stat small {
    display: block;
    color: #6f8498;
    font-size: 9px
}

.floating-stat b {
    display: block;
    margin-top: 2px;
    font-size: 11px
}

.floating-stat-a {
    right: -22px;
    bottom: 17%
}

.floating-stat-b {
    left: -20px;
    top: 18%
}

.metric-pill {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 16px 17px;
    border-radius: 20px;
    border: 1px solid var(--line);
    background: linear-gradient(145deg, rgba(17, 29, 54, .65), rgba(7, 16, 29, .75));
    box-shadow: 0 15px 45px rgba(0, 0, 0, .16)
}

.metric-pill svg {
    width: 23px;
    color: #1de4bd
}

.metric-pill b {
    display: block;
    font-size: 1rem;
}

.metric-pill span {
    display: block;
    margin-top: 3px;
    color: #71869b;
    font-size: .9rem;
}

.product-row {
    display: grid;
    grid-template-columns:.82fr 1.18fr;
    gap: 52px;
    align-items: center
}

.product-row-reverse {
    grid-template-columns:1.18fr .82fr
}

.product-row-reverse > .product-copy {
    order: 2
}

.product-row-reverse > :not(.product-copy) {
    order: 1
}

.product-copy h3 {
    margin-top: 14px;
    font-size: 2rem;
    font-weight: 900;
    line-height: 1.65;
    letter-spacing: -.02em
}

.product-copy > p {
    margin-top: 13px;
    color: var(--muted);
    line-height: 2;
    font-size: .95rem
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #a4f8dc;
    font-weight: 800;
    font-size: .78rem
}

.eyebrow svg {
    width: 17px
}

.check-list {
    display: grid;
    gap: 10px;
    margin-top: 22px
}

.check-list li {
    position: relative;
    padding-right: 26px;
    color: #bdcad6;
    font-size: .87rem;
    line-height: 1.8
}

.check-list li:before {
    content: "✓";
    position: absolute;
    right: 0;
    top: 2px;
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 7px;
    background: rgba(29, 228, 189, .08);
    border: 1px solid rgba(29, 228, 189, .13);
    color: #70ef76;
    font-size: 10px;
    font-weight: 900
}

.inline-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
    color: #9cf9d3;
    font-size: .9rem;
    font-weight: 800
}

.inline-link svg {
    width: 15px;
    transition: .25s
}

.inline-link:hover svg {
    transform: translateX(-4px)
}

.wide-shot img {
    max-height: 530px;
    object-fit: cover;
    object-position: top
}

.execution-shot img {
    max-height: 520px
}

.options-shot img {
    max-height: 560px
}

.mock-window {
    position: relative;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 28px;
    background: linear-gradient(145deg, #0b192b, #07111d);
    box-shadow: 0 28px 85px rgba(0, 0, 0, .34);
    overflow: hidden
}

.mock-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, .06)
}

.mock-head small {
    display: block;
    color: #4f6a82;
    font-size: 8px;
    letter-spacing: .13em
}

.mock-head b {
    display: block;
    margin-top: 3px;
    font-size: 13px
}

.mock-filters {
    display: flex;
    gap: 8px;
    padding: 14px 18px;
    background: rgba(255, 255, 255, .018)
}

.mock-filters span, .tf-tabs span {
    padding: 7px 10px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .06);
    font-size: 9px;
    color: #7990a5
}

.mock-filters .active, .tf-tabs .active {
    background: rgba(29, 228, 189, .09);
    color: #aaf9df;
    border-color: rgba(29, 228, 189, .16)
}

.radar-list {
    display: grid;
    gap: 9px;
    padding: 0 18px 18px
}

.radar-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 13px;
    border-radius: 17px;
    background: rgba(255, 255, 255, .025);
    border: 1px solid rgba(255, 255, 255, .05)
}

.radar-symbol {
    display: flex;
    align-items: center;
    gap: 11px
}

.radar-symbol b {
    display: block;
    font-size: 11px
}

.radar-symbol small {
    display: block;
    margin-top: 3px;
    color: #71869b;
    font-size: 8px
}

.radar-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 12px
}

.radar-icon svg {
    width: 16px
}

.radar-icon.green {
    background: rgba(112, 239, 118, .09);
    color: #70ef76
}

.radar-icon.cyan {
    background: rgba(29, 228, 189, .09);
    color: #1de4bd
}

.radar-icon.amber {
    background: rgba(248, 206, 101, .09);
    color: #f8ce65
}

.radar-score {
    text-align: left
}

.radar-score b {
    display: block;
    font-size: 16px
}

.radar-score span {
    display: block;
    margin-top: 1px;
    font-size: 7px
}

.radar-score.good {
    color: #70ef76
}

.radar-score.watch {
    color: #f8ce65
}

.mock-replace-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 18px 18px;
    padding: 10px 12px;
    border-radius: 13px;
    border: 1px dashed rgba(255, 255, 255, .09);
    color: #60788f;
    font-size: 8px
}

.mock-replace-note svg {
    width: 14px
}

.state-cards {
    display: grid;
    gap: 8px;
    margin-top: 22px
}

.state-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 13px 15px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, .06);
    background: rgba(255, 255, 255, .02)
}

.state-card b {
    font-size: 12px
}

.state-card span {
    color: #8497aa;
    font-size: 9px
}

.state-card.success {
    border-color: rgba(112, 239, 118, .14)
}

.state-card.success b {
    color: #70ef76
}

.state-card.warning {
    border-color: rgba(248, 206, 101, .15)
}

.state-card.warning b {
    color: #f8ce65
}

.state-card.neutral b {
    color: #a5b5c5
}

.decision-mock {
    padding: 30px
}

.decision-orbit {
    width: 170px;
    height: 170px;
    margin: auto;
    display: grid;
    place-items: center;
    align-content: center;
    border-radius: 50%;
    background: radial-gradient(circle, #0b1d2c 58%, transparent 60%), conic-gradient(#70ef76 0 62%, #1de4bd 62% 82%, rgba(255, 255, 255, .07) 82%);
    box-shadow: 0 0 60px rgba(29, 228, 189, .08)
}

.decision-orbit span, .decision-orbit small {
    color: #6f8498;
    font-size: 8px
}

.decision-orbit b {
    font-size: 42px;
    line-height: 1.1;
    background: linear-gradient(135deg, #70ef76, #1de4bd);
    -webkit-background-clip: text;
    color: transparent
}

.decision-grid {
    display: grid;
    grid-template-columns:repeat(2, 1fr);
    gap: 8px;
    margin-top: 24px
}

.decision-grid > div {
    padding: 12px;
    border-radius: 13px;
    background: rgba(255, 255, 255, .025);
    border: 1px solid rgba(255, 255, 255, .05)
}

.decision-grid span {
    display: block;
    color: #6f8498;
    font-size: 8px
}

.decision-grid b {
    display: block;
    margin-top: 4px;
    font-size: 11px
}

.decision-summary {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    padding: 13px;
    border-radius: 14px;
    background: rgba(29, 228, 189, .045);
    border: 1px solid rgba(29, 228, 189, .1)
}

.decision-summary svg {
    width: 17px;
    min-width: 17px;
    color: #1de4bd
}

.decision-summary p {
    font-size: 9px;
    line-height: 1.8;
    color: #9db0c0
}

.decision-summary b {
    color: #fff
}

.symbol-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 18px
}

.symbol-chips span {
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(29, 228, 189, .11);
    background: rgba(29, 228, 189, .045);
    color: #96dfca;
    font-size: 9px
}

.fund-mock {
    padding-bottom: 2px
}

.fund-hero {
    display: grid;
    grid-template-columns:1fr auto;
    gap: 18px;
    align-items: center;
    margin: 18px;
    padding: 20px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(29, 228, 189, .07), rgba(78, 203, 255, .025));
    border: 1px solid rgba(29, 228, 189, .1)
}

.fund-hero small, .fund-hero span {
    display: block;
    color: #6f8498;
    font-size: 8px
}

.fund-hero b {
    display: block;
    margin: 4px 0;
    font-size: 27px
}

.bubble-ring {
    display: grid;
    place-items: center;
    align-content: center;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    border: 7px solid rgba(29, 228, 189, .12);
    box-shadow: inset 0 0 0 1px rgba(29, 228, 189, .15)
}

.bubble-ring b {
    font-size: 14px;
    color: #70ef76
}

.bubble-ring span {
    font-size: 7px
}

.fund-grid {
    display: grid;
    grid-template-columns:repeat(2, 1fr);
    gap: 8px;
    padding: 0 18px
}

.fund-grid > div {
    padding: 12px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, .05);
    background: rgba(255, 255, 255, .02)
}

.fund-grid span {
    display: block;
    color: #6f8498;
    font-size: 8px
}

.fund-grid b {
    display: block;
    margin-top: 3px;
    font-size: 11px
}

.mini-compare {
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    gap: 8px;
    margin: 8px 18px
}

.mini-compare > div {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .02);
    font-size: 9px
}

.good-text {
    color: #70ef76
}

.tf-tabs {
    display: flex;
    gap: 7px;
    padding: 15px 18px
}

.scalp-chart {
    height: 235px;
    padding: 5px 18px
}

.scalp-chart svg {
    width: 100%;
    height: 100%
}

.scalp-kpis {
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    gap: 8px;
    padding: 0 18px 18px
}

.scalp-kpis > div {
    padding: 11px;
    border-radius: 13px;
    border: 1px solid rgba(255, 255, 255, .05);
    background: rgba(255, 255, 255, .02)
}

.scalp-kpis span {
    display: block;
    color: #6f8498;
    font-size: 7px
}

.scalp-kpis b {
    display: block;
    margin-top: 4px;
    font-size: 10px
}

.soft-section {
    position: relative;
    border-top: 1px solid rgba(255, 255, 255, .045);
    border-bottom: 1px solid rgba(255, 255, 255, .045);
    background: linear-gradient(180deg, rgba(17, 29, 54, .18), rgba(5, 11, 20, .08))
}

.step-card {
    position: relative;
    padding: 26px 24px;
    border-radius: 24px;
    border: 1px solid var(--line);
    background: linear-gradient(145deg, rgba(17, 29, 54, .62), rgba(7, 16, 29, .8));
    overflow: hidden
}

.step-card > span {
    position: absolute;
    left: 18px;
    top: 10px;
    font-size: 42px;
    font-weight: 900;
    color: rgba(255, 255, 255, .035)
}

.step-card svg {
    width: 28px;
    color: #1de4bd
}

.step-card h3 {
    margin-top: 18px;
    font-weight: 900
}

.step-card p {
    margin-top: 8px;
    color: #8397a9;
    font-size: 12px;
    line-height: 1.9
}

.auth-showcase {
    display: grid;
    grid-template-columns:1fr 390px;
    gap: 70px;
    align-items: center;
    padding: 48px 58px;
    border-radius: 35px;
    border: 1px solid rgba(29, 228, 189, .11);
    background: radial-gradient(circle at 80% 0, rgba(29, 228, 189, .09), transparent 34%), linear-gradient(145deg, rgba(17, 29, 54, .62), rgba(5, 11, 20, .9));
    box-shadow: 0 30px 100px rgba(0, 0, 0, .26)
}

.auth-copy h2 {
    margin-top: 15px;
    font-size: 2.1rem;
    font-weight: 900;
    line-height: 1.65
}

.auth-copy p {
    margin-top: 12px;
    line-height: 2
}

.phone-mock {
    width: 100%;
    max-width: 330px;
    margin: auto;
    padding: 28px 23px 23px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 34px;
    background: #07111d;
    box-shadow: 0 30px 70px rgba(0, 0, 0, .32), inset 0 0 0 4px #0c1725;
    position: relative
}

.phone-notch {
    position: absolute;
    top: 9px;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 6px;
    border-radius: 99px;
    background: #101e2d
}

.phone-brand {
    text-align: center;
    padding: 16px 0 22px
}

.phone-brand .logo-orb {
    margin: auto
}

.phone-brand b {
    display: block;
    margin-top: 12px
}

.phone-brand small {
    display: block;
    margin-top: 5px;
    color: #6f8498;
    font-size: 9px
}

.phone-mock label {
    display: block;
    margin-bottom: 7px;
    color: #8da0b1;
    font-size: 9px
}

.phone-input {
    direction: ltr;
    text-align: left;
    padding: 13px 14px;
    border-radius: 13px;
    background: #0c1929;
    border: 1px solid rgba(255, 255, 255, .08);
    color: #dce8f2;
    font-size: 13px;
    letter-spacing: .07em
}

.phone-mock button {
    width: 100%;
    margin-top: 11px;
    padding: 12px;
    border: 0;
    border-radius: 13px;
    background: linear-gradient(135deg, #70ef76, #1de4bd);
    color: #03120d;
    font-weight: 900
}

.phone-note {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    margin-top: 14px;
    color: #61778b;
    font-size: 8px
}

.phone-note svg {
    width: 13px;
    color: #1de4bd
}

.social-card {
    display: block;
    padding: 25px;
    border-radius: 25px;
    border: 1px solid var(--line);
    background: linear-gradient(145deg, rgba(17, 29, 54, .7), rgba(7, 16, 29, .85));
    transition: .35s
}

.social-card:hover {
    transform: translateY(-4px);
    border-color: rgba(29, 228, 189, .2);
    box-shadow: 0 22px 70px rgba(0, 0, 0, .25)
}

.social-card h3 {
    margin-top: 17px;
    font-size: 17px;
    font-weight: 900
}

.social-card p {
    margin-top: 8px;
    color: #8497aa;
    font-size: 11px;
    line-height: 1.9
}

.social-card > b {
    display: block;
    margin-top: 14px;
    color: #9cf9d3;
    font-size: 11px;
    direction: ltr;
    text-align: right
}

.news-layout {
    display: grid;
    grid-template-columns:1.35fr .65fr;
    gap: 16px
}

.featured-news, .mini-news {
    border: 1px solid var(--line);
    border-radius: 25px;
    background: linear-gradient(145deg, rgba(17, 29, 54, .65), rgba(7, 16, 29, .85));
    overflow: hidden
}

.news-visual {
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    background-color: #0a1726
}

.featured-news .news-visual {
    height: 280px
}

.news-visual:before, .news-visual:after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(1px)
}

.visual-a {
    background: radial-gradient(circle at 65% 40%, rgba(29, 228, 189, .2), transparent 26%), linear-gradient(135deg, #07111d, #10283a)
}

.visual-a:before {
    width: 280px;
    height: 280px;
    border: 1px solid rgba(29, 228, 189, .15)
}

.visual-a:after {
    width: 180px;
    height: 180px;
    border: 1px solid rgba(112, 239, 118, .13)
}

.visual-a svg {
    width: 80px;
    height: 80px;
    color: #1de4bd;
    filter: drop-shadow(0 0 25px rgba(29, 228, 189, .2))
}

.visual-a span {
    position: absolute;
    right: 22px;
    top: 20px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(29, 228, 189, .08);
    border: 1px solid rgba(29, 228, 189, .14);
    font-size: 9px;
    color: #a4f8dc
}

.news-meta {
    display: flex;
    gap: 12px;
    color: #71869b;
    font-size: 9px
}

.featured-news h3 {
    margin-top: 12px;
    font-size: 20px;
    font-weight: 900;
    line-height: 1.7
}

.featured-news p {
    margin-top: 8px;
    color: #8397a9;
    font-size: 11px;
    line-height: 1.9
}

.mini-news {
    display: grid;
    grid-template-columns:120px 1fr;
    min-height: 132px
}

.mini-news .news-visual {
    height: 100%
}

.mini-news .news-visual svg {
    width: 35px;
    color: #1de4bd
}

.visual-b {
    background: radial-gradient(circle, rgba(248, 206, 101, .15), transparent 45%), #0a1726
}

.visual-c {
    background: radial-gradient(circle, rgba(78, 203, 255, .15), transparent 45%), #0a1726
}

.mini-news > div:last-child {
    padding: 17px
}

.mini-news span {
    color: #74a9aa;
    font-size: 8px
}

.mini-news h3 {
    margin-top: 7px;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.65
}

.mini-news p {
    margin-top: 5px;
    color: #768b9e;
    font-size: 9px;
    line-height: 1.7
}

.category-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

.category-row a {
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid var(--line);
    color: #8296a9;
    font-size: 9px;
    transition: .25s
}

.category-row a:hover {
    background: rgba(29, 228, 189, .07);
    border-color: rgba(29, 228, 189, .17);
    color: #a4f8dc
}

.release-list {
    display: grid;
    gap: 8px
}

.release-list > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .025);
    border: 1px solid rgba(255, 255, 255, .045)
}

.release-list span {
    color: #658096;
    font-size: 8px
}

.release-list b {
    font-size: 10px
}

.testimonial-placeholder {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .025);
    border: 1px dashed rgba(255, 255, 255, .08)
}

.avatar-placeholder {
    display: grid;
    place-items: center;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: linear-gradient(145deg, rgba(29, 228, 189, .14), rgba(78, 203, 255, .08));
    color: #a4f8dc;
    font-weight: 900
}

.testimonial-placeholder b {
    font-size: 11px
}

.testimonial-placeholder p {
    margin-top: 4px;
    color: #74899c;
    font-size: 9px
}

.final-cta {
    position: relative;
    overflow: hidden;
    padding: 65px 30px;
    border-radius: 36px;
    border: 1px solid rgba(29, 228, 189, .13);
    background: linear-gradient(145deg, rgba(17, 29, 54, .76), rgba(5, 11, 20, .93));
    box-shadow: 0 30px 100px rgba(0, 0, 0, .3)
}

.cta-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(65px)
}

.cta-orb.one {
    width: 300px;
    height: 300px;
    right: -70px;
    top: -120px;
    background: rgba(29, 228, 189, .15)
}

.cta-orb.two {
    width: 260px;
    height: 260px;
    left: -90px;
    bottom: -140px;
    background: rgba(78, 203, 255, .1)
}

@media (max-width: 1024px) {
    .product-row, .product-row-reverse {
        grid-template-columns:1fr;
        gap: 30px
    }

    .product-row-reverse > .product-copy, .product-row-reverse > :not(.product-copy) {
        order: initial
    }

    .auth-showcase {
        grid-template-columns:1fr;
        gap: 35px
    }

    .news-layout {
        grid-template-columns:1fr
    }

    .floating-stat {
        display: none
    }

    .hero-shot {
        transform: none
    }
}

@media (max-width: 640px) {
    .product-copy h3 {
        font-size: 1.55rem
    }

    .wide-shot img, .execution-shot img, .options-shot img {
        max-height: 360px
    }

    .decision-mock {
        padding: 20px
    }

    .decision-orbit {
        width: 145px;
        height: 145px
    }

    .auth-showcase {
        padding: 30px 20px
    }

    .auth-copy h2 {
        font-size: 1.65rem
    }

    .news-layout .grid {
        grid-template-columns:1fr
    }

    .mini-news {
        grid-template-columns:95px 1fr
    }

    .featured-news .news-visual {
        height: 210px
    }

    .state-card {
        display: block
    }

    .state-card span {
        display: block;
        margin-top: 5px
    }

    .final-cta {
        padding: 48px 18px
    }

    .product-shot, .mock-window {
        border-radius: 22px
    }
}

/* === V5 Readability & visual hierarchy refinement === */
:root {
    --font-body: 15.75px;
    --text-soft: #a9b8c8;
    --text-muted: #8fa2b5;
    --reading: 720px;
}

html {
    font-size: 16px
}

body {
    font-size: var(--font-body);
    font-weight: 400;
    line-height: 1.85;
    letter-spacing: -.006em;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

p, li {
    font-weight: 400
}

.muted {
    color: var(--text-muted)
}

/* Typography scale: clear but deliberately not over-heavy */
h1, h2, h3, h4 {
    letter-spacing: -.025em;
    text-wrap: balance
}

h1 {
    font-weight: 800 !important
}

h2 {
    font-weight: 800 !important
}

h3 {
    font-weight: 700 !important
}

h4 {
    font-weight: 700 !important
}

.font-black {
    font-weight: 800 !important
}

.font-extrabold {
    font-weight: 800 !important
}

.font-bold {
    font-weight: 700 !important
}

/* Global icon rhythm */
[data-lucide] {
    stroke-width: 1.8
}

.feature-icon [data-lucide], .eyebrow [data-lucide], .section-label [data-lucide] {
    stroke-width: 1.75
}

.feature-icon {
    width: 3.15rem;
    height: 3.15rem;
    border-radius: 1rem
}

.feature-icon svg {
    width: 1.42rem;
    height: 1.42rem
}

/* Header readability */
.nav-shell {
    background: rgba(5, 11, 20, .84);
    border-bottom-color: rgba(255, 255, 255, .075)
}

.nav-link {
    font-size: .9rem;
    font-weight: 600;
    color: #b5c1cd;
    letter-spacing: -.01em
}

.nav-link:after {
    bottom: -9px;
    height: 1.5px
}

/* Hero */
.hero-wrap h1 {
    font-size: clamp(2.25rem, 4.25vw, 2.8rem) !important;
    line-height: 1.5 !important;
    max-width: 760px;
}

.hero-wrap p {
    font-size: clamp(1rem, 1.4vw, 1.1rem) !important;
    line-height: 2 !important;
    max-width: 690px !important;
    color: #aab9c7;
}

.hero-wrap .badge {
    font-size: .9rem;
    font-weight: 700;
    padding: .6rem .9rem
}

.btn-primary, .btn-secondary {
    font-size: .9rem;
    font-weight: 700 !important;
    line-height: 1.5
}

/* Section headings */
.section-label, .eyebrow {
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.55
}

.section-label:before {
    width: 18px
}

#product-tour > div:first-child h2, .soft-section h2 {
    font-size: clamp(1.9rem, 3vw, 2.55rem) !important;
    line-height: 1.5 !important;
    font-weight: 800 !important;
}

#product-tour > div:first-child p, .soft-section .reveal > p {
    font-size: 1rem;
    line-height: 2;
    color: #9fb0c0
}

/* Product presentation — closer to a premium product landing page */
.product-row {
    grid-template-columns:minmax(0, .88fr) minmax(0, 1.12fr);
    gap: clamp(40px, 6vw, 78px)
}

.product-row-reverse {
    grid-template-columns:minmax(0, 1.12fr) minmax(0, .88fr)
}

.product-copy {
    max-width: 560px
}

.product-copy h3 {
    margin-top: 15px;
    font-size: clamp(1.55rem, 2.25vw, 2.05rem);
    font-weight: 750 !important;
    line-height: 1.58;
    letter-spacing: -.028em;
}

.product-copy > p {
    margin-top: 14px;
    color: var(--text-soft);
    line-height: 2;
    font-size: 1rem;
    max-width: 540px;
}

.check-list {
    gap: 11px;
    margin-top: 23px
}

.check-list li {
    padding-right: 29px;
    color: #bdc9d4;
    font-size: .92rem;
    line-height: 1.85;
}

.check-list li:before {
    top: 4px;
    width: 19px;
    height: 19px;
    font-size: 10px;
    font-weight: 700;
    border-radius: 6px
}

.inline-link {
    font-size: 1rem;
    font-weight: 700
}

/* Product screenshots get more presence, less visual noise */
.product-shot, .mock-window {
    border-color: rgba(255, 255, 255, .09);
    box-shadow: 0 26px 74px rgba(0, 0, 0, .34), 0 0 0 1px rgba(29, 228, 189, .035)
}

.product-shot:hover, .mock-window:hover {
    border-color: rgba(29, 228, 189, .22)
}

.shot-topbar {
    padding: 13px 17px
}

.shot-label {
    font-size: .77rem;
    font-weight: 700
}

.live-pill {
    font-size: .72rem;
    font-weight: 650;
    padding: .38rem .62rem
}

/* Entry-state cards */
.state-cards {
    gap: 10px;
    margin-top: 24px
}

.state-card {
    padding: 13px 14px;
    border-radius: 14px
}

.state-card b {
    font-size: .92rem;
    font-weight: 700
}

.state-card span {
    font-size: .9rem;
    line-height: 1.65;
    color: #96a7b7
}

/* Mock dashboard text */
.mock-window {
    font-size: .9rem
}

.mock-head small {
    font-size: .72rem;
    letter-spacing: .04em
}

.mock-head b {
    font-size: 1rem;
    font-weight: 700
}

.decision-orbit span, .decision-orbit small {
    font-size: .75rem
}

.decision-orbit b {
    font-weight: 800
}

.decision-grid span, .fund-grid span, .scalp-kpis span {
    font-size: .78rem;
    color: #91a5b7
}

.decision-grid b, .fund-grid b, .scalp-kpis b {
    font-size: .92rem;
    font-weight: 700
}

.decision-summary p {
    font-size: .88rem;
    line-height: 1.85;
    color: #aebdca
}

.mock-replace-note {
    font-size: .76rem;
    line-height: 1.7
}

.symbol-chips span {
    font-size: .78rem;
    font-weight: 650
}

/* Start steps */
.step-card {
    padding: 29px 27px;
    border-radius: 22px
}

.step-card > span {
    font-size: 38px;
    font-weight: 800
}

.step-card svg {
    width: 27px;
    height: 27px;
    stroke-width: 1.7
}

.step-card h3 {
    margin-top: 17px;
    font-size: 1.05rem;
    font-weight: 700
}

.step-card p {
    margin-top: 9px;
    color: #97a8b8;
    font-size: .9rem;
    line-height: 1.9
}

/* Auth showcase */
.auth-copy {
    max-width: 620px
}

.auth-copy h2 {
    margin-top: 15px;
    font-size: clamp(1.7rem, 2.7vw, 2.25rem);
    font-weight: 800;
    line-height: 1.55
}

.auth-copy p {
    font-size: 1rem;
    line-height: 2;
    color: #a8b7c5
}

.phone-brand b {
    font-size: 1rem;
    font-weight: 700
}

.phone-brand small {
    font-size: .74rem
}

.phone-mock label {
    font-size: .76rem
}

.phone-note {
    font-size: .72rem
}

.phone-mock button {
    font-size: .86rem;
    font-weight: 700
}

/* Social ecosystem cards */
.social-card {
    padding: 27px;
    border-radius: 22px
}

.social-card h3 {
    margin-top: 17px;
    font-size: 1.08rem;
    font-weight: 700
}

.social-card p {
    margin-top: 9px;
    color: #98a9b9;
    font-size: .9rem;
    line-height: 1.9
}

.social-card > b {
    font-size: .86rem;
    font-weight: 700
}

/* News: no tiny UI copy */
.news-meta {
    font-size: .75rem;
    gap: 14px
}

.featured-news h3 {
    font-size: 1.28rem;
    font-weight: 750;
    line-height: 1.65
}

.featured-news p {
    font-size: .9rem;
    line-height: 1.9;
    color: #9bacbc
}

.visual-a span {
    font-size: .73rem
}

.mini-news span {
    font-size: .72rem
}

.mini-news h3 {
    font-size: .94rem;
    font-weight: 700;
    line-height: 1.7
}

.mini-news p {
    font-size: .8rem;
    line-height: 1.75;
    color: #91a3b4
}

.category-row a {
    padding: 8px 13px;
    font-size: .78rem;
    font-weight: 600
}

/* Release / testimonial / final CTA */
.release-list span {
    font-size: .74rem
}

.release-list b {
    font-size: .9rem;
    font-weight: 650
}

.testimonial-placeholder b {
    font-size: .95rem;
    font-weight: 700
}

.testimonial-placeholder p {
    font-size: .9rem;
    line-height: 1.8
}

.final-cta h2 {
    font-size: clamp(1.95rem, 3vw, 2.65rem) !important;
    line-height: 1.55 !important;
    font-weight: 800 !important
}

.final-cta p {
    font-size: 1rem;
    line-height: 2;
    color: #a7b7c6
}

/* Footer */
footer p {
    font-size: .9rem !important;
    line-height: 1.95 !important;
    color: #96a7b7 !important
}

footer b {
    font-weight: 700
}

footer a, footer span {
    line-height: 1.75
}

/* Hover effects remain subtle; readability wins over animation */
.card:hover, .social-card:hover {
    transform: translateY(-3px)
}

.product-shot:hover img {
    transform: scale(1.008)
}

@media (max-width: 1024px) {
    .product-copy {
        max-width: 720px
    }

    .product-row, .product-row-reverse {
        gap: 34px
    }
}

@media (max-width: 640px) {
    body {
        font-size: 15.5px;
        line-height: 1.82
    }

    .hero-wrap h1 {
        font-size: 2rem !important;
        line-height: 1.48 !important
    }

    .hero-wrap p {
        font-size: .98rem !important;
        line-height: 1.95 !important
    }

    #product-tour > div:first-child h2, .soft-section h2 {
        font-size: 1.75rem !important;
        line-height: 1.55 !important
    }

    .product-copy h3 {
        font-size: 1.45rem;
        line-height: 1.65
    }

    .product-copy > p {
        font-size: .95rem
    }

    .check-list li {
        font-size: .9rem
    }

    .social-card p, .step-card p {
        font-size: .88rem
    }

    .auth-showcase {
        padding: 31px 22px
    }
}

.list-item {
    list-style: none;
    display: flex;
}

/* =========================================================
   Soodino Auth v1 — SMS OTP
   ========================================================= */

.sd-auth-body {
    min-height: 100vh;
    background: var(--bg);
}

.sd-auth-shell {
    position: relative;
    display: grid;
    min-height: 100vh;
    place-items: center;
    overflow: hidden;
    padding: 2rem 1rem;
    isolation: isolate;
}

.sd-auth-grid {
    position: fixed;
    inset: 0;
    z-index: -3;
    opacity: .55;
    background-image:
            linear-gradient(rgba(255,255,255,.018) .0625rem, transparent .0625rem),
            linear-gradient(90deg, rgba(255,255,255,.018) .0625rem, transparent .0625rem);
    background-size: 2.65rem 2.65rem;
    mask-image: linear-gradient(to bottom, #000 0%, transparent 92%);
}

.sd-auth-glow {
    position: fixed;
    z-index: -2;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(5rem);
}

.sd-auth-glow--top {
    width: 22rem;
    height: 22rem;
    top: -10rem;
    right: -7rem;
    background: rgba(29,228,189,.09);
}

.sd-auth-glow--bottom {
    width: 20rem;
    height: 20rem;
    bottom: -11rem;
    left: -8rem;
    background: rgba(78,203,255,.055);
}

.sd-auth-wrap {
    width: min(100%, 31rem);
}

.sd-auth-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    margin-bottom: 1.35rem;
}

.sd-auth-logo {
    display: grid;
    width: 3rem;
    height: 3rem;
    place-items: center;
    border: .0625rem solid rgba(29,228,189,.2);
    border-radius: 1rem;
    color: #90f3d3;
    background: linear-gradient(145deg, rgba(29,228,189,.13), rgba(17,29,54,.9));
    box-shadow: 0 0 2rem rgba(29,228,189,.1);
    font-size: 1.05rem;
    font-weight: 900;
}

.sd-auth-brand > span:last-child {
    display: grid;
    gap: .05rem;
}

.sd-auth-brand b {
    color: #f2f8fa;
    font-size: 1.08rem;
    font-weight: 900;
}

.sd-auth-brand small {
    color: #71879a;
    font-size: .9rem;
}

.sd-auth-card {
    position: relative;
    overflow: hidden;
    padding: 1.35rem;
    border: .0625rem solid rgba(255,255,255,.08);
    border-radius: 1.45rem;
    background:
            radial-gradient(circle at 100% 0, rgba(29,228,189,.06), transparent 28%),
            linear-gradient(145deg, rgba(10,19,37,.93), rgba(5,11,20,.975));
    box-shadow: 0 2rem 6.5rem rgba(0,0,0,.44), 0 0 4rem rgba(29,228,189,.035);
    backdrop-filter: blur(1.2rem);
}

.sd-auth-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: 1.4rem;
    padding-bottom: .85rem;
    border-bottom: .0625rem solid rgba(255,255,255,.05);
}

.sd-auth-security-badge,
.sd-auth-home-link {
    display: inline-flex;
    align-items: center;
    gap: .38rem;
    min-height: 2rem;
    font-size: .9rem;
    font-weight: 750;
}

.sd-auth-security-badge {
    padding: .3rem .55rem;
    border: .0625rem solid rgba(29,228,189,.11);
    border-radius: .65rem;
    color: #99e7d0;
    background: rgba(29,228,189,.04);
}

.sd-auth-security-badge svg,
.sd-auth-home-link svg {
    width: .95rem;
    height: .95rem;
}

.sd-auth-home-link {
    color: #708699;
    transition: color .18s ease;
}

.sd-auth-home-link:hover {
    color: #dce8ed;
}

.sd-auth-step[hidden] {
    display: none !important;
}

.sd-auth-intro {
    display: grid;
    grid-template-columns: 3.3rem minmax(0,1fr);
    align-items: center;
    gap: .85rem;
    margin-bottom: 1.45rem;
}

.sd-auth-step-icon {
    display: grid;
    width: 3.3rem;
    height: 3.3rem;
    place-items: center;
    border: .0625rem solid rgba(29,228,189,.13);
    border-radius: 1rem;
    color: #83eacb;
    background: rgba(29,228,189,.05);
}

.sd-auth-step-icon--otp {
    border-color: rgba(78,203,255,.13);
    color: #8ddfff;
    background: rgba(78,203,255,.045);
}

.sd-auth-step-icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

.sd-auth-intro h1 {
    margin: 0;
    color: #eef6f8;
    font-size: 1.25rem;
    font-weight: 900;
    line-height: 1.6;
}

.sd-auth-intro p {
    margin: .2rem 0 0;
    color: #7e93a4;
    font-size: .92rem;
    line-height: 1.9;
}

.sd-auth-form {
    display: grid;
    gap: .5rem;
}

.sd-auth-form > label {
    color: #c9d6dc;
    font-size: .92rem;
    font-weight: 750;
}

.sd-auth-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.sd-auth-input-wrap > svg {
    position: absolute;
    right: .9rem;
    z-index: 2;
    width: 1rem;
    height: 1rem;
    color: #62798b;
    pointer-events: none;
}

.sd-auth-input {
    width: 100%;
    height: 3.45rem;
    padding: 0 .95rem;
    border: .0625rem solid rgba(255,255,255,.085);
    border-radius: .9rem;
    outline: 0;
    color: #eff7f9;
    background: rgba(17,29,54,.38);
    font: inherit;
    font-size: 1rem;
    transition:
            border-color .18s ease,
            box-shadow .18s ease,
            background .18s ease;
}

.sd-auth-input--mobile {
    direction: ltr;
    padding-right: 2.65rem;
    padding-left: 4rem;
    text-align: left;
    font-variant-numeric: tabular-nums;
    letter-spacing: .04em;
}

.sd-auth-input:focus {
    border-color: rgba(29,228,189,.34);
    background: rgba(17,29,54,.5);
    box-shadow: 0 0 0 .2rem rgba(29,228,189,.055);
}

.sd-auth-input::placeholder {
    color: #63788a;
    opacity: 1;
}

.sd-auth-input-badge {
    position: absolute;
    left: .7rem;
    display: inline-flex;
    min-height: 1.9rem;
    align-items: center;
    padding: .25rem .55rem;
    border: .0625rem solid rgba(255,255,255,.055);
    border-radius: .55rem;
    color: #73889a;
    background: rgba(255,255,255,.025);
    font-size: .9rem;
    pointer-events: none;
}

.sd-auth-field-hint {
    color: #617789;
    font-size: .9rem;
    line-height: 1.7;
}

.sd-auth-error {
    padding: .55rem .65rem;
    border: .0625rem solid rgba(251,113,133,.13);
    border-radius: .65rem;
    color: #f0a1ae;
    background: rgba(251,113,133,.04);
    font-size: .9rem;
    line-height: 1.8;
}

.sd-auth-submit {
    position: relative;
    display: inline-flex;
    width: 100%;
    height: 3.35rem;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin-top: .55rem;
    padding: 0 1rem;
    border: 0;
    border-radius: .9rem;
    color: #03120d;
    background: linear-gradient(135deg, #70ef76, #1de4bd 55%, #25c2a0);
    box-shadow: 0 .65rem 1.8rem rgba(29,228,189,.14), inset 0 .0625rem rgba(255,255,255,.42);
    font: inherit;
    font-size: .95rem;
    font-weight: 850;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.sd-auth-submit:hover:not(:disabled) {
    transform: translateY(-.08rem);
    box-shadow: 0 .85rem 2.1rem rgba(29,228,189,.2), inset 0 .0625rem rgba(255,255,255,.42);
}

.sd-auth-submit:disabled {
    cursor: wait;
    opacity: .72;
}

.sd-auth-submit > svg {
    width: 1rem;
    height: 1rem;
}

.sd-auth-button-loader {
    display: none;
    width: 1rem;
    height: 1rem;
    border: .12rem solid rgba(3,18,13,.22);
    border-top-color: #03120d;
    border-radius: 50%;
    animation: sdAuthRotate .72s linear infinite;
}

.sd-auth-submit.is-loading > svg {
    display: none;
}

.sd-auth-submit.is-loading .sd-auth-button-loader {
    display: inline-block;
}

@keyframes sdAuthRotate {
    to { transform: rotate(360deg); }
}

.sd-auth-note {
    display: grid;
    grid-template-columns: 2.3rem minmax(0,1fr);
    align-items: start;
    gap: .65rem;
    margin-top: 1rem;
    padding: .75rem;
    border: .0625rem solid rgba(255,255,255,.05);
    border-radius: .85rem;
    background: rgba(255,255,255,.018);
}

.sd-auth-note > svg {
    width: 1rem;
    height: 1rem;
    margin: .25rem auto 0;
    color: #77dabe;
}

.sd-auth-note p {
    margin: 0;
    color: #718799;
    font-size: .9rem;
    line-height: 1.85;
}

.sd-auth-back {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-bottom: 1rem;
    padding: 0;
    border: 0;
    color: #718799;
    background: transparent;
    font: inherit;
    font-size: .9rem;
    cursor: pointer;
}

.sd-auth-back:hover {
    color: #d8e5ea;
}

.sd-auth-back svg {
    width: .95rem;
    height: .95rem;
}

.sd-auth-mobile-view {
    direction: ltr;
    display: inline-block;
    color: #dce8ed;
    font-variant-numeric: tabular-nums;
}

.sd-auth-otp {
    direction: ltr;
    text-align: center;
    letter-spacing: .65em;
    padding-left: 1.55rem;
    font-size: 1.4rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

.sd-auth-resend-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
    padding: .7rem .75rem;
    border: .0625rem solid rgba(255,255,255,.05);
    border-radius: .85rem;
    background: rgba(255,255,255,.018);
}

.sd-auth-resend-row > div:first-child {
    display: grid;
    gap: .18rem;
}

.sd-auth-resend-row b {
    color: #b9c8d0;
    font-size: .9rem;
}

.sd-auth-resend-row button {
    width: fit-content;
    padding: 0;
    border: 0;
    color: #8cebd0;
    background: transparent;
    font: inherit;
    font-size: .9rem;
    cursor: pointer;
}

.sd-auth-resend-row button:disabled {
    color: #5b7182;
    cursor: not-allowed;
}

.sd-auth-timer {
    display: grid;
    width: 3.25rem;
    height: 3.25rem;
    place-items: center;
    border-radius: 50%;
    background: conic-gradient(var(--cyan) var(--progress,100%), rgba(255,255,255,.06) 0);
    padding: .12rem;
}

.sd-auth-timer > span {
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
    border-radius: 50%;
    color: #9aacb8;
    background: #08111f;
    font-size: .9rem;
    font-variant-numeric: tabular-nums;
}

.sd-auth-expire-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    margin: .75rem 0 0;
    color: #617789;
    font-size: .9rem;
}

.sd-auth-expire-note svg {
    width: .9rem;
    height: .9rem;
}

.sd-auth-success {
    padding: 2.8rem .5rem 2.2rem;
    text-align: center;
}

.sd-auth-success-icon {
    display: grid;
    width: 4rem;
    height: 4rem;
    margin: 0 auto .85rem;
    place-items: center;
    border: .0625rem solid rgba(29,228,189,.16);
    border-radius: 50%;
    color: #7fe9c9;
    background: rgba(29,228,189,.055);
    box-shadow: 0 0 2rem rgba(29,228,189,.07);
}

.sd-auth-success-icon svg {
    width: 1.45rem;
    height: 1.45rem;
}

.sd-auth-success h2 {
    margin: 0;
    color: #eef6f8;
    font-size: 1.2rem;
}

.sd-auth-success p {
    margin: .35rem 0 0;
    color: #718799;
    font-size: .92rem;
}

.sd-auth-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    margin-top: .85rem;
    color: #5f7587;
    font-size: .9rem;
    text-align: center;
}

.sd-auth-footer svg {
    width: .9rem;
    height: .9rem;
    color: #6f9e94;
}

@media (max-width: 36rem) {
    .sd-auth-shell {
        align-items: start;
        padding-top: 1.25rem;
    }

    .sd-auth-card {
        padding: 1rem;
        border-radius: 1.15rem;
    }

    .sd-auth-card-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .sd-auth-home-link {
        order: -1;
    }

    .sd-auth-intro {
        grid-template-columns: 2.8rem minmax(0,1fr);
    }

    .sd-auth-step-icon {
        width: 2.8rem;
        height: 2.8rem;
        border-radius: .8rem;
    }

    .sd-auth-resend-row {
        align-items: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sd-auth-submit,
    .sd-auth-button-loader {
        animation: none !important;
        transition: none !important;
    }
}


/* =========================================================
   Soodino Header / Mobile Navigation Fix v2
   Final authoritative overrides
   ========================================================= */

.nav-shell{
    position:sticky;
    top:0;
    z-index:50;
    isolation:isolate;
    background:rgba(5,11,20,.54)!important;
    -webkit-backdrop-filter:blur(1.65rem) saturate(155%)!important;
    backdrop-filter:blur(1.65rem) saturate(155%)!important;
    border-bottom:.0625rem solid rgba(255,255,255,.075)!important;
    box-shadow:
            0 .45rem 1.8rem rgba(0,0,0,.13),
            inset 0 .0625rem rgba(255,255,255,.025);
}

.nav-shell::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    pointer-events:none;
    background:
            linear-gradient(
                    180deg,
                    rgba(13,27,39,.12),
                    rgba(5,11,20,.03)
            );
}

.site-header-row{
    position:relative;
    z-index:2;
}

.desktop-nav{
    min-width:0;
}

.mobile-menu{
    display:none!important;
    position:relative;
    z-index:3;
    margin-inline:-.25rem;
    border-top:.0625rem solid rgba(255,255,255,.055);
}

.mobile-menu.open{
    display:block!important;
}

.mobile-menu > .grid{
    margin-top:.55rem;
    padding:.55rem;
    border:.0625rem solid rgba(255,255,255,.065);
    border-radius:1rem;
    background:rgba(8,17,31,.62);
    -webkit-backdrop-filter:blur(1.4rem) saturate(145%);
    backdrop-filter:blur(1.4rem) saturate(145%);
    box-shadow:0 .8rem 2rem rgba(0,0,0,.16);
}

.header-menu-button{
    flex:0 0 auto;
}

.site-brand-logo{
    width:3.75rem;
    height:3.75rem;
}

@media (max-width:48rem){
    .desktop-nav{
        display:none!important;
    }

    .nav-shell{
        background:rgba(5,11,20,.48)!important;
        -webkit-backdrop-filter:blur(1.5rem) saturate(160%)!important;
        backdrop-filter:blur(1.5rem) saturate(160%)!important;
    }

    .site-header-row{
        min-height:4.5rem!important;
        gap:.75rem!important;
    }

    .site-brand-logo{
        width:3rem!important;
        height:3rem!important;
        border-radius:.85rem;
    }

    .site-brand-subtitle{
        font-size:.9rem!important;
        white-space:nowrap;
    }

    .header-menu-button{
        display:grid!important;
        width:2.85rem;
        height:2.85rem;
        padding:0!important;
    }

    .mobile-menu .nav-link{
        display:flex;
        align-items:center;
        min-height:2.85rem;
        padding:.65rem .8rem;
        border-radius:.75rem;
        font-size:.95rem;
    }

    .mobile-menu .nav-link::after{
        display:none!important;
    }
}

@media (max-width:34rem){
    .header-login-action{
        display:none!important;
    }

    .site-brand-subtitle{
        display:none!important;
    }

    .site-header-row{
        min-height:4.25rem!important;
    }

    .site-brand-logo{
        width:2.85rem!important;
        height:2.85rem!important;
    }
}

@supports not ((-webkit-backdrop-filter:blur(1rem)) or (backdrop-filter:blur(1rem))){
    .nav-shell{
        background:rgba(5,11,20,.92)!important;
    }

    .mobile-menu > .grid{
        background:rgba(8,17,31,.96);
    }
}