/* SteelSolve — site styles */
:root{
  --bg:#0e0f11; --bg2:#131519; --panel:#16181c; --panel2:#1c1f25;
  --line:#282c33; --line2:#353a43;
  --text:#e9ebee; --muted:#9ba2ab; --dim:#767d86;
  --accent:#f5a623; --accent-d:#d98b0c; --steel:#6fa0cc; --lcd:#8dc63f;
  --radius:14px; --maxw:1140px;
  --shadow:0 18px 50px -18px rgba(0,0,0,.75);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:76px; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px}
.section{padding:88px 0; border-top:1px solid var(--line)}
.section:first-of-type{border-top:none}

h1,h2,h3{line-height:1.18; letter-spacing:-.02em; margin:0 0 .5em}
h1{font-size:clamp(2.5rem,6vw,4rem); font-weight:800}
h2{font-size:clamp(1.75rem,3.6vw,2.5rem); font-weight:750}
h3{font-size:1.18rem; font-weight:700; letter-spacing:-.01em}
p{margin:0 0 1.1em}
.lede{font-size:1.18rem; color:var(--muted); max-width:62ch}
.eyebrow{
  font-size:.78rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent); margin:0 0 14px;
}
.center{text-align:center}
.center .lede{margin-left:auto; margin-right:auto}

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:60; background:rgba(14,15,17,.82);
  backdrop-filter:saturate(160%) blur(14px); -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-in{display:flex; align-items:center; gap:18px; height:62px; max-width:var(--maxw); margin:0 auto; padding:0 22px}
.brand{display:flex; align-items:center; gap:11px; font-weight:800; color:var(--text); font-size:1.06rem; letter-spacing:-.02em}
.brand:hover{text-decoration:none}
.brand img{width:30px; height:30px; border-radius:7px}
.nav-links{display:flex; gap:24px; margin-left:auto; align-items:center}
.nav-links a{color:var(--muted); font-size:.94rem; font-weight:550}
.nav-links a:hover{color:var(--text); text-decoration:none}
.nav-cta{
  background:var(--accent); color:#1a1205 !important; padding:8px 16px; border-radius:9px;
  font-weight:700; font-size:.9rem;
}
.nav-cta:hover{background:#ffb733; text-decoration:none}
@media(max-width:860px){ .nav-links a:not(.nav-cta){display:none} }

/* ---------- hero ---------- */
.hero{
  padding:74px 0 78px; position:relative; overflow:hidden;
  background:
    radial-gradient(900px 480px at 78% 12%, rgba(245,166,35,.10), transparent 62%),
    radial-gradient(760px 520px at 8% 88%, rgba(111,160,204,.10), transparent 64%);
}
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.38;
  background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(1000px 560px at 50% 30%,#000,transparent 78%);
          mask-image:radial-gradient(1000px 560px at 50% 30%,#000,transparent 78%);
}
.hero-grid{position:relative; z-index:1; display:grid; grid-template-columns:1.06fr .94fr; gap:56px; align-items:center}
.hero h1{margin-bottom:.28em}
.hero h1 .u{
  background:linear-gradient(180deg,transparent 78%,rgba(245,166,35,.45) 78%);
}
.hero-icon{width:78px; height:78px; border-radius:18px; box-shadow:var(--shadow); margin-bottom:22px}
.hero-shots{display:flex; gap:16px; justify-content:center; align-items:flex-end}
.hero-shots img{
  border-radius:20px; border:1px solid var(--line2); box-shadow:var(--shadow); background:#000;
}
.hero-shots img:first-child{width:46%; margin-bottom:34px}
.hero-shots img:last-child{width:54%}
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr; gap:44px}
  .hero-shots{max-width:460px; margin:0 auto}
}

/* ---------- badges / buttons ---------- */
.badges{display:flex; flex-wrap:wrap; gap:13px; margin:28px 0 18px}
.badge{
  display:inline-flex; align-items:center; gap:11px; padding:11px 20px 11px 17px;
  background:var(--panel2); border:1px solid var(--line2); border-radius:12px;
  color:var(--text); transition:border-color .15s, background .15s, transform .15s;
}
.badge:hover{text-decoration:none; border-color:var(--accent); background:#22252b; transform:translateY(-1px)}
.badge svg{width:24px; height:24px; flex:none; fill:currentColor}
.badge b{display:block; font-size:1.02rem; font-weight:700; line-height:1.2; letter-spacing:-.01em}
.badge span{display:block; font-size:.7rem; color:var(--dim); letter-spacing:.07em; text-transform:uppercase; font-weight:600}
.note{font-size:.9rem; color:var(--dim); margin:0}

/* ---------- trust strip ---------- */
.strip{
  display:flex; flex-wrap:wrap; gap:10px 34px; padding:20px 0; border-top:1px solid var(--line);
  border-bottom:1px solid var(--line); background:var(--bg2);
}
.strip .wrap{display:flex; flex-wrap:wrap; gap:10px 34px; justify-content:center}
.strip i{
  font-style:normal; color:var(--muted); font-size:.95rem; display:inline-flex; align-items:center; gap:9px; font-weight:550;
}
.strip i::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--accent); flex:none}

/* ---------- feature rows ---------- */
.frow{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; margin-top:56px}
.frow:first-of-type{margin-top:0}
.frow.flip .fcopy{order:2}
.frow img.shot{
  border-radius:20px; border:1px solid var(--line2); box-shadow:var(--shadow); background:#000; margin:0 auto; max-width:330px;
}
.frow img.wide{max-width:100%; border-radius:14px}
.shotpair{display:flex; gap:16px; align-items:flex-start; justify-content:center}
.shotpair img{
  width:calc(50% - 8px); max-width:250px; border-radius:18px; border:1px solid var(--line2);
  box-shadow:var(--shadow); background:#000;
}
@media(max-width:900px){
  .frow{grid-template-columns:1fr; gap:34px; margin-top:56px}
  .frow.flip .fcopy{order:0}
}
ul.checks{list-style:none; padding:0; margin:0}
ul.checks li{position:relative; padding-left:30px; margin-bottom:11px; color:var(--muted)}
ul.checks li::before{
  content:""; position:absolute; left:6px; top:.62em; width:9px; height:9px; border-radius:2px;
  background:var(--accent); transform:rotate(45deg);
}
ul.checks li b{color:var(--text); font-weight:650}

/* ---------- cards ---------- */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(268px,1fr)); gap:20px; margin-top:42px}
.card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:26px 24px;
  transition:border-color .16s, transform .16s;
}
.card:hover{border-color:var(--line2); transform:translateY(-2px)}
.card h3{margin-bottom:.45em; display:flex; align-items:center; gap:10px}
.card h3 .dot{width:9px; height:9px; border-radius:50%; background:var(--accent); flex:none}
.card p{color:var(--muted); font-size:.97rem; margin:0}
.card ul{margin:0; padding-left:19px; color:var(--muted); font-size:.97rem}
.card ul li{margin-bottom:6px}

/* quote / dictation examples */
.says{display:grid; grid-template-columns:repeat(auto-fit,minmax(292px,1fr)); gap:13px; margin-top:26px}
.say{
  background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--steel);
  border-radius:10px; padding:14px 18px; color:var(--text); font-size:.98rem;
}
.say::before{content:"🎙 "; opacity:.75}

/* ---------- gallery ---------- */
.tabs{display:flex; gap:8px; justify-content:center; margin:36px 0 30px}
.tab{
  background:var(--panel); border:1px solid var(--line2); color:var(--muted); font:inherit; font-size:.93rem;
  font-weight:650; padding:9px 20px; border-radius:999px; cursor:pointer; transition:all .15s;
}
.tab[aria-selected="true"]{background:var(--accent); border-color:var(--accent); color:#1a1205}
.gal{display:grid; gap:20px}
.gal.phones{grid-template-columns:repeat(auto-fit,minmax(212px,1fr))}
.gal.tablets{grid-template-columns:repeat(auto-fit,minmax(380px,1fr))}
.gal figure{margin:0}
.gal button.shotbtn{
  display:block; padding:0; border:1px solid var(--line2); background:#000; border-radius:16px;
  overflow:hidden; cursor:zoom-in; width:100%; box-shadow:var(--shadow); transition:border-color .15s, transform .15s;
}
.gal button.shotbtn:hover{border-color:var(--accent); transform:translateY(-3px)}
.gal figcaption{color:var(--dim); font-size:.87rem; text-align:center; margin-top:10px}
[hidden]{display:none !important}

/* lightbox */
.lb{
  position:fixed; inset:0; z-index:100; background:rgba(8,9,10,.95); display:flex;
  align-items:center; justify-content:center; padding:28px;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.lb img{max-width:min(96vw,1400px); max-height:88vh; width:auto; height:auto; border-radius:14px; border:1px solid var(--line2)}
.lb button{
  position:absolute; background:var(--panel2); border:1px solid var(--line2); color:var(--text);
  width:46px; height:46px; border-radius:50%; font-size:1.3rem; cursor:pointer; line-height:1;
}
.lb button:hover{border-color:var(--accent)}
.lb .x{top:22px; right:22px}
.lb .prev{left:20px; top:50%; margin-top:-23px}
.lb .next{right:20px; top:50%; margin-top:-23px}
.lb .cap{position:absolute; bottom:20px; left:0; right:0; text-align:center; color:var(--muted); font-size:.92rem; padding:0 90px}

/* ---------- capability columns ---------- */
.caps{columns:3 270px; column-gap:38px; margin-top:38px}
.caps section{break-inside:avoid; margin:0 0 30px; display:inline-block; width:100%}
.caps h3{
  font-size:.8rem; letter-spacing:.15em; text-transform:uppercase; color:var(--accent);
  border-bottom:1px solid var(--line); padding-bottom:9px; margin-bottom:13px;
}
.caps ul{list-style:none; margin:0; padding:0}
.caps li{color:var(--muted); font-size:.95rem; padding:4px 0 4px 17px; position:relative; line-height:1.5}
.caps li::before{content:"–"; position:absolute; left:0; color:var(--line2)}

/* ---------- pro ---------- */
.pro{
  background:linear-gradient(155deg,#1b1a16,#16181c 55%); border:1px solid #3a3222;
  border-radius:20px; padding:44px; margin-top:10px;
}
.pro .tagpill{
  display:inline-block; background:rgba(245,166,35,.14); color:var(--accent); border:1px solid rgba(245,166,35,.34);
  padding:5px 14px; border-radius:999px; font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
}
@media(max-width:640px){ .pro{padding:30px 24px} }

/* ---------- faq ---------- */
.faq{max-width:820px; margin:38px auto 0}
.faq details{border-bottom:1px solid var(--line); padding:6px 0}
.faq summary{
  cursor:pointer; padding:16px 0; font-weight:650; list-style:none; display:flex;
  justify-content:space-between; align-items:center; gap:18px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--accent); font-size:1.45rem; font-weight:400; flex:none; line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{color:var(--muted); margin:0 0 18px; font-size:.98rem}

/* ---------- cta / footer ---------- */
.cta{text-align:center; background:var(--bg2)}
.cta .badges{justify-content:center}
footer{border-top:1px solid var(--line); padding:44px 0 54px; color:var(--dim); font-size:.92rem; background:var(--bg2)}
.foot{display:flex; flex-wrap:wrap; gap:18px 30px; align-items:center; justify-content:space-between}
.foot nav{display:flex; flex-wrap:wrap; gap:22px}
.foot nav a{color:var(--muted)}

/* ---------- doc pages ---------- */
.doc{max-width:760px; margin:0 auto; padding:64px 22px 80px}
.doc h1{font-size:clamp(2rem,4.4vw,2.8rem); margin-bottom:.25em}
.doc h2{font-size:1.32rem; margin-top:2.1em; padding-top:1.1em; border-top:1px solid var(--line)}
.doc .updated{color:var(--dim); font-size:.92rem; margin-bottom:2.4em}
.doc ul{color:var(--muted); padding-left:22px}
.doc li{margin-bottom:11px}
.doc p{color:var(--muted)}
.doc strong{color:var(--text)}
.back{display:inline-block; margin-bottom:26px; font-size:.93rem; color:var(--muted)}

@media(prefers-reduced-motion:reduce){*{transition:none !important; scroll-behavior:auto !important}}