/* =========================================================
   TRIPPAT COMPANY PROFILE — Styles
   Built on the Trippat Design System tokens
   ========================================================= */

/* ---------- Fonts ---------- */
@font-face { font-family:'Nexa'; src:url('fonts/Nexa-Light.otf') format('opentype'); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'Nexa'; src:url('fonts/Nexa-Bold.otf')  format('opentype'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'JF Flat'; src:url('fonts/JF-Flat-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'JF Flat'; src:url('fonts/JF-Flat-Bold.ttf')    format('truetype'); font-weight:700; font-style:normal; font-display:swap; }

:root{
  --navy:#113c5a; --navy-600:#0e334e; --navy-700:#0b2a42; --navy-800:#082236; --navy-900:#05192a;
  --yellow:#f0ee8a; --yellow-deep:#e8e65f;
  --sky:#a1cee8; --teal:#4391a3; --teal-600:#357482; --teal-700:#2a5a65;
  --white:#ffffff;
  --bg:#ffffff; --bg-subtle:#f7fafc; --bg-muted:#f1f5f9;
  --fg1:#113c5a; --fg2:#475569; --fg3:#64748b;
  --border:#e2e8f0; --border-strong:#cbd5e1;
  --sky-50:#eef6fb; --sky-100:#e2f0f8;

  --shadow-sm:0 1px 2px rgba(17,60,90,.05);
  --shadow-md:0 4px 10px -2px rgba(17,60,90,.08),0 2px 4px -2px rgba(17,60,90,.06);
  --shadow-lg:0 12px 24px -6px rgba(17,60,90,.12),0 6px 10px -4px rgba(17,60,90,.08);
  --shadow-xl:0 24px 50px -12px rgba(17,60,90,.22);

  --r-md:10px; --r-lg:14px; --r-xl:20px; --r-2xl:28px; --r-pill:9999px;

  --font-sans:'Nexa','Helvetica Neue',Arial,sans-serif;
  --font-ar:'JF Flat','Tajawal','Noto Sans Arabic',sans-serif;

  --maxw:1200px;
  --ease:cubic-bezier(.2,0,.2,1);

  /* tweakable */
  --accent:var(--yellow);
  --band:var(--navy);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; font-family:var(--font-sans); font-weight:300;
  color:var(--fg1); background:var(--bg);
  font-size:17px; line-height:1.55; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
[dir="rtl"] body, body[dir="rtl"]{font-family:var(--font-ar); line-height:1.85; word-spacing:.08em;}
[dir="rtl"]{font-family:var(--font-ar);}

h1,h2,h3,h4{font-family:var(--font-sans); font-weight:700; color:var(--fg1); margin:0; letter-spacing:-.02em; line-height:1.08;}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] h4{font-family:var(--font-ar); letter-spacing:0; line-height:1.4;}
p{margin:0;}
a{color:inherit; text-decoration:none;}
img{display:block; max-width:100%;}
button{font-family:inherit; cursor:pointer; border:none; background:none;}
[dir="rtl"] button{font-family:var(--font-ar);}

/* ---------- Layout ---------- */
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px;}
.section{padding:var(--sec-pad,120px) 0;}
.section.tight{padding:88px 0;}
.band-navy{background:var(--band); color:#fff;}
.band-navy h1,.band-navy h2,.band-navy h3,.band-navy h4{color:#fff;}
.band-subtle{background:var(--bg-subtle);}
.band-sky{background:linear-gradient(180deg,var(--sky-50),var(--sky-100));}

/* ---------- Eyebrow ---------- */
.eyebrow{display:inline-flex; align-items:center; gap:10px; font-size:13px; font-weight:700;
  text-transform:uppercase; letter-spacing:.16em; color:var(--teal); margin-bottom:22px;}
.band-navy .eyebrow{color:var(--yellow);}
[dir="rtl"] .eyebrow{letter-spacing:0; font-size:15px;}
.eyebrow .ast{width:14px; height:14px; flex:none;}
.eyebrow .ast img{width:100%; height:100%;}

/* ---------- Headlines / lead ---------- */
.display{font-size:clamp(40px,6.2vw,76px); line-height:1.02; letter-spacing:-.03em; font-weight:700;}
[dir="rtl"] .display{line-height:1.25; letter-spacing:0;}
.h-xl{font-size:clamp(32px,4.4vw,52px); line-height:1.06;}
.h-lg{font-size:clamp(28px,3.4vw,40px);}
.h-md{font-size:clamp(22px,2.4vw,28px);}
.lead{font-size:clamp(18px,1.5vw,21px); line-height:1.6; color:var(--fg2); font-weight:300;}
.band-navy .lead{color:rgba(255,255,255,.82);}
.section-head{max-width:760px;}
.section-head .lead{margin-top:20px;}

/* ---------- Buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 28px; border-radius:var(--r-pill); font-weight:700; font-size:16px;
  transition:all .2s var(--ease); white-space:nowrap; letter-spacing:.01em;}
.btn svg{width:18px; height:18px;}
.btn-primary{background:var(--accent); color:var(--navy);}
.btn-primary:hover{background:var(--yellow-deep); transform:translateY(-2px); box-shadow:var(--shadow-lg);}
.btn-navy{background:var(--navy); color:#fff;}
.btn-navy:hover{background:var(--navy-600); transform:translateY(-2px); box-shadow:var(--shadow-lg);}
.btn-ghost{background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.35);}
.btn-ghost:hover{border-color:#fff; background:rgba(255,255,255,.08);}
.btn-outline{background:transparent; color:var(--navy); border:1.5px solid var(--border-strong);}
.btn-outline:hover{border-color:var(--navy); background:var(--bg-muted);}
.btn-lg{padding:18px 34px; font-size:17px;}

/* ---------- NAV ---------- */
.nav{position:fixed; top:0; left:0; right:0; z-index:100; transition:all .35s var(--ease);}
.nav-inner{max-width:var(--maxw); margin:0 auto; padding:18px 32px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;}
.nav-logo{height:34px; transition:opacity .3s var(--ease);}
.nav-logo img{height:100%; width:auto;}
.nav-logo .logo-light{display:block;}
.nav-logo .logo-dark{display:none;}
.nav-links{display:flex; gap:30px; align-items:center;}
.nav-links a{font-size:15px; font-weight:300; color:rgba(255,255,255,.9); transition:color .2s; letter-spacing:.01em;}
.nav-links a:hover{color:var(--yellow);}
.nav-right{display:flex; align-items:center; gap:14px;}
.lang-toggle{display:flex; align-items:center; gap:2px; border:1.5px solid rgba(255,255,255,.4);
  border-radius:var(--r-pill); padding:4px; font-size:13px; font-weight:700;}
.lang-toggle button{padding:5px 12px; border-radius:var(--r-pill); color:rgba(255,255,255,.7); transition:all .2s; line-height:1;}
.lang-toggle button.active{background:var(--yellow); color:var(--navy);}
.nav .btn{padding:11px 22px; font-size:15px;}
.nav-dl{font-size:14px; color:rgba(255,255,255,.78); display:flex; align-items:center; gap:7px;}
.nav-dl:hover{color:var(--yellow);}
.nav-dl svg{width:15px;height:15px;}
.nav-burger{display:none; color:#fff;}
.nav-burger svg{width:26px;height:26px;}

/* scrolled state */
.nav.scrolled{background:rgba(255,255,255,.92); backdrop-filter:blur(14px); box-shadow:var(--shadow-sm);}
.nav.scrolled .nav-logo .logo-light{display:none;}
.nav.scrolled .nav-logo .logo-dark{display:block;}
.nav.scrolled .nav-links a{color:var(--fg2);}
.nav.scrolled .nav-links a:hover{color:var(--navy);}
.nav.scrolled .lang-toggle{border-color:var(--border-strong);}
.nav.scrolled .lang-toggle button{color:var(--fg3);}
.nav.scrolled .lang-toggle button.active{background:var(--navy); color:#fff;}
.nav.scrolled .nav-dl{color:var(--fg3);}
.nav.scrolled .nav-dl:hover{color:var(--navy);}
.nav.scrolled .nav-burger{color:var(--navy);}

/* ---------- HERO ---------- */
.hero{position:relative; background:var(--navy); color:#fff; overflow:hidden;
  padding:180px 0 110px;}
.hero-ast{position:absolute; pointer-events:none; opacity:.06;}
.hero-ast.a1{width:520px; top:-120px; right:-90px; transform:rotate(8deg);}
.hero-ast.a2{width:240px; bottom:-60px; left:-50px; transform:rotate(-12deg);}
.hero-grid{position:relative; display:grid; grid-template-columns:1.15fr .85fr; gap:64px; align-items:center;}
.hero-eyebrow{color:var(--yellow); font-weight:700; letter-spacing:.16em; text-transform:uppercase; font-size:13px;
  display:inline-flex; gap:10px; align-items:center; margin-bottom:26px;}
[dir="rtl"] .hero-eyebrow{letter-spacing:0; font-size:15px;}
.hero h1,.hero .display{margin-bottom:26px; color:#fff;}
.hero h1 .accent{color:var(--yellow);}
.hero-sub{font-size:clamp(18px,1.6vw,22px); line-height:1.6; color:rgba(255,255,255,.85); font-weight:300; max-width:560px; margin-bottom:38px;}
.hero-ctas{display:flex; gap:16px; flex-wrap:wrap; align-items:center;}
.hero-trust{margin-top:46px; display:flex; gap:30px; flex-wrap:wrap; align-items:center;
  padding-top:30px; border-top:1px solid rgba(255,255,255,.14);}
.hero-trust .t-item{display:flex; flex-direction:column; gap:3px;}
.hero-trust .t-num{font-weight:700; font-size:24px; color:var(--yellow);}
.hero-trust .t-lbl{font-size:13px; color:rgba(255,255,255,.6);}

/* hero chat card */
.chat-card{background:#fff; border-radius:var(--r-2xl); box-shadow:var(--shadow-xl); padding:22px; color:var(--fg1);
  position:relative;}
.chat-head{display:flex; align-items:center; gap:11px; padding-bottom:16px; border-bottom:1px solid var(--border); margin-bottom:16px;}
.chat-ava{width:40px; height:40px; border-radius:var(--r-pill); background:var(--navy); display:grid; place-items:center; flex:none;}
.chat-ava img{width:22px; height:22px;}
.chat-name{font-weight:700; font-size:15px; line-height:1.2;}
.chat-status{font-size:12px; color:var(--teal); display:flex; align-items:center; gap:5px;}
.chat-status::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--teal);}
.chat-body{display:flex; flex-direction:column; gap:12px; min-height:210px;}
.bubble{max-width:86%; padding:12px 15px; border-radius:16px; font-size:14.5px; line-height:1.45; font-weight:300;}
html.anim .bubble{opacity:0; transform:translateY(8px); animation:bubbleIn .4s var(--ease) forwards;}
.bubble.user{align-self:flex-end; background:var(--navy); color:#fff; border-bottom-right-radius:5px;}
.bubble.bot{align-self:flex-start; background:var(--bg-muted); color:var(--fg1); border-bottom-left-radius:5px;}
[dir="rtl"] .bubble.user{align-self:flex-start; border-bottom-right-radius:16px; border-bottom-left-radius:5px;}
[dir="rtl"] .bubble.bot{align-self:flex-end; border-bottom-left-radius:16px; border-bottom-right-radius:5px;}
@keyframes bubbleIn{to{opacity:1; transform:translateY(0);}}
.chat-pkg{align-self:flex-start; background:#fff; border:1px solid var(--border); border-radius:14px; padding:0; overflow:hidden; width:86%; box-shadow:var(--shadow-sm);}
.chat-pkg img{width:100%; height:84px; object-fit:cover;}
.pk-banner{height:84px; position:relative; display:grid; place-items:center; overflow:hidden;}
.pk-banner .pk-pin{color:rgba(255,255,255,.95); position:relative; z-index:2;}
.pk-banner .pk-pin svg{width:30px; height:30px;}
.pk-banner .pk-star{position:absolute; width:56px; right:-10px; bottom:-14px; opacity:.5;}
[dir="rtl"] .pk-banner .pk-star{right:auto; left:-10px;}
.phone-chat .pk-banner{height:62px;}
.chat-pkg .pk{padding:11px 13px;}
.chat-pkg .pk-t{font-weight:700; font-size:14px;}
.chat-pkg .pk-m{font-size:12px; color:var(--fg3); margin-top:2px;}
.chat-pkg .pk-p{font-weight:700; font-size:14px; color:var(--teal); margin-top:6px;}

/* ---------- Cards / grids ---------- */
.grid{display:grid; gap:24px;}
.g2{grid-template-columns:repeat(2,1fr);}
.g3{grid-template-columns:repeat(3,1fr);}
.g4{grid-template-columns:repeat(4,1fr);}
.g5{grid-template-columns:repeat(5,1fr);}

.card{background:#fff; border:1px solid var(--border); border-radius:var(--r-xl); padding:32px;
  box-shadow:var(--shadow-sm); transition:transform .25s var(--ease),box-shadow .25s var(--ease);}
.card.lift:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg);}
.card-ico{width:52px; height:52px; border-radius:var(--r-md); background:var(--sky-50); color:var(--teal);
  display:grid; place-items:center; margin-bottom:20px;}
.card-ico svg{width:26px; height:26px;}
.card h3{font-size:21px; margin-bottom:10px;}
.card p{color:var(--fg2); font-size:16px;}

/* ---------- Contrast (old way vs trippat) ---------- */
.vs{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:8px;}
.vs-col{border-radius:var(--r-xl); padding:32px;}
.vs-old{background:var(--bg-muted); border:1px solid var(--border);}
.vs-new{background:var(--navy); color:#fff;}
.vs-col .vs-lbl{font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.12em; margin-bottom:20px; display:flex; align-items:center; gap:9px;}
[dir="rtl"] .vs-col .vs-lbl{letter-spacing:0;}
.vs-old .vs-lbl{color:var(--fg3);}
.vs-new .vs-lbl{color:var(--yellow);}
.vs-col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px;}
.vs-col li{display:flex; gap:12px; align-items:flex-start; font-size:16px;}
.vs-col li svg{width:19px; height:19px; flex:none; margin-top:2px;}
.vs-old li{color:var(--fg2);} .vs-old li svg{color:var(--fg3);}
.vs-new li{color:rgba(255,255,255,.9);} .vs-new li svg{color:var(--yellow);}

/* ---------- Stat band ---------- */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border);
  border:1px solid var(--border); border-radius:var(--r-xl); overflow:hidden; margin-top:56px;}
.stat{background:#fff; padding:34px 28px; text-align:center;}
.stat .n{font-size:clamp(30px,3.4vw,42px); font-weight:700; color:var(--navy); line-height:1; letter-spacing:-.02em;}
.stat .n .star{display:inline-block; width:20px; height:20px; vertical-align:middle; margin-left:2px;}
.stat .l{font-size:14px; color:var(--fg3); margin-top:10px;}
.band-navy .stats{background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.18);}
.band-navy .stat{background:transparent;}
.band-navy .stat .n{color:var(--yellow);}
.band-navy .stat .l{color:rgba(255,255,255,.7);}

/* ---------- Opportunity ---------- */
.opp-grid{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;}
.opp-list{display:flex; flex-direction:column; gap:0;}
.opp-item{padding:26px 0; border-bottom:1px solid var(--border); display:flex; gap:20px; align-items:flex-start;}
.opp-item:first-child{padding-top:0;}
.opp-item:last-child{border-bottom:none;}
.opp-big{font-size:clamp(34px,4vw,46px); font-weight:700; color:var(--navy); line-height:1; flex:none; min-width:118px; letter-spacing:-.02em;}
.opp-tx{font-size:15.5px; color:var(--fg2);}
.opp-tx strong{color:var(--navy); font-weight:700;}
.opp-visual{border-radius:var(--r-2xl); overflow:hidden; box-shadow:var(--shadow-lg); position:relative;}
.opp-visual img{width:100%; height:100%; object-fit:cover; aspect-ratio:4/3;}

/* ---------- Phone / demo ---------- */
.demo-grid{display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center;}
.phone{width:330px; max-width:100%; margin:0 auto; background:#0b2a42; border-radius:46px; padding:13px; box-shadow:var(--shadow-xl); position:relative;}
.phone-screen{background:var(--bg-subtle); border-radius:34px; overflow:hidden; aspect-ratio:9/19; position:relative; display:flex; flex-direction:column;}
.phone-notch{position:absolute; top:10px; left:50%; transform:translateX(-50%); width:110px; height:26px; background:#0b2a42; border-radius:14px; z-index:5;}
.phone-top{background:var(--navy); padding:42px 18px 16px; color:#fff; display:flex; align-items:center; gap:10px;}
.phone-top .chat-ava{width:34px;height:34px;}
.phone-top .chat-ava img{width:18px;height:18px;}
.phone-top .chat-name{font-size:14px;color:#fff;}
.phone-top .chat-status{font-size:11px;}
.phone-top .chat-status::before{background:var(--yellow);}
.phone-chat{flex:1; padding:18px 14px; display:flex; flex-direction:column; gap:10px; overflow:hidden;}
.phone-chat .bubble{font-size:13px; max-width:88%;}
.phone-chat .chat-pkg{width:90%;}
.phone-chat .chat-pkg img{height:70px;}
.phone-input{padding:12px 14px calc(12px + env(safe-area-inset-bottom)); border-top:1px solid var(--border); display:flex; gap:8px; align-items:center; background:#fff;}
.phone-input .pi{flex:1; background:var(--bg-muted); border-radius:var(--r-pill); padding:10px 16px; font-size:12.5px; color:var(--fg3);}
.phone-input .ps{width:36px; height:36px; border-radius:50%; background:var(--yellow); display:grid; place-items:center; flex:none;}
.phone-input .ps svg{width:17px;height:17px;color:var(--navy);}
.demo-points{display:flex; flex-direction:column; gap:22px; margin-top:30px;}
.demo-point{display:flex; gap:16px; align-items:flex-start;}
.demo-point .dp-ico{width:44px;height:44px;border-radius:var(--r-md);background:var(--navy);color:var(--yellow);display:grid;place-items:center;flex:none;}
.demo-point .dp-ico svg{width:21px;height:21px;}
.demo-point h4{font-size:17px;margin-bottom:3px;}
.demo-point p{font-size:15px;color:var(--fg2);}

/* ---------- Services ---------- */
.svc-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:18px;}
.svc{background:#fff; border:1px solid var(--border); border-radius:var(--r-xl); padding:28px 22px; transition:all .25s var(--ease); position:relative; overflow:hidden;}
.svc:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--sky);}
.svc-ico{width:50px;height:50px;border-radius:var(--r-md);background:var(--navy);color:var(--yellow);display:grid;place-items:center;margin-bottom:18px;}
.svc-ico svg{width:24px;height:24px;}
.svc h3{font-size:18px;margin-bottom:8px;}
.svc p{font-size:14.5px;color:var(--fg2);}
.svc .badge{position:absolute; top:16px; right:16px; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--teal); background:var(--sky-50); padding:4px 9px; border-radius:var(--r-pill);}
[dir="rtl"] .svc .badge{right:auto; left:16px; letter-spacing:0;}

/* ---------- AI team ---------- */
.team-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:24px;}
.agent{background:#fff; border:1px solid var(--border); border-radius:var(--r-2xl); padding:36px; display:flex; gap:24px; align-items:flex-start; transition:all .25s var(--ease);}
.agent:hover{box-shadow:var(--shadow-lg); transform:translateY(-3px);}
.agent-ava{width:84px;height:84px;border-radius:24px;display:grid;place-items:center;flex:none;position:relative;}
.agent-ava .star-bg{position:absolute; width:46px; height:46px; opacity:.9;}
.agent-ava .ini{position:relative; font-size:26px; font-weight:700; z-index:2;}
.agent-ava.misfer{background:var(--navy);} .agent-ava.misfer .ini{color:#fff;}
.agent-ava.nora{background:var(--sky-50); border:1px solid var(--sky);} .agent-ava.nora .ini{color:var(--navy);}
.agent-role{font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--teal); margin-bottom:6px;}
[dir="rtl"] .agent-role{letter-spacing:0;}
.agent h3{font-size:24px; margin-bottom:9px;}
.agent p{color:var(--fg2); font-size:16px;}

/* ---------- For business ---------- */
.biz-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:64px; align-items:center;}
.biz-bullets{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:32px;}
.biz-bullet{display:flex; gap:12px; align-items:flex-start; font-size:15.5px; color:rgba(255,255,255,.9);}
.biz-bullet svg{width:20px;height:20px;color:var(--yellow);flex:none;margin-top:1px;}
.biz-card{background:#fff; border-radius:var(--r-2xl); padding:8px; box-shadow:var(--shadow-xl);}
.teams-bar{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--border);}
.teams-bar .tlogo{width:26px;height:26px;border-radius:6px;background:linear-gradient(135deg,#6264cf,#4b4ca8);display:grid;place-items:center;color:#fff;font-weight:700;font-size:13px;flex:none;}
.teams-bar .tt{font-weight:700;font-size:14px;color:var(--fg1);}
.teams-bar .tt small{display:block;font-weight:300;font-size:12px;color:var(--fg3);}
.teams-body{padding:18px; display:flex; flex-direction:column; gap:12px;}
.teams-msg{display:flex; gap:11px; align-items:flex-start;}
.teams-msg .tava{width:32px;height:32px;border-radius:50%;background:var(--navy);display:grid;place-items:center;flex:none;}
.teams-msg .tava img{width:16px;height:16px;}
.teams-msg .tbod{background:var(--bg-muted); border-radius:12px; padding:10px 13px; font-size:13.5px; color:var(--fg1); font-weight:300;}
.teams-msg .tbod .who{font-weight:700; font-size:12px; color:var(--teal); margin-bottom:3px;}
.policy-chip{display:inline-flex;align-items:center;gap:6px;background:#ecfdf5;color:#0f7a52;font-size:12px;font-weight:700;padding:5px 11px;border-radius:var(--r-pill);margin-top:2px;}
.policy-chip svg{width:14px;height:14px;}
.approve-row{display:flex;gap:8px;margin-top:4px;}
.approve-row .ab{font-size:12.5px;font-weight:700;padding:8px 16px;border-radius:var(--r-pill);}
.approve-row .ab.y{background:var(--navy);color:#fff;}
.approve-row .ab.n{background:var(--bg-muted);color:var(--fg2);}

/* ---------- Steps ---------- */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; counter-reset:step;}
.step{position:relative; padding-top:18px;}
.step-n{font-size:15px; font-weight:700; color:var(--navy); width:44px; height:44px; border-radius:50%;
  border:2px solid var(--yellow); display:grid; place-items:center; margin-bottom:20px; background:#fff;}
.step-line{position:absolute; top:39px; left:44px; right:-24px; height:2px; background:repeating-linear-gradient(90deg,var(--border) 0 6px,transparent 6px 12px);}
[dir="rtl"] .step-line{left:auto; right:44px; left:-24px;}
.step:last-child .step-line{display:none;}
.step h4{font-size:18px; margin-bottom:8px;}
.step p{font-size:15px; color:var(--fg2);}

/* ---------- Who we serve ---------- */
.serve{position:relative; border-radius:var(--r-2xl); overflow:hidden; min-height:300px; display:flex; flex-direction:column; justify-content:flex-end; padding:34px; transition:transform .25s var(--ease),box-shadow .25s var(--ease);}
.serve:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg);}
.serve-ico{width:60px; height:60px; border-radius:16px; display:grid; place-items:center; margin-bottom:auto;}
.serve-ico svg{width:30px; height:30px;}
.serve h3{font-size:24px; margin-bottom:9px; margin-top:24px;}
.serve p{font-size:16px;}
.serve-navy{background:var(--navy); color:#fff;}
.serve-navy h3{color:#fff;} .serve-navy p{color:rgba(255,255,255,.82);}
.serve-navy .serve-ico{background:rgba(240,238,138,.16); color:var(--yellow);}
.serve-teal{background:var(--teal); color:#fff;}
.serve-teal h3{color:#fff;} .serve-teal p{color:rgba(255,255,255,.85);}
.serve-teal .serve-ico{background:rgba(255,255,255,.18); color:#fff;}
.serve-sky{background:var(--sky-100); color:var(--navy);}
.serve-sky h3{color:var(--navy);} .serve-sky p{color:var(--fg2);}
.serve-sky .serve-ico{background:#fff; color:var(--teal);}
.serve .tag{position:absolute; top:26px; right:26px; z-index:2; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; background:var(--yellow); color:var(--navy); padding:6px 13px; border-radius:var(--r-pill);}
[dir="rtl"] .serve .tag{right:auto; left:26px; letter-spacing:0;}

/* ---------- Tech partners ---------- */
.tech-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:18px; margin-top:48px;}
.tech{background:#fff; border:1px solid var(--border); border-radius:var(--r-lg); height:96px; display:grid; place-items:center; transition:all .25s var(--ease);}
.tech:hover{box-shadow:var(--shadow-md); transform:translateY(-3px);}
.tech .tname{font-weight:700; font-size:18px; color:var(--navy); letter-spacing:-.01em;}
.tech .tname small{display:block; font-weight:300; font-size:11px; color:var(--fg3); text-align:center; letter-spacing:0; margin-top:3px;}

/* ---------- Company ---------- */
.company-grid{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;}
.vision-badge{display:inline-flex; align-items:center; gap:12px; background:var(--navy); color:#fff; padding:16px 24px; border-radius:var(--r-xl); margin-top:28px;}
.vision-badge .vb-n{font-size:30px; font-weight:700; color:var(--yellow); line-height:1;}
.vision-badge .vb-t{font-size:14px; line-height:1.35; color:rgba(255,255,255,.85);}
.company-stat{border-left:3px solid var(--yellow); padding-left:22px; margin-bottom:26px;}
[dir="rtl"] .company-stat{border-left:none; border-right:3px solid var(--yellow); padding-left:0; padding-right:22px;}
.company-stat .cs-n{font-size:38px; font-weight:700; color:var(--navy); line-height:1; letter-spacing:-.02em;}
.company-stat .cs-l{font-size:15px; color:var(--fg2); margin-top:6px;}

/* ---------- Final CTA ---------- */
.final{position:relative; overflow:hidden; text-align:center; padding:130px 0;}
.final-ast{position:absolute; opacity:.07; pointer-events:none;}
.final-ast.f1{width:300px; top:-70px; left:-60px; transform:rotate(-10deg);}
.final-ast.f2{width:380px; bottom:-110px; right:-80px; transform:rotate(14deg);}
.final h2{margin-bottom:22px;}
.final .lead{max-width:560px; margin:0 auto 40px;}
.final-ctas{display:flex; gap:16px; justify-content:center; flex-wrap:wrap;}

/* ---------- Footer ---------- */
.footer{background:var(--navy-900); color:rgba(255,255,255,.7); padding:72px 0 32px;}
.footer-top{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.1fr; gap:40px; padding-bottom:48px; border-bottom:1px solid rgba(255,255,255,.12);}
.footer-logo{height:34px; margin-bottom:20px;}
.footer-tag{font-size:15px; color:rgba(255,255,255,.6); max-width:260px;}
.footer h5{color:#fff; font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; margin:0 0 18px;}
[dir="rtl"] .footer h5{letter-spacing:0;}
.footer-col a,.footer-col p{display:block; font-size:14.5px; color:rgba(255,255,255,.65); margin-bottom:11px; transition:color .2s;}
.footer-col a:hover{color:var(--yellow);}
.footer-social{display:flex; gap:12px; margin-top:6px;}
.footer-social a{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.2);display:grid;place-items:center;color:rgba(255,255,255,.7);margin:0;}
.footer-social a:hover{border-color:var(--yellow); color:var(--yellow);}
.footer-social svg{width:17px;height:17px;}
.qr{display:flex; gap:14px; align-items:center;}
.qr-box{width:74px;height:74px;background:#fff;border-radius:12px;padding:7px;flex:none;}
.qr-box svg{width:100%;height:100%;}
.qr-t{font-size:13.5px;color:rgba(255,255,255,.7);}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:26px; gap:20px; flex-wrap:wrap; font-size:13.5px; color:rgba(255,255,255,.5);}
.footer-bottom a{color:rgba(255,255,255,.65);}
.footer-bottom a:hover{color:var(--yellow);}

/* ---------- Reveal animation (opt-in via html.anim once clock is verified) ---------- */
.reveal{opacity:1; transform:none;}
html.anim .reveal{opacity:0; transform:translateY(26px);}
html.anim .reveal.in{animation:revealIn .7s var(--ease) forwards;}
@keyframes revealIn{from{opacity:0; transform:translateY(26px);} to{opacity:1; transform:none;}}
html.anim .reveal.d1{animation-delay:.08s;} html.anim .reveal.d2{animation-delay:.16s;} html.anim .reveal.d3{animation-delay:.24s;} html.anim .reveal.d4{animation-delay:.32s;}

/* Reduced-motion: never hide content */
@media (prefers-reduced-motion: reduce){
  html.anim .reveal,html.anim .reveal.in{opacity:1 !important; transform:none !important; animation:none !important;}
  html{scroll-behavior:auto;}
}

/* ---------- Tweak state hooks ---------- */
html.compact{--sec-pad:84px;}
html.corners-sharp{--r-md:6px; --r-lg:8px; --r-xl:10px; --r-2xl:12px;}
html.no-herochat .hero-chat-wrap{display:none;}
html.no-herochat .hero-grid{grid-template-columns:1fr; max-width:820px;}

/* ---------- Tweaks panel ---------- */
.tweak-host{position:fixed; bottom:22px; right:22px; z-index:200; width:300px; max-width:calc(100vw - 32px);
  background:#fff; border:1px solid var(--border); border-radius:18px; box-shadow:var(--shadow-xl);
  font-family:var(--font-sans); color:var(--fg1); display:none; overflow:hidden;}
.tweak-host.open{display:block;}
[dir="rtl"] .tweak-host{right:auto; left:22px;}
.tweak-hd{display:flex; align-items:center; justify-content:space-between; padding:15px 18px; border-bottom:1px solid var(--border); background:var(--navy);}
.tweak-hd .th-t{display:flex; align-items:center; gap:9px; color:#fff; font-weight:700; font-size:15px;}
.tweak-hd .th-t img{width:15px; height:15px;}
.tweak-hd .th-x{color:rgba(255,255,255,.7); width:26px; height:26px; display:grid; place-items:center; border-radius:7px;}
.tweak-hd .th-x:hover{background:rgba(255,255,255,.12); color:#fff;}
.tweak-hd .th-x svg{width:17px; height:17px;}
.tweak-body{padding:16px 18px 20px; display:flex; flex-direction:column; gap:18px;}
.tweak-row .tr-l{font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--fg3); margin-bottom:9px;}
.seg{display:flex; gap:4px; background:var(--bg-muted); border-radius:var(--r-pill); padding:4px;}
.seg button{flex:1; padding:8px 6px; border-radius:var(--r-pill); font-size:13px; font-weight:700; color:var(--fg2); transition:all .15s var(--ease); white-space:nowrap;}
.seg button.on{background:var(--navy); color:#fff;}
@media print{.tweak-host{display:none !important;}}
.mobile-menu{position:fixed; inset:0; z-index:120; background:var(--navy); display:none; flex-direction:column; padding:90px 32px 32px;}
.mobile-menu.open{display:flex;}
.mobile-menu a{color:#fff; font-size:22px; padding:16px 0; border-bottom:1px solid rgba(255,255,255,.1);}
.mobile-menu .mm-close{position:absolute; top:24px; right:24px; color:#fff;}
[dir="rtl"] .mobile-menu .mm-close{right:auto; left:24px;}
.mobile-menu .mm-close svg{width:30px;height:30px;}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .section{padding:96px 0;}
  .hero-grid,.opp-grid,.demo-grid,.biz-grid,.company-grid{grid-template-columns:1fr; gap:48px;}
  .hero-chat-wrap{max-width:420px;}
  .svc-grid{grid-template-columns:repeat(3,1fr);}
  .g4,.steps,.stats{grid-template-columns:repeat(2,1fr);}
  .tech-grid{grid-template-columns:repeat(3,1fr);}
  .team-grid{grid-template-columns:1fr;}
  .step-line{display:none;}
  .footer-top{grid-template-columns:1fr 1fr;}
}
@media (max-width:768px){
  .nav-links,.nav-dl{display:none;}
  .nav-burger{display:block;}
  .wrap{padding:0 22px;}
  .section{padding:72px 0;}
  .hero{padding:130px 0 80px;}
  .g3,.g2,.vs,.svc-grid,.g4,.steps,.tech-grid{grid-template-columns:1fr;}
  .stats{grid-template-columns:repeat(2,1fr);}
  .biz-bullets{grid-template-columns:1fr;}
  .hero-ctas .btn,.final-ctas .btn{flex:1; min-width:0;}
  .footer-top{grid-template-columns:1fr;}
  .nav .btn-primary{display:none;}
}
@media (max-width:480px){
  .stats{grid-template-columns:1fr;}
  .display{font-size:38px;}
}

/* ---------- Print / PDF ---------- */
@media print{
  .nav,.mobile-menu,.tweak-host{display:none !important;}
  .section{padding:48px 0; break-inside:avoid;}
  .hero{padding:60px 0;}
  body{font-size:13px;}
  .reveal{opacity:1 !important; transform:none !important;}
  .band-navy,.hero,.footer{-webkit-print-color-adjust:exact; print-color-adjust:exact;}
}