:root { --navy: #081D32; --navy-deep: #060F1D; --navy-soft: #0E2B4D; --navy-light: #143A63; --blue: #0085EE; --blue-bright: #2FA0FF; --blue-soft: #E6F3FE; --black: #000000; --white: #FFFFFF; --neutral: #F5F7FA; --neutral-2: #EDF1F5; --line: #E2E8EF; --text: #22314A; --text-soft: #31455F; --muted: #5C6B7D; --font-head: 'Space Grotesk', 'Inter', ui-sans-serif, system-ui, sans-serif; --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif; --radius-sm: 8px; --radius: 14px; --radius-lg: 22px; --shadow-1: 0 2px 10px rgba(8, 29, 50, 0.06); --shadow-2: 0 14px 40px -12px rgba(8, 29, 50, 0.18); --shadow-blue: 0 12px 30px -10px rgba(0, 133, 238, 0.45); --container: 1180px; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 92px; -webkit-text-size-adjust: 100%; } body.no-scroll { overflow: hidden; } body { margin: 0; font-family: var(--font-body); font-size: 16.5px; line-height: 1.65; color: var(--text); background: var(--white); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg { display: block; max-width: 100%; height: auto; } h1, h2, h3, h4 { font-family: var(--font-head); color: var(--navy); line-height: 1.12; margin: 0 0 0.6em; letter-spacing: -0.02em; text-wrap: balance; } p { margin: 0 0 1.1em; } .card h3, .cap b, .os h3, .audience h3, .include-step h3, .snap-item b, .process-step h3, .related-card h3 { line-height: 1.25; } a { color: var(--blue); text-decoration: none; } a:hover { color: var(--navy); } ul { margin: 0; padding: 0; } :focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 4px; } .skip-link { position: absolute; left: -999px; top: 0; background: var(--navy); color: #fff; padding: 12px 18px; z-index: 3000; border-radius: 0 0 8px 0; } .skip-link:focus { left: 0; color: #fff; } .container { width: min(var(--container), 100% - 40px); margin-inline: auto; } .section { padding: clamp(56px, 7vw, 88px) 0; position: relative; } .section--dark { background: var(--navy); color: #D7E2EE; } .section--dark h2, .section--dark h3 { color: var(--white); } .section--neutral { background: var(--neutral); } .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-head); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--blue); margin: 0 0 16px; } .eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--blue); border-radius: 2px; } .section--dark .eyebrow { color: var(--blue-bright); } .h2 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); font-weight: 700; max-width: 26ch; margin-bottom: 18px; } .lead { font-size: clamp(1.02rem, 1.4vw, 1.15rem); color: var(--text-soft); max-width: 62ch; margin-bottom: 42px; } .section--dark .lead { color: #B7C7D9; } @media (max-width: 767px) { .lead { font-size: 1.02rem; } } .kw { font-weight: 600; color: var(--blue); background: linear-gradient(180deg, rgba(0, 133, 238, 0.12), rgba(0, 133, 238, 0.16)); border-radius: 6px; padding: 0.04em 0.28em; white-space: nowrap; box-decoration-break: clone; -webkit-box-decoration-break: clone; } .section--dark .kw { color: #9BD4FF; background: rgba(0, 133, 238, 0.18); } .btn { --bg: var(--blue); display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--font-head); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.02em; padding: 15px 28px; border-radius: 10px; border: 2px solid transparent; background: var(--bg); color: #fff !important; cursor: pointer; transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease; white-space: nowrap; } .btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-blue); background: var(--navy); color: #fff !important; } .btn--outline { background: transparent; border-color: var(--navy); color: var(--navy) !important; } .btn--outline:hover { background: var(--navy); color: #fff !important; box-shadow: var(--shadow-2); } .btn--outline-light { background: transparent; border-color: rgba(255, 255, 255, 0.4); color: #fff !important; } .btn--outline-light:hover { background: #fff; border-color: #fff; color: var(--navy) !important; } .btn--sm { padding: 11px 18px; font-size: 0.88rem; } .btn .arrow { transition: transform 0.18s ease; } .btn:hover .arrow { transform: translateX(3px); } .header { position: sticky; top: 0; z-index: 1000; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(8, 29, 50, 0.08); transition: box-shadow 0.2s ease; } .header.scrolled { box-shadow: 0 8px 24px -14px rgba(8, 29, 50, 0.22); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 76px; } .logo-link { display: inline-flex; align-items: center; } .logo { height: 46px; width: auto; } .nav { display: flex; align-items: center; gap: 6px; } .nav a.nav-link { font-family: var(--font-head); font-weight: 500; font-size: 0.92rem; color: var(--text); padding: 12px 14px; border-radius: 8px; position: relative; } .nav a.nav-link:hover { color: var(--blue); background: var(--blue-soft); } .nav a.nav-link.active { color: var(--blue); } .dropdown-wrap { position: relative; display: flex; align-items: center; } .nav-link.has-drop { display: inline-flex; align-items: center; gap: 6px; } .nav-link.has-drop .chev { transition: transform 0.18s ease; } .dropdown-wrap:hover .nav-link.has-drop, .dropdown-wrap.open .nav-link.has-drop, .dropdown-wrap:focus-within .nav-link.has-drop { color: var(--blue); background: var(--blue-soft); } .dropdown-wrap:hover .chev, .dropdown-wrap.open .chev, .dropdown-wrap:focus-within .chev { transform: rotate(180deg); } .dropdown { position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(8px); min-width: 260px; background: var(--white); border: 1px solid var(--line); border-top: 3px solid var(--blue); border-radius: var(--radius); box-shadow: var(--shadow-2); padding: 10px; opacity: 0; visibility: hidden; transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s; z-index: 500; } .dropdown-wrap:hover .dropdown, .dropdown-wrap.open .dropdown, .dropdown-wrap:focus-within .dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .dropdown--wide { left: 50%; right: auto; transform: translateY(10px) translateX(-50%); min-width: 640px; max-height: min(520px, calc(100vh - 120px)); overflow-y: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; } .dropdown-wrap:hover .dropdown--wide, .dropdown-wrap.open .dropdown--wide, .dropdown-wrap:focus-within .dropdown--wide { transform: translateY(0) translateX(-50%); } .dropdown-wrap::before { content: ""; position: absolute; left: -100px; right: -100px; top: 100%; height: 14px; } #drop-services, #drop-signage { grid-template-columns: repeat(3, 1fr); min-width: 760px; } @media (max-width: 1240px) { #drop-services, #drop-signage { min-width: 620px; gap: 8px 14px; } #drop-printing { min-width: 560px; } .dropdown a { padding: 10px 12px; font-size: 0.86rem; white-space: normal; } } .dropdown .drop-head { display: block; font-family: var(--font-head); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); padding: 6px 12px; } .dropdown a { display: block; padding: 11px 14px; border-radius: 8px; font-family: var(--font-head); font-weight: 500; font-size: 0.9rem; color: var(--text); white-space: nowrap; } .dropdown a:hover { background: var(--blue-soft); color: var(--blue); } .mobile-menu .m-sub { padding-left: 34px; font-size: 0.95rem; color: var(--muted); } .header-cta { display: flex; align-items: center; gap: 14px; } .mobile-menu { display: none; } .nav-toggle { display: none; background: none; border: 0; cursor: pointer; width: 44px; height: 44px; border-radius: 10px; flex-direction: column; align-items: center; justify-content: center; gap: 6px; } .nav-toggle span { display: block; width: 24px; height: 2px; background: var(--navy); border-radius: 2px; transition: transform 0.25s ease, opacity 0.25s ease; } .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } .mobile-menu .m-label { display: block; font-family: var(--font-head); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue); padding: 16px 8px 4px; margin-top: 6px; border-bottom: 1px solid var(--line); } .header-cta .header-quote { padding: 11px 17px; font-size: 0.88rem; white-space: nowrap; } @media (max-width: 1240px) { .nav { gap: 2px; } .nav a.nav-link { padding: 12px 9px; font-size: 0.86rem; } } @media (max-width: 1120px) { .header-quote { display: none; } } .hero { position: relative; background: var(--navy); color: #D7E2EE; overflow: hidden; } .hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(900px 500px at 85% -10%, rgba(0, 133, 238, 0.22), transparent 60%), radial-gradient(700px 500px at -10% 110%, rgba(0, 133, 238, 0.12), transparent 55%); pointer-events: none; } .hero-grid { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: clamp(32px, 5vw, 64px); align-items: center; padding: clamp(56px, 8vw, 104px) 0 clamp(48px, 6vw, 80px); position: relative; } .hero-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-head); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.18em; color: var(--blue-bright); padding: 8px 14px; border: 1px solid rgba(0, 133, 238, 0.35); background: rgba(0, 133, 238, 0.08); border-radius: 999px; margin-bottom: 22px; } .hero h1 { font-size: clamp(2.4rem, 5vw, 3.7rem); font-weight: 700; color: var(--white); letter-spacing: -0.025em; margin-bottom: 20px; max-width: 22ch; } .hero-sub { font-size: clamp(1.02rem, 1.5vw, 1.18rem); color: #AFC1D4; max-width: 52ch; margin-bottom: 30px; } .hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 34px; } .hero-trust { display: flex; flex-wrap: wrap; gap: 18px; color: #8FA6BD; font-size: 0.86rem; font-family: var(--font-head); font-weight: 500; letter-spacing: 0.02em; } .hero-trust span { display: inline-flex; align-items: center; gap: 8px; } .hero-trust svg { flex: none; } .hero-visual { position: relative; border-radius: 18px; overflow: hidden; box-shadow: 0 30px 70px -24px rgba(0, 0, 0, 0.6); background: var(--navy-deep); } .hero-visual img { width: 100%; } .hero-float { position: absolute; left: -16px; bottom: 34px; display: flex; align-items: center; gap: 12px; background: rgba(255, 255, 255, 0.96); color: var(--navy); border-radius: 12px; box-shadow: var(--shadow-2); padding: 12px 16px; font-family: var(--font-head); } .hero-float b { display: block; font-size: 0.86rem; color: var(--navy); line-height: 1.2; } .hero-float small { font-size: 0.72rem; color: var(--muted); font-weight: 500; } .hero-float .tick { width: 36px; height: 36px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; flex: none; } .snapshot { margin-top: -1px; background: var(--white); border-bottom: 1px solid var(--line); padding: 40px 0; } .snapshot-inner { display: grid; grid-template-columns: repeat(5, 1fr); } .snap-item { display: flex; gap: 14px; padding: 18px 22px 18px 24px; border-left: 2px solid var(--line); } .snap-item:first-child { border-left-color: var(--blue); } .snap-num { font-family: var(--font-head); font-weight: 700; font-size: 1.35rem; color: var(--blue); line-height: 1; margin-top: 2px; } .snap-item b { display: block; font-family: var(--font-head); font-size: 0.92rem; color: var(--navy); letter-spacing: 0.01em; } .snap-item small { font-size: 0.78rem; color: var(--muted); line-height: 1.4; display: block; margin-top: 3px; } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; } .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; } .card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; transition: transform 0.2s ease, box-shadow 0.2s ease; } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); } .card-icon { width: 46px; height: 46px; border-radius: 12px; background: var(--blue-soft); color: var(--blue); display: grid; place-items: center; margin-bottom: 18px; } .card h3 { font-size: 1.12rem; margin-bottom: 8px; } .card p { font-size: 0.93rem; color: var(--muted); margin: 0; } .audience-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .audience { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 24px 24px 26px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); transition: transform 0.2s ease, box-shadow 0.2s ease; } .audience:nth-child(even) { background: var(--neutral); } .audience:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); } .audience .tag { width: 40px; height: 40px; border-radius: 10px; background: var(--navy); color: #fff; display: grid; place-items: center; margin-bottom: 8px; } .audience .tag:nth-child(odd) { background: var(--blue); } .audience h3 { font-size: 1.05rem; margin: 0; } .audience p { font-size: 0.9rem; color: var(--muted); margin: 0; } .included-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .include-step { position: relative; background: var(--white); border-radius: var(--radius); border: 1px solid var(--line); padding: 26px 26px 26px 76px; } .include-step::before { content: attr(data-n); position: absolute; left: 22px; top: 26px; font-family: var(--font-head); font-weight: 700; font-size: 1.1rem; color: var(--white); background: var(--blue); width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; } .include-step h3 { font-size: 1.02rem; margin-bottom: 6px; } .include-step p { font-size: 0.9rem; color: var(--muted); margin: 0; } .cap-wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .cap { position: relative; border-radius: var(--radius); overflow: hidden; min-height: 0; display: flex; flex-direction: column; justify-content: flex-start; padding: 20px; border: 1px solid rgba(255, 255, 255, 0.1); background: var(--navy-soft); transition: transform 0.2s ease, box-shadow 0.2s ease; cursor: default; } .cap:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -18px rgba(0, 133, 238, 0.4); } .cap .cap-glyph { position: absolute; top: 14px; left: 14px; opacity: 0.9; } .cap:has(.cap-glyph) { padding-left: 64px; } .cap .cap-glyph svg { width: 40px; height: 40px; } .cap .cap-visual { flex: 1 1 auto; display: flex; min-height: 0; } .cap .cap-visual img { flex: 1; width: 100%; height: 100%; object-fit: cover; } .cap b { font-family: var(--font-head); font-size: 1.02rem; color: #fff; letter-spacing: 0.01em; } .cap p { font-size: 0.84rem; color: #A9BDD2; margin: 6px 0 0; line-height: 1.45; } .cap::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform 0.25s ease; } .cap:hover::after { transform: scaleX(1); } .cap--feature { background: linear-gradient(160deg, var(--navy-light) 0%, var(--navy-soft) 55%, #04182B 100%); border-color: rgba(0, 133, 238, 0.35); } .materials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .mat { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease; } .mat:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); } .mat-fig { position: relative; } .mat-fig img { width: 100%; height: auto; } .mat-body { padding: 22px 24px 26px; } .mat-body h3 { font-size: 1.12rem; margin-bottom: 10px; } .mat-face { font-size: 0.9rem; color: var(--text-soft); margin-bottom: 12px; } .mat-rows { border-top: 1px solid var(--line); padding-top: 14px; } .mat-row { display: flex; gap: 12px; margin-bottom: 10px; } .mat-row svg { flex: none; margin-top: 4px; } .mat-row b { display: block; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--navy); font-family: var(--font-head); } .mat-row span { font-size: 0.86rem; color: var(--muted); } .process { position: relative; } .process-track { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; counter-reset: step; } .pstep { position: relative; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.09); border-radius: var(--radius); padding: 24px 22px 26px; transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease; } .pstep:hover { transform: translateY(-4px); border-color: rgba(0, 133, 238, 0.5); background: rgba(0, 133, 238, 0.06); } .pstep-num { font-family: var(--font-head); font-weight: 700; font-size: 1.5rem; color: var(--blue-bright); display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; } .pstep-num::after { content: ""; width: 30px; height: 2px; background: var(--blue); opacity: 0.6; border-radius: 2px; } .pstep b { display: block; font-family: var(--font-head); font-size: 1rem; color: #fff; margin-bottom: 6px; letter-spacing: 0.01em; } .pstep p { font-size: 0.85rem; color: #A9BDD2; margin: 0; line-height: 1.5; } .transform-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 22px; align-items: center; } .transform-card { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); background: var(--neutral); } .transform-card img { width: 100%; } .transform-label { position: absolute; top: 16px; left: 16px; font-family: var(--font-head); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.12em; color: #fff; background: var(--navy); padding: 7px 13px; border-radius: 999px; } .transform-label--after { background: var(--blue); } .transform-arrow { display: grid; place-items: center; color: var(--blue); } .matters-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 44px; } .usecase { display: flex; gap: 16px; align-items: center; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; } .usecase:nth-child(even) { background: var(--neutral); } .usecase svg { flex: none; } .usecase h3 { font-size: 1rem; margin-bottom: 4px; } .usecase p { font-size: 0.88rem; color: var(--muted); margin: 0; } #why-printing-matters .usecase { background: var(--navy-soft); border-color: rgba(255,255,255,0.12); } #why-printing-matters .usecase:nth-child(even) { background: var(--navy-light); } #why-printing-matters .usecase h3 { color: var(--white); } #why-printing-matters .usecase p { color: #B9C9D8; } .industry-grid { display: flex; flex-wrap: wrap; gap: 12px; } .industry { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-head); font-weight: 500; font-size: 0.92rem; color: var(--navy); background: var(--white); border: 1px solid var(--line); border-radius: 999px; padding: 10px 18px; transition: transform 0.18s ease, border-color 0.18s ease, color 0.18s ease; } .industry:hover { transform: translateY(-2px); border-color: var(--blue); color: var(--blue); } .industry .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); } .table-wrap { overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--line); box-shadow: var(--shadow-1); background: var(--white); } table.compare { width: 100%; border-collapse: collapse; min-width: 760px; } .table-wrap caption { text-align: left; font-family: var(--font-head); font-weight: 600; font-size: 0.95rem; color: var(--navy); padding: 20px 24px; border-bottom: 1px solid var(--line); } .compare thead th { font-family: var(--font-head); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; background: var(--navy); padding: 15px 20px; text-align: left; white-space: nowrap; } .compare thead th:first-child { background: var(--navy-soft); } .compare tbody td { padding: 16px 20px; border-top: 1px solid var(--line); font-size: 0.92rem; color: var(--text-soft); vertical-align: top; } .compare tbody tr:nth-child(even) { background: var(--neutral); } .compare td:first-child { font-family: var(--font-head); font-weight: 600; color: var(--navy); } .compare .k { display: block; font-size: 0.8rem; color: var(--muted); margin-top: 3px; } .riyadh-bar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .riyadh-bar .r-item { display: flex; gap: 14px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius); padding: 20px 22px; } .r-item svg { flex: none; margin-top: 3px; } .r-item b { display: block; font-family: var(--font-head); font-size: 0.95rem; color: #fff; margin-bottom: 3px; } .r-item span { font-size: 0.86rem; color: #A9BDD2; } .sign-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .sign-card { display: flex; flex-direction: column; gap: 13px; padding: 26px 24px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius); transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } .sign-card:hover { background: rgba(0, 133, 238, 0.1); border-color: rgba(0, 133, 238, 0.55); transform: translateY(-3px); } .sign-ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; background: rgba(0, 133, 238, 0.14); transition: background 0.2s ease; } .sign-card:hover .sign-ico { background: rgba(47, 160, 255, 0.28); } .sign-card h3 { font-size: 1.05rem; font-weight: 600; color: #fff; line-height: 1.35; } .sign-card p { font-size: 0.92rem; color: #AFC1D4; line-height: 1.55; } @media (max-width: 860px) { .sign-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .sign-grid { grid-template-columns: 1fr; } } .gallery-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; } .g-item { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); background: var(--neutral); } .g-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .g-item:hover img { transform: scale(1.03); } .g-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 18px 14px; color: #fff; font-family: var(--font-head); font-size: 0.86rem; font-weight: 600; background: linear-gradient(transparent, rgba(8, 29, 50, 0.75)); } .g-1 { grid-column: span 5; aspect-ratio: 5/4; } .g-2 { grid-column: span 4; aspect-ratio: 4/4; } .g-3 { grid-column: span 3; aspect-ratio: 4/4; } .g-4 { grid-column: span 3; aspect-ratio: 4/3.4; } .g-5 { grid-column: span 4; aspect-ratio: 4/3.4; } .g-6 { grid-column: span 5; aspect-ratio: 5/3.4; } .g-7 { grid-column: span 6; aspect-ratio: auto; } .g-8 { grid-column: span 3; aspect-ratio: 4/4.6; } .g-9 { grid-column: span 3; aspect-ratio: 4/4.6; } .why-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--white); } .why-item { padding: 28px 30px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); } .why-item:nth-child(2n) { border-right: 0; } .why-item:nth-last-child(-n+2) { border-bottom: 0; } .why-item .card-icon { margin-bottom: 14px; } .why-item h3 { font-size: 1.05rem; margin-bottom: 6px; } .why-item p { font-size: 0.9rem; color: var(--muted); margin: 0; } .rel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1060px; margin-inline: auto; } .rel-card { display: flex; flex-direction: column; gap: 14px; padding: 28px 26px; background: #fff; border: 1px solid var(--line); border-radius: 16px; text-decoration: none; color: var(--navy); transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; } .rel-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-1); border-color: var(--blue); } .rel-ico-wrap { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: rgba(0, 133, 238, 0.1); } .rel-card h3 { font-size: 1.06rem; font-weight: 600; line-height: 1.35; color: var(--navy); } .rel-card p { font-size: 0.92rem; color: var(--text-soft); line-height: 1.55; flex: 1; } .rel-btn { display: inline-flex; align-items: center; gap: 8px; width: fit-content; font-family: var(--font-head); font-weight: 600; font-size: 0.88rem; color: #fff; background: var(--blue); border-radius: 9px; padding: 10px 18px; transition: background 0.18s ease, transform 0.18s ease; } .rel-btn svg { transition: transform 0.18s ease; } .rel-card:hover .rel-btn { background: var(--navy); transform: translateX(2px); } .rel-card:hover .rel-btn svg { transform: translateX(4px); } @media (max-width: 860px) { .rel-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 540px) { .rel-grid { grid-template-columns: 1fr; } } .os-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .os { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius); padding: 24px 22px 26px; transition: transform 0.2s ease, border-color 0.2s ease; } .os:hover { transform: translateY(-4px); border-color: rgba(0, 133, 238, 0.5); } .os svg { margin-bottom: 16px; } .os h3 { font-size: 1.02rem; margin-bottom: 6px; } .os p { font-size: 0.86rem; color: #A9BDD2; margin: 0; line-height: 1.5; } .os-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; } .faq-wrap { max-width: 1040px; margin-inline: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; align-items: start; } #faq .eyebrow { display: flex; justify-content: center; } #faq .h2, #faq .lead { text-align: center; margin-inline: auto; } #faq #faq-title { max-width: none; } .faq-item { border: 1px solid var(--line); background: var(--white); border-radius: var(--radius); margin-bottom: 14px; overflow: hidden; } .faq-item.open { border-color: rgba(0, 133, 238, 0.5); box-shadow: var(--shadow-1); } .faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 18px; text-align: left; background: none; border: 0; cursor: pointer; padding: 20px 24px; font-family: var(--font-head); font-weight: 600; font-size: 1.02rem; color: var(--navy); } .faq-icon { flex: none; width: 26px; height: 26px; border-radius: 8px; background: var(--blue-soft); color: var(--blue); display: grid; place-items: center; transition: transform 0.25s ease; } .faq-item.open .faq-icon { transform: rotate(45deg); background: var(--blue); color: #fff; } .faq-a { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .faq-a-inner { padding: 0 24px 22px; font-size: 0.94rem; color: var(--text-soft); } .faq-a-inner p { margin-bottom: 0.6em; } @media (max-width: 720px) { .faq-wrap { grid-template-columns: 1fr; } } .test-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 40px; } .test-card { padding: 26px 24px; border: 1px solid var(--line); background: var(--white); border-radius: var(--radius); } .test-stars { color: #F59E0B; font-size: 1.1rem; letter-spacing: 2px; margin-bottom: 10px; } .test-text { font-size: 0.92rem; color: var(--text-soft); margin: 0 0 14px; line-height: 1.6; } .test-name { font-size: 0.84rem; color: var(--muted); margin: 0; } @media (max-width: 980px) { .test-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .test-grid { grid-template-columns: 1fr; } } .final-cta { background: #fff; overflow: hidden; } .final-cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(720px 420px at 15% 0%, rgba(0, 133, 238, 0.08), transparent 60%), radial-gradient(620px 420px at 90% 100%, rgba(0, 133, 238, 0.05), transparent 55%); } .final-wrap { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(32px, 5vw, 64px); align-items: center; } .final-card { position: relative; text-align: left; max-width: none; margin-inline: 0; } .final-card h2 { color: var(--navy); font-size: clamp(1.9rem, 3.4vw, 2.8rem); } .final-card p { color: var(--text-soft); max-width: 56ch; margin-inline: 0; font-size: 1.05rem; } .final-cta .eyebrow { color: var(--blue); } .final-cta .eyebrow::before { background: var(--blue); } .final-ctas { display: flex; flex-wrap: wrap; gap: 14px; justify-content: flex-start; margin-top: 30px; } .final-cta .btn { --bg: var(--blue); color: #fff !important; } .final-cta .btn:hover { background: var(--navy); color: #fff !important; box-shadow: var(--shadow-2); } .final-cta .btn--outline-light { background: transparent; border-color: var(--blue); color: var(--blue) !important; } .final-cta .btn--outline-light:hover { background: var(--blue); color: #fff !important; } .final-media img { display: block; width: 100%; height: auto; border-radius: 22px; border: 1px solid var(--line); box-shadow: var(--shadow-2); } @media (max-width: 767px) { .final-wrap { grid-template-columns: 1fr; } .final-card { text-align: center; } .final-card p { margin-inline: auto; } .final-cta .final-ctas { justify-content: center; } .final-media { max-width: 420px; margin-inline: auto; } } .enquiry-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(28px, 4vw, 48px); align-items: start; } .enq-points { margin-top: 26px; } .enq-point { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); } .enq-point:last-child { border-bottom: 0; } .enq-point svg { flex: none; margin-top: 3px; } .enq-point b { display: block; font-family: var(--font-head); font-size: 0.95rem; color: var(--navy); } .enq-point span { font-size: 0.86rem; color: var(--muted); } .enq-points--row { margin-top: 42px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; } .enq-points--row .enq-point { flex-direction: column; align-items: flex-start; gap: 10px; margin: 0; padding: 22px 20px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius); background: rgba(255, 255, 255, 0.04); } .enq-points--row .enq-point:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.12); } .enq-points--row .enq-point svg { margin-top: 0; } @media (max-width: 1100px) { .enq-points--row { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 720px) { .enq-points--row { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .enq-points--row { grid-template-columns: 1fr; } } .btn--block { width: 100%; } .footer { background: var(--navy); color: #AFC1D4; padding: 64px 0 0; } .footer-grid { display: grid; grid-template-columns: 1.35fr 1.1fr 1.1fr 0.9fr 1.35fr; gap: 34px; padding-bottom: 50px; } .footer .logo { height: 44px; margin-bottom: 18px; } .foot-about { font-size: 0.9rem; max-width: 34ch; margin-bottom: 18px; } .foot-head { font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; margin-bottom: 18px; font-family: var(--font-head); font-weight: 600; line-height: 1.4; } .footer ul { list-style: none; } .footer li { margin-bottom: 10px; } .footer a { color: #AFC1D4; font-size: 0.9rem; transition: color 0.18s ease; } .footer a:hover { color: var(--blue-bright); } .foot-more { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-head); font-weight: 600; font-size: 0.86rem; color: var(--blue-bright); margin-top: 14px; } .foot-more:hover { color: #fff; } .foot-sub { font-family: var(--font-head); color: #fff; font-size: 0.76rem; letter-spacing: 0.12em; text-transform: uppercase; margin: 0 0 8px; } .foot-addr { font-size: 0.9rem; color: #AFC1D4; margin: 0 0 14px; } .foot-map-link { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-head); font-weight: 600; font-size: 0.86rem; color: var(--blue-bright); } .foot-map-link:hover { color: #fff; } .foot-list { list-style: none; margin: 0; } .foot-list li { margin-bottom: 12px; } .foot-list .tel, .foot-list .wa { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: #fff; font-size: 0.95rem; } .foot-list .tel:hover, .foot-list .wa:hover { color: var(--blue-bright); } .foot-block { margin-bottom: 26px; } .footer details > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px; } .footer details > summary::-webkit-details-marker { display: none; } .foot-caret { display: none; color: var(--blue-bright); font-size: 1.1rem; font-weight: 600; transition: transform 0.2s ease; } .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.1); padding: 22px 0; display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; font-size: 0.82rem; color: #7E93A8; } .footer-bottom > span:first-child { justify-self: start; } .footer-bottom .legal { justify-self: end; display: flex; flex-wrap: wrap; gap: 18px; } .footer-bottom a { color: #7E93A8; } .footer-bottom a:hover { color: var(--blue-bright); } .footer-bottom .foot-actions { justify-self: center; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; } .footer-bottom .foot-action { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: #fff; transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease; } .footer-bottom .foot-action:hover { background: var(--blue); color: #fff; transform: translateY(-2px); } .footer-bottom .foot-action svg { display: block; } html.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; } html.js .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } html.js .reveal { opacity: 1; transform: none; } } @media (max-width: 1100px) { .cap-wrap { grid-template-columns: repeat(3, 1fr); } .process-track { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 980px) { .nav, .header-cta .btn--desktop { display: none; } .nav-toggle { display: flex; } .mobile-menu { position: fixed; inset: 76px 0 auto 0; background: var(--white); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-2); padding: 16px 20px 26px; display: none; max-height: calc(100vh - 76px); overflow-y: auto; -webkit-overflow-scrolling: touch; z-index: 999; } .mobile-menu.open { display: block; } .mobile-menu a { display: block; font-family: var(--font-head); font-weight: 500; color: var(--navy); font-size: 1.05rem; padding: 14px 8px; border-bottom: 1px solid var(--line); } .mobile-menu a:hover { color: var(--blue); } .mobile-menu .m-sub { padding-left: 30px; font-size: 0.95rem; } .mobile-menu .btn { margin-top: 18px; width: 100%; } .hero-grid { grid-template-columns: 1fr; } .hero-float { left: 12px; } .grid-4 { grid-template-columns: repeat(2, 1fr); } .audience-grid, .included-grid, .materials-grid { grid-template-columns: repeat(2, 1fr); } .os-grid { grid-template-columns: repeat(2, 1fr); } .matters-grid { grid-template-columns: repeat(3, 1fr); } .enquiry-grid { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; } .foot-brand, .foot-contact { grid-column: 1 / -1; } .footer .foot-caret { display: inline-flex; } .footer details[open] .foot-caret { transform: rotate(45deg); } .transform-grid { grid-template-columns: 1fr; } .transform-arrow { transform: rotate(90deg); } .g-1, .g-2, .g-3, .g-4, .g-5, .g-6, .g-7, .g-8, .g-9 { grid-column: span 6; aspect-ratio: auto; } } @media (max-width: 720px) { .grid-4, .audience-grid, .included-grid, .materials-grid { grid-template-columns: 1fr; } .matters-grid { grid-template-columns: 1fr; margin-top: 32px; } .os-grid, .riyadh-bar { grid-template-columns: 1fr; } .cap-wrap { grid-template-columns: repeat(2, 1fr); } .snapshot-inner { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .cap-wrap { grid-template-columns: 1fr; } .related-grid { grid-template-columns: 1fr; } .why-list { grid-template-columns: 1fr; } .why-item { border-right: 0; } .why-item:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); } .why-item:last-child { border-bottom: 0; } .hero-ctas .btn { width: 100%; } .footer-grid { grid-template-columns: 1fr; gap: 30px; } .process-track { grid-template-columns: 1fr; } .footer-bottom { grid-template-columns: 1fr; justify-items: start; } .footer-bottom > span:first-child, .footer-bottom .legal, .footer-bottom .foot-actions { justify-self: start; } } .float-social, .float-contact { position: fixed; z-index: 950; } .float-contact { top: 50%; transform: translateY(-50%); right: 20px; display: flex; flex-direction: column; align-items: center; gap: 12px; } .float-social { left: 18px; top: auto; bottom: 84px; width: auto; height: auto; display: flex; flex-direction: column; align-items: center; gap: 8px; } .float-group { position: relative; display: flex; flex-direction: column; align-items: center; } .float-ico { position: relative; width: 48px; height: 48px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--navy); color: #fff; cursor: pointer; padding: 0; box-shadow: var(--shadow-2); text-decoration: none; will-change: transform; transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .float-ring { position: static; display: flex; flex-direction: column; align-items: center; gap: 8px; will-change: transform; } .float-social .float-ico { position: static; left: auto; top: auto; width: 40px; height: 40px; margin: 0; transform: none !important; transition: background 0.2s ease, box-shadow 0.2s ease; } .float-social .float-ico svg { flex: none; } .float-social .float-tip, .float-social .float-label { display: none; } .float-ico:hover { background: var(--blue); box-shadow: var(--shadow-blue); transform: translateY(-2px) scale(1.08); } .float-social .float-ico svg { transition: transform 0.22s ease; } .float-social .float-ico:hover svg { transform: scale(1.14); } .float-ico:focus-visible { outline: 3px solid var(--blue-bright); outline-offset: 3px; } .float-ico svg { display: block; } .float-ico .float-tip, .float-menu-trigger .float-tip { position: absolute; top: 50%; transform: translateY(-50%); background: var(--navy); color: #fff; font-family: var(--font-body); font-size: 0.75rem; font-weight: 500; line-height: 1; white-space: nowrap; padding: 7px 11px; border-radius: 6px; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0.18s ease, visibility 0.18s ease; box-shadow: var(--shadow-2); } .float-social .float-tip { left: calc(100% + 12px); } .float-contact .float-tip--left { right: calc(100% + 12px); } .float-ico:hover .float-tip, .float-menu-trigger:hover .float-tip, .float-ico:focus-visible .float-tip { opacity: 1; visibility: visible; } .float-menu { position: absolute; top: 50%; right: calc(100% + 14px); transform: translateY(-50%) translateX(8px); display: flex; flex-direction: column; gap: 4px; background: var(--white); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-2); padding: 8px; min-width: 172px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s; } .float-group.open .float-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(-50%) translateX(0); } .float-menu::after { content: ""; position: absolute; left: 100%; top: 50%; transform: translateY(-50%); border: 7px solid transparent; border-left-color: var(--white); } .float-menu a { display: block; font-size: 0.85rem; font-weight: 500; color: var(--navy); text-decoration: none; padding: 9px 12px; border-radius: 8px; white-space: nowrap; } .float-menu a:hover { background: var(--neutral-2); color: var(--blue); } .float-menu a:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: -2px; } .float-contact .float-top { background: var(--navy-light); opacity: 0; visibility: hidden; transform: translateY(8px) scale(0.9); transition: background 0.2s ease, box-shadow 0.2s ease, opacity 0.25s ease, transform 0.25s ease, visibility 0.25s; } .float-contact .float-top.show { opacity: 1; visibility: visible; transform: translateY(0) scale(1); } .float-contact .float-top:hover { background: var(--blue); } @media (prefers-reduced-motion: reduce) { .float-ico, .float-menu, .float-contact .float-top { transition: none !important; } } @media (max-width: 720px) { .float-social { left: 12px; top: 50%; bottom: auto; transform: translateY(-50%); width: auto; height: auto; display: flex; flex-direction: column; align-items: center; gap: 8px; } .float-ring { position: static; display: flex; flex-direction: column; align-items: center; gap: 8px; } .float-social .float-ico { width: 40px; height: 40px; margin: 0; transform: none !important; } .float-contact .float-top { display: none; } .float-contact { top: auto; bottom: 20px; right: 12px; transform: none; gap: 10px; } .float-ico { width: 40px; height: 40px; } .float-tip { display: none; } .float-menu { right: calc(100% + 12px); min-width: 160px; } } .blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:34px} .blog-grid .blog-card--feature{grid-column:1/-1;display:grid;grid-template-columns:1.15fr 1fr} .blog-card{background:#fff;border:1px solid #E4EAF1;border-radius:18px;overflow:hidden;display:flex;flex-direction:column;transition:transform .25s ease,box-shadow .25s ease} .blog-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)} .blog-media{display:block;overflow:hidden;background:#0E2A46} .blog-media img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease} .blog-card--feature .blog-media{min-height:300px} .blog-card:hover .blog-media img{transform:scale(1.045)} .blog-body{padding:24px 24px 28px;display:flex;flex-direction:column;gap:10px;flex:1} .blog-tag{align-self:flex-start;font-family:var(--font-head);font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:#0A7BDF;background:rgba(10,123,223,.1);padding:5px 11px;border-radius:999px} .blog-title{margin:0;font-size:1.16rem;line-height:1.4} .blog-title a{color:var(--navy);text-decoration:none} .blog-title a:hover{color:var(--blue)} .blog-meta{font-size:.8rem;color:var(--muted);letter-spacing:.02em} .blog-excerpt{margin:0;color:var(--text-soft);font-size:.92rem;line-height:1.65} .blog-link{margin-top:auto;color:var(--blue);font-family:var(--font-head);font-weight:600;font-size:.9rem;text-decoration:none;display:inline-flex;align-items:center;gap:6px} .blog-link:hover{text-decoration:underline} .blog-more{color:var(--muted);font-size:.88rem;margin-top:28px;text-align:center} .blog-more a{color:var(--blue);font-weight:600} @media (max-width:980px){.blog-grid .blog-card--feature{grid-template-columns:1fr}.blog-grid{grid-template-columns:repeat(2,1fr)}.blog-card--feature .blog-media{min-height:auto}} @media (max-width:640px){.blog-grid{grid-template-columns:1fr}} .post-hero{background:var(--navy);color:#D7E2EE;padding:clamp(46px,6vw,78px) 0 0} .post-hero .container{max-width:840px} .post-crumbs{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:.82rem;color:#8FA6BD;margin-bottom:18px} .post-crumbs a{color:#8FA6BD;text-decoration:none} .post-crumbs a:hover{color:var(--blue-bright)} .post-tag{display:inline-flex;font-family:var(--font-head);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--blue-bright);background:rgba(0,133,238,.14);border:1px solid rgba(0,133,238,.3);padding:6px 13px;border-radius:999px;margin-bottom:18px} .post-title{color:#fff;font-size:clamp(1.9rem,4vw,2.85rem);font-weight:700;line-height:1.15;margin-bottom:16px;max-width:none} .post-meta{display:flex;flex-wrap:wrap;gap:16px;font-size:.84rem;color:#8FA6BD;margin:0 0 30px} .post-meta span{display:inline-flex;align-items:center;gap:6px} .post-layout{padding:clamp(30px,4vw,48px) 0 clamp(56px,7vw,88px)} .post-article{max-width:840px;margin-inline:auto} .post-feature{width:100%;height:auto;border-radius:18px;border:1px solid var(--line);box-shadow:var(--shadow-1);margin-bottom:28px} .post-intro{font-size:1.1rem;color:var(--text-soft);line-height:1.7;margin-bottom:32px} .post-h2{font-size:clamp(1.45rem,2.6vw,1.9rem);font-weight:700;color:var(--navy);margin:48px 0 16px;scroll-margin-top:110px} .post-article h3{font-size:1.12rem;color:var(--navy);margin:30px 0 10px} .post-article p{color:var(--text-soft);font-size:1rem;line-height:1.75} .post-article strong{color:var(--navy)} .post-article a{color:var(--blue);text-decoration:underline;text-underline-offset:3px} .post-article a:hover{color:var(--navy)} .post-list{margin:0 0 1.2em;padding-left:22px;display:grid;gap:8px} .post-list li{color:var(--text-soft);line-height:1.65;padding-left:4px} .post-list li::marker{color:var(--blue);font-weight:700} .post-checks{list-style:none;margin:0 0 1.2em;padding-left:0} .post-checks li{position:relative;padding-left:30px;color:var(--text-soft);line-height:1.65;margin-bottom:11px} .post-checks li::before{content:"";position:absolute;left:0;top:5px;width:19px;height:19px;border-radius:50%;background:var(--blue-soft)} .post-checks li::after{content:"✓";position:absolute;left:5px;top:5px;font-size:.7rem;line-height:19px;color:var(--blue);font-weight:700} .callout{background:var(--blue-soft);border-left:4px solid var(--blue);border-radius:0 14px 14px 0;padding:20px 24px;margin:26px 0;color:var(--text-soft)} .callout b{color:var(--navy)} .sample-msg{background:var(--navy);color:#D7E2EE;border-radius:16px;padding:22px 24px;margin:24px 0;font-size:.95rem;line-height:1.7;overflow-x:auto} .sample-msg b{color:#fff} .sample-msg + .post-article .post-h2{margin-top:48px} .post-note{font-size:.82rem;color:var(--muted);margin-top:10px} .post-cta{background:var(--navy);border-radius:18px;padding:34px 36px;margin-top:46px;display:flex;flex-direction:column;align-items:flex-start;color:#D7E2EE} .post-cta .kicker{font-family:var(--font-head);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-bright);margin-bottom:8px} .post-cta h2{margin:0 0 8px;color:#fff} .post-cta p{color:#AFC1D4;margin:0} .post-cta .btn{margin-top:16px} @media (max-width:720px){.post-cta{padding:26px}} .blog-hero{position:relative;background:var(--navy);background-image:linear-gradient(165deg,var(--navy-deep) 0%,var(--navy) 45%,var(--navy-soft) 100%);color:#D7E2EE;overflow:hidden;padding:clamp(76px,9vw,118px) 0 clamp(48px,6vw,82px)} .blog-hero::before{content:"";position:absolute;inset:0;background: radial-gradient(900px 500px at 88% -10%,rgba(0,133,238,.2),transparent 60%), radial-gradient(700px 500px at -10% 110%,rgba(0,133,238,.1),transparent 55%); pointer-events:none} .blog-hero-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(32px,5vw,56px);align-items:center;position:relative} .blog-hero-badge{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-head);font-size:.75rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--blue-bright);padding:8px 14px;border:1px solid rgba(0,133,238,.35);background:rgba(0,133,238,.08);border-radius:999px;margin-bottom:20px} .blog-hero h1{color:#fff;font-size:clamp(2.2rem,4.4vw,3.3rem);line-height:1.1;letter-spacing:-.025em;margin-bottom:18px;max-width:20ch} .blog-hero-sub{font-size:clamp(1.02rem,1.4vw,1.15rem);color:#AFC1D4;max-width:48ch;margin-bottom:28px} .blog-hero-stats{display:flex;flex-wrap:wrap;align-items:center;gap:14px} .blog-stat{display:inline-flex;align-items:baseline;gap:6px;font-family:var(--font-head);font-size:.82rem;color:#8FA6BD;letter-spacing:.02em} .blog-stat b{font-size:1.35rem;color:#fff;font-weight:700} .blog-stat-sep{width:1px;height:22px;background:rgba(255,255,255,.15)} .blog-hero-card{position:relative;display:block;background:var(--white);border-radius:20px;overflow:hidden;box-shadow:0 30px 70px -24px rgba(0,0,0,.6);color:var(--navy);text-decoration:none;transition:transform .22s ease,box-shadow .22s ease} .blog-hero-card:hover{transform:translateY(-4px);box-shadow:0 34px 80px -22px rgba(0,0,0,.65)} .blog-hero-card img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block} .blog-hero-card-badge{position:absolute;top:14px;left:14px;z-index:2;font-family:var(--font-head);font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--blue);padding:7px 13px;border-radius:999px;box-shadow:var(--shadow-2)} .blog-hero-card-body{padding:22px 26px 26px;display:flex;flex-direction:column;align-items:flex-start;gap:10px} .blog-hero-card-title{font-size:1.35rem;line-height:1.3;color:var(--navy);margin:0} .blog-hero-card-excerpt{margin:0;color:var(--text-soft);font-size:.92rem} .blog-hero-card-meta{font-size:.8rem;color:var(--muted);letter-spacing:.02em} .blog-hero-card-link{display:inline-flex;align-items:center;gap:7px;color:var(--blue);font-family:var(--font-head);font-weight:600;font-size:.9rem;margin-top:2px} .blog-hero-card:hover .blog-hero-card-link{text-decoration:underline} .blog-section-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:22px;margin-bottom:8px} .blog-section-head .h2{margin-bottom:8px} .blog-tabs{display:flex;flex-wrap:wrap;gap:8px} .blog-tab{font-family:var(--font-head);font-weight:600;font-size:.88rem;color:var(--text-soft);background:var(--neutral);border:1px solid var(--line);border-radius:999px;padding:9px 18px;cursor:pointer;transition:background .18s ease,color .18s ease,border-color .18s ease} .blog-tab:hover{border-color:var(--blue);color:var(--blue)} .blog-tab.is-active{background:var(--navy);border-color:var(--navy);color:#fff} .blog-grid--3col{margin-top:34px} .blog-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px} .blog-read{font-family:var(--font-head);font-size:.74rem;font-weight:600;letter-spacing:.04em;color:var(--muted);background:var(--neutral);border-radius:999px;padding:4px 10px;white-space:nowrap} .blog-card-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto} .blog-date{font-size:.8rem;color:var(--muted);letter-spacing:.02em} .blog-category{padding:26px;border:1px solid var(--line);border-radius:22px;background:var(--white);margin-bottom:22px} .blog-category-head{display:flex;gap:16px;align-items:center;margin-bottom:8px} .blog-category-icon{flex:none;width:46px;height:46px;border-radius:12px;display:grid;place-items:center} .blog-category-head h3{margin:0;font-size:1.2rem} .blog-category-head p{margin:2px 0 0;font-size:.9rem;color:var(--muted)} .blog-category .blog-grid{margin-top:16px} .blog-cat-more{color:var(--muted);font-size:.88rem;margin:18px 0 0} .blog-cat-more a{color:var(--blue);font-weight:600} @media (max-width:980px){ .blog-hero-grid{grid-template-columns:1fr} .blog-hero-card{max-width:620px} } @media (max-width:720px){ .blog-hero{text-align:center} .blog-hero h1{margin-inline:auto} .blog-hero-sub{margin-inline:auto} .blog-hero-stats{justify-content:center} .blog-hero-badge{margin-inline:auto} .blog-hero-card{max-width:none;text-align:left} .blog-category{padding:20px 18px} } .reading-progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--blue),var(--blue-bright));z-index:4000;pointer-events:none} .post-cols{display:grid;grid-template-columns:200px minmax(0,1fr) 240px;gap:clamp(24px,3vw,40px);align-items:start} .post-side{position:sticky;top:112px;max-height:calc(100vh - 140px);overflow:auto;scrollbar-width:thin} .post-side::-webkit-scrollbar{width:6px} .post-side::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px} .post-side::-webkit-scrollbar-track{background:transparent} .post-toc{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:22px 18px} .toc-head{display:block;font-family:var(--font-head);font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:14px} .toc-list{counter-reset:toc;list-style:none;margin:0} .toc-list li{counter-increment:toc} .toc-link{display:flex;gap:9px;align-items:baseline;font-size:.87rem;line-height:1.42;color:var(--text-soft);text-decoration:none;padding:6px 0 6px 10px;border-left:2px solid var(--line);transition:color .15s ease,border-color .15s ease} .toc-link::before{content:counter(toc,decimal-leading-zero);font-family:var(--font-head);font-size:.7rem;color:var(--muted);flex:none} .toc-link:hover{color:var(--blue)} .toc-link.is-active{color:var(--navy);font-weight:700;border-left-color:var(--blue)} .toc-link.is-active::before{color:var(--blue)} .toc-top{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-family:var(--font-head);font-size:.8rem;font-weight:600;color:var(--blue);text-decoration:none} .toc-top:hover{text-decoration:underline} .side-head{display:flex;flex-direction:column;gap:2px;font-family:var(--font-head);font-size:1rem;font-weight:700;color:var(--navy);margin:0 0 14px;line-height:1.2} .side-head small{font-family:var(--font-body);font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)} .recent-list{list-style:none;margin:0;display:grid;gap:10px} .recent-item{display:grid;grid-template-columns:58px 1fr;gap:12px;align-items:center;padding:10px;border:1px solid var(--line);border-radius:14px;background:var(--white);text-decoration:none;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease} .recent-item:hover{border-color:var(--blue);box-shadow:var(--shadow-1);transform:translateY(-2px)} .recent-item img{width:58px;height:58px;border-radius:10px;object-fit:cover;border:1px solid var(--line)} .recent-item-body{display:flex;flex-direction:column;gap:3px;min-width:0} .recent-title{font-family:var(--font-head);font-size:.86rem;font-weight:600;line-height:1.32;color:var(--navy)} .recent-item:hover .recent-title{color:var(--blue)} .recent-tag{font-size:.72rem;color:var(--muted)} .recent-item.is-current{opacity:.55;cursor:default;pointer-events:none;background:var(--neutral)} .side-all{display:block;text-align:center;margin-top:14px;font-family:var(--font-head);font-size:.85rem;font-weight:600;color:var(--blue);border:1px solid var(--line);border-radius:12px;padding:11px 14px;background:var(--white);transition:border-color .18s ease} .side-all:hover{border-color:var(--blue)} .side-cta{background:var(--navy);border-radius:16px;padding:20px 18px;margin-top:16px;color:#D7E2EE} .side-cta p{font-family:var(--font-head);font-size:.98rem;line-height:1.4;color:#fff;margin:0 0 13px} .side-cta .btn{width:100%;justify-content:center} .post-author{display:flex;gap:16px;align-items:flex-start;background:var(--neutral);border:1px solid var(--line);border-radius:18px;padding:22px 24px;margin-top:40px} .post-author-avatar{flex:none;width:52px;height:52px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-family:var(--font-head);font-size:.85rem;font-weight:700;letter-spacing:.04em} .post-author-name{margin:0 0 4px;font-family:var(--font-head);font-weight:700;color:var(--navy)} .post-author-bio{margin:0;font-size:.9rem;color:var(--text-soft);line-height:1.6} .post-nav{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px} .post-nav-card{display:flex;flex-direction:column;gap:5px;border:1px solid var(--line);border-radius:16px;padding:18px 20px;background:var(--white);text-decoration:none;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease} .post-nav-card:hover{border-color:var(--blue);box-shadow:var(--shadow-1);transform:translateY(-2px)} .post-nav-label{font-family:var(--font-head);font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)} .post-nav-title{font-family:var(--font-head);font-size:.98rem;font-weight:600;line-height:1.35;color:var(--navy)} .post-nav-card:hover .post-nav-title{color:var(--blue)} @media (max-width:1060px){ .post-cols{grid-template-columns:minmax(0,1fr);gap:26px} .post-side{position:static;max-height:none;overflow:visible} .post-side--toc{order:-1} .toc-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));column-gap:18px;row-gap:0} .recent-list{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))} } @media (max-width:740px){ .toc-list{grid-template-columns:1fr 1fr} .post-nav{grid-template-columns:1fr} .post-author{flex-direction:column;align-items:center;text-align:center;padding:20px} } @media (max-width:520px){ .toc-list{grid-template-columns:1fr} .recent-list{grid-template-columns:1fr} } .blog-hero-inner{max-width:880px} .blog-card .blog-media{aspect-ratio:16/9} .blog-card--soon{background:var(--neutral);border:1px dashed var(--line);cursor:default} .blog-media--soon{display:grid;place-items:center;background:linear-gradient(135deg,#143A63,#0E2A46);color:#8FA6BD} .blog-media--soon svg{opacity:.85} .blog-card--soon .blog-title{color:var(--text-soft)} .blog-card--soon .blog-excerpt{color:var(--muted)} .blog-soon{font-family:var(--font-head);font-size:.74rem;font-weight:600;letter-spacing:.04em;color:var(--blue);background:rgba(0,133,238,.1);border:1px solid rgba(0,133,238,.25);border-radius:999px;padding:4px 10px;white-space:nowrap;display:inline-flex;align-items:center;gap:6px} .blog-soon::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--blue);animation:blogPulse 1.6s ease-in-out infinite} @keyframes blogPulse{0%,100%{opacity:.45;transform:scale(.85)}50%{opacity:1;transform:scale(1)}} .blog-hero-inner{max-width:900px;margin-inline:auto;text-align:center} .blog-hero h1{max-width:none;margin-left:auto;margin-right:auto} .blog-hero-sub{max-width:none;margin-left:auto;margin-right:auto} .archive-nav{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0 30px} .archive-cols{display:grid;grid-template-columns:1fr 1fr;gap:26px} .archive-card{border:1px solid var(--line);border-radius:20px;background:var(--white);padding:26px 26px 12px;scroll-margin-top:100px} .archive-card-title{margin:0 0 2px;font-size:1.2rem} .archive-card-sub{margin:0 0 6px;font-size:.84rem;color:var(--muted)} .archive-list{list-style:none;margin:12px 0 0;display:grid} .archive-item{display:grid;grid-template-columns:52px 1fr auto;gap:14px;align-items:center;padding:14px 0;border-top:1px solid var(--line)} .archive-item:first-child{border-top:0} .archive-date{font-family:var(--font-head);font-size:.78rem;font-weight:700;color:var(--blue);letter-spacing:.04em} .archive-main{display:flex;flex-direction:column;gap:3px;min-width:0} .archive-title{font-family:var(--font-head);font-size:1rem;font-weight:600;line-height:1.32;color:var(--navy);text-decoration:none} a.archive-title:hover{color:var(--blue)} .archive-meta{font-size:.78rem;color:var(--muted)} .archive-go{flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--blue);font-size:1rem;text-decoration:none;transition:background .18s ease,border-color .18s ease,color .18s ease} .archive-go:hover{background:var(--blue);border-color:var(--blue);color:#fff} .archive-item--soon{opacity:.68} .archive-item--soon .archive-date{color:var(--muted)} @media (max-width:820px){ .archive-cols{grid-template-columns:1fr} .archive-card{padding:20px 18px 8px} } .post-hero .container{max-width:var(--container)} .post-hero-inner{max-width:760px;margin-left:calc(200px + clamp(24px,3vw,40px))} @media (max-width:1060px){ .post-hero .container{max-width:840px} .post-hero-inner{margin-left:0;max-width:none} } .post-cols>*{min-width:0} .post-article{width:100%;max-width:none} .post-feature{display:block} .post-hero{padding:clamp(46px,6vw,78px) 0 clamp(34px,5vw,56px)}