:root {
    --red:#c62828;
    --red-dark:#a91e1e;
    --black:#17191e;
    --text:#24272d;
    --muted:#707782;
    --line:#e5e7eb;
    --soft:#f7f8fa;
    --red-soft:#fff5f5;
}

* {
    box-sizing:border-box;
}

html {
    scroll-behavior:smooth;
}

body {
    margin:0;
    font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
    color:var(--text);
    background:#fff;
    line-height:1.55;
}

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

button,
input {
    font:inherit;
}

button {
    cursor:pointer;
}

.container {
    width:min(1160px,calc(100% - 40px));
    margin:auto;
}

.header {
    position:sticky;
    top:0;
    z-index:20;
    background:rgba(255,255,255,.94);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
}

.nav {
    height:74px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

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

.logo-box {
    width:42px;
    height:42px;
    border-radius:12px;
    display:grid;
    place-items:center;
    background:var(--red);
    color:#fff;
    font-weight:800;
}

.logo strong,
.logo small {
    display:block;
}

.logo strong {
    font-size:15px;
}

.logo small {
    font-size:11px;
    color:var(--muted);
}

.nav nav {
    display:flex;
    gap:26px;
    font-size:14px;
}

.nav nav a {
    color:#555c67;
}

.nav nav a:hover {
    color:var(--red);
}

.hero {
    background:linear-gradient(#fff,#fff8f7);
    padding:80px 0 70px;
}

.hero-grid {
    display:grid;
    grid-template-columns:1.35fr .65fr;
    align-items:center;
    gap:60px;
}

.badge,
.section-head>span,
.small-label,
.modal-label {
    font-size:12px;
    font-weight:800;
    color:var(--red);
    letter-spacing:.08em;
}

.hero h1 {
    max-width:800px;
    font-size:clamp(42px,6vw,68px);
    line-height:1.02;
    letter-spacing:-.045em;
    margin:14px 0 20px;
}

.hero-text {
    color:var(--muted);
    max-width:680px;
    font-size:18px;
}

.hero-buttons {
    display:flex;
    gap:12px;
    margin-top:28px;
}

.btn {
    border-radius:11px;
    border:0;
    padding:13px 19px;
    font-weight:750;
}

.primary {
    background:var(--red);
    color:#fff;
}

.primary:hover {
    background:var(--red-dark);
}

.secondary {
    background:#fff;
    border:1px solid var(--line);
}

.btn:disabled {
    opacity:.4;
    cursor:not-allowed;
}

.full {
    width:100%;
}

.features {
    margin-top:26px;
    display:flex;
    flex-wrap:wrap;
    gap:16px;
    font-size:13px;
    color:#5f6670;
}

.hero-card,
.shop-box,
.summary {
    background:#fff;
    border:1px solid var(--line);
    border-radius:20px;
}

.hero-card {
    overflow:hidden;
    box-shadow:0 18px 50px rgba(0,0,0,.07);
}

.status {
    padding:15px 18px;
    display:flex;
    justify-content:space-between;
    border-bottom:1px solid var(--line);
    font-size:12px;
    color:var(--muted);
}

.status strong {
    color:#24814b;
}

.hero-card-body {
    padding:26px;
}

.hero-card-body h2 {
    font-size:27px;
    margin:7px 0 4px;
}

.hero-card-body p {
    margin:0;
    color:var(--muted);
}

.integration-status {
    margin-top:20px;
    background:var(--soft);
    border-radius:10px;
    padding:11px;
    font-size:12px;
    color:#656c77;
}

.section {
    padding:80px 0;
}

.grey {
    background:var(--soft);
}

.section-head {
    margin-bottom:31px;
}

.section-head h2 {
    font-size:38px;
    letter-spacing:-.035em;
    margin:7px 0;
}

.section-head p {
    margin:0;
    color:var(--muted);
}

.shop-layout {
    display:grid;
    grid-template-columns:minmax(0,1fr) 335px;
    gap:24px;
    align-items:start;
}

.shop-box {
    padding:25px;
}

.step-title {
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:800;
    margin-bottom:16px;
}

.step-title b {
    width:27px;
    height:27px;
    display:grid;
    place-items:center;
    border-radius:8px;
    background:var(--red-soft);
    color:var(--red);
    font-size:12px;
}

.providers {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:11px;
}

.provider {
    min-height:110px;
    text-align:left;
    background:#fff;
    border:1px solid var(--line);
    border-radius:13px;
    padding:14px;
}

.provider:hover {
    border-color:#c4c7cc;
}

.provider.active {
    border-color:var(--red);
    box-shadow:0 0 0 2px rgba(198,40,40,.08);
    background:#fffafa;
}

.provider>span {
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    border-radius:9px;
    background:#f0f1f3;
    margin-bottom:10px;
    font-weight:800;
}

.provider strong,
.provider small {
    display:block;
}

.provider strong {
    font-size:14px;
}

.provider small {
    color:var(--muted);
    font-size:10px;
}

.form-section {
    border-top:1px solid var(--line);
    margin-top:28px;
    padding-top:26px;
}

.form-section label {
    display:block;
    font-size:13px;
    font-weight:700;
    margin-bottom:7px;
}

.form-section input {
    width:100%;
    height:52px;
    border:1px solid #d6d9de;
    border-radius:11px;
    padding:0 14px;
    outline:none;
}

.form-section input:focus {
    border-color:var(--red);
    box-shadow:0 0 0 3px rgba(198,40,40,.08);
}

.help {
    color:var(--muted);
    font-size:11px;
    margin-top:7px;
}

.help.error {
    color:var(--red);
}

.nominals {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
}

.nominal {
    text-align:left;
    background:#fff;
    border:1px solid var(--line);
    border-radius:11px;
    padding:13px;
}

.nominal.active {
    border-color:var(--red);
    background:#fffafa;
    box-shadow:0 0 0 2px rgba(198,40,40,.08);
}

.nominal strong,
.nominal small {
    display:block;
}

.nominal strong {
    font-size:13px;
}

.nominal small {
    color:var(--muted);
    margin-top:4px;
    font-size:10px;
}

.summary {
    position:sticky;
    top:98px;
    padding:23px;
}

.summary h3 {
    margin-top:0;
}

.summary-line {
    display:flex;
    justify-content:space-between;
    gap:15px;
    padding:8px 0;
    font-size:12px;
}

.summary-line span {
    color:var(--muted);
}

.summary-line strong {
    text-align:right;
}

.summary hr {
    border:0;
    border-top:1px solid var(--line);
}

.total {
    display:flex;
    justify-content:space-between;
    align-items:end;
    margin:16px 0;
}

.total strong {
    font-size:24px;
}

.summary-note {
    font-size:10px;
    color:var(--muted);
    margin-bottom:0;
}

.steps,
.coming {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:15px;
}

.steps article,
.coming article {
    background:#fff;
    border:1px solid var(--line);
    border-radius:15px;
    padding:22px;
}

.steps b {
    color:var(--red);
    font-size:12px;
}

.steps h3,
.coming h3 {
    margin:17px 0 5px;
}

.steps p,
.coming p {
    font-size:13px;
    color:var(--muted);
    margin:0;
}

.coming article>div {
    width:40px;
    height:40px;
    background:var(--soft);
    border-radius:10px;
    display:grid;
    place-items:center;
    font-size:10px;
    font-weight:800;
}

.coming article>span {
    display:inline-block;
    margin-top:17px;
    padding:5px 9px;
    border-radius:100px;
    background:var(--red-soft);
    color:var(--red);
    font-size:10px;
    font-weight:700;
}

.faq {
    width:min(820px,calc(100% - 40px));
}

details {
    background:#fff;
    border:1px solid var(--line);
    border-radius:12px;
    padding:0 17px;
    margin-bottom:9px;
}

summary {
    cursor:pointer;
    padding:16px 0;
    font-weight:700;
}

details p {
    margin:0 0 17px;
    color:var(--muted);
    font-size:13px;
}

footer {
    border-top:1px solid var(--line);
    padding:45px 0 22px;
}

.footer-grid {
    display:grid;
    grid-template-columns:1.3fr .7fr .7fr;
    gap:45px;
}

.footer-grid>div {
    display:flex;
    flex-direction:column;
    gap:9px;
    color:var(--muted);
    font-size:12px;
}

.footer-grid>div>strong {
    color:var(--text);
}

.footer-grid p {
    max-width:430px;
}

.copyright {
    border-top:1px solid var(--line);
    margin-top:30px;
    padding-top:18px;
    color:var(--muted);
    font-size:11px;
}

.modal-bg {
    position:fixed;
    inset:0;
    z-index:100;
    padding:20px;
    background:rgba(10,12,16,.55);
    display:none;
    align-items:center;
    justify-content:center;
}

.modal-bg.open {
    display:flex;
}

.modal {
    position:relative;
    width:min(520px,100%);
    border-radius:19px;
    background:#fff;
    padding:27px;
    box-shadow:0 25px 80px rgba(0,0,0,.26);
}

.close {
    border:0;
    background:none;
    position:absolute;
    right:14px;
    top:12px;
    font-size:27px;
    color:#777;
}

.modal h2 {
    margin:7px 0 20px;
}

.modal-order {
    border:1px solid var(--line);
    border-radius:12px;
    padding:10px 14px;
}

.modal-order div {
    display:flex;
    justify-content:space-between;
    gap:15px;
    padding:8px 0;
    font-size:12px;
}

.modal-order span {
    color:var(--muted);
}

.warning {
    background:#fff8e5;
    border:1px solid #f0deb3;
    border-radius:10px;
    padding:11px;
    margin-top:13px;
    color:#66562d;
    font-size:11px;
}

.modal-buttons {
    display:grid;
    grid-template-columns:1fr 1.5fr;
    gap:9px;
    margin-top:17px;
}

.payment-modal {
    text-align:center;
    width:min(450px,100%);
}

.payment-modal p {
    color:var(--muted);
    font-size:13px;
}

.info-icon {
    margin:0 auto 12px;
    width:47px;
    height:47px;
    border-radius:100%;
    display:grid;
    place-items:center;
    background:var(--red-soft);
    color:var(--red);
    font-weight:900;
}

.payment-info {
    background:var(--soft);
    border-radius:10px;
    padding:11px;
    margin:16px 0;
    color:#666d76;
    font-size:11px;
}

@media(max-width:900px) {
    .nav nav {
        display:none;
    }

    .hero-grid,
    .shop-layout,
    .footer-grid {
        grid-template-columns:1fr;
    }

    .summary {
        position:static;
    }

    .providers,
    .nominals,
    .coming {
        grid-template-columns:repeat(2,1fr);
    }

    .steps {
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:560px) {
    .container,
    .faq {
        width:calc(100% - 28px);
    }

    .hero {
        padding:55px 0;
    }

    .hero h1 {
        font-size:42px;
    }

    .hero-buttons {
        flex-direction:column;
    }

    .section {
        padding:60px 0;
    }

    .section-head h2 {
        font-size:31px;
    }

    .shop-box {
        padding:17px;
    }

    .providers,
    .nominals {
        grid-template-columns:repeat(2,1fr);
    }

    .steps,
    .coming {
        grid-template-columns:1fr;
    }

    .modal-buttons {
        grid-template-columns:1fr;
    }
}


/* ==========================================================
   TM6_VISUAL_POLISH
   ========================================================== */

body {
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

::selection {
    background:#c62828;
    color:#fff;
}

.header {
    box-shadow:0 1px 0 rgba(0,0,0,.02);
}

.logo-box {
    box-shadow:
        0 8px 20px rgba(198,40,40,.18),
        inset 0 1px 0 rgba(255,255,255,.18);
}

.nav nav a {
    position:relative;
    transition:color .18s ease;
}

.nav nav a::after {
    content:"";
    position:absolute;
    left:0;
    bottom:-8px;
    height:2px;
    width:0;
    background:var(--red);
    border-radius:20px;
    transition:width .18s ease;
}

.nav nav a:hover::after {
    width:100%;
}

.hero {
    position:relative;
    overflow:hidden;
}

.hero::before {
    content:"";
    position:absolute;
    width:480px;
    height:480px;
    border-radius:50%;
    background:rgba(198,40,40,.055);
    right:-180px;
    top:-200px;
    filter:blur(3px);
    pointer-events:none;
}

.hero::after {
    content:"";
    position:absolute;
    width:320px;
    height:320px;
    border-radius:50%;
    background:rgba(198,40,40,.035);
    left:-160px;
    bottom:-180px;
    pointer-events:none;
}

.hero-grid {
    position:relative;
    z-index:1;
}

.badge {
    display:inline-flex;
    align-items:center;
    padding:7px 11px;
    background:#fff3f3;
    border:1px solid #f3dcdc;
    border-radius:100px;
}

.hero h1 {
    color:#14161a;
}

.hero-card {
    transform:translateZ(0);
    transition:
        transform .22s ease,
        box-shadow .22s ease;
}

.hero-card:hover {
    transform:translateY(-3px);
    box-shadow:0 24px 65px rgba(0,0,0,.09);
}

.integration-status {
    border:1px solid #eceef1;
}

.btn {
    transition:
        transform .15s ease,
        background .15s ease,
        border-color .15s ease,
        box-shadow .15s ease;
}

.btn:not(:disabled):active {
    transform:translateY(1px);
}

.primary:not(:disabled) {
    box-shadow:0 8px 20px rgba(198,40,40,.15);
}

.primary:not(:disabled):hover {
    box-shadow:0 10px 25px rgba(198,40,40,.22);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
summary:focus-visible {
    outline:3px solid rgba(198,40,40,.22);
    outline-offset:3px;
}

.shop-box {
    box-shadow:0 8px 32px rgba(20,25,35,.035);
}

.provider {
    position:relative;
    overflow:hidden;
    transition:
        transform .16s ease,
        border-color .16s ease,
        box-shadow .16s ease,
        background .16s ease;
}

.provider:hover {
    transform:translateY(-2px);
    box-shadow:0 8px 22px rgba(20,25,35,.055);
}

.provider.active::after {
    content:"✓";
    position:absolute;
    top:10px;
    right:10px;
    width:20px;
    height:20px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:var(--red);
    color:#fff;
    font-size:10px;
    font-weight:800;
}

.provider>span {
    transition:
        background .16s ease,
        color .16s ease;
}

.provider.active>span {
    background:var(--red);
    color:#fff;
}

.nominal {
    transition:
        transform .15s ease,
        border-color .15s ease,
        box-shadow .15s ease;
}

.nominal:hover {
    transform:translateY(-1px);
    border-color:#c7cbd1;
}

.nominal.active {
    position:relative;
}

.summary {
    box-shadow:0 14px 40px rgba(20,25,35,.06);
}

.summary h3 {
    font-size:18px;
    letter-spacing:-.01em;
}

.total {
    padding-top:3px;
}

.total strong {
    color:var(--red);
}

.steps article,
.coming article {
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease;
}

.steps article:hover,
.coming article:hover {
    transform:translateY(-3px);
    box-shadow:0 12px 30px rgba(20,25,35,.055);
    border-color:#d9dce1;
}

details {
    transition:border-color .16s ease;
}

details[open] {
    border-color:#d7dade;
}

summary {
    position:relative;
    padding-right:26px;
    list-style:none;
}

summary::-webkit-details-marker {
    display:none;
}

summary::after {
    content:"+";
    position:absolute;
    right:0;
    top:50%;
    transform:translateY(-50%);
    font-size:20px;
    color:var(--muted);
}

details[open] summary::after {
    content:"−";
}

.modal-bg.open .modal {
    animation:tmModalIn .18s ease-out both;
}

@keyframes tmModalIn {
    from {
        opacity:0;
        transform:translateY(10px) scale(.985);
    }

    to {
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

.payment-modal h2 {
    letter-spacing:-.025em;
}

.payment-info {
    border:1px solid #eceef1;
}

.footer-grid a:hover {
    color:var(--red);
}

@media(max-width:900px) {

    .hero-grid {
        gap:35px;
    }

    .hero-card {
        max-width:620px;
    }

    .shop-layout {
        gap:18px;
    }
}

@media(max-width:560px) {

    .header {
        position:relative;
    }

    .nav {
        height:66px;
    }

    .logo-box {
        width:38px;
        height:38px;
        border-radius:11px;
    }

    .hero {
        padding-top:48px;
    }

    .hero h1 {
        margin-top:17px;
        line-height:1.04;
    }

    .hero-text {
        font-size:16px;
    }

    .features {
        gap:9px 13px;
    }

    .provider {
        min-height:105px;
        padding:12px;
    }

    .summary {
        border-radius:16px;
    }

    .nominal {
        min-height:66px;
    }

    .modal {
        padding:23px 19px;
        border-radius:17px;
    }

    .payment-modal {
        text-align:left;
    }

    .payment-modal .info-icon {
        margin-left:0;
    }
}


/* ==========================================================
   TM6B_SIMPLIFY_LAYOUT
   ========================================================== */

.provider {
    min-height: 84px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 18px 16px;
}

.provider strong {
    font-size: 16px;
    line-height: 1.2;
}

.provider > span,
.provider small {
    display: none !important;
}

@media(max-width:900px) {
    .providers {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media(max-width:560px) {
    .providers {
        grid-template-columns: repeat(2, 1fr);
    }

    .provider {
        min-height: 76px;
        padding: 16px 14px;
    }

    .provider strong {
        font-size: 15px;
    }
}