/* ---------- Design Tokens ---------- */
  :root{
    --bg:#f6f8fc;
    --bg-alt:#eef2fb;
    --card:#ffffff;
    --ink:#0b1437;
    --ink-2:#1f2a4d;
    --muted:#5b6b8c;
    --line:#e4e9f5;

    --brand:#1e40af;          /* Zoho-style deep blue */
    --brand-2:#2563eb;        /* electric blue */
    --brand-3:#3b82f6;        /* light blue */
    --accent:#f97316;         /* Petpooja-style warm orange */
    --accent-2:#fb923c;
    --success:#10b981;
    --whatsapp:#25d366;

    --navy:#0b1437;
    --navy-2:#111d4a;
    --navy-3:#162566;

    --shadow-sm:0 2px 6px rgba(15,23,58,.06);
    --shadow-md:0 10px 30px rgba(15,23,58,.08);
    --shadow-lg:0 25px 60px rgba(15,23,58,.14);
    --shadow-glow:0 20px 50px rgba(37,99,235,.25);

    --radius:14px;
    --radius-lg:22px;
    --container:1200px;
  }

  /* ---------- Reset ---------- */
  *,*::before,*::after{box-sizing:border-box}
  html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
  body{
    margin:0; color:var(--ink); background:var(--bg);
    font-family:'Inter', system-ui, -apple-system, sans-serif;
    font-size:16px; line-height:1.65;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  h1,h2,h3,h4,h5{font-family:'Plus Jakarta Sans', system-ui, sans-serif; color:var(--ink); margin:0 0 .5em; line-height:1.2; letter-spacing:-.02em}
  h1{font-weight:800} h2{font-weight:800} h3{font-weight:700}
  p{margin:0 0 1em; color:var(--muted)}
  a{color:inherit; text-decoration:none}
  img{max-width:100%; display:block}
  button{font-family:inherit; cursor:pointer; border:none; background:none}
  ::selection{background:var(--brand-2); color:#fff}

  .container{max-width:var(--container); margin:0 auto; padding:0 24px}
  .section{padding:110px 0; position:relative}
  .section-alt{background:linear-gradient(180deg,#fff 0%, var(--bg-alt) 100%)}

  .eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    padding:7px 14px; border-radius:999px;
    background:rgba(37,99,235,.08); color:var(--brand-2);
    font-weight:600; font-size:13px; letter-spacing:.02em;
    border:1px solid rgba(37,99,235,.15);
  }
  .eyebrow i{font-size:11px}

  .section-head{text-align:center; max-width:720px; margin:0 auto 64px}
  .section-head h2{font-size:clamp(28px, 4vw, 44px); margin:18px 0 14px}
  .section-head p{font-size:17px}
  .gradient-text{
    background:linear-gradient(135deg,var(--brand) 0%, var(--brand-2) 45%, var(--accent) 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }

  /* ---------- Buttons ---------- */
  .btn{
    display:inline-flex; align-items:center; gap:10px;
    padding:14px 24px; border-radius:12px; font-weight:600; font-size:15px;
    transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
    white-space:nowrap; position:relative; overflow:hidden;
  }
  .btn i{font-size:14px}
  .btn-primary{background:linear-gradient(135deg,var(--brand) 0%, var(--brand-2) 100%); color:#fff; box-shadow:var(--shadow-glow)}
  .btn-primary:hover{transform:translateY(-2px); box-shadow:0 25px 50px rgba(37,99,235,.4)}
  .btn-primary::before{
    content:""; position:absolute; inset:0;
    background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.3) 50%, transparent 70%);
    transform:translateX(-100%); transition:transform .6s ease;
  }
  .btn-primary:hover::before{transform:translateX(100%)}
  .btn-accent{background:linear-gradient(135deg,var(--accent) 0%, #ea580c 100%); color:#fff; box-shadow:0 15px 40px rgba(249,115,22,.35)}
  .btn-accent:hover{transform:translateY(-2px); box-shadow:0 20px 50px rgba(249,115,22,.5)}
  .btn-ghost{background:rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(8px)}
  .btn-ghost:hover{background:rgba(255,255,255,.15); border-color:rgba(255,255,255,.35); transform:translateY(-2px)}
  .btn-outline{background:#fff; color:var(--brand); border:1.5px solid var(--line)}
  .btn-outline:hover{border-color:var(--brand-2); color:var(--brand-2); transform:translateY(-2px); box-shadow:var(--shadow-md)}
  .btn-sm{padding:10px 18px; font-size:14px}

  /* ---------- Navbar ---------- */
  .nav{
    position:fixed; top:0; left:0; right:0; z-index:1000;
    padding:18px 0; transition:all .3s ease;
    background:rgba(255,255,255,0); backdrop-filter:blur(0);
  }
  .nav.scrolled{
    background:rgba(255,255,255,.85); backdrop-filter:blur(18px);
    box-shadow:0 1px 0 rgba(15,23,58,.05), 0 10px 30px rgba(15,23,58,.06);
    padding:12px 0;
  }
  .nav-wrap{display:flex; align-items:center; justify-content:space-between; gap:20px}
  .brand{display:flex; align-items:center; gap:10px; font-weight:800; font-family:'Plus Jakarta Sans'; font-size:20px; color:var(--ink)}
  .brand-mark{
    width:38px; height:38px; border-radius:10px;
    background:linear-gradient(135deg,var(--brand) 0%, var(--brand-2) 50%, var(--accent) 100%);
    display:grid; place-items:center; color:#fff; font-weight:800; font-size:16px;
    box-shadow:0 8px 20px rgba(37,99,235,.3);
  }
  .nav-links{display:flex; gap:4px; align-items:center}
  .nav-links a{
    padding:9px 16px; border-radius:10px; font-weight:500; font-size:15px; color:var(--ink-2);
    transition:all .2s ease;
  }
  .nav-links a:hover{background:rgba(37,99,235,.08); color:var(--brand-2)}
  .nav-cta{display:flex; gap:10px; align-items:center}
  .wa-btn{
    display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:10px;
    background:var(--whatsapp); color:#fff; font-weight:600; font-size:14px;
    box-shadow:0 8px 20px rgba(37,211,102,.35); transition:all .25s ease;
  }
  .wa-btn:hover{transform:translateY(-2px); box-shadow:0 12px 28px rgba(37,211,102,.5)}
  .wa-btn i{font-size:16px}
  .hamburger{display:none; width:42px; height:42px; border-radius:10px; background:rgba(37,99,235,.08); color:var(--brand); align-items:center; justify-content:center}

  /* ---------- Mobile menu ---------- */
  .mobile-menu{
    display:none; position:fixed; top:0; right:0; width:88%; max-width:380px; height:100vh;
    background:#fff; z-index:1100; padding:30px 26px; box-shadow:-20px 0 60px rgba(0,0,0,.15);
    transform:translateX(100%); transition:transform .35s cubic-bezier(.4,0,.2,1);
    overflow-y:auto;
  }
  .mobile-menu.open{transform:translateX(0)}
  .mobile-menu .close{position:absolute; top:18px; right:18px; width:40px; height:40px; border-radius:10px; background:var(--bg-alt); display:grid; place-items:center; color:var(--ink)}
  .mobile-menu a{display:block; padding:14px 4px; font-weight:600; font-size:17px; color:var(--ink); border-bottom:1px solid var(--line)}
  .mobile-menu a:hover{color:var(--brand-2)}
  .mobile-menu .mobile-cta{margin-top:22px; display:flex; flex-direction:column; gap:10px}
  .scrim{position:fixed; inset:0; background:rgba(11,20,55,.5); z-index:1050; opacity:0; pointer-events:none; transition:opacity .3s ease}
  .scrim.open{opacity:1; pointer-events:auto}

  /* ---------- HERO ---------- */
  .hero{
    position:relative; padding:150px 0 110px; overflow:hidden;
    background:
      radial-gradient(ellipse 900px 500px at 80% 0%, rgba(37,99,235,.12), transparent 60%),
      radial-gradient(ellipse 700px 400px at 10% 100%, rgba(249,115,22,.08), transparent 60%),
      linear-gradient(180deg,#fbfcff 0%, #eef2fb 100%);
  }
  .hero::before{
    content:""; position:absolute; inset:0;
    background-image:
      linear-gradient(rgba(37,99,235,.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(37,99,235,.05) 1px, transparent 1px);
    background-size:56px 56px;
    mask-image:radial-gradient(ellipse at 50% 40%, #000 0%, transparent 70%);
    -webkit-mask-image:radial-gradient(ellipse at 50% 40%, #000 0%, transparent 70%);
    pointer-events:none;
  }
  .hero-grid{position:relative; z-index:2; display:grid; grid-template-columns:1.05fr .95fr; gap:60px; align-items:center}
  .hero-content h1{font-size:clamp(34px, 5.2vw, 62px); line-height:1.05}
  .hero-content .eyebrow{margin-bottom:24px}
  .hero-content .sub{font-size:18px; color:var(--muted); max-width:580px; margin:20px 0 32px}
  .hero-cta{display:flex; gap:14px; flex-wrap:wrap}

  .hero-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:54px; padding-top:34px; border-top:1px dashed var(--line)}
  .stat-num{font-family:'Plus Jakarta Sans'; font-size:30px; font-weight:800; color:var(--ink); line-height:1}
  .stat-lbl{font-size:13px; color:var(--muted); margin-top:6px}

  /* Hero visual */
  .hero-visual{position:relative; perspective:1500px}
  .hero-card{
    background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
    padding:24px; border:1px solid var(--line);
    transform:rotateY(-8deg) rotateX(3deg); transform-style:preserve-3d;
    animation:float 6s ease-in-out infinite;
  }
  @keyframes float{0%,100%{transform:rotateY(-8deg) rotateX(3deg) translateY(0)} 50%{transform:rotateY(-8deg) rotateX(3deg) translateY(-14px)}}
  .hero-card-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; padding-bottom:16px; border-bottom:1px solid var(--line)}
  .dots{display:flex; gap:6px} .dots span{width:10px; height:10px; border-radius:50%; background:var(--line)}
  .dots span:nth-child(1){background:#ff6058} .dots span:nth-child(2){background:#ffbd2e} .dots span:nth-child(3){background:#28c840}
  .hero-card h4{font-size:15px; margin:0; color:var(--muted); font-weight:600}

  .mini-stats{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-bottom:16px}
  .mini{padding:14px; border-radius:12px; background:linear-gradient(135deg,#f5f8ff,#eaf0ff); border:1px solid rgba(37,99,235,.1)}
  .mini small{font-size:11px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.05em}
  .mini .v{font-family:'Plus Jakarta Sans'; font-size:22px; font-weight:800; color:var(--brand); margin-top:4px}
  .mini:nth-child(2){background:linear-gradient(135deg,#fff7ed,#ffedd5); border-color:rgba(249,115,22,.15)}
  .mini:nth-child(2) .v{color:var(--accent)}
  .mini:nth-child(3){background:linear-gradient(135deg,#ecfdf5,#d1fae5); border-color:rgba(16,185,129,.15)}
  .mini:nth-child(3) .v{color:var(--success)}
  .mini:nth-child(4){background:linear-gradient(135deg,#eff6ff,#dbeafe); border-color:rgba(37,99,235,.15)}

  .chart-bars{display:flex; align-items:flex-end; gap:8px; height:120px; padding:10px; background:var(--bg); border-radius:12px}
  .chart-bars .bar{flex:1; background:linear-gradient(180deg,var(--brand-2),var(--brand)); border-radius:6px 6px 0 0; animation:grow 1.2s ease both}
  .chart-bars .bar:nth-child(2){animation-delay:.1s} .chart-bars .bar:nth-child(3){animation-delay:.2s}
  .chart-bars .bar:nth-child(4){animation-delay:.3s; background:linear-gradient(180deg,var(--accent-2),var(--accent))}
  .chart-bars .bar:nth-child(5){animation-delay:.4s} .chart-bars .bar:nth-child(6){animation-delay:.5s} .chart-bars .bar:nth-child(7){animation-delay:.6s}
  @keyframes grow{from{height:0} to{height:var(--h)}}

  .pill-float{
    position:absolute; background:#fff; border-radius:14px; padding:12px 16px;
    box-shadow:var(--shadow-md); display:flex; align-items:center; gap:10px;
    font-size:13px; font-weight:600; border:1px solid var(--line);
  }
  .pill-float i{width:34px; height:34px; border-radius:8px; display:grid; place-items:center; color:#fff}
  .pill-1{top:-18px; left:-28px; animation:float2 5s ease-in-out infinite}
  .pill-1 i{background:var(--success)}
  .pill-2{bottom:30px; right:-32px; animation:float2 5s ease-in-out infinite .8s}
  .pill-2 i{background:linear-gradient(135deg,var(--accent),var(--accent-2))}
  @keyframes float2{0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)}}

  /* ---------- Trusted strip ---------- */
  .trust{padding:32px 0; background:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
  .trust-wrap{display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap}
  .trust-lbl{font-size:13px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.08em}
  .trust-logos{display:flex; gap:36px; flex-wrap:wrap; align-items:center}
  .trust-logos span{font-family:'Plus Jakarta Sans'; font-weight:800; font-size:18px; color:#8592b3; letter-spacing:-.02em; transition:color .2s ease}
  .trust-logos span:hover{color:var(--brand)}

  /* ---------- ABOUT ---------- */
  .about-grid{display:grid; grid-template-columns:1.1fr 1fr; gap:70px; align-items:center}
  .about-cards{display:grid; grid-template-columns:1fr 1fr; gap:16px}
  .about-card{
    background:#fff; padding:22px; border-radius:var(--radius); border:1px solid var(--line);
    transition:all .3s ease;
  }
  .about-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:rgba(37,99,235,.2)}
  .about-card .ico{
    width:46px; height:46px; border-radius:10px; display:grid; place-items:center;
    margin-bottom:14px; font-size:18px;
  }
  .about-card:nth-child(1) .ico{background:rgba(37,99,235,.1); color:var(--brand-2)}
  .about-card:nth-child(2) .ico{background:rgba(249,115,22,.1); color:var(--accent)}
  .about-card:nth-child(3) .ico{background:rgba(16,185,129,.1); color:var(--success)}
  .about-card:nth-child(4) .ico{background:rgba(139,92,246,.1); color:#8b5cf6}
  .about-card h4{font-size:16px; margin:0 0 6px} .about-card p{margin:0; font-size:14px; line-height:1.5}

  /* ---------- SERVICES ---------- */
  .services-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
  .svc-card{
    background:#fff; border-radius:var(--radius); padding:26px; border:1px solid var(--line);
    transition:all .3s ease; position:relative; overflow:hidden;
  }
  .svc-card::before{
    content:""; position:absolute; top:0; left:0; right:0; height:3px;
    background:linear-gradient(90deg,var(--brand),var(--accent));
    transform:scaleX(0); transform-origin:left; transition:transform .4s ease;
  }
  .svc-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:transparent}
  .svc-card:hover::before{transform:scaleX(1)}
  .svc-card .ico{
    width:48px; height:48px; border-radius:12px; display:grid; place-items:center;
    margin-bottom:18px; font-size:18px;
    background:linear-gradient(135deg, rgba(37,99,235,.1), rgba(249,115,22,.1));
    color:var(--brand-2);
  }
  .svc-card h3{font-size:17px; margin:0 0 8px}
  .svc-card p{font-size:14px; margin:0 0 14px; line-height:1.55}
  .svc-card ul{list-style:none; padding:0; margin:0}
  .svc-card ul li{font-size:13px; color:var(--ink-2); padding:5px 0; display:flex; align-items:center; gap:8px}
  .svc-card ul li::before{content:"\f00c"; font-family:"Font Awesome 6 Free"; font-weight:900; color:var(--success); font-size:11px}

  /* ---------- PRODUCTS ---------- */
  .prod-list{display:flex; flex-direction:column; gap:34px}
  .prod{
    display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;
    background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
    padding:50px; transition:all .3s ease;
  }
  .prod:hover{box-shadow:var(--shadow-lg); border-color:rgba(37,99,235,.15)}
  .prod:nth-child(even) .prod-media{order:-1}
  .prod-badge{display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:999px; background:rgba(37,99,235,.1); color:var(--brand-2); font-weight:600; font-size:12px; letter-spacing:.05em; text-transform:uppercase; margin-bottom:14px}
  .prod h3{font-size:28px; margin:0 0 14px}
  .prod p{font-size:15px; margin-bottom:20px}
  .prod-feats{display:grid; grid-template-columns:1fr 1fr; gap:10px 18px; margin-bottom:26px}
  .prod-feats span{font-size:14px; color:var(--ink-2); display:flex; align-items:center; gap:8px}
  .prod-feats span i{color:var(--success); font-size:12px}
  .prod-cta{display:flex; gap:10px; flex-wrap:wrap}

  .prod-media{position:relative; border-radius:var(--radius); overflow:hidden; aspect-ratio:4/3; background:linear-gradient(135deg,#eef2fb,#dbe4f5); box-shadow:var(--shadow-md)}
  .prod-media img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease}
  .prod:hover .prod-media img{transform:scale(1.04)}
  .prod-media::after{content:""; position:absolute; inset:0; background:linear-gradient(135deg, rgba(37,99,235,.06), transparent 50%)}

  /* ---------- DEMO VIDEO ---------- */
  .demo{background:linear-gradient(135deg, #0b1437 0%, #162566 60%, #1e40af 100%); color:#fff; position:relative; overflow:hidden}
  .demo::before{
    content:""; position:absolute; inset:0;
    background:
      radial-gradient(ellipse 600px 300px at 20% 10%, rgba(249,115,22,.2), transparent 60%),
      radial-gradient(ellipse 500px 300px at 90% 80%, rgba(37,99,235,.35), transparent 60%);
  }
  .demo .section-head *{color:#fff}
  .demo .section-head p{color:rgba(255,255,255,.75)}
  .demo .eyebrow{background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.18)}
  .demo-wrap{position:relative; z-index:2}
  .video-card{
    position:relative; max-width:960px; margin:0 auto; border-radius:24px; overflow:hidden;
    aspect-ratio:16/9; background:#000; box-shadow:0 40px 100px rgba(0,0,0,.5);
    border:1px solid rgba(255,255,255,.1);
  }
  .video-card iframe{width:100%; height:100%; border:0; display:block}
  .video-fallback{
    position:absolute; inset:0;
    background:
      linear-gradient(135deg, rgba(30,64,175,.6), rgba(11,20,55,.8)),
      url('https://images.unsplash.com/photo-1551434678-e076c223a692?w=1200&q=80') center/cover;
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    transition:all .3s ease;
  }
  .play-btn{
    width:96px; height:96px; border-radius:50%; background:#fff; display:grid; place-items:center;
    color:var(--brand); font-size:28px; box-shadow:0 20px 60px rgba(0,0,0,.4);
    transition:transform .3s ease; position:relative;
  }
  .play-btn::before{
    content:""; position:absolute; inset:-12px; border-radius:50%;
    border:2px solid rgba(255,255,255,.4); animation:pulse 2s ease infinite;
  }
  @keyframes pulse{0%{transform:scale(1); opacity:1} 100%{transform:scale(1.4); opacity:0}}
  .video-fallback:hover .play-btn{transform:scale(1.08)}

  .demo-bottom{text-align:center; margin-top:36px}
  .yt-link{display:inline-flex; align-items:center; gap:10px; color:#fff; font-weight:600; padding:12px 20px; border-radius:10px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2); transition:all .25s ease}
  .yt-link:hover{background:rgba(255,255,255,.15); transform:translateY(-2px)}
  .yt-link i{color:#ff0000; font-size:22px}

  /* ---------- TESTIMONIALS ---------- */
  .testi{background:linear-gradient(180deg, #fbfcff, #eef2fb)}
  .testi-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
  .testi-card{
    background:#fff; border-radius:var(--radius-lg); padding:32px; border:1px solid var(--line);
    transition:all .3s ease; position:relative;
  }
  .testi-card::before{
    content:"\201C"; position:absolute; top:-10px; left:24px;
    font-family:Georgia, serif; font-size:100px; color:var(--brand-2); opacity:.15; line-height:1;
  }
  .testi-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg)}
  .stars{color:#f59e0b; margin-bottom:14px}
  .testi-card p{color:var(--ink-2); font-size:15.5px; line-height:1.7; margin-bottom:22px; position:relative; z-index:1}
  .testi-who{display:flex; align-items:center; gap:12px; padding-top:18px; border-top:1px solid var(--line)}
  .avatar{
    width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
    background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#fff; font-weight:700;
  }
  .testi-card:nth-child(2) .avatar{background:linear-gradient(135deg,var(--accent),var(--accent-2))}
  .testi-card:nth-child(3) .avatar{background:linear-gradient(135deg,var(--success),#34d399)}
  .testi-who .name{font-weight:700; color:var(--ink); font-size:15px}
  .testi-who .co{font-size:13px; color:var(--muted)}

  /* ---------- TEAM ---------- */
  .team-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:20px}
  .team-card{
    background:#fff; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line);
    transition:all .3s ease; text-align:center;
  }
  .team-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:transparent}
  .team-photo{width:100%; aspect-ratio:1/1; overflow:hidden; background:linear-gradient(135deg,#eef2fb,#dbe4f5); position:relative}
  .team-photo img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease}
  .team-card:hover .team-photo img{transform:scale(1.08)}
  .team-info{padding:16px 12px}
  .team-info h4{font-size:15px; margin:0 0 3px}
  .team-info span{font-size:12.5px; color:var(--muted)}

  /* ---------- FAQ ---------- */
  .faq-wrap{max-width:820px; margin:0 auto}
  .faq-item{
    background:#fff; border:1px solid var(--line); border-radius:var(--radius);
    margin-bottom:12px; overflow:hidden; transition:all .3s ease;
  }
  .faq-item.open{border-color:var(--brand-2); box-shadow:0 10px 30px rgba(37,99,235,.1)}
  .faq-q{
    width:100%; padding:20px 24px; display:flex; align-items:center; justify-content:space-between;
    gap:16px; font-weight:600; font-size:16px; color:var(--ink); text-align:left;
    transition:all .2s ease;
  }
  .faq-q:hover{background:var(--bg-alt)}
  .faq-q .chev{
    width:32px; height:32px; border-radius:8px; background:rgba(37,99,235,.08); color:var(--brand-2);
    display:grid; place-items:center; flex:none; transition:transform .3s ease;
  }
  .faq-item.open .chev{transform:rotate(180deg); background:var(--brand-2); color:#fff}
  .faq-a{max-height:0; overflow:hidden; transition:max-height .35s ease, padding .35s ease; padding:0 24px}
  .faq-item.open .faq-a{max-height:400px; padding:0 24px 22px}
  .faq-a p{margin:0; color:var(--muted); line-height:1.7}

  /* ---------- CONTACT ---------- */
  .contact-grid{display:grid; grid-template-columns:1fr 1.1fr; gap:50px}
  .contact-info{background:linear-gradient(135deg, var(--navy) 0%, var(--navy-3) 100%); color:#fff; border-radius:var(--radius-lg); padding:40px; position:relative; overflow:hidden}
  .contact-info::before{
    content:""; position:absolute; top:-100px; right:-100px; width:300px; height:300px; border-radius:50%;
    background:radial-gradient(circle, rgba(249,115,22,.25), transparent 70%);
  }
  .contact-info h3{color:#fff; font-size:24px; margin-bottom:10px; position:relative}
  .contact-info > p{color:rgba(255,255,255,.75); position:relative}
  .contact-item{display:flex; gap:14px; margin-top:22px; position:relative}
  .contact-item .ico{width:44px; height:44px; border-radius:10px; background:rgba(255,255,255,.08); color:#fff; display:grid; place-items:center; font-size:16px; flex:none; border:1px solid rgba(255,255,255,.12)}
  .contact-item .ico.wa{background:var(--whatsapp); border-color:transparent}
  .contact-item strong{display:block; color:#fff; font-size:14px; margin-bottom:2px}
  .contact-item a, .contact-item span{color:rgba(255,255,255,.8); font-size:14px; line-height:1.5}
  .contact-item a:hover{color:#fff}
  .contact-wa{
    margin-top:30px; display:flex; align-items:center; gap:14px; padding:16px;
    background:rgba(37,211,102,.12); border:1px solid rgba(37,211,102,.3); border-radius:12px; position:relative;
  }
  .contact-wa .ico{width:44px; height:44px; border-radius:10px; background:var(--whatsapp); color:#fff; display:grid; place-items:center; font-size:20px; flex:none}
  .contact-wa strong{display:block; color:#fff; font-size:15px}
  .contact-wa span{font-size:13px; color:rgba(255,255,255,.8)}
  .contact-wa a{margin-left:auto; padding:10px 18px; border-radius:10px; background:var(--whatsapp); color:#fff; font-weight:600; font-size:14px; box-shadow:0 8px 20px rgba(37,211,102,.35); transition:all .25s ease}
  .contact-wa a:hover{transform:translateY(-2px); box-shadow:0 12px 30px rgba(37,211,102,.5)}

  .contact-form{background:#fff; border-radius:var(--radius-lg); padding:40px; border:1px solid var(--line); box-shadow:var(--shadow-md)}
  .form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px}
  .form-group{margin-bottom:16px}
  .form-group label{display:block; font-size:13px; font-weight:600; color:var(--ink-2); margin-bottom:6px}
  .form-group input, .form-group textarea{
    width:100%; padding:13px 16px; border:1.5px solid var(--line); border-radius:10px; font-size:15px; font-family:inherit;
    color:var(--ink); background:var(--bg); transition:all .2s ease;
  }
  .form-group input:focus, .form-group textarea:focus{outline:none; border-color:var(--brand-2); background:#fff; box-shadow:0 0 0 4px rgba(37,99,235,.1)}
  .form-group textarea{resize:vertical; min-height:120px}
  .contact-form .btn{width:100%; justify-content:center}
  .form-msg{display:none; padding:14px; border-radius:10px; background:rgba(16,185,129,.1); color:var(--success); font-size:14px; font-weight:600; margin-top:14px; border:1px solid rgba(16,185,129,.3)}
  .form-msg.show{display:block}

  /* ---------- FOOTER ---------- */
  footer{background:var(--navy); color:rgba(255,255,255,.75); padding:70px 0 30px; position:relative}
  .footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:50px; margin-bottom:50px}
  .footer-brand .brand{color:#fff; margin-bottom:14px}
  .footer-brand p{color:rgba(255,255,255,.65); font-size:14.5px; max-width:320px; line-height:1.7}
  footer h5{color:#fff; font-size:14px; margin:0 0 18px; text-transform:uppercase; letter-spacing:.08em; font-weight:700}
  footer ul{list-style:none; padding:0; margin:0}
  footer li{margin-bottom:10px}
  footer a{color:rgba(255,255,255,.65); font-size:14.5px; transition:color .2s ease}
  footer a:hover{color:#fff}
  .footer-bot{border-top:1px solid rgba(255,255,255,.1); padding-top:24px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px; font-size:13.5px; color:rgba(255,255,255,.55)}
  .footer-bot .made{display:flex; gap:6px; align-items:center}
  .footer-bot .made .heart{color:var(--accent)}

  /* ---------- Reveal animation ---------- */
  .reveal{opacity:0; transform:translateY(30px); transition:opacity .7s ease, transform .7s ease}
  .reveal.in{opacity:1; transform:translateY(0)}
  .reveal-delay-1{transition-delay:.1s} .reveal-delay-2{transition-delay:.2s} .reveal-delay-3{transition-delay:.3s} .reveal-delay-4{transition-delay:.4s}
  .no-js .reveal, html.reveal-fallback .reveal{opacity:1; transform:none}

  /* ---------- Scroll top ---------- */
  .scroll-top{
    position:fixed; bottom:24px; right:24px; width:48px; height:48px; border-radius:12px;
    background:var(--brand); color:#fff; display:grid; place-items:center; font-size:16px;
    box-shadow:var(--shadow-glow); z-index:900; opacity:0; pointer-events:none; transition:all .3s ease;
  }
  .scroll-top.show{opacity:1; pointer-events:auto}
  .scroll-top:hover{transform:translateY(-4px)}

  /* Animation for spinner */
  @keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

  /* ---------- Responsive ---------- */
  @media (max-width: 1024px){
    .hero-grid{grid-template-columns:1fr; gap:50px}
    .hero-visual{max-width:520px; margin:0 auto}
    .services-grid{grid-template-columns:repeat(2,1fr)}
    .prod{grid-template-columns:1fr; padding:30px; gap:30px}
    .prod:nth-child(even) .prod-media{order:0}
    .team-grid{grid-template-columns:repeat(4,1fr)}
    .about-grid{grid-template-columns:1fr; gap:40px}
    .footer-grid{grid-template-columns:1fr 1fr; gap:36px}
    .contact-grid{grid-template-columns:1fr; gap:30px}
  }
  @media (max-width: 780px){
    .nav-links, .nav-cta .wa-btn, .nav-cta .btn{display:none}
    .hamburger{display:flex}
    .mobile-menu{display:block}
    .section{padding:80px 0}
    .hero{padding:120px 0 70px}
    .hero-stats{grid-template-columns:repeat(2,1fr); gap:16px}
    .testi-grid{grid-template-columns:1fr}
    .team-grid{grid-template-columns:repeat(2,1fr)}
    .about-cards{grid-template-columns:1fr}
    .services-grid{grid-template-columns:1fr}
    .footer-grid{grid-template-columns:1fr 1fr}
    .form-row{grid-template-columns:1fr}
    .prod-feats{grid-template-columns:1fr}
    .pill-1{left:10px; top:-10px} .pill-2{right:10px}
    .contact-info, .contact-form{padding:28px 22px}
    .testi-card{padding:26px}
    .play-btn{width:72px; height:72px; font-size:22px}
  }
  @media (max-width: 480px){
    .hero-content h1{font-size:34px}
    .section-head h2{font-size:26px}
    .footer-grid{grid-template-columns:1fr}
    .hero-cta{flex-direction:column; align-items:stretch}
    .hero-cta .btn{justify-content:center}
    .contact-wa{flex-direction:column; align-items:flex-start}
    .contact-wa a{margin-left:0; width:100%; text-align:center}
  }

/* =====================================================================
   SEO / Oman additions (multi-page) — uses the same design tokens
   ===================================================================== */
.nav-links .has-sub{position:relative}
.nav-links .sub{display:none; position:absolute; top:100%; left:50%; transform:translateX(-50%); background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-lg); padding:8px; min-width:290px; z-index:1001}
.nav-links .has-sub:hover .sub,.nav-links .has-sub:focus-within .sub{display:block}
.nav-links .sub a{display:flex; justify-content:space-between; gap:12px; font-size:14.5px}
.nav-links .sub a small{color:var(--muted); font-weight:600; font-size:11.5px}
.nav.solid{background:rgba(255,255,255,.92); backdrop-filter:blur(18px); box-shadow:0 1px 0 rgba(15,23,58,.05)}

/* Oman top strip */
.topstrip{background:var(--navy); color:rgba(255,255,255,.8); font-size:13px; position:relative; z-index:1001}
.topstrip .container{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-top:7px; padding-bottom:7px}
.topstrip a{color:#fff}
.topstrip i{color:var(--accent-2); margin-right:6px}
.has-topstrip .nav{top:34px}
.has-topstrip .nav.scrolled{top:0}

/* Partner (Al Saleh) */
.partner-badge{display:inline-flex; align-items:center; gap:10px; padding:8px 16px 8px 8px; border-radius:999px; background:#fff; border:1px solid rgba(249,115,22,.35); box-shadow:0 8px 24px rgba(249,115,22,.15); font-weight:700; font-size:13.5px; color:var(--ink); margin-bottom:18px}
.partner-badge b{display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg,var(--accent),#ea580c); color:#fff; font-size:13px}
.partner-band{background:linear-gradient(135deg,#0b1437 0%,#162566 55%,#1e40af 100%); color:#fff; position:relative; overflow:hidden}
.partner-band::before{content:""; position:absolute; inset:0; background:radial-gradient(ellipse 600px 300px at 85% 20%, rgba(249,115,22,.28), transparent 60%)}
.partner-wrap{position:relative; z-index:2; display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center}
.partner-band h2{color:#fff; font-size:clamp(28px,3.6vw,42px)}
.partner-band p{color:rgba(255,255,255,.8); font-size:16.5px}
.partner-band .eyebrow{background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.2)}
.partner-logos{display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin:6px 0 26px}
.partner-logo{background:#fff; color:var(--ink); border-radius:16px; padding:18px 24px; font-family:'Plus Jakarta Sans'; font-weight:800; font-size:20px; box-shadow:0 20px 50px rgba(0,0,0,.25); line-height:1.15}
.partner-logo small{display:block; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.partner-x{font-size:28px; font-weight:800; color:var(--accent-2)}
.partner-points{display:grid; gap:14px}
.partner-point{display:flex; gap:14px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:14px; padding:16px 18px}
.partner-point i{width:38px; height:38px; border-radius:10px; display:grid; place-items:center; background:linear-gradient(135deg,var(--accent),#ea580c); color:#fff; flex:none}
.partner-point strong{display:block; color:#fff; font-size:15px; margin-bottom:2px}
.partner-point span{color:rgba(255,255,255,.75); font-size:14px; line-height:1.5}

/* Page hero for inner pages */
.page-hero{padding:150px 0 70px; position:relative; overflow:hidden; background:radial-gradient(ellipse 900px 500px at 80% 0%, rgba(37,99,235,.12), transparent 60%), linear-gradient(180deg,#fbfcff 0%, #eef2fb 100%)}
.page-hero h1{font-size:clamp(32px,4.6vw,54px); line-height:1.08; max-width:900px}
.page-hero .sub{font-size:18px; max-width:760px; margin:18px 0 28px}
.crumbs{font-size:13.5px; color:var(--muted); margin-bottom:18px}
.crumbs a{color:var(--brand-2)} .crumbs a:hover{text-decoration:underline}
.has-topstrip .page-hero{padding-top:180px}

.two-col{display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:start}
.box{background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:32px}
.check-list{list-style:none; padding:0; margin:0; display:grid; gap:10px}
.check-list li{display:flex; gap:10px; color:var(--ink-2); font-size:15px}
.check-list li::before{content:"\f00c"; font-family:"Font Awesome 6 Free"; font-weight:900; color:var(--success); font-size:12px; margin-top:5px}
.feat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
.prod-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
.prod-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:26px; transition:all .3s ease; display:flex; flex-direction:column}
.prod-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:transparent}
.prod-card h3{font-size:18px; margin:10px 0 8px}
.prod-card p{font-size:14px; margin:0 0 16px; flex:1}
.prod-card .more{color:var(--brand-2); font-weight:700; font-size:14px}
.prod-card .prod-badge{margin-bottom:0; align-self:flex-start}

.chips{display:flex; flex-wrap:wrap; gap:10px; list-style:none; padding:0; margin:0; justify-content:center}
.chips li{background:#fff; border:1px solid var(--line); border-radius:999px; padding:8px 16px; font-weight:600; font-size:14px; color:var(--ink-2)}
.steps{display:grid; grid-template-columns:repeat(5,1fr); gap:16px; counter-reset:s}
.step{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:22px}
.step::before{counter-increment:s; content:counter(s); display:grid; place-items:center; width:36px; height:36px; border-radius:10px; background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#fff; font-weight:800; margin-bottom:12px}
.step h3{font-size:16px; margin:0 0 6px} .step p{font-size:14px; margin:0}
.fawtara{background:linear-gradient(135deg,#fff7ed,#ffedd5); border:1px solid rgba(249,115,22,.25); border-radius:var(--radius-lg); padding:40px; display:grid; grid-template-columns:1.4fr 1fr; gap:30px; align-items:center}
.cta-band{background:linear-gradient(135deg,var(--brand) 0%, var(--brand-2) 60%, var(--accent) 140%); border-radius:var(--radius-lg); padding:54px 40px; text-align:center; color:#fff; box-shadow:var(--shadow-glow)}
.cta-band h2{color:#fff; font-size:clamp(26px,3.4vw,38px)}
.cta-band p{color:rgba(255,255,255,.85); max-width:640px; margin:0 auto 24px}
.cta-band .hero-cta{justify-content:center}
.btn-white{background:#fff; color:var(--brand)}
.btn-white:hover{transform:translateY(-2px)}
.btn-wa{background:var(--whatsapp); color:#fff; box-shadow:0 12px 30px rgba(37,211,102,.35)}
.btn-wa:hover{transform:translateY(-2px)}

.article{max-width:780px; margin:0 auto; font-size:17px}
.article p,.article li{color:var(--ink-2)}
.article h2{font-size:26px; margin:1.6em 0 .6em}
.article ul,.article ol{padding-left:1.3em} .article li{margin-bottom:.45em}
.article a{color:var(--brand-2); text-decoration:underline}
.note{background:#fff7ed; border-left:4px solid var(--accent); border-radius:10px; padding:16px 20px; margin:1.2em 0}
.note p{margin:0}
table.simple{width:100%; border-collapse:collapse; margin:1.2em 0; font-size:15px; background:#fff}
table.simple th,table.simple td{border:1px solid var(--line); padding:12px; text-align:left; vertical-align:top}
table.simple th{background:var(--bg-alt)}
.form-group select{width:100%; padding:13px 16px; border:1.5px solid var(--line); border-radius:10px; font-size:15px; font-family:inherit; color:var(--ink); background:var(--bg)}
.wa-float{position:fixed; left:20px; bottom:22px; z-index:950; display:inline-flex; align-items:center; gap:8px; padding:13px 18px; border-radius:999px; background:var(--whatsapp); color:#fff; font-weight:700; box-shadow:0 12px 30px rgba(37,211,102,.45)}
.wa-float i{font-size:20px}
.map{border:0; width:100%; height:260px; border-radius:14px; margin-top:24px}

@media (max-width:1024px){
  .partner-wrap,.two-col,.fawtara{grid-template-columns:1fr; gap:32px}
  .feat-grid,.prod-grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:780px){
  .feat-grid,.prod-grid,.steps{grid-template-columns:1fr}
  .topstrip .hide-sm{display:none}
  .has-topstrip .nav{top:0}
  .topstrip{display:none}
  .page-hero,.has-topstrip .page-hero{padding:120px 0 50px}
  .fawtara,.cta-band{padding:30px 22px}
  .wa-float span{display:none}
  .mobile-menu .sub-link{padding-left:18px; font-size:15px; font-weight:500}
}
.form-note{font-size:13px; color:var(--muted); margin:12px 0 0}
.wa-float{left:auto; right:22px; bottom:22px}
.scroll-top{bottom:90px}
.mobile-menu:not(.open){box-shadow:none}