:root {
--color-bg:      #22345A;
--color-surface: #1B2A48;
--color-bg-soft: #2D4373;
--color-deep:    #0F1830;
--color-gold:    #C9A84C;
--color-gold-2:  #d8b95a;
--color-cream:   #F5F0E8;
--color-cream-dim: rgba(245, 240, 232, 0.62);
--color-accent:  #B11116;

--font-display: 'DM Serif Display', 'Playfair Display', Georgia, serif;
--font-serif:   'Playfair Display', Georgia, serif;
--font-script:  'Allura', 'Playfair Display', cursive;
--font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}


*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: var(--font-body);
font-weight: 300;
color: var(--color-cream);
background: var(--color-deep);
overflow-x: hidden;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
cursor: none;
}
@media (hover: none) { body { cursor: auto; } .custom-cursor { display: none; } }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: none; }
::selection { background: var(--color-gold); color: var(--color-bg); }


.custom-cursor {
position: fixed;
top: 0; left: 0;
width: 10px; height: 10px;
border-radius: 50%;
background: var(--color-gold);
pointer-events: none;
z-index: 9999;
transform: translate(-50%, -50%);
mix-blend-mode: difference;
transition: width 0.25s var(--ease-out-expo), height 0.25s var(--ease-out-expo);
}
.custom-cursor.grab {
width: 56px; height: 56px;
background: transparent;
border: 1px solid var(--color-gold);
}
.custom-cursor.grab::after {
content: 'drag';
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
font-family: var(--font-body);
font-size: 8px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--color-gold);
}


.pdf-modal {
position: fixed;
inset: 0;
z-index: 200;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition:
opacity 0.45s var(--ease-out-expo),
visibility 0.45s var(--ease-out-expo);
}
.pdf-modal.open {
opacity: 1;
visibility: visible;
}
.pdf-modal-backdrop {
position: absolute;
inset: 0;
background: rgba(8, 14, 28, 0.78);
backdrop-filter: blur(12px) saturate(140%);
-webkit-backdrop-filter: blur(12px) saturate(140%);
cursor: none;
}
.pdf-modal-panel {
position: relative;
width: min(1280px, 92vw);
height: min(900px, 90vh);
background: var(--color-surface);
border-radius: 14px;
overflow: hidden;
display: flex;
flex-direction: column;
box-shadow:
0 60px 140px -20px rgba(0, 0, 0, 0.7),
0 0 0 1px rgba(201, 168, 76, 0.18);
transform: translateY(24px) scale(0.96);
transition:
transform 0.55s var(--ease-out-expo);
will-change: transform;
}
.pdf-modal.open .pdf-modal-panel {
transform: translateY(0) scale(1);
}
.pdf-modal-bar {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 14px 22px;
background: linear-gradient(180deg, rgba(15, 24, 46, 0.95), rgba(15, 24, 46, 0.85));
border-bottom: 1px solid rgba(201, 168, 76, 0.16);
}
.pdf-modal-title {
font-family: var(--font-body);
font-size: 11px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--color-gold);
}
.pdf-modal-actions {
display: inline-flex;
gap: 10px;
}
.pdf-modal-btn {
width: 36px;
height: 36px;
border: 1px solid rgba(201, 168, 76, 0.32);
border-radius: 50%;
background: transparent;
color: var(--color-cream);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: none;
transition:
background 0.3s var(--ease-out-expo),
color 0.3s var(--ease-out-expo),
border-color 0.3s var(--ease-out-expo),
transform 0.3s var(--ease-out-expo);
}
.pdf-modal-btn:hover {
background: var(--color-gold);
color: var(--color-bg);
border-color: var(--color-gold);
transform: scale(1.08);
}
.pdf-modal-frame {
flex: 1 1 auto;
position: relative;
background: #1a1a1a;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.pdf-modal-viewer {
min-height: 100%;
padding: 18px;
display: grid;
gap: 16px;
place-content: start center;
}
.pdf-modal-loading,
.pdf-modal-error {
width: min(520px, 100%);
padding: 18px 16px;
border: 1px solid rgba(201, 168, 76, 0.18);
border-radius: 12px;
background: rgba(15, 24, 46, 0.55);
color: var(--color-cream);
font-size: 13px;
letter-spacing: 0.02em;
text-align: center;
}
.pdf-modal-error a {
color: var(--color-gold);
text-decoration: underline;
}
canvas.pdf-page {
display: block;
background: #fff;
border-radius: 10px;
box-shadow:
0 30px 90px -25px rgba(0, 0, 0, 0.7),
0 0 0 1px rgba(201, 168, 76, 0.14);
}


body.pdf-open {
overflow: hidden;
}


.page-nav {
position: fixed;
right: 22px;
top: 50%;
transform: translateY(-50%);
z-index: 80;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
padding: 14px 8px;
background: rgba(15, 24, 46, 0.65);
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
border: 1px solid rgba(201, 168, 76, 0.20);
border-radius: 999px;
opacity: 0;
transform: translateY(-50%) translateX(20px);
animation: pageNavIn 0.7s var(--ease-out-expo) 1.2s forwards;
}
@keyframes pageNavIn {
to { opacity: 1; transform: translateY(-50%) translateX(0); }
}
.page-nav-btn {
width: 42px;
height: 42px;
border: 1px solid rgba(201, 168, 76, 0.45);
border-radius: 50%;
background: transparent;
color: var(--color-gold);
cursor: none;
display: flex;
align-items: center;
justify-content: center;
transition:
background 0.35s var(--ease-out-expo),
color 0.35s var(--ease-out-expo),
transform 0.35s var(--ease-out-expo),
border-color 0.35s var(--ease-out-expo),
opacity 0.35s var(--ease-out-expo);
}
.page-nav-btn:hover:not([disabled]) {
background: var(--color-gold);
color: var(--color-bg);
border-color: var(--color-gold);
transform: scale(1.08);
}
.page-nav-btn[disabled] {
opacity: 0.28;
pointer-events: none;
}
.page-nav-counter {
font-family: var(--font-body);
font-size: 9px;
letter-spacing: 0.18em;
font-weight: 500;
color: var(--color-gold);
font-variant-numeric: tabular-nums;
padding: 2px 0;
user-select: none;
}


.scroll-progress {
position: fixed;
top: 0; left: 0;
width: 0%;
height: 2px;
background: var(--color-gold);
z-index: 1000;
box-shadow: 0 0 12px rgba(201, 168, 76, 0.6);
will-change: width;
}


.navbar {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 56px;
background: rgba(15, 24, 46, 0.78);
backdrop-filter: blur(18px) saturate(140%);
-webkit-backdrop-filter: blur(18px) saturate(140%);
border-bottom: 1px solid rgba(201, 168, 76, 0.18);
transition: padding 0.4s var(--ease-out-expo), background 0.4s var(--ease-out-expo);
}
.navbar.compact {
padding: 14px 56px;
background: rgba(10, 18, 38, 0.92);
}
.nav-logo {
display: inline-flex;
align-items: center;
transition: opacity 0.3s var(--ease-out-expo);
}
.nav-logo:hover { opacity: 0.85; }
.nav-logo-img {
height: 54px;
width: auto;
display: block;
filter: drop-shadow(0 4px 14px rgba(0,0,0,0.4));
}
.nav-cta {
display: inline-flex;
align-items: center;
gap: 12px;
font-size: 11px;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--color-gold);
padding: 12px 20px;
border: 1px solid rgba(201,168,76,0.4);
border-radius: 999px;
transition: background 0.3s var(--ease-out-expo), color 0.3s var(--ease-out-expo);
}
.nav-cta:hover { background: var(--color-gold); color: var(--color-bg); }


.hero {
position: relative;
height: 100vh;
min-height: 720px;
width: 100%;
overflow: hidden;
background:
radial-gradient(ellipse at 50% 45%, #2A4374 0%, #22345A 35%, #15223D 90%);
}

.hero-bg-pattern {
position: absolute;
inset: 0;
opacity: 0.55;
pointer-events: none;
}
.hero-bg-pattern svg { width: 100%; height: 100%; }


.hero-content {
position: absolute;
left: 8%;
top: 50%;

transform: translateY(calc(-50% + var(--hero-y, 0px)));
opacity: var(--hero-opacity, 1);
z-index: 3;
max-width: 540px;
will-change: transform, opacity;
}
.hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 14px;
font-size: 11px;
letter-spacing: 0.4em;
text-transform: uppercase;
color: var(--color-gold);
margin-bottom: 28px;
opacity: 0;
animation: fadeUp 1s var(--ease-out-expo) 0.2s forwards;
}
.hero-eyebrow::before {
content: '';
width: 36px; height: 1px;
background: var(--color-gold);
}
.hero h1 {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(56px, 7.5vw, 104px);
line-height: 0.96;
letter-spacing: -0.022em;
color: var(--color-cream);
margin-bottom: 28px;
opacity: 0;
animation: fadeUp 1.2s var(--ease-out-expo) 0.4s forwards;
}
.hero h1 .script {
display: block;
font-family: var(--font-script);
font-style: normal;
color: var(--color-gold);
font-size: 1.05em;
line-height: 0.8;
transform: translateX(40px);
margin-top: -6px;
}
.hero-sub {
font-size: 16px;
font-weight: 300;
letter-spacing: 0.04em;
line-height: 1.65;
color: var(--color-cream-dim);
max-width: 420px;
margin-bottom: 36px;
opacity: 0;
animation: fadeUp 1s var(--ease-out-expo) 0.7s forwards;
}
.hero-actions {
display: flex;
gap: 18px;
align-items: center;
opacity: 0;
animation: fadeUp 1s var(--ease-out-expo) 0.95s forwards;
}
.hero-actions .btn-primary {
display: inline-flex;
align-items: center;
gap: 14px;
padding: 18px 30px;
border-radius: 999px;
background: var(--color-gold);
color: var(--color-bg);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
transition: transform 0.4s var(--ease-out-expo), box-shadow 0.4s var(--ease-out-expo);
}
.hero-actions .btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 20px 40px -10px rgba(201, 168, 76, 0.5);
}
.hero-actions .btn-link {
font-size: 11px;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--color-cream-dim);
padding: 18px 8px;
transition: color 0.3s var(--ease-out-expo);
}
.hero-actions .btn-link:hover { color: var(--color-gold); }


.hero-viewer {
position: absolute;
right: 0;
top: 0;
width: 60%;
height: 100%;
z-index: 2;
}


.view-3d-overlay {
position: absolute;
inset: 0;
z-index: 6;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: 0;
padding: 0;
cursor: none;
font: inherit;
color: inherit;
transition: opacity 0.55s var(--ease-out-expo);
}
.view-3d-overlay::before {

content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at center, transparent 45%, rgba(11, 18, 36, 0.35) 100%);
pointer-events: none;
transition: opacity 0.55s var(--ease-out-expo);
}
.view-3d-pill {
position: relative;
display: inline-flex;
align-items: center;
gap: 12px;
padding: 14px 26px;
border: 1px solid rgba(201, 168, 76, 0.55);
border-radius: 999px;
background: rgba(15, 24, 46, 0.65);
backdrop-filter: blur(10px) saturate(140%);
-webkit-backdrop-filter: blur(10px) saturate(140%);
color: var(--color-cream);
font-family: var(--font-body);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.32em;
text-transform: uppercase;
opacity: 0.78;
transform: scale(0.96);
transition:
opacity 0.45s var(--ease-out-expo),
transform 0.45s var(--ease-out-expo),
background 0.45s var(--ease-out-expo),
color 0.45s var(--ease-out-expo),
border-color 0.45s var(--ease-out-expo),
box-shadow 0.45s var(--ease-out-expo);
animation: pillPulse 3.4s ease-in-out infinite;
will-change: transform, opacity;
}
.view-3d-overlay:hover .view-3d-pill {
opacity: 1;
transform: scale(1.06);
background: var(--color-gold);
color: var(--color-bg);
border-color: var(--color-gold);
box-shadow: 0 14px 30px -8px rgba(201, 168, 76, 0.55);
animation-play-state: paused;
}
@keyframes pillPulse {
0%, 100% { transform: scale(0.96); }
50%      { transform: scale(1.02); }
}

.view-3d-overlay.dismissed {
opacity: 0;
pointer-events: none;
}


.hero-corner {
position: absolute;
z-index: 4;
font-size: 10px;
letter-spacing: 0.35em;
text-transform: uppercase;
color: var(--color-gold);
}
.hero-corner.tr { top: 110px; right: 56px; }
.hero-corner.bl {
bottom: 50px; left: 56px;
display: flex; align-items: center; gap: 12px;
color: var(--color-cream-dim);
}
.hero-corner.bl::before {
content: ''; width: 26px; height: 1px;
background: var(--color-cream-dim);
}
.hero-corner.br {
bottom: 50px; right: 56px;
display: flex; align-items: center; gap: 12px;
color: var(--color-gold);
}
.hero-corner.br::after {
content: ''; width: 26px; height: 1px;
background: var(--color-gold);
}

@keyframes fadeUp {
from { opacity: 0; transform: translateY(28px); }
to   { opacity: 1; transform: translateY(0); }
}


.t-scene {
position: relative;
height: 100vh;
min-height: 700px;
width: 100%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}

.t-scene[data-bg="white"]    { background: linear-gradient(180deg, #FFFFFF 0%, #F5F0E8 100%); }
.t-scene[data-bg="navy"]     { background: radial-gradient(ellipse at 30% 40%, #2D4373 0%, #1B2A48 60%, #0F1830 100%); }
.t-scene[data-bg="gold"]     { background: radial-gradient(ellipse at 50% 50%, #3D3528 0%, #1F1A11 80%); }
.t-scene[data-bg="charcoal"] { background: linear-gradient(180deg, #2D2D35 0%, #15151A 100%); }
.t-scene[data-bg="navy-deep"]{ background: radial-gradient(ellipse at 70% 50%, #22345A 0%, #0A1428 80%); }


.t-scene { --p: 0.5; --b: 0.5; }


.t-viewer {
position: absolute;
inset: 0;
z-index: 1;
cursor: none;
}


.t-image-wrap {
position: relative;
z-index: 2;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 32px 24px;
will-change: transform;
}
.t-image {
max-width: min(90%, 1100px);
max-height: 94%;
width: auto;
height: auto;
object-fit: contain;
filter:
drop-shadow(0 40px 60px rgba(0,0,0,0.50))
drop-shadow(0 14px 28px rgba(0,0,0,0.30));
transition:
transform 0.7s var(--ease-out-expo),
filter 0.7s var(--ease-out-expo);
animation: floatProduct 7s ease-in-out infinite;
}
.t-image:hover {
transform: scale(1.03) translateY(-8px);
filter:
drop-shadow(0 50px 70px rgba(0,0,0,0.60))
drop-shadow(0 16px 32px rgba(0,0,0,0.35));
}
@keyframes floatProduct {
0%, 100% { transform: translateY(0); }
50%      { transform: translateY(-12px); }
}


.t-image-placeholder {
width: min(90%, 1100px);
max-height: 94%;
aspect-ratio: 3 / 4;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
border: 1px dashed rgba(201, 168, 76, 0.4);
border-radius: 6px;
background: rgba(201, 168, 76, 0.05);
color: var(--color-cream-dim);
font-size: 11px;
letter-spacing: 0.25em;
text-transform: uppercase;
text-align: center;
padding: 24px;
}
.t-scene[data-bg="white"] .t-image-placeholder,
.t-scene[data-bg="cream"] .t-image-placeholder {
border-color: rgba(34, 52, 90, 0.3);
background: rgba(34, 52, 90, 0.04);
color: rgba(34, 52, 90, 0.55);
}
.t-viewer canvas,
.hero-viewer canvas {
display: block;
width: 100% !important;
height: 100% !important;
cursor: none;
}


.t-num {
position: absolute;
top: 8%;
left: 6%;
font-family: var(--font-display);
font-style: italic;
font-size: clamp(80px, 14vw, 220px);
line-height: 0.85;
color: transparent;
-webkit-text-stroke: 1.4px rgba(201, 168, 76, 0.32);
pointer-events: none;
user-select: none;
z-index: 3;
transform: translateY(calc((1 - var(--p, 0.5)) * 120px));
opacity: calc(var(--p, 0.5) * 1.4 - 0.05);
will-change: transform, opacity;
}
.t-scene[data-bg="white"] .t-num {
-webkit-text-stroke: 1.4px rgba(34, 52, 90, 0.28);
}


.t-accent {
position: absolute;
bottom: 14%;
right: 8%;
font-family: var(--font-script);
font-size: clamp(80px, 10vw, 160px);
line-height: 0.85;
color: var(--color-gold);
pointer-events: none;
user-select: none;
z-index: 3;
transform: rotate(-6deg) translateX(calc((1 - var(--b, 0.5)) * 120px));
opacity: calc(var(--b, 0.5) * 0.75);
will-change: transform, opacity;
}
.t-scene[data-bg="white"] .t-accent {
color: var(--color-gold);
opacity: 0.55;
}
.t-scene[data-bg="gold"] .t-accent {
color: #d8b95a;
opacity: 0.4;
}


.t-hint {
position: absolute;
bottom: 50px;
left: 50%;
transform: translateX(-50%);
z-index: 4;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 18px;
border: 1px solid rgba(201,168,76,0.4);
border-radius: 999px;
color: var(--color-gold);
font-size: 10px;
letter-spacing: 0.3em;
text-transform: uppercase;
opacity: 0;
animation: fadeIn 0.6s var(--ease-out-expo) 0.6s forwards;
pointer-events: none;
}
.t-scene[data-bg="white"] .t-hint {
border-color: rgba(34,52,90,0.3);
color: var(--color-bg);
}
.t-hint svg {
width: 14px; height: 14px;
animation: rotateHint 4s linear infinite;
}
@keyframes fadeIn { to { opacity: 1; } }
@keyframes rotateHint {
from { transform: rotate(0deg); }
to   { transform: rotate(360deg); }
}


.chapter {
--p: 0.5;
--b: 0.5;
position: relative;
min-height: 55vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
padding: 80px 56px;
overflow: hidden;
background:
radial-gradient(ellipse at 50% 50%, #2A4374 0%, #15223D 80%);
border-top: 1px solid rgba(201, 168, 76, 0.18);
border-bottom: 1px solid rgba(201, 168, 76, 0.18);
}
.chapter[data-bg="cream"] {
background: linear-gradient(180deg, #FFFFFF 0%, #F5F0E8 100%);
color: var(--color-bg);
}
.chapter[data-bg="burgundy"] {
background: radial-gradient(ellipse at 50% 50%, #4a1116 0%, #2a070a 80%);
}
.chapter[data-bg="charcoal"] {
background: radial-gradient(ellipse at 50% 50%, #2D2D35 0%, #15151A 80%);
}
.chapter-eyebrow {
font-size: 11px;
letter-spacing: 0.45em;
text-transform: uppercase;
color: var(--color-gold);
display: inline-flex;
align-items: center;
gap: 14px;
opacity: calc(var(--b, 0.5) * 1.5);
transform: translateY(calc((1 - var(--b, 0.5)) * 24px));
will-change: transform, opacity;
}
.chapter-eyebrow::before,
.chapter-eyebrow::after {
content: '';
width: 40px; height: 1px;
background: var(--color-gold);
}
.chapter-title {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(72px, 12vw, 180px);
line-height: 0.9;
letter-spacing: -0.025em;
color: inherit;
text-align: center;

transform: scale(calc(0.78 + var(--b, 0.5) * 0.26));
opacity: calc(var(--b, 0.5) * 1.5 + 0.15);
will-change: transform, opacity;
}
.chapter-script {
font-family: var(--font-script);
font-size: clamp(56px, 7vw, 110px);
line-height: 0.9;
color: var(--color-gold);
margin-top: -12px;
transform: rotate(-6deg) translateY(calc((1 - var(--b, 0.5)) * 38px));
opacity: calc(var(--b, 0.5) * 1.3);
will-change: transform, opacity;
}
.chapter-meta {
margin-top: 18px;
font-size: 11px;
letter-spacing: 0.35em;
text-transform: uppercase;
color: rgba(245,240,232,0.55);
opacity: calc(var(--b, 0.5) * 1.4);
transform: translateY(calc((1 - var(--b, 0.5)) * 20px));
will-change: transform, opacity;
}
.chapter[data-bg="cream"] .chapter-meta {
color: rgba(34,52,90,0.55);
}


.chapter::before {
content: attr(data-num);
position: absolute;
font-family: var(--font-display);
font-style: italic;
font-size: 40vw;
line-height: 0.78;
color: transparent;
-webkit-text-stroke: 1.4px rgba(201, 168, 76, 0.10);
pointer-events: none;
user-select: none;
top: -10%;
left: 50%;
transform: translateX(-50%) translateY(calc((1 - var(--p, 0.5)) * 140px));
opacity: calc(var(--b, 0.5) * 1.4 + 0.05);
z-index: 0;
will-change: transform, opacity;
}
.chapter[data-bg="cream"]::before {
-webkit-text-stroke: 1.4px rgba(34, 52, 90, 0.10);
}
.chapter > * { position: relative; z-index: 1; }


.cta-final {
position: relative;
height: 80vh;
display: flex;
align-items: center;
justify-content: center;
gap: 80px;
background: radial-gradient(ellipse at center, #2A4374 0%, #15223D 90%);
overflow: hidden;
}
.cta-orb {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
width: 220px;
height: 220px;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%, var(--color-gold-2), var(--color-gold) 50%, #8a6e2c 100%);
color: var(--color-bg);
font-family: var(--font-display);
font-style: italic;
font-size: 26px;
line-height: 1.05;
letter-spacing: -0.01em;
padding: 0 24px;
box-shadow:
0 30px 80px -10px rgba(201, 168, 76, 0.55),
inset 0 3px 8px rgba(255,255,255,0.35);
transition: transform 0.5s var(--ease-out-expo), box-shadow 0.5s var(--ease-out-expo);
}
.cta-orb:hover {
transform: scale(1.08);
box-shadow:
0 40px 100px -10px rgba(201, 168, 76, 0.7),
inset 0 3px 8px rgba(255,255,255,0.4);
}
.cta-orb::after {
content: '';
position: absolute;
inset: -22px;
border: 1px solid rgba(201,168,76,0.25);
border-radius: 50%;
animation: orbitRing 6s ease-in-out infinite;
}


.cta-orb.secondary {
background: transparent;
color: var(--color-cream);
border: 1.5px solid var(--color-gold);
box-shadow:
0 30px 80px -10px rgba(0, 0, 0, 0.5),
inset 0 0 0 0 rgba(201, 168, 76, 0);
}
.cta-orb.secondary:hover {
transform: scale(1.08);
background: rgba(201, 168, 76, 0.10);
color: var(--color-gold);
box-shadow:
0 40px 100px -10px rgba(201, 168, 76, 0.35),
inset 0 0 0 0 rgba(201, 168, 76, 0);
}
.cta-orb.secondary::after {
border-color: rgba(245, 240, 232, 0.18);
}

@keyframes orbitRing {
0%, 100% { transform: scale(1); opacity: 1; }
50%      { transform: scale(1.15); opacity: 0.3; }
}


footer {
padding: 28px 56px;
border-top: 1px solid rgba(245,240,232,0.06);
background: var(--color-surface);
display: flex;
justify-content: space-between;
align-items: center;
font-size: 10px;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--color-cream-dim);
}
footer .gold { color: var(--color-gold); }


@media (max-width: 900px) {
.navbar { padding: 14px 20px; }
.navbar.compact { padding: 12px 20px; }
.nav-logo-img { height: 40px; }
.nav-cta { display: none; }


.page-nav {
right: 12px;
gap: 10px;
padding: 10px 6px;
}
.page-nav-btn { width: 36px; height: 36px; }
.page-nav-btn svg { width: 14px; height: 14px; }
.page-nav-counter { font-size: 8px; letter-spacing: 0.14em; }


.view-3d-pill { padding: 10px 18px; font-size: 10px; letter-spacing: 0.25em; }


.pdf-modal-panel { width: 100vw; height: calc(var(--app-vh, 1vh) * 100); max-width: none; max-height: none; border-radius: 0; }
.pdf-modal-bar   { padding: calc(12px + env(safe-area-inset-top)) 16px 12px; }
.pdf-modal-title { font-size: 10px; letter-spacing: 0.20em; }
.pdf-modal-btn   { width: 32px; height: 32px; }
.pdf-modal-viewer { padding: 14px 12px calc(14px + env(safe-area-inset-bottom)); }

.hero { height: auto; min-height: 100vh; }
.hero-content {
position: relative;
left: auto; top: auto; transform: none;
max-width: 100%;
padding: 120px 24px 0;
}
.hero-viewer {
position: relative;
right: auto; top: auto;
width: 100%;
height: 60vh;
}
.hero-corner.tr, .hero-corner.bl, .hero-corner.br { display: none; }

.t-scene { min-height: 600px; }
.t-num { font-size: 80px; top: 4%; left: 4%; }
.t-accent { font-size: 56px; bottom: 6%; right: 4%; }

.cta-final { height: auto; min-height: 70vh; flex-direction: column; gap: 36px; padding: 60px 20px; }
.cta-orb { width: 170px; height: 170px; font-size: 19px; }

footer { padding: 22px 20px; flex-direction: column; gap: 10px; text-align: center; }
}