/* Xenyra Hub (H15): one clean stylesheet. Replaces hub.css + return-nav + hub-header + hub-hero + motto layers. */
@font-face{font-family:Cardo;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/cardo-400.woff2) format('woff2')}
@font-face{font-family:Cardo;font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/cardo-700.woff2) format('woff2')}
@font-face{font-family:Inter;font-style:normal;font-weight:300 900;font-display:swap;src:url(../fonts/inter-var.woff2) format('woff2')}
@property --xh-a{syntax:'<angle>';inherits:false;initial-value:0deg}

:root{
  color-scheme:light;
  --ink:#08111f; --ink-2:#0b1745; --muted:#5b6b86; --line:#dbe5f7;
  --blue:#2771ff; --violet:#842cf5; --cyan:#00e5ff; --bg:#f4f7ff;
  --ring:conic-gradient(from var(--xh-a),#00e5ff,#1d7cff,#b026ff,#00e5ff);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink-2);background:radial-gradient(circle at 88% 0%,#e9dcff 0%,transparent 38%),radial-gradient(circle at 10% 12%,#d8f7ff 0%,transparent 40%),var(--bg)}
a{color:inherit}
button{font:inherit;cursor:pointer}
.xh-skip{position:absolute;top:-90px}
.xh-skip:focus{top:5px;left:5px;z-index:20;background:#fff;padding:10px}


/* ---- layout ---- */
.xh-main{max-width:1360px;margin:auto;padding:clamp(28px,6vw,86px) clamp(18px,4vw,66px) 40px;display:grid;grid-template-columns:minmax(0,690px) minmax(280px,1fr);column-gap:clamp(24px,5vw,80px);align-items:start;min-height:calc(100vh - 75px)}
.xh-hero{grid-column:1}
.xh-stage{grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;min-height:380px;align-self:center;transition:opacity .5s ease}
.xh-spaces,.xh-footnote{grid-column:1}

/* ---- hero text ---- */
.xh-eyebrow{display:inline-block;padding:8px 16px;border:1px solid #d3defa;border-radius:999px;background:#eaf0ffcc;color:#2a4fd6;font-size:12px;font-weight:800;letter-spacing:.14em}
.xh-hero h1{font-family:Cardo,Georgia,"Times New Roman",serif;font-size:clamp(34px,4vw,64px);line-height:1.12;font-weight:400;letter-spacing:-.02em;max-width:740px;margin:18px 0;color:var(--ink)}
.xh-grad{background:linear-gradient(90deg,#00e5ff,#1d7cff,#b026ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.xh-hero>p{color:var(--muted);line-height:1.6;font-size:17px;max-width:620px}
.xh-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:27px}
.xh-hint{font-size:12px;color:#62779f;min-height:20px}

/* ---- buttons: primary carries the AI ring (cyan > blue > violet), no green ---- */
.xh-btn{position:relative;isolation:isolate;text-decoration:none;border:0;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:14px 24px;font-weight:800;min-height:50px}
.xh-btn-primary{color:#fff;background:linear-gradient(115deg,#2771ff,#7b3cf2)}
/* AI ring: a real rotating border (mask), brighter on hover/focus */
.xh-btn::before{content:"";position:absolute;inset:-3px;transition:opacity .25s,inset .25s;border-radius:inherit;padding:3px;background:var(--ring);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);opacity:0;transition:opacity .25s;animation:xh-ring 3s linear infinite;pointer-events:none}
.xh-btn::after{content:"";position:absolute;inset:-2px;border-radius:inherit;background:var(--ring);filter:blur(14px);opacity:0;z-index:-1;transition:opacity .25s;animation:xh-ring 3s linear infinite;pointer-events:none}
.xh-btn-primary::before{opacity:.85}
.xh-btn-primary::after{opacity:.35}
.xh-btn-primary:hover::before,.xh-btn-primary:focus-visible::before{inset:-7px;padding:3px;opacity:1}
.xh-btn-primary:hover::after,.xh-btn-primary:focus-visible::after{inset:-8px;opacity:.75}
.xh-btn-outline:hover::before,.xh-btn-outline:focus-visible::before{opacity:1}
.xh-btn:hover::after,.xh-btn:focus-visible::after{opacity:.6}
.xh-btn{transition:transform .15s}
.xh-btn:hover{transform:translateY(-1px)}
.xh-btn-outline{background:#fff;color:var(--ink);border:1.5px solid #cfd8ee}
.xh-btn:focus-visible,.xh-orb:focus-visible{outline:3px solid #8fb2ff;outline-offset:3px}

/* ---- orb launcher: one element, two slots (big = invitation, small = chat is open) ---- */
.xh-slot{display:grid;place-items:center}
.xh-slot-big{width:clamp(170px,19vw,260px);aspect-ratio:1}
.xh-slot-small{width:88px;height:88px;flex:none}
.xh-slot-small:empty{display:none}
.xh-orb{position:relative;isolation:isolate;display:block;width:100%;height:100%;padding:0;border:0;border-radius:50%;background:transparent;transform-origin:0 0;animation:xh-breathe 4.8s ease-in-out infinite}
.xh-orb img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.xh-orb::before{content:"";position:absolute;inset:-9%;border-radius:50%;background:var(--ring);filter:blur(22px);opacity:.5;z-index:-1;animation:xh-ring 7s linear infinite}
.xh-slot-small .xh-orb{animation:none}
.xh-slot-small .xh-orb::before{opacity:.35;filter:blur(12px)}
.xh-orb-hint{margin:0;font-size:14px;font-weight:650;color:var(--muted);text-align:center}
body.xh-chat-open .xh-orb-hint{opacity:0}

/* ---- motto row (orb joins it when the chat is open) ---- */
.xh-motto-row{display:flex;align-items:center;gap:22px;max-width:690px;margin:34px 0 0}
.xh-motto-wrap{min-width:0;flex:1}
.xh-motto summary{display:grid;gap:6px;cursor:pointer;list-style:none}
.xh-motto summary::-webkit-details-marker{display:none}
.xh-motto-line{font-family:Cardo,Georgia,serif;font-style:italic;font-weight:500;font-size:clamp(24px,3vw,36px);letter-spacing:-.4px;line-height:1.15;color:var(--ink)}
.xh-motto-more{font-size:13px;font-weight:650;color:var(--blue)}
.xh-motto-more::after{content:' \25BE'}
.xh-motto[open] .xh-motto-more::after{content:' \25B4'}
.xh-motto-body{margin-top:14px;border:1px solid #e0e8f9;border-radius:20px;background:#ffffffe6;padding:8px 20px 16px;box-shadow:0 10px 28px #2549870b}
.xh-motto-body p{margin:10px 0 0;line-height:1.6;font-size:15px;color:#3b4a73}
.xh-motto-body ul{margin:10px 0 0;padding-left:20px;display:grid;gap:4px;font-size:15px;color:#3b4a73}
.xh-motto-body .now{font-weight:650;color:var(--ink-2)}
.xh-motto-body .xh-motto-src{font-size:12px;color:#65789d}
.xh-motto-body .xh-motto-src a{color:inherit}

/* ---- cards + footnote ---- */
.xh-spaces{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;margin:40px 0 20px;max-width:690px}
.xh-card{position:relative;isolation:isolate;text-decoration:none;display:flex;flex-direction:column;gap:12px;padding:24px;border:1px solid #d5e1fb;border-radius:28px;background:linear-gradient(160deg,#fff,#eef4ff 70%,#f3ecff);box-shadow:0 14px 34px #2a4fa81a;transition:transform .2s,box-shadow .2s}
.xh-card::before{content:"";position:absolute;inset:-2px;border-radius:30px;padding:2px;background:var(--ring);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);opacity:0;transition:opacity .25s;animation:xh-ring 4s linear infinite;pointer-events:none}
.xh-card:hover,.xh-card:focus-visible{transform:translateY(-3px);box-shadow:0 20px 44px #2a4fa833}
.xh-card:hover::before,.xh-card:focus-visible::before{opacity:1}
.xh-card-icon{display:grid;place-items:center;width:58px;height:58px;border-radius:18px;color:#fff;background:linear-gradient(135deg,#2771ff,#7b3cf2);box-shadow:0 8px 20px #4a5cf055}
.xh-ico{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.xh-card strong{font-size:19px;color:var(--ink)}
.xh-card>span:last-child{color:var(--muted);font-size:14px;line-height:1.5}
.xh-footnote{font-size:12px;color:#65789d;line-height:1.6;max-width:690px}

/* ---- the assistant window: launched from the orb ---- */
.xh-page.xh-launch .xenyra-root.xenyra-open .xenyra-panel{transform-origin:var(--xh-ox,85%) var(--xh-oy,40%);animation:xh-emerge 1.05s cubic-bezier(.16,.84,.24,1) both}

@keyframes xh-ring{to{--xh-a:360deg}}
@keyframes xh-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
@keyframes xh-emerge{0%{opacity:0;transform:scale(.18);filter:blur(16px)}55%{opacity:1;filter:blur(2px)}100%{opacity:1;transform:none;filter:none}}

/* ---- responsive ---- */
@media(max-width:920px){
  .xh-main{grid-template-columns:minmax(0,1fr);padding-bottom:85px}
  .xh-stage{grid-column:1;grid-row:auto;order:2;min-height:0;margin:30px 0 0}
  .xh-spaces,.xh-footnote{grid-column:1}
  .xh-spaces{order:3;max-width:620px}.xh-footnote{order:4}
}
@media(max-width:540px){
  .xh-main{padding-top:30px}.xh-hero h1{letter-spacing:-1px}.xh-hero>p{font-size:15px}
  .xh-spaces{grid-template-columns:1fr}.xh-btn{font-size:13px}
  .xh-slot-small{width:64px;height:64px}.xh-motto-row{gap:14px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}.xh-card{transition:none}
  .xh-orb,.xh-orb::before,.xh-btn::before,.xh-btn::after,.xh-card::before{animation:none}
  .xh-page.xh-launch .xenyra-root.xenyra-open .xenyra-panel{animation:none}
}