/* ===== CH Lucky Global — stylesheet ===== */

:root{
  --navy-950:#050f24;
  --navy-900:#081a38;
  --navy-800:#0d2450;
  --navy-700:#153468;
  --navy-600:#1c4380;
  --red-600:#c31f2e;
  --red-700:#9e1622;
  --wolt-blue:#00a9e0;
  --ink:#0b1526;
  --gray-900:#101826;
  --gray-700:#3c4a63;
  --gray-500:#6b7994;
  --gray-300:#c9d2e0;
  --gray-100:#eef1f6;
  --gray-50:#f6f8fb;
  --white:#ffffff;
  --shadow-sm: 0 1px 2px rgba(6,16,40,.05);
  --shadow-md: 0 4px 16px rgba(8,26,56,.08);
  --shadow-lg: 0 8px 28px rgba(8,26,56,.10);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 14px;
  --container: 1180px;
  --font-head: 'Sora', 'Manrope', system-ui, sans-serif;
  --font-body: 'Manrope', system-ui, -apple-system, sans-serif;
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; scroll-padding-top: 110px; overflow-x: hidden; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family: inherit; cursor:pointer; }
input,select,textarea{ font-family: inherit; }
h1,h2,h3,h4{ font-family: var(--font-head); color: var(--navy-900); margin:0; line-height:1.2; }

.container{ max-width: var(--container); margin: 0 auto; padding: 0 24px; }

/* ---------- Topbar ---------- */
.topbar{ background: var(--navy-950); color: var(--gray-300); font-size: 13px; }
.topbar-inner{ display:flex; align-items:center; gap:22px; height:38px; }
.topbar-link{ display:flex; align-items:center; gap:6px; color: var(--gray-300); transition: color .15s; white-space:nowrap; }
.topbar-link:hover{ color: var(--white); }
.topbar-static{ cursor:default; }
.topbar-spacer{ flex:1; }
@media (max-width: 720px){
  .topbar-inner{ height:auto; padding:8px 24px; flex-wrap:wrap; gap:10px 18px; }
  .topbar-spacer{ display:none; }
}

/* ---------- Header ---------- */
.site-header{
  position: sticky; top:0; z-index: 100;
  background: #ffffff;
  border-bottom: 1px solid var(--gray-100);
}
.header-inner{ display:flex; align-items:center; gap:28px; height:78px; }

.brand{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.brand-mark{ width:40px; height:40px; object-fit:contain; }
.brand-mark-sm{ width:34px; height:34px; }
.brand-text{ display:flex; flex-direction:column; line-height:1.15; }
.brand-text strong{ font-family: var(--font-head); font-size:16.5px; color: var(--navy-900); font-weight:700; }
.brand-text em{ font-style:normal; font-size:11.5px; color: var(--gray-500); letter-spacing:.04em; text-transform:uppercase; }

.main-nav{ display:flex; align-items:center; gap:26px; flex:1; justify-content:center; }
.main-nav a{ font-size:14.5px; font-weight:600; color: var(--gray-700); padding:8px 2px; position:relative; transition: color .15s; }
.main-nav a:hover{ color: var(--navy-900); }
.main-nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background: var(--red-600);
  transform: scaleX(0); transition: transform .2s;
}
.main-nav a:hover::after{ transform: scaleX(1); }

.header-actions{ display:flex; align-items:center; gap:14px; flex-shrink:0; }

.lang-switch{ display:flex; background: var(--gray-100); border-radius:999px; padding:3px; gap:2px; }
.lang-btn{
  border:none; background:transparent; padding:6px 11px; border-radius:999px;
  font-size:12.5px; font-weight:700; color: var(--gray-500); letter-spacing:.02em;
  transition: all .15s;
}
.lang-btn.active{ background: var(--navy-900); color:#fff; }
.lang-btn:not(.active):hover{ color: var(--navy-900); }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 22px; border-radius: var(--radius-sm); font-weight:700; font-size:14.5px;
  border: 1.5px solid transparent; transition: background .15s, border-color .15s; white-space:nowrap;
}
.btn-sm{ padding:9px 16px; font-size:13.5px; }
.btn-primary{ background: var(--red-600); color:#fff; }
.btn-primary:hover{ background: var(--red-700); }
.btn-ghost{ background: transparent; border-color: rgba(255,255,255,.4); color:#fff; }
.btn-ghost:hover{ background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.7); }
.btn-block{ width:100%; }

.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; padding:6px; }
.nav-toggle span{ width:22px; height:2px; background: var(--navy-900); border-radius:2px; transition: all .2s; }

@media (max-width: 1180px){
  .header-actions .btn-sm{ display:none; }
  .main-nav{
    position:fixed; left:0; right:0; bottom:0; top: var(--nav-offset, 116px);
    z-index: 90; background:#fff; flex-direction:column;
    justify-content:flex-start; align-items:stretch;
    padding: 12px 24px 30px; gap:2px;
    transform: translateX(100%); overflow-y:auto;
    visibility:hidden;
    transition: transform .25s ease, visibility 0s linear .25s;
  }
  .main-nav.open{
    transform: translateX(0); visibility:visible;
    transition: transform .25s ease, visibility 0s linear 0s;
  }
  .main-nav a{ padding:14px 4px; border-bottom:1px solid var(--gray-100); font-size:16px; }
  .nav-toggle{ display:flex; position:relative; z-index:91; }
  body.nav-locked{ overflow:hidden; }

  .main-nav .lang-switch{
    margin-top:20px; padding:4px; align-self:stretch; justify-content:center;
    background: var(--gray-50); border:1px solid var(--gray-100);
  }
  .main-nav .lang-switch .lang-btn{ flex:1; padding:11px 0; font-size:14px; }
}
@media (max-width: 560px){
  .header-inner{ height:68px; gap:10px; }
  .brand-text em{ display:none; }
  .brand-mark{ width:34px; height:34px; }
  .header-actions{ gap:8px; }
  .lang-btn{ padding:5px 8px; font-size:11.5px; }
}
@media (max-width: 400px){
  .container{ padding: 0 16px; }
}
.nav-toggle.open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero{ position:relative; overflow:hidden; padding: 80px 0 88px; color:#fff; background: var(--navy-950); }
.hero-bg{ position:absolute; inset:0; z-index:0; background: var(--navy-950); }
.hero-inner{ position:relative; z-index:1; display:grid; grid-template-columns: 1.15fr .85fr; gap:56px; align-items:center; }
.hero-inner > *{ min-width:0; }

.badge{
  display:inline-flex; align-items:center; gap:9px; padding:8px 16px; border-radius:999px;
  font-size:13px; font-weight:700; letter-spacing:.01em;
}
.badge-light{ background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); color:#fff; }
.badge-dot{ width:7px; height:7px; border-radius:50%; background: var(--red-600); flex-shrink:0; }

.hero-copy h1{ color:#fff; font-size: clamp(32px, 4.4vw, 48px); margin: 20px 0 18px; letter-spacing:-.01em; }
.hero-subtitle{ color: rgba(255,255,255,.72); font-size:17px; max-width:520px; margin:0 0 32px; }
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:44px; }

.hero-stats{ display:flex; gap:36px; flex-wrap:wrap; padding-top:28px; border-top:1px solid rgba(255,255,255,.1); }
.stat{ display:flex; flex-direction:column; gap:3px; }
.stat strong{ font-family: var(--font-head); font-size:19px; color:#fff; }
.stat span{ font-size:12.5px; color: rgba(255,255,255,.55); }

.hero-visual{ display:flex; justify-content:center; }
.hero-card{
  position:relative; width:100%; max-width:300px;
  background: #ffffff;
  border-radius: var(--radius-md);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
  padding: 40px 32px;
  box-shadow: var(--shadow-lg);
}
.hero-logo{ width: 78%; }
.hero-card-divider{ width:40px; height:2px; background: var(--gray-100); }
.hero-card-partner{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.hero-card-partner span{ font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color: var(--gray-500); }
.hero-card-wolt{ height:22px; width:auto; }

@media (max-width: 980px){
  .hero-inner{ grid-template-columns:1fr; }
  .hero-visual{ order:-1; }
  .hero-card{ max-width:240px; }
}

/* ---------- Sections ---------- */
.section{ padding: 96px 0; }
.section-alt{ background: var(--gray-50); }
.section-head{ max-width: 640px; margin: 0 0 48px; }
.kicker{
  display:inline-block; font-size:12.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color: var(--red-600); margin-bottom:12px;
}
.section-head h2, .about-copy h2{ font-size: clamp(26px, 3vw, 36px); margin-bottom:14px; }
.section-sub{ color: var(--gray-500); font-size:16px; margin:0; }

/* About */
.about-grid{ display:grid; grid-template-columns: .85fr 1.15fr; gap:64px; align-items:center; }
.about-grid > *{ min-width:0; }
.about-media-frame{
  aspect-ratio: 1/1; border-radius: var(--radius-lg);
  background: var(--gray-50); border: 1px solid var(--gray-100);
  display:flex; align-items:center; justify-content:center; padding: 16%;
}
.about-media-logo{ width:100%; }
.about-copy p{ color: var(--gray-700); font-size:16px; margin: 0 0 16px; }
.check-list{ margin-top:24px; display:flex; flex-direction:column; gap:14px; }
.check-list li{ display:flex; align-items:flex-start; gap:12px; font-size:15px; color: var(--gray-900); font-weight:600; }
.check-list svg{ color: var(--red-600); flex-shrink:0; margin-top:1px; }

@media (max-width: 900px){
  .about-grid{ grid-template-columns:1fr; gap:40px; }
  .about-media-frame{ max-width:320px; margin:0 auto; }
}

/* Vision & Mission */
.vm-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:28px; }
.vm-grid > *{ min-width:0; }
.vm-card{
  background:#fff; border:1px solid var(--gray-100); border-radius: var(--radius-md);
  padding: 36px; transition: border-color .2s;
}
.vm-card:hover{ border-color: var(--gray-300); }
.vm-icon{
  width:48px; height:48px; border-radius: var(--radius-sm); background: var(--navy-900); color:#fff;
  display:flex; align-items:center; justify-content:center; margin-bottom:20px;
}
.vm-card h3{ font-size:19px; margin-bottom:10px; }
.vm-card p{ color: var(--gray-700); font-size:15px; margin:0; }
@media (max-width:760px){ .vm-grid{ grid-template-columns:1fr; } }

/* Principles */
.principles-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:24px; }
.principle-card{
  background:#fff; border:1px solid var(--gray-100); border-radius: var(--radius-md);
  padding:30px 26px; transition: border-color .2s;
  position:relative;
}
.principle-card:hover{ border-color: var(--gray-300); }
.principle-num{ font-family: var(--font-head); font-size:13px; font-weight:800; color: var(--red-600); letter-spacing:.06em; margin-bottom:14px; display:block; }
.principle-icon{
  width:44px; height:44px; border-radius: var(--radius-sm); background: var(--gray-50); border:1px solid var(--gray-100);
  color: var(--navy-800); display:flex; align-items:center; justify-content:center; margin-bottom:16px;
}
.principle-card h3{ font-size:16.5px; margin-bottom:10px; line-height:1.35; }
.principle-card p{ font-size:14.5px; color: var(--gray-500); margin:0; }

@media (max-width: 980px){ .principles-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px){ .principles-grid{ grid-template-columns: 1fr; } }

/* Values strip */
.values-strip{ background: var(--navy-950); padding: 40px 0; }
.values-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.values-title{ color: rgba(255,255,255,.55); font-size:12.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.values-items{ display:flex; gap:40px; flex-wrap:wrap; }
.value-item{ display:flex; align-items:center; gap:10px; color:#fff; font-weight:700; font-size:15px; }
.value-item svg{ color: var(--wolt-blue); }

/* Careers */
.careers-grid{ display:grid; grid-template-columns: .9fr 1.1fr; gap:56px; align-items:start; }
.careers-grid > *{ min-width:0; }
.benefits-title{ font-size:16px; margin: 30px 0 16px; }
.benefits-list{ display:flex; flex-direction:column; gap:12px; margin-bottom:30px; }
.benefits-list li{
  font-size:15px; color: var(--gray-900); font-weight:600; padding-left:26px; position:relative;
}
.benefits-list li::before{
  content:""; position:absolute; left:0; top:7px; width:8px; height:8px; border-radius:2px; background: var(--red-600); transform: rotate(45deg);
}
.whatsapp-cta{
  display:inline-flex; align-items:center; gap:10px; padding:14px 20px; border-radius: var(--radius-sm);
  background: #fff; border:1.5px solid var(--gray-100); font-weight:700; font-size:14.5px; color: var(--navy-900);
  transition: border-color .15s;
}
.whatsapp-cta svg{ color:#25D366; }
.whatsapp-cta:hover{ border-color: var(--gray-300); }

.careers-form-wrap{
  background:#fff; border-radius: var(--radius-lg); border:1px solid var(--gray-100);
  padding: 36px;
}
.courier-form .form-row{ margin-bottom:18px; }
.courier-form label{ display:block; font-size:13.5px; font-weight:700; color: var(--navy-900); margin-bottom:7px; }
.courier-form input, .courier-form select, .courier-form textarea{
  width:100%; padding:12px 14px; border-radius:10px; border:1.5px solid var(--gray-100);
  background: var(--gray-50); font-size:14.5px; color: var(--ink); transition: border-color .15s, background .15s;
}
.courier-form input:focus, .courier-form select:focus, .courier-form textarea:focus{
  outline:none; border-color: var(--navy-700); background:#fff;
}
.courier-form input:invalid:not(:placeholder-shown){ }
.form-row-half{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-row-half > *{ min-width:0; }
.hp-field{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }

.checkbox-row{ display:flex; align-items:flex-start; gap:10px; font-size:13.5px; color: var(--gray-700); font-weight:500; cursor:pointer; }
.checkbox-row input{ width:17px; height:17px; margin-top:2px; accent-color: var(--red-600); flex-shrink:0; }
.form-consent{ margin-bottom:22px; }

.form-feedback{ margin-top:16px; padding:14px 16px; border-radius:10px; font-size:14px; font-weight:600; }
.form-feedback.success{ background:#e9f9ef; color:#166534; border:1px solid #bbf0cd; }
.form-feedback.error{ background:#fdecec; color:#9e1622; border:1px solid #f7c9cb; }
.field-error{ border-color: var(--red-600) !important; }

@media (max-width: 900px){
  .careers-grid{ grid-template-columns:1fr; gap:36px; }
  .form-row-half{ grid-template-columns:1fr; }
  .careers-form-wrap{ padding:24px; }
}

/* Contact */
.contact-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:22px; }
.contact-card{
  background:#fff; border:1px solid var(--gray-100); border-radius: var(--radius-md);
  padding:26px; display:flex; flex-direction:column; gap:10px;
}
.contact-card svg{ color: var(--red-600); }
.contact-label{ font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color: var(--gray-500); }
.contact-card strong{ font-size:15px; color: var(--navy-900); }
.contact-card a:hover strong{ color: var(--red-600); }
.social-row{ display:flex; gap:12px; margin-top:2px; }
.social-row a{
  width:34px; height:34px; border-radius:9px; background: var(--gray-50); border:1px solid var(--gray-100);
  display:flex; align-items:center; justify-content:center; color: var(--navy-900); transition: all .15s;
}
.social-row a:hover{ background: var(--navy-900); color:#fff; }

@media (max-width: 980px){ .contact-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .contact-grid{ grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.site-footer{ background: var(--navy-950); color: rgba(255,255,255,.7); padding: 56px 0 26px; }
.footer-inner{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:20px; }
.footer-brand{ display:flex; align-items:center; gap:12px; }
.footer-brand strong{ color:#fff; font-family: var(--font-head); font-size:16px; display:block; }
.footer-brand p{ margin:2px 0 0; font-size:12.5px; color: rgba(255,255,255,.5); }
.footer-tagline{ font-size:15px; color: rgba(255,255,255,.75); font-style:italic; margin:0; }
.footer-social{ display:flex; gap:14px; }
.footer-social a{
  width:36px; height:36px; border-radius:10px; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  display:flex; align-items:center; justify-content:center; color:#fff; transition: background .15s;
}
.footer-social a:hover{ background: rgba(255,255,255,.16); }
.footer-bottom{ font-size:12.5px; color: rgba(255,255,255,.4); border-top:1px solid rgba(255,255,255,.08); padding-top:22px; width:100%; }

/* Utility */
.hidden{ display:none !important; }