@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{--paper:#f7f8f5;--ink:#17221c;--dark:#101713;--green:#3c8f69;--mint:#72d6a0;--muted:#727c75;--line:rgba(23,34,28,.13);--display:"Space Grotesk",sans-serif;--body:"Manrope",sans-serif;--pad:clamp(22px,7.2vw,116px)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit}.site-shell{overflow:hidden}.section-pad{padding-left:var(--pad);padding-right:var(--pad)}.header{height:88px;padding:0 var(--pad);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:50;background:rgba(247,248,245,.88);backdrop-filter:blur(18px);border-bottom:1px solid rgba(23,34,28,.07)}.brand{display:flex;align-items:center;gap:11px;font:800 12px/1.05 var(--display);letter-spacing:.07em}.brand-mark{width:38px;height:38px;border:1.5px solid var(--green);border-radius:50%;display:grid;place-items:center;font:700 16px var(--display);letter-spacing:-.1em;color:var(--green)}.brand-mark span{color:var(--ink)}.brand-dot,.green-dot{color:var(--green)}.nav{display:flex;align-items:center;gap:clamp(16px,2.1vw,34px);font-size:12px;font-weight:700}.nav>a:not(.nav-cta){transition:color .2s}.nav>a:not(.nav-cta):hover{color:var(--green)}.nav-cta{padding:14px 19px;border:1px solid var(--ink);border-radius:40px;transition:.25s}.nav-cta span{margin-left:14px}.nav-cta:hover{background:var(--ink);color:white}.menu-toggle{display:none}
.hero{min-height:730px;padding-top:clamp(65px,8vw,120px);position:relative;display:grid;grid-template-columns:1fr .92fr;align-items:center;gap:3vw}.hero-copy{position:relative;z-index:2;padding-bottom:60px}.eyebrow{font-size:10px;letter-spacing:.17em;font-weight:800;color:var(--green);display:flex;align-items:center;gap:11px}.eyebrow-line{width:28px;height:1px;background:var(--green)}h1,h2,h3,p{margin-top:0}h1,h2{font-family:var(--display);letter-spacing:-.075em}h1{font-size:clamp(64px,9.1vw,142px);line-height:.91;margin:35px 0 30px;font-weight:600}h1 em,h2 em{font-style:normal;color:var(--green)}.hero-last{white-space:nowrap}.hero-lead{max-width:480px;font-size:clamp(16px,1.35vw,20px);line-height:1.75;color:#59645d}.hero-actions{display:flex;align-items:center;gap:28px;margin-top:34px}.button{display:inline-flex;align-items:center;gap:30px;padding:17px 22px;border-radius:50px;font-size:12px;font-weight:800;transition:transform .25s,background .25s}.button:hover{transform:translateY(-4px)}.button-dark{background:var(--ink);color:white}.button-dark:hover{background:var(--green)}.text-link{font-size:12px;font-weight:800;border-bottom:1px solid var(--line);padding-bottom:8px}.text-link span{margin-left:13px;color:var(--green)}.availability{display:flex;align-items:center;gap:10px;margin-top:45px;font-size:11px;color:var(--muted);font-weight:700}.pulse{width:8px;height:8px;background:#4eb67d;border-radius:50%;box-shadow:0 0 0 5px rgba(78,182,125,.13);animation:pulse 2s infinite}@keyframes pulse{50%{box-shadow:0 0 0 9px rgba(78,182,125,0)}}.hero-art{height:570px;position:relative;display:grid;place-items:center}.art-orbit{position:absolute;border:1px solid rgba(60,143,105,.18);border-radius:50%;width:490px;height:490px}.orbit-two{width:590px;height:590px;border-style:dashed;opacity:.5}.browser{position:absolute;z-index:2;background:white;border:1px solid rgba(23,34,28,.13);box-shadow:0 35px 90px rgba(22,49,34,.14);border-radius:13px;overflow:hidden}.browser-main{width:min(100%,500px);transform:rotate(-5deg);left:4%;top:17%}.browser-top{height:36px;background:#f3f5f2;display:flex;align-items:center;justify-content:space-between;padding:0 13px;font-size:8px;color:#89918b}.browser-top b{font-size:14px;color:var(--green)}.dots{display:flex;gap:4px}.dots i{width:5px;height:5px;border-radius:50%;background:#c2c9c3}.mock-site{height:335px;background:#e9eee8;position:relative;padding:17px 22px;overflow:hidden}.mock-nav{display:flex;justify-content:space-between;position:relative;z-index:2}.mock-nav strong{font:700 14px var(--display);letter-spacing:-.06em}.mock-nav strong span{color:var(--green)}.mock-nav small{font-size:6px;letter-spacing:.08em}.mock-content{position:relative;z-index:2;margin-top:53px}.mock-content small{font-size:7px;letter-spacing:.17em;color:#597263}.mock-content strong{display:block;font:600 48px/.95 var(--display);letter-spacing:-.08em;margin:13px 0}.mock-content strong i{color:var(--green);font-style:normal}.mock-button{font-size:7px;font-weight:800;letter-spacing:.1em;border-bottom:1px solid;padding-bottom:6px}.mock-shape{position:absolute;width:230px;height:230px;border-radius:50%;right:-45px;bottom:-80px;background:linear-gradient(135deg,#a8d8b9,#3c8f69);box-shadow:inset -20px -20px 50px rgba(0,0,0,.1)}.mock-foot{position:absolute;bottom:13px;left:22px;right:22px;display:flex;justify-content:space-between;font-size:6px;letter-spacing:.12em}.floating-card{position:absolute;z-index:4;background:rgba(255,255,255,.9);backdrop-filter:blur(12px);box-shadow:0 15px 40px rgba(22,49,34,.12);border:1px solid white;border-radius:12px;display:flex;align-items:center;gap:12px;padding:14px}.floating-card strong{font:700 11px var(--display);display:block}.floating-card small{display:block;font-size:8px;color:var(--muted);margin-top:4px}.card-performance{right:-2%;top:20%;transform:rotate(5deg)}.card-performance>b{font:700 17px var(--display);color:var(--green);margin-left:8px}.mini-icon{width:28px;height:28px;display:grid;place-items:center;border-radius:8px;background:#e3f4e9;color:var(--green)}.card-mobile{bottom:13%;left:-3%;transform:rotate(5deg)}.phone-screen{width:28px;height:42px;border:2px solid var(--green);border-radius:6px;padding:7px 3px;display:flex;flex-direction:column;gap:4px}.phone-screen span{width:8px;height:2px;background:var(--green);margin:auto}.phone-screen b,.phone-screen i{height:3px;background:#c6e6d1;border-radius:3px}.art-sticker{position:absolute;right:4%;bottom:13%;z-index:5;width:82px;height:82px;border-radius:50%;background:var(--mint);display:grid;place-content:center;text-align:center;font:800 10px/1.2 var(--display);transform:rotate(13deg)}.art-sticker span{font-size:20px}.art-caption{position:absolute;right:0;bottom:2%;font-size:8px;letter-spacing:.2em;color:var(--muted)}.hero-bottom{position:absolute;bottom:25px;left:var(--pad);right:var(--pad);display:flex;justify-content:space-between;font-size:8px;letter-spacing:.16em;color:#8a948d}.hero-bottom b{color:var(--green);font-size:15px;margin-left:12px}
.stats{padding-top:75px;padding-bottom:85px;background:#edf1eb;display:grid;grid-template-columns:1.45fr repeat(4,1fr);gap:25px;align-items:center}.stats-intro p{font:500 20px/1.35 var(--display);letter-spacing:-.04em;margin:18px 0 0}.stats-intro strong{color:var(--green)}.stat{border-left:1px solid rgba(23,34,28,.15);padding-left:25px}.stat>strong{font:600 clamp(32px,4vw,54px)/1 var(--display);letter-spacing:-.08em}.stat>strong span{color:var(--green)}.stat p{font-size:10px;line-height:1.6;color:var(--muted);margin:10px 0 0}
.services,.portfolio,.process,.testimonials{padding-top:140px;padding-bottom:140px}.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:65px}.section-heading h2,.why h2,.faq h2{font-size:clamp(52px,7vw,100px);line-height:.96;font-weight:600;margin:25px 0 0}.section-heading>p{max-width:310px;font-size:14px;line-height:1.8;color:var(--muted);margin:0 2vw 8px 0}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}.service-card{min-height:310px;padding:28px 30px 25px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column;transition:background .3s,transform .3s;position:relative}.service-card:hover{background:#edf4ee;transform:translateY(-5px);z-index:1}.service-featured{background:#eaf1e9}.service-top{display:flex;justify-content:space-between;align-items:center;color:#99a39c;font-size:9px;letter-spacing:.12em}.service-icon{font:500 28px var(--display);color:var(--green)}.service-card h3{font:600 clamp(28px,3vw,40px)/1.05 var(--display);letter-spacing:-.07em;margin:38px 0 14px}.service-card h3 span{color:var(--green)}.service-card p{font-size:12px;line-height:1.75;color:var(--muted);max-width:280px;margin-bottom:25px}.service-card>a{margin-top:auto;font-size:10px;font-weight:800}.service-card>a b{color:var(--green);margin-left:12px}
.portfolio{background:#edf1eb}.portfolio-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:48px 25px}.project-wide{grid-column:auto}.project-visual{height:360px;position:relative;overflow:hidden;border-radius:5px;display:grid;place-items:center;transition:transform .5s}.project:hover .project-visual{transform:translateY(-5px)}.project-business{background:#d8e3d8}.project-window{width:75%;height:82%;background:#f6f5ef;box-shadow:0 25px 55px #33483b30;transform:rotate(-3deg);padding:0 20px}.window-bar{height:25px;display:flex;align-items:center;justify-content:space-between;font-size:7px;color:#87918a}.business-preview{height:calc(100% - 25px);background:#e8ece5;padding:35px 25px;position:relative;overflow:hidden}.business-preview small,.creative-preview>span{font-size:7px;letter-spacing:.15em}.business-preview>b{display:block;font:600 clamp(27px,4vw,48px)/.96 var(--display);letter-spacing:-.08em;margin-top:20px;position:relative;z-index:2}.business-preview>b i{color:var(--green);font-style:normal}.business-preview>span{font-size:7px;display:block;margin-top:25px}.preview-block{position:absolute;width:45%;height:65%;right:0;bottom:0;background:linear-gradient(145deg,#b6c7b5,#718d76);border-radius:90px 0 0 0}.project-shop{background:#e8d9c9}.shop-card{width:65%;height:85%;background:#f9f3eb;padding:25px;box-shadow:0 20px 50px #6b493329;transform:rotate(4deg)}.shop-card>span{font-size:7px;letter-spacing:.15em}.shop-card>b{display:block;font:600 36px/.9 var(--display);letter-spacing:-.08em;margin:23px 0}.shop-card>b i{font-style:normal;color:#9d7359}.shop-products{display:flex;gap:8px;height:90px}.shop-products i{flex:1;background:#c9a58b;border-radius:45px 45px 4px 4px}.shop-products i:nth-child(2){background:#a7b3a1}.shop-products i:nth-child(3){background:#d8c4a8}.shop-card>small{display:block;margin-top:12px;font-size:6px;letter-spacing:.12em}.project-food{background:#253b30}.food-preview{color:#f6eddd;width:80%;height:80%;border:1px solid #a9b8a8;padding:25px;position:relative;overflow:hidden}.food-preview>span{font:700 9px var(--display);letter-spacing:.25em}.food-preview>b{display:block;font:600 clamp(27px,4vw,45px)/.95 var(--display);letter-spacing:-.08em;margin-top:40px;position:relative;z-index:2}.food-preview>b i{color:#e1b87d;font-style:normal}.food-preview>small{position:absolute;bottom:20px;left:25px;font-size:6px;letter-spacing:.12em}.food-plate{position:absolute;right:10%;top:30%;width:130px;height:130px;border-radius:50%;border:14px solid #d2b78c;display:grid;place-items:center;color:#d2b78c;font-size:50px;box-shadow:0 0 0 8px #f1e7d322}.project-creative{background:#d8e7dc}.creative-preview{width:83%;height:82%;background:#f4f7f1;padding:30px;position:relative;overflow:hidden}.creative-preview>b{display:block;font:600 clamp(30px,4.5vw,54px)/.9 var(--display);letter-spacing:-.09em;margin-top:40px;position:relative;z-index:2}.creative-preview>b i{font-style:normal;color:var(--green)}.creative-preview>small{position:absolute;bottom:20px;left:30px;font-size:6px;letter-spacing:.12em}.creative-orb{position:absolute;right:-15px;top:25%;width:170px;height:170px;border-radius:50%;background:linear-gradient(135deg,#b7e1c4,#3c8f69);box-shadow:inset -20px -20px 40px #1d6643}.project-meta{display:flex;justify-content:space-between;align-items:flex-start;padding-top:17px}.project-meta span{font-size:8px;letter-spacing:.13em;color:var(--green);font-weight:800}.project-meta h3{font:600 19px var(--display);letter-spacing:-.04em;margin:7px 0 0}.project-meta>b{font:600 11px var(--display);color:var(--green)}.portfolio-note{font-size:10px;color:var(--muted);margin-top:30px}
.why{background:var(--dark);color:#f4f6f2;padding-top:145px;padding-bottom:145px;display:grid;grid-template-columns:1fr 1fr;gap:9vw}.why .eyebrow{color:var(--mint)}.why h2{font-size:clamp(48px,6vw,86px);margin-top:32px}.why h2 em{color:var(--mint)}.why-content{padding-top:48px}.why-lead{font-size:17px;line-height:1.75;color:#aab6ad;max-width:440px;margin-bottom:55px}.feature{display:grid;grid-template-columns:35px 1fr 20px;gap:18px;padding:23px 0;border-top:1px solid #ffffff24;align-items:start}.feature>span{font:600 10px var(--display);color:var(--mint);padding-top:4px}.feature h3{font:600 20px var(--display);margin:0 0 8px}.feature p{font-size:11px;line-height:1.7;color:#9ba89e;margin:0;max-width:350px}.feature>b{color:var(--mint)}
.process{background:#f1f3ef}.timeline{border-top:1px solid var(--line)}.timeline-step{display:grid;grid-template-columns:100px 1fr 30px;gap:25px;padding:29px 0;border-bottom:1px solid var(--line);align-items:center;transition:padding .3s}.timeline-step:hover{padding-left:12px}.timeline-step>span{font:500 32px var(--display);letter-spacing:-.07em;color:var(--green)}.timeline-step small{font-size:8px;letter-spacing:.16em;color:var(--muted);font-weight:800}.timeline-step h3{font:600 clamp(22px,3vw,34px) var(--display);letter-spacing:-.05em;margin:7px 0}.timeline-step p{font-size:11px;color:var(--muted);margin:0}.timeline-step>b{font-size:17px;color:var(--green)}
.testimonials{background:#e6ede6}.quote-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.quote-card{background:#f8faf6;padding:35px;min-height:265px;display:flex;flex-direction:column}.quote-dark{background:var(--dark);color:white}.quote-mark{font:600 65px/.8 var(--display);color:var(--green)}.quote-card>p{font:500 19px/1.5 var(--display);letter-spacing:-.035em;max-width:490px;margin:25px 0 30px}.quote-author{display:flex;align-items:center;gap:12px;margin-top:auto}.avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#dce9df;color:var(--green);font-weight:800}.quote-author b,.quote-author small{display:block;font-size:10px}.quote-author small{color:var(--muted);margin-top:4px}.demo-label{margin-left:auto;font-size:8px;letter-spacing:.12em;color:var(--green);border:1px solid #3c8f6944;padding:6px 8px}
.faq{padding-top:140px;padding-bottom:150px;display:grid;grid-template-columns:.8fr 1.2fr;gap:9vw}.faq h2{font-size:clamp(54px,6.5vw,88px);margin:25px 0}.faq-intro>p{max-width:330px;font-size:13px;line-height:1.8;color:var(--muted);margin-bottom:30px}.faq-list{border-top:1px solid var(--line)}.faq-item{border-bottom:1px solid var(--line)}.faq-item summary{list-style:none;cursor:pointer;padding:23px 0;display:flex;justify-content:space-between;align-items:center;font:600 17px var(--display);letter-spacing:-.03em}.faq-item summary::-webkit-details-marker{display:none}.faq-item summary span{font:400 23px var(--display);color:var(--green);transition:transform .25s}.faq-item[open] summary span{transform:rotate(45deg)}.faq-item p{font-size:12px;line-height:1.8;color:var(--muted);max-width:550px;padding:0 35px 20px 0;margin:0}
.contact{background:var(--dark);color:#f6f8f4;padding-top:65px;padding-bottom:70px;position:relative;overflow:hidden}.contact-glow{position:absolute;width:600px;height:600px;border-radius:50%;right:-100px;top:0;background:radial-gradient(circle,#3c8f6940,transparent 68%);pointer-events:none}.contact-top{display:flex;justify-content:space-between;position:relative;z-index:1}.contact-top .eyebrow{color:var(--mint)}.contact-top>span:last-child{font-size:8px;letter-spacing:.15em;color:#a5b2a8}.contact h2{font-size:clamp(65px,10vw,145px);line-height:.88;margin:95px 0 70px;position:relative;z-index:1}.contact h2 em{color:var(--mint)}.contact-bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;position:relative;z-index:1}.contact-bottom>p{max-width:390px;font-size:15px;line-height:1.75;color:#aab6ad;margin:0}.contact-bottom>div{display:flex;align-items:center;gap:25px}.button-light{background:var(--mint);color:var(--dark)}.button-light:hover{background:white}.contact-secondary{font-size:11px;font-weight:700;border-bottom:1px solid #ffffff55;padding-bottom:8px}
.footer{background:#0b100d;color:#e9eee9;padding-top:75px;padding-bottom:25px}.footer-main{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:45px;padding-bottom:70px}.brand-light .brand-mark span{color:white}.brand-light{color:white}.footer-brand>p{max-width:270px;color:#8e9b91;font-size:11px;line-height:1.8;margin:25px 0}.footer-brand>a:last-child{font-size:11px;color:var(--mint)}.footer-column{display:flex;flex-direction:column;gap:14px}.footer-column>b{font-size:8px;letter-spacing:.17em;color:var(--mint);margin-bottom:10px}.footer-column>a,.footer-placeholder{font-size:10px;color:#a5b0a7;transition:color .2s}.footer-column>a:hover{color:white}.footer-placeholder{line-height:1.6}.footer-bottom{border-top:1px solid #ffffff20;padding-top:22px;display:flex;justify-content:space-between;font-size:8px;letter-spacing:.13em;color:#758178}.footer-bottom a:hover{color:white}.footer-bottom b{color:var(--mint)}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}.reveal.is-visible{opacity:1;transform:translateY(0)}@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.reveal{opacity:1;transform:none}}
@media(max-width:1050px){.nav{gap:14px}.nav>a{font-size:10px}.nav-cta{padding:12px}.hero{grid-template-columns:1fr 1fr}.hero-art{transform:scale(.9)}.stats{grid-template-columns:repeat(4,1fr)}.stats-intro{grid-column:1/-1}.why{gap:5vw}.footer-main{gap:25px}}
@media(max-width:760px){:root{--pad:22px}.header{height:72px}.menu-toggle{display:flex;width:42px;height:42px;border:1px solid var(--line);border-radius:50%;background:transparent;flex-direction:column;align-items:center;justify-content:center;gap:5px;z-index:60}.menu-toggle span{width:16px;height:1.5px;background:var(--ink);transition:.25s}.menu-toggle[aria-expanded=true] span:first-child{transform:translateY(3.2px) rotate(45deg)}.menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-3.2px) rotate(-45deg)}.nav{position:absolute;top:71px;left:0;right:0;background:var(--paper);padding:20px 22px 28px;display:flex;flex-direction:column;align-items:stretch;gap:0;border-bottom:1px solid var(--line);transform:translateY(-10px);opacity:0;visibility:hidden;transition:.25s}.nav.open{transform:translateY(0);opacity:1;visibility:visible}.nav>a:not(.nav-cta){padding:14px 0;border-bottom:1px solid var(--line);font-size:13px}.nav-cta{margin-top:18px;text-align:center;font-size:12px}.hero{display:flex;flex-direction:column;align-items:stretch;padding-top:65px;min-height:0;gap:10px}.hero-copy{padding-bottom:0}h1{font-size:clamp(57px,12.4vw,90px);margin:28px 0 22px}.hero-lead{font-size:15px;max-width:430px}.hero-actions{gap:18px;flex-wrap:wrap}.button{padding:15px 18px;gap:18px}.text-link{font-size:10px}.availability{margin-top:30px}.hero-art{height:430px;transform:none;margin:0 -10px}.art-orbit{width:340px;height:340px}.orbit-two{width:410px;height:410px}.browser-main{width:82%;left:7%;top:15%}.mock-site{height:270px}.mock-content{margin-top:42px}.mock-content strong{font-size:39px}.card-performance{right:0;top:17%}.card-mobile{left:0;bottom:10%}.art-sticker{right:3%;bottom:7%;width:68px;height:68px;font-size:8px}.art-caption{font-size:6px;bottom:0}.hero-bottom{position:static;margin-top:20px;padding-bottom:25px;font-size:7px}.hero-bottom span:last-child{display:none}.stats{padding-top:45px;padding-bottom:50px;grid-template-columns:1fr 1fr;gap:30px 15px}.stats-intro{grid-column:1/-1}.stat{padding-left:15px}.stat>strong{font-size:39px}.services,.portfolio,.process,.testimonials{padding-top:85px;padding-bottom:85px}.section-heading{display:block;margin-bottom:40px}.section-heading h2,.why h2{font-size:clamp(49px,11vw,75px)}.section-heading>p{margin:25px 0 0;font-size:13px}.service-grid{grid-template-columns:1fr 1fr}.service-card{min-height:270px;padding:20px 17px}.service-card h3{font-size:29px;margin-top:30px}.service-card p{font-size:11px}.portfolio-grid{grid-template-columns:1fr;gap:35px}.project-visual{height:300px}.project-wide{grid-column:auto}.why{padding-top:85px;padding-bottom:85px;grid-template-columns:1fr;gap:20px}.why-content{padding-top:15px}.why-lead{font-size:15px;margin-bottom:35px}.timeline-step{grid-template-columns:50px 1fr 20px;gap:10px;padding:23px 0}.timeline-step>span{font-size:25px}.timeline-step h3{font-size:23px}.timeline-step p{font-size:10px;max-width:290px}.quote-grid{grid-template-columns:1fr}.quote-card{padding:26px;min-height:250px}.quote-card>p{font-size:17px}.faq{padding-top:85px;padding-bottom:90px;grid-template-columns:1fr;gap:35px}.faq h2{font-size:65px}.faq-item summary{font-size:15px;gap:15px}.contact{padding-top:40px;padding-bottom:50px}.contact-top>span:last-child{display:none}.contact h2{font-size:clamp(59px,12vw,90px);margin:75px 0 45px}.contact-bottom{display:block}.contact-bottom>p{font-size:13px;margin-bottom:28px}.contact-bottom>div{align-items:flex-start;flex-direction:column;gap:20px}.footer{padding-top:55px}.footer-main{grid-template-columns:1fr 1fr;gap:40px 25px;padding-bottom:45px}.footer-brand{grid-column:1/-1}.footer-bottom{flex-wrap:wrap;gap:15px;font-size:7px}.footer-bottom span:last-child{display:none}}
@media(max-width:390px){.service-grid{grid-template-columns:1fr}.service-card{min-height:245px}.hero-actions{align-items:flex-start;flex-direction:column}.hero-art{height:365px}.mock-site{height:235px}.mock-content strong{font-size:34px}.card-performance{right:-2px}.floating-card{padding:10px}.contact h2{font-size:56px}.footer-main{gap:32px 15px}}


/* Portfolio galerija — stvarni priloženi vizuelni prikazi */
.portfolio-grid-images{grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 22px}
.project-image-card{min-width:0}
.portfolio-image-link{display:block;position:relative;overflow:hidden;aspect-ratio:1.72/1;background:#dfe5df;border-radius:5px}
.portfolio-image-link img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .65s cubic-bezier(.2,.7,.2,1),filter .45s}
.portfolio-image-overlay{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:space-between;padding:20px;background:linear-gradient(180deg,transparent 40%,rgba(9,18,12,.72));color:#fff;opacity:0;transition:opacity .3s}
.portfolio-image-overlay span{font-size:9px;font-weight:800;letter-spacing:.15em}
.portfolio-image-overlay b{width:38px;height:38px;border:1px solid #ffffffaa;border-radius:50%;display:grid;place-items:center;font-size:17px}
.project-image-card:hover .portfolio-image-link img{transform:scale(1.055)}
.project-image-card:hover .portfolio-image-overlay{opacity:1}
.project-image-card .project-meta{padding-top:15px}
.project-image-card .project-meta h3{font-size:17px}
@media(max-width:900px){.portfolio-grid-images{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.portfolio-grid-images{grid-template-columns:1fr;gap:28px}.portfolio-image-link{aspect-ratio:1.65/1}.portfolio-image-overlay{opacity:1;padding:13px}.portfolio-image-overlay span{font-size:8px}.project-image-card .project-meta h3{font-size:16px}}


/* WhatsApp kontakt — fiksirano uz desnu ivicu */
.whatsapp-float{position:fixed;right:24px;bottom:25px;z-index:80;display:flex;align-items:center;gap:10px;padding:13px 18px 13px 14px;border-radius:50px;background:#25d366;color:#fff;box-shadow:0 12px 32px rgba(15,80,42,.28);font-size:12px;font-weight:800;transition:transform .25s,box-shadow .25s}
.whatsapp-float:hover{transform:translateY(-4px);box-shadow:0 16px 38px rgba(15,80,42,.36)}
.whatsapp-float svg{width:23px;height:23px;fill:currentColor}
.brand-mark{font-size:13px;letter-spacing:-.13em}
.brand>span:last-child{letter-spacing:.045em}

/* Ugrađena galerija sa strelicama — slike ostaju unutar ekrana */
.gallery-lightbox{position:fixed;inset:0;z-index:120;background:rgba(5,9,7,.94);display:flex;align-items:center;justify-content:center;gap:clamp(8px,3vw,42px);padding:65px 6vw 55px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s,visibility .25s}
.gallery-lightbox.is-open{opacity:1;visibility:visible;pointer-events:auto}
.gallery-stage{margin:0;max-width:min(82vw,1320px);max-height:calc(100vh - 120px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
.gallery-full-image{display:block;max-width:100%;max-height:calc(100vh - 175px);width:auto;height:auto;object-fit:contain;border-radius:5px;box-shadow:0 25px 80px rgba(0,0,0,.4)}
.gallery-caption{width:100%;display:flex;align-items:center;gap:16px;color:#fff;font-size:10px;letter-spacing:.12em}
.gallery-caption-title{flex:1;text-align:center;color:#d7ded8}
.gallery-current,.gallery-total{color:#72d6a0;font-weight:800}
.gallery-arrow,.gallery-close{border:1px solid rgba(255,255,255,.38);background:rgba(255,255,255,.08);color:white;display:grid;place-items:center;cursor:pointer;transition:background .2s,transform .2s}
.gallery-arrow{width:48px;height:48px;border-radius:50%;font:300 34px/1 var(--display);flex:0 0 auto}
.gallery-arrow:hover,.gallery-close:hover{background:var(--green);transform:scale(1.06)}
.gallery-close{position:absolute;right:25px;top:20px;width:43px;height:43px;border-radius:50%;font-size:29px;line-height:1}
@media(max-width:650px){.whatsapp-float{right:14px;bottom:14px;padding:12px;border-radius:50%;width:52px;height:52px;justify-content:center}.whatsapp-float span{display:none}.whatsapp-float svg{width:25px;height:25px}.gallery-lightbox{padding:65px 12px 35px;gap:8px}.gallery-stage{max-width:calc(100vw - 94px);max-height:calc(100vh - 120px)}.gallery-full-image{max-height:calc(100vh - 165px)}.gallery-arrow{width:36px;height:36px;font-size:27px}.gallery-close{right:12px;top:12px}.gallery-caption{font-size:8px;gap:8px}}

body.gallery-open{overflow:hidden}


/* =========================================================
   WINWEBS SOLUTION — BLACK & ELECTRIC PURPLE VISUAL IDENTITY
   #111118 · #9972FF · #C4B5FD · #F8F7FF
   ========================================================= */
:root{
  --paper:#F8F7FF;
  --ink:#111118;
  --dark:#111118;
  --green:#9972FF;
  --mint:#C4B5FD;
  --muted:#777387;
  --line:rgba(17,17,24,.14);
}
body{background:var(--paper);color:var(--ink)}
.header{background:rgba(248,247,255,.9);border-bottom-color:rgba(17,17,24,.09)}
.brand-mark{border-color:#9972FF;color:#9972FF}
.brand-mark span{color:#111118}
.brand-dot,.green-dot,.service-icon,.service-card h3 span,.service-card>a b,
.project-meta>b,.timeline-step>span,.timeline-step>b,.text-link span{color:#9972FF}
.nav-cta:hover,.button-dark{background:#111118}
.nav-cta:hover{color:#F8F7FF}
.button-dark:hover{background:#9972FF;color:#111118}
.availability .pulse{background:#9972FF;box-shadow:0 0 0 5px rgba(153,114,255,.16)}
@keyframes pulse{50%{box-shadow:0 0 0 9px rgba(153,114,255,0)}}
.stats,.portfolio,.process{background:#f0edfa}
.stats-intro strong,.stats .stat>strong span{color:#9972FF}
.service-card:hover,.service-featured{background:#efebfb}
.why,.contact,.footer{background:#111118}
.why .eyebrow,.contact-top .eyebrow,.footer-column>b{color:#C4B5FD}
.why h2 em,.contact h2 em,.feature>span,.feature>b,.footer-bottom b{color:#C4B5FD}
.feature{border-top-color:rgba(248,247,255,.18)}
.feature p,.why-lead,.contact-bottom>p{color:#c0bdce}
.timeline-step{border-bottom-color:rgba(17,17,24,.14)}
.quote-mark{color:#9972FF}
.avatar{background:#eee8ff;color:#6741d9}
.demo-label{color:#7953df;border-color:#9972FF66}
.faq-item summary span{color:#9972FF}
.contact-glow{background:radial-gradient(circle,#9972FF3d,transparent 68%)}
.button-light{background:#9972FF;color:#111118}
.button-light:hover{background:#C4B5FD;color:#111118}
.contact-secondary{border-bottom-color:#ffffff66}
.footer-column>a:hover,.footer-bottom a:hover{color:#C4B5FD}
.footer-brand>a:last-child{color:#C4B5FD}
.art-orbit{border-color:rgba(153,114,255,.2)}
.mock-content strong i{color:#9972FF}
.mock-shape{background:linear-gradient(135deg,#C4B5FD,#9972FF)}
.floating-card .mini-icon{background:#eee8ff;color:#7953df}
.card-performance>b{color:#7953df}
.art-sticker{background:#C4B5FD;color:#111118}
.project-business{background:#e5def8}
.preview-block,.creative-orb{background:linear-gradient(135deg,#C4B5FD,#9972FF)}
.project-creative{background:#e9e2fa}
.shop-card>b i,.food-preview>b i{color:#9972FF}
.portfolio-image-overlay b{border-color:#ffffffaa}
.gallery-current,.gallery-total{color:#C4B5FD}
.gallery-arrow:hover,.gallery-close:hover{background:#9972FF;color:#111118}
.whatsapp-float{background:#25d366;color:#fff}
.whatsapp-float:hover{background:#1fbd5b;color:#fff}

/* Kontakt forma */
.contact-layout{display:grid;grid-template-columns:.78fr 1.22fr;gap:clamp(35px,7vw,100px);align-items:start;position:relative;z-index:2}
.contact-copy>p{max-width:390px;font-size:15px;line-height:1.8;color:#c0bdce;margin:0 0 30px}
.contact-direct{display:block;width:max-content;max-width:100%;margin:13px 0;color:#C4B5FD;font-size:12px;font-weight:700;border-bottom:1px solid #C4B5FD55;padding-bottom:7px}
.contact-form{background:#1b1b27;border:1px solid rgba(196,181,253,.2);border-radius:18px;padding:clamp(20px,3vw,34px);display:flex;flex-direction:column;gap:17px}
.contact-form label{display:flex;flex-direction:column;gap:8px;color:#e9e5f5;font-size:11px;font-weight:700}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.contact-form input,.contact-form textarea{width:100%;border:1px solid rgba(196,181,253,.22);border-radius:9px;background:#111118;color:#F8F7FF;padding:14px 15px;font:500 12px var(--body);outline:none;transition:border-color .2s,box-shadow .2s}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:#858095}
.contact-form input:focus,.contact-form textarea:focus{border-color:#9972FF;box-shadow:0 0 0 3px rgba(153,114,255,.15)}
.contact-form textarea{resize:vertical;min-height:125px}
.contact-form .button{border:0;cursor:pointer;align-self:flex-start;margin-top:2px}
.form-note{font-size:9px;line-height:1.6;color:#aaa5bb}
.form-honey{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
@media(max-width:760px){.contact-layout{grid-template-columns:1fr;gap:28px}.contact-form{padding:20px}.form-row{grid-template-columns:1fr}.contact-direct{font-size:11px}}


/* Hero pozadina inspirisana priloženim tehnološkim vizuelnim stilom */
.header{
  background:rgba(7,12,28,.88);
  color:#F8F7FF;
  border-bottom:1px solid rgba(196,181,253,.12);
}
.header .brand-mark{border-color:#9972FF;color:#C4B5FD}
.header .brand-mark span{color:#F8F7FF}
.header .brand-dot{color:#C4B5FD}
.header .nav>a:not(.nav-cta){color:#d8d5e8}
.header .nav>a:not(.nav-cta):hover{color:#C4B5FD}
.header .nav-cta{border-color:rgba(196,181,253,.35);color:#F8F7FF}
.header .nav-cta:hover{background:#9972FF;color:#111118}
.hero{
  isolation:isolate;
  overflow:hidden;
  background:
    radial-gradient(ellipse at 12% 28%,rgba(30,104,155,.20),transparent 32%),
    radial-gradient(ellipse at 78% 58%,rgba(112,75,206,.17),transparent 38%),
    linear-gradient(115deg,#070d1d 0%,#0b1023 52%,#080d1c 100%);
  color:#F8F7FF;
}
.hero::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  opacity:.46;
  background-image:
    linear-gradient(rgba(174,190,255,.075) 1px,transparent 1px),
    linear-gradient(90deg,rgba(174,190,255,.075) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.95),rgba(0,0,0,.25));
  pointer-events:none;
}
.hero::after{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  opacity:.58;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 760'%3E%3Cg fill='none' stroke='%238b9dff' stroke-opacity='.22' stroke-width='1'%3E%3Cpath d='M0 150 95 95 210 160 340 80 490 175 620 100 760 190 920 95 1070 160 1220 65 1440 145M0 520 140 430 280 500 420 390 570 485 710 380 860 475 1010 360 1170 455 1320 350 1440 410M95 95 140 430M340 80 420 390M620 100 570 485M920 95 1010 360M1220 65 1170 455'/%3E%3C/g%3E%3Cg fill='%239972FF'%3E%3Ccircle cx='95' cy='95' r='3'/%3E%3Ccircle cx='340' cy='80' r='2.5'/%3E%3Ccircle cx='620' cy='100' r='3'/%3E%3Ccircle cx='920' cy='95' r='2.5'/%3E%3Ccircle cx='1220' cy='65' r='3'/%3E%3Ccircle cx='140' cy='430' r='3'/%3E%3Ccircle cx='420' cy='390' r='2.5'/%3E%3Ccircle cx='710' cy='380' r='3'/%3E%3Ccircle cx='1010' cy='360' r='2.5'/%3E%3Ccircle cx='1320' cy='350' r='3'/%3E%3C/g%3E%3C/svg%3E");
  background-size:cover;
  background-position:center;
  mask-image:linear-gradient(to bottom,transparent 0%,black 18%,black 85%,transparent 100%);
}
.hero .eyebrow{color:#C4B5FD}
.hero .eyebrow-line{background:#9972FF}
.hero h1{color:#F8F7FF}
.hero h1 em,.hero .green-dot{color:#C4B5FD}
.hero-lead{color:#b8b9cc}
.hero .text-link{color:#F8F7FF;border-bottom-color:rgba(196,181,253,.3)}
.hero .text-link span{color:#C4B5FD}
.hero .availability{color:#b8b9cc}
.hero .pulse{background:#9972FF;box-shadow:0 0 0 5px rgba(153,114,255,.2)}
.hero .button-dark{background:#9972FF;color:#111118}
.hero .button-dark:hover{background:#C4B5FD}
.hero-art .art-orbit{border-color:rgba(196,181,253,.23)}
.hero-art .orbit-two{border-color:rgba(153,114,255,.25)}
/* Zadrži čitljivost demonstracijskih prikaza preko tamne pozadine */
.hero .browser{box-shadow:0 35px 100px rgba(0,0,0,.48)}
.social-links{display:flex;align-items:center;gap:11px;margin-top:18px}
.social-links a{width:38px;height:38px;display:grid;place-items:center;border:1px solid rgba(196,181,253,.27);border-radius:50%;color:#C4B5FD;transition:background .2s,color .2s,border-color .2s,transform .2s}
.social-links a:hover{background:#9972FF;border-color:#9972FF;color:#111118;transform:translateY(-3px)}
.social-links svg{width:17px;height:17px;fill:currentColor}
.social-links a:nth-child(2) svg rect,.social-links a:nth-child(2) svg circle{stroke:currentColor}
@media(prefers-reduced-motion:reduce){.social-links a{transition:none}}


/* =========================================================
   HERO MOTION — WINWEBS SOLUTION / PREMIUM INTERACTION
   Zadržava postojeći raspored, dimenzije i sadržaj.
   ========================================================= */
.hero{
  perspective:1200px;
}
.hero-copy .eyebrow{
  animation:heroEyebrowIn .8s cubic-bezier(.2,.75,.25,1) both;
}
.hero h1 .hero-word{
  display:inline-block;
  opacity:0;
  transform:translate3d(0,24px,0);
  animation:heroWordIn .78s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay:var(--word-delay,0ms);
  will-change:transform,opacity;
}
.hero h1 em{
  background:linear-gradient(105deg,#C4B5FD 0%,#9972FF 35%,#e0d7ff 58%,#9972FF 82%,#C4B5FD 100%);
  background-size:220% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:heroGradientFlow 8s ease-in-out infinite;
  filter:drop-shadow(0 0 14px rgba(153,114,255,.16));
}
.hero .hero-lead,
.hero .hero-actions,
.hero .availability{
  opacity:0;
  animation:heroSupportingIn .85s cubic-bezier(.16,1,.3,1) forwards;
}
.hero .hero-lead{animation-delay:650ms}
.hero .hero-actions{animation-delay:820ms}
.hero .availability{animation-delay:980ms}

@keyframes heroWordIn{
  to{opacity:1;transform:translate3d(0,0,0)}
}
@keyframes heroEyebrowIn{
  from{opacity:0;transform:translate3d(0,10px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}
@keyframes heroSupportingIn{
  from{opacity:0;transform:translate3d(0,14px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}
@keyframes heroGradientFlow{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}

/* Glavni prikaz lebdi, dok parallax koristi zasebno CSS translate svojstvo. */
.hero-art{transform-style:preserve-3d}
.hero-art .browser-main{
  transform:rotate(-5deg);
  translate:var(--hero-parallax-x,0px) var(--hero-parallax-y,0px);
  animation:browserFloat 7.5s ease-in-out infinite;
  transform-origin:50% 50%;
  will-change:translate,transform;
}
@keyframes browserFloat{
  0%,100%{transform:rotate(-5deg) translateY(0)}
  50%{transform:rotate(-4.1deg) translateY(-10px)}
}
.hero-art .card-performance{
  translate:var(--hero-parallax-x,0px) var(--hero-parallax-y,0px);
  animation:performanceFloat 6.8s ease-in-out infinite;
  will-change:translate;
}
.hero-art .card-mobile{
  translate:var(--hero-parallax-x,0px) var(--hero-parallax-y,0px);
  animation:mobileFloat 7.8s ease-in-out infinite;
  animation-delay:-2.2s;
  will-change:translate;
}
@keyframes performanceFloat{
  0%,100%{translate:0 0}
  50%{translate:0 -9px}
}
@keyframes mobileFloat{
  0%,100%{translate:0 0}
  50%{translate:0 11px}
}
.hero-art .orbit-one{
  animation:orbitBreath 9s ease-in-out infinite;
  transform-origin:center;
}
.hero-art .orbit-two{
  animation:orbitRotate 48s linear infinite;
  transform-origin:center;
}
@keyframes orbitBreath{
  0%,100%{transform:scale(1);opacity:.72}
  50%{transform:scale(1.035);opacity:1}
}
@keyframes orbitRotate{to{transform:rotate(360deg)}}
.hero-art .art-sticker{
  animation:stickerFloat 8s ease-in-out infinite;
  transform-origin:center;
  filter:drop-shadow(0 8px 20px rgba(153,114,255,.14));
}
@keyframes stickerFloat{
  0%,100%{transform:rotate(13deg) translateY(0)}
  50%{transform:rotate(9deg) translateY(-8px)}
}
.hero-art .browser-main::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:8;
  pointer-events:none;
  background:linear-gradient(115deg,transparent 25%,rgba(255,255,255,.34) 48%,transparent 67%);
  background-size:220% 100%;
  background-position:150% 0;
  animation:browserSheen 9s ease-in-out infinite;
}
@keyframes browserSheen{
  0%,58%,100%{background-position:150% 0;opacity:0}
  68%{opacity:.65}
  82%{background-position:-40% 0;opacity:0}
}

/* Mreža i čestice pozadine: sporo pomjeranje i diskretni prolaz svjetlosti. */
.hero::before{
  animation:heroGridDrift 34s linear infinite;
}
.hero::after{
  animation:heroNetworkDrift 46s ease-in-out infinite alternate;
}
.hero{
  background-size:100% 100%,100% 100%,100% 100%;
}
.hero-copy::before{
  content:"";
  position:absolute;
  z-index:-1;
  width:420px;
  height:420px;
  left:-150px;
  top:-150px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(153,114,255,.12),rgba(80,130,255,.045) 38%,transparent 70%);
  filter:blur(12px);
  pointer-events:none;
  animation:heroAmbientGlow 12s ease-in-out infinite alternate;
}
@keyframes heroGridDrift{
  from{background-position:0 0,0 0}
  to{background-position:42px 21px,-42px -21px}
}
@keyframes heroNetworkDrift{
  from{background-position:0 0}
  to{background-position:34px -22px}
}
@keyframes heroAmbientGlow{
  from{transform:translate3d(0,0,0) scale(.94);opacity:.65}
  to{transform:translate3d(28px,18px,0) scale(1.08);opacity:1}
}

/* Dugmad s mekim osvjetljenjem i bez naglih promjena. */
.hero .button,
.hero .text-link{
  transition:transform .35s cubic-bezier(.2,.75,.25,1),background-color .35s ease,
    box-shadow .35s ease,color .35s ease,border-color .35s ease;
}
.hero .button-dark{
  box-shadow:0 8px 24px rgba(153,114,255,.2);
}
.hero .button-dark:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 34px rgba(153,114,255,.34),0 0 22px rgba(153,114,255,.13);
}
.hero .text-link:hover{
  transform:translateY(-2px);
  color:#C4B5FD;
  border-color:#9972FF;
}
.hero .text-link span{display:inline-block;transition:transform .3s ease}
.hero .text-link:hover span{transform:translate(4px,2px)}

/* Na uređajima bez preciznog pokazivača isključujemo miš-parallax. */
@media(hover:none),(max-width:900px){
  .hero-art .browser-main,
  .hero-art .card-performance,
  .hero-art .card-mobile{translate:0 0}
}
@media(max-width:760px){
  .hero-art .browser-main{animation-duration:9s}
  .hero-art .orbit-two{animation-duration:70s}
}
@media(prefers-reduced-motion:reduce){
  .hero *,
  .hero *::before,
  .hero *::after{
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important;
  }
  .hero h1 .hero-word,
  .hero .hero-lead,
  .hero .hero-actions,
  .hero .availability{
    opacity:1!important;
    transform:none!important;
  }
}


/* FIX: vidljivost animiranih riječi unutar ljubičastog gradijenta naslova */
.hero h1 em{
  display:inline-block;
  color:#C4B5FD;
  -webkit-text-fill-color:initial;
}
.hero h1 em .hero-word{
  background:linear-gradient(105deg,#C4B5FD 0%,#9972FF 38%,#E7DEFF 58%,#9972FF 82%,#C4B5FD 100%);
  background-size:220% 100%;
  background-position:0% 50%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  animation:heroWordIn .78s cubic-bezier(.16,1,.3,1) forwards,
            heroGradientFlow 8s ease-in-out infinite;
  animation-delay:var(--word-delay,0ms), 1.4s;
}


/* Slika korisnika unutar postojećeg sadržaja browser mockupa.
   Okvir, zaglavlje browsera, raspored i boje stranice ostaju originalni. */
.hero-art .mock-content-image{
  position:relative;
  z-index:2;
  width:100%;
  height:100%;
  min-height:0;
  padding:0;
  overflow:hidden;
  background:#e9eee8;
}
.hero-art .mock-content-screenshot{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 42%;
}


/* KOREKCIJA MOCKUPA: cijeli naslov na priloženoj slici mora ostati vidljiv.
   Prikaz slike je ograničen na unutrašnjost postojećeg browser okvira. */
.hero-art .mock-site{
  position:relative;
  overflow:hidden;
  background:#111118;
}
.hero-art .mock-site:has(.mock-content-screenshot) .mock-nav,
.hero-art .mock-site:has(.mock-content-screenshot) .mock-shape,
.hero-art .mock-site:has(.mock-content-screenshot) .mock-foot{
  display:none;
}
.hero-art .mock-site .mock-content-image{
  position:absolute;
  inset:0;
  z-index:1;
  width:100%;
  height:100%;
  min-height:0;
  margin:0;
  padding:0;
  overflow:hidden;
  background:#111118;
}
.hero-art .mock-site .mock-content-screenshot{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center center;
}


/* =========================================================
   PREMIUM ANIMATED NETWORK — NO ORBITS / NO DECORATIVE RINGS
   SVG crta mrežu slijeva nadesno, a tačke se pojavljuju na spojevima.
   ========================================================= */
.hero{
  isolation:isolate;
}
.hero::after{
  content:none!important;
  background:none!important;
  display:none!important;
}
.hero-network{
  position:absolute;
  inset:0;
  z-index:0;
  display:block;
  width:100%;
  height:100%;
  overflow:visible;
  pointer-events:none;
}
.hero-network .network-line{
  fill:none;
  stroke:rgba(115,130,205,.26);
  stroke-width:1.15;
  vector-effect:non-scaling-stroke;
  stroke-linecap:round;
  stroke-dasharray:1;
  stroke-dashoffset:1;
  animation:networkLineDraw 1.55s cubic-bezier(.55,.05,.25,1) var(--line-delay) forwards;
}
.hero-network .network-line:nth-child(5n){
  stroke:rgba(153,112,255,.34);
}
.hero-network .network-line:nth-child(7n){
  stroke-width:1.35;
}
.hero-network .network-node{
  fill:#9870FF;
  opacity:0;
  transform-box:fill-box;
  transform-origin:center;
  animation:networkNodeAppear .55s ease-out var(--node-delay) forwards,
            networkNodePulse 4.8s ease-in-out calc(var(--node-delay) + 1.2s) infinite;
  filter:drop-shadow(0 0 3px rgba(152,112,255,.32));
}
@keyframes networkLineDraw{
  0%{stroke-dashoffset:1;opacity:.12}
  100%{stroke-dashoffset:0;opacity:1}
}
@keyframes networkNodeAppear{
  0%{opacity:0;transform:scale(.25)}
  75%{opacity:1;transform:scale(1.25)}
  100%{opacity:.82;transform:scale(1)}
}
@keyframes networkNodePulse{
  0%,100%{opacity:.72}
  50%{opacity:1}
}
/* Uklanjanje orbitalnih elemenata i kružnog ambijentalnog sjaja. */
.hero .art-orbit,
.hero-art .art-orbit,
.hero-copy::before{
  display:none!important;
  content:none!important;
  animation:none!important;
  background:none!important;
  border:0!important;
  box-shadow:none!important;
}
.hero-copy,.hero-art{
  position:relative;
  z-index:1;
}
.hero-copy{z-index:2}
.hero-art{z-index:1}
@media(max-width:760px){
  .hero-network .network-line{stroke-width:1}
  .hero-network .network-node{filter:none}
}
@media(prefers-reduced-motion:reduce){
  .hero-network .network-line{
    animation:none!important;
    stroke-dashoffset:0!important;
    opacity:.8!important;
  }
  .hero-network .network-node{
    animation:none!important;
    opacity:.85!important;
    transform:none!important;
  }
}


/* Sekvencijalno povezivanje: tačka -> linija -> sljedeća tačka. */
.hero-network .network-line{
  opacity:0;
  stroke-dasharray:1;
  stroke-dashoffset:1;
  animation:none;
}
.hero-network .network-line-build{
  animation:networkLineDraw var(--line-duration,.62s) cubic-bezier(.45,.05,.2,1)
    var(--line-delay) forwards;
}
.hero-network .network-line-extra{
  animation:networkExtraDraw var(--line-duration,.72s) ease-out
    var(--line-delay) forwards;
}
.hero-network .network-node{
  opacity:0;
  animation:networkNodeAppear .28s ease-out var(--node-delay) forwards,
            networkNodePulse 4.8s ease-in-out calc(var(--node-delay) + .8s) infinite;
}
.hero-network .network-node-start{
  opacity:.95;
  animation:networkNodePulse 4.8s ease-in-out 1s infinite;
  filter:drop-shadow(0 0 5px rgba(152,112,255,.6));
}
@keyframes networkLineDraw{
  0%{stroke-dashoffset:1;opacity:.08}
  100%{stroke-dashoffset:0;opacity:1}
}
@keyframes networkExtraDraw{
  0%{stroke-dashoffset:1;opacity:0}
  15%{opacity:.18}
  100%{stroke-dashoffset:0;opacity:.72}
}
@keyframes networkNodeAppear{
  0%{opacity:0;transform:scale(.35)}
  100%{opacity:.92;transform:scale(1)}
}
@media(prefers-reduced-motion:reduce){
  .hero-network .network-line,
  .hero-network .network-line-build,
  .hero-network .network-line-extra{
    animation:none!important;
    stroke-dashoffset:0!important;
    opacity:.8!important;
  }
  .hero-network .network-node,
  .hero-network .network-node-start{
    animation:none!important;
    opacity:.9!important;
    transform:none!important;
  }
}


/* Dolazak linije: tačka kratko zasvijetli, zatim se vrati na miran intenzitet. */
.hero-network .network-node{
  animation:
    networkNodeArrival .95s cubic-bezier(.18,.72,.25,1) var(--node-delay) both,
    networkNodePulse 6.5s ease-in-out calc(var(--node-delay) + 1.05s) infinite;
}
.hero-network .network-node-start{
  animation:
    networkStartGlow 1.1s ease-out 0s both,
    networkNodePulse 6.5s ease-in-out 1.2s infinite;
}
@keyframes networkNodeArrival{
  0%{
    opacity:0;
    transform:scale(.55);
    filter:drop-shadow(0 0 0 rgba(152,112,255,0));
  }
  22%{
    opacity:1;
    transform:scale(1.65);
    filter:drop-shadow(0 0 9px rgba(174,143,255,.95))
           drop-shadow(0 0 17px rgba(152,112,255,.72));
  }
  48%{
    opacity:1;
    transform:scale(1.18);
    filter:drop-shadow(0 0 6px rgba(174,143,255,.62));
  }
  100%{
    opacity:.62;
    transform:scale(1);
    filter:drop-shadow(0 0 2px rgba(152,112,255,.2));
  }
}
@keyframes networkStartGlow{
  0%{opacity:.2;transform:scale(.7);filter:drop-shadow(0 0 0 rgba(152,112,255,0))}
  25%{opacity:1;transform:scale(1.7);filter:drop-shadow(0 0 10px rgba(174,143,255,.95))}
  55%{opacity:1;transform:scale(1.15);filter:drop-shadow(0 0 5px rgba(152,112,255,.5))}
  100%{opacity:.62;transform:scale(1);filter:drop-shadow(0 0 2px rgba(152,112,255,.2))}
}
@keyframes networkNodePulse{
  0%,100%{opacity:.58;filter:drop-shadow(0 0 2px rgba(152,112,255,.18))}
  50%{opacity:.76;filter:drop-shadow(0 0 3px rgba(152,112,255,.3))}
}
@media(prefers-reduced-motion:reduce){
  .hero-network .network-node,
  .hero-network .network-node-start{
    animation:none!important;
    opacity:.72!important;
    transform:none!important;
    filter:none!important;
  }
}


/* Nakon što se mreža izgradi, sve linije i tačke zajedno pulsiraju
   u pravilnom ciklusu od 3 sekunde: prigušeno → osvijetljeno → prigušeno. */
.hero-network .network-lines,
.hero-network .network-dots{
  animation: networkWholeGroupPulse 3s ease-in-out 21s infinite;
  transform-box:fill-box;
}
@keyframes networkWholeGroupPulse{
  0%,100%{opacity:.28}
  50%{opacity:1}
}
@media(prefers-reduced-motion:reduce){
  .hero-network .network-lines,
  .hero-network .network-dots{
    animation:none!important;
    opacity:.85!important;
  }
}


/* RESPONSIVE NETWORK FIX — mreža zadržava proporcije na telefonima i tabletima. */
.hero-network{
  inset:0;
  width:100%;
  height:100%;
  overflow:hidden;
  pointer-events:none;
}
@media (max-width:760px){
  .hero-network{
    opacity:.48;
    overflow:hidden;
  }
  .hero-network .network-line{
    stroke-width:1.2;
  }
  .hero-network .network-node{
    filter:drop-shadow(0 0 2px rgba(152,112,255,.3));
  }
}
@media (max-width:420px){
  .hero-network{
    opacity:.36;
  }
}
@media (max-width:360px){
  .hero-network{
    opacity:.30;
  }
}

/* SEO: vidljivi opis područja usluge */
.service-area-copy {
  max-width: 850px;
  margin: 22px 0 34px;
  color: var(--muted, #686b66);
  font-size: 0.98rem;
  line-height: 1.8;
}