/* Fogliarine / visual system v7. No fonts, images, or animation libraries. */
:root{
  color-scheme:dark;
  --bg:#050907;--surface:#0b1510;--surface-2:#102019;--surface-3:#162a20;
  --ink:#eefaf1;--muted:#a7bdb0;--line:#274335;--accent:#a5ffb5;
  --green:#3ce58a;--green-strong:#18c96a;--danger:#ff8a96;
  --page:1480px;--gutter:clamp(20px,4.5vw,88px);
  --ease:cubic-bezier(.2,.78,.2,1);
  --shadow:0 24px 70px rgba(0,0,0,.28);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;min-width:280px;overflow-x:hidden;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.55;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(circle at 88% 9%,rgba(52,176,96,.095),transparent 36%),linear-gradient(rgba(152,255,175,.017) 1px,transparent 1px),linear-gradient(90deg,rgba(152,255,175,.017) 1px,transparent 1px);background-size:auto,64px 64px,64px 64px}
::selection{background:var(--green);color:#03120a}
button,input{font:inherit}button{cursor:pointer}a{color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
[hidden]{display:none!important}

/* Header and shared language */
.topbar{height:76px;padding-inline:max(var(--gutter),calc((100vw - var(--page))/2));display:flex;align-items:center;justify-content:space-between;gap:20px;position:sticky;top:0;z-index:30;background:rgba(5,12,8,.96);border-bottom:1px solid var(--line)}
.brand{display:inline-flex;align-items:center;gap:12px;white-space:nowrap;text-decoration:none;font-size:clamp(14px,1.1vw,17px);font-weight:850;letter-spacing:.11em}
.brand-icon{display:grid;place-items:center;width:38px;height:38px;flex:none;border-radius:11px;background:var(--green);color:#062313;box-shadow:0 0 0 5px rgba(60,229,138,.08);font-size:21px;letter-spacing:0}
.topbar nav{display:flex;align-items:center;gap:clamp(15px,2vw,34px)}
.topbar nav a,.footer-links a{color:var(--muted);text-decoration:none;font-size:13px;font-weight:650;transition:color .2s ease}
.topbar nav a:hover,.footer-links a:hover{color:var(--accent)}
.cart-trigger{display:inline-flex;align-items:center;gap:10px;min-height:42px;padding:7px 9px 7px 15px;border:1px solid #37654a;border-radius:100px;background:#0e2016;color:var(--ink);font-size:13px;font-weight:750;white-space:nowrap;transition:transform .2s var(--ease),background-color .2s ease}
.cart-trigger:hover{background:#173422;transform:translateY(-2px)}
.cart-trigger span{display:grid;place-items:center;min-width:26px;height:26px;padding-inline:5px;border-radius:50%;background:var(--green);color:#062313;font-size:12px}
.eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--accent);font:750 11px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.18em}
.eyebrow::before{content:"";width:16px;height:1px;background:currentColor}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:13px 22px;border:1px solid transparent;border-radius:12px;text-decoration:none;font-size:12px;font-weight:850;letter-spacing:.075em;text-align:center;transition:transform .22s var(--ease),background-color .22s ease,color .22s ease}
.btn-primary{background:var(--green);color:#062313;box-shadow:0 10px 30px rgba(29,205,108,.17)}
.btn-primary:hover:not(:disabled){transform:translateY(-3px);background:#8bffae}
.btn-primary:active:not(:disabled){transform:translateY(0)}
.btn:disabled{opacity:.42;cursor:not-allowed;box-shadow:none}
.section{width:min(100%,calc(var(--page) + var(--gutter) + var(--gutter)));margin-inline:auto;padding:clamp(76px,8vw,128px) var(--gutter)}
.section-title{max-width:740px;margin:0 auto clamp(32px,4vw,58px);text-align:center}
.section-title h2,.process h2{margin:12px 0 14px;font-size:clamp(32px,3.9vw,58px);line-height:1.09;letter-spacing:-.055em}
.section-title p{margin:0;color:var(--muted);font-size:clamp(15px,1.3vw,17px);line-height:1.7}

/* Hero: restrained editorial typography and an all-CSS product illustration */
.hero{position:relative;isolation:isolate;width:min(100%,calc(var(--page) + var(--gutter) + var(--gutter)));margin-inline:auto;min-height:min(790px,calc(100svh - 76px));padding:clamp(72px,9vw,150px) var(--gutter);display:grid;grid-template-columns:minmax(0,1.12fr) minmax(300px,.88fr);gap:clamp(35px,5vw,100px);align-items:center}
.hero::before{content:"";position:absolute;z-index:-1;top:12%;right:3%;width:min(50vw,680px);aspect-ratio:1;border:1px solid rgba(133,255,172,.1);border-radius:50%;box-shadow:0 0 0 70px rgba(92,230,130,.015),0 0 0 145px rgba(92,230,130,.009);pointer-events:none}
.hero>div:first-child{min-width:0}
.hero h1{max-width:880px;margin:22px 0 26px;font-size:clamp(48px,6.25vw,102px);font-weight:850;line-height:.99;letter-spacing:-.073em;text-wrap:balance}
.hero h1 em{font-style:normal;color:var(--green);text-shadow:0 0 65px rgba(40,223,110,.2)}
.hero p{max-width:560px;margin:0;color:var(--muted);font-size:clamp(16px,1.35vw,19px);line-height:1.75}
.hero .btn{margin-top:34px}
.hero-demo{position:relative;min-width:0;overflow:hidden;border:1px solid #335b41;border-radius:22px;background:#0a1810;box-shadow:var(--shadow),0 0 80px rgba(27,175,79,.08);transform:rotate(1.3deg);transition:transform .35s var(--ease)}
.hero-demo:hover{transform:rotate(0deg) translateY(-4px)}
.demo-bar{display:flex;align-items:center;gap:6px;height:47px;padding-inline:18px;border-bottom:1px solid var(--line);color:#b4c8b8;font:650 10px ui-monospace,monospace;letter-spacing:.12em}
.demo-bar span{display:block;width:7px;height:7px;border-radius:50%;background:#4db76c}
.demo-bar span:nth-child(3){margin-right:auto}
.demo-content{height:clamp(260px,24vw,360px);margin:22px;padding:20px;border:1px solid #afcfb7;border-radius:9px;background:#dcece0;box-shadow:0 15px 32px rgba(0,0,0,.26)}
.demo-nav{height:30px;border-radius:3px;background:#183e29}
.demo-heading{width:67%;height:17px;margin-top:35px;border-radius:3px;background:#245536}
.demo-sub{width:48%;height:7px;margin-top:14px;border-radius:3px;background:#88ad93}
.demo-button{width:29%;height:25px;margin-top:22px;border-radius:4px;background:#20b86b}
.demo-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:32px}
.demo-tiles i{display:block;height:clamp(45px,5vw,72px);border-radius:4px;background:#accdb6}
.demo-caption{padding:0 22px 19px;color:var(--accent);font:700 10px ui-monospace,monospace;letter-spacing:.13em}

/* Catalog */
.category-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.category{position:relative;isolation:isolate;min-width:0;min-height:248px;overflow:hidden;padding:clamp(22px,2.1vw,33px);border:1px solid var(--line);border-radius:18px;background:linear-gradient(150deg,#102019,#0a140e 72%);color:var(--ink);text-align:left;box-shadow:0 10px 30px rgba(0,0,0,.14);transition:transform .26s var(--ease),border-color .26s ease}
.category::after{content:"";position:absolute;z-index:-1;top:-65px;right:-50px;width:160px;height:160px;border:1px solid rgba(148,255,174,.13);border-radius:50%;box-shadow:0 0 0 28px rgba(92,230,130,.018);pointer-events:none}
.category:hover{transform:translateY(-5px);border-color:#63b97d}
.category:active{transform:translateY(-1px)}
.category-icon{position:relative;display:grid;place-items:center;width:52px;height:52px;border:1px solid #39724e;border-radius:13px;background:#153522;color:var(--accent);font-size:0!important}
.category-icon::before,.category-icon::after{content:"";position:absolute;box-sizing:border-box}
.category h3{margin:24px 0 7px;font-size:clamp(19px,1.7vw,24px);line-height:1.25;letter-spacing:-.03em}
.category p{max-width:36ch;min-height:3.4em;margin:0 0 16px;color:var(--muted);font-size:13px;line-height:1.7}
.category b{color:var(--accent);font-size:11px;letter-spacing:.1em}
.category[data-category="office"] .category-icon::before{width:24px;height:24px;left:13px;top:13px;border:2px solid var(--accent);border-radius:3px;background:linear-gradient(90deg,transparent 47%,var(--accent) 47%,var(--accent) 53%,transparent 53%),linear-gradient(transparent 47%,var(--accent) 47%,var(--accent) 53%,transparent 53%)}
.category[data-category="support"] .category-icon::before{width:28px;height:19px;left:11px;top:11px;border:2px solid var(--accent);border-radius:3px}
.category[data-category="support"] .category-icon::after{width:18px;height:8px;left:16px;top:29px;border:2px solid var(--accent);border-top:0}
.category[data-category="landing"] .category-icon::before{width:30px;height:25px;left:10px;top:12px;border:2px solid var(--accent);border-radius:3px;background:linear-gradient(var(--accent),var(--accent)) 5px 7px/17px 2px no-repeat,linear-gradient(var(--accent),var(--accent)) 5px 14px/11px 2px no-repeat}
.category[data-category="site"] .category-icon::before{width:30px;height:26px;left:10px;top:11px;border:2px solid var(--accent);border-radius:3px}
.category[data-category="site"] .category-icon::after{width:30px;height:2px;left:10px;top:19px;background:var(--accent)}
.category[data-category="video"] .category-icon::before{width:30px;height:24px;left:10px;top:13px;border:2px solid var(--accent);border-radius:5px}
.category[data-category="video"] .category-icon::after{width:0;height:0;left:22px;top:19px;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:9px solid var(--accent)}
.category[data-category="material"] .category-icon::before{width:25px;height:29px;left:13px;top:10px;border:2px solid var(--accent);border-radius:2px;background:linear-gradient(var(--accent),var(--accent)) 5px 8px/12px 2px no-repeat,linear-gradient(var(--accent),var(--accent)) 5px 15px/10px 2px no-repeat}
.catalog-note{max-width:780px;margin:28px auto 0;color:var(--muted);font-size:13px;text-align:center;line-height:1.65}

/* How it works */
.steps-section{max-width:none;width:100%;padding-inline:max(var(--gutter),calc((100vw - var(--page))/2));border-block:1px solid var(--line);background:#0a150e}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.steps article{padding:clamp(22px,2.5vw,36px);border:1px solid var(--line);border-radius:17px;background:#0f2015}
.steps b{font:700 24px ui-monospace,monospace;color:var(--green)}
.steps h3{margin:18px 0 7px;font-size:19px;letter-spacing:-.025em}
.steps p{margin:0;color:var(--muted);font-size:14px;line-height:1.7}

/* Company */
.about-section{max-width:none;width:100%;padding-inline:max(var(--gutter),calc((100vw - var(--page))/2));background:radial-gradient(ellipse at 10% 30%,rgba(45,160,88,.1),transparent 42%),#07110b}
.about-shell{max-width:var(--page);margin:auto;display:grid;grid-template-columns:minmax(0,1.22fr) minmax(260px,.78fr);align-items:start;gap:clamp(28px,5vw,96px)}
.about-intro h2,.closing-section h2{max-width:780px;margin:16px 0 22px;font-size:clamp(35px,4.3vw,64px);line-height:1.08;letter-spacing:-.055em;text-wrap:balance}
.about-intro>p,.closing-section p{max-width:680px;margin:0;color:var(--muted);font-size:clamp(15px,1.3vw,18px);line-height:1.8}
.about-details{margin-top:34px;overflow:hidden;border:1px solid #3a6448;border-radius:16px;background:#0d2115}
.about-details summary,.faq-list summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:62px;padding:17px 22px;list-style:none;cursor:pointer;font-weight:750}
.about-details summary::-webkit-details-marker,.faq-list summary::-webkit-details-marker{display:none}
.about-details summary:hover,.faq-list summary:hover{color:var(--accent)}
.chevron{width:11px;height:11px;flex:none;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(45deg);transition:transform .2s ease}
.about-details[open] .chevron{transform:rotate(225deg)}
.about-content{display:grid;grid-template-columns:76px minmax(0,1fr);gap:20px;padding:26px;border-top:1px solid var(--line)}
.founder-monogram{display:grid;place-items:center;width:70px;height:70px;border:1px solid #42845a;border-radius:18px;background:#153c23;color:var(--accent);font-size:23px;font-weight:900}
.about-content h3{margin:0 0 8px;font-size:20px}
.about-content p,.about-values p{margin:0 0 14px;color:var(--muted);font-size:14px;line-height:1.8}
.location-label{display:inline-block;color:var(--accent);font-size:12px;font-weight:750}
.about-values{display:grid;gap:13px}
.about-values>div{padding:24px;border:1px solid var(--line);border-radius:16px;background:#0c1d12}
.about-values h3{margin:14px 0 6px;font-size:17px}
.about-values p{margin:0}
.mini-icon{position:relative;display:block;width:38px;height:38px;border:1px solid #448359;border-radius:11px;background:#163722}
.mini-icon::before,.mini-icon::after{content:"";position:absolute}
.mini-icon-chat::before{inset:9px 8px 11px;border:2px solid var(--accent);border-radius:5px}
.mini-icon-chat::after{width:7px;height:7px;left:12px;bottom:6px;border-left:2px solid var(--accent);transform:skewY(-35deg)}
.mini-icon-build::before{width:20px;height:20px;top:8px;left:8px;border:2px solid var(--accent);border-radius:4px;transform:rotate(45deg)}
.mini-icon-check::before{width:20px;height:11px;top:10px;left:9px;border-bottom:3px solid var(--accent);border-left:3px solid var(--accent);transform:rotate(-45deg)}

/* Partners, FAQ, CTA and footer */
.partner-placeholder{display:flex;align-items:center;gap:25px;max-width:1050px;margin:auto;padding:30px;border:1px dashed #477857;border-radius:18px;background:#0b1b11}
.partner-symbol{position:relative;display:block;width:60px;height:60px;flex:none;border:2px dashed var(--green);border-radius:16px}
.partner-symbol::after{content:"";position:absolute;inset:18px;border:2px solid var(--green);border-radius:50%}
.partner-placeholder>div{min-width:0}.partner-placeholder strong{font-size:clamp(17px,1.5vw,21px)}
.partner-placeholder p{margin:6px 0 0;color:var(--muted);font-size:13px;line-height:1.6}
.partner-link{margin-left:auto;flex:none;color:var(--accent);font-size:12px;font-weight:750;text-decoration:none}
.partner-link:hover{text-decoration:underline}
.faq-section{max-width:none;width:100%;padding-inline:max(var(--gutter),calc((100vw - var(--page))/2));background:#09150e;border-block:1px solid var(--line)}
.faq-list{display:grid;gap:10px;max-width:900px;margin:auto}
.faq-list details{overflow:hidden;border:1px solid var(--line);border-radius:13px;background:#0e2015}
.faq-list summary::after{content:"+";color:var(--accent);font-size:25px;font-weight:400}
.faq-list details[open] summary::after{content:"-"}
.faq-list p{margin:0;padding:0 22px 22px;color:var(--muted);font-size:14px;line-height:1.75}
.closing-section{display:flex;align-items:center;justify-content:space-between;gap:35px;max-width:none;width:100%;padding-inline:max(var(--gutter),calc((100vw - var(--page))/2));background:radial-gradient(circle at 85% 50%,rgba(45,200,104,.16),transparent 45%),#0b1e12}
.closing-section .btn{flex:none}
footer{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;max-width:var(--page);margin:auto;padding:32px var(--gutter);color:var(--muted);font-size:12px}
footer>div:first-child{display:grid;gap:5px}footer strong{color:var(--ink);letter-spacing:.1em}
.footer-links{display:flex;flex-wrap:wrap;gap:18px}.footer-links a{font-size:12px}footer small{font-size:11px}

/* Configurator: keep scroll contained; do not obscure total/actions */
.modal{position:fixed;inset:0;z-index:50;display:none;place-items:center;padding:clamp(8px,2vh,24px);background:rgba(0,4,2,.84)}
.modal.show{display:grid}
.config-dialog{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.93fr);width:min(1260px,100%);height:min(860px,calc(100dvh - 24px));max-height:calc(100dvh - 16px);overflow:hidden;border:1px solid #477b56;border-radius:22px;background:#08140c;box-shadow:0 28px 85px rgba(0,0,0,.5)}
.modal.show .config-dialog{animation:dialog-in .26s var(--ease) both}
.icon-close{display:grid;place-items:center;width:40px;height:40px;flex:none;padding:0;border:1px solid var(--line);border-radius:10px;background:#14261a;color:var(--ink);font-size:25px;line-height:1}
.icon-close:hover{background:#20402a}
.config-dialog>.icon-close{position:absolute;top:14px;right:14px;z-index:3}
.config-form{min-width:0;overflow:auto;padding:clamp(24px,3vw,44px);scrollbar-color:#437b50 #0b1b10;scrollbar-width:thin}
.config-form h2{margin:12px 0 6px;font-size:clamp(26px,2.5vw,36px);line-height:1.13;letter-spacing:-.045em}
.subtext{max-width:55ch;margin:0;color:var(--muted);font-size:14px;line-height:1.65}
.service-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0}
.service-tabs:empty{display:none}
.service-tabs button{min-height:40px;padding:8px 13px;border:1px solid var(--line);border-radius:10px;background:#0f2116;color:var(--muted);font-size:12px;font-weight:700}
.service-tabs button.active{border-color:var(--green);background:#173b25;color:var(--accent)}
.base-scope{margin:16px 0;padding:16px;border:1px solid #478159;border-radius:13px;background:#11321e;color:#d8f2df;font-size:12px;line-height:1.7}
.base-scope strong{display:block;margin-bottom:5px;color:var(--accent)}.base-scope p{margin:0}
.options-heading{display:flex;justify-content:space-between;gap:12px;margin:25px 0 12px;color:var(--muted);font:700 11px ui-monospace,monospace;letter-spacing:.05em}
.option-list{display:grid;gap:10px;padding-bottom:10px}
.option{display:grid;grid-template-columns:18px minmax(0,1fr) auto;align-items:start;gap:12px;min-width:0;padding:15px;border:1px solid var(--line);border-radius:13px;background:#0d1d13;cursor:pointer;transition:transform .18s var(--ease),border-color .18s ease}
.option:hover{transform:translateX(2px);border-color:#539367}
.option.selected{border-color:#59a46c;background:#153521;box-shadow:inset 3px 0 var(--green)}
.option input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--green)}
.option>span{min-width:0}.option b{display:block;font-size:13px;line-height:1.4}
.option small{display:block;margin-top:4px;color:var(--muted);font-size:11px;line-height:1.5}
.option strong{color:var(--accent);font-size:12px;white-space:nowrap}
.option-tag{display:block;margin-top:9px;color:#93eeb1;font:700 10px ui-monospace,monospace;letter-spacing:.03em}
.scope-detail{display:block;margin-top:10px;padding-top:9px;border-top:1px solid #315d3b;color:#c6dfcd;font-size:11px;line-height:1.65}
.scope-detail strong{display:inline;color:var(--accent);font-size:10px;white-space:normal}
.inspector{display:flex;flex-direction:column;min-width:0;min-height:0;padding:62px clamp(18px,2vw,30px) 24px;border-left:1px solid var(--line);background:#07100a}
.inspect-header{display:flex;justify-content:space-between;gap:10px;color:var(--muted);font:700 11px ui-monospace,monospace;letter-spacing:.05em}
.inspect-header b{color:var(--accent)}
.preview{flex:1;min-height:170px;overflow:auto;margin:14px 0;padding:18px;border:1px solid var(--line);border-radius:14px;background:#0d1e12;scrollbar-color:#4b8556 #0b1b10;scrollbar-width:thin}
.technical-info{flex:none;max-height:120px;overflow:auto;padding:13px;border:1px solid var(--line);border-radius:12px;background:#102119;scrollbar-width:thin}
.technical-info h3{margin:0 0 6px;color:var(--accent);font-size:11px;letter-spacing:.06em}
.technical-info p{margin:5px 0;color:var(--muted);font-size:11px;line-height:1.55}
.technical-info b{color:var(--ink)}
.config-footer{flex:none;padding-top:15px}.config-footer>div{display:flex;align-items:center;justify-content:space-between;gap:15px}
.config-footer small{color:var(--muted);font-size:11px}.config-footer strong{color:var(--accent);font-size:clamp(20px,2vw,29px);text-align:right}
#configHint{display:block;margin:8px 0 12px}.config-footer .btn{width:100%}

/* Live preview (styles only, driven by the existing JS) */
.web-frame{position:relative;min-height:100%;overflow:hidden;border-radius:9px;background:#e6f2e8;color:#153421;box-shadow:0 12px 28px rgba(0,0,0,.22)}
.web-nav{display:flex;align-items:center;gap:5px;height:35px;padding-inline:12px;background:#153421}
.web-logo{width:27px;height:8px;margin-right:auto;border-radius:2px;background:#43db85}
.web-nav i{width:19px;height:4px;border-radius:2px;background:#93b79f}
.web-hero{min-height:108px;padding:22px 18px;background:linear-gradient(125deg,#c8e3d0,#f1f9f1)}
.skeleton-line{width:65%;height:8px;margin:8px 0;border-radius:3px;background:#7da28a}
.skeleton-line.short{width:42%;height:5px}.web-hero .skeleton-line:first-child{height:13px;background:#295b3b}
.web-cta{display:inline-block;margin-top:9px;padding:6px 11px;border-radius:3px;background:#12af60;color:#fff;font-size:9px}
.web-section{padding:12px 15px;border-top:1px solid #cbded0;animation:component-in .25s var(--ease) both}
.web-section>strong{display:block;margin-bottom:7px;font-size:10px}
.web-cards,.web-gallery,.web-blog,.web-catalog{display:flex;gap:6px}
.web-cards span{flex:1;min-height:28px;border-radius:2px;background:#b9d4c0}
.web-gallery i{flex:1;height:40px;border-radius:3px;background:linear-gradient(135deg,#83b69a,#d0e6d7)}
.web-blog span{flex:1;height:42px;border-top:8px solid #6ea780;background:#c8dfce}
.web-catalog span{flex:1;height:50px;border-top:30px solid #8aba9c;background:#d7e5d8}
.web-form{display:grid;gap:5px}.web-form span{height:13px;border:1px solid #b5d4be;background:white}.web-form span:last-child{width:40%;background:#1ab569}
.web-map{display:grid;place-items:center;height:50px;background:linear-gradient(40deg,#c0d3b5 48%,#91c0b4 49%,#91c0b4 55%,#d3dec0 56%);font-size:17px}
.web-whatsapp{position:sticky;bottom:10px;display:flex;align-items:center;gap:6px;width:max-content;margin:8px 9px 9px auto;padding:7px 10px;border-radius:20px;background:#10a65b;color:white;font-size:10px;box-shadow:0 4px 12px #0c572b66;animation:component-in .25s var(--ease) both}
.web-whatsapp::before{content:"";width:11px;height:11px;border:2px solid #fff;border-radius:50% 50% 50% 0;transform:rotate(-25deg)}
.generic-frame{min-height:100%;padding:17px;border-radius:9px;background:#e6f2e8;color:#163421;font-size:12px}
.generic-frame h3{margin:0 0 12px;font-size:14px}
.generic-row{margin:7px 0;padding:10px;border:1px solid #bdd5c4;border-radius:3px;background:#fff;animation:component-in .25s var(--ease) both}
.generic-bars{display:flex;align-items:end;gap:6px;height:75px}.generic-bars i{width:16%;height:50%;background:#18b969}.generic-bars i:nth-child(2){height:82%}.generic-bars i:nth-child(3){height:65%}.generic-bars i:nth-child(4){height:95%}
.generic-line{height:8px;margin:10px 0;background:#a7cbb1}.video-timeline{display:flex;gap:4px;margin-top:30px}.video-timeline i{flex:1;height:26px;background:#34b877}.video-timeline i:nth-child(even){background:#89d4a7}.preview-note{color:#597263;font-size:11px}

/* Cart */
.cart-shade{position:fixed;inset:0;z-index:59;display:none;background:rgba(0,4,2,.75)}.cart-shade.show{display:block;animation:shade-in .2s ease both}
.cart-drawer{position:fixed;top:0;right:0;z-index:60;display:flex;flex-direction:column;width:min(480px,100%);height:100dvh;padding:clamp(20px,3vw,30px);border-left:1px solid var(--line);background:#0a1710;box-shadow:-20px 0 60px rgba(0,0,0,.35);transform:translateX(105%);transition:transform .3s var(--ease)}
.cart-drawer.show{transform:translateX(0)}
.cart-head{display:flex;align-items:start;justify-content:space-between;gap:12px}.cart-head h2{margin:7px 0 0;font-size:30px;letter-spacing:-.05em}
.cart-items{flex:1;min-height:0;overflow:auto;margin-top:20px;scrollbar-width:thin}
.cart-item{padding:18px 0;border-bottom:1px solid var(--line);animation:component-in .22s var(--ease) both}
.cart-item-top{display:flex;justify-content:space-between;gap:12px}.cart-item-top strong{color:var(--accent);text-align:right}
.cart-item small{display:block;margin:8px 0;color:var(--muted);font-size:12px;line-height:1.6}
.cart-item button{padding:3px 0;border:0;background:none;color:var(--danger);font-size:11px;font-weight:750}
.cart-item button.edit{margin-right:16px;color:var(--accent)}.cart-item button:hover{text-decoration:underline}
.cart-empty{margin:auto;color:var(--muted);font-size:14px;text-align:center;line-height:1.6}
.cart-bottom{flex:none;padding-top:18px;border-top:1px solid var(--line)}.cart-total{display:flex;justify-content:space-between;align-items:center;gap:12px}.cart-total strong{color:var(--accent);font-size:clamp(20px,2vw,28px);text-align:right}
.cart-bottom .btn{width:100%;margin:15px 0 8px}.cart-bottom>small{display:block;color:var(--muted);font-size:11px;line-height:1.5;text-align:center}

/* Scroll reveal is progressive: JS applies motion-ready only with an observer. */
.motion-ready .category,.motion-ready .steps article{opacity:0;transform:translateY(15px)}
.motion-ready .category.in-view,.motion-ready .steps article.in-view{opacity:1;transform:translateY(0);transition:opacity .42s ease,transform .42s var(--ease)}
.motion-ready .category.in-view:hover{transform:translateY(-5px)}
@keyframes dialog-in{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes component-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes shade-in{from{opacity:0}to{opacity:1}}

/* Tablet / short laptop */
@media(max-width:1100px){
  .hero{grid-template-columns:minmax(0,1fr) minmax(280px,.85fr);gap:28px}
  .hero h1{font-size:clamp(46px,6.2vw,74px)}
  .config-dialog{grid-template-columns:minmax(0,1fr) minmax(0,.9fr)}
  .inspector{padding-inline:18px}.option{gap:8px;padding:12px}
}
@media(max-width:850px){
  .topbar nav{gap:15px}.topbar nav a{font-size:12px}
  .hero{grid-template-columns:1fr;min-height:auto;padding-block:75px 95px}
  .hero h1{max-width:760px}.hero-demo{width:min(100%,650px);transform:none}.hero-demo:hover{transform:none}
  .category-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .about-shell{grid-template-columns:1fr}.about-values{grid-template-columns:repeat(3,minmax(0,1fr))}
  .partner-placeholder{flex-wrap:wrap}.partner-link{margin-left:85px}
  .config-dialog{display:block;overflow:auto;height:calc(100dvh - 16px)}
  .config-form{overflow:visible;padding:54px 24px 26px}
  .inspector{min-height:600px;padding:25px 24px;border-left:0;border-top:1px solid var(--line)}
  .preview{min-height:300px}.technical-info{max-height:160px}
}
@media(max-width:620px){
  :root{--gutter:20px}
  .topbar{height:66px}.topbar nav{display:none}.brand{font-size:13px}.brand-icon{width:34px;height:34px}
  .hero{padding-block:62px 78px}.hero h1{font-size:clamp(44px,10.5vw,64px);letter-spacing:-.065em}.hero p{font-size:15px}.hero .btn{width:100%;max-width:330px}
  .section{padding-block:72px}.category-grid,.steps{grid-template-columns:1fr}.category{min-height:210px}.category p{min-height:0}
  .about-values{grid-template-columns:1fr}.about-content{grid-template-columns:1fr}.partner-placeholder{gap:16px;padding:22px}.partner-placeholder>div{flex:1;min-width:160px}.partner-link{width:100%;margin-left:0}
  .closing-section{display:block}.closing-section .btn{margin-top:25px;width:100%}
  footer{display:grid;gap:18px}.footer-links{gap:15px}
  .modal{padding:0}.config-dialog{height:100dvh;max-height:100dvh;border:0;border-radius:0}
  .config-form{padding:60px 18px 25px}.inspector{min-height:550px;padding:22px 18px 28px}.preview{min-height:265px}
  .option{grid-template-columns:18px minmax(0,1fr) auto;gap:9px}.option strong{font-size:11px}
  .cart-drawer{border-left:0;box-shadow:none}
}
@media(max-width:380px){
  :root{--gutter:15px}.brand{gap:8px;font-size:12px}.cart-trigger{gap:5px;padding-left:10px;font-size:11px}
  .hero h1{font-size:43px}.demo-content{margin:12px;padding:12px}.section-title h2{font-size:32px}
  .option{padding:11px 9px}.option-tag{font-size:9px}.scope-detail{font-size:10px}
}
/* Large monitors and TV-sized browser viewports. Constrain line length and grow touch/focus targets. */
@media(min-width:1800px){
  :root{--page:1640px;--gutter:clamp(70px,5vw,120px)}
  .topbar{height:92px}.topbar nav a{font-size:16px}.cart-trigger{min-height:52px;font-size:15px}
  .hero{min-height:790px}.hero h1{font-size:clamp(90px,5.4vw,118px)}.hero p{font-size:20px}
  .category{min-height:285px}.category p{font-size:16px}.category b{font-size:13px}
  .section-title p{font-size:19px}.steps p,.about-content p,.about-values p{font-size:16px}
  .config-dialog{width:min(1480px,86vw);height:min(980px,88vh)}
}
@media(min-width:2600px){
  :root{--page:1840px;--gutter:clamp(90px,5vw,150px)}
  body{font-size:19px}.hero h1{font-size:128px}.hero p{font-size:24px}
  .category h3{font-size:29px}.category p{font-size:18px}
  .btn{min-height:62px;font-size:15px}.config-dialog{width:min(1640px,82vw)}
}
@media(max-height:700px) and (min-width:851px){
  .config-dialog{height:calc(100dvh - 16px)}.inspector{padding-top:54px;padding-bottom:14px}
  .preview{min-height:100px}.technical-info{max-height:85px}.config-footer{padding-top:9px}
}
@media(hover:none){.category:hover,.btn-primary:hover:not(:disabled),.cart-trigger:hover,.option:hover{transform:none}}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .motion-ready .category,.motion-ready .steps article{opacity:1;transform:none}
}
@media(forced-colors:active){.category,.option,.btn,.cart-trigger,.icon-close{border:1px solid CanvasText}.category-icon{border:1px solid CanvasText}}