/* assets/styles.css
   OLD THEME COLORS (yellow + steel), keeping current structure/layout
*/

:root{
  /* Old palette */
  --bg0: #0b0f14;            /* page background */
  --bg1: #0e141d;            /* subtle gradient layer */
  --panel: rgba(17, 25, 39, 0.78);
  --panel2: rgba(17, 25, 39, 0.58);
  --stroke: rgba(184, 188, 190, 0.16);
  --stroke2: rgba(184, 188, 190, 0.10);
  --text: #e8eaed;
  --muted: rgba(184, 188, 190, 0.85);
  --muted2: rgba(184, 188, 190, 0.70);

  --accent: #FFD631;         /* yellow accent */
  --accent2: rgba(255, 214, 49, 0.18);

  --shadow: 0 10px 30px rgba(0,0,0,0.35);
  --radius: 18px;

  --container: 1120px;
}

*{ box-sizing:border-box; }
html, body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--text);

  /* Old theme background: deep + subtle steel gradient */
  background:
    radial-gradient(1000px 600px at 20% 10%, rgba(255,214,49,0.09), transparent 60%),
    radial-gradient(900px 520px at 80% 20%, rgba(103, 136, 255, 0.12), transparent 55%),
    radial-gradient(700px 450px at 50% 90%, rgba(255,214,49,0.05), transparent 60%),
    linear-gradient(180deg, var(--bg1), var(--bg0));
}

/* --------- Layout helpers --------- */
.container{
  width: min(var(--container), calc(100% - 40px));
  margin: 0 auto;
}
.page{
  padding: 38px 0 60px;
}
.row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

/* --------- Header / Nav --------- */
header{
  position: sticky;
  top: 0;
  z-index: 50;

  background: rgba(11, 15, 20, 0.65);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--stroke2);
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 0;
}
.brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color: var(--text);
  font-weight:700;
  letter-spacing: .2px;
}

/* Existing dot (works if you keep the old brand markup) */
.brand .dot{
  width:8px; height:8px;
  border-radius:999px;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(255,214,49,0.10);
}

/* ===== NEW: Brand logo support =====
   Use in HTML:
   <a class="brand" ...>
     <img class="brand-logo" src="assets/img/opt-logo.svg" alt="OPT" />
     <span class="brand-text">OPT</span>
   </a>
*/
.brand-logo{
  height: 55px;
  width: auto;
  display: block;
  object-fit: contain;
  /* helps make transparent PNG/SVG pop on dark header */
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.30));
}
@media (max-width: 520px){
  .brand-logo{ height: 24px; }
}

/* Optional text next to logo */
.brand-text{
  font-weight: 900;
  letter-spacing: .2px;
}

/* If a logo is present, hide the dot so you don't get "double branding" */
.brand:has(.brand-logo) .dot{
  display:none;
}

/* Fallback for browsers that don't support :has()
   If you remove the dot from HTML (recommended), you don't need this fallback. */
@supports not selector(:has(*)){
  /* no-op fallback */
}

.right{
  display:flex;
  align-items:center;
  gap: 16px;
}
nav ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap: 14px;
  align-items:center;
}
nav a{
  color: var(--muted2);
  text-decoration:none;
  font-size: 14px;
  padding: 8px 10px;
  border-radius: 12px;
  transition: 120ms ease;
}
nav a:hover{
  color: var(--text);
  background: rgba(184,188,190,0.06);
}
nav a.active{
  color: var(--text);
  background: rgba(184,188,190,0.08);
  border: 1px solid var(--stroke2);
}

/* Language buttons */
.lang{
  display:flex;
  gap:8px;
  align-items:center;
}
.lang button{
  cursor:pointer;
  border: 1px solid var(--stroke2);
  background: rgba(184,188,190,0.06);
  color: var(--muted2);
  padding: 7px 10px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 12px;
  transition: 120ms ease;
}
.lang button:hover{
  color: var(--text);
  border-color: var(--stroke);
}
.lang button.active{
  background: rgba(255,214,49,0.16);
  color: var(--text);
  border-color: rgba(255,214,49,0.35);
}

/* --------- Typography --------- */
h1{
  margin: 0 0 8px;
  font-size: 36px;
  line-height: 1.15;
  letter-spacing: -0.6px;
}
p{
  margin: 0 0 14px;
  color: var(--muted);
  line-height: 1.6;
}
.small{
  font-size: 12px;
  color: var(--muted2);
  line-height: 1.55;
}
.strong{
  color: var(--text);
  font-weight: 700;
}

/* --------- Panels (the “bubble” blocks) --------- */
.panel{
  margin-top: 18px;
  padding: 18px 18px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  background:
    radial-gradient(1100px 500px at 30% 10%, rgba(255,214,49,0.08), transparent 55%),
    radial-gradient(900px 500px at 75% 25%, rgba(103,136,255,0.09), transparent 55%),
    linear-gradient(180deg, var(--panel), rgba(17, 25, 39, 0.58));
  box-shadow: var(--shadow);
}
.panel h3{
  margin: 14px 0 8px;
  font-size: 16px;
  letter-spacing: -0.2px;
  color: var(--text);
}

/* Panel title (make it pop + underline accent) */
.panel-title{
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: var(--text);
  padding-bottom: 10px;
  position: relative;
}
.panel-title::after{
  content:"";
  position:absolute;
  left:0;
  bottom: 2px;
  width: 54px;
  height: 2px;
  border-radius: 999px;
  background: var(--accent);
  opacity: 0.95;
}

/* Subtitle big line */
.panel-subtitle{
  margin-top: 10px;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--text);
}
.divider{
  height: 1px;
  background: var(--stroke2);
  margin: 16px 0;
}

/* Sub-panels inside a panel (payments blocks etc.) */
.subpanel{
  margin-top: 14px;
  padding: 14px 14px 12px;
  border-radius: 16px;
  border: 1px solid var(--stroke2);
  background: rgba(11, 15, 20, 0.20);
}
.subpanel h3{
  margin-top: 0;
}

/* Bullets */
.bullets{
  margin: 8px 0 14px;
  padding-left: 18px;
  color: var(--muted);
}
.bullets li{
  margin: 7px 0;
  line-height: 1.55;
}
.bullets li::marker{
  color: rgba(255,214,49,0.85);
}

/* Tagline */
.tagline{
  margin-top: 14px;
  font-weight: 800;
  color: var(--text);
}

/* Back to top */
.back-to-top{
  margin-top: 14px;
}
.back-to-top a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color: var(--muted2);
  text-decoration:none;
  font-weight: 700;
  font-size: 13px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--stroke2);
  background: rgba(184,188,190,0.05);
}
.back-to-top a:hover{
  color: var(--text);
  border-color: var(--stroke);
  background: rgba(184,188,190,0.07);
}

/* --------- Highlights strip (cards at top) --------- */
.highlights{
  margin-top: 14px;
  padding: 14px;
  border-radius: var(--radius);
  border: 1px solid var(--stroke2);
  background: rgba(17, 25, 39, 0.35);
}
.highlights-head{
  font-weight: 800;
  letter-spacing: -0.3px;
  margin-bottom: 10px;
}
.highlights-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 980px){
  .highlights-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .highlights-grid{ grid-template-columns: 1fr; }
}

.hcard{
  display:block;
  text-decoration:none;
  color: inherit;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid var(--stroke2);
  background:
    radial-gradient(500px 180px at 20% 15%, rgba(255,214,49,0.10), transparent 60%),
    rgba(11, 15, 20, 0.18);
  transition: 140ms ease;
}
.hcard:hover{
  transform: translateY(-1px);
  border-color: var(--stroke);
  background:
    radial-gradient(500px 180px at 20% 15%, rgba(255,214,49,0.14), transparent 60%),
    rgba(11, 15, 20, 0.22);
}
.hcard-title{
  font-weight: 900;
  letter-spacing: -0.25px;
  margin-bottom: 6px;
}
.hcard-text{
  color: var(--muted2);
  font-size: 13px;
  line-height: 1.55;
}
.hcard-cta{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top: 10px;
  color: var(--text);
  font-weight: 800;
  font-size: 13px;
}
.hcard-cta-dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(255,214,49,0.10);
}
.highlights-note{
  margin-top: 10px;
  color: var(--muted2);
  font-size: 12px;
}

/* --------- Country grid --------- */
.country-block{
  margin-top: 14px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid var(--stroke2);
  background: rgba(11, 15, 20, 0.18);
}
.country-grid{
  margin-top: 10px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px 12px;
}
@media (max-width: 760px){
  .country-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px){
  .country-grid{ grid-template-columns: 1fr; }
}
.country-cell{
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--stroke2);
  background: rgba(184,188,190,0.04);
  color: var(--muted);
  font-size: 13px;
}

/* --------- Footer --------- */
.footer{
  margin-top: 30px;
  border-top: 1px solid var(--stroke2);
  background: rgba(11, 15, 20, 0.35);
}
.footer .row{
  padding: 16px 0;
  color: var(--muted2);
  font-size: 13px;
}
.footer a{
  color: var(--muted2);
  text-decoration:none;
}
.footer a:hover{
  color: var(--text);
}

/* --------- Misc (links inside content) --------- */
a{ color: inherit; }

/* =========================================================
   HOMEPAGE ONLY (NO BUBBLES)
   Applies ONLY when <body class="home">
   ========================================================= */

body.home .page{ padding: 0; } /* homepage uses its own spacing */
.home-main{ padding-bottom: 46px; }

/* HERO */
.home-hero{
  padding: 44px 0 22px;
  position: relative;
}
.home-hero::before{
  content:"";
  position:absolute;
  inset: 0;
  pointer-events:none;
  background:
    radial-gradient(900px 420px at 22% 25%, rgba(255,214,49,0.10), transparent 60%),
    radial-gradient(900px 420px at 78% 20%, rgba(103,136,255,0.12), transparent 55%);
  opacity: 0.9;
}
.home-hero .container{ position: relative; }

.home-hero-grid{
  display:grid;
  grid-template-columns: 1.35fr 0.9fr;
  gap: 18px;
  align-items: stretch;
}
@media (max-width: 980px){
  .home-hero-grid{ grid-template-columns: 1fr; }
}

.home-hero-copy{
  border-radius: 24px;
  border: 1px solid var(--stroke2);
  background: rgba(17, 25, 39, 0.38);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow);
  padding: 20px 20px 18px;
}
.home-kicker{
  font-weight: 900;
  letter-spacing: -0.25px;
  color: var(--text);
  opacity: 0.92;
}
.home-title{
  margin: 10px 0 0;
  font-size: 46px;
  line-height: 1.05;
  letter-spacing: -0.95px;
}
@media (max-width: 760px){
  .home-title{ font-size: 34px; line-height: 1.1; }
}
.home-lead{
  margin-top: 10px;
  color: var(--muted);
  max-width: 85ch;
  font-size: 15px;
  line-height: 1.7;
}
.home-cta{
  margin-top: 14px;
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items:center;
}
.home-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--stroke2);
  font-weight: 900;
  font-size: 13px;
  transition: 140ms ease;
  user-select:none;
}
.home-btn-primary{
  background: rgba(255,214,49,0.14);
  border-color: rgba(255,214,49,0.40);
  color: var(--text);
}
.home-btn-primary:hover{
  transform: translateY(-1px);
  background: rgba(255,214,49,0.18);
  border-color: rgba(255,214,49,0.58);
}
.home-btn-secondary{
  background: rgba(184,188,190,0.06);
  border-color: var(--stroke2);
  color: var(--text);
}
.home-btn-secondary:hover{
  transform: translateY(-1px);
  background: rgba(184,188,190,0.08);
  border-color: var(--stroke);
}
.home-btn-ghost{
  background: transparent;
  border-color: var(--stroke2);
  color: var(--muted2);
}
.home-btn-ghost:hover{
  transform: translateY(-1px);
  color: var(--text);
  background: rgba(184,188,190,0.06);
  border-color: var(--stroke);
}

.home-proof{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--stroke2);
  color: var(--muted2);
  font-size: 12px;
  line-height: 1.55;
}

/* Metrics card */
.home-hero-metrics{
  border-radius: 24px;
  border: 1px solid var(--stroke2);
  background: rgba(11, 15, 20, 0.26);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow);
  padding: 16px;
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.metric{
  border-radius: 16px;
  border: 1px solid var(--stroke2);
  background: rgba(184,188,190,0.04);
  padding: 12px 12px 10px;
}
.metric-title{
  font-weight: 900;
  letter-spacing: -0.25px;
}
.metric-text{
  margin-top: 6px;
  color: var(--muted2);
  font-size: 13px;
  line-height: 1.55;
}

/* Sections */
.home-section,
.home-arch{
  padding: 22px 0;
}

.home-section-head{
  margin-bottom: 12px;
}
.home-h2{
  margin: 0;
  font-size: 20px;
  letter-spacing: -0.25px;
  font-weight: 900;
}
.home-sub{
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.7;
}

.home-section-grid{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 16px;
  align-items: start;
}
@media (max-width: 980px){
  .home-section-grid{ grid-template-columns: 1fr; }
}

/* Cards (non-bubble style) */
.home-card{
  border-radius: 22px;
  border: 1px solid var(--stroke2);
  background: rgba(17, 25, 39, 0.34);
  box-shadow: var(--shadow);
  padding: 16px;
}
.home-card-title{
  font-weight: 900;
  letter-spacing: -0.25px;
  margin-bottom: 8px;
}
.home-strong{
  margin-top: 10px;
  font-weight: 900;
  color: var(--text);
}

.home-list{
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
}
.home-list li{
  margin: 7px 0;
  line-height: 1.55;
}
.home-list li::marker{ color: rgba(255,214,49,0.85); }

/* 4 tiles */
.home-grid-4{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 980px){
  .home-grid-4{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .home-grid-4{ grid-template-columns: 1fr; }
}
.home-tile{
  border-radius: 20px;
  border: 1px solid var(--stroke2);
  background:
    radial-gradient(520px 200px at 20% 18%, rgba(255,214,49,0.10), transparent 60%),
    rgba(11, 15, 20, 0.20);
  padding: 14px;
  transition: 140ms ease;
}
.home-tile:hover{
  transform: translateY(-1px);
  border-color: var(--stroke);
  background:
    radial-gradient(520px 200px at 20% 18%, rgba(255,214,49,0.14), transparent 60%),
    rgba(11, 15, 20, 0.24);
}
.home-tile-title{
  font-weight: 900;
  letter-spacing: -0.25px;
  margin-bottom: 6px;
}
.home-tile-text{
  color: var(--muted2);
  font-size: 13px;
  line-height: 1.55;
}

/* 2-col pills */
.home-grid-2{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 12px;
}
@media (max-width: 720px){
  .home-grid-2{ grid-template-columns: 1fr; }
}
.home-pill{
  border-radius: 16px;
  border: 1px solid var(--stroke2);
  background: rgba(184,188,190,0.04);
  padding: 12px 12px 10px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

/* Architecture figure */
.home-figure{
  margin: 12px 0 0;
  border-radius: 24px;
  border: 1px solid var(--stroke2);
  background: rgba(11, 15, 20, 0.22);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.home-figure-link{
  display:block;
}
.home-image{
  width: 100%;
  height: auto;
  display:block;
}
.home-caption{
  padding: 10px 12px;
  border-top: 1px solid var(--stroke2);
  color: var(--muted2);
  font-size: 12px;
  line-height: 1.55;
}

.home-mini{
  margin-top: 10px;
  color: var(--muted2);
  font-size: 12px;
  line-height: 1.55;
}

/* Back to top (homepage version) */
.home-back{
  margin-top: 14px;
}
.home-back a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color: var(--muted2);
  text-decoration:none;
  font-weight: 900;
  font-size: 13px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--stroke2);
  background: rgba(184,188,190,0.05);
}
.home-back a:hover{
  color: var(--text);
  border-color: var(--stroke);
  background: rgba(184,188,190,0.07);
}

.home-cta.bottom{
  margin-top: 14px;
}

/* =========================================================
   TECH FIGURES (Products / Solutions)
   ========================================================= */

.tech-figure{
  margin: 14px 0 18px;
  border-radius: 16px;
  border: 1px solid var(--stroke2);
  background: rgba(11, 15, 20, 0.22);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.tech-figure-link{
  display:block;
}
.tech-image{
  width: 100%;
  height: auto;
  display: block;
}
.tech-caption{
  padding: 10px 12px;
  border-top: 1px solid var(--stroke2);
  color: var(--muted2);
  font-size: 12px;
  line-height: 1.55;
}

/* ===== Form fields (contact.html uses these classes) ===== */
.field{
  width:100%;
  margin:8px 0 12px;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid var(--stroke2);
  background: rgba(184,188,190,0.04);
  color: var(--text);
  outline:none;
}
.field:focus{
  border-color: rgba(255,214,49,0.40);
  box-shadow: 0 0 0 3px rgba(255,214,49,0.12);
}
.field-textarea{
  resize: vertical;
}

/* Send button (matches your theme) */
.send-btn{
  cursor:pointer;
  border:1px solid rgba(255,214,49,0.40);
  background: rgba(255,214,49,0.14);
  color: var(--text);
  padding:10px 14px;
  border-radius:14px;
  font-weight:900;
  transition: 140ms ease;
}
.send-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(255,214,49,0.58);
  background: rgba(255,214,49,0.18);
}

/* ===== Custom dropdown ===== */
.dd{
  position: relative;
  margin: 8px 0 12px;
}

.dd-btn{
  width: 100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;

  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid var(--stroke2);
  background: rgba(184,188,190,0.04);
  color: var(--text);

  cursor: pointer;
  user-select: none;
  outline: none;
}
.dd-btn:focus{
  border-color: rgba(255,214,49,0.40);
  box-shadow: 0 0 0 3px rgba(255,214,49,0.12);
}

.dd-value{
  font-weight: 700;
  color: var(--text);
}

/* caret */
.dd-caret{
  width: 10px;
  height: 10px;
  border-right: 2px solid rgba(255,214,49,0.95);
  border-bottom: 2px solid rgba(255,214,49,0.95);
  transform: rotate(45deg);
  margin-right: 2px;
  opacity: 0.95;
  transition: 140ms ease;
}

.dd.open .dd-caret{
  transform: rotate(-135deg);
}

/* menu */
.dd-menu{
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  z-index: 30;

  display: none;
  padding: 8px;
  border-radius: 16px;
  border: 1px solid var(--stroke);
  background:
    radial-gradient(700px 280px at 20% 18%, rgba(255,214,49,0.10), transparent 60%),
    rgba(11, 15, 20, 0.92);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
}

.dd.open .dd-menu{
  display: block;
}

.dd-opt{
  width: 100%;
  text-align: left;

  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);

  padding: 10px 10px;
  border-radius: 12px;
  cursor: pointer;

  font-weight: 700;
  transition: 120ms ease;
}
.dd-opt:hover,
.dd-opt:focus{
  outline: none;
  color: var(--text);
  background: rgba(184,188,190,0.08);
  border-color: var(--stroke2);
}

.dd-opt[aria-selected="true"]{
  color: var(--text);
  background: rgba(255,214,49,0.12);
  border-color: rgba(255,214,49,0.35);
}