.certificate-page { --cert-ink:#102b40; --cert-muted:#6f8798; --cert-blue:#2477d4; --cert-aqua:#4d9dff; --cert-cyan:#4cc9ff; color:var(--cert-ink); background:#f4fafb; }
.certificate-page-hero { position:relative; min-height:620px; display:grid; align-items:end; overflow:hidden; color:#fff; background:#071d2c; }
.certificate-page-hero::before { content:''; position:absolute; inset:0; background:linear-gradient(90deg,rgba(2,11,20,.98),rgba(3,17,29,.78) 48%,rgba(3,17,29,.38)),url('https://images.unsplash.com/photo-1544551763-46a013bb70d5?auto=format&fit=crop&w=2000&q=90') center/cover; filter:saturate(.82) contrast(1.08); }
.certificate-page-hero::after { content:''; position:absolute; inset:auto 0 0; height:180px; background:linear-gradient(transparent,rgba(3,17,29,.72)); }
.certificate-page-hero-inner { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1fr) minmax(330px,.82fr); align-items:center; gap:clamp(36px,7vw,110px); width:100%; padding-top:112px; padding-bottom:78px; }
.certificate-page-hero-copy { max-width:680px; }
.certificate-page-eyebrow,.certificate-page-kicker { display:inline-flex; align-items:center; gap:9px; color:var(--cert-blue); font:700 11px 'DM Sans',sans-serif; letter-spacing:.16em; text-transform:uppercase; }
.certificate-page-eyebrow { color:var(--cert-aqua); }
.certificate-page-eyebrow::before,.certificate-page-kicker::before { content:''; width:7px; height:7px; flex:0 0 auto; border-radius:50%; background:currentColor; box-shadow:0 0 15px currentColor; }
.certificate-page-hero h1 { max-width:620px; margin:20px 0 0; color:#fff; font:700 clamp(2.8rem,6vw,5.8rem)/.95 'Space Grotesk',sans-serif; letter-spacing:-.075em; }
.certificate-page-hero-copy>p { max-width:590px; margin:22px 0 0; color:#c5dbe4; font-size:clamp(1rem,1.7vw,1.22rem); line-height:1.7; }
.certificate-page-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }
.certificate-page-actions .btn-ghost { color:#fff; border-color:rgba(255,255,255,.28); background:rgba(255,255,255,.08); }
.certificate-page-art { position:relative; min-height:375px; display:grid; place-items:center; }
.certificate-page-orbit { position:absolute; border:1px solid rgba(77,157,255,.36); border-radius:50%; transform:rotate(-17deg); }
.certificate-page-orbit-one { width:92%; height:64%; }
.certificate-page-orbit-two { width:106%; height:76%; border-color:rgba(76,201,255,.16); transform:rotate(11deg); }
.gift-card-preview { position:relative; z-index:1; width:min(470px,100%); min-height:275px; display:flex; flex-direction:column; justify-content:space-between; padding:30px; overflow:hidden; border:1px dashed rgba(194,235,255,.58); border-radius:22px; background:linear-gradient(135deg,#06243b 0%,#0a527d 48%,#123f67 100%); box-shadow:0 28px 70px rgba(0,0,0,.58),0 0 0 1px rgba(76,201,255,.1); transform:rotate(-4deg); }
.gift-card-preview::before { content:''; position:absolute; inset:0; opacity:.5; background:linear-gradient(135deg,transparent 0 42%,rgba(76,201,255,.22) 42.2% 42.6%,transparent 42.8% 61%,rgba(255,255,255,.1) 61.2% 61.5%,transparent 61.7%); pointer-events:none; }
.gift-card-preview::after { content:''; position:absolute; width:250px; height:250px; right:-80px; bottom:-100px; border:1px solid rgba(255,255,255,.25); border-radius:50%; box-shadow:0 0 0 32px rgba(255,255,255,.05),0 0 0 64px rgba(255,255,255,.035); }
.gift-card-ribbon { position:absolute; z-index:3; top:24px; right:-48px; width:190px; padding:8px 0; color:#06212b; text-align:center; background:linear-gradient(105deg,#73e8ff,#4d9dff 55%,#2f72e8); box-shadow:0 8px 20px rgba(0,0,0,.28); transform:rotate(35deg); }
.gift-card-ribbon span { font:700 10px 'DM Sans',sans-serif; letter-spacing:.18em; text-transform:uppercase; }
.gift-card-preview > * { position:relative; z-index:2; }
.gift-card-brand { color:#9feaff; font:700 10px 'DM Sans',sans-serif; letter-spacing:.2em; }
.gift-card-preview strong { max-width:310px; margin-top:34px; color:#fff; font:700 clamp(1.9rem,4vw,3rem)/1.05 'Space Grotesk',sans-serif; letter-spacing:-.055em; }
.gift-card-preview p { margin:0; color:#d3f3ff; font-size:13px; }
.gift-card-bottom { display:flex; align-items:end; justify-content:space-between; gap:12px; padding-top:18px; border-top:1px solid rgba(255,255,255,.2); }
.gift-card-bottom span { color:#bde6f4; font-size:10px; letter-spacing:.12em; }
.gift-card-bottom b { color:#a9f1ff; font:700 2.2rem 'Space Grotesk',sans-serif; }
.certificate-page-details { padding:105px 0 112px; background:#f4fafb; }
.certificate-page-details-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(360px,.86fr); align-items:center; gap:clamp(40px,8vw,115px); }
.certificate-page-copy h2,.certificate-options-heading h2,.certificate-page-cta h2 { margin:17px 0 0; color:var(--cert-ink); font:700 clamp(2rem,4vw,3.7rem)/1.03 'Space Grotesk',sans-serif; letter-spacing:-.065em; }
.certificate-page-copy>p { margin:17px 0 0; color:var(--cert-muted); font-size:15px; line-height:1.78; }
.certificate-page-copy>p strong { color:var(--cert-ink); }
.certificate-page-card { overflow:hidden; border:1px solid rgba(24,70,91,.13); border-radius:23px; background:#fff; box-shadow:0 22px 60px rgba(31,77,97,.13); }
.certificate-page-card-image { min-height:300px; display:grid; place-items:center; overflow:hidden; background:radial-gradient(circle at 78% 20%,rgba(76,201,255,.3),transparent 22%),linear-gradient(135deg,#061a2a,#0d4567 58%,#102e50); }
.mini-gift-card { width:78%; aspect-ratio:1.6; display:flex; flex-direction:column; justify-content:space-between; padding:23px; color:#fff; border:1px dashed rgba(255,255,255,.6); border-radius:15px; background:linear-gradient(135deg,#0d65ad,#19a5d7); box-shadow:0 18px 35px rgba(19,101,159,.26); transform:rotate(-5deg); }
.mini-gift-card span { font-size:10px; font-weight:700; letter-spacing:.17em; }
.mini-gift-card strong { font:700 2.4rem 'Space Grotesk',sans-serif; }
.mini-gift-card small { max-width:170px; color:#d8f6ff; font-size:11px; }
.certificate-page-card-body { padding:23px; }
.certificate-page-card-body>span { color:var(--cert-blue); font:700 10px 'DM Sans',sans-serif; letter-spacing:.15em; }
.certificate-page-card-body h3 { margin:12px 0 0; color:var(--cert-ink); font:700 1.55rem 'Space Grotesk',sans-serif; }
.certificate-page-card-body p { margin:8px 0 0; color:var(--cert-muted); font-size:13px; }
.certificate-options { padding:105px 0 112px; background:#fff; }
.certificate-options-heading { margin-bottom:35px; text-align:center; }
.certificate-options-heading .certificate-page-kicker { justify-content:center; }
.certificate-options-list { display:grid; gap:10px; }
.certificate-option { display:flex; align-items:center; gap:16px; width:100%; min-height:78px; padding:14px 18px; color:var(--cert-ink); text-align:left; border:1px solid rgba(24,70,91,.13); border-radius:16px; background:#f7fbfc; cursor:pointer; transition:transform .25s ease,border-color .25s ease,background .25s ease; }
.certificate-option:hover { transform:translateX(6px); border-color:rgba(36,119,212,.38); background:#eaf3ff; }
.certificate-option-icon { display:grid; width:42px; height:42px; flex:0 0 auto; place-items:center; color:var(--cert-blue); border-radius:12px; background:#e8f2ff; }
.certificate-option-icon svg { width:21px; height:21px; }
.certificate-option>span:nth-child(2) { font:600 1rem 'Space Grotesk',sans-serif; }
.certificate-option b { margin-left:auto; color:var(--cert-blue); font-size:18px; }
.certificate-page-cta { padding:72px 0; color:#fff; background:linear-gradient(120deg,#0b3445,#061824); }
.certificate-page-cta h2 { color:#fff; }
.certificate-page-cta .certificate-page-kicker { color:var(--cert-aqua); }
@media (max-width:900px) { .certificate-page-hero-inner,.certificate-page-details-grid { grid-template-columns:1fr; } .certificate-page-art { max-width:650px; width:100%; margin:0 auto; } }
@media (max-width:700px) { .certificate-page-hero { min-height:0; } .certificate-page-hero-inner { align-items:start; padding-top:78px; padding-bottom:66px; } .certificate-page-hero h1 { font-size:3.1rem; } .certificate-page-art { min-height:280px; margin-top:15px; } .gift-card-preview { min-height:225px; padding:23px; } .certificate-page-details,.certificate-options { padding:76px 0; } .certificate-page-copy h2,.certificate-options-heading h2,.certificate-page-cta h2 { font-size:2.35rem; } .certificate-page-card-image { min-height:245px; } .mini-gift-card { width:84%; } .certificate-page-cta { padding:55px 0; } }
@media (prefers-reduced-motion:reduce) { .gift-card-preview { transform:none; } }