/* Opteryx IT — Custom styles (Bootstrap CSS only) */
/* Note: Font-size baseline is >= 16px as requested. */

:root{
  --op-radius: 1.25rem;
  --op-radius-sm: .9rem;

  --op-ink: #0b1320;
  --op-ink-2: #111827;

  --op-text: #0f172a;
  --op-muted: #556070;

  --op-accent: #2f80ed;
  --op-accent-2: #00c2ff;

  --op-surface: rgba(255,255,255,.92);
  --op-surface-2: rgba(255,255,255,.75);

  --op-border: rgba(15,23,42,.12);

  --op-shadow-sm: 0 10px 26px rgba(2,6,23,.10);
  --op-shadow: 0 18px 55px rgba(2,6,23,.14);
  --op-shadow-lg: 0 28px 80px rgba(2,6,23,.18);
}

html, body{ font-size: 16px; }
html{ scroll-behavior: smooth; }

body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--op-text);
  line-height: 1.65;
  background:
    radial-gradient(900px 600px at 12% -10%, rgba(47,128,237,.18), transparent 62%),
    radial-gradient(900px 600px at 100% 0%, rgba(0,194,255,.12), transparent 55%),
    radial-gradient(900px 600px at 70% 110%, rgba(47,128,237,.10), transparent 58%),
    #f6f7fb;
}

::selection{ background: rgba(47,128,237,.24); }

a{ color: inherit; text-decoration: none; }
a:hover{ text-decoration: none; }

.skip-link{
  position:absolute;
  left:-999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}
.skip-link:focus{
  left: 1rem;
  top: 1rem;
  width:auto;
  height:auto;
  padding:.6rem .9rem;
  border-radius: 999px;
  background:#fff;
  box-shadow: var(--op-shadow-sm);
  z-index: 2000;
}

/* Subtle “premium” section rhythm */
.op-section{
  position: relative;
  overflow: hidden;
}
.op-section--alt{
  background:
    linear-gradient(180deg, rgba(47,128,237,.06), rgba(47,128,237,0)),
    rgba(255,255,255,.25);
}
.op-section--alt::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(700px 280px at 12% 0%, rgba(0,194,255,.16), transparent 65%),
    radial-gradient(700px 280px at 88% 15%, rgba(47,128,237,.14), transparent 62%);
  pointer-events:none;
  opacity:.9;
}
.op-section > .container{ position: relative; z-index: 1; }

.section-kicker{
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: .78rem;
  color: rgba(255,255,255,.78);
}
.section-title{
  position: relative;
  display: inline-block;
}
.section-title::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-.55rem;
  width: 62%;
  height: .28rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--op-accent), var(--op-accent-2));
  opacity: .9;
}

/* Legacy helper from early templates */
.letter-spacing{ letter-spacing: .14em; }
.op-dark{
  background:
    radial-gradient(900px 420px at 18% 0%, rgba(47,128,237,.30), transparent 62%),
    radial-gradient(900px 420px at 88% 15%, rgba(0,194,255,.22), transparent 60%),
    linear-gradient(135deg, #0b1320, #111827 55%, #0b1320);
}

/* Navbar (still Bootstrap markup; custom feel) */
.navbar-op{
  background: rgba(11,19,32,.76);
  border-bottom: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
}
.navbar-op .navbar-brand{
  letter-spacing: .02em;
}
.navbar-op .nav-link{
  color: rgba(255,255,255,.84);
}
.navbar-op .nav-link:hover{
  color: #fff;
}
.navbar-op .nav-link.active{
  color:#fff;
  position: relative;
}
.navbar-op .nav-link.active::after{
  content:"";
  position:absolute;
  left:.5rem;
  right:.5rem;
  bottom:.35rem;
  height:2px;
  border-radius:999px;
  background: linear-gradient(90deg, var(--op-accent), var(--op-accent-2));
}
.navbar-op .navbar-toggler{
  border-color: rgba(255,255,255,.25);
}
.navbar-op .btn{
  border-radius: 999px;
  box-shadow: 0 12px 30px rgba(13,110,253,.20);
}

/* Hero */
.hero-section{
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1200px 560px at 18% 5%, rgba(47,128,237,.36), transparent 62%),
    radial-gradient(1000px 520px at 90% 10%, rgba(0,194,255,.26), transparent 60%),
    linear-gradient(135deg, var(--op-ink), var(--op-ink-2) 48%, var(--op-ink));
}
.hero-section::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(850px 420px at 50% 0%, rgba(255,255,255,.08), transparent 70%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0, rgba(255,255,255,.06) 1px, transparent 1px, transparent 34px);
  opacity: .35;
  pointer-events:none;
}
.hero-section > .container{ position: relative; z-index: 1; }

.hero-card{
  border-radius: var(--op-radius);
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: var(--op-shadow-lg);
  backdrop-filter: blur(12px);
}

.hero-bullets span{
  display:inline-flex;
  align-items:center;
  padding:.25rem .5rem;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.12);
  font-size: .92rem;
}

/* Visual media */
.op-photo{
  border-radius: var(--op-radius);
  border: 1px solid var(--op-border);
  box-shadow: var(--op-shadow);
}
.op-photo--sm{
  border-radius: 1rem;
  box-shadow: var(--op-shadow-sm);
}

/* Metrics */
.metric{
  display:flex;
  gap:.75rem;
  align-items:center;
  padding:.8rem .85rem;
  border-radius: 1.05rem;
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 14px 35px rgba(2,6,23,.08);
}
.metric-icon{
  width:44px;
  height:44px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  background: linear-gradient(135deg, rgba(47,128,237,.18), rgba(0,194,255,.16));
  border: 1px solid rgba(47,128,237,.18);
  color: #0b3a86;
}
.metric-value{
  font-weight: 700;
  letter-spacing: .01em;
}

/* Pills */
.pill{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.55rem .8rem;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.92);
  color: #1f2937;
  font-size: .92rem;
  box-shadow: 0 10px 25px rgba(2,6,23,.06);
}

/* Cards */
.card-soft{
  border-radius: var(--op-radius);
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.92);
  box-shadow: var(--op-shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card-soft:hover{
  transform: translateY(-4px);
  box-shadow: var(--op-shadow);
  border-color: rgba(47,128,237,.22);
}
.feature-icon{
  width:46px;
  height:46px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  background: linear-gradient(135deg, rgba(47,128,237,.12), rgba(0,194,255,.10));
  color: #0d6efd;
  border: 1px solid rgba(13,110,253,.14);
}

/* Stacks */
.stack{ display:flex; flex-direction:column; gap:.55rem; }
.stack-item{
  padding:.7rem .85rem;
  border-radius: 1.05rem;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 25px rgba(2,6,23,.06);
}

/* Quotes / testimonials */
.quote-card{
  border-radius: var(--op-radius);
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.92);
  box-shadow: var(--op-shadow-sm);
}
.quote-mark{
  width: 44px; height: 44px;
  display:grid; place-items:center;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(47,128,237,.14), rgba(0,194,255,.12));
  border: 1px solid rgba(47,128,237,.18);
}

/* FAQ */
.faq-card{
  border-radius: var(--op-radius);
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.90);
  box-shadow: var(--op-shadow-sm);
}
.faq-item{
  border-radius: 1.05rem;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 25px rgba(2,6,23,.06);
}

/* Forms */
.form-control, .form-select{
  border-radius: 1rem;
  border-color: rgba(15,23,42,.16);
}
.form-control:focus, .form-select:focus{
  border-color: rgba(47,128,237,.55);
  box-shadow: 0 0 0 .25rem rgba(47,128,237,.16);
}
.btn-primary{
  border-radius: 999px;
  box-shadow: 0 14px 35px rgba(13,110,253,.22);
}
.btn-outline-light{
  border-radius: 999px;
}

/* Footer */
.footer-op{
  background:
    radial-gradient(800px 380px at 10% 0%, rgba(47,128,237,.10), transparent 60%),
    radial-gradient(800px 380px at 90% 10%, rgba(0,194,255,.08), transparent 60%),
    rgba(255,255,255,.65);
  backdrop-filter: blur(6px);
}
.footer-op a{
  color: rgba(15,23,42,.82);
}
.footer-op a:hover{
  color: rgba(15,23,42,1);
  text-decoration: none;
}

/* Cookie banner */
.cookie-banner{
  position: fixed;
  inset: auto 0 0 0;
  background: rgba(255,255,255,.92);
  border-top: 1px solid rgba(15,23,42,.14);
  backdrop-filter: blur(10px);
  z-index: 1200;
  box-shadow: 0 -14px 45px rgba(2,6,23,.12);
}
.cookie-banner .btn{
  border-radius: 999px;
}

/* Popup overlay */
.opteryx-overlay{
  position: fixed;
  inset: 0;
  background: rgba(2,6,23,.58);
  display:none;
  align-items:center;
  justify-content:center;
  padding: 1.25rem;
  z-index: 1300;
}
.opteryx-overlay[aria-hidden="false"]{ display:flex; }

.opteryx-dialog{
  width: min(640px, 100%);
  border-radius: var(--op-radius);
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.94);
  box-shadow: var(--op-shadow-lg);
  padding: 1.25rem 1.25rem 1rem;
}
.opteryx-dialog h3{
  font-size: 1.25rem;
  margin: 0 0 .25rem;
}
.opteryx-dialog p{ color: rgba(15,23,42,.78); }

/* Keep Bootstrap accordion usable without Bootstrap JS */
.accordion-button{ cursor: pointer; }
.accordion-collapse{ display:none; }
.accordion-collapse.show{ display:block; }

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}