/* ============================================================
   CALLNOMIC SOLUTIONS — Shared Design System
   Palette derived from the logo: deep navy + cyan ripples.
   Supports dark (default) + light themes and RTL (Arabic).
   ============================================================ */

:root{
  /* Brand */
  --navy:#0a1322;          /* page background (dark) */
  --navy2:#0d1830;
  --surface:#101c33;        /* cards */
  --surface2:#16243f;
  --surface3:#1c2e4d;
  --cyan:#38c6f4;           /* primary accent (logo light blue) */
  --cyan-bright:#5dd3f7;
  --cyan-deep:#1b9fd4;
  --blue:#2f6fd6;
  --purple:#8b5cf6;
  --gold:#f5b34a;
  --green:#27c08a;
  --red:#ef5d6b;
  --txt:#eaf2fb;
  --txt2:#9db4d4;
  --txt3:#5d769b;
  --border:#1e3454;
  --border2:#2b466c;
  --shadow:0 18px 50px -22px rgba(0,0,0,.7);
  --shadow-cyan:0 14px 40px -18px rgba(56,198,244,.45);
  --r:16px; --rs:10px; --rxs:8px;
  --grad-cyan:linear-gradient(135deg,#1b9fd4,#38c6f4 55%,#5dd3f7);
  --grad-deep:linear-gradient(135deg,#0a1322,#101c33);
  --maxw:1180px;
  --ease:cubic-bezier(.22,.61,.36,1);
  color-scheme:dark;
}

/* LIGHT THEME */
html[data-theme="light"]{
  --navy:#eef3fb;
  --navy2:#e7eefa;
  --surface:#ffffff;
  --surface2:#f3f7fd;
  --surface3:#e9f1fb;
  --txt:#0c1a2e;
  --txt2:#41597a;
  --txt3:#6e84a3;
  --border:#d6e2f1;
  --border2:#c2d4ea;
  --shadow:0 18px 50px -28px rgba(20,50,90,.35);
  --grad-deep:linear-gradient(135deg,#f3f7fd,#ffffff);
  color-scheme:light;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden}
body{
  font-family:'Outfit',system-ui,sans-serif;
  background:var(--navy);
  color:var(--txt);
  font-size:15px;
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  transition:background .4s var(--ease),color .3s var(--ease);
}
html[dir="rtl"] body{font-family:'Cairo','Outfit',sans-serif}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer;border:none}
::selection{background:var(--cyan);color:#04101f}

/* Ambient page glow */
.bg-orbs{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.bg-orbs span{position:absolute;border-radius:50%;filter:blur(80px);opacity:.5}
.bg-orbs span:nth-child(1){width:520px;height:520px;background:radial-gradient(circle,rgba(56,198,244,.22),transparent 70%);top:-160px;right:-120px}
.bg-orbs span:nth-child(2){width:460px;height:460px;background:radial-gradient(circle,rgba(139,92,246,.14),transparent 70%);bottom:-160px;left:-140px}
.bg-orbs span:nth-child(3){width:380px;height:380px;background:radial-gradient(circle,rgba(47,111,214,.12),transparent 70%);top:40%;left:50%}
html[data-theme="light"] .bg-orbs span{opacity:.6}

/* --- v5 "INTELLIGENT SYSTEMS" theme tokens (deeper ink, sharper cyan) --- */
:root{
  --ink:#060810; --ink2:#080d1a; --ink3:#0b1220;
  --cyan-sharp:#00d4ff; --cyan-bri:#00eaff; --cyan-deep2:#0066ff;
  --grad-sharp:linear-gradient(135deg,#00d4ff,#0066ff);
  --bdr-cyan:rgba(0,212,255,.12); --bdr-cyan2:rgba(0,212,255,.25);
  --cdim:rgba(0,212,255,.08);
  --glow-cyan:0 0 30px rgba(0,212,255,.25);
  --glow-cyan2:0 0 60px rgba(0,212,255,.15);
}
body{background:var(--ink)}
.font-mono{font-family:'Orbitron',monospace}

/* section eyebrow used by the new sections */
.sec-tag{font-family:'Orbitron',monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--cyan-sharp);margin-bottom:14px;display:inline-flex;align-items:center;gap:10px}
.sec-tag::before{content:'';display:block;width:30px;height:1px;background:var(--cyan-sharp)}
.sec-h{font-family:'Orbitron',monospace;font-weight:800;line-height:1.12;letter-spacing:-.01em;font-size:clamp(1.6rem,2.8vw,2.6rem)}

/* sharper primary button matching the reference */
.btn-prim{display:inline-flex;align-items:center;gap:8px;padding:14px 30px;background:var(--grad-sharp);color:#fff;border-radius:7px;font-weight:700;border:none;cursor:pointer;box-shadow:0 0 24px rgba(0,212,255,.35);font-family:'Orbitron',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;transition:all .2s}
.btn-prim:hover{transform:translateY(-3px);box-shadow:0 0 40px rgba(0,212,255,.55)}
.btn-out{display:inline-flex;align-items:center;gap:8px;padding:14px 30px;background:transparent;color:var(--txt);border-radius:7px;font-size:13px;font-weight:500;border:1px solid var(--bdr-cyan2);cursor:pointer;text-decoration:none;transition:all .2s;font-family:'Outfit',sans-serif}
.btn-out:hover{border-color:var(--cyan-sharp);color:var(--cyan-sharp);background:var(--cdim)}

/* futuristic grid + noise overlay (sits behind content, above orbs) */
body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size:62px 62px;opacity:.55;
  -webkit-mask-image:radial-gradient(ellipse 90% 65% at 50% -5%,#000 0%,transparent 78%);
  mask-image:radial-gradient(ellipse 90% 65% at 50% -5%,#000 0%,transparent 78%)}
body::after{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.022'/%3E%3C/svg%3E")}
html[data-theme="light"] body::before{opacity:.7}
@media print{body::before,body::after{display:none}}

/* ---------- Layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.section{padding:84px 0}
.section-sm{padding:52px 0}
.center{text-align:center}

/* ---------- Top navigation ---------- */
.nav{
  position:sticky;top:0;z-index:90;
  backdrop-filter:blur(18px);
  background:color-mix(in srgb, var(--navy) 78%, transparent);
  border-bottom:1px solid var(--border);
  transition:background .3s,border-color .3s;
}
.nav-inner{max-width:var(--maxw);margin:0 auto;padding:11px 24px;display:flex;align-items:center;gap:18px}
.brand{display:flex;align-items:center;gap:11px;flex-shrink:0}
.brand img{height:38px;width:auto}
.brand-txt{font-weight:800;font-size:17px;letter-spacing:-.02em;line-height:1}
.brand-txt span{color:var(--cyan)}
.brand-txt small{display:block;font-size:9px;font-weight:500;letter-spacing:.28em;color:var(--txt3);margin-top:3px}
.nav-links{display:flex;gap:4px;margin-inline-start:auto;align-items:center}
.nav-links a{padding:8px 13px;border-radius:var(--rxs);font-size:13.5px;font-weight:500;color:var(--txt2);transition:.2s}
.nav-links a:hover{color:var(--txt);background:var(--surface2)}
.nav-links a.active{color:var(--cyan)}
.nav-tools{display:flex;align-items:center;gap:8px}
.icon-btn{
  width:38px;height:38px;border-radius:var(--rxs);background:var(--surface2);
  border:1px solid var(--border);color:var(--txt2);display:flex;align-items:center;
  justify-content:center;font-size:15px;transition:.2s
}
.icon-btn:hover{color:var(--cyan);border-color:var(--cyan)}
.fx-select,.lang-btn{
  height:38px;border-radius:var(--rxs);background:var(--surface2);border:1px solid var(--border);
  color:var(--txt);font-size:13px;font-weight:600;padding:0 10px;outline:none;cursor:pointer
}
.lang-btn{min-width:46px}
.btn-nav-cta{
  background:var(--grad-cyan);color:#04101f;font-weight:700;font-size:13.5px;
  padding:9px 16px;border-radius:var(--rxs);box-shadow:var(--shadow-cyan);transition:.2s
}
.btn-nav-cta:hover{transform:translateY(-1px)}
.hamburger{display:none;width:38px;height:38px;border-radius:var(--rxs);background:var(--surface2);border:1px solid var(--border);color:var(--txt);font-size:18px}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14.5px;padding:13px 24px;border-radius:var(--rs);transition:.22s var(--ease);white-space:nowrap}
.btn-primary{background:var(--grad-cyan);color:#04101f;box-shadow:var(--shadow-cyan)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 44px -16px rgba(56,198,244,.6)}
.btn-ghost{background:var(--surface2);color:var(--txt);border:1px solid var(--border2)}
.btn-ghost:hover{border-color:var(--cyan);color:var(--cyan)}
.btn-sm{padding:9px 16px;font-size:13px}
.btn-block{width:100%;justify-content:center}

/* ---------- Cards & primitives ---------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:24px;transition:.25s var(--ease)}
.card-hover:hover{border-color:var(--border2);transform:translateY(-4px);box-shadow:var(--shadow)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan);margin-bottom:16px}
.eyebrow::before{content:'';width:22px;height:1.5px;background:var(--cyan)}
h1,h2,h3{letter-spacing:-.025em;line-height:1.12;font-weight:800}
.h-xl{font-size:clamp(30px,6vw,62px)}
.h-lg{font-size:clamp(28px,4.4vw,44px)}
.h-md{font-size:clamp(22px,3vw,30px)}
.muted{color:var(--txt2)}
.lead{font-size:clamp(15px,1.6vw,18px);color:var(--txt2);line-height:1.75}
.grad-text{background:var(--grad-cyan);-webkit-background-clip:text;background-clip:text;color:transparent}
.tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.05em;padding:4px 10px;border-radius:20px;text-transform:uppercase}
.tag-cyan{background:rgba(56,198,244,.12);color:var(--cyan);border:1px solid rgba(56,198,244,.25)}
.tag-green{background:rgba(39,192,138,.14);color:var(--green)}
.tag-gold{background:rgba(245,179,74,.15);color:var(--gold)}
.tag-purple{background:rgba(139,92,246,.16);color:var(--purple)}
.divider{height:1px;background:var(--border);margin:0 auto;max-width:var(--maxw)}
.glow-line{height:1px;background:linear-gradient(90deg,transparent,rgba(56,198,244,.5),transparent)}

/* grids */
.grid{display:grid;gap:18px}
.grid>*{min-width:0}            /* let grid children shrink instead of forcing overflow */
canvas{max-width:100%}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}

/* form fields */
label.fld{display:block;font-size:12px;font-weight:600;color:var(--txt2);margin-bottom:6px;text-transform:uppercase;letter-spacing:.05em}
.input,select.input,textarea.input{
  width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:var(--rxs);
  padding:11px 13px;color:var(--txt);font-size:14px;font-family:inherit;outline:none;transition:.2s
}
.input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(56,198,244,.15)}
textarea.input{resize:vertical;min-height:90px}
.field{margin-bottom:14px}

/* ---------- Reveal-on-scroll ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}

/* ---------- Toast / modal ---------- */
.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(30px);background:var(--surface3);border:1px solid var(--border2);color:var(--txt);padding:13px 22px;border-radius:var(--rs);box-shadow:var(--shadow);z-index:1000;opacity:0;transition:.35s var(--ease);font-size:14px;font-weight:500;max-width:90vw}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.modal-overlay{position:fixed;inset:0;background:rgba(4,10,20,.72);backdrop-filter:blur(6px);z-index:200;display:none;align-items:center;justify-content:center;padding:20px}
.modal-overlay.open{display:flex}
.modal{background:var(--surface);border:1px solid var(--border2);border-radius:var(--r);max-width:520px;width:100%;max-height:90vh;overflow:auto;box-shadow:var(--shadow);animation:pop .3s var(--ease)}
@keyframes pop{from{opacity:0;transform:scale(.95) translateY(10px)}to{opacity:1;transform:none}}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--border)}
.modal-body{padding:24px}
.modal-x{background:var(--surface2);width:32px;height:32px;border-radius:8px;color:var(--txt2);font-size:16px;display:flex;align-items:center;justify-content:center}

/* ---------- Footer ---------- */
.footer{background:var(--navy2);border-top:1px solid var(--border);padding:54px 0 30px;margin-top:40px}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:34px}
.footer h4{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--txt3);margin-bottom:14px}
.footer a{display:block;color:var(--txt2);font-size:14px;padding:4px 0;transition:.2s}
.footer a:hover{color:var(--cyan)}
.footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:38px;padding-top:22px;border-top:1px solid var(--border);font-size:13px;color:var(--txt3)}

/* utilities */
.flex{display:flex}.aic{align-items:center}.jcb{justify-content:space-between}.jcc{justify-content:center}
.gap8{gap:8px}.gap12{gap:12px}.gap16{gap:16px}.gap24{gap:24px}.wrapf{flex-wrap:wrap}
.mt8{margin-top:8px}.mt16{margin-top:16px}.mt24{margin-top:24px}.mt40{margin-top:40px}
.mb8{margin-bottom:8px}.mb16{margin-bottom:16px}.mb24{margin-bottom:24px}.mb40{margin-bottom:40px}
.hide{display:none!important}

/* ---------- Responsive ---------- */
@media(max-width:960px){
  .g4{grid-template-columns:repeat(2,1fr)}
  .g3{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .nav-links{
    position:fixed;top:61px;inset-inline:0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--navy);border-bottom:1px solid var(--border);padding:8px;
    transform:translateY(-130%);transition:transform .35s var(--ease);max-height:80vh;overflow:auto
  }
  .nav-links.open{transform:none}
  .nav-links a{padding:13px 16px;border-radius:var(--rxs)}
  .hamburger{display:flex;align-items:center;justify-content:center}
  .btn-nav-cta{display:none}
  .g2,.g4{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .section{padding:54px 0}
  .hide-mobile{display:none!important}
  .wrap{padding:0 16px}
  .card{padding:18px}
  .btn{padding:12px 18px;font-size:14px}
  /* full-width primary CTAs feel better on phones */
  section .flex.wrapf > .btn{flex:1 1 auto;justify-content:center}
  /* chat fills the screen width minus margins */
  #chatWin{inset-inline:12px!important;width:auto!important;max-width:none!important;bottom:84px;height:70vh}
  #chatFab{bottom:18px;inset-inline-end:16px}
  /* calendly a touch shorter so the form below is reachable */
  #calendlyInline{height:600px}
  /* eyebrows/headings breathing room */
  .eyebrow{margin-bottom:12px}
}
@media(max-width:380px){
  .h-xl{font-size:28px}
  .nav-inner{gap:8px;padding:10px 12px}
  .icon-btn,.lang-btn{width:34px;height:34px}
}
@media print{
  /* Force the light palette so PDFs are clean & ink-friendly while keeping brand accents */
  :root{
    --navy:#ffffff;--navy2:#ffffff;--surface:#ffffff;--surface2:#f4f8fd;--surface3:#eef4fb;
    --txt:#0c1a2e;--txt2:#41597a;--txt3:#6e84a3;--border:#d6e2f1;--border2:#c2d4ea;
    --shadow:none;--shadow-cyan:none;
  }
  .nav,.footer,.bg-orbs,.no-print,#chatFab,#chatWin{display:none!important}
  body{background:#fff;color:#000;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .card,.scard,.kpi{box-shadow:none!important;break-inside:avoid}
  a{color:inherit;text-decoration:none}
  .glow-line{background:linear-gradient(90deg,transparent,rgba(56,198,244,.5),transparent)!important}
}