/* ═══════════════════════════════════════════
   RESET & TOKENS
═══════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }

:root {
  --navy:     #0a1f44;
  --blue:     #1657c5;
  --blue-lt:  #2d6fe8;
  --sky:      #e8f0fd;
  --white:    #ffffff;
  --gray-50:  #f8fafc;
  --gray-200: #e2e8f0;
  --gray-400: #94a3b8;
  --gray-600: #475569;
  --gray-800: #1e293b;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow:    0 4px 16px rgba(0,0,0,0.10);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.14);
  --r: 8px;
  --nav-h: 70px;
}

body {
  font-family: 'Inter', sans-serif;
  background: var(--white);
  color: var(--gray-800);
  line-height: 1.6;
  overflow-x: hidden;
}

/* Skip to main content — accessibility */
.skip-link {
  position: absolute; top: -999px; left: 1rem;
  background: var(--blue); color: var(--white);
  padding: 0.5rem 1rem; border-radius: 0 0 var(--r) var(--r);
  font-size: 0.875rem; font-weight: 600; z-index: 10000;
  text-decoration: none; transition: top 0.2s;
}
.skip-link:focus { top: 0; }

/* Focus ring */
:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}

/* ── LAYOUT ── */
.container { max-width: 1180px; margin: 0 auto; padding: 0 2rem; }

.section-tag {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--blue); margin-bottom: 0.9rem;
}
.section-tag::before { content:''; width:28px; height:2px; background:var(--blue); border-radius:2px; }

h2.section-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.8rem, 3.5vw, 2.7rem);
  font-weight: 700; color: var(--navy);
  line-height: 1.2; margin-bottom: 1rem;
}
.section-lead {
  font-size: 1rem; color: var(--gray-600);
  max-width: 540px; line-height: 1.8; margin-bottom: 3rem;
}

/* ── BUTTONS ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem; font-weight: 600;
  padding: 0.8rem 2rem; border-radius: var(--r);
  border: none; cursor: pointer; text-decoration: none;
  transition: all 0.22s ease; letter-spacing: 0.02em;
  min-height: 48px; /* touch target */
}
.btn-blue  { background: var(--blue); color: var(--white); box-shadow: 0 4px 14px rgba(22,87,197,.30); }
.btn-blue:hover  { background: var(--navy); transform: translateY(-1px); }
.btn-white { background: var(--white); color: var(--blue); font-weight: 700; box-shadow: var(--shadow); }
.btn-white:hover { background: var(--sky); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--white); border: 2px solid rgba(255,255,255,0.38); }
.btn-ghost:hover { border-color: var(--white); background: rgba(255,255,255,0.10); }

/* ════════════════════════════════════════
   NAVIGATION
════════════════════════════════════════ */
#site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 999;
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--gray-200);
  box-shadow: var(--shadow-sm);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--nav-h); max-width: 1180px; margin: 0 auto; padding: 0 2rem;
  gap: 1rem;
}
.logo {
  font-family: 'Playfair Display', serif;
  font-size: 1.4rem; font-weight: 700;
  color: var(--navy); text-decoration: none;
  flex-shrink: 0;
}
.logo span { color: var(--blue); }

/* Desktop links */
.nav-links {
  display: flex; gap: 2rem; list-style: none; margin: 0 auto;
}
.nav-links a {
  font-size: 0.875rem; font-weight: 500;
  color: var(--gray-600); text-decoration: none; transition: color 0.2s;
  padding: 0.25rem 0;
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--blue); }

.nav-cta {
  font-size: 0.85rem; font-weight: 600;
  background: var(--blue); color: var(--white);
  padding: 0.55rem 1.4rem; border-radius: var(--r);
  border: none; cursor: pointer; text-decoration: none;
  transition: all 0.2s; flex-shrink: 0; min-height: 44px;
  display: inline-flex; align-items: center;
}
.nav-cta:hover { background: var(--navy); }

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column; justify-content: center;
  gap: 5px; width: 44px; height: 44px;
  background: none; border: none; cursor: pointer;
  padding: 8px; border-radius: var(--r);
  flex-shrink: 0;
  aria-label: "Toggle navigation";
}
.hamburger span {
  display: block; width: 22px; height: 2px;
  background: var(--navy); border-radius: 2px;
  transition: all 0.3s ease;
  transform-origin: center;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
.mobile-menu {
  display: none;
  position: fixed; top: var(--nav-h); left: 0; right: 0;
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
  box-shadow: var(--shadow-lg);
  z-index: 998; padding: 1.5rem 2rem 2rem;
  flex-direction: column; gap: 0.25rem;
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  font-size: 1rem; font-weight: 500; color: var(--gray-800);
  text-decoration: none; padding: 0.75rem 0;
  border-bottom: 1px solid var(--gray-200);
  display: block; transition: color 0.2s;
}
.mobile-menu a:last-child { border-bottom: none; }
.mobile-menu a:hover { color: var(--blue); }
.mobile-menu .mob-cta {
  margin-top: 1rem; text-align: center;
  background: var(--blue); color: var(--white);
  padding: 0.85rem; border-radius: var(--r);
  font-weight: 700; font-size: 0.95rem;
  text-decoration: none; display: block;
}

/* ════════════════════════════════════════
   HERO
════════════════════════════════════════ */
.hero {
  padding: calc(var(--nav-h) + 4rem) 0 5rem;
  background: linear-gradient(150deg, var(--navy) 0%, #1a3a70 55%, #1657c5 100%);
  position: relative; overflow: hidden;
}
.hero::before {
  content: ''; position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}
.hero-inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 4rem; align-items: center;
  max-width: 1180px; margin: 0 auto; padding: 0 2rem;
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50px;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255,255,255,0.88); padding: 0.35rem 1rem; margin-bottom: 1.5rem;
}
.hero-eyebrow .pulse {
  width: 6px; height: 6px; background: #4ade80; border-radius: 50%;
  animation: blinkdot 1.4s ease-in-out infinite;
}
@keyframes blinkdot { 0%,100%{opacity:1;} 50%{opacity:0.3;} }

.hero h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 700; color: var(--white);
  line-height: 1.15; margin-bottom: 1.4rem;
}
.hero h1 em { font-style: normal; color: #93c5fd; }
.hero-sub {
  font-size: 1.05rem; color: rgba(255,255,255,0.72);
  line-height: 1.8; margin-bottom: 2.2rem; max-width: 480px;
}
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }

/* Right column cards */
.hero-cards { display: flex; flex-direction: column; gap: 1rem; }
.hero-card {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px; padding: 1.4rem 1.6rem;
  display: flex; align-items: flex-start; gap: 1rem;
  backdrop-filter: blur(6px); transition: background 0.2s;
}
.hero-card:hover { background: rgba(255,255,255,0.12); }
.hc-icon {
  width: 42px; height: 42px; border-radius: 10px;
  background: rgba(255,255,255,0.12);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; flex-shrink: 0; aria-hidden: true;
}
.hc-title { font-size: 0.92rem; font-weight: 600; color: var(--white); margin-bottom: 0.2rem; }
.hc-desc  { font-size: 0.78rem; color: rgba(255,255,255,0.55); line-height: 1.5; }



/* ════════════════════════════════════════
   SERVICES
════════════════════════════════════════ */
.services-section { padding: 6rem 0; background: var(--white); }
.services-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
}
.svc-card {
  background: var(--white); border: 1px solid var(--gray-200);
  border-radius: 12px; padding: 2.2rem;
  transition: all 0.25s; position: relative; overflow: hidden;
}
.svc-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--blue-lt));
  transform: scaleX(0); transform-origin: left; transition: transform 0.3s;
}
.svc-card:hover { box-shadow: var(--shadow-lg); border-color: transparent; transform: translateY(-4px); }
.svc-card:hover::before { transform: scaleX(1); }
.svc-icon {
  width: 52px; height: 52px; background: var(--sky);
  border-radius: 12px; display: flex; align-items: center;
  justify-content: center; font-size: 1.5rem; margin-bottom: 1.3rem;
  aria-hidden: true;
}
.svc-card h3 { font-size: 1.05rem; font-weight: 700; color: var(--navy); margin-bottom: 0.6rem; }
.svc-card p  { font-size: 0.875rem; color: var(--gray-600); line-height: 1.75; margin-bottom: 1.2rem; }
.svc-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.svc-tag {
  font-size: 0.68rem; font-weight: 600; background: var(--sky);
  color: var(--blue); padding: 0.25rem 0.65rem; border-radius: 50px;
}

/* ════════════════════════════════════════
   CYBERSECURITY
════════════════════════════════════════ */
.cyber-section { padding: 6rem 0; background: var(--navy); }
.cyber-inner {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 5rem; align-items: center;
  max-width: 1180px; margin: 0 auto; padding: 0 2rem;
}
.cyber-section .section-tag { color: #93c5fd; }
.cyber-section .section-tag::before { background: #93c5fd; }
.cyber-section h2.section-title { color: var(--white); }
.cyber-section .section-lead { color: rgba(255,255,255,0.62); }

.cyber-feats { display: flex; flex-direction: column; gap: 1rem; }
.cyber-feat {
  display: flex; align-items: flex-start; gap: 1.1rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px; padding: 1.2rem 1.4rem; transition: background 0.2s;
}
.cyber-feat:hover { background: rgba(255,255,255,0.09); }
.cf-icon {
  width: 40px; height: 40px; border-radius: 8px;
  background: rgba(22,87,197,0.4);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; flex-shrink: 0;
}
.cyber-feat h4 { font-size: 0.92rem; font-weight: 700; color: var(--white); margin-bottom: 0.2rem; }
.cyber-feat p  { font-size: 0.8rem; color: rgba(255,255,255,0.55); line-height: 1.6; }

/* Animated shield */
.shield-visual {
  display: flex; align-items: center; justify-content: center;
  position: relative; height: 380px;
}
.ring {
  position: absolute; top: 50%; left: 50%;
  border-radius: 50%; border: 1px solid rgba(255,255,255,0.07);
  transform: translate(-50%,-50%);
  animation: ringspin linear infinite;
}
.r1 { width:310px; height:310px; animation-duration:30s; }
.r2 { width:220px; height:220px; animation-duration:20s; border-style:dashed; border-color:rgba(147,197,253,0.15); animation-direction:reverse; }
.r3 { width:135px; height:135px; animation-duration:12s; border-color:rgba(22,87,197,0.4); }
@keyframes ringspin { to { transform: translate(-50%,-50%) rotate(360deg); } }
.shield-core {
  width: 88px; height: 88px;
  background: linear-gradient(135deg, var(--blue), var(--blue-lt));
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.2rem; box-shadow: 0 0 50px rgba(22,87,197,0.5);
  position: relative; z-index: 2;
}
.dnode {
  position: absolute; width:10px; height:10px;
  border-radius:50%; background:#ef4444;
  animation: pnode 2s ease-in-out infinite;
}
@keyframes pnode { 0%,100%{transform:scale(1);opacity:.5;} 50%{transform:scale(1.6);opacity:1;} }

/* ════════════════════════════════════════
   PROCESS
════════════════════════════════════════ */
.process-section { padding: 6rem 0; background: var(--gray-50); }
.process-grid {
  display: grid; grid-template-columns: repeat(5,1fr);
  position: relative; margin-top: 1rem;
}
.process-grid::before {
  content: ''; position: absolute; top: 26px; left: 10%; right: 10%; height: 2px;
  background: linear-gradient(90deg, var(--blue), var(--blue-lt)); z-index: 0;
}
.proc-step { text-align: center; padding: 0 0.8rem; position: relative; z-index: 1; }
.proc-num {
  width: 52px; height: 52px; background: var(--white);
  border: 2px solid var(--blue); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; font-weight: 700; color: var(--blue);
  margin: 0 auto 1.3rem; box-shadow: var(--shadow-sm);
}
.proc-step h4 { font-size: 0.9rem; font-weight: 700; color: var(--navy); margin-bottom: 0.4rem; }
.proc-step p  { font-size: 0.78rem; color: var(--gray-600); line-height: 1.65; }

/* ════════════════════════════════════════
   TRAINING
════════════════════════════════════════ */
.training-section { padding: 6rem 0; background: var(--white); }
.training-layout {
  display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: start;
}
.training-main {
  background: var(--white); border: 1px solid var(--gray-200);
  border-radius: 14px; padding: 2.5rem; box-shadow: var(--shadow-sm);
}
.training-main h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem; font-weight: 700; color: var(--navy); margin-bottom: 0.75rem;
}
.training-main > p { font-size: 0.9rem; color: var(--gray-600); line-height: 1.75; margin-bottom: 1.8rem; }
.course-list { display: flex; flex-direction: column; gap: 0.6rem; }
.course-item {
  display: flex; align-items: center; gap: 1rem;
  padding: 0.9rem 1.1rem; border: 1px solid var(--gray-200);
  border-radius: 8px; transition: all 0.2s;
}
.course-item:hover { border-color: var(--blue); background: var(--sky); }
.ci-icon { font-size: 1.2rem; flex-shrink: 0; }
.ci-name { flex: 1; font-size: 0.875rem; font-weight: 500; color: var(--gray-800); }
.ci-badge {
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 0.2rem 0.65rem; border-radius: 50px;
}
.beg { background:#dcfce7; color:#15803d; }
.int { background:#fef9c3; color:#854d0e; }
.adv { background:#fee2e2; color:#991b1b; }
.all { background:var(--sky); color:var(--blue); }

.training-side { display: flex; flex-direction: column; gap: 1.2rem; }
.t-stat {
  background: var(--navy); border-radius: 14px; padding: 2rem; text-align: center;
}
.t-stat.light { background: var(--sky); }
.t-stat .big {
  font-family: 'Playfair Display', serif;
  font-size: 3rem; font-weight: 700; color: var(--white); line-height: 1; margin-bottom: 0.5rem;
}
.t-stat.light .big { color: var(--blue); }
.t-stat p { font-size: 0.82rem; color: rgba(255,255,255,0.6); line-height: 1.6; }
.t-stat.light p { color: var(--gray-600); }

/* ════════════════════════════════════════
   CTA SECTION
════════════════════════════════════════ */
.cta-section {
  padding: 6rem 0;
  background: linear-gradient(135deg, var(--navy) 0%, #1a3a70 60%, var(--blue) 100%);
  position: relative; overflow: hidden;
}
.cta-section::before {
  content: ''; position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}
.cta-inner {
  position: relative; z-index: 1;
  text-align: center; max-width: 680px; margin: 0 auto;
}
.cta-section .section-tag { color: #93c5fd; justify-content: center; }
.cta-section .section-tag::before { background: #93c5fd; }
.cta-section h2.section-title { color: var(--white); }
.cta-section .section-lead { color: rgba(255,255,255,0.72); max-width: 100%; margin: 0 auto 2.5rem; }
.cta-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.btn-outline-navy {
  background: transparent; color: var(--white);
  border: 2px solid rgba(255,255,255,0.38); font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Inter', sans-serif; font-size: 0.9rem;
  padding: 0.8rem 2rem; border-radius: var(--r);
  text-decoration: none; transition: all 0.22s; min-height: 48px;
}
.btn-outline-navy:hover { border-color: var(--white); background: rgba(255,255,255,0.10); }

/* ════════════════════════════════════════
   FOOTER
════════════════════════════════════════ */
footer { background: var(--navy); padding: 3rem 0 2rem; }
.footer-inner {
  max-width: 1180px; margin: 0 auto; padding: 0 2rem;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 1.5rem;
}
.footer-logo {
  font-family: 'Playfair Display', serif; font-size: 1.3rem; font-weight: 700;
  color: var(--white); text-decoration: none;
}
.footer-logo span { color: #93c5fd; }
.footer-links { display: flex; gap: 1.8rem; flex-wrap: wrap; }
.footer-links a {
  font-size: 0.82rem; color: rgba(255,255,255,0.45);
  text-decoration: none; transition: color 0.2s;
}
.footer-links a:hover { color: var(--white); }
.footer-copy { font-size: 0.78rem; color: rgba(255,255,255,0.35); }

/* ════════════════════════════════════════
   RESPONSIVE — TABLET (≤1024px)
════════════════════════════════════════ */
@media (max-width: 1024px) {
  .hero-inner         { grid-template-columns: 1fr; }
  .hero-cards         { display: none; }
  .hero h1            { font-size: clamp(2rem, 6vw, 3rem); }
  .hero-sub           { max-width: 100%; }

  .services-grid      { grid-template-columns: 1fr 1fr; }
  .cyber-inner        { grid-template-columns: 1fr; }
  .shield-visual      { display: none; }

  .process-grid       { grid-template-columns: repeat(3,1fr); row-gap: 2.5rem; }
  .process-grid::before { left: 17%; right: 17%; }

  .training-layout    { grid-template-columns: 1fr; }
  .contact-inner      { grid-template-columns: 1fr; gap: 3rem; }

  .footer-inner       { flex-direction: column; align-items: flex-start; gap: 1.2rem; }
}

/* ════════════════════════════════════════
   RESPONSIVE — MOBILE (≤768px)
════════════════════════════════════════ */
@media (max-width: 768px) {
  .nav-links          { display: none; }
  .nav-cta            { display: none; }
  .hamburger          { display: flex; }

  .hero               { padding: calc(var(--nav-h) + 2.5rem) 0 3.5rem; }
  .hero-inner         { padding: 0 1.25rem; }
  .hero-actions       { flex-direction: column; }
  .hero-actions .btn  { width: 100%; text-align: center; }

  .container          { padding: 0 1.25rem; }
  section             { padding: 4rem 0; }

  .services-section   { padding: 4rem 0; }
  .services-grid      { grid-template-columns: 1fr; }

  .process-grid       { grid-template-columns: 1fr 1fr; row-gap: 2rem; }
  .process-grid::before { display: none; }

  .fgrid              { grid-template-columns: 1fr; }
  .field.full         { grid-column: 1; }

  .footer-links       { gap: 1.2rem; }
  .footer-copy        { font-size: 0.72rem; }
}

/* ════════════════════════════════════════
   RESPONSIVE — SMALL MOBILE (≤480px)
════════════════════════════════════════ */
@media (max-width: 480px) {
  :root               { --nav-h: 62px; }
  .logo               { font-size: 1.2rem; }
  .hero h1            { font-size: 1.9rem; }
  .hero-sub           { font-size: 0.95rem; }
  h2.section-title    { font-size: 1.7rem; }
  .section-lead       { font-size: 0.9rem; }
  .process-grid       { grid-template-columns: 1fr; }
  .form-wrap          { padding: 1.5rem; }
  .contact-inner      { padding: 0 1.25rem; }
  .t-stat             { padding: 1.5rem; }
}

/* ════════════════════════════════════════
   PRINT
════════════════════════════════════════ */
@media print {
  #site-nav, .mobile-menu, .hero-cards, .shield-visual { display: none !important; }
  .hero { padding-top: 1rem; }
  body  { color: #000; }
}