/* =====================================================
   Shabihub — AI & IT Company
   Global stylesheet  |  Theme: Blue + Purple
   ===================================================== */

/* ---------- Design tokens ---------- */

:root{

    /* Brand */
    --blue:#1d4ed8;
    --blue-600:#2563eb;
    --blue-400:#60a5fa;
    --indigo:#4f46e5;
    --purple:#7c3aed;
    --purple-400:#a855f7;
    --violet:#c084fc;

    /* Gradients */
    --grad:linear-gradient(135deg,#2563eb 0%,#4f46e5 50%,#7c3aed 100%);
    --grad-soft:linear-gradient(135deg,#eef2ff 0%,#f5f3ff 100%);
    --grad-text:linear-gradient(90deg,#60a5fa,#a855f7);
    --grad-dark:linear-gradient(135deg,#0b0a24 0%,#161046 55%,#2a1064 100%);

    /* Surfaces */
    --ink:#0b0a24;
    --ink-2:#161046;
    --body:#ffffff;
    --muted-bg:#f7f7fd;
    --line:#e8e6f5;

    /* Text */
    --text:#141327;
    --text-soft:#5b6b82;
    --text-invert:#ffffff;
    --text-invert-soft:#c8c6e8;

    /* Shape */
    --r-sm:12px;
    --r-md:18px;
    --r-lg:26px;
    --r-xl:34px;
    --r-pill:999px;

    /* Shadow */
    --sh-sm:0 4px 16px rgba(20,19,39,.06);
    --sh-md:0 10px 30px rgba(20,19,39,.09);
    --sh-lg:0 22px 50px rgba(79,70,229,.18);
    --sh-glow:0 0 40px rgba(124,58,237,.35);

    /* Layout */
    --max:1240px;
    --header-h:78px;
}

/* ---------- Reset ---------- */

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

html{
    scroll-behavior:smooth;
    -webkit-text-size-adjust:100%;
}

body{
    font-family:'Poppins','Segoe UI',system-ui,-apple-system,Arial,sans-serif;
    background:var(--body);
    color:var(--text);
    font-size:16px;
    line-height:1.65;
    overflow-x:hidden;
}

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

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

ul{
    list-style:none;
}

button,
input,
select,
textarea{
    font:inherit;
    color:inherit;
}

h1,h2,h3,h4{
    line-height:1.2;
    font-weight:600;
    letter-spacing:-.4px;
}

/* ---------- Layout helpers ---------- */

.container{
    width:100%;
    max-width:var(--max);
    margin-inline:auto;
    padding-inline:24px;
}

.section{
    padding:96px 0;
}

.section--tight{
    padding:64px 0;
}

.section--muted{
    background:var(--muted-bg);
}

.section--soft{
    background:var(--grad-soft);
}

.section--dark{
    background:var(--grad-dark);
    color:var(--text-invert);
    position:relative;
    overflow:hidden;
}

.section--dark::after{
    content:"";
    position:absolute;
    width:640px;
    height:640px;
    right:-220px;
    top:-260px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(124,58,237,.45),transparent 65%);
    pointer-events:none;
}

/* keep dark-section content above the decorative glow */

.section--dark > .container{
    position:relative;
    z-index:1;
}

.center{
    text-align:center;
}

.section-head{
    max-width:820px;
    margin:0 auto 56px;
    text-align:center;
}

.section-head--left{
    margin-left:0;
    text-align:left;
}

/* ---------- Badge / eyebrow ---------- */

.badge{
    display:inline-block;
    padding:8px 20px;
    margin-bottom:20px;
    border-radius:var(--r-pill);
    background:var(--grad-soft);
    border:1px solid var(--line);
    color:var(--purple);
    font-size:12px;
    font-weight:600;
    letter-spacing:1.6px;
    text-transform:uppercase;
}

.section--dark .badge,
.badge--dark{
    background:rgba(255,255,255,.08);
    border-color:rgba(255,255,255,.16);
    color:var(--violet);
    backdrop-filter:blur(6px);
}

/* ---------- Headings ---------- */

.h-xl{
    font-size:clamp(2.1rem,4.6vw,3.6rem);
    font-weight:600;
}

.h-lg{
    font-size:clamp(1.8rem,3.6vw,2.7rem);
    font-weight:600;
}

.h-md{
    font-size:clamp(1.35rem,2.4vw,1.8rem);
    font-weight:600;
}

.lede{
    margin-top:18px;
    color:var(--text-soft);
    font-size:1rem;
    font-weight:400;
}

.section--dark .lede{
    color:var(--text-invert-soft);
}

.grad-text{
    background:var(--grad-text);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
}

.grad-text--light{
    background:var(--grad);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
}

/* ---------- Buttons ---------- */

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:15px 32px;
    border:none;
    border-radius:var(--r-md);
    background:var(--grad);
    color:#fff;
    font-size:.95rem;
    font-weight:600;
    cursor:pointer;
    transition:transform .3s ease,box-shadow .3s ease,background .3s ease;
    box-shadow:0 10px 26px rgba(79,70,229,.28);
}

.btn:hover{
    transform:translateY(-4px);
    box-shadow:0 18px 38px rgba(124,58,237,.38);
}

.btn i{
    transition:transform .3s ease;
}

.btn:hover i{
    transform:translateX(5px);
}

.btn--ghost{
    background:transparent;
    border:1.6px solid var(--line);
    color:var(--text);
    box-shadow:none;
}

.btn--ghost:hover{
    border-color:var(--purple);
    color:var(--purple);
    box-shadow:0 12px 26px rgba(124,58,237,.14);
}

.btn--ghost-light{
    background:rgba(255,255,255,.06);
    border:1.6px solid rgba(255,255,255,.28);
    color:#fff;
    box-shadow:none;
    backdrop-filter:blur(8px);
}

.btn--ghost-light:hover{
    background:rgba(255,255,255,.14);
    border-color:#fff;
}

.btn--light{
    background:#fff;
    color:var(--purple);
    box-shadow:0 12px 30px rgba(0,0,0,.18);
}

.btn--light:hover{
    background:#fff;
    color:var(--blue);
}

.btn--sm{
    padding:11px 22px;
    font-size:.85rem;
    border-radius:var(--r-sm);
}

.btn--block{
    width:100%;
}

.link-arrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:var(--purple);
    font-size:.9rem;
    font-weight:600;
}

.link-arrow i{
    transition:transform .3s ease;
}

.link-arrow:hover i{
    transform:translateX(5px);
}

/* =====================================================
   TOP BAR
   ===================================================== */

.topbar{
    background:var(--ink);
    color:var(--text-invert-soft);
    font-size:.8rem;
}

.topbar__inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    min-height:42px;
    flex-wrap:wrap;
}

.topbar__meta{
    display:flex;
    align-items:center;
    gap:26px;
    flex-wrap:wrap;
}

.topbar__meta a{
    display:inline-flex;
    align-items:center;
    gap:8px;
    transition:color .25s ease;
}

.topbar__meta a:hover{
    color:#fff;
}

.topbar__meta i{
    color:var(--violet);
}

.topbar__actions{
    display:flex;
    align-items:center;
    gap:18px;
}

.topbar__inquiry{
    color:var(--violet);
    font-weight:600;
}

.topbar__lang{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:3px 12px;
    border:1px solid rgba(255,255,255,.2);
    border-radius:var(--r-pill);
}

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

.site-header{
    position:sticky;
    top:0;
    z-index:900;
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);
    transition:box-shadow .3s ease;
}

.site-header.is-stuck{
    box-shadow:0 6px 24px rgba(20,19,39,.08);
}

.site-header__inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    min-height:var(--header-h);
    max-width:1520px; /* wider than .container's 1240px cap — nine nav items + dropdowns need the room */
}

.brand{
    display:flex;
    align-items:center;
    gap:10px;
    flex-shrink:0;
}

.brand img{
    height:46px;
    width:auto;
}

/* --- Primary nav --- */

.nav__list{
    display:flex;
    align-items:center;
    gap:2px;
}

.nav__item{
    position:relative;
}

.nav__link{
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:10px 11px;
    border-radius:var(--r-sm);
    color:#2b2a45;
    font-size:.83rem;
    font-weight:500;
    white-space:nowrap;
    transition:color .25s ease,background .25s ease;
}

.nav__link i{
    font-size:.6rem;
    transition:transform .25s ease;
}

.nav__link:hover,
.nav__item.is-open > .nav__link{
    color:var(--purple);
    background:var(--grad-soft);
}

.nav__item.is-open > .nav__link i{
    transform:rotate(180deg);
}

.nav__link.is-active{
    color:var(--purple);
    font-weight:600;
}

.nav__link.is-active::after{
    content:"";
    position:absolute;
    left:13px;
    right:13px;
    bottom:2px;
    height:2px;
    border-radius:2px;
    background:var(--grad);
}

/* --- Dropdown --- */

.dropdown{
    position:absolute;
    top:calc(100% + 14px);
    left:0;
    min-width:260px;
    padding:12px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--r-md);
    box-shadow:var(--sh-md);
    opacity:0;
    visibility:hidden;
    transform:translateY(10px);
    transition:opacity .25s ease,transform .25s ease,visibility .25s;
}

.nav__item:hover > .dropdown,
.nav__item.is-open > .dropdown{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.dropdown a{
    display:block;
    padding:9px 14px;
    border-radius:10px;
    color:#3a3956;
    font-size:.85rem;
    transition:background .2s ease,color .2s ease,padding-left .2s ease;
}

.dropdown a:hover{
    background:var(--grad-soft);
    color:var(--purple);
    padding-left:20px;
}

.dropdown__title{
    padding:8px 14px 4px;
    color:var(--purple);
    font-size:.68rem;
    font-weight:700;
    letter-spacing:1.4px;
    text-transform:uppercase;
}

/* --- Header actions / burger --- */

.site-header__actions{
    display:flex;
    align-items:center;
    gap:12px;
}

.burger{
    display:none;
    width:44px;
    height:44px;
    align-items:center;
    justify-content:center;
    border:1px solid var(--line);
    border-radius:var(--r-sm);
    background:#fff;
    color:var(--purple);
    font-size:1.1rem;
    cursor:pointer;
}

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

.hero{
    position:relative;
    padding:110px 0 120px;
    background:var(--grad-dark);
    color:var(--text-invert);
    overflow:hidden;
    isolation:isolate;
}

.hero__bg{
    position:absolute;
    inset:0;
    background-image:url("pngtree-abstract-purple-energy-waves-futuristic-hi-tech-glowing-particles-background-image_15685928.jpg");
    background-size:cover;
    background-position:center;
    opacity:.32;
    transform:scale(1.08);
    filter:blur(2px);
    z-index:-2;
}

.hero__glow{
    position:absolute;
    width:560px;
    height:560px;
    border-radius:50%;
    filter:blur(20px);
    z-index:-1;
    pointer-events:none;
}

.hero__glow--a{
    top:-180px;
    left:-140px;
    background:radial-gradient(circle,rgba(37,99,235,.5),transparent 65%);
}

.hero__glow--b{
    bottom:-220px;
    right:-120px;
    background:radial-gradient(circle,rgba(168,85,247,.45),transparent 65%);
}

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

.hero__eyebrow{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:8px 18px;
    margin-bottom:22px;
    border:1px solid rgba(255,255,255,.18);
    border-radius:var(--r-pill);
    background:rgba(255,255,255,.07);
    font-size:.72rem;
    font-weight:600;
    letter-spacing:2px;
    text-transform:uppercase;
    color:#e9e6ff;
    backdrop-filter:blur(8px);
}

.hero__eyebrow .dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--violet);
    box-shadow:0 0 12px var(--violet);
    animation:pulse 2s infinite;
}

@keyframes pulse{
    0%,100%{opacity:1;transform:scale(1);}
    50%{opacity:.45;transform:scale(.75);}
}

.hero h1{
    font-size:clamp(2.2rem,4.6vw,3.7rem);
    font-weight:600;
}

.hero__text{
    margin:22px 0 34px;
    max-width:560px;
    color:var(--text-invert-soft);
    font-size:1.02rem;
}

.hero__cta{
    display:flex;
    align-items:center;
    gap:16px;
    flex-wrap:wrap;
}

.hero__stats{
    display:flex;
    gap:42px;
    margin-top:52px;
    padding-top:34px;
    border-top:1px solid rgba(255,255,255,.12);
    flex-wrap:wrap;
}

.hero__stats b{
    display:block;
    font-size:1.9rem;
    font-weight:600;
    background:var(--grad-text);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
}

.hero__stats span{
    font-size:.8rem;
    color:var(--text-invert-soft);
}

/* --- Hero visual --- */

.hero__visual{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
}

.hero__card{
    width:100%;
    max-width:420px;
    padding:26px;
    border:1px solid rgba(255,255,255,.16);
    border-radius:var(--r-xl);
    background:rgba(255,255,255,.07);
    box-shadow:var(--sh-glow);
    backdrop-filter:blur(16px);
    animation:float 6s ease-in-out infinite;
}

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

.hero__card-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:20px;
    padding-bottom:16px;
    border-bottom:1px solid rgba(255,255,255,.14);
}

.hero__card-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:.78rem;
    font-weight:600;
    color:#fff;
}

.hero__card-dot{
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--violet);
    box-shadow:0 0 10px var(--violet);
    animation:pulse 2s infinite;
}

.hero__card-meta{
    font-size:.7rem;
    color:var(--text-invert-soft);
}

.hero__card-rows{
    display:grid;
    gap:12px;
}

.hero__row{
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 16px;
    border-radius:var(--r-sm);
    background:rgba(255,255,255,.08);
    font-size:.84rem;
    transition:background .2s ease,transform .2s ease;
}

.hero__row:hover{
    background:rgba(255,255,255,.14);
    transform:translateX(3px);
}

.hero__row i{
    display:grid;
    place-items:center;
    width:30px;
    height:30px;
    flex-shrink:0;
    border-radius:9px;
    background:var(--grad);
    font-size:.8rem;
    color:#fff;
}

.hero__row b{
    display:block;
    font-weight:600;
}

.hero__row small{
    color:var(--text-invert-soft);
    font-size:.72rem;
}

/* =====================================================
   FLOATING CONTACT RAIL
   ===================================================== */

.rail{
    position:fixed;
    right:0;
    top:38%;
    z-index:800;
    display:flex;
    flex-direction:column;
    gap:8px;
}

.rail a{
    display:grid;
    place-items:center;
    width:54px;
    height:50px;
    border-radius:14px 0 0 14px;
    background:var(--grad);
    color:#fff;
    font-size:1.05rem;
    box-shadow:-6px 8px 22px rgba(79,70,229,.32);
    transition:width .3s ease,filter .3s ease;
}

.rail a:hover{
    width:66px;
    filter:brightness(1.12);
}

/* =====================================================
   LOGO MARQUEE
   ===================================================== */

.trust__label{
    margin-bottom:34px;
    color:var(--text-soft);
    font-size:.86rem;
    text-align:center;
    letter-spacing:.4px;
}

.marquee{
    position:relative;
    overflow:hidden;
    mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}

.marquee__track{
    display:flex;
    align-items:center;
    gap:70px;
    width:max-content;
    animation:scroll-x 26s linear infinite;
}

.marquee:hover .marquee__track{
    animation-play-state:paused;
}

/* offset by half the gap so the duplicated set lines up exactly */

@keyframes scroll-x{
    from{transform:translateX(0);}
    to{transform:translateX(calc(-50% - 35px));}
}

.marquee img{
    height:56px;
    width:auto;
    object-fit:contain;
    filter:grayscale(100%);
    opacity:.6;
    transition:filter .3s ease,opacity .3s ease,transform .3s ease;
}

.marquee img:hover{
    filter:grayscale(0);
    opacity:1;
    transform:scale(1.06);
}

/* =====================================================
   FEATURE GRID (Why AI-first)
   ===================================================== */

.feature-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
}

.feature{
    padding:32px 26px;
    border:1px solid var(--line);
    border-radius:var(--r-lg);
    background:#fff;
    box-shadow:var(--sh-sm);
    transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;
}

.feature:hover{
    transform:translateY(-8px);
    border-color:transparent;
    box-shadow:var(--sh-lg);
}

.feature__icon{
    display:grid;
    place-items:center;
    width:52px;
    height:52px;
    margin-bottom:20px;
    border-radius:16px;
    background:var(--grad);
    color:#fff;
    font-size:1.2rem;
    box-shadow:0 8px 20px rgba(79,70,229,.26);
}

.feature h3{
    margin-bottom:10px;
    font-size:1.06rem;
}

.feature p{
    color:var(--text-soft);
    font-size:.88rem;
}

/* =====================================================
   SERVICE CARDS
   ===================================================== */

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

.service{
    position:relative;
    display:flex;
    flex-direction:column;
    padding:34px 30px;
    border:1px solid var(--line);
    border-radius:var(--r-lg);
    background:#fff;
    overflow:hidden;
    isolation:isolate; /* lets ::before paint above the card background */
    box-shadow:var(--sh-sm);
    transition:transform .35s ease,box-shadow .35s ease,color .35s ease;
}

.service::before{
    content:"";
    position:absolute;
    inset:0;
    background:var(--grad);
    opacity:0;
    transition:opacity .35s ease;
    z-index:-1;
}

.service > *{
    position:relative;
}

.service:hover,
.service.is-featured{
    transform:translateY(-10px);
    color:#fff;
    box-shadow:var(--sh-lg);
}

.service:hover::before,
.service.is-featured::before{
    opacity:1;
}

.service.is-featured{
    transform:none;
}

.service__icon{
    display:grid;
    place-items:center;
    width:56px;
    height:56px;
    margin-bottom:24px;
    border-radius:18px;
    background:var(--grad-soft);
    color:var(--purple);
    font-size:1.3rem;
    transition:background .35s ease,color .35s ease;
}

.service:hover .service__icon,
.service.is-featured .service__icon{
    background:rgba(255,255,255,.18);
    color:#fff;
}

.service h3{
    margin-bottom:12px;
    font-size:1.14rem;
}

.service p{
    margin-bottom:22px;
    color:var(--text-soft);
    font-size:.9rem;
    transition:color .35s ease;
}

.service:hover p,
.service.is-featured p{
    color:rgba(255,255,255,.9);
}

.service__tags{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:auto;
}

.service__tags span{
    padding:5px 13px;
    border:1px solid var(--line);
    border-radius:var(--r-pill);
    font-size:.72rem;
    font-weight:500;
    color:var(--text-soft);
    transition:.35s ease;
}

.service:hover .service__tags span,
.service.is-featured .service__tags span{
    border-color:rgba(255,255,255,.3);
    background:rgba(255,255,255,.12);
    color:#fff;
}

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

.process{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:18px;
    counter-reset:step;
}

.step{
    position:relative;
    padding:34px 22px 28px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:var(--r-lg);
    background:rgba(255,255,255,.05);
    backdrop-filter:blur(10px);
    transition:transform .35s ease,background .35s ease,border-color .35s ease;
}

.step:hover{
    transform:translateY(-10px);
    background:rgba(255,255,255,.1);
    border-color:rgba(192,132,252,.5);
}

.step__num{
    display:grid;
    place-items:center;
    width:46px;
    height:46px;
    margin-bottom:18px;
    border-radius:14px;
    background:var(--grad);
    font-size:1rem;
    font-weight:700;
    color:#fff;
}

.step h3{
    margin-bottom:10px;
    font-size:1.02rem;
    color:#fff;
}

.step p{
    color:var(--text-invert-soft);
    font-size:.84rem;
}

/* =====================================================
   TECH STACK
   ===================================================== */

.tech-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px;
}

.tech{
    display:flex;
    align-items:center;
    gap:12px;
    padding:16px 20px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:var(--r-md);
    background:rgba(255,255,255,.04);
    transition:transform .3s ease,border-color .3s ease,background .3s ease;
}

.tech:hover{
    transform:translateY(-6px);
    border-color:rgba(192,132,252,.55);
    background:rgba(255,255,255,.09);
}

.tech .dot{
    width:12px;
    height:12px;
    flex-shrink:0;
    border-radius:50%;
    background:radial-gradient(circle at 34% 34%,#fff,#c7b9ff,#7c3aed);
    transition:box-shadow .3s ease;
}

.tech:hover .dot{
    box-shadow:0 0 16px var(--violet);
}

.tech h3{
    font-size:.9rem;
    font-weight:500;
    color:#fff;
}

/* =====================================================
   INDUSTRIES
   ===================================================== */

.industry-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
}

.industry{
    display:flex;
    align-items:center;
    gap:16px;
    padding:18px 20px;
    border:1px solid var(--line);
    border-radius:var(--r-md);
    background:#fff;
    box-shadow:var(--sh-sm);
    transition:transform .3s ease,box-shadow .3s ease;
}

.industry:hover{
    transform:translateY(-6px);
    box-shadow:var(--sh-md);
}

.industry i{
    display:grid;
    place-items:center;
    width:42px;
    height:42px;
    flex-shrink:0;
    border-radius:12px;
    background:var(--grad-soft);
    color:var(--purple);
    font-size:1rem;
    transition:background .3s ease,color .3s ease;
}

.industry:hover i{
    background:var(--grad);
    color:#fff;
}

.industry h3{
    font-size:.88rem;
    font-weight:500;
}

/* =====================================================
   PORTFOLIO
   ===================================================== */

.work-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:26px;
}

.work{
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    min-height:300px;
    padding:30px;
    border-radius:var(--r-lg);
    background:var(--grad-dark);
    color:#fff;
    overflow:hidden;
    isolation:isolate;
}

.work::before{
    content:"";
    position:absolute;
    inset:0;
    background:var(--grad);
    opacity:.22;
    transition:opacity .4s ease;
    z-index:-1;
}

.work:hover::before{
    opacity:.5;
}

.work__cat{
    display:inline-block;
    align-self:flex-start;
    padding:5px 14px;
    margin-bottom:14px;
    border:1px solid rgba(255,255,255,.28);
    border-radius:var(--r-pill);
    background:rgba(255,255,255,.1);
    font-size:.7rem;
    font-weight:600;
    letter-spacing:1.1px;
    text-transform:uppercase;
    backdrop-filter:blur(6px);
}

.work h3{
    margin-bottom:10px;
    font-size:1.3rem;
}

.work p{
    max-width:460px;
    margin-bottom:18px;
    color:rgba(255,255,255,.82);
    font-size:.88rem;
}

.work__link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    align-self:flex-start;
    font-size:.85rem;
    font-weight:600;
}

.work__link i{
    transition:transform .3s ease;
}

.work:hover .work__link i{
    transform:translateX(6px);
}

/* =====================================================
   STATS
   ===================================================== */

.stat-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:26px;
    text-align:center;
}

.stat{
    padding:34px 20px;
    border:1px solid var(--line);
    border-radius:var(--r-lg);
    background:#fff;
    box-shadow:var(--sh-sm);
}

.stat b{
    display:block;
    font-size:2.6rem;
    font-weight:700;
    line-height:1;
    background:var(--grad);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
}

.stat span{
    display:block;
    margin-top:12px;
    color:var(--text-soft);
    font-size:.86rem;
}

/* =====================================================
   TESTIMONIALS
   ===================================================== */

.quotes{
    position:relative;
    max-width:900px;
    margin-inline:auto;
}

.quote{
    display:none;
    padding:44px;
    border:1px solid rgba(255,255,255,.14);
    border-radius:var(--r-xl);
    background:rgba(255,255,255,.06);
    backdrop-filter:blur(12px);
    text-align:center;
}

.quote.is-active{
    display:block;
    animation:fade-up .5s ease;
}

@keyframes fade-up{
    from{opacity:0;transform:translateY(16px);}
    to{opacity:1;transform:translateY(0);}
}

.quote__mark{
    font-size:2rem;
    color:var(--violet);
    margin-bottom:18px;
}

.quote p{
    font-size:1.1rem;
    line-height:1.75;
    color:#fff;
    font-weight:300;
}

.quote__by{
    margin-top:26px;
}

.quote__by b{
    display:block;
    font-size:.95rem;
}

.quote__by span{
    color:var(--text-invert-soft);
    font-size:.82rem;
}

.quote__stars{
    margin-bottom:16px;
    color:#fbbf24;
    font-size:.85rem;
    letter-spacing:3px;
}

.dots{
    display:flex;
    justify-content:center;
    gap:10px;
    margin-top:30px;
}

.dots button{
    width:10px;
    height:10px;
    border:none;
    border-radius:50%;
    background:rgba(255,255,255,.3);
    cursor:pointer;
    transition:width .3s ease,background .3s ease;
}

.dots button.is-active{
    width:30px;
    border-radius:var(--r-pill);
    background:var(--grad-text);
}

/* =====================================================
   FAQ
   ===================================================== */

.faq{
    max-width:860px;
    margin-inline:auto;
    display:grid;
    gap:14px;
}

.faq__item{
    border:1px solid var(--line);
    border-radius:var(--r-md);
    background:#fff;
    overflow:hidden;
    transition:border-color .3s ease,box-shadow .3s ease;
}

.faq__item.is-open{
    border-color:rgba(124,58,237,.4);
    box-shadow:var(--sh-md);
}

.faq__q{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    width:100%;
    padding:20px 24px;
    border:none;
    background:none;
    text-align:left;
    font-size:.98rem;
    font-weight:500;
    cursor:pointer;
}

.faq__q i{
    color:var(--purple);
    font-size:.8rem;
    transition:transform .3s ease;
}

.faq__item.is-open .faq__q i{
    transform:rotate(180deg);
}

.faq__a{
    max-height:0;
    padding:0 24px;
    color:var(--text-soft);
    font-size:.9rem;
    overflow:hidden;
    transition:max-height .35s ease,padding .35s ease;
}

.faq__item.is-open .faq__a{
    max-height:340px;
    padding:0 24px 22px;
}

/* =====================================================
   SPLIT (map / vision 2030)
   ===================================================== */

.split{
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:60px;
}

.split__media img{
    width:100%;
    max-width:620px;
    margin-inline:auto;
}

.tick-list{
    display:grid;
    gap:12px;
    margin:26px 0 34px;
}

.tick-list li{
    display:flex;
    align-items:flex-start;
    gap:12px;
    color:var(--text-soft);
    font-size:.92rem;
}

.tick-list i{
    margin-top:4px;
    color:var(--purple);
    font-size:.82rem;
}

.section--dark .tick-list li{
    color:var(--text-invert-soft);
}

.section--dark .tick-list i{
    color:var(--violet);
}

/* =====================================================
   CTA BANNER
   ===================================================== */

.cta{
    position:relative;
    padding:78px 0;
    background:var(--grad);
    color:#fff;
    text-align:center;
    overflow:hidden;
}

.cta::before{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(circle at 20% 20%,rgba(255,255,255,.22),transparent 45%),
               radial-gradient(circle at 82% 78%,rgba(255,255,255,.16),transparent 45%);
}

.cta__inner{
    position:relative;
}

.cta h2{
    font-size:clamp(1.7rem,3.6vw,2.6rem);
}

.cta p{
    max-width:620px;
    margin:16px auto 32px;
    color:rgba(255,255,255,.9);
}

.cta__btns{
    display:flex;
    justify-content:center;
    gap:16px;
    flex-wrap:wrap;
}

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

.contact-grid{
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:56px;
    align-items:start;
}

.info-list{
    display:grid;
    gap:20px;
    margin-top:30px;
}

.info{
    display:flex;
    gap:16px;
}

.info i{
    display:grid;
    place-items:center;
    width:46px;
    height:46px;
    flex-shrink:0;
    border-radius:14px;
    background:var(--grad);
    color:#fff;
    font-size:1rem;
}

.info b{
    display:block;
    font-size:.92rem;
}

.info span,
.info a{
    display:block;
    color:var(--text-soft);
    font-size:.88rem;
}

.info a:hover{
    color:var(--purple);
}

.form{
    padding:34px;
    border:1px solid var(--line);
    border-radius:var(--r-lg);
    background:#fff;
    box-shadow:var(--sh-md);
}

.form__row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
}

.field{
    margin-bottom:18px;
}

.field label{
    display:block;
    margin-bottom:8px;
    font-size:.82rem;
    font-weight:500;
}

.field input,
.field select,
.field textarea{
    width:100%;
    padding:13px 16px;
    border:1.4px solid var(--line);
    border-radius:var(--r-sm);
    background:#fcfcff;
    font-size:.9rem;
    transition:border-color .25s ease,box-shadow .25s ease;
}

.field textarea{
    min-height:130px;
    resize:vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus{
    outline:none;
    border-color:var(--purple);
    box-shadow:0 0 0 4px rgba(124,58,237,.12);
}

.form__note{
    margin-top:14px;
    color:var(--text-soft);
    font-size:.78rem;
    text-align:center;
}

.form__ok{
    display:none;
    margin-top:16px;
    padding:12px 16px;
    border-radius:var(--r-sm);
    background:#ecfdf5;
    border:1px solid #a7f3d0;
    color:#047857;
    font-size:.85rem;
    text-align:center;
}

.form__ok.is-visible{
    display:block;
}

/* =====================================================
   PAGE HERO (inner pages)
   ===================================================== */

.page-hero{
    position:relative;
    padding:80px 0;
    background:var(--grad-dark);
    color:#fff;
    text-align:center;
    overflow:hidden;
}

.page-hero::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:url("pngtree-abstract-purple-energy-waves-futuristic-hi-tech-glowing-particles-background-image_15685928.jpg");
    background-size:cover;
    background-position:center;
    opacity:.32;
}

.page-hero::after{
    content:"";
    position:absolute;
    width:600px;
    height:600px;
    top:-280px;
    left:50%;
    transform:translateX(-50%);
    border-radius:50%;
    background:radial-gradient(circle,rgba(124,58,237,.42),transparent 65%);
}

.page-hero__inner{
    position:relative;
    z-index:1;
}

.page-hero p{
    max-width:680px;
    margin:16px auto 0;
    color:var(--text-invert-soft);
}

.crumbs{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    margin-top:22px;
    font-size:.82rem;
    color:var(--text-invert-soft);
}

.crumbs a:hover{
    color:#fff;
}

.crumbs span{
    color:var(--violet);
}

/* =====================================================
   BLOG
   ===================================================== */

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

.post{
    display:flex;
    flex-direction:column;
    border:1px solid var(--line);
    border-radius:var(--r-lg);
    background:#fff;
    overflow:hidden;
    box-shadow:var(--sh-sm);
    transition:transform .35s ease,box-shadow .35s ease;
}

.post:hover{
    transform:translateY(-8px);
    box-shadow:var(--sh-lg);
}

.post__thumb{
    position:relative;
    display:grid;
    place-items:center;
    height:170px;
    background:var(--grad);
    color:#fff;
    font-size:2.2rem;
}

.post__body{
    display:flex;
    flex-direction:column;
    flex:1;
    padding:24px;
}

.post__meta{
    display:flex;
    gap:14px;
    margin-bottom:12px;
    color:var(--text-soft);
    font-size:.75rem;
}

.post__meta span{
    display:inline-flex;
    align-items:center;
    gap:6px;
}

.post h3{
    margin-bottom:10px;
    font-size:1.04rem;
}

.post p{
    margin-bottom:18px;
    color:var(--text-soft);
    font-size:.87rem;
}

.post .link-arrow{
    margin-top:auto;
}

/* =====================================================
   TEAM / VALUES
   ===================================================== */

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

.value{
    padding:32px 28px;
    border:1px solid var(--line);
    border-left:4px solid transparent;
    border-radius:var(--r-md);
    background:#fff;
    box-shadow:var(--sh-sm);
    transition:border-left-color .3s ease,transform .3s ease;
}

.value:hover{
    border-left-color:var(--purple);
    transform:translateX(6px);
}

.value h3{
    margin-bottom:10px;
    font-size:1.04rem;
}

.value p{
    color:var(--text-soft);
    font-size:.88rem;
}

.timeline{
    max-width:820px;
    margin-inline:auto;
    padding-left:34px;
    border-left:2px dashed var(--line);
    display:grid;
    gap:34px;
}

.timeline__item{
    position:relative;
}

.timeline__item::before{
    content:"";
    position:absolute;
    left:-43px;
    top:6px;
    width:16px;
    height:16px;
    border-radius:50%;
    background:var(--grad);
    box-shadow:0 0 0 4px #fff,0 0 0 6px rgba(124,58,237,.2);
}

.timeline__year{
    color:var(--purple);
    font-size:.8rem;
    font-weight:700;
    letter-spacing:1.2px;
}

.timeline h3{
    margin:6px 0 8px;
    font-size:1.06rem;
}

.timeline p{
    color:var(--text-soft);
    font-size:.9rem;
}

/* =====================================================
   PRICING
   ===================================================== */

.price-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:26px;
    align-items:start;
}

.price{
    position:relative;
    padding:34px 30px;
    border:1px solid var(--line);
    border-radius:var(--r-lg);
    background:#fff;
    box-shadow:var(--sh-sm);
    transition:transform .35s ease,box-shadow .35s ease;
}

.price:hover{
    transform:translateY(-8px);
    box-shadow:var(--sh-lg);
}

.price.is-popular{
    border-color:transparent;
    background:var(--grad);
    color:#fff;
    box-shadow:var(--sh-lg);
}

.price__tag{
    position:absolute;
    top:-13px;
    right:26px;
    padding:5px 16px;
    border-radius:var(--r-pill);
    background:#fff;
    color:var(--purple);
    font-size:.7rem;
    font-weight:700;
    letter-spacing:1px;
    box-shadow:var(--sh-sm);
}

.price h3{
    font-size:1.1rem;
}

.price__amount{
    margin:14px 0 20px;
    font-size:2.1rem;
    font-weight:700;
}

.price__amount small{
    font-size:.8rem;
    font-weight:400;
    opacity:.7;
}

.price ul{
    display:grid;
    gap:11px;
    margin-bottom:28px;
}

.price li{
    display:flex;
    align-items:flex-start;
    gap:10px;
    font-size:.87rem;
    color:var(--text-soft);
}

.price li i{
    margin-top:4px;
    font-size:.78rem;
    color:var(--purple);
}

.price.is-popular li,
.price.is-popular li i{
    color:rgba(255,255,255,.92);
}

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

.footer{
    background:var(--ink);
    color:var(--text-invert-soft);
    padding:72px 0 0;
    font-size:.88rem;
}

.footer__grid{
    display:grid;
    grid-template-columns:1.5fr 1fr 1fr 1.2fr;
    gap:44px;
    padding-bottom:52px;
}

.footer__logo{
    height:46px;
    margin-bottom:20px;
}

.footer__about p{
    max-width:340px;
    margin-bottom:24px;
}

.footer h4{
    margin-bottom:20px;
    color:#fff;
    font-size:1rem;
}

.footer__links{
    display:grid;
    gap:11px;
}

.footer__links a{
    transition:color .25s ease,padding-left .25s ease;
}

.footer__links a:hover{
    color:var(--violet);
    padding-left:5px;
}

.footer__contact{
    display:grid;
    gap:14px;
}

.footer__contact li{
    display:flex;
    align-items:flex-start;
    gap:12px;
}

.footer__contact i{
    margin-top:5px;
    color:var(--violet);
    font-size:.85rem;
}

.socials{
    display:flex;
    gap:10px;
}

.socials a{
    display:grid;
    place-items:center;
    width:42px;
    height:42px;
    border:1.4px solid rgba(255,255,255,.18);
    border-radius:50%;
    color:#fff;
    font-size:.9rem;
    transition:background .3s ease,border-color .3s ease,transform .3s ease;
}

.socials a:hover{
    background:var(--grad);
    border-color:transparent;
    transform:translateY(-4px);
}

.offices{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:22px;
    padding:34px 0;
    border-top:1px solid rgba(255,255,255,.1);
}

.office b{
    display:block;
    margin-bottom:6px;
    color:#fff;
    font-size:.9rem;
}

.office span{
    font-size:.8rem;
    line-height:1.6;
}

.footer__bottom{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:22px 0;
    border-top:1px solid rgba(255,255,255,.1);
    font-size:.8rem;
    flex-wrap:wrap;
}

.footer__bottom nav{
    display:flex;
    gap:20px;
}

.footer__bottom a:hover{
    color:var(--violet);
}

/* =====================================================
   REVEAL ON SCROLL
   ===================================================== */

.reveal{
    opacity:0;
    transform:translateY(26px);
    transition:opacity .7s ease,transform .7s ease;
}

.reveal.is-in{
    opacity:1;
    transform:none;
}

@media(prefers-reduced-motion:reduce){
    *{
        animation:none !important;
        transition-duration:.01ms !important;
    }
    .reveal{
        opacity:1;
        transform:none;
    }
}

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

/* Nav collapses to the burger menu well above the general content
   breakpoint — nine top-level items plus dropdowns need more width
   than the page's reading-width sections do. */

@media(max-width:1360px){

    .burger{
        display:flex;
    }

    .site-nav{
        position:fixed;
        top:0;
        right:0;
        width:min(340px,86vw);
        height:100vh;
        padding:88px 22px 40px;
        background:#fff;
        border-left:1px solid var(--line);
        box-shadow:-16px 0 44px rgba(20,19,39,.14);
        transform:translateX(105%);
        transition:transform .35s ease;
        overflow-y:auto;
        z-index:950;
    }

    .site-nav.is-open{
        transform:translateX(0);
    }

    .nav__list{
        flex-direction:column;
        align-items:stretch;
        gap:2px;
    }

    .nav__link{
        justify-content:space-between;
        padding:13px 14px;
        font-size:.92rem;
    }

    .nav__link.is-active::after{
        display:none;
    }

    .dropdown{
        position:static;
        display:none;
        min-width:0;
        margin:2px 0 8px;
        padding:6px;
        border-radius:var(--r-sm);
        background:var(--muted-bg);
        box-shadow:none;
        opacity:1;
        visibility:visible;
        transform:none;
    }

    .nav__item.is-open > .dropdown{
        display:block;
    }

    .nav__item:hover > .dropdown{
        opacity:1;
        visibility:visible;
    }

    .nav-backdrop{
        position:fixed;
        inset:0;
        background:rgba(11,10,36,.5);
        backdrop-filter:blur(2px);
        opacity:0;
        visibility:hidden;
        transition:opacity .3s ease,visibility .3s;
        z-index:940;
    }

    .nav-backdrop.is-open{
        opacity:1;
        visibility:visible;
    }
}

@media(max-width:1150px){

    .feature-grid,
    .tech-grid,
    .industry-grid,
    .stat-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .process{
        grid-template-columns:repeat(3,1fr);
    }

    .offices{
        grid-template-columns:repeat(3,1fr);
    }
}

@media(max-width:980px){

    /* Layout */
    .section{
        padding:70px 0;
    }

    .hero{
        padding:76px 0 84px;
    }

    .hero__grid,
    .split,
    .contact-grid{
        grid-template-columns:1fr;
        gap:44px;
    }

    .hero__text{
        max-width:none;
    }

    .service-grid,
    .work-grid,
    .blog-grid,
    .value-grid,
    .price-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .footer__grid{
        grid-template-columns:1fr 1fr;
        gap:34px;
    }

    .topbar__meta a:nth-child(n+3){
        display:none;
    }
}

@media(max-width:680px){

    .container{
        padding-inline:18px;
    }

    .section{
        padding:56px 0;
    }

    .section-head{
        margin-bottom:38px;
    }

    .feature-grid,
    .service-grid,
    .process,
    .tech-grid,
    .industry-grid,
    .work-grid,
    .stat-grid,
    .blog-grid,
    .value-grid,
    .price-grid,
    .form__row,
    .footer__grid,
    .offices{
        grid-template-columns:1fr;
    }

    .hero__stats{
        gap:26px;
    }

    .hero__stats > div{
        flex:1 1 40%;
    }

    .quote{
        padding:28px 22px;
    }

    .quote p{
        font-size:.98rem;
    }

    .form{
        padding:24px 20px;
    }

    .rail a{
        width:46px;
        height:44px;
        font-size:.95rem;
    }

    .marquee__track{
        gap:44px;
        animation-name:scroll-x-sm;
    }

    @keyframes scroll-x-sm{
        from{transform:translateX(0);}
        to{transform:translateX(calc(-50% - 22px));}
    }

    .marquee img{
        height:42px;
    }

    .btn{
        padding:13px 24px;
    }

    .footer__bottom{
        justify-content:center;
        text-align:center;
    }

    .topbar__actions .topbar__lang{
        display:none;
    }
}