:root{
  --primary:#0f172a;        /* deep slate */
  --primary-2:#1e293b;
  --secondary:#2563eb;      /* modern blue */
  --accent:#ff5a2c;  
  --accent2:#ee7959;       /* keep orange but sharper */
  --bg:#f8fafc;
  --soft:#f1f5f9;
  --text:#0f172a;
  --muted:#64748b;
  --border:#e2e8f0;
  --white:#ffffff;
}
*{box-sizing:border-box;margin:0;padding:0; transition:all 0.2s ease;}
*{transition:transform 0.25s cubic-bezier(.2,.8,.2,1),box-shadow 0.25s ease,background 0.25s ease,color 0.2s ease;}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--text);background:var(--bg);line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1{font-weight:900!important;}
h2{font-weight:800!important;font-size:40px!important;}
p{font-size:15px!important;}
h1,h2,h3,h4,h5,h6{font-weight:800;color:var(--primary);letter-spacing:-.01em;line-height:1.2}
.container{max-width:1280px;margin:0 auto;padding:0 24px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;font-weight:600;border-radius:12px;border:0;cursor:pointer;font-size:14px;text-transform:uppercase;letter-spacing:.02em;transition:all .3s ease;}
.btn-accent{background:var(--accent);color:#fff;box-shadow:0 10px 25px rgba(255,90,44,.25);}
.btn-accent:hover{transform:translateY(-3px);box-shadow:0 15px 35px rgba(255,90,44,.4);}
.btn-primary{background:var(--secondary);color:#fff}
.btn-primary:hover{background:var(--primary-2);  transform:translateY(-2px);box-shadow:0 10px 25px rgba(37,99,235,.3);}
.btn-white{background:#fff;color:var(--accent)}
.btn-lg{padding:16px 32px}
.eyebrow{color:var(--accent);font-weight:600;text-transform:uppercase;letter-spacing:.18em;font-size:12px;margin-bottom:8px}
.section{padding:100px 0}
.section-soft{background:#f1f5f9;position:relative;overflow:hidden;}
.section-soft .card{background:#ffffff;}
.section-soft .glass{background: rgba(255,255,255,0.6);backdrop-filter: blur(12px);}
.section-soft::before{content:"";position:absolute;width:500px;height:500px;background: radial-gradient(circle, rgba(37,99,235,0.25), transparent 70%);top:-100px;left:-100px;z-index:0;}
.section-soft .container{position:relative;z-index:1;}
.section-navy{background:var(--primary);color:#fff}
.section-navy h1,.section-navy h2,.section-navy h3{color:#fff}
.section-accent{background:var(--accent);color:#fff}
.section-accent h2{color:#fff}
.heading{margin-bottom:64px}
.heading h2{font-size:36px;position:relative;padding-bottom:16px}
.heading h2::after{content:"";position:absolute;left:0;bottom:0;width:80px;height:4px;background:var(--accent);border-radius:2px}
.heading.center{text-align:center}
.heading.center h2::after{left:50%;transform:translateX(-50%)}
.heading p{color:var(--muted);margin-top:16px;max-width:640px}
.heading.center p{margin-left:auto;margin-right:auto}
.mission-text{max-width: 900px;margin: 0 auto;padding: 20px 10px;}
.mission-text ol{padding-left: 20px}
.mission-text li{margin-bottom: 18px;line-height: 1.7;font-size: 12px;color: var(--muted);}
.mission-text li::marker{font-weight: 440;color: var(--secondary);}
.glass{background: rgba(255, 255, 255, 0.08);backdrop-filter: blur(16px);-webkit-backdrop-filter: blur(16px);border: 1px solid rgba(255,255,255,0.15);border-radius:16px;box-shadow: 0 8px 32px rgba(0,0,0,0.15);}
.glass-dark{background: linear-gradient(135deg,rgba(15,23,42,0.7),rgba(15,23,42,0.4)); /* lower opacity */backdrop-filter: blur(28px);-webkit-backdrop-filter: blur(20px);border-radius: 24px;border: 1px solid rgba(255,255,255,0.08);box-shadow: 0 20px 60px rgba(0,0,0,0.25),inset 0 1px 0 rgba(255,255,255,0.05);}/* Header */
.glass-hero{background: rgba(15,23,42,0.12);backdrop-filter: blur(28px);-webkit-backdrop-filter: blur(28px);border-radius:0;box-shadow: 0 30px 80px rgba(0,0,0,0.2);}
.site-header{position:sticky;top:0;z-index:50;background: rgba(255,255,255,0.7);backdrop-filter: blur(12px);border-bottom:1px solid var(--border);box-shadow:0 4px 20px rgba(0,0,0,0.05);}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 24px;max-width:1280px;margin:0 auto}
.logo img{height:48px;width:auto}
.nav{display:flex;gap:32px}
.nav a{position:relative; font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--primary);transition:color .2s}
.nav a::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:2px;background:var(--accent);transition:.3s;}
.nav a:hover,.nav a.active{color:var(--secondary)}
.nav a:hover::after,.nav a.active::after{width:100%;}
.header-cta{display:flex;align-items:center;gap:16px}
.header-phone{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--primary)}
.header-phone svg{color:var(--secondary)}
.menu-btn{display:none;background:none;border:0;color:var(--primary);cursor:pointer}
.mobile-nav{position:absolute;top:100%;left:16px;right:16px;display:flex;flex-direction:column;gap:8px;padding:18px;background: rgba(242, 242, 243, 0.85);backdrop-filter: blur(24px);-webkit-backdrop-filter: blur(24px);border-radius:20px;box-shadow:0 20px 50px rgba(0,0,0,0.25),inset 0 0 0 1px rgba(255,255,255,0.05);opacity:0;visibility:hidden;transform:translateY(-10px) scale(0.98);transition:opacity .3s ease,transform .3s ease,visibility .3s;z-index:1000;}
.mobile-nav.open{opacity:1;visibility:visible;transform:translateY(0) scale(1);}
.mobile-nav a{position:relative;overflow:hidden;color:#040404;text-decoration:none;padding:14px 16px;border-radius:12px;transition:background .3s ease,transform .3s ease,box-shadow .3s ease;}
.mobile-nav a:hover{background: rgba(255,255,255,0.08);box-shadow:0 0 20px rgba(37,99,235,0.18),0 0 40px rgba(255,90,44,0.12);transform:translateX(4px);}
@media(max-width:1024px){.nav,.header-cta{display:none}.menu-btn{display:block}.header-cta.mobile{display:flex}}

/* Hero slider */
.hero{position:relative;height:560px;overflow:hidden;background:#0a1730}
.hero::before{background: radial-gradient(circle at 20% 50%, rgba(37,99,235,0.12), transparent 60%);}
.hero-content h1{ font-size:64px; font-weight:900; letter-spacing:-0.02em;}
.hero-content .btn{box-shadow:0 10px 30px rgba(255,90,44,0.3);}
.slide{position:absolute;inset:0;opacity:0;transition:opacity 1s}
.slide.active{opacity:1}
.slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slide::after{content:"";position:absolute;inset:0;background:linear-gradient(to right,rgba(10,23,48,.92),rgba(10,23,48,.7),transparent)}
.hero-content{position:relative;z-index:2;height:100%;display:flex;align-items:center}
.hero-content .inner{background: rgba(15,23,42,0.2); backdrop-filter: blur(28px); position: relative;overflow: hidden;max-width:600px;color:#fff;border-radius:0;padding:40px;-webkit-mask-image: radial-gradient(ellipse 220% 160% at 15% 50%,black 30%,rgba(0,0,0,0.2) 60%,rgba(0,0,0,0.5) 80%,transparent 100%);mask-image: radial-gradient(ellipse 220% 160% at 15% 50%,black 30%,rgba(0,0,0,0.2) 60%,rgba(0,0,0,0.5) 80%,transparent 100%);}
.hero-content .inner::before{content:"";position:absolute;inset:-140px;background: radial-gradient(ellipse at 15% 50%,rgba(15,23,42,0.35),rgba(15,23,42,0.15) 50%,transparent 80%);filter: blur(120px);opacity:0.9;z-index:-1;}
.hero-content h1{color: rgba(255,255,255,0.92); color:#fff;font-size:56px;margin:12px 0 12px}
.hero-content p.sub{color:rgba(255,255,255,0.75);font-size:20px;margin-bottom:32px}
.hero-arrow{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.15);border:0;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(6px);z-index:3}
.hero-arrow:hover{background:rgba(255,255,255,.3)}
.hero-arrow.prev{left:16px}.hero-arrow.next{right:16px}
.hero-dots{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:3}
.hero-dots button{width:12px;height:6px;border-radius:3px;background:rgba(255,255,255,.5);border:0;cursor:pointer;transition:all .3s}
.hero-dots button.active{width:32px;background:var(--accent)}
@media(max-width:768px){.hero{height:460px}.hero-content h1{font-size:36px}.hero-content p.sub{font-size:16px}}

/* Page hero */
.page-hero{background:var(--primary);color:#fff;padding:64px 0}
.page-hero h1{color:#fff;font-size:48px}
.page-hero p{color:rgba(255,255,255,.8);margin-top:12px;max-width:640px}

/* Partner strip */
.partner{font-weight:600;font-size:12px;letter-spacing:0.04em;color:var(--muted);background:#fff;border-radius:10px;transition:.3s;}
.partner:hover{transform:translateY(-3px);box-shadow:0 10px 20px rgba(0,0,0,0.08);}
.partners{padding:40px 0;background:var(--soft);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.partner-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:24px}
.partner{height:64px;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--border);border-radius:8px;font-weight:700;color:var(--primary);font-size:13px;text-align:center;padding:0 12px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
@media(max-width:1024px){.partner-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.partner-grid{grid-template-columns:repeat(2,1fr)}}

/* Two col */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
@media(max-width:900px){.two-col{grid-template-columns:1fr}}
.rounded-shadow{border-radius:12px;overflow:hidden;box-shadow:0 20px 40px -20px rgba(10,31,68,.3)}

/* Cards grid */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
@media(max-width:900px){.grid-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.grid-3,.grid-2{grid-template-columns:1fr}}
.card{background:#fff;border:none;border-radius:16px;padding:36px;position:relative;transform-style:preserve-3d;box-shadow:0 10px 30px rgba(2,6,23,0.06);transition:transform 0.4s cubic-bezier(.2,.8,.2,1),box-shadow 0.4s ease;}
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(120deg, rgba(255,255,255,0.5), transparent 60%);opacity:0;transition:opacity .3s;}
.card:hover{transform:translateY(-10px) scale(1.02);box-shadow:0 25px 60px rgba(2,6,23,0.15);}
.card:hover::before{opacity:1;}
.card:hover h3{color:var(--secondary);}
.icon-bubble{width:56px;height:56px;border-radius:50%;background:rgba(245,90,38,.1);display:flex;align-items:center;justify-content:center;color:var(--accent);margin-bottom:16px}
.icon-square{width:60px;height:60px;border-radius:8px; background:linear-gradient(135deg, #ff5a2c20, #ff5a2c40);display:flex;align-items:center;justify-content:center;color:var(--secondary);margin-bottom:20px}
.card h3{font-size:20px;margin-bottom:12px}
.card p{color:var(--muted);font-size:14px}
.learn-more{display:inline-flex;align-items:center;gap:8px;margin-top:16px;color:var(--secondary);font-weight:600;font-size:14px}
.learn-more{opacity:0.7;transition:.2s;}
.card:hover .learn-more{opacity:1;transform:translateX(4px);}

/* Stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;text-align:center}
@media(max-width:600px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat-value{font-size:48px;font-weight:800;color:var(--accent);margin-bottom:8px}
.stat-label{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:rgba(255,255,255,.8)}

/* CTA panel */
.cta-panel{background:#fff;border-radius:16px;border:1px solid var(--border);padding:48px;display:grid;grid-template-columns:2fr 1fr;gap:32px;align-items:center;box-shadow:0 1px 2px rgba(0,0,0,.04)}
@media(max-width:900px){.cta-panel{grid-template-columns:1fr;text-align:center}}
.cta-panel h2{font-size:32px;margin-bottom:12px}

/* News */
.news-card{background:#fff;border:1px solid var(--border);border-radius:12px;overflow:hidden;transition:box-shadow .25s}
.news-card:hover{box-shadow:0 12px 24px -10px rgba(10,31,68,.18)}
.news-thumb{height:176px;background:linear-gradient(135deg,rgba(10,163,245,.2),rgba(245,90,38,.2))}
.news-body{padding:24px}
.news-cat{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--secondary);margin-bottom:8px}
.news-card h3{font-size:18px;margin-bottom:12px}
.news-card p{color:var(--muted);font-size:14px;margin-bottom:16px}
.news-meta{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--muted)}
.news-meta a{color:var(--accent);font-weight:700}

/* Lists */
.list-card ul{list-style:none;margin-top:24px}
.list-card li{display:flex;gap:12px;padding:8px 0;font-size:14px;align-items:flex-start}
.list-check{flex:0 0 16px;color:var(--accent);margin-top:4px}

/* Product card */
.product-card .top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:20px}
.badge{font-size:11px;font-weight:700;color:var(--secondary);background:rgba(10,163,245,.1);padding:4px 12px;border-radius:999px}

/* Contact */
.contact-grid{display:grid;grid-template-columns:2fr 3fr;gap:40px}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr}}
.info-card{display:flex;gap:16px;padding:20px;background:var(--soft);border:1px solid var(--border);border-radius:8px;margin-bottom:16px}
.info-card .icon-square{margin-bottom:0;width:48px;height:48px;background:rgba(245,90,38,.1);color:var(--accent);flex-shrink:0}
.info-card h4{margin-bottom:4px}
.info-card p{color:var(--muted);font-size:14px}
.form-card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:32px}
.form-card h2{font-size:24px;margin-bottom:24px;position:relative;padding-bottom:16px}
.form-card h2::after{content:"";position:absolute;left:0;bottom:0;width:80px;height:4px;background:var(--accent);border-radius:2px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}
@media(max-width:600px){.form-row{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}
.field label{font-size:13px;font-weight:600}
.field input,.field textarea{padding:10px 14px;border:1px solid var(--border);border-radius:6px;font-family:inherit;font-size:14px;background:#fff}
.field input:focus,.field textarea:focus{outline:0;border-color:var(--secondary);box-shadow:0 0 0 3px rgba(10,163,245,.15)}

/* ─── FOOTER ─────────────────────────────────────────────── */
.site-footer {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #08172d 0%, #1b4481 100%);
  padding-top: 100px; /* room for the wave canvas */
}

/* keep content above the wave layer */
.site-footer .container,
.site-footer .copy {
  position: relative;
  z-index: 2;
}

/* ── Wave container ── */
.footer-wave {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;   /* how tall the wave region is */
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

/* ── Each wave layer is a single <svg> that scrolls left ── */
/*    The SVG viewBox is 1440 wide, but we render it at
      200 % width so there are two identical repetitions
      side-by-side. We then translate from 0 → -50 %,
      which is exactly one copy → perfectly seamless.      */

.wave-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;          /* two copies wide */
  height: 100%;
  will-change: transform;
}

.wave-layer svg {
  display: block;
  width: 50%;           /* each svg = one copy = 50 % of the 200 % container */
  height: 100%;
  float: left;          /* sit the two copies side by side */
}

/* Layer 1 – primary blue ripple, medium speed */
.wave-layer-1 {
  opacity: 0.85;
  animation: waveScroll 28s linear infinite;
}

/* Layer 2 – secondary indigo ripple, slower + slight blur for depth */
.wave-layer-2 {
  opacity: 0.45;
  filter: blur(5px);
  animation: waveScroll 44s linear infinite reverse;
}

/* Layer 3 – faint accent highlight, fastest */
.wave-layer-3 {
  opacity: 0.30;
  animation: waveScroll 18s linear infinite;
}

/* One animation: slide exactly one copy width (50% of 200% container = 100vw) */
@keyframes waveScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}


.footer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;padding-bottom:48px}
@media(max-width:900px){.footer-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:500px){.footer-grid{grid-template-columns:1fr}}
.site-footer h3,.site-footer h4{color:#fff}
.site-footer h3{font-size:18px;margin-bottom:16px}
.site-footer h4{font-size:13px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:16px}
.site-footer p{color:rgba(255,255,255,.7);font-size:14px;margin-bottom:16px;line-height:1.6}
.site-footer ul{list-style:none}
.site-footer li{margin-bottom:8px}
.site-footer li a{color:rgba(255,255,255,.7);font-size:14px;transition:color .2s}
.site-footer li a:hover{color:var(--accent)}
.socials{display:flex;gap:12px}
.socials a{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;color:#fff;transition:background .2s}
.socials a:hover{background:var(--accent)}
.contact-list li{display:flex;gap:12px;color:rgba(255,255,255,.7);font-size:14px;margin-bottom:12px;align-items:flex-start}
.contact-list svg{color:var(--accent);flex-shrink:0;margin-top:2px}
.copy{border-top:1px solid rgba(255,255,255,.1);padding:20px 0;text-align:center;color:rgba(255,255,255,.6);font-size:13px}

/* Toast */
.toast{position:fixed;bottom:24px;right:24px;background:var(--primary);color:#fff;padding:16px 20px;border-radius:8px;box-shadow:0 12px 24px rgba(0,0,0,.2);z-index:100;opacity:0;transform:translateY(20px);transition:all .3s;max-width:360px}
.toast.show{opacity:1;transform:translateY(0)}
.toast.error{background:#c62828}

/* SERVICES GRID ONLY */
.services-grid .card{
  position: relative;
  overflow: hidden;
  min-height: 320px;

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  display: flex;
  flex-direction: column;
  justify-content: flex-end;

  padding: 36px;
}

/* DARK OVERLAY */
.services-grid .card::before{
  content:"";
  position:absolute;
  inset:0;

  background:linear-gradient(
    to top,
    rgba(255,255,255,0.95) 15%,
    rgba(255,255,255,0.75) 45%,
    rgba(255,255,255,0.20) 100%
  );

  z-index:1;
}

/* CONTENT ABOVE OVERLAY */
.services-grid .card *{
  position:relative;
  z-index:2;
}

/* BACKGROUNDS */

.services-grid .card:nth-child(1){
  background-image:url("../images/it.jpg");
}

.services-grid .card:nth-child(2){
  background-image:url("../images/network.png");
}

.services-grid .card:nth-child(3){
  background-image:url("../images/windows.png");
}

.services-grid .card:nth-child(4){
  background-image:url("../images/windows2.png");
}

.services-grid .card:nth-child(5){
  background-image:url("../images/virus.png");
}

.services-grid .card:nth-child(6){
  background-image:url("../images/pcrepair.png");
}

.services-grid .card:nth-child(7){
  background-image:url("../images/malware1.png");
}

.services-grid .card:nth-child(8){
  background-image:url("../images/windows3.png");
}

.services-grid .card:nth-child(9){
  background-image:url("../images/mac.png");
}

.product-card{
    position: relative;
    overflow: hidden;
    min-height: 320px;
    border-radius: 28px;
    padding: 40px;
    background-color: #fff;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: 0.35s ease;
}

.product-card::before{
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.78);
    backdrop-filter: blur(2px);
    z-index: 1;
}

.product-card > *{
    position: relative;
    z-index: 2;
}

.product-card:hover{
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.08);
}

/* Background Images */

.software-card{
    background-image: url("../images/software.png");
}

.hardware-card{
    background-image: url("../images/pc1.png");
}

.networking-card{
    background-image: url("../images/wifi.png");
}

.cctv-card{
    background-image: url("../images/CCTV.png");
}

.cloud-card{
    background-image: url("../images/cloud.png");
}

.accessories-card{
    background-image: url("../images/acc.png");
}