:root {
    --bg: #0a1628;
    --bg-soft: #0f1d35;
    --bg-card: #10203c;
    --line: #1e2d49;
    --mint: #1FC59F;
    --mint-dark: #17a589;
    --text: #ffffff;
    --muted: #a0aec0;
    --muted-soft: #6b7280;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0; padding: 0;
    background: var(--bg); color: var(--text);
    font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    font-family: inherit; font-weight: 600; font-size: 15px;
    border-radius: 10px; cursor: pointer; border: none;
    transition: all 0.25s ease; white-space: nowrap;
}
.btn-primary { background: var(--mint); color: var(--bg); padding: 12px 22px; }
.btn-primary:hover { background: var(--mint-dark); transform: translateY(-2px); box-shadow: 0 14px 34px -12px rgba(31,197,159,0.7); }
.btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--line); padding: 12px 22px; }
.btn-ghost:hover { border-color: var(--mint); color: var(--mint); }
.btn-lg { padding: 16px 32px; font-size: 17px; }

/* ---------- Header ---------- */
header.site-header {
    position: sticky; top: 0; z-index: 100;
    background: rgba(10,22,40,0.72);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s ease, background 0.3s ease;
}
header.site-header.scrolled { border-bottom-color: var(--line); background: rgba(10,22,40,0.94); }
header.site-header .container { max-width: none; padding: 0 32px; }
.nav { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 24px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 20px; letter-spacing: -0.02em; }
.brand-mark { width: 26px; height: 26px; display: inline-block; flex-shrink: 0; background-color: var(--mint); -webkit-mask: url("/kms/websfera/img/websfera.svg?v=1") no-repeat center / contain; mask: url("/kms/websfera/img/websfera.svg?v=1") no-repeat center / contain; }
.brand .brand-dot { color: var(--mint); }
.brand-beta {
    align-self: flex-start;
    margin-top: 1px;
    padding: 2px 7px;
    border: 1px solid var(--mint);
    border-radius: 999px;
    color: var(--mint);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.nav-links { display: flex; align-items: center; gap: 26px; margin-left: auto; margin-right: 26px; }
.nav-links a { color: var(--muted); font-size: 15px; font-weight: 500; white-space: nowrap; transition: color 0.2s ease; }
.nav-links a:hover { color: var(--text); }
.nav-right { display: flex; align-items: center; gap: 16px; }

.lang-switch { display: flex; align-items: center; gap: 2px; border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.lang-switch button { background: none; border: none; color: var(--muted); font-family: inherit; font-size: 13px; font-weight: 600; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; cursor: pointer; transition: all 0.2s ease; }
.lang-switch button:hover { color: var(--text); }
.lang-switch button.active { background: var(--mint); color: var(--bg); }

.nav-toggle { display: none; background: none; border: none; color: var(--text); cursor: pointer; padding: 6px; }
.mobile-menu { display: none; flex-direction: column; padding: 12px 24px 22px; border-top: 1px solid var(--line); background: rgba(10,22,40,0.99); }
.mobile-menu.open { display: flex; }
.mobile-menu a { color: var(--muted); padding: 13px 0; font-size: 16px; font-weight: 500; border-bottom: 1px solid var(--line); }
.mobile-menu .btn-primary { margin-top: 16px; }

/* ---------- Browser & phone frames ---------- */
.browser {
    border-radius: 14px; overflow: hidden;
    border: 1px solid var(--line);
    background: #0c182c;
    box-shadow: 0 50px 90px -45px rgba(0,0,0,0.85);
}
.browser-bar { display: flex; align-items: center; gap: 8px; padding: 11px 14px; background: #0c182c; border-bottom: 1px solid var(--line); }
.browser-dots { display: flex; gap: 6px; }
.browser-dots i { width: 11px; height: 11px; border-radius: 50%; background: #2d3c58; display: block; }
.browser-dots i:nth-child(1){ background:#ef5f5f; } .browser-dots i:nth-child(2){ background:#f0b429; } .browser-dots i:nth-child(3){ background:#1FC59F; }
.browser-url { flex: 1; margin-left: 6px; height: 22px; border-radius: 999px; background: #0a1628; border: 1px solid var(--line); display: flex; align-items: center; padding: 0 12px; font-size: 11px; color: var(--muted-soft); }
.browser-url svg { width: 11px; height: 11px; margin-right: 6px; opacity: 0.7; }
.browser img { width: 100%; height: auto; display: block; }

.phone {
    border-radius: 30px; border: 7px solid #0c182c; background: #0c182c;
    box-shadow: 0 40px 70px -30px rgba(0,0,0,0.85);
    overflow: hidden; width: 200px;
}
.phone img { width: 100%; height: auto; display: block; }

/* ---------- Hero ---------- */
.hero { position: relative; padding: 76px 0 96px; overflow: hidden; }
.hero::before {
    content: ""; position: absolute; top: -240px; left: 60%; transform: translateX(-50%);
    width: 1000px; height: 760px;
    background: radial-gradient(circle, rgba(31,197,159,0.18) 0%, rgba(31,197,159,0) 62%);
    pointer-events: none; z-index: 0;
}
.hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1.04fr; align-items: center; gap: 56px; }
.eyebrow {
    display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600;
    letter-spacing: 0.04em; text-transform: uppercase; color: var(--mint);
    background: rgba(31,197,159,0.1); border: 1px solid rgba(31,197,159,0.25);
    padding: 6px 14px; border-radius: 999px; margin-bottom: 24px;
}
.hero h1 { font-size: clamp(38px, 5vw, 60px); line-height: 1.04; font-weight: 700; letter-spacing: -0.03em; margin: 0 0 20px; }
.hero h1 .accent { color: var(--mint); }
.hero-lead { font-size: 19px; color: var(--muted); font-weight: 300; max-width: 540px; margin: 0 0 34px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.hero-words { margin-top: 30px; font-size: 15px; color: var(--muted-soft); font-weight: 500; letter-spacing: 0.02em; }
.hero-words b { color: var(--mint); font-weight: 600; }

.hero-visual { position: relative; display: flex; align-items: center; justify-content: center; min-height: 440px; }
.hero-browser { position: relative; width: 100%; max-width: 540px; animation: floaty 7s ease-in-out infinite; }
.hero-phone { position: absolute; bottom: -34px; left: -18px; width: 150px; animation: floaty 7s ease-in-out infinite 0.8s; }
.hero-badge {
    position: absolute; top: -16px; right: 18px; z-index: 3;
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--mint); color: var(--bg); font-size: 12px; font-weight: 700;
    padding: 7px 13px; border-radius: 999px; box-shadow: 0 12px 30px -10px rgba(31,197,159,0.7);
}
.hero-badge svg { width: 13px; height: 13px; }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }

/* ---------- Trust strip ---------- */
.trust { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg-soft); padding: 26px 0; }
.trust-inner { display: flex; align-items: center; justify-content: center; gap: 16px 40px; flex-wrap: wrap; }
.trust-label { font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted-soft); font-weight: 600; }
.trust-sites { display: flex; gap: 34px; flex-wrap: wrap; }
.trust-sites a { color: var(--muted); font-weight: 600; font-size: 17px; opacity: 0.75; transition: opacity 0.2s ease, color 0.2s ease; }
.trust-sites a:hover { opacity: 1; color: var(--text); }

/* ---------- Sections ---------- */
section { position: relative; }
.section-pad { padding: 92px 0; }
.section-head { text-align: center; max-width: 680px; margin: 0 auto 56px; }
.section-tag { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mint); margin-bottom: 14px; }
.section-head h2 { font-size: clamp(28px, 3.6vw, 42px); line-height: 1.12; letter-spacing: -0.02em; margin: 0 0 16px; font-weight: 700; }
.section-head p { font-size: 18px; color: var(--muted); font-weight: 300; margin: 0; }

/* ---------- Features grid ---------- */
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.feature-card { background: var(--bg-card); border: 1px solid var(--line); border-radius: 16px; padding: 30px 28px; transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; }
.feature-card:hover { transform: translateY(-4px); border-color: rgba(31,197,159,0.5); box-shadow: 0 24px 50px -30px rgba(31,197,159,0.35); }
.feature-icon { width: 50px; height: 50px; border-radius: 12px; background: rgba(31,197,159,0.12); color: var(--mint); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.feature-icon svg { width: 26px; height: 26px; }
.feature-card h3 { font-size: 19px; font-weight: 600; margin: 0 0 10px; letter-spacing: -0.01em; }
.feature-card p { font-size: 15px; color: var(--muted); margin: 0; font-weight: 300; }

/* ---------- Alternating highlights ---------- */
.highlights { background: var(--bg-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.feature-row { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 64px; padding: 78px 0; }
.feature-row + .feature-row { border-top: 1px solid var(--line); }
.feature-row.reverse .feature-row-media { order: 2; }
.feature-row .feature-row-copy .section-tag { margin-bottom: 12px; }
.feature-row h3 { font-size: clamp(24px, 3vw, 32px); line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 16px; font-weight: 700; }
.feature-row p { font-size: 17px; color: var(--muted); font-weight: 300; margin: 0 0 22px; }
.feature-row ul { list-style: none; padding: 0; margin: 0; }
.feature-row ul li { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; font-size: 15px; color: var(--muted); }
.feature-row ul li svg { flex-shrink: 0; width: 20px; height: 20px; color: var(--mint); margin-top: 3px; }

.media-duo { position: relative; }
.media-duo .phone { position: absolute; right: -10px; bottom: -26px; width: 132px; z-index: 2; }

/* ---------- Editor mockup ---------- */
.editor-wrap { max-width: 1040px; margin: 0 auto; }
.editor {
    border-radius: 16px; overflow: hidden; border: 1px solid var(--line);
    background: #0c182c; box-shadow: 0 50px 100px -45px rgba(0,0,0,0.9);
    display: grid; grid-template-columns: 232px 1fr; grid-template-rows: auto 1fr;
}
.ed-sidebar { grid-row: 1 / 3; background: #0a1424; border-right: 1px solid var(--line); padding: 14px 12px; }
.ed-brand { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 15px; padding: 6px 8px 14px; border-bottom: 1px solid var(--line); margin-bottom: 10px; }
.ed-brand .brand-mark { width: 20px; height: 20px; }
.ed-brand .brand-dot { color: var(--mint); }
.ed-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ed-menu li { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 8px; font-size: 13.5px; color: var(--muted); cursor: default; transition: background 0.2s ease, color 0.2s ease; }
.ed-menu li .ed-ic { width: 26px; height: 26px; border-radius: 7px; background: rgba(255,255,255,0.04); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ed-menu li .ed-ic svg { width: 15px; height: 15px; }
.ed-menu li.active { background: rgba(31,197,159,0.13); color: var(--text); }
.ed-menu li.active .ed-ic { background: rgba(31,197,159,0.22); color: var(--mint); }
.ed-menu li:not(.active) .ed-ic { color: var(--muted); }

.ed-toolbar { display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: #0c182c; border-bottom: 1px solid var(--line); }
.ed-page { font-size: 13px; color: var(--muted); font-weight: 500; }
.ed-devices { display: flex; gap: 4px; margin: 0 auto; background: #0a1424; border: 1px solid var(--line); border-radius: 9px; padding: 4px; }
.ed-devices button { background: none; border: none; color: var(--muted-soft); width: 32px; height: 28px; border-radius: 6px; display: flex; align-items: center; justify-content: center; cursor: default; }
.ed-devices button svg { width: 16px; height: 16px; }
.ed-devices button.active { background: var(--mint); color: var(--bg); }
.ed-tools { display: flex; align-items: center; gap: 10px; }
.ed-tools .ed-icbtn { width: 30px; height: 30px; border-radius: 7px; border: 1px solid var(--line); background: #0a1424; color: var(--muted); display: flex; align-items: center; justify-content: center; }
.ed-tools .ed-icbtn svg { width: 15px; height: 15px; }
.ed-publish { background: var(--mint); color: var(--bg); font-weight: 600; font-size: 13px; padding: 8px 15px; border-radius: 8px; display: inline-flex; align-items: center; gap: 7px; }
.ed-publish svg { width: 14px; height: 14px; }

.ed-canvas { position: relative; background: #0a1628; overflow: hidden; min-height: 360px; }
.ed-canvas > img { width: 100%; height: auto; display: block; opacity: 0.96; }
.ed-select { position: absolute; left: 5.5%; top: 16%; width: 42%; height: 46%; border: 2px dashed var(--mint); border-radius: 8px; box-shadow: 0 0 0 3px rgba(31,197,159,0.12); }
.ed-tag { position: absolute; top: -11px; left: -2px; background: var(--mint); color: var(--bg); font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 5px; white-space: nowrap; }
.ed-floattb { position: absolute; left: 50%; top: -46px; transform: translateX(-50%); display: flex; align-items: center; gap: 3px; background: #0c182c; border: 1px solid var(--line); border-radius: 9px; padding: 5px 6px; box-shadow: 0 14px 30px -12px rgba(0,0,0,0.8); }
.ed-floattb span { width: 28px; height: 26px; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 13px; font-weight: 700; }
.ed-floattb span svg { width: 14px; height: 14px; }
.ed-floattb .ai { background: rgba(31,197,159,0.16); color: var(--mint); gap: 4px; width: auto; padding: 0 9px; font-size: 11px; font-weight: 700; }
.ed-floattb .ai svg { width: 12px; height: 12px; }
.ed-floattb i.sep { width: 1px; height: 16px; background: var(--line); display: block; }

/* Menu + blocks explainer grids */
.menu-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 52px; }
.menu-item { display: flex; gap: 13px; align-items: flex-start; background: var(--bg-card); border: 1px solid var(--line); border-radius: 12px; padding: 16px 17px; }
.menu-item .mi-ic { flex-shrink: 0; width: 38px; height: 38px; border-radius: 9px; background: rgba(31,197,159,0.12); color: var(--mint); display: flex; align-items: center; justify-content: center; }
.menu-item .mi-ic svg { width: 19px; height: 19px; }
.menu-item h4 { margin: 1px 0 3px; font-size: 15px; font-weight: 600; }
.menu-item p { margin: 0; font-size: 13px; color: var(--muted); font-weight: 300; line-height: 1.45; }

.blocks { margin-top: 26px; }
.blocks-title { text-align: center; font-size: 14px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted-soft); margin-bottom: 20px; }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 860px; margin: 0 auto; }
.chip { display: inline-flex; align-items: center; gap: 8px; background: var(--bg-card); border: 1px solid var(--line); border-radius: 999px; padding: 9px 16px; font-size: 14px; color: var(--muted); transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease; }
.chip:hover { border-color: rgba(31,197,159,0.5); color: var(--text); transform: translateY(-2px); }
.chip svg { width: 15px; height: 15px; color: var(--mint); }

/* ---------- How it works ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.step { position: relative; padding-top: 18px; }
.step-num { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--mint); color: var(--mint); font-weight: 700; font-size: 19px; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; background: var(--bg); }
.step h3 { font-size: 18px; font-weight: 600; margin: 0 0 8px; }
.step p { font-size: 15px; color: var(--muted); font-weight: 300; margin: 0; }
.step:not(:last-child)::after { content: ""; position: absolute; top: 41px; left: 58px; right: -12px; height: 1px; background: linear-gradient(90deg, var(--mint), transparent); opacity: 0.4; }

/* ---------- Showcase ---------- */
.showcase { background: var(--bg-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.showcase-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.showcase-card { transition: transform 0.3s ease; }
.showcase-card:hover { transform: translateY(-6px); }
.showcase-card .browser { transition: border-color 0.3s ease, box-shadow 0.3s ease; }
.showcase-card:hover .browser { border-color: rgba(31,197,159,0.5); box-shadow: 0 40px 70px -35px rgba(31,197,159,0.4); }
.showcase-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 18px; }
.showcase-meta h4 { font-size: 18px; font-weight: 600; margin: 0; }
.showcase-meta .visit { font-size: 14px; color: var(--mint); font-weight: 600; white-space: nowrap; }
.showcase-card p { font-size: 14px; color: var(--muted); font-weight: 300; margin: 4px 0 0; }

/* ---------- Why / stats ---------- */
.why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.why-list { list-style: none; padding: 0; margin: 0; }
.why-list li { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.why-list li:last-child { border-bottom: none; }
.why-check { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: rgba(31,197,159,0.14); color: var(--mint); display: flex; align-items: center; justify-content: center; margin-top: 2px; }
.why-check svg { width: 15px; height: 15px; }
.why-list h4 { margin: 0 0 4px; font-size: 17px; font-weight: 600; }
.why-list p { margin: 0; font-size: 15px; color: var(--muted); font-weight: 300; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.stat-card { background: var(--bg-card); border: 1px solid var(--line); border-radius: 16px; padding: 28px 24px; }
.stat-card .stat-num { font-size: 38px; font-weight: 700; color: var(--mint); line-height: 1; margin-bottom: 10px; letter-spacing: -0.02em; }
.stat-card .stat-label { font-size: 14px; color: var(--muted); font-weight: 300; }

/* ---------- Pricing ---------- */
.pricing { background: var(--bg-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: start; }
.plan { position: relative; display: flex; flex-direction: column; background: var(--bg-card); border: 1px solid var(--line); border-radius: 18px; padding: 32px 28px; transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; }
.plan:hover { transform: translateY(-4px); border-color: rgba(31,197,159,0.5); box-shadow: 0 24px 50px -30px rgba(31,197,159,0.35); }
.plan.featured { border-color: var(--mint); box-shadow: 0 30px 60px -34px rgba(31,197,159,0.5); }
.plan-badge { position: absolute; top: -13px; left: 28px; background: var(--mint); color: var(--bg); font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; padding: 5px 13px; border-radius: 999px; }
.plan h3 { font-size: 21px; font-weight: 600; margin: 0 0 8px; letter-spacing: -0.01em; }
.plan .plan-for { font-size: 14px; color: var(--muted); font-weight: 300; margin: 0 0 22px; }
.plan-price { display: flex; align-items: baseline; gap: 7px; }
.plan-price .amount { font-size: 46px; font-weight: 700; line-height: 1; letter-spacing: -0.03em; }
.plan-price .per { font-size: 15px; color: var(--muted); font-weight: 300; }
.plan-year { font-size: 13px; color: var(--muted-soft); margin: 9px 0 22px; }
.plan > .btn { width: 100%; }
.plan-feats { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-direction: column; gap: 11px; }
.plan-feats li { display: flex; gap: 10px; font-size: 14.5px; color: var(--muted); font-weight: 300; }
.plan-feats li svg { flex-shrink: 0; width: 17px; height: 17px; color: var(--mint); margin-top: 4px; }
.plan-feats li.plan-inherit { color: var(--text); font-weight: 600; font-size: 14px; padding-bottom: 2px; }
.plan-feats li.feat-ai { color: var(--text); font-weight: 600; background: rgba(31,197,159,0.10); border: 1px solid rgba(31,197,159,0.35); border-radius: 8px; padding: 8px 12px; margin-top: 2px; }
.plan-feats li.feat-ai svg { margin-top: 3px; }
.pricing-fee { text-align: center; font-size: 13px; color: var(--muted-soft); font-weight: 300; margin: 22px auto 0; max-width: 100%; line-height: 1.6; }
.pricing-fee b { color: var(--muted); font-weight: 600; }
.plan-year b { color: var(--mint); font-weight: 600; }
.pricing-note { text-align: center; font-size: 13px; color: var(--muted-soft); font-weight: 300; margin: 2px auto 0; max-width: 100%; line-height: 1.6; }
.pricing-callout { display: flex; align-items: flex-start; gap: 16px; text-align: left; max-width: 860px; margin: 22px auto 0; padding: 20px 24px; border: 1px solid rgba(31,197,159,0.35); border-radius: 16px; background: linear-gradient(180deg, rgba(31,197,159,0.10), rgba(31,197,159,0.03)); box-shadow: 0 18px 40px -28px rgba(31,197,159,0.55); }
.pricing-callout .pc-icon { flex-shrink: 0; width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: rgba(31,197,159,0.14); border: 1px solid rgba(31,197,159,0.4); }
.pricing-callout .pc-icon svg { width: 20px; height: 20px; color: var(--mint); }
.pricing-callout p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--muted); font-weight: 300; }
.pricing-callout b { color: var(--text); font-weight: 600; }
.pricing-callout a { color: var(--mint); font-weight: 500; border-bottom: 1px solid rgba(31,197,159,0.4); }
.pricing-callout a:hover { border-color: var(--mint); }
.pricing-callout .ps-note { display: block; margin-top: 8px; font-size: 12.5px; color: var(--muted-soft); }
.pricing-callouts { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; align-items: stretch; max-width: 860px; margin: 26px auto 0; }
.pricing-callouts .pricing-callout { margin: 0; height: 100%; }
.ib-foot { text-align: center; margin-top: 40px; }
.ib-foot p { font-size: 15px; color: var(--muted); font-weight: 300; margin: 0 0 20px; }

.cost-compare { max-width: 900px; margin: 44px auto 0; }
.cc-head { text-align: center; font-size: 20px; font-weight: 600; margin: 0 0 20px; letter-spacing: -0.01em; }
.cc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cc-col { background: var(--bg-card); border: 1px solid var(--line); border-radius: 16px; padding: 24px 26px; }
.cc-col.cc-ours { border-color: rgba(31,197,159,0.55); }
.cc-col h5 { margin: 0 0 16px; font-size: 15px; font-weight: 600; letter-spacing: 0.01em; }
.cc-col.cc-ours h5 { color: var(--mint); }
.cc-list { list-style: none; margin: 0; padding: 0; }
.cc-list li { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; font-size: 14.5px; color: var(--muted); font-weight: 300; border-bottom: 1px solid var(--line); }
.cc-list li span:last-child { white-space: nowrap; color: var(--text); font-weight: 500; }
.cc-list li.cc-total { border-bottom: none; padding-top: 14px; font-size: 16px; color: var(--text); font-weight: 600; }
.cc-list li.cc-total span:last-child { font-size: 20px; font-weight: 700; }
.cc-ours .cc-list li.cc-total span:last-child { color: var(--mint); }
.cc-foot { text-align: center; font-size: 12.5px; color: var(--muted-soft); font-weight: 300; margin: 18px auto 0; max-width: 720px; }

.pricing-compare { max-width: 1000px; margin: 40px auto 0; background: var(--bg-card); border: 1px solid var(--line); border-radius: 16px; }
.pricing-compare > summary { cursor: pointer; padding: 18px 24px; font-size: 15.5px; font-weight: 600; display: flex; align-items: center; justify-content: space-between; gap: 14px; list-style: none; }
.pricing-compare > summary::-webkit-details-marker { display: none; }
.pricing-compare > summary::after { content: "+"; color: var(--mint); font-size: 22px; font-weight: 400; line-height: 1; }
.pricing-compare[open] > summary::after { content: "\2013"; }
.compare-scroll { overflow-x: auto; padding: 0 24px 26px; }
table.compare { width: 100%; min-width: 580px; border-collapse: collapse; font-size: 14px; }
table.compare th, table.compare td { padding: 10px 12px; border-top: 1px solid var(--line); text-align: left; }
table.compare thead th { border-top: none; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-soft); }
table.compare thead th + th { text-align: center; }
table.compare tbody th { font-weight: 300; color: var(--muted); }
table.compare tbody td { width: 118px; text-align: center; font-weight: 500; }
table.compare tr.grp th { padding-top: 24px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text); }
table.compare .tick { color: var(--mint); font-size: 16px; }
table.compare .no { color: var(--muted-soft); }

.pricing-extra { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 40px; }
.px-card { background: var(--bg-card); border: 1px solid var(--line); border-radius: 16px; padding: 28px; display: flex; flex-direction: column; }
.px-card h4 { margin: 0 0 9px; font-size: 18px; font-weight: 600; }
.px-card p { margin: 0 0 18px; font-size: 15px; color: var(--muted); font-weight: 300; flex: 1; }
.px-card .btn { align-self: flex-start; }
.px-links { display: flex; flex-direction: column; gap: 9px; font-size: 15px; font-weight: 500; }
.px-links a { color: var(--mint); transition: opacity 0.2s ease; }
.px-links a:hover { opacity: 0.75; }

/* ---------- FAQ ---------- */
.faq-sec { background: var(--bg-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.faq-list { max-width: 820px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { list-style: none; cursor: pointer; padding: 20px 40px 20px 0; position: relative; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); color: var(--mint); font-size: 22px; font-weight: 400; }
.faq-item[open] summary::after { content: "\2013"; }
.faq-item summary:hover { color: var(--mint); }
.faq-item .faq-a { padding: 0 40px 22px 0; font-size: 15.5px; color: var(--muted); font-weight: 300; }

/* ---------- CTA ---------- */
.cta { text-align: center; padding: 100px 0; position: relative; overflow: hidden; }
.cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 120%, rgba(31,197,159,0.22), transparent 60%); pointer-events: none; }
.cta-inner { position: relative; z-index: 1; max-width: 640px; margin: 0 auto; }
.cta h2 { font-size: clamp(30px, 4vw, 46px); letter-spacing: -0.02em; margin: 0 0 18px; font-weight: 700; }
.cta p { font-size: 19px; color: var(--muted); font-weight: 300; margin: 0 0 34px; }
.cta-alt { margin-top: 18px; font-size: 15px; }
.cta-alt a { color: var(--muted); border-bottom: 1px solid var(--line); padding-bottom: 2px; transition: color 0.2s ease, border-color 0.2s ease; }
.cta-alt a:hover { color: var(--mint); border-color: var(--mint); }

/* ---------- Footer ---------- */
footer.site-footer { border-top: 1px solid var(--line); padding: 54px 0 40px; }
.footer-grid { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 40px; }
.footer-cols { display: flex; flex-wrap: wrap; gap: 60px; }
.ft-col { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.ft-col b { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text); margin-bottom: 4px; }
.ft-col a { color: var(--muted); font-weight: 300; transition: color 0.2s ease; }
.ft-col a:hover { color: var(--mint); }
.footer-brand { max-width: 320px; }
.footer-brand .brand { margin-bottom: 12px; }
.footer-brand p { color: var(--muted); font-size: 14px; font-weight: 300; margin: 0; }
.footer-brand .ft-copy { margin-top: 14px; font-size: 13px; color: var(--muted-soft); }
.ft-bar { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.ft-opengea img { opacity: 0.6; transition: opacity 0.3s ease; display: block; }
.ft-opengea:hover img { opacity: 1; }
.ft-projectes { font-size: 12.5px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; justify-content: flex-end; text-align: right; }
.fo-label { color: var(--muted-soft); }
.fo-links a { color: var(--muted); }
.fo-links a:hover { color: var(--mint); }
.fo-sep { color: var(--line); margin: 0 7px; }

/* ---------- Modal ---------- */
.modal { display: none; position: fixed; z-index: 1000; inset: 0; background-color: rgba(10,22,40,0.92); opacity: 0; transition: opacity 0.3s ease; }
.modal.show { display: flex; align-items: center; justify-content: center; }
.modal.show.fade-in { opacity: 1; }
.modal-content { background: var(--bg-soft); padding: 40px; border-radius: 16px; max-width: 520px; width: 92%; max-height: 90vh; overflow-y: auto; position: relative; border: 1px solid var(--line); transform: scale(0.95); transition: transform 0.3s ease; }
.modal.show.fade-in .modal-content { transform: scale(1); }
.modal-header { margin-bottom: 26px; padding-right: 30px; }
.form-consent label { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--muted); font-weight: 300; line-height: 1.5; cursor: pointer; }
.form-consent input[type="checkbox"] { flex-shrink: 0; width: 17px; height: 17px; margin-top: 2px; accent-color: var(--mint); cursor: pointer; }
.form-consent a { color: var(--mint); text-decoration: underline; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
#accessModal .m-trial { display: none; }
#accessModal.mode-trial .m-trial { display: inline; }
#accessModal.mode-trial .m-demo { display: none; }
.modal-header h2 { color: var(--mint); font-size: 26px; font-weight: 700; margin: 0 0 8px; }
.modal-header p { color: var(--muted); font-size: 14px; margin: 0; font-weight: 300; }
.close-modal { position: absolute; top: 18px; right: 18px; width: 32px; height: 32px; border: none; background: none; color: var(--muted); font-size: 28px; cursor: pointer; transition: color 0.2s ease; line-height: 1; }
.close-modal:hover { color: var(--mint); }
.form-group { margin-bottom: 18px; }
.form-group label { display: block; color: var(--text); font-size: 14px; font-weight: 600; margin-bottom: 7px; }
.form-group label .required { color: var(--mint); }
.form-group input, .form-group textarea { width: 100%; padding: 12px 14px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; color: var(--text); font-size: 15px; font-family: inherit; transition: border-color 0.2s ease; }
.form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--mint); }
.form-group textarea { resize: vertical; min-height: 100px; }
.form-message { margin-top: 14px; padding: 12px; border-radius: 8px; font-size: 14px; display: none; }
.form-message.success { background: rgba(31,197,159,0.1); color: var(--mint); border: 1px solid var(--mint); display: block; }
.form-message.error { background: rgba(239,68,68,0.1); color: #ef4444; border: 1px solid #ef4444; display: block; }
.submit-btn { width: 100%; margin-top: 4px; }
.submit-btn:disabled { background: var(--muted-soft); cursor: not-allowed; transform: none; box-shadow: none; }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.visible { opacity: 1; transform: none; }

/* ---------- Light sections ---------- */
.section--light { background: #faf8f3; color: #16243d; border-top-color: #ece7dc; border-bottom-color: #ece7dc; }
.section--light .section-head h2 { color: #0d1a2f; }
.section--light .section-head p { color: #5c6678; }
.section--light .section-tag { color: #0f9d80; }
/* feature cards */
.section--light .feature-card { background: #ffffff; border-color: #eae4d9; }
.section--light .feature-card:hover { border-color: rgba(15,157,128,0.45); box-shadow: 0 24px 50px -30px rgba(20,40,61,0.22); }
.section--light .feature-card h3 { color: #0d1a2f; }
.section--light .feature-card p { color: #5c6678; }
.section--light .feature-icon { background: rgba(31,197,159,0.16); color: #0f9d80; }
/* editor: menu cards + chips */
.section--light .menu-item { background: #ffffff; border-color: #eae4d9; }
.section--light .menu-item h4 { color: #0d1a2f; }
.section--light .menu-item p { color: #5c6678; }
.section--light .menu-item .mi-ic { background: rgba(31,197,159,0.16); color: #0f9d80; }
.section--light .blocks-title { color: #8a8270; }
.section--light .chip { background: #ffffff; border-color: #eae4d9; color: #45506a; }
.section--light .chip:hover { border-color: rgba(15,157,128,0.45); color: #0d1a2f; }
.section--light .chip svg { color: #0f9d80; }
/* showcase */
.section--light .showcase-meta h4 { color: #0d1a2f; }
.section--light .showcase-card p { color: #5c6678; }
.section--light .showcase-meta .visit { color: #0f9d80; }
.section--light .browser { box-shadow: 0 36px 70px -42px rgba(20,40,61,0.4); }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
    .pricing-callouts { grid-template-columns: 1fr; gap: 16px; }
    .hero-inner { grid-template-columns: 1fr; gap: 48px; }
    .hero-visual { min-height: 0; order: 2; }
    .features-grid { grid-template-columns: repeat(2, 1fr); }
    .feature-row { grid-template-columns: 1fr; gap: 34px; padding: 56px 0; }
    .feature-row.reverse .feature-row-media { order: 0; }
    .steps { grid-template-columns: repeat(2, 1fr); }
    .step:not(:last-child)::after { display: none; }
    .showcase-grid { grid-template-columns: repeat(2, 1fr); }
    .why-grid { grid-template-columns: 1fr; gap: 36px; }
    .menu-grid { grid-template-columns: repeat(2, 1fr); }
    .plans { grid-template-columns: 1fr; }
    .pricing-extra { grid-template-columns: 1fr 1fr; }
    .cc-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
    header.site-header .container { padding: 0 20px; }
    .nav-links { display: none; }
    .nav-right .btn-primary { display: none; }
    .nav-toggle { display: block; }
    .section-pad { padding: 64px 0; }
    .hero { padding: 44px 0 56px; }
    .features-grid { grid-template-columns: 1fr; }
    .steps { grid-template-columns: 1fr; }
    .showcase-grid { grid-template-columns: 1fr; }
    .stats { grid-template-columns: 1fr; }
    .pricing-extra { grid-template-columns: 1fr; }
    .footer-grid { flex-direction: column; align-items: flex-start; }
    .modal-content { padding: 28px 20px; }
    .hero-phone { width: 116px; bottom: -22px; }
    .editor { grid-template-columns: 1fr; grid-template-rows: auto auto; }
    .ed-sidebar { display: none; }
    .ed-toolbar { grid-column: 1; }
    .ed-canvas { grid-column: 1; }
    .ed-page { display: none; }
    .menu-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Afegits per a les pàgines interiors (/{idioma}/editor).
   Tot el que hi ha a sobre és el mateix sistema de disseny de la portada,
   extret del <style> d'index.php perquè les dues pàgines no divergeixin.
   ══════════════════════════════════════════════════════════════════════════ */

/* La capçalera és sticky: sense això, els enllaços d'ancoratge deixen el títol
   de la secció amagat sota la barra. */
section[id] { scroll-margin-top: 88px; }

/* ---------- Hero de pàgina interior ----------
   Una sola columna centrada amb la maqueta de l'editor a sota, a tota
   l'amplada, com la secció "L'editor" de la portada. Dins d'una columna
   estreta el llenç quedava massa alt i la captura sortia ampliada. */
.subhero { padding: 54px 0 68px; }
.subhero .hero-inner { display: block; text-align: center; }
.subhero h1 { font-size: clamp(34px, 4.6vw, 54px); line-height: 1.05; font-weight: 700; letter-spacing: -0.03em; margin: 0 0 18px; }
.subhero h1 .accent { color: var(--mint); }
.subhero .hero-lead { font-size: 18px; max-width: 620px; margin: 0 auto 30px; }
.subhero .crumbs, .subhero .hero-actions { justify-content: center; }
.subhero .editor-wrap { margin-top: 48px; text-align: left; }

.crumbs { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--muted-soft); margin-bottom: 20px; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--mint); }

/* La imatge del llenç va dins d'un <picture> per servir el WebP, o sigui que
   NO és filla directa de .ed-canvas i la regla ".ed-canvas > img" del disseny
   base no hi arriba mai. Sense ella, l'<img> es quedava amb els atributs
   width=1440 height=900 del HTML: l'amplada la retallava "max-width:100%"
   però l'alçada es mantenia a 900 px i la imatge sortia estirada. Aquí es fa
   amb un selector de descendent, que sí que travessa el <picture>. */
.ed-canvas img { width: 100%; height: auto; display: block; opacity: 0.96; }
.browser picture, .ed-canvas picture { display: block; }

/* ---------- Panell del menú lateral (columna de mitjans d'una fila) ---------- */
.menu-panel { border-radius: 16px; border: 1px solid var(--line); background: #0a1424; padding: 16px 14px; box-shadow: 0 40px 80px -45px rgba(0,0,0,0.85); max-width: 340px; }
.menu-panel .ed-brand { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 15px; padding: 4px 8px 14px; border-bottom: 1px solid var(--line); margin-bottom: 10px; }
.menu-panel .ed-brand .brand-mark { width: 20px; height: 20px; }
.menu-panel .ed-brand .brand-dot { color: var(--mint); }
.menu-panel .ed-menu li { cursor: default; }

/* ---------- Mostra d'edició (fila "Editar") ----------
   La fila ensenyava la captura del web publicat, que no deia res del que s'hi
   explica. Ara hi va el mateix llenguatge visual de l'editor —selecció
   puntejada, barra flotant i cursor— sobre un enquadrament del titular
   (verda_edit.jpg, retallat de verda_d.jpg), o sigui que la imatge ensenya
   exactament el que diu el text: selecciones un text i hi surt la barra. */
.edit-shot { position: relative; }
.edit-shot img { width: 100%; height: auto; display: block; }
.edit-shot .ed-select { left: 3.5%; top: 20%; width: 33%; height: 38%; }
/* La barra és més ampla que la selecció: alineada a l'esquerra i no centrada,
   que si no sobreïx per tots dos costats. */
.edit-shot .ed-floattb { left: 0; transform: none; top: -40px; }
/* Cursor al final de "cada dia.", perquè es vegi que s'hi està escrivint. */
.edit-caret { position: absolute; left: 88%; bottom: 8%; width: 2px; height: 24%; background: var(--mint); border-radius: 1px; }

@media (max-width: 980px) {
    .edit-shot .ed-floattb { top: -36px; transform: scale(0.92); transform-origin: left bottom; }
}
@media (max-width: 720px) {
    .edit-shot .ed-floattb { top: -30px; transform: scale(0.78); }
}

/* ---------- Tecles ---------- */
kbd { font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--text); background: rgba(255,255,255,0.06); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 6px; padding: 2px 7px; white-space: nowrap; }

/* ---------- Detall dins d'una fila ---------- */
.feature-row ul li b { color: var(--text); font-weight: 600; }
.feature-row .row-note { font-size: 13.5px; color: var(--muted-soft); font-weight: 300; margin: 20px 0 0; }

/* ---------- Conversa de l'assistent ---------- */
.chat { border-radius: 16px; border: 1px solid var(--line); background: #0c182c; box-shadow: 0 40px 80px -45px rgba(0,0,0,0.85); overflow: hidden; }
.chat-bar { display: flex; align-items: center; gap: 9px; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 600; }
.chat-bar .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); flex-shrink: 0; }
.chat-body { padding: 18px 16px; display: flex; flex-direction: column; gap: 12px; }
.msg { max-width: 88%; font-size: 14px; line-height: 1.55; padding: 11px 14px; border-radius: 12px; font-weight: 300; }
.msg.you { align-self: flex-end; background: rgba(31,197,159,0.14); border: 1px solid rgba(31,197,159,0.3); color: var(--text); }
.msg.ai { align-self: flex-start; background: #0a1424; border: 1px solid var(--line); color: var(--muted); }
.diff { margin: 4px 0 0; border: 1px solid var(--line); border-radius: 10px; background: #0a1424; overflow: hidden; }
.diff-head { padding: 9px 13px; font-size: 12px; font-weight: 600; color: var(--muted); border-bottom: 1px solid var(--line); }
.diff ul { list-style: none; margin: 0; padding: 8px 13px 10px; display: flex; flex-direction: column; gap: 6px; }
.diff li { font-size: 12.5px; color: var(--muted); display: flex; gap: 8px; align-items: center; }
.diff li .badge { flex-shrink: 0; font-size: 10px; font-weight: 700; color: var(--mint); background: rgba(31,197,159,0.14); border-radius: 5px; padding: 2px 7px; }
.diff-actions { display: flex; gap: 8px; padding: 0 13px 13px; }
.diff-actions .btn { font-size: 12.5px; padding: 7px 14px; border-radius: 8px; }

/* Botó fantasma sobre fons clar: hereta color:var(--text) (blanc) i sobre el
   crema de .section--light no es llegeix. */
.section--light .btn-ghost { color: #0d1a2f; border-color: #ddd6c8; }
.section--light .btn-ghost:hover { border-color: #0f9d80; color: #0f9d80; }

/* ---------- Seccions clares: variants dels components nous ---------- */
.section--light .feature-row h3 { color: #0d1a2f; }
.section--light .feature-row p { color: #5c6678; }
.section--light .feature-row ul li { color: #5c6678; }
.section--light .feature-row ul li b { color: #0d1a2f; }
.section--light .feature-row ul li svg { color: #0f9d80; }
.section--light .feature-row .row-note { color: #8a8270; }
.section--light kbd { color: #0d1a2f; background: #ffffff; border-color: #e0dace; }

/* Graella de dues columnes: amb quatre targetes, tres columnes en deixaven
   una de sola a la darrera fila. */
.features-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 720px) { .features-grid.cols-2 { grid-template-columns: 1fr; } }

/* ---------- Capçalera a pantalles estretes ----------
   A 390 px, la marca + el commutador d'idioma + el botó de menú sumaven més
   que l'amplada de la pantalla i el botó de menú quedava fora (body té
   overflow-x:hidden, o sigui que no es podia ni arrossegar fins a ell). Es
   redueix el que es pot fins que hi cap. */
@media (max-width: 480px) {
    .site-header .brand { font-size: 17px; gap: 8px; }
    .site-header .brand-mark { width: 22px; height: 22px; }
    .site-header .brand-beta { display: none; }
    .site-header .nav-right { gap: 10px; }
    .site-header .lang-switch { padding: 2px; }
    .site-header .lang-switch button { padding: 5px 8px; font-size: 12px; }
}

@media (max-width: 980px) {
    .menu-panel { max-width: none; }
}
@media (max-width: 720px) {
    .subhero { padding: 34px 0 44px; }
    .msg { max-width: 100%; }
    /* El llenç té min-height:360px al disseny base, pensat per a la maqueta
       d'escriptori. A l'amplada del mòbil la captura només fa uns 200 px
       d'alt i sota seu quedava un pam de buit dins del marc. */
    .ed-canvas { min-height: 0; }
}