/* ============================================================
   ASKomp Visual — Cinematic Dark Agency Theme v2.0
   Aesthetic: "Altitude & Precision" — dark sky, electric blue,
   amber gold. Bebas Neue headlines + DM Sans body.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,600;1,9..40,300&family=Space+Mono:wght@400;700&display=swap');

/* ── Variables ─────────────────────────────────────────────── */
:root {
  --bg:        #07090F;
  --bg2:       #0C0F1A;
  --bg3:       #111624;
  --surface:   #161C2E;
  --border:    rgba(255,255,255,.07);
  --blue:      #1B6DFF;
  --blue-glow: rgba(27,109,255,.35);
  --amber:     #F5A800;
  --amber-dim: rgba(245,168,0,.15);
  --white:     #F0F2F8;
  --muted:     #6B7A9C;
  --red:       #FF3B3B;
  --radius:    12px;
  --radius-lg: 20px;
  --font-head: 'Bebas Neue', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --font-mono: 'Space Mono', monospace;
  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
}

/* ── Reset ─────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:16px; }
body {
  background: var(--bg);
  color: var(--white);
  font-family: var(--font-body);
  line-height:1.6;
  overflow-x:hidden;
}
img { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
button { cursor:pointer; border:none; background:none; font-family:inherit; }

/* ── Noise texture overlay ─────────────────────────────────── */
body::before {
  content:'';
  position:fixed; inset:0; pointer-events:none; z-index:999;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");
  opacity:.4;
}

/* ── Scrollbar ─────────────────────────────────────────────── */
::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--blue); border-radius:4px; }

/* ── Typography ────────────────────────────────────────────── */
h1,h2,h3 { font-family:var(--font-head); letter-spacing:.03em; line-height:1.05; }
h1 { font-size:clamp(3rem,8vw,7rem); }
h2 { font-size:clamp(2rem,5vw,4rem); }
h3 { font-size:clamp(1.3rem,3vw,2rem); }
p { color:rgba(240,242,248,.75); }
.mono { font-family:var(--font-mono); font-size:.75rem; letter-spacing:.1em; color:var(--muted); }

/* ── Section label ─────────────────────────────────────────── */
.section-label {
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.15em;
  color:var(--blue); text-transform:uppercase; margin-bottom:1rem;
}
.section-label::before { content:''; width:24px; height:1px; background:var(--blue); }

/* ── Buttons ───────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.75rem 1.75rem; border-radius:50px;
  font-size:.875rem; font-weight:600; letter-spacing:.05em;
  transition:all .25s var(--ease); white-space:nowrap;
}
.btn-primary {
  background:var(--blue); color:#fff;
  box-shadow:0 0 20px var(--blue-glow);
}
.btn-primary:hover { background:#3D89FF; transform:translateY(-2px); box-shadow:0 0 35px var(--blue-glow); }
.btn-outline {
  border:1px solid rgba(240,242,248,.2); color:var(--white);
}
.btn-outline:hover { border-color:var(--blue); color:var(--blue); }
.btn-amber { background:var(--amber); color:#000; font-weight:700; }
.btn-amber:hover { background:#FFB929; transform:translateY(-2px); }
.btn-wa { background:#25D366; color:#fff; }
.btn-wa:hover { background:#1EBE58; transform:translateY(-2px); }

/* ── Navbar ────────────────────────────────────────────────── */
#navbar {
  position:fixed; top:0; width:100%; z-index:900;
  padding:1.25rem 2rem;
  display:flex; align-items:center; justify-content:space-between;
  transition:all .3s var(--ease);
}
#navbar.scrolled {
  background:rgba(7,9,15,.92);
  backdrop-filter:blur(16px);
  padding:.9rem 2rem;
  border-bottom:1px solid var(--border);
}
.nav-brand { display:flex; align-items:center; gap:.75rem; }
.nav-logo {
  width:36px; height:36px; border-radius:8px;
  background:linear-gradient(135deg,var(--blue),#0A4ECC);
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem;
}
.nav-name { font-family:var(--font-head); font-size:1.4rem; letter-spacing:.05em; }
.nav-links { display:flex; align-items:center; gap:2rem; }
.nav-links a { font-size:.85rem; font-weight:500; color:var(--muted); transition:color .2s; }
.nav-links a:hover, .nav-links a.active { color:var(--white); }
.nav-cta { display:flex; gap:.75rem; }
#navToggle {
  display:none; font-size:1.4rem; color:var(--white);
  background:none; border:none; cursor:pointer;
}

/* ── Mobile nav ─────────────────────────────────────────────── */
#mobileNav {
  display:none; position:fixed; inset:0; z-index:950;
  background:var(--bg2); flex-direction:column;
  align-items:center; justify-content:center; gap:2rem;
}
#mobileNav.open { display:flex; }
#mobileNav a { font-family:var(--font-head); font-size:2rem; color:var(--white); }
#mobileNav a:hover { color:var(--blue); }
#mobileClose { position:absolute; top:1.5rem; right:1.5rem; font-size:1.5rem; color:var(--muted); }

/* ── Hero ──────────────────────────────────────────────────── */
#hero {
  min-height:100vh; position:relative; overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:0 2rem 4rem;
}
.hero-bg {
  position:absolute; inset:0; z-index:0;
  background:linear-gradient(
    145deg,
    #070B18 0%, #0A1030 30%,
    #061528 60%, #070910 100%
  );
}
.hero-bg::after {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 80% 60% at 60% 40%, rgba(27,109,255,.12) 0%, transparent 70%),
             radial-gradient(ellipse 40% 40% at 80% 20%, rgba(245,168,0,.06) 0%, transparent 60%);
}
.hero-grid {
  position:absolute; inset:0; z-index:1;
  background-image:
    linear-gradient(rgba(27,109,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(27,109,255,.05) 1px, transparent 1px);
  background-size:60px 60px;
  mask-image:linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.4) 30%, rgba(0,0,0,.4) 70%, transparent 100%);
}
.hero-drone {
  position:absolute; top:25%; right:8%; z-index:2;
  font-size:clamp(5rem,12vw,10rem);
  animation:droneFly 6s ease-in-out infinite;
  filter:drop-shadow(0 0 30px rgba(27,109,255,.5));
}
@keyframes droneFly {
  0%,100% { transform:translate(0,0) rotate(-2deg); }
  25%      { transform:translate(-15px,-20px) rotate(2deg); }
  50%      { transform:translate(10px,-10px) rotate(-1deg); }
  75%      { transform:translate(-8px,8px) rotate(3deg); }
}
.hero-content { position:relative; z-index:3; max-width:800px; }
.hero-eyebrow {
  display:inline-flex; align-items:center; gap:.5rem;
  background:rgba(27,109,255,.12); border:1px solid rgba(27,109,255,.25);
  border-radius:50px; padding:.35rem .9rem;
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.12em;
  color:var(--blue); text-transform:uppercase; margin-bottom:1.5rem;
}
.hero-eyebrow span { width:6px; height:6px; border-radius:50%; background:var(--blue); animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.8)} }
.hero-title { margin-bottom:1.25rem; }
.hero-title .accent { color:var(--blue); }
.hero-subtitle {
  font-size:clamp(.9rem,1.5vw,1.1rem); color:var(--muted);
  max-width:550px; margin-bottom:2.5rem;
  font-family:var(--font-mono); letter-spacing:.05em;
}
.hero-actions { display:flex; flex-wrap:wrap; gap:1rem; margin-bottom:3rem; }
.hero-stats {
  display:flex; flex-wrap:wrap; gap:2rem;
  padding-top:2rem; border-top:1px solid var(--border);
}
.stat { display:flex; flex-direction:column; }
.stat-num { font-family:var(--font-head); font-size:2.2rem; color:var(--white); line-height:1; }
.stat-label { font-family:var(--font-mono); font-size:.65rem; color:var(--muted); letter-spacing:.1em; margin-top:.2rem; }

/* ── Marquee — fixed at bottom of viewport ─────────────── */
.marquee-wrap {
  position:fixed; bottom:0; left:0; right:0; z-index:600;
  background:var(--blue); overflow:hidden; padding:.6rem 0;
  height:34px;
}
.marquee-track {
  display:flex; gap:2.5rem; white-space:nowrap;
  animation:marquee 25s linear infinite;
}
.marquee-track span {
  font-family:var(--font-head); font-size:.85rem; letter-spacing:.1em;
  color:#fff; opacity:.9;
}
.marquee-track .dot { color:var(--amber); }
@keyframes marquee { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

/* ── Sections ──────────────────────────────────────────────── */
section { padding:6rem 2rem; max-width:1200px; margin:0 auto; }
.section-head { margin-bottom:3.5rem; }
.section-head h2 { margin-bottom:.75rem; }

/* ── Services ──────────────────────────────────────────────── */
.services-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:1.5rem;
}
.service-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:1.75rem;
  transition:all .3s var(--ease); position:relative; overflow:hidden;
}
.service-card::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(27,109,255,.05) 0%, transparent 60%);
  opacity:0; transition:opacity .3s;
}
.service-card:hover { transform:translateY(-4px); border-color:rgba(27,109,255,.3); box-shadow:0 20px 40px rgba(0,0,0,.3); }
.service-card:hover::before { opacity:1; }
.service-card.highlight { border-color:rgba(27,109,255,.35); }
.service-card.highlight::after {
  content:'UNGGULAN'; position:absolute; top:1rem; right:1rem;
  background:var(--blue); color:#fff;
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.1em;
  padding:.2rem .6rem; border-radius:50px;
}
.svc-icon { font-size:2.2rem; margin-bottom:1rem; }
.svc-title { font-family:var(--font-head); font-size:1.5rem; margin-bottom:.6rem; }
.svc-desc { font-size:.875rem; color:var(--muted); margin-bottom:1.25rem; line-height:1.6; }
.svc-price {
  font-family:var(--font-mono); font-size:.75rem; color:var(--amber);
  border-top:1px solid var(--border); padding-top:.875rem; margin-top:.5rem;
}

/* ── Portfolio ─────────────────────────────────────────────── */
#portfolio-section { max-width:100%; padding:6rem 2rem; }
.portfolio-inner { max-width:1200px; margin:0 auto; }
.filter-tabs { display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:2.5rem; }
.filter-tab {
  padding:.45rem 1.1rem; border-radius:50px;
  border:1px solid var(--border); color:var(--muted);
  font-size:.8rem; font-family:var(--font-mono); letter-spacing:.05em;
  cursor:pointer; transition:all .2s;
}
.filter-tab.active, .filter-tab:hover { border-color:var(--blue); color:var(--blue); background:rgba(27,109,255,.08); }
.portfolio-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1.5rem;
}
.portfolio-card {
  border-radius:var(--radius-lg); overflow:hidden; position:relative;
  aspect-ratio:4/3; background:var(--surface); cursor:pointer;
  transition:all .3s var(--ease);
}
.portfolio-card:hover { transform:translateY(-4px) scale(1.02); box-shadow:0 30px 60px rgba(0,0,0,.5); }
.portfolio-card.featured { grid-column:span 2; aspect-ratio:16/9; }
.port-img { width:100%; height:100%; object-fit:cover; transition:transform .4s var(--ease); }
.portfolio-card:hover .port-img { transform:scale(1.06); }
.port-placeholder {
  width:100%; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem;
  background:linear-gradient(135deg,var(--bg3) 0%,var(--surface) 100%);
  color:var(--muted); font-size:.75rem;
}
.port-placeholder .port-icon { font-size:2.5rem; }
.port-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(7,9,15,.9) 0%, transparent 60%);
  display:flex; flex-direction:column; justify-content:flex-end; padding:1.5rem;
  opacity:0; transition:opacity .3s;
}
.portfolio-card:hover .port-overlay { opacity:1; }
.port-cat {
  font-family:var(--font-mono); font-size:.65rem; letter-spacing:.1em;
  color:var(--blue); text-transform:uppercase; margin-bottom:.4rem;
}
.port-title { font-family:var(--font-head); font-size:1.3rem; }
.port-client { font-size:.8rem; color:var(--muted); }

/* ── About ─────────────────────────────────────────────────── */
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; }
.about-visual {
  position:relative; border-radius:var(--radius-lg);
  background:var(--surface); border:1px solid var(--border);
  aspect-ratio:4/5; overflow:hidden;
}
.about-visual img { width:100%; height:100%; object-fit:cover; }
.about-badge {
  position:absolute; bottom:1.5rem; left:1.5rem;
  background:rgba(7,9,15,.85); backdrop-filter:blur(12px);
  border:1px solid var(--border); border-radius:var(--radius);
  padding:1rem 1.25rem;
}
.about-badge .num { font-family:var(--font-head); font-size:2.5rem; color:var(--blue); line-height:1; }
.about-badge .lbl { font-family:var(--font-mono); font-size:.65rem; color:var(--muted); letter-spacing:.1em; }
.about-text h2 { margin-bottom:1.25rem; }
.about-text p { margin-bottom:1rem; }
.equip-tags { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.5rem; }
.equip-tag {
  background:rgba(27,109,255,.1); border:1px solid rgba(27,109,255,.2);
  border-radius:50px; padding:.35rem .9rem;
  font-family:var(--font-mono); font-size:.7rem; color:var(--blue);
}
.about-certs { margin-top:2rem; padding-top:2rem; border-top:1px solid var(--border); display:flex; gap:1.5rem; flex-wrap:wrap; }
.cert-item { display:flex; align-items:center; gap:.5rem; font-size:.85rem; color:var(--muted); }
.cert-item .icon { color:var(--amber); }

/* ── Academy ───────────────────────────────────────────────── */
#academy { background:var(--bg2); max-width:100%; }
.academy-inner { max-width:1200px; margin:0 auto; }
.academy-modules {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1.25rem;
}
.module-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:1.5rem;
  display:flex; gap:1rem; align-items:flex-start;
  transition:all .25s var(--ease);
}
.module-card:hover { border-color:rgba(27,109,255,.3); transform:translateY(-2px); }
.mod-num {
  flex-shrink:0; width:36px; height:36px; border-radius:8px;
  background:rgba(27,109,255,.15); border:1px solid rgba(27,109,255,.25);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:.75rem; color:var(--blue); font-weight:700;
}
.mod-title { font-weight:600; margin-bottom:.3rem; font-size:.9rem; }
.mod-desc { font-size:.8rem; color:var(--muted); }
.academy-cta {
  margin-top:3rem; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:2.5rem;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1.5rem;
}

/* ── Testimonials ──────────────────────────────────────────── */
.testi-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1.5rem;
}
.testi-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:2rem; position:relative;
}
.testi-quote {
  position:absolute; top:1.5rem; right:1.5rem;
  font-size:3rem; color:rgba(27,109,255,.12); font-family:Georgia,serif; line-height:1;
}
.stars { color:var(--amber); font-size:.875rem; margin-bottom:1rem; letter-spacing:.1em; }
.testi-text { font-size:.9rem; line-height:1.7; margin-bottom:1.5rem; font-style:italic; }
.testi-author { display:flex; align-items:center; gap:.875rem; }
.testi-avatar {
  width:42px; height:42px; border-radius:50%; overflow:hidden;
  background:var(--blue); display:flex; align-items:center; justify-content:center;
  font-family:var(--font-head); font-size:1.1rem; color:#fff;
  flex-shrink:0;
}
.testi-avatar img { width:100%; height:100%; object-fit:cover; }
.testi-name { font-weight:600; font-size:.9rem; }
.testi-role { font-size:.75rem; color:var(--muted); }

/* ── Blog ──────────────────────────────────────────────────── */
.blog-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:1.5rem; }
.blog-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); overflow:hidden;
  transition:all .3s var(--ease);
}
.blog-card:hover { transform:translateY(-4px); border-color:rgba(27,109,255,.25); }
.blog-thumb { aspect-ratio:16/9; overflow:hidden; background:var(--bg3); position:relative; }
.blog-thumb img { width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.blog-card:hover .blog-thumb img { transform:scale(1.05); }
.blog-thumb-placeholder { width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:2rem;color:var(--muted); }
.blog-body { padding:1.5rem; }
.blog-date { font-family:var(--font-mono); font-size:.65rem; color:var(--muted); letter-spacing:.1em; margin-bottom:.5rem; }
.blog-title { font-weight:700; margin-bottom:.5rem; font-size:1rem; }
.blog-excerpt { font-size:.85rem; color:var(--muted); line-height:1.6; }

/* ── Inquiry / Contact ─────────────────────────────────────── */
#inquiry { background:var(--bg2); max-width:100%; }
.inquiry-inner { max-width:1200px; margin:0 auto; display:grid; grid-template-columns:1fr 1.3fr; gap:4rem; align-items:start; }
.inquiry-info h2 { margin-bottom:1rem; }
.inquiry-info p { margin-bottom:2rem; }
.contact-items { display:flex; flex-direction:column; gap:1rem; }
.contact-item { display:flex; align-items:flex-start; gap:.875rem; }
.contact-item .ci-icon {
  width:38px; height:38px; border-radius:8px; flex-shrink:0;
  background:rgba(27,109,255,.12); border:1px solid rgba(27,109,255,.2);
  display:flex; align-items:center; justify-content:center; font-size:.9rem;
}
.ci-label { font-family:var(--font-mono); font-size:.65rem; color:var(--muted); letter-spacing:.1em; }
.ci-val { font-size:.9rem; }
.inquiry-form {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:2.5rem;
}
.inquiry-form h3 { margin-bottom:1.5rem; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-group { display:flex; flex-direction:column; gap:.4rem; margin-bottom:1rem; }
.form-group label { font-size:.8rem; font-family:var(--font-mono); color:var(--muted); letter-spacing:.05em; }
.form-group input, .form-group select, .form-group textarea {
  background:var(--bg3); border:1px solid var(--border); border-radius:var(--radius);
  padding:.75rem 1rem; color:var(--white); font-family:var(--font-body); font-size:.9rem;
  transition:border-color .2s; width:100%;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline:none; border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(27,109,255,.12);
}
.form-group select option { background:var(--bg3); }
.form-group textarea { resize:vertical; min-height:100px; }
.form-submit-wrap { display:flex; gap:.875rem; margin-top:.5rem; }

/* ── Store / Merch ─────────────────────────────────────────── */
.store-banner {
  background:linear-gradient(135deg,var(--surface) 0%,rgba(27,109,255,.05) 100%);
  border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:3rem; display:flex; justify-content:space-between; align-items:center; gap:2rem; flex-wrap:wrap;
}
.store-text h3 { font-family:var(--font-head); font-size:2rem; margin-bottom:.5rem; }
.store-text p { color:var(--muted); max-width:450px; }
.store-links { display:flex; gap:.875rem; flex-wrap:wrap; }

/* ── Footer ────────────────────────────────────────────────── */
footer {
  border-top:1px solid var(--border); padding:3rem 2rem 1.5rem;
}
.footer-inner { max-width:1200px; margin:0 auto; }
.footer-top { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:3rem; margin-bottom:3rem; }
.footer-brand p { color:var(--muted); font-size:.875rem; margin-top:.75rem; max-width:260px; }
.footer-col h4 { font-family:var(--font-mono); font-size:.7rem; letter-spacing:.15em; color:var(--muted); text-transform:uppercase; margin-bottom:1rem; }
.footer-col a { display:block; font-size:.875rem; color:var(--muted); margin-bottom:.5rem; transition:color .2s; }
.footer-col a:hover { color:var(--white); }
.footer-socials { display:flex; gap:.75rem; margin-top:1rem; }
.social-btn {
  width:36px; height:36px; border-radius:8px; border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; font-size:.85rem;
  color:var(--muted); transition:all .2s;
}
.social-btn:hover { border-color:var(--blue); color:var(--blue); background:rgba(27,109,255,.08); }
.footer-bottom {
  border-top:1px solid var(--border); padding-top:1.5rem;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem;
}
.footer-bottom p { font-size:.8rem; color:var(--muted); }

/* ── WA Float ──────────────────────────────────────────────── */
#waFloat {
  position:fixed; bottom:1.75rem; right:1.75rem; z-index:800;
  width:56px; height:56px; border-radius:50%;
  background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; box-shadow:0 4px 20px rgba(37,211,102,.4);
  transition:all .3s var(--ease-spring); cursor:pointer;
}
#waFloat:hover { transform:scale(1.12); box-shadow:0 8px 30px rgba(37,211,102,.5); }
#waFloat::before {
  content:''; position:absolute; inset:-6px; border-radius:50%;
  border:2px solid rgba(37,211,102,.3);
  animation:waPing 2s ease-out infinite;
}
@keyframes waPing { 0%{transform:scale(1);opacity:.8} 100%{transform:scale(1.5);opacity:0} }

/* ── Scroll reveal ─────────────────────────────────────────── */
.reveal { opacity:0; transform:translateY(24px); transition:opacity .6s var(--ease), transform .6s var(--ease); pointer-events:auto; }
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-delay-1 { transition-delay:.08s; }
.reveal-delay-2 { transition-delay:.16s; }
.reveal-delay-3 { transition-delay:.24s; }

/* ── Language Switcher ─────────────────────────────────── */
.lang-switcher{position:relative;z-index:200}
.lang-btn{display:flex;align-items:center;gap:.4rem;padding:.45rem .9rem;border-radius:50px;border:1px solid var(--border);color:var(--muted);background:transparent;cursor:pointer;font-size:.8rem;font-family:var(--font-body);transition:all .2s;white-space:nowrap}
.lang-btn:hover{border-color:var(--blue);color:var(--white)}
.lang-flag{font-size:16px;line-height:1}
.lang-code{font-family:var(--font-mono);letter-spacing:.06em;font-size:.75rem}
.lang-chevron{font-size:.6rem;opacity:.6;transition:transform .2s}
.lang-switcher.open .lang-chevron{transform:rotate(180deg)}
.lang-menu{
  position:absolute;top:calc(100% + 8px);right:0;
  background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);
  min-width:175px;display:none;flex-direction:column;
  box-shadow:0 8px 30px rgba(0,0,0,.3);overflow:hidden;
}
.lang-switcher.open .lang-menu,.lang-switcher:hover .lang-menu{display:flex}
.lang-menu a{
  padding:.65rem 1rem;font-size:.85rem;color:var(--muted);
  display:flex;align-items:center;gap:.75rem;transition:all .15s;
}
.lang-menu a:hover{color:var(--white);background:rgba(255,255,255,.05)}
.lang-menu a.active{color:var(--blue);background:rgba(27,109,255,.06)}
.lang-menu a .lm-flag{font-size:16px}
.lang-menu a .lm-name{flex:1}
.lang-menu a .lm-native{font-size:.75rem;opacity:.6}

/* ── Alert ─────────────────────────────────────────────────── */
.alert { padding:.875rem 1.25rem; border-radius:var(--radius); font-size:.875rem; }
.alert-error { background:rgba(255,59,59,.1); border:1px solid rgba(255,59,59,.25); color:#FF6B6B; }
.alert-success { background:rgba(0,201,123,.1); border:1px solid rgba(0,201,123,.2); color:#00C97B; }

/* ── Toast ─────────────────────────────────────────────────── */
#toast {
  position:fixed; bottom:5rem; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:.875rem 1.5rem; font-size:.875rem; color:var(--white);
  opacity:0; transition:all .3s var(--ease); pointer-events:none; z-index:1000;
  box-shadow:0 8px 30px rgba(0,0,0,.3); white-space:nowrap;
}
#toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* ── Responsive ────────────────────────────────────────────── */
@media(max-width:1024px) {
  .about-grid { grid-template-columns:1fr; }
  .about-visual { aspect-ratio:16/9; }
  .inquiry-inner { grid-template-columns:1fr; }
  .footer-top { grid-template-columns:1fr 1fr; }
}
@media(max-width:768px) {
  .nav-links, .nav-cta { display:none; }
  #navToggle { display:block; }
  #hero { padding:0 1.25rem 3rem; }
  .hero-drone { font-size:5rem; top:15%; right:5%; }
  .portfolio-card.featured { grid-column:span 1; aspect-ratio:4/3; }
  .form-row { grid-template-columns:1fr; }
  .footer-top { grid-template-columns:1fr; }
  section { padding:4rem 1.25rem; }
  .academy-cta { flex-direction:column; }
}
@media(max-width:480px) {
  h1 { font-size:2.8rem; }
  .hero-stats { gap:1.25rem; }
  .stat-num { font-size:1.8rem; }
}

/* ── Light Theme (Frontend) ──────────────────────────────── */
[data-theme="light"] {
  --bg:      #F5F7FF;
  --bg2:     #ECEEF8;
  --bg3:     #E2E5F2;
  --surface: #FFFFFF;
  --border:  rgba(0,0,0,.1);
  --white:   #1A1D2E;
  --muted:   #5A6585;
  --blue:    #1B6DFF;
  --amber:   #C97F00;
}
[data-theme="light"] body { background:var(--bg); color:var(--white); }
[data-theme="light"] body::before { opacity:.15; }
[data-theme="light"] #navbar.scrolled { background:rgba(245,247,255,.92); border-color:rgba(0,0,0,.08); }
[data-theme="light"] .hero-bg { background:linear-gradient(145deg,#E8ECFF 0%,#D0D8FF 30%,#E0ECFF 60%,#F0F4FF 100%); }
[data-theme="light"] .hero-bg::after { opacity:.4; }
[data-theme="light"] .hero-grid { background-image:linear-gradient(rgba(27,109,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(27,109,255,.08) 1px,transparent 1px); }
[data-theme="light"] .hero-title { color:#1A1D2E; }
[data-theme="light"] .hero-eyebrow { background:rgba(27,109,255,.08); }
[data-theme="light"] .stat-num { color:#1A1D2E; }
[data-theme="light"] .service-card { background:#fff; border-color:rgba(0,0,0,.08); }
[data-theme="light"] .service-card:hover { box-shadow:0 20px 40px rgba(0,0,0,.08); }
[data-theme="light"] .svc-desc { color:#5A6585; }
[data-theme="light"] .portfolio-card { background:#E8EBF8; }
[data-theme="light"] .port-placeholder { background:linear-gradient(135deg,#E2E5F2,#ECEEF8); }
[data-theme="light"] .about-visual { background:#fff; border-color:rgba(0,0,0,.08); }
[data-theme="light"] .about-badge { background:rgba(255,255,255,.95); border-color:rgba(0,0,0,.08); }
[data-theme="light"] .about-badge .num { color:var(--blue); }
[data-theme="light"] .about-badge .lbl { color:#5A6585; }
[data-theme="light"] .testi-card { background:#fff; border-color:rgba(0,0,0,.08); }
[data-theme="light"] .blog-card { background:#fff; border-color:rgba(0,0,0,.08); }
[data-theme="light"] .blog-thumb-placeholder { background:#E8EBF8; color:#5A6585; }
[data-theme="light"] .blog-date { color:#5A6585; }
[data-theme="light"] .module-card { background:#fff; border-color:rgba(0,0,0,.08); }
[data-theme="light"] #academy { background:var(--bg2); }
[data-theme="light"] #inquiry { background:var(--bg2); }
[data-theme="light"] .inquiry-form { background:#fff; border-color:rgba(0,0,0,.08); }
[data-theme="light"] .form-group input,
[data-theme="light"] .form-group select,
[data-theme="light"] .form-group textarea { background:#F5F7FF; border-color:rgba(0,0,0,.12); color:#1A1D2E; }
[data-theme="light"] footer { border-color:rgba(0,0,0,.1); }
[data-theme="light"] .footer-bottom { border-color:rgba(0,0,0,.1); }
[data-theme="light"] .footer-col a { color:#5A6585; }
[data-theme="light"] .footer-brand p { color:#5A6585; }
[data-theme="light"] .social-btn { border-color:rgba(0,0,0,.1); color:#5A6585; }
[data-theme="light"] #mobileNav { background:#fff; }
[data-theme="light"] .lang-btn { border-color:rgba(0,0,0,.12); color:#5A6585; }
[data-theme="light"] .lang-menu { background:#fff; border-color:rgba(0,0,0,.1); }
[data-theme="light"] .store-banner { background:#fff; border-color:rgba(0,0,0,.08); }
[data-theme="light"] .academy-cta { background:#fff; border-color:rgba(0,0,0,.08); }
[data-theme="light"] .marquee-wrap { background:var(--blue); }
[data-theme="light"] .equip-tag { color:var(--blue); }
[data-theme="light"] .section-label { color:var(--blue); }
[data-theme="light"] p { color:#4A5270; }

/* ── Nav Controls (Lang + Theme in one box) ──────────────── */
.nav-controls {
  display:flex; align-items:center; gap:0;
  background:rgba(255,255,255,.05);
  border:1px solid var(--border);
  border-radius:50px;
  overflow:hidden;
  height:34px;
}
.nav-controls .lang-switcher { border:none; }
.nav-controls .lang-btn {
  border:none; border-radius:0;
  border-right:1px solid var(--border);
  height:34px; padding:0 .75rem; margin:0;
  background:transparent;
}
.nav-controls .lang-btn:hover { background:rgba(255,255,255,.07); }
.nav-controls .lang-menu {
  top:calc(100% + 10px); left:0; right:auto; min-width:190px;
}

/* Theme switch (toggle style) */
.theme-switch-wrap {
  display:flex; align-items:center; gap:.35rem;
  padding:0 .65rem; height:34px; cursor:pointer;
}
.theme-icon-sun, .theme-icon-moon { font-size:.75rem; line-height:1; }
.theme-switch {
  position:relative; width:32px; height:18px;
  background:var(--border); border:none; border-radius:50px;
  cursor:pointer; transition:background .25s; flex-shrink:0;
  padding:0;
}
.theme-switch.light-on { background:var(--blue); }
.theme-switch-thumb {
  position:absolute; top:2px; left:2px;
  width:14px; height:14px; border-radius:50%;
  background:#fff; transition:left .25s var(--ease);
  box-shadow:0 1px 4px rgba(0,0,0,.3);
}
.theme-switch.light-on .theme-switch-thumb { left:16px; }

body { padding-bottom:34px; } /* space for sticky marquee at bottom */

/* ── WA Float enhanced pulse ────────────────────────────── */
#waFloat::before {
  content:''; position:absolute; inset:-6px; border-radius:50%;
  border:2px solid rgba(37,211,102,.35);
  animation:waPulse1 2.2s ease-out infinite;
}
#waFloat::after {
  content:''; position:absolute; inset:-14px; border-radius:50%;
  border:2px solid rgba(37,211,102,.18);
  animation:waPulse2 2.2s ease-out .5s infinite;
}
@keyframes waPulse1 { 0%{transform:scale(1);opacity:.8} 100%{transform:scale(1.6);opacity:0} }
@keyframes waPulse2 { 0%{transform:scale(1);opacity:.5} 100%{transform:scale(2);opacity:0} }

/* ── Light theme nav-controls ───────────────────────────── */
[data-theme="light"] .nav-controls {
  background:rgba(0,0,0,.04); border-color:rgba(0,0,0,.12);
}
[data-theme="light"] .nav-controls .lang-btn { border-color:rgba(0,0,0,.1); }
[data-theme="light"] .theme-switch { background:rgba(0,0,0,.15); }
[data-theme="light"] .theme-switch.light-on { background:var(--blue); }

/* ══════════════════════════════════════════════════════════
   ENHANCED HOVER EFFECTS & INTERACTIVE ELEMENTS v3
   ══════════════════════════════════════════════════════════ */

/* ── Card hover — lift + glow ────────────────────────────── */
.service-card {
  transition:transform .35s var(--ease),
             border-color .35s,
             box-shadow .35s;
  cursor:default;
}
.service-card:hover {
  transform:translateY(-8px) scale(1.02);
  border-color:rgba(27,109,255,.5);
  box-shadow:0 24px 48px rgba(0,0,0,.35),
             0 0 0 1px rgba(27,109,255,.2),
             0 0 30px rgba(27,109,255,.12);
}
.service-card:hover .svc-icon { transform:scale(1.15) rotate(-5deg); }
.svc-icon { transition:transform .35s var(--ease-spring); display:inline-block; }
.service-card:hover .svc-title { color:var(--blue); }
.svc-title { transition:color .25s; }

/* ── Service info button ─────────────────────────────────── */
.svc-info-btn {
  display:inline-flex; align-items:center; gap:.4rem;
  margin-top:.875rem; padding:.45rem 1rem;
  border-radius:50px; border:1px solid rgba(27,109,255,.3);
  color:var(--blue); font-size:.78rem; background:rgba(27,109,255,.06);
  cursor:pointer; transition:all .2s; font-family:var(--font-body);
}
.svc-info-btn:hover {
  background:var(--blue); color:#fff; border-color:var(--blue);
  transform:translateY(-1px); box-shadow:0 4px 12px var(--blue-glow);
}

/* ── Testi card hover ────────────────────────────────────── */
.testi-card {
  transition:transform .3s var(--ease), border-color .3s, box-shadow .3s;
}
.testi-card:hover {
  transform:translateY(-6px);
  border-color:rgba(27,109,255,.3);
  box-shadow:0 16px 40px rgba(0,0,0,.25), 0 0 20px rgba(27,109,255,.08);
}
.testi-card:hover .testi-quote { color:rgba(27,109,255,.25); }

/* ── Blog card hover ─────────────────────────────────────── */
.blog-card { transition:transform .3s var(--ease), border-color .3s, box-shadow .3s; }
.blog-card:hover {
  transform:translateY(-6px) scale(1.01);
  border-color:rgba(27,109,255,.3);
  box-shadow:0 20px 44px rgba(0,0,0,.25);
}

/* ── Portfolio card — title always visible ───────────────── */
.port-overlay {
  opacity:1 !important;
  background:linear-gradient(to top, rgba(7,9,15,.85) 0%, rgba(7,9,15,.2) 70%, transparent 100%);
}
.portfolio-card { cursor:pointer; }
.portfolio-card:hover {
  transform:translateY(-6px) scale(1.03);
  box-shadow:0 30px 60px rgba(0,0,0,.5), 0 0 0 2px rgba(27,109,255,.4);
}
.port-title { font-size:1rem; }
.port-overlay { padding:1.25rem; }

/* ── Package card hover ──────────────────────────────────── */
.service-card[style*="flex-direction:column"]:hover,
.acad-pkg-card:hover {
  transform:translateY(-8px) scale(1.02);
  border-color:rgba(27,109,255,.5);
  box-shadow:0 24px 48px rgba(0,0,0,.3), 0 0 30px rgba(27,109,255,.1);
}

/* ── Daftar btn hover ────────────────────────────────────── */
a.btn-primary:hover, button.btn-primary:hover {
  filter:brightness(1.1);
  transform:translateY(-2px);
  box-shadow:0 8px 24px var(--blue-glow);
}

/* ══════════════════════════════════════════════════════════
   MODAL / POPUP
   ══════════════════════════════════════════════════════════ */
.modal-overlay {
  position:fixed; inset:0; z-index:2000;
  background:rgba(7,9,15,.88);
  backdrop-filter:blur(12px);
  display:flex; align-items:center; justify-content:center;
  padding:1.5rem;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .3s, visibility .3s;
}
.modal-overlay.open {
  opacity:1;
  visibility:visible;
  pointer-events:all;
}
.modal-box {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  max-width:640px; width:100%;
  max-height:90vh; overflow-y:auto;
  transform:translateY(30px) scale(.97);
  transition:transform .35s var(--ease);
  position:relative;
}
.modal-overlay.open .modal-box { transform:translateY(0) scale(1); }
.modal-close {
  position:sticky; top:0; float:right;
  width:36px; height:36px; border-radius:50%;
  background:rgba(255,255,255,.08); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; cursor:pointer; color:var(--muted);
  margin:1rem 1rem 0 0; z-index:10;
  transition:all .2s;
}
.modal-close:hover { background:rgba(255,59,59,.15); color:#ff6b6b; border-color:#ff6b6b; }
.modal-body { padding:2rem; }
.modal-icon { font-size:3rem; margin-bottom:.75rem; }
.modal-title { font-family:var(--font-head); font-size:2.5rem; margin-bottom:.5rem; }
.modal-price { font-family:var(--font-head); font-size:2rem; color:var(--blue); margin:.5rem 0; }
.modal-desc { color:rgba(240,242,248,.75); line-height:1.7; margin-bottom:1.25rem; }
.modal-actions { display:flex; gap:.875rem; flex-wrap:wrap; margin-top:1.5rem; }

/* Video wrapper inside modal */
.modal-video { border-radius:var(--radius); overflow:hidden; margin-bottom:1.5rem; aspect-ratio:16/9; background:#000; }
.modal-video iframe { width:100%; height:100%; border:none; }

/* Daftar modal choices */
.daftar-choices { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:1rem; }
.daftar-choice {
  padding:1.5rem; border-radius:var(--radius-lg);
  border:1px solid var(--border); text-align:center;
  cursor:pointer; transition:all .25s; text-decoration:none;
  color:var(--white); background:var(--bg3);
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
}
.daftar-choice:hover { border-color:var(--blue); background:rgba(27,109,255,.08); transform:translateY(-3px); }
.daftar-choice .dc-icon { font-size:2.5rem; }
.daftar-choice .dc-title { font-weight:700; font-size:.95rem; }
.daftar-choice .dc-sub { font-size:.8rem; color:var(--muted); }

/* ── Language switcher — compact (flag only + code) ──────── */
.lang-btn .lm-name, .lang-btn .lm-native { display:none; }
.lang-code { font-family:var(--font-mono); font-size:.72rem; letter-spacing:.06em; font-weight:600; }
.lang-flag { font-size:1.1rem; }
.lang-menu { z-index:1100; }
/* Remove hover trigger — only click (via .open class) */
.lang-switcher:hover .lang-menu { display:none; }
.lang-switcher.open .lang-menu { display:flex; }
.lang-menu a { padding:.55rem .875rem; }
.lang-menu a .lm-name { display:block; font-size:.85rem; flex:1; }
.lang-menu a .lm-native { display:block; }
/* Compact display inside button: only flag + code */
.nav-controls .lang-btn { padding:0 .75rem; gap:.35rem; }

/* ── Hero drone zoom fix ─────────────────────────────────── */
.hero-drone {
  top:50%; right:5%; transform:translateY(-50%);
}
@media(max-width:900px) { .hero-drone { font-size:5rem; top:12%; right:3%; transform:none; } }

/* ══════════════════════════════════════════════════════════
   FINAL FIXES v3
   ══════════════════════════════════════════════════════════ */

/* ── Lang button — ONLY show flag + code ────────────────── */
.lang-btn .lang-code { font-size:.72rem; font-family:var(--font-mono); font-weight:700; letter-spacing:.05em; }
.lang-btn .lang-flag { font-size:1rem; line-height:1; }
.lang-menu .lm-name  { font-size:.85rem; color:var(--white); }
.lang-menu .lm-code  { font-size:.68rem; }
/* Only show on click via .open class — no hover */
.lang-switcher:hover .lang-menu { display:none !important; }
.lang-switcher.open  .lang-menu { display:flex !important; }

/* ── Nav controls — clean box ────────────────────────────── */
.nav-controls {
  background:rgba(255,255,255,.05);
  border:1px solid var(--border);
  border-radius:50px;
  overflow:visible;
  height:34px;
  display:flex;
  align-items:center;
}
.nav-controls .lang-switcher { border:none; }
.nav-controls .lang-btn { border:none; border-radius:50px; height:32px; padding:0 .875rem; margin:1px; }

/* ── Modal — no body scroll freeze ──────────────────────── */
.modal-overlay { overflow-y:auto; }

/* ── Service card info btn — force visible ───────────────── */
.service-card .svc-info-btn {
  display:inline-flex !important;
  visibility:visible !important;
  opacity:1 !important;
  margin-top:.75rem;
}

/* ── Portfolio card — title always visible, no overlay hide ─ */
.port-overlay {
  position:absolute; bottom:0; left:0; right:0;
  padding:1rem;
  background:linear-gradient(transparent 0%,rgba(7,9,15,.85) 100%);
  opacity:1 !important;
  pointer-events:none;
}
.port-cat { font-family:var(--font-mono); font-size:.65rem; color:rgba(240,242,248,.6); text-transform:uppercase; letter-spacing:.1em; }
.port-title { font-weight:700; font-size:.9rem; color:var(--white); margin:.2rem 0; }
.port-client { font-size:.75rem; color:rgba(240,242,248,.65); }

/* ── Btn hover — safe (no transform conflict) ────────────── */
.btn:hover { transform:translateY(-1px); }
.btn-primary:hover { filter:brightness(1.08); box-shadow:0 6px 20px rgba(27,109,255,.35); }
.btn-wa:hover { filter:brightness(1.08); box-shadow:0 6px 20px rgba(37,211,102,.3); }

/* ── Lang menu items — Edge/Chrome compatible ────────────── */
.lang-menu a {
  display:flex; align-items:center; gap:.6rem;
  padding:.55rem .875rem; text-decoration:none;
  color:var(--white); font-size:.85rem;
  transition:background .15s;
}
.lang-menu a:hover, .lang-menu a.active { background:rgba(27,109,255,.12); }
.lang-menu .lm-icon { font-size:1.1rem; line-height:1; flex-shrink:0; }
.lang-menu .lm-code-label {
  font-family:var(--font-mono); font-size:.72rem;
  font-weight:700; color:var(--blue); flex-shrink:0; min-width:22px;
}
.lang-menu .lm-name { flex:1; font-size:.82rem; color:rgba(240,242,248,.75); }
.lang-flag-text { font-size:1rem; line-height:1; }

/* ── Mobile lang pills ───────────────────────────────────── */
.mob-lang-pill {
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.45rem .8rem; border-radius:50px;
  font-family:var(--font-mono); font-size:.78rem; font-weight:600;
  text-decoration:none; transition:all .2s;
}