/* ======================================================================
   Three Seven theme — assets/css/style.css
   هوية بصرية مستوحاة من 3reeseven.com (بنفسجي/كريمي) وتم بناؤها من الصفر
   لتعمل ضمن نظام القوالب (Twig) الخاص بالسكربت.
   ====================================================================== */

:root{
  --purple: #7E3795;
  --purple-2: #6a2c81;
  --purple-dark: #601E75;
  --purple-light: #9c5cb3;
  --purple-soft: rgba(126,55,149,.08);
  --purple-soft-2: rgba(126,55,149,.14);
  --cream: #FAF6F4;
  --dark: #16101c;
  --dark-2: #211a29;
  --dark-3: #2c2236;
  --text: #343350;
  --text-rgb: 52,51,80;
  --muted: rgba(var(--text-rgb),.62);
  --white: #ffffff;
  --surface: #ffffff;
  --success: #00B955;
  --radius: 16px;
}

/* ===== Dark mode ===== */
[data-theme="dark"]{
  --cream: #241c2e;
  --white: #16101c;
  --surface: #211a29;
  --text: #F1EEFB;
  --text-rgb: 241,238,251;
  --muted: rgba(241,238,251,.62);
  --purple-soft: rgba(156,92,179,.14);
  --purple-soft-2: rgba(156,92,179,.2);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}

body{
  background:var(--white);
  color:var(--text);
  font-family:'Tajawal', sans-serif;
  overflow-x:hidden;
  transition:background-color .3s ease, color .3s ease;
}

body, .navbar, .navbar-collapse, .solution-card, .service-card, .category-card, .why-card,
.sector-card, .project-card, .team-card, .client-logo-card, footer, .policy-toc,
.other-pages-card, .contact-card, .form-control, .form-select, .filter-pill, .result-card,
.icon-btn, .social-circle, .team-social a{
  transition:background-color .3s ease, border-color .3s ease, color .3s ease, box-shadow .3s ease;
}

a{text-decoration:none;}
h1,h2,h3,h4,h5,.display-font{font-family:'Tajawal', sans-serif; font-weight:800; color:var(--text);}

/* ===== Scroll progress + back to top ===== */
.scroll-progress{position:fixed; top:0; right:0; left:0; height:3px; z-index:1100; background:transparent;}
.scroll-progress-bar{height:100%; width:0%; background:linear-gradient(90deg, var(--purple), var(--purple-light)); transition:width .1s linear;}

.back-to-top{
  position:fixed; bottom:26px; left:26px; z-index:900;
  width:46px; height:46px; border-radius:50%;
  background:var(--purple);
  border:none; color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:1.2rem;
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:.3s ease;
  box-shadow:0 10px 24px rgba(126,55,149,.35);
  cursor:pointer;
}
.back-to-top.show{opacity:1; visibility:visible; transform:translateY(0);}
.back-to-top:hover{background:var(--purple-dark);}

/* ===== Floating quick-contact button ===== */
.fab-contact{position:fixed; bottom:26px; right:26px; z-index:950; display:flex; flex-direction:column; align-items:center;}
.fab-items{display:flex; flex-direction:column-reverse; align-items:center; gap:12px; margin-bottom:12px;}
.fab-item{
  width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:#fff !important; font-size:1.2rem; box-shadow:0 8px 20px rgba(var(--text-rgb),.22);
  opacity:0; transform:translateY(14px) scale(.6); pointer-events:none;
  transition:opacity .22s ease, transform .22s ease, background-color .25s ease;
}
.fab-contact.open .fab-item{opacity:1; transform:translateY(0) scale(1); pointer-events:auto;}
.fab-items .fab-item:nth-child(1){transition-delay:.03s;}
.fab-items .fab-item:nth-child(2){transition-delay:.08s;}
.fab-items .fab-item:nth-child(3){transition-delay:.13s;}
.fab-whatsapp{background:#25D366;}
.fab-whatsapp:hover{background:#1fb956;}
.fab-phone{background:var(--purple-light);}
.fab-phone:hover{background:var(--purple);}
.fab-email{background:var(--purple-dark);}
.fab-email:hover{background:var(--purple-2);}

.fab-main{
  width:58px; height:58px; border-radius:50%; border:none; cursor:pointer;
  background:var(--purple); color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:1.35rem; box-shadow:0 10px 26px rgba(126,55,149,.4);
  transition:background-color .25s ease, transform .25s ease; position:relative; flex-shrink:0;
}
.fab-main:hover{background:var(--purple-dark); transform:translateY(-2px);}
.fab-contact.open .fab-main{background:var(--purple-dark);}
.fab-icon-plus, .fab-icon-close{transition:transform .25s ease, opacity .2s ease; position:absolute;}
.fab-icon-close{opacity:0; transform:rotate(-90deg) scale(.5);}
.fab-icon-plus{opacity:1; transform:rotate(0) scale(1);}
.fab-contact.open .fab-icon-plus{opacity:0; transform:rotate(90deg) scale(.5);}
.fab-contact.open .fab-icon-close{opacity:1; transform:rotate(0) scale(1);}

@media (max-width:575px){
  .fab-contact{bottom:18px; right:18px;}
  .fab-main{width:52px; height:52px; font-size:1.15rem;}
  .fab-item{width:44px; height:44px; font-size:1.05rem;}
}

/* ===== Reveal on scroll ===== */
.reveal{transition:opacity .7s ease, transform .7s ease;}
.js-ready .reveal{opacity:0; transform:translateY(24px);}
.reveal.show{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none;}
  html{scroll-behavior:auto;}
}
.row > .reveal:nth-child(1){transition-delay:.02s;}
.row > .reveal:nth-child(2){transition-delay:.08s;}
.row > .reveal:nth-child(3){transition-delay:.14s;}
.row > .reveal:nth-child(4){transition-delay:.20s;}
.row > .reveal:nth-child(5){transition-delay:.26s;}
.row > .reveal:nth-child(6){transition-delay:.32s;}
.row > .reveal:nth-child(7){transition-delay:.38s;}
.row > .reveal:nth-child(8){transition-delay:.44s;}

/* ===== Buttons ===== */
.btn-brand{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--purple); color:#fff !important;
  font-weight:700; border:none;
  padding:12px 28px; border-radius:10px;
  transition:.25s;
}
.btn-brand:hover{background:var(--purple-dark); transform:translateY(-2px); color:#fff;}
.btn-brand i{transition:transform .25s ease;}
.btn-brand:hover i{transform:translateX(-5px);}

.btn-outline-brand{
  display:inline-flex; align-items:center; gap:8px;
  border:1.5px solid rgba(255,255,255,.4);
  color:#fff; padding:12px 28px; border-radius:10px; font-weight:700; transition:.25s;
}
.btn-outline-brand:hover{border-color:#fff; background:rgba(255,255,255,.1); color:#fff;}

.btn-outline-purple{
  display:inline-flex; align-items:center; gap:8px;
  border:1.5px solid rgba(126,55,149,.35);
  color:var(--purple); padding:12px 28px; border-radius:10px; font-weight:700; transition:.25s;
}
.btn-outline-purple:hover{border-color:var(--purple); background:var(--purple-soft); color:var(--purple);}

/* ===== Navbar ===== */
.navbar{
  position:fixed; top:0; right:0; left:0; z-index:1000;
  padding:16px 0;
  background:var(--surface);
  box-shadow:0 2px 18px rgba(var(--text-rgb),.06);
  transition:.3s ease;
}
.navbar.scrolled{padding:10px 0; box-shadow:0 6px 24px rgba(var(--text-rgb),.12);}
.navbar .brand-name{font-weight:800; font-size:1.2rem; color:var(--text);}
.navbar .brand-mark{
  width:38px; height:38px; border-radius:10px;
  background:linear-gradient(135deg, var(--purple), var(--purple-light));
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:900; font-size:1rem; flex-shrink:0;
}
.nav-link{color:var(--text) !important; font-weight:600; padding:8px 16px !important; position:relative;}
.nav-link::after{content:''; position:absolute; right:16px; bottom:2px; width:0; height:2px; background:var(--purple); transition:width .25s ease;}
.nav-link:hover::after, .nav-link.active::after{width:calc(100% - 32px);}
.nav-link:hover, .nav-link.active{color:var(--purple) !important;}

.icon-btn{
  width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%; border:1px solid rgba(var(--text-rgb),.15); color:var(--text);
  background:transparent; font-size:.95rem; transition:.25s; cursor:pointer;
}
.icon-btn:hover{background:var(--purple); color:#fff; border-color:var(--purple);}

.theme-toggle .icon-sun{display:none;}
[data-theme="dark"] .theme-toggle .icon-moon{display:none;}
[data-theme="dark"] .theme-toggle .icon-sun{display:inline-block;}

.navbar-toggler{border-color:rgba(var(--text-rgb),.2);}
[data-theme="dark"] .navbar-toggler-icon{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28241, 238, 251, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

@media (max-width:991.98px){
  .navbar-collapse{
    background:var(--surface); border:1px solid rgba(var(--text-rgb),.08);
    border-radius:16px; margin-top:14px; padding:18px 20px 20px;
    box-shadow:0 18px 40px rgba(var(--text-rgb),.12);
  }
  .navbar-collapse .nav-item{border-bottom:1px solid rgba(var(--text-rgb),.06);}
  .navbar-collapse .nav-item:last-child{border-bottom:none;}
  .navbar-collapse .nav-link{padding:12px 4px !important;}
}

/* ===== Hero (Home) ===== */
.hero{
  position:relative; min-height:92vh; display:flex; align-items:center;
  padding-top:110px; overflow:hidden;
  background:
    radial-gradient(circle at 88% 15%, rgba(126,55,149,.55), transparent 45%),
    radial-gradient(circle at 8% 90%, rgba(155,92,179,.35), transparent 45%),
    linear-gradient(160deg, var(--dark) 0%, var(--dark-3) 100%);
}
.hero .grid-overlay{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse 80% 70% at 50% 30%, #000 40%, transparent 90%);
  pointer-events:none;
}
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.06);
  color:#fff; padding:7px 18px; border-radius:30px; font-size:.85rem; font-weight:600; margin-bottom:22px;
}
.hero-eyebrow .dot{width:7px; height:7px; border-radius:50%; background:var(--purple-light); box-shadow:0 0 0 4px rgba(155,92,179,.3);}
.hero h1{color:#fff; font-size:clamp(2rem, 4.4vw, 3.4rem); line-height:1.3; position:relative; z-index:2;}
.hero h1 span{color:var(--purple-light);}
.hero p.lead{color:rgba(255,255,255,.72); font-size:1.1rem; max-width:560px; position:relative; z-index:2;}
.hero-actions{position:relative; z-index:2;}

.hero-widget{
  position:relative; z-index:2;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16);
  border-radius:20px; padding:26px 28px; backdrop-filter:blur(6px);
}
.hero-widget h4{color:#fff; font-size:1.05rem; margin-bottom:16px;}
.hero-widget .mini-list{list-style:none; padding:0; margin:0;}
.hero-widget .mini-list li{
  display:flex; align-items:center; gap:10px;
  color:rgba(255,255,255,.9); padding:11px 0; border-bottom:1px solid rgba(255,255,255,.12); font-weight:600; font-size:.92rem;
}
.hero-widget .mini-list li:last-child{border-bottom:none;}
.hero-widget .mini-list li i{color:var(--purple-light);}

/* ===== Section heading pattern ===== */
.section{padding:90px 0;}
.section-alt{background:var(--cream);}
.section-head{max-width:640px; margin-bottom:44px;}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}
.section-eyebrow{
  color:var(--purple); font-weight:800; letter-spacing:1px; font-size:.85rem;
  display:inline-flex; align-items:center; gap:10px;
}
.section-eyebrow::before{content:''; width:26px; height:2px; background:var(--purple); display:inline-block;}
.section-head.center .section-eyebrow::before{display:none;}
.section-title{font-size:clamp(1.7rem,3vw,2.3rem); margin-top:10px;}
.section-desc{color:var(--muted); margin-top:12px; font-size:1rem;}

.grid{display:grid; gap:26px;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:991px){.grid-3, .grid-4{grid-template-columns:repeat(2,1fr);}}
@media (max-width:575px){.grid-2, .grid-3, .grid-4{grid-template-columns:1fr;}}

/* ===== Solutions / Services (icon-circle cards) ===== */
.solution-card{
  background:var(--surface); border:1px solid rgba(var(--text-rgb),.07); border-radius:var(--radius);
  padding:34px 24px; text-align:center; height:100%; transition:.3s ease;
}
.solution-card:hover{transform:translateY(-6px); box-shadow:0 20px 40px rgba(var(--text-rgb),.1); border-color:transparent;}
.solution-icon{
  width:64px; height:64px; border-radius:50%; margin:0 auto 18px;
  background:var(--purple-soft); color:var(--purple);
  display:flex; align-items:center; justify-content:center; font-size:1.5rem;
  transition:.3s ease;
}
.solution-card:hover .solution-icon{background:var(--purple); color:#fff;}
.solution-card h4{font-size:1rem; margin-bottom:0;}
.solution-card p{color:var(--muted); font-size:.9rem; margin-top:10px; margin-bottom:0;}

/* Larger service card with description + link (services list page) */
.service-card{
  background:var(--surface); border:1px solid rgba(var(--text-rgb),.07); border-radius:var(--radius);
  padding:32px 26px; height:100%; transition:.3s ease;
}
.service-card:hover{transform:translateY(-8px); box-shadow:0 20px 40px rgba(var(--text-rgb),.1);}
.service-icon{
  width:58px; height:58px; border-radius:16px; background:var(--purple-soft); color:var(--purple);
  display:flex; align-items:center; justify-content:center; margin-bottom:20px; font-size:1.4rem;
}
.service-card h4{font-size:1.1rem;}
.service-card p{color:var(--muted); font-size:.92rem; margin-bottom:0;}
.card-link{display:inline-flex; align-items:center; gap:6px; color:var(--purple); font-weight:700; font-size:.88rem; margin-top:14px;}

.category-card{
  background:var(--surface); border:1px solid rgba(var(--text-rgb),.07); border-radius:var(--radius);
  padding:34px 28px; height:100%; text-align:center; transition:.3s ease;
}
.category-card:hover{transform:translateY(-6px); box-shadow:0 20px 40px rgba(var(--text-rgb),.1);}
.category-card h4{font-size:1.05rem; margin:0;}

/* ===== Why choose us (feature grid) ===== */
.why-card{
  background:var(--surface); border:1px solid rgba(var(--text-rgb),.06); border-radius:var(--radius);
  padding:28px 24px; height:100%; transition:.3s ease;
}
.why-card:hover{transform:translateY(-5px); box-shadow:0 16px 32px rgba(var(--text-rgb),.08);}
.why-icon{
  width:52px; height:52px; border-radius:14px; background:var(--purple-soft); color:var(--purple);
  display:flex; align-items:center; justify-content:center; font-size:1.3rem; margin-bottom:16px;
}
.why-card h5{font-size:1.02rem; margin-bottom:8px;}
.why-card p{color:var(--muted); font-size:.88rem; margin-bottom:0; line-height:1.8;}

/* ===== Sectors we serve ===== */
.sector-card{
  background:var(--surface); border:1px solid rgba(var(--text-rgb),.07); border-radius:var(--radius);
  padding:30px 20px; text-align:center; height:100%; transition:.3s ease;
}
.sector-card:hover{transform:translateY(-5px); box-shadow:0 16px 32px rgba(var(--text-rgb),.08);}
.sector-icon{
  width:60px; height:60px; border-radius:50%; margin:0 auto 16px;
  background:linear-gradient(135deg, var(--purple), var(--purple-light));
  color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.4rem;
}
.sector-card h5{font-size:.98rem; margin:0;}

/* ===== Stats strip ===== */
.stats-band{
  background:linear-gradient(120deg, var(--purple) 0%, var(--purple-dark) 100%);
  padding:52px 0; position:relative; overflow:hidden;
}
.stats-band::before{
  content:''; position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(ellipse 90% 100% at 50% 50%, #000 40%, transparent 95%);
}
.stats-grid{position:relative; z-index:1; display:grid; grid-template-columns:repeat(4,1fr); gap:20px; text-align:center;}
@media (max-width:767px){.stats-grid{grid-template-columns:repeat(2,1fr);}}
.stat-item .stat-number{color:#fff; font-weight:900; font-size:2.1rem;}
.stat-item .stat-label{color:rgba(255,255,255,.8); font-size:.88rem; font-weight:600; margin-top:4px;}

/* ===== Portfolio / Projects ===== */
.project-card{
  background:var(--surface); border:1px solid rgba(var(--text-rgb),.07); border-radius:var(--radius);
  overflow:hidden; height:100%; transition:.35s ease; display:block;
}
.project-card:hover{transform:translateY(-8px); box-shadow:0 20px 40px rgba(var(--text-rgb),.12);}
.project-thumb, .project-visual{
  height:190px; position:relative; overflow:hidden;
  background:linear-gradient(135deg, var(--purple-soft-2), rgba(155,92,179,.18));
  display:flex; align-items:center; justify-content:center;
}
.project-thumb img, .project-visual img{width:100%; height:100%; object-fit:cover;}
.project-visual i{font-size:2.6rem; color:var(--purple);}
.project-cat, .project-tag{
  position:absolute; top:14px; inset-inline-start:14px;
  background:rgba(255,255,255,.95); color:var(--purple); font-size:.72rem; font-weight:800;
  padding:5px 14px; border-radius:20px;
}
.project-body{padding:22px 24px;}
.project-body h3, .project-body h5{font-size:1.05rem; margin-bottom:8px;}
.project-body p, .project-card .meta{color:var(--muted); font-size:.88rem; margin-bottom:0;}

/* ===== Team ===== */
.team-card{background:var(--surface); border:1px solid rgba(var(--text-rgb),.07); border-radius:var(--radius); padding:30px 22px; text-align:center; height:100%; transition:.3s ease;}
.team-card:hover{transform:translateY(-6px); box-shadow:0 20px 40px rgba(var(--text-rgb),.1);}
.team-photo{width:96px; height:96px; border-radius:50%; overflow:hidden; margin:0 auto 16px; background:var(--purple-soft); display:flex; align-items:center; justify-content:center;}
.team-photo img{width:100%; height:100%; object-fit:cover;}
.team-photo i{font-size:2.2rem; color:var(--purple);}
.team-card h3{font-size:1rem; margin-bottom:4px;}
.team-position{color:var(--purple); font-weight:700; font-size:.85rem; margin-bottom:8px;}
.team-bio{color:var(--muted); font-size:.85rem; margin-bottom:10px;}
.team-social{display:flex; align-items:center; justify-content:center; gap:8px;}
.team-social a{width:32px; height:32px; border-radius:50%; border:1px solid rgba(var(--text-rgb),.14); display:flex; align-items:center; justify-content:center; color:var(--text); font-size:.85rem;}
.team-social a:hover{background:var(--purple); border-color:var(--purple); color:#fff;}

/* ===== Clients / Partners logos ===== */
.clients-strip{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:18px;}
.client-logo-card{
  background:var(--surface); border:1px solid rgba(var(--text-rgb),.08); border-radius:14px;
  padding:18px; width:150px; height:96px;
  display:flex; align-items:center; justify-content:center;
  filter:grayscale(1); opacity:.75; transition:.3s ease;
}
.client-logo-card:hover, .client-logo-card:focus-visible{filter:grayscale(0); opacity:1; transform:translateY(-4px); box-shadow:0 14px 26px rgba(var(--text-rgb),.12);}
.client-logo-card img{max-width:100%; max-height:42px; object-fit:contain;}

/* ===== CTA banner ===== */
.cta-banner{
  background:linear-gradient(120deg, var(--purple) 0%, var(--purple-dark) 100%);
  border-radius:24px; padding:52px; position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.cta-banner::before{content:''; position:absolute; width:280px; height:280px; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.14), transparent 70%); top:-100px; inset-inline-start:-60px;}
.cta-banner h3{color:#fff; font-size:1.5rem; margin-bottom:6px; position:relative; z-index:1;}
.cta-banner p{color:rgba(255,255,255,.8); margin-bottom:0; position:relative; z-index:1;}
.cta-banner > a{position:relative; z-index:1; flex-shrink:0;}

/* ===== Footer ===== */
footer{background:var(--surface); border-top:1px solid rgba(var(--text-rgb),.06); padding-top:56px;}
footer h6{color:var(--text); margin-bottom:18px; font-weight:800;}
footer a.flink{color:var(--muted); display:block; margin-bottom:10px; font-size:.92rem; transition:.2s;}
footer a.flink:hover{color:var(--purple);}
.footer-desc{color:var(--muted); font-size:.9rem; max-width:340px;}
.social-circle{
  width:38px; height:38px; border-radius:50%; border:1px solid rgba(var(--text-rgb),.14);
  display:inline-flex; align-items:center; justify-content:center; color:var(--text); margin-inline-end:8px; transition:.25s;
}
.social-circle:hover{background:var(--purple); border-color:var(--purple); color:#fff;}
.footer-bottom{background:var(--purple-dark); padding:18px 0; margin-top:40px;}
.footer-bottom, .footer-bottom a{color:rgba(255,255,255,.85); font-size:.85rem;}
.footer-bottom a:hover{color:#fff;}

/* ===== Inner page hero (dark, matches about/projects reference pages) ===== */
.page-hero, .page-header{
  position:relative; padding:150px 0 70px; overflow:hidden;
  background:
    radial-gradient(circle at 85% 15%, rgba(126,55,149,.5), transparent 45%),
    radial-gradient(circle at 10% 90%, rgba(155,92,179,.3), transparent 45%),
    linear-gradient(160deg, var(--dark) 0%, var(--dark-3) 100%);
}
.page-hero .grid-overlay, .page-header .grid-overlay{
  position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(ellipse 80% 70% at 50% 30%, #000 40%, transparent 90%);
  pointer-events:none;
}
.page-hero h1, .page-header h1, .page-header .section-title{color:#fff; font-size:clamp(1.8rem,3.6vw,2.6rem); margin-bottom:10px; position:relative; z-index:2;}
.page-hero p, .page-header p{color:rgba(255,255,255,.7); font-size:1rem; margin-bottom:0; position:relative; z-index:2;}
.page-header .updated-badge{
  display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  color:rgba(255,255,255,.75); padding:8px 18px; border-radius:30px; font-size:.85rem; margin-top:18px; position:relative; z-index:2;
}
.breadcrumb-link{color:rgba(255,255,255,.7); font-size:.9rem; display:inline-flex; align-items:center; gap:6px; position:relative; z-index:2;}
.breadcrumb-link:hover{color:#fff;}
.breadcrumb{display:flex; align-items:center; gap:8px; font-size:.85rem; font-weight:600; color:rgba(255,255,255,.6); margin-bottom:10px; position:relative; z-index:2;}
.breadcrumb a{color:rgba(255,255,255,.75);}
.breadcrumb a:hover{color:#fff;}
.breadcrumb .sep{opacity:.5;}
.breadcrumb .current{color:var(--purple-light);}

/* ===== Rich text page content ===== */
.page-content, .policy-wrap{max-width:880px; margin:0 auto; font-size:1rem; color:var(--text);}
.page-content p, .policy-section p{margin:0 0 20px; color:var(--muted); line-height:1.9;}
.page-content h2, .policy-section h2{font-size:1.5rem; margin:36px 0 14px;}
.page-content h3, .policy-section h3{font-size:1.2rem; margin:28px 0 12px;}
.page-content ul, .page-content ol, .policy-section ul, .policy-section ol{margin:0 0 20px; padding-inline-start:22px; color:var(--muted); line-height:1.9;}
.page-content li, .policy-section li{margin-bottom:8px;}
.page-content li::marker, .policy-section li::marker{color:var(--purple);}
.page-content img, .policy-section img{border-radius:16px; margin:28px 0; max-width:100%;}
.policy-section{padding:0 0 36px;}

.policy-toc{background:var(--surface); border:1px solid rgba(var(--text-rgb),.08); border-radius:16px; padding:22px 24px; margin-bottom:10px; box-shadow:0 4px 18px rgba(var(--text-rgb),.05);}
.policy-toc h6{color:var(--text); margin-bottom:14px; font-weight:800;}
.policy-toc a{display:flex; align-items:center; gap:10px; color:var(--muted); font-size:.92rem; padding:7px 0;}
.policy-toc a:hover, .policy-toc a.active{color:var(--purple);}
.policy-toc a span.n{color:var(--purple); font-weight:800; font-size:.82rem; width:20px;}

.other-pages-card{background:var(--surface); border:1px solid rgba(var(--text-rgb),.08); border-radius:var(--radius); padding:22px; box-shadow:0 4px 18px rgba(var(--text-rgb),.05);}
.other-pages-card h5{font-size:1rem; margin-bottom:14px;}
.other-pages-card a{display:block; color:var(--muted); font-weight:600; font-size:.92rem; padding:9px 0; border-bottom:1px dashed rgba(var(--text-rgb),.12);}
.other-pages-card a:last-child{border-bottom:none;}
.other-pages-card a:hover, .other-pages-card a.active{color:var(--purple);}

/* ===== Contact ===== */
.contact-page-grid{display:grid; grid-template-columns:1fr 1.2fr; gap:40px; align-items:start;}
@media (max-width:900px){.contact-page-grid{grid-template-columns:1fr;}}
.contact-card{
  background:var(--surface); border:1px solid rgba(var(--text-rgb),.08); border-radius:var(--radius);
  padding:16px 20px; display:flex; align-items:center; gap:16px; margin-bottom:16px; box-shadow:0 4px 14px rgba(var(--text-rgb),.04);
}
.contact-card i{font-size:1.3rem; color:var(--purple);}
.contact-card .lbl{font-size:.78rem; color:var(--muted);}
.contact-card .val{font-weight:700; color:var(--text);}

.form-control, .form-select{
  background:var(--surface); border:1px solid rgba(var(--text-rgb),.15); color:var(--text);
  padding:12px 16px; border-radius:10px;
}
.form-control:focus, .form-select:focus{background:var(--surface); color:var(--text); border-color:var(--purple); box-shadow:0 0 0 3px rgba(126,55,149,.15);}
.form-control::placeholder{color:rgba(var(--text-rgb),.4);}
label.form-label{font-size:.85rem; color:var(--muted); margin-bottom:6px; font-weight:600;}
#msgSubmit .text-success{color:var(--success) !important; font-weight:700;}
#msgSubmit .text-danger{color:#EF4444 !important; font-weight:700;}
#msgSubmit .text-warning{color:#F59E0B !important; font-weight:700;}

/* ===== Filters / pagination ===== */
.filter-row{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:34px;}
.filter-pill{background:var(--surface); border:1.5px solid rgba(var(--text-rgb),.1); color:var(--muted); font-family:inherit; font-size:.85rem; font-weight:700; padding:9px 20px; border-radius:999px; cursor:pointer;}
.filter-pill.active{background:var(--purple); border-color:var(--purple); color:#fff;}
.filter-pill:not(.active):hover{border-color:var(--purple); color:var(--purple);}

.pagination{display:flex; justify-content:center; margin-top:50px;}
.pagination ul{display:flex; align-items:center; gap:8px; list-style:none; padding:0; margin:0; flex-wrap:wrap;}
.pagination a, .pagination span{display:flex; align-items:center; justify-content:center; min-width:40px; height:40px; padding:0 10px; border-radius:10px; border:1px solid rgba(var(--text-rgb),.12); color:var(--text); font-weight:700; font-size:.85rem;}
.pagination a:hover{border-color:var(--purple); color:var(--purple);}
.pagination li.active span{background:var(--purple); border-color:var(--purple); color:#fff;}
.pagination li.disabled span{opacity:.35;}
.pagination li.dots span{border:none;}

/* ===== Search results ===== */
.result-card{background:var(--surface); border:1px solid rgba(var(--text-rgb),.08); border-radius:var(--radius); padding:24px; display:flex; gap:18px; align-items:flex-start; margin-bottom:18px; transition:.25s; box-shadow:0 4px 14px rgba(var(--text-rgb),.04);}
.result-card:hover{border-color:rgba(126,55,149,.35); transform:translateY(-3px);}
.result-card .thumb{width:110px; height:82px; border-radius:12px; flex-shrink:0; overflow:hidden; background:var(--purple-soft-2); display:flex; align-items:center; justify-content:center;}
.result-card .thumb img{width:100%; height:100%; object-fit:cover;}
.result-card .thumb i{font-size:1.6rem; color:var(--purple);}
.result-card h3{font-size:1.05rem; margin-bottom:6px;}
.result-card p{color:var(--muted); font-size:.88rem; margin-bottom:0;}

/* ===== Alerts ===== */
.alert{border-radius:12px; padding:14px 18px; font-size:.9rem; font-weight:700; margin-bottom:26px;}
.alert-success{background:rgba(0,185,85,.1); border:1px solid rgba(0,185,85,.3); color:#0a8a41;}
.alert-warning{background:rgba(245,158,11,.1); border:1px solid rgba(245,158,11,.3); color:#a5670a;}

/* ===== 404 ===== */
.error-code{font-weight:900; font-size:clamp(70px,14vw,140px); line-height:1; background:linear-gradient(90deg, var(--purple), var(--purple-light)); -webkit-background-clip:text; background-clip:text; color:transparent;}

/* ===== LTR overrides ===== */
html[dir="ltr"] .nav-link::after{right:auto; left:16px;}
html[dir="ltr"] .project-cat, html[dir="ltr"] .project-tag{inset-inline-start:auto; inset-inline-end:14px;}

/* ===== Responsive tweaks ===== */
@media (max-width:767px){
  .section{padding:64px 0;}
  .cta-banner{padding:34px 24px; flex-direction:column; text-align:center;}
}