:root {
  --bg: #111315;
  --bg-soft: #171a1d;
  --card: #1d2024;
  --line: rgba(255,255,255,.1);
  --text: #f6f2e9;
  --muted: #9ea3a8;
  --accent: #ff7a1a;
  --accent-2: #ffbf47;
  --green: #a7f070;
  --radius: 26px;
  --shadow: 0 24px 80px rgba(0,0,0,.28);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 75% 8%, rgba(255,122,26,.14), transparent 25rem),
    radial-gradient(circle at 8% 35%, rgba(255,191,71,.06), transparent 24rem),
    var(--bg);
  font-family: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
}
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.noise {
  position: fixed; inset: 0; pointer-events: none; opacity: .035; z-index: 10;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

.site-header {
  width: min(1180px, calc(100% - 40px));
  height: 84px;
  margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--line);
  position: relative; z-index: 20;
}
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; font-family:"Space Grotesk"; font-weight:700; letter-spacing:-.02em; }
.brand img { width:42px; height:42px; object-fit:cover; border-radius:50%; border:1px solid rgba(255,255,255,.2); box-shadow:0 6px 16px rgba(0,0,0,.25); }
.main-nav { display:flex; align-items:center; gap:24px; font-size:14px; }
.main-nav a { text-decoration:none; color:var(--muted); transition:.2s ease; }
.main-nav a:hover { color:var(--text); }
.coffee-link { padding:10px 14px; border:1px solid var(--line); border-radius:999px; }
.icon-link svg { width:22px; height:22px; fill:currentColor; display:block; }

main, footer { width:min(1180px, calc(100% - 40px)); margin-inline:auto; }
.hero { min-height:760px; display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:68px; padding:84px 0 92px; }
.eyebrow { text-transform:uppercase; letter-spacing:.16em; font-size:12px; font-weight:700; color:var(--muted); display:flex; align-items:center; gap:10px; margin:0 0 24px; }
.eyebrow span { width:28px; height:1px; background:var(--accent); display:inline-block; }
h1,h2,h3 { font-family:"Space Grotesk", sans-serif; margin:0; letter-spacing:-.045em; }
h1 { font-size:clamp(3.4rem, 6vw, 6.3rem); line-height:.94; font-weight:600; max-width:780px; }
h1 em { color:var(--accent-2); font-style:normal; }
.hero-text { color:#c4c6c8; font-size:18px; line-height:1.7; max-width:620px; margin:34px 0; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:48px; padding:0 18px; border-radius:12px; text-decoration:none; font-weight:700; font-size:14px; transition:.2s ease; }
.button-primary { color:#131313; background:linear-gradient(135deg,var(--accent-2),var(--accent)); box-shadow:0 10px 30px rgba(255,122,26,.18); }
.button-primary:hover { transform:translateY(-2px); box-shadow:0 14px 38px rgba(255,122,26,.27); }
.button-ghost { border:1px solid var(--line); color:#d5d7d9; }
.button-ghost:hover { background:rgba(255,255,255,.04); }

.hero-portrait { position:relative; min-height:520px; display:grid; place-items:center; }
.portrait-card { width:min(390px,80vw); aspect-ratio:1/1; border-radius:38% 62% 58% 42% / 45% 38% 62% 55%; padding:10px; background:linear-gradient(145deg,rgba(255,191,71,.95),rgba(255,122,26,.28)); box-shadow:var(--shadow); transform:rotate(2deg); }
.portrait-card img { width:100%; height:100%; object-fit:cover; border-radius:inherit; display:block; filter:saturate(1.05) contrast(1.03); }
.orbit { position:absolute; border:1px solid rgba(255,255,255,.1); border-radius:50%; }
.orbit-one { width:470px; height:470px; animation:spin 24s linear infinite; }
.orbit-two { width:540px; height:400px; transform:rotate(-22deg); border-color:rgba(255,122,26,.18); animation:spinReverse 28s linear infinite; }
.orbit-one::after, .orbit-two::after { content:""; position:absolute; width:8px; height:8px; border-radius:50%; background:var(--accent-2); top:10%; left:18%; box-shadow:0 0 22px rgba(255,191,71,.8); }
.floating-tag { position:absolute; width:54px; height:54px; border:1px solid rgba(255,255,255,.14); background:rgba(24,27,30,.86); backdrop-filter:blur(12px); border-radius:16px; display:grid; place-items:center; box-shadow:0 12px 28px rgba(0,0,0,.25); font:700 18px "Space Grotesk"; }
.tag-code { top:9%; right:5%; color:var(--accent-2); }
.tag-music { left:2%; bottom:23%; color:var(--green); }
.tag-shape { right:7%; bottom:8%; color:#f0b7ff; }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes spinReverse { from{transform:rotate(-22deg)} to{transform:rotate(-382deg)} }

.projects-section { padding:40px 0 120px; }
.section-heading { display:grid; grid-template-columns:1fr 1fr; gap:18px 70px; align-items:end; margin-bottom:46px; }
.section-heading .eyebrow { grid-column:1/-1; margin-bottom:0; }
h2 { font-size:clamp(2.6rem,5vw,5rem); line-height:1; }
.section-heading > p:last-child { margin:0; color:var(--muted); font-size:17px; line-height:1.65; max-width:500px; justify-self:end; }
.projects-grid { display:grid; gap:28px; }
.project-card { display:grid; grid-template-columns:1.08fr .92fr; min-height:500px; background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.025)); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:0 1px 0 rgba(255,255,255,.02) inset; }
.project-card:nth-child(even) .project-preview { order:2; }
.project-card:nth-child(even) .project-body { order:1; }
.project-preview { min-height:500px; position:relative; overflow:hidden; text-decoration:none; border-right:1px solid var(--line); background:#17191b; }
.project-card:nth-child(even) .project-preview { border-right:0; border-left:1px solid var(--line); }
.project-preview::after { content:"Open ↗"; position:absolute; right:20px; bottom:18px; padding:9px 12px; border-radius:999px; background:rgba(13,15,16,.82); border:1px solid rgba(255,255,255,.12); color:white; font-size:12px; font-weight:700; opacity:0; transform:translateY(8px); transition:.25s ease; }
.project-sonarcan .project-preview::after { content:"Download ↗"; }
.project-preview:hover::after { opacity:1; transform:none; }
.browser-bar { height:42px; display:flex; align-items:center; gap:7px; padding:0 14px; background:rgba(10,11,12,.7); border-bottom:1px solid rgba(255,255,255,.08); }
.browser-bar span { width:8px; height:8px; border-radius:50%; background:#4a4e52; }
.browser-bar small { margin-left:8px; color:#777d82; font:600 10px "Space Grotesk"; letter-spacing:.06em; }
.project-body { padding:48px; display:flex; flex-direction:column; justify-content:center; }
.project-meta { display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; }
.project-number { color:var(--accent-2); font:700 12px "Space Grotesk"; }
.project-kind { font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.11em; }
.project-body h3 { font-size:clamp(2.3rem,4vw,4rem); line-height:1; margin-bottom:20px; }
.project-body p { color:#b9bdc0; line-height:1.75; margin:0 0 26px; font-size:16px; }
.project-body strong { color:#f7f3ea; }
.tags { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:34px; }
.tags span { border:1px solid var(--line); color:#aeb2b6; padding:7px 10px; border-radius:999px; font-size:11px; text-transform:uppercase; letter-spacing:.08em; }
.project-links { display:flex; gap:22px; align-items:center; margin-top:auto; }
.project-links a { font-size:14px; font-weight:700; text-decoration:none; color:#f5f1e8; border-bottom:1px solid rgba(255,255,255,.2); padding-bottom:3px; }
.project-links a:last-child { color:var(--muted); font-weight:600; }

/* Battrochtek preview */
.drum-ui { height:calc(100% - 42px); padding:32px; background:radial-gradient(circle at 80% 0,#40200d 0,transparent 38%),#0d1117; }
.drum-topline { display:flex; gap:12px; align-items:center; font:600 10px "Space Grotesk"; color:#77818b; }
.drum-topline b { color:#ff9e24; font-size:15px; margin-right:auto; }
.drum-topline span { border:1px solid #29313b; padding:7px 9px; border-radius:8px; }
.drum-controls { height:78px; display:flex; align-items:flex-end; gap:12px; margin:28px 0 26px; }
.drum-controls i { width:42px; height:var(--v); background:linear-gradient(#ffbf47,#ff5c35); border-radius:7px 7px 3px 3px; box-shadow:0 8px 24px rgba(255,110,33,.12); }
.drum-grid { display:grid; grid-template-columns:repeat(16,1fr); grid-template-rows:repeat(7,1fr); gap:5px; height:208px; }
.drum-grid::before { content:""; grid-column:1/-1; grid-row:1/-1; border-radius:10px; background-color:#141b22; background-image:linear-gradient(rgba(255,255,255,.065) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.065) 1px,transparent 1px),radial-gradient(circle at 5.8% 8%,#ffb31a 0 4px,transparent 5px),radial-gradient(circle at 24% 22%,#ff6f2e 0 4px,transparent 5px),radial-gradient(circle at 50% 50%,#f84767 0 4px,transparent 5px),radial-gradient(circle at 74% 36%,#ffb31a 0 4px,transparent 5px),radial-gradient(circle at 92% 78%,#f84767 0 4px,transparent 5px); background-size:25% 14.28%,6.25% 100%,100% 100%,100% 100%,100% 100%,100% 100%,100% 100%; }
.drum-footer { display:flex; justify-content:space-between; margin-top:18px; font:600 9px "Space Grotesk"; color:#68727d; }
.drum-footer span:first-child { color:#9be36d; }

/* Z5omes preview */
.zome-ui { height:calc(100% - 42px); display:grid; grid-template-columns:1fr 150px; background:linear-gradient(135deg,#e9eef4,#cbd4df); color:#1f2933; }
.zome-canvas { position:relative; display:grid; place-items:center; overflow:hidden; background-image:linear-gradient(rgba(36,52,68,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(36,52,68,.08) 1px,transparent 1px); background-size:28px 28px; }
.zome-canvas::after { content:""; position:absolute; width:220px; height:26px; border-radius:50%; background:rgba(30,42,55,.16); filter:blur(10px); transform:translateY(120px); }
.zome-shape { position:relative; width:220px; height:220px; transform:rotate(10deg); }
.zome-shape::before,.zome-shape::after { content:""; position:absolute; inset:22%; border:2px solid #256b80; transform:rotate(45deg); box-shadow:0 0 0 24px rgba(81,169,182,.08),0 0 0 48px rgba(81,169,182,.06); }
.zome-shape::after { inset:2%; border-color:#58aeb9; transform:rotate(22.5deg); }
.zome-shape i { position:absolute; left:50%; top:50%; width:2px; height:108px; transform-origin:bottom center; background:linear-gradient(#1b667d,#7fcad0); }
.zome-shape i:nth-child(1){transform:translate(-50%,-100%) rotate(0deg)} .zome-shape i:nth-child(2){transform:translate(-50%,-100%) rotate(45deg)} .zome-shape i:nth-child(3){transform:translate(-50%,-100%) rotate(90deg)} .zome-shape i:nth-child(4){transform:translate(-50%,-100%) rotate(135deg)} .zome-shape i:nth-child(5){transform:translate(-50%,-100%) rotate(180deg)} .zome-shape i:nth-child(6){transform:translate(-50%,-100%) rotate(225deg)} .zome-shape i:nth-child(7){transform:translate(-50%,-100%) rotate(270deg)} .zome-shape i:nth-child(8){transform:translate(-50%,-100%) rotate(315deg)}
.zome-panel { background:rgba(250,252,253,.82); border-left:1px solid rgba(32,52,68,.12); padding:24px 18px; display:flex; flex-direction:column; gap:15px; font:600 10px "Space Grotesk"; }
.zome-panel b { font-size:15px; color:#0d556d; margin-bottom:8px; }
.zome-panel span { border-bottom:1px solid rgba(0,0,0,.1); padding-bottom:8px; }
.zome-panel button { margin-top:auto; border:0; background:#1a687e; color:white; border-radius:8px; padding:10px; font:700 9px "Space Grotesk"; }

/* Chords preview */
.chords-ui { height:calc(100% - 42px); padding:30px; background:linear-gradient(150deg,#fffdf8,#efe8dc); color:#27231f; }
.chords-title { display:flex; align-items:center; gap:9px; font-family:"Space Grotesk"; }
.chords-title > span { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background:#222; color:#ffe6a8; }
.chords-title b { font-size:14px; letter-spacing:.03em; }
.chords-title small { margin-left:auto; color:#9a8f81; }
.search-mock { margin:30px 0 18px; background:white; border:1px solid #ded7cc; border-radius:12px; padding:12px 14px; color:#aaa094; font-size:11px; display:flex; justify-content:space-between; box-shadow:0 8px 20px rgba(82,65,43,.06); }
.chart-list { display:grid; gap:9px; }
.chart-list div { background:rgba(255,255,255,.78); border:1px solid #e6dfd5; min-height:56px; border-radius:12px; display:grid; grid-template-columns:1fr 70px 34px; align-items:center; gap:8px; padding:0 15px; box-shadow:0 6px 14px rgba(82,65,43,.045); }
.chart-list b { font:600 12px "Space Grotesk"; }
.chart-list span { color:#998a78; font-size:10px; }
.chart-list em { font-style:normal; width:30px; height:30px; display:grid; place-items:center; background:#2f2b27; color:#fff0c8; border-radius:8px; font-size:9px; }

.support { margin:0 0 90px; padding:54px; border:1px solid var(--line); border-radius:var(--radius); display:grid; grid-template-columns:1fr auto; align-items:center; gap:50px; background:linear-gradient(125deg,rgba(255,122,26,.1),rgba(255,191,71,.03) 46%,rgba(255,255,255,.02)); }
.support h2 { font-size:clamp(2.2rem,4vw,4rem); margin-bottom:16px; }
.support p:last-child { color:#b4b8bb; max-width:650px; line-height:1.65; margin:0; }
.coffee-card { min-width:300px; padding:16px 18px; display:flex; align-items:center; gap:14px; border-radius:16px; color:#18130e; text-decoration:none; background:linear-gradient(135deg,#ffd47b,#ff8a2b); box-shadow:0 18px 42px rgba(255,122,26,.18); transition:.2s ease; }
.coffee-card:hover { transform:translateY(-3px) rotate(-.5deg); }
.coffee-emoji { font-size:28px; }
.coffee-card > span:nth-child(2) { display:flex; flex-direction:column; }
.coffee-card small { font-size:10px; text-transform:uppercase; letter-spacing:.1em; opacity:.6; }
.coffee-card strong { font:700 17px "Space Grotesk"; }
.coffee-card b { margin-left:auto; }

footer { border-top:1px solid var(--line); min-height:100px; display:flex; align-items:center; justify-content:space-between; color:#747a7f; font-size:12px; }
.reveal { opacity:0; transform:translateY(22px); transition:opacity .65s ease,transform .65s cubic-bezier(.2,.7,.2,1); }
.reveal.is-visible { opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none !important; transition:none !important; }
  .reveal { opacity:1; transform:none; }
}

@media (max-width: 900px) {
  .main-nav { max-width:calc(100% - 175px); overflow-x:auto; scrollbar-width:none; }
  .main-nav::-webkit-scrollbar { display:none; }
  .main-nav a:not(.coffee-link):not(.icon-link) { white-space:nowrap; }
  .hero { grid-template-columns:1fr; padding-top:64px; gap:30px; }
  .hero-portrait { min-height:420px; }
  .section-heading { grid-template-columns:1fr; }
  .section-heading > p:last-child { justify-self:start; }
  .project-card { grid-template-columns:1fr; }
  .project-card:nth-child(even) .project-preview, .project-card:nth-child(even) .project-body { order:initial; }
  .project-preview, .project-card:nth-child(even) .project-preview { min-height:420px; border:0; border-bottom:1px solid var(--line); }
  .support { grid-template-columns:1fr; }
}

@media (max-width: 620px) {
  .site-header, main, footer { width:min(100% - 28px,1180px); }
  .site-header { height:72px; }
  .main-nav > a:first-child { display:none; }
  .coffee-link { font-size:0; width:42px; height:42px; display:grid; place-items:center; padding:0; }
  .coffee-link span { font-size:18px; }
  .hero { min-height:auto; padding:58px 0 72px; }
  h1 { font-size:clamp(3rem,15vw,4.8rem); }
  .hero-text { font-size:16px; }
  .hero-portrait { min-height:330px; }
  .portrait-card { width:260px; }
  .orbit-one { width:310px; height:310px; }
  .orbit-two { width:330px; height:250px; }
  .floating-tag { width:44px; height:44px; border-radius:13px; font-size:15px; }
  .projects-section { padding-bottom:80px; }
  .project-preview { min-height:340px; }
  .project-body { padding:30px 24px 34px; }
  .project-links { gap:14px; flex-wrap:wrap; }
  .drum-ui, .chords-ui { padding:20px; }
  .drum-grid { height:160px; }
  .zome-ui { grid-template-columns:1fr 112px; }
  .zome-panel { padding:18px 12px; }
  .support { padding:34px 24px; }
  .coffee-card { min-width:0; width:100%; }
  footer { padding:28px 0; flex-direction:column; gap:8px; align-items:flex-start; }
}

/* Real project screenshots */
.screenshot-preview { display:block; background:#0d1014; }
.screenshot-preview img { width:100%; height:100%; min-height:500px; display:block; object-fit:cover; object-position:center; transition:transform .45s cubic-bezier(.2,.7,.2,1); }
.project-sonarcan .screenshot-preview img { object-fit:contain; background:#070d11; }
.screenshot-preview:hover img { transform:scale(1.015); }
.project-meta { justify-content:flex-start; }
.project-card { scroll-margin-top:28px; }
@media (max-width: 900px) { .screenshot-preview img { min-height:420px; } }
@media (max-width: 620px) {
  .main-nav { gap:10px; max-width:72%; }
  .main-nav > a:first-child { display:block; }
  .main-nav a:not(.coffee-link):not(.icon-link) { white-space:nowrap; font-size:11px; }
  .screenshot-preview img { min-height:340px; }
}