/* Shared button proposals: gallery and optional hero preview. */
[data-button-style] .cta{position:relative;isolation:isolate;overflow:hidden;height:50px;font-family:Inter,sans-serif;font-size:15px;font-weight:450;min-width:174px;padding:0 25px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;gap:14px;line-height:1;white-space:nowrap;cursor:pointer;transition:transform .25s,background .3s,border-color .3s,box-shadow .3s,color .3s}
[data-button-style] .cta:focus-visible{outline:3px solid #6799ff;outline-offset:5px}
[data-button-style] .cta:active{transform:translateY(1px) scale(.98)}
[data-button-style] .primary span{display:inline-flex;align-items:center;justify-content:center;font-size:19px;transition:transform .3s}
[data-button-style] .secondary{background:#fff;color:#183264;border:1px solid #b8c7df}
[data-button-style] .cta:hover,[data-hover=true] .cta{transform:translateY(-2px)}
/* 01: a clean, deep blue capsule. */
[data-button-style="1"] .primary{background:#153fab;color:#fff;border:1px solid #153fab}
[data-button-style="1"] .primary:hover,[data-button-style="1"][data-hover=true] .primary{background:#092e8e;box-shadow:0 7px 16px #123ca61f}
[data-button-style="1"] .primary:hover span,[data-button-style="1"][data-hover=true] .primary span{transform:translate(2px,-2px)}
[data-button-style="1"] .secondary:hover,[data-button-style="1"][data-hover=true] .secondary{background:#edf4ff;border-color:#6f94da}
/* 02: satin shading and a hairline highlight. */
[data-button-style="2"] .primary{background:linear-gradient(170deg,#3974ed,#1544b8 65%,#0c3090);border:1px solid #2250bc;color:#fff;box-shadow:inset 0 1px 0 #ffffff65,0 3px 5px #1a439b20}
[data-button-style="2"] .secondary{background:linear-gradient(#fff,#edf4ff);border-color:#c5d3e8;box-shadow:inset 0 1px 0 #fff,0 2px 4px #244d9a0a}
[data-button-style="2"] .cta:hover,[data-button-style="2"][data-hover=true] .cta{box-shadow:inset 0 1px 0 #ffffff90,0 8px 20px #2559bb29}
/* 03: translucent blue glass, with a moving reflection. */
[data-button-style="3"] .primary{color:#fff;border:1px solid #6498f5;background:linear-gradient(150deg,#4c8ceddd,#1247bbcF);box-shadow:inset 0 1px 1px #ffffff94,inset 0 -2px 4px #00277040,0 5px 14px #1c59bb24;backdrop-filter:blur(12px)}
[data-button-style="3"] .secondary{background:#ffffff65;backdrop-filter:blur(12px);border-color:#fff;box-shadow:inset 0 0 0 1px #b6cdea,0 4px 13px #3872ba12}
[data-button-style="3"] .cta:before{content:"";position:absolute;inset:-80% 0;z-index:-1;background:linear-gradient(105deg,transparent 35%,#ffffff65 48%,transparent 61%);transform:translateX(-100%);transition:transform .7s}
[data-button-style="3"] .cta:hover:before,[data-button-style="3"][data-hover=true] .cta:before{transform:translateX(100%)}
/* 04: a dedicated arrow circle. */
[data-button-style="4"] .primary{background:#183bb1;color:#fff;border:0;padding:5px 6px 5px 23px;gap:20px}
[data-button-style="4"] .primary span{width:38px;height:38px;border-radius:50%;background:#ffffff20;border:1px solid #ffffff30}
[data-button-style="4"] .primary:hover span,[data-button-style="4"][data-hover=true] .primary span{background:#fff;color:#183bb1;transform:rotate(45deg)}
[data-button-style="4"] .secondary{border-color:transparent;background:#e9f1ff;color:#184699}
[data-button-style="4"] .secondary:hover,[data-button-style="4"][data-hover=true] .secondary{background:#dbe8ff}
/* 05: double inset edge and a tactile press. */
[data-button-style="5"] .primary{background:#194ab7;color:#fff;border:4px solid #d9e6ff;box-shadow:inset 0 0 0 1px #ffffff55,0 0 0 1px #adc6f4}
[data-button-style="5"] .secondary{border:4px solid #f1f5fc;box-shadow:inset 0 0 0 1px #b7c9e5,0 0 0 1px #e0e8f4;background:#fff}
[data-button-style="5"] .cta:hover,[data-button-style="5"][data-hover=true] .cta{transform:translateY(0) scale(.97);box-shadow:inset 0 2px 5px #072b7e35,0 0 0 1px #9cb8e6}
/* 06: calm editorial pair, restrained secondary underline. */
[data-button-style="6"] .primary{background:#102f76;color:#fff;border:1px solid #102f76}
[data-button-style="6"] .secondary{border-color:transparent;background:transparent;min-width:150px;padding-inline:12px;color:#243b63;border-radius:0;overflow:visible}
[data-button-style="6"] .secondary:after{content:"";position:absolute;bottom:10px;left:12px;right:12px;height:1px;background:#5876a9;transform:scaleX(.35);transform-origin:left;opacity:.45;transition:transform .3s,opacity .3s}
[data-button-style="6"] .secondary:hover:after,[data-button-style="6"][data-hover=true] .secondary:after{transform:scaleX(1);opacity:1}
[data-button-style="6"] .primary:hover,[data-button-style="6"][data-hover=true] .primary{background:#204996}
/* 07: a curved wave rises on hover. */
[data-button-style="7"] .primary{background:#1b4db9;border:1px solid #1b4db9;color:white}
[data-button-style="7"] .secondary{background:#fff;border-color:#a8bfe8;color:#204697}
[data-button-style="7"] .cta:before{content:"";position:absolute;z-index:-1;left:-12%;top:110%;width:124%;height:220%;border-radius:48% 48% 0 0;background:#092b83;transition:top .55s cubic-bezier(.2,.7,.2,1)}
[data-button-style="7"] .secondary:before{background:#e1ecff}
[data-button-style="7"] .cta:hover:before,[data-button-style="7"][data-hover=true] .cta:before{top:-25%}
/* 08: luminous sapphire rim, discreet glow. */
[data-button-style="8"] .primary{border:1px solid transparent;background:linear-gradient(140deg,#2053bf,#133385) padding-box,linear-gradient(130deg,#b3eaff,#6097ff 45%,#254aa5 65%,#b5dfff) border-box;color:#fff;box-shadow:0 0 0 3px #1b5fd509,inset 0 1px 0 #ffffff32}
[data-button-style="8"] .secondary{border:1px solid transparent;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(120deg,#7cacf0,#e5efff,#8bb9f9) border-box}
[data-button-style="8"] .cta:hover,[data-button-style="8"][data-hover=true] .cta{box-shadow:0 0 0 4px #3c86ff0c,0 5px 22px #2d78ef29}
/* 09: soft corners and a generous, quiet surface. */
[data-button-style="9"] .cta{border-radius:17px;height:52px}
[data-button-style="9"] .primary{background:#2051bc;border:1px solid #2051bc;color:white;box-shadow:0 3px 0 #10378a}
[data-button-style="9"] .secondary{background:#edf3ff;border:1px solid #d9e5f8;color:#244d9c;box-shadow:0 3px 0 #d8e3f5}
[data-button-style="9"] .cta:hover,[data-button-style="9"][data-hover=true] .cta{transform:translateY(2px);box-shadow:0 1px 0 #92add9}
/* 10: bright azure light travelling across a sapphire surface. */
[data-button-style="10"] .primary{color:#fff;border:1px solid #3f78d8;background:radial-gradient(ellipse at 20% 0%,#5aa9fa 0,transparent 65%),linear-gradient(120deg,#174cab,#2149b5 55%,#0e2a72);background-size:180% 100%;background-position:0 0;box-shadow:inset 0 1px 0 #ffffff60,0 5px 14px #235bb42a;transition:background-position .65s,box-shadow .3s,transform .3s}
[data-button-style="10"] .secondary{background:linear-gradient(120deg,#fff,#edf6ff);border-color:#b0ceee}
[data-button-style="10"] .primary:hover,[data-button-style="10"][data-hover=true] .primary{background-position:100% 0;box-shadow:inset 0 1px 0 #ffffff80,0 7px 22px #2464d13a}
[data-button-style="10"] .secondary:hover,[data-button-style="10"][data-hover=true] .secondary{background:#e4f1ff;border-color:#7ea5db}
@media(prefers-reduced-motion:reduce){[data-button-style] .cta,[data-button-style] .cta:before,[data-button-style] .cta:after,[data-button-style] .cta span{transition:none!important;animation:none!important}}

/* Selected hero pair: expanding circular fill and a sliding arrow. */
[data-button-style="11"] .cta{font-weight:400}
[data-button-style="11"] .primary{background:#183bb1;color:#fff;border:1px solid #183bb1;padding:5px 6px 5px 23px;gap:20px;transition:color .6s,box-shadow .5s,transform .35s}
[data-button-style="11"] .primary:before{content:"";position:absolute;z-index:-1;right:6px;top:5px;width:38px;height:38px;border-radius:50%;background:#fff;transform:scale(1);transition:transform .95s cubic-bezier(.22,1,.36,1)}
[data-button-style="11"] .primary span{position:relative;flex:0 0 38px;width:38px;height:38px;border-radius:50%;overflow:hidden;color:transparent;font-size:0;border:0;background:transparent;transform:none}
[data-button-style="11"] .primary span:before,[data-button-style="11"] .primary span:after{content:"→";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#183bb1;font-size:21px;line-height:1;transition:transform .8s cubic-bezier(.22,1,.36,1)}
[data-button-style="11"] .primary span:after{transform:translateX(-38px)}
[data-button-style="11"] .primary:is(:hover,:focus-visible,:active){color:#183bb1;box-shadow:0 4px 14px #123ca61a;transform:none}
[data-button-style="11"] .primary:is(:hover,:focus-visible,:active):before{transform:scale(12)}
[data-button-style="11"] .primary:is(:hover,:focus-visible,:active) span:before{transform:translateX(38px)}
[data-button-style="11"] .primary:is(:hover,:focus-visible,:active) span:after{transform:translateX(0)}
[data-button-style="11"] .secondary{background:transparent;border:1px solid #748ac1;color:#173782;font-weight:400;box-shadow:none}
[data-button-style="11"] .secondary:is(:hover,:focus-visible){background:#ffffff30;border-color:#4866b0;color:#102e87;box-shadow:none;transform:none}
@media(prefers-reduced-motion:reduce){[data-button-style="11"] .primary span:before,[data-button-style="11"] .primary span:after{transition:none}}

@media(max-width:800px){
  .hero[data-button-style="11"] .actions{gap:10px}
  .hero[data-button-style="11"] .cta{min-width:0;font-size:14px}
  .hero[data-button-style="11"] .primary{padding-left:16px;padding-right:5px;gap:10px}
  .hero[data-button-style="11"] .primary:before{right:5px}
  .hero[data-button-style="11"] .secondary{padding-inline:17px}
}

/* Shared CTA typography. */
[data-button-style="11"] .cta,[data-button-style="11"] .secondary{font-family:Inter,sans-serif;font-weight:350;font-synthesis:none}