/* ==================================================
TOCAFIT_7 — RESPONSIVE.CSS (SAFE REFACTOR / NO REGRESSION)
Cleaned structure, same behavior, no duplicate conflicts
================================================== */


/* ===============================================
1. LARGE LAPTOP / SMALL DESKTOP
=============================================== */

@media (max-width:1280px){

  .hero-grid,
  .split{
    grid-template-columns:1fr;
    gap:2rem;
  }

  .hero-copy,
  .hero-card{
    max-width:760px;
  }

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

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

  .section{
    padding:6rem 0;
  }
}


/* ===============================================
2. TABLET + MOBILE MAIN
=============================================== */

@media (max-width:768px){

  /* ---------- Background ---------- */

  body{
    background:
    radial-gradient(circle at 80% 12%, rgba(255,90,31,.10), transparent 28%),
    radial-gradient(circle at 14% 78%, rgba(242,193,78,.05), transparent 24%),
    linear-gradient(180deg,#060606,#0a0a0b 40%,#050505);
  }

  .dark{
    background:linear-gradient(180deg,#101114,#0b0b0d);
  }

  .site-footer{
    background:#070707;
    border-top:1px solid rgba(255,255,255,.06);
  }


  /* ---------- Navbar ---------- */

  .nav-wrap{
    min-height:72px;
  }

  .menu-toggle{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;

    width:46px;
    height:46px;
    border-radius:14px;

    background:rgba(255,255,255,.012);
    border:1px solid rgba(255,255,255,.08);

    transition:var(--speed);
  }

  .menu-toggle span{
    width:22px;
    height:2px;
    margin:2px 0;
    border-radius:2px;
    background:#fff;
  }

  .menu-toggle:active{
    transform:scale(.97);
  }

  .menu-toggle:focus-visible{
    outline:2px solid rgba(255,90,31,.65);
    outline-offset:2px;
  }


  /* ---------- Mobile Nav Panel ---------- */

  .nav{
    position:fixed;
    top:82px;
    left:1rem;
    right:1rem;

    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:.45rem;

    padding:1rem;
    border-radius:22px;

    background:
    linear-gradient(
      180deg,
      rgba(18,18,20,.92),
      rgba(10,10,11,.88)
    );

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);

    box-shadow:
      0 24px 60px rgba(0,0,0,.48),
      inset 0 1px 0 rgba(255,255,255,.05);

    z-index:1600;

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transform:translateY(-8px) scale(.98);

    transition:
      opacity .22s ease,
      transform .22s ease,
      visibility .22s ease;
  }

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

  .nav > a,
  .nav > button{
    width:100%;
    min-height:44px;

    display:flex;
    align-items:center;
    justify-content:flex-start;

    padding:0 1rem;
    border-radius:14px;

    color:#f4f4f5;
    border:1px solid transparent;

    transition:var(--speed);
  }

  .nav > a:hover,
  .nav > button:hover{
    background:rgba(255,255,255,.05);
    border-color:rgba(255,255,255,.05);
    transform:translateX(3px);
  }

  .nav > a:focus-visible,
  .nav > button:focus-visible{
    outline:2px solid rgba(255,90,31,.65);
    outline-offset:2px;
  }

  body.menu-open::after{
    content:"";
    position:fixed;
    inset:0;
    z-index:1400;

    background:rgba(0,0,0,.42);

    backdrop-filter:blur(1px);
    -webkit-backdrop-filter:blur(1px);
  }

  .lang-switch{
    width:100%;
    gap:.6rem;
    margin-top:.2rem;
  }

  .lang-switch button{
    flex:1;
  }


  /* ---------- Layout ---------- */

  .hero{
    padding:4.2rem 0 3rem;
  }

  .section{
    padding:3.4rem 0;
  }

  .section-head{
    margin-bottom:1.35rem;
  }

  .stats-grid,
  .footer-grid,
  .cta-flex{
    display:grid;
    grid-template-columns:1fr;
  }

  .stats-grid{
    gap:.8rem;
  }

  .card-grid{
    gap:.85rem;
  }

  .footer-grid{
    gap:1.35rem;
    text-align:center;
  }

  .footer-links{
    align-items:center;
    gap:.45rem;
  }

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

  .cta-flex{
    gap:1.15rem;
    text-align:center;
  }

  .cta-band{
    padding:3.2rem 0;
  }


  /* ---------- Typography ---------- */

  h1{
    font-size:clamp(2.5rem,10vw,3.3rem);
    line-height:.96;
  }

  h2{
    font-size:clamp(2rem,8vw,2.6rem);
    line-height:1;
  }

  h3{
    font-size:1.45rem;
    line-height:1.08;
  }

  .hero h1{
    max-width:8ch;
  }

  .hero-text{
    max-width:28ch;
    font-size:1.04rem;
    line-height:1.62;
    margin:.9rem 0 1.5rem;
    color:#d2d2d6;
  }

  p,
  .check-list p,
  .hero-proof{
    color:#d2d2d6;
  }

  .eyebrow{
    color:#ff6a1a;
  }


  /* ---------- Buttons ---------- */

  .hero-actions{
    gap:.75rem;
  }

  .btn{
    min-height:48px;
    padding:.82rem 1rem;
    font-size:.97rem;
  }


  /* ---------- Cards ---------- */

  .card,
  .stat,
  .slide,
  .hero-card,
  .modal-box{
    padding:1.15rem;
    border-radius:22px;

    background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.07),
      rgba(255,255,255,.028)
    );

    border:1px solid rgba(255,255,255,.09);

    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);

    box-shadow:
      0 18px 42px rgba(0,0,0,.38),
      inset 0 1px 0 rgba(255,255,255,.06);
  }

  .stat{
    padding:1.35rem 1rem;
  }

  .slide{
    min-height:auto;
  }


  /* ---------- Modal ---------- */

  .modal{
    align-items:flex-start;
    padding:.65rem;
    overflow-y:auto;
  }

  .modal-box{
    width:100%;
    max-width:none;

    margin-top:.75rem;

    max-height:calc(100vh - 1.5rem);
    overflow-y:auto;
  }

  .modal-box h2,
  .modal-box h3{
    font-size:2.2rem;
    line-height:.92;
    margin-bottom:.2rem;
  }

  .modal-box p{
    font-size:1rem;
    line-height:1.35;
  }

  .modal-box input,
  .modal-box select{
    min-height:48px;
    padding:.82rem .95rem;
    font-size:1rem;
    border-radius:18px;
  }

  .modal-box .btn{
    min-height:50px;
    padding:.85rem 1rem;
    font-size:1rem;
  }

  .close-modal{
    font-size:2rem;
    margin-top:-.15rem;
  }

  #assessmentForm,
  #contactForm{
    gap:.7rem;
    margin-top:.8rem;
  }

  #result{
    width:100%;
    display:block;
  }

  .result-card{
    width:100%;
    display:block;

    margin-top:.8rem;
    padding:1rem;

    border-radius:20px;

    min-height:auto;
    height:auto;

    overflow:visible;
  }

  .result-card p,
  .result-card h3{
    max-width:100%;
    word-break:break-word;
  }

  .result-btn{
    display:flex;
    width:100%;
    justify-content:center;
    align-items:center;

    margin-top:.9rem;
    box-shadow:0 8px 18px rgba(255,90,31,.16);
  }


  /* ---------- Floating WA ---------- */

  .wa-float{
    right:1rem;
    bottom:1rem;
    width:56px;
    height:56px;
  }

  .wa-float svg{
    width:26px;
    height:26px;
  }
}


/* ===============================================
3. LARGE MOBILE
=============================================== */

@media (max-width:640px){

  .container{
    width:min(100% - 1.2rem,1200px);
  }

  .card-grid{
    grid-template-columns:1fr;
  }

  .hero-actions{
    flex-direction:column;
    gap:.8rem;
  }

  .hero-actions .btn,
  .hero-actions a{
    width:100%;
    justify-content:center;
    text-align:center;
  }

  .hero-proof{
    flex-direction:column;
    gap:.35rem;
    margin-top:1rem;
  }
}


/* ===============================================
4. SMALL MOBILE
=============================================== */

@media (max-width:480px){

  .container{
    width:min(100% - 1rem,1200px);
  }

  h1{ font-size:2.35rem; }
  h2{ font-size:1.95rem; }
  h3{ font-size:1.45rem; }

  .hero h1{
    max-width:7ch;
  }

  .hero-text{
    font-size:1rem;
  }

  .section{
    padding:3rem 0;
  }

  .cta-band{
    padding:2.8rem 0;
  }

  .btn{
    min-height:46px;
    font-size:.95rem;
    padding:.95rem 1rem;
  }

  input,
  .modal-box select{
    min-height:52px;
    padding:.9rem;
  }

  .card,
  .stat{
    padding:1rem;
  }

  .nav{
    left:.8rem;
    right:.8rem;
    top:82px;

    padding:.85rem;
    border-radius:20px;
  }

  .wa-float{
    width:54px;
    height:54px;
    right:.8rem;
    bottom:.8rem;
  }

  .wa-float svg{
    width:24px;
    height:24px;
  }
}