/* ===============  Base / Theme  =============== */
:root{
  /* Brand from logo */
  --teal:#008D96;        /* primary brand */
  --teal-600:#077b83;
  --teal-700:#066a71;
  --teal-50:#e6f7f8;

  /* Neutrals */
  --bg:#ffffff;
  --text:#0e1b1c;
  --muted:#566b70;

  /* Surfaces */
  --card:#ffffff;
  --shadow: 0 8px 24px rgba(0,0,0,.12);

  /* Accents */
  --accent:#19cfc0;
  --rule:#eef2f2;

  /* Footer */
  --footer-bg:#083c3f;
  --footer-fg:#d7f0f0;
  --footer-fg-weak:#bfe7e7;

  /* Focus */
  --focus:#0ea5b1;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font: 16px/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI",
       Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Utilities */
.wrap{width:min(1100px, 92%); margin-inline:auto}
.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;}
.shadow{box-shadow:var(--shadow)}
.card{background:var(--card); border-radius:14px; padding:20px}
.rule{border:0; border-top:1px solid var(--rule); margin:24px 0}

/* Links / focus */
a{color:inherit}
a:focus-visible, button:focus-visible{outline:3px solid var(--focus); outline-offset:2px; border-radius:6px}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.75rem 1.1rem; border-radius:10px; text-decoration:none;
  font-weight:600; border:2px solid transparent;
  transition:background-color .2s, border-color .2s, transform .02s;
  cursor:pointer;
}
.btn--primary{background:var(--teal); color:#fff; border-color:var(--teal)}
.btn--primary:hover{background:var(--teal-600); border-color:var(--teal-600)}
.btn--ghost{background:transparent; color:var(--teal); border-color:var(--teal)}
.btn--ghost:hover{background:var(--teal-50)}
.btn:active{transform:translateY(1px)}

/* Header */
.site-header{
  position:sticky; top:0; z-index:20; background:#fff; border-bottom:1px solid var(--rule);
  backdrop-filter:saturate(120%) blur(6px);
}
.site-header .wrap{display:flex; align-items:center; justify-content:space-between; padding:12px 0}
.brand{display:flex; align-items:center; gap:.6rem; color:var(--text); text-decoration:none; font-weight:700}
.brand img{width:34px; height:34px; border-radius:6px}
.nav{display:flex; align-items:center; gap:1rem}
.nav a{color:var(--text); text-decoration:none; font-weight:600}
.nav a:hover{color:var(--teal)}
.nav-toggle{display:none; background:none; border:0}
.nav-toggle .bar{width:23px; height:2px; background:var(--text); margin:5px 0}

/* Hero */
.hero{position:relative; overflow:hidden}
.__bg{
  position:absolute; inset:0; background:linear-gradient(115deg, var(--teal) 0%, var(--teal-700) 60%, #0a6064 100%);
  opacity:.12; z-index:-1;
}
.hero__inner{display:grid; grid-template-columns:1.2fr .9fr; gap:28px; padding:64px 0 36px}
.hero__copy h1{font-size:clamp(32px, 6vw, 48px); margin:0 0 12px}
.lead{font-size:1.1rem; color:var(--muted); margin:0 0 16px}
.cta{display:flex; gap:.75rem; margin-bottom:12px}
.trust{display:flex; gap:1rem; padding:0; list-style:none; color:#2a3b3d; margin:10px 0 0}

/* Mock media */
.hero__media{display:flex; align-items:center; justify-content:center}
.mock-screenshot{width:100%; border-radius:16px; overflow:hidden; border:1px solid #e6eeee}
.mock-status{background:var(--teal); color:#fff; padding:10px 12px; font-weight:700}
.mock-list{background:#fff}
.mock-list .item{display:flex; justify-content:space-between; padding:12px 14px; border-top:1px solid #f0f5f5}
.mock-list .item span{font-weight:600}
.mock-list .item em{color:var(--muted); font-style:normal}

/* Sections */
.section{padding:64px 0}
.section.alt{background:#f8fbfb}
.section.emphasis{background:linear-gradient(115deg, var(--teal) 0%, var(--teal-700) 100%); color:#fff}
.section__title{font-size:clamp(26px, 4.6vw, 36px); margin:0 0 18px}
.accent{color:var(--teal)}
.grid{display:grid; gap:18px}
.grid-3{grid-template-columns:repeat(3, 1fr)}
.grid-2{grid-template-columns:repeat(2, 1fr)}

.feature .icon{font-size:24px; margin-bottom:6px}

/*padding issue if taking away*/
/* Compact section + tighter rule */
.section--compact { padding-block: 16px; }      /* was 64px */
.rule--tight     { margin: 12px 0; }            /* was 24px 0 */

/* Pricing */
.price ul{padding-left:18px; margin:12px 0}
.price.highlight{border:2px solid var(--accent)}
.disclaimer{color:#244; margin-top:10px}
.section.emphasis .disclaimer{color:#eaffff; opacity:.95}

.hero__screenshot {
  display: block;
  width: 50%;
  height: auto;
  border-radius: 16px;
  border: 1px solid #e6eeee;
}
/* FAQ */
.faq{background:#fff; border:1px solid #e8f0f0; border-radius:10px; padding:14px 16px; margin:10px 0}
.faq > summary{cursor:pointer; font-weight:700}
.faq[open]{box-shadow:var(--shadow)}

/* Download */
.download{display:grid; grid-template-columns:1fr auto; align-items:center; gap:24px}
.download__logo{width:84px; height:84px; border-radius:12px; background:#fff; padding:6px}

/* Footer */
.site-footer{background:var(--footer-bg); color:var(--footer-fg); padding:26px 0}
.footer__grid{display:grid; grid-template-columns:1fr auto; gap:16px; align-items:center}
.footer__brand{display:flex; align-items:center; gap:.6rem; font-weight:700}
.footer__brand img{width:28px; height:28px; border-radius:6px}
.footer__nav{display:flex; gap:1rem}
.footer__nav a{color:var(--footer-fg); text-decoration:none}
.footer__nav a:hover{color:#fff}
.footer__copy{grid-column:1 / -1; font-size:.9rem; color:var(--footer-fg-weak)}

/* Responsive */
@media (max-width: 960px){
  .hero__inner{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr 1fr}
  .download{grid-template-columns:1fr}
}
@media (max-width: 720px){
  .grid-3, .grid-2{grid-template-columns:1fr}
  .nav{display:none; position:absolute; right:4%; top:64px; background:#fff; padding:12px; border:1px solid var(--rule); border-radius:10px; flex-direction:column; width:min(240px, 90%)}
  .nav a{padding:8px 4px}
  .nav.show{display:flex}
  .nav-toggle{display:block}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important}
}