/* Premium services showcase */
#servicesView { overflow: clip; }
body:has(#servicesView.is-active) .whatsapp-float { display:none; }
@media (min-width:1220px) { .app-shell:has(#servicesView.is-active) { width:min(100%,1840px); } #servicesView.page-padding { width:min(100%,1800px); padding-inline:clamp(24px,3.5vw,62px); } }
.services-premium { position:relative; isolation:isolate; overflow:hidden; margin:22px 0 42px; padding:0 clamp(14px,2vw,28px) 22px; border:1px solid rgba(225,177,78,.2); border-radius:27px; background:radial-gradient(ellipse at 51% -7%,rgba(140,87,20,.18),transparent 45%),linear-gradient(145deg,rgba(15,14,12,.98),rgba(7,9,10,.98) 57%,rgba(15,12,8,.97)); box-shadow:0 24px 70px rgba(0,0,0,.27),inset 0 1px rgba(255,238,191,.035); }
.services-premium::before { content:""; position:absolute; z-index:-2; inset:0; opacity:.56; pointer-events:none; background:url("assets/naxo-background-lines.svg") center 31% / cover no-repeat; mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.78) 39%,transparent 81%); }
.services-premium::after { content:""; position:absolute; z-index:-1; inset:0; pointer-events:none; background:radial-gradient(ellipse at 50% 31%,transparent 3%,rgba(7,8,9,.24) 70%,rgba(7,8,9,.52)); }
.services-light-trails { position:absolute; z-index:-1; inset:0; overflow:hidden; pointer-events:none; }
.services-light-trails span { position:absolute; top:-34%; left:-9%; width:118%; height:58%; border:1px solid transparent; border-bottom-color:rgba(230,181,76,.31); border-radius:50%; filter:drop-shadow(0 0 8px rgba(231,175,58,.12)); transform:rotate(-8deg); animation:serviceTrailDrift 25s ease-in-out infinite alternate; }
.services-light-trails span+span { top:60%; left:19%; width:97%; height:34%; border-bottom-color:transparent; border-top-color:rgba(231,178,70,.22); transform:rotate(-9deg); animation-delay:-12s; }
.services-light-trails i { position:absolute; width:3px; height:3px; border-radius:50%; background:#f5d68b; box-shadow:0 0 9px 2px rgba(237,184,76,.45); opacity:.5; animation:serviceParticleDrift 10s ease-in-out infinite alternate; }
.services-light-trails i:nth-of-type(1) { top:18%; left:13%; }
.services-light-trails i:nth-of-type(2) { top:24%; right:14%; animation-delay:-3s; }
.services-light-trails i:nth-of-type(3) { top:61%; left:48%; width:2px; height:2px; animation-delay:-6s; }
.services-light-trails i:nth-of-type(4) { bottom:13%; right:21%; animation-delay:-1s; }
.services-premium-heading.page-title { position:relative; z-index:1; max-width:920px; margin-inline:auto; padding:36px 8px 22px; text-align:center; }
.services-premium-heading .section-kicker { color:#ecc775; letter-spacing:.18em; }
.services-premium-heading h1 { margin:10px auto 8px; font-size:clamp(37px,4.4vw,61px); line-height:1.28; text-wrap:balance; }
.services-premium-heading h1 em { color:#f0cd7a; font-style:normal; background:linear-gradient(100deg,#bd852c,#fff0ba 33%,#d5a340 64%,#f3d994); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.services-premium-heading p { margin:0 auto; max-width:68ch; color:#c1bcb1; font-size:clamp(13px,1.2vw,16px); line-height:1.95; }
.services-explore-button { display:inline-flex; align-items:center; gap:15px; min-height:43px; margin-top:16px; padding:0 19px; border:1px solid rgba(231,190,96,.36); border-radius:999px; color:#f0cf83; background:rgba(9,10,10,.65); font-size:12px; font-weight:700; line-height:1.4; font-family:inherit; cursor:pointer; transition:color .2s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease; }
.services-explore-button span { display:inline-grid; place-items:center; width:23px; height:23px; border-radius:50%; color:#1c1509; background:linear-gradient(145deg,#fae5a7,#cd9438); transition:transform .25s ease; }
.services-explore-button:hover { border-color:rgba(248,216,141,.75); color:#fff2cc; background:rgba(208,155,55,.11); box-shadow:0 0 23px rgba(220,170,69,.13); }
.services-explore-button:hover span { transform:translateX(-3px); }
html[dir="ltr"] .services-explore-button:hover span { transform:translateX(3px); }
.service-showcase-grid { position:relative; z-index:1; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:13px; scroll-margin-top:30px; direction:ltr; }
.service-showcase-card { position:relative; display:flex; min-width:0; min-height:410px; flex-direction:column; overflow:hidden; padding:8px; border:1px solid rgba(217,168,70,.35); border-radius:17px; background:linear-gradient(154deg,rgba(45,34,17,.8),rgba(10,11,11,.98) 53%,rgba(16,14,11,.96)); box-shadow:inset 0 1px rgba(255,237,187,.06),0 13px 35px rgba(0,0,0,.3); transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease; direction:rtl; }
.service-showcase-card::before { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; background:radial-gradient(ellipse at 50% 0,rgba(244,197,93,.13),transparent 65%); transition:opacity .3s ease; }
.service-showcase-card:hover,.service-showcase-card:focus-within,.service-showcase-card.naxo-reveal.naxo-visible:hover { transform:translateY(-5px); border-color:rgba(244,206,124,.72); box-shadow:inset 0 1px rgba(255,237,187,.12),0 17px 38px rgba(0,0,0,.42),0 0 25px rgba(223,168,58,.13); }
.service-showcase-card:hover::before,.service-showcase-card:focus-within::before { opacity:1; }
.service-showcase-art { position:relative; isolation:isolate; overflow:hidden; aspect-ratio:16/9; flex:0 0 auto; border:1px solid rgba(241,194,96,.15); border-radius:12px; background:radial-gradient(ellipse at 50% 65%,rgba(186,112,30,.27),transparent 53%),#11100d; }
.service-showcase-art img { display:block; width:100%; height:100%; object-fit:cover; opacity:.91; filter:saturate(.9) contrast(1.04); transition:transform .65s cubic-bezier(.2,.75,.2,1),filter .4s ease; }
.service-showcase-card:hover .service-showcase-art img { transform:scale(1.055); filter:saturate(1.04) contrast(1.04); }
.service-showcase-art-shade { position:absolute; z-index:1; inset:0; background:linear-gradient(180deg,rgba(7,8,9,.4),transparent 32%,rgba(7,8,9,.1) 57%,rgba(7,8,9,.27)); pointer-events:none; }
.service-showcase-number { position:absolute; z-index:2; top:9px; left:9px; display:grid; place-items:center; min-width:34px; height:32px; padding:0 6px; border:1px solid rgba(239,190,83,.31); border-radius:9px; color:#f1ce79; background:rgba(13,11,8,.77); box-shadow:0 4px 12px rgba(0,0,0,.28); font:700 12px/1 "Plus Jakarta Sans",sans-serif; }
.service-showcase-icon { position:absolute; z-index:2; top:8px; right:8px; display:grid; place-items:center; width:34px; height:34px; border:1px solid rgba(235,190,93,.3); border-radius:10px; color:#ffdc89; background:rgba(12,11,9,.78); backdrop-filter:blur(8px); }
.service-showcase-icon svg { width:20px; height:20px; }
.service-showcase-orbit { position:absolute; z-index:1; left:-10%; bottom:-53%; width:120%; height:76%; border:1px solid rgba(246,190,74,.43); border-radius:50%; box-shadow:0 -7px 23px rgba(218,154,42,.15); transform:rotate(-9deg); pointer-events:none; }
.service-showcase-copy { position:relative; z-index:1; display:flex; flex:1 1 auto; min-width:0; flex-direction:column; padding:13px 7px 8px; text-align:start; }
.service-showcase-copy h2 { margin:0 0 6px; color:#fbf5e8; font-size:clamp(13px,1.05vw,16px); font-weight:800; line-height:1.65; text-wrap:balance; }
.service-showcase-copy p { margin:0; color:#aaa69e; font-size:clamp(10px,.76vw,12px); line-height:1.85; }
.service-showcase-tags { display:flex; flex-wrap:wrap; gap:6px; align-content:flex-start; margin:11px 0 0; padding:0; list-style:none; }
.service-showcase-tags li { display:inline-flex; align-items:center; gap:5px; max-width:100%; min-height:25px; padding:4px 7px; border:1px solid rgba(214,170,85,.15); border-radius:8px; color:#d1c8b3; background:rgba(183,133,48,.06); font-size:clamp(9px,.68vw,10px); line-height:1.4; overflow-wrap:anywhere; }
.service-showcase-tags li::before { content:""; width:4px; height:4px; flex:0 0 4px; border-radius:50%; background:#dbb45f; box-shadow:0 0 7px rgba(228,177,68,.58); }
.service-showcase-action { position:relative; z-index:1; display:flex; flex:0 0 auto; align-items:center; justify-content:space-between; gap:8px; width:100%; min-height:43px; padding:5px 7px 5px 11px; border:1px solid rgba(228,181,81,.41); border-radius:12px; color:#f7ead0; background:linear-gradient(135deg,rgba(217,168,70,.14),rgba(37,30,18,.67)); font-size:11px; font-weight:700; line-height:1.5; font-family:inherit; text-align:start; cursor:pointer; transition:border-color .22s ease,background .22s ease,color .22s ease,box-shadow .22s ease; }
.service-showcase-action i { display:grid; flex:0 0 29px; place-items:center; width:29px; height:29px; border:1px solid rgba(255,232,174,.35); border-radius:50%; color:#191207; background:linear-gradient(140deg,#ffe6a1,#ca902f); font-style:normal; font-size:16px; line-height:1; transition:transform .22s ease,filter .22s ease; }
.service-showcase-action:hover { border-color:#f5d88d; color:#fff7e4; background:linear-gradient(135deg,rgba(234,184,78,.24),rgba(53,38,17,.87)); box-shadow:0 0 17px rgba(226,169,57,.12); }
.service-showcase-action:hover i { transform:scale(1.06); filter:brightness(1.08); }
.services-assurance-band { position:relative; z-index:1; display:grid; grid-template-columns:minmax(175px,1.08fr) minmax(0,2.25fr) minmax(172px,.9fr); align-items:center; gap:20px; margin-top:20px; padding:13px 15px; border:1px solid rgba(227,188,110,.2); border-radius:18px; background:linear-gradient(120deg,rgba(255,255,255,.028),rgba(230,177,77,.055),rgba(255,255,255,.02)); box-shadow:inset 0 1px rgba(255,248,224,.035),0 10px 25px rgba(0,0,0,.19); }
.services-assurance-intro { display:flex; min-width:0; align-items:center; gap:10px; }
.services-team-icon,.services-assurance-icon { display:grid; flex:0 0 40px; place-items:center; width:40px; height:40px; border:1px solid rgba(236,190,86,.24); border-radius:50%; color:#efc873; background:radial-gradient(circle,rgba(212,157,49,.13),rgba(10,10,9,.24)); }
.services-team-icon svg,.services-assurance-icon svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.services-assurance-intro strong,.services-assurance-item strong { display:block; color:#f4e8c7; font-size:12px; line-height:1.55; }
.services-assurance-intro small,.services-assurance-item small { display:block; margin-top:3px; color:#a8a398; font-size:10px; line-height:1.65; }
.services-assurance-items { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:center; gap:9px; }
.services-assurance-item { display:flex; min-width:0; align-items:center; gap:9px; }
.services-assurance-item+.services-assurance-item { border-inline-start:1px solid rgba(228,207,163,.12); padding-inline-start:12px; }
.services-assurance-item .services-assurance-icon { flex-basis:36px; width:36px; height:36px; }
.services-assurance-item .services-assurance-icon svg { width:18px; height:18px; }
.services-assurance-item strong { font-size:11px; }
.services-assurance-item small { font-size:9px; }
.services-contact-button { position:relative; display:flex; min-width:0; min-height:53px; flex-wrap:wrap; align-content:center; align-items:center; justify-content:space-between; gap:2px 10px; padding:8px 13px; border:1px solid rgba(255,230,170,.5); border-radius:14px; color:#1d1609; background:linear-gradient(115deg,#f5d783,#d49a37 56%,#edc264); box-shadow:inset 0 1px rgba(255,251,232,.5),0 9px 24px rgba(191,131,34,.16); font-weight:800; text-decoration:none; transition:transform .24s ease,filter .24s ease,box-shadow .24s ease; }
.services-contact-button:hover { transform:translateY(-2px); filter:brightness(1.06); box-shadow:inset 0 1px rgba(255,251,232,.6),0 12px 28px rgba(191,131,34,.24); }
.services-contact-button>span:first-child { font-size:12px; }
.services-contact-button>span:nth-child(2) { font-size:16px; }
html[dir="ltr"] .services-contact-button>span:nth-child(2) { transform:scaleX(-1); }
.services-contact-button small { flex-basis:100%; color:rgba(40,29,10,.74); font-size:9px; font-weight:600; line-height:1.45; }
.services-catalog-intro { margin:4px 0 19px; text-align:center; }
.services-catalog-intro .section-kicker { font-size:9px; letter-spacing:.15em; }
.services-catalog-intro h2 { margin:5px 0 3px; color:#f3ead7; font-size:clamp(21px,2.6vw,30px); line-height:1.5; }
.services-catalog-intro p { margin:0; color:#9e9a90; font-size:12px; line-height:1.8; }
/* The full catalog is a visual section of its own, not a long single-column list. */
#serviceCatalogView .service-category-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:22px 0 36px; }
#serviceCatalogView .service-category-card { position:relative; grid-template-columns:48px minmax(0,1fr); grid-template-rows:auto; align-items:start; min-height:174px; padding:18px 18px 49px; gap:0 13px; border-color:rgba(222,177,83,.22); border-radius:19px; background:radial-gradient(ellipse at 100% 0,rgba(205,154,49,.12),transparent 62%),linear-gradient(145deg,rgba(25,25,22,.96),rgba(10,12,13,.98)); box-shadow:inset 0 1px rgba(255,241,206,.045),0 14px 32px rgba(0,0,0,.2); }
#serviceCatalogView .service-category-card.is-featured { border-color:rgba(232,190,100,.42); }
#serviceCatalogView .service-category-icon { width:46px; height:46px; border-radius:15px; }
#serviceCatalogView .service-category-copy { gap:7px; padding-top:1px; }
#serviceCatalogView .service-category-copy strong { font-size:15px; line-height:1.6; }
#serviceCatalogView .service-category-copy small { font-size:11px; line-height:1.75; }
#serviceCatalogView .service-category-copy i { color:#d9b96f; font-size:10px; line-height:1.5; font-style:normal; }
#serviceCatalogView .service-category-arrow { position:absolute; inset-inline-end:17px; bottom:14px; display:grid; place-items:center; width:28px; height:28px; border:1px solid rgba(222,177,83,.25); border-radius:50%; color:#f1d27f; background:rgba(222,177,83,.07); font-size:17px; }
@media (max-width:1050px) { #serviceCatalogView .service-category-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px) { #serviceCatalogView .service-category-grid { grid-template-columns:minmax(0,1fr); gap:10px; margin-top:15px; } #serviceCatalogView .service-category-card { min-height:126px; grid-template-columns:44px minmax(0,1fr); padding:15px 15px 42px; } #serviceCatalogView .service-category-icon { width:42px; height:42px; border-radius:13px; font-size:20px; } #serviceCatalogView .service-category-copy strong { font-size:14px; } #serviceCatalogView .service-category-copy small { font-size:10px; } }
@keyframes serviceTrailDrift { from { translate:-1% 4px; opacity:.44; } to { translate:1% -5px; opacity:.78; } }
@keyframes serviceParticleDrift { from { translate:0 0; opacity:.27; } to { translate:3px -8px; opacity:.65; } }
@media (max-width:1200px) { .service-showcase-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .service-showcase-card { min-height:405px; } .services-assurance-band { grid-template-columns:minmax(0,1fr) minmax(0,1.7fr); } .services-contact-button { grid-column:1/-1; justify-content:center; column-gap:14px; } .services-contact-button small { flex-basis:auto; } }
@media (max-width:760px) { .services-premium { margin-top:14px; padding-inline:11px; border-radius:21px; } .services-premium-heading.page-title { padding:29px 5px 18px; } .services-premium-heading h1 { font-size:clamp(32px,7vw,44px); } .services-premium-heading p { font-size:12px; } .service-showcase-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .service-showcase-card { min-height:0; padding:7px; border-radius:14px; } .service-showcase-art { border-radius:10px; } .service-showcase-copy { padding:10px 5px 9px; } .service-showcase-copy h2 { font-size:13px; } .service-showcase-copy p { font-size:10px; } .service-showcase-tags { gap:5px; margin-top:8px; } .service-showcase-tags li { min-height:23px; padding:3px 6px; font-size:9px; } .service-showcase-action { min-height:40px; padding-inline:7px; font-size:10px; } .service-showcase-action i { flex-basis:27px; width:27px; height:27px; } .services-assurance-band { grid-template-columns:minmax(0,1fr); gap:13px; padding:13px; } .services-assurance-intro { justify-content:center; text-align:start; } .services-assurance-items { grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; } .services-assurance-item { flex-direction:column; gap:5px; text-align:center; } .services-assurance-item+.services-assurance-item { padding-inline-start:4px; } .services-assurance-item .services-assurance-icon { flex-basis:32px; width:32px; height:32px; } .services-assurance-item strong { font-size:10px; } .services-assurance-item small { font-size:9px; } .services-contact-button { grid-column:auto; width:100%; min-height:52px; } }
@media (max-width:440px) { .service-showcase-grid { grid-template-columns:minmax(0,1fr); gap:11px; } .service-showcase-card { display:grid; grid-template-columns:minmax(112px,.82fr) minmax(0,1.25fr); grid-template-rows:minmax(0,1fr) auto; align-items:stretch; gap:0 9px; padding:7px; } .service-showcase-art { grid-column:1; grid-row:1; align-self:start; margin-top:2px; } .service-showcase-copy { grid-column:2; grid-row:1; padding:2px 2px 7px; } .service-showcase-copy h2 { margin-bottom:4px; font-size:12px; line-height:1.55; } .service-showcase-copy p { font-size:9px; line-height:1.7; } .service-showcase-tags { margin-top:7px; } .service-showcase-tags li { min-height:21px; padding:2px 5px; font-size:8px; } .service-showcase-action { grid-column:1/-1; grid-row:2; margin-top:5px; min-height:37px; } .service-showcase-number { top:6px; left:6px; min-width:28px; height:27px; font-size:10px; } .service-showcase-icon { top:5px; right:5px; width:29px; height:29px; } .service-showcase-icon svg { width:17px; height:17px; } .services-assurance-items { grid-template-columns:1fr; gap:8px; } .services-assurance-item { flex-direction:row; justify-content:flex-start; text-align:start; } .services-assurance-item+.services-assurance-item { border-inline-start:0; border-top:1px solid rgba(228,207,163,.1); padding:8px 0 0; } .services-assurance-item .services-assurance-icon { flex-basis:34px; width:34px; height:34px; } .services-assurance-item strong { font-size:11px; } .services-assurance-item small { font-size:9px; } .services-catalog-intro { margin-top:0; } }
@media (prefers-reduced-motion:reduce) { .services-light-trails span,.services-light-trails i { animation:none!important; } .service-showcase-card,.service-showcase-card:hover,.service-showcase-card:focus-within,.service-showcase-card.naxo-reveal.naxo-visible:hover,.service-showcase-art img,.service-showcase-action,.service-showcase-action i,.services-contact-button,.services-explore-button,.services-explore-button span { transition:none!important; transform:none!important; } }