*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --blue: #1A6FC4;
  --blue2: #2587E8;
  --cyan: #00BFFF;
  --dark: #040810;
  --dark2: #0d1a2e;
  --white: #FFFFFF;
  --off-white: #F4F7FB;
  --light: #E8EFF8;
  --text: #1A2332;
  --text-light: #6B7A90;
  --border: #E2E8F0;
}
html { scroll-behavior: smooth; }
body { background: var(--white); color: var(--text); font-family: 'Outfit', sans-serif; overflow-x: hidden; }

/* ── NAV ── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 20px 60px;
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(4,8,16,0.96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0,191,255,0.1);
}
.nav-logo { display: flex; align-items: center; gap: 12px; }
.nav-logo img { width: 40px; height: 40px; object-fit: contain; }
.nav-logo-text { font-family: 'Bebas Neue', sans-serif; font-size: 20px; letter-spacing: 3px; color: #fff; }
.nav-logo-sub { font-size: 9px; font-weight: 300; letter-spacing: 4px; color: var(--cyan); text-transform: uppercase; }
.nav-links { display: flex; gap: 36px; align-items: center; }
.nav-links a { font-size: 12px; font-weight: 400; letter-spacing: 2px; color: rgba(255,255,255,0.5); text-decoration: none; text-transform: uppercase; transition: color 0.3s; }
.nav-links a:hover { color: var(--cyan); }
.nav-cta { background: var(--blue); color: #fff; padding: 11px 26px; font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; border-radius: 4px; transition: all 0.3s; }
.nav-cta:hover { background: var(--cyan); color: var(--dark); transform: translateY(-1px); }

/* ── HERO (dark) ── */
.hero {
  min-height: 100vh;
  background: var(--dark);
  display: flex; align-items: center; justify-content: space-between;
  padding: 120px 60px 80px 60px;
  position: relative; overflow: hidden;
}
.hero-grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(0,191,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(0,191,255,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  animation: gridMove 20s linear infinite;
}
@keyframes gridMove { to { background-position: 60px 60px; } }
.orb { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; }
.orb1 { width: 500px; height: 500px; background: rgba(26,111,196,0.18); top: -100px; right: 50px; animation: orbFloat 8s ease-in-out infinite; }
.orb2 { width: 300px; height: 300px; background: rgba(0,191,255,0.08); bottom: 100px; left: 200px; animation: orbFloat 12s ease-in-out infinite reverse; }
@keyframes orbFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-30px); } }

.hero-left { flex: 1; max-width: 600px; z-index: 2; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 600; letter-spacing: 5px; color: var(--cyan);
  text-transform: uppercase; margin-bottom: 28px;
  padding: 8px 20px; border: 1px solid rgba(0,191,255,0.25); border-radius: 50px;
  background: rgba(0,191,255,0.06);
}
.hero-eyebrow::before { content: ''; width: 6px; height: 6px; background: var(--cyan); border-radius: 50%; animation: blink 2s infinite; }
@keyframes blink { 0%,100%{opacity:1;} 50%{opacity:0.3;} }
.hero-title { font-family: 'Bebas Neue', sans-serif; font-size: clamp(64px,7vw,100px); line-height: 0.93; letter-spacing: 2px; color: #fff; margin-bottom: 28px; }
.hero-title .accent { color: var(--cyan); }
.hero-title .dim { color: rgba(255,255,255,0.2); font-size: 0.45em; letter-spacing: 8px; display: block; margin-top: 8px; }
.hero-desc { font-size: 17px; font-weight: 300; color: rgba(255,255,255,0.5); line-height: 1.85; margin-bottom: 44px; max-width: 480px; }
.hero-desc strong { color: rgba(255,255,255,0.85); font-weight: 500; }
.hero-btns { display: flex; gap: 14px; flex-wrap: wrap; }
.btn-primary { display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg,var(--blue),var(--cyan)); color: var(--dark); font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; padding: 16px 36px; border-radius: 4px; transition: all 0.3s; box-shadow: 0 0 30px rgba(0,191,255,0.25); }
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 0 50px rgba(0,191,255,0.45); }
.btn-ghost { display: inline-flex; align-items: center; gap: 8px; background: transparent; color: #fff; font-size: 13px; font-weight: 400; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; padding: 16px 36px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.15); transition: all 0.3s; }
.btn-ghost:hover { border-color: var(--cyan); color: var(--cyan); transform: translateY(-3px); }

/* ── ORBIT ── */
.hero-right { flex-shrink: 0; z-index: 2; }
.orbit-wrap { width: 480px; height: 480px; position: relative; }

.orbit-center {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 150px; height: 150px; border-radius: 50%;
  background: rgba(13,26,46,0.9);
  border: 2px solid rgba(0,191,255,0.35);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 50px rgba(0,191,255,0.2), inset 0 0 30px rgba(26,111,196,0.1);
  z-index: 10;
}
.orbit-center img { width: 100px; height: 100px; object-fit: contain; filter: drop-shadow(0 0 16px rgba(0,191,255,0.4)); }
.orbit-center::after { content:''; position:absolute; inset:-10px; border-radius:50%; border:1px solid rgba(0,191,255,0.12); animation:ringPulse 3s ease-in-out infinite; }
@keyframes ringPulse { 0%,100%{transform:scale(1);opacity:0.6;} 50%{transform:scale(1.1);opacity:0.1;} }

/* Rings */
.ring { position:absolute; top:50%; left:50%; border-radius:50%; border:1px solid rgba(0,191,255,0.1); transform:translate(-50%,-50%); }
.ring1 { width:240px; height:240px; border-color:rgba(0,191,255,0.18); animation:spinCW 14s linear infinite; }
.ring2 { width:350px; height:350px; border-color:rgba(26,111,196,0.12); animation:spinCCW 22s linear infinite; }
.ring3 { width:475px; height:475px; border-color:rgba(0,191,255,0.06); animation:spinCW 35s linear infinite; }
@keyframes spinCW  { to { transform:translate(-50%,-50%) rotate(360deg);  } }
@keyframes spinCCW { to { transform:translate(-50%,-50%) rotate(-360deg); } }

/* Nodes */
.node {
  position:absolute; top:50%; left:50%;
  width:50px; height:50px; margin:-25px 0 0 -25px;
  background:rgba(13,26,46,0.95); border:1px solid rgba(0,191,255,0.3);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:20px; box-shadow:0 0 16px rgba(0,191,255,0.12);
  cursor:default; transition:all 0.3s;
}
.node:hover { transform-origin:center; box-shadow:0 0 28px rgba(0,191,255,0.5); border-color:var(--cyan); }
.node .tip { position:absolute; bottom:-28px; left:50%; transform:translateX(-50%); font-size:8px; font-weight:700; letter-spacing:2px; color:var(--cyan); text-transform:uppercase; white-space:nowrap; opacity:0; transition:0.3s; }
.node:hover .tip { opacity:1; }

/* Ring 1 — 4 nodes at 120px radius */
.n1a { animation: orb1a 14s linear infinite; }
.n1b { animation: orb1b 14s linear infinite; }
.n1c { animation: orb1c 14s linear infinite; }
.n1d { animation: orb1d 14s linear infinite; }
@keyframes orb1a { 0%{transform:rotate(0deg) translateX(120px) rotate(0deg);} 100%{transform:rotate(360deg) translateX(120px) rotate(-360deg);} }
@keyframes orb1b { 0%{transform:rotate(90deg) translateX(120px) rotate(-90deg);} 100%{transform:rotate(450deg) translateX(120px) rotate(-450deg);} }
@keyframes orb1c { 0%{transform:rotate(180deg) translateX(120px) rotate(-180deg);} 100%{transform:rotate(540deg) translateX(120px) rotate(-540deg);} }
@keyframes orb1d { 0%{transform:rotate(270deg) translateX(120px) rotate(-270deg);} 100%{transform:rotate(630deg) translateX(120px) rotate(-630deg);} }

/* Ring 2 — 3 nodes at 175px radius, counter-clockwise */
.n2a { animation: orb2a 22s linear infinite; }
.n2b { animation: orb2b 22s linear infinite; }
.n2c { animation: orb2c 22s linear infinite; }
@keyframes orb2a { 0%{transform:rotate(0deg) translateX(175px) rotate(0deg);} 100%{transform:rotate(-360deg) translateX(175px) rotate(360deg);} }
@keyframes orb2b { 0%{transform:rotate(120deg) translateX(175px) rotate(-120deg);} 100%{transform:rotate(-240deg) translateX(175px) rotate(240deg);} }
@keyframes orb2c { 0%{transform:rotate(240deg) translateX(175px) rotate(-240deg);} 100%{transform:rotate(-120deg) translateX(175px) rotate(120deg);} }

/* ── STATS BAR ── */
.stats-bar { background: var(--dark2); border-top:1px solid rgba(0,191,255,0.1); border-bottom:1px solid rgba(0,191,255,0.1); padding:36px 60px; display:flex; justify-content:space-around; align-items:center; }
.stat { text-align:center; }
.stat-num { font-family:'Bebas Neue',sans-serif; font-size:48px; color:var(--cyan); line-height:1; }
.stat-label { font-size:10px; font-weight:400; letter-spacing:4px; color:rgba(255,255,255,0.35); text-transform:uppercase; margin-top:4px; }
.stat-div { width:1px; height:50px; background:rgba(255,255,255,0.07); }

/* ── BLUE STRIPE SEPARATOR ── */
.stripe { height:5px; background:linear-gradient(to right,var(--blue),var(--cyan),var(--blue2)); }

/* ── SERVICES (white bg) ── */
.services { padding:110px 60px; background:var(--white); }
.section-tag { font-size:11px; font-weight:700; letter-spacing:7px; color:var(--blue); text-transform:uppercase; margin-bottom:14px; display:block; }
.section-title { font-family:'Bebas Neue',sans-serif; font-size:68px; letter-spacing:2px; color:var(--text); margin-bottom:12px; }
.section-sub { font-size:16px; font-weight:300; color:var(--text-light); max-width:520px; line-height:1.8; margin-bottom:60px; }

.services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.svc {
  background:var(--off-white); border-radius:16px; padding:44px 36px;
  border-top:4px solid transparent;
  transition:all 0.35s; position:relative; overflow:hidden;
}
.svc::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(to right,var(--blue),var(--cyan)); transform:scaleX(0); transform-origin:left; transition:transform 0.35s; }
.svc:hover::before { transform:scaleX(1); }
.svc:hover { background:var(--white); box-shadow:0 16px 48px rgba(26,111,196,0.1); transform:translateY(-6px); }
.svc-num { font-family:'Bebas Neue',sans-serif; font-size:72px; color:rgba(26,111,196,0.08); line-height:1; margin-bottom:6px; }
.svc-icon { width:56px; height:56px; background:rgba(26,111,196,0.08); border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:24px; margin-bottom:20px; transition:all 0.3s; }
.svc:hover .svc-icon { background:rgba(26,111,196,0.15); transform:scale(1.1); }
.svc-tag { font-size:10px; font-weight:700; letter-spacing:4px; color:var(--blue); text-transform:uppercase; margin-bottom:10px; }
.svc-title { font-size:22px; font-weight:700; color:var(--text); margin-bottom:12px; }
.svc-desc { font-size:14px; font-weight:300; color:var(--text-light); line-height:1.8; }
.svc-link { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; letter-spacing:2px; color:var(--blue); text-transform:uppercase; margin-top:20px; text-decoration:none; opacity:0; transform:translateX(-8px); transition:all 0.35s; }
.svc:hover .svc-link { opacity:1; transform:translateX(0); }

/* Full-width last card */
.svc-wide { grid-column:span 3; display:flex; align-items:center; gap:60px; }
.svc-wide .svc-content { flex:1; }
.svc-wide .svc-highlight { flex:1; background:linear-gradient(135deg,var(--blue),var(--blue2)); border-radius:12px; padding:36px; color:white; text-align:center; }
.svc-wide .svc-highlight h3 { font-family:'Bebas Neue',sans-serif; font-size:36px; letter-spacing:2px; margin-bottom:10px; }
.svc-wide .svc-highlight p { font-size:14px; font-weight:300; opacity:0.75; line-height:1.7; }

/* ── WHY US (light bg) ── */
.why { padding:110px 60px; background:var(--off-white); }
.why-inner { display:flex; gap:80px; align-items:center; max-width:1300px; margin:0 auto; }
.why-left { flex:1; }
.why-title { font-family:'Bebas Neue',sans-serif; font-size:72px; line-height:0.95; color:var(--text); margin-bottom:24px; }
.why-title span { color:var(--blue); }
.why-desc { font-size:16px; font-weight:300; color:var(--text-light); line-height:1.9; margin-bottom:36px; max-width:420px; }
.why-right { flex:1; display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.why-card { background:var(--white); border-radius:12px; padding:28px 24px; border:1px solid var(--border); transition:all 0.3s; }
.why-card:hover { border-color:rgba(26,111,196,0.3); box-shadow:0 8px 30px rgba(26,111,196,0.08); transform:translateY(-4px); }
.why-card-icon { font-size:26px; margin-bottom:12px; }
.why-card-title { font-size:15px; font-weight:700; color:var(--text); margin-bottom:7px; }
.why-card-desc { font-size:13px; font-weight:300; color:var(--text-light); line-height:1.7; }

/* ── CTA (dark) ── */
.cta-band { background:var(--dark); padding:120px 60px; text-align:center; position:relative; overflow:hidden; }
.cta-band::before { content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:700px; height:700px; border-radius:50%; background:radial-gradient(circle,rgba(0,191,255,0.07) 0%,transparent 65%); pointer-events:none; }
.cta-band .section-tag { color:var(--cyan); }
.cta-title { font-family:'Bebas Neue',sans-serif; font-size:90px; letter-spacing:3px; color:#fff; line-height:0.95; margin-bottom:20px; }
.cta-title span { color:var(--cyan); }
.cta-sub { font-size:17px; font-weight:300; color:rgba(255,255,255,0.4); max-width:480px; margin:0 auto 48px auto; line-height:1.8; }
.cta-btns { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ── CONTACT (white) ── */
.contact { padding:100px 60px 120px 60px; background:var(--white); }
.contact-inner { max-width:780px; margin:0 auto; }
.contact-title { font-family:'Bebas Neue',sans-serif; font-size:56px; letter-spacing:2px; color:var(--text); margin-bottom:56px; }
.form-group { margin-bottom:20px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.form-group label { display:block; font-size:10px; font-weight:700; letter-spacing:4px; color:var(--blue); text-transform:uppercase; margin-bottom:8px; }
.form-group input, .form-group textarea, .form-group select { width:100%; background:var(--off-white); border:1px solid var(--border); border-radius:8px; padding:14px 18px; color:var(--text); font-family:'Outfit',sans-serif; font-size:14px; font-weight:300; transition:all 0.3s; outline:none; appearance:none; }
.form-group input:focus, .form-group textarea:focus, .form-group select:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(26,111,196,0.1); background:var(--white); }
.form-group textarea { resize:vertical; min-height:130px; }
.form-group select option { background:var(--white); color:var(--text); }
.btn-submit { width:100%; padding:18px; background:linear-gradient(135deg,var(--blue),var(--cyan)); color:var(--dark); font-family:'Outfit',sans-serif; font-size:14px; font-weight:700; letter-spacing:3px; text-transform:uppercase; border:none; border-radius:8px; cursor:pointer; transition:all 0.3s; margin-top:8px; box-shadow:0 4px 20px rgba(26,111,196,0.25); }
.btn-submit:hover { transform:translateY(-2px); box-shadow:0 8px 40px rgba(26,111,196,0.4); }

/* ── FOOTER ── */
footer { background:var(--dark); border-top:1px solid rgba(255,255,255,0.06); padding:44px 60px; display:flex; align-items:center; justify-content:space-between; }
.footer-brand { display:flex; align-items:center; gap:12px; }
.footer-brand img { width:34px; height:34px; object-fit:contain; }
.footer-brand-name { font-family:'Bebas Neue',sans-serif; font-size:16px; letter-spacing:3px; color:#fff; }
.footer-brand-sub { font-size:9px; font-weight:300; letter-spacing:3px; color:var(--cyan); }
.footer-mid { font-size:11px; font-weight:300; color:rgba(255,255,255,0.25); letter-spacing:1px; text-align:center; line-height:1.8; }
.footer-right { font-size:12px; font-weight:300; color:rgba(255,255,255,0.3); text-align:right; line-height:1.8; }
.footer-right a { color:var(--cyan); text-decoration:none; }
.glow-bar { height:3px; background:linear-gradient(to right,var(--blue),var(--cyan),var(--blue2)); }

/* ── SCROLL REVEAL ── */
.reveal { opacity:0; transform:translateY(28px); transition:opacity 0.6s ease, transform 0.6s ease; }
.svc.reveal { transition-delay: calc(var(--i,0) * 80ms); }
.reveal.revealed { opacity:1; transform:translateY(0); }

/* ── PARTICLE CANVAS ── */
#particleCanvas { position:absolute; inset:0; pointer-events:none; z-index:1; }

/* ── FORM SUCCESS ── */
.form-success { display:none; text-align:center; padding:40px 20px; }
.form-success .check { font-size:48px; margin-bottom:16px; }
.form-success h3 { font-family:'Bebas Neue',sans-serif; font-size:36px; letter-spacing:2px; color:var(--text); margin-bottom:8px; }
.form-success p { font-size:15px; color:var(--text-light); }
.btn-back { display:inline-flex; align-items:center; gap:6px; margin-top:20px; font-size:12px; font-weight:600; letter-spacing:2px; color:var(--blue); text-transform:uppercase; background:none; border:none; cursor:pointer; text-decoration:underline; }

/* ── SIRINA'S KIDS FEATURE ── */
.sk-feature {
  background: linear-gradient(160deg, #fdf8f2 0%, #fef4e8 50%, #fdf6f0 100%);
  padding: 100px 60px;
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(245,166,35,0.2);
  border-bottom: 1px solid rgba(74,163,219,0.15);
}
.sk-feature::before {
  content: '';
  position: absolute;
  top: -120px; right: 300px;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245,166,35,0.07) 0%, transparent 60%);
  pointer-events: none;
}
.sk-feature::after {
  content: '';
  position: absolute;
  bottom: -80px; left: -80px;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(74,163,219,0.05) 0%, transparent 65%);
  pointer-events: none;
}
.sk-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; gap: 80px; }
.sk-badge {
  font-size: 10px; font-weight: 700; letter-spacing: 5px;
  color: #4AA3DB; text-transform: uppercase;
  border: 1px solid rgba(74,163,219,0.35);
  padding: 6px 16px; border-radius: 50px;
  display: inline-block; margin-bottom: 24px;
  background: rgba(74,163,219,0.08);
}
.sk-left { flex: 1; z-index: 2; }
.sk-title { font-family: 'Bebas Neue', sans-serif; font-size: clamp(42px, 4.5vw, 62px); letter-spacing: 3px; color: #2a2a2a; line-height: 1; margin-bottom: 6px; }
.sk-title .t-gold { color: #F5A623; }
.sk-title .t-blue { color: #4AA3DB; }
.sk-subtitle { font-size: 11px; font-weight: 400; letter-spacing: 4px; color: rgba(74,163,219,0.75); text-transform: uppercase; margin-bottom: 28px; }
.sk-desc { font-size: 16px; font-weight: 300; color: #555; line-height: 1.9; margin-bottom: 28px; max-width: 500px; }
.sk-desc strong { color: #d4890a; font-weight: 600; }
.sk-stats {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 28px;
}
.sk-stat-card {
  background: rgba(255,255,255,0.6); border: 1px solid rgba(74,163,219,0.18);
  border-radius: 10px; padding: 18px 12px; text-align: center;
  transition: all 0.3s; box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
.sk-stat-card:hover { border-color: rgba(74,163,219,0.4); background: rgba(255,255,255,0.9); transform: translateY(-3px); box-shadow: 0 6px 20px rgba(74,163,219,0.1); }
.sk-stat-num { font-family: 'Bebas Neue', sans-serif; font-size: 34px; color: #d4890a; line-height: 1; }
.sk-stat-label { font-size: 8px; font-weight: 400; letter-spacing: 3px; color: #888; text-transform: uppercase; margin-top: 4px; }
.sk-locations { margin-bottom: 32px; display: flex; gap: 10px; flex-wrap: wrap; }
.sk-loc {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(74,163,219,0.08); border: 1px solid rgba(74,163,219,0.22);
  border-radius: 8px; padding: 9px 14px; font-size: 11px;
  font-weight: 500; letter-spacing: 2px; color: #4AA3DB; text-transform: uppercase;
}
.sk-btns { display: flex; gap: 14px; flex-wrap: wrap; }
.btn-donate {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, #F5A623, #c9a84c);
  color: #071018; font-size: 13px; font-weight: 800;
  letter-spacing: 2px; text-transform: uppercase; text-decoration: none;
  padding: 15px 32px; border-radius: 4px;
  transition: all 0.3s; box-shadow: 0 0 30px rgba(245,166,35,0.25);
}
.btn-donate:hover { transform: translateY(-3px); box-shadow: 0 0 50px rgba(245,166,35,0.5); }
.btn-sk-socials {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; color: #555;
  font-size: 13px; font-weight: 400; letter-spacing: 2px;
  text-transform: uppercase; padding: 15px 32px; border-radius: 4px;
  border: 1px solid rgba(74,163,219,0.3); transition: all 0.3s;
  cursor: pointer;
}
.btn-sk-socials:hover { border-color: #4AA3DB; color: #4AA3DB; transform: translateY(-3px); }
/* ── SK LOGO DISPLAY (right side) ── */
.sk-right { flex-shrink: 0; z-index: 2; display: flex; align-items: center; justify-content: center; }
.sk-logo-display {
  position: relative; width: 360px; height: 360px;
  display: flex; align-items: center; justify-content: center;
}
.sk-logo-ring1 {
  position: absolute; inset: -20px; border-radius: 50%;
  border: 1px solid rgba(74,163,219,0.18);
  animation: skRingSpin 18s linear infinite;
}
.sk-logo-ring2 {
  position: absolute; inset: -40px; border-radius: 50%;
  border: 1px dashed rgba(245,166,35,0.12);
  animation: skRingSpin 30s linear infinite reverse;
}
.sk-logo-glow {
  position: absolute; inset: -20px; border-radius: 50%;
  background: radial-gradient(circle, rgba(74,163,219,0.12) 0%, rgba(245,166,35,0.06) 45%, transparent 70%);
  filter: blur(18px);
}
@keyframes skRingSpin { to { transform: rotate(360deg); } }
.sk-logo-img {
  width: 320px; height: 320px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 10%;
  border: 2px solid rgba(74,163,219,0.25);
  box-shadow:
    0 0 0 6px rgba(74,163,219,0.06),
    0 0 40px rgba(74,163,219,0.18),
    0 0 80px rgba(245,166,35,0.08);
  background: #ffffff;
  position: relative; z-index: 1;
}

/* ── CLIENTS SECTION ── */
.clients { padding: 90px 60px; background: var(--white); }
.clients-header { text-align: center; margin-bottom: 60px; }
.clients-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  max-width: 1000px; margin: 0 auto;
}
.client-card {
  background: var(--off-white); border-radius: 16px; padding: 36px 28px;
  text-align: center; cursor: pointer; transition: all 0.3s;
  border: 2px solid transparent; position: relative; overflow: hidden;
}
.client-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--client-color, var(--blue));
  transform: scaleX(0); transform-origin: left; transition: transform 0.3s;
}
.client-card:hover::before { transform: scaleX(1); }
.client-card:hover {
  background: var(--white);
  box-shadow: 0 16px 48px rgba(0,0,0,0.08);
  transform: translateY(-6px);
  border-color: transparent;
}
.client-logo {
  width: 72px; height: 72px; border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Bebas Neue', sans-serif; font-size: 20px; font-weight: 900;
  color: #fff; margin: 0 auto 18px auto; letter-spacing: 1px;
  background: var(--client-color, var(--blue));
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
  transition: all 0.3s;
}
.client-card:hover .client-logo { transform: scale(1.08); }
.client-name { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.client-type { font-size: 10px; font-weight: 400; letter-spacing: 3px; color: var(--text-light); text-transform: uppercase; }
.client-cta {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; letter-spacing: 2px;
  color: var(--client-color, var(--blue)); text-transform: uppercase;
  margin-top: 16px; opacity: 0; transform: translateY(6px); transition: all 0.3s;
}
.client-card:hover .client-cta { opacity: 1; transform: translateY(0); }

/* ── MODAL ── */
.modal-overlay {
  display: none; position: fixed; inset: 0; z-index: 1000;
  background: rgba(4,8,16,0.85); backdrop-filter: blur(8px);
  align-items: center; justify-content: center; padding: 20px;
}
.modal-overlay.open { display: flex; animation: fadeIn 0.25s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal {
  background: #fff; border-radius: 20px; padding: 40px;
  max-width: 440px; width: 100%; position: relative;
  animation: slideUp 0.3s ease;
}
@keyframes slideUp { from { transform: translateY(30px); opacity:0; } to { transform: translateY(0); opacity:1; } }
.modal-close {
  position: absolute; top: 16px; right: 16px;
  width: 32px; height: 32px; border-radius: 50%; border: none;
  background: var(--off-white); color: var(--text-light);
  font-size: 16px; cursor: pointer; transition: all 0.2s;
  display: flex; align-items: center; justify-content: center;
}
.modal-close:hover { background: var(--border); color: var(--text); }
.modal-logo-row { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; }
.modal-logo {
  width: 56px; height: 56px; border-radius: 14px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Bebas Neue', sans-serif; font-size: 18px; color: #fff;
}
.modal-name { font-size: 20px; font-weight: 700; color: var(--text); }
.modal-category { font-size: 10px; font-weight: 400; letter-spacing: 3px; color: var(--text-light); text-transform: uppercase; margin-top: 2px; }
.modal-divider { height: 1px; background: var(--border); margin-bottom: 24px; }
.modal-label { font-size: 10px; font-weight: 700; letter-spacing: 4px; color: var(--blue); text-transform: uppercase; margin-bottom: 16px; }
.social-links { display: flex; flex-direction: column; gap: 10px; }
.social-link {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px; border-radius: 10px;
  background: var(--off-white); text-decoration: none;
  color: var(--text); font-size: 14px; font-weight: 500;
  transition: all 0.2s; border: 1px solid transparent;
}
.social-link:hover { background: var(--white); border-color: var(--border); transform: translateX(4px); }
.social-link .social-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.social-link .social-name { font-size: 13px; font-weight: 600; color: var(--text); }
.social-link .social-handle { font-size: 11px; color: var(--text-light); margin-top: 1px; }
.modal-no-links { text-align: center; padding: 20px; color: var(--text-light); font-size: 14px; }

/* ── RESPONSIVE CLIENTS ── */
@media (max-width: 768px) {
  .sk-inner { flex-direction: column-reverse; gap: 40px; }
  .sk-feature { padding: 60px 20px; }
  .sk-logo-display { width: 260px; height: 260px; }
  .sk-logo-img { width: 230px; height: 230px; }
  .sk-stats { grid-template-columns: repeat(4,1fr); }
  .clients { padding: 60px 20px; }
  .clients-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .clients-grid { grid-template-columns: 1fr 1fr; }
}

/* ── MOBILE MENU ── */
.menu-btn { display:none; background:none; border:none; color:#fff; font-size:22px; cursor:pointer; padding:4px 8px; line-height:1; }
.mobile-menu {
  display:none; position:fixed; top:65px; left:0; right:0; z-index:99;
  background:rgba(4,8,16,0.98); backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(0,191,255,0.15);
  flex-direction:column; padding:20px 24px 28px;
  gap:0;
}
.mobile-menu.open { display:flex; }
.mobile-menu a { font-size:13px; font-weight:400; letter-spacing:2px; color:rgba(255,255,255,0.6); text-decoration:none; text-transform:uppercase; padding:14px 0; border-bottom:1px solid rgba(255,255,255,0.06); transition:color 0.2s; }
.mobile-menu a:last-child { border-bottom:none; margin-top:10px; color:var(--cyan); }
.mobile-menu a:hover { color:var(--cyan); }

/* ── RESPONSIVE ── */
@media (max-width:1100px) {
  .hero { flex-direction:column; padding:120px 40px 80px 40px; text-align:center; gap:60px; }
  .hero-left { max-width:100%; }
  .hero-btns { justify-content:center; }
  .hero-desc { margin:0 auto 44px auto; }
  .orbit-wrap { width:360px; height:360px; }
  .ring1 { width:180px; height:180px; }
  .ring2 { width:270px; height:270px; }
  .ring3 { width:355px; height:355px; }
  .services-grid { grid-template-columns:1fr 1fr; }
  .svc-wide { grid-column:span 2; flex-direction:column; gap:30px; }
  .why-inner { flex-direction:column; gap:60px; }
  .why-title { font-size:56px; }
}
@media (max-width:768px) {
  nav { padding:18px 20px; }
  .nav-links { display:none; }
  .menu-btn { display:block; }
  .hero { padding:100px 20px 60px 20px; }
  .hero-title { font-size:60px; }
  .orbit-wrap { width:280px; height:280px; }
  .orbit-center { width:110px; height:110px; }
  .orbit-center img { width:72px; height:72px; }
  .ring1 { width:140px; height:140px; }
  .ring2 { width:210px; height:210px; }
  .ring3 { width:275px; height:275px; }
  .stats-bar { flex-wrap:wrap; gap:24px; padding:28px 20px; }
  .stat-div { display:none; }
  .services { padding:70px 20px; }
  .services-grid { grid-template-columns:1fr; }
  .svc-wide { grid-column:span 1; }
  .why { padding:70px 20px; }
  .why-right { grid-template-columns:1fr; }
  .cta-band { padding:80px 20px; }
  .cta-title { font-size:60px; }
  .cta-btns { flex-direction:column; align-items:center; }
  .contact { padding:70px 20px 90px 20px; }
  .form-row { grid-template-columns:1fr; }
  footer { flex-direction:column; gap:28px; text-align:center; padding:36px 20px; }
  .footer-right { text-align:center; }
}
@media (max-width:480px) {
  .hero-title { font-size:48px; }
  .section-title { font-size:48px; }
  .cta-title { font-size:46px; }
  .why-title { font-size:42px; }
  .btn-primary, .btn-ghost { width:100%; justify-content:center; }
  .n2a,.n2b,.n2c { display:none; }
  .ring2,.ring3 { display:none; }
}