:root{
  --ink:#36454f;       /* Zynk main */
  --ink-700:#2b3840;
  --bg:#ffffff;
  --muted:#6b7a86;
  --accent:#0ea5e9;
  --ring:rgba(14,165,233,.35);
  --card:#f6f8f9;
  --shadow:0 10px 30px rgba(0,0,0,.08);
  --radius:16px;
  --radius-lg:22px;
  --radius-xl:28px;
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  color:var(--ink);
  background:
    radial-gradient(1200px 600px at 10% -20%, #eef3f6 0%, transparent 70%),
    radial-gradient(1000px 600px at 110% -10%, #eef3f6 0%, transparent 70%),
    var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{color:var(--ink); text-decoration:none}
img{max-width:100%; height:auto; display:block}

/* Layout */
.container{width:min(1120px, 92%); margin-inline:auto}
@media (max-width: 650px) {
  .nav-links {
    display: none !important;
  }
}
header.nav{
  position:sticky; top:0; background:rgba(255,255,255,.7); backdrop-filter:saturate(180%) blur(12px);
  z-index:20;
}
.nav-inner{display:flex; align-items:center; justify-content:space-between; padding:.8rem 0}
.brand{display:flex; align-items:center; gap:.6rem; font-weight:700; text-decoration:none}
.brand-logo{width:38px; height:38px; display:grid; place-items:center}
.nav-links{display:flex; gap:1.2rem; align-items:center}
.nav-links a{opacity:.9}
.nav-links a:hover{opacity:1}

/* Buttons */
.btn{
  appearance:none; border:1px solid transparent; background:var(--ink); color:#fff;
  padding:.78rem 1rem; border-radius:999px; font-weight:600; letter-spacing:.2px;
  box-shadow:0 6px 18px rgba(54,69,79,.25); transition:.2s transform,.2s box-shadow,.2s background;
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  text-decoration:none;                                     /* ensures no underline */
}
.btn:hover{transform:translateY(-1px); box-shadow:0 10px 24px rgba(54,69,79,.28)}
.btn.secondary{background:#fff; color:var(--ink); border-color:#d6dee4; box-shadow:none}
.btn.small{padding:.6rem .9rem; font-weight:600}

/* Hero */
.hero{padding:4.5rem 0 3rem; text-align:center; position:relative}
.hero h1{
  font-size:clamp(2rem, 2.8rem + 1vw, 4rem);
  line-height:1.1; letter-spacing:-.02em; margin:.6rem 0 1rem;
}
.hero p.lead{font-size:clamp(1rem, .98rem + .5vw, 1.25rem); color:var(--muted); max-width:820px; margin-inline:auto}
.hero-cta{display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap}

.badge{
  display:inline-flex; align-items:center; gap:.5rem; padding:.35rem .7rem; border:1px solid #dbe3e8;
  border-radius:999px; font-size:.85rem; color:var(--muted); background:#fff
}

/* Sections */
section{padding:3.5rem 0}
.section-title{text-align:center; margin-bottom:1.6rem}
.section-title h2{font-size:clamp(1.5rem, 1.3rem + .9vw, 2.2rem); margin:.2rem 0 .4rem; letter-spacing:-.01em}
.section-title p{color:var(--muted); max-width:760px; margin:.2rem auto}
.leadish{font-size:1.05rem}

/* ARTICLE-LIKE CARDS (analytics) */
.cards{display:grid; grid-template-columns:repeat(12,1fr); gap:1.2rem}
.card{
  grid-column:span 6; background:#fff; border:1px solid #e9eef2; border-radius:var(--radius-lg);
  box-shadow:var(--shadow); padding:1.2rem; display:flex; flex-direction:column; gap:.6rem;
}
.card h3{margin:.2rem 0 .2rem}
.kpi{font-weight:700; font-size:1.05rem; color:var(--ink-700); background:var(--card); padding:.45rem .7rem; border-radius:10px; display:inline-block; margin-bottom:.2rem}
.chart{
  border-radius:14px; background:linear-gradient(180deg,#f7fafc 0%, #eef3f6 100%);
  border:1px solid #e5edf1; padding:10px;
}
.chart-img{
  width:100%;
  aspect-ratio:16/10;         /* consistent analytics preview */
  object-fit:contain;
  border-radius:12px;
  background:#fff;
  box-shadow:0 1px 0 rgba(0,0,0,.03) inset;
}
@media (max-width:900px){ .card{grid-column:span 12} }

/* PROBLEM / SOLUTION */
.split{display:grid; grid-template-columns:1.2fr .8fr; gap:2rem; align-items:center}
.split .media{border-radius:var(--radius-xl); overflow:hidden; border:1px solid #e9eef2; box-shadow:var(--shadow)}
@media (max-width:960px){ .split{grid-template-columns:1fr} }

/* two-column bullets */
.bullets{margin-top:.8rem}
.bullets ul{margin:0; padding-left:1.2rem}
.bullets.two-col{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
@media (max-width:720px){ .bullets.two-col{grid-template-columns:1fr} }

/* callout box under bullets */
.callout{
  margin-top:1.2rem; padding:1rem; background:#fff; border:1px solid #e9eef2; border-radius:18px; box-shadow:var(--shadow);
}

/* icon-grid of key features */
.icon-grid{
  display:grid; grid-template-columns:repeat(12,1fr); gap:.8rem; margin-top:.6rem
}
.ig-item{
  grid-column:span 6; display:flex; gap:.7rem; align-items:flex-start; padding:.7rem .8rem;
  border:1px solid #e9eef2; border-radius:14px; background:#fdfefe;
}
.ig-ico{
  width:36px; height:36px; border-radius:10px; display:grid; place-items:center;
  background:#eef3f6; font-size:1.1rem
}
.muted{color:#6b7a86; font-weight:500}
@media (max-width:760px){ .ig-item{grid-column:span 12} }

/* WHAT MAKES ZYNK DIFFERENT */
.diff-grid{
  display:grid; grid-template-columns:repeat(12,1fr); gap:1rem; margin-top:.6rem
}
.diff-card{
  grid-column:span 3; background:#fff; border:1px solid #e9eef2; border-radius:18px; padding:1rem;
  box-shadow:var(--shadow); display:flex; flex-direction:column; gap:.3rem
}
.d-ico{
  width:40px; height:40px; border-radius:12px; display:grid; place-items:center;
  background:#eef3f6; font-size:1.2rem; margin-bottom:.2rem
}
.diff-card h3{margin:.1rem 0}
.diff-card p{color:#50606b}
@media (max-width:1100px){ .diff-card{grid-column:span 6} }
@media (max-width:560px){ .diff-card{grid-column:span 12} }

/* PHONE PREVIEWS */
.phone-grid{
  display:grid; grid-template-columns:repeat(12,1fr); gap:1rem;
}
.phone-card{
  grid-column:span 3; background:#fff; border:1px solid #e9eef2; border-radius:28px;
  overflow:hidden; box-shadow:var(--shadow); transition:transform .18s ease;
}
.phone-card:hover{ transform:translateY(-2px) }
.phone-image{
  display:block; width:100%;
  aspect-ratio:9/19.5;         /* tall phone look */
  object-fit:contain;
  background:linear-gradient(180deg,#ffffff 0%, #f6f8f9 100%);
  padding:10px;
}
.phone-card figcaption{padding:.7rem .9rem; color:#50606b; font-weight:600; text-align:center}
@media (max-width:1100px){ .phone-card{grid-column:span 4} }
@media (max-width:780px){ .phone-card{grid-column:span 6} }
@media (max-width:560px){ .phone-card{grid-column:span 12} }

/* Contact / Form */
.contact{display:grid; grid-template-columns:1fr; gap:1.4rem; align-items:start}
.panel{background:#fff; border:1px solid #e9eef2; border-radius:var(--radius-lg); padding:1.2rem; box-shadow:var(--shadow)}
.form-row{display:grid; gap:.8rem; grid-template-columns:1fr 1fr}
@media (max-width:720px){ .form-row{grid-template-columns:1fr} }
.field{display:grid; gap:.35rem}
label{font-weight:600; font-size:.95rem}
input,textarea,select{
  width:100%; padding:.9rem 1rem; border:1px solid #d6dee4; border-radius:12px; background:#fbfdff;
  font:inherit; color:var(--ink); outline:none; transition:border .15s, box-shadow .15s
}
input:focus, textarea:focus, select:focus{border-color:var(--accent); box-shadow:0 0 0 .2rem var(--ring)}
textarea{min-height:120px; resize:vertical}
.small{font-size:.9rem}

/* Footer */
footer{padding:2.2rem 0; color:#6f7d88}
.foot{display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap}
.brand.small{gap:.6rem}

/* Spacing utils */
.mt-1{margin-top:.5rem} .mt-2{margin-top:1rem} .mt-3{margin-top:1.5rem}

/* === Testimonials Scrollable Row === */
.trow{
  display:flex;
  gap:1rem;
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: none;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.trow::-webkit-scrollbar{ display:none; }

/* Optional: make cards look nice while moving */
.tcard{
  flex:0 0 320px;
  will-change: transform;
}
.trow::-webkit-scrollbar {
  height: 8px;
}
.trow::-webkit-scrollbar-thumb {
  background: #d0d8de;
  border-radius: 4px;
}

.tcard {
  flex: 0 0 320px;
  scroll-snap-align: start;
  background:#fff;
  border:1px solid #e9eef2;
  border-radius:18px;
  padding:1rem 1.1rem;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  display:flex;
  flex-direction:column;
  gap:.7rem;
}
.tcard:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 34px rgba(0,0,0,.10);
  border-color:#dfe7ec;
}

.thead{
  display:grid;
  grid-template-columns:auto auto 1fr;
  gap:.8rem;
  align-items:center;
}
.emoji{
  display:inline-grid; place-items:center;
  width:42px; height:42px; border-radius:12px;
  background:#eef3f6; font-size:1.1rem;
}
.avatar{
  width:46px; height:46px; border-radius:50%;
  background:linear-gradient(180deg,#f6f8f9 0%,#e9eef2 100%);
  border:1px solid #dde5ea;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
}
.meta{display:flex; flex-direction:column; gap:.15rem}
.name{font-weight:700; color:var(--ink)}
.role{font-size:.9rem; color:var(--muted)}
.tag{
  align-self:flex-start;
  font-size:.8rem; color:#50606b; background:#f7fafc;
  border:1px solid #e3eaef; padding:.2rem .5rem; border-radius:999px; margin-top:.1rem;
}

.quote{
  margin:.2rem 0 0 0;
  color:var(--ink-700);
  font-size:.95rem;
  line-height:1.55;
}

/* CTA buttons inside sections */
section .btn {
  margin-top: 1.8rem;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

section .btn + .btn {
  margin-left: 0.6rem; /* spacing if two buttons together */
}

/* wrapper div to centre CTAs */
section > .cta,
section .callout > .btn,
section > div > .btn {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-top: 2rem;
}