/* Spacode marketing site — shared styles (landing / cases / services / about).
   The vision page keeps its own css/styles.css. */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root{
  --bg:#0A0A14; --panel:rgba(140,150,255,.05); --line:rgba(140,150,255,.18);
  --indigo:#8C96FF; --violet:#C0B4FF; --green:#00FF66;
  --ink:#EDEDF2; --gray:#A6ACB8; --dim:#76767F;
  --mono:"JetBrains Mono",monospace;
  --sans:"Inter","Noto Sans TC",-apple-system,BlinkMacSystemFont,"PingFang TC","Microsoft JhengHei",sans-serif;
}
html{ scroll-behavior:smooth; }
body{ background:var(--bg); color:var(--ink); font-family:var(--sans); line-height:1.75; overflow-x:hidden; }
body::before{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(ellipse 70% 50% at 78% -10%, rgba(120,130,240,.16), transparent 60%),
    radial-gradient(ellipse 60% 60% at 10% 110%, rgba(155,140,255,.08), transparent 60%); }
a{ color:var(--indigo); text-decoration:none; }
a:hover{ color:var(--violet); }
a:focus-visible,button:focus-visible{ outline:2px solid var(--indigo); outline-offset:3px; }
em{ font-style:normal; color:var(--white,#fff); }

/* ===== nav ===== */
.nav{ position:fixed; top:0; left:0; right:0; z-index:50; display:flex; align-items:center; justify-content:space-between;
  padding:16px 5vw; background:rgba(10,10,20,.72); backdrop-filter:blur(12px); border-bottom:1px solid rgba(140,150,255,.1); }
.nav-logo{ font-family:var(--mono); font-size:1rem; color:#9aa; letter-spacing:2px; }
a.nav-logo:hover{ color:var(--ink); }
.nav-links{ display:flex; align-items:center; gap:clamp(14px,2.4vw,30px); }
.nav-links a{ font-size:.9rem; color:var(--gray); letter-spacing:.5px; }
.nav-links a:hover{ color:var(--ink); }
.nav-links a.active{ color:var(--ink); }
.nav-cta{ font-family:var(--mono); font-size:.8rem !important; color:var(--indigo) !important; border:1px solid var(--indigo);
  padding:8px 16px; letter-spacing:1px; transition:background .2s,color .2s; white-space:nowrap; }
.nav-cta:hover{ background:var(--indigo); color:#0A0A14 !important; }
.lang-btn{ font-family:var(--mono); font-size:.78rem; color:var(--gray); background:transparent; cursor:pointer;
  border:1px solid rgba(140,150,255,.3); border-radius:3px; padding:5px 10px; letter-spacing:1px; transition:color .2s,border-color .2s; }
.lang-btn:hover{ color:var(--ink); border-color:var(--indigo); }

/* ===== layout ===== */
.section{ max-width:1080px; margin:0 auto; padding:clamp(4rem,9vh,7rem) 5vw; }
.sec-label{ font-family:var(--mono); font-size:.76rem; letter-spacing:4px; color:var(--violet); margin-bottom:1.4rem; }
.sec-title{ font-weight:700; font-size:clamp(1.5rem,3.2vw,2.4rem); line-height:1.3; letter-spacing:-.02em; color:#fff; }
.sec-sub{ margin-top:1rem; color:var(--gray); max-width:42em; }

/* ===== hero ===== */
.hero{ max-width:1080px; margin:0 auto; padding:clamp(9rem,22vh,13rem) 5vw clamp(4rem,10vh,6rem); }
.hero h1{ font-weight:800; font-size:clamp(2.1rem,5.6vw,4rem); line-height:1.22; letter-spacing:-.03em; color:#fff; }
.hero h1 .accent{ color:var(--indigo); }
.hero .hero-sub{ margin-top:1.6rem; font-size:clamp(1rem,1.7vw,1.2rem); color:var(--gray); max-width:36em; }
.hero-ctas{ margin-top:2.6rem; display:flex; gap:1.2rem; flex-wrap:wrap; align-items:center; }
.btn-primary{ display:inline-block; font-family:var(--mono); font-size:clamp(.85rem,1.6vw,.98rem); letter-spacing:1.5px; cursor:pointer;
  color:#0A0A14; background:var(--indigo); border:1px solid var(--indigo); padding:15px 32px; transition:box-shadow .2s,transform .2s; }
.btn-primary:hover{ box-shadow:0 0 32px rgba(140,150,255,.45); color:#0A0A14; transform:translateY(-1px); }
.btn-ghost{ display:inline-block; font-family:var(--mono); font-size:.85rem; letter-spacing:1px;
  color:var(--gray); border:1px solid rgba(140,150,255,.3); padding:14px 24px; transition:color .2s,border-color .2s; }
.btn-ghost:hover{ color:var(--ink); border-color:var(--indigo); }

/* ===== cards ===== */
.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.2rem; margin-top:2.6rem; }
.card{ background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:1.8rem 1.6rem; }
.card h3{ font-size:1.08rem; font-weight:600; color:#fff; margin-bottom:.7rem; }
.card p{ font-size:.92rem; color:var(--gray); }
.card .num{ font-family:var(--mono); font-size:.72rem; letter-spacing:3px; color:var(--violet); display:block; margin-bottom:1rem; }
.card-link{ display:inline-block; margin-top:2rem; font-family:var(--mono); font-size:.85rem; letter-spacing:1px; }

/* ===== report mock ===== */
.proof-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; margin-top:2.6rem; }
.report-mock{ font-family:var(--mono); background:rgba(6,8,16,.9); border:1px solid var(--line); border-radius:8px;
  box-shadow:0 24px 70px rgba(0,0,0,.55), 0 0 50px rgba(140,150,255,.06); overflow:hidden; font-size:clamp(.7rem,1.3vw,.84rem); }
.report-head{ padding:11px 16px; color:var(--dim); font-size:.72rem; letter-spacing:1px; border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:8px; }
.report-head::before{ content:""; width:9px; height:9px; border-radius:50%; background:var(--indigo); box-shadow:16px 0 0 #262637,32px 0 0 #262637; }
.report-body{ padding:18px 18px 20px; line-height:2.15; color:var(--gray); }
.report-body b{ color:#fff; font-weight:500; }
.report-body .ok{ color:var(--green); }
.report-body .flag{ color:#FFC24B; }
.report-body .rl{ display:flex; justify-content:space-between; gap:1.5rem; border-bottom:1px dashed rgba(140,150,255,.12); }
.report-body .rl:last-child{ border-bottom:none; }

/* ===== trust strip ===== */
.trust{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.2rem; margin-top:2.6rem; }
.trust .t{ border-left:2px solid var(--indigo); padding:.3rem 0 .3rem 1.3rem; }
.trust .t h3{ font-size:1rem; color:#fff; font-weight:600; }
.trust .t p{ margin-top:.4rem; font-size:.88rem; color:var(--gray); }

/* ===== contact form ===== */
.contact{ scroll-margin-top:90px; }
.contact form{ margin-top:2.4rem; max-width:560px; display:flex; flex-direction:column; gap:1.4rem; }
.contact label{ display:flex; flex-direction:column; gap:.5rem; font-size:.9rem; color:var(--ink); }
.contact textarea,.contact input,.contact select{ font-family:var(--sans); font-size:.95rem; color:var(--ink);
  background:rgba(140,150,255,.06); border:1px solid var(--line); border-radius:6px; padding:12px 14px; transition:border-color .2s; }
.contact textarea:focus,.contact input:focus,.contact select:focus{ outline:none; border-color:var(--indigo); }
.contact select{ appearance:none; background-image:linear-gradient(45deg,transparent 49%,var(--gray) 50%),linear-gradient(135deg,var(--gray) 50%,transparent 51%);
  background-position:calc(100% - 20px) 55%,calc(100% - 15px) 55%; background-size:5px 5px; background-repeat:no-repeat; }
.contact select option{ background:#12121f; color:var(--ink); }
.contact .btn-primary{ align-self:flex-start; }
.form-note{ font-size:.78rem; color:var(--dim); }
.form-ok{ font-size:.88rem; color:var(--green); font-family:var(--mono); }
.form-fail{ font-size:.88rem; color:#FF7A88; font-family:var(--mono); }

/* ===== CTA band ===== */
.cta-band{ max-width:1080px; margin:0 auto clamp(4rem,9vh,7rem); padding:clamp(3rem,6vh,4.5rem) 5vw; text-align:center;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:radial-gradient(ellipse 60% 100% at 50% 50%, rgba(140,150,255,.07), transparent 70%); }
.cta-band h2{ font-size:clamp(1.4rem,3vw,2rem); color:#fff; letter-spacing:-.01em; }
.cta-band p{ margin-top:.8rem; color:var(--gray); }
.cta-band .btn-primary{ margin-top:2rem; }

/* ===== cases ===== */
.notice{ margin-top:2rem; font-size:.85rem; color:var(--gray); background:rgba(255,194,75,.06);
  border:1px solid rgba(255,194,75,.25); border-radius:6px; padding:.9rem 1.2rem; max-width:46em; }
.case{ margin-top:2.8rem; background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:2rem clamp(1.4rem,3vw,2.4rem); }
.case-top{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-bottom:1.6rem; }
.case-top h3{ font-size:clamp(1.1rem,2.2vw,1.4rem); color:#fff; font-weight:700; }
.chip{ font-family:var(--mono); font-size:.66rem; letter-spacing:1.5px; color:#FFC24B;
  border:1px solid rgba(255,194,75,.4); border-radius:3px; padding:3px 9px; }
.case-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.6rem; }
.case-grid h4{ font-family:var(--mono); font-size:.7rem; letter-spacing:2.5px; color:var(--violet); font-weight:500; margin-bottom:.7rem; }
.case-grid p{ font-size:.9rem; color:var(--gray); }
.case-grid p b{ color:#fff; font-weight:600; }
.honest{ margin-top:3rem; border-left:2px solid var(--green); padding:.4rem 0 .4rem 1.5rem; max-width:46em; }
.honest h3{ color:#fff; font-size:1.1rem; }
.honest p{ margin-top:.6rem; color:var(--gray); font-size:.94rem; }

/* ===== services ===== */
.svc{ margin-top:3rem; padding-top:3rem; border-top:1px solid var(--line); display:grid;
  grid-template-columns:minmax(240px,1.1fr) 2fr; gap:2.5rem; }
.svc:first-of-type{ border-top:none; padding-top:0; }
.svc .num{ font-family:var(--mono); font-size:.72rem; letter-spacing:3px; color:var(--violet); display:block; margin-bottom:.9rem; }
.svc h3{ font-size:clamp(1.15rem,2.4vw,1.5rem); color:#fff; font-weight:700; }
.svc .who{ margin-top:.9rem; font-size:.9rem; color:var(--gray); }
.svc-meta{ display:flex; flex-direction:column; gap:1.4rem; }
.svc-meta h4{ font-family:var(--mono); font-size:.7rem; letter-spacing:2.5px; color:var(--violet); font-weight:500; margin-bottom:.6rem; }
.svc-meta ul{ list-style:none; }
.svc-meta li{ font-size:.92rem; color:var(--gray); padding-left:1.4em; position:relative; margin-top:.35rem; }
.svc-meta li::before{ content:"✓"; position:absolute; left:0; color:var(--green); font-family:var(--mono); }
.svc-meta .kv{ font-size:.92rem; color:var(--ink); font-family:var(--mono); }
.price-note{ margin-top:3.5rem; background:var(--panel); border:1px solid var(--line); border-radius:8px;
  padding:1.6rem 1.8rem; color:var(--gray); font-size:.92rem; max-width:52em; }
.price-note b{ color:#fff; }

/* ===== FAQ ===== */
.faq-list{ margin-top:2.4rem; max-width:760px; }
.faq-list details{ border-bottom:1px solid var(--line); padding:1.2rem 0; }
.faq-list summary{ cursor:pointer; font-weight:600; color:var(--ink); font-size:1rem; list-style:none; position:relative; padding-right:2rem; }
.faq-list summary::-webkit-details-marker{ display:none; }
.faq-list summary::after{ content:"+"; position:absolute; right:.2rem; top:0; color:var(--indigo); font-family:var(--mono); transition:transform .2s; }
.faq-list details[open] summary::after{ transform:rotate(45deg); }
.faq-list details p{ margin-top:.9rem; color:var(--gray); font-size:.92rem; max-width:44em; }

/* ===== about ===== */
.about-lead{ font-size:clamp(1.25rem,2.6vw,1.8rem); font-weight:300; color:var(--ink); line-height:1.7; max-width:30em; }
.about-lead em{ color:var(--indigo); font-weight:500; }
.about-body{ margin-top:2.4rem; max-width:44em; display:flex; flex-direction:column; gap:1.4rem; color:var(--gray); }
.vision-card{ margin-top:4rem; background:linear-gradient(120deg, rgba(0,255,102,.05), rgba(140,150,255,.08));
  border:1px solid var(--line); border-radius:10px; padding:2.4rem clamp(1.4rem,3vw,2.6rem);
  display:flex; justify-content:space-between; align-items:center; gap:2rem; flex-wrap:wrap; }
.vision-card h3{ font-family:var(--mono); color:#fff; font-size:1.05rem; letter-spacing:.5px; }
.vision-card p{ margin-top:.7rem; color:var(--gray); font-size:.92rem; max-width:34em; }

/* ===== footer ===== */
.site-footer{ border-top:1px solid var(--line); margin-top:2rem; padding:3rem 5vw 2rem; }
.foot-inner{ max-width:1080px; margin:0 auto; display:flex; justify-content:space-between; gap:2rem; flex-wrap:wrap; }
.foot-tag{ margin-top:.8rem; font-size:.85rem; color:var(--dim); }
.foot-links{ display:flex; gap:1.8rem; flex-wrap:wrap; align-items:center; }
.foot-links a{ font-size:.85rem; color:var(--gray); }
.foot-links a:hover{ color:var(--ink); }
.foot-copy{ max-width:1080px; margin:2.5rem auto 0; font-family:var(--mono); font-size:.72rem; color:var(--dim); letter-spacing:1px; }

/* ===== responsive ===== */
@media (max-width:820px){
  .proof-wrap{ grid-template-columns:1fr; }
  .svc{ grid-template-columns:1fr; gap:1.6rem; }
}
@media (max-width:640px){
  .nav{ padding:12px 4vw; }
  .nav-links{ gap:12px; }
  .nav-links a{ font-size:.8rem; }
  .nav-cta{ display:none; } /* mobile: keep nav light; CTA lives in page flow */
  .hero{ padding-top:8rem; }
  .hero-ctas .btn-ghost{ display:none; }
}