:root{
  --ink:#0b315f;--ink2:#173d68;--gold:#d69a2d;--gold2:#f0b443;--blue:#0d6fb2;
  --line:#dfe8ef;--muted:#687d91;--bg:#f8fbfd;--white:#fff;--soft:#f1f7fb;
  --shadow:0 18px 55px rgba(31,70,107,.11);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.carna-v5{margin:0;font-family:Tajawal,Arial,sans-serif;background:#fff;color:var(--ink);overflow-x:hidden}
a{text-decoration:none;color:inherit}
button{font:inherit}
.v5-header{height:96px;padding:0 4.2vw;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:32px;background:rgba(255,255,255,.96);border-bottom:1px solid #e7eef3;position:sticky;top:0;z-index:100;backdrop-filter:blur(18px);box-shadow:0 3px 18px rgba(15,61,99,.04)}
.v5-brand{display:flex;align-items:center;gap:13px;min-width:270px}
.shield-logo{width:48px;height:56px;position:relative;display:block}
.shield-logo:before{content:"";position:absolute;inset:2px 5px 3px;background:linear-gradient(155deg,#f1b447,#c9851c);clip-path:polygon(50% 0,90% 15%,82% 68%,50% 100%,18% 68%,10% 15%);box-shadow:0 9px 20px rgba(196,133,31,.2)}
.shield-logo:after{content:"";position:absolute;inset:12px 15px 16px;background:white;clip-path:polygon(50% 0,100% 18%,71% 48%,100% 66%,50% 100%,0 66%,29% 48%,0 18%)}
.brand-copy b{display:block;font-size:31px;letter-spacing:2.5px;color:#0a315f;line-height:.9}
.brand-copy small{display:block;font-size:9px;font-weight:700;color:#6b7d8d;margin-top:7px;white-space:nowrap}
.v5-nav{display:flex;align-items:center;justify-content:center;gap:34px;font-size:14px;font-weight:700;color:#173c64}
.v5-nav a{position:relative;padding:14px 0}
.v5-nav a:after{content:"";position:absolute;left:50%;right:50%;bottom:6px;height:2px;background:var(--gold);transition:.25s}
.v5-nav a:hover:after{left:0;right:0}
.v5-actions{display:flex;align-items:center;gap:12px}
.lang-switch{width:48px;height:44px;border:1px solid #dce5ec;background:#f8fafc;border-radius:11px;display:grid;place-items:center;font-weight:800;font-size:13px}
.login-btn{height:48px;padding:0 20px;display:flex;align-items:center;gap:10px;border-radius:11px;background:linear-gradient(135deg,#0a3d73,#0874b7);color:#fff;font-size:14px;font-weight:800;box-shadow:0 10px 22px rgba(9,91,145,.16)}
.lock-icon{font-size:16px;color:#efb33f}
.menu-toggle{display:none;width:46px;height:44px;border:0;background:transparent;color:#0a315f;font-size:26px}

.v5-hero{position:relative;min-height:925px;background:linear-gradient(180deg,#fff 0%,#fbfdff 54%,#f6fafc 100%);display:grid;grid-template-columns:47% 53%;grid-template-rows:auto 275px;padding:52px 4.5vw 0;overflow:hidden}
.hero-tech-bg{position:absolute;inset:0;background:url('../img/carna-tech-bg-v5.png') center bottom/cover no-repeat;opacity:.10;pointer-events:none}
.hero-scene{position:relative;z-index:2;grid-column:1;grid-row:1;min-height:560px;display:flex;align-items:flex-start}
.scene-visual{position:absolute;left:-4.5vw;top:0;width:calc(100% + 4.5vw);height:555px;overflow:hidden;border-radius:0 0 95px 0;mask-image:linear-gradient(to right,#000 78%,transparent 100%);-webkit-mask-image:linear-gradient(to right,#000 78%,transparent 100%)}
html[dir=rtl] .scene-visual{border-radius:0 0 0 95px}
.scene-visual img{width:100%;height:100%;object-fit:cover;object-position:center 52%;filter:saturate(.92) brightness(1.08);transform:scale(1.03);animation:sceneBreath 12s ease-in-out infinite alternate}
.scene-wash{position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.04) 0%,rgba(255,255,255,.0) 58%,#fff 98%),linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03) 58%,rgba(255,255,255,.44))}
html[dir=rtl] .scene-wash{background:linear-gradient(270deg,rgba(255,255,255,.04) 0%,rgba(255,255,255,.0) 58%,#fff 98%),linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03) 58%,rgba(255,255,255,.44))}
.radar{position:absolute;border:1px solid rgba(255,255,255,.66);border-radius:50%;left:48%;top:34%;transform:translate(-50%,-50%);box-shadow:0 0 0 26px rgba(255,255,255,.04),0 0 0 58px rgba(255,255,255,.035)}
.radar:before,.radar:after{content:"";position:absolute;border:1px dashed rgba(255,255,255,.62);border-radius:50%;inset:18%}
.radar:after{inset:37%;border-style:solid}
.radar-1{width:225px;height:225px;animation:radarRotate 18s linear infinite}
.radar-2{width:120px;height:120px;animation:radarRotate 12s linear reverse}
.target-pin{position:absolute;left:48%;top:34%;width:24px;height:24px;border-radius:50%;border:3px solid #f2b444;background:rgba(255,255,255,.9);transform:translate(-50%,-50%);box-shadow:0 0 0 8px rgba(241,178,61,.18)}
.target-pin span{position:absolute;width:5px;height:5px;border-radius:50%;background:#e89f23;left:50%;top:50%;transform:translate(-50%,-50%)}
.vehicle-frame{position:absolute;left:17%;bottom:20px;width:290px;height:190px}
.vehicle-frame i{position:absolute;width:52px;height:52px;border-color:rgba(255,255,255,.94);border-style:solid;filter:drop-shadow(0 3px 8px rgba(2,50,90,.18))}
.vehicle-frame .vf1{left:0;top:0;border-width:3px 0 0 3px}.vehicle-frame .vf2{right:0;top:0;border-width:3px 3px 0 0}.vehicle-frame .vf3{left:0;bottom:0;border-width:0 0 3px 3px}.vehicle-frame .vf4{right:0;bottom:0;border-width:0 3px 3px 0}
.vehicle-tag{position:absolute;left:39%;bottom:118px;background:rgba(255,255,255,.92);border:1px solid rgba(255,255,255,.8);border-radius:13px;padding:9px 12px;box-shadow:0 12px 30px rgba(31,65,96,.12);backdrop-filter:blur(12px)}
.vehicle-tag b,.vehicle-tag small{display:block}.vehicle-tag b{font-size:12px}.vehicle-tag small{font-size:10px;color:#c98b21;margin-top:2px}

.hero-copy{position:relative;z-index:3;grid-column:2;grid-row:1;padding:12px 2vw 0 4.5vw;align-self:start}
html[dir=rtl] .hero-copy{padding:12px 4.5vw 0 2vw}
.national-chip{display:inline-flex;align-items:center;gap:9px;padding:9px 14px;border-radius:999px;background:#f6f9fb;border:1px solid #dfe7ee;color:#0e3f70;font-size:12px;font-weight:800}
.national-chip i{width:22px;height:22px;border-radius:50%;border:1px solid #a9c4d7;display:grid;place-items:center;font-style:normal;color:#1b78b2}
.hero-copy h1{font-size:clamp(44px,4.1vw,66px);line-height:1.23;margin:20px 0 14px;letter-spacing:-1.8px;color:#0a315f;font-weight:900}
.hero-copy h1 em{font-style:normal;color:var(--gold)}
.hero-copy p{max-width:720px;font-size:15px;line-height:1.95;color:#566f85;margin:0 0 22px;font-weight:500}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:24px}
.primary-cta,.secondary-cta{min-height:50px;padding:0 22px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;gap:13px;font-size:14px;font-weight:800}
.primary-cta{background:linear-gradient(135deg,#0a3d73,#0a78bc);color:#fff;box-shadow:0 13px 30px rgba(9,92,148,.16)}
.primary-cta span{font-size:20px}.secondary-cta{border:1px solid #cfdce6;background:rgba(255,255,255,.9);color:#153b65}.secondary-cta span{font-size:18px}
.benefit-row{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;max-width:800px}
.benefit-row article{height:66px;padding:10px 12px;display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.92);border:1px solid #e2e9ef;border-radius:10px;box-shadow:0 8px 25px rgba(28,70,105,.055)}
.benefit-icon{width:30px;height:30px;flex:0 0 30px;border-radius:50%;display:grid;place-items:center;background:#fff9ed;color:#d79520;border:1px solid #fae6be;font-weight:900}
.benefit-row b,.benefit-row small{display:block}.benefit-row b{font-size:11px;color:#173c64}.benefit-row small{font-size:9px;color:#7b8b99;margin-top:2px}

.control-preview{position:relative;z-index:5;grid-column:1 / 3;grid-row:2;width:90%;height:250px;margin:0 auto;background:rgba(255,255,255,.96);border:1px solid #dce5ec;border-radius:20px 20px 0 0;box-shadow:0 20px 65px rgba(31,70,104,.12);padding:13px 17px 16px;backdrop-filter:blur(16px)}
.cp-head{height:37px;display:flex;align-items:center;gap:15px;border-bottom:1px solid #edf1f4;padding:0 2px 10px}
.cp-title{display:flex;align-items:center;gap:8px}.cp-title b{font-size:14px;color:#17385d}.cp-title small{font-size:8px;color:#92a0ac;margin-inline-start:4px}.mini-shield{width:16px;height:18px;background:linear-gradient(145deg,#f0b342,#cb891f);clip-path:polygon(50% 0,90% 14%,82% 68%,50% 100%,18% 68%,10% 14%)}
.cp-live{margin-inline-start:auto;font-size:10px;color:#3c5d77}.cp-live i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#3bc573;margin-inline-end:6px;box-shadow:0 0 0 5px rgba(59,197,115,.08)}
.cp-period{border:1px solid #dfe7ed;background:#fff;border-radius:9px;padding:7px 11px;color:#5f7284;font-size:10px}
.cp-body{display:grid;grid-template-columns:35% 24% 41%;gap:12px;height:182px;padding-top:12px}
.cp-body section{border:1px solid #e8edf1;border-radius:11px;background:#fff;padding:10px}
.cp-body h3{font-size:10px;margin:0 0 9px;color:#334f68}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;height:132px}
.stat-grid article{border:1px solid #e9eef2;border-radius:9px;padding:8px;text-align:center;display:flex;flex-direction:column;justify-content:center;background:#fcfdfe}
.stat-grid article>span{font-size:13px}.stat-grid b{font-size:20px;margin:2px 0;color:#17375d}.stat-grid small{font-size:8px;color:#788a99}
.cp-map-panel{overflow:hidden}.mini-map{position:relative;height:132px;border-radius:8px;background:linear-gradient(135deg,#f6f8f6,#f4f8fb);overflow:hidden;border:1px solid #edf1f3}
.mini-map:before{content:"";position:absolute;inset:0;background:linear-gradient(26deg,transparent 45%,#d6e3d8 46%,#d6e3d8 47%,transparent 48%),linear-gradient(155deg,transparent 42%,#dfe7eb 43%,#dfe7eb 44%,transparent 45%),linear-gradient(92deg,transparent 54%,#e9dcc0 55%,#e9dcc0 56%,transparent 57%);opacity:.9}
.mini-map b{position:absolute;left:45%;top:47%;font-size:11px;color:#7c8995}.map-dot{position:absolute;width:13px;height:13px;border-radius:50%;background:#fff;border:3px solid #e4a224;box-shadow:0 0 0 3px rgba(228,162,36,.12)}
.map-dot.d1{left:20%;top:35%}.map-dot.d2{right:20%;top:27%;border-color:#2c9ad2}.map-dot.d3{left:36%;bottom:20%;border-color:#073f74}.map-dot.d4{right:27%;bottom:23%}
.cp-workflow{overflow:hidden}.workflow-line{position:relative;display:grid;grid-template-columns:repeat(8,1fr);gap:4px;margin-top:19px}.workflow-line:before{content:"";position:absolute;left:5%;right:5%;top:17px;height:1px;background:#e2b254}
.wf-node{position:relative;z-index:2;text-align:center}.wf-node>span{width:34px;height:34px;border-radius:50%;margin:0 auto 7px;background:#fbfcfd;border:1px solid #e7edf1;display:grid;place-items:center;font-size:8px;color:#d29422}.wf-node b,.wf-node small{display:block}.wf-node b{font-size:8px;color:#314d66}.wf-node small{font-size:8px;color:#687b8d;margin-top:2px}

.journey-lite{padding:52px 7vw 68px;background:#fff}
.journey-title{text-align:center;margin-bottom:30px}.journey-title>span{font-size:10px;letter-spacing:2px;color:#c89128;font-weight:900}.journey-title h2{font-size:29px;margin:7px 0;color:#17385e}
.journey-cards{display:grid;grid-template-columns:repeat(8,1fr);gap:11px;position:relative}
.journey-cards:before{content:"";position:absolute;left:3%;right:3%;top:57px;height:1px;background:linear-gradient(90deg,#d59d31,#82b9da,#d59d31);opacity:.6}
.journey-cards article{position:relative;z-index:2;text-align:center;background:#fff;border:1px solid #e3e9ee;border-radius:12px;padding:13px 9px;min-height:160px;box-shadow:0 8px 25px rgba(21,63,96,.045)}
.jc-num{position:absolute;top:-9px;right:9px;width:27px;height:27px;border-radius:50%;background:#fff6e6;color:#cf8b1f;border:1px solid #f2dfba;display:grid;place-items:center;font-size:8px;font-weight:900}
.jc-icon{width:39px;height:39px;margin:10px auto 12px;border-radius:50%;display:grid;place-items:center;background:#f8fbfd;border:1px solid #e4ebf0;color:#0b5b93;font-size:16px}
.journey-cards b,.journey-cards small{display:block}.journey-cards b{font-size:12px}.journey-cards small{font-size:9px;color:#758697;line-height:1.55;margin-top:5px}
.about-strip{padding:52px 7vw;display:flex;align-items:center;justify-content:space-between;gap:25px;background:linear-gradient(120deg,#f5f9fc,#fff);border-top:1px solid #e9eef2}
.about-strip span{font-size:10px;color:#c58f2b;font-weight:900;letter-spacing:2px}.about-strip h2{font-size:30px;max-width:780px;margin:7px 0 0}.about-strip>a{white-space:nowrap;background:#0b5a95;color:#fff;border-radius:10px;padding:13px 18px;font-weight:800;font-size:13px}
.placeholder-anchor{height:1px}
.v5-footer{height:58px;padding:0 5vw;display:flex;align-items:center;justify-content:space-between;background:#f8fafc;border-top:1px solid #e5ebef;color:#718294;font-size:11px}

@keyframes sceneBreath{from{transform:scale(1.03)}to{transform:scale(1.07) translateY(-1%)}}
@keyframes radarRotate{to{transform:translate(-50%,-50%) rotate(360deg)}}
@media(max-width:1200px){
  .v5-header{grid-template-columns:auto 1fr auto}.v5-nav{gap:18px;font-size:12px}.v5-brand{min-width:210px}.brand-copy small{display:none}
  .v5-hero{grid-template-columns:44% 56%;padding-inline:3vw}.scene-visual{left:-3vw;width:calc(100% + 3vw)}.benefit-row{grid-template-columns:repeat(3,1fr)}
  .cp-body{grid-template-columns:34% 28% 38%}.stat-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:920px){
  .v5-header{height:78px;padding:0 18px;grid-template-columns:1fr auto}.v5-brand{min-width:0}.brand-copy b{font-size:24px}.shield-logo{width:39px;height:45px}.v5-nav{position:absolute;top:78px;left:0;right:0;background:#fff;border-bottom:1px solid #e5ebef;display:none;flex-direction:column;gap:0;padding:10px 18px;box-shadow:0 18px 35px rgba(24,64,96,.1)}.v5-nav.open{display:flex}.v5-nav a{width:100%;padding:13px}.menu-toggle{display:block}.login-btn{padding:0 13px}.login-btn .lock-icon{display:none}
  .v5-hero{display:block;min-height:auto;padding:25px 18px 0}.hero-scene{height:430px;min-height:0}.scene-visual{position:relative;left:-18px;width:calc(100% + 36px);height:430px;border-radius:0 0 55px 55px;mask-image:linear-gradient(to bottom,#000 80%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,#000 80%,transparent 100%)}.hero-copy{padding:25px 0 0}.hero-copy h1{font-size:43px}.benefit-row{grid-template-columns:repeat(2,1fr)}
  .control-preview{width:100%;height:auto;margin-top:34px;border-radius:18px;position:relative}.cp-body{grid-template-columns:1fr;height:auto}.cp-body section{min-height:170px}.stat-grid{height:auto;grid-template-columns:repeat(4,1fr)}.workflow-line{margin-bottom:10px}
  .journey-cards{grid-template-columns:repeat(4,1fr)}.journey-cards:before{display:none}
}
@media(max-width:640px){
  .v5-actions{gap:6px}.lang-switch{width:40px;height:40px}.login-btn{height:42px;font-size:11px}.brand-copy small{display:none}
  .hero-scene{height:355px}.scene-visual{height:355px}.radar-1{width:160px;height:160px}.radar-2{width:90px;height:90px}.vehicle-frame{left:7%;width:220px;height:145px}.vehicle-tag{left:30%;bottom:84px}
  .hero-copy h1{font-size:35px;letter-spacing:-.8px}.hero-copy p{font-size:14px}.primary-cta,.secondary-cta{width:100%}.benefit-row{grid-template-columns:1fr}.benefit-row article{height:58px}
  .cp-head{flex-wrap:wrap;height:auto}.cp-title small{display:none}.cp-period{margin-inline-start:auto}.stat-grid{grid-template-columns:repeat(2,1fr)}.workflow-line{grid-template-columns:repeat(4,1fr);row-gap:16px}.workflow-line:before{display:none}
  .journey-lite{padding:45px 18px}.journey-title h2{font-size:24px}.journey-cards{grid-template-columns:repeat(2,1fr)}.about-strip{padding:40px 18px;flex-direction:column;align-items:flex-start}.about-strip h2{font-size:25px}.about-strip>a{width:100%;text-align:center}.v5-footer{padding:0 18px;font-size:9px}
}