/* NØTT studio: deep space with four accents (moon, mint, sun, coral). Dark by design, playful in motion. */
@font-face{font-family:Raleway;font-weight:200;font-display:swap;src:url(/fonts/raleway-latin-200.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Raleway;font-weight:200;font-display:swap;src:url(/fonts/raleway-latin-ext-200.woff2) format("woff2");unicode-range:U+0100-02AF,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Raleway;font-weight:200;font-display:swap;src:url(/fonts/raleway-cyrillic-200.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Raleway;font-weight:300;font-display:swap;src:url(/fonts/raleway-latin-300.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Raleway;font-weight:300;font-display:swap;src:url(/fonts/raleway-latin-ext-300.woff2) format("woff2");unicode-range:U+0100-02AF,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Raleway;font-weight:300;font-display:swap;src:url(/fonts/raleway-cyrillic-300.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Onest;font-weight:400;font-display:swap;src:url(/fonts/onest-latin-400.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Onest;font-weight:400;font-display:swap;src:url(/fonts/onest-latin-ext-400.woff2) format("woff2");unicode-range:U+0100-02AF,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Onest;font-weight:400;font-display:swap;src:url(/fonts/onest-cyrillic-400.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Onest;font-weight:500;font-display:swap;src:url(/fonts/onest-latin-500.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Onest;font-weight:500;font-display:swap;src:url(/fonts/onest-latin-ext-500.woff2) format("woff2");unicode-range:U+0100-02AF,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Onest;font-weight:500;font-display:swap;src:url(/fonts/onest-cyrillic-500.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}

@property --ang{syntax:"<angle>"; inherits:false; initial-value:0deg}
:root{
  --deep:#0A1029; --mid:#18235A; --light:#EEF2FB; --mist:#8F9AC2;
  --moon:#A9C4FF; --mint:#6FE3C8; --sun:#FFC46B; --coral:#FF7E8A;
  --line:rgba(238,242,251,.12); --edge:rgba(169,196,255,.22); --bar:#0D1535; --card:#0F1838;
  --rainbow:linear-gradient(90deg,var(--moon),var(--mint),var(--sun),var(--coral),var(--moon));
  --accent:var(--mint);
  --display:Raleway,"Helvetica Neue",Arial,sans-serif;
  --body:Onest,system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.2,.75,.2,1);
  color-scheme:dark;
}
.about{--accent:var(--mint)} .projects{--accent:var(--sun)} .contact{--accent:var(--coral)}
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip; background:var(--deep); scroll-behavior:smooth; scroll-padding-top:84px; -webkit-text-size-adjust:100%}
body{margin:0; min-height:100vh; display:flex; flex-direction:column; background:var(--deep); color:var(--light); font:17px/1.65 var(--body); overflow-x:hidden}
body > main{flex:1 0 auto; width:100%}
a{color:inherit}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--moon); outline-offset:3px; border-radius:4px}
img,svg{max-width:100%}
::selection{background:var(--coral); color:var(--deep)}
.wrap{max-width:1180px; margin:0 auto; padding-inline:max(20px, env(safe-area-inset-left))}
h1,h2,h3{font-family:var(--display); font-weight:300; line-height:1.1; margin:0; text-wrap:balance; letter-spacing:.005em}
h1{font-weight:200; font-size:clamp(40px,7vw,84px)}
h2{font-size:clamp(28px,4vw,44px)}
h3{font-size:24px}
p{margin:0}
.label{display:inline-flex; align-items:center; gap:10px; font-size:12px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); margin-bottom:18px}
.lead{color:var(--mist); font-size:19px; max-width:52ch}
.muted{color:var(--mist)}
h1 em{font-style:normal; background:var(--rainbow); background-size:200% auto; -webkit-background-clip:text; background-clip:text; color:transparent; animation:shine 7s linear infinite}
@keyframes shine{to{background-position:200% center}}

/* background: drifting colour clouds + twinkling stars */
.aurora{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.aurora i{position:absolute; width:62vmax; height:62vmax; border-radius:50%; animation:drift 26s ease-in-out infinite alternate}
.aurora i:nth-child(1){background:radial-gradient(circle, rgba(169,196,255,.16), transparent 62%); top:-28vmax; right:-18vmax}
.aurora i:nth-child(2){background:radial-gradient(circle, rgba(111,227,200,.11), transparent 62%); top:30vh; left:-30vmax; animation-duration:32s; animation-delay:-8s}
.aurora i:nth-child(3){background:radial-gradient(circle, rgba(255,126,138,.09), transparent 62%); bottom:-36vmax; right:5vw; animation-duration:38s; animation-delay:-16s}
.projects .aurora i:nth-child(3){background:radial-gradient(circle, rgba(255,196,107,.09), transparent 62%)}
@keyframes drift{0%{transform:translate(0,0) scale(1)} 50%{transform:translate(6vw,4vh) scale(1.08)} 100%{transform:translate(-4vw,8vh) scale(.95)}}
.stars{position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:0}
main,header,footer{position:relative; z-index:1}

/* header */
.top{position:sticky; top:0; z-index:10; padding-top:env(safe-area-inset-top,0px); background:rgba(10,16,41,.72); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-bottom:1px solid var(--line); transition:box-shadow .3s}
.top::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:var(--rainbow); background-size:200% auto; animation:shine 10s linear infinite; opacity:.55}
.top.scrolled{box-shadow:0 10px 30px rgba(0,0,0,.35)}
.top-in{display:flex; align-items:center; gap:28px; height:68px}
.brand{display:flex; flex-shrink:0; transition:transform .4s var(--ease)}
.brand:hover{transform:rotate(-4deg) scale(1.04)}
.brand svg{height:22px; width:auto}
.top nav{display:flex; gap:28px; margin-left:auto; font-size:15px}
.top nav a{position:relative; text-decoration:none; color:var(--mist); transition:color .2s}
.top nav a:nth-child(1){--c:var(--mint)} .top nav a:nth-child(2){--c:var(--sun)} .top nav a:nth-child(3){--c:var(--coral)}
.top nav a::after{content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; border-radius:2px; background:var(--c); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease)}
.top nav a:hover,.top nav a[aria-current]{color:var(--light)}
.top nav a:hover::after,.top nav a[aria-current]::after{transform:scaleX(1)}

/* language dropdown */
.lang{position:relative; font-size:14px}
.lang summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:7px; padding:7px 12px; border:1px solid var(--line); border-radius:99px; color:var(--light); letter-spacing:.06em; user-select:none; transition:border-color .2s}
.lang summary:hover{border-color:var(--moon)}
.lang summary::-webkit-details-marker{display:none}
.lang summary svg{width:10px; height:6px; transition:transform .2s}
.lang[open] summary svg{transform:rotate(180deg)}
.lang ul{position:absolute; right:0; top:calc(100% + 8px); margin:0; padding:6px; list-style:none; min-width:84px; background:#111A40; border:1px solid var(--line); border-radius:12px; box-shadow:0 18px 40px rgba(0,0,0,.4); animation:pop .2s var(--ease)}
@keyframes pop{from{opacity:0; transform:translateY(-6px) scale(.97)}}
.lang li a{display:block; padding:9px 12px; border-radius:8px; text-decoration:none; color:var(--light)}
.lang li a:hover{background:rgba(169,196,255,.1)}
.lang li a[aria-current]{color:var(--moon)}
.lang li a[aria-current]::after{content:" ●"; font-size:9px; vertical-align:2px}

/* hero */
.hero{position:relative; padding-block:clamp(64px,10vw,140px) clamp(56px,8vw,110px)}
.hero-in{display:grid}
.hero-text{display:grid; gap:22px; min-width:0}
.hero-text .label{margin:0}
.hero .lead{font-size:21px; max-width:60ch}
.hero h1{font-size:clamp(36px,6vw,88px); white-space:nowrap}
.ctas{display:flex; flex-wrap:wrap; gap:12px; margin-top:8px}
.btn{position:relative; display:inline-flex; align-items:center; padding:13px 24px; border-radius:99px; background:var(--light); color:var(--deep); text-decoration:none; font-weight:500; font-size:15px; transition:transform .3s var(--ease), background-color .2s, border-color .2s, color .2s}
.btn:hover{background:var(--sun)}
.btn.ghost{background:transparent; color:var(--light); border:1px solid var(--line)}
.btn.ghost:hover{border-color:var(--accent); color:var(--accent)}
.rise{animation:rise .9s var(--ease) both; animation-delay:calc(var(--i,0) * 110ms + 80ms)}
@keyframes rise{from{opacity:0; transform:translateY(28px)}}


/* inner page heading */
.phead{padding-block:clamp(56px,8vw,104px) clamp(36px,5vw,56px)}
.phead h1{font-size:clamp(44px,7vw,88px); margin-bottom:22px}
.phead h1::after{content:"."; color:var(--accent); display:inline-block; animation:bob 2.4s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-.12em)}}
.phead .lead{max-width:60ch}

/* sections & cards */
.sec{padding-block:clamp(48px,7vw,88px); border-top:1px solid var(--line)}
.band{background:linear-gradient(180deg, rgba(13,21,53,.85), rgba(10,16,41,.4))}

.h-sm{font-size:clamp(26px,3.2vw,36px); margin-bottom:32px}
.grid3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(18px,3vw,32px)}
.feat{--c:var(--moon); position:relative; display:grid; gap:12px; align-content:start; padding:30px; border-radius:22px; border:1px solid var(--line); overflow:hidden;
  background:radial-gradient(340px circle at var(--px,85%) var(--py,0%), color-mix(in srgb, var(--c) 20%, transparent), transparent 65%), var(--card);
  transition:transform .35s var(--ease), border-color .3s, opacity .8s var(--ease)}
.feat::before{content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--c)}
.feat:hover{border-color:color-mix(in srgb, var(--c) 55%, transparent)}
.feat h3{font-size:24px}
.feat p{color:var(--mist)}
.ico{width:40px; height:40px; color:var(--c); margin-bottom:8px; transition:transform .5s var(--ease)}
.feat:hover .ico{transform:rotate(-12deg) scale(1.15)}
.nums{counter-reset:n}
.nums .feat::after{counter-increment:n; content:"0" counter(n); order:-1; line-height:1; margin-bottom:6px; font-family:var(--display); font-size:52px; font-weight:200; color:var(--c); opacity:.35; transition:opacity .3s, transform .5s var(--ease)}
.nums .feat:hover::after{opacity:.9; transform:translateY(-4px)}

.pulse{display:inline-block; flex-shrink:0; width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 0 var(--accent); animation:pulse 1.8s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px transparent} 100%{box-shadow:0 0 0 0 transparent}}
.now{--accent:var(--sun); position:relative; display:grid; grid-template-columns:auto 1fr auto; gap:12px 32px; align-items:center; text-decoration:none; padding:32px 36px; border-radius:24px; border:1.5px solid transparent;
  background:radial-gradient(120% 160% at 100% 0%, rgba(255,196,107,.12), transparent 55%) padding-box, linear-gradient(var(--card),var(--card)) padding-box, conic-gradient(from var(--ang), var(--moon), var(--mint), var(--sun), var(--coral), var(--moon)) border-box;
  animation:ring 6s linear infinite; transition:transform .35s var(--ease), opacity .8s var(--ease)}
@keyframes ring{to{--ang:360deg}}
.now .label{margin:0}
.now-text{font-family:var(--display); font-size:clamp(19px,2.2vw,25px); font-weight:300}
.now-link{display:inline-flex; align-items:center; gap:10px; color:var(--sun); font-size:15px; white-space:nowrap}
.now:hover .arr{transform:translateX(5px)}
.arr{width:16px; height:10px; transition:transform .3s var(--ease)}

.name-row{display:grid; grid-template-columns:minmax(0,200px) minmax(0,1fr); gap:clamp(28px,6vw,72px); align-items:center}
.orbit{width:100%; overflow:visible}
.name-row .orbit{max-width:200px; animation:float 6s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-10px)}}
.name-row p{color:#C9D0E6; max-width:60ch}
.name-row p+p{margin-top:14px}
.name-row .h-sm{margin-bottom:18px}

/* projects */
.proj{padding:clamp(24px,4vw,44px); border:1px solid var(--edge); border-radius:24px; background:radial-gradient(90% 140% at 100% 0%, rgba(255,196,107,.13), transparent 60%), var(--card); display:grid; gap:12px; max-width:900px}
.proj.soon .h-sm{margin-block:14px 12px}
.proj.soon{max-width:760px}
.pill{display:inline-flex; align-items:center; gap:10px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--sun); border:1px solid color-mix(in srgb, var(--sun) 45%, transparent); border-radius:99px; padding:5px 14px}
.follow{display:flex; flex-wrap:wrap; gap:10px; margin-top:22px}

/* contact */
.contact-grid{display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,5vw,64px); align-items:start}
.contact-grid .label{margin-bottom:14px}
.contact-grid > div:nth-child(2) .label{color:var(--mint)}
.contact-grid > div:nth-child(3) .label{color:var(--sun)}
.mail{display:flex; flex-wrap:wrap; align-items:center; gap:14px 18px}
.mail a{font-family:var(--display); font-weight:300; font-size:clamp(24px,3.2vw,36px); text-decoration:none; overflow-wrap:anywhere; padding-bottom:4px;
  background-image:var(--rainbow), linear-gradient(var(--line),var(--line)); background-repeat:no-repeat; background-position:0 100%, 0 100%; background-size:0 2px, 100% 1px; transition:background-size .5s var(--ease)}
.mail a:hover{background-size:100% 2px, 100% 1px}
.copy{font:500 14px var(--body); color:var(--deep); background:var(--accent); border:0; border-radius:99px; padding:10px 18px; cursor:pointer; transition:transform .15s, background-color .2s}
.copy:hover{background:var(--sun)}
.copy:active{transform:scale(.94)}
.social{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.social a{text-decoration:none; display:grid; font-size:18px; transition:color .2s, transform .3s var(--ease)}
.social a span{color:var(--mist); font-size:14px}
.social a:hover{color:var(--mint); transform:translateX(4px)}
.textlink{display:inline-flex; align-items:center; gap:10px; color:var(--sun); text-decoration:none; margin-top:10px}
.textlink:hover .arr{transform:translateX(5px)}

/* footer */
.foot{background:var(--bar); border-top:1px solid var(--edge); padding-block:28px calc(28px + env(safe-area-inset-bottom,0px)); font-size:14px; color:var(--mist)}
.foot-in{display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px 24px}
.foot nav{display:flex; flex-wrap:wrap; gap:8px 22px}
.foot a{text-decoration:none; transition:color .2s}
.foot a:hover{color:var(--light)}

/* privacy & support */
.prose{max-width:760px; padding-block:64px 96px}
.prose h1{font-size:clamp(36px,6vw,56px); margin-bottom:14px}
.prose h2{font-size:24px; margin:40px 0 10px}
.prose p{color:#C9D0E6; max-width:66ch}
.prose a{color:var(--moon)}
.prose .lead{margin:12px 0 36px}
.prose .label{margin:0 0 10px}
.prose .mail a{color:var(--light); font-size:clamp(22px,4vw,32px)}
.faq{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer; padding:18px 0; font-weight:500; list-style:none; display:flex; justify-content:space-between; gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--accent); font-size:20px; line-height:1; transition:transform .3s var(--ease)}
.faq[open] summary::after{transform:rotate(45deg)}
.faq p{padding-bottom:18px}
.nf main{min-height:100vh; display:grid; align-content:center; justify-items:center; text-align:center; gap:18px}
.nf .orbit{width:160px; animation:float 6s ease-in-out infinite}

/* sparks thrown by clicks (main.js) */
.spark{position:fixed; z-index:50; border-radius:50%; pointer-events:none}

/* scroll reveal: hide only when JS runs and motion is welcome */
@media (prefers-reduced-motion:no-preference){
  .js [data-reveal]:not(.in){opacity:0; transform:translateY(32px)}
  .js [data-reveal]{transition:opacity .8s var(--ease), transform .8s var(--ease); transition-delay:calc(var(--i,0) * 110ms)}
  .js .feat[data-reveal].in,.js .now[data-reveal].in{transition-delay:0s}
}

@media (max-width:820px){
  .top-in{flex-wrap:wrap; height:auto; padding-block:12px; gap:10px 16px}
  .top nav{order:3; width:100%; margin-left:0; gap:22px; font-size:15px; overflow-x:auto; padding-bottom:8px}
  .lang{margin-left:auto}
  .grid3,.contact-grid{grid-template-columns:1fr}
  .now{grid-template-columns:1fr; padding:24px}
  .feat{padding:24px}
  .name-row{grid-template-columns:1fr}
  .name-row .orbit{max-width:120px}
}
/* Less motion: keep the slow ambient life (orbits, twinkle, colour), drop the big moves. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rise{animation:none}
  .aurora i{animation:none}
}