:root{
  --ink:#070a0d;
  --ink-2:#0d1116;
  --panel:#11171d;
  --panel-2:#161d24;
  --line:rgba(255,255,255,.09);
  --line-light:#dfe6ea;
  --paper:#f3f5f6;
  --paper-2:#e9eef0;
  --text:#f4f7f8;
  --muted:#9daab1;
  --body:#27333a;
  --cyan:#12a6dc;
  --cyan-2:#5bd7ff;
  --cyan-soft:#dff5fd;
  --green:#5ed69a;
  --max:1220px;
  --radius:22px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,system-ui,sans-serif;background:var(--paper);color:#10161b;overflow-x:hidden}
a{color:inherit}
.container{width:min(var(--max),calc(100% - 48px));margin:auto}
.site-header{position:sticky;top:0;z-index:50;background:rgba(7,10,13,.9);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}
.nav-wrap{height:82px;display:flex;align-items:center;justify-content:space-between;gap:28px}
.brand{display:block;text-decoration:none;max-width:360px}
.brand-logo{display:block;width:auto;height:48px;max-width:100%;object-fit:contain}
.nav{display:flex;align-items:center;gap:28px}
.nav a{text-decoration:none;font-size:13px;font-weight:600;color:#bac6cc;transition:.2s}
.nav a:hover{color:#fff}
.nav-cta{padding:11px 16px;border:1px solid rgba(91,215,255,.4);border-radius:999px;color:#eaf9ff!important;background:rgba(18,166,220,.08)}
.menu-toggle{display:none;background:none;border:0;color:#fff;font-size:25px;cursor:pointer}
.hero{position:relative;overflow:hidden;background:var(--ink);color:var(--text);padding:100px 0 92px}
.hero::before{content:"";position:absolute;width:720px;height:720px;right:-220px;top:-230px;background:radial-gradient(circle,rgba(18,166,220,.18),transparent 67%);pointer-events:none}
.hero-grid-overlay{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:56px 56px;mask-image:linear-gradient(to bottom,black,transparent 88%)}
.hero-layout{position:relative;display:grid;grid-template-columns:1.02fr .98fr;gap:58px;align-items:center}
.kicker,.eyebrow{font-size:11px;letter-spacing:2.1px;font-weight:800;text-transform:uppercase;color:var(--cyan-2)}
.kicker{display:flex;align-items:center;gap:9px;margin-bottom:20px}
.status-dot{width:5px;height:5px;border-radius:50%;background:var(--green);box-shadow:0 0 14px rgba(94,214,154,.8)}
h1,h2,h3{font-family:"Space Grotesk",Inter,sans-serif}
.hero h1{font-size:clamp(52px,6.2vw,86px);line-height:.98;letter-spacing:-4.8px;margin:0 0 26px;font-weight:600;max-width:790px}
.hero h1 span{color:#91a3ad}
.hero-lead{font-size:18px;line-height:1.75;color:#b4c0c6;max-width:690px;margin:0}
.hero-actions{display:flex;gap:12px;margin:34px 0 36px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:13px 21px;border-radius:999px;text-decoration:none;border:1px solid transparent;font-weight:800;font-size:14px;cursor:pointer}
.btn-primary{background:var(--cyan);color:#fff;box-shadow:0 12px 35px rgba(18,166,220,.22)}
.btn-primary:hover{background:#1eb5eb}
.btn-secondary{border-color:rgba(255,255,255,.16);background:transparent;color:#e9eef0}
.hero-trust{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);padding-top:22px;max-width:690px}
.hero-trust div{padding-right:18px;border-right:1px solid var(--line);margin-right:18px}
.hero-trust div:last-child{border:0;margin-right:0}
.hero-trust strong,.hero-trust span{display:block}
.hero-trust strong{font-size:13px;color:#f2f6f7;margin-bottom:5px}
.hero-trust span{font-size:11px;color:#77868e;line-height:1.45}
.operations-console{position:relative;padding:20px;border:1px solid rgba(255,255,255,.1);background:linear-gradient(180deg,#11171d,#0a0e12);border-radius:28px;box-shadow:0 40px 90px rgba(0,0,0,.42);transform-style:preserve-3d;transition:transform .18s ease-out}
.console-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;font-size:10px;letter-spacing:1.4px;color:#83939b}
.console-id{display:flex;align-items:center;gap:8px}.console-id span{width:6px;height:6px;background:var(--green);border-radius:50%}
.timecode{font-family:monospace;color:#d7e0e4;letter-spacing:1px}
.console-preview{padding:8px;background:#090d10;border-radius:20px;border:1px solid rgba(255,255,255,.06)}
.monitor-frame{height:245px;border-radius:14px;position:relative;overflow:hidden;background:radial-gradient(circle at 48% 45%,rgba(18,166,220,.18),transparent 24%),linear-gradient(135deg,#121b22,#070a0d);border:1px solid rgba(91,215,255,.16)}
.monitor-frame::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 0 42%,rgba(255,255,255,.025) 50%,transparent 58%)}
.monitor-hud{position:absolute;top:13px;font-size:9px;letter-spacing:1.3px;color:#9eb1b9;z-index:2}.top-left{left:14px}.top-right{right:14px}
.monitor-center{position:absolute;inset:0;display:grid;place-items:center}.play-icon{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(91,215,255,.45);color:var(--cyan-2);background:rgba(7,10,13,.44);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);padding-left:3px}
.safe-area{position:absolute;inset:29px 42px;border:1px solid rgba(255,255,255,.12)}
.scan-line{position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--cyan-2),transparent);box-shadow:0 0 12px rgba(91,215,255,.5);animation:scan 5s linear infinite}
.signal-row{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:10px 0}
.signal-card{padding:13px;border-radius:14px;background:#10161c;border:1px solid rgba(255,255,255,.06)}
.signal-card span,.signal-card strong,.signal-card small{display:block}.signal-card span{font-size:8px;letter-spacing:1.3px;color:#65757d}.signal-card strong{font-family:"Space Grotesk";font-size:16px;margin:6px 0 3px}.signal-card small{font-size:9px;color:#71828a}.ok{color:var(--green)!important}
.timeline-panel{display:grid;grid-template-columns:28px 1fr;gap:8px;padding:12px;background:#090d10;border-radius:14px;border:1px solid rgba(255,255,255,.06)}
.timeline-labels{display:grid;gap:6px;font-size:8px;color:#66767d;text-align:center;align-items:center}
.timeline-tracks{position:relative;display:grid;gap:6px}.track{height:12px;border-radius:3px}.track.video{background:linear-gradient(90deg,#1a769c 0 66%,#193545 66%)}.track.audio{background:linear-gradient(90deg,#365c70 0 82%,#192a33 82%)}.track.captions{background:linear-gradient(90deg,#5d6d76 0 42%,#222a2f 42%)}
.playhead{position:absolute;top:-4px;bottom:-4px;width:1px;background:#f1f4f5;left:63%;box-shadow:0 0 8px rgba(255,255,255,.35)}
.console-foot{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}.pill{font-size:9px;letter-spacing:.8px;color:#85959d;padding:7px 9px;border-radius:999px;border:1px solid rgba(255,255,255,.05);background:#0d1216}
.capability-strip{background:#fff;border-bottom:1px solid var(--line-light)}
.capability-grid{display:grid;grid-template-columns:repeat(5,1fr)}
.capability-grid>div{padding:24px 20px;border-right:1px solid var(--line-light)}.capability-grid>div:last-child{border-right:0}
.capability-grid span{font-size:10px;color:var(--cyan);font-weight:800;margin-right:9px}.capability-grid strong{font-family:"Space Grotesk";font-size:15px}.capability-grid small{display:block;margin:7px 0 0 29px;color:#7a888f;font-size:11px}
.section{padding:108px 0}.eyebrow{margin-bottom:16px;color:#078ec1}.section h2{font-size:clamp(38px,4.7vw,64px);letter-spacing:-3px;line-height:1.02;margin:0;font-weight:600}
.split-heading{display:grid;grid-template-columns:1fr .8fr;gap:70px;align-items:end;margin-bottom:46px}.split-heading p{margin:0;color:#63727a;line-height:1.8;font-size:16px}
.services-elegant{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.service-large,.service-small{position:relative;background:#fff;border:1px solid #dce4e7;border-radius:20px;padding:26px;overflow:hidden;transition:.2s ease}.service-large{grid-column:span 1;min-height:330px}.service-small{min-height:225px}
.service-large:hover,.service-small:hover{transform:translateY(-4px);border-color:#bddce7;box-shadow:0 20px 50px rgba(10,30,40,.07)}
.service-index{font-size:10px;font-weight:800;letter-spacing:1.5px;color:#87979e}.service-icon{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:#e7f7fd;color:#078ec1;font-size:20px;font-weight:700;margin-top:34px}.service-large h3,.service-small h3{font-size:23px;letter-spacing:-.8px;margin:18px 0 12px}.service-small h3{margin-top:42px}.service-large p,.service-small p{font-size:14px;line-height:1.72;color:#66767e;margin:0}.tag-row{display:flex;flex-wrap:wrap;gap:7px;margin-top:22px}.tag-row span{font-size:10px;font-weight:700;padding:7px 9px;border-radius:999px;background:#f1f5f6;color:#60717a}
.dark-section{background:#080b0e;color:#fff}.pipeline-layout{display:grid;grid-template-columns:.82fr 1.18fr;gap:58px;align-items:start}.pipeline-copy>p{color:#8d9ca4;line-height:1.8;max-width:500px}.pipeline-tabs{display:grid;gap:7px;margin-top:34px}.pipeline-tab{display:flex;gap:16px;align-items:center;text-align:left;padding:14px 16px;border-radius:13px;border:1px solid rgba(255,255,255,.05);background:transparent;color:#91a1a9;font:inherit;font-size:13px;font-weight:700;cursor:pointer}.pipeline-tab span{font-size:9px;color:#58666d}.pipeline-tab.active,.pipeline-tab:hover{background:#11171c;border-color:rgba(91,215,255,.23);color:#fff}.pipeline-tab.active span{color:var(--cyan-2)}
.pipeline-screen{min-height:505px;padding:30px;border-radius:24px;background:linear-gradient(145deg,#10161b,#0b1014);border:1px solid rgba(255,255,255,.05);box-shadow:0 35px 80px rgba(0,0,0,.25)}.pipeline-panel{display:none}.pipeline-panel.active{display:block}.panel-code{font-size:9px;letter-spacing:1.8px;color:var(--cyan-2);font-weight:800}.pipeline-panel h3{font-size:35px;line-height:1.08;letter-spacing:-1.4px;margin:24px 0 15px}.pipeline-panel p{font-size:14px;line-height:1.8;color:#95a5ad;max-width:600px}.metric-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:34px}.metric-grid div{padding:18px;border-radius:14px;border:1px solid rgba(255,255,255,.05);background:#0b1014}.metric-grid span,.metric-grid strong{display:block}.metric-grid span{font-size:9px;text-transform:uppercase;letter-spacing:1.2px;color:#63727a}.metric-grid strong{margin-top:8px;font-family:"Space Grotesk";font-size:16px}.progress-stack{display:grid;gap:16px;margin-top:34px}.progress-stack div>span{font-size:10px;color:#7f8f97;display:block;margin-bottom:7px}.progress-stack b{height:7px;border-radius:999px;background:#171f24;display:block;overflow:hidden}.progress-stack i{display:block;height:100%;background:linear-gradient(90deg,var(--cyan),var(--cyan-2));border-radius:999px}.qc-list{display:grid;gap:8px;margin-top:34px}.qc-list div{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.07);font-size:12px;color:#9caab1}.qc-list strong{color:var(--green);font-size:10px;letter-spacing:1px}.file-stack{display:grid;gap:9px;margin-top:32px}.file-stack span{padding:14px 15px;background:#0a0f13;border:1px solid rgba(255,255,255,.05);border-radius:11px;font-family:monospace;font-size:11px;color:#9fb1b9}.delivery-destinations{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:34px}.delivery-destinations span{padding:22px;border-radius:14px;border:1px solid rgba(91,215,255,.13);background:rgba(18,166,220,.05);font-family:"Space Grotesk"}
.qc-section{background:#edf1f3}.qc-layout{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}.qc-visual{padding:20px;background:#0c1115;border-radius:24px;box-shadow:0 30px 60px rgba(7,16,22,.16)}.scope-head{display:flex;justify-content:space-between;color:#7d8e96;font-size:9px;letter-spacing:1.2px;padding-bottom:13px}.scope-head strong{color:#c1ccd1}.scope-grid{display:grid;grid-template-columns:1.4fr .6fr;gap:10px}.scope-video{position:relative;min-height:290px;border:1px solid rgba(91,215,255,.10);border-radius:14px;background:radial-gradient(circle at center,rgba(18,166,220,.12),transparent 33%),#080c0f}.scope-video .safe{position:absolute;inset:35px;border:1px solid rgba(255,255,255,.12)}.scope-video span{position:absolute;bottom:12px;right:13px;font-size:9px;color:#71848d}.scope-meters{display:flex;gap:7px;align-items:flex-end;padding:18px;border-radius:14px;background:#0a0f13}.scope-meters i{flex:1;border-radius:3px 3px 0 0;background:linear-gradient(to top,var(--cyan),var(--green))}.scope-status{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}.scope-status span{padding:11px;border-radius:10px;background:#10171c;color:#82939b;font-size:9px}.scope-status b{float:right;color:var(--green)}.qc-copy p{font-size:16px;line-height:1.8;color:#5e6e76}.check-list{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:12px}.check-list li{position:relative;padding:14px 15px 14px 44px;border-bottom:1px solid #d5dfe3;font-size:14px;color:#44555d}.check-list li::before{content:"✓";position:absolute;left:12px;color:#078ec1;font-weight:800}
.streaming-section{background:#fff}.streaming-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:72px;align-items:center}.streaming-layout p{color:#63727a;line-height:1.8}.stream-points{display:grid;gap:12px;margin-top:28px}.stream-points>div{padding:16px 0;border-top:1px solid #e1e7ea}.stream-points strong,.stream-points span{display:block}.stream-points strong{font-size:14px;margin-bottom:5px}.stream-points span{font-size:12px;color:#75848b}.flow-diagram{min-height:440px;border-radius:28px;background:#0a0e12;padding:40px;position:relative;display:flex;align-items:center;justify-content:space-between;gap:26px;overflow:hidden}.flow-diagram::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:30px 30px}.flow-node,.flow-outputs{position:relative;z-index:2}.flow-node{width:150px;padding:18px;border-radius:16px;background:#111820;border:1px solid rgba(255,255,255,.09);color:#fff}.flow-node.engine{border-color:rgba(91,215,255,.32);box-shadow:0 0 40px rgba(18,166,220,.1)}.flow-node span{font-size:9px;color:var(--cyan-2)}.flow-node strong,.flow-node small{display:block}.flow-node strong{font-family:"Space Grotesk";margin:8px 0 6px}.flow-node small{font-size:9px;color:#75868f}.flow-line{position:relative;z-index:1;height:1px;flex:1;background:linear-gradient(90deg,#2b3d47,var(--cyan),#2b3d47)}.flow-outputs{display:grid;gap:8px;width:150px}.flow-outputs div{padding:13px;border-radius:12px;border:1px solid rgba(255,255,255,.05);background:#10161c;color:#fff}.flow-outputs strong,.flow-outputs small{display:block}.flow-outputs strong{font-size:11px}.flow-outputs small{font-size:8px;color:#72838c;margin-top:4px}
.cta-section{background:#0a0e12;padding:88px 0;color:#fff}.cta-box{display:grid;grid-template-columns:.85fr 1.15fr;gap:70px;align-items:start}.cta-copy h2{font-size:clamp(40px,4.8vw,64px);letter-spacing:-3px;line-height:1;margin:0 0 18px}.cta-copy p{color:#94a4ac;line-height:1.8}.contact-mini{display:grid;gap:8px;margin-top:28px;color:#6f8189;font-size:12px}.contact-form{padding:24px;border:1px solid rgba(255,255,255,.05);background:#10161b;border-radius:20px;display:grid;gap:14px}.field-row{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.contact-form label{display:grid;gap:7px;font-size:11px;font-weight:700;color:#9fadb4}.contact-form input,.contact-form select,.contact-form textarea{width:100%;border:1px solid rgba(255,255,255,.1);background:#090d10;color:#eaf0f2;border-radius:10px;padding:13px;font:inherit}.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{outline:1px solid rgba(91,215,255,.5);border-color:rgba(91,215,255,.45)}.contact-form small{color:#6f8088;line-height:1.5}
footer{background:#050708;color:#73848c;border-top:1px solid rgba(255,255,255,.06);padding:28px 0}.footer-grid{display:grid;grid-template-columns:1fr auto auto;gap:28px;align-items:center;font-size:10px}.footer-logo{height:38px;width:auto;max-width:290px}
@keyframes scan{0%{top:0}100%{top:100%}}
@media(max-width:1050px){.hero-layout,.pipeline-layout,.qc-layout,.streaming-layout,.cta-box,.split-heading{grid-template-columns:1fr}.operations-console{max-width:680px}.services-elegant{grid-template-columns:repeat(2,1fr)}.capability-grid{grid-template-columns:repeat(3,1fr)}.capability-grid>div{border-bottom:1px solid var(--line-light)}.footer-grid{grid-template-columns:1fr}.flow-diagram{min-height:360px}}
@media(max-width:850px){.nav{position:absolute;left:0;right:0;top:82px;padding:24px;background:#080c0f;display:none;flex-direction:column;align-items:flex-start;border-bottom:1px solid var(--line)}.nav.open{display:flex}.menu-toggle{display:block}.brand-logo{height:40px}.hero{padding-top:72px}.hero-trust{grid-template-columns:1fr;gap:12px}.hero-trust div{border-right:0;border-bottom:1px solid var(--line);padding:0 0 12px;margin:0}.hero-trust div:last-child{border:0}.capability-grid{grid-template-columns:repeat(2,1fr)}.scope-grid{grid-template-columns:1fr}.scope-meters{height:160px}.flow-diagram{flex-direction:column;align-items:stretch}.flow-node,.flow-outputs{width:100%}.flow-line{width:1px;height:36px;flex:none;margin:auto}.flow-outputs{grid-template-columns:repeat(3,1fr)}.field-row{grid-template-columns:1fr}}
@media(max-width:620px){.container{width:min(var(--max),calc(100% - 28px))}.brand{max-width:70vw}.brand-logo{height:31px}.hero h1{font-size:47px;letter-spacing:-3px}.hero-actions{flex-direction:column}.signal-row{grid-template-columns:1fr}.monitor-frame{height:210px}.capability-grid,.services-elegant{grid-template-columns:1fr}.service-large{min-height:290px}.section{padding:78px 0}.section h2{letter-spacing:-2px}.metric-grid,.delivery-destinations{grid-template-columns:1fr}.scope-status{grid-template-columns:1fr}.flow-outputs{grid-template-columns:1fr}.footer-logo{height:32px}}

/* v6 — animaciones técnicas ligadas al flujo audiovisual */
.monitor-center{overflow:hidden}
.source-reel{width:76%;height:54%;position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:5px;opacity:.78;filter:drop-shadow(0 0 18px rgba(18,166,220,.18))}
.source-reel span{display:block;border-radius:5px;background:linear-gradient(180deg,rgba(91,215,255,.22),rgba(91,215,255,.045));border:1px solid rgba(91,215,255,.10);position:relative;overflow:hidden}
.source-reel span::after{content:"";position:absolute;left:0;right:0;height:22%;top:-24%;background:rgba(91,215,255,.28);animation:frameScan 3.6s linear infinite}
.source-reel span:nth-child(2)::after{animation-delay:.18s}.source-reel span:nth-child(3)::after{animation-delay:.36s}.source-reel span:nth-child(4)::after{animation-delay:.54s}.source-reel span:nth-child(5)::after{animation-delay:.72s}
.encode-readout{position:absolute;left:14px;bottom:13px;z-index:3;display:flex;gap:10px;align-items:center;font-size:8px;letter-spacing:1.1px;color:#7f939c;background:rgba(7,10,13,.7);padding:7px 9px;border-radius:8px;border:1px solid rgba(255,255,255,.06)}
.encode-readout strong{color:var(--cyan-2);font-family:monospace;font-size:10px}
.timeline-tracks{overflow:hidden}
.track{position:relative;overflow:hidden}
.track.video::after,.track.captions::after{content:"";position:absolute;top:0;bottom:0;width:22%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.13),transparent);animation:trackProcess 7s linear infinite}
.track.captions::after{animation-delay:1.2s}
.mini-wave{position:absolute;inset:2px 0;background:repeating-linear-gradient(90deg,transparent 0 3px,rgba(91,215,255,.62) 3px 4px,transparent 4px 7px);-webkit-mask-image:linear-gradient(180deg,transparent 4%,black 27% 73%,transparent 96%);mask-image:linear-gradient(180deg,transparent 4%,black 27% 73%,transparent 96%);opacity:.72;animation:waveShift 2.8s linear infinite}
.playhead{animation:playheadRun 8s linear infinite}
.live-metric{font-size:9px;color:#71828a;margin-left:auto;white-space:nowrap}.live-metric+.live-metric{margin-left:0}.live-metric b{color:#b8cbd3;font-family:monospace;font-weight:600}

.scope-video canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;opacity:.9}
.scope-video .safe,.scope-video>span{z-index:2}
.scope-meters i{transform-origin:bottom;transition:height .08s linear;box-shadow:0 0 8px rgba(18,166,220,.08)}
.scope-status b{position:relative}
.scope-status b::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--green);margin-right:5px;box-shadow:0 0 7px rgba(94,214,154,.55);animation:qcPulse 1.8s ease-in-out infinite}

.flow-line{overflow:visible}
.flow-line i{position:absolute;width:6px;height:6px;border-radius:50%;top:50%;left:0;transform:translate(-50%,-50%);background:var(--cyan-2);box-shadow:0 0 12px rgba(91,215,255,.8);animation:packetMove 2.4s linear infinite}
.flow-line i:nth-child(2){animation-delay:.8s}.flow-line i:nth-child(3){animation-delay:1.6s}
.line-2 i{animation-duration:2s}
.output-led{float:left;width:6px;height:6px;border-radius:50%;background:var(--green);margin:4px 8px 0 0;box-shadow:0 0 9px rgba(94,214,154,.7);animation:outputBlink 2.1s ease-in-out infinite}
.flow-outputs div:nth-child(2) .output-led{animation-delay:.45s}.flow-outputs div:nth-child(3) .output-led{animation-delay:.9s}
.flow-telemetry{position:absolute;z-index:3;left:40px;right:40px;bottom:22px;display:flex;align-items:center;gap:8px;border-top:1px solid rgba(255,255,255,.06);padding-top:12px;font-size:8px;letter-spacing:1px;color:#5e7079;text-transform:uppercase}
.flow-telemetry strong{color:#a8bbc3;font-family:monospace;margin-right:18px;font-size:9px}

.pipeline-panel.active .progress-stack i{animation:encodeBar 1.1s cubic-bezier(.2,.75,.2,1) both;transform-origin:left}
.pipeline-panel.active .progress-stack div:nth-child(2) i{animation-delay:.14s}.pipeline-panel.active .progress-stack div:nth-child(3) i{animation-delay:.28s}
.pipeline-panel.active .file-stack span{animation:filePackage .48s ease both}.pipeline-panel.active .file-stack span:nth-child(2){animation-delay:.12s}.pipeline-panel.active .file-stack span:nth-child(3){animation-delay:.24s}.pipeline-panel.active .file-stack span:nth-child(4){animation-delay:.36s}
.pipeline-panel.active .qc-list div{animation:qcCheck .42s ease both}.pipeline-panel.active .qc-list div:nth-child(2){animation-delay:.1s}.pipeline-panel.active .qc-list div:nth-child(3){animation-delay:.2s}.pipeline-panel.active .qc-list div:nth-child(4){animation-delay:.3s}

@keyframes frameScan{0%{top:-24%;opacity:0}12%{opacity:1}88%{opacity:1}100%{top:105%;opacity:0}}
@keyframes trackProcess{0%{left:-25%}100%{left:105%}}
@keyframes waveShift{from{transform:translateX(0)}to{transform:translateX(-28px)}}
@keyframes playheadRun{0%{left:2%}100%{left:98%}}
@keyframes qcPulse{0%,100%{opacity:.45}50%{opacity:1}}
@keyframes packetMove{0%{left:0;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:100%;opacity:0}}
@keyframes outputBlink{0%,70%,100%{opacity:.45}78%,90%{opacity:1}}
@keyframes encodeBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes filePackage{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@keyframes qcCheck{from{opacity:.18;transform:translateX(-7px)}to{opacity:1;transform:none}}

@media(max-width:850px){.flow-telemetry{position:static;margin-top:18px;flex-wrap:wrap}.flow-line i{top:0;left:50%;animation-name:packetMoveVertical}.live-metric{margin-left:0}.console-foot{align-items:center}}
@keyframes packetMoveVertical{0%{top:0;opacity:0}12%{opacity:1}88%{opacity:1}100%{top:100%;opacity:0}}

@media (prefers-reduced-motion: reduce){
  .scan-line,.source-reel span::after,.track::after,.mini-wave,.playhead,.scope-status b::before,.flow-line i,.output-led{animation:none!important}
  .operations-console{transition:none}
}


/* Audience / workflow-fit section */
.audience-section{background:linear-gradient(180deg,#f5f7f8,#eef3f5)}
.audience-heading{align-items:start}
.audience-grid{display:grid;grid-template-columns:.78fr 1.22fr;gap:22px;align-items:start}
.audience-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.audience-card{background:#fff;border:1px solid #d9e2e6;border-radius:20px;padding:22px;box-shadow:0 10px 28px rgba(10,30,40,.04)}
.audience-id{display:inline-block;font-size:10px;letter-spacing:1.4px;font-weight:800;color:#078ec1;margin-bottom:14px}
.audience-card h3{margin:0 0 10px;font-size:22px;letter-spacing:-.8px}
.audience-card p{margin:0 0 14px;color:#66757d;font-size:14px;line-height:1.72}
.audience-card ul{margin:0;padding-left:18px;color:#42545e;font-size:13px;line-height:1.7}
.workflow-fit-panel{background:#fff;border:1px solid #d9e2e6;border-radius:26px;padding:24px;box-shadow:0 16px 46px rgba(10,30,40,.06)}
.fit-head{display:grid;grid-template-columns:.92fr 1.08fr;gap:16px;align-items:start;margin-bottom:22px}
.fit-head h3{margin:8px 0 0;font-size:34px;line-height:1.08;letter-spacing:-1.4px}
.fit-switch{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
.fit-tab{padding:11px 14px;border-radius:999px;border:1px solid #cfdae0;background:#f6fafb;color:#52646d;font:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:.2s}
.fit-tab:hover,.fit-tab.active{background:#0b1116;border-color:#0b1116;color:#fff}
.fit-case{display:none;grid-template-columns:.9fr 1.1fr;gap:22px;align-items:center}
.fit-case.active{display:grid}
.case-kicker{display:inline-block;font-size:10px;letter-spacing:1.5px;font-weight:800;text-transform:uppercase;color:#078ec1;margin-bottom:12px}
.case-copy h4{margin:0 0 14px;font-family:"Space Grotesk",Inter,sans-serif;font-size:28px;line-height:1.12;letter-spacing:-1.1px}
.case-copy p{margin:0 0 16px;color:#64757e;font-size:14px;line-height:1.8}
.case-note{padding:14px 16px;border-radius:16px;background:#f3f7f8;border:1px solid #dde7eb;color:#41535d;font-size:13px;line-height:1.72}
.case-visual{padding:18px;border-radius:22px;background:linear-gradient(180deg,#0c1116,#131a20);color:#eef5f7;border:1px solid rgba(255,255,255,.06);min-height:278px;display:grid;align-content:center;gap:16px;overflow:hidden}
.workflow-lane{position:relative;padding-top:18px;display:grid;grid-template-columns:repeat(5,1fr);gap:12px;align-items:start}
.lane-track{position:absolute;left:9%;right:9%;top:36px;height:2px;background:linear-gradient(90deg,rgba(91,215,255,.22),rgba(91,215,255,.8),rgba(91,215,255,.22));opacity:.8}
.lane-pulse{position:absolute;top:50%;left:0;width:16px;height:16px;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,#d8fbff 0 28%,#5bd7ff 35%,rgba(91,215,255,.18) 68%,transparent 74%);box-shadow:0 0 18px rgba(91,215,255,.55);animation:lanePulse 4.8s linear infinite}
.lane-step{position:relative;z-index:2;text-align:center}
.lane-step b{width:44px;height:44px;margin:0 auto 10px;border-radius:50%;display:grid;place-items:center;background:#171f26;border:1px solid rgba(255,255,255,.05);font-size:11px;color:#8ea0a9}
.lane-step span{display:block;font-size:12px;line-height:1.45;color:#95a6ae}
.lane-step.active b{background:rgba(18,166,220,.14);border-color:rgba(91,215,255,.32);color:#dff7ff;box-shadow:0 0 0 6px rgba(18,166,220,.06)}
.lane-step.active span{color:#eef6f8}
.mini-outputs{display:flex;justify-content:flex-end;gap:8px}
.mini-outputs span,.archive-stack span{padding:8px 10px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.05);font-size:11px;color:#c5d4da}
.archive-stack{display:flex;flex-wrap:wrap;gap:8px}
.lane-streaming .lane-track::after{content:"";position:absolute;inset:-10px 0 -10px 0;background:repeating-linear-gradient(90deg,transparent 0 28px,rgba(91,215,255,.1) 28px 32px);-webkit-mask-image:linear-gradient(180deg,transparent,black 25% 75%,transparent);mask-image:linear-gradient(180deg,transparent,black 25% 75%,transparent);animation:packetStreamBg 2.8s linear infinite}
.archive-flow .lane-step.active b::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:1px solid rgba(91,215,255,.28);animation:archiveRing 2.4s ease-in-out infinite}
.fit-case.active .lane-pulse{animation-duration:4.8s}
.fit-case[data-case-panel="marketing"].active .lane-pulse{animation-duration:3.8s}
.fit-case[data-case-panel="streaming"].active .lane-pulse{animation-duration:2.9s}
.fit-case[data-case-panel="archivo"].active .lane-pulse{animation-duration:5.3s}

@keyframes lanePulse{0%{left:0;opacity:0}10%{opacity:1}88%{opacity:1}100%{left:100%;opacity:0}}
@keyframes packetStreamBg{from{background-position:0 0}to{background-position:64px 0}}
@keyframes archiveRing{0%,100%{transform:scale(.92);opacity:.25}50%{transform:scale(1.08);opacity:.6}}

@media(max-width:1080px){
  .audience-grid{grid-template-columns:1fr}
  .fit-head,.fit-case{grid-template-columns:1fr}
}
@media(max-width:760px){
  .audience-cards{grid-template-columns:1fr}
  .fit-switch{justify-content:flex-start}
  .workflow-lane{grid-template-columns:1fr;gap:14px;padding-top:0}
  .lane-track{left:22px;right:auto;top:0;bottom:0;width:2px;height:auto}
  .lane-pulse{left:50%;top:0;transform:translate(-50%,-50%);animation-name:lanePulseVertical}
  .lane-step{text-align:left;display:grid;grid-template-columns:52px 1fr;gap:12px;align-items:center}
  .lane-step b{margin:0}
  .mini-outputs{justify-content:flex-start;flex-wrap:wrap}
}
@keyframes lanePulseVertical{0%{top:0;opacity:0}10%{opacity:1}88%{opacity:1}100%{top:100%;opacity:0}}
@media (prefers-reduced-motion: reduce){
  .lane-pulse,.lane-streaming .lane-track::after,.archive-flow .lane-step.active b::after{animation:none!important}
}


/* Local / Google Business oriented service section */
.local-services-section{background:#fff}
.local-heading{align-items:start}
.local-services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.local-service-card{position:relative;min-height:340px;padding:25px;border-radius:22px;background:linear-gradient(180deg,#fff,#f8fbfc);border:1px solid #dce5e9;overflow:hidden;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.local-service-card:hover{transform:translateY(-4px);border-color:#b8dce8;box-shadow:0 20px 48px rgba(11,35,46,.07)}
.local-tag{display:inline-block;margin:18px 0 8px;font-size:9px;letter-spacing:1.5px;font-weight:800;text-transform:uppercase;color:#078ec1}
.local-service-card h3{font-size:23px;letter-spacing:-.9px;margin:0 0 11px}
.local-service-card p{font-size:14px;line-height:1.72;color:#64757d;margin:0}
.local-example{margin-top:18px;padding-top:15px;border-top:1px solid #e2eaed;font-size:12px;line-height:1.65;color:#52656e}
.local-icon{height:70px;width:92px;position:relative;color:var(--cyan);opacity:.92;overflow:visible}
.camera-icon{width:92px;height:64px;position:relative;overflow:visible}
.camera-icon .cam-body{position:absolute;left:10px;top:18px;width:48px;height:30px;border:2px solid currentColor;border-radius:8px;background:linear-gradient(180deg,rgba(91,215,255,.10),rgba(91,215,255,.03));box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.camera-icon .cam-lens{position:absolute;left:24px;top:24px;width:20px;height:20px;border:2px solid currentColor;border-radius:50%;background:radial-gradient(circle at 38% 35%,rgba(91,215,255,.30),rgba(91,215,255,.05) 56%,transparent 57%)}
.camera-icon .cam-lens::after{content:"";position:absolute;inset:4px;border:1px solid rgba(18,166,220,.55);border-radius:50%}
.camera-icon .cam-top{position:absolute;left:20px;top:10px;width:18px;height:8px;border:2px solid currentColor;border-bottom:0;border-radius:4px 4px 0 0;background:rgba(91,215,255,.08)}
.camera-icon .cam-side{position:absolute;left:60px;top:23px;width:18px;height:18px;border:2px solid currentColor;border-left:0;border-radius:2px 6px 6px 2px;clip-path:polygon(0 18%,100% 0,100% 100%,0 82%);background:linear-gradient(180deg,rgba(91,215,255,.12),rgba(91,215,255,.04))}
.camera-icon .cam-base{position:absolute;left:28px;bottom:-2px;width:12px;height:10px;border-left:2px solid currentColor;border-right:2px solid currentColor}
.camera-icon .cam-base::before,.camera-icon .cam-base::after{content:"";position:absolute;top:9px;width:16px;height:2px;background:currentColor}
.camera-icon .cam-base::before{left:-14px;transform:rotate(28deg);transform-origin:right center}
.camera-icon .cam-base::after{right:-14px;transform:rotate(-28deg);transform-origin:left center}
.transfer-icon{display:flex;align-items:flex-end;gap:7px;padding:10px 8px;border-bottom:1px solid #badce7}.transfer-icon i{display:block;width:14px;border-radius:3px 3px 0 0;background:linear-gradient(180deg,var(--cyan-2),var(--cyan));animation:localBars 1.8s ease-in-out infinite alternate}.transfer-icon i:nth-child(1){height:25px}.transfer-icon i:nth-child(2){height:45px;animation-delay:.25s}.transfer-icon i:nth-child(3){height:34px;animation-delay:.5s}
.pickup-icon{border:1px solid #b7dce8;border-radius:50%;width:64px;height:64px}.pickup-icon::before{content:"";position:absolute;left:30px;top:12px;bottom:12px;width:1px;background:#6fc4e4}.pickup-icon span{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--cyan);left:26px;top:12px;box-shadow:0 0 10px rgba(18,166,220,.45);animation:pickupMove 2.6s ease-in-out infinite}.pickup-icon b{position:absolute;left:20px;bottom:10px;width:20px;height:12px;border:2px solid var(--cyan);border-top:0;border-radius:2px}
.screen-icon{width:86px;height:58px;border:2px solid #7ccce9;border-radius:7px}.screen-icon span{position:absolute;inset:8px;background:linear-gradient(135deg,rgba(18,166,220,.18),rgba(91,215,255,.05))}.screen-icon i{position:absolute;left:37px;bottom:-10px;width:12px;height:10px;border-left:2px solid #7ccce9;border-right:2px solid #7ccce9}
.event-icon{display:flex;align-items:flex-end;justify-content:center;gap:8px;border-bottom:1px solid #b8dce8}.event-icon span{display:block;width:10px;background:linear-gradient(180deg,var(--cyan-2),var(--cyan));border-radius:6px 6px 0 0;animation:eventMeter 1.5s ease-in-out infinite alternate}.event-icon span:nth-child(1){height:24px}.event-icon span:nth-child(2){height:48px;animation-delay:.2s}.event-icon span:nth-child(3){height:34px;animation-delay:.4s}
.consult-icon{width:68px;height:58px;border:1px solid #b2d8e5;border-radius:12px}.consult-icon span{position:absolute;left:14px;top:13px;width:38px;height:2px;background:var(--cyan);box-shadow:0 10px 0 rgba(18,166,220,.65),0 20px 0 rgba(18,166,220,.35)}.consult-icon i{position:absolute;right:-8px;bottom:-7px;width:24px;height:24px;border-radius:50%;border:2px solid var(--cyan);background:#fff}.consult-icon i::after{content:"";position:absolute;width:9px;height:2px;background:var(--cyan);right:-7px;bottom:0;transform:rotate(45deg)}
.local-flow-card{margin-top:22px;display:grid;grid-template-columns:.72fr 1.28fr;gap:30px;align-items:center;padding:30px;border-radius:28px;background:linear-gradient(135deg,#0a0e12,#111a20);color:#fff;border:1px solid rgba(255,255,255,.05);box-shadow:0 28px 70px rgba(8,21,28,.12)}
.local-flow-copy h3{font-size:34px;line-height:1.08;letter-spacing:-1.4px;margin:8px 0 12px}.local-flow-copy p{font-size:14px;line-height:1.75;color:#93a5ad;margin:0 0 20px}
.local-flow-visual{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:24px 4px 8px}
.local-route-line{position:absolute;left:10%;right:10%;top:45px;height:1px;background:linear-gradient(90deg,rgba(91,215,255,.18),rgba(91,215,255,.8),rgba(91,215,255,.18))}.route-pulse{position:absolute;left:0;top:50%;width:13px;height:13px;border-radius:50%;transform:translate(-50%,-50%);background:var(--cyan-2);box-shadow:0 0 18px rgba(91,215,255,.65);animation:localRoute 4.6s linear infinite}
.route-step{position:relative;z-index:2;text-align:center}.route-step b{display:grid;place-items:center;width:44px;height:44px;margin:0 auto 12px;border-radius:50%;background:#141d23;border:1px solid rgba(91,215,255,.24);color:#d9f6ff;font-size:10px}.route-step strong,.route-step small{display:block}.route-step strong{font-size:13px;margin-bottom:5px}.route-step small{font-size:10px;color:#7e919a;line-height:1.45}
.local-business-note{margin-top:18px;padding:18px 20px;border-radius:18px;background:#f4f8f9;border:1px solid #dbe5e8;display:flex;align-items:center;justify-content:space-between;gap:20px}.local-business-note>div{display:grid;grid-template-columns:auto 1fr;column-gap:9px;align-items:center}.local-business-note p{grid-column:2;margin:5px 0 0;color:#71828a;font-size:12px;line-height:1.55}.pin-dot{width:9px;height:9px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 5px rgba(18,166,220,.08)}.local-business-note a{font-size:13px;font-weight:800;color:#078ec1;text-decoration:none;white-space:nowrap}
@keyframes localBars{from{transform:scaleY(.65)}to{transform:scaleY(1)}}
@keyframes pickupMove{0%,100%{top:12px}50%{top:40px}}
@keyframes eventMeter{from{transform:scaleY(.6)}to{transform:scaleY(1)}}
@keyframes localRoute{0%{left:0;opacity:0}10%{opacity:1}90%{opacity:1}100%{left:100%;opacity:0}}
@media(max-width:1000px){.local-services-grid{grid-template-columns:repeat(2,1fr)}.local-flow-card{grid-template-columns:1fr}}
@media(max-width:650px){.local-services-grid{grid-template-columns:1fr}.local-flow-visual{grid-template-columns:1fr;gap:14px}.local-route-line{left:26px;right:auto;top:20px;bottom:20px;width:1px;height:auto}.route-pulse{left:50%;top:0;animation-name:localRouteVertical}.route-step{text-align:left;display:grid;grid-template-columns:56px 1fr;column-gap:10px;align-items:center}.route-step b{grid-row:1/3;margin:0}.local-business-note{align-items:flex-start;flex-direction:column}.local-business-note a{white-space:normal}}
@keyframes localRouteVertical{0%{top:0;opacity:0}10%{opacity:1}90%{opacity:1}100%{top:100%;opacity:0}}
@media(prefers-reduced-motion:reduce){.transfer-icon i,.pickup-icon span,.event-icon span,.route-pulse{animation:none!important}}

/* Performance, accessibility and interaction refinements */
html{scroll-padding-top:92px}
section[id]{scroll-margin-top:92px}
.skip-link{position:fixed;left:16px;top:12px;z-index:1000;transform:translateY(-180%);padding:10px 14px;border-radius:10px;background:#fff;color:#071015;font-weight:800;text-decoration:none;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.skip-link:focus{transform:translateY(0)}
:focus-visible{outline:3px solid rgba(91,215,255,.9);outline-offset:4px;border-radius:6px}
.brand picture,.footer-grid picture{display:block;line-height:0}
.section:not(.intro-section),.cta-section{content-visibility:auto;contain-intrinsic-size:900px}
button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}
@media(max-width:850px){
  .nav a{min-height:44px;display:flex;align-items:center}
  .menu-toggle{min-width:44px;min-height:44px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}


.camera-icon{display:grid;place-items:center;width:92px;height:70px;overflow:visible}
.camera-icon img{display:block;width:64px;height:64px;object-fit:contain;filter:drop-shadow(0 6px 14px rgba(18,166,220,.14));opacity:.96}


/* =========================================================
   Progressive interactivity — subtle, performant, elegant
   ========================================================= */
.reveal-ready{
  opacity:0;
  transform:translateY(22px);
  transition:
    opacity .72s cubic-bezier(.2,.7,.2,1),
    transform .72s cubic-bezier(.2,.7,.2,1);
}
.reveal-ready.reveal-in{
  opacity:1;
  transform:none;
}
.reveal-delay-1{transition-delay:.06s}
.reveal-delay-2{transition-delay:.12s}
.reveal-delay-3{transition-delay:.18s}
.reveal-delay-4{transition-delay:.24s}

.nav a[aria-current="page"]{
  color:#fff;
  position:relative;
}
.nav a[aria-current="page"]::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-8px;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--cyan-2),transparent);
  box-shadow:0 0 10px rgba(91,215,255,.45);
}

.service-large,
.service-small,
.audience-card,
.local-service-card{
  --mx:50%;
  --my:50%;
  isolation:isolate;
}
.service-large::before,
.service-small::before,
.audience-card::before,
.local-service-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  opacity:0;
  pointer-events:none;
  background:
    radial-gradient(220px circle at var(--mx) var(--my),
      rgba(18,166,220,.09),
      transparent 64%);
  transition:opacity .22s ease;
}
.service-large:hover::before,
.service-small:hover::before,
.audience-card:hover::before,
.local-service-card:hover::before{
  opacity:1;
}

.local-service-card .local-icon{
  transition:transform .3s cubic-bezier(.2,.8,.2,1), filter .3s ease;
}
.local-service-card:hover .local-icon{
  transform:translateY(-3px) scale(1.035);
  filter:drop-shadow(0 8px 14px rgba(18,166,220,.12));
}
.local-service-card:hover .camera-icon img{
  filter:drop-shadow(0 8px 18px rgba(18,166,220,.22));
}

.btn,
.nav-cta{
  position:relative;
  overflow:hidden;
}
.btn::after,
.nav-cta::after{
  content:"";
  position:absolute;
  inset:-2px auto -2px -42%;
  width:28%;
  transform:skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
  opacity:0;
}
.btn:hover::after,
.nav-cta:hover::after{
  opacity:1;
  animation:buttonSheen .78s ease both;
}
@keyframes buttonSheen{
  from{left:-42%}
  to{left:118%}
}

.signal-card{
  transition:transform .22s ease,border-color .22s ease,background .22s ease;
}
.signal-card:hover{
  transform:translateY(-2px);
  border-color:rgba(91,215,255,.2);
  background:#121b21;
}
.capability-grid>div{
  transition:background .22s ease;
}
.capability-grid>div:hover{
  background:#f7fbfc;
}

.local-example,
.case-note{
  transition:border-color .22s ease,background .22s ease;
}
.local-service-card:hover .local-example{
  border-color:#cae4ed;
}
.fit-case.active .case-note{
  animation:caseNoteIn .42s ease both;
}
@keyframes caseNoteIn{
  from{opacity:.35;transform:translateY(5px)}
  to{opacity:1;transform:none}
}

.site-header{
  transition:background .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.site-header.is-scrolled{
  background:rgba(7,10,13,.965);
  border-bottom-color:rgba(91,215,255,.11);
  box-shadow:0 8px 28px rgba(0,0,0,.16);
}

.route-step b{
  transition:background .22s ease,border-color .22s ease,box-shadow .22s ease,transform .22s ease;
}
.route-step:hover b{
  transform:scale(1.06);
  background:#17252d;
  border-color:rgba(91,215,255,.42);
  box-shadow:0 0 0 5px rgba(18,166,220,.06);
}
.route-step.route-active b{
  background:linear-gradient(135deg,#12a6dc,#5bd7ff);
  border-color:rgba(187,241,255,.95);
  box-shadow:0 0 0 5px rgba(18,166,220,.12),0 0 22px rgba(91,215,255,.52);
  color:#031017;
  transform:scale(1.08);
  text-shadow:none;
}

.interactive-card:focus-visible{
  outline:3px solid rgba(91,215,255,.62);
  outline-offset:3px;
}

@media(max-width:850px){
  .nav a[aria-current="page"]::after{bottom:2px}
  .reveal-ready{transform:translateY(14px)}
}

@media(prefers-reduced-motion:reduce){
  .reveal-ready,
  .reveal-ready.reveal-in{
    opacity:1!important;
    transform:none!important;
    transition:none!important;
  }
  .btn::after,.nav-cta::after{display:none!important}
}


/* =========================================================
   Creación audiovisual
   ========================================================= */
.creation-section{
  background:
    radial-gradient(circle at 88% 16%,rgba(18,166,220,.07),transparent 27%),
    linear-gradient(180deg,#f7f9fa,#eef3f5);
}
.creation-heading{align-items:start}
.creation-layout{
  display:grid;
  grid-template-columns:.84fr 1.16fr;
  gap:20px;
  align-items:stretch;
}
.creation-offer{display:grid;gap:14px}
.creation-intro-card,
.creation-result-panel{
  position:relative;
  overflow:hidden;
  border:1px solid #d9e3e7;
  background:rgba(255,255,255,.92);
  border-radius:24px;
  padding:26px;
  box-shadow:0 14px 38px rgba(13,37,48,.045);
}
.creation-intro-card::after{
  content:"";
  position:absolute;
  width:260px;height:260px;
  right:-150px;top:-150px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(18,166,220,.11),transparent 68%);
  pointer-events:none;
}
.creation-badge{
  display:inline-flex;
  align-items:center;
  min-height:29px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid #cce4ed;
  background:#f3fbfe;
  color:#078ec1;
  font-size:9px;
  letter-spacing:1.35px;
  font-weight:800;
  text-transform:uppercase;
}
.creation-intro-card h3{
  max-width:620px;
  margin:20px 0 12px;
  font-size:31px;
  line-height:1.08;
  letter-spacing:-1.3px;
}
.creation-intro-card>p{
  margin:0;
  color:#66767e;
  font-size:14px;
  line-height:1.78;
}
.creation-types{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:22px;
}
.creation-type{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:52px;
  padding:11px 13px;
  border:1px solid #dce5e8;
  border-radius:14px;
  background:#f8fafb;
  color:#40525b;
  text-align:left;
  font:inherit;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  transition:.22s ease;
}
.creation-type span{font-size:9px;color:#8999a1;letter-spacing:1px}
.creation-type:hover,
.creation-type.active{
  border-color:#b9dce8;
  background:#eff9fc;
  color:#087fa9;
  transform:translateY(-1px);
}
.creation-type.active span{color:#078ec1}
.creation-result-panel{
  min-height:185px;
  background:linear-gradient(145deg,#0b1014,#111a20);
  border-color:rgba(255,255,255,.07);
  color:#fff;
}
.creation-result-panel::before{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(110deg,transparent 0 48%,rgba(91,215,255,.035) 52%,transparent 56%);
  pointer-events:none;
}
.result-kicker{
  display:block;
  color:var(--cyan-2);
  font-size:9px;
  letter-spacing:1.6px;
  font-weight:800;
  margin-bottom:10px;
}
.creation-result-panel h4{
  position:relative;
  margin:0 0 9px;
  max-width:600px;
  font-family:"Space Grotesk",Inter,sans-serif;
  font-size:24px;
  line-height:1.15;
  letter-spacing:-.8px;
}
.creation-result-panel p{
  position:relative;
  margin:0;
  color:#95a7af;
  font-size:13px;
  line-height:1.72;
}
.creation-deliverables{
  position:relative;
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:16px;
}
.creation-deliverables span{
  padding:7px 9px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.05);
  background:rgba(255,255,255,.02);
  color:#b8c8ce;
  font-size:10px;
}

.creation-studio{
  min-height:600px;
  padding:18px;
  border-radius:28px;
  background:linear-gradient(180deg,#0b1014,#080b0e);
  border:1px solid rgba(255,255,255,.05);
  box-shadow:0 30px 70px rgba(8,22,30,.18);
  color:#fff;
}
.studio-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  min-height:30px;
  color:#7f9199;
  font-size:9px;
  letter-spacing:1.45px;
  font-weight:700;
}
.studio-head>div{display:flex;align-items:center;gap:8px}
.studio-head strong{font-family:monospace;color:#aebdc4;font-size:9px}
.studio-status-dot{
  width:6px;height:6px;border-radius:50%;
  background:#ef5555;
  box-shadow:0 0 10px rgba(239,85,85,.5);
  animation:studioRecPulse 1.55s ease-in-out infinite;
}
.studio-preview{
  margin-top:8px;
  padding:7px;
  border-radius:20px;
  background:#06090c;
  border:1px solid rgba(255,255,255,.05);
}
.creation-preview-scene{
  position:relative;
  height:315px;
  border-radius:14px;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 42%,rgba(18,166,220,.09),transparent 24%),
    linear-gradient(135deg,#152029,#090d11);
}
.preview-gridlines{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:33.33% 33.33%;
}
.workflow-scene{
  position:absolute; inset:16px;
  opacity:0; transform:translateY(8px) scale(.985);
  transition:opacity .45s ease, transform .45s ease;
  pointer-events:none;
}
.creation-preview-scene.stage-0 .scene-idea,
.creation-preview-scene.stage-1 .scene-plan,
.creation-preview-scene.stage-2 .scene-shoot,
.creation-preview-scene.stage-3 .scene-edit,
.creation-preview-scene.stage-4 .scene-post,
.creation-preview-scene.stage-5 .scene-delivery{
  opacity:1; transform:none;
}
.preview-rec{
  position:absolute;left:15px;top:14px;
  display:flex;align-items:center;gap:6px;
  font:700 9px/1 monospace;color:#a3b1b6;letter-spacing:1px;
  opacity:.58; transition:opacity .35s ease, color .35s ease;
}
.preview-rec i{width:6px;height:6px;border-radius:50%;background:#ef5555;box-shadow:0 0 8px rgba(239,85,85,.5)}
.creation-preview-scene.stage-2 .preview-rec{opacity:1;color:#dce8ec}
.preview-timecode{
  position:absolute;right:15px;top:14px;
  font:10px/1 monospace;color:#b8c5ca;letter-spacing:1px;
}
.preview-stage-label{
  position:absolute;left:16px;right:16px;bottom:15px;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(5,9,12,.72);
  border:1px solid rgba(255,255,255,.05);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  color:#dbe8ed;
  font-size:11px;
  line-height:1.45;
}

/* Scene 0: idea */
.idea-center-card{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:170px;padding:16px 14px;border-radius:16px;
  border:1px solid rgba(91,215,255,.10); background:rgba(10,16,21,.82); text-align:center;
  box-shadow:0 0 28px rgba(18,166,220,.08);
}
.idea-center-card span,.idea-center-card strong,.idea-center-card small{display:block}
.idea-center-card span{font-size:8px;letter-spacing:1.4px;color:#82a6b3;margin-bottom:7px}
.idea-center-card strong{font-family:"Space Grotesk",Inter,sans-serif;font-size:20px;letter-spacing:-.6px;color:#eff7fa;margin-bottom:6px}
.idea-center-card small{font-size:10px;line-height:1.5;color:#90a3ac}
.idea-node{position:absolute;padding:8px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.05);background:rgba(255,255,255,.04);font-size:11px;color:#d3e1e6}
.node-a{left:34px;top:54px}.node-b{right:34px;top:92px}.node-c{left:82px;bottom:64px}
.idea-lines,.idea-lines::before,.idea-lines::after{content:"";position:absolute;border-top:1px dashed rgba(91,215,255,.28);transform-origin:left center}
.idea-lines{left:136px;top:92px;width:112px;transform:rotate(18deg)}
.idea-lines::before{left:78px;top:90px;width:122px;transform:rotate(-12deg)}
.idea-lines::after{left:116px;top:188px;width:86px;transform:rotate(48deg)}
.creation-preview-scene.stage-0 .idea-node{animation:floatSoft 4.2s ease-in-out infinite}
.creation-preview-scene.stage-0 .node-b{animation-delay:.5s}.creation-preview-scene.stage-0 .node-c{animation-delay:1s}

/* Scene 1: planning */
.plan-storyboard{position:absolute;left:34px;top:52px;display:flex;gap:10px}
.sb-card{width:72px;height:92px;border-radius:10px;border:1px solid rgba(91,215,255,.16);background:linear-gradient(180deg,rgba(91,215,255,.12),rgba(91,215,255,.03));box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.sb-card:nth-child(2){transform:translateY(10px)}
.sb-card:nth-child(3){transform:translateY(20px)}
.plan-sheet{position:absolute;right:42px;top:48px;width:144px;padding:14px 14px 10px;border-radius:14px;border:1px solid rgba(255,255,255,.05);background:rgba(11,17,22,.82)}
.sheet-title{font-size:10px;letter-spacing:1.5px;color:#8eb1bf;margin-bottom:10px}
.plan-sheet span{display:block;height:8px;margin-bottom:8px;border-radius:999px;background:linear-gradient(90deg,rgba(255,255,255,.14),rgba(91,215,255,.08))}
.plan-sheet span:nth-child(2){width:85%}.plan-sheet span:nth-child(3){width:68%}.plan-sheet span:nth-child(4){width:92%}.plan-sheet span:nth-child(5){width:58%}
.plan-route{position:absolute;left:84px;right:88px;bottom:86px;height:44px;border-radius:999px;border:1px dashed rgba(91,215,255,.26);mask-image:linear-gradient(90deg,transparent,black 10% 90%,transparent)}
.creation-preview-scene.stage-1 .plan-route::after{content:"";position:absolute;left:0;top:50%;width:18px;height:18px;border-radius:50%;background:radial-gradient(circle,#d8fbff 0 30%,#5bd7ff 35%,rgba(91,215,255,.18) 68%,transparent 74%);transform:translate(-50%,-50%);box-shadow:0 0 18px rgba(91,215,255,.45);animation:routeMove 3.4s linear infinite}

/* Scene 2: shooting */
.shoot-subject{position:absolute;right:52px;bottom:48px;width:132px;height:162px;border-radius:62px 62px 22px 22px;background:linear-gradient(180deg,rgba(91,215,255,.16),rgba(91,215,255,.04));border:1px solid rgba(91,215,255,.14)}
.shoot-camera{position:absolute;left:54px;top:72px;width:112px;height:132px;color:#bdeefe}
.shoot-camera .cam-body{position:absolute;left:14px;top:24px;width:56px;height:36px;border:2px solid currentColor;border-radius:9px;background:rgba(91,215,255,.07)}
.shoot-camera .cam-lens{position:absolute;left:32px;top:32px;width:20px;height:20px;border-radius:50%;border:2px solid currentColor}
.shoot-camera .cam-lens::after{content:"";position:absolute;inset:4px;border-radius:50%;border:1px solid rgba(91,215,255,.45)}
.shoot-camera .cam-top{position:absolute;left:26px;top:12px;width:18px;height:10px;border:2px solid currentColor;border-bottom:0;border-radius:5px 5px 0 0}
.shoot-camera .cam-grip{position:absolute;left:68px;top:28px;width:20px;height:18px;border:2px solid currentColor;border-left:0;clip-path:polygon(0 18%,100% 0,100% 100%,0 82%);border-radius:0 6px 6px 0}
.shoot-camera .cam-leg{position:absolute;top:58px;width:2px;height:58px;background:currentColor;transform-origin:top center;opacity:.8}
.leg-a{left:42px;transform:rotate(22deg)} .leg-b{left:42px} .leg-c{left:42px;transform:rotate(-22deg)}
.preview-camera-frame{position:absolute;inset:42px 44px;border:1px solid rgba(255,255,255,.16)}
.preview-camera-frame::before,.preview-camera-frame::after{content:"";position:absolute;width:32px;height:32px;border-color:var(--cyan-2);opacity:.7}
.preview-camera-frame::before{left:-1px;top:-1px;border-left:2px solid;border-top:2px solid}
.preview-camera-frame::after{right:-1px;bottom:-1px;border-right:2px solid;border-bottom:2px solid}
.shoot-audio-meter{position:absolute;left:196px;bottom:62px;display:flex;align-items:flex-end;gap:6px;height:62px}
.shoot-audio-meter i{display:block;width:8px;height:22px;border-radius:999px;background:linear-gradient(180deg,var(--cyan-2),var(--cyan));animation:meterBounce 1.1s ease-in-out infinite alternate}
.shoot-audio-meter i:nth-child(2){height:42px;animation-delay:.1s}.shoot-audio-meter i:nth-child(3){height:32px;animation-delay:.2s}.shoot-audio-meter i:nth-child(4){height:54px;animation-delay:.3s}.shoot-audio-meter i:nth-child(5){height:28px;animation-delay:.4s}

/* Scene 3: editing */
.edit-preview-window{position:absolute;left:38px;top:42px;right:40px;height:132px;border-radius:14px;border:1px solid rgba(91,215,255,.10);background:radial-gradient(circle at 36% 38%,rgba(91,215,255,.18),transparent 18%),linear-gradient(135deg,#12202a,#0b1218 68%)}
.edit-preview-window::before{content:"";position:absolute;left:14px;top:12px;right:14px;height:18px;border-radius:999px;background:linear-gradient(90deg,rgba(255,255,255,.08),rgba(255,255,255,.03))}
.edit-timeline{position:absolute;left:38px;right:40px;bottom:56px;padding:14px;border-radius:14px;background:#0c1318;border:1px solid rgba(255,255,255,.06);display:grid;gap:10px}
.edit-timeline .track{display:block;height:14px;border-radius:999px}
.edit-timeline .t1{background:linear-gradient(90deg,rgba(91,215,255,.72),rgba(91,215,255,.25) 74%,rgba(255,255,255,.05) 74%)}
.edit-timeline .t2{background:linear-gradient(90deg,rgba(255,255,255,.24),rgba(255,255,255,.09) 58%,rgba(91,215,255,.18) 58% 79%,rgba(255,255,255,.05) 79%)}
.edit-timeline .t3{background:linear-gradient(90deg,rgba(91,215,255,.35),rgba(255,255,255,.08) 44%,rgba(91,215,255,.28) 44% 66%,rgba(255,255,255,.04) 66%)}
.timeline-playhead{position:absolute;top:10px;bottom:10px;left:58%;width:2px;background:#fff;box-shadow:0 0 10px rgba(255,255,255,.55);animation:playheadMove 3.2s ease-in-out infinite alternate}

/* Scene 4: post */
.post-preview{position:absolute;left:36px;top:48px;width:146px;height:102px;border-radius:14px;border:1px solid rgba(255,255,255,.05);background:linear-gradient(135deg,#0f1d25,#101820)}
.post-preview::after{content:"";position:absolute;inset:18px;border-radius:10px;background:radial-gradient(circle at 50% 45%,rgba(91,215,255,.26),rgba(91,215,255,.04) 48%,transparent 49%)}
.color-wheels{position:absolute;right:42px;top:48px;display:flex;gap:12px}
.color-wheels i{display:block;width:58px;height:58px;border-radius:50%;border:1px solid rgba(255,255,255,.12);background:conic-gradient(from 30deg,rgba(91,215,255,.55),rgba(94,214,154,.45),rgba(255,186,90,.48),rgba(91,215,255,.55));opacity:.85}
.subtitle-bars{position:absolute;left:36px;right:42px;bottom:98px;display:grid;gap:7px}
.subtitle-bars span{display:block;height:9px;border-radius:999px;background:linear-gradient(90deg,rgba(255,255,255,.18),rgba(91,215,255,.08))}
.subtitle-bars span:nth-child(1){width:86%}.subtitle-bars span:nth-child(2){width:62%}.subtitle-bars span:nth-child(3){width:74%}
.audio-wave{position:absolute;left:36px;right:42px;bottom:52px;height:24px;border-radius:999px;background:repeating-linear-gradient(90deg,rgba(91,215,255,.42) 0 4px,transparent 4px 8px),linear-gradient(90deg,rgba(91,215,255,.12),rgba(91,215,255,.02));mask-image:linear-gradient(180deg,transparent 0,black 24%,black 76%,transparent 100%)}
.creation-preview-scene.stage-4 .color-wheels i{animation:wheelTurn 5.5s linear infinite}

/* Scene 5: delivery */
.delivery-master{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);padding:16px 18px;border-radius:16px;border:1px solid rgba(94,214,154,.28);background:rgba(94,214,154,.08);font-family:"Space Grotesk",Inter,sans-serif;font-size:22px;letter-spacing:-.5px;color:#eefbf6;box-shadow:0 0 24px rgba(94,214,154,.08)}
.delivery-outputs{position:absolute;left:34px;right:34px;bottom:52px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.delivery-outputs span{display:grid;place-items:center;min-height:52px;border-radius:14px;border:1px solid rgba(255,255,255,.05);background:rgba(255,255,255,.04);font-size:12px;color:#d5e2e7}
.delivery-arrows,.delivery-arrows::before,.delivery-arrows::after{content:"";position:absolute;height:1px;background:linear-gradient(90deg,transparent,rgba(94,214,154,.55),transparent)}
.delivery-arrows{left:50%;top:54%;width:230px;transform:translateX(-50%)}
.delivery-arrows::before{left:-72px;top:58px;width:74px;transform:rotate(46deg)}
.delivery-arrows::after{right:-72px;top:58px;width:74px;transform:rotate(-46deg)}
.creation-preview-scene.stage-5 .delivery-outputs span{animation:deliverPop 3s ease-in-out infinite}
.creation-preview-scene.stage-5 .delivery-outputs span:nth-child(2){animation-delay:.2s}.creation-preview-scene.stage-5 .delivery-outputs span:nth-child(3){animation-delay:.4s}

/* Visual states of the production preview */
.creation-preview-scene.stage-2 .shoot-subject{box-shadow:0 0 30px rgba(18,166,220,.10)}
.creation-preview-scene.stage-3 .edit-preview-window{box-shadow:0 0 28px rgba(18,166,220,.08)}
.creation-preview-scene.stage-5 .preview-stage-label{border-color:rgba(94,214,154,.18)}

@keyframes studioRecPulse{0%,100%{opacity:.45}50%{opacity:1}}
@keyframes floatSoft{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes routeMove{0%{left:0}100%{left:100%}}
@keyframes meterBounce{from{transform:scaleY(.75);opacity:.75}to{transform:scaleY(1.14);opacity:1}}
@keyframes playheadMove{from{left:18%}to{left:84%}}
@keyframes wheelTurn{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes deliverPop{0%,100%{transform:translateY(0);opacity:.95}50%{transform:translateY(-5px);opacity:1}}

@keyframes studioRecPulse{0%,100%{opacity:.45}50%{opacity:1}}

@media(max-width:1050px){
  .creation-layout{grid-template-columns:1fr}
  .creation-studio{min-height:auto}
  .creation-preview-scene{height:330px}
  .creation-examples{grid-template-columns:repeat(2,1fr)}
  .creation-examples article:nth-child(2){border-right:0}
  .creation-examples article:nth-child(-n+2){border-bottom:1px solid #e0e8eb}
}
@media(max-width:650px){
  .creation-types{grid-template-columns:1fr}
  .creation-preview-scene{height:260px}
  .creation-timeline{grid-template-columns:repeat(3,1fr)}
  .creation-track{display:none}
  .studio-detail{grid-template-columns:1fr}
  .creation-examples{grid-template-columns:1fr}
  .creation-examples article{border-right:0;border-bottom:1px solid #e0e8eb}
  .creation-examples article:last-child{border-bottom:0}
}
@media(prefers-reduced-motion:reduce){
  .studio-status-dot{animation:none!important}
}

.creation-intro-card,.creation-result-panel,.creation-studio,.creation-examples{
  --mx:50%;--my:50%;
}

@media(max-width:650px){
  .idea-center-card{width:150px;padding:14px 12px}.idea-center-card strong{font-size:18px}
  .node-a{left:12px;top:38px}.node-b{right:12px;top:76px}.node-c{left:28px;bottom:72px}
  .plan-storyboard{left:18px;top:42px;gap:7px}.sb-card{width:54px;height:70px}
  .plan-sheet{right:18px;top:42px;width:114px;padding:12px}
  .shoot-camera{left:22px;top:70px;transform:scale(.88);transform-origin:left top}
  .shoot-subject{right:14px;bottom:60px;width:102px;height:134px}
  .shoot-audio-meter{left:136px;bottom:66px;gap:4px}
  .preview-camera-frame{inset:50px 18px 72px 18px}
  .edit-preview-window{left:18px;right:18px;top:40px;height:104px}
  .edit-timeline{left:18px;right:18px;bottom:64px}
  .post-preview{left:18px;top:40px;width:112px;height:82px}.color-wheels{right:16px;top:42px;gap:8px}.color-wheels i{width:42px;height:42px}
  .subtitle-bars{left:18px;right:18px;bottom:96px}.audio-wave{left:18px;right:18px;bottom:58px}
  .delivery-master{font-size:18px;padding:14px 16px}.delivery-outputs{left:14px;right:14px;bottom:62px;gap:8px}.delivery-outputs span{min-height:44px;font-size:11px}.delivery-arrows{width:160px;top:54%}
}
@media(prefers-reduced-motion:reduce){
  .creation-preview-scene *{animation:none!important}
}


/* =========================================================
   Production Workflow v3 — simpler, clearer stage animation
   ========================================================= */
.creation-preview-scene{
  height:315px;
  background:
    radial-gradient(circle at 50% 44%,rgba(18,166,220,.09),transparent 28%),
    linear-gradient(135deg,#131d24,#080c10);
}
.workflow-scene.simple-scene{
  position:absolute;
  inset:34px 28px 54px;
  opacity:0;
  transform:translateY(7px);
  transition:opacity .34s ease,transform .34s ease;
  pointer-events:none;
}
.creation-preview-scene.stage-0 .simple-idea,
.creation-preview-scene.stage-1 .simple-plan,
.creation-preview-scene.stage-2 .simple-shoot,
.creation-preview-scene.stage-3 .simple-edit,
.creation-preview-scene.stage-4 .simple-post,
.creation-preview-scene.stage-5 .simple-delivery{
  opacity:1;
  transform:none;
}

/* Global HUD behaviour */
.creation-preview-scene .preview-rec{opacity:.18}
.creation-preview-scene.stage-2 .preview-rec{opacity:1}
.creation-preview-scene .preview-stage-label{z-index:20}
.creation-preview-scene .preview-timecode{z-index:20}
.creation-preview-scene .preview-gridlines{opacity:.7}

/* 01 — IDEA: brief at center, three clearly related decisions */
.simple-idea{display:grid;place-items:center}
.idea-brief{
  width:205px;
  padding:18px 16px;
  text-align:center;
  border-radius:18px;
  background:#0d151b;
  border:1px solid rgba(91,215,255,.24);
  box-shadow:0 0 28px rgba(18,166,220,.07);
  z-index:3;
}
.idea-brief span,.idea-brief strong,.idea-brief small{display:block}
.idea-brief span{font-size:8px;letter-spacing:1.6px;color:#75bdda;font-weight:800;margin-bottom:7px}
.idea-brief strong{font-family:"Space Grotesk",Inter,sans-serif;font-size:20px;color:#eef8fb;letter-spacing:-.55px;margin-bottom:6px}
.idea-brief small{font-size:10px;color:#8fa3ac}
.idea-satellite{
  position:absolute;
  min-width:78px;
  padding:8px 11px;
  border-radius:999px;
  text-align:center;
  border:1px solid rgba(255,255,255,.09);
  background:#111920;
  font-size:10px;color:#c3d1d7;
}
.sat-1{left:18px;top:24px}
.sat-2{right:18px;top:24px}
.sat-3{left:50%;bottom:13px;transform:translateX(-50%)}
.idea-beam{position:absolute;height:1px;background:rgba(91,215,255,.27);transform-origin:left center}
.beam-1{left:100px;top:65px;width:90px;transform:rotate(24deg)}
.beam-2{left:calc(50% + 12px);top:58px;width:88px;transform:rotate(-24deg);transform-origin:left center}
.beam-3{left:50%;bottom:43px;width:1px;height:46px}
.creation-preview-scene.stage-0 .idea-brief{animation:ideaFocus 2.8s ease-in-out infinite}

/* 02 — PLANNING: storyboard + checklist */
.simple-plan{display:grid;grid-template-columns:1.08fr .92fr;gap:18px;align-items:center}
.plan-board,.plan-checklist{
  border-radius:16px;border:1px solid rgba(255,255,255,.05);background:#0d151b;padding:14px
}
.plan-board-head{font-size:8px;letter-spacing:1.4px;color:#7f9aa6;margin-bottom:11px}
.plan-shots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.plan-shots i{display:block;height:82px;border-radius:9px;border:1px solid rgba(91,215,255,.16);background:linear-gradient(160deg,rgba(91,215,255,.14),rgba(91,215,255,.025))}
.plan-shots i:nth-child(2){background:linear-gradient(20deg,rgba(91,215,255,.10),rgba(255,255,255,.025))}
.plan-checklist strong{display:block;font-size:9px;letter-spacing:1.2px;color:#c5d4da;margin-bottom:11px}
.plan-checklist span{display:block;position:relative;padding:7px 8px 7px 25px;margin-bottom:6px;border-radius:8px;background:rgba(255,255,255,.02);font-size:10px;color:#81949d}
.plan-checklist span::before{content:"";position:absolute;left:8px;top:50%;width:8px;height:8px;border-radius:50%;transform:translateY(-50%);border:1px solid #52636b}
.plan-checklist span.done{color:#bad0d8}
.plan-checklist span.done::before{background:var(--green);border-color:var(--green);box-shadow:0 0 7px rgba(94,214,154,.35)}
.plan-progress{position:absolute;left:18px;right:18px;bottom:8px;height:2px;background:#162229;border-radius:999px;overflow:hidden}
.plan-progress b{display:block;width:72%;height:100%;background:linear-gradient(90deg,var(--cyan),var(--cyan-2));animation:planFill 2.8s ease-in-out infinite alternate}

/* 03 — SHOOT: actual camera + framed subject + audio meters */
.simple-shoot{display:grid;grid-template-columns:.75fr 1.25fr;gap:16px;align-items:center}
.shoot-camera-img{
  display:block;width:108px;height:108px;object-fit:contain;justify-self:center;
  filter:drop-shadow(0 10px 18px rgba(18,166,220,.13))
}
.shoot-viewfinder{
  position:relative;height:172px;border:1px solid rgba(255,255,255,.09);
  border-radius:14px;background:linear-gradient(135deg,#101b22,#0b1217);overflow:hidden
}
.shoot-person{
  position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:85px;height:133px;border-radius:44px 44px 16px 16px;
  border:1px solid rgba(91,215,255,.16);
  background:linear-gradient(180deg,rgba(91,215,255,.16),rgba(91,215,255,.03))
}
.vf-corner{position:absolute;width:25px;height:25px;border-color:var(--cyan-2);opacity:.72}
.c1{left:13px;top:13px;border-left:2px solid;border-top:2px solid}
.c2{right:13px;top:13px;border-right:2px solid;border-top:2px solid}
.c3{left:13px;bottom:13px;border-left:2px solid;border-bottom:2px solid}
.c4{right:13px;bottom:13px;border-right:2px solid;border-bottom:2px solid}
.shoot-meters{position:absolute;right:16px;bottom:15px;height:38px;display:flex;gap:4px;align-items:flex-end}
.shoot-meters i{display:block;width:5px;border-radius:4px;background:linear-gradient(180deg,var(--green),var(--cyan));animation:shootMeter .8s ease-in-out infinite alternate}
.shoot-meters i:nth-child(1){height:35%}.shoot-meters i:nth-child(2){height:65%;animation-delay:.1s}.shoot-meters i:nth-child(3){height:90%;animation-delay:.2s}.shoot-meters i:nth-child(4){height:55%;animation-delay:.3s}.shoot-meters i:nth-child(5){height:75%;animation-delay:.4s}
.shoot-rec{position:absolute;right:18px;top:14px;font:9px monospace;color:#e5eef1;display:flex;align-items:center;gap:6px}
.shoot-rec i{width:6px;height:6px;border-radius:50%;background:#ef5555;box-shadow:0 0 8px rgba(239,85,85,.55)}
.creation-preview-scene.stage-2 .shoot-viewfinder{animation:focusBreath 2.4s ease-in-out infinite}

/* 04 — EDIT: preview + unmistakable timeline */
.simple-edit{display:grid;grid-template-rows:1fr 76px;gap:12px}
.edit-monitor{position:relative;border-radius:14px;border:1px solid rgba(91,215,255,.15);background:#0b1217;padding:10px}
.edit-image{height:100%;border-radius:10px;background:radial-gradient(circle at 45% 42%,rgba(91,215,255,.18),transparent 19%),linear-gradient(140deg,#16232c,#0c1318)}
.edit-monitor>span{position:absolute;left:17px;top:17px;font-size:8px;letter-spacing:1.4px;color:#869aa3}
.edit-panel{position:relative;padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.06);background:#0a1014;display:grid;gap:7px}
.edit-row{height:10px;border-radius:4px}
.r1{background:linear-gradient(90deg,#168bb8 0 58%,#23424f 58% 82%,#142028 82%)}
.r2{background:linear-gradient(90deg,#526a75 0 34%,#2b819e 34% 68%,#1c2a31 68%)}
.r3{background:linear-gradient(90deg,#33444d 0 48%,#56707a 48% 72%,#172228 72%)}
.edit-playhead{position:absolute;top:7px;bottom:7px;width:2px;background:#fff;left:24%;box-shadow:0 0 8px rgba(255,255,255,.45);animation:editPlay 3s linear infinite}

/* 05 — POST: one preview plus three recognisable finishing tools */
.simple-post{display:grid;grid-template-columns:1.05fr .95fr;gap:14px;align-items:center}
.post-monitor{height:166px;padding:10px;border-radius:14px;border:1px solid rgba(255,255,255,.05);background:#0b1217}
.post-image{height:120px;border-radius:10px;background:linear-gradient(135deg,rgba(18,166,220,.15),rgba(91,215,255,.04)),radial-gradient(circle at 55% 40%,rgba(255,190,105,.16),transparent 25%)}
.post-monitor>span{display:block;margin-top:7px;font-size:8px;letter-spacing:1.2px;color:#7f939c}
.post-tools{display:grid;gap:10px}
.post-wheel{width:70px;height:70px;border-radius:50%;justify-self:center;background:conic-gradient(#64d5ff,#70d6a2,#f0b76f,#c87fff,#64d5ff);opacity:.82;box-shadow:inset 0 0 0 12px #111a20;animation:postWheel 6s linear infinite}
.post-wave{height:30px;border-radius:8px;background:repeating-linear-gradient(90deg,rgba(91,215,255,.45) 0 4px,transparent 4px 8px),rgba(91,215,255,.04);mask-image:linear-gradient(180deg,transparent 0,black 24%,black 76%,transparent 100%)}
.post-caption{padding:9px;border-radius:9px;background:rgba(255,255,255,.02);display:grid;gap:5px}
.post-caption span{height:6px;border-radius:999px;background:rgba(255,255,255,.18)}
.post-caption span:nth-child(2){width:72%}

/* 06 — DELIVERY: master visibly branches to outputs */
.simple-delivery{display:grid;place-items:center}
.master-file{
  width:148px;padding:18px 14px;border-radius:17px;text-align:center;
  border:1px solid rgba(94,214,154,.28);background:rgba(94,214,154,.075);
  box-shadow:0 0 25px rgba(94,214,154,.07);z-index:3
}
.master-file span,.master-file strong,.master-file small{display:block}
.master-file span{font-size:8px;letter-spacing:1.4px;color:#7ca58f;margin-bottom:6px}
.master-file strong{font-family:"Space Grotesk",Inter,sans-serif;font-size:20px;color:#effaf4;margin-bottom:5px}
.master-file small{font-size:9px;color:#6fd49d}
.delivery-target{
  position:absolute;bottom:8px;min-width:76px;padding:9px 10px;border-radius:11px;text-align:center;
  border:1px solid rgba(255,255,255,.05);background:#10181d;color:#c5d4da;font-size:9px;letter-spacing:.7px
}
.target-web{left:18px}.target-social{left:50%;transform:translateX(-50%)}.target-archive{right:18px}
.delivery-line{position:absolute;left:50%;top:58%;height:1px;background:rgba(94,214,154,.38);transform-origin:left center}
.dl-1{width:132px;transform:rotate(147deg)}
.dl-2{width:92px;transform:translateX(-1px) rotate(90deg)}
.dl-3{width:132px;transform:rotate(33deg)}
.creation-preview-scene.stage-5 .delivery-target{animation:targetGlow 2.8s ease-in-out infinite}
.creation-preview-scene.stage-5 .target-social{animation-delay:.25s}.creation-preview-scene.stage-5 .target-archive{animation-delay:.5s}

/* Animation primitives */
@keyframes ideaFocus{0%,100%{box-shadow:0 0 22px rgba(18,166,220,.05)}50%{box-shadow:0 0 36px rgba(18,166,220,.13)}}
@keyframes planFill{from{width:38%}to{width:82%}}
@keyframes shootMeter{from{transform:scaleY(.7);opacity:.7}to{transform:scaleY(1.15);opacity:1}}
@keyframes focusBreath{0%,100%{border-color:rgba(255,255,255,.09)}50%{border-color:rgba(91,215,255,.24)}}
@keyframes editPlay{from{left:8%}to{left:92%}}
@keyframes postWheel{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes targetGlow{0%,100%{border-color:rgba(255,255,255,.08);transform:translateY(0)}50%{border-color:rgba(94,214,154,.28);transform:translateY(-3px)}}
.target-social{transform:translateX(-50%)}
.creation-preview-scene.stage-5 .target-social{animation-name:targetGlowCenter}
@keyframes targetGlowCenter{0%,100%{border-color:rgba(255,255,255,.08);transform:translateX(-50%) translateY(0)}50%{border-color:rgba(94,214,154,.28);transform:translateX(-50%) translateY(-3px)}}

@media(max-width:650px){
  .workflow-scene.simple-scene{inset:38px 14px 58px}
  .simple-plan,.simple-shoot,.simple-post{grid-template-columns:1fr 1fr;gap:9px}
  .plan-shots{gap:5px}.plan-shots i{height:62px}
  .plan-checklist{padding:10px}.plan-checklist span{padding:5px 6px 5px 21px;font-size:9px}
  .shoot-camera-img{width:78px;height:78px}
  .shoot-viewfinder{height:145px}
  .post-monitor{height:145px}.post-image{height:100px}
  .post-wheel{width:56px;height:56px;box-shadow:inset 0 0 0 10px #111a20}
  .idea-satellite{font-size:9px;min-width:64px;padding:7px 8px}
  .sat-1{left:2px}.sat-2{right:2px}.sat-3{bottom:2px}
}
@media(prefers-reduced-motion:reduce){
  .simple-scene *{animation:none!important}
}


/* =========================================================
   Production Workflow v4 — refined polish and clearer motion
   ========================================================= */
.creation-preview-scene{
  position:relative;
  overflow:hidden;
}
.creation-preview-scene::before,
.creation-preview-scene::after{
  content:"";
  position:absolute;
  inset:-18%;
  pointer-events:none;
  transition:opacity .55s ease, transform .75s cubic-bezier(.2,.7,.2,1), background .55s ease;
}
.creation-preview-scene::before{
  opacity:.55;
  transform:scale(1.01);
  background:radial-gradient(circle at 50% 35%,rgba(91,215,255,.08),transparent 34%);
}
.creation-preview-scene::after{
  opacity:.35;
  transform:rotate(0deg);
  background:linear-gradient(125deg,transparent 0 40%,rgba(255,255,255,.025) 50%,transparent 60% 100%);
}
.creation-preview-scene.stage-0::before{background:radial-gradient(circle at 50% 38%,rgba(91,215,255,.10),transparent 34%)}
.creation-preview-scene.stage-1::before{background:radial-gradient(circle at 40% 46%,rgba(91,215,255,.09),transparent 36%)}
.creation-preview-scene.stage-2::before{background:radial-gradient(circle at 64% 44%,rgba(91,215,255,.11),transparent 34%)}
.creation-preview-scene.stage-3::before{background:radial-gradient(circle at 48% 42%,rgba(91,215,255,.12),transparent 38%)}
.creation-preview-scene.stage-4::before{background:radial-gradient(circle at 42% 40%,rgba(91,215,255,.10),transparent 36%),radial-gradient(circle at 72% 42%,rgba(240,183,111,.06),transparent 18%)}
.creation-preview-scene.stage-5::before{background:radial-gradient(circle at 50% 42%,rgba(94,214,154,.12),transparent 38%)}
.creation-preview-scene.stage-5::after{background:linear-gradient(125deg,transparent 0 40%,rgba(94,214,154,.05) 50%,transparent 60% 100%)}

.simple-scene{
  will-change:opacity,transform;
}
.creation-preview-scene.scene-transition .simple-scene{
  transition-duration:.46s;
}

/* Stronger clarity on active stage */
.creation-step{
  transition:background .22s ease,border-color .22s ease,color .22s ease,transform .22s ease, box-shadow .22s ease;
}
.creation-step:hover{transform:translateY(-1px)}
.creation-step.active{
  transform:translateY(-2px);
  box-shadow:0 8px 16px rgba(18,166,220,.09);
}
.creation-step.active b{color:#dff7ff}

/* IDEA */

/* PLANNING */
.plan-checklist span{transition:background .22s ease, color .22s ease, border-color .22s ease}
.creation-preview-scene.stage-1 .plan-checklist span:nth-child(2),
.creation-preview-scene.stage-1 .plan-checklist span:nth-child(3),
.creation-preview-scene.stage-1 .plan-checklist span:nth-child(4),
.creation-preview-scene.stage-1 .plan-checklist span:nth-child(5){
  animation:checkSweep 2.8s ease-in-out infinite;
}
.creation-preview-scene.stage-1 .plan-checklist span:nth-child(3){animation-delay:.22s}
.creation-preview-scene.stage-1 .plan-checklist span:nth-child(4){animation-delay:.44s}
.creation-preview-scene.stage-1 .plan-checklist span:nth-child(5){animation-delay:.66s}
.creation-preview-scene.stage-1 .plan-shots i{animation:shotLift 3.2s ease-in-out infinite}
.creation-preview-scene.stage-1 .plan-shots i:nth-child(2){animation-delay:.16s}
.creation-preview-scene.stage-1 .plan-shots i:nth-child(3){animation-delay:.32s}

/* SHOOT */
.creation-preview-scene.stage-2 .shoot-camera-img{animation:cameraFloat 2.8s ease-in-out infinite}
.creation-preview-scene.stage-2 .shoot-person{animation:subjectBreath 2.6s ease-in-out infinite}
.creation-preview-scene.stage-2 .vf-corner{animation:finderGlow 1.9s ease-in-out infinite}
.creation-preview-scene.stage-2 .vf-corner.c2{animation-delay:.18s}
.creation-preview-scene.stage-2 .vf-corner.c3{animation-delay:.36s}
.creation-preview-scene.stage-2 .vf-corner.c4{animation-delay:.54s}

/* EDIT */
.creation-preview-scene.stage-3 .edit-monitor{box-shadow:0 0 0 1px rgba(91,215,255,.08), 0 0 26px rgba(18,166,220,.08)}
.creation-preview-scene.stage-3 .edit-row{animation:clipPulse 2.8s ease-in-out infinite}
.creation-preview-scene.stage-3 .r2{animation-delay:.25s}
.creation-preview-scene.stage-3 .r3{animation-delay:.5s}
.creation-preview-scene.stage-3 .edit-image{animation:previewPan 5s ease-in-out infinite}

/* POST */
.creation-preview-scene.stage-4 .post-monitor{box-shadow:0 0 0 1px rgba(91,215,255,.06), 0 0 24px rgba(18,166,220,.06)}
.creation-preview-scene.stage-4 .post-wave{background-position:0 0; animation:waveTravel 2s linear infinite}
.creation-preview-scene.stage-4 .post-caption span{animation:captionBlink 2.6s ease-in-out infinite}
.creation-preview-scene.stage-4 .post-caption span:nth-child(2){animation-delay:.28s}

/* DELIVERY */
.delivery-line{overflow:visible}
.delivery-line::after{
  content:"";
  position:absolute;
  left:0;top:50%;
  width:10px;height:10px;border-radius:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,#effaf4 0 30%,#6fd49d 32%,rgba(111,212,157,.22) 65%,transparent 72%);
  box-shadow:0 0 12px rgba(111,212,157,.42);
  opacity:0;
}
.creation-preview-scene.stage-5 .dl-1::after,
.creation-preview-scene.stage-5 .dl-2::after,
.creation-preview-scene.stage-5 .dl-3::after{animation:packetRun 2.2s ease-in-out infinite}
.creation-preview-scene.stage-5 .dl-2::after{animation-delay:.18s}
.creation-preview-scene.stage-5 .dl-3::after{animation-delay:.36s}
.creation-preview-scene.stage-5 .master-file{animation:masterGlow 2.8s ease-in-out infinite}

/* Text / label polish */
.preview-stage-label,
#creationStageTitle,
#creationStageDetail,
#creationProgressLabel{
  transition:opacity .24s ease, transform .24s ease;
}
.creation-stage-update{
  opacity:.7;
  transform:translateY(3px);
}

@keyframes ideaSatellite{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes beamPulse{0%,100%{opacity:.38}50%{opacity:.78}}
@keyframes checkSweep{0%,100%{background:rgba(255,255,255,.035)}50%{background:rgba(91,215,255,.09)}}
@keyframes shotLift{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes cameraFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes subjectBreath{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.03)}}
@keyframes finderGlow{0%,100%{opacity:.72}50%{opacity:1; filter:drop-shadow(0 0 6px rgba(91,215,255,.35))}}
@keyframes clipPulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.16)}}
@keyframes previewPan{0%,100%{background-position:48% 42%,0 0}50%{background-position:54% 46%,0 0}}
@keyframes waveTravel{from{background-position:0 0,0 0}to{background-position:24px 0,0 0}}
@keyframes captionBlink{0%,100%{opacity:.72}50%{opacity:1}}
@keyframes packetRun{0%{left:0;opacity:0}14%{opacity:1}86%{opacity:1}100%{left:100%;opacity:0}}
@keyframes masterGlow{0%,100%{box-shadow:0 0 24px rgba(94,214,154,.07)}50%{box-shadow:0 0 36px rgba(94,214,154,.14)}}

@media(max-width:650px){
  .creation-preview-scene::before{opacity:.44}
  .creation-step.active{transform:none;box-shadow:none}
}
@media(prefers-reduced-motion:reduce){
  .creation-preview-scene::before,
  .creation-preview-scene::after,
  .simple-scene *{animation:none!important}
}


/* =========================================================
   Production Workflow v5 — anti-flicker + proportion fixes
   ========================================================= */
.creation-studio{
  min-height:620px;
}
.studio-preview{
  padding:9px;
}
.creation-preview-scene{
  height:clamp(290px, 33vw, 350px);
  aspect-ratio:16 / 9;
  background:
    radial-gradient(circle at 50% 44%,rgba(18,166,220,.075),transparent 30%),
    linear-gradient(135deg,#131c23,#090d11);
}
.creation-preview-scene::before{
  opacity:.44;
  transform:none;
}
.creation-preview-scene::after{
  opacity:.16;
  transform:none;
}
.workflow-scene.simple-scene{
  inset:30px 28px 56px;
  transform:translateY(4px);
  transition:opacity .26s ease, transform .26s ease;
}
.creation-preview-scene.stage-0 .simple-idea,
.creation-preview-scene.stage-1 .simple-plan,
.creation-preview-scene.stage-2 .simple-shoot,
.creation-preview-scene.stage-3 .simple-edit,
.creation-preview-scene.stage-4 .simple-post,
.creation-preview-scene.stage-5 .simple-delivery{
  transform:none;
}
.preview-stage-label{
  left:18px; right:18px; bottom:16px;
  padding:10px 12px;
}
.preview-timecode{right:16px; top:15px}
.preview-rec{left:16px; top:15px}

/* Unified internal proportions */
.idea-brief{width:200px; padding:16px 15px}
.idea-satellite{min-width:74px; font-size:10px}
.sat-1{left:18px;top:20px}
.sat-2{right:18px;top:20px}
.sat-3{bottom:8px}
.beam-1{left:98px;top:58px;width:86px}
.beam-2{left:calc(50% + 12px);top:58px;width:88px;transform:rotate(-24deg);transform-origin:left center}
.beam-3{bottom:38px;height:40px}

.simple-plan{grid-template-columns:1fr 1fr; gap:14px}
.plan-board,.plan-checklist{padding:13px}
.plan-shots i{height:76px}
.plan-progress{left:14px; right:14px; bottom:10px}

.simple-shoot{grid-template-columns:.86fr 1.14fr; gap:14px}
.shoot-camera-img{width:96px; height:96px}
.shoot-viewfinder{height:164px}
.shoot-person{width:82px; height:128px}
.shoot-meters{right:14px; bottom:13px}
.shoot-rec{right:14px; top:12px}

.simple-edit{grid-template-rows:1fr 70px; gap:10px}
.edit-monitor{padding:9px}
.edit-panel{padding:10px 11px}
.edit-row{height:9px}

.simple-post{grid-template-columns:1.02fr .98fr; gap:12px}
.post-monitor{height:160px; padding:9px}
.post-image{height:114px}
.post-tools{gap:9px}
.post-wheel{width:66px; height:66px}
.post-wave{height:28px}

.master-file{width:144px; padding:16px 12px}
.master-file strong{font-size:19px}
.delivery-target{min-width:72px; padding:8px 9px; bottom:10px}
.target-web{left:18px}
.target-archive{right:18px}
.dl-1{width:124px}
.dl-2{width:86px}
.dl-3{width:124px}

/* Tone down excessive motion that felt like flicker */
.creation-preview-scene.stage-0 .idea-brief,
.creation-preview-scene.stage-1 .plan-progress b,
.creation-preview-scene.stage-2 .shoot-viewfinder,
.creation-preview-scene.stage-3 .edit-monitor,
.creation-preview-scene.stage-4 .post-monitor,
.creation-preview-scene.stage-5 .master-file{
  backface-visibility:hidden;
  transform:translateZ(0);
}
.creation-preview-scene.stage-0 .idea-satellite,
.creation-preview-scene.stage-1 .plan-shots i,
.creation-preview-scene.stage-1 .plan-checklist span,
.creation-preview-scene.stage-2 .shoot-camera-img,
.creation-preview-scene.stage-2 .shoot-person,
.creation-preview-scene.stage-2 .vf-corner,
.creation-preview-scene.stage-3 .edit-row,
.creation-preview-scene.stage-3 .edit-image,
.creation-preview-scene.stage-4 .post-caption span,
.creation-preview-scene.stage-4 .post-wave,
.creation-preview-scene.stage-5 .delivery-target,
.creation-preview-scene.stage-5 .delivery-line::after{
  animation-duration:3.6s !important;
}
.creation-preview-scene.stage-2 .shoot-meters i{animation-duration:1.2s !important}
.creation-preview-scene.stage-3 .edit-playhead{animation-duration:4.2s !important}
.creation-preview-scene.stage-4 .post-wheel{animation-duration:10s !important}

/* Better mobile proportions */
@media(max-width:1050px){
  .creation-studio{min-height:auto}
  .creation-preview-scene{height:320px}
}
@media(max-width:760px){
  .creation-preview-scene{height:280px}
  .workflow-scene.simple-scene{inset:26px 18px 54px}
  .idea-brief{width:172px}
  .idea-brief strong{font-size:18px}
  .sat-1{left:2px; top:12px}
  .sat-2{right:2px; top:12px}
  .sat-3{bottom:2px}
  .beam-1{left:80px; top:44px; width:68px}
  .beam-2{left:calc(50% + 8px); top:44px; width:64px; transform:rotate(-24deg); transform-origin:left center}
  .beam-3{bottom:30px; height:34px}

  .simple-plan,.simple-shoot,.simple-post{grid-template-columns:1fr 1fr; gap:10px}
  .plan-shots i{height:58px}
  .plan-board,.plan-checklist{padding:10px}
  .plan-checklist strong{font-size:8px; margin-bottom:8px}
  .plan-checklist span{font-size:9px; padding:5px 6px 5px 19px; margin-bottom:5px}
  .plan-checklist span::before{left:7px; width:7px; height:7px}

  .shoot-camera-img{width:72px; height:72px}
  .shoot-viewfinder{height:136px}
  .shoot-person{width:68px; height:105px}
  .vf-corner{width:20px; height:20px}

  .edit-monitor{padding:8px}
  .edit-panel{padding:9px 10px}
  .simple-edit{grid-template-rows:1fr 64px}

  .post-monitor{height:136px}
  .post-image{height:94px}
  .post-wheel{width:54px; height:54px; box-shadow:inset 0 0 0 9px #111a20}
  .post-wave{height:24px}

  .master-file{width:124px; padding:14px 10px}
  .master-file strong{font-size:17px}
  .delivery-target{min-width:62px; padding:7px 8px; font-size:8px; bottom:10px}
  .dl-1{width:96px}
  .dl-2{width:68px}
  .dl-3{width:96px}
}
@media(max-width:560px){
  .creation-preview-scene{height:258px}
  .workflow-scene.simple-scene{inset:22px 12px 50px}
  .preview-stage-label{left:12px; right:12px; bottom:12px; padding:9px 10px; font-size:10px}
  .preview-timecode,.preview-rec{font-size:9px}
  .idea-brief{width:152px; padding:13px 11px}
  .idea-brief strong{font-size:16px}
  .idea-satellite{min-width:56px; font-size:8px; padding:6px 7px}
  .beam-1{left:66px; top:34px; width:56px}
  .beam-2{left:calc(50% + 6px); top:34px; width:52px; transform:rotate(-24deg); transform-origin:left center}
  .beam-3{height:26px; bottom:26px}
  .simple-plan,.simple-shoot,.simple-post{gap:8px}
  .plan-shots i{height:46px}
  .shoot-camera-img{width:60px; height:60px}
  .shoot-viewfinder{height:118px}
  .shoot-person{width:58px; height:88px}
  .shoot-meters i{width:4px}
  .edit-monitor>span,.post-monitor>span{font-size:7px}
  .post-monitor{height:122px}
  .post-image{height:82px}
  .master-file{width:112px}
  .master-file strong{font-size:15px}
  .delivery-target{min-width:54px; padding:6px 6px}
  .target-web{left:2px}.target-archive{right:2px}
  .dl-1{width:84px}.dl-2{width:56px}.dl-3{width:84px}
}
@media(prefers-reduced-motion:reduce){
  .workflow-scene.simple-scene,
  .creation-preview-scene::before,
  .creation-preview-scene::after{transition:none !important}
}


/* =========================================================
   Production Workflow v6 — ordered stage 01 layout
   ========================================================= */
/* Rebuild the IDEA stage to avoid visual clutter */
.simple-idea{
  display:block;
}
.idea-brief{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:196px;
  padding:16px 14px;
  text-align:center;
  border-radius:18px;
  background:#0d151b;
  border:1px solid rgba(91,215,255,.22);
  box-shadow:0 0 24px rgba(18,166,220,.06);
  z-index:3;
}
.idea-brief span,.idea-brief strong,.idea-brief small{display:block}
.idea-brief span{font-size:8px;letter-spacing:1.55px;color:#77bdd8;font-weight:800;margin-bottom:6px}
.idea-brief strong{font-family:"Space Grotesk",Inter,sans-serif;font-size:19px;line-height:1.08;color:#eef8fb;letter-spacing:-.45px;margin-bottom:6px}
.idea-brief small{font-size:10px;color:#8ea2ab;line-height:1.45}

.idea-satellite{
  position:absolute;
  width:86px;
  min-width:0;
  padding:8px 10px;
  border-radius:12px;
  text-align:center;
  border:1px solid rgba(255,255,255,.05);
  background:#111920;
  font-size:10px;
  color:#c6d4d9;
  z-index:3;
}
.sat-1{left:18px; top:38px}
.sat-2{right:18px; top:38px}
.sat-3{left:50%; bottom:18px; transform:translateX(-50%)}

.idea-beam{
  position:absolute;
  height:1px;
  background:rgba(91,215,255,.24);
  z-index:2;
  opacity:.9;
}
.beam-1{
  left:98px;
  top:72px;
  width:78px;
  transform:rotate(18deg);
  transform-origin:left center;
}
.beam-2{
  left:calc(50% + 18px);
  top:72px;
  width:78px;
  transform:rotate(-18deg);
  transform-origin:left center;
}
.beam-3{
  left:50%;
  top:calc(50% + 56px);
  width:1px;
  height:34px;
  background:rgba(91,215,255,.24);
  transform:translateX(-50%);
}

/* more restrained movement */
.creation-preview-scene.stage-0 .idea-brief{animation:ideaFocusOrdered 4s ease-in-out infinite}
.creation-preview-scene.stage-0 .idea-satellite{animation:none !important}
.creation-preview-scene.stage-0 .idea-beam{animation:none !important}

@keyframes ideaFocusOrdered{
  0%,100%{box-shadow:0 0 18px rgba(18,166,220,.05)}
  50%{box-shadow:0 0 28px rgba(18,166,220,.11)}
}

@media(max-width:760px){
  .idea-brief{width:168px;padding:14px 12px}
  .idea-brief strong{font-size:17px}
  .idea-satellite{width:72px;padding:7px 8px;font-size:9px}
  .sat-1{left:4px;top:24px}
  .sat-2{right:4px;top:24px}
  .sat-3{bottom:8px}
  .beam-1{left:76px;top:52px;width:58px}
  .beam-2{left:calc(50% + 12px);top:52px;width:58px}
  .beam-3{top:calc(50% + 48px);height:28px}
}
@media(max-width:560px){
  .idea-brief{width:146px;padding:12px 10px}
  .idea-brief strong{font-size:15px}
  .idea-satellite{width:58px;padding:6px 6px;font-size:8px}
  .sat-1{left:0;top:18px}
  .sat-2{right:0;top:18px}
  .sat-3{bottom:6px}
  .beam-1{left:60px;top:40px;width:46px}
  .beam-2{left:calc(50% + 10px);top:40px;width:46px}
  .beam-3{top:calc(50% + 40px);height:22px}
}


/* =========================================================
   Production Workflow v7 — clearer proposal
   ========================================================= */
.creation-preview-scene{
  height:clamp(300px,33vw,350px);
  aspect-ratio:16/9;
  background:linear-gradient(135deg,#111920,#090d11);
}
.creation-preview-scene::before,
.creation-preview-scene::after{display:none!important}
.creation-preview-scene .preview-gridlines{
  opacity:.58;
  background-size:25% 25%;
}
.workflow-scene.simple-scene{
  inset:26px 26px 58px;
  opacity:0;
  transform:translateY(4px);
  transition:opacity .28s ease, transform .28s ease;
}
.creation-preview-scene.stage-0 .simple-idea,
.creation-preview-scene.stage-1 .simple-plan,
.creation-preview-scene.stage-2 .simple-shoot,
.creation-preview-scene.stage-3 .simple-edit,
.creation-preview-scene.stage-4 .simple-post,
.creation-preview-scene.stage-5 .simple-delivery{
  opacity:1;
  transform:none;
}
.creation-preview-scene .preview-rec{opacity:.18}
.creation-preview-scene.stage-2 .preview-rec{opacity:1}
.creation-preview-scene .preview-stage-label,
.creation-preview-scene .preview-timecode,
.creation-preview-scene .preview-rec{z-index:30}

.wf-stage-card{
  width:100%;height:100%;
  border:1px solid rgba(255,255,255,.05);
  border-radius:18px;
  background:linear-gradient(180deg,rgba(12,17,22,.95),rgba(9,13,17,.98));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
  padding:16px;
  position:relative;
  overflow:hidden;
}
.wf-stage-head{
  font-size:9px;
  letter-spacing:1.55px;
  font-weight:800;
  color:#7ca9b9;
  margin-bottom:12px;
}

/* IDEA */
.wf-idea-card{display:grid;grid-template-rows:auto 1fr auto auto;align-items:center}
.wf-brief-card{
  width:min(100%, 290px);
  margin:0 auto;
  text-align:center;
  padding:18px 16px;
  border-radius:16px;
  border:1px solid rgba(91,215,255,.2);
  background:rgba(14,22,28,.88);
  box-shadow:0 0 22px rgba(18,166,220,.06);
}
.wf-brief-card span,.wf-brief-card strong,.wf-brief-card small{display:block}
.wf-brief-card span{font-size:8px;letter-spacing:1.4px;color:#7abbd4;margin-bottom:7px}
.wf-brief-card strong{font-family:"Space Grotesk",Inter,sans-serif;font-size:22px;line-height:1.08;color:#eef8fb;letter-spacing:-.6px;margin-bottom:8px}
.wf-brief-card small{font-size:11px;color:#91a4ad;line-height:1.55}
.wf-branch-line{
  width:2px;height:34px;background:rgba(91,215,255,.24);
  margin:12px auto 8px;
  position:relative;
}
.wf-branch-line::after{
  content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:220px;height:1px;background:rgba(91,215,255,.24);
}
.wf-idea-pills{
  width:min(100%, 280px);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}
.wf-idea-pills span{
  min-height:44px;display:grid;place-items:center;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.05);
  background:#111920;
  color:#d0dee3;
  font-size:11px;
}
.creation-preview-scene.stage-0 .wf-brief-card{animation:wfGlow 4.2s ease-in-out infinite}

/* PLAN */
.wf-plan-layout{display:grid;grid-template-columns:1.05fr .95fr;gap:14px;align-items:stretch;height:calc(100% - 42px)}
.wf-storyboard,.wf-checklist{
  border-radius:14px;border:1px solid rgba(255,255,255,.05);background:#10181e;padding:13px;
}
.wf-storyboard b,.wf-checklist b{display:block;font-size:10px;letter-spacing:1.2px;color:#d6e4e8;margin-bottom:11px}
.wf-story-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.wf-story-cards i{display:block;height:88px;border-radius:10px;border:1px solid rgba(91,215,255,.14);background:linear-gradient(160deg,rgba(91,215,255,.14),rgba(91,215,255,.025))}
.wf-checklist span{display:block;position:relative;padding:8px 9px 8px 26px;margin-bottom:7px;border-radius:9px;background:rgba(255,255,255,.02);font-size:11px;color:#8fa2ab}
.wf-checklist span::before{content:"";position:absolute;left:9px;top:50%;width:8px;height:8px;border-radius:50%;transform:translateY(-50%);border:1px solid #596a72}
.wf-checklist .is-on{color:#d4e1e5}
.wf-checklist .is-on::before{background:var(--green);border-color:var(--green);box-shadow:0 0 7px rgba(94,214,154,.35)}
.wf-progress-rail{position:absolute;left:16px;right:16px;bottom:16px;height:2px;background:#17222a;border-radius:999px;overflow:hidden}
.wf-progress-rail i{display:block;width:64%;height:100%;background:linear-gradient(90deg,var(--cyan),var(--cyan-2));animation:wfProgress 4s ease-in-out infinite alternate}

/* SHOOT */
.wf-shoot-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:14px;align-items:center;height:calc(100% - 64px)}
.wf-camera-block,.wf-viewfinder-block{display:grid;place-items:center;height:100%}
.wf-camera-img{display:block;width:104px;height:104px;object-fit:contain;filter:drop-shadow(0 10px 18px rgba(18,166,220,.13))}
.wf-viewfinder{position:relative;width:100%;max-width:320px;height:174px;border-radius:15px;border:1px solid rgba(255,255,255,.09);background:linear-gradient(135deg,#101820,#0b1116);overflow:hidden}
.wf-subject{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:88px;height:136px;border-radius:44px 44px 18px 18px;background:linear-gradient(180deg,rgba(91,215,255,.16),rgba(91,215,255,.03));border:1px solid rgba(91,215,255,.14)}
.wf-vf{position:absolute;width:24px;height:24px;border-color:var(--cyan-2);opacity:.8}
.wf-vf.c1{left:14px;top:14px;border-left:2px solid;border-top:2px solid}.wf-vf.c2{right:14px;top:14px;border-right:2px solid;border-top:2px solid}.wf-vf.c3{left:14px;bottom:14px;border-left:2px solid;border-bottom:2px solid}.wf-vf.c4{right:14px;bottom:14px;border-right:2px solid;border-bottom:2px solid}
.wf-rec-tag{position:absolute;right:14px;top:12px;display:flex;align-items:center;gap:6px;font:9px monospace;color:#e6eef1}
.wf-rec-tag i{width:6px;height:6px;border-radius:50%;background:#ef5555;box-shadow:0 0 8px rgba(239,85,85,.55)}
.wf-audio-row{display:flex;align-items:flex-end;gap:5px;height:34px;margin-top:10px}
.wf-audio-row i{display:block;width:6px;border-radius:4px;background:linear-gradient(180deg,var(--green),var(--cyan));animation:wfAudio 1.1s ease-in-out infinite alternate}
.wf-audio-row i:nth-child(1){height:32%}.wf-audio-row i:nth-child(2){height:60%;animation-delay:.1s}.wf-audio-row i:nth-child(3){height:92%;animation-delay:.2s}.wf-audio-row i:nth-child(4){height:68%;animation-delay:.3s}.wf-audio-row i:nth-child(5){height:44%;animation-delay:.4s}
.wf-audio-row small{margin-left:8px;font-size:10px;color:#8ea0a9}

/* EDIT */
.wf-edit-monitor{display:grid;grid-template-rows:1fr 78px;gap:12px;height:calc(100% - 26px)}
.wf-edit-preview{border-radius:14px;border:1px solid rgba(91,215,255,.14);background:radial-gradient(circle at 45% 42%,rgba(91,215,255,.16),transparent 20%),linear-gradient(140deg,#16232c,#0c1318)}
.wf-edit-timeline{position:relative;padding:12px;border-radius:14px;border:1px solid rgba(255,255,255,.06);background:#0d1318;display:grid;gap:8px}
.wf-track{display:block;height:11px;border-radius:5px}
.wf-track.t1{background:linear-gradient(90deg,#198fbb 0 58%,#24424e 58% 82%,#142028 82%)}
.wf-track.t2{background:linear-gradient(90deg,#526a75 0 34%,#2b819e 34% 68%,#1c2a31 68%)}
.wf-track.t3{background:linear-gradient(90deg,#33444d 0 48%,#56707a 48% 72%,#172228 72%)}
.wf-playhead{position:absolute;top:10px;bottom:10px;width:2px;background:#fff;left:20%;box-shadow:0 0 8px rgba(255,255,255,.45);animation:wfPlayhead 4.4s linear infinite}

/* POST */
.wf-post-layout{display:grid;grid-template-columns:1fr .92fr;gap:14px;height:calc(100% - 26px)}
.wf-post-preview{border-radius:14px;border:1px solid rgba(255,255,255,.05);background:linear-gradient(135deg,rgba(18,166,220,.15),rgba(91,215,255,.04)),radial-gradient(circle at 55% 40%,rgba(240,190,105,.16),transparent 25%)}
.wf-post-tools{display:grid;gap:10px}
.wf-tool{padding:12px;border-radius:12px;border:1px solid rgba(255,255,255,.05);background:#10181e;display:grid;gap:4px}
.wf-tool b{font-size:12px;color:#eef8fb}
.wf-tool span{font-size:10px;color:#8fa2ab}
.wf-tool:nth-child(1){animation:wfToolPulse 5s ease-in-out infinite}.wf-tool:nth-child(2){animation:wfToolPulse 5s ease-in-out infinite .22s}.wf-tool:nth-child(3){animation:wfToolPulse 5s ease-in-out infinite .44s}

/* DELIVERY */
.wf-delivery-card{display:grid;grid-template-rows:auto 1fr auto auto;align-items:center}
.wf-master-card{width:min(100%,270px);margin:0 auto;text-align:center;padding:18px 16px;border-radius:16px;border:1px solid rgba(94,214,154,.24);background:rgba(94,214,154,.07);box-shadow:0 0 20px rgba(94,214,154,.06)}
.wf-master-card span,.wf-master-card strong,.wf-master-card small{display:block}
.wf-master-card span{font-size:8px;letter-spacing:1.4px;color:#83b498;margin-bottom:6px}
.wf-master-card strong{font-family:"Space Grotesk",Inter,sans-serif;font-size:21px;color:#effaf4;letter-spacing:-.5px;margin-bottom:7px}
.wf-master-card small{font-size:11px;color:#96ad9f;line-height:1.5}
.wf-delivery-rail{width:2px;height:32px;background:rgba(94,214,154,.28);margin:12px auto 8px;position:relative}
.wf-delivery-rail::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:220px;height:1px;background:rgba(94,214,154,.28)}
.wf-output-row{width:min(100%,280px);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.wf-output-row span{min-height:44px;display:grid;place-items:center;border-radius:12px;border:1px solid rgba(255,255,255,.05);background:#111920;color:#d0dee3;font-size:11px;animation:wfOutputPop 4.2s ease-in-out infinite}
.wf-output-row span:nth-child(2){animation-delay:.2s}.wf-output-row span:nth-child(3){animation-delay:.4s}
.creation-preview-scene.stage-5 .wf-master-card{animation:wfMasterGlow 4.2s ease-in-out infinite}

@keyframes wfGlow{0%,100%{box-shadow:0 0 18px rgba(18,166,220,.05)}50%{box-shadow:0 0 28px rgba(18,166,220,.12)}}
@keyframes wfProgress{from{width:38%}to{width:84%}}
@keyframes wfAudio{from{transform:scaleY(.72);opacity:.74}to{transform:scaleY(1.14);opacity:1}}
@keyframes wfPlayhead{from{left:9%}to{left:92%}}
@keyframes wfToolPulse{0%,100%{border-color:rgba(255,255,255,.07)}50%{border-color:rgba(91,215,255,.18)}}
@keyframes wfMasterGlow{0%,100%{box-shadow:0 0 20px rgba(94,214,154,.06)}50%{box-shadow:0 0 32px rgba(94,214,154,.14)}}
@keyframes wfOutputPop{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

@media(max-width:760px){
  .workflow-scene.simple-scene{inset:22px 16px 54px}
  .wf-stage-card{padding:12px}
  .wf-stage-head{margin-bottom:10px}
  .wf-brief-card{width:100%;padding:15px 13px}.wf-brief-card strong{font-size:19px}
  .wf-branch-line::after,.wf-delivery-rail::after{width:170px}
  .wf-idea-pills,.wf-output-row{gap:7px}.wf-idea-pills span,.wf-output-row span{min-height:40px;font-size:10px}
  .wf-plan-layout,.wf-shoot-layout,.wf-post-layout{grid-template-columns:1fr 1fr;gap:10px}
  .wf-story-cards i{height:66px}
  .wf-checklist span{padding:7px 8px 7px 24px;font-size:10px}
  .wf-camera-img{width:78px;height:78px}.wf-viewfinder{height:144px}.wf-subject{width:72px;height:110px}
  .wf-edit-monitor{grid-template-rows:1fr 68px}.wf-track{height:9px}
  .wf-tool{padding:10px}.wf-tool b{font-size:11px}
}
@media(max-width:560px){
  .creation-preview-scene{height:270px}
  .workflow-scene.simple-scene{inset:18px 12px 50px}
  .wf-stage-card{padding:10px}
  .wf-stage-head{font-size:8px;margin-bottom:8px}
  .wf-brief-card strong{font-size:16px}.wf-brief-card small{font-size:10px}
  .wf-branch-line{height:26px}.wf-branch-line::after,.wf-delivery-rail::after{width:140px}
  .wf-idea-pills span,.wf-output-row span{min-height:34px;font-size:9px}
  .wf-story-cards i{height:52px}
  .wf-checklist b,.wf-storyboard b{font-size:8px;margin-bottom:8px}
  .wf-checklist span{font-size:9px;padding:6px 6px 6px 20px}.wf-checklist span::before{left:7px;width:7px;height:7px}
  .wf-camera-img{width:64px;height:64px}.wf-viewfinder{height:122px}.wf-subject{width:60px;height:90px}.wf-vf{width:18px;height:18px}
  .wf-audio-row{height:26px;gap:4px}.wf-audio-row i{width:5px}.wf-audio-row small{font-size:9px}
  .wf-edit-monitor{grid-template-rows:1fr 58px;gap:9px}.wf-edit-timeline{padding:9px}
  .wf-post-layout{gap:8px}.wf-tool{padding:8px}.wf-tool span{font-size:9px}
  .wf-master-card{padding:14px 12px}.wf-master-card strong{font-size:17px}.wf-master-card small{font-size:10px}
}
@media(prefers-reduced-motion:reduce){
  .wf-progress-rail i,.wf-audio-row i,.wf-playhead,.wf-tool,.wf-master-card,.wf-output-row span,.wf-brief-card{animation:none!important}
}


/* =========================================================
   Production Workflow v8 — same module size, better spacing
   ========================================================= */
/* Keep the existing module dimensions. Only redistribute content inside. */
.creation-studio{min-height:600px}
.creation-preview-scene{
  height:315px;
  aspect-ratio:auto;
}
.workflow-scene.simple-scene{
  inset:30px 34px 60px;
}
.wf-stage-card{
  padding:18px 20px;
}
.wf-stage-head{
  margin-bottom:14px;
}

/* IDEA — one clear vertical hierarchy */
.wf-idea-card{
  display:grid;
  grid-template-rows:auto 1fr 32px 44px;
  align-items:center;
}
.wf-brief-card{
  width:min(100%, 330px);
  padding:18px 20px;
}
.wf-brief-card strong{font-size:21px}
.wf-branch-line{height:24px;margin:10px auto 6px}
.wf-branch-line::after{width:250px}
.wf-idea-pills{
  width:min(100%, 330px);
  gap:12px;
}
.wf-idea-pills span{min-height:42px}

/* PLANNING — wider cards, fewer visual collisions */
.wf-plan-layout{
  grid-template-columns:1fr 1fr;
  gap:18px;
  height:calc(100% - 48px);
}
.wf-storyboard,.wf-checklist{padding:15px}
.wf-story-cards{gap:10px}
.wf-story-cards i{height:78px}
.wf-checklist span{padding:7px 10px 7px 26px;margin-bottom:6px}
.wf-progress-rail{left:20px;right:20px;bottom:16px}

/* SHOOT — camera gets dedicated zone, viewfinder gets most of the width */
.wf-shoot-layout{
  grid-template-columns:120px 1fr;
  gap:22px;
  height:calc(100% - 60px);
}
.wf-camera-img{width:92px;height:92px}
.wf-viewfinder{max-width:none;height:164px}
.wf-audio-row{margin-top:8px;height:30px}

/* EDIT — preview takes more visual priority */
.wf-edit-monitor{
  grid-template-rows:minmax(118px,1fr) 70px;
  gap:14px;
}
.wf-edit-preview{min-height:118px}
.wf-edit-timeline{padding:11px 13px;gap:7px}
.wf-track{height:10px}

/* POST — preview and tools balanced vertically */
.wf-post-layout{
  grid-template-columns:1.1fr .9fr;
  gap:18px;
}
.wf-post-preview{min-height:152px}
.wf-post-tools{gap:9px}
.wf-tool{padding:11px 12px}

/* DELIVERY — simple top-to-bottom structure */
.wf-delivery-card{
  display:grid;
  grid-template-rows:auto 1fr 28px 42px;
  align-items:center;
}
.wf-master-card{width:min(100%,300px);padding:16px 18px}
.wf-delivery-rail{height:22px;margin:8px auto 4px}
.wf-delivery-rail::after{width:250px}
.wf-output-row{width:min(100%,330px);gap:12px}
.wf-output-row span{min-height:40px}

/* Reduce animation amplitude so it feels spacious, not busy */
@keyframes wfAudio{from{transform:scaleY(.82);opacity:.8}to{transform:scaleY(1.06);opacity:1}}
@keyframes wfOutputPop{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}

/* Tablet: preserve original preview height, adjust only internals */
@media(max-width:1050px){
  .creation-preview-scene{height:315px}
  .workflow-scene.simple-scene{inset:28px 28px 58px}
  .wf-stage-card{padding:16px 17px}
  .wf-shoot-layout{grid-template-columns:105px 1fr;gap:16px}
  .wf-camera-img{width:82px;height:82px}
  .wf-plan-layout,.wf-post-layout{gap:14px}
}

/* Mobile: keep the same section logic but simplify density */
@media(max-width:760px){
  .creation-preview-scene{height:280px}
  .workflow-scene.simple-scene{inset:24px 16px 54px}
  .wf-stage-card{padding:12px 13px}
  .wf-stage-head{margin-bottom:9px}

  .wf-brief-card{width:100%;padding:14px 12px}
  .wf-brief-card strong{font-size:17px}
  .wf-branch-line::after,.wf-delivery-rail::after{width:170px}
  .wf-idea-pills,.wf-output-row{width:100%;gap:7px}
  .wf-idea-pills span,.wf-output-row span{min-height:34px;font-size:9px}

  .wf-plan-layout{grid-template-columns:1.08fr .92fr;gap:8px}
  .wf-storyboard,.wf-checklist{padding:9px}
  .wf-story-cards{gap:5px}
  .wf-story-cards i{height:50px}
  .wf-checklist span{padding:5px 6px 5px 20px;font-size:9px;margin-bottom:4px}
  .wf-checklist b,.wf-storyboard b{font-size:8px;margin-bottom:7px}

  .wf-shoot-layout{grid-template-columns:72px 1fr;gap:9px}
  .wf-camera-img{width:58px;height:58px}
  .wf-viewfinder{height:116px}
  .wf-subject{width:58px;height:86px}
  .wf-audio-row{height:22px;margin-top:5px}

  .wf-edit-monitor{grid-template-rows:1fr 56px;gap:8px}
  .wf-edit-preview{min-height:96px}
  .wf-edit-timeline{padding:8px;gap:5px}
  .wf-track{height:7px}

  .wf-post-layout{grid-template-columns:1.05fr .95fr;gap:8px}
  .wf-post-preview{min-height:112px}
  .wf-post-tools{gap:6px}
  .wf-tool{padding:7px 8px}
  .wf-tool b{font-size:10px}
  .wf-tool span{font-size:8px}

  .wf-master-card{width:100%;padding:12px 10px}
  .wf-master-card strong{font-size:16px}
  .wf-master-card small{font-size:9px}
}

@media(max-width:560px){
  .creation-preview-scene{height:258px}
  .workflow-scene.simple-scene{inset:20px 10px 50px}
  .wf-stage-card{padding:10px}
  .wf-stage-head{font-size:7px;margin-bottom:7px}
  .wf-brief-card{padding:11px 9px}
  .wf-brief-card strong{font-size:15px}
  .wf-brief-card small{font-size:9px}
  .wf-branch-line{height:18px}
  .wf-branch-line::after,.wf-delivery-rail::after{width:140px}
  .wf-plan-layout{gap:6px}
  .wf-story-cards i{height:42px}
  .wf-shoot-layout{grid-template-columns:58px 1fr;gap:7px}
  .wf-camera-img{width:48px;height:48px}
  .wf-viewfinder{height:102px}
  .wf-subject{width:50px;height:76px}
  .wf-post-preview{min-height:96px}
  .wf-output-row{gap:5px}
}


/* =========================================================
   Production Workflow v9 — layout reset / no clipping
   ========================================================= */
/* Older workflow experiments left grid declarations on the scene wrappers.
   Reset them so every current stage card owns the complete preview area. */
.workflow-scene.simple-scene,
.simple-idea,
.simple-plan,
.simple-shoot,
.simple-edit,
.simple-post,
.simple-delivery{
  display:block !important;
  grid-template-columns:none !important;
  grid-template-rows:none !important;
}
.workflow-scene.simple-scene{
  box-sizing:border-box;
}
.wf-stage-card{
  width:100% !important;
  height:100% !important;
  min-width:0;
  min-height:0;
  box-sizing:border-box;
}

/* Planning: everything fits inside the fixed preview instead of overflowing. */
.wf-plan-card{
  display:grid;
  grid-template-rows:auto minmax(0,1fr) 10px;
  gap:10px;
}
.wf-plan-card .wf-stage-head{margin:0}
.wf-plan-layout{
  width:100%;
  height:auto !important;
  min-height:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:18px;
}
.wf-storyboard,.wf-checklist{
  min-width:0;
  min-height:0;
  height:100%;
  box-sizing:border-box;
  overflow:hidden;
}
.wf-storyboard{
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
}
.wf-story-cards{
  min-height:0;
  align-items:stretch;
}
.wf-story-cards i{
  height:auto !important;
  min-height:70px;
}
.wf-checklist{
  display:flex;
  flex-direction:column;
}
.wf-checklist b{flex:0 0 auto}
.wf-checklist span{
  flex:1 1 0;
  min-height:0;
  display:flex;
  align-items:center;
  margin-bottom:5px;
}
.wf-checklist span:last-child{margin-bottom:0}
.wf-progress-rail{
  position:relative !important;
  left:auto !important;
  right:auto !important;
  bottom:auto !important;
  width:100%;
  align-self:end;
}

/* Other stages also use their full frame. */
.wf-shoot-card{
  display:grid;
  grid-template-rows:auto minmax(0,1fr) 32px;
  gap:9px;
}
.wf-shoot-card .wf-stage-head{margin:0}
.wf-shoot-layout{height:auto !important;min-height:0}
.wf-camera-block,.wf-viewfinder-block{min-height:0}
.wf-viewfinder{height:100% !important;min-height:130px;max-height:175px}
.wf-audio-row{margin:0}

.wf-edit-card,.wf-post-card{
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  gap:10px;
}
.wf-edit-card .wf-stage-head,.wf-post-card .wf-stage-head{margin:0}
.wf-edit-monitor,.wf-post-layout{height:auto !important;min-height:0}
.wf-edit-preview,.wf-post-preview{min-height:0 !important}

.wf-idea-card,.wf-delivery-card{
  height:100%;
}

@media(max-width:760px){
  .wf-plan-layout{gap:8px}
  .wf-story-cards i{min-height:46px}
  .wf-checklist span{margin-bottom:3px}
  .wf-viewfinder{min-height:100px;max-height:130px}
}
@media(max-width:560px){
  .wf-plan-layout{gap:6px}
  .wf-story-cards i{min-height:36px}
  .wf-checklist span{font-size:8px;padding-top:4px;padding-bottom:4px}
  .wf-viewfinder{min-height:88px;max-height:105px}
}


/* =========================================================
   Production Workflow v10 — fix IDEA vertical fit
   ========================================================= */
.wf-idea-card{
  display:flex !important;
  flex-direction:column;
  justify-content:flex-start;
  align-items:center;
  gap:8px;
  padding-top:14px;
  padding-bottom:14px;
}
.wf-idea-card .wf-stage-head{
  align-self:flex-start;
  margin-bottom:2px;
}
.wf-brief-card{
  width:min(100%, 300px) !important;
  margin:0 auto;
  padding:15px 16px !important;
}
.wf-brief-card strong{
  font-size:19px !important;
  line-height:1.06;
  margin-bottom:6px;
}
.wf-brief-card small{
  font-size:10px !important;
  line-height:1.45;
}
.wf-branch-line{
  flex:0 0 auto;
  height:18px !important;
  margin:2px auto 0 !important;
}
.wf-branch-line::after{
  width:220px !important;
}
.wf-idea-pills{
  width:min(100%, 300px) !important;
  gap:8px !important;
  margin-top:0;
}
.wf-idea-pills span{
  min-height:36px !important;
  padding:6px 8px;
  font-size:10px !important;
  line-height:1.15;
}

@media(max-width:760px){
  .wf-idea-card{gap:7px;padding-top:12px;padding-bottom:12px}
  .wf-brief-card{width:100% !important;padding:13px 12px !important}
  .wf-brief-card strong{font-size:16px !important}
  .wf-brief-card small{font-size:9px !important}
  .wf-branch-line{height:14px !important}
  .wf-branch-line::after{width:170px !important}
  .wf-idea-pills{width:100% !important;gap:6px !important}
  .wf-idea-pills span{min-height:30px !important;font-size:9px !important;padding:5px 6px}
}
@media(max-width:560px){
  .wf-idea-card{gap:6px;padding-top:10px;padding-bottom:10px}
  .wf-brief-card{padding:11px 10px !important}
  .wf-brief-card strong{font-size:14px !important}
  .wf-brief-card small{font-size:8px !important;line-height:1.35}
  .wf-branch-line{height:12px !important}
  .wf-branch-line::after{width:136px !important}
  .wf-idea-pills span{min-height:28px !important;font-size:8px !important}
}


/* =========================================================
   Production Workflow v11 — fix SHOOT stage composition
   ========================================================= */
.wf-shoot-card{
  display:grid !important;
  grid-template-rows:auto minmax(0,1fr) auto;
  gap:10px;
}
.wf-shoot-card .wf-stage-head{margin:0}
.wf-shoot-layout{
  display:grid !important;
  grid-template-columns:84px minmax(0,1fr);
  gap:14px;
  align-items:center;
  height:auto !important;
  min-height:0;
}
.wf-camera-block{
  width:84px;
  align-self:center;
  justify-self:center;
}
.wf-camera-img{
  width:72px !important;
  height:72px !important;
}
.wf-viewfinder-block{
  min-width:0;
  width:100%;
}
.wf-viewfinder{
  width:100% !important;
  max-width:none !important;
  min-height:142px !important;
  max-height:none !important;
  height:142px !important;
  border-radius:14px;
}
.wf-subject{
  width:72px !important;
  height:86px !important;
  bottom:14px !important;
  transform:translateX(-50%) !important;
  border-radius:24px 24px 16px 16px !important;
  background:linear-gradient(180deg,rgba(91,215,255,.15),rgba(91,215,255,.04)) !important;
  border:1px solid rgba(91,215,255,.16) !important;
}
.wf-subject::before{
  content:"";
  position:absolute;
  left:50%;
  top:-28px;
  transform:translateX(-50%);
  width:38px;
  height:38px;
  border-radius:50%;
  background:linear-gradient(180deg,rgba(91,215,255,.17),rgba(91,215,255,.05));
  border:1px solid rgba(91,215,255,.16);
}
.wf-subject::after{
  content:"";
  position:absolute;
  left:50%;
  top:14px;
  transform:translateX(-50%);
  width:52px;
  height:22px;
  border-radius:20px 20px 12px 12px;
  border-top:1px solid rgba(91,215,255,.16);
  opacity:.55;
}
.wf-rec-tag{
  right:12px;
  top:10px;
}
.wf-vf{width:20px !important;height:20px !important}
.wf-audio-row{
  margin:0 !important;
  justify-content:flex-start;
  align-items:flex-end;
  height:26px;
  padding-left:98px;
}
.wf-audio-row i{width:5px}
.wf-audio-row small{font-size:9px}

@media(max-width:760px){
  .wf-shoot-layout{grid-template-columns:64px minmax(0,1fr);gap:10px}
  .wf-camera-block{width:64px}
  .wf-camera-img{width:54px !important;height:54px !important}
  .wf-viewfinder{height:116px !important;min-height:116px !important}
  .wf-subject{width:58px !important;height:68px !important;bottom:12px !important}
  .wf-subject::before{width:30px;height:30px;top:-22px}
  .wf-subject::after{width:42px;height:18px;top:11px}
  .wf-audio-row{padding-left:74px;height:20px}
}
@media(max-width:560px){
  .wf-shoot-layout{grid-template-columns:54px minmax(0,1fr);gap:8px}
  .wf-camera-block{width:54px}
  .wf-camera-img{width:44px !important;height:44px !important}
  .wf-viewfinder{height:98px !important;min-height:98px !important}
  .wf-subject{width:48px !important;height:56px !important;bottom:10px !important}
  .wf-subject::before{width:24px;height:24px;top:-18px}
  .wf-subject::after{width:34px;height:14px;top:10px}
  .wf-audio-row{padding-left:60px;height:18px}
  .wf-vf{width:16px !important;height:16px !important}
}


/* =========================================================
   Production Workflow v12 — simplify SHOOT scene
   ========================================================= */
.wf-shoot-layout{
  grid-template-columns:1fr !important;
  gap:0 !important;
}
.wf-camera-block{
  display:none !important;
}
.wf-viewfinder-block{
  width:100% !important;
}
.wf-viewfinder{
  width:100% !important;
  height:150px !important;
  min-height:150px !important;
  max-height:none !important;
  border-radius:14px;
}
.wf-subject{
  width:88px !important;
  height:74px !important;
  left:50%;
  bottom:16px !important;
  transform:translateX(-50%) !important;
  border-radius:28px 28px 18px 18px !important;
  background:linear-gradient(180deg,rgba(91,215,255,.16),rgba(91,215,255,.05)) !important;
  border:1px solid rgba(91,215,255,.17) !important;
  box-shadow:0 0 18px rgba(18,166,220,.05);
}
.wf-subject::before{
  content:"";
  position:absolute;
  left:50%;
  top:-30px;
  transform:translateX(-50%);
  width:36px;
  height:36px;
  border-radius:50%;
  background:linear-gradient(180deg,rgba(91,215,255,.17),rgba(91,215,255,.06));
  border:1px solid rgba(91,215,255,.17);
}
.wf-subject::after{
  content:"";
  position:absolute;
  left:50%;
  top:8px;
  transform:translateX(-50%);
  width:60px;
  height:22px;
  border-radius:22px 22px 12px 12px;
  border:1px solid rgba(91,215,255,.14);
  border-bottom:none;
  opacity:.58;
}
.wf-rec-tag{
  top:12px !important;
  right:36px !important;
  padding:3px 7px;
  border-radius:999px;
  background:rgba(10,15,20,.76);
  border:1px solid rgba(255,255,255,.06);
  line-height:1;
}
.wf-vf.c2{right:12px !important;top:12px !important}
.wf-vf.c4{right:12px !important;bottom:12px !important}
.wf-audio-row{
  padding-left:0 !important;
  margin-top:2px !important;
  justify-content:flex-start;
  gap:4px;
}
.wf-audio-row small{
  margin-left:6px;
}

@media(max-width:760px){
  .wf-viewfinder{height:124px !important;min-height:124px !important}
  .wf-subject{width:72px !important;height:60px !important;bottom:14px !important}
  .wf-subject::before{width:30px;height:30px;top:-24px}
  .wf-subject::after{width:50px;height:18px;top:7px}
  .wf-rec-tag{right:30px !important;top:10px !important;padding:3px 6px}
}
@media(max-width:560px){
  .wf-viewfinder{height:104px !important;min-height:104px !important}
  .wf-subject{width:60px !important;height:48px !important;bottom:12px !important}
  .wf-subject::before{width:24px;height:24px;top:-18px}
  .wf-subject::after{width:40px;height:14px;top:6px}
  .wf-rec-tag{right:24px !important;top:8px !important;padding:2px 5px;font-size:8px}
}


/* =========================================================
   Creation section v13 — balanced composition
   ========================================================= */
.creation-layout-v13{
  display:grid !important;
  grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr) !important;
  gap:20px !important;
  align-items:stretch !important;
}
.creation-layout-v13 > .creation-intro-card,
.creation-layout-v13 > .creation-studio{
  min-width:0;
  height:100%;
}
.creation-layout-v13 .creation-intro-card{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  min-height:540px;
  padding:26px;
}
.creation-layout-v13 .creation-types{
  margin-top:auto;
  padding-top:24px;
}
.creation-layout-v13 .creation-studio{
  min-height:540px !important;
  height:auto !important;
  padding:18px;
  display:flex;
  flex-direction:column;
}
.creation-layout-v13 .studio-preview{
  flex:0 0 auto;
}
.creation-layout-v13 .creation-preview-scene{
  height:300px !important;
  aspect-ratio:auto !important;
}
.creation-layout-v13 .creation-timeline{
  flex:0 0 auto;
  margin-top:14px;
}
.creation-layout-v13 .studio-detail{
  margin-top:12px;
  min-height:84px;
  grid-template-columns:180px 1fr;
  align-items:center;
}
.creation-layout-v13 .studio-detail p{
  line-height:1.55;
}

.creation-support-grid{
  display:grid;
  grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:20px;
  margin-top:20px;
  align-items:stretch;
}
.creation-support-grid .creation-result-panel{
  min-height:230px;
  height:100%;
  padding:24px 26px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.creation-support-grid .creation-result-panel h4{
  max-width:none;
  font-size:24px;
}
.creation-support-grid .creation-deliverables{
  margin-top:auto;
  padding-top:16px;
}

.creation-support-grid .creation-examples{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  grid-template-rows:auto 1fr 1fr;
  margin:0 !important;
  border-radius:24px !important;
  border:1px solid #d9e3e7 !important;
  overflow:hidden !important;
  background:#fff !important;
  min-height:230px;
}
.creation-examples-head{
  grid-column:1 / -1;
  padding:18px 20px 14px;
  border-bottom:1px solid #e0e8eb;
  background:linear-gradient(180deg,#fff,#fbfdfe);
}
.creation-examples-head span,
.creation-examples-head strong{display:block}
.creation-examples-head span{
  font-size:8px;
  letter-spacing:1.45px;
  font-weight:800;
  color:#078ec1;
  margin-bottom:5px;
}
.creation-examples-head strong{
  font-family:"Space Grotesk",Inter,sans-serif;
  font-size:18px;
  color:#22343d;
  letter-spacing:-.45px;
}
.creation-support-grid .creation-examples article{
  padding:16px 18px !important;
  border:0 !important;
  border-right:1px solid #e0e8eb !important;
  border-bottom:1px solid #e0e8eb !important;
  background:#fff;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
}
.creation-support-grid .creation-examples article:nth-of-type(2n){border-right:0 !important}
.creation-support-grid .creation-examples article:nth-of-type(n+3){border-bottom:0 !important}
.creation-support-grid .creation-examples article:hover{background:#f6fbfd}
.creation-support-grid .creation-examples article span{
  font-size:8px;
  margin-bottom:5px;
}
.creation-support-grid .creation-examples article strong{
  font-size:11px;
  line-height:1.5;
}

/* Avoid raw overflow from inherited creation styles */
.creation-section .creation-offer{display:contents}
.creation-section .creation-examples{width:100%;box-sizing:border-box}

@media(max-width:1050px){
  .creation-layout-v13,
  .creation-support-grid{
    grid-template-columns:1fr !important;
  }
  .creation-layout-v13 .creation-intro-card{
    min-height:0;
  }
  .creation-layout-v13 .creation-types{
    margin-top:22px;
    padding-top:0;
  }
  .creation-layout-v13 .creation-studio{
    min-height:0 !important;
  }
  .creation-layout-v13 .creation-preview-scene{
    height:320px !important;
  }
  .creation-support-grid .creation-result-panel{
    min-height:210px;
  }
}
@media(max-width:650px){
  .creation-layout-v13 .creation-preview-scene{
    height:270px !important;
  }
  .creation-layout-v13 .studio-detail{
    grid-template-columns:1fr;
    min-height:0;
  }
  .creation-support-grid .creation-examples{
    grid-template-columns:1fr !important;
    grid-template-rows:auto repeat(4,auto);
  }
  .creation-support-grid .creation-examples article{
    border-right:0 !important;
    border-bottom:1px solid #e0e8eb !important;
  }
  .creation-support-grid .creation-examples article:last-child{
    border-bottom:0 !important;
  }
}


/* =========================================================
   Creation steps — separate number from label
   ========================================================= */
.creation-step{
  display:flex !important;
  align-items:center;
  justify-content:center;
  gap:7px;
  white-space:nowrap;
}
.creation-step b,
.creation-step span{
  display:inline-block !important;
  margin:0 !important;
  line-height:1;
}
.creation-step b{
  min-width:16px;
  text-align:right;
}
@media(max-width:560px){
  .creation-step{gap:5px}
}


/* =========================================================
   Production Workflow v15 — clearer person + animated REC
   ========================================================= */
.wf-viewfinder{
  background:
    radial-gradient(circle at 50% 38%, rgba(91,215,255,.06), transparent 22%),
    linear-gradient(135deg,#0f1820,#0a1015) !important;
}
.wf-subject{
  width:96px !important;
  height:78px !important;
  bottom:16px !important;
  border-radius:28px 28px 18px 18px !important;
  background:linear-gradient(180deg,rgba(91,215,255,.20),rgba(91,215,255,.06)) !important;
  border:1px solid rgba(91,215,255,.24) !important;
  box-shadow:0 0 20px rgba(18,166,220,.08), inset 0 1px 0 rgba(255,255,255,.04);
}
.wf-subject::before{
  width:38px !important;
  height:38px !important;
  top:-31px !important;
  background:linear-gradient(180deg,rgba(91,215,255,.24),rgba(91,215,255,.08)) !important;
  border:1px solid rgba(91,215,255,.26) !important;
  box-shadow:0 0 14px rgba(18,166,220,.08);
}
.wf-subject::after{
  width:68px !important;
  height:28px !important;
  top:10px !important;
  border-radius:28px 28px 14px 14px !important;
  border:1px solid rgba(91,215,255,.18) !important;
  border-bottom:none !important;
  opacity:.78 !important;
}
.wf-rec-tag{
  right:18px !important;
  top:12px !important;
  padding:4px 8px !important;
  background:rgba(9,14,18,.84) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  box-shadow:0 0 0 1px rgba(255,255,255,.02), 0 0 12px rgba(239,85,85,.08);
  animation:wfRecBadgePulse 1.8s ease-in-out infinite;
}
.wf-rec-tag i{
  width:7px !important;
  height:7px !important;
  animation:wfRecDotBlink .95s ease-in-out infinite;
}

@keyframes wfRecDotBlink{
  0%,100%{opacity:1;transform:scale(1);box-shadow:0 0 8px rgba(239,85,85,.55)}
  50%{opacity:.3;transform:scale(.82);box-shadow:0 0 3px rgba(239,85,85,.18)}
}
@keyframes wfRecBadgePulse{
  0%,100%{transform:translateY(0);border-color:rgba(255,255,255,.08)}
  50%{transform:translateY(-1px);border-color:rgba(239,85,85,.18)}
}

@media(max-width:760px){
  .wf-subject{width:80px !important;height:64px !important;bottom:14px !important}
  .wf-subject::before{width:32px !important;height:32px !important;top:-25px !important}
  .wf-subject::after{width:56px !important;height:22px !important;top:8px !important}
  .wf-rec-tag{right:16px !important;top:10px !important;padding:3px 7px !important}
}
@media(max-width:560px){
  .wf-subject{width:68px !important;height:52px !important;bottom:12px !important}
  .wf-subject::before{width:26px !important;height:26px !important;top:-20px !important}
  .wf-subject::after{width:46px !important;height:18px !important;top:7px !important}
  .wf-rec-tag{right:14px !important;top:8px !important;padding:2px 6px !important}
  .wf-rec-tag i{width:6px !important;height:6px !important}
}


/* =========================================================
   Production Workflow v16 — IDEA distribution refined
   ========================================================= */
.wf-idea-card{
  position:relative !important;
  display:flex !important;
  flex-direction:column;
  justify-content:center !important;
  align-items:center;
  gap:8px !important;
  padding:18px 16px 16px !important;
}
.wf-idea-card .wf-stage-head{
  position:absolute !important;
  left:16px;
  top:14px;
  margin:0 !important;
}
.wf-brief-card{
  width:min(100%, 300px) !important;
  margin:0 !important;
  padding:16px 18px !important;
}
.wf-brief-card strong{
  font-size:20px !important;
  line-height:1.08 !important;
  margin-bottom:7px !important;
}
.wf-brief-card small{
  font-size:10px !important;
  line-height:1.5 !important;
}
.wf-branch-line{
  height:16px !important;
  margin:0 !important;
}
.wf-branch-line::after{
  width:230px !important;
}
.wf-idea-pills{
  width:min(100%, 300px) !important;
  margin:0 !important;
  gap:8px !important;
}
.wf-idea-pills span{
  min-height:38px !important;
  padding:6px 8px !important;
}

@media(max-width:760px){
  .wf-idea-card{padding:16px 12px 14px !important;gap:7px !important}
  .wf-idea-card .wf-stage-head{left:12px;top:12px}
  .wf-brief-card{width:100% !important;padding:14px 14px !important}
  .wf-brief-card strong{font-size:17px !important}
  .wf-brief-card small{font-size:9px !important}
  .wf-branch-line{height:14px !important}
  .wf-branch-line::after{width:170px !important}
  .wf-idea-pills{width:100% !important;gap:6px !important}
  .wf-idea-pills span{min-height:32px !important;font-size:9px !important}
}
@media(max-width:560px){
  .wf-idea-card{padding:14px 10px 12px !important;gap:6px !important}
  .wf-idea-card .wf-stage-head{left:10px;top:10px}
  .wf-brief-card{padding:12px 10px !important}
  .wf-brief-card strong{font-size:15px !important}
  .wf-brief-card small{font-size:8px !important;line-height:1.4 !important}
  .wf-branch-line{height:12px !important}
  .wf-branch-line::after{width:138px !important}
  .wf-idea-pills span{min-height:28px !important;font-size:8px !important}
}


/* =========================================================
   Production Workflow v17 — richer EDIT scene
   ========================================================= */
.wf-edit-card{
  display:grid !important;
  grid-template-rows:auto minmax(0,1fr);
  gap:10px;
}
.wf-edit-monitor{
  grid-template-rows:minmax(128px,1fr) 82px !important;
  gap:12px !important;
}
.wf-edit-preview{
  min-height:0 !important;
  border-radius:16px;
  border:1px solid rgba(91,215,255,.12);
  background:linear-gradient(180deg,#0d1419,#0a1014);
  display:grid;
  grid-template-rows:28px minmax(0,1fr);
  overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03), 0 0 24px rgba(18,166,220,.04);
}
.wf-edit-topbar{
  display:flex;
  align-items:center;
  gap:6px;
  padding:0 12px;
  background:rgba(255,255,255,.02);
  border-bottom:1px solid rgba(255,255,255,.05);
}
.wf-edit-topbar i{display:block;width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.22)}
.wf-edit-topbar i:nth-child(1){background:#ef5555}.wf-edit-topbar i:nth-child(2){background:#f0b96b}.wf-edit-topbar i:nth-child(3){background:#62d5a1}
.wf-edit-topbar span{margin-left:4px;font-size:8px;letter-spacing:1.45px;color:#87a3af;font-weight:700}
.wf-edit-workspace{
  display:grid;
  grid-template-columns:72px 1fr 78px;
  gap:10px;
  min-height:0;
  padding:10px;
}
.wf-edit-panel{
  border-radius:12px;
  border:1px solid rgba(255,255,255,.05);
  background:#0d151a;
  padding:10px 8px;
  display:grid;
  align-content:start;
  gap:7px;
}
.wf-edit-panel b{font-size:8px;letter-spacing:1.2px;color:#9ab0b9;text-transform:uppercase}
.wf-edit-panel span{display:block;height:12px;border-radius:6px;background:linear-gradient(90deg,rgba(255,255,255,.10),rgba(91,215,255,.05))}
.wf-edit-media span:nth-of-type(1){height:34px}.wf-edit-media span:nth-of-type(2){height:24px}.wf-edit-media span:nth-of-type(3){height:18px}
.wf-edit-inspector span:nth-of-type(1){width:100%}.wf-edit-inspector span:nth-of-type(2){width:82%}.wf-edit-inspector span:nth-of-type(3){width:92%}.wf-edit-inspector span:nth-of-type(4){width:68%}
.wf-edit-viewer{
  min-width:0;
  display:grid;
  place-items:center;
}
.wf-edit-frame{
  position:relative;
  width:100%;
  height:100%;
  min-height:84px;
  border-radius:12px;
  border:1px solid rgba(91,215,255,.12);
  background:radial-gradient(circle at 50% 36%,rgba(91,215,255,.16),transparent 18%), linear-gradient(140deg,#13212a,#0b1217);
  overflow:hidden;
}
.wf-edit-safe{
  position:absolute;inset:10px 12px;
  border:1px solid rgba(255,255,255,.05);
}
.wf-edit-subject{
  position:absolute;left:50%;bottom:12px;transform:translateX(-50%);
  width:54px;height:44px;border-radius:18px 18px 12px 12px;
  background:linear-gradient(180deg,rgba(91,215,255,.20),rgba(91,215,255,.06));
  border:1px solid rgba(91,215,255,.10);
  box-shadow:0 0 14px rgba(18,166,220,.07);
}
.wf-edit-subject::before{content:"";position:absolute;left:50%;top:-22px;transform:translateX(-50%);width:24px;height:24px;border-radius:50%;background:linear-gradient(180deg,rgba(91,215,255,.22),rgba(91,215,255,.07));border:1px solid rgba(91,215,255,.18)}
.wf-edit-toolbar{
  position:absolute;left:50%;bottom:8px;transform:translateX(-50%);
  display:flex;gap:5px;padding:4px 6px;border-radius:999px;
  background:rgba(8,13,17,.72);border:1px solid rgba(255,255,255,.06);
}
.wf-edit-toolbar i{display:block;width:8px;height:8px;border-radius:3px;background:rgba(255,255,255,.18)}
.wf-edit-toolbar i:nth-child(2){background:rgba(91,215,255,.55)}
.wf-edit-timeline{
  position:relative;
  padding:14px 14px 10px !important;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.06);
  background:#0b1116;
  display:grid;
  gap:8px;
  overflow:hidden;
}
.wf-time-ruler{
  height:10px;
  border-radius:999px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.18) 0 1px,transparent 1px 24px), linear-gradient(90deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
}
.wf-track{height:12px !important; position:relative; overflow:hidden}
.wf-track::after{content:"";position:absolute;inset:0;opacity:.66;background:repeating-linear-gradient(90deg,transparent 0 18px,rgba(255,255,255,.08) 18px 19px)}
.wf-cut-mark{position:absolute;top:30px;bottom:12px;width:1px;background:rgba(255,255,255,.16)}
.wf-cut-mark.c1{left:34%}.wf-cut-mark.c2{left:58%}.wf-cut-mark.c3{left:77%}
.wf-playhead{top:8px !important;bottom:8px !important;left:62%; box-shadow:0 0 12px rgba(255,255,255,.45)}
.wf-playhead::before{content:"";position:absolute;left:50%;top:-2px;transform:translateX(-50%);width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 8px rgba(255,255,255,.35)}
.creation-preview-scene.stage-3 .wf-edit-frame{animation:wfEditFrameGlow 4s ease-in-out infinite}
.creation-preview-scene.stage-3 .wf-edit-toolbar i:nth-child(2){animation:wfToolActive 1.8s ease-in-out infinite}
.creation-preview-scene.stage-3 .wf-edit-panel span{animation:wfPanelPulse 3.6s ease-in-out infinite}
.creation-preview-scene.stage-3 .wf-edit-panel span:nth-of-type(2){animation-delay:.15s}
.creation-preview-scene.stage-3 .wf-edit-panel span:nth-of-type(3){animation-delay:.3s}
.creation-preview-scene.stage-3 .wf-edit-panel span:nth-of-type(4){animation-delay:.45s}
@keyframes wfEditFrameGlow{0%,100%{box-shadow:inset 0 0 0 0 rgba(91,215,255,0),0 0 0 rgba(18,166,220,0)}50%{box-shadow:inset 0 0 0 1px rgba(91,215,255,.08),0 0 18px rgba(18,166,220,.05)}}
@keyframes wfToolActive{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.15);opacity:1}}
@keyframes wfPanelPulse{0%,100%{opacity:.74}50%{opacity:1}}

@media(max-width:760px){
  .wf-edit-monitor{grid-template-rows:minmax(106px,1fr) 70px !important;gap:10px !important}
  .wf-edit-workspace{grid-template-columns:54px 1fr 60px;gap:8px;padding:8px}
  .wf-edit-panel{padding:8px 6px;gap:6px}
  .wf-edit-panel b{font-size:7px}
  .wf-edit-panel span{height:10px}.wf-edit-media span:nth-of-type(1){height:28px}.wf-edit-media span:nth-of-type(2){height:18px}
  .wf-edit-frame{min-height:72px}
  .wf-edit-safe{inset:8px 10px}
  .wf-edit-subject{width:44px;height:36px}.wf-edit-subject::before{width:20px;height:20px;top:-18px}
  .wf-track{height:10px !important}
}
@media(max-width:560px){
  .wf-edit-monitor{grid-template-rows:minmax(94px,1fr) 60px !important;gap:8px !important}
  .wf-edit-workspace{grid-template-columns:1fr;gap:6px;padding:7px}
  .wf-edit-media,.wf-edit-inspector{display:none}
  .wf-edit-frame{min-height:74px}
  .wf-edit-toolbar{bottom:6px;padding:3px 5px}
  .wf-track{height:8px !important}
  .wf-time-ruler{height:8px}
}


/* =========================================================
   v18 — less information density
   ========================================================= */
.capability-strip{display:none !important;}
.hero-lead,
.section-heading.split-heading > p,
.creation-intro-card p,
.creation-result-panel p,
.service-large p,
.service-small p,
.audience-card p,
.case-copy p,
.pipeline-panel p,
.qc-copy p,
.streaming-layout > div > p,
.local-service-card p,
.local-flow-copy p,
.local-business-note p,
.cta-copy p{
  max-width:62ch;
}
.hero-lead,
.section-heading.split-heading > p,
.creation-intro-card p,
.creation-result-panel p,
.service-large p,
.service-small p,
.audience-card p,
.case-copy p,
.pipeline-panel p,
.qc-copy p,
.streaming-layout > div > p,
.local-service-card p,
.local-flow-copy p,
.local-business-note p,
.cta-copy p{
  color:#86a0af;
  line-height:1.65;
}
.section-heading{margin-bottom:28px !important;}
.section{padding-block:72px !important;}
.hero{padding-top:108px;padding-bottom:72px;}
.creation-section{padding-top:64px !important;}
.creation-types{gap:10px}
.creation-type{min-height:52px}
.creation-support-grid{margin-top:22px !important}
.creation-examples{
  padding:24px !important;
}
.creation-examples-head strong{font-size:22px !important}
.creation-examples article{padding:14px 0 !important}
.creation-examples article strong{font-size:15px !important; line-height:1.45}
.services-elegant{gap:18px !important}
.service-large,.service-small{padding:24px !important}
.tag-row{margin-top:16px !important}
.audience-cards{gap:16px !important}
.audience-card{padding:22px !important}
.audience-card ul{display:none;}
.workflow-fit-panel{padding:24px !important}
.case-note{font-size:13px; line-height:1.55}
.pipeline-copy p{margin-bottom:18px}
.pipeline-panel{padding:24px !important}
.metric-grid,.progress-stack,.qc-copy .check-list,.stream-points,.local-services-grid{gap:14px}
.check-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px;padding:0;list-style:none}
.check-list li{padding-left:18px;position:relative}
.check-list li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--cyan)}
.stream-points div{padding:16px 0 !important}
.local-service-card{padding:22px !important}
.local-example{display:none;}
.local-service-card:hover .local-example,
.local-service-card:focus-within .local-example{display:block; margin-top:12px;}
.local-flow-card{margin-top:24px !important}
.contact-mini span:last-child{display:none}

@media(max-width:960px){
  .check-list{grid-template-columns:1fr}
}
@media(max-width:760px){
  .section{padding-block:60px !important}
  .hero{padding-top:96px;padding-bottom:56px}
  .audience-card ul{display:block}
  .local-example{display:block}
}


/* =========================================================
   Reorganized information architecture — publication version
   ========================================================= */
.cluster-intro{padding-top:72px;padding-bottom:10px;max-width:920px}
.cluster-intro h2{margin:8px 0 10px;max-width:760px;font-family:"Space Grotesk",Inter,sans-serif;font-size:clamp(32px,4vw,52px);line-height:1.02;letter-spacing:-1.8px}
.cluster-intro p{max-width:680px;margin:0;font-size:15px;line-height:1.7;color:#6f8088}
.solutions-cluster{background:linear-gradient(180deg,#f7f9fa 0,#f3f6f7 100%)}
.solutions-cluster .intro-section,.solutions-cluster .audience-section{background:transparent!important}
.solutions-cluster .intro-section{padding-top:32px!important;padding-bottom:34px!important}
.solutions-cluster .audience-section{padding-top:34px!important;padding-bottom:76px!important}
.solutions-cluster .intro-section .section-heading,.solutions-cluster .audience-section .section-heading{margin-bottom:24px!important}
.services-elegant{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:14px!important}
.service-large,.service-small{min-height:0!important;padding:22px!important}
.service-large{grid-column:span 1!important}
.service-large h3,.service-small h3{font-size:19px!important;line-height:1.18}
.service-large p,.service-small p{margin-bottom:0}.tag-row{margin-top:14px!important}
.audience-grid{grid-template-columns:.9fr 1.1fr!important;gap:18px!important}
.audience-cards{grid-template-columns:1fr 1fr!important;gap:12px!important}
.audience-card{padding:18px!important}.audience-card h3{font-size:17px!important;line-height:1.2}.audience-card p{font-size:12px!important}
.workflow-fit-panel{align-self:stretch}
.process-cluster{background:#090d10;color:#fff;position:relative}
.process-cluster::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 78% 12%,rgba(18,166,220,.08),transparent 28%)}
.process-intro{position:relative;z-index:1;color:#fff;padding-top:78px;padding-bottom:8px}.process-intro p{color:#899ca5}
.process-cluster .dark-section,.process-cluster .qc-section,.process-cluster .streaming-section{background:transparent!important;position:relative;z-index:1}
.process-cluster .dark-section{padding-top:30px!important;padding-bottom:42px!important}
.process-cluster .qc-section{padding-top:42px!important;padding-bottom:42px!important;border-top:1px solid rgba(255,255,255,.07)}
.process-cluster .streaming-section{padding-top:42px!important;padding-bottom:78px!important;border-top:1px solid rgba(255,255,255,.07)}
.process-cluster .qc-copy h2,.process-cluster .streaming-layout h2{color:#fff}
.process-cluster .qc-copy p,.process-cluster .streaming-layout p,.process-cluster .stream-points span{color:#8ea1aa!important}
.process-cluster .stream-points div{border-color:rgba(255,255,255,.07)!important}.process-cluster .stream-points strong{color:#eaf4f7}
.local-services-section{padding-top:76px!important;padding-bottom:76px!important}
.local-services-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:14px!important}
.local-service-card{padding:20px!important}.local-service-card h3{font-size:18px!important}.local-flow-card{margin-top:20px!important}
.nav{gap:24px!important}.creation-section{padding-bottom:76px!important}.cta-section{padding-top:70px!important}
@media(max-width:1050px){.services-elegant{grid-template-columns:repeat(2,minmax(0,1fr))!important}.audience-grid{grid-template-columns:1fr!important}.local-services-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:720px){.cluster-intro{padding-top:58px;padding-bottom:4px}.cluster-intro h2{font-size:34px}.services-elegant,.audience-cards,.local-services-grid{grid-template-columns:1fr!important}.solutions-cluster .audience-section{padding-bottom:58px!important}.process-cluster .streaming-section{padding-bottom:58px!important}.local-services-section{padding-top:58px!important;padding-bottom:58px!important}}

/* =========================================================
   Visual hybrid direction — real imagery + MexFrame UI
   Inspired by image-led postproduction portfolios, without
   replacing MexFrame's technical identity.
   ========================================================= */
.real-monitor-center{position:absolute;inset:0;overflow:hidden;background:#071015}
.hero-real-frame{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.72) contrast(1.06) brightness(.72);transform:scale(1.01);transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .4s ease}
.operations-console:hover .hero-real-frame{transform:scale(1.055);filter:saturate(.9) contrast(1.06) brightness(.78)}
.real-monitor-center::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,9,12,.12),rgba(4,9,12,.42)),linear-gradient(90deg,rgba(18,166,220,.08),transparent 35%);pointer-events:none}
.hero-frame-overlay{position:absolute;left:14px;bottom:14px;z-index:3;display:flex;align-items:center;gap:8px;font:700 8px/1 monospace;letter-spacing:1.2px;color:#dce8ec}
.hero-frame-overlay span{padding:5px 7px;border:1px solid rgba(91,215,255,.25);border-radius:999px;background:rgba(5,11,15,.62)}
.hero-frame-overlay strong{font-weight:600;color:#9eb0b8}

.creation-real-image{position:relative;margin:16px 0 20px;border-radius:18px;overflow:hidden;height:170px;background:#0b1115;border:1px solid #dbe5e9}
.creation-real-image img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.78) contrast(1.04);transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.creation-intro-card:hover .creation-real-image img{transform:scale(1.035)}
.creation-real-image::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 42%,rgba(5,10,13,.76) 100%)}
.creation-real-image figcaption{position:absolute;left:14px;right:14px;bottom:12px;z-index:2;color:#fff;display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.creation-real-image figcaption span{font-size:8px;letter-spacing:1.4px;color:#72d9ff;font-weight:800}.creation-real-image figcaption strong{font-size:11px;font-weight:650;color:#eaf5f8}

.real-work-section{padding:78px 0 86px;background:#080c0f;color:#fff;position:relative;overflow:hidden}
.real-work-section::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 0%,rgba(18,166,220,.08),transparent 30%);pointer-events:none}
.real-work-head{position:relative;display:grid;grid-template-columns:1.05fr .75fr;gap:48px;align-items:end;margin-bottom:30px}
.real-work-head h2{margin:8px 0 0;max-width:760px;font-family:"Space Grotesk",Inter,sans-serif;font-size:clamp(32px,4.2vw,54px);line-height:.99;letter-spacing:-1.8px}
.real-work-head p{margin:0;color:#8ea1aa;font-size:14px;line-height:1.7;max-width:520px}
.real-work-grid{position:relative;display:grid;grid-template-columns:1.35fr .65fr .65fr;grid-auto-rows:250px;gap:12px}
.real-work-card{position:relative;margin:0;overflow:hidden;border-radius:20px;background:#11181d;border:1px solid rgba(255,255,255,.07)}
.real-work-card.real-work-wide{grid-row:span 2}.real-work-card.real-work-last{grid-column:2 / -1;grid-row:span 1}
.real-work-card img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.76) brightness(.78);transform:scale(1.01);transition:transform .75s cubic-bezier(.2,.7,.2,1),filter .35s ease}
.real-work-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,9,12,.05) 25%,rgba(5,9,12,.82) 100%);pointer-events:none}
.real-work-card:hover img{transform:scale(1.055);filter:saturate(.95) brightness(.86)}
.real-work-card figcaption{position:absolute;z-index:3;left:20px;right:20px;bottom:18px;display:grid;gap:4px}
.real-work-card figcaption span{font-size:8px;letter-spacing:1.5px;font-weight:800;color:#62d9ff}.real-work-card figcaption strong{font-family:"Space Grotesk",Inter,sans-serif;font-size:20px;letter-spacing:-.35px}.real-work-card figcaption small{color:#a0b1b8;font-size:10px}
.image-reference-note{position:relative;margin-top:14px;color:#63757d;font-size:9px;letter-spacing:.04em}

.services-photo-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 18px}
.services-photo-pair>div{height:150px;position:relative;overflow:hidden;border-radius:18px;border:1px solid #dce5e8;background:#0b1115}
.services-photo-pair img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.68) brightness(.72);transition:transform .5s ease,filter .3s ease}.services-photo-pair>div:hover img{transform:scale(1.04);filter:saturate(.88) brightness(.8)}
.services-photo-pair>div::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(5,10,13,.65))}
.services-photo-pair span{position:absolute;left:14px;bottom:12px;z-index:2;color:#d9edf4;font-size:8px;letter-spacing:1.4px;font-weight:800}

@media(max-width:960px){.real-work-head{grid-template-columns:1fr;gap:14px}.real-work-grid{grid-template-columns:1fr 1fr;grid-auto-rows:220px}.real-work-card.real-work-wide{grid-row:span 1}.real-work-card.real-work-last{grid-column:auto}.creation-real-image{height:200px}}
@media(max-width:650px){.real-work-section{padding:58px 0 64px}.real-work-grid{grid-template-columns:1fr;grid-auto-rows:210px}.services-photo-pair{grid-template-columns:1fr}.services-photo-pair>div{height:130px}.real-work-head h2{font-size:34px}.creation-real-image{height:150px}.creation-real-image figcaption{display:grid;justify-content:start}.hero-frame-overlay strong{display:none}}
@media(prefers-reduced-motion:reduce){.hero-real-frame,.creation-real-image img,.real-work-card img,.services-photo-pair img{transition:none!important}}


/* =========================================================
   Assets centralizados para reemplazo de imágenes
   Reemplaza los archivos en /assets/images, /assets/brand o /assets/icons
   conservando el mismo nombre para cambiar visuales sin tocar el código.
   ========================================================= */
.monitor-frame{position:relative;overflow:hidden}
.monitor-frame::before{content:"";position:absolute;inset:0;background-image:linear-gradient(180deg,rgba(5,10,14,.18),rgba(5,10,14,.55)), url("assets/images/portada-monitor-operaciones.jpg");background-size:cover;background-position:center;filter:saturate(.78) contrast(1.02);opacity:.82}
.monitor-frame>*{position:relative;z-index:2}


/* =========================================================
   v5 workflow with real images instead of animated diagrams
   Replace images in /assets/images/workflow-etapa-01-idea.webp ... workflow-etapa-06-entrega.webp
   ========================================================= */
.creation-preview-scene{background:linear-gradient(135deg,#10171d,#090d11)!important;overflow:hidden}
.creation-preview-scene .preview-gridlines{opacity:.18}
.workflow-scene.simple-scene{inset:18px 18px 58px!important;opacity:0;transform:translateY(3px);transition:opacity .28s ease, transform .28s ease}
.creation-preview-scene.stage-0 .simple-idea,
.creation-preview-scene.stage-1 .simple-plan,
.creation-preview-scene.stage-2 .simple-shoot,
.creation-preview-scene.stage-3 .simple-edit,
.creation-preview-scene.stage-4 .simple-post,
.creation-preview-scene.stage-5 .simple-delivery{opacity:1;transform:none}
.workflow-photo-card{position:relative;width:100%;height:100%;border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.05);background:#0d1419;box-shadow:0 18px 40px rgba(0,0,0,.25)}
.workflow-photo-media,.workflow-photo-media img{width:100%;height:100%}
.workflow-photo-media img{display:block;object-fit:cover;filter:saturate(.84) contrast(1.04) brightness(.72)}
.workflow-photo-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,12,16,.10) 0%,rgba(8,12,16,.10) 25%,rgba(8,12,16,.75) 72%,rgba(8,12,16,.95) 100%)}
.workflow-photo-overlay{position:absolute;left:16px;right:16px;bottom:16px;z-index:2;display:grid;gap:7px}
.workflow-photo-kicker{font-size:10px;letter-spacing:1.5px;font-weight:800;color:#84cce5;text-transform:uppercase}
.workflow-photo-overlay strong{font-family:"Space Grotesk",Inter,sans-serif;font-size:24px;line-height:1.02;color:#f0f8fb;letter-spacing:-.4px}
.workflow-photo-overlay p{margin:0;font-size:11px;line-height:1.55;color:#b7c7cd;max-width:46ch}
.workflow-photo-tags{display:flex;flex-wrap:wrap;gap:8px}
.workflow-photo-tags span{display:inline-flex;align-items:center;min-height:28px;padding:0 10px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.05);font-size:10px;color:#d6e3e7}
.is-recording .workflow-photo-kicker::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:#ef5555;box-shadow:0 0 8px rgba(239,85,85,.55);margin-right:8px;vertical-align:middle;animation:wfRecDotBlink .95s ease-in-out infinite}
.preview-rec{display:none!important}
@media(max-width:760px){
  .workflow-scene.simple-scene{inset:16px 14px 54px!important}
  .workflow-photo-overlay{left:12px;right:12px;bottom:12px}
  .workflow-photo-overlay strong{font-size:19px}
  .workflow-photo-overlay p{font-size:10px;line-height:1.45}
  .workflow-photo-tags{gap:6px}
  .workflow-photo-tags span{min-height:24px;padding:0 8px;font-size:9px}
}
@media(max-width:560px){
  .workflow-scene.simple-scene{inset:12px 10px 50px!important}
  .workflow-photo-card{border-radius:14px}
  .workflow-photo-overlay strong{font-size:16px}
  .workflow-photo-kicker{font-size:9px}
  .workflow-photo-overlay p{font-size:9px}
  .workflow-photo-tags span{font-size:8px;min-height:22px}
}


/* v6 — limpieza de etiquetas editoriales */
.creation-real-image figcaption,.workflow-photo-kicker,.workflow-photo-tags{display:none!important}
.workflow-photo-overlay{gap:6px}
.workflow-photo-overlay strong{margin:0}
.workflow-photo-overlay p{margin:0}


/* =========================================================
   v7 — fix workflow use-case clipping
   ========================================================= */
.case-visual{
  min-width:0;
  width:100%;
  box-sizing:border-box;
}
.workflow-lane{
  width:100%;
  min-width:0;
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  gap:6px !important;
  box-sizing:border-box;
}
.lane-step{
  min-width:0;
  width:100%;
}
.lane-step b{
  width:40px;
  height:40px;
  margin:0 auto 9px;
}
.lane-step span{
  width:100%;
  min-width:0;
  font-size:10px;
  line-height:1.3;
  overflow-wrap:anywhere;
  hyphens:auto;
}
.lane-track{
  left:10%;
  right:10%;
  top:34px;
}
.mini-outputs{
  width:100%;
  justify-content:center !important;
  flex-wrap:wrap;
  box-sizing:border-box;
}
.mini-outputs span{
  flex:0 0 auto;
}

@media(max-width:430px){
  .case-visual{padding:14px !important;min-height:250px}
  .workflow-lane{
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    gap:3px !important;
    padding-top:14px !important;
  }
  .lane-track{
    display:block !important;
    left:9% !important;
    right:9% !important;
    top:30px !important;
    bottom:auto !important;
    width:auto !important;
    height:2px !important;
  }
  .lane-pulse{
    left:0;
    top:50%;
    transform:translate(-50%,-50%);
    animation-name:lanePulse !important;
  }
  .lane-step{
    display:block !important;
    text-align:center !important;
  }
  .lane-step b{
    width:34px !important;
    height:34px !important;
    margin:0 auto 8px !important;
    font-size:9px;
  }
  .lane-step span{
    font-size:9px !important;
    line-height:1.22 !important;
  }
  .mini-outputs{margin-top:4px;gap:6px}
  .mini-outputs span{padding:7px 9px;font-size:10px}
}


/* =========================================================
   v8 — ocultar textos debajo de los círculos en flujos por etapas
   ========================================================= */
.workflow-lane{
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  align-items:center !important;
}
.lane-step{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  text-align:center !important;
}
.lane-step b{
  margin:0 auto !important;
}
.lane-step span{
  display:none !important;
}

@media(max-width:760px){
  .workflow-lane{
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    gap:10px !important;
  }
  .lane-step{
    display:flex !important;
    grid-template-columns:none !important;
    justify-content:center !important;
    align-items:center !important;
    gap:0 !important;
    text-align:center !important;
  }
  .lane-step b{
    margin:0 auto !important;
  }
}


/* =========================================================
   v10 — color por etapa en Production Workflow timeline
   ========================================================= */
.creation-timeline{
  gap:6px;
}
.creation-step{
  border:1px solid rgba(255,255,255,.05);
  border-radius:4px;
  padding:6px 8px;
  font-weight:700;
}
.creation-step b,
.creation-step span{
  color:#e9f2f6;
}
.creation-step[data-creation-step="0"]{background:linear-gradient(180deg,rgba(33,166,202,.24),rgba(33,166,202,.12));border-color:rgba(77,208,242,.32)}
.creation-step[data-creation-step="1"]{background:linear-gradient(180deg,rgba(84,190,168,.24),rgba(84,190,168,.12));border-color:rgba(112,225,201,.30)}
.creation-step[data-creation-step="2"]{background:linear-gradient(180deg,rgba(64,126,255,.24),rgba(64,126,255,.12));border-color:rgba(115,164,255,.30)}
.creation-step[data-creation-step="3"]{background:linear-gradient(180deg,rgba(148,101,255,.24),rgba(148,101,255,.12));border-color:rgba(179,145,255,.30)}
.creation-step[data-creation-step="4"]{background:linear-gradient(180deg,rgba(255,155,72,.24),rgba(255,155,72,.12));border-color:rgba(255,190,129,.32)}
.creation-step[data-creation-step="5"]{background:linear-gradient(180deg,rgba(82,204,133,.24),rgba(82,204,133,.12));border-color:rgba(129,225,165,.30)}
.creation-step.active{
  transform:translateY(-2px);
  filter:saturate(1.08) brightness(1.04);
}
.creation-step[data-creation-step="0"].active{box-shadow:0 8px 18px rgba(33,166,202,.22), inset 0 0 0 1px rgba(144,233,255,.14)}
.creation-step[data-creation-step="1"].active{box-shadow:0 8px 18px rgba(84,190,168,.22), inset 0 0 0 1px rgba(163,239,222,.14)}
.creation-step[data-creation-step="2"].active{box-shadow:0 8px 18px rgba(64,126,255,.22), inset 0 0 0 1px rgba(165,191,255,.14)}
.creation-step[data-creation-step="3"].active{box-shadow:0 8px 18px rgba(148,101,255,.22), inset 0 0 0 1px rgba(205,188,255,.14)}
.creation-step[data-creation-step="4"].active{box-shadow:0 8px 18px rgba(255,155,72,.20), inset 0 0 0 1px rgba(255,219,182,.14)}
.creation-step[data-creation-step="5"].active{box-shadow:0 8px 18px rgba(82,204,133,.20), inset 0 0 0 1px rgba(183,244,204,.14)}
@media(max-width:760px){
  .creation-step{padding:5px 7px;font-size:14px}
}
@media(max-width:560px){
  .creation-step{padding:4px 6px;font-size:13px}
}


/* =========================================================
   v11 — colores más llamativos para etapas
   ========================================================= */
.creation-step{
  border-width:1px;
  color:#ffffff;
}
.creation-step b,
.creation-step span{
  color:#ffffff;
  text-shadow:0 0 10px rgba(255,255,255,.08);
}
.creation-step[data-creation-step="0"]{
  background:linear-gradient(180deg,rgba(0,214,255,.40),rgba(0,214,255,.18));
  border-color:rgba(70,233,255,.76);
  box-shadow:0 0 0 1px rgba(0,214,255,.12), 0 10px 24px rgba(0,214,255,.22);
}
.creation-step[data-creation-step="1"]{
  background:linear-gradient(180deg,rgba(0,255,170,.38),rgba(0,255,170,.17));
  border-color:rgba(96,255,204,.72);
  box-shadow:0 0 0 1px rgba(0,255,170,.10), 0 10px 24px rgba(0,255,170,.20);
}
.creation-step[data-creation-step="2"]{
  background:linear-gradient(180deg,rgba(0,132,255,.40),rgba(0,132,255,.18));
  border-color:rgba(92,177,255,.76);
  box-shadow:0 0 0 1px rgba(0,132,255,.12), 0 10px 24px rgba(0,132,255,.22);
}
.creation-step[data-creation-step="3"]{
  background:linear-gradient(180deg,rgba(170,84,255,.40),rgba(170,84,255,.18));
  border-color:rgba(206,150,255,.74);
  box-shadow:0 0 0 1px rgba(170,84,255,.12), 0 10px 24px rgba(170,84,255,.22);
}
.creation-step[data-creation-step="4"]{
  background:linear-gradient(180deg,rgba(255,136,0,.42),rgba(255,136,0,.18));
  border-color:rgba(255,186,93,.76);
  box-shadow:0 0 0 1px rgba(255,136,0,.12), 0 10px 24px rgba(255,136,0,.22);
}
.creation-step[data-creation-step="5"]{
  background:linear-gradient(180deg,rgba(114,255,70,.38),rgba(114,255,70,.17));
  border-color:rgba(174,255,149,.74);
  box-shadow:0 0 0 1px rgba(114,255,70,.12), 0 10px 24px rgba(114,255,70,.20);
}
.creation-step.active{
  transform:translateY(-2px) scale(1.02);
  filter:saturate(1.24) brightness(1.10);
}
.creation-step[data-creation-step="0"].active{box-shadow:0 0 0 1px rgba(123,245,255,.22), 0 12px 28px rgba(0,214,255,.34), 0 0 18px rgba(0,214,255,.18)}
.creation-step[data-creation-step="1"].active{box-shadow:0 0 0 1px rgba(170,255,226,.22), 0 12px 28px rgba(0,255,170,.30), 0 0 18px rgba(0,255,170,.18)}
.creation-step[data-creation-step="2"].active{box-shadow:0 0 0 1px rgba(159,208,255,.22), 0 12px 28px rgba(0,132,255,.34), 0 0 18px rgba(0,132,255,.18)}
.creation-step[data-creation-step="3"].active{box-shadow:0 0 0 1px rgba(226,194,255,.22), 0 12px 28px rgba(170,84,255,.34), 0 0 18px rgba(170,84,255,.18)}
.creation-step[data-creation-step="4"].active{box-shadow:0 0 0 1px rgba(255,218,175,.22), 0 12px 28px rgba(255,136,0,.34), 0 0 18px rgba(255,136,0,.18)}
.creation-step[data-creation-step="5"].active{box-shadow:0 0 0 1px rgba(210,255,197,.22), 0 12px 28px rgba(114,255,70,.30), 0 0 18px rgba(114,255,70,.18)}


/* =========================================================
   v12 — etapa activa con mayor protagonismo
   ========================================================= */
.creation-timeline .creation-step{
  opacity:.72;
  transform:scale(.96);
  transition:transform .22s ease, filter .22s ease, box-shadow .22s ease, opacity .22s ease;
}
.creation-timeline .creation-step:hover{
  opacity:.92;
  transform:translateY(-1px) scale(.99);
}
.creation-timeline .creation-step.active{
  opacity:1 !important;
  transform:translateY(-3px) scale(1.10) !important;
  z-index:3;
  position:relative;
  filter:saturate(1.35) brightness(1.18) contrast(1.06) !important;
}
.creation-timeline .creation-step.active::after{
  content:"";
  position:absolute;
  inset:-4px;
  border-radius:8px;
  pointer-events:none;
}
.creation-timeline .creation-step[data-creation-step="0"].active::after{box-shadow:0 0 0 1px rgba(121,245,255,.45), 0 0 22px rgba(0,214,255,.42), 0 0 42px rgba(0,214,255,.22)}
.creation-timeline .creation-step[data-creation-step="1"].active::after{box-shadow:0 0 0 1px rgba(170,255,226,.42), 0 0 22px rgba(0,255,170,.36), 0 0 42px rgba(0,255,170,.20)}
.creation-timeline .creation-step[data-creation-step="2"].active::after{box-shadow:0 0 0 1px rgba(159,208,255,.44), 0 0 22px rgba(0,132,255,.42), 0 0 42px rgba(0,132,255,.22)}
.creation-timeline .creation-step[data-creation-step="3"].active::after{box-shadow:0 0 0 1px rgba(226,194,255,.44), 0 0 22px rgba(170,84,255,.42), 0 0 42px rgba(170,84,255,.22)}
.creation-timeline .creation-step[data-creation-step="4"].active::after{box-shadow:0 0 0 1px rgba(255,218,175,.44), 0 0 22px rgba(255,136,0,.42), 0 0 42px rgba(255,136,0,.22)}
.creation-timeline .creation-step[data-creation-step="5"].active::after{box-shadow:0 0 0 1px rgba(210,255,197,.42), 0 0 22px rgba(114,255,70,.36), 0 0 42px rgba(114,255,70,.20)}
.creation-timeline .creation-step.active b,
.creation-timeline .creation-step.active span{
  color:#ffffff;
  text-shadow:0 0 14px rgba(255,255,255,.16);
}

@media(max-width:760px){
  .creation-timeline .creation-step{opacity:.78;transform:scale(.97)}
  .creation-timeline .creation-step.active{transform:translateY(-2px) scale(1.06) !important}
}
@media(max-width:560px){
  .creation-timeline .creation-step.active{transform:translateY(-1px) scale(1.03) !important}
}


/* =========================================================
   Portada con 4 imágenes rotativas
   ========================================================= */
.hero{isolation:isolate}
.hero-background-slider{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-background-slider .hero-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease;}
.hero-background-slider .hero-slide.is-active{opacity:1}
.hero-background-slider .hero-slide img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.04);filter:saturate(1.02) contrast(1.06) brightness(.64)}
.hero-background-slider .hero-slide.is-active img{animation:heroSlideZoom 7s ease forwards}
.hero-slider-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,7,10,.72) 0%,rgba(3,7,10,.58) 28%,rgba(3,7,10,.42) 52%,rgba(3,7,10,.55) 74%,rgba(3,7,10,.72) 100%),linear-gradient(180deg,rgba(3,7,10,.18),rgba(3,7,10,.10) 24%,rgba(3,7,10,.34) 100%)}
.hero-grid-overlay{z-index:1}
.hero-layout{z-index:2}
@keyframes heroSlideZoom{0%{transform:scale(1.04)}100%{transform:scale(1.10)}}
@media(max-width:850px){.hero-background-slider .hero-slide img{filter:saturate(1) contrast(1.05) brightness(.56)}}
@media(prefers-reduced-motion:reduce){.hero-background-slider .hero-slide,.hero-background-slider .hero-slide img{transition:none!important;animation:none!important}}


/* v3 — portada más visible */
.hero-background-slider .hero-slide::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 68% 35%, rgba(32,170,220,.12), transparent 28%);pointer-events:none}


/* =========================================================
   v4 — workflow stages in horizontal layout
   ========================================================= */
.creation-timeline{
  position:relative;
  display:flex !important;
  flex-direction:row !important;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:14px;
  padding:12px 4px 8px;
  overflow-x:auto;
  overflow-y:visible;
  scrollbar-width:none;
}
.creation-timeline::-webkit-scrollbar{display:none}
.creation-timeline .creation-track{
  display:block !important;
  position:absolute;
  left:18px;
  right:18px;
  top:50%;
  height:2px;
  transform:translateY(-50%);
  background:linear-gradient(90deg,rgba(85,113,128,.28),rgba(85,113,128,.16));
  border-radius:999px;
  z-index:0;
}
.creation-timeline .creation-progress{
  display:block;
  height:100%;
  width:16.666%;
  border-radius:999px;
  background:linear-gradient(90deg,rgba(38,201,255,.88),rgba(107,236,255,.98));
  box-shadow:0 0 12px rgba(38,201,255,.28);
}
.creation-timeline .creation-step{
  position:relative;
  z-index:1;
  flex:1 0 0;
  min-width:108px;
  justify-content:center;
}
@media(max-width:900px){
  .creation-timeline{
    justify-content:flex-start;
    padding-bottom:10px;
  }
  .creation-timeline .creation-step{
    flex:0 0 auto;
    min-width:112px;
  }
}
@media(max-width:560px){
  .creation-timeline{
    gap:8px;
    padding-top:10px;
  }
  .creation-timeline .creation-track{
    left:14px;
    right:14px;
  }
  .creation-timeline .creation-step{
    min-width:98px;
  }
}


/* =========================================================
   v5 — workflow horizontal cleaner: no blue line + readable labels
   ========================================================= */
.creation-timeline{
  gap:8px !important;
  padding:8px 0 10px !important;
  overflow-x:auto;
  overflow-y:hidden;
  justify-content:flex-start !important;
}
.creation-timeline .creation-track,
.creation-timeline .creation-progress{
  display:none !important;
}
.creation-timeline .creation-step{
  flex:1 1 0 !important;
  min-width:0 !important;
  padding:6px 8px !important;
  font-size:12px !important;
  line-height:1 !important;
  border-radius:6px !important;
  white-space:nowrap !important;
  overflow:visible !important;
}
.creation-timeline .creation-step b,
.creation-timeline .creation-step span{
  font-size:12px !important;
  line-height:1 !important;
}
.creation-timeline .creation-step b{
  min-width:18px !important;
}
.creation-timeline .creation-step span{
  letter-spacing:0 !important;
}
.creation-timeline .creation-step.active{
  transform:translateY(-2px) scale(1.03) !important;
}
@media(max-width:1100px){
  .creation-timeline .creation-step{
    flex:0 0 auto !important;
    min-width:110px !important;
    font-size:11px !important;
    padding:6px 8px !important;
  }
  .creation-timeline .creation-step b,
  .creation-timeline .creation-step span{
    font-size:11px !important;
  }
}
@media(max-width:760px){
  .creation-timeline{
    gap:6px !important;
  }
  .creation-timeline .creation-step{
    min-width:98px !important;
    padding:5px 7px !important;
    font-size:10.5px !important;
  }
  .creation-timeline .creation-step b,
  .creation-timeline .creation-step span{
    font-size:10.5px !important;
  }
}


/* =========================================================
   v6 — corregir recorte del primer y último botón activo
   ========================================================= */
.creation-timeline{
  padding:10px 14px 12px !important;
  margin-left:-2px;
  margin-right:-2px;
  overflow-x:auto !important;
  overflow-y:visible !important;
}
.creation-timeline .creation-step{
  position:relative;
  z-index:1;
}
.creation-timeline .creation-step.active{
  z-index:3 !important;
  transform:translateY(-2px) scale(1.02) !important;
}
@media(max-width:1100px){
  .creation-timeline{
    padding:10px 12px 12px !important;
    margin-left:0;
    margin-right:0;
  }
}
@media(max-width:760px){
  .creation-timeline{
    padding:8px 10px 10px !important;
  }
}


/* =========================================================
   v9 — textos de encabezado debajo de cada título
   ========================================================= */
.section-heading.split-heading{
  display:block !important;
  margin-bottom:30px !important;
}
.section-heading.split-heading > div{
  max-width:920px;
}
.section-heading-copy{
  margin:12px 0 0 !important;
  max-width:62ch;
  color:#86a0af;
  line-height:1.65;
  font-size:16px;
}
@media(max-width:760px){
  .section-heading-copy{
    font-size:15px;
    margin-top:10px !important;
  }
}


/* =========================================================
   v10 — responsive: mostrar las 6 etapas completas
   ========================================================= */
@media(max-width:760px){
  .creation-timeline{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px !important;
    padding:8px 0 10px !important;
    margin-left:0 !important;
    margin-right:0 !important;
    overflow:visible !important;
    align-items:stretch;
  }
  .creation-timeline .creation-step{
    flex:none !important;
    min-width:0 !important;
    width:100%;
    justify-content:center;
    padding:7px 8px !important;
    border-radius:8px !important;
  }
  .creation-timeline .creation-step b,
  .creation-timeline .creation-step span{
    font-size:10px !important;
  }
}
@media(max-width:480px){
  .creation-timeline{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px !important;
  }
  .creation-timeline .creation-step{
    padding:7px 8px !important;
  }
  .creation-timeline .creation-step b,
  .creation-timeline .creation-step span{
    font-size:10px !important;
  }
}


/* =========================================================
   v11 — tipografía consistente en ETAPA ACTUAL
   ========================================================= */
.creation-layout-v13 .studio-detail,
.creation-layout-v13 .studio-detail span,
.creation-layout-v13 .studio-detail p,
#creationStageDetail{
  font-family:Inter,system-ui,sans-serif !important;
}
.creation-layout-v13 .studio-detail span{
  font-size:12px;
  font-weight:700;
  letter-spacing:.02em;
}
#creationStageTitle{
  font-family:"Space Grotesk",Inter,system-ui,sans-serif !important;
  font-weight:700;
}
#creationStageDetail{
  font-size:16px;
  font-weight:500;
  line-height:1.6 !important;
}
@media(max-width:760px){
  #creationStageDetail{font-size:15px}
  .creation-layout-v13 .studio-detail span{font-size:11px}
}


/* =========================================================
   v12 — mejora de legibilidad de textos pequeños
   ========================================================= */
.nav a{font-size:14px !important}
.kicker,.eyebrow{font-size:12px !important}
.hero-lead{font-size:19px !important; line-height:1.78 !important}
.hero-trust strong{font-size:14px !important}
.hero-trust span{font-size:12px !important}
.console-head{font-size:11px !important}
.monitor-hud{font-size:10px !important}
.signal-card span{font-size:10px !important}
.signal-card small{font-size:11px !important}
.timeline-labels{font-size:10px !important}
.pill{font-size:10px !important}
.capability-grid span{font-size:11px !important}
.capability-grid small{font-size:12px !important}
.split-heading p,.pipeline-copy>p,.streaming-layout p,.cta-copy p,.cluster-intro p,.real-work-head p{font-size:17px !important}
.service-index{font-size:11px !important}
.service-large p,.service-small p{font-size:15px !important}
.tag-row span{font-size:11px !important}
.pipeline-tab{font-size:14px !important}
.pipeline-tab span{font-size:10px !important}
.panel-code{font-size:10px !important}
.pipeline-panel p{font-size:15px !important}
.metric-grid span{font-size:10px !important}
.progress-stack div>span{font-size:11px !important}
.qc-list div{font-size:13px !important}
.qc-list strong{font-size:11px !important}
.file-stack span{font-size:12px !important}
.scope-head{font-size:10px !important}
.scope-video span{font-size:10px !important}
.scope-status span{font-size:10px !important}
.stream-points span{font-size:13px !important}
.flow-node span{font-size:10px !important}
.flow-node small{font-size:10px !important}
.flow-outputs strong{font-size:12px !important}
.flow-outputs small{font-size:10px !important}
.contact-mini{font-size:13px !important}
.contact-form label{font-size:12px !important}
.creation-examples article strong{font-size:16px !important}
.case-note{font-size:14px !important}
.creation-real-image figcaption strong{font-size:12px !important}
.real-work-card figcaption small{font-size:11px !important}
.image-reference-note{font-size:10px !important}
.workflow-photo-kicker{font-size:11px !important}
.workflow-photo-overlay p{font-size:13px !important; line-height:1.6 !important}
.workflow-photo-tags span{font-size:11px !important}
.wf-stage-head{font-size:10px !important}
.wf-brief-card span{font-size:9px !important}
.wf-brief-card small{font-size:12px !important}
.wf-checklist b,.wf-storyboard b{font-size:11px !important}
.wf-checklist span{font-size:12px !important}
.wf-audio-row small{font-size:11px !important}
.wf-tool b{font-size:13px !important}
.wf-tool span{font-size:11px !important}
.wf-master-card span{font-size:9px !important}
.wf-master-card small{font-size:12px !important}
.wf-output-row span,.wf-idea-pills span{font-size:11px !important}
.creation-layout-v13 .studio-detail span{font-size:12px !important}

@media(max-width:900px){
  .hero-lead,.split-heading p,.pipeline-copy>p,.streaming-layout p,.cta-copy p,.cluster-intro p,.real-work-head p{font-size:16px !important}
  .pipeline-panel p,.service-large p,.service-small p{font-size:14px !important}
  .workflow-photo-overlay p{font-size:12px !important}
}
@media(max-width:640px){
  .kicker,.eyebrow{font-size:11px !important}
  .hero-lead,.split-heading p,.pipeline-copy>p,.streaming-layout p,.cta-copy p,.cluster-intro p,.real-work-head p{font-size:15px !important}
  .service-large p,.service-small p,.pipeline-panel p,.qc-copy p{font-size:14px !important}
  .workflow-photo-overlay p{font-size:11px !important}
  .workflow-photo-tags span{font-size:10px !important}
  .wf-checklist span,.wf-output-row span,.wf-idea-pills span{font-size:10px !important}
  .contact-form label,.contact-mini,.stream-points span{font-size:12px !important}
}


/* =========================================================
   v13 — títulos/accentos azules ligeramente más grandes
   ========================================================= */
.kicker,
.eyebrow{
  font-size:13px !important;
  line-height:1.2 !important;
}
.panel-code,
.creation-badge,
.result-kicker,
.local-tag,
.service-index,
.audience-id{
  font-size:12px !important;
}
@media(max-width:640px){
  .kicker,
  .eyebrow{
    font-size:12px !important;
  }
  .panel-code,
  .creation-badge,
  .result-kicker,
  .local-tag,
  .service-index,
  .audience-id{
    font-size:11px !important;
  }
}


/* =========================================================
   v22 — fondo distinto en contenedor de ejemplos de uso
   ========================================================= */
.fit-case .case-visual{
  position:relative;
  isolation:isolate;
  background:linear-gradient(180deg,#0c1116,#131a20);
}
.fit-case .case-visual::before,
.fit-case .case-visual::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
}
.fit-case .case-visual::before{
  background-image:var(--fit-case-bg);
  background-size:cover;
  background-position:var(--fit-case-pos,center center);
  opacity:.58;
  filter:saturate(1.04) contrast(1.02) brightness(.98);
  transform:scale(1.015);
  transition:opacity .28s ease, filter .28s ease, transform .35s ease;
}
.fit-case.active .case-visual::before{
  opacity:.66;
  filter:saturate(1.06) contrast(1.03) brightness(1.02);
  transform:scale(1.01);
}
.fit-case .case-visual::after{
  background:
    linear-gradient(180deg,rgba(5,10,14,.08) 0%,rgba(6,12,16,.18) 52%,rgba(6,12,16,.30) 100%),
    radial-gradient(circle at 18% 22%,rgba(91,215,255,.08),transparent 38%),
    radial-gradient(circle at 82% 78%,rgba(91,215,255,.05),transparent 34%);
}
.fit-case[data-case-panel="redes"]{--fit-case-bg:url("assets/images/fit-redes.jpg");--fit-case-pos:center 38%;}
.fit-case[data-case-panel="cliente"]{--fit-case-bg:url("assets/images/fit-cliente.jpg");--fit-case-pos:center 50%;}
.fit-case[data-case-panel="evento"]{--fit-case-bg:url("assets/images/portada-slide-03.jpg");--fit-case-pos:center center;}
.fit-case[data-case-panel="archivo"]{--fit-case-bg:url("assets/images/portada-slide-04.jpg");--fit-case-pos:center 42%;}
.fit-case .case-visual > *{
  position:relative;
  z-index:1;
}


/* =========================================================
   v25 — animaciones sutiles de edición de audio/video
   ========================================================= */
.edit-mini{
  position:relative;
  width:100%;
  min-height:232px;
  display:grid;
  grid-template-rows:118px 92px;
  gap:12px;
  padding:14px;
  border-radius:18px;
  background:rgba(7,12,16,.16);
  border:1px solid rgba(255,255,255,.05);
  -webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);
}
.edit-mini-viewer{
  position:relative;
  overflow:hidden;
  border-radius:12px;
  background:linear-gradient(135deg,rgba(8,14,18,.42),rgba(14,24,30,.24));
  border:1px solid rgba(255,255,255,.05);
}
.edit-mini-frame{
  position:absolute;
  inset:18px 24px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:8px;
  background:linear-gradient(135deg,rgba(91,215,255,.05),rgba(255,255,255,.01));
}
.edit-mini-frame::before,
.edit-mini-frame::after{
  content:"";
  position:absolute;
  left:12%; right:12%;
  height:1px;
  background:rgba(255,255,255,.06);
}
.edit-mini-frame::before{top:34%}
.edit-mini-frame::after{bottom:34%}
.edit-mini-play{
  position:absolute;
  left:50%; top:50%;
  width:30px; height:30px;
  border-radius:50%;
  transform:translate(-50%,-50%);
  border:1px solid rgba(91,215,255,.22);
  background:rgba(5,10,14,.26);
}
.edit-mini-play::after{
  content:"";
  position:absolute;
  left:12px; top:8px;
  border-left:9px solid rgba(223,248,255,.72);
  border-top:6px solid transparent;
  border-bottom:6px solid transparent;
}
.edit-mini-timeline{
  position:relative;
  border-radius:12px;
  padding:16px 12px 10px;
  background:rgba(5,10,14,.42);
  border:1px solid rgba(255,255,255,.05);
  overflow:hidden;
}
.edit-mini-ruler{
  position:absolute;
  left:12px; right:12px; top:8px;
  height:5px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.10) 0 1px,transparent 1px 18px);
  opacity:.28;
}
.edit-mini-track{
  position:relative;
  height:20px;
  margin-top:11px;
  border-radius:4px;
  background:rgba(255,255,255,.02);
  overflow:hidden;
}
.edit-mini-track.video .clip{
  position:absolute;
  top:2px; bottom:2px;
  border-radius:3px;
  background:linear-gradient(90deg,rgba(18,166,220,.42),rgba(91,215,255,.18));
  border:1px solid rgba(91,215,255,.10);
}
.edit-mini-track.video .c1{left:2%;width:28%}
.edit-mini-track.video .c2{left:32%;width:34%}
.edit-mini-track.video .c3{left:68%;width:28%}
.edit-mini-track.audio .wave{
  position:absolute;
  inset:3px 2%;
  border-radius:3px;
  background:
    repeating-linear-gradient(90deg,rgba(94,214,154,.42) 0 2px,transparent 2px 5px),
    linear-gradient(90deg,rgba(94,214,154,.10),rgba(18,166,220,.05));
  -webkit-mask-image:linear-gradient(180deg,transparent 0,black 26%,black 74%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,black 26%,black 74%,transparent 100%);
  opacity:.62;
  animation:editMiniWave 6.4s linear infinite;
}
.edit-mini-playhead{
  position:absolute;
  top:8px; bottom:8px;
  left:18%;
  width:1px;
  background:rgba(255,255,255,.58);
  box-shadow:0 0 5px rgba(255,255,255,.16);
  animation:editMiniPlayhead 8.6s ease-in-out infinite;
}
.edit-mini-playhead::before{
  content:"";
  position:absolute;
  top:-1px; left:-2px;
  width:5px;height:5px;
  border-radius:50%;
  background:rgba(223,248,255,.78);
}
.edit-mini-cliente .edit-mini-track.video .clip{background:linear-gradient(90deg,rgba(124,104,255,.38),rgba(91,215,255,.18))}
.edit-mini-evento .edit-mini-track.video .clip{background:linear-gradient(90deg,rgba(255,158,82,.38),rgba(91,215,255,.16))}
.edit-mini-archivo .edit-mini-track.video .clip{background:linear-gradient(90deg,rgba(94,214,154,.34),rgba(91,215,255,.16))}
.edit-mini-redes .edit-mini-frame{box-shadow:inset 0 0 0 1px rgba(91,215,255,.025)}
.edit-mini-cliente .edit-mini-frame{box-shadow:inset 0 0 0 1px rgba(149,127,255,.03)}
.edit-mini-evento .edit-mini-frame{box-shadow:inset 0 0 0 1px rgba(255,174,102,.03)}
.edit-mini-archivo .edit-mini-frame{box-shadow:inset 0 0 0 1px rgba(94,214,154,.03)}
@keyframes editMiniPlayhead{
  0%,100%{left:18%}
  50%{left:82%}
}
@keyframes editMiniWave{
  from{background-position:0 0,0 0}
  to{background-position:30px 0,0 0}
}
@media(max-width:760px){
  .edit-mini{min-height:210px;grid-template-rows:104px 82px;padding:12px}
  .edit-mini-frame{inset:16px 20px}
}
@media(prefers-reduced-motion:reduce){
  .edit-mini-playhead,.edit-mini-track.audio .wave{animation:none!important}
}


/* =========================================================
   Preloader
   ========================================================= */
body.is-preloading {
  overflow: hidden;
}

.site-preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 2rem;
  background:
    radial-gradient(circle at 50% 42%, rgba(91,215,255,.14), transparent 34%),
    linear-gradient(180deg, rgba(10,16,24,.985) 0%, rgba(6,10,16,.995) 100%);
  opacity: 1;
  visibility: visible;
  transition: opacity .38s ease, visibility .38s ease;
}

.site-preloader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.site-preloader__inner {
  width: min(320px, 80vw);
  display: grid;
  gap: 1rem;
  justify-items: center;
  text-align: center;
}

.site-preloader__logo {
  width: min(240px, 70vw);
  height: auto;
  filter: drop-shadow(0 0 14px rgba(91,215,255,.10));
  animation: preloaderPulse 1.15s ease-in-out infinite;
}

.site-preloader__bar {
  position: relative;
  width: 100%;
  height: 3px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,.08);
  box-shadow: inset 0 0 0 1px rgba(91,215,255,.08);
}

.site-preloader__bar span {
  display: block;
  width: 42%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(91,215,255,.2) 0%, rgba(91,215,255,.95) 48%, rgba(91,215,255,.2) 100%);
  box-shadow: 0 0 18px rgba(91,215,255,.35);
  animation: preloaderSweep 1.1s ease-in-out infinite;
}

@keyframes preloaderPulse {
  0%, 100% { opacity: .88; transform: translateY(0) scale(1); }
  50% { opacity: 1; transform: translateY(-1px) scale(1.012); }
}

@keyframes preloaderSweep {
  0% { transform: translateX(-110%); }
  100% { transform: translateX(240%); }
}

@media (prefers-reduced-motion: reduce) {
  .site-preloader,
  .site-preloader.is-hidden {
    transition: none;
  }

  .site-preloader__logo,
  .site-preloader__bar span {
    animation: none;
  }
}


/* =========================================================
   v33 — compatibilidad entre navegadores
   Chrome / Edge / Firefox / Safari / iOS / Android
   ========================================================= */

/* El preloader es una mejora progresiva: sin JavaScript, la web abre normal. */
.site-preloader{display:none}
html.js.is-loading .site-preloader{display:grid}
html.js:not(.is-loading) .site-preloader{display:none}
html.js.is-loading body{overflow:hidden}

/* Fallback cuando backdrop-filter no está disponible. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .site-header{background:rgba(7,10,13,.97)!important}
  .play-icon{background:rgba(7,10,13,.82)!important}
  .edit-mini{background:rgba(7,12,16,.30)!important}
}

/* content-visibility es sólo una optimización; el layout no depende de ella. */
@supports not (content-visibility:auto){
  .section:not(.intro-section),.cta-section{
    content-visibility:visible;
    contain:none;
  }
}

/* Fallback para navegadores sin aspect-ratio. */
@supports not (aspect-ratio:16 / 9){
  .creation-preview-scene{height:350px}
  @media(max-width:760px){.creation-preview-scene{height:280px}}
  @media(max-width:560px){.creation-preview-scene{height:258px}}
}

/* Evita diferencias de controles/formularios entre motores. */
button,input,select,textarea{font:inherit}
button,select{-webkit-appearance:none;appearance:none}
input,textarea{-webkit-appearance:none;appearance:none}
button{touch-action:manipulation}
img{max-width:100%;height:auto}

/* Safari/iOS: reduce saltos de composición en elementos animados. */
.hero-slide,
.workflow-photo-card,
.edit-mini,
.creation-step,
.site-preloader__inner{
  -webkit-transform:translateZ(0);
  transform:translateZ(0);
}

/* Focus consistente con teclado, sin depender de :focus-visible en navegadores antiguos. */
a:focus,button:focus,input:focus,select:focus,textarea:focus{
  outline:2px solid rgba(91,215,255,.8);
  outline-offset:3px;
}
@supports selector(:focus-visible){
  a:focus:not(:focus-visible),button:focus:not(:focus-visible),input:focus:not(:focus-visible),select:focus:not(:focus-visible),textarea:focus:not(:focus-visible){outline:none}
}

/* Impresión / navegadores que desactivan animaciones o fondos complejos. */
@media print{
  .site-preloader,.hero-background-slider,.hero-grid-overlay{display:none!important}
  body{background:#fff!important;color:#111!important}
}


/* =========================================================
   Contacto: formulario real + WhatsApp
   ========================================================= */
.form-honey{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}
.contact-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.contact-actions .btn{flex:1 1 190px;text-align:center}
.btn-whatsapp{display:inline-flex;align-items:center;justify-content:center;background:#1cbb67;color:#fff;border:1px solid #1cbb67}
.btn-whatsapp:hover,.btn-whatsapp:focus-visible{background:#169a55;border-color:#169a55;color:#fff;transform:translateY(-1px)}
.whatsapp-text-link{font-weight:700}
@media(max-width:560px){.contact-actions{display:grid;grid-template-columns:1fr}.contact-actions .btn{width:100%}}

/* Protección anti-bot: campo señuelo fuera del flujo visual pero detectable por bots. */
.bot-trap{
  position:absolute!important;
  left:-10000px!important;
  top:auto!important;
  width:1px!important;
  height:1px!important;
  overflow:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}
.bot-trap input{width:1px!important;height:1px!important;padding:0!important;border:0!important;}

/* =========================================================
   Confirmación temporal del formulario
   ========================================================= */
.form-success-modal{
  position:fixed;
  inset:0;
  z-index:10020;
  display:grid;
  place-items:center;
  padding:24px;
  background:rgba(4,8,12,.38);
  -webkit-backdrop-filter:blur(3px);
  backdrop-filter:blur(3px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .22s ease,visibility .22s ease;
}
.form-success-modal.is-visible{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.form-success-modal__card{
  width:min(430px,calc(100vw - 36px));
  display:flex;
  align-items:center;
  gap:16px;
  padding:20px 22px;
  border-radius:18px;
  color:#eefaff;
  background:rgba(9,17,23,.96);
  border:1px solid rgba(91,215,255,.28);
  box-shadow:0 22px 70px rgba(0,0,0,.32),0 0 30px rgba(91,215,255,.10);
  transform:translateY(10px) scale(.985);
  transition:transform .24s ease;
}
.form-success-modal.is-visible .form-success-modal__card{
  transform:translateY(0) scale(1);
}
.form-success-modal__icon{
  flex:0 0 42px;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#071016;
  background:#5bd7ff;
  font-size:22px;
  font-weight:900;
  box-shadow:0 0 20px rgba(91,215,255,.28);
}
.form-success-modal__card div{display:grid;gap:4px}
.form-success-modal__card strong{font-family:"Space Grotesk",sans-serif;font-size:18px;letter-spacing:-.2px}
.form-success-modal__card span{font-size:13px;line-height:1.45;color:#aebfc7}
@media(max-width:520px){
  .form-success-modal__card{padding:18px;gap:13px}
  .form-success-modal__icon{flex-basis:38px;width:38px;height:38px;font-size:20px}
}
@media(prefers-reduced-motion:reduce){
  .form-success-modal,.form-success-modal__card{transition:none!important}
}

/* =========================================================
   Uniform color behavior for workflow buttons
   Active step = same cyan highlight for any selected stage
   Inactive steps = same neutral dark/cyan style
   ========================================================= */
.creation-timeline .creation-step,
.creation-timeline .creation-step[data-creation-step],
.creation-timeline .creation-step[data-creation-step="0"],
.creation-timeline .creation-step[data-creation-step="1"],
.creation-timeline .creation-step[data-creation-step="2"],
.creation-timeline .creation-step[data-creation-step="3"],
.creation-timeline .creation-step[data-creation-step="4"],
.creation-timeline .creation-step[data-creation-step="5"]{
  background:linear-gradient(180deg,rgba(10,18,24,.94),rgba(7,13,18,.96)) !important;
  border:1px solid rgba(91,215,255,.22) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.02), 0 8px 20px rgba(0,0,0,.18) !important;
}
.creation-timeline .creation-step b,
.creation-timeline .creation-step span{
  color:#d8eaf2 !important;
}
.creation-timeline .creation-step:hover{
  border-color:rgba(91,215,255,.34) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03), 0 10px 22px rgba(0,0,0,.22) !important;
}
.creation-timeline .creation-step.active,
.creation-timeline .creation-step[aria-current="true"]{
  background:linear-gradient(180deg,rgba(5,39,53,.98),rgba(5,28,38,.98)) !important;
  border:1px solid rgba(91,215,255,.72) !important;
  box-shadow:0 0 0 1px rgba(123,245,255,.22), 0 14px 28px rgba(0,214,255,.26), 0 0 20px rgba(0,214,255,.16) !important;
}
.creation-timeline .creation-step.active::after,
.creation-timeline .creation-step[aria-current="true"]::after{
  box-shadow:0 0 0 1px rgba(121,245,255,.40), 0 0 22px rgba(0,214,255,.30), 0 0 38px rgba(0,214,255,.16) !important;
}
.creation-timeline .creation-step.active b,
.creation-timeline .creation-step.active span,
.creation-timeline .creation-step[aria-current="true"] b,
.creation-timeline .creation-step[aria-current="true"] span{
  color:#effbff !important;
}

/* Variant: inactive workflow buttons brighter */
.creation-timeline .creation-step,
.creation-timeline .creation-step[data-creation-step]{
  background:linear-gradient(180deg,rgba(12,27,35,.96),rgba(8,18,24,.98)) !important;
  border:1px solid rgba(91,215,255,.34) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03), 0 10px 24px rgba(0,0,0,.18), 0 0 16px rgba(0,214,255,.08) !important;
}
.creation-timeline .creation-step b,
.creation-timeline .creation-step span{
  color:#e6f5fb !important;
}
.creation-timeline .creation-step:hover{
  border-color:rgba(91,215,255,.46) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04), 0 12px 26px rgba(0,0,0,.20), 0 0 18px rgba(0,214,255,.12) !important;
}


/* =========================================================
   Privacy notice consent + modal
   ========================================================= */
.privacy-consent{
  display:flex !important;
  grid-template-columns:none !important;
  align-items:flex-start;
  gap:10px !important;
  padding:3px 1px 0;
  color:#bac9d0 !important;
  font-size:12px !important;
  line-height:1.55;
  font-weight:500 !important;
  cursor:pointer;
}
.privacy-consent input[type="checkbox"]{
  appearance:auto;
  width:17px !important;
  height:17px !important;
  min-width:17px;
  padding:0 !important;
  margin:1px 0 0;
  accent-color:#5bd7ff;
  cursor:pointer;
}
.privacy-consent span{display:block}
.privacy-link{
  appearance:none;
  border:0;
  padding:0;
  margin:0;
  background:transparent;
  color:#5bd7ff;
  font:inherit;
  font-weight:750;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  cursor:pointer;
}
.privacy-link:hover,.privacy-link:focus-visible{color:#b9efff}
.privacy-consent-help{margin-top:-8px;color:#71858f !important;font-size:10px !important}

.privacy-modal{
  position:fixed;
  inset:0;
  z-index:12000;
  display:grid;
  place-items:center;
  padding:24px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .22s ease,visibility .22s ease;
}
.privacy-modal.is-visible{opacity:1;visibility:visible;pointer-events:auto}
.privacy-modal__backdrop{position:absolute;inset:0;background:rgba(2,7,10,.82);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.privacy-modal__panel{
  position:relative;
  z-index:1;
  width:min(900px,100%);
  max-height:min(86vh,850px);
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  overflow:hidden;
  border-radius:22px;
  background:#0b1217;
  border:1px solid rgba(91,215,255,.24);
  box-shadow:0 35px 110px rgba(0,0,0,.58),0 0 35px rgba(91,215,255,.08);
  color:#eaf4f8;
  transform:translateY(12px) scale(.985);
  transition:transform .22s ease;
}
.privacy-modal.is-visible .privacy-modal__panel{transform:translateY(0) scale(1)}
.privacy-modal__header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  padding:24px 28px 20px;
  border-bottom:1px solid rgba(255,255,255,.07);
  background:linear-gradient(180deg,rgba(91,215,255,.06),transparent);
}
.privacy-modal__eyebrow{display:block;margin-bottom:6px;color:#5bd7ff;font-size:10px;font-weight:800;letter-spacing:1.8px}
.privacy-modal__header h2{margin:0;font-family:"Space Grotesk",Inter,sans-serif;font-size:clamp(23px,3vw,32px);letter-spacing:-.7px}
.privacy-modal__header p{margin:6px 0 0;color:#82959e;font-size:11px}
.privacy-modal__close{
  flex:0 0 40px;
  width:40px;
  height:40px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.035);
  color:#d8e8ee;
  font-size:28px;
  line-height:1;
  cursor:pointer;
}
.privacy-modal__close:hover,.privacy-modal__close:focus-visible{border-color:rgba(91,215,255,.44);color:#5bd7ff;outline:none}
.privacy-modal__body{overflow:auto;padding:26px 28px 30px;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#244754 #0b1217}
.privacy-modal__body h3{margin:27px 0 8px;color:#effaff;font-family:"Space Grotesk",Inter,sans-serif;font-size:16px;letter-spacing:-.15px}
.privacy-modal__body h3:first-of-type{margin-top:18px}
.privacy-modal__body p{margin:0 0 12px;color:#afc0c8;font-size:13px;line-height:1.75}
.privacy-modal__body strong{color:#e8f8fd}
.privacy-modal__footer{display:flex;justify-content:flex-end;padding:16px 28px 20px;border-top:1px solid rgba(255,255,255,.07);background:#0a1116}
.privacy-modal__footer .btn{min-width:150px}
body.privacy-modal-open{overflow:hidden}
@media(max-width:650px){
  .privacy-modal{padding:10px}
  .privacy-modal__panel{max-height:92vh;border-radius:16px}
  .privacy-modal__header{padding:18px 18px 15px}
  .privacy-modal__body{padding:19px 18px 22px}
  .privacy-modal__footer{padding:13px 18px 16px}
  .privacy-modal__body p{font-size:12px;line-height:1.7}
  .privacy-modal__body h3{font-size:15px}
}
@media(prefers-reduced-motion:reduce){.privacy-modal,.privacy-modal__panel{transition:none!important}}

.footer-privacy-link{appearance:none;border:0;padding:0;background:transparent;color:inherit;font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.footer-privacy-link:hover,.footer-privacy-link:focus-visible{color:#5bd7ff;outline:none}


/* Privacy modal v2 — strictly hidden outside overlay; checkbox is the only acceptance control */
.privacy-modal[hidden]{display:none !important;}
.privacy-modal:not([hidden]){
  position:fixed !important;
  inset:0 !important;
  z-index:2147483000 !important;
  display:grid !important;
  place-items:center !important;
}
.privacy-modal__panel{grid-template-rows:auto minmax(0,1fr) !important;}
.privacy-modal__footer{display:none !important;}
.privacy-link{display:inline !important;}


/* Ajuste solicitado: aumentar legibilidad en tarjetas de aplicaciones frecuentes */
.creation-support-grid .creation-examples article span{
  font-size: 13px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  letter-spacing: 0.2px !important;
}
.creation-support-grid .creation-examples article strong{
  font-size: 16px !important;
  line-height: 1.5 !important;
}
@media (max-width: 768px){
  .creation-support-grid .creation-examples article span{
    font-size: 14px !important;
  }
}


/* Legibilidad reforzada — etiquetas "Para empresas / Para negocios / ..." */
.creation-section .creation-support-grid .creation-examples article > span{
  font-size: 18px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  margin-bottom: 8px !important;
}
.creation-section .creation-support-grid .creation-examples article > strong{
  font-size: 17px !important;
  line-height: 1.45 !important;
}
@media (max-width: 768px){
  .creation-section .creation-support-grid .creation-examples article > span{
    font-size: 17px !important;
  }
  .creation-section .creation-support-grid .creation-examples article > strong{
    font-size: 16px !important;
  }
}