/* ════════════════════════════════════════════════
   DELTOROCORP INFORMATIC — COMPILED STYLES
   (Run: npm install && npm run build to recompile)
   Tailwind base/utilities are loaded via CDN.
════════════════════════════════════════════════ */

/* ── CSS Variables ──────────────────────────── */
:root {
  --bg:      #04060f;
  --bg2:     #070a18;
  --surface: rgba(10,18,40,0.75);
  --surface2:rgba(14,24,52,0.6);
  --border:  rgba(82,130,255,0.13);
  --border-h:rgba(82,130,255,0.35);
  --c1:      #5282ff;
  --c2:      #ff5c8a;
  --c3:      #35e8b0;
  --c4:      #ffbe3d;
  --text:    #dce8ff;
  --muted:   #5a6e99;
  --dim:     #3a4d73;
  --white:   #ffffff;
  --font-d:  'Roboto', sans-serif;
  --font-b:  'Roboto', sans-serif;
  --r:       6px;
  --glow1:   0 0 60px rgba(82,130,255,0.18);
  --glow2:   0 0 40px rgba(255,92,138,0.15);
  --tr:      .3s ease;
}

/* ── Reset & Base ───────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-b);
  font-weight: 300;
  line-height: 1.7;
  overflow-x: hidden;
  cursor: none;
}
a { text-decoration: none; color: inherit; }
.deco-center img {
    max-width: -webkit-fill-available;
    height: stretch;
    display: block;
    position: absolute;
    /* inset: 120px; */
    background: radial-gradient(circle, rgba(82, 130, 255, 0.12), transparent 70%);
    border-radius: 50%;
    border-style: groove;
    border: 4px solid #393939;
}
::selection { background: rgba(82,130,255,0.3); color: #fff; }
ul, ol { list-style: none; }

/* ── Particles canvas ───────────────────────── */
#particles-canvas {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
}

/* ── Grid background ────────────────────────── */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0;
  background-image:
    linear-gradient(rgba(82,130,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(82,130,255,0.025) 1px, transparent 1px);
  background-size: 80px 80px; pointer-events: none;
}

/* ── Noise grain ────────────────────────────── */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  opacity: 0.4; pointer-events: none;
}

/* ── Custom cursor ──────────────────────────── */
.cursor {
  position: fixed; width: 10px; height: 10px;
  background: var(--c1); border-radius: 50%;
  pointer-events: none; z-index: 9999;
  transform: translate(-50%,-50%);
  transition: width .2s, height .2s, background .2s;
}
.cursor-ring {
  position: fixed; width: 36px; height: 36px;
  border: 1px solid rgba(82,130,255,0.5); border-radius: 50%;
  pointer-events: none; z-index: 9998;
  transform: translate(-50%,-50%);
  transition: transform .12s ease, width .2s, height .2s;
}
body:has(a:hover) .cursor { background: var(--c2); width: 14px; height: 14px; }
body:has(button:hover) .cursor { background: var(--c3); }
@media (hover: none) { .cursor, .cursor-ring { display: none; } body { cursor: auto; } }

/* ── Ambient orbs ───────────────────────────── */
.orbs { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.orb  { position: absolute; border-radius: 50%; filter: blur(100px); }
.o1   { width: 700px; height: 700px; background: rgba(82,130,255,0.07); top: -200px; right: -100px; }
.o2   { width: 500px; height: 500px; background: rgba(255,92,138,0.06); bottom: -100px; left: -100px; }
.o3   { width: 400px; height: 400px; background: rgba(53,232,176,0.04); top: 40%; left: 30%; animation: orbFloat 8s ease-in-out infinite; }
@keyframes orbFloat { 0%,100%{transform:translate(0,0);}50%{transform:translate(30px,-40px);} }

/* ── Layout ─────────────────────────────────── */
main#main-content { position: relative; z-index: 1; }
.container { max-width: 1300px; margin: 0 auto; padding: 0 5rem; }
.section { padding: 8rem 0; }

/* ── Section headers ────────────────────────── */
.s-tag {
  font-family: var(--font-d); font-size: .62rem;
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--c1); margin-bottom: 1.2rem;
  display: inline-flex; align-items: center; gap: .8rem;
}
.s-tag::before { content:''; display:block; width:28px; height:1px; background:var(--c1); }
.s-title {
  font-family: var(--font-d);
  font-size: clamp(2rem,4vw,3.2rem);
  font-weight: 800; color: var(--white); line-height: 1.1; letter-spacing: -.01em;
}
.s-sub { font-size: .95rem; color: var(--muted); max-width: 520px; margin-top: 1rem; }

/* ── Navigation ─────────────────────────────── */
.main-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  padding: 1.2rem 5rem;
  display: flex; justify-content: space-between; align-items: center;
  background: rgba(4,6,15,0.85); backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--border);
  transition: padding .3s, background .3s;
}
.main-nav.scrolled {
  padding-top: .8rem; padding-bottom: .8rem;
  background: rgba(4,6,15,0.97); box-shadow: 0 4px 30px rgba(0,0,0,.4);
}
.nav-brand { display:flex; align-items:center; gap:1rem; }
.nav-logo-img { height: 36px; max-width: 140px; object-fit: contain; display: block; }
.footer-logo .nav-logo-img { height: 40px; max-width: 160px; }
.nav-logo-icon {
  width: 36px; height: 36px;
  background: linear-gradient(135deg, var(--c1), var(--c2));
  border-radius: 8px; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-d); font-size: .9rem; font-weight: 800; color:#fff;
}
.nav-brand-text { font-family: var(--font-d); font-size: .95rem; font-weight: 700; letter-spacing: .04em; color: var(--white); }
.nav-brand-text span { color: var(--c1); }
.nav-links { display:flex; gap:.3rem; }
.nav-link {
  font-family: var(--font-d); font-size: .72rem;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .5rem 1rem; border-radius: 4px;
  color: var(--muted); transition: all .25s; display: block;
}
.nav-link:hover, .nav-link.active { color: var(--c1); background: rgba(82,130,255,0.08); }
.nav-right { display:flex; align-items:center; gap:.8rem; }
.nav-cta {
  font-family: var(--font-d); font-size: .7rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  padding: .6rem 1.6rem; background: var(--c1); color: #fff; border-radius: 4px;
  transition: all .3s; box-shadow: 0 0 20px rgba(82,130,255,0.3);
  display: inline-flex; align-items: center; gap: .4rem;
}
.nav-cta:hover { background: #fff; color: #000; box-shadow: 0 0 30px rgba(255,255,255,0.3); }
.mobile-menu-btn {
  display: none; background: none; border: 1px solid var(--border);
  color: var(--text); padding: .5rem .8rem; border-radius: 4px; cursor: pointer; font-size: 1.1rem;
}

/* ── Mobile sidebar ─────────────────────────── */
.mobile-overlay { display: none; position: fixed; inset: 0; z-index: 600; background: rgba(0,0,0,0.7); backdrop-filter: blur(4px); }
.mobile-overlay.open { display: block; }
.mobile-sidebar {
  position: fixed; top: 0; right: -100%; width: 280px; height: 100vh;
  background: #060e20; border-left: 1px solid var(--border);
  z-index: 700; padding: 2rem 1.5rem;
  display: flex; flex-direction: column; gap: .3rem;
  transition: right .35s ease; overflow-y: auto;
}
.mobile-sidebar.open { right: 0; }
.mobile-sidebar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; }
.mobile-sidebar-header button { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 1.2rem; }
.mobile-nav-link {
  display: block; padding: .9rem 1rem;
  font-family: var(--font-d); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); border-radius: 4px; transition: all .2s; border: 1px solid transparent;
}
.mobile-nav-link:hover, .mobile-nav-link.active { color: var(--c1); background: rgba(82,130,255,0.06); border-color: var(--border); }

/* ── Buttons ─────────────────────────────────── */
.btn {
  font-family: var(--font-d); font-size: .7rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  padding: .9rem 2.2rem; border-radius: 4px;
  transition: all .3s; cursor: pointer; border: none;
  display: inline-flex; align-items: center; gap: .6rem;
}
.btn-fill { background: var(--c1); color: #fff; box-shadow: 0 0 30px rgba(82,130,255,0.35); }
.btn-fill:hover { background: var(--white); color: #000; box-shadow: 0 0 40px rgba(255,255,255,0.3); }
.btn-outline { background: transparent; color: var(--c1); border: 1px solid var(--border-h); }
.btn-outline:hover { background: rgba(82,130,255,0.08); border-color: var(--c1); }
.btn-wa { background: linear-gradient(135deg,#25d366,#128c7e); color:#fff; box-shadow:0 0 20px rgba(37,211,102,0.3); }
.btn-wa:hover { box-shadow: 0 0 40px rgba(37,211,102,0.5); }
.btn-rose { background: var(--c2); color:#fff; box-shadow:0 0 30px rgba(255,92,138,0.3); }
.btn-sm { padding: .6rem 1.4rem; font-size:.62rem; }
.btn-lg { padding: 1.1rem 2.8rem; font-size:.75rem; }

/* ── Cards (glassmorphism) ───────────────────── */
.card-glass {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); backdrop-filter: blur(12px);
  transition: all .35s; position: relative; overflow: hidden;
}
.card-glass::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background: linear-gradient(90deg,transparent,var(--c1),transparent);
  opacity: 0; transition: opacity .35s;
}
.card-glass:hover { border-color: var(--border-h); transform: translateY(-4px); box-shadow: var(--glow1); }
.card-glass:hover::before { opacity: 1; }

/* ── Hero section ───────────────────────────── */
.hero-wrap { min-height: 100vh; display: flex; align-items: center; position: relative; }
.hero-section {
  padding: 1rem 1rem 4rem; max-width: 1600px; margin: 0 auto; width: 100%;
  display: flex; align-items: center; position: relative;
}
.hero-content { flex: 1; max-width: 720px; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: .8rem;
  font-family: var(--font-d); font-size: .65rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--c3); margin-bottom: 2rem; padding: .4rem 1rem;
  border: 1px solid rgba(53,232,176,0.2); border-radius: 100px; background: rgba(53,232,176,0.04);
  animation: fadeUp .8s ease both .2s;
}
.hero-eyebrow::before { content:''; width:6px; height:6px; border-radius:50%; background: var(--c3); animation: blink 1.5s infinite; }
@keyframes blink { 0%,100%{opacity:1;}50%{opacity:0.3;} }
.hero-h1 {
  font-family: var(--font-d); font-size: clamp(3.2rem,7vw,6.5rem);
  font-weight: 800; line-height: .95; letter-spacing: -.03em; color: var(--white);
  animation: fadeUp .9s ease both .4s;
}
.hero-h1 em {
  font-style: normal;
  background: linear-gradient(135deg,var(--c1) 0%,var(--c2) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.hero-desc { font-size: 1.05rem; color: var(--muted); max-width: 520px; margin-top: 2rem; animation: fadeUp .9s ease both .6s; }
.hero-actions { display:flex; align-items:center; gap:1.2rem; margin-top:3rem; flex-wrap: wrap; animation: fadeUp .9s ease both .8s; }
.hero-ticker { display: flex; align-items: center; gap: 2rem; margin-top: 4rem; animation: fadeUp .9s ease both 1s; flex-wrap: wrap; }
.ticker-item { text-align:center; }
.ticker-num { font-family: var(--font-d); font-size: 2rem; font-weight: 800; color: var(--white); line-height: 1; }
.ticker-num sup { color: var(--c1); font-size: 1rem; }
.ticker-lbl { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: .3rem; }
.ticker-div { width: 1px; height: 40px; background: var(--border); }

/* Hero rotating decoration */
.hero-deco { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 400px; height: 400px; animation: fadeIn 1.2s ease both 1s; }
.deco-ring { position: absolute; inset: 0; border: 1px solid rgba(82,130,255,0.12); border-radius: 50%; animation: spinSlow 20s linear infinite; }
.deco-ring:nth-child(2) { inset:40px; border-color:rgba(255,92,138,0.1); animation-duration:14s; animation-direction:reverse; }
.deco-ring:nth-child(3) { inset:80px; border-color:rgba(53,232,176,0.1); animation-duration:10s; }
.deco-center { position: absolute; inset: 120px; background: radial-gradient(circle,rgba(82,130,255,0.12),transparent 70%); border-radius: 50%; }
.deco-dot { position: absolute; width:8px; height:8px; border-radius:50%; background: var(--c1); top:0; left:50%; transform:translateX(-50%); box-shadow: 0 0 12px var(--c1); }
@keyframes spinSlow { from{transform:rotate(0deg);}to{transform:rotate(360deg);} }
@keyframes fadeUp { from{opacity:0;transform:translateY(28px);}to{opacity:1;transform:none;} }
@keyframes fadeIn { from{opacity:0;}to{opacity:1;} }

/* ── Orbit system ───────────────────────────── */
.orbit-ring-el {
  pointer-events: none;
}
.orbit-spot {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
/* Reset aggressive global img rule for orbit spot images */
.orbit-spot img {
  position: static !important;
  background: transparent !important;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  max-width: none;
  height: auto;
}
/* Keep deco-center image correct */
.deco-center {
  overflow: hidden;
}
.deco-center img {
  position: relative !important;
  background: transparent !important;
  border: none !important;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  opacity: 0.92;
  transition: opacity var(--tr);
  max-width: 100%;
}

/* ── Page hero ──────────────────────────────── */
.page-hero { padding: 12rem 0 5rem; text-align: center; position: relative; overflow: hidden; }
.page-hero-img { position: absolute; inset: 0; z-index: 0; }
.page-hero-img img { width:100%; height:100%; object-fit:cover; opacity:.12; }
.page-hero-img::after { content:''; position:absolute;inset:0;background:linear-gradient(to bottom,transparent,var(--bg)); }
.page-hero > .container { position: relative; z-index: 1; }

/* ── Scroll reveal ──────────────────────────── */
.sr { opacity:0; transform:translateY(28px); transition:opacity .7s ease,transform .7s ease; }
.sr.show { opacity:1; transform:none; }

/* ── Service icon backgrounds ────────────────── */
.ic1{background:rgba(82,130,255,0.12);}  .ic2{background:rgba(255,92,138,0.1);}
.ic3{background:rgba(53,232,176,0.1);}   .ic4{background:rgba(255,190,61,0.1);}
.ic5{background:rgba(82,130,255,0.1);}   .ic6{background:rgba(255,92,138,0.08);}

/* ── Home services grid ─────────────────────── */
.hs-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:4rem; }
.hs-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); padding: 2rem;
  transition: all .35s; backdrop-filter: blur(12px); position: relative; overflow: hidden;
}
.hs-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,var(--c1),transparent); opacity:0; transition:opacity .35s; }
.hs-card:hover { border-color:var(--border-h); transform:translateY(-4px); box-shadow:var(--glow1); }
.hs-card:hover::before { opacity: 1; }
.hs-icon { width:48px; height:48px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1.4rem; margin-bottom:1.4rem; }
.hs-card h3 { font-family:var(--font-d); font-size:1rem; font-weight:700; color:var(--white); margin-bottom:.6rem; }
.hs-card p  { font-size:.82rem; color:var(--muted); line-height:1.65; }

/* ── Promo banner ───────────────────────────── */
.promo-banner {
  margin: 4rem 0 0;
  background: linear-gradient(135deg,rgba(255,190,61,.08),rgba(255,92,138,.06));
  border: 1px solid rgba(255,190,61,0.2); border-radius: var(--r); padding: 2rem 2.5rem;
  display: flex; align-items:center; justify-content:space-between; gap: 2rem; flex-wrap: wrap;
}
.promo-label { font-family:var(--font-d); font-size:.6rem; letter-spacing:.25em; text-transform:uppercase; color:var(--c4); margin-bottom:.5rem; }
.promo-text  { font-family:var(--font-d); font-size:1.3rem; font-weight:800; color:var(--white); }
.promo-text span { color:var(--c4); }
.promo-price { font-family:var(--font-d); font-size:2rem; font-weight:800; color:var(--c4); white-space:nowrap; text-align:center; }

/* ── Project grid ───────────────────────────── */
.proj-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:1.5rem; }
.pc { background:var(--surface); border:1px solid var(--border); border-radius:var(--r); overflow:hidden; transition:all .4s; backdrop-filter:blur(10px); position:relative; }
.pc:hover { border-color:var(--border-h); transform:translateY(-5px); box-shadow:var(--glow1); }
.pc-top { position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--c1),transparent);opacity:0;transition:opacity .4s; }
.pc:hover .pc-top { opacity:1; }
.p-a{grid-column:span 8;} .p-b{grid-column:span 4;} .p-c{grid-column:span 4;} .p-d{grid-column:span 4;} .p-e{grid-column:span 4;} .p-f{grid-column:span 6;} .p-g{grid-column:span 6;}
.pc-vis { position:relative; overflow:hidden; background:var(--bg2); }
.pc-vis img { width:100%; height:100%; object-fit:cover; transition:transform .5s; display:block; }
.pc:hover .pc-vis img { transform:scale(1.06); }
.pv-h1{height:280px;} .pv-h2{height:220px;} .pv-h3{height:200px;}
.pc-body { padding:1.6rem 1.8rem 1.8rem; }
.pc-meta { display:flex; align-items:center; justify-content:space-between; margin-bottom:.8rem; }
.pc-badge { font-family:var(--font-d); font-size:.56rem; letter-spacing:.15em; text-transform:uppercase; padding:.28rem .75rem; border-radius:100px; }
.bw{color:var(--c1);border:1px solid rgba(82,130,255,.25);background:rgba(82,130,255,.06);}
.ba{color:var(--c2);border:1px solid rgba(255,92,138,.25);background:rgba(255,92,138,.06);}
.bo{color:var(--c3);border:1px solid rgba(53,232,176,.25);background:rgba(53,232,176,.06);}
.bp{color:var(--c4);border:1px solid rgba(255,190,61,.25);background:rgba(255,190,61,.06);}
.pc-yr{font-family:var(--font-d);font-size:.6rem;color:var(--dim);letter-spacing:.1em;}
.pc-body h3{font-family:var(--font-d);font-size:1rem;font-weight:700;color:var(--white);margin-bottom:.5rem;}
.pc-body p{font-size:.8rem;color:var(--muted);line-height:1.65;}
.pc-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1rem;}
.tag{font-size:.62rem;padding:.22rem .65rem;border-radius:100px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.07);color:var(--dim);}
.pc-link{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.2rem;font-family:var(--font-d);font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;color:var(--c1);transition:gap .3s;}
.pc-link:hover{gap:1rem;}
.filter-row{display:flex;gap:.6rem;flex-wrap:wrap;margin:2.5rem 0 3.5rem;}
.f-btn{font-family:var(--font-d);font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;padding:.5rem 1.2rem;border-radius:4px;border:1px solid var(--border);background:transparent;color:var(--muted);cursor:pointer;transition:all .25s;}
.f-btn:hover,.f-btn.on{border-color:var(--c1);color:#fff;background:var(--c1);}

/* ── Stats band ─────────────────────────────── */
.stats-band{padding:5rem 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:linear-gradient(90deg,transparent,rgba(82,130,255,0.03),transparent);}
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);}
.st-blk{text-align:center;padding:2.5rem 2rem;border-right:1px solid var(--border);}
.st-blk:last-child{border-right:none;}
.st-n{font-family:var(--font-d);font-size:2.8rem;font-weight:800;color:var(--white);line-height:1;}
.st-n sup{color:var(--c1);font-size:1.2rem;}
.st-l{font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-top:.6rem;}
.st-d{font-size:.75rem;color:var(--dim);margin-top:.2rem;}

/* ── Testimonials ───────────────────────────── */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:4rem;}
.tcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:2rem;transition:border-color .3s;backdrop-filter:blur(10px);}
.tcard:hover{border-color:var(--border-h);}
.tc-stars{color:var(--c4);font-size:.75rem;letter-spacing:.15em;margin-bottom:1rem;}
.tc-q{font-size:.85rem;color:var(--text);line-height:1.75;font-style:italic;}
.tc-auth{display:flex;align-items:center;gap:.8rem;margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid var(--border);}
.tc-av{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-d);font-size:.7rem;font-weight:700;color:#fff;flex-shrink:0;}
.av-a{background:linear-gradient(135deg,var(--c1),var(--c2));}
.av-b{background:linear-gradient(135deg,var(--c2),var(--c4));}
.av-c{background:linear-gradient(135deg,var(--c3),var(--c1));}
.tc-name{font-family:var(--font-d);font-size:.7rem;letter-spacing:.05em;color:var(--white);}
.tc-role{font-size:.68rem;color:var(--muted);margin-top:.15rem;}
.swiper-pagination-bullet{background:var(--muted);}
.swiper-pagination-bullet-active{background:var(--c1)!important;}

/* ── Services page ──────────────────────────── */
.services-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;margin-top:4rem;}
.svc-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:2.5rem;position:relative;overflow:hidden;transition:all .4s;backdrop-filter:blur(12px);}
.svc-card:hover{border-color:var(--border-h);box-shadow:var(--glow1);}
.svc-card-accent{position:absolute;top:0;right:0;width:120px;height:120px;border-radius:50%;filter:blur(60px);opacity:.3;transition:opacity .4s;}
.svc-card:hover .svc-card-accent{opacity:.6;}
.acc-blue{background:var(--c1);} .acc-rose{background:var(--c2);} .acc-mint{background:var(--c3);} .acc-amber{background:var(--c4);}
.svc-num{font-family:var(--font-d);font-size:.65rem;letter-spacing:.2em;color:var(--dim);margin-bottom:1.5rem;}
.svc-icon-wrap{width:56px;height:56px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.6rem;margin-bottom:1.5rem;border:1px solid var(--border);}
.svc-card h3{font-family:var(--font-d);font-size:1.2rem;font-weight:700;color:var(--white);margin-bottom:.8rem;}
.svc-card p{font-size:.85rem;color:var(--muted);line-height:1.7;}
.svc-features{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.5rem;}
.svc-feat{font-size:.65rem;letter-spacing:.08em;padding:.3rem .8rem;border-radius:100px;background:rgba(82,130,255,0.07);border:1px solid var(--border);color:var(--muted);}
.svc-card-full{grid-column:span 2;}
.hosting-card{background:linear-gradient(135deg,rgba(255,190,61,.06),rgba(82,130,255,.06));border:1px solid rgba(255,190,61,0.25);}
.hosting-card:hover{border-color:rgba(255,190,61,.5);box-shadow:0 0 40px rgba(255,190,61,.1);}
.hosting-grid{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2rem;}
.hosting-features{display:flex;flex-direction:column;gap:.6rem;margin-top:1.5rem;}
.h-feat{display:flex;align-items:center;gap:.7rem;font-size:.82rem;color:var(--text);}
.h-feat::before{content:'✓';width:20px;height:20px;border-radius:50%;background:rgba(255,190,61,.15);color:var(--c4);display:inline-flex;align-items:center;justify-content:center;font-size:.65rem;font-weight:700;flex-shrink:0;}
.hosting-price-box{text-align:center;padding:2rem;border-left:1px solid rgba(255,190,61,.2);}
.hosting-price{font-family:var(--font-d);font-size:2.4rem;font-weight:800;color:var(--c4);line-height:1;}
.hosting-period{font-size:.72rem;color:var(--muted);margin-top:.4rem;letter-spacing:.08em;}
.badge-promo{display:inline-block;font-family:var(--font-d);font-size:.55rem;letter-spacing:.15em;text-transform:uppercase;padding:.3rem .8rem;border-radius:100px;background:var(--c4);color:#000;font-weight:700;margin-bottom:1rem;}

/* ── About page ─────────────────────────────── */
.about-hero{padding:12rem 0 6rem;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:6rem;}
.about-visual{position:relative;height:500px;}
.av-card{position:absolute;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:1.5rem;backdrop-filter:blur(12px);}
.avc1{top:0;left:0;right:60px;} .avc2{bottom:0;right:0;left:60px;}
.avc3{top:50%;left:50%;transform:translate(-50%,-50%);width:140px;text-align:center;background:linear-gradient(135deg,rgba(82,130,255,.1),rgba(255,92,138,.08));border-color:var(--c1);}
.avc-label{font-family:var(--font-d);font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-bottom:.5rem;}
.avc-val{font-family:var(--font-d);font-size:1.6rem;font-weight:800;color:var(--white);}
.avc-val sup{color:var(--c1);font-size:.8rem;}
.avc-text{font-size:.8rem;color:var(--muted);line-height:1.65;margin-top:.5rem;}
.about-intro{font-size:1rem;color:var(--muted);line-height:1.8;margin-top:1.5rem;}
.about-intro strong{color:var(--text);}
.mission-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;margin-top:4rem;}
.mv-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:2rem;transition:all .35s;backdrop-filter:blur(10px);}
.mv-card:hover{border-color:var(--border-h);}
.mv-icon{font-size:2rem;margin-bottom:1rem;}
.mv-card h3{font-family:var(--font-d);font-size:1rem;font-weight:700;color:var(--white);margin-bottom:.6rem;}
.mv-card p{font-size:.82rem;color:var(--muted);line-height:1.65;}
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:4rem;}
.team-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:2rem;text-align:center;transition:all .35s;backdrop-filter:blur(10px);}
.team-card:hover{border-color:var(--border-h);transform:translateY(-4px);}
.team-avatar{width:80px;height:80px;border-radius:50%;margin:0 auto 1.2rem;display:flex;align-items:center;justify-content:center;font-family:var(--font-d);font-size:1.4rem;font-weight:800;color:#fff;border:2px solid var(--border);}
.ta1{background:linear-gradient(135deg,var(--c1),var(--c2));} .ta2{background:linear-gradient(135deg,var(--c3),var(--c1));} .ta3{background:linear-gradient(135deg,var(--c4),var(--c2));}
.team-name{font-family:var(--font-d);font-size:.9rem;font-weight:700;color:var(--white);}
.team-role{font-size:.75rem;color:var(--c1);margin:.3rem 0 .8rem;letter-spacing:.05em;}
.team-bio{font-size:.78rem;color:var(--muted);line-height:1.6;}

/* ── Contact form ───────────────────────────── */
.contact-section{padding:8rem 0;position:relative;}
.cs-bg{position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(82,130,255,.06) 0%,transparent 70%);}
.cs-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:3rem;backdrop-filter:blur(14px);position:relative;}
.contact-methods{display:flex;gap:1.5rem;justify-content:center;flex-wrap:wrap;margin-top:2rem;}
.cm-item{display:flex;align-items:center;gap:1rem;background:rgba(255,255,255,0.02);border:1px solid var(--border);border-radius:var(--r);padding:1rem 1.5rem;text-decoration:none;transition:all .3s;min-width:200px;}
.cm-item:hover{border-color:var(--border-h);background:rgba(82,130,255,.06);}
.cm-ico{font-size:1.4rem;}
.cm-label{font-size:.7rem;color:var(--muted);letter-spacing:.08em;}
.cm-val{font-family:var(--font-d);font-size:.88rem;font-weight:700;color:var(--white);margin-top:.15rem;}

.form-group{margin-bottom:1.5rem;}
.form-label{display:block;font-family:var(--font-d);font-size:.65rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-bottom:.6rem;}
.form-input,.form-textarea,.form-select{
  width:100%;background:rgba(10,18,40,0.8);
  border:1px solid var(--border);border-radius:4px;
  padding:.9rem 1.2rem;color:var(--text);
  font-family:var(--font-b);font-size:.9rem;font-weight:300;
  transition:border-color .25s,box-shadow .25s;outline:none;
}
.form-input:focus,.form-textarea:focus,.form-select:focus{border-color:var(--c1);box-shadow:0 0 0 3px rgba(82,130,255,.12);}
.form-input::placeholder,.form-textarea::placeholder{color:var(--dim);}
.form-textarea{min-height:140px;resize:vertical;}
.form-select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%235a6e99' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;background-size:12px;}
.form-select option{background:#07091a;color:var(--text);}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;}
.form-error{font-size:.75rem;color:var(--c2);margin-top:.4rem;display:none;}
.form-input.is-error,.form-textarea.is-error{border-color:var(--c2);}
.contact-bar{display:flex;align-items:center;gap:2rem;padding:3rem 0;border-top:1px solid var(--border);flex-wrap:wrap;}
.contact-item{display:flex;align-items:center;gap:.8rem;font-size:.85rem;color:var(--muted);}
.contact-icon{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:1rem;}

/* ── Flash message ──────────────────────────── */
.flash-msg{border-radius:6px;display:flex;align-items:center;gap:.75rem;padding:.8rem 1.2rem;margin-bottom:1rem;font-size:.9rem;}

/* ── Login page ─────────────────────────────── */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem;position:relative;z-index:1;}
.login-card{width:100%;max-width:460px;background:var(--surface2);border:1px solid var(--border);border-radius:12px;padding:3rem;backdrop-filter:blur(20px);}
.login-logo{width:56px;height:56px;background:linear-gradient(135deg,var(--c1),var(--c2));border-radius:12px;display:flex;align-items:center;justify-content:center;font-family:var(--font-d);font-size:1.4rem;font-weight:800;color:#fff;margin:0 auto 1.5rem;}
.login-title{font-family:var(--font-d);font-size:1.6rem;font-weight:800;color:var(--white);text-align:center;margin-bottom:.4rem;}
.login-sub{font-size:.82rem;color:var(--muted);text-align:center;margin-bottom:2.5rem;}

/* ── Tech badges ────────────────────────────── */
.tech-row{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:3rem;}
.t-badge{display:flex;align-items:center;gap:.6rem;padding:.6rem 1.2rem;border-radius:4px;background:rgba(255,255,255,0.02);border:1px solid var(--border);font-size:.75rem;color:var(--muted);transition:all .25s;}
.t-badge:hover{border-color:var(--c1);color:var(--c1);background:rgba(82,130,255,.06);}

/* ── Gradient text ──────────────────────────── */
.grad-text{background:linear-gradient(135deg,var(--c1) 0%,var(--c2) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.grad-text-mint{background:linear-gradient(135deg,var(--c3) 0%,var(--c1) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}

/* ── CTA section ────────────────────────────── */
.cta-section{padding:8rem 0;text-align:center;position:relative;}
.cta-glow{position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(82,130,255,.07) 0%,transparent 70%);}

/* ── Parallax hero image ─────────────────────── */
.img-hero-section{position:relative;height:480px;overflow:hidden;border-radius:12px;margin:4rem 0;}
.img-hero-section img{width:100%;height:100%;object-fit:cover;}
.img-hero-section::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(4,6,15,.8),rgba(82,130,255,.15));}
.img-hero-section .img-caption{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2rem;}

/* ── Swiper custom ──────────────────────────── */
.swiper-btn-prev,.swiper-btn-next{position:absolute;top:50%;z-index:10;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;background:rgba(82,130,255,.15);border:1px solid var(--border-h);color:var(--c1);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .25s;font-size:1rem;}
.swiper-btn-prev:hover,.swiper-btn-next:hover{background:var(--c1);color:#fff;}
.swiper-btn-prev{left:1rem;} .swiper-btn-next{right:1rem;}

/* ── Footer ─────────────────────────────────── */
.site-footer{position:relative;z-index:1;border-top:1px solid var(--border);background:rgba(4,6,15,0.97);backdrop-filter:blur(20px);}
.footer-inner{max-width:1300px;margin:0 auto;padding:5rem 5rem 3rem;display:grid;grid-template-columns:2fr 1fr 1fr 1.5fr;gap:4rem;}
.footer-brand-col {}
.footer-logo{display:flex;align-items:center;gap:1rem;margin-bottom:1.2rem;}
.footer-tagline{font-size:.82rem;color:var(--muted);line-height:1.7;max-width:280px;}
.footer-socials{display:flex;gap:.8rem;margin-top:1.5rem;}
.footer-socials a{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);color:var(--muted);font-size:.85rem;transition:all .25s;}
.footer-socials a:hover{border-color:var(--c1);color:var(--c1);background:rgba(82,130,255,.08);}
.footer-col-title{font-family:var(--font-d);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--white);margin-bottom:1.5rem;}
.footer-links{display:flex;flex-direction:column;gap:.6rem;}
.footer-links a{font-size:.8rem;color:var(--muted);transition:color .25s;display:flex;align-items:center;gap:.5rem;}
.footer-links a:hover{color:var(--c1);}
.footer-links a i{font-size:.5rem;color:var(--dim);}
.footer-contact-list{display:flex;flex-direction:column;gap:.9rem;}
.footer-contact-list li{display:flex;align-items:flex-start;gap:.8rem;font-size:.8rem;color:var(--muted);}
.footer-contact-list li i{color:var(--c1);font-size:.9rem;margin-top:.15rem;flex-shrink:0;}
.footer-contact-list li a{color:var(--muted);transition:color .25s;}
.footer-contact-list li a:hover{color:var(--c1);}
.footer-bottom{border-top:1px solid var(--border);padding:1.5rem 5rem;}
.footer-bottom-inner{max-width:1300px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;}
.footer-copy{font-size:.7rem;color:var(--dim);letter-spacing:.05em;}
.footer-bottom-links{display:flex;gap:1.5rem;}
.footer-bottom-links a{font-family:var(--font-d);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);transition:color .25s;}
.footer-bottom-links a:hover{color:var(--c1);}

/* ── Back to top ────────────────────────────── */
.back-to-top{position:fixed;bottom:2rem;right:2rem;z-index:400;width:44px;height:44px;border-radius:50%;background:var(--c1);color:#fff;border:none;display:flex;align-items:center;justify-content:center;font-size:.9rem;cursor:pointer;opacity:0;transform:translateY(20px);transition:all .35s;box-shadow:0 0 20px rgba(82,130,255,0.4);}
.back-to-top.visible{opacity:1;transform:translateY(0);}
.back-to-top:hover{background:var(--white);color:#000;}

/* ── Responsive ─────────────────────────────── */
@media(max-width:1100px){
  .main-nav{padding:1.2rem 2rem;}
  .container{padding:0 2rem;}
  .hero-section{padding:1rem 1rem 4rem;}
  .hs-grid{grid-template-columns:repeat(2,1fr);}
  .services-grid{grid-template-columns:1fr;}
  .svc-card-full{grid-column:span 1;}
  .hosting-grid{grid-template-columns:1fr;}
  .hosting-price-box{border-left:none;border-top:1px solid rgba(255,190,61,.2);padding-top:1.5rem;}
  .p-a,.p-b,.p-c,.p-d,.p-e,.p-f,.p-g{grid-column:span 12;}
  .stats-row{grid-template-columns:repeat(2,1fr);}
  .st-blk{border-right:none;border-bottom:1px solid var(--border);}
  .st-blk:last-child{border-bottom:none;}
  .testi-grid,.team-grid{grid-template-columns:1fr;}
  .about-hero{grid-template-columns:1fr;gap:3rem;}
  .about-visual{display:none;}
  .hero-deco{display:none;}
  .footer-inner{grid-template-columns:1fr 1fr;gap:2.5rem;}
  .footer-brand-col{grid-column:span 2;}
}
@media(max-width:768px){
  .nav-links,.nav-cta{display:none;}
  .mobile-menu-btn{display:flex;}
  .hero-h1{font-size:2.8rem;}
  .hero-actions{flex-direction:column;align-items:flex-start;}
  .ticker-div{display:none;}
  .hero-ticker{gap:1.5rem;flex-wrap:wrap;}
  .hs-grid{grid-template-columns:1fr;}
  .filter-row{gap:.4rem;}
  .mission-grid{grid-template-columns:1fr;}
  .footer-inner{grid-template-columns:1fr;gap:2rem;}
  .footer-brand-col{grid-column:span 1;}
  .footer-bottom{padding:1.5rem 2rem;}
  .footer-bottom-inner{flex-direction:column;text-align:center;}
  .form-row{grid-template-columns:1fr;}
  .contact-methods{flex-direction:column;}
  .cm-item{min-width:unset;}
  .stats-row{grid-template-columns:1fr;}
}
@media(max-width:480px){
  .section{padding:5rem 0;}
  .hero-section{padding:1rem 1rem 4rem;}
  .container{padding:0 1.5rem;}
  .main-nav{padding:1rem 1.5rem;}
  .footer-bottom{padding:1.5rem;}
}

/* ── Theme toggle button ─────────────────────── */
.theme-toggle-btn {
  width: 36px; height: 36px; border-radius: 8px;
  border: 1px solid var(--border); background: transparent;
  color: var(--muted); cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem; transition: all .25s;
}
.theme-toggle-btn:hover { border-color: var(--c1); color: var(--c1); background: rgba(82,130,255,.08); }

/* ── Smooth theme transitions ────────────────── */
body, .main-nav, .mobile-sidebar,
.card-glass, .hs-card, .tcard, .svc-card, .mv-card, .team-card,
.pc, .cs-card, .cm-item, .login-card, .site-footer, .footer-bottom,
.stats-band, .promo-banner, .av-card, .about-intro,
.form-input, .form-textarea, .form-select,
.nav-link, .nav-brand-text, .s-title, .s-sub, .hero-h1, .hero-desc {
  transition: background-color .35s ease, border-color .35s ease,
              color .35s ease, box-shadow .35s ease;
}

/* ══════════════════════════════════════════════
   LIGHT THEME
══════════════════════════════════════════════ */
[data-theme="light"] {
  --bg:      #f0f4ff;
  --bg2:     #e6edff;
  --surface: rgba(255,255,255,0.92);
  --surface2:rgba(245,248,255,0.97);
  --border:  rgba(82,130,255,0.18);
  --border-h:rgba(82,130,255,0.5);
  --text:    #1a2748;
  --muted:   #506090;
  --dim:     #8298c0;
  --white:   #0d1530;
  --glow1:   0 0 40px rgba(82,130,255,0.1);
  --glow2:   0 0 30px rgba(255,92,138,0.08);
}

/* body & backgrounds */
[data-theme="light"] body { background: var(--bg); cursor: auto; }
[data-theme="light"] .cursor, [data-theme="light"] .cursor-ring { display: none; }
[data-theme="light"] body::before {
  background-image:
    linear-gradient(rgba(82,130,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(82,130,255,0.06) 1px, transparent 1px);
}
[data-theme="light"] body::after { opacity: 0.12; }

/* orbs */
[data-theme="light"] .o1 { background: rgba(82,130,255,0.09); }
[data-theme="light"] .o2 { background: rgba(255,92,138,0.07); }
[data-theme="light"] .o3 { background: rgba(53,232,176,0.05); }

/* navigation */
[data-theme="light"] .main-nav {
  background: rgba(240,244,255,0.92);
  border-bottom-color: var(--border);
}
[data-theme="light"] .main-nav.scrolled {
  background: rgba(240,244,255,0.99);
  box-shadow: 0 4px 24px rgba(82,130,255,0.08);
}

/* nav hover buttons overrides */
[data-theme="light"] .nav-cta:hover { background: #0d1530; color: #fff; }
[data-theme="light"] .btn-fill:hover { background: #0d1530; color: #fff; }

/* mobile sidebar */
[data-theme="light"] .mobile-sidebar { background: #eef2ff; border-left-color: var(--border); }
[data-theme="light"] .mobile-sidebar-header button { color: var(--muted); }
[data-theme="light"] .mobile-overlay { background: rgba(10,20,60,0.35); }

/* hero */
[data-theme="light"] .hero-eyebrow {
  background: rgba(53,232,176,0.07);
  border-color: rgba(53,232,176,0.3);
}

/* page hero images */
[data-theme="light"] .page-hero-img img { opacity: 0.07; }
[data-theme="light"] .page-hero-img::after {
  background: linear-gradient(to bottom, transparent, var(--bg));
}

/* stats band */
[data-theme="light"] .stats-band {
  background: linear-gradient(90deg, transparent, rgba(82,130,255,0.04), transparent);
  border-color: var(--border);
}

/* forms */
[data-theme="light"] .form-input,
[data-theme="light"] .form-textarea,
[data-theme="light"] .form-select {
  background: rgba(255,255,255,0.97);
  color: var(--text);
}
[data-theme="light"] .form-input::placeholder,
[data-theme="light"] .form-textarea::placeholder { color: var(--dim); }
[data-theme="light"] .form-select option { background: #f0f4ff; color: var(--text); }

/* footer */
[data-theme="light"] .site-footer { background: rgba(230,237,255,0.98); }
[data-theme="light"] .footer-bottom { background: rgba(218,228,255,0.6); }

/* promo banner */
[data-theme="light"] .promo-banner {
  background: linear-gradient(135deg, rgba(255,190,61,.1), rgba(255,92,138,.07));
}

/* img hero section overlay */
[data-theme="light"] .img-hero-section::after {
  background: linear-gradient(135deg, rgba(240,244,255,.85), rgba(82,130,255,.15));
}

/* login */
[data-theme="light"] .login-card { background: rgba(255,255,255,0.97); }

/* back-to-top stays --c1 */

/* filter buttons active */
[data-theme="light"] .f-btn { color: var(--muted); background: rgba(255,255,255,0.8); }
[data-theme="light"] .f-btn:hover, [data-theme="light"] .f-btn.on {
  border-color: var(--c1); color: #fff; background: var(--c1);
}