:root{
  --bg:#02040a;
  --bg2:#040a18;

  --text:#eef4ff;
  --muted:#a8b5d6;

  --blue:#2aa7ff;
  --blue2:#0b66ff;
  --silver:#cfd6e6;
  --orange:#ffb24a;

  --panel: rgba(7,14,36,.62);
  --panel2: rgba(5,10,26,.52);
  --line: rgba(42,167,255,.18);

  --radius:18px;
  --radius2:26px;

  --shadow: 0 24px 80px rgba(0,0,0,.55);
  --shadow2: 0 14px 42px rgba(0,0,0,.35);

  --max:1180px;

  /* fingertip glow placement for home hero */
  --glow-x: 50%;
  --glow-y: 38%;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color:var(--text);
  background:
    /*radial-gradient(1100px 800px at 20% 10%, rgba(11,102,255,.14), transparent 60%),
    radial-gradient(1000px 700px at 80% 20%, rgba(42,167,255,.12), transparent 60%),
    radial-gradient(900px 650px at 50% 115%, rgba(255,178,74,.08), transparent 60%),*/
    radial-gradient(1100px 800px at 20% 10%, rgba(11,102,255,.18), transparent 75%),
  radial-gradient(1000px 700px at 80% 20%, rgba(42,167,255,.16), transparent 75%),
  radial-gradient(900px 650px at 50% 115%, rgba(255,178,74,.12), transparent 80%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg2) 70%, #02030a 100%);
  overflow-x:hidden;
}

a{color:inherit; text-decoration:none}
.wrap{max-width:var(--max); margin:0 auto; padding:0 22px}

.metal{
  background:linear-gradient(90deg, var(--silver), #ffffff, var(--silver));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* NAV */
.nav{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter: blur(14px);
  background: linear-gradient(180deg, rgba(2,4,10,.86), rgba(2,4,10,.52));
  border-bottom:1px solid rgba(42,167,255,.16);
}
.nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 0;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:260px;
}
/*.brand-mark{
  width:40px;
  height:40px;
  border-radius:14px;
  background:
    radial-gradient(16px 16px at 30% 30%, rgba(255,178,74,.55), transparent 70%),
    radial-gradient(18px 18px at 70% 30%, rgba(42,167,255,.65), transparent 70%),
    linear-gradient(135deg, rgba(8,18,44,.98), rgba(4,10,26,.98));
  border:1px solid rgba(42,167,255,.22);
  box-shadow: 0 10px 28px rgba(0,0,0,.42);
}*/

.btn.primary {
  display: none;
}

/* Show on mobile */
@media (max-width: 768px) {
  .btn.primary {
    display: inline-block;
  }
}
.brand-mark {
  width: 40px;
  height: 40px;
  border-radius: 14px;

  background-image: url('technologies.png');
  background-size: cover;       /* fill container */
  background-position: center;  /* center the image */
  background-repeat: no-repeat;
/* 
  border: 1px solid rgba(42,167,255,.22);
  box-shadow: 0 10px 28px rgba(0,0,0,.42);*/
}
.brand b{
  letter-spacing:.4px;
  background:linear-gradient(90deg, var(--silver), #ffffff, var(--silver));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.brand small{
  display:block;
  color:var(--muted);
  margin-top:2px;
  font-size:12px;
}

.nav-links{
  display:flex;
  align-items:center;
  gap:14px;
  color:var(--muted);
  font-size:14px;
}
.nav-links a{
  padding:10px 10px;
  border-radius:14px;
  border:1px solid transparent;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.nav-links a:hover{
  background: rgba(42,167,255,.10);
  color: var(--text);
  border-color: rgba(42,167,255,.14);
}
.nav-links a[aria-current="page"]{
  background: rgba(42,167,255,.12);
  border-color: rgba(42,167,255,.16);
  color: var(--text);
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:11px 14px;
  border-radius:14px;
  border:1px solid rgba(42,167,255,.22);
  background: rgba(7,14,36,.52);
  color: var(--text);
  box-shadow: var(--shadow2);
  cursor:pointer;
  transition: transform .15s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
  font-weight:650;
  font-size:14px;
  user-select:none;
}
.btn:hover{
  transform: translateY(-1px);
  border-color: rgba(42,167,255,.42);
  background: rgba(7,14,36,.78);
  box-shadow: var(--shadow);
}
.btn.primary{
  border-color: rgba(255,178,74,.35);
  background: linear-gradient(135deg, rgba(255,178,74,.18), rgba(42,167,255,.10));
}
.btn.primary:hover{border-color: rgba(255,178,74,.55)}

.hamburger{
  display:none;
  width:44px;
  height:44px;
  border-radius:14px;
  border:1px solid rgba(42,167,255,.20);
  background: rgba(7,14,36,.48);
  color: var(--text);
  cursor:pointer;
}




.drawer-panel a{
  display:block;
  padding:12px 12px;
  border-radius:16px;
  color: var(--text);
  border:1px solid transparent;
}
.drawer-panel a:hover{background: rgba(42,167,255,.12); border-color: rgba(42,167,255,.14)}
.drawer-panel a[aria-current="page"]{background: rgba(42,167,255,.12); border-color: rgba(42,167,255,.14)}

/* HERO (home) */
.hero{
  position:relative;
  /*min-height: 92vh;*/
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  overflow:hidden;
  /*padding: 48px 0 36px;*/
  width: 100%;
  min-height: 100vh;   /* Full screen height */
  margin: 0;
  padding: 0;
}
.hero-bg{
  position:absolute;
  inset:0;
  background: radial-gradient(circle at center, rgba(255,178,74,.08), transparent 60%);
}
.hero-logo{
  position:relative;
  width:100%;
  height:100vh;
  object-fit:cover;
  z-index:2;
  filter: drop-shadow(0 30px 90px rgba(0,0,0,.40));
  border-radius: 0;
}
.hero-glow{
  position:absolute;
  width:22px;
  height:22px;
  border-radius:50%;
  background: radial-gradient(circle, rgba(255,178,74,1) 0%, rgba(255,178,74,.5) 40%, rgba(255,178,74,0) 70%);
  box-shadow: 0 0 30px rgba(255,178,74,.9), 0 0 90px rgba(42,167,255,.4);
  animation: pulse 2.8s ease-in-out infinite;
  left: var(--glow-x);
  top: var(--glow-y);
  transform: translate(-50%,-50%);
  z-index:3;
}
@keyframes pulse{
  0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.9}
  50%{transform:translate(-50%,-50%) scale(1.35);opacity:1}
}

/* PAGE HERO (internal pages) */
.page-hero{
  padding: 52px 0 26px;
}
.page-hero h1{
  margin:0;
  font-size: clamp(30px, 4.5vw, 46px);
  letter-spacing: -0.6px;
}
.page-hero p{
  color:var(--muted);
  line-height:1.8;
  max-width: 86ch;
  margin: 12px 0 0;
}

/* SECTIONS */
section{padding:56px 0}
.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:16px;
}
h2{
  margin:0;
  font-size:22px;
  letter-spacing:-.2px;
}
.lead{
  margin:0;
  color:var(--muted);
  max-width: 88ch;
  line-height:1.8;
  font-size:14px;
}

.grid{display:grid; grid-template-columns: repeat(12, 1fr); gap:14px;}
.col-4{grid-column: span 4}
.col-6{grid-column: span 6}
.col-8{grid-column: span 8}
.col-12{grid-column: span 12}

.card{
  position:relative;
  background: linear-gradient(180deg, rgba(7,14,36,.72), rgba(2,4,10,.30));
  border: 1px solid rgba(42,167,255,.14);
  border-radius: var(--radius2);
  box-shadow: var(--shadow2);
  padding:20px;
  overflow:hidden;
}
.card:before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(520px 280px at 15% 18%, rgba(42,167,255,.16), transparent 60%),
    radial-gradient(520px 280px at 85% 28%, rgba(11,102,255,.12), transparent 62%),
    radial-gradient(540px 300px at 50% 105%, rgba(255,178,74,.08), transparent 70%);
  opacity:.85;
  pointer-events:none;
}
.card > *{position:relative}
.card h3{margin:0 0 10px; font-size:16px; letter-spacing:.2px}
.card p{margin:0; color:var(--muted); font-size:13px; line-height:1.8}

.list{margin:12px 0 0; padding-left:18px}
.list li{margin:6px 0; color:var(--muted); font-size:13px; line-height:1.7}

.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(42,167,255,.18);
  background: rgba(7,14,36,.45);
  color: var(--text);
  font-size:12px;
}
.badge i{
  width:8px;
  height:8px;
  border-radius:999px;
  background: var(--orange);
  box-shadow: 0 0 16px rgba(255,178,74,.55);
  display:inline-block;
}

.callout{
  padding:22px;
  border-radius: var(--radius2);
  border: 1px solid rgba(42,167,255,.14);
  background: linear-gradient(135deg, rgba(255,178,74,.12), rgba(42,167,255,.08), rgba(11,102,255,.06));
  box-shadow: var(--shadow);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.callout b{font-size:16px}
.callout span{display:block; margin-top:6px; color:var(--muted); font-size:13px; line-height:1.75}

/* Simple form */
.form{
  display:grid;
  gap:12px;
}
.input{
  width:100%;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(42,167,255,.18);
  background: rgba(7,14,36,.42);
  color: var(--text);
  outline:none;
}
.input:focus{border-color: rgba(42,167,255,.42)}
textarea.input{min-height:120px; resize: vertical}

/* FOOTER */
footer{
  padding:28px 0 36px;
  color: var(--muted);
  border-top: 1px solid rgba(42,167,255,.14);
  margin-top: 18px;
}
.foot{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:13px}
.foot a{color: var(--muted)}
.foot a:hover{color: var(--text)}

/* MOBILE */


@media (max-width: 640px) {
  .nav-inner {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .brand {
    gap: 12px;
  }

  .brand-mark {
    width: 50px;
    height: 50px;
    min-width: 50px;
  }

  .logo-text {
    font-size: 15px;
    letter-spacing: 0.06em;
  }

  .brand small {
    font-size: 9px;
    line-height: 1.25;
    max-width: 240px;
  }

  .hamburger {
    width: 42px;
    height: 42px;
  }
}



/* Clean solid mobile menu */
.drawer {
  display: none;
}

.drawer.open {
  display: block;
}

@media (max-width: 980px) {
  .nav-links,
  .partner-cta {
    display: none !important;
  }

  .hamburger {
    display: inline-flex !important;
    position: relative;
    z-index: 120;
  }

  .drawer {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.45) !important;
    z-index: 110 !important;
  }

  .drawer-panel {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 84vw !important;
    max-width: 360px !important;
    height: 100vh !important;
    padding: 84px 24px 28px !important;
    background: #020817 !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-left: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: -18px 0 40px rgba(0, 0, 0, 0.35) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    overflow-y: auto !important;
  }

  .drawer-panel a {
    display: block !important;
    width: 100% !important;
    padding: 14px 16px !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    box-sizing: border-box !important;
  }

  .drawer-panel a[aria-current="page"] {
    background: rgba(37, 99, 235, 0.18) !important;
    border-color: rgba(59, 130, 246, 0.28) !important;
  }
}

@media (min-width: 981px) {
  .drawer {
    display: none !important;
  }
}