:root{
  --bg:#D2D2D2;
  --ink:#000000;
  --muted:#333333;
  --accent:#EF8632;
  --card:#ffffff;
  --border:#c0c0c0;
  --shadow:0 8px 20px rgba(0,0,0,.1);
  --radius:18px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1080px;margin:0 auto;padding:28px}

/* HERO */
header.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:28px;align-items:center}
.hero-card{background:var(--card);border:1px solid var(--border);border-radius:24px;padding:32px;box-shadow:var(--shadow)}
.hero h1{font-size:clamp(34px,5vw,56px);line-height:1.05;margin:2px 0 12px;letter-spacing:-.02em;color:var(--ink)}
.hero p{font-size:clamp(16px,2vw,20px);color:var(--muted);margin:0 0 22px}

.badges{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0 18px}
.badge{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;background:#f2f2f2;border:1px solid var(--border);color:var(--ink);font-size:13px}
.badge .dot{width:8px;height:8px;border-radius:50%;background:var(--accent)}

.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 16px;border-radius:16px;border:1px solid var(--border);background:var(--card);color:var(--ink);font-weight:600;transition:transform .05s ease, box-shadow .2s ease, border-color .2s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(0,0,0,.1)}
.btn.primary{border:none;background:var(--accent);color:#fff;box-shadow:0 8px 18px rgba(239,134,50,.3)}

/* Device mock */
.device{background:var(--card);border:1px solid var(--border);border-radius:32px;padding:20px;box-shadow:var(--shadow)}
.device .screen{border-radius:28px;overflow:hidden;background:#000;border:1px solid #121212;aspect-ratio:1179/2556;max-width:380px;margin:0 auto}
.device .screen img{width:100%;height:auto;display:block}

/* Sections */
.section{margin:64px 0}
.section h2{font-size:clamp(24px,3.5vw,36px);margin:0 0 10px;letter-spacing:-.01em;color:var(--ink)}
.section p.lead{color:var(--muted);margin:0 0 18px}

/* Feature blocks */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.feature{background:var(--card);border:1px solid var(--border);border-radius:20px;padding:18px;box-shadow:var(--shadow)}
.feature h3{margin:0 0 8px;font-size:18px;color:var(--ink)}
.feature p{margin:0;color:var(--muted)}

/* Gallery */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.shot{background:var(--card);border:1px solid var(--border);border-radius:22px;padding:10px;box-shadow:var(--shadow)}
.shot img{width:100%;height:auto;border-radius:16px;display:block}
.shot figcaption{font-size:13px;color:var(--muted);margin-top:8px}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.step{background:var(--card);border:1px solid var(--border);border-radius:20px;padding:18px;box-shadow:var(--shadow)}
.step .num{font-weight:800;color:var(--accent);font-size:14px;letter-spacing:.08em}
.step h3{color:var(--ink)}
.step p{color:var(--muted)}

/* Footer */
footer{margin:70px 0 10px;color:var(--muted)}
.links{display:flex;gap:18px;flex-wrap:wrap}

/* Responsive */
@media (max-width:1000px){
  header.hero{grid-template-columns:1fr}
  .device .screen{max-width:320px}
  .features{grid-template-columns:1fr 1fr}
  .gallery{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr}
}
@media (max-width:560px){
  .features{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr}
}

* Make the Instagram badge the same footprint as the App Store badge */
.cta { display:flex; gap:20px; align-items:center; flex-wrap:wrap; }

/* Hard-size the anchor and prevent flex from shrinking it */
.btn-instagram{
  display:flex;                 /* block-level flex to honor width/height */
  justify-content:center;
  align-items:center;
  flex: 0 0 180px;              /* do not shrink; exact width */
  width:180px !important;       /* enforce width against any earlier rules */
  height:60px !important;
  background:linear-gradient(45deg,#f58529,#dd2a7b,#8134af,#515bd4);
  border-radius:12px;
  text-decoration:none;
  overflow:hidden;              /* keep the inner icon contained */
}

/* Ensure any generic .btn rules don’t add padding or change width */
a.btn-instagram.btn{ padding:0; border:none; }

/* Size the glyph inside and keep it centered */
.btn-instagram img{
  width:32px; height:32px;
  display:block;
  flex-shrink:0;
  pointer-events:none;
}

/* App Store button */
.btn-appstore {
  background-color: #000000;
  color: #ffffff;
  border: none;
  display: inline-flex;
  align-items: center;
  padding: 12px 20px;
  border-radius: 12px;
  font-weight: 600;
  gap: 8px;
  text-decoration: none;
}
.btn-appstore:hover {
  background-color: #111111;
}

/* Optional small icons inside buttons */
.btn-appstore img,
.btn-instagram img {
  width: 20px;
  height: 20px;
  display: inline-block;
}

/* Uniform badge frame for both buttons */
.badge-180x60{
  width:180px;
  height:60px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  text-decoration:none;
  flex:0 0 180px;        /* never shrink in the flex row */
  overflow:hidden;
}

/* App Store uses the image as content; no background needed */

/* Instagram badge style */
.badge-180x60.ig{
  background:linear-gradient(45deg,#f58529,#dd2a7b,#8134af,#515bd4);
}

/* Prevent global rules from shrinking the glyph */
.badge-180x60 img{
  display:block;
  max-width:none;
  flex-shrink:0;
}

/* Uniform badge (exactly 180x60) */
.cta .ig-badge {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 180px !important;
  height: 60px !important;
  flex: 0 0 180px !important;         /* don't allow shrinking in flex row */
  background: linear-gradient(45deg,#f58529,#dd2a7b,#8134af,#515bd4) !important;
  border-radius: 12px !important;
  text-decoration: none !important;
  overflow: hidden !important;
  /* temp debug outline – remove after you see it */
  /* outline: 1px solid rgba(0,0,0,.15); */
}
.cta .ig-badge img {
  width: 32px !important;
  height: 32px !important;
  display: block !important;
  flex-shrink: 0 !important;
  pointer-events: none !important;
}