:root{--bg:#07080d;--panel:#0d0f17;--panel2:#121520;--line:#222633;--text:#f7f7fb;--muted:#a6acba;--violet:#7447ff;--violet2:#a18cff;--cyan:#19c3ff;--green:#40e0a1;--max:1500px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.6;overflow-x:hidden}button,input,select,textarea{font:inherit}a{color:inherit;text-decoration:none}.wrap{width:min(calc(100% - 40px),var(--max));margin:auto}.noise{position:fixed;inset:0;pointer-events:none;opacity:.035;z-index:30;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E")}
nav{position:fixed;z-index:20;top:0;left:0;right:0;border-bottom:1px solid rgba(255,255,255,.07);background:rgba(7,8,13,.82);backdrop-filter:blur(18px)}.nav-inner{height:82px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;padding:0;border:0;background:none;box-shadow:none}.brand img{display:block;width:190px;height:auto}.nav-links{display:flex;align-items:center;gap:21px;font-size:14px;color:#b5b8c5}.nav-links a{padding:8px 0}.nav-links a:hover,.nav-links a.active{color:#fff}.nav-links a.active{box-shadow:inset 0 -1px var(--violet2)}.btn{border:0;border-radius:999px;padding:12px 19px;background:#fff;color:#090a0f;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:9px;transition:transform .2s}.btn:hover{transform:translateY(-2px)}.btn-primary{background:linear-gradient(105deg,var(--violet),#5f35e8);color:#fff;box-shadow:0 10px 35px rgba(116,71,255,.28)}.btn-ghost{background:transparent;color:#fff;border:1px solid var(--line)}.menu{display:none;background:none;border:0;color:#fff;font-size:24px}
.brand{order:1}.nav-links{order:2;margin-left:auto}.language-switcher{position:relative;order:3}.nav-cta{order:4}.menu{order:5}.language-btn{height:42px;padding:0 11px;border:1px solid #2d3241;border-radius:999px;background:rgba(15,18,27,.92);color:#e7e8ee;display:flex;align-items:center;gap:7px;cursor:pointer}.language-btn:hover,.language-switcher.open .language-btn{border-color:#6f55d6;background:#171a26}.language-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.language-btn span{font-size:12px;font-weight:750;letter-spacing:.06em}.language-btn .language-chevron{width:13px;height:13px;transition:transform .2s}.language-switcher.open .language-chevron{transform:rotate(180deg)}.language-menu{display:none;position:absolute;right:0;top:calc(100% + 11px);width:215px;padding:8px;border:1px solid #2d3241;border-radius:16px;background:#10131c;box-shadow:0 22px 60px rgba(0,0,0,.45)}.language-switcher.open .language-menu{display:block}.language-option{width:100%;min-height:44px;padding:10px 11px;border:0;border-radius:10px;background:transparent;color:#a2a8b8;display:flex;align-items:center;justify-content:space-between;text-align:left}.language-option.current{color:#fff;background:rgba(116,71,255,.14)}button.language-option{cursor:not-allowed;opacity:.72}.language-option span{font-size:14px}.language-option small{font-size:11px;color:#8170d9}
.page-hero{position:relative;padding:164px 0 86px;border-bottom:1px solid var(--line);overflow:hidden}.page-hero:after{content:"";position:absolute;width:650px;height:650px;right:-130px;top:-270px;border-radius:50%;background:radial-gradient(circle,rgba(116,71,255,.22),transparent 68%);pointer-events:none}.page-hero.has-image{min-height:640px;display:flex;align-items:center;isolation:isolate}.page-hero.has-image:before{content:"";position:absolute;inset:0;z-index:-2;background-size:cover;background-position:68% center;background-repeat:no-repeat}.page-hero.has-image:after{z-index:-1;width:auto;height:auto;inset:0;border-radius:0;background:linear-gradient(90deg,rgba(7,8,13,.98) 0%,rgba(7,8,13,.88) 34%,rgba(7,8,13,.48) 59%,rgba(7,8,13,.12) 85%),linear-gradient(0deg,rgba(7,8,13,.7),transparent 58%)}.page-hero.has-image .wrap{position:relative;z-index:2}.page-hero.has-image .lead{color:#c5c9d4}.services-hero:before,.pricing-hero:before{background-image:url("services-hero.webp")}.portfolio-hero:before{background-image:url("portfolio-hero.webp")}.booking-hero:before{background-image:url("booking-crm-hero.webp")}.contact-hero:before{background-image:url("contact-hero.webp")}.eyebrow{display:inline-flex;align-items:center;gap:9px;color:#beb4ff;text-transform:uppercase;letter-spacing:.16em;font-size:12px;font-weight:750}.eyebrow:before{content:"";width:28px;height:1px;background:var(--violet2)}h1{font-size:clamp(42px,5.2vw,66px);line-height:1;letter-spacing:-.06em;margin:22px 0 24px;max-width:940px}.gradient{color:transparent;background:linear-gradient(100deg,#fff 5%,#a790ff 57%,#32c8fa);background-clip:text}.lead{max-width:720px;color:#afb4c2;font-size:18px;margin:0}.hero-actions{display:flex;gap:12px;margin-top:31px;flex-wrap:wrap}
section{padding:90px 0}.section-head{display:flex;justify-content:space-between;align-items:end;gap:35px;margin-bottom:38px}.kicker{color:var(--violet2);font-size:12px;font-weight:750;letter-spacing:.15em;text-transform:uppercase}.section-head h2{font-size:clamp(32px,3.6vw,48px);line-height:1.08;letter-spacing:-.045em;margin:11px 0 0;max-width:740px}.section-head p{color:var(--muted);max-width:430px;margin:0}.grid{display:grid;gap:16px}.grid-2{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(3,1fr)}.card{position:relative;border:1px solid var(--line);border-radius:22px;padding:29px;background:linear-gradient(145deg,#10121b,#0b0d14);overflow:hidden}.card:after{content:"";position:absolute;width:170px;height:170px;border-radius:50%;right:-90px;bottom:-105px;background:radial-gradient(circle,rgba(116,71,255,.18),transparent 68%)}.card-num{font:11px ui-monospace,SFMono-Regular,monospace;color:#71788a}.card h2,.card h3{letter-spacing:-.035em}.card h3{font-size:23px;margin:39px 0 10px}.card p{color:var(--muted);margin:0}.feature-list{list-style:none;padding:0;margin:22px 0 0}.feature-list li{padding:10px 0;border-top:1px solid #1f2330;color:#c7cad3;font-size:14px}.feature-list li:before{content:"✓";color:var(--green);margin-right:9px}.band{background:#0a0c12;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.service-row{display:grid;grid-template-columns:80px .8fr 1.2fr;gap:28px;align-items:start;padding:31px 0;border-bottom:1px solid var(--line)}.service-row:first-child{border-top:1px solid var(--line)}.service-row .number{color:#8170d9;font:12px ui-monospace,SFMono-Regular,monospace}.service-row h3{margin:0;font-size:24px;letter-spacing:-.035em}.service-row p{margin:0;color:var(--muted)}
.portfolio-card{min-height:430px;display:flex;flex-direction:column;justify-content:flex-end}.portfolio-visual{position:absolute;inset:0 0 150px;background:linear-gradient(135deg,#181b28,#0b0d14);border-bottom:1px solid var(--line)}.portfolio-visual:before{content:"";position:absolute;inset:35px;border:1px solid #303647;border-radius:15px;background:linear-gradient(150deg,rgba(116,71,255,.2),transparent 50%)}.portfolio-visual .screen{position:absolute;left:55px;right:55px;top:55px;height:150px;border:1px solid #3a4053;border-radius:11px;background:#0c0e15;box-shadow:18px 18px 0 rgba(25,195,255,.07)}.portfolio-visual .screen:before{content:"";position:absolute;left:18px;right:35%;top:25px;height:9px;border-radius:9px;background:#6f49ef;box-shadow:0 24px 0 #262b3a,0 48px 0 #262b3a}.portfolio-copy{position:relative;z-index:2}.portfolio-copy small{color:#a893ff;text-transform:uppercase;letter-spacing:.12em;font-size:12px}.portfolio-copy h3{margin:7px 0 7px;font-size:23px}.portfolio-copy p{font-size:14px}
.flow{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.flow-step{position:relative;padding:22px 17px;border:1px solid var(--line);border-radius:16px;background:#0e1119;min-height:150px}.flow-step:not(:last-child):after{content:"→";position:absolute;right:-11px;top:22px;z-index:2;color:#8570ef}.flow-step span{display:block;color:#8372dc;font:11px ui-monospace,SFMono-Regular,monospace}.flow-step strong{display:block;margin:26px 0 5px}.flow-step small{color:var(--muted);font-size:14px}
.dashboard{border:1px solid #2a2f3e;border-radius:23px;background:#0c0e15;overflow:hidden}.dash-bar{height:52px;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 19px;gap:7px}.dash-bar i{width:7px;height:7px;border-radius:50%;background:#353a4b}.dash-bar i:first-child{background:var(--violet)}.dash-grid{display:grid;grid-template-columns:180px 1fr}.dash-side{padding:18px;border-right:1px solid var(--line)}.dash-side span{display:block;padding:10px;color:#868da0;font-size:13px}.dash-side span.active{background:rgba(116,71,255,.12);color:#baacff;border-radius:8px}.dash-main{padding:24px}.pipeline{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.column{background:#11141d;border:1px solid #222635;border-radius:12px;padding:12px}.column>span{font-size:12px;color:#8b92a5}.lead-card{margin-top:10px;padding:12px;border-radius:9px;background:#181c28;font-size:13px}.lead-card small{display:block;color:#8b92a5;margin-top:5px}
.contact-layout{display:grid;grid-template-columns:.75fr 1.25fr;gap:40px}.contact-note{position:sticky;top:120px;align-self:start}.contact-note h2{font-size:clamp(28px,3.2vw,34px);line-height:1.1;letter-spacing:-.045em}.contact-note p{color:var(--muted)}.contact-points{margin-top:28px}.contact-point{padding:18px 0;border-top:1px solid var(--line)}.contact-point strong{display:block}.contact-point span{color:var(--muted);font-size:14px}.form-card{border:1px solid var(--line);border-radius:24px;padding:30px;background:#0e1018}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.field{display:flex;flex-direction:column;gap:7px}.field.full{grid-column:1/-1}.field label{font-size:14px;color:#aeb3c1}.field input,.field select,.field textarea{width:100%;background:#090b11;border:1px solid #2c3040;border-radius:11px;padding:13px;color:#fff;outline:none}.field textarea{min-height:120px;resize:vertical}.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--violet)}.submit{width:100%;margin-top:16px}.success{display:none;text-align:center;padding:55px 20px}.success span{display:block;font-size:38px;color:var(--green)}
.pricing-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.price-card{border:1px solid var(--line);border-radius:26px;padding:34px;background:linear-gradient(145deg,#11141e,#0b0d14);display:flex;flex-direction:column}.price-card.featured{border-color:#5e45bc;box-shadow:0 18px 60px rgba(116,71,255,.13)}.price-label{font-size:13px;color:#b7a9ff;text-transform:uppercase;letter-spacing:.12em;font-weight:750}.price{font-size:56px;line-height:1;margin:22px 0 10px;letter-spacing:-.055em}.price small{font-size:15px;color:var(--muted);letter-spacing:0}.price-card>p{color:var(--muted);margin:0 0 24px}.price-card .feature-list{margin-bottom:30px}.price-card .btn{margin-top:auto}.price-note{margin-top:18px;padding:25px 28px;border:1px solid var(--line);border-radius:20px;background:#0d0f17;display:flex;justify-content:space-between;align-items:center;gap:24px}.price-note h3{margin:0 0 4px;font-size:22px}.price-note p{margin:0;color:var(--muted)}.hourly-rate{font-size:25px;font-weight:800;white-space:nowrap;color:#fff}.simple-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.simple-step{border-top:1px solid #38304f;padding:22px 4px}.simple-step span{color:#9c84ff;font:12px ui-monospace,SFMono-Regular,monospace}.simple-step h3{margin:18px 0 7px;font-size:20px}.simple-step p{margin:0;color:var(--muted);font-size:15px}
.cta-box{text-align:center;border:1px solid #302a4d;border-radius:28px;padding:72px 24px;background:radial-gradient(circle at 50% 100%,rgba(116,71,255,.2),transparent 50%),#0d0f17}.cta-box h2{font-size:clamp(34px,4.2vw,54px);line-height:1;letter-spacing:-.05em;margin:12px auto 18px;max-width:780px}.cta-box p{color:var(--muted);max-width:600px;margin:0 auto 28px}
footer{border-top:1px solid var(--line);padding:30px 0;color:#8b91a2;font-size:14px}.footer-inner{display:flex;justify-content:space-between;gap:22px;align-items:center}.footer-inner .brand img{width:166px}.footer-links{display:flex;flex-wrap:wrap;gap:12px 20px}
.reveal{opacity:0;transform:translateY(16px);transition:.65s ease}.reveal.visible{opacity:1;transform:none}
@media(max-width:900px){.nav-links{display:none;position:absolute;top:82px;left:0;right:0;background:#0b0d14;padding:22px;flex-direction:column;border-bottom:1px solid var(--line)}.nav-links.open{display:flex}.menu{display:block}.nav-cta{display:none}.grid-3{grid-template-columns:1fr 1fr}.flow{grid-template-columns:1fr 1fr}.flow-step:not(:last-child):after{display:none}.contact-layout{grid-template-columns:1fr}.contact-note{position:static}.section-head{align-items:start;flex-direction:column}.dash-grid{grid-template-columns:1fr}.dash-side{display:none}.simple-steps{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.wrap{width:min(calc(100% - 28px),var(--max))}.brand img{width:155px}.page-hero{padding:137px 0 65px}.page-hero.has-image{min-height:0}.page-hero.has-image:before{background-position:64% center}h1{font-size:42px}.lead{font-size:16px}section{padding:67px 0}.grid-2,.grid-3,.flow,.pricing-grid,.simple-steps{grid-template-columns:1fr}.service-row{grid-template-columns:42px 1fr}.service-row p{grid-column:2}.portfolio-card{min-height:400px}.portfolio-visual .screen{left:30px;right:30px}.dashboard{overflow-x:auto}.dash-main{min-width:560px}.form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}.price-card{padding:26px}.price{font-size:48px}.price-note{align-items:flex-start;flex-direction:column}.footer-inner{flex-direction:column;align-items:flex-start}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.btn{transition:none}}
.page-hero.has-image{background-size:cover;background-position:68% center;background-repeat:no-repeat}
.page-hero.has-image:before,.page-hero.has-image:after{display:none}
.services-hero,.pricing-hero{background-image:linear-gradient(90deg,rgba(7,8,13,.98) 0%,rgba(7,8,13,.84) 34%,rgba(7,8,13,.32) 59%,rgba(7,8,13,.04) 85%),linear-gradient(0deg,rgba(7,8,13,.5),transparent 58%),url("services-hero.webp")}
.portfolio-hero{background-image:linear-gradient(90deg,rgba(7,8,13,.98) 0%,rgba(7,8,13,.84) 34%,rgba(7,8,13,.32) 59%,rgba(7,8,13,.04) 85%),linear-gradient(0deg,rgba(7,8,13,.5),transparent 58%),url("portfolio-hero.webp")}
.booking-hero{background-image:linear-gradient(90deg,rgba(7,8,13,.98) 0%,rgba(7,8,13,.84) 34%,rgba(7,8,13,.32) 59%,rgba(7,8,13,.04) 85%),linear-gradient(0deg,rgba(7,8,13,.5),transparent 58%),url("booking-crm-hero.webp")}
.contact-hero{background-image:linear-gradient(90deg,rgba(7,8,13,.98) 0%,rgba(7,8,13,.84) 34%,rgba(7,8,13,.32) 59%,rgba(7,8,13,.04) 85%),linear-gradient(0deg,rgba(7,8,13,.5),transparent 58%),url("contact-hero.webp")}
@media(max-width:620px){.page-hero.has-image{background-position:64% center}}
.demo-page-hero{min-height:600px}.demo-selector{padding:42px 0;border-bottom:1px solid var(--line)}.demo-jump-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.demo-jump-grid a{padding:20px 22px;border:1px solid var(--line);border-radius:18px;background:#0d1018;display:grid;grid-template-columns:36px 1fr;column-gap:12px;align-items:center;transition:border-color .2s,transform .2s}.demo-jump-grid a:hover{border-color:#5d48bd;transform:translateY(-2px)}.demo-jump-grid span{grid-row:1/3;color:#8c75f6;font:12px ui-monospace,SFMono-Regular,monospace}.demo-jump-grid strong{font-size:17px}.demo-jump-grid small{color:var(--muted);font-size:14px}.demo-section{scroll-margin-top:80px}.demo-intro{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:end;margin-bottom:38px}.demo-intro h2{font-size:clamp(32px,3.6vw,48px);line-height:1.06;letter-spacing:-.05em;margin:13px 0 15px;max-width:760px}.demo-intro p{color:var(--muted);font-size:17px;max-width:620px;margin:0}.demo-feature-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 24px}.demo-feature-list li{padding:10px 0;border-top:1px solid #252938;color:#c9cdd7;font-size:14px}.demo-feature-list li:before{content:"✓";color:#38d9b1;margin-right:9px}.product-shot{border:1px solid #2b3040;border-radius:25px;background:#090b11;overflow:hidden;box-shadow:0 30px 90px rgba(0,0,0,.34)}.shot-top{height:55px;padding:0 20px;border-bottom:1px solid #252936;background:#11141d;display:flex;align-items:center;gap:14px}.shot-top strong{font-size:14px}.shot-top>span{margin-left:auto;color:#98a0b1;font-size:12px}.shot-dots{display:flex;gap:6px}.shot-dots i{width:7px;height:7px;border-radius:50%;background:#363b4b}.shot-dots i:first-child{background:#7551ef}.shot-shell{display:grid;grid-template-columns:175px 1fr;min-height:540px}.shot-shell aside{padding:22px 14px;background:#0d1017;border-right:1px solid #242936;display:flex;flex-direction:column;gap:5px}.shot-shell aside b{width:42px;height:42px;margin:0 8px 17px;border-radius:13px;background:linear-gradient(135deg,#7149f4,#25bff0);display:grid;place-items:center;color:white}.shot-shell aside span{padding:10px 12px;border-radius:9px;color:#727a8e;font-size:12px}.shot-shell aside span.on{color:#fff;background:rgba(116,71,255,.16)}.shot-main{padding:26px;min-width:0;background:radial-gradient(circle at 90% 0,rgba(116,71,255,.08),transparent 35%),#0a0d13}.shot-heading{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:21px}.shot-heading small{color:#8b93a6;font-size:11px;letter-spacing:.13em}.shot-heading h3{font-size:25px;margin:3px 0 0}.shot-heading button{border:0;border-radius:10px;padding:10px 14px;background:#6942e9;color:#fff;font-size:13px;font-weight:700}.metric-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:13px}.metric-row article{padding:16px;border:1px solid #242a38;border-radius:13px;background:#11151e}.metric-row small{display:block;color:#949bad;font-size:12px}.metric-row strong{display:block;font-size:27px;margin:6px 0 3px}.metric-row em{font-style:normal;color:#5dcfb2;font-size:11px}.shot-content{display:grid;grid-template-columns:1.35fr .65fr;gap:12px}.mini-panel{border:1px solid #242a38;border-radius:14px;background:#10141d;padding:16px;min-width:0}.panel-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:13px}.panel-title strong{font-size:14px}.panel-title span{color:#9384ea;font-size:11px}.booking-line{display:grid;grid-template-columns:56px 1fr 1fr auto;gap:10px;align-items:center;padding:11px 0;border-top:1px solid #252a36;font-size:12px}.booking-line time{color:#9280ed}.booking-line span{color:#8b92a5}.booking-line i,.model-row i,.wa-booking>i{font-style:normal;padding:4px 8px;border-radius:999px;font-size:11px;white-space:nowrap}.confirmed{color:#66d9ba;background:rgba(39,188,146,.12)}.waiting{color:#e1b968;background:rgba(218,166,64,.12)}.new{color:#8bcdf3;background:rgba(46,166,227,.12)}.quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.quick-grid div{min-height:70px;padding:11px;border-radius:10px;background:#171b26;color:#a0a7b6;font-size:12px}.quick-grid b{display:block;color:#fff;font-size:18px;margin-top:8px}.agency-shot .shot-shell aside b{background:linear-gradient(135deg,#7d4df3,#e554a7)}.agency-content{grid-template-columns:1.05fr .95fr}.model-row{display:grid;grid-template-columns:36px 1fr auto auto;align-items:center;gap:10px;padding:11px 0;border-top:1px solid #252a36;font-size:12px}.model-row>div:nth-child(2){display:flex;flex-direction:column}.model-row small,.model-row>span{color:#8b92a5}.avatar{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:11px;font-weight:800;color:#fff}.avatar.a1{background:linear-gradient(135deg,#7249ed,#2a9fc9)}.avatar.a2{background:linear-gradient(135deg,#d851a0,#7149ed)}.avatar.a3{background:linear-gradient(135deg,#2ba98a,#4776de)}.available{color:#64d7b6;background:rgba(39,188,146,.12)}.busy{color:#e5a1ba;background:rgba(218,75,127,.12)}.pipeline-bars div{position:relative;display:grid;grid-template-columns:1fr auto;gap:10px;padding:9px 0 14px}.pipeline-bars span{color:#949bad;font-size:12px}.pipeline-bars b{font-size:12px}.pipeline-bars i{position:absolute;left:0;right:0;bottom:5px;height:4px;border-radius:8px;background:#252a36;overflow:hidden}.pipeline-bars i:after{content:"";display:block;width:var(--w);height:100%;border-radius:inherit;background:linear-gradient(90deg,#7448ee,#27bdea)}.whatsapp-shot{border-color:#285044}.whatsapp-shot .shot-shell aside b{background:linear-gradient(135deg,#1faf83,#38d9a9)}.whatsapp-shot .shot-shell aside span.on{background:rgba(40,191,145,.12)}.sync-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#36d5a7;margin-right:6px}.import-strip{display:grid;grid-template-columns:1.7fr repeat(3,1fr);gap:10px;margin-bottom:13px}.import-strip>div{padding:13px 14px;border:1px solid #244139;border-radius:13px;background:#0f1817}.import-strip>div:first-child{display:flex;align-items:center;gap:10px}.import-strip>div:first-child i{width:29px;height:29px;border-radius:50%;display:grid;place-items:center;background:#1da578;color:#fff;font-style:normal}.import-strip span small,.import-strip>div>small{display:block;color:#8ea39d;font-size:11px}.import-strip strong{font-size:18px}.wa-content{grid-template-columns:1.15fr .85fr}.wa-booking{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:10px;padding:11px 0;border-top:1px solid #25312e;font-size:12px}.wa-booking>div:nth-child(2){display:flex;flex-direction:column}.wa-booking small{color:#8b9a95}.wa-icon{width:32px;height:32px;border-radius:50%;background:#1dad7d;color:#fff;display:grid;place-items:center;font-weight:800}.calendar-bars div{display:grid;grid-template-columns:34px 1fr 20px;gap:8px;align-items:center;margin:12px 0;font-size:12px;color:#99a49f}.calendar-bars i{height:6px;border-radius:8px;background:#23302d;overflow:hidden}.calendar-bars i b{display:block;width:var(--w);height:100%;background:linear-gradient(90deg,#1dae7e,#39d9ae)}.calendar-bars strong{color:#fff;font-size:12px}@media(max-width:1050px){.shot-shell{grid-template-columns:135px 1fr}.shot-shell aside{padding:18px 10px}.metric-row{grid-template-columns:repeat(2,1fr)}.shot-content{grid-template-columns:1fr}.nav-links{gap:15px}}@media(max-width:900px){.demo-intro{grid-template-columns:1fr;gap:28px}.demo-jump-grid{grid-template-columns:1fr}.shot-shell{grid-template-columns:1fr}.shot-shell aside{display:none}.product-shot{overflow-x:auto}.shot-main{min-width:720px}}@media(max-width:620px){.demo-page-hero{min-height:0}.demo-selector{padding:28px 0}.demo-feature-list{grid-template-columns:1fr}.product-shot{border-radius:18px}.shot-top{min-width:720px}.shot-main{padding:19px}}
.skip-link{position:absolute;left:-9999px;top:0;z-index:60;padding:12px 18px;border-radius:0 0 12px 0;background:#fff;color:#090a0f;font-weight:700}.skip-link:focus{left:0}
a:focus-visible,button:focus-visible{outline:2px solid var(--violet2);outline-offset:3px;border-radius:6px}
a.card{display:flex;flex-direction:column;color:inherit;transition:border-color .25s,transform .25s}a.card:hover{border-color:#3d355f;transform:translateY(-4px)}
.mobile-cta{display:none}
@media(max-width:900px){.mobile-cta{display:inline-flex;justify-content:center;margin-top:6px;padding:12px 19px;border-radius:999px;background:linear-gradient(105deg,var(--violet),#5f35e8);color:#fff;font-weight:700}}
.demo-badge{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border:1px solid #3a3358;border-radius:999px;background:rgba(116,71,255,.12);color:#c3b4ff;font-size:12px;font-weight:750;letter-spacing:.06em;text-transform:uppercase}
.demo-badge:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--violet2)}
.shot-top .demo-badge{margin-left:auto}
.demo-note{margin:14px 0 0;padding:14px 17px;border:1px dashed #343a4c;border-radius:14px;background:#0b0d14;color:#9ba1b2;font-size:14px}
.demo-note strong{color:#d3d7e0}
.demo-disclaimer{margin-top:16px;padding:16px 19px;border:1px solid var(--line);border-radius:16px;background:#0d0f17;color:var(--muted);font-size:14px}
.card.accent-crm{border-color:#285044;background:linear-gradient(145deg,#0f1918,#0b0d14)}.card.accent-crm:after{background:radial-gradient(circle,rgba(39,188,146,.18),transparent 68%)}.card.accent-crm .card-num{color:#63c9a9}
.pay-terms{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 16px;margin:0 auto 28px;color:#c2c6d2;font-size:14px}.pay-terms b{color:#fff}.pay-terms .dot{width:4px;height:4px;border-radius:50%;background:#5c4bb0}
.contact-channels{margin-top:26px;display:grid;gap:10px}
.contact-channel{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px 17px;border:1px solid var(--line);border-radius:14px;background:#0d0f17;font-size:14px}
.contact-channel strong{font-size:14px}.contact-channel span{color:var(--muted)}
@media(max-width:900px){.shot-main{min-width:760px}.shot-top{min-width:760px}}
@media(max-width:620px){.shot-top{min-width:760px}.shot-main{min-width:760px}}
[data-email-row]{display:none}
[data-email-row].ready{display:flex}
.contact-channel a[data-email]{color:#b7a9ff;word-break:break-all;text-align:right}
.contact-channel a[data-email]:hover{color:#fff}
.success-copy{margin:22px auto 0;max-width:520px;text-align:left}
.success-copy pre{margin:0 0 12px;padding:15px 16px;border:1px solid var(--line);border-radius:14px;background:#090b11;color:#c2c6d2;font:13px/1.65 ui-monospace,SFMono-Regular,monospace;white-space:pre-wrap;word-break:break-word;max-height:210px;overflow:auto}
.success-copy .btn{width:100%}
.hp{position:absolute;width:1px;height:1px;padding:0;margin:-1px;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
/* Nav with no CTA button: keep the language selector off the right edge. */
.nav-links{margin-right:4px}

/* Below 900px the hero image sits behind the text, so a fixed height floor
   leaves dead space under short headings. Let content define the height. */
@media(max-width:900px){.page-hero.has-image,.demo-page-hero{min-height:0}}

/* ---- Icons -------------------------------------------------------------
   One inline SVG sprite per page; every icon inherits currentColor so it
   picks up the surrounding text colour automatically. */
.icon-sprite{position:absolute;width:0;height:0;overflow:hidden}
.ico{width:22px;height:22px;display:block;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ico-chip{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:14px;border:1px solid #2c3044;background:linear-gradient(150deg,rgba(116,71,255,.24),rgba(25,195,255,.09));color:#c3b3ff;flex:none;transition:border-color .25s,color .25s}
.ico-inline{width:18px;height:18px;stroke-width:1.7;color:#a89bff;flex:none}
.card .ico-chip{margin-top:24px}
.card h3{margin:16px 0 10px}
a.card:hover .ico-chip{border-color:#4b3f86;color:#d8ceff}
.service-row .number{display:flex;align-items:center;gap:12px}
.flow-step strong{display:flex;align-items:center;gap:8px}
.contact-point strong{display:flex;align-items:center;gap:9px}
.simple-step h3{display:flex;align-items:center;gap:9px}
.price-label{display:flex;align-items:center;gap:9px}
.demo-jump-grid strong{display:flex;align-items:center;gap:8px}
.kicker{display:inline-flex;align-items:center;gap:8px}
.card-num{display:block}
.card .ico-chip{display:grid;margin-top:20px}
.avatar.a4{background:linear-gradient(135deg,#5a4de0,#2bb3a8)}
.wa-icon{font-size:11px;letter-spacing:.02em}

/* ---- Larger icons ------------------------------------------------------- */
.ico{width:26px;height:26px;stroke-width:1.5}
.ico-chip{width:54px;height:54px;border-radius:16px}
.ico-inline{width:22px;height:22px;stroke-width:1.6}
/* small uppercase labels keep a proportionate icon */
.kicker .ico-inline{width:17px;height:17px}
.price-label .ico-inline{width:18px;height:18px}
/* the services list has a wide number column — give those icons real presence */
.service-row .number{gap:14px}
.service-row .number .ico-inline{width:30px;height:30px;stroke-width:1.5}
.demo-jump-grid strong .ico-inline{width:20px;height:20px}
/* Narrow screens: the number column is only 42px, so put the icon under the
   number instead of beside it. */
@media(max-width:620px){
  .service-row .number{flex-direction:column;align-items:flex-start;gap:9px}
  .service-row .number .ico-inline{width:26px;height:26px}
}

/* ---- Demo jump cards with a dashboard image ----------------------------- */
.demo-jump-grid a.has-media{position:relative;overflow:hidden;min-height:214px;align-items:end;padding:22px}
.jump-media{position:absolute;inset:0;z-index:0;border-radius:inherit;overflow:hidden}
.jump-media img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;
  transform:scale(1.01);transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.demo-jump-grid a.has-media:hover .jump-media img{transform:scale(1.05)}
/* lighter over the dashboard, darkest along the bottom where the text sits */
.jump-media:after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(7,8,13,.14) 0%,rgba(7,8,13,.34) 38%,rgba(7,8,13,.62) 60%,rgba(7,8,13,.88) 80%,rgba(7,8,13,.95) 100%)}
.demo-jump-grid a.has-media > *:not(.jump-media){position:relative;z-index:2}
@media(prefers-reduced-motion:reduce){.jump-media img,.demo-jump-grid a.has-media:hover .jump-media img{transition:none;transform:none}}
@media(max-width:900px){.demo-jump-grid a.has-media{min-height:200px}}
@media(max-width:620px){.demo-jump-grid a.has-media{min-height:190px}}
/* Keeps the label crisp over the busiest part of the dashboard without
   needing a heavier overlay. */
.demo-jump-grid a.has-media strong{text-shadow:0 1px 10px rgba(7,8,13,.92),0 0 3px rgba(7,8,13,.7)}
.demo-jump-grid a.has-media small{text-shadow:0 1px 8px rgba(7,8,13,.9)}

/* ---- Floating glass capsule header --------------------------------------
   At the top of the page the header is a full-width bar. Once scrolled it
   contracts into a rounded, blurred capsule floating over the content. */
nav{transition:background .35s ease,border-color .35s ease,padding .35s ease,backdrop-filter .35s ease}
.nav-inner{position:relative;border:1px solid transparent;
  transition:width .35s cubic-bezier(.4,.14,.3,1),height .35s cubic-bezier(.4,.14,.3,1),
             padding .35s ease,background .35s ease,border-radius .35s ease,
             border-color .35s ease,box-shadow .35s ease,backdrop-filter .35s ease}
.brand img{transition:width .35s cubic-bezier(.4,.14,.3,1)}

nav.scrolled{background:transparent;border-bottom-color:transparent;backdrop-filter:none;padding:11px 0}
nav.scrolled .nav-inner{
  width:min(calc(100% - 26px),1180px);
  height:64px;
  padding:0 14px 0 18px;
  border-radius:999px;
  background:rgba(15,17,26,.24);
  -webkit-backdrop-filter:blur(32px) saturate(170%);
  backdrop-filter:blur(32px) saturate(170%);
  border-color:rgba(255,255,255,.16);
  box-shadow:0 22px 54px rgba(0,0,0,.42),0 2px 10px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.09);
}
nav.scrolled .nav-links{gap:19px}

/* The mobile menu hangs from the capsule rather than the window edge. */
@media(max-width:900px){
  nav.scrolled .nav-inner{height:60px}
  .nav-links{top:calc(100% + 11px);left:0;right:0;border:1px solid var(--line);
    border-radius:20px;background:rgba(11,13,20,.97);
    -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
    box-shadow:0 24px 60px rgba(0,0,0,.5)}
}
@media(max-width:620px){
  nav.scrolled .nav-inner{width:calc(100% - 20px);padding:0 10px 0 12px}
}
@media(prefers-reduced-motion:reduce){
  nav,.nav-inner,.brand img{transition:none}
}
/* The capsule is deliberately thin glass, so the nav text carries its own
   local contrast for the moments it floats over a bright photo. */
nav.scrolled .nav-links a{color:#d3d6de;text-shadow:0 1px 8px rgba(7,8,13,.92),0 0 3px rgba(7,8,13,.8),0 0 14px rgba(7,8,13,.6)}
nav.scrolled .nav-links a:hover,nav.scrolled .nav-links a.active{color:#fff}
nav.scrolled .menu{text-shadow:0 1px 8px rgba(7,8,13,.92),0 0 3px rgba(7,8,13,.8)}
nav.scrolled .language-btn{background:rgba(15,18,27,.5);border-color:rgba(255,255,255,.17)}
nav.scrolled .brand img{filter:drop-shadow(0 2px 10px rgba(7,8,13,.7))}
@media(max-width:900px){nav.scrolled .nav-links a{text-shadow:none;color:#b5b8c5}}

/* ---- Logo: capsule morph + hover sweep ----------------------------------
   The mark and the wordmark live in one raster file, and the X occupies the
   left 27.6% of it. So the morph crops the container rather than resizing the
   image: the wordmark wipes away and the X stays exactly the same size. */
nav .brand{--logo-w:190px;position:relative;width:var(--logo-w);overflow:hidden;
  transition:width .42s cubic-bezier(.4,.14,.3,1)}
nav .brand img{width:var(--logo-w);max-width:none;height:auto;display:block;transition:none}
nav.scrolled .brand{width:calc(var(--logo-w) * .273)}

/* Specular sweep, masked to the logo's own shape so the light travels across
   the mark itself and not across an empty rectangle. */
nav .brand:after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.62) 50%,transparent 58%);
  background-size:260% 100%;background-position:150% 0;
  -webkit-mask-image:url("xartdesign-logo-colour.webp");mask-image:url("xartdesign-logo-colour.webp");
  -webkit-mask-size:var(--logo-w) auto;mask-size:var(--logo-w) auto;
  -webkit-mask-position:left center;mask-position:left center;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
nav .brand:hover:after,nav .brand:focus-visible:after{opacity:1;animation:brand-sweep .9s cubic-bezier(.35,.1,.25,1)}
@keyframes brand-sweep{from{background-position:150% 0}to{background-position:-70% 0}}

@media(max-width:620px){nav .brand{--logo-w:155px}}
@media(prefers-reduced-motion:reduce){
  nav .brand{transition:none}
  nav .brand:hover:after,nav .brand:focus-visible:after{animation:none;opacity:0}
}
/* The capsule was sized to the page grid, which left a wide empty run between
   the mark and the links. Above the mobile breakpoint it now sizes to its
   own content (measured at 660px) instead. */
@media(min-width:901px){
  nav.scrolled .nav-inner{width:min(680px,calc(100% - 26px));gap:24px;justify-content:center}
  nav.scrolled .nav-links{margin-left:0}
}

/* =========================================================================
   GLASS MORPHISM
   Frosted panels need something behind them to refract, so an ambient light
   field sits under the whole page and the panels become translucent shells
   with an inner top highlight instead of solid fills.
   ========================================================================= */

/* 1. Ambient light field ------------------------------------------------- */
body{
  background-color:var(--bg);
  background-image:
    radial-gradient(760px 520px at 10% 4%,  rgba(116,71,255,.17), transparent 62%),
    radial-gradient(720px 480px at 92% 16%, rgba(25,195,255,.10), transparent 60%),
    radial-gradient(860px 580px at 74% 66%, rgba(139,60,255,.13), transparent 62%),
    radial-gradient(640px 460px at 16% 88%, rgba(25,195,255,.07), transparent 60%);
  background-attachment:fixed;
  background-repeat:no-repeat;
}

/* 2. The glass surface --------------------------------------------------- */
.card,.price-card,.form-card,.arch-copy,.code-panel,.flow-step,.mini-panel,
.dashboard,.product-shot,.contact-channel,.demo-note,.demo-disclaimer,
.price-note,.service,.modal-card{
  background:linear-gradient(158deg,rgba(255,255,255,.062),rgba(255,255,255,.022) 44%,rgba(255,255,255,.008));
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 22px 48px rgba(0,0,0,.40),
             inset 0 1px 0 rgba(255,255,255,.10),
             inset 0 -1px 0 rgba(255,255,255,.028);
}
/* blur only on the larger surfaces — cheap where it counts, skipped on the
   small repeated panels which read as glass from the translucency alone */
.card,.price-card,.form-card,.arch-copy,.product-shot,.dashboard,.modal-card{
  -webkit-backdrop-filter:blur(18px) saturate(145%);
  backdrop-filter:blur(18px) saturate(145%);
}

/* 3. Softer, larger radii ------------------------------------------------ */
.card{border-radius:24px}
.price-card{border-radius:28px}
.form-card{border-radius:26px}
.flow-step{border-radius:18px}
.mini-panel{border-radius:16px}
.dashboard{border-radius:24px}
.product-shot{border-radius:26px}
.service{border-radius:24px}
.modal-card{border-radius:26px}

/* 4. Nested panels sit a shade brighter, as in a real stack of glass ------ */
.product-shot .mini-panel,.dashboard .mini-panel,.shot-main .mini-panel{
  background:linear-gradient(158deg,rgba(255,255,255,.075),rgba(255,255,255,.03) 50%,rgba(255,255,255,.012));
  border-color:rgba(255,255,255,.10)}

/* 5. Accent panels keep their tint, now on glass -------------------------- */
.cta-box{border:1px solid rgba(255,255,255,.10);border-radius:30px;
  background:radial-gradient(circle at 50% 100%,rgba(116,71,255,.26),transparent 55%),
             linear-gradient(158deg,rgba(255,255,255,.06),rgba(255,255,255,.02) 45%,rgba(255,255,255,.008));
  -webkit-backdrop-filter:blur(18px) saturate(145%);backdrop-filter:blur(18px) saturate(145%);
  box-shadow:0 26px 60px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.12)}
.card.accent-crm{background:linear-gradient(158deg,rgba(39,188,146,.10),rgba(255,255,255,.02) 48%,rgba(255,255,255,.008));
  border-color:rgba(63,201,158,.22)}
.price-card.featured{border-color:rgba(140,104,255,.30);
  box-shadow:0 26px 64px rgba(116,71,255,.16),inset 0 1px 0 rgba(255,255,255,.13)}

/* 6. Controls pick up the same material ---------------------------------- */
.btn-ghost{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.13);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.btn-ghost:hover{background:rgba(255,255,255,.10)}
.ico-chip{background:linear-gradient(150deg,rgba(116,71,255,.30),rgba(25,195,255,.12));
  border-color:rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.16)}
.field input,.field select,.field textarea{background:rgba(255,255,255,.045);
  border-color:rgba(255,255,255,.11)}
.field input:focus,.field select:focus,.field textarea:focus{background:rgba(255,255,255,.07)}

/* 7. Hover lifts the sheet slightly -------------------------------------- */
.service:hover,a.card:hover{border-color:rgba(255,255,255,.17);
  box-shadow:0 30px 64px rgba(0,0,0,.46),inset 0 1px 0 rgba(255,255,255,.14)}

@media(max-width:900px){body{background-attachment:scroll}}

/* ---- Staggered card entrance -------------------------------------------
   Cards in a group animate in one after another. The per-element delay is
   set in pages.js and cleared once played. */
.reveal{opacity:0;transform:translateY(24px) scale(.988);
  transition:opacity .62s cubic-bezier(.22,.68,.28,1),transform .62s cubic-bezier(.22,.68,.28,1)}
.reveal.visible{opacity:1;transform:none}

/* .reveal.visible{transform:none} and .service:hover have equal specificity,
   so the hover lift needs a more specific selector to survive. */
.service.reveal.visible:hover,a.card.reveal.visible:hover,
.demo-jump-grid a.reveal.visible:hover{transform:translateY(-4px)}

@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .service.reveal.visible:hover,a.card.reveal.visible:hover,
  .demo-jump-grid a.reveal.visible:hover{transform:none}
}


/* ---- CTA video background ----------------------------------------------
   The video sits under the panel content behind a gradient scrim. A round
   loader shows until the first frame can play; the poster covers the gap. */
.cta-box.has-video{position:relative;overflow:hidden;isolation:isolate}
.cta-media{position:absolute;inset:0;z-index:0;border-radius:inherit;overflow:hidden;background:#0b0d14}
.cta-video{width:100%;height:100%;object-fit:cover;display:block;opacity:0;
  transition:opacity .9s cubic-bezier(.3,.7,.3,1)}
.cta-media.ready .cta-video{opacity:1}
/* scrim keeps the heading and body copy readable over moving footage */
.cta-media:after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(7,8,13,.58) 0%,rgba(7,8,13,.40) 42%,rgba(7,8,13,.62) 100%),
             radial-gradient(circle at 50% 108%,rgba(116,71,255,.34),transparent 58%)}
.cta-box.has-video > *:not(.cta-media){position:relative;z-index:2}

/* round loader */
.media-loader{position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px 0 0 -20px;z-index:1;
  border-radius:50%;border:2px solid rgba(255,255,255,.13);
  border-top-color:#8d68ff;border-right-color:#20bff4;
  animation:media-spin .9s linear infinite;
  transition:opacity .4s ease,transform .4s ease}
.cta-media.ready .media-loader{opacity:0;transform:scale(.8);visibility:hidden}
@keyframes media-spin{to{transform:rotate(360deg)}}

@media(prefers-reduced-motion:reduce){
  .cta-video{transition:none}
  .media-loader{animation:none;border-top-color:rgba(255,255,255,.4);border-right-color:rgba(255,255,255,.25)}
}

/* ---- Tighter vertical rhythm ------------------------------------------- */
section{padding:72px 0}
.page-hero{padding-bottom:72px}
.demo-selector{padding:36px 0}
@media(max-width:900px){section{padding:62px 0}.page-hero{padding-bottom:62px}}
@media(max-width:620px){section{padding:52px 0}.page-hero{padding-bottom:52px}.demo-selector{padding:26px 0}}

/* ---- Compact mobile header ---------------------------------------------
   The links live in the dropdown on small screens, so the bar only carries
   the mark, the language button and the menu toggle. Those are pushed
   together on the right instead of being spread by space-between. */
@media(max-width:900px){
  .nav-inner{height:66px;gap:10px}
  nav.scrolled .nav-inner{height:52px;padding:0 8px 0 12px;gap:8px}
  nav.scrolled{padding:9px 0}
  nav .brand{--logo-w:132px}
  .language-switcher{margin-left:auto}
  .language-btn{height:34px;padding:0 9px;gap:6px}
  .language-btn svg{width:15px;height:15px}
  .language-btn span{font-size:11px;letter-spacing:.05em}
  .language-btn .language-chevron{width:11px;height:11px}
  .menu{font-size:21px;line-height:1;padding:0 2px}
  .nav-links{top:calc(100% + 9px);padding:16px;left:0;right:0;margin:0}
  .nav-links a{padding:9px 0}
}
@media(max-width:620px){
  .nav-inner{height:62px}
  nav.scrolled .nav-inner{height:50px;padding:0 6px 0 10px;gap:6px}
  nav .brand{--logo-w:118px}
  .language-btn{height:32px;padding:0 8px}
  .menu{font-size:20px}
}

/* ---- Compact mobile capsule --------------------------------------------
   With the links in a dropdown the bar only needs ~156px of content, so the
   capsule shrinks to fit. The dropdown gets its own width, right-aligned,
   because a 176px menu is too narrow for "Booking + CRM". */
@media(max-width:900px){
  nav.scrolled .nav-inner{width:min(190px,calc(100% - 20px))}
  .nav-links{left:auto;right:0;width:min(258px,calc(100vw - 30px))}
}
@media(max-width:620px){
  nav.scrolled .nav-inner{width:min(176px,calc(100% - 18px))}
  .nav-links{width:min(232px,calc(100vw - 26px))}
}