/* Reference-inspired visual layer. Existing forms, dialogs and interactions remain. */
:root { --bg-dark:#050c13; --text-soft:#c1cbd7; --text-muted:#97a8ba; }
body { background:radial-gradient(ellipse at 75% 8%,#0e233b80,transparent 31%),#050c13; font-family:Inter,"Segoe UI",Arial,sans-serif; }
.header-inner,.hero-inner,.services-inner,.projects-inner,.care-inner,.about-inner,.contact-inner,.footer-inner,.footer-bottom { width:min(1320px,90%); }
.site-header { padding:12px 0; background:#050c13b3; border-bottom:1px solid #729bc91a; }
.site-header.scrolled { background:#050c13ed; }
.brand-logo { width:224px; }
.main-nav { gap:36px; }
.main-nav a { font-size:.85rem; color:#e3eaf2; }
.header-cta,.btn-primary { border:1px solid #329eff; background:linear-gradient(115deg,#16b9f2 0%,#0872ff 45%,#0346b7 100%); box-shadow:inset 0 1px 0 #ffffff3b,0 5px 22px #006eff33; }
.header-cta { background:linear-gradient(110deg,#009eff,#004fbe 52%,#071628); font-size:.82rem; border-radius:9px; padding:13px 22px; }
.header-cta::after { content:'→'; margin-left:18px; font-size:1.1rem; }
.hero { padding:55px 0 38px; }
.hero::before { background:none; }
.hero::after { background:#006eff26; right:6%; top:0; width:600px; height:400px; filter:blur(100px); }
.hero-inner { grid-template-columns: .98fr 1.08fr; gap:32px; min-height:450px; }
.hero-content { position:relative; z-index:2; }
.hero-kicker { font-size:.65rem; letter-spacing:.29em; color:#37b5ff; margin-bottom:21px; line-height:1.8; }
.hero-title { font-size:clamp(2.4rem,3.5vw,3.45rem); line-height:1.07; letter-spacing:-.035em; font-weight:750; }
.hero-title span { background-image:linear-gradient(110deg,#2684ff 4%,#50cee6 47%,#568fff 95%); }
.hero-text { font-size:1.06rem; line-height:1.5; max-width:520px; margin:20px 0 26px; }
.hero-actions { gap:12px; }
.btn { gap:13px; font-size:.9rem; border-radius:9px; min-height:49px; padding:13px 22px; }
.btn svg { width:19px; height:19px; color:#42c4ff; }
.btn-secondary { border:1px solid #3978ab99; background:linear-gradient(130deg,#071320,#0a1523); box-shadow:inset 0 1px 0 #ffffff0a; }
.hero-benefits { flex-wrap:nowrap; gap:14px; margin-top:32px; }
.hero-benefit { display:flex; flex-direction:row; align-items:center; gap:10px; flex:1; }
.hero-benefit + .hero-benefit { border-left:1px solid #85b7e52b; padding-left:14px; }
.hero-benefit>svg { width:30px; height:32px; flex-shrink:0; color:#269eff; }
.hero-benefit strong { display:block; font-size:.72rem; font-weight:500; line-height:1.4; }
.hero-benefit span { display:block; font-size:.62rem; line-height:1.5; margin-top:4px; color:#a4b3c4; }
.showcase { position:relative; min-width:0; padding:22px 10px 34px 0; isolation:isolate; }
.showcase-orbit { position:absolute; inset:-45px -15px 0 -25px; z-index:-1; background:radial-gradient(ellipse at 70% 20%,#55b9ff88,transparent 26%),radial-gradient(ellipse at 20% 65%,#077fff80,transparent 36%); filter:blur(22px); transform:rotate(-12deg); }
.showcase-orbit::after { content:''; position:absolute; inset:12% 5%; border:2px solid #49a9ff88; border-radius:50%; box-shadow:0 0 22px #2588ff,0 0 70px #006dff; transform:rotate(-24deg); }
.showcase-floor { position:absolute; left:0; right:-6%; bottom:17px; height:36px; background:#0879ff60; filter:blur(17px); border-radius:50%; }
.showcase-desktop { background:#070f19; border:1px solid #6eacdf88; border-radius:18px; overflow:hidden; transform:perspective(1100px) rotateY(-9deg) rotateX(3deg) rotateZ(-3deg); box-shadow:3px 6px 0 #0e2339,0 28px 50px #0009,0 0 20px #248cff55; }
.showcase-chrome { display:flex; align-items:center; justify-content:space-between; padding:9px 13px; color:#6b8db0; font-size:8px; background:linear-gradient(90deg,#1a2b3e,#081521); }
.showcase-chrome small { font-size:7px; opacity:.6; }
.showcase-nav { display:flex; justify-content:space-between; align-items:center; padding:13px 17px; font-size:7px; gap:12px; }
.showcase-nav strong { font-size:11px; white-space:nowrap; }
.showcase-nav>span { background:#e3eaf5; color:#122333; padding:6px 9px; border-radius:4px; white-space:nowrap; }
.showcase-scene { position:relative; height:255px; overflow:hidden; }
.showcase-scene>img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:65% center; }
.showcase-scene::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,#030b14f5 0%,#030b14a8 40%,transparent 80%),linear-gradient(0deg,#07101a,transparent 35%); }
.showcase-copy { position:relative; z-index:1; padding:39px 25px; }
.showcase-copy>small { font-size:7px; letter-spacing:2px; color:#76bbed; }
.showcase-copy h2 { font-size:23px; line-height:1.17; margin:12px 0 10px; letter-spacing:-.02em; font-style:italic; }
.showcase-copy p { font-size:10px; line-height:1.5; color:#bfc9d5; margin:0 0 17px; }
.mini-primary { display:inline-block; padding:10px 13px; font-size:9px; color:white; background:linear-gradient(115deg,#15b9ee,#0866ff,#073faf); border:1px solid #31b3ff; border-radius:5px; box-shadow:0 5px 12px #0056ff33; }
.showcase-features { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; padding:9px 12px 13px; }
.showcase-features>div { background:linear-gradient(140deg,#122233,#0a1520); padding:11px 9px; border:1px solid #6283ad17; border-radius:8px; }
.showcase-features svg { width:20px; height:20px; color:#82b9e8; margin-bottom:7px; }
.showcase-features strong,.showcase-features small { display:block; font-size:8px; line-height:1.5; }
.showcase-features small { font-size:6px; color:#aab6c6; margin-top:3px; }
.showcase-phone { position:absolute; right:-17px; bottom:31px; width:143px; padding:10px 7px 7px; background:#040b12; border:2px solid #56748e; border-radius:23px; box-shadow:5px 5px 0 #05121e,0 10px 25px #000b; transform:rotate(6deg); overflow:hidden; }
.phone-island { position:absolute; width:55px; height:11px; background:#000; top:5px; left:50%; transform:translateX(-50%); border-radius:9px; }
.phone-status { display:flex; justify-content:space-between; font-size:6px; margin:0 5px 13px; }
.phone-nav { display:flex; justify-content:space-between; font-size:7px; padding-bottom:12px; border-bottom:1px solid #ffffff14; }
.phone-copy { padding:13px 5px; }
.phone-copy>small { font-size:5px; color:#489fed; letter-spacing:1px; }
.phone-copy>strong { display:block; font-size:13px; line-height:1.12; margin-top:7px; font-style:italic; }
.phone-copy p { font-size:7px; line-height:1.5; color:#aeb9cb; }
.phone-copy .mini-primary { font-size:6px; padding:7px 8px; }
.showcase-phone>img { width:100%; height:83px; object-fit:cover; border-radius:4px 4px 14px 14px; }
.showcase-caption { display:block; font-size:7px; letter-spacing:2px; color:#7b98b5; text-align:center; margin-top:26px; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.premium-services { padding:10px 0 32px; overflow:visible; }
.premium-services::before { display:none; }
.premium-services-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.visual-service { position:relative; display:flex; flex-direction:column; text-decoration:none; border:1px solid #6487a52e; border-radius:13px; background:linear-gradient(125deg,#0b141e,#08121c 55%,#0a1723); overflow:hidden; transition:border-color .25s,box-shadow .25s,transform .25s; }
.visual-service:hover { border-color:#379deb99; box-shadow:0 15px 40px #0006,0 0 22px #1174cf18; transform:translateY(-5px); }
.visual-service-heading { display:grid; grid-template-columns:48px 1fr 33px; align-items:start; gap:15px; padding:21px 20px 0; }
.visual-service-icon { display:grid; place-items:center; height:48px; border-radius:10px; background:linear-gradient(140deg,#243a54,#142335); box-shadow:inset 0 1px 0 #ffffff12; color:#5bb3ff; }
.visual-service-icon svg { width:30px; height:30px; }
.visual-service h3 { margin:3px 0 7px; font-size:1.17rem; font-weight:600; letter-spacing:-.03em; }
.visual-service p { margin:0; color:#b6c2cf; font-size:.79rem; line-height:1.5; }
.service-arrow { border:1px solid #6a9ac820; width:33px; height:33px; display:grid; place-items:center; background:#182839; border-radius:50%; color:#4bbcff; font-size:21px; margin-top:5px; }
.service-art { height:174px; position:relative; overflow:hidden; margin-top:19px; background:radial-gradient(ellipse at 60% 85%,#315f9066,transparent 68%); }
.visual-service-foot { display:flex; justify-content:space-between; margin-top:auto; padding:12px 20px; color:#90a8be; font-size:.65rem; border-top:1px solid #6b8cac1a; background:#06101adb; }
.mini-website { position:absolute; top:12px; left:22px; width:95%; background:#f4f6fa; border:5px solid #0a0f17; border-radius:12px; transform:rotate(9deg); padding:9px; box-shadow:0 0 0 1px #6b7b8d; }
.mini-website-nav { display:flex; justify-content:space-between; padding:5px 6px 12px; color:#162330; font-size:6px; }
.mini-website-nav strong { font-size:8px; }
.mini-website-body { position:relative; min-height:160px; padding:25px 15px; color:white; background:#08121c; overflow:hidden; }
.mini-website-body img { position:absolute; width:100%; height:100%; inset:0; object-fit:cover; opacity:.55; }
.mini-website-body>strong,.mini-website-body>small,.mini-website-body>span { position:relative; display:block; }
.mini-website-body strong { font-size:21px; line-height:1.1; }
.mini-website-body small { font-size:7px; margin:8px 0; }
.mini-website-body>span { color:#0c1925; background:white; padding:6px; font-size:6px; width:max-content; border-radius:3px; }
.mini-dashboard { position:absolute; top:9px; left:24px; width:104%; display:grid; grid-template-columns:86px 1fr; background:#0d1a29; border:1px solid #758aa0; border-radius:12px; transform:rotate(5deg); min-height:230px; box-shadow:0 0 0 5px #030a11; overflow:hidden; }
.mini-dashboard aside { padding:13px 8px; border-right:1px solid #ffffff0a; display:flex; flex-direction:column; gap:12px; font-size:7px; }
.mini-dashboard aside b { font-size:9px; margin-bottom:5px; }
.mini-dashboard aside span { padding:5px; }
.mini-dashboard .selected { background:#0860d6; border-radius:4px; }
.dashboard-main { padding:19px 14px; }
.dashboard-main>small { font-size:5px; color:#7894b0; }
.dashboard-main>strong { display:block; font-size:13px; margin:6px 0 12px; }
.dashboard-metrics { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.dashboard-metrics>div { padding:9px; background:#172738; border-radius:6px; font-size:8px; }
.dashboard-metrics b { display:block; font-size:22px; margin:5px 0; }
.dashboard-metrics small { font-size:5px; color:#9aacbf; }
.dashboard-main>svg { width:100%; margin-top:10px; }
.app-art { background:radial-gradient(ellipse at 20% 70%,#32587866,transparent 70%); }
.mini-app-phone { position:absolute; left:32px; top:9px; width:115px; min-height:218px; border:2px solid #67829a; border-radius:18px; padding:10px; background:#07111d; transform:rotate(10deg); box-shadow:4px 0 0 #010509; }
.mini-app-island { width:45px; height:8px; position:absolute; top:4px; left:34px; border-radius:10px; background:black; }
.mini-app-phone>small { font-size:6px; }
.mini-app-phone>b { display:block; font-size:9px; margin:18px 0 12px; }
.mini-app-phone>span { display:block; font-size:8px; padding:8px 5px; margin-top:5px; background:#132336; border-radius:4px; }
.mini-app-panel { position:absolute; right:20px; top:14px; width:53%; min-height:195px; padding:18px 15px; background:linear-gradient(140deg,#111e2b,#080f18); border:1px solid #668199; border-radius:15px; transform:rotate(4deg); box-shadow:0 12px 20px #0009; }
.mini-app-panel>strong { font-size:13px; display:block; margin-bottom:13px; }
.mini-app-panel>span { display:flex; align-items:center; gap:7px; font-size:7px; background:#192838; padding:8px 6px; margin-bottom:7px; border-radius:5px; }
.mini-app-panel i { font-style:normal; display:grid; place-items:center; width:20px; height:20px; border-radius:5px; background:#b28247; }
.mini-app-panel>span:nth-of-type(3) i { background:#0761df; }
.mini-app-panel>small { color:#8ba4ba; font-size:6px; }
.projects-section { padding:36px 0 48px; background:#030a10a8; }
.projects-inner { display:grid; grid-template-columns:.75fr 1.25fr; gap:35px; align-items:center; }
.projects-inner>.section-heading { text-align:left; margin:0; }
.projects-inner .section-heading h2 { font-size:1.85rem; margin:10px 0; }
.projects-inner .section-heading p { font-size:.9rem; margin:0; line-height:1.65; }
.section-kicker { color:#33b5ff; font-size:.65rem; letter-spacing:.28em; }
.project-card { padding:25px; gap:24px; border-radius:14px; grid-template-columns:1.15fr .85fr; background:linear-gradient(120deg,#0a1520,#0c1324); }
.project-content h3 { font-size:1.55rem; }
.project-content p { font-size:.83rem; margin-bottom:15px; }
.project-label { font-size:.6rem; margin-bottom:10px; }
.project-tags { gap:5px; margin-bottom:16px; }
.project-tags span { font-size:.59rem; padding:5px 7px; }
.project-content .btn { font-size:.75rem; min-height:38px; padding:8px 13px; }
.project-visual { min-height:200px; background:radial-gradient(ellipse at 65% 40%,#4158a029,transparent 70%); }
.project-panel { padding:40px 20px; border-radius:14px; border-color:#8973c345; background:linear-gradient(150deg,#192a4b,#0a101e); box-shadow:0 15px 40px #0008; }
.project-panel-label { color:#9cbdff; }
.project-panel strong { font-size:1.55rem; }
.projects-note { grid-column:1/-1; margin:0; font-size:.75rem; }
.care-section,.about-section,.contact-section { padding:80px 0; }
.care-inner,.contact-inner { gap:60px; }
.section-heading h2,.care-content h2,.contact-content h2 { font-size:clamp(2rem,3.3vw,3.4rem); }
.care-card,.about-card,.contact-form { background:linear-gradient(140deg,#101e2b,#080f19); border-color:#628cb333; box-shadow:0 18px 50px #0005; }
.site-footer { background:#03090f; }
.mobile-nav { position:fixed; top:75px; z-index:110; background:#08131ff5; }
section[id] { scroll-margin-top:84px; }
a:focus-visible,button:focus-visible { outline:2px solid #57bdff; outline-offset:5px; }
@media(min-width:1500px) { .hero-title { font-size:3.6rem; } .showcase-scene { height:280px; } }
@media(max-width:1150px) and (min-width:901px) {
 .hero-inner { gap:22px; } .hero-title { font-size:2.65rem; } .hero-text { font-size:.95rem; }
 .hero-benefits { gap:8px; } .hero-benefit { gap:6px; } .hero-benefit+ .hero-benefit { padding-left:8px; }
 .hero-benefit>svg { width:24px; } .hero-benefit strong { font-size:.64rem; } .hero-benefit span { font-size:.57rem; }
 .visual-service-heading { grid-template-columns:38px 1fr; gap:11px; padding:18px 16px 0; }.visual-service-icon { height:38px; }.service-arrow { display:none; }
 .showcase-nav>div { display:none; }.showcase-copy h2 { font-size:21px; }.showcase-phone { width:120px; right:-10px; }.showcase-features strong { font-size:7px; }
}
@media(max-width:900px) {
 .hero { padding:38px 0 25px; }.hero-inner { grid-template-columns:1fr; gap:25px; }.hero-content { max-width:650px; margin:auto; width:100%; }
 .hero-title { font-size:clamp(2.3rem,5.7vw,3.6rem); }.hero-text { max-width:570px; }
 .showcase { width:min(610px,93%); margin:0 auto; }.showcase-phone { right:-8px; }
 .premium-services-grid { grid-template-columns:1fr; max-width:650px; margin:auto; gap:20px; }
 .visual-service-heading { grid-template-columns:48px 1fr 33px; }.service-art { height:220px; }.mini-website { max-width:480px; left:10%; }.mini-dashboard { left:10%; max-width:530px; }.mini-app-phone { left:18%; }.mini-app-panel { right:12%; width:44%; }
 .projects-inner { grid-template-columns:1fr; gap:24px; }.projects-inner>.section-heading { max-width:650px; }.project-card { grid-template-columns:1.2fr .8fr; }
 .care-inner,.contact-inner { gap:35px; }.header-inner { gap:20px; }.main-nav { gap:18px; }.header-cta { display:none; }
}
@media(max-width:600px) {
 .header-inner,.hero-inner,.services-inner,.projects-inner,.care-inner,.about-inner,.contact-inner,.footer-inner,.footer-bottom { width:90%; }
 .site-header { padding:7px 0; }.brand-logo { width:185px; }.site-header.scrolled .brand-logo { width:160px; }
 .hero { padding-top:28px; }.hero-kicker { font-size:.54rem; letter-spacing:.2em; margin-bottom:17px; }.hero-title { font-size:clamp(2rem,8.8vw,2.8rem); line-height:1.09; }
 .hero-text { font-size:.95rem; line-height:1.6; }.hero-actions { flex-direction:row; gap:10px; }.hero-actions .btn { width:auto; flex:1; padding:12px 9px; font-size:.73rem; gap:7px; }.hero-actions svg { width:16px; }
 .hero-benefits { gap:8px; margin-top:25px; }.hero-benefit { flex-direction:column; align-items:flex-start; gap:7px; }.hero-benefit+ .hero-benefit { padding-left:9px; }.hero-benefit strong { font-size:.64rem; }.hero-benefit span { font-size:.59rem; }.hero-benefit>svg { width:26px; height:28px; }
 .showcase { width:95%; padding-bottom:13px; padding-top:9px; }.showcase-desktop { border-radius:11px; transform:perspective(850px) rotateY(-6deg) rotateZ(-2deg); }.showcase-chrome { padding:6px 9px; font-size:5px; }.showcase-chrome small { font-size:4px; }
 .showcase-nav { padding:9px; }.showcase-nav strong { font-size:8px; }.showcase-nav>div { display:none; }.showcase-nav>span { font-size:5px; padding:4px 5px; }
 .showcase-scene { height:170px; }.showcase-copy { padding:23px 12px; }.showcase-copy>small { font-size:5px; letter-spacing:1px; }.showcase-copy h2 { font-size:16px; margin:8px 0; }.showcase-copy p { font-size:7px; margin-bottom:11px; }.mini-primary { font-size:6px; padding:7px 9px; }
 .showcase-features { gap:4px; padding:5px 6px 8px; }.showcase-features>div { padding:7px 4px; border-radius:5px; }.showcase-features svg { width:14px; height:14px; margin-bottom:3px; }.showcase-features strong { font-size:5px; }.showcase-features small { font-size:4px; }
 .showcase-phone { width:90px; padding:7px 4px 4px; border-radius:15px; border-width:1px; right:-10px; bottom:29px; }.phone-island { width:32px; height:6px; top:3px; }.phone-status { font-size:4px; margin-bottom:9px; }.phone-nav { font-size:4px; padding-bottom:7px; }.phone-copy { padding:8px 3px; }.phone-copy>small { font-size:3px; }.phone-copy>strong { font-size:8px; }.phone-copy p { font-size:5px; }.phone-copy .mini-primary { font-size:4px; padding:4px; }.showcase-phone>img { height:51px; }.showcase-caption { font-size:5px; letter-spacing:1.5px; margin-top:16px; }
 .premium-services { padding-top:8px; }.visual-service-heading { gap:12px; padding:19px 16px 0; grid-template-columns:42px 1fr 28px; }.visual-service-icon { height:42px; }.visual-service-icon svg { width:26px; }.visual-service h3 { font-size:1.1rem; }.visual-service p { font-size:.8rem; }.service-arrow { width:28px; height:28px; }.service-art { height:175px; }.visual-service-foot { padding:12px 16px; }
 .mini-website { left:20px; }.mini-dashboard { left:20px; }.mini-app-phone { left:25px; }.mini-app-panel { right:17px; width:53%; }
 .projects-section { padding:30px 0 36px; }.projects-inner .section-heading h2 { font-size:1.8rem; }.project-card { grid-template-columns:1fr; padding:24px; }.project-visual { min-height:170px; }.project-panel { text-align:center; padding:28px 20px; }
 .care-section,.about-section,.contact-section { padding:55px 0; }.care-card,.about-card { padding:26px; }.mobile-nav { top:70px; }
}
@media(prefers-reduced-motion:reduce) {
 html { scroll-behavior:auto; }.reveal { opacity:1; transform:none; transition:none; } .visual-service,.btn,.site-header,.mobile-nav { transition:none; }
}

.premium-hero .hero-benefits { flex-direction:row; }

/* Integrated service scenes: imagery runs behind the whole card. */
.visual-service { min-height:350px; isolation:isolate; }
.visual-service-heading { position:relative; z-index:2; padding-bottom:30px; background:linear-gradient(#08121df5 55%,#08121d00); }
.visual-service .service-art { position:absolute; inset:0; height:auto; margin:0; z-index:-1; overflow:hidden; }
.visual-service-foot { display:none; }
.website-art { background:linear-gradient(180deg,#08121d 25%,#08121d88 57%,#08121d22),url('../assets/img/architecture-demo.webp') 72% bottom / cover; }
.dashboard-art { background:radial-gradient(ellipse at 75% 90%,#204b7399,transparent 70%),#08121d; }
.app-art { background:linear-gradient(180deg,#08121d 28%,#08121d88 65%,#08121dbb),url('../assets/img/architecture-demo.webp') 30% bottom / cover; }
.visual-service .mini-website { top:155px; left:23px; width:87%; transform:rotate(9deg); }
.visual-service .mini-dashboard { top:157px; left:23px; width:103%; }
.visual-service .mini-app-phone { top:151px; left:30px; }
.visual-service .mini-app-panel { top:158px; right:17px; }
.showcase-desktop { transform:perspective(1200px) rotateY(-7deg) rotateX(4deg) rotateZ(-3deg) skewX(-8deg); }
.showcase-phone { transform:rotate(3deg); }
@media(min-width:601px) and (max-width:900px) {
 .visual-service { min-height:390px; }
 .visual-service .mini-website { width:80%; left:10%; }
 .visual-service .mini-dashboard { left:10%; }
 .visual-service .mini-app-phone { left:18%; }
 .visual-service .mini-app-panel { right:12%; }
}
@media(max-width:600px) {
 .visual-service { min-height:345px; }
 .showcase-desktop { transform:perspective(850px) rotateY(-5deg) rotateZ(-2deg) skewX(-5deg); }
}

/* Blue light ribbons behind the floating website preview. */
.showcase-orbit {
 inset:-48px -38px -5px -60px;
 background:radial-gradient(ellipse at 73% 13%,#68c6ff99 0%,#187dff44 19%,transparent 43%),radial-gradient(ellipse at 15% 57%,#168aff66,transparent 38%),radial-gradient(ellipse at 88% 65%,#007fff66,transparent 35%);
 filter:none; transform:none; pointer-events:none;
}
.showcase-orbit::before {
 content:''; position:absolute; inset:5% 1% 7% 4%; border-radius:48%;
 background:repeating-conic-gradient(from 225deg at 57% 56%,transparent 0deg 8deg,#318aff13 9deg,#63baff25 10deg,transparent 12deg 19deg);
 filter:blur(5px); transform:rotate(-12deg);
 -webkit-mask-image:radial-gradient(ellipse,transparent 28%,#000 58%,transparent 74%);
 mask-image:radial-gradient(ellipse,transparent 28%,#000 58%,transparent 74%);
}
.showcase-orbit::after {
 content:''; position:absolute; inset:7% 4% 13% 10%; border-radius:50%;
 border:1px solid #56b8ff75; border-left-color:transparent; border-bottom-color:#1185ff22;
 box-shadow:0 -4px 9px #7dccff88,0 -12px 32px #147dff88,inset 0 5px 14px #2595ff55,0 0 60px #006dff44;
 transform:rotate(-26deg) skewX(-14deg); filter:blur(1px);
}
.showcase-floor {
 left:-8%; right:-9%; bottom:12px; height:51px;
 background:radial-gradient(ellipse,#31a8ff88 0%,#087aff44 35%,transparent 70%);
 filter:blur(7px); transform:rotate(-2deg); box-shadow:none;
}
.showcase::before {
 content:''; position:absolute; z-index:-1; left:-14%; right:-7%; top:9%; bottom:5%;
 background:linear-gradient(150deg,transparent 25%,#278eff22 42%,transparent 45%),linear-gradient(165deg,transparent 30%,#54baff22 47%,transparent 50%),linear-gradient(22deg,transparent 28%,#007fff22 41%,transparent 44%);
 filter:blur(8px); pointer-events:none;
}
@media(max-width:600px) {
 .showcase-orbit { inset:-20px -16px 0 -20px; opacity:.85; }
 .showcase-floor { left:-3%; right:-3%; height:30px; }
}
.showcase-orbit { -webkit-mask-image:radial-gradient(ellipse at 55% 50%,#000 35%,#000c 58%,transparent 74%); mask-image:radial-gradient(ellipse at 55% 50%,#000 35%,#000c 58%,transparent 74%); }
.showcase-orbit::after { inset:13% 4% 15% 9%; transform:rotate(-19deg) skewX(-14deg); }
.showcase-phone { transform:perspective(1200px) rotateY(-7deg) rotateX(4deg) rotateZ(-3deg) skewX(-8deg); }
@media(max-width:600px) { .showcase-phone { transform:perspective(850px) rotateY(-5deg) rotateZ(-2deg) skewX(-5deg); } }
/* Fade every light layer to zero before its rectangular bounds. */
.showcase-orbit, .showcase::before {
 -webkit-mask-image:radial-gradient(ellipse closest-side at 50% 50%,#000 45%,#000b 65%,transparent 100%);
 mask-image:radial-gradient(ellipse closest-side at 50% 50%,#000 45%,#000b 65%,transparent 100%);
}
/* One transparent background image, contained within its own soft edges. */
.showcase-orbit { inset:-13% -10% -10% -15%; background:url('../assets/img/showcase-light.svg') center / 100% 100% no-repeat; mask-image:none; -webkit-mask-image:none; opacity:1; }
.showcase-orbit::before,.showcase-orbit::after,.showcase::before { content:none; }
.showcase-floor { opacity:.45; }
@media(max-width:600px) { .showcase-orbit { inset:-12% -9% -8% -12%; opacity:.85; } }
/* Balance the first two previews within their cards. */
.visual-service .mini-website { top:151px; left:7%; width:86%; transform:perspective(800px) rotateY(-5deg) rotateZ(5deg); padding:7px; border-width:4px; border-radius:15px; }
.visual-service .mini-website-body { min-height:165px; padding:21px 14px; }
.visual-service .mini-dashboard { top:153px; left:6%; width:91%; min-height:205px; grid-template-columns:65px 1fr; transform:perspective(800px) rotateY(-4deg) rotateZ(3deg); }
.visual-service .mini-dashboard aside { gap:8px; padding:11px 6px; }
.visual-service .dashboard-main { padding:13px 10px; }
.visual-service .dashboard-main>strong { margin:5px 0 8px; }
.visual-service .dashboard-metrics { gap:7px; }
.visual-service .dashboard-metrics>div { padding:7px; }
.visual-service .dashboard-metrics b { font-size:19px; margin:3px 0; }
.visual-service .dashboard-main>svg { margin-top:6px; height:48px; }
@media(min-width:601px) and (max-width:900px) {
 .visual-service .mini-website { width:80%; left:10%; }
 .visual-service .mini-dashboard { width:82%; left:9%; }
}

/* TRIARCH: authentic game screens and transparent brand artwork. */
.triarch-feature { padding:65px 0 70px; background:radial-gradient(ellipse at 30% 50%,#5a371b26,transparent 55%),#040b12; }
.triarch-inner { width:min(1200px,90%); margin:auto; display:grid; grid-template-columns:1.1fr 1fr; gap:80px; align-items:center; }
.triarch-screens { position:relative; min-height:590px; isolation:isolate; }
.triarch-halo { position:absolute; inset:0 -10%; z-index:-1; background:radial-gradient(ellipse at 55% 60%,#cc853329,transparent 65%),radial-gradient(ellipse at 30% 40%,#218aff24,transparent 65%); }
.triarch-device { position:absolute; margin:0; width:220px; padding:6px; border:1px solid #7b8c9e88; border-radius:28px; background:#05090f; box-shadow:0 25px 50px #0009,inset 0 0 0 2px #192330; overflow:hidden; }
.triarch-device img { display:block; width:100%; height:auto; border-radius:22px; }
.triarch-device-back { left:5%; top:45px; transform:rotate(-8deg); width:210px; filter:brightness(.85); }
.triarch-device-front { right:7%; top:76px; transform:rotate(5deg); width:235px; }
.triarch-caption { position:absolute; bottom:0; left:0; right:0; text-align:center; font-size:.55rem; letter-spacing:.15em; color:#8c9aab; }
.triarch-eyebrow { display:flex; gap:20px; align-items:center; flex-wrap:wrap; }
.triarch-status { font-size:.65rem; color:#d9bb82; border:1px solid #b9934f44; background:#b9934f0c; padding:6px 10px; border-radius:20px; }
.triarch-status::before { content:''; display:inline-block; width:5px; height:5px; margin-right:7px; border-radius:50%; background:#dcb568; }
.triarch-logo { display:block; width:160px; height:auto; margin:24px 0; filter:drop-shadow(0 0 20px #bb84331f); }
.triarch-story h2 { font-size:clamp(1.8rem,2.5vw,2.6rem); line-height:1.15; letter-spacing:-.035em; margin:0 0 21px; }
.triarch-story h2 span { color:#aebfd2; }
.triarch-story p { color:#bdc8d4; font-size:.95rem; line-height:1.7; margin:0 0 16px; }
.triarch-story p.triarch-detail { color:#8f9eaf; font-size:.83rem; }
.triarch-story .project-tags { margin:22px 0; }
@media(max-width:1100px) { .triarch-inner { gap:35px; }.triarch-device-back { left:0;width:185px; }.triarch-device-front { right:0;width:210px; }.triarch-screens { min-height:550px; } }
@media(max-width:760px) { .triarch-inner { grid-template-columns:1fr; gap:32px; max-width:550px; }.triarch-story { grid-row:1; }.triarch-logo { width:130px; margin:20px 0; }.triarch-screens { min-height:550px; max-width:430px; width:100%; margin:auto; }.triarch-feature { padding:45px 0; } }
@media(max-width:400px) { .triarch-device-back { width:165px; }.triarch-device-front { width:185px; }.triarch-screens { min-height:500px; } }

.triarch-halo { mask-image:radial-gradient(ellipse closest-side,#000 30%,transparent 100%); -webkit-mask-image:radial-gradient(ellipse closest-side,#000 30%,transparent 100%); }

@media(max-width:400px) { .triarch-device-back { width:150px; left:12px; }.triarch-device-front { width:175px; right:7px; } }

/* Hosting illustration and compact care offering. */
.care-premium { background:linear-gradient(120deg,#07111c,#050c13); padding:80px 0; }
.care-layout { width:min(1320px,90%); margin:auto; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:75px; }
.care-copy h2 { margin:18px 0 22px; font-size:clamp(2rem,3vw,3.2rem); line-height:1.1; letter-spacing:-.035em; }
.care-copy h2 span { color:#60baff; }
.care-copy>p { max-width:510px; line-height:1.7; color:#aebed0; font-size:.95rem; }
.care-service-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:30px; }
.care-service-grid>div { padding:19px; background:linear-gradient(125deg,#11223488,#09131d); border:1px solid #6695c021; border-radius:12px; }
.care-symbol { display:block; color:#47b5ff; font-size:25px; margin-bottom:10px; }
.care-service-grid strong { display:block; font-size:.85rem; }
.care-service-grid p { color:#93a7bb; font-size:.77rem; line-height:1.6; margin:8px 0 0; }
.care-package { min-width:0; }
.care-art { height:320px; position:relative; isolation:isolate; }
.care-art::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse,#137dff30,transparent 65%); z-index:-1; }
.care-orbit { position:absolute; left:8%; right:8%; top:30%; height:50%; border:1px solid #378ddb38; border-radius:50%; transform:rotate(-18deg); }
.care-orbit-second { transform:rotate(24deg); top:24%; height:60%; border-style:dashed; opacity:.6; }
.care-server { position:absolute; width:195px; left:50%; top:55px; transform:translateX(-50%) perspective(850px) rotateY(-17deg) rotateX(9deg); filter:drop-shadow(0 25px 20px #0008); }
.server-top { height:50px; padding:12px 15px; border:1px solid #517b9f; border-radius:12px 12px 3px 3px; background:linear-gradient(125deg,#294660,#132535); font-size:10px; letter-spacing:2px; color:#b5d9f6; }
.server-top span { display:block; font-size:6px; color:#6389a9; margin-top:6px; }
.server-slot { display:flex; align-items:center; gap:6px; margin-top:5px; height:44px; padding:0 16px; border:1px solid #466888; border-radius:5px; background:linear-gradient(110deg,#1d3349,#091725); box-shadow:5px 3px 0 #030b13; }
.server-slot i { width:5px; height:5px; border-radius:50%; background:#47baff; box-shadow:0 0 10px #239bff; }
.server-slot i+i { opacity:.4; }
.server-slot b { width:64px; height:12px; margin-left:auto; background:repeating-linear-gradient(90deg,#020a12 0 3px,transparent 3px 6px); }
.server-base { height:6px; margin:8px 15px; background:#147ace; border-radius:50%; filter:blur(6px); }
.care-node { position:absolute; display:flex; gap:9px; align-items:center; padding:12px 15px; background:#0c1a29; border:1px solid #35658c; border-radius:10px; color:#52baff; box-shadow:0 8px 25px #0006; font-size:22px; z-index:2; }
.care-node span { font-size:10px; color:#bed1e2; }
.node-web { left:1%; top:77px; transform:rotate(-5deg); }.node-ssl { right:2%; top:46px; transform:rotate(5deg); }.node-backup { right:0; bottom:55px; transform:rotate(-3deg); }
.care-offer { position:relative; padding:25px; border:1px solid #48759b55; border-radius:15px; background:linear-gradient(120deg,#112236,#09131f); }
.care-offer-line { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:15px; }
.care-offer h3 { font-size:1.3rem; margin:0; }.care-offer-price { white-space:nowrap; }.care-offer-price strong { font-size:2rem; }.care-offer-price small { color:#a3b3c4; font-size:.7rem; }.care-offer-price>span { display:block; text-align:right; font-size:.65rem; color:#9aafc4; margin-top:3px; }
.care-offer p { color:#92a6bc; font-size:.72rem; margin:14px 0 20px; }.care-offer .btn { width:100%; justify-content:space-between; }
@media(max-width:1050px) { .care-layout { gap:30px; }.care-service-grid>div { padding:14px; }.care-node { padding:9px; }.care-server { width:165px; }.care-offer-line { align-items:flex-start; }.care-offer h3 { font-size:1.1rem; } }
@media(max-width:760px) { .care-layout { grid-template-columns:1fr; max-width:570px; gap:15px; }.care-premium { padding:55px 0; }.care-art { height:290px; }.care-server { top:40px; width:185px; }.node-web { left:0; }.node-ssl { right:0; }.care-offer { padding:21px; }.care-copy h2 { font-size:2.2rem; } }

/* Webdesign packages */
.offer-section { padding:80px 0; background:radial-gradient(ellipse at 50% 40%,#116bcc12,transparent 65%),#050c13; }
.offer-inner { width:min(1320px,90%); margin:auto; }
.offer-inner>h2 { margin:18px 0 22px; font-size:clamp(2rem,3vw,3.2rem); line-height:1.12; letter-spacing:-.035em; }
.offer-inner>h2 span { color:#60baff; }
.offer-intro { max-width:680px; margin:0 0 36px; color:#aebed0; font-size:.95rem; line-height:1.7; }
.offer-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.offer-card { display:flex; flex-direction:column; min-width:0; padding:28px; border:1px solid #6695c030; border-radius:16px; background:linear-gradient(140deg,#112234,#08111c); }
.offer-card-featured { border-color:#349bff88; background:linear-gradient(140deg,#153451,#091522); box-shadow:0 12px 40px #006eff12; }
.offer-label { color:#59baff; font-size:.6rem; line-height:1.6; letter-spacing:.14em; }
.offer-card h3 { margin:14px 0 10px; font-size:1.5rem; letter-spacing:-.025em; }
.offer-card>p { margin:0; color:#aebed0; font-size:.85rem; line-height:1.65; }
.offer-price { margin:25px 0; color:#aebed0; font-size:.8rem; }
.offer-price strong { color:white; font-size:clamp(2rem,2.5vw,2.7rem); letter-spacing:-.04em; }
.offer-price small { display:block; margin-top:5px; color:#8fa4ba; font-size:.7rem; }
.offer-card ul { display:grid; gap:13px; margin:0 0 28px; padding:0; list-style:none; }
.offer-card li { position:relative; padding-left:20px; color:#c0cddd; font-size:.8rem; line-height:1.6; }
.offer-card li::before { content:'✓'; position:absolute; left:0; color:#42b1ff; }
.offer-card .btn { justify-content:space-between; margin-top:auto; font-size:.8rem; }
.offer-note { max-width:950px; margin:24px 0 0; color:#8fa4ba; font-size:.74rem; line-height:1.7; }
@media(max-width:900px) { .offer-grid { grid-template-columns:1fr; }.offer-card { padding:25px; }.offer-section { padding:55px 0; } }

/* Personal introduction with a graphic contact card. */
.about-personal { padding:85px 0; background:linear-gradient(120deg,#060e17,#081522); }
.about-personal-inner { width:min(1200px,90%); margin:auto; display:grid; grid-template-columns:1.15fr 1fr; gap:85px; align-items:center; }
.about-personal-copy h2 { font-size:clamp(2rem,3vw,3.2rem); line-height:1.12; letter-spacing:-.035em; margin:18px 0 25px; }
.about-personal-copy h2 span { color:#60baff; }
.about-personal-copy>p { color:#b2c1d1; font-size:.95rem; line-height:1.8; margin:0 0 17px; }
.about-principles { display:grid; gap:17px; margin-top:30px; }
.about-principles>div { display:grid; grid-template-columns:38px 1fr; column-gap:14px; }
.about-principles>div>span { grid-row:span 2; color:#48b2ff; border:1px solid #4782b54d; background:#12345355; border-radius:10px; height:38px; display:grid; place-items:center; font-size:.7rem; }
.about-principles strong { font-size:.9rem; }.about-principles p { margin:5px 0 0; color:#90a6ba; font-size:.8rem; line-height:1.5; }
.founder-visual { position:relative; padding:30px 12px; isolation:isolate; }
.founder-orbit { position:absolute; inset:-12%; z-index:-1; background:radial-gradient(ellipse,#1682ff30,transparent 67%); }
.founder-orbit::after { content:''; position:absolute; inset:17% 5%; border:1px solid #388dd944; border-radius:50%; transform:rotate(-30deg); }
.founder-card { position:relative; border:1px solid #528fbe55; border-radius:22px; padding:30px; background:linear-gradient(135deg,#142a40e8,#08131fee); box-shadow:0 25px 65px #0005; overflow:hidden; }
.founder-card::before { content:''; position:absolute; width:250px; height:250px; right:-100px; top:-100px; border:35px solid #3597ec0b; border-radius:50%; pointer-events:none; }
.founder-brand { display:block; width:180px; height:auto; margin-bottom:30px; }
.founder-monogram { width:90px; height:90px; display:grid; place-items:center; border:1px solid #6cbaff66; border-radius:24px; font-size:2rem; letter-spacing:-.07em; color:#bde6ff; background:linear-gradient(135deg,#245e8b,#0d2237); box-shadow:0 6px 25px #037fff1a; margin-bottom:24px; }
.founder-kicker { color:#68bafb; font-size:.6rem; letter-spacing:.17em; }
.founder-card h3 { font-size:2rem; margin:10px 0 5px; letter-spacing:-.03em; }
.founder-card>p { font-size:.85rem; color:#a9bed2; margin:0; }
.founder-location { display:flex; align-items:center; gap:8px; margin:24px 0; font-size:.75rem; color:#a6bed3; }.founder-location>span { font-size:23px; color:#53baff; }
.founder-card>a { display:flex; justify-content:space-between; gap:10px; padding-top:20px; border-top:1px solid #608db433; text-decoration:none; color:#7ecaff; font-size:.85rem; }.founder-card>a:hover { color:white; }
.founder-caption { display:block; text-align:center; color:#8299af; font-size:.55rem; letter-spacing:.16em; margin-top:24px; }
@media(max-width:900px) { .about-personal-inner { gap:35px; }.founder-card { padding:24px; } }
@media(max-width:760px) { .about-personal { padding:55px 0; }.about-personal-inner { grid-template-columns:1fr; max-width:570px; gap:20px; }.founder-visual { width:100%; max-width:420px; margin:auto; }.founder-card h3 { font-size:1.8rem; } }

/* Native select popup must retain readable contrast on Windows. */
#service { color-scheme:dark; }
#service option { background-color:#101f30; color:#edf4fc; }
#service option:checked { background-color:#245d91; color:#ffffff; }

/* Quiet communication illustration beside the contact form. */
.contact-art { position:relative; height:260px; max-width:510px; margin-top:35px; isolation:isolate; pointer-events:none; }
.contact-art::before { content:''; position:absolute; inset:0; z-index:-1; background:radial-gradient(ellipse,#187bff22,transparent 68%); }
.contact-trails { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.contact-trails path { stroke:#3d9eff42; stroke-width:1; }.contact-trails path+path { stroke-dasharray:4 7; opacity:.6; }.contact-trails circle { fill:#51bcff; filter:drop-shadow(0 0 6px #268aff); }
.message-sheet { position:absolute; left:7%; top:25px; width:67%; padding:22px; display:flex; gap:15px; align-items:center; border:1px solid #599ad653; border-radius:15px; background:linear-gradient(125deg,#17334b,#0b1928); transform:rotate(-7deg); box-shadow:0 15px 30px #0004; }
.message-avatar { display:grid; place-items:center; width:42px; height:42px; flex-shrink:0; border-radius:12px; background:#1c56804d; color:#6fcaff; font-size:24px; border:1px solid #65baff44; }
.message-sheet>div { flex:1; }.message-sheet strong,.message-reply strong { font-size:.85rem; color:#d7e9f7; font-weight:500; }.message-sheet i,.message-lines i { display:block; height:4px; background:#668cab40; border-radius:5px; margin-top:10px; width:90%; }.message-sheet i+i,.message-lines i+i { width:62%; margin-top:7px; }
.message-reply { position:absolute; top:105px; right:6%; width:66%; padding:22px; border:1px solid #348fe975; border-radius:15px; background:linear-gradient(125deg,#143858,#0b1b2b); transform:rotate(4deg); box-shadow:0 16px 35px #0005; }
.message-dot { display:inline-block; width:6px; height:6px; background:#49b8ff; border-radius:50%; margin-right:7px; }.message-bubbles { display:flex; gap:4px; justify-content:flex-end; margin-top:12px; }.message-bubbles b { width:4px; height:4px; border-radius:50%; background:#69b6e7; }
.contact-art-caption { position:absolute; bottom:0; left:0; right:0; text-align:center; font-size:.5rem; letter-spacing:.13em; color:#829bb2; }
@media(max-width:600px) { .contact-art { height:235px; margin-top:25px; }.message-sheet,.message-reply { padding:17px; }.message-reply { width:73%; }.message-sheet strong,.message-reply strong { font-size:.73rem; }.contact-art-caption { font-size:.45rem; } }

/* Accessible native disclosure navigation. */
.services-menu { position:relative; }
.services-menu summary { cursor:pointer; list-style:none; color:#e3eaf2; font-size:.85rem; display:flex; gap:8px; align-items:center; }
.services-menu summary::-webkit-details-marker { display:none; }
.services-menu summary:focus-visible { outline:2px solid #60baff; outline-offset:6px; border-radius:3px; }
.services-dropdown { position:absolute; top:calc(100% + 18px); left:-18px; width:245px; padding:10px; display:grid; gap:4px; border:1px solid #3d668955; border-radius:12px; background:#0b1928; box-shadow:0 18px 45px #0008; z-index:120; }
.services-dropdown a { display:block; padding:12px!important; border-radius:7px; }
.services-dropdown a:hover,.services-dropdown a:focus-visible { background:#173653; color:#fff; }
.mobile-nav .services-menu { width:100%; }
.mobile-nav .services-menu summary { padding:12px 0; }
.mobile-nav .services-dropdown { position:static; width:100%; margin:6px 0; box-shadow:none; }
.mobile-nav { max-height:calc(100dvh - 90px); overflow-y:auto; }

.showcase-chrome .window-dots { display:flex; gap:4px; align-items:center; }
.window-dots i { display:block; width:6px; height:6px; border-radius:50%; background:#ff5f57; }
.window-dots i:nth-child(2) { background:#febc2e; }
.window-dots i:nth-child(3) { background:#28c840; }
@media(max-width:600px) { .window-dots i { width:4px; height:4px; }.showcase-chrome .window-dots { gap:3px; } }

.contact-details .contact-whatsapp { border-left-color:#42c59a; }
.contact-whatsapp a { display:inline-flex; align-items:center; gap:8px; color:#86dbc0; text-underline-offset:4px; }
.contact-whatsapp a:hover { color:#c1f6e4; }
.contact-whatsapp a:focus-visible { outline:2px solid #86dbc0; outline-offset:5px; border-radius:3px; }
.contact-whatsapp small { display:block; margin-top:7px; font-size:.7rem; color:#94a9bc; }