/* scrtchan.fun — styles */
:root{
  --bg: #0b0f10;
  --bg-soft: #0e1417;
  --fg: #eef6f7;
  --muted: #9bb4b8;
  --accent: #19e3d6; /* turquoise */
  --accent-2: #2de2e6; /* alt cyan */
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.6 "Inter", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Layout helpers */
.container{ width:min(1200px, 92%); margin-inline:auto; }
.narrow{ width:min(900px, 92%); margin-inline:auto; }
.section{ padding: 96px 0; position:relative; }
.section-alt{ background: linear-gradient(180deg, rgba(25,227,214,.04), rgba(25,227,214,0)); }
.eyebrow{ text-transform: uppercase; letter-spacing:.12em; color: var(--accent-2); font-weight:700; font-size:.78rem; }
.section-title{ font-size: clamp(2rem, 4vw, 3rem); line-height:1.15; margin:.4rem 0 1rem; }
.lead{ font-size:1.125rem; color:var(--fg); opacity:.9; }
.bullets{ margin: .5rem 0 1.25rem 1rem; }
.bullets li{ margin:.25rem 0; color:var(--muted); }

/* Header */
.site-header{
  position:sticky; top:0; z-index:50;
  background: rgba(11,15,16,.75);
  backdrop-filter: blur(8px);
  border-bottom:1px solid rgba(45,226,230,.15);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:12px 0; }
.brand{ display:flex; align-items:center; gap:.65rem; text-decoration:none; color:var(--fg); }
.brand-logo{ width:32px; height:32px; border-radius:8px; object-fit:cover; box-shadow: var(--shadow); }
.brand-title{ font-weight:900; letter-spacing:.5px; font-size:1.05rem; }
.brand-title .dot{ color:var(--accent); }

.nav{ display:flex; gap:1rem; align-items:center; }
.nav a{ color:var(--fg); text-decoration:none; opacity:.9; }
.nav a:hover{ color:var(--accent); }
.button{
  display:inline-block; padding:.6rem 1rem; border-radius:14px;
  border:1px solid var(--accent); color:var(--bg); background:var(--accent);
  text-decoration:none; font-weight:700;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
  box-shadow: var(--shadow);
}
.button:hover{ transform: translateY(-1px); }
.button-outline{ background:transparent; color:var(--accent); }
.button-outline:hover{ background:rgba(25,227,214,.12); }

.hamburger{ display:none; background:none; border:0; width:40px; height:40px; position:relative; }
.hamburger span{ position:absolute; left:8px; right:8px; height:2px; background:var(--fg); border-radius:2px; transition:.2s }
.hamburger span:nth-child(1){ top:12px }
.hamburger span:nth-child(2){ top:19px }
.hamburger span:nth-child(3){ top:26px }
.hamburger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg) }
.hamburger[aria-expanded="true"] span:nth-child(2){ opacity:0 }
.hamburger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg) }

/* Hero */
.hero{
  position:relative; min-height:72vh; display:grid; place-items:center;
  overflow:hidden; border-bottom:1px solid rgba(45,226,230,.15);
}
.hero-inner{ text-align:center; padding:96px 0; position:relative; z-index:2; }
.hero-title{ font-size: clamp(3rem, 9vw, 8rem); margin:0; letter-spacing:1px; font-weight:900; }
.hero-title .dot{ color:var(--accent); }
.hero-subtitle{ font-size: clamp(1rem, 2.3vw, 1.6rem); color:var(--fg); opacity:.9; margin:.75rem 0 1.25rem; }
.cta{ display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap; }

/* Animated ascii background */
.ascii-bg{
  position:absolute; inset:-10% -10% -10% -10%; z-index:1;
  background:
    radial-gradient(60vmax 60vmax at 30% 20%, rgba(45,226,230,.16), transparent 60%),
    radial-gradient(70vmax 70vmax at 80% 10%, rgba(25,227,214,.12), transparent 60%),
    radial-gradient(60vmax 60vmax at 70% 70%, rgba(45,226,230,.1), transparent 60%),
    var(--bg);
}
.ascii-bg::after{
  content:"@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@";
  position:absolute; inset:0; color:rgba(255,255,255,.06);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  letter-spacing:.15em; line-height:1.1; white-space:pre-wrap; user-select:none; pointer-events:none;
  mix-blend-mode: overlay;
  opacity:.5; filter: blur(0.2px);
  animation: drift 40s linear infinite;
}
@keyframes drift{
  from{ transform: translateY(0) }
  to{ transform: translateY(-50%) }
}

/* Columns */
.columns{ display:grid; grid-template-columns: 1.1fr .9fr; gap:48px; align-items:start; }
.col{ }
.code-panel{ }
.code-card{
  background: var(--bg-soft);
  border:1px solid rgba(45,226,230,.15);
  border-radius:18px; overflow:hidden; box-shadow: var(--shadow);
}
.code-card pre{ margin:0; padding:18px 20px 22px; overflow:auto; max-height:420px; }
.code-card code{ font-size:.92rem; color:#d6f7f7; }
.code-cta{ border-top:1px solid rgba(45,226,230,.15); padding:12px; display:flex; justify-content:flex-end; }
.run-button{ cursor:pointer; }

/* Community */
.community-inner{ display:flex; gap:32px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.footer-banner{ width:min(540px, 100%); border-radius:16px; border:1px solid rgba(45,226,230,.18); box-shadow: var(--shadow); }
.links{ display:flex; gap:14px; flex-wrap:wrap; margin-top:.35rem; }
.link{ color:var(--accent-2); text-decoration:none; border-bottom:1px dashed rgba(45,226,230,.4); }
.link:hover{ color:var(--accent); border-bottom-color: transparent; }

/* Footer */
.site-footer{ border-top:1px solid rgba(45,226,230,.18); padding:22px 0; }
.footer-inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.brand-inline{ display:flex; align-items:center; gap:.5rem; }
.brand-inline img{ width:22px; height:22px; border-radius:6px; }
.site-footer p{ margin:0; color:var(--muted); }

/* Responsive */
@media (max-width: 940px){
  .columns{ grid-template-columns: 1fr; }
}

@media (max-width: 860px){
  .nav{ display:none; position:absolute; right:4%; top:60px; background:var(--bg-soft);
        border:1px solid rgba(45,226,230,.2); border-radius:14px; padding:10px; flex-direction:column; }
  .nav a{ padding:8px 10px; }
  .hamburger{ display:block; }
  .nav.open{ display:flex; }
}