/* =========================================================
   Apis — About & Contact chapters
   Extends assets/styles.css (same tokens, same hive language)
   ========================================================= */

/* ===== chapter hero (shared by both pages) ===== */
.chero{position:relative;padding:150px 0 70px;overflow:hidden}
.chero-inner{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
.chero-kicker{display:inline-flex;align-items:center;gap:10px;padding:7px 16px;border-radius:999px;border:1px solid var(--line-strong);background:var(--surface);color:var(--muted);font-size:.83rem}
.chero-kicker i{width:7px;height:7px;border-radius:50%;background:var(--honey);box-shadow:0 0 12px var(--honey);animation:pulseDot 2.4s var(--ease) infinite}
@keyframes pulseDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.7)}}

.chero-title{font-size:clamp(2rem,5vw,3.5rem);line-height:1.3;margin:20px 0 18px;letter-spacing:-.02em}
.chero-title .ln{display:block;overflow:hidden}
.chero-title .ln>span{display:block;transform:translateY(110%);opacity:0;animation:lineUp .95s var(--ease-out) forwards;animation-delay:calc(.12s * var(--l,0) + .1s)}
@keyframes lineUp{to{transform:translateY(0);opacity:1}}
.chero-sub{color:var(--muted);max-width:56ch;font-size:1.03rem}
.chero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}

.chero-scroll{display:inline-flex;align-items:center;gap:10px;margin-top:38px;color:var(--dim);font-size:.85rem}
.chero-scroll span.bar{position:relative;width:54px;height:1.5px;background:var(--line-strong);overflow:hidden;border-radius:2px}
.chero-scroll span.bar::after{content:"";position:absolute;inset:0;background:var(--grad);transform:translateX(100%);animation:scrollBar 2.2s var(--ease) infinite}
@keyframes scrollBar{0%{transform:translateX(100%)}60%,100%{transform:translateX(-100%)}}

/* orbit visual */
.orbit{position:relative;aspect-ratio:1;display:grid;place-items:center}
.orbit-ring{position:absolute;inset:12%;border:1px solid var(--line);border-radius:50%;animation:spin 34s linear infinite}
.orbit-ring--2{inset:0;border-style:dashed;border-color:rgba(255,176,32,.2);animation-duration:52s;animation-direction:reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.orbit-core{position:relative;width:150px;height:150px;display:grid;place-items:center;border-radius:34px;background:var(--grad-soft);border:1px solid var(--line-strong);box-shadow:var(--glow-v);animation:coreFloat 7s var(--ease) infinite}
@keyframes coreFloat{0%,100%{transform:translateY(-6px)}50%{transform:translateY(8px)}}
.orbit-core img{width:82px;height:auto;filter:drop-shadow(0 0 18px rgba(168,85,247,.6))}
.orbit-chip{position:absolute;padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:rgba(18,10,36,.82);backdrop-filter:blur(8px);font-size:.8rem;color:var(--muted);white-space:nowrap;
  transform:rotate(calc(var(--a) * 1deg)) translate(var(--r)) rotate(calc(var(--a) * -1deg));
  inset-inline-start:50%;top:50%;margin-inline-start:-60px;margin-top:-18px;animation:chipFloat 6s var(--ease) infinite;animation-delay:calc(var(--i) * .5s)}
@keyframes chipFloat{0%,100%{opacity:.75}50%{opacity:1}}
.orbit-chip b{color:var(--honey-2);font-weight:600}

/* ===== timeline journey ===== */
.tl{position:relative;margin-top:52px;padding-inline-start:6px}
.tl-rail{position:absolute;inset-block:8px;inset-inline-end:14px;width:2px;background:var(--line)}
.tl-rail i{position:absolute;inset-inline:0;top:0;height:0;background:var(--grad);box-shadow:0 0 18px rgba(168,85,247,.7);transition:height .2s linear}
.tl-item{position:relative;padding-inline-end:56px;padding-block:20px;opacity:.42;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.tl-item.is-on{opacity:1;transform:none}
.tl-dot{position:absolute;inset-inline-end:4px;top:30px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--bg-2);border:1px solid var(--line-strong)}
.tl-dot::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--dim);transition:background .4s,box-shadow .4s}
.tl-item.is-on .tl-dot::after{background:var(--honey);box-shadow:0 0 14px var(--honey)}
.tl-year{font-family:"Space Grotesk",sans-serif;font-size:.9rem;color:var(--honey-2);direction:ltr;display:inline-block}
.tl-item h3{font-size:1.18rem;margin:6px 0 8px}
.tl-item p{color:var(--muted);max-width:62ch}
.tl-item .tl-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.tl-tags span{font-size:.76rem;padding:5px 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--dim)}

/* ===== philosophy tabs (hex switcher) ===== */
.phil{display:grid;grid-template-columns:.85fr 1.15fr;gap:38px;align-items:center;margin-top:46px}
.phil-list{display:flex;flex-direction:column;gap:12px}
.phil-btn{display:flex;align-items:center;gap:14px;padding:15px 18px;border-radius:16px;border:1px solid var(--line);background:var(--surface);color:var(--muted);cursor:pointer;font:inherit;font-size:.98rem;text-align:start;transition:transform .35s var(--ease),border-color .35s,color .3s,background .35s}
.phil-btn i{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:11px;background:var(--grad-soft);border:1px solid var(--line);color:var(--honey-2);font-family:"Space Grotesk",sans-serif;font-size:.8rem;font-style:normal}
.phil-btn:hover{transform:translateX(-6px);border-color:var(--line-strong);color:var(--text)}
.phil-btn.is-on{color:var(--text);background:var(--surface-2);border-color:var(--honey);box-shadow:0 18px 44px -30px rgba(255,176,32,.9)}
.phil-panel{position:relative;padding:34px;border-radius:var(--radius);border:1px solid var(--line);background:linear-gradient(150deg,rgba(255,255,255,.05),rgba(255,255,255,.015));overflow:hidden;min-height:250px}
.phil-panel::before{content:"";position:absolute;inset-inline-end:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(168,85,247,.28),transparent 68%);filter:blur(10px)}
.phil-pane{position:absolute;inset:34px;opacity:0;transform:translateY(18px);pointer-events:none;transition:opacity .5s var(--ease),transform .5s var(--ease)}
.phil-pane.is-on{position:relative;inset:auto;opacity:1;transform:none;pointer-events:auto}
.phil-pane h3{font-size:1.35rem;margin-bottom:12px}
.phil-pane p{color:var(--muted)}
.phil-pane ul{margin-top:16px;display:grid;gap:9px}
.phil-pane li{position:relative;padding-inline-start:20px;color:var(--muted);font-size:.94rem}
.phil-pane li::before{content:"";position:absolute;inset-inline-start:0;top:12px;width:8px;height:9px;background:var(--grad);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}

/* ===== team ===== */
.team{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:22px;margin-top:46px}
.tcard{position:relative;padding:26px 24px 24px;border-radius:24px;border:1px solid var(--line);background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.014));overflow:hidden;cursor:pointer;transition:transform .5s var(--ease),border-color .4s,box-shadow .5s;opacity:0;transform:translateY(26px)}
.stagger.is-in .tcard,.tcard.is-in{opacity:1;transform:none;transition-delay:calc(var(--i) * 90ms)}
.tcard::after{content:"";position:absolute;inset:0;background:radial-gradient(320px circle at var(--mx,50%) var(--my,0%),rgba(255,176,32,.14),transparent 60%);opacity:0;transition:opacity .4s}
.tcard:hover{transform:translateY(-8px);border-color:var(--line-strong);box-shadow:0 34px 70px -44px rgba(168,85,247,.95)}
.tcard:hover::after{opacity:1}
.tcard-top{display:flex;align-items:center;gap:16px;position:relative;z-index:2}
.avatar{position:relative;width:74px;height:82px;flex:none;display:grid;place-items:center;background:var(--grad);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);transition:transform .5s var(--ease)}
.avatar span{position:absolute;inset:2px;display:grid;place-items:center;background:#150a26;clip-path:inherit;font-family:"Space Grotesk",sans-serif;font-size:1.3rem;color:var(--honey-2);letter-spacing:.04em}
.avatar img{position:absolute;inset:2px;width:calc(100% - 4px);height:calc(100% - 4px);object-fit:cover;clip-path:inherit;z-index:2}
.tcard:hover .avatar{transform:rotate(-6deg) scale(1.05)}
.tcard h3{font-size:1.08rem}
.tcard .role{display:block;color:var(--honey-2);font-size:.84rem;margin-top:4px}
.tcard-quote{position:relative;z-index:2;margin-top:16px;color:var(--muted);font-size:.92rem;line-height:1.95}
.tcard-more{position:relative;z-index:2;display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease)}
.tcard.is-open .tcard-more{grid-template-rows:1fr}
.tcard-more>div{overflow:hidden}
.tcard-more p{color:var(--muted);font-size:.9rem;padding-top:14px;margin-top:14px;border-top:1px solid var(--line)}
.tcard-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.tcard-tags span{font-size:.74rem;padding:4px 11px;border-radius:999px;border:1px solid var(--line);color:var(--dim)}
.tcard-toggle{position:relative;z-index:2;display:inline-flex;align-items:center;gap:8px;margin-top:16px;color:var(--text);font-size:.85rem;background:none;border:0;padding:0;font-family:inherit;cursor:pointer}
.tcard-toggle svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2;transition:transform .45s var(--ease)}
.tcard.is-open .tcard-toggle svg{transform:rotate(180deg)}

/* ===== culture marquee ===== */
.marq{position:relative;margin-top:44px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marq-track{display:flex;gap:14px;width:max-content;animation:marq 38s linear infinite}
.marq:hover .marq-track{animation-play-state:paused}
@keyframes marq{to{transform:translateX(50%)}}
.marq-item{padding:13px 22px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--muted);white-space:nowrap;font-size:.92rem}
.marq-item b{color:var(--honey-2);font-weight:600}

/* ===== stat band ===== */
.band{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px;margin-top:44px}
.band-cell{position:relative;padding:26px 22px;border-radius:20px;border:1px solid var(--line);background:var(--surface);overflow:hidden}
.band-cell .num{display:block;font-family:"Space Grotesk",sans-serif;font-size:2.1rem;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.band-cell small{color:var(--muted);font-size:.88rem}
.band-cell::before{content:"";position:absolute;inset-inline-end:-40px;bottom:-40px;width:110px;height:110px;border-radius:50%;background:radial-gradient(circle,rgba(255,176,32,.2),transparent 70%)}

/* ===== contact: channels ===== */
.channels{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;margin-top:44px}
.chan{position:relative;display:block;padding:24px;border-radius:22px;border:1px solid var(--line);background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.014));overflow:hidden;transition:transform .45s var(--ease),border-color .4s,box-shadow .45s}
.chan:hover{transform:translateY(-7px);border-color:var(--honey);box-shadow:0 30px 60px -42px rgba(255,176,32,.95)}
.chan-ico{width:44px;height:44px;display:grid;place-items:center;border-radius:14px;background:var(--grad-soft);border:1px solid var(--line);margin-bottom:14px}
.chan-ico svg{width:21px;height:21px;fill:none;stroke:var(--honey-2);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.chan h3{font-size:1rem}
.chan p{color:var(--muted);font-size:.88rem;margin-top:6px}
.chan .val{display:block;margin-top:12px;color:var(--text);font-size:.95rem}
.chan-copy{position:absolute;inset-inline-start:16px;top:18px;font-size:.72rem;color:var(--dim);border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:4px 10px;cursor:pointer;font-family:inherit;transition:color .3s,border-color .3s}
.chan-copy:hover{color:var(--honey-2);border-color:var(--honey)}
.chan-copy.is-done{color:var(--ok);border-color:rgba(74,222,128,.5)}

/* ===== contact form ===== */
.cform-wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:32px;margin-top:46px;align-items:start}
.cform{position:relative;padding:32px;border-radius:26px;border:1px solid var(--line);background:linear-gradient(155deg,rgba(255,255,255,.06),rgba(255,255,255,.015));overflow:hidden}
.cform::before{content:"";position:absolute;inset-inline-start:-70px;top:-70px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(214,51,140,.25),transparent 68%)}
.steps{position:relative;display:flex;align-items:center;gap:10px;margin-bottom:26px}
.step-pip{display:flex;align-items:center;gap:9px;color:var(--dim);font-size:.84rem}
.step-pip b{width:30px;height:34px;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);font-family:"Space Grotesk",sans-serif;font-size:.82rem;font-weight:600;transition:background .4s,color .4s}
.step-pip.is-on{color:var(--text)}
.step-pip.is-on b{background:var(--grad);color:#180a26}
.step-pip.is-done b{background:rgba(74,222,128,.18);color:var(--ok)}
.steps-sep{flex:1;height:1px;background:var(--line)}

.fstep{display:none;animation:paneIn .5s var(--ease-out)}
.fstep.is-on{display:block}
@keyframes paneIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.field{position:relative;margin-bottom:18px}
.field input,.field textarea,.field select{width:100%;padding:20px 16px 10px;border-radius:14px;border:1px solid var(--line);background:rgba(10,6,20,.5);color:var(--text);font:inherit;font-size:.95rem;outline:none;transition:border-color .3s,box-shadow .3s,background .3s}
.field textarea{min-height:132px;resize:vertical;line-height:1.9}
.field label{position:absolute;inset-inline-start:16px;top:15px;color:var(--dim);font-size:.94rem;pointer-events:none;transform-origin:inline-start top;transition:transform .28s var(--ease),color .28s}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--honey);box-shadow:0 0 0 4px rgba(255,176,32,.1)}
.field input:focus+label,.field textarea:focus+label,.field input:not(:placeholder-shown)+label,.field textarea:not(:placeholder-shown)+label{transform:translateY(-9px) scale(.76);color:var(--honey-2)}
.field.is-bad input,.field.is-bad textarea{border-color:#f0648c;box-shadow:0 0 0 4px rgba(240,100,140,.12)}
.field .err{display:block;margin-top:6px;font-size:.78rem;color:#f4839f;opacity:0;transform:translateY(-4px);transition:opacity .3s,transform .3s}
.field.is-bad .err{opacity:1;transform:none}

.tchips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px}
.tchip{padding:10px 16px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--muted);font:inherit;font-size:.88rem;cursor:pointer;transition:transform .3s var(--ease),color .3s,border-color .3s,background .3s}
.tchip:hover{transform:translateY(-3px);color:var(--text)}
.tchip.is-on{background:var(--grad-soft);border-color:var(--honey);color:var(--honey-2)}
.fnav{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
.form-note{margin-top:16px;color:var(--dim);font-size:.8rem}

.sent{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:34px;background:rgba(12,7,24,.93);backdrop-filter:blur(8px);opacity:0;pointer-events:none;transition:opacity .45s var(--ease)}
.sent.is-on{opacity:1;pointer-events:auto}
.sent-hex{width:88px;height:98px;margin:0 auto 18px;display:grid;place-items:center;background:var(--grad);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);animation:coreFloat 5s var(--ease) infinite}
.sent-hex svg{width:38px;height:38px;fill:none;stroke:#170a24;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40;animation:tick .7s var(--ease-out) .25s forwards}
@keyframes tick{to{stroke-dashoffset:0}}
.sent h3{font-size:1.3rem;margin-bottom:10px}
.sent p{color:var(--muted);max-width:44ch;margin-inline:auto}

/* aside: response + hours + map */
.caside{display:grid;gap:18px}
.panel{padding:24px;border-radius:22px;border:1px solid var(--line);background:var(--surface)}
.panel h3{font-size:1.02rem;margin-bottom:14px}
.live{display:inline-flex;align-items:center;gap:9px;font-size:.85rem;color:var(--muted)}
.live i{width:9px;height:9px;border-radius:50%;background:var(--ok);box-shadow:0 0 12px var(--ok);animation:pulseDot 2s var(--ease) infinite}
.live.is-off i{background:var(--honey);box-shadow:0 0 12px var(--honey)}
.meter{margin-top:16px}
.meter-row{display:flex;justify-content:space-between;font-size:.84rem;color:var(--muted);margin-bottom:7px}
.meter-bar{height:7px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden}
.meter-bar i{display:block;height:100%;width:0;background:var(--grad);border-radius:99px;transition:width 1.3s var(--ease-out)}

.map{position:relative;height:230px;border-radius:22px;border:1px solid var(--line);overflow:hidden;background:
  radial-gradient(circle at 60% 40%,rgba(168,85,247,.22),transparent 60%),
  linear-gradient(180deg,#140b28,#0c0719)}
.map::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(178,140,255,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(178,140,255,.14) 1px,transparent 1px);background-size:38px 38px;animation:mapPan 24s linear infinite}
@keyframes mapPan{to{background-position:38px 38px}}
.map-pin{position:absolute;inset-inline-start:52%;top:44%;width:16px;height:16px;border-radius:50%;background:var(--honey);box-shadow:0 0 0 6px rgba(255,176,32,.2),0 0 26px var(--honey)}
.map-pin::after{content:"";position:absolute;inset:-14px;border-radius:50%;border:1px solid rgba(255,176,32,.6);animation:ping 2.6s var(--ease) infinite}
@keyframes ping{0%{transform:scale(.6);opacity:1}100%{transform:scale(2.1);opacity:0}}
.map-label{position:absolute;inset-inline-start:16px;bottom:16px;padding:10px 15px;border-radius:14px;background:rgba(10,6,20,.78);border:1px solid var(--line);backdrop-filter:blur(8px);font-size:.86rem}
.map-label small{display:block;color:var(--dim);font-size:.76rem}

/* ===== FAQ ===== */
.faq{max-width:860px;margin:44px auto 0;display:grid;gap:12px}
.qa{border:1px solid var(--line);border-radius:18px;background:var(--surface);overflow:hidden;transition:border-color .35s,background .35s}
.qa.is-open{border-color:var(--line-strong);background:var(--surface-2)}
.qa-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:19px 22px;background:none;border:0;color:var(--text);font:inherit;font-size:.99rem;text-align:start;cursor:pointer}
.qa-q i{width:26px;height:26px;flex:none;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line);color:var(--honey-2);font-style:normal;transition:transform .4s var(--ease),background .35s}
.qa.is-open .qa-q i{transform:rotate(45deg);background:var(--grad-soft)}
.qa-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.qa.is-open .qa-a{grid-template-rows:1fr}
.qa-a>div{overflow:hidden}
.qa-a p{padding:0 22px 20px;color:var(--muted);font-size:.93rem}

/* ===== page transition veil ===== */
.veil{position:fixed;inset:0;z-index:400;background:var(--bg);pointer-events:none;opacity:0;transition:opacity .42s var(--ease)}
.veil.is-on{opacity:1}
body.is-booting .veil{opacity:1}

/* ===== responsive ===== */
@media (max-width:980px){
  .chero{padding:120px 0 40px}
  .chero-inner,.phil,.cform-wrap{grid-template-columns:1fr}
  .orbit{max-width:420px;margin-inline:auto}
  .phil-panel{min-height:0}
  .phil-pane{position:relative;inset:auto;display:none}
  .phil-pane.is-on{display:block}
}
@media (max-width:620px){
  .chero-title{font-size:clamp(1.7rem,7vw,2.2rem)}
  .cform,.phil-panel{padding:22px}
  .tl-item{padding-inline-end:44px}
  .steps{flex-wrap:wrap;gap:8px}
  .steps-sep{display:none}
  .orbit{max-width:320px;aspect-ratio:auto;display:flex;flex-direction:column;align-items:center;gap:10px;padding-block:18px}
  .orbit-ring{inset:auto;top:0;width:210px;height:210px}
  .orbit-ring--2{width:246px;height:246px;top:-18px}
  .orbit-core{width:150px;height:150px}
  .orbit-chip{position:static;transform:none;margin:0;font-size:.72rem;padding:6px 12px;animation:none;opacity:1}

}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .chero-title .ln>span{transform:none;opacity:1}
}

/* guard: no horizontal scroll on chapter pages */
html{overflow-x:hidden}
body{overflow-x:clip}
.marq{max-width:100%}