@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root { --ink: #172b2d; --muted: #637274; --paper: #f5f2eb; --cream: #ebe6db; --teal: #0d5c5c; --teal-dark: #093f43; --coral: #ee7257; --line: #d6d5cd; --white: #fffdf8; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: 'Manrope', sans-serif; line-height: 1.6; }
a { color: inherit; text-decoration: none; }
.container { width: min(1160px, calc(100% - 64px)); margin: 0 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; }
.site-header { height: 82px; border-bottom: 1px solid rgba(23,43,45,.12); background: rgba(245,242,235,.92); position: relative; z-index: 5; }
.header-inner, .main-nav, .brand { display: flex; align-items: center; }
.header-inner { height: 100%; justify-content: space-between; }
.brand { gap: 10px; font-size: 17px; font-weight: 800; letter-spacing: -.04em; }
.brand-mark { display: grid; place-items: center; width: 32px; height: 32px; color: var(--paper); background: var(--teal); border-radius: 50%; font: 500 10px 'DM Mono', monospace; letter-spacing: -.08em; }
.brand-name span { color: var(--coral); }
.main-nav { gap: 32px; color: #536365; font-size: 13px; font-weight: 700; }
.main-nav a { transition: color .2s ease; }
.main-nav a:hover, .text-link:hover { color: var(--coral); }
.main-nav .nav-cta { color: var(--paper); background: var(--teal); padding: 10px 16px; border-radius: 2px; }
.main-nav .nav-cta:hover { background: var(--teal-dark); color: var(--paper); }
.menu-toggle { display: none; background: none; border: 0; padding: 8px; }
.hero { overflow: hidden; padding: 88px 0 108px; }
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 60px; }
.eyebrow { margin: 0 0 20px; color: var(--coral); font: 500 11px 'DM Mono', monospace; letter-spacing: .11em; text-transform: uppercase; }
.eyebrow-dot { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--coral); }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { letter-spacing: -.065em; line-height: 1.04; }
h1 { max-width: 630px; margin-bottom: 28px; font-size: clamp(42px, 4.6vw, 64px); font-weight: 800; }
h1 em, h2 em { color: var(--coral); font-style: normal; }
.hero-subtitle { max-width: 480px; margin-bottom: 34px; color: var(--muted); font-size: 16px; }
.hero-actions { display: flex; align-items: center; gap: 28px; }
.button { display: inline-flex; align-items: center; gap: 18px; padding: 15px 20px; font-size: 13px; font-weight: 800; }
.button-primary { background: var(--coral); color: var(--white); }
.button-primary:hover { background: #d95e47; }
.text-link { color: var(--teal); font-size: 13px; font-weight: 800; }
.text-link span { margin-left: 7px; font-size: 18px; }
.hero-note { margin: 27px 0 0; color: #87908e; font: 10px 'DM Mono', monospace; letter-spacing: .02em; text-transform: uppercase; }
.hero-note span { color: var(--coral); font-size: 14px; }
.hero-visual { min-height: 460px; position: relative; background: var(--teal-dark); overflow: hidden; }
.hero-visual:before { content: ''; position: absolute; inset: 0; opacity: .16; background-image: linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.3) 1px, transparent 1px); background-size: 40px 40px; }
.visual-sun { position: absolute; width: 220px; height: 220px; top: -75px; right: -30px; border: 1px solid rgba(238,114,87,.7); border-radius: 50%; box-shadow: 0 0 0 26px rgba(238,114,87,.08), 0 0 0 52px rgba(238,114,87,.06); }
.visual-label { position: absolute; top: 58px; color: rgba(255,253,248,.55); font: 10px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .1em; }.label-origin { left: 38px; }.label-destination { right: 32px; }
.route-line { position: absolute; top: 115px; left: 44px; right: 40px; border-top: 1px dashed rgba(255,253,248,.45); }.route-dot { position: absolute; top: -4px; width: 7px; height: 7px; background: var(--coral); border-radius: 50%; }.route-dot:last-child { right: 0; }.route-plane { position: absolute; top: -13px; left: 49%; color: var(--coral); font-size: 20px; transform: rotate(-25deg); }
.cost-card { position: absolute; left: 9%; right: 9%; bottom: 68px; padding: 25px 27px 24px; background: var(--white); color: var(--ink); box-shadow: 0 18px 35px rgba(0,0,0,.14); }.cost-example { margin-bottom: 8px; color: var(--coral); font: 500 9px 'DM Mono', monospace; letter-spacing: .1em; text-transform: uppercase; }.cost-card-top, .cost-legend span { display: flex; justify-content: space-between; }.cost-card-top { color: var(--muted); font: 9px 'DM Mono', monospace; letter-spacing: .09em; }.cost-status { color: var(--teal); }.cost-total { margin: 13px 0 21px; font-size: 38px; font-weight: 800; letter-spacing: -.07em; }.cost-total small { color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: 0; }.cost-bar { display: flex; height: 8px; gap: 3px; }.cost-bar span { display: block; height: 100%; }.bar-product { width: 65%; background: var(--teal); }.bar-freight { width: 16%; background: var(--coral); }.bar-duty { width: 12%; background: #d6a64b; }.bar-other { flex: 1; background: #cbd2cc; }.cost-legend { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 13px; color: var(--muted); font: 9px 'DM Mono', monospace; }.cost-legend span { display: block; }.cost-legend b { display: block; margin-top: 3px; color: var(--ink); font: 600 10px 'Manrope', sans-serif; }.cost-legend i { display: inline-block; width: 5px; height: 5px; margin-right: 5px; border-radius: 50%; }.legend-product { background: var(--teal); }.legend-freight { background: var(--coral); }.legend-duty { background: #d6a64b; }.visual-stamp { position: absolute; right: 36px; bottom: 20px; display: flex; align-items: center; gap: 8px; color: rgba(255,253,248,.55); font: 9px 'DM Mono', monospace; letter-spacing: .08em; }.visual-stamp span { color: var(--coral); font-size: 20px; }.visual-stamp small { font: 8px 'DM Mono', monospace; }
.tool-section { padding: 112px 0 120px; background: var(--white); }.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 70px; margin-bottom: 54px; }.section-heading h2, .process-intro h2, .about-section h2 { margin-bottom: 0; font-size: clamp(36px, 4.3vw, 57px); }.section-intro { max-width: 390px; margin: 0 0 2px; color: var(--muted); font-size: 14px; }.tool-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }.tool-card { min-height: 275px; position: relative; padding: 28px 30px; background: var(--cream); transition: transform .25s ease, background .25s ease; }.tool-card:hover { background: #dedbd0; transform: translateY(-4px); }.tool-card-featured { background: var(--teal); color: var(--white); }.tool-card-featured:hover { background: var(--teal-dark); }.tool-card-wide { grid-column: span 2; background: var(--teal-dark); color: var(--white); overflow: hidden; }.tool-number { color: var(--coral); font: 10px 'DM Mono', monospace; }.tool-icon { position: absolute; top: 24px; right: 28px; color: var(--coral); font-size: 29px; }.tool-card h3 { position: absolute; left: 30px; bottom: 64px; margin: 0; font-size: 22px; line-height: 1.1; letter-spacing: -.05em; }.tool-card p { position: absolute; left: 30px; bottom: 22px; max-width: 245px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.45; }.tool-card-featured p, .tool-card-wide p { color: rgba(255,253,248,.68); }.card-arrow { position: absolute; right: 27px; bottom: 23px; color: var(--coral); font-size: 21px; }.box-pattern { position: absolute; right: 45px; bottom: -50px; width: 170px; height: 170px; border: 1px solid rgba(255,255,255,.16); transform: rotate(45deg); }.box-pattern:after { content: ''; position: absolute; inset: 20px; border: 1px solid rgba(255,255,255,.16); }
.process-section { padding: 108px 0 112px; background: var(--teal); color: var(--white); }.process-intro { display: grid; grid-template-columns: 1fr 1fr; align-items: end; margin-bottom: 70px; }.eyebrow-light { color: #f7a08d; }.process-intro h2 { grid-row: span 2; }.process-intro > p:last-child { max-width: 310px; margin: 0; color: rgba(255,253,248,.65); font-size: 14px; }.process-steps { display: grid; grid-template-columns: 1fr 32px 1fr 32px 1fr; align-items: center; gap: 25px; }.process-step { position: relative; padding-top: 48px; border-top: 1px solid rgba(255,253,248,.25); }.step-index { position: absolute; top: 14px; left: 0; color: #f7a08d; font: 10px 'DM Mono', monospace; }.step-icon { color: #f7a08d; font-size: 28px; }.process-step h3 { margin: 14px 0 8px; font-size: 20px; letter-spacing: -.04em; }.process-step p { max-width: 230px; margin: 0; color: rgba(255,253,248,.62); font-size: 12px; line-height: 1.5; }.process-connector { color: #f7a08d; font-size: 22px; text-align: center; }
.about-section { padding: 110px 0; }.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; }.about-copy { max-width: 440px; padding-top: 31px; color: var(--muted); font-size: 15px; }.about-copy p { margin-bottom: 20px; }.dark-link { display: inline-block; margin-top: 15px; }.site-footer { padding: 43px 0 25px; background: var(--ink); color: var(--white); }.footer-top { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; padding-bottom: 45px; }.brand-footer { color: var(--white); }.footer-top > p { margin: 0; color: rgba(255,253,248,.55); font-size: 12px; }.footer-top nav { display: flex; justify-content: end; gap: 25px; color: rgba(255,253,248,.65); font-size: 12px; }.footer-top nav a:hover { color: var(--coral); }.footer-bottom { display: flex; justify-content: space-between; gap: 15px; padding-top: 20px; border-top: 1px solid rgba(255,253,248,.15); color: rgba(255,253,248,.4); font: 10px 'DM Mono', monospace; }
@media (max-width: 800px) { .container { width: min(100% - 40px, 600px); }.site-header { height: 70px; }.menu-toggle { display: block; }.menu-toggle span:not(.sr-only) { display: block; width: 24px; height: 2px; margin: 5px; background: var(--ink); }.main-nav { display: none; position: absolute; top: 70px; left: 0; right: 0; padding: 23px 20px; background: var(--white); box-shadow: 0 10px 20px rgba(0,0,0,.08); flex-direction: column; align-items: stretch; gap: 0; }.main-nav.is-open { display: flex; }.main-nav a { padding: 12px 0; }.main-nav .nav-cta { padding: 12px 16px; margin-top: 6px; text-align: center; }.hero { padding: 60px 0 70px; }.hero-grid { grid-template-columns: 1fr; gap: 52px; }.hero-visual { min-height: 390px; }.cost-card { bottom: 52px; padding: 20px; }.cost-total { font-size: 31px; }.cost-legend { gap: 5px; font-size: 8px; }.tool-section, .process-section, .about-section { padding: 75px 0; }.section-heading, .about-grid { display: block; }.section-intro { margin-top: 25px; }.tool-grid { grid-template-columns: 1fr 1fr; }.tool-card-wide { grid-column: span 2; }.process-intro { display: block; margin-bottom: 45px; }.process-intro > p:last-child { margin-top: 25px; }.process-steps { display: block; }.process-step { margin-bottom: 38px; }.process-connector { display: none; }.footer-top { grid-template-columns: 1fr; gap: 20px; }.footer-top nav { justify-content: start; }.footer-bottom { display: block; }.footer-bottom span { display: block; margin-top: 8px; } }
@media (max-width: 470px) { h1 { font-size: 40px; }.hero-actions { align-items: start; flex-direction: column; gap: 18px; }.hero-note { line-height: 2; }.hero-visual { min-height: 350px; }.cost-card { left: 5%; right: 5%; }.cost-legend { grid-template-columns: 1fr 1fr; }.cost-legend span:last-child { grid-column: span 2; }.tool-grid { grid-template-columns: 1fr; }.tool-card-wide { grid-column: auto; }.tool-card { min-height: 245px; }.tool-card h3 { font-size: 21px; }.section-heading h2, .process-intro h2, .about-section h2 { font-size: 39px; } }