/* =========================================================
   RADCO - Global Responsive Layer
   Loaded after page-specific css so it can normalize all
   pages without requiring duplicated media queries.
   ========================================================= */

:root{
    --mobile-gutter: 18px;
    --tablet-gutter: 28px;
}

/* Never let long content create horizontal overflow */
html, body{
    max-width:100%;
    overflow-x:hidden;
}

*, *::before, *::after{
    box-sizing:border-box;
}

img, video, iframe, canvas, svg{
    max-width:100%;
}

input, textarea, select, button{
    max-width:100%;
    font-family:inherit;
}

button, a{
    -webkit-tap-highlight-color:transparent;
}

.container{
    width:100%;
}

/* Better wrapping for Persian/English mixed content */
h1, h2, h3, h4, h5, h6, p, a, li, label, button{
    overflow-wrap:anywhere;
}

/* =========================================================
   TABLET / SMALL LAPTOP
   ========================================================= */
@media (max-width: 1100px){

    .container{
        max-width:100%;
        padding-left:var(--tablet-gutter);
        padding-right:var(--tablet-gutter);
    }

    header{
        padding:14px 0;
    }

    .nav-links{
        gap:20px;
    }

    .nav-cta{
        gap:9px;
    }

    .hero,
    .about-hero,
    .contact-hero{
        padding-top:145px;
    }

    .hero h1,
    .crm-content h1,
    .hero-content h1{
        font-size:clamp(42px,5vw,56px);
    }

    .app-content h2,
    .section-title h2,
    .story-content h2,
    .benefits-content h2,
    .erp-cta h2,
    .cta-box h2{
        font-size:clamp(34px,4.5vw,46px);
    }

    .crm-hero-grid,
    .crm-app-grid,
    .about-grid,
    .story-grid,
    .contact-grid,
    .hero-grid,
    .erp-grid,
    .benefits-grid,
    .support-grid,
    .help-grid,
    .faq-grid,
    .analysis-grid,
    .bpm-grid,
    .consulting-grid,
    .consulting-info,
    .consulting-services-grid,
    .automation-grid,
    .workflow-grid,
    .tools-grid,
    .showcase-grid{
        gap:45px;
    }

    .desktop{
        max-width:100%;
    }

    .dashboard-placeholder,
    .hero-image,
    .crm-hero .dashboard-placeholder{
        height:auto;
        min-height:420px;
    }

    .panel-window,
    .company-window,
    .cta-box{
        padding:30px;
    }

    .footer-grid{
        gap:35px;
    }
}

/* =========================================================
   MOBILE NAVIGATION
   ========================================================= */
@media (max-width: 900px){

    :root{
        --mobile-gutter:18px;
    }

    .container{
        padding-left:var(--mobile-gutter);
        padding-right:var(--mobile-gutter);
    }

    header{
        padding:11px 0;
    }

    header nav{
        min-height:46px;
    }

    .logo{
        font-size:18px;
    }

    .logo-mark{
        width:32px;
        height:32px;
        color:rgb(139, 30, 63,.92);
        background:black;
    }

    .logo-img{
        height:30px;
    }

    .nav-links{
        position:fixed;
        top:68px;
        right:14px;
        left:14px;
        width:auto;
        max-height:calc(100vh - 84px);
        overflow-y:auto;
        overflow-x:hidden;

        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:0;

        padding:10px;
        border-radius:18px;
        background:rgba(10,17,32,.98);
        border:1px solid rgba(255,255,255,.08);
        box-shadow:0 25px 70px rgba(0,0,0,.35);

        opacity:0;
        visibility:hidden;
        pointer-events:none;
        transform:translateY(-10px);
        transition:.25s ease;
        z-index:1100;
    }

    .nav-links.open{
        opacity:1;
        visibility:visible;
        pointer-events:auto;
        transform:translateY(0);
    }

    .nav-links > li{
        width:100%;
    }

    .nav-links > li > a{
        min-height:48px;
        width:100%;
        padding:11px 14px;
        border-radius:12px;
        color:#E9EDF7;
        justify-content:space-between;
    }

    .nav-links > li > a:hover{
        background:rgba(255,255,255,.06);
        color:#8B1E3F;
    }

    .nav-cta{
        margin-right:auto;
    }

    .nav-cta .btn{
        padding:10px 15px;
        font-size:13px;
    }

    .nav-cta .login,
    .nav-cta .logout{
        display:none;
    }

    .burger{
        display:flex;
        width:44px;
        height:44px;
        align-items:center;
        justify-content:center;
        color:var(--text-dark,#0F1626);
        background:transparent;
        border:1px solid #E4E8F0;
        border-radius:12px;
        z-index:1200;
    }

    header.scrolled .burger{
        color:#fff;
        border-color:rgba(255,255,255,.18);
    }

    /* Mobile dropdowns are opened by JS instead of hover */
    .dropdown > .dropdown-menu{
        position:static;
        width:100%;
        min-width:0;
        max-height:0;
        overflow:hidden;
        opacity:1;
        visibility:visible;
        transform:none;
        padding:0;
        margin:0;
        background:rgba(255,255,255,.04);
        border:0;
        border-radius:12px;
        box-shadow:none;
        transition:max-height .3s ease, padding .3s ease;
    }

    .dropdown.open > .dropdown-menu{
        max-height:900px;
        padding:5px;
        margin-bottom:5px;
    }

    .dropdown > .dropdown-menu a{
        color:#E9EDF7;
        border-radius:10px;
        padding:12px 10px;
    }

    .dropdown > .dropdown-menu a:hover{
        background:rgba(139,30,63,.08);
    }

    .dropdown > .dropdown-menu .menu-item{
        display:flex;
        align-items:center;
        gap:10px;
    }

    .menu-item::after{
        display:none;
    }

    .menu-item h4{
        color:#fff;
    }

    .menu-item p{
        color:#9AA5BE;
    }

    /* Hero sections */
    .hero,
    .about-hero,
    .contact-hero{
        padding:125px 0 70px;
    }

    .crm-hero{
        min-height:auto;
        padding:125px 0 75px;
    }

    .hero-grid,
    .crm-hero-grid,
    .about-grid,
    .story-grid,
    .contact-grid,
    .erp-grid,
    .benefits-grid,
    .support-grid,
    .help-grid,
    .faq-grid,
    .analysis-grid,
    .bpm-grid,
    .consulting-grid,
    .consulting-info,
    .consulting-services-grid,
    .automation-grid,
    .workflow-grid,
    .tools-grid,
    .showcase-grid{
        grid-template-columns:1fr !important;
        gap:40px;
    }

    .hero-content,
    .crm-content,
    .app-content,
    .benefits-content,
    .story-content{
        text-align:center;
    }

    .hero p.lead{
        margin-left:auto;
        margin-right:auto;
    }

    .hero-buttons,
    .hero-actions,
    .help-buttons,
    .cta-buttons{
        justify-content:center;
        flex-wrap:wrap;
    }

    .hero-image,
    .dashboard-placeholder,
    .desktop-wrapper,
    .company-window,
    .panel-window{
        width:100%;
    }

    .dashboard-placeholder{
        min-height:340px;
    }

    /* General grids */
    .features-grid,
    .feature-grid,
    .benefits-cards,
    .why-cards,
    .service-cards,
    .process-grid,
    .module-grid,
    .areas-grid,
    .advantages-grid,
    .values-grid,
    .stats-grid,
    .stages{
        grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    }

    .tool-list,
    .workflow-features{
        grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    }

    .feature-list{
        grid-template-columns:1fr 1fr;
    }

    /* Keep sections comfortable on mobile */
    .crm-app,
    .crm-features,
    .about-story,
    .mission-section,
    .faq-section,
    .support-cta{
        padding-top:80px;
        padding-bottom:80px;
    }

    .section-title{
        margin-bottom:45px;
    }

    .section-title h2,
    .app-content h2,
    .story-content h2,
    .benefits-content h2,
    .erp-cta h2,
    .cta-box h2{
        line-height:1.5;
    }

    .timeline-item{
        gap:14px;
        margin-bottom:35px;
    }

    .timeline-item .content{
        padding:18px;
    }

    .story-timeline{
        padding-right:24px;
    }

    .mission-card,
    .cta-box,
    .panel-window,
    .company-window{
        padding:24px;
    }

    .chat-wrapper{
        grid-template-columns:1fr !important;
    }

    .chat-box{
        width:100%;
    }

    .chat-body{
        min-height:240px;
    }

    .message{
        max-width:90%;
    }

    .cta-buttons .btn,
    .hero-buttons .btn,
    .hero-actions .btn{
        min-width:170px;
    }

    footer{
        padding-top:55px;
    }

    .footer-grid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:35px 25px;
    }

    .footer-brand{
        grid-column:1 / -1;
    }
}

/* =========================================================
   PHONE
   ========================================================= */
@media (max-width: 700px){

    body{
        font-size:14px;
    }

    .container{
        padding-left:15px;
        padding-right:15px;
    }

    .nav-cta{
        display:none;
    }

    .burger{
        margin-right:auto;
    }

    .nav-links{
        top:64px;
        right:10px;
        left:10px;
        max-height:calc(100vh - 75px);
    }

    .hero,
    .about-hero,
    .contact-hero{
        padding:105px 0 55px;
    }

    .crm-hero{
        padding:105px 0 60px;
    }

    .hero h1,
    .crm-content h1,
    .hero-content h1{
        font-size:clamp(31px,9vw,40px);
        line-height:1.5;
        margin-bottom:18px;
    }

    .hero p.lead,
    .hero-content p,
    .crm-content p,
    .app-content p,
    .benefits-content p{
        font-size:15px;
        line-height:2;
    }

    .hero-buttons,
    .hero-actions,
    .help-buttons,
    .cta-buttons{
        flex-direction:column;
        width:100%;
    }

    .hero-buttons .btn,
    .hero-actions .btn,
    .help-buttons .btn,
    .cta-buttons .btn,
    .btn-demo,
    .btn-contact,
    .btn-outline{
        width:100%;
        min-width:0;
        text-align:center;
    }

    .dashboard-placeholder{
        min-height:250px;
        font-size:19px;
        border-radius:18px;
    }

    .desktop{
        border-radius:14px;
    }

    .desktop-top{
        height:34px;
        padding:0 12px;
    }

    .desktop-top span{
        width:8px;
        height:8px;
    }

    .desktop-screen{
        font-size:18px;
    }

    .features-grid,
    .feature-grid,
    .benefits-cards,
    .why-cards,
    .service-cards,
    .process-grid,
    .module-grid,
    .areas-grid,
    .advantages-grid,
    .values-grid,
    .stats-grid,
    .stages,
    .tool-list,
    .workflow-features,
    .feature-list{
        grid-template-columns:1fr !important;
    }

    .stat-card,
    .feature-card,
    .benefit-card,
    .why-card,
    .service-card,
    .module-card,
    .area-card,
    .adv-card,
    .value-card{
        width:100%;
    }

    .app-content h2,
    .section-title h2,
    .story-content h2,
    .benefits-content h2,
    .erp-cta h2,
    .cta-box h2{
        font-size:30px;
    }

    .section-title{
        margin-bottom:35px;
    }

    .section-title p{
        font-size:15px;
    }

    .crm-app,
    .crm-features,
    .about-story,
    .mission-section,
    .faq-section,
    .support-cta{
        padding-top:65px;
        padding-bottom:65px;
    }

    .section-badge,
    .hero-badge,
    .eyebrow{
        font-size:12px;
        padding:8px 13px;
    }

    .company-window,
    .panel-window,
    .cta-box{
        padding:18px;
        border-radius:20px;
    }

    .company-card,
    .contact-item,
    .help-card{
        padding:14px;
        gap:12px;
    }

    .company-icon,
    .icon,
    .help-icon{
        width:48px;
        height:48px;
        min-width:48px;
        border-radius:13px;
        font-size:18px;
    }

    .company-card h3,
    .help-card-text h3{
        font-size:18px;
    }

    .company-card p,
    .contact-item p,
    .help-card-text p{
        font-size:13px;
    }

    .timeline-item{
        gap:10px;
    }

    .timeline-item .content{
        padding:15px;
        width:100%;
    }

    .circle{
        width:24px;
        height:24px;
        min-width:24px;
        border-width:3px;
    }

    .story-timeline{
        padding-right:17px;
    }

    .story-timeline::before{
        right:10px;
    }

    .faq-question{
        padding:19px 16px;
        font-size:15px;
        gap:15px;
        text-align:right;
    }

    .faq-answer p{
        padding:0 16px 20px;
        font-size:14px;
    }

    .search-input input{
        height:56px;
        padding-right:55px;
        font-size:14px;
    }

    .quick-actions{
        padding:0 15px 18px;
    }

    .chat-header{
        padding:16px 18px;
    }

    .chat-body{
        padding:18px;
        min-height:200px;
    }

    .chat-input input{
        min-width:0;
        padding:14px;
    }

    .chat-input button{
        width:55px;
    }

    .form-row{
        grid-template-columns:1fr !important;
    }

    .form-group input,
    .form-control,
    .form-group textarea,
    textarea{
        font-size:14px;
    }

    .cta-box p,
    .erp-cta p{
        font-size:15px;
        line-height:2;
    }

    .support-stats{
        gap:28px;
        margin-top:45px;
    }

    .stat-item h3{
        font-size:32px;
    }

    .footer-grid{
        grid-template-columns:1fr 1fr !important;
    }

    .footer-bottom{
        flex-direction:column;
        gap:8px;
        text-align:center;
        line-height:1.9;
    }

    /* Auth pages */
    .auth-page{
        min-height:100dvh;
        padding:18px 12px;
    }

    .auth-container{
        width:100%;
        border-radius:20px;
    }

    .auth-right{
        padding:30px 18px;
    }

    .auth-card h2{
        font-size:28px;
    }

    .subtitle{
        margin-bottom:28px;
    }
}

/* =========================================================
   VERY SMALL PHONES
   ========================================================= */
@media (max-width: 420px){

    .container{
        padding-left:12px;
        padding-right:12px;
    }

    .logo{
        font-size:16px;
    }

    .logo-mark{
        width:29px;
        height:29px;
        font-size:14px;
    }

    .logo-img{
        height:27px;
    }

    .burger{
        width:40px;
        height:40px;
    }

    .hero h1,
    .crm-content h1,
    .hero-content h1{
        font-size:29px;
    }

    .app-content h2,
    .section-title h2,
    .story-content h2,
    .benefits-content h2,
    .erp-cta h2,
    .cta-box h2{
        font-size:26px;
    }

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

    .footer-grid{
        grid-template-columns:1fr !important;
    }

    .footer-brand{
        grid-column:auto;
    }

    .panel-window,
    .company-window,
    .cta-box{
        padding:15px;
    }

    .auth-right{
        padding:24px 14px;
    }

    .auth-card h2{
        font-size:25px;
    }
}

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