@font-face { font-family: 'WmsRoboto'; src: url('Roboto-Regular.ttf') format('truetype'); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: 'WmsRoboto'; src: url('Roboto-Medium.ttf') format('truetype'); font-style: normal; font-weight: 500 900; font-display: swap; }

:root {
  --navy-950: #04111f;
  --navy-900: #071a2d;
  --navy-800: #0c2944;
  --navy-700: #113958;
  --ink: #102033;
  --muted: #5d6d7e;
  --pale: #f2f7f8;
  --line: #d8e3e7;
  --white: #ffffff;
  --teal: #10b9ad;
  --cyan: #1cd7e2;
  --lime: #c8f43d;
  --lime-dark: #81a900;
  --radius: 22px;
  --shadow: 0 24px 70px rgba(4, 22, 38, .13);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--pale); font: 16px/1.65 WmsRoboto, Arial, sans-serif; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input { font: inherit; }
.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; }
.skip-link { position: fixed; z-index: 100; left: 16px; top: -80px; padding: 10px 16px; color: var(--navy-950); background: var(--lime); border-radius: 8px; font-weight: 800; }
.skip-link:focus { top: 16px; }

.site-header { position: absolute; z-index: 20; top: 0; left: 0; right: 0; height: 88px; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(22px, 5vw, 76px); color: #fff; }
.site-header.solid { position: relative; background: var(--navy-950); }
.brand img { width: 154px; height: 54px; object-fit: contain; object-position: left center; }
.site-nav { display: flex; align-items: center; gap: clamp(18px, 2.2vw, 38px); font-size: .93rem; font-weight: 700; }
.site-nav > a:not(.nav-login) { color: #c9d7e4; transition: color .2s ease; }
.site-nav > a:hover, .site-nav > a.current { color: var(--lime); }
.nav-login { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border: 1px solid rgba(255,255,255,.32); border-radius: 999px; }
.nav-login:hover { border-color: var(--lime); background: var(--lime); color: var(--navy-950); }
.menu-button { display: none; width: 44px; height: 44px; border: 0; border-radius: 10px; background: transparent; }
.menu-button > span:not(.sr-only) { display: block; width: 24px; height: 2px; margin: 5px auto; background: #fff; }

.hero { position: relative; min-height: 780px; overflow: hidden; display: grid; grid-template-columns: minmax(0, .95fr) minmax(460px, .8fr); gap: clamp(40px, 7vw, 110px); align-items: center; padding: 148px clamp(24px, 7vw, 110px) 104px; color: #fff; background: radial-gradient(circle at 12% 15%, #113f5f 0, transparent 32%), linear-gradient(120deg, var(--navy-950), var(--navy-900) 60%, #0a324a); }
.hero::before { content: ''; position: absolute; inset: auto -10% -55% 28%; height: 84%; border: 1px solid rgba(28,215,226,.13); border-radius: 50%; transform: rotate(-12deg); }
.hero-glow { position: absolute; width: 540px; height: 540px; right: 7%; top: 15%; background: rgba(28,215,226,.08); filter: blur(85px); border-radius: 50%; }
.hero-copy, .workflow-panel { position: relative; z-index: 1; }
.eyebrow { margin: 0 0 22px; color: var(--lime); font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.eyebrow span { display: inline-block; width: 28px; height: 2px; margin: 0 10px 3px 0; background: currentColor; }
.eyebrow.dark { color: #087f78; }
.beta-banner { max-width: 680px; margin: 0 0 24px; padding: 12px 16px; border: 1px solid rgba(190, 242, 82, .32); border-radius: 12px; color: #dce8ef; background: rgba(190, 242, 82, .08); font-size: .9rem; }
.beta-banner b { margin-right: 8px; color: var(--lime); text-transform: uppercase; letter-spacing: .08em; }
h1, h2, h3 { font-family: WmsRoboto, Arial, sans-serif; font-weight: 700; letter-spacing: -.035em; line-height: 1.08; }
.hero h1 { max-width: 720px; margin: 0; font-size: clamp(3.15rem, 5.6vw, 6.6rem); }
.hero-lead { max-width: 680px; margin: 28px 0 34px; color: #c9d9e6; font-size: clamp(1.05rem, 1.35vw, 1.26rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 24px; border: 1px solid transparent; border-radius: 12px; font-weight: 800; transition: transform .2s, box-shadow .2s, background .2s; }
.button:hover { transform: translateY(-2px); }
.button-lime { color: var(--navy-950); background: var(--lime); box-shadow: 0 12px 30px rgba(200,244,61,.2); }
.button-lime:hover { background: #d6ff4e; box-shadow: 0 16px 38px rgba(200,244,61,.28); }
.button-ghost { color: #fff; border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.04); }
.button-navy { color: #fff; background: var(--navy-900); }
.hero-notes { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 30px; color: #9fb1c2; font-size: .82rem; }
.hero-notes b { color: var(--lime); }

.workflow-panel { overflow: hidden; background: rgba(255,255,255,.98); color: var(--ink); border: 1px solid rgba(255,255,255,.48); border-radius: 26px; box-shadow: 0 45px 90px rgba(0,0,0,.35); transform: rotate(1.2deg); }
.panel-top { display: flex; justify-content: space-between; padding: 18px 22px; background: #edf4f5; color: #526271; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.status-dot { display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 5px rgba(16,185,173,.12); }
.workflow-list { list-style: none; margin: 0; padding: 10px 22px; }
.workflow-list li { display: grid; grid-template-columns: 42px 1fr auto; gap: 14px; align-items: center; padding: 18px 0; border-bottom: 1px solid #e4ebee; }
.workflow-list li:last-child { border-bottom: 0; }
.workflow-list b { display: block; font-size: .92rem; }
.workflow-list small { display: block; margin-top: 2px; color: #758291; }
.workflow-icon { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid #d2dde1; border-radius: 11px; color: #77909b; font: 700 .78rem WmsRoboto; }
.workflow-list li.active .workflow-icon { color: var(--navy-950); background: var(--lime); border-color: var(--lime); }
.workflow-list li.done .workflow-icon { color: #087f78; background: #dbf6f1; border-color: #b4e9df; }
.pill { display: inline-flex; padding: 5px 9px; border-radius: 999px; font-size: .67rem; font-weight: 800; }
.pill.green { color: #08735f; background: #d9f5e8; }
.pill.lime { color: #526c00; background: #ebffac; }
.pill.blue { color: #12618c; background: #dceffc; }
.pill.muted { color: #67727b; background: #edf1f3; }
.panel-footer { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: #dce5e8; border-top: 1px solid #dce5e8; }
.panel-footer div { padding: 17px 18px; background: #f5f8f9; }
.panel-footer span, .panel-footer strong { display: block; }
.panel-footer span { color: #70808e; font-size: .66rem; }
.panel-footer strong { margin-top: 4px; font: 700 1.25rem WmsRoboto; }

.trust-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(16px, 3vw, 40px); padding: 22px 24px; color: #6d7d88; background: #fff; border-bottom: 1px solid var(--line); font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.trust-strip i { width: 4px; height: 4px; border-radius: 50%; background: var(--teal); }
.section { padding: 110px clamp(24px, 7vw, 110px); }
.section-heading { max-width: 720px; margin-bottom: 50px; }
.section-heading h2, .audience-copy h2, .platform-copy h2 { margin: 0 0 18px; font-size: clamp(2.2rem, 4vw, 4.1rem); }
.section-heading p:not(.eyebrow), .audience-copy > p:not(.eyebrow), .platform-copy > p:not(.eyebrow) { color: var(--muted); font-size: 1.05rem; }
.features-section { background: #f2f7f8; }
.feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
.feature-card { position: relative; overflow: hidden; min-height: 320px; padding: 34px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: 0 16px 40px rgba(9,36,54,.05); }
.feature-card-wide { grid-column: span 2; min-height: 360px; display: grid; grid-template-columns: 1fr .8fr; align-items: center; gap: 50px; background: var(--navy-900); color: #fff; }
.feature-number { display: block; margin-bottom: 58px; color: #0a8e85; font: 700 .8rem WmsRoboto; letter-spacing: .08em; }
.feature-card-wide .feature-number { position: absolute; top: 34px; left: 34px; color: var(--lime); }
.feature-card h3 { max-width: 430px; margin: 0 0 14px; font-size: clamp(1.45rem, 2vw, 2.15rem); }
.feature-card p { max-width: 560px; margin: 0; color: var(--muted); }
.feature-card-wide p { color: #b8cad6; }
.quote-mini { padding: 28px; color: var(--ink); background: #fff; border-radius: 17px; transform: rotate(-1deg); box-shadow: var(--shadow); }
.quote-mini > div:first-child { display: flex; justify-content: space-between; font-size: .78rem; }
.quote-line { width: 100%; height: 10px; margin-top: 26px; background: #edf2f4; border-radius: 10px; }
.quote-line.short { width: 68%; margin: 10px 0 24px; }
.mini-calendar { display: grid; grid-template-columns: repeat(5,1fr); gap: 8px; margin-top: 54px; }
.mini-calendar span { display: grid; place-items: center; aspect-ratio: 1; border: 1px solid #d9e3e6; border-radius: 10px; color: #70808d; font-size: .78rem; }
.mini-calendar .busy { color: #8b5b00; border-color: #f1c46e; background: #fff6df; }
.mini-calendar .booked { color: #fff; background: #0d8f84; border-color: #0d8f84; }
.progress-track { overflow: hidden; height: 11px; margin-top: 60px; background: #edf2f4; border-radius: 20px; }
.progress-track span { display: block; width: 68%; height: 100%; background: linear-gradient(90deg, var(--teal), var(--lime)); }
.progress-label { display: block; margin-top: 9px; color: #768795; }
.money-row { display: flex; align-items: center; justify-content: space-between; margin-top: 55px; }
.money-row strong { font: 700 2.2rem WmsRoboto; }
.history-row { display: flex; align-items: center; margin-top: 60px; }
.history-row i { width: 34px; height: 34px; margin-right: -8px; border: 3px solid #fff; border-radius: 50%; background: #c5e9e5; }
.history-row i:nth-child(2) { background: #9fd6f0; }.history-row i:nth-child(3) { background: #e1f98d; }
.history-row span { margin-left: 20px; color: #687987; font-size: .78rem; font-weight: 700; }

.audience-section { display: grid; grid-template-columns: .8fr 1fr; gap: clamp(50px, 9vw, 130px); align-items: center; background: #fff; }
.text-link { display: inline-flex; gap: 12px; margin-top: 18px; color: #087f78; font-weight: 800; }
.audience-list { border-top: 1px solid var(--line); }
.audience-list div { display: grid; grid-template-columns: 54px 1fr; gap: 0 14px; padding: 26px 0; border-bottom: 1px solid var(--line); }
.audience-list span { grid-row: span 2; color: #0a8f86; font: 700 .82rem WmsRoboto; }
.audience-list b { font: 700 1.1rem WmsRoboto; }
.audience-list small { color: var(--muted); }

.plans-preview { display: grid; grid-template-columns: 1fr .9fr auto; gap: 50px; align-items: center; color: #fff; background: var(--navy-900); }
.plans-preview h2 { max-width: 620px; margin: 0 0 16px; font-size: clamp(2.2rem, 3.4vw, 3.7rem); }
.plans-preview > div:first-child > p:last-child { color: #aabfce; }
.plan-summary { display: grid; grid-template-columns: repeat(2,1fr); border: 1px solid rgba(255,255,255,.16); border-radius: 16px; overflow: hidden; }
.plan-summary > div { padding: 24px; }
.plan-summary .featured { background: rgba(200,244,61,.1); border-left: 1px solid rgba(255,255,255,.16); }
.plan-summary span, .plan-summary strong, .plan-summary small { display: block; }
.plan-summary span { color: var(--lime); font-size: .72rem; font-weight: 800; text-transform: uppercase; }
.plan-summary strong { margin: 8px 0 3px; font: 700 2rem WmsRoboto; }.plan-summary strong small { display: inline; font-size: .75rem; }
.plan-summary > div > small { color: #9db1c1; font-size: .7rem; }

.platform-section { display: grid; grid-template-columns: 1fr .85fr; gap: clamp(50px, 9vw, 130px); align-items: center; background: #eaf2f3; }
.platform-visual { position: relative; min-height: 440px; }
.device { position: absolute; background: var(--navy-950); box-shadow: var(--shadow); }
.device.desktop { inset: 5% 8% 12% 0; padding: 13px; border-radius: 18px; }
.device.desktop > span { display: block; width: 7px; height: 7px; margin: 0 0 10px 5px; border-radius: 50%; background: var(--lime); box-shadow: 13px 0 0 #25c9d1, 26px 0 0 #556c7d; }
.device.phone { z-index: 2; width: 25%; height: 56%; right: 0; bottom: 0; padding: 9px; border: 3px solid #fff; border-radius: 28px; }
.device.phone > span { display: block; width: 34%; height: 5px; margin: 1px auto 8px; border-radius: 5px; background: #385063; }
.device-ui { height: calc(100% - 20px); padding: 10%; background: #f8fbfb; border-radius: 10px; }
.device-ui i { display: block; height: 18%; margin-bottom: 7%; background: linear-gradient(100deg, #dce9ea, #eef4f5); border-radius: 9px; }
.device-ui i:first-child { width: 65%; height: 12%; background: #b7ee7d; }.device-ui i:nth-child(2) { height: 36%; background: #d4eeed; }
.download-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.store-link { min-width: 180px; padding: 13px 17px; border: 1px solid #cad9dc; border-radius: 12px; color: #687987; background: rgba(255,255,255,.48); }
.store-link.live { color: #fff; background: var(--navy-900); border-color: var(--navy-900); }
.store-link b, .store-link small { display: block; }.store-link small { font-size: .7rem; }

.final-cta { padding: 120px 24px; text-align: center; color: #fff; background: radial-gradient(circle at 50% 100%, #124560, transparent 40%), var(--navy-950); }
.final-cta h2 { max-width: 820px; margin: 0 auto 16px; font-size: clamp(2.5rem, 5vw, 5rem); }.final-cta > p:not(.eyebrow) { margin-bottom: 30px; color: #aabfce; }
.site-footer { position: relative; display: grid; grid-template-columns: 2fr repeat(3,1fr); gap: 44px; padding: 72px clamp(24px, 7vw, 110px) 110px; color: #a9bac7; background: var(--navy-950); border-top: 1px solid rgba(255,255,255,.1); }
.site-footer.compact { grid-template-columns: 2fr 1fr 1fr; }
.footer-brand img { width: 160px; height: 58px; object-fit: contain; object-position: left; }.footer-brand p { margin-top: 12px; }
.site-footer h3 { margin: 0 0 15px; color: #fff; font-size: .9rem; }.site-footer a { display: block; margin: 8px 0; font-size: .88rem; }.site-footer a:hover { color: var(--lime); }
.copyright { position: absolute; left: clamp(24px, 7vw, 110px); bottom: 28px; font-size: .75rem; }

.page-hero { padding: 130px clamp(24px, 9vw, 150px) 100px; color: #fff; background: radial-gradient(circle at 80% 20%, #124763 0, transparent 27%), var(--navy-900); }
.page-hero h1 { max-width: 1000px; margin: 0; font-size: clamp(2.8rem, 5.6vw, 6.1rem); }.page-hero > p:last-child { max-width: 750px; margin: 25px 0 0; color: #b6c8d5; font-size: 1.08rem; }
.pricing-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; max-width: 1260px; margin: auto; }
.price-card { position: relative; display: flex; flex-direction: column; padding: 42px; background: #fff; border: 1px solid var(--line); border-radius: 24px; box-shadow: 0 18px 50px rgba(8,36,54,.08); }
.pro-card { color: #fff; background: var(--navy-900); border-color: var(--navy-900); }
.popular { position: absolute; top: 22px; right: 22px; padding: 5px 10px; color: var(--navy-950); background: var(--lime); border-radius: 999px; font-size: .68rem; font-weight: 800; text-transform: uppercase; }
.plan-title span, .plan-title b { display: block; }.plan-title span { color: #0b9187; font: 700 2.1rem WmsRoboto; }.pro-card .plan-title span { color: var(--lime); }.plan-title b { color: var(--muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; }.pro-card .plan-title b { color: #9fb5c5; }
.price { margin: 35px 0 22px; }.price strong { display: block; font: 700 3.8rem WmsRoboto; }.price span { color: var(--muted); }.pro-card .price span, .pro-card > p { color: #b4c6d3; }
.check-list { flex: 1; list-style: none; margin: 28px 0 35px; padding: 0; }.check-list li { position: relative; padding: 10px 0 10px 30px; border-bottom: 1px solid var(--line); }.pro-card .check-list li { border-color: rgba(255,255,255,.12); }.check-list li::before { content: '✓'; position: absolute; left: 0; color: #07948a; font-weight: 900; }.pro-card .check-list li::before { color: var(--lime); }
.annual-note { margin-top: 12px; color: #9db2c0; text-align: center; }
.beta-note { max-width: 1080px; margin: 0 auto; padding-top: 0; }.beta-note strong { display: inline-block; margin-bottom: 8px; color: #087f78; }.beta-note p { margin: 0; color: var(--muted); }
.comparison { max-width: 1180px; margin: auto; padding-top: 40px; }.comparison-table { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: #fff; }.comparison-row { display: grid; grid-template-columns: 1fr 130px 130px; padding: 17px 24px; border-bottom: 1px solid var(--line); }.comparison-row:last-child { border: 0; }.comparison-row b { text-align: center; }.comparison-row.head { color: #fff; background: var(--navy-900); }.comparison-row.head b:first-child { text-align: left; }.comparison-row .yes { color: #078d83; }

.guide-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.guide-card { padding: 32px; border: 1px solid var(--line); border-radius: 20px; background: #fff; }.guide-card > span { color: #078d83; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }.guide-card h2 { margin: 24px 0 12px; font-size: 1.55rem; }.guide-card p { color: var(--muted); }.guide-card ol { margin: 28px 0 0; padding-left: 20px; }.guide-card li { padding: 5px 0; }
.guide-cta { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin: 0 clamp(24px, 7vw, 110px) 100px; padding: 38px; color: #fff; background: var(--navy-900); border-radius: 22px; }.guide-cta h2 { margin: 0; font-size: 2rem; }.guide-cta p { margin: 6px 0 0; color: #adc1cf; }
.support-options, .legal-links { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }.legal-links { grid-template-columns: repeat(2,minmax(0,1fr)); max-width: 1000px; }
.support-card { position: relative; min-height: 230px; padding: 32px; border: 1px solid var(--line); border-radius: 20px; background: #fff; transition: transform .2s, border-color .2s, box-shadow .2s; }.support-card:hover { transform: translateY(-4px); border-color: var(--teal); box-shadow: var(--shadow); }.support-card > span { position: absolute; top: 24px; right: 26px; color: #078d83; font-weight: 800; }.support-card h2 { margin: 55px 0 12px; font-size: 1.5rem; }.support-card p { color: var(--muted); }
.faq-section { max-width: 1050px; margin: auto; padding-top: 20px; }.faq-list { border-top: 1px solid var(--line); }.faq-list details { border-bottom: 1px solid var(--line); }.faq-list summary { display: flex; justify-content: space-between; gap: 20px; padding: 24px 0; cursor: pointer; font: 700 1.08rem WmsRoboto; list-style: none; }.faq-list summary::-webkit-details-marker { display: none; }.faq-list summary span { color: #078d83; font-size: 1.5rem; }.faq-list details[open] summary span { transform: rotate(45deg); }.faq-list details p { max-width: 820px; margin: -4px 0 24px; color: var(--muted); }

@media (max-width: 1050px) {
  .hero { grid-template-columns: 1fr; }.workflow-panel { max-width: 700px; transform: none; }.plans-preview { grid-template-columns: 1fr 1fr; }.plans-preview > .button { grid-column: span 2; justify-self: start; }.guide-grid { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 760px) {
  .site-header { height: 76px; padding-inline: 20px; }.brand img { width: 126px; }.menu-button { display: block; }.site-nav { display: none; position: absolute; top: 68px; left: 14px; right: 14px; flex-direction: column; align-items: stretch; gap: 2px; padding: 14px; color: #fff; background: var(--navy-900); border: 1px solid rgba(255,255,255,.14); border-radius: 16px; box-shadow: var(--shadow); }.site-nav.open { display: flex; }.site-nav a { padding: 11px 12px; }.nav-login { justify-content: center; margin-top: 5px; }
  .hero { min-height: 0; grid-template-columns: 1fr; padding: 118px 20px 70px; }.hero h1 { font-size: clamp(2.8rem, 13vw, 4.5rem); }.workflow-panel { margin-top: 10px; }.workflow-list li { grid-template-columns: 38px 1fr; }.workflow-list .pill { display: none; }.panel-footer { grid-template-columns: 1fr; }.panel-footer div { display: flex; justify-content: space-between; }
  .trust-strip i { display: none; }.trust-strip { justify-content: flex-start; gap: 12px 22px; }
  .section { padding: 76px 20px; }.feature-grid, .audience-section, .platform-section, .pricing-grid, .guide-grid, .support-options, .legal-links { grid-template-columns: 1fr; }.feature-card-wide { grid-column: auto; grid-template-columns: 1fr; }.feature-card { min-height: 280px; padding: 28px; }.quote-mini { margin-top: 48px; }.audience-section { gap: 40px; }.plans-preview { grid-template-columns: 1fr; }.plans-preview > .button { grid-column: auto; }.plan-summary { grid-template-columns: 1fr 1fr; }.platform-visual { min-height: 320px; }.site-footer, .site-footer.compact { grid-template-columns: 1fr 1fr; padding: 58px 20px 100px; }.footer-brand { grid-column: span 2; }.copyright { left: 20px; }
  .page-hero { padding: 100px 20px 70px; }.price-card { padding: 30px 25px; }.comparison-row { grid-template-columns: 1fr 62px 62px; padding: 15px 13px; font-size: .82rem; }.guide-cta { flex-direction: column; align-items: flex-start; margin: 0 20px 70px; padding: 28px; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }