:root { --cyan:#25AEC4; --cyan-dark:#0E6E7C; --sky:#DFF8FD; --soft:#F4FBFD; --black:#111; --ink:#172126; --gray:#4f5a61; --line:#D6E3E7; --sand:#F7F5EF; }
* { box-sizing:border-box; }
body { margin:0; font-family:"Barlow", "Segoe UI", sans-serif; color:var(--ink); background:radial-gradient(1300px 620px at 86% -10%, #daf6fa 0%, #ffffff 58%); line-height:1.5; }
a { color:inherit; text-decoration:none; }

/* Text utilities for easier maintenance */
.text-display { font-family:"Space Grotesk", sans-serif; font-size:clamp(38px, 5vw, 70px); line-height:1.01; letter-spacing:-.045em; color:#0f1d23; margin:12px 0 20px; }
.text-section-title { font-family:"Space Grotesk", sans-serif; font-size:clamp(31px, 4vw, 48px); line-height:1.06; letter-spacing:-.038em; color:#0f1d23; margin:0 0 16px; }
.text-lead { font-size:20px; color:var(--gray); }
.text-body { font-size:16px; color:#394047; }
.text-small { font-size:13px; color:#5f6b73; }
.text-muted { color:#5e6a72; }

.wrap { width:min(1140px, calc(100% - 42px)); margin:0 auto; }
header { position:sticky; top:0; background:rgba(255,255,255,.88); border-bottom:1px solid rgba(12,95,108,.12); backdrop-filter:blur(10px); z-index:8; }
.nav { display:flex; align-items:center; justify-content:space-between; padding:16px 0; gap:24px; }
.nav img { width:196px; height:auto; display:block; }
.menu { display:flex; gap:24px; font-weight:600; font-size:15px; color:#314047; }
.menu a { transition:color .2s ease; }
.menu a:hover { color:var(--cyan-dark); }
.btn { display:inline-flex; align-items:center; justify-content:center; border-radius:999px; padding:14px 22px; font-weight:700; font-family:"Space Grotesk", sans-serif; letter-spacing:.015em; background:var(--cyan); color:#fff; border:0; box-shadow:0 8px 18px rgba(37,174,196,.18); transition:transform .2s ease, box-shadow .2s ease, background .2s ease; }
.btn:hover { transform:translateY(-1px); box-shadow:0 12px 20px rgba(37,174,196,.22); }
.btn.black { background:var(--black); box-shadow:0 10px 22px rgba(10,15,18,.18); }
.btn.black:hover { background:#0a3f49; }
.hero { padding:68px 0 56px; position:relative; overflow:hidden; }
.hero:before { content:""; position:absolute; width:360px; height:360px; border-radius:50%; right:-140px; top:10px; background:rgba(37,174,196,.08); }
.hero:after { content:""; position:absolute; width:300px; height:300px; border-radius:50%; left:-120px; bottom:-160px; background:rgba(22,136,154,.05); }
.hero-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:46px; align-items:center; }
.hero-grid > * { position:relative; z-index:1; }
.eyebrow { color:var(--cyan-dark); font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:12px; font-family:"Space Grotesk", sans-serif; }
h1, .text-display { font-family:"Space Grotesk", sans-serif; font-size:clamp(38px, 5vw, 70px); line-height:1.01; margin:12px 0 20px; letter-spacing:-.045em; color:#0f1d23; }
.lead { font-size:20px; color:var(--gray); max-width:650px; margin-bottom:28px; }
.pills { display:flex; flex-wrap:wrap; gap:10px; margin:28px 0; }
.pill { border:1px solid var(--line); border-radius:999px; padding:9px 14px; font-weight:700; background:#fff; box-shadow:0 3px 10px rgba(12,76,86,.06); }
.highlights { display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin-top:26px; }
.kpi { background:#fff; border:1px solid var(--line); border-radius:14px; padding:13px; }
.kpi b { display:block; font-family:"Space Grotesk", sans-serif; font-size:20px; color:#0c4f59; }
.kpi span { font-size:14px; color:#5e6a72; }
.visual { position:relative; animation:floatIn .7s ease both; padding:16px 10px 0; }
.visual:before, .visual:after { content:""; position:absolute; border-radius:24px; z-index:0; }
.visual:before { width:80%; height:84%; right:0; top:0; background:rgba(37,174,196,.08); border:1px solid rgba(14,110,124,.1); }
.visual:after { width:54%; height:46%; left:0; bottom:8px; background:rgba(37,174,196,.22); }
.photo-frame { position:relative; z-index:1; border-radius:24px; background:#fff; padding:12px; box-shadow:0 10px 24px rgba(14,73,81,.08); border:1px solid rgba(12,95,108,.12); }
.photo-frame:after { content:none; }
.visual-tag { position:absolute; top:-11px; left:14px; z-index:2; background:#fff; color:#0d5d6a; border:1px solid rgba(14,110,124,.18); border-radius:999px; padding:6px 10px; font-family:"Space Grotesk", sans-serif; font-size:11px; }
.hero-photo { display:block; width:100%; height:auto; border-radius:18px; }
section { padding:76px 0; }
h2, .text-section-title { font-family:"Space Grotesk", sans-serif; font-size:clamp(31px, 4vw, 48px); line-height:1.06; letter-spacing:-.038em; margin:0 0 16px; color:#0f1d23; }
.section-lead { color:var(--gray); font-size:18px; max-width:820px; }
.cards { display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; margin-top:32px; }
.card { border:1px solid var(--line); border-radius:22px; padding:24px; background:#fff; box-shadow:0 8px 18px rgba(13,73,82,.04); transition:transform .2s ease, box-shadow .2s ease; }
.card:hover { transform:translateY(-2px); box-shadow:0 12px 22px rgba(13,73,82,.08); }
.card strong { display:block; font-size:21px; margin-bottom:8px; }
.icon { width:44px; height:44px; border-radius:14px; background:var(--soft); color:var(--cyan-dark); display:flex; align-items:center; justify-content:center; font-weight:900; margin-bottom:16px; }
.soft { background:linear-gradient(180deg, var(--sky) 0%, #eef9fc 100%); }
.split { display:grid; grid-template-columns:.9fr 1.1fr; gap:36px; align-items:start; }
.list { display:grid; gap:13px; margin-top:20px; }
.check { display:flex; gap:12px; align-items:flex-start; color:#394047; }
.check span { width:22px; height:22px; background:var(--cyan); color:white; border-radius:50%; flex:0 0 22px; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:900; }
.app-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; margin-top:28px; align-items:stretch; }
.app { border:1px solid var(--line); border-radius:20px; padding:20px; background:#fff; display:flex; flex-direction:column; min-height:100%; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.app:hover { transform:translateY(-2px); border-color:#c6dce2; box-shadow:0 10px 18px rgba(13,73,82,.08); }
.app-icon { width:48px; height:48px; object-fit:contain; display:flex; align-items:center; justify-content:center; margin-bottom:14px; padding:10px; border-radius:16px; background:linear-gradient(180deg, #effbfd 0%, #dff8fd 100%); box-shadow:inset 0 0 0 1px rgba(37,174,196,.12); }
.app b { display:block; font-size:18px; margin-bottom:6px; }
.app p { margin:0; color:#4f5a61; }
.apps-wrap { display:grid; grid-template-columns:1.05fr .95fr; gap:24px; align-items:start; }
.apps-photo { background:transparent; padding:0; box-shadow:none; border:0; }
.apps-photo img { width:100%; height:auto; display:block; border-radius:0; }
.machine-section { margin-top:28px; }
.machine-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:24px; }
.machine-card { border:1px solid var(--line); border-radius:20px; background:#fff; overflow:hidden; box-shadow:0 6px 16px rgba(13,73,82,.06); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.machine-card:hover { transform:translateY(-2px); border-color:#c6dce2; box-shadow:0 10px 18px rgba(13,73,82,.08); }
.machine-card img { width:100%; height:180px; object-fit:contain; display:block; background:#f4fbfd; cursor:zoom-in; }
.machine-info { padding:14px 16px; }
.machine-info b { display:block; font-family:"Space Grotesk",sans-serif; font-size:15px; color:#0f1d23; margin-bottom:4px; }
.machine-info span { font-size:13px; color:#5f6b73; }
.config-wrap { display:grid; grid-template-columns:1.1fr .9fr; gap:28px; align-items:start; }
.config-wrap h3 { margin:18px 0 0; font-family:"Space Grotesk", sans-serif; font-size:30px; letter-spacing:-.02em; color:#0f1d23; }
.feature-list { display:grid; gap:12px; margin:18px 0 24px; }
.feature-item { display:flex; align-items:flex-start; gap:10px; padding:9px 0; border-bottom:1px solid #d9e5e9; }
.feature-dot { width:26px; height:26px; border-radius:50%; background:rgba(37,174,196,.15); color:#0e6e7c; display:flex; align-items:center; justify-content:center; font-weight:700; flex:0 0 26px; }
.feed-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin-top:14px; }
.feed-card { border:1px solid #b8dbe2; border-radius:16px; padding:14px; background:#fff; }
.feed-icon { width:34px; height:34px; border-radius:50%; background:#18a4bb; color:#fff; font-weight:700; display:flex; align-items:center; justify-content:center; margin-bottom:10px; }
.output-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin-top:14px; }
.output-card { border:1px solid #b8dbe2; border-radius:14px; padding:16px; text-align:center; background:#fff; font-weight:600; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; }
.output-icon { display:block; width:auto; height:54px; max-width:100%; margin:0 auto 8px; }
.banner-note { margin-top:16px; background:linear-gradient(95deg, #0d94aa, #1ab3c9); color:#fff; border-radius:14px; padding:15px 16px; font-family:"Space Grotesk", sans-serif; font-size:28px; letter-spacing:-.01em; }
.config-photo { border:1px solid var(--line); border-radius:20px; background:#fff; padding:12px; box-shadow:0 8px 18px rgba(13,73,82,.06); }
.config-photo img { width:100%; height:auto; display:block; border-radius:14px; }
.config-photo p { margin:10px 2px 2px; color:#5f6b73; font-size:15px; }
.cta { background:linear-gradient(140deg, #111b1f, #16272d); color:#fff; border-radius:28px; padding:40px; display:flex; align-items:center; justify-content:space-between; gap:24px; box-shadow:0 14px 30px rgba(9,15,19,.18); }
.cta p { color:#d9e3e6; max-width:680px; margin:10px 0 0; }
.cta .text-section-title { color:#fff; }
footer { padding:36px 0; border-top:1px solid var(--line); color:#62717a; background:var(--sand); }
.footer-wrap { display:flex; flex-direction:column; gap:10px; }
.footer-main { margin:0; }
.footer-group { display:flex; align-items:center; gap:10px; color:#4f5a61; font-weight:600; }
.footer-group img { height:18px; width:auto; display:block; }
.lightbox { position:fixed; inset:0; background:rgba(10,16,20,.78); display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .2s ease; z-index:100; }
.lightbox.open { opacity:1; visibility:visible; pointer-events:auto; }
.lightbox-dialog { position:relative; width:min(940px, 100%); }
.lightbox-close { position:absolute; top:-12px; right:-12px; width:38px; height:38px; border:0; border-radius:50%; background:#fff; color:#111; font-size:22px; line-height:1; cursor:pointer; box-shadow:0 6px 18px rgba(0,0,0,.25); }
.lightbox-figure { margin:0; background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 20px 42px rgba(0,0,0,.3); }
.lightbox-figure img { width:100%; max-height:min(78vh, 760px); object-fit:contain; display:block; background:#f4fbfd; }
.lightbox-figure figcaption { padding:12px 14px; font-weight:600; color:#2c3a42; background:#fff; }
@keyframes floatIn { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }
@media (max-width:900px) {
  .hero-grid,.split,.cards,.app-grid,.highlights,.config-wrap,.feed-grid,.output-grid,.apps-wrap { grid-template-columns:1fr; }
  .machine-grid { grid-template-columns:repeat(2,1fr); }
  .menu { display:none; }
  .visual { padding:16px 0 0; }
  .photo-frame { padding:14px; border-radius:24px; }
  .photo-frame:after { right:18px; width:32%; }
  .visual:before { width:88%; height:78%; }
  .visual:after { width:62%; height:42%; bottom:-2px; }
  .cta { flex-direction:column; align-items:flex-start; }
  .lead, .text-lead { font-size:18px; }
  .banner-note { font-size:22px; }
}
@media (prefers-reduced-motion:reduce) { * { animation:none !important; transition:none !important; } }