:root {
  --bg:#0a0a0f;--bg2:#0d0d14;--glass:rgba(255,255,255,0.03);--glass-b:rgba(255,255,255,0.08);--glass-bh:rgba(255,255,255,0.15);
  --purple:#8b5cf6;--purple-g:rgba(139,92,246,0.3);--coral:#f472b6;--coral-g:rgba(244,114,182,0.3);
  --t1:#e8e4f0;--t2:rgba(232,228,240,0.6);--t3:rgba(232,228,240,0.35);
  --fd:'Space Grotesk',sans-serif;--fb:'Inter',sans-serif;
  --max:1100px;--ease:cubic-bezier(0.16,1,0.3,1);--dur:0.8s;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg);color:var(--t1);font-family:var(--fb);font-weight:300;line-height:1.7;overflow-x:hidden}
body{min-height:100vh}
#particles{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none}

/* NAV */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;background:transparent;border:none;padding:0;pointer-events:none}
.nav-logo{position:fixed;top:1rem;left:2rem;z-index:100;pointer-events:auto}
.nav-logo-text{font-family:var(--fb);font-weight:300;font-size:clamp(1.2rem,2vw,1.6rem);color:var(--t2);letter-spacing:.12em;text-transform:uppercase;transition:font-size .4s var(--ease),opacity .4s}
.nav-logo-img{height:160px;width:auto;filter:drop-shadow(0 0 8px rgba(139,92,246,.3))}
.nav-right{position:fixed;top:1rem;right:2rem;z-index:100;display:flex;flex-direction:column;align-items:flex-end;gap:.6rem;pointer-events:auto}
.nav-right .nav-socials{display:flex;flex-direction:column;gap:.6rem}
.nav-social{color:var(--t3);display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;border:1px solid var(--glass-b);transition:all .3s;text-decoration:none}
.nav-social:hover{color:var(--t1);border-color:var(--purple);background:rgba(139,92,246,.1);transform:translateY(-1px)}
.nav-cta{color:var(--t2);text-decoration:none;font-size:.85rem;padding:.5rem 1.2rem;border:1px solid var(--glass-b);border-radius:100px;transition:all .3s}
.nav-cta:hover{border-color:var(--purple);color:var(--t1)}

/* SECTIONS */
.section{position:relative;z-index:1;max-width:var(--max);margin:0 auto;padding:clamp(4rem,10vh,8rem) 2rem}
.section-label{font-family:var(--fd);font-size:.75rem;text-transform:uppercase;letter-spacing:3px;color:var(--purple);margin-bottom:1.5rem}
.pnl-glow{font-weight:700;text-transform:none;color:var(--purple);text-shadow:0 0 8px rgba(139,92,246,.7),0 0 20px rgba(139,92,246,.5),0 0 40px rgba(139,92,246,.3),0 0 60px rgba(139,92,246,.15);animation:pnl-pulse 2.5s ease-in-out infinite}
@keyframes pnl-pulse{0%,100%{text-shadow:0 0 8px rgba(139,92,246,.7),0 0 20px rgba(139,92,246,.5),0 0 40px rgba(139,92,246,.3),0 0 60px rgba(139,92,246,.15)}50%{text-shadow:0 0 12px rgba(139,92,246,.9),0 0 28px rgba(139,92,246,.7),0 0 50px rgba(139,92,246,.4),0 0 80px rgba(139,92,246,.2)}}
.section-title{font-family:var(--fd);font-size:clamp(2rem,5vw,3.5rem);font-weight:600;line-height:1.2;margin-bottom:1.5rem;color:var(--t1)}
.section-sub{color:var(--t2);font-size:clamp(1rem,2vw,1.2rem);max-width:600px;margin-bottom:3rem}
.gradient-text{background:linear-gradient(135deg,var(--purple),var(--coral));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* GLASS CARD */
.glass-card{background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--glass-b);border-radius:16px;padding:2rem;transition:border-color .3s,transform .3s}
.glass-card:hover{border-color:var(--glass-bh);transform:translateY(-3px)}

/* GRIDS */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}

/* REVEAL */
.reveal{opacity:0;transform:translateY(40px);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-d1{transition-delay:.1s}.reveal-d2{transition-delay:.2s}.reveal-d3{transition-delay:.3s}.reveal-d4{transition-delay:.4s}

/* PARALLAX ORBS */
.orb{position:absolute;border-radius:50%;pointer-events:none;filter:blur(80px)}
.orb-p{background:var(--purple-g);width:400px;height:400px}
.orb-c{background:var(--coral-g);width:350px;height:350px}

/* KEYFRAMES */
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-20px)}}
@keyframes float-sm{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes pulse{0%,100%{opacity:.4;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}
@keyframes glow{0%,100%{text-shadow:0 0 30px var(--purple-g),0 0 60px rgba(139,92,246,0.1)}50%{text-shadow:0 0 50px var(--purple-g),0 0 100px rgba(139,92,246,0.2)}}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}
@keyframes pulse-ring{0%{transform:scale(1);opacity:.6}100%{transform:scale(2.5);opacity:0}}
@keyframes icon-bounce{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-5px) scale(1.1)}}
@keyframes drift-r{0%{transform:translate(0,0)}25%{transform:translate(8px,-5px)}50%{transform:translate(3px,-10px)}75%{transform:translate(-4px,-3px)}100%{transform:translate(0,0)}}
@keyframes drift-l{0%{transform:translate(0,0)}25%{transform:translate(-6px,-4px)}50%{transform:translate(-2px,6px)}75%{transform:translate(5px,2px)}100%{transform:translate(0,0)}}
@keyframes sway{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
@keyframes blink-eyes{0%,42%,46%,100%{transform:scaleY(1)}44%{transform:scaleY(0.1)}}
@keyframes breathe{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.02)}}
@keyframes weight-shift{0%,100%{transform:skewX(0deg) translateX(0)}30%{transform:skewX(-1deg) translateX(-2px)}70%{transform:skewX(1deg) translateX(2px)}}
@keyframes wave-hand{0%,100%{transform:rotate(0deg)}15%{transform:rotate(14deg)}30%{transform:rotate(-8deg)}45%{transform:rotate(14deg)}60%{transform:rotate(-4deg)}75%{transform:rotate(10deg)}}
@keyframes heart-float{0%{opacity:0;transform:translateY(0) scale(.5)}20%{opacity:1}80%{opacity:1}100%{opacity:0;transform:translateY(-60px) scale(1)}}
@keyframes dot-drift{0%{transform:translate(0,0);opacity:.3}50%{transform:translate(var(--dx),var(--dy));opacity:.6}100%{transform:translate(0,0);opacity:.3}}
@keyframes notif-pop{0%{transform:scale(0)}50%{transform:scale(1.2)}100%{transform:scale(1)}}
@keyframes typing-dots{0%,100%{opacity:.3}50%{opacity:1}}
@keyframes slide-in-left{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:translateX(0)}}
@keyframes slide-in-right{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:translateX(0)}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}

/* ==================== HERO ==================== */
.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;text-align:center;padding-top:clamp(10rem,18vh,14rem);overflow:hidden}
.hero .orb-p{top:-10%;right:-10%}.hero .orb-c{bottom:10%;left:-10%}
.hero-title{font-family:var(--fd);font-size:clamp(1.8rem,4.5vw,3.2rem);font-weight:700;line-height:1.1;margin-bottom:1rem;animation:glow 4s ease-in-out infinite}
.hero-sub{color:var(--t2);font-size:clamp(.95rem,2vw,1.2rem);max-width:520px;margin:0 auto 2rem}

/* ==================== HERO SCENE ==================== */
.hero-scene{position:relative;width:100%;max-width:900px;height:clamp(340px,42vh,440px);margin:0 auto;perspective:800px}

/* --- AGENT CHARACTERS --- */
.agent-char{position:absolute;bottom:8%;cursor:pointer;transition:transform .4s var(--ease),left .4s var(--ease),right .4s var(--ease);z-index:10;filter:drop-shadow(0 20px 40px rgba(0,0,0,.5))}
.agent-char:hover{transform:translateY(-8px) scale(1.04)}
.agent-boy{left:calc(12% + var(--drift,0px))}.agent-girl{right:calc(12% + var(--drift,0px))}

/* Character body structure */
.char-body{position:relative;display:flex;flex-direction:column;align-items:center;animation:weight-shift 8s ease-in-out infinite}
.agent-girl .char-body{animation-delay:-4s}

/* Head */
.char-head{width:52px;height:52px;border-radius:50%;position:relative;animation:sway 6s ease-in-out infinite;z-index:2}
.agent-boy .char-head{background:linear-gradient(135deg,#7c5ce0,#5b3cc4);box-shadow:0 4px 20px rgba(91,60,196,.4),inset 0 -8px 16px rgba(0,0,0,.2)}
.agent-girl .char-head{background:linear-gradient(135deg,#e879a8,#d14d7e);box-shadow:0 4px 20px rgba(209,77,126,.4),inset 0 -8px 16px rgba(0,0,0,.2);animation-delay:-3s}

/* Face */
.char-eyes{position:absolute;top:18px;left:50%;transform:translateX(-50%);display:flex;gap:12px}
.char-eye{width:6px;height:7px;background:#fff;border-radius:50%;position:relative;animation:blink-eyes 4s ease-in-out infinite}
.agent-girl .char-eye{animation-delay:-2s}
.char-eye::after{content:'';position:absolute;top:1px;left:1.5px;width:3px;height:3px;background:#1a1a2e;border-radius:50%}
.char-mouth{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);width:10px;height:5px;border-bottom:2px solid rgba(255,255,255,.6);border-radius:0 0 5px 5px}

/* Hair */
.char-hair{position:absolute;top:-4px;left:-4px;right:-4px;height:28px;border-radius:50% 50% 0 0;z-index:1}
.agent-boy .char-hair{background:linear-gradient(135deg,#2d1b69,#1a0f3d);top:-6px;border-radius:40% 60% 0 0;height:24px}
.agent-girl .char-hair{background:linear-gradient(135deg,#8b2252,#5c1636);height:30px;top:-8px;border-radius:50% 50% 30% 30%}
.agent-girl .char-hair::before{content:'';position:absolute;bottom:-20px;left:-6px;width:14px;height:28px;background:linear-gradient(180deg,#8b2252,#5c1636);border-radius:0 0 8px 8px}
.agent-girl .char-hair::after{content:'';position:absolute;bottom:-20px;right:-6px;width:14px;height:28px;background:linear-gradient(180deg,#8b2252,#5c1636);border-radius:0 0 8px 8px}

/* Torso */
.char-torso{width:44px;height:50px;border-radius:12px 12px 8px 8px;margin-top:-4px;position:relative;animation:breathe 4s ease-in-out infinite}
.agent-boy .char-torso{background:linear-gradient(180deg,#3b2a7e,#2a1d5e);box-shadow:inset 0 -10px 20px rgba(0,0,0,.2)}
.agent-girl .char-torso{background:linear-gradient(180deg,#b8547a,#8e3d5c);box-shadow:inset 0 -10px 20px rgba(0,0,0,.2)}

/* Arms */
.char-arm{position:absolute;width:12px;height:36px;border-radius:6px;top:4px}
.char-arm-l{left:-10px;transform-origin:top center}
.char-arm-r{right:-10px;transform-origin:top center}
.agent-boy .char-arm{background:linear-gradient(180deg,#3b2a7e,#2a1d5e)}
.agent-girl .char-arm{background:linear-gradient(180deg,#b8547a,#8e3d5c)}
.agent-boy .char-arm-r{animation:wave-hand 3s ease-in-out 2s 2}
.agent-girl .char-arm-l{animation:wave-hand 3s ease-in-out 3.5s 2}

/* Legs */
.char-legs{display:flex;gap:4px;margin-top:-2px}
.char-leg{width:14px;height:32px;border-radius:4px 4px 6px 6px}
.agent-boy .char-leg{background:linear-gradient(180deg,#1e1545,#13102e)}
.agent-girl .char-leg{background:linear-gradient(180deg,#6b2847,#4a1c33)}

/* Agent label */
.agent-label{position:absolute;bottom:-28px;left:50%;transform:translateX(-50%);white-space:nowrap;font-family:var(--fd);font-size:.65rem;text-transform:uppercase;letter-spacing:2px;padding:3px 10px;border-radius:100px;background:rgba(0,0,0,.4);backdrop-filter:blur(6px);border:1px solid var(--glass-b)}
.agent-boy .agent-label{color:var(--purple)}.agent-girl .agent-label{color:var(--coral)}

/* AI Glow ring behind agents */
.agent-glow{position:absolute;width:100px;height:100px;border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%);z-index:-1;opacity:.3}
.agent-boy .agent-glow{background:radial-gradient(circle,var(--purple-g) 0%,transparent 70%);animation:pulse 4s ease-in-out infinite}
.agent-girl .agent-glow{background:radial-gradient(circle,var(--coral-g) 0%,transparent 70%);animation:pulse 4s ease-in-out infinite 2s}

/* --- CONNECTION BEAM between agents --- */
.hero-beam{position:absolute;top:42%;left:50%;transform:translateX(-50%);width:200px;height:2px;z-index:5}
.hero-beam-line{width:100%;height:100%;background:linear-gradient(90deg,var(--purple),rgba(255,255,255,.3),var(--coral));border-radius:2px;opacity:.4;animation:pulse 3s ease-in-out infinite}
.hero-beam-particles{position:absolute;top:-8px;left:0;width:100%;height:18px}
.beam-dot{position:absolute;width:4px;height:4px;border-radius:50%;background:#fff;opacity:.6;animation:shimmer 3s linear infinite}
.beam-dot:nth-child(1){left:10%;animation-delay:0s;top:2px}
.beam-dot:nth-child(2){left:30%;animation-delay:.5s;top:10px}
.beam-dot:nth-child(3){left:55%;animation-delay:1s;top:4px}
.beam-dot:nth-child(4){left:75%;animation-delay:1.5s;top:12px}
.beam-dot:nth-child(5){left:90%;animation-delay:2s;top:6px}

/* --- FLOATING UI PANELS --- */
.ui-panel{position:absolute;background:rgba(15,15,25,.7);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--glass-b);border-radius:14px;padding:14px;z-index:8;box-shadow:0 15px 40px rgba(0,0,0,.4);transition:transform .4s var(--ease),border-color .3s;cursor:default}
.ui-panel:hover{border-color:var(--glass-bh);transform:translateY(-3px)!important}

/* Profile Card - left side */
.panel-profile{top:5%;left:-2%;width:170px;animation:slide-in-left 1s var(--ease) .5s both,float-sm 7s ease-in-out 1.5s infinite}
.panel-profile-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--purple),#5b3cc4);margin-bottom:8px;position:relative;box-shadow:0 4px 12px rgba(91,60,196,.3)}
.panel-profile-avatar::after{content:'';position:absolute;bottom:0;right:0;width:10px;height:10px;background:#4ade80;border-radius:50%;border:2px solid rgba(15,15,25,.7)}
.panel-profile h4{font-family:var(--fd);font-size:.75rem;font-weight:500;color:var(--t1);margin-bottom:2px}
.panel-profile .panel-detail{font-size:.6rem;color:var(--t3);margin-bottom:8px}
.panel-profile .panel-tags{display:flex;flex-wrap:wrap;gap:4px}
.panel-profile .tag{font-size:.55rem;padding:2px 7px;border-radius:100px;background:rgba(139,92,246,.12);color:var(--purple);border:1px solid rgba(139,92,246,.2)}

/* Match Score Panel - right side */
.panel-match{top:2%;right:-2%;width:160px;animation:slide-in-right 1s var(--ease) .7s both,float-sm 8s ease-in-out 2s infinite}
.match-score-ring{width:56px;height:56px;border-radius:50%;border:3px solid var(--glass-b);position:relative;margin:0 auto 8px;display:flex;align-items:center;justify-content:center}
.match-score-ring::before{content:'';position:absolute;inset:-3px;border-radius:50%;border:3px solid transparent;border-top-color:var(--coral);border-right-color:var(--coral);border-bottom-color:var(--purple);animation:spin 4s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.match-score-val{font-family:var(--fd);font-size:1rem;font-weight:700;color:var(--t1)}
.match-score-label{text-align:center;font-size:.6rem;color:var(--t3);margin-bottom:6px}
.match-bars{display:flex;flex-direction:column;gap:5px}
.match-bar{display:flex;align-items:center;gap:6px}
.match-bar-label{font-size:.55rem;color:var(--t3);width:42px;text-align:right}
.match-bar-track{flex:1;height:4px;background:rgba(255,255,255,.06);border-radius:2px;overflow:hidden}
.match-bar-fill{height:100%;border-radius:2px;transition:width 1.5s var(--ease)}
.bar-purple{background:var(--purple)}.bar-coral{background:var(--coral)}.bar-mixed{background:linear-gradient(90deg,var(--purple),var(--coral))}

/* Conversation Preview Panel - bottom center */
.panel-convo{top:50%;left:50%;transform:translate(-50%,-50%);width:260px;animation:slide-in-left 1s var(--ease) .9s both;z-index:12}
.panel-convo-header{display:flex;align-items:center;gap:8px;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--glass-b)}
.panel-convo-header span{font-family:var(--fd);font-size:.7rem;font-weight:500;color:var(--t1)}
.panel-convo-status{margin-left:auto;font-size:.55rem;color:#4ade80;display:flex;align-items:center;gap:4px}
.panel-convo-status::before{content:'';width:5px;height:5px;background:#4ade80;border-radius:50%;animation:pulse 2s infinite}
.convo-msg-area{display:flex;flex-direction:column;gap:0;min-height:60px;overflow:hidden}
.convo-msg{display:flex;gap:8px;margin-bottom:8px;align-items:flex-start;opacity:0;transform:translateY(8px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.convo-msg.convo-visible{opacity:1;transform:translateY(0)}
.convo-msg.convo-exit{opacity:0;transform:translateY(-8px);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.convo-msg-avatar{width:20px;height:20px;border-radius:50%;flex-shrink:0}
.convo-msg-avatar.av-boy{background:linear-gradient(135deg,var(--purple),#5b3cc4)}
.convo-msg-avatar.av-girl{background:linear-gradient(135deg,var(--coral),#d14d7e)}
.convo-msg-text{font-size:.6rem;color:var(--t2);line-height:1.5;background:rgba(255,255,255,.03);padding:6px 9px;border-radius:8px;max-width:190px}
.convo-typing{display:flex;gap:3px;padding:6px 12px;align-items:center}
.convo-typing span{width:4px;height:4px;border-radius:50%;background:var(--coral);animation:typing-dots 1.4s ease-in-out infinite}
.convo-typing span:nth-child(2){animation-delay:.2s}
.convo-typing span:nth-child(3){animation-delay:.4s}

/* --- INTERACTIVE ICONS --- */
.scene-icon{position:absolute;z-index:15;cursor:pointer;transition:transform .3s var(--ease);filter:drop-shadow(0 4px 8px rgba(0,0,0,.4))}
.scene-icon:hover{transform:scale(1.25)!important}
.scene-icon:hover .icon-tooltip{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}

.icon-body{width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:.85rem;position:relative;backdrop-filter:blur(8px)}

/* Message icon */
.icon-msg{top:18%;left:28%;animation:icon-bounce 3s ease-in-out infinite}
.icon-msg .icon-body{background:rgba(139,92,246,.15);border:1px solid rgba(139,92,246,.3)}
.icon-msg .icon-badge{position:absolute;top:-4px;right:-4px;width:14px;height:14px;background:var(--coral);border-radius:50%;font-size:.5rem;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;animation:notif-pop .4s var(--ease) 1.5s both}

/* Heart icon */
.icon-heart{top:30%;right:22%;animation:icon-bounce 3.5s ease-in-out .5s infinite}
.icon-heart .icon-body{background:rgba(244,114,182,.15);border:1px solid rgba(244,114,182,.3)}

/* Sparkle icon */
.icon-spark{bottom:28%;left:18%;animation:icon-bounce 4s ease-in-out 1s infinite}
.icon-spark .icon-body{background:rgba(250,204,21,.1);border:1px solid rgba(250,204,21,.25)}

/* Bell icon */
.icon-bell{bottom:32%;right:15%;animation:icon-bounce 3.2s ease-in-out 1.5s infinite}
.icon-bell .icon-body{background:rgba(139,92,246,.12);border:1px solid rgba(139,92,246,.25)}
.icon-bell .icon-badge{position:absolute;top:-4px;right:-4px;width:14px;height:14px;background:#4ade80;border-radius:50%;font-size:.5rem;color:#0a0a0f;display:flex;align-items:center;justify-content:center;font-weight:700}

/* Check icon */
.icon-check{top:12%;right:38%;animation:icon-bounce 3.8s ease-in-out .8s infinite}
.icon-check .icon-body{background:rgba(74,222,128,.1);border:1px solid rgba(74,222,128,.25)}

/* Tooltips */
.icon-tooltip{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(5px);background:rgba(15,15,25,.9);backdrop-filter:blur(10px);border:1px solid var(--glass-b);border-radius:8px;padding:6px 10px;white-space:nowrap;font-size:.6rem;color:var(--t2);opacity:0;transition:all .3s var(--ease);pointer-events:none;z-index:20}
.icon-tooltip::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:4px solid transparent;border-top-color:rgba(15,15,25,.9)}

/* --- FLOATING DECORATIONS --- */
.deco{position:absolute;pointer-events:none;z-index:3}

/* Hearts */
.deco-heart{font-size:.7rem;opacity:0;animation:heart-float 6s ease-in-out infinite}
.dh-1{top:55%;left:40%;animation-delay:0s}.dh-2{top:50%;left:56%;animation-delay:2s}.dh-3{top:60%;right:38%;animation-delay:4s}

/* Dots */
.deco-dot{width:4px;height:4px;border-radius:50%;opacity:.3}
.deco-dot.dp{background:var(--purple)}.deco-dot.dc{background:var(--coral)}.deco-dot.dw{background:var(--t1)}
.dd1{top:15%;left:8%;--dx:12px;--dy:-8px;animation:dot-drift 9s ease-in-out infinite}
.dd2{top:25%;right:8%;--dx:-10px;--dy:6px;animation:dot-drift 11s ease-in-out 1s infinite}
.dd3{bottom:20%;left:5%;--dx:8px;--dy:10px;animation:dot-drift 10s ease-in-out 2s infinite}
.dd4{top:40%;left:3%;--dx:-6px;--dy:-12px;animation:dot-drift 12s ease-in-out 3s infinite}
.dd5{bottom:35%;right:6%;--dx:10px;--dy:-6px;animation:dot-drift 8s ease-in-out .5s infinite}
.dd6{top:60%;right:3%;--dx:-8px;--dy:8px;animation:dot-drift 13s ease-in-out 4s infinite}
.dd7{bottom:45%;left:15%;--dx:6px;--dy:-10px;animation:dot-drift 10s ease-in-out 2.5s infinite}
.dd8{top:10%;right:25%;--dx:-12px;--dy:4px;animation:dot-drift 11s ease-in-out 1.5s infinite}

/* Chat bubble decorations */
.deco-bubble{width:20px;height:16px;border-radius:10px 10px 10px 2px;border:1px solid;opacity:.15}
.db-1{top:20%;left:5%;border-color:var(--purple);animation:drift-l 15s ease-in-out infinite;transform:rotate(-10deg)}
.db-2{bottom:15%;right:4%;border-color:var(--coral);animation:drift-r 18s ease-in-out 2s infinite;transform:rotate(8deg)}

/* Small rings */
.deco-ring{border-radius:50%;border:1px solid;opacity:.1}
.dr-1{width:24px;height:24px;top:8%;right:12%;border-color:var(--purple);animation:drift-r 20s ease-in-out infinite}
.dr-2{width:16px;height:16px;bottom:25%;left:8%;border-color:var(--coral);animation:drift-l 16s ease-in-out 3s infinite}

/* ==================== THE LOOP ==================== */
.loop-section{text-align:center;overflow:hidden}
.loop-stage{position:relative;width:100%;max-width:620px;height:500px;margin:0 auto;perspective:600px}

/* Desaturated mood */
.loop-stage{filter:saturate(.65)}
.loop-stage:hover{filter:saturate(.8);transition:filter .6s}

/* Background depth layers */
.loop-bg{position:absolute;inset:0;z-index:0;overflow:hidden;border-radius:20px}
.loop-bg-card{position:absolute;width:170px;height:230px;border-radius:14px;border:1px solid rgba(255,255,255,.04);background:rgba(255,255,255,.015);opacity:.25;filter:blur(2px)}
.loop-bg-card:nth-child(1){top:8%;left:-5%;transform:rotate(-8deg)}
.loop-bg-card:nth-child(2){top:15%;right:-8%;transform:rotate(6deg)}
.loop-bg-card:nth-child(3){bottom:5%;left:10%;transform:rotate(4deg)}

/* Floating hearts in background */
.loop-float{position:absolute;pointer-events:none;z-index:1;opacity:.2;font-size:1.1rem}
.lf-1{top:10%;left:6%;animation:heart-float 8s ease-in-out infinite;font-size:1.3rem}
.lf-2{top:28%;right:5%;animation:heart-float 10s ease-in-out 3s infinite;font-size:1rem}
.lf-3{bottom:15%;left:15%;animation:heart-float 9s ease-in-out 5s infinite;font-size:1.4rem;opacity:.15}
.lf-4{top:50%;right:12%;animation:heart-float 7s ease-in-out 1s infinite;font-size:1.1rem}
.lf-5{top:18%;left:35%;animation:heart-float 11s ease-in-out 2s infinite;font-size:.9rem;opacity:.12}
.lf-6{bottom:28%;right:25%;animation:heart-float 9s ease-in-out 4s infinite;font-size:1.2rem;opacity:.18}
.lf-7{top:65%;left:5%;animation:heart-float 12s ease-in-out 6s infinite;font-size:1.5rem;opacity:.1}
.lf-8{top:5%;right:30%;animation:heart-float 8s ease-in-out 1.5s infinite;font-size:1rem;opacity:.14}
.lf-9{bottom:8%;right:8%;animation:heart-float 10s ease-in-out 3.5s infinite;font-size:1.3rem;opacity:.16}
.lf-10{top:40%;left:22%;animation:heart-float 13s ease-in-out 7s infinite;font-size:.8rem;opacity:.1}

/* Small user avatar on timeline */
.loop-avatar{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,rgba(139,92,246,.3),rgba(244,114,182,.3));border:1px solid var(--glass-b);z-index:5;display:flex;align-items:center;justify-content:center;font-size:.6rem;animation:float-sm 4s ease-in-out infinite}

/* Main swipe card */
.loop-card{position:absolute;top:50%;left:50%;width:240px;height:320px;transform:translate(-50%,-50%);border-radius:18px;background:rgba(20,18,35,.85);border:1px solid var(--glass-b);box-shadow:0 20px 60px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.03);overflow:hidden;z-index:10;backdrop-filter:blur(8px)}
.loop-card-photo{width:100%;height:60%;background:linear-gradient(135deg,#2a1f4e,#1a1535);position:relative;overflow:hidden}
.loop-card-photo::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(20,18,35,.9))}
/* CSS-drawn person silhouette */
.loop-card-silhouette{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:85px;height:110px}
.sil-head{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:38px;height:38px;border-radius:50%;background:rgba(200,190,220,.15);box-shadow:0 4px 12px rgba(0,0,0,.2)}
.sil-body{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:60px;height:55px;border-radius:30px 30px 0 0;background:rgba(200,190,220,.1)}
.sil-shoulders{position:absolute;bottom:38px;left:50%;transform:translateX(-50%);width:75px;height:20px;border-radius:50% 50% 0 0;background:rgba(200,190,220,.08)}

/* Swipe thumb cursor */
.loop-thumb{position:absolute;bottom:18%;left:50%;transform:translateX(-50%);z-index:20;font-size:1.6rem;opacity:.7;filter:drop-shadow(0 4px 8px rgba(0,0,0,.4));transition:all .5s var(--ease);pointer-events:none}

/* Ghost card graveyard — stacking pile */
.loop-graveyard{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.grave-card{position:absolute;width:120px;height:160px;border-radius:12px;background:rgba(20,18,35,.4);border:1px solid rgba(255,255,255,.03);opacity:0;filter:blur(1.5px) grayscale(.8);transition:all 1s var(--ease)}

.loop-card-info{padding:12px 16px;position:relative;z-index:2}
.loop-card-name{font-family:var(--fd);font-size:1rem;font-weight:500;color:var(--t1);margin-bottom:2px}
.loop-card-detail{font-size:.7rem;color:var(--t3)}
.loop-card-tags{display:flex;gap:4px;margin-top:8px;flex-wrap:wrap}
.loop-card-tags span{font-size:.55rem;padding:3px 8px;border-radius:100px;background:rgba(255,255,255,.05);color:var(--t3);border:1px solid rgba(255,255,255,.06)}

/* Swipe indicators */
.loop-swipe-l,.loop-swipe-r{position:absolute;top:50%;transform:translateY(-50%);font-size:2rem;opacity:0;z-index:11;transition:opacity .3s;font-weight:700}
.loop-swipe-l{left:20px;color:#ef4444}.loop-swipe-r{right:20px;color:#4ade80}

/* Match overlay */
.loop-match-overlay{position:absolute;inset:0;z-index:15;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;pointer-events:none}
.loop-match-text{font-family:var(--fd);font-size:2.2rem;font-weight:700;background:linear-gradient(135deg,var(--coral),var(--purple));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.loop-match-heart{font-size:2.8rem;margin-bottom:10px}
/* Mini confetti */
.loop-confetti{position:absolute;width:8px;height:8px;border-radius:2px;opacity:0}
.lc-1{background:var(--purple)}.lc-2{background:var(--coral)}.lc-3{background:#facc15}.lc-4{background:#4ade80}.lc-5{background:var(--purple)}.lc-6{background:var(--coral)}

/* Chat bubbles for small talk phase */
.loop-chat{position:absolute;inset:0;z-index:12;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;padding:30px;opacity:0;pointer-events:none}
.loop-chat-bubble{padding:10px 16px;border-radius:14px;font-size:.7rem;max-width:200px;opacity:0}
.lcb-a{background:rgba(139,92,246,.12);border:1px solid rgba(139,92,246,.2);color:var(--t2);align-self:flex-start;border-bottom-left-radius:3px}
.lcb-b{background:rgba(244,114,182,.12);border:1px solid rgba(244,114,182,.2);color:var(--t2);align-self:flex-end;border-bottom-right-radius:3px}
.loop-chat-typing{display:flex;gap:3px;align-self:flex-end;padding:6px 12px}
.loop-chat-typing span{width:3px;height:3px;border-radius:50%;background:var(--t3);animation:typing-dots 1.4s ease-in-out infinite}
.loop-chat-typing span:nth-child(2){animation-delay:.2s}
.loop-chat-typing span:nth-child(3){animation-delay:.4s}

/* Ghost phase */
.loop-ghost-overlay{position:absolute;inset:0;z-index:14;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none}
.loop-ghost-icon{font-size:3.5rem;opacity:.5;filter:grayscale(1)}

/* Phase indicator timeline */
.loop-timeline{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:1.5rem}
.loop-phase{display:flex;align-items:center;gap:6px}
.loop-phase-dot{width:8px;height:8px;border-radius:50%;border:1.5px solid var(--glass-b);transition:all .4s var(--ease)}
.loop-phase-dot.active{border-color:var(--coral);background:var(--coral);box-shadow:0 0 8px var(--coral-g)}
.loop-phase-label{font-size:.55rem;color:var(--t3);font-family:var(--fd);text-transform:uppercase;letter-spacing:1px;transition:color .4s}
.loop-phase-label.active{color:var(--t2)}
.loop-phase-line{width:16px;height:1px;background:var(--glass-b)}

/* Loop counter */
.loop-counter{margin-top:1rem;font-family:var(--fd);font-size:.65rem;color:var(--t3);letter-spacing:1px}
.loop-counter span{color:var(--coral);font-weight:600}

/* ==================== CONCEPT: FLOW GRID ==================== */
.fg{position:relative;max-width:900px;margin:0 auto;--fg-delay:700ms}

/* SVG connector lines layer */
.fg-lines{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.fg-lines line{stroke:url(#fgGrad);stroke-width:2;opacity:.5;filter:drop-shadow(0 0 6px rgba(139,92,246,.3))}

/* Spark energy particle on connector paths */
.fg-spark{position:absolute;width:6px;height:6px;border-radius:50%;pointer-events:none;z-index:2;will-change:offset-distance;offset-rotate:0deg}
.fg-spark::before{content:'';position:absolute;inset:-3px;border-radius:50%;background:radial-gradient(circle,rgba(139,92,246,.9) 0%,rgba(244,114,182,.6) 40%,transparent 70%);filter:blur(3px);animation:spark-pulse 1.2s ease-in-out infinite}
.fg-spark::after{content:'';position:absolute;inset:0;border-radius:50%;background:#fff;box-shadow:0 0 6px 2px rgba(139,92,246,.8),0 0 14px 4px rgba(244,114,182,.4)}
@keyframes spark-travel{0%{offset-distance:0%}100%{offset-distance:100%}}
@keyframes spark-pulse{0%,100%{opacity:.6;transform:scale(.8)}50%{opacity:1;transform:scale(1.3)}}

/* Rows = 2 cards side by side */
.fg-row{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-bottom:2.5rem;position:relative;z-index:1}
.fg-row:last-child{margin-bottom:0}

/* Cards — rectangular, gradient border + reveal animation */
.fg-card{border-radius:14px;padding:2px;cursor:default;position:relative;opacity:0;transform:translateY(35px);transition:opacity .65s var(--ease),transform .65s var(--ease),box-shadow .4s var(--ease)}
.fg-card.fg-visible{opacity:1;transform:translateY(0)}
.fg-card.fg-visible:hover{transform:translateY(-5px)}

/* Step number badge */
.fg-card::before{content:attr(data-step);position:absolute;top:-10px;left:20px;font-family:var(--fd);font-size:.65rem;font-weight:700;padding:2px 10px;border-radius:100px;z-index:3;letter-spacing:1px}
.fg-card-purple::before{background:var(--purple);color:#fff}
.fg-card-coral::before{background:var(--coral);color:#fff}
.fg-card-mixed::before{background:linear-gradient(90deg,var(--purple),var(--coral));color:#fff}
.fg-card-dest::before{background:linear-gradient(90deg,var(--purple),var(--coral));color:#fff}

/* Border colors */
.fg-card-purple{background:linear-gradient(135deg,var(--purple),rgba(139,92,246,.2))}
.fg-card-purple:hover{box-shadow:0 8px 40px rgba(139,92,246,.2)}
.fg-card-coral{background:linear-gradient(135deg,var(--coral),rgba(244,114,182,.2))}
.fg-card-coral:hover{box-shadow:0 8px 40px rgba(244,114,182,.2)}
.fg-card-mixed{background:linear-gradient(135deg,var(--purple),var(--coral))}
.fg-card-mixed:hover{box-shadow:0 6px 36px rgba(139,92,246,.15),0 6px 36px rgba(244,114,182,.15)}

/* Destination card */
.fg-card-dest{background:linear-gradient(135deg,var(--purple),var(--coral));padding:3px;box-shadow:0 0 35px rgba(139,92,246,.15),0 0 35px rgba(244,114,182,.15);animation:dest-glow 3s ease-in-out infinite}
@keyframes dest-glow{0%,100%{box-shadow:0 0 35px rgba(139,92,246,.15),0 0 35px rgba(244,114,182,.15)}50%{box-shadow:0 0 55px rgba(139,92,246,.25),0 0 55px rgba(244,114,182,.25)}}
.fg-card-dest:hover{box-shadow:0 0 65px rgba(139,92,246,.3),0 0 65px rgba(244,114,182,.3)}

/* Inner card */
.fg-card-inner{background:rgba(12,12,18,.94);border-radius:12px;padding:1.6rem 1.5rem;backdrop-filter:blur(8px);position:relative;overflow:hidden}

/* Icon area */
.fg-icon-wrap{width:44px;height:44px;display:flex;align-items:center;justify-content:center;margin-bottom:.8rem;border-radius:10px;background:rgba(255,255,255,.03);border:1px solid var(--glass-b)}

/* Card text */
.fg-card-inner h3{font-family:var(--fd);font-size:.95rem;font-weight:600;color:var(--t1);margin-bottom:.4rem;line-height:1.3}
.fg-card-inner p{color:var(--t2);font-size:.8rem;line-height:1.55}

/* Hover detail */
.fg-detail{max-height:0;overflow:hidden;opacity:0;transition:max-height .4s var(--ease),opacity .3s .1s,margin .3s;margin-top:0;font-size:.7rem;color:var(--purple);line-height:1.5;border-top:1px solid transparent;padding-top:0}
.fg-card:hover .fg-detail{max-height:50px;opacity:1;margin-top:.5rem;border-top-color:var(--glass-b);padding-top:.35rem}

/* Destination sparkles */
.fg-card-inner-dest{position:relative}
.fg-dest-sparkles{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.fg-dest-sparkles span{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;opacity:0;animation:dest-sparkle 4s ease-in-out infinite}
.fg-dest-sparkles span:nth-child(1){top:15%;left:10%;animation-delay:0s}
.fg-dest-sparkles span:nth-child(2){top:20%;right:15%;animation-delay:1s}
.fg-dest-sparkles span:nth-child(3){bottom:25%;left:25%;animation-delay:2s}
.fg-dest-sparkles span:nth-child(4){bottom:15%;right:10%;animation-delay:3s}
@keyframes dest-sparkle{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:.7;transform:scale(1.2)}}

/* ---- CSS-DRAWN MINI ICONS ---- */
.flow-icon-wrap{flex-shrink:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center}
.fi{position:relative;width:28px;height:28px}

/* User icon */
.fi-user-head{position:absolute;top:2px;left:50%;transform:translateX(-50%);width:10px;height:10px;border-radius:50%;background:linear-gradient(135deg,var(--purple),#5b3cc4)}
.fi-user-body{position:absolute;bottom:2px;left:50%;transform:translateX(-50%);width:18px;height:10px;border-radius:9px 9px 3px 3px;background:linear-gradient(180deg,var(--purple),rgba(139,92,246,.4))}

/* Bot icon */
.fi-bot{display:flex;align-items:center;justify-content:center}
.fi-bot-head{width:18px;height:14px;border-radius:4px;background:linear-gradient(135deg,var(--purple),#5b3cc4);position:absolute;top:8px;left:50%;transform:translateX(-50%)}
.fi-bot-eye{position:absolute;top:12px;width:3px;height:3px;border-radius:50%;background:#fff}
.fi-bot-eye-l{left:9px}.fi-bot-eye-r{right:9px}
.fi-bot-antenna{position:absolute;top:2px;left:50%;transform:translateX(-50%);width:2px;height:6px;background:var(--purple);border-radius:1px}
.fi-bot-antenna::after{content:'';position:absolute;top:-3px;left:50%;transform:translateX(-50%);width:5px;height:5px;border-radius:50%;background:var(--coral)}

/* Gear icon */
.fi-gear{animation:spin 12s linear infinite}
.fi-gear-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:8px;height:8px;border-radius:50%;border:2px solid var(--purple);background:transparent}
.fi-gear-tooth{position:absolute;background:var(--purple);border-radius:1px}
.fi-gt-1{width:4px;height:2px;top:50%;left:-1px;transform:translateY(-50%)}
.fi-gt-2{width:4px;height:2px;top:50%;right:-1px;transform:translateY(-50%)}
.fi-gt-3{width:2px;height:4px;left:50%;top:-1px;transform:translateX(-50%)}
.fi-gt-4{width:2px;height:4px;left:50%;bottom:-1px;transform:translateX(-50%)}

/* Shield icon */
.fi-shield-body{position:absolute;top:2px;left:50%;transform:translateX(-50%);width:18px;height:22px;border-radius:3px 3px 9px 9px;border:2px solid var(--coral);background:rgba(244,114,182,.08)}
.fi-shield-check{position:absolute;top:9px;left:50%;transform:translateX(-50%) rotate(-45deg);width:8px;height:5px;border-bottom:2px solid var(--coral);border-left:2px solid var(--coral)}

/* Rocket icon */
.fi-rocket-body{position:absolute;top:2px;left:50%;transform:translateX(-50%);width:10px;height:18px;border-radius:5px 5px 2px 2px;background:linear-gradient(180deg,var(--coral),rgba(244,114,182,.5))}
.fi-rocket-flame{position:absolute;bottom:2px;left:50%;transform:translateX(-50%);width:6px;height:6px;border-radius:0 0 3px 3px;background:linear-gradient(180deg,#facc15,#f97316);animation:pulse 1s ease-in-out infinite}
.fi-rocket-wing-l,.fi-rocket-wing-r{position:absolute;bottom:6px;width:5px;height:8px;background:rgba(244,114,182,.3);border-radius:2px}
.fi-rocket-wing-l{left:4px;transform:skewX(10deg)}
.fi-rocket-wing-r{right:4px;transform:skewX(-10deg)}

/* Search icon */
.fi-search-lens{position:absolute;top:4px;left:4px;width:14px;height:14px;border-radius:50%;border:2px solid var(--purple)}
.fi-search-handle{position:absolute;bottom:4px;right:4px;width:8px;height:2px;background:var(--purple);transform:rotate(45deg);border-radius:1px}

/* Spark/star icon */
.fi-spark{display:flex;align-items:center;justify-content:center}
.fi-spark-core{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:5px;height:5px;border-radius:50%;background:#facc15;box-shadow:0 0 6px rgba(250,204,21,.6)}
.fi-spark-line{position:absolute;background:linear-gradient(180deg,#facc15,transparent);border-radius:1px}
.fi-sl-1{width:2px;height:8px;top:2px;left:50%;transform:translateX(-50%)}
.fi-sl-2{width:2px;height:8px;bottom:2px;left:50%;transform:translateX(-50%) rotate(180deg)}
.fi-sl-3{width:8px;height:2px;left:2px;top:50%;transform:translateY(-50%)}
.fi-sl-4{width:8px;height:2px;right:2px;top:50%;transform:translateY(-50%)}

/* Bell icon */
.fi-bell-body{position:absolute;top:4px;left:50%;transform:translateX(-50%);width:16px;height:14px;border-radius:8px 8px 2px 2px;background:linear-gradient(180deg,var(--purple),var(--coral))}
.fi-bell-body::before{content:'';position:absolute;top:-4px;left:50%;transform:translateX(-50%);width:3px;height:5px;background:var(--purple);border-radius:1px}
.fi-bell-clapper{position:absolute;bottom:3px;left:50%;transform:translateX(-50%);width:4px;height:4px;border-radius:50%;background:var(--coral)}

/* ---- PHASE LABELS (side annotations) ---- */
.fg-phase{position:absolute;left:-60px;top:50%;transform:translateY(-50%) rotate(180deg);writing-mode:vertical-lr;font-family:var(--fd);font-size:.6rem;text-transform:uppercase;letter-spacing:3px;color:var(--t3);opacity:0;transition:opacity .6s var(--ease);pointer-events:none;display:flex;align-items:center;gap:6px}
.fg-phase.fp-visible{opacity:1}
.fg-phase::before{content:'';width:1px;height:20px;flex-shrink:0}
.fg-phase-setup{color:var(--purple)}
.fg-phase-setup::before{background:linear-gradient(180deg,var(--purple),transparent)}
.fg-phase-active{color:var(--coral)}
.fg-phase-active::before{background:linear-gradient(180deg,var(--coral),transparent)}
.fg-phase-discover{color:var(--coral)}
.fg-phase-discover::before{background:linear-gradient(180deg,var(--coral),var(--purple))}

/* ---- CUSTOM GRADIENT CURSOR ---- */
.gc{position:fixed;top:0;left:0;width:32px;height:32px;pointer-events:none;z-index:9999;opacity:0;transition:opacity .3s;mix-blend-mode:screen;will-change:transform}
.gc-dot{position:absolute;top:50%;left:50%;width:8px;height:8px;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(255,255,255,.9),rgba(139,92,246,.6) 40%,rgba(244,114,182,.3) 70%,transparent);box-shadow:0 0 10px 2px rgba(139,92,246,.4),0 0 20px 4px rgba(244,114,182,.15);transition:width .35s var(--ease),height .35s var(--ease),box-shadow .35s var(--ease),filter .35s;filter:blur(0px)}
.gc-hover .gc-dot{width:28px;height:28px;box-shadow:0 0 16px 4px rgba(139,92,246,.5),0 0 32px 8px rgba(244,114,182,.2);filter:blur(1px)}

/* Hide custom cursor on touch devices */
@media(hover:none),(pointer:coarse){.gc{display:none}}

/* ==================== WIZARD ==================== */
.section-wizard{text-align:center}
.wz-wrap{max-width:640px;margin:0 auto}

/* Progress bar */
.wz-progress{margin-bottom:2.5rem;position:relative}
.wz-progress-track{width:100%;height:4px;background:var(--glass);border:1px solid var(--glass-b);border-radius:4px;overflow:hidden}
.wz-progress-fill{height:100%;width:20%;background:linear-gradient(90deg,var(--purple),var(--coral));border-radius:4px;transition:width .5s var(--ease)}
.wz-dots{display:flex;justify-content:space-between;margin-top:-14px;position:relative;z-index:2;padding:0 4px}
.wz-dot{width:24px;height:24px;border-radius:50%;background:var(--bg);border:2px solid var(--glass-b);display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-size:.65rem;font-weight:600;color:var(--t3);transition:all .4s var(--ease);cursor:default}
.wz-dot.active{border-color:var(--purple);background:linear-gradient(135deg,var(--purple),var(--coral));color:#fff;box-shadow:0 0 12px var(--purple-g)}
.wz-dot.done{border-color:var(--purple);background:rgba(139,92,246,.15);color:var(--purple)}

/* Stage — steps container */
.wz-stage{position:relative;overflow:hidden;min-height:460px}
.wz-step{position:absolute;inset:0;opacity:0;transform:translateX(40px);pointer-events:none;transition:opacity .45s var(--ease),transform .45s var(--ease)}
.wz-step.active{position:relative;opacity:1;transform:translateX(0);pointer-events:auto}
.wz-step.exit-l{transform:translateX(-40px);opacity:0}
.wz-step.exit-r{transform:translateX(40px);opacity:0}

/* Step header */
.wz-title{font-family:var(--fd);font-size:1.3rem;font-weight:600;margin-bottom:.3rem;color:var(--t1)}
.wz-sub{color:var(--t2);font-size:.9rem;margin-bottom:1.5rem}

/* Form wrapper (glass card) */
.wz-form{background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--glass-b);border-radius:16px;padding:1.8rem;text-align:left}
.wz-grid2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.wz-field{margin-bottom:1.2rem}
.wz-field:last-child{margin-bottom:0}
.wz-field label{display:block;font-family:var(--fd);font-size:.75rem;font-weight:500;color:var(--t2);margin-bottom:.4rem;letter-spacing:.5px}
.wz-req{color:var(--coral);font-weight:400}
.wz-hint{color:var(--t3);font-weight:300;font-size:.65rem}

/* Validation */
.wz-field.wz-invalid .wz-input,
.wz-field.wz-invalid .wz-select,
.wz-field.wz-invalid .wz-textarea{border-color:var(--coral)!important;box-shadow:0 0 0 2px rgba(244,114,182,.15)}
.wz-field.wz-invalid label{color:var(--coral)}
.wz-field .wz-err{display:none;font-size:.6rem;color:var(--coral);margin-top:.3rem;font-weight:400}
.wz-field.wz-invalid .wz-err{display:block}
@keyframes wz-shake{0%,100%{transform:translateX(0)}15%,45%,75%{transform:translateX(-6px)}30%,60%,90%{transform:translateX(6px)}}
.wz-shake{animation:wz-shake .5s ease}

/* Inputs */
.wz-input{width:100%;background:rgba(255,255,255,.03);border:1px solid var(--glass-b);border-radius:10px;padding:.7rem 1rem;color:var(--t1);font-family:var(--fb);font-size:.88rem;outline:none;transition:border-color .3s}
.wz-input:focus{border-color:var(--purple)}
.wz-input::placeholder{color:var(--t3)}
.wz-input-sm{width:70px;text-align:center;padding:.55rem .5rem;font-size:.85rem}
.wz-select{width:100%;background:rgba(255,255,255,.03);border:1px solid var(--glass-b);border-radius:10px;padding:.7rem 1rem;color:var(--t1);font-family:var(--fb);font-size:.88rem;outline:none;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238b5cf6' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;transition:border-color .3s;cursor:pointer}
.wz-select:focus{border-color:var(--purple)}
.wz-select option{background:var(--bg);color:var(--t1)}
.wz-textarea{width:100%;background:rgba(255,255,255,.03);border:1px solid var(--glass-b);border-radius:10px;padding:.7rem 1rem;color:var(--t1);font-family:var(--fb);font-size:.88rem;outline:none;resize:vertical;min-height:70px;transition:border-color .3s}
.wz-textarea:focus{border-color:var(--purple)}
.wz-textarea::placeholder{color:var(--t3)}
.wz-range-row{display:flex;align-items:center;gap:.6rem}
.wz-range-sep{color:var(--t3);font-size:.75rem}

/* Tags (multi-select toggle pills) */
.wz-tags{display:flex;flex-wrap:wrap;gap:.5rem}
.wz-tag{padding:.4rem .9rem;border-radius:100px;background:rgba(255,255,255,.04);border:1px solid var(--glass-b);color:var(--t2);font-family:var(--fb);font-size:.78rem;cursor:pointer;transition:all .25s var(--ease);user-select:none}
.wz-tag:hover{border-color:var(--purple);color:var(--t1)}
.wz-tag.on{background:rgba(139,92,246,.12);border-color:rgba(139,92,246,.4);color:var(--purple)}

/* Avatars (single-select circle grid) */
.wz-avatars{display:grid;grid-template-columns:repeat(6,1fr);gap:.8rem;justify-items:center}
.wz-avatar{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--a1),var(--a2));border:3px solid transparent;cursor:pointer;transition:all .3s var(--ease);position:relative}
.wz-avatar:hover{transform:scale(1.1);box-shadow:0 0 16px rgba(139,92,246,.3)}
.wz-avatar.on{border-color:#fff;box-shadow:0 0 20px var(--purple-g),0 0 40px rgba(244,114,182,.15)}

/* Sliders */
.wz-slider-field{text-align:center}
.wz-slider-labels{display:flex;justify-content:space-between;font-family:var(--fd);font-size:.65rem;color:var(--t3);letter-spacing:.5px;text-transform:uppercase;margin-bottom:.3rem}
.wz-slider{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:3px;background:linear-gradient(90deg,var(--purple),var(--coral));outline:none;cursor:pointer}
.wz-slider::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:rgba(20,18,35,.9);border:2px solid var(--purple);box-shadow:0 0 10px var(--purple-g),0 2px 8px rgba(0,0,0,.5);cursor:pointer;transition:box-shadow .25s}
.wz-slider::-webkit-slider-thumb:hover{box-shadow:0 0 18px var(--purple-g),0 2px 12px rgba(0,0,0,.5)}
.wz-slider::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:rgba(20,18,35,.9);border:2px solid var(--purple);box-shadow:0 0 10px var(--purple-g),0 2px 8px rgba(0,0,0,.5);cursor:pointer}
.wz-slider-val{font-family:var(--fd);font-size:.7rem;color:var(--t3);margin-top:.15rem}

/* Toggles */
.wz-toggles{display:flex;flex-direction:column;gap:1rem;margin-bottom:1.5rem}
.wz-toggle-row{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.wz-toggle-label{font-family:var(--fd);font-size:.82rem;font-weight:500;color:var(--t1)}
.wz-toggle-hint{font-size:.68rem;color:var(--t3);margin-top:1px}
.wz-toggle{position:relative;display:inline-block;width:46px;height:26px;flex-shrink:0;cursor:pointer}
.wz-toggle input{opacity:0;width:0;height:0;position:absolute}
.wz-toggle-track{position:absolute;inset:0;border-radius:13px;background:rgba(255,255,255,.08);border:1px solid var(--glass-b);transition:background .3s,border-color .3s}
.wz-toggle-track::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .3s var(--ease),box-shadow .3s}
.wz-toggle input:checked+.wz-toggle-track{background:linear-gradient(135deg,var(--purple),var(--coral));border-color:transparent}
.wz-toggle input:checked+.wz-toggle-track::after{transform:translateX(20px);box-shadow:0 0 8px var(--purple-g)}

/* Strategy cards (single-select) */
.wz-strats{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem}
.wz-strat{background:var(--glass);border:1px solid var(--glass-b);border-radius:12px;padding:1.1rem .8rem;text-align:center;cursor:pointer;transition:all .3s var(--ease)}
.wz-strat:hover{border-color:var(--glass-bh);transform:translateY(-2px)}
.wz-strat.on{border-color:var(--purple);background:rgba(139,92,246,.08);box-shadow:0 0 20px rgba(139,92,246,.15)}
.wz-strat-icon{font-size:1.4rem;margin-bottom:.4rem}
.wz-strat-name{font-family:var(--fd);font-size:.82rem;font-weight:600;color:var(--t1);margin-bottom:.15rem}
.wz-strat-desc{font-size:.65rem;color:var(--t3)}

/* Nav buttons */
.wz-nav{display:flex;justify-content:space-between;margin-top:1.5rem;gap:1rem}
.wz-btn{border:none;border-radius:12px;padding:.8rem 1.8rem;font-family:var(--fd);font-size:.88rem;font-weight:500;cursor:pointer;transition:all .3s var(--ease);letter-spacing:.3px}
.wz-btn:disabled{opacity:.3;cursor:default;pointer-events:none}
.wz-btn-back{background:transparent;border:1px solid var(--glass-b);color:var(--t2)}
.wz-btn-back:hover:not(:disabled){border-color:var(--purple);color:var(--t1)}
.wz-btn-next{background:linear-gradient(135deg,var(--purple),var(--coral));color:#fff;box-shadow:0 4px 20px rgba(139,92,246,.2)}
.wz-btn-next:hover{transform:translateY(-2px);box-shadow:0 8px 30px var(--purple-g)}

/* Completion screen */
.wz-done-icon{font-size:3rem;margin-bottom:.5rem;animation:icon-bounce 2s ease-in-out infinite}
.wz-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin:1.5rem 0}
.wz-summary-card{background:var(--glass);border:1px solid var(--glass-b);border-radius:12px;padding:1rem;text-align:center}
.wz-summary-label{font-family:var(--fd);font-size:.65rem;color:var(--t3);text-transform:uppercase;letter-spacing:1px;margin-bottom:.3rem}
.wz-summary-val{font-family:var(--fd);font-size:.88rem;font-weight:600;color:var(--t1)}
.wz-email{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap;align-items:flex-start}
.wz-email .wz-input{max-width:280px}
.wz-email .wz-field-email{margin-bottom:0;flex:0 1 auto}

/* ==================== AGENTS TABLE ==================== */
.section-agents{text-align:center}
.at-wrap{max-width:1060px;margin:0 auto}

/* Header: stats + search */
.at-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.2rem;flex-wrap:wrap;gap:1rem}
.at-stats{display:flex;gap:2rem}
.at-stat{display:flex;flex-direction:column;align-items:flex-start}
.at-stat-val{font-family:var(--fd);font-size:1.4rem;font-weight:700;background:linear-gradient(135deg,var(--purple),var(--coral));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1.2}
.at-stat-label{font-size:.65rem;color:var(--t3);letter-spacing:.5px;text-transform:uppercase;font-family:var(--fd)}

/* Search with icon */
.at-search-wrap{position:relative}
.at-search-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--t3);pointer-events:none}
.at-search{max-width:220px;font-size:.82rem;padding:.55rem 1rem .55rem 2.1rem}

/* Filter tabs */
.at-filters{display:flex;gap:.5rem;margin-bottom:1.2rem;flex-wrap:wrap}
.at-filter{background:transparent;border:1px solid var(--glass-b);border-radius:100px;padding:.35rem 1rem;font-family:var(--fd);font-size:.72rem;font-weight:500;color:var(--t3);cursor:pointer;transition:all .25s var(--ease);display:flex;align-items:center;gap:.4rem}
.at-filter:hover{border-color:var(--purple);color:var(--t2)}
.at-filter.on{background:rgba(139,92,246,.1);border-color:rgba(139,92,246,.35);color:var(--purple)}
.at-filter-count{font-size:.6rem;opacity:.6}

/* Table wrapper (glass card) */
.at-table-wrap{background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--glass-b);border-radius:16px;overflow:hidden}
.at-table{width:100%;border-collapse:collapse;text-align:left}
.at-table thead{background:rgba(255,255,255,.02)}
.at-table th{font-family:var(--fd);font-size:.68rem;font-weight:500;color:var(--t3);text-transform:uppercase;letter-spacing:1px;padding:.9rem .8rem;border-bottom:1px solid var(--glass-b);white-space:nowrap}
.at-table td{padding:.7rem .8rem;border-bottom:1px solid rgba(255,255,255,.03);font-size:.82rem;color:var(--t2);vertical-align:middle}
.at-table tbody tr.at-row{transition:background .25s,opacity .4s,transform .4s}
.at-table tbody tr.at-row:hover{background:rgba(139,92,246,.04)}
.at-table tbody tr.at-row:last-of-type td{border-bottom:none}

/* Row stagger reveal */
.at-table tbody tr.at-row{opacity:0;transform:translateY(12px)}
.at-table tbody tr.at-row.at-visible{opacity:1;transform:translateY(0)}

/* Highlight newly added row */
.at-table tbody tr.at-row.at-highlight{background:rgba(139,92,246,.08);box-shadow:inset 3px 0 0 var(--purple)}
@keyframes at-pulse-highlight{0%,100%{background:rgba(139,92,246,.08)}50%{background:rgba(139,92,246,.16)}}
.at-table tbody tr.at-row.at-highlight.at-visible{animation:at-pulse-highlight 1.5s ease 2}

/* Sortable columns */
.at-sortable{cursor:pointer;user-select:none;transition:color .25s}
.at-sortable:hover{color:var(--t1)}
.at-sort-arrow{display:inline-block;width:0;height:0;margin-left:4px;vertical-align:middle;opacity:0;transition:opacity .2s,transform .2s}
.at-sortable.asc .at-sort-arrow,.at-sortable.desc .at-sort-arrow{opacity:1}
.at-sortable.asc .at-sort-arrow{border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:5px solid var(--purple)}
.at-sortable.desc .at-sort-arrow{border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid var(--purple)}

/* Agent cell: avatar + name */
.at-agent{display:flex;align-items:center;gap:.6rem}
.at-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--a1),var(--a2));flex-shrink:0;box-shadow:0 0 10px rgba(139,92,246,.15);position:relative}
.at-name{font-family:var(--fd);font-weight:600;color:var(--t1);font-size:.85rem}

/* Avatar pulse ring for active/matching */
.at-av-active::after,.at-av-matching::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:2px solid;animation:av-ring 2.5s ease-in-out infinite;pointer-events:none}
.at-av-active::after{border-color:rgba(74,222,128,.4);animation-name:av-ring-green}
.at-av-matching::after{border-color:rgba(139,92,246,.4);animation-name:av-ring-purple}
@keyframes av-ring-green{0%,100%{opacity:.3;transform:scale(1)}50%{opacity:.8;transform:scale(1.15)}}
@keyframes av-ring-purple{0%,100%{opacity:.3;transform:scale(1)}50%{opacity:.8;transform:scale(1.15)}}

/* Style pills */
.at-pills{display:flex;gap:.3rem;flex-wrap:wrap}
.at-pill{padding:.15rem .5rem;border-radius:100px;background:rgba(139,92,246,.08);border:1px solid rgba(139,92,246,.15);color:var(--purple);font-size:.65rem;font-family:var(--fb);white-space:nowrap}
.at-pill-crypto{background:rgba(250,204,21,.08);border-color:rgba(250,204,21,.2);color:#facc15}

/* Strategy badge */
.at-strategy{padding:.2rem .6rem;border-radius:100px;font-family:var(--fd);font-size:.68rem;font-weight:500;white-space:nowrap}
.at-strat-balanced{background:rgba(139,92,246,.1);color:var(--purple);border:1px solid rgba(139,92,246,.2)}
.at-strat-conservative{background:rgba(56,189,248,.08);color:#38bdf8;border:1px solid rgba(56,189,248,.2)}
.at-strat-aggressive{background:rgba(244,114,182,.08);color:var(--coral);border:1px solid rgba(244,114,182,.2)}

/* Status indicator */
.at-status{display:inline-flex;align-items:center;gap:.35rem;font-family:var(--fd);font-size:.72rem;font-weight:500;white-space:nowrap}
.at-status-dot{width:7px;height:7px;border-radius:50%;display:inline-block}
.at-status-active .at-status-dot{background:#4ade80;box-shadow:0 0 8px rgba(74,222,128,.5);animation:status-pulse 2s ease-in-out infinite}
.at-status-active{color:#4ade80}
.at-status-matching .at-status-dot{background:var(--purple);box-shadow:0 0 8px var(--purple-g);animation:status-pulse 1.5s ease-in-out infinite}
.at-status-matching{color:var(--purple)}
.at-status-idle .at-status-dot{background:var(--t3)}
.at-status-idle{color:var(--t3)}
@keyframes status-pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* Compatibility mini-bar */
.at-compat{display:flex;align-items:center;gap:.5rem;min-width:100px}
.at-compat-bar{flex:1;height:5px;border-radius:3px;background:rgba(255,255,255,.06);overflow:hidden}
.at-compat-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--purple),var(--coral));width:var(--cw);transition:width 1s var(--ease)}
.at-compat-val{font-family:var(--fd);font-size:.72rem;font-weight:600;color:var(--t1);min-width:28px}


/* Match count */
.at-match-count{font-family:var(--fd);font-weight:600;color:var(--t1);font-size:.85rem}

/* Last active time */
.at-time{font-size:.72rem;color:var(--t3);white-space:nowrap}

/* Expandable row detail */
.at-row{cursor:pointer}
.at-row-detail{display:none}
.at-row-detail.open{display:table-row}
.at-row-detail td{padding:0;border-bottom:1px solid rgba(139,92,246,.08)}
.at-detail{padding:1rem 1.2rem;background:rgba(139,92,246,.02);animation:detail-open .35s var(--ease)}
@keyframes detail-open{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.at-detail-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;text-align:left}
.at-detail-item{}
.at-detail-label{font-family:var(--fd);font-size:.62rem;font-weight:500;color:var(--t3);text-transform:uppercase;letter-spacing:.8px;margin-bottom:.4rem;display:block}
.at-detail-bar-row{display:flex;align-items:center;gap:.4rem;font-size:.62rem;color:var(--t3)}
.at-mini-bar{flex:1;height:4px;border-radius:2px;background:rgba(255,255,255,.06);overflow:hidden}
.at-mini-fill{height:100%;border-radius:2px;background:linear-gradient(90deg,var(--purple),var(--coral))}
.at-detail-tags{display:flex;flex-wrap:wrap;gap:.3rem}
.at-detail-tags span{padding:.15rem .5rem;border-radius:100px;background:rgba(255,255,255,.04);border:1px solid var(--glass-b);color:var(--t2);font-size:.62rem;font-family:var(--fb)}

/* Expand indicator on row */
.at-row .at-name::after{content:'›';margin-left:.4rem;font-size:.7rem;color:var(--t3);transition:transform .25s;display:inline-block}
.at-row.expanded .at-name::after{transform:rotate(90deg);color:var(--purple)}

/* Empty state */
.at-empty td{padding:3rem 1rem!important;border-bottom:none!important}
.at-empty-inner{text-align:center}
.at-empty-icon{font-size:2rem;margin-bottom:.5rem}
.at-empty-text{font-family:var(--fd);font-size:.9rem;color:var(--t2);margin-bottom:.2rem}
.at-empty-hint{font-size:.75rem;color:var(--t3)}

/* Pagination */
.at-pagination{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-top:1.2rem;flex-wrap:wrap}
.at-page-btn{background:transparent;border:1px solid var(--glass-b);border-radius:8px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;color:var(--t3);cursor:pointer;transition:all .25s var(--ease)}
.at-page-btn:hover:not(:disabled){border-color:var(--purple);color:var(--t1);background:rgba(139,92,246,.06)}
.at-page-btn:disabled{opacity:.3;cursor:default}
.at-page-nums{display:flex;gap:.3rem}
.at-page-num{background:transparent;border:1px solid var(--glass-b);border-radius:8px;min-width:34px;height:34px;padding:0 .4rem;display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-size:.75rem;font-weight:500;color:var(--t3);cursor:pointer;transition:all .25s var(--ease)}
.at-page-num:hover{border-color:var(--purple);color:var(--t1)}
.at-page-num.on{background:rgba(139,92,246,.12);border-color:rgba(139,92,246,.4);color:var(--purple);font-weight:600}
.at-page-ellipsis{min-width:24px;height:34px;display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-size:.75rem;color:var(--t3)}
.at-page-info{font-family:var(--fd);font-size:.68rem;color:var(--t3);margin-left:.6rem}
.at-pagination[data-pages="1"]{display:none}

/* Wizard feedback message */
#wzFeedback{margin-top:1rem;padding:.8rem 1.2rem;border-radius:12px;font-size:.85rem;text-align:center;transition:opacity .3s;min-height:0}
#wzFeedback:empty{display:none}
#wzFeedback.wz-success{background:rgba(74,222,128,.1);border:1px solid rgba(74,222,128,.3);color:#4ade80}
#wzFeedback.wz-error{background:rgba(244,114,182,.1);border:1px solid rgba(244,114,182,.3);color:var(--coral)}

.footer{color:var(--t3);font-size:.8rem;display:flex;flex-direction:column;gap:.3rem;align-items:center}
.section-divider{width:80px;height:1px;background:linear-gradient(90deg,transparent,var(--purple),var(--coral),transparent);margin:0 auto 3rem;opacity:.5}

/* ==================== RESPONSIVE ==================== */
@media(max-width:768px){
  .nav-logo{top:.6rem;left:1rem}
  .nav-right{top:.6rem;right:1rem;gap:.4rem}
  .nav-logo-img{height:100px}
  .nav-logo-text{font-size:.9rem;letter-spacing:.1em}
  .grid-2,.grid-3{grid-template-columns:1fr}
  .loop-stage{height:420px}
  .loop-card{width:200px;height:270px}
  .fg-row{grid-template-columns:1fr;gap:1.5rem;margin-bottom:1.5rem}
  .fg-card-inner{padding:1.3rem 1.1rem}
  .fg-card-inner h3{font-size:.88rem}
  .fg-card-inner p{font-size:.76rem}
  .fg-icon-wrap{width:36px;height:36px}
  .fg-lines{display:none}
  .fg-spark{display:none}
  .fg-phase{display:none}
  .hero{padding-top:5rem}
  .section{padding:3rem 1.25rem}
  .hero-scene{height:420px}
  .agent-boy{left:5%}.agent-girl{right:5%}
  .panel-profile{display:none}.panel-match{display:none}
  .panel-convo{width:200px;padding:10px}
  .icon-spark,.icon-bell,.icon-check{display:none}
  .hero-beam{width:100px}
  /* Wizard responsive */
  .wz-grid2{grid-template-columns:1fr}
  .wz-avatars{grid-template-columns:repeat(3,1fr)}
  .wz-strats{grid-template-columns:1fr}
  .wz-summary{grid-template-columns:1fr}
  .wz-stage{min-height:auto}
  .wz-form{padding:1.2rem}
  .wz-toggle-row{flex-direction:column;align-items:flex-start;gap:.5rem}
  /* Agents table responsive */
  .at-header{flex-direction:column;align-items:flex-start}
  .at-search-wrap{width:100%}.at-search{max-width:100%;width:100%}
  .at-stats{gap:1.2rem}
  .at-filters{gap:.35rem}
  .at-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .at-table{min-width:820px}
  .at-table th,.at-table td{padding:.55rem .5rem;font-size:.72rem}
  .at-pill{font-size:.55rem;padding:.1rem .35rem}
  .at-detail-grid{grid-template-columns:1fr}
}
@media(max-width:480px){
  .hero-scene{height:350px}
  .panel-convo{display:none}
  .scene-icon{display:none}
}
@media(prefers-reduced-motion:reduce){
  .reveal{transition:none;opacity:1;transform:none}
  .fg-card{opacity:1;transform:none;transition:none}
  .fg-spark{display:none}
  *{animation:none!important;transition-duration:0s!important}
  #particles{display:none}
}