.contact-page { background: var(--customer-bg, #f6f8fc); color: var(--customer-text, #172033); padding-bottom: 4rem; }
.contact-hero { position: relative; overflow: hidden; padding: clamp(4rem, 9vw, 7rem) 0; background: linear-gradient(135deg, #061225, #073b73 54%, #006fcd); color: #fff; }
.contact-hero-content { position: relative; z-index: 1; max-width: 850px; text-align: center; }
.contact-hero h1 { margin: .8rem 0 1rem; font-size: clamp(2.5rem, 6vw, 5.25rem); font-weight: 900; letter-spacing: -.05em; }
.contact-hero p { max-width: 680px; margin: 0 auto; color: rgba(255,255,255,.82); font-size: 1.1rem; line-height: 1.7; }
.contact-hero-orb { position:absolute; width: 34rem; height:34rem; border-radius:50%; filter: blur(8px); opacity:.35; background:radial-gradient(circle, #22d3ee, transparent 68%); }
.contact-hero-orb-one { top:-20rem; left:-12rem; }.contact-hero-orb-two { right:-15rem; bottom:-24rem; background:radial-gradient(circle, #8b5cf6, transparent 68%); }
.contact-eyebrow { display:inline-flex; align-items:center; gap:.45rem; font-size:.72rem; font-weight:900; letter-spacing:.14em; color:#82d8ff; }.contact-eyebrow.dark { color:var(--customer-accent, #006fcd); }
.contact-hero-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:.8rem; margin-top:2rem; }.contact-primary-action,.contact-secondary-action { display:inline-flex; align-items:center; gap:.55rem; padding:.9rem 1.25rem; border-radius:12px; font-weight:850; text-decoration:none; }.contact-primary-action { background:#25d366; color:#062411; }.contact-secondary-action { border:1px solid rgba(255,255,255,.28); color:#fff; }
.contact-content { margin-top:clamp(2rem,5vw,4rem); }.contact-method-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-bottom:1.5rem; }.contact-method-card { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.85rem; padding:1.1rem; border:1px solid var(--customer-line, #dce5f0); border-radius:16px; background:var(--customer-surface-solid, #fff); color:var(--customer-text, #172033); text-decoration:none; box-shadow:0 12px 30px rgba(15,23,42,.06); transition:transform .2s ease, box-shadow .2s ease; }.contact-method-card:hover { transform:translateY(-3px); color:var(--customer-text, #172033); box-shadow:0 16px 36px rgba(15,23,42,.12); }.contact-method-card strong,.contact-method-card small { display:block; }.contact-method-card strong { font-weight:900; }.contact-method-card small { color:var(--customer-muted, #65758b); margin-top:.15rem; }.contact-method-icon { width:44px;height:44px;display:grid;place-items:center;border-radius:12px;background:rgba(0,111,205,.1);color:var(--customer-accent,#006fcd);font-size:1.2rem; }.contact-method-card.whatsapp .contact-method-icon { background:rgba(37,211,102,.13);color:#16a34a; }.contact-method-arrow { color:var(--customer-muted,#65758b);font-size:.82rem; }
.contact-layout { display:grid;grid-template-columns:minmax(0,1.55fr) minmax(280px,.75fr);gap:1.5rem;align-items:stretch; }.contact-ticket-panel,.contact-qr-panel { padding:clamp(1.25rem,3vw,2rem); border:1px solid var(--customer-line,#dce5f0);border-radius:20px;background:var(--customer-surface-solid,#fff);box-shadow:0 18px 45px rgba(15,23,42,.07); }.contact-panel-heading { display:flex;align-items:center;gap:.85rem;margin-bottom:1.5rem; }.contact-panel-heading h2,.contact-qr-panel h2 { margin:.25rem 0 0;font-weight:900;font-size:1.55rem; }.contact-panel-icon { width:48px;height:48px;display:grid;place-items:center;border-radius:14px;background:linear-gradient(135deg,#006fcd,#6d5dfc);color:#fff; }.contact-ticket-form { display:grid;gap:1rem; }.contact-form-row { display:grid;grid-template-columns:1fr 1fr;gap:1rem; }.contact-ticket-form label { display:grid;gap:.45rem;font-size:.83rem;font-weight:850; }.contact-ticket-form label span { color:var(--customer-muted,#65758b);font-weight:600; }.contact-ticket-form input,.contact-ticket-form select,.contact-ticket-form textarea { width:100%;border:1px solid var(--customer-line,#dce5f0);border-radius:10px;background:transparent;color:var(--customer-text,#172033);padding:.75rem .85rem;outline:0; }.contact-ticket-form textarea { min-height:155px;resize:vertical; }.contact-ticket-form input:focus,.contact-ticket-form select:focus,.contact-ticket-form textarea:focus { border-color:var(--customer-accent,#006fcd);box-shadow:0 0 0 3px rgba(0,111,205,.12); }.contact-submit-button { width:max-content;border:0;border-radius:11px;padding:.85rem 1.15rem;background:linear-gradient(135deg,#006fcd,#6d5dfc);color:#fff;font-weight:900; }.contact-honeypot { position:absolute!important;left:-10000px!important;opacity:0!important; }.contact-qr-panel { text-align:center;display:flex;flex-direction:column;align-items:center; }.contact-qr-panel p { color:var(--customer-muted,#65758b);line-height:1.6;margin:1rem 0; }.contact-qr-wrap { display:block;padding:.75rem;background:#fff;border:1px solid var(--customer-line,#dce5f0);border-radius:16px; }.contact-qr-wrap img { display:block;width:min(100%,220px);height:auto;border-radius:9px; }.contact-qr-link { margin-top:1.1rem;color:#16a34a;font-weight:900;text-decoration:none; }.contact-notice { display:flex;align-items:center;gap:.75rem;padding:1rem 1.15rem;border-radius:13px;margin-bottom:1.5rem;font-weight:750; }.contact-notice.success { background:rgba(22,163,74,.12);color:#13733b; }.contact-notice.error { background:rgba(220,38,38,.1);color:#b91c1c; }
html[data-theme="dark"] .contact-page { background:#0b1220; } html[data-theme="dark"] .contact-ticket-panel,html[data-theme="dark"] .contact-qr-panel,html[data-theme="dark"] .contact-method-card { background:#101a2b; } html[data-theme="dark"] .contact-ticket-form input,html[data-theme="dark"] .contact-ticket-form select,html[data-theme="dark"] .contact-ticket-form textarea { background:#0b1424; }
@media (max-width: 900px) { .contact-method-grid { grid-template-columns:1fr; }.contact-layout { grid-template-columns:1fr; }.contact-qr-panel { order:-1; }.contact-qr-wrap img { width:180px; } }
@media (max-width: 575px) { .contact-hero { padding:3.5rem 0; }.contact-form-row { grid-template-columns:1fr; }.contact-submit-button { width:100%;justify-content:center; }.contact-method-card { padding:.9rem; }.contact-hero-actions { flex-direction:column; }.contact-primary-action,.contact-secondary-action { justify-content:center; } }