.about-page { min-height: 100vh; color: #1f1f1f; padding: 26px 38px 38px; background: linear-gradient(to right, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.1)), linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.45)); } .about-shell { background: #f5f5f5; border: 1px solid #d9d9d9; padding: 38px; } .about-kicker, .about-label, .about-panel-label, .about-origin-box span, .about-panel-meta span { display: block; font-size: 10px; letter-spacing: 0.22em; color: #666; } .about-hero { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.8fr); gap: 28px; align-items: end; padding-bottom: 36px; border-bottom: 1px solid #dfdfdf; } .about-hero-copy h1 { margin: 14px 0 18px; font-size: 68px; line-height: 0.92; font-weight: 300; letter-spacing: -0.05em; color: #131313; } .about-intro { max-width: 720px; margin: 0; font-size: 18px; line-height: 1.65; color: #4f4f4f; } .about-hero-panel { padding: 24px; background: linear-gradient( 180deg, rgba(255, 106, 0, 0.08), rgba(255, 106, 0, 0.03) ); border: 1px solid rgba(255, 106, 0, 0.18); } .about-hero-panel p { margin: 10px 0 0; font-size: 16px; line-height: 1.6; color: #1f1f1f; } .about-panel-meta { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(255, 106, 0, 0.14); } .about-panel-meta p, .about-origin-box p { margin: 8px 0 0; font-size: 14px; line-height: 1.55; color: #1f1f1f; } .about-section { padding-top: 38px; } .about-section--split { display: grid; grid-template-columns: minmax(260px, 0.7fr) minmax(0, 1.3fr); gap: 28px; align-items: start; } .about-section-heading h2, .about-origin-copy h2, .about-bottom-copy h2 { margin: 10px 0 0; font-size: 42px; line-height: 0.98; font-weight: 300; letter-spacing: -0.04em; color: #131313; } .about-section-copy { display: flex; flex-direction: column; gap: 18px; } .about-section-copy p, .about-origin-copy p, .about-bottom-copy p { margin: 0; font-size: 16px; line-height: 1.7; color: #4f4f4f; } .about-quote-block { margin-top: 38px; padding: 32px 36px; background: #1f1f1f; border-left: 3px solid #ff6a00; } .about-quote-block p { margin: 0; font-size: 28px; line-height: 1.3; font-weight: 300; letter-spacing: -0.03em; color: #fff; max-width: 900px; } .about-grid-section { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 38px; } .about-card { padding: 24px; background: #efefef; border: 1px solid #d9d9d9; min-height: 260px; } .about-card h3 { margin: 14px 0 12px; font-size: 24px; line-height: 1.05; font-weight: 400; color: #131313; } .about-card p { margin: 0; font-size: 15px; line-height: 1.65; color: #4f4f4f; } .about-origin-section { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr); gap: 28px; margin-top: 38px; padding-top: 38px; border-top: 1px solid #dfdfdf; } .about-origin-box { display: flex; flex-direction: column; gap: 18px; background: #efefef; border: 1px solid #d9d9d9; padding: 24px; } .about-origin-box > div { padding-bottom: 16px; border-bottom: 1px solid #d9d9d9; } .about-origin-box > div:last-child { border-bottom: none; padding-bottom: 0; } .about-bottom-cta { margin-top: 38px; padding: 38px; background: #ff6a00; display: grid; grid-template-columns: minmax(0, 1.2fr) auto; gap: 24px; align-items: end; } .about-bottom-copy .about-label, .about-bottom-copy h2, .about-bottom-copy p { color: #fff; } .about-bottom-copy .about-label { opacity: 0.85; } .about-bottom-copy p { margin-top: 16px; max-width: 700px; } .about-bottom-actions { display: flex; gap: 12px; flex-wrap: wrap; } .about-btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; padding: 12px 18px; font-size: 14px; border-radius: 999px; transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease; } .about-btn:hover { transform: translateY(-1px); } .about-btn--primary { background: #fff; color: #ff6a00; } .about-btn--secondary { background: rgba(255, 255, 255, 0.14); color: #fff; backdrop-filter: blur(8px); } .about-proof-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 38px; } .about-proof-item { padding: 18px; border: 1px solid #d9d9d9; background: #fafafa; } .about-proof-item p { margin: 10px 0 0; font-size: 14px; line-height: 1.55; color: #3f3f3f; } .about-process-section { margin-top: 38px; padding-top: 38px; border-top: 1px solid #dfdfdf; } .about-credentials-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 38px; } .about-credential-card { padding: 24px; background: linear-gradient( 180deg, rgba(255, 106, 0, 0.06), rgba(255, 106, 0, 0.02) ); border: 1px solid rgba(255, 106, 0, 0.16); min-height: 220px; } .about-credential-card h3 { margin: 14px 0 12px; font-size: 24px; line-height: 1.08; font-weight: 400; color: #131313; } .about-credential-card p { margin: 0; font-size: 15px; line-height: 1.65; color: #4f4f4f; } .about-method-section { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 0.95fr); gap: 28px; margin-top: 38px; padding: 28px; background: #efefef; border: 1px solid #d9d9d9; } .about-method-copy h2 { margin: 10px 0 16px; font-size: 40px; line-height: 0.98; font-weight: 300; letter-spacing: -0.04em; color: #131313; } .about-method-copy p { margin: 0; font-size: 16px; line-height: 1.7; color: #4f4f4f; } .about-method-points { display: grid; grid-template-columns: 1fr; gap: 16px; } .about-method-points > div { padding-bottom: 14px; border-bottom: 1px solid #d6d6d6; } .about-method-points > div:last-child { border-bottom: none; padding-bottom: 0; } .about-method-points span { display: block; font-size: 10px; letter-spacing: 0.22em; color: #666; } .about-method-points p { margin: 8px 0 0; font-size: 14px; line-height: 1.55; color: #1f1f1f; } .about-trust-note { margin-top: 38px; padding: 22px; border: 1px solid rgba(255, 106, 0, 0.18); background: linear-gradient( 180deg, rgba(255, 106, 0, 0.08), rgba(255, 106, 0, 0.03) ); } .about-trust-note p { margin: 10px 0 0; font-size: 15px; line-height: 1.65; color: #1f1f1f; } @media (max-width: 1100px) { .about-hero, .about-section--split, .about-origin-section, .about-bottom-cta, .about-method-section { grid-template-columns: 1fr; } .about-hero-copy h1 { font-size: 52px; } .about-grid-section, .about-proof-strip, .about-credentials-grid { grid-template-columns: 1fr; } .about-method-copy h2 { font-size: 32px; } } @media (max-width: 700px) { .about-page { padding: 18px; } .about-shell { padding: 24px 18px; } .about-hero-copy h1 { font-size: 38px; } .about-section-heading h2, .about-origin-copy h2, .about-bottom-copy h2, .about-method-copy h2 { font-size: 30px; } .about-intro, .about-section-copy p, .about-origin-copy p, .about-bottom-copy p, .about-method-copy p, .about-credential-card p, .about-proof-item p, .about-trust-note p { font-size: 15px; } .about-quote-block { padding: 24px 20px; } .about-quote-block p { font-size: 22px; } .about-method-section, .about-bottom-cta { padding: 26px 20px; } }