/* ==========================================================================
   AR Technology — Solutions & Services page styles
   Loaded only on the Solutions page template.
   ========================================================================== */

@property --ar-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

@keyframes arSolAurora { 0%,100% { transform: translateX(-8%) rotate(8deg); opacity:.5; } 50% { transform: translateX(8%) rotate(12deg); opacity:.95; } }
@keyframes arShimmer { to { background-position: 300% center; } }
@keyframes arConicSpin { to { --ar-a: 360deg; } }
@keyframes arRadarSpin { to { transform: rotate(360deg); } }
@keyframes arEq { 0%,100% { transform: scaleY(.22); } 50% { transform: scaleY(1); } }
@keyframes arTick { 0%,100% { opacity:.28; } 50% { opacity:1; } }
@keyframes arRiseUp { 0% { transform: translateY(120%); opacity:0; } 25%,75% { opacity:1; } 100% { transform: translateY(-180%); opacity:0; } }
@keyframes arShieldPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(245,184,77,.5); } 50% { box-shadow: 0 0 0 14px rgba(245,184,77,0); } }
@keyframes arSweepX { 0% { transform: translateX(-110%); } 100% { transform: translateX(340%); } }
@keyframes arFloatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes arGrowY { from { transform: scaleY(.12); } to { transform: scaleY(1); } }
@keyframes arFlowDash { to { stroke-dashoffset: -300; } }
@keyframes arHoloScan { 0% { top:-20%; } 100% { top:120%; } }

/* ---------- Hero ---------- */
.ar-sol-hero { position:relative; min-height:66vh; display:flex; align-items:center; overflow:hidden;
  background: radial-gradient(1200px 700px at 70% 20%, #0A1B33 0%, #050B18 45%, #030712 100%); }
.ar-sol-hero .ar-hero-canvas { position:absolute; inset:0; width:100%; height:100%; }
.ar-sol-hero-inner { position:relative; z-index:2; max-width:900px; margin:0 auto; padding:170px 28px 80px; text-align:center; }
.ar-sol-hero h1 { font-family:var(--font-head); font-weight:700; font-size:clamp(34px,5vw,58px); line-height:1.1; letter-spacing:-.02em; margin:26px 0 0; }
.ar-sol-aurora { position:absolute; top:-40%; height:95%; filter:blur(34px); pointer-events:none; }
.ar-sol-aurora.ar-aur-1 { left:14%; width:300px; background:linear-gradient(180deg, transparent, rgba(56,225,255,.20), transparent); animation:arSolAurora 12s ease-in-out infinite; }
.ar-sol-aurora.ar-aur-2 { right:14%; width:270px; background:linear-gradient(180deg, transparent, rgba(167,139,250,.17), transparent); animation:arSolAurora 15s ease-in-out infinite reverse; }
.ar-sol-aurora.ar-aur-3 { left:48%; width:220px; background:linear-gradient(180deg, transparent, rgba(45,212,191,.14), transparent); animation:arSolAurora 18s ease-in-out infinite 3s; }
.ar-sol-grid { position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(56,225,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(56,225,255,.06) 1px, transparent 1px);
  background-size:64px 64px; -webkit-mask-image:radial-gradient(1000px 600px at 50% 40%, black, transparent);
  mask-image:radial-gradient(1000px 600px at 50% 40%, black, transparent); animation:arGrid 10s linear infinite; }
.ar-sol-ripple { position:absolute; border-radius:50%; pointer-events:none; }
.ar-sol-ripple.ar-rip-1 { left:26%; top:44%; width:260px; height:260px; margin:-130px; border:1.5px solid rgba(56,225,255,.5); animation:arRing 5s ease-out infinite; }
.ar-sol-ripple.ar-rip-2 { left:74%; top:60%; width:300px; height:300px; margin:-150px; border:1.5px solid rgba(45,212,191,.45); animation:arRing 6s ease-out infinite 2s; }
.ar-sol-veil { position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(3,7,18,.35) 0%, rgba(3,7,18,.1) 40%, rgba(3,7,18,.92) 100%); }
.ar-shimmer-text { background:linear-gradient(120deg, #EEF4FB, #38E1FF, #2E9BFF, #EEF4FB); background-size:300% auto;
  -webkit-background-clip:text; background-clip:text; color:transparent; animation:arShimmer 7s linear infinite; }
.ar-pill { display:inline-flex; align-items:center; gap:10px; border:1px solid rgba(56,225,255,.3); background:rgba(56,225,255,.06);
  border-radius:100px; padding:7px 16px; font-family:var(--font-mono); font-size:12px; letter-spacing:1.6px; color:var(--cyan); }
.ar-pill-dot { width:7px; height:7px; border-radius:50%; background:var(--teal); box-shadow:0 0 10px var(--teal); animation:arBlink 2.2s ease-in-out infinite; }

/* ---------- Radiant conic border (shared) ---------- */
.ar-radiant { position:relative; }
.ar-radiant::before { content:''; position:absolute; inset:-1px; border-radius:19px; padding:1px; pointer-events:none;
  background:conic-gradient(from var(--ar-a), transparent 20%, var(--c1), var(--c2), transparent 80%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor;
  mask-composite:exclude; opacity:0; transition:opacity .35s ease; }
.ar-radiant:hover::before { opacity:1; animation:arConicSpin 4s linear infinite; }

/* ---------- Pillar cards ---------- */
.ar-pillar-card { position:relative; overflow:hidden; text-decoration:none; color:var(--text); border-radius:18px; padding:28px;
  display:flex; flex-direction:column; gap:14px; backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.09); background:linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
  transition:border-color .3s ease, transform .3s ease, box-shadow .3s ease; }
.ar-pillar-card:hover { border-color:var(--glow); transform:translateY(-8px); box-shadow:0 24px 60px rgba(0,0,0,.55), 0 0 34px var(--soft); color:var(--text); }
.ar-pillar-halo { position:absolute; inset-inline-end:-40px; top:-40px; width:150px; height:150px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, var(--soft), transparent 70%); }
.ar-pillar-top { position:relative; display:flex; justify-content:space-between; align-items:center; }
.ar-pillar-icon { position:relative; width:52px; height:52px; border-radius:13px; display:grid; place-items:center; font-size:21px;
  background:var(--ibg); border:1px solid var(--glow); }
.ar-pillar-ring { position:absolute; inset:-5px; border:1px solid var(--glow); border-radius:16px; animation:arRing 3.2s ease-out infinite; animation-delay:var(--d); }
.ar-pillar-code { font-family:var(--font-mono); font-size:10px; letter-spacing:1.6px; color:var(--dim); }
.ar-pillar-name { position:relative; font-family:var(--font-head); font-size:19px; font-weight:600; line-height:1.3; }
.ar-pillar-desc { position:relative; color:var(--text3); font-size:14.5px; line-height:1.65; flex:1; }
.ar-pillar-link { position:relative; font-family:var(--font-head); font-size:13px; font-weight:600; color:var(--acc); }

/* pillar micro-visuals */
.ar-pillar-viz { position:relative; height:42px; border-radius:10px; overflow:hidden; display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.07); background:rgba(255,255,255,.02); }
.ar-viz-sweep { position:absolute; inset-inline-start:0; top:0; bottom:0; width:34px;
  background:linear-gradient(90deg, transparent, var(--soft), transparent); animation:arSweepX 3.6s linear infinite; animation-delay:var(--d); }
.ar-viz-radar { position:absolute; inset-inline-start:50%; top:100%; width:96px; height:96px; margin-inline-start:-48px; margin-top:-48px;
  border-radius:50%; opacity:.65; background:conic-gradient(from 0deg, var(--glow), transparent 45%); animation:arRadarSpin 3.4s linear infinite; }
.ar-viz-eq { display:flex; align-items:flex-end; gap:4px; height:24px; }
.ar-viz-eq i { width:4px; height:100%; border-radius:2px; background:var(--acc); transform-origin:bottom; animation:arEq 1.1s ease-in-out infinite; }
.ar-viz-devices { display:flex; gap:8px; }
.ar-viz-devices i { width:9px; height:9px; border-radius:3px; background:var(--acc); box-shadow:0 0 8px var(--acc); animation:arTick 1.6s ease-in-out infinite; }
.ar-viz-billing { position:absolute; inset:0; }
.ar-viz-billing i { position:absolute; bottom:0; font-family:var(--font-mono); font-size:11px; font-style:normal; color:var(--acc); animation:arRiseUp 3.2s linear infinite; }
.ar-viz-path { width:100%; height:100%; }
.ar-viz-path path { animation:arFlowDash 5s linear infinite; }
.ar-viz-shield { width:22px; height:22px; border-radius:6px 6px 11px 11px; border:1.5px solid var(--acc); animation:arShieldPulse 2.4s ease-out infinite; }

/* ---------- Detail sections ---------- */
.ar-sol-detail { position:relative; overflow:hidden; border-top:1px solid rgba(255,255,255,.05); }
.ar-detail-halo { position:absolute; top:12%; width:420px; height:420px; border-radius:50%; filter:blur(20px); pointer-events:none;
  background:radial-gradient(circle, var(--soft), transparent 68%); }
.ar-detail-halo.ar-halo-right { right:-8%; }
.ar-detail-halo.ar-halo-left { left:-8%; }
.ar-detail-split { position:relative; display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:56px; align-items:center; }
.ar-detail-split.is-flipped .ar-detail-copy { order:2; }
.ar-detail-split.is-flipped .ar-holo-panel { order:1; }
.ar-detail-icon { position:relative; width:56px; height:56px; border-radius:15px; display:grid; place-items:center; font-size:24px;
  background:var(--ibg); border:1px solid var(--acc); box-shadow:0 0 26px var(--soft); }
.ar-detail-icon-ring { position:absolute; inset:-6px; border:1px solid var(--acc); border-radius:18px; opacity:.6; animation:arRing 3s ease-out infinite; }
.ar-detail-code { font-family:var(--font-mono); font-size:12px; letter-spacing:2px; color:var(--acc); margin-top:18px; }
.ar-detail-copy .ar-h2 { margin-top:12px; }
.ar-detail-lead { color:var(--text2); margin-top:18px; max-width:500px; line-height:1.7; }
.ar-feature-list { display:flex; flex-direction:column; gap:10px; margin-top:24px; }
.ar-feature-row { display:flex; align-items:center; gap:10px; font-size:14.5px; color:#C4D3E5; padding:9px 13px; border-radius:10px;
  border:1px solid rgba(255,255,255,.07); background:rgba(255,255,255,.025); transition:border-color .3s ease, transform .3s ease; }
.ar-feature-row:hover { border-color:var(--acc); transform:translateX(5px); }
[dir="rtl"] .ar-feature-row:hover { transform:translateX(-5px); }
.ar-feature-row b { color:var(--acc); font-size:13px; }
.ar-detail-cta { display:inline-block; margin-top:28px; text-decoration:none; font-family:var(--font-head); font-weight:600; font-size:14px;
  color:var(--acc); border-bottom:1px solid var(--acc); padding-bottom:3px; }

/* ---------- Holographic panel ---------- */
.ar-holo-panel { position:relative; min-height:320px; border-radius:20px; overflow:hidden; padding:22px; backdrop-filter:blur(10px);
  border:1px solid var(--acc); background:rgba(5,11,24,.72);
  box-shadow:0 30px 70px rgba(0,0,0,.5), 0 0 40px var(--soft); animation:arFloatY 8s ease-in-out infinite; }
.ar-holo-scan { position:absolute; left:0; right:0; height:54px; pointer-events:none;
  background:linear-gradient(180deg, transparent, var(--soft), transparent); animation:arHoloScan 6s linear infinite; }
.ar-holo-top { position:relative; display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.ar-holo-label { font-family:var(--font-mono); font-size:10.5px; color:var(--acc); letter-spacing:1.5px; }
.ar-holo-live { width:7px; height:7px; border-radius:50%; background:var(--teal); box-shadow:0 0 8px var(--teal); animation:arBlink 1.8s ease-in-out infinite; }
.ar-holo-stats { position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:18px; }
.ar-holo-stat { border:1px solid rgba(255,255,255,.08); border-radius:10px; padding:12px; text-align:center; background:rgba(255,255,255,.02); }
.ar-holo-stat-v { font-family:var(--font-mono); font-size:17px; color:var(--acc); }
.ar-holo-stat-l { font-family:var(--font-mono); font-size:9px; color:var(--text3); margin-top:4px; letter-spacing:1px; }

/* radar viz */
.ar-holo-radar { position:relative; height:190px; border-radius:12px; overflow:hidden;
  background-image:radial-gradient(rgba(56,225,255,.2) 1px, transparent 1px); background-size:16px 16px; }
.ar-radar-sweep { position:absolute; left:50%; top:50%; width:300px; height:300px; margin:-150px; border-radius:50%;
  background:conic-gradient(from 0deg, rgba(56,225,255,.35), transparent 40%); animation:arRadarSpin 4s linear infinite; }
.ar-radar-ring { position:absolute; left:50%; top:50%; border-radius:50%; border:1px solid rgba(56,225,255,.3); }
.ar-radar-ring.ar-rr-1 { width:90px; height:90px; margin:-45px; }
.ar-radar-ring.ar-rr-2 { width:170px; height:170px; margin:-85px; border-color:rgba(56,225,255,.2); }
.ar-radar-dot { position:absolute; width:8px; height:8px; border-radius:50%; background:var(--acc); box-shadow:0 0 12px var(--acc); }
.ar-radar-dot i { position:absolute; inset:-6px; border:1px solid var(--acc); border-radius:50%; animation:arRing 2.6s ease-out infinite; }

/* dashboard viz */
.ar-holo-dash { height:190px; display:flex; flex-direction:column; gap:12px; }
.ar-dash-svg { width:100%; height:80px; }
.ar-dash-line { stroke-dasharray:700; stroke-dashoffset:700; animation:arDash 2.6s ease forwards; }
.ar-dash-line-2 { opacity:.6; animation-delay:.4s; }
.ar-dash-bars { display:flex; align-items:flex-end; gap:6px; height:80px; }
.ar-dash-bars i { flex:1; border-radius:3px 3px 0 0; transform-origin:bottom;
  background:linear-gradient(180deg, var(--acc), rgba(46,155,255,.1)); animation:arGrowY 1.4s cubic-bezier(.2,.8,.3,1) both; }

/* fleet viz */
.ar-holo-fleet { height:190px; display:grid; grid-template-columns:repeat(6,1fr); grid-auto-rows:1fr; gap:8px; }
.ar-fleet-cell { border-radius:8px; display:grid; place-items:center; font-size:9px; font-family:var(--font-mono);
  border:1px solid rgba(45,212,191,.3); background:rgba(45,212,191,.05); color:var(--teal); animation:arTick 2.4s ease-in-out infinite; }
.ar-fleet-cell.is-warn { border-color:rgba(245,184,77,.5); background:rgba(245,184,77,.07); color:var(--amber); }

/* billing viz */
.ar-holo-bill { height:190px; display:flex; flex-direction:column; justify-content:center; gap:18px; }
.ar-bill-svg { width:100%; height:70px; }
.ar-bill-path { animation:arFlowDash 4s linear infinite; }
.ar-bill-labels { display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:9.5px; color:var(--text3); letter-spacing:1px; }

/* roadmap viz */
.ar-holo-road { height:190px; display:flex; align-items:center; }
.ar-holo-road svg { width:100%; height:150px; }
.ar-road-path { stroke-dasharray:500; stroke-dashoffset:500; animation:arDash 3s ease forwards; }
.ar-road-node { animation:arTick 2.6s ease-in-out infinite; }

/* compliance viz */
.ar-holo-check { height:190px; display:flex; flex-direction:column; gap:9px; justify-content:center; }
.ar-check-row { display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:9px;
  border:1px solid rgba(245,184,77,.25); background:rgba(245,184,77,.05);
  font-family:var(--font-mono); font-size:10px; letter-spacing:1px; color:#C4D3E5; animation:arTick 3s ease-in-out infinite; }
.ar-check-row i { width:16px; height:16px; border-radius:5px; border:1.5px solid var(--acc); display:grid; place-items:center;
  font-size:9px; font-style:normal; color:var(--acc); animation:arShieldPulse 2.6s ease-out infinite; }
.ar-check-row em { font-style:normal; }

/* ---------- Workflow ---------- */
.ar-sol-workflow { position:relative; overflow:hidden; }
.ar-wf-dots { position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(56,225,255,.09) 1px, transparent 1px); background-size:40px 40px;
  -webkit-mask-image:radial-gradient(800px 400px at 50% 50%, black, transparent);
  mask-image:radial-gradient(800px 400px at 50% 50%, black, transparent); }
.ar-wf-grid { position:relative; display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-top:60px; }
.ar-wf-track { position:absolute; inset-inline:6%; top:45px; height:2px; background:rgba(255,255,255,.09); border-radius:2px; }
.ar-wf-fill { position:absolute; inset-inline-start:6%; top:45px; height:2px; width:0; border-radius:2px;
  background:linear-gradient(to right, var(--cyan), var(--teal), var(--violet));
  box-shadow:0 0 12px rgba(56,225,255,.7); transition:width .8s cubic-bezier(.3,.9,.3,1); }
[dir="rtl"] .ar-wf-fill { background:linear-gradient(to left, var(--cyan), var(--teal), var(--violet)); }
.ar-wf-step { display:flex; flex-direction:column; align-items:center; gap:12px; padding:14px 10px; border-radius:14px;
  background:transparent; transition:background .6s ease, transform .4s ease; }
.ar-wf-step:hover { transform:translateY(-4px); }
.ar-wf-step.is-active { background:rgba(56,225,255,.05); }
.ar-wf-node { position:relative; width:62px; height:62px; border-radius:50%; display:grid; place-items:center; font-size:22px; z-index:1;
  border:1.5px solid rgba(255,255,255,.14); background:var(--bg2); transform:scale(.86);
  transition:transform .55s cubic-bezier(.34,1.56,.64,1), border-color .5s ease, box-shadow .5s ease; }
.ar-wf-step.is-active .ar-wf-node { border-color:var(--cyan); box-shadow:0 0 30px rgba(56,225,255,.4); transform:scale(1.1); }
.ar-wf-ring { position:absolute; inset:-6px; border:1px solid var(--cyan); border-radius:50%; opacity:0; }
.ar-wf-step.is-active .ar-wf-ring { opacity:1; animation:arRing 2.4s ease-out infinite; }
.ar-wf-num { font-family:var(--font-mono); font-size:10px; letter-spacing:2px; color:var(--dim); transition:color .5s ease; }
.ar-wf-step.is-active .ar-wf-num { color:var(--cyan); }
.ar-wf-name { font-family:var(--font-head); font-size:16px; font-weight:600; color:var(--text3); transition:color .5s ease; }
.ar-wf-step.is-active .ar-wf-name { color:var(--text); }
.ar-wf-desc { color:var(--text3); font-size:13px; line-height:1.55; opacity:.4; transition:opacity .5s ease; }
.ar-wf-step.is-active .ar-wf-desc { opacity:1; }
@media (max-width:1100px) {
  .ar-wf-grid { grid-template-columns:repeat(3,1fr); row-gap:30px; }
  .ar-wf-track, .ar-wf-fill { display:none; }
}
@media (max-width:680px) { .ar-wf-grid { grid-template-columns:repeat(2,1fr); } }

/* ---------- FAQ ---------- */
.ar-faq-list { display:flex; flex-direction:column; gap:12px; margin-top:44px; }
.ar-faq-item { border-radius:14px; overflow:hidden; border:1px solid rgba(255,255,255,.09); background:rgba(255,255,255,.03);
  transition:border-color .35s ease, background .35s ease; }
.ar-faq-item.is-open { border-color:rgba(56,225,255,.45); background:rgba(56,225,255,.05); }
.ar-faq-q { width:100%; text-align:start; background:none; border:none; cursor:pointer; padding:20px 22px;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  color:var(--text); font-family:var(--font-head); font-size:15.5px; font-weight:600; }
.ar-faq-q i { flex-shrink:0; color:var(--cyan); font-size:20px; font-style:normal;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1); }
.ar-faq-item.is-open .ar-faq-q i { transform:rotate(135deg); }
.ar-faq-a { max-height:0; overflow:hidden; transition:max-height .4s ease; }
.ar-faq-item.is-open .ar-faq-a { max-height:280px; }
.ar-faq-a p { margin:0; padding:0 22px 20px; color:var(--text3); font-size:14.5px; line-height:1.65; }

/* ---------- CTA extras ---------- */
.ar-cta-ripple { position:absolute; left:50%; bottom:6%; width:420px; height:420px; margin-inline-start:-210px;
  border:1px solid rgba(56,225,255,.3); border-radius:50%; pointer-events:none; animation:arRing 6s ease-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .ar-sol-hero *, .ar-pillar-viz *, .ar-holo-panel, .ar-holo-panel *, .ar-cta-ripple,
  .ar-radiant::before, .ar-pillar-ring, .ar-detail-icon-ring, .ar-wf-ring { animation:none !important; }
  .ar-wf-fill, .ar-wf-node, .ar-faq-a { transition:none !important; }
  .ar-wf-node { transform:none !important; }
  .ar-wf-desc, .ar-wf-name, .ar-wf-num { opacity:1 !important; }
  .ar-dash-line, .ar-road-path { stroke-dashoffset:0 !important; }
}