/* ---- frames.css ---- */
/* ==========================================================================
   Device frames for real screenshots + the compositions that stand on the Smartware piece.
   Phone: thin titanium edge, slim bezel, the full screenshot width is always visible.
   Browser: modern window chrome; the screen takes the screenshot's own ratio (min 16:10).
   Screenshots taller than their frame scroll gently on hover.
   ========================================================================== */
.fx-phone{position:relative;aspect-ratio:9/19.5;min-height:0;border-radius:15%/6.9%;background:#08090c;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 0 0 1.5px #8d96a8,0 0 0 2.5px #2a2f39,0 50px 80px -34px rgba(0,0,12,.8)}
.fx-phone::before{content:"";position:absolute;right:-3px;top:24%;width:2px;height:10%;border-radius:2px;background:#9aa3b5}
.fx-phone::after{content:"";position:absolute;left:-3px;top:19%;width:2px;height:6%;border-radius:2px;background:#9aa3b5;box-shadow:0 160% 0 #9aa3b5,0 300% 0 #9aa3b5}
.fx-scr{position:absolute;inset:1.1% 2.4%;border-radius:13.6%/6.3%;overflow:hidden;background:#fff;container-type:inline-size}
.fx-scr>img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.fx-island{position:absolute;z-index:2;left:50%;top:1.6%;width:27%;height:2.9%;transform:translateX(-50%);border-radius:99px;background:#000;pointer-events:none}
.fx-scr:has(.fx-empty) .fx-island{display:none}

.fx-web{position:relative;container-type:inline-size;border-radius:12px;overflow:hidden;background:#0d1236;box-shadow:0 0 0 1px rgba(160,190,255,.26),0 60px 110px -40px rgba(0,0,12,.85)}
.fx-bar{display:flex;align-items:center;height:clamp(14px,4.2cqw,36px);padding:0 clamp(6px,1.6cqw,14px);background:linear-gradient(#1c2359,#131946);border-bottom:1px solid rgba(160,190,255,.14)}
.fx-dots{display:flex;gap:clamp(3px,.7cqw,7px);flex:1}.fx-dots i{width:clamp(5px,1.2cqw,11px);aspect-ratio:1;border-radius:50%;background:#ff5f57}.fx-dots i:nth-child(2){background:#febc2e}.fx-dots i:nth-child(3){background:#28c840}
.fx-url{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-width:36%;max-width:58%;padding:clamp(1px,.5cqw,5px) clamp(6px,1.4cqw,12px);border-radius:clamp(4px,.8cqw,7px);background:rgba(255,255,255,.07);font:500 clamp(7px,1.45cqw,12px)/1.2 var(--f-b);color:#aebdeb;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fx-url svg{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:2}
.fx-sp{flex:1}
.fx-shot{position:relative;overflow:hidden;background:#fff;container-type:inline-size}
.fx-shot>img{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0}

/* tall phone screenshots scroll inside the phone, from the top to exactly the bottom */
.fx-tall{transition:object-position var(--dur,5s) cubic-bezier(.45,0,.4,1)}
@media(hover:hover){.fx-scr:hover>.fx-tall{object-position:50% 100%}}

/* placeholder until a screenshot is added */
.fx-empty{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:5cqw;text-align:center;color:#cfdaff;
  background:radial-gradient(ellipse 70% 50% at 50% 42%,rgba(77,125,255,.38),transparent 70%),#081040 url(../media/images/facets.svg) center/cover}
.fx-empty svg{width:26cqw;height:auto;overflow:visible}
.fx-empty use{fill:rgba(143,176,255,.1);stroke:rgba(175,200,255,.6);stroke-width:7;stroke-dasharray:22 16}
.fx-empty b{font:650 7cqw/1.1 var(--f-d);padding:0 8cqw}
.fx-empty.web svg{width:9cqw}.fx-empty.web{gap:2cqw}.fx-empty.web b{font-size:2.6cqw}

/* ---------- compositions ---------- */
.fx-comp{position:relative;padding-bottom:11%}
/* the piece: lying on the floor under the devices, outlined and glowing like the brand mark */
.fx-podium{position:absolute;z-index:0;left:50%;bottom:-6%;width:74%;height:auto;overflow:visible;transform:translateX(-50%) perspective(1000px) rotateX(62deg);transform-origin:50% 100%;pointer-events:none}
.fx-podium .glow{fill:none;stroke:#3b6bff;stroke-width:60;opacity:.55;filter:blur(26px)}
.fx-podium .fill{fill:url(#fxF)}
.fx-podium .line{fill:none;stroke:#a9c4ff;stroke-width:7;stroke-dasharray:30 16;filter:drop-shadow(0 0 8px #4d7dff)}
.fx-comp::after{content:"";position:absolute;z-index:1;left:24%;right:24%;bottom:9%;height:7%;border-radius:50%;background:radial-gradient(ellipse at 50% 50%,rgba(0,0,10,.5),transparent 70%);pointer-events:none}
/* phones, as in the company profile: the side phones open outward, so most of every screen is visible */
.fx-trio{position:relative;z-index:2;display:grid;place-items:center;perspective:1800px}
.fx-trio>.fx-phone{grid-area:1/1;width:min(29%,280px);transition:transform 1s cubic-bezier(.2,.75,.25,1)}
.fx-trio .t-c{z-index:3;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 0 0 1.5px #8d96a8,0 0 0 2.5px #2a2f39,0 50px 90px -30px rgba(0,0,12,.85),0 0 0 14px rgba(3,5,15,.0)}
.n3 .fx-trio .t-l{z-index:1;transform:translateX(calc(-80% - var(--spread,1) * 6%)) translateY(2%) scale(.92) rotateY(-16deg)}
.n3 .fx-trio .t-r{z-index:2;transform:translateX(calc(80% + var(--spread,1) * 6%)) translateY(2%) scale(.92) rotateY(16deg)}
.n2 .fx-trio .t-c{transform:translateX(-46%)}
.n2 .fx-trio .t-r{z-index:2;transform:translateX(46%) translateY(2%) scale(.94) rotateY(14deg)}
.n1 .fx-trio .t-c{width:min(34%,310px);transform:rotateY(-10deg) rotateX(3deg)}
.fx-comp.is-ph.has-web .fx-backweb{position:absolute;z-index:1;left:4%;right:4%;top:0}
.fx-comp.is-ph.has-web{padding-top:6%}
/* two browser windows, as in the company profile: back one top-left, front one bottom-right, both fully readable */
.fx-duo{position:relative;z-index:2}
.fx-comp.two .fx-duo{padding-top:21%}
.fx-comp.two .d-back{position:absolute;z-index:1;left:0;top:0;width:70%}
.fx-comp.two .d-front{position:relative;z-index:2;margin-left:30%;width:70%;box-shadow:0 0 0 1px rgba(160,190,255,.3),-40px 50px 90px -30px rgba(0,0,12,.9)}
.fx-comp:not(.two) .d-front{width:100%}
.fx-comp .d-phone{position:absolute;z-index:3;right:0;bottom:6%;width:17%}
.fx-comp.sm .fx-trio>.fx-phone{width:min(29%,230px)}
@media(max-width:700px){
  .fx-phone::before,.fx-phone::after{display:none}
  .fx-trio>.fx-phone,.fx-comp.sm .fx-trio>.fx-phone{width:31%}
  .n3 .fx-trio .t-l{transform:translateX(-88%) translateY(2%) scale(.9) rotateY(-14deg)}
  .n3 .fx-trio .t-r{transform:translateX(88%) translateY(2%) scale(.9) rotateY(14deg)}
}

/* ---- services.css ---- */
/* services page: hub */
.svc-hub{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.6vw,32px)}
.svc-card{position:relative;display:flex;flex-direction:column;gap:22px;padding:clamp(24px,2.6vw,36px);border-radius:26px;background:#050b2b;color:#e8eeff;overflow:hidden;isolation:isolate;transition:transform .4s cubic-bezier(.2,.75,.25,1),box-shadow .4s}
.svc-card::before{content:"";position:absolute;inset:0;z-index:-1;background:url(../media/images/facets.svg) center/cover;opacity:.9}
.svc-card::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 70% 60% at 20% 0,rgba(29,77,255,.5),transparent 70%),linear-gradient(rgba(3,5,15,.1),rgba(3,5,15,.72))}
.svc-card:hover{transform:translateY(-6px);box-shadow:0 30px 60px -24px rgba(10,16,60,.55)}
.svc-ic{width:clamp(64px,7vw,88px);opacity:.95;filter:drop-shadow(0 0 20px rgba(60,110,255,.5))}
.svc-ic svg{width:100%;height:auto;display:block}
.svc-b h2{font-size:calc(clamp(24px,2.2vw,32px) * var(--fs,1));letter-spacing:-.035em;color:#fff;margin-bottom:10px}
.svc-b p{color:#b9c6ee;font-size:calc(15.5px * var(--fs,1));max-width:32em}
.svc-f{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:20px;padding-top:18px;border-top:1px solid var(--line-d)}
.svc-f>span:first-child{font-size:calc(13px * var(--fs,1));color:#8fa0d8}
.svc-f .go{display:inline-flex;align-items:center;gap:8px;font-size:calc(14px * var(--fs,1));font-weight:600;color:#fff}
.svc-card:hover .svc-f .go{gap:11px}
@media(max-width:760px){.svc-hub{grid-template-columns:1fr}}

/* service detail: hero art, delivered projects, FAQ */
.svc-hero-art{width:min(78%,340px);margin-inline:auto;filter:drop-shadow(0 0 40px rgba(60,110,255,.4))}
.svc-hero-art svg{width:100%;height:auto;display:block}
.svc-hero-art .bar{transform-box:fill-box;transform-origin:50% 100%}
.svc-hero-art .draw{stroke-dashoffset:0}
.svc-hero-art .fl{animation:hov2 6s ease-in-out infinite}
.svc-hero-art .orb{animation:orb 22s linear infinite;transform-origin:210px 150px}
.demo .svc-hero-art.demo-art{width:min(60%,280px);opacity:.95}
@media(max-width:900px){.svc-hero-art{width:min(60%,260px);margin-top:8px}}

.svc-proj-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px}
.svc-proj{display:flex;flex-direction:column;color:inherit;transition:transform .35s cubic-bezier(.2,.75,.25,1)}
.svc-proj:hover{transform:translateY(-5px)}
.svc-proj-b{padding-top:16px}
.svc-proj-b b{display:block;font:650 calc(19px * var(--fs,1))/1.2 var(--f-d);letter-spacing:-.02em;color:var(--ink)}
.svc-proj-b span{display:block;margin-top:6px;color:var(--mute);font-size:calc(14.5px * var(--fs,1))}

.faqs{max-width:52em;border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 2px;font:600 calc(clamp(17px,1.5vw,20px) * var(--fs,1))/1.35 var(--f-d);letter-spacing:-.01em;color:var(--ink);cursor:pointer;list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-x{flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;transition:transform .3s,background .25s,color .25s}
.faq-item[open] .faq-x{transform:rotate(135deg);background:var(--cobalt);border-color:var(--cobalt);color:#fff}
.faq-item p{margin:-4px 0 22px;color:var(--mute);font-size:calc(16px * var(--fs,1));max-width:44em}

/* ---------- service detail: hero stage (larger, framed) ---------- */
.svc-hero-grid{align-items:center}
.svc-stage{position:relative;aspect-ratio:6/5;border-radius:28px;overflow:hidden;background:#06104a url(../media/images/facets.svg) center/cover;box-shadow:inset 0 0 0 1px rgba(143,176,255,.2),0 50px 100px -30px rgba(0,0,0,.8),0 0 130px rgba(29,77,255,.28);display:grid;place-items:center}
.svc-stage::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 65% 60% at 50% 46%,rgba(29,77,255,.5),transparent 70%),linear-gradient(rgba(3,5,15,.15),rgba(3,5,15,.55))}
.svc-stage-art{position:relative;width:78%;filter:drop-shadow(0 20px 50px rgba(0,0,10,.5))}
.svc-stage-art svg{width:100%;height:auto;display:block}
.svc-stage-art .bar{transform-box:fill-box;transform-origin:50% 100%}
.svc-stage-art .draw{stroke-dashoffset:0}
.svc-stage-art .fl{animation:hov2 6s ease-in-out infinite}
.svc-stage-art .orb{animation:orb 22s linear infinite;transform-origin:210px 150px}
@media(max-width:900px){.svc-stage{aspect-ratio:16/11;margin-top:8px}.svc-stage-art{width:66%}}


/* ---------- capabilities: a dark deck of glowing icon cards (distinct from the product-page orbit) ---------- */
.svc-deck{background:radial-gradient(ellipse 55% 60% at 22% 15%,rgba(29,77,255,.24),transparent 70%),#03050f;color:#e8eeff;overflow:clip}
.deck-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;list-style:none;padding:0;margin:0}
.deck-card{position:relative;padding:clamp(24px,2.2vw,30px) clamp(20px,2vw,24px) clamp(26px,2.4vw,30px);border-radius:20px;background:linear-gradient(165deg,rgba(255,255,255,.065),rgba(255,255,255,.014));border:1px solid rgba(143,176,255,.16);opacity:0;transform:translateY(18px);transition:opacity .55s,transform .6s cubic-bezier(.2,.75,.25,1),border-color .3s,box-shadow .3s;transition-delay:calc(var(--k) * 70ms)}
.deck-grid.is-in .deck-card{opacity:1;transform:none}
.deck-card{--ac:#4d7dff}
.deck-ic{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;margin-bottom:18px;background:radial-gradient(circle at 32% 28%,color-mix(in srgb,var(--ac) 65%,#fff 20%),var(--ac));box-shadow:0 8px 20px -4px color-mix(in srgb,var(--ac) 65%,transparent),0 0 0 1px color-mix(in srgb,var(--ac) 45%,transparent) inset;color:#fff;transition:transform .35s cubic-bezier(.2,.75,.25,1),box-shadow .35s}
.deck-ic .ic{width:24px;height:24px;stroke-width:1.9}
.deck-card:hover{border-color:color-mix(in srgb,var(--ac) 55%,transparent);box-shadow:0 26px 50px -30px color-mix(in srgb,var(--ac) 60%,transparent)}
.deck-card:hover .deck-ic{transform:translateY(-3px) scale(1.07);box-shadow:0 10px 26px -4px color-mix(in srgb,var(--ac) 80%,transparent),0 0 0 1px color-mix(in srgb,var(--ac) 60%,transparent) inset}
.deck-card h3{font-size:calc(18.5px * var(--fs,1));letter-spacing:-.02em;color:#fff;margin-bottom:8px;line-height:1.3}
.deck-card p{color:#aebbe6;font-size:calc(14.5px * var(--fs,1));line-height:1.55}
@media(max-width:1080px){.deck-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.deck-grid{grid-template-columns:1fr}}


/* ---------- services: "Across every engagement" ---------- */
.eng{margin-top:clamp(26px,3vw,44px);display:grid;grid-template-columns:minmax(150px,auto) 1fr;gap:clamp(20px,3vw,52px);align-items:start;padding:clamp(22px,2.4vw,34px);border-radius:26px;background:#fff;border:1px solid var(--line)}
.eng-t{font:650 calc(clamp(20px,1.7vw,26px) * var(--fs,1))/1.08 var(--f-d);letter-spacing:-.03em;max-width:7.5em;color:var(--ink)}
.eng-list{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}
.eng-list::before{content:"";position:absolute;left:5px;right:0;top:7px;height:1px;background:linear-gradient(90deg,var(--cobalt),rgba(29,77,255,.12))}
.eng-list li{position:relative;padding:28px 16px 0 0}
.eng-list li::before{content:"";position:absolute;left:0;top:2px;width:11px;height:11px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#8fb0ff,#1d4dff);box-shadow:0 0 0 4px #fff,0 0 12px rgba(29,77,255,.55)}
.eng-list b{display:block;font:650 calc(16px * var(--fs,1))/1.2 var(--f-d);letter-spacing:-.015em;color:var(--ink)}
.eng-list span{display:block;margin-top:6px;font-size:calc(13.5px * var(--fs,1));line-height:1.45;color:var(--mute)}
@media(max-width:1180px){.eng{grid-template-columns:1fr}.eng-t{max-width:none}}
@media(max-width:900px){.eng-list{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:22px}.eng-list::before{display:none}}
@media(max-width:560px){.eng-list{grid-template-columns:1fr 1fr}}

/* delivered projects: phone projects get a framed stage the same height as the browser cards */
.svc-proj-ph{border-radius:16px;overflow:hidden;background:#0b1447 url(../media/images/facets.svg) center/cover;aspect-ratio:16/11.6;display:grid;place-items:center;box-shadow:0 0 0 1px rgba(160,190,255,.22),0 40px 80px -30px rgba(0,0,0,.75)}
.svc-proj-ph>*{width:86%}
.svc-proj-b .soon{display:inline-block;margin-left:6px;padding:3px 9px;border-radius:99px;font:600 calc(11.5px * var(--fs,1))/1.3 var(--f-b);font-style:normal;letter-spacing:0;color:#9a5a00;background:#fff1dc;vertical-align:middle}

/* ==========================================================================
   Service detail, refreshed: real screens on the piece, an "at a glance" panel, larger project cards
   ========================================================================== */
.svc-vis{position:relative;padding:4% 0 0}
.svc-vis::before{content:"";position:absolute;inset:-10% -6% -4%;z-index:0;background:radial-gradient(ellipse 55% 50% at 50% 55%,rgba(29,77,255,.45),transparent 70%);pointer-events:none}
.svc-vis>.fx-comp{position:relative;z-index:1}
.svc-hero .case-acr{opacity:.05}
@media(max-width:900px){.svc-vis{margin-top:20px}}
.ov3-grid{align-items:center}
.svc-facts{display:grid;gap:0;padding:clamp(22px,2.4vw,32px);border-radius:24px;background:#fff;border:1px solid var(--line);box-shadow:0 30px 60px -40px rgba(10,16,60,.35)}
.sf-note{padding-bottom:18px;margin-bottom:6px;border-bottom:1px solid var(--line);color:var(--mute);font-size:calc(15px * var(--fs,1));line-height:1.5}
.sf-note b{display:block;margin-bottom:4px;font:650 calc(19px * var(--fs,1))/1.25 var(--f-d);letter-spacing:-.02em;color:var(--ink)}
.sf-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.sf-row:last-child{border-bottom:0;padding-bottom:0}
.sf-k{display:inline-flex;align-items:center;gap:10px;flex:none;font-size:calc(14px * var(--fs,1));font-weight:600;color:var(--mute)}
.sf-k .ic{box-sizing:content-box;width:16px;height:16px;padding:7px;border-radius:10px;color:var(--cobalt);background:rgba(29,77,255,.08)}
.sf-chips{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}
.sf-chips a{padding:6px 11px;border-radius:99px;font-size:calc(13px * var(--fs,1));font-weight:600;color:var(--ink);background:var(--paper);border:1px solid var(--line);transition:border-color .2s,color .2s}
.sf-chips a:hover{color:var(--cobalt);border-color:rgba(29,77,255,.4)}
.sf-n{font:700 calc(26px * var(--fs,1))/1 var(--f-d);color:var(--ink)}
@media(max-width:560px){.sf-row{flex-direction:column;align-items:flex-start}.sf-chips{justify-content:flex-start}}
/* projects built on this service: large dark cards with the real composition */
.svc-proj-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.svc-proj{border-radius:26px;overflow:hidden;background:#050a26;border:1px solid rgba(29,77,255,.18);box-shadow:0 40px 80px -50px rgba(10,16,60,.7)}
.svc-proj-ph{border-radius:0;aspect-ratio:16/10;padding:5% 6% 0;background:radial-gradient(ellipse 60% 55% at 50% 60%,rgba(29,77,255,.45),transparent 70%),#04091f url(../media/images/facets.svg) center/cover;display:grid;place-items:center}
.svc-proj-ph>*{width:92%}
.svc-proj-b{padding:20px clamp(20px,2vw,28px) 24px}
.svc-proj-b .sp-k{display:block;margin:0 0 6px;font-size:calc(13px * var(--fs,1));font-weight:600;color:#8fb0ff}
.svc-proj-b b{color:#fff;font-size:calc(21px * var(--fs,1))}
.svc-proj-b span{color:#a9b7e4}
.svc-proj-b .sp-go{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-style:normal;font-size:calc(14px * var(--fs,1));font-weight:600;color:#9fbaff}
.svc-proj-b .sp-go .ic{width:16px;height:16px;transition:transform .25s}
.svc-proj:hover .sp-go .ic{transform:translateX(4px)}
@media(max-width:760px){.svc-proj-grid{grid-template-columns:1fr}}
.demo .demo-dev{max-width:520px;margin-inline:auto;width:100%}
@media(max-width:900px){.svc-hero .case-grid{grid-template-columns:1fr!important}.svc-vis{max-width:560px;margin-inline:auto;width:100%}}