/* ============================================
   KARA — Unified Dark Theme (Bold Interactive)
   ============================================ */
:root{--purple:#512A83;--blue:#60B5D1;--dark:#1E2630;--light:#F4F4F8;--gray:#9CA3AF;}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:'Cairo',sans-serif;color:#fff;background:var(--dark);line-height:1.7;overflow-x:hidden;}
a{text-decoration:none;color:inherit;}
 
/* ---------- Navbar ---------- */
.navbar{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;padding:20px 6%;
  background:rgba(30,38,48,.7);backdrop-filter:blur(14px);z-index:40;border-bottom:1px solid rgba(255,255,255,.08);}
.logo{font-weight:800;font-size:22px;color:#fff;}
.logo span{background:linear-gradient(90deg,var(--blue),#a888e0);-webkit-background-clip:text;background-clip:text;color:transparent;}
.nav-links{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;gap:28px;font-size:14.5px;font-weight:600;color:#dfe3e8;white-space:nowrap;}
.nav-links a:hover{color:var(--blue);}
.dropdown{position:relative;}
.dropdown>.dd-trigger{cursor:pointer;display:flex;align-items:center;gap:5px;font-weight:600;font-size:14.5px;color:#dfe3e8;}
.dropdown>.dd-trigger:hover{color:var(--blue);}
.dropdown .caret{font-size:10px;transition:transform .15s;}
.dropdown:hover .caret{transform:rotate(180deg);}
.dropdown-menu{
  position:absolute;top:130%;right:0;min-width:230px;padding:8px;
  background:rgba(30,38,48,.92);backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.1);border-radius:12px;
  box-shadow:0 20px 50px -15px rgba(0,0,0,.5);
  opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .15s,transform .15s;z-index:50;
}
html[dir="ltr"] .dropdown-menu{right:auto;left:0;}
.dropdown:hover .dropdown-menu{opacity:1;visibility:visible;transform:translateY(0);}
.dropdown-menu a{display:block;padding:10px 12px;border-radius:8px;font-size:13.5px;font-weight:600;color:#dfe3e8;}
.dropdown-menu a:hover{background:rgba(255,255,255,.06);color:var(--blue);}
.dropdown-menu a.current{color:var(--blue);background:rgba(255,255,255,.06);}
.nav-links>a.current{color:var(--blue);}
.nav-actions{display:flex;gap:10px;align-items:center;}
.btn-lang{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:#fff;padding:9px 16px;border-radius:30px;font-family:inherit;font-weight:700;font-size:12.5px;cursor:pointer;}
.btn-lang:hover{border-color:var(--blue);color:var(--blue);}
.btn-primary{background:linear-gradient(135deg,var(--blue),#8a6fd6);color:#0e1116;padding:11px 24px;border-radius:30px;font-weight:800;font-size:13.5px;border:none;cursor:pointer;display:inline-block;}
.btn-secondary,.btn-outline{border:1px solid rgba(255,255,255,.25);color:#fff;padding:11px 24px;border-radius:30px;font-weight:700;font-size:13.5px;cursor:pointer;background:transparent;display:inline-block;}
.btn-secondary:hover,.btn-outline:hover{border-color:var(--blue);color:var(--blue);}
 
@media(max-width:900px){
  .nav-links{display:none;}
  .navbar{padding:14px 5%;flex-wrap:wrap;gap:10px;row-gap:8px;}
  .nav-actions{gap:8px;flex-wrap:nowrap;order:3;width:100%;justify-content:flex-start;}
  .logo{order:1;}
  .btn-lang{order:2;margin-inline-start:auto;}
  .btn-primary,.btn-secondary,.btn-outline{
    padding:9px 14px;font-size:12.5px;white-space:nowrap;border-radius:24px;
  }
  .btn-lang{padding:8px 12px;font-size:11.5px;}
}
 
/* ---------- Generic section header (label / tag) ---------- */
.section-head{text-align:center;max-width:640px;margin:0 auto 50px;}
.section-head .label,.section-head .tag{color:var(--blue);font-weight:700;font-size:13px;letter-spacing:1.5px;}
.section-head h2{font-size:32px;font-weight:800;margin-top:10px;}
.section-head p,.section-intro{color:#9aa3ad;margin-top:12px;font-size:15px;max-width:700px;margin-left:auto;margin-right:auto;}
 
/* ---------- Hero (Home) ---------- */
.hero{position:relative;max-width:none;margin:0;padding:120px 6% 70px;text-align:center;overflow:hidden;}
.hero:before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(circle at 18% 20%, rgba(120,70,190,.65), transparent 60%),
    radial-gradient(circle at 85% 10%, rgba(96,181,209,.45), transparent 60%),
    radial-gradient(circle at 50% 100%, rgba(81,42,131,.5), transparent 65%),
    linear-gradient(150deg, #2a1a4d 0%, #1E2630 50%, #14313d 100%);
  animation:drift 16s ease-in-out infinite alternate; z-index:0;
}
@keyframes drift{0%{transform:scale(1);}100%{transform:scale(1.08);}}
.hero-content{position:relative;z-index:1;max-width:820px;margin:0 auto;}
.hero>*{position:relative;z-index:1;}
.hero .eyebrow{display:inline-block;padding:8px 18px;border-radius:30px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);color:var(--blue);font-weight:700;font-size:13px;margin-bottom:24px;}
.hero h1{font-size:clamp(30px,5.5vw,50px);font-weight:800;margin-bottom:20px;line-height:1.3;max-width:780px;margin-left:auto;margin-right:auto;}
.hero p,.hero .sub{color:#c3c9d1;font-size:17px;max-width:640px;margin:0 auto 34px;}
.hero .cta-row,.cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
 
/* ---------- Home: service cards (rental-grid) ---------- */
#services{max-width:1200px;margin:0 auto;padding:90px 6%;}
.rental-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-bottom:26px;}
.rental-card{
  background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:32px;
}
.rental-card h3{font-size:21px;margin-bottom:10px;background:linear-gradient(90deg,#fff,var(--blue));-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800;}
.rental-card p{color:#b8bfc7;font-size:14px;margin-bottom:14px;}
.rental-card a{color:var(--blue);font-weight:700;font-size:13.5px;}
 
.addon-label{text-align:center;color:var(--gray);font-weight:700;font-size:13px;margin:32px 0 22px;letter-spacing:1px;}
.addon-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:18px;}
.addon-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:22px;transition:.2s;
  flex:1 1 300px;max-width:340px;text-align:right;}
.addon-card:hover{background:rgba(255,255,255,.07);transform:translateY(-4px);border-color:var(--blue);}
.addon-card h4{font-size:15.5px;margin-bottom:6px;color:#fff;}
.addon-card p{color:#a9b0b9;font-size:12.5px;line-height:1.6;margin-bottom:10px;}
.addon-card a{color:var(--blue);font-weight:700;font-size:13px;}
 
/* ---------- Home: closing CTA ---------- */
.closing-cta{text-align:center;padding:100px 6%;background:linear-gradient(160deg,rgba(81,42,131,.35),rgba(96,181,209,.12));border-top:1px solid rgba(255,255,255,.08);}
.closing-cta h2{font-size:34px;font-weight:800;margin-bottom:14px;}
.closing-cta p{color:#b8bfc7;margin-bottom:28px;max-width:640px;margin-left:auto;margin-right:auto;}
 
/* ---------- Service / Role hero (inner pages) ---------- */
.service-hero,.role-hero{
  position:relative;padding:110px 6% 60px;text-align:center;overflow:hidden;
}
.service-hero:before,.role-hero:before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(circle at 20% 15%, rgba(120,70,190,.55), transparent 60%),
    radial-gradient(circle at 85% 10%, rgba(96,181,209,.35), transparent 55%),
    linear-gradient(150deg, #2a1a4d 0%, #1E2630 55%, #14313d 100%);
  z-index:0;
}
.service-hero>*,.role-hero>*{position:relative;z-index:1;}
.service-hero .tag,.role-hero .tag{display:inline-block;padding:7px 16px;border-radius:30px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);color:var(--blue);font-weight:700;font-size:13px;margin-bottom:16px;}
.service-hero h1,.role-hero h1{font-size:clamp(26px,4vw,38px);margin-bottom:14px;font-weight:800;}
.service-hero p,.role-hero p{color:#c3c9d1;max-width:660px;margin:0 auto;font-size:16px;}
.role-hero .cta-row{margin-top:26px;}
 
/* Chips under role hero */
.concerns{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;padding:26px 6% 0;position:relative;}
.chip{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:#dfe3e8;padding:9px 18px;border-radius:30px;font-size:13.5px;font-weight:600;}
 
/* ---------- Main content blocks (service pages) ---------- */
main{max-width:860px;margin:0 auto;padding:70px 6%;}
.block{margin-bottom:56px;}
.block .label{color:var(--blue);font-weight:700;font-size:13px;letter-spacing:.5px;margin-bottom:8px;}
.block h2{color:#fff;font-size:24px;margin-bottom:16px;font-weight:800;}
.block p{color:#c3c9d1;font-size:15px;margin-bottom:12px;}
 
.scope-list{list-style:none;margin-top:14px;}
.scope-list li{
  display:flex;gap:10px;align-items:flex-start;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.08);font-size:14.5px;color:#c3c9d1;
}
.scope-list li:last-child{border-bottom:none;}
.scope-list li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--blue);margin-top:6px;flex:none;}
 
.benefit-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:14px;}
.benefit-card{background:rgba(255,255,255,.08);border-radius:14px;padding:22px;border:1px solid rgba(255,255,255,.18);}
.benefit-card h4{color:#fff;font-size:15px;margin-bottom:6px;font-weight:700;}
.benefit-card p{color:#a9b0b9;font-size:13.5px;margin:0;}
 
/* ---------- Point cards (role pages) ---------- */
.point-card{display:flex;gap:20px;padding:26px 0;border-bottom:1px solid rgba(255,255,255,.08);}
.point-card:last-child{border-bottom:none;}
.point-num{flex:none;width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--purple),var(--blue));
  display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;font-size:14px;}
.point-body h3{font-size:17px;font-weight:800;margin-bottom:8px;color:#fff;}
.point-body p{color:#c3c9d1;font-size:14.5px;margin-bottom:8px;}
.point-body a{color:var(--blue);font-weight:700;font-size:13.5px;}
 
/* ---------- Context section (Saudi context / how-grid) ---------- */
.context-section{max-width:1000px;margin:0 auto;padding:20px 6% 70px;}
.context-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:24px;}
.context-card{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:16px;padding:24px;}
.context-card .kicker{color:var(--blue);font-weight:700;font-size:12px;letter-spacing:.5px;margin-bottom:8px;}
.context-card h4{font-size:15.5px;font-weight:700;color:#fff;margin-bottom:8px;}
.context-card p{color:#a9b0b9;font-size:13px;line-height:1.7;}
.context-note{text-align:center;color:#7c8590;font-size:12.5px;margin-top:22px;max-width:760px;margin-left:auto;margin-right:auto;}
 
.how-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:24px;}
.how-card{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:16px;padding:24px;text-align:center;}
.how-card h4{font-size:15px;font-weight:700;color:#fff;margin-bottom:8px;}
.how-card p{color:#a9b0b9;font-size:13px;}
 
.why-kara{max-width:1200px;margin:0 auto;padding:70px 6%;}
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:24px;}
.why-card{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:18px;padding:30px;text-align:center;}
.why-card h4{font-size:17px;font-weight:800;color:#fff;margin-bottom:10px;}
.why-card p{color:#a9b0b9;font-size:14px;}
 
/* ---------- CTA band ---------- */
.cta-band{text-align:center;padding:80px 6%;background:linear-gradient(160deg,rgba(81,42,131,.35),rgba(96,181,209,.12));border-top:1px solid rgba(255,255,255,.08);}
.cta-band h3{font-size:26px;font-weight:800;margin-bottom:14px;color:#fff;}
.cta-band p,.cta-band .cta-copy{color:#c3c9d1;font-size:15px;margin:0 auto 24px;max-width:640px;}
.cta-band .row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
 
/* ---------- Footer ---------- */
footer{border-top:1px solid rgba(255,255,255,.08);padding:28px 6%;text-align:center;color:#9aa3ad;font-size:13px;}
footer b{color:#fff;}
 
/* ---------- Request Quote form ---------- */
.wrap{max-width:640px;margin:0 auto;padding:110px 6% 90px;}
.field{margin-bottom:18px;}
.field label,.choice-label{display:block;font-size:14px;font-weight:700;margin:20px 0 10px;color:#dfe3e8;}
.field input,.field textarea{
  width:100%;padding:13px 16px;border-radius:10px;border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05);color:#fff;font-family:inherit;font-size:14.5px;
}
.field textarea{min-height:110px;resize:vertical;}
.field input::placeholder,.field textarea::placeholder{color:#7c8590;}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--blue);}
.hint{color:#9aa3ad;font-size:13.5px;margin-top:-4px;margin-bottom:6px;}
.size-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px;}
.size-option{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:10px;
  padding:14px;text-align:center;font-weight:700;font-size:14px;cursor:pointer;color:#dfe3e8;transition:.15s;
}
.size-option:hover{border-color:var(--blue);}
.size-option.selected{border-color:var(--blue);background:rgba(96,181,209,.14);color:#fff;}
 
.card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:34px;}
.step{display:none;}
.step.active{display:block;}
.progress{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:34px;}
.progress .dot{
  width:30px;height:30px;border-radius:50%;border:2px solid rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#9aa3ad;
}
.progress .dot.active{border-color:var(--blue);color:var(--blue);background:rgba(96,181,209,.12);}
.progress .dot.done{border-color:var(--blue);color:#0e1116;background:var(--blue);}
.progress .line{width:36px;height:2px;background:rgba(255,255,255,.14);}
.progress .line.done{background:var(--blue);}
.btn-back{background:none;border:none;color:#9aa3ad;font-weight:700;font-size:13.5px;cursor:pointer;margin-bottom:14px;}
.btn-back:hover{color:#fff;}
.divider{display:flex;align-items:center;gap:12px;color:#7c8590;font-size:13px;margin:22px 0;}
.divider:before,.divider:after{content:'';flex:1;height:1px;background:rgba(255,255,255,.1);}
.whatsapp-btn{display:flex;align-items:center;justify-content:center;gap:10px;background:rgba(37,211,102,.12);
  border:1px solid rgba(37,211,102,.35);color:#25D366;padding:13px;border-radius:10px;font-weight:700;font-size:14px;}
.whatsapp-btn img,.whatsapp-btn svg{width:22px;height:22px;}
.success{text-align:center;}
.success .check{width:56px;height:56px;border-radius:50%;background:rgba(96,181,209,.15);border:1px solid var(--blue);
  display:flex;align-items:center;justify-content:center;margin:0 auto 18px;font-size:26px;color:var(--blue);}
 
/* ---------- About page ---------- */
.about-hero{
  position:relative;padding:120px 6% 70px;text-align:center;overflow:hidden;
}
.about-hero:before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(circle at 18% 20%, rgba(120,70,190,.6), transparent 60%),
    radial-gradient(circle at 85% 10%, rgba(96,181,209,.4), transparent 60%),
    linear-gradient(150deg, #2a1a4d 0%, #1E2630 55%, #14313d 100%);
  z-index:0;
}
.about-hero>*{position:relative;z-index:1;}
.about-hero .tag{display:inline-block;padding:8px 18px;border-radius:30px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);color:var(--blue);font-weight:700;font-size:13px;margin-bottom:20px;}
.about-hero h1{font-size:clamp(28px,4.5vw,42px);font-weight:800;margin-bottom:16px;max-width:820px;margin-left:auto;margin-right:auto;}
.about-hero p{color:#c3c9d1;max-width:660px;margin:0 auto;font-size:16px;}
 
.promise-band{text-align:center;padding:50px 6%;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);}
.promise-band .line{font-size:20px;font-weight:800;background:linear-gradient(90deg,#fff,var(--blue));-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:8px;}
.promise-band .line-en{color:#7c8590;font-size:14px;letter-spacing:.3px;}
 
.mv-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:24px;max-width:900px;margin-left:auto;margin-right:auto;}
.mv-card{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:18px;padding:32px;text-align:center;}
.mv-card .icon{font-size:28px;color:var(--blue);margin-bottom:14px;}
.mv-card h3{font-size:19px;font-weight:800;color:#fff;margin-bottom:10px;}
.mv-card p{color:#b8bfc7;font-size:14.5px;}
 
.values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:24px;}
.value-card{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:16px;padding:26px;text-align:center;}
.value-card .icon{font-size:22px;color:var(--blue);margin-bottom:10px;}
.value-card h4{font-size:15.5px;font-weight:700;color:#fff;margin-bottom:8px;}
.value-card p{color:#a9b0b9;font-size:13px;}
 
.services-recap{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:26px;}
.services-recap a{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:#dfe3e8;
  padding:11px 20px;border-radius:30px;font-size:13.5px;font-weight:600;}
.services-recap a:hover{border-color:var(--blue);color:var(--blue);}
 
/* ---------- Responsive ---------- */
@media(max-width:900px){
  .benefit-grid,.context-grid,.how-grid,.why-grid{grid-template-columns:1fr;}
  .point-card{flex-direction:column;gap:10px;}
}