/* Drip Off AI - Motion Strategy Edition V8.0 (Luxury Motion) */
:root {
    --primary: #60a5fa;
    --primary-glow: rgba(96, 165, 250, 0.3);
    --bg: #020617;
    --card: rgba(15, 23, 42, 0.6);
    --border: rgba(255, 255, 255, 0.04);
    --text: #f8fafc;
    --text-dim: #94a3b8;
    --ease: cubic-bezier(0.2, 0, 0.2, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Outfit', sans-serif; }
body { background: var(--bg); color: var(--text); overflow-x: hidden; -webkit-font-smoothing: antialiased; }

/* Filmic Grain Overlay */
body::after {
    content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: url('https://grainy-gradients.vercel.app/noise.svg');
    opacity: 0.04; pointer-events: none; z-index: 9999;
}

.container { max-width: 1200px; margin: 0 auto; padding: 0 5%; }

/* Navigation */
nav {
    position: fixed; top: 0; width: 100%; padding: 1.5rem 5%;
    display: flex; justify-content: space-between; align-items: center;
    background: rgba(2, 6, 23, 0.8); backdrop-filter: blur(20px);
    z-index: 1000; border-bottom: 1px solid var(--border);
}

.logo { font-size: 1.1rem; font-weight: 700; letter-spacing: 1px; }
.logo span { opacity: 0.4; font-weight: 400; }

.btn-nav {
    background: var(--text); color: var(--bg); padding: 0.7rem 1.4rem; border-radius: 6px;
    font-size: 0.8rem; font-weight: 700; text-decoration: none; transition: 0.3s var(--ease);
}
.btn-nav:hover { transform: scale(1.05); }

/* Intelligent Waveform Animation (Hero) */
.waveform-container {
    height: 300px; display: flex; align-items: center; justify-content: center; position: relative; margin-top: 4rem;
}
.wave-bar {
    fill: var(--primary);
    transform-origin: center;
    transition: transform 0.1s ease;
    filter: drop-shadow(0 0 10px var(--primary-glow));
}

/* Meaningful Motion (Industries) */
.animation-box {
    width: 100%; height: 250px; background: rgba(255,255,255,0.02); border-radius: 20px;
    position: relative; overflow: hidden; border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
}

/* Real Estate Pipeline */
.real-estate-anim { padding: 0 40px; justify-content: space-between; }
.re-node {
    width: 60px; height: 60px; border-radius: 50%; background: var(--bg); border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center; flex-direction: column; position: relative;
    z-index: 2; box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.re-node svg { width: 24px; height: 24px; color: var(--text-dim); }
.anim-label { position: absolute; bottom: -30px; font-size: 0.75rem; color: var(--text-dim); font-weight: 600; white-space: nowrap; }
.re-path { flex-grow: 1; height: 2px; background: var(--border); position: relative; margin: 0 10px; }
.data-packet {
    position: absolute; width: 30px; height: 4px; background: var(--primary);
    box-shadow: 0 0 15px var(--primary); top: -1px; left: -30px; border-radius: 4px;
    animation: reFlow 3s infinite cubic-bezier(0.8, 0, 0.2, 1);
}
.data-packet.delay { animation-delay: 1.5s; background: #10b981; box-shadow: 0 0 15px #10b981; }

@keyframes reFlow {
    0% { left: 0%; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { left: 100%; opacity: 0; }
}

/* Logistics Supply Chain */
.logistics-anim { position: relative; }
.logistics-svg { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
.route-line { fill: none; stroke: var(--border); stroke-width: 2; stroke-dasharray: 5, 5; }
.route-dot { fill: var(--primary); filter: drop-shadow(0 0 8px var(--primary)); opacity: 0; }
.server-node {
    position: absolute; right: 40px; top: 50%; transform: translateY(-50%);
    width: 80px; height: 80px; background: rgba(16, 185, 129, 0.1); border: 1px solid #10b981;
    border-radius: 16px; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 40px rgba(16, 185, 129, 0.2);
}

.route-dot.dot-1 { animation: routeMove 4s infinite linear 0s; }
.route-dot.dot-2 { animation: routeMove 4s infinite linear 1.33s; }
.route-dot.dot-3 { animation: routeMove 4s infinite linear 2.66s; }

@keyframes routeMove {
    0% { opacity: 0; offset-distance: 0%; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { opacity: 0; offset-distance: 100%; }
}

.route-dot { offset-path: path('M 50 180 C 150 180, 200 50, 350 50'); }

/* Layout Elements */
.hero { padding: 12rem 0 6rem; text-align: center; }
.hero h1 { font-size: clamp(3rem, 8vw, 6rem); font-weight: 800; letter-spacing: -3px; line-height: 1; margin-bottom: 2rem; }
.hero h1 span { color: var(--primary); }

.section-wrap { padding: 6rem 0; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; align-items: center; }

/* V10 Strategic Encyclopedia Animations */

/* Sentiment Pulse */
.sentiment-node { position: relative; display: flex; align-items: center; justify-content: center; }
.brain-pulse {
    position: absolute; width: 100px; height: 100px; background: radial-gradient(circle, rgba(96, 165, 250, 0.4) 0%, rgba(96, 165, 250, 0) 70%);
    border-radius: 50%; animation: brainGlow 3s infinite alternate cubic-bezier(0.4, 0, 0.2, 1);
}
.brain-pulse::after {
    content: ''; position: absolute; top: -10px; left: -10px; right: -10px; bottom: -10px;
    border: 1px solid rgba(16, 185, 129, 0.3); border-radius: 50%;
    animation: brainRing 3s infinite alternate-reverse ease-in-out;
}
@keyframes brainGlow {
    0% { transform: scale(0.8); filter: hue-rotate(0deg); opacity: 0.5; }
    100% { transform: scale(1.4); filter: hue-rotate(90deg); opacity: 1; }
}
@keyframes brainRing {
    0% { transform: scale(1.2); opacity: 0; }
    100% { transform: scale(0.8); opacity: 1; }
}

/* Healthcare Pulse */
.health-pulse, .health-pulse::before, .health-pulse::after {
    position: absolute; width: 80px; height: 80px; border: 2px solid #f43f5e;
    border-radius: 50%; animation: healthExpand 3s infinite cubic-bezier(0.0, 0.0, 0.2, 1); opacity: 0;
}
.health-pulse::before { content: ''; animation-delay: 1s; }
.health-pulse::after { content: ''; animation-delay: 2s; }

@keyframes healthExpand {
    0% { transform: scale(0.5); opacity: 1; border-color: #f43f5e; }
    100% { transform: scale(2.5); opacity: 0; border-color: transparent; }
}

/* Workflow Web */
.workflow-anim { position: relative; }
.workflow-center {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 80px; height: 80px; background: var(--primary); border-radius: 20px;
    display: flex; align-items: center; justify-content: center; z-index: 5;
    box-shadow: 0 0 40px var(--primary-glow);
    animation: workflowCenterPulse 2s infinite alternate;
}
.workflow-center svg { width: 40px; height: 40px; color: #fff; }
@keyframes workflowCenterPulse {
    from { box-shadow: 0 0 20px var(--primary-glow); transform: translate(-50%, -50%) scale(0.95); }
    to { box-shadow: 0 0 60px var(--primary-glow); transform: translate(-50%, -50%) scale(1.05); }
}

.workflow-node {
    position: absolute; width: 120px; text-align: center; z-index: 5;
    background: var(--bg); border: 1px solid var(--border); padding: 1rem; border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5); transition: 0.3s ease;
}
.workflow-node:hover { transform: translateY(-5px); border-color: var(--primary); }
.workflow-node i { color: var(--primary); margin-bottom: 0.5rem; }
.workflow-node span { display: block; font-size: 0.7rem; font-weight: 700; color: #94a3b8; }

.n1 { left: 15%; top: 20%; }
.n2 { right: 15%; top: 20%; }
.n3 { left: 15%; bottom: 20%; }
.n4 { right: 15%; bottom: 20%; }

.workflow-svg { position: absolute; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; filter: drop-shadow(0 0 5px var(--primary)); }
.flow-line { stroke: var(--primary); stroke-width: 2; stroke-dasharray: 8, 8; animation: flowDash 3s infinite linear; opacity: 0.5; }

@keyframes flowDash {
    to { stroke-dashoffset: -100; }
}

/* Secure Perimeter */
.secure-shield { position: relative; display: flex; align-items: center; justify-content: center; }
.shield-ring {
    position: absolute; width: 120px; height: 120px; border: 1px solid #10b981;
    border-radius: 40%; animation: shieldRotate 15s infinite linear;
    box-shadow: inset 0 0 20px rgba(16, 185, 129, 0.2);
}
.shield-ring::before {
    content: ''; position: absolute; top: -15px; left: -15px; right: -15px; bottom: -15px;
    border: 1px dashed rgba(16, 185, 129, 0.5); border-radius: 35%;
    animation: shieldRotate 20s infinite linear reverse;
}
.shield-ring::after {
    content: ''; position: absolute; top: 15px; left: 15px; right: 15px; bottom: 15px;
    border: 2px solid rgba(16, 185, 129, 0.1); border-radius: 45%;
    animation: shieldRotate 10s infinite linear;
}

@keyframes shieldRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Layout Fixes */
span { color: var(--primary); font-weight: 600; }
.bento-card {
    background: var(--card); border: 1px solid var(--border); border-radius: 24px;
    padding: 3rem; transition: 0.5s var(--ease); overflow: hidden; position: relative;
}
.bento-card:hover { border-color: var(--primary); transform: translateY(-5px); }

/* ROI Card V8 */
.roi-card {
    background: var(--card); border: 1px solid var(--border); border-radius: 40px;
    padding: 5rem; display: grid; grid-template-columns: 1fr 1fr; gap: 5rem;
    box-shadow: 0 40px 100px rgba(0,0,0,0.4);
}
.metric-row {
    padding: 1.5rem; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center;
}
.metric-value { font-size: 1.5rem; font-weight: 700; }
.metric-value.savings { font-size: 3rem; color: #10b981; }

/* Reveal System */
.reveal { opacity: 0; filter: blur(10px); transform: translateY(30px); transition: 1.2s var(--ease); }
.reveal.active { opacity: 1; filter: blur(0); transform: translateY(0); }

@media (max-width: 1024px) {
    .roi-card { grid-template-columns: 1fr; padding: 3rem; }
    .bento-grid { grid-template-columns: 1fr; }
    .grid-2 { grid-template-columns: 1fr; gap: 4rem; text-align: center; }
}

@media (max-width: 768px) {
    .container { width: 92%; }
    nav { padding: 1.5rem 0; }
    .logo { font-size: 0.9rem; }
    .btn-nav { padding: 0.8rem 1.5rem; font-size: 0.8rem; }
    
    .hero { padding: 8rem 0 4rem; }
    .hero h1 { font-size: 3rem; letter-spacing: -1px; }
    .hero p { font-size: 1rem; }
    
    .section-wrap { padding: 4rem 0; }
    h2 { font-size: 2.2rem !important; }
    h3 { font-size: 1.8rem !important; }
    
    .bento-card { padding: 2rem; }
    .roi-card { border-radius: 24px; padding: 2rem; }
    .metric-value.savings { font-size: 2rem; }
    
    /* Animation scale adjustments */
    .workflow-center { width: 60px; height: 60px; }
    .workflow-node { width: 100px; padding: 0.5rem; }
    .n1 { left: 5%; top: 15%; }
    .n2 { right: 5%; top: 15%; }
    .n3 { left: 5%; bottom: 15%; }
    .n4 { right: 5%; bottom: 15%; }
}