/* ============================================================
   PromptForge 提示词工坊 — 单页样式
   设计来源：Ardot 画布 1440 宽设计稿
   ============================================================ */

:root{
  /* 背景 */
  --bg:            #07080A;
  --bg-examples:   #0A0C10;
  --bg-footer:     #06070A;

  /* 面 */
  --surface:       #0C0F14;
  --surface-2:     #0E1116;
  --surface-3:     #0B0E13;
  --surface-4:     #0A0D11;
  --inset:         #080A0D;

  /* 描边 */
  --line:          #1B2027;
  --line-strong:   #21262E;
  --line-soft:     #171B21;
  --line-faint:    #14171D;

  /* 文本 */
  --text:          #F4F5F6;
  --text-2:        #D2D6DC;
  --text-3:        #C9CDD3;
  --muted:         #9AA1AB;
  --dim:           #8A9099;
  --faint:         #5F6672;
  --faint-2:       #4E5561;

  /* 强调色 */
  --accent:        #CDFF3F;
  --accent-ink:    #0A0B0D;
  --accent-soft:   #B9CE7E;
  --accent-deep:   #7C8A3E;
  --accent-glow:   rgba(205, 255, 63, .30);

  /* 字体：本地系统字体优先，零外部依赖 */
  --font-sans: "Noto Sans SC", "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace;
  --font-display: "Inter Tight", "Noto Sans SC", "PingFang SC", system-ui, sans-serif;

  --container: 1440px;
  --gutter: 64px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body{
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1,h2,h3,p,ul,figure{ margin: 0; }
ul{ padding: 0; list-style: none; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; color: inherit; }
svg{ display: block; }
:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; }

.container{
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- 通用按钮 ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 52px;
  padding: 0 24px;
  border: 0;
  border-radius: 12px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background .22s ease, border-color .22s ease, color .22s ease, transform .22s ease;
}
.btn--primary{
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 12px 34px -6px var(--accent-glow);
}
.btn--primary:hover{ background: #DAFF6B; transform: translateY(-1px); }
.btn--primary:active{ transform: translateY(0); }
.btn--ghost{
  background: transparent;
  border: 1px solid #292E38;
  color: var(--text-3);
  font-weight: 500;
}
.btn--ghost:hover{ border-color: #3C4350; color: var(--text); }
.btn--sm{ height: 42px; padding: 0 18px; font-size: 13px; border-radius: 10px; }

/* ============================================================
   Header
   ============================================================ */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(7, 8, 10, .86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
  transition: border-color .3s ease, background .3s ease;
}
.site-header.is-scrolled{ border-bottom-color: #22272F; }

.site-header__inner{
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.logo{ display: inline-flex; align-items: center; gap: 10px; }
.logo__mark{ flex: none; }
.logo__word{
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--text);
}

.nav{ display: flex; align-items: center; gap: 30px; }
.nav a{
  font-size: 14px;
  color: var(--muted);
  transition: color .2s ease;
}
.nav a:hover{ color: var(--text); }

.header-actions{ display: flex; align-items: center; gap: 20px; }
.login{ font-size: 14px; font-weight: 500; color: var(--text-3); transition: color .2s ease; }
.login:hover{ color: var(--text); }

.menu-btn{
  display: none;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid #262B34;
  border-radius: 10px;
  cursor: pointer;
}

.mobile-menu{
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 8px 24px 20px;
  border-top: 1px solid var(--line-soft);
}
.mobile-menu.is-open{ display: flex; }
.mobile-menu a{
  padding: 12px 4px;
  font-size: 15px;
  color: var(--muted);
  border-bottom: 1px solid #11151A;
}
.mobile-menu__actions{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 16px;
}

/* ============================================================
   Hero
   ============================================================ */
.hero{
  position: relative;
  overflow: hidden;
  background: var(--bg);
  padding: 96px 0;
}
/* 背景光晕：柠檬绿（右上）+ 紫（左下） */
.hero::before{
  content: "";
  position: absolute;
  top: -300px;
  right: -80px;
  width: 640px; height: 640px;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(205, 255, 63, .28), rgba(205, 255, 63, 0) 68%);
  filter: blur(60px);
  pointer-events: none;
}
.hero::after{
  content: "";
  position: absolute;
  left: -170px;
  top: 260px;
  width: 520px; height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(107, 92, 255, .22), rgba(107, 92, 255, 0) 68%);
  filter: blur(70px);
  pointer-events: none;
}

.hero__inner{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 600px;
  gap: 48px;
  align-items: center;
}

.hero__copy{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
}

.badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  background: #101609;
  border: 1px solid #3D4E1A;
  font-size: 12px;
  font-weight: 500;
  color: #D7E6A8;
}
.badge__dot{ width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

.hero__title{
  font-family: var(--font-sans);
  font-size: 64px;
  font-weight: 900;
  line-height: 1.19;
  letter-spacing: -1px;
  color: var(--text);
}
.hero__title em{
  display: block;
  font-style: normal;
  color: var(--accent);
}

.hero__sub{
  max-width: 520px;
  font-size: 16px;
  line-height: 1.8;
  color: var(--muted);
}

.hero__cta{ display: flex; flex-wrap: wrap; gap: 14px; }

.hero__trust{
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--faint);
}

/* ---------- Composer 面板 ---------- */
.composer{
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 40px 90px -20px rgba(0, 0, 0, .55);
}

.composer__bar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 46px;
  padding: 0 16px;
  background: var(--surface-4);
  border-bottom: 1px solid var(--line-soft);
}
.composer__dots{ display: flex; gap: 6px; }
.composer__dots i{
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #262C33;
}
.composer__dots i:first-child{ background: var(--accent); }
.composer__path{
  font-family: var(--font-mono);
  font-size: 11px;
  color: #626A76;
}
.composer__chip{
  padding: 4px 8px;
  border-radius: 6px;
  background: #141A0D;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  color: var(--accent);
}

.composer__body{
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
}

.field{ display: flex; flex-direction: column; gap: 9px; }
.field__label{
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 500;
  color: #6C7480;
}
.field__label b{
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
}
.field__box{
  padding: 14px;
  border: 1px solid #1C212A;
  border-radius: 10px;
  background: var(--inset);
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-2);
}
.field__box--code{
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 2;
  color: #A8B0BA;
  white-space: pre-wrap;
}

.chips{ display: flex; flex-wrap: wrap; gap: 6px; }
.chips li{
  display: flex;
  align-items: center;
  height: 24px;
  padding: 0 9px;
  border-radius: 6px;
  background: #121A0B;
  border: 1px solid #2E3B17;
  font-size: 10px;
  font-weight: 500;
  color: var(--accent-soft);
}

.composer__foot{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.composer__foot-left{ display: flex; gap: 10px; }
.composer__foot .btn--sm{ height: 36px; padding: 0 15px; font-size: 12px; border-radius: 9px; gap: 7px; }
.composer__time{
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--faint-2);
}

/* ============================================================
   Section 通用
   ============================================================ */
.capabilities{ padding: 100px 0; background: var(--bg); }
.examples{ padding: 100px 0; background: var(--bg-examples); }

.section-head{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 44px;
}
.section-head__copy{
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.eyebrow{
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1px;
  color: var(--accent-deep);
}
.section-title{
  font-size: 34px;
  font-weight: 900;
  line-height: 1.41;
  letter-spacing: -.5px;
  color: var(--text);
}
.section-desc{
  max-width: 560px;
  font-size: 14px;
  line-height: 1.86;
  color: var(--dim);
}
.section-head__btn{ flex: none; }

/* ============================================================
   Capabilities
   ============================================================ */
.bento{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 424px;
  gap: 20px;
}
.bento-row2{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 44px;
}

.card{
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color .25s ease, transform .25s ease;
}
.card:hover{ border-color: #29303A; transform: translateY(-2px); }

.icon{ width: 26px; height: 26px; flex: none; }
.card__title{
  font-size: 21px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -.2px;
  color: var(--text);
}
.card--sm .card__title{ font-size: 19px; }
.card__desc{
  font-size: 13px;
  line-height: 1.85;
  color: var(--dim);
}
.card__desc--wide{ max-width: 460px; }

.pills{ display: flex; flex-wrap: wrap; gap: 8px; }
.pill{
  display: flex;
  align-items: center;
  height: 30px;
  padding: 0 11px;
  border-radius: 8px;
  background: #12180B;
  border: 1px solid #2E3B17;
  font-size: 11px;
  font-weight: 500;
  color: var(--accent-soft);
}

.model-chips{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.model-chip{
  display: flex;
  align-items: center;
  height: 24px;
  padding: 0 8px;
  border-radius: 6px;
  background: #14181F;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
}

/* ============================================================
   Examples
   ============================================================ */
.tabs{
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid #1F242C;
  border-radius: 11px;
  background: #101319;
  flex: none;
}
.tabs button{
  height: 32px;
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.tabs button:hover{ color: var(--text); }
.tabs button[aria-selected="true"]{
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
}

.compare{
  display: grid;
  grid-template-columns: 500px minmax(0, 1fr);
  min-height: 300px;
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
}
.compare__pane{
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px;
}
.compare__pane--after{
  background: #0C1207;
  border-left: 1px solid var(--line);
}
.compare__label{
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .6px;
  color: #6C7480;
}
.compare__label--accent{ font-weight: 700; color: var(--accent); }
.compare__quote{
  font-size: 17px;
  font-weight: 500;
  line-height: 1.76;
  color: var(--text-3);
}
.compare__note{
  font-size: 12px;
  line-height: 1.9;
  color: var(--faint);
}
.compare__code{
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 2;
  color: #C2CFA8;
  white-space: pre-wrap;
}
.compare__foot{
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  color: #6B7A50;
}

.example-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 38px;
}

.ex-card{
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color .25s ease, transform .25s ease;
}
.ex-card:hover{ border-color: #29303A; transform: translateY(-2px); }
.ex-card__head{
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .6px;
  color: var(--accent-deep);
}
.ex-card__ask{
  font-size: 13px;
  font-weight: 500;
  line-height: 1.85;
  color: var(--text-2);
}
.ex-card__rule{ height: 1px; background: var(--line); }
.ex-card__out{
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.9;
  color: var(--muted);
  white-space: pre-wrap;
}
.ex-card__foot{
  margin-top: auto;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  color: var(--accent);
  text-align: left;
  cursor: pointer;
  transition: opacity .2s ease;
}
.ex-card__foot:hover{ opacity: .7; }

/* ============================================================
   Footer
   ============================================================ */
.site-footer{
  background: var(--bg-footer);
  border-top: 1px solid var(--line-soft);
}
.site-footer__inner{
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding-top: 56px;
  padding-bottom: 32px;
}
.footer-word{
  font-family: var(--font-display);
  font-size: clamp(44px, 9vw, 124px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.05em;
  color: #0F1218;
  user-select: none;
  overflow: hidden;
  white-space: nowrap;
}

.footer-top{
  display: flex;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.footer-brand{
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 340px;
}
.footer-tag{ font-size: 13px; line-height: 1.85; color: #6E7681; }
.footer-mail{ font-family: var(--font-mono); font-size: 11px; color: var(--faint-2); }

.footer-links{ display: flex; gap: 64px; flex-wrap: wrap; }
.footer-col{ display: flex; flex-direction: column; gap: 12px; }
.footer-col h3{
  font-size: 12px;
  font-weight: 500;
  color: #6C7480;
}
.footer-col a{ font-size: 13px; color: var(--muted); transition: color .2s ease; }
.footer-col a:hover{ color: var(--text); }

/* ---------- 友情链接 ---------- */
.friend-links{
  display: flex;
  align-items: flex-start;
  gap: 28px;
  padding-top: 26px;
  border-top: 1px solid var(--line-faint);
}
.friend-links__head{
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 0 0 auto;
}
.friend-links__label{
  font-size: 12px;
  font-weight: 500;
  color: #6C7480;
  line-height: 1.5;
}
.friend-links__meta{
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .08em;
  color: var(--accent-deep);
  line-height: 1.5;
}
.friend-links__list{
  display: flex;
  flex-wrap: wrap;
  gap: 9px 26px;
  padding-top: 1px;
  min-height: 18px;
}
.friend-links__list a{
  font-size: 12px;
  line-height: 18px;
  color: var(--faint);
  transition: color .2s ease;
  word-break: keep-all;
}
.friend-links__list a:hover{ color: var(--accent); }
.friend-links__list .friend-links__apply{ color: var(--accent-deep); }
.friend-links__list .friend-links__apply:hover{ color: var(--accent); }

.footer-bottom{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line-faint);
}
.copyright{ font-size: 11px; color: var(--faint-2); }
.legal{ display: flex; gap: 20px; }
.legal a{ font-size: 11px; color: var(--faint); transition: color .2s ease; }
.legal a:hover{ color: var(--muted); }

/* ============================================================
   入场动效
   ============================================================ */
[data-reveal]{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s cubic-bezier(.22, .61, .36, 1),
              transform .7s cubic-bezier(.22, .61, .36, 1);
}
[data-reveal].is-in{ opacity: 1; transform: none; }

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 1280px){
  :root{ --gutter: 48px; }
  .hero__inner{ grid-template-columns: minmax(0, 1fr) 520px; gap: 40px; }
  .hero__title{ font-size: 54px; letter-spacing: -.8px; }
  .bento{ grid-template-columns: minmax(0, 1fr) 360px; }
  .compare{ grid-template-columns: 420px minmax(0, 1fr); }
}

@media (max-width: 1080px){
  .nav{ display: none; }
  .header-actions{ display: none; }
  .menu-btn{ display: inline-flex; }
  .mobile-menu{ display: none; }

  .hero{ padding: 72px 0 80px; }
  .hero__inner{
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
    justify-items: start;
  }
  .composer{ width: 100%; max-width: 620px; }

  .bento{ grid-template-columns: minmax(0, 1fr); }
  .bento-row2{ grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 20px; }

  .section-head{ flex-direction: column; align-items: flex-start; gap: 24px; }
  .tabs{ align-self: flex-start; }

  .compare{ grid-template-columns: minmax(0, 1fr); }
  .compare__pane--after{
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .example-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-links{ gap: 48px; }
}

@media (max-width: 760px){
  :root{ --gutter: 24px; }

  .site-header__inner{ height: 64px; }

  .hero{ padding: 56px 0 64px; }
  .hero__copy{ gap: 22px; }
  .hero__title{ font-size: 38px; line-height: 1.24; letter-spacing: -.4px; }
  .hero__sub{ font-size: 15px; line-height: 1.78; }
  .hero__trust{ font-size: 11px; line-height: 1.9; }
  .btn{ height: 48px; padding: 0 20px; font-size: 14px; }
  .btn--sm{ height: 40px; padding: 0 16px; font-size: 13px; }

  .composer__body{ padding: 16px; }
  .field__box{ padding: 12px; }
  .field__box--code{ font-size: 10.5px; line-height: 1.95; }
  .composer__foot{ flex-wrap: wrap; gap: 12px; }
  .composer__time{ display: none; }

  .capabilities,.examples{ padding: 64px 0; }
  .section-head{ margin-bottom: 28px; gap: 20px; }
  .section-title{ font-size: 26px; line-height: 1.35; }
  .section-desc{ font-size: 13px; }

  .bento-row2{ grid-template-columns: minmax(0, 1fr); }
  .card{ padding: 22px; }

  .compare__pane{ padding: 22px; }
  .compare__quote{ font-size: 15px; }
  .example-grid{ grid-template-columns: minmax(0, 1fr); margin-top: 28px; }

  .site-footer__inner{ gap: 28px; padding-top: 40px; padding-bottom: 24px; }
  .footer-top{ flex-direction: column; gap: 32px; }
  .footer-links{ gap: 40px 48px; }
  .friend-links{ flex-direction: column; gap: 13px; padding-top: 22px; }
  .friend-links__list{ gap: 8px 20px; }
  .footer-bottom{ flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ---------- 语义降级：尊重系统减少动效 ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ animation-duration: .001ms !important; transition-duration: .001ms !important; }
  [data-reveal]{ opacity: 1; transform: none; }
}