/* Lunax – "moon over the Baltic at dusk".
   One bold thing: the moon in the hero, which shows the finished sites. Everything else stays calm. */
:root {
  --night: #1C2447;      /* deep evening sky: header, hero, text */
  --dusk: #3B4C8A;       /* sky near the horizon */
  --sea: #2C6E86;        /* Baltic blue-green: links, small accents */
  --moon: #F2D27A;       /* soft moonlight: the one bright colour */
  --mist: #E8EDF1;       /* page background: sea mist, cool not cream */
  --white: #FFFFFF;
  --ink: #1C2447;
  --ink-soft: #4A5677;
  --line: #CDD6E0;
  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --body: "Atkinson Hyperlegible", system-ui, sans-serif;
  --gutter: clamp(16px, 4vw, 48px);
  --max: 1160px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--mist); color: var(--ink); font: 400 1.0625rem/1.6 var(--body); }
img { max-width: 100%; display: block; }
a { color: var(--sea); }
:focus-visible { outline: 3px solid var(--moon); outline-offset: 3px; border-radius: 4px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--moon); color: var(--night); padding: 8px 14px; z-index: 10; }
.skip:focus { left: 8px; }

/* Header */
.top { background: var(--night); color: var(--white); display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--gutter); }
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--white); text-decoration: none;
  font: 800 1.45rem/1 var(--display); letter-spacing: -.02em; }
.logo svg { width: 34px; height: 34px; }
.langs { display: flex; gap: 4px; }
.langs button { background: transparent; color: #C9D1EA; border: 1px solid transparent; border-radius: 999px;
  font: 700 .85rem/1 var(--body); padding: 8px 12px; cursor: pointer; }
.langs button:hover { color: var(--white); }
.langs button[aria-pressed="true"] { color: var(--night); background: var(--moon); }

/* Hero */
.hero { position: relative; background: linear-gradient(180deg, var(--night) 0%, var(--night) 45%, var(--dusk) 100%); color: var(--white);
  display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 32px;
  padding: clamp(40px, 7vw, 96px) var(--gutter) 0; overflow: hidden; }
.hero-text { max-width: 36rem; padding-bottom: clamp(40px, 7vw, 96px); }
.hero h1 { font: 800 clamp(2.4rem, 1.4rem + 4.2vw, 4.6rem)/1.02 var(--display); letter-spacing: -.035em; margin: 0 0 22px;
  font-variation-settings: "opsz" 96; }
.lead { color: #D5DBEF; font-size: 1.15rem; margin: 0 0 30px; max-width: 34rem; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.btn { display: inline-flex; align-items: center; min-height: 50px; padding: 0 24px; border-radius: 999px;
  font: 700 1rem/1 var(--body); text-decoration: none; border: 2px solid transparent; }
.btn-moon { background: var(--moon); color: var(--night); }
.btn-moon:hover { background: #F7DE97; }
.btn-line { color: var(--white); border-color: rgba(255,255,255,.45); }
.btn-line:hover { border-color: var(--white); }
.btn-small { min-height: 44px; padding: 0 20px; background: var(--night); color: var(--white); }
.btn-small:hover { background: var(--dusk); }

/* The moon: a round window onto the finished sites, rising over the sea */
.moon-wrap { position: relative; z-index: 1; align-self: end; height: clamp(320px, 40vw, 500px); }
.hero-text { position: relative; z-index: 1; }
.moon { position: absolute; left: 50%; bottom: clamp(40px, 5vw, 70px); width: min(100%, 420px); aspect-ratio: 1; transform: translateX(-50%);
  border-radius: 50%; overflow: hidden; background: var(--moon);
  box-shadow: 0 0 0 10px rgba(242,210,122,.18), 0 0 90px 30px rgba(242,210,122,.28);
  animation: rise 1.6s cubic-bezier(.2,.8,.2,1) both; }
.moon img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 84% 42%; transform: scale(1.35); transform-origin: 84% 50%;
  opacity: 0; transition: opacity 1.2s ease; filter: saturate(1.05); }
.moon img.on { opacity: 1; }
.moon::after { content: ""; position: absolute; inset: 0; border-radius: 50%;
  box-shadow: inset -18px -24px 60px rgba(28,36,71,.35), inset 10px 12px 30px rgba(255,255,255,.25); }
.sea { position: absolute; left: 0; right: 0; bottom: 0; height: clamp(54px, 7vw, 92px); z-index: 0; background: var(--sea);
  background: linear-gradient(180deg, #2C6E86 0%, #234F6B 100%); }
.sea::before { content: ""; position: absolute; left: var(--glint, 72%); top: 0; width: 120px; height: 100%; transform: translateX(-50%);
  background: repeating-linear-gradient(180deg, rgba(242,210,122,.55) 0 3px, transparent 3px 12px); filter: blur(.4px); }
@keyframes rise { from { transform: translate(-50%, 40%); opacity: 0; } to { transform: translateX(-50%); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .moon { animation: none; } .moon img { transition: none; } }

/* Work, one section per template */
#work { max-width: var(--max); margin: 0 auto; padding: clamp(48px, 7vw, 88px) var(--gutter) 0; }
.tmpl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 20px 56px; }
.tmpl + .tmpl { margin-top: 80px; padding-top: 56px; border-top: 1px solid var(--line); }
.tmpl-side { position: sticky; top: 24px; align-self: start; display: grid; gap: 22px; }
.tmpl-side h2 { font: 800 clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem)/1.05 var(--display); letter-spacing: -.03em; margin: 0; }
.tmpl-lead { color: var(--ink-soft); margin: 0; max-width: 30rem; }
.tmpl-features { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; align-content: start; }
.tmpl-features li { padding-left: 26px; position: relative; }
.tmpl-features li::before { content: ""; position: absolute; left: 0; top: .5em; width: 12px; height: 12px; border-radius: 50%;
  background: var(--moon); box-shadow: inset -4px -2px 0 rgba(28,36,71,.25); }
.projects { display: grid; gap: 48px; }
.try { background: var(--white); border-radius: 14px; padding: 14px 18px; border: 1px solid var(--line); }
.try summary { cursor: pointer; font-weight: 700; color: var(--night); }
.try p { color: var(--ink-soft); margin: 10px 0; font-size: .95rem; }
.try dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; font-size: .95rem; }
.try dt { color: var(--ink-soft); }
.try dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; user-select: all; }

/* A project: the site in a browser window, text beside */
.project { display: grid; gap: 18px; }
.shot { display: block; border-radius: 12px; overflow: hidden; background: var(--white); color: inherit; text-decoration: none;
  box-shadow: 0 1px 0 var(--line), 0 24px 50px -28px rgba(28,36,71,.55); }
a.shot:hover img { transform: scale(1.015); }
.shot img { transition: transform .4s ease; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; width: 100%; height: auto; }
.bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; background: #DDE3EA; }
.bar i { width: 10px; height: 10px; border-radius: 50%; background: #B9C3CF; }
.addr { margin-left: 10px; flex: 1; background: var(--white); border-radius: 6px; padding: 3px 10px; font-size: .8rem; color: var(--ink-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.project-text { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 20px; }
.project-text h3 { margin: 0; font: 700 1.4rem/1.2 var(--display); letter-spacing: -.02em; grid-column: 1; }
.place { margin: 0; color: var(--sea); font-weight: 700; grid-column: 1; }
.ptext { margin: 6px 0 0; color: var(--ink-soft); grid-column: 1; }
.project-links { grid-column: 2; grid-row: 1 / span 3; display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.project-links .btn { justify-content: center; }
.btn-admin { background: transparent; color: var(--night); border-color: var(--night); }
.btn-admin:hover { background: var(--night); color: var(--white); }
.demo-note { grid-column: 1 / -1; margin: 14px 0 0; padding: 12px 16px; border-left: 3px solid var(--sea); background: var(--white); border-radius: 0 8px 8px 0; color: var(--ink-soft); font-size: .94rem; }
.soon { color: var(--ink-soft); font-weight: 700; }
.badge[hidden] { display: none; }
.badge { display: inline-block; vertical-align: middle; font: 700 .75rem/1 var(--body); color: var(--night); background: var(--moon);
  border-radius: 999px; padding: 5px 10px; margin-left: 6px; }

/* Steps: a real sequence, so numbered */
.steps { max-width: var(--max); margin: 0 auto; padding: clamp(64px, 9vw, 112px) var(--gutter) 0; }
.steps h2, .contact h2 { font: 800 clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem)/1.05 var(--display); letter-spacing: -.03em; margin: 0 0 28px; }
.steps ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px;
  counter-reset: s; }
.steps li { counter-increment: s; display: grid; gap: 6px; padding-top: 18px; border-top: 3px solid var(--night); }
.steps li::before { content: counter(s); font: 800 2.2rem/1 var(--display); color: var(--dusk); }
.steps strong { font: 700 1.15rem/1.25 var(--display); }
.steps span { color: var(--ink-soft); }

/* Contact */
.contact { max-width: var(--max); margin: clamp(64px, 9vw, 112px) auto 0; padding: clamp(40px, 6vw, 72px) var(--gutter);
  background: var(--night); color: var(--white); border-radius: 0; }
.contact p { color: #D5DBEF; max-width: 34rem; margin: 0 0 24px; }
.contact .btn { overflow-wrap: anywhere; }
@media (min-width: 1160px) { .contact { border-radius: 24px; } }

.foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; max-width: var(--max); margin: 0 auto;
  padding: 28px var(--gutter) 40px; color: var(--ink-soft); font-size: .9rem; }

/* Narrow screens */
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; }
  .hero-text { padding-bottom: 0; }
  .moon-wrap { height: 290px; }
  .sea::before { --glint: 50%; left: 50%; }
  .moon { width: 240px; }
  .tmpl { grid-template-columns: 1fr; }
  .tmpl-side { position: static; }
  .steps ol { grid-template-columns: 1fr 1fr; }
  .project-text { grid-template-columns: 1fr; }
  .project-links { grid-column: 1; grid-row: auto; margin-top: 12px; justify-self: start; flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 520px) { .steps ol { grid-template-columns: 1fr; } }
/* Reference direction: obsidian, brushed silver, crimson and warm gold. */
:root{--night:#080a0b;--dusk:#262323;--sea:#d9b16d;--moon:#e9bb72;--mist:#090c0e;--white:#fff;--ink:#f4f3ef;--ink-soft:#b4b7ba;--line:#303538;--max:1320px;--display:"Bricolage Grotesque",system-ui,sans-serif}
body{background:radial-gradient(ellipse at 90% 35%,#17120e 0,transparent 38%),#090c0e}
.top{border-bottom:1px solid #59412a;padding-block:20px;gap:24px}
.logo{position:relative;isolation:isolate;min-width:160px}
.wordmark{font:800 2rem/1 var(--display);letter-spacing:.03em;background:linear-gradient(#fff 12%,#a7aaac 46%,#fff 49%,#64686c 90%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 0 #202020)}
.wordmark span{color:#d7241e;text-shadow:0 1px #f4c176}
.brand-orbit{position:absolute;width:47px;height:47px;right:4px;top:-9px;border-right:3px solid #f0c280;border-radius:50%;transform:rotate(-22deg);box-shadow:5px 0 10px -5px #f1ad4f;z-index:-1}
.main-nav{display:flex;gap:28px}.main-nav a{color:#e9e9e7;text-decoration:none;font-size:.9rem}.main-nav a:hover{color:var(--moon)}
.langs button{border-radius:4px}.langs button[aria-pressed="true"]{background:#291414;color:#fff;border-color:#ad3026}
.hero{display:block;padding:64px var(--gutter) 64px;background:linear-gradient(90deg,rgba(5,7,8,.12),rgba(5,7,8,.05)),url('img/lunar-studio.png') center top/cover no-repeat;border-bottom:1px solid var(--line)}
.hero-text{max-width:850px;margin:0 auto 40px;padding:0;text-align:center}.hero h1{font-size:clamp(2.5rem,5.4vw,5.2rem);text-wrap:balance;max-width:1000px}.lead{margin:0 auto 28px;max-width:680px;color:#c5c7c9}.actions{justify-content:center}
.eyebrow{font:700 .78rem/1.5 var(--body);letter-spacing:.2em;color:var(--moon);text-transform:uppercase;margin:0 0 20px}
.btn{border-radius:4px}.btn-moon,.btn-small{background:linear-gradient(#c81912,#870c09);color:white;border:1px solid #df6f32;box-shadow:inset 0 0 0 1px #ffffff0d}.btn-moon:hover,.btn-small:hover{background:#d5251a}.btn-line{border:1px solid #c6a060;background:#080a0b99}.btn-admin{border-color:#ae8a51;background:transparent;color:#f6e5c4}.btn-admin:hover{background:#30251a}
.showcase{position:relative;z-index:1;max-width:1120px;margin:0 auto;min-width:0}.preview-tabs{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-bottom:18px}.preview-tabs button{border:1px solid #55514b;color:#c5c6c7;background:#0c1013cc;border-radius:4px;padding:10px 16px;font:700 .9rem var(--body);cursor:pointer}.preview-tabs button:hover{border-color:#d3a45b;color:#fff}.preview-tabs button[aria-pressed=true]{background:#611914;border-color:#e1b271;color:white}
.preview-window{display:block;overflow:hidden;border-radius:8px;border:1px solid #83633f;background:#0a0e10;box-shadow:0 30px 80px #0009;color:inherit;text-decoration:none}.preview-window img{width:100%;height:auto;aspect-ratio:16/10;object-fit:contain;object-position:center;background:#111416}.preview-caption{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:16px 4px;color:#f5f4ef}.preview-caption a{color:#e1b77a;text-underline-offset:5px}.preview-caption strong{font:700 1.2rem var(--display)}
.bar{background:linear-gradient(#242a2e,#191e21);border-bottom:1px solid #373e43}.bar i{background:#66605a}.bar i:first-child{background:#9b3932}.bar i:nth-child(2){background:#a18749}.bar i:nth-child(3){background:#5b7b64}.addr{background:#0d1113;color:#b5b5b2;border:1px solid #353a3d}
.services{max-width:var(--max);margin:0 auto;padding:70px var(--gutter) 0}.section-heading h2{font:800 clamp(1.9rem,3vw,2.7rem)/1.15 var(--display);margin:0 0 28px}.section-heading .eyebrow{margin-bottom:10px}.service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.service-grid>a{padding:30px;border:1px solid #3b3e3c;background:linear-gradient(125deg,#181c1f,#090c0e);border-radius:6px;text-decoration:none;color:var(--ink);display:grid;align-content:start;gap:12px}.service-grid>a:hover{border-color:#b58a4c}.service-symbol{font:600 2.3rem/1 var(--display);color:var(--moon)}.service-grid h3{font:700 1.3rem var(--display);margin:8px 0 0}.service-grid p{margin:0;color:var(--ink-soft)}.service-more{color:var(--moon);margin-top:10px;font-size:.9rem}.service-more::after{content:' →'}
#work{padding-top:80px}.tmpl-side h2::after,.steps h2::after,.contact h2::after,.section-heading h2::after{content:'';display:block;height:2px;width:56px;background:linear-gradient(90deg,#d8ac63,#7b3d21);margin-top:18px}.tmpl-side{gap:18px}.tmpl-features li::before{width:9px;height:9px;background:#d6a866;box-shadow:none}.shot{border:1px solid #44423b;border-radius:6px;box-shadow:0 15px 40px #0006}.shot img{object-fit:contain;background:#15191b}a.shot:hover img{transform:none}.project-text h3{color:#fff}.place{color:#d4a968}.demo-note{background:#161b1e;border-color:#b5945e;color:#bfc1c2}.try{background:#14191c;border:1px solid #363b3c;border-radius:5px}.try summary{color:#e1bc81}.badge{background:#392c1c;color:#edc688;border-radius:3px}.project-links .btn{font-size:.9rem}.steps li{border-top-color:#a1804c}.steps li::before{color:#d9af70}.contact{background:linear-gradient(90deg,#0b0e10e8,#0b0e1099),url('img/lunar-studio.png') center 65%/cover;border:1px solid #484033;border-radius:6px}.foot{border-top:1px solid #282d30;margin-top:40px}.sea,.moon-wrap{display:none}
@media(max-width:860px){.main-nav{gap:16px}.main-nav a{font-size:.8rem}.logo{min-width:140px}.wordmark{font-size:1.7rem}.hero{padding-top:46px}.hero-text{padding-bottom:0}.showcase{width:100%}.service-grid>a{padding:22px}.preview-tabs button{padding:9px 12px;font-size:.8rem}}
@media(max-width:650px){.top{flex-wrap:wrap;gap:18px;padding-block:16px}.main-nav{order:3;width:100%;justify-content:space-between;gap:10px;border-top:1px solid #252b2d;padding-top:15px}.hero{padding-block:38px}.hero h1{font-size:2.6rem}.lead{font-size:1.05rem}.service-grid{grid-template-columns:1fr}.service-grid>a{grid-template-columns:44px 1fr;gap:6px 18px}.service-symbol{grid-row:1/4}.service-grid h3,.service-grid p,.service-more{grid-column:2}.preview-tabs{gap:6px}.preview-tabs button{flex:1 1 auto}.preview-caption{font-size:.9rem}.preview-caption strong{font-size:1rem}.preview-window .bar{padding:7px}.services{padding-top:48px}.hero-text .actions .btn{padding-inline:16px}.contact{margin-inline:16px}}
.preview-caption button{margin-left:auto;color:#c0b8ac;border:1px solid #68543d;background:#101416;padding:8px 12px;border-radius:4px;font:inherit;font-size:.8rem;cursor:pointer}.preview-caption button:hover{border-color:#e3b972;color:white}@media(max-width:520px){.preview-caption{flex-wrap:wrap;gap:12px}.preview-caption strong{flex-basis:100%}.preview-caption button{margin-left:0}}