/* ============================================================
   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 ───────────────────────────────────────────────── */
.marquee-wrap {
  background:var(--blue); overflow:hidden; padding:.65rem 0;
}
.marquee-track {
  display:flex; gap:3rem; white-space:nowrap;
  animation:marquee 20s linear infinite;
}
.marquee-track span {
  font-family:var(--font-head); font-size:1rem; 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(30px); transition:all .7s var(--ease); }
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-delay-1 { transition-delay:.1s; }
.reveal-delay-2 { transition-delay:.2s; }
.reveal-delay-3 { transition-delay:.3s; }

/* ── 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; }
}