@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root { color-scheme: light; --ink:#080d19; --muted:#536078; --purple:#5c3df2; --purple-soft:#b49bff; --yellow:#ffd63f; --page:#fbfbfd; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-width:320px; color:var(--ink); background:radial-gradient(circle at 50% 40%, #fff 0, #fbfbfd 58%, #f6f5fa 100%); font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
.topbar { width:min(1480px,calc(100% - 48px)); min-height:92px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; position:relative; z-index:20; }
.brand { display:inline-flex; align-items:center; gap:15px; font-size:22px; font-weight:750; letter-spacing:-.04em; }
.brand-mark,.product-mark { display:grid; place-items:center; flex:none; overflow:hidden; border-radius:13px; }
.brand-mark { width:48px; height:48px; background:#fff; box-shadow:0 7px 22px rgba(66,43,187,.13); }
.brand-mark img,.invoice-mark img { width:100%; height:100%; object-fit:contain; }
.topbar-actions { display:flex; align-items:center; gap:26px; }
.contact-link,.back-link { font-size:14px; font-weight:500; transition:opacity .2s ease; }
.contact-link:hover,.back-link:hover { opacity:.58; }
.language-menu { position:relative; }
.language-button { min-width:80px; height:40px; padding:0 12px; display:flex; align-items:center; justify-content:center; gap:8px; border:1px solid #e4e4eb; border-radius:999px; color:#252a37; background:rgba(255,255,255,.82); cursor:pointer; }
.language-button svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.6; }
.language-button svg:last-child { width:12px; height:12px; }
.language-button span { font-size:12px; font-weight:700; }
.language-popover { position:absolute; top:48px; right:0; width:176px; padding:7px; border:1px solid #e5e4eb; border-radius:16px; background:#fff; box-shadow:0 20px 45px rgba(23,17,46,.16); }
.language-popover button { width:100%; padding:9px 10px; border:0; border-radius:10px; display:grid; grid-template-columns:28px 1fr 15px; align-items:center; text-align:left; background:transparent; color:#252a37; cursor:pointer; }
.language-popover button:hover { background:#f4f2fb; }
.language-popover b { font-size:11px; color:#7160ca; }.language-popover span { font-size:13px; }.language-popover i { opacity:0; font-style:normal; }.language-popover [aria-selected="true"] i { opacity:1; }
.home-main { width:min(1480px,calc(100% - 48px)); margin:0 auto; padding:7px 0 36px; }
.hero { max-width:900px; margin:0 auto; padding:8px 18px 34px; text-align:center; animation:rise .7s both; }
.eyebrow { display:inline-flex; align-items:center; gap:10px; margin-bottom:23px; color:#583cf2; font-size:12px; font-weight:700; letter-spacing:.26em; text-transform:uppercase; }
.eyebrow i { width:10px; height:10px; border-radius:50%; background:#c8b8ff; box-shadow:0 0 0 7px rgba(166,139,255,.14); }
.hero h1 { margin:0; font-size:clamp(44px,5vw,74px); line-height:.98; letter-spacing:-.064em; }
.hero h1 span,.hero h1 em { display:block; font-style:normal; }
.hero h1 em { margin-top:7px; background:linear-gradient(95deg,#5f3df1,#7557ee); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero p { max-width:640px; margin:25px auto 0; color:var(--muted); font-size:18px; line-height:1.55; letter-spacing:-.02em; }
.solution-grid { display:grid; grid-template-columns:1fr 1.03fr; gap:18px; }
.solution-card { --mouse-x:50%; --mouse-y:50%; position:relative; min-height:556px; overflow:hidden; isolation:isolate; border-radius:24px; transition:transform .45s cubic-bezier(.2,.75,.2,1),box-shadow .45s ease; animation:rise .8s .12s both; }
.solution-card::after { content:""; position:absolute; inset:0; z-index:5; pointer-events:none; opacity:0; background:radial-gradient(circle at var(--mouse-x) var(--mouse-y),rgba(255,255,255,.3),transparent 27%); transition:opacity .35s ease; }
.solution-card:hover { transform:translateY(-9px) scale(1.006); }
.solution-card:hover::after { opacity:1; }
.solution-card:hover .card-button svg { transform:translateX(5px); }
.invoice-card { border:1px solid #e5e3ed; background:radial-gradient(circle at 84% 79%,rgba(147,117,255,.22),transparent 28%),linear-gradient(135deg,#fff 0%,#fbfaff 58%,#f2efff 100%); box-shadow:0 24px 52px rgba(67,47,121,.08); }
.invoice-card:hover { box-shadow:0 34px 70px rgba(88,61,193,.18); }
.studio-card { color:#fff; background:#0b0805; box-shadow:0 24px 52px rgba(20,14,8,.17); }
.studio-card:hover { box-shadow:0 34px 72px rgba(20,14,8,.32); }
.card-copy { position:relative; z-index:4; width:50%; min-width:340px; height:100%; padding:43px 18px 40px 40px; display:flex; flex-direction:column; align-items:flex-start; }
.product-brand { display:flex; align-items:center; gap:14px; font-size:21px; font-weight:600; letter-spacing:-.035em; }
.product-brand b { color:var(--purple); }.studio-brand b { color:var(--yellow); }
.product-mark { width:47px; height:47px; border:1px solid rgba(255,255,255,.3); background:#0b0b0b; box-shadow:0 10px 24px rgba(0,0,0,.3); }
.invoice-mark { background:#fff; box-shadow:0 8px 22px rgba(82,53,215,.18); }
.studio-mark img { width:82%; height:82%; object-fit:contain; }
.solution-card h2 { margin:38px 0 22px; font-size:clamp(31px,2.7vw,42px); line-height:1.02; letter-spacing:-.052em; }
.accent-line { width:49px; height:5px; border-radius:999px; background:#aa8cff; }
.studio-card .accent-line { background:var(--yellow); }
.solution-card p { max-width:315px; margin:19px 0 30px; color:#59667d; font-size:16px; line-height:1.65; }
.studio-card p { color:rgba(255,255,255,.85); }
.card-button { min-height:54px; margin-top:auto; padding:0 22px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center; gap:26px; font-size:15px; font-weight:650; }
.card-button svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.8; transition:transform .25s ease; }
.invoice-button { color:#fff; background:linear-gradient(105deg,#5637f0,#7046f5); box-shadow:0 13px 26px rgba(91,58,238,.24); }
.studio-button { color:#161208; background:linear-gradient(105deg,#ffd633,#ffdf62); box-shadow:0 13px 30px rgba(255,203,38,.22); }
.studio-photo { position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; object-position:57% center; transition:transform 1.1s cubic-bezier(.2,.7,.1,1),filter .5s ease; }
.studio-card:hover .studio-photo { transform:scale(1.045); filter:saturate(1.08); }
.studio-shade { position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(0,0,0,.98) 0%,rgba(0,0,0,.91) 31%,rgba(0,0,0,.39) 58%,rgba(0,0,0,.06) 100%); }
.invoice-visual { position:absolute; inset:62px 25px 44px 48%; z-index:2; }
.ui-card { position:absolute; border:1px solid rgba(121,90,232,.13); border-radius:12px; background:rgba(255,255,255,.91); box-shadow:0 15px 30px rgba(81,54,163,.13); backdrop-filter:blur(8px); transition:transform .45s ease; }
.invoice-card:hover .invoice-document { transform:translate(-3px,-6px) rotate(-1deg); }.invoice-card:hover .invoice-email { transform:translate(5px,-4px); }.invoice-card:hover .invoice-settings { transform:translate(-5px,5px); }.invoice-card:hover .invoice-status { transform:translate(5px,5px); }
.invoice-document { left:3%; top:0; width:116px; height:179px; padding:22px 15px; clip-path:polygon(0 0,77% 0,100% 15%,100% 100%,0 100%); }
.invoice-document span { display:block; width:28px; height:28px; margin:-8px 0 17px; border-radius:50%; background:#6243f2; }.invoice-document b,.invoice-document i { display:block; height:4px; margin:7px 0; border-radius:4px; background:#ddd6f7; }.invoice-document b { width:44px;background:#8b73e5; }.invoice-document strong { display:block;width:33px;height:20px;margin:38px 0 0 auto;border-radius:4px;background:#6440f0; }
.invoice-email { right:0; top:44px; width:136px; height:126px; padding:22px 17px; }.ui-card em { position:absolute; top:9px; right:11px; color:#725bc7; font-size:10px; font-style:normal; }.invoice-email span,.invoice-email i,.invoice-settings i,.invoice-status i { display:block; height:5px; margin:9px 0; border-radius:5px; background:#ddd7f5; }.invoice-email span { width:55px;background:#8d78df; }
.invoice-settings { left:0; bottom:0; width:120px; height:151px; padding:25px 14px; }.invoice-settings span { display:block;width:24px;height:24px;border-radius:50%;background:#5f40ef; }.invoice-settings i:nth-of-type(1) { width:75%; }.invoice-settings i:nth-of-type(2) { width:90%; }.invoice-settings i:nth-of-type(3) { width:65%; }
.invoice-status { right:4%; bottom:0; width:144px; height:143px; padding:27px 14px; }.status-check { display:grid!important;place-items:center;width:32px;height:32px!important;border-radius:50%!important;color:#2ba45e;background:#dcf8e6!important;font-weight:700; }.invoice-status i { width:78%; }
.flow-line { position:absolute; z-index:-1; border:3px solid rgba(127,96,237,.22); border-left:0; }.line-one { left:104px; top:85px; width:70px; height:78px; border-radius:0 35px 0 0; }.line-two { left:101px; bottom:70px; width:80px; height:70px; border-radius:0 0 35px 0; }.line-three { left:58px; top:167px; width:115px; height:66px; border-top:0; border-radius:0 0 35px 0; }.flow-dot { position:absolute; display:grid;place-items:center;width:23px;height:23px;border-radius:50%;color:#fff;background:#7b5bed;font-size:18px;box-shadow:0 6px 12px rgba(89,59,200,.25); }.dot-one { left:48%;top:27%; }.dot-two { left:47%;top:50%; }.dot-three { left:48%;bottom:17%; }
@keyframes rise { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }

.studio-page { color:#f8f5ed; background:#090806; }
.topbar-dark { color:#fff; background:#090806; }.topbar-dark .brand-mark { border:1px solid #332f28; background:#0b0b0b; box-shadow:none; }.studio-page .topbar .brand b { color:var(--yellow); }.topbar-dark .language-button { color:#fff; border-color:#332f28; background:#17140f; }.topbar-dark .back-link { color:#aaa59a; }
.studio-hero { position:relative; min-height:570px; display:flex; align-items:center; overflow:hidden; background:radial-gradient(circle at 75% 20%,#332815 0,transparent 30%),#090806; }
.studio-hero-copy { position:relative; width:min(1320px,calc(100% - 48px)); margin:auto; padding:80px 0; }
.studio-eyebrow { color:#ffda43; }.studio-eyebrow i { background:#ffda43;box-shadow:0 0 0 7px rgba(255,218,67,.11); }
.studio-hero h1 { max-width:730px; margin:3px 0 25px; font-size:clamp(56px,7vw,102px); line-height:.91; letter-spacing:-.065em; }
.studio-hero p { max-width:580px; margin:0 0 35px; color:#c9c3b8; font-size:19px; line-height:1.7; }
.studio-hero .card-button { margin:0; }
.studio-showcase { width:min(1480px,calc(100% - 48px)); margin:0 auto; padding:0 0 35px; }.studio-showcase-frame { position:relative; overflow:hidden; border:1px solid #302c25; border-radius:22px; background:#11100d; box-shadow:0 35px 90px rgba(0,0,0,.4); }.studio-showcase img { display:block;width:100%;height:auto; }.studio-showcase-frame>span { position:absolute;left:20px;bottom:20px;max-width:calc(100% - 40px);padding:10px 14px;border:1px solid rgba(255,255,255,.24);border-radius:999px;color:#fff;background:rgba(0,0,0,.58);backdrop-filter:blur(12px);font-size:12px;font-weight:600; }
.studio-features { width:min(1320px,calc(100% - 48px)); margin:0 auto; padding:100px 0 120px; }
.studio-heading span { color:#ffda43; font-size:12px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; }.studio-heading h2 { max-width:750px; margin:18px 0 55px; font-size:clamp(40px,5vw,66px); line-height:1; letter-spacing:-.055em; }
.studio-feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }.studio-feature-grid article { min-height:250px; padding:32px; border:1px solid #302c25; border-radius:18px; background:#11100d; }.studio-feature-grid article>span { color:#ffda43; font-size:12px; font-weight:700; }.studio-feature-grid h3 { margin:66px 0 12px; font-size:22px; letter-spacing:-.03em; }.studio-feature-grid p { margin:0; color:#aaa49a; line-height:1.65; }

@media (max-width:1100px) { .solution-grid { grid-template-columns:1fr; }.solution-card { min-height:520px; }.card-copy { width:48%; }.studio-card .card-copy { width:50%; }.invoice-visual { inset-right:45px; }.hero { padding-top:15px; } }
@media (max-width:700px) {
  .topbar,.home-main,.studio-hero-copy,.studio-features { width:min(100% - 28px,1480px); }.topbar { min-height:74px; }.brand { gap:10px;font-size:19px; }.brand-mark { width:40px;height:40px;border-radius:11px; }.topbar-actions { gap:13px; }.back-link { display:none; }.language-button { min-width:66px;height:36px;padding:0 9px; }.contact-link { font-size:13px; }
  .home-main { padding-top:12px; }.hero { padding:20px 0 28px; }.eyebrow { font-size:10px; letter-spacing:.18em; margin-bottom:18px; }.hero h1 { font-size:clamp(39px,12vw,56px);line-height:1.01; }.hero p { margin-top:19px;font-size:15px; }
  .solution-grid { gap:14px; }.solution-card { min-height:610px;border-radius:19px; }.card-copy,.studio-card .card-copy { width:100%; min-width:0; padding:31px 27px 28px; }.solution-card h2 { margin:28px 0 18px;font-size:35px; }.solution-card p { max-width:285px;font-size:14px; }.card-button { min-height:50px;padding:0 18px; }
  .invoice-visual { inset:275px 22px 87px 31%; transform:scale(.86); transform-origin:right center; }.invoice-card .card-button { position:absolute;bottom:27px;left:27px; }.studio-photo { object-position:64% center; }.studio-shade { background:linear-gradient(180deg,rgba(0,0,0,.94) 0%,rgba(0,0,0,.73) 50%,rgba(0,0,0,.28) 100%); }.studio-card .card-copy { padding-right:20%; }.studio-card p { max-width:250px; }
  .studio-hero { min-height:590px;align-items:flex-end; }.studio-hero-copy { padding:100px 5px 65px; }.studio-hero h1 { font-size:53px; }.studio-hero p { font-size:16px; }.studio-showcase { width:calc(100% - 20px);padding-bottom:10px; }.studio-showcase-frame { border-radius:14px; }.studio-showcase-frame>span { position:static;display:block;max-width:none;border:0;border-radius:0;background:#17140f;font-size:10px; }.studio-features { padding:70px 0 80px; }.studio-feature-grid { grid-template-columns:1fr; }.studio-feature-grid article { min-height:190px; }.studio-feature-grid h3 { margin-top:42px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important; } }