@import url('../../assets/fonts.css');
/* FORMA — Clean Tech */
:root{--bg:#fafafa;--bg2:#f4f4f5;--dark:#0a0a0a;--mid:#3f3f46;--muted:#71717a;--border:#e4e4e7;--border2:#d4d4d8;--accent:#2563eb;--accent2:#1d4ed8;--surface:#fff;--f-sans:'Inter',system-ui,sans-serif;--f-mono:'JetBrains Mono',monospace;--nav:58px;--banner:52px;}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;}
body{background:var(--bg);color:var(--dark);font-family:var(--f-sans);overflow-x:hidden;line-height:1.6;padding-bottom:var(--banner);}
a{color:var(--accent);text-decoration:none;}img{display:block;max-width:100%;}
nav{position:fixed;top:0;left:0;right:0;z-index:100;height:var(--nav);display:flex;align-items:center;justify-content:space-between;padding:0 clamp(1.5rem,4vw,3rem);background:rgba(250,250,250,.95);backdrop-filter:blur(8px);border-bottom:1px solid var(--border);transition:transform .3s ease;}
nav.up{transform:translateY(-100%);}
.nav-logo{font-weight:700;font-size:1.1rem;letter-spacing:-.02em;color:var(--dark);}
.nav-logo span{color:var(--accent);}
.nav-links{display:flex;gap:2rem;list-style:none;}
.nav-links a{font-size:.82rem;font-weight:500;color:var(--muted);transition:color .2s;}
.nav-links a:hover,.nav-links a.active{color:var(--dark);}
.nav-cta{background:var(--accent);color:#fff;font-size:.78rem;font-weight:600;padding:.42rem 1.1rem;transition:background .2s;}
.nav-cta:hover{background:var(--accent2);}
.ham{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:.25rem;}
.ham span{width:20px;height:1.5px;background:var(--dark);display:block;transition:.3s;}
.ham.open span:nth-child(1){transform:rotate(45deg) translate(4px,4px);}
.ham.open span:nth-child(2){opacity:0;}
.ham.open span:nth-child(3){transform:rotate(-45deg) translate(4px,-4px);}
@media(max-width:768px){.nav-links{position:fixed;top:var(--nav);left:0;right:0;bottom:0;background:rgba(250,250,250,.98);flex-direction:column;align-items:center;justify-content:center;gap:2rem;transform:translateX(101%);transition:transform .4s ease;}.nav-links.open{transform:translateX(0);}.nav-links a{font-size:.95rem;}.nav-cta-wrap{display:none;}.ham{display:flex;}}
.demo-banner{position:fixed;bottom:0;left:0;right:0;z-index:200;height:var(--banner);background:#0a0a0a;border-top:1px solid #222;padding:0 1.5rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem;}
.demo-banner p{font-size:.68rem;color:rgba(255,255,255,.4);}
.demo-banner strong{color:#60a5fa;}
.demo-banner-btns{display:flex;gap:.6rem;}
.demo-banner a{font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;padding:.35rem .9rem;}
.demo-back{color:rgba(255,255,255,.35);border:1px solid rgba(255,255,255,.1);}
.demo-back:hover{color:#fff;}
.demo-order{background:var(--accent);color:#fff;}
.demo-order:hover{background:var(--accent2);}
.rev{opacity:0;transform:translateY(16px);transition:opacity .65s ease,transform .65s ease;}
.rev.vis{opacity:1;transform:none;}
.sec{padding:clamp(6rem,10vw,10rem) clamp(1.5rem,5vw,3rem);max-width:1200px;margin:0 auto;}
.chip{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--f-mono);font-size:.68rem;color:var(--accent);background:rgba(37,99,235,.08);border:1px solid rgba(37,99,235,.2);padding:.25rem .7rem;margin-bottom:1.25rem;}
.chip::before{content:'●';font-size:.5rem;}
.sh2{font-size:clamp(2.2rem,5vw,4rem);font-weight:700;letter-spacing:-.04em;line-height:1.1;color:var(--dark);}
.sh2 em{font-style:normal;color:var(--accent);}
.mono-label{font-family:var(--f-mono);font-size:.7rem;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;}
.divider{width:100%;height:1px;background:var(--border);margin:0;}
.btn{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;font-size:.85rem;padding:.7rem 1.5rem;transition:background .2s,color .2s,border-color .2s;}
.btn-primary{background:var(--accent);color:#fff;}
.btn-primary:hover{background:var(--accent2);}
.btn-ghost{background:transparent;border:1px solid var(--border2);color:var(--mid);}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);}
footer{background:var(--dark);padding:clamp(3.5rem,6vw,5.5rem) clamp(1.5rem,5vw,3rem) 2rem;}
.fgrid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:3rem;padding-bottom:2.5rem;border-bottom:1px solid rgba(255,255,255,.08);}
@media(max-width:800px){.fgrid{grid-template-columns:1fr 1fr;}}
@media(max-width:460px){.fgrid{grid-template-columns:1fr;}}
.fbrand{font-weight:700;font-size:1.1rem;color:#fff;margin-bottom:.6rem;letter-spacing:-.02em;}
.fbrand span{color:#60a5fa;}
.ftagline{font-size:.82rem;color:rgba(255,255,255,.4);line-height:1.65;}
.flabel{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.3);margin-bottom:1rem;}
.fcol ul{list-style:none;display:flex;flex-direction:column;gap:.55rem;}
.fcol li a{font-size:.82rem;color:rgba(255,255,255,.5);transition:color .2s;}
.fcol li a:hover{color:#fff;}
.fbottom{max-width:1200px;margin:0 auto;padding-top:1.5rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;}
.fcopy{font-family:var(--f-mono);font-size:.6rem;color:rgba(255,255,255,.2);letter-spacing:.08em;}