/* ============================================
   Custom Aircraft Precision Components — Style
   Xiamen Goldcattle Plastic & Metal Products Co., Ltd.
   Aesthetic: Technical Specification Sheet
   Theme: Sky-Blue (#4a90c4) on pale blue-grey
   ============================================ */

:root{
  --bg:#f5f8fb;
  --bg-alt:#e8eff6;
  --bg-card:#fff;
  --bg-card-hover:#f0f5fa;
  --bg-deep:#1a2e44;
  --bg-mid:#dce6f0;
  --text-primary:#1b2a3b;
  --text-secondary:#3a4d62;
  --text-muted:#6b7f96;
  --blue:#4a90c4;
  --blue-hover:#3579b0;
  --blue-deep:#2d6a8f;
  --blue-light:rgba(74,144,196,.07);
  --blue-glow:rgba(74,144,196,.10);
  --steel:#5a7fa0;
  --accent:#e8a838;
  --border:#cdd8e5;
  --border-hover:#a8bdd4;
  --border-subtle:#e2eaf2;
  --radius:6px;
  --radius-lg:12px;
  --shadow:0 1px 8px rgba(27,42,59,.05);
  --shadow-md:0 4px 20px rgba(27,42,59,.08);
  --shadow-lg:0 8px 36px rgba(27,42,59,.12);
  --transition:all .22s ease;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Segoe UI',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;font-size:17px;line-height:1.72;color:var(--text-primary);background:var(--bg)}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue);text-decoration:none;transition:color .2s}
a:hover{color:var(--blue-deep)}

.container{max-width:1200px;margin:0 auto;padding:0 32px}


/* ── Hero — full-width centered ── */
.hero{background:linear-gradient(170deg,#1a2e44 0%,#244868 40%,#1e3d5a 100%);padding:72px 0 56px;text-align:center;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;bottom:0;left:0;right:0;height:120px;background:linear-gradient(to top,var(--bg),transparent);pointer-events:none;z-index:1}
.hero-badge{display:inline-flex;align-items:center;gap:7px;background:rgba(74,144,196,.12);border:1px solid rgba(74,144,196,.25);color:#a8d4f0;padding:6px 15px;border-radius:18px;font-size:12px;font-weight:700;margin-bottom:18px;letter-spacing:.5px;text-transform:uppercase}
.hero-badge .dot{width:6px;height:6px;border-radius:50%;background:#4ade80;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

.hero h2{font-size:34px;font-weight:800;color:#fff;line-height:1.18;margin-bottom:16px;letter-spacing:-.5px;position:relative;z-index:2}
.hero-sub{font-size:17px;color:#b8d2e4;line-height:1.7;margin:0 auto 28px;max-width:780px;position:relative;z-index:2}
.hero-specs{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:28px;position:relative;z-index:2}
.hero-spec{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);padding:8px 16px;border-radius:4px;font-size:13px;color:#c0d8ea;font-weight:500;letter-spacing:.2px}
.hero-spec em{font-style:normal;color:#e8c870;font-weight:700}
.hero-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;position:relative;z-index:2}
.hero-img{margin:0 auto;max-width:820px;position:relative;z-index:2;border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 16px 56px rgba(0,0,0,.35);margin-top:12px}
.hero-img img{width:100%;display:block}


/* ── Buttons ── */
.btn{display:inline-block;padding:13px 28px;border-radius:var(--radius);font-size:15px;font-weight:600;cursor:pointer;transition:var(--transition);border:none;text-align:center;text-decoration:none}
.btn-blue{background:linear-gradient(135deg,#4a90c4,#2d6a8f);color:#fff;box-shadow:0 3px 14px rgba(74,144,196,.3)}
.btn-blue:hover{transform:translateY(-1px);box-shadow:0 5px 22px rgba(74,144,196,.4);color:#fff}
.btn-outline{background:transparent;color:#c0d8ea;border:1.5px solid rgba(255,255,255,.2)}
.btn-outline:hover{border-color:#a8d4f0;color:#fff}


/* ── Sections ── */
.section{padding:56px 0}
.section-alt{background:var(--bg-alt)}
.section-deep{background:var(--bg-deep);color:#c8dce8}
.section-deep h2{color:#fff}
.section-deep .section-desc{color:#9ab8d0}

.section-label{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.8px;color:var(--blue);margin-bottom:10px}

h2{font-size:26px;font-weight:700;color:var(--text-primary);margin-bottom:10px;letter-spacing:-.2px;line-height:1.3}
h3{font-size:17px;font-weight:600;color:var(--text-primary);margin-bottom:6px}
.section-desc{font-size:17px;color:var(--text-secondary);margin-bottom:32px;max-width:860px;line-height:1.65}
.section-desc--center{margin-left:auto;margin-right:auto;text-align:center}

/* ── Two-column section grid ── */
.section-grid{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start}
.section-grid--wide-l{grid-template-columns:1.2fr 0.8fr}
.section-grid--wide-r{grid-template-columns:0.8fr 1.2fr}


/* ── Component Snapshot — horizontal strip ── */
.snapshot-strip{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;background:var(--bg-card);box-shadow:var(--shadow-md)}
.snapshot-cell{flex:1 1 0;min-width:130px;padding:18px 16px;border-right:1px solid var(--border-subtle);text-align:center}
.snapshot-cell:nth-child(3n){border-right:none}
.snapshot-cell .s-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--text-muted);margin-bottom:5px}
.snapshot-cell .s-value{font-size:15px;color:var(--text-primary);font-weight:600}
.snapshot-note{margin-top:14px;font-size:14px;color:var(--text-muted);text-align:center;font-style:italic}


/* ── Component List — vertical numbered list ── */
.comp-list{}
.comp-item{display:flex;gap:18px;padding:20px 0;border-bottom:1px solid var(--border-subtle);align-items:flex-start}
.comp-item:last-child{border-bottom:none}
.comp-num{font-size:30px;font-weight:800;color:var(--blue);opacity:.25;line-height:1;flex-shrink:0;min-width:40px}
.comp-body h3{font-size:17px;margin-bottom:5px;color:var(--text-primary)}
.comp-body p{font-size:14px;color:var(--text-secondary);line-height:1.55}
.comp-body ul{list-style:none;margin-top:5px}
.comp-body li{font-size:14px;color:var(--text-secondary);padding:2px 0}
.comp-body li::before{content:'› ';color:var(--blue);font-weight:700}


/* ── Feature Table — clean spec sheet ── */
.spec-table{width:100%;border-collapse:collapse;background:var(--bg-card);border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow)}
.spec-table th{background:var(--blue-light);color:var(--blue-deep);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;padding:13px 16px;text-align:left}
.spec-table td{font-size:15px;padding:11px 16px;border-bottom:1px solid var(--border-subtle);color:var(--text-secondary)}
.spec-table td:first-child{color:var(--text-primary);font-weight:600;white-space:nowrap}
.spec-table tr:last-child td{border-bottom:none}
.spec-table tr:hover td{background:var(--blue-light)}


/* ── Material Cards — horizontal row with top accent ── */
.mat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.mat-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px 20px;border-top:3px solid var(--blue);box-shadow:var(--shadow)}
.mat-card h3{font-size:17px;margin-bottom:2px}
.mat-card .grades{font-size:12px;color:var(--blue);font-weight:700;margin-bottom:12px;letter-spacing:.4px;text-transform:uppercase}
.mat-card ul{list-style:none}
.mat-card li{font-size:14px;color:var(--text-secondary);padding:5px 0;border-bottom:1px solid var(--border-subtle)}
.mat-card li:last-child{border-bottom:none}
.mat-card li::before{content:'· ';color:var(--blue);font-weight:700}
.mat-callout{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:18px 22px;margin-top:18px;box-shadow:var(--shadow)}
.mat-callout p{font-size:14px;color:var(--text-secondary);line-height:1.6}


/* ── 5-Axis — icon+text horizontal ── */
.axis-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.axis-item{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:22px 18px;display:flex;gap:14px;align-items:flex-start;box-shadow:var(--shadow);transition:var(--transition)}
.axis-item:hover{border-color:var(--blue)}
.axis-icon{width:38px;height:38px;border-radius:50%;background:var(--blue-light);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:16px;font-weight:800;color:var(--blue)}
.axis-item h3{font-size:15px;margin-bottom:4px}
.axis-item p{font-size:14px;color:var(--text-secondary);line-height:1.5}


/* ── Design Considerations — two-column definition grid ── */
.dfn-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;background:var(--bg-card);box-shadow:var(--shadow)}
.dfn-cell{padding:16px 20px;border-bottom:1px solid var(--border-subtle);border-right:1px solid var(--border-subtle)}
.dfn-cell:nth-child(2n){border-right:none}
.dfn-cell:nth-last-child(-n+2){border-bottom:none}
.dfn-term{font-size:15px;font-weight:700;color:var(--blue);margin-bottom:4px}
.dfn-def{font-size:14px;color:var(--text-secondary);line-height:1.55}


/* ── Lightweight — two-column: key points + note ── */
.lw-layout{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.lw-points{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.lw-point{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:16px 14px;text-align:center;box-shadow:var(--shadow)}
.lw-point .lw-icon{font-size:22px;margin-bottom:6px;display:block;color:var(--blue)}
.lw-point p{font-size:14px;color:var(--text-secondary);font-weight:500}
.lw-note{font-size:15px;color:var(--text-secondary);line-height:1.65;padding:20px 22px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);border-left:4px solid var(--blue);box-shadow:var(--shadow)}


/* ── Billet / Forging / Casting — HORIZONTAL flow ── */
.route-flow{display:flex;align-items:stretch;gap:0;margin:0 auto}
.route-step{flex:1;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:18px 16px;text-align:center;box-shadow:var(--shadow);transition:var(--transition);display:flex;flex-direction:column;justify-content:center}
.route-step:hover{border-color:var(--blue)}
.route-step h3{font-size:15px;margin-bottom:4px}
.route-step p{font-size:13px;color:var(--text-secondary)}
.route-arrow-h{display:flex;align-items:center;color:var(--blue);font-size:22px;padding:0 4px;font-weight:300;flex-shrink:0}
.route-note{margin-top:18px;font-size:15px;color:var(--text-secondary);line-height:1.6;text-align:center;max-width:860px;margin-left:auto;margin-right:auto}


/* ── Process Timeline — horizontal steps with connector line ── */
.timeline{position:relative;padding:20px 0}
.timeline::before{content:'';position:absolute;top:42px;left:40px;right:40px;height:2px;background:var(--border);z-index:0}
.tl-steps{display:grid;grid-template-columns:repeat(7,1fr);gap:0;position:relative;z-index:1}
.tl-step{text-align:center;padding:0 8px}
.tl-num{width:40px;height:40px;border-radius:50%;background:var(--blue);color:#fff;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;margin:0 auto 10px;box-shadow:0 2px 10px rgba(74,144,196,.25)}
.tl-step h3{font-size:13px;font-weight:600;color:var(--text-primary);margin-bottom:4px;line-height:1.3}
.tl-step p{font-size:12px;color:var(--text-secondary);line-height:1.45}


/* ── Surface Finishing — two-column per material group ── */
.finish-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
.finish-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px 18px;border-top:3px solid var(--blue);box-shadow:var(--shadow)}
.finish-card h3{font-size:16px;margin-bottom:10px;color:var(--text-primary)}
.finish-chips{display:flex;flex-wrap:wrap;gap:7px}
.finish-chip{background:var(--bg-alt);border:1px solid var(--border-subtle);padding:5px 12px;border-radius:18px;font-size:13px;color:var(--text-secondary);transition:var(--transition)}
.finish-chip:hover{border-color:var(--blue);color:var(--blue);background:var(--bg-card)}


/* ── Inspection — checklist style, full-width grid ── */
.inspect-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.inspect-item{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:14px 14px;display:flex;align-items:center;gap:10px;box-shadow:var(--shadow);transition:var(--transition)}
.inspect-item:hover{border-color:var(--blue)}
.inspect-check{color:var(--blue);font-size:16px;font-weight:700;flex-shrink:0}
.inspect-item p{font-size:14px;color:var(--text-secondary);font-weight:500}


/* ── Quality Docs — two-column grid ── */
.doc-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.doc-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;display:flex;align-items:center;gap:12px;box-shadow:var(--shadow);transition:var(--transition)}
.doc-card:hover{border-color:var(--blue)}
.doc-icon{color:var(--blue);font-size:18px;flex-shrink:0}
.doc-card p{font-size:15px;color:var(--text-primary);font-weight:500}
.doc-note{margin-top:18px;font-size:14px;color:var(--text-muted);font-style:italic}


/* ── Case Study — full-width two-column block ── */
.case-block{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md)}
.case-head{padding:22px 26px;border-bottom:1px solid var(--border-subtle);background:var(--blue-light)}
.case-head .tag{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--blue);margin-bottom:4px}
.case-head h3{font-size:18px}
.case-body{padding:24px 26px}
.case-grid{display:grid;grid-template-columns:1fr 1fr;gap:0}
.case-row{display:flex;gap:8px;padding:10px 0;border-bottom:1px solid var(--border-subtle);font-size:14px;padding-right:24px}
.case-row:last-child{border-bottom:none}
.case-row .label{color:var(--text-muted);font-weight:600;min-width:120px;flex-shrink:0}
.case-row .value{color:var(--text-secondary)}
.case-note{margin-top:14px;font-size:13px;color:var(--text-muted);font-style:italic}


/* ── Cost Factors — horizontal formula + note side by side ── */
.cost-layout{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.cost-formula{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px 24px;box-shadow:var(--shadow-md)}
.cost-item{display:flex;align-items:center;gap:10px;padding:7px 0;font-size:15px;color:var(--text-secondary)}
.cost-plus{color:var(--blue);font-weight:300;font-size:18px;flex-shrink:0}
.cost-item:last-child .cost-plus{display:none}
.cost-note{font-size:15px;color:var(--text-secondary);line-height:1.65;padding:24px 22px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);border-left:4px solid var(--blue);box-shadow:var(--shadow-md)}


/* ── Applications — icon pills, full-width ── */
.app-pills{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.app-pill{background:var(--bg-card);border:1px solid var(--border);border-radius:28px;padding:10px 20px;font-size:14px;color:var(--text-secondary);font-weight:500;transition:var(--transition);box-shadow:var(--shadow)}
.app-pill:hover{border-color:var(--blue);color:var(--blue);box-shadow:var(--shadow-md)}
.app-pill .a-icon{margin-right:6px;color:var(--blue)}


/* ── FAQ ── */
.faq-list{}
.faq-item{border:1px solid var(--border);border-radius:var(--radius);margin-bottom:8px;background:var(--bg-card);overflow:hidden;transition:var(--transition)}
.faq-item:hover{border-color:var(--border-hover)}
.faq-q{padding:16px 20px;font-size:15px;font-weight:600;color:var(--text-primary);cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px}
.faq-q::after{content:'+';font-size:18px;color:var(--blue);flex-shrink:0;font-weight:300;transition:var(--transition)}
.faq-item.open .faq-q::after{content:'−'}
.faq-a{padding:0 20px 16px;font-size:15px;color:var(--text-secondary);line-height:1.65;display:none}
.faq-item.open .faq-a{display:block}


/* ── CTA ── */
.cta-section{background:linear-gradient(170deg,#1a2e44 0%,#244868 50%,#1e3d5a 100%);padding:64px 0;text-align:center;position:relative;overflow:hidden}
.cta-section::before{content:'';position:absolute;top:-60px;left:50%;transform:translateX(-50%);width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,rgba(74,144,196,.1) 0%,transparent 65%);pointer-events:none}
.cta-section h2{color:#fff;font-size:28px;margin-bottom:12px}
.cta-section .section-desc{color:#b8d2e4;margin:0 auto 28px;max-width:680px}


/* ── Footer ── */
.footer{background:var(--bg-alt);padding:24px 0;text-align:center;border-top:1px solid var(--border)}
.footer p{font-size:13px;color:var(--text-muted)}
.footer a{color:var(--text-secondary)}


/* ── Image block ── */
.img-block{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md)}
.img-block img{width:100%;display:block}


/* ── Internal links ── */
.int-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.int-links a{background:var(--bg-card);border:1px solid var(--border);padding:6px 14px;border-radius:4px;font-size:13px;color:var(--text-secondary);transition:var(--transition)}
.int-links a:hover{border-color:var(--blue);color:var(--blue)}


/* ── Utility ── */
.text-center{text-align:center}
.mt16{margin-top:16px}
.mt20{margin-top:20px}
.mt28{margin-top:28px}
.mx-auto{margin-left:auto;margin-right:auto}


/* ── Responsive ── */
@media(max-width:1024px){
  .section-grid,.section-grid--wide-l,.section-grid--wide-r{grid-template-columns:1fr}
  .finish-grid{grid-template-columns:1fr 1fr}
  .inspect-grid{grid-template-columns:repeat(3,1fr)}
  .doc-grid{grid-template-columns:1fr}
  .cost-layout{grid-template-columns:1fr}
  .dfn-grid{grid-template-columns:1fr}
  .case-grid{grid-template-columns:1fr}
  .lw-layout{grid-template-columns:1fr}
  .route-flow{flex-direction:column;gap:0}
  .route-arrow-h{justify-content:center;padding:4px 0}
  .route-arrow-h::before{content:'↓'}
}
@media(max-width:900px){
  .hero h2{font-size:28px}
  .mat-row{grid-template-columns:1fr}
  .axis-row{grid-template-columns:1fr}
  .tl-steps{grid-template-columns:repeat(4,1fr)}
  .timeline::before{display:none}
  .snapshot-strip{flex-direction:column}
  .snapshot-cell{border-right:none;border-bottom:1px solid var(--border-subtle)}
  .snapshot-cell:last-child{border-bottom:none}
  .finish-grid{grid-template-columns:1fr}
  .inspect-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .hero{padding:52px 0 40px}
  .hero h2{font-size:24px}
  .section{padding:40px 0}
  .container{padding:0 16px}
  .comp-item{flex-direction:column;gap:8px}
  .comp-num{min-width:auto;font-size:26px}
  .tl-steps{grid-template-columns:1fr 1fr}
  .tl-step{padding:8px 4px}
  .inspect-grid{grid-template-columns:1fr 1fr}
  .case-row{flex-direction:column;gap:2px}
  .cost-item{font-size:14px}
  .lw-points{grid-template-columns:1fr 1fr}
}