/* =====================================================================
   NESAM — sections.css
   New sections introduced with the Sep-26 rev4 company profile:
   statement, smart-vs-intelligent, the intelligence loop, the 7-step
   journey, and the partner wall.
   ===================================================================== */

/* ===================================================================
   STATEMENT — "Nesam is not a product."
   =================================================================== */
.statement{ position:relative; overflow:hidden; padding:clamp(72px,10vw,132px) 0; background:var(--bg-2); }
.statement__dots{ position:absolute; inset-inline-start:-40px; bottom:-30px; width:min(340px,42vw); aspect-ratio:1; pointer-events:none; opacity:.5;
  background-image:radial-gradient(circle, var(--teal-bright) 1.6px, transparent 1.7px);
  background-size:20px 20px;
  mask-image:radial-gradient(circle at 20% 80%, #000, transparent 72%);
  -webkit-mask-image:radial-gradient(circle at 20% 80%, #000, transparent 72%); }
.statement__grid{ position:relative; z-index:2; display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(30px,6vw,80px); align-items:center; }
.statement__lead{ font-family:var(--font); font-weight:800; letter-spacing:-.02em; line-height:1.05; font-size:clamp(2rem,5.4vw,3.6rem); }
.statement__lead .ar{ display:block; font-family:var(--font-ar); font-size:.82em; color:var(--teal-bright); margin-top:.18em; }
.statement__body h3{ font-family:var(--font); color:var(--teal-bright); font-size:clamp(1.15rem,2.4vw,1.5rem); margin-bottom:.6em; }
.statement__body p{ color:var(--muted); font-size:clamp(1rem,1.7vw,1.14rem); max-width:56ch; }

/* ===================================================================
   SMART vs INTELLIGENT
   =================================================================== */
.compare{ display:grid; grid-template-columns:1fr auto 1fr; gap:clamp(18px,3vw,40px); align-items:center; }
.cmp{ position:relative; border-radius:var(--radius); border:1px solid var(--border); background:var(--surface); padding:clamp(20px,2.6vw,30px); }
.cmp__stage{ position:relative; aspect-ratio:1/.82; margin-bottom:20px; }
.cmp__foot{ text-align:center; }
.cmp__foot b{ display:block; font-family:var(--font); font-size:1.15rem; letter-spacing:.08em; text-transform:uppercase; }
.cmp__foot span{ display:block; color:var(--muted); font-size:.9rem; margin-top:4px; }
.cmp--smart .cmp__foot b{ color:var(--muted); }
.cmp--int{ border-color:color-mix(in srgb, var(--teal-bright) 40%, transparent); box-shadow:0 30px 70px -40px var(--teal); }
.cmp--int .cmp__foot b{ color:var(--teal-bright); }

/* nodes */
.cnode{ position:absolute; width:clamp(46px,8.5%,64px); aspect-ratio:1; border-radius:50%; display:grid; place-items:center;
  font-family:var(--font); font-weight:600; font-size:clamp(.5rem,1.05vw,.66rem); text-align:center; line-height:1.1;
  transform:translate(-50%,-50%); left:var(--x); top:var(--y); transition:all .9s var(--ease-out); }
.cmp--smart .cnode{ background:#5d6d6b; color:#eef4f3; box-shadow:0 8px 20px -10px rgba(0,0,0,.5); }
[data-theme="light"] .cmp--smart .cnode{ background:#6c7c7a; }
.cmp--int .cnode{ background:linear-gradient(150deg,var(--teal-bright),var(--teal)); color:#fff; box-shadow:0 10px 26px -10px var(--teal); }
.cmp__hub{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:30%; aspect-ratio:1; border-radius:50%;
  display:grid; place-content:center; text-align:center; color:#fff; z-index:3;
  background:radial-gradient(circle at 34% 30%, var(--teal-bright), var(--teal-deep));
  box-shadow:0 0 0 8px var(--glow), 0 20px 44px -16px var(--teal); }
.cmp__hub b{ font-family:var(--font); font-weight:800; font-size:clamp(.7rem,1.5vw,.95rem); letter-spacing:.1em; }
.cmp__wires{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.cmp__wires line{ stroke-width:1.4; }
.cmp--smart .cmp__wires line{ stroke:var(--border-2); stroke-dasharray:5 5; }
.cmp--int .cmp__wires line{ stroke:var(--teal-bright); opacity:.75; }
.cmp__break{ position:absolute; transform:translate(-50%,-50%); left:var(--x); top:var(--y); color:var(--red); font-weight:800; font-size:1.05rem; font-family:var(--font); }
.cmp__pulse{ fill:var(--teal-bright); }

.compare__vs{ display:grid; place-items:center; gap:12px; }
.compare__vs i{ display:block; width:1px; height:clamp(30px,6vw,64px); background:linear-gradient(var(--border),var(--teal-bright)); }
.compare__vs b{ font-family:var(--font); font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--teal-bright); font-size:.86rem; }
.compare__note{ text-align:center; color:var(--muted); margin-top:clamp(22px,3vw,34px); font-size:clamp(.98rem,1.7vw,1.1rem); }
.compare__note b{ color:var(--heading); font-family:var(--font); }

/* ===================================================================
   HOW INTELLIGENCE MOVES — scroll-drawn loop
   =================================================================== */
.loop{ position:relative; padding-block:clamp(10px,2vw,26px); }
.loop__track{ position:relative; width:100%; }
.loop__svg{ width:100%; height:auto; display:block; overflow:visible; }
.loop__svg .loop-path{ fill:none; stroke:var(--border-2); stroke-width:2; stroke-dasharray:7 8; }
.loop__svg .loop-live{ fill:none; stroke:url(#loopGrad); stroke-width:3; stroke-linecap:round; }
.loop__svg .loop-tip{ fill:var(--teal-bright); }

.loop__steps{ position:absolute; inset:0; }
.lstep{ position:absolute; left:var(--x); top:var(--y); transform:translate(-50%,-50%); display:grid; place-items:center; }
.lstep__dot{ position:relative; width:clamp(48px,5.4vw,74px); aspect-ratio:1; border-radius:50%; display:grid; place-items:center;
  background:var(--surface); border:2px solid var(--border-2); color:var(--muted);
  transition:transform .5s var(--ease-out), background-color .5s var(--ease), border-color .5s var(--ease), color .5s var(--ease), box-shadow .5s var(--ease); }
.lstep__dot svg{ width:46%; height:46%; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.lstep__lbl{ position:absolute; top:calc(100% + 12px); white-space:nowrap; text-align:center; font-family:var(--font); }
.lstep:nth-child(even) .lstep__lbl{ top:auto; bottom:calc(100% + 12px); }
.lstep__lbl b{ display:block; font-size:clamp(.78rem,1.5vw,.96rem); color:var(--heading); transition:color .4s var(--ease); }
.lstep__lbl span{ display:block; font-family:var(--font-ar); font-size:clamp(.7rem,1.4vw,.88rem); color:var(--muted); }
.lstep.on .lstep__dot{ background:linear-gradient(150deg,var(--teal-bright),var(--teal)); border-color:transparent; color:#fff;
  transform:scale(1.12); box-shadow:0 0 0 8px var(--glow), 0 16px 34px -14px var(--teal); }
.lstep.on .lstep__lbl b{ color:var(--teal-bright); }
.loop__caption{ display:flex; flex-wrap:wrap; gap:10px 22px; justify-content:space-between; align-items:center; margin-top:clamp(46px,6vw,70px); }
.loop__caption p{ color:var(--muted); font-size:.94rem; }
.loop__caption em{ color:var(--teal-bright); font-style:normal; font-weight:600; font-family:var(--font); }

/* Automation scenario cards under the loop */
.scenes{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:clamp(34px,5vw,54px); }
.scene{ position:relative; padding:26px 24px; border-radius:var(--radius-md); background:var(--surface); border:1px solid var(--border); overflow:hidden; }
.scene__ic{ width:44px; height:44px; border-radius:13px; display:grid; place-items:center; margin-bottom:16px;
  background:var(--chip-bg); border:1px solid var(--border-2); color:var(--teal-bright); }
.scene__ic svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.scene b{ display:block; font-family:var(--font); font-size:1.02rem; color:var(--heading); margin-bottom:6px; }
.scene p{ color:var(--muted); font-size:.92rem; }
.scene__wave{ position:absolute; inset-inline-end:-30px; bottom:-30px; width:120px; height:120px; border-radius:50%;
  background:radial-gradient(circle, var(--glow), transparent 70%); pointer-events:none; }

/* ===================================================================
   JOURNEY — the 7-step rev4 process
   =================================================================== */
.journey{ position:relative; display:grid; gap:0; }
.jstep{ position:relative; display:grid; grid-template-columns:auto 1fr; gap:clamp(18px,3vw,32px); padding-bottom:clamp(26px,4vw,44px); }
.jstep:last-child{ padding-bottom:0; }
.jstep__rail{ position:relative; display:grid; justify-items:center; }
.jstep__n{ position:relative; z-index:2; width:clamp(46px,5vw,60px); aspect-ratio:1; border-radius:50%; display:grid; place-items:center;
  font-family:var(--font); font-weight:800; font-size:1.05rem; color:var(--muted);
  background:var(--surface); border:2px solid var(--border-2);
  transition:background .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease), transform .5s var(--ease-out); }
.jstep__line{ position:absolute; top:clamp(46px,5vw,60px); bottom:calc(-1 * clamp(26px,4vw,44px)); width:2px; background:var(--border); overflow:hidden; }
.jstep:last-child .jstep__line{ display:none; }
.jstep__line::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,var(--teal-bright),var(--blue)); transform:scaleY(0); transform-origin:top; transition:transform .7s var(--ease-out); }
.jstep.on .jstep__n{ background:linear-gradient(150deg,var(--teal-bright),var(--teal)); color:#fff; border-color:transparent; transform:scale(1.06); box-shadow:0 0 0 7px var(--glow); }
.jstep.on .jstep__line::after{ transform:scaleY(1); }
.jstep__body{ padding-top:clamp(6px,1vw,12px); }
.jstep__body h3{ font-family:var(--font); font-size:clamp(1.05rem,2vw,1.3rem); margin-bottom:6px; }
.jstep__body p{ color:var(--muted); font-size:.98rem; max-width:62ch; }
.jstep__tag{ display:inline-block; font-family:var(--font-ar); font-size:.86rem; color:var(--teal-bright); margin-top:6px; }

/* ===================================================================
   PARTNERS
   =================================================================== */
.partners__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,1.8vw,20px); }
.pcard{ position:relative; display:grid; align-content:center; gap:8px; min-height:clamp(118px,15vw,158px);
  padding:22px clamp(16px,2vw,26px); border-radius:var(--radius-md); text-align:center;
  background:var(--surface); border:1px solid var(--border); overflow:hidden;
  transition:transform var(--t-med) var(--ease-out), border-color var(--t-fast), box-shadow var(--t-med) var(--ease-out); }
.pcard::after{ content:""; position:absolute; inset:0; opacity:0; pointer-events:none; transition:opacity var(--t-med) var(--ease);
  background:radial-gradient(120% 90% at 50% 0%, var(--glow), transparent 70%); }
.pcard:hover{ transform:translateY(-5px); border-color:color-mix(in srgb, var(--teal-bright) 45%, transparent); box-shadow:var(--shadow); }
.pcard:hover::after{ opacity:1; }
.pcard b{ position:relative; z-index:2; font-family:var(--font); font-weight:700; font-size:clamp(1rem,2vw,1.28rem); letter-spacing:.01em; color:var(--heading); }
.pcard span{ position:relative; z-index:2; font-size:.78rem; color:var(--muted); letter-spacing:.06em; text-transform:uppercase; }
.partners__note{ text-align:center; color:var(--faint); font-size:.88rem; margin-top:22px; }

/* ===================================================================
   CONTACT extras (phone, location)
   =================================================================== */
.contact__list li .contact__plain{ font-family:var(--font); font-weight:600; color:var(--text); }

/* ===================================================================
   RESPONSIVE
   =================================================================== */
@media (max-width:900px){
  .statement__grid{ grid-template-columns:1fr; }
  .scenes{ grid-template-columns:1fr; }
  .compare{ grid-template-columns:1fr; }
  .compare__vs{ grid-auto-flow:column; }
  .compare__vs i{ width:clamp(28px,10vw,60px); height:1px; background:linear-gradient(90deg,var(--border),var(--teal-bright)); }
  .partners__grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:600px){
  .statement{ padding:54px 0; }
  .loop__caption{ flex-direction:column; align-items:flex-start; }
  .lstep__lbl b{ font-size:.7rem; } .lstep__lbl span{ font-size:.64rem; }
  .jstep{ grid-template-columns:auto 1fr; gap:14px; }
  .partners__grid{ grid-template-columns:1fr 1fr; gap:10px; }
  .pcard{ min-height:96px; padding:16px 12px; }
  .pcard b{ font-size:.94rem; }
  .pcard span{ font-size:.66rem; }
}

/* ===================================================================
   THE INTELLIGENCE LOOP ON NARROW SCREENS
   The wave needs roughly 700px to read, so below that the same five
   steps become a vertical stepper instead of a sideways scroller.
   The scroll-scrub still lights each step in turn — only the drawn
   path is dropped, because a vertical list already shows the order.
   =================================================================== */
@media (max-width:820px){
  .loop{ overflow:visible; padding-bottom:0; }
  .loop__track{ min-width:0; }
  .loop__svg{ display:none; }

  .loop__steps{ position:static; display:grid; gap:0; padding-inline-start:4px; }

  .lstep{
    position:relative; inset:auto; transform:none;
    display:grid; grid-template-columns:auto 1fr; align-items:center;
    justify-items:start; gap:18px; padding-bottom:26px;
  }
  .lstep:last-child{ padding-bottom:0; }

  /* connector between one dot and the next */
  .lstep::after{
    content:""; position:absolute; top:52px; bottom:0;
    inset-inline-start:25px; width:2px; border-radius:2px;
    background:var(--border-2); transform:translateX(-50%);
    transition:background .6s var(--ease);
  }
  html[dir="rtl"] .lstep::after{ transform:translateX(50%); }
  .lstep:last-child::after{ display:none; }
  .lstep.on::after{ background:linear-gradient(180deg,var(--teal-bright),var(--blue)); }

  .lstep__dot{ width:50px; }
  .lstep.on .lstep__dot{ transform:none; box-shadow:0 0 0 6px var(--glow), 0 12px 26px -12px var(--teal); }

  .lstep__lbl,
  .lstep:nth-child(even) .lstep__lbl{
    position:static; top:auto; bottom:auto;
    white-space:normal; text-align:start;
    display:flex; align-items:baseline; gap:.6em;
  }
  .lstep__lbl b{ font-size:1.02rem; }
  .lstep__lbl span{ font-size:.92rem; }
}

/* Keep the journey column from stranding half the screen on wide displays */
.journey{ max-width:940px; }
.jstep__body p{ max-width:70ch; }

/* The bilingual sub-labels pair an English word with its Arabic one, matching
   the printed profile. In Arabic the main label is already Arabic, so the
   companion line would just repeat it. */
html[lang="ar"] .lstep__lbl span{ display:none; }
html[lang="ar"] .statement__lead .ar{ display:none; }

/* ===================================================================
   OVERFLOW GUARDS
   Grid and flex children default to min-width:auto, so one wide child
   (a mockup, a long chip row) can stretch its whole track past the
   viewport. These keep the page from scrolling sideways on phones.
   =================================================================== */
.split__grid > *,
.about__grid > *,
.statement__grid > *,
.compare > *,
.cta-card > *,
.vm__grid > *,
.dash__row > *,
.cols > *,
.jstep > *{ min-width:0; }

.taglist, .chips, .modules__list, .ticklist{ max-width:100%; }
.taglist span, .chip{ max-width:100%; overflow-wrap:anywhere; }
.platform, .portal, .smartroom, .venue, .seczone, .floorplate, .vision, .dash{ max-width:100%; }
.portal__chart, .flowchart{ width:100%; max-width:100%; }
html, body{ overflow-x:clip; }
.cta-form > *, .field > *{ min-width:0; max-width:100%; }


/* ===================================================================
   AI CORE ORBIT — clearance
   Nodes are placed at 50% radius, i.e. centred on the outer ring, so
   each one hangs half its own width outside .core. Without reserved
   space the top and bottom nodes ran into neighbouring content and
   looked cut off. The wrapper now holds that overhang.
   =================================================================== */
.about__core{ padding:48px 46px; }
.core{ width:min(392px,100%); }

@media (max-width:600px){
  .about__core{ padding:38px 34px; }
  .core{ width:min(230px,62vw); }
}

/* ===================================================================
   FOOTER CREDIT
   =================================================================== */
.footer__made{
  padding-top:14px; text-align:center;
  font-size:.8rem; color:#6f8581; letter-spacing:.01em;
}
.footer__made b{ color:#a9bdb9; font-family:var(--font); font-weight:600; }