:root{
  --ink:#12151a; --bg:#f7f7f5; --panel:#ffffff; --line:#e6e5e0; --muted:#6b7178;
  --primary:#5b4bff; --primary-ink:#2f2280; --accent:#ff6b6b; --lime:#c7f36a;
  --dark:#0c0e13; --dark-2:#151827;
  --radius:20px;
  --font-display:Georgia,'Times New Roman',serif; --font-body:Inter,system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit}
h1,h2,h3{font-family:var(--font-display);font-weight:500;margin:0}
p{margin:0}
img{max-width:100%;display:block}
.eyebrow{display:inline-block;text-transform:uppercase;letter-spacing:.14em;font-size:11px;font-weight:800;color:var(--primary)}
.button{display:inline-flex;align-items:center;gap:6px;padding:15px 26px;border-radius:99px;font-weight:750;text-decoration:none;border:1px solid transparent;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
.button.primary{background:var(--primary);color:#fff;box-shadow:0 14px 30px -10px rgba(91,75,255,.55)}
.button.primary:hover{transform:translateY(-2px);box-shadow:0 20px 40px -12px rgba(91,75,255,.6)}
.button.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.button.ghost:hover{border-color:var(--ink);transform:translateY(-2px)}

/* ---- Nav ---- */
.nav{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;padding:18px clamp(20px,5vw,64px);background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;font-weight:800;font-size:19px;color:var(--ink)}
.brand-mark{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:linear-gradient(135deg,var(--primary),#8b7bff);color:#fff;font:700 16px var(--font-display)}
.brand small{font-size:9px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-left:4px;align-self:flex-end;padding-bottom:3px}
.nav-links{display:flex;align-items:center;gap:28px;font-size:14px;font-weight:650}
.nav-links a{text-decoration:none;opacity:.8;transition:opacity .15s}
.nav-links a:hover{opacity:1}
.nav-demo{opacity:.8}
.nav-cta{opacity:1!important;padding:10px 20px}
.burger{display:none;border:0;background:transparent;font-size:22px;cursor:pointer;color:var(--ink)}

/* ---- Hero ---- */
.hero{position:relative;overflow:hidden;background:radial-gradient(ellipse 120% 100% at 50% -10%,var(--dark-2),var(--dark) 60%);color:#fff;padding:70px clamp(20px,5vw,64px) 40px}
.hero-glow{position:absolute;inset:-20% -10% auto -10%;height:70%;background:radial-gradient(circle at 30% 30%,rgba(91,75,255,.55),transparent 60%),radial-gradient(circle at 75% 20%,rgba(199,243,106,.25),transparent 55%);filter:blur(40px);animation:drift 16s ease-in-out infinite alternate}
@keyframes drift{from{transform:translate(0,0) scale(1)}to{transform:translate(2%,3%) scale(1.05)}}
.hero-inner{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:50px;align-items:center;max-width:1280px;margin:0 auto;padding:40px 0 60px}
.hero-copy .eyebrow{color:var(--lime)}
.hero h1{font-size:clamp(38px,5.2vw,62px);line-height:1.04;letter-spacing:-.02em;margin:20px 0 22px}
.hero h1 em{font-style:normal;background:linear-gradient(90deg,var(--lime),#9be3ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-copy p{font-size:17px;line-height:1.65;color:#c7cad6;max-width:520px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin:32px 0 22px}
.hero .button.ghost{color:#fff;border-color:rgba(255,255,255,.25)}
.hero .button.ghost:hover{border-color:#fff}
.hero-trust{font-size:12px;color:#8a8fa3}

/* ---- Hero visual: browser mockups (no external screenshots, self-hosted-only) ---- */
.hero-visual{position:relative}
.mock-browser{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 40px 90px -20px rgba(0,0,0,.55);transform:rotate(1.2deg);animation:float 6s ease-in-out infinite}
@keyframes float{0%,100%{transform:rotate(1.2deg) translateY(0)}50%{transform:rotate(1.2deg) translateY(-10px)}}
.mock-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:#f1f1ee;border-bottom:1px solid #e4e4de}
.mock-bar span{width:9px;height:9px;border-radius:50%;background:#d7d7cf}
.mock-bar span:nth-child(1){background:#ff8a80}.mock-bar span:nth-child(2){background:#ffd479}.mock-bar span:nth-child(3){background:#8ee6a3}
.mock-url{margin-left:10px;font-size:10px;color:#8b8f86;background:#fff;border-radius:6px;padding:4px 10px;flex:1}
.mock-body{padding:20px}
.mock-booking{display:grid;grid-template-columns:1fr 1.3fr;gap:16px}
.mock-services{display:grid;gap:8px}
.mock-service{border:1px solid #e9e9e3;border-radius:10px;padding:10px}
.mock-service b{display:block;width:70%;height:9px;border-radius:4px;background:#d8d8d0;margin-bottom:6px}
.mock-service small{display:block;width:45%;height:6px;border-radius:3px;background:#e9e9e3}
.mock-service.active{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 7%,#fff)}
.mock-service.active b{background:var(--primary)}
.mock-calendar{border:1px solid #e9e9e3;border-radius:10px;padding:12px}
.mock-cal-head{width:60%;height:9px;border-radius:4px;background:#d8d8d0;margin-bottom:12px}
.mock-slots{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.mock-slots .s{height:26px;border-radius:7px;background:#f1f1ee;border:1px solid #e9e9e3}
.mock-slots .s.on{background:var(--primary);border-color:var(--primary);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.6}}
.mock-float{position:absolute;display:flex;align-items:center;gap:10px;background:#fff;color:var(--ink);border-radius:14px;padding:10px 16px;box-shadow:0 20px 40px -12px rgba(0,0,0,.35);font-size:12px;font-weight:700}
.mock-float-a{top:-14px;right:8%;animation:float 5s ease-in-out infinite 1s}
.mock-float-a .dot{width:8px;height:8px;border-radius:50%;background:#3fbf7f}
.mock-float-b{bottom:-18px;left:-6%;animation:float 7s ease-in-out infinite .5s}
.mock-avatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--accent))}
.mock-float-b strong{display:block;color:var(--primary)}
.mock-float-b small{color:var(--muted)}

/* ---- Trust strip ---- */
.logos{padding:38px clamp(20px,5vw,64px);text-align:center}
.logos p{font-size:11px;text-transform:uppercase;letter-spacing:.12em;font-weight:750;color:var(--muted)}
.logo-row{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 26px;margin-top:16px}
.logo-row span{font:700 13px var(--font-display);color:var(--ink);opacity:.55}

/* ---- Sections ---- */
.section{padding:90px clamp(20px,5vw,64px);max-width:1280px;margin:0 auto}
.section-head{max-width:640px;margin:0 auto 50px;text-align:center}
.section-head h2{font-size:clamp(30px,3.6vw,44px);letter-spacing:-.02em;margin:14px 0}
.section-head p{color:var(--muted);font-size:16px;line-height:1.6}

/* ---- Feature grid ---- */
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.feature-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:30px;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.feature-card:hover{transform:translateY(-6px);box-shadow:0 30px 60px -30px rgba(20,20,40,.25);border-color:color-mix(in srgb,var(--primary) 30%,var(--line))}
.feature-icon{width:46px;height:46px;display:grid;place-items:center;border-radius:12px;background:color-mix(in srgb,var(--primary) 10%,#fff);font-size:22px;margin-bottom:18px}
.feature-card h3{font-size:19px;margin-bottom:8px}
.feature-card p{color:var(--muted);font-size:14px;line-height:1.6}

/* ---- Warum Rivoli Studio / comparison ---- */
.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:16px}
.compare-col{border-radius:var(--radius);padding:30px 28px;border:1px solid var(--line)}
.compare-col h3{font-size:14px;margin-bottom:18px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-family:var(--font-body)}
.compare-old{background:#f1f1ee}
.compare-old h3{color:var(--muted)}
.compare-new{background:var(--panel);border-color:color-mix(in srgb,var(--primary) 30%,var(--line));box-shadow:0 30px 60px -35px rgba(91,75,255,.35)}
.compare-new h3{color:var(--primary)}
.compare-list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.compare-list li{position:relative;padding-left:28px;font-size:14.5px;line-height:1.5}
.compare-old .compare-list li{color:var(--muted)}
.compare-old .compare-list li::before{content:"–";position:absolute;left:0;top:0;width:20px;height:20px;border-radius:50%;background:#e6e5e0;color:#9a9a92;font-size:12px;font-weight:900;display:grid;place-items:center}
.compare-new .compare-list li{color:var(--ink)}
.compare-new .compare-list li::before{content:"✓";position:absolute;left:0;top:0;width:20px;height:20px;border-radius:50%;background:color-mix(in srgb,var(--primary) 14%,#fff);color:var(--primary);font-size:11px;font-weight:900;display:grid;place-items:center}
.usp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.usp-badge{display:flex;align-items:center;gap:10px;padding:16px 18px;border-radius:14px;background:var(--panel);border:1px solid var(--line);font-size:13.5px;font-weight:700}
.usp-badge span{font-size:18px}

/* ---- Editor showcase ---- */
.editor-section{background:var(--panel);border-radius:32px;margin-left:clamp(10px,2vw,20px);margin-right:clamp(10px,2vw,20px)}
.editor-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.editor-copy h2{font-size:clamp(28px,3.2vw,38px);margin:14px 0 22px;letter-spacing:-.01em}
.check-list{list-style:none;margin:0 0 28px;padding:0;display:grid;gap:12px}
.check-list li{position:relative;padding-left:28px;color:var(--ink);font-size:14.5px;line-height:1.5}
.check-list li::before{content:"✓";position:absolute;left:0;top:0;width:20px;height:20px;border-radius:50%;background:color-mix(in srgb,var(--primary) 14%,#fff);color:var(--primary);font-size:11px;font-weight:900;display:grid;place-items:center}
.check-list.compact li{font-size:13.5px}

.mock-editor-body{display:grid;grid-template-columns:60px 1fr 90px;gap:12px;padding:16px}
.mock-palette{display:grid;gap:8px;align-content:start}
.mock-block{height:26px;border-radius:7px;background:#f1f1ee;border:1px solid #e9e9e3}
.mock-canvas{display:grid;gap:10px}
.mock-section{border-radius:8px;background:#f6f6f2;border:1px solid #eaeae4}
.mock-hero-block{height:60px;background:linear-gradient(120deg,color-mix(in srgb,var(--primary) 16%,#fff),color-mix(in srgb,var(--lime) 25%,#fff))}
.mock-text-block{height:30px}
.mock-grid-block{height:44px;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:6px}
.mock-grid-block span{background:#e9e9e3;border-radius:5px}
.mock-inspector{display:grid;gap:8px;align-content:start}
.mock-field{height:16px;border-radius:5px;background:#f1f1ee;border:1px solid #e9e9e3}
.mock-swatches{display:flex;gap:6px;margin-top:6px}
.mock-swatches i{width:16px;height:16px;border-radius:50%;display:block}
.mock-swatches .c1{background:var(--primary)}.mock-swatches .c2{background:var(--lime)}.mock-swatches .c3{background:var(--accent)}
.mock-editor{transform:rotate(-1deg)}

/* ---- Steps ---- */
.steps-section{padding-top:40px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:50px}
.step{position:relative;padding:34px 26px;border-radius:var(--radius);background:linear-gradient(160deg,#fff,#f2f1ec);border:1px solid var(--line)}
.step-number{font:700 13px var(--font-display);color:var(--primary);opacity:.6;display:block;margin-bottom:14px}
.step h3{font-size:20px;margin-bottom:8px}
.step p{color:var(--muted);font-size:14px;line-height:1.6}

/* ---- Audience grid ---- */
.audience-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.audience-card{display:flex;flex-direction:column;align-items:center;gap:10px;padding:26px 10px;border-radius:16px;background:var(--panel);border:1px solid var(--line);font-weight:700;font-size:13px;text-align:center;transition:transform .18s ease,border-color .18s ease}
.audience-card span{font-size:28px}
.audience-card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--primary) 35%,var(--line))}

/* ---- CTA / contact ---- */
.cta-section{padding-top:20px}
.cta-wrap{display:grid;grid-template-columns:1fr 1fr;gap:50px;background:var(--dark);color:#fff;border-radius:32px;padding:clamp(36px,5vw,64px);align-items:center;position:relative;overflow:hidden}
.cta-wrap::before{content:"";position:absolute;inset:-30% -10% auto auto;width:60%;height:80%;background:radial-gradient(circle,rgba(91,75,255,.45),transparent 65%);filter:blur(30px)}
.cta-copy{position:relative}
.cta-copy .eyebrow{color:var(--lime)}
.cta-copy h2{font-size:clamp(26px,3vw,36px);margin:14px 0 14px;letter-spacing:-.01em}
.cta-copy p{color:#c7cad6;line-height:1.6;margin-bottom:22px}
.cta-copy .check-list li{color:#e4e5ee}
.cta-copy .check-list li::before{background:rgba(199,243,106,.18);color:var(--lime)}
.lead-form{position:relative;display:grid;gap:14px;background:#fff;color:var(--ink);border-radius:20px;padding:28px}
.lead-form label{display:grid;gap:6px;font-size:12px;font-weight:700}
.lead-form small{color:var(--muted);font-weight:500}
.lead-form input,.lead-form textarea{border:1px solid var(--line);border-radius:10px;padding:11px 13px;font:inherit;outline:none;resize:vertical}
.lead-form input:focus,.lead-form textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 15%,transparent)}
.lead-form textarea{min-height:90px}
.lead-form .hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}
.lead-form button{margin-top:4px}
.lead-note{font-size:13px;font-weight:700;margin:0;text-align:center}
.lead-note.ok{color:#1e8a4c}
.lead-note.err{color:#b3261e}

/* ---- Footer ---- */
.footer{padding:50px clamp(20px,5vw,64px) 60px;text-align:center}
.footer-inner{display:grid;gap:8px;justify-items:center}
.footer .brand{justify-content:center}
.footer p{color:var(--muted);font-size:13px}
.footer p a{color:var(--primary);font-weight:700;text-decoration:none}
.footer-links{display:flex;gap:18px;margin-top:6px;font-size:12px}
.footer-links a{color:var(--muted);text-decoration:none}
.footer-links a:hover{color:var(--ink)}

/* ---- Scroll reveal ---- */
[data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
[data-reveal].in-view{opacity:1;transform:none}
[data-reveal-delay="1"]{transition-delay:.1s}
[data-reveal-delay="2"]{transition-delay:.2s}
@media(prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none;transition:none}.hero-glow,.mock-browser,.mock-float,.mock-slots .s.on{animation:none}}

/* ---- Responsive ---- */
@media(max-width:980px){
  .hero-inner{grid-template-columns:1fr;gap:50px}
  .editor-grid{grid-template-columns:1fr}
  .editor-visual{order:2}
  .feature-grid{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr}
  .audience-grid{grid-template-columns:repeat(3,1fr)}
  .cta-wrap{grid-template-columns:1fr}
  .compare-grid{grid-template-columns:1fr}
  .usp-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
  .nav-links{position:fixed;inset:64px 0 0 0;background:var(--bg);flex-direction:column;justify-content:flex-start;padding:30px 24px;gap:20px;display:none}
  .nav-links.open{display:flex}
  .burger{display:block}
  .feature-grid{grid-template-columns:1fr}
  .audience-grid{grid-template-columns:1fr 1fr}
  .mock-booking{grid-template-columns:1fr}
  .mock-editor-body{grid-template-columns:1fr}
  .mock-palette{grid-auto-flow:column}
  .usp-grid{grid-template-columns:1fr}
}
/* Rivoli Workspace visual system — Studio */
:root{--ink:#17211b;--bg:#f6f8f5;--panel:#fff;--line:#dde5df;--muted:#66716a;--primary:#164b32;--primary-ink:#0f3825;--accent:#d8794d;--lime:#c9f06a;--dark:#0f3825;--dark-2:#164b32;--radius:18px;--font-display:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;--font-body:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}.nav{padding:15px clamp(20px,5vw,64px);background:rgba(255,255,255,.9);backdrop-filter:blur(16px)}.brand-mark{width:38px;height:38px;border-radius:11px;background:#fff0e8;color:#9a5130;font:800 16px var(--font-body)}.nav-links{gap:24px}.nav-cta{border-radius:11px}.button{border-radius:12px}.button.primary{box-shadow:0 12px 30px rgba(22,75,50,.2)}.button.primary:hover{box-shadow:0 16px 35px rgba(22,75,50,.25)}.hero{background:radial-gradient(circle at 72% 8%,rgba(201,240,106,.16),transparent 26%),linear-gradient(145deg,#0d2d1e,#164b32);padding-top:76px}.hero-glow{background:radial-gradient(circle at 30% 30%,rgba(216,121,77,.2),transparent 55%),radial-gradient(circle at 75% 20%,rgba(201,240,106,.18),transparent 55%)}.hero h1{font-weight:780;letter-spacing:-.045em}.hero h1 em{background:linear-gradient(90deg,var(--lime),#e8f7c5);-webkit-background-clip:text;background-clip:text}.mock-service.active,.mock-slots .s.on{border-color:#d8794d;background:#d8794d}.mock-service.active b{background:#9a5130}.mock-avatar{background:linear-gradient(135deg,#d8794d,#f2b28f)}.mock-float-b strong{color:var(--primary)}.logo-row span{font-family:var(--font-body)}.section-head h2,.editor-copy h2,.cta-copy h2{font-weight:750;letter-spacing:-.035em}.feature-card,.compare-col,.step,.audience-card{border-radius:18px}.feature-icon{background:#fff0e8}.compare-new{border-color:#bdd1c2;box-shadow:0 25px 60px -35px rgba(22,75,50,.4)}.editor-section{border:1px solid var(--line)}.step-number{font-family:var(--font-body)}.cta-wrap{background:linear-gradient(140deg,#0f3825,#164b32)}.cta-wrap:before{background:radial-gradient(circle,rgba(201,240,106,.2),transparent 65%)}.lead-form{border-radius:18px}.footer{background:#10251a;color:#fff;margin-top:70px}.footer p,.footer-links a{color:#9eb4a6}.footer p a{color:var(--lime)}