/* Better Budget — shared site styles. Dark, gold-on-green brand. */
@font-face { font-family:'Inter'; src:url('/assets/fonts/inter_regular.ttf') format('truetype'); font-weight:400; font-display:swap; }
@font-face { font-family:'Inter'; src:url('/assets/fonts/inter_medium.ttf') format('truetype'); font-weight:500; font-display:swap; }
@font-face { font-family:'Inter'; src:url('/assets/fonts/inter_semibold.ttf') format('truetype'); font-weight:600; font-display:swap; }
@font-face { font-family:'Inter'; src:url('/assets/fonts/inter_bold.ttf') format('truetype'); font-weight:700; font-display:swap; }
@font-face { font-family:'Space Grotesk'; src:url('/assets/fonts/space_grotesk_medium.ttf') format('truetype'); font-weight:500; font-display:swap; }
@font-face { font-family:'Space Grotesk'; src:url('/assets/fonts/space_grotesk_semibold.ttf') format('truetype'); font-weight:600; font-display:swap; }
@font-face { font-family:'Space Grotesk'; src:url('/assets/fonts/space_grotesk_bold.ttf') format('truetype'); font-weight:700; font-display:swap; }

:root{
  --bg:#0F1714; --surface:#1A2422; --surface-2:#243430;
  --green:#1F4D40; --green-light:#2D6B5A;
  --gold:#E8B33A; --gold-light:#F6D573; --gold-deep:#DD9F2F;
  --text:#EFEFEF; --text-muted:#B8C2BE; --text-dim:#6f7d77;
  --divider:#2A3531; --maxw:1080px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--bg);color:var(--text);font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased;}
a{color:var(--gold);text-decoration:none;}
a:hover{text-decoration:underline;}
img{display:block;max-width:100%;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}

.site-header{position:sticky;top:0;z-index:10;background:rgba(15,23,20,0.85);backdrop-filter:blur(8px);border-bottom:1px solid var(--divider);}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;}
.brand{display:flex;align-items:center;gap:10px;color:var(--text);font-weight:600;font-size:18px;}
.brand:hover{text-decoration:none;}
.brand img{width:30px;height:30px;}
.nav-links{display:flex;gap:24px;}
.nav-links a{color:var(--text-muted);font-size:15px;}
.nav-links a:hover{color:var(--text);text-decoration:none;}

.hero{padding:72px 0 56px;}
.hero .wrap{display:grid;grid-template-columns:1.1fr 0.9fr;gap:48px;align-items:center;}
.hero h1{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(34px,5vw,52px);line-height:1.1;letter-spacing:-1px;margin:0 0 16px;}
.hero p.sub{font-size:18px;color:var(--text-muted);margin:0 0 28px;max-width:42ch;}
.dev-note{color:var(--text-dim);font-size:14px;margin-top:16px;}

.badges{display:flex;gap:12px;flex-wrap:wrap;}
.badge{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--divider);border-radius:14px;padding:10px 16px;cursor:default;}
.badge svg{width:24px;height:24px;flex:none;}
.badge .label{font-size:14px;font-weight:600;color:var(--text);line-height:1.25;}
.badge .soon{font-size:12px;font-weight:400;color:var(--gold);}
/* The Play badge is a real link now; the App Store one stays an inert "coming soon" card. */
.badge-link{cursor:pointer;text-decoration:none;transition:border-color .15s ease,background .15s ease;}
.badge-link:hover,.badge-link:focus-visible{border-color:var(--gold);background:var(--surface-2);}

.phone{background:var(--surface);border:1px solid var(--surface-2);border-radius:32px;padding:10px;width:100%;max-width:300px;margin:0 auto;}
.phone img{border-radius:24px;width:100%;height:auto;aspect-ratio:1080/2400;object-fit:cover;background:var(--surface-2);}

section{padding:56px 0;}
h2.section-title{font-family:'Space Grotesk',sans-serif;font-size:30px;font-weight:600;text-align:center;margin:0 0 8px;}
.section-sub{text-align:center;color:var(--text-muted);margin:0 auto 40px;max-width:48ch;}

.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;}
.card{background:var(--surface);border:1px solid var(--divider);border-radius:18px;padding:24px;}
.card h3{font-size:18px;margin:0 0 8px;color:var(--text);}
.card p{margin:0;color:var(--text-muted);font-size:15px;}

.carousel{position:relative;max-width:560px;margin:0 auto;}
.carousel-viewport{overflow:hidden;}
.carousel-track{display:flex;transition:transform .45s cubic-bezier(.4,0,.2,1);}
.carousel-slide{flex:0 0 100%;display:flex;justify-content:center;padding:0 4px;}
.carousel-btn{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;background:var(--surface);border:1px solid var(--divider);color:var(--text);font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2;}
.carousel-btn:hover{background:var(--surface-2);border-color:var(--gold);color:var(--gold);}
.carousel-btn.prev{left:-10px;}
.carousel-btn.next{right:-10px;}
.carousel-dots{display:flex;gap:10px;justify-content:center;margin-top:24px;}
.carousel-dots button{width:9px;height:9px;padding:0;border-radius:50%;border:none;background:var(--divider);cursor:pointer;transition:background .2s;}
.carousel-dots button[aria-current="true"]{background:var(--gold);}

.strip{background:var(--green);border-radius:24px;padding:40px;text-align:center;}
.strip h2{font-family:'Space Grotesk',sans-serif;font-size:26px;margin:0 0 12px;}
.strip p{color:#d8e6e0;margin:0 auto 16px;max-width:52ch;}

.site-footer{border-top:1px solid var(--divider);padding:32px 0;color:var(--text-muted);font-size:14px;}
.site-footer .wrap{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;}
.site-footer nav{display:flex;gap:20px;}
.site-footer a{color:var(--text-muted);}

.legal{padding:48px 0 64px;}
.legal .wrap{max-width:760px;}
.legal h1{font-family:'Space Grotesk',sans-serif;font-size:36px;margin:0 0 8px;}
.legal .updated{color:var(--text-dim);font-size:14px;margin:0 0 24px;}
.legal .banner{background:var(--surface-2);border:1px solid var(--divider);border-radius:10px;padding:14px 18px;color:var(--text-muted);font-size:14px;margin:0 0 32px;}
.legal h2{font-size:20px;margin:32px 0 8px;color:var(--text);}
.legal p,.legal li{color:var(--text-muted);}
.legal ul{padding-left:20px;}

@media (max-width:820px){
  .hero{padding:40px 0 24px;}
  .hero .wrap{grid-template-columns:1fr;gap:32px;}
  .nav-links{display:none;}
  .strip{padding:28px 20px;}
}

/* Founder story + footer language switcher */
.card.story{max-width:64ch;margin:0 auto;}
.card.story p{color:var(--text);font-size:17px;line-height:1.65;margin:0 0 14px;}
.card.story p:last-child{margin-bottom:0;}

/* Header language dropdown (native <details>, works without JS) */
.header-right{display:flex;align-items:center;gap:20px;}
.lang-menu{position:relative;}
.lang-menu summary{list-style:none;cursor:pointer;display:flex;align-items:center;padding:6px 12px;border:1px solid var(--divider);border-radius:999px;background:var(--surface);color:var(--text);font-size:14px;font-weight:600;user-select:none;}
.lang-menu summary::-webkit-details-marker{display:none;}
.lang-menu summary:hover,.lang-menu[open] summary{border-color:var(--gold);}
.lang-menu ul{position:absolute;right:0;top:calc(100% + 8px);margin:0;padding:6px;list-style:none;background:var(--surface);border:1px solid var(--divider);border-radius:12px;min-width:160px;box-shadow:0 12px 32px rgba(0,0,0,.35);z-index:20;}
.lang-menu li a{display:block;padding:8px 12px;border-radius:8px;color:var(--text-muted);font-size:14px;white-space:nowrap;}
.lang-menu li a:hover{background:var(--surface-2);color:var(--text);text-decoration:none;}
.lang-menu li a[aria-current]{color:var(--gold);font-weight:600;}