/* =========================================================
   ALKHANA WEB TECHNOLOGY — Design System
   Shared styles for Home / About / Contact / Privacy Policy
   ========================================================= */

:root{
  --navy:        #0b1e39;
  --navy-light:  #132b52;
  --blue:        #2f6fed;
  --blue-light:  #eaf1ff;
  --cyan:        #26c6da;
  --ink:         #1c2430;
  --gray:        #5b6472;
  --gray-light:  #8892a0;
  --border:      #e6e9ef;
  --bg:          #ffffff;
  --bg-soft:     #f6f8fb;
  --white:       #ffffff;
  --radius:      14px;
  --radius-sm:   8px;
  --shadow:      0 10px 30px rgba(11,30,57,.08);
  --shadow-sm:   0 4px 14px rgba(11,30,57,.06);
  --max:         1180px;
  --ff:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ff-head:     'Poppins', var(--ff);
}

*{ box-sizing:border-box !important; }
html{ scroll-behavior:smooth !important; }
body{
  margin:0 !important;
  font-family:var(--ff) !important;
  color:var(--ink) !important;
  background:var(--bg) !important;
  line-height:1.7 !important;
  font-size:16px !important;
  -webkit-font-smoothing:antialiased !important;
}
img{ max-width:100% !important; display:block !important; }
a{ color:inherit !important; text-decoration:none !important; }
ul{ margin:0 !important; padding:0 !important; list-style:none !important; }
h1,h2,h3,h4{ font-family:var(--ff-head) !important; color:var(--navy) !important; line-height:1.25 !important; margin:0 0 16px !important; font-weight:600 !important; }
h1{ font-size:clamp(32px,5vw,52px) !important; font-weight:700 !important; letter-spacing:-.5px !important; }
h2{ font-size:clamp(26px,3.4vw,36px) !important; letter-spacing:-.3px !important; }
h3{ font-size:20px !important; }
p{ margin:0 0 16px !important; color:var(--gray) !important; }
.ak-container{ max-width:var(--max) !important; margin:0 auto !important; padding:0 24px !important; }
.ak-section{ padding:88px 0 !important; }
.ak-section-soft{ background:var(--bg-soft) !important; }
.ak-eyebrow{
  display:inline-block !important; font-family:var(--ff-head) !important; font-size:13px !important; font-weight:600 !important;
  letter-spacing:1.6px !important; text-transform:uppercase !important; color:var(--blue) !important; margin-bottom:14px !important;
}
.ak-section-head{ max-width:680px !important; margin:0 auto 56px !important; text-align:center !important; }
.ak-section-head p{ margin:0 !important; }

/* Buttons — high-specificity + !important to guarantee we win over
   Hello Elementor / Elementor UA-style button[type] resets */
a.ak-btn, button.ak-btn, .ak-btn{
  display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:8px !important;
  padding:14px 28px !important; border-radius:999px !important; font-family:var(--ff-head) !important; font-weight:600 !important; font-size:15px !important;
  border:2px solid transparent !important; cursor:pointer !important; transition:.2s ease !important; white-space:nowrap !important;
  -webkit-appearance:none !important; appearance:none !important; box-shadow:none !important; text-decoration:none !important; line-height:normal !important;
}
a.ak-btn-primary, button.ak-btn-primary, .ak-btn-primary{ background:var(--blue) !important; color:#fff !important; border-color:var(--blue) !important; }
a.ak-btn-primary:hover, button.ak-btn-primary:hover, .ak-btn-primary:hover{ background:var(--navy) !important; border-color:var(--navy) !important; }
a.ak-btn-outline, button.ak-btn-outline, .ak-btn-outline{ background:transparent !important; border-color:rgba(255,255,255,.5) !important; color:#fff !important; }
a.ak-btn-outline:hover, button.ak-btn-outline:hover, .ak-btn-outline:hover{ background:rgba(255,255,255,.12) !important; }
a.ak-btn-outline-dark, button.ak-btn-outline-dark, .ak-btn-outline-dark{ background:transparent !important; border-color:var(--border) !important; color:var(--navy) !important; }
a.ak-btn-outline-dark:hover, button.ak-btn-outline-dark:hover, .ak-btn-outline-dark:hover{ border-color:var(--blue) !important; color:var(--blue) !important; }
.ak-btn-block{ width:100% !important; }

/* Header */
.ak-site-header{
  position:sticky !important; top:0 !important; z-index:50 !important; background:rgba(255,255,255,.92) !important;
  backdrop-filter:saturate(180%) blur(10px) !important; border-bottom:1px solid var(--border) !important;
}
.ak-nav{ display:flex !important; align-items:center !important; justify-content:space-between !important; padding:14px 24px !important; max-width:var(--max) !important; margin:0 auto !important; }
.ak-brand{ display:flex !important; align-items:center !important; gap:10px !important; font-family:var(--ff-head) !important; font-weight:700 !important; font-size:19px !important; color:var(--navy) !important; }
.ak-brand-logo{ height:38px !important; width:auto !important; display:block !important; }
.ak-brand-mark{
  width:36px !important; height:36px !important; border-radius:10px !important; background:linear-gradient(135deg,var(--blue),var(--cyan)) !important;
  display:flex !important; align-items:center !important; justify-content:center !important; color:#fff !important; font-weight:700 !important; font-size:16px !important;
}
.ak-brand-mark-img{ height:30px !important; width:auto !important; display:block !important; }
.ak-nav-links{ display:flex !important; align-items:center !important; gap:32px !important; }
.ak-nav-links a{ font-family:var(--ff-head) !important; font-weight:500 !important; font-size:15px !important; color:var(--ink) !important; position:relative !important; padding:4px 0 !important; }
.ak-nav-links a:hover, .ak-nav-links a.ak-active{ color:var(--blue) !important; }
.ak-nav-cta{ display:flex !important; align-items:center !important; gap:20px !important; }
.ak-nav-toggle{ display:none !important; }

/* Hero */
.ak-hero{
  background:radial-gradient(1200px 500px at 80% -10%, rgba(47,111,237,.35), transparent),
             linear-gradient(160deg, var(--navy) 0%, var(--navy-light) 60%, #0e2749 100%) !important;
  color:#fff !important; padding:110px 0 100px !important; position:relative !important; overflow:hidden !important;
}
.ak-hero .ak-container{ position:relative !important; z-index:1 !important; }
.ak-hero-grid{ display:grid !important; grid-template-columns:1.05fr .95fr !important; gap:56px !important; align-items:center !important; }
.ak-hero-inner{ max-width:600px !important; }
.ak-hero .ak-eyebrow{ color:var(--cyan) !important; }
.ak-hero h1{ color:#fff !important; }
.ak-hero p.ak-lead{ color:rgba(255,255,255,.8) !important; font-size:19px !important; max-width:600px !important; }
.ak-hero-actions{ display:flex !important; gap:16px !important; margin-top:32px !important; flex-wrap:wrap !important; }
.ak-hero-stats{ display:flex !important; gap:40px !important; margin-top:64px !important; flex-wrap:wrap !important; }
.ak-hero-stats div strong{ display:block !important; font-family:var(--ff-head) !important; font-size:28px !important; color:#fff !important; }
.ak-hero-stats div span{ font-size:13px !important; color:rgba(255,255,255,.65) !important; }

/* Hero hexagon image (right side) — soft-curved hex, first 3 corners on a big round */
.ak-hero-media{ position:relative !important; max-width:440px !important; margin:0 auto !important; }
.ak-hero-media::before{
  content:"" !important; position:absolute !important; inset:-40px !important; z-index:-1 !important;
  background:radial-gradient(circle, var(--cyan) 0%, transparent 70%) !important;
  opacity:.30 !important; filter:blur(50px) !important;
}
.ak-hero-media svg{ width:100% !important; height:auto !important; display:block !important; filter:drop-shadow(0 30px 50px rgba(3,10,25,.45)) !important; }

/* Page header (About / Contact / Privacy) */
.ak-page-hero{
  background:linear-gradient(160deg, var(--navy) 0%, var(--navy-light) 70%) !important;
  color:#fff !important; padding:80px 0 70px !important; text-align:center !important;
}
.ak-page-hero h1{ color:#fff !important; margin-bottom:12px !important; }
.ak-page-hero p{ color:rgba(255,255,255,.75) !important; max-width:640px !important; margin:0 auto !important; }

/* Grid / Cards */
.ak-grid{ display:grid !important; gap:28px !important; }
.ak-grid-4{ grid-template-columns:repeat(4,1fr) !important; }
.ak-grid-3{ grid-template-columns:repeat(3,1fr) !important; }
.ak-grid-2{ grid-template-columns:repeat(2,1fr) !important; }
.ak-card{
  background:#fff !important; border:1px solid var(--border) !important; border-radius:var(--radius) !important;
  padding:32px 28px !important; box-shadow:var(--shadow-sm) !important; transition:.2s ease !important;
}
.ak-card:hover{ transform:translateY(-4px) !important; box-shadow:var(--shadow) !important; border-color:transparent !important; }
.ak-card-icon{
  width:52px !important; height:52px !important; border-radius:12px !important; background:var(--blue-light) !important; color:var(--blue) !important;
  display:flex !important; align-items:center !important; justify-content:center !important; margin-bottom:20px !important; font-size:22px !important;
}

/* 3D-style service icons */
.ak-icon3d{
  width:64px !important; height:64px !important; border-radius:20px !important; margin-bottom:22px !important; position:relative !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  background:linear-gradient(135deg, var(--blue) 0%, var(--cyan) 100%) !important;
  box-shadow:0 16px 26px -10px rgba(47,111,237,.55),
    inset 0 2px 3px rgba(255,255,255,.45),
    inset 0 -10px 14px rgba(11,30,57,.30) !important;
  transform:rotate(-4deg) !important;
  transition:.25s ease !important;
}
.ak-card:nth-child(even) .ak-icon3d{ transform:rotate(4deg) !important; }
.ak-card:hover .ak-icon3d{ transform:rotate(0deg) translateY(-3px) !important; }
.ak-icon3d::after{
  content:"" !important; position:absolute !important; top:7px !important; left:10px !important; width:24px !important; height:12px !important;
  background:rgba(255,255,255,.38) !important; border-radius:50% !important; filter:blur(3px) !important;
}
.ak-icon3d svg{ width:30px !important; height:30px !important; position:relative !important; z-index:1 !important; }
.ak-card h3{ margin-bottom:10px !important; }
.ak-card p{ margin:0 !important; font-size:14.5px !important; }

/* Check list */
.ak-check-list li{ display:flex !important; gap:12px !important; align-items:flex-start !important; margin-bottom:16px !important; color:var(--ink) !important; }
.ak-check-list li .ak-tick{
  flex:0 0 auto !important; width:22px !important; height:22px !important; border-radius:50% !important; background:var(--blue-light) !important; color:var(--blue) !important;
  display:flex !important; align-items:center !important; justify-content:center !important; font-size:13px !important; font-weight:700 !important; margin-top:2px !important;
}

/* Process steps */
.ak-steps{ display:grid !important; grid-template-columns:repeat(4,1fr) !important; gap:24px !important; counter-reset:step !important; }
.ak-step{ position:relative !important; padding-top:8px !important; }
.ak-step::before{
  counter-increment:step !important; content:counter(step,decimal-leading-zero) !important;
  font-family:var(--ff-head) !important; font-weight:700 !important; font-size:32px !important; color:var(--blue-light) !important;
  -webkit-text-stroke:1px var(--blue) !important; display:block !important; margin-bottom:14px !important;
}
.ak-step h3{ font-size:17px !important; margin-bottom:8px !important; }
.ak-step p{ font-size:14.5px !important; margin:0 !important; }

/* Two column feature */
.ak-split{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:64px !important; align-items:center !important; }
.ak-split-media{
  border-radius:var(--radius) !important; overflow:hidden !important; background:linear-gradient(150deg,var(--navy),var(--blue)) !important;
  min-height:360px !important; display:flex !important; align-items:center !important; justify-content:center !important; color:#fff !important;
}

/* CTA band */
.ak-cta-band{
  background:linear-gradient(135deg,var(--navy),var(--blue)) !important; color:#fff !important; border-radius:24px !important;
  padding:64px 48px !important; text-align:center !important; margin:0 24px !important;
}
.ak-cta-band h2{ color:#fff !important; margin-bottom:12px !important; }
.ak-cta-band p{ color:rgba(255,255,255,.8) !important; max-width:560px !important; margin:0 auto 28px !important; }
.ak-cta-band .ak-hero-actions{ justify-content:center !important; }

/* Values accordion-ish list */
.ak-value-row{ display:grid !important; grid-template-columns:220px 1fr !important; gap:32px !important; padding:28px 0 !important; border-top:1px solid var(--border) !important; }
.ak-value-row:last-child{ border-bottom:1px solid var(--border) !important; }
.ak-value-row h3{ margin:0 !important; }
.ak-value-row p{ margin:0 !important; }

/* Contact */
.ak-contact-grid{ display:grid !important; grid-template-columns:.9fr 1.1fr !important; gap:48px !important; align-items:start !important; }
.ak-contact-card{ background:var(--bg-soft) !important; border:1px solid var(--border) !important; border-radius:var(--radius) !important; padding:32px !important; margin-bottom:20px !important; }
.ak-contact-card h3{ margin-bottom:6px !important; }
.ak-contact-card a{ color:var(--blue) !important; font-weight:600 !important; }
.ak-form-card{ background:#fff !important; border:1px solid var(--border) !important; border-radius:var(--radius) !important; padding:40px !important; box-shadow:var(--shadow-sm) !important; }
.ak-form-row{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:20px !important; }
.ak-field{ margin-bottom:20px !important; }
.ak-field label{ display:block !important; font-family:var(--ff-head) !important; font-size:13.5px !important; font-weight:600 !important; color:var(--navy) !important; margin-bottom:8px !important; }
.ak-field input, .ak-field textarea{
  width:100% !important; padding:13px 16px !important; border:1.5px solid var(--border) !important; border-radius:var(--radius-sm) !important;
  font-family:var(--ff) !important; font-size:15px !important; color:var(--ink) !important; background:#fff !important; transition:.15s !important;
}
.ak-field input:focus, .ak-field textarea:focus{ outline:none !important; border-color:var(--blue) !important; }
.ak-field textarea{ resize:vertical !important; min-height:130px !important; }
.ak-form-note{ font-size:13px !important; color:var(--gray-light) !important; margin-top:14px !important; }
.ak-form-success{ background:#e9f9ee !important; border:1px solid #bfe8cc !important; color:#1c7a3d !important; padding:16px 20px !important; border-radius:var(--radius-sm) !important; margin-bottom:24px !important; font-size:14.5px !important; }
.ak-form-error{ background:#fdecec !important; border:1px solid #f3bcbc !important; color:#a72525 !important; padding:16px 20px !important; border-radius:var(--radius-sm) !important; margin-bottom:24px !important; font-size:14.5px !important; }

/* Legal / policy content */
.ak-policy{ max-width:820px !important; margin:0 auto !important; }
.ak-policy h2{ margin-top:44px !important; }
.ak-policy h2:first-child{ margin-top:0 !important; }
.ak-policy ul{ margin:0 0 20px !important; padding-left:0 !important; }
.ak-policy li{ position:relative !important; padding-left:22px !important; margin-bottom:10px !important; color:var(--gray) !important; }
.ak-policy li::before{ content:"—" !important; position:absolute !important; left:0 !important; color:var(--blue) !important; }
.ak-policy .ak-updated{ color:var(--gray-light) !important; font-size:14px !important; margin-bottom:40px !important; }

/* Footer */
.ak-site-footer{ background:var(--navy) !important; color:rgba(255,255,255,.7) !important; padding:64px 0 28px !important; }
.ak-footer-grid{ display:grid !important; grid-template-columns:1.4fr 1fr 1fr !important; gap:48px !important; margin-bottom:48px !important; }
.ak-footer-grid .ak-brand{ color:#fff !important; margin-bottom:14px !important; }
.ak-footer-grid p{ color:rgba(255,255,255,.55) !important; font-size:14.5px !important; }
.ak-footer-col h4{ color:#fff !important; font-family:var(--ff-head) !important; font-size:14px !important; letter-spacing:.5px !important; text-transform:uppercase !important; margin-bottom:18px !important; }
.ak-footer-col a{ display:block !important; font-size:14.5px !important; color:rgba(255,255,255,.65) !important; margin-bottom:12px !important; }
.ak-footer-col a:hover{ color:#fff !important; }
.ak-social-links{ display:flex !important; gap:10px !important; margin-top:20px !important; }
.ak-social-links a{
  width:34px !important; height:34px !important; border-radius:50% !important; background:rgba(255,255,255,.08) !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  font-family:var(--ff-head) !important; font-size:12px !important; font-weight:700 !important; color:rgba(255,255,255,.75) !important;
  transition:.2s ease !important; margin-bottom:0 !important;
}
.ak-social-links a:hover{ background:var(--blue) !important; color:#fff !important; }
.ak-footer-bottom{ border-top:1px solid rgba(255,255,255,.12) !important; padding-top:24px !important; display:flex !important; justify-content:space-between !important; flex-wrap:wrap !important; gap:12px !important; font-size:13.5px !important; color:rgba(255,255,255,.5) !important; }

/* Responsive */
@media (max-width:960px){
  .ak-grid-4{ grid-template-columns:repeat(2,1fr) !important; }
  .ak-grid-3{ grid-template-columns:repeat(2,1fr) !important; }
  .ak-steps{ grid-template-columns:repeat(2,1fr) !important; }
  .ak-split{ grid-template-columns:1fr !important; gap:36px !important; }
  .ak-contact-grid{ grid-template-columns:1fr !important; }
  .ak-footer-grid{ grid-template-columns:1fr !important; }
  .ak-nav-links{ display:none !important; }
  .ak-hero-grid{ grid-template-columns:1fr !important; gap:48px !important; }
  .ak-hero-media{ max-width:320px !important; order:-1 !important; }
}
@media (max-width:640px){
  .ak-grid-4, .ak-grid-3, .ak-grid-2, .ak-steps{ grid-template-columns:1fr !important; }
  .ak-section{ padding:64px 0 !important; }
  .ak-form-row{ grid-template-columns:1fr !important; }
  .ak-cta-band{ margin:0 16px !important; padding:48px 24px !important; }
  .ak-value-row{ grid-template-columns:1fr !important; gap:10px !important; }
}