/* Google Fonts — Inter (UI) + DM Mono (stat numerals) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=DM+Mono:wght@400;500&display=swap');

/* ===================================================================
   Axina Group – Brand Stylesheet
   =================================================================== */

/* ===================================================================
   DESIGN TOKEN SYSTEM
   =================================================================== */
:root {
  /* Core brand */
  --brand-orange:       #E37C2D;
  --brand-orange-light: #F0A050;
  --brand-orange-dim:   rgba(227, 124, 45, 0.12);
  --brand-orange-border:rgba(227, 124, 45, 0.30);
  --brand-dark:         #1D2D43;
  --brand-dark-2:       #0c1a2e;
  --brand-white:        #ffffff;

  /* Sovereign palette */
  --sov-navy:           #0b1628;
  --sov-teal:           #4fc3f7;
  --sov-teal-dim:       rgba(79, 195, 247, 0.10);
  --sov-green:          #4cde8a;
  --sov-green-dim:      rgba(76, 222, 138, 0.10);
  --sov-violet:         #b39ddb;
  --sov-violet-dim:     rgba(130, 80, 255, 0.10);
  --sov-gold:           #ffd580;

  /* AWS */
  --aws-orange:         #ff9900;
  --aws-orange-dim:     rgba(255, 153, 0, 0.10);

  /* Type */
  --font-sans:  'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:  'DM Mono', 'Courier New', monospace;

  /* Motion */
  --transition-ui: all 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* --- Utility Classes --- */
.text-brand-orange { color: var(--brand-orange) !important; }
.bg-brand-orange { background-color: var(--brand-orange) !important; }
.bg-brand-dark { background-color: var(--brand-dark) !important; }

/* --- Brand Button --- */
.btn-brand {
  background-color: var(--brand-orange);
  border-color: var(--brand-orange);
  color: white;
}
.btn-brand:hover {
  background-color: #c46a1f;
  border-color: #c46a1f;
  color: white;
}

/* --- Ticker Bar --- */
.ticker-bar {
  background: var(--brand-dark);
  color: white;
  padding: 10px 0;
  text-align: center;
  font-size: 0.9rem;
}
.ticker-bar .text-brand-orange {
  color: var(--brand-orange) !important;
  font-weight: bold;
}
.ticker-content {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

@media (max-width: 767.98px) {
  .ticker-bar {
    font-size: 0.8rem;
    padding: 8px 0;
  }
}

/* --- Hero Section --- */
/* Set background-image per page via inline style, e.g.:
   style="background-image: linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.8)), url('assets/media/images/your-image.jpg')" */
.hero-section {
  background-color: var(--brand-dark);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  min-height: 80vh;
  padding: 6rem 1.5rem;
}

.hero-section.about-hero {
  min-height: 40vh;
  padding: 3rem 1.5rem;
}

@media (max-width: 991.98px) {
  .hero-section {
    min-height: 60vh;
    padding: 5rem 1.25rem;
    background-position: 60% center;
  }
  .hero-section.about-hero {
    min-height: 30vh;
    padding: 2.5rem 1.25rem;
  }
}

@media (max-width: 767.98px) {
  .hero-section {
    min-height: 50vh;
    padding: 4rem 1rem;
  }
  .hero-section.about-hero {
    min-height: 25vh;
    padding: 2rem 1rem;
  }
  .hero-section h1 {
    font-size: 1.75rem;
  }
  .hero-section p.fs-5 {
    font-size: 1rem !important;
  }
}

@media (max-width: 479.98px) {
  .hero-section {
    min-height: 45vh;
    padding: 3rem 1rem;
  }
  .hero-section.about-hero {
    min-height: 22vh;
    padding: 1.5rem 1rem;
  }
  .hero-section h1 {
    font-size: 1.4rem;
  }
}

/* --- Cookie Consent Banner --- */
#cookie-banner {
  display: none;          /* JS controls visibility – prevents flash before CSS is ready */
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 360px;
  max-width: calc(100vw - 2rem);
  background: var(--brand-dark);
  color: #fff;
  border-radius: .75rem;
  box-shadow: 0 8px 32px rgba(0,0,0,.35);
  border-left: 4px solid var(--brand-orange);
  z-index: 10000;
  transform: translateY(20px);
  opacity: 0;
  transition: transform .4s cubic-bezier(.22,1,.36,1), opacity .35s ease;
  overflow: hidden;
}
/* Step 1 — put it in the layout (display:block) so transition fires correctly */
#cookie-banner.cookie-banner--ready {
  display: block;
}
/* Step 2 — animate in */
#cookie-banner.cookie-banner--visible {
  display: block;
  transform: translateY(0);
  opacity: 1;
}
.cookie-banner__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .875rem 1rem .5rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.cookie-banner__title {
  font-size: .9rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.cookie-banner__title i { color: var(--brand-orange); }
.cookie-banner__close {
  background: transparent;
  border: none;
  color: rgba(255,255,255,.45);
  font-size: 1rem;
  cursor: pointer;
  padding: 0 .25rem;
  line-height: 1;
  transition: color .2s;
}
.cookie-banner__close:hover { color: #fff; }
.cookie-banner__body {
  padding: .875rem 1rem;
}
.cookie-banner__text {
  font-size: .8rem;
  color: rgba(255,255,255,.75);
  margin-bottom: .875rem;
  line-height: 1.55;
}
.cookie-banner__badge {
  display: inline-block;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .15rem .5rem;
  border-radius: 999px;
  margin-bottom: .625rem;
}
.cookie-banner__badge--eu {
  background: rgba(227,124,45,.2);
  color: var(--brand-orange);
  border: 1px solid rgba(227,124,45,.4);
}
.cookie-banner__badge--us {
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.65);
  border: 1px solid rgba(255,255,255,.15);
}
.cookie-banner__actions {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}
.cookie-banner__actions .btn {
  font-size: .78rem;
  padding: .4rem .9rem;
  border-radius: .4rem;
  font-weight: 600;
}
.cookie-banner__footer {
  padding: .5rem 1rem .75rem;
  font-size: .7rem;
  color: rgba(255,255,255,.35);
}
.cookie-banner__footer a {
  color: rgba(255,255,255,.5);
  text-decoration: underline;
}
.cookie-banner__footer a:hover { color: #fff; }

@media (max-width: 479.98px) {
  #cookie-banner,
  #cookie-banner.cookie-banner--ready,
  #cookie-banner.cookie-banner--visible {
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    border-radius: .75rem .75rem 0 0;
    border-left: none;
    border-top: 4px solid var(--brand-orange);
  }
}

/* ===================================================================
   TYPOGRAPHY — Global font application
   =================================================================== */
body,
.block-content,
.nav-main-link-name,
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Stat numerals use monospace for fixed-width alignment */
.sov-stat-num,
.stat-number,
[class*="display-"] {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* ===================================================================
   SECTION LABEL — universal overline above headings
   =================================================================== */
.section-label {
  display: block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #9e9e9e;
  margin-bottom: .5rem;
}
.section-label-light {
  display: block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: .5rem;
}

/* ===================================================================
   BTN-HERO — enlarged primary CTA
   =================================================================== */
.btn-hero {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .9rem 2.25rem;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .02em;
  border-radius: .5rem;
  transition: var(--transition-ui);
  white-space: nowrap;
}
.btn-hero.btn-warning,
.btn-hero.btn-brand {
  background: var(--brand-orange);
  border-color: var(--brand-orange);
  color: #fff;
  box-shadow: 0 4px 20px rgba(227, 124, 45, 0.35);
}
.btn-hero.btn-warning:hover,
.btn-hero.btn-brand:hover {
  background: #c46a1f;
  border-color: #c46a1f;
  box-shadow: 0 6px 28px rgba(227, 124, 45, 0.45);
  transform: translateY(-1px);
}
.btn-hero.btn-outline-light {
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
  background: transparent;
}
.btn-hero.btn-outline-light:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.8);
}

/* ===================================================================
   SOVEREIGN BADGES — unified pill system
   =================================================================== */
.sov-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  border-radius: 50px;
  padding: .25rem .9rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.6;
  white-space: nowrap;
}
.sov-badge--orange {
  background: var(--brand-orange-dim);
  color: var(--brand-orange-light);
  border: 1px solid var(--brand-orange-border);
}
.sov-badge--teal {
  background: var(--sov-teal-dim);
  color: var(--sov-teal);
  border: 1px solid rgba(79, 195, 247, 0.28);
}
.sov-badge--green {
  background: var(--sov-green-dim);
  color: var(--sov-green);
  border: 1px solid rgba(76, 222, 138, 0.28);
}
.sov-badge--violet {
  background: var(--sov-violet-dim);
  color: var(--sov-violet);
  border: 1px solid rgba(130, 80, 255, 0.28);
}
.sov-badge--aws {
  background: var(--aws-orange-dim);
  color: var(--aws-orange);
  border: 1px solid rgba(255, 153, 0, 0.28);
  border-radius: 8px;
}
.sov-badge--gold {
  background: rgba(255, 213, 128, 0.08);
  color: var(--sov-gold);
  border: 1px solid rgba(255, 213, 128, 0.25);
}

/* ===================================================================
   SOVEREIGN SECTIONS — full-bleed dark gradient containers
   =================================================================== */
.sov-section {
  background: linear-gradient(135deg, #060e1c 0%, #0b1a30 55%, #07160f 100%);
  border-radius: .75rem;
  padding: 3.5rem 2.5rem;
  color: #fff;
  border: 1px solid rgba(227, 124, 45, 0.10);
  position: relative;
  overflow: hidden;
}
.sov-section::before {
  content: '';
  position: absolute;
  top: -80px; right: -80px;
  width: 380px; height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(227, 124, 45, 0.06) 0%, transparent 65%);
  pointer-events: none;
}
.sov-section--teal {
  border-color: rgba(79, 195, 247, 0.10);
}
.sov-section--teal::before {
  background: radial-gradient(circle, rgba(79, 195, 247, 0.06) 0%, transparent 65%);
}
.sov-section--green {
  border-color: rgba(76, 222, 138, 0.10);
  background: linear-gradient(135deg, #060e1c 0%, #071a10 55%, #0b1528 100%);
}
.sov-section--green::before {
  background: radial-gradient(circle, rgba(76, 222, 138, 0.06) 0%, transparent 65%);
}
.sov-section--violet {
  border-color: rgba(130, 80, 255, 0.10);
  background: linear-gradient(135deg, #060e1c 0%, #0b1528 55%, #0e1a0b 100%);
}
.sov-section--violet::before {
  background: radial-gradient(circle, rgba(130, 80, 255, 0.06) 0%, transparent 65%);
}
.sov-section--aws {
  background: linear-gradient(135deg, #1a1a2e 0%, #0f2140 100%);
  border-color: rgba(255, 153, 0, 0.12);
}

/* ===================================================================
   INTEGRITY CARD — hover-lift service/feature card
   =================================================================== */
.integrity-card {
  border: 1px solid #e8e8e8;
  border-radius: .75rem;
  padding: 1.5rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  transition: var(--transition-ui);
}
.integrity-card:hover {
  border-color: var(--brand-orange);
  box-shadow: 0 6px 24px rgba(227, 124, 45, 0.12);
  transform: translateY(-2px);
}
.integrity-card__icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: #f8f4f0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.25s;
}
.integrity-card:hover .integrity-card__icon {
  background: var(--brand-orange-dim);
}
.integrity-card__icon i {
  color: #888;
  transition: color 0.25s;
}
.integrity-card:hover .integrity-card__icon i {
  color: var(--brand-orange);
}

/* ===================================================================
   SOV-STAT — large metric display block
   =================================================================== */
.sov-stat {
  text-align: center;
  padding: 1.5rem 1rem;
}
.sov-stat__num {
  font-family: var(--font-mono);
  font-size: 2.4rem;
  font-weight: 500;
  color: var(--brand-orange);
  line-height: 1;
  display: block;
}
.sov-stat__label {
  font-size: .78rem;
  color: #777;
  margin-top: .35rem;
  line-height: 1.4;
}
/* Dark variant */
.sov-section .sov-stat__num {
  color: var(--brand-orange-light);
}
.sov-section .sov-stat__label {
  color: rgba(255, 255, 255, 0.50);
}

/* ===================================================================
   SOV-PHASE — left-border phase/step component
   =================================================================== */
.sov-phase {
  border-left: 3px solid rgba(227, 124, 45, 0.35);
  padding: .75rem 0 .75rem 1.25rem;
  margin-bottom: 1rem;
}
.sov-phase:last-child { margin-bottom: 0; }
.sov-phase__overline {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brand-orange-light);
  margin-bottom: .25rem;
}
.sov-phase__title {
  font-weight: 700;
  color: #fff;
  font-size: 1rem;
}
.sov-phase__body {
  font-size: .88rem;
  color: rgba(255, 255, 255, 0.68);
  margin-top: .25rem;
  line-height: 1.6;
}
/* Teal variant */
.sov-phase--teal { border-left-color: rgba(79, 195, 247, 0.38); }
.sov-phase--teal .sov-phase__overline { color: var(--sov-teal); }
/* Green variant */
.sov-phase--green { border-left-color: rgba(76, 222, 138, 0.38); }
.sov-phase--green .sov-phase__overline { color: var(--sov-green); }
/* Violet variant */
.sov-phase--violet { border-left-color: rgba(179, 157, 219, 0.38); }
.sov-phase--violet .sov-phase__overline { color: var(--sov-violet); }

/* ===================================================================
   BREADCRUMB — sovereign overrides
   =================================================================== */
.breadcrumb {
  background: transparent;
  padding: 0;
  margin: 0;
  font-size: .82rem;
}
.breadcrumb-item + .breadcrumb-item::before {
  content: '\f105';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  color: #bbb;
}
.breadcrumb-item a {
  color: var(--brand-orange);
  text-decoration: none;
}
.breadcrumb-item a:hover { text-decoration: underline; }
.breadcrumb-item.active { color: #777; }

/* ===================================================================
   MOBILE OFFCANVAS NAV
   =================================================================== */
#axina-offcanvas {
  width: 300px;
  background: var(--sov-navy);
}
#axina-offcanvas .offcanvas-header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
#axina-offcanvas .offcanvas-body {
  padding: 1rem 0;
}
.axina-mobile-nav {
  list-style: none;
  padding: 0;
  margin: 0;
}
.axina-mobile-nav li { border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.axina-mobile-nav a {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .85rem 1.5rem;
  color: rgba(255, 255, 255, 0.80);
  font-size: .92rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.axina-mobile-nav a:hover,
.axina-mobile-nav a.active {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}
.axina-mobile-nav a i {
  width: 20px;
  text-align: center;
  color: var(--brand-orange);
  font-size: .88rem;
}
.axina-mobile-nav .mobile-sub {
  background: rgba(0, 0, 0, 0.2);
}
.axina-mobile-nav .mobile-sub a {
  padding-left: 2.75rem;
  font-size: .85rem;
  color: rgba(255, 255, 255, 0.60);
}
.axina-mobile-nav .mobile-sub a:hover { color: rgba(255, 255, 255, 0.90); }
.axina-mobile-nav .mobile-sub-toggle {
  justify-content: space-between;
}
.axina-mobile-nav .mobile-sub-toggle i.toggle-icon {
  width: auto;
  color: rgba(255, 255, 255, 0.35);
  transition: transform 0.2s;
}
.axina-mobile-nav .mobile-sub-toggle[aria-expanded="true"] i.toggle-icon {
  transform: rotate(180deg);
}
.axina-mobile-cta {
  padding: 1.25rem 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

/* Mobile hamburger button — shown only below lg */
.axina-mobile-toggler {
  display: none;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: .4rem;
  padding: .4rem .6rem;
  color: rgba(255, 255, 255, 0.75);
  font-size: 1rem;
  cursor: pointer;
  transition: var(--transition-ui);
}
.axina-mobile-toggler:hover {
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
}
@media (max-width: 991.98px) {
  .axina-mobile-toggler { display: flex; align-items: center; gap: .4rem; }
}

/* ===================================================================
   BLOCK LIFT EFFECT — global .block-rounded hover
   =================================================================== */
.block-rounded {
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.block-link-pop:hover,
a.block-rounded:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10) !important;
  transform: translateY(-2px);
}

/* ===================================================================
   INTEGRITY TABLE — the Axina Edge comparison
   =================================================================== */
.sov-edge-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}
.sov-edge-table th {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.88);
  font-size: .74rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: .8rem 1.25rem;
  font-weight: 700;
}
.sov-edge-table th.col-axina { color: var(--brand-orange-light); }
.sov-edge-table td {
  padding: .75rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.75);
  font-size: .88rem;
  line-height: 1.5;
}
.sov-edge-table tr:last-child td { border-bottom: none; }
.sov-edge-table td.col-axina {
  color: var(--sov-gold);
  font-weight: 600;
}
.sov-edge-table td.col-legacy { color: rgba(255, 255, 255, 0.35); }
.sov-edge-table td.row-label {
  color: rgba(255, 255, 255, 0.55);
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
}

/* ===================================================================
   PROCESS STEP — numbered step row
   =================================================================== */
.process-step {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  padding: 1rem 0;
  border-bottom: 1px solid #f0f0f0;
}
.process-step:last-child { border-bottom: none; }
.process-step__num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #f8f4f0;
  border: 2px solid var(--brand-orange);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: var(--brand-orange);
  font-size: .85rem;
  flex-shrink: 0;
  font-family: var(--font-mono);
}

/* ===================================================================
   CHECKLIST ITEM — icon + text row
   =================================================================== */
.check-item {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  margin-bottom: .5rem;
}
.check-item:last-child { margin-bottom: 0; }
.check-item i {
  color: #4cde8a;
  margin-top: .15rem;
  flex-shrink: 0;
}

/* ===================================================================
   PRINT STYLES
   =================================================================== */
@media print {
  .ticker-bar, #page-header, #page-footer, #cookie-banner,
  .btn-hero, .axina-mobile-toggler, #axina-offcanvas { display: none !important; }
  body { font-size: 11pt; color: #000; }
  a { color: #000; text-decoration: underline; }
  .sov-section { background: #f5f5f5 !important; color: #000 !important; border: 1px solid #ddd; }
}