/* ═══════════════════════════════════════════
   ACIS v5 — Editorial Warm Design System
   Inspiriert von: Stripe (editorial), Ramp (warm accent)
   ═══════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
--primary:oklch(28% 0.04 45);
--primary-light:oklch(38% 0.05 45);
--bg:oklch(97.5% 0.006 75);
--bg-warm:oklch(95% 0.012 70);
--bg-dark:oklch(18% 0.02 45);
--accent:oklch(62% 0.18 40);
--accent-hover:oklch(55% 0.18 40);
--accent-glow:oklch(62% 0.18 40 / .15);
--accent-light:oklch(92% 0.04 40);
--text:oklch(22% 0.015 45);
--text-muted:oklch(48% 0.01 45);
--on-dark:oklch(95% 0.005 75);
--on-dark-muted:oklch(72% 0.008 45);
--surface:oklch(100% 0 0);
--border:oklch(90% 0.008 70);
--border-dark:oklch(28% 0.02 45);
--font-d:'Instrument Serif',Georgia,serif;
--font-b:'DM Sans',system-ui,sans-serif;
--ease:cubic-bezier(0.22,1,0.36,1);
--ease-out:cubic-bezier(0.25,1,0.5,1);
--max:1200px;
}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font-b);color:var(--text);background:var(--bg);line-height:1.7;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font-family:var(--font-b);cursor:pointer}
.skip{position:absolute;top:-100%;left:16px;background:var(--accent);color:#fff;padding:10px 20px;border-radius:8px;z-index:999;font-weight:600}.skip:focus{top:16px}
.w{max-width:var(--max);margin:0 auto;padding:0 24px}

/* NAV */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;background:oklch(97.5% 0.006 75 / .9);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--border);transition:box-shadow .3s var(--ease)}
.nav.scrolled{box-shadow:0 2px 20px oklch(0% 0 0 / .05)}
.nav .w{display:flex;align-items:center;justify-content:space-between;padding-top:14px;padding-bottom:14px}
.nav__logo{font-family:var(--font-d);font-size:1.8rem;color:var(--primary);letter-spacing:-.03em}
.nav__logo em{font-style:normal;color:var(--accent)}
.nav__links{display:flex;gap:28px;align-items:center;list-style:none}
.nav__links a{font-size:.86rem;font-weight:500;color:var(--text-muted);transition:color .2s}.nav__links a:hover,.nav__links a:focus-visible{color:var(--text)}
.nav__links a.active{color:var(--accent)}
.nav__cta{background:var(--accent);color:#fff;padding:10px 24px;border-radius:8px;font-weight:600;font-size:.86rem;transition:all .2s var(--ease)}.nav__cta:hover{background:var(--accent-hover);transform:translateY(-1px)}
.burger{display:none;background:none;border:none;padding:10px;width:44px;height:44px;flex-direction:column;justify-content:center;gap:5px;align-items:center}.burger span{display:block;width:22px;height:2px;background:var(--text);border-radius:2px;transition:transform .25s var(--ease),opacity .2s}
.m-open .burger span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}.m-open .burger span:nth-child(2){opacity:0}.m-open .burger span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 28px;border-radius:10px;font-weight:600;font-size:.92rem;border:none;min-height:52px;min-width:44px;transition:all .25s var(--ease)}
.btn--lg{padding:18px 40px;font-size:1rem;min-height:56px}
.btn--accent{background:var(--accent);color:#fff}.btn--accent:hover,.btn--accent:focus-visible{background:var(--accent-hover);transform:translateY(-2px);box-shadow:0 12px 32px var(--accent-glow)}
.btn--outline{background:transparent;color:var(--text);border:1.5px solid var(--border)}.btn--outline:hover{border-color:var(--accent);color:var(--accent)}
.btn--dark{background:var(--primary);color:var(--on-dark)}.btn--dark:hover{background:var(--primary-light);transform:translateY(-2px)}
.btn--white{background:#fff;color:var(--primary);font-weight:600}.btn--white:hover{transform:translateY(-2px);box-shadow:0 12px 32px oklch(0% 0 0 / .15)}

/* SECTION HELPERS */
.stag{font-family:var(--font-b);font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.16em;color:var(--accent);margin-bottom:12px}
.sh{font-family:var(--font-d);font-size:clamp(1.8rem,3.5vw,2.8rem);line-height:1.08;letter-spacing:-.03em;margin-bottom:16px}
.ssub{color:var(--text-muted);max-width:560px;font-size:1rem;line-height:1.75;margin-bottom:clamp(36px,5vw,56px)}
.page-hero{padding:clamp(140px,18vw,180px) 0 clamp(60px,8vw,80px);background:var(--bg-warm);position:relative;overflow:hidden}
.page-hero h1{font-family:var(--font-d);font-size:clamp(2.2rem,4.5vw,3.4rem);letter-spacing:-.04em;margin-bottom:16px;line-height:1.06}
.page-hero p{color:var(--text-muted);font-size:1.05rem;max-width:600px;line-height:1.75}

/* FOOTER */
footer{padding:56px 0 28px;background:var(--bg-dark);color:oklch(72% 0.008 45);font-size:.84rem}
.ft__grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;margin-bottom:40px}
.ft__brand{font-family:var(--font-d);font-size:1.3rem;color:#fff;margin-bottom:12px}
.ft__addr{line-height:2}.ft__addr a{transition:color .2s}.ft__addr a:hover{color:var(--accent)}
footer .ft-h{color:#fff;font-size:.78rem;margin-bottom:14px;text-transform:uppercase;letter-spacing:.1em;font-weight:600}
footer ul{list-style:none;display:flex;flex-direction:column;gap:8px}
footer ul a:hover{color:var(--accent)}
.ft__bottom{border-top:1px solid oklch(100% 0 0 / .06);padding-top:20px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.76rem}
.ft__bottom a{text-decoration:underline;text-underline-offset:3px}.ft__bottom a:hover{color:var(--accent)}

/* COOKIE + BTT + PROGRESS */
.cookie{position:fixed;bottom:0;left:0;right:0;background:var(--bg-dark);color:var(--on-dark);padding:16px 24px;z-index:200;display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;font-size:.82rem;border-top:1px solid var(--border-dark);transform:translateY(100%);transition:transform .4s var(--ease)}.cookie.show{transform:translateY(0)}
.cookie a{text-decoration:underline}.cookie__btn{background:var(--accent);color:#fff;border:none;padding:8px 20px;border-radius:6px;font-weight:600;font-size:.82rem;min-height:36px}
.btt{position:fixed;bottom:24px;right:24px;width:48px;height:48px;border-radius:50%;background:var(--accent);color:#fff;border:none;display:flex;align-items:center;justify-content:center;z-index:50;opacity:0;transform:translateY(20px);transition:all .3s var(--ease);box-shadow:0 4px 16px var(--accent-glow)}.btt.show{opacity:1;transform:none}.btt:hover{transform:translateY(-2px)}
.btt svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2.5}
.progress{position:fixed;top:0;left:0;height:3px;background:var(--accent);z-index:101;width:0}

/* CARDS */
.card{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:clamp(24px,3vw,36px);transition:transform .3s var(--ease),box-shadow .35s var(--ease),border-color .3s}
.card:hover{transform:translateY(-4px);box-shadow:0 20px 48px oklch(0% 0 0 / .06);border-color:oklch(62% 0.18 40 / .2)}

/* FORM */
.form{display:flex;flex-direction:column;gap:16px}
.form__group{display:flex;flex-direction:column;gap:6px}
.form__group label{font-size:.82rem;font-weight:500;color:var(--text-muted)}
.form__group input,.form__group textarea,.form__group select{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:14px 16px;font-size:.9rem;color:var(--text);font-family:var(--font-b);transition:border-color .2s;min-height:48px}
.form__group input:focus,.form__group textarea:focus,.form__group select:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--accent-glow)}
.form__group textarea{min-height:140px;resize:vertical}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form__honey{position:absolute;left:-9999px;opacity:0;height:0}

/* FAQ */
.faq__list{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.faq__item{background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden}
.faq__btn{width:100%;padding:20px 24px;background:none;border:none;display:flex;justify-content:space-between;align-items:center;font-family:var(--font-d);font-size:.95rem;font-weight:400;text-align:left;color:var(--text);min-height:52px;gap:16px;transition:color .2s}.faq__btn:hover,.faq__btn:focus-visible{color:var(--accent)}
.faq__chev{width:20px;height:20px;stroke:var(--text-muted);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease);flex-shrink:0}
.faq__item.open .faq__chev{transform:rotate(180deg);stroke:var(--accent)}
.faq__answer{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--ease-out)}.faq__item.open .faq__answer{grid-template-rows:1fr}
.faq__answer>div{overflow:hidden}.faq__answer p{padding:0 24px 20px;color:var(--text-muted);font-size:.9rem;line-height:1.75}

/* ANIMATIONS */
.rv{opacity:0;transform:translateY(28px);transition:opacity .6s var(--ease),transform .6s var(--ease-out)}
.rv.vis{opacity:1;transform:none}
.rv-d1{transition-delay:70ms}.rv-d2{transition-delay:140ms}.rv-d3{transition-delay:210ms}.rv-d4{transition-delay:280ms}.rv-d5{transition-delay:350ms}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* BROWSER MOCKUP (for Odoo Demo) */
.browser{border-radius:16px;overflow:hidden;border:1px solid var(--border);box-shadow:0 24px 64px oklch(0% 0 0 / .1)}
.browser__bar{background:oklch(96% 0.005 75);padding:10px 16px;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--border)}
.browser__dots{display:flex;gap:6px}.browser__dots span{width:10px;height:10px;border-radius:50%;background:oklch(85% 0.01 45)}
.browser__dots span:first-child{background:oklch(65% 0.15 25)}.browser__dots span:nth-child(2){background:oklch(78% 0.15 85)}.browser__dots span:nth-child(3){background:oklch(72% 0.12 145)}
.browser__url{flex:1;background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:4px 12px;font-size:.75rem;color:var(--text-muted);margin-left:8px}
.browser__content{background:var(--surface);min-height:300px;position:relative;overflow:hidden}
.browser__content img{width:100%;height:auto;display:block}

/* MODULE EXPLORER TABS */
.mod-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.mod-tab{padding:8px 18px;border-radius:100px;font-size:.82rem;font-weight:500;border:1px solid var(--border);background:var(--surface);color:var(--text-muted);transition:all .2s var(--ease);min-height:40px;cursor:pointer}
.mod-tab:hover{border-color:var(--accent);color:var(--text)}
.mod-tab.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.mod-view{display:none;animation:fadeUp .4s var(--ease)}.mod-view.active{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* GRAIN TEXTURE */
.grain{position:relative}.grain::after{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.03'/%3E%3C/svg%3E");pointer-events:none;z-index:0;border-radius:inherit}

/* RESPONSIVE */
@media(max-width:900px){
.ft__grid{grid-template-columns:1fr 1fr;gap:24px}
.nav__links{display:none;position:fixed;inset:0;background:var(--bg);flex-direction:column;justify-content:center;align-items:center;gap:24px;z-index:99}.m-open .nav__links{display:flex}
.burger{display:flex}
.form__row{grid-template-columns:1fr}
}
@media(max-width:500px){
.btn{width:100%}
.ft__grid{grid-template-columns:1fr}
.mod-tabs{gap:4px}.mod-tab{padding:6px 12px;font-size:.78rem}
}