/* Rólam - design_handoff_rolam, 2026-10. Csak a saját elemek (.st-ro-); a közös alap az st-base.css. */
.st-ro .st-ro-col{display:flex;flex-direction:column;gap:36px}
.st-ro .st-ro-col-40{gap:40px}
.st-ro .st-ro-head{display:flex;flex-direction:column;gap:10px}
.st-ro .st-ro-kick{font-family:ui-monospace,Menlo,monospace;font-size:12.5px;letter-spacing:2px;text-transform:uppercase;color:#96791c}
.st-ro .st-ro-h2{font-family:'Space Grotesk',sans-serif;font-size:clamp(34px,4vw,52px);line-height:1.05;letter-spacing:-.04em;font-weight:700;color:#1a1a1a}
.st-ro .st-ro-sec{padding:96px 24px;background:#fff}
.st-ro .st-ro-sec-dots{background-color:#FAFAF7;background-image:radial-gradient(rgba(150,121,28,.12) 1.2px,transparent 1.4px);background-size:22px 22px}
.st-ro .st-ro-sec-soft{background:#FAFAF7}
.st-ro .st-ro-sec-dots2{background-color:#fff;background-image:radial-gradient(rgba(26,26,26,.07) 1px,transparent 1.2px);background-size:22px 22px}

/* Hero */
.st-ro .st-ro-hero{position:relative;padding:96px 24px 72px;background-color:#fff;background-image:radial-gradient(rgba(26,26,26,.09) 1px,transparent 1.2px);background-size:22px 22px;overflow:hidden}
.st-ro .st-ro-hero-glow{position:absolute;right:-180px;top:-160px;width:620px;height:620px;border-radius:50%;background:radial-gradient(circle,rgba(56,189,248,.16),rgba(167,139,250,.1) 45%,transparent 70%);pointer-events:none}
.st-ro .st-ro-hero-in{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:56px;align-items:center}
.st-ro .st-ro-hero-txt{display:flex;flex-direction:column;gap:24px;align-items:flex-start;min-width:0}
.st-ro .st-ro-h1{font-family:'Space Grotesk',sans-serif;font-size:clamp(44px,5.6vw,80px);line-height:1.14;letter-spacing:-.045em;font-weight:700;color:#1a1a1a;text-wrap:balance}
.st-ro .st-ro-p1{font-size:19px;line-height:1.6;max-width:560px;color:#3d3d3d;text-wrap:pretty}
.st-ro .st-ro-p2{font-size:17px;line-height:1.6;max-width:560px;color:#5c5a52;text-wrap:pretty}
.st-ro .st-ro-p2 strong{color:#96791c;font-weight:600}
.st-ro .st-ro-social{display:flex;gap:10px}
.st-ro .st-ro-social a{width:46px;height:46px;border-radius:50%;background:#fff;border:1px solid rgba(150,121,28,.25);display:flex;align-items:center;justify-content:center;color:#1a1a1a;transition:background .2s ease}
.st-ro .st-ro-social a:hover{background:#FAFAF7;color:#96791c}
.st-ro .st-ro-photo{position:relative;max-width:520px;width:100%;justify-self:center}
.st-ro .st-ro-photo-frame{position:relative;aspect-ratio:1/1;border-radius:28px;overflow:hidden;background:#FAFAF7;border:1px solid rgba(150,121,28,.15);box-shadow:0 30px 70px rgba(20,20,20,.12)}
.st-ro .st-ro-photo-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.st-ro .st-ro-badge{position:absolute;right:-18px;bottom:-18px;width:120px;height:120px;filter:drop-shadow(0 14px 24px rgba(20,20,20,.22));animation:stFloat 5s ease-in-out infinite}
.st-ro .st-ro-badge img{width:120px;height:120px;object-fit:contain}
.st-ro .st-ro-lang{position:absolute;left:-22px;top:34px;background:#fff;border:1px solid rgba(150,121,28,.18);border-radius:16px;box-shadow:0 16px 36px rgba(20,20,20,.1);padding:12px 16px;display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:#1a1a1a;animation:stFloat 6s ease-in-out infinite 1s}
.st-ro .st-ro-lang span{width:10px;height:10px;border-radius:50%;background:#2ecc71}

/* Számok */
.st-ro .st-ro-nums-sec{padding:0 24px 96px;background:#fff}
.st-ro .st-ro-nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.st-ro .st-ro-num{position:relative;overflow:hidden;border-radius:24px;background:#FAFAF7;border:1px solid rgba(150,121,28,.15);padding:28px;display:flex;flex-direction:column;gap:6px;min-height:170px;justify-content:flex-end}
.st-ro .st-ro-num-dark{background:#12121e;border-color:#12121e}
.st-ro .st-ro-num-bar{position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#ff6b4a,#f7b733,#5eead4,#38bdf8,#a78bfa,#ff6b4a);background-size:200% 100%;animation:stRainbow 8s linear infinite}
.st-ro .st-ro-num-n{font-size:clamp(44px,4.6vw,60px);font-weight:700;letter-spacing:-.05em;line-height:1;color:#1a1a1a}
.st-ro .st-ro-num-dark .st-ro-num-n{color:#fff}
.st-ro .st-ro-num-mg{background:linear-gradient(100deg,#ff2ea6,#d946ef,#8b5cf6);-webkit-background-clip:text;background-clip:text;color:transparent}
.st-ro .st-ro-num-d{font-size:15px;color:#5c5a52}
.st-ro .st-ro-num-dark .st-ro-num-d{color:#b7b2a2}

/* Szakterületek */
.st-ro .st-ro-areas{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.st-ro .st-ro-area-big{grid-column:span 3;grid-row:span 2;position:relative;overflow:hidden;border-radius:24px;background:#fff;border:1px solid rgba(150,121,28,.15);padding:34px;display:flex;flex-direction:column;gap:14px;min-height:340px}
.st-ro .st-ro-area-bar{position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(90deg,#ff6b4a,#f7b733,#5eead4,#38bdf8,#a78bfa,#ff6b4a);background-size:200% 100%;animation:stRainbow 8s linear infinite}
.st-ro .st-ro-area-glow{position:absolute;right:-90px;top:-90px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(56,189,248,.2),rgba(167,139,250,.12) 45%,transparent 70%)}
.st-ro .st-ro-ico{width:50px;height:50px;flex-shrink:0;border-radius:14px;display:flex;align-items:center;justify-content:center;position:relative}
.st-ro .st-ro-ico-big{width:56px;height:56px;border-radius:16px}
.st-ro .st-ro-ico-rb{background:linear-gradient(135deg,#ff6b4a,#f7b733 40%,#38bdf8 75%,#a78bfa)}
.st-ro .st-ro-ico-or{background:linear-gradient(135deg,#f7b733,#ff6b4a)}
.st-ro .st-ro-ico-mk{background:linear-gradient(135deg,#ff2ea6,#8b5cf6)}
.st-ro .st-ro-area-t{position:relative;margin-top:auto;font-size:clamp(26px,2.6vw,34px);font-weight:700;letter-spacing:-.03em;line-height:1.1;color:#1a1a1a}
.st-ro .st-ro-area-d{position:relative;font-size:16px;line-height:1.6;color:#5c5a52;max-width:460px}
.st-ro .st-ro-area{grid-column:span 3;border-radius:24px;background:#fff;border:1px solid rgba(150,121,28,.15);padding:28px;display:flex;gap:18px;align-items:flex-start}
.st-ro .st-ro-area-mk{position:relative;overflow:hidden;background:linear-gradient(150deg,#2a0f4a,#12121e 75%);border-color:transparent;color:#fff}
.st-ro .st-ro-area-txt{display:flex;flex-direction:column;gap:6px}
.st-ro .st-ro-area-st{font-size:20px;font-weight:700;color:#1a1a1a;letter-spacing:-.02em;line-height:1.3}
.st-ro .st-ro-area-mk .st-ro-area-st{color:#fff}
.st-ro .st-ro-area-sd{font-size:15px;line-height:1.6;color:#5c5a52}
.st-ro .st-ro-area-mk .st-ro-area-sd{color:#c9bfe6}

/* Certifikációk */
.st-ro .st-ro-certs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.st-ro .st-ro-cert{border-radius:22px;background:#FAFAF7;border:1px solid rgba(150,121,28,.15);padding:24px;display:flex;flex-direction:column;gap:14px;color:#3d3d3d}
.st-ro a.st-ro-cert{transition:transform .2s ease}
.st-ro a.st-ro-cert:hover{transform:translateY(-3px)}
.st-ro .st-ro-cert img{width:56px;height:56px;object-fit:contain}
.st-ro .st-ro-cert-ico{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.st-ro .st-ro-cert-t{font-size:16px;font-weight:700;color:#1a1a1a;line-height:1.3}
.st-ro .st-ro-cert-d{font-size:14px;color:#7a7a7a}

/* Amit ígérek */
.st-ro .st-ro-promise{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:56px;align-items:center}
.st-ro .st-ro-promise-l{display:flex;flex-direction:column;gap:28px}
.st-ro .st-ro-list{display:flex;flex-direction:column;gap:10px}
.st-ro .st-ro-item{display:flex;gap:16px;align-items:flex-start;border-radius:18px;background:#fff;border:1px solid rgba(150,121,28,.14);padding:18px 20px}
.st-ro .st-ro-tick{width:30px;height:30px;flex-shrink:0;border-radius:50%;display:flex;align-items:center;justify-content:center}
.st-ro .st-ro-item-t{font-size:17px;font-weight:700;color:#1a1a1a}
.st-ro .st-ro-item-d{font-size:15px;color:#5c5a52;line-height:1.55}
.st-ro .st-ro-photo2{position:relative;max-width:500px;width:100%;justify-self:center;padding-bottom:40px}
.st-ro .st-ro-photo2-frame{background:#fff}
.st-ro .st-ro-photo2-frame img{object-position:50% 18%}
.st-ro .st-ro-pills{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:max-content;max-width:calc(100% - 16px);display:flex;flex-wrap:wrap;justify-content:center;gap:8px;background:#fff;border:1px solid rgba(150,121,28,.18);border-radius:22px;padding:10px 12px;box-shadow:0 18px 40px rgba(20,20,20,.12)}
.st-ro .st-ro-pills span{font-size:13px;font-weight:700;color:#fff;padding:7px 12px;border-radius:999px;white-space:nowrap}
.st-ro .st-ro-pill-1{background:linear-gradient(135deg,#ff2ea6,#d946ef)}
.st-ro .st-ro-pill-2{background:linear-gradient(135deg,#d946ef,#8b5cf6)}
.st-ro .st-ro-pill-3{background:linear-gradient(135deg,#6d28d9,#2a0f4a)}

/* Az út */
.st-ro .st-ro-path{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:14px}
.st-ro .st-ro-step{position:relative;border-radius:22px;background:#fff;border:1px solid rgba(150,121,28,.15);padding:24px;display:flex;flex-direction:column;gap:10px;overflow:hidden}
.st-ro .st-ro-step-now{background:#12121e;border-color:#12121e}
.st-ro .st-ro-step-bar{position:absolute;top:0;left:0;right:0;height:5px}
.st-ro .st-ro-step-bar-mg{background:linear-gradient(90deg,#ff2ea6,#d946ef,#8b5cf6)}
.st-ro .st-ro-step-y{font-family:ui-monospace,Menlo,monospace;font-size:14px;font-weight:600}
.st-ro .st-ro-step-y-now{display:flex;align-items:center;gap:8px;color:#f0abfc}
.st-ro .st-ro-step-y-now span{width:8px;height:8px;border-radius:50%;background:#2ecc71}
.st-ro .st-ro-step-t{font-size:18px;font-weight:700;color:#1a1a1a;line-height:1.25}
.st-ro .st-ro-step-now .st-ro-step-t{color:#fff}
.st-ro .st-ro-step-d{font-size:14.5px;color:#5c5a52;line-height:1.55}
.st-ro .st-ro-step-now .st-ro-step-d{color:#c9c6bd}

/* Kezdjük el */
.st-ro .st-ro-cta-sec{padding:24px 24px 110px;background:#fff}
.st-ro .st-ro-cta{position:relative;border-radius:32px;background:#12121e;overflow:hidden;padding:clamp(40px,6vw,72px) 32px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px}
.st-ro .st-ro-cta-bar{position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(90deg,#ff6b4a,#f7b733,#5eead4,#38bdf8,#a78bfa,#ff6b4a);background-size:200% 100%;animation:stRainbow 8s linear infinite}
.st-ro .st-ro-cta-g1{position:absolute;left:-140px;bottom:-200px;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle,rgba(56,189,248,.22),transparent 70%)}
.st-ro .st-ro-cta-g2{position:absolute;right:-140px;top:-200px;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle,rgba(217,70,239,.24),transparent 70%)}
.st-ro .st-ro-cta-k{position:relative;font-family:ui-monospace,Menlo,monospace;font-size:12.5px;letter-spacing:2px;text-transform:uppercase;color:#f7b733}
.st-ro .st-ro-cta-h{position:relative;font-family:'Space Grotesk',sans-serif;font-size:clamp(36px,4.6vw,60px);line-height:1.04;letter-spacing:-.04em;font-weight:700;color:#fff}
.st-ro .st-ro-cta-p{position:relative;font-size:18px;line-height:1.6;color:#c9c6bd;max-width:580px;text-wrap:pretty}
.st-ro .st-ro-cta-btn{position:relative;margin-top:8px;font-size:16px;font-weight:600;color:#12121e;background:#fff;padding:15px 28px;border-radius:999px;transition:transform .2s ease}
.st-ro .st-ro-cta-btn:hover{color:#12121e;transform:translateY(-2px)}

@media (max-width:900px){
	.st-ro .st-ro-nums,.st-ro .st-ro-areas,.st-ro .st-ro-certs{grid-template-columns:1fr}
	.st-ro .st-ro-nums>*,.st-ro .st-ro-areas>*,.st-ro .st-ro-certs>*{grid-column:1/-1;grid-row:auto}
}
@media (max-width:600px){
	.st-ro .st-ro-hero,.st-ro .st-ro-nums-sec,.st-ro .st-ro-sec,.st-ro .st-ro-cta-sec{padding-left:16px;padding-right:16px}
	.st-ro .st-ro-hero{padding-top:56px}
	.st-ro .st-ro-sec{padding-top:72px;padding-bottom:72px}
	.st-ro .st-ro-photo{max-width:calc(100% - 24px)}
	.st-ro .st-ro-lang{left:-10px}
	.st-ro .st-ro-badge{right:-10px;width:96px;height:96px}
	.st-ro .st-ro-badge img{width:96px;height:96px}
	.st-ro .st-ro-area-big{padding:26px}
	.st-ro .st-ro-cta{padding:44px 22px}
}