:root {
    /* Dark theme inspired by the uploaded dashboard */
    --bg-dark: hsl(220, 30%, 8%);
    --bg-card: hsl(212, 43%, 25%);
    --bg-card-border: hsl(220, 20%, 15%);
    --bg-muted: hsl(220, 25%, 12%);

    /* Blue gradient primary */
    --primary: hsl(217, 91%, 60%);
    --primary-dark: hsl(216, 59%, 26%);
    --accent: hsl(214, 93%, 52%);
    --success: hsl(155, 70%, 55%);
    --warning: hsl(45, 95%, 60%);
    --danger: hsl(0, 75%, 60%);

    /* Text colors */
    --text-primary: hsl(215, 25%, 95%);
    --text-secondary: hsl(215, 15%, 65%);
    --text-muted: hsl(215, 10%, 50%);

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, var(--primary), var(--accent));
    --gradient-success: linear-gradient(135deg, var(--success), hsl(125, 65%, 45%));
    --gradient-card: linear-gradient(135deg, var(--bg-card), hsl(220, 20%, 15%));

    /* Shadows */
    --shadow-card: 0 4px 20px hsla(220, 30%, 5%, 0.3);
    --shadow-card-hover: 0 8px 30px hsla(220, 30%, 5%, 0.5);
    --shadow-glow: 0 0 30px hsla(217, 91%, 60%, 0.3);

    --radius: 12px;
    --radius-lg: 16px;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}


* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

/*#FF7B01 portokalova
1C1C1C za kartickite
2F2215 temno portokalova

 */

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            color: white;
            overflow-x: hidden;
            background: var(--bg-dark);
            /*font-family: Merienda, sans-serif;*/

        }

        /* Animated background particles */
        .particles {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
            pointer-events: none;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0px) rotate(0deg); }
            50% { transform: translateY(-20px) rotate(180deg); }
        }

        /* Header */
        header {
            position: relative;
            z-index: 100;
            padding: 10px 0;
            backdrop-filter: blur(10px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            background-color: var(--bg-dark) ;
        }

        nav {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 40px;
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 20px;
            font-weight: 700;
        }

        .logo-icon {
            width: 30px;
            height: 30px;
            background: black;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color:var(--text-secondary);
            font-weight: bold;
        }

        .nav-links {
            display: flex;
            gap: 40px;
            list-style: none;
        }

        .nav-links a {
            color:#F8FAFC;
            text-decoration: none;
            transition: color 0.3s;
        }

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

        .nav-buttons {
            display: flex;
            gap: 15px;
        }

        .btn {
            padding: 8px 18px;
            border-radius: 8px;
            text-decoration: none;
            font-weight: 600;
            transition: all 0.3s ease;
            border: none;
            cursor: pointer;
            font-size: 14px;
        }

        .btn-primary {
            background: var(--primary-dark);
            color:white ;
        }


        .btn-ghost {
            background: transparent;
            color: rgba(255, 255, 255, 0.8);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .btn-ghost:hover {
            background: rgba(255, 255, 255, 0.1);
        }

        /* Price Ticker */
        .price-ticker {
            /*background: rgba(0, 0, 0, 0.3);*/
            background: var(--bg-muted);
            padding: 6px 0;
            overflow: hidden;


        }

        .ticker-content {
            display: flex;
            animation: scroll 50s linear infinite;
            gap: 100px;
        }

        @keyframes scroll {
            0% { transform: translateX(100%); }
            100% { transform: translateX(-100%); }
        }

        .ticker-item {
            display: flex;
            align-items: center;
            gap:12px;
            white-space: nowrap;
            font-weight: 600;
            font-size: 12px;
        }

        .ticker-symbol {
            color: #fff;
            font-weight: bold;
        }

        .ticker-price {
            color: var(--accent);
        }

        .ticker-change.positive {
            color: var(--success);
        }

        .ticker-change.negative {
            color: #e24040;
        }

        /* Hero Section */


        .hero {
          position: relative;
          z-index: 1;
          height: 100vh;
          width: 100%;
          align-items: center;
          justify-content: center;
          text-align: center;
          overflow: hidden;
          padding: 150px 20px;
        }

        .hero-video {
          position: absolute;
          top: 50%;
          left: 50%;
          min-width: 100%;
          min-height: 100%;
          width: auto;
          height: auto;
          transform: translate(-50%, -50%);
          object-fit: cover;         /* пополнува без да се растегне */
          z-index: -2;
        }

        .hero::after {
          content: "";
          position: absolute;
          inset: 0;                  /* целосно преку видеото */
          background: rgba(0, 0, 0, 0.65);  /* затемнување */
          z-index: -1;
        }

        .hero-overlay {
          position: relative;
          z-index: 1;
          max-width: 1000px;
          margin: auto;
          padding: 20px;
        }

        .hero h1 {
            font-size: 3.2rem;
            font-weight: 800;
            background:linear-gradient(45deg, var( --primary), rgba(255, 255, 255, 0.88));
            background-size: 300% 300%;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            animation: gradientShift 5s ease-in-out infinite;
            margin-bottom: 30px;
            line-height: 1.3;
        }

        @keyframes gradientShift {
            0%, 100% { background-position: 0 50%; }
            50% { background-position: 100% 50%; }
        }

        .hero p {
            font-size: 1rem;
            font-weight: bold;
            color: var(--text-secondary);
            max-width: 700px;
            margin: 0 auto 50px;
            line-height: 1.6;
        }

        .hero-buttons {
            display: flex;
            gap: 20px;
            justify-content: center;
            margin-bottom: 80px;
        }

        /* Responsive tweaks */
        /*@media (max-width: 992px) {*/
        /*  .hero h1 {*/
        /*    font-size: 2.2rem;*/
        /*  }*/

        /*  .hero p {*/
        /*    font-size: 0.95rem;*/
        /*  }*/
        /*}*/

        /*@media (max-width: 576px) {*/
        /*  .hero {*/
        /*    padding: 100px 15px 30px;*/
        /*  }*/

        /*  .hero h1 {*/
        /*    font-size: 1.8rem;*/
        /*  }*/

        /*  .hero p {*/
        /*    font-size: 0.85rem;*/
        /*  }*/

        /*  .stat-card {*/
        /*    flex: 1 1 100%;  !* секоја карта ќе биде цел ред *!*/
        /*    max-width: 90%;*/
        /*  }*/
        /*}*/



        /*!* Responsive Design *!*/
        /*@media (max-width: 992px) {*/
        /*    .hero {*/
        /*        padding: 120px 20px 60px;*/
        /*    }*/

        /*    .hero h1 {*/
        /*        font-size: 2.5rem;*/
        /*    }*/

        /*    .hero p {*/
        /*        font-size: 0.95rem;*/
        /*    }*/

        /*    .hero-buttons {*/
        /*        margin-bottom: 50px;*/
        /*    }*/

        /*    .stats {*/
        /*        gap: 20px;*/
        /*    }*/

        /*    .stat-card {*/
        /*        min-width: 120px;*/
        /*        padding: 20px 15px;*/
        /*    }*/

        /*    .stat-value {*/
        /*        font-size: 1.8rem;*/
        /*    }*/
        /*}*/

        /*@media (max-width: 768px) {*/
        /*    .hero {*/
        /*        min-height: auto;*/
        /*        padding: 100px 15px 50px;*/
        /*    }*/

        /*    .hero h1 {*/
        /*        font-size: 2.2rem;*/
        /*    }*/

        /*    .hero p {*/
        /*        font-size: 0.9rem;*/
        /*        margin-bottom: 40px;*/
        /*    }*/

        /*    .hero-buttons {*/
        /*        flex-direction: column;*/
        /*        gap: 15px;*/
        /*        align-items: center;*/
        /*        margin-bottom: 40px;*/
        /*    }*/

        /*    .btn {*/
        /*        width: 100%;*/
        /*        max-width: 280px;*/
        /*        padding: 12px 25px;*/
        /*    }*/

        /*    .stats {*/
        /*        gap: 15px;*/
        /*        margin-top: 20px;*/
        /*    }*/

        /*    .stat-card {*/
        /*        flex: 1 1 calc(50% - 10px);*/
        /*        min-width: unset;*/
        /*        max-width: unset;*/
        /*        padding: 18px 12px;*/
        /*    }*/

        /*    .stat-value {*/
        /*        font-size: 1.6rem;*/
        /*    }*/

        /*    .stat-label {*/
        /*        font-size: 0.8rem;*/
        /*    }*/
        /*}*/


        /*!* Ultra small screens *!*/
        /*@media (max-width: 360px) {*/
        /*    .hero {*/
        /*        padding: 70px 10px 30px;*/
        /*    }*/

        /*    .hero h1 {*/
        /*        font-size: 1.7rem;*/
        /*    }*/

        /*    .btn {*/
        /*        padding: 10px 20px;*/
        /*        font-size: 0.9rem;*/
        /*    }*/
        /*}*/

#acsent-btn {
    background: var(--primary);
    color: var(--text-primary);
    padding: 12px 26px;
    font-size: 16px;
    border-radius: 15px;
    text-decoration: none;
    font-weight: bold;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease; /* за мазна анимација */
}

#acsent-btn:hover {
    background:var(--primary-dark);  /* кафеава */
    color: var(--accent);       /* портокалова */
    border: 1px solid var(--accent);
}

.btn-large {
            padding: 12px 26px;
            font-size: 16px;
            border-radius: 15px;
        }

        /* Stats */
        .stats {
            display: flex;
            justify-content: center;
            gap: 60px;
            margin-bottom: 80px;
        }

        .stat-card {
            background:var(--bg-card);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 16px;
            padding: 20px 30px;
            text-align: center;
            transition: transform 0.3s ease;
        }

        .stat-card:hover {
            transform: translateY(-5px);
        }

        .stat-value {
            font-size: 2.5rem;
            font-weight: 800;
            margin-bottom: 10px;
        }

        .stat-value.blue { color: #ffffff; }
        .stat-value.green { color: var(--accent) ;}
        .stat-value.orange { color: #ffffff; }

        .stat-label {
            color: rgba(255, 255, 255, 0.7);
            font-size: 1rem;
        }

        /* Plans Section */
        .plans {
            padding: 50px 40px;
            width: 100%;
            margin: 0 auto;
            background: var(--background-color) ;
            color: white;
        }

        .plans h2 {
            text-align: center;
            font-size: 35px;
            margin-bottom: 10px;
            color: #ffffff;
        }

        .plans-subtitle {
            text-align: center;
            color: #c4c4c4;
            font-weight: bold;
            font-size: 25px;
            margin-bottom: 60px;
        }

        .plans-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 30px;
            max-width: 1200px;
            margin: 0 auto;
        }

        .plan-card {
            background:var(--bg-card);
            backdrop-filter: blur(20px);
            border: 2px solid darkgray;
            border-radius: 24px;
            padding: 40px 30px;
            text-align: center;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            color:white;
        }

        .plan-card:hover {
            transform: translateY(-10px);
            border-color: var(--primary);
            background: var(--bg-muted);

        }

        .plan-card.popular {
            border: 2px solid #a9a9a9;
            position: relative;
        }
        .plan-card.popular:hover {
            border: 2px solid var(--primary);
            position: relative;
        }

        .popular-badge {
            position: absolute;
            top: -1px;
            right: 20px;
            background: linear-gradient(45deg, #ffffff, #ebebeb);
            color: black;
            padding: 8px 16px;
            border-radius: 0 0 12px 12px;
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
        }

        .plan-icon {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            margin: 0 auto 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
        }

        .plan-icon.starter { background: linear-gradient(45deg, rgb(0, 0, 0), rgb(127, 129, 178)); }
        .plan-icon.growth { background: linear-gradient(45deg, #000000, #7f81b2); }
        .plan-icon.premium { background: linear-gradient(45deg, #000000, #7f81b2); }
        .plan-icon.elite { background: linear-gradient(45deg, #000000, #7f81b2); }

        .plan-name {
            font-size: 1.4rem;
            font-weight: 700;
            margin-bottom: 10px;
        }

        .plan-multiplier {
            font-size: 2.5rem;
            font-weight: 800;
            margin-bottom: 5px;
        }

        .plan-multiplier.starter { color: var(--accent); }
        .plan-multiplier.growth { color: var(--accent); }
        .plan-multiplier.premium { color: var(--accent); }
        .plan-multiplier.elite { color: var(--accent); }

        .plan-duration {
            color: rgba(255, 255, 255, 0.7);
            margin-bottom: 20px;
        }

        .plan-details {
            display: flex;
            flex-direction: column;
            gap: 5px;
            margin-bottom: 30px;
            color: #ffffff;
        }

        .plan-detail {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .plan-detail-label {
            color: #ffffff;
        }

        .plan-detail-value {
            font-weight: 600;
            color: #ffffff;
        }

        .plan-roi {
            color: #00f888;
            font-weight: 700;
        }

        .plan-btn {
            width: 100%;
            padding: 10px;
            background: var(--primary-dark);
            color: white;
            border: 1px solid darkgrey;
            border-radius: 12px;
            font-weight: 600;
            transition: all 0.3s ease;
            cursor: pointer;
        }

        .plan-btn:hover {
            background: var(--primary);
            color: white;
        }

        .plan-btn.primary {
            background: linear-gradient(45deg, #ffffff, #ffffff);
            border:none;
            color: black;
        }

        .plan-btn.primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 20px var(--accent);
        }
      .plans-grid .plan-card:nth-child(3) {
    background:var(--primary-dark);
    border: white;
}


        /*!* Mobile Responsiveness *!*/
        /*@media (max-width: 768px) {*/
        /*    .nav-links {*/

        /*    }*/

        /*    .hero h1 {*/
        /*        font-size: 2.5rem;*/
        /*    }*/

        /*    .hero p {*/
        /*        font-size: 1.1rem;*/
        /*        color: white !important;*/
        /*    }*/

        /*    .hero-buttons {*/
        /*        display: flex;*/
        /*        flex-direction: row;*/
        /*        align-items: center;*/
        /*    }*/

        /*    .stats {*/
        /*        flex-direction: column;*/
        /*        gap: 30px;*/
        /*    }*/

        /*    .plans-grid {*/
        /*        grid-template-columns: 1fr;*/
        /*    }*/

        /*    nav {*/
        /*        padding: 0 20px;*/
        /*    }*/

        /*    .hero, .plans {*/
        /*        padding-left: 20px;*/
        /*        padding-right: 20px;*/
        /*    }*/
        /*}*/

        /* Animations */
        .fade-in {
            opacity: 0;
            transform: translateY(30px);
            animation: fadeInUp 0.8s ease forwards;
        }

        @keyframes fadeInUp {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .fade-in:nth-child(1) { animation-delay: 0.1s; }
        .fade-in:nth-child(2) { animation-delay: 0.2s; }
        .fade-in:nth-child(3) { animation-delay: 0.3s; }
        .fade-in:nth-child(4) { animation-delay: 0.4s; }



        .about-us{
            text-align: center;
            background: linear-gradient(135deg, var(--background-color) 0%, var(--bg-dark) 50%, var(--bg-muted) 100%);
            padding: 100px 10%;
            .subtitle {
                font-size: 1em;
                color: #aaa;
                margin-bottom: 40px;
            }
            .features {
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                gap: 100px;
            }
            .feature {
                background-color: var(--bg-muted);
                border-radius: 10px;
                padding: 40px 20px;
                width: 300px;
                text-align: left;
                border: 2px solid var(--bg-card-border);
            }
            .feature img {
                width: 30px;
                margin-bottom: 10px;
            }
            .feature h3 {
                font-size: 1.2em;
                margin: 10px 0;
                color: var(--accent);
            }
            .feature p {
                font-size: 0.9em;
                color: #ccc;
            }
        }

        .footer {
    background-color: #0a0a0a;
    color: #f0f0f0;
    padding: 60px 20px 20px;
    font-size: 14px;
}

.footer-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 40px;
    max-width: 1200px;
    margin: auto;
}

.footer h3,
.footer h4 {
    color: #ffffff;
    margin-bottom: 15px;
}

.footer a {
    color: #ccc;
    text-decoration: none;
}

.footer a:hover {
    color: #fff;
    text-decoration: underline;
}

.footer ul {
    list-style: none;
    padding: 0;
}

.footer-social .social-icons {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.footer-social img {
    width: 24px;
    height: 24px;

    transition: filter 0.3s ease;
}

/*.footer-social img:hover {*/
/*    filter: brightness(1.5) invert(0.8);*/
/*}*/

.footer-bottom {
    border-top: 1px solid #222;
    text-align: center;
    padding-top: 20px;
    margin-top: 40px;
    font-size: 12px;
    color: #888;
}

.container {
    display: flex;
    margin: 120px  auto;
    width: 80%;
    transition: all 0.4s ease;
    gap: 100px;
    justify-content: center;
    align-items: center;
    border: 2px solid var(--bg-card-border);
    border-radius: 35px;
    background: linear-gradient(195deg, var(--bg-dark), var(--bg-muted));

   padding-top: 100px;

}

.img_form{
    height: 100%;
}

.form-container{
    width: 40%;
    text-align: center;
}
.tabs {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.tab {
  flex: 1;
  padding: 10px;
  background: none;
  border: none;
  color: white;
  font-size: 18px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: 0.3s ease;
}

.tab.active {
  border-bottom: 2px solid var(--primary-dark);
}

.form {
  display: none;
  flex-direction: column;
  gap: 15px;
  animation: fadeIn 0.4s ease;
}

.form.active {
  display: flex;
}

input, select {
  padding: 10px;
  border-radius: 8px;
  border: none;
  background: var(--bg-muted);
  color: white;
}

input::placeholder {
  color: #ccc;
}

.terms {
  font-size: 12px;
}

.terms a {
  color: var(--accent);
  text-decoration: none;
}

.submit-btn {
  padding: 12px;
  border: none;
  background-color:var(--accent);
  color: black;
  border-radius: 15px;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s ease;
}

.submit-btn:hover {
    background:var(--primary-dark);  /* кафеава */
    color: var(--accent);       /* портокалова */
    border: 1px solid var(--accent);
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}



.danger {
    color: red;
    font-weight: bold;
}
.success {
    color: green;
    font-weight: bold;
}
.flash-messages {
    margin-bottom: 10px;
}


.error-message {
  color: #ff4d4d;
  font-size: 14px;
  margin: 0 0 10px 0;
  text-align: center;
  font-weight: bold;
  display: block;
}


/* === Login Section Mobile Fix === */
#login .container {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 2rem;
}


/* ===== RESPONSIVE BREAKPOINTS ===== */

/* Large Desktops (1400px+) */
@media (min-width: 1400px) {
    .container {
        max-width: 1200px;
    }

    .hero{
        height: 800px !important;
        h1{
            font-size: 74px !important;
        }
    }

    p{
        color: white !important;
    }

    .hero .btn{
        padding: 16px 30px;
    }


    nav {
        padding: 0 40px;
    }

    .plans{
        padding-top: 150px;
        > p{
            color: var(--primary) !important;
        }

        .plan-card{
            border: 2px solid gray !important;
        }
    }

    .plans-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .features {
        grid-template-columns: repeat(3, 1fr);
    }
    .about-us{
        h1{
            font-size: 38px !important;
        }
        p{
            margin-top: 30px;
        }
    }
}

/* Desktop (1200px - 1399px) */
@media (min-width: 1200px) and (max-width: 1399px) {
    .plans-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 25px;
    }

    .features {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Large Tablets / Small Laptops (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
    nav {
        padding: 0 30px;
    }

    .hero {
        padding: 100px 30px 60px;
        height: 700px !important;

        p{
            color: white !important;
        }
        h1{
            font-size: 64px !important;
        }

    }

    .plans{
        padding-top: 150px;
        > p{
            color: var(--primary) !important;
        }

        .plan-card{
            border: 2px solid gray !important;
        }
    }

    .plans-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 25px;
    }

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

    #login img{
        display: none;
    }
    #login .container{
        background: url("../media/background_trading555.jpeg")  !important;
        background-position: center !important;
        background-size: cover !important;
        /*position: relative !important;*/
        background-repeat: no-repeat !important;
        height: 700px !important;
        width: 840px !important;
        .form-container{
            width: 60%;
        }
    }

    .container {
        gap: 30px;
        padding: 50px 30px;
    }
}

/* Tablets (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .nav-links {
        display: none;
    }

    .nav-buttons {
        gap: 8px;
        a{
            padding: 8px 16px;
            text-align: center;
            align-content: center;
        }
    }

    .hero {
        padding: 100px 30px 60px;
        height: 700px !important;

        p{
            color: white !important;
        }
        h1{
            font-size: 54px !important;
        }

        .hero-buttons{
            display: flex !important;
            a{
                padding: 16px 30px !important;
            }
        }

        .stats .stat-card .stat-value{
            font-size: 26px !important;
        }

    }


    #login img{
        display: none;
    }
    #login .container{
        background: url("../media/background_trading555.jpeg")  !important;
        background-position: center !important;
        background-size: cover !important;
        /*position: relative !important;*/
        background-repeat: no-repeat !important;
        height: 800px !important;
        width: 700px !important;
        .form-container{
            width: 80%;
        }
    }

    .btn {
        padding: 8px 12px;
        font-size: 13px;
    }

    .hero {
        padding: 80px 20px 50px;
        min-height: 80vh;
    }

    .plans{
        padding-top: 100px;
        >h2{
            font-size: 34px !important;
        }
        > p{
            color: var(--primary) !important;
        }

        .plan-card{
            border: 2px solid gray !important;
        }
    }


    .btn-large {
        min-width: 220px;
    }


    .plans-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    .about-us{
        width: 100% !important;
        padding: 80px 4% !important;
    }

    .features {
        /*grid-template-columns: repeat(2, 1fr);*/
        /*gap: 10px;*/
        display: flex !important;
        flex-wrap: wrap !important;
    }



    .container {
        flex-direction: column;
        gap: 40px;
        padding: 40px 30px;
    }

    .container img {
        max-width: 300px;
    }

    .form-container {
        max-width: 100%;
    }
}



/* Large Phones (576px - 767px) */
@media (min-width: 576px) and (max-width: 767px) {
    nav {
        padding: 0 15px;
        .logo{
            width: 40px !important;
        }
    }

    .logo {
        font-size: 18px;
    }

    .logo img {
        width: 35px;
        height: 35px;
    }

    .nav-links {
        display: none;
    }

    .nav-buttons {
        flex-direction: row;
        gap: 8px;
    }

    .plans{
        padding-top: 100px !important;
        >h2{
            font-size: 24px !important;
        }
        > p{
            color: var(--primary) !important;
            font-size: 18px !important;
        }

        .plan-card{

            border: 2px solid gray !important;
            button{
                padding: 16px 30px;
            }
        }
    }

    .btn {
        padding: 8px 12px;
        font-size: 12px;
    }

    .ticker-content {
        gap: 40px;
    }

    .ticker-item {
        gap: 6px;
        font-size: 11px;
    }


    .hero {
        padding: 100px 30px 60px;
        height: 700px !important;

        p{
            color: white !important;
        }
        h1{
            font-size: 54px !important;
        }

        .hero-buttons{
            display: flex !important;
            a{
                padding: 16px 30px !important;
            }
        }

        .stats .stat-card .stat-value{
            font-size: 26px !important;
        }

    }



    #login{
        padding: 10px !important;
    }

    #login img{
        display: none;
    }
    #login .container{
        background: url("../media/background_trading555.jpeg")  !important;
        background-position: center !important;
        background-size: cover !important;
        /*position: relative !important;*/
        background-repeat: no-repeat !important;
        height: 800px !important;
        width: 500px !important;
        .form-container{
            width: 100%;
        }
    }

    .btn-large {
        width: 100%;
        max-width: 280px;
        padding: 12px 20px;
        font-size: 15px;
    }

    .stats {
        flex-wrap: wrap;
        gap: 15px;
        justify-content: center;
    }

    .stat-card {
        flex: 1 1 calc(50% - 8px);
        min-width: 110px;
        max-width: 140px;
        padding: 15px 12px;
    }

    .plans {
        padding: 60px 15px;
    }

    .plans-grid {
        grid-template-columns: 1fr;
        gap: 25px;
        padding: 0 10px;
    }

    .plan-card {
        padding: 35px 25px;
    }

    .about-us {
        padding: 60px 15px;
    }

    .features {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .feature {
        padding: 25px 20px;
    }

    #login {
        padding: 60px 15px;
    }

    .container {
        width: 95%;
        padding: 30px 20px;
        gap: 30px;
    }

    .container img {
        display: none;
    }

    .form-container {
        width: 100%;
    }

    .tab {
        font-size: 15px;
        padding: 12px;
    }

    input, .submit-btn {
        padding: 12px;
        font-size: 14px;
    }

    .footer {
        padding: 50px 15px 15px;
    }

    .footer-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
}

/* Small Phones (320px - 575px) */
@media (max-width: 575px) {
    nav {
        padding: 0 10px;
        .nav-buttons{
             padding: 2px 4px !important;
            text-align: center;
            align-items: center;
            align-content: center;
        }
        .logo img{
           display: none;
        }
    }



    .nav-links {
        display: none;
    }

    .nav-buttons {
        gap: 5px;
    }


    .hero {
        padding: 100px 30px 60px;
        height: 400px !important;
        align-content: center !important;

        > p{
            color: white !important;
            font-size: 12px !important;
        }
        h1{
            font-size: 34px !important;
        }

        .hero-buttons{
            display: flex !important;
            a{
                padding: 4px 8px !important;
                text-align: center !important;
                align-content: center !important;
            }
        }

        .stats{
            display: none !important;
            gap: 10px !important;
            .stat-card {
                width: 30% !important;
                padding: 8px !important;
            }
        }

        .stats .stat-card .stat-value{
            font-size: 16px !important;
        }
        .stats .stat-card .stat-label{
            font-size: 12px !important;
        }

    }



    #login{
        padding: 0px !important;
        border-radius: 0px !important;

    }

    #login img{
        display: none;
    }
    #login .container{
        align-content: center;
        background: url("../media/individuals-ezgif.com-webp-to-jpg-converter.jpg")  !important;
        background-position: center !important;
        background-size: cover !important;
        /*position: relative !important;*/
        background-repeat: no-repeat !important;
        height: 700px !important;
        width: 92% !important;
        .form-container{
            width: 100%;
            /*height: 100% !important;*/
        }
    }

    .btn {
        padding: 6px 10px;
        font-size: 11px;
    }

    .price-ticker {
        padding: 6px 0;
    }

    .ticker-content {
        gap: 30px;
        animation-duration: 35s;
    }

    .ticker-item {
        gap: 4px;
        font-size: 10px;
    }

    .hero {
        padding: 60px 10px 30px;
        min-height: 60vh;
    }

    .hero h1 {
        margin-bottom: 20px;
    }

    .hero p {
        margin-bottom: 30px;
        padding: 0 10px;
    }

    .hero-buttons {
        margin-bottom: 30px;
        gap: 10px;
    }

    .btn-large {
        width: 100%;
        max-width: 250px;
        padding: 10px 16px;
        font-size: 14px;
    }



    .plans {
        padding: 50px 10px;
        >h2{
            font-size: 22px !important;
        }
        >p{
            font-size: 12px !important;
        }
    }

    .plans-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 0 5px;
    }

    .plan-card {
        padding: 25px 20px;
    }

    .plan-multiplier {
        font-size: 2rem;
    }

    .about-us {
        padding: 50px 10px;
    }

    .features {
        grid-template-columns: 1fr;
        gap: 20px !important;
    }

    .about-us{

        margin-top: -50px !important;
        >h1{
            font-size: 22px !important;
        }
        >p{
             font-size: 12px !important;
        }
    }

    .feature {
        padding: 20px 15px;
    }

    .feature img {
        width: 35px;
        height: 35px;
    }

    #login {
        padding: 40px 10px;
    }

    .container {
        width: 98%;
        padding: 25px 15px;
        gap: 20px;
        border-radius: 16px;
    }

    .container img {
        display: none;
    }

    .form-container {
        width: 100%;
        padding: 0;
    }

    .form h2 {
        font-size: 1.3rem;
        margin-bottom: 15px;
    }

    .tab {
        font-size: 14px;
        padding: 10px 8px;
    }

    .form {
        gap: 15px;
    }

    input, .submit-btn {
        padding: 10px;
        font-size: 13px;
    }

    .terms {
        font-size: 11px;
    }

    .footer {
        padding: 40px 10px 15px;
    }

    .footer-container {
        grid-template-columns: 1fr;
        gap: 25px;
        text-align: center;
    }

    .footer-social .social-icons {
        justify-content: center;
    }

    .footer-bottom {
        padding-top: 20px;
        margin-top: 30px;
    }
}



/* iPhone SE and similar (375px width) */
@media (min-width: 375px) and (max-width: 414px) {
    .hero {
        padding: 65px 15px 35px;
    }

    .stats {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .stat-card {
        flex: 1 1 calc(50% - 10px);
        min-width: 120px;
        max-width: 160px;
    }

    .plans-grid {
        gap: 22px;
    }

    .container {
        width: 95%;
        padding: 35px 25px;
    }
}

/* iPad Mini and similar tablets (768px) */
@media (min-width: 768px) and (max-width: 820px) {
    .hero {
        padding: 90px 25px 55px;
        min-height: 85vh;
    }

    .stats {
        gap: 25px;
    }

    .stat-card {
        min-width: 130px;
        max-width: 160px;
    }

    .plans-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }

    .features {
        grid-template-columns: repeat(2, 1fr);
        gap: 35px;
    }

    .container {
        flex-direction: row;
        gap: 35px;
    }

    .container img {
        display: block;
        max-width: 250px;
    }
}

/* iPad Pro and larger tablets (1024px - 1199px) */
@media (min-width: 1024px) and (max-width: 1199px) {
    .plans-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .features {
        grid-template-columns: repeat(3, 1fr);
    }

    .container {
        gap: 50px;
    }

    .container img {
        max-width: 350px;
    }
}

/* Landscape phone orientation */
@media (max-height: 500px) and (orientation: landscape) {
    .hero {
        min-height: 100vh;
        padding: 40px 20px 30px;
    }

    .hero h1 {
        font-size: 2rem;
        margin-bottom: 15px;
    }

    .hero p {
        margin-bottom: 25px;
    }

    .hero-buttons {
        margin-bottom: 25px;
    }

    .stats {
        margin-top: 20px;
    }
}

/* Print styles */
@media print {
    * {
        background: white !important;
        color: black !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    .hero-video,
    .particles,
    .nav-buttons,
    .hero-buttons {
        display: none !important;
    }

    body {
        font-size: 12pt;
        line-height: 1.4;
    }

    h1, h2, h3, h4, h5, h6 {
        page-break-after: avoid;
    }

    .plan-card,
    .feature,
    .stat-card {
        page-break-inside: avoid;
        border: 1px solid #000 !important;
        margin-bottom: 10px;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    :root {
        --bg-dark: #000000;
        --bg-card: #1a1a1a;
        --bg-muted: #0d0d0d;
        --text-primary: #ffffff;
        --text-secondary: #ffffff;
        --primary: #0066ff;
        --accent: #00ccff;
    }

    .plan-card,
    .feature,
    .stat-card {
        border-width: 2px;
    }

    .btn {
        border: 2px solid;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .ticker-content {
        animation: none;
    }

    .hero::after {
        background: rgba(0, 0, 0, 0.8);
    }
}

/* Focus management for accessibility */
.btn:focus,
input:focus,
.tab:focus {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Skip to content link for accessibility */
.skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: var(--primary);
    color: white;
    padding: 8px;
    z-index: 1000;
    text-decoration: none;
    border-radius: 4px;
}

.skip-link:focus {
    top: 6px;
}

/* Ensure minimum touch targets on mobile */
@media (max-width: 768px) {
    .btn,
    .tab,
    input,
    .submit-btn {
        min-height: 44px;
    }

    .nav-buttons a {
        min-width: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}