@font-face{font-family:"Albert Sans";src:url("/fonts/AlbertSans-Variable.woff2") format("woff2");font-weight:100 900;font-display:swap}

/* starnida.com, from the identity guide (Draft 1.0, page 5): "El futuro se explora."
   Black and pure white, the logo colours used sparingly, space drawn in white lines:
   a planet with its orbit at the top, its horizon under the stars at the close. */
:root{
  --black:#000;--white:#fff;--mist:#A6A6AE;--ash:#6A6A72;--hair:rgba(255,255,255,.12);
  --sky:#74CEF1;--green:#2DE586;--gold:#E6C142;--orange:#FBB339;
  --type:"Albert Sans",-apple-system,"Helvetica Neue",Arial,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{overflow-x:clip}
body{margin:0;background:var(--black);color:var(--white);font-family:var(--type);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:inherit}
.wrap{max-width:1240px;margin:0 auto;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
h1,h2,h3{margin:0;text-wrap:balance}
.dot{color:var(--sky)}

/* full-bleed space scenes */
.scene{position:relative;overflow:hidden}
.scene > img{position:absolute;inset:-6% 0;width:100%;height:112%;object-fit:cover;will-change:transform}
.scene::after{content:"";position:absolute;inset:0;pointer-events:none}

/* hero */
.hero{min-height:100svh;display:flex;flex-direction:column}
/* the hero alone uses the whole width: the words to the left, clear of the planet, and the menu at the right edge */
.hero > .wrap{width:100%;max-width:none;padding-left:max(24px,5vw,env(safe-area-inset-left,0px));padding-right:max(24px,5vw,env(safe-area-inset-right,0px))}
.hero{background:#000}
.planet{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero::after{background:linear-gradient(90deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,0) 45%),linear-gradient(180deg,transparent 80%,#000 100%)}
.top{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;padding-block:max(28px,env(safe-area-inset-top,0px)) 0}
.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;font-weight:500;font-size:20px;letter-spacing:-.01em}
.brand img{width:34px;height:auto;display:block}
.top nav{display:flex;gap:32px;font-size:15px;color:#D2D2D8}
.top nav a{text-decoration:none}
.hero .copy{position:relative;z-index:2;margin-top:auto;padding-bottom:16vh}
h1{font-weight:300;font-size:clamp(48px,7.6vw,108px);line-height:1.04;letter-spacing:-.025em;max-width:11ch}
.lede{color:#C9C9D0;font-size:clamp(18px,1.6vw,21px);max-width:38ch;margin:28px 0 40px}
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--white);color:var(--black);font-weight:600;font-size:15px;padding:14px 26px;border-radius:999px;text-decoration:none}
.btn.ghost{background:transparent;color:var(--white);border:1px solid rgba(255,255,255,.35)}
.cta{display:flex;flex-wrap:wrap;gap:12px}

/* statement */
#nornas{padding-block:clamp(110px,13vw,170px)}
.c-sky{--c:var(--sky)}.c-green{--c:var(--green);--d:.12s}.c-gold{--c:var(--gold);--d:.24s}.c-orange{--c:var(--orange);--d:.36s}
.statement{padding-block:clamp(120px,15vw,200px)}
.statement h2{font-weight:300;font-size:clamp(36px,5vw,68px);line-height:1.1;letter-spacing:-.02em;max-width:18ch}
.statement p{color:var(--mist);font-size:19px;max-width:46ch;margin:32px 0 0}

.product{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:end}
.product .text{min-width:0}
/* the app itself: four real screens in a row, each with one line of what it does */
.screens{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,28px);margin-top:clamp(56px,7vw,96px)}
.screens figure{margin:0;min-width:0}
.screens img{width:100%;height:auto;display:block}
.screens figcaption{margin-top:18px;color:var(--mist);font-size:15px;line-height:1.5}
.screens figcaption b{display:block;color:var(--white);font-weight:500;font-size:17px;margin-bottom:4px}
.screens .d1{--d:.1s}.screens .d2{--d:.2s}.screens .d3{--d:.3s}
.sample{margin:32px 0 0;font-size:13px;color:var(--ash)}
.product .icon{width:72px;height:72px;border-radius:17px;display:block;margin-bottom:28px}
.product h2{font-weight:400;font-size:clamp(32px,3.6vw,48px);line-height:1.1;letter-spacing:-.015em}
.product p{color:var(--mist);max-width:40ch;margin:18px 0 0}
.product .status{font-size:14px;color:var(--ash);margin-top:14px}
.product .cta{margin-top:32px}

/* the statement: type alone on the black, between the two drawings */
.band{padding-block:clamp(110px,13vw,170px) 0}
.band h2{font-weight:300;font-size:clamp(34px,4.8vw,64px);line-height:1.1;letter-spacing:-.02em;max-width:18ch}
.band p{color:#C4C4CB;font-size:19px;max-width:46ch;margin:28px 0 0}

/* how we work: four lines, a sparing touch of the logo's colours */
.ways{padding-block:clamp(110px,13vw,170px)}
.ways h2{font-weight:300;font-size:clamp(34px,4.4vw,56px);letter-spacing:-.02em}
.ways ul{list-style:none;margin:56px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px}
.ways li{min-width:0;position:relative}
/* each holds a small body of the sky, drawn in line in its colour of the logo */
.ways svg{display:block;width:44px;height:44px;margin-bottom:22px;fill:none;stroke:var(--c);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.ways b{display:block;font-weight:500;font-size:22px;margin-bottom:10px;border-top:1px solid var(--hair);padding-top:22px}
.ways span{color:var(--mist)}
.studio{margin:64px 0 0;color:var(--mist);font-size:19px}

/* one sky from the statement down to the horizon: the stars thin out upward into the black */
.night{position:relative;overflow:hidden}
.night > section{position:relative;z-index:1}
.sky{position:absolute;inset:0;width:100%;height:100%;display:block}

/* contact: the closing horizon */
.contact{min-height:92vh;display:flex;align-items:flex-start}
.contact .wrap{position:relative;z-index:2;width:100%;padding-top:16vh}
.contact h2{font-weight:300;font-size:clamp(40px,6vw,84px);line-height:1.04;letter-spacing:-.025em}
.contact a.mail{display:inline-block;margin-top:28px;font-size:clamp(22px,2.6vw,32px);font-weight:300;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3)}

footer{border-top:1px solid var(--hair);padding-block:40px max(48px,env(safe-area-inset-bottom,0px));color:var(--ash);font-size:13px}
footer .row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;align-items:center}
footer .brand{font-size:16px;color:var(--white)}
footer .brand img{width:26px}
footer nav{display:flex;gap:22px}
footer .fine{flex-basis:100%;margin:8px 0 0;font-size:12px;color:var(--ash);max-width:90ch}
.product .status a{color:var(--white);text-decoration-color:var(--sky);text-underline-offset:3px}
footer nav a{text-decoration:none;color:#C8C8CE}

/* arrival */
.motion .rise{opacity:0;transform:translateY(26px);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1.1s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.motion .rise.in{opacity:1;transform:none}
@media (prefers-reduced-motion:no-preference){
  .hero .copy > *{animation:up 1.3s cubic-bezier(.2,.7,.2,1) both}
  .hero .copy > :nth-child(2){animation-delay:.15s}
  .hero .copy > :nth-child(3){animation-delay:.3s}
  @keyframes up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
}
@media (max-width:820px){
  .top nav{display:none}
  .product{grid-template-columns:1fr;gap:20px}
  .screens{grid-template-columns:1fr 1fr;gap:32px 16px}
  .screens figcaption{font-size:13px;margin-top:12px}
  .screens figcaption b{font-size:15px}
  .ways ul{grid-template-columns:1fr 1fr;gap:32px 24px}
}
@media (max-width:600px){
  .ways ul{grid-template-columns:1fr;gap:28px}
}

/* 404 */
.lost{min-height:100svh;display:flex;align-items:center}
.lost .wrap{width:100%}
.lost .lede{margin-bottom:40px}