/* ===========================================================
   ASTRAEON — landing page
   Palette identica all'app (Theme.swift): ambra/legno/alluminio
   =========================================================== */

:root{
  --amber:        #FFA82E;   /* Theme.amber       */
  --amber-bright: #FFD161;   /* Theme.amberBright */
  --amber-deep:   #FF730D;   /* Theme.amberDeep   */
  --ember:        #FF4D0A;   /* Theme.ember       */
  --amber-dim:    #8C5214;   /* Theme.amberDim    */

  --wood-light:   #572F16;
  --wood-dark:    #29160A;
  --wood-deep:    #1A0D05;
  --alum-dark:    #21201D;
  --alum-light:   #4D4A45;
  --panel:        #161310;
  --screen-bg:    #0D0802;
  --screen-grid:  #73420A;

  --ink:          #F3E4CC;
  --ink-dim:      #9c8b73;

  --maxw: 1080px;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }

body{
  font-family: ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, sans-serif;
  color: var(--ink);
  background:
    linear-gradient(160deg, var(--wood-light) 0%, var(--wood-dark) 45%, var(--wood-deep) 100%) fixed;
  min-height:100vh;
  overflow-x:hidden;
  -webkit-font-smoothing: antialiased;
}

/* faint vignette + ambient amber bloom */
.bg-glow{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(60% 40% at 50% 0%, rgba(255,115,13,.16), transparent 70%),
    radial-gradient(40% 30% at 80% 90%, rgba(255,77,10,.10), transparent 70%);
}

/* ---------- NAV ---------- */
.nav{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 28px;
  backdrop-filter: blur(10px);
  background: linear-gradient(180deg, rgba(13,8,2,.85), rgba(13,8,2,.35));
  border-bottom:1px solid rgba(255,168,46,.14);
}
.nav-brand{
  font-weight:800; letter-spacing:.32em; font-size:15px;
  color:var(--amber-bright);
  text-shadow:0 0 12px rgba(255,115,13,.55);
  display:flex; align-items:center; gap:10px;
}
.nav-dot{
  width:9px; height:9px; border-radius:50%;
  background:var(--amber);
  box-shadow:0 0 8px var(--amber-deep), 0 0 16px var(--amber-deep);
}
.nav-links{ display:flex; align-items:center; gap:26px; }
.nav-links a{
  color:var(--ink-dim); text-decoration:none; font-size:14px;
  letter-spacing:.04em; transition:color .2s;
}
.nav-links a:hover{ color:var(--amber-bright); }
.nav-cta{
  color:#1a0d05 !important; background:var(--amber);
  padding:8px 16px; border-radius:8px; font-weight:700;
  box-shadow:0 0 14px rgba(255,115,13,.5);
}
.nav-cta:hover{ background:var(--amber-bright); }

/* ---------- HERO ---------- */
.hero{
  position:relative; z-index:1;
  max-width:var(--maxw); margin:0 auto;
  padding:90px 24px 70px;
  text-align:center;
}
.scope-line{
  position:absolute; inset:0; z-index:-1; opacity:.5;
  display:flex; align-items:center;
}
#scope{ width:100%; height:220px; display:block; }

.hero-logo{
  width:min(440px, 82vw);
  filter: drop-shadow(0 0 40px rgba(70,150,255,.35)) drop-shadow(0 6px 30px rgba(0,0,0,.6));
  margin-bottom:8px;
}
.hero-tag{
  font-size:14px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--amber); text-shadow:0 0 12px rgba(255,115,13,.45);
  margin-bottom:26px;
}
.hero-sub{
  max-width:680px; margin:0 auto 34px;
  font-size:18px; line-height:1.7; color:var(--ink);
}
.hero-sub strong{ color:var(--amber-bright); font-weight:700; }

.hero-cta{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.hero-note{ margin-top:22px; font-size:13px; color:var(--ink-dim); letter-spacing:.04em; }

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-block; text-decoration:none;
  padding:15px 30px; border-radius:11px;
  font-weight:700; font-size:16px; letter-spacing:.02em;
  transition:transform .15s, box-shadow .2s, background .2s;
}
.btn:active{ transform:translateY(1px); }
.btn-amber{
  color:#1a0d05;
  background:linear-gradient(180deg, var(--amber-bright), var(--amber-deep));
  box-shadow:0 0 22px rgba(255,115,13,.55), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn-amber:hover{ box-shadow:0 0 34px rgba(255,115,13,.8), inset 0 1px 0 rgba(255,255,255,.4); }
.price-inline{ font-weight:800; }
.btn-ghost{
  color:var(--amber); border:1px solid rgba(255,168,46,.4);
  background:rgba(255,168,46,.05);
}
.btn-ghost:hover{ border-color:var(--amber); background:rgba(255,168,46,.12); }

/* ---------- MAC APP STORE BADGE ---------- */
.appstore-badge{
  display:inline-flex; align-items:center; gap:11px;
  padding:11px 20px; border-radius:11px;
  background:#000; color:#fff; text-decoration:none;
  border:1px solid rgba(255,255,255,.28);
  transition:border-color .2s, box-shadow .2s, transform .15s;
}
.appstore-badge:hover{ border-color:#fff; box-shadow:0 0 22px rgba(255,255,255,.18); }
.appstore-badge:active{ transform:translateY(1px); }
.ab-apple{ width:26px; height:26px; color:#fff; flex:none; }
.ab-txt{ display:flex; flex-direction:column; line-height:1.05; text-align:left; }
.ab-txt small{ font-size:10px; letter-spacing:.02em; opacity:.9; }
.ab-txt b{ font-size:18px; font-weight:600; letter-spacing:.01em; }
.appstore-badge-lg{ padding:14px 28px; }
.appstore-badge-lg .ab-apple{ width:30px; height:30px; }
.appstore-badge-lg .ab-txt b{ font-size:21px; }

/* direct-sale fallback link under the badge */
.buy-alt{ margin-top:22px; font-size:14px; color:var(--ink-dim); }
.buy-alt-link{ color:var(--amber); text-decoration:none; border-bottom:1px solid rgba(255,168,46,.4); }
.buy-alt-link:hover{ color:var(--amber-bright); border-color:var(--amber-bright); }

/* ---------- SECTIONS ---------- */
.section{
  position:relative; z-index:1;
  max-width:var(--maxw); margin:0 auto;
  padding:80px 24px;
}
.section-alt{
  background:linear-gradient(180deg, rgba(13,8,2,.45), rgba(13,8,2,.15));
  border-top:1px solid rgba(255,168,46,.10);
  border-bottom:1px solid rgba(255,168,46,.10);
  max-width:none;
}
.section-alt > *{ max-width:var(--maxw); margin-left:auto; margin-right:auto; }
.sec-title{
  font-size:30px; font-weight:800; letter-spacing:.04em;
  color:var(--amber-bright); text-align:center;
  text-shadow:0 0 16px rgba(255,115,13,.4);
  margin-bottom:14px;
}
.sec-lead{
  text-align:center; max-width:620px; margin:0 auto 44px;
  color:var(--ink-dim); font-size:16px; line-height:1.6;
}

/* ---------- FEATURE GRID ---------- */
.grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
}
.card{
  background:linear-gradient(180deg, var(--panel), var(--screen-bg));
  border:1px solid rgba(255,168,46,.16);
  border-radius:16px; padding:26px 22px;
  box-shadow:inset 0 1px 0 rgba(255,168,46,.06), 0 8px 30px rgba(0,0,0,.4);
  transition:border-color .2s, transform .2s;
}
.card:hover{ border-color:rgba(255,168,46,.4); transform:translateY(-3px); }
.card-ico{
  font-size:26px; color:var(--amber);
  text-shadow:0 0 14px rgba(255,115,13,.6);
  margin-bottom:12px;
}
.card h3{ font-size:18px; color:var(--ink); margin-bottom:8px; }
.card p{ font-size:14.5px; line-height:1.6; color:var(--ink-dim); }

/* ---------- CHIPS ---------- */
.chips{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.chip{
  padding:10px 18px; border-radius:999px;
  border:1px solid rgba(255,168,46,.3);
  background:rgba(255,168,46,.06);
  color:var(--amber); font-size:14px; letter-spacing:.03em;
  box-shadow:0 0 12px rgba(255,115,13,.12);
}

/* ---------- SPECS ---------- */
.specs{
  max-width:680px; margin:0 auto;
  border:1px solid rgba(255,168,46,.16); border-radius:16px;
  overflow:hidden; background:linear-gradient(180deg, var(--panel), var(--screen-bg));
}
.spec-row{
  display:flex; justify-content:space-between; align-items:center;
  padding:16px 22px;
  border-bottom:1px solid rgba(255,168,46,.10);
  font-size:15px;
}
.spec-row:last-child{ border-bottom:none; }
.spec-row span{ color:var(--ink-dim); }
.spec-row b{ color:var(--amber-bright); font-weight:600; }

/* ---------- BUY ---------- */
.buy{ text-align:center; position:relative; overflow:hidden; }
.buy-mark{
  position:absolute; top:-40px; left:50%; transform:translateX(-50%);
  width:520px; max-width:120%; opacity:.10; pointer-events:none;
  filter:drop-shadow(0 0 40px rgba(255,115,13,.4));
}
.price-block{ margin:18px 0 28px; }
.price{
  display:block; font-size:58px; font-weight:800;
  color:var(--amber-bright); text-shadow:0 0 26px rgba(255,115,13,.55);
  line-height:1;
}
.price-sub{ font-size:14px; color:var(--ink-dim); letter-spacing:.04em; }
.btn-buy{ font-size:18px; padding:17px 40px; }
.buy-points{
  list-style:none; margin:30px auto 0; max-width:420px;
  display:grid; gap:10px; text-align:left;
}
.buy-points li{
  position:relative; padding-left:26px;
  color:var(--ink); font-size:15px;
}
.buy-points li::before{
  content:"◆"; position:absolute; left:0; color:var(--amber);
  text-shadow:0 0 8px rgba(255,115,13,.6);
}

/* ---------- FOOTER ---------- */
.foot{
  position:relative; z-index:1;
  text-align:center; padding:50px 24px 60px;
  border-top:1px solid rgba(255,168,46,.12);
  background:rgba(13,8,2,.6);
}
.foot-brand{
  display:inline-flex; align-items:center; gap:9px;
  font-weight:800; letter-spacing:.3em; color:var(--amber-bright);
  text-shadow:0 0 12px rgba(255,115,13,.5); margin-bottom:18px;
}
.disclaimer{
  max-width:620px; margin:0 auto 16px;
  font-size:13px; line-height:1.7; color:var(--ink-dim);
}
.disclaimer strong{ color:var(--amber); }
.copy{ font-size:12.5px; color:var(--ink-dim); letter-spacing:.04em; }

/* ---------- RESPONSIVE ---------- */
@media (max-width:860px){
  .grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:600px){
  .nav-links{ gap:14px; }
  .nav-links a:not(.nav-cta){ display:none; }
  .grid{ grid-template-columns:1fr; }
  .hero{ padding:60px 18px 50px; }
  .price{ font-size:46px; }
}