/* ==========================================================================
   Orin Group — home page stylesheet (brand family)
   Every value is measured from the live Framer site at 1440px (10 Sep 2026)
   and verified by spec/diff.py. Do not round or "tidy" numbers: they are
   the design. Responsive rules live at the bottom.
   ========================================================================== */


*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scrollbar-gutter:stable}   /* keep room for a scrollbar on every page, so short pages (Events) do not shift the centred menu bar */
body{margin:0;background:#000;color:#000;font:12px/normal sans-serif;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
p,h1,h2,h3,h4,ul,ol,figure{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;border:0;background:none;padding:0;cursor:pointer;color:inherit}
.skip{position:absolute;left:-9999px}
.vh{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important}   /* text for screen readers only */
.skip:focus{left:8px;top:8px;background:#fff;color:#000;padding:8px 12px;z-index:100}

/* --- page root ----------------------------------------------------------- */
#main{display:flex;flex-direction:column;align-items:center;min-height:100vh;background:#000;width:100%}
.band{width:100%;display:flex;flex-direction:column;align-items:center;flex:0 0 auto}

.h-sec{width:100%;font:500 35px/42px "Clash Grotesk",sans-serif;color:#fff;text-align:center;white-space:pre-wrap}
#partnerek .h-sec,#tapasztalat .h-sec,#lokáció .h-sec{color:#000}

/* --- header (fixed) ------------------------------------------------------ */
.site-header{position:fixed;top:10px;left:50%;transform:translateX(-50%);width:min(1200px,calc(100% - 20px));height:70px;z-index:50}
.site-header nav{display:flex;justify-content:space-between;align-items:center;height:70px;padding:15px;
  background:rgba(0,0,0,.7);border-radius:10px;backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px)}
.logo-box{display:flex;align-items:center;height:40px;padding-right:12px}
.logo{font:400 21px/25.2px "Clash Grotesk",sans-serif;color:#fff;white-space:pre}
.logo a{display:inline}
.logo b{font-weight:600}
.nav-mid{flex:1 0 0;display:flex;align-items:center;gap:12px;height:40px}
.nav-mid::before{content:"";flex-shrink:0;width:1px;height:22px;margin-right:1px;image-rendering:pixelated;background-size:100% 100%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 22' overflow='visible'%3E%3Cpath d='M 0 0 L 1 0 L 1 22 L 0 22 Z' fill='rgba(255, 255, 255, 0.18)'/%3E%3C/svg%3E")}
.nav-list{display:flex;align-items:center;gap:20px;height:40px}
.nav-list>li{display:flex;flex-direction:column;justify-content:center;height:40px;white-space:pre}
.nav-list p{font:400 16px/16px "Geist",sans-serif;letter-spacing:-.2px;color:#D4D4D4;text-align:left}
.nav-list a{color:#fff}
.nav-list>li:first-child p{letter-spacing:-.16px}
.nav-list .has-menu{flex-direction:row;align-items:center;gap:7px}
.nav-list .has-menu .nav-p{color:#fff}
.nav-list .has-menu img{width:10px;height:14px;object-fit:cover}
.nav-list .has-menu{position:relative}
/* Tech stack hover menu — measured: 340px panel 3px under the bar, centred on the item */
.tech-menu{position:absolute;top:55px;left:182.9px;padding-top:18px;width:340px;visibility:hidden;--o:0;--t:0s;z-index:60}
/* the panel lives outside the blurred nav bar (as on live) so its own backdrop blur sees the page */
/* opens on the 0.4 s / bounce .2 spring, closes instantly (as live) */
.site-header:has(.has-menu[data-menu="tech"]:hover) .tech-menu[data-menu="tech"],.site-header:has(.has-menu[data-menu="res"]:hover) .tech-menu[data-menu="res"],
.site-header[data-open="tech"] .tech-menu[data-menu="tech"],.site-header[data-open="res"] .tech-menu[data-menu="res"],
.tech-menu:hover{visibility:visible;--o:1;--t:var(--s04b-d)}
/* The fade runs on the blurred panel itself, not on its wrapper (Adam's recording, 6 Oct): a fading wrapper cuts the
   panel off from the page behind it, so the page showed through sharp until the fade ended and then the blur snapped
   in. Opens on the same 0.4 s spring, closes instantly (as live). Same for the language panel. */
.tech-menu-panel,.lang-panel{opacity:var(--o,1);transition:opacity var(--t,0s) var(--s04b-e)}
/* the menu item is a button (click/tap/keyboard), styled exactly as the old label + chevron */
.nav-list .menu-btn{display:flex;align-items:center;gap:7px;height:40px;padding:0;border:0;background:none;font:inherit;color:inherit;cursor:pointer}
.nav-list .menu-btn:focus-visible{outline:2px solid #fff;outline-offset:4px;border-radius:4px}
.nav-list .menu-btn img{transition:transform .2s}
.nav-list .menu-btn[aria-expanded="true"] img{transform:rotate(180deg)}

.tech-menu-panel{display:flex;flex-direction:column;gap:12px;padding:20px;background:rgba(0,0,0,.7);border-radius:10px;backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px)}
.tech-menu .menu-label{font:400 13px/19.5px "Geist",sans-serif;letter-spacing:-.13px;color:#8F8F91;white-space:pre}
.menu-items{display:flex;flex-direction:column;align-items:center;gap:4px}
.menu-items li{width:300px;white-space:normal}
.menu-items a{display:flex;align-items:center;gap:10px;height:52px;padding:6px;border-radius:10px;overflow:hidden;transition:background-color .2s}
.menu-items a:hover{background:rgba(255,255,255,.1)}
.tool-ico{width:40px;height:40px;border-radius:8px;flex:0 0 auto}
.tool-txt{display:flex;flex-direction:column;overflow:hidden}
.tool-name{font:400 16px/19.2px "Inter",sans-serif;color:#fff}
.tool-desc{font:400 13px/19.5px "Geist",sans-serif;color:#8E8D92}
.nav-cta{display:flex;align-items:center;gap:6px;height:40px}
.nav-cta a{display:flex;justify-content:center;align-items:center;gap:10px;height:40px;padding:0 12px;background:#fff;border-radius:8px}
.nav-cta p{font:400 16px/32px "Geist",sans-serif;letter-spacing:-.2px;color:#000;text-align:center;white-space:pre}
.nav-row{display:contents}
/* EN/HU switcher (live /kezdolap "HU ⌄"): button in the nav, panel outside the blurred bar like the Tech menu */
.lang-btn{display:flex;align-items:center;height:32px;padding:0 6px 0 12px;border:0;border-radius:8px;background:rgba(255,255,255,0);cursor:pointer;transition:background-color var(--s04b-d) var(--s04b-e)}
.nav-cta .lang-btn p{font:500 16px/32px "Geist",sans-serif;letter-spacing:-.2px;color:#fff}
.lang-btn .chev{width:25px;height:25px;display:block;fill:none;stroke:#fff;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.lang-menu{position:absolute;top:51px;right:.1px;padding-top:22px;width:196px;visibility:hidden;--o:0;--t:0s;z-index:60}
.site-header:has(.lang-btn:hover) .lang-menu,.site-header[data-open="lang"] .lang-menu,.lang-menu:hover,.lang-menu:focus-within{visibility:visible;--o:1;--t:var(--s04b-d)}
.lang-btn:hover,.lang-btn:focus-visible{background:rgba(255,255,255,.19)}
.lang-panel{display:flex;flex-direction:column;gap:6px;padding:10px;background:rgba(0,0,0,.7);border-radius:10px;backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);box-shadow:0 10px 20px rgba(0,0,0,.05)}
.lang-panel a{display:block;height:32px;padding:0 10px;border-radius:5px;transition:background-color .2s}
.lang-panel a:hover,.lang-panel a:focus-visible{background:rgba(255,255,255,.1)}
.lang-panel p{font:500 16px/32px "Geist",sans-serif;letter-spacing:-.2px;color:#fff;white-space:pre}
.nav-menu-lang{display:none}
   /* Arapey has no ő ű (DECISIONS 10 Sep) */
.nav-toggle{display:none}
.nav-menu{display:none}

/* --- hero + experience band --------------------------------------------- */
#hero-band{background:#121212;overflow:hidden}
.hero{position:relative;width:100%;height:599px;display:flex;flex-direction:column;align-items:center;gap:40px;padding:200px 0 155px;overflow:hidden}
.hero-bg{position:absolute;inset:0;width:100%;height:599px;object-fit:cover}
/* load glitch (Adam, 14 Oct): until the large hero image is decoded the hero was black for a frame and the glass button
   turned grey; this gradient (sampled from the image: #19184e / #4746ac / #2b3061) stands in for it. The button's 69 px
   backdrop blur also left a lighter patch while the headline animated (Chrome); over this soft image the blur adds
   nothing visible, so the hero button drops it */
.hero{background:#19184e linear-gradient(90deg,#19184e 0%,#4746ac 55%,#2b3061 100%)}
.hero .btn-glass{backdrop-filter:none;-webkit-backdrop-filter:none}
.hero h1{position:relative;width:780.19px;display:flex;flex-direction:column;text-align:center;color:#fff;white-space:pre;
  font:600 57px/62.7px "Clash Grotesk",sans-serif}
.hero>*{flex:0 0 auto}
.hero h1>span{display:block}
.hero h1 .light{font-weight:400}
.hero .sub{position:relative;font:500 16px/17.6px "Geist",sans-serif;color:#fff;text-align:center;white-space:pre}
.hero .cta-row{position:relative;width:100%;display:flex;justify-content:center;align-items:center;gap:15px;height:40px;overflow:hidden}
.btn-glass{display:flex;justify-content:center;align-items:center;gap:24px;height:40px;padding:0 10px;border-radius:10px;
  background:rgba(255,255,255,.3);backdrop-filter:blur(69px);-webkit-backdrop-filter:blur(69px);overflow:hidden;
  color:#fff}
.btn-glass p{position:relative;font:500 15px/16.5px "Clash Grotesk",sans-serif;color:#fff;white-space:pre}
/* hover: a 17px arrow fades in 13px to the right of the label; the label itself does not move */
.btn-glass .arr{position:absolute;left:100%;top:50%;width:17px;height:17px;margin:-8.5px 0 0 13px;fill:#fff;opacity:0}
/* hover (measured on live): the label re-centres with the arrow (shift = (17+13)/2) on a 0.4 s / bounce .2 spring;
   the arrow sits still at its final spot (counter-moves inside the label) and fades in on the same spring;
   on leave the arrow vanishes at once and the label springs back */
.btn-glass p,.btn-glass .arr{transition:transform var(--s04b-d) var(--s04b-e)}
.btn-glass .arr{transform:translateX(-15px)}
.btn-glass:hover p{transform:translateX(-15px)}
.btn-glass:hover .arr{transform:none;opacity:1;transition:transform var(--s04b-d) var(--s04b-e),opacity var(--s04b-d) var(--s04b-e)}
.hero .btn-glass{width:auto;padding:0 30px}   /* label + 30 px each side (EN = 183 px as live); room for the 15 px hover shift + arrow in any language */

.exp-band{width:1000px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:70px;padding:100px 0 0;overflow:hidden}
.exp-band .h-exp{font:500 35px/56px "Clash Grotesk",sans-serif;letter-spacing:-.7px;color:#fff;white-space:pre}
.logo-row{width:1000px;display:flex;justify-content:center;align-items:center;gap:90px;overflow:hidden}
.logo-row img{object-fit:contain;flex:0 0 auto}
.exp-lead{width:705px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;padding:100px 0 0;overflow:hidden}
.exp-lead p{font:500 35px/42px "Clash Grotesk",sans-serif;color:#fff;text-align:center;white-space:pre-wrap}

/* --- section shells ------------------------------------------------------ */
.sec{width:100%;display:flex;flex-direction:column;align-items:center;flex:0 0 auto}
.sec-head{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}

/* --- services ------------------------------------------------------------ */
#szolgaltatasok{gap:70px;padding:100px 0 0;background:#121212}
.svc-row{width:1025px;display:flex;justify-content:center;align-items:center;gap:10px}
.svc-row .carousel-track{display:flex;justify-content:center;align-items:center;gap:10px;overflow:visible;-webkit-mask-image:none;mask-image:none;scroll-snap-type:none}
.svc-row .carousel-nav{display:none}
.svc{width:335px;height:587px;display:flex;flex-direction:column;gap:40px;padding:30px;border-radius:20px;background:#1061FF;color:#fff}
.svc-white{background:#fff;color:#000}
.svc-head{display:flex;flex-direction:column;gap:15px}
.svc-head>div{display:flex;flex-direction:column}
.svc h3{font:600 21px/25.2px "Clash Grotesk",sans-serif;white-space:pre-wrap;letter-spacing:-.2px}   /* E7: "Go-to-Market" (one unbreakable word once the letters are split for the animation) is ~4 px wider than the card; -.2px keeps the title on one line as before */
.svc .svc-lead{font:400 19px/22.8px "Clash Grotesk",sans-serif;white-space:pre-wrap}
.svc-white .svc-lead{color:#5E5E5E}
.svc ul{display:flex;flex-direction:column;justify-content:center;gap:10px;align-items:flex-start}
.svc li{display:flex;align-items:center;gap:10px;padding:10px 15px;border-radius:10px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.32);   /* S1 option B (Adam, 14 Oct): frosted glass (was #266CF9, 1.1:1 against the card). Tint .07 keeps white text at 4.5:1 (AA; .12 as previewed was 4.2:1), the hairline .32 carries the outline */
  font:400 14px/16.8px "Geist",sans-serif;white-space:pre}   /* N10 (Adam, 13 Oct): Geist, was Archivo (2 font files less) */
.svc li>div{display:flex;flex-direction:column}
.svc-white li{background:#F4F5F7;box-shadow:inset 0 0 0 1px #E1E4EA}   /* S1 option W2 (Adam, 14 Oct): light grey + hairline (was #DBDBDB) */
.svc li strong{font-weight:700}

/* --- team ---------------------------------------------------------------- */
#rolunk{gap:70px;padding:100px 0 0;background:#121212;justify-content:center}
.carousel{position:relative}
.carousel-frame{display:flex;padding:10px;overflow:hidden}
/* Framer Carousel, reproduced: edge fades (25 %) whose opacity springs (stiffness 500, damping 60)
   between "at the edge" (no fade, arrow hidden) and "more to scroll" (fade, arrow shown) */
@property --fs{syntax:'<number>';inherits:true;initial-value:1}
@property --fe{syntax:'<number>';inherits:true;initial-value:0}
.carousel-track{display:flex;flex:1 1 100%;overflow-x:auto;scrollbar-width:none;--fs:1;--fe:0;
  transition:--fs var(--edge-d) var(--edge-e),--fe var(--edge-d) var(--edge-e);
  -webkit-mask-image:linear-gradient(to right,rgba(0,0,0,var(--fs)) 0%,#000 12.5%,#000 87.5%,rgba(0,0,0,var(--fe)) 100%);
  mask-image:linear-gradient(to right,rgba(0,0,0,var(--fs)) 0%,#000 12.5%,#000 87.5%,rgba(0,0,0,var(--fe)) 100%)}
.carousel-track::-webkit-scrollbar{display:none}
.carousel-track>li{flex:0 0 auto}
#process-carousel .carousel-track{scroll-snap-type:x mandatory}
#process-carousel .carousel-track>li{scroll-snap-align:center}
.carousel-nav{position:absolute;inset:0;display:flex;justify-content:space-between;align-items:center;pointer-events:none}
.carousel-nav button{pointer-events:auto;display:flex;justify-content:center;align-items:center;transition:opacity var(--edge-d) var(--edge-e),transform .05s}
.carousel-nav button.off{opacity:0;pointer-events:none}
.carousel-nav button:active{transform:scale(.9)}
#team-carousel{width:1060px}
#team-carousel .carousel-track{gap:26px;align-items:flex-start}
#team-carousel .carousel-nav{padding:19px}
#team-carousel .carousel-nav button{width:50px;height:50px;border-radius:57px;background:#1061FF}
#team-carousel .carousel-nav img{width:50px;height:50px;object-fit:cover}

.badge{display:flex;align-items:center;gap:6px;padding:8px 10px;border-radius:50px;white-space:pre;
  background:linear-gradient(89deg,rgb(60,61,183) 0%,rgb(139,132,186) 100%);font:600 13px/13px "Geist",sans-serif;letter-spacing:-.65px;color:#fff}
.badge svg{width:13px;height:13px;fill:#fff;display:block}
.badge p{font:inherit;letter-spacing:inherit;color:inherit}

.item-head{display:flex;justify-content:center;gap:6px}

.item-head svg{width:16px;height:25px;flex:0 0 auto;fill:#999;display:block}
.item-head h5{flex:1 0 0;margin:0;font:500 18px/25.2px "Inter",sans-serif;color:#E6E6E6;white-space:pre-wrap}
.item-body{display:flex;align-items:center;gap:10px;padding-left:22px}
.item-body p{flex:1 0 0;font:300 16px/22.4px "Inter",sans-serif;color:#999;white-space:pre-wrap}

/* --- tech stack ---------------------------------------------------------- */
#technológia{gap:70px;padding:100px 0 0;background:#121212;justify-content:center}
.tech-groups{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}
.tech-title{width:100%;display:flex;justify-content:center;align-items:center;padding:20px 0}
.ticker-frame+.tech-title{padding:50px 0 20px}
.tech-title>div{flex:1 0 0;height:23px}
.tech-title h3{font:600 16px/17.6px "Geist",sans-serif;color:#969696;text-align:center;white-space:pre-wrap}
.ticker-frame{display:contents}
.ticker-set,.tech-logos>.ticker-set{display:contents}
.ticker-clone,.tech-logos>.ticker-clone{display:none}
.tech-logos{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0 20px}
.tech-logos.wide{width:800px}
.tech-logos img,.tech-logos svg{display:block;flex:0 0 auto}

/* --- how we work --------------------------------------------------------- */
#igydolgozunk{gap:50px;padding:100px 0 54px;background:#121212;justify-content:center}
.process-wrap{width:100%;display:flex;justify-content:center;align-items:center;gap:10px;padding:50px 0 20px}
#process-carousel{width:1200px;max-width:100%}
#process-carousel .carousel-frame{padding:20px}
#process-carousel .carousel-track{gap:10px;align-items:flex-start}
#process-carousel .carousel-nav{padding:20px}
#process-carousel .carousel-nav button{width:40px;height:40px;border-radius:40px;background:rgba(0,0,0,.2)}
#process-carousel .carousel-nav img{width:40px;height:40px;object-fit:cover}
.step{position:relative;width:350px;min-height:350px;display:flex;flex-direction:column;gap:60px;padding:40px;border-radius:15px;overflow:hidden}
.step-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:15px}
.step-head{position:relative;display:flex;flex-direction:column;justify-content:center;gap:4px}
.step-n{height:18px;align-self:flex-start}
.step-n p{font:600 13px/14.3px "Geist",sans-serif;color:#fff;text-align:center;white-space:pre}
.step h3{font:600 21px/25.2px "Geist",sans-serif;color:#fff;white-space:pre-wrap}
.step-body{position:relative;display:flex;flex-direction:column;gap:14px}
.step-body p{font:400 18px/19.8px "Geist",sans-serif;color:#ADADAD;white-space:pre-wrap}
.step-body p .hl,.step-body p strong{color:#CCC}
.step-body p strong{font-weight:700}
.step-body.multi .row{display:flex;gap:6px}
.step-body.multi .row img{flex:0 0 auto}
.step-body.multi p{flex:1 0 0;font-size:17px;line-height:18.7px}
.step-items{display:flex;flex-wrap:wrap;align-items:center;align-content:center;gap:10px;height:114px;margin-top:26px}
.step-items li{display:flex;align-items:center;gap:6px}
.step-items p{font:400 16px/17.6px "Geist",sans-serif;color:#ADADAD;white-space:pre}
.step-items img{width:22px;height:22px;object-fit:cover}

/* --- partners ------------------------------------------------------------ */
#partnerek{gap:74px;padding:100px 20px 0;background:#fff}

.tiles{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px}

.tile{width:222px;height:222px;display:flex;flex-direction:column;padding:30px;border-radius:36px;background:#1061FF;color:#fff}

.tile b{font:600 14px/18.2px "Geist",sans-serif;letter-spacing:-.56px;white-space:pre-wrap}
.tile span{display:block;font:600 13px/16.9px "Geist",sans-serif;letter-spacing:-.52px;color:rgba(255,255,255,.6);white-space:pre-wrap}

/* --- experience wall ----------------------------------------------------- */
#tapasztalat{gap:70px;padding:100px 0 0;background:#fff}
#tapasztalat .sec-head{gap:70px}
#tapasztalat .sec-head>div{width:704px}
.wall{width:1200px;display:flex;flex-direction:column;justify-content:center;align-items:center}

/* --- locations ----------------------------------------------------------- */
#lokáció{gap:70px;padding:100px 0 110px;background:#fff}
#lokáció .sec-head{gap:70px}
#lokáció .sec-head>div{width:704px}
.loc-row{display:flex;justify-content:center;align-items:center;gap:15px}
.loc{width:363px;height:394px;display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:50px;border-radius:15px;background:#F6F8FF}
.loc-text{width:263px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px}
.loc-text span,.loc-text b{width:100%}
.loc-text span{font:400 16px/19.2px "Geist",sans-serif;color:#000;text-align:center;white-space:pre-wrap}
.loc-text b{font:500 35px/42px "Geist",sans-serif;color:#000;text-align:center;white-space:pre-wrap}
.loc-art{display:block}

/* --- contact ------------------------------------------------------------- */
#kapcsolat{background:#fff;padding:50px 0;flex-direction:row;justify-content:center;align-items:center;gap:10px}

form.contact{width:360px;display:flex;flex-direction:column;gap:20px}
form.contact label{display:flex;flex-direction:column;gap:10px}
form.contact .field{display:flex;align-items:center;padding:12px;height:40px;border-radius:10px;background:rgba(187,187,187,.15)}
form.contact input,form.contact textarea{flex:1 1 0;width:100%;min-width:0;border:0;background:none;outline:0;padding:0;margin:0;
  font:400 14px/16.8px "Inter",sans-serif;color:#000;white-space:nowrap}
form.contact input::placeholder,form.contact textarea::placeholder{color:#999;opacity:1}
form.contact input{height:16px;color:#999;line-height:normal;text-overflow:ellipsis}   /* measured: matches live text placement */
form.contact textarea{color:#999}

form.contact textarea{box-sizing:border-box;padding:12px;min-height:74.39px;height:74.39px;resize:none;white-space:pre-wrap}

.consent{font:400 12px/14.4px "Geist",sans-serif;color:#A6A6A6;white-space:pre-wrap}
.consent a{text-decoration:underline}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
br.ph{display:none}
.fk{display:none}

br.desk{display:inline}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* --- footer -------------------------------------------------------------- */
.site-footer{width:100%;min-height:300px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:36px;padding:40px 70px;
  background:#121212;border-radius:10px 10px 0 0;color:#fff}
.footer-grid{width:100%;max-width:1200px;display:flex;justify-content:space-between}
.footer-brand{width:309px;display:flex;flex-direction:column;justify-content:space-between}
.footer-brand-inner{display:flex;flex-direction:column;justify-content:center;gap:30px}
.footer-id{display:flex;flex-direction:column;justify-content:center;gap:16px;align-items:center}
.footer-id>div{width:309px}
.footer-logo{font:400 20px/22px "Clash Grotesk",sans-serif;color:#fff;white-space:pre}   /* N10: Clash Grotesk, was Clash Display (2 font files less) */
.footer-logo a{display:inline}
.footer-logo b{font-weight:600}
.footer-tagline{width:280px;white-space:pre-wrap}
.footer-tagline .tl1{font:700 13px/16.9px "Geist",sans-serif}
.footer-tagline .tl1 strong{font-weight:700}   /* N10: Geist bold, was Geist Black (1 font file less) */
.footer-tagline .tl2{font:500 13px/16.9px "Geist",sans-serif}
.footer-ctas{display:flex;justify-content:center;align-items:center;gap:10px}
.footer-ctas a{display:flex;justify-content:center;align-items:center;gap:10px;padding:15px 20px;border-radius:5px}
.footer-ctas p{position:relative;font:500 14px/16.8px "Inter",sans-serif;white-space:pre;color:inherit}
.footer-ctas .arr{position:absolute;left:100%;top:50%;width:12px;height:12px;margin:-6px 0 0 10px;opacity:0;transform:translateX(-11px)}
.footer-ctas p,.footer-ctas .arr{transition:transform var(--s04b-d) var(--s04b-e)}
.footer-ctas a:hover p{transform:translateX(-11px)}
.footer-ctas a:hover .arr{transform:none}
.footer-ctas .primary .arr{fill:#171717}
.footer-ctas .secondary .arr{fill:#fff}
.footer-ctas a:hover .arr{opacity:1}
.footer-ctas .primary{width:172px;background:#fff;color:#000}
.footer-ctas .secondary{width:127px;background:rgba(255,255,255,.13);color:#fff}
.footer-cols{display:flex;align-items:flex-start;gap:20px}
.footer-col{display:flex;flex-direction:column;justify-content:center;gap:24px}
/* desktop: 21px where Framer had a hidden 1px column (+20px gap), so both columns sit exactly where they do on live */
@media (min-width:1200px){.footer-cols>.footer-col+.footer-col{margin-left:21px}}
.footer-col>div{display:flex;flex-direction:column;justify-content:center;gap:13px}
.footer-col h2{width:max-content;font:700 13px/16.9px "Geist",sans-serif;color:#fff;white-space:pre}
.footer-col ul{display:flex;flex-direction:column;justify-content:center;gap:10px}
.footer-col li{white-space:pre}
.footer-col li p{font:500 13px/16.9px "Geist",sans-serif;color:#A1A1A1}
.footer-col li a{color:#858585}
.footer-col .col-hu{width:1px;height:58px;overflow:hidden;display:flex;flex-direction:column;gap:13px}
.footer-col .col-hu h2,.footer-col .col-hu li{width:max-content}
.footer-col .col-hu h2{font-weight:600}
.footer-col .col-hu li p{font-weight:400}
.footer-col .col-hu ul{padding-top:11px}
.footer-bottom{width:100%;max-width:1200px;display:flex;justify-content:space-between}
.footer-privacy{display:flex;align-items:center;gap:10px;padding-right:10px;height:24px}
.footer-privacy svg{width:24px;height:24px;fill:#858585;display:block}
.footer-privacy p{font:500 13px/16.9px "Inter",sans-serif;color:#9A9B9C;white-space:pre}
.footer-privacy a{color:#858585}
/* "Cookie settings" next to the privacy link (A21, 14 Oct): a button that looks like the link beside it */
.ocb-sep{color:#858585}
.ocb-open{margin:0;padding:0;border:0;background:none;font:inherit;color:#858585;cursor:pointer;text-align:left}
.ocb-open:hover{text-decoration:underline}
.ocb-open:focus-visible{outline:2px solid #1061FF;outline-offset:2px;border-radius:2px}
.footer-copy{display:flex;justify-content:flex-end;align-items:center;height:17px}
.footer-copy{width:257px}
.footer-copy p{flex:1 0 0;font:500 11px/14.3px "Inter",sans-serif;color:#858585;text-align:right;white-space:pre-wrap}

/* --- hairline borders: Framer draws these on an ::after overlay (data-border), not on the box,
   so they sit on top of the content and do not change the layout. Same technique here.        */
.step,form.contact .field{position:relative}
.step::after,form.contact .field::after{content:"";position:absolute;
  top:0;left:0;width:100%;height:100%;box-sizing:border-box;border-radius:inherit;pointer-events:none;border:1px solid transparent}

.step::after{border-color:rgba(255,255,255,.1)}

form.contact .field::after{border-color:rgba(136,136,136,.1)}
   /* live: the message box has no hairline */

/* MOTION:BEGIN — generated by tools/motion_css.py from the live Framer presets; do not edit by hand */
:root{
  --s1-d:1.000s;--s1-e:linear(0,0.0165,0.0583,0.1159,0.1792,0.2496,0.3208,0.3901,0.4561,0.5178,0.5721,0.6241,0.6711,0.7132,0.7506,0.7838,0.8117,0.8375,0.8601,0.8797,0.8968,0.9116,0.9238,0.9349,0.9445,0.9527,0.9597,0.9658,0.9707,0.9751,0.9789,0.9821,0.9849,0.9872,0.9891,0.9908,0.9922,0.9934,0.9945,0.9953,0.996,0.9967,0.9972,0.9976,0.998,0.9983,0.9986,0.9988,1);
  --s13-d:1.301s;--s13-e:linear(0,0.0162,0.0572,0.1138,0.1794,0.2517,0.322,0.3906,0.4559,0.5169,0.5733,0.6246,0.6711,0.7127,0.7499,0.7839,0.8128,0.8382,0.8605,0.8799,0.8968,0.9114,0.9241,0.935,0.9445,0.9529,0.9598,0.9658,0.9709,0.9752,0.979,0.9821,0.9848,0.9872,0.9892,0.9908,0.9923,0.9935,0.9945,0.9953,0.9961,0.9967,0.9972,0.9976,0.998,0.9983,0.9986,0.9988,1);
  --s04-d:0.436s;--s04-e:linear(0,0.0188,0.0658,0.1296,0.2024,0.2785,0.3624,0.4346,0.5021,0.5642,0.6205,0.6711,0.716,0.7556,0.7904,0.8207,0.847,0.8698,0.8914,0.9079,0.9221,0.9342,0.9445,0.9532,0.9606,0.9669,0.9722,0.9767,0.9805,0.9837,0.9866,0.9888,0.9907,0.9922,0.9935,0.9946,0.9955,0.9963,0.9969,0.9974,0.9978,0.9982,0.9985,0.9988,0.999,0.9992,0.9993,0.9994,1);
  --s24-d:2.262s;--s24-e:linear(0,0.0141,0.0514,0.105,0.1696,0.2424,0.3165,0.3909,0.4635,0.5327,0.5975,0.6572,0.7115,0.7613,0.8044,0.8422,0.875,0.9031,0.9269,0.9468,0.9633,0.977,0.9877,0.9961,1.0025,1.0073,1.0107,1.013,1.0144,1.0151,1.0151,1.0148,1.0141,1.0132,1.0122,1.0111,1.01,1.0088,1.0078,1.0067,1.0058,1.0049,1.0041,1.0034,1.0028,1.0022,1.0017,1.0013,1);
  --s04b-d:0.424s;--s04b-e:linear(0,0.0184,0.0659,0.1328,0.2024,0.2864,0.372,0.4559,0.5355,0.6093,0.6692,0.7298,0.783,0.8291,0.8684,0.9014,0.926,0.9487,0.967,0.9814,0.9924,1.0007,1.006,1.0103,1.013,1.0145,1.0151,1.015,1.0145,1.0136,1.0125,1.0112,1.0099,1.0086,1.0076,1.0064,1.0053,1.0044,1.0035,1.0028,1.0022,1.0017,1.0012,1.0009,1.0006,1.0003,1.0002,1,1);
  --s045-d:0.484s;--s045-e:linear(0,0.0184,0.0644,0.1271,0.1987,0.2738,0.356,0.4276,0.4949,0.5569,0.6132,0.6639,0.7091,0.7491,0.7843,0.8151,0.8418,0.865,0.8869,0.9039,0.9185,0.9309,0.9416,0.9507,0.9584,0.9649,0.9705,0.9752,0.9792,0.9825,0.9856,0.9879,0.9899,0.9916,0.9929,0.9941,0.9951,0.9959,0.9966,0.9971,0.9976,0.998,0.9984,0.9987,0.9989,0.9991,0.9992,0.9994,1);
  --edge-d:0.714s;--edge-e:linear(0,0.0422,0.1298,0.2293,0.3264,0.4098,0.4896,0.5596,0.6204,0.673,0.7184,0.7576,0.7913,0.8186,0.8438,0.8656,0.8843,0.9004,0.9143,0.9262,0.9365,0.9448,0.9525,0.9591,0.9648,0.9697,0.9739,0.9776,0.9807,0.9832,0.9855,0.9876,0.9893,0.9908,0.9921,0.9932,0.9941,0.9949,0.9956,0.9962,0.9967,0.9972,0.9976,0.9979,0.9982,0.9984,0.9987,0.9988,1);
}
/* MOTION:END */

/* --- motion (final state is the measured state) --------------------------
   Measured on the live site: each letter/word starts at opacity 0, 10px low
   and blur(10px), eases out over ~.35s, staggered ~50ms; badge rows rise 30px,
   the form panel rises 150px. Nothing else moves except the tickers.     */
.wd{display:inline-block;white-space:pre}
.w{display:inline-block;will-change:transform}
@media (prefers-reduced-motion:no-preference){
  [data-split] .w{opacity:.001;transform:translateY(10px);filter:blur(10px);
    transition-property:opacity,transform,filter;transition-duration:var(--fx-d);transition-timing-function:var(--fx-e);
    transition-delay:calc(var(--fx-start,0s) + var(--i) * 50ms)}
  [data-split].in .w{opacity:1;transform:none;filter:blur(0)}
  /* M1 (Adam, 14 Oct, F2): headings and the experience lead no longer arrive in two waves (grey smudge, then a late
     sharpen-to-white). Blur 6px; brightness and sharpness finish together early (opacity 50%, blur 35% of the time);
     only the 10px rise keeps the long spring settle. Stagger 24ms/letter, 45ms/word (was 50ms: ~4s for the hero). h3s unchanged. */
  [data-split]:not(h3) .w{filter:blur(6px);transition-duration:calc(var(--fx-d) * .5),var(--fx-d),calc(var(--fx-d) * .35);
    transition-delay:calc(var(--fx-start,0s) + var(--i) * 24ms)}
  [data-split=words]:not(h3) .w{transition-delay:calc(var(--fx-start,0s) + var(--i) * 45ms)}
  [data-split]:not(h3).in .w{filter:none}
  [data-split].fade{opacity:0;transition:opacity .6s ease var(--fx-start,0s)}   /* N10: phones — the heading fades in whole */
  [data-split].fade.in{opacity:1}
  [data-fx="s1"]{--fx-d:var(--s1-d);--fx-e:var(--s1-e)}
  [data-fx="s13"]{--fx-d:var(--s13-d);--fx-e:var(--s13-e)}
  [data-fx="s04"]{--fx-d:var(--s04-d);--fx-e:var(--s04-e)}
  /* badge rows: opacity 0, 30px low; spring 2.4s bounce .2, delay .4s */
  [data-appear="30"]{opacity:0;transform:translateX(-50%) translateY(30px);will-change:transform;
    transition:opacity var(--s24-d) var(--s24-e) .4s,transform var(--s24-d) var(--s24-e) .4s}
  [data-appear="30"].in{opacity:1;transform:translateX(-50%)}
  /* location cards (.3s) and the form panel (.4s): 150px low, 1.8s ease (.44,0,.56,1) */
  [data-appear="150"]{opacity:0;transform:translateY(150px);will-change:transform;
    transition:opacity 1.8s cubic-bezier(.44,0,.56,1) var(--fx-start,0s),transform 1.8s cubic-bezier(.44,0,.56,1) var(--fx-start,0s)}
  [data-appear="150"].in{opacity:1;transform:none}
}

/* ==========================================================================
   Tablet · 810–1199.98px (Framer breakpoint, measured at 810 / 1000 / 1199)
   ========================================================================== */
@media (max-width:1199.98px){
  /* tablet/phone: full-width bar, sticky in the page flow as on live — the open menu pushes the page down
     instead of covering it; the next block is pulled up by the closed bar's height so nothing else moves */
  .site-header{position:sticky;top:0;left:auto;width:100%;height:90px;transform:none;flex:0 0 auto}
  .site-header+*{margin-top:-90px}
  html{scroll-padding-top:84px}   /* in-page links land below the pinned bar (G2 sweep S5, 12 Oct) */
  .tech-menu{display:none}   /* the desktop hover panel never shows below 1200 px */
  .site-header nav{flex-direction:column;height:90px;padding:25px;border-radius:0}
  .nav-row{width:100%;display:flex;justify-content:space-between;align-items:center;height:40px}
  .logo-box{padding-right:0}
  .nav-mid,.nav-cta{display:none}
  .nav-menu-list .tech-menu{display:none}
  .nav-toggle{display:flex;justify-content:center;align-items:center;gap:6px;width:24px;height:40px}
  .nav-toggle span{display:block;width:24px;height:24px;background:#fff;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M 0 0 L 16.5 0 M 0 6.75 L 16.5 6.75' fill='transparent' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' transform='translate(3.75 9)'/%3E%3C/svg%3E") center/contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M 0 0 L 16.5 0 M 0 6.75 L 16.5 6.75' fill='transparent' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' transform='translate(3.75 9)'/%3E%3C/svg%3E") center/contain no-repeat}

  .site-header{height:auto}
  .site-header nav{height:auto;min-height:90px;gap:0}
  .site-header.menu-open nav{padding-bottom:25px}
  .site-header.menu-open{max-height:100vh;max-height:100dvh;overflow-y:auto;overscroll-behavior:contain}   /* L6: landscape phones reach the last item */
  .nav-menu{display:block;width:100%}
  .nav-menu[hidden]{display:none}
  .nav-menu-inner{display:flex;flex-direction:column;gap:12px}
  .nav-menu-list{display:flex;flex-direction:column;gap:12px;padding:20px 0}
  .nav-menu-list>li{display:flex;flex-direction:column;white-space:pre}
  .nav-menu-list p{font:400 30px/30px "Geist",sans-serif;letter-spacing:-.2px;color:#D4D4D4;text-align:left}
  .nav-menu-list>li:first-child p{letter-spacing:-.3px}
  .nav-menu-list a{color:#fff}
  .nav-menu-list .has-menu{flex-direction:row;align-items:center;gap:10px}
  .nav-menu-list .has-menu .nav-p{color:#fff}
  .nav-menu-list .m-tech-btn>img{width:19px!important;height:26px!important;object-fit:cover!important}
  /* Tech stack accordion (measured on live at 390, 490, 700, 810 and 1000 px) */
  .nav-menu-list .has-menu{flex-direction:column;align-items:flex-start;gap:0}
  .m-tech-btn{display:flex;align-items:center;gap:10px;padding:0;border:0;background:none;cursor:pointer;font:inherit;color:inherit}
  .m-tech-btn img{transition:transform var(--s045-d) var(--s045-e)}
  .m-tech-btn[aria-expanded="true"] img{transform:rotate(180deg)}
  .m-tech{display:flex;flex-direction:column;padding:27px 0 20px;white-space:normal}
  .m-tech[hidden]{display:none}
  .m-tech .menu-label{font:400 17px/25.5px "Geist",sans-serif;color:#8F8F91;white-space:pre}
  .m-tech .menu-items{align-items:flex-start;gap:8px;margin:10px 0}
  .m-tech .menu-items:last-child{margin-bottom:0}
  .m-tech .menu-items li{width:300px}
  .m-tech .menu-items:first-of-type li:nth-child(-n+2),.m-tech .menu-items:last-of-type li{width:350px}
  .m-tech .tool-desc{white-space:nowrap;overflow:hidden;text-overflow:clip}
  /* long menu labels (HU "B2B Események és útmutatók") wrap instead of running off a phone screen */
  .nav-menu-list>li>p{white-space:normal}
  .nav-menu-cta{display:flex;flex-direction:column;gap:10px}
  .nav-menu-cta a{display:flex;justify-content:center;align-items:center;gap:10px;height:52px;padding:10px 12px;background:#fff;border-radius:8px}
  .nav-menu-cta p{font:400 18px/18px "Geist",sans-serif;letter-spacing:-.2px;color:#000;text-align:center;padding:7px 0}
  .lang-menu{display:none}
  .nav-menu-lang{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .nav-menu-cta .nav-menu-lang a{background:rgba(255,255,255,.26)}
  .nav-menu-cta .nav-menu-lang p{font:400 19px/19px "Geist",sans-serif;color:#C9C9C9;padding:6.5px 0}

  .hero{height:540px}
  .hero-bg{height:540px}
  .hero h1{width:684.3px;font-size:50px;line-height:55px}
  .exp-band{width:100%}
  .logo-row{width:100%;gap:59px}

  #szolgaltatasok .sec-head{padding:0 20px}
  .svc-row{width:669px;padding:10px;overflow:hidden;position:relative}
  .svc-row .carousel-track{justify-content:flex-start;gap:10px;align-items:center;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-mask-image:linear-gradient(to right,rgba(0,0,0,var(--fs)) 0%,#000 12.5%,#000 87.5%,rgba(0,0,0,var(--fe)) 100%);mask-image:linear-gradient(to right,rgba(0,0,0,var(--fs)) 0%,#000 12.5%,#000 87.5%,rgba(0,0,0,var(--fe)) 100%)}
  .svc-row .carousel-track>li{scroll-snap-align:center;scroll-snap-stop:always}
  #svc-carousel .carousel-nav{display:flex}
  .svc{height:560px;flex:0 0 auto}
  #svc-carousel .carousel-nav{padding:20px}
  #svc-carousel .carousel-nav button{width:40px;height:40px;border-radius:40px;background:rgba(0,0,0,.2)}
  #svc-carousel .carousel-nav img{width:40px;height:40px}

  #team-carousel{width:648px}

  #igydolgozunk{gap:40px;padding:100px 20px 54px}
  #igydolgozunk .sec-head{padding:0}
  .process-wrap{width:100%}
  #process-carousel{width:100%}

  .wall{width:100%}
  
  .tech-logos.wide{width:100%}
  #lokáció{padding:100px 0 90px}

  #kapcsolat{padding:0 0 50px}
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  form.contact{width:329px}
  

  .site-footer{gap:44px;padding:40px;min-height:302.4px}
  .footer-grid{width:100%;justify-content:flex-start;align-items:flex-start;gap:37px}
  .footer-brand{width:413px;justify-content:center}
  .footer-id>div{width:413px}
  .footer-ctas{justify-content:flex-start}
  .footer-cols{flex:1 0 0;justify-content:flex-end;gap:46px}
  .footer-col-hu{display:none}
  .footer-bottom{width:100%}
}

/* ==========================================================================
   Phone · up to 809.98px (Framer breakpoint, measured at 360 / 390 / 809)
   ========================================================================== */
@media (max-width:809.98px){
  .nav-menu-list{width:min(350px,calc(100vw - 32px));margin:0 0 0 calc((100% - min(350px,calc(100vw - 32px))) / 2);padding-left:0}   /* phone menu: a 350 px column centred in the bar (x 20 at 390 px, as live); never closer than 16 px to the screen edge (N3: 320/360 px) */
   /* full column, like live (keeps the tiles on the same half-pixel) */
   /* phone logo tickers have no dashed grid */
  .footer-ctas .primary,.footer-ctas .secondary{width:100%}
  #team-carousel .carousel-track,#process-carousel .carousel-track{-webkit-mask-image:none;mask-image:none}   /* live has no edge fade on phones */
  .site-header{height:auto}
  .site-header+*{margin-top:-70px}
  .site-header nav{min-height:70px;padding:15px}
  .site-header.menu-open nav{padding-bottom:15px}
  .logo{font-size:25px;line-height:30px}
  .has-phone-size{width:var(--wp,auto)!important;height:var(--hp,auto)!important}

  .hero{height:auto;justify-content:center;gap:35px;padding:180px 30px 100px}
  .hero-bg{height:100%}
  .hero h1{width:100%;font-size:27px;line-height:29.7px;white-space:pre-wrap}
  .hero .sub{width:100%;white-space:pre-wrap}
  .exp-band{gap:60px;padding:60px 0 0}
  .exp-band .h-exp{font-size:30px;line-height:48px;letter-spacing:0}
  .logo-row{flex-wrap:wrap;gap:40px}
  .exp-lead{width:100%;padding:60px 40px 0}
  .exp-lead p{font-size:25px;line-height:30px}
  .h-sec{font-size:30px;line-height:36px}

  #szolgaltatasok{gap:60px;padding:60px 20px 0}
  #szolgaltatasok .sec-head{padding:0}
  .svc-row{width:100%;padding:0;overflow:hidden}   /* live clips the 335px cards to the column on narrow phones */
  .svc-row .carousel-track{flex-direction:column;justify-content:center;align-items:center;gap:10px;overflow:visible;-webkit-mask-image:none;mask-image:none;scroll-snap-type:none}
  .svc{height:var(--h-phone,auto)}
  #svc-carousel .carousel-nav{display:none}

  #rolunk{gap:25px;padding:60px 0 0}
  #team-carousel{width:360px}
  #team-carousel .carousel-track{gap:10px}
  #team-carousel .carousel-nav{padding:20px}
  #team-carousel .carousel-nav button{width:40px;height:40px;border-radius:40px;background:rgba(0,0,0,.2)}
  #team-carousel .carousel-nav img{width:40px!important;height:40px!important}
  
  
  
  
  
  
  
  br.ph{display:inline}
  
  
  
  
  
  .item-head h5{flex:1 0 0}
  

  #technológia{gap:60px;padding:60px 0 0}
  .tech-groups{gap:20px;padding:0 20px}
  .tech-title{padding:10px 0}
  .ticker-frame+.tech-title{padding:10px 0}
  .tech-title>div{height:17.6px}
  .tech-title h3{font-weight:400}
  .ticker-frame{display:flex;align-items:center;width:100%;padding:10px;overflow:hidden;
    -webkit-mask-image:linear-gradient(to right,rgba(0,0,0,0) 0%,#000 12.5%,#000 87.5%,rgba(0,0,0,0) 100%);mask-image:linear-gradient(to right,rgba(0,0,0,0) 0%,#000 12.5%,#000 87.5%,rgba(0,0,0,0) 100%)}
  .ticker-track{display:flex;flex-wrap:nowrap;justify-content:flex-start;align-items:center;width:max-content;height:40px;gap:35px;animation:ticker 30s linear infinite}
  .ticker-track>.ticker-set,.ticker-track>.ticker-clone{display:flex;flex-wrap:nowrap;align-items:center;gap:35px;flex:0 0 auto;height:auto;min-width:0}
  .tech-logos.wide{width:max-content}
  @keyframes ticker{to{transform:translateX(calc(-100% / 3))}}

  #igydolgozunk{gap:60px;padding:60px 0 40px}
  .process-wrap{padding:10px 0}
  #process-carousel{width:100%}
  #process-carousel .carousel-frame{padding:10px}

  #partnerek{gap:60px;padding:60px 40px 0}
  
  
  
  

  #tapasztalat{gap:60px;padding:60px 0 0}
  #tapasztalat .sec-head>div{width:100%}
  .wall{width:100%}
  
  
  
  

  #lokáció{gap:60px;padding:60px 0 64px}
  #lokáció .sec-head>div{width:100%}
  .loc-row{flex-direction:column;gap:20px}
  .loc{max-width:calc(100vw - 20px)}   /* L7: 320 px phones (no change at 363 px and wider) */
  .loc-text b{font-size:30px;line-height:36px}

  #kapcsolat{padding:0}
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  form.contact{width:100%;max-width:360px;align-self:flex-start}

  .site-footer{gap:40px;padding:40px;min-height:0}
  .footer-grid{width:100%;flex-direction:column;gap:40px}
  .footer-brand{width:100%}
  .footer-brand-inner{gap:30px}
  .footer-id{gap:20px}
  .footer-id>div{width:100%;display:flex;flex-direction:column;align-items:center}
  .footer-tagline{width:100%;text-align:center}
  .footer-ctas{flex-direction:column;width:100%;gap:10px}
  .footer-ctas a{width:100%}
  .footer-ctas .secondary p{font-size:13px;line-height:15.6px}
  .footer-cols{flex:0 0 auto;flex-wrap:wrap;justify-content:center;gap:40px;width:100%}
  .footer-col:first-child{width:125px}
  .footer-col li{white-space:pre-wrap}
  .footer-bottom{width:100%;flex-direction:column;align-items:center;gap:4px}
  .footer-privacy p{font-size:12px;line-height:15.6px}
  .footer-copy{width:257px;justify-content:center}
  .footer-copy p{font-size:10px;line-height:13px;text-align:center}
}

/* ---------------------------------------------------------------- Hungarian page (/hu/)
   Framer's Hungarian page is the same design with a few sizes tuned for the longer Hungarian copy.
   Measured on the live /kezdolap, 4 Oct 2026. Section ids are rewritten per language by build.py. */
html[lang="hu"] .footer-tagline strong{font-weight:700}

html[lang="hu"] .step-items{margin-top:6px}
/* HU hero button: was 139.4 px as on live, which clipped the label on hover (Adam, 6 Oct); now sized by the rule above */
@media (min-width:1200px){
  html[lang="hu"] .hero{height:602.6px}
  html[lang="hu"] .hero-bg{height:602.6px}
  html[lang="hu"] .hero h1{width:869px;font-size:50px;line-height:55px}
  html[lang="hu"] #igydolgozunk{gap:70px;padding-bottom:70px}
  
  html[lang="hu"] .footer-cols{gap:50px}
  html[lang="hu"] .footer-cols>.footer-col+.footer-col{margin-left:0}
  html[lang="hu"] .svc{height:585px}
  html[lang="hu"] .site-footer{height:300px}   /* fixed on live; the content overflows it evenly */
}
@media (min-width:810px) and (max-width:1199.98px){
  html[lang="hu"] .hero{height:567.8px}
  html[lang="hu"] .hero-bg{height:567.8px}
  html[lang="hu"] .hero h1{width:714px;font-size:41px;line-height:45.1px}
  html[lang="hu"] .svc-row{width:720px}
  html[lang="hu"] .exp-lead{height:273px}
  html[lang="hu"] #technológia{padding-top:70px}
  html[lang="hu"] .tech-logos.wide{width:770px}
  html[lang="hu"] .tech-logos .has-phone-size{width:62px!important;height:62px!important}
  html[lang="hu"] #process-carousel .carousel-frame{padding:0}
  
  
  
  
  
  
  
  html[lang="hu"] form.contact{width:360px;align-self:flex-start}
  html[lang="hu"] .footer-grid{gap:0}
  html[lang="hu"] .footer-cols{justify-content:space-between;min-width:0}
  html[lang="hu"] .footer-cols>.footer-col:first-child{flex:0 1 auto;min-width:0}
  html[lang="hu"] .footer-cols>.footer-col:last-child{flex:0 0 95px}
  html[lang="hu"] .footer-col p{white-space:pre-wrap}
  html[lang="hu"] #igydolgozunk{padding-bottom:70px}
  html[lang="hu"] .svc{height:585px}
}
@media (max-width:809.98px){
  html[lang="hu"] .exp-lead{padding-top:80px}
  html[lang="hu"] #szolgaltatasok{padding:100px 0 0;gap:70px}
  
  
  html[lang="hu"] #technológia{padding:60px 0;gap:20px}
  html[lang="hu"] #technológia .h-sec{padding:0 20px}
  html[lang="hu"] #igydolgozunk{gap:20px}
  html[lang="hu"] #igydolgozunk .h-sec{font-size:35px;line-height:42px}
  
  
  html[lang="hu"] #lokáció{gap:50px;padding:80px 0 64px}
  html[lang="hu"] .tile{justify-content:space-between;gap:0!important}
  
  
  
  html[lang="hu"] .footer-col:first-child{width:141px}
  
  
  html[lang="hu"] .footer-privacy p{font-size:11px;line-height:14.3px}
}

/* ==========================================================================
   Hero as a card (Adam, 6 Oct 2026; chosen from docs/home-hero-width-options.html, option 4).
   Desktop and wide screen: the sphere in a card 92 % of the window wide, the menu bar inside it,
   headline/line/button left-aligned and starting exactly under the OrinGroup logo, a soft dark
   fade on the left for legibility. Tablet: the same card 12 px from the edges, text 48 px in.
   Phones: the centred card with the sphere behind the text (option C), as approved earlier.
   A deliberate change from the live Framer hero (DECISIONS.md, 6 Oct).
   ========================================================================== */
#hero-band .hero{width:var(--hero-w);margin:12px auto 0;height:640px;border-radius:28px;isolation:isolate;
  align-items:flex-start;justify-content:center;gap:30px;
  padding:60px 0 0 max(48px, calc((var(--hero-w) - 1200px) / 2 + 15px));   /* text starts under the logo */
  box-shadow:0 30px 80px -20px rgba(70,90,255,.35)}
#hero-band .hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;
  background:linear-gradient(90deg,rgba(6,7,20,.78) 0%,rgba(6,7,20,.45) 38%,rgba(6,7,20,0) 62%)}
#hero-band .hero>*:not(.hero-bg){z-index:2}
#hero-band .hero::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),inset 0 1px 0 rgba(255,255,255,.22)}
#hero-band .hero-bg{height:100%;object-position:62% 50%}
#main:has(#hero-band) .site-header{top:24px}   /* home only: the bar sits inside the card */
/* Narrow laptops (review, 6 Oct): the card is at least 1224 px (12 px from the window edges at most), the bar always sits
   inside it, and its logo stays in line with the headline (the bar is 66 px narrower than the card until it reaches 1200 px).
   --hero-w resolves against the page width in both places (hero: #hero-band; fixed bar: the window). */
:root{--hero-w:min(100% - 24px, max(92%, 1224px))}
@media (min-width:1200px){
  #main:has(#hero-band) .site-header{width:min(1200px, calc(var(--hero-w) - 66px))}
}
#hero-band .hero h1{width:auto;align-items:flex-start;text-align:left;font-size:52px;line-height:57px}
#hero-band .hero .sub{text-align:left;font-size:17px;line-height:22px;color:rgba(255,255,255,.85)}
#hero-band .hero .cta-row{width:auto;justify-content:flex-start}
@media (max-width:1199.98px){
  #main:has(#hero-band) .site-header{top:0}
  #hero-band .hero{width:calc(100% - 24px);margin:12px 12px 0;height:560px;padding:40px 0 0 48px}
  #hero-band .hero h1{font-size:40px;line-height:45px}
}
@media (max-width:809.98px){
  #hero-band .hero{width:calc(100% - 20px);max-width:none;margin:84px 10px 0;height:auto;border-radius:20px;align-items:center;gap:35px;padding:90px 24px 80px;
    background:#05060d;box-shadow:0 30px 80px -20px rgba(70,90,255,.35),0 0 0 1px rgba(0,0,0,.4)}
  #hero-band .hero::before{display:none}
  #hero-band .hero-bg{left:0;width:100%;object-position:50% 50%;transform:scale(1.08)}
  #hero-band .hero h1{align-items:center;text-align:center;font-size:27px;line-height:29.7px}
  #hero-band .hero .sub{text-align:center;font-size:16px;line-height:17.6px;color:#fff}
  #hero-band .hero .cta-row{width:100%;justify-content:center}
}