/* INLINE STYLE FROM V2.5 — legacy compatibility */


/* =====================================================
   COLORS
===================================================== */

:root{
    --gold:#c9922e;
    --gold-dark:#9d6916;
    --gold-light:#ebd29b;
    --gold-soft:#f6ead0;

    --dark:#211810;
    --dark2:#2c2118;
    --dark3:#382a1e;

    --cream:#f7f2e8;
    --cream2:#eee6d8;

    --white:#fff;

    --text:#29221c;
    --muted:#71665c;

    --border:#ded3c2;

    --radius:22px;

    --shadow:0 25px 70px rgba(39,27,16,.12);
}

/* =====================================================
   RESET
===================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:"IBM Plex Sans Arabic",sans-serif;
    background:var(--cream);
    color:var(--text);
    line-height:1.9;
    overflow-x:hidden;
}

a{
    text-decoration:none;
    color:inherit;
}

img{
    max-width:100%;
    display:block;
}

button{
    font-family:inherit;
}

.container{
    width:min(1180px,91%);
    margin:auto;
}

/* =====================================================
   HEADER
===================================================== */

.header{
    background:#fbf8f2;
    border-bottom:1px solid var(--border);
    position:relative;
    z-index:100;
}

.navbar{
    min-height:100px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:35px;
}

.brand{
    display:flex;
    align-items:center;
    gap:15px;
}

.brand img{
    width:72px;
    height:72px;
    object-fit:contain;
}

.brand-title{
    font-family:"Noto Kufi Arabic",sans-serif;
    font-size:17px;
    font-weight:800;
    color:var(--dark);
    line-height:1.6;
}

.brand-subtitle{
    display:block;
    color:var(--gold-dark);
    font-size:11px;
    font-weight:600;
}

.nav{
    list-style:none;
    display:flex;
    align-items:center;
    gap:4px;
}

.nav a{
    padding:11px 13px;
    border-radius:9px;
    font-size:13px;
    font-weight:600;
    color:#51473d;
    transition:.25s;
}

.nav a:hover{
    color:var(--gold-dark);
    background:var(--gold-soft);
}

.nav .contact-link{
    background:var(--dark);
    color:#fff;
    padding:12px 19px;
    margin-right:5px;
}

.nav .contact-link:hover{
    background:var(--gold-dark);
    color:#fff;
}

.menu{
    display:none;
    width:46px;
    height:46px;
    background:#fff;
    border:1px solid var(--border);
    border-radius:10px;
    cursor:pointer;
    font-size:23px;
}

/* =====================================================
   COMMON
===================================================== */

.label{
    color:var(--gold-dark);
    font-size:13px;
    font-weight:700;
    display:inline-flex;
    align-items:center;
    gap:12px;
    margin-bottom:20px;
}

.label:after{
    content:"";
    width:40px;
    height:2px;
    background:var(--gold);
}

.title{
    font-family:"Noto Kufi Arabic",sans-serif;
    color:var(--dark);
    font-weight:800;
    font-size:clamp(30px,4vw,48px);
    line-height:1.5;
}

.description{
    color:var(--muted);
    font-size:15px;
    line-height:2.1;
}

.section{
    padding:105px 0;
    border-bottom:1px solid var(--border);
}

/* =====================================================
   HERO
===================================================== */

.hero{
    padding:95px 0;
    background:
    radial-gradient(circle at 10% 15%,rgba(201,146,46,.13),transparent 32%),
    linear-gradient(120deg,#f9f5ed,#f3ecdf);
    border-bottom:1px solid var(--border);
}

.hero-grid{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    align-items:center;
    gap:90px;
}

.hero h1{
    font-family:"Noto Kufi Arabic",sans-serif;
    font-size:clamp(42px,5vw,66px);
    line-height:1.45;
    font-weight:800;
    color:var(--dark);
    letter-spacing:-2px;
}

.hero h1 span{
    color:var(--gold);
}

.hero p{
    margin-top:28px;
    max-width:690px;
    color:var(--muted);
    font-size:16px;
    line-height:2.2;
}

.hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:34px;
}

.btn{
    min-height:54px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 27px;
    border-radius:11px;
    font-size:14px;
    font-weight:700;
    transition:.25s;
}

.btn-gold{
    background:var(--gold);
    color:#fff;
}

.btn-gold:hover{
    background:var(--gold-dark);
    transform:translateY(-2px);
}

.btn-light{
    background:#fff;
    border:1px solid var(--border);
}

.btn-light:hover{
    color:var(--gold-dark);
    border-color:var(--gold);
}

/* hero logo */

.hero-logo{
    min-height:500px;
    border-radius:34px;
    padding:45px;
    background:linear-gradient(145deg,#2b2118,#17110c);
    border:1px solid rgba(201,146,46,.5);
    display:flex;
    justify-content:center;
    align-items:center;
    position:relative;
    overflow:hidden;
    box-shadow:0 35px 75px rgba(38,27,16,.23);
}

.hero-logo:before{
    content:"";
    position:absolute;
    top:24px;
    right:24px;
    width:75px;
    height:75px;
    border-top:2px solid var(--gold);
    border-right:2px solid var(--gold);
}

.hero-logo:after{
    content:"";
    position:absolute;
    bottom:24px;
    left:24px;
    width:75px;
    height:75px;
    border-bottom:2px solid var(--gold);
    border-left:2px solid var(--gold);
}

.hero-logo img{
    max-width:380px;
    position:relative;
    z-index:2;
}

/* =====================================================
   QUICK BAR
===================================================== */

.quick{
    background:#fff;
    border-bottom:1px solid var(--border);
}

.quick-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
}

.quick-item{
    text-align:center;
    padding:27px 10px;
    border-left:1px solid var(--border);
}

.quick-item:last-child{
    border-left:none;
}

.quick-item strong{
    display:block;
    font-family:"Noto Kufi Arabic",sans-serif;
    color:var(--dark);
    font-size:18px;
    font-weight:800;
}

.quick-item span{
    font-size:11px;
    color:var(--muted);
}

/* =====================================================
   SECTION HEADING
===================================================== */

.heading-grid{
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    align-items:end;
    gap:70px;
    margin-bottom:55px;
}

/* =====================================================
   SERVICES
===================================================== */

.services-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:23px;
}

.service{
    background:#fff;
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:32px 29px;
    min-height:350px;
    transition:.3s;
}

.service:hover{
    transform:translateY(-7px);
    border-color:#d3ba84;
    box-shadow:var(--shadow);
}

.service-icon{
    width:62px;
    height:62px;
    background:var(--gold-soft);
    color:var(--gold-dark);
    border-radius:17px;
    display:flex;
    justify-content:center;
    align-items:center;
    margin-bottom:25px;
    font-size:23px;
    font-weight:700;
}

.service h3{
    font-family:"Noto Kufi Arabic",sans-serif;
    font-size:17px;
    color:var(--dark);
    margin-bottom:14px;
}

.service p{
    color:var(--muted);
    font-size:14px;
    line-height:2;
}

.service ul{
    list-style:none;
    margin-top:18px;
}

.service li{
    font-size:12px;
    margin:7px 0;
    padding-right:17px;
    position:relative;
    font-weight:600;
}

.service li:before{
    content:"";
    width:6px;
    height:6px;
    background:var(--gold);
    border-radius:50%;
    position:absolute;
    right:0;
    top:10px;
}

/* =====================================================
   OUR WORKS
===================================================== */

.works{
    background:var(--dark);
    color:#fff;
    overflow:hidden;
    position:relative;
}

.works:before{
    content:"";
    width:600px;
    height:600px;
    position:absolute;
    left:-300px;
    top:-250px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(201,146,46,.18),transparent 68%);
}

.works .label{
    color:var(--gold-light);
}

.works .title{
    color:#fff;
}

.works-heading{
    position:relative;
    z-index:2;
    max-width:760px;
    margin-bottom:55px;
}

.works-heading p{
    color:#bcae9f;
    margin-top:17px;
}

/* secure score */

/* Unified spacing between portfolio projects */
.works .project + .project{
    margin-top:32px;
}

.project{
    position:relative;
    z-index:2;

    display:grid;
    grid-template-columns:1.12fr .88fr;

    background:#18130f;

    border:1px solid rgba(201,146,46,.45);
    border-radius:28px;

    overflow:hidden;
}

.project-preview{
    min-height:530px;
    padding:35px;

    background:
    linear-gradient(145deg,#f7f5f1,#eae6de);

    display:flex;
    align-items:center;
}

/* mock dashboard */

.dashboard{
    background:#fff;
    color:#1f1f1f;

    border-radius:13px;

    width:100%;

    box-shadow:0 20px 55px rgba(0,0,0,.18);

    overflow:hidden;
}

.dashboard-top{
    background:#111419;
    padding:15px 19px;

    display:flex;
    justify-content:space-between;
    align-items:center;

    color:#fff;
}

.dashboard-logo{
    font-weight:800;
    font-size:13px;
}

.dashboard-logo span{
    color:var(--gold);
}

.dashboard-status{
    background:#e9f5ec;
    color:#24783d;
    border-radius:20px;
    padding:5px 10px;
    font-size:9px;
}

.dashboard-body{
    padding:29px;
}

.dashboard-title{
    display:flex;
    justify-content:space-between;
    gap:20px;
    margin-bottom:25px;
}

.dashboard-title h4{
    font-family:"Noto Kufi Arabic",sans-serif;
    font-size:16px;
}

.dashboard-title span{
    font-size:10px;
    color:#777;
}

.score-area{
    display:grid;
    grid-template-columns:155px 1fr;
    gap:25px;
    align-items:center;
}

.score-circle{
    width:135px;
    height:135px;

    border-radius:50%;

    border:13px solid #e5e5e5;
    border-top-color:var(--gold);
    border-right-color:var(--gold);

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}

.score-circle strong{
    font-size:32px;
}

.score-circle small{
    font-size:9px;
    color:#888;
}

.score-bars{
    display:grid;
    gap:11px;
}

.score-bar{
    height:9px;
    background:#eee;
    border-radius:10px;
    overflow:hidden;
}

.score-bar span{
    display:block;
    height:100%;
    background:var(--gold);
    border-radius:10px;
}

.score-bar:nth-child(1) span{width:72%;}
.score-bar:nth-child(2) span{width:54%;}
.score-bar:nth-child(3) span{width:81%;}
.score-bar:nth-child(4) span{width:44%;}

.dash-stats{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    margin-top:27px;
    padding-top:22px;
    border-top:1px solid #eee;
}

.dash-stat{
    text-align:center;
    border-left:1px solid #eee;
}

.dash-stat:last-child{
    border-left:0;
}

.dash-stat strong{
    display:block;
    font-size:17px;
}

.dash-stat small{
    color:#888;
    font-size:9px;
}

/* project info */

.project-info{
    padding:55px 45px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.project-badge{
    display:inline-block;
    align-self:flex-start;

    padding:7px 12px;

    border-radius:20px;

    background:rgba(201,146,46,.15);
    border:1px solid rgba(201,146,46,.35);

    color:var(--gold-light);

    font-size:11px;
    font-weight:700;

    margin-bottom:22px;
}

.project-info h3{
    font-family:"Noto Kufi Arabic",sans-serif;
    font-size:32px;
    line-height:1.5;
}

.project-info h3 span{
    color:var(--gold);
}

.project-info p{
    margin-top:18px;
    color:#bbae9f;
    font-size:14px;
    line-height:2.1;
}

.project-features{
    margin:25px 0;
    display:grid;
    gap:10px;
}

.project-feature{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:12px;
    color:#ddd1c4;
}

.project-feature:before{
    content:"✓";
    width:22px;
    height:22px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;
    background:var(--gold);
    color:#fff;

    font-size:10px;
}

.project-link{
    align-self:flex-start;

    padding:14px 22px;

    background:var(--gold);
    color:#fff;

    border-radius:10px;

    font-size:13px;
    font-weight:700;

    margin-top:8px;

    transition:.25s;
}

.project-link:hover{
    background:#fff;
    color:var(--dark);
}

/* =====================================================
   WHY US
===================================================== */

.why{
    background:#fff;
}

.why-grid{
    display:grid;
    grid-template-columns:1fr .9fr;
    gap:85px;
    align-items:center;
}

.feature-list{
    display:grid;
    gap:13px;
    margin-top:34px;
}

.feature-box{
    display:grid;
    grid-template-columns:55px 1fr;
    gap:17px;
    align-items:center;

    padding:18px;

    background:var(--cream);

    border:1px solid var(--border);
    border-radius:15px;
}

.feature-number{
    width:50px;
    height:50px;

    border-radius:13px;

    background:var(--gold);

    color:#fff;

    display:flex;
    align-items:center;
    justify-content:center;

    font-weight:800;
}

.feature-box h4{
    font-family:"Noto Kufi Arabic",sans-serif;
    font-size:14px;
}

.feature-box p{
    font-size:12px;
    color:var(--muted);
    line-height:1.8;
    margin-top:3px;
}

/* visual right */

.why-visual{
    min-height:490px;

    border-radius:30px;

    background:
    linear-gradient(145deg,#2b2017,#17110c);

    display:flex;
    flex-direction:column;

    justify-content:center;
    align-items:center;

    padding:45px;

    text-align:center;

    border:1px solid rgba(201,146,46,.45);
}

.why-symbol{
    width:115px;
    height:115px;

    border-radius:50%;

    border:2px solid var(--gold);

    display:flex;
    align-items:center;
    justify-content:center;

    color:var(--gold);

    font-size:43px;

    margin-bottom:28px;
}

.why-visual h3{
    color:#fff;
    font-family:"Noto Kufi Arabic",sans-serif;
    font-size:26px;
}

.why-visual p{
    color:#b7aa9c;
    font-size:13px;
    margin-top:12px;
}

.why-tags{
    display:flex;
    justify-content:center;
    gap:8px;
    flex-wrap:wrap;
    margin-top:25px;
}

.why-tags span{
    padding:8px 12px;

    border-radius:20px;

    border:1px solid rgba(255,255,255,.13);

    color:#d5c9bb;

    font-size:10px;
}

/* =====================================================
   PROCESS
===================================================== */

.process-section{
    background:#f0e9dd;
}

.process{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    margin-top:50px;

    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
}

.process-item{
    padding:40px 27px;
    min-height:280px;
    border-left:1px solid var(--border);
}

.process-item:last-child{
    border-left:0;
}

.process-number{
    color:var(--gold);
    font-size:28px;
    font-weight:800;
    display:block;
    margin-bottom:31px;
}

.process-item h3{
    font-family:"Noto Kufi Arabic",sans-serif;
    font-size:16px;
    margin-bottom:12px;
}

.process-item p{
    color:var(--muted);
    font-size:13px;
}

/* =====================================================
   CONTACT
===================================================== */

.contact{
    background:linear-gradient(120deg,#20170f,#302218);
    color:#fff;
}

.contact-grid{
    display:grid;
    grid-template-columns:1fr .9fr;
    align-items:center;
    gap:90px;
}

.contact .label{
    color:var(--gold-light);
}

.contact h2{
    font-family:"Noto Kufi Arabic",sans-serif;
    font-size:clamp(34px,5vw,55px);
    line-height:1.55;
}

.contact h2 span{
    color:var(--gold-light);
}

.contact p{
    margin-top:18px;
    color:#bcafa2;
}

.contact-list{
    display:grid;
    gap:13px;
}

.contact-card{
    min-height:88px;

    display:grid;
    grid-template-columns:56px 1fr;
    align-items:center;

    gap:17px;

    padding:16px 19px;

    border-radius:16px;

    background:rgba(255,255,255,.055);

    border:1px solid rgba(255,255,255,.1);

    transition:.25s;
}

.contact-card:hover{
    border-color:var(--gold);
    transform:translateX(-4px);
}

.contact-icon{
    width:54px;
    height:54px;

    border-radius:14px;

    background:var(--gold);

    display:flex;
    align-items:center;
    justify-content:center;

    color:#fff;

    font-weight:800;
}

.contact-card small{
    display:block;
    color:#a99b8f;
    font-size:10px;
}

.contact-card strong{
    color:#fff;
    direction:ltr;
    display:inline-block;
    font-size:15px;
}

/* =====================================================
   FOOTER
===================================================== */

.footer{
    background:#15100c;
    padding:42px 0;
}

.footer-inner{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:30px;
}

.footer-brand{
    display:flex;
    align-items:center;
    gap:14px;
}

.footer-brand img{
    width:65px;
    height:65px;
    object-fit:contain;
}

.footer-brand h3{
    color:#fff;
    font-family:"Noto Kufi Arabic",sans-serif;
    font-size:13px;
}

.footer-brand span{
    display:block;
    color:var(--gold);
    font-size:9px;
}

.copyright{
    color:#887c70;
    font-size:10px;
}

/* =====================================================
   FLOATING
===================================================== */

.floating{
    position:fixed;
    bottom:22px;
    left:22px;
    z-index:500;
    display:grid;
    gap:9px;
}

.floating a{
    width:51px;
    height:51px;
    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    color:#fff;
    font-size:11px;
    font-weight:800;

    box-shadow:0 8px 25px rgba(0,0,0,.18);
}

.wa{
    background:#25d366;
}

.em{
    background:var(--gold);
}

/* =====================================================
   RESPONSIVE
===================================================== */

@media(max-width:1000px){

    .navbar{
        min-height:84px;
    }

    .brand img{
        width:58px;
        height:58px;
    }

    .brand-title{
        font-size:13px;
    }

    .menu{
        display:block;
    }

    .nav{
        display:none;

        position:absolute;
        top:84px;
        right:0;

        width:100%;

        padding:18px 5%;

        flex-direction:column;
        align-items:stretch;

        background:#fbf8f2;

        border-bottom:1px solid var(--border);
    }

    .nav.open{
        display:flex;
    }

    .nav a{
        display:block;
        width:100%;
    }

    .hero-grid,
    .project,
    .why-grid,
    .contact-grid{
        grid-template-columns:1fr;
    }

    .heading-grid{
        grid-template-columns:1fr;
        gap:20px;
    }

    .services-grid{
        grid-template-columns:1fr 1fr;
    }

    .project-info{
        padding:45px 35px;
    }

    .process{
        grid-template-columns:1fr 1fr;
    }

    .quick-grid{
        grid-template-columns:1fr 1fr;
    }

}

@media(max-width:650px){

    .brand-title{
        font-size:11px;
    }

    .brand-subtitle{
        font-size:8px;
    }

    .hero{
        padding:55px 0;
    }

    .hero h1{
        font-size:34px;
    }

    .hero p{
        font-size:14px;
    }

    .hero-actions{
        display:grid;
    }

    .btn{
        width:100%;
    }

    .hero-logo{
        min-height:340px;
        padding:28px;
        border-radius:24px;
    }

    .section{
        padding:75px 0;
    }

    .title{
        font-size:29px;
    }

    .description{
        font-size:14px;
    }

    .services-grid{
        grid-template-columns:1fr;
    }

    .service{
        min-height:auto;
    }

    .project-preview{
        min-height:auto;
        padding:18px;
    }

    .dashboard-body{
        padding:18px;
    }

    .score-area{
        grid-template-columns:110px 1fr;
        gap:15px;
    }

    .score-circle{
        width:100px;
        height:100px;
        border-width:10px;
    }

    .score-circle strong{
        font-size:25px;
    }

    .project-info{
        padding:35px 25px;
    }

    .project-info h3{
        font-size:25px;
    }

    .why-visual{
        min-height:350px;
    }

    .process{
        grid-template-columns:1fr;
    }

    .process-item{
        border-left:0;
        border-bottom:1px solid var(--border);
        min-height:auto;
    }

    .process-item:last-child{
        border-bottom:0;
    }

    .contact h2{
        font-size:33px;
    }

    .footer-inner{
        flex-direction:column;
        text-align:center;
    }

}



/* aluqab-cinematic-v21.css — archived V2.x */

/* ======================================
   ALUQAB SOFTWARE
   CINEMATIC ROYAL UI V2.1
   ====================================== */

:root {
  --black: #050d1e;
  --black-soft: #08132b;
  --dark: #0b1934;
  --dark-card: #102441;
  --dark-light: #153354;

  --gold: #e6aa47;
  --gold-bright: #ffd781;
  --gold-light: #fff1cf;

  --royal: #143d85;
  --turquoise: #39d7dc;
  --turquoise-soft: #85edf0;

  --gray: #b8cadd;

  --border-dark: rgba(113,207,232,.18);
  --border-gold: rgba(230,170,71,.36);

  --shadow-dark:
    0 32px 75px rgba(1,8,24,.45);
}

/* GLOBAL */

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}

body {
  font-family:
    'IBM Plex Sans Arabic',
    'Noto Kufi Arabic',
    sans-serif;

  color: #f2f8ff;

  background:
    radial-gradient(
      ellipse at 90% 3%,
      rgba(11,98,153,.30),
      transparent 33%
    ),
    radial-gradient(
      ellipse at 5% 35%,
      rgba(16,132,153,.13),
      transparent 38%
    ),
    #050d1e;
}

::selection {
  background: #35c8d7;
  color: #081526;
}

/* NAVIGATION */

.header {
  background: rgba(5,15,34,.82);

  border-bottom:
    1px solid rgba(101,214,231,.20);

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  box-shadow:
    0 12px 38px rgba(0,8,23,.21);
}

.brand-title {
  color: #ffffff;
}

.brand-subtitle {
  color: #a8cedd;
}

/* HERO */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  background:
    linear-gradient(
      120deg,
      #050f25,
      #082545 58%,
      #083f4b
    );
}

.hero::before {
  content: "";

  position: absolute;
  inset: -18%;

  pointer-events: none;
  z-index: 0;

  background:
    radial-gradient(
      circle at 75% 44%,
      rgba(37,206,218,.19),
      transparent 24%
    ),
    radial-gradient(
      circle at 16% 72%,
      rgba(230,170,71,.12),
      transparent 30%
    );

  animation:
    alqAmbient 13s ease-in-out infinite alternate;
}

.hero > * {
  position: relative;
  z-index: 1;
}

.hero h1 {
  font-family:
    'Noto Kufi Arabic',
    'IBM Plex Sans Arabic',
    sans-serif;

  font-size: clamp(2.15rem,4.3vw,4.7rem);
  line-height: 1.35;

  text-shadow:
    0 10px 45px rgba(0,0,0,.24);
}

.hero p {
  color: #d6e7f3;
  line-height: 2;
}

/* LOGO */

.hero img[src*="logo"] {
  filter:
    drop-shadow(
      0 20px 38px rgba(21,198,220,.23)
    );

  animation:
    alqFloat 7s ease-in-out infinite;
}

/* HEADINGS */

.section .title,
.section h2 {
  letter-spacing: -.025em;
}

.section .description {
  line-height: 1.95;
}

.label {
  color: #73dae3;
}

/* PREMIUM CARDS */

:is(
  .quick-item,
  .service,
  .project,
  .feature-box,
  .process-item,
  .contact-card
) {
  border:
    1px solid rgba(103,198,226,.22);

  border-radius: 22px;

  background:
    linear-gradient(
      145deg,
      rgba(22,52,83,.92),
      rgba(8,24,48,.98)
    );

  box-shadow:
    0 20px 50px rgba(0,5,19,.27),
    inset 0 1px 0 rgba(255,255,255,.06);

  transition:
    border-color .3s ease,
    box-shadow .3s ease,
    transform .3s ease;
}

:is(
  .quick-item,
  .service,
  .project,
  .feature-box,
  .process-item,
  .contact-card
):hover {
  border-color:
    rgba(65,218,226,.58);

  box-shadow:
    0 27px 65px rgba(0,5,19,.42),
    0 0 36px rgba(52,188,211,.08);
}

/* CARD LIGHTING */

.service,
.project {
  position: relative;
  isolation: isolate;
}

.service::before,
.project::before {
  content: "";

  position: absolute;
  inset: 0;
  z-index: 0;

  border-radius: inherit;
  pointer-events: none;

  background:
    radial-gradient(
      340px circle at
      var(--mx,50%) var(--my,50%),
      rgba(68,224,225,.12),
      transparent 74%
    );

  opacity: 0;
  transition: opacity .3s ease;
}

.service:hover::before,
.project:hover::before {
  opacity: 1;
}

.service > *,
.project > * {
  position: relative;
  z-index: 1;
}

/* PROJECT SHOWCASE */

.works {
  background:
    linear-gradient(
      180deg,
      rgba(5,13,30,.2),
      rgba(8,27,53,.55)
    );
}

.project-preview {
  border-radius: 16px;

  box-shadow:
    inset 0 0 0 1px
    rgba(133,216,228,.13);
}

/* BUTTONS */

.btn,
.project-link,
.contact-link {
  border-radius: 14px;

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.btn-gold {
  background:
    linear-gradient(
      120deg,
      #d99d3d,
      #ffdf8b
    );

  color: #06172a;

  box-shadow:
    0 12px 32px rgba(226,164,64,.23);
}

.btn:hover,
.project-link:hover,
.contact-link:hover {
  transform: translateY(-3px);
}

:is(a,button,input,textarea):focus-visible {
  outline: 3px solid #69e5ec;
  outline-offset: 4px;
}

/* SCROLL EFFECT */

.alq-reveal {
  transition:
    opacity .8s ease,
    transform .8s cubic-bezier(.22,1,.36,1);
}

.alq-motion .alq-reveal:not(.alq-visible) {
  opacity: 0;
  transform: translateY(24px);
}

.alq-motion .alq-reveal.alq-visible {
  opacity: 1;
  transform: translateY(0);
}

/* PROGRESS BAR */

.alq-progress {
  position: fixed;
  top: 0;
  right: 0;

  width: 0;
  height: 3px;
  z-index: 9999;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      #36d9e2,
      #f5bd60
    );
}

/* ANIMATIONS */

@keyframes alqAmbient {
  from {
    transform: translate3d(-2%,1%,0);
  }
  to {
    transform: translate3d(2%,-2%,0);
  }
}

@keyframes alqFloat {
  0%,100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-9px);
  }
}

/* MOBILE */

@media(max-width:768px) {

  .hero h1 {
    font-size: clamp(2rem,7vw,3.1rem);
    line-height: 1.5;
  }

  .service,
  .project,
  .contact-card {
    border-radius: 17px;
  }
}

/* ACCESSIBILITY */

@media(prefers-reduced-motion:reduce) {

  html {
    scroll-behavior: auto;
  }

  .hero::before,
  .hero img[src*="logo"] {
    animation: none !important;
  }

  .alq-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}



/* aluqab-contrast-v211.css — archived V2.x */

/* ALUQAB CINEMATIC V2.1.1 */
/* PREVIEW CONTRAST REPAIR */

/* HERO TITLE */

.hero h1 {
  color: #f4f9ff !important;

  text-shadow:
    0 4px 25px rgba(0,0,0,.28);
}

.hero p {
  color: #dceaf5 !important;
}

/* DARK SECTION HEADINGS */

#services h2,
#services .title,
#services h3,
#services .service h3,
.section:not(.why):not(.process-section):not(.contact) h2 {
  color: #f5f9ff !important;
}

/* SECTION DESCRIPTIONS */

#services .description,
#services > .container p {
  color: #d4e3f0 !important;
}

/* SERVICE CARDS */

.service {
  color: #edf6ff;

  background:
    linear-gradient(
      145deg,
      #173555,
      #0b203b
    ) !important;

  border:
    1px solid rgba(84,204,225,.27);
}

.service h3,
.service h4 {
  color: #ffffff !important;

  font-size: clamp(
    1.05rem,
    1.5vw,
    1.28rem
  );

  font-weight: 700;
}

.service p,
.service li,
.service small {
  color: #d2e2ef !important;
  line-height: 1.9;
}

/* QUICK INFORMATION */

.quick-item {
  color: #f4f9ff !important;
}

.quick-item p,
.quick-item span,
.quick-item strong,
.quick-item small {
  color: #e4f1fa !important;
}

/* PROJECT TEXT */

.project-info h3,
.project-info h4 {
  color: #ffffff !important;
}

.project-info p {
  color: #d9e7f2 !important;
  line-height: 1.9;
}

/* NAVIGATION */

.nav a {
  font-weight: 600;
}

/* TEXT RENDERING */

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* MOBILE */

@media (max-width: 768px) {

  .hero h1 {
    line-height: 1.45;
  }

  .service h3 {
    font-size: 1.12rem;
  }

}



/* aluqab-cinematic-v22.css — archived V2.x */
/* ALUQAB SOFTWARE — Cinematic Art Direction V2.2
 * Preview-only override. No external assets or runtime dependencies.
 * Bespoke layer; NOT a distribution of Skiper / Vengeance / Animmaster source.
 */
:root {
  --alq-ink:#04101f; --alq-deep:#061a2d; --alq-navy:#0b2845;
  --alq-ice:#f5faff; --alq-muted:#bfd4e6; --alq-teal:#51e5d9;
  --alq-gold:#f3bd65; --alq-sand:#e8d4b5;
  --alq-line:rgba(111,212,224,.19);
  --alq-shadow:0 28px 80px rgba(0,8,22,.38);
}
html {scroll-padding-top:100px}
body {overflow-x:clip; background:#03101f; color:var(--alq-ice); font-family:'IBM Plex Sans Arabic','Noto Kufi Arabic',sans-serif}
body::selection {color:#051427;background:#62e4de}
/* NAV / VENGEANCE-INSPIRED NAVIGATION PRESENTATION */
.header {position:sticky;top:0;z-index:1050;background:rgba(2,15,31,.77)!important;border-bottom:1px solid rgba(107,198,228,.16)!important;box-shadow:0 10px 40px rgba(1,8,20,.26)!important;backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%)}
.header .navbar {min-height:74px;gap:clamp(12px,2vw,32px)}
.header .brand img {filter:drop-shadow(0 0 14px rgba(255,193,77,.22))}
.header .nav a {position:relative;font-size:clamp(.88rem,1vw,1.04rem);letter-spacing:0;transition:color .24s ease}
.header .nav a::after {content:"";position:absolute;right:0;left:0;bottom:-8px;height:2px;transform:scaleX(0);transform-origin:right center;background:linear-gradient(90deg,var(--alq-gold),var(--alq-teal));transition:transform .32s cubic-bezier(.2,.8,.2,1)}
.header .nav a:hover::after,.header .nav a:focus-visible::after {transform:scaleX(1)}
/* CINEMATIC HERO */
.hero {min-height:clamp(570px,78vh,880px);display:flex;align-items:center;isolation:isolate;position:relative;overflow:hidden;padding-block:clamp(84px,9vw,148px);background:linear-gradient(117deg,#041123 0%,#081b36 48%,#053b47 100%)!important}
.hero::before {content:"";position:absolute;inset:-20%;z-index:0;pointer-events:none;background:radial-gradient(circle at 75% 28%,rgba(35,207,209,.22),transparent 33%),radial-gradient(circle at 20% 76%,rgba(248,172,66,.15),transparent 34%),radial-gradient(circle at 49% 12%,rgba(24,71,151,.24),transparent 42%)!important;animation:alq-ambient-v22 13s ease-in-out infinite alternate}
.hero::after {content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.35;background-image:linear-gradient(rgba(126,197,231,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(126,197,231,.12) 1px,transparent 1px);background-size:54px 54px;mask-image:linear-gradient(100deg,transparent 5%,black 56%,transparent 98%);transform:perspective(700px) rotateX(13deg) scale(1.25)}
.hero > *:not(.alq-cosmos) {position:relative;z-index:2}
.hero .hero-grid {width:100%;gap:clamp(35px,7vw,120px);align-items:center}
.hero h1 {font-size:clamp(2.65rem,5.2vw,6.1rem)!important;font-weight:800;line-height:1.27!important;letter-spacing:-.055em;color:#f8fbff!important;text-shadow:0 12px 44px rgba(0,7,20,.46)}
.hero h1 :is(span,strong,em) {background-image:linear-gradient(112deg,#fff0c0 4%,#f9bf61 43%,#df9340 85%)!important;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hero p {font-size:clamp(1.03rem,1.28vw,1.24rem);line-height:2.1!important;color:#cfe0ed!important;max-width:670px}
.hero .hero-actions {gap:14px;margin-block-start:25px;flex-wrap:wrap}
.hero .hero-actions .btn {min-height:51px;display:inline-flex;align-items:center;justify-content:center;padding-inline:28px;border-radius:14px;font-size:1rem;font-weight:700}
.hero .btn-gold {background:linear-gradient(120deg,#d99935,#ffe0a0 55%,#f0b358)!important;color:#10243c!important;box-shadow:0 10px 35px rgba(245,182,88,.24),inset 0 1px 0 rgba(255,255,255,.45)}
.hero .btn-light {background:rgba(235,248,255,.08)!important;color:#f8fcff!important;border:1px solid rgba(230,244,250,.31);backdrop-filter:blur(9px)}
.hero .btn:hover {transform:translateY(-4px);box-shadow:0 16px 42px rgba(35,183,196,.19)}
.alq-cosmos {position:absolute;z-index:1;inset:0;overflow:hidden;pointer-events:none;opacity:.95}
.alq-cosmos .alq-orb {position:absolute;width:min(43vw,610px);aspect-ratio:1;border:1px solid rgba(74,227,226,.14);border-radius:50%;left:var(--alq-lx,15%);top:var(--alq-ty,10%);box-shadow:0 0 0 26px rgba(67,197,202,.019),0 0 0 68px rgba(239,174,77,.015),inset 0 0 58px rgba(52,191,213,.045);animation:alq-orbit 32s linear infinite}
.alq-cosmos .alq-orb::after {content:"";position:absolute;top:4%;right:20%;width:12px;height:12px;border-radius:50%;background:var(--alq-gold);box-shadow:0 0 24px 7px rgba(255,184,69,.3)}
.alq-cosmos .alq-beam {position:absolute;width:65%;height:1px;right:-8%;top:37%;transform:rotate(-27deg);background:linear-gradient(90deg,transparent,rgba(92,224,223,.45),transparent);filter:blur(.3px);animation:alq-beam 9s ease-in-out infinite alternate}
.alq-cosmos .alq-particle {position:absolute;right:var(--alq-x);top:var(--alq-y);width:var(--alq-size);height:var(--alq-size);border-radius:50%;background:rgba(177,246,246,.75);box-shadow:0 0 14px rgba(62,226,236,.5);animation:alq-drift var(--alq-time) ease-in-out infinite alternate;animation-delay:var(--alq-delay)}
.alq-logo-host {position:relative;display:grid;place-items:center;isolation:isolate;min-height:290px}
.alq-logo-host::before {content:"";position:absolute;z-index:-1;width:min(110%,450px);aspect-ratio:1;inset:auto;border:1px solid rgba(255,197,91,.26);border-radius:42% 58% 51% 49%/49% 40% 60% 51%;box-shadow:0 0 90px rgba(58,224,216,.17),inset 0 0 100px rgba(8,166,173,.11);animation:alq-orbit 25s linear infinite}
.alq-logo-host::after {content:"";position:absolute;z-index:-1;width:min(88%,365px);aspect-ratio:1;border:1px dashed rgba(88,217,216,.36);border-radius:50%;animation:alq-orbit 31s linear infinite reverse}
.hero .alq-logo-host img[src*="logo"] {position:relative;z-index:1;max-width:min(100%,390px);width:100%;height:auto;border-radius:27px;border:1px solid rgba(247,183,83,.31);box-shadow:0 0 0 8px rgba(10,32,48,.44),0 0 70px rgba(240,174,67,.13),0 35px 100px rgba(0,5,14,.65);animation:alq-hover 7s ease-in-out infinite;transition:filter .4s ease,box-shadow .4s ease}
.hero .alq-logo-host:hover img[src*="logo"] {filter:drop-shadow(0 0 20px rgba(249,197,95,.26));box-shadow:0 0 0 8px rgba(10,32,48,.4),0 0 90px rgba(46,220,217,.25),0 35px 100px rgba(0,5,14,.7)}
.alq-hero-line {position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,transparent,#3acacb 30%,#efc07b 75%,transparent);opacity:.56;z-index:4;pointer-events:none}
/* PROOF STRIP */
.quick {position:relative;z-index:5;background:linear-gradient(180deg,#071a2e,#081729)!important;border-top:1px solid rgba(92,226,227,.22);border-bottom:1px solid rgba(92,226,227,.12);padding-block:25px!important}
.quick-item {background:linear-gradient(145deg,rgba(21,59,86,.96),rgba(7,33,59,.98))!important;border:1px solid rgba(98,198,221,.25)!important;box-shadow:0 12px 30px rgba(0,6,19,.2)!important;border-radius:18px!important;min-height:100px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px;transition:transform .28s ease,border-color .28s ease}
.quick-item:hover {transform:translateY(-5px);border-color:rgba(243,189,101,.45)!important}
.quick-item :is(strong,b,span) {color:#f5fbff!important}
.quick-item :is(p,small) {color:#bcd1df!important}
/* SECTION SYSTEM — dark sections only */
#services,.works {background:radial-gradient(ellipse at 50% 0%,rgba(27,83,118,.14),transparent 65%),#051528!important}
#services {padding-block:clamp(95px,8vw,140px)}
#services .heading-grid,.works .heading-grid {margin-bottom:clamp(35px,5vw,62px)}
#services h2,.works h2 {font-weight:800;color:#f5fbff!important;font-size:clamp(2rem,3.3vw,3.7rem);line-height:1.43;letter-spacing:-.05em}
#services .description,.works .description {color:#bfd3df!important;font-size:1.04rem;line-height:2.1}
#services .label,.works .label {color:#68e9e0!important}
/* service cards */
.service {overflow:hidden;min-height:292px;position:relative;padding:clamp(25px,2.4vw,38px)!important;border:1px solid rgba(99,205,220,.20)!important;border-radius:25px!important;background:linear-gradient(146deg,rgba(18,52,83,.98),rgba(6,26,49,.98))!important;box-shadow:0 26px 66px rgba(0,7,24,.23),inset 0 1px 0 rgba(240,251,255,.075)!important;transition:border-color .35s ease,box-shadow .35s ease,transform .35s ease!important}
.service::after {content:attr(data-alq-index);position:absolute;bottom:-35px;left:10px;font:800 8rem/1 system-ui,sans-serif;opacity:.055;color:#8fdde0;pointer-events:none;z-index:0}
.service:hover {border-color:rgba(245,183,84,.45)!important;box-shadow:0 32px 75px rgba(0,5,21,.48),0 0 42px rgba(58,203,203,.11)!important}
.service .service-icon {display:grid;place-items:center;width:55px;height:55px;margin-bottom:22px;border-radius:16px!important;color:#09223a!important;background:linear-gradient(145deg,#ffe4ad,#e1a24b)!important;box-shadow:0 12px 24px rgba(245,174,64,.18)}
.service h3 {font-size:clamp(1.22rem,1.5vw,1.62rem)!important;font-weight:800;line-height:1.5;color:#f6fbff!important}
.service p,.service li {font-size:clamp(.95rem,1.01vw,1.09rem)!important;line-height:1.95!important;color:#c6dcea!important}
.service li::marker {color:var(--alq-gold)}
/* project exhibition */
.works {padding-block:clamp(98px,9vw,155px)!important}
.project {position:relative;overflow:hidden;border:1px solid rgba(97,213,224,.22)!important;border-radius:30px!important;background:linear-gradient(130deg,rgba(17,50,80,.98),rgba(7,28,52,.98))!important;box-shadow:0 30px 75px rgba(0,4,15,.33),inset 0 1px 0 rgba(244,251,255,.07)!important;min-height:420px;transition:border-color .38s ease,box-shadow .38s ease,transform .38s ease!important}
.project:not(:last-child) {margin-bottom:clamp(24px,3.5vw,45px)}
.project:hover {border-color:rgba(237,181,90,.55)!important;box-shadow:0 40px 95px rgba(0,5,20,.52),0 0 65px rgba(58,215,212,.10)!important}
.project-preview {position:relative;overflow:hidden!important;isolation:isolate;min-height:360px;border-radius:20px!important;background-color:#0a2138}
.project-preview::after {content:"";position:absolute;inset:0;pointer-events:none;z-index:20;background:linear-gradient(135deg,rgba(255,255,255,.11),transparent 28%,transparent 71%,rgba(19,221,213,.07));border:1px solid rgba(255,255,255,.1);border-radius:inherit}
.project-info {padding:clamp(29px,3vw,45px)!important}
.project-info h3 {font-size:clamp(1.6rem,2.2vw,2.6rem)!important;color:#fbfdff!important;font-weight:800!important;line-height:1.45}
.project-info p,.project-info li {font-size:1.03rem!important;line-height:2.05!important;color:#cadde9!important}
.project-link {display:inline-flex;align-items:center;justify-content:center;min-height:45px;border-radius:13px!important;box-shadow:0 10px 24px rgba(240,176,87,.15)}
/* Content sections - retain natural light palette */
.why,.process-section {position:relative}
.why {background:linear-gradient(125deg,#f9fbfd,#ebf5f7)!important}
.why :is(h2,h3,h4,.title) {color:#092c44!important}
.why p,.why .description {color:#355569!important}
.process-section {background:linear-gradient(155deg,#f3e9da,#f8f4ee)!important}
.process-section :is(h2,h3,h4,.title) {color:#183044!important}
.process-section p,.process-section .description {color:#415567!important}
.why .feature-box,.process-section .process-item {border-radius:21px!important;border:1px solid rgba(73,142,174,.26)!important;background:linear-gradient(145deg,#173c5e,#0c294a)!important;box-shadow:0 18px 40px rgba(11,33,53,.24)!important}
.why .feature-box :is(h3,h4,p,span,strong,small),.process-section .process-item :is(h3,h4,p,span,strong,small) {color:#eff8ff!important}
.contact {background:linear-gradient(115deg,#0b1a2e,#142537 60%,#2c2019)!important;border-block:1px solid rgba(244,184,97,.16);padding-block:clamp(85px,8vw,130px)!important}
.contact h2 {font-weight:800;color:#fff7e9!important;font-size:clamp(2rem,3.1vw,3.5rem)}
.contact p {color:#d5dfeb!important}
.contact-card {border-radius:18px!important;background:rgba(18,52,78,.9)!important;border:1px solid rgba(102,204,211,.25)!important}
.contact-card :is(a,p,span,strong,h3) {color:#f3f9ff!important}
.footer {background:#03101d!important;border-top:1px solid rgba(91,190,211,.16)}
/* Reveal animations without hiding content during screenshots */
.alq-v22-animated {animation:alq-card-enter .82s both cubic-bezier(.18,.75,.22,1)}
@keyframes alq-card-enter {from {opacity:.65;translate:0 26px;filter:blur(4px)}to {opacity:1;translate:0 0;filter:blur(0)}}
@keyframes alq-orbit {to {transform:rotate(360deg)}}
@keyframes alq-hover {0%,100% {transform:translateY(0)}50% {transform:translateY(-12px)}}
@keyframes alq-ambient-v22 {from {transform:translate(-2%,2%) scale(1)}to {transform:translate(2%,-2%) scale(1.06)}}
@keyframes alq-drift {from {transform:translate3d(0,0,0);opacity:.22}to {transform:translate3d(12px,-26px,0);opacity:.92}}
@keyframes alq-beam {from {opacity:.26;translate:0 20px}to {opacity:.7;translate:0 -20px}}
/* Keep links focusable, text sized, and motion optional */
:where(.header,.hero,#services,.works,.contact) :is(a,button):focus-visible {outline:3px solid var(--alq-teal)!important;outline-offset:4px}
@media (max-width:1024px) {
  .hero {min-height:590px;padding-block:80px}
  .hero h1 {font-size:clamp(2.5rem,5.6vw,4.2rem)!important}
  .project {min-height:0}
  .project-preview {min-height:300px}
}
@media (max-width:768px) {
  .header .navbar {min-height:67px}
  .header .nav a::after {display:none}
  .hero {min-height:0;padding-block:86px 65px;text-align:center}
  .hero .hero-grid {gap:35px}
  .hero h1 {font-size:clamp(2.25rem,9vw,3.6rem)!important;line-height:1.38!important}
  .hero p {font-size:1.03rem!important}
  .hero .hero-actions {justify-content:center}
  .alq-logo-host {min-height:235px}
  .hero .alq-logo-host img[src*="logo"] {max-width:270px}
  .alq-cosmos .alq-orb {width:330px;left:-100px;top:32%}
  .service {min-height:0;padding:24px!important}
  .project {min-height:0}
  .project-preview {min-height:240px}
  .project-info {padding:27px!important}
  .project-info h3 {font-size:1.5rem!important}
  .quick {padding-block:18px!important}
  .quick-item {min-height:88px}
}
@media (prefers-reduced-motion:reduce) {
  .alq-cosmos .alq-orb,.alq-cosmos .alq-beam,.alq-cosmos .alq-particle,.alq-logo-host::before,.alq-logo-host::after,.hero::before,.hero .alq-logo-host img[src*="logo"] {animation:none!important}
  .alq-v22-animated {animation:none!important}
  .service,.project,.btn {transition:none!important;transform:none!important}
}


/* aluqab-cinematic-v23.css — archived V2.x */
/* ALUQAB SOFTWARE — V2.3 Visual Polish | PREVIEW ONLY
   Custom CSS atop V2.2. This is NOT source code from Animaster/Skiper/Vengeance.
   No remote assets, no new dependencies. */
:root {
  --container: 1320px;
  --alq-readability: #d7e8f1;
  --alq-sand-gold: #f0c17b;
}
body {
  font-size: 17px;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.container { max-width: var(--container); }
/* Glass navigation with legible clickable targets */
.header .navbar { min-height: 82px; }
.header .nav a {
  font-size: clamp(.98rem, 1.03vw, 1.1rem) !important;
  font-weight: 650;
  padding-block: .45rem;
}
.header .nav a:hover,.header .nav a:focus-visible {color: #f4c87f !important;}
/* Cinematic hero: maintain a balanced logo / heading composition */
.hero { min-height: clamp(590px, 77vh, 810px); }
.hero .hero-grid {gap: clamp(24px, 5vw, 88px);}
.hero .hero-grid > * {min-width: 0;}
.hero h1 {
  font-family: 'Noto Kufi Arabic','IBM Plex Sans Arabic',sans-serif;
  font-size: clamp(2.45rem, 4.4vw, 5.4rem) !important;
  letter-spacing: -.032em !important;
  line-height: 1.43 !important;
  max-width: 19ch;
  overflow-wrap: break-word;
}
.hero p {
  color: #edf6fc !important;
  font-size: clamp(1.05rem, 1.13vw, 1.24rem) !important;
  line-height: 2.03 !important;
  max-width: 600px;
}
.hero .hero-actions .btn {font-size:1.04rem; min-height:54px;}
/* Actual hero pointer spotlight uses variables already supplied by V2.2 JS */
.alq-cosmos::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(340px circle at var(--alq-px,65%) var(--alq-py,55%),rgba(80,231,227,.105),transparent 75%);
  mix-blend-mode:screen;
}
.alq-logo-host {filter:drop-shadow(0 32px 64px rgba(3,9,24,.42));}
/* Stats should be readable, not decoration */
.quick-item {min-height:108px; gap:7px;}
.quick-item strong,.quick-item b {font-size:clamp(1.16rem,1.5vw,1.5rem);font-weight:800;}
.quick-item p,.quick-item small,.quick-item span {font-size:.98rem;line-height:1.7;}
/* Typographic hierarchy for the main offers */
#services,.works {scroll-margin-top: 90px;}
#services .heading-grid,.works .heading-grid {gap: 28px;align-items:end;}
#services h2,.works h2 {
  font-family:'Noto Kufi Arabic','IBM Plex Sans Arabic',sans-serif;
  font-size:clamp(2.1rem,3vw,3.4rem) !important;
  line-height:1.57 !important;
  letter-spacing:-.02em !important;
  max-width:24ch;
}
#services .description,.works .description {font-size:1.08rem !important;color:var(--alq-readability) !important;line-height:2 !important;}
#services .label,.works .label {font-size:.96rem;letter-spacing:0;}
/* Stronger depth and a consistent rhythm */
.service {
  min-height:310px;
  background:linear-gradient(149deg,#193957 0%,#102d4a 42%,#091d37 100%) !important;
  border-color:rgba(121,224,229,.27) !important;
}
.service h3 {font-size:clamp(1.26rem,1.38vw,1.5rem) !important;line-height:1.55 !important;}
.service p,.service li {font-size:1.01rem !important;color:#d7e6f1 !important;line-height:1.9 !important;}
.service::after {opacity:.105;bottom:-19px;font-size:7rem;}
.service:focus-within {border-color:#f4c87f !important;box-shadow:0 0 0 2px rgba(244,200,127,.35),0 25px 65px rgba(0,0,0,.3) !important;}
/* Project showcases should emphasize product screenshots */
.works {padding-block: clamp(88px,7vw,122px) !important;}
.project {min-height:395px;}
.project-preview {min-height:clamp(310px,26vw,435px);}
.project-info {padding:clamp(27px,2.6vw,40px) !important;}
.project-info h3 {font-size:clamp(1.5rem,2.05vw,2.28rem) !important;}
.project-info p,.project-info li {font-size:1.045rem !important;color:#e0ebf2 !important;}
.project-link {font-size:1rem;font-weight:700;}
/* Tone continuity in the lower sections and keep dark tiles readable */
.why,.process-section {padding-block:clamp(76px,6vw,110px);}
.why :is(h2,.title),.process-section :is(h2,.title) {
  font-family:'Noto Kufi Arabic','IBM Plex Sans Arabic',sans-serif;
  font-weight:800;
  font-size:clamp(1.95rem,2.65vw,3.1rem);
  line-height:1.62;
}
.why .description,.process-section .description {font-size:1.06rem;line-height:2;}
.why .feature-box,.process-section .process-item {
  border-color:rgba(91,182,204,.35) !important;
  background:linear-gradient(144deg,#173b5a,#0b2744) !important;
}
.why .feature-box :is(p,span,small,strong),
.process-section .process-item :is(p,span,small,strong) {color:#f0f8ff !important;}
.process-section .process-item {box-shadow:0 15px 32px rgba(13,36,58,.21) !important;}
/* Balance and contrast in the conversion section */
.contact h2 {font-size:clamp(2.1rem,3vw,3.4rem) !important;line-height:1.5;}
.contact p,.contact-card p {color:#e7eef6 !important;}
.contact-card {border-color:rgba(118,219,218,.4) !important;}
.contact-card :is(a,span,strong) {color:#f8fbff !important;}
.footer {color:#d3e2ec;}
/* More polished button states, while retaining meaningful motion restraint */
:is(.btn,.project-link,.contact-link):hover {filter:brightness(1.065);}
:is(a,button):focus-visible {outline:3px solid #69e5ec !important;outline-offset:4px !important;}
@media(max-width:1024px) {
  .hero h1 {font-size:clamp(2.25rem,4.9vw,4.25rem) !important;}
  .hero {min-height:0;}
  .project-preview {min-height:290px;}
}
@media(max-width:768px) {
  .container {width:calc(100% - 32px);max-width:100%;}
  .header .navbar {min-height:68px;}
  .hero {padding-block:70px 56px !important;}
  .hero .hero-grid {gap:24px;}
  .hero h1 {max-width:100%;font-size:clamp(2.05rem,7.8vw,3.2rem) !important;line-height:1.5 !important;}
  .hero p {font-size:1rem !important;line-height:1.95 !important;}
  .quick-item {min-height:88px;}
  .service {min-height:0;}
  .project {min-height:0;}
  .project-preview {min-height:230px;}
  #services,.works {padding-block:70px !important;}
  #services h2,.works h2 {max-width:100%;font-size:clamp(1.78rem,6vw,2.4rem) !important;}
  .why,.process-section {padding-block:65px;}
}
@media(prefers-reduced-motion:reduce) {
  .alq-cosmos::after {display:none;}
  .header .nav a,:is(.btn,.project-link,.contact-link) {transition:none !important;}
}


/* aluqab-logo-v24.css — archived V2.x */

/* ====================================
   ALUQAB SOFTWARE
   CINEMATIC LOGO V2.4
   ==================================== */

/* HERO ALIGNMENT */

.hero .hero-grid {
    align-items: center !important;

    gap: clamp(30px, 5vw, 85px);
}

.hero .hero-grid > * {
    min-width: 0;
}

/* LOGO CONTAINER */

.hero .alq-logo-stage {

    position: relative !important;

    display: flex !important;

    justify-content: center !important;
    align-items: center !important;

    width: min(100%, 420px) !important;

    min-height: 340px;

    margin-inline: auto !important;

    padding: 30px !important;

    background: transparent !important;

    border: none !important;

    border-radius: 50% !important;

    box-shadow: none !important;

    transform: none;

    overflow: visible !important;

    isolation: isolate;
}

/* GOLD + TURQUOISE HALO */

.hero .alq-logo-stage::before {

    content: "";

    position: absolute;

    width: 92%;
    aspect-ratio: 1;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(235,173,62,.20) 0%,
            rgba(33,183,214,.12) 35%,
            rgba(13,56,101,.08) 58%,
            transparent 75%
        );

    filter: blur(19px);

    z-index: 0;

    pointer-events: none;

    animation:
        alqLogoGlow 7s ease-in-out infinite;
}

/* ORBITAL RING */

.hero .alq-logo-stage::after {

    content: "";

    position: absolute;

    width: 82%;
    aspect-ratio: 1;

    border-radius: 50%;

    border:
        1px solid rgba(231,177,73,.20);

    box-shadow:
        0 0 35px rgba(26,190,216,.08),
        inset 0 0 35px rgba(228,164,58,.04);

    z-index: 1;

    pointer-events: none;
}

/* MAIN LOGO */

.hero .alq-logo-stage img {

    position: relative !important;

    display: block !important;

    width: min(100%, 275px) !important;

    height: auto !important;

    max-width: 100% !important;

    object-fit: contain !important;

    margin: 0 auto !important;

    padding: 0 !important;

    background: transparent !important;

    border: none !important;

    border-radius: 0 !important;

    box-shadow: none !important;

    /*
       Visually blend dark image backgrounds.
       Original image remains unchanged.
    */

    mix-blend-mode: screen;

    filter:
        drop-shadow(
            0 0 20px rgba(239,174,53,.23)
        )
        drop-shadow(
            0 18px 40px rgba(0,0,0,.30)
        ) !important;

    z-index: 2;

    animation:
        alqLogoFloat 8s ease-in-out infinite !important;
}

/* HEADER BRAND */

.header .brand img {

    height: 44px !important;

    width: auto !important;

    max-width: 90px !important;

    object-fit: contain !important;

    animation: none !important;

    transform: none !important;
}

/* FLOAT ANIMATION */

@keyframes alqLogoFloat {

    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

/* LIGHT PULSE */

@keyframes alqLogoGlow {

    0%,100% {
        opacity: .65;
        transform: scale(.96);
    }

    50% {
        opacity: 1;
        transform: scale(1.06);
    }
}

/* MOBILE */

@media (max-width: 768px) {

    .hero .hero-grid {

        grid-template-columns: 1fr !important;

        gap: 20px !important;
    }

    .hero .alq-logo-stage {

        width: min(100%, 300px) !important;

        min-height: 240px;

        padding: 18px !important;

        order: -1;
    }

    .hero .alq-logo-stage img {

        width: min(100%, 205px) !important;
    }

}

/* ACCESSIBILITY */

@media (prefers-reduced-motion: reduce) {

    .hero .alq-logo-stage img,
    .hero .alq-logo-stage::before {

        animation: none !important;
    }
}



/* aluqab-logo-v241.css — archived V2.x */

/* ====================================
   ALUQAB SOFTWARE
   CINEMATIC LOGO V2.4.1
   ==================================== */

@media (min-width: 769px) {

  .hero .hero-grid {
    align-items: center !important;
    gap: clamp(30px, 5vw, 75px) !important;
  }

  .hero .alq-logo-stage {
    width: min(100%, 480px) !important;
    min-height: 370px !important;
    padding: 12px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin-inline: auto !important;

    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  .hero .alq-logo-stage img {
    width: min(92%, 355px) !important;
    max-width: 100% !important;
    height: auto !important;

    object-fit: contain !important;

    filter:
      drop-shadow(
        0 0 22px rgba(255, 189, 72, .26)
      )
      drop-shadow(
        0 18px 38px rgba(0, 0, 0, .28)
      ) !important;
  }

}

/* SOFT CINEMATIC HALO */

.hero .alq-logo-stage::before {
  width: 96% !important;

  background:
    radial-gradient(
      circle,
      rgba(240, 176, 55, .23) 0%,
      rgba(28, 189, 212, .13) 37%,
      rgba(9, 48, 91, .06) 60%,
      transparent 75%
    ) !important;

  filter: blur(24px) !important;
}

/* ORBITAL RING */

.hero .alq-logo-stage::after {
  width: 85% !important;

  border-color:
    rgba(232, 180, 76, .13) !important;

  opacity: .65;
}

/* MOBILE */

@media (max-width: 768px) {

  .hero .hero-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .hero .alq-logo-stage {
    width: min(100%, 320px) !important;
    min-height: 260px !important;
    padding: 8px !important;
  }

  .hero .alq-logo-stage img {
    width: min(80vw, 260px) !important;
    max-width: 100% !important;
    height: auto !important;
  }

  .hero .alq-logo-stage::after {
    width: 84% !important;
  }
}

/* REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {

  .hero .alq-logo-stage img,
  .hero .alq-logo-stage::before {
    animation: none !important;
  }
}



/* aluqab-hero-v242.css — archived V2.x */

/* ALUQAB CINEMATIC V2.4.2 */

/* NAVIGATION */

.header .nav a,
.header .menu a {
    color: #dcebf5 !important;
    font-size: 1rem;
    font-weight: 600;
    transition:
        color .25s ease,
        text-shadow .25s ease;
}

.header .nav a:hover,
.header .menu a:hover {
    color: #f5bd60 !important;
    text-shadow:
        0 0 15px rgba(245,189,96,.25);
}

.header .nav a:focus-visible,
.header .menu a:focus-visible {
    outline: 2px solid #72e5e9;
    outline-offset: 5px;
}

/* HERO TEXT */

.hero h1 {
    font-size: clamp(
        2.6rem,
        4.35vw,
        5.4rem
    ) !important;

    line-height: 1.34 !important;
}

.hero p {
    line-height: 1.85 !important;
    color: #e0edf7 !important;
}

/* HERO LAYOUT */

@media (min-width: 901px) {

    .hero .hero-grid {
        align-items: center !important;
        gap: clamp(30px,4vw,75px) !important;
    }

}

/* SHORT DESKTOP SCREENS */

@media (min-width: 901px) and (max-height: 800px) {

    .hero h1 {
        font-size: clamp(
            2.6rem,
            4vw,
            4.5rem
        ) !important;

        line-height: 1.28 !important;
    }

    .hero .alq-logo-stage {
        min-height: 290px !important;
    }

    .hero .hero-actions {
        margin-top: 1.2rem !important;
    }

}

/* MOBILE */

@media (max-width: 768px) {

    .hero h1 {
        font-size: clamp(
            2rem,
            7vw,
            3.2rem
        ) !important;

        line-height: 1.48 !important;
    }

    .hero p {
        line-height: 1.9 !important;
    }

}



/* aluqab-cinematic-v25.css — archived V2.x */
/* ALUQAB SOFTWARE — Cinematic V2.5 • PREVIEW ONLY
   Native HTML/CSS stabilization layer; not original Animaster, Vengeance or Skiper source.
   Goal: no disappearing content, tighter layout, stronger hierarchy and mobile legibility. */
:root{
  --alq25-ink:#062138;
  --alq25-snow:#f5f9fc;
  --alq25-teal:#59d9dc;
  --alq25-gold:#f1bc66;
  --alq25-card:linear-gradient(145deg,#173e62 0%,#0b2746 65%,#091e36 100%);
}
html{scroll-padding-top:92px}
body{font-feature-settings:"kern" 1;text-rendering:optimizeLegibility}
/* Header: clearer labels, consistent touch targets and subtle glass depth. */
.header{border-bottom:1px solid rgba(99,218,226,.2)!important;background:rgba(3,17,35,.9)!important}
.header .navbar{gap:clamp(12px,1.7vw,26px)}
.header .nav a{color:#dae9f3!important;font-size:clamp(.98rem,1.03vw,1.12rem)!important;min-height:44px;display:inline-flex;align-items:center;line-height:1.5}
.header .nav a:hover,.header .nav a:focus-visible{color:#ffd18b!important}
.header .brand{max-width:100%;min-width:0}
/* Keep the approved eagle scale, avoid oversized text on laptop screens. */
.hero .hero-grid{gap:clamp(24px,4.3vw,76px)!important}
.hero h1{line-height:1.3!important;max-width:19ch;margin-block:0 clamp(15px,2.1vw,30px)}
.hero p{max-width:610px;line-height:1.95!important}
.hero .hero-actions{gap:12px;margin-top:24px}
.hero .hero-actions .btn{min-height:49px;border-radius:13px;padding-inline:24px}
/* Service cards: structured rather than cramped. */
#services .service{min-height:290px;padding:clamp(22px,2.1vw,32px)!important;border:1px solid rgba(101,217,227,.28)!important;background:var(--alq25-card)!important;box-shadow:0 22px 48px rgba(0,6,21,.24),inset 0 1px rgba(255,255,255,.08)!important}
#services .service .service-icon{margin-bottom:14px}
#services .service h3{font-size:clamp(1.17rem,1.3vw,1.45rem)!important;line-height:1.55!important;margin-block:0 10px}
#services .service p,#services .service li{color:#dcebf4!important;font-size:clamp(.97rem,1.02vw,1.1rem)!important;line-height:1.8!important}
#services .service:hover,#services .service:focus-within{border-color:rgba(248,198,120,.7)!important;box-shadow:0 30px 58px rgba(0,7,22,.38),0 0 30px rgba(53,209,220,.095)!important}
/* Project gallery: rhythm and content readability over visual noise. */
.works{background:linear-gradient(180deg,#061a30,#08172c)!important}
.works .project{border-color:rgba(102,215,224,.28)!important;min-height:0!important}
.works .project-info{min-width:0;align-content:center}
.works .project-info h3{line-height:1.5!important}
.works .project-info p,.works .project-info li{line-height:1.9!important;color:#e4edf4!important}
.works .project-preview{min-height:clamp(255px,28vw,420px);overflow:hidden}
.works .project-link{min-height:46px;padding-inline:18px}
/* Upper blue-to-ivory sequence: consistent contrast. */
.why{background:linear-gradient(150deg,#f5fafc,#eaf2f6)!important}
.why :is(h2,h3,.title){color:#0c2b42!important}
.why :is(p,.description){color:#365364!important}
.why .feature-box{background:var(--alq25-card)!important}
.why .feature-box :is(h3,h4,p,span,strong,small){color:#f2f8ff!important}
/* Critical regression fix: V2.1 intersection reveals can stay hidden in full-page captures
   and on some scroll flows. Never hide important process-step content. */
.process-section{background:linear-gradient(155deg,#f3e8d8,#f9f5ef)!important;min-height:0!important;padding-block:clamp(76px,7vw,106px)!important}
.process-section :is(h2,h3,.title){color:#172e40!important}
.process-section :is(.description,p){color:#405666!important}
html.alq-motion .process-section .alq-reveal,
html.alq-motion .why .alq-reveal,
.process-section :is(.heading-grid,.label,.title,h2,.description,.process-item),
.why :is(.heading-grid,.label,.title,h2,.description,.feature-box){
  opacity:1!important;visibility:visible!important;transform:none!important;translate:none!important;filter:none!important;
}
.process-section .process-item{min-height:175px!important;background:var(--alq25-card)!important;border:1px solid rgba(98,174,205,.32)!important;box-shadow:0 19px 38px rgba(15,44,63,.19)!important}
.process-section .process-item :is(h3,h4,p,small,span,strong){color:#f1f8ff!important}
.process-section .process-item:hover{border-color:rgba(245,190,104,.75)!important}
/* Contact CTA: a clearly differentiated conversion section. */
.contact{background:linear-gradient(120deg,#061a30,#162f43 60%,#192519)!important}
.contact h2,.contact .title{color:#fff4df!important}
.contact .contact-card{background:linear-gradient(145deg,#143955,#08233c)!important;border:1px solid rgba(83,210,226,.3)!important}
.contact .contact-card :is(p,a,span,strong){color:#eef8fd!important}
.footer{background:#031120!important;color:#cfdfeb!important}
/* Improve visible keyboard navigation. */
:where(.header,.hero,#services,.works,.why,.process-section,.contact) :is(a,button):focus-visible{outline:3px solid #63e2e6!important;outline-offset:4px!important}
/* Actual interactive highlights, no synthetic 3D transformations on touch. */
@media (hover:hover) and (pointer:fine){
  #services .service,.works .project{transition:box-shadow .28s ease,border-color .28s ease,transform .28s ease}
}
@media (max-width:1024px){
  .hero h1{font-size:clamp(2.35rem,5.1vw,4.2rem)!important}
  #services .service{min-height:0}
  .works .project-preview{min-height:270px}
}
@media (max-width:768px){
  .header .navbar{min-height:66px}
  .hero{min-height:0!important;padding-block:62px 56px!important}
  .hero h1{font-size:clamp(2.05rem,7.1vw,3.1rem)!important;line-height:1.45!important;max-width:100%}
  .hero .hero-actions{justify-content:center}
  #services .service{padding:22px!important}
  #services .service p{font-size:1rem!important}
  .works .project-preview{min-height:210px}
  .works .project-info{padding:24px!important}
  .why,.process-section{padding-block:64px!important}
  .process-section .process-item{min-height:0!important}
  .contact{padding-block:64px!important}
}
@media (prefers-reduced-motion:reduce){
  .header .nav a,#services .service,.works .project{transition:none!important;animation:none!important}
}


/* INLINE STYLE FROM V2.5 — legacy compatibility */


/* =====================================================
   ALUQAB AI PROJECT
===================================================== */

#aluqab-ai-project{
    margin-bottom:30px;
}

#aluqab-ai-project .aluqab-ai-preview{
    position:relative;
    overflow:hidden;
    background:
        radial-gradient(
            circle at 20% 15%,
            rgba(201,149,57,.25),
            transparent 32%
        ),
        radial-gradient(
            circle at 80% 85%,
            rgba(72,91,170,.20),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            #070b13,
            #101726 58%,
            #15100a
        );
}

#aluqab-ai-project .aluqab-ai-preview::before{
    content:"";
    position:absolute;
    width:220px;
    height:220px;
    border-radius:50%;
    top:-100px;
    right:-70px;
    border:1px solid rgba(218,169,74,.22);
    box-shadow:
        0 0 0 30px rgba(218,169,74,.025),
        0 0 0 60px rgba(218,169,74,.018);
}

.ai-console{
    position:relative;
    z-index:2;
    width:100%;
    overflow:hidden;
    border-radius:16px;
    border:1px solid rgba(218,169,74,.30);
    background:rgba(7,11,19,.94);
    box-shadow:
        0 24px 70px rgba(0,0,0,.45),
        inset 0 1px rgba(255,255,255,.03);
}

.ai-console-top{
    min-height:58px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    padding:12px 15px;
    border-bottom:1px solid rgba(255,255,255,.07);
    background:rgba(255,255,255,.025);
}

.ai-console-brand{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
}

.ai-console-brand > div{
    min-width:0;
}

.ai-eagle{
    width:35px;
    height:35px;
    flex:0 0 35px;
    display:grid;
    place-items:center;
    border-radius:10px;
    color:#e0ad50;
    background:
        linear-gradient(
            145deg,
            rgba(218,169,74,.18),
            rgba(218,169,74,.04)
        );
    border:1px solid rgba(218,169,74,.35);
}

.ai-console-brand strong,
.ai-console-brand small{
    display:block;
}

.ai-console-brand strong{
    color:#f3d18d;
    font-size:12px;
    letter-spacing:.7px;
}

.ai-console-brand small{
    margin-top:2px;
    color:#8f98a8;
    font-size:8px;
}

.ai-live{
    flex-shrink:0;
    padding:5px 8px;
    border-radius:20px;
    color:#8ce0b0;
    background:rgba(52,180,104,.10);
    border:1px solid rgba(80,205,130,.20);
    font-size:7px;
    letter-spacing:.7px;
}

.ai-console-body{
    padding:20px 16px 16px;
}

.ai-message{
    width:88%;
    margin-bottom:11px;
    padding:11px 13px;
    border-radius:12px;
}

.ai-message span{
    display:block;
    margin-bottom:4px;
    font-size:7px;
    font-weight:700;
}

.ai-message p{
    margin:0;
    font-size:9px;
    line-height:1.9;
}

.ai-user-message{
    margin-right:auto;
    color:#c9cfda;
    background:#151d2b;
    border:1px solid rgba(255,255,255,.06);
}

.ai-user-message span{
    color:#818b9b;
}

.ai-assistant-message{
    margin-left:auto;
    color:#e8dfcf;
    background:
        linear-gradient(
            135deg,
            rgba(180,125,35,.16),
            rgba(180,125,35,.06)
        );
    border:1px solid rgba(218,169,74,.22);
}

.ai-assistant-message span{
    color:#ddb05b;
}

.ai-capabilities{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px;
    margin-top:17px;
}

.ai-capabilities span{
    padding:7px 5px;
    border-radius:7px;
    text-align:center;
    color:#9ba5b4;
    background:rgba(255,255,255,.025);
    border:1px solid rgba(255,255,255,.06);
    font-size:7px;
}

.ai-console-input{
    margin:0 16px 16px;
    min-height:37px;
    padding:7px 8px 7px 12px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    border-radius:10px;
    color:#626d7c;
    background:#0d1420;
    border:1px solid rgba(255,255,255,.08);
    font-size:8px;
}

.ai-console-input strong{
    width:25px;
    height:25px;
    display:grid;
    place-items:center;
    border-radius:7px;
    color:#101010;
    background:#d7a64c;
    font-size:13px;
}

#aluqab-ai-project .project-info h3 span{
    color:var(--gold-light);
}

@media(max-width:650px){

    #aluqab-ai-project{
        margin-bottom:22px;
    }

    #aluqab-ai-project .project-preview{
        min-height:auto;
        padding:22px 16px;
    }

    #aluqab-ai-project .project-info{
        padding:35px 25px;
    }

    .ai-console-body{
        padding:16px 12px 12px;
    }

    .ai-message{
        width:94%;
    }

    .ai-capabilities{
        grid-template-columns:1fr 1fr;
    }

}



/* INLINE STYLE FROM V2.5 — legacy compatibility */


#aluqab-sales-project{
    margin-top:28px;
    margin-bottom:28px;
}

#aluqab-sales-project .aluqab-sales-preview{
    position:relative;
    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(201,146,46,.22),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            #f8f5ee,
            #e8e0d1
        );
}

#aluqab-sales-project .aluqab-sales-preview::before{
    content:"";
    position:absolute;
    left:-100px;
    bottom:-115px;
    width:270px;
    height:270px;
    border-radius:50%;
    border:1px solid rgba(201,146,46,.22);
    box-shadow:
        0 0 0 30px rgba(201,146,46,.035),
        0 0 0 60px rgba(201,146,46,.02);
}

.sales-dashboard{
    position:relative;
    z-index:2;
    width:100%;
    overflow:hidden;

    background:#fff;
    color:#241c15;

    border:
        1px solid rgba(201,146,46,.25);

    border-radius:17px;

    box-shadow:
        0 25px 60px rgba(39,27,16,.18);
}

.sales-topbar{
    min-height:74px;

    padding:13px 18px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;

    background:
        linear-gradient(
            135deg,
            #18110c,
            #342517
        );

    color:#fff;
}

.sales-brand{
    display:flex;
    align-items:center;
    gap:11px;
}

.sales-brand-mark{
    width:43px;
    height:43px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:12px;

    background:
        linear-gradient(
            145deg,
            #e0ae52,
            #9d681d
        );

    color:#fff;

    font-size:22px;
    font-weight:900;
}

.sales-brand strong{
    display:block;
    font-size:12px;
    letter-spacing:.5px;
}

.sales-brand small{
    display:block;
    margin-top:3px;
    color:#cfbfaa;
    font-size:8px;
}

.sales-online{
    padding:6px 9px;

    display:flex;
    align-items:center;
    gap:5px;

    border-radius:20px;

    border:
        1px solid rgba(91,202,139,.3);

    background:
        rgba(91,202,139,.12);

    color:#a4e2bd;

    font-size:8px;
}

.sales-online i{
    width:6px;
    height:6px;
    border-radius:50%;
    background:#63d291;
}

.sales-content{
    padding:22px;
}

.sales-heading{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;

    margin-bottom:18px;
}

.sales-heading small{
    display:block;
    color:#96897d;
    font-size:8px;
}

.sales-heading strong{
    display:block;
    margin-top:2px;
    font-size:15px;
}

.sales-heading > span{
    padding:6px 10px;
    border-radius:8px;

    background:#f4eee4;
    color:#8b6424;

    font-size:8px;
}

.sales-kpis{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:9px;
}

.sales-kpi{
    padding:13px 10px;

    border:
        1px solid #eee6da;

    border-radius:11px;

    background:#fdfcf9;
}

.sales-kpi small{
    display:block;
    color:#8d8175;
    font-size:8px;
}

.sales-kpi strong{
    display:inline-block;
    margin-top:5px;

    color:#2a2119;

    font-size:17px;
}

.sales-kpi span{
    margin-right:3px;
    color:#9a7130;
    font-size:7px;
}

.sales-chart{
    margin-top:14px;
    padding:14px;

    border:
        1px solid #eee6da;

    border-radius:12px;
}

.sales-chart-title{
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.sales-chart-title strong{
    font-size:9px;
}

.sales-chart-title span{
    color:#94887d;
    font-size:7px;
}

.sales-bars{
    height:100px;

    margin-top:16px;

    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:8px;

    border-bottom:
        1px solid #eee7dc;
}

.sales-bars i{
    flex:1;

    min-width:8px;
    max-width:34px;

    display:block;

    border-radius:
        5px 5px 0 0;

    background:
        linear-gradient(
            180deg,
            #dca94b,
            #96631b
        );
}

.sales-modules{
    margin-top:14px;

    display:grid;
    grid-template-columns:
        repeat(4,1fr);

    gap:7px;
}

.sales-modules span{
    padding:8px 4px;

    text-align:center;

    border-radius:8px;

    background:#f5f0e8;
    color:#695a4b;

    font-size:7px;
    font-weight:700;
}


@media(max-width:650px){

    #aluqab-sales-project{
        margin-top:20px;
        margin-bottom:20px;
    }

    #aluqab-sales-project .project-preview{
        min-height:auto;
        padding:18px 12px;
    }

    .sales-content{
        padding:15px;
    }

    .sales-kpis{
        gap:5px;
    }

    .sales-kpi{
        padding:10px 6px;
    }

    .sales-kpi strong{
        font-size:14px;
    }

    .sales-chart{
        padding:10px;
    }

    .sales-bars{
        height:75px;
    }

    .sales-modules{
        grid-template-columns:
            1fr 1fr;
    }

}



/* INLINE STYLE FROM V2.5 — legacy compatibility */


/* منصة الرتيل: نفس هيكل وحجم بطاقة Iraq SecureScore */
#alratil-project{
    margin-top:30px;
}

#alratil-project .alratil-preview{
    background:
        radial-gradient(circle at 22% 18%, rgba(217,169,74,.18), transparent 34%),
        linear-gradient(145deg,#0a4539,#0b2f28 62%,#16251f);
}

.alratil-window{
    width:100%;
    overflow:hidden;
    border-radius:15px;
    background:#f9f3e7;
    border:1px solid rgba(218,178,94,.55);
    box-shadow:0 20px 55px rgba(0,0,0,.30);
}

.alratil-window-top{
    min-height:42px;
    display:flex;
    align-items:center;
    gap:10px;
    padding:8px 13px;
    background:#e8dfcf;
    border-bottom:1px solid #d7ccb9;
}

.alratil-dots{
    display:flex;
    gap:5px;
    flex-shrink:0;
}

.alratil-dots span{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#c99538;
}

.alratil-dots span:first-child{background:#a45e50;}
.alratil-dots span:last-child{background:#4d916b;}

.alratil-address{
    flex:1;
    min-width:0;
    padding:5px 9px;
    border-radius:6px;
    background:#fff;
    color:#817668;
    direction:ltr;
    text-align:left;
    font-size:9px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.alratil-window-body{
    padding:30px 24px;
    text-align:center;
    background:
        radial-gradient(circle at top, rgba(216,173,82,.18), transparent 42%),
        linear-gradient(145deg,#fbf7ed,#eee2c8);
}

.alratil-emblem{
    width:58px;
    height:58px;
    margin:0 auto 10px;
    display:grid;
    place-items:center;
    border-radius:17px;
    background:#073e35;
    color:#d8aa4d;
    border:1px solid #c99539;
    font-size:31px;
}

.alratil-window-body h4{
    margin:0;
    color:#073e35;
    font-family:"Noto Kufi Arabic",sans-serif;
    font-size:30px;
    line-height:1.5;
}

.alratil-window-subtitle{
    margin:4px 0 0;
    color:#7e5a1e;
    font-size:12px;
    font-weight:700;
}

.alratil-window-slogan{
    margin:2px 0 20px;
    color:#6d655a;
    font-size:10px;
}

.alratil-modules{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
    text-align:right;
}

.alratil-modules > div{
    min-width:0;
    padding:11px 12px;
    border:1px solid #dfceaa;
    border-radius:9px;
    background:#fff;
}

.alratil-modules strong,
.alratil-modules span{
    display:block;
    writing-mode:horizontal-tb;
    word-break:normal;
    overflow-wrap:normal;
}

.alratil-modules strong{
    color:#153d34;
    font-size:10px;
}

.alratil-modules span{
    margin-top:2px;
    color:#7f7669;
    font-size:8px;
}

#alratil-project .alratil-info p,
#alratil-project .project-feature,
#alratil-project .alratil-dedication,
#alratil-project .alratil-dedication *{
    writing-mode:horizontal-tb;
    text-orientation:mixed;
    word-break:normal;
    overflow-wrap:normal;
}

.alratil-dedication{
    margin:0 0 22px;
    padding:12px 14px;
    border-right:3px solid var(--gold);
    border-radius:9px;
    background:rgba(255,255,255,.04);
}

.alratil-dedication strong,
.alratil-dedication span{
    display:block;
}

.alratil-dedication strong{
    color:var(--gold-light);
    font-size:11px;
    margin-bottom:4px;
}

.alratil-dedication span{
    color:#bbae9f;
    font-size:11px;
    line-height:1.9;
}

@media(max-width:650px){
    #alratil-project{
        margin-top:22px;
    }

    #alratil-project .project-preview{
        min-height:auto;
        padding:22px 16px;
    }

    #alratil-project .project-info{
        padding:35px 25px;
    }

    .alratil-window-body{
        padding:23px 16px;
    }

    .alratil-modules{
        grid-template-columns:1fr;
    }
}



/* FINAL V3 REFINEMENT */
/* ALUQAB SOFTWARE — V3.0 Cinematic Edition
 * Final, purpose-built design layer after archived V2.x CSS declarations.
 * The original content, navigation and SEO are retained.
 * Interaction style: lightweight spotlight/glow patterns, not third-party component source.
 */
:root {
  --black:#06101f; --black-soft:#071a30; --dark:#092139;
  --dark-card:#102b48; --dark-light:#173a58;
  --gold:#e9ae53; --gold-bright:#ffe09b; --gold-light:#f6d69b;
  --royal:#123d78; --turquoise:#42d3d7; --turquoise-soft:#9cebf1;
  --v3-ink:#eaf5ff; --v3-sub:#b6ccda; --v3-border:rgba(119,205,227,.22);
  --v3-ease:cubic-bezier(.2,.85,.3,1);
}
html {scroll-padding-top:100px;overflow-x:clip}
body.alq-v3-site {
  font-size:16px;line-height:1.8;min-width:320px;
  color:var(--v3-ink);background:#06172c;
  -webkit-font-smoothing:antialiased;
}
body.alq-v3-site .container {width:min(1230px,91.5%)!important}
body.alq-v3-site a,body.alq-v3-site button { -webkit-tap-highlight-color:transparent}
body.alq-v3-site button {cursor:pointer}
.alq-skip-link {position:fixed;top:10px;right:10px;z-index:10000;transform:translateY(-160%);padding:10px 18px;background:#fff;color:#0b243b;font-weight:800;border-radius:12px}
.alq-skip-link:focus {transform:translateY(0)}
.alq-v3-site .header {
  position:sticky!important;top:0!important;z-index:1000!important;
  background:rgba(5,17,34,.88)!important;
  border-bottom:1px solid rgba(127,210,223,.16)!important;
  -webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);
  box-shadow:0 8px 32px rgba(0,5,18,.1)!important;
}
.alq-v3-site .navbar {min-height:83px!important;gap:clamp(16px,2vw,40px)!important}
.alq-v3-site .brand {gap:12px;flex-shrink:0}
.alq-v3-site .brand img {width:57px!important;height:57px!important;object-fit:contain}
.alq-v3-site .brand-title {font-size:clamp(12px,1.05vw,17px)!important;line-height:1.5;color:#f4f8fc!important;white-space:nowrap}
.alq-v3-site .brand-subtitle {font-size:10px!important;color:#99c2d2!important;letter-spacing:.01em}
.alq-v3-site .nav {gap:4px!important;align-items:center}
.alq-v3-site .nav a {position:relative;white-space:nowrap;padding:10px 14px!important;font-size:clamp(13px,.84vw,15px)!important;font-weight:700!important;color:#d7e7f5!important;transition:color .25s,background .25s}
.alq-v3-site .nav a:not(.contact-link)::after {content:"";position:absolute;right:15px;left:15px;bottom:5px;height:2px;transform:scaleX(0);transform-origin:right;background:linear-gradient(90deg,#42d6db,#f4bf69);transition:transform .3s var(--v3-ease)}
.alq-v3-site .nav a:not(.contact-link):hover::after,.alq-v3-site .nav a[aria-current="page"]::after {transform:scaleX(1)}
.alq-v3-site .nav .contact-link {
  margin-inline:8px 0!important;padding:12px 20px!important;
  color:#081829!important;background:linear-gradient(130deg,#f8ca76,#e7a64c)!important;
  border:1px solid rgba(253,230,176,.7);border-radius:13px;
  box-shadow:0 7px 18px rgba(230,160,61,.13);font-weight:800!important
}
.alq-v3-site .nav .contact-link:hover {filter:brightness(1.08);box-shadow:0 9px 26px rgba(229,163,69,.29)}
/* Approved hero: transparent eagle, balanced heading and accessible buttons */
.alq-v3-site .hero {
  overflow:hidden!important;isolation:isolate;min-height:0!important;
  padding:clamp(56px,5.2vw,90px) 0 clamp(62px,5.2vw,92px)!important;
  background:radial-gradient(ellipse at 11% 84%,rgba(220,165,78,.12),transparent 33%),
    radial-gradient(ellipse at 90% 31%,rgba(15,162,173,.21),transparent 35%),
    linear-gradient(112deg,#091728 3%,#08254a 52%,#075267 115%)!important;
  border-bottom:1px solid rgba(104,211,227,.24)!important;
}
.alq-v3-site .hero::before {background:
  linear-gradient(90deg,transparent 97.8%,rgba(120,218,234,.045) 98%),
  linear-gradient(transparent 97.8%,rgba(120,218,234,.045) 98%)!important;
  background-size:80px 80px!important;
  transform:none!important;inset:0!important;opacity:.45;animation:none!important;
}
.alq-v3-site .hero-grid {position:relative;z-index:2;grid-template-columns:1.08fr .92fr!important;gap:clamp(38px,5.5vw,106px)!important;align-items:center!important}
.alq-v3-site .hero .label {font-size:14px!important;color:#a0eff0!important;letter-spacing:.02em;margin-bottom:18px!important}
.alq-v3-site .hero h1 {font-size:clamp(43px,4.15vw,76px)!important;line-height:1.34!important;letter-spacing:-1px!important;margin:0!important;max-width:15ch!important;color:#f9fcff!important;text-shadow:0 16px 50px rgba(0,0,0,.2)!important}
.alq-v3-site .hero h1 span {color:#edb763!important;background:linear-gradient(115deg,#f1b85f,#ffdf9c 58%,#de9242);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.alq-v3-site .hero p {font-size:clamp(15px,1.07vw,18px)!important;line-height:2!important;color:#d5e7f4!important;max-width:635px!important;margin-top:24px!important}
.alq-v3-site .hero-actions {display:flex!important;flex-wrap:wrap!important;gap:14px!important;margin-top:27px!important}
.alq-v3-site .hero-actions .btn {width:auto!important;min-height:54px!important;padding:0 25px!important;border-radius:13px!important;letter-spacing:0;font-size:15px!important}
.alq-v3-site .btn-gold {color:#0d243b!important;background:linear-gradient(120deg,#f5c978,#e9ad53)!important;box-shadow:0 10px 24px rgba(244,181,83,.2)!important}
.alq-v3-site .btn-light {background:rgba(255,255,255,.065)!important;color:#f0f7ff!important;border:1px solid rgba(207,231,240,.36)!important;box-shadow:none!important}
.alq-v3-site .btn:hover {filter:brightness(1.07)}
.alq-v3-site .hero .hero-logo.alq-logo-stage {position:relative!important;border:0!important;background:transparent!important;overflow:visible!important;box-shadow:none!important;display:flex!important;align-items:center!important;justify-content:center!important;width:min(100%,480px)!important;min-height:390px!important;max-height:490px!important;padding:16px!important;margin:auto!important;isolation:isolate}
.alq-v3-site .hero .alq-logo-stage::before {content:"";position:absolute;inset:1%;width:auto!important;height:auto!important;border:0!important;pointer-events:none;z-index:0;opacity:.9!important;background:radial-gradient(circle,rgba(230,168,60,.17),rgba(25,186,201,.11) 35%,transparent 69%)!important;filter:blur(23px)!important}
.alq-v3-site .hero .alq-logo-stage::after {content:"";position:absolute;inset:4%;width:auto!important;height:auto!important;aspect-ratio:1;border-radius:50%;pointer-events:none;border:1px solid rgba(171,214,225,.15)!important;box-shadow:0 0 70px rgba(48,187,207,.07)!important;z-index:0;opacity:.62!important}
.alq-v3-site .hero .alq-logo-stage img {z-index:1;position:relative;display:block;width:min(90%,365px)!important;height:auto!important;max-height:395px;max-width:100%;object-fit:contain!important;border:0!important;mix-blend-mode:normal!important;filter:drop-shadow(0 18px 40px rgba(0,0,0,.25)) drop-shadow(0 0 22px rgba(220,153,43,.19))!important;animation:alqV3Float 8s ease-in-out infinite!important}
@keyframes alqV3Float {0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
/* Hero stars are JS-generated decorative elements */
.alq-v3-stars {position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1}
.alq-v3-stars i {position:absolute;width:2px;height:2px;border-radius:50%;background:#b9eaf3;opacity:.42;box-shadow:0 0 12px rgba(189,226,248,.8)}
.alq-v3-stars i:nth-child(6n) {width:4px;height:4px;background:#f5c57b;opacity:.8}
/* Minimal trust ribbon */
.alq-v3-site .quick {background:linear-gradient(90deg,#0b223d,#123453)!important;border:0!important;border-bottom:1px solid rgba(129,200,226,.15)!important}
.alq-v3-site .quick-grid {gap:0;grid-template-columns:repeat(4,1fr)!important}
.alq-v3-site .quick-item {position:relative;text-align:center;padding:24px 14px!important;background:transparent!important;box-shadow:none!important;border:0!important;border-radius:0!important;transform:none!important}
.alq-v3-site .quick-item:not(:last-child)::after {content:"";position:absolute;left:0;top:25%;height:50%;width:1px;background:rgba(176,221,233,.15)}
.alq-v3-site .quick-item strong {color:#f8fbff!important;font-size:18px!important}
.alq-v3-site .quick-item span {color:#b5cad8!important;font-size:12px!important}
/* Strong visual hierarchy across all content blocks */
.alq-v3-site .section {padding:clamp(78px,7.4vw,120px) 0!important;border-bottom:1px solid rgba(132,190,220,.1)!important}
.alq-v3-site .section .title,.alq-v3-site .section h2.title {font-size:clamp(30px,2.75vw,48px)!important;line-height:1.55!important;letter-spacing:-.6px}
.alq-v3-site .heading-grid {gap:clamp(25px,5vw,90px)!important;margin-bottom:clamp(36px,4.2vw,62px)!important}
.alq-v3-site .section .description {font-size:clamp(14px,1vw,17px)!important;line-height:2.05!important}
.alq-v3-site .label {font-size:13px!important;letter-spacing:.015em}
.alq-v3-site #services {background:radial-gradient(ellipse at 94% 12%,rgba(37,132,175,.1),transparent 47%),#07182b!important}
.alq-v3-site #services .title {color:#f9fcff!important}
.alq-v3-site .services-grid {gap:19px!important}
.alq-v3-site #services .service {
  overflow:hidden;isolation:isolate;position:relative;min-height:315px!important;
  padding:clamp(26px,2.15vw,34px)!important;border-radius:23px!important;
  background:linear-gradient(148deg,#173c5d,#0e2945 53%,#0b223d)!important;
  border:1px solid rgba(130,218,234,.17)!important;
  box-shadow:0 18px 42px rgba(0,8,21,.17),inset 0 1px 0 rgba(240,248,255,.05)!important;
  transform:none!important;transition:transform .32s var(--v3-ease),box-shadow .32s,border-color .32s!important;
}
.alq-v3-site #services .service::before {content:"";position:absolute;inset:-1px;z-index:-1;background:radial-gradient(320px circle at var(--glow-x,50%) var(--glow-y,0%),rgba(75,215,224,.15),transparent 63%);opacity:0;transition:opacity .27s}
.alq-v3-site #services .service:hover::before,.alq-v3-site #services .service:focus-within::before {opacity:1}
.alq-v3-site #services .service:hover {transform:translateY(-7px)!important;border-color:rgba(237,182,96,.58)!important;box-shadow:0 26px 58px rgba(0,6,19,.36),0 0 28px rgba(58,184,222,.08)!important}
.alq-v3-site #services .service::after {content:attr(data-alq-index);position:absolute;left:24px;bottom:5px;font:800 67px/1 "Noto Kufi Arabic",sans-serif;color:rgba(169,211,232,.07);pointer-events:none}
.alq-v3-site #services .service-icon {width:54px;height:54px;border-radius:15px;color:#0b2941!important;background:linear-gradient(138deg,#ffe0a4,#e7af5e)!important;font-size:21px;box-shadow:0 6px 16px rgba(233,172,76,.13)}
.alq-v3-site #services .service h3 {font-size:clamp(17px,1.25vw,21px)!important;line-height:1.65!important;color:#f7fbff!important}
.alq-v3-site #services .service p {font-size:14px!important;color:#cfdfeb!important;line-height:1.95!important}
.alq-v3-site #services .service li {font-size:13px!important;color:#e5eef5!important;line-height:1.7!important}
/* Middle invitation card — confident, conversion-forward */
.alq-v3-site .section:not(#services):not(.works):not(.why):not(.process-section):not(.contact) {background:linear-gradient(110deg,#081b32,#0a2944)!important}
.alq-v3-site .section:not(#services):not(.works):not(.why):not(.process-section):not(.contact) .title {color:#fff!important}
/* High-fidelity product panels */
.alq-v3-site .works {background:linear-gradient(180deg,#061b32,#06172c 35%,#071f38 100%)!important}
.alq-v3-site .works::before {background:radial-gradient(circle,rgba(50,188,198,.11),transparent 67%)}
.alq-v3-site .works-heading {margin-bottom:clamp(32px,4vw,64px)!important}
.alq-v3-site .works .title {color:#f8fcff!important}
.alq-v3-site .works .description {color:#b7cfdb!important}
.alq-v3-site .works .project {position:relative;border:1px solid rgba(131,199,222,.27)!important;border-radius:25px!important;overflow:hidden;grid-template-columns:1.12fr .88fr!important;min-height:360px!important;background:linear-gradient(132deg,#133a5b,#0b2440)!important;box-shadow:0 25px 55px rgba(0,8,24,.3)!important;transform:none!important;transition:border-color .3s,box-shadow .3s!important}
.alq-v3-site .works .project+.project {margin-top:25px!important}
.alq-v3-site .works .project:hover {border-color:rgba(233,183,100,.65)!important;box-shadow:0 30px 70px rgba(0,6,22,.42)!important}
.alq-v3-site .works .project-preview {min-height:360px!important;position:relative;padding:clamp(16px,2.1vw,33px)!important;overflow:hidden!important}
.alq-v3-site .works .project-preview::after {content:"";position:absolute;inset:0;z-index:4;pointer-events:none;border:1px solid rgba(255,255,255,.05);border-radius:inherit}
.alq-v3-site .works .project-info {padding:clamp(26px,3.1vw,48px)!important;position:relative}
.alq-v3-site .works .project-badge {padding:6px 12px;margin-bottom:10px;font-size:11px;color:#f4ce8c!important;background:rgba(221,164,73,.11)!important;border:1px solid rgba(244,193,113,.24)!important}
.alq-v3-site .works .project-info h3 {font-size:clamp(23px,2vw,33px)!important;line-height:1.5!important;color:#fff!important}
.alq-v3-site .works .project-info p {font-size:13.5px!important;color:#d5e5f0!important;line-height:1.9!important;margin-top:14px!important}
.alq-v3-site .works .project-features {margin:20px 0!important;gap:9px!important}
.alq-v3-site .works .project-feature {color:#dceaf3!important;font-size:12px!important}
.alq-v3-site .works .project-link {color:#12253b!important;background:linear-gradient(120deg,#f5cc80,#eab15a)!important;border-radius:10px!important;font-size:13px!important;box-shadow:0 9px 20px rgba(190,133,43,.14)}
.alq-v3-site .works .project-link:hover {color:#072038!important;filter:brightness(1.1)}
/* White contrast section with a much richer visual block */
.alq-v3-site .why {background:linear-gradient(146deg,#f4f9fc,#e5f1f6)!important}
.alq-v3-site .why .title {color:#102d46!important}
.alq-v3-site .why .description {color:#38576c!important}
.alq-v3-site .why-grid {gap:clamp(40px,6vw,105px)!important}
.alq-v3-site .why .feature-box {min-height:81px;background:linear-gradient(130deg,#153957,#0c2844)!important;border-radius:16px!important;border:1px solid rgba(113,200,221,.35)!important;box-shadow:0 9px 24px rgba(22,54,75,.12)!important}
.alq-v3-site .why .feature-number {background:linear-gradient(145deg,#e9ad53,#f3d090)!important;color:#112a45!important}
.alq-v3-site .why .feature-box h4 {font-size:14px!important;color:#fff!important}
.alq-v3-site .why .feature-box p {color:#d7e7f0!important;font-size:12px!important}
.alq-v3-site .why .why-visual {min-height:450px!important;background:radial-gradient(circle at 50% 31%,rgba(227,163,63,.17),transparent 42%),linear-gradient(145deg,#0d243b,#071729)!important;box-shadow:0 26px 58px rgba(31,53,73,.2)!important;border:1px solid rgba(220,169,82,.36)!important}
.alq-v3-site .why .why-visual h3 {color:#f6e2b8!important;font-size:clamp(21px,1.8vw,30px)!important}
.alq-v3-site .why .why-visual p {color:#c0d5e1!important}
.alq-v3-site .why .why-tags span {color:#d7e4ef!important;border-color:rgba(237,204,151,.25)!important}
/* A visible process grid that never depends on scroll observer state. */
.alq-v3-site .process-section {background:linear-gradient(160deg,#f8f3e9,#e9dcc9)!important;min-height:0!important}
.alq-v3-site .process-section .title {color:#112c42!important}
.alq-v3-site .process-section .description {color:#496072!important}
.alq-v3-site .process-section .process {display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:14px!important;margin-top:38px!important;border:0!important}
.alq-v3-site .process-section .process-item {position:relative;display:block;min-height:210px!important;padding:28px 22px!important;border-radius:20px!important;border:1px solid rgba(91,157,182,.21)!important;background:linear-gradient(150deg,#153957,#0e2a48)!important;box-shadow:0 13px 28px rgba(21,50,74,.15)!important}
.alq-v3-site .process-section .process-number {font-size:27px;color:#f2c77d!important;margin-bottom:22px!important;line-height:1.2}
.alq-v3-site .process-section .process-item h3 {color:#fff!important;font-size:15px!important;line-height:1.6!important}
.alq-v3-site .process-section .process-item p {font-size:12.5px!important;color:#d7e5ef!important;margin-top:8px}
.alq-v3-site .process-section .process-item::before {content:"";position:absolute;right:22px;left:22px;top:0;height:2px;background:linear-gradient(90deg,transparent,#d6a153,transparent);opacity:.72}
.alq-v3-site .process-section *, .alq-v3-site .why * {visibility:visible!important;opacity:1!important}
.alq-v3-site .process-section .alq-reveal,.alq-v3-site .why .alq-reveal {transform:none!important}
/* Contact with legible working links */
.alq-v3-site .contact {background:radial-gradient(ellipse at 100% 0%,rgba(22,161,169,.22),transparent 45%),linear-gradient(115deg,#06192e,#102f48 65%,#112c38)!important}
.alq-v3-site .contact h2 {font-size:clamp(31px,3.2vw,53px)!important;line-height:1.55!important;color:#f8fbff!important}
.alq-v3-site .contact h2 span {color:#f6cb81!important}
.alq-v3-site .contact p {color:#c8dce9!important;font-size:15px!important}
.alq-v3-site .contact .contact-card {min-height:86px!important;background:linear-gradient(120deg,rgba(24,75,105,.68),rgba(14,43,67,.76))!important;border:1px solid rgba(125,212,231,.27)!important}
.alq-v3-site .contact .contact-card:hover {border-color:rgba(248,191,101,.73)!important}
.alq-v3-site .contact-card .contact-icon {background:linear-gradient(130deg,#f5ca79,#e9ae55)!important;color:#112d46!important}
.alq-v3-site .contact-card small {color:#b3d5e0!important;font-size:12px!important}
.alq-v3-site .contact-card strong {color:#f4f9fd!important;font-size:14px!important;overflow-wrap:anywhere}
.alq-v3-site .footer {background:#041324!important;border-top:1px solid rgba(124,207,221,.12)!important}
.alq-v3-site .footer-brand img {width:57px;height:57px}
.alq-v3-site .copyright {color:#bbccd7!important;font-size:11px!important}
.alq-v3-site .floating {left:14px;bottom:18px}
.alq-v3-site .floating a {width:47px;height:47px;box-shadow:0 10px 28px rgba(0,0,0,.32)}
.alq-v3-site .floating a:focus-visible,.alq-v3-site a:focus-visible,.alq-v3-site button:focus-visible {outline:3px solid #73e6ed!important;outline-offset:4px!important}
/* Eliminate hiding and transform collisions inherited from old V2.x JS. */
.alq-v3-site .alq-reveal {opacity:1!important;visibility:visible!important;transform:none!important;filter:none!important}
.alq-v3-site .alq-v22-animated {animation:none!important}
.alq-v3-site .alq-progress {height:3px;background:linear-gradient(90deg,#45d8df,#f4bd64)}
@media(max-width:1100px) {
  .alq-v3-site .nav a {padding:9px 9px!important;font-size:13px!important}
  .alq-v3-site .brand-title {font-size:13px!important}
  .alq-v3-site .hero h1 {font-size:clamp(42px,5vw,63px)!important}
  .alq-v3-site .hero .hero-logo.alq-logo-stage {min-height:330px!important}
  .alq-v3-site .hero .alq-logo-stage img {max-width:320px!important}
}
@media(max-width:1000px) {
  .alq-v3-site .header .navbar {min-height:74px!important}
  .alq-v3-site .header .menu {display:grid!important;place-items:center;flex-shrink:0;width:46px;height:46px;border:1px solid rgba(115,205,226,.25);background:rgba(255,255,255,.07)!important;color:#fff!important}
  .alq-v3-site .nav {display:none!important;position:absolute;top:74px!important;right:0;left:0;width:100%;padding:16px max(5vw,18px) 24px!important;background:rgba(6,25,45,.98)!important;backdrop-filter:blur(22px);border-bottom:1px solid rgba(111,206,229,.22);box-shadow:0 18px 25px rgba(0,0,0,.25);flex-direction:column;align-items:stretch!important;gap:5px!important}
  .alq-v3-site .nav.open {display:flex!important}
  .alq-v3-site .nav a {width:100%;padding:12px 16px!important;font-size:15px!important;display:block!important;color:#f1f7fb!important}
  .alq-v3-site .nav .contact-link {margin:10px 0 0!important;display:block!important;text-align:center}
  .alq-v3-site .hero-grid {grid-template-columns:1fr!important;gap:24px!important}
  .alq-v3-site .hero .hero-logo.alq-logo-stage {grid-row:1;max-width:390px;min-height:305px!important}
  .alq-v3-site .hero-grid>div:first-child {grid-row:2;text-align:center}
  .alq-v3-site .hero h1 {max-width:none!important;font-size:clamp(38px,6.5vw,66px)!important;margin-inline:auto!important}
  .alq-v3-site .hero p {margin-inline:auto!important}
  .alq-v3-site .hero-actions {justify-content:center}
  .alq-v3-site .heading-grid {grid-template-columns:1fr!important;gap:17px!important}
  .alq-v3-site .services-grid {grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .alq-v3-site .works .project {grid-template-columns:1fr!important}
  .alq-v3-site .works .project-preview {min-height:320px!important;grid-row:1}
  .alq-v3-site .works .project-info {grid-row:2;padding:35px!important}
  .alq-v3-site .why-grid,.alq-v3-site .contact-grid {grid-template-columns:1fr!important;gap:45px!important}
  .alq-v3-site .process-section .process {grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:620px) {
  html {scroll-padding-top:78px}
  .alq-v3-site .container {width:min(100% - 36px,560px)!important}
  .alq-v3-site .brand img {width:48px!important;height:48px!important}
  .alq-v3-site .brand-title {font-size:11px!important}
  .alq-v3-site .brand-subtitle {font-size:8px!important}
  .alq-v3-site .hero {padding:40px 0 65px!important}
  .alq-v3-site .hero-grid {gap:5px!important}
  .alq-v3-site .hero .hero-logo.alq-logo-stage {min-height:230px!important;width:min(100%,280px)!important;padding:0!important}
  .alq-v3-site .hero .alq-logo-stage img {width:245px!important;max-width:95%!important}
  .alq-v3-site .hero h1 {font-size:clamp(33px,9vw,48px)!important;line-height:1.44!important}
  .alq-v3-site .hero p {font-size:14px!important;line-height:1.95!important;margin-top:18px!important}
  .alq-v3-site .hero-actions {display:grid!important;grid-template-columns:1fr!important;gap:9px!important}
  .alq-v3-site .hero-actions .btn {width:100%!important;min-height:50px!important}
  .alq-v3-site .quick-grid {grid-template-columns:repeat(2,1fr)!important}
  .alq-v3-site .quick-item {padding:20px 6px!important}
  .alq-v3-site .quick-item strong {font-size:15px!important}
  .alq-v3-site .quick-item span {font-size:10px!important}
  .alq-v3-site .section {padding:64px 0!important}
  .alq-v3-site .section .title {font-size:clamp(28px,7.6vw,36px)!important}
  .alq-v3-site .services-grid {grid-template-columns:1fr!important;gap:12px!important}
  .alq-v3-site #services .service {min-height:0!important;padding:25px!important}
  .alq-v3-site .works .project-preview {min-height:210px!important;padding:15px!important}
  .alq-v3-site .works .project-info {padding:24px!important}
  .alq-v3-site .works .project-info h3 {font-size:25px!important}
  .alq-v3-site .works .project-feature {font-size:12px!important}
  .alq-v3-site .why .why-visual {min-height:330px!important}
  .alq-v3-site .process-section .process {grid-template-columns:1fr!important;gap:12px!important}
  .alq-v3-site .process-section .process-item {min-height:0!important;padding:25px!important}
  .alq-v3-site .process-section .process-number {margin-bottom:12px!important}
  .alq-v3-site .contact-card strong {font-size:12px!important}
  .alq-v3-site .footer-inner {flex-direction:column;text-align:center}
  .alq-v3-site .floating {left:10px;bottom:12px}
  .alq-v3-site .floating a {width:41px;height:41px}
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}


/* ========== ALUQAB V3.1 / SINGLE-FILE PREMIUM REFINEMENT ========== */
/* Original V3 visual foundation preserved; no extra CSS requests or frameworks. */
.alq-v31-site {
  --alq31-cyan:#66dce4;
  --alq31-gold:#f2c274;
  --alq31-ease:cubic-bezier(.22,1,.36,1);
}
.alq-v31-site .header { background:rgba(4,18,35,.88)!important; }
.alq-v31-site .nav a:not(.contact-link) {
  border-radius:10px;
}
.alq-v31-site .nav a:not(.contact-link):hover,
.alq-v31-site .nav a[aria-current="location"]:not(.contact-link) {
  background:rgba(86,210,228,.09)!important;
  color:#fff!important;
}
.alq-v31-site .nav a[aria-current="location"]:not(.contact-link)::after {transform:scaleX(1)!important}
.alq-v31-site .hero { background:
  radial-gradient(ellipse at 7% 73%,rgba(238,178,83,.13),transparent 38%),
  radial-gradient(ellipse at 98% 19%,rgba(26,200,213,.25),transparent 44%),
  linear-gradient(110deg,#071727 0%,#08294e 56%,#074b59 110%)!important;
}
.alq-v31-site .hero .label {display:inline-flex;align-items:center;gap:12px}
.alq-v31-site .hero .label::before {content:"";width:28px;height:2px;flex-shrink:0;background:linear-gradient(90deg,#f3bb64,#46dbdf);border-radius:2px}
.alq-v31-site .hero .alq-logo-stage::after {
  border:1px solid rgba(178,219,229,.13)!important;
}
/* SERVICE BENTO — deliberate depth / accessible, no continuously spinning filters */
.alq-v31-site #services { background:
  radial-gradient(ellipse at 84% 10%,rgba(33,164,189,.11),transparent 46%),
  linear-gradient(180deg,#071a2d,#07182b 75%,#081e33)!important;
}
.alq-v31-site .services-grid {gap:22px!important}
.alq-v31-site #services .service {
  padding:clamp(26px,2.3vw,38px)!important;
  min-height:320px!important;
  background:linear-gradient(150deg,rgba(23,63,94,.98),rgba(12,42,69,.98) 54%,rgba(9,32,55,.98))!important;
  border:1px solid rgba(130,212,234,.23)!important;
  border-radius:24px!important;
  box-shadow:inset 0 1px rgba(255,255,255,.06), 0 17px 45px rgba(1,9,24,.23)!important;
  transform:none!important;
  transition:transform .38s var(--alq31-ease),border-color .38s,box-shadow .38s!important;
  will-change:auto;
}
.alq-v31-site #services .service::before {
  z-index:0;
  background:radial-gradient(360px circle at var(--glow-x,50%) var(--glow-y,0%),rgba(95,229,232,.14),transparent 64%);
}
.alq-v31-site #services .service > * {position:relative;z-index:1}
.alq-v31-site #services .service:hover,
.alq-v31-site #services .service:focus-within {
  transform:translateY(-5px)!important;
  border-color:rgba(240,192,113,.64)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.1),0 30px 60px rgba(0,8,22,.42),0 0 28px rgba(42,179,197,.10)!important;
}
.alq-v31-site #services .service-icon {border-radius:17px!important;width:58px;height:58px}
.alq-v31-site #services .service h3 {font-size:clamp(18px,1.3vw,22px)!important;line-height:1.58!important;margin-block:20px 8px!important}
.alq-v31-site #services .service p {font-size:14.5px!important;line-height:2!important}
.alq-v31-site #services .service ul {margin-block:16px 0!important}
.alq-v31-site #services .service li {font-size:13.5px!important;line-height:1.95!important}
/* Showcases — premium framing without altering marketing copy and destinations */
.alq-v31-site .works {background:
  radial-gradient(ellipse at 12% 28%,rgba(29,145,180,.09),transparent 38%),
  linear-gradient(180deg,#061b32,#07182e 50%,#082137)!important}
.alq-v31-site .works .project {
  border-radius:28px!important;
  border:1px solid rgba(144,207,225,.31)!important;
  background:linear-gradient(128deg,#153d60,#0b2845)!important;
  box-shadow:0 22px 56px rgba(0,6,24,.30)!important;
  transition:border-color .35s,box-shadow .35s,transform .35s var(--alq31-ease)!important;
}
.alq-v31-site .works .project + .project {margin-top:30px!important}
.alq-v31-site .works .project:hover,.alq-v31-site .works .project:focus-within {
  border-color:rgba(242,194,115,.7)!important;
  box-shadow:0 34px 72px rgba(0,7,22,.45),0 0 28px rgba(46,192,220,.08)!important;
}
.alq-v31-site .works .project-preview {isolation:isolate}
.alq-v31-site .works .project-preview > * {transition:transform .55s var(--alq31-ease)}
@media (hover:hover) and (pointer:fine) {
  .alq-v31-site .works .project:hover .project-preview > * {transform:scale(1.025)}
}
.alq-v31-site .works .project-info p {font-size:14.5px!important;line-height:2.05!important}
.alq-v31-site .works .project-feature {font-size:13px!important;line-height:1.8!important}
.alq-v31-site .works .project-link {font-weight:800!important;min-height:42px;display:inline-flex;align-items:center;justify-content:center}
/* Purposeful light surfaces (not abrupt white-on-dark strips) */
.alq-v31-site .why {background:linear-gradient(145deg,#edf5f8,#dcecf2)!important}
.alq-v31-site .process-section {background:linear-gradient(145deg,#f3eadc,#e7ddcb)!important}
.alq-v31-site .why .why-visual {border-radius:25px!important}
.alq-v31-site .process-section .process-item {
  border-radius:22px!important;
  transition:transform .3s var(--alq31-ease),box-shadow .3s!important;
}
.alq-v31-site .process-section .process-item:hover {transform:translateY(-4px);box-shadow:0 22px 38px rgba(15,46,68,.19)!important}
.alq-v31-site .contact .contact-card {transition:transform .3s var(--alq31-ease),border-color .3s!important}
.alq-v31-site .contact .contact-card:hover {transform:translateY(-4px)}
@media (max-width:1000px) {
  .alq-v31-site .hero {padding-top:40px!important}
  .alq-v31-site .nav a:not(.contact-link):hover {background:rgba(86,210,228,.13)!important}
}
@media (max-width:620px) {
  .alq-v31-site .section {padding:64px 0!important}
  .alq-v31-site #services .service {padding:26px!important;min-height:0!important}
  .alq-v31-site #services .service h3 {font-size:19px!important}
  .alq-v31-site #services .service p {font-size:14px!important}
  .alq-v31-site .works .project-info p {font-size:14px!important}
  .alq-v31-site .works .project + .project {margin-top:20px!important}
  .alq-v31-site .process-section .process-item {min-height:0!important}
}
@media(prefers-reduced-motion:reduce) {
  .alq-v31-site #services .service,
  .alq-v31-site .works .project,
  .alq-v31-site .works .project-preview > *,
  .alq-v31-site .process-section .process-item {
    transform:none!important;transition:none!important;animation:none!important;
  }
}