/* ==========================================
   Hero Components
========================================== */

/* ---------- Badge ---------- */

.ai-hero-badge{

    display:inline-flex;
    align-items:center;

    padding:10px 22px;

    border-radius:999px;

    background:rgba(45,127,249,.10);

    color:#1565d8;

    font-size:15px;

    font-weight:800;

    margin-bottom:28px;
}

/* ---------- Title ---------- */

.ai-hero h1{

    margin:0 0 28px;

    font-size:clamp(46px,5vw,74px);

    line-height:1.15;

    color:#0a2a66;

    font-weight:900;
}

.ai-hero p{

    margin:0 0 36px;

    color:#475569;

    font-size:18px;

    line-height:1.9;
}

/* ---------- Buttons ---------- */

.ai-hero-buttons{

    display:flex;

    gap:18px;

    flex-wrap:wrap;
}

.ai-hero-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:16px 34px;

    border-radius:999px;

    text-decoration:none;

    font-weight:800;

    transition:.3s;
}

.ai-hero-btn-primary{

    background:#0a2a66;

    color:#fff;

    box-shadow:0 18px 36px rgba(10,42,102,.18);
}

.ai-hero-btn-primary:hover{

    transform:translateY(-3px);

    background:#2d7ff9;
}

.ai-hero-btn-secondary{

    border:2px solid #0a2a66;

    color:#0a2a66;

    background:#fff;
}

.ai-hero-btn-secondary:hover{

    background:#0a2a66;

    color:#fff;
}

/* ---------- AI Core ---------- */

.ai-core{

    position:absolute;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    width:190px;

    height:190px;

    border-radius:50%;

    background:
        radial-gradient(circle at 35% 30%,
        #49a6ff,
        #0a2a66 70%);

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    color:#fff;

    box-shadow:

        0 0 0 18px rgba(45,127,249,.10),

        0 0 60px rgba(45,127,249,.45);

    z-index:20;
}

.ai-core span{

    font-size:56px;

    font-weight:900;
}

.ai-core small{

    font-size:18px;

    font-weight:700;
}

/* ---------- Service Cards ---------- */

.ai-node{

    position:absolute;

    width:170px;

    min-height:86px;

    padding:16px;

    border-radius:20px;

    background:rgba(255,255,255,.95);

    backdrop-filter:blur(12px);

    border:1px solid rgba(45,127,249,.18);

    box-shadow:

        0 16px 36px rgba(10,42,102,.12);

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    z-index:10;
}

.ai-node-icon{

    font-size:24px;

    margin-bottom:6px;
}

.ai-node strong{

    font-size:14px;

    color:#0a2a66;
}

.ai-node small{

    font-size:11px;

    color:#64748b;
}

/* ---------- Position ---------- */

.node-chat{

    top:7%;

    left:50%;

    transform:translateX(-50%);
}

.node-filemaker{

    top:33%;

    left:4%;
}

.node-dashboard{

    bottom:23%;

    left:4%;
}

.node-dify{

    top:33%;

    right:4%;
}

.node-web{

    bottom:23%;

    right:4%;
}

.node-auto{

    bottom:7%;

    left:50%;

    transform:translateX(-50%);
}

.ai-core em {
  display: block;
  margin-top: 8px;
  font-style: normal;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  color: rgba(255,255,255,.86);
}

.node-status {
  display: inline-flex;
  margin-top: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(45,127,249,.10);
  color: #2d7ff9;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
}