/* ===== Wealtfy 3D layer ===== */

/* Tilted sections widen past the viewport; clip (not hidden) keeps position:sticky working. */
html,body{overflow-x:clip}

/* WebGL ribbons replace the flat Unicorn backdrop when available. */
.ribbon-canvas{position:absolute;inset:0;z-index:1;width:100%;height:100%;display:block}
.has-webgl .site-backdrop .scene{display:none!important}
.has-webgl .site-backdrop{filter:none;background:radial-gradient(ellipse 60% 55% at 38% 46%,#4a16a24d,transparent 70%),radial-gradient(ellipse 45% 40% at 88% 22%,#08b9f41c,transparent 70%),radial-gradient(ellipse 50% 50% at 10% 90%,#8618ff1f,transparent 70%),#0b0619}
.has-webgl .site-backdrop:before{opacity:.5}
.has-webgl .site-backdrop:after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(ellipse at 50% 120%,#100925 0%,transparent 60%),linear-gradient(180deg,#10092500 55%,#100925aa 100%)}
.has-webgl body,.has-webgl{background:#0b0619}

/* ---------- Hero: copy left, floating stage right ---------- */
/* Don't clip the stage's shadow at the hero's edges (html already clips horizontal overflow). */
.hero{overflow:visible}
.hero .eyebrow{display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border:1px solid #ffffff26;border-radius:999px;background:#ffffff0a;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.hero .eyebrow:before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:#69e4ff;box-shadow:0 0 10px #69e4ff;animation:stage-blink 2.4s ease-in-out infinite}

.hero-stage{position:relative;--stage-rx:10deg;--stage-ry:-16deg;--stage-lift:0px;transform:perspective(1600px) translateY(var(--stage-lift)) rotateX(var(--stage-rx)) rotateY(var(--stage-ry));transition:transform .5s cubic-bezier(.16,1,.3,1);animation:stage-in 1.4s .35s both cubic-bezier(.16,1,.3,1)}
@keyframes stage-in{from{opacity:0;translate:0 60px;scale:.92}to{opacity:1;translate:0 0;scale:1}}

.stage-card{position:relative;padding:20px 22px 18px;border:1px solid #ffffff22;border-radius:22px;background:linear-gradient(150deg,#2a1d52e8,#160c33f0 45%,#0d0624f5);box-shadow:inset 0 1px #ffffff2e,0 40px 90px #05001266;color:#efeaff;font-family:ClashDisplay,'Avenir Next',Arial,sans-serif}
.stage-card:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,transparent 30%,#ffffff12 48%,transparent 62%)}
.stage-top{display:flex;align-items:center;gap:14px;font-size:12px;color:#b9acd6}
.stage-top b{font-weight:500;color:#efeaff}
.stage-top em{margin-left:auto;font-style:normal;color:#69e4ff;font-family:ui-monospace,Menlo,monospace;font-size:11px;display:flex;align-items:center;gap:7px}
.stage-top em i{width:6px;height:6px;border-radius:50%;background:#69e4ff;box-shadow:0 0 10px #69e4ff;animation:stage-blink 1.6s ease-in-out infinite}
@keyframes stage-blink{50%{opacity:.35}}

.stage-flow{position:relative;height:250px;margin:16px 0 14px}
.stage-tools{position:absolute;left:0;top:8px;display:flex;flex-direction:column;gap:7px}
.stage-tools span{display:grid;place-items:center;width:24px;height:24px;border:1px solid #ffffff1c;border-radius:7px;background:#ffffff08;color:#b9acd6;font-size:11px}
.stage-wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.stage-wires path{fill:none;stroke:url(#stage-wire);stroke-width:1.4;opacity:.85}
.stage-wires circle{fill:#e4f9ff;filter:drop-shadow(0 0 4px #69e4ff)}
.stage-wires text{fill:#b9acd6;font:10px ui-monospace,Menlo,monospace}
.stage-wires rect{fill:#140b2c;stroke:#ffffff26}

.stage-node{position:absolute;min-width:128px;padding:9px 12px;border:1px solid #ffffff24;border-radius:11px;background:linear-gradient(160deg,#241a40f0,#120a26f0);box-shadow:inset 0 1px #ffffff1c,0 18px 34px #04000f88;font-size:12.5px;line-height:1.25;color:#fff}
.stage-node small{display:block;margin-top:3px;color:#9f92bf;font:10.5px ui-monospace,Menlo,monospace}
.stage-node.is-live{border-color:#69e4ff70;box-shadow:inset 0 1px #ffffff1c,0 0 0 3px #69e4ff14,0 18px 34px #04000f88}
.stage-node .node-icon{display:inline-grid;place-items:center;width:20px;height:20px;margin-right:7px;vertical-align:-5px;border-radius:6px;background:#25d36626}
.stage-node .node-icon svg{width:14px;height:14px;fill:#25d366}
.node-in{left:9%;top:42%;--z:20px}
.node-classify{left:36%;top:6%;--z:46px}
.node-capture{left:36%;top:64%;--z:34px}
.node-score{left:70%;top:6%;--z:58px}
.node-human{left:70%;top:58%;--z:40px}
.stage-tag{position:absolute;left:71%;top:88%;padding:3px 8px;border:1px solid #ffffff1c;border-radius:6px;background:#0f0822;color:#b9acd6;font:10.5px ui-monospace,Menlo,monospace}

.stage-log{border-top:1px solid #ffffff14;padding-top:12px;font:11.5px ui-monospace,Menlo,monospace;color:#cfc6e6}
.stage-log>small{display:block;margin-bottom:7px;color:#8d80ab;font-size:10.5px}
.stage-log div{display:grid;grid-template-columns:14px 70px 1fr auto;align-items:center;padding:4px 0}
.stage-log div i{width:6px;height:6px;border-radius:50%;background:#b998ff}
.stage-log div:first-of-type i{background:#69e4ff;box-shadow:0 0 8px #69e4ff}
.stage-log div span:nth-of-type(1){color:#8d80ab}
.stage-log div span:last-child{color:#8d80ab}

/* Floating chips sit in front of the card for parallax depth. */
.stage-chip{position:absolute;width:max-content;display:flex;align-items:center;gap:9px;padding:10px 13px;border:1px solid #ffffff26;border-radius:14px;background:linear-gradient(150deg,#2a1d4ce6,#140b2ce6);box-shadow:inset 0 1px #ffffff22,0 24px 50px #04000f77;font-family:ClashDisplay,'Avenir Next',Arial,sans-serif;font-size:12.5px;color:#fff;white-space:nowrap}
.stage-chip img{width:26px;height:26px;border-radius:8px;object-fit:contain}
.stage-chip small{display:block;color:#a99cc8;font-size:11px}
.stage-chip strong{font-size:20px;font-weight:600;letter-spacing:-.03em;background:linear-gradient(100deg,#fff,#d8c1ff 52%,#9ce9ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.chip-msg{left:-58px;top:-58px}
.chip-score{right:-22px;bottom:-30px}

/* Headline on three lines (break before "también puede."); sized to the column — the longest line is ~8.1em. */
@media(min-width:700px){
  .hero .content{container-type:inline-size}
  .hero h1{font-size:clamp(44px,11.4cqi,98px)!important}
  .hero h1 em{white-space:nowrap}
  /* Description on exactly two lines (longest line ~34.2em). */
  .hero .description{max-width:none!important;font-size:clamp(14px,2.6cqi,20px)!important}
  .hero .description .description-line{display:block!important;white-space:nowrap}
  .hero .description .description-accent{display:inline!important}
}

/* Desktop layout */
@media(min-width:1101px){
  /* Full-bleed box (content centered via padding) so overflow clipping never lands mid-screen. */
  .hero{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);place-items:center stretch;gap:24px;width:100%;padding:0 max(40px,calc((100% - 1360px) / 2))}
  .hero .content{text-align:left;padding:120px 0 64px;width:auto}
  .hero .description{margin-left:0}
  .hero .cta-group{justify-content:flex-start}
  .hero .text-link{align-self:auto}
  .hero .proof{margin-left:0;max-width:560px}
  .hero .proof>div{align-items:flex-start;text-align:left}
  .hero-stage{width:min(600px,100%);justify-self:end;margin-top:60px}
}
/* Tablet + mobile: stage drops under the copy with a gentler tilt */
@media(max-width:1100px){
  .hero{padding-bottom:60px}
  .hero-stage{width:min(600px,calc(100% - 40px));margin:40px auto 0;--stage-ry:-8deg}
}
@media(max-width:640px){
  .hero-stage{width:calc(100% - 28px);--stage-rx:14deg;--stage-ry:0deg}
  .stage-card{padding:16px 14px 14px}
  .stage-flow{height:220px}
  .stage-node{min-width:0;max-width:31%;padding:7px 8px;font-size:10.5px}
  .stage-node small{font-size:9.5px}
  .node-in{left:6%}.node-classify,.node-capture{left:33%}.node-score,.node-human{left:66%}
  .stage-tag{display:none}
  .stage-tools{display:none}
  .stage-log div{grid-template-columns:14px 62px 1fr auto;font-size:10.5px}
  .stage-log div:nth-of-type(3){display:none}
  .chip-msg{left:-6px;top:-50px}
  .chip-score{display:none}
  .hero-stage{margin-top:56px}
}

/* ---------- Card tilt + glare ---------- */
.tilt-3d{transition:transform .35s cubic-bezier(.16,1,.3,1),border-color .25s,box-shadow .25s,background .25s!important}
.tilt-3d:hover{transition:transform .08s linear,border-color .25s,box-shadow .25s,background .25s!important}
.tilt-3d:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(circle at var(--glare-x,50%) var(--glare-y,50%),#ffffff26,transparent 55%)}
.tilt-3d:hover:after{opacity:1}
.process-step.tilt-3d,.leak-card.tilt-3d,.pricing-card.tilt-3d,.journey-step.tilt-3d{position:relative}

@media(prefers-reduced-motion:reduce){
  .hero-stage,.stage-chip,.hero .eyebrow:before,.stage-top em i{animation:none}
}

/* ---------- Lighter motion: same reveals, no blur filters ---------- */
.motion-section,.motion-section.is-in-view{filter:none!important}
.fall-text .fall-word{filter:none!important}
@keyframes fall-word{0%{opacity:0;transform:translate3d(0,-.9em,0) rotateX(-48deg)}70%{opacity:1;transform:translate3d(0,.06em,0)}100%{opacity:1;transform:none}}
@keyframes arrive{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes leak-rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

/* ===== "Así piensa la IA" — redesigned board ===== */
.ai-flow-redesign .flow-redesign-grid{align-items:center}
@media(min-width:1100px){.ai-flow-redesign .flow-redesign-grid{grid-template-columns:minmax(380px,.85fr) minmax(520px,1.15fr)!important;gap:clamp(40px,5vw,80px)!important}}

/* Steps: glass cards on a glowing rail */
.ai-flow-redesign .flow-journey{position:relative;display:flex;flex-direction:column;gap:12px;max-width:520px}
.ai-flow-redesign .flow-journey::before{content:"";position:absolute;left:31px!important;top:30px;bottom:30px;width:2px;border-radius:2px;background:linear-gradient(180deg,#b998ff,#69e4ff 60%,#ffffff14)!important;opacity:.45}
.ai-flow-redesign .journey-step{position:relative;overflow:hidden;display:grid;grid-template-columns:44px 1fr 24px!important;align-items:center;gap:16px!important;width:100%;padding:16px 20px 16px 10px!important;border:1px solid #ffffff14!important;border-radius:18px!important;background:linear-gradient(140deg,#ffffff0d,#ffffff04)!important;box-shadow:inset 0 1px #ffffff12!important;color:#fff;text-align:left;cursor:pointer;transform:none;transition:border-color .35s,background .35s,box-shadow .35s,transform .35s cubic-bezier(.16,1,.3,1)!important}
.ai-flow-redesign .journey-step:hover{border-color:#ffffff2e!important;background:linear-gradient(140deg,#ffffff14,#ffffff06)!important}
.ai-flow-redesign .journey-step.is-selected{border-color:#b998ff80!important;background:linear-gradient(120deg,#6d3cff3d,#2a6bff1f 60%,#69e4ff14)!important;box-shadow:inset 0 1px #ffffff26,0 0 0 4px #8d6bff14,0 18px 40px #0a022a66!important;transform:translateX(8px)}
.ai-flow-redesign .journey-index{position:relative;z-index:1;display:grid!important;place-items:center;width:44px!important;height:44px!important;border:1px solid #ffffff24!important;border-radius:50%!important;background:#140c30!important;box-shadow:none!important;color:#a99cc8!important;font:500 11px ui-monospace,Menlo,monospace!important;transition:all .35s}
.ai-flow-redesign .journey-step.is-selected .journey-index{border-color:transparent!important;background:linear-gradient(135deg,#8b5cff,#4f7dff 55%,#3fd2ff)!important;color:#fff!important;box-shadow:0 0 0 5px #8b5cff26,0 0 24px #6f8dff80!important}
.ai-flow-redesign .journey-copy strong{display:block;font-size:20px!important;font-weight:500;letter-spacing:-.02em;color:#fff}
.ai-flow-redesign .journey-copy small{display:block;margin-top:3px;font-size:13px!important;color:#a99cc8}
.ai-flow-redesign .journey-step.is-selected .journey-copy small{color:#d8ccff}
.ai-flow-redesign .journey-arrow{color:#ffffff40;font-size:18px;transition:transform .35s,color .35s}
.ai-flow-redesign .journey-step.is-selected .journey-arrow{color:#9ce9ff;transform:translateX(4px)}
/* Autoplay progress: fills while the step is active (rotation is every 3.2s) */
.ai-flow-redesign .journey-step::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:linear-gradient(90deg,#b998ff,#69e4ff);transform:scaleX(0);transform-origin:left;opacity:0}
.ai-flow-redesign .journey-step.is-selected::after{opacity:1;animation:journey-progress 3.2s linear forwards}
@keyframes journey-progress{to{transform:scaleX(1)}}

/* Insight card */
.ai-flow-redesign .flow-insight{position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:0!important;padding:30px 34px 28px!important;transform:none!important;border:1px solid #ffffff1f!important;border-radius:26px!important;background:radial-gradient(520px circle at var(--flow-x,80%) var(--flow-y,0%),#7c5cff2e,transparent 60%),linear-gradient(155deg,#1d1846f2,#0f1230f5 55%,#0b0d24f7)!important;box-shadow:inset 0 1px #ffffff1f,0 40px 80px #04001466!important}
.ai-flow-redesign .flow-insight::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px);background-size:32px 32px;mask-image:radial-gradient(ellipse at 85% 0%,#000,transparent 70%);-webkit-mask-image:radial-gradient(ellipse at 85% 0%,#000,transparent 70%)}
.ai-flow-redesign .flow-insight>*{position:relative;z-index:1}
.insight-head{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.ai-flow-redesign .insight-mark{margin:0!important;width:52px;height:52px;flex:none;border:0!important;background:none!important;box-shadow:none!important}
.ai-flow-redesign .insight-mark img{width:52px;height:52px;object-fit:contain;filter:drop-shadow(0 6px 18px #7c5cff66)}
.insight-head-copy{display:flex;flex-direction:column;gap:4px}
.ai-flow-redesign .insight-kicker{margin:0!important;color:#7fdcff;font-size:10.5px;letter-spacing:.16em}
.insight-step{color:#a99cc8;font:12px ui-monospace,Menlo,monospace}
.insight-step b{color:#fff;font-weight:600}
.insight-step em{font-style:normal;color:#d8ccff}
.insight-live{margin-left:auto;display:flex;align-items:center;gap:7px;padding:6px 11px;border:1px solid #69e4ff40;border-radius:999px;background:#69e4ff10;color:#9ce9ff;font:11px ui-monospace,Menlo,monospace}
.insight-live i{width:6px;height:6px;border-radius:50%;background:#69e4ff;box-shadow:0 0 8px #69e4ff;animation:stage-blink 1.6s ease-in-out infinite}
.ai-flow-redesign .flow-insight-dynamic{min-height:2.4em!important;max-width:560px!important;margin:0 0 20px!important;font-size:clamp(24px,2.1vw,32px)!important;line-height:1.18!important;animation:insight-in .5s cubic-bezier(.16,1,.3,1)}
.ai-flow-redesign .flow-insight-dynamic.is-long{font-size:clamp(22px,1.9vw,29px)!important}
@keyframes insight-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Mini demo of the active step */
.insight-demo{position:relative;min-height:76px;margin-bottom:22px;padding:14px 16px;border:1px solid #ffffff14;border-radius:16px;background:#0a0b22b3;box-shadow:inset 0 1px #ffffff0d}
.demo-pane{display:none;animation:insight-in .45s cubic-bezier(.16,1,.3,1)}
.flow-insight[data-step="1"] .demo-pane[data-pane="1"],.flow-insight[data-step="2"] .demo-pane[data-pane="2"],.flow-insight[data-step="3"] .demo-pane[data-pane="3"],.flow-insight[data-step="4"] .demo-pane[data-pane="4"],.flow-insight:not([data-step]) .demo-pane[data-pane="1"]{display:block}
.demo-pane>small{display:block;margin-bottom:10px;color:#8d80ab;font:11px ui-monospace,Menlo,monospace}
.demo-tags{display:flex;flex-wrap:wrap;gap:8px}
.demo-tags span{padding:6px 11px;border:1px solid #ffffff1c;border-radius:8px;color:#a99cc8;font:11.5px ui-monospace,Menlo,monospace}
.demo-tags span.is-on{border-color:#69e4ff70;background:#69e4ff14;color:#d9f7ff;box-shadow:0 0 18px #69e4ff26}
.demo-fields{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.demo-fields span{display:flex;gap:8px;padding:6px 11px;border:1px solid #ffffff1c;border-radius:8px;color:#d8ccff;font:11.5px ui-monospace,Menlo,monospace}
.demo-fields span i{font-style:normal;color:#8d80ab}
.demo-fields b,.demo-score b{margin-left:auto;color:#5ff0b0;font:600 11.5px ui-monospace,Menlo,monospace}
.demo-score{display:flex;align-items:center;gap:14px}
.demo-score>div{flex:1;height:8px;border-radius:8px;background:#ffffff12;overflow:hidden}
.demo-score>div i{display:block;height:100%;width:86%;border-radius:inherit;background:linear-gradient(90deg,#8b5cff,#3fd2ff);animation:score-fill 1.1s cubic-bezier(.16,1,.3,1)}
.demo-score b{margin-left:0;color:#fff;font-size:18px}
@keyframes score-fill{from{width:0}}

.ai-flow-redesign .flow-insight p{max-width:520px;margin:0!important;color:#b8b2d4;font-size:14.5px!important;line-height:1.6}
.ai-flow-redesign .flow-insight .flow-insight-closer{margin:12px 0 0!important}
.ai-flow-redesign .insight-stats{display:grid!important;grid-template-columns:repeat(3,1fr);gap:0!important;margin-top:24px!important;padding-top:20px;border-top:1px solid #ffffff14}
.ai-flow-redesign .insight-stats>span{display:flex;flex-direction:column;gap:4px;padding-left:18px;border-left:1px solid #ffffff14}
.ai-flow-redesign .insight-stats>span:first-child{padding-left:0;border-left:0}
.ai-flow-redesign .insight-stats strong{font-size:26px!important;font-weight:600;letter-spacing:-.03em;background:linear-gradient(100deg,#fff,#d8c1ff 55%,#9ce9ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.ai-flow-redesign .insight-stats small{color:#8d80ab;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase}

@media(max-width:700px){
  .ai-flow-redesign .journey-step{padding:12px 14px 12px 8px!important}
  .ai-flow-redesign .journey-step.is-selected{transform:none}
  .ai-flow-redesign .journey-copy strong{font-size:17px!important}
  .ai-flow-redesign .flow-insight{padding:22px 20px 20px!important}
  .insight-live{display:none}
  .ai-flow-redesign .insight-stats strong{font-size:21px!important}
  .ai-flow-redesign .insight-stats>span{padding-left:12px}
  .ai-flow-redesign .insight-stats small{font-size:9.5px;letter-spacing:.06em}
}
@media(prefers-reduced-motion:reduce){
  .ai-flow-redesign .journey-step.is-selected::after{animation:none;transform:scaleX(1)}
  .ai-flow-redesign .flow-insight-dynamic,.demo-pane,.demo-score>div i{animation:none}
}

/* ===== "Ver cómo funciona" dialog ===== */
.how-dialog{width:min(1180px,calc(100vw - 48px))!important;max-width:none!important;padding:0!important;overflow:hidden auto!important;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;color:#f3f0ff}
.how-dialog::backdrop{background:#07031ae0!important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.how-dialog[open]{animation:dialog-in .55s cubic-bezier(.16,1,.3,1)}
@keyframes dialog-in{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}
.how-dialog-inner{position:relative;max-width:none!important;margin:0!important;padding:clamp(26px,3.4vw,48px) clamp(22px,4vw,56px) clamp(22px,3vw,36px)}
.how-dialog-inner::before{content:none}
.how-dialog-inner>*{position:relative}
.how-dialog .close{position:absolute!important;top:20px!important;right:20px!important;z-index:3;display:grid;place-items:center;width:42px!important;height:42px!important;padding:0!important;border:1px solid #ffffff24!important;border-radius:50%!important;background:#ffffff0d!important;color:#fff!important;font-size:20px!important;line-height:1;cursor:pointer;transition:background .25s,transform .25s,border-color .25s}
.how-dialog .close:hover{background:#ffffff1f!important;border-color:#ffffff40!important;transform:rotate(90deg)}
.how-dialog .dialog-kicker{display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border:1px solid #69e4ff38;border-radius:999px;background:#69e4ff0f;color:#9ce9ff!important;font-size:10.5px!important;letter-spacing:.16em}
.how-dialog .dialog-kicker::before{content:"";width:6px;height:6px;border-radius:50%;background:#69e4ff;box-shadow:0 0 10px #69e4ff}
.how-dialog h2{max-width:1000px!important;margin:18px 0 0!important;font-size:clamp(30px,3.5vw,52px)!important}
.how-dialog .dialog-lead{max-width:760px!important;margin:18px 0 0!important;color:#c3bcdc}

.dialog-logos{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(18px,3vw,38px);margin:22px 0 26px;padding:14px 22px;border:1px solid #ffffff12;border-radius:16px;background:#ffffff06}
.dialog-logos img{display:block;width:auto;height:22px;max-width:120px;object-fit:contain;filter:grayscale(1) brightness(0) invert(1);opacity:.7;transition:opacity .25s,transform .25s}
.dialog-logos img.logo-detail{filter:grayscale(1) invert(1) brightness(1.5) contrast(1.2);height:26px}
.dialog-logos img[alt="Siesa"]{height:28px}
.dialog-logos img:hover{opacity:1;transform:translateY(-2px)}

.how-dialog .dialog-pillars{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:16px!important}
.how-dialog .dialog-pillar{position:relative;overflow:hidden;min-height:0!important;padding:24px 24px 26px!important;border:1px solid #ffffff17!important;border-radius:22px!important;background:linear-gradient(160deg,#ffffff0f,#ffffff04 60%)!important;box-shadow:inset 0 1px #ffffff14!important;transition:transform .4s cubic-bezier(.16,1,.3,1),border-color .3s,box-shadow .3s!important}
.how-dialog .dialog-pillar::before{content:"";position:absolute;left:24px;right:24px;top:0;height:2px;border-radius:2px;background:var(--pillar-grad);opacity:.5;transition:opacity .3s}
.how-dialog .dialog-pillar:hover{transform:translateY(-6px);border-color:#ffffff30!important;box-shadow:inset 0 1px #ffffff1f,0 26px 50px #03000e88!important}
.how-dialog .dialog-pillar:hover::before{opacity:1}
.how-dialog .dialog-pillar:nth-child(1){--pillar-grad:linear-gradient(135deg,#a879ff,#6d5cff)}
.how-dialog .dialog-pillar:nth-child(2){--pillar-grad:linear-gradient(135deg,#6d7dff,#3fa8ff)}
.how-dialog .dialog-pillar:nth-child(3){--pillar-grad:linear-gradient(135deg,#3fa8ff,#45e0ff)}
.how-dialog .dialog-icon{display:grid!important;place-items:center;width:46px!important;height:46px!important;margin:0 0 18px!important;border:0!important;border-radius:14px!important;background:var(--pillar-grad)!important;box-shadow:0 12px 28px #5b4cff4d,inset 0 1px #ffffff4d!important;color:#fff}
.how-dialog .dialog-icon svg{width:24px!important;height:24px!important;fill:none;stroke:#fff!important;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pillar-num{position:absolute;top:24px;right:24px;color:#ffffff40;font:500 12px ui-monospace,Menlo,monospace}
.how-dialog .dialog-pillar h3{margin:0 0 10px!important;font-size:clamp(20px,1.7vw,24px)!important;letter-spacing:-.02em}
.how-dialog .dialog-pillar p{margin:0;color:#b8b2d4;font-size:14px!important;line-height:1.55!important}
.how-dialog[open] .dialog-pillar{animation:pillar-in .6s both cubic-bezier(.16,1,.3,1)}
.how-dialog[open] .dialog-pillar:nth-child(2){animation-delay:.08s}
.how-dialog[open] .dialog-pillar:nth-child(3){animation-delay:.16s}
@keyframes pillar-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

.dialog-close-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:24px;padding-top:20px;border-top:1px solid #ffffff12}
.how-dialog .dialog-quote{margin:0!important;color:#d8ccff!important;font-size:16px!important;font-style:italic}
.dialog-ctas{display:flex;gap:12px;flex-wrap:wrap}

@media(max-width:820px){
  .how-dialog{width:calc(100vw - 24px)!important;border-radius:24px!important}
  .how-dialog .dialog-pillars{grid-template-columns:1fr!important}
  .how-dialog .dialog-kicker{margin-right:50px;font-size:9.5px!important;letter-spacing:.12em}
  .dialog-close-bar{flex-direction:column;align-items:flex-start}
  .dialog-logos{gap:18px 24px;padding:14px 16px}
  .dialog-logos img{height:18px}.dialog-logos img.logo-detail{height:22px}.dialog-logos img[alt="Siesa"]{height:24px}
}
@media(prefers-reduced-motion:reduce){.how-dialog[open],.how-dialog[open] .dialog-pillar{animation:none}}

/* ===== Performance: same look, lighter rendering ===== */
/* Ambient light keeps drifting, but without a blend mode (screen over these low-alpha
   gradients looks the same) so it no longer forces the whole viewport to re-blend. */
.site-backdrop:before{mix-blend-mode:normal!important;opacity:.85;will-change:transform}
/* Same glass, smaller blur radius: cost scales with the radius, the soft backdrop hides the difference. */
.process-step{backdrop-filter:blur(8px)!important;-webkit-backdrop-filter:blur(8px)!important}
.message-card,.leak-card{backdrop-filter:blur(10px)!important;-webkit-backdrop-filter:blur(10px)!important}
/* Marquees slide on the compositor. */
.process-track,.trust-logo-track{will-change:transform}

/* ===== Section rhythm: one consistent, tighter spacing between sections ===== */
:root{--sec-pad:clamp(40px,4.6vw,68px)}
.creator-process,.leak-section,.message-stream,.ai-flow-section,.pricing-section{padding-top:var(--sec-pad)!important;padding-bottom:var(--sec-pad)!important}
.site-footer{padding-top:var(--sec-pad)!important}
.message-stream .message-rail{padding-bottom:0!important}