:root {
  --green: #62c400;
  --green-dark: #3f8f00;
  --black: #0a0d0f;
  --charcoal: #12171b;
  --text: #1d252b;
  --muted: #67737b;
  --line: #dfe5e8;
  --soft: #f4f7f5;
  --white: #ffffff;
  --shadow: 0 18px 45px rgba(4, 18, 10, 0.12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, Tajawal, Arial, sans-serif;
  color: var(--text);
  background: var(--white);
  line-height: 1.65;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.container { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }

.topbar { background: var(--black); color: #d9e0e3; font-size: 13px; }
.topbar-inner { min-height: 38px; display: flex; align-items: center; justify-content: flex-end; gap: 24px; }
.topbar a:hover { color: var(--green); }
.site-header { position: relative; z-index: 50; background: var(--white); box-shadow: 0 2px 14px rgba(0,0,0,.07); }
.navbar { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand-mark { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 9px; background: linear-gradient(135deg, var(--green), var(--green-dark)); color: #fff; font-weight: 800; letter-spacing: -.5px; }
.brand-copy { display: flex; flex-direction: column; line-height: 1.1; }
.brand-copy strong { font-size: 17px; }
.brand-copy small { margin-top: 5px; color: var(--muted); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.nav-links { display: flex; align-items: center; gap: 16px; font-size: 14px; font-weight: 600; }
.nav-links > a:hover { color: var(--green-dark); }
.menu-toggle { display: none; width: 44px; height: 44px; border: 0; background: transparent; padding: 9px; }
.menu-toggle span { display: block; height: 2px; background: var(--black); margin: 6px 0; }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 24px; border: 2px solid var(--green); border-radius: 4px; background: var(--green); color: #0b1901; font-weight: 800; cursor: pointer; transition: .25s ease; }
.btn:hover { transform: translateY(-2px); background: #78db16; border-color: #78db16; }
.btn-small { min-height: 42px; padding-inline: 18px; }
.btn-outline { color: #fff; background: transparent; border-color: rgba(255,255,255,.55); }
.btn-outline:hover { background: #fff; color: var(--black); border-color: #fff; }
.btn-full { width: 100%; }
.btn-light { background: #fff; border-color: #fff; color: var(--black); }
.btn-light:hover { background: #ecf6e6; border-color: #ecf6e6; }

.hero { position: relative; overflow: hidden; color: #fff; background:
  radial-gradient(circle at 78% 24%, rgba(98,196,0,.25), transparent 28%),
  linear-gradient(115deg, rgba(6,10,12,.98) 0%, rgba(9,15,18,.96) 58%, rgba(22,40,25,.92) 100%);
}
.hero::before { content:""; position:absolute; inset:0; opacity:.22; background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px); background-size: 42px 42px; }
.hero::after { content:""; position:absolute; width:520px; height:520px; border:1px solid rgba(98,196,0,.3); border-radius:50%; right:-180px; top:-170px; box-shadow: 0 0 0 90px rgba(98,196,0,.03), 0 0 0 180px rgba(98,196,0,.025); }
.hero-grid { position: relative; z-index: 2; min-height: 670px; display: grid; grid-template-columns: 1.25fr .75fr; align-items: center; gap: 70px; padding-block: 80px; }
.eyebrow { display: inline-block; margin-bottom: 16px; color: var(--green); text-transform: uppercase; letter-spacing: .16em; font-size: 12px; font-weight: 800; }
.hero h1 { margin: 0; max-width: 760px; font-size: clamp(42px, 6vw, 72px); line-height: 1.03; letter-spacing: -.04em; }
.hero-content > p { max-width: 720px; margin: 25px 0 30px; color: #cbd5da; font-size: 18px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-points { display: flex; flex-wrap: wrap; gap: 18px 28px; margin-top: 34px; color: #d7e2e5; font-size: 13px; }
.hero-points span::before { content: "✓"; color: var(--green); font-weight: 800; margin-right: 8px; }
.hero-card { background: rgba(255,255,255,.97); color: var(--text); padding: 32px; border-top: 5px solid var(--green); box-shadow: var(--shadow); }
.hero-card h2 { margin: 0 0 8px; font-size: 27px; }
.hero-card > p { margin: 0 0 22px; color: var(--muted); font-size: 14px; }
label { display: block; margin-bottom: 14px; font-size: 13px; font-weight: 700; }
input, textarea { width: 100%; margin-top: 6px; border: 1px solid #ccd5d9; border-radius: 3px; padding: 12px 13px; font: inherit; color: var(--text); background: #fff; }
input:focus, textarea:focus { outline: 2px solid rgba(98,196,0,.25); border-color: var(--green); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.trust-strip { background: var(--white); border-bottom: 1px solid var(--line); }
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.trust-grid > div { padding: 28px 26px; border-right: 1px solid var(--line); }
.trust-grid > div:first-child { border-left: 1px solid var(--line); }
.trust-grid strong, .trust-grid span { display: block; }
.trust-grid strong { font-size: 15px; }
.trust-grid span { color: var(--muted); font-size: 12px; margin-top: 6px; }

.section { padding: 100px 0; }
.section-heading { max-width: 760px; margin-bottom: 46px; }
.section-heading h2, .content-panel h2, .contact-copy h2 { margin: 0; font-size: clamp(32px, 4.5vw, 52px); line-height: 1.12; letter-spacing: -.035em; }
.section-heading p, .content-panel > p, .contact-copy > p { color: var(--muted); font-size: 17px; }
.cards { display: grid; gap: 22px; }
.four-col { grid-template-columns: repeat(4, 1fr); }
.service-card { min-height: 290px; padding: 30px; border: 1px solid var(--line); background: #fff; transition: .25s ease; }
.service-card:hover { transform: translateY(-7px); box-shadow: var(--shadow); border-color: transparent; }
.service-card .icon { width: 54px; height: 54px; display: grid; place-items: center; margin-bottom: 30px; background: var(--soft); color: var(--green-dark); font-weight: 800; border-radius: 50%; }
.service-card h3 { margin: 0 0 12px; font-size: 20px; }
.service-card p { color: var(--muted); margin: 0; font-size: 14px; }

.split-section { background: var(--soft); }
.split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
.visual-panel { position: relative; min-height: 500px; overflow: hidden; background: linear-gradient(135deg, #0d1417, #1b2a20); box-shadow: var(--shadow); padding: 45px; color: #fff; }
.visual-panel::before { content:""; position:absolute; width:340px; height:340px; border:70px solid rgba(98,196,0,.12); border-radius:50%; right:-100px; bottom:-130px; }
.visual-badge { display:inline-block; position:relative; z-index:2; padding:9px 13px; background:var(--green); color:#0c1804; font-weight:800; font-size:12px; text-transform:uppercase; letter-spacing:.1em; }
.route { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; margin-top: 64px; font-weight: 700; }
.route::before { content:""; position:absolute; left:0; right:0; top:50%; height:2px; background:linear-gradient(90deg, var(--green), rgba(255,255,255,.18)); }
.route span { position:relative; z-index:2; padding:8px 12px; background:#111a1e; border:1px solid rgba(255,255,255,.18); }
.route-two { margin-left: 38px; }
.route-three { margin-right: 50px; }
.check-list { list-style: none; padding: 0; margin: 30px 0; }
.check-list li { position: relative; padding-left: 30px; margin: 14px 0; }
.check-list li::before { content:"✓"; position:absolute; left:0; top:0; color:var(--green-dark); font-weight:900; }
.text-link { font-weight: 800; color: var(--green-dark); }

.dark-section { background: var(--black); color: #fff; }
.section-heading.light p { color: #aebbc1; }
.location-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.location-card { padding: 28px; min-height: 150px; background: #11171a; border: 1px solid rgba(255,255,255,.1); border-bottom: 3px solid var(--green); }
.location-card strong, .location-card span { display:block; }
.location-card strong { font-size:20px; margin-bottom:10px; }
.location-card span { color:#aebbc1; font-size:14px; }

.process-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.process-step { position:relative; padding:30px 24px; background:var(--soft); border-top:4px solid var(--green); }
.process-step span { display:grid; place-items:center; width:42px; height:42px; border-radius:50%; background:var(--black); color:#fff; font-weight:800; margin-bottom:22px; }
.process-step h3 { margin:0 0 8px; }
.process-step p { margin:0; color:var(--muted); font-size:14px; }

.cta-section { padding: 70px 0; background: var(--green); }
.cta-inner { display:flex; align-items:center; justify-content:space-between; gap:40px; }
.cta-inner .eyebrow { color:#1c3805; }
.cta-inner h2 { margin:0; font-size:clamp(32px,4vw,50px); }
.cta-inner p { margin-bottom:0; color:#264b08; }

.contact-section { background:#fff; }
.contact-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:70px; align-items:start; }
.contact-list { margin-top:35px; display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.contact-list a { padding:18px; border:1px solid var(--line); }
.contact-list strong, .contact-list span { display:block; }
.contact-list strong { font-size:12px; color:var(--green-dark); text-transform:uppercase; letter-spacing:.1em; }
.contact-list span { margin-top:6px; font-size:14px; }
.contact-panel { background:var(--charcoal); color:#fff; padding:38px; border-top:5px solid var(--green); }
.contact-panel h3 { margin-top:0; font-size:26px; }
dl { margin:24px 0 30px; }
dl div { display:flex; justify-content:space-between; gap:20px; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.12); }
dt { color:#9eabb1; }
dd { margin:0; text-align:right; font-weight:700; }

.footer { background:#080b0d; color:#c5cfd3; padding:65px 0 20px; }
.footer-grid { display:grid; grid-template-columns:1.5fr repeat(3,1fr); gap:50px; }
.footer-brand .brand-copy strong { color:#fff; }
.footer p { max-width:330px; color:#8d9aa0; }
.footer h4 { color:#fff; margin:0 0 18px; }
.footer-grid > div:not(:first-child) { display:flex; flex-direction:column; gap:9px; font-size:14px; }
.footer a:hover { color:var(--green); }
.footer-bottom { margin-top:45px; padding-top:20px; border-top:1px solid rgba(255,255,255,.1); display:flex; justify-content:space-between; gap:20px; font-size:13px; }
.floating-whatsapp { position:fixed; right:22px; bottom:22px; z-index:60; width:56px; height:56px; display:grid; place-items:center; border-radius:50%; background:var(--green); color:#071003; font-weight:900; box-shadow:0 12px 28px rgba(0,0,0,.25); }

.reveal { opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity:1; transform:none; }

@media (max-width: 980px) {
  .topbar-inner { justify-content:center; flex-wrap:wrap; gap:8px 18px; padding:7px 0; }
  .menu-toggle { display:block; }
  .nav-links { position:absolute; left:20px; right:20px; top:118px; display:none; flex-direction:column; align-items:stretch; gap:0; padding:16px; background:#fff; box-shadow:var(--shadow); }
  .nav-links.open { display:flex; }
  .nav-links a { padding:12px; }
  .hero-grid, .split-grid, .contact-grid { grid-template-columns:1fr; }
  .hero-grid { gap:45px; }
  .hero-card { max-width:640px; }
  .four-col, .process-grid { grid-template-columns:repeat(2,1fr); }
  .trust-grid { grid-template-columns:repeat(2,1fr); }
  .location-grid { grid-template-columns:repeat(2,1fr); }
  .footer-grid { grid-template-columns:repeat(2,1fr); }
}

@media (max-width: 640px) {
  .container { width:min(100% - 26px, 1180px); }
  .topbar span { display:none; }
  .navbar { min-height:72px; }
  .brand-copy strong { font-size:15px; }
  .brand-mark { width:42px; height:42px; }
  .nav-links { top:110px; }
  .hero-grid { padding-block:60px; }
  .hero h1 { font-size:42px; }
  .hero-content > p { font-size:16px; }
  .hero-card { padding:24px; }
  .form-row, .four-col, .trust-grid, .process-grid, .location-grid, .contact-list, .footer-grid { grid-template-columns:1fr; }
  .trust-grid > div { border-left:1px solid var(--line); }
  .section { padding:72px 0; }
  .visual-panel { min-height:400px; padding:28px; }
  .cta-inner, .footer-bottom { flex-direction:column; align-items:flex-start; }
  dl div { flex-direction:column; gap:3px; }
  dd { text-align:left; }
}

/* Multi-page additions */
a.service-card{color:inherit}.page-hero{padding:88px 0;background:linear-gradient(120deg,#071014,#15261b);color:#fff}.page-hero h1{margin:0;max-width:850px;font-size:clamp(40px,6vw,66px);line-height:1.05}.page-hero p{max-width:760px;color:#c5d0d4;font-size:18px}.narrow{max-width:850px}.narrow h2,.legal-copy h2{margin-top:34px;font-size:30px}.narrow p,.legal-copy p{color:var(--muted);font-size:16px}.license-card{position:relative;background:#fff;border:1px solid var(--line);border-top:5px solid var(--green);padding:42px;box-shadow:var(--shadow)}.license-card h2{margin-top:8px}.license-seal{width:74px;height:74px;display:grid;place-items:center;border-radius:50%;background:var(--black);color:var(--green);font-size:22px;font-weight:900;letter-spacing:.08em}.safe-data{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:28px 0}.safe-data div{padding:18px;background:var(--soft);border-left:3px solid var(--green)}.safe-data span,.safe-data strong{display:block}.safe-data span{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:5px}.privacy-note{font-size:13px!important}.notice{margin:26px 0;padding:20px;background:#f4f7f2;border:1px solid #dfe7da}.notice p{margin-bottom:0}.legal-copy h2:first-child{margin-top:0}@media(max-width:640px){.safe-data{grid-template-columns:1fr}.license-card{padding:26px}.page-hero{padding:64px 0}}

.brand-logo{width:58px;height:58px;object-fit:contain;flex:0 0 auto}.site-header .brand-logo{width:64px;height:54px}.login-card .brand-logo{width:72px;height:72px}@media(max-width:700px){.brand-logo{width:48px;height:48px}.site-header .brand-logo{width:52px;height:46px}}


/* v7.0 public brand containment and footer repair */
.site-header .navbar{min-height:112px!important;gap:28px!important;overflow:visible!important}
.site-header .brand{display:flex!important;align-items:center!important;flex:0 0 auto!important;min-width:0!important;overflow:visible!important}
.site-header .brand-logo{display:block!important;width:176px!important;height:96px!important;max-width:176px!important;max-height:96px!important;object-fit:contain!important;object-position:center!important;flex:0 0 176px!important}
.site-header .brand-copy{display:none!important}
.footer{overflow:hidden!important}
.footer-grid{grid-template-columns:minmax(220px,1.25fr) repeat(3,minmax(170px,1fr))!important;gap:44px!important;align-items:start!important}
.footer-grid>div{min-width:0!important}
.footer-grid>div:first-child{display:block!important}
.footer-brand{display:block!important;width:190px!important;max-width:100%!important;overflow:hidden!important;margin:0 0 18px!important}
.footer-brand .brand-logo{display:block!important;width:190px!important;height:112px!important;max-width:100%!important;max-height:112px!important;object-fit:contain!important;object-position:left center!important;flex:none!important}
.footer-brand .brand-copy{display:none!important}
.footer-grid h4{line-height:1.25!important}
.footer-grid a{line-height:1.45!important;overflow-wrap:anywhere!important}
.footer p{max-width:310px!important;line-height:1.65!important;margin:0!important}
@media(max-width:980px){
 .site-header .navbar{min-height:92px!important}
 .site-header .brand-logo{width:142px!important;height:76px!important;max-width:142px!important;max-height:76px!important;flex-basis:142px!important}
 .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:640px){
 .site-header .navbar{min-height:80px!important}
 .site-header .brand-logo{width:118px!important;height:64px!important;max-width:118px!important;max-height:64px!important;flex-basis:118px!important}
 .footer-grid{grid-template-columns:1fr!important;gap:34px!important}
 .footer-brand{width:160px!important}
 .footer-brand .brand-logo{width:160px!important;height:96px!important}
}

/* v8 definitive public logo/header/footer layout */
.public-brand{display:flex;align-items:center;gap:14px;min-width:0;flex:0 0 auto}
.public-brand-logo{width:76px!important;height:76px!important;max-width:76px!important;max-height:76px!important;object-fit:contain!important;flex:0 0 76px!important;border-radius:12px;background:#fff}
.public-brand-text{display:flex;flex-direction:column;min-width:0;line-height:1.12}
.public-brand-text strong{font-size:18px;white-space:nowrap;color:#101820}
.public-brand-text small{margin-top:5px;color:#65727a;font-size:12px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.site-header .navbar{min-height:96px!important;overflow:visible!important}
.footer{overflow:hidden!important}
.footer-grid{grid-template-columns:minmax(245px,1.3fr) repeat(3,minmax(165px,1fr))!important;align-items:start!important;gap:44px!important}
.footer-grid>div{min-width:0!important}
.footer-brand-v7{display:flex!important;align-items:center!important;gap:14px!important;max-width:285px!important;margin:0 0 18px!important;color:#fff!important}
.footer-brand-logo-v7{display:block!important;width:92px!important;height:92px!important;max-width:92px!important;max-height:92px!important;object-fit:contain!important;flex:0 0 92px!important;border-radius:14px!important;background:#fff!important}
.footer-brand-v7 span{display:flex!important;flex-direction:column!important;min-width:0!important;line-height:1.15!important}
.footer-brand-v7 strong{font-size:18px!important;color:#fff!important;overflow-wrap:anywhere!important}
.footer-brand-v7 small{font-size:11px!important;color:#8fa0a8!important;text-transform:uppercase!important;letter-spacing:.08em!important;margin-top:6px!important}
.footer-grid h4{margin:0 0 18px!important;line-height:1.3!important}
.footer-grid>div:not(:first-child){display:flex!important;flex-direction:column!important;gap:9px!important}
.footer-grid a{line-height:1.45!important;white-space:normal!important;overflow-wrap:anywhere!important}
.footer-grid p{margin:0!important;max-width:330px!important;line-height:1.65!important}
@media(max-width:980px){
  .public-brand-logo{width:64px!important;height:64px!important;max-width:64px!important;max-height:64px!important;flex-basis:64px!important}
  .public-brand-text strong{font-size:16px}
  .site-header .navbar{min-height:84px!important}
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:640px){
  .public-brand-logo{width:54px!important;height:54px!important;max-width:54px!important;max-height:54px!important;flex-basis:54px!important}
  .public-brand-text strong{font-size:14px}.public-brand-text small{font-size:10px}
  .site-header .navbar{min-height:76px!important}
  .footer-grid{grid-template-columns:1fr!important;gap:32px!important}
  .footer-brand-logo-v7{width:76px!important;height:76px!important;max-width:76px!important;max-height:76px!important;flex-basis:76px!important}
}

/* v8.5 secure public enquiries and ticket conversation */
.public-form-nav{display:flex!important;position:static!important;background:transparent!important;box-shadow:none!important;padding:0!important}
.public-ticket-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;max-width:920px}
.public-ticket-card{background:#fff;border:1px solid var(--line);border-top:5px solid var(--green);padding:32px;box-shadow:var(--shadow)}
.public-ticket-card h2,.public-ticket-card h3{margin-top:0}
.public-ticket-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:22px}
.public-ticket-head span,.public-ticket-head strong{display:block}.public-ticket-head span{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.07em}
.public-ticket-thread{display:flex;flex-direction:column;gap:14px;margin:22px 0}
.public-ticket-thread article{border:1px solid var(--line);border-radius:12px;padding:16px;background:#f8fafb}
.public-ticket-thread strong,.public-ticket-thread small{display:block}.public-ticket-thread small{color:var(--muted);margin-top:4px}.public-ticket-thread p{line-height:1.55;overflow-wrap:anywhere}
.public-support-form{display:grid;gap:14px}.public-support-form label{font-weight:700}.public-support-form input,.public-support-form select,.public-support-form textarea,.private-link-card textarea,.public-alert textarea{width:100%;margin-top:7px;padding:13px;border:1px solid #cfd8df;border-radius:8px;font:inherit}
.public-alert{grid-column:1/-1;padding:14px 16px;border:1px solid #d9e1e5;background:#f5f8fa;border-radius:10px}.public-alert.success{background:#effbe9;border-color:#bfe5ab;color:#236715}.public-alert.danger{background:#fff0f0;border-color:#edbebe;color:#982020}
.private-link-card textarea,.public-alert textarea{display:block;margin:12px 0;background:#f7fafb;resize:none}
@media(max-width:860px){.public-form-nav{display:none!important}.public-ticket-card{padding:24px}.public-ticket-head{flex-direction:column}.public-support-form .form-row{grid-template-columns:1fr}.public-ticket-grid{width:100%}}
@media(max-width:520px){.public-ticket-card{padding:18px}.page-hero h1{font-size:36px}.public-support-form input,.public-support-form select,.public-support-form textarea{font-size:16px}.public-ticket-card .btn{width:100%;min-height:48px}}