/* ============================================================
   Arterio — calming health & wellness app
   Design tokens
   ============================================================ */
:root{
  --bg: #E7ECE8;
  --bg-deep: #DCE4DE;
  --surface: #ECF1ED;
  --ink: #2B3733;
  --ink-soft: #62726C;
  --ink-faint: #8B9993;
  --sage: #6E9484;
  --sage-deep: #4F7364;
  --clay: #D6A077;
  --clay-deep: #B87F53;
  --line: #D3DBD5;
  --shadow-lo: #C7D0C9;
  --shadow-hi: #FFFFFF;
  --radius: 28px;
  --radius-sm: 16px;
  --max: 1120px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Sora", "Segoe UI", sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}

h1,h2,h3,h4{
  font-family:"Fraunces", Georgia, serif;
  font-weight:500;
  color:var(--ink);
  margin:0 0 0.5em;
  line-height:1.15;
}
h1{font-size:clamp(2.4rem, 5vw, 3.8rem); font-weight:440;}
h2{font-size:clamp(1.8rem, 3.2vw, 2.5rem);}
h3{font-size:1.25rem;}
p{margin:0 0 1em;color:var(--ink-soft);}

.container{max-width:var(--max); margin:0 auto; padding:0 28px;}

:focus-visible{outline:3px solid var(--sage-deep); outline-offset:3px;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
}

/* ---------- neumorphic surfaces ---------- */
.neu{
  background:var(--surface);
  border-radius:var(--radius);
  box-shadow: 10px 10px 22px var(--shadow-lo), -10px -10px 22px var(--shadow-hi);
}
.neu-sm{
  background:var(--surface);
  border-radius:var(--radius-sm);
  box-shadow: 6px 6px 14px var(--shadow-lo), -6px -6px 14px var(--shadow-hi);
}
.neu-inset{
  background:var(--surface);
  border-radius:var(--radius-sm);
  box-shadow: inset 5px 5px 12px var(--shadow-lo), inset -5px -5px 12px var(--shadow-hi);
}

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(231,236,232,0.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 28px;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-family:"Fraunces", serif; font-size:1.3rem; color:var(--ink);
}
.brand-mark{
  width:34px; height:34px; border-radius:11px;
  background:var(--surface);
  box-shadow: 4px 4px 9px var(--shadow-lo), -4px -4px 9px var(--shadow-hi);
  position:relative;
}
.brand-mark::after{
  content:"";
  position:absolute; inset:9px;
  border-radius:50%;
  border:2.5px solid var(--sage-deep);
  border-right-color:transparent;
  transform:rotate(45deg);
}
.nav-links{display:flex; gap:30px; align-items:center;}
.nav-links a{color:var(--ink-soft); font-size:0.96rem; transition:color .2s ease;}
.nav-links a:hover{color:var(--sage-deep);}
.nav-cta{
  padding:11px 22px;
  border-radius:14px;
  background:var(--surface);
  color:var(--sage-deep);
  font-weight:600; font-size:0.92rem;
  box-shadow: 5px 5px 11px var(--shadow-lo), -5px -5px 11px var(--shadow-hi);
  transition: box-shadow .2s ease, transform .2s ease;
}
.nav-cta:hover{ transform:translateY(-1px); }
.nav-toggle{display:none;}

@media (max-width: 880px){
  .nav-links{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:flex-start; gap:0;
    background:var(--bg); border-bottom:1px solid var(--line);
    padding:8px 28px 18px; display:none;
  }
  .nav-links.open{display:flex;}
  .nav-links a{padding:12px 0; width:100%; border-bottom:1px solid var(--line);}
  .nav-toggle{
    display:inline-flex; width:42px; height:42px; border-radius:12px;
    background:var(--surface); box-shadow: 4px 4px 9px var(--shadow-lo), -4px -4px 9px var(--shadow-hi);
    align-items:center; justify-content:center; border:none; cursor:pointer;
  }
  .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
    content:""; display:block; width:18px; height:2px; background:var(--ink); position:relative;
  }
  .nav-toggle span::before{position:absolute; top:-6px;}
  .nav-toggle span::after{position:absolute; top:6px;}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:16px 30px;
  border-radius:18px;
  font-weight:600; font-size:1rem;
  border:none; cursor:pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn-primary{
  background: linear-gradient(145deg, #E3AE85, var(--clay));
  color:#3B2A1D;
  box-shadow: 7px 7px 16px var(--shadow-lo), -4px -4px 12px var(--shadow-hi);
}
.btn-primary:hover{ transform:translateY(-2px); }
.btn-ghost{
  background:var(--surface); color:var(--ink);
  box-shadow: 6px 6px 14px var(--shadow-lo), -6px -6px 14px var(--shadow-hi);
}
.btn-ghost:hover{ transform:translateY(-2px); }

/* ---------- hero ---------- */
.hero{padding:64px 0 40px;}
.hero-grid{
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--sage-deep); font-weight:600; font-size:0.92rem;
  margin-bottom:18px;
}
.eyebrow::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--clay);}
.hero p.lead{font-size:1.12rem; max-width:46ch; margin-bottom:30px;}
.hero-ctas{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:28px;}
.hero-proof{display:flex; align-items:center; gap:14px; color:var(--ink-faint); font-size:0.9rem;}
.avatars{display:flex;}
.avatars span{
  width:32px; height:32px; border-radius:50%; margin-left:-8px;
  border:2px solid var(--bg);
  background:linear-gradient(160deg, var(--sage), var(--clay));
}
.avatars span:first-child{margin-left:0;}

.hero-art{position:relative; display:flex; align-items:center; justify-content:center;}
.orb{
  width:min(380px, 80vw); aspect-ratio:1;
  border-radius:50%;
  background:var(--surface);
  box-shadow: 22px 22px 44px var(--shadow-lo), -22px -22px 44px var(--shadow-hi);
  display:flex; align-items:center; justify-content:center;
  position:relative;
}
.orb-ring{
  position:absolute; inset:14%;
  border-radius:50%;
  box-shadow: inset 8px 8px 18px var(--shadow-lo), inset -8px -8px 18px var(--shadow-hi);
}
.orb-core{
  width:46%; aspect-ratio:1; border-radius:50%;
  background: radial-gradient(circle at 32% 28%, #F4F7F4, var(--sage) 78%);
  animation: breathe 6.5s ease-in-out infinite;
}
@keyframes breathe{
  0%,100%{ transform:scale(0.92); }
  50%{ transform:scale(1.04); }
}
.stat-chip{
  position:absolute;
  padding:14px 18px;
  border-radius:16px;
  background:var(--surface);
  box-shadow: 8px 8px 16px var(--shadow-lo), -8px -8px 16px var(--shadow-hi);
  font-size:0.85rem;
}
.stat-chip strong{display:block; font-family:"Fraunces",serif; font-size:1.4rem; color:var(--sage-deep);}
.stat-chip.one{top:6%; left:-6%;}
.stat-chip.two{bottom:8%; right:-8%;}

@media (max-width: 940px){
  .hero-grid{grid-template-columns:1fr; text-align:center;}
  .hero p.lead{margin-left:auto; margin-right:auto;}
  .hero-ctas, .hero-proof{justify-content:center;}
  .hero-art{margin-top:20px;}
  .stat-chip.one{left:2%;}
  .stat-chip.two{right:2%;}
}

/* ---------- section shell ---------- */
.section{padding:90px 0;}
.section-head{max-width:640px; margin:0 auto 56px;}
.section-head.center{text-align:center;}
.section-head .eyebrow{margin-bottom:14px;}
.alt{background:var(--bg-deep);}

/* ---------- feature cards ---------- */
.feature-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:26px;
}
.feature-card{
  padding:34px 28px;
  transition: transform .25s ease;
}
.feature-card:hover{ transform:translateY(-4px); }
.f-icon{
  width:56px; height:56px; border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:22px;
  color:var(--sage-deep);
}
.feature-card h3{margin-bottom:10px;}
.feature-card p{margin-bottom:0; font-size:0.96rem;}

@media (max-width: 900px){ .feature-grid{grid-template-columns:1fr 1fr;} }
@media (max-width: 620px){ .feature-grid{grid-template-columns:1fr;} }

/* ---------- how it works ---------- */
.steps{
  display:grid; grid-template-columns:repeat(3,1fr); gap:26px; counter-reset: step;
}
.step{padding:32px 28px; position:relative;}
.step-num{
  width:40px; height:40px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-family:"Fraunces",serif; color:var(--clay-deep);
  margin-bottom:18px;
}
@media (max-width: 820px){ .steps{grid-template-columns:1fr;} }

/* ---------- stats bar ---------- */
.stats-bar{
  display:grid; grid-template-columns:repeat(4,1fr);
  padding:44px 20px; gap:20px; text-align:center;
}
.stats-bar div strong{
  display:block; font-family:"Fraunces",serif; font-size:2.2rem; color:var(--ink);
}
.stats-bar div span{color:var(--ink-faint); font-size:0.9rem;}
@media (max-width: 700px){ .stats-bar{grid-template-columns:1fr 1fr;} }

/* ---------- testimonials ---------- */
.testi-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:26px;
}
.testi-card{padding:32px 28px;}
.testi-quote{font-size:1.02rem; color:var(--ink); margin-bottom:22px;}
.testi-person{display:flex; align-items:center; gap:12px;}
.testi-avatar{
  width:42px; height:42px; border-radius:50%;
  background:linear-gradient(160deg, var(--sage), var(--clay));
}
.testi-person strong{display:block; font-size:0.92rem;}
.testi-person span{font-size:0.82rem; color:var(--ink-faint);}
@media (max-width: 900px){ .testi-grid{grid-template-columns:1fr;} }

/* ---------- faq ---------- */
.faq{max-width:760px; margin:0 auto;}
.faq-item{margin-bottom:16px; padding:8px 26px;}
.faq-item summary{
  cursor:pointer; list-style:none; padding:16px 0;
  font-weight:600; display:flex; justify-content:space-between; align-items:center;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+"; font-size:1.4rem; color:var(--sage-deep); font-weight:400;}
.faq-item[open] summary::after{content:"–";}
.faq-item p{padding-bottom:16px; margin:0;}

/* ---------- download CTA ---------- */
.download{
  text-align:center; padding:80px 40px;
}
.download h2{max-width:20ch; margin-left:auto; margin-right:auto;}
.store-row{display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-top:30px;}
.store-badge{
  display:flex; align-items:center; gap:12px;
  padding:13px 24px; border-radius:16px;
  background:var(--surface); color:var(--ink);
  box-shadow: 6px 6px 14px var(--shadow-lo), -6px -6px 14px var(--shadow-hi);
}
.store-badge svg{width:26px; height:26px; color:var(--ink);}
.store-badge small{display:block; font-size:0.68rem; color:var(--ink-faint);}
.store-badge strong{font-size:1rem; font-family:"Fraunces",serif;}

/* ---------- ad slot ---------- */
.ad-slot{
  margin:0 auto; max-width:var(--max); padding:0 28px;
}
.ad-slot .ad-inner{
  min-height:110px; border-radius:18px;
  border:1px dashed var(--line);
  display:flex; align-items:center; justify-content:center;
  color:var(--ink-faint); font-size:0.82rem;
}

/* ---------- footer ---------- */
footer{
  background:var(--ink); color:#DCE6E0; padding:64px 0 30px; margin-top:40px;
}
.foot-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px; margin-bottom:46px;
}
.foot-grid h4{color:#fff; font-size:0.95rem; font-family:"Sora",sans-serif; font-weight:600; margin-bottom:16px;}
.foot-grid p{color:#9FB0A8;}
.foot-grid li{margin-bottom:10px;}
.foot-grid a{color:#B9C6C0; font-size:0.92rem; transition:color .2s ease;}
.foot-grid a:hover{color:#fff;}
.foot-bottom{
  border-top:1px solid #3A4A44; padding-top:24px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  color:#8AA098; font-size:0.85rem;
}
@media (max-width: 780px){ .foot-grid{grid-template-columns:1fr 1fr;} }

/* ---------- generic page (legal / about / contact) ---------- */
.page-hero{padding:70px 0 20px;}
.prose{max-width:760px; margin:0 auto;}
.prose h2{margin-top:1.6em;}
.prose ul{list-style:disc; padding-left:1.4em; margin-bottom:1em;}
.prose li{color:var(--ink-soft); margin-bottom:0.4em;}
.updated{color:var(--ink-faint); font-size:0.9rem;}

.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:40px; max-width:960px; margin:0 auto;}
.contact-card{padding:36px;}
.form-field{margin-bottom:18px;}
.form-field label{display:block; margin-bottom:8px; font-size:0.9rem; font-weight:600;}
.form-field input, .form-field textarea{
  width:100%; padding:14px 16px; border:none; border-radius:14px;
  background:var(--surface); color:var(--ink); font-family:inherit; font-size:0.96rem;
  box-shadow: inset 4px 4px 9px var(--shadow-lo), inset -4px -4px 9px var(--shadow-hi);
}
.form-field textarea{resize:vertical; min-height:120px;}
@media (max-width:780px){ .contact-grid{grid-template-columns:1fr;} }