@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800;900&family=Space+Grotesk:wght@400;600;700&display=swap');

:root{
  --bg:#0B0F15;
  --panel:#0F1420;
  --panel2:#0E1626;
  --text:#DDE7F2;
  --muted:#9FB1C5;
  --neon1:#00E5FF;
  --neon2:#A78BFA;
  --accent:#00FFC6;
  --shadow:rgba(0,229,255,.25);
}
[data-theme="light"]{
  --bg:#F7FBFF;
  --panel:#FFFFFF;
  --panel2:#F3F7FB;
  --text:#0C1A2B;
  --muted:#5A6A7A;
  --neon1:#007CFF;
  --neon2:#7C5CFF;
  --accent:#06C167;
  --shadow:rgba(0,124,255,.2);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;scroll-behavior:smooth;position:relative;z-index:0;}
body{min-height:100vh;}
a{color:var(--text);text-decoration:none;}
a:hover{text-decoration:underline;}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;}
.container{width:min(1200px,92vw);margin:0 auto;}
.nav{position:sticky;top:0;z-index:100;backdrop-filter:blur(10px);background:linear-gradient(180deg,rgba(12,18,30,.78),rgba(12,18,30,.45));border-bottom:1px solid rgba(255,255,255,.06);}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.4rem 0;}
.brand{display:flex;align-items:center;gap:.8rem;padding:.4rem 0;}
.brand img{width:44px;height:44px;border-radius:12px;border:1px solid rgba(255,255,255,.12);box-shadow:0 10px 40px rgba(0,0,0,.35);}
.brand .name{font-weight:900;letter-spacing:.35px;}
.nav .links{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;justify-content:flex-end;}
.nav .links a{opacity:.85;font-weight:600;}
.nav .links a:hover{opacity:1;}

/* Dropdown and responsive nav */
.nav-toggle{display:none;align-items:center;justify-content:center;padding:.45rem .6rem;border-radius:10px;border:1px solid rgba(255,255,255,.06);background:transparent;font-weight:700;color:var(--text);}
.dropdown-wrap{position:relative;}
.dropdown-btn{background:none;border:1px solid rgba(255,255,255,.04);padding:.45rem .7rem;border-radius:10px;font-weight:700;color:var(--text);}
.dropdown{position:absolute;top:calc(100% + 8px);right:0;display:none;min-width:220px;background:var(--panel);border-radius:12px;padding:.25rem 0;box-shadow:0 18px 40px rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.06);z-index:120;}
.dropdown li{list-style:none;margin:0;padding:0;}
.dropdown a{display:block;padding:.6rem .9rem;color:var(--text);white-space:nowrap;}
.dropdown a:hover{background:rgba(255,255,255,.03);}
.dropdown-wrap:hover > .dropdown{display:block;} /* hover opens on desktop */

@media (max-width: 960px){
  .nav-toggle{display:inline-flex;}
  /* transform links into a panel for mobile; controlled by body.nav-open */
  .nav .links{position:fixed;top:64px;right:16px;display:none;flex-direction:column;gap:.6rem;padding:1rem;border-radius:12px;background:var(--panel);box-shadow:0 24px 60px rgba(0,0,0,.5);width:calc(100% - 32px);max-width:360px;z-index:200;}
  body.nav-open .nav .links{display:flex;}
  /* mobile dropdown becomes stacked content inside menu */
  .dropdown{position:static;display:none;box-shadow:none;border:none;background:transparent;padding:0;margin-top:0;}
  .dropdown-wrap.open > .dropdown{display:block;}
  .dropdown-btn{width:100%;text-align:left;}
  
  .hero-orb{position:relative;bottom:auto;right:auto;margin:2rem auto 0;}
  .hero .inner{padding:2.6rem 1.2rem;}
  .monitor{grid-template-columns:1fr;gap:1.2rem;}
  
  /* Optimize canvas for mobile */
  #stars, #structure {
    will-change:transform;
    transform:translateZ(0);
  }
}
.btn{display:inline-flex;align-items:center;gap:.6rem;padding:.85rem 1.1rem;border-radius:16px;background:linear-gradient(90deg,var(--neon1),var(--neon2));color:#04111F;font-weight:900;letter-spacing:.3px;text-decoration:none;box-shadow:0 16px 32px var(--shadow);transition:transform .18s ease,filter .18s ease,box-shadow .18s ease;}
.btn:hover{transform:translateY(-2px);filter:brightness(1.04);box-shadow:0 18px 40px var(--shadow);}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,.25);color:var(--text);box-shadow:none;}
.btn.disabled,.btn[aria-disabled="true"]{opacity:.45;pointer-events:none;}
.theme{cursor:pointer;border:1px solid rgba(255,255,255,.2);padding:.55rem .85rem;border-radius:12px;font-weight:600;transition:background .2s;}
.theme:hover{background:rgba(255,255,255,.06);}
/* Global background canvas elements */
#stars, #structure {
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  pointer-events:none;
  z-index:1;
  /* Mobile optimizations */
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
  -webkit-perspective:1000;
  perspective:1000;
}
#stars{opacity:.9;z-index:1;}
#structure{mix-blend-mode:screen;opacity:.95;z-index:2;}

.hero{position:relative;min-height:78vh;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.hero .bg{width:100%;height:100%;object-fit:cover;display:block;}
.hero .overlay{position:absolute;inset:0;background:radial-gradient(900px 500px at 80% 25%,rgba(167,139,250,.28),transparent 62%);z-index:15;}
.hero .inner{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:2.8rem 1rem;z-index:20;}
.hero-content{max-width:680px;margin:0 auto;}
.tag{color:var(--muted);font-weight:700;letter-spacing:.18em;text-transform:uppercase;font-size:.78rem;}
h1.display{font-family:'Space Grotesk',Inter,sans-serif;font-size:clamp(2.6rem,6vw,5.1rem);margin:1rem 0 .6rem;line-height:1.05;letter-spacing:-.5px;}
.tagline{margin-top:.6rem;font-size:clamp(1.05rem,2.3vw,1.35rem);color:var(--muted);}
.cta-row{display:flex;gap:.9rem;justify-content:center;margin-top:1.1rem;flex-wrap:wrap;}
.hint{margin-top:1rem;color:var(--muted);}
.hero-orb{--orb-x:0px;--orb-y:0px;width:110px;height:110px;border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(0,229,255,.85),rgba(0,229,255,.15));position:absolute;bottom:12%;right:12%;box-shadow:0 25px 45px rgba(0,229,255,.35);cursor:pointer;transition:transform .3s ease,box-shadow .3s ease,background .3s ease;touch-action:none;user-select:none;transform:translate(var(--orb-x),var(--orb-y));}
.hero-orb:hover{transform:translate(var(--orb-x),var(--orb-y)) scale(1.05);box-shadow:0 35px 70px rgba(0,229,255,.42);}
.hero-orb.active{box-shadow:0 38px 84px rgba(0,229,255,.5);background:radial-gradient(circle at 30% 30%,rgba(0,229,255,.95),rgba(0,229,255,.2));transform:translate(var(--orb-x),var(--orb-y)) scale(1.03);}
.hero-orb.flash{animation:orbFlash .45s ease;}
@keyframes orbFlash{
  0%{transform:translate(var(--orb-x),var(--orb-y)) scale(1);}
  50%{transform:translate(var(--orb-x),var(--orb-y)) scale(1.14);}
  100%{transform:translate(var(--orb-x),var(--orb-y)) scale(1);}
}
.section{padding:3.6rem 0;position:relative;z-index:10;}
.section.alt{background:var(--panel);}
.grid{display:grid;gap:1rem;}
.card{background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.06));border:1px solid rgba(0,229,255,.4);border-radius:18px;padding:1.4rem;box-shadow:0 12px 40px rgba(0,0,0,.4), 0 0 20px rgba(0,229,255,.15);position:relative;overflow:hidden;backdrop-filter:blur(10px);}
.card.glass{background:linear-gradient(180deg,rgba(0,229,255,.15),rgba(167,139,250,.12));border:1px solid rgba(0,229,255,.6);box-shadow:0 12px 40px rgba(0,0,0,.4), 0 0 25px rgba(0,229,255,.25);}
.card p, .card div:not(.title):not(.kicker){color:var(--text);opacity:0.95;}
.card .title{color:rgba(255,255,255,0.98);}
.kicker{color:var(--neon1);font-weight:900;letter-spacing:.16em;text-transform:uppercase;font-size:.8rem;text-shadow:0 0 10px var(--neon1);}
.small{font-size:.92rem;color:var(--text);opacity:0.9;}
.small.muted{color:var(--muted);}
.title{font-weight:900;font-size:1.15rem;color:var(--text);text-shadow:0 0 8px rgba(255,255,255,0.3);}
.features{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
.tilt{transform-style:preserve-3d;transform:perspective(900px) rotateX(0) rotateY(0);transition:transform .12s ease-out;}
.tilt .title,.tilt .small{transform:translateZ(35px);}
.mag{transition:transform .12s ease-out;}
html.js .reveal{opacity:0;transform:translateY(20px);transition:all .6s cubic-bezier(.2,.68,.18,1);}
html.js .reveal.visible{opacity:1;transform:translateY(0);}
.config{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
.input,select,textarea{width:100%;padding:.75rem .9rem;border-radius:12px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.04);color:var(--text);font:inherit;}
textarea{resize:vertical;}
.price{font-weight:900;font-size:1.8rem;}
.hr{height:1px;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.22),rgba(255,255,255,0));margin:1rem 0;}
.estimate{display:grid;gap:.6rem;margin-top:1.2rem;}
.lab-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.2rem;}
.lab-card{display:flex;flex-direction:column;gap:.9rem;}
.lab-actions{display:flex;gap:.6rem;flex-wrap:wrap;}
.lab-meter{display:flex;gap:.35rem;margin-top:.3rem;}
.lab-meter span{flex:1;height:8px;border-radius:6px;background:rgba(255,255,255,.12);transition:background .3s ease,box-shadow .3s ease;}
.lab-meter span.active{background:var(--neon1);box-shadow:0 0 14px var(--neon1);}
.lab-demo{display:flex;gap:.7rem;padding:1rem;border-radius:14px;background:rgba(255,255,255,.04);position:relative;overflow:hidden;}
.pulse-dot{width:16px;height:16px;border-radius:50%;background:var(--neon2);box-shadow:0 0 16px rgba(167,139,250,.6);animation:pulse 2.8s ease-in-out infinite;}
.pulse-dot:nth-child(2){animation-delay:.4s;background:var(--neon1);}
.pulse-dot:nth-child(3){animation-delay:.8s;background:var(--accent);}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.7;}50%{transform:scale(1.3);opacity:1;}}
.orbit{display:flex;align-items:center;justify-content:center;gap:1rem;margin:2.2rem 0;}
.orbit-track{display:flex;gap:1rem;width:100%;max-width:720px;perspective:1200px;}
.orbit-card{flex:1;min-height:190px;padding:1.2rem;border-radius:18px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(160deg,rgba(0,229,255,.16),rgba(167,139,250,.06));box-shadow:0 15px 40px rgba(0,0,0,.28);opacity:.55;transform:translateY(10px) scale(.94);transition:transform .4s ease,opacity .4s ease,filter .4s ease;}
.orbit-card.active{opacity:1;transform:translateY(0) scale(1.04);filter:drop-shadow(0 25px 40px rgba(0,0,0,.35));}
.orbit-card.prev{opacity:.75;transform:translateX(-6%) scale(.97);}
.orbit-card.next{opacity:.75;transform:translateX(6%) scale(.97);}
.orbit-card .orbit-tag{font-size:.75rem;text-transform:uppercase;letter-spacing:.16em;color:var(--muted);margin-bottom:.4rem;}
.orbit-card .orbit-title{font-family:'Space Grotesk',Inter,sans-serif;font-size:1.2rem;font-weight:700;margin-bottom:.4rem;}
.orbit-card .orbit-meta{font-size:.85rem;color:var(--muted);}
.orbit-nav{width:48px;height:48px;border-radius:14px;border:1px solid rgba(255,255,255,.2);background:rgba(0,0,0,.25);color:var(--text);display:grid;place-items:center;box-shadow:0 12px 28px rgba(0,0,0,.32);transition:transform .2s ease;}
.orbit-nav:hover{transform:translateY(-2px);}
.monitor{display:grid;grid-template-columns:1.2fr .8fr;gap:1.5rem;margin-top:2rem;align-items:stretch;}
.monitor-screen{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02));border-radius:22px;border:1px solid rgba(255,255,255,.1);overflow:hidden;padding:1.2rem;box-shadow:0 24px 50px rgba(0,0,0,.35);}
.monitor-header{display:flex;gap:.4rem;margin-bottom:1rem;}
.monitor-header span{width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.2);}
.monitor-body{position:relative;display:grid;gap:1rem;z-index:1;}
.monitor-glow{position:absolute;inset:0;background:radial-gradient(circle at 20% 20%,rgba(0,229,255,.35),transparent 62%),radial-gradient(circle at 80% 80%,rgba(167,139,250,.35),transparent 65%);opacity:.9;mix-blend-mode:screen;pointer-events:none;z-index:0;transition:background 1s ease;}
.monitor-details{display:flex;flex-direction:column;gap:.9rem;}
.monitor-title{font-family:'Space Grotesk',Inter,sans-serif;font-size:1.6rem;font-weight:700;}
.monitor-tags{display:flex;flex-wrap:wrap;gap:.5rem;}
.monitor-tags span{padding:.35rem .6rem;border-radius:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;}
.monitor-links{display:flex;gap:.6rem;flex-wrap:wrap;}
.monitor-stats{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));}
.monitor-stat{padding:.9rem;border-radius:14px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.12);position:relative;overflow:hidden;}
.monitor-stat .label{font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-bottom:.3rem;}
.monitor-stat .value{font-size:1.5rem;font-weight:800;}
.monitor-stat .delta{font-size:.82rem;color:var(--accent);margin-top:.2rem;}
.monitor-timeline{display:flex;gap:.8rem;flex-wrap:wrap;}
.monitor-step{flex:1;min-width:140px;padding:.8rem;border-radius:12px;border:1px dashed rgba(255,255,255,.18);background:rgba(255,255,255,.04);}
.monitor-step.done{border-style:solid;border-color:rgba(0,229,255,.4);}
.monitor-step.doing{border-style:solid;border-color:rgba(167,139,250,.4);}
.monitor-step .status{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
.monitor-step .name{font-weight:700;margin-top:.2rem;}
.monitor-highlights{display:grid;gap:.5rem;}
.monitor-highlights .highlight{padding:.6rem .7rem;border-radius:12px;background:rgba(0,0,0,.32);border:1px solid rgba(255,255,255,.12);font-size:.9rem;}
.app-grid{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));align-items:stretch;}
.chip-row{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.1rem 0;}
.chip{padding:.55rem 1rem;border-radius:999px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);font-weight:600;cursor:pointer;transition:background .2s,transform .2s;}
.chip:hover{transform:translateY(-2px);}
.chip.active{background:linear-gradient(90deg,var(--neon1),var(--neon2));color:#04111F;box-shadow:0 12px 26px var(--shadow);}
.app-stage{display:flex;flex-direction:column;gap:1rem;}
.app-toolbar{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:.4rem;}
.app-title{font-family:'Space Grotesk',Inter,sans-serif;font-size:1.25rem;font-weight:700;}
.app-canvas{min-height:260px;display:grid;gap:1rem;transition:transform .4s ease,opacity .4s ease;}
.app-canvas.switching{opacity:0;transform:translateY(14px);}
.app-panels{display:grid;gap:1rem;}
.app-panels.two-col{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
.app-panel{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:1rem;position:relative;overflow:hidden;}
.app-panel h4{margin:0 0 .6rem;font-size:1rem;}
.app-stat-grid{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));}
.app-stat{padding:.8rem;border-radius:14px;background:linear-gradient(150deg,rgba(0,229,255,.18),rgba(167,139,250,.05));border:1px solid rgba(255,255,255,.12);box-shadow:0 10px 25px rgba(0,0,0,.25);}
.app-stat .label{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:.3rem;}
.app-stat .value{font-size:1.5rem;font-weight:800;}
.app-stat .delta{font-size:.82rem;color:var(--accent);margin-top:.2rem;}
.sparkline{width:100%;height:60px;margin-top:1rem;}
.app-list{list-style:none;margin:0;padding:0;display:grid;gap:.5rem;}
.app-list li{padding:.6rem .7rem;border-radius:10px;background:rgba(255,255,255,.04);border:1px dashed rgba(255,255,255,.18);display:flex;justify-content:space-between;align-items:center;gap:.6rem;font-size:.9rem;}
.app-badge{padding:.25rem .55rem;border-radius:999px;background:rgba(0,229,255,.12);border:1px solid rgba(0,229,255,.3);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;}
.app-note-stack{display:grid;gap:.7rem;}
.app-note{padding:.8rem;border-radius:14px;background:rgba(0,0,0,.32);border:1px solid rgba(255,255,255,.12);}
.app-note .author{font-weight:700;margin-bottom:.3rem;}
.app-note .role{font-size:.8rem;color:var(--muted);margin-bottom:.5rem;}
.app-note .quote{font-size:.95rem;line-height:1.4;}
.app-radial{width:120px;height:120px;border-radius:50%;margin:1rem auto;background:conic-gradient(var(--accent) 0deg 240deg,rgba(255,255,255,.12) 240deg 360deg);display:grid;place-items:center;font-weight:800;}
.app-radial span{font-size:1.2rem;}
.app-board{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));}
.app-column{padding:.8rem;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);display:grid;gap:.6rem;}
.app-column h5{margin:0;font-size:.9rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);}
.app-card{padding:.7rem .8rem;border-radius:12px;background:rgba(0,0,0,.38);border:1px solid rgba(255,255,255,.12);font-size:.92rem;}
.app-card .tag{display:inline-block;margin-bottom:.35rem;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);}
.contact-grid{grid-template-columns:1.1fr .9fr;gap:1.2rem;}
.footer{background:#070A10;border-top:1px solid rgba(255,255,255,.08);color:#DDE5F2;}
.footer-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));align-items:flex-start;}
.palette{display:flex;gap:.35rem;align-items:center;}
.palette span{width:14px;height:14px;border-radius:50%;display:inline-block;}
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:120;}
.modal .shade{position:absolute;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);}
.modal .panel{position:relative;width:min(900px,92vw);max-height:90vh;overflow:auto;border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.12);padding:1.4rem;box-shadow:0 24px 60px rgba(0,0,0,.4);}
.modal .close{position:absolute;top:.7rem;right:.7rem;width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(0,0,0,.25);color:var(--text);font-size:1.4rem;display:grid;place-items:center;cursor:pointer;}
.list{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.4rem;}
.list li{padding:.6rem .75rem;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);cursor:pointer;transition:transform .15s ease,background .15s ease;}
.list li:hover{transform:translateY(-2px);background:rgba(255,255,255,.08);}
.fab{position:fixed;right:22px;bottom:22px;z-index:110;}
code{font-family:'Space Grotesk',monospace;background:rgba(255,255,255,.1);padding:.1rem .3rem;border-radius:6px;}
@media (max-width: 720px){
  /* Keep nav horizontal, just hide links behind hamburger */
  .contact-grid{grid-template-columns:1fr;}
  .orbit{flex-direction:column;}
  .orbit-track{max-width:100%;}
  .orbit-nav{order:-1;}
  
  /* Mobile touch optimizations */
  .hero-orb{
    touch-action:pan-x pan-y;
    -webkit-user-select:none;
    user-select:none;
  }
  
  /* Reduce motion on mobile if preferred */
  @media (prefers-reduced-motion: reduce) {
    #stars, #structure {
      animation:none;
    }
  }
}
@media (max-width: 540px){
  .cta-row{flex-direction:column;}
  .hero-orb{width:90px;height:90px;}
  
  /* Further mobile optimizations */
  .card{
    backdrop-filter:blur(5px);
    padding:1rem;
  }
  
  .hero .inner{
    padding:2rem 1rem;
  }
}