/* ═══════════════════════════════════════════════
   RAUL HENAO — style.css
   Dark Space Theme | Futuristic | High-Conversion
═══════════════════════════════════════════════ */

/* ── Variables ── */
:root {
  --bg:       #030318;
  --bg2:      #060625;
  --bg3:      #0a0a2e;
  --purple:   #6C63FF;
  --cyan:     #00D4FF;
  --green:    #00FF88;
  --pink:     #FF6B6B;
  --white:    #F0F4FF;
  --muted:    #8892B0;
  --border:   rgba(108,99,255,.25);
  --card-bg:  rgba(255,255,255,.03);
  --card-bg2: rgba(108,99,255,.07);
  --radius:   16px;
  --radius-lg:24px;
  --trans:    .3s cubic-bezier(.4,0,.2,1);
  --glow:     0 0 40px rgba(108,99,255,.4);
  --glow-cyan:0 0 40px rgba(0,212,255,.3);
}

/* ── Reset & Base ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden}
body{
  background:var(--bg);
  color:var(--white);
  font-family:'Space Grotesk',sans-serif;
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
  cursor:none;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
ul{list-style:none}
button{cursor:none;border:none;background:none;font-family:inherit}
select,input,textarea{font-family:inherit}

/* ── Custom Cursor ── */
.cursor{
  width:10px;height:10px;
  background:var(--purple);
  border-radius:50%;
  position:fixed;top:0;left:0;
  pointer-events:none;z-index:9999;
  transform:translate(-50%,-50%);
  transition:transform .1s, background .3s;
  mix-blend-mode:difference;
}
.cursor-follower{
  width:36px;height:36px;
  border:1.5px solid rgba(108,99,255,.5);
  border-radius:50%;
  position:fixed;top:0;left:0;
  pointer-events:none;z-index:9998;
  transform:translate(-50%,-50%);
  transition:transform .25s ease, opacity .3s;
}
body:hover .cursor-follower{opacity:1}
a:hover ~ .cursor, button:hover ~ .cursor{transform:translate(-50%,-50%) scale(2)}

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

/* ── Typography ── */
h1,h2,h3,h4{font-weight:700;line-height:1.15;letter-spacing:-.02em}
h1{font-size:clamp(2.8rem,6vw,5.5rem)}
h2{font-size:clamp(2rem,4vw,3.2rem)}
h3{font-size:clamp(1.1rem,2vw,1.4rem)}
p{color:var(--muted);line-height:1.75}

.gtext{
  background:linear-gradient(135deg,var(--purple),var(--cyan));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

/* ── Container ── */
.container{max-width:1180px;margin:0 auto;padding:0 24px}

/* ── Buttons ── */
.btn-primary{
  display:inline-flex;align-items:center;gap:10px;
  background:linear-gradient(135deg,var(--purple),var(--cyan));
  color:#fff;font-weight:600;font-size:.95rem;letter-spacing:.02em;
  padding:14px 32px;border-radius:50px;
  position:relative;overflow:hidden;
  transition:var(--trans);
  box-shadow:0 4px 24px rgba(108,99,255,.4);
  cursor:pointer;
}
.btn-primary::before{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(135deg,var(--cyan),var(--purple));
  opacity:0;transition:var(--trans);
}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 8px 40px rgba(108,99,255,.6)}
.btn-primary:hover::before{opacity:1}
.btn-primary span,.btn-primary svg{position:relative;z-index:1}
.btn-primary.btn-lg{padding:17px 40px;font-size:1.05rem}
.btn-primary.btn-full{width:100%;justify-content:center}

.btn-ghost{
  display:inline-flex;align-items:center;gap:10px;
  border:1.5px solid var(--border);
  color:var(--white);font-weight:600;font-size:.95rem;
  padding:13px 30px;border-radius:50px;
  transition:var(--trans);backdrop-filter:blur(8px);
  background:rgba(108,99,255,.05);
}
.btn-ghost:hover{border-color:var(--purple);background:rgba(108,99,255,.15);transform:translateY(-2px)}

.btn-wa{
  display:inline-flex;align-items:center;gap:10px;
  background:#25D366;color:#fff;font-weight:600;font-size:.95rem;
  padding:14px 30px;border-radius:50px;
  transition:var(--trans);
  box-shadow:0 4px 20px rgba(37,211,102,.3);
}
.btn-wa:hover{background:#20bc5a;transform:translateY(-3px);box-shadow:0 8px 30px rgba(37,211,102,.5)}
.btn-wa.btn-lg{padding:17px 36px;font-size:1.05rem}

/* ── Section Headers ── */
.section-header{text-align:center;margin-bottom:64px}
.section-tag{
  display:inline-block;
  background:rgba(108,99,255,.15);
  border:1px solid rgba(108,99,255,.3);
  color:var(--purple);
  font-size:.8rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  padding:6px 18px;border-radius:50px;margin-bottom:16px;
}
.section-header h2{margin-bottom:16px}
.section-header p{max-width:560px;margin:0 auto;font-size:1.05rem}

/* ── Scroll Animations ── */
[data-scroll]{opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .7s ease}
[data-scroll].visible{opacity:1;transform:none}

/* ──────────────────────────────────
   LOADER
────────────────────────────────── */
#loader{
  position:fixed;inset:0;z-index:10000;
  background:var(--bg);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .6s ease, visibility .6s ease;
}
#loader.done{opacity:0;visibility:hidden}
.loader-inner{text-align:center}
.loader-logo{
  font-family:'Orbitron',sans-serif;
  font-size:3rem;font-weight:900;
  background:linear-gradient(135deg,var(--purple),var(--cyan));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  margin-bottom:24px;
  animation:pulse 1.5s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
.loader-bar-wrap{
  width:200px;height:3px;
  background:rgba(255,255,255,.1);
  border-radius:10px;margin:0 auto 16px;overflow:hidden;
}
.loader-bar{
  height:100%;width:0;
  background:linear-gradient(90deg,var(--purple),var(--cyan));
  border-radius:10px;
  animation:load 1.8s ease forwards;
}
@keyframes load{0%{width:0}100%{width:100%}}
.loader-text{color:var(--muted);font-size:.85rem;letter-spacing:.08em}

/* ──────────────────────────────────
   NAVBAR
────────────────────────────────── */
#navbar{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  padding:20px 0;
  transition:var(--trans);
}
#navbar.scrolled{
  background:rgba(3,3,24,.85);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  padding:12px 0;
  box-shadow:0 4px 30px rgba(0,0,0,.4);
}
.nav-container{
  max-width:1180px;margin:0 auto;padding:0 24px;
  display:flex;align-items:center;gap:40px;
}
.nav-logo{
  display:flex;align-items:center;gap:6px;
  font-family:'Orbitron',sans-serif;font-weight:700;font-size:1.1rem;
  letter-spacing:.04em;flex-shrink:0;
}
.logo-rh{color:var(--white)}
.logo-accent{color:var(--purple)}
.logo-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--cyan);
  animation:blink 2s ease-in-out infinite;
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.2}}

.nav-links{display:flex;align-items:center;gap:32px;flex:1}
.nav-link{
  color:var(--muted);font-size:.9rem;font-weight:500;
  position:relative;transition:color .3s;
}
.nav-link::after{
  content:'';position:absolute;bottom:-4px;left:0;width:0;height:2px;
  background:linear-gradient(90deg,var(--purple),var(--cyan));
  transition:width .3s;border-radius:2px;
}
.nav-link:hover{color:var(--white)}
.nav-link:hover::after{width:100%}

.btn-nav-cta{
  display:inline-flex;align-items:center;gap:6px;
  background:linear-gradient(135deg,var(--purple),var(--cyan));
  color:#fff;font-weight:600;font-size:.85rem;
  padding:10px 22px;border-radius:50px;
  transition:var(--trans);margin-left:auto;flex-shrink:0;
  box-shadow:0 4px 20px rgba(108,99,255,.3);
}
.btn-nav-cta:hover{transform:translateY(-2px);box-shadow:0 6px 30px rgba(108,99,255,.5)}

.hamburger{display:none;flex-direction:column;gap:5px;width:24px;margin-left:auto}
.hamburger span{
  display:block;height:2px;width:100%;
  background:var(--white);border-radius:2px;
  transition:var(--trans);transform-origin:center;
}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mobile-menu{
  display:none;
  position:absolute;top:100%;left:0;right:0;
  background:rgba(6,6,37,.97);backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  padding:24px;
}
.mobile-menu.open{display:block}
.mobile-menu ul{display:flex;flex-direction:column;gap:16px}
.mobile-menu a{color:var(--muted);font-weight:500;padding:8px 0;display:block;transition:color .3s}
.mobile-menu a:hover{color:var(--white)}
.mobile-menu .btn-nav-cta{margin-top:8px;display:inline-flex;width:100%;justify-content:center}

/* ──────────────────────────────────
   HERO
────────────────────────────────── */
.hero{
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
  padding:120px 24px 80px;
}
#heroCanvas{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:0;
}
.hero-grid-overlay{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(108,99,255,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(108,99,255,.06) 1px,transparent 1px);
  background-size:60px 60px;
  pointer-events:none;z-index:0;
  mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black,transparent);
}
.hero-content{
  position:relative;z-index:2;
  max-width:860px;text-align:center;
}

.hero-badge{
  display:inline-flex;align-items:center;gap:10px;
  background:rgba(0,212,255,.08);border:1px solid rgba(0,212,255,.2);
  color:var(--cyan);font-size:.82rem;font-weight:500;letter-spacing:.06em;
  padding:8px 20px;border-radius:50px;margin-bottom:28px;
  opacity:0;animation:fadeInDown .8s .3s forwards;
}
.badge-pulse{
  width:8px;height:8px;border-radius:50%;background:var(--green);
  animation:pulseBadge 1.5s ease-in-out infinite;
}
@keyframes pulseBadge{0%,100%{box-shadow:0 0 0 0 rgba(0,255,136,.4)}70%{box-shadow:0 0 0 8px rgba(0,255,136,0)}}

.hero-title{
  margin-bottom:24px;
  opacity:0;animation:fadeInUp .9s .5s forwards;
}
.hero-line-1{
  font-family:'Orbitron',sans-serif;
  font-weight:900;
  background:linear-gradient(135deg,#fff 40%,rgba(108,99,255,.8));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.hero-line-2{
  font-size:clamp(2rem,5vw,4.5rem);
  color:var(--white);font-weight:700;
}
.typed-wrapper{
  background:linear-gradient(135deg,var(--purple),var(--cyan));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.typed-cursor{
  -webkit-text-fill-color:var(--cyan);
  animation:blink .7s infinite;
}

.hero-desc{
  font-size:1.15rem;color:var(--muted);max-width:620px;margin:0 auto 36px;
  opacity:0;animation:fadeInUp .9s .7s forwards;
}
.hero-ctas{
  display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;
  margin-bottom:40px;
  opacity:0;animation:fadeInUp .9s .9s forwards;
}
.hero-trust{
  display:flex;justify-content:center;flex-wrap:wrap;gap:12px;
  opacity:0;animation:fadeInUp .9s 1.1s forwards;
}
.trust-chip{
  display:flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  padding:8px 16px;border-radius:50px;font-size:.82rem;color:var(--muted);
  transition:var(--trans);
}
.trust-chip:hover{border-color:var(--border);color:var(--white)}

/* Orbs */
.orb{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none;z-index:1}
.orb-1{width:500px;height:500px;background:rgba(108,99,255,.15);top:-100px;left:-200px;animation:float1 8s ease-in-out infinite}
.orb-2{width:400px;height:400px;background:rgba(0,212,255,.1);bottom:-100px;right:-150px;animation:float2 10s ease-in-out infinite}
.orb-3{width:300px;height:300px;background:rgba(255,107,107,.08);top:50%;left:50%;transform:translate(-50%,-50%);animation:float3 12s ease-in-out infinite}
@keyframes float1{0%,100%{transform:translate(0,0)}50%{transform:translate(30px,-30px)}}
@keyframes float2{0%,100%{transform:translate(0,0)}50%{transform:translate(-20px,20px)}}
@keyframes float3{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,-55%)}}

.hero-scroll{
  position:absolute;bottom:32px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  color:var(--muted);font-size:.75rem;letter-spacing:.08em;
  opacity:0;animation:fadeIn 1s 1.5s forwards;z-index:2;
}
.scroll-mouse{
  width:22px;height:36px;border:2px solid rgba(255,255,255,.2);
  border-radius:12px;display:flex;justify-content:center;padding-top:6px;
}
.scroll-wheel{
  width:4px;height:8px;background:var(--purple);border-radius:2px;
  animation:scrollWheel 1.5s ease-in-out infinite;
}
@keyframes scrollWheel{0%{transform:translateY(0);opacity:1}100%{transform:translateY(12px);opacity:0}}

/* ── Glitch Effect ── */
.glitch{position:relative}
.glitch::before,.glitch::after{
  content:attr(data-text);
  position:absolute;top:0;left:0;width:100%;height:100%;
}
.glitch::before{
  color:var(--cyan);z-index:-1;
  animation:glitch1 3s infinite;clip-path:polygon(0 0,100% 0,100% 40%,0 40%);
}
.glitch::after{
  color:var(--pink);z-index:-2;
  animation:glitch2 3s infinite;clip-path:polygon(0 60%,100% 60%,100% 100%,0 100%);
}
@keyframes glitch1{
  0%,90%,100%{transform:none;opacity:0}
  91%{transform:translate(-2px,-1px);opacity:.6}
  93%{transform:translate(2px,1px);opacity:.6}
  95%{transform:translate(-1px,2px);opacity:.4}
}
@keyframes glitch2{
  0%,90%,100%{transform:none;opacity:0}
  92%{transform:translate(2px,1px);opacity:.5}
  94%{transform:translate(-2px,-1px);opacity:.5}
  96%{transform:translate(1px,-1px);opacity:.3}
}

/* ──────────────────────────────────
   MARQUEE
────────────────────────────────── */
.marquee-section{
  padding:20px 0;
  background:linear-gradient(90deg,transparent,rgba(108,99,255,.05),transparent);
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  overflow:hidden;
}
.marquee-label{
  text-align:center;font-size:.7rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin-bottom:10px;
}
.marquee-track{overflow:hidden}
.marquee-inner{
  display:flex;align-items:center;gap:32px;width:max-content;
  animation:marquee 25s linear infinite;
  font-size:.85rem;font-weight:500;color:var(--muted);
}
.marquee-inner:hover{animation-play-state:paused}
.marquee-inner span:not(.mx){
  color:var(--white);transition:color .3s;cursor:default;
}
.marquee-inner span:not(.mx):hover{color:var(--cyan)}
.mx{color:var(--purple);font-size:.6rem}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ──────────────────────────────────
   STATS
────────────────────────────────── */
.stats-section{padding:80px 0;position:relative}
.stats-section::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 60% 80% at 50% 50%,rgba(108,99,255,.06),transparent);
}
.stats-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
  position:relative;
}
.stat-card{
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:36px 24px;text-align:center;
  transition:var(--trans);position:relative;overflow:hidden;
  opacity:0;transform:translateY(30px);
}
.stat-card.visible{opacity:1;transform:none}
.stat-card::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(108,99,255,.1),transparent);
  opacity:0;transition:var(--trans);
}
.stat-card:hover{border-color:var(--purple);transform:translateY(-6px);box-shadow:var(--glow)}
.stat-card:hover::before{opacity:1}
.stat-icon-wrap{font-size:2.2rem;margin-bottom:16px;display:block}
.stat-number{
  font-family:'Orbitron',sans-serif;
  font-size:clamp(2.2rem,4vw,3rem);font-weight:900;
  background:linear-gradient(135deg,var(--purple),var(--cyan));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  display:flex;align-items:baseline;justify-content:center;gap:4px;margin-bottom:8px;
}
.stat-suffix{font-size:1.8rem}
.stat-label{font-size:.85rem;color:var(--muted);font-weight:500}

/* ──────────────────────────────────
   SERVICES
────────────────────────────────── */
.services-section{padding:100px 0;position:relative;overflow:hidden}
.services-section::before{
  content:'';position:absolute;top:0;right:-200px;width:600px;height:600px;
  background:radial-gradient(circle,rgba(108,99,255,.1),transparent 70%);
  pointer-events:none;
}
.services-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
}
.srv-card{
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:36px 28px;
  position:relative;overflow:hidden;
  transition:var(--trans);
  opacity:0;transform:translateY(30px);
}
.srv-card.visible{opacity:1;transform:none}
.srv-glow{
  position:absolute;top:-60px;right:-60px;
  width:160px;height:160px;border-radius:50%;
  background:radial-gradient(circle,rgba(108,99,255,.2),transparent 70%);
  transition:var(--trans);pointer-events:none;
}
.srv-card:hover{
  border-color:var(--purple);
  transform:translateY(-8px);
  box-shadow:0 20px 60px rgba(108,99,255,.25),var(--glow);
  background:var(--card-bg2);
}
.srv-card:hover .srv-glow{transform:scale(1.5);opacity:.8}
.srv-featured{
  border-color:rgba(108,99,255,.5);
  background:linear-gradient(135deg,rgba(108,99,255,.1),rgba(0,212,255,.05));
}
.srv-badge{
  display:inline-block;
  background:linear-gradient(135deg,var(--purple),var(--cyan));
  color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.06em;
  padding:5px 14px;border-radius:50px;margin-bottom:20px;
}
.srv-icon{
  width:64px;height:64px;
  background:linear-gradient(135deg,rgba(108,99,255,.2),rgba(0,212,255,.1));
  border:1px solid rgba(108,99,255,.3);
  border-radius:var(--radius);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:20px;color:var(--cyan);
  transition:var(--trans);
}
.srv-card:hover .srv-icon{background:linear-gradient(135deg,var(--purple),var(--cyan));border-color:transparent;color:#fff}
.srv-card h3{font-size:1.2rem;margin-bottom:12px;color:var(--white)}
.srv-card p{font-size:.9rem;margin-bottom:20px;color:var(--muted)}
.srv-list{display:flex;flex-direction:column;gap:8px;margin-bottom:24px}
.srv-list li{
  font-size:.85rem;color:var(--muted);padding-left:18px;position:relative;
}
.srv-list li::before{
  content:'›';position:absolute;left:0;color:var(--cyan);font-weight:700;
}
.srv-link{
  font-size:.88rem;font-weight:600;color:var(--purple);
  transition:color .3s, gap .3s;display:inline-flex;align-items:center;gap:6px;
}
.srv-link:hover{color:var(--cyan)}

/* ──────────────────────────────────
   WHY ME
────────────────────────────────── */
.why-section{padding:100px 0;position:relative;overflow:hidden}
.why-section::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(108,99,255,.04),rgba(0,212,255,.02));
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
}
.why-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;
  position:relative;
}
.why-content[data-scroll]{opacity:0;transform:translateX(-40px);transition:opacity .8s ease,transform .8s ease}
.why-content.visible{opacity:1;transform:none}
.why-content .section-tag{margin-bottom:12px;display:inline-block}
.why-content h2{margin-bottom:20px}
.why-desc{margin-bottom:36px;font-size:1rem}
.why-features{display:flex;flex-direction:column;gap:24px;margin-bottom:36px}
.why-feat{display:flex;gap:16px;align-items:flex-start}
.why-feat-icon{
  width:48px;height:48px;flex-shrink:0;
  background:rgba(108,99,255,.12);border:1px solid var(--border);
  border-radius:12px;display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;transition:var(--trans);
}
.why-feat:hover .why-feat-icon{background:rgba(108,99,255,.25);border-color:var(--purple)}
.why-feat-text strong{display:block;color:var(--white);font-weight:600;margin-bottom:4px;font-size:.95rem}
.why-feat-text p{font-size:.88rem;margin:0}

/* Floating cards */
.why-visual[data-scroll]{opacity:0;transform:translateX(40px);transition:opacity .8s ease,transform .8s ease}
.why-visual.visible{opacity:1;transform:none}
.float-cards{position:relative;height:420px}
.float-card{
  position:absolute;
  background:rgba(6,6,37,.9);backdrop-filter:blur(20px);
  border:1px solid var(--border);border-radius:var(--radius);
  padding:16px 20px;
  display:flex;align-items:center;gap:14px;
  box-shadow:0 20px 60px rgba(0,0,0,.4);
  min-width:220px;
  transition:var(--trans);
}
.float-card:hover{transform:translateY(-6px) scale(1.02);border-color:var(--purple);box-shadow:var(--glow)}
.fc-a{top:0;left:0;animation:fc1 4s ease-in-out infinite}
.fc-b{top:80px;right:0;animation:fc2 5s ease-in-out infinite}
.fc-c{bottom:80px;left:20px;animation:fc3 4.5s ease-in-out infinite}
.fc-d{bottom:0;right:30px;animation:fc4 3.5s ease-in-out infinite}
@keyframes fc1{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes fc2{0%,100%{transform:translateY(0)}50%{transform:translateY(10px)}}
@keyframes fc3{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes fc4{0%,100%{transform:translateY(0)}50%{transform:translateY(12px)}}
.fc-emoji{font-size:1.8rem;flex-shrink:0}
.fc-info span{display:block;font-size:.72rem;color:var(--muted);margin-bottom:3px}
.fc-info strong{font-size:.92rem;color:var(--white);font-weight:600}

/* ──────────────────────────────────
   PORTFOLIO
────────────────────────────────── */
.portfolio-section{padding:100px 0}
.pf-filters{
  display:flex;justify-content:center;gap:12px;margin-bottom:48px;flex-wrap:wrap;
}
.pf-filter{
  background:rgba(255,255,255,.05);border:1px solid var(--border);
  color:var(--muted);font-size:.85rem;font-weight:500;
  padding:9px 22px;border-radius:50px;
  transition:var(--trans);cursor:pointer;
}
.pf-filter:hover,.pf-filter.active{
  background:linear-gradient(135deg,var(--purple),var(--cyan));
  border-color:transparent;color:#fff;
  box-shadow:0 4px 20px rgba(108,99,255,.3);
}
.pf-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
}
.pf-item{transition:var(--trans);opacity:1}
.pf-item.hidden{opacity:0;pointer-events:none;transform:scale(.9)}
.pf-card{
  background:var(--card-bg);border:1px solid var(--border);
  border-radius:var(--radius-lg);overflow:hidden;
  transition:var(--trans);
  opacity:0;transform:translateY(30px);
}
.pf-card.visible{opacity:1;transform:none}
.pf-card:hover{transform:translateY(-8px);box-shadow:0 20px 60px rgba(0,0,0,.4),var(--glow)}
.pf-thumb{
  height:200px;position:relative;overflow:hidden;
  background:var(--g);
  display:flex;align-items:center;justify-content:center;
}
.pf-thumb-bg{position:absolute;inset:0;background:var(--g);opacity:.7}
.pf-overlay{
  position:absolute;inset:0;background:rgba(3,3,24,.85);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:var(--trans);
}
.pf-card:hover .pf-overlay{opacity:1}
.pf-overlay-btn{
  background:linear-gradient(135deg,var(--purple),var(--cyan));
  color:#fff;padding:10px 22px;border-radius:50px;font-weight:600;font-size:.85rem;
  transform:translateY(10px);transition:var(--trans);
}
.pf-card:hover .pf-overlay-btn{transform:translateY(0)}

/* Mock browser */
.mock-browser{
  width:200px;background:rgba(3,3,24,.9);border-radius:10px;
  overflow:hidden;border:1px solid rgba(255,255,255,.1);
  position:relative;z-index:2;
}
.mb-bar{
  height:22px;background:rgba(255,255,255,.06);
  display:flex;align-items:center;padding:0 10px;gap:5px;
}
.mb-bar span{width:6px;height:6px;border-radius:50%}
.mb-bar span:nth-child(1){background:#FF5F57}
.mb-bar span:nth-child(2){background:#FFBD2E}
.mb-bar span:nth-child(3){background:#28CA41}
.mb-body{padding:10px;display:flex;flex-direction:column;gap:6px}
.mb-hero{height:60px;background:linear-gradient(135deg,rgba(108,99,255,.4),rgba(0,212,255,.2));border-radius:6px}
.mb-lines div,.mp-rows div{height:6px;background:rgba(255,255,255,.1);border-radius:3px;margin-bottom:4px}
.mb-lines div:nth-child(2){width:80%}
.mb-lines div:nth-child(3){width:60%}
.mb-prods{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:5px 0}
.mb-prods div{height:40px;background:rgba(255,255,255,.07);border-radius:5px}

/* Mock phone */
.mock-phone{
  width:100px;background:rgba(3,3,24,.9);border-radius:16px;
  overflow:hidden;border:1px solid rgba(255,255,255,.1);
  position:relative;z-index:2;
}
.mp-screen{padding:8px}
.mp-header{height:20px;background:linear-gradient(90deg,rgba(108,99,255,.5),rgba(0,212,255,.3));border-radius:4px;margin-bottom:6px}
.mp-rows div{height:7px;background:rgba(255,255,255,.1);border-radius:3px;margin-bottom:4px}

.pf-info{padding:20px 22px 22px}
.pf-tag{
  font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--cyan);margin-bottom:8px;display:inline-block;
}
.pf-info h3{font-size:1rem;margin-bottom:6px;color:var(--white)}
.pf-info p{font-size:.82rem;color:var(--muted);margin-bottom:12px}
.pf-stats{display:flex;gap:10px}
.pf-stats span{
  background:rgba(108,99,255,.12);border:1px solid rgba(108,99,255,.2);
  color:var(--purple);font-size:.72rem;font-weight:600;
  padding:4px 10px;border-radius:50px;
}

/* ──────────────────────────────────
   PROCESS
────────────────────────────────── */
.process-section{padding:100px 0;position:relative}
.process-section::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent,rgba(108,99,255,.04),transparent);
}
.process-steps{
  display:flex;align-items:flex-start;gap:0;
  position:relative;
}
.ps-item{
  flex:1;text-align:center;position:relative;
  opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .7s ease;
}
.ps-item.visible{opacity:1;transform:none}
.ps-num{
  font-family:'Orbitron',sans-serif;
  font-size:3.5rem;font-weight:900;
  color:rgba(108,99,255,.15);
  line-height:1;margin-bottom:-20px;
}
.ps-body{
  background:var(--card-bg);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:28px 20px;
  margin:0 8px;transition:var(--trans);
}
.ps-item:hover .ps-body{border-color:var(--purple);box-shadow:var(--glow);transform:translateY(-4px)}
.ps-emoji{font-size:2rem;margin-bottom:12px}
.ps-body h3{font-size:1rem;margin-bottom:8px;color:var(--white)}
.ps-body p{font-size:.82rem;color:var(--muted)}
.ps-time{
  display:inline-block;
  background:linear-gradient(135deg,rgba(108,99,255,.2),rgba(0,212,255,.1));
  border:1px solid rgba(108,99,255,.3);
  color:var(--cyan);font-size:.72rem;font-weight:600;
  padding:4px 12px;border-radius:50px;margin-top:14px;
}
.ps-connector{
  flex:0 0 60px;height:2px;
  background:linear-gradient(90deg,var(--purple),var(--cyan));
  margin-top:60px;position:relative;
  opacity:.4;
}
.ps-connector::after{
  content:'';position:absolute;right:-5px;top:-4px;
  width:10px;height:10px;border-radius:50%;
  background:var(--cyan);
}

/* ──────────────────────────────────
   PRICING
────────────────────────────────── */
.pricing-section{padding:100px 0}
.urgency-bar{
  background:linear-gradient(135deg,rgba(255,107,107,.1),rgba(255,165,0,.08));
  border:1px solid rgba(255,107,107,.3);
  border-radius:var(--radius);
  padding:16px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  margin-bottom:48px;flex-wrap:wrap;
}
.urgency-left{display:flex;align-items:center;gap:12px;font-size:.9rem;color:var(--white)}
.urg-fire{font-size:1.4rem}
.countdown{display:flex;align-items:center;gap:8px;flex-shrink:0}
.cd-item{text-align:center}
.cd-item span{
  display:block;font-family:'Orbitron',sans-serif;font-weight:700;font-size:1.4rem;
  color:var(--pink);line-height:1;
}
.cd-item small{font-size:.62rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.cd-sep{font-size:1.2rem;color:var(--pink);font-weight:700;margin-bottom:12px}

.pricing-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:32px;
}
.price-card{
  background:var(--card-bg);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:36px 28px;
  position:relative;transition:var(--trans);
  opacity:0;transform:translateY(30px);
}
.price-card.visible{opacity:1;transform:none}
.price-card:hover{border-color:var(--purple);transform:translateY(-8px);box-shadow:var(--glow)}
.price-featured{
  border-color:rgba(108,99,255,.6);
  background:linear-gradient(135deg,rgba(108,99,255,.12),rgba(0,212,255,.06));
  transform:scale(1.04);
}
.price-featured:hover{transform:scale(1.04) translateY(-8px)}
.pc-badge{
  position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  background:linear-gradient(135deg,var(--purple),var(--cyan));
  color:#fff;font-size:.75rem;font-weight:700;letter-spacing:.04em;
  padding:6px 20px;border-radius:50px;white-space:nowrap;
}
.pc-header{margin-bottom:28px}
.pc-plan{font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan);margin-bottom:12px;display:block}
.pc-price{display:flex;align-items:baseline;gap:8px;margin-bottom:8px}
.pc-old{font-size:1.1rem;color:var(--muted);text-decoration:line-through}
.pc-current{
  font-family:'Orbitron',sans-serif;font-weight:900;
  font-size:2.4rem;
  background:linear-gradient(135deg,var(--white),rgba(108,99,255,.9));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.pc-cur{font-size:.85rem;color:var(--muted);font-weight:600}
.pc-sub{font-size:.85rem;color:var(--muted)}
.pc-features{display:flex;flex-direction:column;gap:10px;margin-bottom:28px}
.pc-features li{font-size:.87rem;padding-left:4px}
.pc-features li.yes{color:var(--white)}
.pc-features li.no{color:rgba(255,255,255,.25);text-decoration:line-through}
.pc-btn{
  display:block;text-align:center;
  border:1.5px solid var(--purple);color:var(--purple);
  font-weight:700;font-size:.9rem;
  padding:13px;border-radius:50px;
  transition:var(--trans);
}
.pc-btn:hover{background:var(--purple);color:#fff;box-shadow:0 4px 20px rgba(108,99,255,.4)}
.pc-btn-featured{
  background:linear-gradient(135deg,var(--purple),var(--cyan));
  border-color:transparent;color:#fff;
  box-shadow:0 4px 24px rgba(108,99,255,.4);
}
.pc-btn-featured:hover{box-shadow:0 8px 40px rgba(108,99,255,.6);transform:translateY(-2px)}
.pricing-note{text-align:center;font-size:.9rem;color:var(--muted)}
.pricing-note a{color:var(--purple);font-weight:600}
.pricing-note a:hover{color:var(--cyan)}

/* ──────────────────────────────────
   TESTIMONIALS
────────────────────────────────── */
.testimonials-section{padding:100px 0}
.tst-swiper{padding-bottom:50px !important}
.tst-card{
  background:var(--card-bg);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:36px;height:100%;
  transition:var(--trans);
}
.tst-card:hover{border-color:var(--purple);box-shadow:var(--glow)}
.tst-stars{color:#FFD700;font-size:1.1rem;margin-bottom:16px;letter-spacing:3px}
.tst-card>p{font-size:.95rem;color:var(--white);line-height:1.7;margin-bottom:24px;font-style:italic}
.tst-author{display:flex;align-items:center;gap:14px}
.tst-avatar{
  width:46px;height:46px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:.9rem;color:#fff;
}
.tst-info strong{display:block;color:var(--white);font-size:.9rem;font-weight:600;margin-bottom:3px}
.tst-info span{font-size:.78rem;color:var(--muted)}

.swiper-pagination-bullet{background:var(--purple) !important;opacity:.4}
.swiper-pagination-bullet-active{opacity:1 !important}
.swiper-button-next,.swiper-button-prev{color:var(--purple) !important}
.swiper-button-next::after,.swiper-button-prev::after{font-size:1rem !important}

/* ──────────────────────────────────
   FAQ
────────────────────────────────── */
.faq-section{padding:100px 0}
.faq-list{max-width:780px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq-item{
  background:var(--card-bg);border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden;
  transition:border-color .3s;
  opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease;
}
.faq-item.visible{opacity:1;transform:none}
.faq-item.open{border-color:var(--purple)}
.faq-q{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:20px 24px;text-align:left;
  font-size:.95rem;font-weight:600;color:var(--white);
  cursor:pointer;transition:color .3s;
}
.faq-q:hover{color:var(--cyan)}
.faq-q span{
  font-size:1.3rem;color:var(--purple);flex-shrink:0;
  transition:transform .3s;display:inline-block;
}
.faq-item.open .faq-q span{transform:rotate(45deg)}
.faq-a{
  max-height:0;overflow:hidden;
  transition:max-height .4s ease,padding .3s ease;
}
.faq-a p{padding:0 24px 20px;font-size:.88rem;color:var(--muted);line-height:1.8}
.faq-item.open .faq-a{max-height:300px}

/* ──────────────────────────────────
   AI DASHBOARD SECTION
────────────────────────────────── */
.ai-section{padding:100px 0;position:relative;overflow:hidden}
.ai-section::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(0,212,255,.06),transparent);
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
}
.ai-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;
}

/* Dashboard panel */
.ai-dashboard{
  background:rgba(6,6,37,.9);border:1px solid rgba(0,212,255,.2);
  border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:0 20px 80px rgba(0,212,255,.1);
}
.dash-header{
  background:rgba(0,212,255,.07);border-bottom:1px solid rgba(0,212,255,.15);
  padding:14px 20px;
  display:flex;align-items:center;gap:12px;
}
.dash-dots{display:flex;gap:6px}
.dash-dots span{width:8px;height:8px;border-radius:50%}
.dash-dots span:nth-child(1){background:#FF5F57}
.dash-dots span:nth-child(2){background:#FFBD2E}
.dash-dots span:nth-child(3){background:#28CA41}
.dash-title{font-size:.75rem;font-weight:600;color:var(--cyan);letter-spacing:.08em;text-transform:uppercase;flex:1;text-align:center}
.dash-status{
  font-size:.7rem;color:var(--green);display:flex;align-items:center;gap:5px;
}
.dash-status::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--green);animation:pulseBadge 1.5s infinite}

.dash-body{padding:20px}
.dash-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px}
.kpi-card{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);
  border-radius:12px;padding:14px;text-align:center;
  transition:var(--trans);
}
.kpi-card:hover{border-color:rgba(0,212,255,.3);background:rgba(0,212,255,.05)}
.kpi-value{
  font-family:'Orbitron',sans-serif;font-weight:700;font-size:1.4rem;
  background:linear-gradient(135deg,var(--cyan),var(--green));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  margin-bottom:4px;
}
.kpi-label{font-size:.68rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.kpi-change{font-size:.72rem;color:var(--green);margin-top:3px}

/* Chart */
.chart-area{margin-bottom:20px}
.chart-title{font-size:.75rem;color:var(--muted);margin-bottom:12px;text-transform:uppercase;letter-spacing:.06em}
.chart-bars{display:flex;align-items:flex-end;gap:6px;height:80px}
.chart-bar{
  flex:1;border-radius:4px 4px 0 0;
  background:linear-gradient(0deg,var(--purple),var(--cyan));
  opacity:.7;transition:opacity .3s, height .8s ease;cursor:pointer;position:relative;
}
.chart-bar:hover{opacity:1}
.chart-bar::after{
  content:attr(data-v);
  position:absolute;top:-20px;left:50%;transform:translateX(-50%);
  font-size:.65rem;color:var(--cyan);font-weight:600;opacity:0;
  transition:opacity .2s;white-space:nowrap;
}
.chart-bar:hover::after{opacity:1}
.chart-labels{display:flex;gap:6px;margin-top:6px}
.chart-labels span{flex:1;font-size:.65rem;color:var(--muted);text-align:center}

/* Map */
.world-map-wrap{
  margin-bottom:20px;
  background:rgba(0,212,255,.03);border:1px solid rgba(0,212,255,.1);
  border-radius:12px;padding:16px;overflow:hidden;
}
.map-title{font-size:.75rem;color:var(--muted);margin-bottom:12px;text-transform:uppercase;letter-spacing:.06em}
.world-map{position:relative;height:140px;overflow:hidden}
.map-svg{width:100%;height:100%;opacity:.3}
.map-dots{position:absolute;inset:0}
.map-dot{
  position:absolute;
  width:10px;height:10px;border-radius:50%;
  background:var(--cyan);
  animation:mapPulse 2s ease-in-out infinite;
  cursor:pointer;
}
.map-dot::before{
  content:'';position:absolute;
  width:100%;height:100%;border-radius:50%;
  background:var(--cyan);animation:ripple 2s ease-out infinite;
}
.map-dot .dot-tooltip{
  position:absolute;bottom:16px;left:50%;transform:translateX(-50%);
  background:rgba(6,6,37,.95);border:1px solid rgba(0,212,255,.3);
  color:var(--cyan);font-size:.65rem;font-weight:600;
  padding:4px 10px;border-radius:6px;white-space:nowrap;
  opacity:0;transition:opacity .2s;pointer-events:none;
}
.map-dot:hover .dot-tooltip{opacity:1}
@keyframes mapPulse{0%,100%{box-shadow:0 0 0 0 rgba(0,212,255,.6)}50%{box-shadow:0 0 0 6px rgba(0,212,255,0)}}
@keyframes ripple{0%{transform:scale(1);opacity:.6}100%{transform:scale(3.5);opacity:0}}

/* Activity feed */
.activity-feed{border-top:1px solid rgba(255,255,255,.05);padding-top:14px}
.feed-title{font-size:.75rem;color:var(--muted);margin-bottom:10px;text-transform:uppercase;letter-spacing:.06em}
.feed-item{
  display:flex;align-items:center;gap:10px;
  padding:7px 0;border-bottom:1px solid rgba(255,255,255,.04);
  font-size:.75rem;
  animation:feedSlide .4s ease;
}
@keyframes feedSlide{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
.feed-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.feed-text{color:var(--muted);flex:1}
.feed-text strong{color:var(--white)}
.feed-time{color:rgba(255,255,255,.2);font-size:.65rem}

/* ── AI Chat Panel ── */
.ai-chat-panel{
  background:rgba(6,6,37,.9);border:1px solid rgba(108,99,255,.25);
  border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:0 20px 80px rgba(108,99,255,.1);
  display:flex;flex-direction:column;height:500px;
}
.chat-header{
  background:linear-gradient(135deg,rgba(108,99,255,.2),rgba(0,212,255,.1));
  border-bottom:1px solid rgba(108,99,255,.2);
  padding:16px 20px;
  display:flex;align-items:center;gap:12px;
}
.chat-avatar{
  width:38px;height:38px;border-radius:50%;
  background:linear-gradient(135deg,var(--purple),var(--cyan));
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:.8rem;color:#fff;flex-shrink:0;
  position:relative;
}
.chat-avatar::after{
  content:'';position:absolute;bottom:1px;right:1px;
  width:9px;height:9px;border-radius:50%;
  background:var(--green);border:2px solid var(--bg2);
}
.chat-header-info strong{display:block;font-size:.9rem;color:var(--white)}
.chat-header-info span{font-size:.72rem;color:var(--green)}
.chat-close{margin-left:auto;color:var(--muted);font-size:1.2rem;cursor:pointer;transition:color .3s}
.chat-close:hover{color:var(--white)}

.chat-messages{
  flex:1;overflow-y:auto;padding:20px;
  display:flex;flex-direction:column;gap:14px;
  scrollbar-width:thin;scrollbar-color:rgba(108,99,255,.3) transparent;
}
.chat-msg{display:flex;gap:10px;max-width:85%}
.chat-msg.bot{align-self:flex-start}
.chat-msg.user{align-self:flex-end;flex-direction:row-reverse}
.msg-avatar{
  width:30px;height:30px;border-radius:50%;
  background:linear-gradient(135deg,var(--purple),var(--cyan));
  flex-shrink:0;display:flex;align-items:center;justify-content:center;
  font-size:.65rem;font-weight:700;color:#fff;margin-top:2px;
}
.msg-avatar.user-av{background:linear-gradient(135deg,var(--green),var(--cyan))}
.msg-bubble{
  background:rgba(108,99,255,.12);border:1px solid rgba(108,99,255,.2);
  border-radius:18px 18px 18px 4px;
  padding:10px 14px;font-size:.85rem;color:var(--white);line-height:1.5;
}
.chat-msg.user .msg-bubble{
  background:linear-gradient(135deg,rgba(108,99,255,.3),rgba(0,212,255,.15));
  border-color:rgba(108,99,255,.4);
  border-radius:18px 18px 4px 18px;
}
.msg-bubble .typing{display:flex;gap:4px;align-items:center;height:18px}
.msg-bubble .typing span{
  width:6px;height:6px;border-radius:50%;
  background:var(--cyan);opacity:.6;
  animation:typingDot .8s ease-in-out infinite;
}
.msg-bubble .typing span:nth-child(2){animation-delay:.2s}
.msg-bubble .typing span:nth-child(3){animation-delay:.4s}
@keyframes typingDot{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px);opacity:1}}

.chat-suggestions{
  padding:10px 20px;display:flex;gap:8px;flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.05);
}
.chat-chip{
  background:rgba(108,99,255,.1);border:1px solid rgba(108,99,255,.2);
  color:var(--purple);font-size:.73rem;font-weight:500;
  padding:5px 12px;border-radius:50px;cursor:pointer;
  transition:var(--trans);white-space:nowrap;
}
.chat-chip:hover{background:rgba(108,99,255,.2);border-color:var(--purple);color:var(--white)}

.chat-input-area{
  padding:16px 20px;
  border-top:1px solid rgba(255,255,255,.07);
  display:flex;gap:10px;align-items:flex-end;
}
.chat-input{
  flex:1;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  border-radius:12px;padding:10px 14px;
  color:var(--white);font-size:.85rem;resize:none;height:42px;
  transition:border-color .3s;outline:none;
  scrollbar-width:none;
}
.chat-input:focus{border-color:rgba(108,99,255,.4)}
.chat-input::placeholder{color:rgba(255,255,255,.25)}
.chat-send{
  width:40px;height:40px;border-radius:10px;flex-shrink:0;
  background:linear-gradient(135deg,var(--purple),var(--cyan));
  color:#fff;display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:var(--trans);
}
.chat-send:hover{box-shadow:0 4px 20px rgba(108,99,255,.4);transform:scale(1.05)}
.chat-send svg{width:16px;height:16px}

/* ── AI intro content ── */
.ai-intro{position:relative}
.ai-intro .section-tag{display:inline-block;margin-bottom:16px}
.ai-intro h2{margin-bottom:16px}
.ai-intro > p{margin-bottom:32px;font-size:1rem}
.ai-features-list{display:flex;flex-direction:column;gap:14px;margin-bottom:32px}
.ai-feat{
  display:flex;align-items:center;gap:14px;
  background:rgba(0,212,255,.05);border:1px solid rgba(0,212,255,.1);
  border-radius:12px;padding:12px 16px;
  transition:var(--trans);
}
.ai-feat:hover{border-color:rgba(0,212,255,.3);background:rgba(0,212,255,.08)}
.ai-feat-icon{font-size:1.4rem;flex-shrink:0}
.ai-feat-text strong{display:block;font-size:.9rem;color:var(--white);margin-bottom:3px}
.ai-feat-text p{font-size:.82rem;margin:0}

/* ──────────────────────────────────
   CTA SECTION
────────────────────────────────── */
.cta-section{
  padding:100px 0;position:relative;overflow:hidden;
  background:linear-gradient(135deg,rgba(108,99,255,.08),rgba(0,212,255,.05));
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
}
.cta-orb{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none}
.cta-orb-a{width:400px;height:400px;background:rgba(108,99,255,.15);top:-100px;left:-100px;animation:float1 8s infinite}
.cta-orb-b{width:350px;height:350px;background:rgba(0,212,255,.1);bottom:-80px;right:-80px;animation:float2 10s infinite}
.cta-inner{text-align:center;position:relative}
.cta-inner h2{margin-bottom:16px}
.cta-inner>p{font-size:1.05rem;margin-bottom:36px}
.cta-btns{display:flex;justify-content:center;gap:16px;flex-wrap:wrap}

/* ──────────────────────────────────
   CONTACT
────────────────────────────────── */
.contact-section{padding:100px 0}
.contact-grid{display:grid;grid-template-columns:1fr 1.5fr;gap:60px;align-items:start}
.contact-info[data-scroll]{opacity:0;transform:translateX(-30px);transition:opacity .8s ease,transform .8s ease}
.contact-info.visible{opacity:1;transform:none}
.ci-item{display:flex;align-items:flex-start;gap:16px;margin-bottom:24px}
.ci-icon{
  font-size:1.5rem;width:48px;height:48px;flex-shrink:0;
  background:var(--card-bg2);border:1px solid var(--border);
  border-radius:12px;display:flex;align-items:center;justify-content:center;
}
.ci-item > div strong{display:block;font-weight:600;color:var(--white);margin-bottom:4px;font-size:.9rem}
.ci-item > div a,.ci-item > div span{font-size:.88rem;color:var(--muted);transition:color .3s}
.ci-item > div a:hover{color:var(--cyan)}
.social-row{display:flex;gap:10px;margin:24px 0}
.soc-btn{
  width:40px;height:40px;border-radius:10px;
  background:rgba(255,255,255,.05);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-size:.72rem;font-weight:700;color:var(--muted);
  transition:var(--trans);
}
.soc-btn:hover{background:var(--purple);border-color:var(--purple);color:#fff;transform:translateY(-3px)}
.contact-guarantee{
  display:flex;gap:14px;align-items:flex-start;
  background:rgba(0,255,136,.06);border:1px solid rgba(0,255,136,.15);
  border-radius:var(--radius);padding:16px 20px;
}
.cg-icon{font-size:1.6rem;flex-shrink:0}
.contact-guarantee strong{display:block;color:var(--white);font-size:.9rem;margin-bottom:4px}
.contact-guarantee p{font-size:.82rem;margin:0}

/* Form */
.contact-form-wrap[data-scroll]{opacity:0;transform:translateX(30px);transition:opacity .8s ease,transform .8s ease}
.contact-form-wrap.visible{opacity:1;transform:none}
.contact-form{
  background:var(--card-bg);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:36px;
}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-grp{margin-bottom:16px;display:flex;flex-direction:column;gap:6px}
.form-grp label{font-size:.82rem;font-weight:600;color:var(--muted)}
.form-grp input,.form-grp select,.form-grp textarea{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  border-radius:10px;padding:12px 14px;
  color:var(--white);font-size:.88rem;
  transition:border-color .3s;outline:none;
}
.form-grp input:focus,.form-grp select:focus,.form-grp textarea:focus{
  border-color:rgba(108,99,255,.5);
  box-shadow:0 0 0 3px rgba(108,99,255,.1);
}
.form-grp select option{background:var(--bg2)}
.form-grp textarea{resize:vertical;min-height:100px}
.form-grp input::placeholder,.form-grp textarea::placeholder{color:rgba(255,255,255,.2)}
.form-privacy{text-align:center;font-size:.78rem;color:var(--muted);margin-top:12px}
.form-success{
  display:none;text-align:center;padding:24px;
  background:rgba(0,255,136,.06);border:1px solid rgba(0,255,136,.2);
  border-radius:var(--radius);margin-top:16px;
}
.form-success.show{display:block;animation:fadeIn .4s ease}
.fs-icon{font-size:2.5rem;margin-bottom:8px}
.form-success strong{display:block;color:var(--white);margin-bottom:6px}
.form-success p{font-size:.85rem;margin:0}

/* ──────────────────────────────────
   FOOTER
────────────────────────────────── */
.footer{
  padding:60px 0 30px;
  border-top:1px solid var(--border);
  background:var(--bg2);
}
.footer-grid{
  display:grid;grid-template-columns:2fr 1fr 1fr 1.5fr;gap:40px;margin-bottom:48px;
}
.footer-brand p{font-size:.85rem;color:var(--muted);margin:14px 0 20px;max-width:280px}
.footer-logo{margin-bottom:8px;display:inline-flex}
.footer-social{display:flex;gap:10px}
.footer-social a,.footer-social a:visited{
  width:36px;height:36px;border-radius:8px;
  background:rgba(255,255,255,.05);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-size:.68rem;font-weight:700;color:var(--muted);
  transition:var(--trans);
}
.footer-social a:hover{background:var(--purple);border-color:var(--purple);color:#fff;transform:translateY(-2px)}
.footer-col h4{font-size:.85rem;font-weight:700;color:var(--white);margin-bottom:16px;letter-spacing:.04em}
.footer-col ul{display:flex;flex-direction:column;gap:10px}
.footer-col li a{font-size:.85rem;color:var(--muted);transition:color .3s}
.footer-col li a:hover{color:var(--white)}
.footer-col p{font-size:.82rem;color:var(--muted);margin-bottom:6px}
.footer-wa{
  display:inline-block;font-size:.82rem;font-weight:600;color:#25D366;
  margin-top:8px;transition:color .3s;
}
.footer-wa:hover{color:#20bc5a}
.footer-bottom{
  border-top:1px solid var(--border);padding-top:24px;
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;
}
.footer-bottom p{font-size:.8rem;color:var(--muted)}
.footer-bottom a{color:rgba(255,255,255,.3);font-size:.8rem;transition:color .3s}
.footer-bottom a:hover{color:var(--white)}

/* ──────────────────────────────────
   FLOATING ELEMENTS
────────────────────────────────── */
.wa-float{
  position:fixed;bottom:32px;right:32px;z-index:900;
  width:60px;height:60px;border-radius:50%;
  background:linear-gradient(135deg,#25D366,#20bc5a);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 30px rgba(37,211,102,.4);
  transition:var(--trans);
  animation:waBounce 3s ease-in-out infinite;
}
.wa-float:hover{transform:scale(1.12);box-shadow:0 10px 40px rgba(37,211,102,.6)}
@keyframes waBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.wa-tooltip{
  position:absolute;right:70px;bottom:50%;transform:translateY(50%);
  background:rgba(6,6,37,.95);border:1px solid rgba(37,211,102,.3);
  color:#25D366;font-size:.78rem;font-weight:600;
  padding:6px 12px;border-radius:8px;white-space:nowrap;
  opacity:0;transition:opacity .3s;pointer-events:none;
}
.wa-float:hover .wa-tooltip{opacity:1}

.btt{
  position:fixed;bottom:104px;right:32px;z-index:900;
  width:44px;height:44px;border-radius:50%;
  background:rgba(108,99,255,.2);border:1px solid rgba(108,99,255,.4);
  color:var(--purple);font-size:1.1rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  transition:var(--trans);opacity:0;pointer-events:none;cursor:pointer;
}
.btt.visible{opacity:1;pointer-events:all}
.btt:hover{background:var(--purple);color:#fff;border-color:transparent;transform:translateY(-3px)}

/* ──────────────────────────────────
   ANIMATIONS
────────────────────────────────── */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes fadeInDown{from{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:none}}

/* ──────────────────────────────────
   OFFICE / EQUIPO IA
────────────────────────────────── */
.office-section{
  padding:100px 0;
  background:radial-gradient(ellipse at center,rgba(0,212,255,.04) 0%,transparent 70%);
  position:relative;overflow:hidden;
}
.office-section::before{
  content:'';position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(108,99,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(108,99,255,.04) 1px,transparent 1px);
  background-size:40px 40px;pointer-events:none;
}

.office-wrap{
  display:grid;grid-template-columns:1fr 300px;gap:24px;align-items:start;
}
.office-canvas-wrap{
  position:relative;border:1px solid var(--border);border-radius:16px;
  overflow:hidden;background:#0a0a18;
  box-shadow:0 0 60px rgba(0,212,255,.08),0 0 0 1px rgba(108,99,255,.15);
}
.office-canvas-wrap canvas{
  display:block;width:100%;height:auto;
  image-rendering:pixelated;image-rendering:crisp-edges;
}
.office-canvas-hint{
  position:absolute;bottom:10px;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:10px;white-space:nowrap;
  background:rgba(3,3,24,.82);border:1px solid rgba(108,99,255,.25);
  backdrop-filter:blur(8px);padding:5px 14px;border-radius:50px;
  font-size:.72rem;color:var(--muted);pointer-events:none;
}
.ofc-sep{color:var(--border)}

/* ── Side panel ── */
.office-side{display:flex;flex-direction:column;gap:14px;position:sticky;top:100px;}

#office-agent-panel{min-height:220px;}

/* ── BRIEF FORM (estado inicial — ARIA pregunta) ── */
.oap-brief{
  background:var(--card-bg2);border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden;animation:fadeInUp .35s ease;
}
.oap-brief-header{
  display:flex;align-items:center;gap:12px;padding:14px 16px;
  background:linear-gradient(135deg,rgba(255,215,0,.08),transparent);
  border-bottom:1px solid var(--border);
}
.oap-brief-avatar{font-size:1.8rem;line-height:1}
.oap-brief-name{font-weight:700;font-size:.92rem;color:#FFD700}
.oap-brief-status{display:flex;align-items:center;gap:6px;font-size:.72rem;color:var(--muted);margin-top:2px}
.oap-brief-msg{
  padding:14px 16px;font-size:.85rem;color:var(--white);line-height:1.6;
  border-bottom:1px solid var(--border);background:rgba(255,215,0,.03);
}
.oap-brief-msg strong{color:#FFD700}

/* ── Brief form fields ── */
.brief-form{padding:14px 16px;display:flex;flex-direction:column;gap:10px;}
.brief-field{display:flex;flex-direction:column;gap:5px;}
.brief-field label{font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:600;}
.brief-field input,
.brief-field textarea{
  background:rgba(255,255,255,.04);border:1px solid var(--border);
  border-radius:8px;padding:9px 12px;color:var(--white);font-size:.85rem;
  font-family:'Space Grotesk',sans-serif;resize:none;
  transition:border-color .25s,box-shadow .25s;outline:none;
}
.brief-field input:focus,
.brief-field textarea:focus{
  border-color:#FFD700;box-shadow:0 0 0 3px rgba(255,215,0,.1);
}
.brief-field input.brief-error{
  border-color:#FF6B6B;animation:shake .35s ease;
}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.brief-form .oap-cta{margin:4px 0 0;cursor:pointer;border:none;font-family:'Space Grotesk',sans-serif;}
.brief-hint{font-size:.72rem;color:var(--muted);text-align:center;padding:0 16px 14px;opacity:.7;}

/* ── Accepted panel (después de enviar brief) ── */
.oap-accepted{
  background:var(--card-bg2);border:1px solid rgba(255,215,0,.3);
  border-radius:var(--radius);padding:20px 18px;text-align:center;
  animation:fadeInUp .35s ease;
}
.oap-accepted-icon{font-size:2.5rem;margin-bottom:8px;}
.oap-accepted-co{
  font-family:'Orbitron',sans-serif;font-weight:700;font-size:1.1rem;
  color:#FFD700;margin-bottom:8px;
}
.oap-accepted-msg{font-size:.83rem;color:var(--muted);margin-bottom:14px;line-height:1.5;}
.oap-accepted-tasks{
  display:flex;flex-direction:column;gap:6px;text-align:left;
  background:rgba(0,0,0,.25);border-radius:8px;padding:10px 12px;margin-bottom:4px;
}
.oat-item{
  display:flex;justify-content:space-between;align-items:center;
  font-size:.78rem;color:var(--white);gap:8px;
}
.oat-item span:first-child{font-weight:600;flex-shrink:0}
.oat-item span:last-child{color:var(--muted);font-size:.72rem;}

/* ── Agent card (al clickear un agente) ── */
.oap-card{
  background:var(--card-bg2);border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden;animation:fadeInUp .3s ease;
}
.oap-header{
  display:flex;align-items:center;gap:14px;padding:16px;
  background:rgba(108,99,255,.08);border-bottom:1px solid var(--border);
}
.oap-icon{font-size:1.9rem}
.oap-name{font-weight:700;font-size:1.05rem;color:var(--agent-color,var(--purple))}
.oap-role{font-size:.78rem;color:var(--muted)}
.oap-status{
  display:flex;align-items:center;gap:8px;padding:9px 16px;
  font-size:.8rem;color:var(--muted);border-bottom:1px solid var(--border);
}
.oap-dot{
  width:8px;height:8px;border-radius:50%;background:var(--green);flex-shrink:0;
  animation:pulseBadge 1.5s ease-in-out infinite;
}
.oap-task{padding:14px 16px;border-bottom:1px solid var(--border)}
.oap-task-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:5px}
.oap-task-text{font-size:.87rem;color:var(--white);margin-bottom:9px;min-height:1.2em;line-height:1.45}
.oap-bar-wrap{height:4px;background:rgba(255,255,255,.07);border-radius:4px;overflow:hidden;margin-bottom:5px}
.oap-bar{height:100%;border-radius:4px;width:0;transition:width .7s cubic-bezier(.4,0,.2,1)}
.oap-bar-pct{font-size:.73rem;color:var(--muted)}
.oap-stats{display:flex;flex-direction:column;padding:0 0 4px;}
.oap-stat{
  display:flex;align-items:center;gap:10px;padding:9px 16px;
  border-bottom:1px solid rgba(255,255,255,.04);
}
.oap-stat:last-child{border-bottom:none}
.oap-stat-icon{font-size:1rem}
.oap-stat-val{font-weight:700;font-size:.92rem;color:var(--white)}
.oap-stat-key{font-size:.72rem;color:var(--muted)}

/* ── CTA button (shared) ── */
.oap-cta{
  display:block;margin:14px 16px;
  background:linear-gradient(135deg,var(--agent-color,var(--purple)),var(--cyan));
  color:#fff;font-weight:700;font-size:.87rem;
  padding:12px 18px;border-radius:50px;text-align:center;
  transition:var(--trans);box-shadow:0 4px 20px rgba(108,99,255,.28);
}
.oap-cta:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(108,99,255,.45)}

/* ── Agents quick list ── */
.office-agents-list{
  background:var(--card-bg);border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden;
}
.oal-title{
  padding:10px 14px;font-size:.72rem;text-transform:uppercase;
  letter-spacing:.1em;color:var(--muted);font-weight:600;
  border-bottom:1px solid var(--border);
}
.oal-item{
  display:flex;align-items:center;gap:9px;padding:9px 14px;
  border-bottom:1px solid rgba(255,255,255,.04);
  cursor:pointer;transition:background var(--trans);
}
.oal-item:last-child{border-bottom:none}
.oal-item:hover{background:rgba(108,99,255,.08)}
.oal-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.oal-icon{font-size:1.05rem}
.oal-name{font-size:.83rem;font-weight:600;color:var(--white)}
.oal-role{font-size:.7rem;color:var(--muted)}
.oal-status{margin-left:auto;color:var(--green);font-size:.65rem;animation:pulseBadge 2s ease-in-out infinite;}

/* ── Office Chat Feed ── */
.office-chat-feed{
  margin-top:18px;
  background:var(--card-bg2);border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden;
  box-shadow:0 0 30px rgba(108,99,255,.06);
}
.ocf-header{
  display:flex;align-items:center;gap:10px;
  padding:8px 16px;
  background:rgba(108,99,255,.07);border-bottom:1px solid var(--border);
  font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-weight:600;
}
.ocf-live-dot{
  width:7px;height:7px;border-radius:50%;background:#FF4444;flex-shrink:0;
  animation:pulseBadge 1s ease-in-out infinite;
}
.ocf-badge{
  margin-left:auto;color:#FF4444;font-size:.68rem;font-weight:700;
  animation:pulseBadge 1.5s ease-in-out infinite;
}
.ocf-messages{
  height:180px;overflow-y:auto;display:flex;flex-direction:column;
  padding:4px 0;
}
.ocf-messages::-webkit-scrollbar{width:4px}
.ocf-messages::-webkit-scrollbar-track{background:transparent}
.ocf-messages::-webkit-scrollbar-thumb{background:rgba(108,99,255,.3);border-radius:2px}
.ocf-placeholder{
  padding:16px;font-size:.82rem;color:var(--muted);text-align:center;margin:auto;
}
.ocf-msg{
  display:flex;align-items:flex-start;gap:10px;
  padding:7px 14px;border-bottom:1px solid rgba(255,255,255,.03);
  animation:fadeInUp .2s ease;
  transition:background .2s;
}
.ocf-msg:hover{background:rgba(108,99,255,.06);}
.ocf-msg:last-child{border-bottom:none}
.ocf-icon{font-size:1.05rem;flex-shrink:0;margin-top:1px}
.ocf-body{flex:1;min-width:0}
.ocf-name{font-size:.75rem;font-weight:700;margin-right:6px}
.ocf-text{font-size:.82rem;color:var(--white);line-height:1.45;word-break:break-word}
.ocf-time{font-size:.65rem;color:var(--muted);flex-shrink:0;margin-top:3px;opacity:.7}

/* ── Analyzing panel ── */
.oap-analyzing{
  background:var(--card-bg2);border:1px solid rgba(255,215,0,.25);
  border-radius:var(--radius);overflow:hidden;animation:fadeInUp .35s ease;
}
.oap-analyzing-header{
  display:flex;align-items:center;gap:10px;padding:12px 16px;
  background:linear-gradient(135deg,rgba(255,215,0,.1),transparent);
  border-bottom:1px solid var(--border);
  font-size:.82rem;font-weight:700;color:#FFD700;letter-spacing:.06em;
}
.oap-analyzing-company{
  padding:10px 16px 4px;font-family:'Orbitron',sans-serif;
  font-weight:700;font-size:1rem;color:var(--white);
}
.oap-analyzing-steps{
  padding:10px 16px 14px;display:flex;flex-direction:column;gap:8px;
}
.oas-step{
  font-size:.8rem;color:var(--muted);padding:6px 10px;
  background:rgba(255,255,255,.03);border-radius:6px;
  border-left:2px solid transparent;
  transition:border-color .3s,color .3s,background .3s;
}
.oas-step.active{
  color:var(--white);border-left-color:#FFD700;
  background:rgba(255,215,0,.06);
}
.oas-step.done{
  color:#00FF88;border-left-color:#00FF88;
  background:rgba(0,255,136,.05);
}
.oap-analyzing-note{
  padding:0 16px 14px;font-size:.75rem;color:var(--muted);
  opacity:.7;text-align:center;
}

/* ── Meeting arriving / live panel ── */
.oap-meeting-live{
  background:var(--card-bg2);border:1px solid rgba(108,99,255,.4);
  border-radius:var(--radius);overflow:hidden;animation:fadeInUp .35s ease;
}
.oap-meeting-header{
  display:flex;align-items:center;gap:10px;padding:12px 16px;
  background:linear-gradient(135deg,rgba(108,99,255,.15),transparent);
  border-bottom:1px solid var(--border);
  font-size:.75rem;font-weight:700;color:var(--purple);letter-spacing:.07em;
  text-transform:uppercase;
}
.oap-meeting-dot{
  width:8px;height:8px;border-radius:50%;
  background:#FF4444;flex-shrink:0;
  animation:pulseBadge 1s ease-in-out infinite;
}
.oap-meeting-company{
  padding:10px 16px 4px;font-family:'Orbitron',sans-serif;
  font-weight:700;font-size:.95rem;color:var(--white);
}
.oap-meeting-status{
  padding:4px 16px 12px;font-size:.8rem;color:var(--muted);
  border-bottom:1px solid var(--border);
}
.oap-meeting-agents{
  padding:10px 16px;display:flex;flex-direction:column;gap:5px;
}
.oma-item{
  display:flex;align-items:center;gap:8px;
  font-size:.8rem;color:var(--white);padding:4px 0;
}
.oma-going{
  margin-left:auto;font-size:.7rem;color:var(--muted);
  opacity:.7;animation:pulseBadge 2s ease-in-out infinite;
}
.oap-meeting-speaking{
  display:flex;align-items:flex-start;gap:10px;
  padding:12px 16px;border-bottom:1px solid var(--border);
  background:rgba(108,99,255,.06);
  min-height:70px;
}
.oms-icon{font-size:1.5rem;flex-shrink:0;margin-top:2px}
.oms-name{font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-bottom:3px;font-weight:700}
.oms-text{font-size:.83rem;color:var(--white);line-height:1.5;}
.oap-meeting-progress{padding:10px 16px;border-bottom:1px solid var(--border);}
.omp-bar-wrap{height:4px;background:rgba(255,255,255,.07);border-radius:4px;overflow:hidden;}
.omp-bar{height:100%;background:linear-gradient(90deg,var(--purple),var(--cyan));border-radius:4px;transition:width .7s ease;}
.oap-meeting-insights{
  padding:10px 16px 14px;display:flex;flex-direction:column;gap:6px;
}
.omi-item{
  font-size:.78rem;color:var(--cyan);background:rgba(0,212,255,.06);
  border:1px solid rgba(0,212,255,.15);border-radius:6px;
  padding:5px 10px;line-height:1.4;
}

/* ── Proposal panel ── */
.oap-proposal{
  background:var(--card-bg2);border:1px solid rgba(0,255,136,.3);
  border-radius:var(--radius);overflow:hidden;animation:fadeInUp .4s ease;
}
.oap-prop-header{
  display:flex;align-items:center;gap:12px;padding:14px 16px;
  background:linear-gradient(135deg,rgba(0,255,136,.1),transparent);
  border-bottom:1px solid var(--border);
}
.oap-prop-icon{font-size:1.8rem;line-height:1}
.oap-prop-company{
  font-family:'Orbitron',sans-serif;font-weight:700;
  font-size:.92rem;color:var(--white);
}
.oap-prop-type{font-size:.73rem;color:#00FF88;margin-top:2px}
.oap-prop-section{
  padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.05);
}
.oap-prop-label{
  font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--muted);font-weight:700;margin-bottom:8px;
}
.apf-item{
  display:flex;align-items:flex-start;gap:8px;
  font-size:.81rem;color:var(--white);padding:4px 0;line-height:1.45;
}
.apf-check{
  color:#00FF88;font-weight:700;flex-shrink:0;min-width:18px;
}
.oap-prop-phone{
  padding:10px 16px 14px;font-size:.8rem;
  color:var(--white);line-height:1.7;
  background:rgba(0,255,136,.04);
}
.oap-prop-phone strong{color:#00FF88}
.oap-prop-phone small{color:var(--muted);font-size:.72rem;}
.oap-prop-phone--no-phone{color:var(--muted);border:1px dashed var(--border)!important;border-radius:8px;padding:8px;text-align:center}

/* ── Meeting plan list (live building) ── */
.oap-meeting-plan{
  border-top:1px solid var(--border);padding:10px 16px 0;
}
.omp-plan-label{
  font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--muted);font-weight:700;margin-bottom:6px;
}
.omp-plan-items{
  display:flex;flex-direction:column;gap:4px;
  max-height:120px;overflow-y:auto;padding-bottom:8px;
}
.omp-plan-items::-webkit-scrollbar{width:3px}
.omp-plan-items::-webkit-scrollbar-track{background:transparent}
.omp-plan-items::-webkit-scrollbar-thumb{background:rgba(108,99,255,.4);border-radius:2px}
.omp-plan-item{
  font-size:.78rem;color:var(--white);line-height:1.4;
  display:flex;gap:7px;align-items:flex-start;padding:3px 0;
  border-bottom:1px solid rgba(255,255,255,.04);
  animation:fadeInUp .25s ease;
}
.omp-counter{font-size:.72rem;color:var(--muted);margin-top:4px;display:block}
.oap-meeting-progress{padding:8px 16px 4px}

/* Bigger speaking area */
.oap-meeting-speaking{
  min-height:80px;padding:14px 16px;
}
.oms-text{font-size:.86rem;line-height:1.55;color:var(--white);min-height:2.5em;}

/* ── Empty state ── */
.oap-empty{
  background:var(--card-bg2);border:1px solid var(--border);
  border-radius:var(--radius);padding:28px 16px;text-align:center;
  color:var(--muted);font-size:.85rem;
}
.oap-empty-icon{font-size:2rem;margin-bottom:8px;}

/* ──────────────────────────────────
   RESPONSIVE
────────────────────────────────── */
@media(max-width:1024px){
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .pf-grid{grid-template-columns:repeat(2,1fr)}
  .pricing-grid{grid-template-columns:1fr;max-width:440px;margin:0 auto 32px}
  .price-featured{transform:scale(1)}
  .price-featured:hover{transform:translateY(-8px)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1/-1}
  .ai-grid{grid-template-columns:1fr}
  .ai-chat-panel{height:420px}
  .office-wrap{grid-template-columns:1fr}
  .office-side{position:static}
}

@media(max-width:768px){
  h1{font-size:clamp(2.2rem,8vw,3.2rem)}
  h2{font-size:clamp(1.7rem,5vw,2.4rem)}
  .nav-links,.btn-nav-cta{display:none}
  .hamburger{display:flex}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .services-grid{grid-template-columns:1fr}
  .why-grid{grid-template-columns:1fr}
  .why-visual{display:none}
  .pf-grid{grid-template-columns:1fr}
  .process-steps{flex-direction:column}
  .ps-connector{width:2px;height:30px;flex:0 0 30px;margin:0 auto;background:linear-gradient(180deg,var(--purple),var(--cyan))}
  .ps-connector::after{bottom:-5px;top:auto;right:-4px}
  .contact-grid{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .hero-ctas{flex-direction:column;align-items:stretch}
  .hero-ctas a{text-align:center;justify-content:center}
  .urgency-bar{flex-direction:column;text-align:center}
  .dash-kpis{grid-template-columns:repeat(3,1fr)}
  cursor:auto;
}
@media(max-width:768px){
  .cursor,.cursor-follower{display:none}
  body,a,button{cursor:auto}
}
@media(max-width:480px){
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .dash-kpis{grid-template-columns:1fr 1fr}
  .cta-btns{flex-direction:column;align-items:stretch}
  .cta-btns a{text-align:center;justify-content:center}
  .footer-bottom{flex-direction:column;text-align:center}
}