/* home.css — AlphaStep Home v2.0 (dynamic AI-native polish) */

:root{
  --brand: var(--blue, #0ea5e9);
  --ink:#0f172a; --muted:#475569; --line:#e2e8f0; --bg:#fff;

  --card-bg: color-mix(in srgb, #fff 92%, #eef5ff 8%);
  --glass: rgba(255,255,255,.65);
  --shadow-sm: 0 2px 10px rgba(15,23,42,.06);
  --shadow-md: 0 10px 30px rgba(2,12,27,.10);
  --shadow-lg: 0 18px 50px rgba(2,12,27,.18);
  --radius: 14px;

  --grad: conic-gradient(from 180deg at 50% 50%, #7c3aed 0deg, #06b6d4 120deg, #0ea5e9 240deg, #7c3aed 360deg);
  --brand-grad: linear-gradient(135deg, #0ea5e9, #06b6d4 40%, #7c3aed 100%);
}

#home{
  padding:0 2.5rem 3rem; max-width:1400px; margin:0 auto; color:var(--ink);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  contain:layout style paint;
}

/* ===== Hero wrapper with neural grid + spotlight ===== */
.home-hero{
  position:relative; display:grid; grid-template-columns: 1.6fr 1fr; gap:16px; margin:18px 0 6px;
  isolation:isolate;
}
.home-hero::before{
  /* animated grid */
  content:""; position:absolute; inset:-16px; z-index:-2; pointer-events:none;
  background:
    radial-gradient(1200px 600px at var(--mx,60%) -10%, rgba(14,165,233,.15), transparent 60%),
    radial-gradient(1200px 600px at 120% 20%, rgba(124,58,237,.10), transparent 60%),
    repeating-linear-gradient(90deg, rgba(2,8,23,.04) 0 1px, transparent 1px 120px),
    repeating-linear-gradient(0deg, rgba(2,8,23,.04) 0 1px, transparent 1px 120px);
  mask: linear-gradient(to bottom, rgba(0,0,0,.9), rgba(0,0,0,.2));
}
.home-hero::after{
  /* subtle rotating aura */
  content:""; position:absolute; inset:-24px; z-index:-3; pointer-events:none;
  background: var(--grad); opacity:.08; filter: blur(40px);
  animation: spin 30s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ===== Brand card (glass + gradient ring on hover) ===== */
.home-hero .brand{
  position:relative; background:var(--glass); border:1px solid var(--line);
  border-radius:var(--radius); padding:22px; backdrop-filter:saturate(160%) blur(6px);
  box-shadow: var(--shadow-md);
  overflow:clip;
}
.home-hero .brand::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px;
  background: linear-gradient(180deg, rgba(14,165,233,.35), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  transition: opacity .35s ease;
}
.home-hero .brand::after{
  content:""; position:absolute; inset:-120%; background:var(--brand-grad); opacity:0; filter: blur(50px);
  transition: opacity .35s ease;
}
.home-hero .brand:hover::after{ opacity:.12; }

.home-hero h1{ margin:0 0 6px; font-size:28px; font-weight:800; letter-spacing:.2px; }
.home-hero p{ margin:0; color:var(--muted); }

/* ===== KPIs with 3D tilt + pulse ===== */
.hero-kpis{
  display:grid; grid-template-columns: repeat(3,1fr); gap:10px; perspective:900px;
}
.kpi{
  position:relative; border:1px solid var(--line); border-radius:var(--radius);
  padding:14px; background:var(--card-bg); box-shadow: var(--shadow-sm);
  transform-style: preserve-3d; will-change: transform, box-shadow;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.kpi:hover{
  transform: translateY(-2px) rotateX(2deg) rotateY(-2deg);
  box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--brand), #ffffff 60%);
}
.kpi .label{ font-size:12px; color:var(--muted); }
.kpi .value{ font-size:26px; font-weight:900; margin-top:6px; letter-spacing:.2px; position:relative; }
.kpi .value::after{
  content:""; position:absolute; inset:auto auto -6px 0; height:3px; width:42%;
  background: var(--brand-grad); border-radius:999px; opacity:.18;
}

/* ===== Tiles (gradient border + 3D tilt + shine) ===== */
.tiles{
  display:grid; grid-template-columns: repeat(3,1fr); gap:12px; margin-top:12px;
}
.tile{
  position:relative; background:var(--glass); border:1px solid var(--line);
  border-radius:var(--radius); padding:16px; display:flex; flex-direction:column; gap:10px;
  backdrop-filter:saturate(140%) blur(6px); box-shadow: var(--shadow-sm);
  overflow:hidden; transform-style:preserve-3d; will-change: transform, box-shadow;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.tile::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px;
  background: linear-gradient(135deg, rgba(14,165,233,.4), transparent 55%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none;
}
.tile::after{
  /* sheen sweep */
  content:""; position:absolute; inset:0; background:linear-gradient(110deg, transparent 40%, rgba(255,255,255,.22) 50%, transparent 60%);
  transform: translateX(-120%); opacity:0; pointer-events:none;
}
.tile:hover{
  transform: translateY(-3px) rotateX(2deg) rotateY(2deg);
  box-shadow: var(--shadow-lg);
  border-color: color-mix(in srgb, var(--brand), #ffffff 50%);
}
.tile:hover::after{
  animation: sheen 950ms ease forwards;
}
@keyframes sheen { to { transform: translateX(120%); opacity:1; } }

.tile h3{ margin:0; font-size:16px; font-weight:800; letter-spacing:.2px; }
.tile p{ margin:0; color:var(--muted); line-height:1.45; }
.tile .actions{ margin-top:auto; display:flex; gap:8px; flex-wrap:wrap; }

/* ===== Buttons (ripple + sheen) ===== */
.btn{
  position:relative; border:1px solid var(--line); background:#fff; border-radius:10px; padding:9px 13px;
  cursor:pointer; font-weight:600; transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease;
}
.btn:hover{ transform: translateY(-1px); box-shadow: 0 6px 16px rgba(2,8,23,.10); }
.btn:active{ transform: translateY(0); }
.btn.brand{ background:var(--brand); color:#fff; border-color:var(--brand); }
.btn.brand::after{
  /* sheen */
  content:""; position:absolute; inset:0; background:linear-gradient(90deg, transparent 0 35%, rgba(255,255,255,.35) 50%, transparent 65%); opacity:0;
  transition: opacity .25s ease;
}
.btn.brand:hover::after{ opacity:1; }
.btn.ghost{ background:#fff; }

/* Ripple element (injected) */
.btn .ripple{
  position:absolute; border-radius:50%; transform:scale(0); animation:ripple 600ms ease-out forwards; pointer-events:none;
  background: currentColor; opacity:.18; mix-blend-mode:multiply;
}
@keyframes ripple { to { transform:scale(8); opacity:0; } }

/* ===== Panels / Lists ===== */
.home-panels{ display:grid; grid-template-columns: 1.2fr 1fr; gap:12px; margin-top:12px; }
.card{
  position:relative; background:var(--glass); border:1px solid var(--line); border-radius:var(--radius); padding:14px;
  backdrop-filter:saturate(150%) blur(6px); box-shadow: var(--shadow-sm);
}
.card h4{ margin:0 0 8px; font-size:14px; font-weight:900; letter-spacing:.2px; }
.list{ display:flex; flex-direction:column; gap:8px; }
.list-item{ display:flex; justify-content:space-between; gap:10px; border-bottom:1px dashed #eef2f7; padding:6px 0; }
.list-item:last-child{ border-bottom:none; }
.badge{ background:#eef2ff; color:#3730a3; border:1px solid #e5e7eb; padding:2px 8px; border-radius:999px; font-size:12px; }

/* ===== Ask AI inline ===== */
.ai-inline{ display:flex; gap:8px; margin-top:8px; }
.ai-inline input{
  flex:1; border:1px solid var(--line); border-radius:10px; padding:10px 12px;
  background:#fff; transition: box-shadow .2s ease, border-color .2s ease;
}
.ai-inline input:focus{
  outline:none; border-color: color-mix(in srgb, var(--brand), #ffffff 30%);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 30%, transparent);
}

/* ===== Reveal on scroll ===== */
.reveal{ opacity:0; transform: translateY(12px) scale(.98); transition: opacity .5s ease, transform .6s cubic-bezier(.2,.8,.2,1); }
.reveal.in{ opacity:1; transform: none; }

/* ===== Home AI modal polish (minimal) ===== */
#home-ai-panel{ border-radius:16px !important; box-shadow: 0 24px 80px rgba(0,0,0,.22) !important; }
.home-chat{ border-radius:14px !important; }
.home-chat.bot{ background: #eef6ff !important; }
.home-chat.me{ background: #eef7ea !important; }

/* ===== Responsive ===== */
@media (max-width:1100px){
  .home-hero{ grid-template-columns:1fr; }
  .hero-kpis{ grid-template-columns: repeat(3,minmax(0,1fr)); }
  .home-panels{ grid-template-columns:1fr; }
}
@media (max-width:820px){ .tiles{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){
  .tiles{ grid-template-columns:1fr; }
  .hero-kpis{ grid-template-columns:1fr 1fr 1fr; }
}

/* ===== Motion safety ===== */
@media (prefers-reduced-motion: reduce){
  * { animation: none !important; transition: none !important; }
}