:root{
  --ink:#111318;
  --ink-soft:#565d6b;
  --muted:#8b93a1;
  --bg:#ffffff;
  --bg-alt:#f7f7f9;
  --border:#e7e8ec;
  --accent:#2b2f77;
  --accent-light:#eceafc;
  --radius:14px;
  --shadow-sm:0 1px 2px rgba(17,19,24,.05);
  --shadow-md:0 12px 28px -10px rgba(17,19,24,.14);
  --ease:cubic-bezier(.22,1,.36,1);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*,*::before,*::after{box-sizing:border-box; margin:0; padding:0;}
body{
  font-family:var(--font); color:var(--ink); background:var(--bg); line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{ text-decoration:none; color:inherit;}
ul{ list-style:none;}
.wrap{ width:100%; max-width:1120px; margin:0 auto; padding:0 24px;}

/* ===== TOPBAR ===== */
.topbar{ border-bottom:1px solid var(--border); padding:18px 0;}
.topbar__inner{ display:flex; align-items:center; justify-content:space-between;}
.logo{ font-weight:800; font-size:1.05rem; letter-spacing:-0.01em;}
.logo span{ color:var(--muted); font-weight:600;}
.topbar__contact{ font-size:.88rem; font-weight:600; color:var(--ink-soft); transition:.2s;}
.topbar__contact:hover{ color:var(--ink);}

/* ===== INTRO ===== */
.intro{ padding:72px 0 48px;}
.eyebrow{
  display:inline-flex; font-size:.76rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--accent); background:var(--accent-light); padding:6px 14px; border-radius:999px; margin-bottom:18px;
}
.intro h1{ font-size:clamp(1.9rem,4vw,2.6rem); font-weight:800; letter-spacing:-0.02em; margin-bottom:16px; max-width:640px;}
.intro p{ color:var(--ink-soft); font-size:1.05rem; max-width:600px;}

/* ===== GRID ===== */
.grid-wrap{ padding:20px 0 90px;}
.samples{ display:grid; grid-template-columns:1fr 1fr; gap:28px;}
.card{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden;
  display:flex; flex-direction:column; transition:transform .3s var(--ease), box-shadow .3s var(--ease);
  position:relative;
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md);}
.card--featured{ grid-column:span 2; flex-direction:row;}
.card--featured .card__preview{ flex:0 0 46%;}
.card--featured .card__body{ flex:1;}
.card__badge{
  position:absolute; top:16px; left:16px; z-index:2; background:var(--accent); color:#fff;
  font-size:.7rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:5px 12px; border-radius:999px;
}

.card__preview{ display:block; background:var(--bg-alt);}
.card__frame{ display:block; position:relative; width:100%; aspect-ratio:16/10; overflow:hidden; background:#fff;}
.card__frame iframe{ position:absolute; top:0; left:0; border:0; pointer-events:none; background:#fff;}

.card__body{ padding:26px; display:flex; flex-direction:column; flex:1;}
.card__tag{ font-size:.74rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); margin-bottom:8px;}
.card__body h3{ font-size:1.25rem; font-weight:800; letter-spacing:-0.01em; margin-bottom:8px;}
.card__body p{ color:var(--ink-soft); font-size:.94rem; margin-bottom:16px;}
.card__features{ display:flex; flex-direction:column; gap:8px; margin-bottom:20px;}
.card__features li{ display:flex; align-items:flex-start; gap:8px; font-size:.88rem; color:var(--ink-soft); font-weight:500;}
.card__features li::before{ content:"✓"; color:var(--accent); font-weight:800; flex-shrink:0;}
.card__link{ margin-top:auto; font-weight:700; font-size:.9rem; color:var(--ink); transition:.2s;}
.card__link:hover{ color:var(--accent);}

/* ===== FOOTER ===== */
.footer{ border-top:1px solid var(--border); padding:24px 0;}
.footer__inner{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; font-size:.85rem; color:var(--muted);}

/* ===== RESPONSIVE ===== */
@media (max-width:860px){
  .samples{ grid-template-columns:1fr;}
  .card--featured{ grid-column:span 1; flex-direction:column;}
  .card--featured .card__preview{ flex:none;}
}
@media (max-width:560px){
  .intro{ padding:56px 0 36px;}
  .footer__inner{ flex-direction:column; text-align:center;}
}