/*
====================================================
 TradeSend Main Stylesheet
 Version 1.0

 Design:
 Premium Fintech Infrastructure SaaS

 Colors:
 Black / White / Blue / Red

====================================================
*/


/* ==================================================
   1. DESIGN TOKENS
================================================== */


:root {


    /* Backgrounds */

    --ts-black:
    #05070B;

    --ts-background:
    #080B12;

    --ts-surface:
    #0D1117;

    --ts-card:
    #111827;

    --ts-card-hover:
    #162033;


    /* Brand Colors */

    --ts-red:
    #E31B23;

    --ts-red-dark:
    #B91C1C;

    --ts-blue:
    #2563EB;

    --ts-blue-light:
    #38BDF8;

    --ts-blue-dark:
    #1D4ED8;


    /* Text */

    --ts-white:
    #FFFFFF;

    --ts-text:
    #F8FAFC;

    --ts-muted:
    #94A3B8;

    --ts-gray:
    #64748B;


    /* Borders */

    --ts-border:
    #1E293B;

    --ts-border-light:
    #334155;


    /* Shadows */

    --shadow-small:
    0 10px 25px rgba(0,0,0,.25);

    --shadow-blue:
    0 0 40px rgba(37,99,235,.25);

    --shadow-red:
    0 0 40px rgba(227,27,35,.20);


    /* Radius */

    --radius-small:
    8px;

    --radius-medium:
    16px;

    --radius-large:
    24px;


    /* Layout */

    --container:
    1200px;


}


/* ==================================================
   2. RESET
================================================== */


* {

    margin:0;
    padding:0;
    box-sizing:border-box;

}


html {

    scroll-behavior:smooth;

}


body {

    background:

    radial-gradient(
        circle at top right,
        rgba(37,99,235,.15),
        transparent 35%
    ),

    var(--ts-black);


    color:var(--ts-text);

    font-family:
    "Inter",
    Arial,
    Helvetica,
    sans-serif;


    line-height:1.6;

}


img {

    max-width:100%;
    display:block;

}


a {

    color:inherit;
    text-decoration:none;

}


ul {

    list-style:none;

}


button {

    font-family:inherit;

}


/* ==================================================
   3. TYPOGRAPHY
================================================== */


h1,
h2,
h3,
h4,
h5 {


    color:var(--ts-white);

    line-height:1.15;

    font-weight:700;

}


h1 {

    font-size:
    clamp(42px,6vw,72px);

}


h2 {

    font-size:
    clamp(32px,4vw,48px);

}


h3 {

    font-size:
    26px;

}


p {

    color:var(--ts-muted);

    font-size:18px;

}


.text-gradient {


    background:

    linear-gradient(
        90deg,
        var(--ts-blue-light),
        var(--ts-blue)
    );


    -webkit-background-clip:text;

    background-clip:text;

    color:transparent;


}



/* ==================================================
   4. GLOBAL LAYOUT
================================================== */


.container {

    width:
    min(var(--container),90%);

    margin:auto;

}


.section {

    padding:
    100px 0;

}


.section-header {

    max-width:750px;

    margin:
    0 auto 60px;

    text-align:center;

}


.section-header p {

    margin-top:20px;

}


/* ==================================================
   5. NAVIGATION
================================================== */


.header {

    position:sticky;

    top:0;

    z-index:1000;

    background:

    rgba(5,7,11,.85);


    backdrop-filter:
    blur(15px);


    border-bottom:
    1px solid var(--ts-border);

}



.navbar {

    height:85px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}



.logo {

    font-size:32px;

    font-weight:800;

    letter-spacing:-1px;

}


.logo span {

    color:
    var(--ts-red);

}



.nav-links {

    display:flex;

    align-items:center;

    gap:35px;

}


.nav-links a {

    color:
    var(--ts-muted);

    font-size:15px;

    transition:.25s;

}


.nav-links a:hover {

    color:
    var(--ts-white);

}



/* Dropdown */


.dropdown {

    position:relative;

}


.dropdown-menu {

    position:absolute;

    top:35px;

    left:0;


    width:230px;


    background:
    var(--ts-surface);


    border:
    1px solid var(--ts-border);


    border-radius:
    var(--radius-medium);


    padding:15px;


    opacity:0;

    visibility:hidden;


    transform:
    translateY(10px);


    transition:.25s;

}


.dropdown:hover .dropdown-menu {


    opacity:1;

    visibility:visible;


    transform:
    translateY(0);

}


.dropdown-menu a {

    display:block;

    padding:12px;

}


.dropdown-menu a:hover {

    background:
    var(--ts-card);

    border-radius:
    8px;

}


/* ==================================================
   6. BUTTON SYSTEM
================================================== */


.btn {


    display:inline-flex;

    align-items:center;

    justify-content:center;


    padding:

    14px 30px;


    border-radius:
    var(--radius-small);


    font-weight:600;


    transition:.25s;


    cursor:pointer;


}



.btn-primary {


    background:
    var(--ts-red);


    color:white;


}


.btn-primary:hover {


    background:
    var(--ts-red-dark);


    transform:
    translateY(-2px);


}



.btn-secondary {


    border:
    1px solid var(--ts-border-light);


    color:white;


    background:
    transparent;


}


.btn-secondary:hover {


    border-color:
    var(--ts-blue);


    background:
    rgba(37,99,235,.1);


}


/* ==================================================
   7. HERO SYSTEM
================================================== */


.hero {


    padding:
    120px 0;


    text-align:center;


}


.hero h1 {


    max-width:
    900px;


    margin:
    0 auto 30px;


}


.hero p {


    max-width:
    750px;


    margin:
    auto;


    font-size:
    21px;


}



.hero-actions {


    margin-top:
    45px;


    display:flex;


    justify-content:center;


    gap:20px;


}


.hero-glow {


    position:absolute;


    width:500px;

    height:500px;


    background:
    rgba(37,99,235,.15);


    filter:
    blur(120px);


}


















/*
====================================================
   8. PRODUCT CARDS
====================================================
*/


.product-grid {

    display:grid;

    grid-template-columns:
    repeat(3,1fr);

    gap:30px;

}



.product-card {


    background:
    linear-gradient(
        145deg,
        rgba(255,255,255,.04),
        transparent
    ),

    var(--ts-card);


    border:
    1px solid var(--ts-border);


    border-radius:
    var(--radius-large);


    padding:
    40px;


    transition:
    .3s;


}



.product-card:hover {


    transform:
    translateY(-6px);


    border-color:
    var(--ts-blue);


    box-shadow:
    var(--shadow-blue);


}



.product-card h3 {


    margin-bottom:
    18px;


}



.product-card p {


    margin-bottom:
    25px;


}



.product-link {


    color:
    var(--ts-blue-light);


    font-weight:
    600;


}


.product-link:hover {


    color:
    var(--ts-white);


}



/*
====================================================
   9. FEATURE SECTIONS
====================================================
*/


.feature-section {


    display:grid;


    grid-template-columns:
    repeat(2,1fr);


    gap:70px;


    align-items:center;


}



.feature-content h2 {


    margin-bottom:
    25px;


}



.feature-list {


    margin-top:
    35px;


}



.feature-list li {


    padding:
    15px 0;


    border-bottom:
    1px solid var(--ts-border);


    color:
    var(--ts-muted);


}



.feature-list li:last-child {


    border-bottom:none;


}



.feature-panel {


    background:
    var(--ts-surface);


    border:
    1px solid var(--ts-border);


    padding:
    40px;


    border-radius:
    var(--radius-large);


}



/*
====================================================
   10. PLATFORM CARDS
====================================================
*/


.platform-grid {


    display:grid;


    grid-template-columns:
    repeat(4,1fr);


    gap:
    20px;


}



.platform-card {


    background:
    var(--ts-card);


    border:
    1px solid var(--ts-border);


    padding:
    30px;


    text-align:center;


    border-radius:
    var(--radius-medium);


    transition:
    .25s;


}



.platform-card:hover {


    border-color:
    var(--ts-blue);


    background:
    var(--ts-card-hover);


}



.platform-card h3 {


    font-size:
    20px;


}



/*
====================================================
   11. SOLUTION CARDS
====================================================
*/


.solution-grid {


    display:grid;


    grid-template-columns:
    repeat(3,1fr);


    gap:
    25px;


}



.solution-card {


    padding:
    35px;


    background:
    var(--ts-surface);


    border:
    1px solid var(--ts-border);


    border-radius:
    var(--radius-medium);


}



.solution-card:hover {


    border-color:
    var(--ts-red);


}



.solution-card h3 {


    margin-bottom:
    15px;


}



/*
====================================================
   12. ARCHITECTURE DIAGRAMS
====================================================
*/


.architecture {


    padding:
    60px;


    background:
    var(--ts-surface);


    border:
    1px solid var(--ts-border);


    border-radius:
    var(--radius-large);


}



.architecture-flow {


    display:flex;


    align-items:center;


    justify-content:center;


    gap:
    20px;


    flex-wrap:
    wrap;


}



.arch-node {


    background:
    var(--ts-card);


    border:
    1px solid var(--ts-border);


    padding:
    25px 35px;


    border-radius:
    var(--radius-medium);


    text-align:center;


}



.arch-node.primary {


    background:
    rgba(37,99,235,.15);


    border-color:
    var(--ts-blue);


    box-shadow:
    var(--shadow-blue);


}



.arch-line {


    width:
    60px;


    height:
    2px;


    background:
    var(--ts-blue);


}



.arch-line.execution {


    background:
    var(--ts-red);


}



/*
====================================================
   13. INTEGRATION BADGES
====================================================
*/


.integration-list {


    display:flex;


    flex-wrap:
    wrap;


    gap:
    15px;


}



.integration-badge {


    padding:
    12px 22px;


    border:
    1px solid var(--ts-border);


    border-radius:
    50px;


    background:
    var(--ts-card);


    color:
    var(--ts-muted);


}



.integration-badge:hover {


    border-color:
    var(--ts-blue);


    color:
    var(--ts-white);


}



/*
====================================================
   14. API COMPONENTS
====================================================
*/


.api-window {


    background:
    #020617;


    border:
    1px solid var(--ts-border);


    border-radius:
    var(--radius-medium);


    overflow:hidden;


}



.api-header {


    padding:
    15px 20px;


    background:
    var(--ts-surface);


    border-bottom:
    1px solid var(--ts-border);


    color:
    var(--ts-muted);


}



.code-block {


    padding:
    30px;


    font-family:
    "JetBrains Mono",
    monospace;


    color:
    #E2E8F0;


    overflow-x:auto;


    line-height:
    1.8;


}



.code-keyword {


    color:
    var(--ts-blue-light);


}



.code-string {


    color:
    var(--ts-red);


}



/*
====================================================
   15. DOCUMENTATION LAYOUT
====================================================
*/


.docs-layout {


    display:grid;


    grid-template-columns:
    280px 1fr;


    gap:
    50px;


}



.docs-sidebar {


    position:sticky;


    top:100px;


    height:max-content;


}



.docs-sidebar a {


    display:block;


    padding:
    10px;


    color:
    var(--ts-muted);


}



.docs-sidebar a:hover {


    color:
    var(--ts-white);


}



.docs-content {


    max-width:
    850px;


}



.docs-content h2 {


    margin-top:
    50px;


}



.docs-content h3 {


    margin-top:
    35px;


}



.callout {


    padding:
    25px;


    border-left:
    4px solid var(--ts-blue);


    background:
    rgba(37,99,235,.1);


    margin:
    30px 0;


}



/*
====================================================
   16. CTA SECTIONS
====================================================
*/


.cta {


    padding:
    80px;


    text-align:center;


    background:


    linear-gradient(

        135deg,

        rgba(227,27,35,.18),

        rgba(37,99,235,.18)

    );


    border:
    1px solid var(--ts-border);


    border-radius:
    var(--radius-large);


}



.cta h2 {


    margin-bottom:
    20px;


}



.cta p {


    margin-bottom:
    35px;


}



















/*
====================================================
   17. BLOG SYSTEM
====================================================
*/


.blog-grid {

    display:grid;

    grid-template-columns:
    repeat(3,1fr);

    gap:
    30px;

}



.blog-card {


    background:
    var(--ts-card);


    border:
    1px solid var(--ts-border);


    border-radius:
    var(--radius-large);


    overflow:hidden;


    transition:
    .3s;


}



.blog-card:hover {


    transform:
    translateY(-5px);


    border-color:
    var(--ts-blue);


}



.blog-content {


    padding:
    30px;


}



.blog-meta {


    font-size:
    14px;


    color:
    var(--ts-gray);


    margin-bottom:
    15px;


}



.blog-card h3 {


    margin-bottom:
    15px;


}



.blog-card p {


    font-size:
    16px;


}



/*
====================================================
   18. BLOG ARTICLE
====================================================
*/


.article-header {


    max-width:
    850px;


    margin:
    auto;


    text-align:center;


    padding:
    80px 0;


}



.article-header h1 {


    margin-bottom:
    25px;


}



.article-meta {


    color:
    var(--ts-muted);


}



.article-content {


    max-width:
    850px;


    margin:auto;


}



.article-content h2 {


    margin:
    60px 0 20px;


}



.article-content h3 {


    margin:
    40px 0 15px;


}



.article-content p {


    margin-bottom:
    25px;


}



.article-content ul {


    list-style:
    disc;


    margin:
    20px 0 20px 25px;


    color:
    var(--ts-muted);


}



/*
====================================================
   19. FAQ SYSTEM
====================================================
*/


.faq-container {


    max-width:
    850px;


    margin:auto;


}



.faq-item {


    border-bottom:
    1px solid var(--ts-border);


}



.faq-question {


    width:100%;


    background:none;


    border:none;


    color:
    var(--ts-white);


    padding:
    25px 0;


    text-align:left;


    font-size:
    20px;


    font-weight:600;


    cursor:pointer;


}



.faq-answer {


    padding:
    0 0 25px;


    color:
    var(--ts-muted);


}



/*
====================================================
   20. PRICING SYSTEM
====================================================
*/


.pricing-grid {


    display:grid;


    grid-template-columns:
    repeat(3,1fr);


    gap:
    30px;


}



.pricing-card {


    background:
    var(--ts-card);


    border:
    1px solid var(--ts-border);


    border-radius:
    var(--radius-large);


    padding:
    40px;


}



.pricing-card.featured {


    border-color:
    var(--ts-red);


    box-shadow:
    var(--shadow-red);


}



.price {


    font-size:
    48px;


    font-weight:
    700;


    margin:
    25px 0;


}



.price span {


    font-size:
    16px;


    color:
    var(--ts-muted);


}



.pricing-features {


    margin:
    30px 0;


}



.pricing-features li {


    padding:
    10px 0;


    color:
    var(--ts-muted);


}



/*
====================================================
   21. COMPANY PAGES
====================================================
*/


.company-hero {


    max-width:
    850px;


    margin:auto;


    text-align:center;


}



.company-section {


    display:grid;


    grid-template-columns:
    repeat(2,1fr);


    gap:
    60px;


    align-items:center;


}



/*
====================================================
   22. CONTACT FORMS
====================================================
*/


.form-container {


    max-width:
    700px;


    margin:auto;


}



.form-group {


    margin-bottom:
    25px;


}



.form-group label {


    display:block;


    margin-bottom:
    8px;


    color:
    var(--ts-white);


}



.form-control {


    width:100%;


    padding:
    15px;


    background:
    var(--ts-card);


    border:
    1px solid var(--ts-border);


    border-radius:
    var(--radius-small);


    color:white;


    font-size:
    16px;


}



.form-control:focus {


    outline:none;


    border-color:
    var(--ts-blue);


}



/*
====================================================
   23. DOWNLOADS
====================================================
*/


.download-grid {


    display:grid;


    grid-template-columns:
    repeat(3,1fr);


    gap:
    25px;


}



.download-card {


    background:
    var(--ts-surface);


    border:
    1px solid var(--ts-border);


    padding:
    35px;


    border-radius:
    var(--radius-medium);


}



.download-card:hover {


    border-color:
    var(--ts-blue);


}



/*
====================================================
   24. FOOTER
====================================================
*/


.footer {


    margin-top:
    100px;


    padding:
    60px 0 30px;


    border-top:
    1px solid var(--ts-border);


}



.footer-grid {


    display:grid;


    grid-template-columns:
    repeat(4,1fr);


    gap:
    40px;


}



.footer h4 {


    margin-bottom:
    20px;


}



.footer a {


    display:block;


    color:
    var(--ts-muted);


    margin-bottom:
    12px;


}



.footer a:hover {


    color:
    var(--ts-white);


}



.footer-bottom {


    margin-top:
    50px;


    padding-top:
    25px;


    border-top:
    1px solid var(--ts-border);


    text-align:center;


    color:
    var(--ts-gray);


}



/*
====================================================
   25. UTILITY CLASSES
====================================================
*/


.text-center {

    text-align:center;

}


.text-left {

    text-align:left;

}


.mt-1 {

    margin-top:10px;

}


.mt-2 {

    margin-top:20px;

}


.mt-3 {

    margin-top:40px;

}


.mb-1 {

    margin-bottom:10px;

}


.mb-2 {

    margin-bottom:20px;

}


.mb-3 {

    margin-bottom:40px;

}


.hidden {

    display:none;

}



/*
====================================================
   26. ANIMATIONS
====================================================
*/


.fade-up {


    animation:

    fadeUp .7s ease forwards;


}



@keyframes fadeUp {


    from {


        opacity:0;


        transform:
        translateY(25px);


    }


    to {


        opacity:1;


        transform:
        translateY(0);


    }


}



.glow-blue {


    box-shadow:
    var(--shadow-blue);


}



.glow-red {


    box-shadow:
    var(--shadow-red);


}



/*
====================================================
   27. RESPONSIVE DESIGN
====================================================
*/


@media(max-width:1100px){


.product-grid,
.solution-grid {


    grid-template-columns:
    repeat(2,1fr);


}


.platform-grid {


    grid-template-columns:
    repeat(3,1fr);


}


.pricing-grid {


    grid-template-columns:
    1fr;


}


.footer-grid {


    grid-template-columns:
    repeat(2,1fr);


}



}



@media(max-width:800px){



.section {


    padding:
    70px 0;


}



.nav-links {


    display:none;


}



.hero {


    padding:
    80px 0;


}



.hero-actions {


    flex-direction:column;


}



.product-grid,
.solution-grid,
.blog-grid,
.download-grid,
.feature-section,
.company-section {


    grid-template-columns:
    1fr;


}



.platform-grid {


    grid-template-columns:
    repeat(2,1fr);


}



.architecture {


    padding:
    30px;


}



.arch-line {


    display:none;


}



.docs-layout {


    grid-template-columns:
    1fr;


}



.docs-sidebar {


    position:relative;


    top:0;


}



.footer-grid {


    grid-template-columns:
    1fr;


}



}



@media(max-width:480px){



.platform-grid {


    grid-template-columns:
    1fr;


}



.hero h1 {


    font-size:
    38px;


}



.btn {


    width:
    100%;


}



}