/* ============================================================
   KOVANTA — Main Stylesheet
   Fonts: Bebas Neue (display), Syne (body), DM Mono (code)
   ============================================================ */

:root {
  --black:  #050508;
  --navy:   #070b18;
  --deep:   #0a0f1e;
  --glass:  rgba(255,255,255,0.03);
  --glass2: rgba(255,255,255,0.06);
  --border: rgba(255,255,255,0.07);
  --silver:  #b8c4d4;
  --silver2: #8899b0;
  --white:   #f0f4ff;
  --cyan:    #4dffd2;
  --cyan2:   #00e5c0;
  --blue:    #3b82f6;
  --glow:    rgba(77,255,210,0.15);
  --glow2:   rgba(77,255,210,0.05);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; cursor: none !important; }
html  { scroll-behavior:smooth; font-size:16px; }
body  {
  background: var(--black);
  color: var(--white);
  font-family: 'Syne', sans-serif;
  overflow-x: hidden;
}

/* ── CURSOR ─────────────────────────────────────── */
#cursor {
  display: none; /* shown by JS on first mousemove */
  width: 14px;
  height: 14px;
  background: #4dffd2;
  border-radius: 50%;
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
  transition: width .2s, height .2s, background .2s, transform .1s;
}
#cursor-ring {
  display: none; /* shown by JS on first mousemove */
  width: 38px;
  height: 38px;
  border: 1.5px solid rgba(77,255,210,0.55);
  border-radius: 50%;
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 99998;
  transform: translate(-50%, -50%);
  transition: width .3s, height .3s, border-color .3s;
}

/* ── NAV ─────────────────────────────────────────── */
nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:20px 5%;
  display:flex; align-items:center; justify-content:space-between;
  backdrop-filter:blur(20px);
  background:rgba(5,5,8,0.6);
  border-bottom:1px solid var(--border);
  transition:all .4s;
}
.nav-logo {
  font-family:'Bebas Neue',sans-serif;
  font-size:1.8rem; letter-spacing:3px;
  background:linear-gradient(135deg,var(--white),var(--cyan));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.nav-links { display:flex; gap:40px; list-style:none; }
.nav-links a {
  color:var(--silver2); font-size:.72rem; font-weight:600;
  font-family: 'DM Mono', monospace;
  letter-spacing:3px; text-transform:uppercase;
  text-decoration:none; position:relative;
  transition:color .3s;
}
.nav-links a::after {
  content:''; position:absolute; bottom:-4px; left:0;
  width:0; height:1px; background:var(--cyan); transition:width .3s;
}
.nav-links a:hover               { color:var(--cyan); }
.nav-links a:hover::after        { width:100%; }
.nav-cta {
  padding: 9px 22px;
  border: 1px solid rgba(77,255,210,0.35);
  color: var(--cyan);
  font-size: .72rem; font-weight: 700;
  background: rgba(77,255,210,0.04);
  cursor: none; transition: all .3s;
  position: relative; overflow: hidden;
}
.nav-cta::before {
  content: ''; position: absolute; inset: 0;
  background: var(--cyan); transform: translateX(-100%);
  transition: transform .3s;
}
.nav-cta:hover::before { transform: translateX(0); }
.nav-cta:hover { color: var(--black); }
.nav-cta span, .nav-cta .nav-cta-inner { position: relative; z-index: 1; }

/* ── HERO ────────────────────────────────────────── */
#hero {
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
  padding:120px 5% 80px;
}
#hero-canvas  { position:absolute; inset:0; z-index:0; }
.hero-grid {
  position:absolute; inset:0; z-index:1;
  background-image:
    linear-gradient(rgba(77,255,210,0.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(77,255,210,0.04) 1px,transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 50%,black 20%,transparent 80%);
}
.hero-content { position:relative; z-index:2; max-width:900px; text-align:center; }

.hero-badge {
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid rgba(77,255,210,0.3);
  background:rgba(77,255,210,0.05);
  padding:8px 20px; border-radius:100px;
  font-size:.75rem; font-weight:600; letter-spacing:3px;
  text-transform:uppercase; color:var(--cyan);
  margin-bottom:32px;
  animation:fadeUp .8s ease both;
}
.badge-dot {
  width:6px; height:6px; background:var(--cyan);
  border-radius:50%; animation:pulse 2s infinite;
}

.hero-h1 {
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(4rem,11vw,11rem);
  line-height:.92; letter-spacing:-1px;
  animation:fadeUp .8s .2s ease both;
}
.hero-h1 .line1 {
  display:block;
  background:linear-gradient(135deg,var(--white) 0%,var(--silver) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.hero-h1 .line2 {
  display:block;
  background:linear-gradient(135deg,var(--cyan) 0%,#00aaff 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 40px rgba(77,255,210,0.3));
}
.hero-sub {
  margin:28px auto 0; max-width:560px;
  font-size:1.1rem; font-weight:400;
  color:var(--silver2); line-height:1.7;
  animation:fadeUp .8s .4s ease both;
}
.hero-buttons {
  display:flex; gap:16px; justify-content:center;
  margin-top:48px; animation:fadeUp .8s .6s ease both;
}

.hero-scroll {
  position:absolute; bottom:40px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  animation:fadeUp .8s 1s ease both; z-index:2;
}
.scroll-line {
  width:1px; height:50px;
  background:linear-gradient(to bottom,var(--cyan),transparent);
  animation:scrollAnim 2s ease infinite;
}
.scroll-text {
  font-size:.65rem; letter-spacing:3px;
  color:var(--silver2); text-transform:uppercase;
}

/* ── BUTTONS ─────────────────────────────────────── */

/* Base shared style for ALL buttons on the site */
.btn-primary,
.btn-secondary,
.nav-cta,
.btn-cta-mega {
  font-family: 'DM Mono', monospace;
  letter-spacing: 3px;
  text-transform: uppercase;
  cursor: none;
  position: relative;
  clip-path: polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
}

/* Primary — cyan fill */
.btn-primary {
  padding: 15px 40px;
  background: linear-gradient(135deg, var(--cyan2), #0077cc);
  color: var(--black);
  font-size: .78rem; font-weight: 700;
  border: none;
  transition: transform .3s, box-shadow .3s, background .3s;
  box-shadow: 0 0 28px rgba(77,255,210,0.25);
}
.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 50px rgba(77,255,210,0.45);
  background: linear-gradient(135deg, #00ffcc, #0099ff);
}

/* Secondary — ghost */
.btn-secondary {
  padding: 15px 40px;
  background: transparent;
  color: var(--silver);
  font-size: .78rem; font-weight: 600;
  border: 1px solid rgba(77,255,210,0.2);
  transition: all .3s;
}
.btn-secondary:hover {
  border-color: var(--cyan);
  color: var(--cyan);
  background: rgba(77,255,210,0.04);
}

/* ── SECTION UTILITIES ───────────────────────────── */
section       { padding:120px 5%; }
.section-label {
  font-family: 'DM Mono', monospace;
  font-size:.68rem; letter-spacing:5px; color:var(--cyan);
  text-transform:uppercase; font-weight:600;
  margin-bottom:16px; display:block;
}
.section-title {
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(2.5rem,5vw,5rem);
  line-height:1; letter-spacing:1px;
  background:linear-gradient(135deg,var(--white),var(--silver));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  margin-bottom:20px;
}
.section-sub { font-size:1rem; color:var(--silver2); max-width:500px; line-height:1.7; }

.reveal {
  opacity:0; transform:translateY(40px);
  transition:opacity .8s ease,transform .8s 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; }
.reveal-delay-4        { transition-delay:.4s; }

/* ── STATS ───────────────────────────────────────── */
#stats {
  padding:50px 5%;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  background:linear-gradient(135deg,rgba(77,255,210,0.02),rgba(0,153,255,0.02));
}
.stats-grid {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:40px; text-align:center;
}
/* Icon-based stat (new honest version) */
.stats-grid .stat-icon { font-size:2rem; display:block; margin-bottom:10px; }
.stats-grid .stat-text {
  font-family:'Bebas Neue',sans-serif;
  font-size:2rem; letter-spacing:2px;
  background:linear-gradient(135deg,var(--cyan),#0099ff);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  display:block; line-height:1;
}
.stat-num {
  font-family:'Bebas Neue',sans-serif;
  font-size:4rem; letter-spacing:2px;
  background:linear-gradient(135deg,var(--cyan),#0099ff);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  display:block;
}
.stat-label {
  font-size:.75rem; letter-spacing:2px;
  color:var(--silver2); text-transform:uppercase; margin-top:6px; display:block; line-height:1.5;
}

/* ── SERVICES ────────────────────────────────────── */
#services { background:var(--navy); }
.services-header { max-width:700px; margin-bottom:80px; }
.services-grid   { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; }

.service-card {
  background:var(--glass); border:1px solid var(--border);
  padding:50px 40px; position:relative; overflow:hidden;
  cursor:none; transition:all .4s;
}
.service-card::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(77,255,210,0.05),rgba(0,153,255,0.03));
  opacity:0; transition:opacity .4s;
}
.service-card::after {
  content:''; position:absolute; bottom:0; left:0; right:0;
  height:2px; background:linear-gradient(90deg,var(--cyan),#0099ff);
  transform:scaleX(0); transform-origin:left; transition:transform .4s;
}
.service-card:hover                      { transform:translateY(-8px); border-color:rgba(77,255,210,0.2); }
.service-card:hover::before              { opacity:1; }
.service-card:hover::after               { transform:scaleX(1); }
.service-card:hover .service-icon        { transform:scale(1.1) rotate(5deg); }

.service-num {
  font-family:'DM Mono',monospace;
  font-size:.68rem; color:var(--cyan); letter-spacing:4px;
  margin-bottom:32px; display:block; opacity:.7;
}
.service-icon {
  width:56px; height:56px; margin-bottom:28px;
  transition:transform .4s;
  display:flex; align-items:center; justify-content:center;
}
.service-icon svg { width:100%; height:100%; }
.service-title {
  font-family:'Bebas Neue',sans-serif;
  font-size:2.2rem; letter-spacing:2px;
  color:var(--white); margin-bottom:16px; line-height:1;
}
.service-desc  { font-size:.9rem; color:var(--silver2); line-height:1.8; margin-bottom:28px; }
.service-tags  { display:flex; flex-wrap:wrap; gap:8px; }
.tag {
  font-size:.65rem; letter-spacing:2px; color:var(--cyan);
  border:1px solid rgba(77,255,210,0.2); padding:4px 12px;
  background:rgba(77,255,210,0.04); font-family:'DM Mono',monospace;
}

/* ── PROCESS ─────────────────────────────────────── */
#process { background:var(--black); }
.process-header   { max-width:600px; margin-bottom:80px; }
.process-timeline { position:relative; }
.process-line {
  position:absolute; left:32px; top:0; bottom:0;
  width:1px; background:linear-gradient(to bottom,var(--cyan),transparent);
}
.process-steps { display:flex; flex-direction:column; }

.process-step {
  display:grid; grid-template-columns:64px 1fr;
  gap:40px; padding:48px 0; border-bottom:1px solid var(--border);
  position:relative; cursor:none; transition:all .4s;
}
.process-step:last-child              { border-bottom:none; }
.process-step:hover .step-content    { transform:translateX(8px); }

.step-num-wrap {
  display:flex; align-items:flex-start;
  justify-content:center; padding-top:6px;
}
.step-num {
  width:64px; height:64px; border-radius:50%;
  background:var(--deep); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-family:'Bebas Neue',sans-serif; font-size:1.4rem;
  color:var(--cyan); letter-spacing:2px;
  position:relative; z-index:1; transition:all .4s;
}
.process-step:hover .step-num {
  background:rgba(77,255,210,0.1); border-color:var(--cyan);
  box-shadow:0 0 30px rgba(77,255,210,0.2);
}
.step-content { transition:transform .4s; }
.step-phase {
  font-family: 'DM Mono', monospace;
  font-size:.65rem; color:var(--cyan); letter-spacing:4px;
  text-transform:uppercase; margin-bottom:10px;
}
.step-title {
  font-family:'Bebas Neue',sans-serif;
  font-size:2.5rem; letter-spacing:1px;
  color:var(--white); margin-bottom:14px;
}
.step-desc { font-size:.95rem; color:var(--silver2); line-height:1.8; max-width:560px; }

/* ── PORTFOLIO ───────────────────────────────────── */
#portfolio { background:var(--navy); }
.portfolio-header {
  display:flex; align-items:flex-end; justify-content:space-between;
  margin-bottom:60px;
}
.portfolio-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:2px; }

.portfolio-item {
  position:relative; overflow:hidden; cursor:none;
  aspect-ratio:16/10; background:var(--deep);
  border:1px solid var(--border);
}
.portfolio-item.large { aspect-ratio:16/9; }
.portfolio-bg         { position:absolute; inset:0; transition:transform .6s ease; }
.portfolio-item:hover .portfolio-bg { transform:scale(1.05); }

.portfolio-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top,rgba(5,5,8,.95) 30%,transparent 70%);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:40px; transform:translateY(20px); opacity:0; transition:all .4s;
}
.portfolio-item:hover .portfolio-overlay { transform:translateY(0); opacity:1; }

/* "Click to open" hint top-right */
.portfolio-open-hint {
  position:absolute; top:16px; right:16px; z-index:3;
  background:rgba(77,255,210,0.12); border:1px solid rgba(77,255,210,0.3);
  color:var(--cyan); font-family:'DM Mono',monospace;
  font-size:.62rem; letter-spacing:2px; padding:5px 12px;
  opacity:0; transform:translateY(-4px); transition:all .3s;
  pointer-events:none;
}
.portfolio-item:hover .portfolio-open-hint { opacity:1; transform:translateY(0); }

.portfolio-cat {
  font-family: 'DM Mono', monospace;
  font-size:.62rem; letter-spacing:3px; color:var(--cyan);
  text-transform:uppercase; margin-bottom:8px;
}
.portfolio-name {
  font-family:'Bebas Neue',sans-serif;
  font-size:2rem; letter-spacing:1px; color:var(--white); margin-bottom:12px;
}
.portfolio-metrics { display:flex; gap:24px; }
.metric            { text-align:center; }
.metric-val   { font-family:'Bebas Neue',sans-serif; font-size:1.8rem; color:var(--cyan); display:block; }
.metric-label { font-family:'DM Mono',monospace; font-size:.6rem; color:var(--silver2); letter-spacing:2px; }

/* Portfolio bg placeholders */
.pb1 { background:linear-gradient(160deg,#0a1628 0%,#0d2244 60%,#091830 100%); }
.pb2 { background:linear-gradient(160deg,#071210 0%,#0a1f12 60%,#060e0a 100%); }
.pb3 { background:linear-gradient(160deg,#100818 0%,#1a0f2e 60%,#0d0618 100%); }
.pb4 { background:linear-gradient(160deg,#120a00 0%,#1e1000 60%,#0e0800 100%); }

/* All pb content absolutely fills the card */
.pb1, .pb2, .pb3, .pb4 { position:absolute; inset:0; overflow:hidden; }

/* ── LuxeStay preview (pb1 — gold/navy hotel) ── */
.pb1 .pv-nav { position:absolute; top:0; left:0; right:0; height:36px; background:rgba(10,8,6,.85); display:flex; align-items:center; padding:0 20px; gap:16px; border-bottom:1px solid rgba(201,169,110,.15); }
.pb1 .pv-logo { font-family:Georgia,serif; font-size:11px; letter-spacing:3px; color:#c9a96e; }
.pb1 .pv-dots { display:flex; gap:6px; margin-left:auto; }
.pb1 .pv-dot { width:6px; height:6px; border:1px solid rgba(201,169,110,.4); border-radius:50%; }
.pb1 .pv-hero { position:absolute; top:36px; left:0; right:0; height:55%; background:linear-gradient(135deg,#1a1208,#2a1e0e); display:flex; align-items:center; justify-content:center; flex-direction:column; gap:6px; overflow:hidden; }
.pb1 .pv-hero::before { content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(201,169,110,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(201,169,110,.04) 1px,transparent 1px); background-size:32px 32px; }
.pb1 .pv-hero-glow { position:absolute; width:200px; height:200px; background:radial-gradient(circle,rgba(201,169,110,.15),transparent 70%); top:20%; left:30%; border-radius:50%; }
.pb1 .pv-h1 { font-family:Georgia,serif; font-size:22px; color:#c9a96e; letter-spacing:2px; position:relative; z-index:1; text-align:center; line-height:1.2; }
.pb1 .pv-sub { font-size:7px; letter-spacing:4px; color:rgba(245,240,232,.4); text-transform:uppercase; position:relative; z-index:1; }
.pb1 .pv-btn-row { display:flex; gap:8px; position:relative; z-index:1; margin-top:4px; }
.pb1 .pv-btn { padding:4px 12px; background:#c9a96e; font-size:6px; letter-spacing:2px; color:#0a0806; font-weight:700; }
.pb1 .pv-btn2 { padding:4px 12px; border:1px solid rgba(201,169,110,.4); font-size:6px; letter-spacing:2px; color:#c9a96e; }
.pb1 .pv-cards { position:absolute; bottom:0; left:0; right:0; height:42%; display:grid; grid-template-columns:repeat(3,1fr); gap:2px; padding:8px; background:rgba(10,8,6,.6); }
.pb1 .pv-card { background:linear-gradient(135deg,#1a1510,#241e10); border:1px solid rgba(201,169,110,.12); padding:8px; display:flex; flex-direction:column; gap:3px; }
.pb1 .pv-card-tag { font-size:5px; letter-spacing:2px; color:rgba(201,169,110,.6); text-transform:uppercase; }
.pb1 .pv-card-title { font-family:Georgia,serif; font-size:9px; color:#f5f0e8; }
.pb1 .pv-card-price { font-size:7px; color:#c9a96e; margin-top:auto; }
.pb1 .pv-card-img { flex:1; background:linear-gradient(135deg,rgba(201,169,110,.08),rgba(201,169,110,.02)); border:1px solid rgba(201,169,110,.08); margin-bottom:4px; min-height:30px; display:flex; align-items:center; justify-content:center; }
.pb1 .pv-card-img svg { width:60%; height:60%; opacity:.3; }

/* ── NovaTech preview (pb2 — blue SaaS dashboard) ── */
.pb2 .pv-nav { position:absolute; top:0; left:0; right:0; height:32px; background:rgba(6,9,18,.9); display:flex; align-items:center; padding:0 16px; gap:12px; border-bottom:1px solid rgba(99,179,237,.12); }
.pb2 .pv-logo { font-size:10px; font-weight:800; background:linear-gradient(135deg,#63b3ed,#b794f4); -webkit-background-clip:text; -webkit-text-fill-color:transparent; letter-spacing:-0.5px; }
.pb2 .pv-nav-links { display:flex; gap:10px; margin-left:auto; }
.pb2 .pv-nav-link { font-size:6px; color:rgba(107,125,179,.8); letter-spacing:1px; }
.pb2 .pv-chip { background:rgba(99,179,237,.1); border:1px solid rgba(99,179,237,.25); padding:2px 8px; font-size:5.5px; letter-spacing:1.5px; color:#63b3ed; border-radius:100px; }
.pb2 .pv-hero { position:absolute; top:32px; left:0; right:0; height:42%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; background:linear-gradient(180deg,#060912,#0d1220); overflow:hidden; }
.pb2 .pv-hero-grid { position:absolute; inset:0; background-image:linear-gradient(rgba(99,179,237,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(99,179,237,.04) 1px,transparent 1px); background-size:24px 24px; }
.pb2 .pv-glow { position:absolute; width:200px; height:200px; background:radial-gradient(circle,rgba(99,179,237,.12),transparent 70%); top:-20%; left:25%; border-radius:50%; }
.pb2 .pv-h1 { font-size:18px; font-weight:800; letter-spacing:-1px; color:#e8f0fe; position:relative; z-index:1; text-align:center; line-height:1.1; }
.pb2 .pv-h1 span { background:linear-gradient(135deg,#63b3ed,#b794f4); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.pb2 .pv-sub { font-size:6.5px; color:#6b7db3; letter-spacing:1px; position:relative; z-index:1; }
.pb2 .pv-db { position:absolute; bottom:0; left:8px; right:8px; height:50%; background:rgba(13,18,32,.95); border:1px solid rgba(99,179,237,.12); border-bottom:none; border-radius:4px 4px 0 0; overflow:hidden; }
.pb2 .pv-db-bar { height:20px; background:rgba(19,24,40,.9); border-bottom:1px solid rgba(99,179,237,.1); display:flex; align-items:center; padding:0 8px; gap:4px; }
.pb2 .pv-db-dot { width:6px; height:6px; border-radius:50%; }
.pb2 .pv-db-body { padding:6px; display:grid; grid-template-columns:40px 1fr; gap:4px; height:calc(100% - 20px); }
.pb2 .pv-db-sidebar { display:flex; flex-direction:column; gap:2px; }
.pb2 .pv-db-item { height:10px; background:rgba(99,179,237,.06); border-radius:2px; }
.pb2 .pv-db-item.active { background:rgba(99,179,237,.15); }
.pb2 .pv-db-main { display:grid; grid-template-columns:repeat(3,1fr); gap:3px; align-content:start; }
.pb2 .pv-db-card { background:rgba(19,24,40,.8); border:1px solid rgba(99,179,237,.1); border-radius:3px; padding:4px; }
.pb2 .pv-db-card-label { font-size:4px; color:#6b7db3; letter-spacing:1px; margin-bottom:2px; }
.pb2 .pv-db-card-val { font-size:9px; font-weight:800; background:linear-gradient(135deg,#63b3ed,#b794f4); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.pb2 .pv-db-chart { grid-column:span 3; background:rgba(19,24,40,.8); border:1px solid rgba(99,179,237,.1); border-radius:3px; padding:4px; display:flex; align-items:flex-end; gap:2px; height:32px; }
.pb2 .pv-bar { flex:1; border-radius:1px; background:linear-gradient(to top,rgba(99,179,237,.6),rgba(183,148,244,.3)); min-height:3px; }

/* ── Pulse Fitness preview (pb3 — orange/black gym) ── */
.pb3 .pv-nav { position:absolute; top:0; left:0; right:0; height:32px; background:rgba(8,8,8,.92); display:flex; align-items:center; padding:0 16px; gap:12px; border-bottom:1px solid rgba(255,107,43,.12); }
.pb3 .pv-logo { font-size:12px; font-weight:900; letter-spacing:2px; color:#f4f4f4; font-family:'Arial Black',sans-serif; }
.pb3 .pv-logo span { color:#ff6b2b; }
.pb3 .pv-nav-links { display:flex; gap:10px; margin-left:auto; }
.pb3 .pv-nav-link { font-size:6px; color:rgba(244,244,244,.4); letter-spacing:1.5px; text-transform:uppercase; }
.pb3 .pv-join { padding:3px 10px; background:#ff6b2b; font-size:5.5px; font-weight:800; color:#080808; letter-spacing:1.5px; }
.pb3 .pv-hero { position:absolute; top:32px; left:0; right:0; height:58%; background:#080808; overflow:hidden; padding:16px 20px; }
.pb3 .pv-lines { position:absolute; inset:0; background-image:repeating-linear-gradient(0deg,transparent,transparent 20px,rgba(255,107,43,.03) 20px,rgba(255,107,43,.03) 21px); }
.pb3 .pv-orange-bar { position:absolute; top:0; right:0; width:40%; height:100%; background:linear-gradient(135deg,transparent,rgba(255,107,43,.06)); }
.pb3 .pv-tag { font-size:5.5px; letter-spacing:4px; color:#ff6b2b; text-transform:uppercase; margin-bottom:4px; }
.pb3 .pv-h1 { font-size:36px; font-weight:900; line-height:.85; letter-spacing:-1px; text-transform:uppercase; color:#f4f4f4; font-family:'Arial Black',sans-serif; }
.pb3 .pv-h1 .orange { color:#ff6b2b; }
.pb3 .pv-h1 .outline { -webkit-text-stroke:1.5px #f4f4f4; color:transparent; }
.pb3 .pv-btn-row { display:flex; gap:6px; margin-top:8px; }
.pb3 .pv-btn-f { padding:5px 14px; background:#ff6b2b; font-size:6px; font-weight:800; color:#080808; letter-spacing:1.5px; text-transform:uppercase; }
.pb3 .pv-btn-o { padding:5px 14px; border:1.5px solid rgba(244,244,244,.2); font-size:6px; color:#f4f4f4; letter-spacing:1.5px; text-transform:uppercase; }
.pb3 .pv-stats-col { position:absolute; right:20px; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:10px; }
.pb3 .pv-stat { text-align:right; }
.pb3 .pv-stat-n { font-size:18px; font-weight:900; color:#ff6b2b; font-family:'Arial Black',sans-serif; line-height:1; }
.pb3 .pv-stat-l { font-size:5px; letter-spacing:2px; color:#888; text-transform:uppercase; }
.pb3 .pv-cards { position:absolute; bottom:0; left:0; right:0; height:38%; display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:#111; padding:6px; }
.pb3 .pv-prog { background:#0d0d0d; border:1px solid rgba(255,255,255,.05); padding:6px; position:relative; overflow:hidden; }
.pb3 .pv-prog::before { content:''; position:absolute; bottom:0; left:0; right:0; height:2px; background:#ff6b2b; transform:scaleX(0); transform-origin:left; transition:transform .4s; }
.pb3 .pv-prog-num { font-size:5px; letter-spacing:2px; color:rgba(255,107,43,.4); margin-bottom:3px; }
.pb3 .pv-prog-icon { font-size:12px; margin-bottom:3px; }
.pb3 .pv-prog-title { font-size:8px; font-weight:900; text-transform:uppercase; color:#f4f4f4; letter-spacing:.5px; }
.pb3 .pv-prog-tag { font-size:5px; color:#888; margin-top:2px; }

/* ── Aurum Realty preview (pb4 — green/dark real estate) ── */
.pb4 { background:linear-gradient(160deg,#07080a 0%,#0c1008 60%,#07080a 100%); }
.pb4 .pv-nav { position:absolute; top:0; left:0; right:0; height:32px; background:rgba(7,8,10,.88); display:flex; align-items:center; padding:0 16px; gap:12px; border-bottom:1px solid rgba(74,222,128,.1); }
.pb4 .pv-logo { font-family:Georgia,serif; font-size:10px; letter-spacing:1px; color:#f1f5f9; font-style:italic; }
.pb4 .pv-logo em { color:#4ade80; font-style:italic; }
.pb4 .pv-nav-links { display:flex; gap:10px; margin-left:auto; }
.pb4 .pv-nav-link { font-size:6px; color:#64748b; letter-spacing:.5px; }
.pb4 .pv-cta-btn { padding:3px 10px; background:#4ade80; font-size:5.5px; font-weight:700; color:#07080a; border-radius:2px; }
.pb4 .pv-split { position:absolute; top:32px; left:0; right:0; height:52%; display:grid; grid-template-columns:1fr 1fr; }
.pb4 .pv-left { padding:12px; display:flex; flex-direction:column; gap:4px; }
.pb4 .pv-tag { font-size:5px; letter-spacing:3px; color:#4ade80; text-transform:uppercase; }
.pb4 .pv-h1 { font-family:Georgia,serif; font-size:15px; font-weight:700; line-height:1.1; color:#f1f5f9; }
.pb4 .pv-h1 em { font-style:italic; color:#4ade80; }
.pb4 .pv-desc { font-size:5.5px; color:#64748b; line-height:1.6; margin-top:2px; }
.pb4 .pv-hero-btns { display:flex; gap:5px; margin-top:4px; }
.pb4 .pv-btn-g { padding:4px 10px; background:#4ade80; font-size:5.5px; font-weight:700; color:#07080a; border-radius:2px; }
.pb4 .pv-btn-g2 { padding:4px 10px; border:1px solid rgba(255,255,255,.15); font-size:5.5px; color:#f1f5f9; border-radius:2px; }
.pb4 .pv-nums { display:flex; gap:10px; margin-top:5px; }
.pb4 .pv-num-n { font-family:Georgia,serif; font-size:11px; color:#4ade80; display:block; line-height:1; }
.pb4 .pv-num-l { font-size:4.5px; color:#64748b; letter-spacing:1.5px; text-transform:uppercase; }
.pb4 .pv-right { background:linear-gradient(135deg,#0e1a14,#0a1810); position:relative; overflow:hidden; border-left:1px solid rgba(74,222,128,.06); }
.pb4 .pv-right-glow { position:absolute; width:120px; height:120px; background:radial-gradient(circle,rgba(74,222,128,.08),transparent 70%); top:30%; left:30%; border-radius:50%; }
.pb4 .pv-right-grid { position:absolute; inset:0; background-image:linear-gradient(rgba(74,222,128,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(74,222,128,.05) 1px,transparent 1px); background-size:20px 20px; }
.pb4 .pv-prop-badge { position:absolute; bottom:8px; left:8px; right:8px; background:rgba(14,16,20,.92); border:1px solid rgba(74,222,128,.15); padding:6px 8px; }
.pb4 .pv-prop-label { font-size:4.5px; letter-spacing:2px; color:#4ade80; text-transform:uppercase; margin-bottom:2px; }
.pb4 .pv-prop-name { font-family:Georgia,serif; font-size:8px; color:#f1f5f9; }
.pb4 .pv-prop-price { font-size:7px; font-weight:700; color:#4ade80; }
.pb4 .pv-listings { position:absolute; bottom:0; left:0; right:0; height:44%; display:grid; grid-template-columns:repeat(3,1fr); gap:2px; padding:4px; background:rgba(7,8,10,.6); }
.pb4 .pv-listing { background:rgba(14,16,20,.9); border:1px solid rgba(74,222,128,.08); overflow:hidden; }
.pb4 .pv-listing-img { height:40px; background:linear-gradient(135deg,#0e1a14,#122010); position:relative; }
.pb4 .pv-listing-img2 { background:linear-gradient(135deg,#0a1018,#101428); }
.pb4 .pv-listing-img3 { background:linear-gradient(135deg,#1a1008,#201408); }
.pb4 .pv-l-status { position:absolute; top:3px; left:3px; background:#4ade80; font-size:4px; font-weight:700; color:#07080a; padding:1px 4px; letter-spacing:1px; }
.pb4 .pv-l-price { position:absolute; bottom:3px; right:3px; background:rgba(7,8,10,.9); border:1px solid rgba(74,222,128,.2); font-size:5.5px; color:#4ade80; padding:1px 4px; }
.pb4 .pv-listing-info { padding:4px 6px; }
.pb4 .pv-l-type { font-size:4px; letter-spacing:2px; color:#4ade80; text-transform:uppercase; }
.pb4 .pv-l-name { font-family:Georgia,serif; font-size:7px; color:#f1f5f9; line-height:1.2; }

/* Label always visible bottom-left */
.pb-site-label {
  position:absolute; bottom:12px; left:12px; z-index:5;
  background:rgba(5,5,8,.85); border:1px solid rgba(255,255,255,.08);
  padding:5px 10px; backdrop-filter:blur(8px);
  font-family:'DM Mono',monospace; font-size:.6rem; letter-spacing:2px;
  color:rgba(255,255,255,.5); pointer-events:none;
}

/* ── AI SECTION ──────────────────────────────────── */
#ai { background:var(--black); overflow:hidden; }
.ai-inner { display:grid; grid-template-columns:1fr 1fr; gap:100px; align-items:center; }
.ai-visual { position:relative; height:500px; }
#ai-canvas { position:absolute; inset:0; width:100%; height:100%; }
.ai-features { display:flex; flex-direction:column; gap:24px; margin-top:40px; }

.ai-feature {
  display:flex; gap:20px; align-items:flex-start;
  padding:24px; border:1px solid var(--border);
  background:var(--glass); transition:all .3s;
}
.ai-feature:hover { border-color:rgba(77,255,210,0.2); background:var(--glass2); }

.ai-feature-icon {
  width:40px; height:40px; flex-shrink:0;
  background:rgba(77,255,210,0.08); border:1px solid rgba(77,255,210,0.2);
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem;
}
.ai-feature-text h4 { font-size:.95rem; font-weight:700; color:var(--white); margin-bottom:6px; }
.ai-feature-text p  { font-size:.85rem; color:var(--silver2); line-height:1.6; }

/* ── WHY ─────────────────────────────────────────── */
#why { background:var(--deep); }
.why-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; margin-top:80px; }

.why-card {
  padding:48px 40px; border:1px solid var(--border);
  background:var(--glass); position:relative; overflow:hidden; transition:all .4s;
}
.why-card::before {
  content:''; position:absolute; top:0; left:0; right:0;
  height:2px; background:linear-gradient(90deg,var(--cyan),transparent);
  transform:scaleX(0); transform-origin:left; transition:transform .4s;
}
.why-card:hover           { background:var(--glass2); transform:translateY(-4px); }
.why-card:hover::before   { transform:scaleX(1); }

.why-icon  { width:48px; height:48px; margin-bottom:24px; display:flex; align-items:center; justify-content:center; color:var(--cyan); }
.why-title { font-family:'Bebas Neue',sans-serif; font-size:1.8rem; letter-spacing:1px; color:var(--white); margin-bottom:12px; }
.why-desc  { font-size:.85rem; color:var(--silver2); line-height:1.8; }

/* ── CTA ─────────────────────────────────────────── */
#cta {
  background:var(--black); text-align:center;
  position:relative; overflow:hidden; padding:160px 5%;
}
.cta-glow {
  position:absolute; width:800px; height:800px;
  background:radial-gradient(circle,rgba(77,255,210,0.07) 0%,transparent 70%);
  top:50%; left:50%; transform:translate(-50%,-50%);
  animation:ctaPulse 4s ease infinite;
}
.cta-content { position:relative; z-index:1; }
.cta-label   { font-size:.7rem; letter-spacing:4px; color:var(--cyan); text-transform:uppercase; font-weight:700; margin-bottom:24px; display:block; }
.cta-title {
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(3.5rem,8vw,8rem);
  line-height:.95; letter-spacing:-1px;
  background:linear-gradient(135deg,var(--white) 0%,var(--silver) 50%,var(--cyan) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  margin-bottom:24px;
}
.cta-sub     { font-size:1.1rem; color:var(--silver2); max-width:500px; margin:0 auto 48px; line-height:1.7; }
.cta-buttons { display:flex; gap:16px; justify-content:center; }

/* ── FOOTER ──────────────────────────────────────── */
footer {
  background:var(--navy);
  border-top:1px solid var(--border);
  padding:60px 5% 40px;
}
.footer-inner {
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:60px; margin-bottom:60px;
}
.footer-logo {
  font-family:'Bebas Neue',sans-serif; font-size:1.8rem; letter-spacing:3px;
  background:linear-gradient(135deg,var(--white),var(--cyan));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  display:block; margin-bottom:16px;
}
.footer-brand p { font-size:.85rem; color:var(--silver2); line-height:1.8; max-width:240px; }
.footer-col h5 {
  font-size:.7rem; letter-spacing:3px; color:var(--cyan);
  text-transform:uppercase; margin-bottom:20px; font-weight:700;
}
.footer-col ul { list-style:none; display:flex; flex-direction:column; gap:12px; }
.footer-col a  { color:var(--silver2); text-decoration:none; font-size:.85rem; transition:color .3s; }
.footer-col a:hover { color:var(--cyan); }
.footer-bottom {
  border-top:1px solid var(--border); padding-top:30px;
  display:flex; justify-content:space-between; align-items:center;
}
.footer-bottom p { font-size:.75rem; color:var(--silver2); letter-spacing:1px; }
.footer-status {
  display:flex; align-items:center; gap:8px;
  font-size:.7rem; color:var(--cyan); letter-spacing:2px;
}

/* ── CHATBOT ─────────────────────────────────────── */
#chatbot { position:fixed; bottom:32px; right:32px; z-index:200; }

.chat-btn {
  width:56px; height:56px; border-radius:50%;
  background:linear-gradient(135deg,var(--cyan2),#0099ff);
  border:none; cursor:none; display:flex; align-items:center; justify-content:center;
  color:var(--black); font-size:1.2rem;
  box-shadow:0 0 30px rgba(77,255,210,0.4);
  transition:all .3s; position:relative;
}
.chat-btn:hover { transform:scale(1.1); box-shadow:0 0 50px rgba(77,255,210,0.6); }

.chat-pulse {
  position:absolute; inset:-4px; border-radius:50%;
  border:2px solid rgba(77,255,210,0.4);
  animation:chatPulse 2s ease infinite;
}
.chat-panel {
  position:absolute; bottom:72px; right:0;
  width:340px; background:rgba(10,15,30,0.97);
  border:1px solid var(--border); backdrop-filter:blur(20px);
  transform:scale(.9) translateY(10px); opacity:0; pointer-events:none;
  transition:all .3s; transform-origin:bottom right; overflow:hidden;
}
.chat-panel.open { transform:scale(1) translateY(0); opacity:1; pointer-events:auto; }

.chat-header {
  padding:20px; background:rgba(77,255,210,0.06);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:12px;
}
.chat-avatar {
  width:36px; height:36px; border-radius:50%;
  background:linear-gradient(135deg,var(--cyan2),#0099ff);
  display:flex; align-items:center; justify-content:center;
  font-size:.9rem; color:var(--black); font-weight:700;
}
.chat-header-info h4 { font-size:.9rem; color:var(--white); font-weight:700; }
.chat-header-info p  { font-size:.7rem; color:var(--cyan); letter-spacing:1px; }
.chat-messages { padding:20px; min-height:150px; display:flex; flex-direction:column; gap:12px; }
.chat-msg {
  background:var(--glass2); border:1px solid var(--border);
  padding:12px 16px; font-size:.82rem; color:var(--silver); line-height:1.6;
  border-radius:2px 12px 12px 12px; animation:fadeUp .3s ease;
}
.chat-footer { padding:16px; border-top:1px solid var(--border); display:flex; gap:8px; }
.chat-input {
  flex:1; background:var(--glass); border:1px solid var(--border);
  color:var(--white); padding:10px 14px; font-family:'Syne',sans-serif;
  font-size:.82rem; outline:none; transition:border-color .3s;
}
.chat-input:focus { border-color:var(--cyan); }
.chat-send {
  width: 40px; height: 40px; background: var(--cyan2);
  border: none; cursor: none; color: var(--black);
  display: flex; align-items: center; justify-content: center;
  font-family: 'DM Mono', monospace;
  font-size: .9rem; transition: all .2s;
  clip-path: polygon(4px 0%, 100% 0%, calc(100% - 4px) 100%, 0% 100%);
}
.chat-send:hover { background: var(--cyan); }

/* ── KEYFRAMES ───────────────────────────────────── */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(30px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes pulse {
  0%,100% { opacity:1; transform:scale(1); }
  50%     { opacity:.5; transform:scale(.8); }
}
@keyframes scrollAnim {
  0%  { transform:scaleY(0); transform-origin:top; }
  50% { transform:scaleY(1); transform-origin:top; }
  51% { transform-origin:bottom; }
  100%{ transform:scaleY(0); transform-origin:bottom; }
}
@keyframes ctaPulse {
  0%,100% { transform:translate(-50%,-50%) scale(1);    opacity:.7; }
  50%     { transform:translate(-50%,-50%) scale(1.15); opacity:1; }
}
@keyframes chatPulse {
  0%,100% { transform:scale(1);   opacity:.8; }
  50%     { transform:scale(1.2); opacity:0; }
}

/* ── RESPONSIVE ──────────────────────────────────── */
@media (max-width:768px) {
  .nav-links, .nav-cta            { display:none; }
  .stats-grid                     { grid-template-columns:repeat(2,1fr); }
  .services-grid                  { grid-template-columns:1fr; }
  .portfolio-grid                 { grid-template-columns:1fr; }
  .ai-inner                       { grid-template-columns:1fr; }
  .why-grid                       { grid-template-columns:1fr; }
  .footer-inner                   { grid-template-columns:1fr 1fr; }
  .hero-buttons                   { flex-direction:column; align-items:center; }
  .process-step                   { grid-template-columns:48px 1fr; gap:20px; }
  .portfolio-header               { flex-direction:column; align-items:flex-start; gap:20px; }
  #chatbot                        { bottom:16px; right:16px; }
  .chat-panel                     { width:290px; }
  .ai-visual                      { height:320px; }
}

/* ── BOOKING MODAL ───────────────────────────────── */
#booking-modal {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(2,4,8,0.88);
  backdrop-filter: blur(12px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0; pointer-events: none;
  transition: opacity .35s ease;
}
#booking-modal.open {
  opacity: 1; pointer-events: auto;
}

.bm-box {
  background: #0a0f1e;
  border: 1px solid rgba(77,255,210,0.18);
  width: 100%; max-width: 560px;
  max-height: 92vh; overflow-y: auto;
  position: relative;
  box-shadow: 0 0 80px rgba(77,255,210,0.08);
  animation: modalIn .35s ease both;
}
@keyframes modalIn {
  from { transform: translateY(30px) scale(.97); opacity:0; }
  to   { transform: translateY(0)    scale(1);   opacity:1; }
}

/* top cyan line */
.bm-box::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--cyan), #0099ff, transparent);
}

.bm-header {
  padding: 36px 40px 0;
  display: flex; align-items: flex-start; justify-content: space-between;
}
.bm-header-text {}
.bm-label {
  font-size: .65rem; letter-spacing: 4px; color: var(--cyan);
  text-transform: uppercase; font-family: 'DM Mono',monospace;
  display: block; margin-bottom: 10px;
}
.bm-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2.6rem; letter-spacing: 1px;
  color: var(--white); line-height: 1;
}
.bm-close {
  width: 36px; height: 36px; background: rgba(255,255,255,.05);
  border: 1px solid var(--border); color: var(--silver2);
  font-size: 1.1rem; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: all .2s; cursor: none; margin-top: 4px;
}
.bm-close:hover { background: rgba(77,255,210,.08); border-color: var(--cyan); color: var(--cyan); }

/* contact bar under title */
.bm-contact-bar {
  margin: 16px 40px 0;
  padding: 12px 16px;
  background: rgba(77,255,210,.04);
  border: 1px solid rgba(77,255,210,.1);
  display: flex; align-items: center; gap: 12px;
}
.bm-contact-bar a {
  color: var(--cyan); text-decoration: none;
  font-family: 'DM Mono', monospace; font-size: .78rem; letter-spacing: 1px;
  transition: opacity .2s;
}
.bm-contact-bar a:hover { opacity: .7; }
.bm-contact-sep { color: var(--border); font-size: .7rem; }
.bm-contact-label { font-size: .65rem; color: var(--silver2); letter-spacing: 2px; text-transform: uppercase; }

/* form body */
#booking-form {
  padding: 28px 40px 40px;
  display: flex; flex-direction: column; gap: 18px;
}

.bm-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.bm-field { display: flex; flex-direction: column; gap: 6px; }
.bm-field label {
  font-size: .65rem; letter-spacing: 3px; color: var(--silver2);
  text-transform: uppercase; font-family: 'DM Mono', monospace;
}
.bm-input, .bm-textarea {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--white);
  font-family: 'Syne', sans-serif; font-size: .9rem;
  padding: 13px 16px;
  outline: none;
  transition: border-color .25s, background .25s;
  width: 100%;
}
.bm-input::placeholder, .bm-textarea::placeholder { color: rgba(136,153,176,.5); }
.bm-input:focus, .bm-textarea:focus {
  border-color: rgba(77,255,210,.5);
  background: rgba(77,255,210,.03);
}
.bm-input.error, .bm-textarea.error { border-color: rgba(255,80,80,.6); }
.bm-textarea { resize: vertical; min-height: 100px; }

.bm-error {
  font-size: .65rem; color: rgba(255,100,100,.8);
  font-family: 'DM Mono', monospace; letter-spacing: 1px;
  min-height: 14px;
}

.bm-submit {
  width: 100%; padding: 16px;
  background: linear-gradient(135deg, var(--cyan2), #0077cc);
  color: var(--black); font-family: 'DM Mono', monospace;
  font-weight: 700; font-size: .78rem; letter-spacing: 3px;
  text-transform: uppercase; border: none; cursor: none;
  transition: all .3s;
  box-shadow: 0 0 28px rgba(77,255,210,.2);
  margin-top: 6px;
  clip-path: polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
}
.bm-submit:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 40px rgba(77,255,210,.4);
}
.bm-submit:disabled { opacity: .6; }

.bm-privacy {
  text-align: center; font-size: .65rem; color: var(--silver2);
  letter-spacing: 1px; line-height: 1.6; margin-top: 4px;
}

/* ── Success state ── */
#booking-success {
  padding: 60px 40px;
  display: none; flex-direction: column; align-items: center;
  text-align: center; gap: 16px;
}
.bm-success-icon {
  width: 72px; height: 72px; border-radius: 50%;
  background: rgba(77,255,210,.08); border: 1px solid rgba(77,255,210,.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; margin-bottom: 8px;
  animation: successPop .5s ease;
}
@keyframes successPop {
  0%   { transform: scale(0); opacity:0; }
  70%  { transform: scale(1.15); }
  100% { transform: scale(1); opacity:1; }
}
.bm-success-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2.4rem; color: var(--white); letter-spacing: 1px;
}
.bm-success-sub {
  font-size: .9rem; color: var(--silver2); line-height: 1.7; max-width: 380px;
}
.bm-success-phone {
  font-family: 'DM Mono', monospace; font-size: 1rem;
  color: var(--cyan); letter-spacing: 2px; margin-top: 4px;
}
.bm-success-close {
  margin-top: 16px; padding: 12px 36px;
  border: 1px solid rgba(77,255,210,.25); color: var(--silver2);
  font-family: 'DM Mono', monospace; font-size: .72rem;
  letter-spacing: 3px; text-transform: uppercase;
  background: transparent; cursor: none; transition: all .25s;
  clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
}
.bm-success-close:hover { border-color: var(--cyan); color: var(--cyan); }

@media (max-width: 560px) {
  .bm-header, #booking-form, #booking-success { padding-left: 24px; padding-right: 24px; }
  .bm-contact-bar { margin-left: 24px; margin-right: 24px; }
  .bm-row { grid-template-columns: 1fr; }
  .bm-title { font-size: 2rem; }
}

/* ── CHATBOT TYPING INDICATOR ────────────────────── */
.typing-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--cyan); opacity: .4;
  animation: typingBounce .9s ease infinite;
  flex-shrink: 0;
}
.typing-dot:nth-child(2) { animation-delay: .15s; }
.typing-dot:nth-child(3) { animation-delay: .30s; }
@keyframes typingBounce {
  0%,60%,100% { transform: translateY(0); opacity:.4; }
  30%         { transform: translateY(-5px); opacity:1; }
}

/* ── PORTFOLIO PHOTO CARDS ────────────────────────── */
.pf-photo {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform .7s ease;
}
.portfolio-item:hover .pf-photo { transform: scale(1.06); }

.pf-tint {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(5,5,8,.6), rgba(77,255,210,.05));
  transition: opacity .4s;
}
.portfolio-item:hover .pf-tint { opacity: .7; }

.pf-site-tag {
  position: absolute; top: 16px; left: 16px; z-index: 4;
  border: 1px solid rgba(77,255,210,.3);
  background: rgba(5,5,8,.75);
  color: var(--cyan);
  font-family: 'DM Mono', monospace;
  font-size: .6rem; letter-spacing: 3px;
  padding: 5px 12px;
  backdrop-filter: blur(8px);
  pointer-events: none;
}

/* ── FUTURISTIC BUTTON ───────────────────────────── */
.btn-futuristic {
  position: relative !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  overflow: visible !important;
  box-shadow: none !important;
}
.btn-futuristic .btn-label {
  display: flex; align-items: center; gap: 10px;
  padding: 15px 38px;
  background: linear-gradient(135deg, var(--cyan2), #0077cc);
  color: var(--black);
  font-family: 'DM Mono', monospace;
  font-size: .8rem; font-weight: 700;
  letter-spacing: 3px; text-transform: uppercase;
  position: relative; z-index: 1;
  transition: all .3s;
  clip-path: polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
}
.btn-futuristic:hover .btn-label {
  background: linear-gradient(135deg, #00ffcc, #0099ff);
  transform: translateY(-2px);
}
.btn-futuristic .btn-icon-pre {
  font-size: .9rem; opacity: .8;
  animation: iconSpin 4s linear infinite;
}
@keyframes iconSpin {
  0%,100% { transform: rotate(0deg); opacity:.8; }
  50%      { transform: rotate(180deg); opacity:1; }
}
.btn-futuristic .btn-arrow {
  font-size: 1rem;
  transition: transform .3s;
}
.btn-futuristic:hover .btn-arrow { transform: translateX(4px); }

/* Corner decorations */
.btn-fx-left, .btn-fx-right {
  position: absolute; width: 8px; height: 8px;
  border: 1.5px solid var(--cyan); z-index: 2;
  pointer-events: none;
  transition: all .3s;
}
.btn-fx-left  { top: -2px; left: -2px; border-right: none; border-bottom: none; }
.btn-fx-right { bottom: -2px; right: -2px; border-left: none; border-top: none; }
.btn-futuristic:hover .btn-fx-left  { top: -5px; left: -5px; }
.btn-futuristic:hover .btn-fx-right { bottom: -5px; right: -5px; }

/* Nav CTA futuristic version */
.nav-cta .nav-cta-inner {
  display: flex; align-items: center; gap: 6px;
  font-family: 'DM Mono', monospace;
  font-size: .72rem; letter-spacing: 2px;
}
.nav-cta .nav-cta-icon {
  font-size: .8rem;
  animation: iconSpin 4s linear infinite;
}

/* Mega CTA button */
.btn-cta-mega .btn-label {
  padding: 18px 52px;
  font-size: .9rem; letter-spacing: 4px;
}

/* ── NAV CTA FUTURISTIC CLIP ─────────────────────── */
.nav-cta {
  clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
  font-family: 'DM Mono', monospace;
}

/* ══════════════════════════════════════════════════
   PREMIUM FUTURISTIC FOOTER
══════════════════════════════════════════════════ */
#footer {
  position: relative;
  z-index: 10;
  background: rgba(5,5,8,0.97);
  backdrop-filter: blur(24px);
  overflow: hidden;
}

/* Animated top border */
.footer-glow-line {
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(77,255,210,0.6) 20%,
    rgba(77,255,210,1) 50%,
    rgba(0,153,255,0.6) 80%,
    transparent 100%);
  background-size: 200% 100%;
  animation: footerLineAnim 4s linear infinite;
}
@keyframes footerLineAnim {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Subtle hex pattern background */
#footer::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(77,255,210,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(77,255,210,0.025) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}

/* Corner bracket accents */
#footer::after {
  content: '';
  position: absolute;
  top: 40px; right: 5%;
  width: 80px; height: 80px;
  border-top: 1px solid rgba(77,255,210,0.12);
  border-right: 1px solid rgba(77,255,210,0.12);
  pointer-events: none;
}

/* ── Hero row ── */
.footer-hero {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0;
  padding: 70px 5% 56px;
  align-items: start;
}

/* ── Big logo ── */
.footer-hero-left {
  display: flex; flex-direction: column; gap: 20px;
}
.footer-big-logo {
  display: flex; align-items: baseline; gap: 0;
  line-height: 1;
}
.footer-logo-k {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(4rem, 8vw, 7rem);
  letter-spacing: -2px;
  background: linear-gradient(135deg, var(--cyan) 0%, #0099ff 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 20px rgba(77,255,210,0.4));
  line-height: 1;
}
.footer-logo-rest {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(4rem, 8vw, 7rem);
  letter-spacing: -2px;
  background: linear-gradient(135deg, var(--white) 0%, var(--silver) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  line-height: 1;
}
.footer-tagline {
  font-size: .85rem;
  color: var(--silver2);
  line-height: 1.8;
  max-width: 300px;
  font-family: 'DM Mono', monospace;
  font-size: .72rem;
  letter-spacing: 1px;
  border-left: 2px solid rgba(77,255,210,0.25);
  padding-left: 16px;
}

/* ── Social buttons ── */
.footer-socials {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-top: 4px;
}
.social-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 16px;
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.03);
  color: var(--silver2);
  text-decoration: none;
  font-size: .72rem;
  font-family: 'DM Mono', monospace;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  transition: all .3s;
  position: relative;
  overflow: hidden;
  clip-path: polygon(6px 0%, 100% 0%, calc(100% - 6px) 100%, 0% 100%);
}
.social-btn::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(77,255,210,0.08), transparent);
  opacity: 0; transition: opacity .3s;
}
.social-btn:hover {
  border-color: rgba(77,255,210,0.35);
  color: var(--cyan);
  transform: translateY(-2px);
}
.social-btn:hover::before { opacity: 1; }
.social-btn svg { flex-shrink: 0; }

/* ── Vertical divider ── */
.footer-divider-v {
  width: 1px;
  margin: 0 60px;
  background: linear-gradient(to bottom, transparent, rgba(77,255,210,0.2) 30%, rgba(77,255,210,0.2) 70%, transparent);
  align-self: stretch;
}

/* ── Link columns ── */
.footer-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.footer-col-title {
  font-family: 'DM Mono', monospace;
  font-size: .65rem;
  letter-spacing: 4px;
  color: var(--cyan);
  text-transform: uppercase;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.footer-col-dot {
  width: 5px; height: 5px;
  background: var(--cyan);
  border-radius: 50%;
  display: inline-block;
  animation: pulse 2s infinite;
  flex-shrink: 0;
}
.footer-col ul {
  list-style: none;
  display: flex; flex-direction: column; gap: 12px;
}
.footer-col a {
  color: var(--silver2);
  text-decoration: none;
  font-size: .82rem;
  font-family: 'Syne', sans-serif;
  transition: all .25s;
  display: flex; align-items: center; gap: 0;
  position: relative;
  padding-left: 0;
}
.footer-col a::before {
  content: '◦';
  color: var(--cyan);
  font-size: .7rem;
  opacity: 0;
  transform: translateX(-8px);
  transition: all .25s;
  margin-right: 0;
  width: 0;
  overflow: hidden;
}
.footer-col a:hover {
  color: var(--white);
  padding-left: 14px;
}
.footer-col a:hover::before {
  opacity: 1;
  transform: translateX(0);
  width: 14px;
  margin-right: 0;
  position: absolute; left: 0;
}

/* ── Bottom bar ── */
.footer-bottom-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 20px 5%;
  border-top: 1px solid rgba(255,255,255,0.05);
  background: rgba(0,0,0,0.3);
  position: relative;
}
.footer-copy {
  font-size: .68rem;
  color: rgba(136,153,176,0.6);
  font-family: 'DM Mono', monospace;
  letter-spacing: 1px;
}
.footer-status-wrap {
  display: flex; align-items: center; gap: 8px;
  font-family: 'DM Mono', monospace;
  font-size: .65rem;
  letter-spacing: 2px;
  color: var(--cyan);
  opacity: .7;
}
.footer-status-dot {
  width: 6px; height: 6px;
  background: var(--cyan);
  border-radius: 50%;
  animation: pulse 2s infinite;
  flex-shrink: 0;
}
.footer-built {
  font-size: .65rem;
  color: rgba(136,153,176,0.4);
  font-family: 'DM Mono', monospace;
  letter-spacing: 1px;
  text-align: right;
}

/* ── Responsive footer ── */
@media (max-width: 900px) {
  .footer-hero {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .footer-divider-v { display: none; }
  .footer-cols { grid-template-columns: repeat(3,1fr); }
  .footer-bottom-bar { grid-template-columns: 1fr; gap: 10px; text-align: center; }
  .footer-built { text-align: center; }
}
@media (max-width: 600px) {
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .footer-socials { gap: 8px; }
  .social-btn span { display: none; }
  .social-btn { padding: 8px 12px; }
}

/* ══════════════════════════════════════════════════
   PROCESS SECTION — IMAGE BACKGROUND + LOGO
══════════════════════════════════════════════════ */

#process {
  position: relative;
  overflow: hidden;
  background: #03050c !important;
}

/* Animated canvas sits behind everything */
#process-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* Gradient overlay — denser on left so text stays readable */
.process-bg-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    100deg,
    rgba(3,5,12,0.88) 0%,
    rgba(3,5,12,0.70) 50%,
    rgba(3,5,12,0.35) 100%
  );
  pointer-events: none;
}

/* All content sits above the overlays */
#process .process-header,
#process .process-timeline,
#process .process-logo-bar {
  position: relative;
  z-index: 2;
}

/* Enhance step cards to be slightly glassy against the bg */
#process .process-step {
  background: rgba(5,5,8,0.55);
  backdrop-filter: blur(6px);
  padding: 24px 24px 24px 0;
  border-bottom: 1px solid rgba(77,255,210,0.08);
  transition: background .3s, border-color .3s;
}
#process .process-step:hover {
  background: rgba(5,5,8,0.75);
  border-color: rgba(77,255,210,0.18);
}
#process .process-step:last-child {
  border-bottom: none;
}

/* Glow the step number a bit more */
#process .step-num {
  background: rgba(5,5,8,0.85);
  border-color: rgba(77,255,210,0.4);
  box-shadow: 0 0 20px rgba(77,255,210,0.1);
}
#process .process-step:hover .step-num {
  box-shadow: 0 0 30px rgba(77,255,210,0.25);
}

/* ── Logo bar at bottom of process section ── */
.process-logo-bar {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 72px;
  padding: 28px 36px;
  background: rgba(5,5,8,0.7);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(77,255,210,0.15);
  border-left: 3px solid var(--cyan);
  max-width: 420px;
  position: relative;
  /* Clip corner for futuristic feel */
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
}

/* Subtle glow behind the logo bar */
.process-logo-bar::before {
  content: '';
  position: absolute;
  inset: -1px;
  background: linear-gradient(135deg, rgba(77,255,210,0.06), transparent);
  z-index: -1;
}

.process-logo-img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid rgba(77,255,210,0.2);
  flex-shrink: 0;
  filter: brightness(1.1) contrast(1.05);
}

.process-logo-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.process-logo-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.6rem;
  letter-spacing: 4px;
  background: linear-gradient(135deg, var(--white), var(--cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
}

.process-logo-sub {
  font-family: 'DM Mono', monospace;
  font-size: .6rem;
  letter-spacing: 3px;
  color: var(--silver2);
  text-transform: uppercase;
}

/* ══════════════════════════════════════════════════
   FOOTER SVG LOGO MARK
══════════════════════════════════════════════════ */

.footer-brand-wrap {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 4px;
}

/* The SVG K diamond mark */
.footer-svg-mark {
  width: 52px;
  height: 62px;
  flex-shrink: 0;
  filter: drop-shadow(0 0 12px rgba(77,255,210,0.35));
  transition: filter .4s, transform .4s;
}
.footer-svg-mark:hover {
  filter: drop-shadow(0 0 24px rgba(77,255,210,0.6));
  transform: scale(1.05);
}

/* Wordmark next to the mark */
.footer-wordmark {
  display: flex;
  flex-direction: column;
  gap: 4px;
  line-height: 1;
}

/* Override big-logo inside footer-wordmark to be inline with mark */
.footer-wordmark .footer-big-logo {
  display: flex;
  align-items: baseline;
}
.footer-wordmark .footer-logo-k {
  font-size: clamp(2.8rem, 5vw, 4.5rem);
}
.footer-wordmark .footer-logo-rest {
  font-size: clamp(2.8rem, 5vw, 4.5rem);
}

.footer-logo-sub-text {
  font-family: 'DM Mono', monospace;
  font-size: .6rem;
  letter-spacing: 4px;
  color: var(--silver2);
  text-transform: uppercase;
  padding-left: 2px;
  border-left: 2px solid rgba(77,255,210,0.3);
  padding-left: 8px;
}

/* Animated subtle glow around the mark */
@keyframes markPulse {
  0%, 100% { filter: drop-shadow(0 0 10px rgba(77,255,210,0.25)); }
  50%       { filter: drop-shadow(0 0 22px rgba(77,255,210,0.5)); }
}
.footer-svg-mark {
  animation: markPulse 3s ease-in-out infinite;
}

/* ── Real Kovanta logo in footer ── */
.footer-real-logo {
  width: 280px;
  height: auto;
  object-fit: contain;
  /* The logo has a dark background so blend it in */
  filter: brightness(1.05) contrast(1.05) drop-shadow(0 0 16px rgba(77,255,210,0.2));
  transition: filter .4s, transform .4s;
  display: block;
}
.footer-real-logo:hover {
  filter: brightness(1.1) contrast(1.08) drop-shadow(0 0 28px rgba(77,255,210,0.4));
  transform: scale(1.02);
}