/* ============================== 
   GLOBAL 
============================== */ 
 
/* ==============================
   DTPAY THEME VARIABLES
============================== */

:root{
    /* Primary DTPay Brand */
    --primary:#a5005b;
    --primary-dark:#850047;
    --primary-light:#fff0f7;

    /* Blue */
    --secondary:#1687c9;
    --blue:#0877b5;
    --blue-light:#eef8fc;

    /* Logo Accent Colors */
    --green:#35a853;
    --green-light:#eef9f1;

    --yellow:#f5b800;
    --orange:#f28c18;
    --pink:#a5005b;

    /* Text */
    --dark:#29283a;
    --text:#5d6678;
    --muted:#7a7f8c;

    /* Background */
    --light:#fffafd;
    --white:#ffffff;

    /* Borders */
    --border:#eee7ec;
    --border-light:#f3edf1;

    /* DTPay Gradients */
    --gradient-primary:
        linear-gradient(
            135deg,
            #a5005b,
            #c0006f
        );

    --gradient-brand:
        linear-gradient(
            90deg,
            #a5005b,
            #1687c9,
            #35a853
        );

    --gradient-blue:
        linear-gradient(
            90deg,
            #1687c9,
            #0877b5
        );

    --gradient-soft:
        linear-gradient(
            135deg,
            #fff0f7,
            #eef8fc
        );

    /* Shadows */
    --shadow-soft:
        0 8px 28px rgba(55,35,55,.05);

    --shadow-primary:
        0 8px 20px rgba(165,0,91,.18);

    --shadow-blue:
        0 8px 20px rgba(22,135,201,.18);

    /* Radius */
    --radius-card:23px;
    --radius-button:15px;
    --radius-small:10px;
}
 
*{ 
    box-sizing:border-box; 
} 
 
html{ 
    scroll-behavior:smooth; 
    scroll-padding-top:85px; 
} 
 
body{ 
    margin:0; 
    font-family:"Poppins",Arial,Helvetica,sans-serif; 
    background: 
        radial-gradient( 
            circle at 10% 10%, 
            rgba(165,0,91,.05), 
            transparent 25% 
        ), 
        radial-gradient( 
            circle at 90% 30%, 
            rgba(22,135,201,.05), 
            transparent 25% 
        ), 
        #f8f8fb; 
 
    color:var(--dark); 
    line-height:1.75; 
} 
 
a{ 
    text-decoration:none; 
    color:inherit; 
} 
 
img{ 
    max-width:100%; 
    height:auto; 
    display:block; 
} 
 
button{ 
    font-family:inherit; 
} 
 
 
/* ============================== 
   MAIN WEBSITE 
============================== */ 
 
.site-wrapper{ 
    width:100%; 
    max-width:760px; 
    min-height:100vh; 
    margin:0 auto; 
    background:var(--white); 
    box-shadow: 
        0 0 50px rgba(45,35,65,.06); 
} 
 
 
/* ============================== 
   HEADER 
============================== */ 
 
.header{ 
    position:sticky; 
    top:0; 
    z-index:9999; 
    height:78px; 
 
    background: 
        rgba(255,255,255,.94); 
 
    backdrop-filter:blur(14px); 
    -webkit-backdrop-filter:blur(14px); 
 
    border-bottom: 
        1px solid rgba(165,0,91,.10); 
} 
 
.header-inner{ 
    width:100%; 
    height:100%; 
 
    display:flex; 
    align-items:center; 
    justify-content:space-between; 
 
    padding:0 22px; 
} 
 
 
/* ============================== 
   BRAND 
============================== */ 
 
.brand{ 
    display:flex; 
    align-items:center; 
    gap:11px; 
} 
 
.brand-logo{ 
    width:72px; 
    height:52px; 
 
    padding:2px; 
 
    display:flex; 
    align-items:center; 
    justify-content:center; 
 
    border-radius:10px; 
 
    overflow:hidden; 
 
    background:#ffffff; 
 
    box-shadow: 
        0 6px 18px rgba(45,35,65,.10); 
} 
 
.brand-logo img{ 
    width:100%; 
    height:100%; 
    object-fit:contain; 
 
    border-radius:8px; 
} 
 
.brand-name{ 
    font-size:21px; 
    font-weight:700; 
 
    letter-spacing:-.4px; 
 
    color:#a5005b; 
} 
 
 
/* ============================== 
   MENU BUTTON 
============================== */ 
 
.menu-button{ 
    width:44px; 
    height:44px; 
 
    border:0; 
    border-radius:13px; 
 
    background: 
        linear-gradient( 
            135deg, 
            #fff5fa, 
            #f2f9fd 
        ); 
 
    cursor:pointer; 
 
    display:flex; 
    flex-direction:column; 
    justify-content:center; 
    align-items:center; 
 
    gap:5px; 
 
    transition:.25s ease; 
} 
 
.menu-button:hover{ 
    transform:translateY(-1px); 
 
    box-shadow: 
        0 6px 16px rgba(90,45,80,.12); 
} 
 
.menu-button span{ 
    display:block; 
 
    width:23px; 
    height:3px; 
 
    border-radius:20px; 
 
    background: 
        linear-gradient( 
            90deg, 
            #a5005b, 
            #1687c9 
        ); 
 
    transition:.3s ease; 
} 
 
.menu-button.active span:nth-child(1){ 
    transform: 
        translateY(8px) 
        rotate(45deg); 
} 
 
.menu-button.active span:nth-child(2){ 
    opacity:0; 
} 
 
.menu-button.active span:nth-child(3){ 
    transform: 
        translateY(-8px) 
        rotate(-45deg); 
} 
 
 
/* ============================== 
   DROPDOWN MENU 
============================== */ 
 
.menu{ 
    position:absolute; 
 
    top:70px; 
    right:14px; 
 
    width:235px; 
 
    padding:6px; 
 
    background: 
        rgba(255,255,255,.98); 
 
    border: 
        1px solid rgba(165,0,91,.10); 
 
    border-radius:18px; 
 
    box-shadow: 
        0 18px 45px rgba(45,35,65,.16); 
 
    overflow:hidden; 
 
    opacity:0; 
    visibility:hidden; 
 
    transform: 
        translateY(-12px) 
        scale(.98); 
 
    transform-origin: 
        top right; 
 
    pointer-events:none; 
 
    transition: 
        opacity .25s ease, 
        visibility .25s ease, 
        transform .25s ease; 
} 
 
.menu.show{ 
    opacity:1; 
    visibility:visible; 
 
    transform: 
        translateY(0) 
        scale(1); 
 
    pointer-events:auto; 
} 
 
.menu a{ 
    display:block; 
 
    padding:12px 15px; 
 
    margin:2px 0; 
 
    border-radius:11px; 
 
    font-size:15px; 
    font-weight:500; 
 
    color:#303044; 
 
    transition:.2s ease; 
} 
 
.menu a:hover{ 
    background: 
        linear-gradient( 
            90deg, 
            rgba(165,0,91,.10), 
            rgba(22,135,201,.08) 
        ); 
 
    color:#a5005b; 
 
    transform: 
        translateX(3px); 
} 
 
 
/* ============================== 
   HERO 
============================== */ 
 
.hero{ 
    position:relative; 
 
    overflow:hidden; 
 
    text-align:center; 
 
    padding:46px 24px 42px; 
 
    background: 
 
        radial-gradient( 
            circle at 12% 20%, 
            rgba(165,0,91,.13), 
            transparent 28% 
        ), 
 
        radial-gradient( 
            circle at 88% 18%, 
            rgba(22,135,201,.13), 
            transparent 28% 
        ), 
 
        radial-gradient( 
            circle at 50% 100%, 
            rgba(243,154,0,.12), 
            transparent 35% 
        ), 
 
        linear-gradient( 
            180deg, 
            #ffffff, 
            #fcfcfe 
        ); 
 
    border-bottom: 
        1px solid #e8e8ee; 
} 
 
.hero:before, 
.hero:after{ 
    content:""; 
 
    position:absolute; 
 
    width:220px; 
    height:220px; 
 
    border-radius:50%; 
 
    pointer-events:none; 
} 
 
.hero:before{ 
    left:-145px; 
    bottom:-125px; 
 
    border: 
        35px solid rgba(165,0,91,.06); 
} 
 
.hero:after{ 
    right:-150px; 
    top:120px; 
 
    border: 
        35px solid rgba(22,135,201,.06); 
} 
 
 
/* ============================== 
   HERO LOGO 
============================== */ 
 
.hero-logo{ 
    position:relative; 
    z-index:2; 
 
    width:330px; 
    height:115px; 
 
    margin: 
        0 auto 22px; 
 
    padding:5px; 
 
    border-radius:18px; 
 
    background:#ffffff; 
 
    box-shadow: 
        0 15px 35px rgba(60,35,65,.12), 
        0 0 0 9px rgba(165,0,91,.04); 
 
    overflow:hidden; 
} 
 
.hero-logo img{ 
    width:100%; 
    height:100%; 
 
    object-fit:contain; 
 
    border-radius:13px; 
 
    background:#ffffff; 
} 
 
 
/* ============================== 
   HERO TEXT 
============================== */ 
 
.hero h1{ 
    position:relative; 
    z-index:2; 
 
    margin: 
        0 0 12px; 
 
    color:var(--dark); 
 
    font-size:34px; 
    font-weight:700; 
 
    line-height:1.25; 
 
    letter-spacing:-.8px; 
} 
 
.hero p{ 
    position:relative; 
    z-index:2; 
 
    max-width:540px; 
 
    margin: 
        0 auto 28px; 
 
    color:#5d6678; 
 
    font-size:15.5px; 
} 
 
 
/* ============================== 
   BUTTONS 
============================== */ 
 
.hero-buttons{ 
    position:relative; 
    z-index:3; 
 
    max-width:540px; 
 
    margin:0 auto; 
 
    display:grid; 
 
    grid-template-columns: 
        1fr 1fr; 
 
    gap:11px; 
} 
 
.btn{ 
    min-height:53px; 
 
    padding: 
        10px 15px; 
 
    border-radius:15px; 
 
    display:flex; 
    align-items:center; 
    justify-content:center; 
 
    text-align:center; 
 
    font-weight:600; 
 
    font-size:15px; 
 
    transition: 
        transform .2s ease, 
        box-shadow .2s ease, 
        opacity .2s ease; 
 
    border: 
        1px solid transparent; 
} 
 
.btn:hover{ 
    transform: 
        translateY(-2px); 
} 
 
.btn:active{ 
    transform: 
        translateY(0); 
} 
 
 
/* LOGIN */ 
 
.btn-primary{ 
    color:#ffffff; 
 
    background: 
        linear-gradient( 
            135deg, 
            #a5005b, 
            #c00070 
        ); 
 
    box-shadow: 
        0 7px 18px rgba(165,0,91,.22); 
}

/* REGISTER */ 
 
.btn-outline{ 
    color:#a5005b; 
 
    background:#ffffff; 
 
    border-color: 
        rgba(165,0,91,.25); 
} 
 
.btn-outline:hover{ 
    background:#fff7fb; 
 
    border-color: 
        rgba(165,0,91,.45); 
} 
 
 
/* DOWNLOAD */ 
 
.btn-download{ 
    grid-column:1 / -1; 
 
    color:#ffffff; 
 
    background: 
        linear-gradient( 
            90deg, 
            #1687c9, 
            #0877b5 
        ); 
 
    box-shadow: 
        0 7px 18px rgba(22,135,201,.18); 
} 
 
 
/* TELEGRAM */ 
 
.btn-telegram{ 
    grid-column:1 / -1; 
 
    color:#ffffff; 
 
    background: 
        linear-gradient( 
            90deg, 
            #1687c9, 
            #0099c7 
        ); 
 
    box-shadow: 
        0 7px 18px rgba(0,145,205,.18); 
} 
 
 
/* ============================== 
   CONTENT 
============================== */ 
 
.content{ 
    padding: 
        18px 18px 100px; 
 
    background: 
        linear-gradient( 
            180deg, 
            #fffafd, 
            #ffffff 18% 
        ); 
} 
 
 
/* ============================== 
   CARD 
============================== */ 
 
.card{ 
    position:relative; 
 
    margin: 
        0 0 17px; 
 
    padding: 
        25px 22px; 
 
    background:#ffffff; 
 
    border: 
        1px solid #eee5eb; 
 
    border-radius:23px; 
 
    box-shadow: 
        0 8px 28px rgba(55,35,55,.035); 
} 
 
.card h2{ 
    position:relative; 
 
    margin: 
        0 0 18px; 
 
    padding-bottom:11px; 
 
    color:#252334; 
 
    font-size:22px; 
 
    line-height:1.4; 
} 
 
.card h2:after{ 
    content:""; 
 
    position:absolute; 
 
    left:0; 
    bottom:0; 
 
    width:70px; 
    height:3px; 
 
    border-radius:20px; 
 
    background: 
        linear-gradient( 
            90deg, 
            #a5005b, 
            #1687c9, 
            #35a853 
        ); 
} 
 
.card h3{ 
    margin: 
        23px 0 9px; 
 
    color:#303044; 
 
    font-size:17px; 
 
    line-height:1.5; 
} 
 
.card p{ 
    margin: 
        0 0 14px; 
 
    color:#5d6678; 
 
    font-size:15px; 
} 
 
.card strong{ 
    color:#713454; 
    font-weight:600; 
} 
 
.card ul, 
.card ol{ 
    margin: 
        10px 0 16px; 
 
    padding-left:23px; 
 
    color:#5d6678; 
} 
 
.card li{ 
    margin-bottom:8px; 
} 
 
 
/* ============================== 
   TABLE OF CONTENTS 
============================== */ 
 
.toc{ 
    list-style:none !important; 
 
    margin:0 !important; 
 
    padding:0 !important; 
} 
 
.toc li{ 
    display:flex; 
    align-items:center; 
 
    gap:13px; 
 
    margin:0; 
 
    padding:12px 0; 
 
    border-bottom: 
        1px solid #eee8ed; 
} 
 
.toc li:last-child{ 
    border-bottom:0; 
} 
 
.toc-number{ 
    flex: 
        0 0 31px; 
 
    width:31px; 
    height:31px; 
 
    display:flex; 
    align-items:center; 
    justify-content:center; 
 
    border-radius:50%; 
 
    background: 
        linear-gradient( 
            135deg, 
            #fff0f7, 
            #edf8fc 
        ); 
 
    color:#a5005b; 
 
    font-size:13px; 
    font-weight:700; 
} 
 
.toc a{ 
    color:#30384d; 
 
    font-size:15px; 
    font-weight:500; 
 
    transition:.2s ease; 
} 
 
.toc a:hover{ 
    color:#a5005b; 
} 
 
 
/* ============================== 
   TAGS 
============================== */ 
 
.tags{ 
    display:flex; 
 
    flex-wrap:wrap; 
 
    gap:8px; 
} 
 
.tag{ 
    display:inline-block; 
 
    padding: 
        6px 13px; 
 
    border-radius:30px; 
 
    background: 
        linear-gradient( 
            135deg, 
            #fff1f7, 
            #eef8fc 
        ); 
 
    border: 
        1px solid rgba(165,0,91,.09); 
 
    color:#8f1859; 
 
    font-size:13px; 
 
    font-weight:500; 
} 
 
 
/* ============================== 
   TABLE 
============================== */ 
 
.table-wrap{ 
    width:100%; 
 
    overflow-x:auto; 
 
    border: 
        1px solid #e9e5ea; 
 
    border-radius:14px; 
} 
 
table{ 
    width:100%; 
 
    min-width:420px; 
 
    border-collapse:collapse; 
 
    font-size:14px; 
} 
 
th{ 
    background: 
        linear-gradient( 
            90deg, 
            #a5005b, 
            #1687c9 
        ); 
 
    color:#ffffff; 
 
    text-align:left; 
 
    padding: 
        12px 14px; 
 
    font-weight:600; 
} 
 
td{ 
    padding: 
        11px 14px; 
 
    color:#5d6678; 
 
    border-bottom: 
        1px solid #eee9ed; 
} 
 
tr:nth-child(even) td{ 
    background:#fffafd; 
} 
 
 
/* ============================== 
   APP IMAGE 
============================== */ 
 
.app-image{ 
    width:100%; 
 
    max-height:390px; 
 
    object-fit:contain; 
 
    margin: 
        22px auto; 
 
    padding:5px; 
 
    background:#ffffff; 
 
    border: 
        1px solid #eee5eb; 
 
    border-radius:18px; 
 
    box-shadow: 
        0 10px 28px rgba(55,35,55,.08); 
} 
 
 
/* ============================== 
   RESPONSIVE 
============================== */ 
 
@media (max-width:600px){ 
 
    .site-wrapper{ 
        max-width:100%; 
    } 
 
    .header-inner{ 
        padding: 
            0 16px; 
    } 
 
    .hero{ 
        padding: 
            38px 18px 36px; 
    } 
 
    .hero-logo{ 
        width:300px; 
        height:105px; 
    } 
 
    .hero h1{ 
        font-size:29px; 
    } 
 
    .hero p{ 
        font-size:14.5px; 
    } 
 
    .content{ 
        padding: 
            14px 13px 80px; 
    } 
 
    .card{ 
        padding: 
            22px 17px; 
 
        border-radius:19px; 
    } 
 
    .card h2{ 
        font-size:20px; 
    } 
 
    .hero-buttons{ 
        gap:9px; 
    } 
 
    .btn{ 
        min-height:50px; 
        font-size:14px; 
    } 
 
} 
 
@media (max-width:380px){ 
 
    .brand-name{ 
        font-size:18px; 
    } 
 
    .brand-logo{ 
        width:61px; 
        height:45px; 
    } 
 
    .hero-logo{ 
        width:96vw; 
        height:100px; 
    } 
 
    .hero-buttons{ 
        grid-template-columns:1fr; 
    } 
 
    .btn-primary, 
    .btn-outline, 
    .btn-download, 
    .btn-telegram{ 
        grid-column:1 / -1; 
    } 
 
} 
 
 
/* ============================== 
   REFER CODE 
============================== */ 
 
.refer-box{ 
    margin:20px 0; 
    padding:20px; 
    border-radius:18px; 
 
    background: 
        linear-gradient( 
            135deg, 
            rgba(165,0,91,.08), 
            rgba(22,135,201,.07) 
        ); 
 
    border: 
        1px solid rgba(165,0,91,.13); 
 
    text-align:center; 
 
    box-shadow: 
        0 8px 22px rgba(55,45,70,.04); 
} 
 
.refer-label{ 
    display:block; 
 
    margin-bottom:10px; 
 
    color:#626b7c; 
 
    font-size:13px; 
    font-weight:500; 
} 
 
.refer-code{ 
    display:inline-flex; 
    align-items:center; 
    justify-content:center; 
 
    flex-wrap:wrap; 
 
    gap:10px; 
 
    font-size:22px; 
    font-weight:700; 
 
    letter-spacing:1px; 
 
    color:#a5005b; 
} 
 
.copy-btn{ 
    border:0; 
 
    padding:8px 13px; 
 
    border-radius:10px; 
 
    background: 
        linear-gradient( 
            135deg, 
            #a5005b, 
            #1687c9 
        ); 
 
    color:#ffffff; 
 
    cursor:pointer; 
 
    font-size:12px; 
    font-weight:600; 
 
    transition: 
        transform .2s ease, 
        box-shadow .2s ease; 
} 
 
.copy-btn:hover{ 
    transform:translateY(-1px); 
 
    box-shadow: 
        0 6px 14px rgba(130,35,95,.22); 
} 
 
.copy-btn:active{ 
    transform:translateY(0); 
}


/* ============================== 
   INFO BOX 
============================== */ 
 
.info-box{ 
    margin:19px 0; 
 
    padding:15px 17px; 
 
    border-left: 
        4px solid #1687c9; 
 
    background: 
        linear-gradient( 
            90deg, 
            rgba(165,0,91,.07), 
            rgba(22,135,201,.035) 
        ); 
 
    border-radius: 
        0 14px 14px 0; 
 
    color:#5d6678; 
 
    font-size:14px; 
 
    line-height:1.7; 
} 
 
 
/* ============================== 
   PROS CONS 
============================== */ 
 
.pros li::marker{ 
    color:#35a853; 
} 
 
.cons li::marker{ 
    color:#e85d6c; 
} 
 
.pros li, 
.cons li{ 
    padding-left:3px; 
} 
 
 
/* ============================== 
   FAQ 
============================== */ 
 
.faq-item{ 
    padding:16px 0; 
 
    border-bottom: 
        1px solid #eee7ec; 
} 
 
.faq-item:last-child{ 
    border-bottom:0; 
} 
 
.faq-question{ 
    margin:0 0 7px; 
 
    color:#29283a; 
 
    font-size:16px; 
    font-weight:600; 
 
    line-height:1.55; 
} 
 
.faq-answer{ 
    margin:0; 
 
    color:#5d6678; 
 
    font-size:14.5px; 
 
    line-height:1.75; 
} 
 
 
/* ============================== 
   FOOTER 
============================== */ 
 
.footer{ 
    position:fixed; 
 
    z-index:999; 
 
    left:0; 
    right:0; 
    bottom:0; 
 
    height:52px; 
 
    padding: 
        0 15px; 
 
    background: 
        rgba(255,255,255,.97); 
 
    backdrop-filter:blur(12px); 
    -webkit-backdrop-filter:blur(12px); 
 
    border-top: 
        1px solid #eee7ec; 
 
    box-shadow: 
        0 -5px 20px rgba(55,35,55,.04); 
 
    display:flex; 
    align-items:center; 
    justify-content:center; 
 
    text-align:center; 
 
    font-size:12.5px; 
 
    color:#7a7f8c; 
} 
 
.footer strong{ 
    margin:0 3px; 
 
    background: 
        linear-gradient( 
            90deg, 
            #a5005b, 
            #1687c9, 
            #35a853 
        ); 
 
    -webkit-background-clip:text; 
    background-clip:text; 
 
    -webkit-text-fill-color:transparent; 
 
    font-weight:700; 
} 
 
 
/* ============================== 
   ACCESSIBILITY 
============================== */ 
 
a:focus-visible, 
button:focus-visible{ 
    outline: 
        3px solid rgba(165,0,91,.25); 
 
    outline-offset:3px; 
} 
 
.copy-btn{ 
    -webkit-tap-highlight-color:transparent; 
} 
 
.menu-button{ 
    -webkit-tap-highlight-color:transparent; 
} 
 
 
/* ============================== 
   MOBILE 
============================== */ 
 
@media(max-width:520px){ 
 
    .site-wrapper{ 
        box-shadow:none; 
    } 
 
    .header-inner{ 
        padding:0 16px; 
    } 
 
    .hero{ 
        padding:38px 20px 36px; 
    } 
 
    .hero h1{ 
        font-size:28px; 
    } 
 
    .hero p{ 
        font-size:14.5px; 
    } 
 
    .content{ 
        padding-left:13px; 
        padding-right:13px; 
 
        padding-bottom:85px; 
    } 
 
    .card{ 
        padding:21px 17px; 
 
        border-radius:20px; 
    } 
 
    .card h2{ 
        font-size:20px; 
    } 
 
    .refer-box{ 
        padding:17px 13px; 
    } 
 
    .refer-code{ 
        font-size:19px; 
    } 
 
    .info-box{ 
        padding:14px 15px; 
        font-size:13.5px; 
    } 
 
    .faq-question{ 
        font-size:15.5px; 
    } 
 
    .faq-answer{ 
        font-size:14px; 
    } 
 
    .footer{ 
        height:auto; 
 
        min-height:50px; 
 
        padding: 
            10px 14px; 
 
        font-size:11.5px; 
    } 
 
} 
 
 
/* ============================== 
   SMALL MOBILE 
============================== */ 
 
@media(max-width:380px){ 
 
    .refer-code{ 
        width:100%; 
 
        flex-direction:column; 
 
        font-size:18px; 
    } 
 
    .copy-btn{ 
        width:100%; 
    } 
 
    .card{ 
        padding: 
            19px 15px; 
    } 
 
} 
 
 
/* ============================== 
   TABLET / DESKTOP 
============================== */ 
 
@media(min-width:521px){ 
 
    body{ 
        background: 
            radial-gradient( 
                circle at 10% 10%, 
                rgba(165,0,91,.04), 
                transparent 25% 
            ), 
            radial-gradient( 
                circle at 90% 30%, 
                rgba(22,135,201,.05), 
                transparent 25% 
            ), 
            #f8f9fc; 
    } 
 
    .site-wrapper{ 
        min-height:100vh; 
    } 
 
} 
 
/* ========================================= 
   PREMIUM RELATED PLATFORMS 
========================================= */ 
 
.related-platforms { 
    padding: 35px 20px; 
    margin-top: 40px; 
    background: #fffafd; 
    border-top: 1px solid #eee7ec; 
} 
 
.related-container { 
    max-width: 1100px; 
    margin: 0 auto; 
} 
 
/* Heading */ 
.related-platforms h2 { 
    text-align: center; 
    margin: 0 0 8px; 
    font-size: 26px; 
    font-weight: 700; 
    color: #29283a; 
} 
 
.related-description { 
    text-align: center; 
    margin: 0 auto 25px; 
    font-size: 14px; 
    color: #707786; 
} 
 
/* GRID */ 
.platform-grid { 
    display: grid !important; 
    grid-template-columns: repeat(4, 1fr) !important; 
    gap: 12px !important; 
    width: 100%; 
} 
 
/* CARD */ 
.platform-card { 
    display: flex !important; 
    align-items: center !important; 
 
    width: 100%; 
    min-height: 58px; 
 
    padding: 9px 12px !important; 
    box-sizing: border-box; 
 
    background: #ffffff; 
    border: 1px solid #eee7ec; 
    border-radius: 9px; 
 
    text-decoration: none !important; 
    color: #29283a !important; 
 
    gap: 10px; 
 
    transition: all 0.2s ease; 
} 
 
/* Hover */ 
.platform-card:hover { 
    transform: translateY(-2px); 
    border-color: #d9b8cb; 
    box-shadow: 0 5px 15px rgba(75,35,65,0.06); 
} 
 
/* LOGO */ 
.platform-card img { 
    width: 34px !important; 
    height: 34px !important; 
 
    min-width: 34px !important; 
    min-height: 34px !important; 
 
    padding: 3px; 
 
    box-sizing: border-box; 
 
    object-fit: contain; 
 
    background: #ffffff; 
    border: 1px solid #eee7ec; 
    border-radius: 7px; 
 
    display: block; 
} 
 
/* NAME */ 
.platform-card span { 
    font-size: 14px !important; 
    font-weight: 600; 
    line-height: 1.2; 
 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
} 
 
 
/* ========================================= 
   TABLET 
========================================= */ 
 
@media (max-width: 900px) { 
 
    .platform-grid { 
        grid-template-columns: repeat(3, 1fr) !important; 
    } 
 
} 
 
 
/* ========================================= 
   MOBILE 
========================================= */ 
 
@media (max-width: 600px) { 
 
    .related-platforms { 
        padding: 30px 12px; 
    } 
 
    .related-platforms h2 { 
        font-size: 23px; 
    } 
 
    .related-description { 
        font-size: 13px; 
        margin-bottom: 20px; 
    } 
 
    .platform-grid { 
        grid-template-columns: repeat(2, 1fr) !important; 
        gap: 10px !important; 
    } 
 
    .platform-card { 
        min-height: 54px; 
        padding: 8px 9px !important; 
        gap: 8px; 
    } 
 
    .platform-card img { 
        width: 30px !important; 
        height: 30px !important; 
 
        min-width: 30px !important; 
        min-height: 30px !important; 
    } 
 
    .platform-card span { 
        font-size: 12px !important; 
    } 
 
} 
 
 
/* ========================================= 
   VERY SMALL SCREEN 
========================================= */ 
 
@media (max-width: 360px) { 
 
    .platform-grid { 
        grid-template-columns: 1fr !important; 
    } 
 
}