/* responsive.css — Breakpoints & mobile layouts */

/* ── Tablet ── */
@media(max-width:1024px){
  :root{--section-gap:80px}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
  .hero-float-card{display:none}
}

/* ── Mobile ── */
@media(max-width:768px){
  section{padding:60px 0}
  h1{font-size:2.3rem}
  h2{font-size:1.8rem}

  /* Force hide desktop nav — maximum specificity */
  .nav-cta,
  .navbar .nav-cta,
  #navbar .nav-cta { display: none !important; visibility: hidden !important; width: 0 !important; overflow: hidden !important; }
  .nav-links,
  .navbar .nav-links,
  #navbar .nav-links { display: none !important; }
  .hamburger,
  #hamburger { display: flex !important; margin-left: auto; }

  /* Grids stack */
  .grid-2,.grid-3,.grid-4,.grid-6{grid-template-columns:1fr}
  .section-header{margin-bottom:44px}
  .footer-grid{grid-template-columns:1fr}
  .hero-cta{flex-direction:column;align-items:center}
  .about-split{flex-direction:column}
  .why-grid{grid-template-columns:repeat(2,1fr)}
  .contact-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;text-align:center}

  /* Floating buttons */
  .back-top { bottom: 15px; right: 15px; width: 44px; height: 44px; z-index: 1001; }
  .whatsapp-fab { bottom: 75px; right: 15px; width: 44px; height: 44px; font-size: 1.4rem; z-index: 1001; }

  /* ERP section */
  .erp-layout{flex-direction:column !important}
  .erp-features-grid{grid-template-columns:1fr !important;flex:none !important;width:100% !important}
  .erp-visual{flex:none !important;width:100% !important}
  .feature-block{max-width:100% !important;overflow:hidden}

  /* Services "What We Do" section */
  .wwd-service-row{grid-template-columns:1fr !important;gap:30px !important}
  .wwd-service-row.reverse{direction:ltr !important}
  .wwd-features-list{grid-template-columns:1fr !important}

  /* Hero */
  #hero { padding-bottom: 120px !important; }
  .hero-inner { padding-bottom: 20px; }

  /* Prevent overflow */
  .container{max-width:100vw;overflow-x:hidden}
}

@media(max-width:480px){
  .why-grid{grid-template-columns:1fr}
  .tech-grid{grid-template-columns:repeat(2,1fr)}
  .industries-grid{grid-template-columns:repeat(2,1fr)}
  .stat-num{font-size:2.2rem}
  .btn{padding:12px 24px;font-size:.9rem}
  /* Reposition floating buttons to prevent overlap */
  .theme-toggle { bottom: 130px; right: 15px; }
  .back-top { bottom: 15px; right: 15px; }
  .whatsapp-fab { bottom: 73px; right: 15px; }
  /* Fix hero stats wrapping */
  .hero-stats { gap: 20px; }
  .h-stat .num { font-size: 1.4rem; }
  /* Fix ERP on very small screens */
  .erp-features-grid { grid-template-columns: 1fr !important; }
  .erp-visual { display: none; }
  /* Prevent any element from overflowing */
  .feature-block, .product-card, .why-card { max-width: 100%; }
  .testimonial-card { min-width: calc(100vw - 48px); max-width: calc(100vw - 48px); }
}

/* ── Hero section ── */
#hero{min-height:100vh;display:flex;align-items:center;padding-top:90px;position:relative}
.hero-inner{position:relative;z-index:10;max-width:780px}
.hero-tag{display:inline-flex;align-items:center;gap:8px;font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--orange);background:rgba(255,107,0,.1);border:1px solid rgba(255,107,0,.22);padding:7px 18px;border-radius:99px;margin-bottom:28px}
.hero-tag::before{content:'🔒';font-size:.85rem}
.hero-h1{margin-bottom:24px;line-height:1.08}
.typing-line{display:block;color:var(--orange)}
.hero-sub{font-size:1.15rem;color:var(--text-2);max-width:560px;margin-bottom:40px;line-height:1.7}
.hero-cta{display:flex;align-items:center;flex-wrap:wrap;gap:16px;margin-bottom:60px}
.hero-stats{display:flex;gap:40px;flex-wrap:wrap}
.h-stat{text-align:left}
.h-stat .num{font-family:var(--font-h);font-size:1.8rem;font-weight:700;color:var(--text)}
.h-stat .lbl{font-size:.8rem;color:var(--text-3);font-weight:500}
#hero-canvas{position:absolute;inset:0;z-index:1;pointer-events:none}

/* ── About ── */
.about-split{display:flex;gap:60px;align-items:center}
.about-left{flex:1}
.about-right{flex:1;position:relative}
.about-stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:40px}
@media(max-width:480px){ .about-stats-grid{grid-template-columns:1fr} }
.about-stat-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-md);padding:24px;text-align:center;transition:all .3s}
.about-stat-card:hover{border-color:var(--border-o)}
.about-timeline{margin-top:32px;display:flex;flex-direction:column;gap:16px}
.timeline-item{display:flex;gap:16px;align-items:flex-start}
.t-line{display:flex;flex-direction:column;align-items:center;gap:0}
.t-dot{width:12px;height:12px;border-radius:50%;background:var(--orange);flex-shrink:0;box-shadow:0 0 12px rgba(255,107,0,.5)}
.t-bar{width:2px;flex:1;background:linear-gradient(180deg,var(--orange),transparent);min-height:30px}
.t-content h5{font-size:.95rem;font-weight:600;margin-bottom:4px}
.t-content p{font-size:.85rem;color:var(--text-2)}

/* ── Products ── */
#products .products-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
@media(max-width:900px){#products .products-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){#products .products-grid{grid-template-columns:1fr}}

/* ── ERP ── */
.erp-layout{display:flex;gap:50px;align-items:flex-start}
.erp-features-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;flex:1}
.erp-visual{flex:0 0 420px;position:sticky;top:100px}
@media(max-width:1100px){.erp-visual{flex:0 0 340px}}

/* ── Industries ── */
.industries-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
@media(max-width:1024px){.industries-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:540px){.industries-grid{grid-template-columns:repeat(2,1fr)}}

/* ── Why choose ── */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:900px){.why-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.why-grid{grid-template-columns:1fr}}

/* ── Tech ── */
.tech-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:900px){.tech-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:540px){.tech-grid{grid-template-columns:repeat(2,1fr)}}

/* ── Contact ── */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:start}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr}}

/* ── Section BG variants ── */
.bg-alt{background:var(--bg-2)}
.bg-dark{background:var(--bg)}

/* ── Testimonial layout ── */
.testimonial-wrapper{overflow:hidden;position:relative}
.testimonial-track{display:flex;gap:24px;will-change:transform}
.testimonial-card{min-width:380px}
@media(max-width:480px){.testimonial-card{min-width:280px; padding: 24px;} .testimonial-card blockquote { font-size: 0.9rem; }}

/* ── Progress items ── */
.progress-item{margin-bottom:22px}
.progress-item .p-label{display:flex;justify-content:space-between;font-size:.9rem;font-weight:600;margin-bottom:8px;color:var(--text)}

/* ── Map placeholder ── */
.map-placeholder{width:100%;height:260px;border-radius:var(--r-lg);background:rgba(255,255,255,.03);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;overflow:hidden;position:relative}
.map-placeholder iframe{width:100%;height:100%;border:none;border-radius:var(--r-lg);filter:invert(90%) hue-rotate(180deg) saturate(0.5)}

/* ── Scroll indicator ── */
.scroll-indicator{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;z-index:10;animation:float 3s ease-in-out infinite}
@media(max-width:768px){ .scroll-indicator { display: none !important; } }
.scroll-indicator span{font-size:.75rem;color:var(--text-3);letter-spacing:.1em;text-transform:uppercase}
.scroll-mouse{width:24px;height:38px;border:2px solid rgba(255,255,255,.2);border-radius:12px;position:relative;display:flex;justify-content:center;padding-top:6px}
.scroll-mouse::after{content:'';width:4px;height:8px;background:var(--orange);border-radius:99px;animation:float 1.5s ease-in-out infinite}