/* getnaluno.com — the public website (home, /invest, /contact).
   The app has its own styles in css/app.css; nothing here reaches it. */
:root{
  --bg:#07080D; --bg-2:#0D1018; --card:#11141D; --line:rgba(255,255,255,.09);
  --ink:#EEF1F7; --ink-2:#B9C0CF; --ink-3:#8790A3;
  --mint:#7CFFB2; --cyan:#00E5FF; --violet:#7C4DFF;
  --body:'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, monospace;
  --wrap:1120px; --gut:20px; --radius:18px;
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth;}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--body); font-size:17px; line-height:1.6; overflow-x:hidden;}
img{max-width:100%; display:block;}
a{color:var(--mint);}
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{outline:2px solid var(--cyan); outline-offset:3px;}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 var(--gut);}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}

/* Header */
.top{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 0;}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink);}
.brand svg{width:30px; height:30px; overflow:visible;}
.brand b{font-family:'Orbitron', var(--body); font-weight:700; letter-spacing:.16em; font-size:17px; color:var(--cyan);}
.nav{display:flex; align-items:center; gap:22px;}
.nav a{color:var(--ink-2); text-decoration:none; font-size:15px;}
.nav a:hover{color:var(--ink);}
@media (max-width:760px){ .nav .hide-sm{display:none;} .nav{gap:14px;} }

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 22px; border-radius:999px; font:600 16px/1 var(--body); text-decoration:none; border:1px solid transparent; cursor:pointer;}
.btn.primary{background:var(--mint); color:#06120B;}
.btn.primary:hover{background:#9BFFC6;}
.btn.ghost{border-color:rgba(124,255,178,.45); color:var(--mint); background:transparent;}
.btn.ghost:hover{background:rgba(124,255,178,.08);}
.btn.small{min-height:40px; padding:0 16px; font-size:15px;}
.btns{display:flex; flex-wrap:wrap; gap:12px; align-items:center;}

/* Hero */
.hero{position:relative; padding:28px 0 64px;}
.hero::before{content:""; position:absolute; inset:0 0 auto 0; height:720px; background:url('/img/site-night.jpg') center top/cover no-repeat; opacity:.38; z-index:-1; -webkit-mask-image:linear-gradient(#000 40%, transparent); mask-image:linear-gradient(#000 40%, transparent);}
.hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center;}
.tag{display:inline-flex; align-items:center; gap:8px; font:500 13px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--mint); background:rgba(124,255,178,.08); border:1px solid rgba(124,255,178,.25); padding:8px 12px; border-radius:999px;}
.tag i{width:7px; height:7px; border-radius:50%; background:var(--mint); box-shadow:0 0 10px var(--mint);}
h1{font-size:clamp(34px, 5.2vw, 58px); line-height:1.08; letter-spacing:-.02em; margin:20px 0 18px; font-weight:600;}
h1 em{font-style:normal; color:var(--mint);}
.lede{font-size:clamp(18px, 2vw, 21px); color:var(--ink-2); max-width:36em; margin:0 0 28px;}
.note{font-size:15px; color:var(--ink-3); margin:16px 0 0;}
.note b{color:var(--ink-2); font-weight:500;}
@media (max-width:860px){ .hero-grid{grid-template-columns:1fr; gap:36px;} .hero{padding-bottom:40px;} }

/* A real screen in a phone frame */
.phone{position:relative; border-radius:34px; padding:9px; background:#1A1E29; border:1px solid rgba(255,255,255,.12); box-shadow:0 30px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.4) inset; max-width:300px; margin:0 auto;}
.phone img{border-radius:26px; width:100%; height:auto; aspect-ratio:600/1300; background:#0B0D14;}
.hero .phone{max-width:320px; transform:rotate(1.5deg);}
.caption{font-size:13px; color:var(--ink-3); text-align:center; margin:12px auto 0; max-width:30em;}

/* Sections */
section.band{padding:72px 0; border-top:1px solid var(--line);}
.kicker{font:500 13px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--mint); margin:0 0 14px;}
h2{font-size:clamp(28px, 3.6vw, 40px); line-height:1.15; letter-spacing:-.01em; margin:0 0 16px; font-weight:600;}
h3{font-size:21px; margin:0 0 8px; font-weight:600;}
.intro{color:var(--ink-2); font-size:18px; max-width:40em; margin:0 0 40px;}

/* What you can do: four real screens */
.feats{display:grid; grid-template-columns:repeat(4, 1fr); gap:28px;}
.feat .phone{max-width:240px; border-radius:28px; padding:7px;}
.feat .phone img{border-radius:22px;}
.feat h3{margin-top:20px;}
.feat p{color:var(--ink-2); margin:0; font-size:16px;}
@media (max-width:1000px){ .feats{grid-template-columns:repeat(2, 1fr); gap:44px 28px;} }

.swipe-hint{display:none; font:500 13px/1 var(--mono); color:var(--ink-3); margin:-20px 0 16px;}
/* Phones: the four screens become a sideways swipe row instead of a long stack. */
@media (max-width:560px){
  .feats{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding:0 var(--gut); gap:18px; margin:0 calc(-1 * var(--gut)); padding:0 var(--gut) 8px; scrollbar-width:none;}
  .feats::-webkit-scrollbar{display:none;}
  .feat{flex:0 0 72%; scroll-snap-align:start;}
  .feat .phone{max-width:none;}
  .hero .phone{max-width:230px;}
  .swipe-hint{display:block;}
}
.also{margin-top:48px; display:grid; grid-template-columns:repeat(3, 1fr); gap:16px;}
.also div{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px;}
.also b{display:block; font-size:17px; margin-bottom:4px;}
.also span{color:var(--ink-2); font-size:15px;}
@media (max-width:760px){ .also{grid-template-columns:1fr;} }

/* Lists of promises */
.promises{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(2, 1fr); gap:16px;}
.promises li{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px 22px 20px 54px; position:relative; color:var(--ink-2);}
.promises li b{color:var(--ink); display:block; font-size:17px;}
.promises li::before{content:""; position:absolute; left:22px; top:25px; width:16px; height:16px; border-radius:50%; background:rgba(124,255,178,.15); border:2px solid var(--mint);}
@media (max-width:760px){ .promises{grid-template-columns:1fr;} }

/* Founder */
.founder{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start;}
.founder p{color:var(--ink-2); margin:0 0 14px;}
.books{list-style:none; padding:0; margin:0 0 20px; display:grid; gap:10px;}
.books li a{display:flex; justify-content:space-between; gap:12px; align-items:center; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px 18px; text-decoration:none; color:var(--ink);}
.books li a:hover{border-color:rgba(124,255,178,.4);}
.books li span{color:var(--ink-3); font-size:14px; white-space:nowrap;}
@media (max-width:860px){ .founder{grid-template-columns:1fr;} }

/* What's new */
.log{list-style:none; padding:0; margin:0; border-left:2px solid rgba(124,255,178,.25);}
.log li{position:relative; padding:0 0 22px 24px;}
.log li::before{content:""; position:absolute; left:-7px; top:7px; width:12px; height:12px; border-radius:50%; background:var(--bg); border:2px solid var(--mint);}
.log time{display:block; font:500 13px/1.4 var(--mono); color:var(--mint); letter-spacing:.04em;}
.log span{color:var(--ink-2);}

/* Closing call */
.close{text-align:center; padding:88px 0;}
.close .btns{justify-content:center;}
.close p{color:var(--ink-2); max-width:32em; margin:0 auto 28px; font-size:18px;}

/* Investor strip */
.strip{background:linear-gradient(120deg, rgba(124,255,178,.08), rgba(0,229,255,.06)); border:1px solid rgba(124,255,178,.2); border-radius:var(--radius); padding:28px; display:flex; flex-wrap:wrap; gap:20px; align-items:center; justify-content:space-between;}
.strip p{margin:0; color:var(--ink-2); max-width:36em;}
.strip b{color:var(--ink); display:block; font-size:19px; margin-bottom:4px;}

/* Facts table (invest) */
.facts{display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin:0 0 16px;}
.facts div{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:22px;}
.facts b{display:block; font-size:30px; color:var(--mint); line-height:1.1; margin-bottom:6px; font-weight:600;}
.facts span{color:var(--ink-2); font-size:15px;}
.src{font-size:13px; color:var(--ink-3);}
.src a{color:var(--ink-3);}
@media (max-width:760px){ .facts{grid-template-columns:1fr;} }
.cols{display:grid; grid-template-columns:1fr 1fr; gap:40px;}
.cols p{color:var(--ink-2);}
@media (max-width:860px){ .cols{grid-template-columns:1fr; gap:8px;} }
.ticks{list-style:none; padding:0; margin:0;}
.ticks li{padding:6px 0 6px 28px; position:relative; color:var(--ink-2);}
.ticks li::before{content:""; position:absolute; left:2px; top:15px; width:10px; height:10px; border-radius:50%; background:var(--mint);}
.small-shots{display:grid; grid-template-columns:repeat(4, 1fr); gap:18px; margin-top:28px;}
.small-shots .phone{max-width:190px; border-radius:24px; padding:6px;}
.small-shots .phone img{border-radius:19px;}
@media (max-width:760px){ .small-shots{grid-template-columns:repeat(2, 1fr);} }
.disclaimer{font-size:14px; color:var(--ink-3); border-left:2px solid var(--line); padding-left:14px; max-width:44em; margin:22px 0 0;}

/* Forms */
.form{max-width:640px;}
.form label{display:block; font-size:14px; color:var(--ink-2); margin:16px 0 6px;}
.form input, .form textarea, .form select{width:100%; background:var(--bg-2); color:var(--ink); border:1px solid rgba(255,255,255,.14); border-radius:12px; padding:13px 14px; font:16px/1.4 var(--body);}
.form textarea{min-height:150px; resize:vertical;}
.form .split{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
@media (max-width:560px){ .form .split{grid-template-columns:1fr; gap:0;} }
.form .row-check{display:flex; gap:10px; align-items:flex-start; color:var(--ink-2); font-size:15px; margin:18px 0;}
.form .row-check input{width:auto; margin-top:4px;}
.form .hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
.form button{margin-top:20px;}
.status{margin-top:14px; font-size:15px; color:var(--ink-2); min-height:1.4em;}
.status.ok{color:var(--mint);}
.status.err{color:#FF7A8A;}

/* Footer */
footer{border-top:1px solid var(--line); padding:32px 0 48px; color:var(--ink-3); font-size:14px;}
footer .wrap{display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between;}
footer .wrap > div:last-child{display:flex; flex-wrap:wrap; gap:8px 18px;}
footer a{color:var(--ink-2); text-decoration:none; white-space:nowrap;}
footer a:hover{color:var(--ink);}

/* Motion on marks that were already here. Nothing else on the page moves. */
@keyframes naluno-live{
  0%, 100%{ opacity:1; transform:scale(1); }
  50%{ opacity:.4; transform:scale(.7); }
}
@keyframes naluno-arc{
  0%, 100%{ opacity:.4; }
  50%{ opacity:1; }
}
@keyframes naluno-night{
  0%, 100%{ background-position:50% 0; }
  50%{ background-position:56% 3%; }
}
.tag i{ animation:naluno-live 2.6s ease-in-out infinite; }
.brand svg path{ animation:naluno-arc 6s ease-in-out infinite; }
.brand svg path:nth-of-type(2){ animation-delay:.7s; }
.hero::before{ animation:naluno-night 46s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce){
  .tag i, .brand svg path, .hero::before{ animation:none; }
}