/* M&J Industrial Sales — site styles (graphite + brushed steel) */
:root{
  --bg:#0C0F13;--bg-2:#11151B;--panel:#161B22;--panel-2:#1B212A;
  --line:rgba(190,204,218,.13);--line-2:rgba(190,204,218,.24);
  --ink:#E8ECF0;--ink-2:#C2CAD3;--mute:#8F9BA8;
  --accent:#8DB6DA;--accent-2:#B9D3EA;--blue:#3F7FC4;--blue-glow:rgba(63,127,196,.38);
  --steel:linear-gradient(180deg,#FFFFFF 0%,#DCE1E6 30%,#9AA4AE 49%,#5B646E 51%,#C3CBD3 62%,#F0F3F5 86%,#AEB7C0 100%);
  --steel-flat:linear-gradient(180deg,#F3F5F7,#B8C0C9);
  --radius:14px;
  --font:'Archivo','Segoe UI',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
  --header-h:72px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 20px)}
body{margin:0;background:radial-gradient(1100px 620px at 88% -8%,rgba(63,127,196,.13),transparent 62%),radial-gradient(900px 600px at -10% 38%,rgba(63,127,196,.07),transparent 60%),var(--bg);background-attachment:fixed;color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:var(--accent-2);text-decoration:none}
a:hover{color:#fff}
::selection{background:rgba(141,182,218,.35);color:#fff}
:focus-visible{outline:2px solid var(--accent-2);outline-offset:3px;border-radius:4px}
.wrap{max-width:1240px;margin:0 auto;padding:0 24px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sr-only:focus-visible{position:fixed;left:16px;top:12px;z-index:100;width:auto;height:auto;clip:auto;overflow:visible;white-space:normal;padding:12px 16px;border-radius:10px;background:var(--steel-flat);color:#0E1216;font-weight:600}

/* type */
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.eyebrow::before{content:"";width:18px;height:1px;background:currentColor}
h1,h2,h3{margin:0;font-weight:800;font-stretch:112%;letter-spacing:-.01em;line-height:1.02;color:var(--ink)}
h1{font-size:clamp(42px,6.2vw,92px)}
h2{font-size:clamp(32px,4vw,56px)}
h3{font-size:22px;font-stretch:105%;line-height:1.15}
.lead{font-size:clamp(18px,1.6vw,21px);color:var(--ink-2);max-width:62ch;margin:0}
.steel-text{background:var(--steel);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
p{margin:0}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border-radius:10px;font:600 16px/1 var(--font);letter-spacing:.01em;cursor:pointer;border:1px solid transparent;transition:transform .2s,box-shadow .2s,border-color .2s,background-color .2s,color .2s}
.btn svg{width:18px;height:18px;flex:0 0 auto}
.btn-steel{background:var(--steel-flat);color:#0E1216;border-color:#E9EDF1;box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 #8C96A0,0 10px 30px -12px rgba(185,211,234,.55)}
.btn-steel:hover{color:#0E1216;transform:translateY(-2px);box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 #8C96A0,0 16px 34px -12px rgba(185,211,234,.75)}
.btn-line{background:rgba(255,255,255,.02);color:var(--ink);border-color:var(--line-2)}
.btn-line:hover{color:#fff;border-color:var(--accent);background:rgba(141,182,218,.08)}
.link-arrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.link-arrow::after{content:"→";transition:transform .2s}
.link-arrow:hover::after{transform:translateX(4px)}

/* header */
.site-header{position:sticky;top:0;z-index:60;height:var(--header-h);background:rgba(12,15,19,.74);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid var(--line);transition:background-color .25s,box-shadow .25s}
.site-header.is-scrolled{background:rgba(12,15,19,.92);box-shadow:0 10px 30px -18px rgba(0,0,0,.9)}
.header-in{height:100%;display:flex;align-items:center;gap:28px}
.brand{display:flex;align-items:center;flex:0 0 auto;margin-right:auto}
.brand svg{width:128px;height:auto;display:block}
.nav{display:flex;align-items:center;gap:4px}
.nav a{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 14px;color:var(--ink-2);font-weight:500;font-size:15px;border-radius:8px}
.nav a:hover{color:#fff;background:rgba(255,255,255,.04)}
.nav a[aria-current="page"]{color:#fff}
.nav a[aria-current="page"]::after{content:"";position:absolute;left:14px;right:14px;bottom:6px;height:2px;border-radius:2px;background:var(--steel-flat)}
.nav .btn{margin-left:12px;min-height:44px;padding:0 18px;font-size:15px}
.nav .btn-steel,.nav .btn-steel:hover{color:#0E1216;background:var(--steel-flat)}
.burger,.call-icon{display:none}

/* hero */
.hero{position:relative;isolation:isolate;overflow:hidden;border-bottom:1px solid var(--line)}
.hero-media,.hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-media img{filter:grayscale(.3) saturate(1.1) contrast(1.08) brightness(.8)}
.hero-media::after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(12,15,19,.96) 0%,rgba(12,15,19,.82) 38%,rgba(12,15,19,.35) 72%,rgba(12,15,19,.55) 100%),
  linear-gradient(0deg,var(--bg) 0%,transparent 35%),
  linear-gradient(180deg,rgba(30,70,120,.32),rgba(30,70,120,.14));mix-blend-mode:normal}
.hero-grid{position:absolute;inset:0;z-index:1;pointer-events:none;background:
  linear-gradient(rgba(190,204,218,.06) 1px,transparent 1px) 0 0/64px 64px,
  linear-gradient(90deg,rgba(190,204,218,.06) 1px,transparent 1px) 0 0/64px 64px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent);mask-image:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent)}
.hero-scan{position:absolute;left:0;right:0;top:0;height:1px;z-index:1;background:linear-gradient(90deg,transparent,rgba(185,211,234,.55),transparent);animation:scan 7s linear infinite;pointer-events:none}
@keyframes scan{0%{transform:translateY(0);opacity:0}8%{opacity:1}92%{opacity:1}100%{transform:translateY(88vh);opacity:0}}
.hero-in{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;gap:28px;min-height:min(88vh,860px);padding:96px 24px 120px}
.hero-in h1{max-width:15ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;padding-top:6px}
.status{display:inline-flex;align-items:center;gap:10px}
.status i{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 rgba(141,182,218,.6);animation:pulse 2.4s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(141,182,218,.55)}70%{box-shadow:0 0 0 10px rgba(141,182,218,0)}100%{box-shadow:0 0 0 0 rgba(141,182,218,0)}}
.spec-strip{position:relative;z-index:2;margin-top:-64px;margin-bottom:0}
.spec-strip ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line-2);border-radius:var(--radius);overflow:hidden;background:rgba(17,21,27,.86);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.spec-strip li{padding:22px 24px;border-left:1px solid var(--line);display:flex;flex-direction:column;justify-content:space-between}
.spec-strip .mono{line-height:1.5}
.spec-strip li:first-child{border-left:0}
.spec-strip b{display:block;font-size:30px;font-stretch:112%;font-weight:800;line-height:1.1;margin-top:6px}

/* page hero (inner pages) */
.page-hero{position:relative;isolation:isolate;overflow:hidden;border-bottom:1px solid var(--line)}
.page-hero .hero-in{min-height:0;padding:88px 24px 72px;gap:22px}
.page-hero .hero-media::after{background:linear-gradient(90deg,rgba(12,15,19,.96) 0%,rgba(12,15,19,.8) 45%,rgba(12,15,19,.42) 100%),linear-gradient(0deg,var(--bg),transparent 55%),linear-gradient(180deg,rgba(30,70,120,.28),rgba(30,70,120,.1))}

/* sections */
.section{padding:112px 0}
.section-tight{padding:72px 0}
.section-head{display:flex;flex-direction:column;gap:16px;margin-bottom:48px;max-width:760px}
.section-head .lead{margin-top:4px}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}

/* panels */
.panel{position:relative;background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--line);border-radius:var(--radius);padding:28px;overflow:hidden;transition:border-color .25s,transform .25s}
.panel::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:linear-gradient(135deg,rgba(255,255,255,.18),transparent 30%,transparent 70%,rgba(141,182,218,.22));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.panel:hover{border-color:rgba(141,182,218,.4);transform:translateY(-3px);box-shadow:0 26px 60px -36px var(--blue-glow)}
.panel .sheen{position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.07) 50%,transparent 65%);transform:translateX(-100%);transition:transform .9s ease}
.panel:hover .sheen{transform:translateX(100%)}
.brackets{position:relative}
.brackets::after{content:"";position:absolute;inset:10px;pointer-events:none;background:
  linear-gradient(var(--line-2),var(--line-2)) left top/14px 1px no-repeat,linear-gradient(var(--line-2),var(--line-2)) left top/1px 14px no-repeat,
  linear-gradient(var(--line-2),var(--line-2)) right top/14px 1px no-repeat,linear-gradient(var(--line-2),var(--line-2)) right top/1px 14px no-repeat,
  linear-gradient(var(--line-2),var(--line-2)) left bottom/14px 1px no-repeat,linear-gradient(var(--line-2),var(--line-2)) left bottom/1px 14px no-repeat,
  linear-gradient(var(--line-2),var(--line-2)) right bottom/14px 1px no-repeat,linear-gradient(var(--line-2),var(--line-2)) right bottom/1px 14px no-repeat}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.icon{width:44px;height:44px;display:grid;place-items:center;border-radius:10px;border:1px solid var(--line-2);background:linear-gradient(135deg,rgba(63,127,196,.32),rgba(63,127,196,.06));box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 10px 24px -14px var(--blue-glow);color:#D3E4F4;margin-bottom:20px}
.icon svg{width:22px;height:22px}
.panel h3{margin-bottom:10px}
.panel p{color:var(--ink-2);font-size:16px}

/* photo treatment: every photo is steel-toned so the set reads as one */
.photo{position:relative;overflow:hidden;border-radius:var(--radius);background:var(--panel);transition:box-shadow .6s ease,transform .6s ease}
.photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(.6) saturate(.95) contrast(1.06) brightness(.88);transform:scale(1.02);transition:transform 1.2s cubic-bezier(.2,.8,.2,1),filter .7s ease}
.photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(40,95,160,.26),rgba(12,15,19,.55));pointer-events:none;transition:opacity .7s ease}
a:hover .photo img,.photo:hover img,.industry:hover .photo img,.about-visual:hover .photo img{transform:scale(1.08);filter:grayscale(0) saturate(1.35) contrast(1.08) brightness(1.04)}
a:hover .photo::after,.photo:hover::after,.industry:hover .photo::after,.about-visual:hover .photo::after{opacity:.35}
a:hover .photo,.about-visual:hover .photo{box-shadow:0 0 0 1px rgba(141,182,218,.55),0 24px 60px -24px var(--blue-glow)}
.industry{transition:border-color .5s ease,box-shadow .6s ease}
.industry:hover{border-color:rgba(141,182,218,.45);box-shadow:0 30px 70px -40px var(--blue-glow)}
/* touch screens can't hover, so show the color up front */
@media (hover:none){.photo img{filter:grayscale(.15) saturate(1.15) contrast(1.06) brightness(.95)}.photo::after{opacity:.55}}
.photo-tag{position:absolute;left:16px;top:16px;z-index:1;padding:6px 10px;border-radius:6px;background:rgba(12,15,19,.72);border:1px solid var(--line-2);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}

/* about split visual */
.about-visual{position:relative;aspect-ratio:4/5;max-height:620px}
.about-visual .photo{position:absolute;inset:0}
.about-visual .float-card{position:absolute;right:-18px;bottom:28px;z-index:2;width:min(280px,70%);padding:20px 22px;border-radius:12px;background:rgba(17,21,27,.9);border:1px solid var(--line-2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 30px 60px -30px #000}
.checks{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:12px}
.checks li{display:flex;gap:12px;align-items:flex-start;color:var(--ink-2)}
.checks li::before{content:"";flex:0 0 18px;height:18px;margin-top:4px;border-radius:5px;border:1px solid var(--accent);background:linear-gradient(135deg,rgba(141,182,218,.35),transparent) ,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4.5 9.5l3 3 6-7' fill='none' stroke='%23B9D3EA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}

/* process */
.steps{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:step}
.steps::before{content:"";position:absolute;left:0;right:0;top:27px;height:1px;background:linear-gradient(90deg,transparent,var(--line-2) 8%,var(--line-2) 92%,transparent)}
.step{position:relative;padding-top:72px}
.step::before{counter-increment:step;content:"0" counter(step);position:absolute;left:0;top:0;width:56px;height:56px;display:grid;place-items:center;border-radius:50%;background:var(--bg);border:1px solid rgba(141,182,218,.5);background:radial-gradient(circle at 50% 30%,rgba(63,127,196,.35),var(--bg) 70%);font-family:var(--mono);font-size:14px;color:var(--accent-2);box-shadow:0 0 0 6px var(--bg)}
.step h3{font-size:20px;margin-bottom:8px}
.step p{color:var(--ink-2);font-size:16px}

/* industries strip (home) */
.ind-card{display:block;color:var(--ink)}
.ind-card .photo{aspect-ratio:4/3}
.ind-card h3{margin:16px 0 4px;font-size:19px}
.ind-card p{color:var(--mute);font-size:15px}
.ind-card:hover{color:#fff}

/* light steel band */
.band-light{position:relative;background:
  repeating-linear-gradient(0deg,rgba(255,255,255,.35) 0 1px,transparent 1px 3px),
  linear-gradient(180deg,#E9EDF1,#D3D9DF);color:#12161C;border-top:1px solid #F7F9FA;border-bottom:1px solid #9AA3AD}
.band-light h2{color:#0F1318}
.band-light .eyebrow{color:#3D5A75}
.band-light .lead{color:#33404D}
.band-light :focus-visible{outline-color:#2F5170}
.logo-row{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.logo-tile{display:flex;flex-direction:column;gap:18px;padding:26px;border-radius:var(--radius);background:rgba(255,255,255,.72);border:1px solid #BCC4CC;box-shadow:inset 0 1px 0 #fff,0 18px 40px -28px rgba(15,19,24,.6);color:#12161C;transition:transform .25s,box-shadow .25s}
.logo-tile:hover{color:#12161C;transform:translateY(-3px);box-shadow:inset 0 1px 0 #fff,0 26px 50px -28px rgba(15,19,24,.7)}
.logo-tile .logo-box{height:96px;display:flex;align-items:center;justify-content:center;padding:10px;border-radius:10px;background:#fff;border:1px solid #DCE1E6}
.logo-tile .logo-box.dark{background:#0E1114;border-color:#0E1114}
.logo-tile img{max-height:72px;width:auto;max-width:100%;object-fit:contain}
.logo-tile p{color:#33404D;font-size:15px}
.logo-tile .link-arrow{color:#2F5170;margin-top:auto}

/* rep lines page */
.line{display:grid;grid-template-columns:360px 1fr;gap:48px;align-items:start;padding:48px 0;border-top:1px solid var(--line)}
.line:first-child{border-top:0;padding-top:0}
.line-logo{position:sticky;top:calc(var(--header-h) + 24px);display:flex;flex-direction:column;gap:16px}
.line-logo .logo-box{height:160px;display:flex;align-items:center;justify-content:center;padding:24px;border-radius:var(--radius);background:linear-gradient(180deg,#F1F4F6,#D9DFE4);border:1px solid #F7F9FA;box-shadow:inset 0 -1px 0 #9AA3AD}
.line-logo .logo-box.dark{background:#0E1114;border-color:var(--line-2);box-shadow:none}
.line-logo img{max-height:110px;width:auto;object-fit:contain}
.line-body{display:flex;flex-direction:column;gap:20px}
.line-body h2{font-size:clamp(30px,3.4vw,46px)}
.meta{display:flex;flex-wrap:wrap;gap:8px 18px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--line-2);background:rgba(255,255,255,.03);font-size:14px;color:var(--ink-2)}
.featured-badge{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;padding:6px 12px;border-radius:999px;border:1px solid rgba(141,182,218,.45);background:rgba(141,182,218,.1);font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-2)}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.cols h3{font-size:14px;font-family:var(--mono);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:12px}
.ticklist{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ticklist li{position:relative;padding-left:20px;color:var(--ink-2)}
.ticklist li::before{content:"";position:absolute;left:0;top:.72em;width:8px;height:1px;background:var(--accent)}

/* industries page */
.industry{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:linear-gradient(180deg,var(--panel-2),var(--panel))}
.industry+.industry{margin-top:20px}
.industry .photo{border-radius:0;min-height:320px}
.industry .photo img{position:absolute;inset:0}
.industry:nth-child(even) .photo{order:2}
.industry-body{padding:40px;display:flex;flex-direction:column;gap:18px;justify-content:center}
.industry-body h2{font-size:clamp(28px,3vw,40px)}
.industry-body p{color:var(--ink-2)}
.applies{display:flex;flex-direction:column;gap:10px;margin-top:6px;padding-top:18px;border-top:1px solid var(--line)}
.applies li{color:var(--ink-2)}
.applies b{color:var(--ink);font-weight:600}

/* cta */
.cta{position:relative;overflow:hidden;border-top:1px solid var(--line);background:radial-gradient(900px 420px at 82% 0%,rgba(63,127,196,.28),transparent 62%),radial-gradient(700px 360px at 0% 100%,rgba(63,127,196,.12),transparent 60%),var(--bg-2)}
.cta .hero-grid{-webkit-mask-image:radial-gradient(ellipse at 70% 40%,#000,transparent 70%);mask-image:radial-gradient(ellipse at 70% 40%,#000,transparent 70%)}
.cta-in{position:relative;z-index:2;display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:center;padding:104px 24px}
.cta-actions{display:flex;flex-direction:column;gap:12px}
.cta-actions .btn{width:100%}
.phone-big{font-size:clamp(30px,3.4vw,44px);font-weight:800;font-stretch:112%;letter-spacing:-.01em;color:var(--ink)}

/* contact */
.contact-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:40px;align-items:start}
.form{display:grid;gap:18px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.input{width:100%;min-height:52px;padding:12px 14px;border-radius:10px;border:1px solid var(--line-2);background:#0E1217;color:var(--ink);font:inherit;font-size:17px;transition:border-color .2s,box-shadow .2s}
.input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(141,182,218,.2)}
.input::placeholder{color:#8F9BA8}
textarea.input{min-height:150px;resize:vertical}
select.input{appearance:none;-webkit-appearance:none;background:#0E1217 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238F9BA8' stroke-width='1.6'/%3E%3C/svg%3E") right 16px center/12px no-repeat;padding-right:40px}
.form-foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px}
.form-status{color:var(--ink-2)}
.form-status.is-ok{color:#CFE3F4}
.form-status.is-err{color:#F2B8B5}
.btn:disabled{opacity:.6;cursor:wait;transform:none}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.contact-list{list-style:none;margin:0;padding:0;display:grid;gap:0}
.contact-list li{padding:22px 0;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.contact-list li:first-child{padding-top:0}
.contact-list a{font-size:24px;font-weight:700;font-stretch:108%;color:var(--ink)}
.contact-list a:hover{color:var(--accent-2)}

/* footer */
.site-footer{border-top:1px solid var(--line);background:#0A0C10}
.footer-in{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:40px;padding:64px 24px 40px}
.footer-in svg{width:170px;height:auto}
.footer-in nav,.footer-in .fcol{display:flex;flex-direction:column;gap:10px}
.footer-in nav a,.footer-in .fcol a{color:var(--ink-2)}
.footer-in nav a:hover,.footer-in .fcol a:hover{color:#fff}
.footer-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding:20px 24px 28px;border-top:1px solid var(--line)}

/* reveal on scroll */
.js [data-reveal]{transition:opacity .7s ease,transform .7s ease,border-color .5s ease,box-shadow .6s ease}
.js [data-reveal]:not(.is-in){opacity:0;transform:translateY(18px)}
.js [data-reveal-delay="1"]{transition-delay:.08s}
.js [data-reveal-delay="2"]{transition-delay:.16s}
.js [data-reveal-delay="3"]{transition-delay:.24s}

/* ---------- tablets & phones ---------- */
@media (max-width: 1080px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr);row-gap:40px}
  .steps::before{display:none}
  .line{grid-template-columns:280px 1fr;gap:32px}
}
@media (max-width: 900px){
  :root{--header-h:64px}
  .header-in{gap:10px}
  .brand svg{width:112px}
  .call-icon,.burger{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:46px;height:46px;border-radius:10px;border:1px solid var(--line-2);background:transparent;color:var(--ink);cursor:pointer;padding:0}
  .call-icon{background:var(--steel-flat);border-color:#E9EDF1;color:#0E1216}
  .call-icon svg{width:20px;height:20px}
  .burger{flex-direction:column;gap:5px}
  .burger span{display:block;width:20px;height:2px;border-radius:2px;background:currentColor;transition:transform .25s,opacity .2s}
  .is-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .is-open .burger span:nth-child(2){opacity:0}
  .is-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;padding:6px 16px 20px;background:#0C0F13;border-bottom:1px solid var(--line);box-shadow:0 30px 40px -10px rgba(0,0,0,.8);max-height:calc(100vh - var(--header-h));max-height:calc(100dvh - var(--header-h));overflow-y:auto}
  .is-open .nav{display:flex}
  .nav a{min-height:58px;padding:0 4px;border-radius:0;border-bottom:1px solid var(--line);font-size:22px;font-weight:700;font-stretch:108%;color:var(--ink)}
  .nav a[aria-current="page"]{color:var(--accent-2)}
  .nav a[aria-current="page"]::after{left:auto;right:4px;bottom:auto;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%}
  .nav .btn{margin:18px 0 0;min-height:54px;border-bottom:1px solid #E9EDF1;font-size:17px;border-radius:10px}
  .section{padding:72px 0}
  .section-tight{padding:56px 0}
  .wrap{padding:0 16px}
  .hero-in{min-height:0;padding:64px 16px 112px;gap:22px}
  .page-hero .hero-in{padding:56px 16px 48px}
  .hero-media::after{background:linear-gradient(180deg,rgba(12,15,19,.7) 0%,rgba(12,15,19,.88) 60%,var(--bg) 100%)}
  .hero-cta{display:grid;grid-template-columns:1fr;gap:10px}
  .spec-strip{margin-top:-72px}
  .spec-strip ul{grid-template-columns:1fr 1fr}
  .spec-strip li{padding:16px 18px}
  .spec-strip li:nth-child(3){border-left:0}
  .spec-strip li:nth-child(n+3){border-top:1px solid var(--line)}
  .spec-strip b{font-size:22px}
  .split,.contact-grid,.cta-in{grid-template-columns:1fr;gap:36px}
  .cta-in{padding:72px 16px}
  .about-visual{aspect-ratio:4/3}
  .about-visual .float-card{right:12px;bottom:12px}
  .grid-3,.grid-2,.logo-row,.cols{grid-template-columns:1fr}
  .line{grid-template-columns:1fr;gap:24px;padding:40px 0}
  .line-logo{position:static}
  .line-logo .logo-box{height:130px}
  .line-logo img{max-height:82px}
  .industry{grid-template-columns:1fr}
  .industry:nth-child(even) .photo{order:0}
  .industry .photo{min-height:0;aspect-ratio:16/9}
  .industry-body{padding:26px 22px 28px}
  .form-row{grid-template-columns:1fr}
  .footer-in{grid-template-columns:1fr;gap:28px;padding:48px 16px 28px}
  .footer-in nav,.footer-in .fcol{gap:0}
  .footer-in nav a,.footer-in .fcol a{min-height:44px;display:flex;align-items:center}
  .footer-base a{min-height:44px;display:inline-flex;align-items:center}
  .footer-base{padding:18px 16px 24px}
}
@media (max-width: 560px){
  .grid-4,.steps{grid-template-columns:1fr}
  .phone-big{font-size:30px}
  h1{font-size:clamp(34px,10.5vw,42px)}
  .hide-sm{display:none}
  .about-visual{aspect-ratio:auto;max-height:none;display:flex;flex-direction:column;gap:12px}
  .about-visual .photo{position:relative;inset:auto;aspect-ratio:4/3}
  .about-visual .float-card{position:relative;right:auto;bottom:auto;width:auto}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .hero-scan,.status i{animation:none}
  .js [data-reveal]:not(.is-in){opacity:1;transform:none}
  .js [data-reveal]{transition:none}
  .panel,.panel .sheen,.btn,.logo-tile{transition:none}
  .photo img{transition:filter .3s;transform:none !important}
}