@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&display=swap');
/* ===== ArNo DualTech - dark tech theme (replaces space theme) ===== */
:root{--bg0:#0B0F19;--bg1:#111827;--bg2:#162033;--blue:#3B82F6;--blue-d:#2563EB;--cyan:#06B6D4;--purple:#8B5CF6;--txt:#E5E7EB;--sub:#9CA3AF;--bd:rgba(255,255,255,.08)}
html,body{background:var(--bg0)}
body{color:var(--txt)}
h1,h2,h3,h4,.btn,.stat b,.tier-badge,.num,.dot{font-family:Poppins,Inter,system-ui,sans-serif}
h1,h2,h3{color:#fff}
.lead,.dark .lead{color:var(--sub)}
section{background:var(--bg0)}
section:nth-of-type(even){background:linear-gradient(180deg,var(--bg1),var(--bg0))}
.stats{background:transparent!important}
.dark{background:radial-gradient(900px 400px at 50% 0%,rgba(59,130,246,.10),transparent 70%),var(--bg1)!important}
.bg-dots{background-color:transparent;background-image:radial-gradient(rgba(255,255,255,.035) 1px,transparent 1px);background-size:26px 26px}
.bg-circuit{background-color:transparent;background-image:radial-gradient(700px 360px at 85% 10%,rgba(139,92,246,.08),transparent 70%),radial-gradient(rgba(255,255,255,.03) 1px,transparent 1px);background-size:auto,26px 26px}
.bg-grid::before{opacity:.5}
.glow.o{background:rgba(59,130,246,.22)}
.glow.s{background:rgba(6,182,212,.12)}
.eyebrow{color:var(--cyan)}
.eyebrow::before,.center .eyebrow::after{background:var(--cyan)}
h2 .hl{background:linear-gradient(90deg,var(--blue),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}

/* Buttons */
.btn-primary{background:linear-gradient(135deg,var(--blue),var(--blue-d));color:#fff;box-shadow:0 8px 22px rgba(59,130,246,.30)}
.btn-primary:hover{box-shadow:0 12px 30px rgba(59,130,246,.45),0 0 0 3px rgba(6,182,212,.18)}
.btn-outline{border-color:rgba(255,255,255,.22)}
.btn-outline:hover{border-color:var(--cyan);color:var(--cyan)}

/* Header (logo untouched) */
header{background:rgba(11,15,25,.6)}
header.scrolled{background:rgba(11,15,25,.94)}
.nav-links a:not(.btn)::after{background:var(--cyan)}

/* Hero - soft gradient shift + network lines */
.hero{background:linear-gradient(120deg,#0B0F19 0%,#0f1a33 35%,#1a1440 60%,#0B0F19 100%)!important;background-size:240% 240%!important;animation:heroShift 22s ease-in-out infinite}
@keyframes heroShift{0%,100%{background-position:0% 40%}50%{background-position:100% 60%}}
#net{opacity:.45}
.badge{background:rgba(6,182,212,.08);border-color:rgba(6,182,212,.35);color:#67E8F9}
.badge i{background:var(--cyan);box-shadow:0 0 0 4px rgba(6,182,212,.25);animation:pulseC 2s infinite}
@keyframes pulseC{50%{box-shadow:0 0 0 8px rgba(6,182,212,0)}}
.hero h1 em{background:linear-gradient(90deg,var(--blue),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{color:#B6C2D4}
.motto{color:var(--sub)}
.motto span::before{color:var(--cyan)}
/* remove orbit paths/planets around the logo (logo, float, glow & shine unchanged) */
.orbit,.logo-stage .ring,.logo-stage .ring.r2::before{display:none!important}

/* Stats */
.stats-grid{background:rgba(17,24,39,.88);border:1px solid var(--bd);box-shadow:0 20px 50px rgba(0,0,0,.45);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.stat{border-color:var(--bd)!important}
.stat::after{background:linear-gradient(90deg,var(--blue),var(--cyan))}
.stat b{color:#fff}
.stat b span{color:var(--cyan)}
.stat em{color:var(--sub)}

/* Cards */
.card,.glass{background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.015));border:1px solid var(--bd);transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease}
.card::before{background:linear-gradient(90deg,var(--blue),var(--cyan))}
.card:hover,.glass:hover{transform:translateY(-6px);border-color:rgba(59,130,246,.45);box-shadow:0 18px 44px rgba(0,0,0,.4),0 0 28px rgba(59,130,246,.15)}
.card h3,.glass h3{color:#fff}
.card p,.glass p{color:var(--sub)}
.card li,.glass li{color:#CBD5E1}
.card li::before,.glass li::before{color:var(--cyan)}
.icon{background:linear-gradient(135deg,var(--blue),var(--cyan));box-shadow:0 8px 20px rgba(59,130,246,.28)}
.tier-badge{background:linear-gradient(135deg,var(--purple),var(--blue));box-shadow:0 8px 20px rgba(139,92,246,.28)}
.tag{background:var(--purple)}
.featured,#models .card[style]{border-color:rgba(59,130,246,.55)!important}
.aud .num{background:linear-gradient(135deg,var(--blue),var(--purple));-webkit-background-clip:text;background-clip:text}

/* Staggered reveal */
.grid-3>.reveal:nth-child(2),.grid-4>.reveal:nth-child(2),.steps>.reveal:nth-child(2){transition-delay:.1s}
.grid-3>.reveal:nth-child(3),.grid-4>.reveal:nth-child(3),.steps>.reveal:nth-child(3){transition-delay:.2s}
.grid-3>.reveal:nth-child(4),.grid-4>.reveal:nth-child(4),.steps>.reveal:nth-child(4){transition-delay:.3s}
.grid-3>.reveal:nth-child(5){transition-delay:.4s}
.grid-3>.reveal:nth-child(6){transition-delay:.5s}

/* Expertise tabs */
.tab{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12);color:#CBD5E1}
.tab:hover{border-color:var(--cyan);color:#fff}
.tab.active{background:linear-gradient(135deg,var(--blue),var(--blue-d));box-shadow:0 8px 20px rgba(59,130,246,.3)}
.panel{background:rgba(17,24,39,.7);border-color:var(--bd);box-shadow:0 18px 40px rgba(0,0,0,.35)}
.chip{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1);color:#E2E8F0}
.chip:hover{border-color:var(--cyan);background:rgba(6,182,212,.10)}

/* Tool marquee */
.tool{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1)}
.tool::before{color:var(--cyan)}
.track{animation-duration:55s}

/* Technologies - slow logo strip */
.logo-marquee{overflow:hidden;margin-top:50px;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.logo-marquee .brands{display:flex;flex-wrap:nowrap;gap:16px;width:max-content;margin:0;animation:scroll 70s linear infinite}
.logo-marquee:hover .brands{animation-play-state:paused}
.logo-marquee .brand{width:170px;flex:0 0 170px}
.brand{background:#F8FAFC;border:1px solid rgba(255,255,255,.12);box-shadow:0 8px 22px rgba(0,0,0,.3)}
.brand .lg{height:46px;display:flex;align-items:center;justify-content:center;width:100%}
.brand .lg img{max-height:40px;max-width:82%;width:auto;height:auto;opacity:1}
.brand:hover{border-color:var(--blue);box-shadow:0 0 0 2px rgba(59,130,246,.6),0 14px 34px rgba(59,130,246,.25)}
.brand b{color:#0F172A}
.brand .mono{width:auto;min-width:46px;height:40px;padding:0 10px;font-size:15px;background:linear-gradient(135deg,#1E293B,#0B0F19);box-shadow:inset 0 0 0 1px rgba(59,130,246,.6)}
.tm-note{color:#6B7280}

/* Process */
.steps::before{background:repeating-linear-gradient(90deg,var(--cyan) 0 10px,transparent 10px 18px);opacity:.45}
.step .dot{background:linear-gradient(135deg,var(--blue),var(--purple));box-shadow:0 0 0 8px rgba(59,130,246,.12)}
.step p{color:var(--sub)}

/* Contact */
.cta{background:linear-gradient(145deg,#111827 0%,#0f1a33 60%,#17123a 100%);border:1px solid var(--bd);box-shadow:0 30px 70px rgba(0,0,0,.45),0 0 60px rgba(59,130,246,.10)}
.cta::before{background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);opacity:1}
.cta::after{border-color:rgba(59,130,246,.07)}
.cta p{color:#B6C2D4}
.cta .eyebrow{color:var(--cyan)}.cta .eyebrow::before{background:var(--cyan)}
.contact-list li{color:#E5E7EB}
form{background:rgba(11,15,25,.85);border:1px solid var(--bd);box-shadow:0 20px 50px rgba(0,0,0,.35)}
form input,form textarea,form select{background:#0B0F19;border-color:rgba(255,255,255,.12);color:#E5E7EB}
form input::placeholder,form textarea::placeholder{color:#6B7280}
form input:focus,form textarea:focus,form select:focus{outline:2px solid var(--blue)}

/* Footer */
footer{background:#070A12;color:var(--sub)}
footer::before{background:linear-gradient(90deg,transparent,var(--blue),var(--cyan),transparent)}
footer a:hover{color:var(--cyan)}

@media (max-width:760px){.nav-links{background:rgba(11,15,25,.97)}.logo-marquee .brand{width:140px;flex-basis:140px}}
@media (prefers-reduced-motion:reduce){.hero{animation:none}}

/* Logo recoloured to match theme (blue) - same image, size, position & animation */
.logo-wrap,.logo img{filter:hue-rotate(190deg) saturate(.5) brightness(1.15)}
.logo img{animation:none}
.logo .t1 b{color:#93C5FD}
.logo-stage .halo{background:radial-gradient(circle,rgba(147,197,253,.22),rgba(147,197,253,.06) 45%,transparent 70%)}
/* More prominent tech tags around the logo */
.logo-stage .ttag{font:700 14px/1 Inter,system-ui,sans-serif;letter-spacing:.02em;color:#fff;padding:10px 16px;border-radius:10px;background:linear-gradient(135deg,rgba(59,130,246,.35),rgba(6,182,212,.22));border:1px solid rgba(103,232,249,.6);box-shadow:0 0 22px rgba(6,182,212,.35),0 8px 20px rgba(0,0,0,.4);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.logo-stage .ttag::before{background:#22D3EE;box-shadow:0 0 8px #22D3EE;width:8px;height:8px}
.logo-stage .ttag.t3{bottom:26%;left:-16%}
.logo-stage .ttag.t4{bottom:-1%;right:2%}
.brand .lg img.fav{max-height:40px;width:40px;height:40px;object-fit:contain;border-radius:8px}

/* ===== Light sections (alternate dark / light) ===== */
section.bg-dots{background-color:#DCEAFB!important;background-image:radial-gradient(rgba(37,99,235,.10) 1px,transparent 1px),linear-gradient(115deg,#F5F9FF 0%,#E6F0FC 46%,#C9DDF8 46.2%,#A9C8F2 75%,#97BBEC 100%)!important;background-size:26px 26px,100% 100%!important;color:#334155}
section.bg-dots h1,section.bg-dots h2,section.bg-dots h3,section.bg-dots h4,section.bg-dots b,section.bg-dots strong{color:#0F172A}
section.bg-dots p,section.bg-dots .lead,section.bg-dots li,section.bg-dots small{color:#475569}
section.bg-dots .eyebrow{color:#0891B2}
section.bg-dots .eyebrow::before,section.bg-dots .eyebrow::after{background:#0891B2}
section.bg-dots .card,section.bg-dots .glass,section.bg-dots .panel,section.bg-dots .aud,section.bg-dots .step,section.bg-dots .tool{background:#FFFFFF!important;border:1px solid #E2E8F0!important;box-shadow:0 10px 30px rgba(15,23,42,.06)!important;color:#334155}
section.bg-dots .card:hover,section.bg-dots .glass:hover,section.bg-dots .aud:hover{border-color:#3B82F6!important;box-shadow:0 16px 38px rgba(59,130,246,.16)!important}
section.bg-dots .chip,section.bg-dots .tag,section.bg-dots .svc-chips span,section.bg-dots .svc-more a,section.bg-dots .tab{background:#EEF4FF!important;border:1px solid #C7D7F5!important;color:#1E3A8A!important}
section.bg-dots .tab.active{background:linear-gradient(135deg,#3B82F6,#2563EB)!important;color:#fff!important;border-color:transparent!important}
section.bg-dots .svc-more a:hover{border-color:#3B82F6!important;color:#2563EB!important}
section.bg-dots .btn-outline{border-color:#CBD5E1;color:#0F172A}
section.bg-dots .card .more{color:#2563EB}
section.bg-dots .tm-note{color:#64748B}

/* ===== Two-tone cards (dark navy -> blue on hover) ===== */
section .card,section .aud,section .glass{transition:background .35s ease,box-shadow .35s ease,border-color .35s ease,transform .35s ease}
section .card:hover,section .aud:hover,section .glass:hover,section.bg-dots .card:hover,section.bg-dots .aud:hover,section.bg-dots .glass:hover{background:linear-gradient(110deg,#1E3A5F 0%,#1D5BD8 55%,#3B82F6 100%)!important;border-color:transparent!important;box-shadow:0 18px 42px rgba(37,99,235,.35)!important;transform:translateY(-4px)}
section .card:hover h3,section .card:hover h4,section .card:hover b,section .card:hover strong,section .aud:hover h3,section .aud:hover .num,section .glass:hover h3,section.bg-dots .card:hover h3,section.bg-dots .card:hover b,section.bg-dots .aud:hover h3,section.bg-dots .aud:hover .num,section.bg-dots .glass:hover h3{color:#fff!important;-webkit-text-fill-color:#fff}
section .card:hover p,section .card:hover li,section .card:hover small,section .aud:hover p,section .glass:hover p,section.bg-dots .card:hover p,section.bg-dots .card:hover li,section.bg-dots .aud:hover p,section.bg-dots .glass:hover p{color:rgba(255,255,255,.9)!important}
section .card:hover li::before,section.bg-dots .card:hover li::before{color:#fff!important;border-color:#fff!important}
section .card:hover .icon{background:rgba(255,255,255,.18)!important;box-shadow:none!important}
section .card:hover .more,section.bg-dots .card:hover .more{color:#fff!important}
section .card:hover .tier-badge{background:#fff!important;color:#1D4ED8!important}

/* ===== Page-load slide-in animations ===== */
@keyframes inLeft{from{opacity:0;transform:translateX(-140px)}to{opacity:1;transform:none}}
@keyframes inRight{from{opacity:0;transform:translateX(140px)}to{opacity:1;transform:none}}
@keyframes inRightBig{from{opacity:0;transform:translateX(260px) scale(.9)}to{opacity:1;transform:none}}
#hdr .logo{animation:inLeft 3s cubic-bezier(.3,.5,.2,1) both}
#hdr .nav-links{animation:inRight 3s cubic-bezier(.3,.5,.2,1) .3s both}
.hero .badge{animation:inLeft 3s cubic-bezier(.3,.5,.2,1) .6s both}
.hero h1{animation:inLeft 3.5s cubic-bezier(.3,.5,.2,1) 1s both}
.hero h1 + p{animation:inRight 3.5s cubic-bezier(.3,.5,.2,1) 1.6s both}
.hero .hero-ctas{animation:inLeft 3.5s cubic-bezier(.3,.5,.2,1) 2.1s both}
.hero .motto{animation:inRight 3.5s cubic-bezier(.3,.5,.2,1) 2.5s both}
.hero .logo-stage{animation:inRightBig 4s cubic-bezier(.3,.5,.2,1) .9s both}
.page-hero .crumb{animation:inLeft 3s cubic-bezier(.3,.5,.2,1) .3s both}
.page-hero .icon{animation:inRight 3s cubic-bezier(.3,.5,.2,1) .6s both}
.page-hero .eyebrow{animation:inLeft 3s cubic-bezier(.3,.5,.2,1) .9s both}
.page-hero h1{animation:inLeft 3.5s cubic-bezier(.3,.5,.2,1) 1.2s both}
.page-hero .lead{animation:inRight 3.5s cubic-bezier(.3,.5,.2,1) 1.8s both}
.page-hero .hero-ctas{animation:inLeft 3.5s cubic-bezier(.3,.5,.2,1) 2.3s both}
.hero,.page-hero{overflow-x:hidden}
@media (prefers-reduced-motion:reduce){#hdr .logo,#hdr .nav-links,.hero *,.page-hero *{animation:none!important}}
/* ===== MSP tag ===== */
.logo-stage .ttag.t5{top:99%;left:4%;right:auto;bottom:auto;animation-delay:-4.8s}
@media(max-width:700px){.logo-stage .ttag.t5{left:6%;top:97%}}
.logo-stage .ttag.t6{top:50%;left:84%;right:auto;bottom:auto;animation-delay:-2s}
@media(max-width:700px){.logo-stage .ttag.t6{left:70%;top:50%}}
/* ===== Dark two-tone (navy -> indigo/purple) ===== */
section:not(.hero):not(.bg-dots):not(.stats){background-color:#0B0F19!important;background-image:radial-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(115deg,#0B0F19 0%,#111A33 45%,#1E1A4D 75%,#2A1B5E 100%)!important;background-size:26px 26px,100% 100%!important}