/* ============================= */
/* LocAisle — JoinPogo-like Style */
/* ============================= */

/* ----- Color Variables ----- */
:root{
  --bg:#ffffff;
  --surface:#f8fafc;
  --muted:#6b7280;
  --accent-1:#6CCFF6; /* light blue */
  --accent-2:#56D6A4; /* slightly darker light green */
  --accent-3:#10b981;
  --glass: rgba(2,6,23,0.04);
  --card-shadow: 0 10px 30px rgba(15,23,42,0.06);
  --radius-lg: 18px;
  --radius-sm: 10px;
  --text-main:#0b1220;
  --text-dim:#6b7280;
}

/* ----- Global ----- */
*{box-sizing:border-box;margin:0;padding:0;scroll-behavior:smooth}
html,body{height:100%}
body{
  background-image:
    linear-gradient(180deg, var(--accent-1) 0%, rgba(255,255,255,0) 14%),
    linear-gradient(180deg, rgba(248,250,252,1) 14%, rgba(248,250,252,1) 86%),
    linear-gradient(180deg, rgba(255,255,255,0) 86%, var(--accent-2) 100%);
  background-repeat:no-repeat;
  background-attachment:scroll;
  color:var(--text-main);
  font-family: Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding-bottom:48px;
}

/* ----- Header / Navigation ----- */
header{
  background: linear-gradient(90deg, rgba(2,6,23,0.02), transparent);
  padding:18px 40px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:sticky;
  top:0;
  z-index:100;
  backdrop-filter: blur(6px);
  border-bottom:1px solid rgba(15,23,42,0.04);
}

.header-left{display:flex;align-items:center;gap:16px}
.brand {
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:var(--text-main);
}
.brand .logo {
  border-radius:12px;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,var(--accent-1),var(--accent-2));
  box-shadow: 0 6px 20px rgba(37,99,235,0.14);
  padding:6px;
}

header h1{
  font-size:18px;
  font-weight:700;
  letter-spacing:-0.01em;
  color:var(--text-main);
}

nav a{
  color:var(--text-dim);
  margin-left:22px;
  text-decoration:none;
  font-weight:600;
  transition:color .15s ease, transform .12s ease;
}
nav a:hover{ color:var(--text-main); transform:translateY(-2px) }

/* CTA in header */
.header-cta a{
  display:inline-block;
  margin-left:16px;
  padding:10px 16px;
  background: linear-gradient(90deg,var(--accent-2),var(--accent-1));
  color:white;
  border-radius:999px;
  font-weight:700;
  box-shadow: 0 8px 30px rgba(37,99,235,0.18);
  text-decoration:none;
}

/* ----- Hero ----- */
.hero{
  width:100%;
  padding:32px 0;
  position:relative;
}

.hero-inner{
  max-width:1200px;
  margin:48px auto;
  display:grid;
  grid-template-columns: 1fr 420px;
  gap:40px;
  align-items:center;
  padding:28px;
}

.hero-left{
  padding:28px 0;
}
.hero h2{
  font-size:40px;
  line-height:1.02;
  margin-bottom:18px;
  color:var(--text-main);
  font-weight:800;
}
/* Accent for a highlighted word inside hero */
.hero h2 span{
  background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero p{
  color:var(--text-dim);
  font-size:18px;
  margin-bottom:22px;
  max-width:640px;
}

/* hero buttons */
.hero-actions{display:flex;gap:12px;align-items:center}
.button{
  padding:12px 20px;
  border-radius:999px;
  font-weight:700;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
}
.button-primary{
  background: linear-gradient(90deg,var(--accent-2),var(--accent-1));
  color:#fff;
  box-shadow:0 12px 40px rgba(37,99,235,0.18);
}
.button-ghost{
  background: rgba(255,255,255,0.9);
  color: var(--accent-3);
  border: 2px solid var(--accent-2);
  backdrop-filter: blur(4px);
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(86,214,164,0.15);
}

.button-ghost:hover{
  background: linear-gradient(135deg, rgba(86,214,164,0.1), rgba(108,207,246,0.1));
  border-color: var(--accent-3);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(86,214,164,0.25);
}

/* hero visual card */
.hero-card{
  background: linear-gradient(180deg, rgba(2,6,23,0.02), rgba(2,6,23,0.01));
  border-radius:20px;
  padding:18px;
  box-shadow: var(--card-shadow);
  border:1px solid rgba(15,23,42,0.04);
}

/* ----- Sections / Cards ----- */
section{
  width:100%;
  padding:48px 0;
  position:relative;
}

.section-inner{
  max-width:1100px;
  margin:0 auto;
  padding:28px;
}

/* alternating subtle full-width bands */
section:nth-of-type(odd)::before,
section:nth-of-type(even)::before{
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  z-index: -1;
}
section:nth-of-type(odd)::before{
  /* blue band - matching header accent color */
  background: linear-gradient(180deg, rgba(108,207,246,0.35), rgba(255,255,255,0));
}
section:nth-of-type(even)::before{
  /* green band - 30% lighter */
  background: linear-gradient(180deg, rgba(69,171,131,0.36), rgba(255,255,255,0));
}

.cards{
  display:grid;
  grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
  gap:18px;
  margin-top:18px;
}

.card{
  background: linear-gradient(180deg, rgba(2,6,23,0.02), rgba(2,6,23,0.01));
  border-radius:var(--radius-lg);
  padding:18px;
  border:1px solid rgba(15,23,42,0.04);
  box-shadow: 0 10px 30px rgba(2,6,23,0.08);
}

/* subtle accent dot */
.card .title{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:8px;
  font-weight:700;
  color:var(--text-main);
}
.card .dot{
  width:10px;height:10px;border-radius:50%;
  background:linear-gradient(90deg,var(--accent-1),var(--accent-2));
  box-shadow:0 6px 18px rgba(124,58,237,0.08);
}

/* ----- Footer ----- */
footer,
.footer{
  margin-top:48px;
  padding:36px 20px;
  text-align:center;
  color:var(--text-dim);
  font-size:14px;
  background: linear-gradient(180deg, rgba(248,250,252,0), rgba(108,207,246,0.15));
}

/* ----- Logo Thumbnail ----- */
.thumbnail{
  width:72px;
  height:72px;
  border-radius:14px;
  object-fit:cover;
  display:inline-block;
  transition:transform .18s ease, box-shadow .18s ease;
  box-shadow: 0 8px 22px rgba(2,6,23,0.06);
  border: 1px solid rgba(15,23,42,0.06);
}
.thumbnail:hover{
  transform:translateY(-4px) scale(1.02);
  box-shadow: 0 16px 36px rgba(2,6,23,0.6);
}

/* ----- Utilities & Responsive ----- */
.lead{font-size:18px;color:var(--text-dim)}
.small{font-size:13px;color:var(--text-dim)}

@media (max-width: 980px){
  .hero{ grid-template-columns: 1fr 360px; gap:28px; padding:20px }
  header{ padding:14px 20px }
  .hero h2{ font-size:34px }
}

@media (max-width: 720px){
  .hero-inner{ grid-template-columns: 1fr; padding:18px }
  .hero-card{ margin-top:18px }
  nav{ flex-wrap:wrap; gap:4px }
  nav a{ margin-left:8px; font-size:14px }
  .thumbnail{ width:60px;height:60px;border-radius:12px }
  .hero h2{ font-size:28px }
  .hero-actions{ flex-direction:column; width:100% }
  .hero-actions .button{ width:100%; justify-content:center; text-align:center }
  .cards{ grid-template-columns:1fr }
  .section-inner{ padding:20px 16px }
  .section-inner h2{ font-size:24px }
  .section-inner p{ font-size:1rem }
  .futuristic-container{ padding:40px 0; min-height: 220px }
  .futuristic-container .main-logo{ width:150px; height:150px }
}

@media (max-width:480px){
  header{ flex-direction:column; align-items:flex-start; gap:10px; padding:12px 16px }
  nav{ width:100%; justify-content:flex-start }
  nav a{ margin-left:0; margin-right:10px; font-size:13px }
  .header-cta{ width:100%; margin-top:8px }
  .header-cta a{ width:100%; text-align:center; display:block; margin-left:0 }
  .hero h2{ font-size:24px }
  .hero p{ font-size:15px }
  .button{ padding:10px 14px; font-size:14px }
  .thumbnail{ width:48px;height:48px }
  .futuristic-container{ padding:30px 0; min-height: 180px }
  .futuristic-container .main-logo{ width:120px; height:120px }
}

/* --- Centered main logo below top band (logo only) --- */
.logo-band{
  display:flex;
  justify-content:center; /* center the logo */
  align-items:center;
  gap:0;
  position: relative;
  width:100%;
  max-width:100%; /* full width for futuristic container */
  margin: 0; /* no margin */
  padding:0; /* no padding */
} 

.community{
  position:relative; /* flow sits inline next to logo */
  width:320px;
  height:320px;
  flex:0 0 320px;
  z-index: 3; /* raised so the animation sits above the logo */
  pointer-events:none; /* allow clicks to pass through to the logo */
  transform: translateY(-8px); /* move slightly higher */
  margin:0;
}

/* ensure SVG scales to its container */
.community svg{ width:100%; height:100%; display:block }


.community .connections{
  transform-origin:170px 160px;
  /* static - rotation removed */
  transform: none !important;
}

/* drawing connections as arcs (flowing display) */
.community .conn{
  stroke-opacity:0.9;
  stroke-linejoin:round;
  stroke-dasharray: 220; /* used for flow animation */
  stroke-dashoffset: 220;
  vector-effect: non-scaling-stroke;
  transition: stroke-dashoffset .4s linear;
}
/* chords (cross links) with soft glow */
.community .chord{
  mix-blend-mode: screen;
  stroke-linejoin:round;
}

/* ensure flows/particles/connections render luminously above the logo */
.community .flows,
.community .particles,
.community .connections{ mix-blend-mode: screen; pointer-events: none }


/* particles and node pulses */
.community .particles .particle{ opacity:0.95; transform-origin: center center; }

/* flow-dot base + color alternation */
.community .flows .flow-dot{ opacity:0.98; mix-blend-mode: screen; pointer-events:none; filter: url(#glow); }
.community .flows .flow-dot.flow-odd{ fill: var(--accent-1); }
.community .flows .flow-dot.flow-even{ fill: var(--accent-2); }

/* animate flow on select paths */
@keyframes flowLine{ from{ stroke-dashoffset: 220 } to{ stroke-dashoffset: 0 } }
@keyframes pulseNode{ 0%{ transform: scale(1); opacity:0.95 } 50%{ transform: scale(1.4); opacity:0.6 } 100%{ transform: scale(1); opacity:0.95 } }

/* apply animations */
.community .conn.flow{ animation: flowLine 6s linear infinite; }
.community .particles .particle{ animation: float 5s ease-in-out infinite; }
.community .avatar .avatar-bg{ transition: transform .28s ease, filter .28s ease; }

/* stagger particle floats */
.community .particle.p1{ animation-duration:5.6s; transform-origin:200px 120px; }
.community .particle.p2{ animation-duration:4.2s; transform-origin:140px 100px; }
.community .particle.p3{ animation-duration:6.3s; transform-origin:180px 200px; }
.community .particle.p4{ animation-duration:4.8s; transform-origin:220px 210px; }
.community .particle.p5{ animation-duration:5.1s; transform-origin:120px 150px; }

@keyframes float{ 0%{ transform: translateY(0) } 50%{ transform: translateY(-8px) } 100%{ transform: translateY(0) } }

/* gentle node pulses */
.community .nodes .avatar .avatar-bg{ filter: url(#glow); }
.community .nodes .avatar .avatar-bg{ animation: pulseNode 4.8s ease-in-out infinite; }

/* reduce motion */
@media (prefers-reduced-motion: reduce){
  .community .conn.flow, .community .particles .particle, .community .nodes .avatar .avatar-bg{ animation: none !important; stroke-dashoffset: 0 !important; }
  .community .chord{ filter:none !important }
  .community .flows{ display:none !important; }
}

/* avatars represent community members/merchants (detailed SVGs) */
.community .avatar { transform-origin: 170px 160px; transition: transform .18s ease, filter .18s ease; pointer-events:auto }
.community .avatar:hover { transform: scale(1.08); filter: drop-shadow(0 6px 12px rgba(0,0,0,0.12)); }

.community .avatar .avatar-bg{ fill: #ffffff; stroke: rgba(0,0,0,0.06); stroke-width:1px; }
/* alternate avatar bg around the ellipse: odd = blue, even = green */
.community .nodes .avatar:nth-child(odd) .avatar-bg{ fill: var(--accent-1); }
.community .nodes .avatar:nth-child(even) .avatar-bg{ fill: var(--accent-2); }

.community .avatar .avatar-head{ fill: var(--text-main); }
.community .avatar .avatar-hair{ fill: #2b2b2b; opacity:0.98 }
.community .avatar .avatar-shirt{ fill: var(--accent-2); }

/* tune shirt color for odd/even */
.community .avatar.avatar-odd .avatar-shirt { fill: var(--accent-1); }
.community .avatar.avatar-even .avatar-shirt { fill: var(--accent-2); }

/* individual sizing tweaks */
.community .avatar .person { transform: translateY(-2px); }
.community .avatar .avatar-head { r: 5; }
.community .avatar .avatar-bg { r: 14; }

/* responsive */
@media (max-width: 520px){
  .community .avatar { transform-origin: center center; }
  .community .avatar .avatar-bg{ r: 12; }
  .community .avatar .avatar-head{ r: 4; }
  .community .avatar .avatar-shirt{ height: 8px; }
}

@keyframes drawLine{
  0%{ stroke-dashoffset: 800; stroke-opacity: 0.12 }
  70%{ stroke-dashoffset: 120; stroke-opacity: 0.9 }
  100%{ stroke-dashoffset: 0; stroke-opacity: 0.9 }
}

@keyframes nodePulse{
  0%{ transform: scale(1); opacity:1 }
  50%{ transform: scale(1.35); opacity:0.85 }
  100%{ transform: scale(1); opacity:1 }
}

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce){
  .community .connections, .community .conn, .community .person{ animation: none !important; }
  .community .conn{ stroke-dashoffset: 0 !important; stroke-opacity: 0.9 !important }
  .community{ transform: none !important }
}
/* Futuristic Container */
.futuristic-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 60px 0;
  background: url('Images/futuristic-bg.jpg') center center no-repeat;
  background-size: cover;
  min-height: 280px;
  box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.3), 0 4px 30px rgba(0, 0, 0, 0.2);
}

.futuristic-container .main-logo {
  position: relative;
  z-index: 10;
  width: 220px;
  height: 220px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.9), 0 0 40px rgba(255, 255, 255, 0.5), 0 20px 60px rgba(0, 0, 0, 0.4);
  border: none;
}

.main-logo{
  width:220px;
  height:220px;
  border-radius:20px;
  object-fit:cover;
  box-shadow: 0 20px 40px rgba(15,23,42,0.08);
  border:4px solid #ffffff;
  transition:transform .18s ease, box-shadow .18s ease;
  position:relative;
  z-index:2;
  transform: translateY(-8px); /* smaller lift for centered layout */
  opacity: 0.85;
}
.main-logo:hover{ transform: translateY(-12px); box-shadow: 0 30px 60px rgba(15,23,42,0.12) }

@media (max-width: 980px){
  .logo-band{ margin-top: calc(1.6vh + 6px); gap:8px; padding:10px 51px; max-width:400px }
  .main-logo{ width:170px; height:170px; transform: translateY(-8px); }
  .main-logo:hover{ transform: translateY(-12px); }
}         
@media (max-width: 480px){
  .logo-band{ margin-top: calc(1.4vh + 6px); flex-direction: column; gap:6px; align-items:center; padding:8px 43px }
  .main-logo{ width:130px; height:130px; transform: translateY(-6px); }
  .main-logo:hover{ transform: translateY(-10px); }
}

@keyframes rotate-gentle{ from{ transform: rotate(0deg) } to{ transform: rotate(360deg) } }

@keyframes connPulse{
  0%{ stroke-opacity:0.12; stroke-width:1 }
  50%{ stroke-opacity:0.82; stroke-width:2.4 }
  100%{ stroke-opacity:0.12; stroke-width:1 }
}

@keyframes nodePulse{
  0%{ transform: scale(1); opacity:1 }
  50%{ transform: scale(1.35); opacity:0.8 }
  100%{ transform: scale(1); opacity:1 }
}

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce){
  .community .connections, .community .conn, .community .person{ animation: none !important; }
  .community .conn{ stroke-dashoffset: 0 !important; stroke-opacity: 0.9 !important }
  .community{ transform: none !important }
}

/* ----- Micro animations ----- */
@keyframes floatUp{
  from{ transform: translateY(6px); opacity: .0 }
  to{ transform: translateY(0); opacity: 1 }
}

/* ===== DISCOVERY WIDGET ANIMATION ===== */
.discovery-widget{
  background: linear-gradient(180deg, rgba(86,214,164,0.15), rgba(108,207,246,0.1));
  border-radius: 12px;
  padding: 16px;
  height: 238px;
  display: flex;
  flex-direction: column;
  margin: 16px 16px 8px 16px;
  border: 2px solid rgba(15,23,42,0.15);
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  overflow: hidden;
}

/* Widget Logo Header */
.widget-header{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 14px;
  margin-bottom: 10px;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  height: 0;
  overflow: hidden;
  background: rgba(255,255,255,0.6);
  border-radius: 20px;
  backdrop-filter: blur(4px);
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

.widget-header.show{
  opacity: 1;
  transform: translateY(0);
  height: auto;
  padding: 6px 14px;
}

.widget-logo{
  width: 24px;
  height: 24px;
  border-radius: 4px;
  object-fit: cover;
}

.widget-brand{
  font-size: 14px;
  font-weight: 700;
  color: #333;
}

.widget-ai{
  font-family: Garamond, serif;
  font-size: 15px;
  font-weight: bold;
}

.discovery-search{
  background: rgba(255,255,255,0.95);
  border-radius: 8px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  margin-bottom: 16px;
  transition: opacity 0.4s ease, transform 0.4s ease, height 0.4s ease, margin 0.4s ease, padding 0.4s ease;
}

.discovery-search.hidden{
  opacity: 0;
  transform: translateY(-10px);
  height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.search-icon{ font-size: 16px; }

.search-text{
  flex: 1;
  font-size: 14px;
  color: #333;
  min-height: 1.2em;
}

.cursor{
  color: var(--accent-1);
  animation: blink 1s infinite;
  font-weight: 300;
}

@keyframes blink{
  0%, 50%{ opacity: 1; }
  51%, 100%{ opacity: 0; }
}

.discovery-stages{
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.stage{
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
}

.stage.active{
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

/* AI Processing Stage */
.ai-hub{
  position: relative;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-40%);
}

.ai-core{
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  z-index: 2;
}

.pulse-ring{
  position: absolute;
  width: 60px;
  height: 60px;
  border: 3px solid var(--accent-1);
  border-radius: 50%;
  animation: pulse-expand 1.5s ease-out infinite;
}

.pulse-ring.delay-1{
  animation-delay: 0.5s;
}

@keyframes pulse-expand{
  0%{ transform: scale(1); opacity: 0.8; }
  100%{ transform: scale(1.8); opacity: 0; }
}

.processing-text{
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  color: #333;
  font-size: 5px;
  background: rgba(255,255,255,0.7);
  padding: 2px 6px;
  border-radius: 20px;
  backdrop-filter: blur(4px);
  font-weight: 600;
}

/* Network Visualization Stage */
.stage-network{
  flex-direction: column;
}

.network-container{
  position: relative;
  width: 200px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ai-center{
  position: absolute;
  left: 30%;
  top: 40%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.network-line{
  position: absolute;
  height: 2px;
  background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
  top: 50%;
  left: 50%;
  width: 0;
  animation: grow-line 1s ease-out forwards;
}

.line-1{ transform: rotate(-36deg); transform-origin: left center; }
.line-2{ transform: rotate(36deg); transform-origin: left center; }

@keyframes grow-line{
  to{ width: 70px; }
}

.network-node{
  position: absolute;
  font-size: 24px;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.4s, transform 0.4s;
}

.network-node.show{
  opacity: 1;
  transform: scale(1);
}

.node-1{ right: 0%; top: -10%; }
.node-2{ right: 0%; bottom: 10%; }

.network-text{
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  color: #333;
  font-size: 5px;
  text-align: center;
  background: rgba(255,255,255,0.7);
  padding: 2px 6px;
  border-radius: 20px;
  backdrop-filter: blur(4px);
  font-weight: 600;
  white-space: nowrap;
}

/* Business Cards Stage */
.stage-businesses{
  flex-direction: column;
  gap: 8px;
  padding: 5px 0;
}

.biz-card{
  background: rgba(255,255,255,0.95);
  border-radius: 10px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 3px 12px rgba(0,0,0,0.1);
  width: 92%;
  max-width: 260px;
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.biz-card.show{
  opacity: 1;
  transform: translateX(0);
}

.biz-icon{ font-size: 24px; }

.biz-info{
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
}

.biz-name{
  font-weight: 600;
  font-size: 13px;
  color: #333;
}

.biz-distance{
  font-size: 11px;
  color: #888;
}

.biz-status{
  font-size: 10px;
  color: #10b981;
  background: rgba(16,185,129,0.1);
  padding: 3px 8px;
  border-radius: 10px;
}

/* Chat Stage */
.stage-chat{
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 8px;
}

.chat-header{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.9);
  border-radius: 8px 8px 0 0;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}

.chat-icon{ font-size: 20px; }

.chat-name{
  font-weight: 600;
  font-size: 13px;
  color: #333;
  flex: 1;
}

.chat-status{
  font-size: 10px;
  color: #10b981;
}

.chat-messages{
  flex: 1;
  background: rgba(255,255,255,0.8);
  padding: 8px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-radius: 0 0 8px 8px;
  min-height: 80px;
  max-height: 100px;
}

.chat-msg{
  padding: 6px 10px;
  border-radius: 12px;
  font-size: 12px;
  max-width: 85%;
  animation: msg-in 0.3s ease-out;
}

@keyframes msg-in{
  from{ opacity: 0; transform: translateY(10px); }
  to{ opacity: 1; transform: translateY(0); }
}

.msg-user{
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  color: #fff;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}

.msg-biz{
  background: #f0f0f0;
  color: #333;
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}

/* Confirmation Stage */
.stage-confirm{
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
}

.confirm-icon{
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, #10b981, #34d399);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  animation: pop-in 0.3s ease-out;
}

.confirm-text{
  margin-top: 8px;
  font-weight: 600;
  font-size: 14px;
  color: #10b981;
  text-align: center;
}

.confirm-title{
  margin-top: 6px;
  font-weight: 600;
  font-size: 7px;
  color: #333;
  background: rgba(255,255,255,0.7);
  padding: 3px 8px;
  border-radius: 20px;
  backdrop-filter: blur(4px);
}

.confirm-detail{
  font-size: 7px;
  color: #333;
  margin-top: 4px;
  background: rgba(255,255,255,0.7);
  padding: 3px 8px;
  border-radius: 20px;
  backdrop-filter: blur(4px);
  font-weight: 600;
}

.confirm-time{
  position: absolute;
  bottom: 8px;
  right: 20px;
  font-size: 7px;
  color: #10b981;
  background: rgba(255,255,255,0.7);
  padding: 3px 8px;
  border-radius: 20px;
  backdrop-filter: blur(4px);
  font-weight: 600;
}

/* Summary Stage */
.stage-summary{
  flex-direction: column;
  width: 100%;
  padding: 10px;
}

.summary-title{
  font-weight: 700;
  font-size: 14px;
  color: #333;
  text-align: center;
  margin-bottom: 10px;
}

.summary-items{
  background: rgba(255,255,255,0.9);
  border-radius: 10px;
  padding: 10px;
  width: 100%;
  max-width: 220px;
}

.summary-item{
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #666;
  padding: 5px 0;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}

.summary-total{
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 700;
  color: #333;
  padding-top: 8px;
  margin-top: 5px;
}

/* Pickup Stage */
.stage-pickup{
  flex-direction: column;
  text-align: center;
}

.pickup-icon{
  font-size: 40px;
  animation: bounce 1s ease-in-out infinite;
}

@keyframes bounce{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-10px); }
}

.pickup-text{
  font-size: 13px;
  color: #666;
  margin-top: 8px;
}

.pickup-stores{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  font-size: 24px;
}

.pickup-arrow{
  font-size: 16px;
  color: var(--accent-2);
  animation: arrow-move 1s ease-in-out infinite;
}

@keyframes arrow-move{
  0%, 100%{ transform: translateX(0); }
  50%{ transform: translateX(5px); }
}

/* Success Stage */
.success-heart{
  font-size: 50px;
  animation: heart-beat 1s ease-in-out infinite;
}

@keyframes heart-beat{
  0%, 100%{ transform: scale(1); }
  50%{ transform: scale(1.15); }
}

.success-title{
  margin-top: 10px;
  font-weight: 700;
  font-size: 16px;
  color: #333;
}

.success-subtitle{
  font-size: 12px;
  color: #888;
  margin-top: 4px;
}

.success-check{
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #10b981, #34d399);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  animation: pop-in 0.3s ease-out;
}

@keyframes pop-in{
  0%{ transform: scale(0); }
  70%{ transform: scale(1.1); }
  100%{ transform: scale(1); }
}

.success-text{
  margin-top: 10px;
  color: #10b981;
  font-weight: 600;
  font-size: 14px;
}

/* Widget bottom labels */
.widget-labels{
  display: flex;
  gap: 8px;
  width: 100%;
  padding: 0 16px 16px 16px;
}

.widget-label{
  flex: 1;
  background: linear-gradient(90deg,var(--accent-2),var(--accent-1));
  padding: 10px 14px;
  border-radius: 999px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  box-shadow: 0 8px 30px rgba(37,99,235,0.18);
}

/* ===== COMMISSION COMPARISON SECTION ===== */
.section-inner h2:has(.highlight-text){
  font-size: 40px;
  font-weight: 800;
  line-height: 1.02;
}

.highlight-text{
  background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.commission-stats{
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  margin: 24px 0 32px 0;
}

.stat-item{
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--glass);
  padding: 10px 16px;
  border-radius: var(--radius-sm);
}

.stat-item .stat-icon{
  font-size: 20px;
}

.stat-item .stat-text{
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
}

.comparison-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 32px;
  padding: 24px;
  background: rgba(255,255,255,0.7);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 32px rgba(15,23,42,0.08);
  backdrop-filter: blur(8px);
}

.comparison-item{
  text-align: center;
  background: rgba(255,255,255,0.9);
  padding: 24px 16px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(15,23,42,0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 12px rgba(15,23,42,0.06);
}

.comparison-item:hover{
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(15,23,42,0.12);
}

.comparison-item.highlight{
  background: linear-gradient(135deg, rgba(86,214,164,0.2), rgba(108,207,246,0.15));
  border: 2px solid var(--accent-2);
  box-shadow: 0 8px 24px rgba(86,214,164,0.2);
}

.comparison-item .platform-name{
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--text-dim);
}

.comparison-item.highlight .platform-name{
  color: var(--accent-3);
  font-size: 14px;
}

.commission-rate{
  font-size: 36px;
  font-weight: 800;
  margin-bottom: 8px;
  color: var(--text-main);
}

.commission-rate.best{
  color: var(--accent-3);
}

.commission-rate.bad{
  color: var(--text-dim);
}

.commission-label,
.comparison-label{
  font-size: 12px;
  color: var(--text-dim);
  font-weight: 500;
}

.comparison-item.highlight .commission-label{
  color: var(--text-main);
  font-weight: 600;
}

/* ===== STEP CARDS ===== */
.step-number{
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  color: #fff;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 800;
  margin-bottom: 16px;
}

.step-title{
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--text-main);
}

.step-description{
  font-size: 15px;
  color: var(--text-dim);
  line-height: 1.6;
}

/* Mobile responsiveness for comparison grid */
@media (max-width: 720px){
  .section-inner h2:has(.highlight-text){
    font-size: 28px;
  }
  .comparison-grid{
    grid-template-columns: repeat(2, 1fr);
    padding: 16px;
    gap: 14px;
  }
  .comparison-item{
    padding: 18px 12px;
  }
  .commission-rate{
    font-size: 28px;
  }
  .commission-stats{
    gap: 12px;
  }
  .stat-item{
    padding: 8px 12px;
  }
}

@media (max-width: 480px){
  .section-inner h2:has(.highlight-text){
    font-size: 24px;
  }
  .comparison-grid{
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 12px;
  }
  .comparison-item{
    padding: 14px 10px;
  }
  .commission-rate{
    font-size: 24px;
  }
  .commission-stats{
    gap: 8px;
  }
  .stat-item{
    padding: 6px 10px;
  }
  .stat-item .stat-icon{
    font-size: 16px;
  }
  .stat-item .stat-text{
    font-size: 12px;
  }
}

/* Mobile responsiveness for widget */
@media (max-width: 720px){
  .discovery-widget{ height: 220px; padding: 14px; margin: 14px; }
  .discovery-search{ padding: 10px 12px; }
  .search-text{ font-size: 12px; }
  .biz-card{ padding: 8px 10px; }
  .biz-icon{ font-size: 20px; }
  .biz-name{ font-size: 11px; }
  .biz-distance{ font-size: 9px; }
  .widget-labels{ padding: 0 14px 14px 14px; gap: 6px; }
  .widget-label{ font-size: 10px; padding: 8px 10px; }
  .chat-msg{ font-size: 10px; padding: 5px 8px; }
  .chat-messages{ min-height: 60px; max-height: 80px; }
  .confirm-icon{ width: 30px; height: 30px; font-size: 14px; }
}

@media (max-width: 480px){
  .discovery-widget{ height: 200px; padding: 12px; margin: 12px; }
  .ai-hub{ width: 40px; height: 40px; }
  .ai-core{ width: 32px; height: 32px; font-size: 10px; }
  .pulse-ring{ width: 40px; height: 40px; }
  .processing-text{ font-size: 8px; padding: 3px 8px; }
  .network-text{ font-size: 8px; padding: 3px 8px; }
  .confirm-title, .confirm-detail, .confirm-time{ font-size: 8px; padding: 3px 8px; }
  .widget-label{ font-size: 9px; padding: 6px 8px; }
  .biz-card{ padding: 6px 8px; max-width: 200px; }
  .biz-name{ font-size: 10px; }
  .biz-status{ font-size: 8px; padding: 2px 6px; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .cursor{ animation: none; opacity: 1; }
  .pulse-ring{ animation: none; opacity: 0.5; }
  .stage{ transition: none; }
  .biz-card{ transition: none; }
  .success-check{ animation: none; }
}

/* ===== AI SUGGESTION STAGE ===== */
.stage-suggestion{
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.suggestion-bubble{
  background: linear-gradient(135deg, rgba(86,214,164,0.15), rgba(108,207,246,0.15));
  border: 2px solid rgba(86,214,164,0.3);
  border-radius: 12px;
  padding: 12px 16px;
  max-width: 90%;
  animation: slideUp 0.4s ease-out;
}

.suggestion-header{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 11px;
  font-weight: 600;
  color: #333;
}

.ai-badge{
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  color: #fff;
  padding: 3px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
}

.suggestion-items{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.suggestion-item{
  background: rgba(255,255,255,0.8);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-main);
  animation: fadeIn 0.3s ease-out;
}

.suggestion-item:nth-child(2){
  animation-delay: 0.2s;
}

/* ===== USER CONFIRMATION STAGE ===== */
.stage-user-confirm{
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  padding-right: 10px;
}

.user-confirm-bubble{
  background: linear-gradient(135deg, var(--accent-2), var(--accent-1));
  color: #fff;
  padding: 10px 16px;
  border-radius: 12px;
  border-bottom-right-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  max-width: 80%;
  animation: slideUp 0.4s ease-out;
  box-shadow: 0 4px 12px rgba(86,214,164,0.3);
}

@keyframes slideUp{
  from{ transform: translateY(20px); opacity: 0; }
  to{ transform: translateY(0); opacity: 1; }
}

@keyframes fadeIn{
  from{ opacity: 0; }
  to{ opacity: 1; }
}

/* Mobile responsiveness for new stages */
@media (max-width: 720px){
  .suggestion-bubble{ padding: 10px 12px; }
  .suggestion-header{ font-size: 10px; }
  .suggestion-item{ font-size: 11px; padding: 6px 10px; }
  .user-confirm-bubble{ font-size: 11px; padding: 8px 12px; }
}

@media (max-width: 480px){
  .suggestion-bubble{ padding: 8px 10px; }
  .suggestion-header{ font-size: 9px; gap: 6px; }
  .ai-badge{ font-size: 9px; padding: 2px 6px; }
  .suggestion-item{ font-size: 10px; padding: 5px 8px; }
  .user-confirm-bubble{ font-size: 10px; padding: 6px 10px; }
}

/* ----- Commission Section Layout ----- */
.commission-layout {
  display: flex;
  align-items: center;
  gap: 3rem;
  max-width: 1200px;
  margin: 0 auto;
}

.commission-content {
  flex: 1;
}

.commission-image {
  flex: 0 0 350px;
}

/* ----- Flip Image Carousel ----- */
.commission-carousel {
  position: relative;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

.commission-carousel .commission-img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  display: none;
  backface-visibility: hidden;
}

.commission-carousel .commission-img.active {
  display: block;
  animation: flipIn 0.6s ease forwards;
}

.commission-carousel .commission-img.flip-out {
  display: block;
  animation: flipOut 0.6s ease forwards;
}

@keyframes flipIn {
  0% {
    opacity: 0;
    transform: rotateY(-90deg);
  }
  100% {
    opacity: 1;
    transform: rotateY(0deg);
  }
}

@keyframes flipOut {
  0% {
    opacity: 1;
    transform: rotateY(0deg);
  }
  100% {
    opacity: 0;
    transform: rotateY(90deg);
  }
}

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}

.carousel-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease;
}

.carousel-dot:hover {
  background: rgba(0, 0, 0, 0.4);
}

.carousel-dot.active {
  background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
  transform: scale(1.2);
}

.commission-img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

@media (max-width: 980px) {
  .commission-layout {
    flex-direction: column;
    gap: 2rem;
  }
  .commission-content {
    text-align: center;
  }
  .commission-image {
    flex: 0 0 auto;
    max-width: 400px;
    width: 100%;
  }
}

/* ----- Image Gallery Section ----- */
.image-gallery-section {
  padding: 1rem 0 2rem;
}

.image-gallery {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  flex-wrap: nowrap;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.gallery-image {
  max-width: 320px;
  width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery-image:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

@media (max-width: 1024px) {
  .image-gallery {
    gap: 1.5rem;
  }
  .gallery-image {
    max-width: 280px;
  }
}

@media (max-width: 768px) {
  .image-gallery {
    gap: 1rem;
    flex-wrap: wrap;
  }
  .gallery-image {
    max-width: 45%;
  }
}

@media (max-width: 480px) {
  .image-gallery {
    flex-direction: column;
    gap: 1rem;
  }
  .gallery-image {
    max-width: 90%;
  }
}