/* COZYDEVKIT v1.2 */

  :root {
    --cyan: #00e5ff;
    --cyan-pale: #9ee7ff;
    --amber: #ffaa55;
    --green: #22ff88;
    --red: #ff4466;
    --ink: #05070a;
  }
  * { box-sizing: border-box; }
  
  html {scroll-behavior:smooth}
  html, body {margin:0; height:auto; overflow-x:hidden; overflow-y:auto; background:#05070a; color:#c8e6ff;}
  body {font-family:'JetBrains Mono', monospace;}
  #hero {position:relative; padding-top:56px; width:100vw; height:100vh; overflow:hidden;}
  #hero canvas {position:absolute; inset:0;}

  body { font-family: 'JetBrains Mono', ui-monospace, monospace; }
  canvas { display:block; width:100vw; height:100vh; }

  /* ------- HUD ------- */
  .hud-top-left {
    position: absolute; top: 22px; left: 26px; z-index: 5;
    color: var(--cyan-pale); font-size: 12px; letter-spacing: 0.18em;
    text-shadow: 0 0 12px rgba(0,229,255,0.55), 0 0 2px rgba(0,229,255,0.9);
    user-select: none; pointer-events:none;
  }
  .hud-top-left .brand { color:#e5faff; font-weight:800; font-size:14px; }
  .hud-top-left .sub { color:#6a8fa3; font-size:10px; margin-top:3px; letter-spacing:0.22em; }

  .hud-top-right {
    position: absolute; top: 22px; right: 26px; z-index:5;
    text-align:right; font-size:10px; color:#7fb8cf; letter-spacing:0.14em;
    user-select:none; pointer-events:none;
  }
  .hud-top-right .row { margin:2px 0; display:flex; justify-content:flex-end; gap:10px; align-items:center; }
  .hud-top-right .row b { color:#e5faff; font-weight:600; letter-spacing:0.1em; }
  .hud-top-right .dot { display:inline-block; width:6px; height:6px; border-radius:50%;
    background: var(--green); box-shadow:0 0 8px var(--green); animation: pulse 1.6s infinite ease-in-out; }
  @keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:0.35;} }

  .vignette {
    position:absolute; inset:0; pointer-events:none; z-index:4;
    background:
      radial-gradient(ellipse at center, transparent 52%, rgba(0,0,0,0.68) 100%),
      linear-gradient(to bottom, rgba(5,7,10,0.15), rgba(5,7,10,0.55) 92%);
  }

  .scanlines {
    position:absolute; inset:0; pointer-events:none; z-index:6;
    background: repeating-linear-gradient(0deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 3px);
    mix-blend-mode: overlay;
  }

  .bottom-tag {
    position:absolute; bottom:18px; right:22px; z-index:5;
    font-size:11px; color:#5a7a8a; letter-spacing:0.14em;
    user-select:none; pointer-events:none;
  }
  .bottom-tag b { color:#c8e6ff; font-weight:600; }

  .camera-ui {
    position:absolute; bottom:18px; left:22px; z-index:5;
    display:flex; gap:6px; align-items:center; font-size:10px; letter-spacing:0.14em;
    user-select:none;
  }
  .camera-ui .label { color:#5a7a8a; margin-right:6px; letter-spacing:0.22em; }
  .cam-btn {
    padding: 7px 11px; background:rgba(0,229,255,0.06); border:1px solid rgba(0,229,255,0.22);
    color:var(--cyan-pale); cursor:pointer; font-family:inherit; font-size:10px; letter-spacing:0.18em;
    transition: all 0.2s; text-transform:uppercase;
  }
  .cam-btn:hover { background:rgba(0,229,255,0.16); border-color:rgba(0,229,255,0.5); }
  .cam-btn.active { background:rgba(0,229,255,0.28); border-color:var(--cyan); color:#fff;
    text-shadow:0 0 10px var(--cyan); box-shadow: 0 0 14px rgba(0,229,255,0.3) inset; }

  /* ------- Boot overlay ------- */
  .boot {
    position:fixed; inset:0; z-index:100; background:var(--ink);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    transition: opacity 1s ease, visibility 1s ease;
  }
  .boot.hidden { opacity:0; visibility:hidden; }
  .boot .wordmark {
    font-size:28px; letter-spacing:0.42em; color:var(--cyan-pale); font-weight:800;
    text-shadow: 0 0 26px rgba(0,229,255,0.75), 0 0 3px #fff;
    animation: flicker 1.9s infinite;
  }
  .boot .sub { margin-top:14px; font-size:10px; color:#6a8fa3; letter-spacing:0.38em; }
  .boot .bar { margin-top:28px; width:300px; height:2px; background:rgba(0,229,255,0.14); overflow:hidden; }
  .boot .bar .fill { height:100%; background:var(--cyan); box-shadow:0 0 14px var(--cyan); width:0%; transition:width 0.25s; }
  .boot .lines { margin-top:20px; width:300px; font-size:10px; color:#3e6576; letter-spacing:0.1em; text-align:left; line-height:1.8; }
  .boot .lines .line { opacity:0; transition: opacity 0.3s; }
  .boot .lines .line.show { opacity:1; }
  .boot .lines .ok { color:var(--green); }
  @keyframes flicker {
    0%,18%,22%,25%,53%,57%,100% { opacity:1; text-shadow: 0 0 26px rgba(0,229,255,0.75), 0 0 3px #fff; }
    20%,24%,55% { opacity:0.55; text-shadow: 0 0 8px rgba(0,229,255,0.3); }
  }

  .help-hint {
    position:absolute; left:26px; bottom:62px; z-index:5;
    font-size:9px; color:#3e6576; letter-spacing:0.18em;
    user-select:none; pointer-events:none;
  }



.hero-shell{position:relative;height:100vh;overflow:hidden;background:#05070a}
.hero-frame{position:relative;width:100%;height:100%}
.hero-stage{position:absolute;inset:0}
.hero-stage canvas{position:absolute;inset:0;width:100% !important;height:100% !important}
.hud-top-left{position:absolute;top:18px;left:18px;font-family:'JetBrains Mono',monospace;font-size:11px;color:#7fb8cf;line-height:1.4;z-index:10}
.hud-top-left .brand{color:#e5faff;font-weight:700;letter-spacing:0.15em}
.hud-top-right{position:absolute;top:18px;right:18px;font-family:'JetBrains Mono',monospace;font-size:10px;color:#5a7a8a;text-align:right;line-height:1.6;z-index:10}
.hud-top-right .dot{display:inline-block;width:6px;height:6px;background:#00ff88;border-radius:50%;margin-right:4px}
.camera-ui{position:absolute;bottom:18px;left:18px;display:flex;gap:6px;align-items:center;z-index:10}
.camera-ui .label{font-family:'JetBrains Mono',monospace;font-size:9px;color:#5a7a8a;margin-right:6px}
.cam-btn{background:rgba(5,8,12,0.7);border:1px solid rgba(0,229,255,0.15);color:#5a7a8a;font-family:'JetBrains Mono',monospace;font-size:9px;padding:4px 8px;border-radius:4px;cursor:pointer}
.cam-btn.active{background:rgba(0,229,255,0.15);color:#00e5ff;border-color:rgba(0,229,255,0.3)}
.help-hint{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);font-family:'JetBrains Mono',monospace;font-size:9px;color:#3a4a5a;z-index:10}
.bottom-tag{position:absolute;bottom:18px;right:18px;font-family:'JetBrains Mono',monospace;font-size:9px;color:#3a4a5a;z-index:10}
.vignette{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 40%,rgba(0,0,0,0.6) 100%);pointer-events:none;z-index:5}
.scanlines{position:absolute;inset:0;background:repeating-linear-gradient(transparent,transparent 2px,rgba(0,229,255,0.02) 2px,rgba(0,229,255,0.02) 3px);pointer-events:none;z-index:5}
.hero-copy{position:absolute;left:24px;bottom:120px;z-index:20;width:380px;max-width:calc(100vw - 48px);background:rgba(5,8,12,0.88);backdrop-filter:blur(20px);border:1px solid rgba(0,229,255,0.2);border-radius:16px;padding:24px;box-shadow:0 16px 48px rgba(0,0,0,0.6)}
.hero-panel-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.eyebrow{font-family:'JetBrains Mono',monospace;font-size:9px;color:#00ff88;letter-spacing:0.1em;padding:3px 8px;background:rgba(0,255,136,0.1);border:1px solid rgba(0,255,136,0.2);border-radius:12px}
.hero-system{font-family:'JetBrains Mono',monospace;font-size:8px;color:#5a7a8a;letter-spacing:0.05em}
.hero-copy h1{font-size:48px;font-weight:800;color:#e5faff;line-height:0.9;margin:0 0 16px;font-family:Inter,system-ui;letter-spacing:-0.02em}
.hero-copy p{font-family:'JetBrains Mono',monospace;font-size:11px;line-height:1.6;color:#7fb8cf;margin:0 0 20px}
.hero-actions{display:flex;gap:8px;margin-bottom:16px}
.btn-cyan{padding:8px 14px;background:rgba(0,229,255,0.15);border:1px solid rgba(0,229,255,0.3);border-radius:8px;font-family:'JetBrains Mono',monospace;font-size:9px;color:#00e5ff;text-decoration:none;letter-spacing:0.1em}
.btn-ghost{padding:8px 14px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:8px;font-family:'JetBrains Mono',monospace;font-size:9px;color:#7fb8cf;text-decoration:none;letter-spacing:0.1em}
.hero-mini-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.hero-mini{background:rgba(0,0,0,0.4);border:1px solid rgba(255,255,255,0.08);border-radius:8px;padding:10px}
.hero-mini .label{font-family:'JetBrains Mono',monospace;font-size:8px;color:#5a7a8a;letter-spacing:0.1em;display:block;margin-bottom:4px}
.hero-mini strong{font-family:'JetBrains Mono',monospace;font-size:11px;color:#e5faff;font-weight:500;line-height:1.3}
.hero-meta{position:absolute;right:24px;bottom:120px;z-index:20;width:280px}
.hero-card{background:rgba(5,8,12,0.85);backdrop-filter:blur(16px);border:1px solid rgba(0,229,255,0.15);border-radius:12px;padding:16px;margin-bottom:12px}
.hero-card h3{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:600;color:#e5faff;letter-spacing:0.15em;margin:0 0 8px;text-transform:uppercase}
.hero-card p{font-family:'JetBrains Mono',monospace;font-size:10px;line-height:1.5;color:#7a8ca3;margin:0}
.hero-kpis{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.hero-kpi{background:rgba(5,8,12,0.7);border:1px solid rgba(255,255,255,0.08);border-radius:8px;padding:12px;text-align:center}
.hero-kpi strong{display:block;font-size:20px;font-weight:700;color:#e5faff;font-family:Inter;margin-bottom:4px}
.hero-kpi span{font-family:'JetBrains Mono',monospace;font-size:8px;color:#5a7a8a;letter-spacing:0.1em;line-height:1.2}
.hero-scrollcue{position:absolute;bottom:60px;left:50%;transform:translateX(-50%);font-family:'JetBrains Mono',monospace;font-size:9px;color:#3a4a5a;letter-spacing:0.2em;z-index:10}
.boot.hidden{display:none}



html{scroll-behavior:smooth}
div[style*="backdrop-filter:blur(16px)"]{transition:all 0.3s ease}
div[style*="backdrop-filter:blur(16px)"]:hover{box-shadow:0 12px 40px rgba(0,229,255,0.15);border-color:rgba(0,229,255,0.3)}
a[href="#top"], a[href="#manifesto"], a[href="#products"], a[href="#lgu"], a[href="#method"]{transition:color 0.2s ease}
a[href="#top"]:hover, a[href="#manifesto"]:hover, a[href="#products"]:hover, a[href="#lgu"]:hover{color:#e5faff !important}
.hero-copy{animation:slideUp 0.8s ease-out 0.3s both}
.hero-meta{animation:slideUp 0.8s ease-out 0.5s both}
@keyframes slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.btn-cyan, .btn-ghost{transition:all 0.2s ease}
.btn-cyan:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,229,255,0.3)}
.btn-ghost:hover{background:rgba(255,255,255,0.1) !important}
.hero-mini{transition:all 0.2s ease}
.hero-mini:hover{transform:translateY(-2px)}
#method article{transition:all 0.3s ease}
#method article:hover{transform:translateY(-4px);border-color:rgba(0,229,255,0.3) !important}
.cam-btn{transition:all 0.15s ease}
.hud-top-right .dot{animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.7}}
.hero-scrollcue{animation:float 3s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-4px)}}
[data-reveal]{opacity:0;transform:translateY(16px);transition:all 0.6s ease}
[data-reveal].is-visible{opacity:1;transform:translateY(0)}



#lgu > div > div > div{background:linear-gradient(180deg,rgba(10,17,26,0.8),rgba(5,10,18,0.8)) !important;border:1px solid rgba(0,229,255,0.12) !important;border-radius:14px !important;transition:all 0.3s ease !important;backdrop-filter:blur(8px);}
#lgu > div > div > div:hover{transform:translateY(-4px);border-color:rgba(0,229,255,0.3) !important;box-shadow:0 8px 24px rgba(0,0,0,0.4);}
#lgu span[style*="color:#22ff88"]{animation:pulse-green 2s infinite;}
@keyframes pulse-green{0%,100%{opacity:1}50%{opacity:0.6}}



:fullscreen .hero-shell, :-webkit-full-screen .hero-shell{height:100vh !important}
:fullscreen div[style*="position:fixed;top:16px"], :-webkit-full-screen div[style*="position:fixed;top:16px"]{opacity:0;pointer-events:none;transition:opacity 0.3s;}
:fullscreen .hero-scrollcue, :-webkit-full-screen .hero-scrollcue{display:none;}
:fullscreen .camera-ui, :-webkit-full-screen .camera-ui{bottom:24px;}
#fsToggle:hover{background:rgba(0,229,255,0.1) !important;border-color:rgba(0,229,255,0.3) !important;}
#fsToggle:hover svg{stroke:#00e5ff;}
:fullscreen #fsToggle svg{stroke:#00e5ff;}


/* v1.2 upgrades */
.low-fps .scanlines { opacity: 0.3 !important; }
.reduce-motion .scanlines, .reduce-motion .boot .wordmark { animation: none !important; }