:root{
  --bg:#0e0e10;
  --card:#141418;
  --muted:#a0a0ad;
  --text:#ffffff;
  --accent:#27d3a2;
  --accent-2:#ff7a59;
  --ring: rgba(39, 211, 162, 0.35);
  --radius: 18px;
}
* { box-sizing: border-box; }
html, body { margin:0; padding:0; height:100%; }
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:#000000;
  background:#ffffff;
  line-height:1.6;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
main{ flex:1 0 auto; }

.container{ max-width:1160px; margin:0 auto; padding:0 20px; }
.btn{ display:inline-flex; align-items:center; gap:.6rem; padding:.9rem 1.2rem; border-radius:14px; border:1px solid rgba(255,255,255,.12); background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); color:#fff; text-decoration:none; font-weight:600; transition: all .25s ease; backdrop-filter: blur(6px); }
.btn:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.25); box-shadow: 0 8px 24px rgba(0,0,0,.35), 0 0 0 6px var(--ring); }
.btn.secondary{ background:transparent; border-color: rgba(255,255,255,.18); font-weight:600; }

header {
  background: #000;
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 1000;
}
.nav{ display:flex; align-items:center; justify-content:space-between; padding:14px 0; }
.brand{ display:flex; gap:.8rem; align-items:center; }
.brand img{ width:100%; height:26px; }
footer .brand img {
    width: 100%;
    height: 20px;
    object-fit: contain;
    max-width: 80px;
}
.gdpr-compliance img {
  width: 120px;
}
section#screens p {
  font-size: 14px;
}
.contact-card .btn {
    cursor: pointer !important;
}
.gdpr-compliance {
    display: none;
}
.container.nav .brand {
    max-width: 120px;
}
.brand strong{ letter-spacing:.2px; font-size:1.05rem; }
.nav a{ color:#fff; text-decoration:none; opacity:.9; margin-left:18px; font-weight:500; }
.nav a:hover{ opacity:1 }

.hero{ padding:96px 0 72px; text-align:center; position:relative; overflow:hidden; }
.headline{ font-size: clamp(2rem, 4.8vw, 3.5rem); font-weight:800; letter-spacing:-.02em; line-height:1.1; }
.sub{ max-width:760px; margin:14px auto 28px; color:var(--muted); font-size: clamp(1rem, 1.6vw, 1.15rem); }
.cta{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

.mock{ margin-top:46px; border-radius:24px; background:linear-gradient(180deg,#1a1a22,#121218); border:1px solid rgba(255,255,255,.08); position:relative; }
.mock-inner{ padding:26px; display:grid; grid-template-columns: 1.15fr 1fr; gap:22px; }
.mock .phone{ height:520px; border-radius:30px; background:linear-gradient(180deg,#0f0f12,#0a0a0c); position:relative; border:1px solid rgba(255,255,255,.08); display:flex; flex-direction:column; }
.phone .status{ height:22px; opacity:.65; border-bottom:1px solid rgba(255,255,255,.06); }
.phone .screen{ flex:1; padding:18px; overflow:hidden; }
.badge{ display:inline-block; padding:.25rem .6rem; border-radius:999px; background: rgba(39,211,162,.14); color:#b8f5e6; font-weight:600; font-size:.8rem; border:1px solid rgba(39,211,162,.35); }

.list{ margin-top:10px; display:grid; gap:10px; }
.item{ display:flex; gap:12px; padding:12px; border:1px solid rgba(255,255,255,.08); background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)); border-radius:14px; }
.item .pic{ width:56px; height:56px; border-radius:12px; background: #23232a; flex:0 0 56px; }
.item h4{ margin:0; font-size:1rem; }
.item p{ margin:.2rem 0 0; color:var(--muted); font-size:.9rem; }

.map-card{ border-radius:16px; border:1px solid rgba(255,255,255,.08); background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)); padding:16px; }
.map{ margin-top:10px; border-radius:12px; background: #202028; height:300px; display:flex; align-items:center; justify-content:center; color:#8a8a98; font-weight:600; letter-spacing:.5px; }

.section{ padding:86px 0; }
.section h2{ font-size: clamp(1.6rem, 3.2vw, 2.2rem); margin:0 0 8px; }
.section p.lead{ color:var(--muted); max-width:820px; }

.grid-3{ display:grid; grid-template-columns: repeat(3, 1fr); gap:18px; margin-top:28px; }
.card{ padding:20px; border-radius:16px; border:1px solid rgba(255,255,255,.08); background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)); }
.contact-card{ background:#ffffff; border:1px solid #e5e7eb; box-shadow: 0 8px 20px rgba(0,0,0,.05); }
.contact-card .lead{ color:#4b5563; }
.contact-card .btn{ background:#111827; color:#ffffff; border-color:#111827; }
.contact-card .btn:hover{ transform: translateY(-1px); box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.card h3{ margin:.3rem 0 .25rem; font-size:1.15rem; }
.card p{ margin:0; color:var(--muted); }

.band{ display:flex; flex-wrap:wrap; gap:12px; margin-top:16px; }
footer .brand img {
  filter: brightness(0) saturate(100%) invert(0%) sepia(82%) saturate(7429%) hue-rotate(217deg) brightness(89%) contrast(115%);
}
.banner{ border-radius:18px; padding:24px; background: linear-gradient(180deg, rgba(39,211,162,.15), rgba(39,211,162,.05)); border:1px solid rgba(39,211,162,.35); }

.download{ text-align:center; padding:86px 0; }
.storebtn{ display:inline-flex; align-items:center; gap:10px; border:1px solid rgba(255,255,255,.16); border-radius:14px; padding:12px 16px; text-decoration:none; color:#fff; margin:6px; background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); }
.storebtn span{ display:block; line-height:1; }
.storebtn small{ display:block; font-size:.75rem; color: #d6d6de; }
.storebtn strong{ font-size:1.05rem; }

footer{ border-top:1px solid rgba(255,255,255,.08); padding:26px 0; color:#cfcfd8; }
.foot{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; }
.links a{ color:#fff; text-decoration:none; margin-right:14px; opacity:.9; }
.links a:hover{ opacity:1; }

@media (max-width: 960px){
  .mock-inner{ grid-template-columns:1fr; }
  .grid-3{ grid-template-columns:1fr; }
}

/* Utilities and page-specific classes moved from inline styles */
.brand-hero{ justify-content:center; gap:12px; margin-bottom:14px; }
.brand-hero strong{ font-size:1.15rem; opacity:.9; }
.logo-lg{ width:96px; height:96px; border-radius:16px; }
.h3-compact{ margin:8px 0 0; }
.text-muted{ color:var(--muted); }
.mt-6{ margin-top:.6rem; }
.mt-8{ margin-top:8px; }
.mb-0{ margin-bottom:0; }
.badge-coral{ background: rgba(255,122,89,.15); color:#ffd3c8; border-color: rgba(255,122,89,.35); }
.cta-left{ justify-content:flex-start; }
.sub.spaced{ margin: 6px auto 18px; }
.card.no-padding{ padding:0; }
.faq-list{ padding:6px 6px 14px 6px; }
.faq-item{ padding:14px 14px; border-bottom:1px solid rgba(255,255,255,.06); }
.faq-item:last-child{ border-bottom:0; }
.faq-item summary{ cursor:pointer; font-weight:600; }

/* Contact form */
.contact-form{ display:block; }
.form-row{ display:flex; gap:16px; flex-wrap:wrap; }
.field{ flex:1 1 260px; display:flex; flex-direction:column; }
.field label{ font-weight:600; margin:0 0 6px; }
.field input,.field textarea{ padding:12px 12px; border-radius:12px; border:1px solid #e5e7eb; background:#ffffff; color:#000; outline:none; }
.field input::placeholder,.field textarea::placeholder{ color:#9ca3af; }
.field input:focus,.field textarea:focus{ border-color:#111827; box-shadow: 0 0 0 3px rgba(17,24,39,.12); }
.field textarea{ resize:vertical; }
.error{ color:#ffb4a4; min-height:18px; margin-top:6px; }
.notice{ color:#b8f5e6; margin-top:10px; }

/* Larger ordered list numbers only */
.big-numbered .card ol li::marker{ font-size:25px; }

/* Mobile nav toggle */
.menu-toggle{
  display:none;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.18);
  background:transparent;
  color:#fff;
  cursor:pointer;
}
section#download h3 {
  color: #fff !important;
}
section#download p {
  color: #fff !important;
}
.menu-toggle:focus{ outline:none; box-shadow: 0 0 0 4px var(--ring); }
.menu-toggle svg{ display:block; }
@media (min-width: 1536px) {
  .container {
      max-width:1280px !important;
  }
}
@media (max-width: 768px){
    .container.foot {
    justify-content: center;
}
  .menu-toggle{ display:inline-flex; margin-left:auto; margin-right:8px; }
  .nav{ position:relative; }
  .links{
    display:none;
    position:absolute;
    right:20px;
    left:auto;
    top:58px;
    width:280px;
    flex-direction:column;
    gap:6px;
    background: rgba(20,20,24,.96);
    backdrop-filter: blur(10px);
    border:1px solid rgba(255,255,255,.12);
    box-shadow: 0 12px 32px rgba(0,0,0,.5);
    border-radius:14px;
    padding:10px;
    z-index:50;
  }
  .links.open{ display:flex; }
  .links a{ margin:0; padding:10px 12px; border-radius:10px; }
  .links a:hover{ background: rgba(255,255,255,.06); }
  .container.foot .links {
    display: flex;
    position: inherit;
    background: transparent;
    box-shadow: none;
    padding: 0;
    backdrop-filter: none;
    border: 0;
    gap: 10px;
    flex-wrap: nowrap !important;
    flex-direction: unset;
    width: 100%;
    justify-content: center;
}
.container.foot .links a {
    width: fit-content;
    display: inherit;
    float: left;
    padding: 0;
}
}


/* Light text overrides for all content outside the header */
main, main *{ color:#000000 !important; }
footer, footer *{ color:#000000 !important; }

/* Homepage dark sections: ensure white text inside feature mock/cards */
.mock, .mock *{ color:#ffffff !important; }
.item, .item *{ color:#ffffff !important; }
.badge{ color:#b8f5e6 !important; }
.storebtn{ color:#ffffff !important; border-color: rgba(255,255,255,.25) !important; }
.btn{ color:#ffffff !important; }
.btn.secondary{ color:#ffffff !important; border-color: rgba(255,255,255,.28) !important; }

/* Light variant for homepage sections */
.mock--light{ background:#f3f4f6; border:1px solid #e5e7eb; }
.mock--light .phone{ background:#ffffff; border-color:#e5e7eb; }
.mock--light .status{ border-bottom-color:#e5e7eb; opacity:1; }
.mock--light .list .item{ background:#ffffff; border-color:#e5e7eb; }
.mock--light, .mock--light *{ color:#111827 !important; }
.mock--light .badge{ background:#e8faf5; color:#065f46 !important; border-color:#a7f3d0; }

.map-card--light{ background:#f9fafb; border:1px solid #e5e7eb; }
.map-card--light, .map-card--light *{ color:#111827 !important; }
.map-card--light .map{ background:#f3f4f6; color:#6b7280; }

/* Button visibility overrides: make all app buttons black with white text */
.btn{ background:#111827 !important; border-color:#111827 !important; color:#ffffff !important; }
.btn.secondary{ background:#111827 !important; border-color:#111827 !important; color:#ffffff !important; }
.btn:hover{ transform: translateY(-1px); box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.storebtn{ background:#111827 !important; border-color:#111827 !important; color:#ffffff !important; }
.storebtn small{ color:#e5e7eb !important; }

/* Page banner - full width below header */
.page-banner {
  width: 100%;
  background: #33333312;
  background-size: cover;
  background-position: center;
  padding: 80px 0;
  text-align: center;
  margin-bottom: 0;
}

.page-banner h1 {
  color: #000 !important;
  font-size: 44px;
  font-weight: 700;
  margin: 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  letter-spacing: -0.02em;
}

.page-banner .container{
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Large screen container override */
@media (min-width: 1536px) {
  .container {
    max-width: 1280px;
  }
}

@media (max-width: 500px) {
  .gdpr-compliance {
    font-weight: 600;
    width: 120px;
    margin: 0 auto;
}
.foot {
  align-items: center;
  justify-content: center;

}
.container.foot .brand {
    display: contents;
    align-items: center;
}

}
@media (max-width: 450px) {
.container.foot .links {
    display: grid;
    align-items: center;
    justify-items: center;
}
.card {
    padding: 0px;
}
.section {
    padding: 20px 0;
}

}