/* Seanautics site — built on tokens.css (design system). Square corners, flat, tinted shadows. */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--surface-page);color:var(--text-body);font:var(--text-body-02);-webkit-font-smoothing:antialiased}
a{color:var(--text-link);text-decoration:none;transition:color var(--dur-fast-02) var(--easing-productive)}
a:hover{color:var(--color-primary-hover);text-decoration:underline}
:focus-visible{outline:none;box-shadow:var(--focus-ring)}
img{max-width:100%;display:block}
h1,h2,h3,h4{margin:0}
.wrap{max-width:var(--content-max);margin:0 auto;padding:0 var(--space-06)}
.eyebrow{text-transform:uppercase;color:var(--color-fg-2);font:var(--text-eyebrow);letter-spacing:.32px}

/* header */
:root{--hdr-h:80px;--btn-fs:14px;--btn-h:calc(2*var(--btn-fs));--btn-inset:calc((var(--hdr-h) - var(--btn-h))/2);--hdr-r:calc(var(--hdr-h)*.3);--radius-nested:calc(var(--hdr-r)*.75)}
.top{position:fixed;top:0;left:16px;right:16px;max-width:calc(var(--content-max) - 48px);margin:0 auto;z-index:10;background:rgba(255,255,255,.3);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);border:1px solid rgba(255,255,255,.55);border-top:0;border-radius:0 0 var(--hdr-r) var(--hdr-r);box-shadow:var(--shadow-01)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:var(--hdr-h);max-width:none;padding:0 var(--btn-inset) 0 var(--space-07)}
.top img{height:36px;width:auto}
.nav{display:flex;gap:var(--space-06);align-items:center}
.nav a{font:var(--text-type-body-compact-01);color:var(--color-fg-1)}
.nav a.btn{height:var(--btn-h);min-height:0;padding:0 var(--btn-fs);border:0;font-size:var(--btn-fs);line-height:1;font-weight:500;border-radius:var(--radius-nested)}
.card .tag{corner-shape:squircle}
@supports (corner-shape:superellipse(1.585)){.top,.nav a.btn{corner-shape:superellipse(1.585)}}
.card[id]{scroll-margin-top:112px}
.nav a:hover{color:var(--color-primary);text-decoration:none}
.nav a.btn-primary,.nav a.btn-primary:hover{color:var(--color-fg-on-primary)}
.top.on-hero .nav a:not(.btn){color:#fff}
.top.on-hero .nav a.btn-primary{background:#fff;color:var(--color-primary)}
.top.on-hero .nav a.btn-primary:hover{background:var(--color-bg-hover);color:var(--color-primary)}

/* buttons: square, no pills */
.btn{display:inline-flex;align-items:center;min-height:48px;padding:0 var(--space-06);font:500 14px/18px var(--font-sans);border:1px solid transparent;border-radius:var(--radius-00);cursor:pointer;transition:background var(--dur-fast-02) var(--easing-productive)}
.btn:hover{text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--color-primary);color:var(--color-fg-on-primary)}
.btn-primary:hover{background:var(--color-primary-hover);color:#fff}
.btn-primary:active{background:var(--color-primary-active)}
.btn-ghost{background:transparent;color:#fff;border-color:var(--color-border-inverse)}
.btn-ghost:hover{background:rgba(255,255,255,.12);color:#fff}
.btn-white{background:#fff;color:var(--color-primary)}
.btn-white:hover{background:var(--color-bg-hover);color:var(--color-primary)}

/* hero: the one brand fade + graticule */
.hero{color:#fff;background:var(--pattern-graticule),linear-gradient(160deg,var(--color-primary),var(--color-primary-deep));padding:calc(var(--space-12) + 56px) 0 var(--space-12)}
section{scroll-margin-top:96px}
.hero .eyebrow{color:#fff;opacity:.85;display:flex;align-items:center;gap:var(--space-03)}
.hero .eyebrow::before{content:"";width:8px;height:8px;border-radius:var(--radius-full);background:var(--color-accent)}
.hero h1{font:var(--text-type-display-01);letter-spacing:-.5px;margin:var(--space-06) 0;max-width:14ch}
.hero p{font:var(--text-type-heading-03);max-width:46ch;opacity:.92;margin:0 0 var(--space-08)}
.hero .actions{display:flex;gap:var(--space-05);flex-wrap:wrap}

section{padding:var(--space-11) 0}
.sec-head{margin-bottom:var(--space-08);max-width:60ch}
.sec-head h2{font:var(--text-type-heading-05);letter-spacing:-.16px;margin-top:var(--space-03)}
.sec-head p{color:var(--color-fg-2);margin:var(--space-05) 0 0}

/* cards */
.grid{display:grid;gap:var(--space-07);grid-template-columns:repeat(3,1fr)}
.card{background:var(--surface-card);border:1px solid var(--color-border-subtle);padding:var(--space-06);display:flex;flex-direction:column;gap:var(--space-04);transition:box-shadow var(--dur-fast-02) var(--easing-productive),border-color var(--dur-fast-02) var(--easing-productive)}
.card:hover{box-shadow:var(--shadow-01);border-color:var(--color-border-strong)}
.card .tag{align-self:flex-start;background:var(--color-info-bg);color:var(--color-fg-1);font:var(--text-type-label-01);padding:2px var(--space-03);border-radius:var(--radius-01);margin-bottom:var(--space-03)}
.card h3{font:var(--text-type-heading-02)}
.card p{margin:0;color:var(--color-fg-2);font:var(--text-type-body-01)}
.card ul{margin:var(--space-03) 0 0;padding:0;list-style:none;font:var(--text-type-body-compact-01);color:var(--color-fg-1)}
.card li{padding:var(--space-03) 0;border-top:1px solid var(--color-border-subtle)}
.card .mono{font-family:var(--font-mono)}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-07);counter-reset:s}
.step{border-top:2px solid var(--color-primary);padding-top:var(--space-05)}
.step .n{font:400 14px/18px var(--font-mono);color:var(--color-fg-2)}
.step h3{font:var(--text-type-heading-02);margin:var(--space-03) 0}
.step p{margin:0;font:var(--text-type-body-01);color:var(--color-fg-2)}
.alt{background:var(--color-surface)}

/* cta band */
.cta{background:var(--color-primary);color:#fff}
.cta .wrap{display:flex;justify-content:space-between;align-items:center;gap:var(--space-07);flex-wrap:wrap}
.cta h2{font:var(--text-type-heading-06);max-width:22ch}

/* contact */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-09)}
.contact dl{margin:0}
.contact dt{margin-top:var(--space-06)}
.contact dd{margin:var(--space-03) 0 0;font:var(--text-body-02)}
.mono{font-family:var(--font-mono)}

footer{background:var(--color-surface-inverse);color:#c6c6c6;padding:var(--space-09) 0;font:var(--text-type-body-compact-01)}
footer .wrap{display:flex;justify-content:space-between;gap:var(--space-07);flex-wrap:wrap}
footer strong{color:#fff;font-weight:600}

@media(max-width:1055px){.grid,.steps{grid-template-columns:1fr 1fr}.contact{grid-template-columns:1fr}.hero h1{font-size:54px;line-height:64px}}
@media(max-width:671px){
 .grid,.steps{grid-template-columns:1fr}
 .nav a:not(.btn){display:none}
 .hero{padding:calc(var(--space-10) + 48px) 0 var(--space-10)}
 :root{--hdr-h:64px}
 .top{left:12px;right:12px}
 .top .wrap{padding:0 var(--btn-inset) 0 var(--space-06)}
 .hero h1{font:var(--text-type-heading-07);font-size:42px;line-height:50px}
 .hero p{font:var(--text-type-body-02)}
 section{padding:var(--space-10) 0}
 .cta h2{font:var(--text-type-heading-04)}
 .top img{height:30px}
}
@media(max-width:900px){.nav a:not(.btn){display:none}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
/* hero: copy left, software picture right */
.hero-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--space-09);align-items:center}
.hero-grid h1{max-width:none}
.hero-grid p{max-width:30ch}
.hero-shot{margin:0}
.hero-shot img{width:100%;height:auto;aspect-ratio:8/5;object-fit:cover;border:1px solid rgba(255,255,255,.35);border-radius:var(--hdr-r);box-shadow:0 24px 60px rgba(0,0,40,.45)}
@supports (corner-shape:superellipse(1.585)){.hero-shot img{corner-shape:superellipse(1.585)}}
@media(max-width:1055px){.hero-grid{grid-template-columns:1fr;gap:var(--space-08)}}

/* news: horizontal scroller */
.news-scroller{display:flex;gap:var(--space-06);overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:var(--space-05);scrollbar-width:thin}
.news-card{flex:0 0 min(420px,82vw);scroll-snap-align:start;display:flex;flex-direction:column;gap:var(--space-03);padding:var(--space-05);background:var(--surface-card);border:1px solid var(--color-border-subtle);border-radius:var(--hdr-r)}
@supports (corner-shape:superellipse(1.585)){.news-card,.news-img{corner-shape:superellipse(1.585)}}
.news-img{display:flex;align-items:center;justify-content:center;aspect-ratio:16/10;margin-bottom:var(--space-03);border:1px dashed var(--color-border-strong);border-radius:var(--radius-nested);background:var(--color-surface-2);color:var(--color-fg-3);font:var(--text-type-label-01)}
.news-date{font:var(--text-type-label-01);color:var(--color-fg-3)}
.news-card h3{font:var(--text-type-heading-02)}
.news-card p{margin:0;color:var(--color-fg-2);font:var(--text-type-body-01)}

/* overview: image above each step, single row */
.step-img{display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;margin-bottom:var(--space-05);border:1px dashed var(--color-border-strong);border-radius:var(--radius-nested);background:var(--color-bg);color:var(--color-fg-3);font:var(--text-type-label-01)}
@supports (corner-shape:superellipse(1.585)){.step-img{corner-shape:superellipse(1.585)}}

/* product modals */
.card[data-modal]{cursor:pointer}
.card .more{margin-top:auto;padding-top:var(--space-04);font:500 14px/18px var(--font-sans);color:var(--color-primary)}
body:has(dialog[open]){overflow:hidden}
.modal{width:min(880px,calc(100vw - 32px));max-height:88vh;overflow:auto;padding:var(--space-08);border:1px solid var(--color-border-subtle);border-radius:var(--hdr-r);background:var(--color-bg);color:var(--text-body);box-shadow:0 30px 80px rgba(0,0,40,.4)}
@supports (corner-shape:superellipse(1.585)){.modal,.modal-img{corner-shape:superellipse(1.585)}}
.modal::backdrop{background:rgba(2,4,24,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.modal-x{position:absolute;top:var(--space-04);right:var(--space-05);width:40px;height:40px;border:0;border-radius:50%;background:var(--color-surface);color:var(--color-fg-1);font:400 28px/40px var(--font-sans);cursor:pointer}
.modal-x:hover{background:var(--color-bg-hover)}
.modal .tag{display:inline-block;background:var(--color-info-bg);color:var(--color-fg-1);font:var(--text-type-label-01);padding:2px var(--space-03);border-radius:var(--radius-01)}
.modal h2{font:var(--text-type-heading-05);margin:var(--space-04) 0 var(--space-03);padding-right:48px}
.modal-lead{margin:0 0 var(--space-06);font:var(--text-type-heading-03);color:var(--color-fg-2)}
.modal-imgs{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-05);margin-bottom:var(--space-06)}
.modal-img{display:flex;align-items:center;justify-content:center;aspect-ratio:16/10;border:1px dashed var(--color-border-strong);border-radius:var(--radius-nested);background:var(--color-surface-2);color:var(--color-fg-3);font:var(--text-type-label-01);text-align:center;padding:var(--space-04)}
.modal p{margin:0 0 var(--space-05);font:var(--text-type-body-02);color:var(--color-fg-2)}
.modal .modal-lead{color:var(--color-fg-2)}
.modal ul{margin:0;padding:0;list-style:none;font:var(--text-type-body-compact-01);color:var(--color-fg-1)}
.modal li{padding:var(--space-03) 0;border-top:1px solid var(--color-border-subtle)}
@media(max-width:671px){.modal{padding:var(--space-06) var(--space-05)}.modal-imgs{grid-template-columns:1fr}}

/* expandable features inside product windows */
.modal li{padding:0}
.feat{display:flex;align-items:center;justify-content:space-between;gap:var(--space-04);width:100%;padding:var(--space-04) 0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.feat:hover .plus{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}
.plus{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border:1px solid var(--color-border-strong);border-radius:50%;font:400 18px/1 var(--font-sans);color:var(--color-primary);transition:transform var(--dur-fast-02) var(--easing-productive),background var(--dur-fast-02) var(--easing-productive)}
.feat[aria-expanded="true"] .plus{transform:rotate(45deg)}
.feat-more{padding:0 var(--space-08) var(--space-04) 0;color:var(--color-fg-2);font:var(--text-type-body-01)}

/* contact: links and query form */
.contact{align-items:start}
.contact-links{margin:0;padding:0;list-style:none;display:grid;gap:var(--space-05)}
.ci{display:inline-flex;align-items:center;gap:var(--space-04);font:500 16px/24px var(--font-sans);color:var(--color-fg-1)}
.ci:hover{color:var(--color-primary);text-decoration:none}
.ci-icon{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;background:var(--color-primary);border-radius:var(--radius-nested)}
.ci:hover .ci-icon{background:var(--color-primary-hover)}
@supports (corner-shape:superellipse(1.585)){.ci-icon,.contact-form input,.contact-form textarea{corner-shape:superellipse(1.585)}}
.contact-form{display:grid;gap:var(--space-05)}
.contact-form h3{font:var(--text-type-heading-03)}
.contact-form label{display:grid;gap:var(--space-03);font:500 14px/18px var(--font-sans);color:var(--color-fg-2)}
.contact-form input,.contact-form textarea{width:100%;padding:0 var(--space-05);border:1px solid var(--color-border-strong);border-radius:var(--radius-nested);background:var(--color-bg);color:var(--color-fg-1);font:400 16px/24px var(--font-sans)}
.contact-form input{height:48px}
.contact-form textarea{padding:var(--space-04) var(--space-05);resize:vertical;min-height:130px}
.contact-form .btn{justify-self:start}

/* contact: compact layout */
.contact{grid-template-columns:1fr;gap:var(--space-07)}
.contact-links{display:flex;gap:var(--space-04);margin:0 0 var(--space-06)}
.contact-form{max-width:900px}
.form-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-05)}
.contact-form textarea{min-height:96px}
@media(max-width:671px){.form-row{grid-template-columns:1fr}}

/* contact: icons beside the heading, tighter spacing */
#contact{padding:var(--space-09) 0}
.contact{gap:var(--space-06)}
.contact-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-06)}
.contact-head .contact-links{margin:0;flex:0 0 auto}

/* contact: blue background */
#contact{background:var(--color-primary);color:#fff}
#contact .eyebrow{color:#fff;opacity:.85}
#contact .sec-head p{color:#fff;opacity:.9}
#contact .contact-form label{color:#fff}
#contact .contact-form input,#contact .contact-form textarea{border-color:transparent}
#contact .ci-icon{background:#fff}
#contact .ci:hover .ci-icon{background:var(--color-bg-hover)}
#contact .ci-icon svg [fill="#fff"]{fill:var(--color-primary)}
#contact .ci-icon svg[stroke]{stroke:var(--color-primary)}
#contact .btn-primary{background:#fff;color:var(--color-primary)}
#contact .btn-primary:hover{background:var(--color-bg-hover);color:var(--color-primary)}

/* overview: five steps in one row with illustrations, no scrollbar */
#approach .steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--space-06);overflow:visible}
img.step-img{display:block;width:100%;height:auto;border:0;background:none;aspect-ratio:4/3;object-fit:cover}
@media(max-width:1055px){#approach .steps{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:671px){#approach .steps{grid-template-columns:1fr}}
.news-card h3{margin-top:var(--space-02)}
.news-soon .news-img{flex:1;aspect-ratio:auto;margin-bottom:0}

/* news: photo fitted inside the 16:10 box, centred text */
.news-photo{display:block;width:100%;aspect-ratio:16/10;object-fit:contain;background:var(--color-surface-2);margin-bottom:var(--space-03);border-radius:var(--radius-nested)}
@supports (corner-shape:superellipse(1.585)){.news-photo{corner-shape:superellipse(1.585)}}
.news-card h3,.news-card p,.news-date{text-align:center}

/* news photo: fixed 16:10 box, never taller than the placeholder */
.news-photo{height:auto;max-height:none}

/* use cases: big Our Niche heading, justified card text */
#products .sec-head h2{font:600 clamp(40px,5vw,64px)/1.1 var(--font-sans);letter-spacing:-.02em;margin-top:0}
#products .card p{text-align:justify;hyphens:auto}