/* ==== Sectors Page (RTL) ==== */
:root{
  --bg:#0b0f15;
  --ink:#e6eaf1;
  --muted:#98a2b3;
  --card:#0f1520;
  --line:#1e2633;
  --grad-1:#60a5fa;      /* sky */
  --grad-2:#a78bfa;      /* violet */
  --accent:#22d3ee;      /* cyan */
  --ok:#34d399;          /* green */
  --warn:#f43f5e;        /* rose */
  --radius:18px;
  --shadow:0 18px 50px rgba(0,0,0,.45);
}

.sectors{color:var(--ink); background:
  radial-gradient(900px 520px at 16% -10%, rgba(96,165,250,.10), transparent),
  radial-gradient(800px 560px at 88% 120%, rgba(167,139,250,.10), transparent),
  linear-gradient(180deg, #0b0f15, #0a0d12);
  isolation:isolate; overflow:hidden;
}
.container{max-width:1200px;margin-inline:auto;padding:clamp(18px,4vw,28px)}

.sec-hero .head{ text-align:center; display:grid; gap:12px; }
.kicker{ color:var(--muted); font-weight:800; }
.title{
  font-size: clamp(28px, 4.8vw, 56px);
  font-weight:1000; letter-spacing:-.02em; line-height:1.05;
}
.title span{
  background: linear-gradient(90deg, var(--grad-1), var(--grad-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter: drop-shadow(0 8px 22px rgba(96,165,250,.15));
}
.subtitle{ color:var(--muted); max-width:74ch; margin: 0 auto; }

.chips{ margin-top:16px; display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.chip{
  background: #0f1724; color:#cfe5ff; border:1px solid #1f2a3b;
  padding:10px 14px; border-radius:999px; font-weight:800; cursor:pointer;
  transition:.25s ease; user-select:none;
}
.chip:hover{ border-color:#2c3e57; transform:translateY(-1px) }
.chip.is-active{ color:#00131b; background:linear-gradient(135deg,var(--grad-1),var(--grad-2)); border-color:transparent }

.sec-grid .grid{
  display:grid; gap:18px; margin-top:18px;
  grid-template-columns: repeat(12,1fr);
}
@media (max-width: 1024px){ .sec-grid .grid{ grid-template-columns: repeat(6,1fr);} }
@media (max-width: 620px){ .sec-grid .grid{ grid-template-columns: repeat(1,1fr);} }

.card{
  grid-column: span 4;
  border:1px solid var(--line); border-radius:calc(var(--radius) + 2px);
  background: linear-gradient(135deg, rgba(96,165,250,.06), rgba(167,139,250,.06)), var(--card);
  padding:18px; box-shadow: var(--shadow); position:relative; overflow:hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
@media (max-width:1024px){ .card{ grid-column: span 3; } }
@media (max-width:620px){ .card{ grid-column: 1/-1; } }

.card::after{
  content:""; position:absolute; inset:-30% -30% auto auto; height: 120px; width:120px;
  background: radial-gradient(closest-side, rgba(34,211,238,.25), transparent);
  transform: translate3d(0,0,0);
  pointer-events:none;
}
.card:hover{ transform: translateY(-4px); border-color:#334155; box-shadow: 0 22px 60px rgba(0,0,0,.55); }

.badge{
  width:54px; height:54px; border-radius:16px; display:grid; place-items:center;
  background:linear-gradient(135deg, var(--grad-1), var(--grad-2));
  color:#00131b; font-size:22px; margin-bottom:10px;
  box-shadow: 0 10px 22px rgba(96,165,250,.35);
}
.card-title{ font-size:22px; font-weight:900; margin:4px 0 }
.card-text{ color:var(--muted); margin:0 0 10px 0 }
.features{ list-style:none; padding:0; margin:0 0 12px 0; display:grid; gap:8px }
.features li{ display:flex; align-items:flex-start; gap:8px; color:#dbeafe }
.features i{ color:var(--ok); margin-top:2px }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background: linear-gradient(135deg, var(--grad-1), var(--grad-2));
  color:#00131b; border:none; padding:10px 14px; border-radius:12px;
  font-weight:900; text-decoration:none; transition: transform .2s ease, filter .2s ease;
}
.btn:hover{ transform: translateY(-2px); filter: brightness(1.06); }
.btn.big{ padding:14px 20px; font-size:16px; }

.sec-cta{ padding-block: 8px 36px; }
.cta-card{
  border:1px solid var(--line); border-radius: calc(var(--radius) + 6px);
  background: linear-gradient(135deg, rgba(96,165,250,.09), rgba(167,139,250,.09)), #0f1520;
  box-shadow: var(--shadow); text-align:center; padding:22px;
}
.cta-card h3{ margin:0 0 6px; font-size:24px; font-weight:1000 }
.cta-card p{ margin:0 0 14px; color:var(--muted) }

/* Reveal on scroll */
[data-reveal]{ opacity:0; transform: translateY(10px); transition: .6s ease }
.revealed{ opacity:1; transform: none }

/* Filter hiding */
.card[hidden]{ display:none !important }

/* iOS Safari width fix */
html, body { overflow-x:hidden; max-width:100vw; }