:root{
  --navy:#0a1f3d;
  --navy-2:#0d2747;
  --navy-deep:#06152a;
  --copper:#c0813f;
  --copper-2:#e0a258;
  --copper-grad:linear-gradient(135deg,#b8732f 0%,#e0a258 50%,#c79356 100%);
  --teal:#0fb6a3;
  --teal-2:#34d0bd;
  --teal-deep:#0c7d72;
  --teal-ink:#0c3b38;
  --mint:#eafaf6;
  --ink:#0a1f3d;
  --muted:#5a6a82;
  --line:#e6ebf2;
  --bg:#ffffff;
  --bg-soft:#f5f8fc;
  --white:#ffffff;
  --radius:16px;
  --shadow:0 20px 50px -20px rgba(10,31,61,.25);
  --shadow-sm:0 8px 24px -12px rgba(10,31,61,.2);
  --maxw:1200px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'IBM Plex Sans Arabic','Cairo',system-ui,sans-serif;
  color:var(--ink);background:var(--bg);line-height:1.7;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:'Cairo',sans-serif;line-height:1.25;font-weight:800;color:var(--navy)}
a{text-decoration:none;color:inherit}
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.8rem;letter-spacing:.5px;
  color:var(--copper);text-transform:uppercase;margin-bottom:16px}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--copper-grad);border-radius:2px}
.btn{display:inline-flex;align-items:center;gap:10px;font-family:'Cairo',sans-serif;font-weight:700;
  font-size:1rem;padding:14px 28px;border-radius:50px;cursor:pointer;border:none;transition:.25s;white-space:nowrap}
.btn-primary{background:var(--copper-grad);color:#fff;box-shadow:0 12px 30px -10px rgba(184,115,47,.6)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 40px -10px rgba(184,115,47,.7)}
.btn-ghost{background:rgba(15,182,163,.08);color:var(--teal-deep);border:1.5px solid rgba(15,182,163,.4)}
.btn-ghost:hover{background:rgba(15,182,163,.16)}
.btn-dark{background:var(--navy);color:#fff}
.btn-dark:hover{background:var(--navy-2);transform:translateY(-2px)}

/* ===== NAV ===== */
header{position:fixed;top:0;left:0;right:0;z-index:100;transition:.3s}
header.scrolled{background:rgba(255,255,255,.92);backdrop-filter:blur(14px);box-shadow:0 6px 24px -16px rgba(10,31,61,.4)}
.nav{display:flex;align-items:center;justify-content:space-between;height:78px}
.brand{display:flex;align-items:center;gap:12px}
.brand .mark{width:46px;height:46px;flex:none}
.brand .wm{display:flex;flex-direction:column;line-height:1.1}
.brand .wm b{font-family:'Cairo';font-weight:900;font-size:1.18rem;letter-spacing:1px;color:var(--navy)}
.brand .wm span{font-size:.62rem;letter-spacing:3px;color:var(--copper);font-weight:700}
header.scrolled .brand .wm b{color:var(--navy)}
.nav-links{display:flex;align-items:center;gap:22px}
.nav-links a{font-weight:600;font-size:.96rem;color:#1f3358;transition:.2s}
.nav-links a:hover{color:var(--copper)}
.nav-cta{display:flex;align-items:center;gap:14px}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px}
.burger span{width:26px;height:2.5px;background:var(--navy);border-radius:2px;transition:.3s}

/* ===== HERO ===== */
.hero{position:relative;background:
   radial-gradient(1100px 600px at 82% -10%,rgba(192,129,63,.16),transparent 58%),
   radial-gradient(1000px 600px at 5% 110%,rgba(15,182,163,.22),transparent 60%),
   radial-gradient(700px 500px at 50% 50%,rgba(52,208,189,.10),transparent 70%),
   linear-gradient(160deg,#eafaf7 0%,#f1fbfe 55%,#ffffff 100%);
  color:var(--ink);padding:160px 0 110px;overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(12,123,114,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(12,123,114,.06) 1px,transparent 1px);
  background-size:46px 46px;mask-image:radial-gradient(900px 500px at 70% 20%,#000,transparent 75%);opacity:.7}
.hero .container{position:relative;z-index:2;display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center}
.hero h1{color:var(--navy);font-size:clamp(2.1rem,4.6vw,3.5rem);font-weight:900;letter-spacing:-.5px}
.hero h1 .grad{background:linear-gradient(135deg,#0c7d72 0%,#0fb6a3 55%,#c79356 110%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.lead{color:#3f5562;font-size:1.18rem;margin:22px 0 32px;max-width:560px}
.hero .pill{display:inline-flex;align-items:center;gap:10px;background:rgba(15,182,163,.1);
  border:1px solid rgba(15,182,163,.28);padding:8px 16px;border-radius:50px;font-size:.85rem;
  font-weight:700;color:var(--teal-deep);margin-bottom:26px}
.hero .pill .dot{width:8px;height:8px;border-radius:50%;background:#10b981;box-shadow:0 0 0 4px rgba(16,185,129,.2)}
.hero-cta{display:flex;gap:16px;flex-wrap:wrap}
.hero-stats{display:flex;gap:34px;margin-top:46px;flex-wrap:wrap}
.hero-stats .s b{font-family:'Cairo';font-size:2rem;font-weight:900;color:var(--navy);display:block}
.hero-stats .s span{font-size:.85rem;color:#5a6a72}
.hero-stats .s b em{color:var(--teal-deep);font-style:normal}

/* hero visual */
.hero-visual{position:relative;height:430px}
.orb{position:absolute;inset:0;margin:auto;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle at 38% 32%,rgba(52,208,189,.45),rgba(192,129,63,.12) 55%,transparent 72%);
  filter:blur(6px)}
.ring{position:absolute;inset:0;margin:auto;border:1.5px solid rgba(15,182,163,.4);border-radius:50%;animation:spin 18s linear infinite}
.ring.r1{width:300px;height:300px}
.ring.r2{width:380px;height:380px;border-color:rgba(192,129,63,.3);animation-duration:26s;animation-direction:reverse}
.ring.r3{width:230px;height:230px;border-style:dashed;border-color:rgba(12,123,114,.3);animation-duration:14s}
@keyframes spin{to{transform:rotate(360deg)}}
.node{position:absolute;width:14px;height:14px;border-radius:50%;background:linear-gradient(135deg,#0fb6a3,#34d0bd);box-shadow:0 0 18px rgba(15,182,163,.7)}
.node:nth-child(6){background:var(--copper-grad);box-shadow:0 0 18px rgba(224,162,88,.7)}
.hero-core{position:absolute;inset:0;margin:auto;width:140px;height:140px;display:flex;align-items:center;justify-content:center;
  border-radius:30px;box-shadow:0 0 70px rgba(15,182,163,.35),0 30px 60px -20px rgba(12,59,56,.4)}
.hero-core svg{width:140px;height:140px;filter:drop-shadow(0 8px 24px rgba(12,59,56,.35))}
.float-card{position:absolute;background:rgba(255,255,255,.9);backdrop-filter:blur(8px);
  border:1px solid rgba(15,182,163,.18);border-radius:14px;padding:12px 16px;display:flex;align-items:center;gap:10px;
  font-size:.82rem;font-weight:700;color:var(--navy);box-shadow:0 14px 34px -16px rgba(12,59,56,.35)}
.float-card .ic{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,#0fb6a3,#0c7d72);display:flex;align-items:center;justify-content:center;font-size:1rem}
.fc1{top:18px;right:0;animation:bob 4s ease-in-out infinite}
.fc2{bottom:40px;left:-10px;animation:bob 4s ease-in-out infinite .8s}
.fc3{bottom:0;right:40px;animation:bob 4s ease-in-out infinite 1.6s}
@keyframes bob{50%{transform:translateY(-12px)}}

/* logos strip */
.strip{background:var(--bg-soft);border-bottom:1px solid var(--line);padding:24px 0}
.strip .container{display:flex;align-items:center;gap:22px;flex-wrap:wrap;justify-content:center}
.strip>.container>span{color:var(--navy);font-weight:700;font-size:.95rem;font-family:'Cairo'}
.strip .logos{display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:center}
.strip .logos .chip{font-family:'Cairo';font-weight:700;color:var(--teal-ink);font-size:.92rem;background:#fff;
  border:1px solid var(--line);padding:8px 18px;border-radius:50px;transition:.2s}
.strip .logos .chip:hover{border-color:var(--teal);color:var(--teal-deep)}

/* ===== SECTION base ===== */
section.block{padding:96px 0}
.head{text-align:center;max-width:680px;margin:0 auto 60px}
.head h2{font-size:clamp(1.8rem,3.4vw,2.6rem)}
.head p{color:var(--muted);font-size:1.1rem;margin-top:14px}

/* services */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:32px 28px;transition:.3s;position:relative;overflow:hidden}
.card::before{content:"";position:absolute;top:0;right:0;left:0;height:3px;background:var(--copper-grad);transform:scaleX(0);transform-origin:right;transition:.35s}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:transparent}
.card:hover::before{transform:scaleX(1)}
.card .ic{width:58px;height:58px;border-radius:14px;background:linear-gradient(145deg,#0e6a61,#0c3b38);
  display:flex;align-items:center;justify-content:center;margin-bottom:20px;color:#ffffff}
.card .ic svg{width:28px;height:28px}
.card h3{font-size:1.22rem;margin-bottom:10px}
.card p{color:var(--muted);font-size:.97rem}

/* why / features split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.feat-list{display:flex;flex-direction:column;gap:22px;margin-top:30px}
.feat{display:flex;gap:16px;align-items:flex-start}
.feat .chk{flex:none;width:42px;height:42px;border-radius:12px;background:rgba(192,129,63,.12);
  display:flex;align-items:center;justify-content:center;color:var(--copper)}
.feat h4{font-size:1.08rem;margin-bottom:4px}
.feat p{color:var(--muted);font-size:.95rem}
.visual-panel{background:linear-gradient(160deg,#0e6a61,#0c3b38);border-radius:24px;padding:42px;color:#fff;position:relative;overflow:hidden}
.visual-panel::before{content:"";position:absolute;width:240px;height:240px;background:radial-gradient(circle,rgba(224,162,88,.35),transparent 70%);top:-60px;left:-60px}
.metric{display:flex;align-items:center;justify-content:space-between;padding:18px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.metric:last-child{border:none}
.metric .label{color:rgba(255,255,255,.7);font-size:.95rem}
.metric .val{font-family:'Cairo';font-weight:900;font-size:1.6rem;color:var(--copper-2)}
.bar{height:8px;background:rgba(255,255,255,.1);border-radius:50px;overflow:hidden;margin-top:8px}
.bar i{display:block;height:100%;background:var(--copper-grad);border-radius:50px}

/* process */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;counter-reset:st}
.step{position:relative;padding-top:18px}
.step .num{font-family:'Cairo';font-weight:900;font-size:2.4rem;background:var(--copper-grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:8px}
.step h4{font-size:1.15rem;margin-bottom:8px}
.step p{color:var(--muted);font-size:.94rem}
.step::before{content:"";position:absolute;top:34px;right:-12px;width:24px;height:2px;background:var(--line)}
.step:last-child::before{display:none}

/* stats band */
.band{background:radial-gradient(700px 300px at 85% 0%,rgba(192,129,63,.22),transparent 60%),linear-gradient(160deg,#0e6a61,#0c3b38);color:#fff;border-radius:28px;padding:56px 40px;text-align:center}
.band .grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin-top:10px}
.band .st b{font-family:'Cairo';font-weight:900;font-size:2.8rem;display:block;color:#fff}
.band .st b em{color:var(--copper-2);font-style:normal}
.band .st span{color:rgba(255,255,255,.65);font-size:.95rem}

/* industries */
.tags{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.tag{padding:12px 24px;border:1px solid var(--line);border-radius:50px;font-weight:600;color:var(--navy);
  background:#fff;transition:.25s;font-size:.95rem}
.tag:hover{border-color:var(--copper);color:var(--copper);transform:translateY(-3px)}

/* testimonials */
.quote{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:34px;box-shadow:var(--shadow-sm)}
.quote .stars{color:var(--copper);margin-bottom:14px;letter-spacing:3px}
.quote p{font-size:1.05rem;color:#2a3c5a;margin-bottom:22px}
.quote .who{display:flex;align-items:center;gap:14px}
.quote .av{width:48px;height:48px;border-radius:50%;background:var(--copper-grad);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-family:'Cairo'}
.quote .who b{display:block;font-family:'Cairo'}
.quote .who span{color:var(--muted);font-size:.85rem}

/* CTA band */
.cta-band{background:
  radial-gradient(700px 300px at 85% 0%,rgba(224,162,88,.32),transparent 60%),
  radial-gradient(600px 300px at 10% 110%,rgba(52,208,189,.3),transparent 60%),
  linear-gradient(150deg,#0c3b38,#0e6a61);
  color:#fff;border-radius:30px;padding:70px 50px;text-align:center;position:relative;overflow:hidden}
.cta-band h2{color:#fff;font-size:clamp(1.8rem,3.5vw,2.6rem)}
.cta-band p{color:rgba(255,255,255,.78);max-width:560px;margin:16px auto 30px;font-size:1.1rem}

/* contact */
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:50px;align-items:start}
.contact-info .ci{display:flex;gap:16px;align-items:flex-start;margin-bottom:26px}
.contact-info .ci .ic{width:48px;height:48px;flex:none;border-radius:12px;background:rgba(192,129,63,.12);
  display:flex;align-items:center;justify-content:center;color:var(--copper)}
.contact-info .ci b{display:block;font-family:'Cairo';margin-bottom:2px}
.contact-info .ci span{color:var(--muted);font-size:.95rem}
form{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:34px;box-shadow:var(--shadow-sm)}
.field{margin-bottom:18px}
.field label{display:block;font-weight:600;font-size:.9rem;margin-bottom:7px;color:var(--navy)}
.field input,.field textarea,.field select{width:100%;padding:13px 16px;border:1.5px solid var(--line);border-radius:12px;
  font-family:inherit;font-size:.97rem;transition:.2s;background:#fbfcfe;color:var(--ink)}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--copper);background:#fff}
.field textarea{resize:vertical;min-height:120px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-note{font-size:.82rem;color:var(--muted);margin-top:12px;text-align:center}

/* footer */
footer{background:linear-gradient(160deg,#0c3b38,#082a27);color:#fff;padding:70px 0 30px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;margin-bottom:50px}
.foot-grid h5{font-family:'Cairo';font-weight:800;font-size:1rem;margin-bottom:18px;color:#fff}
.foot-grid a,.foot-grid p{display:block;color:rgba(255,255,255,.82);font-size:.93rem;margin-bottom:10px;transition:.2s}
.foot-grid a:hover{color:var(--copper-2)}
.foot-brand p{max-width:280px;line-height:1.8;color:rgba(255,255,255,.88)}
.social{display:flex;gap:12px;margin-top:18px}
.social a{width:40px;height:40px;border-radius:10px;background:rgba(255,255,255,.07);display:flex;align-items:center;justify-content:center;color:#fff;margin:0}
.social a:hover{background:var(--copper-grad)}
.foot-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:24px;display:flex;justify-content:space-between;
  flex-wrap:wrap;gap:12px;color:rgba(255,255,255,.7);font-size:.85rem}

.reveal{opacity:0;transform:translateY(24px);transition:.7s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:none}

/* ===== WORK / PORTFOLIO PAGE ===== */
.page-hero{position:relative;padding:150px 0 60px;text-align:center;overflow:hidden;background:
  radial-gradient(900px 500px at 80% -20%,rgba(192,129,63,.14),transparent 58%),
  radial-gradient(900px 500px at 5% 120%,rgba(15,182,163,.2),transparent 60%),
  linear-gradient(160deg,#eafaf7 0%,#f1fbfe 60%,#ffffff 100%)}
.page-hero h1{font-size:clamp(2rem,4.4vw,3.2rem);font-weight:900}
.page-hero h1 .grad{background:linear-gradient(135deg,#0c7d72,#0fb6a3 60%,#c79356);-webkit-background-clip:text;background-clip:text;color:transparent}
.page-hero p{color:#3f5562;font-size:1.15rem;max-width:620px;margin:18px auto 0}
.filters{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:44px}
.filter-btn{padding:10px 22px;border-radius:50px;border:1.5px solid var(--line);background:#fff;font-family:'Cairo';
  font-weight:700;font-size:.9rem;color:var(--navy);cursor:pointer;transition:.2s}
.filter-btn:hover{border-color:var(--teal);color:var(--teal-deep)}
.filter-btn.active{background:linear-gradient(135deg,#0fb6a3,#0c7d72);color:#fff;border-color:transparent;
  box-shadow:0 10px 24px -12px rgba(15,182,163,.7)}
.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.proj{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:.35s;
  display:flex;flex-direction:column}
.proj:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:transparent}
.proj .thumb{height:165px;position:relative;display:flex;align-items:center;justify-content:center}
.proj .thumb::after{content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 28% 22%,rgba(255,255,255,.28),transparent 55%),
  linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:auto,30px 30px,30px 30px}
.proj .thumb .ic{position:relative;z-index:1;font-size:2.8rem;line-height:1;filter:drop-shadow(0 6px 14px rgba(0,0,0,.25))}
.proj .thumb .cat{position:absolute;top:14px;right:14px;z-index:2;background:rgba(255,255,255,.92);color:var(--teal-ink);
  font-weight:800;font-family:'Cairo';font-size:.7rem;padding:5px 13px;border-radius:50px}
.t-mobile{background:linear-gradient(145deg,#0fb6a3,#0c7d72)}
.t-web{background:linear-gradient(145deg,#3b82f6,#1d4ed8)}
.t-erp{background:linear-gradient(145deg,#8b5cf6,#6d28d9)}
.t-ecom{background:linear-gradient(145deg,#f59e0b,#b45309)}
.t-ai{background:linear-gradient(145deg,#06b6d4,#0e7490)}
.t-security{background:linear-gradient(145deg,#ef4444,#991b1b)}
.t-marketing{background:linear-gradient(145deg,#ec4899,#9d174d)}
.proj .body{padding:22px;flex:1;display:flex;flex-direction:column}
.proj .loc{font-size:.78rem;color:var(--copper);font-weight:800;font-family:'Cairo';margin-bottom:7px;display:flex;align-items:center;gap:5px}
.proj h3{font-size:1.12rem;margin-bottom:8px}
.proj .body>p{color:var(--muted);font-size:.92rem;flex:1}
.proj .tags2{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.proj .tags2 span{font-size:.72rem;background:var(--mint);color:var(--teal-deep);padding:4px 11px;border-radius:7px;font-weight:700}
.empty{display:none;text-align:center;color:var(--muted);padding:40px;font-weight:600}

/* responsive */
@media(max-width:960px){
  .hero .container,.split,.contact-grid{grid-template-columns:1fr}
  .hero-visual{height:340px;order:-1}
  .grid-3,.steps,.band .grid-4,.work-grid{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .step::before{display:none}
}
/* nav collapses to burger only on smaller screens, so links stay visible longer */
@media(max-width:860px){
  .nav-links{display:none}
  .burger{display:flex}
}
@media(max-width:560px){
  .grid-3,.band .grid-4,.row2,.foot-grid,.steps,.work-grid{grid-template-columns:1fr}
  .hero{padding:130px 0 80px}
  section.block{padding:64px 0}
  .hero-stats{gap:22px}
  .cta-band,.band{padding:44px 24px}
}
/* mobile menu */
.mobile-menu{position:fixed;inset:0;background:rgba(8,42,39,.98);z-index:200;display:none;flex-direction:column;
  align-items:center;justify-content:center;gap:28px}
.mobile-menu.open{display:flex}
.mobile-menu a{color:#fff;font-family:'Cairo';font-weight:700;font-size:1.4rem}
.mobile-menu .close{position:absolute;top:24px;left:24px;font-size:2rem;color:#fff;background:none;border:none;cursor:pointer}

/* ===== PRODUCTS / READY-MADE PAGE ===== */
.badge-sa{display:inline-block;font-size:.7rem;font-weight:800;font-family:'Cairo';color:var(--copper);
  background:rgba(192,129,63,.12);padding:4px 11px;border-radius:50px;margin-bottom:12px}
.prod .ic{width:58px;height:58px;border-radius:14px;background:linear-gradient(145deg,#0e6a61,#0c3b38);
  display:flex;align-items:center;justify-content:center;margin-bottom:18px;font-size:1.7rem}
.prod h3{font-size:1.18rem;margin-bottom:8px}
.prod>p{color:var(--muted);font-size:.94rem;margin-bottom:12px}
.prod .feats{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.prod .feats li{font-size:.74rem;background:var(--mint);color:var(--teal-deep);padding:4px 10px;border-radius:7px;font-weight:700}
.prod-price{font-family:'Cairo';font-weight:800;color:var(--teal-deep);font-size:1.02rem;margin-bottom:14px}
.prod-price b{font-size:1.25rem;color:var(--navy)}
.prod-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto}
.btn-sm{padding:11px 20px;font-size:.88rem}
.btn-wa{background:#25D366;color:#fff}
.btn-wa:hover{background:#1ebe5b;transform:translateY(-2px)}
.prod{display:flex;flex-direction:column}

/* pricing tiers */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
.price{background:#fff;border:1.5px solid var(--line);border-radius:18px;padding:36px 28px;display:flex;
  flex-direction:column;position:relative;transition:.3s}
.price:hover{box-shadow:var(--shadow);transform:translateY(-4px)}
.price.feat-plan{border-color:var(--teal);box-shadow:0 24px 54px -26px rgba(15,182,163,.55)}
.price .badge{position:absolute;top:-14px;right:50%;transform:translateX(50%);background:linear-gradient(135deg,#0fb6a3,#0c7d72);
  color:#fff;font-family:'Cairo';font-weight:800;font-size:.72rem;padding:6px 18px;border-radius:50px;white-space:nowrap}
.price h3{font-size:1.25rem;margin-bottom:6px}
.price .sub{color:var(--muted);font-size:.9rem;margin-bottom:18px;min-height:44px}
.price .amt{font-family:'Cairo';font-weight:900;font-size:2rem;color:var(--navy);line-height:1.2}
.price .amt small{font-size:.85rem;color:var(--muted);font-weight:600}
.price ul{list-style:none;margin:22px 0;display:flex;flex-direction:column;gap:13px;flex:1}
.price ul li{display:flex;gap:10px;align-items:flex-start;font-size:.93rem;color:#2a3c5a}
.price ul li svg{flex:none;width:18px;height:18px;color:var(--teal);margin-top:3px}
.price .btn{justify-content:center;width:100%}

@media(max-width:960px){.price-grid{grid-template-columns:1fr}}