/* ============================================================
   云帆网络 · 海洋粗野主义 (Oceanic Brutalism) 共享样式
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&family=Space+Mono:wght@400;700&family=Noto+Sans+SC:wght@400;500;700;900&family=Noto+Serif+SC:wght@700;900&display=swap');

:root{
  --navy:#0A1A2F;        /* 深海军蓝 主背景 */
  --navy-2:#0E2440;      /* 卡片底 */
  --navy-3:#06121F;      /* 更深 */
  --paper:#F3EAD6;       /* 暖纸 主亮色（非纯白）*/
  --paper-2:#E7DABC;
  --orange:#FF5A1F;      /* 信号橙 帆船橙 */
  --orange-d:#D8430F;
  --cyan:#14E0C0;        /* 电青 极小点缀 */
  --ink:#0A1A2F;         /* 纸面文字 */
  --text:#E9E2D2;        /* 深底文字 */
  --muted:#92A6BC;       /* 弱化文字 */
  --line:rgba(243,234,214,.14);
  --line-2:rgba(243,234,214,.26);

  --f-display:'Syne','Noto Sans SC',sans-serif;
  --f-sans:'Noto Sans SC',system-ui,sans-serif;
  --f-serif:'Noto Serif SC',serif;
  --f-mono:'Space Mono',monospace;

  --shadow:8px 8px 0 var(--orange);
  --shadow-cyan:8px 8px 0 var(--cyan);
  --maxw:1200px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--f-sans);
  background:var(--navy);
  color:var(--text);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
ul{list-style:none}

/* 氛围：噪点 + 径向光晕（绝不用纯色背景） */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(1100px 700px at 78% -8%, rgba(255,90,31,.16), transparent 60%),
    radial-gradient(900px 600px at 8% 12%, rgba(20,224,192,.08), transparent 60%);
}
body::after{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;position:relative;z-index:2}
.sec{padding:104px 0;position:relative;z-index:2}
.sec--paper{background:var(--paper);color:var(--ink)}
.sec--navy2{background:var(--navy-2)}

/* ---------- 导航 ---------- */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(10,26,47,.92);
  backdrop-filter:blur(6px);
  border-bottom:2px solid var(--line-2);
}
.nav__in{max-width:var(--maxw);margin:0 auto;padding:14px 28px;
  display:flex;align-items:center;justify-content:space-between;gap:18px}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--f-display);font-weight:800;letter-spacing:.5px}
.brand__mark{width:34px;height:34px;flex:0 0 auto}
.brand__name{font-size:18px;color:var(--paper)}
.brand__name b{color:var(--orange)}
.nav__links{display:flex;align-items:center;gap:4px}
.nav__links a{
  font-size:14.5px;padding:8px 14px;color:var(--muted);
  border:2px solid transparent;transition:.18s;font-weight:500;
}
.nav__links a:hover{color:var(--paper)}
.nav__links a.active{color:var(--navy);background:var(--orange);font-weight:700}
.nav__cta{
  font-family:var(--f-mono);font-size:13px;font-weight:700;
  background:var(--orange);color:var(--navy);padding:9px 16px;
  border:2px solid var(--orange);transition:.18s;
}
.nav__cta:hover{background:var(--cyan);border-color:var(--cyan)}
.nav__burger{display:none;background:none;border:2px solid var(--line-2);
  width:42px;height:38px;cursor:pointer;flex-direction:column;gap:5px;align-items:center;justify-content:center}
.nav__burger span{display:block;width:20px;height:2px;background:var(--paper)}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--f-mono);font-weight:700;font-size:15px;
  padding:15px 26px;border:2px solid var(--orange);
  background:var(--orange);color:var(--navy);
  cursor:pointer;transition:.16s;letter-spacing:.5px;
}
.btn:hover{transform:translate(-3px,-3px);box-shadow:var(--shadow)}
.btn--ghost{background:transparent;color:var(--paper);border-color:var(--line-2)}
.btn--ghost:hover{border-color:var(--orange);box-shadow:8px 8px 0 var(--orange)}
.btn--cyan{background:var(--cyan);border-color:var(--cyan)}
.btn--cyan:hover{box-shadow:var(--shadow-cyan)}
.btn--ink{background:var(--navy);color:var(--paper);border-color:var(--navy)}
.btn--sm{padding:10px 18px;font-size:13px}

/* ---------- 章节标题 ---------- */
.sec-no{font-family:var(--f-mono);font-size:13px;font-weight:700;color:var(--orange);letter-spacing:2px}
.sec--paper .sec-no{color:var(--orange-d)}
.sec-title{
  font-family:var(--f-sans);font-weight:900;
  font-size:clamp(30px,4.6vw,52px);line-height:1.08;margin:10px 0 18px;
  letter-spacing:-.5px;
}
.sec-title .em{color:var(--orange)}
.sec--paper .sec-title .em{color:var(--orange-d)}
.sec-sub{font-size:16px;color:var(--muted);max-width:620px}
.sec--paper .sec-sub{color:#5d564a}
.kicker{display:inline-block;font-family:var(--f-mono);font-size:12px;font-weight:700;
  letter-spacing:2px;color:var(--orange);border:1px solid var(--line-2);padding:5px 12px;margin-bottom:14px}

/* ---------- 跑马灯（8环视觉签名）---------- */
.marquee{
  border-top:2px solid var(--orange);border-bottom:2px solid var(--orange);
  background:var(--orange);overflow:hidden;white-space:nowrap;padding:14px 0;
}
.marquee__track{display:inline-block;animation:scrollx 26s linear infinite}
.marquee__track span{
  font-family:var(--f-display);font-weight:800;font-size:26px;color:var(--navy);
  padding:0 26px;letter-spacing:1px;
}
.marquee__track span i{font-style:normal;color:var(--navy-3);padding:0 8px;font-size:20px}
@keyframes scrollx{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- HERO ---------- */
.hero{position:relative;padding:72px 0 64px;z-index:2}
.hero__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center}
.hero__tag{font-family:var(--f-mono);font-size:13px;color:var(--cyan);letter-spacing:2px;margin-bottom:18px}
.hero h1{
  font-family:var(--f-sans);font-weight:900;
  font-size:clamp(38px,6.2vw,76px);line-height:1.02;letter-spacing:-1px;margin-bottom:8px;
}
.hero h1 .o{color:var(--orange)}
.hero__lead{font-size:18px;color:var(--muted);max-width:520px;margin:22px 0 30px}
.hero__lead b{color:var(--paper)}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap}
.hero__trust{display:flex;gap:26px;flex-wrap:wrap;margin-top:34px;
  font-family:var(--f-mono);font-size:12.5px;color:var(--muted)}
.hero__trust b{color:var(--paper);font-size:16px}
.hero__compass{position:relative;display:flex;justify-content:center;align-items:center}
.hero__compass .ring-label{position:absolute;font-family:var(--f-mono);font-size:12px;letter-spacing:2px;color:var(--muted)}

/* ---------- 罗盘 SVG ---------- */
.compass{width:min(420px,90%);height:auto;display:block}
.compass .c-fixed-line{stroke:var(--line-2);stroke-width:1.5}
.compass .c-ring{fill:none;stroke:var(--line-2);stroke-width:2}
.compass .c-ring-outer{fill:none;stroke:var(--orange);stroke-width:2.5}
.compass .c-tick{stroke:var(--muted);stroke-width:2}
.compass .c-card{fill:var(--paper);font-family:var(--f-display);font-weight:800;font-size:20px}
.compass .c-card-sub{fill:var(--cyan);font-family:var(--f-mono);font-size:11px}
.compass .c-dot{fill:var(--orange)}
/* 仅中央帆船旋转，东西南北固定 */
.compass-rotor{
  transform-box:view-box;transform-origin:200px 200px;
  animation:spin 26s linear infinite;
}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* ---------- 通用卡片（硬边硬影）---------- */
.card{
  background:var(--navy-2);border:2px solid var(--line-2);
  padding:28px;transition:.18s;position:relative;
}
.card:hover{transform:translate(-4px,-4px);box-shadow:var(--shadow);border-color:var(--orange)}
.card__no{font-family:var(--f-mono);font-size:13px;color:var(--orange);font-weight:700}
.card h3{font-size:21px;font-weight:900;margin:8px 0 12px}
.card p{color:var(--muted);font-size:15px}
.card .tag{display:inline-block;font-family:var(--f-mono);font-size:11px;color:var(--cyan);
  border:1px solid var(--line-2);padding:3px 8px;margin-top:14px;letter-spacing:1px}

/* ---------- 客户分层 ---------- */
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.tier{border:2px solid var(--line-2);background:var(--navy-2);padding:24px;transition:.18s;position:relative;overflow:hidden}
.tier:hover{border-color:var(--orange);transform:translateY(-4px)}
.tier__badge{font-family:var(--f-mono);font-size:12px;font-weight:700;color:var(--navy);background:var(--orange);display:inline-block;padding:4px 10px;letter-spacing:1px}
.tier h3{font-size:19px;font-weight:900;margin:14px 0 6px}
.tier .who{font-size:13px;color:var(--cyan);font-family:var(--f-mono);margin-bottom:10px}
.tier p{font-size:14px;color:var(--muted)}

/* ---------- 服务（多页详解）---------- */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.svc{border:2px solid var(--line-2);background:var(--navy-2);padding:30px;transition:.18s}
.svc:hover{transform:translate(-4px,-4px);box-shadow:var(--shadow);border-color:var(--orange)}
.svc__head{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.svc__idx{font-family:var(--f-display);font-weight:800;font-size:30px;color:var(--orange)}
.svc h3{font-size:23px;font-weight:900}
.svc .pain{font-family:var(--f-mono);font-size:12.5px;color:var(--orange);letter-spacing:1px;margin:4px 0 16px}
.svc .pain::before{content:"痛点 ▸ ";color:var(--orange)}
.svc p{color:var(--muted);font-size:15px}
.svc .fix{margin-top:16px;padding-top:16px;border-top:1px dashed var(--line-2);font-size:14.5px;color:var(--text)}
.svc .fix b{color:var(--cyan)}
.svc--paper{background:var(--paper-2);border-color:#d8cba6;color:var(--ink)}
.svc--paper p{color:#5a5346}
.svc--paper .fix{border-top-color:#cbbd95;color:var(--ink)}
.svc--paper .fix b{color:var(--orange-d)}

/* ---------- 套餐 ---------- */
.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.plan{border:2px solid var(--line-2);background:var(--navy-2);padding:32px 28px;display:flex;flex-direction:column;transition:.18s;position:relative}
.plan:hover{transform:translate(-4px,-4px);box-shadow:var(--shadow)}
.plan__name{font-family:var(--f-mono);font-size:13px;letter-spacing:2px;color:var(--muted)}
.plan__price{font-family:var(--f-display);font-weight:800;font-size:46px;color:var(--paper);margin:6px 0 2px;line-height:1}
.plan__price small{font-size:16px;color:var(--muted);font-family:var(--f-sans)}
.plan__floor{font-family:var(--f-mono);font-size:12px;color:var(--cyan);margin-bottom:18px}
.plan ul{margin:6px 0 22px;flex:1}
.plan li{padding:9px 0;border-bottom:1px solid var(--line);font-size:14.5px;color:var(--text);display:flex;gap:10px}
.plan li::before{content:"◆";color:var(--orange);font-size:12px;line-height:1.7}
.plan__feat{font-size:13px;color:var(--muted);margin-bottom:18px}
.plan--hit{border-color:var(--orange);background:var(--orange)}
.plan--hit .plan__name,.plan--hit .plan__price,.plan--hit .plan__floor,.plan--hit li,.plan--hit .plan__feat{color:var(--navy)}
.plan--hit li::before{color:var(--navy-3)}
.plan--hit .plan__price small{color:var(--navy-3)}
.plan--hit ul{border-color:rgba(10,26,47,.18)}
.plan--hit li{border-color:rgba(10,26,47,.16)}
.plan__flag{position:absolute;top:-14px;left:24px;background:var(--navy);color:var(--orange);
  font-family:var(--f-mono);font-size:11px;font-weight:700;padding:5px 12px;border:2px solid var(--orange);letter-spacing:1px}

/* ---------- 案例 ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.case{border:2px solid var(--line-2);background:var(--navy-2);overflow:hidden;transition:.18s}
.case:hover{transform:translate(-4px,-4px);box-shadow:var(--shadow);border-color:var(--orange)}
.case__top{padding:22px 24px;border-bottom:2px solid var(--line-2);background:var(--navy-3)}
.case__ind{font-family:var(--f-mono);font-size:12px;color:var(--cyan);letter-spacing:1px}
.case__title{font-size:20px;font-weight:900;margin-top:6px}
.case__body{padding:22px 24px}
.case__body p{color:var(--muted);font-size:14.5px;margin-bottom:14px}
.case__res{display:flex;gap:18px;flex-wrap:wrap;border-top:1px dashed var(--line-2);padding-top:14px}
.case__res div{font-family:var(--f-mono)}
.case__res b{display:block;font-family:var(--f-display);font-weight:800;font-size:24px;color:var(--orange)}
.case__res span{font-size:11px;color:var(--muted)}
.case--next{border:2px dashed var(--orange);background:transparent;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:40px 24px}
.case--next .big{font-family:var(--f-serif);font-weight:900;font-size:30px;color:var(--paper);margin-bottom:10px}
.case--next p{color:var(--muted);font-size:14px;margin-bottom:18px;max-width:240px}

/* ---------- 关于 / 架构 ---------- */
.arch{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch}
.arch__box{border:2px solid var(--line-2);background:var(--navy-2);padding:30px}
.arch__box--main{border-color:var(--orange)}
.arch__role{font-family:var(--f-mono);font-size:12px;color:var(--orange);letter-spacing:1px}
.arch__box h3{font-size:24px;font-weight:900;margin:8px 0 4px}
.arch__box .en{font-family:var(--f-display);font-weight:700;font-size:15px;color:var(--cyan);margin-bottom:14px}
.arch__box p{color:var(--muted);font-size:14.5px}
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;counter-reset:step}
.step{border:2px solid var(--line-2);background:var(--navy-2);padding:22px 18px;position:relative;transition:.18s}
.step:hover{border-color:var(--orange);transform:translateY(-4px)}
.step__n{font-family:var(--f-display);font-weight:800;font-size:30px;color:var(--orange)}
.step h4{font-size:16px;font-weight:900;margin:6px 0 8px}
.step p{font-size:13.5px;color:var(--muted)}

/* ---------- 表单 ---------- */
.form{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:760px}
.form .full{grid-column:1/-1}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-family:var(--f-mono);font-size:12px;color:var(--cyan);letter-spacing:1px}
.field input,.field select,.field textarea{
  background:var(--navy-3);border:2px solid var(--line-2);color:var(--text);
  padding:13px 14px;font-family:var(--f-sans);font-size:15px;transition:.16s;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--orange)}
.field textarea{resize:vertical;min-height:96px}
.form__note{font-family:var(--f-mono);font-size:12px;color:var(--muted);grid-column:1/-1}
.form__ok{display:none;grid-column:1/-1;background:rgba(20,224,192,.12);
  border:2px solid var(--cyan);color:var(--cyan);padding:14px;font-family:var(--f-mono);font-size:14px}
.contact-info{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:8px}
.ci{border:2px solid var(--line-2);background:var(--navy-2);padding:22px}
.ci .l{font-family:var(--f-mono);font-size:11px;color:var(--orange);letter-spacing:1px}
.ci .v{font-size:17px;font-weight:700;margin-top:8px;color:var(--paper)}
.ci .v--ph{color:var(--line-2)}

/* ---------- 页脚 ---------- */
.foot{background:var(--navy-3);border-top:2px solid var(--line-2);padding:64px 0 36px;position:relative;z-index:2}
.foot__big{font-family:var(--f-serif);font-weight:900;font-size:clamp(64px,16vw,200px);
  line-height:.9;color:var(--navy-2);letter-spacing:-2px;user-select:none;white-space:nowrap}
.foot__big b{color:var(--orange)}
.foot__row{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;margin-top:30px;
  border-top:1px solid var(--line);padding-top:24px}
.foot__col h5{font-family:var(--f-mono);font-size:12px;color:var(--orange);letter-spacing:1px;margin-bottom:12px}
.foot__col a,.foot__col p{display:block;color:var(--muted);font-size:14px;margin-bottom:8px}
.foot__col a:hover{color:var(--paper)}
.foot__bottom{font-family:var(--f-mono);font-size:12px;color:var(--muted);margin-top:28px;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none}
  .compass-rotor,.marquee__track{animation:none}
}

/* ---------- 响应式 ---------- */
@media (max-width:1024px){
  .hero__grid{grid-template-columns:1fr;gap:30px}
  .hero__compass{order:-1}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .pricing{grid-template-columns:1fr;max-width:480px;margin:0 auto}
  .steps{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:1fr;max-width:480px}
}
@media (max-width:768px){
  .nav__links{position:fixed;top:62px;left:0;right:0;background:var(--navy);
    flex-direction:column;align-items:stretch;padding:10px 18px 18px;
    border-bottom:2px solid var(--line-2);display:none}
  .nav__links.open{display:flex}
  .nav__links a{padding:12px 8px}
  .nav__cta{text-align:center}
  .nav__burger{display:flex}
  .grid-2{grid-template-columns:1fr}
  .grid-4{grid-template-columns:1fr}
  .arch{grid-template-columns:1fr}
  .form{grid-template-columns:1fr}
  .contact-info{grid-template-columns:1fr}
  .sec{padding:72px 0}
  .hero h1{font-size:clamp(34px,11vw,52px)}
}