@font-face { font-family: 'Lexend'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/brand-0.woff2) format('woff2'); } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/brand-1.woff2) format('woff2'); } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/brand-2.woff2) format('woff2'); } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/brand-3.woff2) format('woff2'); } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/brand-4.woff2) format('woff2'); }
:root { --brand-blue: #0022E1; --brand-navy: #000E3A; --brand-black: #000000; --brand-gold: #FFE070; --brand-white: #FFFFFF; --ink: #11182b; --muted: #61708b; --line: #dfe5ef; --surface: #f4f7ff; --surface-blue: #eaf0ff; --surface-gold: #fff9df; --shadow: 0 18px 50px rgba(0, 14, 58, .10); --shadow-soft: 0 10px 28px rgba(0, 14, 58, .07); --radius: 14px; --max-width: 1180px; --header-height: 76px; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; overflow-x: hidden; } @supports (overflow: clip) { html { overflow-x: clip; } } body { margin: 0; min-width: 320px; overflow-x: hidden; background: #fff; color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body.menu-open { overflow: hidden; overscroll-behavior: none; touch-action: none; } html.menu-open { overflow: hidden; overscroll-behavior: none; } img, svg { display: block; } img { max-width: 100%; height: auto; border-radius: var(--radius); } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; } button { -webkit-tap-highlight-color: transparent; } .container { width: 100%; max-width: var(--max-width); margin-inline: auto; padding-inline: 16px; } .skip-link { position: fixed; left: 12px; top: -100px; z-index: 1000; padding: 10px 14px; border-radius: var(--radius); background: var(--brand-gold); color: #000; font-weight: 800; } .skip-link:focus { top: calc(env(safe-area-inset-top, 0px) + 38px); } :focus-visible { outline: 3px solid rgba(0, 34, 225, .28); outline-offset: 3px; } .site-header-stack{ position:sticky; top:0; z-index:2000; isolation:isolate; } .faith-header{ min-height:30px; display:flex; align-items:center; justify-content:center; padding:6px 12px; background:var(--brand-navy); color:var(--brand-gold); font-size:clamp(10px,1.25vw,15px); font-weight:900; line-height:1.2; letter-spacing:.015em; text-align:center; white-space:nowrap; overflow:hidden; } .site-header { position: -webkit-sticky; position: sticky; top: 0; z-index: 2000; background: rgba(255, 255, 255, .97); border-bottom: 1px solid rgba(223, 229, 239, .95); backdrop-filter: blur(14px); transition: box-shadow .2s ease; } .site-header-stack .site-header { position: relative; top: auto; } .site-header.is-scrolled { box-shadow: 0 8px 28px rgba(0, 14, 58, .09); } .nav-wrap { min-height: var(--header-height); display: flex; align-items: center; justify-content: space-between; gap: 20px; } .brand { display: inline-flex; align-items: center; flex: 0 0 auto; } .brand img { width: 190px; height: auto; border-radius: 0; } .nav { display: flex; align-items: center; justify-content: flex-end; gap: 2px; min-width: 0; } .nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 9px 10px; border-radius: var(--radius); color: #29344e; font-size: 13px; font-weight: 800; white-space: nowrap; transition: background .2s ease, color .2s ease, transform .2s ease; } .nav a:hover, .nav a:focus-visible, .nav a.is-active { background: var(--surface-blue); color: var(--brand-blue); } .nav .nav-cta { margin-left: 7px; padding-inline: 15px; background: var(--brand-blue); color: #fff; box-shadow: 0 9px 22px rgba(0, 34, 225, .18); } .nav .nav-cta:hover, .nav .nav-cta:focus-visible { background: var(--brand-navy); color: #fff; transform: translateY(-1px); } .nav-toggle { display: none; flex: 0 0 auto; width: 46px; height: 46px; padding: 9px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; cursor: pointer; } .nav-toggle span { display: block; width: 22px; height: 2px; margin: 4px auto; border-radius: 4px; background: var(--brand-navy); transition: transform .2s ease, opacity .2s ease; } .nav-toggle.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .nav-toggle.is-open span:nth-child(2) { opacity: 0; } .nav-toggle.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } h1, h2, h3 { margin: 0; color: var(--brand-navy); font-weight: 800; line-height: 1.1; letter-spacing: -.035em; } h1 { max-width: 780px; font-size: clamp(2.45rem, 6vw, 4.5rem); } h2 { font-size: clamp(2rem, 4vw, 3rem); } h3 { font-size: 1.25rem; } p { margin: 0; } .lead { max-width: 680px; color: #56637c; font-size: 1.125rem; } .eyebrow, .kicker { display: inline-flex; align-items: center; gap: 9px; color: var(--brand-blue); font-size: .75rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; } .eyebrow::before { content: ""; width: 28px; height: 2px; flex: 0 0 28px; background: var(--brand-gold); } .kicker { display: block; margin-bottom: 10px; } .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } .btn { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: 9px; padding: 12px 18px; border: 1px solid transparent; border-radius: var(--radius); color: inherit; font-size: .875rem; font-weight: 900; line-height: 1.25; text-align: center; cursor: pointer; white-space: normal; transition: transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease; } .btn:hover { transform: translateY(-2px); } .btn-primary, .btn-explore { background: var(--brand-blue); color: #fff; box-shadow: 0 12px 24px rgba(0, 34, 225, .18); } .btn-primary:hover, .btn-primary:focus-visible, .btn-explore:hover, .btn-explore:focus-visible { background: var(--brand-navy); color: #fff; } .btn-secondary { border-color: #cfd7e6; background: #fff; color: var(--brand-blue); } .btn-secondary:hover, .btn-secondary:focus-visible { border-color: var(--brand-blue); background: var(--surface-blue); } .btn-gold { background: var(--brand-gold); color: #000; } .btn-gold:hover, .btn-gold:focus-visible { background: #ffe991; } .hero { position: relative; overflow: hidden; padding: 68px 0 78px; background: linear-gradient(135deg, #fff 0%, #f6f8ff 55%, #e9efff 100%); } .hero::before { content: ""; position: absolute; top: -150px; right: -160px; width: 360px; height: 360px; border-radius: 50%; background: rgba(0, 34, 225, .07); } .hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: 52px; align-items: center; } .hero h1 { margin-top: 18px; } .hero h1 span { color: var(--brand-blue); } .hero .lead { margin: 24px 0 28px; } .hero-media { position: relative; min-width: 0; } .hero-media::after { content: ""; position: absolute; right: -18px; bottom: -18px; z-index: 0; width: 140px; height: 140px; border-radius: 28px; background: var(--brand-gold); } .hero-media img { position: relative; z-index: 1; width: 100%; aspect-ratio: 1280 / 698; object-fit: cover; box-shadow: var(--shadow); } .hero-note { margin-top: 13px; color: #6a758c; font-size: .8125rem; } .stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 26px; } .stat { padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255, 255, 255, .82); } .stat strong { display: block; color: var(--brand-navy); font-size: .9375rem; } .stat span { display: block; margin-top: 4px; color: var(--muted); font-size: .75rem; line-height: 1.5; } .section { position: relative; padding: 88px 0; } .section.alt { background: linear-gradient(180deg, #f7f9ff 0%, #edf2ff 100%); } .section.alt::before { content: ""; position: absolute; top: 0; left: 0; width: 96px; height: 5px; border-radius: 0 8px 8px 0; background: var(--brand-blue); } .section-head { display: flex; justify-content: space-between; align-items: end; gap: 32px; margin-bottom: 34px; } .section-head > div, .section-head > p { min-width: 0; } .section-head > p { max-width: 620px; color: var(--muted); } .grid-3, .grid-4, .service-grid, .portfolio-grid, .feature-grid, .process, .gateway { display: grid; gap: 18px; } .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .service-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .portfolio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .process { grid-template-columns: repeat(4, minmax(0, 1fr)); } .gateway { grid-template-columns: repeat(2, minmax(0, 1fr)); } .card, .service-card, .portfolio-item { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-top: 3px solid var(--brand-gold); border-radius: var(--radius); background: #fff; box-shadow: 0 7px 24px rgba(15, 31, 68, .045); } .card { padding: 24px; } .card:hover, .service-card:hover, .portfolio-item:hover { transform: translateY(-3px); box-shadow: var(--shadow); } .card, .service-card, .portfolio-item { transition: transform .2s ease, box-shadow .2s ease; } .card p, .service-card p, .portfolio-copy p { margin-top: 9px; color: var(--muted); } .icon { width: 48px; height: 48px; display: grid; place-items: center; margin-bottom: 17px; border: 1px solid #d6def4; border-radius: var(--radius); background: var(--surface-blue); color: var(--brand-blue); font-size: .8125rem; font-weight: 900; } .service-card { padding: 25px; } .service-card .tag { display: inline-flex; margin-bottom: 15px; padding: 6px 9px; border-radius: 999px; background: var(--surface-blue); color: var(--brand-blue); font-size: .625rem; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; } .service-card h3 { font-size: 1.3125rem; } .service-card ul { padding-left: 18px; color: #5c6880; font-size: .875rem; } .service-card .more, .more { display: inline-flex; align-items: center; gap: 7px; margin-top: 17px; color: var(--brand-blue); font-size: .875rem; font-weight: 900; } .more:hover { color: var(--brand-navy); } .service-icon { width: 54px; height: 54px; display: grid; place-items: center; margin-bottom: 16px; border: 1px solid #d8e0f4; border-radius: var(--radius); background: linear-gradient(135deg, #eef2ff, #fff8d7); color: var(--brand-blue); } .service-icon img { width: 28px; height: 28px; border-radius: 0; object-fit: contain; } .split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 54px; align-items: center; } .split > * { min-width: 0; } .split img { width: 100%; box-shadow: var(--shadow); } .checklist { display: grid; gap: 12px; margin: 23px 0 0; padding: 0; list-style: none; } .checklist li { display: flex; gap: 11px; align-items: flex-start; } .checklist li::before { content: "✓"; flex: 0 0 24px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-blue); color: var(--brand-blue); font-weight: 900; } .portfolio-item img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 14px 14px 0 0; } .portfolio-copy { padding: 20px; } .portfolio-meta { color: var(--brand-blue); font-size: .6875rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; } .page-hero { position: relative; overflow: hidden; padding: 66px 0; color: #fff; background: linear-gradient(135deg, var(--brand-navy), #09256d); } .page-hero::after { content: ""; position: absolute; right: -100px; bottom: -140px; width: 330px; height: 330px; border-radius: 50%; background: rgba(0, 34, 225, .4); } .page-hero .container { position: relative; z-index: 1; } .page-hero h1 { color: #fff; } .page-hero p { max-width: 740px; margin-top: 15px; color: #d6deed; font-size: 1.125rem; } .breadcrumbs { margin-bottom: 18px; color: #aebbd2; font-size: .8125rem; } .breadcrumbs a { color: #fff; } .cta { position: relative; overflow: hidden; padding: 50px; border-radius: var(--radius); color: #fff; background: var(--brand-navy); } .cta::after { content: ""; position: absolute; top: -120px; right: -90px; width: 270px; height: 270px; border-radius: 50%; background: rgba(255, 224, 112, .12); } .cta h2 { max-width: 720px; color: #fff; } .cta p { max-width: 680px; margin-top: 10px; color: #cbd5e8; } .cta .actions { position: relative; z-index: 1; margin-top: 24px; } .detail-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 48px; align-items: center; } .detail-hero > * { min-width: 0; } .detail-hero img { width: 100%; box-shadow: 0 22px 50px rgba(0, 0, 0, .22); } .faq { display: grid; gap: 10px; } .faq details { padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; } .faq summary { color: var(--brand-navy); font-weight: 800; cursor: pointer; } .note { padding: 18px 20px; border-left: 4px solid var(--brand-gold); border-radius: 0 var(--radius) var(--radius) 0; background: var(--surface-gold); color: #5c553c; } .legal { max-width: 850px; } .legal h2 { margin-top: 38px; font-size: 1.875rem; } .legal p, .legal li { color: #58637a; } .legal ul { padding-left: 20px; } .gateway .card { min-height: 220px; display: flex; flex-direction: column; justify-content: space-between; } .contact-grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 22px; } .contact-panel { padding: 30px; border-radius: var(--radius); color: #fff; background: linear-gradient(145deg, var(--brand-navy), #06184c); } .contact-panel h2 { color: #fff; } .contact-panel p { color: #cbd5e8; } .contact-list { display: grid; gap: 14px; margin-top: 24px; } .contact-item { display: flex; gap: 12px; align-items: flex-start; } .contact-item b { display: block; } .contact-item span { display: block; color: #cbd5e8; font-size: .875rem; } .contact-form { padding: 30px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-soft); } .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .field { display: grid; gap: 7px; min-width: 0; } .field.full { grid-column: 1 / -1; } .field label { font-size: .8125rem; font-weight: 800; } .field input, .field select, .field textarea { width: 100%; min-width: 0; min-height: 48px; padding: 12px 13px; border: 1px solid #d3dbe9; border-radius: var(--radius); outline: none; background: #fff; color: var(--ink); } .field textarea { min-height: 155px; resize: vertical; } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--brand-blue); box-shadow: 0 0 0 4px rgba(0, 34, 225, .09); } .form-status { display: none; margin-top: 14px; padding: 12px 14px; border-radius: var(--radius); background: var(--surface-blue); color: var(--brand-navy); } .form-status.show { display: block; } .honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .whatsapp { position: fixed; right: 18px; bottom: 105px; z-index: 190; width: 58px; height: 58px; display: grid; place-items: center; border: 3px solid #fff; border-radius: 50%; background: #25D366; box-shadow: 0 15px 32px rgba(0, 0, 0, .22); transition: transform .2s ease, box-shadow .2s ease; } .whatsapp img { width: 30px; height: 30px; border-radius: 0; filter: brightness(0) invert(1); } .whatsapp:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 18px 38px rgba(0, 0, 0, .28); } .whatsapp-pulse { position: absolute; inset: -5px; border: 2px solid rgba(37, 211, 102, .25); border-radius: 50%; pointer-events: none; animation: waPulse 2.5s infinite; } @keyframes waPulse { 0%, 70%, 100% { opacity: 0; transform: scale(.88); } 20% { opacity: 1; } 45% { opacity: 0; transform: scale(1.15); } } .site-footer { padding: 64px 0 24px; background: #050b21; color: #d9e0ef; } .footer-grid { display: grid; grid-template-columns: 1.45fr repeat(3, minmax(0, 1fr)); gap: 34px; } .footer-brand img { width: 190px; margin-bottom: 14px; border-radius: 0; } .footer-brand p { max-width: 390px; color: #aeb8cd; } .footer-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; } .footer-whatsapp { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; padding: 12px 16px; border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--radius); color: #fff; font-size: .875rem; font-weight: 850; } .footer-whatsapp:hover { border-color: #25D366; color: #25D366; } .footer-title { margin-bottom: 14px; color: #fff; font-weight: 900; } .footer-links { display: grid; gap: 9px; } .footer-links a { color: #aeb8cd; font-size: .875rem; } .footer-links a:hover { color: var(--brand-gold); } .footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px; margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .1); color: #8792aa; font-size: .8125rem; } .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1); } .reveal.is-visible { opacity: 1; transform: none; } .reveal-delay-1 { transition-delay: .08s; } .reveal-delay-2 { transition-delay: .16s; } .reveal-delay-3 { transition-delay: .24s; } @media (max-width: 1120px) { .nav-toggle { display: block; } .nav { position: fixed; top: var(--mobile-nav-top, var(--header-height)); left: 0; right: 0; width: 100vw; height: calc(100vh - var(--mobile-nav-top, var(--header-height))); height: calc(100dvh - var(--mobile-nav-top, var(--header-height))); display: none; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 4px; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 12px 12px calc(24px + env(safe-area-inset-bottom)); border: 0; border-top: 1px solid var(--line); border-radius: 0; background: #fff; box-shadow: 0 18px 40px rgba(0,14,58,.16); z-index: 1990; } .nav.open { display: flex; } .nav a { justify-content: flex-start; width: 100%; min-height: 48px; padding: 12px 14px; flex: 0 0 auto; } .nav .nav-cta { justify-content: center; margin: 8px 0 0; width: 100%; } .hero-grid, .split, .detail-hero, .contact-grid { grid-template-columns: minmax(0, 1fr); } .hero-media { max-width: 820px; } .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .service-grid, .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .process { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-grid { grid-template-columns: 1.5fr repeat(2, minmax(0, 1fr)); } .footer-brand { grid-row: span 2; } } @media (max-width: 760px) { :root { --header-height: 68px; } .container { padding-inline: 12px; } .brand img { width: 150px; } .hero { padding: 46px 0 58px; } .hero h1 { font-size: clamp(2.25rem, 11vw, 3.25rem); } .hero .lead, .page-hero p { font-size: 1rem; } .hero-media::after { right: -10px; bottom: -10px; width: 90px; height: 90px; border-radius: 20px; } .stats { grid-template-columns: 1fr; } .actions { width: 100%; } .actions .btn { width: 100%; flex: 1 1 100%; } .section { padding: 64px 0; } .section-head { display: block; margin-bottom: 26px; } .section-head > p { margin-top: 12px; } .grid-4, .grid-3, .service-grid, .portfolio-grid, .feature-grid, .process, .gateway { grid-template-columns: minmax(0, 1fr); } .card, .service-card { padding: 21px; } .cta { padding: 32px 22px; } .page-hero { padding: 52px 0; } .page-hero h1 { font-size: clamp(2.2rem, 10vw, 3.1rem); } .form-grid { grid-template-columns: minmax(0, 1fr); } .field.full { grid-column: auto; } .contact-form, .contact-panel { padding: 22px; } .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; } .footer-brand { grid-column: 1 / -1; grid-row: auto; } .footer-bottom { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .footer-bottom span { display: block; margin-top: 6px; } .whatsapp { right: 14px; bottom: 88px; width: 56px; height: 56px; } .whatsapp img { width: 29px; height: 29px; } } @media (max-width: 440px) { .brand img { width: 132px; } .nav-wrap { gap: 10px; } .hero { padding-top: 40px; } .btn { width: 100%; } .section { padding: 56px 0; } .footer-grid { grid-template-columns: minmax(0, 1fr); } .footer-brand { grid-column: auto; } .footer-actions .btn, .footer-whatsapp { width: 100%; } .whatsapp { bottom: 82px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { opacity: 1; transform: none; transition: none; } .whatsapp-pulse { animation: none; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } .detail-service-icon { margin-bottom: 20px; } .about-hero { padding: 74px 0 82px; background: linear-gradient(135deg,#000e3a 0%,#071858 58%,#0022e1 100%); color:#fff; } .about-hero-grid { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr); gap:48px; align-items:center; } .about-hero h1 { color:#fff; max-width:900px; font-size:clamp(2.6rem,6vw,5.2rem); } .about-hero .lead { color:#dbe4ff; margin:22px 0 28px; } .about-hero-card { min-height:300px; padding:34px; display:flex; flex-direction:column; justify-content:end; border:1px solid rgba(255,255,255,.2); border-radius:20px; background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,224,112,.08)); box-shadow:0 24px 70px rgba(0,0,0,.25); } .about-hero-badge { display:inline-flex; width:max-content; max-width:100%; padding:9px 13px; border-radius:999px; background:var(--brand-gold); color:#000; font-size:.75rem; font-weight:900; text-transform:uppercase; letter-spacing:.06em; } .about-hero-card p { margin-top:16px; color:#fff; font-size:1.15rem; font-weight:750; } .about-facts { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; padding:0; overflow:hidden; background:var(--line); } .about-facts div { padding:24px; background:#fff; } .about-facts strong,.about-facts span { display:block; }.about-facts strong{color:var(--brand-navy);font-size:1.1rem}.about-facts span{margin-top:6px;color:var(--muted);font-size:.9rem} .step-no { display:inline-flex; min-width:38px; min-height:38px; align-items:center; justify-content:center; margin-bottom:15px; border-radius:999px; background:var(--surface-blue); color:var(--brand-blue); font-size:.72rem; font-weight:900; } .team-grid { display:grid; grid-template-columns:1.25fr 1fr 1fr; gap:18px; } .team-card { min-width:0; padding:24px; border:1px solid var(--line); border-radius:var(--radius); background:#fff; box-shadow:var(--shadow-soft); } .team-card img { width:100%; aspect-ratio:1/1; object-fit:cover; margin-bottom:20px; } .team-card.featured { padding:0; overflow:hidden; }.team-card.featured > div{padding:0 24px 26px}.team-role{display:block;color:var(--brand-blue);font-size:.72rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px}.team-card p{margin-top:9px;color:var(--muted)}.team-card small{display:block;margin-top:14px;color:#7b8496;font-size:.75rem}.team-avatar{width:86px;height:86px;display:grid;place-items:center;margin-bottom:22px;border-radius:50%;background:var(--surface-gold);color:#8a6a00;font-weight:900;font-size:1.2rem}.team-avatar.blue{background:var(--surface-blue);color:var(--brand-blue)} .portfolio-filters{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:26px}.portfolio-filter{border:1px solid var(--line);background:#fff;color:var(--brand-navy);padding:10px 14px;border-radius:999px;font-size:.82rem;font-weight:850;cursor:pointer}.portfolio-filter:hover,.portfolio-filter.is-active{background:var(--brand-blue);border-color:var(--brand-blue);color:#fff} .portfolio-showcase{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.case-card{overflow:hidden;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:var(--shadow-soft);transition:transform .2s ease,box-shadow .2s ease}.case-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}.case-card img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:0}.case-card-body{padding:24px}.case-card-body>span{color:var(--brand-blue);font-size:.72rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.case-card-body h2{font-size:1.55rem;margin-top:8px}.case-card-body p{margin:10px 0 15px;color:var(--muted)}.case-card-body strong{color:var(--brand-blue);font-size:.9rem}.case-hero{padding:74px 0 50px;background:linear-gradient(135deg,#000e3a,#081957)}.case-hero h1{color:#fff}.case-hero .lead{margin-top:20px;color:#dbe4ff}.case-hero-media{max-width:1100px}.case-hero-media img{width:100%;max-height:680px;object-fit:cover;box-shadow:var(--shadow)}.case-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.case-gallery figure{margin:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff}.case-gallery img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:0}.case-gallery figcaption{padding:13px 16px;color:var(--muted);font-size:.85rem}.case-card[hidden]{display:none} .case-card, .blog-card, .article-side-card, .tool-card, .category-card, .category-tool-section, .contact-form, .contact-panel, .side-card, .feature-list > div, .team-card, .about-hero-card, .stat, .info-panel { border-top: 3px solid var(--brand-gold); } .legal{max-width:900px}.legal h2{font-size:1.65rem;margin:34px 0 10px}.legal h3{margin:24px 0 8px}.legal p,.legal li{color:#4f5d76}.legal p+p{margin-top:12px}.legal ul,.legal ol{padding-left:22px}.legal a{color:var(--brand-blue);font-weight:700;text-decoration:underline;text-underline-offset:3px} .cookie-banner{position:fixed;left:16px;right:16px;bottom:16px;z-index:500;max-width:1120px;margin:auto;padding:18px;border:1px solid #d8dfed;border-top:3px solid var(--brand-gold);border-radius:18px;background:#fff;box-shadow:0 24px 70px rgba(0,14,58,.24)}.cookie-banner[hidden],.cookie-modal[hidden]{display:none!important}.cookie-inner{display:flex;gap:24px;align-items:center;justify-content:space-between}.cookie-kicker{color:var(--brand-blue);font-size:.7rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase}.cookie-banner h2,.cookie-dialog h2{font-size:1.45rem;margin:4px 0 6px}.cookie-banner p,.cookie-dialog p{color:var(--muted);font-size:.88rem}.cookie-region-note{margin-top:5px;font-size:.78rem!important}.cookie-actions{display:flex;flex-wrap:wrap;gap:8px;flex:0 0 auto}.cookie-modal{position:fixed;inset:0;z-index:600;display:grid;place-items:center;padding:16px;background:rgba(0,14,58,.55)}.cookie-dialog{position:relative;width:min(620px,calc(100vw - 32px));max-height:min(82dvh,760px);overflow:auto;padding:24px;border:1px solid #dfe5ef;border-top:4px solid var(--brand-gold);border-radius:18px;background:#fff;box-shadow:0 30px 90px rgba(0,0,0,.28)}.cookie-close{position:absolute;right:14px;top:12px;width:36px;height:36px;border:0;border-radius:50%;background:#f2f5fb;color:var(--brand-navy);font-size:1.35rem;line-height:1;cursor:pointer}.cookie-choice{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 0;border-bottom:1px solid var(--line)}.cookie-choice div{display:grid;gap:4px;min-width:0}.cookie-choice span{color:var(--muted);font-size:.8rem}.cookie-choice>b{font-size:.75rem;color:var(--brand-blue);text-align:right}.switch{position:relative;width:50px;height:28px;flex:0 0 50px}.switch input{position:absolute;opacity:0}.switch span{position:absolute;inset:0;border-radius:999px;background:#cbd3e2;cursor:pointer}.switch span:after{content:"";position:absolute;width:22px;height:22px;left:3px;top:3px;border-radius:50%;background:#fff;transition:.2s}.switch input:checked+span{background:var(--brand-blue)}.switch input:checked+span:after{transform:translateX(22px)}.cookie-dialog-actions{display:flex;gap:9px;justify-content:flex-end;margin-top:18px}.cookie-small{margin-top:13px;font-size:.75rem!important}.cookie-small a{color:var(--brand-blue);text-decoration:underline} .consent-check{display:flex;gap:10px;align-items:flex-start;margin:16px 0;color:#55627a;font-size:.8rem;line-height:1.5}.consent-check input{margin-top:4px;flex:0 0 auto}.consent-check a{color:var(--brand-blue);font-weight:800;text-decoration:underline}.form-status.success{background:#eaf8ef;color:#155c2a}.form-status.error{background:#fff0f0;color:#8b1a1a} @media (max-width:760px){.container{padding-inline:14px}.section{padding:64px 0}.page-hero{padding:52px 0}.hero{padding:50px 0 58px}.hero-grid{gap:30px}.stats{grid-template-columns:1fr}.cta{padding:32px 22px}.contact-panel,.contact-form{padding:22px}.form-grid{grid-template-columns:1fr}.cookie-banner{left:10px;right:10px;bottom:10px;padding:15px;border-radius:16px}.cookie-modal{padding:10px}.cookie-dialog{width:min(560px,calc(100vw - 20px));max-height:80dvh;padding:20px;border-top-width:3px;border-radius:16px}.cookie-dialog h2{font-size:1.28rem}.cookie-choice{gap:12px;padding:12px 0}.cookie-choice span{font-size:.76rem}.cookie-dialog-actions{gap:8px}.about-hero{padding:52px 0 62px}.about-hero-grid,.team-grid,.portfolio-showcase,.case-gallery{grid-template-columns:1fr}.about-hero h1{font-size:clamp(2.35rem,11vw,3.5rem)}.about-facts{grid-template-columns:1fr}.cookie-inner{display:block}.cookie-actions{margin-top:15px}.cookie-actions .btn{width:100%}.cookie-dialog-actions{display:grid}.cookie-dialog-actions .btn{width:100%}.case-hero{padding:55px 0 38px}} .btn, .article-tool-box .btn, .article-service-cta .btn, .hostinger-promo .btn { min-width: 0; max-width: 100%; overflow-wrap: anywhere; word-break: normal; white-space: normal; line-height: 1.3; } .contact-form, .contact-panel, .article-tool-box, .article-service-cta, .hostinger-promo { min-width: 0; } @media (max-width:1120px){ .nav-toggle { position:relative; z-index:220; } } @media (max-width:640px){ .nav { padding-inline:10px; } .nav a { font-size:1rem; min-height:50px; } .article-tool-box .btn, .article-service-cta .btn, .hostinger-promo .btn { width:100%; flex:1 1 100%; } .article-share { display:block; } .article-share strong { display:block; margin-bottom:9px; } .article-share-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; width:100%; } .article-share-actions a { min-width:0; overflow-wrap:anywhere; } } @media (max-width:380px){ .article-share-actions { grid-template-columns:1fr; } } .turnstile-wrap{margin:18px 0 8px;min-height:66px;display:flex;align-items:flex-start;flex-direction:column;gap:8px} .turnstile-notice{padding:10px 12px;border:1px solid #f0d48a;border-radius:10px;background:#fff9df;color:#5d4b12;font-size:.82rem} .cf-turnstile{max-width:100%;overflow:hidden} .turnstile-wrap{margin:18px 0 8px;min-height:66px;display:flex;align-items:flex-start;flex-direction:column;gap:8px} .turnstile-notice{padding:10px 12px;border:1px solid #f0d48a;border-radius:10px;background:#fff9df;color:#5d4b12;font-size:.82rem} .cf-turnstile{max-width:100%;overflow:hidden} .section-head { display: block; max-width: 900px; margin: 0 auto 38px; text-align: center; } .section-head > div, .section-head > p { max-width: 860px; margin-left: auto; margin-right: auto; } .section-head > p { margin-top: 13px; color: var(--muted); } .section-head .kicker, .section-head .eyebrow { justify-content: center; text-align: center; } .section-head .kicker::before { margin-inline: auto; } .page-hero .container { text-align: center; } .page-hero h1, .page-hero p { margin-left: auto; margin-right: auto; } .page-hero .breadcrumbs { text-align: center; } .tool-app-title .container, .tool-seo-intro .container, .tool-seo-section .narrow { text-align: center; } .tool-app-title h1, .tool-app-title p, .tool-seo-intro h2, .tool-seo-intro p, .tool-seo-section h2, .tool-seo-section > .container > p { margin-left: auto; margin-right: auto; } .tool-app-title p, .tool-seo-intro p, .tool-seo-section > .container > p { max-width: 820px; } .tool-app-title .eyebrow, .tool-seo-intro .eyebrow, .tool-seo-section .eyebrow { justify-content: center; } .tool-app-title .breadcrumbs { justify-content: center; } .blog-hero .container, .article-hero .container { text-align: center; } .blog-hero h1, .blog-hero .lead, .article-hero h1, .article-hero .article-intro { margin-left: auto; margin-right: auto; } .blog-hero .blog-search { margin-left: auto; margin-right: auto; text-align: left; } .section-head + .grid-3, .section-head + .grid-4, .section-head + .service-grid, .section-head + .portfolio-grid, .section-head + .feature-grid, .section-head + .process, .section-head + .gateway { text-align: left; } .hero-grid, .about-hero-grid, .detail-hero { min-width: 0; } .hero-grid > *, .about-hero-grid > *, .detail-hero > * { min-width: 0; } .hero-media img, .about-hero-card img, .detail-hero img { max-width: 100%; } .nav-wrap { min-width: 0; } .brand { min-width: 0; } .brand img { max-width: 100%; } @media (max-width: 1120px) { .site-header { isolation: isolate; } .nav-toggle { display: block; flex: 0 0 46px; } .nav { width: 100%; max-width: 100vw; box-sizing: border-box; } .nav a { white-space: normal; overflow-wrap: anywhere; } } @media (max-width: 760px) { .section-head { margin-bottom: 28px; } .section-head h2 { font-size: clamp(1.8rem, 8vw, 2.55rem); } .section-head > p { font-size: 1rem; line-height: 1.65; } .page-hero .container, .tool-app-title .container, .tool-seo-intro .container, .tool-seo-section .narrow, .blog-hero .container, .article-hero .container { text-align: center; } .hero-grid, .about-hero-grid, .detail-hero { grid-template-columns: minmax(0, 1fr); } .hero-grid { text-align: center; } .hero-grid .eyebrow, .hero-grid .kicker { justify-content: center; } .hero-grid .lead, .hero-grid .actions { margin-left: auto; margin-right: auto; } .hero-media, .about-hero-card, .detail-hero-media { width: 100%; max-width: 100%; } .actions { justify-content: center; } } @media (max-width: 440px) { .nav-wrap { gap: 8px; } .brand img { width: min(132px, 55vw); } .nav-toggle { width: 44px; height: 44px; flex-basis: 44px; } .page-hero, .tool-app-title { overflow-wrap: anywhere; } .page-hero h1, .tool-app-title h1 { font-size: clamp(2rem, 10vw, 2.75rem); } } @media (max-width:360px){ .faith-header{font-size:10px;letter-spacing:-.02em;padding-inline:6px} } html { scrollbar-gutter: stable; } body { min-width: 320px; } .container, .nav-wrap, .hero-grid, .about-hero-grid, .detail-hero, .split, .contact-grid, .tool-layout, .tool-interface, .tool-main, .tool-side, .tool-panel, .tool-card, .category-card, .card, .service-card, .portfolio-item, .case-card, .blog-card, .contact-form, .contact-panel, .feature-list, .metric-grid, .result-card, .result-output, .field, .action-row, .share-bar, .share-actions, .tool-app-meta, .tool-app-actions, .tool-app-badges, .tool-search, .tool-inline-search, .info-panel { min-width: 0; } img, svg, canvas, video, iframe, embed, object { max-width: 100%; } pre, code, .result-output, .tool-search-results, .tool-card strong, .category-card strong, .card h3, .service-card h3, .page-hero h1, .tool-app-title h1, .tool-category-hero h1 { overflow-wrap: anywhere; word-break: break-word; } pre { max-width: 100%; overflow-x: auto; white-space: pre-wrap; } input, select, textarea, button { max-width: 100%; } input[type="file"] { width: 100%; min-width: 0; overflow: hidden; } button, a.btn, .tool-btn, .action-btn, .share-actions a, .share-actions button { touch-action: manipulation; } a, .tool-open, .more, .side-card, .feature-list > div, .info-panel, .result-card, .result-value { overflow-wrap: anywhere; } .tools-shell table, main table { width: 100%; max-width: 100%; } .tools-shell th, .tools-shell td, main th, main td { overflow-wrap: anywhere; } .tool-interface .action-row, .tool-panel .action-row, .result-card .action-row { align-items: stretch; } .tool-interface .action-row > *, .tool-panel .action-row > *, .result-card .action-row > * { flex: 0 1 auto; min-width: 0; } @media (hover: none), (pointer: coarse) { .tool-card:hover, .category-card:hover, .card:hover, .service-card:hover, .portfolio-item:hover, .case-card:hover, .btn:hover, .tool-card:hover, .category-card:hover { transform: none; } } @media (max-width: 1100px) { .nav-wrap { gap: 14px; } .nav { flex-wrap: nowrap; } } @media (max-width: 860px) { .tool-app-meta, .tool-app-actions, .share-bar, .info-panel { align-items: stretch; } .tool-app-actions, .share-actions { width: 100%; } .tool-app-actions .action-btn, .share-actions a, .share-actions button { flex: 1 1 150px; min-width: 0; } .tool-side { grid-template-columns: 1fr; } .tool-panel { padding: clamp(16px, 3vw, 24px); } .panel-top { gap: 14px; } } @media (max-width: 760px) { :root { --mobile-safe-pad: 12px; } .container { padding-left: max(var(--mobile-safe-pad), env(safe-area-inset-left)); padding-right: max(var(--mobile-safe-pad), env(safe-area-inset-right)); } .site-header-stack { top: env(safe-area-inset-top, 0px); } .site-header { top: auto; } .nav { padding-bottom: max(24px, env(safe-area-inset-bottom)); } .tool-app-meta, .tool-app-badges, .tool-app-actions, .share-bar, .share-actions, .hero-links, .actions, .action-row { width: 100%; } .tool-app-badges { gap: 6px; } .tool-badge { max-width: 100%; } .tool-interface .field, .tool-interface .field.full, .field.full { width: 100%; } .field textarea { min-height: 150px; } .tool-interface .action-row, .tool-panel .action-row, .result-card .action-row, .actions, .hero-links, .cta-actions { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; } .tool-interface .action-row > *, .tool-panel .action-row > *, .result-card .action-row > *, .actions > *, .hero-links > *, .cta-actions > * { width: 100%; min-width: 0; } .tool-search, .tool-inline-search { width: 100%; min-width: 0; } .tool-search input, .tool-inline-search input { min-width: 0; width: 100%; } .tool-search-results { max-height: min(52vh, 420px); overflow-y: auto; } .panel-top { align-items: flex-start; flex-wrap: wrap; } .panel-top > div { min-width: 0; flex: 1 1 220px; } .large-tool-icon { flex: 0 0 44px; } .result-card { padding: 15px; } .result-output { min-height: 140px; max-height: 52vh; } .metric-grid, .feature-list, .stats, .grid-2, .grid-3, .grid-4, .service-grid, .portfolio-grid, .feature-grid, .process, .gateway, .category-grid, .tool-grid, .featured-grid, .all-tools-grid, .category-grid-professional, .category-tool-grid, .guidance-grid { grid-template-columns: minmax(0, 1fr) !important; } .tool-library-controls { grid-template-columns: minmax(0, 1fr) !important; } .tool-filter-row { justify-content: flex-start !important; } .tool-category-stats { display: grid; grid-template-columns: minmax(0, 1fr); } .tool-category-stat { min-width: 0; } .tool-category-hero, .tool-app-title, .tool-seo-intro, .tool-seo-section { overflow-wrap: anywhere; } } @media (max-width: 480px) { .brand img { width: min(132px, 54vw); } .nav-wrap { gap: 8px; } .nav-toggle { width: 44px; height: 44px; flex-basis: 44px; } h1 { font-size: clamp(2rem, 10vw, 2.9rem); } h2 { font-size: clamp(1.65rem, 8vw, 2.35rem); } h3 { font-size: 1.12rem; } .tool-app-title h1 { font-size: clamp(1.9rem, 10vw, 2.75rem); } .tool-category-hero h1 { font-size: clamp(1.9rem, 10vw, 2.7rem); } .tool-panel, .side-card, .card, .service-card, .contact-form, .contact-panel, .feature-list > div, .metric, .result-card { border-radius: 12px; } .tool-panel { padding: 14px; } .field input, .field select, .field textarea, .action-btn, .tool-btn, .btn { min-height: 46px; } .tool-search span, .tool-inline-search span { padding-inline: 5px; } .tool-search input, .tool-inline-search input { font-size: .95rem; } .share-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .share-actions a, .share-actions button { width: 100%; } } @media (max-width: 360px) { .container { padding-left: 10px; padding-right: 10px; } .brand img { width: min(122px, 50vw); } .nav-toggle { width: 42px; height: 42px; flex-basis: 42px; } .tool-panel { padding: 12px; } .panel-top { gap: 10px; } .large-tool-icon { width: 40px; height: 40px; flex-basis: 40px; } .tool-search, .tool-inline-search { padding: 4px; gap: 4px; } .tool-search input, .tool-inline-search input { padding-left: 2px; padding-right: 2px; } .share-actions { grid-template-columns: minmax(0, 1fr); } } @media (orientation: landscape) and (max-height: 520px) { .tools-hero { padding-top: 28px; padding-bottom: 28px; } .tool-category-hero { padding-top: 28px; } .tool-workspace { padding-top: 24px; } .tool-app-title { padding-top: 14px; } } @media (prefers-reduced-motion: reduce) { .tool-card, .category-card, .card, .service-card, .portfolio-item, .case-card, .btn { transition: none !important; } } .tool-settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; min-width: 0; } .tool-settings-grid > * { min-width: 0; } .pdf-result-card { overflow: hidden; } .pdf-preview-frame { display: block; width: 100%; max-width: 100%; min-height: 560px; border: 1px solid var(--border, #e4e7ec); border-radius: 10px; background: #fff; } .tool-preview, .qr-preview, .result-card img, .result-card canvas, .result-card svg { max-width: 100%; height: auto; } .result-output, pre, code, textarea { overflow-wrap: anywhere; word-break: break-word; } @media (max-width: 640px) { .tool-settings-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; } .pdf-preview-frame { min-height: min(72vh, 620px); } } @media (max-width: 360px) { .pdf-preview-frame { min-height: 500px; } } .tool-pro-meta{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px;padding:8px 0;min-width:0} .tool-pro-pill{display:inline-flex;align-items:center;gap:5px;min-width:0;padding:7px 10px;border:1px solid var(--border,#e4e7ec);border-radius:999px;background:var(--surface,#fff);font-size:.78rem;line-height:1.25;color:var(--muted,#667085);max-width:100%;overflow-wrap:anywhere} .tool-history-panel,.tool-scenario-panel,.tool-check-preview,.tool-qr-options,.tool-pro-pdf-controls,.tool-pro-pdf-results{margin-top:14px;border:1px solid var(--border,#e4e7ec);border-radius:12px;background:var(--surface,#fff);padding:14px;min-width:0;overflow:hidden} .tool-history-panel>summary{cursor:pointer;font-weight:700;overflow-wrap:anywhere}.tool-history-inner{padding-top:10px}.tool-history-list{display:grid;gap:8px}.tool-history-item{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:10px;border:1px solid var(--border,#e4e7ec);border-radius:10px;min-width:0}.tool-history-item pre,.tool-scenario-result pre,.tool-compare-grid pre{margin:7px 0 0;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;max-height:220px;overflow:auto}.tool-live-stats{display:flex;flex-wrap:wrap;gap:7px;margin:7px 0 14px;min-width:0}.tool-live-stats span{padding:6px 9px;border:1px solid var(--border,#e4e7ec);border-radius:8px;font-size:.78rem;color:var(--muted,#667085);min-width:0}.tool-live-stats b{color:var(--text,#101828)} .tool-compare-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px;min-width:0}.tool-compare-grid>div{min-width:0;border:1px solid var(--border,#e4e7ec);border-radius:10px;padding:10px}.tool-scenario-panel p{margin:4px 0}.tool-color-export{display:flex;flex-wrap:wrap;gap:8px} .tool-seo-meter{margin-top:8px;padding:10px;border:1px solid var(--border,#e4e7ec);border-radius:10px;background:var(--surface-subtle,#f8fafc)}.tool-seo-meter>div:first-child{display:flex;justify-content:space-between;gap:10px;font-size:.82rem;overflow-wrap:anywhere}.tool-meter{height:7px;margin-top:8px;border-radius:999px;background:rgba(98,108,124,.14);overflow:hidden}.tool-meter span{display:block;height:100%;width:0;border-radius:inherit;background:currentColor;transition:width .2s ease}.tool-check-head{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}.tool-check-list{display:grid;gap:7px;margin-top:10px}.tool-check-list label{display:flex;align-items:flex-start;gap:8px;padding:8px;border:1px solid var(--border,#e4e7ec);border-radius:9px;min-width:0}.tool-check-list input{margin-top:3px;flex:0 0 auto}.tool-check-list span{min-width:0;overflow-wrap:anywhere} .tool-qr-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;min-width:0}.tool-pdf-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:10px}.tool-pdf-thumb{min-width:0;border:1px solid var(--border,#e4e7ec);border-radius:10px;padding:9px;display:flex;flex-direction:column;gap:8px}.tool-pdf-thumb img{display:block;width:100%;height:auto;max-width:100%;border-radius:7px;background:#fff}.tool-pdf-thumb strong{overflow-wrap:anywhere} @media(max-width:760px){.tool-compare-grid,.tool-qr-grid{grid-template-columns:minmax(0,1fr)}.tool-pdf-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.tool-history-item{flex-direction:column}.tool-history-item .action-btn{width:100%}} @media(max-width:430px){.tool-pro-meta{gap:6px}.tool-pro-pill{border-radius:9px;width:100%}.tool-history-panel,.tool-scenario-panel,.tool-check-preview,.tool-qr-options,.tool-pro-pdf-controls,.tool-pro-pdf-results{padding:11px}.tool-pdf-gallery{grid-template-columns:minmax(0,1fr)}.tool-live-stats span{flex:1 1 calc(50% - 7px)}} @media(max-width:360px){.tool-live-stats{gap:5px}.tool-live-stats span{width:100%}}