/* Trade Job HQ standalone main-domain website · 15.90.0 */

:root {
    --ink: #0b1f2d;
    --ink-soft: #173646;
    --teal: #0d887f;
    --teal-dark: #086c68;
    --mint: #63d9ca;
    --mint-pale: #e4f7f4;
    --blue-pale: #edf4f7;
    --paper: #f6f9fa;
    --white: #ffffff;
    --muted: #61727d;
    --line: #dbe5e8;
    --shadow: 0 24px 70px rgba(8, 30, 43, .12);
    --soft-shadow: 0 12px 36px rgba(8, 30, 43, .075);
    --radius-lg: 28px;
    --radius-md: 18px;
    --radius-sm: 12px;
    --site-width: 1240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--white);
    color: var(--ink);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 16px;
    line-height: 1.58;
    -webkit-font-smoothing: antialiased;
}
body.menu-is-open { overflow: hidden; }
a { color: var(--teal-dark); text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; }
.site-wrap { width: min(var(--site-width), calc(100% - 48px)); margin-inline: auto; }
.screen-reader-text,
.skip-link:not(:focus) {
    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:focus {
    position: fixed;
    z-index: 999;
    top: 12px;
    left: 12px;
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--white);
    color: var(--ink);
}

/* Header */
.site-header {
    position: sticky;
    z-index: 100;
    top: 0;
    border-bottom: 1px solid rgba(219, 229, 232, .82);
    background: rgba(255, 255, 255, .91);
    backdrop-filter: blur(18px);
    transition: box-shadow .25s ease, background .25s ease;
}
.site-header.is-scrolled { background: rgba(255, 255, 255, .97); box-shadow: 0 8px 30px rgba(9, 32, 45, .08); }
.admin-bar .site-header { top: 32px; }
.site-header__row { display: flex; align-items: center; gap: 26px; min-height: 80px; }
.site-brand { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 11px; color: var(--ink); font-size: 19px; font-weight: 850; letter-spacing: -.025em; }
.site-brand b { color: var(--teal); }
.site-brand .custom-logo { width: auto; max-height: 50px; }
.site-brand__mark { position: relative; display: inline-flex; align-items: flex-end; gap: 3px; width: 36px; height: 36px; padding: 8px; overflow: hidden; border-radius: 10px; background: linear-gradient(145deg, var(--ink-soft), var(--teal)); box-shadow: 0 7px 18px rgba(13, 136, 127, .22); }
.site-brand__mark::after { position: absolute; inset: -11px auto auto 16px; width: 30px; height: 30px; border: 8px solid rgba(255, 255, 255, .1); border-radius: 50%; content: ""; }
.site-brand__mark i { position: relative; z-index: 1; width: 4px; border-radius: 4px; background: var(--white); }
.site-brand__mark i:nth-child(1) { height: 8px; opacity: .7; }
.site-brand__mark i:nth-child(2) { height: 14px; }
.site-brand__mark i:nth-child(3) { height: 20px; background: var(--mint); }
.primary-navigation { margin-left: auto; }
.site-menu { display: flex; align-items: center; gap: 24px; margin: 0; padding: 0; list-style: none; }
.site-menu li { position: relative; }
.site-menu a { display: block; padding: 28px 0; color: #29414e; font-size: 13px; font-weight: 780; white-space: nowrap; }
.site-menu a:hover,
.site-menu a:focus,
.site-menu .current-menu-item > a { color: var(--teal-dark); }
.site-menu .sub-menu { position: absolute; top: calc(100% - 8px); left: -18px; display: none; min-width: 220px; margin: 0; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--white); box-shadow: var(--soft-shadow); list-style: none; }
.site-menu li:hover > .sub-menu,
.site-menu li:focus-within > .sub-menu { display: block; }
.site-menu .sub-menu a { padding: 10px 12px; border-radius: 8px; }
.site-menu .sub-menu a:hover { background: var(--mint-pale); }
.site-header__actions { display: flex; flex: 0 0 auto; align-items: center; gap: 12px; }
.site-login { color: var(--ink); font-size: 13px; font-weight: 800; }
.site-login:hover { color: var(--teal); }
.menu-toggle { display: none; }

/* Buttons and common typography */
.site-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 50px;
    padding: 0 22px;
    border: 1px solid var(--teal);
    border-radius: 11px;
    background: var(--teal);
    color: var(--white);
    font-size: 14px;
    font-weight: 850;
    box-shadow: 0 10px 24px rgba(13, 136, 127, .18);
    transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.site-button:hover,
.site-button:focus { transform: translateY(-2px); background: var(--teal-dark); color: var(--white); box-shadow: 0 14px 30px rgba(13, 136, 127, .25); }
.site-button--small { min-height: 43px; padding-inline: 17px; }
.site-button--large { min-height: 56px; padding-inline: 26px; font-size: 15px; }
.site-button--ghost { border-color: rgba(255, 255, 255, .24); background: rgba(255, 255, 255, .07); color: var(--white); box-shadow: none; }
.site-button--ghost:hover { border-color: rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .13); }
.site-button--white { border-color: var(--white); background: var(--white); color: var(--ink); box-shadow: none; }
.site-button--white:hover { background: var(--mint-pale); color: var(--ink); }
.site-button--outline { background: transparent; color: var(--teal-dark); box-shadow: none; }
.text-link { display: inline-flex; align-items: center; gap: 11px; color: var(--teal-dark); font-weight: 850; }
.text-link span { transition: transform .2s ease; }
.text-link:hover span { transform: translateX(4px); }
.text-link--light { color: var(--white); }
.section-label { display: inline-flex; align-items: center; gap: 9px; color: var(--teal-dark); font-size: 11px; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
.section-label::before { width: 18px; height: 2px; border-radius: 2px; background: var(--mint); content: ""; }
.section-label--light { color: var(--mint); }
.site-section { padding: 96px 0; }
.site-section--mist { background: linear-gradient(180deg, #f2f7f8, #f8fbfb); }
.section-heading { max-width: 760px; margin-bottom: 42px; }
.section-heading--center { margin-inline: auto; text-align: center; }
.section-heading--center .section-label { justify-content: center; }
.section-heading--split { display: grid; grid-template-columns: 1.2fr .8fr; gap: 70px; align-items: end; max-width: none; }
.section-heading--light { color: var(--white); }
.section-heading h2,
.split-feature__copy h2,
.security-panel h2,
.partner-band h2,
.final-cta h2,
.contact-panel h2 {
    margin: 9px 0 14px;
    font-size: clamp(34px, 4.5vw, 57px);
    line-height: 1.04;
    letter-spacing: -.048em;
}
.section-heading p,
.split-feature__copy > p,
.security-panel > div > p,
.partner-band p,
.final-cta p,
.contact-panel p { margin: 0; color: var(--muted); font-size: 17px; }
.section-heading--light p,
.partner-band p,
.final-cta p,
.contact-panel p { color: #cbdde3; }

/* Home hero */
.hero { position: relative; overflow: hidden; padding: 98px 0 0; background: linear-gradient(132deg, #071923 0%, #0b2a39 50%, #0a585a 100%); color: var(--white); }
.hero::before { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 55px 55px; content: ""; mask-image: linear-gradient(to bottom, black, transparent 86%); }
.hero__glow { position: absolute; border-radius: 50%; filter: blur(2px); pointer-events: none; }
.hero__glow--one { top: -230px; right: 5%; width: 560px; height: 560px; background: radial-gradient(circle, rgba(80, 221, 202, .19), transparent 66%); }
.hero__glow--two { bottom: -300px; left: -200px; width: 700px; height: 700px; background: radial-gradient(circle, rgba(44, 132, 162, .19), transparent 66%); }
.hero__grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, .86fr) minmax(560px, 1.14fr); gap: 68px; align-items: center; }
.hero__copy { padding-bottom: 80px; }
.hero__label { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 19px; color: var(--mint); font-size: 11px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.hero__label i { width: 8px; height: 8px; border: 2px solid var(--mint); border-radius: 50%; box-shadow: 0 0 0 4px rgba(99, 217, 202, .11); }
.hero h1,
.page-hero h1 {
    max-width: 720px;
    margin: 0;
    font-size: clamp(48px, 6vw, 78px);
    line-height: .99;
    letter-spacing: -.058em;
}
.hero__copy > p,
.page-hero__grid > div > p { max-width: 665px; margin: 24px 0 0; color: #cde0e5; font-size: 18px; line-height: 1.65; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 31px; }
.hero__proof { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 28px; color: #b9d0d7; font-size: 12px; font-weight: 700; }
.hero__proof span { display: inline-flex; align-items: center; gap: 7px; }
.hero__proof b { display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: rgba(99, 217, 202, .16); color: var(--mint); font-size: 10px; }
.hero__visual { position: relative; align-self: end; padding-top: 30px; }
.hero-screen { position: relative; z-index: 3; width: 790px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .19); border-radius: 20px 20px 0 0; background: #edf3f5; box-shadow: 0 35px 90px rgba(0, 0, 0, .33); transform: rotate(-1deg); transform-origin: bottom left; }
.hero-screen__top { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; height: 39px; padding: 0 13px; border-bottom: 1px solid #dce6e9; background: #fff; color: #6e7f87; font-size: 9px; }
.hero-screen__top > span { display: flex; gap: 5px; }
.hero-screen__top i { width: 7px; height: 7px; border-radius: 50%; background: #d2dde0; }
.hero-screen__top i:nth-child(2) { background: #85d5ca; }
.hero-screen__top em { justify-self: center; padding: 4px 16px; border-radius: 20px; background: #f1f5f6; font-style: normal; }
.hero-screen__top b { justify-self: end; color: var(--teal); }
.hero-screen img { width: 100%; aspect-ratio: 1.45 / 1; object-fit: cover; object-position: top left; }
.hero__orbit { position: absolute; z-index: 1; border: 1px solid rgba(99, 217, 202, .18); border-radius: 50%; }
.hero__orbit--one { inset: -25px -180px auto auto; width: 570px; height: 570px; }
.hero__orbit--two { inset: 45px -105px auto auto; width: 420px; height: 420px; }
.floating-card { position: absolute; z-index: 4; padding: 12px 15px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 12px; background: rgba(255, 255, 255, .92); color: var(--ink); box-shadow: 0 16px 45px rgba(1, 21, 29, .25); backdrop-filter: blur(12px); }
.floating-card span { display: block; color: #71828a; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.floating-card strong { display: block; font-size: 13px; }
.floating-card--top { top: 82px; right: -28px; }
.floating-card--bottom { bottom: 60px; left: -26px; display: flex; align-items: center; gap: 10px; }
.floating-card--bottom > i { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 9px; background: var(--teal); color: #fff; font-style: normal; }
.hero__footer { position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 30px; min-height: 83px; border-top: 1px solid rgba(255,255,255,.1); }
.hero__footer > span { color: var(--mint); font-size: 10px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.hero__footer > div { display: flex; align-items: center; gap: 14px; color: #b8cfd6; }
.hero__footer i { font-size: 11px; font-style: normal; font-weight: 750; }
.hero__footer b { color: rgba(255,255,255,.32); }

/* Workflow and cards */
.quick-paths-section { padding: 32px 0; border-bottom: 1px solid var(--line); background: var(--white); }
.quick-paths__heading { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin-bottom: 18px; }
.quick-paths__heading h2 { max-width: 680px; margin: 0; font-size: clamp(24px, 3vw, 36px); line-height: 1.1; letter-spacing: -.035em; text-align: right; }
.quick-paths { display: grid; grid-template-columns: repeat(4, 1fr); overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper); box-shadow: var(--soft-shadow); }
.quick-paths a { display: grid; grid-template-columns: auto 1fr auto; gap: 13px; align-items: center; min-height: 94px; padding: 18px; border-right: 1px solid var(--line); color: var(--ink); transition: background .2s ease, color .2s ease; }
.quick-paths a:last-child { border-right: 0; }
.quick-paths a:hover, .quick-paths a:focus { background: var(--ink); color: var(--white); }
.quick-paths i { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 9px; background: var(--mint-pale); color: var(--teal-dark); font-size: 9px; font-style: normal; font-weight: 900; }
.quick-paths span { min-width: 0; }
.quick-paths strong, .quick-paths small { display: block; }
.quick-paths strong { font-size: 13px; line-height: 1.25; }
.quick-paths small { margin-top: 3px; color: var(--muted); font-size: 10px; line-height: 1.35; }
.quick-paths a:hover small, .quick-paths a:focus small { color: #bcd0d7; }
.quick-paths b { color: var(--teal); font-size: 17px; }
.workflow-line { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--white); box-shadow: var(--soft-shadow); }
.workflow-line::before { position: absolute; top: 40px; left: 10%; right: 10%; height: 1px; background: linear-gradient(90deg, var(--mint), var(--teal)); content: ""; }
.workflow-line article { position: relative; z-index: 1; padding: 25px 20px 27px; border-right: 1px solid var(--line); }
.workflow-line article:last-child { border: 0; }
.workflow-line article > span { display: grid; place-items: center; width: 31px; height: 31px; margin-bottom: 18px; border: 4px solid var(--white); border-radius: 50%; background: var(--mint-pale); color: var(--teal-dark); box-shadow: 0 0 0 1px var(--line); font-size: 9px; font-weight: 900; }
.workflow-line h3 { margin: 0 0 7px; font-size: 16px; }
.workflow-line p { margin: 0; color: var(--muted); font-size: 13px; }
.spotlight-grid { display: grid; grid-template-columns: minmax(0, 1.28fr) minmax(300px, .72fr); gap: 35px; align-items: center; }
.spotlight-points { display: grid; gap: 5px; }
.spotlight-points article { display: grid; grid-template-columns: 42px 1fr; gap: 18px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.spotlight-points article > b { display: grid; place-items: center; align-self: start; width: 40px; height: 40px; border-radius: 10px; background: var(--mint-pale); color: var(--teal-dark); font-size: 10px; }
.spotlight-points h3 { margin: 0 0 5px; font-size: 18px; }
.spotlight-points p { margin: 0; color: var(--muted); font-size: 14px; }
.spotlight-points > .text-link { margin-top: 17px; }
.product-screen { margin: 0; }
.product-screen__button { width: 100%; padding: 0; overflow: hidden; border: 1px solid rgba(17, 57, 73, .15); border-radius: 16px; background: #edf3f5; box-shadow: var(--shadow); text-align: left; cursor: zoom-in; transition: transform .25s ease, box-shadow .25s ease; }
.product-screen__button:hover { transform: translateY(-4px); box-shadow: 0 30px 78px rgba(8, 30, 43, .17); }
.product-screen__bar { display: flex; align-items: center; gap: 5px; height: 34px; padding: 0 12px; background: var(--white); }
.product-screen__bar i { width: 7px; height: 7px; border-radius: 50%; background: #d5dfe2; }
.product-screen__bar i:nth-child(2) { background: #f4b467; }
.product-screen__bar i:nth-child(3) { background: #6bcfc1; }
.product-screen__bar em { margin-left: auto; color: #809099; font-size: 8px; font-style: normal; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.product-screen__button img { width: 100%; aspect-ratio: 1.45 / 1; object-fit: cover; object-position: top left; }
.product-screen figcaption { padding: 12px 3px 0; color: var(--muted); font-size: 12px; }
.feature-bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.feature-card { position: relative; min-height: 260px; padding: 25px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--white); color: var(--ink); box-shadow: 0 5px 20px rgba(8, 30, 43, .035); transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.feature-card::after { position: absolute; right: -55px; bottom: -75px; width: 160px; height: 160px; border: 25px solid rgba(13, 136, 127, .05); border-radius: 50%; content: ""; transition: transform .3s ease; }
.feature-card:hover { transform: translateY(-5px); border-color: #9fcac5; box-shadow: var(--soft-shadow); }
.feature-card:hover::after { transform: scale(1.12); }
.feature-card.wide { grid-column: span 2; background: linear-gradient(140deg, var(--ink), var(--ink-soft)); color: var(--white); }
.feature-card > span { display: grid; place-items: center; width: 39px; height: 39px; margin-bottom: 35px; border-radius: 10px; background: var(--mint-pale); color: var(--teal-dark); font-size: 10px; font-weight: 900; }
.feature-card.wide > span { background: rgba(99, 217, 202, .12); color: var(--mint); }
.feature-card h3 { margin: 0 0 8px; font-size: 21px; letter-spacing: -.02em; }
.feature-card p { max-width: 510px; margin: 0 0 25px; color: var(--muted); font-size: 14px; }
.feature-card.wide p { color: #c8d9df; }
.feature-card > b { position: absolute; z-index: 1; bottom: 21px; color: var(--teal-dark); font-size: 12px; }
.feature-card.wide > b { color: var(--mint); }
.feature-card > b i { margin-left: 5px; font-style: normal; }

/* Product tour */
.product-tour { background: linear-gradient(135deg, #071923, #103b4a 60%, #0d6a68); }
.tour-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 22px; }
.product-tour .product-screen__button { border-color: rgba(255,255,255,.2); box-shadow: 0 24px 65px rgba(0,0,0,.25); }
.product-tour .product-screen figcaption { color: #bcd0d6; }
.split-feature { display: grid; grid-template-columns: minmax(320px, .75fr) minmax(0, 1.25fr); gap: 65px; align-items: center; }
.split-feature--reverse { grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr); }
.split-feature__copy h2 { font-size: clamp(34px, 4vw, 52px); }
.check-list { display: grid; gap: 12px; margin: 27px 0 30px; padding: 0; list-style: none; }
.check-list li { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start; color: #334b57; font-size: 14px; font-weight: 700; }
.check-list li::before { display: grid; place-items: center; width: 21px; height: 21px; border-radius: 6px; background: var(--mint-pale); color: var(--teal); content: "✓"; font-size: 11px; font-weight: 950; }
.partner-band { position: relative; overflow: hidden; background: linear-gradient(120deg, #0b2634, #0a5e5e); color: var(--white); }
.partner-band::after { position: absolute; top: -190px; right: -160px; width: 520px; height: 520px; border: 70px solid rgba(255,255,255,.04); border-radius: 50%; content: ""; }
.partner-band__grid { position: relative; z-index: 1; display: grid; grid-template-columns: .75fr 1.25fr; gap: 80px; align-items: center; }
.partner-band h2 { font-size: clamp(36px, 4.2vw, 55px); }
.partner-band .site-button { margin-top: 27px; }
.partner-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; gap: 12px; align-items: center; }
.partner-flow article { min-height: 112px; padding: 18px 14px; border: 1px solid rgba(255,255,255,.15); border-radius: 14px; background: rgba(255,255,255,.08); }
.partner-flow article span { display: block; margin-bottom: 21px; color: var(--mint); font-size: 10px; font-weight: 900; }
.partner-flow article strong { font-size: 13px; }
.partner-flow > i { color: rgba(255,255,255,.45); font-style: normal; }
.security-panel { display: grid; grid-template-columns: .85fr 1.15fr; gap: 75px; padding: 55px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: linear-gradient(140deg, #f4f9fa, #fff); box-shadow: var(--soft-shadow); }
.security-panel h2 { font-size: clamp(34px, 4vw, 50px); }
.security-panel .text-link { margin-top: 25px; }
.security-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.security-grid article { padding: 23px; border: 1px solid var(--line); border-radius: 14px; background: var(--white); }
.security-grid i { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 24px; border-radius: 10px; background: var(--ink); color: var(--mint); font-size: 10px; font-style: normal; font-weight: 900; }
.security-grid strong { display: block; margin-bottom: 5px; font-size: 15px; }
.security-grid span { display: block; color: var(--muted); font-size: 12px; }

/* Internal pages */
.page-hero { position: relative; overflow: hidden; padding: 88px 0 72px; background: linear-gradient(130deg, #071923, #0b3442 58%, #0a6261); color: var(--white); }
.page-hero::before { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px); background-size: 52px 52px; content: ""; }
.page-hero__glow { position: absolute; right: -140px; bottom: -250px; width: 620px; height: 620px; border: 75px solid rgba(99,217,202,.06); border-radius: 50%; }
.page-hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: .82fr 1.18fr; gap: 70px; align-items: center; }
.page-hero h1 { max-width: 680px; font-size: clamp(46px, 5.3vw, 70px); }
.page-hero__screen .product-screen { transform: perspective(1000px) rotateY(-3deg); }
.page-hero .product-screen figcaption { color: #bcd1d7; }
.breadcrumb-bar { border-bottom: 1px solid var(--line); background: var(--white); }
.breadcrumb-bar > div { display: flex; align-items: center; gap: 11px; min-height: 54px; color: #7b8c94; font-size: 11px; }
.breadcrumb-bar b { color: var(--ink); }
.detail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.detail-grid article { min-height: 235px; padding: 26px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--white); box-shadow: 0 8px 28px rgba(8, 30, 43, .045); }
.detail-grid article > span { display: grid; place-items: center; width: 39px; height: 39px; margin-bottom: 34px; border-radius: 10px; background: var(--mint-pale); color: var(--teal-dark); font-size: 10px; font-weight: 900; }
.detail-grid h3 { margin: 0 0 9px; font-size: 19px; }
.detail-grid p { margin: 0; color: var(--muted); font-size: 14px; }
.page-screens { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 22px; }
.page-screens--single { grid-template-columns: minmax(0, 890px); justify-content: center; }
.page-steps { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--white); box-shadow: var(--soft-shadow); }
.page-steps article { display: flex; align-items: center; gap: 14px; min-height: 105px; padding: 20px; border-right: 1px solid var(--line); }
.page-steps article:last-child { border: 0; }
.page-steps span { display: grid; place-items: center; flex: 0 0 auto; width: 35px; height: 35px; border-radius: 10px; background: var(--ink); color: var(--mint); font-size: 10px; font-weight: 900; }
.page-steps strong { font-size: 14px; }
.pricing-intro { padding-bottom: 0; }
.pricing-path { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; }
.pricing-path article { padding: 24px; border: 1px solid var(--line); border-radius: 15px; background: var(--white); box-shadow: var(--soft-shadow); }
.pricing-path article > span { color: var(--teal); font-size: 10px; font-weight: 900; }
.pricing-path h3 { margin: 22px 0 8px; font-size: 17px; }
.pricing-path p { margin: 0; color: var(--muted); font-size: 13px; }
.pricing-action { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-top: 18px; padding: 27px 30px; border-radius: 15px; background: var(--ink); color: var(--white); }
.pricing-action span { display: block; color: var(--mint); font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.pricing-action strong { display: block; margin-top: 4px; font-size: 18px; }
.partner-detail { background: linear-gradient(135deg, #071923, #0f4e57); color: var(--white); }
.partner-journey { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; gap: 14px; align-items: center; }
.partner-journey article { min-height: 190px; padding: 23px; border: 1px solid rgba(255,255,255,.15); border-radius: 16px; background: rgba(255,255,255,.06); }
.partner-journey article > span { color: var(--mint); font-size: 10px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.partner-journey strong { display: block; margin-top: 34px; font-size: 16px; }
.partner-journey p { margin: 8px 0 0; color: #c7d9df; font-size: 12px; }
.partner-journey > i { color: rgba(255,255,255,.5); font-style: normal; }
.contact-panel-section { padding-top: 0; }
.contact-form-section { background: var(--paper); }
.contact-form-grid { display: grid; grid-template-columns: .72fr 1.28fr; gap: 70px; align-items: start; }
.contact-form-grid > div h2 { margin: 9px 0 15px; font-size: clamp(36px, 4.5vw, 56px); line-height: 1.04; letter-spacing: -.048em; }
.contact-form-grid > div > p { margin: 0; color: var(--muted); }
.contact-form { position: relative; display: grid; gap: 17px; padding: 30px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--white); box-shadow: var(--soft-shadow); }
.contact-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.contact-form label { display: grid; gap: 7px; color: var(--ink); font-size: 12px; font-weight: 850; }
.contact-form label > span { color: var(--muted); font-weight: 600; }
.contact-form input:not([type="checkbox"]),
.contact-form textarea { width: 100%; border: 1px solid #cad8dc; border-radius: 10px; background: #fbfdfd; color: var(--ink); outline: none; }
.contact-form input:not([type="checkbox"]) { min-height: 48px; padding: 0 13px; }
.contact-form textarea { min-height: 145px; padding: 12px 13px; resize: vertical; }
.contact-form input:focus,
.contact-form textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(13,136,127,.12); }
.contact-form .contact-consent { display: flex; align-items: flex-start; grid-template-columns: none; gap: 9px; color: var(--muted); font-weight: 650; }
.contact-consent input { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; accent-color: var(--teal); }
.contact-form__trap { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.form-alert { padding: 12px 14px; border-radius: 10px; font-size: 13px; font-weight: 750; }
.form-alert--success { border: 1px solid #8dcfc2; background: #e7f7f3; color: #075e55; }
.form-alert--error { border: 1px solid #edb2a7; background: #fff0ed; color: #8a2f21; }
.contact-panel { display: grid; grid-template-columns: .65fr 1.35fr; gap: 60px; padding: 50px; border-radius: var(--radius-lg); background: linear-gradient(135deg, #071923, #0b5a5b); color: var(--white); }
.contact-panel h2 { font-size: 46px; }
.contact-options { display: grid; gap: 10px; }
.contact-options a { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 19px 22px; border: 1px solid rgba(255,255,255,.15); border-radius: 12px; background: rgba(255,255,255,.07); color: var(--white); }
.contact-options a:hover { background: rgba(255,255,255,.12); }
.contact-options span { color: #a9c5cc; font-size: 11px; font-weight: 850; text-transform: uppercase; }
.contact-options strong { font-size: 15px; }
.content-hero { padding: 75px 0 60px; background: linear-gradient(135deg, var(--ink), #0b5a5b); color: var(--white); }
.content-hero h1 { margin: 8px 0 0; font-size: clamp(44px, 6vw, 68px); letter-spacing: -.05em; }
.site-content { min-height: 50vh; padding: 75px 0; }
.editor-content { max-width: 840px; }
.editor-content h2 { margin-top: 45px; font-size: 30px; }
.editor-content p,
.editor-content li { color: #405662; }
.not-found { display: grid; align-items: center; min-height: 68vh; padding: 80px 0; background: var(--paper); }
.not-found > div { max-width: 820px; }
.not-found h1 { margin: 10px 0 15px; font-size: clamp(48px, 7vw, 78px); line-height: 1; letter-spacing: -.055em; }
.not-found p { max-width: 600px; color: var(--muted); font-size: 18px; }
.legal-hero { padding-block: 82px; }
.legal-hero__inner { position: relative; z-index: 1; max-width: 940px; }
.legal-hero__inner h1 { max-width: 900px; }
.legal-hero__inner > p { max-width: 720px; margin: 23px 0 0; color: #cde0e5; font-size: 17px; }
.legal-content > .site-wrap { max-width: 920px; }
.legal-updated { margin: 0 0 28px; color: var(--teal-dark); font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.legal-content article { display: grid; grid-template-columns: 45px 1fr; gap: 23px; padding: 30px 0; border-top: 1px solid var(--line); }
.legal-content article > span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--mint-pale); color: var(--teal-dark); font-size: 10px; font-weight: 900; }
.legal-content h2 { margin: 3px 0 8px; font-size: 23px; letter-spacing: -.025em; }
.legal-content article p { margin: 0; color: #405662; }
.legal-note { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin-top: 28px; padding: 23px 25px; border-radius: 13px; background: var(--ink); color: var(--white); }
.legal-note span { color: #bdd0d6; font-size: 13px; }

/* Footer and dialog */
.final-cta { padding: 78px 0; background: linear-gradient(120deg, #0c736d, #0c9286); color: var(--white); }
.final-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 55px; }
.final-cta h2 { margin-bottom: 9px; font-size: clamp(38px, 4.5vw, 58px); }
.final-cta__actions { display: flex; flex: 0 0 auto; align-items: center; gap: 22px; }
.site-footer { padding: 68px 0 24px; background: #071720; color: #a8bec6; }
.footer-grid { display: grid; grid-template-columns: 1.5fr repeat(3, .75fr); gap: 65px; }
.site-brand--footer { margin-bottom: 18px; color: var(--white); }
.footer-brand p { max-width: 340px; margin: 0 0 18px; font-size: 13px; }
.footer-brand > a { color: #c5d5db; font-size: 13px; }
.footer-grid > div:not(.footer-brand) { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.footer-grid strong { margin-bottom: 8px; color: var(--white); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.footer-grid > div:not(.footer-brand) a { color: #a8bec6; font-size: 12px; }
.footer-grid a:hover { color: var(--mint); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin-top: 52px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.08); color: #6e8992; font-size: 10px; }
.screen-dialog { position: fixed; width: min(94vw, 1500px); max-width: none; max-height: 92vh; padding: 0; overflow: visible; border: 0; border-radius: 15px; background: var(--white); box-shadow: 0 40px 120px rgba(0,0,0,.45); }
.screen-dialog::backdrop { background: rgba(4, 16, 23, .83); backdrop-filter: blur(5px); }
.screen-dialog img { width: 100%; max-height: 88vh; border-radius: 15px; object-fit: contain; }
.screen-dialog__close { position: absolute; z-index: 2; top: -16px; right: -16px; display: grid; place-items: center; width: 39px; height: 39px; border: 2px solid var(--white); border-radius: 50%; background: var(--ink); color: var(--white); font-size: 23px; line-height: 1; cursor: pointer; }
.mobile-action-bar { display: none; }

/* Motion */
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .65s ease, transform .65s ease; }
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
    [data-reveal] { opacity: 1; transform: none; }
}

/* Responsive */
@media (max-width: 1120px) {
    .site-header__row { gap: 18px; }
    .site-menu { gap: 15px; }
    .site-menu a { font-size: 12px; }
    .hero__grid { grid-template-columns: .9fr 1.1fr; gap: 35px; }
    .hero-screen { width: 690px; }
    .feature-bento { grid-template-columns: repeat(3, 1fr); }
    .feature-card.wide { grid-column: span 2; }
    .partner-band__grid { grid-template-columns: 1fr; gap: 42px; }
    .footer-grid { gap: 40px; }
}

@media (max-width: 960px) {
    .admin-bar .site-header { top: 46px; }
    .site-header__row { min-height: 70px; }
    .menu-toggle { display: inline-flex; order: 3; align-items: center; justify-content: center; flex-direction: column; gap: 4px; width: 43px; height: 43px; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--white); }
    .menu-toggle span { display: block; width: 17px; height: 2px; border-radius: 2px; background: var(--ink); }
    .menu-toggle em { position: absolute; width: 1px; height: 1px; overflow: hidden; font-style: normal; clip: rect(0,0,0,0); }
    .primary-navigation { position: fixed; top: 70px; right: 0; bottom: 0; left: 0; display: none; margin: 0; padding: 20px 24px 35px; overflow: auto; border-top: 1px solid var(--line); background: var(--white); }
    .admin-bar .primary-navigation { top: 116px; }
    .primary-navigation.is-open { display: block; }
    .site-menu { display: block; }
    .site-menu a { padding: 15px 4px; border-bottom: 1px solid var(--line); font-size: 16px; }
    .site-menu .sub-menu { position: static; display: block; padding: 0 0 0 20px; border: 0; box-shadow: none; }
    .site-menu .sub-menu a { font-size: 14px; }
    .site-header__actions { margin-left: auto; }
    .hero { padding-top: 78px; }
    .hero__grid { grid-template-columns: 1fr; }
    .hero__copy { padding-bottom: 10px; }
    .hero__visual { width: 90%; margin-left: auto; }
    .hero-screen { width: 100%; }
    .hero__footer { margin-top: 45px; }
    .workflow-line { grid-template-columns: repeat(2, 1fr); }
    .quick-paths { grid-template-columns: repeat(2, 1fr); }
    .quick-paths a:nth-child(2) { border-right: 0; }
    .quick-paths a:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
    .workflow-line::before { display: none; }
    .workflow-line article { border-bottom: 1px solid var(--line); }
    .workflow-line article:nth-child(2n) { border-right: 0; }
    .spotlight-grid,
    .split-feature,
    .split-feature--reverse,
    .security-panel,
    .page-hero__grid,
    .contact-panel,
    .contact-form-grid { grid-template-columns: 1fr; }
    .split-feature--reverse .product-screen { order: 2; }
    .section-heading--split { grid-template-columns: 1fr; gap: 12px; }
    .feature-bento { grid-template-columns: repeat(2, 1fr); }
    .feature-card.wide { grid-column: span 1; }
    .detail-grid { grid-template-columns: repeat(2, 1fr); }
    .page-steps,
    .pricing-path { grid-template-columns: repeat(2, 1fr); }
    .page-steps article:nth-child(2) { border-right: 0; }
    .page-steps article:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
    .partner-journey { grid-template-columns: repeat(2, 1fr); }
    .partner-journey > i { display: none; }
    .footer-grid { grid-template-columns: repeat(3, 1fr); }
    .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 700px) {
    body { padding-bottom: 67px; }
    .site-wrap { width: min(100% - 28px, var(--site-width)); }
    .site-header__actions .site-login { display: none; }
    .site-button--small { min-height: 40px; padding-inline: 13px; font-size: 12px; }
    .site-brand { font-size: 17px; }
    .site-brand__mark { width: 33px; height: 33px; }
    .hero { padding-top: 60px; }
    .hero h1,
    .page-hero h1 { font-size: 46px; }
    .hero__copy > p,
    .page-hero__grid > div > p { font-size: 16px; }
    .hero__actions { flex-direction: column; }
    .hero__actions .site-button { width: 100%; }
    .hero__proof { display: grid; }
    .hero__visual { width: 100%; margin-top: 15px; }
    .hero-screen { transform: none; }
    .floating-card { display: none; }
    .hero__footer { align-items: flex-start; flex-direction: column; padding: 22px 0; }
    .hero__footer > div { flex-wrap: wrap; gap: 8px; }
    .hero__footer > div b { display: none; }
    .hero__footer > div i { padding: 5px 8px; border: 1px solid rgba(255,255,255,.12); border-radius: 20px; }
    .quick-paths-section { padding: 27px 0; }
    .quick-paths__heading { align-items: flex-start; flex-direction: column; gap: 8px; }
    .quick-paths__heading h2 { text-align: left; }
    .quick-paths { grid-template-columns: 1fr; }
    .quick-paths a, .quick-paths a:nth-child(2), .quick-paths a:nth-child(-n+2) { min-height: 82px; border-right: 0; border-bottom: 1px solid var(--line); }
    .quick-paths a:last-child { border-bottom: 0; }
    .site-section { padding: 68px 0; }
    .section-heading h2,
    .split-feature__copy h2,
    .security-panel h2,
    .partner-band h2,
    .final-cta h2 { font-size: 38px; }
    .workflow-line,
    .feature-bento,
    .tour-grid,
    .detail-grid,
    .page-screens,
    .page-steps,
    .pricing-path,
    .security-grid,
    .partner-journey { grid-template-columns: 1fr; }
    .workflow-line article,
    .workflow-line article:nth-child(2n),
    .workflow-line article:last-child { border-right: 0; border-bottom: 1px solid var(--line); }
    .workflow-line article:last-child { border-bottom: 0; }
    .feature-card { min-height: 245px; }
    .split-feature,
    .split-feature--reverse { gap: 38px; }
    .partner-flow { grid-template-columns: repeat(2, 1fr); }
    .partner-flow > i { display: none; }
    .security-panel,
    .contact-panel { gap: 35px; padding: 30px 22px; }
    .page-hero { padding: 64px 0 55px; }
    .page-hero__grid { gap: 45px; }
    .page-hero__screen .product-screen { transform: none; }
    .page-steps article,
    .page-steps article:nth-child(2),
    .page-steps article:nth-child(-n+2) { border-right: 0; border-bottom: 1px solid var(--line); }
    .page-steps article:last-child { border-bottom: 0; }
    .pricing-action,
    .final-cta__inner { align-items: stretch; flex-direction: column; }
    .final-cta__actions { align-items: stretch; flex-direction: column; }
    .contact-options a { align-items: flex-start; flex-direction: column; gap: 3px; }
    .contact-form { padding: 23px 18px; }
    .contact-form__grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 35px; }
    .footer-grid > div:last-child { grid-column: 1 / -1; }
    .footer-bottom { align-items: flex-start; flex-direction: column; }
    .screen-dialog__close { top: 8px; right: 8px; }
    .legal-note { align-items: flex-start; flex-direction: column; }
    .mobile-action-bar { position: fixed; z-index: 150; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: .8fr 1.2fr; gap: 8px; min-height: 67px; padding: 9px 14px; border-top: 1px solid var(--line); background: rgba(255,255,255,.97); box-shadow: 0 -10px 30px rgba(8,30,43,.12); backdrop-filter: blur(14px); }
    .mobile-action-bar a { display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); font-size: 13px; font-weight: 850; }
    .mobile-action-bar a:last-child { gap: 10px; border-color: var(--teal); background: var(--teal); color: var(--white); }
}

@media (max-width: 420px) {
    .site-header__actions .site-button { display: none; }
    .site-header__row { justify-content: space-between; }
    .menu-toggle { margin-left: auto; }
    .hero h1,
    .page-hero h1 { font-size: 40px; }
    .footer-grid { grid-template-columns: 1fr; }
    .footer-grid > div:last-child { grid-column: auto; }
}