/* SYNC global visual enrichment — the dark stage, with subject-led colour. */
:root{
  --accent-sync:#4e22d0;--accent-web:#11dfef;--accent-seo:#43ed9c;--accent-google-ads:#fadb4b;
  --accent-meta:#ff4672;--accent-social:#11dfef;--accent-brand:#4e22d0;--accent-content:#ff7800;
  --accent-local:#43ed9c;--accent-automation:#6bc7ff;--accent-gold:#d7ad62;--accent-nature:#68b783;
  --glass-surface:linear-gradient(145deg,rgba(255,255,255,.12),rgba(35,26,47,.48) 44%,rgba(11,12,17,.72));
  --glass-border:rgba(226,216,255,.22);--glass-highlight:rgba(255,255,255,.32);
  --glass-shadow:0 28px 80px rgba(0,0,0,.42),inset 0 1px rgba(255,255,255,.23),inset 0 -1px rgba(0,0,0,.22);
  --motion-ambient:9s;--motion-explain:4.8s;--motion-interact:280ms;
  --ease-liquid:cubic-bezier(.2,.75,.2,1);--topic-accent:var(--accent-sync);--topic-rgb:144,119,240;
}

/* One tactile liquid-glass action family. */
.sync-liquid-action{--pointer-x:50%;--pointer-y:50%;position:relative;isolation:isolate;overflow:hidden!important;border:1px solid color-mix(in srgb,var(--topic-accent) 42%,rgba(255,255,255,.24))!important;background:
  radial-gradient(120px circle at var(--pointer-x) var(--pointer-y),rgba(255,255,255,.23),transparent 58%),
  linear-gradient(145deg,rgba(255,255,255,.15),rgba(255,255,255,.045) 42%,color-mix(in srgb,var(--topic-accent) 15%,transparent))!important;
  box-shadow:var(--glass-shadow),0 0 34px color-mix(in srgb,var(--topic-accent) 16%,transparent)!important;
  backdrop-filter:blur(20px) saturate(145%);transition:transform var(--motion-interact) var(--ease-liquid),border-color var(--motion-interact),box-shadow var(--motion-interact),background var(--motion-interact)!important}
.sync-liquid-action:before{content:""!important;position:absolute!important;z-index:-1!important;inset:-70% -30%!important;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.28) 49%,transparent 63%)!important;transform:translateX(-42%) rotate(8deg)!important;transition:transform .65s var(--ease-liquid)!important;pointer-events:none}
.sync-liquid-action:after{content:"";position:absolute;z-index:-1;inset:1px;border-radius:inherit;box-shadow:inset 0 0 22px color-mix(in srgb,var(--topic-accent) 12%,transparent);pointer-events:none}
.sync-liquid-action:hover{transform:translateY(-2px) scale(1.012);border-color:color-mix(in srgb,var(--topic-accent) 72%,white 12%)!important;box-shadow:0 24px 56px rgba(0,0,0,.42),inset 0 1px rgba(255,255,255,.36),0 0 38px color-mix(in srgb,var(--topic-accent) 24%,transparent)!important}
.sync-liquid-action:hover:before{transform:translateX(42%) rotate(8deg)!important}.sync-liquid-action:active{transform:translateY(1px) scale(.985);box-shadow:0 8px 22px rgba(0,0,0,.4),inset 0 2px 10px rgba(0,0,0,.25)!important}
.sync-liquid-action:focus-visible{outline:2px solid var(--topic-accent)!important;outline-offset:4px!important}
.button-lime.sync-liquid-action{--topic-accent:var(--lime);color:#f5ffe5!important;background:radial-gradient(120px circle at var(--pointer-x) var(--pointer-y),rgba(255,255,255,.34),transparent 58%),linear-gradient(145deg,rgba(255,120,0,.30),rgba(120,180,28,.13) 55%,rgba(255,255,255,.06))!important}

/* Topic colour identities. */
[data-sync-topic="web"]{--topic-accent:var(--accent-web);--topic-rgb:86,199,255}
[data-sync-topic="marketing"]{--topic-accent:#4e22d0;--topic-rgb:155,140,255}
[data-sync-topic="seo"]{--topic-accent:var(--accent-seo);--topic-rgb:84,214,178}
[data-sync-topic="google-ads"]{--topic-accent:var(--accent-google-ads);--topic-rgb:242,186,85}
[data-sync-topic="meta"]{--topic-accent:var(--accent-meta);--topic-rgb:240,116,145}
[data-sync-topic="social"]{--topic-accent:var(--accent-social);--topic-rgb:98,156,255}
[data-sync-topic="brand"]{--topic-accent:var(--accent-brand);--topic-rgb:221,110,232}
[data-sync-topic="content"]{--topic-accent:var(--accent-content);--topic-rgb:244,155,104}
[data-sync-topic="local"]{--topic-accent:var(--accent-local);--topic-rgb:99,201,151}
[data-sync-topic="automation"]{--topic-accent:var(--accent-automation);--topic-rgb:107,199,255}

/* Explanatory visuals gain colour, depth and motion only while visible. */
.sync-explanatory-visual{position:relative;isolation:isolate}
.sync-explanatory-visual:after{content:"";position:absolute;z-index:-1;width:48%;aspect-ratio:1;right:4%;top:8%;border-radius:50%;background:rgba(var(--topic-rgb),.2);filter:blur(48px);opacity:.7;transform:translate3d(0,8%,0);transition:opacity .6s,transform 1s var(--ease-liquid);pointer-events:none}
.sync-explanatory-visual.is-motion-active:after{opacity:1;transform:translate3d(-6%,0,0)}
.sv2-scene .sv2-ui,.sd-scene .sd-node{border-color:color-mix(in srgb,var(--topic-accent) 35%,rgba(255,255,255,.18));background:linear-gradient(145deg,rgba(255,255,255,.14),color-mix(in srgb,var(--topic-accent) 11%,rgba(20,16,28,.88)));box-shadow:0 25px 65px #0009,inset 0 1px rgba(255,255,255,.32),0 0 25px color-mix(in srgb,var(--topic-accent) 10%,transparent)}
.sv2-scene .sv2-ui i,.sd-scene .sd-node i{background:linear-gradient(90deg,var(--topic-accent),var(--lime));box-shadow:0 0 16px color-mix(in srgb,var(--topic-accent) 55%,transparent)}
.sv2-scene .sv2-flow,.sd-scene .sd-path{background:linear-gradient(90deg,transparent,var(--topic-accent),var(--lime),transparent)}
.sv2-tabs button[aria-selected="true"]{border-color:color-mix(in srgb,var(--topic-accent) 60%,transparent);box-shadow:inset 0 1px rgba(255,255,255,.16),0 0 20px color-mix(in srgb,var(--topic-accent) 10%,transparent)}

/* Distinct explanatory motion verbs. */
.sv2-scene--website .sv2-ui,.sd-scene--website .sd-node{animation-name:syncAssemble}
.sv2-scene--commerce .sv2-ui,.sd-scene--commerce .sd-node,.sv2-scene--google-ads .sv2-ui,.sd-scene--google-ads .sd-node,.sv2-scene--automation .sv2-ui,.sd-scene--automation .sd-node{animation-name:syncFlow}
.sv2-scene--seo .sv2-ui,.sd-scene--seo .sd-node{animation-name:syncProgress}
.sv2-scene--social .sv2-ui,.sd-scene--social .sd-node,.sv2-scene--content .sv2-ui,.sd-scene--content .sd-node{animation-name:syncSequence}
.sv2-scene--branding .sv2-ui,.sd-scene--branding .sd-node,.sv2-scene--graphic .sv2-ui,.sd-scene--graphic .sd-node{animation-name:syncCompose}
.sv2-scene--local .sv2-ui,.sd-scene--local .sd-node{animation-name:syncFocus}
.sv2-scene--website .sv2-ui--1:after,.sd-scene--website .sd-node-1:after{content:"Navigation  •  Hero  •  Contact";position:absolute;left:1rem;right:1rem;bottom:1rem;padding-top:.7rem;border-top:1px solid color-mix(in srgb,var(--topic-accent) 30%,transparent);color:#a9dff7;font-size:.48rem;letter-spacing:.08em}
.sv2-scene--seo:after,.sd-scene--seo:after{content:"Search results  ·  visibility rising";position:absolute;z-index:5;left:17%;bottom:12%;color:var(--accent-seo);font-size:.58rem;letter-spacing:.08em}
.sv2-scene--local:before,.sd-scene--local:before{background:radial-gradient(circle at 36% 48%,rgba(99,201,151,.32),transparent 34%)}
.sv2-scene--branding:before,.sd-scene--branding:before{background:radial-gradient(circle at 56% 42%,rgba(221,110,232,.3),transparent 45%)}

/* Homepage: each service state brings its own light. */
.v14-explorer[data-active="web"]{--topic-accent:var(--accent-web);--topic-rgb:86,199,255}.v14-explorer[data-active="seo"]{--topic-accent:var(--accent-seo);--topic-rgb:84,214,178}.v14-explorer[data-active="ads"]{--topic-accent:var(--accent-google-ads);--topic-rgb:242,186,85}.v14-explorer[data-active="social"]{--topic-accent:var(--accent-social);--topic-rgb:98,156,255}.v14-explorer[data-active="brand"]{--topic-accent:var(--accent-brand);--topic-rgb:221,110,232}.v14-explorer[data-active="auto"]{--topic-accent:var(--accent-automation);--topic-rgb:107,199,255}
.v14-explorer-stage{box-shadow:inset 0 1px var(--glass-highlight),0 38px 100px #0008,0 0 70px rgba(var(--topic-rgb),.12)}
.v14-explorer-tabs button[aria-selected="true"]{color:#fff;box-shadow:inset 3px 0 var(--topic-accent);background:linear-gradient(90deg,rgba(var(--topic-rgb),.15),transparent)}
.v14-service-visual{background:radial-gradient(circle at 65% 30%,rgba(var(--topic-rgb),.25),transparent 42%),#0e0f15}

/* Work: project identity reflects into the SYNC shell. */
.v15-project,.workx-feature,.workx-card,.casex-page{--project-accent:var(--accent-sync)}
.v15-project,.workx-card>a,.workx-visual{border-color:color-mix(in srgb,var(--project-accent) 28%,rgba(255,255,255,.16));box-shadow:0 30px 85px #0008,inset 0 1px rgba(255,255,255,.22),0 0 38px color-mix(in srgb,var(--project-accent) 10%,transparent)}
.v15-project:before,.workx-visual:after{content:"";position:absolute;z-index:0;width:18rem;height:18rem;right:-7rem;top:-8rem;border-radius:50%;background:color-mix(in srgb,var(--project-accent) 26%,transparent);filter:blur(44px);pointer-events:none}
.v15-project-screen,.workx-browser{box-shadow:0 28px 80px #000b,0 0 35px color-mix(in srgb,var(--project-accent) 14%,transparent)}
.workx-visual:hover{border-color:color-mix(in srgb,var(--project-accent) 64%,white 8%)}
.casex-metric-grid strong,.casex-result-card span{color:var(--project-accent)}.casex-trend path{stroke:var(--project-accent);filter:drop-shadow(0 0 10px var(--project-accent))}

/* Human pages: image-led, individual, and emotionally coloured. */
.av2-profile-founder{--profile-accent:#4e22d0}.av2-profile-belal{--profile-accent:#5bc6ea}.av2-profile-grid .av2-person:nth-child(1){--profile-accent:#5a9cff}.av2-profile-grid .av2-person:nth-child(2){--profile-accent:#43ed9c}.av2-profile-grid .av2-person:nth-child(3){--profile-accent:#4e22d0}
.av2-portrait,.av2-person figure,.av2-belal-identity{border-color:color-mix(in srgb,var(--profile-accent) 38%,rgba(255,255,255,.14));box-shadow:0 38px 100px #0009,0 0 55px color-mix(in srgb,var(--profile-accent) 13%,transparent)}
.av2-portrait:after,.av2-person figure:after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,color-mix(in srgb,var(--profile-accent) 18%,transparent),transparent 46%,rgba(0,0,0,.18));mix-blend-mode:screen;pointer-events:none}
.av2-portrait img,.av2-person img{transition:transform .8s var(--ease-liquid),filter .6s}.av2-profile:hover img,.av2-person:hover img{transform:scale(1.025);filter:contrast(1.05) brightness(1.05)}
.fv1-music{--hobby-accent:#e5ad59}.fv1-chess{--hobby-accent:#7296ff}.fv1-nature{--hobby-accent:#68b783}.fv1-observe{--hobby-accent:#d877cc}
.fv1-beyond-grid article{border-color:color-mix(in srgb,var(--hobby-accent) 32%,rgba(255,255,255,.14));box-shadow:inset 0 1px rgba(255,255,255,.18),0 24px 70px #0007,0 0 35px color-mix(in srgb,var(--hobby-accent) 10%,transparent)}
.fv1-music .fv1-hobby-art i{background:linear-gradient(var(--hobby-accent),#ffe1a6)}.fv1-chess .fv1-hobby-art span:nth-child(2){color:var(--hobby-accent)}.fv1-nature .fv1-hobby-art span{color:var(--hobby-accent);filter:drop-shadow(0 0 25px color-mix(in srgb,var(--hobby-accent) 60%,transparent))}
.fv1-award-visual figure{border-color:color-mix(in srgb,var(--accent-gold) 42%,rgba(255,255,255,.18));box-shadow:0 40px 100px #0009,0 0 45px color-mix(in srgb,var(--accent-gold) 12%,transparent)}

/* Academy: preserve its course colours while strengthening learning states. */
.academy-track-card,.academy-module,.academy-visual{--topic-accent:var(--academy-violet);border-color:color-mix(in srgb,var(--topic-accent) 26%,var(--academy-line))}
.academy-visual__step{border-color:color-mix(in srgb,var(--topic-accent) 25%,rgba(255,255,255,.1));box-shadow:inset 0 1px rgba(255,255,255,.12),0 0 22px color-mix(in srgb,var(--topic-accent) 8%,transparent)}
.academy-quiz{border-color:rgba(78,34,208,.27);box-shadow:var(--glass-shadow)}.academy-quiz button{transition:transform .2s,border-color .2s,background .2s}.academy-quiz button:hover{transform:translateX(3px)}
.academy-quiz button.is-correct{border-color:#43ed9c;background:linear-gradient(90deg,rgba(84,214,178,.16),rgba(84,214,178,.04));box-shadow:inset 3px 0 #43ed9c}.academy-quiz button.is-wrong{border-color:#ff4672;background:linear-gradient(90deg,rgba(240,116,121,.14),transparent);box-shadow:inset 3px 0 #ff4672}
.academy-lesson-nav a.is-next{box-shadow:inset 0 1px rgba(255,255,255,.16),0 20px 55px rgba(255,120,0,.08);transition:transform .25s,border-color .25s}.academy-lesson-nav a.is-next:hover{transform:translateX(4px);border-color:rgba(255,120,0,.52)}
.academy-glossary:focus-visible{outline:2px solid #61b9e9;outline-offset:3px}.academy-progress i{box-shadow:0 0 16px rgba(255,120,0,.42)}

/* Contact is a destination: richer glass, clearer interaction. */
.contact-intro,.quick-enquiry{position:relative;isolation:isolate}.contact-intro:after,.quick-enquiry:before{content:"";position:absolute;z-index:-1;width:34rem;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(86,199,255,.16),rgba(78,34,208,.09) 38%,transparent 70%);filter:blur(30px);pointer-events:none}.contact-intro:after{right:-10rem;bottom:-12rem}.quick-enquiry:before{left:-12rem;top:8rem}
.quick-enquiry-form{padding:clamp(1.3rem,3vw,2.4rem);border:1px solid var(--glass-border);border-radius:1.5rem;background:var(--glass-surface);box-shadow:var(--glass-shadow);backdrop-filter:blur(24px) saturate(130%)}
.quick-enquiry-form input:focus,.quick-enquiry-form textarea:focus{border-color:var(--accent-web);box-shadow:0 1px var(--accent-web)}

/* Consistent focus language for all interactive glass. */
:where(.workx-filters button,.sv2-tabs button,.casex-tabs button,.academy-quiz button):focus-visible{outline:2px solid var(--topic-accent,var(--accent-sync));outline-offset:3px}

@keyframes syncAssemble{0%,100%{transform:translate3d(0,7px,0);opacity:.76}45%,65%{transform:translate3d(0,0,0);opacity:1}}
@keyframes syncFlow{0%,100%{transform:translate3d(-5px,0,0);opacity:.72}50%{transform:translate3d(6px,0,0);opacity:1}}
@keyframes syncProgress{0%,100%{filter:brightness(.82);transform:translateY(3px)}50%{filter:brightness(1.12);transform:translateY(-4px)}}
@keyframes syncSequence{0%,100%{transform:translateY(4px) scale(.985)}50%{transform:translateY(-4px) scale(1)}}
@keyframes syncCompose{0%,100%{transform:rotate(-.8deg) translateY(3px)}50%{transform:rotate(.8deg) translateY(-3px)}}
@keyframes syncFocus{0%,100%{filter:saturate(.8);transform:scale(.99)}50%{filter:saturate(1.15);transform:scale(1.01)}}

@media(max-width:640px){
  .sync-explanatory-visual:after{width:62%;right:-8%;filter:blur(34px)}
  .sync-liquid-action:hover{transform:none}.quick-enquiry-form{padding:1rem;border-radius:1.1rem}
  .v15-project:before,.workx-visual:after{width:12rem;height:12rem}
}
@media(prefers-reduced-motion:reduce){
  .sync-liquid-action,.sync-liquid-action:before,.sync-explanatory-visual:after,.av2-portrait img,.av2-person img,.academy-quiz button,.academy-lesson-nav a{transition:none!important}
  .sync-liquid-action:hover,.sync-liquid-action:active,.academy-quiz button:hover,.academy-lesson-nav a.is-next:hover,.av2-profile:hover img,.av2-person:hover img{transform:none!important}
  .sv2-scene .sv2-ui,.sd-scene .sd-node,.fv1-hobby-art *{animation:none!important}
  .sync-explanatory-visual:after{opacity:.8;transform:none}
}
/* Liquid header CTA must retain contrast through every interaction state. */
.sync-header-v18 .header-cta.sync-liquid-action,.sync-header-v18 .header-cta.sync-liquid-action:hover,.sync-header-v18 .header-cta.sync-liquid-action:focus-visible,.sync-header-v18 .header-cta.sync-liquid-action:active{color:#f4ffe0!important}.sync-header-v18 .header-cta.sync-liquid-action span{color:inherit!important}