/* ============================================================
   ByteEngine — SHARED SITE STYLES
   Extracted from the homepage design tokens so every new page
   (contact, pay, terms, privacy, refund, shipping) matches the
   existing homepage exactly. The homepage itself keeps its own
   embedded <style> block untouched — this file is not loaded
   there, only on the new pages, to avoid any risk of breaking it.
   ============================================================ */

:root{
  --bg: #FAFAF8;
  --bg-elevated: #FFFFFF;
  --text: #1B1B18;
  --text-muted: #6E6E68;
  --border: #E7E5E0;
  --accent: #3B5BFF;
  --accent-soft: rgba(59, 91, 255, 0.08);

  --font-display: 'Inter', -apple-system, 'SF Pro Display', system-ui, sans-serif;
  --font-body: 'Inter', -apple-system, system-ui, sans-serif;

  --max-width: 1120px;
  --radius: 14px;
  --radius-sm: 8px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 220ms;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
button{ font-family: inherit; cursor: pointer; }

/* ============================================================
   ACCESSIBLE FOCUS STATES (keyboard navigation)
   ============================================================ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
.btn:focus-visible{ outline-offset: 2px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

.container{
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}
section{ padding: 100px 0; }
section + section{ border-top: 1px solid var(--border); }
@media (max-width: 640px){
  section{ padding: 64px 0; }
}

/* ============================================================
   NAVIGATION
   ============================================================ */
.nav{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 22px 0;
  transition: background var(--dur) var(--ease), backdrop-filter var(--dur) var(--ease), border-color var(--dur) var(--ease), padding var(--dur) var(--ease);
  border-bottom: 1px solid transparent;
  background: rgba(250, 250, 248, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  padding: 16px 0;
}
.nav-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo{
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
}
.nav-links{
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
  margin: 0; padding: 0;
}
.nav-links a{
  font-size: 14px;
  color: var(--text-muted);
  transition: color var(--dur) var(--ease);
}
.nav-links a:hover, .nav-links a.active{ color: var(--text); }
.nav-links a.nav-pay{
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 7px 14px;
  color: var(--text-muted);
}
.nav-links a.nav-pay:hover{ color: var(--text); border-color: var(--text); }

@media (max-width: 640px){
  .nav-links{ gap: 18px; }
  .nav-links a{ font-size: 13px; }
  .nav-links a.nav-pay{ padding: 6px 10px; }
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 500;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.btn:hover{
  border-color: var(--text);
  transform: translateY(-1px);
}
.btn-primary{
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}
.btn-primary:hover{ background: #000; }
.btn:active{ transform: translateY(0); }
.btn:disabled{ opacity: 0.6; cursor: default; transform: none; }
@media (max-width: 480px){
  .btn{ width: 100%; }
}

/* ============================================================
   PAGE HEADER (non-homepage pages use a simpler header than the hero)
   ============================================================ */
.page-header{
  padding-top: 150px;
  padding-bottom: 20px;
}
@media (max-width: 640px){
  .page-header{ padding-top: 104px; }
}
.page-header .kicker{
  font-size: 13px;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 12px;
  letter-spacing: 0.01em;
}
.page-header h1{
  font-family: var(--font-display);
  font-size: clamp(32px, 5vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 700;
  margin: 0 0 16px 0;
}
.page-header p{
  font-size: 17px;
  line-height: 1.65;
  color: var(--text-muted);
  max-width: 620px;
  margin: 0;
}

/* ============================================================
   SECTION HEADERS
   ============================================================ */
.section-head{
  margin-bottom: 48px;
  max-width: 640px;
}
.section-head .kicker{
  font-size: 13px;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 12px;
  letter-spacing: 0.01em;
}
.section-head h3{
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 14px 0;
}
.section-head p{
  color: var(--text-muted);
  font-size: 17px;
  line-height: 1.6;
  margin: 0;
}

.reveal{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 620ms var(--ease), transform 620ms var(--ease);
}
.reveal.in-view{
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   PROSE (policy pages)
   ============================================================ */
.prose{
  max-width: 720px;
}
.prose h2{
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 44px 0 12px 0;
}
.prose h2:first-child{ margin-top: 0; }
.prose p{
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--text-muted);
  margin: 0 0 16px 0;
}
.prose ul{
  margin: 0 0 16px 0;
  padding-left: 20px;
  color: var(--text-muted);
  font-size: 15.5px;
  line-height: 1.75;
}
.prose li{ margin-bottom: 6px; }
.prose strong{ color: var(--text); }
.prose .placeholder{
  color: var(--accent);
  background: var(--accent-soft);
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 500;
}
.prose .meta{
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 40px;
}

/* ============================================================
   CONTACT CARDS
   ============================================================ */
.contact-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 900px){
  .contact-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px){
  .contact-grid{ grid-template-columns: 1fr; gap: 20px; }
}
.contact-card{
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  background: var(--bg-elevated);
}
.contact-card-label{
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 10px;
}
.contact-card-value{
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
  word-break: break-word;
}
.contact-card-note{
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0 0 22px 0;
}
.contact-card .btn{ width: 100%; }
.contact-copy-btn.copied{
  border-color: var(--accent);
  color: var(--accent);
}

/* ============================================================
   FORM FIELDS
   ============================================================ */
.form-field{ margin-bottom: 18px; }
.form-field label{
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.form-field input,
.form-field textarea,
.form-field select{
  width: 100%;
  font-family: inherit;
  font-size: 15px;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  resize: vertical;
  transition: border-color var(--dur) var(--ease);
}
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus{
  outline: none;
  border-color: var(--accent);
}
.form-field .hint{
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 6px;
}
.form-status{
  font-size: 14px;
  margin-bottom: 16px;
  min-height: 20px;
}
.form-status.success{ color: #1a7d43; }
.form-status.error{ color: #b23b3b; }

/* ============================================================
   FOOTER
   ============================================================ */
footer{
  padding: 44px 0 60px;
  border-top: 1px solid var(--border);
}
.footer-inner{
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.footer-row{
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  font-size: 13px;
  color: var(--text-muted);
}
.footer-row a{ transition: color var(--dur) var(--ease); }
.footer-row a:hover{ color: var(--text); }
.footer-row-legal{
  padding-top: 18px;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
  opacity: 0.85;
}
.footer-top{
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.footer-copy{ font-size: 13px; color: var(--text-muted); }
@media (max-width: 500px){
  .footer-top{ flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   PAGE LOADER (kept minimal/optional on inner pages)
   ============================================================ */
#page-loader{
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 2000;
  background: transparent;
  pointer-events: none;
}
#page-loader-bar{
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), #8aa0ff);
  transition: width 320ms var(--ease), opacity 320ms var(--ease);
  border-radius: 0 2px 2px 0;
}
#page-loader.done #page-loader-bar{ opacity: 0; }