/* Shared styles for every page (loaded after Tailwind). Page-specific styles stay inline. */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    display: inline-block;
    vertical-align: middle;
}
.icon-fill { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
.hero-mesh {
    background-color: #f7f9fb;
    background-image: url('hero-mesh.png');
    background-size: cover;
    background-position: center;
}
.bento-card-hover { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.bento-card-hover:hover {
    transform: translateY(-4px);
    border-color: #84e1bc;
    box-shadow: 0 10px 30px -10px rgba(132, 225, 188, 0.2);
}
.pb-safe { padding-bottom: env(safe-area-inset-bottom); }
.shine-mint { box-shadow: 0 0 32px rgba(132,225,188,0.9), 0 0 10px rgba(132,225,188,1); }
.shine-soft { box-shadow: 0 0 24px rgba(132,225,188,0.75); }

:focus-visible { outline: 2px solid #006c50; outline-offset: 3px; border-radius: 6px; }

/* ---- Original pipeline look: hi-tech pastel field + connected agents (was inline on the home page) ---- */
.agent-field {
    background-color: #eef1f3;
    background-image:
        radial-gradient(at 15% 20%, rgba(132,225,188,0.18) 0px, transparent 45%),
        radial-gradient(at 85% 85%, rgba(0,77,64,0.08) 0px, transparent 50%),
        linear-gradient(180deg, #f1f4f5 0%, #e7ecee 100%);
}
.agent-grid {
    background-image:
        linear-gradient(rgba(120,140,135,0.10) 1px, transparent 1px),
        linear-gradient(90deg, rgba(120,140,135,0.10) 1px, transparent 1px);
    background-size: 26px 26px;
    mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 55%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 55%, transparent 100%);
}
.agent-node-icon {
    background: linear-gradient(135deg, #ffffff 0%, #e9eef0 100%);
    border: 1px solid rgba(120,140,135,0.35);
    box-shadow: 0 6px 18px -8px rgba(0,77,64,0.35), inset 0 1px 0 #fff;
}
.agent-status { box-shadow: 0 0 0 3px #fff, 0 0 10px 1px rgba(80,200,120,0.9); animation: agentPulse 2.2s ease-in-out infinite; }
@keyframes agentPulse {
    0%,100% { box-shadow: 0 0 0 3px #fff, 0 0 6px 0 rgba(80,200,120,0.7); }
    50%     { box-shadow: 0 0 0 3px #fff, 0 0 14px 3px rgba(80,200,120,1); }
}
.agent-link { stroke: rgba(80,200,120,0.65); stroke-width: 2; stroke-dasharray: 6 8; animation: agentFlow 1.4s linear infinite; }
@keyframes agentFlow { to { stroke-dashoffset: -28; } }
.agent-link-base { stroke: rgba(120,140,135,0.40); stroke-width: 2; }
.agent-chev { color: #2faa6a; animation: chevPulse 1.8s ease-in-out infinite; }
@keyframes chevPulse { 0%,100% { opacity:.4 } 50% { opacity:1 } }
/* the same dashed, flowing connector as a rail behind a row of stage cards */
.flow-rail { height: 2px; background: repeating-linear-gradient(90deg, rgba(80,200,120,.65) 0 6px, transparent 6px 14px); background-size: 28px 2px; animation: railFlow 1.4s linear infinite; }
@keyframes railFlow { to { background-position: 28px 0; } }
/* stage cards on the agent field: the pipeline's white glass cards */
.gate-card { background: rgba(255,255,255,0.6); border: 1px solid rgba(189,201,194,0.4); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: all .3s cubic-bezier(0.4, 0, 0.2, 1); }
.gate-card:hover { border-color: #84e1bc; box-shadow: 0 10px 30px -10px rgba(132, 225, 188, 0.35); }
.live-dot { position: relative; }

/* Small icon tiles: the coloured gradient style the use-case pages already use (sky, cyan, teal, emerald...) */
.bg-grad-data { background-image: linear-gradient(to bottom right, #38bdf8, #0284c7); }
.bg-grad-agentic { background-image: linear-gradient(to bottom right, #34d399, #059669); }
.bg-grad-cyber { background-image: linear-gradient(to bottom right, #fb7185, #e11d48); }
.bg-grad-vision { background-image: linear-gradient(to bottom right, #e879f9, #c026d3); }
.bg-grad-field { background-image: linear-gradient(to bottom right, #fbbf24, #d97706); }
.bg-grad-brand { background-image: linear-gradient(to bottom right, #2dd4bf, #0d9488); }

/* ---- Solutions tabs: white pill with the brand's mint glow when selected ---- */
.tab-btn { transition: color .2s, background .2s, box-shadow .2s; color: #3e4944; }
.tab-btn[aria-selected="true"] { background: #fff; color: #004d40; box-shadow: 0 0 0 1px #84e1bc, 0 0 24px rgba(132,225,188,0.6); }
.tab-btn[aria-selected="false"]:hover { background: rgba(255,255,255,.7); color: #004d40; }
.tab-panel[hidden] { display: none; }
.tab-panel { animation: panelIn .35s ease-out; }
@keyframes panelIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---- Header mega menu: hover opens it on a mouse; the button opens it for touch and keyboard ---- */
.menu-panel { display: none; }
.menu.open .menu-panel { display: block; }
@media (hover: hover) and (pointer: fine) {
    .menu:not(.closed):hover .menu-panel { display: block; }
    .menu:not(.closed):hover > button { color: #004d40; box-shadow: inset 0 -2px #84e1bc; }
}
.menu.open > button { color: #004d40; box-shadow: inset 0 -2px #84e1bc; }

/* Stack diagram layers */
.layer { border: 1px solid rgba(189,201,194,.3); }

html { scroll-padding-top: 80px; }

@media (prefers-reduced-motion: reduce) {
    .flow-rail, .agent-link, .agent-status, .agent-chev, .tab-panel { animation: none !important; }
    .bento-card-hover, .gate-card { transition: none !important; }
}