/* ============================================================
   Aureo.io — "Áureo Lúmen Kinetic" design system
   ============================================================ */
@property --angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

:root {
    --golden-ratio: 1.618;
    --gold: #FFD700; --gold-dark: #FFC107; --gold-champagne: #FBE7B2; --gold-light: #FFF59D;
    --gold-amber: #E0A92E; --gold-deep: #A9781B; --gold-ember: #6E4C12;
    --gold-glow: rgba(240, 170, 40, .40); --gold-line: rgba(255, 215, 0, .18); --gold-12: rgba(255, 215, 0, .12);
    --bg: #050505; --bg-raise: #0B0B0D; --ink-glass: rgba(8, 7, 3, .66); --ink: #0A0A0A;
    --text-hi: #F5F3EC; --text-mid: #A8A29A;
    --node-trigger: #FFC107; --node-logic: #7AA2FF; --node-ai: #B98CFF; --node-action: #5FD08A;
    --danger: #F87171; --grain: rgba(255, 235, 170, .025);
    --ease-aureo: cubic-bezier(.22, 1, .36, 1); --ease-io: cubic-bezier(.83, 0, .17, 1);
    --mx: 50%; --my: 24%;
}

* { -webkit-tap-highlight-color: transparent; }

html, body { background: var(--bg); }

body {
    color: var(--text-hi);
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .font-display { font-family: 'Sora', sans-serif; }
h1, h2, h3 { letter-spacing: -0.02em; line-height: 1.06; }

::selection { background: rgba(255, 215, 0, .25); color: #fff; }

/* Type scale — golden ratio */
.t-h1 { font-size: clamp(2.6rem, 6vw, 4.236rem); }
.t-h2 { font-size: clamp(2rem, 4vw, 2.618rem); }
.t-h3 { font-size: 1.618rem; }
.t-lead { font-size: 1.25rem; }
.tnum { font-feature-settings: 'tnum' 1; font-variant-numeric: tabular-nums; }

.eyebrow {
    font-family: 'Sora', sans-serif; font-weight: 600; font-size: .75rem;
    letter-spacing: .16em; text-transform: uppercase; color: var(--gold);
    display: inline-flex; align-items: center; gap: .5rem;
}
.eyebrow::before { content: ''; width: 1.4rem; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }

.text-mid { color: var(--text-mid); }

/* Golden-ratio underline under section headings */
.gr-underline { position: relative; display: inline-block; }
.gr-underline::after {
    content: ''; position: absolute; left: 0; bottom: -.55rem; height: 2px; width: 61.8%;
    background: linear-gradient(90deg, var(--gold), var(--gold-champagne));
    transform: scaleX(0); transform-origin: 0 50%; transition: transform .7s var(--ease-aureo) .15s;
}
.in .gr-underline::after, .gr-underline.in::after { transform: scaleX(1); }

/* ---- Gold gradient text ---- */
.gold-gradient-text {
    background: linear-gradient(135deg, var(--gold-champagne), var(--gold) 45%, var(--gold-amber));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* ---- Glass ---- */
.glass {
    position: relative; isolation: isolate;
    background: linear-gradient(180deg, rgba(11, 11, 13, .78), rgba(5, 5, 5, .82));
    backdrop-filter: blur(12px) saturate(115%); -webkit-backdrop-filter: blur(12px) saturate(115%);
    border: 1px solid var(--gold-line);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
/* cursor spotlight pooling on card surface */
.glass::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
    opacity: 0; transition: opacity .4s var(--ease-aureo);
    background: radial-gradient(240px circle at var(--cx, 50%) var(--cy, 50%), rgba(255, 215, 0, .10), transparent 62%);
}
.glass:hover::after { opacity: 1; }

/* animated conic gradient border */
.sweep::before {
    content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 2;
    background: conic-gradient(from var(--angle), transparent 0 70%, var(--gold) 84%, var(--gold-champagne) 90%, transparent 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
    opacity: 0; transition: opacity .4s var(--ease-aureo);
}
.sweep:hover::before { opacity: 1; animation: angle-spin 1.2s var(--ease-aureo); }
.sweep.featured::before { opacity: .85; animation: angle-spin 6s linear infinite; }
@keyframes angle-spin { to { --angle: 360deg; } }

/* ---- Beveled gold metal ---- */
.gold-metal {
    position: relative; overflow: hidden; color: var(--ink);
    background: linear-gradient(145deg, #FBE7B2 0%, #FFD700 34%, #E0A92E 64%, #A9781B 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(110, 76, 18, .6), 0 8px 24px -8px var(--gold-glow);
}
.gold-metal::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(120% 90% at 22% 14%, rgba(255, 255, 255, .5), transparent 55%);
}

/* ---- Icons ---- */
.ic {
    display: inline-block; width: 1.5rem; height: 1.5rem; flex: none;
    stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
    color: var(--gold); overflow: visible;
    transition: filter .12s var(--ease-aureo), stroke-width .12s var(--ease-aureo);
}
.ic.eng { color: var(--ink); }
.ic.grad { stroke: url(#auGold); }
.ic.fill { fill: currentColor; stroke: none; }
.ic-glow { filter: drop-shadow(0 0 5px var(--gold-glow)); }
a:hover > .ic, button:hover > .ic, .ic-hover:hover .ic { filter: drop-shadow(0 0 6px var(--gold-glow)); stroke-width: 2; }

/* self-drawing — only when motion enabled (no traps for no-JS / reduced motion) */
html.motion .ic-draw { stroke-dasharray: 100; stroke-dashoffset: 100; }
html.motion .ic-draw.in { animation: drawIn .9s var(--ease-aureo) forwards; }
@keyframes drawIn { to { stroke-dashoffset: 0; } }

/* ---- Reveal engine (CSS-driven; visible by default => never stranded) ---- */
html.motion [data-reveal] {
    opacity: 0; transform: translateY(16px) scale(.985);
    transition: opacity .62s var(--ease-aureo), transform .62s var(--ease-aureo);
    will-change: opacity, transform;
}
html.motion [data-reveal].in { opacity: 1; transform: none; }

/* ---- Decorative background layers ---- */
.golden-spiral {
    position: fixed; inset: 0; z-index: 0; opacity: .04; pointer-events: none;
    background-image:
        radial-gradient(circle at 61.8% 38.2%, var(--gold) 0%, transparent 45%),
        radial-gradient(circle at 38.2% 61.8%, var(--gold-amber) 0%, transparent 45%);
}
#spotlight {
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background: radial-gradient(620px circle at var(--mx) var(--my), rgba(255, 215, 0, .06), transparent 60%);
}
html:not(.motion) #spotlight { background: radial-gradient(900px circle at 50% 18%, rgba(255, 215, 0, .05), transparent 60%); }
#grain {
    position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .35; mix-blend-mode: soft-light;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}

/* particles */
#particles-container { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.particle { position: fixed; border-radius: 50%; pointer-events: none; opacity: 0; animation: floatUp linear infinite; }
@keyframes floatUp {
    0% { transform: translateY(0) rotate(0); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateY(-106vh) rotate(360deg); opacity: 0; }
}

/* scroll progress + content stacking */
#progress {
    position: fixed; top: 0; left: 0; height: 2px; width: 100%; z-index: 60; transform: scaleX(0); transform-origin: 0 50%;
    background: linear-gradient(90deg, var(--gold-deep), var(--gold), var(--gold-champagne));
}
main, footer { position: relative; z-index: 10; }

/* ---- Buttons ---- */
.btn-gold {
    position: relative; overflow: hidden; color: var(--ink); font-weight: 600;
    background: linear-gradient(145deg, #FBE7B2 0%, #FFD700 34%, #E0A92E 64%, #A9781B 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(110, 76, 18, .6), 0 8px 24px -8px var(--gold-glow);
    transition: transform .09s var(--ease-aureo), box-shadow .3s var(--ease-aureo);
}
.btn-gold:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(110, 76, 18, .6), 0 12px 34px -8px var(--gold-glow); }
.btn-gold:active { transform: scale(.97); }
.btn-gold .shine {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
    transform: translateX(-130%) skewX(-20deg);
}
html.motion .btn-gold:hover .shine { animation: shineSweep .8s var(--ease-aureo); }
@keyframes shineSweep { to { transform: translateX(130%) skewX(-20deg); } }

.btn-ghost {
    position: relative; border: 1px solid var(--gold-line); color: var(--text-hi);
    background: rgba(255, 255, 255, .02); transition: border-color .3s, background .3s, transform .09s;
}
.btn-ghost:hover { border-color: var(--gold); background: var(--gold-12); }
.btn-ghost:active { transform: scale(.97); }

:where(a, button, input, select, textarea):focus-visible {
    outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 6px;
}

/* ---- Header / nav ---- */
#header { background: var(--ink-glass); backdrop-filter: blur(10px); transition: background .3s, box-shadow .3s; }
#header.scrolled { background: rgba(5, 5, 5, .86); box-shadow: 0 1px 0 var(--gold-line); }
.nav-link { position: relative; color: var(--text-mid); transition: color .25s; }
.nav-link:hover, .nav-link.active { color: var(--gold); }
.nav-link::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--gold);
    transform: scaleX(0); transform-origin: 50%; transition: transform .3s var(--ease-aureo);
}
.nav-link.active::after { transform: scaleX(1); }

/* ---- Orbital system (kept, leveled up) ---- */
.orbital-system { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; perspective: 1100px; transition: transform .25s var(--ease-aureo); }
.orbit { position: absolute; top: 50%; left: 50%; border-radius: 50%; border: 1px dashed rgba(110, 76, 18, .55); }
.orbit-item {
    position: absolute; width: 3.1rem; height: 3.1rem; display: flex; align-items: center; justify-content: center;
    border-radius: .8rem; cursor: pointer; background: rgba(8, 7, 3, .72); backdrop-filter: blur(8px);
    border: 1px solid var(--gold-line); box-shadow: 0 0 22px rgba(255, 215, 0, .14), inset 0 1px 0 rgba(255, 255, 255, .05);
    transition: transform .3s var(--ease-aureo), border-color .3s, box-shadow .3s;
}
.orbit-item .ic { width: 1.5rem; height: 1.5rem; }
.orbit-item:hover { transform: scale(1.18); border-color: rgba(255, 215, 0, .7); box-shadow: 0 0 34px rgba(255, 215, 0, .5); z-index: 20; }
.orbit-item .tip {
    position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px);
    white-space: nowrap; font-size: .7rem; font-weight: 600; padding: .25rem .6rem; border-radius: 999px;
    background: rgba(5, 5, 5, .92); border: 1px solid var(--gold-line); color: var(--gold);
    opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s;
}
.orbit-item:hover .tip { opacity: 1; transform: translateX(-50%) translateY(0); }

@keyframes orbitRotate { to { transform: rotateZ(360deg); } }
@keyframes orbitRotateRev { to { transform: rotateZ(-360deg); } }
@keyframes itemCounter { to { transform: rotateZ(-360deg); } }
@keyframes itemCounterRev { to { transform: rotateZ(360deg); } }
@keyframes itemFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } }
html.motion .orbit-1 { animation: orbitRotate 26s linear infinite; }
html.motion .orbit-2 { animation: orbitRotateRev 34s linear infinite; }
html.motion .orbit-3 { animation: orbitRotate 46s linear infinite; }
html.motion .orbit-1 .orbit-item { animation: itemCounter 26s linear infinite, itemFloat 3.4s ease-in-out infinite; }
html.motion .orbit-2 .orbit-item { animation: itemCounterRev 34s linear infinite, itemFloat 4.2s ease-in-out infinite; }
html.motion .orbit-3 .orbit-item { animation: itemCounter 46s linear infinite, itemFloat 5s ease-in-out infinite; }
/* pause orbital animations when the hero is off-screen (perf) */
html.motion .orbital-system.anim-off .orbit,
html.motion .orbital-system.anim-off .orbit-item { animation-play-state: paused; }

.orbit-1 { width: 210px; height: 210px; margin: -105px 0 0 -105px; }
.orbit-2 { width: 320px; height: 320px; margin: -160px 0 0 -160px; }
.orbit-3 { width: 440px; height: 440px; margin: -220px 0 0 -220px; }
.op-t { top: -1.55rem; left: calc(50% - 1.55rem); }
.op-r { top: calc(50% - 1.55rem); right: -1.55rem; }
.op-b { bottom: -1.55rem; left: calc(50% - 1.55rem); }
.op-l { top: calc(50% - 1.55rem); left: -1.55rem; }
.op-tl { top: 12%; left: 12%; } .op-tr { top: 12%; right: 12%; }
.op-bl { bottom: 12%; left: 12%; } .op-br { bottom: 12%; right: 12%; }

@keyframes coreGlow {
    0%, 100% { box-shadow: 0 0 30px rgba(255, 215, 0, .55), 0 0 70px rgba(255, 215, 0, .3); }
    50% { box-shadow: 0 0 44px rgba(255, 215, 0, .75), 0 0 110px rgba(255, 215, 0, .4); }
}
html.motion .ai-core { animation: coreGlow 3.4s ease-in-out infinite; }
.core-spiral { position: absolute; inset: -90px; opacity: .5; pointer-events: none; }
.core-spiral path { stroke: var(--gold); stroke-width: 1; fill: none; opacity: .5; }
html.motion .core-spiral path { stroke-dasharray: 100; stroke-dashoffset: 100; animation: drawIn 2.4s var(--ease-aureo) forwards .4s; }

@media (max-width: 768px) {
    .orbit-1 { width: 150px; height: 150px; margin: -75px 0 0 -75px; }
    .orbit-2 { width: 220px; height: 220px; margin: -110px 0 0 -110px; }
    .orbit-3 { width: 290px; height: 290px; margin: -145px 0 0 -145px; }
    .orbit-item { width: 2.5rem; height: 2.5rem; }
    .orbit-item .ic { width: 1.2rem; height: 1.2rem; }
}

/* ---- Workflow ---- */
.wf-stage { position: relative; height: 236px; }
.wf-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 1; pointer-events: none; }
.wf-node {
    position: absolute; min-width: 150px; padding: .8rem 1rem; border-radius: 14px; z-index: 2;
    background: rgba(8, 7, 3, .9); backdrop-filter: blur(10px); border: 1px solid var(--gold-line);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); transition: transform .35s var(--ease-aureo), border-color .35s, box-shadow .35s;
    --nc: var(--gold);
}
.wf-node::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 3px; background: var(--nc); opacity: .85; }
.wf-node.active { border-color: var(--nc); transform: scale(1.04); box-shadow: 0 0 0 1px var(--nc), 0 12px 34px -10px var(--nc); z-index: 5; }
.wf-conn { stroke: var(--gold-ember); stroke-width: 2; fill: none; stroke-dasharray: 6 6; }
html.motion .wf-conn { animation: dash 22s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -200; } }
.wf-port { position: absolute; width: 9px; height: 9px; background: var(--nc); border-radius: 50%; top: 50%; transform: translateY(-50%); box-shadow: 0 0 8px var(--nc); }
.wf-port.in { left: -4px; } .wf-port.out { right: -4px; }
.pill { display: inline-flex; align-items: center; gap: .35rem; font-size: .72rem; font-weight: 600; padding: .2rem .6rem; border-radius: 999px; }

.wf-ctrl { width: 2.4rem; height: 2.4rem; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--gold-line); background: var(--gold-12); color: var(--gold); transition: background .2s, border-color .2s; }
.wf-ctrl:hover { background: rgba(255, 215, 0, .18); border-color: var(--gold); }
.wf-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 215, 0, .25); transition: background .25s, transform .25s; }
.wf-dot.on { background: var(--gold); transform: scale(1.35); }

@media (max-width: 900px) { .wf-canvas-desktop { display: none; } }
@media (min-width: 901px) { .wf-canvas-mobile { display: none; } }

/* ---- WhatsApp ---- */
.wa-chat { background: #0b141a; border-radius: 1rem; overflow: hidden; box-shadow: 0 14px 40px -12px rgba(0, 0, 0, .7); border: 1px solid rgba(255, 215, 0, .1); }
.wa-head { background: #202c33; padding: .9rem 1rem; display: flex; align-items: center; gap: .75rem; }
.wa-body { padding: 1rem; height: 320px; overflow-y: auto; scroll-behavior: smooth;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23222e35' fill-opacity='0.06'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E"); }
.wa-msg { max-width: 78%; margin-bottom: .5rem; padding: .5rem .75rem; border-radius: .6rem; font-size: .9rem; line-height: 1.45; position: relative; }
.wa-msg.user { background: #005c4b; margin-left: auto; border-bottom-right-radius: .15rem; }
.wa-msg.bot { background: #202c33; border-bottom-left-radius: .15rem; }
.wa-time { font-size: .6rem; color: #8696a0; margin-top: .25rem; text-align: right; }
html.motion .wa-enter { animation: msgIn .32s var(--ease-aureo) both; }
@keyframes msgIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.wa-typing { display: inline-flex; gap: 4px; padding: .6rem .8rem; }
.wa-typing i { width: 7px; height: 7px; border-radius: 50%; background: #8696a0; animation: dotp 1.3s ease-in-out infinite; }
.wa-typing i:nth-child(2) { animation-delay: .2s; } .wa-typing i:nth-child(3) { animation-delay: .4s; }
@keyframes dotp { 0%, 60%, 100% { transform: scale(.7); opacity: .5; } 30% { transform: scale(1.1); opacity: 1; } }
.wa-plan { background: rgba(0, 0, 0, .25); border: 1px solid rgba(255, 255, 255, .08); border-radius: .5rem; padding: .5rem .6rem; margin-top: .4rem; }
.mono { font-family: ui-monospace, 'SF Mono', Menlo, monospace; }

.webhook-step { position: relative; }
.wh-line { position: absolute; left: 50%; top: 100%; width: 2px; height: 2rem; background: linear-gradient(var(--gold-ember), transparent); }
.wh-marker.lit { box-shadow: 0 0 0 4px rgba(255, 215, 0, .18), 0 8px 24px -8px var(--gold-glow); }
#wh-packet { position: absolute; top: 36px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px var(--gold); opacity: 0; pointer-events: none; }

/* ---- Knowledge ---- */
.knowledge-visual { position: relative; height: 460px; display: flex; align-items: center; justify-content: center;
    background: radial-gradient(ellipse at center, rgba(255, 215, 0, .08) 0%, transparent 70%); }
.data-node { position: absolute; width: 58px; height: 58px; display: grid; place-items: center; border-radius: .75rem;
    background: rgba(8, 7, 3, .82); border: 1px solid var(--gold-line); cursor: pointer; transition: transform .3s, border-color .3s, box-shadow .3s; }
html.motion .data-node { animation: nodeFloat 6s ease-in-out infinite; }
html.motion .knowledge-visual.anim-off .data-node { animation-play-state: paused; }
@keyframes nodeFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -16px; } }
.data-node:hover { transform: scale(1.18); border-color: var(--gold); box-shadow: 0 0 28px rgba(255, 215, 0, .5); z-index: 10; }
.data-node.dim { opacity: .25; }
.search-suggestions { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: rgba(5, 5, 5, .95);
    border: 1px solid var(--gold-line); border-radius: .75rem; overflow: hidden; opacity: 0; transform: translateY(-8px);
    transition: all .3s var(--ease-aureo); pointer-events: none; z-index: 30; }
.search-suggestions.active { opacity: 1; transform: none; pointer-events: auto; }
.suggestion-item { padding: .8rem 1rem; border-bottom: 1px solid rgba(255, 215, 0, .08); cursor: pointer; transition: background .2s, padding .2s; }
.suggestion-item:hover, .suggestion-item.kbd { background: var(--gold-12); padding-left: 1.4rem; }
.pipe-step .cap { opacity: 0; transform: translateY(4px); transition: all .3s var(--ease-aureo); }
.pipe-step:hover .cap, .pipe-step:focus-visible .cap { opacity: 1; transform: none; }
.pipe-step:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 12px; }

/* form */
.field { position: relative; }
.form-input { background: rgba(0, 0, 0, .5); border: 1px solid var(--gold-line); backdrop-filter: blur(8px); transition: border-color .3s, box-shadow .3s; color: var(--text-hi); }
.form-input::placeholder { color: #6b6760; }
.form-input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(255, 215, 0, .12); }
.form-input.invalid { border-color: var(--danger); }
.form-input.valid { border-color: rgba(95, 208, 138, .6); }
.form-label { color: var(--gold); font-size: .8125rem; font-weight: 600; margin-bottom: .4rem; display: block; }
.field-mark { position: absolute; right: .85rem; top: 2.35rem; opacity: 0; transition: opacity .2s; }
.field-mark.show { opacity: 1; }

/* marquee (seamless infinite — two identical halves, translate exactly -50%) */
.marquee { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
.marquee-track { display: flex; flex-wrap: nowrap; width: max-content; will-change: transform; }
html.motion .marquee-track { animation: marquee 34s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-logo {
    flex: none; padding: 0 2.25rem; font-family: 'Sora', sans-serif; font-weight: 700; font-size: 1.35rem;
    letter-spacing: .02em; white-space: nowrap; color: var(--text-mid); opacity: .5;
    transition: opacity .3s var(--ease-aureo), color .3s var(--ease-aureo); display: inline-flex; align-items: center; gap: .55rem;
}
.marquee-logo:hover { opacity: 1; color: var(--gold); }
.marquee-logo .lo-mark { width: 1.5rem; height: 1.5rem; flex: none; }

.divider { height: 1px; background: linear-gradient(90deg, transparent, var(--gold-ember), transparent); }

/* helpers (not generated by Tailwind play CDN) */
.bg-gold-12 { background: var(--gold-12); }
.tilt { transition: transform .25s var(--ease-aureo); transform-style: preserve-3d; }
.sol-tab { color: var(--text-mid); transition: color .2s, background .2s; }
.sol-tab.active { background: var(--gold-12); color: var(--gold); }
.sol-card.hide { display: none; }
section[id], #contact { scroll-margin-top: 84px; }

@media (prefers-reduced-motion: reduce) {
    * { scroll-behavior: auto !important; }
}