:root{
  --bg:#07111f;
  --bg2:#0c1b31;
  --surface:rgba(10,24,44,0.78);
  --surface-strong:#0f2039;
  --surface-soft:rgba(255,255,255,0.04);
  --line:rgba(255,255,255,0.10);
  --line-strong:rgba(112,166,255,0.22);
  --text:#e9f1ff;
  --muted:#9fb0cf;
  --blue:#4f8cff;
  --blue-2:#8ec5ff;
  --red:#ff4d57;
  --white:#ffffff;
  --shadow:0 18px 50px rgba(0,0,0,0.34);
  --radius:22px;
}
html{scroll-behavior:smooth;background:var(--bg);}
body.hr-tech{
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  background:
    radial-gradient(circle at top left, rgba(79,140,255,0.18), transparent 28%),
    radial-gradient(circle at top right, rgba(255,77,87,0.15), transparent 26%),
    linear-gradient(180deg, #07111f 0%, #091523 45%, #07111f 100%) !important;
  color:var(--text) !important;
  min-height:100vh;
}
body.hr-tech::before{
  content:"";
  position:fixed;
  inset:0;
  background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.34), transparent 85%);
  pointer-events:none;
  z-index:0;
}
body.hr-tech > *{position:relative;z-index:1;}
a{color:var(--blue-2);}
header{
  background:rgba(7,17,31,0.74) !important;
  border-bottom:1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(18px);
  box-shadow:none !important;
}
header nav a, header .lang-toggle{font-weight:700 !important;}
header nav a{color:#dbe8ff !important;opacity:.88;}
header nav a:hover{color:#fff !important;opacity:1;}
header img{filter: drop-shadow(0 10px 24px rgba(0,0,0,.28));}
.lang-toggle{
  background:linear-gradient(135deg, rgba(79,140,255,.22), rgba(79,140,255,.08)) !important;
  border:1px solid rgba(143,197,255,.25) !important;
  color:#eff6ff !important;
  border-radius:999px !important;
  box-shadow:none !important;
}
.hero{
  background:transparent !important;
  padding:8rem 2rem 5rem !important;
  max-width:1280px;
  margin:0 auto;
}
.hero h1{
  color:#fff !important;
  font-size:clamp(2.5rem,6vw,4.9rem) !important;
  line-height:1.02;
  letter-spacing:-0.03em;
  max-width:900px;
  margin:0 auto 1rem !important;
}
.hero p{
  color:var(--muted) !important;
  max-width:760px;
  margin:0 auto 2rem !important;
  font-size:1.08rem;
  line-height:1.7;
}
.hero::after{ content:none; }
.hero-tagline{
  display:inline-flex;
  margin-top:1rem;
  border:1px solid rgba(142,197,255,0.18);
  background:rgba(255,255,255,0.04);
  color:#dce8ff;
  padding:.7rem 1rem;
  border-radius:999px;
  font-size:.88rem;
  letter-spacing:0;
  white-space:nowrap;
}
.btn,.btn-secondary,.tracking-btn,.contact-btn,.quote-actions button,.portal-account-controls button,.btn-link{
  border-radius:14px !important;
}
.btn, #quote-submit, #quote-calc, .tracking-btn, .contact-btn{
  background:linear-gradient(135deg, var(--red), #ff6b61) !important;
  color:#fff !important;
  border:none !important;
  box-shadow:0 14px 30px rgba(255,77,87,.22);
}
.btn-secondary{
  background:rgba(255,255,255,.05) !important;
  color:#f2f6ff !important;
  border:1px solid rgba(255,255,255,.12) !important;
}
.btn:hover,#quote-submit:hover,#quote-calc:hover,.tracking-btn:hover,.contact-btn:hover{transform:translateY(-1px);filter:brightness(1.04);} 
section{max-width:1180px !important;padding:1.4rem 2rem 4.25rem !important;}
section h2, .portal-header h2, .portal-settings-form h3, .portal-hero-title, .portal-auth h2, .container h1{
  color:#fff !important;
  letter-spacing:-.02em;
}
#about p, .faq-item p, .tracking-card p, footer p, .portal-card-subtitle, .portal-hero-subtitle, .status, p{
  color:var(--muted) !important;
}
.card,.faq-item,.tracking-card,.contact-form,.tracking-form,.portal-auth .card,.portal-dashboard-grid>.card,.portal-profile-card,.portal-settings-card,.shipment-card,.container .card{
  background:linear-gradient(180deg, rgba(18,33,58,.88), rgba(10,22,40,.88)) !important;
  border:1px solid var(--line) !important;
  box-shadow:var(--shadow) !important;
  backdrop-filter: blur(14px);
  border-radius:var(--radius) !important;
}
.services{gap:1.25rem !important;}
.card h3, .faq-question, .tracking-card h3, .portal-card-title, label{color:#f3f7ff !important;}
.services .card{
  text-align:left !important;
  position:relative;
  overflow:hidden;
}
.services .card::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:3px;
  background:linear-gradient(90deg,var(--blue),var(--red));
}
.services .card p{color:var(--muted) !important;line-height:1.65;}
#about .centered-image, .hero .centered-image{
  width:min(100%,540px) !important;
  max-width:540px !important;
  filter: drop-shadow(0 22px 40px rgba(0,0,0,.32));
}
.contact-form,.tracking-form{max-width:780px !important;}
.contact-form input,.contact-form textarea,.tracking-form input,
.quote-form input,.quote-form select,#tracking-number,
.portal-auth input[type="email"],.portal-auth input[type="password"],.portal-auth input[type="text"],
#profile-form input,#profile-form select,#profile-form textarea,input,select,textarea{
  background:rgba(255,255,255,.05) !important;
  border:1px solid rgba(255,255,255,.11) !important;
  color:#fff !important;
  border-radius:14px !important;
  box-shadow:none !important;
}
input::placeholder,textarea::placeholder{color:#9db0d2 !important;}
.contact-form input:focus,.contact-form textarea:focus,.tracking-form input:focus,.quote-form input:focus,.quote-form select:focus,input:focus,textarea:focus,select:focus{
  border-color:rgba(143,197,255,.5) !important;
  box-shadow:0 0 0 4px rgba(79,140,255,.14) !important;
}
.faq-item{padding:1.35rem 1.45rem !important;}
.faq-question{font-size:1rem !important;}
.faq-answer{padding-right:.5rem;}
#tracking-result .tracking-card, .table-wrap, table.shipments-table, .shipments-wrap{
  background:transparent !important;
}
.table-wrap{
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  overflow:hidden;
}
table.shipments-table{
  background:rgba(13,25,44,.88) !important;
}
table.shipments-table th{
  background:rgba(255,255,255,.06) !important;
  color:#edf4ff !important;
}
table.shipments-table td{color:#d5e4ff !important;border-color:rgba(255,255,255,.06) !important;}
footer{
  background:transparent !important;
  border-top:1px solid rgba(255,255,255,.08);
  box-shadow:none !important;
}
.instagram-link{color:#f6f8ff !important;}
.portal-hero-card,.portal-auth,.portal-dashboard,.container{max-width:1180px;margin-left:auto !important;margin-right:auto !important;}
.portal-hero-card-inner{padding:2rem !important;}
.portal-hero-title{font-size:clamp(2.2rem,4vw,3.4rem) !important;}
.portal-header,.portal-settings-header,.my-shipments-card .portal-header,#portal-dashboard .portal-dashboard-grid > .card:first-child .portal-header{
  background:transparent !important;
  box-shadow:none !important;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.portal-auth input,.portal-auth button,.portal-upload-form input{min-height:46px;}
.profile-icon{
  background:linear-gradient(135deg, rgba(79,140,255,.25), rgba(255,77,87,.20)) !important;
  border:1px solid rgba(255,255,255,.14) !important;
}
.shipment-card{padding:18px !important;}
.shipment-top h3,.shipment-top strong,.field .v{color:#fff !important;}
.field .k,.meta,.filename{color:#9db0d2 !important;}
.container{padding-top:40px !important;}
@media (max-width: 900px){
  .hero{padding-top:6.6rem !important;}
  section{padding:1rem 1rem 3rem !important;}
  .hero::after{font-size:.76rem;line-height:1.35;text-align:center;}
}


/* Mobile header polish: keep language toggle visually centered */
@media (max-width: 900px){
  header .lang-toggle{
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}


/* Mobile tidy-up: keep controls centered and easy to tap without changing layout */
@media (max-width: 900px){
  header{
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  header nav{
    width: 100%;
    text-align: center;
  }
  header nav a{
    display: block;
    text-align: center;
    width: 100%;
  }
  .hero, .services, .tracking, .about, .contact, .container, section{
    text-align: center;
  }
  .hero p, .about p, .contact p, .tracking p, .services p{
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .btn, .btn-secondary, .tracking-btn, .contact-btn, .quote-actions button, .portal-account-controls button{
    justify-content: center;
  }
}