:root{
    --bg1: #0f172a;
    --glass: rgba(255,255,255,0.06);
    --accent1: #4ade80; /* green */
    --accent2: #60a5fa; /* blue */
    --muted: rgba(255,255,255,0.7);
    --card-shadow: 0 10px 30px rgba(2,6,23,0.6);
    --radius: 14px;
  }
html,body{
  margin:0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: radial-gradient(1200px 600px at 10% 10%, rgba(96,165,250,0.12), transparent 8%),
              radial-gradient(900px 400px at 90% 90%, rgba(74,222,128,0.08), transparent 8%),
              linear-gradient(135deg, #071129 0%, #0b1220 40%, #0f1530 100%);
  color: #e6eef8;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:center;
  padding:48px;
  padding-top: 10px;
  box-sizing:border-box;
}

.container{
width:100%;
max-width:1100px;
display:grid;
grid-template-columns: 1fr 430px;
gap:32px;
align-items:start;
}

/* LEFT: hero */
.card {
background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
border-radius: var(--radius);
padding:32px;
box-shadow: var(--card-shadow);
border: 1px solid rgba(255,255,255,0.04);
position:relative;
overflow:hidden;
backdrop-filter: blur(6px);
}

.brand {
display:flex;
flex-direction:"column";
gap:14px;
align-items:center;
margin-bottom:12px;
}
.logo {
width:56px;
height:56px;
border-radius:10px;
display:grid;
place-items:center;
background: linear-gradient(135deg, var(--accent1), var(--accent2));
box-shadow: 0 6px 18px rgba(96,165,250,0.12), inset 0 -6px 12px rgba(0,0,0,0.12);
font-weight:800;
font-size:18px;
color:#04263b;
}
.brand h3 { margin:0; font-size:16px; letter-spacing:0.4px; }
.brand p { margin:0; font-size:12px; color:var(--muted); }

h1 {
margin: 6px 0 12px 0;
font-size: clamp(18px, 2.2vw, 20px);
line-height:1.02;
letter-spacing:-0.01em;
color: #eaf7ff;
}
.lead {
color: var(--muted);
margin-bottom:18px;
font-size:15px;
max-width:60ch;
}

.kpis {
display:flex;
gap:12px;
margin: 20px 0 16px;
flex-wrap:wrap;
}
.kpi {
background: var(--glass);
padding:12px 16px;
border-radius:12px;
width:100%;
min-width:120px;
box-shadow: 0 6px 18px rgba(2,6,23,0.35);
border:1px solid rgba(255,255,255,0.03);
display:flex;
justify-content:space-between;
}
.kpi .label { font-size:12px; color:var(--muted); }
.kpi .value { font-weight:700; font-size:16px; margin-top:6px; color:green }

.features {
display:grid;
grid-template-columns:repeat(2, minmax(0,1fr));
gap:12px;
margin-top:18px;
}
.feature {
background: rgba(255,255,255,0.02);
border-radius:10px;
padding:10px;
font-size:13px;
border:1px solid rgba(255,255,255,0.02);
}
.feature b { color:#fff; }

/* RIGHT: side panel */
.panel {
position:sticky;

height:fit-content;
}
.panel .hero-panel {
padding:20px;
display:flex;
flex-direction:column;
gap:12px;
align-items:stretch;
}
.subscribe {
display:flex;
gap:10px;
align-items:center;
}
.subscribe input[type="email"]{
flex:1;
padding:12px 14px;
border-radius:10px;
border:1px solid rgba(255,255,255,0.06);
background: rgba(255,255,255,0.02);
color: #eaf7ff;
outline:none;
font-size:14px;
}
.btn {
background: linear-gradient(90deg,var(--accent1),var(--accent2));
border:none;
color:#04263b;
font-weight:700;
padding:10px 14px;
border-radius:10px;
cursor:pointer;
min-width:120px;
box-shadow: 0 8px 24px rgba(74,222,128,0.10);
}
.btn:hover {
  box-shadow: 0 12px 36px rgba(74,222,128,0.25);
  scale:1.02;
} 
.btn.secondary {
background:transparent;
border:1px solid rgba(255,255,255,0.06);
color:var(--muted);
box-shadow:none;
font-weight:600;
}

.small {
font-size:13px;
color:var(--muted);
}

footer.disclaimer {
margin-top:18px;
border-top:1px dashed rgba(255,255,255,0.03);
padding-top:12px;
font-size:12px;
color:rgba(255,255,255,0.6);
}

/* subtle animated waves */
.bg-orb {
position:absolute;
right:-120px;
top:-80px;
width:420px;
height:420px;
border-radius:50%;
background: radial-gradient(circle at 30% 30%, rgba(96,165,250,0.14), transparent 25%),
            radial-gradient(circle at 70% 70%, rgba(74,222,128,0.12), transparent 30%);
filter: blur(28px);
transform: rotate(12deg);
opacity:0.9;
pointer-events:none;
}

/* responsive */
@media (max-width:980px){
  .container { 
    grid-template-columns: 1fr; 
    padding: 0; 
  }
  .panel { 
    margin-top: 10px;  /* ✅ pushes panels down without breaking flow */
    position: static;  /* reset any previous positioning */
  }
  html,body{
    flex-direction: column; 
  }
}

/* small form success animation */
.toast {
position:fixed;
left:50%;
transform:translateX(-50%);
bottom:24px;
background: rgba(2,6,23,0.9);
color:#cfeefd;
padding:10px 18px;
border-radius:10px;
border:1px solid rgba(255,255,255,0.04);
box-shadow:0 8px 30px rgba(2,6,23,0.6);
display:none;
z-index:9999;
}
.toast.show { display:block; animation:pop .38s ease; }
@keyframes pop {
from { transform: translate(-50%, 8px) scale(.98); opacity:0 }
to { transform: translate(-50%, 0) scale(1); opacity:1 }
}


/* globals.css or in your main stylesheet */
::-webkit-scrollbar {
  width: 6px;              /* thin vertical scrollbar */
  height: 6px;             /* thin horizontal scrollbar */
}

::-webkit-scrollbar-thumb {
  background: rgba(100, 100, 100, 0.4); /* semi-transparent thumb */
  border-radius: 9999px;                 /* fully rounded */
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 100, 100, 0.7); /* darker on hover */
}

::-webkit-scrollbar-track {
  background: transparent;  /* no visible track */
}
/* Modal Background */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 50;
}
/* Modal Box */
.modal {
  background: linear-gradient(180deg, rgb(8, 8, 8) rgba(43, 1, 92, 0.918));
  backdrop-filter: blur(10px);
border-radius: var(--radius);
  color: rgb(184, 182, 182)9c9;
  padding: 24px;
  width: 90%;
  max-width: 400px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
  animation: fadeIn 0.3s ease;
}
.modal h2 {
  margin-top: 0;
  color: #4f46e5;
  text-align: center;
}
.modal label {
  display: block;
  margin-top: 12px;
  font-weight: bold;
}
.modal input {
  width: 100%;
  padding: 10px;
  margin-top: 6px;
  border-radius: 8px;
  font-size: 14px;
  border:1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.02);
  color: #eaf7ff;
  outline:none;
}

.close-btn {
  border: none;
  font-size: 20px;
  position: absolute;
  top: 5px;
  right: 5px;
  cursor: pointer;
  color: #ffffff;
}
.btn-submit-form {
  width: 100%;
  margin-top: 10px;
  background: linear-gradient(90deg,var(--accent1),var(--accent2));
  color: #2b2828;
  border: none;
  padding: 12px 20px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  transition: all 0.2s ease;
}
.btn-submit-form:hover {
  scale: 1.02;
  box-shadow: 0 12px 36px rgba(74,222,128,0.25);
  
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px);}
  to { opacity: 1; transform: translateY(0);}
}