/* SmarTech by Uniweld — modern static site */
:root{
	--navy:#0a1f3c;
	--blue:#0e5aa7;
	--accent:#00b4d8;
	--accent-d:#0091ad;
	--ink:#16233a;
	--muted:#5b6b80;
	--bg:#ffffff;
	--soft:#f2f7fc;
	--line:#e3ebf4;
	--radius:16px;
	--shadow:0 10px 40px rgba(10,31,60,.10);
	--shadow-sm:0 4px 16px rgba(10,31,60,.08);
	--font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{width:100%;max-width:1140px;margin:0 auto;padding:0 24px}
.section{padding:88px 0}
.section.alt{background:var(--soft)}
.narrow{max-width:780px;margin:0 auto}
.center{text-align:center}
.eyebrow{display:inline-block;font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-d);margin-bottom:.8rem}
h1,h2,h3{line-height:1.12;color:var(--navy);letter-spacing:-.01em}
.section-title{font-size:clamp(1.7rem,3.5vw,2.5rem);text-align:center;margin-bottom:2.5rem}
.accent{color:var(--accent)}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:#f47737;border-bottom:1px solid rgba(0,0,0,.12);box-shadow:0 2px 10px rgba(0,0,0,.12)}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px}
.brand img{height:46px;width:auto}
.menu{display:flex;align-items:center;gap:1.8rem}
.menu a{font-weight:700;color:#fff;font-size:.98rem;transition:color .15s}
.menu a:hover{color:var(--navy)}
.nav-cta{background:var(--navy);color:#fff!important;padding:.55rem 1.2rem;border-radius:999px}
.nav-cta:hover{background:#06122a}

/* Buttons */
.btn{display:inline-block;font-weight:700;padding:.85rem 1.7rem;border-radius:999px;transition:transform .12s,background .15s,box-shadow .15s;cursor:pointer}
.btn-primary{background:var(--accent);color:#022;box-shadow:0 8px 22px rgba(0,180,216,.35)}
.btn-primary:hover{background:var(--accent-d);color:#fff;transform:translateY(-2px)}
.btn-ghost{border:2px solid rgba(255,255,255,.5);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.12)}

/* Hero */
.hero{background:radial-gradient(1100px 500px at 80% -10%,rgba(0,180,216,.30),transparent 60%),linear-gradient(135deg,var(--navy),#0e3a6b 60%,var(--blue));color:#fff;padding:84px 0 96px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.hero h1{color:#fff;font-size:clamp(2.6rem,6vw,4.4rem);margin-bottom:1rem}
.hero .lead{font-size:1.18rem;color:#cfe0f3;max-width:34ch;margin-bottom:2rem}
.hero-actions{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:2rem}
.badges{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap}
.badges img{height:44px;width:auto}
.hero-art img{border-radius:var(--radius);box-shadow:0 30px 70px rgba(0,0,0,.45);transform:rotate(1.5deg)}

/* Product cards */
.cards{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:34px;box-shadow:var(--shadow-sm);transition:transform .15s,box-shadow .15s;display:block}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.pill{display:inline-block;background:var(--soft);color:var(--blue);font-weight:700;font-size:.78rem;padding:.35rem .8rem;border-radius:999px;letter-spacing:.03em;margin-bottom:1rem}
.card h3{font-size:1.5rem;margin-bottom:.6rem}
.card p{color:var(--muted);margin-bottom:1.2rem}
.card-link{font-weight:700;color:var(--accent-d)}

/* Split sections */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split.reverse .split-media{order:2}
.split-media img{border-radius:var(--radius);box-shadow:var(--shadow);width:100%;object-fit:cover}
.split-copy h2{font-size:clamp(1.6rem,3vw,2.3rem);margin-bottom:1rem}
.split-copy p{color:var(--muted);margin-bottom:1.4rem;font-size:1.05rem}
.features{list-style:none;margin-bottom:1.6rem}
.features li{position:relative;padding-left:2rem;margin-bottom:.7rem;color:var(--ink)}
.features li::before{content:"";position:absolute;left:0;top:.45em;width:14px;height:14px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(0,180,216,.18)}
.specs{display:flex;gap:1.4rem;flex-wrap:wrap}
.specs div{background:var(--soft);border-radius:12px;padding:.9rem 1.3rem;text-align:center;min-width:96px}
.specs strong{display:block;font-size:1.7rem;color:var(--navy);line-height:1}
.specs span{font-size:.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}

/* Footer */
.site-footer{background:var(--navy);color:#a9c2dd;padding:48px 0}
.foot{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.foot-logo{height:42px;width:auto}
.foot p{font-size:.9rem;max-width:60ch}

/* Responsive */
@media(max-width:860px){
	.hero-grid,.split,.split.reverse .split-media,.cards{grid-template-columns:1fr}
	.split.reverse .split-media{order:0}
	.hero-art{order:-1}
	.menu a:not(.nav-cta){display:none}
	.section{padding:60px 0}
}

/* ===== Multi-page components ===== */
/* sub-page header */
.subhero{background:linear-gradient(135deg,var(--navy),var(--blue));color:#fff;padding:64px 0 56px}
.subhero .eyebrow{color:#9fd9ff}
.subhero h1{color:#fff;font-size:clamp(2rem,4.5vw,3rem);margin-bottom:.5rem}
.subhero p{color:#cfe0f3;max-width:60ch;font-size:1.1rem}
.subhero .pill{background:rgba(255,255,255,.14);color:#fff}
.breadcrumb{font-size:.85rem;color:#9fd9ff;margin-bottom:1rem}
.breadcrumb a{color:#cfe0f3}

/* feature grid */
.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;margin-top:1.5rem}
.feature-grid .f{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px 22px;box-shadow:var(--shadow-sm)}
.feature-grid .f h4{color:var(--navy);font-size:1.05rem;margin-bottom:.3rem}
.feature-grid .f p{color:var(--muted);font-size:.95rem;margin:0}

/* video grid */
.video-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:26px;margin-top:2rem}
.video{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow-sm)}
.video .embed{position:relative;padding-bottom:56.25%;height:0;background:#000}
.video .embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video h4{padding:14px 18px 16px;font-size:1.02rem;color:var(--navy)}

/* FAQ accordion (native details) */
.faq{max-width:820px;margin:1.5rem auto 0}
.faq details{background:#fff;border:1px solid var(--line);border-radius:12px;margin-bottom:12px;box-shadow:var(--shadow-sm);overflow:hidden}
.faq summary{cursor:pointer;padding:18px 22px;font-weight:700;color:var(--navy);list-style:none;display:flex;justify-content:space-between;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--accent-d);font-size:1.4rem;font-weight:700}
.faq details[open] summary::after{content:"\2013"}
.faq .answer{padding:0 22px 20px;color:var(--muted)}

/* download / resource cards */
.downloads{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-top:1.5rem}
.dl{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 20px;box-shadow:var(--shadow-sm);transition:transform .14s,box-shadow .14s}
.dl:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.dl .ic{flex:0 0 auto;width:44px;height:44px;border-radius:10px;background:var(--soft);display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--blue);font-size:.8rem}
.dl strong{display:block;color:var(--navy)}
.dl span{font-size:.85rem;color:var(--muted)}

/* how-to steps */
.howto{margin-top:1.5rem}
.howto .step{background:#fff;border-left:5px solid var(--accent);border-radius:0 12px 12px 0;padding:18px 22px;margin-bottom:14px;box-shadow:var(--shadow-sm)}
.howto .step h4{color:var(--navy);margin-bottom:.3rem}
.howto .step p{color:var(--muted);margin:0}

@media(max-width:860px){
	.menu a:not(.nav-cta){display:none}
}

/* ===== Manifold app sections ===== */
.zones{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:1.8rem}
.zone{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-sm);text-align:center}
.zone img{width:100%;height:340px;object-fit:contain;background:#0a1f3c;padding:14px}
.zone .z-body{padding:16px 18px 20px}
.zone .tag{display:inline-block;font-weight:800;letter-spacing:.05em;padding:.3rem .9rem;border-radius:999px;color:#fff;font-size:.85rem;margin-bottom:.5rem}
.zone.b .tag{background:#1f6dd0}.zone.g .tag{background:#1f9d57}.zone.r .tag{background:#d23b3b}
.zone p{color:var(--muted);font-size:.95rem;margin:0}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px;margin-top:1.8rem}
.shot{background:#0a1f3c;border-radius:14px;overflow:hidden;box-shadow:var(--shadow-sm)}
.shot img{width:100%;height:300px;object-fit:contain;padding:12px;background:#0a1f3c}
.shot span{display:block;background:#fff;color:var(--navy);font-weight:600;font-size:.9rem;text-align:center;padding:10px}
.kit{columns:2;column-gap:48px;margin-top:1.5rem;max-width:900px}
.kit li{break-inside:avoid;margin-bottom:.7rem;color:var(--ink);list-style:none;position:relative;padding-left:1.8rem}
.kit li::before{content:"\2713";position:absolute;left:0;color:var(--accent-d);font-weight:800}
.kit li ul{margin:.4rem 0 0 0}
.kit li ul li{font-size:.93rem;color:var(--muted);padding-left:1.4rem;margin-bottom:.3rem}
.kit li ul li::before{content:"\2013";color:var(--muted)}
@media(max-width:760px){.zones{grid-template-columns:1fr}.kit{columns:1}}

/* ===== Home: value props (Smart/Accurate/Tough) ===== */
.valueprops{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin-top:2.5rem}
.vp{text-align:center}
.vp .vp-ic{width:84px;height:84px;margin:0 auto 1.1rem;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--accent),var(--blue));box-shadow:0 10px 26px rgba(0,180,216,.35)}
.vp .vp-ic svg{width:40px;height:40px;stroke:#fff;fill:none;stroke-width:2}
.vp h3{color:var(--accent);font-size:1.4rem;margin-bottom:.5rem}
.vp p{color:var(--muted);max-width:32ch;margin:0 auto}
.section.dark{background:#10243f;color:#cfe0f3}
.section.dark .section-title,.section.dark h3{color:#fff}
.section.dark .vp p{color:#aebfd6}
.section.dark .vp h3{color:var(--accent)}
@media(max-width:760px){.valueprops{grid-template-columns:1fr;gap:40px}}

/* ===== Home: centered hero + full-width product banner ===== */
.hero-center{padding:72px 0 52px;text-align:center}
.hero-center .eyebrow{color:#9fd9ff}
.hero-center .lead{max-width:48ch;margin:0 auto 2rem}
.hero-center .hero-actions{justify-content:center}
.hero-center .badges{justify-content:center}
.hero-banner{background:#fff;border-bottom:1px solid var(--line)}
.hero-banner img{display:block;width:100%;max-width:1180px;margin:0 auto}

/* hero transparent product graphic */
.hero-logo img{width:100%;max-width:540px;margin:0 auto;display:block;filter:drop-shadow(0 22px 44px rgba(0,0,0,.45))}
@media(max-width:860px){.hero-logo{order:-1}}
