/* RRR marketing oldal (F027, app/Views/marketing/home.php). A REM marketing oldal (rem.rentit.hu) stílusa, a projekt színeivel:
   márkaszín a design-spec v2 --ink tealje (#0a7180), akcentus az RRR logó pirosa. */
/* Segoe UI (a rentit.hu betűtípusa); Windowson a telepített változat tölt. */
@font-face{font-family:"Segoe UI";font-weight:300;font-display:swap;src:local("Segoe UI Light"),url(../fonts/segoe-ui-300.woff2) format("woff2")}
@font-face{font-family:"Segoe UI";font-weight:400;font-display:swap;src:local("Segoe UI"),url(../fonts/segoe-ui-400.woff2) format("woff2")}
@font-face{font-family:"Segoe UI";font-weight:600;font-display:swap;src:local("Segoe UI Semibold"),url(../fonts/segoe-ui-600.woff2) format("woff2")}
@font-face{font-family:"Segoe UI";font-weight:700 800;font-display:swap;src:local("Segoe UI Bold"),url(../fonts/segoe-ui-700.woff2) format("woff2")}

:root{--ink:#0b1b20;--muted:#5b6b70;--line:#e3ebed;--bg:#fff;--soft:#f4f8f8;--teal:#0a7180;--teal-dark:#086373;--teal-50:#e6f5f5;--coral:#e30021;--peach:#ffe8e0;--lav:#ece7ff;--navy:#0f2a35;
  --bezel:#2f3539;--rim:#a3abb0}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{font-family:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:300;color:var(--ink);background:var(--bg);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
h3,b,strong{font-weight:600}
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.i14{width:14px;height:14px}.i15{width:15px;height:15px}.i16{width:16px;height:16px}

/* felső sáv + nav */
.top{background:var(--navy);color:#bcd3da;font-size:13px}
.top .wrap{display:flex;justify-content:space-between;height:36px;align-items:center}
.top-r{display:flex;gap:18px;align-items:center}.top a:hover{color:#fff}
.top .console{border:1px solid #4b6f7c;border-radius:6px;padding:2px 10px;color:#fff}.top .console:hover{border-color:#fff}
nav{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
nav .wrap{display:flex;align-items:center;gap:32px;height:68px}
.logo{display:flex;align-items:center}.logo img{height:30px;width:auto}.logo small a:hover{color:var(--teal)}
.logo small{font-weight:400;font-size:12px;color:var(--muted);border-left:1px solid var(--line);padding-left:10px;margin-left:10px;white-space:nowrap}
nav ul{display:flex;gap:26px;list-style:none;padding:0;font-size:15px;font-weight:400;color:var(--muted);margin-left:auto}
nav ul a:hover{color:var(--ink)}
.lang{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;font-size:13px;font-weight:600}
.lang a{padding:6px 10px;color:var(--muted)}.lang a:hover{color:var(--ink)}
.lang a.on{background:var(--teal-50);color:var(--teal)}

.btn{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;padding:12px 20px;border-radius:10px;font-weight:600;font-size:15px;transition:.2s;border:0;cursor:pointer;font-family:inherit}
.btn-p{background:var(--teal);color:#fff}.btn-p:hover{background:var(--teal-dark)}
.btn-g{border:1px solid var(--line);background:#fff}.btn-g:hover{border-color:#c5d3d6}
.btn-c{background:var(--coral);color:#fff}.btn-c:hover{background:#c4001c}
.btn-o{border:1px solid #4b6f7c;color:#fff}.btn-o:hover{border-color:#fff}
.more{margin-top:32px;display:flex}.more.c{justify-content:center}

/* hero */
.hero{text-align:center;padding:88px 0 0;background:radial-gradient(1200px 500px at 50% -10%,var(--teal-50),transparent)}
h1{font-size:clamp(38px,6vw,68px);line-height:1.05;letter-spacing:-.02em;font-weight:300;margin:0 auto 20px;max-width:880px}
h1 em{font-style:normal;color:var(--teal)}
.lead{font-size:19px;color:var(--muted);max-width:680px;margin:0 auto 32px}
.cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.facts{display:flex;gap:40px;justify-content:center;margin-top:36px;font-size:14px;color:var(--muted);flex-wrap:wrap}
.facts b{display:block;color:var(--ink);font-size:17px}
.hero-shot{margin:56px auto 0;max-width:1100px;border-radius:20px;overflow:hidden;box-shadow:0 40px 80px -30px rgba(11,27,32,.35),0 0 0 1px rgba(11,27,32,.06)}

/* célcsoport-sáv */
.aud{border-bottom:1px solid var(--line)}
.aud .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.aud .wrap>div{padding:30px 22px;border-right:1px solid var(--line);display:flex;gap:14px}
.aud .wrap>div:first-child{padding-left:0}.aud .wrap>div:last-child{border:0}
.aud svg{color:var(--teal);flex:none}
.aud b{display:block;font-size:15px}.aud span{font-size:13.5px;color:var(--muted)}

/* szekciók */
section{padding:104px 0}
.pt0{padding-top:0}
.soft{background:var(--soft)}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--teal)}
h2{font-size:clamp(30px,4vw,44px);font-weight:300;letter-spacing:-.02em;line-height:1.1;margin:12px 0 16px}
.sec-head{max-width:660px;margin-bottom:48px}
.sec-head.c{text-align:center;margin-left:auto;margin-right:auto}
.sec-head p,.head2 p{color:var(--muted);font-size:18px}
.head2{margin-bottom:44px}.head2 p{max-width:760px}

/* út: fülek és panelek */
.phases{display:grid;grid-template-columns:repeat(4,1fr);position:relative;margin-bottom:36px}
.phases:before{content:"";position:absolute;left:12.5%;right:12.5%;top:27px;height:3px;background:var(--line)}
.phase{text-align:center;cursor:pointer;position:relative;padding:0 10px;background:none;border:0;font-family:inherit;color:inherit}
.phase .dot{width:56px;height:56px;margin:0 auto 14px;border-radius:50%;background:#fff;border:3px solid var(--line);display:grid;place-items:center;transition:.25s;color:var(--muted)}
.phase b{display:block;font-size:16px}.phase span{font-size:14px;color:var(--muted)}
.phase.on .dot{background:var(--teal);border-color:var(--teal);color:#fff;box-shadow:0 0 0 8px var(--teal-50)}
.panel{display:none;grid-template-columns:.9fr 1.3fr;gap:48px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:24px;padding:40px}
.panel.on{display:grid;animation:fade .35s}
@keyframes fade{from{opacity:0;transform:translateY(8px)}}
.panel h3{font-size:27px;letter-spacing:-.02em;margin-bottom:10px;line-height:1.2}
.panel p{color:var(--muted)}
ul.chk{list-style:none;padding:0;margin-top:20px;display:grid;gap:11px}
ul.chk li{display:flex;gap:10px;font-size:15.5px}
ul.chk li svg{color:var(--teal);width:20px;height:20px;flex:none;margin-top:2px}
.vis{background:var(--teal-50);border-radius:18px;padding:28px;display:flex;gap:16px;justify-content:center;align-items:center}
.vis img.d{border-radius:10px;box-shadow:0 20px 40px -20px rgba(0,0,0,.35)}
/* telefon-mockup: a sötét háttér kell, különben a kerekítésnél fehér csík látszik */
.vis img.m{width:38%;max-width:230px;border-radius:26px;border:6px solid var(--bezel);background:var(--bezel);box-shadow:0 0 0 2px var(--rim),0 20px 40px -20px rgba(0,0,0,.45)}
.mini{display:grid;gap:12px;width:52%}
.vis.stack{flex-direction:column;align-items:stretch}.vis.stack .mini{width:auto;grid-template-columns:repeat(3,1fr)}
.mini div{background:#fff;border-radius:14px;padding:16px}
.mini svg{color:var(--teal);margin-bottom:6px}
.mini b{display:block;font-size:15px}.mini span{font-size:13px;color:var(--muted)}

/* résztvevői app: középen egy telefon, mögötte kettő, körülötte a képernyőkből kivágott, felnagyított részletek */
.appsec{background:linear-gradient(180deg,#fff,var(--teal-50) 40%,#fff3ef);overflow:hidden}
.phone{border-radius:30px;border:6px solid var(--bezel);background:var(--bezel);box-shadow:0 0 0 2px var(--rim),0 30px 60px -28px rgba(11,27,32,.45)}
.phone img{border-radius:24px;width:100%}
.ui-stage{position:relative;height:640px;max-width:1120px;margin:24px auto 0}
.ui-stage .main{position:absolute;left:50%;top:0;width:290px;translate:-50% 0;z-index:2}
.ui-stage .side{position:absolute;width:210px;top:70px;z-index:1}.ui-stage .l{left:calc(50% - 300px)}.ui-stage .r{left:calc(50% + 90px)}
/* a kivágás --w szélességre nagyítja a kép 24..436 px-es sávját, --y/--h a sáv teteje és magassága */
.crop{--w:300px;position:absolute;z-index:3;width:var(--w);height:calc(var(--h) * var(--w) / 412);border-radius:16px;background:#fff var(--src) no-repeat;
  background-size:calc(var(--w) * 460 / 412) auto;background-position:calc(var(--w) * -24 / 412) calc(var(--y) * var(--w) / -412);
  box-shadow:0 24px 50px -20px rgba(11,27,32,.4),0 0 0 1px rgba(11,27,32,.06)}
.crop.c1{left:0;top:90px;rotate:-2deg}.crop.c2{left:30px;top:330px;rotate:1.5deg}.crop.c3{right:0;top:60px;rotate:2deg}.crop.c4{right:30px;top:380px;rotate:-1.5deg}
.appfeat{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:40px}
.appfeat div{background:#fff;border-radius:18px;padding:22px;border:1px solid var(--line)}
.appfeat svg{color:var(--teal)}
.appfeat b{display:block;margin:10px 0 4px}.appfeat span{font-size:14px;color:var(--muted)}

/* képességtábla */
table{width:100%;border-collapse:collapse;font-size:15px;background:#fff}
th,td{text-align:left;padding:15px 14px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600;background:var(--soft)}
td:first-child{font-weight:600;width:24%}
td .t{color:inherit;display:inline-block;font-size:12px;padding:2px 8px;border:1px solid var(--line);border-radius:4px;margin:2px 4px 2px 0;background:#fff}
.tablewrap{border:1px solid var(--line);border-radius:14px;overflow:hidden;overflow-x:auto}
.integ-h{margin-top:36px;font-size:18px}
.integ{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.integ span,.integ a{border:1px solid var(--line);padding:8px 12px;border-radius:8px;font-size:14px;background:#fff}
.integ a,td a.t{transition:.2s}.integ a:hover,td a.t:hover{border-color:var(--teal);color:var(--teal)}
.integ a::after{content:" ↗";color:var(--muted)}

/* referencia */
.refone{display:grid;grid-template-columns:.85fr 1.4fr;gap:40px;align-items:center}
.case{background:#fff;border:1px solid var(--teal);border-radius:18px;padding:26px 28px;box-shadow:0 18px 40px -26px rgba(10,113,128,.6)}
.refphoto{width:100%;border-radius:24px;box-shadow:0 40px 80px -30px rgba(11,27,32,.35),0 0 0 1px rgba(11,27,32,.06)}
.case h3{font-size:22px;letter-spacing:-.02em;margin:12px 0 6px}
.case p{color:var(--muted);font-size:16px}
.chipr{display:flex;flex-wrap:wrap;gap:6px}
.chipr span{font-size:12px;font-weight:600;padding:3px 9px;border-radius:99px;background:var(--teal-50);color:var(--teal)}
.chipr span.yr{background:var(--soft);color:var(--muted)}

/* bizalom */
.trust{display:flex;align-items:center;gap:28px;padding:26px 32px;margin-bottom:16px;border-radius:14px;background:var(--teal-50);border:1px solid #c9e6e8}
.trust strong{font-size:56px;line-height:1;font-weight:800;letter-spacing:-.03em;color:var(--teal)}
.trust b{display:block;font-size:20px;margin-bottom:4px}.trust span{color:var(--muted)}
.sec-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.sec-grid div{background:#fff;padding:24px}
.sec-grid svg{color:var(--teal)}
.sec-grid b{display:block;margin:12px 0 4px}.sec-grid span{font-size:14px;color:var(--muted)}

/* CTA-űrlap */
.ctaform{background:var(--navy);color:#fff;padding:64px 0}
.ctaform .wrap{display:grid;grid-template-columns:1.2fr 1fr;gap:56px;align-items:center}
.ctaform p{color:#b5cadb;font-size:17px;margin-top:12px}
.ctaform form{display:grid;grid-template-columns:1fr 1fr;gap:12px;position:relative}
.ctaform input,.ctaform select{padding:13px 14px;border:1px solid #2f5866;background:#14394a;color:#fff;border-radius:8px;font:inherit;min-width:0}
.ctaform input::placeholder,.ctaform select:invalid{color:#8fb0bd}
.ctaform option{color:var(--ink);background:#fff}
.ctaform select{appearance:none;-webkit-appearance:none;padding-right:40px;background:#14394a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%238fb0bd' stroke-width='2'%3E%3Cpath d='m1 1 5 5 5-5'/%3E%3C/svg%3E") no-repeat right 16px center;cursor:pointer}
.ctaform .full{grid-column:span 2;justify-content:center}
.ctaform .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.ctaform .note{margin:0;font-size:13px;color:#8fb0bd}
.ctaform .status{margin:0;font-size:15px;color:#fff;min-height:1.5em}
.ctaform .status.err{color:#ffb4a8}
.ctaform input:invalid.touched,.ctaform select:invalid.touched{border-color:#ff8a78}
.ctaform button:disabled{opacity:.6;cursor:wait}

footer{padding:32px 0;font-size:14px;color:var(--muted)}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer a:hover{color:var(--ink)}

/* keskeny desktopon a menü szorosabb, hogy a CTA-gomb kiférjen */
@media(max-width:1100px){nav .wrap{gap:20px}nav ul{gap:16px}}
@media(min-width:901px) and (max-width:1150px){.crop{--w:250px}}
@media(max-width:900px){
 nav ul,.top,.logo small{display:none}
 nav .wrap{gap:12px}
 .lang{margin-left:auto}
 nav .btn{padding:10px 14px;font-size:14px}
 section{padding:72px 0}
 .hero{padding-top:56px}
 .trust{flex-direction:column;align-items:flex-start;gap:12px}
 .aud .wrap,.panel.on,.appfeat,.ctaform .wrap,.sec-grid,.refone{grid-template-columns:1fr}
 .aud .wrap>div{padding:18px 0;border-right:0;border-bottom:1px solid var(--line)}
 .phases{grid-template-columns:1fr 1fr;gap:24px}.phases:before{display:none}
 .panel{padding:24px}
 .vis{padding:20px}
 .ui-stage{height:auto;display:grid;gap:14px;justify-items:center}.ui-stage .main{position:relative;left:auto;translate:none;width:min(260px,70vw);margin-bottom:10px}
 .ui-stage .side{display:none}.crop{--w:min(340px,86vw);position:relative;left:auto!important;right:auto!important;top:auto!important;rotate:0deg!important}
 .appfeat{grid-template-columns:1fr 1fr}
 .ctaform form{grid-template-columns:1fr}.ctaform .full{grid-column:auto}
 table{font-size:13px}
 .vis.stack .mini{grid-template-columns:1fr}
}
@media(max-width:520px){
 .appfeat{grid-template-columns:1fr}
 /* képességtábla mobilon: soronként egy kártya */
 .tablewrap thead{display:none}
 .tablewrap tr{display:block;padding:14px 16px;border-bottom:1px solid var(--line)}.tablewrap tr:last-child{border:0}
 .tablewrap td{display:block;border:0;padding:3px 0;width:auto}
 td:first-child{width:auto;font-size:15px}
 .vis .mini{width:auto}
 .vis:has(.mini):not(.stack){flex-direction:column;align-items:stretch}.vis:has(.mini):not(.stack) img.m{align-self:center;width:60%}
}
@media(max-width:420px){nav .btn{display:none}}
/* széles képernyőn a balra zárt címek egy sorban maradnak */
@media(min-width:1101px){.head2 h2,.ctaform h2{white-space:nowrap}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.panel.on{animation:none}}