/* The Sharks collection: illustrative strategy concepts, never performance data. */
#sharks { position:relative; isolation:isolate; overflow:hidden; padding:110px 0 100px; background:#050507; border-block:1px solid #ffffff0b }
#sharks::before { content:""; position:absolute; z-index:-1; inset:0; background:radial-gradient(ellipse at 50% 25%,#12335a25,transparent 60%); pointer-events:none }
#sharks .sharks-wrap { max-width:1280px }
.sharks-heading { text-align:center; margin:0 auto 48px }
.sharks-eyebrow { color:#8fbded; font-size:12px; font-weight:600; letter-spacing:.17em; text-transform:uppercase; margin:0 0 20px }
#sharks h2 { max-width:none; font-size:clamp(42px,6.5vw,76px); letter-spacing:-.055em }
.sharks-subtitle { color:#b5b5c0; font-size:clamp(20px,2.5vw,25px); letter-spacing:-.025em; margin:18px 0 0 }
.sharks-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:0 0 16px; color:#9797a5; font-size:12px }
.sharks-caption { display:flex; align-items:center; gap:9px; letter-spacing:.025em }
.sharks-caption::before { content:""; width:6px; height:6px; border-radius:50%; background:#6d7283 }
#sharks[data-motion="running"] .sharks-caption::before { background:#7bc8ff; box-shadow:0 0 12px #2997ff70 }
.sharks-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px }
.shark-card { --shark-accent:#66b6ff; --shark-rgb:102,182,255; --shark-delay:0s; position:relative; display:flex; flex-direction:column; min-width:0; overflow:hidden; border:1px solid #ffffff12; border-radius:24px; background:radial-gradient(ellipse at 15% 0,rgba(var(--shark-rgb),.09),transparent 68%),linear-gradient(150deg,#14151b,#0d0e12 75%); box-shadow:inset 0 1px #ffffff04,0 12px 32px #0002; transition:border-color .25s,box-shadow .25s,transform .25s }
.shark-card:hover { transform:translateY(-5px); border-color:rgba(var(--shark-rgb),.35); box-shadow:0 18px 48px #0006,inset 0 1px #ffffff0a }
.shark-tide { --shark-swim:shark-dart; --shark-duration:2.8s; --shark-wake-duration:3.2s; --shark-activity-duration:1.15s }
.shark-reef { --shark-accent:#b29bff; --shark-rgb:178,155,255; --shark-delay:-1.4s; --shark-swim:shark-glide; --shark-duration:8.5s; --shark-wake-duration:9s; --shark-activity-duration:3.6s }
.shark-deep { --shark-accent:#5edbd4; --shark-rgb:94,219,212; --shark-delay:-2.8s; --shark-swim:shark-dive; --shark-duration:5.6s; --shark-wake-duration:6.2s; --shark-activity-duration:2.1s }
.shark-open { --shark-accent:#97d9ba; --shark-rgb:151,217,186; --shark-delay:-4.2s; --shark-swim:shark-surge; --shark-duration:2.15s; --shark-wake-duration:2.3s; --shark-activity-duration:.8s }
.shark-card-content { padding:25px 23px 0; flex:1 }
.shark-card-top { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:29px }
.shark-avatar { position:relative; display:grid; place-items:center; width:52px; height:52px; flex-shrink:0; border-radius:17px; border:1px solid rgba(var(--shark-rgb),.18); background:radial-gradient(ellipse at 30% 20%,rgba(var(--shark-rgb),.16),#ffffff02); box-shadow:0 0 24px rgba(var(--shark-rgb),.04); overflow:hidden }
.shark-avatar::before { content:""; position:absolute; inset:8px -12px; border-block:1px solid rgba(var(--shark-rgb),.12); border-radius:50%; transform:rotate(-25deg); animation:shark-wake var(--shark-wake-duration,5s) ease-in-out infinite paused; animation-delay:var(--shark-delay) }
.shark-avatar svg { width:32px; height:32px; color:var(--shark-accent); filter:drop-shadow(0 2px 6px rgba(var(--shark-rgb),.25)); animation:var(--shark-swim,shark-glide) var(--shark-duration,5s) cubic-bezier(.45,0,.2,1) infinite paused; animation-delay:var(--shark-delay); transform-origin:center }
.shark-number { color:#717686; font:500 11px/1 var(--f); font-variant-numeric:tabular-nums; letter-spacing:.14em }
.shark-category { color:var(--shark-accent); font-size:11px; font-weight:500; letter-spacing:.045em; margin:0 0 11px }
#sharks h3 { font-size:27px; line-height:1.15; letter-spacing:-.045em }
.shark-description { color:#a5a6b3; font-size:14px; line-height:1.6; margin:13px 0 18px; letter-spacing:0 }
.shark-plot { color:var(--shark-accent); margin:5px 0 0; position:relative }
.shark-plot svg { display:block; width:100%; height:auto; overflow:visible }
.shark-gridlines { fill:none; stroke:#ffffff07; stroke-width:1 }
.shark-curve { fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke }
.shark-curve-glow { fill:none; stroke:currentColor; stroke-width:8; stroke-linecap:round; opacity:.06 }
.shark-chart-point { fill:currentColor; stroke:#11131a; stroke-width:2 }
.shark-chart-halo { fill:currentColor; opacity:.1 }
.shark-plot figcaption { display:flex; align-items:center; gap:6px; padding:0 23px 20px; font-size:10px; letter-spacing:.025em; line-height:1.4; color:#8b90a1 }
.shark-plot figcaption::before { content:""; width:10px; height:2px; border-radius:2px; background:currentColor; flex-shrink:0 }
.shark-card-bottom { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:15px 23px; border-top:1px solid #ffffff09; color:#8b90a1; font-size:10px; letter-spacing:.015em }
.shark-bars { display:flex; align-items:center; gap:3px; height:12px; color:var(--shark-accent); opacity:.6 }
.shark-bars i { display:block; width:2px; height:4px; border-radius:2px; background:currentColor; animation:shark-bars var(--shark-activity-duration,1.7s) ease-in-out infinite paused; animation-delay:var(--shark-delay) }
.shark-bars i:nth-child(2) { height:10px; animation-delay:-.6s }
.shark-bars i:nth-child(3) { height:6px; animation-delay:-1.2s }
.shark-bars i:nth-child(4) { height:12px; animation-delay:-.3s }
#sharks[data-motion="running"] .shark-avatar svg,#sharks[data-motion="running"] .shark-avatar::before,#sharks[data-motion="running"] .shark-bars i { animation-play-state:running }
.sharks-footer { display:flex; align-items:center; justify-content:space-between; gap:40px; margin:34px 0 0 }
.sharks-disclosure { max-width:660px; color:#8d909c; font-size:12px; line-height:1.65; margin:0 }
.sharks-cta { flex-shrink:0; gap:16px; background:#f5f5f7; color:#111!important; font-size:14px; padding:14px 22px }
.sharks-cta:hover { background:#fff }
.sharks-cta svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.5; transition:transform .2s }
.sharks-cta:hover svg { transform:translateX(3px) }
@keyframes shark-dart { 0%,100% { transform:translate(-3px,1px) rotate(-7deg) } 28% { transform:translate(1px,-2px) rotate(2deg) } 55% { transform:translate(4px,-1px) rotate(9deg) } 78% { transform:translate(0,2px) rotate(-3deg) } }
@keyframes shark-glide { 0%,100% { transform:translate(-1px,1px) rotate(-3deg) } 50% { transform:translate(1px,-1px) rotate(3deg) } }
@keyframes shark-dive { 0%,100% { transform:translate(-1px,-3px) rotate(-9deg) } 38% { transform:translate(2px,5px) rotate(12deg) } 67% { transform:translate(3px,1px) rotate(-4deg) } }
@keyframes shark-surge { 0%,100% { transform:translate(-3px,2px) rotate(-12deg) } 28% { transform:translate(-4px,2px) rotate(-17deg) } 45% { transform:translate(5px,-4px) rotate(17deg) scale(1.05) } 64% { transform:translate(3px,-1px) rotate(7deg) } 82% { transform:translate(0,1px) rotate(-6deg) } }
@keyframes shark-wake { 0%,100% { transform:translateX(-3px) rotate(-25deg); opacity:.4 } 50% { transform:translateX(3px) rotate(-15deg); opacity:1 } }
@keyframes shark-bars { 0%,100% { transform:scaleY(.55) } 50% { transform:scaleY(1) } }
@media (max-width:1050px) { .sharks-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px } .shark-description { max-width:34ch } .shark-card-top { margin-bottom:24px } }
@media (max-width:600px) { #sharks { padding:76px 0 64px } #sharks .sharks-wrap { padding-inline:22px } .sharks-heading { margin-bottom:30px } .sharks-eyebrow { font-size:10px; margin-bottom:16px } .sharks-subtitle { max-width:20ch; margin:16px auto 0 } .sharks-grid { grid-template-columns:minmax(0,1fr); gap:18px } .shark-card { border-radius:23px } .shark-card-content { padding:23px 25px 0 } .shark-card-top { margin-bottom:24px } .shark-description { max-width:32ch; margin-bottom:8px; font-size:15px } .shark-plot { margin-top:0 } .shark-plot svg { max-height:140px } .shark-plot figcaption { padding-inline:25px } .shark-card-bottom { padding-inline:25px } .sharks-footer { flex-direction:column-reverse; gap:23px; text-align:center; margin-top:28px } .sharks-cta { width:100% } .sharks-toolbar { font-size:11px; gap:8px } }
@media (prefers-reduced-motion:reduce) { #sharks *,#sharks *::before { animation:none!important; transition:none!important } .shark-card:hover { transform:none } }
/* Center decorative AI stars independently of font metrics; keep tab text still. */
#builder-ai-tab>span[aria-hidden="true"],.shark-builder .builder-ai-panel .builder-section-number { --builder-spark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C12 8.5 8.5 12 2 12c6.5 0 10 3.5 10 10 0-6.5 3.5-10 10-10-6.5 0-10-3.5-10-10Z' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E"); position:relative; display:grid; place-items:center; flex-shrink:0; font-size:0; line-height:0; letter-spacing:0; color:#8bc7ff }
#builder-ai-tab>span[aria-hidden="true"]::before,.shark-builder .builder-ai-panel .builder-section-number::before { content:""; position:absolute; inset:0; margin:auto; display:block; width:20px; height:20px; background:currentColor; -webkit-mask:var(--builder-spark) center/contain no-repeat; mask:var(--builder-spark) center/contain no-repeat }
.shark-builder .builder-ai-panel .builder-section-number { width:32px; height:32px; padding:0 }
#builder-ai-tab>span[aria-hidden="true"] { position:relative; isolation:isolate; width:24px; height:24px; text-shadow:none }
#builder-ai-tab>span[aria-hidden="true"]::before { animation:shark-ai-sparkle 2s ease-in-out infinite; transform-origin:center }
#builder-ai-tab>span[aria-hidden="true"]::after { content:""; position:absolute; z-index:-1; inset:-7px; border-radius:50%; background:radial-gradient(circle,#54afff85,transparent 68%); pointer-events:none; animation:shark-ai-halo 2s ease-in-out infinite }
@keyframes shark-ai-sparkle { 0%,100% { transform:scale(.88); background:#8bc7ff; filter:drop-shadow(0 0 3px #50aaff90) } 50% { transform:scale(1.22); background:#f5fbff; filter:drop-shadow(0 0 5px #a7d9ff) drop-shadow(0 0 11px #319bffcc) } }
@keyframes shark-ai-halo { 0%,100% { opacity:.25; transform:scale(.7) } 50% { opacity:.95; transform:scale(1.15) } }
@media (prefers-reduced-motion:reduce) { #builder-ai-tab>span[aria-hidden="true"]::before,#builder-ai-tab>span[aria-hidden="true"]::after { animation:none!important; transform:none } #builder-ai-tab>span[aria-hidden="true"]::after { opacity:.3 } }

/* Decorative order markers follow settled ticks in the fictional price feed. */
#sharks .shark-signals{pointer-events:none}
#sharks .shark-signal{color:#8be0c2}
#sharks .shark-signal[data-side="sell"]{color:#ffb49b}
#sharks .shark-signal-stem{fill:none;stroke:currentColor;stroke-width:1;opacity:.65}
#sharks .shark-signal-box{fill:#0b171e;fill-opacity:.96;stroke:currentColor;stroke-opacity:.5;stroke-width:.8}
#sharks .shark-signal-label{fill:currentColor;font-family:var(--f);font-size:10px;font-weight:600;letter-spacing:.01em}
#sharks .shark-signal-dot{fill:currentColor;stroke:#0b1119;stroke-width:1.4}
#sharks .shark-signal-ring{fill:none;stroke:currentColor;stroke-width:1}