/* Aura Agency: one stylesheet for every page.
   The home page is a measured remake of the Framer site (auraagency.hu, captured 2026-10-16):
   same fonts, sizes, colours, radii and section order. Breakpoints follow Framer: >=1200 desktop,
   810-1199 tablet, <810 phone. The landing page, thank-you page and legal pages reuse the same tokens.
   4 Nov 2026: design pass (Levente): the Aura identity kept (wordmark, sky + navy, photo, pill), the weak
   parts redone: watermarks, white-on-blue text, chip clouds, the floating form, the gradient footer. */

:root{
  --bg:#F5F4EF; --paper:#F9F8F5; --white:#fff;
  --sky:#8ABDE3; --sky-d:#6FA6D2; --card:#BAD6EB; --ring:#DCE8F1; --mist:#E5EDF1;
  --lav:#AEB0E6; --sky-l:#AED4E6; --line:#E8E9ED; --violet:#594FEE; --peach:#FAE5D1;
  --navy:#040321; --ink:#1E1515; --ink75:rgba(0,0,0,.75); --ink50:rgba(0,0,0,.5); --ink60:rgba(0,0,0,.6);
  --cal:"Cal Sans","Instrument Sans",system-ui,sans-serif;
  --ins:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --sat:"Satoshi","Instrument Sans",system-ui,sans-serif;
  --inter:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --wrap:1016px; --gut:40px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink75);font-family:var(--ins);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
h1,h2,h3,h4,p,figure,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
img,svg{display:block;max-width:100%}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
.wrap{width:100%;max-width:calc(var(--wrap) + 2 * var(--gut));margin:0 auto;padding:0 var(--gut)}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:#fff;color:#000;padding:8px 14px;border-radius:8px}
.skip:focus{left:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ───────────── HERO (home) ───────────── */
/* 4 Nov 2026 polish: no milky fade into the page, no scroll-mouse, a soft shade so the small lines read;
   only the wordmark keeps the Framer signature (white type, mix-blend-mode:difference over the photo). */
.hero{position:relative;min-height:100vh;min-height:100svh;background:#000;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:96px 24px 104px}
.hero-img,.hero-img img{position:absolute;inset:0;width:100%;height:100%}
.hero-img img{object-fit:cover;object-position:50% 45%}
.hero-tint{position:absolute;inset:0;mix-blend-mode:color;background:url("/images/stripes.svg") left top/64px auto repeat;pointer-events:none}
.hero-shade{position:absolute;inset:0;background:radial-gradient(90% 70% at 50% 46%,rgba(4,3,33,.1) 0%,rgba(4,3,33,.42) 100%),linear-gradient(180deg,rgba(4,3,33,0) 60%,rgba(4,3,33,.5) 100%);pointer-events:none}
.hero-in{position:relative;display:flex;flex-direction:column;align-items:center;gap:36px;color:#fff;text-align:center}
.hero .wordmark{mix-blend-mode:difference}
.eyebrow{font:500 13px/1 var(--ins);text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.9)}
.wordmark{font:600 144px/128px var(--ins);letter-spacing:-.05em;text-transform:uppercase;color:#fff}
.tagline{max-width:360px;font:400 13px/21px var(--ins);text-transform:uppercase;letter-spacing:.06em;color:rgba(255,255,255,.88)}
.pill{position:relative;display:inline-flex;align-items:center;gap:12px;height:48px;padding:0 24px 0 18px;border-radius:1000px;background:var(--sky);color:#fff;text-decoration:none;font:500 16px/19.2px var(--sat);white-space:nowrap;transition:background-color .25s ease,transform .25s ease}
.pill:hover{background:var(--sky-d)}
.pill:active{transform:scale(.98)}
.pill .dot{width:11px;height:11px;border-radius:50%;background:var(--peach);flex-shrink:0;transition:transform .3s ease}
.pill:hover .dot{transform:scale(1.25)}
.hero .pill{margin-top:44px;z-index:1}
/* load-in: one calm rise (was a springy pop) */
.js .hero-in .wordmark{animation:riseIn .9s .15s both}
.js .hero-in .eyebrow,.js .hero-in .tagline,.js .hero .pill{animation:riseIn .9s .4s both}
@keyframes riseIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.js .hero-in .wordmark,.js .hero-in .tagline,.js .hero .pill,.js .hero-in .eyebrow{animation:none}}

/* ───────────── ABOUT: studio card + what to expect ───────────── */
.about{padding:120px 0 0;position:relative}
.card{position:relative;overflow:hidden;border-radius:28px;background:var(--card)}
.c1{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,456px);gap:56px;align-items:center;padding:56px}
.card h2{font:400 40px/46px var(--cal);letter-spacing:-.6px;color:var(--ink)}
.card p{margin-top:20px;font:400 19px/29px var(--ins);letter-spacing:-.2px;color:rgba(30,21,21,.7)}
.card .hl{color:var(--ink);font-weight:500}
.arrow-link{display:inline-flex;align-items:center;gap:10px;margin-top:36px;font:400 18px/1.4 var(--cal);color:var(--ink);text-decoration:none}
.arrow-link svg{width:20px;height:20px;color:var(--sky-d);transition:transform .25s ease}
.arrow-link:hover svg{transform:translateX(4px)}
/* week calendar (5 Nov 2026, replaces the stock studio photo): a plain calendar week view, six 5-hour
   streams. js/home.js moves them between example weeks; left/top follow --d (day 0-6) and --s (start hour). */
.wk{margin:0;padding:18px 18px 16px;border-radius:16px;background:#fff;color:var(--ink)}
.wk-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:0 2px 14px}
.wk-top b{font:400 18px/1.2 var(--cal);color:var(--ink)}
.wk-top span{font:400 13px/1 var(--ins);color:rgba(30,21,21,.5)}
.wk-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));margin-left:26px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.wk-days span{font:500 12px/1 var(--ins);text-align:center;color:rgba(30,21,21,.38);transition:color .5s ease}
.wk-days span.on{color:var(--ink)}
.wk-body{display:flex}
.wk-hours{position:relative;width:26px;flex-shrink:0}
.wk-hours span{position:absolute;left:0;transform:translateY(-50%);font:400 11px/1 var(--ins);color:rgba(30,21,21,.4)}
.wk-hours span:nth-child(1){top:0;transform:none}.wk-hours span:nth-child(2){top:25%}.wk-hours span:nth-child(3){top:50%}.wk-hours span:nth-child(4){top:75%}.wk-hours span:nth-child(5){top:100%;transform:translateY(-100%)}
.wk-grid{position:relative;flex:1;height:232px;background:
  linear-gradient(var(--line),var(--line)) 0 25%/100% 1px no-repeat,
  linear-gradient(var(--line),var(--line)) 0 50%/100% 1px no-repeat,
  linear-gradient(var(--line),var(--line)) 0 75%/100% 1px no-repeat,
  repeating-linear-gradient(90deg,transparent 0,transparent calc(100% / 7 - 1px),var(--line) calc(100% / 7 - 1px),var(--line) calc(100% / 7))}
.wk-ev{position:absolute;left:calc(var(--d) * 100% / 7 + 2px);top:calc((var(--s) - 8) * 100% / 16 + 2px);width:calc(100% / 7 - 5px);height:calc(5 * 100% / 16 - 4px);display:flex;flex-direction:column;gap:2px;padding:6px 5px;border-radius:6px;background:#E3EFF8;box-shadow:inset 3px 0 0 var(--sky-d);overflow:hidden;font-style:normal}
.wk-ev b{padding-left:3px;font:600 11px/1.2 var(--ins);color:#1F4F78}
.wk-ev span{padding-left:3px;font:400 11px/1.2 var(--ins);color:rgba(31,79,120,.75);transition:opacity .3s ease}
.wk-ev.swap span{opacity:0}
/* first view: the five streams are put in one by one (the HTML already shows the finished week) */
.js .wk.pre .wk-ev{opacity:0;transform:translateY(8px)}
.wk .wk-ev{transition:left .9s cubic-bezier(.65,0,.35,1),top .9s cubic-bezier(.65,0,.35,1),opacity .45s ease,transform .45s cubic-bezier(.22,.61,.36,1)}
.wk .wk-ev:nth-child(2){transition-delay:0s,0s,.12s,.12s}.wk .wk-ev:nth-child(3){transition-delay:0s,0s,.24s,.24s}.wk .wk-ev:nth-child(4){transition-delay:0s,0s,.36s,.36s}.wk .wk-ev:nth-child(5){transition-delay:0s,0s,.48s,.48s}.wk .wk-ev:nth-child(6){transition-delay:0s,0s,.6s,.6s}
@media(prefers-reduced-motion:reduce){.wk .wk-ev,.wk-days span{transition:none}.js .wk.pre .wk-ev{opacity:1;transform:none}}
.stats{display:grid;grid-template-columns:1fr 1fr;margin-top:24px;padding-top:20px;border-top:1px solid rgba(30,21,21,.14)}
.stats div+div{padding-left:24px;border-left:1px solid rgba(30,21,21,.14)}
.stats span{display:block;font:400 15px/20px var(--ins);color:rgba(30,21,21,.64)}
.stats b{display:block;margin-top:8px;font:500 38px/1.1 var(--sat);letter-spacing:-1px;color:var(--ink);white-space:nowrap}
.stats b small{margin-left:2px;font-size:.5em;font-weight:500;letter-spacing:-.2px}
.stats b .to{margin:0 .04em;font-family:var(--ins);font-style:normal;font-weight:400}   /* Satoshi's en dash reads as an em dash at this size */
.expect{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;margin-top:96px;padding-top:40px;border-top:1px solid rgba(0,0,0,.12)}
.expect h2{font:400 44px/50px var(--cal);letter-spacing:-.6px;color:var(--ink)}
.expect p{font:400 21px/32px var(--ins);letter-spacing:-.3px;color:var(--ink60)}
.expect p b{color:var(--ink);font-weight:600}
.expect .pill{margin-top:32px}

/* ───────────── DEAL: what you bring (tap to check) + what we give (navy card) ─────────────
   5 Nov 2026, replaces the two hairline lists. The trait buttons ARE the site's pill: picked = the sky
   "Jelentkezek!" pill with its peach dot. */
.deal{padding:120px 0 0}
.deal-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:56px;align-items:center}
.deal .k{display:block;margin-bottom:14px;font:500 15px/1 var(--sat);color:var(--sky-d)}
.deal h2{font:400 40px/46px var(--cal);letter-spacing:-.6px;color:var(--ink)}
.deal-tip{display:none;margin-top:16px;font:400 18px/26px var(--ins);color:var(--ink60)}
.js .deal-tip{display:block}
.traits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:28px}
.trait{display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 20px 8px 18px;border:1px solid rgba(30,21,21,.14);border-radius:1000px;background:#fff;color:var(--ink);font:500 17px/1.2 var(--sat);text-align:left;cursor:pointer;transition:background-color .25s ease,border-color .25s ease,color .25s ease,transform .25s ease}
.trait .dot{width:11px;height:11px;border-radius:50%;flex-shrink:0;box-shadow:inset 0 0 0 1.5px var(--sky-d);transition:background-color .25s ease,box-shadow .25s ease,transform .3s ease}
.trait:hover{border-color:var(--sky-d)}
.trait:active{transform:scale(.98)}
.trait:focus-visible{outline:2px solid var(--sky-d);outline-offset:3px}
.trait[aria-pressed="true"]{background:var(--sky);border-color:var(--sky);color:#fff}
.trait[aria-pressed="true"] .dot{background:var(--peach);box-shadow:none;transform:scale(1.15)}
.deal-score{display:none;align-items:center;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;margin-top:24px;padding-top:20px;border-top:1px solid rgba(0,0,0,.12)}
.js .deal-score{display:flex}
.deal-score p{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;font:400 16px/24px var(--ins);color:var(--ink60)}
.deal-score .n{font:500 30px/1 var(--sat);letter-spacing:-.5px;color:var(--ink)}
.deal-score .of{margin-right:10px;font:500 16px/1 var(--sat);color:rgba(30,21,21,.4)}
.deal-score .say{color:var(--ink75)}
.deal-score .arrow-link{margin-top:0}
.deal-we{padding:48px 44px 40px;border-radius:28px;background:var(--navy);color:#fff}
.deal-we .k{color:var(--sky)}
.deal-we h2{font-size:30px;line-height:36px;letter-spacing:-.4px;color:#fff}
.gives{margin-top:28px}
.gives li{display:flex;flex-direction:column;gap:6px;padding:18px 0;border-top:1px solid rgba(255,255,255,.14)}
.gives b{font:400 21px/27px var(--cal);letter-spacing:-.2px;color:#fff}
.gives span{font:400 15px/22px var(--ins);color:rgba(255,255,255,.66);text-wrap:pretty}
/* the rows follow the card in, one after another */
.js .deal-we.rv .gives li{opacity:0;transform:translateY(10px);transition:opacity .6s ease,transform .6s cubic-bezier(.22,.61,.36,1)}
.js .deal-we.rv.in .gives li{opacity:1;transform:none}
.js .deal-we.rv.in .gives li:nth-child(2){transition-delay:.1s}.js .deal-we.rv.in .gives li:nth-child(3){transition-delay:.2s}.js .deal-we.rv.in .gives li:nth-child(4){transition-delay:.3s}.js .deal-we.rv.in .gives li:nth-child(5){transition-delay:.4s}
@media(prefers-reduced-motion:reduce){.js .deal-we.rv .gives li{opacity:1;transform:none;transition:none}}

/* ───────────── APPLY PANEL (home form) ───────────── */
.apply-panel{margin:128px 8px 0;border-radius:32px;overflow:hidden;position:relative;background:var(--navy) url("/images/contact-bg-1600.webp") 100% 50%/cover no-repeat;color:#fff;scroll-margin-top:16px}
.ap-in{max-width:1096px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:64px;align-items:start;padding:104px 40px}
.ap-head{padding-top:8px}
.ap-head h2{max-width:470px;font:400 64px/68px var(--cal);letter-spacing:-.8px;color:#fff}
.ap-head p{margin-top:20px;max-width:420px;font:400 18px/27px var(--ins);color:rgba(255,255,255,.78)}
.ap-steps{margin-top:48px;max-width:420px;border-top:1px solid rgba(255,255,255,.16)}
.ap-steps li{padding:18px 0;border-bottom:1px solid rgba(255,255,255,.16);font:400 17px/25px var(--ins);color:rgba(255,255,255,.88)}
.ap-steps .when{display:block;margin-bottom:6px;font:500 14px/1 var(--sat);color:var(--sky)}
/* the form sits on a solid white card (it used to float over the glass ribbon and lose its labels) */
.hf{display:flex;flex-direction:column;gap:18px;padding:32px;border-radius:20px;background:#fff;color:var(--ink);font-family:var(--ins)}
.hf .fld>label,.hf .lbl{display:block;margin-bottom:8px;font:500 14px/1.2 var(--ins);color:var(--ink)}
.hf input[type=text],.hf input[type=email],.hf input[type=tel],.hf select{width:100%;height:48px;padding:0 14px;border:1px solid rgba(14,13,26,.16);border-radius:10px;background:#fff;color:var(--ink);font:400 16px/1 var(--ins);outline:none;transition:border-color .2s,box-shadow .2s}
.hf input::placeholder{color:rgba(14,13,26,.36);opacity:1}
.hf input:focus,.hf select:focus{border-color:#3E86C4;box-shadow:0 0 0 3px rgba(62,134,196,.18)}
.hf select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:38px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E1515' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:16px}
.hf .drops{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hf .drop{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;aspect-ratio:4/5;padding:12px;border:1.5px dashed rgba(62,134,196,.45);border-radius:14px;background:rgba(62,134,196,.06);color:#3E86C4;text-align:center;cursor:pointer;overflow:hidden;transition:background-color .2s,border-color .2s}
.hf .drop:hover,.hf .drop.over{border-color:#3E86C4;background:rgba(62,134,196,.11)}
.hf .drop:focus-within{outline:2px solid #3E86C4;outline-offset:3px}
.hf .drop input{position:absolute;inset:0;z-index:2;opacity:0;cursor:pointer;width:100%;height:100%}
.hf .drop svg{width:28px;height:28px;margin-bottom:4px}
.hf .drop b{font:400 16px/20px var(--cal);color:var(--ink)}
.hf .drop .cta{font:400 13px/17px var(--ins);color:rgba(14,13,26,.55)}
.hf .drop .thumb{display:none;position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hf .drop .fname{display:none;position:absolute;left:8px;right:8px;bottom:8px;z-index:1;padding:6px 8px;border-radius:8px;background:rgba(14,13,26,.72);color:#fff;font:500 12px/1.2 var(--ins)}
.hf .drop.has{border-style:solid;border-color:#3E86C4}
.hf .drop.has .thumb,.hf .drop.has .fname{display:block}
.hf .drop.prep::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.6) url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Ccircle cx=%2712%27 cy=%2712%27 r=%279%27 fill=%27none%27 stroke=%27%233E86C4%27 stroke-width=%272.5%27 stroke-dasharray=%2742 18%27%3E%3CanimateTransform attributeName=%27transform%27 type=%27rotate%27 from=%270 12 12%27 to=%27360 12 12%27 dur=%27.9s%27 repeatCount=%27indefinite%27/%3E%3C/circle%3E%3C/svg%3E") center/32px no-repeat}
.hf .drop.err{border-color:#c0563b;background:rgba(248,228,227,.6)}
.hf .hint{display:block;margin-top:8px;font:400 13px/1.3 var(--ins);color:rgba(14,13,26,.5)}
.hf .chk{display:flex;align-items:flex-start;gap:10px;font:400 14px/20px var(--ins);color:rgba(14,13,26,.75);cursor:pointer}
.hf .chk input{appearance:none;-webkit-appearance:none;flex-shrink:0;width:18px;height:18px;margin:1px 0 0;border:1.5px solid rgba(14,13,26,.3);border-radius:5px;background:#fff;cursor:pointer;display:grid;place-items:center;transition:background-color .15s,border-color .15s}
.hf .chk input:checked{background:#3E86C4;border-color:#3E86C4}
.hf .chk input:checked::after{content:"";width:9px;height:5px;border:solid #fff;border-width:0 0 2px 2px;transform:translateY(-1px) rotate(-45deg)}
.hf .chk input:focus-visible{outline:2px solid #3E86C4;outline-offset:2px}
.hf .chk a{color:#3E86C4}
.hf .chk .hl{color:var(--ink);font-weight:500}
.hf .chk.err input{border-color:#c0563b;box-shadow:0 0 0 3px rgba(192,86,59,.18)}
.hf .send{height:52px;margin-top:4px;border:0;border-radius:1000px;background:#3E86C4;color:#fff;font:600 16px/1 var(--ins);cursor:pointer;transition:background-color .2s}
.hf .send:hover{background:#2F73AE}
.hf .send:disabled{opacity:.7;cursor:default}
.hf .msg{display:none;padding:10px 12px;border-radius:10px;background:rgba(192,86,59,.1);color:#913b21;font:500 14px/1.4 var(--ins)}
.hf .msg.on{display:block}
.hf .bad{border-color:#c0563b!important}

/* ───────────── FAQ (shared look: home + landing) ───────────── */
.faq{padding:120px 0 0}
.qa{border-bottom:1px solid var(--line)}
.qa details{border-top:1px solid var(--line)}
.qa details:first-child{border-top:0}
.qa summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:32px 0;cursor:pointer;font:500 28px/33.6px var(--sat);letter-spacing:-.7px;color:var(--ink50)}
.qa summary::-webkit-details-marker{display:none}
.qa summary svg{flex-shrink:0;width:24px;height:24px;color:#6b6f7b;transition:transform .3s ease}
.qa details[open] summary svg{transform:rotate(90deg)}
.qa summary:hover{color:var(--ink)}
.qa summary:focus-visible{outline:2px solid var(--sky);outline-offset:4px;border-radius:4px}
.qa .a{padding:0 48px 32px 0;font:400 20px/28px var(--ins);letter-spacing:-.3px;color:var(--ink60)}
.qa .a p+p{margin-top:12px}
.qa .a strong{color:var(--ink75);font-weight:600}

/* ───────────── FOOTER BAND (every page): solid navy, Cal Sans line (was a sky→grey gradient + stars) ───────────── */
.band{position:relative;margin-top:128px;overflow:hidden;background:var(--navy);color:#fff}
.band-in{position:relative;padding:96px 0 56px}
.band .wordmark{font-size:84px;line-height:1;letter-spacing:-4.2px;text-align:left}
.band .line{margin-top:24px;font:400 40px/46px var(--cal);letter-spacing:-.6px;color:var(--paper)}
.band .line a{color:inherit;text-decoration:none}
.legal{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;margin-top:72px;padding-top:20px;border-top:1px solid rgba(255,255,255,.18);font:400 13px/1.5 var(--ins);color:rgba(255,255,255,.72)}
.legal a{color:inherit;text-decoration:none}
.legal a:hover{color:#fff;text-decoration:underline}
.legal .adult{margin-left:auto;display:inline-flex;align-items:center;gap:8px}
.legal .adult b{display:inline-grid;place-items:center;width:28px;height:28px;border:1.5px solid rgba(255,255,255,.7);border-radius:50%;font:600 11px/1 var(--ins)}

/* ───────────── calm reveal (one motion) ───────────── */
.js .rv{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
.js .rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}}

/* ───────────── TABLET 810-1199 ───────────── */
@media(max-width:1199.98px){
  .wordmark{font-size:128px;line-height:116px}
  .c1{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;padding:48px 40px}
  .stats b{font-size:32px}
  .deal-in{grid-template-columns:1fr;gap:56px}
  .deal-you{max-width:640px}
  .ap-in{grid-template-columns:minmax(0,1fr) 400px;gap:40px;padding:88px 40px}
  .ap-head h2{font-size:52px;line-height:56px}
}

/* ───────────── PHONE <810 ───────────── */
@media(max-width:809.98px){
  :root{--gut:16px}
  .hero{padding:88px 20px 96px}
  .hero-in{gap:28px}
  .eyebrow{font-size:12px}
  .wordmark{font-size:100px;line-height:92px}
  .tagline{max-width:320px;font-size:12px;line-height:19px}
  .hero .pill{margin-top:36px}
  .about{padding-top:72px}
  .card{border-radius:24px}
  .c1{grid-template-columns:1fr;gap:32px;padding:36px 22px 26px}
  .card h2{font-size:30px;line-height:36px}
  .card p{margin-top:16px;font-size:16px;line-height:25px;letter-spacing:-.1px}
  .arrow-link{margin-top:28px;font-size:17px}
  .wk{padding:14px 12px 12px;border-radius:14px}
  .wk-top b{font-size:16px}
  .wk-days{margin-left:20px}
  .wk-days span{font-size:11px}
  .wk-hours{width:20px}
  .wk-hours span{font-size:10px}
  .wk-grid{height:200px}
  .wk-ev{left:calc(var(--d) * 100% / 7 + 1.5px);width:calc(100% / 7 - 3px);padding:5px 2px 5px 4px;border-radius:5px}
  .wk-ev b{display:none}   /* "Stream" does not fit a phone column; the time does */
  .wk-ev{padding:5px 1px 5px 4px}
  .wk-ev span{padding-left:1px;font-size:10px;font-weight:500;letter-spacing:-.2px;white-space:nowrap;color:#1F4F78}
  .stats div+div{padding-left:18px}
  .stats span{font-size:14px;line-height:19px}
  .stats b{font-size:28px;letter-spacing:-.6px}
  .expect{grid-template-columns:1fr;gap:18px;margin-top:64px;padding-top:32px}
  .expect h2{font-size:32px;line-height:38px}
  .expect p{font-size:17px;line-height:27px}
  .expect .pill{margin-top:28px}
  .deal{padding-top:88px}
  .deal-in{gap:48px}
  .deal h2{font-size:30px;line-height:36px}
  .deal-tip{font-size:16px;line-height:24px}
  .traits{grid-template-columns:1fr;gap:8px;margin-top:22px}   /* one column: "Kommunikációs készség" stays on one line */
  .trait{min-height:50px;padding:8px 18px 8px 18px;font-size:16px}
  .deal-we{margin:0 -4px;padding:36px 22px 24px;border-radius:24px}
  .deal-we h2{font-size:26px;line-height:32px}
  .gives{margin-top:20px}
  .gives li{padding:16px 0}
  .gives b{font-size:19px;line-height:25px}
  .apply-panel{margin:88px 0 0;border-radius:28px;background-size:100% auto;background-position:50% 100%}   /* ribbon only behind the lower form */
  .ap-in{grid-template-columns:1fr;gap:36px;padding:64px 16px 16px;max-width:520px}
  .ap-head{padding:0 6px}
  .ap-head h2{font-size:44px;line-height:48px;letter-spacing:-.6px}
  .ap-head p{font-size:17px;line-height:25px}
  .ap-steps{margin-top:28px}
  .ap-steps li{padding:15px 0;font-size:16px;line-height:23px}
  .hf{padding:24px 18px;gap:16px;border-radius:18px}
  .faq{padding-top:88px}
  .qa summary{padding:26px 0;font-size:22px;line-height:28px;letter-spacing:-.4px}
  .qa .a{padding-right:8px;font-size:17px;line-height:25px}
  .band{margin-top:88px;text-align:center}
  .band-in{padding:80px 0 40px}
  .band .wordmark{font-size:72px;text-align:center}
  .band .line{margin-top:20px;font-size:30px;line-height:36px}
  .legal{justify-content:center;margin-top:64px;text-align:center}
  .legal .adult{margin-left:0}
}

/* ════════════════════════════════════════════════════════════════════
   LANDING PAGE /jelentkezes/  (form first; the Aura identity on a quiet system)
   ════════════════════════════════════════════════════════════════════ */
.lp-top{position:absolute;top:0;left:0;right:0;z-index:5}
.lp-top .wrap{display:flex;align-items:center;justify-content:space-between;height:76px;max-width:1240px}
.lp-logo{display:inline-flex;align-items:baseline;gap:10px;text-decoration:none;color:#fff}
.lp-logo b{font:600 30px/1 var(--ins);letter-spacing:-.05em;text-transform:uppercase}
.lp-logo span{font:400 12px/1 var(--ins);text-transform:uppercase;letter-spacing:.04em;opacity:.8}
.lp-top .pill{height:40px;font-size:15px}

.lp-hero{position:relative;background:#000;color:#fff;overflow:hidden}
.lp-hero .hero-img img{object-position:62% 40%}
.lp-hero .shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,3,33,.8) 0%,rgba(4,3,33,.5) 46%,rgba(4,3,33,.2) 78%,rgba(4,3,33,.1) 100%)}
.lp-hero .wrap{position:relative;max-width:1240px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:56px;align-items:center;padding-top:132px;padding-bottom:88px;min-height:100vh;min-height:100svh}
.lp-hero h1{font:400 56px/60px var(--cal);letter-spacing:-.6px;color:#fff;max-width:600px}
.lp-hero h1 .u{color:var(--sky)}
.lp-hero .sub b{color:#fff;font-weight:600}
.lp-hero .sub{margin-top:22px;max-width:470px;font:400 19px/28px var(--ins);letter-spacing:-.2px;color:rgba(255,255,255,.82)}
.form-card{scroll-margin-top:24px}

.lp-sec{padding:120px 0 0}
.lp-sec .wrap{max-width:1160px}
.sec-head{max-width:640px}
.sec-head .k{display:block;margin-bottom:14px;font:500 15px/1 var(--sat);color:var(--sky-d)}
.sec-head h2{font:400 44px/50px var(--cal);letter-spacing:-.6px;color:var(--ink)}
.sec-head p{margin-top:16px;font:400 19px/28px var(--ins);letter-spacing:-.2px;color:var(--ink60)}

.lp-band .wrap{max-width:1160px}

/* timeline: from application to the first day */
.tl{margin-top:48px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1.5px solid var(--sky)}
.tl li{position:relative;padding:28px 28px 0 0}
.tl li::before{content:"";position:absolute;top:-6.5px;left:0;width:11px;height:11px;border-radius:50%;background:var(--peach);box-shadow:0 0 0 3px var(--sky)}
.tl .when{display:block;font:500 15px/1 var(--sat);color:var(--sky-d)}
.tl h3{margin-top:14px;font:400 22px/28px var(--cal);color:var(--ink)}
.tl p{margin-top:8px;font:400 16px/24px var(--ins);color:var(--ink60)}

/* FAQ on the landing reuses .qa; smaller type */
.lp-faq{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:64px}
.lp-faq .qa{margin-top:0}
.lp-faq .qa summary{font-size:22px;line-height:28px;padding:24px 0;color:var(--ink75)}
.lp-faq .qa .a{font-size:17px;line-height:25px}

/* ── Service cards (5 Nov 2026): the Moonrise cards (moonrise-models css/moonrise.css "Service cards"), same sizes,
   radii, dot grid, window and timings; Aura's colours: sky → deep blue card, the form blue (#3E86C4) inside the
   windows, navy avatar. Everything is scoped to .svc. js/scenes.js adds .playing while a window plays; what has not
   happened yet waits for .on. ── */
.svc{--a:#3E86C4;--a-d:#2F73AE;--a-l:#E3EFF8;--w-ink:#0E0D1A;--w-mut:#8B8D9C;--w-faint:#B7BAC6;--w-hair:#EEF0F3;--w-line:#E6E8EE;--w-grey:#F1F3F6;
  --ok:#067647;--ok-bg:#ECFDF3;--wait:#B45309;--wait-bg:#FFF7E6;
  --e-out:cubic-bezier(.23,1,.32,1);--e-spring:cubic-bezier(.32,.72,0,1);--e-expo:cubic-bezier(.16,1,.3,1);--e-io:cubic-bezier(.65,0,.35,1);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:48px}
.svc-c{position:relative;display:flex;flex-direction:column;padding:8px 8px 26px;border-radius:22px;background:linear-gradient(180deg,#8ABDE3 0%,#3E86C4 62%,#3373AE 100%);color:#fff;overflow:hidden}
.svc-c .vis{position:relative;height:256px;margin-bottom:20px;border-radius:16px;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#000 86%,transparent 100%);mask-image:linear-gradient(180deg,#000 86%,transparent 100%)}
.svc-c .vis::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.3) 1px,transparent 1.3px);background-size:14px 14px;-webkit-mask-image:linear-gradient(180deg,#000,transparent 70%);mask-image:linear-gradient(180deg,#000,transparent 70%)}
.svc-c .win{position:absolute;left:22px;right:22px;top:26px}
.svc-c .w-cal{top:18px}
.svc-c h3{padding:0 18px;margin-bottom:8px;font:400 22px/28px var(--cal);letter-spacing:-.2px;color:#fff}
.svc-c p{padding:0 18px;font:400 15px/1.55 var(--ins);color:rgba(255,255,255,.92)}
/* the window */
.svc .win{overflow:hidden;border-radius:12px;background:#fff;color:var(--w-ink);font:400 12.5px/1.4 var(--ins);text-align:left;box-shadow:0 0 0 1px rgba(14,13,26,.06),0 2px 4px rgba(14,13,26,.05),0 28px 56px -18px rgba(8,38,78,.55)}
.svc .win-h{display:flex;align-items:center;gap:9px;height:42px;padding:0 14px;border-bottom:1px solid var(--w-hair);font-size:12.5px;white-space:nowrap}
.svc .win-h b{font-weight:600}
.svc .win-m{margin-left:auto;font-size:11px;color:var(--w-mut);font-variant-numeric:tabular-nums}
.svc .ava{display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;background:var(--navy);color:#fff;font:600 11px/1 var(--ins);letter-spacing:-.02em}
.svc .who2{line-height:1.15}
.svc .who2 small{display:block;font-size:10.5px;font-weight:500;color:#16A34A}
.svc .who2 small::before{content:"";display:inline-block;width:6px;height:6px;margin-right:4px;border-radius:50%;background:#22C55E;vertical-align:1px}
.svc .st{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:999px;background:var(--ok-bg);color:var(--ok);font-size:10.5px;font-weight:600;white-space:nowrap}
.svc .st::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.svc .st.wait{background:var(--wait-bg);color:var(--wait)}
.svc .st.wait::before{animation:svcBlink 1.1s var(--e-io) infinite}
.svc .cur{position:absolute;left:0;top:0;z-index:5;width:18px;height:22px;opacity:0;pointer-events:none;filter:drop-shadow(0 2px 3px rgba(14,13,26,.3));will-change:transform}
@keyframes svcBlink{50%{opacity:.25}}
.svc .g{display:grid;grid-template-rows:1fr;transition:grid-template-rows .55s var(--e-spring),opacity .45s var(--e-out)}
.svc .g>div{min-height:0;overflow:hidden}
.svc .playing .g:not(.on){grid-template-rows:0fr;opacity:0}
.svc .scene-fade{transition:opacity .4s var(--e-out)}
.svc .scene-fade.dim{opacity:0}
/* 1. chat with the manager */
.svc .thread{display:flex;flex-direction:column;padding:4px 12px 14px}
.svc .w-chat .thread{height:206px;justify-content:flex-end;overflow:hidden}
.svc .g.tg:not(.on){grid-template-rows:0fr;opacity:0}
.svc .thread .g>div{display:flex;flex-direction:column;padding-top:7px}
.svc .msg{max-width:84%;padding:7px 10px 6px;border-radius:13px;font-size:12px;line-height:1.38}
.svc .msg.l{align-self:flex-start;background:var(--w-grey);border-top-left-radius:4px}
.svc .msg.r{align-self:flex-end;background:var(--a);color:#fff;border-top-right-radius:4px}
.svc .msg time{display:block;margin-top:2px;font-size:9.5px;text-align:right;opacity:.6}
.svc .typing{display:inline-flex;align-self:flex-start;gap:3px;padding:10px 11px;border-radius:13px;border-top-left-radius:4px;background:var(--w-grey)}
.svc .typing i{width:5px;height:5px;border-radius:50%;background:#A3A6B5;animation:svcDot 1.1s var(--e-io) infinite}
.svc .typing i:nth-child(2){animation-delay:.15s}.svc .typing i:nth-child(3){animation-delay:.3s}
@keyframes svcDot{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-3px);opacity:1}}
/* 2. payout */
.svc .pay{padding:14px 16px}
.svc .pay small{font-size:11px;color:var(--w-mut)}
.svc .pay-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.svc .amt{margin:3px 0 14px;font-size:30px;font-weight:700;line-height:1.1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;white-space:nowrap}
.svc .amt .ft{margin-left:5px;font-size:.55em;font-weight:600;letter-spacing:0;color:var(--w-mut)}
.svc .bars{display:flex;align-items:flex-end;gap:7px;height:78px;padding-bottom:1px;border-bottom:1px solid var(--w-hair)}
.svc .bars i{flex:1;height:var(--h);border-radius:4px 4px 2px 2px;background:#E4EAF1;transform-origin:bottom;transition:transform .8s var(--e-expo),background .4s}
.svc .bars i.hi{background:var(--a)}
.svc .playing .bars i:not(.on){transform:scaleY(0)}
.svc .bars-x{display:flex;justify-content:space-between;padding-top:6px;font-size:10px;color:var(--w-mut)}
/* 3. calendar: a pointer drags two streams in around the rest of the week */
.svc .cal-h{display:grid;grid-template-columns:repeat(5,1fr);margin:0 10px 0 30px;padding:8px 0 6px;font-size:10px;font-weight:600;letter-spacing:.02em;text-align:center;color:var(--w-mut)}
.svc .cal-h .td{color:var(--a-d)}
.svc .cal-b{position:relative;height:144px;margin:0 10px 12px 30px;border-left:1px solid var(--w-hair);background-image:linear-gradient(var(--w-hair) 1px,transparent 1px),linear-gradient(90deg,var(--w-hair) 1px,transparent 1px);background-size:100% 36px,20% 100%}
.svc .cal-t{position:absolute;left:-28px;width:22px;font-size:9px;text-align:right;color:var(--w-faint);transform:translateY(-50%)}
.svc .ev{position:absolute;left:calc(var(--d) * 20% + 2px);top:calc((var(--s) - 10) * 12px + 1px);width:calc(20% - 4px);height:calc((var(--e) - var(--s)) * 12px - 2px);overflow:hidden;padding:3px 4px 3px 5px;border-radius:5px;font-size:9.5px;font-weight:600;line-height:1.2}
.svc .ev.gr{background:var(--w-grey);color:#6B6E80;box-shadow:inset 2px 0 0 #CDD2DC}
.svc .ev.lv{background:var(--a-l);color:#1F4F78;box-shadow:inset 2px 0 0 var(--a);transform-origin:top;transition:transform .6s var(--e-spring),opacity .3s}
.svc .ev small{display:block;margin-top:1px;font-size:8.5px;font-weight:500;opacity:.8}
.svc .ev .evl{transition:opacity .3s .05s}
.svc .playing .ev.lv:not(.on){transform:scaleY(0);opacity:0}
.svc .playing .ev.lv:not(.lab) .evl{opacity:0}
@media(prefers-reduced-motion:reduce){.svc .typing i,.svc .st.wait::before{animation:none}}

/* closing band on the landing */
.lp-band .band-in{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;padding:96px 0 48px}
.lp-band .line{margin-top:16px}
.lp-band .legal{margin-top:0;margin-bottom:40px}
.lp-band .pill{height:52px;padding:0 26px 0 20px;font-size:17px;background:#fff;color:var(--ink)}
.lp-band .pill:hover{background:var(--paper)}
.lp-band .pill .dot{background:var(--sky)}

/* ───────────── Typeform-style form card (Aura skin) ───────────── */
/* (the form engine js/jelentkezes.js injects its own structural CSS; colours come from these variables) */
.form-card{--tf-a:#3E86C4;--tf-a2:#2F73AE;--tf-tint:rgba(62,134,196,.07);--tf-line:rgba(62,134,196,.32)}

/* ───────────── THANK-YOU ───────────── */
.ty{padding:132px 0 0}
.ty .wrap{max-width:1000px}
.ty-card{position:relative;overflow:hidden;border-radius:28px;background:var(--card);padding:64px 56px 56px}
.ty-ok{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:50%;background:#fff;color:var(--sky-d)}
.ty-ok svg{width:26px;height:26px}
.ty-card h1{margin-top:24px;font:400 56px/60px var(--cal);letter-spacing:-.6px;color:var(--ink)}
.ty-card .lead{margin-top:16px;max-width:640px;font:400 20px/28px var(--ins);letter-spacing:-.3px;color:var(--ink60)}
.ty-card .lead b{color:var(--ink);font-weight:600}
.ty-next{margin-top:36px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ty-next div{padding:20px 22px;border-radius:16px;background:rgba(255,255,255,.55)}
.ty-next .k{display:block;font:500 14px/1 var(--sat);color:var(--sky-d)}
.ty-next b{display:block;margin-top:10px;font:400 20px/26px var(--cal);color:var(--ink)}
.ty-next p{margin-top:6px;font:400 15px/22px var(--ins);color:var(--ink60)}
.ty-steps{margin-top:96px}
.prep{margin-top:96px;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:56px;padding:48px;border-radius:24px;background:var(--mist)}
.prep h2{font:400 32px/38px var(--cal);color:var(--ink)}
.prep>div p{margin-top:12px;font:400 17px/25px var(--ins);color:var(--ink60)}
.prep ul li{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid rgba(0,0,0,.08);font:400 17px/25px var(--ins);color:var(--ink60)}
.prep ul li:first-child{padding-top:0}
.prep ul li:last-child{border-bottom:0;padding-bottom:0}
.prep ul li b{color:var(--ink);font-weight:600}
.prep .tick{flex-shrink:0;display:inline-grid;place-items:center;width:24px;height:24px;margin-top:1px;border-radius:50%;background:var(--sky);color:#fff}
.prep .tick svg{width:14px;height:14px}
.back{display:flex;justify-content:center;margin-top:64px}

/* ───────────── LEGAL PAGES ───────────── */
.doc{padding:132px 0 0}
.doc .wrap{max-width:820px}
.doc h1{font:400 52px/58px var(--cal);letter-spacing:-.6px;color:var(--ink)}
.doc .upd{margin-top:12px;font:400 15px/1.4 var(--ins);color:var(--ink50)}
.doc h2{margin-top:48px;font:400 26px/32px var(--cal);color:var(--ink)}
.doc h3{margin-top:28px;font:600 18px/26px var(--ins);color:var(--ink)}
.doc p,.doc li{font:400 17px/27px var(--ins);color:var(--ink60)}
.doc p{margin-top:14px}
.doc ul{margin-top:12px;padding-left:20px;list-style:disc}
.doc li+li{margin-top:6px}
.doc a{color:var(--violet)}
.doc table{width:100%;margin-top:16px;border-collapse:collapse;table-layout:fixed;font:400 15px/22px var(--ins);color:var(--ink60)}
.doc th,.doc td{overflow-wrap:anywhere;hyphens:auto}
.doc th,.doc td{padding:12px 12px 12px 0;border-bottom:1px solid rgba(0,0,0,.1);text-align:left;vertical-align:top}
.doc th{color:var(--ink);font-weight:600}
.doc .todo{background:#fff3c4;color:#5a4400;padding:0 4px;border-radius:3px}
.doc .box{margin-top:20px;padding:20px 22px;border-radius:16px;background:var(--mist)}
.min-top{position:absolute;top:0;left:0;right:0;z-index:5}
.min-top .wrap{display:flex;align-items:center;justify-content:space-between;height:76px}
.min-top .lp-logo{color:var(--ink)}
.min-top .back-link{font:500 15px/1 var(--sat);color:var(--ink75);text-decoration:none}
.min-top .back-link:hover{color:var(--ink)}

/* landing + thank-you responsive */
@media(max-width:1199.98px){
  .lp-hero .wrap{grid-template-columns:minmax(0,1fr) minmax(0,500px);gap:40px}
  .lp-hero h1{font-size:52px;line-height:56px}
  .lp-faq{grid-template-columns:1fr;gap:40px}
  .tl{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:40px}
}
/* service cards: below 1000px three columns get too narrow for the windows → one column, window kept at phone width */
@media(max-width:999.98px){
  .svc{grid-template-columns:1fr;max-width:560px}
  .svc-c .win{left:0;right:0;width:min(420px,calc(100% - 44px));margin:0 auto}
}
@media(max-width:809.98px){
  .svc{margin-top:36px;max-width:none}
  .lp-top .wrap{height:64px}
  .lp-logo b{font-size:26px}
  .lp-top .pill{display:none}
  .lp-hero .shade{background:linear-gradient(180deg,rgba(4,3,33,.55) 0%,rgba(4,3,33,.78) 45%,rgba(4,3,33,.94) 100%)}
  .lp-hero .wrap{grid-template-columns:1fr;gap:32px;padding-top:96px;padding-bottom:48px;min-height:0}
  .lp-hero h1{font-size:40px;line-height:44px}
  .lp-hero .sub{font-size:17px;line-height:25px}
  .lp-sec{padding-top:88px}
  .sec-head h2{font-size:32px;line-height:38px}
  .sec-head p{font-size:17px;line-height:25px}
  .tl{grid-template-columns:1fr;border-top:0;border-left:1.5px solid var(--sky);margin-left:6px;row-gap:28px}
  .tl li{padding:0 0 0 24px}
  .tl li::before{top:2px;left:-6.5px}
  .lp-band .band-in{flex-direction:column;align-items:center;padding:80px 0 40px}
  .lp-band .line{font-size:30px;line-height:36px}
  .ty{padding-top:96px}
  .ty-card{padding:44px 24px 36px;border-radius:24px}
  .ty-card h1{font-size:38px;line-height:42px}
  .ty-card .lead{font-size:17px;line-height:25px}
  .ty-next{grid-template-columns:1fr}
  .ty-steps,.prep{margin-top:72px}
  .prep{grid-template-columns:1fr;gap:24px;padding:28px 22px}
  .doc{padding-top:96px}
  .doc h1{font-size:36px;line-height:42px}
  .doc table{font-size:13px;line-height:19px}
  .doc th,.doc td{padding-right:8px}
}