*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:linear-gradient(135deg,#0f0c29,#302b63,#24243e);color:#e0e0e0;min-height:100vh;padding:2rem}
.container{max-width:800px;margin:0 auto}
h1{text-align:center;font-size:1.8rem;margin-bottom:0.5rem;background:linear-gradient(90deg,#667eea,#764ba2,#f093fb);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.subtitle{text-align:center;color:#999;margin-bottom:2rem;font-size:0.95rem}
.card{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);border-radius:16px;padding:1.5rem;margin-bottom:1.2rem;backdrop-filter:blur(10px)}
.card h2{font-size:1.1rem;margin-bottom:0.8rem;color:#c9d6ff}
label{display:block;font-size:0.85rem;color:#aab;margin-bottom:0.4rem;font-weight:600}
select{width:100%;padding:0.7rem;border-radius:8px;border:1px solid rgba(255,255,255,0.15);background:rgba(255,255,255,0.08);color:#e0e0e0;font-size:0.95rem;cursor:pointer}
select:focus{outline:none;border-color:#667eea}
.btn{display:block;width:100%;padding:1rem;border:none;border-radius:12px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;font-size:1.1rem;font-weight:700;cursor:pointer;margin-top:1.5rem;transition:transform 0.2s,box-shadow 0.2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(102,126,234,0.4)}
.result{display:none;margin-top:1.5rem}
.result-box{background:rgba(102,126,234,0.12);border:1px solid rgba(102,126,234,0.3);border-radius:12px;padding:1.5rem}
.result-box h3{color:#667eea;margin-bottom:0.8rem;font-size:1.2rem}
.result-box ul{padding-left:1.2rem}
.result-box li{margin-bottom:0.5rem;line-height:1.5}
.result-box .score{display:flex;align-items:center;gap:0.5rem;margin-bottom:0.8rem}
.result-box .score-bar{flex:1;height:8px;background:rgba(255,255,255,0.1);border-radius:4px;overflow:hidden}
.result-box .score-fill{height:100%;border-radius:4px;transition:width 0.5s}
.score-label{font-size:0.8rem;width:110px;text-align:right}
.rec{font-size:0.95rem;padding:0.8rem;background:rgba(255,255,255,0.06);border-radius:8px;margin-top:0.8rem;border-left:3px solid #667eea}

topRecs.forEach(function(r){html+=''+r+'';});

document.getElementById('result').scrollIntoView({behavior:'smooth'});

function calculate(){
var q1=document.getElementById('q1').value;
var q2=document.getElementById('q2').value;
var q3=document.getElementById('q3').value;
var q4=document.getElementById('q4').value;
var q5=document.getElementById('q5').value;
var q6=document.getElementById('q6').value;
if(!q1||!q2||!q3||!q4||!q5||!q6){alert('Please answer all 6 questions');return;}
var scores={cloud:0,hybrid:0,edge:0};
var modelSize='';
var framework='';
var topRecs=[];
if(q6==='edge'){scores.edge+=3;}else if(q6==='hybrid'){scores.hybrid+=3;}else{scores.cloud+=3;}
if(q2==='regulated'){scores.edge+=2;scores.hybrid+=1;}
if(q2==='internal'){scores.hybrid+=1;}
if(q3==='realtime'){scores.edge+=2;scores.hybrid+=1;}
if(q3==='fast'){scores.hybrid+=1;}
if(q4==='startup'){scores.cloud+=2;}
if(q4==='enterprise'){scores.hybrid+=1;scores.edge+=1;}
if(q5==='beginner'){scores.cloud+=2;}
if(q5==='advanced'){scores.edge+=1;scores.hybrid+=1;}
var maxDeploy=Object.keys(scores).reduce(function(a,b){return scores[a]>scores[b]?a:b;});
if(q1==='automation'||q1==='customer'){modelSize=q4==='startup'?'7B-13B':'14B-70B';}else if(q1==='developer'){modelSize='7B-14B for code, 70B for architecture';}else{modelSize='14B-70B for analytics';}
if(maxDeploy==='cloud'){framework='AWS Bedrock, Google Vertex AI, or Azure OpenAI + LangChain/CrewAI for agents';}
else if(maxDeploy==='edge'){framework='Ollama + llama.cpp on edge hardware. Jetson Orin for production, RTX 4090 for dev.';}
else{framework='Hybrid: Ollama/Qwen3 on edge for sensitive data + cloud API for complex reasoning. Use MCP for tool integration.';}
if(q1==='automation'){topRecs.push('Start with a Supervisor agent pattern using CrewAI or LangGraph');topRecs.push('Connect business tools via MCP (Salesforce, HubSpot, internal APIs)');topRecs.push('Deploy human-in-the-loop approval for actions affecting customers');}
if(q1==='developer'){topRecs.push('Adopt Cursor or Copilot for 3-4x developer productivity gains');topRecs.push('Add AI code review layer before human review');topRecs.push('Standardize on Model Context Protocol for internal tool integration');}
if(q1==='customer'){topRecs.push('Implement cascade: local small model to medium model to cloud fallback');topRecs.push('Add guardrails layer for brand safety and accuracy');topRecs.push('Monitor latency p95; edge models should handle 80%+ of requests');}
if(q1==='analytics'){topRecs.push('Use RAG over internal data with a 14B+ model for reasoning');topRecs.push('Implement structured output (JSON mode) for data extraction');topRecs.push('Cache frequent queries to reduce costs 40-60%');}
if(q2==='regulated'){topRecs.push('Maintain full data residency on compliant infrastructure');topRecs.push('Implement comprehensive audit logging for all AI decisions');topRecs.push('Document model cards for every deployed model (required by EU AI Act)');}
if(q5==='beginner'){topRecs.push('Start with managed services (Bedrock, Vertex AI) before self-hosting');topRecs.push('Use pre-built agent frameworks rather than building from scratch');topRecs.push('Invest in AI literacy training for the team before scaling deployment');}
var deployNames={cloud:'Cloud-First Deployment',hybrid:'Hybrid Cloud-Edge',edge:'Edge-First Deployment'};
var deployDescs={cloud:'Managed cloud services with auto-scaling, minimal ops overhead. Best for teams prioritizing speed to market.',hybrid:'Sensitive data stays on-premise while complex reasoning uses cloud APIs. Best balance of control and capability.',edge:'Maximum data sovereignty and lowest latency. Best for regulated industries and real-time applications.'};
var html='
';

html+=‘

Your Strategy: ‚+deployNames[maxDeploy]+‘

‚;
html+=‘

‚+deployDescs[maxDeploy]+‘

‚;
html+=‘

‚;
html+=‘

‚;
html+=‘

‚;
html+=‘

Top Recommendations

‚;

html+=‘