@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* Nodalia — purposeful product design. One stylesheet, one coherent system. */
:root{
  color-scheme:light;
  --paper:#f6f6f2;
  --white:#fff;
  --ink:#1a211d;
  --ink-soft:#39433d;
  --muted:#657169;
  --line:#d9dcd5;
  --dark:#18221f;
  --green:#dce8ce;
  --max:1240px;
  font-family:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;background:var(--paper);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:3px solid #758c69;outline-offset:4px}
img{display:block;max-width:100%}
h1,h2,h3,p,figure{margin:0}
h1,h2,h3{letter-spacing:-.056em;line-height:1.09}
h1,h2{font-weight:600}
h3{font-weight:600}
p{color:var(--muted)}
.container{width:min(var(--max),calc(100% - 88px));margin:0 auto}
.kicker,.eyebrow,.micro,.project-no,.project-type,.project-meta,.pill,.feature .num,.release-spec dt,.small-label{
  font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Consolas,monospace;
}
.kicker,.eyebrow{color:var(--muted);font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:500}
.visually-hidden{clip:rect(0,0,0,0);clip-path:inset(50%);position:absolute;width:1px;height:1px;overflow:hidden;white-space:nowrap}
.topbar{position:sticky;top:0;z-index:40;background:#f6f6f2f5;border-bottom:1px solid var(--line);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.topbar-inner{height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:inline-flex;align-items:center;flex-shrink:0}
.brand img{width:160px;height:44px;object-fit:contain;object-position:left center;filter:brightness(0)}
.nav{display:flex;align-items:center;gap:32px;font-size:13px;font-weight:600}
.nav a:not(.outline):hover{color:#607767}
.nav .outline{border:1px solid #29372e;padding:10px 17px;transition:background .18s,color .18s}
.nav .outline:hover{background:var(--ink);color:white}
.btn{border:1px solid var(--ink);min-height:51px;padding:12px 21px;display:inline-flex;align-items:center;justify-content:center;gap:12px;font:600 13px 'DM Sans',sans-serif;transition:background .18s,color .18s,transform .18s}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--ink);color:#fff}
.btn-primary:hover{background:#3d5446;border-color:#3d5446}
.btn-secondary{background:transparent;color:var(--ink)}
.btn-secondary:hover{background:#e9ebe5}
.actions{display:flex;flex-wrap:wrap;gap:11px;margin-top:29px}
.text-link{text-decoration:underline;text-underline-offset:5px;font-weight:600}
.text-link:hover{text-decoration-thickness:2px}
.note,.small-label{font-size:12px;color:var(--muted)}
.section{padding:108px 0}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:34px}
.section-head h2,.section h2{font-size:clamp(37px,4.8vw,66px);max-width:840px}
.section-head p{max-width:410px;font-size:15px;line-height:1.8}
.rule{height:1px;background:var(--line)}

/* Hero: clear typography and real in-product screenshots */
.home-hero{padding:74px 0 70px}
.hero-upper{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(260px,.7fr);gap:76px;align-items:end}
.hero-title{font-size:clamp(4rem,8vw,7.65rem);font-weight:600;letter-spacing:-.08em;line-height:.99;margin:28px 0 0}
.hero-title em{font-style:normal;color:#657c69}
.hero-aside{padding-bottom:10px}
.hero-aside p{font-size:clamp(16px,1.7vw,19px);line-height:1.65;color:var(--ink-soft);max-width:400px}
.hero-aside .actions{margin-top:32px}
.hero-lower{margin-top:80px;display:grid;grid-template-columns:minmax(0,1.65fr) minmax(250px,1fr);gap:17px}
.preview-feature{background:var(--dark);color:#fff;position:relative;min-width:0;overflow:hidden}
.preview-feature--vinilo{padding:26px 28px 0}
.preview-feature--lienzo{padding:26px 28px 0;background:#dce4d9;color:var(--ink)}
.preview-feature .preview-heading{display:flex;align-items:baseline;justify-content:space-between;gap:15px;padding-bottom:18px}
.preview-heading strong{font-size:19px;letter-spacing:-.035em}
.preview-heading span{font:11px 'IBM Plex Mono',monospace;color:#adb9ae}
.preview-feature--lienzo .preview-heading span{color:#506356}
.preview-feature .preview-image{aspect-ratio:16/9;overflow:hidden;border:1px solid #ffffff24;background:#272e2b}
.preview-feature--lienzo .preview-image{border-color:#a5b6a4;background:#c5d0c3}
.preview-image img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .45s ease}
.preview-feature:hover img{transform:scale(1.025)}
.preview-bottom{display:flex;justify-content:space-between;align-items:center;padding:17px 0 19px;font:11px 'IBM Plex Mono',monospace;color:#bec8bf}
.preview-feature--lienzo .preview-bottom{color:#506356}
.preview-bottom span:last-child{font-size:17px}
.preview-feature a{position:absolute;inset:0;z-index:2}
.preview-feature a:focus-visible{outline-offset:-4px}
.feature-caption{display:flex;align-items:center;justify-content:space-between;gap:14px;border-bottom:1px solid var(--line);padding:19px 0;color:var(--muted);font:11px 'IBM Plex Mono',monospace}

/* Actual product data, no invented UI mockups */
.catalogue{padding:108px 0 120px}
.project-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.project-card{display:flex;flex-direction:column;min-width:0;border:1px solid var(--line);background:#fff;transition:border-color .2s,transform .2s}
.project-card:hover{transform:translateY(-3px);border-color:#8e9d90}
.project-visual{height:278px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#e8eee6}
.project-card[data-product="nodalix"] .project-visual{background:#172323}
.project-card[data-product="vortia"] .project-visual{background:#e8f0f2}
.project-card[data-product="vinilo"] .project-visual{background:#e7e3e9}
.project-card[data-product="lienzo"] .project-visual{background:#e1e7df}
.project-visual img{max-width:82%;height:auto;max-height:195px;object-fit:contain}
.project-visual img.real-preview{width:100%;height:100%;max-height:none;max-width:none;object-fit:cover;object-position:top}
.project-card[data-product="nodalix"] .project-visual img{max-height:154px}
.project-body{padding:29px 30px 27px;display:flex;flex-direction:column;flex:1}
.project-meta{display:flex;justify-content:space-between;gap:10px;color:var(--muted);font-size:10px;text-transform:uppercase}
.project-body h3{font-size:clamp(34px,3vw,45px);margin:25px 0 10px}
.project-body p{font-size:14px;line-height:1.75;max-width:510px;flex:1}
.project-bottom{border-top:1px solid var(--line);margin-top:33px;padding-top:19px;display:flex;justify-content:space-between;align-items:center;gap:16px}
.project-bottom span{font-size:12px;color:var(--muted)}
.project-bottom a{font-weight:600;font-size:13px;white-space:nowrap}
.project-bottom a:hover{text-decoration:underline;text-underline-offset:4px}

/* One intentionally strong block rather than floating glows and faux UI */
.os-feature{background:#15211e;color:#fff;padding:90px 0}
.os-feature-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:70px;align-items:center}
.os-feature .eyebrow{color:#a8b8ac}
.os-feature h2{font-size:clamp(3rem,5.2vw,5.8rem);max-width:780px;margin:25px 0}
.os-feature p{color:#cad4cc;font-size:17px;max-width:620px;line-height:1.65}
.os-feature .btn{background:#ecf0e7;border-color:#ecf0e7;color:#19251c}
.os-feature .btn:hover{background:#d4e2ce}
.os-specimen{min-height:330px;border:1px solid #506054;display:flex;flex-direction:column;justify-content:space-between;padding:28px}
.os-specimen img{width:104px;height:104px;object-fit:contain}
.os-specimen span{font:12px/2 'IBM Plex Mono',monospace;color:#ced8d0;letter-spacing:.04em}
.value-band{background:#e9eee7;border-top:1px solid #d1d9ce}
.value-row{display:grid;grid-template-columns:repeat(3,1fr);gap:35px;padding:59px 0}
.value-row >div{border-top:1px solid #aeb9ac;padding-top:19px}
.value-row h3{font-size:19px;letter-spacing:-.04em;margin-bottom:12px}
.value-row p{font-size:13px;line-height:1.7;max-width:320px}

/* Individual products */
.product-hero{padding:85px 0 95px}
.product-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.98fr);gap:clamp(30px,5vw,80px);align-items:center}
.product-identity{display:flex;align-items:center;gap:16px;padding-bottom:23px;border-bottom:1px solid var(--line);margin-bottom:45px}
.product-identity img{width:58px;height:58px;object-fit:contain}
.product-identity strong{display:block;font-size:18px}
.product-identity span{font-size:12px;color:var(--muted)}
.product-hero h1{font-size:clamp(3.5rem,5.8vw,6.4rem);letter-spacing:-.07em;line-height:1.03;margin:17px 0 27px}
.product-hero .lede{font-size:18px;line-height:1.7;max-width:560px;color:var(--ink-soft)}
.product-meta{display:flex;flex-wrap:wrap;gap:9px;margin-top:30px}
.pill{border:1px solid #c0cbc0;font-size:11px;padding:8px 11px;color:#526152;letter-spacing:0}
.product-showcase{background:#e6ebe4;min-height:455px;padding:23px;display:flex;align-items:center;justify-content:center}
.product-showcase figure{margin:0;width:100%}
.product-showcase figure img{width:100%;height:auto;max-height:500px;object-fit:contain;border:1px solid #cbd4c9}
.product-showcase figcaption{padding-top:12px;font-size:11px;color:var(--muted)}
.product-brand-panel{width:100%;height:400px;background:#162322;color:#fff;padding:37px;display:flex;flex-direction:column;justify-content:space-between}
.product-brand-panel img{width:100px;height:100px;object-fit:contain}
.product-brand-panel strong{font-size:clamp(40px,4vw,66px);letter-spacing:-.065em}
.product-brand-panel p{font-size:13px;color:#bac8be;max-width:310px}
.features-section{border-top:1px solid var(--line)}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink);margin-top:34px}
.feature{border-right:1px solid var(--line);padding:33px 28px 33px 0}
.feature + .feature{padding-left:28px}
.feature:last-child{border-right:0}
.feature .num{font-size:11px;color:var(--muted);display:block;margin-bottom:44px}
.feature h3{font-size:clamp(21px,2.1vw,29px);margin-bottom:16px}
.feature p{font-size:14px;line-height:1.7}
.notice{padding:22px 24px;border:1px solid #cbd2c8;background:#eaf0e8;margin-top:32px;color:#475448;font-size:14px;line-height:1.75}
.notice strong{color:var(--ink)}
.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.gallery figure{margin:0}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:top;border:1px solid var(--line)}
.gallery figcaption{font-size:12px;color:var(--muted);margin-top:10px}
.product-outro{background:#e9eee7;border-top:1px solid var(--line)}
.product-outro p{max-width:650px}

/* Existing Nodalix GitHub releases / SHA verification UI */
.iso-section{background:#e9eee7;border-top:1px solid var(--line)}
.iso-intro{max-width:780px;font-size:16px}
.download-panel{border:1px solid #9da99d;background:var(--paper);padding:clamp(24px,4vw,45px);margin-top:31px}
.download-panel h3{font-size:clamp(25px,3vw,43px);margin:17px 0 8px}
.download-panel p{font-size:14px}
.tag{display:inline-block;padding:7px 11px;border:1px solid var(--line);font:11px 'IBM Plex Mono',monospace;color:var(--muted)}
.release-spec{border-top:1px solid var(--line);margin:30px 0 0;padding-top:23px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.release-spec dt{font-size:11px;color:var(--muted);text-transform:uppercase}
.release-spec dd{margin:4px 0 0;font-weight:600}
.checksum{border-top:1px solid var(--line);margin-top:26px;padding-top:20px}
.checksum[hidden]{display:none}
.checksum strong{font-size:13px}
.checksum code{font-size:13px;overflow-wrap:anywhere;display:block;margin-top:8px}
.checksum p{font-size:12px}
.download-links{display:flex;align-items:center;flex-wrap:wrap;gap:15px 24px;margin-top:24px}
.download-links p{flex-basis:100%;margin-bottom:0}
.install-section code{overflow-wrap:anywhere}
.footer{background:#e9eee7;border-top:1px solid #cfd7cc;padding:65px 0}
.footer-content{display:flex;align-items:flex-start;justify-content:space-between;gap:45px}
.footer .brand img{width:184px}
.footer p{font-size:12px;margin-top:14px;max-width:460px}
.footer-links{display:flex;flex-wrap:wrap;gap:25px;font-size:13px;font-weight:600}
.footer-links a:hover{text-decoration:underline;text-underline-offset:5px}
@media(max-width:1040px){
 .container{width:min(var(--max),calc(100% - 56px))}
 .hero-upper{gap:40px}
 .hero-title{font-size:clamp(3.6rem,8vw,6.2rem)}
 .os-feature-grid{grid-template-columns:minmax(0,1fr) 250px;gap:30px}
 .os-specimen{min-height:275px}
}
@media(max-width:800px){
 .hero-upper,.product-layout{grid-template-columns:1fr;gap:35px}
 .hero-upper h1{max-width:680px}
 .hero-aside p{max-width:620px}
 .hero-lower{margin-top:55px}
 .project-grid{gap:12px}
 .project-visual{height:210px}
 .os-feature-grid{grid-template-columns:1fr}
 .os-specimen{min-height:0;flex-direction:row;align-items:center}
 .section-head{display:block}
 .section-head p{margin-top:22px}
 .feature-grid{grid-template-columns:1fr}
 .feature,.feature + .feature{padding:25px 0;border-right:0;border-bottom:1px solid var(--line)}
 .feature .num{margin-bottom:19px}
 .gallery{grid-template-columns:repeat(2,1fr)}
 .value-row{grid-template-columns:1fr 1fr}
 .product-showcase{min-height:300px}
}
@media(max-width:600px){
 .container{width:calc(100% - 36px)}
 .topbar-inner{height:66px}
 .brand img{width:122px;height:34px}
 .nav{gap:15px;font-size:12px}
 .nav .optional{display:none}
 .nav .outline{padding:8px 12px}
 .home-hero{padding:48px 0 52px}
 .hero-title{font-size:clamp(3.35rem,13vw,5.2rem);margin-top:17px}
 .hero-aside p{font-size:16px}
 .hero-lower{grid-template-columns:1fr;margin-top:43px}
 .preview-feature--vinilo,.preview-feature--lienzo{padding:17px 17px 0}
 .feature-caption{font-size:10px;line-height:1.7}
 .section,.catalogue{padding:72px 0}
 .section h2,.section-head h2{font-size:clamp(36px,10vw,51px)}
 .project-grid,.value-row{grid-template-columns:1fr}
 .project-visual{height:225px}
 .project-body{padding:23px}
 .project-body h3{font-size:37px;margin-top:18px}
 .os-feature{padding:68px 0}
 .os-feature h2{font-size:clamp(3rem,11vw,4rem)}
 .os-specimen{padding:22px}
 .os-specimen img{width:70px;height:70px}
 .product-hero{padding:52px 0 72px}
 .product-hero h1{font-size:clamp(3rem,12vw,5rem)}
 .product-hero .lede{font-size:16px}
 .product-showcase{min-height:240px;padding:13px}
 .product-brand-panel{height:340px;padding:26px}
 .gallery{grid-template-columns:1fr}
 .footer-content{display:block}
 .footer-links{margin-top:28px}
 .release-spec{grid-template-columns:1fr 1fr}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *,*::before,*::after{transition:none!important;animation:none!important}
}