/* ==========================================================================
   Kratos Technologies — Main stylesheet
   Design tokens mirror the original design system (HSL values).
   ========================================================================== */

:root {
  --background: 208 77% 15%;
  --foreground: 0 0% 98%;
  --card: 208 70% 18%;
  --card-foreground: 0 0% 98%;
  --primary: 38 100% 65%;
  --primary-foreground: 208 77% 15%;
  --secondary: 208 65% 25%;
  --secondary-foreground: 0 0% 98%;
  --muted: 208 50% 30%;
  --muted-foreground: 0 0% 80%;
  --accent: 38 100% 65%;
  --border: 208 50% 25%;
  --radius: 0.75rem;

  --gradient-hero: linear-gradient(135deg, hsl(208 77% 15%) 0%, hsl(208 70% 10%) 100%);
  --gradient-card: linear-gradient(180deg, hsl(208 70% 18%) 0%, hsl(208 65% 20%) 100%);
  --gradient-accent: linear-gradient(135deg, hsl(38 100% 65%) 0%, hsl(35 100% 55%) 100%);

  --glow-orange: 0 0 20px hsl(38 100% 65% / 0.3);
  --glow-blue: 0 0 30px hsl(208 77% 45% / 0.2);
  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  --container: 1400px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 { font-weight: 600; line-height: 1.15; margin: 0 0 .5em; }
p { margin: 0 0 1rem; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
ul { margin: 0; padding: 0; list-style: none; }

/* ---------- Layout helpers ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 1rem;
}
.section { padding: 6rem 0; }
.section--sm { padding: 4rem 0; }
.center { text-align: center; }
.narrow { max-width: 56rem; margin-inline: auto; }
.narrow-lg { max-width: 64rem; margin-inline: auto; }
.narrow-xl { max-width: 72rem; margin-inline: auto; }
.mb-2 { margin-bottom: .5rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-12 { margin-bottom: 3rem; }
.mb-16 { margin-bottom: 4rem; }

.grid { display: grid; gap: 2rem; }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gap-sm { gap: 1rem; }
.gap-md { gap: 1.5rem; }

@media (min-width: 768px) {
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- Typography utilities ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  background: hsl(var(--secondary) / .5);
  backdrop-filter: blur(6px);
  border: 1px solid hsl(var(--primary) / .2);
  border-radius: 9999px;
  padding: .5rem 1rem;
  font-size: .875rem; font-weight: 500;
  margin-bottom: 1.5rem;
}
.section-title { font-size: clamp(2.25rem, 5vw, 3rem); font-weight: 700; margin-bottom: 1rem; }
.page-title { font-size: clamp(2.25rem, 6vw, 3.75rem); font-weight: 700; margin-bottom: 1.5rem; }
.lead { font-size: 1.25rem; color: hsl(var(--foreground) / .7); max-width: 42rem; margin-inline: auto; }
.muted { color: hsl(var(--foreground) / .7); }
.text-primary { color: hsl(var(--primary)); }
.text-gradient {
  background: linear-gradient(90deg, hsl(var(--primary)) 0%, #fbbf24 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- Surfaces ---------- */
.gradient-hero { background: var(--gradient-hero); }
.gradient-card { background: var(--gradient-card); }
.gradient-accent { background: var(--gradient-accent); }
.glow-orange { box-shadow: var(--glow-orange); }
.transition-smooth { transition: var(--transition-smooth); }
.bg-secondary-soft { background: hsl(var(--secondary) / .3); }

.card {
  background: var(--gradient-card);
  border: 1px solid hsl(var(--primary) / .2);
  border-radius: 1rem;
  overflow: hidden;
  transition: var(--transition-smooth);
  display: flex; flex-direction: column;
  height: 100%;
}
.card:hover { border-color: hsl(var(--primary) / .4); }
.card--hover-lift:hover { transform: scale(1.04); }
.card__body { padding: 1.5rem; }
.card__title { font-size: 1.5rem; margin-bottom: .5rem; }
.card__desc { color: hsl(var(--foreground) / .7); }
.card__media { aspect-ratio: 16 / 9; overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition-smooth); }
.card:hover .card__media img { transform: scale(1.1); }

.panel {
  background: var(--gradient-card);
  border: 1px solid hsl(var(--primary) / .2);
  border-radius: 1.5rem;
  padding: 2rem;
}
@media (min-width: 768px) { .panel { padding: 3rem; } }
.panel--flat { background: hsl(var(--card) / .3); backdrop-filter: blur(6px); }

.icon-circle {
  width: 4rem; height: 4rem; border-radius: 9999px;
  background: hsl(var(--primary) / .1);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1rem;
  transition: var(--transition-smooth);
}
.icon-circle--sm { width: 3rem; height: 3rem; }
.icon-circle--rounded { border-radius: 1rem; }
.icon-circle svg { width: var(--kratos-circle-icon, 2rem); height: var(--kratos-circle-icon, 2rem); stroke: hsl(var(--primary)); }
.icon-circle--sm svg { width: 1.5rem; height: 1.5rem; }
.card:hover .icon-circle { box-shadow: var(--glow-orange); }

.pill {
  padding: .5rem 1rem; border-radius: 9999px;
  background: hsl(var(--primary) / .1);
  border: 1px solid hsl(var(--primary) / .3);
  font-size: .875rem;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border: 1px solid transparent; border-radius: var(--radius);
  padding: .65rem 1.25rem;
  font-family: inherit; font-size: 1rem; font-weight: 600;
  cursor: pointer; transition: var(--transition-smooth);
}
.btn--primary { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); box-shadow: var(--glow-orange); }
.btn--primary:hover { background: hsl(var(--primary) / .9); }
.btn--outline { background: transparent; border-color: hsl(var(--primary)); color: hsl(var(--primary)); }
.btn--outline:hover { background: hsl(var(--primary) / .1); }
.btn--ghost { background: transparent; color: hsl(var(--foreground)); }
.btn--ghost:hover { background: hsl(var(--secondary) / .5); }
.btn--lg { font-size: 1.125rem; padding: 1rem 2rem; }
.btn--block { width: 100%; }
.btn svg { width: 1.15rem; height: 1.15rem; }
.btn--primary:hover svg.arrow { transform: translateX(4px); }
.btn svg { transition: var(--transition-smooth); }

/* ---------- Navigation ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  transition: var(--transition-smooth);
  background: transparent;
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  background: hsl(var(--background) / .95);
  backdrop-filter: blur(12px);
  border-bottom-color: hsl(var(--border));
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; padding: 1rem 0; }
.site-brand { display: flex; align-items: center; gap: .75rem; }
.site-brand img { height: 3rem; width: 3rem; object-fit: contain; }
.site-brand__name { font-size: 1.25rem; font-weight: 700; }

.nav-menu { display: none; align-items: center; gap: 2rem; }
.nav-menu a, .nav-menu button {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: inherit; font-size: 1rem; font-weight: 500;
  color: hsl(var(--foreground) / .8);
  transition: var(--transition-smooth);
}
.nav-menu a:hover, .nav-menu button:hover { color: hsl(var(--primary)); }
.nav-menu li { display: inline-flex; }
.nav-toggle { display: inline-flex; background: none; border: 0; color: hsl(var(--foreground)); cursor: pointer; padding: .25rem; }
.nav-toggle svg { width: 1.5rem; height: 1.5rem; }
.nav-mobile { display: none; padding: 0 0 1rem; }
.nav-mobile.is-open { display: block; }
.nav-mobile li { display: block; }
.nav-mobile a, .nav-mobile button { display: block; width: 100%; text-align: left; padding: .6rem 0; }

@media (min-width: 768px) {
  .nav-menu { display: flex; }
  .nav-toggle { display: none; }
  .nav-mobile, .nav-mobile.is-open { display: none; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding-top: 5rem;
  overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, hsl(var(--background) / .95), hsl(var(--background) / .9) 50%, hsl(var(--background) / .85));
}
.hero__orbs { position: absolute; inset: 0; opacity: .2; pointer-events: none; }
.orb { position: absolute; border-radius: 9999px; filter: blur(64px); animation: pulse 4s ease-in-out infinite; }
.orb--1 { top: 25%; left: 25%; width: 16rem; height: 16rem; background: hsl(var(--primary) / .3); }
.orb--2 { bottom: 25%; right: 25%; width: 24rem; height: 24rem; background: hsl(var(--accent) / .2); animation-delay: .7s; }
.hero__inner { position: relative; z-index: 10; text-align: center; max-width: 56rem; margin-inline: auto; }
.hero__title { font-size: clamp(2.75rem, 8vw, 4.5rem); font-weight: 700; line-height: 1.1; margin-bottom: 1.5rem; }
.hero__title span { display: block; margin-top: .5rem; }
.hero__text { font-size: clamp(1.125rem, 2.5vw, 1.5rem); color: hsl(var(--foreground) / .8); max-width: 48rem; margin: 0 auto 2rem; }
.hero__actions { display: flex; flex-direction: column; gap: 1rem; align-items: center; justify-content: center; }
@media (min-width: 640px) { .hero__actions { flex-direction: row; } }

.stats { margin-top: 4rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
@media (min-width: 768px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat { text-align: center; }
.stat__value { font-size: clamp(1.875rem, 4vw, 2.25rem); font-weight: 700; color: hsl(var(--primary)); margin-bottom: .5rem; }
.stat__label { color: hsl(var(--foreground) / .7); font-size: .95rem; }

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }

/* ---------- Feature list ---------- */
.feature-list { display: grid; gap: .75rem; margin-bottom: 1.5rem; }
.feature-list li { display: flex; align-items: flex-start; gap: .5rem; color: hsl(var(--foreground) / .8); }
.feature-list svg { width: var(--kratos-inline-icon, 1.25rem); height: var(--kratos-inline-icon, 1.25rem); stroke: hsl(var(--primary)); flex-shrink: 0; margin-top: .15rem; }
.bullet { color: hsl(var(--primary)); }

.mini-card {
  text-align: center; padding: 1.5rem; border-radius: 1rem;
  background: hsl(var(--card) / .5);
  border: 1px solid hsl(var(--border));
  transition: var(--transition-smooth);
}
.mini-card:hover { border-color: hsl(var(--primary) / .4); }
.mini-card svg { width: 2.5rem; height: 2.5rem; stroke: hsl(var(--primary)); margin: 0 auto 1rem; }

/* ---------- Impact ---------- */
.impact-card { text-align: center; cursor: pointer; }
.impact-card .icon-circle { margin-inline: auto; }
.impact-card__stat { font-size: 1.5rem; font-weight: 700; color: hsl(var(--primary)); }

.media-frame {
  border-radius: 1.5rem; overflow: hidden;
  border: 1px solid hsl(var(--primary) / .2);
  background: var(--gradient-card);
}
.gallery-item { border-radius: var(--radius); overflow: hidden; box-shadow: 0 10px 25px rgb(0 0 0 / .25); }
.gallery-item img { width: 100%; height: 16rem; object-fit: cover; }
.gallery-item--tall img { height: 20rem; }
.gallery-item__caption { background: hsl(var(--card)); padding: 1rem; font-size: .875rem; color: hsl(var(--foreground) / .8); }
@media (min-width: 768px) { .span-2 { grid-column: span 2; } }
@media (min-width: 1024px) { .span-4 { grid-column: span 4; } }

/* ---------- Team ---------- */
.team-card { text-align: center; padding: 2rem 1.5rem; }
.team-avatar {
  width: 8rem; height: 8rem; border-radius: 9999px; overflow: hidden;
  border: 4px solid hsl(var(--primary) / .2);
  margin: 0 auto 1rem;
}
.team-avatar img { width: 100%; height: 100%; object-fit: cover; }
.team-role { color: hsl(var(--primary)); font-weight: 600; margin-bottom: 1rem; }
.social-row { display: flex; justify-content: center; gap: 1rem; margin-top: 1.5rem; }
.social-btn {
  width: 2.5rem; height: 2.5rem; border-radius: 9999px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid hsl(var(--border));
  transition: var(--transition-smooth);
}
.social-btn:hover { background: hsl(var(--primary) / .1); border-color: hsl(var(--primary)); }
.social-btn svg { width: 1.25rem; height: 1.25rem; }

/* ---------- Contact ---------- */
.field { margin-bottom: 1.5rem; }
.field label { display: block; font-size: .875rem; font-weight: 500; margin-bottom: .5rem; }
.input, .textarea {
  width: 100%; font-family: inherit; font-size: 1rem;
  color: hsl(var(--foreground));
  background: hsl(var(--background) / .5);
  border: 1px solid hsl(var(--primary) / .2);
  border-radius: var(--radius);
  padding: .65rem .85rem;
  transition: var(--transition-smooth);
}
.input:focus, .textarea:focus { outline: none; border-color: hsl(var(--primary)); box-shadow: var(--glow-orange); }
.input::placeholder, .textarea::placeholder { color: hsl(var(--muted-foreground) / .8); }
.textarea { resize: vertical; min-height: 8rem; }
.inline-form { display: flex; gap: .5rem; }
.contact-item {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1rem; border-radius: var(--radius);
  transition: var(--transition-smooth);
}
.contact-item:hover { background: hsl(var(--background) / .3); }
.contact-item .icon-circle { width: 3rem; height: 3rem; margin: 0; flex-shrink: 0; }
.contact-item__title { font-weight: 600; margin-bottom: .25rem; }
.form-notice {
  border-radius: var(--radius); padding: .75rem 1rem; margin-bottom: 1rem;
  background: hsl(var(--primary) / .12); border: 1px solid hsl(var(--primary) / .3);
  font-size: .9rem;
}

/* ---------- Footer ---------- */
.site-footer { background: hsl(var(--background)); border-top: 1px solid hsl(var(--primary) / .2); padding: 3rem 0; }
.footer-grid { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } .footer-brand { grid-column: span 2; } }
.footer-heading { font-weight: 600; margin-bottom: 1rem; color: hsl(var(--primary)); }
.site-footer li { margin-bottom: .5rem; }
.site-footer a { color: hsl(var(--foreground) / .7); font-size: .875rem; transition: var(--transition-smooth); }
.site-footer a:hover { color: hsl(var(--primary)); }
.footer-social { display: flex; gap: 1rem; }
.footer-social a {
  width: 2.5rem; height: 2.5rem; border-radius: 9999px;
  background: hsl(var(--primary) / .1);
  display: inline-flex; align-items: center; justify-content: center;
}
.footer-social a:hover { background: hsl(var(--primary) / .2); }
.footer-social svg { width: 1.25rem; height: 1.25rem; stroke: hsl(var(--primary)); transition: var(--transition-smooth); }
.footer-social a:hover svg { transform: scale(1.1); }
.footer-bottom { border-top: 1px solid hsl(var(--primary) / .2); padding-top: 2rem; margin-top: 2rem; text-align: center; font-size: .875rem; color: hsl(var(--foreground) / .7); }

/* ---------- Blog / default content ---------- */
.entry { margin-bottom: 3rem; }
.entry__meta { font-size: .875rem; color: hsl(var(--foreground) / .6); margin-bottom: 1rem; }
.entry__content a { color: hsl(var(--primary)); text-decoration: underline; }
.entry__content blockquote {
  border-left: 3px solid hsl(var(--primary));
  margin: 1.5rem 0; padding-left: 1rem; color: hsl(var(--foreground) / .8);
}
.entry__content ul, .entry__content ol { list-style: revert; padding-left: 1.5rem; margin-bottom: 1rem; }
.pagination { display: flex; gap: .5rem; justify-content: center; margin-top: 2rem; }
.pagination .page-numbers { padding: .5rem .9rem; border-radius: var(--radius); border: 1px solid hsl(var(--border)); }
.pagination .current { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-color: hsl(var(--primary)); }
.widget { margin-bottom: 2rem; }
.widget-title { color: hsl(var(--primary)); font-weight: 600; margin-bottom: 1rem; }

.page-hero { padding: 8rem 0 4rem; background: linear-gradient(180deg, hsl(var(--background)), hsl(var(--background) / .6)); text-align: center; }

/* WordPress core alignment classes */
.alignleft { float: left; margin: 0 1.5rem 1rem 0; }
.alignright { float: right; margin: 0 0 1rem 1.5rem; }
.aligncenter { margin-inline: auto; }
.wp-caption { max-width: 100%; }
.sticky, .gallery-caption, .bypostauthor { display: block; }

/* ---------- Scroll animations (AOS-like, vanilla) ---------- */
[data-animate] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s cubic-bezier(0.4, 0, 0.2, 1), transform .7s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, transform;
}
[data-animate].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-animate] { opacity: 1; transform: none; transition: none; }
  .orb { animation: none; }
}

/* Admin bar offset */
body.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .site-header { top: 46px; } }

/* ---------- Inline heading icons (keep them small next to text) ---------- */
h1 > svg, h2 > svg, h3 > svg, h4 > svg, h5 > svg, h6 > svg,
.card__title svg, .section-title svg, .panel h3 > svg {
  width: var(--kratos-inline-icon, 1.25rem);
  height: var(--kratos-inline-icon, 1.25rem);
  stroke: hsl(var(--primary));
  flex-shrink: 0;
  vertical-align: -0.15em;
  display: inline-block;
}