:root{--dark:#071422;--green:#25b936;--green2:#6bea55;--muted:#6b7280;--line:#e8edf2;--bg:#f7faf8}*{box-sizing:border-box}body{margin:0;font-family:Inter,Arial,sans-serif;color:#142033;background:#fff}.topbar{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:18px 36px;color:#fff}.brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:#fff;letter-spacing:.5px}.brand .g{font-size:38px;font-weight:900;color:var(--green)}.brand small{display:block;font-size:12px;letter-spacing:4px}.topbar nav{display:flex;gap:28px}.topbar nav a{color:#fff;text-decoration:none;font-weight:700;font-size:14px}.actions{display:flex;gap:10px}.btn{border:1px solid #d3dce5;border-radius:8px;padding:12px 20px;text-decoration:none;font-weight:800;color:#142033;display:inline-flex;align-items:center;justify-content:center;gap:8px;background:#fff}.btn.green{background:linear-gradient(135deg,#1fa72c,#31c944);color:#fff;border:0}.btn.ghost{background:rgba(7,20,34,.45);color:#fff;border-color:rgba(255,255,255,.35)}.btn.big{border-radius:40px;padding:14px 28px}.hero{position:relative;min-height:410px;padding:120px 6vw 80px;background:linear-gradient(90deg,rgba(4,14,25,.95),rgba(4,14,25,.58)),url('https://images.unsplash.com/photo-1565008576549-57569a49371d?q=80&w=1600&auto=format&fit=crop') center/cover;color:#fff}.hero h1{font-size:54px;line-height:1.05;margin:0 0 14px;max-width:720px}.hero h1 span{color:#63e34f}.hero p{font-size:22px;line-height:1.5;margin:0 0 24px}.steps{display:flex;gap:28px;flex-wrap:wrap}.step{display:flex;align-items:center;gap:10px;font-weight:800}.ico{width:46px;height:46px;border-radius:50%;background:var(--green);display:grid;place-items:center;color:#fff;font-size:22px}.today{position:absolute;right:7vw;bottom:50px;width:260px;background:rgba(4,14,25,.85);border:1px solid rgba(255,255,255,.25);border-radius:14px;padding:22px;text-align:center;box-shadow:0 20px 50px #0005}.today .num{font-size:50px;font-weight:900}.wrap{max-width:1180px;margin:0 auto;padding:0 22px}.request-box{position:relative;margin-top:-48px;background:#fff;border-radius:18px;padding:28px;box-shadow:0 22px 60px #07142222}.request-box h2{margin:0 0 22px}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.field label{display:block;font-size:13px;margin:0 0 8px;color:#182235}.field input,.field select,.field textarea{width:100%;border:1px solid var(--line);border-radius:8px;padding:14px 14px;background:#fff;font-size:14px}.span2{grid-column:span 2}.trust{display:flex;gap:26px;flex-wrap:wrap;margin-top:18px;color:#1f7d2a;background:#f0fbf1;padding:12px 16px;border-radius:10px;font-size:13px}.stats{margin:22px auto;background:#071422;color:#fff;border-radius:10px;display:grid;grid-template-columns:repeat(4,1fr);padding:22px;gap:20px}.stat{display:flex;align-items:center;gap:14px;border-right:1px solid #ffffff2c}.stat:last-child{border-right:0}.section{padding:8px 0 24px}.section-head{display:flex;align-items:center;justify-content:space-between;margin:22px 0}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px;box-shadow:0 8px 28px #07142208}.request-card small{color:var(--muted)}.request-card h3{font-size:17px}.green-text{color:#229d35}.category-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;text-align:center}.cat{padding:28px 12px}.cat .ico{margin:0 auto 12px;background:#e7f9e9;color:var(--green)}.company{padding:0;overflow:hidden}.company img{width:100%;height:130px;object-fit:cover}.company .p{padding:14px}.company h3{margin:0 0 6px}.company .row{display:flex;gap:10px}.why{background:#f4fbf4;border:1px solid #dceedd;border-radius:14px;padding:22px;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:24px 0}.footer{margin:32px auto 0;max-width:1180px;background:#071422;color:#fff;border-radius:10px;padding:24px;display:flex;justify-content:space-between;align-items:center}.auth{min-height:100vh;background:linear-gradient(135deg,#071422,#11301d);display:grid;place-items:center;padding:20px}.authbox{background:#fff;border-radius:18px;padding:28px;max-width:460px;width:100%;box-shadow:0 25px 80px #0005}.dash{display:flex;min-height:100vh;background:#f5f7fb}.side{width:250px;background:#071422;color:#fff;padding:24px}.side a{display:block;color:#fff;text-decoration:none;padding:12px;border-radius:8px}.side a:hover{background:#ffffff15}.main{flex:1;padding:28px}.table{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden}.table th,.table td{padding:14px;border-bottom:1px solid #edf1f5;text-align:left}.badge{background:#e7f9e9;color:#15942a;padding:6px 10px;border-radius:20px;font-size:12px;font-weight:800}@media(max-width:900px){.topbar{position:relative;background:#071422;flex-wrap:wrap}.topbar nav{display:none}.hero h1{font-size:38px}.today{position:static;margin-top:24px}.grid,.cards,.stats,.why{grid-template-columns:1fr}.category-grid{grid-template-columns:repeat(2,1fr)}.span2{grid-column:auto}.footer{border-radius:0;flex-direction:column;text-align:center}.stat{border-right:0}}
.ok{background:#ecfdf5;border:1px solid #bbf7d0;color:#166534;padding:10px 14px;border-radius:12px}.profile-head{display:flex;gap:24px;align-items:center}.profile-head img{width:180px;height:130px;object-fit:cover;border-radius:20px}.field textarea{width:100%;border:1px solid #dbe3ea;border-radius:12px;padding:12px;font-family:inherit}.main .cards{align-items:stretch}.side a{display:block;margin:8px 0}

.lang-switch{display:flex;gap:6px;align-items:center}.lang{font-size:12px;padding:7px 8px;border-radius:999px;background:#eef5ef;color:#16351d;text-decoration:none}.lang.active{background:#1fa463;color:#fff}.small-muted{color:#6b7280;font-size:13px}

/* =========================================================
   COMPANY PANEL - PROFESSIONAL MOBILE FULL PAGE FIX
   Safe CSS-only patch. Targets company dashboard/panel pages.
   ========================================================= */
@media (max-width: 768px){
  html{
    -webkit-text-size-adjust:100% !important;
    text-size-adjust:100% !important;
  }

  body:not(.auth){
    width:100% !important;
    min-width:0 !important;
    overflow-x:hidden !important;
    background:#f5f7fb !important;
    font-size:16px !important;
    line-height:1.55 !important;
  }

  /* Company panel layouts used across different phase files */
  body:not(.auth) .dash,
  body:not(.auth) .panel,
  body:not(.auth) .admin-layout{
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    min-height:100vh !important;
    background:#f5f7fb !important;
  }

  body:not(.auth) .side,
  body:not(.auth) .dash > aside,
  body:not(.auth) .panel > aside,
  body:not(.auth) .admin-layout > aside{
    width:100% !important;
    max-width:none !important;
    min-height:auto !important;
    padding:16px 14px !important;
    background:#071422 !important;
    border-radius:0 0 20px 20px !important;
    box-shadow:0 12px 28px rgba(7,20,34,.18) !important;
    position:relative !important;
    left:auto !important;
    top:auto !important;
    overflow:visible !important;
  }

  body:not(.auth) .side h2,
  body:not(.auth) .panel > aside h2,
  body:not(.auth) .admin-layout > aside h2{
    font-size:21px !important;
    line-height:1.25 !important;
    margin:0 0 12px !important;
    color:#fff !important;
  }

  body:not(.auth) .side a,
  body:not(.auth) .panel > aside a,
  body:not(.auth) .admin-layout > aside a{
    display:block !important;
    width:100% !important;
    margin:7px 0 !important;
    padding:13px 14px !important;
    border-radius:12px !important;
    background:rgba(255,255,255,.08) !important;
    color:#fff !important;
    font-size:16px !important;
    line-height:1.25 !important;
    font-weight:800 !important;
    text-decoration:none !important;
  }

  body:not(.auth) .main,
  body:not(.auth) .panel > section,
  body:not(.auth) .admin-layout > main{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    padding:18px 14px 32px !important;
    margin:0 !important;
    overflow:visible !important;
  }

  body:not(.auth) h1{
    font-size:26px !important;
    line-height:1.18 !important;
    margin:0 0 12px !important;
    letter-spacing:-.3px !important;
  }

  body:not(.auth) h2{
    font-size:22px !important;
    line-height:1.25 !important;
    margin:18px 0 12px !important;
  }

  body:not(.auth) h3{
    font-size:19px !important;
    line-height:1.3 !important;
  }

  body:not(.auth) p,
  body:not(.auth) small,
  body:not(.auth) td,
  body:not(.auth) th,
  body:not(.auth) label{
    font-size:15.5px !important;
    line-height:1.45 !important;
  }

  body:not(.auth) .request-box,
  body:not(.auth) .card,
  body:not(.auth) .cards .card{
    width:100% !important;
    max-width:100% !important;
    margin:0 0 14px !important;
    padding:18px !important;
    border-radius:18px !important;
    box-shadow:0 10px 26px rgba(7,20,34,.08) !important;
  }

  body:not(.auth) .grid,
  body:not(.auth) .cards{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:14px !important;
    width:100% !important;
  }

  body:not(.auth) .span2{
    grid-column:auto !important;
  }

  body:not(.auth) .field{
    margin-bottom:13px !important;
  }

  body:not(.auth) .field label,
  body:not(.auth) form label{
    display:block !important;
    margin:0 0 7px !important;
    color:#182235 !important;
    font-weight:800 !important;
  }

  body:not(.auth) input,
  body:not(.auth) select,
  body:not(.auth) textarea{
    width:100% !important;
    max-width:100% !important;
    min-height:48px !important;
    padding:13px 14px !important;
    border-radius:12px !important;
    border:1px solid #dbe3ea !important;
    background:#fff !important;
    font-size:16px !important;
    line-height:1.35 !important;
  }

  body:not(.auth) textarea{
    min-height:118px !important;
  }

  body:not(.auth) .btn,
  body:not(.auth) button,
  body:not(.auth) input[type="submit"]{
    min-height:48px !important;
    padding:13px 16px !important;
    border-radius:13px !important;
    font-size:15.5px !important;
    line-height:1.25 !important;
    font-weight:900 !important;
    white-space:normal !important;
    text-align:center !important;
  }

  /* Keep tables readable without destroying the page design */
  body:not(.auth) .main > table,
  body:not(.auth) .main .table,
  body:not(.auth) .panel table,
  body:not(.auth) .admin-layout table{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch !important;
    border-radius:16px !important;
    background:#fff !important;
    box-shadow:0 10px 24px rgba(7,20,34,.06) !important;
  }

  body:not(.auth) table tbody,
  body:not(.auth) table tr{
    width:100% !important;
  }

  body:not(.auth) table th,
  body:not(.auth) table td{
    padding:13px 12px !important;
    min-width:130px !important;
    vertical-align:top !important;
  }

  body:not(.auth) table td:first-child,
  body:not(.auth) table th:first-child{
    min-width:155px !important;
  }

  body:not(.auth) table .btn,
  body:not(.auth) td .btn{
    width:100% !important;
    margin:4px 0 !important;
  }

  body:not(.auth) .badge,
  body:not(.auth) .ok{
    display:block !important;
    width:100% !important;
    padding:12px 14px !important;
    border-radius:14px !important;
    font-size:15px !important;
  }
}

@media (max-width: 420px){
  body:not(.auth) .main,
  body:not(.auth) .panel > section,
  body:not(.auth) .admin-layout > main{
    padding-left:12px !important;
    padding-right:12px !important;
  }
  body:not(.auth) h1{font-size:24px !important;}
  body:not(.auth) .side a,
  body:not(.auth) .panel > aside a,
  body:not(.auth) .admin-layout > aside a{font-size:15.5px !important;}
}

/* =========================================================
   COMPANY PANEL MOBILE COMPACT BALANCE FIX
   Purpose: reduce previous oversized mobile panel styles while keeping readability.
   Safe: CSS only. No PHP, no DB, no config.
   ========================================================= */
@media (max-width: 768px){
  body:not(.auth){
    font-size:14px !important;
    line-height:1.42 !important;
  }

  body:not(.auth) .side,
  body:not(.auth) .dash > aside,
  body:not(.auth) .panel > aside,
  body:not(.auth) .admin-layout > aside{
    padding:12px 11px !important;
    border-radius:0 0 15px 15px !important;
    box-shadow:0 8px 18px rgba(7,20,34,.14) !important;
  }

  body:not(.auth) .side h2,
  body:not(.auth) .panel > aside h2,
  body:not(.auth) .admin-layout > aside h2{
    font-size:18px !important;
    margin:0 0 8px !important;
  }

  body:not(.auth) .side a,
  body:not(.auth) .panel > aside a,
  body:not(.auth) .admin-layout > aside a{
    margin:5px 0 !important;
    padding:10px 11px !important;
    border-radius:10px !important;
    font-size:14px !important;
    line-height:1.22 !important;
    font-weight:700 !important;
  }

  body:not(.auth) .main,
  body:not(.auth) .panel > section,
  body:not(.auth) .admin-layout > main{
    padding:13px 10px 24px !important;
  }

  body:not(.auth) h1{
    font-size:21px !important;
    line-height:1.2 !important;
    margin:0 0 9px !important;
  }

  body:not(.auth) h2{
    font-size:18px !important;
    margin:14px 0 9px !important;
  }

  body:not(.auth) h3{
    font-size:16.5px !important;
  }

  body:not(.auth) p,
  body:not(.auth) small,
  body:not(.auth) td,
  body:not(.auth) th,
  body:not(.auth) label{
    font-size:14px !important;
    line-height:1.38 !important;
  }

  body:not(.auth) .request-box,
  body:not(.auth) .card,
  body:not(.auth) .cards .card{
    margin:0 0 10px !important;
    padding:13px !important;
    border-radius:14px !important;
    box-shadow:0 7px 18px rgba(7,20,34,.07) !important;
  }

  body:not(.auth) .grid,
  body:not(.auth) .cards{
    gap:10px !important;
  }

  body:not(.auth) .field{
    margin-bottom:10px !important;
  }

  body:not(.auth) .field label,
  body:not(.auth) form label{
    margin:0 0 5px !important;
    font-weight:700 !important;
  }

  body:not(.auth) input,
  body:not(.auth) select,
  body:not(.auth) textarea{
    min-height:42px !important;
    padding:10px 11px !important;
    border-radius:10px !important;
    font-size:14.5px !important;
    line-height:1.28 !important;
  }

  body:not(.auth) textarea{
    min-height:96px !important;
  }

  body:not(.auth) .btn,
  body:not(.auth) button,
  body:not(.auth) input[type="submit"]{
    min-height:42px !important;
    padding:10px 12px !important;
    border-radius:10px !important;
    font-size:14px !important;
    line-height:1.2 !important;
    font-weight:800 !important;
  }

  body:not(.auth) .main > table,
  body:not(.auth) .main .table,
  body:not(.auth) .panel table,
  body:not(.auth) .admin-layout table{
    border-radius:12px !important;
    box-shadow:0 7px 16px rgba(7,20,34,.05) !important;
  }

  body:not(.auth) table th,
  body:not(.auth) table td{
    padding:10px 9px !important;
    min-width:112px !important;
  }

  body:not(.auth) table td:first-child,
  body:not(.auth) table th:first-child{
    min-width:125px !important;
  }

  body:not(.auth) .badge,
  body:not(.auth) .ok{
    padding:9px 11px !important;
    border-radius:11px !important;
    font-size:13.5px !important;
  }
}

@media (max-width:420px){
  body:not(.auth) .main,
  body:not(.auth) .panel > section,
  body:not(.auth) .admin-layout > main{
    padding-left:9px !important;
    padding-right:9px !important;
  }
  body:not(.auth) h1{font-size:20px !important;}
  body:not(.auth) .side a,
  body:not(.auth) .panel > aside a,
  body:not(.auth) .admin-layout > aside a{font-size:13.8px !important;}
}
.seo-btn{
display:inline-block;
background:linear-gradient(135deg,#0f172a,#d4af37);
color:#fff;
padding:14px 28px;
border-radius:50px;
font-weight:700;
text-decoration:none;
margin-top:20px;
}
.seo-quick-link{
  max-width:1180px;
  margin:-25px auto 35px;
  padding:0 18px;
  position:relative;
  z-index:5;
}
.seo-quick-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:16px 20px;
  border-radius:22px;
  background:rgba(15,23,42,.88);
  border:1px solid rgba(212,175,55,.35);
  box-shadow:0 18px 45px rgba(0,0,0,.18);
  color:#fff;
}
.seo-quick-inner span{
  font-size:15px;
  font-weight:700;
}
.seo-quick-inner a{
  white-space:nowrap;
  background:linear-gradient(135deg,#d4af37,#f7d774);
  color:#111827;
  padding:11px 18px;
  border-radius:999px;
  font-weight:900;
  text-decoration:none;
}
@media(max-width:700px){
  .seo-quick-link{
    margin:15px auto 25px;
  }
  .seo-quick-inner{
    flex-direction:column;
    text-align:center;
  }
}