/* ==========================================================================
   Marci termékoldal — filmszerű, rétegzett, prémium kávézós kompozíció
   Paletta: törtfehér #F7F7F7 · világosszürke #EBEBEB · ezüst #CACACA
            grafit #242424 · fekete #111111 · fehér #FFFFFF
   Elvek: fotók gőz-gradiensbe olvasztva, szekciók egymásba úsznak, eszközök
   átlógnak a határokon, üveghatású kártyák, óriás háttér-tipográfia.
   A tartalom animáció nélkül is teljesen látható (nincs opacity:0 alapállapot).
   ========================================================================== */

:root {
  --paper:        #F7F7F7;
  --surface:      #EBEBEB;
  --silver:        #CACACA;
  --focus:     #808080;
  --accent:   #242424;
  --accent-hover: #090909;
  --graphite:        #242424;
  --black:     #111111;
  --white:        #FFFFFF;

  --ink:          var(--graphite);
  --ink-soft:     #5D5D5D;
  --line:         rgba(36, 36, 36, .14);
  --line-strong:  rgba(36, 36, 36, .24);

  --glass-bg:     rgba(255, 255, 255, .62);
  --glass-line:   rgba(255, 255, 255, .75);

  --shadow-sm: 0 2px 10px rgba(36, 36, 36, .07);
  --shadow-md: 0 22px 48px -26px rgba(36, 36, 36, .5);
  --shadow-lg: 0 46px 90px -42px rgba(17, 17, 17, .62);

  --radius:    22px;
  --radius-sm: 14px;
  --wrap:      1320px;

  --display: "Instrument Sans", "Helvetica Neue", Helvetica, system-ui, sans-serif;
  --sans: "Instrument Sans", "Helvetica Neue", Helvetica, system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  overflow-x: clip;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
blockquote { margin: 0; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }

.skip-link {
  position: fixed; top: 12px; left: 12px; z-index: 200;
  padding: 12px 18px; background: var(--black); color: var(--paper);
  border-radius: 10px; transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* --------------------------------- tipó --------------------------------- */

h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.15; margin: 0; letter-spacing: -.03em; }
h1 { font-size: clamp(2.1rem, 5.6vw, 3.9rem); }
h2 { font-size: clamp(1.7rem, 4.2vw, 2.9rem); }
h3 { font-size: clamp(1.15rem, 2.3vw, 1.6rem); line-height: 1.2; }
p  { margin: 0; }
em { font-style: normal; color: var(--marci-blue); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .8rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 16px;
}
.eyebrow span { width: 26px; height: 2px; background: var(--focus); border-radius: 2px; flex: none; }
.eyebrow.light { color: var(--silver); }
.eyebrow.light span { background: var(--silver); }

.section-head { max-width: 720px; margin-bottom: clamp(28px, 4vw, 52px); position: relative; z-index: 2; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.section-lead { margin-top: 16px; font-size: clamp(1rem, 1.6vw, 1.14rem); color: var(--ink-soft); max-width: 64ch; }
.section-head.center .section-lead { margin-left: auto; margin-right: auto; }

/* -------------------------- óriás háttér-szavak -------------------------- */

.ghost-word {
  position: absolute; top: -.18em; left: 50%; transform: translateX(-50%);
  font-family: var(--display); font-weight: 700; line-height: 1;
  font-size: clamp(7rem, 22vw, 19rem); letter-spacing: -.02em;
  color: rgba(128, 128, 128, .1); white-space: nowrap;
  pointer-events: none; user-select: none; z-index: 0;
}
.ghost-word.ghost-dark { color: rgba(247, 247, 247, .05); }

/* ------------------------------- gőz-rétegek ------------------------------ */
/* A fotókat nem keret, hanem gőz tartja: a széleik a háttérszínbe olvadnak. */

.steam { position: absolute; left: 0; right: 0; pointer-events: none; }
.steam-top    { top: -1px;    height: 42%; background: linear-gradient(180deg, var(--steam-color, var(--paper)) 12%, transparent 100%); }
.steam-bottom { bottom: -1px; height: 46%; background: linear-gradient(0deg,   var(--steam-color, var(--paper)) 12%, transparent 100%); }
.steam-left   { top: 0; bottom: 0; width: 58%; background: linear-gradient(90deg, var(--steam-color, var(--paper)) 22%, transparent 100%); }

/* ------------------------------ üveg-kártyák ------------------------------ */

.glass-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
}

.glass-chip {
  position: absolute; z-index: 6;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-radius: 16px;
  background: var(--glass-bg); border: 1px solid var(--glass-line);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  max-width: 240px;
}
.glass-chip i {
  font-style: normal; flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(36, 36, 36, .13); color: var(--accent);
  display: grid; place-items: center; font-size: .95rem;
}
.glass-chip strong { display: block; font-size: .92rem; line-height: 1.2; }
.glass-chip small { display: block; font-size: .76rem; color: var(--ink-soft); line-height: 1.3; }

/* --------------------------------- címkék -------------------------------- */

.live-tag, .soon-tag {
  display: inline-flex; align-items: center;
  font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px; white-space: nowrap;
}
.live-tag { background: #EBEBEB; color: #454545; }
.soon-tag { background: rgba(128, 128, 128, .16); color: #565656; }
.demo-badge {
  display: inline-flex; font-size: .66rem; font-weight: 700; letter-spacing: .1em;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(36, 36, 36, .1); color: var(--ink-soft); text-transform: uppercase;
}
.soon-inline { color: #565656; font-size: .82rem; }

/* -------------------------------- gombok --------------------------------- */

.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 13px 22px;
  border-radius: 999px; font-weight: 600; font-size: 1rem;
  border: 2px solid transparent; text-align: center;
  transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease, color .18s ease, border-color .18s ease;
}
.button span { transition: transform .18s ease; }
.button:hover span { transform: translateX(3px); }
.button-primary { background: var(--marci-yellow); color: var(--marci-ink); box-shadow: none; }
.button-primary:hover { background: var(--marci-yellow-dark); transform: translateY(-2px); }
.button-outline { background: var(--marci-blue); color: #FFFFFF; border-color: var(--marci-blue); }
.button-outline:hover { background: var(--marci-blue-dark); border-color: var(--marci-blue-dark); color: #FFFFFF; }
.button-ghost { background: transparent; color: var(--marci-blue); border-color: transparent; box-shadow: none; backdrop-filter: none; }
.button-ghost:hover { color: var(--marci-blue-dark); }

/* -------------------------------- fejléc --------------------------------- */

.site-header {
  position: sticky; top: 0; z-index: 90;
  background: rgba(247, 247, 247, .82);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.site-header.stuck { border-bottom-color: var(--line); box-shadow: 0 8px 24px -20px rgba(36, 36, 36, .6); }
.header-inner {
  width: min(var(--wrap), calc(100% - 40px));
  margin: 0 auto; min-height: 72px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand-mark {
  width: 42px; height: 42px; flex: none;
  display: grid; place-items: center;
}
.brand-mark svg { width: 100%; height: 100%; display: block; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text strong { font-family: var(--display); font-size: 1.3rem; font-weight: 700; }
.brand-text small { font-size: .72rem; color: var(--ink-soft); letter-spacing: .03em; }
.site-header nav { display: flex; align-items: center; gap: 4px; }
.site-header nav a {
  padding: 10px 14px; border-radius: 999px; font-size: .94rem; font-weight: 500;
  color: var(--ink-soft); transition: color .15s ease, background-color .15s ease;
}
.site-header nav a:hover { color: var(--graphite); background: rgba(202, 202, 202, .3); }
.site-header nav .nav-cta {
  background: var(--graphite); color: var(--paper); padding: 12px 22px; font-weight: 600;
  min-height: 44px; display: inline-flex; align-items: center;
}
.site-header nav .nav-cta:hover { background: var(--accent); color: var(--white); }
.menu-button {
  display: none; align-items: center; gap: 10px;
  min-height: 44px; padding: 10px 18px; border-radius: 999px;
  border: 1px solid var(--line-strong); font-weight: 600; font-size: .95rem;
}
.menu-bars { display: inline-flex; flex-direction: column; gap: 4px; }
.menu-bars i { width: 16px; height: 2px; background: currentColor; border-radius: 2px; }

/* ================================= ESZKÖZÖK ================================
   Laptop, tablet, telefon, telefon-hátlap. Perspektíva + talaj-árnyék adja a
   térmélységet; a gőz elé is kerülhet réteg (a hero-ban).                    */

.device-laptop { position: relative; width: 100%; }
.laptop-screen {
  position: relative; z-index: 2;
  border-radius: 16px 16px 6px 6px;
  background: linear-gradient(180deg, #414141, var(--black) 30%);
  padding: 13px 13px 15px;
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(247, 247, 247, .12);
}
.laptop-screen img { border-radius: 7px; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; background: var(--white); }
.laptop-base {
  position: relative; z-index: 1;
  height: 15px; margin: 0 auto; width: 116%; left: -8%;
  border-radius: 3px 3px 16px 16px;
  background: linear-gradient(180deg, #595959 0%, #242424 45%, #111111 100%);
  box-shadow: 0 18px 30px -18px rgba(17, 17, 17, .85);
}
.laptop-base::after {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 98px; height: 6px; border-radius: 0 0 9px 9px; background: rgba(247, 247, 247, .2);
}
.ground-shadow {
  position: absolute; left: 6%; right: 6%; bottom: -26px; height: 44px; z-index: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(17, 17, 17, .35), transparent 68%);
  filter: blur(6px);
}

.device-tablet { width: 100%; position: relative; }
.tablet-screen {
  border-radius: 22px;
  background: linear-gradient(180deg, #414141, var(--black) 40%);
  padding: 14px;
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(247, 247, 247, .1);
}
.tablet-screen img { border-radius: 10px; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; background: var(--white); }
.tilt-left  { transform: perspective(1600px) rotateY(6deg) rotateX(2deg) rotate(-1deg); }
.tilt-right { transform: perspective(1600px) rotateY(-6deg) rotateX(2deg) rotate(1deg); }

.device-phone { width: 100%; position: relative; }
.phone-screen {
  position: relative; border-radius: 34px;
  background: linear-gradient(180deg, #414141, var(--black) 35%);
  padding: 9px;
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(247, 247, 247, .14);
}
.phone-screen::before {
  content: ""; position: absolute; top: 15px; left: 50%; transform: translateX(-50%);
  width: 34%; height: 17px; border-radius: 999px; background: var(--black); z-index: 2;
}
.phone-screen img { border-radius: 26px; width: 100%; aspect-ratio: 390 / 844; object-fit: cover; object-position: top center; background: var(--white); }

/* CSS-ből épített telefon-hátlap a klaszter mögé (referencia: hátat mutató
   iPhone). Ezüstszürke ház, kamerasziget, M-monogram. */
.phone-back {
  position: absolute; border-radius: 34px;
  background: linear-gradient(160deg, #E0E0E0 0%, #CACACA 55%, #AAAAAA 100%);
  border: 1px solid rgba(255, 255, 255, .5);
  box-shadow: var(--shadow-lg);
}
.phone-back .cam {
  position: absolute; top: 16px; left: 16px; width: 44%; aspect-ratio: 1;
  border-radius: 30%;
  background: linear-gradient(160deg, #C5C5C5, #AAAAAA);
  box-shadow: inset 0 1px 3px rgba(255, 255, 255, .55), 0 2px 6px rgba(36, 36, 36, .25);
}
.phone-back .cam::before, .phone-back .cam::after {
  content: ""; position: absolute; width: 34%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #5D5D5D 0%, #242424 60%);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .18);
}
.phone-back .cam::before { top: 10%; left: 10%; }
.phone-back .cam::after  { bottom: 10%; right: 10%; }
.phone-back .logo-m {
  position: absolute; bottom: 14%; left: 50%; transform: translateX(-50%);
  font-family: var(--display); font-weight: 700; font-size: 1.6rem;
  color: rgba(36, 36, 36, .35);
}

/* idle lebegés (csak asztali + nem csökkentett mozgás) */
@keyframes floatA { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes floatB { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-13px); } }
@keyframes floatC { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.float-a { animation: floatA 7s ease-in-out infinite; }
.float-b { animation: floatB 6s ease-in-out infinite .7s; }
.float-c { animation: floatC 8s ease-in-out infinite 1.2s; }

/* ======================= Editorial page layout ======================= */
[hidden] { display:none !important; }
section[id] { scroll-margin-top:100px; }
#probald-ki, #demo { scroll-margin-top:100px; }
.anchor-target { display:block; height:0; }
h1,h2 { font-weight:600; letter-spacing:-.03em; }
h2 { font-size:clamp(32px,4.1vw,58px); line-height:1.15; }
h3 { letter-spacing:-.03em; }
.eyebrow { font-size:12px; font-weight:600; letter-spacing:.16em; }
.section-lead { font-size:16px; line-height:1.7; }
.button { font-size:14px; min-height:48px; padding:13px 22px; box-shadow:none; border-radius:999px; }
.button-primary { background:#242424; }
.brand-text strong { font-size:25px; font-weight:700; letter-spacing:-.035em; }
.header-inner { min-height:82px; }
.site-header nav a { font-size:12px; }
.hero-inner,.hero-proofbar,.appshow-inner,.flow-inner,.compare-inner,.features-inner,.owner-inner,.pricing-inner,.value-inner,.faq-inner,.trial-wrap,.footer-inner { width:min(var(--wrap),calc(100% - 96px)); margin-inline:auto; }
.hero { position:relative; isolation:isolate; background:var(--paper); overflow:clip; }
.hero-bg { position:absolute; inset:0; z-index:-1; pointer-events:none; }
.hero-bg .ghost-word { top:12px; left:52%; font-size:clamp(180px,29vw,440px); color:#8080800C; letter-spacing:-.075em; }
.hero-photo { position:absolute; width:68%; right:-4%; top:0; height:100%; mask-image:linear-gradient(90deg,transparent,black 40%); }
.hero-photo .media-slot { height:100%; background:linear-gradient(140deg,#F7F7F7,#CACACA); }
.hero-photo .slot-label { position:absolute; right:14%; bottom:20%; }
.hero-bg .steam-bottom { height:36%; }
.hero-bg .steam-top { height:20%; }
.hero-bg .steam-left { width:66%; }
.hero-inner { display:grid; grid-template-columns:.84fr 1.16fr; align-items:center; gap:26px; min-height:660px; padding:56px 0 68px; }
.hero-copy { position:relative; z-index:5; }
.hero h1 { font-size:clamp(42px,4.5vw,62px); line-height:1.07; }
.hero-lead { max-width:390px; font-size:16px; line-height:1.7; color:var(--ink-soft); margin-top:24px; }
.marci-acronym { margin-top:10px; font-size:12px; letter-spacing:.01em; color:var(--ink-soft); }
.hero-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.hero-proof { display:flex; gap:10px; margin-top:28px; font-size:11px; line-height:1.65; color:var(--ink-soft); }
.hero-proof strong { color:var(--graphite); font-weight:500; }
.proof-dot { width:6px; height:6px; background:var(--accent); flex:none; border-radius:50%; margin-top:6px; }
.hero-stage { position:relative; width:100%; height:490px; }
.hero-phone { position:absolute; width:185px; right:0; top:168px; z-index:4; transform:rotate(8deg); animation:none; }
.hero-phone .phone-screen { padding:6px; border-radius:28px; }
.hero-phone .media-slot { border-radius:23px; }
.hero-proofbar { display:grid; grid-template-columns:repeat(3,1fr) .8fr; border-top:1px solid var(--line); padding:25px 0 28px; gap:20px; }
.hero-proofbar div { display:flex; flex-direction:column; gap:6px; }
.hero-proofbar strong { font-size:11px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; }
.hero-proofbar span { font-size:11px; color:var(--ink-soft); }
.hero-index { display:flex; align-items:center; justify-content:flex-end; gap:18px; font-size:11px; }
.hero-index span { font-size:24px; }
/* Image slots stay empty until an image path is configured in script.js. */
.media-slot { position:relative; display:grid; place-items:center; width:100%; aspect-ratio:var(--image-ratio,16/10); overflow:hidden; background:linear-gradient(145deg,#F7F7F7,#E4E4E4); color:#626262; }
.media-slot > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top; }
.slot-label { display:flex; flex-direction:column; align-items:center; text-align:center; padding:14px; gap:8px; }
.slot-label strong { font:500 12px var(--sans); }
.slot-label small { font:500 8px var(--sans); letter-spacing:.16em; }
.slot-cross { font:200 28px var(--sans); color:#737373; }
.phone-screen .media-slot { aspect-ratio:390/844; border-radius:24px; }
.laptop-screen .media-slot,.tablet-screen .media-slot { aspect-ratio:16/10; border-radius:6px; }
.phone-screen::before { display:none; }
/* App: four real device frames share a single stage. */
.appshow { position:relative; overflow:clip; background:linear-gradient(180deg,var(--paper),#EFEFEF 60%,var(--paper)); padding:70px 0 74px; }
.appshow .section-head { max-width:660px; margin-bottom:8px; }
.appshow .section-lead { max-width:520px; }
.app-stage2 { position:relative; height:655px; width:min(1050px,100%); margin:0 auto; }
.app-stage2::before { content:""; position:absolute; width:90%; height:80px; bottom:15px; left:5%; background:radial-gradient(ellipse,#5D5D5D27,transparent 67%); filter:blur(18px); }
.app-hero-phone { width:254px; position:absolute; left:50%; top:40px; margin-left:-127px; z-index:4; transform:rotate(-4deg); }
.app-phone-left { width:215px; position:absolute; left:calc(50% - 345px); top:110px; z-index:2; transform:perspective(1100px) rotateY(13deg) rotate(-15deg); }
.app-phone-right { width:215px; position:absolute; left:calc(50% + 86px); top:105px; z-index:3; transform:perspective(1100px) rotateY(-13deg) rotate(13deg); }
.app-phone-far { width:177px; position:absolute; left:calc(50% + 243px); top:149px; z-index:1; transform:rotate(23deg); }
.app-phone-left .media-slot { background:linear-gradient(150deg,#F7F7F7,#CACACA); }
.app-phone-right .media-slot { background:linear-gradient(160deg,#EDEDED,#D3D3D3); }
.app-phone-far .media-slot { background:#C4C4C4; }
.chip-push { top:36px; right:4%; z-index:6; }
.chip-kupon { bottom:74px; left:4%; z-index:6; }
.app-pills { display:flex; justify-content:center; flex-wrap:wrap; gap:8px; position:relative; z-index:7; }
.app-pill { font-size:12px; border:1px solid var(--line); min-height:44px; padding:10px 18px; border-radius:30px; transition:background .2s; }
.app-pill:hover { background:#DEDEDE; }
.app-pill.active { background:var(--graphite); color:var(--paper); border-color:var(--graphite); }
.app-tagline { max-width:620px; text-align:center; margin:24px auto 0; font-size:14px; color:var(--ink-soft); }
.app-ctas { display:flex; justify-content:center; gap:10px; margin-top:24px; flex-wrap:wrap; }
.app-note { max-width:800px; font-size:11px; line-height:1.6; color:var(--ink-soft); text-align:center; margin:28px auto 0; }
/* A single continuous, neutral scene for operations. */
.flow { position:relative; padding:80px 0 0; background:linear-gradient(180deg,var(--paper),var(--surface) 58%,#E2E2E2); }
.flow .ghost-word { display:none; }
.flow .eyebrow.light { color:var(--accent); }
.flow-inner .section-head { margin-bottom:36px; }
.flow-line { display:grid; grid-template-columns:repeat(4,1fr); gap:30px; }
.flow-line li { border-top:1px solid var(--line-strong); padding-top:18px; }
.flow-line b { font-size:11px; color:var(--accent); font-weight:500; }
.flow-line h3 { font-size:21px; margin:14px 0 10px; }
.flow-line p { font-size:13px; color:var(--ink-soft); }
.flow-tablet { width:min(780px,74%); margin:50px auto 0; position:relative; z-index:2; padding-bottom:30px; }
.compare { background:linear-gradient(180deg,#E2E2E2,var(--paper) 50%); padding:68px 0 62px; }
.compare .section-head { max-width:650px; }
.compare-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.compare-card { position:relative; border:1px solid var(--marci-line); border-radius:16px; padding:32px; background:#FFFFFF; }
.compare-photo {
  position:absolute; top:-18px; right:28px; z-index:2;
  width:112px; height:82px; object-fit:cover; border-radius:12px;
  border:4px solid #FFFFFF; box-shadow:0 14px 26px -14px rgba(27,22,20,.5);
  transform:rotate(4deg);
}
.compare-marci { background:var(--graphite); color:var(--paper); box-shadow:var(--shadow-lg); }
.compare-tag { font-size:10px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-soft); margin-bottom:18px; }
.compare-marci .compare-tag { color:var(--silver); }
.compare-card h3 { font-size:28px; margin-bottom:22px; }
.compare-card li { display:flex; align-items:baseline; gap:12px; margin-bottom:11px; font-size:14px; }
.compare-card i { font-style:normal; color:var(--accent); }
.compare-marci i { color:var(--silver); }
.compare-foot { border-top:1px solid var(--line); margin-top:24px; padding-top:16px; font-size:12px; }
.compare-marci .compare-foot { border-color:#FFFFFF30; color:#EBEBEB; }
.features { padding:64px 0 84px; background:var(--paper); overflow:clip; }
.showcase-row { display:grid; grid-template-columns:.9fr 1.1fr; align-items:center; gap:80px; margin-top:64px; }
.showcase-row.reverse .showcase-copy { order:2; }
.showcase-row.reverse .showcase-visual { order:1; }
.showcase-copy h3 { font-size:clamp(26px,2.6vw,38px); max-width:460px; margin:10px 0 18px; }
.feature-kicker { font-size:11px; text-transform:uppercase; letter-spacing:.12em; color:var(--accent); }
.showcase-copy > p:not(.feature-kicker) { font-size:14px; color:var(--ink-soft); }
.tick-list { display:grid; gap:10px; margin-top:22px; }
.tick-list li { display:flex; gap:10px; font-size:13px; line-height:1.6; }
.tick-list li::before { content:"✓"; color:var(--accent); flex:none; }
.tick-list.light li::before { color:var(--silver); }
.showcase-visual { position:relative; padding:25px 12px; }
.visual-blob { position:absolute; right:-12px; top:-8px; width:40%; z-index:0; transform:rotate(8deg); }
.visual-blob .media-slot { border-radius:8px; }
.visual-blob .slot-label { display:none; }
.showcase-visual .device-tablet { z-index:1; }
.owner { background:linear-gradient(180deg,var(--paper),#DEDEDE 100%); padding:50px 0 86px; position:relative; }
.owner > .ghost-word { display:none; }
.owner-inner { display:grid; grid-template-columns:.82fr 1.18fr; gap:80px; align-items:center; }
.owner-copy .eyebrow { color:var(--accent); }
.owner-copy > p:not(.eyebrow) { margin-top:22px; color:var(--ink-soft); font-size:14px; }
.owner-copy .button { margin-top:26px; }
.owner .tick-list.light li::before { color:var(--accent); }
.owner-visual { padding:30px; transform:perspective(1500px) rotateY(-7deg) rotate(2deg); }
/* Pricing: immediate price + action, with a light App card. */
.pricing { background:linear-gradient(180deg,#DEDEDE,var(--paper) 230px); padding:70px 0; }
.pricing-head { display:flex; align-items:center; justify-content:space-between; gap:32px; margin-bottom:36px; }
.pricing-head .section-head { margin:0; }
.billing-toggle { display:flex; align-items:center; border:1px solid var(--line); border-radius:40px; padding:4px; flex:none; background:#FFFFFF60; }
.billing-toggle button { min-height:44px; padding:10px 18px; border-radius:30px; font-size:12px; }
.billing-toggle button.active { background:var(--graphite); color:var(--paper); }
.billing-toggle button span { font-size:9px; display:block; }
.pricing-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:stretch; }
.price-card { padding:32px 25px; border:1px solid var(--marci-line); border-radius:16px; background:#FFFFFF; position:relative; min-width:0; }
.price-featured { background:linear-gradient(155deg,#FFFFFF,#E4E4E4); border:1px solid var(--marci-line); border-radius:16px; box-shadow:none; }
.price-badge { position:absolute; right:22px; top:-13px; background:var(--accent); color:white; border-radius:20px; padding:5px 15px; text-transform:uppercase; letter-spacing:.07em; font-size:10px; }
.price-name { font-size:22px; font-weight:600; letter-spacing:-.04em; }
.price-for { font-size:12px; color:var(--ink-soft); margin:6px 0 22px; min-height:40px; }
.price-value strong { font-size:40px; line-height:1.2; font-weight:500; letter-spacing:-.045em; }
.price-unit { display:block; font-size:12px; }
.price-note { margin-top:6px; font-size:10px; color:var(--ink-soft); }
.price-card > .button { width:100%; margin:22px 0 4px; }
.price-intro { margin-top:20px; font-size:12px; }
.price-card .tick-list li { font-size:12px; }
.price-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:20px; }
.price-chips .soon-tag { font-size:8px; }
.setup-fee { margin-top:24px; border-top:1px solid var(--line); padding-top:18px; font-size:11px; }
.setup-fee small { font-size:10px; }
.price-phones { position:relative; margin:22px auto 0; width:240px; max-width:100%; height:178px; }
.price-phones .media-slot { position:absolute; border:4px solid var(--graphite); border-radius:13px; width:70px; height:151px; aspect-ratio:390/844; box-shadow:var(--shadow-md); top:12px; left:calc(50% - 35px); z-index:3; }
.price-phones .media-slot:first-child { transform:translateX(-61px) rotate(-12deg); z-index:1; }
.price-phones .media-slot:last-child { transform:translateX(61px) rotate(12deg); z-index:2; }
.price-phones .slot-label strong { font-size:6px; }
.price-phones .slot-label { padding:4px; gap:4px; }
.price-phones .slot-cross { font-size:14px; }
.price-phones .slot-label small { display:none; }
.pilot { display:grid; grid-template-columns:170px 1fr 90px; gap:24px; align-items:center; padding:26px 0; margin-top:24px; border-block:1px solid var(--line); }
.pilot-tag span { font-size:10px; text-transform:uppercase; letter-spacing:.08em; display:block; }
.pilot-tag strong { font-size:15px; }
.pilot > p { font-size:11px; color:var(--ink-soft); }
.pilot > a { font-size:12px; text-decoration:underline; min-height:44px; display:flex; align-items:center; }
.pricing-extra { display:grid; grid-template-columns:1fr 1fr; gap:40px; margin-top:28px; }
.pricing-extra h3 { font-size:20px; }
.pricing-extra p { margin-top:12px; font-size:12px; color:var(--ink-soft); }
/* Future capabilities are clearly separated from the current product. */
.value { padding:66px 0; background:linear-gradient(180deg,var(--paper),#EBEBEB80,var(--paper)); }
.value .section-head { max-width:750px; }
.journey { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin:34px 0; }
.journey li { padding:19px 15px; box-shadow:none; }
.journey b { font-size:12px; color:var(--accent); display:block; margin-bottom:12px; }
.journey strong { font-size:13px; line-height:1.3; display:block; }
.journey p { font-size:11px; color:var(--ink-soft); margin:10px 0; }
.dash { border:1px solid var(--marci-line); border-radius:16px; overflow:hidden; box-shadow:none; }
.dash-topbar { display:flex; gap:6px; align-items:center; padding:16px 20px; background:var(--graphite); color:var(--paper); }
.dash-topbar strong { font-size:12px; margin-left:10px; margin-right:auto; }
.dash-topbar .demo-badge { color:var(--paper); background:#FFFFFF18; }
.dash-dot { width:7px; height:7px; border-radius:50%; background:var(--silver); }
.dash-grid { display:grid; grid-template-columns:repeat(4,1fr); background:var(--white); }
.dash-card { padding:22px 18px; border-right:1px solid var(--line); }
.dash-card header { min-height:100px; }
.dash-kicker { font-size:10px; color:var(--ink-soft); }
.dash-card h3 { font-size:19px; margin:6px 0 10px; }
.dash-stats { display:grid; gap:12px; }
.dash-stats li { display:flex; justify-content:space-between; gap:10px; align-items:baseline; font-size:12px; border-bottom:1px solid var(--line); padding-bottom:8px; }
.dash-stats small { font-size:10px; color:var(--ink-soft); }
.dash-stats strong { font-size:12px; text-align:right; }
.dash-note { padding:17px 20px; font-size:10px; background:#F6F6F6; color:var(--ink-soft); }
.value-columns { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:35px; }
.value-col { border:1px solid var(--marci-line); border-radius:16px; background:#FFFFFF; padding:24px; }
.value-col h3 { font-size:21px; }
.dot-list { display:grid; gap:12px; margin-top:18px; }
.dot-list li { font-size:12px; }
.dot-list .live-tag,.dot-list .soon-tag { font-size:8px; padding:2px 6px; }
/* Questions and forms */
.faq { padding:60px 0; background:var(--paper); }
.faq-inner { display:grid; grid-template-columns:.6fr 1fr; gap:65px; }
.faq-list details { border-top:1px solid var(--line-strong); }
.faq-list details:last-child { border-bottom:1px solid var(--line-strong); }
.faq-list summary { display:flex; align-items:center; justify-content:space-between; gap:16px; cursor:pointer; list-style:none; min-height:64px; padding:16px 0; font-size:14px; }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary span::after { content:"+"; font-size:23px; font-weight:300; }
.faq-list details[open] summary span::after { content:"−"; }
.faq-list p { padding:0 24px 20px 0; font-size:13px; color:var(--ink-soft); }
.trial { background:var(--graphite); color:var(--paper); padding:72px 0; position:relative; overflow:clip; }
.trial > .ghost-word { top:10px; left:25%; font-size:250px; }
.trial-wrap { display:grid; grid-template-columns:1fr .9fr; gap:90px; position:relative; }
.trial-copy { max-width:490px; padding-top:24px; }
.trial-copy > p:not(.eyebrow) { margin-top:24px; color:var(--surface); font-size:15px; }
.trial .button-primary { background:var(--paper); color:var(--black); }
.trial .button-primary:hover { background:var(--silver); }
.trial-panel { padding:30px; border:1px solid #F7F7F733; border-radius:16px; background:#FFFFFF08; }
.contact-form { display:grid; gap:16px; }
.contact-form label { display:grid; gap:6px; font-size:12px; }
/* Demó vagy bemutató választó: két kártyaszerű rádiógomb a merge után. */
input,select { width:100%; min-width:0; min-height:48px; padding:12px 14px; border:1px solid #969696; border-radius:8px; color:var(--graphite); background:#FFFFFF; font-size:14px; }
input::placeholder { color:#6B6B6B; }
.checkbox-field { display:flex !important; align-items:flex-start; gap:10px !important; }
.checkbox-field input { width:20px; height:20px; min-height:20px; flex:none; accent-color:var(--accent); margin:0; }
.checkbox-field a { text-decoration:underline; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.hp-field { position:absolute; left:-9999px; height:1px; width:1px; overflow:hidden; }
.form-status { font-size:12px; }
.form-status:empty { display:none; }
.form-status[data-tone="error"] { color:#FFB4A8; }
button:disabled { cursor:wait; opacity:.7; }
.contact-line { display:flex; flex-direction:column; gap:5px; }
.contact-line a { text-decoration:underline; color:#FFFFFF; font-weight:600; }
.form-foot { font-size:10px; color:var(--ink-soft); }
.trial .form-foot { color:rgba(255,255,255,.68); }
footer { padding:42px 0; background:var(--paper); border-top:1px solid var(--line); }
.footer-inner { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px; }
.footer-claim { font-size:11px; color:var(--ink-soft); }
.footer-nav { display:flex; gap:20px; flex-wrap:wrap; }
.footer-nav a { font-size:11px; min-height:44px; display:flex; align-items:center; }
.footer-inner > small { width:100%; border-top:1px solid var(--line); padding-top:20px; font-size:10px; color:var(--ink-soft); }
.footer-inner > small a { color:inherit; text-decoration:underline; }
.footer-inner > small a:hover { color:var(--accent); }
@keyframes riseIn { from { transform:translateY(14px); } to { transform:none; } }
.rise.in { animation:riseIn .6s ease; }

/* ------------------------------ jogi oldalak ------------------------------
   Adatvédelem / Impresszum: sima, olvasható tipográfiai tartalom, a site
   fejléc/lábléc keretében, a kártyás/animált komponensek nélkül.          */
.legal { padding:56px 0 90px; }
.legal-inner { width:min(760px, calc(100% - 40px)); margin:0 auto; }
.legal-updated { font-size:13px; color:var(--ink-soft); margin-bottom:36px; }
.legal h1 { margin-bottom:8px; }
.legal h2 { font-size:1.5rem; margin-top:48px; margin-bottom:16px; padding-top:24px; border-top:1px solid var(--marci-line); }
.legal h2:first-of-type { margin-top:0; padding-top:0; border-top:none; }
.legal h3 { font-size:1.1rem; margin-top:28px; margin-bottom:10px; }
.legal p, .legal li { font-size:.98rem; line-height:1.7; color:var(--ink); }
.legal p { margin:0 0 14px; }
.legal ul, .legal ol { margin:0 0 16px; padding-left:22px; list-style:disc; }
.legal ol { list-style:decimal; }
.legal li { margin-bottom:6px; }
.legal a { color:var(--marci-blue); text-decoration:underline; }
.legal a:hover { color:var(--marci-blue-dark); }
.legal strong { font-weight:600; }
.legal table { width:100%; border-collapse:collapse; margin:0 0 20px; font-size:.92rem; }
.legal th, .legal td { text-align:left; padding:10px 14px; border:1px solid var(--marci-line); vertical-align:top; }
.legal th { background:var(--marci-cream); font-weight:600; }
.legal .legal-box { background:#FFFFFF; border:1px solid var(--marci-line); border-radius:16px; padding:22px 24px; margin:0 0 20px; }
.legal .legal-note { background:rgba(240,180,41,.1); border:1px solid rgba(240,180,41,.35); border-radius:16px; padding:16px 20px; font-size:.9rem; color:var(--ink-soft); margin-top:40px; }
@media (max-width:600px) {
  .legal h2 { font-size:1.3rem; }
}
/* Tablet is a composition of its own. */
@media(max-width:1100px) {
 .hero-inner,.hero-proofbar,.appshow-inner,.flow-inner,.compare-inner,.features-inner,.owner-inner,.pricing-inner,.value-inner,.faq-inner,.trial-wrap,.footer-inner { width:calc(100% - 56px); }
 .hero-inner { grid-template-columns:1fr 1fr; gap:16px; min-height:620px; }
 .hero h1 { font-size:46px; }
 .hero-stage { height:430px; }
 .hero-phone { width:150px; top:200px; right:-5px; }
 .hero-proofbar { grid-template-columns:repeat(3,1fr); }
 .hero-index { display:none; }
 .showcase-row,.owner-inner { gap:40px; }
 .pricing-grid { gap:12px; }
 .price-card { padding:26px 18px; }
 .price-value strong { font-size:34px; }
 .journey { gap:8px; }
 .journey li { padding:16px 12px; }
 .dash-grid { grid-template-columns:1fr 1fr; }
 .dash-card { border-bottom:1px solid var(--line); }
 .value-columns { gap:20px; }
 .trial-wrap { gap:40px; }
 .app-phone-far { left:calc(50% + 190px); width:155px; }
 .app-phone-right { left:calc(50% + 65px); width:195px; }
 .app-phone-left { left:calc(50% - 290px); width:195px; }
 .app-stage2 { height:625px; }
}
@media(max-width:900px) {
 .app-phone-far { display:none; }
 .hero-phone { right:12px; }
 .menu-button { display:flex; }
 .site-header nav { display:none; position:absolute; top:100%; left:0; right:0; padding:16px 28px 24px; background:var(--paper); border-bottom:1px solid var(--line); box-shadow:var(--shadow-md); }
 .site-header nav.open { display:flex; flex-direction:column; align-items:stretch; }
 .site-header nav a { min-height:44px; }
 .hero h1 { font-size:40px; }
 .hero .button { padding:12px 15px; font-size:12px; }
 .hero-inner { padding-top:35px; }
 .hero-lead { font-size:14px; }
 .app-stage2 { height:610px; }
 .chip-push { right:0; top:5px; }
 .chip-kupon { left:0; bottom:44px; }
 .pricing-grid { grid-template-columns:1fr; gap:26px; }
 .price-card { display:grid; grid-template-columns:1fr 1fr; gap:12px 32px; padding:30px; }
 .price-card .price-top { grid-column:1; }
 .price-card > .button { grid-column:1; grid-row:2; margin:0; align-self:start; }
 .price-card .tick-list { grid-column:2; grid-row:1 / span 3; margin:0; }
 .price-card .price-intro { grid-column:2; grid-row:4; margin:0; }
 .price-card .setup-fee { grid-column:1/-1; }
 .price-card .price-chips { grid-column:2; margin:0; }
 .price-card .price-phones { grid-column:1; margin-top:0; }
 .price-featured { order:-1; }
 .price-for { min-height:0; }
 .pricing-head { align-items:flex-start; }
 .journey { grid-template-columns:repeat(3,1fr); }
 .value-columns { grid-template-columns:1fr; }
 .dot-list { grid-template-columns:1fr 1fr; gap:12px 24px; }
 .faq-inner { grid-template-columns:1fr; gap:0; }
 .faq .section-head { margin-bottom:24px; }
}
@media(max-width:760px) {
 .form-row { grid-template-columns:1fr; }
 body { font-size:15px; }
 .hero-inner,.hero-proofbar,.appshow-inner,.flow-inner,.compare-inner,.features-inner,.owner-inner,.pricing-inner,.value-inner,.faq-inner,.trial-wrap,.footer-inner { width:calc(100% - 36px); }
 .header-inner { min-height:64px; width:calc(100% - 36px); }
 .brand-mark { width:34px; height:34px; }
 .brand-text strong { font-size:22px; }
 .brand-text small { font-size:9px; }
 .menu-button { font-size:12px; padding:8px 14px; }
 .hero-inner { display:flex; flex-direction:column; gap:0; padding:24px 0 12px; min-height:0; }
 .hero-copy { display:contents; }
 .hero-copy .eyebrow { order:1; align-self:flex-start; margin-bottom:12px; font-size:9px; }
 .hero h1 { order:2; width:100%; font-size:clamp(32px,8.8vw,49px); line-height:1.09; letter-spacing:-.055em; }
 .marci-acronym { order:2; margin-top:8px; font-size:11px; }
 .hero-lead { order:3; margin-top:14px; max-width:none; font-size:13px; line-height:1.55; }
 .hero-actions { order:4; width:100%; margin-top:18px; gap:8px; }
 .hero .button { font-size:12px; padding:11px 14px; flex:1; }
 .hero-stage { order:5; height:371px; width:100%; margin:16px 0 0; }
 .hero-phone { width:158px; top:4px; left:50%; right:auto; transform:translateX(-50%) rotate(-5deg); }
 .hero-photo { top:260px; right:-20%; width:140%; height:490px; }
 .hero-photo .slot-label { right:20%; bottom:18%; }
 .hero-photo .slot-label strong { font-size:10px; }
 .hero-bg .steam-left { width:30%; }
 .hero-bg .ghost-word { top:350px; font-size:180px; left:50%; }
 .hero-proof { order:6; align-self:flex-start; margin-top:0; font-size:10px; }
 .hero-proofbar { gap:10px; padding:20px 0; }
 .hero-proofbar strong { font-size:8px; letter-spacing:.03em; }
 .hero-proofbar span { font-size:9px; }
 .appshow { padding:48px 0; }
 h2 { font-size:34px; }
 .eyebrow { font-size:9px; }
 .section-lead { font-size:13px; line-height:1.65; }
 .section-head { margin-bottom:28px; }
 .appshow .section-lead { max-width:340px; }
 .app-stage2 { height:460px; margin-top:16px; }
 .app-hero-phone { width:172px; left:50%; margin-left:-86px; top:41px; }
 .app-phone-left { width:128px; left:calc(50% - 161px); top:97px; transform:rotate(-13deg); }
 .app-phone-right { width:128px; left:calc(50% + 34px); top:97px; transform:rotate(13deg); }
 .app-phone-far { display:none; }
 .app-stage2 .phone-screen { padding:5px; border-radius:23px; }
 .app-stage2 .phone-screen .media-slot { border-radius:18px; }
 .app-stage2 .glass-chip { padding:10px 12px; max-width:177px; }
 .app-stage2 .glass-chip strong { font-size:10px; }
 .app-stage2 .glass-chip small { font-size:9px; }
 .app-stage2 .glass-chip i { display:none; }
 .chip-push { top:3px; right:0; }
 .chip-kupon { left:0; bottom:20px; }
 .slot-label strong { font-size:10px; }
 .slot-label small { font-size:7px; }
 .slot-label { padding:10px; }
 .app-pills { gap:6px; }
 .app-pill { padding:9px 12px; font-size:10px; }
 .app-tagline { font-size:12px; }
 .app-note { font-size:10px; text-align:left; }
 .app-ctas .button { font-size:12px; padding:11px 17px; }
 .flow { padding:45px 0 0; }
 .flow-line { grid-template-columns:1fr 1fr; gap:26px 20px; }
 .flow-line h3 { font-size:20px; margin-top:9px; }
 .flow-line p { font-size:12px; }
 .flow-tablet { width:86%; margin-top:30px; }
 .tablet-screen { padding:8px; border-radius:16px; }
 .laptop-screen { padding:8px; border-radius:12px 12px 4px 4px; }
 .compare { padding:40px 0; }
 .compare-grid { grid-template-columns:1fr; gap:14px; }
 .compare-card { padding:25px; }
 .compare-card h3 { font-size:24px; }
 .compare-card li { font-size:12px; }
 .features { padding:36px 0; }
 .showcase-row { grid-template-columns:1fr; gap:22px; margin-top:38px; }
 .showcase-row.reverse .showcase-copy,.showcase-row.reverse .showcase-visual { order:initial; }
 .showcase-copy h3 { font-size:29px; }
 .showcase-copy > p:not(.feature-kicker) { font-size:13px; }
 .showcase-visual { padding:20px 12px; }
 .owner { padding:35px 0 42px; }
 .owner-inner { grid-template-columns:1fr; gap:25px; }
 .owner-copy > p:not(.eyebrow) { font-size:13px; }
 .owner-visual { padding:18px 24px; }
 .pricing { padding:45px 0; }
 .pricing-head { flex-direction:column; gap:23px; margin-bottom:30px; }
 .price-card { display:block; padding:28px 24px; }
 .price-card > .button { margin-top:20px; }
 .price-card .tick-list { margin-top:24px; }
 .price-card .price-chips { margin-top:20px; }
 .price-card .price-intro { margin-top:18px; }
 .price-card .price-phones { margin-top:20px; }
 .price-value strong { font-size:42px; }
 .price-for { margin-bottom:18px; }
 .pilot { grid-template-columns:1fr; gap:13px; }
 .pricing-extra { grid-template-columns:1fr; gap:25px; }
 .value { padding:40px 0; }
 .journey { grid-template-columns:1fr; gap:9px; margin:25px 0; }
 .journey li { display:grid; grid-template-columns:20px 1fr; column-gap:10px; }
 .journey b { grid-row:1/4; margin:0; }
 .journey p { margin:6px 0; }
 .journey .live-tag,.journey .soon-tag { justify-self:start; }
 .dash-grid { grid-template-columns:1fr; }
 .dash-card header { min-height:0; margin-bottom:20px; }
 .dash-topbar { padding:14px 12px; }
 .dash-topbar strong { font-size:10px; margin-left:3px; }
 .dash-topbar .demo-badge { font-size:8px; }
 .dot-list { grid-template-columns:1fr; }
 .faq { padding:38px 0; }
 .faq-list summary { font-size:13px; }
 .trial { padding:42px 0; }
 .trial-wrap { grid-template-columns:1fr; gap:28px; }
 .trial-copy { padding:0; }
 .trial-copy > p:not(.eyebrow) { font-size:13px; }
 .trial-panel { padding:22px; }
 .trial .ghost-word { display:none; }
 .footer-inner { gap:18px; }
 .footer-nav { gap:8px 18px; }
 .float-a,.float-b,.float-c { animation:none; }
}
@media(prefers-reduced-motion:reduce) {
 html { scroll-behavior:auto; }
 *,*::before,*::after { animation:none !important; transition:none !important; }
}
@media print {
 .site-header,.hero-actions,.app-ctas,.app-pills,.billing-toggle,.trial,.footer-nav,.hero-index { display:none !important; }
 * { animation:none !important; transition:none !important; box-shadow:none !important; }
 body { overflow:visible; font-size:11px; }
 .hero-inner { min-height:0; }
 .rise { opacity:1; transform:none; }
 .flow-tablet,.showcase-row,.price-card,.dash-card,details { break-inside:avoid; }
 .owner,.flow,.pricing,.appshow,.compare,.features,.value,.faq { padding-block:25px; }
}

/* ==================== Calm capability cards after the moving benefits ==================== */
.capabilities { background:#fff; padding:clamp(72px,9vw,138px) 0; }
.capabilities-inner { width:min(var(--wrap),calc(100% - 96px)); margin:auto; }
.capabilities .section-head { max-width:780px; margin-inline:auto; }
.capabilities .section-head em { color:var(--accent); }
.capability-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; padding:20px; border-radius:16px; background:#F0F4F8; }
.capability-card { min-height:570px; display:flex; flex-direction:column; overflow:hidden; border-radius:16px; border:1px solid var(--marci-line); background:#fff; padding:clamp(26px,3.2vw,52px) clamp(24px,3.2vw,48px) 34px; }
.cap-visual { position:relative; height:310px; margin:-10px -8px 30px; overflow:hidden; }
.cap-visual::before { content:""; position:absolute; inset:10% 8%; border-radius:50%; background:radial-gradient(circle,#E5F2FE 0,transparent 67%); }
.mini-ui { position:absolute; border-radius:16px; box-shadow:0 23px 42px -26px #122E4B9A; }
.mini-ui span { display:block; font-size:8px; letter-spacing:.1em; }
.mini-ui strong { display:block; font-weight:500; letter-spacing:-.045em; }
.mini-ui small { display:block; font-size:9px; opacity:.7; margin-top:5px; }
.mini-dark { width:190px; padding:17px; left:26%; top:19px; z-index:1; background:#172C3F; color:#fff; rotate:-8deg; }
.mini-dark strong { font-size:20px; line-height:1.08; margin-top:9px; }
.mini-dark i { display:block; margin-top:10px; color:var(--lime); font-size:10px; font-style:normal; letter-spacing:.12em; }
.mini-list { width:220px; padding:18px; left:39%; top:80px; z-index:2; background:#fff; rotate:3deg; }
.mini-list b { display:block; font-size:29px; line-height:1; letter-spacing:-.06em; margin-top:9px; }
.mini-list p { margin:9px 0; font-size:10px; color:#546273; }
.mini-progress { height:7px; border-radius:9px; background:#DFEAF4; }
.mini-progress i { display:block; width:100%; height:100%; border-radius:inherit; background:#1B75CB; }
.mini-chip { position:absolute; z-index:3; display:flex; gap:7px; align-items:center; padding:9px 13px; border-radius:99px; background:var(--lime); color:var(--graphite); box-shadow:0 15px 30px -20px #173556; font-size:10px; }
.mini-chip strong { font-weight:600; }
.cap-operations .mini-chip { left:18%; bottom:23px; rotate:-3deg; }
.cap-copy { max-width:490px; text-align:center; margin:auto; }
.cap-copy .feature-kicker { margin:0; font-size:10px; }
.cap-copy h3 { margin:12px 0 13px; font-size:clamp(25px,2.6vw,38px); line-height:1.05; }
.cap-copy > p:last-child { margin:0; color:var(--ink-soft); font-size:14px; line-height:1.65; }
.mini-chart { width:215px; padding:18px; top:74px; left:40%; z-index:2; background:#fff; rotate:6deg; }
.chart-bars { height:82px; display:flex; gap:8px; align-items:flex-end; margin:12px 0 8px; border-bottom:1px solid #D7E2EC; }
.chart-bars i { flex:1; border-radius:4px 4px 0 0; background:#D9E8F5; }
.chart-bars i:nth-child(1) { height:28%; }.chart-bars i:nth-child(2) { height:43%; }.chart-bars i:nth-child(3) { height:52%; }.chart-bars i:nth-child(4) { height:73%; }.chart-bars i:nth-child(5) { height:100%; background:#1B75CB; }
.mini-chart b { font-size:10px; font-weight:500; }
.cap-leadership .mini-chip { right:9%; bottom:24px; rotate:-4deg; }
.mini-coupon-card { width:214px; padding:17px; left:39%; top:86px; z-index:2; background:#fff; rotate:5deg; border:1px dashed #7DA0BD; }
.mini-coupon-card strong { font-size:17px; margin-top:8px; }
.cap-guests .mini-chip { right:9%; bottom:23px; rotate:4deg; }
.mini-campaign { width:218px; padding:18px; left:40%; top:79px; z-index:2; background:#fff; rotate:4deg; }
.mini-campaign strong { font-size:27px; margin-top:8px; }
.mini-campaign p { margin:6px 0 10px; color:#546273; font-size:10px; }
.campaign-line { height:7px; border-radius:99px; background:#DCEAF7; }.campaign-line i { display:block; width:62%; height:100%; border-radius:inherit; background:#1B75CB; }
.cap-marketing .mini-chip { left:15%; bottom:24px; rotate:-3deg; }
.capability-card-soon .cap-copy .soon-tag { margin-left:5px; vertical-align:middle; }
.capability-card:hover .mini-ui { translate:0 -7px; }
.capability-card:hover .mini-chip { translate:0 -5px; }
.mini-ui,.mini-chip { transition:translate .35s ease; }
@media(max-width:760px) {
 .capabilities-inner { width:calc(100% - 36px); }
 .capabilities { padding:60px 0; }
 .capability-grid { grid-template-columns:1fr; padding:10px; gap:10px; border-radius:16px; }
 .capability-card { min-height:480px; padding:24px 20px 30px; }
 .cap-visual { height:245px; margin:0 -5px 21px; }
 .mini-dark { left:13%; top:13px; width:162px; padding:14px; }
 .mini-dark strong { font-size:17px; }
 .mini-list,.mini-chart,.mini-coupon-card,.mini-campaign { width:190px; left:31%; top:64px; padding:15px; }
 .mini-list b,.mini-campaign strong { font-size:24px; }
 .cap-operations .mini-chip,.cap-leadership .mini-chip,.cap-guests .mini-chip,.cap-marketing .mini-chip { bottom:10px; }
 .cap-copy h3 { font-size:27px; }
 .cap-copy > p:last-child { font-size:13px; }
 .capability-card:hover .mini-ui,.capability-card:hover .mini-chip { translate:none; }
}
@media(prefers-reduced-motion:reduce) { .mini-ui,.mini-chip { transition:none; } }

/* ================= Color + motion: product stage / quiet reading ================= */
:root {
 --paper:#F6F1E9;
 --surface:#FFFFFF;
 --silver:#E3DACC;
 --accent:#166AC4;
 --accent-hover:#0B3F7D;
 --focus:#166AC4;
 --graphite:#1B1614;
 --ink-soft:#6E6257;
 --sky:#166AC4;
 --lime:#F0B429;
 --lime-dark:#D69B14;
 --marci-blue:#166AC4;
 --marci-blue-dark:#0B3F7D;
 --marci-blue-soft:#DCEAFB;
 --marci-yellow:#F0B429;
 --marci-yellow-dark:#D69B14;
 --marci-ink:#1B1614;
 --marci-muted:#6E6257;
 --marci-cream:#F6F1E9;
 --marci-line:#E3DACC;
 --marci-dark-secondary:#A2958A;
}
body { background:white; }
.site-header { background:#166AC4; border:0; color:white; }
.site-header.stuck { background:#166AC4F5; }
.brand-text small { color:#E1EEFC; }
.site-header nav a { color:#F1F7FF; }
.site-header nav a:hover { color:white; background:#FFFFFF1C; }
.site-header nav .nav-cta { background:var(--lime); color:var(--graphite); }
.site-header nav .nav-cta:hover { background:var(--lime-dark); color:var(--graphite); }
.menu-button { border-color:#FFFFFF60; color:white; }
.hero { color:white; background:linear-gradient(160deg,#1563B8 8%,#2072C5 55%,#59A9E8 100%); }
.hero-bg .ghost-word { display:none; }
.hero-photo { width:100%; right:0; height:100%; top:0; mask-image:none; }
.hero-photo .media-slot { height:100%; background:transparent; }
.hero-photo .slot-label { display:none; }
.hero-photo .media-slot > img { opacity:.2 !important; mix-blend-mode:soft-light; }
.scene-light { position:absolute; width:620px; height:300px; border-radius:50%; background:radial-gradient(ellipse,#D7F2FF80,transparent 68%); filter:blur(28px); pointer-events:none; }
.scene-light-left { left:-220px; bottom:-30px; transform:rotate(-20deg); }
.scene-light-right { right:-210px; bottom:0; transform:rotate(20deg); }
.scene-floor { position:absolute; bottom:0; left:0; right:0; height:170px; background:linear-gradient(0deg,#C6E6FF35,transparent); }
.hero-inner { display:flex; flex-direction:column; gap:0; min-height:0; padding:34px 0 4px; }
.hero-copy { display:block; max-width:820px; text-align:center; }
.hero .eyebrow { color:#F0F7FF; margin-bottom:18px; font-size:10px; }
.hero .eyebrow span { background:var(--lime); }
.hero h1 { font-size:clamp(42px,4.8vw,68px); line-height:1.15; letter-spacing:-.03em; }
.hero h1 em { color:#D5E9FF; }
.hero-lead { color:#F2F7FF; max-width:500px; font-size:15px; line-height:1.55; margin:19px auto 0; }
.marci-acronym { color:#CFE3FF; }
.hero-actions { justify-content:center; margin-top:22px; gap:10px; }
.hero .button-primary { background:var(--lime); color:var(--graphite); }
.hero .button-primary:hover { background:var(--lime-dark); }
.hero .button-primary span { background:var(--graphite); color:var(--lime); border-radius:50%; width:24px; height:24px; display:grid; place-items:center; }
.hero .button-ghost { background:transparent; color:var(--marci-cream); border-color:rgba(246,241,233,.55); }
.hero .button-ghost:hover { background:rgba(246,241,233,.12); color:#FFFFFF; }
.hero-proof { justify-content:center; margin:17px auto 0; color:#F2F7FF; font-size:10px; width:fit-content; padding:6px 12px; border-radius:20px; background:#144F8C; }
.hero-proof strong { margin-right:4px; }
.hero-proof strong { color:white; }
.hero-proof br { display:none; }
.hero-proof .proof-dot { background:var(--lime); }
.hero-stage { width:min(1060px,100%); height:370px; margin-top:34px; }
.hero-phone { width:154px; left:calc(50% + 229px); right:auto; top:25px; transform:perspective(1100px) rotateY(-16deg) rotate(9deg); z-index:4; }
.hero .laptop-screen { background:linear-gradient(160deg,#F1F6FC,#C3D7EB); padding:8px; box-shadow:0 25px 60px -20px #083C7890; }
.hero .laptop-base { background:linear-gradient(#F2F7FC,#90AFCD); }
.hero .phone-screen { background:linear-gradient(150deg,#FFFFFF,#B4CCE1); padding:5px; border-radius:25px; box-shadow:0 26px 65px -20px #083C7890; }
.hero .phone-screen .media-slot { border-radius:20px; }
.hero .media-slot:not(.hero-photo .media-slot) { background:linear-gradient(140deg,#FFFFFF,#E3F1FD); color:#46657E; }
.hero .slot-cross { color:#57768F; }
.hero .glass-chip strong { font-size:12px; }
.hero .glass-chip small { color:inherit; font-size:10px; margin-top:4px; }
.hero-proofbar { border-color:#FFFFFF38; grid-template-columns:repeat(3,1fr) 1.2fr; padding:22px; border-radius:16px 16px 0 0; background:#15599E; }
.hero-proofbar strong,.hero-proofbar span { color:#F3F8FF; }
.scene-controls { display:flex; align-items:center; justify-content:flex-end; gap:16px; }
.hero-index { display:flex; color:white; }
.motion-toggle { min-height:44px; padding:7px 10px; border:1px solid #FFFFFF55; border-radius:24px; color:white; font-size:10px; display:flex; align-items:center; gap:8px; white-space:nowrap; }
.motion-toggle:hover { background:#FFFFFF18; }
/* Calm content, with color concentrated in product surfaces. */
.appshow { background:linear-gradient(180deg,#FFFFFF,#F2F8FF 65%,#FFFFFF); }
.appshow h2 em { color:var(--accent); }
.appshow .phone-screen { background:linear-gradient(145deg,#EAF2FA,#7999B6); padding:6px; }
.app-hero-phone .media-slot { background:linear-gradient(150deg,#FFFFFF,#DDEEFF); }
.app-phone-left .media-slot { background:linear-gradient(150deg,#FFFFFF,var(--marci-blue-soft)); }
.app-phone-right .media-slot { background:linear-gradient(150deg,#E7F4FF,#C0DEFA); }
.app-phone-far .media-slot { background:#DEEBF5; }
.appshow .chip-push { background:var(--lime); border-color:var(--marci-line); }
.appshow .chip-kupon { background:#FFFFFFEC; }
.app-pill.active { background:var(--sky); border-color:var(--sky); color:white; }
.app-pill:hover { background:#E0EDFB; }
.app-pill.active:hover { background:var(--accent); }
.button-primary { background:var(--marci-yellow); color:var(--marci-ink); }
.button-primary:hover { background:var(--marci-yellow-dark); }
.flow,.compare,.features,.owner,.pricing,.value,.faq { background:white; }
.flow,.owner,.value { background:#F5F8FC; }
.flow-tablet .media-slot { background:linear-gradient(140deg,#F4F8FC,#E1EDFA); }
.compare-marci { background:#F0F7FD; color:var(--graphite); border-color:#C8DBED; box-shadow:none; }
.compare-marci .compare-tag,.compare-marci i { color:var(--accent); }
.compare-marci .compare-foot { color:var(--ink-soft); border-color:var(--line); }
.price-featured { background:linear-gradient(150deg,#FFFFFF,var(--marci-blue-soft)); border-color:var(--marci-line); box-shadow:0 22px 65px -35px #17110F35; }
.price-badge { background:var(--graphite); color:var(--lime); }
.price-featured > .button { background:var(--graphite); color:white; }
.price-featured > .button:hover { background:var(--ink-soft); }
.trial { background:linear-gradient(130deg,#145AAB,#237DD0); }
.trial .eyebrow.light { color:#E1EFFF; }
.trial .button-primary { background:var(--lime); color:var(--graphite); }
.trial .button-primary:hover { background:var(--lime-dark); }
.trial-copy > p:not(.eyebrow) { color:#F1F7FF; }
.trial-panel { background:#FFFFFF0A; border-color:rgba(246,241,233,.3); }
footer { background:#F5F8FC; }
.footer-brand .brand-text small { color:var(--ink-soft); }
/* Individual translate keeps each device's perspective intact. No scroll handler. */
@keyframes sceneHover { 0%,100% { translate:0 0; } 50% { translate:0 -12px; } }
@keyframes lightDrift { 0%,100% { translate:0 0; } 50% { translate:45px -18px; } }
@media(prefers-reduced-motion:no-preference) {
 .hero-phone { animation:sceneHover 6s ease-in-out -2s infinite; }
 .app-stage2 .device-phone { animation:sceneHover 7s ease-in-out infinite; }
 .app-stage2 .app-phone-left { animation-delay:-2s; }
 .app-stage2 .app-phone-right { animation-delay:-4s; }
 .app-stage2 .app-phone-far { animation-delay:-6s; }
 .scene-light { animation:lightDrift 14s ease-in-out infinite; }
 .scene-light-right { animation-delay:-7s; }
}
.motion-paused *,.motion-paused *::before,.motion-paused *::after { animation-play-state:paused !important; }
.motion-paused { scroll-behavior:auto; }
@media(max-width:1100px) {
 .hero h1 { font-size:58px; }
 .hero-proofbar { grid-template-columns:repeat(3,1fr); }
 .scene-controls { grid-column:1/-1; justify-content:center; }
 .hero-stage { height:355px; }
 .hero-phone { left:calc(50% + 190px); width:135px; }
}
@media(max-width:900px) {
 .site-header nav { background:#166AC4; }
 .hero h1 { font-size:54px; }
 .hero-phone { left:calc(50% + 165px); right:auto; width:128px; }
 .hero-stage { height:330px; }
}
@media(max-width:760px) {
 .hero-inner { padding:26px 0 0; }
 .hero-copy { display:contents; }
 .hero-copy .eyebrow { align-self:center; margin-bottom:14px; font-size:8px; }
 .hero h1 { font-size:clamp(31px,8.7vw,49px); line-height:1.15; text-align:center; }
 .hero h1 em { color:#DAEDFF; }
 .hero-lead { max-width:370px; text-align:center; margin-top:15px; font-size:13px; }
 .hero-actions { margin-top:20px; }
 .hero-proof { order:6; align-self:center; margin:0 auto 15px; font-size:9px; max-width:290px; }
 .hero-proof br { display:block; }
 .hero-stage { order:5; margin-top:25px; height:345px; }
 .hero-phone { width:153px; left:50%; top:0; transform:translateX(-50%) rotate(-4deg); }
 .hero .slot-label strong { font-size:10px; }
 .hero .slot-label small { font-size:7px; }
 .hero .phone-screen { padding:5px; }
 .hero-proofbar { padding:18px 0; gap:18px 8px; }
 .hero-proofbar strong { font-size:8px; }
 .hero-proofbar span { font-size:9px; }
 .scene-controls { justify-content:space-between; gap:12px; }
 .hero-index { display:flex; font-size:10px; }
 .motion-toggle { font-size:9px; }
 .scene-light { width:340px; height:260px; filter:none; animation:none !important; }
}
@media(prefers-reduced-motion:reduce) {
 .motion-toggle { display:none; }
}
@media print {
 .scene-controls,.scene-light { display:none !important; }
 .hero,.site-header { background:white !important; color:#182532 !important; }
 .hero h1 em,.hero .hero-lead,.hero .eyebrow,.hero-proof strong,.hero-proof,.hero-proofbar strong,.hero-proofbar span { color:#182532; }
}

/* ==================== Benefits: continuous arc / mobile swipe ==================== */
.hero-mobile-product { display:none; }
.hero-inner { width:100%; }
.hero-copy { padding-inline:24px; }
.benefit-showcase { width:100%; margin-top:22px; }
.benefit-viewport { --card-width:248px; --arc-range:calc(50vw + 170px); position:relative; width:100%; height:355px; perspective:1300px; overflow:hidden; }
.benefit-track { display:flex; width:max-content; gap:22px; padding:24px; }
.benefit-card { position:relative; display:flex; flex-direction:column; width:var(--card-width); height:282px; flex:none; padding:22px; border:1px solid var(--marci-line); border-radius:16px; background:#FFFFFF; color:var(--marci-ink); box-shadow:0 14px 30px -20px rgba(27,22,20,.25); text-align:left; }
.benefit-card h2 { font-size:18px; line-height:1.2; letter-spacing:-.045em; font-weight:500; margin:18px 0 0; }
.benefit-top { display:flex; align-items:center; justify-content:space-between; gap:6px; font-size:8px; letter-spacing:.035em; }
.benefit-demo { font-size:7px; padding:3px 5px; border:1px solid currentColor; border-radius:5px; letter-spacing:.06em; }
.benefit-number { margin-top:9px; font-size:35px; font-weight:500; line-height:1.12; letter-spacing:-.055em; white-space:nowrap; }
.benefit-number small { font-size:13px; letter-spacing:-.02em; font-weight:400; }
.benefit-sub { margin-top:9px; font-size:11px; line-height:1.4; }
.benefit-foot { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:auto; font-size:9px; padding-top:10px; }
.benefit-foot > span:last-child { font-size:18px; line-height:1; }
.benefit-profit { background:#142C43; color:white; border-color:#5C839F; }
.benefit-guests { background:#FFFFFF; color:var(--marci-ink); border-color:var(--lime); }
.benefit-coupons { background:#DBEFFF; color:#15344D; }
.benefit-marketing { background:#174E89; color:white; border-color:#5C91C4; }
.benefit-marketing h2 { margin-top:14px; font-size:17px; }
.benefit-marketing .benefit-number { margin-top:12px; }
.benefit-soon { align-self:flex-start; display:inline-flex; font-size:8px; border-radius:8px; padding:4px 6px; margin-top:8px; color:var(--graphite); background:var(--lime); }
.mini-bars { display:flex; align-items:flex-end; gap:7px; height:56px; margin-top:13px; border-bottom:1px solid #D7E4EF; }
.mini-bars i { flex:1; height:var(--bar); border-radius:4px 4px 0 0; background:#B8DCFA; }
.mini-bars i:last-child { background:#1975C9; }
.mini-ledger { display:grid; gap:9px; margin-top:20px; }
.mini-ledger div { display:flex; justify-content:space-between; font-size:9px; gap:5px; border-bottom:1px solid #FFFFFF25; padding-bottom:8px; }
.mini-ledger strong { font-weight:500; }
.mini-agenda { display:grid; gap:13px; margin-top:18px; }
.mini-agenda > div { display:flex; gap:14px; align-items:flex-start; font-size:11px; }
.mini-agenda time { font-size:10px; color:#155DA8; padding-top:1px; }
.mini-agenda small { display:block; font-size:9px; color:#546273; margin-top:2px; }
.mini-guests { display:flex; margin-top:23px; padding-left:7px; }
.mini-guests span { width:43px; height:43px; margin-left:-7px; display:grid; place-items:center; border-radius:50%; background:var(--marci-cream); border:2px solid var(--lime); font-size:22px; }
.mini-guests span:last-child { font-size:12px; background:var(--graphite); color:var(--lime); }
.mini-coupon { border:1px dashed #678CAE; border-radius:8px; margin-top:14px; padding:10px 12px; }
.mini-coupon > span { font-size:7px; letter-spacing:.07em; display:block; }
.mini-coupon > strong { font-size:11px; font-weight:500; }
.mini-progress { height:5px; background:#B8D7ED; border-radius:4px; margin-top:9px; }
.mini-progress i { display:block; width:35%; height:100%; border-radius:4px; background:#155DA8; }
.mini-marketing { display:flex; gap:28px; margin-top:15px; }
.mini-marketing > div { display:flex; flex-direction:column; }
.mini-marketing strong { font-size:17px; font-weight:500; }
.mini-marketing span { font-size:9px; }
.benefit-caption { display:flex; align-items:center; justify-content:center; gap:18px; padding:5px 24px 22px; }
.benefit-caption p { margin:0; font-size:10px; color:#FFFFFF; background:#144F8C; border-radius:10px; padding:9px 14px; max-width:640px; text-align:center; }
.benefit-caption strong { font-weight:600; }
.benefit-nav { display:none; gap:8px; flex:none; }
.benefit-nav button { height:44px; width:44px; display:grid; place-items:center; border:1px solid #FFFFFF70; border-radius:50%; background:#144F8C; color:white; font-size:20px; }
.benefit-nav button:hover { background:#123C6B; }
@keyframes benefitArc {
 0% { transform:translateX(calc(-1 * var(--arc-range))) translateY(40px) rotateY(42deg) rotate(-8deg); opacity:0; }
 8% { opacity:1; }
 50% { transform:translateX(0) translateY(0) rotateY(0) rotate(0); opacity:1; }
 92% { opacity:1; }
 100% { transform:translateX(var(--arc-range)) translateY(40px) rotateY(-42deg) rotate(8deg); opacity:0; }
}
@media(min-width:761px) and (prefers-reduced-motion:no-preference) {
 .benefit-track { display:block; width:100%; padding:0; }
 .benefit-card { position:absolute; left:50%; top:20px; margin-left:calc(var(--card-width) / -2); animation:benefitArc 48s linear var(--phase) infinite; }
 .benefit-viewport:hover .benefit-card,.benefit-viewport:focus-within .benefit-card { animation-play-state:paused; }
 /* Keyboard navigation gets a stable row: no chasing moving links. */
 .benefit-viewport:focus-within { overflow-x:auto; scroll-snap-type:x mandatory; }
 .benefit-viewport:focus-within .benefit-track { display:flex; width:max-content; gap:22px; padding:24px; }
 .benefit-viewport:focus-within .benefit-card { position:relative; left:auto; top:auto; margin:0; animation:none; transform:none; opacity:1; scroll-snap-align:center; }
}
@media(min-width:761px) and (max-width:1000px) {
 .benefit-viewport { --card-width:220px; height:350px; }
 .benefit-card { padding:18px; }
 .benefit-number { font-size:32px; }
}
@media(max-width:760px) {
 .hero-inner { width:calc(100% - 36px); }
 .hero-copy { padding:0; }
 .hero-mobile-product { display:block; position:relative; width:100%; height:342px; order:5; margin-top:25px; }
 .hero-mobile-product .hero-phone { top:0; width:149px; }
 .mobile-product-caption { position:absolute; left:0; right:0; bottom:0; text-align:center; font-size:10px; color:#FFFFFF; }
 .hero-proof { margin-top:14px; }
 .benefit-showcase { order:7; width:calc(100% + 36px); margin-top:8px; }
 .benefit-viewport { --card-width:min(280px,calc(100vw - 72px)); height:320px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; scrollbar-width:thin; scrollbar-color:var(--lime) #FFFFFF20; }
 .benefit-track { gap:14px; padding:14px 36px 20px; }
 .benefit-card { height:282px; scroll-snap-align:center; animation:none; }
 .benefit-card h2 { font-size:19px; }
 .benefit-caption { flex-wrap:wrap; gap:10px; padding:8px 20px 20px; }
 .benefit-caption p { width:100%; font-size:9px; }
 .benefit-nav { display:flex; }
 .hero-proofbar { margin-top:0; }
}
@media(prefers-reduced-motion:reduce) {
 .benefit-viewport { overflow-x:auto; scroll-snap-type:x mandatory; }
 .benefit-card { scroll-snap-align:center; }
 .benefit-nav { display:flex; }
}
@media print {
 .benefit-viewport { height:auto; overflow:visible; }
 .benefit-track { display:grid; grid-template-columns:repeat(3,1fr); width:100%; }
 .benefit-card { position:relative; left:auto; top:auto; margin:0; width:100%; transform:none !important; opacity:1 !important; break-inside:avoid; }
 .benefit-nav { display:none; }
}

/* A későbbi bemutatókártya-szabályok felülírják a közös tipográfiát. */
.pulse-card .pulse-number { margin:0; }
.pulse-card .pulse-number strong { display:block; font-size:clamp(47px,5vw,76px); font-weight:500; line-height:.95; letter-spacing:-.07em; }
.pulse-card .pulse-number small { display:block; margin-top:11px; color:inherit; font-size:14px; font-weight:600; line-height:1.2; }
.pulse-card .mini-receipt { width:144px; padding:14px; }
.pulse-card .mini-receipt div { display:flex; justify-content:space-between; gap:10px; margin:5px 0; font-size:9px; }
.pulse-card .mini-receipt strong { display:block; margin-top:9px; padding-top:8px; border-top:1px dashed #9CADBC; font-size:12px; letter-spacing:0; }
.pulse-card .event-stamp { flex:none; }
.pulse-return .pulse-number strong { color:var(--lime); }
@media(max-width:760px) {
 .pulse-card .pulse-number strong { font-size:58px; }
}

/* Élő, de lassú termék-előnézetek. A mozgás szüneteltethető a fejlécből. */
.mini-list .step-counter { display:inline; font-size:inherit; font-weight:700; letter-spacing:0; }
.chart-bars i { transform-origin:bottom; animation:chartPulse 3.8s ease-in-out infinite alternate; }
.chart-bars i:nth-child(2) { animation-delay:.22s; }.chart-bars i:nth-child(3) { animation-delay:.42s; }.chart-bars i:nth-child(4) { animation-delay:.64s; }.chart-bars i:nth-child(5) { animation-delay:.86s; }
.mini-progress i,.campaign-line i { animation:lineBreathe 3.2s ease-in-out infinite; }
.mini-coupon-card { transition:opacity .25s ease, transform .25s ease; }
.mini-coupon-card.is-changing { opacity:.35; transform:translateY(5px) rotate(5deg); }
.pulse-grid { gap:22px; }
.pulse-card { min-height:248px; padding:30px; }
.pulse-sales { min-height:518px; }
.pulse-sales .pulse-number { margin-top:auto; margin-bottom:8px; }
.pulse-basket .pulse-number,.pulse-events .pulse-number,.pulse-return .pulse-number { margin-top:18px; }
.pulse-card .pulse-card-top { display:flex; align-items:center; gap:6px; font-size:14px; font-weight:600; }
.pulse-receipt { display:grid; grid-template-columns:1fr auto; gap:7px 16px; margin-top:auto; padding-top:17px; border-top:1px solid #C9D5E0; font-size:12px; }
.pulse-receipt b { font-weight:600; }
.pulse-event-line { display:flex; align-items:center; gap:7px; margin-top:auto; padding-top:16px; border-top:1px solid var(--graphite); font-size:12px; }
.pulse-event-line strong { font-weight:700; }.pulse-event-line i { margin-left:auto; font-size:19px; font-style:normal; }
.pulse-quote { justify-content:flex-start; }.pulse-quote blockquote { margin-top:22px; }.pulse-quote > p { margin-top:auto; }
.pulse-dots { display:flex; align-items:center; gap:7px; margin-top:auto; }.pulse-dots i { width:8px; height:8px; border-radius:50%; background:var(--lime); animation:dotPop 1.8s ease-in-out infinite; }.pulse-dots i:nth-child(2){animation-delay:.18s}.pulse-dots i:nth-child(3){animation-delay:.36s}.pulse-dots i:nth-child(4){animation-delay:.54s}.pulse-dots span{margin-left:8px;font-size:18px;font-weight:600}
@keyframes chartPulse { to { transform:scaleY(.72); } }
@keyframes lineBreathe { 50% { width:48%; } }
@keyframes dotPop { 50% { transform:translateY(-5px) scale(1.2); } }
.motion-paused .chart-bars i,.motion-paused .mini-progress i,.motion-paused .campaign-line i,.motion-paused .pulse-dots i { animation-play-state:paused; }
@media(max-width:760px) {
 .pulse-grid { gap:16px; }
 .pulse-card { min-height:245px; }
 .pulse-sales { min-height:355px; }
}
@media(prefers-reduced-motion:reduce) {
 .chart-bars i,.mini-progress i,.campaign-line i,.pulse-dots i { animation:none; }
}

/* A napi nézet önmagában is él: nincs szükség rámutatásra. */
.pulse-orb::before { animation:ringTurn 10s linear infinite; }
.pulse-orb::after { animation:ringTurn 15s linear reverse infinite; }
.pulse-event-line i { animation:arrowNudge 1.8s ease-in-out infinite; }
.google-kpi { display:grid; grid-template-columns:auto 1fr; column-gap:12px; align-items:end; margin:18px 0 10px; }
.google-kpi strong { grid-row:span 2; font-size:62px; font-weight:500; line-height:.85; letter-spacing:-.08em; }
.google-kpi span { color:#F5B301; font-size:18px; letter-spacing:1px; animation:starTwinkle 2.6s ease-in-out infinite; }
.google-kpi b { color:var(--ink-soft); font-size:12px; font-weight:500; }
.pulse-quote blockquote { font-size:clamp(18px,1.55vw,24px); }
@keyframes ringTurn { to { rotate:360deg; } }
@keyframes arrowNudge { 50% { transform:translateX(6px); } }
@keyframes starTwinkle { 50% { opacity:.55; transform:scale(.96); } }
.motion-paused .pulse-orb::before,.motion-paused .pulse-orb::after,.motion-paused .pulse-event-line i,.motion-paused .google-kpi span { animation-play-state:paused; }
@media(prefers-reduced-motion:reduce) {
 .pulse-orb::before,.pulse-orb::after,.pulse-event-line i,.google-kpi span { animation:none; }
}

/* Pénzügyi összkép: a nagy kék kártya információt hordoz, nem üres dekoráció. */
.pulse-sales { justify-content:flex-start; }
.pulse-sales .pulse-orb { top:92px; right:30px; width:118px; height:118px; opacity:.9; }
.pulse-sales .pulse-orb::before { width:142px; height:142px; }.pulse-sales .pulse-orb::after { width:164px; height:164px; }
.pulse-sales .pulse-orb span { font-size:40px; }
.sales-summary { position:relative; z-index:2; display:grid; grid-template-columns:1fr 1fr; gap:11px; margin-top:104px; }
.sales-summary div { min-height:76px; padding:12px; border:1px solid #FFFFFF35; border-radius:13px; background:#FFFFFF14; backdrop-filter:blur(6px); }
.sales-summary span { display:block; font-size:9px; line-height:1.2; opacity:.78; }
.sales-summary strong { display:block; margin-top:7px; font-size:clamp(18px,1.65vw,27px); font-weight:600; line-height:1; letter-spacing:-.045em; }
.pulse-sales > p:last-child { margin-top:auto; }
.pulse-card .pulse-number strong { font-size:clamp(38px,3.8vw,58px); }
.pulse-card .pulse-number small { font-size:12px; }
.pulse-basket .pulse-number { margin-top:12px; }
.pulse-basket .pulse-receipt { margin-top:14px; }
@media(max-width:760px) {
 .pulse-sales .pulse-orb { top:70px; right:28px; }
 .sales-summary { margin-top:80px; gap:9px; }
 .sales-summary div { min-height:65px; padding:10px; }
 .sales-summary strong { font-size:18px; }
 .pulse-card .pulse-number strong { font-size:47px; }
}

/* Közös vizuális nyelv a teljes oldalon: ugyanaz a levegős, kék–lime rendszer. */
.appshow,.flow,.compare,.owner,.pricing,.value { background:#F4F7FB; }
.flow,.owner,.value { background:linear-gradient(180deg,#FFFFFF 0%,#F4F7FB 100%); }
.compare,.pricing { background:linear-gradient(180deg,#EEF4FA 0%,#FFFFFF 78%); }
.compare-card,.price-card,.dash { border-color:var(--marci-line); border-radius:16px; }
.compare-marci { background:#182532; }
.price-featured { background:linear-gradient(155deg,#FFFFFF,#E9F4FF); border-color:var(--marci-blue-soft); box-shadow:none; }
.media-slot { background:linear-gradient(145deg,#EEF6FF,#DCEBFA); color:#47637D; }
.app-pill:hover { background:#E5F2FF; border-color:#8DBFEA; }
.app-pill.active { background:#E5F2FF; border-color:#8DBFEA; color:var(--marci-blue-dark); }

/* Összehasonlítás: sötét lapon kizárólag magas kontrasztú szöveg maradhat. */
.compare-marci { color:var(--marci-cream); background:var(--marci-blue-dark); }
.compare-marci h3,.compare-marci li { color:var(--marci-cream); }
.compare-marci .compare-tag { color:var(--marci-dark-secondary); margin-top:6px; }
.compare-marci i { color:var(--lime); }
.compare-marci .compare-foot { color:var(--marci-dark-secondary); border-color:rgba(246,241,233,.2); }
/* Kontraszt (Lighthouse, 2026-10-02): a #A2958A a sötétkéken csak 3,6:1 volt, ez 7:1 fölött. */
.compare-marci .compare-tag,.compare-marci .compare-foot { color:#D9D1C7; }

/* A műszak után nem újabb pénztárgép, hanem a rendszer saját állapotképe jelenik meg. */
.flow-tablet { width:min(900px,calc(100% - 96px)); margin:52px auto 0; padding:0; }
.flow-board { overflow:hidden; border:1px solid #BCD8F0; border-radius:16px; background:#fff; box-shadow:0 22px 50px -40px #165DA880; }
.flow-board-head { display:flex; align-items:center; gap:10px; padding:17px 22px; color:var(--marci-cream); background:var(--marci-blue-dark); font-size:11px; letter-spacing:.08em; }
.flow-board-head strong { margin-left:auto; color:var(--lime); font-size:12px; letter-spacing:0; }.flow-board-head i { color:var(--lime); font-size:10px; font-style:normal; }
.flow-board-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:#D8E6F2; }
.flow-board-grid > div { min-height:154px; padding:25px; background:#fff; }.flow-board-grid > div:nth-child(2) { background:#EDF5FC; }.flow-board-grid > div:nth-child(3) { background:var(--marci-cream); }
.flow-board-grid span,.flow-board-grid small { display:block; color:#5A6C7C; font-size:11px; }.flow-board-grid strong { display:block; margin:20px 0 8px; color:var(--marci-ink); font-size:32px; line-height:1; letter-spacing:-.03em; }.flow-board-grid small { color:var(--ink-soft); }

/* Árazás: a napi nézet kártyarendszere köszön vissza, nem külön stílus. */
.pricing .price-card { background:#fff; border-color:#C8DDF0; box-shadow:0 14px 34px -30px #165DA850; }
.pricing .price-card:nth-child(2) { background:#EDF5FC; }
.pricing .price-featured { color:#fff; background:linear-gradient(145deg,var(--marci-blue),var(--marci-blue-dark)); border-color:var(--marci-blue); border-radius:16px; }
.pricing .price-featured .price-for,.pricing .price-featured .price-note,.pricing .price-featured .tick-list li,.pricing .price-featured .setup-fee,.pricing .price-featured .setup-fee small { color:#E3F1FF; }
.pricing .price-featured .button-primary { color:var(--graphite); background:var(--lime); }.pricing .price-featured .tick-list li::before { color:var(--lime); }
.pricing .price-featured .price-badge { color:var(--graphite); background:var(--lime); }
/* A "Hamarosan" jelölés a sötétkék kártyán a világos, átlátszó-fehér mintát
   követi (mint a price-for/tick-list), nem az alap szürke-szürke párost,
   ami itt szinte olvashatatlan lenne. */
.pricing .price-featured .soon-tag { background:rgba(255,255,255,.2); color:#E3F1FF; }

/* A vendégérték blokk ugyanazt a nyugodt kártyanyelvet használja. */
.value { background:linear-gradient(180deg,#F4F7FB,#FFFFFF); }
.journey { gap:14px; }.journey .glass-card { border:1px solid var(--marci-line); border-radius:16px; background:#fff; box-shadow:none; }.journey .glass-card b { color:var(--marci-blue); }
.dash { border-color:var(--marci-line); box-shadow:none; }.dash-topbar { background:var(--marci-blue-dark); }.dash-card { background:#fff; }
@media(max-width:760px) {
 .flow-tablet { width:calc(100% - 36px); margin-top:32px; }
 .flow-board-grid { grid-template-columns:1fr; }.flow-board-grid > div { min-height:106px; padding:20px; }.flow-board-grid strong { margin:12px 0 5px; }
}

/* Szemléltető statisztikák: a számok JavaScriptből egyszer felfutnak. */
.pulse-section { background:#F4F7FB; padding:clamp(72px,9vw,138px) 0; }
.pulse-inner { width:min(var(--wrap),calc(100% - 96px)); margin:auto; }
.pulse-section .section-head { max-width:760px; margin-inline:auto; }
.pulse-section .section-head em { color:var(--accent); }
.pulse-grid { display:grid; grid-template-columns:1.18fr 1.05fr 1.2fr; grid-template-rows:repeat(2,minmax(230px,1fr)); gap:18px; margin-top:48px; }
.pulse-card { position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; min-height:230px; padding:28px; border-radius:16px; border:1px solid var(--marci-line); box-shadow:none; transition:transform .25s ease, box-shadow .25s ease; }
.pulse-card:hover { transform:translateY(-5px); box-shadow:0 22px 42px #17304B16; }
.pulse-card p { margin:0; max-width:300px; font-size:14px; line-height:1.45; }
.pulse-number { display:block; font-size:clamp(47px,5vw,76px); font-weight:500; line-height:.95; letter-spacing:-.07em; }
.pulse-label { display:block; margin-top:11px; font-size:14px; font-weight:600; }
.pulse-sales { grid-row:span 2; min-height:478px; color:#fff; background:linear-gradient(145deg,#116DC5,#1C8DE6); }
.pulse-sales::after { content:""; position:absolute; width:310px; height:310px; right:-105px; bottom:-105px; border:1px solid #FFFFFF3B; border-radius:50%; box-shadow:0 0 0 34px #FFFFFF12,0 0 0 68px #FFFFFF0A; }
.pulse-orb { position:absolute; right:25px; top:118px; z-index:1; width:155px; height:155px; display:grid; place-items:center; border-radius:50%; color:#165DA8; background:radial-gradient(circle at 33% 27%,#fff 0 7%,#DFF3FF 45%,#79C6FB 100%); box-shadow:0 18px 40px #063B7060; animation:pulseFloat 4.5s ease-in-out infinite; }
.pulse-orb::before,.pulse-orb::after { content:""; position:absolute; border:1px solid #FFFFFF70; border-radius:50%; }
.pulse-orb::before { width:182px; height:182px; }
.pulse-orb::after { width:216px; height:216px; }
.pulse-orb span { position:relative; z-index:1; font-size:54px; }
.pulse-sales .pulse-number { position:relative; z-index:2; margin-top:auto; }
.pulse-sales .pulse-label,.pulse-sales p { position:relative; z-index:2; }
.pulse-basket { color:var(--graphite); background:#EAF0F6; }
.mini-receipt { width:144px; align-self:flex-end; padding:14px; border-radius:12px; background:#fff; box-shadow:0 14px 22px #243A521C; transform:rotate(5deg); }
.mini-receipt div { display:flex; justify-content:space-between; margin:5px 0; color:#617183; font-size:9px; }
.mini-receipt strong { display:block; margin-top:9px; padding-top:8px; border-top:1px dashed #9CADBC; font-size:12px; }
.pulse-events { color:var(--graphite); background:var(--marci-blue-soft); }
.event-stamp { align-self:flex-end; display:grid; place-items:center; width:84px; height:84px; border:1px solid var(--graphite); border-radius:50%; font-size:11px; font-weight:700; transform:rotate(-10deg); }
.pulse-quote { color:var(--graphite); background:#fff; }
.pulse-quote blockquote { max-width:620px; margin:0; font-size:clamp(21px,2.2vw,31px); line-height:1.12; letter-spacing:-.04em; }
.pulse-quote footer { margin-top:20px; color:var(--ink-soft); font-size:13px; }
.pulse-return { grid-column:3; grid-row:2; color:#fff; background:var(--marci-blue-dark); }
.pulse-return .pulse-number { color:var(--lime); }
.pulse-note { margin:22px auto 0; max-width:760px; color:var(--ink-soft); font-size:12px; line-height:1.5; text-align:center; }
@keyframes pulseFloat { 50% { transform:translateY(-10px) rotate(4deg); } }
@media(max-width:760px) {
 .pulse-inner { width:calc(100% - 36px); }
 .pulse-grid { grid-template-columns:1fr; grid-template-rows:auto; gap:14px; margin-top:34px; }
 .pulse-card,.pulse-sales { grid-column:auto; grid-row:auto; min-height:230px; padding:24px; border-radius:16px; }
 .pulse-sales { min-height:340px; }
 .pulse-quote { min-height:270px; }
 .pulse-orb { right:29px; top:84px; width:122px; height:122px; }
 .pulse-orb::before { width:142px; height:142px; }
 .pulse-orb::after { width:166px; height:166px; }
 .pulse-orb span { font-size:42px; }
 .pulse-number { font-size:58px; }
}
@media(prefers-reduced-motion:reduce) {
 .pulse-card { transition:none; }
 .pulse-orb { animation:none; }
}


/* ======================= SEO-aloldalak (2026-10-01) =======================
   /kavezo-szoftver/ és a többi megoldás-oldal: a főoldal kék hero-ja és
   16px-es kártyanyelve, olvasható cikk-tipográfiával. Új doboz mindig 16px,
   gomb mindig pill (lásd a sarokforma-tesztet). */
.seo-hero { color:#fff; background:linear-gradient(160deg,#1563B8 8%,#2072C5 55%,#59A9E8 100%); padding:clamp(36px,6vw,84px) 0 clamp(48px,6vw,92px); overflow:clip; }
.seo-hero-inner,.seo-article,.seo-related-inner,.seo-cta-inner { width:min(var(--wrap),calc(100% - 96px)); margin-inline:auto; }
.seo-hero-inner { display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,72px); align-items:center; }
.seo-crumbs { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px; font-size:13px; color:#E1EEFC; }
.seo-crumbs a { text-decoration:underline; text-underline-offset:3px; }
.seo-hero .eyebrow.light { color:#E1EFFF; }
.seo-hero .eyebrow.light span { background:var(--lime); }
.seo-hero h1 { font-size:clamp(34px,4.6vw,60px); line-height:1.06; letter-spacing:-.045em; max-width:16ch; }
.seo-lead { margin-top:22px; font-size:clamp(16px,1.5vw,19px); line-height:1.65; color:#F1F7FF; max-width:60ch; }
.seo-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.seo-hero .button-primary { background:var(--lime); color:var(--graphite); }
.seo-hero .button-primary:hover { background:var(--lime-dark); }
.seo-hero .button-ghost { color:#fff; border-color:#FFFFFF66; }
.seo-hero .button-ghost:hover { color:#fff; background:#FFFFFF1C; }
.seo-hero-note { margin-top:22px; font-size:14px; line-height:1.6; color:#E1EEFC; max-width:56ch; }
.seo-hero-visual { margin:0; }
.seo-hero-visual .tablet-screen { transform:perspective(1600px) rotateY(-6deg) rotateX(2deg); }
.seo-photo { border-radius:16px; overflow:hidden; background:#DCEAFB; }
.seo-photo img { width:100%; height:auto; aspect-ratio:3 / 2; object-fit:cover; }
.seo-photo.tall img { aspect-ratio:4 / 5; }
.seo-hero .seo-photo { box-shadow:0 40px 80px -48px #031F4590; }

.seo-article { padding:clamp(56px,7vw,104px) 0; display:grid; gap:clamp(56px,7vw,96px); }
.seo-block { display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px); align-items:center; }
.seo-block.reverse .seo-block-copy { order:2; }
.seo-block.text-only { grid-template-columns:minmax(0,780px); }
.seo-block h2 { font-size:clamp(28px,3.2vw,44px); margin-bottom:18px; }
.seo-block-copy p { font-size:16px; line-height:1.75; color:var(--ink); }
.seo-block-copy p + p { margin-top:14px; }
.seo-block-copy a { color:var(--marci-blue); text-decoration:underline; text-underline-offset:3px; }
.seo-block-copy a:hover { color:var(--marci-blue-dark); }
.seo-block-copy .tick-list li { font-size:15px; }
.seo-figure { margin:0; }
.seo-figure figcaption { margin-top:14px; font-size:13px; line-height:1.5; color:var(--ink-soft); }
.seo-callout { max-width:880px; padding:24px 28px; border:1px solid var(--marci-blue-soft); border-radius:16px; background:#EDF5FC; }
.seo-callout p { font-size:16px; line-height:1.7; }
.seo-callout strong { color:var(--marci-blue-dark); }

.seo-faq .faq-list summary { font-size:16px; font-weight:600; }
.seo-faq .faq-list p { font-size:15px; line-height:1.7; }

.seo-related { padding:clamp(56px,7vw,96px) 0; background:#F4F7FB; }
.seo-related h2 { font-size:clamp(26px,3vw,40px); margin-bottom:28px; }
.seo-related-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.seo-related-card { display:flex; flex-direction:column; gap:8px; padding:24px; border:1px solid var(--marci-line); border-radius:16px; background:#fff; transition:transform .2s ease, border-color .2s ease; }
.seo-related-card:hover { transform:translateY(-3px); border-color:var(--marci-blue); }
.seo-related-card strong { font-size:18px; line-height:1.25; letter-spacing:-.02em; }
.seo-related-card span { font-size:14px; line-height:1.55; color:var(--ink-soft); }
.seo-related-card em { margin-top:auto; padding-top:8px; font-size:14px; font-weight:600; }
.seo-related-home { margin-top:24px; font-size:15px; }
.seo-related-home a { color:var(--marci-blue); text-decoration:underline; text-underline-offset:3px; }

.seo-cta { padding:clamp(56px,7vw,96px) 0; color:#fff; background:linear-gradient(130deg,#145AAB,#237DD0); }
.seo-cta-inner { display:grid; grid-template-columns:1.3fr auto; gap:32px; align-items:center; }
.seo-cta h2 { font-size:clamp(28px,3.4vw,46px); }
.seo-cta p { margin-top:14px; max-width:60ch; font-size:16px; line-height:1.7; color:#F1F7FF; }
.seo-cta .button-primary { background:var(--lime); color:var(--graphite); }
.seo-cta .button-primary:hover { background:var(--lime-dark); }

/* Lábléc: Megoldások blokk a főoldalon, a jogi és a SEO-aloldalakon is. */
.footer-solutions { width:100%; display:flex; flex-wrap:wrap; align-items:center; gap:0 20px; padding-top:16px; border-top:1px solid var(--line); }
.footer-solutions strong { margin-right:4px; font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); }
.footer-solutions a { min-height:44px; display:flex; align-items:center; font-size:12px; }
.footer-solutions a:hover { color:var(--marci-blue); }
.footer-solutions a[aria-current="page"] { color:var(--marci-blue); font-weight:600; }

@media(max-width:1100px) {
 .seo-hero-inner,.seo-article,.seo-related-inner,.seo-cta-inner { width:calc(100% - 56px); }
 .seo-related-grid { grid-template-columns:1fr 1fr; }
}
@media(max-width:860px) {
 .seo-hero-inner,.seo-block { grid-template-columns:1fr; }
 .seo-block.reverse .seo-block-copy { order:0; }
 .seo-hero-visual .tablet-screen { transform:none; }
 .seo-cta-inner { grid-template-columns:1fr; }
}
@media(max-width:760px) {
 .seo-hero-inner,.seo-article,.seo-related-inner,.seo-cta-inner { width:calc(100% - 36px); }
 .seo-hero h1 { font-size:clamp(31px,8.4vw,44px); }
 .seo-actions .button { flex:1 1 100%; }
 .seo-related-grid { grid-template-columns:1fr; }
 .seo-callout { padding:20px; }
 .seo-hero-visual .tablet-screen { padding:8px; border-radius:16px; }
}
@media(prefers-reduced-motion:reduce) {
 .seo-related-card { transition:none; }
 .seo-related-card:hover { transform:none; }
}

/* Süti-hozzájárulás (GA4 csak elfogadás után, lásd script.js). */
.consent-banner { position:fixed; left:16px; right:16px; bottom:16px; z-index:150; max-width:720px; margin-inline:auto; display:flex; align-items:center; gap:20px; padding:18px 22px; border:1px solid var(--marci-line); border-radius:16px; background:#fff; color:var(--marci-ink); box-shadow:0 24px 60px -30px #0B3F7D80; }
.consent-banner p { font-size:14px; line-height:1.55; }
.consent-banner a { color:var(--marci-blue); text-decoration:underline; text-underline-offset:3px; }
.consent-actions { display:flex; gap:10px; flex:none; }
.consent-actions .button { min-height:44px; padding:10px 18px; }
.consent-settings { min-height:44px; display:flex; align-items:center; padding:0; font-size:11px; color:inherit; }
.consent-settings:hover { color:var(--marci-blue); }
@media(max-width:760px) {
 .consent-banner { flex-direction:column; align-items:stretch; gap:14px; left:12px; right:12px; bottom:12px; padding:16px; }
 .consent-actions .button { flex:1; }
}