/* ELO Websites — "Hand-coded. Hyperdriven by AI." showcase (uses the site's tokens from styles.css) */
.hd{position:relative;overflow:hidden}
.hd-head{max-width:760px;margin-bottom:clamp(32px,5vw,56px)}
.hd h2{font-size:clamp(2.5rem,6.4vw,5rem);font-weight:500;letter-spacing:-.057em;line-height:.98}
.hd-grad{display:inline-block;padding-bottom:.08em;background:linear-gradient(100deg,#fff 0%,#d3c0ff 38%,#e040fb 76%,#8e66ff 100%);background-size:230% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:hdSheen 8s ease-in-out infinite alternate}
.hd-sub{margin-top:22px;max-width:36em;color:var(--mute);font-size:clamp(1rem,1.5vw,1.2rem);line-height:1.55}
.hd-sub a{color:#fff;text-decoration:underline;text-decoration-color:rgba(183,156,255,.6);text-underline-offset:3px}
.hd-sub a:hover{text-decoration-color:#fff}

/* stage */
.hd-stage{position:relative;isolation:isolate;overflow:hidden;min-height:clamp(560px,54vw,650px);border-radius:clamp(22px,3vw,34px);border:1px solid var(--line);
  background:radial-gradient(60% 70% at 50% 0%,rgba(91,33,245,.38) 0%,rgba(91,33,245,0) 72%),radial-gradient(46% 60% at 92% 100%,rgba(224,64,251,.18) 0%,rgba(224,64,251,0) 72%),linear-gradient(180deg,#0a0626 0%,#06030f 100%);
  box-shadow:0 40px 120px rgba(40,10,140,.35),inset 0 1px 0 rgba(255,255,255,.06)}
.hd-warp,.hd-circuit{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hd-warp{z-index:0;opacity:.9}
.hd-circuit{z-index:0;opacity:.9}
.hd-circuit .tr{fill:none;stroke:rgba(124,77,255,.22);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.hd-circuit .pl{fill:none;stroke:url(#hdg);stroke-width:1.8;stroke-linecap:round;stroke-dasharray:46 520;animation:hdPulse 5.5s linear infinite;animation-delay:var(--d,0s)}
.hd-circuit .ch{fill:rgba(124,77,255,.07);stroke:rgba(150,110,255,.28);stroke-width:1}
.hd-circuit .dt{fill:rgba(183,156,255,.5)}
.hd-stage::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(120% 90% at 50% 40%,transparent 55%,rgba(5,2,16,.65) 100%)}

/* windows */
.hd-win{position:absolute;z-index:2;overflow:hidden;border-radius:16px;background:#05030f;border:1px solid rgba(255,255,255,.13);
  box-shadow:0 30px 70px rgba(2,0,12,.7),0 0 0 1px rgba(124,77,255,.12),0 0 60px rgba(91,33,245,.18)}
.hd-bar{display:flex;align-items:center;gap:7px;height:38px;padding:0 14px;border-bottom:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.025);font:500 .72rem/1 var(--mono);color:var(--mute)}
.hd-bar i{width:10px;height:10px;border-radius:50%;background:#ff5f57;flex:none}
.hd-bar i:nth-child(2){background:#febc2e}
.hd-bar i:nth-child(3){background:#28c840}
.hd-bar span{flex:1;text-align:center;margin-right:36px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hd-win,.hd-pill,.hd-badge{will-change:transform}
.hd-term{left:27%;top:9%;width:47%;animation:hdFloat 9s ease-in-out infinite}
.hd-term2{right:4%;bottom:6%;width:36%;z-index:4;animation:hdFloat 11s ease-in-out -3s infinite}
.hd-site{left:3%;top:25%;width:31%;z-index:3;animation:hdFloat 10s ease-in-out -6s infinite}

/* terminal text */
.hd-code{padding:16px 18px 20px;font:400 .78rem/1.6 var(--mono);color:#e9e2ff;min-height:12em;transition:opacity .45s}
.hd-code.out{opacity:0}
.hd-code .ln{display:block;white-space:pre-wrap;word-break:break-word;min-height:1.6em;visibility:hidden}
.hd-code .ln.on{visibility:visible}
.hd-code .pr{color:#f08bff}
.hd-code .ok{color:#c9b3ff}
.hd-code .dm{color:#8c82a6}
.hd-code .hl{color:#fff}
.hd-code .mk{display:inline-block;width:1.2em;color:#b79cff}
.hd-code .caret{display:inline-block;width:.55em;height:1.05em;margin-left:1px;vertical-align:-.15em;background:#e9e2ff;animation:hdBlink 1s steps(1) infinite}
.hd-code .box{position:relative;display:block;margin-top:.9em;padding:.85em .95em .75em;border:1px solid rgba(183,156,255,.4);border-radius:6px;visibility:hidden}
.hd-code .box.on{visibility:visible}
.hd-code .box>.lg{position:absolute;left:.8em;top:-.75em;padding:0 .45em;background:#05030f;color:#8c82a6;font-size:.7rem}
.hd-code .box .ln{min-height:1.6em}

/* wireframe site that builds itself */
.hd-page{position:relative;padding:14px;height:min(262px,100%);min-height:250px}
.hd-url{background:rgba(255,255,255,.06);border-radius:999px;padding:6px 0;max-width:62%;margin:0 auto}
.hd-page .p{position:absolute;border-radius:7px;border:1px dashed rgba(183,156,255,.45);background-color:rgba(255,255,255,.1);opacity:0;animation:hdIn 12s var(--d,0s) infinite both,hdFill 12s var(--d,0s) infinite both}
.hd-page .lg{left:6%;top:5%;width:16%;height:9px;--fill:#e040fb}
.hd-page .n1{left:50%;top:5%;width:11%;height:9px}
.hd-page .n2{left:64%;top:5%;width:11%;height:9px}
.hd-page .n3{left:78%;top:5%;width:16%;height:9px;--fill:#8e66ff}
.hd-page .h1{left:6%;top:20%;width:58%;height:15px;--fill:#fff}
.hd-page .h2{left:6%;top:30%;width:44%;height:15px;--fill:#d3c0ff}
.hd-page .h3{left:6%;top:42%;width:60%;height:8px}
.hd-page .b1{left:6%;top:52%;width:25%;height:22px;border-radius:999px;--fill:#7c4dff}
.hd-page .b2{left:34%;top:52%;width:22%;height:22px;border-radius:999px}
.hd-page .pic{right:6%;top:20%;width:25%;height:54px;border-radius:10px;--fill:#5b21f5}
.hd-page .c1,.hd-page .c2,.hd-page .c3{top:70%;height:26%;width:27%;border-radius:9px}
.hd-page .c1{left:6%;--fill:#3b1ba8}.hd-page .c2{left:36.5%;--fill:#6b3cf0}.hd-page .c3{left:67%;--fill:#a24bf5}
.hd-page .p::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);background-size:220% 100%;animation:hdShine 12s var(--d,0s) infinite both}
.hd-cur{position:absolute;z-index:3;left:10%;top:10%;display:flex;align-items:flex-start;gap:2px;pointer-events:none}
.hd-cur svg{width:16px;height:16px;fill:var(--c);filter:drop-shadow(0 2px 6px rgba(0,0,0,.6))}
.hd-cur em{margin-top:12px;font:600 .62rem/1 var(--mono);font-style:normal;padding:4px 7px;border-radius:5px;color:#08030f;background:var(--c);white-space:nowrap}
.hd-cur.a{--c:#b79cff;animation:hdCurA 12s ease-in-out infinite}
.hd-cur.b{--c:#f08bff;animation:hdCurB 12s ease-in-out infinite}

/* floating labels + badges */
.hd-pill{position:absolute;z-index:5;display:inline-flex;align-items:center;gap:9px;padding:11px 16px;border-radius:9px;font:500 .84rem/1 var(--font);color:#f1ebff;white-space:nowrap;
  background:rgba(70,46,150,.42);border:1px solid rgba(183,156,255,.28);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 12px 34px rgba(3,0,20,.5);animation:hdFloat 8s ease-in-out infinite}
.hd-pill::before{content:"";width:8px;height:8px;border-radius:50%;border:2px solid #cdb8ff;box-sizing:border-box;flex:none}
.hd-pill.p1{left:40%;top:3%}
.hd-pill.p2{left:3%;top:12%;animation-delay:-2s}
.hd-pill.p3{right:3%;top:32%;animation-delay:-4s}
.hd-pill.p4{left:31%;bottom:4%;animation-delay:-5s}
.hd-badge{position:absolute;z-index:5;display:grid;place-items:center;border-radius:50%;color:#fff;background:linear-gradient(140deg,#8e66ff,#e040fb);box-shadow:0 0 0 6px rgba(124,77,255,.16),0 14px 40px rgba(124,77,255,.55);animation:hdFloat 7s ease-in-out infinite}
.hd-badge svg{width:46%;height:46%;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.hd-badge.b1{left:69%;top:4%;width:76px;height:76px}
.hd-badge.b2{right:1.5%;bottom:36%;width:62px;height:62px;background:linear-gradient(140deg,#5b21f5,#8e66ff);animation-delay:-3s}
.hd-cta{position:absolute;z-index:5;left:3%;bottom:5%;display:flex;align-items:center;gap:14px;padding:12px 18px 12px 14px;border-radius:14px;background:rgba(14,6,34,.72);border:1px solid var(--line2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:transform .25s,border-color .25s,background .25s}
.hd-cta:hover{transform:translateY(-3px);border-color:rgba(183,156,255,.55);background:rgba(34,16,76,.8)}
.hd-cta b{display:block;font-size:1.15rem;font-weight:600;letter-spacing:-.03em;line-height:1.1}
.hd-cta small{display:block;margin-top:3px;font-size:.74rem;color:var(--lav)}
.hd-cta svg{width:34px;height:34px;padding:8px;border-radius:50%;background:var(--violet);fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* promise row */
.hd-tag{margin:clamp(40px,6vw,72px) auto clamp(26px,4vw,40px);max-width:880px;text-align:center;font-size:clamp(1.5rem,3.6vw,2.7rem);line-height:1.12;letter-spacing:-.045em;font-weight:500}
.hd-pts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.hd-pts li{padding:22px 20px;border-radius:var(--r);background:var(--card);border:1px solid var(--line);transition:background .25s,border-color .25s,transform .25s}
.hd-pts li:hover{background:var(--card-h);border-color:var(--line2);transform:translateY(-3px)}
.hd-pts svg{width:34px;height:34px;padding:7px;border-radius:10px;background:linear-gradient(140deg,rgba(142,102,255,.3),rgba(224,64,251,.2));fill:none;stroke:#e5d9ff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hd-pts b{display:block;margin:14px 0 6px;font-size:1.02rem;font-weight:600;letter-spacing:-.02em}
.hd-pts span{display:block;color:var(--mute);font-size:.92rem;line-height:1.5}

@keyframes hdSheen{from{background-position:0 0}to{background-position:100% 0}}
@keyframes hdFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes hdBlink{50%{opacity:0}}
@keyframes hdPulse{from{stroke-dashoffset:566}to{stroke-dashoffset:0}}
@keyframes hdIn{0%,2%{opacity:0;transform:translateY(10px) scale(.97)}10%,86%{opacity:1;transform:none}96%,100%{opacity:0;transform:translateY(-4px)}}
@keyframes hdFill{0%,34%{background-color:rgba(255,255,255,.1);border-color:rgba(183,156,255,.45);border-style:dashed}46%,100%{background-color:var(--fill,#8e66ff);border-color:transparent;border-style:solid}}
@keyframes hdShine{0%,44%{background-position:130% 0}60%,100%{background-position:-60% 0}}
@keyframes hdCurA{0%{left:8%;top:6%}18%{left:34%;top:24%}38%{left:60%;top:44%}58%{left:30%;top:68%}78%{left:66%;top:82%}100%{left:8%;top:6%}}
@keyframes hdCurB{0%{left:76%;top:78%}20%{left:52%;top:20%}42%{left:22%;top:40%}62%{left:70%;top:60%}82%{left:40%;top:84%}100%{left:76%;top:78%}}
.hd-stage:not(.live) *{animation-play-state:paused!important}

@media (max-width:1020px){
  .hd-pts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hd-pill.p3{top:36%}
}
@media (max-width:860px){
  .hd-stage{display:grid;gap:14px;padding:16px;min-height:0;grid-template-columns:minmax(0,1fr)}
  .hd-win,.hd-pill,.hd-badge,.hd-cta{position:relative;left:auto;right:auto;top:auto;bottom:auto;width:auto;animation:none}
  .hd-term{order:2}.hd-site{order:3}.hd-term2{order:4}
  .hd-pill{display:none}
  .hd-badge{display:none}
  .hd-cta{order:5;justify-self:stretch;justify-content:space-between}
  .hd-code{font-size:.74rem;min-height:0}
  .hd-page{height:250px}
  .hd-stage::before{content:"Hand-coded · AI-assisted · Built to rank · Fast on phones";order:1;display:block;font:500 .68rem/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--lav);padding:4px 2px 2px}
}
@media (max-width:520px){
  .hd-stage{padding:12px;gap:12px}
  .hd-code{padding:13px 13px 16px;font-size:.7rem}
  .hd-pts{grid-template-columns:1fr}
  .hd-bar span{margin-right:20px}
}
@media (prefers-reduced-motion:reduce){
  .hd-grad,.hd-win,.hd-pill,.hd-badge,.hd-circuit .pl,.hd-cur,.hd-code .caret{animation:none}
  .hd-page .p{opacity:1;animation:none;background-color:var(--fill,#8e66ff);border-color:transparent;border-style:solid}
  .hd-page .p::before{animation:none}
}