:root{
  --fg:#0a0a0a; --muted:#6f6f73; --line:#e9e9ec;
  --fade:2000ms;
  --btn-hover-bg: rgba(127,127,127,.08);
  --btn-hover-shadow: 0 6px 18px rgba(0,0,0,.08);
}

/* LIGHT gradient (ivory -> warm white) */
body::before{
  content:""; position:fixed; inset:0; z-index:-2;
  background: linear-gradient(180deg, #fefcf9 0%, #ffffff 100%);
  opacity:1; transition: opacity .6s ease;
}
/* DARK gradient (graphite -> deep charcoal) */
body::after{
  content:""; position:fixed; inset:0; z-index:-2;
  background: linear-gradient(180deg, #1a1a1c 0%, #0b0b0d 100%);
  opacity:0; transition: opacity .6s ease;
}

/* System dark preference */
@media (prefers-color-scheme: dark){
  :root{ --fg:#f5f5f7; --muted:#b6b6bb; --line:#2a2a2e; }
  body::before{ opacity:0 }
  body::after{ opacity:1 }
}

/* Manual theme */
html[data-theme="light"]{ --fg:#0a0a0a; --muted:#6f6f73; --line:#e9e9ec; }
html[data-theme="dark"]{ --fg:#f5f5f7; --muted:#b6b6bb; --line:#2a2a2e; }
html[data-theme="light"] body::before{ opacity:1 }
html[data-theme="light"] body::after{ opacity:0 }
html[data-theme="dark"] body::before{ opacity:0 }
html[data-theme="dark"] body::after{ opacity:1 }

@font-face{
  font-family:'FuturaDemiC';
  src: url('fonts/FuturaDemiC.woff2') format('woff2'),
       url('fonts/FuturaDemiC.woff') format('woff');
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'FuturaDemiC';
  src: url('fonts/FuturaDemiC.woff2') format('woff2'),
       url('fonts/FuturaDemiC.woff') format('woff');
  font-weight:700; font-style:normal; font-display:swap;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0}
html{color:var(--fg); overflow-y:auto}
body{
  font-family:'FuturaDemiC','Futura PT',Montserrat,'Avenir Next','Segoe UI',Inter,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  letter-spacing:.01em;
  overflow:hidden;
}
@media (max-height:520px){ body{ overflow:auto } }
a{color:inherit}

/* Intro overlay */
.intro{
  position: fixed; inset: 0; z-index: 999;
  display: grid; place-items: center;
  background: var(--intro-bg, #ffffff);
  transition: opacity .8s ease, visibility .8s ease;
}
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]) .intro{ --intro-bg: #0b0b0d; }
}
html[data-theme="dark"] .intro{ --intro-bg: #0b0b0d; }
html[data-theme="light"] .intro{ --intro-bg: #ffffff; }

.intro__word{
  font-weight:700;
  font-size: clamp(32px, 8vw, 72px);
  letter-spacing: -0.02em;
  color: var(--fg);
  opacity: 0.2;
  animation: breathePause 6s cubic-bezier(.4,0,.2,1) 1 forwards;
  will-change: opacity;
}
/* Breath with full fade-out in middle */
@keyframes breathePause{
  0%   { opacity: .2 }
  20%  { opacity: 1 }
  45%  { opacity: 0 }
  70%  { opacity: 1 }
  100% { opacity: 0 }
}

@media (prefers-reduced-motion: reduce){
  .intro{ display:none }
}
.intro--done{ opacity:0; visibility:hidden; }

.wrap{
  min-height:100%;display:grid;grid-template-rows:auto 1fr auto;
  opacity:0; transform:translateY(1px);
  animation:fadeIn var(--fade) ease forwards;
}
@media (prefers-reduced-motion:reduce){.wrap{animation:none;opacity:1;transform:none}}

header,footer{padding:24px 24px}
main{padding:48px 24px 64px}

.top{
  max-width:1120px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.right{display:flex;align-items:center;gap:10px}

.lang{display:inline-flex;gap:10px}
.lang a{
  font:inherit;font-size:13px;text-decoration:none;
  border:1px solid var(--line); padding:8px 12px; border-radius:999px;
  transition:border-color .16s ease, transform .1s ease, background-color .18s ease, box-shadow .25s ease, opacity .16s ease;
  opacity:.92;
}
@media (hover:hover) and (pointer:fine){
  .lang a:hover{ background-color: var(--btn-hover-bg); box-shadow: var(--btn-hover-shadow); opacity:1; }
}
@media (hover:none) and (pointer:coarse){
  .lang a:active{ background-color: var(--btn-hover-bg); opacity:1; }
}
.lang a:active{ transform:translateY(1px) }

.theme-toggle{
  appearance:none; border:1px solid var(--line); background:transparent; color:var(--fg);
  width:36px; height:36px; border-radius:999px; display:grid; place-items:center;
  cursor:pointer; opacity:.92;
  transition: background-color .18s ease, box-shadow .25s ease, transform .1s ease, opacity .16s ease;
}
@media (hover:hover) and (pointer:fine){
  .theme-toggle:hover{ background-color: var(--btn-hover-bg); box-shadow: var(--btn-hover-shadow); opacity: 1; }
}
@media (hover:none) and (pointer:coarse){
  .theme-toggle:active{ background-color: var(--btn-hover-bg); opacity:1; }
}
.theme-toggle:active{ transform:translateY(1px) }
.theme-toggle[aria-pressed="true"]{ background-color:rgba(127,127,127,.10); opacity:1 }
.theme-toggle svg{ width:18px; height:18px; display:block }

.icon-sun, .icon-moon{ transition:opacity .2s ease, transform .2s ease }
.icon-sun{ opacity:1; transform:scale(1)}
.icon-moon{ opacity:0; transform:scale(.85)}
html[data-theme="dark"] .icon-sun{ opacity:0; transform:scale(.85)}
html[data-theme="dark"] .icon-moon{ opacity:1; transform:scale(1)}

.container{
  max-width:880px;margin:0 auto;position:relative;display:grid;place-items:center;text-align:center;
}
.brand{font-weight:700;letter-spacing:-.01em;line-height:1.05;font-size:clamp(30px,6.2vw,56px);margin:40px 0 14px}
.tagline{
  font-weight:600;color:var(--muted);line-height:1.5;font-size:clamp(16px,2.6vw,20px);margin:8px 0 26px;white-space:pre-line;
  animation: breathe 6s ease-in-out infinite;
}
@media (prefers-reduced-motion:reduce){.tagline{animation:none}}
.divider{height:1px;width:100%;margin:32px auto 18px;background:linear-gradient(90deg,rgba(0,0,0,0)0%,var(--line)14%,var(--line)86%,rgba(0,0,0,0)100%)}
.follow{font-weight:600;font-size:14px;color:var(--muted);margin:0 0 8px;letter-spacing:.005em}
footer small{font-weight:600;font-size:12px;color:var(--muted);display:block;text-align:center;letter-spacing:.02em}

.reveal{opacity:0;transform:translateY(6px);animation:fadeUp var(--fade) ease forwards}
.brand.reveal{animation-delay:120ms}
.tagline.reveal{animation-delay:260ms}
.divider.reveal{animation-delay:420ms}
.follow.reveal{animation-delay:540ms}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;animation:none}}

@keyframes fadeIn{from{opacity:0;transform:translateY(2px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes breathe{0%,100%{opacity:0.985}50%{opacity:1}}