/* =====================================================================
   NOVIS — Clean-tech polymer & packaging manufacturing
   Light glassmorphism · blue + eco-green · Plus Jakarta Sans · 3D glass
   ===================================================================== */

:root{
  --bg:#e9eff5;
  --ink:#0e1c2b;
  --ink-2:#46586c;
  --blue:#2f6bff;
  --blue-2:#1f50d6;
  --green:#11b07a;
  --green-d:#0a7d53;
  --ink-3:#54667c;
  --line:rgba(20,40,70,.10);
  --glass:rgba(255,255,255,.5);
  --glass-bd:rgba(255,255,255,.65);
  --maxw:1320px;
  --ease:cubic-bezier(.22,1,.36,1);
  --f:'Plus Jakarta Sans',system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;overflow-x:clip;background:var(--bg);scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:var(--f);background:transparent;color:var(--ink);line-height:1.6;
  overflow-x:clip;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body.lock{overflow:hidden}
.three-bg{position:fixed;inset:0;z-index:-2;pointer-events:none;display:block}
.aura{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(40% 50% at 18% 12%,rgba(47,107,255,.22),transparent 70%),
             radial-gradient(38% 45% at 85% 22%,rgba(17,176,122,.2),transparent 70%),
             radial-gradient(45% 50% at 70% 90%,rgba(47,107,255,.14),transparent 70%)}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
ul{list-style:none}
svg{display:block;max-width:100%}
::selection{background:var(--blue);color:#fff}

/* ---- glass ---- */
.glass{background:var(--glass);-webkit-backdrop-filter:blur(20px) saturate(1.3);backdrop-filter:blur(20px) saturate(1.3);
  border:1px solid var(--glass-bd);border-radius:20px;box-shadow:0 20px 50px -24px rgba(20,40,80,.28),inset 0 1px 0 rgba(255,255,255,.6)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass{background:rgba(255,255,255,.86)}
}

/* ---- type ---- */
.h2{font-weight:800;font-size:clamp(2rem,5vw,4rem);line-height:1.04;letter-spacing:-.03em}
.sub{color:var(--ink-2);font-size:clamp(1rem,1.3vw,1.12rem);max-width:480px}
.eyebrow{display:inline-block;font:700 12px/1 var(--f);letter-spacing:.16em;text-transform:uppercase;color:var(--blue-2);margin-bottom:16px}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:1.05em 2em;border-radius:40px;
  font:700 13px/1 var(--f);letter-spacing:.01em;color:#fff;background:linear-gradient(120deg,var(--blue),var(--blue-2));
  box-shadow:0 12px 30px -12px rgba(47,107,255,.6);transition:transform .4s var(--ease),box-shadow .4s}
.btn:hover{transform:translateY(-2px);box-shadow:0 18px 44px -12px rgba(47,107,255,.7)}
.btn--block{width:100%}
.ghost{display:inline-flex;align-items:center;font:700 13px/1 var(--f);color:var(--ink);padding:1.05em 1.7em;border-radius:40px;border:1px solid var(--line);transition:border-color .3s,background .3s}
.ghost:hover{border-color:var(--blue);background:rgba(47,107,255,.06)}

/* ---- preloader ---- */
.ld{position:fixed;inset:0;z-index:1000;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px}
.ld__mk{width:84px;height:84px}
.hx{fill:none;stroke:var(--blue);stroke-width:2.4;stroke-linejoin:round;stroke-dasharray:200;stroke-dashoffset:200;animation:draw 1.1s var(--ease) forwards}
.nn{fill:none;stroke:var(--green);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:90;stroke-dashoffset:90;animation:draw .9s var(--ease) .35s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.ld__t{font-weight:800;font-size:18px;letter-spacing:.34em;color:var(--ink);opacity:0;animation:fi .7s ease .9s forwards}
@keyframes fi{to{opacity:1}}
.ld.done{transform:translateY(-101%);transition:transform .9s var(--ease)}

/* ---- header ---- */
.nav{position:fixed;top:0;left:0;width:100%;z-index:200;display:flex;align-items:center;justify-content:space-between;
  padding:18px clamp(18px,4vw,56px);transition:padding .35s var(--ease),background .35s,backdrop-filter .35s,box-shadow .35s}
.nav.sc{padding:11px clamp(18px,4vw,56px);background:rgba(233,239,245,.7);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 1px 0 var(--line)}
.logo{display:flex;align-items:center;gap:9px}
.logo__m{width:32px;height:32px}
.lhx{fill:none;stroke:var(--blue);stroke-width:2;stroke-linejoin:round}
.lnn{fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.logo__t{font-weight:800;font-size:20px;letter-spacing:.06em}
.nav__l{display:flex;gap:28px}
.nav__l a{position:relative;font:600 14px/1 var(--f);color:var(--ink-2);transition:color .3s}
.nav__l a::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:2px;background:var(--blue);border-radius:2px;transition:width .4s var(--ease)}
.nav__l a:hover{color:var(--ink)}.nav__l a:hover::after{width:100%}
.nav__r{display:flex;align-items:center;gap:18px}
.lang{display:flex;align-items:center;gap:8px;font:700 13px/1 var(--f)}
.lang span{width:1px;height:11px;background:var(--ink-3)}
.lang button{color:var(--ink-3);transition:color .3s}.lang button.on{color:var(--ink)}
.cta{font:700 12px/1 var(--f);letter-spacing:.01em;padding:.85em 1.5em;border-radius:40px;color:#fff;background:linear-gradient(120deg,var(--blue),var(--blue-2));transition:transform .3s,box-shadow .3s}
.cta:hover{transform:translateY(-1px);box-shadow:0 10px 24px -10px rgba(47,107,255,.6)}
.burger{display:none;flex-direction:column;gap:6px;width:30px;height:22px;justify-content:center;align-items:flex-end}
.burger span{height:2px;background:var(--ink);transition:.4s var(--ease)}
.burger span:nth-child(1){width:26px}.burger span:nth-child(2){width:18px}
.burger.x span:nth-child(1){transform:translateY(4px) rotate(45deg);width:24px}
.burger.x span:nth-child(2){transform:translateY(-4px) rotate(-45deg);width:24px}

/* ---- mobile menu ---- */
.mm{position:fixed;inset:0;z-index:190;background:rgba(233,239,245,.92);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  display:flex;flex-direction:column;justify-content:center;gap:6px;padding:0 30px;clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--ease);pointer-events:none}
.mm.open{clip-path:inset(0 0 0 0);pointer-events:auto}
.mm nav{display:flex;flex-direction:column;gap:4px}
.mm nav a{font-weight:800;font-size:10vw;line-height:1.1;letter-spacing:-.02em;color:var(--ink);transition:color .3s,padding-left .35s var(--ease)}
.mm nav a:hover{color:var(--blue);padding-left:10px}
.mm__ph{margin-top:32px;font:700 16px/1 var(--f);color:var(--blue)}

/* ---- hero ---- */
.hero{position:relative;min-height:100svh;display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(30px,5vw,70px);align-items:center;
  max-width:var(--maxw);margin:0 auto;padding:130px clamp(18px,4vw,56px) 70px}
.pill{display:inline-flex;align-items:center;gap:10px;font:600 12px/1 var(--f);letter-spacing:.03em;color:var(--ink-2);
  padding:8px 14px;border:1px solid var(--line);border-radius:40px;background:rgba(255,255,255,.5);margin-bottom:26px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(17,176,122,.2);animation:bl 2s infinite}
@keyframes bl{0%,100%{opacity:1}50%{opacity:.4}}
.hero__h{font-weight:800;font-size:clamp(2.6rem,7vw,5.6rem);line-height:1;letter-spacing:-.035em}
.hero__h span{display:block}
.hero__h .hl{background:linear-gradient(110deg,var(--blue),var(--green));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero__p{max-width:480px;color:var(--ink-2);margin:28px 0 34px;font-size:clamp(1rem,1.3vw,1.15rem)}
.hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.hero__card{padding:clamp(26px,3vw,38px);display:grid;gap:18px}
.hc__row{display:flex;align-items:baseline;gap:14px;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:14px}
.hc__row:nth-child(3){border-bottom:0;padding-bottom:0}
.hc__row b{font-weight:800;font-size:clamp(1.8rem,3vw,2.4rem);letter-spacing:-.02em}
.hc__row span{font-size:.9rem;color:var(--ink-2);text-align:right;max-width:130px}
.hc__bar{height:8px;border-radius:8px;background:rgba(20,40,70,.1);overflow:hidden}
.hc__bar i{display:block;height:100%;width:72%;background:linear-gradient(90deg,var(--blue),var(--green));border-radius:8px;
  transform:scaleX(0);transform-origin:left;animation:gr 1.6s var(--ease) .4s forwards}
@keyframes gr{to{transform:scaleX(1)}}
.hc__cap{font:600 11px/1 var(--f);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}

/* ---- intro ---- */
.intro{max-width:1100px;margin:0 auto;padding:clamp(70px,11vw,160px) clamp(18px,4vw,56px)}
.intro__t{font-weight:700;font-size:clamp(1.6rem,3.8vw,2.9rem);line-height:1.28;letter-spacing:-.02em}
.intro__t .g{background:linear-gradient(110deg,var(--blue),var(--green));-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---- section head ---- */
.sec-h{max-width:var(--maxw);margin:0 auto 50px;padding:0 clamp(18px,4vw,56px)}

/* ---- products ---- */
.prod{padding:clamp(40px,6vw,90px) 0}
.prod__grid{max-width:var(--maxw);margin:0 auto;padding:0 clamp(18px,4vw,56px);display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,22px)}
.pcard{padding:clamp(24px,2.6vw,34px);display:flex;flex-direction:column;gap:12px;min-height:210px;transition:transform .5s var(--ease)}
.pcard:hover{transform:translateY(-6px)}
.pcard__i{font-size:26px;color:var(--blue);line-height:1}
.pcard h3{font-weight:700;font-size:1.25rem;letter-spacing:-.01em}
.pcard p{color:var(--ink-2);font-size:.93rem;flex:1}
.prod__grid .pcard:nth-child(7){grid-column:span 1}

/* ---- sustainability ---- */
.sus{max-width:var(--maxw);margin:0 auto;padding:clamp(50px,8vw,120px) clamp(18px,4vw,56px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,70px);align-items:center}
.sus__c p{color:var(--ink-2);margin-top:20px;font-size:1.05rem;max-width:440px}
.sus__grid{display:grid;gap:16px}
.scard{padding:24px 28px;display:grid;grid-template-columns:auto 1fr;gap:4px 20px;align-items:center}
.scard b{grid-row:span 2;font-weight:800;font-size:clamp(2rem,3.4vw,2.8rem);letter-spacing:-.02em;color:var(--green-d)}
.scard h4{font-weight:700;font-size:1.1rem}
.scard p{color:var(--ink-2);font-size:.9rem}

/* ---- process ---- */
.proc{padding:clamp(50px,8vw,110px) 0}
.proc__flow{max-width:var(--maxw);margin:0 auto;padding:0 clamp(18px,4vw,56px);display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(12px,1.4vw,18px)}
.ps{padding:clamp(20px,2vw,28px);display:flex;flex-direction:column;gap:8px}
.ps span{font-weight:800;font-size:1.4rem;background:linear-gradient(120deg,var(--blue),var(--green));-webkit-background-clip:text;background-clip:text;color:transparent}
.ps h3{font-weight:700;font-size:1.1rem;letter-spacing:-.01em}
.ps p{color:var(--ink-2);font-size:.88rem}

/* ---- industries ---- */
.ind{padding:clamp(50px,8vw,110px) 0}
.ind__grid{max-width:var(--maxw);margin:0 auto;padding:0 clamp(18px,4vw,56px);display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,22px)}
.ic{padding:clamp(24px,2.6vw,32px);display:flex;flex-direction:column;gap:10px;transition:transform .5s var(--ease)}
.ic:hover{transform:translateY(-5px)}
.ic h4{font-weight:700;font-size:1.15rem;letter-spacing:-.01em}
.ic p{color:var(--ink-2);font-size:.92rem}

/* ---- kpi ---- */
.kpi{max-width:var(--maxw);margin:clamp(20px,3vw,40px) auto;padding:clamp(36px,4vw,56px) clamp(24px,4vw,56px);display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.kc{display:flex;flex-direction:column;gap:8px}
.kc b{font-weight:800;font-size:clamp(2.2rem,4.6vw,3.6rem);line-height:1;letter-spacing:-.03em}
.kc b i{font-style:normal;color:var(--blue)}
.kc span{font:600 12px/1.4 var(--f);letter-spacing:.02em;text-transform:uppercase;color:var(--ink-3)}

/* ---- contact ---- */
.ct{max-width:var(--maxw);margin:0 auto;padding:clamp(50px,8vw,120px) clamp(18px,4vw,56px)}
.ct__inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,70px);padding:clamp(32px,4vw,64px)}
.ct__c .sub{margin-top:18px}
.ct__info{display:grid;gap:16px;margin-top:32px}
.ct__info li{display:flex;flex-direction:column;gap:4px;border-top:1px solid var(--line);padding-top:14px}
.ct__info span{font:700 11px/1 var(--f);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.ct__info a{font-size:1.02rem;transition:color .3s}.ct__info a:hover{color:var(--blue)}
.ct__form{display:grid;grid-template-columns:1fr 1fr;gap:24px 20px;align-content:start}
.fl{position:relative}.fl--full{grid-column:1/-1}
.fl input,.fl select,.fl textarea{width:100%;background:rgba(255,255,255,.35);border:1px solid var(--line);border-radius:10px;padding:14px 14px;color:var(--ink);font:500 1rem var(--f);transition:border-color .3s,background .3s}
.fl select option{background:#fff;color:var(--ink)}
.fl textarea{resize:vertical}
.fl input:focus,.fl select:focus,.fl textarea:focus{outline:none;border-color:var(--blue);background:rgba(255,255,255,.6)}
.fl label{position:absolute;left:14px;top:14px;color:var(--ink-3);pointer-events:none;transition:transform .3s var(--ease),font-size .3s,color .3s,background .3s;padding:0 4px}
.fl input:focus+label,.fl input:not(:placeholder-shown)+label,.fl textarea:focus+label,.fl textarea:not(:placeholder-shown)+label,.fl .st{transform:translateY(-25px) translateX(-2px);font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--blue);background:linear-gradient(transparent 45%,rgba(247,250,253,.95) 45%)}
.st{top:14px}
.note{grid-column:1/-1;font:600 13px var(--f);color:var(--green);min-height:18px}
.note.err{color:#d9534f}

/* ---- footer ---- */
.ft{padding:clamp(46px,6vw,80px) clamp(18px,4vw,56px) 30px}
.ft__top{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1.3fr 2fr;gap:40px;border-top:1px solid var(--line);padding-top:40px}
.ft__brand .logo{margin-bottom:16px}
.ft__brand p{color:var(--ink-2);max-width:280px;font-size:.95rem}
.ft__cols{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.ft__cols h5{font:700 11px/1 var(--f);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:16px}
.ft__cols a{display:block;color:var(--ink-2);margin-bottom:10px;font-size:.94rem;transition:color .3s}
.ft__cols a:hover{color:var(--blue)}
.ft__btm{max-width:var(--maxw);margin:46px auto 0;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font:600 12px var(--f);color:var(--ink-3)}

/* ---- reveal ---- */
[data-rv]{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
[data-rv].in{opacity:1;transform:none}

/* ---- legal ---- */
.legal{max-width:840px;margin:0 auto;padding:150px clamp(18px,4vw,40px) 100px}
.legal h1{font-weight:800;font-size:clamp(2rem,6vw,3.4rem);letter-spacing:-.03em;margin-bottom:12px}
.legal .upd{font:600 12px var(--f);color:var(--ink-3);letter-spacing:.04em;margin-bottom:46px}
.legal h2{font-weight:700;font-size:1.4rem;letter-spacing:-.02em;margin:38px 0 12px}
.legal p,.legal li{color:var(--ink-2);margin-bottom:14px}
.legal ul{padding-left:22px;list-style:disc}
.legal a{color:var(--blue)}
.legal .back{display:inline-flex;gap:8px;margin-bottom:40px;font:600 12px var(--f);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2)}

/* ---- focus ---- */
a:focus-visible,button:focus-visible,.fl input:focus-visible,.fl select:focus-visible,.fl textarea:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}

/* =================== RESPONSIVE =================== */
@media (max-width:1024px){
  .nav__l,.cta{display:none}
  .burger{display:flex}
  .hero{grid-template-columns:1fr;min-height:auto}
  .hero__card{max-width:440px}
  .sus,.ct__inner{grid-template-columns:1fr}
  .prod__grid,.ind__grid{grid-template-columns:repeat(2,1fr)}
  .proc__flow{grid-template-columns:repeat(2,1fr);gap:16px}
  .ft__top{grid-template-columns:1fr}
}
@media (max-width:640px){
  .nav{padding:14px 18px}
  .hero{padding:110px 18px 60px}
  .prod__grid,.ind__grid{grid-template-columns:1fr}
  .proc__flow{grid-template-columns:1fr}
  .kpi{grid-template-columns:1fr 1fr;gap:26px}
  .ct__form{grid-template-columns:1fr}
  .ft__cols{grid-template-columns:1fr 1fr}
  .ft__btm{flex-direction:column;gap:8px}
}
@media (max-width:420px){
  .kpi{grid-template-columns:1fr 1fr}
  .ft__cols{grid-template-columns:1fr}
}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .hc__bar i{transform:scaleX(.72)!important}
}