:root {
  --ink: #07111b;
  --ink-2: #0d1c29;
  --panel: #122432;
  --gold: #f5b51b;
  --gold-2: #ffd264;
  --paper: #ffffff;
  --soft: #f2f5f7;
  --line: #d8e0e5;
  --muted: #607180;
  --light-muted: #a8b7c5;
  --green: #35b977;
  --amber: #e7a828;
  --red: #e45b57;
  --shadow: 0 24px 70px rgba(0, 0, 0, .24);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font: 16px/1.6 Inter, "Segoe UI", Arial, sans-serif;
}
a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 4px;
}
.wrap { width: min(1240px, calc(100% - 64px)); margin-inline: auto; }
.skip { position: absolute; left: 18px; top: -100px; z-index: 20; background: var(--gold); padding: 9px 13px; font-weight: 800; }
.skip:focus { top: 12px; }

.site-header, .header {
  position: sticky;
  top: 0;
  z-index: 10;
  color: #fff;
  background: rgba(7, 17, 27, .96);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  backdrop-filter: blur(16px);
}
.nav-shell, .header .nav {
  min-height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand img { display: block; width: 270px; height: auto; }
nav { display: flex; align-items: center; gap: 28px; }
nav a { color: #d8e2ea; text-decoration: none; font-size: 14px; font-weight: 700; }
nav a:hover, nav a[aria-current="page"] { color: var(--gold-2); }
.nav-cta { border: 1px solid rgba(245, 181, 27, .65); padding: 9px 14px; border-radius: 8px; }

.hero {
  color: #fff;
  background:
    radial-gradient(circle at 85% 4%, rgba(245, 181, 27, .16), transparent 31rem),
    linear-gradient(145deg, var(--ink), var(--ink-2));
  padding: 78px 0 0;
}
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 76px; align-items: center; }
.eyebrow { margin: 0 0 22px; color: var(--gold); font-size: 11px; font-weight: 900; letter-spacing: .16em; }
.eyebrow.dark { color: #8a6200; }
h1, h2, h3 { margin-top: 0; line-height: 1.12; }
h1 { margin-bottom: 25px; font-size: clamp(43px, 5vw, 70px); letter-spacing: -.055em; }
h1 em { color: var(--gold); font-style: normal; }
h2 { margin-bottom: 0; font-size: clamp(34px, 3.7vw, 51px); letter-spacing: -.045em; }
h3 { letter-spacing: -.025em; }
.hero-lead { max-width: 610px; margin: 0; color: #bdc9d4; font-size: 18px; }
.hero-actions { display: flex; align-items: center; gap: 26px; margin-top: 31px; flex-wrap: wrap; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 34px;
  border: 0;
  border-radius: 8px;
  padding: 13px 19px;
  color: #171109;
  background: var(--gold);
  text-decoration: none;
  font: inherit;
  font-weight: 850;
  cursor: pointer;
}
.button:hover { background: var(--gold-2); }
.text-link { color: #dbe5ec; font-size: 14px; font-weight: 800; text-decoration: none; border-bottom: 1px solid rgba(219, 229, 236, .4); }
.hero-panel {
  padding: 27px;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 16px;
  background: rgba(16, 35, 50, .74);
  box-shadow: var(--shadow);
}
.panel-heading { display: flex; justify-content: space-between; gap: 18px; padding-bottom: 18px; border-bottom: 1px solid rgba(255, 255, 255, .13); color: #acbac6; font-size: 10px; font-weight: 900; letter-spacing: .13em; }
.live-dot { color: #7be0aa; }
.live-dot::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px rgba(53, 185, 119, .12); }
.capability { display: grid; grid-template-columns: 36px 1fr; gap: 14px; padding: 20px 0; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.capability:last-child { border-bottom: 0; padding-bottom: 3px; }
.capability > span { color: var(--gold); font: 800 12px/1.6 monospace; }
.capability b, .capability small { display: block; }
.capability b { font-size: 16px; }
.capability small { margin-top: 2px; color: var(--light-muted); }
.proof-strip { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 68px; border-top: 1px solid rgba(255, 255, 255, .13); }
.proof-strip span { padding: 19px 18px 21px 0; color: #9fb0be; font-size: 12px; }
.proof-strip b { display: block; color: #fff; font-size: 14px; }

.section { padding-top: 94px; padding-bottom: 94px; }
.section-heading { display: grid; grid-template-columns: 1.05fr .95fr; gap: 80px; align-items: end; margin-bottom: 52px; }
.section-heading > p { margin: 0; color: var(--muted); font-size: 17px; }
.service-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.service-grid article { padding: 30px 28px 30px 0; border-right: 1px solid var(--line); }
.service-grid article:not(:first-child) { padding-left: 28px; }
.service-grid article:last-child { border-right: 0; }
.service-grid article > span, .product-number { color: #7d8c98; font: 800 12px/1 monospace; }
.service-grid h3 { margin: 24px 0 13px; font-size: 23px; }
.service-grid p { margin: 0; color: var(--muted); font-size: 15px; }

.platform-section, .progress-section { padding: 94px 0; color: #fff; background: linear-gradient(150deg, #07111b, #0d1c29); }
.light-heading > p { color: #b8c5cf; }
.product-showcase { display: grid; grid-template-columns: .73fr 1.27fr; gap: 58px; align-items: center; margin-top: 66px; }
.product-showcase.reverse { grid-template-columns: 1.27fr .73fr; }
.product-showcase.reverse .product-copy { order: 2; }
.product-copy h3 { margin: 16px 0 16px; font-size: 30px; }
.product-copy p { color: #b9c6d1; }
.feature-list { margin: 25px 0 0; padding: 0; list-style: none; }
.feature-list li { position: relative; padding: 9px 0 9px 24px; border-top: 1px solid rgba(255, 255, 255, .1); color: #dbe3e9; font-size: 14px; }
.feature-list li::before { content: ""; position: absolute; left: 2px; top: 17px; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.browser-frame { margin: 0; overflow: hidden; border: 1px solid #314656; border-radius: 15px; background: #0c131a; box-shadow: var(--shadow); }
.browser-bar { display: flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 13px; color: #8fa2b2; background: #152532; font-size: 10px; }
.browser-bar i { width: 8px; height: 8px; border-radius: 50%; background: #586a77; }
.browser-bar i:first-child { background: #f0605d; }
.browser-bar i:nth-child(2) { background: #e6b546; }
.browser-bar i:nth-child(3) { background: #4eb87c; margin-right: 7px; }
.browser-frame img { display: block; width: 100%; height: auto; background: #0c131a; }
.browser-frame figcaption { padding: 10px 13px; color: #8495a3; font-size: 11px; }

.workflow-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: 0; padding: 0; list-style: none; counter-reset: workflow; }
.workflow-grid li { counter-increment: workflow; position: relative; min-height: 220px; padding: 68px 25px 25px; border: 1px solid var(--line); border-radius: 13px; background: var(--soft); }
.workflow-grid li::before { content: "0" counter(workflow); position: absolute; top: 22px; left: 25px; color: #8a6200; font: 900 12px/1 monospace; }
.workflow-grid b, .workflow-grid span { display: block; }
.workflow-grid b { margin-bottom: 10px; font-size: 20px; }
.workflow-grid span { color: var(--muted); font-size: 14px; }

.roadmap-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 17px; }
.roadmap-grid article { min-height: 250px; padding: 27px; border: 1px solid #2e4353; border-top: 4px solid #5d7180; border-radius: 12px; background: rgba(17, 36, 50, .72); }
.roadmap-grid article.complete { border-top-color: var(--green); }
.roadmap-grid article.current { border-top-color: var(--gold); }
.roadmap-grid article > span { color: #9badba; font-size: 10px; font-weight: 900; letter-spacing: .15em; }
.roadmap-grid article.complete > span { color: #69d99d; }
.roadmap-grid article.current > span { color: var(--gold-2); }
.roadmap-grid h3 { margin: 36px 0 13px; font-size: 22px; }
.roadmap-grid p { margin: 0; color: #aebdc8; font-size: 14px; }

.cta-section { padding: 73px 0; background: var(--gold); }
.cta-inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: 85px; align-items: end; }
.cta-inner p { margin-top: 0; }
.dark-button { margin-top: 15px; color: #fff; background: var(--ink); }
.dark-button:hover { color: var(--ink); background: #fff; }

footer { padding: 37px 0; color: #fff; background: var(--ink); border-top: 1px solid rgba(255, 255, 255, .1); }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 26px; }
.footer-inner > img { width: 220px; height: auto; }
.footer-inner p { color: #9eafbd; font-size: 13px; }
.footer-inner > div { display: flex; align-items: flex-end; flex-direction: column; gap: 5px; }
.footer-inner a { color: #dce6ed; text-decoration: none; font-size: 13px; }
.footer-inner small { color: #718491; }

/* Contact page */
.contact-hero { padding: 68px 0 58px; color: #fff; background: linear-gradient(145deg, var(--ink), var(--ink-2)); }
.contact-hero h1 { margin-bottom: 18px; }
.contact-hero p:last-child { color: #b9c6d1; font-size: 18px; }
.contact-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 72px; padding-top: 72px; padding-bottom: 80px; align-items: start; }
.contact-layout aside > p { color: var(--muted); }
.email-link { display: inline-block; margin: 13px 0 25px; border-bottom: 2px solid var(--gold); text-decoration: none; font-size: 19px; font-weight: 800; overflow-wrap: anywhere; }
.contact-tip { margin: 15px 0 23px; padding: 22px; border-left: 4px solid var(--gold); background: var(--soft); }
.contact-tip p { margin: 8px 0 0; color: var(--muted); font-size: 14px; }
.fine { color: var(--muted); font-size: 12px; }
.form-card { padding: 34px; border: 1px solid var(--line); border-radius: 13px; background: #fff; box-shadow: 0 20px 50px rgba(7, 17, 27, .08); }
.form-card h2 { font-size: 30px; }
.form-lead { margin: 9px 0 26px; color: var(--muted); font-size: 14px; }
label { display: block; margin-bottom: 7px; font-size: 14px; font-weight: 750; }
input, select, textarea { width: 100%; min-width: 0; margin: 0 0 20px; padding: 12px; border: 1px solid #aab7c0; border-radius: 7px; color: var(--ink); background: #fff; font: inherit; }
textarea { resize: vertical; }
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.consent { display: flex; align-items: flex-start; gap: 11px; font-weight: 400; line-height: 1.5; }
.consent input { width: 18px; height: 18px; margin: 2px 0 0; flex-shrink: 0; accent-color: var(--ink); }
.privacy-note { margin-top: 10px; }
.honey { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.notice { margin-bottom: 24px; padding: 18px; border-radius: 8px; }
.notice h3 { margin-bottom: 7px; }
.notice p { margin: 0; }
.notice.success { border-left: 4px solid var(--green); background: #ebf8f1; }
.notice.error { border-left: 4px solid var(--red); background: #fff0ef; }

@media (max-width: 1000px) {
  .hero-grid, .section-heading, .product-showcase, .product-showcase.reverse, .cta-inner { gap: 42px; }
  .service-grid, .roadmap-grid, .workflow-grid { grid-template-columns: repeat(2, 1fr); }
  .service-grid article:nth-child(2) { border-right: 0; }
  .service-grid article:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 800px) {
  .wrap { width: min(100% - 38px, 1240px); }
  .nav-shell, .header .nav { min-height: 106px; align-items: flex-start; justify-content: center; flex-direction: column; gap: 14px; padding: 15px 0; }
  .brand img { width: 235px; }
  nav { width: 100%; gap: 17px; overflow-x: auto; padding-bottom: 3px; }
  nav a { white-space: nowrap; font-size: 12px; }
  .hero { padding-top: 48px; }
  .hero-grid, .section-heading, .product-showcase, .product-showcase.reverse, .cta-inner, .contact-layout { grid-template-columns: 1fr; }
  .product-showcase.reverse .product-copy { order: initial; }
  .proof-strip { grid-template-columns: repeat(2, 1fr); }
  .section, .platform-section, .progress-section { padding-top: 65px; padding-bottom: 65px; }
  .section-heading { gap: 23px; margin-bottom: 38px; }
  .product-showcase { margin-top: 50px; }
  .contact-layout { gap: 35px; padding-top: 45px; }
}
@media (max-width: 560px) {
  h1 { font-size: 42px; }
  .hero-panel { padding: 20px; }
  .proof-strip, .service-grid, .roadmap-grid, .workflow-grid { grid-template-columns: 1fr; }
  .service-grid article, .service-grid article:not(:first-child) { padding: 25px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .service-grid article:last-child { border-bottom: 0; }
  .roadmap-grid article { min-height: 210px; }
  .workflow-grid li { min-height: 190px; }
  .footer-inner { align-items: flex-start; flex-direction: column; }
  .footer-inner > div { align-items: flex-start; }
  .field-pair { grid-template-columns: 1fr; gap: 0; }
  .form-card { padding: 23px 18px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media print {
  .site-header, .header, footer { position: static; color: var(--ink); background: #fff; }
  .site-header nav, .header nav, .hero-actions { display: none; }
  .hero, .platform-section, .progress-section { color: var(--ink); background: #fff; }
  .hero p, .platform-section p, .progress-section p { color: var(--ink); }
}
.site-maintenance[hidden]{display:none}.site-maintenance{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:22px;background:radial-gradient(circle at 70% 0,#1d4056,#07111b 58%);color:#fff;overflow:auto}.maintenance-panel{position:relative;overflow:hidden;width:min(720px,100%);padding:92px 40px 38px;border:1px solid #365a70;border-radius:18px;background:#102536;text-align:center;box-shadow:0 30px 90px #0009}.maintenance-tape{position:absolute;top:27px;left:-7%;width:114%;padding:10px;background:repeating-linear-gradient(135deg,#f5b51b 0 28px,#17130a 28px 56px);color:#fff;font-size:10px;font-weight:950;letter-spacing:.16em;transform:rotate(-2deg);text-shadow:0 1px 2px #000}.crashed-rig{font-size:76px;line-height:1;transform:rotate(13deg);filter:drop-shadow(8px 10px 0 #0005)}.maintenance-panel h1{margin:12px 0;font-size:clamp(32px,6vw,52px);line-height:1.02}.maintenance-panel p{max-width:590px;margin:13px auto;color:#c5d2df}.maintenance-panel small{display:block;margin-top:12px;color:#9eafbd}.whatsapp-maintenance{margin-top:10px;background:#25d366;color:#06150c}.maintenance-active{overflow:hidden}

/* Compact v0.8 content refinements */
.hero-mark { border:1px solid rgba(245,181,27,.28); border-radius:16px; padding:38px; background:rgba(16,35,50,.74); min-height:300px; display:flex; flex-direction:column; justify-content:center; }
.hero-mark > span { color:var(--gold); font-size:11px; font-weight:900; letter-spacing:.17em; }
.hero-mark strong { font-size:clamp(70px,9vw,125px); font-weight:900; line-height:1.17; letter-spacing:-.08em; }
.hero-mark strong small { font-size:13px; letter-spacing:.1em; color:var(--gold); }
.hero-mark p { color:#a8b7c5; font-size:17px; margin:0; }
.platform-details { padding:82px 0 90px; color:#fff; background:linear-gradient(150deg,#07111b,#0d1c29); }
.compact-heading { margin-bottom:40px; }
.platform-cards { display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:stretch; }
.platform-card > .hero-panel { height:100%; box-shadow:none; }
.qr-card { min-width:0; border:1px solid #304759; border-radius:16px; padding:25px; background:rgba(16,35,50,.74); display:flex; justify-content:center; align-items:center; }
.qr-label { width:100%; max-width:430px; border-radius:12px; border:2px solid #d5a025; background:#fff; color:#07111b; overflow:hidden; }
.qr-head { padding:14px 17px; display:flex; align-items:center; justify-content:space-between; background:#07111b; color:#ffd264; font-size:11px; font-weight:900; letter-spacing:.09em; gap:10px; }
.qr-head img { width:160px; max-width:60%; height:auto; }
.qr-content { display:flex; align-items:center; gap:18px; padding:19px 16px; }
.qr-art { width:126px; height:126px; flex:0 0 126px; background:#f1f3f5 url('assets/qr-sticker-layout.png') center/contain no-repeat; border:5px solid #fff; }
.qr-content strong { display:block; font-size:19px; line-height:1.1; margin-bottom:12px; }
.qr-content small { display:block; font-size:10px; line-height:1.5; font-weight:900; }
.qr-bottom { background:#f5b51b; padding:10px 14px; text-align:center; font-size:9px; letter-spacing:.08em; font-weight:900; }
.browser-frame img { width:100%; height:auto; display:block; }
@media(max-width:800px) { .platform-cards { grid-template-columns:1fr; } .platform-details { padding:65px 0; } .hero-mark { min-height:230px; } }
@media(max-width:560px) { .qr-card { padding:15px; } .qr-art { width:104px; height:104px; flex-basis:104px; } .qr-content { gap:9px; padding:13px 10px; } .qr-content strong { font-size:14px; } .qr-content small { font-size:8px; } .hero-mark { padding:24px; } }

/* Original supplied Hourmark QR sticker: preserve artwork and proportions. */
.qr-card { overflow:hidden; padding:20px; }
.qr-sticker-image { display:block; width:100%; max-width:430px; height:auto; object-fit:contain; border-radius:9px; }
@media(max-width:560px) { .qr-card { padding:14px; } .qr-sticker-image { max-width:100%; } }

/* v0.8 content integration: single service workflow + compact platform/QR pair */
.hero-mark strong { font-size:clamp(48px,6vw,83px); letter-spacing:-.065em; line-height:1.15; white-space:normal; }
.hero-mark p { max-width:26ch; margin-top:12px; }
#services .platform-cards { margin-top:38px; }
#services .platform-card > .hero-panel { background:#102332; color:#fff; }
#services .qr-card { background:#102332; }
#services .platform-card, #services .qr-card { min-height:310px; }
#services .qr-sticker-image { width:100%; max-width:430px; height:auto; }
@media(max-width:800px){#services .platform-card,#services .qr-card{min-height:0}}

/* Production layout lock — v0.8 hotfix */
#services .platform-cards{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:stretch;margin-top:38px;}
#services .platform-card,#services .qr-card{min-width:0;max-width:100%;} 
#services .platform-card .hero-panel{background:#102332;color:#fff;border:1px solid #304759;border-radius:16px;height:100%;box-shadow:none;}
#services .platform-card .capability b{color:#fff;}
#services .platform-card .capability small{color:#a8b7c5;}
#services .qr-card{display:flex;align-items:center;justify-content:center;overflow:hidden;background:#102332;padding:20px;border-radius:16px;border:1px solid #304759;}
#services .qr-sticker-image{display:block;width:100%;max-width:420px;height:auto;max-height:320px;object-fit:contain;}
.hero-grid .hero-mark{display:flex;min-width:0;flex-direction:column;justify-content:center;min-height:300px;border:1px solid rgba(245,181,27,.35);border-radius:16px;background:#102332;padding:36px;}
.hero-grid .hero-mark strong{font-size:clamp(45px,5.5vw,76px);color:#fff;line-height:1.08;letter-spacing:-.06em;}
@media(max-width:800px){#services .platform-cards{grid-template-columns:minmax(0,1fr);}#services .qr-sticker-image{max-height:280px;}.hero-grid .hero-mark{min-height:210px;}}
@media(max-width:560px){#services .qr-sticker-image{max-height:220px;} .hero-grid .hero-mark{padding:24px;}}