/* ═══════════════════════════════════════════════
   Banox Solutions — Design System & Styles
   ═══════════════════════════════════════════════ */

/* ── Custom Properties ── */
:root {
  --color-bg: #070B14;
  --color-bg-alt: #0B1225;
  --color-bg-card: #0F1A30;
  --color-bg-elevated: #141F38;
  --color-primary: #2563EB;
  --color-primary-dark: #1A4BB8;
  --color-primary-glow: rgba(37, 99, 235, 0.25);
  --color-primary-subtle: rgba(37, 99, 235, 0.08);
  --color-accent: #3B82F6;
  --color-text: #EEF2FF;
  --color-text-secondary: #94A3C8;
  --color-text-muted: #64748B;
  --color-border: rgba(148, 163, 200, 0.08);
  --color-border-strong: rgba(148, 163, 200, 0.16);
  --gradient-primary: linear-gradient(135deg, #2563EB, #1D4ED8);
  --gradient-text: linear-gradient(135deg, #EEF2FF 0%, #94A3C8 100%);
  --gradient-accent: linear-gradient(135deg, #2563EB, #3B82F6);
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Plus Jakarta Sans', var(--font-sans);
  --font-sans-ar: 'Noto Sans Arabic', 'Changa', 'Inter', sans-serif;
  --font-display-ar: 'Changa', 'Noto Sans Arabic', 'Plus Jakarta Sans', sans-serif;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --nav-height: 72px;
  --container: 1200px;
  --container-wide: 1400px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --scrollbar-width: 0px;
}

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{font-family:var(--font-sans);background:var(--color-bg);color:var(--color-text);line-height:1.6;overflow-x:hidden;min-height:100vh}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
ul{list-style:none}
canvas{display:block}
::selection{background:var(--color-primary);color:#fff}

/* ── Scrollbar ── */
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:var(--color-bg)}
::-webkit-scrollbar-thumb{background:var(--color-border-strong);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--color-text-muted)}

/* ── Container ── */
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 24px}
.container-wide{width:100%;max-width:var(--container-wide);margin:0 auto;padding:0 24px}

/* ── Typography ── */
h1,h2,h3,h4,h5,h6{font-family:var(--font-display);font-weight:600;line-height:1.1;letter-spacing:-0.02em}
h1{font-size:clamp(2.5rem, 6vw, 5rem);font-weight:700}
h2{font-size:clamp(2rem, 4vw, 3.5rem);font-weight:700}
h3{font-size:clamp(1.25rem, 2.5vw, 2rem);font-weight:600}
h4{font-size:clamp(1.1rem, 1.5vw, 1.35rem);font-weight:600}

.section-label{
  display:inline-block;
  font-size:0.75rem;
  font-weight:500;
  letter-spacing:0.15em;
  text-transform:uppercase;
  color:var(--color-primary);
  margin-bottom:1rem
}

p{color:var(--color-text-secondary);max-width:65ch}
p + p{margin-top:1rem}

.text-gradient{
  background:var(--gradient-text);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text
}

/* ── Buttons ── */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:14px 32px;
  border-radius:var(--radius-sm);
  font-size:0.9rem;
  font-weight:500;
  line-height:1;
  transition:all 0.4s var(--ease-out-quart);
  position:relative;
  overflow:hidden
}
.btn-primary{
  background:var(--gradient-primary);
  color:#fff
}
.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 32px var(--color-primary-glow)
}
.btn-outline{
  border:1px solid var(--color-border-strong);
  color:var(--color-text)
}
.btn-outline:hover{
  border-color:var(--color-primary);
  background:var(--color-primary-subtle);
  transform:translateY(-2px)
}
.btn .btn-arrow{
  display:inline-block;
  transition:transform 0.3s var(--ease-out-expo)
}
.btn:hover .btn-arrow{
  transform:translateX(4px)
}

/* ── Section ── */
.section{
  padding:100px 0;
  position:relative
}
@media(min-width:768px){
  .section{padding:140px 0}
}
@media(min-width:1200px){
  .section{padding:180px 0}
}

.section-header{
  margin-bottom:60px
}
.section-header h2{
  max-width:14ch
}

/* ═══════════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════════ */
.site-header{
  position:fixed;
  top:0;left:0;right:0;
  z-index:1000;
  padding:0 24px;
  height:var(--nav-height);
  display:flex;
  align-items:center;
  transition:background 0.5s var(--ease-out-quart), backdrop-filter 0.5s var(--ease-out-quart);
}
.site-header.is-scrolled{
  background:rgba(7,11,20,.85);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--color-border);
}
.site-header .container-wide{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0
}

/* Logo */
.logo{
  display:flex;
  align-items:center;
  gap:12px;
  z-index:1001
}
.logo-mark{
  width:36px;
  height:36px;
  flex-shrink:0
}
.logo-text{
  font-family:var(--font-display);
  font-size:1.25rem;
  font-weight:700;
  letter-spacing:-0.02em
}

/* Nav */
.nav-links{
  display:none;
  align-items:center;
  gap:36px
}
@media(min-width:900px){
  .nav-links{display:flex}
}
.nav-links a{
  font-size:0.875rem;
  font-weight:450;
  color:var(--color-text-secondary);
  position:relative;
  transition:color 0.3s ease;
  padding:4px 0
}
.nav-links a::after{
  content:'';
  position:absolute;
  bottom:0;left:0;
  width:0;height:1.5px;
  background:var(--color-primary);
  transition:width 0.4s var(--ease-out-expo)
}
.nav-links a:hover{
  color:var(--color-text)
}
.nav-links a:hover::after{
  width:100%
}

/* Header CTA */
.header-cta{
  display:none;
  padding:10px 24px;
  font-size:0.85rem
}
@media(min-width:768px){
  .header-cta{display:inline-flex}
}

/* Menu Toggle (Hamburger) */
.menu-toggle{
  width:44px;height:44px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  z-index:1001;
  position:relative
}
@media(min-width:900px){
  .menu-toggle{display:none}
}
.menu-toggle span{
  display:block;
  width:24px;height:1.5px;
  background:var(--color-text);
  border-radius:1px;
  transition:all 0.4s var(--ease-out-quart);
  transform-origin:center
}
.menu-toggle.is-active span:nth-child(1){
  transform:translateY(6.5px) rotate(45deg)
}
.menu-toggle.is-active span:nth-child(2){
  opacity:0;
  transform:scaleX(0)
}
.menu-toggle.is-active span:nth-child(3){
  transform:translateY(-6.5px) rotate(-45deg)
}

/* ── Mobile Menu Overlay ── */
.mobile-menu{
  position:fixed;
  top:0;left:0;right:0;bottom:0;
  background:var(--color-bg);
  z-index:999;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  opacity:0;
  pointer-events:none;
  transition:opacity 0.5s var(--ease-out-quart)
}
.mobile-menu.is-open{
  opacity:1;
  pointer-events:auto
}
.mobile-menu a{
  font-family:var(--font-display);
  font-size:clamp(1.5rem, 5vw, 2.5rem);
  font-weight:600;
  color:var(--color-text-secondary);
  transition:color 0.3s ease;
  padding:12px 0
}
.mobile-menu a:hover{
  color:var(--color-text)
}
.mobile-menu .mobile-cta{
  margin-top:24px;
  font-size:1rem;
  padding:16px 40px
}

/* ═══════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════ */
.hero{
  min-height:100vh;
  display:flex;
  align-items:center;
  position:relative;
  overflow:hidden;
  padding:var(--nav-height) 0 60px
}
.hero .container{
  position:relative;
  z-index:2;
  padding-top:40px
}
.hero-content{
  max-width:720px
}
.hero-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 16px;
  border:1px solid var(--color-border-strong);
  border-radius:100px;
  font-size:0.75rem;
  font-weight:500;
  letter-spacing:0.05em;
  color:var(--color-text-muted);
  margin-bottom:32px;
  transition:all 0.3s ease
}
.hero-badge-dot{
  width:6px;height:6px;
  border-radius:50%;
  background:var(--color-primary);
  animation:pulse-dot 2s ease-in-out infinite
}
@keyframes pulse-dot{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:0.5;transform:scale(0.8)}
}

.hero h1{
  margin-bottom:24px;
  max-width:14ch
}
.hero h1 .highlight{
  background:var(--gradient-accent);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text
}
.hero p{
  font-size:clamp(1rem, 1.5vw, 1.2rem);
  line-height:1.7;
  margin-bottom:40px;
  max-width:56ch
}
.hero-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:16px
}

/* Hero Canvas */
#hero-canvas{
  position:absolute;
  top:0;left:0;
  width:100%;height:100%;
  z-index:0;
  pointer-events:none
}

/* Diagonal accent line */
.hero-diagonal{
  position:absolute;
  top:-20%;right:-10%;
  width:60%;height:140%;
  background:linear-gradient(135deg, transparent 40%, rgba(37,99,235,0.03) 50%, transparent 60%);
  transform:rotate(-15deg);
  pointer-events:none;
  z-index:1
}

/* Scroll indicator */
.scroll-indicator{
  position:absolute;
  bottom:32px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  color:var(--color-text-muted);
  font-size:0.7rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  z-index:2;
  animation:fade-in-up 1s var(--ease-out-expo) 1.5s both
}
.scroll-line{
  width:1px;
  height:40px;
  background:linear-gradient(to bottom, var(--color-text-muted), transparent);
  animation:scroll-line 2s ease-in-out infinite
}
@keyframes scroll-line{
  0%{transform:scaleY(0);transform-origin:top}
  50%{transform:scaleY(1);transform-origin:top}
  50.1%{transform:scaleY(1);transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}
}

/* ═══════════════════════════════════════════════
   INTRO
   ═══════════════════════════════════════════════ */
.intro{
  background:var(--color-bg-alt)
}
.intro-grid{
  display:grid;
  gap:40px
}
@media(min-width:768px){
  .intro-grid{
    grid-template-columns:1fr 1fr;
    gap:80px;
    align-items:center
  }
}
.intro-statement{
  font-family:var(--font-display);
  font-size:clamp(1.75rem, 3.5vw, 2.75rem);
  font-weight:700;
  line-height:1.4;
  letter-spacing:-0.02em;
  color:var(--color-text);
  max-width:14ch
}
.intro-statement .accent{
  color:var(--color-primary)
}
.intro-text p{
  font-size:clamp(0.95rem, 1.2vw, 1.1rem);
  line-height:1.8
}

/* Diagonal divider */
.diagonal-divider{
  width:80px;
  height:2px;
  background:var(--gradient-accent);
  transform:rotate(-45deg);
  margin:40px 0
}

/* ═══════════════════════════════════════════════
   CAPABILITIES
   ═══════════════════════════════════════════════ */
.capabilities-layout{
  display:grid;
  gap:40px
}
@media(min-width:900px){
  .capabilities-layout{
    grid-template-columns:380px 1fr;
    gap:80px;
    align-items:start
  }
}

.capabilities-list{
  display:flex;
  flex-direction:column;
  gap:4px
}
.capability-item{
  display:flex;
  align-items:center;
  gap:16px;
  padding:20px 0;
  border-bottom:1px solid var(--color-border);
  cursor:pointer;
  transition:all 0.4s var(--ease-out-quart);
  position:relative
}
.capability-item::after{
  content:'';
  position:absolute;
  bottom:-1px;left:0;
  width:0;height:1px;
  background:var(--color-primary);
  transition:width 0.6s var(--ease-out-expo)
}
.capability-item.is-active::after,
.capability-item:hover::after{
  width:100%
}
.capability-index{
  font-size:0.75rem;
  font-weight:500;
  color:var(--color-text-muted);
  font-feature-settings:'tnum';
  width:28px;
  flex-shrink:0;
  transition:color 0.3s ease
}
.capability-item.is-active .capability-index{
  color:var(--color-primary)
}
.capability-name{
  font-family:var(--font-display);
  font-size:clamp(1.1rem, 1.5vw, 1.35rem);
  font-weight:600;
  letter-spacing:-0.01em;
  color:var(--color-text-secondary);
  transition:color 0.3s ease;
  flex:1
}
.capability-item.is-active .capability-name{
  color:var(--color-text)
}
.capability-arrow{
  color:var(--color-text-muted);
  transition:all 0.3s var(--ease-out-expo);
  font-size:1.1rem
}
.capability-item.is-active .capability-arrow{
  color:var(--color-primary);
  transform:translateX(4px)
}

/* Capability Display Panel */
.capability-display{
  position:relative;
  min-height:400px;
  display:flex;
  align-items:center;
  background:var(--color-bg-card);
  border-radius:var(--radius-lg);
  overflow:hidden;
  border:1px solid var(--color-border)
}
.capability-panel{
  padding:48px;
  width:100%;
  opacity:0;
  position:absolute;
  transition:opacity 0.6s var(--ease-out-quart), transform 0.6s var(--ease-out-quart);
  transform:translateY(12px)
}
.capability-panel.is-active{
  opacity:1;
  position:relative;
  transform:translateY(0)
}
.capability-panel h3{
  margin-bottom:16px;
  color:var(--color-text)
}
.capability-panel p{
  font-size:0.95rem;
  line-height:1.8;
  margin-bottom:24px
}
.capability-panel .capability-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px
}
.capability-panel .capability-tags span{
  padding:6px 14px;
  border-radius:100px;
  font-size:0.78rem;
  font-weight:450;
  background:var(--color-primary-subtle);
  color:var(--color-primary);
  border:1px solid rgba(37,99,235,0.15)
}

/* Capability canvas */
#capability-canvas{
  position:absolute;
  top:0;left:0;
  width:100%;height:100%;
  pointer-events:none;
  opacity:0.4
}

/* ═══════════════════════════════════════════════
   CONNECTED SOLUTIONS
   ═══════════════════════════════════════════════ */
.connected{
  background:var(--color-bg-alt);
  overflow:hidden
}
.connected-header{
  position:relative;
  z-index:2
}
.connected-header p{
  max-width:50ch
}
#network-canvas{
  width:100%;
  height:500px;
  border-radius:var(--radius-lg);
  background:var(--color-bg-card);
  border:1px solid var(--color-border);
  margin-top:40px
}
@media(min-width:768px){
  #network-canvas{height:600px}
}
@media(min-width:1200px){
  #network-canvas{height:650px}
}

/* ═══════════════════════════════════════════════
   SELECTED SOLUTIONS
   ═══════════════════════════════════════════════ */
.solutions-grid{
  display:grid;
  gap:16px
}
@media(min-width:640px){
  .solutions-grid{
    grid-template-columns:repeat(2,1fr)
  }
}
@media(min-width:1000px){
  .solutions-grid{
    grid-template-columns:repeat(3,1fr)
  }
}

.solution-card{
  background:var(--color-bg-card);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  padding:32px;
  transition:all 0.5s var(--ease-out-quart);
  position:relative;
  overflow:hidden;
  cursor:default
}
.solution-card::before{
  content:'';
  position:absolute;
  top:0;left:0;
  width:100%;height:3px;
  background:var(--gradient-accent);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 0.5s var(--ease-out-expo)
}
.solution-card:hover::before{
  transform:scaleX(1)
}
.solution-card:hover{
  border-color:var(--color-border-strong);
  transform:translateY(-4px);
  box-shadow:0 12px 40px rgba(0,0,0,0.3)
}
.solution-card .card-number{
  font-family:var(--font-display);
  font-size:0.75rem;
  font-weight:600;
  color:var(--color-primary);
  letter-spacing:0.05em;
  margin-bottom:16px;
  display:block
}
.solution-card h3{
  margin-bottom:12px;
  font-size:1.15rem;
  color:var(--color-text)
}
.solution-card p{
  font-size:0.88rem;
  line-height:1.7;
  color:var(--color-text-muted)
}
.solution-card .card-diagonal{
  position:absolute;
  top:-20px;right:-20px;
  width:80px;height:80px;
  border:1px solid var(--color-border);
  transform:rotate(45deg);
  border-radius:4px;
  transition:all 0.5s var(--ease-out-quart)
}
.solution-card:hover .card-diagonal{
  border-color:rgba(37,99,235,0.2);
  transform:rotate(45deg) translate(4px,-4px)
}

/* ═══════════════════════════════════════════════
   PROCESS
   ═══════════════════════════════════════════════ */
.process{
  background:var(--color-bg-alt);
  overflow:hidden
}
.process-track{
  position:relative;
  padding-top:40px
}
.process-line{
  position:absolute;
  top:60px;left:24px;
  width:2px;
  height:calc(100% - 60px);
  background:var(--color-border-strong)
}
@media(min-width:768px){
  .process-line{
    left:50%;
    transform:translateX(-50%);
    bottom:auto
  }
}
.process-line-fill{
  width:100%;height:0;
  background:var(--gradient-accent);
  transition:height 0.1s linear
}

.process-steps{
  display:flex;
  flex-direction:column;
  gap:80px;
  position:relative;
  z-index:2;
  padding-bottom:40px
}
@media(min-width:768px){
  .process-steps{gap:120px}
}

.process-step{
  position:relative;
  display:grid;
  gap:16px
}
@media(min-width:768px){
  .process-step{
    grid-template-columns:1fr 1fr;
    gap:60px
  }
  .process-step:nth-child(even){
    direction:rtl;
    text-align:right
  }
  .process-step:nth-child(even) .step-content{
    direction:ltr;
    text-align:right
  }
}

.step-marker{
  display:flex;
  align-items:center;
  gap:16px
}
@media(min-width:768px){
  .step-marker{
    flex-direction:column;
    align-items:center;
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    top:-20px
  }
  .process-step:nth-child(even) .step-marker{
    direction:ltr
  }
}
.step-dot{
  width:28px;height:28px;
  border-radius:50%;
  border:2px solid var(--color-border-strong);
  background:var(--color-bg);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  transition:all 0.5s var(--ease-out-expo);
  z-index:2
}
.step-dot-inner{
  width:10px;height:10px;
  border-radius:50%;
  background:var(--color-border-strong);
  transition:all 0.5s var(--ease-out-expo)
}
.process-step.is-visible .step-dot{
  border-color:var(--color-primary);
  box-shadow:0 0 20px var(--color-primary-glow)
}
.process-step.is-visible .step-dot-inner{
  background:var(--color-primary)
}
.step-number{
  font-family:var(--font-display);
  font-size:0.8rem;
  font-weight:600;
  color:var(--color-text-muted);
  letter-spacing:0.05em
}
.process-step.is-visible .step-number{
  color:var(--color-primary)
}

.step-content{
  padding-left:44px
}
@media(min-width:768px){
  .step-content{
    padding-left:0
  }
  .process-step:nth-child(even) .step-content{
    padding-right:0
  }
}
.step-content h3{
  font-size:clamp(1.3rem, 2vw, 1.75rem);
  margin-bottom:8px;
  color:var(--color-text)
}
.step-content p{
  font-size:0.9rem;
  line-height:1.7
}

/* ═══════════════════════════════════════════════
   WHY BANOX
   ═══════════════════════════════════════════════ */
.why-grid{
  display:grid;
  gap:16px
}
@media(min-width:640px){
  .why-grid{
    grid-template-columns:repeat(2,1fr)
  }
}
@media(min-width:1000px){
  .why-grid{
    grid-template-columns:repeat(3,1fr)
  }
}

.why-item{
  background:var(--color-bg-card);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  padding:32px;
  transition:all 0.4s var(--ease-out-quart)
}
.why-item:hover{
  border-color:var(--color-border-strong);
  background:var(--color-bg-elevated);
  transform:translateY(-2px)
}
.why-item .item-number{
  font-family:var(--font-display);
  font-size:2.5rem;
  font-weight:700;
  color:var(--color-primary);
  opacity:0.3;
  line-height:1;
  margin-bottom:16px;
  display:block
}
.why-item h4{
  margin-bottom:10px;
  color:var(--color-text)
}
.why-item p{
  font-size:0.88rem;
  line-height:1.7;
  color:var(--color-text-muted)
}
.why-item .item-accent{
  width:24px;
  height:2px;
  background:var(--gradient-accent);
  margin-bottom:16px;
  transform:rotate(-45deg);
  transform-origin:left
}

/* ═══════════════════════════════════════════════
   CTA
   ═══════════════════════════════════════════════ */
.cta-section{
  background:var(--color-bg-alt);
  text-align:center;
  overflow:hidden
}
.cta-section .container{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center
}
.cta-section h2{
  max-width:16ch;
  margin-bottom:20px
}
.cta-section p{
  margin-bottom:40px;
  max-width:50ch
}
.cta-section .btn{
  font-size:1rem;
  padding:18px 44px
}

/* CTA Background decoration */
.cta-decoration{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:800px;height:800px;
  pointer-events:none;
  z-index:0;
  opacity:0.3
}
.cta-decoration .ring{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  border:1px solid var(--color-border-strong);
  animation:cta-ring 8s ease-in-out infinite
}
.cta-decoration .ring:nth-child(1){
  width:200px;height:200px;
  animation-delay:0s
}
.cta-decoration .ring:nth-child(2){
  width:400px;height:400px;
  animation-delay:2s
}
.cta-decoration .ring:nth-child(3){
  width:600px;height:600px;
  animation-delay:4s
}
.cta-decoration .diagonal-line{
  position:absolute;
  top:50%;left:50%;
  width:400px;height:1px;
  background:linear-gradient(90deg, transparent, var(--color-primary), transparent);
  transform:translate(-50%,-50%) rotate(-45deg);
  opacity:0.3
}
@keyframes cta-ring{
  0%,100%{opacity:0.15;transform:translate(-50%,-50%) scale(1)}
  50%{opacity:0.4;transform:translate(-50%,-50%) scale(1.05)}
}

/* ═══════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════ */
.site-footer{
  padding:60px 0 32px;
  border-top:1px solid var(--color-border)
}
.footer-grid{
  display:grid;
  gap:32px
}
@media(min-width:768px){
  .footer-grid{
    grid-template-columns:2fr 1fr 1fr;
    gap:60px
  }
}
.footer-brand p{
  font-size:0.85rem;
  margin-top:16px;
  color:var(--color-text-muted)
}
.footer-col h5{
  font-size:0.75rem;
  font-weight:600;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--color-text-muted);
  margin-bottom:20px
}
.footer-col a{
  display:block;
  font-size:0.88rem;
  color:var(--color-text-secondary);
  padding:6px 0;
  transition:color 0.3s ease
}
.footer-col a:hover{
  color:var(--color-text)
}
.footer-bottom{
  margin-top:48px;
  padding-top:24px;
  border-top:1px solid var(--color-border);
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  font-size:0.8rem;
  color:var(--color-text-muted)
}

/* ═══════════════════════════════════════════════
   LANGUAGE SWITCHER
   ═══════════════════════════════════════════════ */
.header-actions{
  display:none;
  align-items:center;
  gap:16px;
  z-index:1001
}
@media(min-width:768px){
  .header-actions{display:flex}
}

.lang-toggle{
  padding:8px 16px;
  border-radius:var(--radius-sm);
  font-size:0.8rem;
  font-weight:600;
  letter-spacing:0.03em;
  color:var(--color-text-secondary);
  border:1px solid var(--color-border-strong);
  background:transparent;
  transition:all 0.3s var(--ease-out-quart);
  cursor:pointer;
  font-family:var(--font-sans);
  min-width:56px;
  text-align:center
}
.lang-toggle:hover{
  border-color:var(--color-primary);
  color:var(--color-text);
  background:var(--color-primary-subtle)
}
.mobile-lang-toggle{
  display:inline-flex;
  margin-bottom:16px;
  font-size:0.9rem;
  padding:10px 24px
}
@media(min-width:900px){
  .mobile-lang-toggle{display:none}
}

/* ── RTL OVERRIDES ── */
html[dir="rtl"]{
  --font-sans: var(--font-sans-ar);
  --font-display: var(--font-display-ar)
}
html[dir="rtl"] body{
  font-family:var(--font-sans-ar)
}
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6{
  font-family:var(--font-display-ar);
  letter-spacing:0;
  font-weight:700
}
html[dir="rtl"] h1{font-weight:800}
html[dir="rtl"] .capability-arrow{
  transform:rotate(180deg)
}
html[dir="rtl"] .capability-item.is-active .capability-arrow{
  transform:rotate(180deg) translateX(4px)
}
html[dir="rtl"] .btn .btn-arrow{
  transform:rotate(180deg)
}
html[dir="rtl"] .btn:hover .btn-arrow{
  transform:rotate(180deg) translateX(4px)
}
html[dir="rtl"] .diagonal-divider{
  transform:rotate(45deg)
}
html[dir="rtl"] .step-content{
  padding-left:0;
  padding-right:44px
}
html[dir="rtl"] .why-item .item-accent{
  transform:rotate(45deg)
}
html[dir="rtl"] .hero-diagonal{
  right:auto;
  left:-10%;
  transform:rotate(15deg)
}
html[dir="rtl"] p{
  max-width:65ch
}
html[dir="rtl"] .section-header h2{
  max-width:none
}
html[dir="rtl"] .hero-content{
  text-align:right
}
html[dir="rtl"] .hero-buttons{
  justify-content:flex-end
}
html[dir="rtl"] .intro-statement{
  text-align:right
}
html[dir="rtl"] .connected-header p{
  text-align:right
}
html[dir="rtl"] .cta-section .container{
  text-align:center
}
html[dir="rtl"] .cta-section p{
  text-align:center
}

/* ═══════════════════════════════════════════════
   ANIMATIONS (reveal on scroll)
   ═══════════════════════════════════════════════ */
.reveal{
  opacity:0;
  transform:translateY(30px);
  transition:opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo)
}
.reveal.is-visible{
  opacity:1;
  transform:translateY(0)
}
.reveal-delay-1{transition-delay:0.1s}
.reveal-delay-2{transition-delay:0.2s}
.reveal-delay-3{transition-delay:0.3s}
.reveal-delay-4{transition-delay:0.4s}
.reveal-delay-5{transition-delay:0.5s}

/* Text reveal (word-by-word) */
.text-reveal{
  overflow:hidden
}
.text-reveal .word{
  display:inline-block;
  opacity:0;
  transform:translateY(100%);
  transition:opacity 0.6s var(--ease-out-expo), transform 0.6s var(--ease-out-expo)
}
.text-reveal.is-visible .word{
  opacity:1;
  transform:translateY(0)
}

/* ═══════════════════════════════════════════════
   PREFERS-REDUCED-MOTION
   ═══════════════════════════════════════════════ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important
  }
  .reveal{opacity:1;transform:none}
  .text-reveal .word{opacity:1;transform:none}
  #hero-canvas{display:none}
  #network-canvas{display:none}
  #capability-canvas{display:none}
}

/* ═══════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════ */

/* Tablet */
@media(min-width:768px){
  .hero h1{font-size:clamp(3rem, 5.5vw, 5rem)}
  .intro-statement{font-size:clamp(2rem, 3vw, 2.75rem)}
}
html[dir="rtl"] .intro-statement{
  line-height:1.6
}
@media(min-width:900px){
  .hero h1{font-size:clamp(3.5rem, 5vw, 5.5rem)}
}

/* Desktop */
@media(min-width:1200px){
  :root{--nav-height:80px}
  .section{padding:180px 0}
}

/* Touch devices: remove hover effects that cause sticky hover */
@media(hover:none){
  .solution-card:hover{transform:none}
  .why-item:hover{transform:none}
  .btn-primary:hover{transform:none}
  .btn-outline:hover{transform:none}
}

/* ═══════════════════════════════════════════════
   UTILITY
   ═══════════════════════════════════════════════ */
.sr-only{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0
}