/* ===== Smile OS — design tokens ===== */
:root{
  --background:hsl(240 20% 99%);
  --foreground:hsl(240 10% 4%);
  --card:hsl(0 0% 100%);
  --primary:hsl(217 100% 50%);
  --primary-foreground:hsl(0 0% 100%);
  --secondary:hsl(60 9% 98%);
  --muted:hsl(215 16% 47%);
  --border:hsl(215 25% 91%);
  --radius:.75rem;
  --ease-out-expo:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;border-color:var(--border)}
html,body{margin:0;padding:0}
body{
  background:var(--background);color:var(--foreground);
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;line-height:1.5;
  font-feature-settings:'cv02','cv03','cv11';
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.font-mono{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace}
::selection{background:hsl(217 100% 50% / .1);color:var(--primary)}

.container{max-width:80rem;margin:0 auto;padding:0 1.5rem}
.text-primary{color:var(--primary)}
.text-muted{color:var(--muted)}

/* Nav */
.nav{position:sticky;top:0;z-index:50;border-bottom:1px solid hsl(215 25% 91% / .5);background:hsl(240 20% 99% / .8);backdrop-filter:blur(10px)}
.nav-inner{display:flex;height:64px;max-width:80rem;margin:0 auto;padding:0 1.5rem;align-items:center;justify-content:space-between}
.nav-left{display:flex;align-items:center;gap:2rem}
.nav-brand{font-family:'JetBrains Mono',monospace;font-size:.875rem;font-weight:700;text-transform:uppercase;letter-spacing:-.05em}
.nav-links{display:none;gap:1.5rem}
@media(min-width:768px){.nav-links{display:flex}}
.nav-links a{font-size:.875rem;color:var(--muted);transition:color .2s}
.nav-links a:hover{color:var(--foreground)}
.nav-cta{border-radius:9999px;background:var(--foreground);color:var(--background);padding:.5rem 1.25rem;font-size:.75rem;font-weight:600;transition:opacity .2s}
.nav-cta:hover{opacity:.9}

/* Hero */
.hero{position:relative;overflow:hidden;padding:6rem 0 8rem}
@media(min-width:768px){.hero{padding:8rem 0 10rem}}
.hero-center{text-align:center;animation:fadeIn 1s var(--ease-out-expo) both}
.pill{display:inline-flex;align-items:center;gap:.5rem;border-radius:9999px;border:1px solid var(--border);background:var(--card);padding:.25rem .75rem;margin-bottom:1.5rem}
.dot{width:6px;height:6px;border-radius:9999px;background:var(--primary);animation:pulse 2s infinite}
.pill-text{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
h1.hero-title{max-width:56rem;margin:0 auto;font-size:3rem;font-weight:800;letter-spacing:-.025em;text-wrap:balance;line-height:1.1}
@media(min-width:768px){h1.hero-title{font-size:4.5rem}}
.hero-lead{max-width:42rem;margin:2rem auto 0;font-size:1.125rem;color:var(--muted);text-wrap:pretty}
@media(min-width:768px){.hero-lead{font-size:1.25rem}}
.hero-actions{margin-top:3rem;display:flex;flex-wrap:wrap;justify-content:center;gap:1rem}
.btn{display:inline-flex;align-items:center;height:3rem;padding:0 2rem;border-radius:.5rem;font-size:.875rem;font-weight:600;transition:transform .2s, background .2s}
.btn-primary{background:var(--primary);color:var(--primary-foreground);box-shadow:0 25px 50px -12px hsl(217 100% 50% / .2)}
.btn-primary:hover{transform:scale(1.02)}
.btn-outline{border:1px solid var(--border);background:var(--card)}
.btn-outline:hover{background:var(--secondary)}

/* Roadmap pills */
.roadmap{margin:4rem auto 0;display:grid;gap:1rem;max-width:64rem}
@media(min-width:768px){.roadmap{grid-template-columns:repeat(3,1fr)}}
.roadmap-card{display:block;border-radius:1rem;border:1px solid var(--border);background:var(--card);padding:1.25rem;transition:all .2s}
.roadmap-card:hover{border-color:hsl(217 100% 50% / .3);box-shadow:0 10px 30px -10px hsl(240 10% 4% / .08)}
.roadmap-tag{font-family:'JetBrains Mono',monospace;font-size:10px;text-transform:uppercase;color:var(--primary)}
.roadmap-title{margin-top:.5rem;font-size:1.125rem;font-weight:700}
.roadmap-meta{margin-top:.25rem;font-size:.75rem;color:var(--muted)}

/* AI Director */
.director{margin-top:5rem;animation:fadeUp 1.2s var(--ease-out-expo) both;animation-delay:.2s}
.director-grid{display:grid;gap:2.5rem;max-width:72rem;margin:0 auto;border-radius:1.5rem;border:1px solid var(--border);background:var(--card);padding:1.5rem;box-shadow:0 25px 50px -12px hsl(240 10% 4% / .12)}
@media(min-width:768px){.director-grid{grid-template-columns:1fr 1fr;padding:2.5rem;align-items:center}}
.director-img{aspect-ratio:1/1;width:100%;border-radius:1rem;object-fit:cover}
.eyebrow{font-family:'JetBrains Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:.15em;color:var(--primary)}
.h2{margin:.75rem 0 0;font-size:1.875rem;font-weight:700;letter-spacing:-.025em}
@media(min-width:768px){.h2{font-size:2.5rem}}
.lead{margin-top:1.25rem;color:var(--muted);text-wrap:pretty}
@media(min-width:768px){.lead{font-size:1.125rem}}
.bullets{margin:2rem 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.75rem;font-size:.875rem}
.bullets li{display:flex;gap:.75rem;align-items:flex-start}
.bullets li::before{content:"";margin-top:.5rem;width:6px;height:6px;border-radius:9999px;background:var(--primary);flex-shrink:0}

/* Stages */
.stage{border-top:1px solid hsl(215 25% 91% / .5);border-bottom:1px solid hsl(215 25% 91% / .5);padding:6rem 0}
@media(min-width:768px){.stage{padding:8rem 0}}
.stage.alt{background:hsl(60 9% 98% / .5)}
.stage-head{display:flex;flex-direction:column;gap:1.5rem;margin-bottom:4rem}
@media(min-width:768px){.stage-head{flex-direction:row;align-items:flex-end;justify-content:space-between}}
.stage-head .copy{max-width:42rem}
.stage-h{margin:.75rem 0 0;font-size:1.875rem;font-weight:700;letter-spacing:-.025em}
@media(min-width:768px){.stage-h{font-size:3rem}}
.stage-counter{font-family:'JetBrains Mono',monospace;font-size:.75rem;color:var(--muted)}
.results{margin-bottom:3rem;border-radius:1rem;border:1px solid hsl(217 100% 50% / .2);background:hsl(217 100% 50% / .05);padding:1.5rem}
@media(min-width:768px){.results{padding:2rem}}
.results ul{margin:1.25rem 0 0;padding:0;list-style:none;display:grid;gap:1rem}
@media(min-width:768px){.results ul{grid-template-columns:1fr 1fr}}
.results li{display:flex;gap:.75rem;align-items:flex-start;font-size:.875rem}
@media(min-width:768px){.results li{font-size:1rem}}
.results li::before{content:"";margin-top:.5rem;width:6px;height:6px;border-radius:9999px;background:var(--primary);flex-shrink:0}
.cards{display:grid;gap:1.25rem}
@media(min-width:768px){.cards{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.cards{grid-template-columns:repeat(3,1fr)}}
.card{display:flex;flex-direction:column;border-radius:1rem;border:1px solid var(--border);background:var(--card);padding:1.75rem;transition:all .2s;position:relative}
.card:hover{border-color:hsl(217 100% 50% / .2);box-shadow:0 10px 30px -10px hsl(240 10% 4% / .08)}
.card-top{display:flex;justify-content:space-between;align-items:flex-start}
.icon-tile{display:grid;place-items:center;width:40px;height:40px;border-radius:.5rem;background:hsl(217 100% 50% / .05);color:var(--primary)}
.icon-tile svg{width:20px;height:20px;stroke-width:1.75}
.card-num{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--muted)}
.card-h{margin:1.25rem 0 0;font-size:1rem;font-weight:700;line-height:1.3}
.card-desc{margin:.5rem 0 0;flex:1;font-size:.875rem;color:var(--muted);line-height:1.6}
.card-role{margin-top:1.25rem;border-top:1px solid hsl(215 25% 91% / .7);padding-top:.75rem;font-family:'JetBrains Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--primary)}

/* Vision */
.vision{padding:6rem 0}
.vision-box{border-radius:1.5rem;background:var(--foreground);color:var(--background);padding:3rem}
@media(min-width:768px){.vision-box{padding:5rem}}
.vision-grid{display:grid;gap:3rem}
@media(min-width:1024px){.vision-grid{grid-template-columns:1fr 1fr;align-items:center}}
.vision-lead{margin-top:1.5rem;font-size:1.125rem;color:hsl(0 0% 100% / .6)}
.stats{margin-top:2.5rem;display:grid;gap:1.5rem}
@media(min-width:640px){.stats{grid-template-columns:repeat(3,1fr)}}
.stat-num{font-size:1.875rem;font-weight:700}
.stat-label{margin-top:.25rem;font-size:.75rem;color:hsl(0 0% 100% / .4);text-transform:uppercase;letter-spacing:.05em}
.vision-img{aspect-ratio:16/9;width:100%;border-radius:1rem;border:1px solid hsl(0 0% 100% / .1);object-fit:cover}

/* Team */
.team{border-top:1px solid hsl(215 25% 91% / .5);background:var(--card);padding:6rem 0}
@media(min-width:768px){.team{padding:8rem 0}}
.team-head{margin-bottom:4rem;max-width:48rem}
.team-eyebrow{margin-bottom:1rem;font-family:'JetBrains Mono',monospace;font-size:.75rem;text-transform:uppercase;letter-spacing:.15em;color:var(--primary)}
.team-h{font-size:2.25rem;font-weight:700;letter-spacing:-.025em;margin:0}
@media(min-width:768px){.team-h{font-size:3rem}}
.team-lead{margin-top:1.5rem;font-size:1.125rem;color:var(--muted)}
.lead-row{display:grid;gap:3rem}
@media(min-width:768px){.lead-row{grid-template-columns:400px 1fr;gap:4rem}}
.lead-photo{position:relative}
.lead-photo img{aspect-ratio:4/5;width:100%;border-radius:1rem;border:1px solid var(--border);object-fit:cover;filter:grayscale(1);transition:filter .5s}
.lead-photo img:hover{filter:grayscale(0)}
.badge-exp{position:absolute;bottom:-1rem;right:-1rem;border-radius:.75rem;border:1px solid var(--border);background:var(--background);padding:.75rem 1.25rem;box-shadow:0 25px 50px -12px hsl(240 10% 4% / .15)}
.badge-exp .l{font-family:'JetBrains Mono',monospace;font-size:.75rem;text-transform:uppercase;letter-spacing:.15em;color:var(--muted)}
.badge-exp .v{font-size:1.5rem;font-weight:700}
.lead-role{font-family:'JetBrains Mono',monospace;font-size:.75rem;text-transform:uppercase;letter-spacing:.15em;color:var(--muted)}
.lead-name{margin:.5rem 0 0;font-size:1.875rem;font-weight:700;letter-spacing:-.025em}
.lead-bio{margin-top:1.5rem;color:var(--muted)}
.projects{margin-top:2.5rem}
.proj-list{margin-top:1rem;display:flex;flex-direction:column;gap:1rem}
.proj{display:flex;justify-content:space-between;gap:1.5rem;align-items:flex-start;border-bottom:1px solid hsl(215 25% 91% / .6);padding-bottom:1rem}
.proj:last-child{border-bottom:0}
.proj-name{font-weight:600}
.proj-desc{margin-top:.25rem;font-size:.875rem;color:var(--muted)}
.proj-tag{flex-shrink:0;font-family:'JetBrains Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:.15em;color:var(--muted)}

.team-grid{margin-top:5rem;display:grid;gap:2rem}
@media(min-width:768px){.team-grid{grid-template-columns:1fr 1fr}}
.tcard{overflow:hidden;border-radius:1rem;border:1px solid var(--border);background:var(--background)}
.tcard.dashed{border-style:dashed;background:var(--card)}
.tcard-img{position:relative}
.tcard-img img{aspect-ratio:4/3;width:100%;object-fit:cover;object-position:center 30%;filter:grayscale(1);transition:filter .5s}
.tcard-img img:hover{filter:grayscale(0)}
.tcard-tag{position:absolute;top:1rem;right:1rem;border:1px solid var(--border);background:hsl(240 20% 99% / .9);padding:.375rem .75rem;border-radius:.375rem;font-family:'JetBrains Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:.15em;color:var(--primary);backdrop-filter:blur(8px)}
.tcard-body{padding:2rem}
.tcard-role{font-family:'JetBrains Mono',monospace;font-size:.75rem;text-transform:uppercase;letter-spacing:.15em;color:var(--muted)}
.tcard-name{margin:.5rem 0 0;font-size:1.5rem;font-weight:700;letter-spacing:-.025em}
.tcard-desc{margin-top:1rem;font-size:.875rem;color:var(--muted);line-height:1.6}
.chips{margin-top:1.5rem;display:flex;flex-wrap:wrap;gap:.5rem}
.chip{border:1px solid var(--border);padding:.25rem .625rem;border-radius:.375rem;font-family:'JetBrains Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:.15em;color:var(--muted)}
.tcard-open{display:flex;aspect-ratio:4/3;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 50%, hsl(217 100% 50% / .08), transparent 60%)}
.tcard-open .ring{display:flex;flex-direction:column;align-items:center;gap:.75rem}
.tcard-open .q{display:flex;width:80px;height:80px;align-items:center;justify-content:center;border:1px dashed hsl(217 100% 50% / .4);border-radius:9999px;font-family:'JetBrains Mono',monospace;font-size:1.5rem;color:var(--primary)}
.tcard-link{margin-top:1.5rem;display:inline-flex;gap:.5rem;font-family:'JetBrains Mono',monospace;font-size:.75rem;text-transform:uppercase;letter-spacing:.15em;color:var(--primary)}

/* Contact */
.contact{padding:6rem 0}
@media(min-width:768px){.contact{padding:8rem 0}}
.contact-inner{max-width:48rem;margin:0 auto;text-align:center}
.contact h2{font-size:2.25rem;font-weight:700;letter-spacing:-.025em;margin:0}
.contact p{margin-top:1.5rem;font-size:1.125rem;color:var(--muted)}
.contact-form{margin-top:2.5rem;display:flex;flex-direction:column;gap:1rem}
@media(min-width:640px){.contact-form{flex-direction:row}}
.contact input{height:3.5rem;flex:1;border-radius:.75rem;border:1px solid var(--border);background:var(--card);padding:0 1.5rem;font:inherit;outline:none;transition:all .2s}
.contact input:focus{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary)}
.contact button{height:3.5rem;border-radius:.75rem;background:var(--primary);color:var(--primary-foreground);padding:0 2.5rem;font-weight:700;font:inherit;border:0;cursor:pointer;transition:all .2s}
.contact button:hover{box-shadow:0 25px 50px -12px hsl(217 100% 50% / .2)}
.contact-msg{margin-top:1.5rem;font-size:.875rem;color:var(--primary)}

/* Footer */
.footer{border-top:1px solid hsl(215 25% 91% / .5);background:var(--card);padding:3rem 0}
.footer-inner{display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:2rem}
@media(min-width:768px){.footer-inner{flex-direction:row}}
.footer-brand{font-family:'JetBrains Mono',monospace;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:-.05em}
.footer-links{display:flex;gap:2rem}
.footer-links a{font-size:.75rem;color:var(--muted)}
.footer-links a:hover{color:var(--foreground)}

@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}