:root{
  --ink: #f2f2f0;
  --muted: #9a9a9a;
  --line: #2e2e2e;
  --paper: #121212;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.5;
}
a{ color: inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

/* ---------- header / nav ---------- */
header{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  width: 100%;
  padding: 26px 5vw;
  flex-wrap: wrap;
  gap: 16px;
}
.logo{
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.nav-cta{
  border: 1px solid var(--ink);
  padding: 10px 24px;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: background 0.2s ease, color 0.2s ease;
}
.nav-cta:hover{
  background: var(--ink);
  color: var(--paper);
}

/* ---------- hero ---------- */
.hero{
  position: relative;
}
.hero-image{
  display: block;
  width: 100%;
  height: 100vh;
  object-fit: cover;
  object-position: center;
}
.hero-content{
  max-width: 720px;
  margin: 0 auto;
  padding-top: 56px;
  text-align:center;
}
.hero-content h1{
  font-size: clamp(30px, 4.5vw, 44px);
  font-weight: 400;
  letter-spacing: 0.5px;
  margin-bottom: 26px;
}
.hero-content p{
  font-size: 17px;
  color: var(--muted);
  margin-bottom: 34px;
}
.btn-outline{
  display:inline-block;
  border: 1px solid var(--ink);
  padding: 12px 30px;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: background 0.2s ease, color 0.2s ease;
}
.btn-outline:hover{
  background: var(--ink);
  color: var(--paper);
}

/* ---------- price section ---------- */
.price-section{
  text-align:center;
  padding: 100px 6vw 10px;
}
.price-section h2{
  font-size: clamp(26px, 3.6vw, 36px);
  font-weight: 400;
  letter-spacing: 0.5px;
}
.price-section .subtitle{
  font-style: italic;
  color: var(--muted);
  margin-top: 8px;
  margin-bottom: 40px;
  font-size: 16px;
}
.chart{
  max-width: 900px;
  margin: 0 auto;
  height: clamp(220px, 45vw, 420px);
}

/* ---------- testimonial ---------- */
.testimonial{
  max-width: 1040px;
  margin: 70px auto;
  padding: 0 6vw;
  display: flex;
  align-items: center;
  gap: 36px;
}
.testimonial-image{
  flex-shrink: 0;
  width: 480px;
  height: 480px;
  margin-left: -120px;
  border-radius: 50%;
}
.testimonial-text{
  flex: 1;
  min-width: 0;
  height: 480px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  text-align: left;
}
.testimonial blockquote{
  font-size: clamp(40px, 2.8vw, 26px);
  font-weight: 400;
  line-height: 1.5;
  margin-bottom: 20px;
}
.testimonial .attribution{
  color: var(--muted);
  font-size: 14px;
  letter-spacing: 0.5px;
}

/* ---------- social links row ---------- */
.social-row{
  display:flex;
  flex-wrap: wrap;
  justify-content:center;
  gap: 28px;
  padding: 50px 6vw;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.social-row a{
  color: var(--muted);
  letter-spacing: 0.5px;
  transition: color 0.2s ease;
}
.social-row a:hover{ color: var(--ink); }

/* ---------- footer ---------- */
footer{
  text-align:center;
  padding: 30px 6vw;
  font-size: 13px;
  color: var(--muted);
}
/* ---------- responsive ---------- */
@media (max-width: 900px){
  .hero-content{ padding: 56px 6vw 70px; }
  .testimonial{ margin: 56px auto; }
  .social-row{ gap: 22px; padding: 40px 6vw; }
}

@media (max-width: 640px){
  .top-bar{ padding: 12px 6vw; font-size: 12px; }
  .testimonial{ flex-direction: column; text-align: center; }
  .testimonial-image{ margin-left: 0; }
  .testimonial-text{ height: auto; text-align: center; }
  header{
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 6vw;
    gap: 14px;
  }
  .logo{ font-size: 24px; }
  .nav-cta{ padding: 9px 20px; font-size: 12px; align-self: flex-start; }
  .hero-content{ padding: 44px 6vw 56px; }
  .hero-content h1{ margin-bottom: 18px; }
  .hero-content p{ font-size: 15px; margin-bottom: 26px; }
  .btn-outline{ padding: 11px 24px; }
  .price-section{ padding: 64px 6vw 6px; }
  .price-section .subtitle{ margin-bottom: 28px; }
  .testimonial{ margin: 44px auto; padding: 0 6vw; }
  .social-row{
    gap: 16px 26px;
    padding: 34px 6vw;
    font-size: 12px;
  }
  footer{ padding: 24px 6vw 40px; }
}

@media (max-width: 380px){
  .hero-content h1{ font-size: 26px; }
  .social-row{ gap: 14px 20px; }
  .nav-cta, .btn-outline{ width: 100%; text-align:center; }
}