/* ============================================================
   SaudiaVisa — Design System
   Palette: deep navy + warm gold + sand, Islamic-geometric motifs
   ============================================================ */

:root{
  --navy-900:#081b33;
  --navy-800:#0d2b4e;
  --navy-700:#123a66;
  --gold-500:#c9a45c;
  --gold-400:#d9bd82;
  --terracotta:#b5562f;
  --sand-100:#f8f4ea;
  --sand-200:#f1ead9;
  --white:#ffffff;
  --ink-900:#171b21;
  --ink-600:#4d5661;
  --ink-400:#8791a0;
  --line:#e4ddc9;
  --success:#2f7d5a;
  --radius-sm:6px;
  --radius-md:12px;
  --radius-lg:22px;
  --shadow-card:0 10px 30px rgba(13,43,78,.08);
  --shadow-lift:0 18px 40px rgba(13,43,78,.16);
  --max:1180px;
  color-scheme: light;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--ink-900);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}
h1,h2,h3,h4{
  font-family:'Poppins','Inter',system-ui,sans-serif;
  font-weight:600;
  line-height:1.2;
  margin:0 0 .5em;
  color:var(--navy-900);
}
h1{font-size:clamp(2.1rem,4.5vw,3.4rem); font-weight:700;}
h2{font-size:clamp(1.5rem,3vw,2.2rem);}
h3{font-size:clamp(1.15rem,2vw,1.4rem);}
p{margin:0 0 1em; color:var(--ink-600);}
a{color:var(--navy-700); text-decoration:none;}
a:hover{color:var(--gold-500);}
img{max-width:100%; display:block;}
ul{padding-left:1.2em;}
.container{max-width:var(--max); margin:0 auto; padding:0 24px;}
section{padding:72px 0;}
.section-tight{padding:48px 0;}
.section-sand{background:var(--sand-100);}
.section-navy{background:var(--navy-900); color:var(--white);}
.section-navy h1,.section-navy h2,.section-navy h3{color:var(--white);}
.section-navy p{color:#c7d0dd;}

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.78rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--gold-500); margin-bottom:14px;
}
.eyebrow::before{content:""; width:22px; height:2px; background:var(--gold-500); display:inline-block;}

.lede{font-size:1.15rem; max-width:640px;}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 28px; border-radius:999px; font-weight:600; font-size:.98rem;
  cursor:pointer; border:2px solid transparent; transition:.2s ease;
}
.btn-primary{background:var(--gold-500); color:var(--navy-900);}
.btn-primary:hover{background:var(--gold-400); color:var(--navy-900); transform:translateY(-1px);}
.btn-outline{border-color:var(--white); color:var(--white); background:transparent;}
.btn-outline:hover{background:var(--white); color:var(--navy-900);}
.btn-outline-navy{border-color:var(--navy-800); color:var(--navy-800); background:transparent;}
.btn-outline-navy:hover{background:var(--navy-800); color:var(--white);}
.btn-block{width:100%;}
.btn-sm{padding:9px 18px; font-size:.85rem;}

/* ---------------- Header ---------------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:var(--navy-900);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  height:78px;
}
.brand{display:flex; align-items:center; gap:10px; font-family:'Poppins',sans-serif; font-weight:700; font-size:1.25rem; color:var(--white);}
.brand .mark{
  width:38px;height:38px;border-radius:10px;
  background:linear-gradient(135deg,var(--gold-500),var(--terracotta));
  display:flex;align-items:center;justify-content:center;color:var(--navy-900);font-weight:800;
}
.brand small{display:block; font-size:.6rem; font-weight:500; letter-spacing:.08em; color:var(--gold-400); text-transform:uppercase;}
.main-nav{display:flex; align-items:center; gap:30px;}
.main-nav a{color:#d7dee9; font-weight:500; font-size:.94rem;}
.main-nav a:hover,.main-nav a.active{color:var(--gold-400);}
.nav-toggle{display:none; background:none; border:0; color:var(--white); font-size:1.6rem; cursor:pointer;}
.header-cta{display:flex; align-items:center; gap:16px;}

/* ---------------- Hero ---------------- */
.hero{
  position:relative; overflow:hidden;
  background:radial-gradient(1200px 500px at 80% -10%, #163a63 0%, var(--navy-900) 60%);
  color:var(--white); padding:96px 0 110px;
}
.hero::before{
  content:""; position:absolute; inset:0; opacity:.14; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23C9A45C' stroke-width='1'%3E%3Cpath d='M60 0 L120 60 L60 120 L0 60 Z'/%3E%3Ccircle cx='60' cy='60' r='42'/%3E%3Cpath d='M60 18 L102 60 L60 102 L18 60 Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size:220px 220px;
}
.hero-grid{position:relative; display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center;}
.hero h1{font-size:clamp(2.3rem,4.6vw,3.6rem); color:var(--white);}
.hero .lede{color:#cdd6e4; font-size:1.15rem;}
.hero-actions{display:flex; gap:14px; margin-top:28px; flex-wrap:wrap;}
.hero-card{
  background:var(--white); border-radius:var(--radius-lg); padding:28px;
  box-shadow:var(--shadow-lift); color:var(--ink-900);
}
.hero-card h3{margin-bottom:4px;}
.hero-card .muted{color:var(--ink-400); font-size:.85rem; margin-bottom:18px;}
.country-search{position:relative;}
.country-search input{
  width:100%; padding:14px 16px; border-radius:var(--radius-sm); border:1.5px solid var(--line);
  font-size:1rem; font-family:inherit;
}
.country-search input:focus{outline:2px solid var(--gold-500); border-color:var(--gold-500);}
.country-search-results{
  position:absolute; left:0; right:0; top:calc(100% + 6px);
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-sm);
  box-shadow:var(--shadow-card); max-height:220px; overflow-y:auto; z-index:20; display:none;
}
.country-search-results.open{display:block;}
.country-search-results a{display:block; padding:10px 14px; color:var(--ink-900); font-size:.92rem; border-bottom:1px solid var(--sand-200);}
.country-search-results a:hover{background:var(--sand-100); color:var(--navy-800);}
.search-empty{padding:10px 14px; color:var(--ink-400); font-size:.88rem;}

.stat-row{display:flex; gap:28px; margin-top:26px; flex-wrap:wrap;}
.stat-row .stat b{display:block; font-size:1.6rem; color:var(--gold-400); font-family:'Poppins',sans-serif;}
.stat-row .stat span{font-size:.82rem; color:#aeb9c9;}

/* ---------------- Steps ---------------- */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:40px;}
.step-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:30px 26px; box-shadow:var(--shadow-card); position:relative;
}
.step-num{
  font-family:'Poppins',sans-serif; font-weight:700; font-size:2rem; color:var(--gold-500);
  opacity:.9; margin-bottom:10px;
}

/* ---------------- Cards / grids ---------------- */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:26px;}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
.card{background:var(--white); border:1px solid var(--line); border-radius:var(--radius-md); padding:28px; box-shadow:var(--shadow-card);}
.card .icon{
  width:48px;height:48px;border-radius:12px; background:var(--sand-200); color:var(--terracotta);
  display:flex; align-items:center; justify-content:center; font-size:1.4rem; margin-bottom:16px;
}
.badge{
  display:inline-block; background:var(--sand-200); color:var(--navy-800); font-size:.75rem;
  font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:4px 10px; border-radius:999px;
}

/* ---------------- Countries hub ---------------- */
.region-tabs{display:flex; gap:10px; flex-wrap:wrap; margin:28px 0;}
.region-tab{
  padding:9px 18px; border-radius:999px; border:1.5px solid var(--line); background:var(--white);
  font-size:.88rem; font-weight:600; color:var(--ink-600); cursor:pointer;
}
.region-tab.active,.region-tab:hover{border-color:var(--navy-800); color:var(--navy-800); background:var(--sand-100);}
.country-region{margin-bottom:36px;}
.country-region h2{border-bottom:2px solid var(--line); padding-bottom:10px;}
.country-list{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:18px;}
.country-pill{
  display:flex; align-items:center; gap:10px; padding:12px 14px; background:var(--white);
  border:1px solid var(--line); border-radius:var(--radius-sm); font-size:.92rem; font-weight:500; color:var(--ink-900);
}
.country-pill:hover{border-color:var(--gold-500); background:var(--sand-100);}
.flag-chip{width:26px; height:20px; border-radius:3px; background:var(--navy-700); flex:none;
  display:flex;align-items:center;justify-content:center;font-size:.7rem;color:var(--white);font-weight:700;}

/* ---------------- Country detail page ---------------- */
.breadcrumb{font-size:.85rem; color:var(--ink-400); margin-bottom:18px;}
.breadcrumb a{color:var(--ink-400);}
.breadcrumb a:hover{color:var(--navy-800);}
.country-hero{background:var(--navy-900); color:var(--white); padding:56px 0;}
.country-hero h1{color:var(--white);}
.country-hero .lede{color:#cdd6e4;}
.country-hero .breadcrumb,.country-hero .breadcrumb a{color:#9fb0c7;}
.country-hero .flag-chip{width:48px; height:34px; font-size:1rem; border-radius:6px;}
.country-hero-top{display:flex; align-items:center; gap:16px; margin-bottom:14px;}
.info-table{width:100%; border-collapse:collapse; margin:18px 0;}
.info-table th,.info-table td{text-align:left; padding:12px 16px; border-bottom:1px solid var(--line); font-size:.95rem;}
.info-table th{color:var(--ink-400); font-weight:600; width:44%;}
.checklist{list-style:none; padding:0; margin:18px 0;}
.checklist li{display:flex; gap:12px; padding:10px 0; border-bottom:1px solid var(--sand-200); color:var(--ink-600);}
.checklist li::before{content:"✓"; color:var(--success); font-weight:800; flex:none;}
.two-col{display:grid; grid-template-columns:1fr .62fr; gap:48px; align-items:start;}

/* ---------------- FAQ ---------------- */
.faq-item{border:1px solid var(--line); border-radius:var(--radius-sm); margin-bottom:12px; overflow:hidden; background:var(--white);}
.faq-q{
  width:100%; text-align:left; padding:18px 20px; background:none; border:0; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center; font-weight:600; font-family:inherit; font-size:1rem; color:var(--navy-900);
}
.faq-q .plus{font-size:1.3rem; color:var(--gold-500); transition:.2s;}
.faq-item.open .plus{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .25s ease; padding:0 20px;}
.faq-item.open .faq-a{max-height:400px; padding:0 20px 20px;}

/* ---------------- Pricing ---------------- */
.pricing-card{background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); padding:34px; box-shadow:var(--shadow-card); display:flex; flex-direction:column;}
.pricing-card.featured{border-color:var(--gold-500); box-shadow:var(--shadow-lift); position:relative; transform:translateY(-8px);}
.pricing-card .price{font-family:'Poppins',sans-serif; font-size:2.4rem; font-weight:700; color:var(--navy-900); margin:6px 0 18px;}
.pricing-card .price span{font-size:1rem; color:var(--ink-400); font-weight:500;}
.pricing-card ul{list-style:none; padding:0; margin:0 0 24px; flex:1;}
.pricing-card ul li{padding:9px 0; border-bottom:1px solid var(--sand-200); color:var(--ink-600); font-size:.93rem;}

/* ---------------- Testimonials ---------------- */
.testimonial{background:var(--white); border:1px solid var(--line); border-radius:var(--radius-md); padding:26px; box-shadow:var(--shadow-card);}
.stars{color:var(--gold-500); letter-spacing:2px; margin-bottom:10px;}
.testimonial .who{font-weight:700; color:var(--navy-900); margin-top:14px;}
.testimonial .who small{display:block; font-weight:400; color:var(--ink-400);}

/* ---------------- Blog ---------------- */
.post-card{background:var(--white); border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-card);}
.post-card .thumb{height:160px; background:linear-gradient(135deg,var(--navy-800),var(--navy-700));}
.post-card .body{padding:22px;}
.post-meta{font-size:.8rem; color:var(--ink-400); margin-bottom:10px; text-transform:uppercase; letter-spacing:.04em;}
article.prose h2{margin-top:1.6em;}
article.prose h3{margin-top:1.2em;}
article.prose p, article.prose li{color:var(--ink-600); font-size:1.02rem;}

/* ---------------- CTA band ---------------- */
.cta-band{background:linear-gradient(120deg,var(--navy-900),var(--navy-700)); color:var(--white); border-radius:var(--radius-lg); padding:52px; text-align:center;}
.cta-band h2{color:var(--white);}
.cta-band p{color:#cdd6e4; max-width:560px; margin-left:auto; margin-right:auto;}

/* ---------------- Forms ---------------- */
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.field{margin-bottom:18px;}
.field label{display:block; font-weight:600; font-size:.88rem; margin-bottom:6px; color:var(--navy-900);}
.field input,.field select,.field textarea{
  width:100%; padding:12px 14px; border:1.5px solid var(--line); border-radius:var(--radius-sm);
  font-family:inherit; font-size:.95rem; background:var(--white);
}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--gold-500); border-color:var(--gold-500);}
.form-note{font-size:.82rem; color:var(--ink-400);}

/* ---------------- Footer ---------------- */
.site-footer{background:var(--navy-900); color:#b9c3d3; padding:60px 0 24px;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px;}
.site-footer h4{color:var(--white); font-size:.95rem; margin-bottom:16px;}
.site-footer a{color:#b9c3d3; font-size:.9rem; display:block; margin-bottom:10px;}
.site-footer a:hover{color:var(--gold-400);}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1); margin-top:44px; padding-top:22px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:.8rem; color:#8593a8;}
.disclaimer-bar{background:var(--sand-200); color:var(--ink-600); font-size:.82rem; text-align:center; padding:10px 16px;}
.disclaimer-bar a{font-weight:600;}

/* ---------------- Misc ---------------- */
.wa-float{
  position:fixed; bottom:24px; right:24px; z-index:90; width:58px; height:58px; border-radius:50%;
  background:#25D366; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-lift);
  color:#fff; font-size:1.6rem;
}
.skip-link{position:absolute; left:-999px; top:0; background:var(--gold-500); color:var(--navy-900); padding:10px 16px; z-index:200;}
.skip-link:focus{left:12px; top:12px;}

/* ---------------- Responsive ---------------- */
@media(max-width:960px){
  .hero-grid{grid-template-columns:1fr;}
  .grid-3,.grid-2,.grid-4{grid-template-columns:1fr 1fr;}
  .country-list{grid-template-columns:1fr 1fr;}
  .two-col{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .pricing-card.featured{transform:none;}
}
@media(max-width:880px){
  .main-nav{
    position:fixed; inset:78px 0 0 0; background:var(--navy-900); flex-direction:column; align-items:flex-start;
    padding:26px 24px; gap:20px; display:none; overflow-y:auto; z-index:150;
  }
  .main-nav a{font-size:1.05rem;}
  .main-nav.open{display:flex;}
  .nav-toggle{display:block;}
  .header-cta .btn-outline{display:none;}
}
@media(max-width:680px){
  .grid-3,.grid-2,.grid-4,.country-list,.footer-grid,.form-grid{grid-template-columns:1fr;}
  .steps{grid-template-columns:1fr;}
  section{padding:52px 0;}
  .cta-band{padding:34px 22px;}
}