/* ==========================================================================
   Pingly — shared styles
   Built on the structural rhythm of the Axino "App Landing" theme,
   restyled in Pingly's calm-orange visual language.
   ========================================================================== */

:root{
  --peach-50:  #FFF6EF;
  --peach-100: #FFE9D8;
  --peach-200: #FFD9BC;
  --peach-300: #FFC98D;
  --orange-400:#FF9F5A;
  --orange-500:#FF7A33;
  --orange-600:#EE5F1F;
  --orange-700:#D9501A;

  --ink:       #17140F;
  --body:      #55524C;
  --body-soft: #8A8781;
  --white:     #FFFFFF;
  --card:      #FFFDFB;

  --shadow-soft: 0 20px 45px -18px rgba(217,110,40,.28);
  --shadow-card: 0 12px 30px -14px rgba(60,40,20,.18);

  --radius-xl: 32px;
  --radius-lg: 24px;
  --radius-md: 18px;
  --radius-pill: 999px;

  --font-display: "Poppins", "Segoe UI", sans-serif;
  --font-body: "Inter", "Segoe UI", sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:hidden; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--body);
  background:var(--peach-50);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--ink);
  margin:0;
  line-height:1.08;
  letter-spacing:-0.02em;
}
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
img{ max-width:100%; display:block; }
button{ font-family:var(--font-body); cursor:pointer; border:none; }
:focus-visible{ outline:2.5px solid var(--orange-600); outline-offset:3px; }

.container{
  width:100%;
  max-width:1240px;
  margin:0 auto;
  padding:0 32px;
}
.container-wide{
  width:100%;
  max-width:1520px;
  margin:0 auto;
  padding:0 32px;
}

.eyebrow{
  display:inline-block;
  font-family:var(--font-body);
  font-weight:700;
  font-size:13px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--orange-600);
  margin-bottom:14px;
}
.eyebrow.on-dark{ color:var(--peach-100); }
.text-accent{ color:var(--orange-600); }

/* ---------- page background wash ---------- */
.bg-wash{
  background-color:#fff;
  background-image:
    radial-gradient(1200px 700px at 14% 0%, rgba(255,201,141,.55), rgba(255,201,141,0) 60%),
    radial-gradient(900px 600px at 88% 6%, rgba(255,159,90,.30), rgba(255,159,90,0) 60%);
  background-repeat:no-repeat;
  background-attachment:scroll;
}

/* ---------- full-bleed image sections (exported design assets) ---------- */
.shot{
  width:100%;
  height:auto;
  display:block;
}
.shot-wrap{
  border-radius:var(--radius-xl);
  overflow:hidden;
  box-shadow:0 30px 60px -30px rgba(120,60,20,.35);
}
.hero-shot{
  width:100%;
  display:flex;
  justify-content:center;
}
.hero-shot img{
  width:auto;
  height:auto;
  max-width:min(96%, 1500px);
  max-height:clamp(480px, 85vh, 900px);
  display:block;
}
.hero-hit{
  position:absolute;
  display:block;
  border-radius:999px;
  cursor:pointer;
}
.hero-hit:hover{ background:rgba(255,255,255,.14); }
.hero-hit:focus-visible{ outline:2.5px solid #fff; outline-offset:2px; }

/* wide desktop monitors: let the hero composite grow bigger/wider still */
@media (min-width: 1600px){
  .container-wide{ max-width:1900px; }
  .hero-shot img{
    max-width:min(96%, 1780px);
    max-height:clamp(560px, 88vh, 1020px);
  }
}
@media (min-width: 2100px){
  .container-wide{ max-width:2200px; }
  .hero-shot img{
    max-width:min(96%, 2040px);
    max-height:clamp(640px, 90vh, 1150px);
  }
}
.sr-only{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-weight:600;
  font-size:15.5px;
  padding:15px 30px;
  border-radius:var(--radius-pill);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{
  color:#fff;
  background:linear-gradient(95deg, var(--orange-400), var(--orange-600));
  box-shadow:var(--shadow-soft);
}
.btn-primary:hover{ filter:brightness(1.04); }
.btn-ghost{
  color:var(--ink);
  background:linear-gradient(180deg,#ffffff, #fff3e9);
  box-shadow:0 10px 24px -14px rgba(60,40,20,.35);
}
.btn-outline{
  color:var(--ink);
  background:transparent;
  border:1.5px solid rgba(23,20,15,.16);
}
.btn-dark{
  color:#fff;
  background:#111;
}
.btn-sm{ padding:11px 20px; font-size:14px; }

/* ---------- nav ---------- */
.nav-wrap{
  position:sticky;
  top:18px;
  z-index:100;
  padding:0 20px;
}
.nav{
  position:relative;
  max-width:1180px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.7);
  border-radius:var(--radius-pill);
  padding:12px 14px 12px 22px;
  box-shadow:0 18px 40px -22px rgba(120,70,20,.45);
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:21px;
  color:var(--ink);
}
.brand-mark{
  width:38px; height:38px;
  border-radius:12px;
  background:#171310;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.brand-mark-img{
  width:38px; height:auto;
  display:block;
  flex-shrink:0;
}
.footer-brand .brand-mark-img{ width:32px; }
.nav-links{
  display:flex;
  align-items:center;
  gap:30px;
  font-size:15px;
  font-weight:500;
  color:var(--ink);
}
.nav-links a{ position:relative; padding:6px 2px; opacity:.82; transition:opacity .15s; }
.nav-links a:hover{ opacity:1; }
.nav-links a.active{ opacity:1; }
.nav-links a.active::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-4px;
  height:2px; background:var(--orange-600); border-radius:2px;
}
.nav-cta{ flex-shrink:0; }
.lang-switch{
  display:flex;
  align-items:center;
  background:var(--peach-100);
  border-radius:var(--radius-pill);
  padding:4px;
  gap:2px;
  flex-shrink:0;
}
.lang-switch a{
  padding:6px 11px;
  font-size:12.5px;
  font-weight:700;
  color:var(--body-soft);
  border-radius:var(--radius-pill);
  letter-spacing:.03em;
}
.lang-switch a.active{
  background:#fff;
  color:var(--orange-600);
  box-shadow:0 3px 8px -3px rgba(60,40,20,.3);
}
@media (max-width:520px){
  .lang-switch a{ padding:6px 8px; font-size:11.5px; }
  .nav-cta{ display:none; }
}
.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  width:40px; height:40px;
  border-radius:50%;
  background:transparent;
  flex-shrink:0;
}
.nav-toggle span{
  display:block;
  width:19px; height:2px;
  border-radius:2px;
  background:var(--ink);
  transition:transform .25s ease, opacity .25s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------- phone mockup ---------- */
.phone{
  position:relative;
  width:272px;
  border-radius:44px;
  background:#0f0f10;
  padding:9px;
  box-shadow:0 30px 60px -20px rgba(40,20,0,.45), 0 0 0 1.5px rgba(255,255,255,.08) inset;
}
.phone-notch{
  position:absolute;
  top:9px; left:50%; transform:translateX(-50%);
  width:112px; height:26px;
  background:#0f0f10;
  border-radius:0 0 18px 18px;
  z-index:5;
}
.phone-notch::after{
  content:"";
  position:absolute; right:14px; top:8px;
  width:9px; height:9px; border-radius:50%;
  background:#20242c;
}
.phone-screen{
  position:relative;
  border-radius:34px;
  overflow:hidden;
  background:#fff;
  min-height:520px;
  display:flex;
  flex-direction:column;
}
.phone.orange .phone-screen{
  background:linear-gradient(190deg, #FF9A52, #FF7530 55%, #F26A2A);
}
.status-bar{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px 2px;
  font-size:13px; font-weight:600;
  font-family:var(--font-display);
}
.phone.orange .status-bar{ color:#fff; }
.status-icons{ display:flex; align-items:center; gap:4px; }
.screen-body{ padding:6px 16px 14px; flex:1; display:flex; flex-direction:column; gap:12px; }
.phone-tabbar{
  display:flex; align-items:center; justify-content:space-around;
  padding:10px 10px 16px;
  background:#fff;
  border-top:1px solid #f1ede8;
  font-size:10px; font-weight:600; color:var(--body-soft);
}
.phone-tabbar .tab{ display:flex; flex-direction:column; align-items:center; gap:4px; }
.phone-tabbar .tab.active{ color:var(--orange-600); }
.tab-fab{
  width:38px;height:38px;border-radius:50%;
  background:linear-gradient(135deg,var(--orange-400),var(--orange-600));
  display:flex;align-items:center;justify-content:center;color:#fff;
  margin-top:-26px; box-shadow:0 8px 18px -6px rgba(230,90,20,.6);
}

/* mini UI atoms used inside phone screens */
.pill-tag{
  font-size:10.5px; font-weight:700; padding:5px 10px; border-radius:var(--radius-pill);
  background:var(--peach-100); color:var(--orange-700);
}
.pill-tag.solid{ background:linear-gradient(95deg,var(--orange-400),var(--orange-600)); color:#fff; }
.pill-tag.on-dark{ background:rgba(255,255,255,.28); color:#fff; }
.search-field{
  display:flex; align-items:center; gap:8px;
  background:#F6F2ED; border-radius:var(--radius-pill);
  padding:10px 14px; font-size:12.5px; color:var(--body-soft);
}
.search-field.on-orange{ background:rgba(255,255,255,.24); color:#fff8f0; }
.mini-card{
  background:#fff; border-radius:16px; padding:12px 14px;
  box-shadow:0 8px 20px -14px rgba(30,20,10,.4);
}
.mini-card h4{ font-size:13px; font-weight:700; margin-bottom:3px; }
.mini-card p{ font-size:11.5px; color:var(--body-soft); line-height:1.4; }
.avatar{
  width:26px;height:26px;border-radius:50%;
  background:linear-gradient(135deg,#f2c199,#e78a4d);
  flex-shrink:0;
}
.seg-toggle{
  display:flex; background:rgba(255,255,255,.3); border-radius:var(--radius-pill); padding:4px; gap:4px;
}
.phone.light .seg-toggle{ background:#F6F2ED; }
.seg-toggle button{
  flex:1; padding:8px 6px; border-radius:var(--radius-pill); font-size:11px; font-weight:600;
  background:transparent; color:var(--body-soft);
}
.seg-toggle button.active{ background:#fff; color:var(--ink); box-shadow:0 4px 10px -6px rgba(0,0,0,.25); }
.phone.orange .seg-toggle button.active{ background:linear-gradient(95deg,#FFB27A,#FF7A33); color:#fff; }

/* ---------- floating utility cards next to phone ---------- */
.float-card{
  background:#fff;
  border-radius:20px;
  padding:16px 18px;
  box-shadow:var(--shadow-card);
  width:230px;
}
.float-card h4{ font-size:14px; font-weight:700; margin-bottom:6px; }
.float-card p{ font-size:12px; color:var(--body-soft); line-height:1.5; }

/* ---------- section spacing ---------- */
section{ padding:96px 0; position:relative; }
.section-tight{ padding:56px 0; }
.section-flush{ padding:36px 0; }
.section-head{ max-width:660px; }
.section-head.center{ margin:0 auto; text-align:center; }
.section-head h2{ font-size:44px; margin-bottom:16px; }
.section-head p{ font-size:17px; color:var(--body-soft); line-height:1.6; }

/* ---------- cards / grids ---------- */
.card-soft{
  background:var(--card);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
}
.stats-bar{
  display:flex;
  justify-content:space-around;
  align-items:center;
  gap:24px;
  padding:40px 48px;
  flex-wrap:wrap;
}
.stat{ text-align:center; }
.stat .num{ font-family:var(--font-display); font-weight:700; font-size:40px; color:var(--ink); }
.stat .label{ font-size:14.5px; color:var(--body-soft); margin-top:4px; }
.stat-divider{ width:1px; height:44px; background:rgba(23,20,15,.1); }

.feature-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
}
.feature-card{
  padding:27px;
}
.feature-icon{
  width:52px;height:52px;border-radius:50%;
  background:linear-gradient(135deg,var(--orange-400),var(--orange-600));
  display:flex;align-items:center;justify-content:center;
  margin-bottom:20px;
  box-shadow:0 10px 22px -10px rgba(230,90,20,.55);
}
.feature-card h3{ font-size:19px; margin-bottom:8px; }
.feature-card p{ font-size:14.5px; line-height:1.6; color:var(--body-soft); }

.panel-orange{
  background:linear-gradient(120deg,#FF9A52 0%, #FF7A33 55%, #F0631F 100%);
  border-radius:var(--radius-xl);
  color:#fff;
  overflow:hidden;
  position:relative;
}
.panel-orange::after{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(600px 300px at 90% 0%, rgba(255,255,255,.18), transparent 60%);
  pointer-events:none;
}

/* ---------- app download (final banner image, no cropping ever) ---------- */
.panel-orange.appdownload{
  overflow:hidden;
  position:relative;
  padding:0;
  height:0;
  padding-top:39.144%; /* 1775 / 4536 — locks the box to the banner image's exact aspect ratio in all browsers */
}
.panel-orange.appdownload::after{
  content:none;
}
.appdownload-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}
.appdownload-hit{
  position:absolute;
  display:block;
  border-radius:999px;
}
.appdownload-hit:hover{ background:rgba(255,255,255,.08); }
.appdownload-hit:focus-visible{ outline:2.5px solid #fff; outline-offset:2px; }

/* ---------- timeline (journey) ---------- */
.timeline-item{
  display:flex; gap:16px; align-items:flex-start;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.22);
  border-radius:18px;
  padding:16px 18px;
}
.timeline-item.now{ background:rgba(255,255,255,.94); color:var(--ink); }
.timeline-item.now p{ color:var(--body); }
.timeline-year{
  flex-shrink:0;
  width:56px;height:56px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:13px;
  background:rgba(255,255,255,.95); color:var(--orange-600);
}
.timeline-item.now .timeline-year{ background:var(--orange-600); color:#fff; }
.timeline-item h4{ font-size:15.5px; margin-bottom:3px; color:#fff; }
.timeline-item.now h4{ color:var(--ink); }
.timeline-item p{ font-size:13px; color:rgba(255,255,255,.85); line-height:1.5; }

/* ---------- dark modes section ---------- */
.modes-dark{
  background:var(--ink);
  border-radius:var(--radius-xl);
  margin:0 32px;
  padding:80px 64px;
  color:#fff;
  animation:breathe-glow 6s ease-in-out infinite;
}
@keyframes breathe-glow{
  0%, 100%{ box-shadow:0 50px 90px -30px rgba(238,95,31,.22), 0 20px 40px -15px rgba(0,0,0,.35); }
  50%{ box-shadow:0 55px 110px -25px rgba(238,95,31,.4), 0 20px 40px -15px rgba(0,0,0,.35); }
}
@media (prefers-reduced-motion: reduce){
  .modes-dark{ animation:none; box-shadow:0 50px 90px -30px rgba(238,95,31,.3), 0 20px 40px -15px rgba(0,0,0,.35); }
}
.modes-dark .container{ padding:0; max-width:1160px; }
.modes-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  align-items:center;
}
.serif-heading{
  font-family:"Playfair Display", Georgia, serif;
  font-weight:700;
  font-size:44px;
  color:#fff;
  line-height:1.1;
  margin:14px 0 18px;
}
.serif-heading.small{ font-size:24px; margin:0 0 10px; color:#fff; }
.eyebrow-outline{
  display:inline-block;
  border:1px solid rgba(255,255,255,.35);
  border-radius:var(--radius-pill);
  padding:6px 16px;
  font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(255,255,255,.85);
}
.modes-intro{
  color:rgba(255,255,255,.65);
  font-size:16px; line-height:1.65;
  max-width:460px;
  margin-bottom:34px;
}
.mode-toggle{
  display:inline-flex;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius-pill);
  padding:5px;
  gap:4px;
  margin-bottom:34px;
}
.mode-toggle-btn{
  background:transparent;
  border:none;
  padding:12px 22px;
  border-radius:var(--radius-pill);
  font-family:var(--font-display);
  font-weight:600;
  font-size:14.5px;
  color:rgba(255,255,255,.55);
  cursor:pointer;
  transition:background .25s, color .25s;
}
.mode-toggle-btn.active{
  background:linear-gradient(95deg,var(--orange-400),var(--orange-600));
  color:#1a1208;
  box-shadow:0 8px 20px -8px rgba(255,140,60,.6);
}
.mode-panel{ display:none; }
.mode-panel.active{ display:block; animation:modeFade .35s ease; }
.mode-panel p{ color:rgba(255,255,255,.7); font-size:15px; line-height:1.65; margin-bottom:18px; max-width:440px; }
.dot-list{ display:flex; flex-direction:column; gap:12px; }
.dot-list li{
  display:flex; align-items:flex-start; gap:12px;
  color:rgba(255,255,255,.85); font-size:15px; line-height:1.5;
}
.dot-list li::before{
  content:"";
  width:7px; height:7px; border-radius:50%;
  background:var(--orange-400);
  margin-top:8px; flex-shrink:0;
}
.modes-visual{ position:relative; display:flex; justify-content:center; min-height:560px; }
.mode-phone{
  position:absolute;
  inset:0; margin:auto;
  max-height:560px; width:auto;
  border-radius:28px;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.6);
  opacity:0;
  transform:scale(.97);
  transition:opacity .35s ease, transform .35s ease;
  pointer-events:none;
}
.mode-phone.active{ opacity:1; transform:scale(1); pointer-events:auto; }
@keyframes modeFade{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); } }

@media (max-width:900px){
  .modes-dark{ margin:0 16px; padding:56px 28px; }
  .modes-grid{ grid-template-columns:1fr; }
  .modes-visual{ min-height:420px; order:-1; }
  .mode-phone{ max-height:420px; }
  .serif-heading{ font-size:34px; }
}

/* ---------- tour swipe carousel (center-focus, Axino style) ---------- */
.tour-carousel{
  display:flex;
  align-items:center;
  gap:18px;
  overflow-x:auto;
  overflow-y:visible;
  scroll-snap-type:none;
  padding:80px 4px 90px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  cursor:grab;
  max-width:1400px;
  margin:0 auto;
}
.tour-carousel:active{ cursor:grabbing; }
.tour-carousel::-webkit-scrollbar{ display:none; }
.tour-slide{
  scroll-snap-align:center;
  flex:0 0 auto;
  height:520px;
  width:auto;
  border-radius:28px;
  box-shadow:0 30px 60px -30px rgba(120,60,20,.35);
  user-select:none;
  -webkit-user-drag:none;
  transform:scale(.82);
  opacity:.55;
  will-change:transform;
}

.tour-strip{
  display:flex;
  gap:22px;
  overflow-x:auto;
  padding:20px 4px 30px;
  scroll-snap-type:x proximity;
}
.tour-strip::-webkit-scrollbar{ height:8px; }
.tour-strip::-webkit-scrollbar-thumb{ background:var(--peach-300); border-radius:8px; }
.tour-strip .phone{ scroll-snap-align:center; flex-shrink:0; transform:scale(.92); opacity:.75; transition:transform .3s, opacity .3s; }
.tour-strip .phone.is-mid{ transform:scale(1); opacity:1; }

/* ---------- newsletter CTA ---------- */
.cta-block{ text-align:center; }
.cta-block h2{ font-size:38px; margin-bottom:10px; }
.cta-block p{ color:var(--body-soft); font-size:16px; margin-bottom:32px; }

.wave-section{ position:relative; overflow:hidden; }
.wave-bg{
  position:absolute;
  left:0; right:0; bottom:-10px;
  width:200%;
  height:140px;
  animation:wave-flow 22s linear infinite;
  pointer-events:none;
  z-index:0;
}
@keyframes wave-flow{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .wave-bg{ animation:none; }
}
.wave-section .container{ position:relative; z-index:1; }
.signup-form{
  display:flex;
  align-items:center;
  gap:8px;
  max-width:480px;
  margin:0 auto;
  background:#fff;
  border-radius:var(--radius-pill);
  padding:8px;
  box-shadow:var(--shadow-card);
}
.signup-form input{
  flex:1;
  border:none;
  outline:none;
  background:transparent;
  padding:12px 16px;
  font-size:15px;
  font-family:var(--font-body);
  color:var(--ink);
}
.signup-form input::placeholder{ color:var(--body-soft); }
.signup-form .btn{ flex-shrink:0; }
.form-note{ font-size:13px; color:var(--body-soft); margin-top:14px; }

/* ---------- 5 apps into 1 ---------- */
.apps-collapse{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-top:22px;
}
.chip-app{
  display:inline-flex;
  align-items:center;
  padding:10px 18px;
  border-radius:var(--radius-pill);
  background:var(--peach-100);
  color:var(--body);
  font-size:14px;
  font-weight:600;
}
.chip-app-solo{
  background:linear-gradient(95deg,var(--orange-400),var(--orange-600));
  color:#fff;
  font-family:var(--font-display);
  font-size:15px;
  padding:11px 22px;
  box-shadow:0 12px 26px -12px rgba(230,90,20,.55);
}
.collapse-arrow{
  font-size:18px;
  color:var(--orange-500);
  flex-shrink:0;
}

/* ---------- footer ---------- */
footer{ padding:0 0 40px; }
.footer-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  background:#fff;
  border-radius:var(--radius-pill);
  padding:16px 28px;
  box-shadow:var(--shadow-card);
}
.footer-brand{ display:flex; align-items:center; gap:10px; font-weight:700; font-family:var(--font-display); }
.footer-links{ display:flex; gap:26px; font-size:14px; color:var(--body-soft); }
.footer-copy{ font-size:14px; color:var(--body-soft); }

/* ---------- misc ---------- */
.chip-row{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{
  padding:9px 16px; border-radius:var(--radius-pill);
  background:rgba(255,255,255,.18); color:#fff; font-size:13.5px; font-weight:600;
  border:1px solid rgba(255,255,255,.3);
}
.quote-mark{ color:var(--peach-300); font-size:52px; font-family:Georgia,serif; line-height:0; }

/* ---------- badge ---------- */
.badge{
  display:inline-flex; align-items:center; gap:8px;
  background:#fff; border-radius:var(--radius-pill);
  padding:8px 16px; font-size:13.5px; font-weight:600; color:var(--orange-700);
  box-shadow:var(--shadow-card);
}
.badge .dot{ width:7px; height:7px; border-radius:50%; background:var(--orange-600); }

/* ---------- mini stat trio (hero) ---------- */
.mini-stats{ display:flex; gap:36px; justify-content:center; flex-wrap:wrap; }
.mini-stats .mstat{ text-align:center; }
.mini-stats .mstat b{ font-family:var(--font-display); font-size:22px; color:var(--ink); }
.mini-stats .mstat span{ display:block; font-size:13px; color:var(--body-soft); margin-top:2px; }

/* ---------- tour steps ---------- */
.tour-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
  gap:20px;
}
.tour-step{ padding:26px; }
.tour-step .step-no{
  font-family:var(--font-display); font-weight:700; font-size:13px;
  color:var(--orange-600); margin-bottom:10px; letter-spacing:.05em;
}
.tour-step h3{ font-size:17px; margin-bottom:6px; }
.tour-step p{ font-size:14px; color:var(--body-soft); line-height:1.55; }

/* ---------- check list ---------- */
.check-list{ display:flex; flex-direction:column; gap:10px; margin-top:18px; }
.check-list li{ display:flex; gap:10px; font-size:14.5px; color:rgba(255,255,255,.92); line-height:1.4; }
.check-list li::before{ content:"✓"; font-weight:700; color:#fff; flex-shrink:0; }
.check-list.on-light li{ color:var(--body); }
.check-list.on-light li::before{ color:var(--orange-600); }

/* ---------- pricing ---------- */
.pricing-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
  align-items:stretch;
}
.price-icon{
  width:52px;height:52px;border-radius:50%;
  background:linear-gradient(135deg,var(--orange-400),var(--orange-600));
  display:flex;align-items:center;justify-content:center;
  margin-bottom:16px;
  box-shadow:0 10px 22px -10px rgba(230,90,20,.55);
  flex-shrink:0;
  transition:transform .28s cubic-bezier(.34,1.56,.64,1), box-shadow .28s ease;
}
.price-card:hover .price-icon{
  transform:scale(1.12) rotate(-6deg);
  box-shadow:0 14px 28px -10px rgba(230,90,20,.7);
}
.price-card.featured .price-icon{
  background:rgba(255,255,255,.22);
  box-shadow:none;
}
.price-card.featured:hover .price-icon{
  box-shadow:0 10px 24px -8px rgba(0,0,0,.25);
}
@media (prefers-reduced-motion: reduce){
  .price-icon{ transition:none; }
  .price-card:hover .price-icon{ transform:none; }
}
.price-icon svg{ width:24px; height:24px; }

.steps-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
  margin-top:44px;
}
@media (max-width:860px){
  .steps-grid{ grid-template-columns:1fr; }
}
.step-card{
  padding:32px;
  position:relative;
}
.step-number{
  width:52px;height:52px;border-radius:50%;
  background:linear-gradient(135deg,var(--orange-400),var(--orange-600));
  display:flex;align-items:center;justify-content:center;
  margin-bottom:20px;
  box-shadow:0 10px 22px -10px rgba(230,90,20,.55);
  font-family:var(--font-display);
  font-weight:700;
  font-size:20px;
  color:#fff;
}
.step-card h3{ font-size:19px; margin-bottom:8px; }
.step-card p{ font-size:14.5px; line-height:1.6; color:var(--body-soft); }

.price-card{
  padding:34px 30px;
  display:flex;
  flex-direction:column;
}
.price-card.featured{
  background:linear-gradient(160deg,#FF9A52,#FF7A33 60%,#F0631F);
  color:#fff;
  border-radius:var(--radius-lg);
  transform:translateY(-10px);
  box-shadow:0 26px 50px -20px rgba(217,80,26,.55);
}
.price-card h3{ font-size:19px; margin-bottom:6px; }
.price-sloth{
  width:64px; height:64px;
  border-radius:50%;
  margin-bottom:14px;
  box-shadow:0 6px 16px -6px rgba(60,40,20,.3);
}
.price-card.featured h3{ color:#fff; }
.price-card .price{ font-family:var(--font-display); font-weight:700; font-size:34px; margin:10px 0 6px; }
.price-card .price span{ font-size:14px; font-weight:500; opacity:.7; }
.price-card .desc{ font-size:13.5px; color:var(--body-soft); margin-bottom:20px; }
.price-card.featured .desc{ color:rgba(255,255,255,.85); }
.price-card ul{ display:flex; flex-direction:column; gap:10px; margin-bottom:26px; flex:1; }
.price-card li{ font-size:14px; display:flex; gap:8px; align-items:flex-start; }
.price-card li::before{ content:"✓"; color:var(--orange-600); font-weight:700; }
.price-card.featured li::before{ color:#fff; }
.price-card .btn{ width:100%; }
.price-tag{
  align-self:flex-start;
  background:rgba(255,255,255,.25);
  padding:4px 12px; border-radius:var(--radius-pill);
  font-size:11.5px; font-weight:700; margin-bottom:14px; letter-spacing:.04em;
}

/* ---------- FAQ ---------- */
.faq-list{ max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:14px; }
.faq-item{ padding:22px 26px; cursor:pointer; }
.faq-item summary{
  list-style:none;
  display:flex; align-items:center; justify-content:space-between;
  font-family:var(--font-display); font-weight:600; font-size:16.5px; color:var(--ink);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+";
  font-size:22px; color:var(--orange-600); flex-shrink:0; margin-left:16px;
  transition:transform .2s;
}
.faq-item[open] summary::after{ content:"–"; }
.faq-item p{ margin-top:14px; font-size:14.5px; color:var(--body-soft); line-height:1.6; }

@media (max-width:860px){
  .pricing-grid{ grid-template-columns:1fr; }
  .price-card.featured{ transform:none; }
}

.features-layout{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:44px;
  align-items:center;
}
@media (max-width:860px){
  .features-layout{
    grid-template-columns:1fr;
    gap:32px;
  }
}

.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

/* ================= RESPONSIVE ================= */
@media (max-width: 980px){
  .feature-grid{ grid-template-columns:1fr; }
  .section-head h2{ font-size:34px; }
  .nav-toggle{ display:flex; }
  .nav-links{
    display:flex;
    position:absolute;
    top:calc(100% + 10px);
    left:0; right:0;
    flex-direction:column;
    align-items:stretch;
    gap:2px;
    background:#fff;
    border-radius:20px;
    padding:10px;
    box-shadow:0 20px 45px -18px rgba(120,60,20,.35);
    opacity:0;
    transform:translateY(-8px);
    pointer-events:none;
    transition:opacity .2s ease, transform .2s ease;
  }
  .nav-links.open{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
  }
  .nav-links li{ width:100%; }
  .nav-links a{
    display:block;
    padding:13px 16px;
    border-radius:12px;
    opacity:1;
  }
  .nav-links a:hover, .nav-links a.active{ background:var(--peach-100); }
  .nav-links a.active::after{ display:none; }
  .pricing-grid{ grid-template-columns:1fr; }
  .price-card.featured{ transform:none; }
}
@media (max-width: 720px){
  .container{ padding:0 20px; }
  section{ padding:64px 0; }
  .stats-bar{ padding:28px 20px; gap:22px; }
  .stat .num{ font-size:30px; }
  h1{ font-size:clamp(34px,9vw,48px) !important; }
  .signup-form{ flex-direction:column; border-radius:24px; }
  .signup-form input{ width:100%; text-align:center; padding:10px; }
  .signup-form .btn{ width:100%; }
  .nav-wrap{ top:12px; padding:0 14px; }
  .nav{ padding:10px 10px 10px 16px; }
  .brand{ font-size:18px; }
  .brand-mark-img{ width:30px; }
  .modes-dark{ margin:0 12px; padding:40px 22px; }
  .modes-grid{ gap:36px; }
  .serif-heading{ font-size:28px; }
  .mode-toggle{ width:100%; }
  .mode-toggle-btn{ flex:1; padding:11px 10px; font-size:13px; }
  .apps-collapse{ gap:8px; }
  .tour-slide{ height:380px; }
  .tour-carousel{ padding:56px 4px 64px; }
  .tour-carousel{ max-width:100%; }
  .hero-shot{ margin-top:28px; }
  .container:has(> .shot),
  .container:has(> .shot-wrap),
  .container-wide:has(> .hero-shot),
  .container:has(> .shot-wrap.hero-shot){
    padding:0 8px;
  }
  .shot-wrap{ border-radius:20px; }
}

/* ---------- floating WhatsApp support widget ---------- */
.wa-float-btn{
  position:fixed;
  right:22px;
  bottom:22px;
  width:58px;
  height:58px;
  border-radius:50%;
  background:linear-gradient(135deg,#25D366,#128C7E);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 14px 30px -8px rgba(18,140,126,.55);
  z-index:999;
  transition:transform .2s ease, box-shadow .2s ease;
}
.wa-float-btn:hover{
  transform:translateY(-3px) scale(1.05);
  box-shadow:0 18px 36px -8px rgba(18,140,126,.65);
}
@media (max-width:520px){
  .wa-float-btn{ right:16px; bottom:16px; width:52px; height:52px; }
  .wa-float-btn svg{ width:26px; height:26px; }
}
@media (max-width:720px){
  .three-col-grid{ grid-template-columns:1fr !important; }
}
.wave-bg{ max-width:none; }