/*
Theme Name: Xuan Tong
Theme URI: https://wjdjx.com
Author: 无见顶相
Author URI: https://wjdjx.com
Description: 玄同 · 元人格智能企业主题 — 深色赛博风格，粒子背景、玻璃拟态卡片、六维心法环形交互、滚动揭示动画。
Version: 1.2.4
Requires at least: 7.0
Tested up to: 7.0
Requires PHP: 7.4
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: xuantong
Tags: dark, one-column, custom-menu, featured-images, threaded-comments, translation-ready
*/

:root{
  --bg-0:#04060d; --bg-1:#070b18; --bg-2:#0c1226;
  --cyan:#22d3ee; --cyan-soft:#67e8f9;
  --violet:#a855f7; --violet-soft:#c084fc;
  --bean:#ff5d7a; --bean-soft:#ff8fa3;
  --ink:#e8edf7; --ink-mute:#8b97b3; --ink-dim:#5a6685;
  --line:rgba(120,150,220,.12);
  --glass:rgba(18,26,48,.55);
  --glow-cyan:0 0 40px rgba(34,211,238,.35);
  --glow-violet:0 0 40px rgba(168,85,247,.35);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:"PingFang SC","Microsoft YaHei",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--bg-0);color:var(--ink);overflow-x:hidden;line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
#bg-canvas{position:fixed;inset:0;z-index:0;opacity:.5}
.grid-overlay{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(80,120,200,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(80,120,200,.05) 1px,transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,#000 30%,transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,#000 30%,transparent 80%);
}
.ambient{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.ambient .blob{position:absolute;border-radius:50%;filter:blur(120px);opacity:.18}
.ambient .b1{width:600px;height:600px;background:var(--cyan);top:-150px;left:-100px;animation:float1 22s ease-in-out infinite}
.ambient .b2{width:520px;height:520px;background:var(--violet);bottom:-120px;right:-80px;animation:float2 26s ease-in-out infinite}
.ambient .b3{width:380px;height:380px;background:var(--bean);top:40%;left:55%;animation:float3 30s ease-in-out infinite;opacity:.10}
@keyframes float1{0%,100%{transform:translate(0,0)}50%{transform:translate(80px,60px)}}
@keyframes float2{0%,100%{transform:translate(0,0)}50%{transform:translate(-90px,-50px)}}
@keyframes float3{0%,100%{transform:translate(0,0)}50%{transform:translate(-60px,80px)}}
main{position:relative;z-index:2}

/* nav */
nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:18px 6vw;backdrop-filter:blur(14px);background:rgba(4,6,13,.45);border-bottom:1px solid var(--line);
  transition:padding .3s ease,background .3s ease}
nav.shrink{padding:12px 6vw;background:rgba(4,6,13,.78)}
.brand{display:flex;align-items:center;gap:12px;font-weight:700;letter-spacing:1px}
.brand .logo{width:34px;height:34px;border-radius:9px;
  background:conic-gradient(from 120deg,var(--cyan),var(--violet),var(--bean),var(--cyan));
  display:grid;place-items:center;box-shadow:var(--glow-cyan);position:relative}
.brand .logo::after{content:"玄";position:absolute;inset:0;display:grid;place-items:center;color:#04060d;font-weight:900;font-size:16px}
.brand .name{font-size:18px}
.brand .name span{color:var(--cyan)}
/* Header nav — desktop default: links visible, hamburger hidden.
   Mobile (≤1024px) reverses this: links hidden, hamburger visible.
   The two selectors MUST toggle in lockstep at the same breakpoint
   so they are strictly mutually exclusive. */
.nav-links{display:flex;gap:34px;list-style:none;margin-left:20px}
.nav-links a{color:var(--ink-mute);text-decoration:none;font-size:14px;transition:color .25s;position:relative}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:2px;background:linear-gradient(90deg,var(--cyan),var(--violet));transition:width .3s}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after{width:100%}
.nav-cta{padding:9px 20px;border-radius:30px;font-size:13px;font-weight:600;cursor:pointer;
  color:var(--ink);background:transparent;border:1px solid var(--cyan);transition:all .3s;
  margin-left:auto}  /* push CTA (and any element after it) to the right edge,
                        so the CTA stays on the right at every breakpoint */
.nav-cta:hover{background:var(--cyan);color:#04060d;box-shadow:var(--glow-cyan)}
/* Account / login button — sits right after .nav-cta. Uses violet so it
   reads as a distinct action from the cyan CTA, while staying on-palette.
   margin-left:10px holds a consistent gap to .nav-cta in both logged-in
   (avatar pill) and logged-out (this button) variants — keeps the
   right-hand cluster visually stable across auth states. */
.nav-login{padding:9px 20px;border-radius:30px;font-size:13px;font-weight:600;cursor:pointer;
  color:var(--ink);background:transparent;border:1px solid var(--violet);
  text-decoration:none;display:inline-flex;align-items:center;white-space:nowrap;
  transition:all .3s;max-width:160px;overflow:hidden;text-overflow:ellipsis;
  margin-left:10px}
.nav-login:hover{background:var(--violet);color:#04060d;box-shadow:var(--glow-violet);text-decoration:none}

/* Account avatar + name — shown when logged-in. Circular gravatar wrapped in
   a violet ring, with the user's display name beside it. Stays on-palette:
   the whole pill turns violet on hover. */
.nav-account{display:inline-flex;align-items:center;gap:8px;
  padding:4px 14px 4px 4px;border-radius:30px;overflow:hidden;
  border:1px solid var(--violet);background:rgba(124,92,255,.12);
  transition:all .3s;flex-shrink:0;margin-left:8px;text-decoration:none;
  max-width:200px}
.nav-account img{width:32px;height:32px;border-radius:50%;object-fit:cover;display:block;flex-shrink:0}
.nav-account-name{font-size:13px;font-weight:600;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-account:hover{background:var(--violet);color:#04060d;box-shadow:var(--glow-violet);transform:scale(1.02)}
.nav-account:hover .nav-account-name{color:#04060d}

/* Account dropdown — wraps .nav-account so a hover/focus-revealed menu can
   surface a "注销 (Log out)" action. The trigger pill keeps navigating to
   /wp-admin/profile.php; the menu provides the secondary action. Reveal
   uses both :hover (desktop) and :focus-within (touch / keyboard) so the
   menu works without JavaScript. The caret is a CSS-only triangle made by
   rotating a bordered 12px square so it visually "attaches" to the pill. */
.nav-account-wrap{position:relative;display:inline-flex;flex-shrink:0;margin-left:10px}
.nav-account-menu{position:absolute;top:calc(100% + 10px);right:0;min-width:140px;
  padding:8px;background:rgba(10,14,28,.96);border:1px solid var(--violet);
  border-radius:14px;
  box-shadow:0 16px 40px rgba(0,0,0,.55),0 0 24px rgba(124,92,255,.18);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .22s ease,transform .22s ease,visibility 0s linear .22s;
  z-index:200;pointer-events:none}
.nav-account-wrap:hover .nav-account-menu,
.nav-account-wrap:focus-within .nav-account-menu{
  opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;
  transition:opacity .22s ease,transform .22s ease,visibility 0s linear 0s}
.nav-account-menu::before{content:"";position:absolute;top:-7px;right:22px;
  width:12px;height:12px;background:rgba(10,14,28,.96);
  border-left:1px solid var(--violet);border-top:1px solid var(--violet);
  transform:rotate(45deg);border-top-left-radius:2px}
/* Hover bridge — a transparent 10px strip on the WRAPPER (not the menu)
   itself. Mounting it on .nav-account-wrap gives the bridge the same width
   as the trigger pill, so the cursor stays inside the bridge no matter
   which horizontal slice of the pill it exits from. Earlier drafts put the
   bridge on .nav-account-menu::after and only the "under the caret" path
   worked — any other horizontal exit crossfalled through the gap because
   the menu (min-width:140px) is narrower than the pill (max-width:200px). */
.nav-account-wrap::after{content:"";position:absolute;top:100%;left:0;
  right:0;height:14px;pointer-events:none}
.nav-account-wrap:hover::after{pointer-events:auto}
.nav-account-menu-item{display:flex;align-items:center;justify-content:center;
  padding:8px 14px;border-radius:8px;font-size:13px;font-weight:600;
  color:var(--ink);text-decoration:none;white-space:nowrap;
  transition:background .2s ease,color .2s ease}
.nav-account-menu-item:hover,
.nav-account-menu-item:focus-visible{background:var(--violet);color:#04060d;
  text-decoration:none;outline:none}
.menu-btn{display:none;background:none;border:none;color:var(--ink);font-size:22px;cursor:pointer}

/* WP menu fallback — sub-menu lists inside the nav.
   Note: DO NOT target ul.nav-links here (higher specificity would override
   the @media .nav-links{display:none} below). */
.nav-links ul{list-style:none;display:flex;gap:34px}
.nav-links .sub-menu{display:none}

/* hero */
.hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:90px 6vw 56px;position:relative}
.hero .tag{display:inline-flex;align-items:center;gap:8px;padding:7px 18px;border-radius:30px;
  font-size:13px;letter-spacing:1px;border:1px solid rgba(34,211,238,.35);color:var(--cyan-soft);
  background:rgba(34,211,238,.06);margin-bottom:24px;animation:fadeUp .8s .1s both}
.hero .tag .dot{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan);animation:pulse 2s infinite}
.hero h1{font-size:clamp(40px,7vw,86px);font-weight:800;line-height:1.12;letter-spacing:2px;margin-bottom:26px;animation:fadeUp .8s .25s both}
.hero h1 .grad{background:linear-gradient(110deg,var(--cyan) 0%,var(--violet-soft) 50%,var(--bean-soft) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% auto;animation:shine 6s linear infinite}
.hero p.lead{font-size:clamp(16px,2vw,21px);color:var(--ink-mute);max-width:680px;margin:0 auto 32px;animation:fadeUp .8s .4s both}
.hero .lead strong{color:var(--ink);font-weight:600}
.hero-actions{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;animation:fadeUp .8s .55s both}
.btn{padding:15px 34px;border-radius:40px;font-size:15px;font-weight:600;cursor:pointer;border:none;
  text-decoration:none;display:inline-flex;align-items:center;gap:10px;transition:all .3s}
.btn-primary{color:#04060d;background:linear-gradient(100deg,var(--cyan),var(--violet));box-shadow:0 8px 30px rgba(34,211,238,.3)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 14px 40px rgba(168,85,247,.45)}
.btn-ghost{color:var(--ink);background:rgba(255,255,255,.03);border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--cyan);color:var(--cyan-soft);background:rgba(34,211,238,.06)}
.scroll-hint{position:absolute;bottom:-30px;left:50%;transform:translateX(-50%);color:var(--ink-dim);font-size:12px;letter-spacing:2px;animation:bob 2.4s ease-in-out infinite}
.scroll-hint .line{width:1px;height:40px;margin:10px auto 0;background:linear-gradient(var(--cyan),transparent)}

/* sections */
section{padding:64px 6vw;position:relative}
.sec-head{text-align:center;max-width:760px;margin:0 auto 40px}
.sec-kicker{font-size:13px;letter-spacing:4px;color:var(--cyan);text-transform:uppercase;margin-bottom:16px;font-weight:600}
.sec-title{font-size:clamp(30px,4.5vw,50px);font-weight:800;line-height:1.2;margin-bottom:20px}
.sec-title .grad{background:linear-gradient(110deg,var(--cyan),var(--violet-soft));-webkit-background-clip:text;background-clip:text;color:transparent}
.sec-sub{color:var(--ink-mute);font-size:17px}

/* about */
.about-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;max-width:1200px;margin:0 auto}
.about-text h3{font-size:clamp(26px,3.5vw,40px);font-weight:800;margin-bottom:20px;line-height:1.3}
.about-text h3 em{font-style:normal;background:linear-gradient(110deg,var(--bean-soft),var(--violet-soft));-webkit-background-clip:text;background-clip:text;color:transparent}
.about-text p{color:var(--ink-mute);margin-bottom:18px;font-size:16.5px}
.about-text p strong{color:var(--ink)}
.about-visual{position:relative;aspect-ratio:1;max-width:440px;margin:0 auto;display:grid;place-items:center}
.core-orb{width:240px;height:240px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,rgba(34,211,238,.5),rgba(168,85,247,.25) 50%,transparent 70%);
  position:relative;display:grid;place-items:center;animation:breathe 5s ease-in-out infinite}
.core-orb::before,.core-orb::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid rgba(34,211,238,.25)}
.core-orb::before{inset:-40px;animation:spin 18s linear infinite;border-style:dashed}
.core-orb::after{inset:-80px;animation:spin 26s linear infinite reverse;border-color:rgba(168,85,247,.2)}
.core-orb .glyph{font-size:90px;font-weight:900;background:linear-gradient(135deg,var(--cyan-soft),var(--violet-soft));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 30px rgba(34,211,238,.4))}
.orbit{position:absolute;border:1px solid var(--line);border-radius:50%}
.orbit.o1{inset:-30px;animation:spin 14s linear infinite}
.orbit .node{position:absolute;width:12px;height:12px;border-radius:50%;background:var(--cyan);box-shadow:0 0 14px var(--cyan);top:-6px;left:50%;transform:translateX(-50%)}
.orbit.o2{inset:-110px;animation:spin 22s linear infinite reverse}
.orbit.o2 .node{background:var(--bean);box-shadow:0 0 14px var(--bean);width:10px;height:10px}

/* two legs */
.legs{display:grid;grid-template-columns:1fr 1fr;gap:30px;max-width:1100px;margin:0 auto}
.leg{position:relative;padding:36px 30px;border-radius:22px;background:var(--glass);backdrop-filter:blur(12px);
  border:1px solid var(--line);overflow:hidden;transition:transform .4s,border-color .4s}
.leg::before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .4s}
.leg.l1::before{background:radial-gradient(circle at 80% 0%,rgba(34,211,238,.16),transparent 60%)}
.leg.l2::before{background:radial-gradient(circle at 80% 0%,rgba(168,85,247,.16),transparent 60%)}
.leg:hover{transform:translateY(-8px);border-color:rgba(34,211,238,.4)}
.leg:hover::before{opacity:1}
.leg .ico{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;font-size:24px;margin-bottom:18px}
.leg.l1 .ico{background:rgba(34,211,238,.12);color:var(--cyan);border:1px solid rgba(34,211,238,.3)}
.leg.l2 .ico{background:rgba(168,85,247,.12);color:var(--violet-soft);border:1px solid rgba(168,85,247,.3)}
.leg .role{font-size:12px;letter-spacing:3px;color:var(--ink-dim);margin-bottom:8px;text-transform:uppercase}
.leg h4{font-size:26px;font-weight:800;margin-bottom:16px}
.leg.l1 h4{color:var(--cyan-soft)}
.leg.l2 h4{color:var(--violet-soft)}
.leg p{color:var(--ink-mute);font-size:15.5px}
.leg .root{margin-top:22px;padding-top:22px;border-top:1px dashed var(--line);font-size:14px;color:var(--ink-dim)}
.leg .root b{color:var(--ink)}

/* six dims */
.six-wrap{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.hex-stage{position:relative;width:100%;max-width:520px;margin:0 auto;height:0;padding-bottom:100%}
.hex-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.hex-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:160px;height:160px;border-radius:50%;
  background:radial-gradient(circle,rgba(34,211,238,.3),transparent 70%);display:grid;place-items:center;text-align:center}
.hex-center .t{font-size:16px;color:var(--cyan-soft);font-weight:700;letter-spacing:2px}
.hex-center .s{font-size:11px;color:var(--ink-dim);margin-top:4px}
.dim-node{position:absolute;width:112px;height:112px;border-radius:50%;display:grid;place-items:center;text-align:center;cursor:pointer;
  background:var(--glass);backdrop-filter:blur(10px);border:1px solid var(--line);transition:all .35s;
  transform:translate(-50%,-50%) scale(1)}
.dim-node:hover,.dim-node.active{border-color:var(--cyan);box-shadow:var(--glow-cyan);transform:translate(-50%,-50%) scale(1.1)}
.dim-node .n{font-size:22px;font-weight:800;background:linear-gradient(135deg,var(--cyan-soft),var(--violet-soft));-webkit-background-clip:text;background-clip:text;color:transparent}
.dim-node .d{font-size:11px;color:var(--ink-dim);margin-top:2px}
.dim-detail{padding:34px;border-radius:22px;background:var(--glass);backdrop-filter:blur(12px);border:1px solid var(--line);min-height:280px}
.dim-detail .dk{font-size:13px;letter-spacing:3px;color:var(--cyan);margin-bottom:8px}
.dim-detail h4{font-size:30px;font-weight:800;margin-bottom:14px}
.dim-detail p{color:var(--ink-mute);font-size:16px;margin-bottom:12px}
.dim-detail .quote{color:var(--ink-dim);font-size:14px;font-style:italic;border-left:2px solid var(--cyan);padding-left:16px}

/* workflow */
.flow{max-width:1000px;margin:0 auto;position:relative}
.flow::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;background:linear-gradient(var(--cyan),var(--violet),var(--bean));transform:translateX(-50%);opacity:.4}
.flow-step{display:flex;align-items:center;margin-bottom:34px;position:relative}
.flow-step:nth-child(even){flex-direction:row-reverse}
.flow-step .content{width:44%;padding:30px 32px;border-radius:18px;background:var(--glass);backdrop-filter:blur(10px);border:1px solid var(--line);transition:all .35s}
.flow-step .content:hover{border-color:rgba(34,211,238,.4);transform:translateY(-4px)}
.flow-step .num{position:absolute;left:50%;transform:translateX(-50%);width:54px;height:54px;border-radius:50%;
  display:grid;place-items:center;font-weight:800;font-size:18px;color:#04060d;
  background:linear-gradient(135deg,var(--cyan),var(--violet));box-shadow:0 0 24px rgba(34,211,238,.4);z-index:2;border:4px solid var(--bg-0)}
.flow-step .content h4{font-size:21px;font-weight:700;margin-bottom:10px;display:flex;align-items:center;gap:10px}
.flow-step .content h4 .idx{color:var(--cyan);font-size:14px}
.flow-step .content p{color:var(--ink-mute);font-size:15px}

/* principles */
.princ-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;max-width:1200px;margin:0 auto}
.princ{padding:30px 26px;border-radius:20px;background:var(--glass);backdrop-filter:blur(10px);border:1px solid var(--line);transition:all .4s;position:relative;overflow:hidden}
.princ::after{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--cyan),var(--violet));transform:scaleX(0);transform-origin:left;transition:transform .4s}
.princ:hover{transform:translateY(-8px);border-color:rgba(168,85,247,.3)}
.princ:hover::after{transform:scaleX(1)}
.princ .pi{font-size:28px;margin-bottom:14px}
.princ h4{font-size:20px;font-weight:700;margin-bottom:12px}
.princ p{color:var(--ink-mute);font-size:14.5px}
.princ .tagline{margin-top:16px;font-size:13px;color:var(--cyan-soft);font-weight:600}

/* growth */
.growth{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:30px}
.growth-card{padding:34px 30px;border-radius:22px;background:var(--glass);backdrop-filter:blur(12px);border:1px solid var(--line)}
.growth-card h4{font-size:24px;font-weight:800;margin-bottom:14px;color:var(--cyan-soft)}
.growth-card p{color:var(--ink-mute);margin-bottom:12px}
.three-q{list-style:none;counter-reset:q}
.three-q li{counter-increment:q;padding:16px 0 16px 50px;position:relative;color:var(--ink-mute);border-bottom:1px dashed var(--line);font-size:15px}
.three-q li:last-child{border-bottom:none}
.three-q li::before{content:counter(q);position:absolute;left:0;top:14px;width:30px;height:30px;border-radius:50%;background:rgba(34,211,238,.12);color:var(--cyan);display:grid;place-items:center;font-weight:700;font-size:14px;border:1px solid rgba(34,211,238,.3)}
.three-q li b{color:var(--ink)}

/* cta + footer */
.cta{padding:68px 6vw;text-align:center;position:relative}
.cta-inner{max-width:720px;margin:0 auto;position:relative;z-index:2}
.cta h2{font-size:clamp(34px,5vw,58px);font-weight:800;line-height:1.2;margin-bottom:20px}
.cta h2 .grad{background:linear-gradient(110deg,var(--cyan),var(--violet-soft),var(--bean-soft));-webkit-background-clip:text;background-clip:text;color:transparent}
.cta p{color:var(--ink-mute);font-size:18px;margin-bottom:30px}
footer{padding:40px 6vw;border-top:1px solid var(--line);background:rgba(4,6,13,.6);position:relative;z-index:2}
.foot-grid{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px;max-width:1200px;margin:0 auto}
.foot-grid .brand{font-size:16px}
.foot-grid .copy{color:var(--ink-dim);font-size:13px}
.foot-links{display:flex;gap:24px;list-style:none}
.foot-links a{color:var(--ink-dim);text-decoration:none;font-size:13px;transition:color .25s}
.foot-links a:hover{color:var(--cyan)}

/* ===== WP 7.0: base link styles (core no longer provides them) ===== */
a{color:var(--cyan-soft);text-decoration:none;transition:color .25s,box-shadow .25s}
a:hover{color:var(--cyan);text-decoration:underline}
a:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;border-radius:2px}

/* WP 7.0: prevent .has-custom-css from breaking layout */
.has-custom-css{position:relative}
.wp-block{max-width:100%}

/* accessibility */
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important}
.screen-reader-text:focus{background:var(--bg-2);clip:auto;clip-path:none;color:var(--cyan);display:block;font-size:14px;font-weight:700;height:auto;left:5px;line-height:normal;padding:12px 16px;text-decoration:none;top:5px;width:auto;z-index:100000}

/* block editor alignment support */
.alignwide{width:100%;max-width:1200px;margin-left:auto;margin-right:auto}
.alignfull{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.wp-block-image figcaption,.wp-block-gallery .blocks-gallery-caption{color:var(--ink-dim);font-size:13px;text-align:center;margin-top:8px}
.wp-caption{max-width:100%}
.wp-caption-text{color:var(--ink-dim);font-size:13px;text-align:center;margin-top:6px}
.gallery{display:flex;flex-wrap:wrap;gap:12px}
.gallery-item img{border-radius:8px}

/* WP content page */
.page-content{max-width:800px;margin:0 auto;padding:80px 6vw 60px}
.page-content h1,.page-content h2,.page-content h3{color:var(--ink);margin-bottom:16px}
.page-content h1{font-size:32px;font-weight:800}
.page-content h2{font-size:26px;font-weight:700}
.page-content p{color:var(--ink-mute);margin-bottom:16px;line-height:1.8}
.page-content a{color:var(--cyan-soft);text-decoration:none;border-bottom:1px solid rgba(34,211,238,.25);transition:color .25s,border-color .25s}
.page-content a:hover{color:var(--cyan);border-bottom-color:var(--cyan)}
.page-content img{max-width:100%;height:auto;border-radius:12px;margin:16px 0}
.page-content ul,.page-content ol{color:var(--ink-mute);margin:0 0 16px;padding-left:24px;line-height:1.8}
.page-content li{margin-bottom:6px}
.page-content blockquote{border-left:3px solid var(--cyan);padding-left:16px;color:var(--ink-dim);font-style:italic;margin-bottom:16px}
.page-content hr{border:none;border-top:1px solid var(--line);margin:24px 0}
.page-content table{width:100%;border-collapse:collapse;margin-bottom:16px}
.page-content th,.page-content td{border:1px solid var(--line);padding:8px 12px;text-align:left;color:var(--ink-mute)}
.page-content th{color:var(--ink);font-weight:600}

/* single post */
.post-single{max-width:760px;margin:0 auto;padding:80px 6vw 60px}
.post-single .post-meta{color:var(--ink-dim);font-size:13px;margin-bottom:20px}
.post-single .post-meta a{color:var(--cyan-soft);border-bottom:none}
.post-single .post-meta a:hover{color:var(--cyan)}
.post-single h1{font-size:32px;font-weight:800;margin-bottom:16px}
.post-single .post-content{color:var(--ink-mute);line-height:1.8}
.post-single .post-content p{margin-bottom:16px}
.post-single .post-content h2,.post-single .post-content h3{color:var(--ink);margin:24px 0 12px}
.post-single .post-content h2{font-size:24px}
.post-single .post-content h3{font-size:20px}
.post-single .post-content a{color:var(--cyan-soft);text-decoration:none;border-bottom:1px solid rgba(34,211,238,.25);transition:color .25s,border-color .25s}
.post-single .post-content a:hover{color:var(--cyan);border-bottom-color:var(--cyan)}
.post-single .post-content img{max-width:100%;height:auto;border-radius:12px;margin:16px 0}
.post-single .post-content ul,.post-single .post-content ol{margin:0 0 16px;padding-left:24px}
.post-single .post-content li{margin-bottom:6px}
.post-single .post-content code{background:var(--bg-2);padding:2px 6px;border-radius:4px;font-size:14px}
.post-single .post-content pre{background:var(--bg-2);padding:16px;border-radius:8px;overflow-x:auto;margin-bottom:16px;border:1px solid var(--line)}
.post-single .post-content pre code{background:none;padding:0}
.post-single .post-content blockquote{border-left:3px solid var(--cyan);padding-left:16px;color:var(--ink-dim);font-style:italic;margin-bottom:16px}
.post-single .post-content blockquote p{margin-bottom:8px}

/* comments */
#comments{color:var(--ink-mute)}
#comments a{color:var(--cyan-soft);text-decoration:none}
#comments a:hover{color:var(--cyan)}
#comments .comment-body{padding:16px 0;border-bottom:1px solid var(--line)}
#comments .comment-body p{color:var(--ink-mute);margin-bottom:8px;line-height:1.7}
#comments .comment-author{font-size:14px;color:var(--ink);font-weight:600}
#comments .comment-author a{color:var(--ink)}
#comments .comment-meta{font-size:12px;color:var(--ink-dim);margin-bottom:8px}
#comments .comment-meta a{color:var(--ink-dim)}
#comments .reply{font-size:13px}
#comments .children{list-style:none;padding-left:24px;border-left:1px solid var(--line);margin-top:8px}
#comments .comment-respond{margin-top:32px}
#comments input[type=text],#comments input[type=email],#comments input[type=url]{width:100%;background:var(--bg-2);border:1px solid var(--line);border-radius:10px;padding:10px 14px;color:var(--ink);font-family:inherit;font-size:14px;margin-bottom:12px}
#comments input:focus,#comments textarea:focus{border-color:var(--cyan);outline:none}
#comments .comment-form-cookies-consent{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-dim)}
#comments .comment-form-cookies-consent input{width:auto}
#comments .comment-notes{color:var(--ink-dim);font-size:13px;margin-bottom:16px}
#comments .comment-reply-link{color:var(--cyan-soft);font-size:13px}
#comments .comment-reply-link:hover{color:var(--cyan)}
#comments .bypostauthor{border-left:2px solid var(--violet);padding-left:12px}

/* pagination */
.pagination,.comments-pagination{display:flex;justify-content:center;gap:8px;margin-top:32px}
.pagination a,.pagination span,.comments-pagination a,.comments-pagination span{padding:8px 14px;border-radius:8px;font-size:14px;color:var(--ink-mute);background:var(--glass);border:1px solid var(--line);text-decoration:none;transition:all .25s}
.pagination a:hover,.pagination .current,.comments-pagination a:hover,.comments-pagination .current{color:var(--cyan);border-color:var(--cyan);background:rgba(34,211,238,.08)}

/* 404 */
.error404{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:120px 6vw}
.error404 h1{font-size:80px;font-weight:900;background:linear-gradient(110deg,var(--cyan),var(--violet-soft));-webkit-background-clip:text;background-clip:text;color:transparent}
.error404 p{color:var(--ink-mute);margin:16px 0 32px}

.reveal{opacity:0;transform:translateY(40px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

@keyframes fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes shine{to{background-position:200% center}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes bob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(8px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}

/* responsive — tablet & mobile */
/* IMPORTANT: nav-links and menu-btn share the SAME breakpoint here so
   they are strictly mutually exclusive — when one shows, the other hides.
   Bumping breakpoint from 900px → 1024px so the nav-links switch to
   hamburger as soon as the row starts feeling cramped. */
@media(max-width:1024px){
  .nav-links{display:none}
  .menu-btn{display:block}
  /* When hamburger is opened, show nav-links as a vertical dropdown panel
     in the top-right corner. The JS just toggles .is-open on .nav-links. */
  .nav-links.is-open{display:flex;flex-direction:column;gap:14px;
    position:absolute;top:64px;right:6vw;left:auto;
    background:rgba(4,6,13,.95);
    padding:18px 26px;border-radius:14px;border:1px solid var(--line);
    z-index:60}
  .nav-links.is-open li{list-style:none}
  .nav-links.is-open a{font-size:15px;color:var(--ink)}
  .about-grid,.legs,.six-wrap,.growth{grid-template-columns:1fr}
  .princ-grid{grid-template-columns:1fr}
  .flow::before{left:24px}
  .flow-step,.flow-step:nth-child(even){flex-direction:row}
  .flow-step .content{width:calc(100% - 64px);margin-left:64px}
  .flow-step .num{left:24px;width:48px;height:48px;font-size:16px}
  section{padding:48px 5vw}
  .sec-head{margin:0 auto 32px}
  .sec-kicker{margin-bottom:12px}
  .sec-title{margin-bottom:14px}
  .hero{min-height:auto;padding:96px 5vw 56px}
  .hero .tag{margin-bottom:20px}
  .hero h1{margin-bottom:20px}
  .hero p.lead{margin:0 auto 26px}
  .btn{padding:13px 28px;font-size:14px}
  .about-grid{gap:36px}
  .about-text h3{margin-bottom:16px}
  .about-text p{margin-bottom:14px}
  .about-visual{max-width:300px}
  .core-orb{width:180px;height:180px}
  .core-orb .glyph{font-size:68px}
  .core-orb::before{inset:-30px}
  .core-orb::after{inset:-60px}
  .orbit.o2{inset:-80px}
  .legs{gap:18px}
  .leg{padding:26px 22px;border-radius:18px}
  .leg .ico{width:48px;height:48px;font-size:22px;margin-bottom:14px}
  .leg h4{font-size:23px;margin-bottom:12px}
  .leg .root{margin-top:16px;padding-top:16px}
  .six-wrap{gap:32px}
  .hex-stage{max-width:360px}
  .dim-node{width:90px;height:90px}
  .dim-node .n{font-size:19px}
  .dim-node .d{font-size:10px}
  .hex-center{width:124px;height:124px}
  .dim-detail{padding:26px 22px;min-height:auto;border-radius:18px}
  .dim-detail h4{font-size:26px;margin-bottom:12px}
  .princ-grid{gap:16px}
  .princ{padding:24px 22px;border-radius:18px}
  .princ .pi{font-size:26px;margin-bottom:12px}
  .growth{gap:18px}
  .growth-card{padding:26px 24px;border-radius:18px}
  .growth-card h4{margin-bottom:12px}
  .three-q li{padding:13px 0 13px 44px;font-size:14px}
  .three-q li::before{width:26px;height:26px;font-size:13px;top:12px}
  .flow-step{margin-bottom:22px}
  .flow-step .content{padding:20px 20px}
  .flow-step .content h4{font-size:18px;margin-bottom:8px}
  .cta{padding:52px 5vw}
  .cta p{margin-bottom:24px}
  footer{padding:32px 5vw}
  .foot-grid{gap:16px}
  .foot-links{gap:18px}
}
/* small phones */
@media(max-width:480px){
  section{padding:40px 5vw}
  .hero{padding:88px 5vw 44px}
  .hero h1{letter-spacing:1px}
  .nav-cta{padding:8px 16px;font-size:12px}
  .nav-login{padding:8px 14px;font-size:12px;max-width:110px}
  .nav-account{padding:3px 10px 3px 3px;max-width:130px}
  .nav-account img{width:28px;height:28px}
  .nav-account-name{font-size:12px}
  .nav-account-menu{min-width:120px;padding:6px}
  .nav-account-menu-item{padding:7px 12px;font-size:12px}
  .brand .name{font-size:16px}
  .hex-stage{max-width:300px}
  .dim-node{width:74px;height:74px}
  .dim-node .n{font-size:16px}
  .dim-node .d{display:none}
  .hex-center{width:100px;height:100px}
  .hex-center .t{font-size:13px}
  .leg{padding:22px 18px}
  .princ{padding:22px 18px}
  .growth-card{padding:22px 18px}
  .dim-detail{padding:22px 18px}
  .flow-step .content{padding:18px 16px;margin-left:56px;width:calc(100% - 56px)}
  .flow-step .num{left:20px;width:42px;height:42px;font-size:14px}
  .flow::before{left:20px}
  .cta h2{font-size:30px}
}