/* =========================================================
   M2A GROUP — SECTORS SHOWCASE / LUMINOUS PANORAMIC SYSTEM
   Nine sectors, bright surfaces, asymmetric visual journey.
   ========================================================= */

body.m2a-master-template.sectors-page{
  --sectors-ink:#172033;
  --sectors-muted:#5f6b7a;
  --sectors-line:rgba(15,23,42,.10);
  --sectors-paper:#f8fafc;
  --sectors-cream:#fffaf0;
  --sectors-glass:rgba(255,255,255,.76);
  --sectors-glass-strong:rgba(255,255,255,.90);
  --sectors-shadow:0 28px 80px rgba(71,85,105,.14);
  background:linear-gradient(180deg,#fff 0%,#f8fafc 48%,#fffaf2 100%) !important;
  color:var(--sectors-ink) !important;
}

body.m2a-master-template.sectors-page main{
  background:transparent !important;
  color:var(--sectors-ink) !important;
  overflow:hidden;
}

body.m2a-master-template.sectors-page .sectors-experience :is(h1,h2,h3,p,small,span,a){
  font-family:'Cairo','Inter',sans-serif;
}
html[dir="ltr"] body.m2a-master-template.sectors-page .sectors-experience :is(h1,h2,h3,p,small,span,a){
  font-family:'Inter','Cairo',sans-serif;
}

.sectors-hero{
  position:relative;
  isolation:isolate;
  padding:clamp(130px,10vw,170px) 0 clamp(72px,7vw,110px);
  background:
    radial-gradient(circle at 14% 22%,rgba(6,182,212,.14),transparent 26%),
    radial-gradient(circle at 84% 18%,rgba(212,175,55,.18),transparent 28%),
    radial-gradient(circle at 76% 76%,rgba(139,92,246,.10),transparent 30%),
    linear-gradient(135deg,#ffffff 0%,#f8fbff 44%,#fff8e8 100%);
  border-bottom:1px solid var(--sectors-line);
}

.sectors-hero::before{
  content:"09";
  position:absolute;
  inset-inline-end:5vw;
  top:clamp(118px,11vw,174px);
  z-index:-1;
  color:rgba(15,23,42,.035);
  font:900 clamp(150px,25vw,380px)/.8 'Inter',sans-serif;
  letter-spacing:-.08em;
  pointer-events:none;
}

.sectors-aurora{
  position:absolute;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(2,132,199,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(2,132,199,.035) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.35),transparent 76%);
}

.sectors-hero-inner{
  position:relative;
  z-index:2;
  max-width:1280px;
  text-align:center;
}

.sectors-hero-kicker{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:8px 14px;
  border:1px solid rgba(212,175,55,.24);
  border-radius:999px;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(16px);
  color:#475569;
  box-shadow:0 10px 30px rgba(148,163,184,.12);
}
.sectors-hero-kicker span{
  display:grid;
  width:34px;
  height:34px;
  place-items:center;
  border-radius:50%;
  background:linear-gradient(135deg,#f3d76d,#D4AF37);
  color:#1f2937;
  font-size:12px;
  font-weight:900;
}
.sectors-hero-kicker b{
  font-size:12px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.sectors-hero h1{
  max-width:1020px;
  margin:28px auto 0;
  color:#152033 !important;
  font-size:clamp(50px,7.2vw,108px);
  font-weight:900;
  line-height:.98;
  letter-spacing:-.055em;
  text-wrap:balance;
}
html[dir="rtl"] .sectors-hero h1{letter-spacing:-.025em}

.sectors-hero > .container > p,
.sectors-hero-inner > p{
  max-width:850px;
  margin:28px auto 0;
  color:#5f6b7a !important;
  font-size:clamp(17px,1.45vw,21px);
  line-height:1.9;
}

.sectors-hero-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
  margin-top:30px;
}

.sectors-primary-link,
.sectors-secondary-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:50px;
  padding:13px 22px;
  border-radius:999px;
  font-size:14px;
  font-weight:800;
  text-decoration:none;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.sectors-primary-link{
  color:#18202d !important;
  border:1px solid rgba(185,143,43,.22);
  background:linear-gradient(135deg,#f3d76d,#D4AF37);
  box-shadow:0 14px 36px rgba(212,175,55,.22);
}
.sectors-secondary-link{
  color:#334155 !important;
  border:1px solid rgba(51,65,85,.12);
  background:rgba(255,255,255,.80);
  backdrop-filter:blur(14px);
}

.sectors-orbit{
  display:grid;
  grid-template-columns:repeat(9,minmax(0,1fr));
  gap:8px;
  margin-top:56px;
}
.sectors-orbit a{
  display:flex;
  min-width:0;
  min-height:88px;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  padding:12px 8px;
  border:1px solid rgba(100,116,139,.14);
  border-radius:20px;
  color:#475569 !important;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(18px);
  text-decoration:none;
  font-size:11px;
  font-weight:700;
  box-shadow:0 16px 36px rgba(100,116,139,.08);
  transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease;
}
.sectors-orbit a span{
  color:#b08926;
  font-family:'Inter',sans-serif;
  font-size:15px;
  font-weight:900;
}

.sectors-story{
  position:relative;
  padding:clamp(76px,8vw,120px) 0;
  background:
    radial-gradient(circle at 12% 20%,rgba(14,165,233,.06),transparent 28%),
    radial-gradient(circle at 88% 52%,rgba(212,175,55,.07),transparent 30%),
    linear-gradient(180deg,#f8fafc 0%,#ffffff 40%,#fffaf3 100%);
}

.sector-stage{
  position:relative;
  width:min(1440px,calc(100% - 64px));
  min-height:clamp(500px,48vw,690px);
  margin:0 auto;
  isolation:isolate;
}
.sector-stage.stage-offset-right{width:min(1280px,calc(100% - 110px));margin-inline-start:auto;margin-inline-end:4vw}
.sector-stage.stage-offset-left{width:min(1280px,calc(100% - 110px));margin-inline-start:4vw;margin-inline-end:auto}
.sector-stage.stage-finale{width:min(1380px,calc(100% - 72px));}

.sector-image{
  position:absolute;
  inset:0;
  overflow:hidden;
  border:1px solid rgba(var(--sector-rgb),.22);
  border-radius:clamp(30px,4vw,58px);
  background:
    linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03)),
    var(--sector-image) center/cover no-repeat;
  box-shadow:0 36px 110px rgba(71,85,105,.16);
}
.sector-image::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(255,255,255,.02) 0%,rgba(255,255,255,.02) 38%,rgba(248,250,252,.24) 100%),
    radial-gradient(circle at var(--spot-x,50%) var(--spot-y,50%),rgba(255,255,255,.30),transparent 22%);
  pointer-events:none;
}

.sector-stage::after{
  content:attr(id);
  position:absolute;
  z-index:0;
  inset-inline-start:24px;
  top:12px;
  color:rgba(255,255,255,.36);
  font:900 clamp(34px,5vw,76px)/1 'Inter',sans-serif;
  text-transform:uppercase;
  letter-spacing:-.05em;
  pointer-events:none;
}

.sector-floating-card{
  position:absolute;
  z-index:3;
  bottom:clamp(24px,4vw,54px);
  width:min(570px,calc(100% - 48px));
  padding:clamp(24px,3vw,38px);
  border:1px solid rgba(var(--sector-rgb),.25);
  border-radius:30px;
  background:
    radial-gradient(circle at var(--spot-x,50%) var(--spot-y,50%),rgba(var(--sector-rgb),.12),transparent 38%),
    rgba(255,255,255,.82);
  backdrop-filter:blur(22px) saturate(122%);
  box-shadow:0 30px 90px rgba(71,85,105,.20),inset 0 1px 0 rgba(255,255,255,.86);
  transition:transform .28s cubic-bezier(.16,1,.3,1),box-shadow .28s ease,border-color .28s ease;
}
.align-start .sector-floating-card{inset-inline-start:clamp(24px,5vw,70px)}
.align-end .sector-floating-card{inset-inline-end:clamp(24px,5vw,70px)}
.align-center .sector-floating-card{left:50%;transform:translateX(-50%)}

.sector-card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
}
.sector-number{
  color:var(--sector);
  font-family:'Inter',sans-serif !important;
  font-size:14px;
  font-weight:900;
  letter-spacing:.12em;
}
.sector-icon{
  display:grid;
  width:48px;
  height:48px;
  place-items:center;
  border:1px solid rgba(var(--sector-rgb),.24);
  border-radius:16px;
  color:var(--sector);
  background:rgba(255,255,255,.80);
  box-shadow:0 10px 28px rgba(var(--sector-rgb),.12);
}
.sector-icon svg{
  width:24px;
  height:24px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.sector-floating-card small{
  display:block;
  color:var(--sector) !important;
  font-family:'Inter',sans-serif !important;
  font-size:11px;
  font-weight:900;
  letter-spacing:.12em;
}
.sector-floating-card h2{
  margin:10px 0 0;
  color:#1e293b !important;
  font-size:clamp(30px,3.4vw,50px);
  font-weight:900;
  line-height:1.08;
  letter-spacing:-.035em;
}
.sector-floating-card p{
  margin:16px 0 0;
  color:#5b6776 !important;
  font-size:15px;
  line-height:1.8;
}
.sector-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:18px;
}
.sector-meta span{
  padding:7px 10px;
  border:1px solid rgba(var(--sector-rgb),.16);
  border-radius:999px;
  color:#526170;
  background:rgba(255,255,255,.74);
  font-family:'Inter','Cairo',sans-serif !important;
  font-size:10.5px;
  font-weight:700;
}
.sector-floating-card > a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:20px;
  color:#273447 !important;
  font-size:13px;
  font-weight:900;
  text-decoration:none;
}
.sector-floating-card > a span{color:var(--sector)}

.sector-bridge{
  display:flex;
  width:min(760px,calc(100% - 48px));
  align-items:center;
  justify-content:center;
  gap:16px;
  margin:34px auto;
  color:#94a3b8;
  font-family:'Inter',sans-serif;
  font-size:10px;
  font-weight:900;
  letter-spacing:.15em;
}
.sector-bridge i{
  width:min(220px,24vw);
  height:1px;
  background:linear-gradient(90deg,transparent,#cbd5e1,transparent);
}

.sectors-integration{
  padding:clamp(76px,8vw,118px) 0;
  background:
    radial-gradient(circle at 15% 20%,rgba(14,165,233,.08),transparent 30%),
    radial-gradient(circle at 82% 70%,rgba(212,175,55,.12),transparent 30%),
    linear-gradient(135deg,#ffffff,#fff9eb);
  border-top:1px solid var(--sectors-line);
}
.integration-shell{
  position:relative;
  max-width:1180px;
  padding:clamp(34px,5vw,68px) !important;
  border:1px solid rgba(148,163,184,.18);
  border-radius:38px;
  text-align:center;
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(22px);
  box-shadow:var(--sectors-shadow);
}
.integration-kicker{
  color:#b08926;
  font-family:'Inter',sans-serif !important;
  font-size:11px;
  font-weight:900;
  letter-spacing:.14em;
}
.integration-shell h2{
  max-width:900px;
  margin:16px auto 0;
  color:#1e293b !important;
  font-size:clamp(34px,4.8vw,66px);
  font-weight:900;
  line-height:1.08;
  letter-spacing:-.04em;
}
.integration-shell p{
  max-width:820px;
  margin:20px auto 0;
  color:#64748b !important;
  font-size:16px;
  line-height:1.85;
}
.integration-flow{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:10px;
  margin:28px auto;
}
.integration-flow span{
  padding:9px 12px;
  border:1px solid rgba(148,163,184,.18);
  border-radius:999px;
  color:#475569;
  background:#fff;
  font-family:'Inter',sans-serif !important;
  font-size:11px;
  font-weight:800;
}
.integration-flow b{color:#D4AF37;font-weight:900}

@media (hover:hover) and (pointer:fine){
  .sectors-primary-link:hover,.sectors-secondary-link:hover,.sectors-orbit a:hover{transform:translate3d(0,-3px,0)}
  .sectors-orbit a:hover{border-color:rgba(212,175,55,.30);box-shadow:0 18px 38px rgba(71,85,105,.12)}
  .sector-floating-card:hover{transform:translate3d(0,-6px,0);border-color:rgba(var(--sector-rgb),.40);box-shadow:0 36px 100px rgba(71,85,105,.22),0 0 48px rgba(var(--sector-rgb),.12)}
  .align-center .sector-floating-card:hover{transform:translate(-50%,-6px)}
}

@media(max-width:1180px){
  .sectors-orbit{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sector-stage,.sector-stage.stage-offset-right,.sector-stage.stage-offset-left,.sector-stage.stage-finale{width:min(100% - 40px,1180px);margin-inline:auto}
}

@media(max-width:760px){
  .sectors-hero{padding-top:104px;padding-bottom:62px}
  .sectors-hero::before{top:110px;inset-inline-end:14px;font-size:190px}
  .sectors-hero h1{font-size:clamp(42px,13vw,62px)}
  .sectors-hero-inner > p{font-size:16px;line-height:1.8}
  .sectors-orbit{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:38px}
  .sectors-orbit a{min-height:72px;padding:10px 5px;border-radius:16px;font-size:9.5px}
  .sectors-orbit a span{font-size:13px}
  .sectors-story{padding:54px 0}
  .sector-stage,.sector-stage.stage-offset-right,.sector-stage.stage-offset-left,.sector-stage.stage-finale{width:calc(100% - 24px);min-height:560px}
  .sector-image{border-radius:28px}
  .sector-floating-card{bottom:12px;width:calc(100% - 24px);padding:22px;border-radius:24px}
  .align-start .sector-floating-card,.align-end .sector-floating-card{inset-inline-start:12px;inset-inline-end:12px}
  .align-center .sector-floating-card{left:12px;right:12px;transform:none}
  .sector-floating-card h2{font-size:32px}
  .sector-floating-card p{font-size:14px;line-height:1.7}
  .sector-card-top{margin-bottom:12px}
  .sector-icon{width:44px;height:44px}
  .sector-meta{gap:6px}
  .sector-meta span{font-size:9.5px;padding:6px 8px}
  .sector-bridge{margin:24px auto}
  .integration-shell{width:calc(100% - 24px) !important;padding:28px 20px !important;border-radius:28px}
  .integration-shell h2{font-size:36px}
}

@media(max-width:480px){
  .sectors-hero-kicker b{font-size:10px;letter-spacing:.08em}
  .sectors-orbit{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sectors-primary-link,.sectors-secondary-link{width:100%}
  .sector-stage,.sector-stage.stage-offset-right,.sector-stage.stage-offset-left,.sector-stage.stage-finale{min-height:590px}
  .sector-floating-card small{font-size:9.5px;letter-spacing:.08em}
  .sector-floating-card h2{font-size:29px}
  .sector-bridge{font-size:8.5px;gap:9px}
  .integration-flow{gap:7px}
}

@media(prefers-reduced-motion:reduce){
  .sectors-primary-link,.sectors-secondary-link,.sectors-orbit a,.sector-floating-card{transition:none !important;transform:none !important}
  .align-center .sector-floating-card{transform:translateX(-50%) !important}
  @media(max-width:760px){.align-center .sector-floating-card{transform:none !important}}
}