@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=DM+Sans:wght@300;400;500;700&display=swap');

:root {
  --bg: #04060f;
  --bg2: #080c1a;
  --bg3: #0d1224;
  --card: #0f1528;
  --card2: #141a30;
  --border: rgba(99,135,255,0.12);
  --border2: rgba(99,135,255,0.28);
  --accent: #6387ff;
  --accent2: #00e5c3;
  --accent3: #ff6b8a;
  --accent4: #ffd166;
  --text: #eef0ff;
  --muted: #7880a4;
  --muted2: #3e4466;
  --r: 14px;
  --r2: 10px;
  --r3: 8px;
  --shadow: 0 8px 40px rgba(99,135,255,0.12);
}

* { margin:0; padding:0; box-sizing:border-box; scroll-behavior:smooth; }
::selection { background:var(--accent); color:#fff; }
body { font-family:'DM Sans',sans-serif; background:var(--bg); color:var(--text); overflow-x:hidden; }
h1,h2,h3,h4,h5 { font-family:'Syne',sans-serif; }
a { text-decoration:none; }
img { max-width:100%; }
::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:var(--bg2); }
::-webkit-scrollbar-thumb { background:var(--accent); border-radius:10px; }

/* NAV */
nav {
  position:fixed; top:0; left:0; right:0; z-index:999;
  height:68px; padding:0 5%;
  display:flex; align-items:center; justify-content:space-between;
  background:rgba(4,6,15,0.88); backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  transition:all 0.3s;
}
.logo { font-family:'Syne',sans-serif; font-size:21px; font-weight:800; color:var(--text); }
.logo span { color:var(--accent); }
.nav-links { display:flex; align-items:center; gap:6px; }
.nav-links a {
  color:var(--muted); font-size:13.5px; font-weight:500; padding:7px 12px;
  border-radius:var(--r3); transition:all 0.2s; position:relative;
}
.nav-links a:hover, .nav-links a.active { color:var(--text); background:rgba(99,135,255,0.1); }
.nav-links a.active { color:var(--accent); }
.nav-cta {
  padding:9px 22px; background:var(--accent); color:#fff !important;
  border-radius:50px; font-weight:700 !important; font-size:13px !important;
  box-shadow:0 0 20px rgba(99,135,255,0.3); transition:all 0.25s !important;
  background:var(--accent) !important;
}
.nav-cta:hover { transform:translateY(-1px); box-shadow:0 4px 30px rgba(99,135,255,0.5) !important; background:#7b9fff !important; }
.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:5px; }
.hamburger span { width:24px; height:2px; background:var(--text); border-radius:2px; transition:all 0.3s; display:block; }
.mobile-menu {
  display:none; position:fixed; top:68px; left:0; right:0;
  background:var(--bg2); border-bottom:1px solid var(--border);
  padding:16px 5%; z-index:998; flex-direction:column; gap:4px;
}
.mobile-menu.open { display:flex; }
.mobile-menu a { color:var(--muted); font-size:15px; padding:10px 12px; border-radius:var(--r3); border-bottom:1px solid var(--border); }
.mobile-menu a:hover { color:var(--text); background:rgba(99,135,255,0.08); }
.mob-cta { background:var(--accent) !important; color:#fff !important; border-radius:var(--r3) !important; border:none !important; margin-top:6px; text-align:center; font-weight:700 !important; }

/* COMMON SECTION */
.page-hero {
  padding:130px 5% 80px; position:relative; overflow:hidden;
  min-height:400px; display:flex; align-items:center;
}
.page-hero-bg { position:absolute; inset:0; pointer-events:none; }
.orb { position:absolute; border-radius:50%; filter:blur(80px); opacity:0.18; animation:orbFloat 9s ease-in-out infinite; }
.orb1 { width:500px; height:500px; background:var(--accent); top:-150px; right:-100px; }
.orb2 { width:350px; height:350px; background:var(--accent2); bottom:-50px; left:-80px; animation-delay:-5s; opacity:0.12; }
.grid-pat {
  position:absolute; inset:0;
  background-image:linear-gradient(rgba(99,135,255,0.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(99,135,255,0.04) 1px,transparent 1px);
  background-size:55px 55px;
}
@keyframes orbFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-25px)} }

section { padding:80px 5%; }
.section-tag {
  display:inline-block; font-size:11px; font-weight:700; letter-spacing:2px;
  text-transform:uppercase; color:var(--accent); background:rgba(99,135,255,0.1);
  border:1px solid rgba(99,135,255,0.2); padding:5px 14px; border-radius:50px; margin-bottom:16px;
}
.section-title { font-size:clamp(28px,4vw,46px); font-weight:700; line-height:1.12; margin-bottom:14px; }
.section-sub { font-size:16px; color:var(--muted); line-height:1.65; max-width:560px; }
.sec-header { margin-bottom:48px; }
.sec-header.center { text-align:center; }
.sec-header.center .section-sub { margin:0 auto; }

/* BUTTONS */
.btn-p { display:inline-flex; align-items:center; gap:8px; padding:13px 30px; background:var(--accent); color:#fff; border-radius:50px; font-size:14px; font-weight:700; transition:all 0.25s; box-shadow:0 0 25px rgba(99,135,255,0.25); border:none; cursor:pointer; font-family:'DM Sans',sans-serif; }
.btn-p:hover { transform:translateY(-2px); box-shadow:0 8px 35px rgba(99,135,255,0.45); background:#7b9fff; }
.btn-o { display:inline-flex; align-items:center; gap:8px; padding:13px 30px; background:transparent; color:var(--text); border:1px solid var(--border2); border-radius:50px; font-size:14px; font-weight:600; transition:all 0.25s; cursor:pointer; font-family:'DM Sans',sans-serif; }
.btn-o:hover { background:rgba(99,135,255,0.1); border-color:var(--accent); }
.btn-sm { padding:8px 20px; font-size:13px; }

/* CARDS */
.card-base { background:var(--card); border:1px solid var(--border); border-radius:var(--r); transition:all 0.3s; }
.card-base:hover { border-color:var(--accent); box-shadow:var(--shadow); transform:translateY(-3px); }

/* BADGES */
.badge { display:inline-flex; align-items:center; padding:3px 11px; border-radius:20px; font-size:11px; font-weight:600; }
.badge-g { background:rgba(0,229,195,0.1); color:var(--accent2); }
.badge-b { background:rgba(99,135,255,0.15); color:var(--accent); }
.badge-r { background:rgba(255,107,138,0.12); color:var(--accent3); }
.badge-y { background:rgba(255,209,102,0.12); color:var(--accent4); }

/* FOOTER */
footer { background:var(--bg2); border-top:1px solid var(--border); padding:50px 5% 28px; }
.footer-grid { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; margin-bottom:40px; }
.footer-brand .logo { display:block; margin-bottom:12px; }
.footer-brand p { font-size:13.5px; color:var(--muted); line-height:1.65; }
.foot-socials { display:flex; gap:9px; margin-top:18px; }
.foot-soc { width:36px; height:36px; border-radius:50%; background:var(--card); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:15px; transition:all 0.2s; }
.foot-soc:hover { background:rgba(99,135,255,0.15); border-color:var(--accent); }
.footer-col h5 { font-family:'Syne',sans-serif; font-size:13px; font-weight:600; margin-bottom:14px; color:var(--text); }
.footer-col a { display:block; color:var(--muted); font-size:13.5px; margin-bottom:9px; transition:color 0.2s; }
.footer-col a:hover { color:var(--accent); }
.foot-bottom { border-top:1px solid var(--border); padding-top:22px; display:flex; align-items:center; justify-content:space-between; }
.foot-bottom p { font-size:13px; color:var(--muted2); }
.foot-bottom span { color:var(--accent3); }

/* WHATSAPP CHAT */
.wa-fab { position:fixed; bottom:28px; right:28px; z-index:900; }
.wa-btn { width:56px; height:56px; border-radius:50%; background:#25d366; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:26px; box-shadow:0 4px 20px rgba(37,211,102,0.4); transition:all 0.3s; }
.wa-btn:hover { transform:scale(1.1); }
.wa-popup { display:none; position:absolute; bottom:70px; right:0; width:300px; background:var(--bg2); border:1px solid var(--border2); border-radius:var(--r); overflow:hidden; box-shadow:0 16px 50px rgba(0,0,0,0.4); }
.wa-popup.open { display:block; }
.wa-head { background:#075e54; padding:14px 16px; display:flex; align-items:center; gap:10px; }
.wa-avatar { width:38px; height:38px; border-radius:50%; background:#128c7e; display:flex; align-items:center; justify-content:center; font-size:18px; }
.wa-head-info strong { display:block; font-size:14px; color:#fff; }
.wa-head-info span { font-size:11px; color:rgba(255,255,255,0.7); }
.wa-messages { padding:16px; background:#ece5dd; min-height:120px; }
.wa-msg { background:#fff; border-radius:0 10px 10px 10px; padding:10px 14px; font-size:13px; color:#303030; max-width:85%; box-shadow:0 1px 2px rgba(0,0,0,0.1); margin-bottom:6px; }
.wa-msg .wa-time { font-size:10px; color:#999; text-align:right; margin-top:4px; }
.wa-input-area { padding:10px; background:var(--bg3); display:flex; gap:8px; }
.wa-input { flex:1; padding:9px 12px; background:var(--card); border:1px solid var(--border); border-radius:var(--r3); color:var(--text); font-size:13px; outline:none; font-family:'DM Sans',sans-serif; }
.wa-send { width:36px; height:36px; border-radius:50%; background:#25d366; border:none; cursor:pointer; font-size:16px; display:flex; align-items:center; justify-content:center; }

/* BACK TO TOP */
.btt { position:fixed; bottom:94px; right:30px; width:42px; height:42px; border-radius:50%; background:var(--accent); color:#fff; border:none; cursor:pointer; font-size:18px; z-index:800; transition:all 0.3s; opacity:0; transform:translateY(16px); box-shadow:0 4px 16px rgba(99,135,255,0.35); }
.btt.show { opacity:1; transform:translateY(0); }
.btt:hover { background:#7b9fff; transform:translateY(-2px); }

/* TOAST */
.toast { position:fixed; bottom:96px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--card2); border:1px solid var(--accent2); color:var(--accent2); padding:11px 24px; border-radius:var(--r2); font-size:13.5px; font-weight:600; z-index:9999; opacity:0; transition:all 0.35s; white-space:nowrap; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* RESPONSIVE */
@media(max-width:1024px) { .footer-grid { grid-template-columns:1fr 1fr; } }
@media(max-width:768px) {
  .nav-links { display:none; }
  .hamburger { display:flex; }
  .footer-grid { grid-template-columns:1fr; gap:28px; }
  .page-hero { padding:110px 5% 60px; }
  section { padding:60px 5%; }
}