/* ==========================================================================
   PowerTrans Industrial — Design System
   Premium industrial / editorial. Photography-led. Graphite ink on white.
   Single accent. Mono for engineering data.
   ========================================================================== */

:root {
  --ink:        #0B1014;
  --ink-2:      #141C24;
  --body:       #414B57;
  --muted:      #6A747F;
  --subtle:     #98A1AB;
  --line:       #E4E7EB;
  --line-soft:  #EFF1F4;
  --canvas:     #FFFFFF;
  --canvas-soft:#F6F7F9;
  --canvas-steel:#ECEEF1;
  --accent:     #E0560B;
  --accent-dark:#C4490B;
  --accent-soft:#FDF2E9;
  --deep:       #0F1620;

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --radius:   14px;
  --radius-sm:8px;
  --shadow-1: 0 1px 2px rgba(11,16,20,.04), 0 1px 3px rgba(11,16,20,.06);
  --shadow-2: 0 12px 32px -12px rgba(11,16,20,.16), 0 4px 12px -6px rgba(11,16,20,.08);
  --shadow-3: 0 30px 60px -24px rgba(11,16,20,.26), 0 12px 24px -12px rgba(11,16,20,.12);
  --ease:     cubic-bezier(.22,.61,.36,1);
  --maxw:     1280px;
}

/* ---------- Base ---------- */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  color: var(--body);
  background: var(--canvas);
  font-feature-settings: "cv02","cv03","cv04","ss01";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1,h2,h3,h4 { color: var(--ink); font-weight: 800; letter-spacing: -0.022em; line-height: 1.1; }
::selection { background: var(--accent); color: #fff; }

/* ---------- Layout ---------- */
.shell { max-width: var(--maxw); margin-inline: auto; padding-inline: 20px; }
.shell-wide { max-width: 1480px; margin-inline: auto; padding-inline: 20px; }
@media (min-width: 768px){ .shell,.shell-wide{ padding-inline: 32px; } }
.section { padding-block: 76px; }
.section-lg { padding-block: 112px; }
@media (min-width: 1024px){ .section{ padding-block: 104px; } .section-lg{ padding-block: 148px; } }

/* ---------- Eyebrow / labels ---------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent); display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow::before { content:""; width: 22px; height: 1px; background: currentColor; opacity:.7; }
.eyebrow-plain { font-family: var(--font-mono); font-size: 11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color: var(--muted); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.mono-xs { font-family: var(--font-mono); font-size: 11px; letter-spacing:.1em; text-transform:uppercase; color: var(--muted); }

/* ---------- Rules & decorations ---------- */
.rule { height:1px; background: var(--line); border:0; }
.rule-soft { height:1px; background: var(--line-soft); border:0; }
.blueprint {
  background-image:
    linear-gradient(to right, rgba(11,16,20,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11,16,20,.045) 1px, transparent 1px);
  background-size: 56px 56px;
}
.blueprint-dark {
  background-image:
    linear-gradient(to right, rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 56px 56px;
}

/* ---------- Buttons ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-weight:600; font-size:14.5px; line-height:1;
  padding: 15px 26px; border-radius: var(--radius-sm);
  transition: transform .35s var(--ease), background-color .25s, color .25s, border-color .25s, box-shadow .35s var(--ease);
  will-change: transform; white-space: nowrap; cursor: pointer;
}
.btn svg { transition: transform .35s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn-primary { background: var(--accent); color:#fff; box-shadow: 0 6px 18px -8px rgba(224,86,11,.7); }
.btn-primary:hover { background: var(--accent-dark); transform: translateY(-2px); box-shadow: 0 14px 28px -12px rgba(224,86,11,.75); }
.btn-ink { background: var(--ink); color:#fff; }
.btn-ink:hover { background: var(--ink-2); transform: translateY(-2px); }
.btn-outline { background: transparent; color: var(--ink); border:1.5px solid var(--line); }
.btn-outline:hover { border-color: var(--ink); background: var(--canvas-soft); transform: translateY(-2px); }
.btn-ghost-light { background: rgba(255,255,255,.08); color:#fff; border:1.5px solid rgba(255,255,255,.22); }
.btn-ghost-light:hover { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.5); }
.btn-sm { padding: 11px 18px; font-size: 13.5px; }

.link-arrow { display:inline-flex; align-items:center; gap:7px; font-weight:600; font-size:14px; color: var(--ink); }
.link-arrow svg { transition: transform .3s var(--ease); }
.link-arrow:hover { color: var(--accent); }
.link-arrow:hover svg { transform: translateX(4px); }

/* ---------- Cards ---------- */
.card {
  background:#fff; border:1px solid var(--line); border-radius: var(--radius);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .3s;
  overflow:hidden; position:relative;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-2); border-color: #d6dbe1; }
.card-media { position:relative; overflow:hidden; background: var(--canvas-soft); }
.card-media img { transition: transform .8s var(--ease); }
.card:hover .card-media img { transform: scale(1.055); }

.panel { background:#fff; border:1px solid var(--line); border-radius: var(--radius); }

/* ---------- Nav ---------- */
.nav-link {
  position:relative; font-size:14px; font-weight:500; color: var(--body);
  padding: 8px 2px; transition: color .25s;
}
.nav-link::after {
  content:""; position:absolute; left:0; right:0; bottom:0; height:1.5px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease);
}
.nav-link:hover { color: var(--ink); }
.nav-link:hover::after { transform: scaleX(1); }
.nav-dropdown { display:none; }
.nav-item:hover > .nav-dropdown, .nav-dropdown:hover { display:block; }
.nav-item:focus-within > .nav-dropdown { display:block; }

/* ---------- Spec strip ---------- */
.spec-strip { display:grid; grid-template-columns: repeat(2,1fr); }
@media (min-width: 768px){ .spec-strip { grid-template-columns: repeat(4,1fr); } }
.spec-cell { padding: 22px 4px; border-top:1px solid var(--line); }
@media (min-width:768px){ .spec-cell { border-top:0; border-left:1px solid var(--line); padding: 4px 26px; } .spec-cell:first-child{ border-left:0; padding-left:0; } }
.spec-v { font-family: var(--font-mono); font-size: 30px; font-weight:600; color: var(--ink); letter-spacing:-.02em; line-height:1; }
.spec-k { font-family: var(--font-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color: var(--muted); margin-top:9px; }

/* ---------- Spec table (engineering data) ---------- */
.spec-table { width:100%; border-collapse: collapse; font-size:14px; }
.spec-table caption { text-align:left; }
.spec-table th, .spec-table td { padding: 13px 18px; border-bottom:1px solid var(--line-soft); text-align:left; vertical-align:top; }
.spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom:0; }
.spec-table th {
  font-family: var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color: var(--muted); font-weight:600; background: var(--canvas-soft); width: 34%;
}
.spec-table td { color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* ---------- Prose ---------- */
.prose { color: var(--body); line-height:1.75; font-size:16px; max-width:70ch; }
.prose h2 { font-size:1.55rem; margin:2.2em 0 .7em; }
.prose h3 { font-size:1.2rem; margin:1.8em 0 .5em; }
.prose p { margin:0 0 1.15em; }
.prose ul { margin:0 0 1.3em; padding-left:1.15em; }
.prose li { margin:.4em 0; }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.prose img { border-radius: var(--radius); margin:1.6em 0; }
.prose blockquote { border-left:2px solid var(--accent); margin:1.6em 0; padding:.2em 0 .2em 1.3em; color: var(--ink-2); font-style: italic; }
.prose code { font-family: var(--font-mono); font-size:.88em; background: var(--canvas-steel); padding:.15em .4em; border-radius:5px; }
.prose table { width:100%; border-collapse:collapse; margin:1.5em 0; font-size:14px; }
.prose th,.prose td { border:1px solid var(--line); padding:10px 12px; text-align:left; }
.prose th { background: var(--canvas-soft); font-weight:600; }

/* ---------- Forms ---------- */
.field {
  width:100%; padding: 14px 16px; font-size:15px; color: var(--ink);
  background:#fff; border:1.5px solid var(--line); border-radius: var(--radius-sm);
  transition: border-color .2s, box-shadow .2s; font-family: inherit;
}
.field::placeholder { color: var(--subtle); }
.field:focus { outline:none; border-color: var(--ink); box-shadow: 0 0 0 4px rgba(11,16,20,.06); }
.field-label { display:block; font-size:13px; font-weight:600; color: var(--ink-2); margin-bottom:7px; }
.field-label .req { color: var(--accent); }

/* ---------- Reveal animation ---------- */
.reveal { opacity:0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-in { opacity:1; transform:none; }
.reveal-d1 { transition-delay:.08s; } .reveal-d2 { transition-delay:.16s; }
.reveal-d3 { transition-delay:.24s; } .reveal-d4 { transition-delay:.32s; }
.reveal-d5 { transition-delay:.4s; }  .reveal-d6 { transition-delay:.48s; }

/* ---------- Marquee ---------- */
.marquee { overflow:hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display:flex; width:max-content; animation: marquee 38s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Utilities ---------- */
.hairline { border-top:1px solid var(--line); }
.hairline-soft { border-top:1px solid var(--line-soft); }
.clip-corner { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%); }
.text-balance { text-wrap: balance; }
.text-pretty { text-wrap: pretty; }
.img-zoom img { transition: transform 1.1s var(--ease); }
.img-zoom:hover img { transform: scale(1.06); }
.sticky-side { position: sticky; top: 96px; }

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .reveal { opacity:1 !important; transform:none !important; }
}

/* RTL touch-ups */
[dir="rtl"] .eyebrow::before { order: 2; }
[dir="rtl"] .btn:hover svg { transform: translateX(-3px); }