/********** Arkos Datateks Custom Styles over AI.Tech Template **********/
:root {
    --primary: #155EEF;
    --secondary: #19B6D2;
    --light: #F5F8FE;
    --dark: #10284D;
    --ink: #14233B;
    --muted: #61728D;
    --line: #DDE7F5;
    --surface: #FFFFFF;
    --soft: #EEF6FF;
    --shadow: 0 24px 80px rgba(16, 40, 77, 0.11);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: 'Inter', sans-serif;
    color: var(--ink);
    background: #fff;
    line-height: 1.7;
}

#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease-out, visibility 0s linear .5s;
    z-index: 99999;
}
#spinner.show { visibility: visible; opacity: 1; transition: opacity .5s ease-out, visibility 0s linear 0s; }
.back-to-top { position: fixed; display: none; right: 32px; bottom: 32px; z-index: 99; }

h1,h2,h3,h4,h5,h6 { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; color: var(--dark); letter-spacing: -0.035em; }
h1,h2,h3,.fw-bold { font-weight: 800 !important; }
h4,h5,h6,.fw-medium { font-weight: 700 !important; }
p { color: var(--muted); }

a { text-decoration: none; }
.btn { font-weight: 700; transition: .25s ease; letter-spacing: -0.01em; }
.btn-primary { background: linear-gradient(135deg, var(--primary), #0B57D0); border-color: transparent; box-shadow: 0 14px 36px rgba(21,94,239,.22); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 42px rgba(21,94,239,.28); }
.btn-outline-primary { border-color: #C9D8EF; color: var(--dark); background: rgba(255,255,255,.74); }
.btn-outline-primary:hover { background: var(--primary); color: #fff; transform: translateY(-2px); }
.btn-square { width: 38px; height: 38px; }
.btn-lg-square { width: 48px; height: 48px; }
.btn-square, .btn-lg-square { padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50px; }

/* Navbar */
.sticky-top { top: 0 !important; transition: .35s ease; }
.nav-shell { background: rgba(255,255,255,.86); backdrop-filter: blur(18px); border-bottom: 1px solid rgba(221,231,245,.78); }
.navbar { min-height: 76px; padding: 12px 0 !important; }
.brand-mark {
    display: inline-flex; width: 38px; height: 38px; border-radius: 13px;
    align-items: center; justify-content: center; color: #fff; font-weight: 900;
    background: linear-gradient(135deg, var(--primary), var(--secondary)); box-shadow: 0 12px 26px rgba(21,94,239,.22);
}
.brand-text { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 900; color: var(--dark); letter-spacing: -0.04em; font-size: 1.15rem; }
.navbar .navbar-nav .nav-link { margin-right: 28px; padding: 10px 0; color: #52647F; font-weight: 700; outline: none; }
.navbar .navbar-nav .nav-link:hover, .navbar .navbar-nav .nav-link.active { color: var(--primary); }
.nav-cta { display: inline-flex; align-items:center; justify-content:center; color: #fff; background: linear-gradient(135deg, var(--primary), #0B57D0); border-radius: 999px; padding: 10px 18px; font-weight: 800; box-shadow: 0 13px 28px rgba(21,94,239,.22); }
.nav-cta:hover { color:#fff; transform: translateY(-1px); }
.navbar-toggler { border: 0; box-shadow: none !important; }
@media (max-width: 991.98px) {
    .navbar .navbar-nav { padding: 16px; background: rgba(255,255,255,.98); border: 1px solid var(--line); border-radius: 22px; margin-top: 12px; box-shadow: var(--shadow); align-items: stretch !important; }
    .navbar .navbar-nav .nav-link { margin-right: 0; padding: 10px 0; }
    .nav-cta { margin-top: 8px; width: 100%; }
}

/* Hero */
.hero-section { position: relative; min-height: 760px; display: flex; align-items: center; overflow: hidden; padding: 120px 0 80px; }
.hero-bg { position: absolute; inset: 0; background-image: url('../img/arkos-tech-bg.svg'); background-size: cover; background-position: center top; }
.hero-bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 46%, rgba(255,255,255,.82), rgba(255,255,255,.58) 55%, rgba(255,255,255,.25)); }
.hero-content { position: relative; z-index: 2; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(21,94,239,.16); background: rgba(255,255,255,.75); color: #0B57D0; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 900; border-radius: 999px; padding: 8px 13px; box-shadow: 0 10px 30px rgba(16,40,77,.06); }
.eyebrow i { font-size: .65rem; }
.eyebrow.dark { background: #F2F7FF; border-color: #DDE9FA; }
.hero-title { font-size: clamp(2.6rem, 5.4vw, 5.85rem); line-height: .96; max-width: 760px; margin: 24px 0 22px; color: var(--dark); }
.hero-text { font-size: 1.13rem; max-width: 680px; color: #5E6F8B; margin-bottom: 0; }
.hero-btn { min-width: 156px; padding: 14px 26px; }
.hero-pills { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; max-width: 700px; }
.hero-pills span { display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border-radius: 999px; background: rgba(255,255,255,.74); border: 1px solid #D9E6F7; color: #304159; font-weight: 800; box-shadow: 0 10px 28px rgba(16,40,77,.06); }
.hero-pills i { color: var(--primary); }

.hero-device { position: relative; border-radius: 34px; background: rgba(255,255,255,.84); border: 1px solid rgba(214,225,242,.9); box-shadow: var(--shadow); overflow: hidden; padding: 20px; }
.hero-device::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 5px; background: linear-gradient(90deg, var(--primary), var(--secondary), #7C3AED); }
.device-top { display:flex; gap:9px; align-items:center; color:#42526C; font-weight:900; font-size:.86rem; margin-bottom:18px; }
.device-top span { width:11px; height:11px; border-radius:50%; display:inline-flex; }
.device-top span:nth-child(1){background:#ff7a59}.device-top span:nth-child(2){background:#f7bf40}.device-top span:nth-child(3){background:#2bd4bd}
.device-top strong { margin-left: 6px; color:#36465F; }
.device-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; }
.device-card { position:relative; min-height: 220px; border: 1px solid #DDE7F5; border-radius: 24px; padding: 20px; background: linear-gradient(180deg,#fff,#F8FBFF); overflow:hidden; }
.device-card::after { content:''; position:absolute; right:-45px; bottom:-45px; width:130px; height:130px; border-radius:50%; background: #DBE7FF; opacity:.8; }
.device-card small { color:#0B57D0; background:#EEF5FF; border-radius:999px; padding:7px 10px; font-weight:900; text-transform:uppercase; font-size:.73rem; }
.device-card h5 { margin:28px 0 10px; font-size:1.05rem; }
.device-card p { margin:0; font-size:.93rem; }
.accent-card::after { background:#D9F6FC; }
.mini-dashboard { display:grid; grid-template-columns: repeat(3,1fr); gap:14px; margin-top:16px; }
.mini-dashboard div { padding:18px; border-radius:22px; background:#F7FAFF; border:1px solid #E1EBF7; }
.mini-dashboard b { display:block; color:var(--dark); font-size:1.25rem; }
.mini-dashboard span { color:var(--muted); font-weight:700; font-size:.88rem; }

/* General sections */
.section-heading { font-size: clamp(2rem, 3.5vw, 3.4rem); line-height: 1.05; margin: 18px 0 20px; }
.section-heading.center { max-width: 820px; margin-left:auto; margin-right:auto; }
.section-copy { font-size: 1.05rem; color: #5F708D; }
.stats-band { background: #fff; }
.stat-card { height:100%; border:1px solid #E0E9F6; background:#fff; border-radius:28px; padding:28px; box-shadow: 0 16px 50px rgba(16,40,77,.06); }
.stat-card span { color:#0B57D0; font-weight:900; letter-spacing:.08em; }
.stat-card h5 { margin:12px 0 9px; }
.stat-card p { margin:0; }
.service-tile { height:100%; padding:32px; border-radius:30px; background:#fff; border:1px solid #DDE7F5; box-shadow:0 14px 44px rgba(16,40,77,.06); transition:.25s ease; }
.service-tile:hover { transform: translateY(-6px); box-shadow:0 22px 70px rgba(16,40,77,.1); border-color:#C8D8EF; }
.service-tile i { width:52px; height:52px; display:inline-flex; align-items:center; justify-content:center; border-radius:17px; color:#fff; background:linear-gradient(135deg,var(--primary),var(--secondary)); margin-bottom:22px; box-shadow:0 14px 32px rgba(21,94,239,.18); }
.service-tile h5 { margin-bottom:12px; }
.service-tile p { margin-bottom:0; }
.project-preview-section { background: linear-gradient(180deg, #F7FAFF, #FFFFFF); }
.project-card { display:block; height:100%; background:#fff; border:1px solid #DEE8F7; border-radius:30px; overflow:hidden; box-shadow:0 18px 60px rgba(16,40,77,.08); transition:.25s ease; color:inherit; }
.project-card:hover { transform: translateY(-7px); box-shadow:0 25px 80px rgba(16,40,77,.13); }
.project-card img { width:100%; aspect-ratio: 16/10; object-fit: cover; background:#F3F8FF; border-bottom:1px solid #E1EAF6; }
.project-card div { padding: 24px; }
.project-card span, .portfolio-body span { display:inline-flex; color:#0B57D0; background:#EEF5FF; border-radius:999px; padding:6px 10px; font-size:.72rem; font-weight:900; text-transform:uppercase; letter-spacing:.04em; }
.project-card h5 { margin:16px 0 10px; }
.project-card p { margin-bottom:0; }
.cta-panel { display:flex; align-items:center; justify-content:space-between; gap:30px; padding:44px; border-radius:36px; background: linear-gradient(135deg, #0B57D0, #155EEF 45%, #16A6C7); color:#fff; box-shadow:0 26px 90px rgba(21,94,239,.24); position:relative; overflow:hidden; }
.cta-panel::after { content:''; position:absolute; width:320px; height:320px; border-radius:50%; right:-110px; bottom:-170px; border:56px solid rgba(255,255,255,.13); }
.cta-panel h2, .cta-panel p { color:#fff; position:relative; z-index:2; }
.cta-panel h2 { font-size: clamp(1.8rem,3vw,3rem); margin:16px 0 12px; }
.cta-panel p { opacity:.86; margin:0; max-width:680px; }
.cta-panel .btn { position:relative; z-index:2; color:var(--dark); white-space:nowrap; }

/* Page hero */
.page-hero { position:relative; padding: 150px 0 85px; overflow:hidden; background-image: url('../img/arkos-tech-bg.svg'); background-size: cover; background-position:center; }
.page-hero::after { content:''; position:absolute; inset:0; background:rgba(255,255,255,.48); }
.page-hero .container { position:relative; z-index:2; }
.page-title { font-size: clamp(2.5rem, 5vw, 5rem); margin:18px 0 14px; }
.page-intro { max-width: 760px; margin:0 auto; font-size:1.12rem; }
.image-panel { border:1px solid #DDE7F5; border-radius:32px; padding:16px; background:#fff; box-shadow:var(--shadow); }
.image-panel img { width:100%; border-radius:24px; display:block; }
.check-line { display:flex; align-items:center; gap:10px; font-weight:800; color:#304159; background:#F7FAFF; border:1px solid #E0E9F6; border-radius:18px; padding:13px 14px; }
.check-line i { color:var(--primary); }
.process-list { display:grid; gap:16px; }
.process-list div { display:grid; grid-template-columns:70px 1fr; gap:0 18px; background:#fff; border:1px solid #DDE7F5; border-radius:26px; padding:24px; box-shadow:0 14px 44px rgba(16,40,77,.06); }
.process-list span { grid-row:1/3; width:54px; height:54px; border-radius:18px; display:flex; align-items:center; justify-content:center; background:#EEF5FF; color:#0B57D0; font-weight:900; }
.process-list h5 { margin-bottom:4px; }
.process-list p { margin:0; }
.portfolio-card { height:100%; background:#fff; border:1px solid #DDE7F5; border-radius:30px; overflow:hidden; box-shadow:0 18px 60px rgba(16,40,77,.08); transition:.25s ease; }
.portfolio-card:hover { transform: translateY(-7px); box-shadow:0 25px 80px rgba(16,40,77,.13); }
.portfolio-card img { width:100%; aspect-ratio:16/10; object-fit:cover; border-bottom:1px solid #E1EAF6; }
.portfolio-body { padding:24px; }
.portfolio-body h5 { margin:16px 0 10px; }
.portfolio-body a { color:var(--primary); font-weight:900; }
.contact-info { display:flex; gap:18px; padding:20px; border:1px solid #DDE7F5; background:#fff; border-radius:24px; box-shadow:0 14px 44px rgba(16,40,77,.06); margin-top:16px; }
.contact-info i { width:46px; height:46px; display:flex; align-items:center; justify-content:center; border-radius:16px; color:#fff; background:linear-gradient(135deg,var(--primary),var(--secondary)); }
.contact-info h5 { margin:0 0 4px; }
.contact-info p { margin:0; }
.contact-card { padding:30px; border-radius:32px; background:#fff; border:1px solid #DDE7F5; box-shadow:var(--shadow); }
.form-control { min-height:58px; border:1px solid #DDE7F5; border-radius:18px; padding:14px 18px; color:var(--ink); background:#FAFCFF; }
.form-control:focus { box-shadow:0 0 0 4px rgba(21,94,239,.1); border-color:#9DBDF5; }
textarea.form-control { min-height:160px; }
.modern-accordion .accordion-item { border:1px solid #DDE7F5; border-radius:22px !important; overflow:hidden; margin-bottom:16px; box-shadow:0 12px 40px rgba(16,40,77,.06); }
.modern-accordion .accordion-button { font-weight:900; color:var(--dark); padding:22px 24px; box-shadow:none; }
.modern-accordion .accordion-button:not(.collapsed) { background:#F2F7FF; color:var(--primary); }
.modern-accordion .accordion-body { color:#5F708D; padding:22px 24px; }

/* Footer */
.footer-section { background: #0D1B35; }
.footer-brand { width:34px; height:34px; border-radius:12px; box-shadow:none; }
.footer-section p { color:rgba(255,255,255,.72); }
.footer-section .btn.btn-social { margin-right: 8px; width:38px; height:38px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; }
.footer-section .btn.btn-link { display:block; margin-bottom:10px; padding:0; text-align:left; color:rgba(255,255,255,.72); font-weight:600; }
.footer-section .btn.btn-link:hover { color:#fff; letter-spacing:.02em; box-shadow:none; }
.copyright { padding:24px 0; border-top:1px solid rgba(255,255,255,.12); font-size:.92rem; color:rgba(255,255,255,.66); }
.copyright a { color:#fff; }
.footer-menu a { color:rgba(255,255,255,.66); margin-left:18px; }
.footer-menu a:hover { color:#fff; }

@media (max-width: 1199.98px) {
    .device-grid { grid-template-columns:1fr; }
    .device-card { min-height:auto; }
}
@media (max-width: 991.98px) {
    .hero-section { padding: 120px 0 65px; min-height:auto; }
    .hero-title { margin-left:auto; margin-right:auto; }
    .hero-text { margin-left:auto; margin-right:auto; }
    .hero-device { margin-top:15px; }
    .cta-panel { flex-direction:column; align-items:flex-start; }
}
@media (max-width: 767.98px) {
    .hero-title { font-size: clamp(2.35rem, 12vw, 3.8rem); }
    .hero-pills span { width:100%; justify-content:center; }
    .mini-dashboard { grid-template-columns:1fr; }
    .section-heading { font-size:2rem; }
    .page-hero { padding: 122px 0 65px; }
    .cta-panel { padding:30px; border-radius:28px; }
    .footer-menu a { margin-left:10px; }
    .back-to-top { right:20px; bottom:20px; }
}

/* === Hero upgrade patch === */
.hero-section {
    position: relative;
    overflow: hidden;
    padding: 150px 0 95px;
    background:
        radial-gradient(circle at 14% 20%, rgba(22,166,199,.18), transparent 24%),
        radial-gradient(circle at 82% 18%, rgba(11,87,208,.16), transparent 24%),
        linear-gradient(180deg, #F7FBFF 0%, #EFF5FD 46%, #FFFFFF 100%);
}
.hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(15,58,124,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15,58,124,.04) 1px, transparent 1px);
    background-size: 42px 42px;
    opacity: .7;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.95), rgba(0,0,0,.65) 70%, transparent);
}
.hero-section::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('../img/arkos-tech-bg.svg');
    background-size: cover;
    background-position: center;
    opacity: .28;
    mix-blend-mode: multiply;
}
.hero-bg {
    position: absolute;
    inset: auto 8% 10% 8%;
    height: 340px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(11,87,208,.18), rgba(22,166,199,.12), rgba(87,117,255,.16));
    filter: blur(85px);
    opacity: .85;
    animation: heroFloat 9s ease-in-out infinite alternate;
}
.hero-content { position: relative; z-index: 2; }
.hero-title {
    max-width: 620px;
    font-size: clamp(3.15rem, 6vw, 5.5rem);
    line-height: .98;
    letter-spacing: -.075em;
    color: #112A55;
    margin: 24px 0 22px;
}
.gradient-text {
    background: linear-gradient(90deg, #0B57D0 0%, #18A5C6 46%, #445DF5 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.hero-text {
    max-width: 620px;
    color: #536884;
    font-size: 1.08rem;
    line-height: 1.82;
}
.hero-btn { min-width: 170px; }
.hero-device {
    position: relative;
    border-radius: 34px;
    padding: 16px;
    background: linear-gradient(180deg, rgba(12,31,61,.92), rgba(13,38,74,.88));
    border: 1px solid rgba(255,255,255,.1);
    box-shadow: 0 28px 100px rgba(10,28,56,.32);
    overflow: hidden;
    backdrop-filter: blur(14px);
}
.hero-device::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 85% 14%, rgba(90,112,255,.22), transparent 22%),
                radial-gradient(circle at 10% 100%, rgba(22,166,199,.18), transparent 24%),
                linear-gradient(180deg, rgba(255,255,255,.04), transparent 28%);
    pointer-events: none;
}
.hero-device::after {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, #17B4D8, #4B64FF, #8D52FF);
}
.device-top {
    position: relative;
    z-index: 2;
    color: rgba(231,238,248,.88);
    margin-bottom: 18px;
}
.device-top strong { color: #F3F8FF; font-size: 1rem; font-weight: 800; }
.project-slider { position: relative; z-index: 2; }
.showcase-slide {
    display: grid;
    grid-template-columns: 1.03fr .97fr;
    gap: 16px;
    align-items: stretch;
}
.showcase-media {
    border-radius: 24px;
    overflow: hidden;
    min-height: 310px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
}
.showcase-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.showcase-content {
    border-radius: 24px;
    padding: 24px;
    background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
    border: 1px solid rgba(255,255,255,.09);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.showcase-content small {
    display: inline-flex;
    width: max-content;
    color: #DAF2FF;
    background: rgba(105,188,255,.18);
    border: 1px solid rgba(157,214,255,.22);
    border-radius: 999px;
    padding: 7px 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: .72rem;
    margin-bottom: 16px;
}
.showcase-content h5 {
    color: #FFFFFF;
    font-size: 1.5rem;
    line-height: 1.12;
    margin-bottom: 12px;
}
.showcase-content p {
    color: rgba(226,234,245,.84);
    font-size: .99rem;
    line-height: 1.75;
    margin-bottom: 18px;
}
.showcase-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}
.showcase-tags span {
    display: inline-flex;
    align-items: center;
    padding: 7px 11px;
    border-radius: 999px;
    color: #DCEAFF;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.08);
    font-size: .78rem;
    font-weight: 700;
}
.showcase-content a {
    color: #7ED9FF;
    font-weight: 800;
}
.project-slider .owl-dots {
    margin-top: 18px;
    display: flex;
    justify-content: center;
    gap: 8px;
}
.project-slider .owl-dot span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,.22);
    display: block;
    transition: .25s ease;
}
.project-slider .owl-dot.active span {
    width: 28px;
    border-radius: 999px;
    background: linear-gradient(90deg, #15B1DA, #4B64FF);
}
.mini-dashboard {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 14px;
    margin-top: 18px;
}
.metric-card {
    padding: 18px;
    border-radius: 22px;
    display: flex;
    align-items: center;
    gap: 14px;
    background: linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.06));
    border: 1px solid rgba(255,255,255,.1);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.metric-card i {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(22,166,199,.24), rgba(75,100,255,.3));
    color: #DDF6FF;
    font-size: 1rem;
    box-shadow: 0 14px 30px rgba(0,0,0,.08);
}
.metric-card b {
    display: block;
    color: #FFFFFF;
    font-size: 1.52rem;
    line-height: 1;
    margin-bottom: 6px;
}
.metric-card span {
    color: rgba(224,233,244,.84);
    font-weight: 700;
    font-size: .88rem;
}
.mini-dashboard .metric-card > div > span[data-toggle="counter-up"] { color: inherit; font-weight: inherit; font-size: inherit; }

.stats-band { background: linear-gradient(180deg, #FFFFFF, #F7FAFF); }
.stat-card {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    padding: 30px;
    background: linear-gradient(180deg, #FFFFFF, #F9FBFF);
}
.stat-card::after {
    content: '';
    position: absolute;
    right: -36px;
    bottom: -36px;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(21,94,239,.10), rgba(21,94,239,0));
}
.stat-card span {
    width: 46px;
    height: 46px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    color: #FFFFFF;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    letter-spacing: normal;
    font-size: 1rem;
}
.stat-card h5 { position: relative; z-index: 1; }
.stat-card p { position: relative; z-index: 1; }

@keyframes heroFloat {
    from { transform: translateX(-24px) scale(.98); }
    to { transform: translateX(18px) scale(1.03); }
}

@media (max-width: 1199.98px) {
    .showcase-slide { grid-template-columns: 1fr; }
    .showcase-media { min-height: 260px; }
}
@media (max-width: 991.98px) {
    .hero-section { padding: 125px 0 72px; }
    .hero-title, .hero-text { max-width: 100%; }
    .showcase-content h5 { font-size: 1.35rem; }
}
@media (max-width: 767.98px) {
    .hero-title { font-size: clamp(2.5rem, 11.6vw, 4rem); }
    .showcase-media { min-height: 220px; }
    .mini-dashboard { grid-template-columns: 1fr; }
    .metric-card { align-items: flex-start; }
    .project-slider .owl-dots { justify-content: flex-start; }
}

/* === Final hero readability and metric-card fix === */
.hero-title .gradient-text {
    display: inline-block;
    background: linear-gradient(90deg, #0B57D0 0%, #16A6C7 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 8px 26px rgba(11,87,208,.08);
}
.hero-title .gradient-text-2 {
    background: linear-gradient(90deg, #17A7C7 0%, #4A63F5 88%);
    -webkit-background-clip: text;
    background-clip: text;
}
.mini-dashboard {
    gap: 12px;
    margin-top: 20px;
}
.metric-card {
    position: relative;
    min-height: 112px;
    padding: 18px 16px;
    overflow: hidden;
    align-items: center;
    background: linear-gradient(145deg, rgba(18,43,78,.94), rgba(20,55,98,.74));
    border: 1px solid rgba(126,217,255,.18);
    box-shadow: 0 18px 42px rgba(2,12,28,.20), inset 0 1px 0 rgba(255,255,255,.08);
}
.metric-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: radial-gradient(circle at 85% 20%, rgba(22,166,199,.22), transparent 34%),
                radial-gradient(circle at 10% 100%, rgba(75,100,255,.16), transparent 36%);
    pointer-events: none;
}
.metric-card::after {
    content: '';
    position: absolute;
    right: 12px;
    bottom: 12px;
    width: 46px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, #16A6C7, #4B64FF);
    opacity: .85;
}
.metric-card i {
    position: relative;
    z-index: 2;
    flex: 0 0 46px;
    background: linear-gradient(135deg, rgba(22,166,199,.34), rgba(75,100,255,.34));
    color: #FFFFFF;
    border: 1px solid rgba(255,255,255,.14);
}
.metric-card > div {
    position: relative;
    z-index: 2;
}
.metric-card b {
    color: #FFFFFF;
    font-size: 1.75rem;
    letter-spacing: -.04em;
    text-shadow: 0 8px 22px rgba(0,0,0,.16);
}
.metric-card span {
    color: rgba(223,235,249,.88);
    font-size: .86rem;
    line-height: 1.25;
}

@media (max-width: 1199.98px) {
    .metric-card { min-height: 98px; }
}
@media (max-width: 767.98px) {
    .metric-card { min-height: auto; }
}


/* === Metric card visibility quick fix === */
.mini-dashboard .metric-card{display:flex;align-items:center;gap:14px;padding:18px 16px;background:linear-gradient(145deg, rgba(18,43,78,.96), rgba(20,55,98,.84));border:1px solid rgba(126,217,255,.18);}
.mini-dashboard .metric-card > div{background:transparent !important;border:none !important;box-shadow:none !important;padding:0 !important;margin:0 !important;display:flex;flex-direction:column;gap:4px;min-width:0;flex:1;}
.mini-dashboard .metric-card b{display:block;color:#FFFFFF !important;font-size:1.9rem !important;line-height:1;letter-spacing:-.04em;margin:0;}
.mini-dashboard .metric-card span{display:block;color:#DCE8F8 !important;font-size:.92rem !important;font-weight:700 !important;line-height:1.25;margin:0;}
.mini-dashboard .metric-card i{width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 48px;border-radius:16px;background:linear-gradient(135deg, rgba(22,166,199,.42), rgba(75,100,255,.42));color:#fff;border:1px solid rgba(255,255,255,.16);}
.mini-dashboard .metric-card::after{width:54px;opacity:1;}

/* === Hero stat count animation support === */
.mini-dashboard .metric-card b .hero-count {
    display: inline-block;
    color: #FFFFFF !important;
    font: inherit;
    line-height: inherit;
    letter-spacing: inherit;
}

/* === Projects and sectors premium patch === */
.project-preview-section {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 12% 10%, rgba(13,110,253,.08), transparent 26%),
        radial-gradient(circle at 88% 28%, rgba(22,166,199,.08), transparent 24%),
        linear-gradient(180deg, #FFFFFF 0%, #F6FAFF 100%);
}
.project-showcase-grid { align-items: stretch; }
.premium-project-card {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 32px;
    background: linear-gradient(180deg, #FFFFFF 0%, #F8FBFF 100%);
    border: 1px solid rgba(17,42,85,.08);
    box-shadow: 0 20px 60px rgba(17,42,85,.10);
    color: inherit;
    text-decoration: none;
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.premium-project-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(11,87,208,.34), rgba(22,166,199,.20), rgba(255,255,255,0));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity .35s ease;
    pointer-events: none;
}
.premium-project-card:hover {
    transform: translateY(-10px);
    border-color: rgba(11,87,208,.18);
    box-shadow: 0 30px 90px rgba(17,42,85,.16);
    color: inherit;
}
.premium-project-card:hover::before { opacity: 1; }
.project-image-wrap {
    position: relative;
    height: 285px;
    margin: 16px 16px 0;
    border-radius: 24px;
    overflow: hidden;
    background: linear-gradient(135deg, #EAF3FF, #F8FCFF);
    border: 1px solid rgba(17,42,85,.06);
}
.project-image-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 45%, rgba(9,25,55,.18));
    pointer-events: none;
}
.project-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .55s ease, filter .55s ease;
}
.project-image-wrap img[src$=".svg"] {
    object-fit: contain;
    padding: 28px;
    background: linear-gradient(135deg, #ECF5FF, #FFFFFF);
}
.premium-project-card:hover .project-image-wrap img {
    transform: scale(1.045);
    filter: saturate(1.08) contrast(1.03);
}
.project-card-body {
    flex: 1;
    padding: 28px;
    display: flex;
    flex-direction: column;
}
.project-category {
    width: max-content;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 13px;
    border-radius: 999px;
    color: #0B57D0;
    background: rgba(11,87,208,.08);
    border: 1px solid rgba(11,87,208,.10);
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom: 17px;
}
.project-card-body h5 {
    color: #112A55;
    font-size: 1.45rem;
    line-height: 1.2;
    margin-bottom: 12px;
}
.project-card-body p {
    color: #596C86;
    line-height: 1.72;
    margin-bottom: 18px;
}
.project-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 22px;
}
.project-tags span {
    display: inline-flex;
    padding: 7px 11px;
    border-radius: 999px;
    background: #F0F6FF;
    color: #41566F;
    font-size: .78rem;
    font-weight: 700;
}
.project-card-body strong {
    margin-top: auto;
    color: #0B57D0;
    font-weight: 800;
    transition: transform .3s ease;
}
.premium-project-card:hover .project-card-body strong { transform: translateX(3px); }
.sectors-section {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(rgba(12,43,86,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(12,43,86,.035) 1px, transparent 1px),
        linear-gradient(180deg, #F7FAFF 0%, #FFFFFF 100%);
    background-size: 44px 44px, 44px 44px, auto;
}
.sectors-section::before {
    content: '';
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    right: -120px;
    top: 80px;
    background: radial-gradient(circle, rgba(22,166,199,.14), rgba(22,166,199,0) 68%);
}
.sectors-grid { position: relative; z-index: 1; }
.sector-card {
    height: 100%;
    position: relative;
    overflow: hidden;
    padding: 28px;
    border-radius: 28px;
    background: rgba(255,255,255,.86);
    border: 1px solid rgba(17,42,85,.08);
    box-shadow: 0 18px 50px rgba(17,42,85,.08);
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.sector-card::after {
    content: '';
    position: absolute;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    right: -34px;
    bottom: -42px;
    background: radial-gradient(circle, rgba(11,87,208,.10), rgba(11,87,208,0) 70%);
}
.sector-card i {
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    color: #FFFFFF;
    background: linear-gradient(135deg, #0B57D0, #18A5C6);
    box-shadow: 0 14px 30px rgba(11,87,208,.18);
    margin-bottom: 22px;
}
.sector-card h5 {
    color: #112A55;
    margin-bottom: 10px;
    font-size: 1.05rem;
}
.sector-card p {
    margin: 0;
    color: #5D7088;
    line-height: 1.65;
    font-size: .94rem;
}
.sector-card:hover {
    transform: translateY(-8px);
    border-color: rgba(11,87,208,.18);
    box-shadow: 0 26px 70px rgba(17,42,85,.13);
}
.portfolio-featured-grid { margin-top: 10px; }
.portfolio-premium-card .project-image-wrap { height: 300px; }
@media (max-width: 991.98px) {
    .project-image-wrap, .portfolio-premium-card .project-image-wrap { height: 250px; }
}
@media (max-width: 575.98px) {
    .premium-project-card { border-radius: 26px; }
    .project-image-wrap { height: 215px; margin: 12px 12px 0; border-radius: 20px; }
    .project-card-body { padding: 22px; }
    .project-card-body h5 { font-size: 1.25rem; }
    .sector-card { padding: 24px; }
}

/* === Latest project image balance patch === */
/* Larger, near-square project previews for homepage and project page */
.project-showcase-grid {
    align-items: stretch;
}
.premium-project-card {
    min-height: 100%;
}
.project-image-wrap,
.portfolio-premium-card .project-image-wrap {
    height: auto !important;
    aspect-ratio: 1.12 / 1;
    margin: 18px 18px 0;
    border-radius: 28px;
    background:
        radial-gradient(circle at 20% 12%, rgba(11,87,208,.12), transparent 34%),
        linear-gradient(135deg, #EEF6FF, #FFFFFF);
}
.project-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}
.project-image-wrap img[src$=".svg"] {
    object-fit: contain;
    object-position: center;
    padding: 36px;
}
.project-card-body {
    padding: 24px 30px 30px;
}
.project-category {
    margin-bottom: 14px;
}
.project-card-body h5 {
    margin-bottom: 10px;
}
.project-card-body p {
    margin-bottom: 16px;
}
.project-tags {
    margin-bottom: 18px;
}
.premium-project-card:hover .project-image-wrap img {
    transform: scale(1.035);
}
@media (min-width: 1200px) {
    .project-image-wrap,
    .portfolio-premium-card .project-image-wrap {
        aspect-ratio: 1.08 / 1;
    }
}
@media (max-width: 991.98px) {
    .project-image-wrap,
    .portfolio-premium-card .project-image-wrap {
        aspect-ratio: 1.18 / 1;
        margin: 16px 16px 0;
    }
}
@media (max-width: 575.98px) {
    .project-image-wrap,
    .portfolio-premium-card .project-image-wrap {
        aspect-ratio: 1.05 / 1;
        margin: 12px 12px 0;
        border-radius: 22px;
    }
    .project-image-wrap img[src$=".svg"] {
        padding: 24px;
    }
    .project-card-body {
        padding: 22px;
    }
}

/* === Project page alignment patch === */
.portfolio-page-section .section-title-wrap h2 {
    color: #112A55;
    font-size: clamp(2rem, 4vw, 3.25rem);
    letter-spacing: -.045em;
    margin: 14px 0 12px;
}
.portfolio-page-section .section-title-wrap p {
    color: #5D7088;
    line-height: 1.75;
    margin: 0;
}
.portfolio-page-section .portfolio-featured-grid > [class*="col-"] {
    display: flex;
}
.portfolio-page-section .premium-project-card {
    width: 100%;
}
.portfolio-page-section .project-image-wrap {
    aspect-ratio: 1.08 / 1;
}
.portfolio-page-section .project-card-body {
    min-height: 285px;
}
@media (max-width: 991.98px) {
    .portfolio-page-section .project-card-body { min-height: auto; }
}

/* === Site-wide polish patch: brand, chat, cookies, card icons === */
.brand-mark {
    overflow: hidden;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 14px;
}
.brand-mark img {
    width: 38px;
    height: 38px;
    display: block;
    object-fit: contain;
}
.footer-brand img {
    width: 34px;
    height: 34px;
}
.navbar-brand:hover .brand-mark img {
    transform: translateY(-1px) scale(1.03);
}
.brand-mark img { transition: .25s ease; }

.process-list div {
    position: relative;
    overflow: hidden;
    transition: .25s ease;
}
.process-list div::after {
    content: '';
    position: absolute;
    right: -46px;
    bottom: -54px;
    width: 142px;
    height: 142px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(21,94,239,.09), rgba(25,182,210,0));
}
.process-list div:hover {
    transform: translateY(-5px);
    border-color: #C7D9F2;
    box-shadow: 0 22px 68px rgba(16,40,77,.1);
}
.process-list span {
    background: linear-gradient(135deg, rgba(21,94,239,.12), rgba(25,182,210,.16));
    border: 1px solid rgba(21,94,239,.12);
    color: var(--primary);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 10px 24px rgba(21,94,239,.08);
}
.process-list span i {
    font-size: 1.08rem;
}
.process-list h5,
.process-list p {
    position: relative;
    z-index: 1;
}

.whatsapp-float {
    position: fixed;
    right: 26px;
    bottom: 26px;
    z-index: 1040;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    padding: 13px 18px 13px 15px;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, #1FAF65, #25D366);
    box-shadow: 0 18px 48px rgba(31,175,101,.34);
    font-weight: 900;
    letter-spacing: -.02em;
    animation: chatPulse 2.4s ease-in-out infinite;
}
.whatsapp-float i {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255,255,255,.17);
    font-size: 1.25rem;
}
.whatsapp-float:hover {
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 24px 58px rgba(31,175,101,.42);
}
.back-to-top {
    bottom: 96px;
}
@keyframes chatPulse {
    0%, 100% { box-shadow: 0 18px 48px rgba(31,175,101,.34); }
    50% { box-shadow: 0 18px 48px rgba(31,175,101,.34), 0 0 0 10px rgba(37,211,102,.10); }
}

.cookie-banner {
    position: fixed;
    left: 24px;
    bottom: 24px;
    z-index: 1050;
    width: min(520px, calc(100vw - 48px));
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px;
    border-radius: 24px;
    background: rgba(255,255,255,.94);
    border: 1px solid rgba(210,224,244,.92);
    box-shadow: 0 24px 80px rgba(16,40,77,.18);
    backdrop-filter: blur(18px);
}
.cookie-banner.show {
    display: flex;
    animation: cookieIn .35s ease both;
}
.cookie-banner strong {
    display: block;
    color: var(--dark);
    font-family: 'Plus Jakarta Sans', sans-serif;
    letter-spacing: -.02em;
    margin-bottom: 3px;
}
.cookie-banner p {
    margin: 0;
    color: #5F708D;
    font-size: .92rem;
    line-height: 1.55;
}
.cookie-actions {
    display: flex;
    gap: 9px;
    flex: 0 0 auto;
}
.cookie-btn {
    border: 0;
    border-radius: 999px;
    padding: 10px 14px;
    font-weight: 850;
    line-height: 1;
    transition: .2s ease;
}
.cookie-btn.ghost {
    color: var(--dark);
    background: #EDF4FF;
}
.cookie-btn.solid {
    color: #fff;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    box-shadow: 0 12px 26px rgba(21,94,239,.18);
}
.cookie-btn:hover { transform: translateY(-1px); }
@keyframes cookieIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 575.98px) {
    .brand-text { font-size: 1.02rem; }
    .brand-mark img { width: 34px; height: 34px; }
    .whatsapp-float {
        right: 18px;
        bottom: 18px;
        width: 58px;
        height: 58px;
        min-height: 58px;
        padding: 0;
        justify-content: center;
    }
    .whatsapp-float span { display: none; }
    .whatsapp-float i { background: transparent; font-size: 1.55rem; }
    .back-to-top { right: 18px; bottom: 88px; }
    .cookie-banner {
        left: 14px;
        bottom: 88px;
        width: calc(100vw - 28px);
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
    }
    .cookie-actions { width: 100%; }
    .cookie-btn { flex: 1; }
}


/* === Light hero refinement: preview clarity, separated stats, mobile fit === */
.hero-section {
    min-height: auto !important;
    padding: 118px 0 74px !important;
    background:
        radial-gradient(circle at 18% 18%, rgba(21,94,239,.10), transparent 28%),
        radial-gradient(circle at 82% 20%, rgba(25,182,210,.12), transparent 30%),
        linear-gradient(180deg, #F8FBFF 0%, #FFFFFF 58%, #F7FAFF 100%) !important;
}
.hero-bg {
    opacity: .54 !important;
    background-image:
        linear-gradient(rgba(21,94,239,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(21,94,239,.035) 1px, transparent 1px),
        url('../img/arkos-tech-bg.svg') !important;
    background-size: 44px 44px, 44px 44px, cover !important;
    background-position: center, center, center top !important;
}
.hero-bg::after {
    background:
        linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.64)),
        radial-gradient(circle at 72% 28%, rgba(255,255,255,.86), transparent 42%) !important;
}
.hero-title {
    font-size: clamp(2.75rem, 5.25vw, 5.35rem) !important;
    letter-spacing: -.075em;
}
.hero-text {
    color: #54677F !important;
}
.hero-device {
    background: rgba(255,255,255,.92) !important;
    border: 1px solid rgba(211,224,242,.96) !important;
    box-shadow: 0 28px 95px rgba(16,40,77,.15) !important;
    padding: 18px !important;
}
.hero-device::before {
    background: linear-gradient(90deg, var(--primary), var(--secondary), #6D5EF7) !important;
}
.hero-device::after {
    display: none !important;
}
.device-top,
.device-top strong {
    color: #35445C !important;
}
.project-slider {
    position: relative;
    z-index: 2;
}
.showcase-slide {
    display: grid !important;
    grid-template-columns: 1.05fr .95fr !important;
    gap: 18px !important;
    align-items: stretch !important;
}
.showcase-media {
    min-height: 350px !important;
    border-radius: 26px !important;
    overflow: hidden !important;
    background: #F4F8FF !important;
    border: 1px solid #DCE8F8 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 14px 42px rgba(16,40,77,.08);
}
.showcase-media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}
.showcase-content {
    background: linear-gradient(180deg, #FFFFFF, #F7FAFF) !important;
    border: 1px solid #DEE9F7 !important;
    box-shadow: 0 16px 50px rgba(16,40,77,.07) !important;
    border-radius: 26px !important;
    padding: 26px !important;
}
.showcase-content small {
    background: #EEF6FF !important;
    color: #0B57D0 !important;
    border: 1px solid #DCE9FA !important;
}
.showcase-content h5 {
    color: #10213D !important;
}
.showcase-content p {
    color: #5A6B84 !important;
}
.showcase-tags span {
    background: #F0F6FF !important;
    border: 1px solid #DFEAF8 !important;
    color: #31435C !important;
}
.showcase-content a {
    color: #0B57D0 !important;
}
.project-slider .owl-dot span {
    background: #C8D7EC !important;
}
.project-slider .owl-dot.active span {
    background: linear-gradient(90deg, var(--primary), var(--secondary)) !important;
}
.mini-dashboard {
    display: none !important;
}

/* separated hero metric strip */
.hero-metrics-band {
    position: relative;
    z-index: 3;
    margin-top: -34px;
    padding: 0 0 30px;
}
.hero-metrics-wrap {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    padding: 18px;
    border-radius: 30px;
    background: rgba(255,255,255,.94);
    border: 1px solid #DBE7F6;
    box-shadow: 0 24px 75px rgba(16,40,77,.13);
    backdrop-filter: blur(12px);
}
.hero-metric-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    border-radius: 24px;
    background: linear-gradient(180deg, #FFFFFF, #F7FAFF);
    border: 1px solid #E1EBF7;
    min-width: 0;
}
.hero-metric-icon {
    width: 52px;
    height: 52px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 52px;
    color: #FFFFFF;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    box-shadow: 0 14px 30px rgba(21,94,239,.18);
}
.hero-metric-item strong {
    display: block;
    color: #10213D;
    font-size: clamp(1.55rem, 3vw, 2.15rem);
    line-height: 1;
    letter-spacing: -.05em;
}
.hero-metric-item p {
    margin: 6px 0 0;
    color: #61728A;
    font-weight: 800;
}

/* remove old chat spacing after WhatsApp removal */
.back-to-top {
    bottom: 32px !important;
}

/* Hero responsiveness */
@media (max-width: 1199.98px) {
    .showcase-slide {
        grid-template-columns: 1fr !important;
    }
    .showcase-media {
        min-height: 300px !important;
    }
    .showcase-content {
        padding: 24px !important;
    }
}
@media (max-width: 991.98px) {
    .hero-section {
        padding: 104px 0 62px !important;
    }
    .hero-content {
        gap: 28px !important;
    }
    .hero-title {
        max-width: 760px;
        margin-left: auto;
        margin-right: auto;
        font-size: clamp(2.55rem, 8.5vw, 4.5rem) !important;
        line-height: 1.02 !important;
    }
    .hero-text {
        max-width: 720px;
        margin-left: auto;
        margin-right: auto;
        font-size: 1.03rem !important;
        line-height: 1.75 !important;
    }
    .hero-pills {
        gap: 10px !important;
        margin-top: 22px !important;
    }
    .hero-pills span {
        padding: 9px 13px !important;
        font-size: .9rem !important;
    }
    .hero-device {
        max-width: 720px;
        margin: 0 auto;
    }
    .hero-metrics-band {
        margin-top: -18px;
        padding-bottom: 24px;
    }
    .hero-metrics-wrap {
        grid-template-columns: 1fr;
        max-width: 720px;
        margin: 0 auto;
        padding: 14px;
    }
    .hero-metric-item {
        padding: 16px;
    }
}
@media (max-width: 575.98px) {
    .hero-section {
        padding: 92px 0 46px !important;
    }
    .eyebrow {
        font-size: .68rem !important;
        padding: 7px 10px !important;
        letter-spacing: .05em !important;
        max-width: 100%;
        white-space: normal;
        justify-content: center;
    }
    .hero-title {
        font-size: clamp(2.05rem, 13.2vw, 3.35rem) !important;
        line-height: 1.03 !important;
        letter-spacing: -.055em !important;
        margin: 18px 0 16px !important;
    }
    .hero-text {
        font-size: .98rem !important;
        line-height: 1.65 !important;
    }
    .hero-btn {
        min-width: 138px !important;
        padding: 11px 16px !important;
        font-size: .92rem !important;
    }
    .hero-pills span {
        flex: 1 1 auto;
        justify-content: center;
        min-width: 138px;
        padding: 8px 10px !important;
        font-size: .84rem !important;
    }
    .hero-device {
        padding: 14px !important;
        border-radius: 26px !important;
    }
    .device-top {
        font-size: .78rem !important;
        margin-bottom: 14px !important;
        flex-wrap: wrap;
    }
    .showcase-media {
        min-height: 220px !important;
        border-radius: 20px !important;
    }
    .showcase-content {
        padding: 20px !important;
        border-radius: 20px !important;
    }
    .showcase-content h5 {
        font-size: 1.25rem !important;
    }
    .showcase-content p {
        font-size: .93rem !important;
        line-height: 1.65 !important;
    }
    .showcase-tags span {
        font-size: .74rem !important;
        padding: 6px 9px !important;
    }
    .hero-metrics-band {
        margin-top: -8px;
    }
    .hero-metric-icon {
        width: 46px;
        height: 46px;
        flex-basis: 46px;
        border-radius: 15px;
    }
    .hero-metric-item strong {
        font-size: 1.6rem !important;
    }
    .hero-metric-item p {
        font-size: .9rem;
    }
    .cookie-banner {
        left: 14px !important;
        right: 14px !important;
        bottom: 14px !important;
        width: auto !important;
    }
}


/* === Team section patch === */
.team-showcase-section {
    background:
        radial-gradient(circle at 12% 14%, rgba(21,94,239,.07), transparent 24%),
        radial-gradient(circle at 88% 20%, rgba(22,166,199,.08), transparent 28%),
        linear-gradient(180deg, #FFFFFF 0%, #F7FAFF 100%);
}
.team-premium-grid { align-items: stretch; }
.premium-team-card {
    height: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    overflow: hidden;
    border-radius: 34px;
    background: rgba(255,255,255,.96);
    border: 1px solid #DDE8F6;
    box-shadow: 0 24px 70px rgba(15,40,74,.11);
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.premium-team-card:hover {
    transform: translateY(-7px);
    border-color: rgba(21,94,239,.26);
    box-shadow: 0 34px 90px rgba(15,40,74,.16);
}
.team-image-wrap {
    position: relative;
    min-height: 430px;
    overflow: hidden;
    background: linear-gradient(135deg, #EAF4FF, #F7FBFF);
}
.team-image-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 54%, rgba(10,31,64,.12));
    pointer-events: none;
}
.team-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform .55s ease;
}
.premium-team-card:hover .team-image-wrap img { transform: scale(1.045); }
.team-card-body {
    padding: 34px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.team-role {
    display: inline-flex;
    width: max-content;
    max-width: 100%;
    padding: 9px 13px;
    border-radius: 999px;
    background: #EFF6FF;
    color: #0B57D0;
    border: 1px solid #DCEAFF;
    font-size: .76rem;
    line-height: 1;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .055em;
    margin-bottom: 18px;
}
.team-card-body h5 {
    color: #0D2548;
    font-size: clamp(1.55rem, 2.2vw, 2.05rem);
    margin-bottom: 14px;
    letter-spacing: -.045em;
}
.team-card-body p {
    color: #586B86;
    line-height: 1.78;
    margin-bottom: 18px;
}
.team-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-bottom: 20px;
}
.team-tags span {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 999px;
    background: #F5F8FD;
    color: #334862;
    border: 1px solid #E4ECF6;
    font-size: .78rem;
    font-weight: 800;
}
.team-card-body a {
    color: #0B57D0;
    font-weight: 900;
    width: max-content;
}
.profile-card-large .team-image-wrap { min-height: 500px; }
.team-page-section { padding-top: 72px !important; }
@media (max-width: 991.98px) {
    .premium-team-card { grid-template-columns: 1fr; }
    .team-image-wrap, .profile-card-large .team-image-wrap { min-height: 380px; }
    .team-card-body { padding: 28px; }
}
@media (max-width: 575.98px) {
    .premium-team-card { border-radius: 26px; }
    .team-image-wrap, .profile-card-large .team-image-wrap { min-height: 320px; }
    .team-card-body { padding: 24px; }
    .team-role { font-size: .68rem; }
}


/* === Team page slider refresh === */
.team-page-slider {
    position: relative;
}
.team-page-slider .owl-stage {
    display: flex;
}
.team-page-slider .owl-item {
    display: flex;
}
.team-page-slider .owl-item > article {
    width: 100%;
}
.team-slider-card {
    display: flex !important;
    flex-direction: column;
    min-height: 100%;
}
.team-slider-card .team-image-wrap {
    min-height: 470px;
    flex: 0 0 auto;
}
.team-slider-card .team-card-body {
    flex: 1;
    justify-content: flex-start;
}
.team-page-slider .owl-dots {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    gap: 8px;
}
.team-page-slider .owl-dot span {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #CAD8EA;
    display: block;
    transition: all .25s ease;
}
.team-page-slider .owl-dot.active span {
    width: 30px;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
}
.team-page-section .section-lead {
    max-width: 720px;
    color: #5C6F89;
    line-height: 1.8;
}
@media (max-width: 991.98px) {
    .team-slider-card .team-image-wrap { min-height: 430px; }
}
@media (max-width: 575.98px) {
    .team-slider-card .team-image-wrap { min-height: 340px; }
    .team-page-slider .owl-dots { justify-content: flex-start; margin-left: 4px; }
}


/* === Correct team content + homepage slider patch === */
.team-home-slider { position: relative; }
.team-home-slider .owl-stage, .team-page-slider .owl-stage { display: flex; }
.team-home-slider .owl-item, .team-page-slider .owl-item { display: flex; }
.team-home-slider .owl-item > article, .team-page-slider .owl-item > article { width: 100%; }
.team-home-slider .owl-dots { margin-top: 30px; display:flex; justify-content:center; gap:8px; }
.team-home-slider .owl-dot span { width:10px; height:10px; border-radius:999px; background:#CAD8EA; display:block; transition:all .25s ease; }
.team-home-slider .owl-dot.active span { width:30px; background:linear-gradient(90deg, var(--primary), var(--secondary)); }
.team-slider-card .team-image-wrap img, .premium-team-card .team-image-wrap img { object-position: center top; }
.team-card-body .team-role { line-height: 1.25; }
@media (max-width:575.98px){ .team-home-slider .owl-dots{justify-content:flex-start;margin-left:4px;} }

/* === Team sizing and header visibility correction p6 === */
.navbar .navbar-nav .nav-link { margin-right: 18px; font-size: .95rem; }
.nav-cta { padding: 9px 15px; font-size: .93rem; }
.brand-text { font-size: 1.08rem; }
@media (min-width: 992px) and (max-width: 1199.98px) {
    .navbar .navbar-nav .nav-link { margin-right: 13px; font-size: .88rem; }
    .nav-cta { padding: 8px 12px; font-size: .86rem; }
    .brand-text { font-size: .98rem; }
    .brand-mark { width: 38px; height: 38px; }
}

.team-showcase-section .container { max-width: 1180px; }
.team-home-slider, .team-page-slider { width: 100%; overflow: hidden; }
.team-home-slider .owl-stage,
.team-page-slider .owl-stage { display: flex; align-items: stretch; }
.team-home-slider .owl-item,
.team-page-slider .owl-item { display: flex; min-width: 0; }
.team-home-slider .owl-item > article,
.team-page-slider .owl-item > article { width: 100%; min-width: 0; }

.team-slider-card.premium-team-card {
    display: flex !important;
    flex-direction: column;
    grid-template-columns: none !important;
    height: 100%;
    min-height: 0;
    border-radius: 26px;
    overflow: hidden;
    box-shadow: 0 18px 46px rgba(15,40,74,.10);
}
.team-slider-card.premium-team-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 24px 58px rgba(15,40,74,.14);
}
.team-slider-card .team-image-wrap,
.profile-card-large .team-image-wrap,
.team-image-wrap {
    min-height: 0 !important;
}
.team-slider-card .team-image-wrap {
    height: clamp(220px, 24vw, 300px);
    flex: 0 0 auto;
}
.team-home-slider .team-slider-card .team-image-wrap {
    height: clamp(210px, 23vw, 280px);
}
.team-slider-card .team-image-wrap img,
.premium-team-card .team-image-wrap img {
    object-fit: cover;
    object-position: center top;
}
.team-slider-card .team-card-body,
.team-card-body {
    padding: 22px 24px 24px;
    flex: 1 1 auto;
    justify-content: flex-start;
    min-height: 0;
}
.team-card-body h5 {
    font-size: clamp(1.22rem, 1.6vw, 1.55rem);
    letter-spacing: -.03em;
    margin-bottom: 9px;
}
.team-card-body p {
    font-size: .94rem;
    line-height: 1.58;
    margin-bottom: 14px;
}
.team-role {
    width: fit-content;
    max-width: 100%;
    padding: 7px 10px;
    font-size: .66rem;
    line-height: 1.25;
    margin-bottom: 13px;
    white-space: normal;
}
.team-tags {
    gap: 7px;
    margin-bottom: 16px;
}
.team-tags span {
    padding: 6px 9px;
    font-size: .70rem;
}
.team-card-body a {
    margin-top: auto;
    font-size: .92rem;
}
.team-page-section { padding-top: 56px !important; }
.team-page-slider .owl-dots,
.team-home-slider .owl-dots { margin-top: 24px; }

@media (max-width: 991.98px) {
    .team-slider-card .team-image-wrap,
    .team-home-slider .team-slider-card .team-image-wrap { height: 250px; }
    .team-slider-card .team-card-body,
    .team-card-body { padding: 21px; }
}
@media (max-width: 767.98px) {
    .team-slider-card .team-image-wrap,
    .team-home-slider .team-slider-card .team-image-wrap { height: 255px; }
    .team-slider-card.premium-team-card { border-radius: 22px; }
    .team-card-body h5 { font-size: 1.25rem; }
    .team-card-body p { font-size: .92rem; }
}
@media (max-width: 420px) {
    .team-slider-card .team-image-wrap,
    .team-home-slider .team-slider-card .team-image-wrap { height: 230px; }
    .team-slider-card .team-card-body,
    .team-card-body { padding: 18px; }
    .team-tags span { font-size: .68rem; }
}


/* === Team cards refinement p7 === */
@media (min-width: 992px) {
    .navbar .navbar-nav .nav-link {
        margin-right: 12px;
        font-size: .86rem;
    }
    .nav-cta {
        padding: 8px 12px;
        font-size: .84rem;
    }
    .brand-text {
        font-size: .98rem;
    }
    .brand-mark {
        width: 38px;
        height: 38px;
    }
}
@media (min-width: 1200px) {
    .navbar .navbar-nav .nav-link {
        margin-right: 16px;
        font-size: .92rem;
    }
    .nav-cta {
        padding: 9px 14px;
        font-size: .9rem;
    }
    .brand-text {
        font-size: 1.06rem;
    }
}

.team-showcase-section .container {
    max-width: 1120px;
}
.team-home-slider,
.team-page-slider {
    overflow: hidden;
}
.team-home-slider .owl-stage,
.team-page-slider .owl-stage {
    display: flex;
    align-items: stretch;
}
.team-home-slider .owl-item,
.team-page-slider .owl-item {
    display: flex;
    min-width: 0;
}
.team-home-slider .owl-item > article,
.team-page-slider .owl-item > article {
    width: 100%;
    min-width: 0;
}
.team-slider-card.premium-team-card {
    display: grid !important;
    grid-template-columns: 42% 58% !important;
    height: 100%;
    min-height: 260px;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 16px 42px rgba(15,40,74,.10);
}
.team-slider-card.premium-team-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 54px rgba(15,40,74,.14);
}
.team-slider-card .team-image-wrap,
.team-home-slider .team-slider-card .team-image-wrap,
.profile-card-large .team-image-wrap,
.team-image-wrap {
    min-height: 0 !important;
    height: auto !important;
}
.team-slider-card .team-image-wrap {
    min-height: 260px !important;
    height: 100% !important;
}
.team-slider-card .team-image-wrap::after {
    background: linear-gradient(180deg, transparent 68%, rgba(10,31,64,.10));
}
.team-slider-card .team-image-wrap img,
.premium-team-card .team-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}
.team-slider-card#smaila .team-image-wrap img { object-position: center 24%; }
.team-slider-card#bright .team-image-wrap img { object-position: center 18%; }
.team-slider-card#nana .team-image-wrap img { object-position: center 18%; }
.team-slider-card#naveed .team-image-wrap img { object-position: center 22%; }

.team-slider-card .team-card-body,
.team-card-body {
    padding: 22px 22px 23px;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.team-role {
    width: fit-content;
    max-width: 100%;
    padding: 6px 9px;
    font-size: .62rem;
    line-height: 1.25;
    margin-bottom: 11px;
    white-space: normal;
}
.team-card-body h5 {
    font-size: clamp(1.12rem, 1.35vw, 1.38rem);
    line-height: 1.15;
    margin-bottom: 8px;
    letter-spacing: -.025em;
}
.team-card-body p {
    font-size: .88rem;
    line-height: 1.52;
    margin-bottom: 12px;
}
.team-tags {
    gap: 6px;
    margin-bottom: 0;
}
.team-tags span {
    padding: 5px 8px;
    font-size: .64rem;
    line-height: 1.15;
}
.team-card-body a {
    display: none !important;
}
.team-page-section {
    padding-top: 46px !important;
}
.team-page-slider .owl-dots,
.team-home-slider .owl-dots {
    margin-top: 20px;
}

@media (max-width: 991.98px) {
    .team-slider-card.premium-team-card {
        grid-template-columns: 38% 62% !important;
        min-height: 230px;
    }
    .team-slider-card .team-image-wrap {
        min-height: 230px !important;
    }
    .team-slider-card .team-card-body,
    .team-card-body {
        padding: 20px;
    }
}
@media (max-width: 767.98px) {
    .team-slider-card.premium-team-card {
        grid-template-columns: 1fr !important;
        min-height: 0;
        border-radius: 22px;
    }
    .team-slider-card .team-image-wrap,
    .team-home-slider .team-slider-card .team-image-wrap {
        height: 245px !important;
        min-height: 245px !important;
    }
    .team-slider-card .team-card-body,
    .team-card-body {
        padding: 18px 19px 20px;
    }
    .team-card-body h5 {
        font-size: 1.2rem;
    }
    .team-card-body p {
        font-size: .9rem;
    }
}
@media (max-width: 420px) {
    .team-slider-card .team-image-wrap,
    .team-home-slider .team-slider-card .team-image-wrap {
        height: 220px !important;
        min-height: 220px !important;
    }
    .team-slider-card .team-card-body,
    .team-card-body {
        padding: 17px;
    }
    .team-role {
        font-size: .59rem;
    }
    .team-tags span {
        font-size: .62rem;
    }
}

/* === Footer cleanup patch p8 === */
.footer-clean {
    position: relative;
    overflow: hidden;
    color: #5E708A;
    background:
        radial-gradient(circle at 12% 8%, rgba(21,94,239,.10), transparent 28%),
        linear-gradient(180deg, #F8FBFF 0%, #EEF5FF 100%) !important;
    border-top: 1px solid rgba(155,178,210,.38);
}
.footer-clean::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(17,42,85,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(17,42,85,.035) 1px, transparent 1px);
    background-size: 36px 36px;
    opacity: .65;
    pointer-events: none;
}
.footer-clean .container { position: relative; z-index: 1; }
.footer-main { padding-top: 3.2rem !important; padding-bottom: 2.7rem !important; }
.footer-identity h5 {
    color: #102A55;
    font-weight: 900;
    letter-spacing: -.03em;
}
.footer-clean .footer-brand {
    width: 38px;
    height: 38px;
    border-radius: 13px;
    background: #FFFFFF !important;
    border: 1px solid rgba(155,178,210,.35);
    box-shadow: 0 10px 24px rgba(16,40,77,.08) !important;
}
.footer-clean .footer-brand img { width: 34px; height: 34px; }
.footer-intro {
    max-width: 420px;
    color: #5C6E87 !important;
    line-height: 1.75;
    font-size: .98rem;
}
.footer-title {
    margin-bottom: 1rem;
    color: #102A55;
    font-weight: 900;
    letter-spacing: -.02em;
}
.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
}
.footer-links a,
.footer-menu a {
    color: #5C6E87 !important;
    font-weight: 800;
    transition: .22s ease;
}
.footer-links a:hover,
.footer-menu a:hover {
    color: #0B57D0 !important;
    transform: translateY(-1px);
}
.footer-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.footer-chips span {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 7px 12px;
    border-radius: 999px;
    color: #25415F;
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(155,178,210,.42);
    font-size: .88rem;
    font-weight: 800;
    box-shadow: 0 8px 22px rgba(16,40,77,.05);
}
.footer-bottom {
    padding: 18px 0 24px;
    border-top: 1px solid rgba(155,178,210,.38);
    color: #667891;
    font-size: .92rem;
}
.footer-clean .footer-menu {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 12px 18px;
}
.footer-clean .footer-menu a { margin-left: 0 !important; }
.footer-clean .btn-social,
.footer-clean .btn.btn-link,
.footer-clean .text-white,
.footer-clean p { color: inherit; }
.footer-clean h5,
.footer-clean h6 { color: #102A55 !important; }

@media (max-width: 991.98px) {
    .footer-main { padding-top: 2.6rem !important; padding-bottom: 2.1rem !important; }
    .footer-links { gap: 9px 16px; }
}
@media (max-width: 767.98px) {
    .footer-clean { text-align: center; }
    .footer-identity { justify-content: center; }
    .footer-intro { margin-left: auto; margin-right: auto; }
    .footer-links,
    .footer-chips,
    .footer-clean .footer-menu {
        justify-content: center;
    }
    .footer-title { margin-top: .4rem; margin-bottom: .75rem; }
    .footer-bottom { padding-bottom: 22px; }
}
@media (max-width: 420px) {
    .footer-main { padding-left: 4px; padding-right: 4px; }
    .footer-links { gap: 8px 13px; }
    .footer-chips span { font-size: .82rem; padding: 7px 10px; }
    .footer-bottom { font-size: .86rem; }
}


/* Targeted section scroll spacing */
#projects, #services, #project-form, #team {
    scroll-margin-top: 110px;
}

@media (max-width: 991.98px) {
    #projects, #services, #project-form, #team {
        scroll-margin-top: 92px;
    }
}

/* === About page project preview refresh p12 === */
.about-preview-frame {
    position: relative;
    width: min(100%, 620px);
    margin: 0 auto;
    padding: 18px;
    border-radius: 34px;
    background:
        radial-gradient(circle at 12% 8%, rgba(26, 111, 255, .12), transparent 35%),
        radial-gradient(circle at 88% 0%, rgba(24, 177, 216, .16), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,.96), rgba(247,251,255,.92));
    border: 1px solid #D8E7FA;
    box-shadow: 0 30px 80px rgba(15, 41, 78, .13);
    overflow: hidden;
}
.about-preview-frame::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(19, 91, 181, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(19, 91, 181, .045) 1px, transparent 1px);
    background-size: 34px 34px;
    pointer-events: none;
}
.about-preview-top {
    position: relative;
    z-index: 2;
    height: 34px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 4px 12px;
    color: var(--dark);
}
.about-preview-top span {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    display: inline-block;
}
.about-preview-top span:nth-child(1) { background: #FF735C; }
.about-preview-top span:nth-child(2) { background: #F7C64A; }
.about-preview-top span:nth-child(3) { background: #33CDB4; }
.about-preview-top strong {
    margin-left: 8px;
    font-size: .92rem;
    font-weight: 900;
    color: #0B254A;
}
.about-project-slider {
    position: relative;
    z-index: 2;
}
.about-project-preview-card {
    display: grid;
    grid-template-rows: minmax(285px, 1fr) auto;
    min-height: 500px;
    border-radius: 28px;
    overflow: hidden;
    background: #FFFFFF;
    border: 1px solid #DDEAF8;
    box-shadow: 0 18px 45px rgba(14, 39, 75, .10);
}
.about-project-media {
    position: relative;
    min-height: 285px;
    background: #EAF4FF;
    overflow: hidden;
}
.about-project-media img {
    width: 100%;
    height: 100%;
    min-height: 285px;
    object-fit: cover;
    display: block;
    transform: scale(1.01);
}
.about-project-body {
    padding: 24px 26px 26px;
}
.about-project-body span {
    display: inline-flex;
    align-items: center;
    width: max-content;
    max-width: 100%;
    padding: 7px 12px;
    border-radius: 999px;
    background: #EDF5FF;
    color: var(--primary);
    border: 1px solid #D7E8FF;
    text-transform: uppercase;
    letter-spacing: .055em;
    font-size: .72rem;
    font-weight: 900;
    margin-bottom: 14px;
}
.about-project-body h5 {
    color: #08244A;
    font-size: 1.42rem;
    line-height: 1.15;
    margin-bottom: 10px;
}
.about-project-body p {
    color: #536A8C;
    margin-bottom: 0;
    line-height: 1.7;
    font-size: .98rem;
}
.about-project-slider .owl-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
}
.about-project-slider .owl-dot span {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: #C8D8EE;
    display: block;
    transition: all .25s ease;
}
.about-project-slider .owl-dot.active span {
    width: 28px;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
}
@media (min-width: 1200px) {
    .about-preview-frame { width: min(100%, 660px); }
    .about-project-preview-card { min-height: 525px; }
    .about-project-media, .about-project-media img { min-height: 320px; }
}
@media (max-width: 991.98px) {
    .about-preview-frame { width: min(100%, 680px); }
    .about-project-preview-card { min-height: auto; }
    .about-project-media, .about-project-media img { min-height: 330px; }
}
@media (max-width: 575.98px) {
    .about-preview-frame {
        padding: 12px;
        border-radius: 26px;
    }
    .about-project-preview-card {
        border-radius: 22px;
    }
    .about-project-media, .about-project-media img {
        min-height: 235px;
    }
    .about-project-body {
        padding: 20px 18px 22px;
    }
    .about-project-body h5 {
        font-size: 1.18rem;
    }
    .about-project-body p {
        font-size: .92rem;
    }
}


/* === About page preview sizing fix p13 === */
#about .about-preview-frame {
    width: min(100%, 520px);
    height: 520px;
    aspect-ratio: 1 / 1;
    margin-left: auto;
    margin-right: auto;
    padding: 14px;
    border-radius: 30px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#about .about-preview-top {
    height: 34px;
    flex: 0 0 34px;
    padding: 0 4px 10px;
}

#about .about-project-slider {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

#about .about-project-slider .owl-stage-outer {
    flex: 1 1 auto;
    height: 430px;
    min-height: 0;
    border-radius: 24px;
}

#about .about-project-slider .owl-stage,
#about .about-project-slider .owl-item {
    height: 100%;
}

#about .about-project-preview-card {
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-rows: 58% 42%;
    border-radius: 24px;
}

#about .about-project-media {
    height: 100%;
    min-height: 0;
}

#about .about-project-media img {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
    object-position: center;
}

#about .about-project-body {
    min-height: 0;
    padding: 18px 20px 20px;
}

#about .about-project-body span {
    font-size: .68rem;
    padding: 6px 11px;
    margin-bottom: 10px;
}

#about .about-project-body h5 {
    font-size: 1.18rem;
    line-height: 1.18;
    margin-bottom: 8px;
}

#about .about-project-body p {
    font-size: .9rem;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#about .about-project-slider .owl-dots {
    flex: 0 0 auto;
    margin-top: 12px;
}

@media (min-width: 1200px) {
    #about .about-preview-frame {
        width: min(100%, 520px);
        height: 520px;
    }
}

@media (max-width: 1199.98px) {
    #about .about-preview-frame {
        width: min(100%, 485px);
        height: 485px;
    }
    #about .about-project-slider .owl-stage-outer {
        height: 398px;
    }
}

@media (max-width: 991.98px) {
    #about .about-preview-frame {
        width: min(100%, 500px);
        height: 500px;
        margin-bottom: 10px;
    }
    #about .about-project-slider .owl-stage-outer {
        height: 412px;
    }
}

@media (max-width: 575.98px) {
    #about .about-preview-frame {
        width: min(100%, 420px);
        height: clamp(405px, 94vw, 440px);
        padding: 11px;
        border-radius: 24px;
    }
    #about .about-preview-top {
        height: 30px;
        flex-basis: 30px;
        font-size: .82rem;
    }
    #about .about-project-slider .owl-stage-outer {
        height: calc(100% - 48px);
        border-radius: 20px;
    }
    #about .about-project-preview-card {
        grid-template-rows: 55% 45%;
        border-radius: 20px;
    }
    #about .about-project-body {
        padding: 15px 16px 17px;
    }
    #about .about-project-body span {
        font-size: .62rem;
        margin-bottom: 8px;
    }
    #about .about-project-body h5 {
        font-size: 1.02rem;
        margin-bottom: 6px;
    }
    #about .about-project-body p {
        font-size: .84rem;
        line-height: 1.45;
    }
    #about .about-project-slider .owl-dots {
        margin-top: 8px;
    }
}

/* === Hero preview controlled frame p14 === */
.hero-device {
    width: min(100%, 690px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    border-radius: 30px !important;
    overflow: hidden !important;
}

.hero-device .project-slider {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
}

.hero-device .project-slider .owl-stage-outer {
    border-radius: 24px !important;
    overflow: hidden !important;
}

.hero-device .project-slider .owl-stage,
.hero-device .project-slider .owl-item {
    height: 100% !important;
}

.hero-device .showcase-slide {
    height: 430px !important;
    min-height: 430px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr) !important;
    gap: 16px !important;
    align-items: stretch !important;
}

.hero-device .showcase-media {
    height: 100% !important;
    min-height: 0 !important;
    border-radius: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px !important;
    background:
        radial-gradient(circle at 15% 10%, rgba(21,94,239,.10), transparent 35%),
        linear-gradient(180deg, #F3F8FF, #EAF3FF) !important;
}

.hero-device .showcase-media img {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    object-fit: contain !important;
    object-position: center !important;
    border-radius: 17px !important;
    background: #FFFFFF !important;
    box-shadow: 0 14px 34px rgba(15, 41, 78, .10) !important;
}

.hero-device .showcase-content {
    height: 100% !important;
    min-height: 0 !important;
    padding: 24px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

.hero-device .showcase-content h5 {
    font-size: clamp(1.28rem, 1.75vw, 1.62rem) !important;
    line-height: 1.15 !important;
}

.hero-device .showcase-content p {
    font-size: .94rem !important;
    line-height: 1.58 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.hero-device .showcase-tags {
    gap: 7px !important;
    margin-top: 4px !important;
}

.hero-device .showcase-tags span {
    font-size: .72rem !important;
    padding: 6px 9px !important;
}

.hero-device .project-slider .owl-dots {
    margin-top: 14px !important;
}

@media (max-width: 1199.98px) {
    .hero-device {
        width: min(100%, 640px) !important;
    }
    .hero-device .showcase-slide {
        height: auto !important;
        min-height: 0 !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
    .hero-device .showcase-media {
        height: 315px !important;
    }
    .hero-device .showcase-content {
        height: auto !important;
        padding: 22px !important;
        justify-content: flex-start !important;
    }
}

@media (max-width: 991.98px) {
    .hero-device {
        width: min(100%, 620px) !important;
    }
    .hero-device .showcase-media {
        height: 300px !important;
    }
}

@media (max-width: 575.98px) {
    .hero-device {
        width: 100% !important;
        padding: 12px !important;
        border-radius: 24px !important;
    }
    .hero-device .project-slider .owl-stage-outer {
        border-radius: 19px !important;
    }
    .hero-device .showcase-slide {
        gap: 12px !important;
    }
    .hero-device .showcase-media {
        height: clamp(205px, 58vw, 250px) !important;
        border-radius: 19px !important;
        padding: 9px !important;
    }
    .hero-device .showcase-media img {
        border-radius: 14px !important;
    }
    .hero-device .showcase-content {
        padding: 18px !important;
        border-radius: 19px !important;
    }
    .hero-device .showcase-content p {
        -webkit-line-clamp: 2 !important;
        font-size: .9rem !important;
    }
}

/* === Hero stage and project image mapping cleanup p15 === */
.hero-device .showcase-media {
    background:
        radial-gradient(circle at 18% 12%, rgba(11, 87, 208, .08), transparent 34%),
        linear-gradient(180deg, #F8FBFF 0%, #F3F8FF 100%) !important;
    padding: 10px !important;
}
.hero-device .showcase-media img {
    background: transparent !important;
    box-shadow: none !important;
    object-fit: contain !important;
    object-position: center !important;
}
.hero-device .showcase-slide {
    overflow: hidden !important;
}
.project-image-wrap img[src*="project-school-cloud"],
.project-image-wrap img[src*="project-pos-cloud"],
.project-image-wrap img[src*="project-acadelyn"],
.project-image-wrap img[src*="project-doctorev"] {
    object-fit: contain !important;
    object-position: center !important;
    background: linear-gradient(180deg, #F8FBFF, #EEF6FF) !important;
}
.project-image-wrap img[src*="project-acadelyn"],
.project-image-wrap img[src*="project-school-cloud"],
.project-image-wrap img[src*="project-pos-cloud"] {
    padding: 0 !important;
}
@media (max-width: 575.98px) {
    .hero-device .showcase-media {
        padding: 8px !important;
    }
}

/* === Hero preview image-first card refresh p16 === */
.hero-device {
    width: min(100%, 640px) !important;
    padding: 18px !important;
    border-radius: 34px !important;
    background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(247,251,255,.92)) !important;
    border: 1px solid rgba(206,222,244,.95) !important;
    box-shadow: 0 30px 70px rgba(15, 41, 78, .14) !important;
}
.hero-device .device-top {
    margin-bottom: 14px !important;
}
.hero-device .project-slider {
    position: relative !important;
    display: block !important;
}
.hero-device .project-slider .owl-stage-outer {
    border-radius: 28px !important;
    overflow: hidden !important;
}
.hero-device .showcase-slide {
    height: auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
.hero-device .showcase-media {
    width: 100% !important;
    height: clamp(290px, 27vw, 345px) !important;
    min-height: 0 !important;
    padding: 18px !important;
    border-radius: 28px !important;
    border: 1px solid rgba(211,225,245,.95) !important;
    background:
        radial-gradient(circle at 25% 15%, rgba(10,132,255,.10), transparent 35%),
        radial-gradient(circle at 85% 25%, rgba(20,184,166,.10), transparent 30%),
        linear-gradient(180deg, #F9FCFF 0%, #EEF6FF 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}
.hero-device .showcase-media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    border-radius: 20px !important;
    background: transparent !important;
    box-shadow: none !important;
}
.hero-device .showcase-content {
    position: relative !important;
    z-index: 2 !important;
    width: calc(100% - 34px) !important;
    height: auto !important;
    min-height: 0 !important;
    margin: -18px auto 0 !important;
    padding: 22px 24px !important;
    border-radius: 24px !important;
    background: linear-gradient(135deg, #102138 0%, #1E314C 100%) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    box-shadow: 0 22px 48px rgba(16,33,56,.24) !important;
    display: block !important;
    color: #fff !important;
}
.hero-device .showcase-content small {
    display: inline-flex !important;
    align-items: center !important;
    width: fit-content !important;
    margin-bottom: 9px !important;
    padding: 7px 12px !important;
    border-radius: 999px !important;
    color: #BFE9FF !important;
    background: rgba(255,255,255,.10) !important;
    border: 1px solid rgba(255,255,255,.13) !important;
    letter-spacing: .04em !important;
}
.hero-device .showcase-content h5 {
    color: #fff !important;
    font-size: clamp(1.18rem, 1.55vw, 1.45rem) !important;
    line-height: 1.16 !important;
    margin-bottom: 8px !important;
}
.hero-device .showcase-content p {
    color: rgba(238,246,255,.88) !important;
    font-size: .94rem !important;
    line-height: 1.55 !important;
    margin-bottom: 13px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}
.hero-device .showcase-tags {
    display: none !important;
}
.hero-device .showcase-content a {
    color: #7FE7FF !important;
    font-weight: 800 !important;
}
.hero-device .project-slider .owl-dots {
    position: absolute !important;
    left: 50% !important;
    top: clamp(262px, 25vw, 314px) !important;
    transform: translateX(-50%) !important;
    z-index: 5 !important;
    margin: 0 !important;
    padding: 7px 10px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.55) !important;
    backdrop-filter: blur(8px) !important;
    display: flex !important;
    justify-content: center !important;
}
.hero-device .project-slider .owl-dot span {
    width: 8px !important;
    height: 8px !important;
    margin: 0 4px !important;
    background: rgba(120,145,178,.55) !important;
}
.hero-device .project-slider .owl-dot.active span {
    width: 24px !important;
    background: linear-gradient(90deg, var(--primary), var(--secondary)) !important;
}

@media (max-width: 1199.98px) {
    .hero-device {
        width: min(100%, 600px) !important;
    }
    .hero-device .showcase-media {
        height: 315px !important;
    }
    .hero-device .project-slider .owl-dots {
        top: 286px !important;
    }
}
@media (max-width: 991.98px) {
    .hero-device {
        width: min(100%, 620px) !important;
        margin-top: 20px !important;
    }
    .hero-device .showcase-media {
        height: clamp(260px, 48vw, 330px) !important;
    }
    .hero-device .project-slider .owl-dots {
        top: clamp(232px, 43vw, 300px) !important;
    }
}
@media (max-width: 575.98px) {
    .hero-device {
        padding: 12px !important;
        border-radius: 26px !important;
    }
    .hero-device .device-top strong {
        font-size: .84rem !important;
    }
    .hero-device .showcase-media {
        height: clamp(205px, 58vw, 245px) !important;
        padding: 10px !important;
        border-radius: 22px !important;
    }
    .hero-device .showcase-media img {
        border-radius: 16px !important;
    }
    .hero-device .showcase-content {
        width: calc(100% - 18px) !important;
        margin-top: -12px !important;
        padding: 17px 18px !important;
        border-radius: 20px !important;
    }
    .hero-device .showcase-content h5 {
        font-size: 1.12rem !important;
    }
    .hero-device .showcase-content p {
        font-size: .88rem !important;
        -webkit-line-clamp: 2 !important;
    }
    .hero-device .project-slider .owl-dots {
        top: clamp(179px, 52vw, 218px) !important;
    }
}


/* === Hero preview refined fit and light caption p17 === */
.hero-device {
    width: min(100%, 635px) !important;
    padding: 16px !important;
    border-radius: 32px !important;
    background:
        radial-gradient(circle at 15% 0%, rgba(10,132,255,.08), transparent 36%),
        linear-gradient(180deg, rgba(255,255,255,.96), rgba(246,250,255,.94)) !important;
    border: 1px solid rgba(200,218,244,.95) !important;
    box-shadow: 0 28px 64px rgba(15, 41, 78, .13) !important;
}
.hero-device .device-top {
    margin-bottom: 12px !important;
}
.hero-device .project-slider .owl-stage-outer {
    border-radius: 26px !important;
    overflow: hidden !important;
}
.hero-device .showcase-slide {
    background: transparent !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}
.hero-device .showcase-media {
    height: clamp(255px, 24vw, 305px) !important;
    padding: 16px !important;
    border-radius: 26px !important;
    background:
        radial-gradient(circle at 18% 12%, rgba(35,113,210,.10), transparent 34%),
        radial-gradient(circle at 85% 20%, rgba(67,190,205,.10), transparent 32%),
        linear-gradient(180deg, #F7FBFF 0%, #EEF6FF 100%) !important;
    border: 1px solid rgba(209,225,246,.95) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 14px 32px rgba(16,60,105,.07) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}
.hero-device .showcase-media img {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
    border-radius: 18px !important;
    background: transparent !important;
    box-shadow: 0 10px 24px rgba(16, 48, 90, .07) !important;
}
.hero-device .showcase-content {
    width: 100% !important;
    margin: 0 !important;
    padding: 14px 16px 15px !important;
    border-radius: 22px !important;
    background:
        linear-gradient(135deg, rgba(235,246,255,.92), rgba(246,251,255,.78)) !important;
    border: 1px solid rgba(193,216,244,.80) !important;
    box-shadow: 0 14px 34px rgba(15, 61, 112, .10) !important;
    color: #183454 !important;
    backdrop-filter: blur(10px) !important;
}
.hero-device .showcase-content small {
    margin-bottom: 7px !important;
    padding: 5px 10px !important;
    font-size: .69rem !important;
    line-height: 1 !important;
    color: #24629C !important;
    background: rgba(255,255,255,.72) !important;
    border: 1px solid rgba(160,196,232,.55) !important;
    letter-spacing: .035em !important;
}
.hero-device .showcase-content h5 {
    color: #173653 !important;
    font-size: clamp(1rem, 1.25vw, 1.16rem) !important;
    line-height: 1.2 !important;
    margin-bottom: 5px !important;
    font-weight: 800 !important;
}
.hero-device .showcase-content p {
    color: #536C88 !important;
    font-size: .83rem !important;
    line-height: 1.45 !important;
    margin-bottom: 10px !important;
    -webkit-line-clamp: 2 !important;
}
.hero-device .showcase-content a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    color: #155F9F !important;
    font-weight: 800 !important;
    font-size: .84rem !important;
    padding: 7px 11px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.72) !important;
    border: 1px solid rgba(151,192,230,.54) !important;
}
.hero-device .showcase-content a:hover {
    color: #0E4F88 !important;
    transform: translateY(-1px) !important;
}
.hero-device .project-slider .owl-dots {
    position: static !important;
    transform: none !important;
    margin: -2px auto 0 !important;
    padding: 6px 9px !important;
    width: fit-content !important;
    background: rgba(255,255,255,.68) !important;
    border: 1px solid rgba(198,218,242,.70) !important;
    box-shadow: 0 8px 20px rgba(40, 86, 140, .08) !important;
    backdrop-filter: blur(8px) !important;
}
.hero-device .project-slider .owl-dot span {
    width: 7px !important;
    height: 7px !important;
    margin: 0 3.5px !important;
}
.hero-device .project-slider .owl-dot.active span {
    width: 21px !important;
}
@media (max-width: 1199.98px) {
    .hero-device { width: min(100%, 600px) !important; }
    .hero-device .showcase-media { height: clamp(245px, 30vw, 295px) !important; }
}
@media (max-width: 991.98px) {
    .hero-device {
        width: min(100%, 620px) !important;
        margin: 20px auto 0 !important;
    }
    .hero-device .showcase-media { height: clamp(235px, 46vw, 300px) !important; }
}
@media (max-width: 575.98px) {
    .hero-device {
        padding: 12px !important;
        border-radius: 25px !important;
    }
    .hero-device .showcase-media {
        height: clamp(190px, 56vw, 232px) !important;
        padding: 10px !important;
        border-radius: 20px !important;
    }
    .hero-device .showcase-media img {
        border-radius: 14px !important;
    }
    .hero-device .showcase-content {
        padding: 12px 13px 13px !important;
        border-radius: 18px !important;
    }
    .hero-device .showcase-content small {
        font-size: .64rem !important;
        padding: 5px 9px !important;
    }
    .hero-device .showcase-content h5 {
        font-size: 1rem !important;
        margin-bottom: 4px !important;
    }
    .hero-device .showcase-content p {
        font-size: .79rem !important;
        line-height: 1.38 !important;
        margin-bottom: 8px !important;
        -webkit-line-clamp: 2 !important;
    }
    .hero-device .showcase-content a {
        font-size: .78rem !important;
        padding: 6px 10px !important;
    }
}


/* === About preview alignment and form validation refresh p18 === */
#about .about-preview-frame{width:min(100%,520px);height:500px;padding:14px;border-radius:30px;background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(246,250,255,.95));border:1px solid #dbe8f9;box-shadow:0 26px 72px rgba(15,41,78,.12);}
#about .about-project-slider{display:flex;flex-direction:column;min-height:0;}
#about .about-project-slider .owl-stage-outer{height:424px;border-radius:24px;overflow:hidden;}
#about .about-project-preview-card{height:100%;display:flex;flex-direction:column;background:transparent;border:none;box-shadow:none;padding:0;gap:12px;}
#about .about-project-media{flex:1 1 auto;min-height:0;border-radius:24px;background:linear-gradient(180deg,#f5f9ff,#edf4ff);border:1px solid #dbe7f8;display:flex;align-items:center;justify-content:center;padding:18px;overflow:hidden;}
#about .about-project-media img{width:100%;height:100%;object-fit:contain !important;object-position:center;min-height:0;background:transparent;}
#about .about-project-body{flex:0 0 auto;padding:14px 16px 15px;border-radius:20px;background:linear-gradient(135deg,rgba(232,242,255,.9),rgba(244,249,255,.84));border:1px solid rgba(170,199,239,.55);backdrop-filter:blur(6px);box-shadow:0 14px 34px rgba(18,58,108,.08);}
#about .about-project-body span{font-size:.62rem;padding:5px 10px;margin-bottom:8px;background:#eef5ff;border-color:#d9e9ff;color:#0b57d0;}
#about .about-project-body h5{font-size:1.04rem;line-height:1.18;margin-bottom:6px;color:#0f2c57;}
#about .about-project-body p{font-size:.86rem;line-height:1.48;color:#5a7090;-webkit-line-clamp:2;}
#about .about-project-slider .owl-dots{margin-top:10px;}
@media (max-width:1199.98px){#about .about-preview-frame{width:min(100%,490px);height:474px;}#about .about-project-slider .owl-stage-outer{height:398px;}}
@media (max-width:991.98px){#about .about-preview-frame{width:min(100%,510px);height:486px;margin-bottom:10px;}#about .about-project-slider .owl-stage-outer{height:410px;}}
@media (max-width:575.98px){#about .about-preview-frame{width:min(100%,410px);height:auto;aspect-ratio:1/1;padding:11px;border-radius:24px;}#about .about-preview-top{padding:0 2px 8px;}#about .about-project-slider .owl-stage-outer{height:calc(100% - 44px);min-height:330px;border-radius:20px;}#about .about-project-preview-card{gap:10px;}#about .about-project-media{padding:14px;border-radius:20px;}#about .about-project-body{padding:12px 13px 13px;border-radius:18px;}#about .about-project-body h5{font-size:.97rem;}#about .about-project-body p{font-size:.81rem;line-height:1.42;}}
.project-request-form .form-field-wrap{position:relative;}
.field-error{display:block;min-height:18px;margin-top:7px;padding-left:4px;color:#d84d57;font-size:.82rem;font-weight:700;}
.form-control.is-invalid{border-color:#e07b83 !important;background:#fff8f8;box-shadow:0 0 0 4px rgba(216,77,87,.08) !important;}
.form-control.is-valid{border-color:#7ac3a1 !important;background:#fbfffd;}
.form-status-message{display:none;margin-bottom:14px;padding:12px 14px;border-radius:16px;font-size:.92rem;font-weight:700;line-height:1.5;}
.form-status-message.show{display:block;}
.form-status-message.error{background:#fff4f5;color:#b83d48;border:1px solid #f1c1c7;}
.form-status-message.success{background:#eef7ff;color:#0d4f93;border:1px solid #cde0fb;}
@media (max-width:575.98px){.field-error{font-size:.79rem;min-height:16px;}.form-status-message{font-size:.88rem;padding:11px 12px;}}


/* === Project card caption refinement p19 === */
.project-preview-section .premium-project-card {
    background:
        linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,251,255,.94));
    border-color: rgba(171, 201, 241, .58);
    box-shadow: 0 24px 70px rgba(17,42,85,.105);
}
.project-preview-section .project-card-body {
    position: relative;
    margin: 0 18px 18px;
    padding: 22px 22px 23px;
    border-radius: 26px;
    background:
        linear-gradient(135deg, rgba(235,244,255,.94), rgba(248,252,255,.86)),
        radial-gradient(circle at 88% 0%, rgba(22,166,199,.10), transparent 36%);
    border: 1px solid rgba(174, 203, 242, .62);
    box-shadow: 0 18px 45px rgba(16, 46, 91, .075);
    backdrop-filter: blur(8px);
}
.project-preview-section .project-card-body::before {
    content: '';
    position: absolute;
    inset: 1px;
    border-radius: 25px;
    background: linear-gradient(180deg, rgba(255,255,255,.46), rgba(255,255,255,0));
    pointer-events: none;
}
.project-preview-section .project-category,
.project-preview-section .project-card-body h5,
.project-preview-section .project-card-body p,
.project-preview-section .project-tags,
.project-preview-section .project-card-body strong {
    position: relative;
    z-index: 1;
}
.project-preview-section .project-category {
    padding: 6px 11px;
    margin-bottom: 13px;
    font-size: .68rem;
    letter-spacing: .055em;
    background: rgba(238,245,255,.92);
    border: 1px solid rgba(189, 214, 249, .92);
    color: #0B57D0;
}
.project-preview-section .project-card-body h5 {
    font-size: clamp(1.16rem, 1.4vw, 1.35rem);
    line-height: 1.18;
    margin-bottom: 9px;
    color: #0D2A55;
}
.project-preview-section .project-card-body p {
    color: #526985;
    line-height: 1.58;
    margin-bottom: 15px;
}
.project-preview-section .project-tags {
    gap: 7px;
    margin-bottom: 18px;
}
.project-preview-section .project-tags span {
    padding: 6px 10px;
    background: rgba(255,255,255,.78);
    border: 1px solid rgba(205, 224, 248, .8);
    color: #3F5876;
    font-size: .74rem;
}
.project-preview-section .project-card-body strong {
    display: inline-flex;
    align-items: center;
    width: max-content;
    gap: 6px;
    padding: 9px 0 0;
    color: #0B57D0;
    font-size: .95rem;
}
.project-preview-section .premium-project-card:hover .project-card-body {
    border-color: rgba(126, 176, 244, .78);
    box-shadow: 0 22px 55px rgba(16, 46, 91, .105);
}
.project-preview-section .project-image-wrap {
    border-bottom: 1px solid rgba(198, 219, 246, .55);
}
@media (max-width: 575.98px) {
    .project-preview-section .project-card-body {
        margin: 0 12px 12px;
        padding: 18px 17px 19px;
        border-radius: 22px;
    }
    .project-preview-section .project-category {
        font-size: .62rem;
        margin-bottom: 10px;
    }
    .project-preview-section .project-card-body h5 {
        font-size: 1.08rem;
    }
    .project-preview-section .project-card-body p {
        font-size: .9rem;
        line-height: 1.52;
    }
    .project-preview-section .project-tags span {
        font-size: .7rem;
    }
}


/* === Hero service marquee and footer service icons p20 === */
.hero-service-marquee {
    overflow: hidden;
    max-width: min(100%, 365px);
    gap: 9px;
    white-space: nowrap;
    padding-right: 0;
}
.hero-service-marquee > i {
    flex: 0 0 auto;
    position: relative;
    z-index: 2;
}
.hero-service-track {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    min-width: max-content;
    padding-right: 18px;
    animation: arkosHeroServiceSlide 22s linear infinite;
    will-change: transform;
}
.hero-service-track span {
    display: inline-flex;
    align-items: center;
    position: relative;
    color: inherit;
}
.hero-service-track span:not(:last-child)::after {
    content: "•";
    margin-left: 18px;
    color: #0B57D0;
    opacity: .72;
}
.hero-service-marquee:hover .hero-service-track {
    animation-play-state: paused;
}
@keyframes arkosHeroServiceSlide {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.footer-service-chips span {
    gap: 8px;
}
.footer-service-chips i {
    width: 24px;
    height: 24px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #0B57D0;
    background: linear-gradient(135deg, rgba(224,239,255,.95), rgba(242,248,255,.86));
    border: 1px solid rgba(129,174,236,.38);
    font-size: .78rem;
    flex: 0 0 auto;
}
@media (max-width: 575.98px) {
    .hero-service-marquee {
        max-width: min(100%, 330px);
    }
    .hero-service-track {
        animation-duration: 24s;
        gap: 15px;
    }
    .hero-service-track span:not(:last-child)::after {
        margin-left: 15px;
    }
    .footer-service-chips span {
        width: 100%;
        justify-content: flex-start;
    }
}
@media (prefers-reduced-motion: reduce) {
    .hero-service-track { animation: none; transform: none; }
}


/* === Premium hero service ribbon p21 === */

.hero-service-ribbon {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: min(100%, 428px);
    max-width: min(100%, 428px);
    min-height: 48px;
    padding: 6px 8px;
    overflow: hidden;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(238,247,255,.92));
    border: 1px solid rgba(161,196,241,.62);
    box-shadow: 0 16px 40px rgba(23, 83, 156, .10), inset 0 1px 0 rgba(255,255,255,.96);
    backdrop-filter: blur(8px);
}
.hero-service-ribbon::before,
.hero-service-ribbon::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 42px;
    z-index: 3;
    pointer-events: none;
}
.hero-service-ribbon::before {
    left: 0;
    background: linear-gradient(90deg, rgba(255,255,255,.98), rgba(255,255,255,0));
}
.hero-service-ribbon::after {
    right: 0;
    background: linear-gradient(270deg, rgba(244,249,255,.98), rgba(244,249,255,0));
}
.hero-service-ribbon .hero-service-track {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: max-content;
    padding-right: 12px;
    animation: arkosHeroServiceSlide 28s linear infinite;
}
.hero-service-ribbon .hero-service-group {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: max-content;
}
.hero-service-ribbon .hero-service-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border-radius: 999px;
    color: #0B57D0;
    background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(232,242,255,.86));
    border: 1px solid rgba(161,196,241,.54);
    box-shadow: 0 8px 18px rgba(15, 86, 180, .07);
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .055em;
    line-height: 1;
    text-transform: uppercase;
}
.hero-service-ribbon .hero-service-item i {
    width: 22px;
    height: 22px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #0B57D0;
    background: linear-gradient(135deg, rgba(220,237,255,.95), rgba(246,250,255,.95));
    border: 1px solid rgba(139,184,241,.42);
    font-size: .72rem;
    flex: 0 0 auto;
}
.hero-service-ribbon .hero-service-track span::after,
.hero-service-ribbon .hero-service-track span:not(:last-child)::after {
    content: none !important;
    display: none !important;
}
.hero-service-ribbon:hover .hero-service-track {
    animation-play-state: paused;
}
@media (max-width: 575.98px) {
    .hero-service-ribbon {
        width: min(100%, 350px);
        max-width: min(100%, 350px);
        min-height: 46px;
        padding: 6px 7px;
    }
    .hero-service-ribbon::before,
    .hero-service-ribbon::after {
        width: 28px;
    }
    .hero-service-ribbon .hero-service-track {
        animation-duration: 30s;
        gap: 10px;
    }
    .hero-service-ribbon .hero-service-group {
        gap: 8px;
    }
    .hero-service-ribbon .hero-service-item {
        padding: 8px 10px;
        font-size: .68rem;
        letter-spacing: .045em;
    }
    .hero-service-ribbon .hero-service-item i {
        width: 20px;
        height: 20px;
        font-size: .66rem;
    }
}
@media (prefers-reduced-motion: reduce) {
    .hero-service-ribbon .hero-service-track { animation: none; transform: none; }
}


/* === Floating hero service chips p22 === */
.hero-service-ribbon {
    width: min(100%, 438px) !important;
    max-width: min(100%, 438px) !important;
    min-height: 44px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    overflow: hidden !important;
    border-radius: 0 !important;
}
.hero-service-ribbon.eyebrow {
    color: inherit !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}
.hero-service-ribbon.eyebrow::before {
    display: none !important;
}
.hero-service-ribbon::before,
.hero-service-ribbon::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 34px !important;
    z-index: 3 !important;
    pointer-events: none !important;
}
.hero-service-ribbon::before {
    left: 0 !important;
    background: linear-gradient(90deg, rgba(238,247,255,.96), rgba(238,247,255,0)) !important;
}
.hero-service-ribbon::after {
    right: 0 !important;
    background: linear-gradient(270deg, rgba(238,247,255,.96), rgba(238,247,255,0)) !important;
}
.hero-service-ribbon .hero-service-track {
    gap: 14px !important;
    padding: 2px 14px 2px 0 !important;
    animation: arkosHeroServiceSlide 30s linear infinite !important;
}
.hero-service-ribbon .hero-service-group {
    gap: 12px !important;
}
.hero-service-ribbon .hero-service-item {
    padding: 9px 14px !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(235,245,255,.72)) !important;
    border: 1px solid rgba(163,197,241,.58) !important;
    box-shadow: 0 10px 24px rgba(21,82,164,.08), inset 0 1px 0 rgba(255,255,255,.92) !important;
    backdrop-filter: blur(7px) !important;
    color: #0B57D0 !important;
    font-size: .74rem !important;
    font-weight: 850 !important;
    letter-spacing: .045em !important;
    text-transform: uppercase !important;
}
.hero-service-ribbon .hero-service-item i {
    width: 22px !important;
    height: 22px !important;
    border-radius: 9px !important;
    color: #0B57D0 !important;
    background: linear-gradient(135deg, rgba(222,238,255,.96), rgba(255,255,255,.9)) !important;
    border: 1px solid rgba(137,181,239,.42) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.95) !important;
    font-size: .7rem !important;
}
.hero-service-ribbon .hero-service-track span::after,
.hero-service-ribbon .hero-service-track span:not(:last-child)::after {
    content: none !important;
    display: none !important;
}
.hero-service-ribbon:hover .hero-service-track {
    animation-play-state: paused !important;
}
@media (max-width: 575.98px) {
    .hero-service-ribbon {
        width: min(100%, 340px) !important;
        max-width: min(100%, 340px) !important;
        min-height: 42px !important;
    }
    .hero-service-ribbon::before,
    .hero-service-ribbon::after {
        width: 24px !important;
    }
    .hero-service-ribbon .hero-service-track {
        gap: 10px !important;
        padding-right: 10px !important;
        animation-duration: 32s !important;
    }
    .hero-service-ribbon .hero-service-group {
        gap: 9px !important;
    }
    .hero-service-ribbon .hero-service-item {
        padding: 8px 11px !important;
        font-size: .66rem !important;
        letter-spacing: .04em !important;
    }
    .hero-service-ribbon .hero-service-item i {
        width: 20px !important;
        height: 20px !important;
        font-size: .64rem !important;
    }
}
@media (prefers-reduced-motion: reduce) {
    .hero-service-ribbon .hero-service-track { animation: none !important; transform: none !important; }
}


/* === Responsiveness and team polish pass p23 === */
.team-slider-card.premium-team-card {
    background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(244,249,255,.92));
    border: 1px solid rgba(174,199,232,.68);
    box-shadow: 0 18px 46px rgba(15,40,74,.10);
}
.team-slider-card .team-card-body,
.team-card-body {
    position: relative;
    background:
        radial-gradient(circle at 94% 8%, rgba(28,118,255,.10), transparent 30%),
        linear-gradient(135deg, rgba(248,251,255,.96), rgba(235,244,255,.86));
    border-left: 1px solid rgba(174,199,232,.48);
    overflow: hidden;
}
.team-slider-card .team-card-body::before,
.team-card-body::before {
    content: '';
    position: absolute;
    inset: 12px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,.55);
    pointer-events: none;
}
.team-role {
    position: relative;
    z-index: 1;
    color: #0B57D0;
    background: linear-gradient(135deg, rgba(238,246,255,.98), rgba(229,241,255,.9));
    border: 1px solid rgba(174,206,249,.8);
    box-shadow: 0 7px 18px rgba(15,83,178,.07);
}
.team-card-body h5,
.team-card-body p,
.team-tags { position: relative; z-index: 1; }
.team-tags span {
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(174,199,232,.55);
    color: #314B6B;
    box-shadow: 0 6px 16px rgba(15,40,74,.045);
}
.team-home-slider .owl-stage-outer,
.team-page-slider .owl-stage-outer {
    padding: 2px 0 8px;
}

/* keep team cards balanced across screens */
@media (min-width: 1200px) {
    .team-slider-card.premium-team-card { min-height: 238px; }
    .team-slider-card .team-image-wrap { min-height: 238px !important; }
}
@media (max-width: 991.98px) {
    .team-slider-card.premium-team-card {
        grid-template-columns: 40% 60% !important;
        min-height: 224px;
    }
    .team-slider-card .team-image-wrap { min-height: 224px !important; }
    .team-card-body h5 { font-size: 1.18rem; }
    .team-card-body p { font-size: .87rem; line-height: 1.48; }
}
@media (max-width: 767.98px) {
    .team-slider-card.premium-team-card {
        grid-template-columns: 1fr !important;
        max-width: 440px;
        margin-left: auto;
        margin-right: auto;
    }
    .team-slider-card .team-image-wrap,
    .team-home-slider .team-slider-card .team-image-wrap {
        height: clamp(210px, 58vw, 270px) !important;
        min-height: clamp(210px, 58vw, 270px) !important;
    }
    .team-slider-card .team-card-body,
    .team-card-body {
        border-left: 0;
        border-top: 1px solid rgba(174,199,232,.5);
        padding: 17px 18px 18px;
    }
    .team-role { margin-bottom: 9px; }
    .team-tags { gap: 5px; }
}
@media (max-width: 420px) {
    .team-slider-card .team-image-wrap,
    .team-home-slider .team-slider-card .team-image-wrap {
        height: 205px !important;
        min-height: 205px !important;
    }
    .team-slider-card .team-card-body,
    .team-card-body { padding: 16px; }
}

/* compact mobile footer */
@media (max-width: 767.98px) {
    .footer-main {
        padding-top: 1.55rem !important;
        padding-bottom: 1.2rem !important;
    }
    .footer-clean .row.g-4 { --bs-gutter-y: 1.05rem; }
    .footer-identity { margin-bottom: .55rem !important; }
    .footer-clean .footer-brand { width: 34px; height: 34px; border-radius: 11px; }
    .footer-clean .footer-brand img { width: 30px; height: 30px; }
    .footer-intro { font-size: .88rem; line-height: 1.5; max-width: 330px; }
    .footer-title { font-size: .86rem; margin-top: .1rem; margin-bottom: .48rem; }
    .footer-links { gap: 7px 13px; }
    .footer-links a, .footer-menu a { font-size: .86rem; }
    .footer-chips { gap: 7px; }
    .footer-chips span {
        min-height: 29px;
        padding: 5px 9px;
        font-size: .78rem;
    }
    .footer-bottom {
        padding: 11px 0 14px;
        font-size: .8rem;
    }
    .footer-clean .footer-menu {
        gap: 7px 12px;
        margin-top: 6px;
    }
}
@media (max-width: 420px) {
    .footer-main { padding-top: 1.35rem !important; padding-bottom: 1rem !important; }
    .footer-intro { font-size: .84rem; }
    .footer-links a, .footer-menu a { font-size: .82rem; }
    .footer-chips span { font-size: .74rem; padding: 5px 8px; }
}

/* broad small-screen spacing cleanup */
@media (max-width: 575.98px) {
    .container-fluid.py-5,
    .team-showcase-section.py-5,
    .team-page-section.py-5 {
        padding-top: 2.2rem !important;
        padding-bottom: 2.2rem !important;
    }
    .container.py-5 {
        padding-top: 1.7rem !important;
        padding-bottom: 1.7rem !important;
    }
    .section-heading,
    .display-5,
    .hero-title {
        word-break: normal;
        overflow-wrap: anywhere;
    }
}