:root{
  --bg:#030712;
  --bg2:#0b0f19;
  --card:rgba(17,24,39,0.45);
  --card-solid:#0f172a;
  --text:#f3f4f6;
  --muted:#9ca3af;
  --faint:#6b7280;
  --brand:#6366f1;
  --brand2:#a855f7;
  --cyan:#06b6d4;
  --gold:#f59e0b;
  --line:rgba(255,255,255,0.06);
  --line2:rgba(255,255,255,0.12);
  --radius:20px;
  --maxw:1160px;
  --shadow:0 30px 60px -20px rgba(0,0,0,.7);
  --nav-pad:clamp(20px,4vw,48px);
  --nav-h:76px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:76px}
body{
  font-family:'Inter', -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background-color: var(--bg);
  color:var(--text);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Scrollbar Styling */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: var(--bg);
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

a{color:inherit;text-decoration:none;word-wrap:break-word;overflow-wrap:break-word}
img{max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:6px}

.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:14px 28px;
  border-radius:12px;
  font-weight:600;
  font-size:15px;
  transition:transform .25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .25s ease, border-color .25s ease, color .25s ease, background-color .25s ease;
  cursor:pointer;
  border:none;
  line-height:1;
}
.btn-primary{
  background:linear-gradient(135deg, var(--brand), var(--brand2));
  color:#fff;
  box-shadow:0 8px 20px -6px rgba(99, 102, 241, 0.4);
}
.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 28px -4px rgba(99, 102, 241, 0.6);
}
.btn-ghost{
  border:1px solid rgba(255, 255, 255, 0.15);
  color:var(--text);
  background:rgba(255,255,255,.02);
}
.btn-ghost:hover{
  border-color:var(--brand);
  background: rgba(99, 102, 241, 0.05);
  color:#fff;
  transform:translateY(-2px);
}
.btn-gold{
  background:linear-gradient(135deg, var(--gold), #d9b066);
  color:#1a1407;
  font-weight:700;
  box-shadow: 0 8px 20px -6px rgba(233, 200, 135, 0.3);
}
.btn-gold:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 28px -4px rgba(233, 200, 135, 0.5);
}

/* NAV */
nav{
  position:sticky;
  top:0;
  z-index:100;
  backdrop-filter:blur(16px);
  background:rgba(3, 7, 18, 0.7);
  border-bottom:1px solid rgba(255, 255, 255, 0.06);
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
nav.scrolled {
  background:rgba(3, 7, 18, 0.85);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
}
.nav-inner{width:100%;margin:0;padding:0 var(--nav-pad);display:flex;align-items:center;justify-content:space-between;height:var(--nav-h)}
.logo{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  font-size:20px;
  letter-spacing:-.4px;
  flex:0 0 auto;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.logo .mark{
  width:32px;
  height:32px;
  border-radius:9px;
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  display:grid;
  place-items:center;
  font-size:16px;
  color:#fff;
  box-shadow:0 6px 18px rgba(99,102,241,.45);
  transition:transform .25s ease;
}
.logo:hover .mark{transform:rotate(8deg) scale(1.05)}
.logo .name{background:linear-gradient(135deg,#fff,#c9d4ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.links{display:flex;gap:30px;align-items:center;flex:0 0 auto}
.links a:not(.btn){color:var(--muted);font-size:15px;transition:color .2s;position:relative}
.links a:not(.btn)::after{content:'';position:absolute;left:0;bottom:-7px;width:0;height:2px;border-radius:2px;background:linear-gradient(135deg,var(--brand),var(--brand2));transition:width .25s ease}
.links a:not(.btn):hover,.links a.active:not(.btn){color:var(--text)}
.links a:not(.btn):hover::after,.links a.active:not(.btn)::after{width:100%}
.menu-btn{display:none;background:none;border:1px solid var(--line2);border-radius:10px;color:var(--text);width:42px;height:42px;font-size:20px;cursor:pointer}

@media(max-width:880px){
  .links{position:fixed;inset:var(--nav-h) 0 auto 0;flex-direction:column;gap:0;background:rgba(3,7,18,.97);backdrop-filter:blur(16px);border-bottom:1px solid var(--line);padding:10px 0;transform:translateY(-130%);transition:.3s;align-items:stretch;z-index:99;}
  .links.open{transform:translateY(0)}
  .links a:not(.btn){padding:14px var(--nav-pad)}
  .links a:not(.btn)::after{display:none}
  .links .btn{margin:10px var(--nav-pad)}
  .menu-btn{display:block}
}

/* Nav Dropdown styling */
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--card-solid);
  border: 1px solid var(--line2);
  border-radius: 10px;
  min-width: 180px;
  box-shadow: var(--shadow);
  z-index: 1000;
  padding: 8px 0;
  backdrop-filter: blur(12px);
}
.dropdown-content a {
  color: var(--muted) !important;
  padding: 10px 16px !important;
  display: block !important;
  font-size: 14px !important;
  transition: all 0.2s ease;
  text-align: left;
}
.dropdown-content a::after {
  display: none !important;
}
.dropdown-content a:hover {
  color: var(--text) !important;
  background-color: rgba(255, 255, 255, 0.05);
}
.dropdown:hover .dropdown-content {
  display: block;
}
@media (max-width: 880px) {
  .dropdown-content {
    position: static;
    display: none;
    transform: none;
    background: rgba(0,0,0,0.15);
    border: none;
    box-shadow: none;
    padding-left: 20px;
    min-width: 100%;
  }
  .dropdown:hover .dropdown-content {
    display: block;
  }
}

/* HERO */
.hero{padding:70px 0 90px;text-align:center;position:relative}
.tagpill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 16px;
  border:1px solid rgba(99, 102, 241, 0.25);
  border-radius:30px;
  font-size:13px;
  color:var(--text);
  background:rgba(99, 102, 241, 0.06);
  margin-bottom:28px;
  font-weight: 500;
}
.tagpill .dot{width:7px;height:7px;border-radius:50%;background:#06b6d4;box-shadow:0 0 10px #06b6d4}
.hero h1{
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size:clamp(36px,6.4vw,66px);
  line-height:1.05;
  font-weight:800;
  letter-spacing:-1.5px;
  max-width:920px;
  margin:0 auto;
}
.hero h1 span{background:linear-gradient(135deg,var(--brand),var(--brand2));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{color:var(--muted);font-size:clamp(17px,2.2vw,21px);max-width:680px;margin:26px auto 38px}
.hero .cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.proof{margin-top:50px;color:var(--faint);font-size:13px;letter-spacing:2px;text-transform:uppercase}

.stats{display:flex;gap:40px;justify-content:center;flex-wrap:wrap;margin-top:46px}
.stat{
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  padding: 18px 28px;
  border-radius: 16px;
  min-width: 180px;
  backdrop-filter: blur(8px);
}
.stat .n{
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size:32px;
  font-weight:800;
  background:linear-gradient(135deg, var(--gold), #ffde9c);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  letter-spacing: -1px;
  margin-bottom: 4px;
}
.stat .l{color:var(--muted);font-size:13px;font-weight: 500;}

/* SECTION */
section{padding:80px 0}
.eyebrow{
  color:var(--brand);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight:700;
  letter-spacing:1.5px;
  text-transform:uppercase;
  font-size:13px;
}
h2{
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size:clamp(28px,4.4vw,44px);
  font-weight:800;
  margin:12px 0 16px;
  letter-spacing:-.8px;
  line-height:1.1;
}
.lead{color:var(--muted);font-size:18px;max-width:680px}
.head-center{text-align:center}.head-center .lead{margin:0 auto}

.grid{display:grid;gap:22px;margin-top:46px}
.g3{grid-template-columns:repeat(3,1fr)}.g2{grid-template-columns:repeat(2,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:980px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}}

.card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease, box-shadow 0.4s ease, background 0.4s ease;
  backdrop-filter: blur(12px) saturate(160%);
  display: flex;
  flex-direction: column;
}
.card:hover{
  transform: translateY(-8px) scale(1.01);
  border-color: rgba(99, 102, 241, 0.3);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
  box-shadow: 0 20px 40px -15px rgba(99, 102, 241, 0.12), var(--shadow);
}
.card .ico{
  width:52px;
  height:52px;
  border-radius:14px;
  background:linear-gradient(135deg,rgba(99,102,241,.18),rgba(168,85,247,.18));
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:26px;
  margin-bottom:18px;
  border:1px solid rgba(255,255,255,0.06);
  transition: transform 0.3s ease;
}
.card:hover .ico {
  transform: scale(1.08) rotate(3deg);
}
.card h3{
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size:19px;
  margin-bottom:8px;
  font-weight: 700;
}
.card p{color:var(--muted);font-size:15px;line-height: 1.6;}
.tier-label{
  display:inline-block;
  font-size:12px;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:14px;
  opacity:.9;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

/* STEPS */
.step-num{
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size:13px;
  font-weight:800;
  letter-spacing:1px;
  color:var(--brand);
  margin-bottom:6px;
}

/* FEATURES strip */
.feature-row{
  display:flex;
  gap:14px;
  align-items:flex-start;
  background: rgba(255, 255, 255, 0.01);
  border: 1px solid rgba(255, 255, 255, 0.03);
  padding: 24px;
  border-radius: 16px;
  backdrop-filter: blur(8px);
  transition: border-color 0.3s ease, background 0.3s ease;
}
.feature-row:hover {
  border-color: rgba(99, 102, 241, 0.15);
  background: rgba(255, 255, 255, 0.02);
}
.feature-row .tick{flex:0 0 auto;width:26px;height:26px;border-radius:8px;background:rgba(99,102,241,.18);color:var(--brand);display:grid;place-items:center;font-weight:800;font-size:14px;margin-top:2px}
.feature-row p{color:var(--muted);font-size:14px;}
.feature-row strong{color:var(--text);display:block;font-size:16px;margin-bottom:4px;font-family: 'Plus Jakarta Sans', sans-serif;}

/* INTEGRATIONS */
.chips{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px;justify-content:center}
.chip{border:1px solid var(--line2);border-radius:12px;padding:12px 20px;color:var(--muted);font-size:15px;font-weight:500;background:rgba(255,255,255,.02);transition:.25s}
.chip:hover{color:var(--text);border-color:var(--brand);transform:translateY(-2px);background: rgba(99,102,241,0.05);}

/* PRICING */
.price{
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size:42px;
  font-weight:800;
  margin:8px 0;
  letter-spacing:-1px;
  background: linear-gradient(135deg, #fff, #b9c2d6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.price small{font-size:15px;color:var(--muted);font-weight:500}

.featured{
  border-color: rgba(168, 85, 247, 0.4);
  box-shadow: 0 0 50px rgba(168, 85, 247, 0.15);
  background: linear-gradient(180deg, rgba(168, 85, 247, 0.06), rgba(99, 102, 241, 0.03));
}
.featured:hover {
  border-color: rgba(168, 85, 247, 0.6);
  box-shadow: 0 20px 50px -10px rgba(168, 85, 247, 0.22), var(--shadow);
  background: linear-gradient(180deg, rgba(168, 85, 247, 0.08), rgba(99, 102, 241, 0.05));
}
.badge{
  position:absolute;
  top:-13px;
  left:50%;
  transform:translateX(-50%);
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  padding:5px 16px;
  border-radius:20px;
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
  color:#fff;
  box-shadow: 0 4px 12px rgba(168, 85, 247, 0.4);
}
ul.feat{list-style:none;margin:20px 0;display:flex;flex-direction:column;gap:11px;flex-grow:1}
ul.feat li{color:var(--muted);font-size:15px;display:flex;gap:10px;align-items:flex-start}
ul.feat li::before{content:'\2713';color:var(--brand);font-weight:800;flex:0 0 auto}
.price-note{text-align:center;color:var(--faint);font-size:14px;margin-top:26px}

/* SECURITY */
.badges{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px;justify-content:center}
.pill{border:1px solid var(--line2);border-radius:30px;padding:11px 20px;color:var(--muted);font-size:14px;background:rgba(255,255,255,.02);transition: border-color 0.3s ease;}
.pill:hover{border-color: rgba(99, 102, 241, 0.3); color: var(--text);}

/* ABOUT */
.founder{
  display:flex;
  gap:30px;
  align-items:center;
  flex-wrap:wrap;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:36px;
  margin-top:30px;
  backdrop-filter: blur(12px);
}
.avatar{
  width:104px;
  height:104px;
  border-radius:24px;
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:36px;
  font-weight:800;
  color:#fff;
  flex:0 0 auto;
  box-shadow:0 14px 40px rgba(99,102,241,.4);
  font-family: 'Plus Jakarta Sans', sans-serif;
}

/* TESTIMONIALS */
.quote{font-size:16px;color:var(--text);font-style:italic}
.who{display:flex;align-items:center;gap:12px;margin-top:18px}
.who .a{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--gold),#d9b066);display:grid;place-items:center;font-weight:800;color:#1a1407;font-size:15px;font-family: 'Plus Jakarta Sans', sans-serif;}
.who .nm{font-weight:600;font-size:15px;font-family: 'Plus Jakarta Sans', sans-serif;}.who .rl{color:var(--faint);font-size:13px}
.stars{color:var(--gold);letter-spacing:2px;margin-bottom:12px}

/* FAQ */
details{background:rgba(255, 255, 255, 0.015);border:1px solid var(--line);border-radius:14px;padding:20px 24px;margin-bottom:14px;transition:.25s;backdrop-filter: blur(8px);}
details[open]{border-color:rgba(99, 102, 241, 0.25); background: rgba(99, 102, 241, 0.02);}
details summary{cursor:pointer;font-weight:600;font-size:17px;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;font-family: 'Plus Jakarta Sans', sans-serif;}
details summary::-webkit-details-marker{display:none}
details summary::after{content:'+';color:var(--brand);font-size:24px;font-weight:400;transition:.2s}
details[open] summary::after{transform:rotate(45deg); color: var(--brand2);}
details p{color:var(--muted);margin-top:12px}

/* CTA */
.cta-box{
  background:linear-gradient(135deg,rgba(99, 102, 241, 0.12),rgba(168, 85, 247, 0.08));
  border:1px solid rgba(255, 255, 255, 0.08);
  border-radius:26px;
  padding:64px 30px;
  text-align:center;
  position:relative;
  overflow:hidden;
  backdrop-filter: blur(16px);
}
form{display:flex;gap:12px;max-width:500px;margin:28px auto 0;flex-wrap:wrap;justify-content:center}
input{flex:1;min-width:220px;padding:15px 18px;border-radius:12px;border:1px solid var(--line2);background:rgba(3, 7, 18, 0.6);color:var(--text);font-size:15px;outline:none;transition:.2s}
input:focus{border-color:var(--brand); box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.25);}
.form-msg{margin-top:16px;font-size:15px;min-height:22px}
.form-msg.ok{color:#4ade80}

/* FOOTER */
footer{border-top:1px solid var(--line);padding:56px 0 40px;color:var(--muted);font-size:14px;margin-top:30px;background: rgba(3, 7, 18, 0.4);position: relative;}
.foot-grid{display:flex;justify-content:space-between;flex-wrap:wrap;gap:40px}
.foot-col strong{color:var(--text);display:block;margin-bottom:10px;font-family: 'Plus Jakarta Sans', sans-serif;}
.foot-col a,.foot-col button.linklike{color:var(--muted);display:block;margin:7px 0;background:none;border:none;font-size:14px;cursor:pointer;text-align:left;font-family:inherit;padding:0}
.foot-col a:hover,.foot-col button.linklike:hover{color:var(--text)}
.foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;margin-top:44px;padding-top:24px;border-top:1px solid var(--line);color:var(--faint)}

/* MODAL (legal) */
.modal{position:fixed;inset:0;z-index:200;display:none;align-items:flex-start;justify-content:center;padding:40px 16px;background:rgba(3, 7, 18, 0.8);backdrop-filter:blur(8px);overflow-y:auto}
.modal:target{display:flex}
.modal-card{background:var(--card-solid);border:1px solid var(--line2);border-radius:20px;max-width:760px;width:100%;padding:40px;box-shadow:var(--shadow);margin:auto}
.modal-card h3{font-size:26px;margin-bottom:6px;font-family: 'Plus Jakarta Sans', sans-serif;}
.modal-card .upd{color:var(--faint);font-size:13px;margin-bottom:22px}
.modal-card h4{margin:22px 0 8px;font-size:17px;color:var(--text);font-family: 'Plus Jakarta Sans', sans-serif;}
.modal-card p,.modal-card li{color:var(--muted);font-size:15px}
.modal-card ul{margin:8px 0 8px 20px;display:flex;flex-direction:column;gap:6px}
.modal-close{float:right;color:var(--muted);font-size:26px;text-decoration:none;line-height:1;margin-top:-6px}
.modal-close:hover{color:#fff}

/* BACK TO TOP */
.to-top{position:fixed;right:22px;bottom:22px;z-index:90;width:46px;height:46px;border-radius:50%;border:1px solid var(--line2);background:rgba(15, 23, 42, 0.85);color:var(--text);font-size:20px;cursor:pointer;display:grid;place-items:center;opacity:0;pointer-events:none;transform:translateY(12px);transition:opacity .3s ease,transform .3s ease,border-color .25s ease;backdrop-filter:blur(8px)}
.to-top.show{opacity:1;pointer-events:auto;transform:none}
.to-top:hover{border-color:var(--brand);color:#fff}

/* reveal */
.reveal{opacity:0;transform:translateY(30px) scale(0.98);transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}.to-top{transition:opacity .2s}html{scroll-behavior:auto}}

/* Mesh backdrop glows & interactive background canvas */
.mesh-glows {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -3;
  overflow: hidden;
  pointer-events: none;
}
.glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.15;
  mix-blend-mode: screen;
  animation: drift 25s infinite alternate ease-in-out;
}
.glow-1 {
  top: -10%;
  right: -10%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, var(--brand), transparent);
}
.glow-2 {
  bottom: -10%;
  left: -10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, var(--brand2), transparent);
  animation-delay: -5s;
}
.glow-3 {
  top: 40%;
  left: 30%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, var(--cyan), transparent);
  opacity: 0.08;
  animation-delay: -10s;
}
@keyframes drift {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(10%, 10%) scale(1.1); }
  100% { transform: translate(-10%, -5%) scale(0.9); }
}

#bg-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  pointer-events: none;
}

/* Interactive Cursor Glow */
#cursor-glow {
  position: fixed;
  top: 0;
  left: 0;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.08), transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  transform: translate(-50%, -50%);
  transition: width 0.3s ease, height 0.3s ease;
}

/* Hero visual terminal container styling */
.hero-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  align-items: center;
  text-align: left;
  padding: 20px 0 40px;
}
@media (max-width: 980px) {
  .hero-grid {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 50px;
  }
}
.hero-content {
  display: flex;
  flex-direction: column;
}
@media (max-width: 980px) {
  .hero-content .tagpill, .hero-content .cta {
    align-self: center;
    justify-content: center;
  }
}

.terminal-container {
  background: rgba(3, 7, 18, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 30px rgba(99, 102, 241, 0.05);
  overflow: hidden;
  height: 330px;
  display: flex;
  flex-direction: column;
  font-family: 'Courier New', Courier, monospace;
  text-align: left;
  position: relative;
  backdrop-filter: blur(12px);
}
.terminal-header {
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.terminal-header .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.terminal-header .dot.red { background: #ef4444; }
.terminal-header .dot.yellow { background: #f59e0b; }
.terminal-header .dot.green { background: #10b981; }
.terminal-title {
  color: var(--muted);
  font-size: 11px;
  margin-left: 8px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.terminal-body {
  padding: 20px;
  flex: 1 1 auto;
  overflow-y: auto;
  font-size: 13px;
  line-height: 1.5;
  color: #4ade80;
}
.terminal-body p {
  margin-bottom: 8px;
}
.terminal-body .command { color: #f3f4f6; }
.terminal-body .info { color: #60a5fa; }
.terminal-body .success { color: #34d399; }
.terminal-body .warning { color: #fbbf24; }

/* ROI Calculator */
.calculator-box {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 40px;
  margin-top: 46px;
  backdrop-filter: blur(16px);
  text-align: left;
}
@media (max-width: 768px) {
  .calculator-box {
    grid-template-columns: 1fr;
  }
}
.calculator-controls {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.control-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.control-group label {
  display: flex;
  justify-content: space-between;
  font-weight: 700;
  font-size: 16px;
  color: var(--text);
}
.val-display {
  color: var(--brand);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 17px;
}
.control-group input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 5px;
  background: var(--line2);
  outline: none;
  transition: background 0.3s;
}
.control-group input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  cursor: pointer;
  box-shadow: 0 0 10px rgba(99, 102, 241, 0.5);
  transition: transform 0.1s;
}
.control-group input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}
.control-group .sub-label {
  font-size: 12px;
  color: var(--faint);
}
.calculator-results {
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: center;
}
.result-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  padding: 24px;
  border-radius: 16px;
  text-align: center;
  backdrop-filter: blur(8px);
}
.result-card.glowing {
  border-color: rgba(99, 102, 241, 0.25);
  background: linear-gradient(180deg, rgba(99, 102, 241, 0.06), rgba(168, 85, 247, 0.03));
  box-shadow: 0 10px 30px -10px rgba(99, 102, 241, 0.15);
}
.result-label {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
  margin-bottom: 8px;
  font-weight: 500;
}
.result-value {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 38px;
  font-weight: 800;
  color: var(--text);
}
.result-card.glowing .result-value {
  background: linear-gradient(135deg, #fff, var(--brand), var(--cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Connection Hub */
.hub-container {
  margin-top: 50px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 50px 30px;
  text-align: center;
  position: relative;
  backdrop-filter: blur(12px);
}
.hub-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 30px;
  max-width: 750px;
  margin: 0 auto;
  align-items: center;
  justify-items: center;
  position: relative;
}
@media (max-width: 768px) {
  .hub-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    gap: 20px;
  }
}
.hub-tool {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--line2);
  border-radius: 16px;
  padding: 20px;
  width: 140px;
  height: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.hub-tool:hover {
  transform: translateY(-5px);
  border-color: var(--brand);
  background: rgba(99, 102, 241, 0.06);
  box-shadow: 0 10px 25px -10px rgba(99, 102, 241, 0.25);
}
.hub-icon {
  font-size: 32px;
  transition: transform 0.3s ease;
}
.hub-tool:hover .hub-icon {
  transform: scale(1.15) rotate(4deg);
}
.hub-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.hub-core {
  position: relative;
  width: 160px;
  height: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  z-index: 2;
  grid-row: 2;
  grid-column: 2;
}
@media (max-width: 768px) {
  .hub-core {
    width: 100%;
    height: 120px;
    order: -1;
    grid-row: auto;
    grid-column: span 2;
  }
}
.core-inner {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 28px;
  box-shadow: 0 0 30px rgba(99, 102, 241, 0.6);
  position: relative;
}
.core-pulse {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 2px solid var(--brand);
  opacity: 0.8;
  z-index: -1;
  animation: corePulse 3s infinite linear;
}
@keyframes corePulse {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
  100% { transform: translate(-50%, -50%) scale(2.2); opacity: 0; }
}
.core-label {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.hub-tooltip {
  margin-top: 36px;
  font-size: 15px;
  color: var(--muted);
  min-height: 24px;
  padding: 10px 20px;
  background: rgba(255, 255, 255, 0.01);
  border-top: 1px solid rgba(255, 255, 255, 0.03);
  display: inline-block;
  border-radius: 30px;
}

/* Currency Selector Styling */
.currency-selector {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.currency-btn {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--line2);
  color: var(--muted);
  padding: 8px 18px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}
.currency-btn:hover {
  color: var(--text);
  border-color: rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.05);
}
.currency-btn.active {
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
}

/* Pricing Toggle Switch Styling */
.pricing-toggle-container {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 30px auto 10px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--line2);
  padding: 8px 20px;
  border-radius: 30px;
}
.toggle-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--muted);
  transition: color 0.3s ease;
}
.toggle-label.active {
  color: var(--text);
}
.discount-badge {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: 4px;
  border: 1px solid rgba(16, 185, 129, 0.25);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.switch-container {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 26px;
}
.switch-container input {
  opacity: 0;
  width: 0;
  height: 0;
}
.switch-container .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--line2);
  transition: .4s;
  border-radius: 34px;
}
.switch-container .slider::before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 4px;
  bottom: 4px;
  background-color: var(--text);
  transition: .4s;
  border-radius: 50%;
}
.switch-container input:checked + .slider {
  background: linear-gradient(135deg, var(--brand), var(--brand2));
}
.switch-container input:checked + .slider::before {
  transform: translateX(24px);
  background-color: #fff;
}

/* ==========================================================================
   MOBILE & RESPONSIVE LAYOUT REFINE CORRECTIONS
   ========================================================================== */

/* Global container overflow safeguard */
body, html {
  max-width: 100%;
  overflow-x: hidden;
}

/* Base button responsiveness */
.btn {
  max-width: 100%;
  box-sizing: border-box;
}

/* Media Query for screens 768px and down */
@media (max-width: 768px) {
  /* Integration Hub Fluid Grid */
  .hub-container {
    padding: 30px 16px;
  }
  .hub-tool {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    padding: 15px;
    gap: 8px;
  }
  .hub-tool .hub-icon {
    font-size: 26px;
  }
  .hub-tool .hub-name {
    font-size: 11px;
    text-align: center;
    line-height: 1.2;
  }
  
  /* ROI Calculator padding */
  .calculator-box {
    padding: 24px 20px;
    gap: 24px;
  }
}

/* Media Query for screens 600px and down */
@media (max-width: 600px) {
  /* Founder Card responsiveness */
  .founder {
    padding: 24px 20px;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
  }
  .founder .avatar {
    margin-bottom: 8px;
  }
  .founder .btn-ghost {
    display: inline-flex;
    justify-content: center;
    width: 100%;
    padding: 12px 16px;
    font-size: 13px;
    white-space: normal;
    word-break: break-all;
    overflow-wrap: break-word;
    line-height: 1.3;
  }
  
  /* Modal Card padding */
  .modal-card {
    padding: 24px 20px;
  }
}

/* Media Query for screens 500px and down */
@media (max-width: 500px) {
  /* Form stacking */
  .cta-box form {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .cta-box form input {
    width: 100%;
    min-width: 0;
  }
  .cta-box form .btn {
    width: 100%;
    justify-content: center;
  }
}

/* Media Query for screens 480px and down */
@media (max-width: 480px) {
  :root {
    --nav-pad: 16px;
  }
}


/* ==========================================================================
   MODERN INTERACTION ENHANCEMENTS (app.js)
   ========================================================================== */

/* Scroll progress bar */
#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  z-index: 200;
  background: linear-gradient(90deg, var(--brand), var(--brand2), var(--cyan));
  box-shadow: 0 0 12px rgba(99, 102, 241, 0.6);
  transition: width 0.1s linear;
  pointer-events: none;
}

/* Smooth transform handling so JS tilt/magnet feel fluid */
.card {
  transform-style: preserve-3d;
  will-change: transform;
}
.btn-primary,
.btn-gold {
  will-change: transform;
}

/* Button sheen sweep + ripple */
.btn-fx {
  position: relative;
  overflow: hidden;
}
.btn-fx::before {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    100deg,
    transparent,
    rgba(255, 255, 255, 0.28),
    transparent
  );
  transform: skewX(-18deg);
  transition: left 0.6s ease;
  pointer-events: none;
}
.btn-fx:hover::before {
  left: 140%;
}
.btn-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  transform: scale(0);
  animation: ripple 0.6s ease-out;
  pointer-events: none;
}
@keyframes ripple {
  to {
    transform: scale(2.4);
    opacity: 0;
  }
}

/* Animated gradient text for hero headline + brand name */
.hero h1 span,
.logo .name {
  background-size: 220% auto;
  animation: textShimmer 6s linear infinite;
}
@keyframes textShimmer {
  0% { background-position: 0% center; }
  100% { background-position: 220% center; }
}

/* Animated gradient ring on the featured pricing card */
.featured {
  position: relative;
}
.featured::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    130deg,
    rgba(168, 85, 247, 0.6),
    rgba(99, 102, 241, 0.2),
    rgba(6, 182, 212, 0.5),
    rgba(168, 85, 247, 0.6)
  );
  background-size: 300% 300%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: borderFlow 8s ease infinite;
  pointer-events: none;
}
@keyframes borderFlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Success modal animated checkmark */
.success-check {
  width: 72px;
  height: 72px;
  margin: 0 auto 16px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 36px;
  color: #fff;
  background: linear-gradient(135deg, #10b981, #34d399);
  box-shadow: 0 10px 30px -8px rgba(16, 185, 129, 0.6);
  animation: popIn 0.5s cubic-bezier(0.16, 1, 0.45, 1.4);
}
@keyframes popIn {
  0% { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* Slightly springier reveal for a more premium feel */
.reveal {
  transition:
    opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Floating tag pill in hero */
.tagpill {
  animation: floatY 4s ease-in-out infinite;
}
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

/* Honeypot field (spam trap) stays invisible */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  opacity: 0 !important;
  height: 0 !important;
  width: 0 !important;
  pointer-events: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .hero h1 span,
  .logo .name,
  .tagpill,
  .featured::after,
  .btn-fx::before {
    animation: none;
  }
  #scroll-progress { transition: none; }
}