/* Global custom cursor */
body, body * { cursor: url('light-curser/arrow.cur'), auto; font-family: 'Unbounded', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
html, body { overflow-x: hidden; }
img, video, canvas { max-width: 100%; height: auto; }
.container { padding-inline: 1rem; }
/* --- Style for active navigation link --- */
.nav-link.active-nav {
    color: var(--accent);
    text-shadow: 0 0 8px rgba(96, 165, 250, 0.5);
}

/* --- Fixed, glassy navbar --- */
.site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: none;
    transition: background-color 250ms ease, border-color 250ms ease, box-shadow 250ms ease;
}

/* Spotlight navbar styles */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}
.spotlight-nav{height:44px;border-radius:100px;border:1px solid hsla(0,0%,100%,.25);position:relative}
.spotlight-nav::before,.spotlight-nav::after{pointer-events:none}
.spotlight-nav::after{content:'';position:absolute;inset:0;border-radius:100px;pointer-events:none;background:hsla(0,0%,100%,.1);z-index:-1;opacity:.15}
.spotlight-nav::before{content:'';position:absolute;inset:-1px;border-radius:100px;pointer-events:none;z-index:2;border:1px solid rgba(255,255,255,0.9)}
.spotlight-nav ul{display:flex;align-items:center;padding:0;margin:0;list-style-type:none;height:100%;font-size:.875rem}
.spotlight-nav ul.lit{display:none}
.spotlight-nav ul.lit li{padding:.5rem 1.25rem}
.spotlight-nav ul.content{position:relative}
.spotlight-nav ul.content::after{content:'';position:absolute;inset:0;border-radius:100px;pointer-events:none;border:1px solid #fff;filter:url(#ambience) brightness(2)}
.spotlight-nav [data-active='true']{opacity:.8}
.spotlight-nav ul li{height:100%;display:grid;place-items:center}
.spotlight-nav ul li a{display:grid;place-items:center;height:100%;padding:.5rem 1.25rem;text-decoration:none;color:inherit;opacity:.4;transition:opacity .25s ease-out}
.spotlight-nav ul li a:is(:hover,:focus-visible){opacity:1}

/* Take code as provided: spotlight filters and pulse glow */
.spotlight-nav::before, .spotlight-nav::after, .spotlight-nav ul.lit{ filter: url('#spotlight'); }
.spotlight-nav ul.content::after{ content:''; position:absolute; inset:0; border-radius:100px; pointer-events:none; border:1px solid #fff; filter:url('#ambience') brightness(2); }
.spotlight-nav ul.lit{ pointer-events:none; }
.spotlight-nav ul.lit li{ padding:0.5rem 1.25rem; }
.spotlight-nav ul li a{ position:relative; z-index:3; }
[data-active='true']{ opacity:0.8; }

@keyframes pulse-glow { 0%{opacity:.5; box-shadow: inset 0 0 0 0 rgba(255,255,255,.15), 0 0 0 0 rgba(255,255,255,.12);} 50%{opacity:1; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25), 0 0 22px 6px rgba(255,255,255,.25);} 100%{opacity:.5; box-shadow: inset 0 0 0 0 rgba(255,255,255,.15), 0 0 0 0 rgba(255,255,255,.12);} }
.spotlight-nav.is-animating::before{ animation: pulse-glow .9s cubic-bezier(0.25,1,0.5,1); }

/* Orbiting glow highlights like the contact button */
.spotlight-nav .glow{--border-width:1px;--loop-cycle:12s;position:absolute;inset:calc(var(--border-width)* -1);border-radius:100px;border:var(--border-width) solid transparent;-webkit-mask:linear-gradient(transparent, transparent),linear-gradient(white, white);mask:linear-gradient(transparent, transparent),linear-gradient(white, white);-webkit-mask-clip:padding-box, border-box;mask-clip:padding-box, border-box;-webkit-mask-composite:source-in, xor;mask-composite:intersect;pointer-events:none}
.spotlight-nav .glow::after,.spotlight-nav .glow::before{content:"";height:100%;offset-anchor:100% 50%;background:radial-gradient(circle at 50% 50%, hsla(0,0%,100%,.75), transparent 50%), radial-gradient(circle at 50% 50%, #c2ccff 50%, transparent);opacity:.45;offset-path:rect(0 100% 100% 0 round 100px);position:absolute;display:inline-block;animation:loop var(--loop-cycle) linear infinite;aspect-ratio:1/1;transition:opacity .3s ease}
.spotlight-nav:hover .glow::after,.spotlight-nav:hover .glow::before{opacity:.85}
.spotlight-nav .glow::before{animation-delay:calc(var(--loop-cycle)/ -2)}

/* Solidify on scroll */
.site-header.is-scrolled {
    background: transparent;
    border-bottom-color: transparent;
    box-shadow: none;
}

/* Let hero background reach the very top under the fixed header */
body { padding-top: 0; }
@media (min-width: 768px) { body { padding-top: 0; } }


/* Custom scrollbar hiding */
html::-webkit-scrollbar { display: none; }
html { -ms-overflow-style: none; scrollbar-width: none; }

/* --- Styles for the 3D Hero Section --- */
#contact .contact-ai { display:grid; place-items:center; }
/* The original layered circle effect is replaced by an inline SVG animation. */
#contact .contact-ai .ai{ --s: 40vmin; --p: calc(var(--s)/4); width: min(420px, 80%); aspect-ratio:1; --bg-color: color-mix(in srgb, #7b7bf4, transparent 90%); background: radial-gradient(60% 75% at center, var(--bg-color) 50%, transparent 50%), radial-gradient(75% 60% at center, var(--bg-color) 50%, transparent 50%); padding: var(--p); display:grid; place-items:center; position:relative; border-radius:50%; transform: scale(1); }
#contact .contact-ai .container{ overflow:hidden; background:#b6a9f8; width:100%; border-radius:50%; aspect-ratio:1; position:relative; display:grid; place-items:center; }
@property --a { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
@property --l { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --x { syntax: "<length>"; inherits: false; initial-value: 0; }
@property --y { syntax: "<length>"; inherits: false; initial-value: 0; }
@property --o { syntax: "<number>"; inherits: false; initial-value: 1; }
@keyframes aiSpin { from{ --a: 360deg; --l: .35; --o:1; } 30%{ --l:1.5; } 70%{ --o:.4; --l:.05; } 98%{ --o:.7; } to{ --a:0deg; --l:.35; --o:1; } }
#contact .contact-ai .c{ opacity:.9; position:absolute; width:10vmin; aspect-ratio:1; border-radius:50%; --offset-per-item: calc(360deg / 4); --current-angle-offset: calc(var(--offset-per-item) * var(--i) + var(--a)); translate: calc(cos(var(--current-angle-offset)) * 6vmin + var(--x,0)) calc(sin(var(--current-angle-offset)) * 6vmin * -1); scale: calc(.6 + var(--l)); animation: aiSpin 5.5s cubic-bezier(.45,-0.35,.16,1.5) infinite; transition: opacity .3s linear; opacity: var(--o,1); }
#contact .contact-ai .c1{ background: radial-gradient(50% 50% at center, #c979ee, #74bcd6); --x:1vmin; width:16vmin; animation-timing-function: cubic-bezier(.12,.32,.68,.24); }
#contact .contact-ai .c2{ background: radial-gradient(50% 50% at center, #ef788c, #e7e7fb); width:15vmin; }
#contact .contact-ai .c3{ background: radial-gradient(50% 50% at center, #eb7fc6, transparent); width:5vmin; opacity:.6; --x:-1vmin; }
#contact .contact-ai .c4{ background:#6d67c8; animation-timing-function: cubic-bezier(.39,-.03,.75,.47); }
#contact .contact-ai .glass{ overflow:hidden; position:absolute; --w:.5vmin; inset: calc(var(--p) - var(--w)); border-radius:50%; backdrop-filter: blur(1.3vmin); box-shadow: 0 0 8vmin color-mix(in srgb, black, transparent 70%); background: radial-gradient(10vmin at 70% 30%, rgba(255,255,255,.7), transparent); }
#contact .contact-ai .glass:after{ content:""; position:absolute; inset:0; --c: rgba(255,255,255,.03); --w:1px; --g:3px; background: repeating-linear-gradient(var(--c), var(--c), var(--w), transparent var(--w), transparent calc(var(--w) + var(--g))); border-radius: inherit; border: 1vmin rgba(255,255,255,.1) solid; }
@property --value { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
@property --width-ratio { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --scale { syntax: "<number>"; inherits: true; initial-value: 1; }
#contact .contact-ai .rings{ aspect-ratio:1; border-radius:50%; position:absolute; inset:0; perspective:11rem; opacity:.9; }
#contact .contact-ai .rings:before, #contact .contact-ai .rings:after{ content:""; position:absolute; inset:0; border-radius:50%; --width-ratio:1; border: calc(1vmin * var(--width-ratio)) solid transparent; -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; background: linear-gradient(white, blue, magenta, violet, lightyellow) border-box; animation: contactRing 8s ease-in-out infinite; --start:180deg; --value: var(--start); --scale:1; transform: rotateY(var(--value)) rotateX(var(--value)) rotateZ(var(--value)) scale(var(--scale)); }
#contact .contact-ai .rings:after{ --start:90deg; }
#contact .contact-ai .rings > .rings:before{ --start:360deg; }
#contact .contact-ai .rings > .rings:after{ --start:270deg; }
@keyframes contactRing { from{ --value: var(--start); --scale:1; } 50%{ --scale:1.2; --width-ratio:1.5; } 70%{ --scale:1; --value: calc(var(--start) + 180deg); --width-ratio:1; } 80%{ --scale:1.2; --width-ratio:1.5; } to{ --value: calc(var(--start) + 360deg); --scale:1; --width-ratio:1; } }

/* Animated gradient drop-glow for all cards (idle + hover) */
:root{
  --glow-red: #60a5fa;
  --glow-pink: #9dc3f7;
  --glow-blue: #60a5fa;
  --glow-blue: #9dc3f7;
  --glow-blue: #60a5fa;
  --glow-yellow: #9dc3f7;
  --glow-orange: #60a5fa;
}
@keyframes cardGlowFlow { from{ background-position: 0% 0%; } to{ background-position: 200% 0%; } }
.radix-card{ position: relative; }
.radix-card::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-18%;
  transform: translateX(-50%);
  width:62%;
  height:30%;
  pointer-events:none;
  background:linear-gradient(90deg,var(--glow-orange),var(--glow-yellow),var(--glow-blue),var(--glow-blue),var(--glow-blue),var(--glow-pink),var(--glow-red));
  background-size:200% 100%;
  filter: blur(26px);
  opacity:.18;
  border-radius: 9999px;
  z-index:-1;
  animation: cardGlowFlow 2s linear infinite;
}
.radix-card:hover::after{
  opacity:.35;
  filter: blur(32px);
  animation-duration: 1s;
}
/* Internal spotlight that stays inside the card for all cards */
.radix-card { position: relative; overflow: hidden; border-radius: 1rem; }
.radix-card::before {
  content: '';
  position: absolute;
  inset: 1px; /* keep inside the border */
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(600px 420px at var(--spot-x, -9999px) var(--spot-y, -9999px), rgba(96, 165, 250, 0.16), transparent 60%);
  transition: opacity 220ms ease;
  z-index: 0;
}
.radix-card:hover::before { opacity: 1; }
#home {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    cursor: inherit;
}

#home > canvas, #hero-bg {
    display: block;
    width: 100%;
    height: 100%;
}


/* Glow button effects */
.glow-btn {
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid #c2ccff33;
    box-shadow: none;
    transform: translateY(0);
    will-change: transform, box-shadow;
    transform: translateZ(0);
}

/* Glow pill for navbar */
.nav-glow{ position:relative; border: 0; background: transparent; }
.nav-glow .glow{ display: none; }
.nav-glow .glow{ --border-width:1px; --loop-cycle:12s; position:absolute; inset:calc(var(--border-width)* -1); border-radius:9999px; border:var(--border-width) solid transparent; -webkit-mask:linear-gradient(transparent, transparent), linear-gradient(white, white); mask:linear-gradient(transparent, transparent), linear-gradient(white, white); -webkit-mask-clip:padding-box, border-box; mask-clip:padding-box, border-box; -webkit-mask-composite:source-in, xor; mask-composite:intersect; pointer-events:none; }
.nav-glow .glow::after, .nav-glow .glow::before{ content:""; height:100%; offset-anchor:100% 50%; background: radial-gradient(circle at 50% 50%, hsla(0,0%,100%,0.75), transparent 50%), radial-gradient(circle at 50% 50%, #c2ccff 50%, transparent); opacity:0.4; offset-path: rect(0 100% 100% 0 round 9999px); position:absolute; display:inline-block; animation: loop var(--loop-cycle) linear infinite; aspect-ratio:1/1; transition: opacity .3s ease; }
.nav-glow:hover .glow::after, .nav-glow:hover .glow::before{ opacity:0.8; }
.nav-glow .glow::before{ animation-delay: calc(var(--loop-cycle) / -2); }

.glow-btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 35px rgba(85, 145, 222, 0.4), 0 0 25px rgba(85, 145, 222, 0.3);
}

.glow-btn:active {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(85, 145, 222, 0.5), 0 0 15px rgba(85, 145, 222, 0.4);
}

/* Disable translate/scale lift for navbar buttons */
.nav-lang-btn:hover, .nav-lang-btn:active,
.nav-contact-btn:hover, .nav-contact-btn:active {
    transform: none !important;
    box-shadow: none;
}

/* Hand cursor for interactive elements */
a, button, [role="button"],
input[type="button"], input[type="submit"], input[type="reset"],
.glow-btn, .carousel-button, .clickable-card, .language-option, .nav-link {
    cursor: url('light-curser/hand.cur'), pointer;
}

.glow-btn .glow {
    --border-width: 1px;
    --loop-cycle: 12s;
    position: absolute;
    inset: calc(var(--border-width) * -1);
    border-radius: 9999px;
    border: var(--border-width) solid transparent;
    -webkit-mask: linear-gradient(transparent, transparent), linear-gradient(white, white);
    mask: linear-gradient(transparent, transparent), linear-gradient(white, white);
    -webkit-mask-clip: padding-box, border-box;
    mask-clip: padding-box, border-box;
    -webkit-mask-composite: source-in, xor;
    mask-composite: intersect;
    pointer-events: none;
}

.glow-btn:hover .glow {
    --loop-cycle: 2s;
}

.glow-btn .glow::after, .glow-btn .glow::before {
    content: "";
    height: 100%;
    offset-anchor: 100% 50%;
    background: radial-gradient(circle at 50% 50%, hsla(0, 0%, 100%, 0.75), transparent 50%), radial-gradient(circle at 50% 50%, #c2ccff 50%, transparent);
    opacity: 0.4;
    offset-path: rect(0 100% 100% 0 round 9999px);
    position: absolute;
    display: inline-block;
    animation: loop var(--loop-cycle) linear infinite;
    aspect-ratio: 1 / 1;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.glow-btn .glow::before {
    animation-delay: calc(var(--loop-cycle) / -2);
}

.glow-btn:hover .glow::after, .glow-btn:hover .glow::before {
    opacity: 0.8;
}

/* Lined text effect */
.lined-text {
  --line-gap: clamp(1.5rem, 4vw, 5rem);
  --line-base: rgba(157, 195, 247, 0.45);
  --line-fade: rgba(157, 195, 247, 0.12);
  --line-nudge-left: 0px;
  --line-nudge-right: 0px;
  /* amount each line overlaps under the title so both sides cross under the text equally */
  --line-overlap: clamp(1rem, 6vw, 3rem);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  justify-items: center;
  text-align: center;
  column-gap: var(--line-gap);
  width: 100%;
  position: relative;
}

.lined-text::before,
.lined-text::after {
  content: '';
  height: 1px;
  width: 100%;
  border-radius: 9999px;
  z-index: 0;
}
.lined-text::before { grid-column: 1; background: linear-gradient(to left, var(--line-base), var(--line-fade) 45%, transparent); box-shadow: 0 0 8px rgba(157,195,247,0.15); margin-right: calc(-1 * var(--line-overlap)); }
.lined-text::after  { grid-column: 3; background: linear-gradient(to right, var(--line-base), var(--line-fade) 45%, transparent); box-shadow: 0 0 8px rgba(157,195,247,0.15); margin-left: calc(2.7 * var(--line-overlap)); }

/* Equal padding around the center title between the lines and keep above lines */
.lined-text > * {
  padding-inline: clamp(0.75rem, 2.5vw, 2rem);
  position: relative;
  z-index: 1;
  margin-inline: auto; /* center the text block */
  display: inline-block;
  text-align: center;
  line-height: 1.2; /* avoid clipping in RTL glyphs */
}

.lined-text::before {
    background: linear-gradient(to left, #9dc3f7, transparent);
}

.lined-text::after {
    background: linear-gradient(to right, #9dc3f7, transparent);
}


/* --- PERFORMANCE OPTIMIZATIONS --- */
.radix-card, .glow-btn, #features .group {
    will-change: transform, box-shadow, opacity;
}

/* Global cursor-follow glow */
#cursor-effect {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5; /* behind header z-50, above backgrounds */
  --x: -1000px;
  --y: -1000px;
  --size: 360px;
  background: radial-gradient(
    circle at var(--x) var(--y),
    rgba(96,165,250,0.18) 0%,
    rgba(96,165,250,0.10) 30%,
    rgba(96,165,250,0.05) 55%,
    transparent 70%
  );
  opacity: 0; /* fade in when moved */
  transition: opacity 180ms ease;
}

/* I-beam cursor for contact form fields */
#contact form input[type="text"],
#contact form input[type="email"],
#contact form input[type="tel"],
#contact form textarea {
  cursor: url('light-curser/ibeam.cur'), text !important;
}

/* Hand cursor on interactive items in Get In Touch section */
#contact a:hover,
#contact a:hover *,
#contact .icon-pulsar:hover,
#contact .glow-btn:hover {
  cursor: url('light-curser/hand.cur'), pointer !important;
}

/* Ensure social icons in Follow Us card use hand cursor on hover */
#contact .follow-us-center a:hover,
#contact .follow-us-center a:hover * {
  cursor: url('light-curser/hand.cur'), pointer !important;
}

@media (prefers-reduced-motion: reduce) {
  #cursor-effect { display: none; }
}

@media (pointer: coarse) {
  #cursor-effect { display: none; }
}

/* Align pricing card buttons to same vertical level */
#pricing .radix-card { display: flex; flex-direction: column; }
#pricing .radix-card-footer { margin-top: auto; }

/* --- Global hover transition smoothing --- */
*, *::before, *::after {
    transition-property: color, background-color, border-color, text-shadow, box-shadow, transform, opacity, filter;
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Eclipx text effect (animated gradient clip) --- */
.eclipx-text {
    position: relative;
    display: inline-block;
    color: transparent;
    background-image: linear-gradient(90deg, #cbd5e1 0%, #ffffff 20%, #60a5fa 50%, #93c5fd 80%, #cbd5e1 100%);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    animation: eclipxShimmer 4s linear infinite;
}

@keyframes eclipxShimmer {
    0% { background-position: 0% 0%; }
    100% { background-position: 300% 0%; }
}

@media (prefers-reduced-motion: reduce) { .eclipx-text { animation: none; } }


/* Form focus effects */
.focused label {
    transform: translateY(-20px) scale(0.8);
    color: #60a5fa;
}

.focused input,
.focused textarea {
    border-color: #60a5fa !important;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1);
}

/* --- MODAL STYLES --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(5, 6, 15, 0.8);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.4s ease;
}

.modal-content {
    position: relative;
    background-color: #121521;
    border: 1px solid #374151;
    border-radius: 1rem;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto; /* Changed to auto for scrollability */
    transform: scale(0.9) translateY(20px);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.modal-content::-webkit-scrollbar {
    display: none;
}

.modal-overlay.active .modal-content {
    transform: scale(1) translateY(0);
}

.modal-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background-color: rgba(30, 41, 59, 0.5);
    color: #d1d5db;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    border: 1px solid #4b5563;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    z-index: 10;
    transition: all 0.2s ease;
}

.modal-close:hover {
    background-color: rgba(55, 65, 81, 0.7);
    color: #ffffff;
    transform: rotate(90deg);
}

/* Keyframe animations */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes loop { 100% { offset-distance: 100%; } }
@keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideUp { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-10px); } }

@property --p {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 0%;
}

/* --- CAROUSEL STYLES --- */
#carousel-projects {
    font-family: "Exo 2", sans-serif;
    /* Blend the section with surrounding backgrounds by fading to #0a0b14 (rounded/circular gradient) */
    background: radial-gradient(circle at 50% 50%, #0f172a 0%, #0a0b14 80%, #0a0b14 100%);
    min-height: 100vh;
    display: grid;
    place-items: center; /* perfectly center contents */
    position: relative;
}

/* Fade-in animation for Teams section */
#carousel-projects { opacity: 0; transform: translateY(20px); transition: opacity .8s ease-out, transform .8s ease-out; }
#carousel-projects.is-visible { opacity: 1; transform: translateY(0); }

#carousel-projects::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: linear-gradient(rgba(14, 165, 233, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(14, 165, 233, 0.1) 1px, transparent 1px);
    background-size: 40px 40px;
    background-position: center center;
    perspective: 1000px;
    transform-style: preserve-3d;
    animation: gridMove 60s linear infinite;
    /* Softly fade the grid near the edges so it integrates with #0a0b14 */
    -webkit-mask-image: radial-gradient(120% 100% at 50% 45%, rgba(0,0,0,1) 55%, rgba(0,0,0,0) 100%);
    mask-image: radial-gradient(120% 100% at 50% 45%, rgba(0,0,0,1) 55%, rgba(0,0,0,0) 100%);
}

@keyframes gridMove {
    0% { background-position: 0px 0px; opacity: 0.5; }
    50% { opacity: 0.2; }
    100% { background-position: 40px 40px; opacity: 0.5; }
}

:root {
    --glow-primary: rgba(56, 189, 248, 0.7);
    --neon-pink: rgba(56, 189, 248, 0.7);
    --neon-blue: rgba(56, 189, 248, 0.7);
    --neon-blue: rgba(56, 189, 248, 0.7);
    /* Global accents per request */
    --accent: #5591de; /* icons & SVG */
    --text-paragraph: #b9bcc3; /* paragraphs */
    --text-heading: #ffffff; /* headings */
}

.carousel-container {
    width: 100%; /* full width so the active card is centered to the viewport */
    max-width: 1100px;
    position: relative;
    perspective: 2000px;
    padding: 3rem 0;
    z-index: 10;
}

.carousel-track {
    display: flex;
    transition: transform 0.9s cubic-bezier(0.22, 0.68, 0, 1.01);
    transform-style: preserve-3d;
    will-change: transform;
}

.carousel-card {
    min-width: 360px;
    max-width: 360px;
    margin: 0 25px;
    background: #0a0b14; /* base color per request */
    border-radius: 1.2rem;
    overflow: hidden;
    /* remove heavy backdrop-filter for performance */
    /* backdrop-filter: blur(10px); */
    /* match other cards */
    box-shadow: 0 18px 35px rgba(0,0,0,0.45), 0 0 30px rgba(10,11,20,0.35);
    transition: transform 0.9s cubic-bezier(0.18, 0.89, 0.32, 1.28),
                filter 0.9s ease,
                box-shadow 0.9s ease;
    transform-origin: center center;
    position: relative;
    border: 1px solid rgba(255,255,255,0.06);
}

.carousel-card::before {
    content: "";
    position: absolute;
    inset: -2px;
    background: linear-gradient(45deg, transparent 0%, var(--neon-blue) 25%, var(--neon-blue) 50%, var(--neon-pink) 75%, transparent 100%);
    z-index: -1;
    border-radius: 1.3rem;
    filter: blur(8px);
    opacity: 0;
    transition: opacity 0.5s ease;
    animation: borderGlow 6s linear infinite;
}

@keyframes borderGlow {
    0% { background-position: 0% 50%; opacity: 0.3; }
    50% { background-position: 100% 50%; opacity: 0.5; }
    100% { background-position: 0% 50%; opacity: 0.3; }
}

.carousel-card.is-active::before {
    opacity: 1;
    background-size: 300% 300%;
}

.carousel-card:not(.is-active) {
    transform: scale(0.8) rotateY(35deg) translateZ(-100px);
    opacity: 0.45;
    filter: saturate(0.6) brightness(0.7);
}

.carousel-card.is-prev {
    transform-origin: right center;
    transform: scale(0.75) rotateY(45deg) translateX(-80px) translateZ(-150px);
}

.carousel-card.is-next {
    transform-origin: left center;
    transform: scale(0.75) rotateY(-45deg) translateX(80px) translateZ(-150px);
}

.carousel-card.is-active {
    transform: scale(1) rotateY(0) translateZ(0);
    opacity: 1;
    z-index: 20;
    box-shadow: 0 18px 35px rgba(0,0,0,0.45), 0 0 30px rgba(10,11,20,0.4);
    filter: saturate(1.1) brightness(1.05);
    min-width: 420px;
    max-width: 420px;
}

.card-image-container {
    position: relative;
    height: 240px; /* Larger image area */
    overflow: hidden;
    /* Neutral separator to match #0a0b14 card color */
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    display: grid;
    place-items: center; /* center image content reliably */
    background:
        linear-gradient(120deg, rgba(56, 189, 248, 0.10), transparent 70%),
        radial-gradient(circle at 80% 20%, rgba(94, 234, 212, 0.15), transparent 50%),
        rgba(2, 6, 23, 0.25);
}

.card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center; /* center the image crop */
    transition: transform 1.5s ease;
}

.carousel-card.is-active .card-image {
    transform: scale(1.08);
}

.carousel-card.is-active .card-image-container { height: 300px; }

.card-image-container::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(56, 189, 248, 0.1), transparent 70%), radial-gradient(circle at 80% 20%, rgba(94, 234, 212, 0.15), transparent 50%);
    pointer-events: none;
}

.card-image-container::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(0deg, rgba(6, 182, 212, 0.05) 0px, rgba(6, 182, 212, 0.05) 1px, transparent 1px, transparent 4px);
    pointer-events: none;
    opacity: 0.5;
    z-index: 5;
}

/* For project cards, remove the stripe overlay to match the clean background like the second image */
.project-card .card-image-container::before { content: none; }

.card-content {
    padding: 1.75rem;
    color: #f1f5f9;
    background: #0a0b14; /* set card body color */
    border-bottom-left-radius: 1.2rem;
    border-bottom-right-radius: 1.2rem;
}

.card-title {
    font-family: 'Unbounded', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    margin-bottom: 0.75rem;
    letter-spacing: 1px;
    position: relative;
    display: inline-block;
    font-size: 1.25rem;
    font-weight: 700;
}

.card-title::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    color: transparent;
    -webkit-text-stroke: 0.5px;
    filter: blur(3px);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.carousel-card.is-active .card-title::after {
    opacity: 0.8;
}

.card-description {
    font-size: 0.9rem;
    line-height: 1.6;
    color: rgba(241, 245, 249, 0.8);
    font-weight: 300;
}

.card-progress {
    height: 3px;
    background: rgba(56, 189, 248, 0.15);
    margin-top: 0.5rem;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    display: flex;            /* layout for the inner line */
    justify-content: flex-start;  /* always start from left */
    align-items: center;      /* vertical centering in case height changes */
    direction: ltr;           /* force LTR even when page is RTL */
}

.progress-value {
    position: relative; /* allow centering */
    height: 100%;
    background: linear-gradient(90deg, var(--neon-blue), var(--neon-blue));
    border-radius: 4px;
    margin: 0;             /* start from left */
    transform: translateZ(0); /* avoid subpixel blur */
}

.card-stats {
    display:flex;
    justify-content: space-between;
    margin-top: 0.5rem;
    font-size: 0.7rem;
    color: rgba(241, 245, 249, 0.6);
}

.carousel-button { 
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background:
      radial-gradient(circle at 35% 35%, rgba(56,189,248,.18), transparent 55%),
      rgba(11, 18, 32, 0.45);
    color: #38bdf8;
    border: 1px solid rgba(14, 165, 233, 0.4);
    border-radius: 50%;
    width: 48px;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 40;
    transition: all 0.3s ease;
    /* reduce blur on buttons */
    /* backdrop-filter: blur(5px); */
    box-shadow: 0 0 15px rgba(56, 189, 248, 0.2), inset 0 0 0 2px rgba(56,189,248,0.08);
    pointer-events: auto;
}
.carousel-button::after{
    content:""; position:absolute; inset:-6px; border-radius:50%;
    border:1px solid rgba(56,189,248,.35); opacity:.6; filter: drop-shadow(0 0 10px rgba(56,189,248,.35));
}
.carousel-button svg {
    width: 1.5rem;
    height: 1.5rem;
}

.carousel-button:hover {
    background-color: rgba(14, 165, 233, 0.25);
    color: #e0f2fe;
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 0 22px rgba(56, 189, 248, 0.45);
}

.carousel-button:active {
    transform: translateY(-50%) scale(0.95);
}

.carousel-button::before {
    content: "";
    position: absolute;
    inset: -2px;
    background: radial-gradient(circle, var(--neon-blue), transparent 70%);
    border-radius: 50%;
    opacity: 0;
    z-index: -1;
    transition: opacity 0.3s ease;
}

.carousel-button:hover::before {
    opacity: 0.7;
    animation: pulseGlow 2s infinite;
}

@keyframes pulseGlow {
    0% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(1.2); opacity: 0.3; }
    100% { transform: scale(1); opacity: 0.7; }
}

.carousel-button.prev {
    left: -24px;
}

.carousel-button.next {
    right: -24px;
}

.carousel-indicators {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 2rem;
}

.indicator {
    width: 24px;
    height: 4px;
    background: rgba(56, 189, 248, 0.2);
    border-radius: 2px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.indicator.active {
    background: #38bdf8;
    box-shadow: 0 0 10px #38bdf8;
}

.tech-details { 
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(15, 23, 42, 0.85);
    /* backdrop-filter: blur(10px); */
    padding: 0.75rem;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.21, 0.61, 0.35, 1);
    z-index: 25;
    border-top: 1px solid rgba(94, 234, 212, 0.3);
}

.carousel-card.is-active:hover .tech-details {
    transform: translateY(0);
}

.tech-tag {
    display: inline-block;
    margin-right: 8px;
    margin-bottom: 8px;
    padding: 4px 8px;
    font-size: 0.7rem;
    background: rgba(56, 189, 248, 0.15);
    border: 1px solid rgba(56, 189, 248, 0.3);
    border-radius: 4px;
    color: #7dd3fc;
}

/* Team-specific fade-in on hover */
.team-tags .tech-tag {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease, background-color .2s ease, border-color .2s ease;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .45rem .8rem;
  border-radius: 10px;
  background: rgba(2,6,23,0.85);
  border: 1px solid rgba(147,197,253,0.45);
  color: #dbeafe;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
  backdrop-filter: blur(2px);
}
.carousel-card:hover .team-tags .tech-tag { opacity: 1; transform: translateY(0); }
.carousel-card:hover .team-tags .tech-tag:nth-child(1) { transition-delay: .02s; }
.carousel-card:hover .team-tags .tech-tag:nth-child(2) { transition-delay: .04s; }
.carousel-card:hover .team-tags .tech-tag:nth-child(3) { transition-delay: .06s; }
.carousel-card:hover .team-tags .tech-tag:nth-child(4) { transition-delay: .08s; }
.carousel-card:hover .team-tags .tech-tag:nth-child(5) { transition-delay: .10s; }

/* Slide the tag container up from the bottom on hover */
.team-tags {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.75rem 1rem;
    background: linear-gradient(to top, rgba(10,11,20,0.95) 60%, rgba(10,11,20,0.65) 90%, transparent 100%);
    transform: translateY(100%);
    opacity: 0;
    transition: transform .35s cubic-bezier(0.22, 0.68, 0, 1), opacity .35s ease;
}
.carousel-card:hover .team-tags { transform: translateY(0); opacity: 1; }

@media (max-width: 768px) {
    .carousel-button { width: 42px; height: 42px; opacity: 1; }
    .carousel-button.prev { left: 5px; }
    .carousel-button.next { right: 5px; }
    .carousel-card { min-width: 280px; max-width: 280px; margin: 0 15px; }
    .carousel-card:not(.is-active) { transform: scale(0.85) rotateY(25deg); }
    .carousel-card.is-prev { transform: scale(0.8) rotateY(30deg) translateX(-40px); }
    .carousel-card.is-next { transform: scale(0.8) rotateY(-30deg) translateX(40px); }
    .card-image-container { height: 190px; }
}

/* --- Mobile refinements (<= 640px) --- */
@media (max-width: 640px) {
  /* Compact header */
  .site-header { padding: 0.75rem 1rem !important; }

  /* Section spacing */
  #features, #pricing, #services, #projects, #about, #carousel-projects, #contact {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  /* One-column layouts for feature/pricing/service grids */
  #features .grid, #pricing .grid, #services .grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* Card paddings a bit tighter */
  .radix-card .radix-card-header { padding: 1rem !important; }
  .radix-card .radix-card-content { padding: 0 1rem 1rem 1rem !important; }
  .radix-card .radix-card-footer { padding: 0 1rem 1rem 1rem !important; }

  /* Project grid spacing */
  #projects #projects-grid { gap: 14px !important; }

  /* Map height */
  #isn-map { min-height: 220px !important; }

  /* Contact form controls */
  #contact input, #contact textarea { padding: 0.65rem 0.8rem !important; font-size: 0.95rem !important; }
  #contact .glow-btn { width: 100%; }

  /* Title line decoration more compact */
  .lined-text { --line-gap: 0.75rem; }
  /* Make long section titles fit on small screens */
  .lined-text .effect-title { font-size: clamp(1.4rem, 6vw, 1.8rem) !important; }
  #pricing .lined-text .effect-title,
  #services .lined-text .effect-title,
  #features .lined-text .effect-title,
  #projects .lined-text .effect-title,
  #about .lined-text .effect-title { font-size: clamp(1.3rem, 5.5vw, 1.7rem) !important; }
}

/* --- Very small phones (<= 480px) --- */
@media (max-width: 480px) {
  /* Hero section */
  #home main { padding: 0 1rem; text-align: center; }
  #home .effect-title { font-size: clamp(1.8rem, 9vw, 2.4rem); }
  #home [data-translate="hero_subtitle"] { font-size: 0.95rem; }
  #home .glow-btn { width: 90%; max-width: 300px; }

  /* Cards */
  .radix-card { border-radius: 14px; margin: 8px 0; }
  .radix-card .radix-card-content p { font-size: 0.95rem; line-height: 1.6; }

  /* Pricing cards width */
  #pricing .radix-card { width: 100%; max-width: 360px; margin-left: auto; margin-right: auto; }
  #pricing .text-4xl { font-size: 2rem !important; }

  /* Features/Services/About cards centering */
  #features .radix-card, #services .radix-card, #about .radix-card { margin-left: auto; margin-right: auto; }

  /* Carousel spacing */
  .carousel-container { padding: 1rem 0; }
  /* keep JS centering logic active: do not override transform */
  .carousel-track { justify-content: flex-start; gap: 12px; }
  .carousel-card { margin-left: 0 !important; margin-right: 0 !important; }
  .carousel-card:not(.is-active) { transform: scale(0.92) rotateY(0) translateX(0) !important; opacity: .8; filter: none; }
  .carousel-indicators { margin-top: 1rem; }
}

/* --- RTL Language Styles --- */
html[dir="rtl"] body {
    font-family: 'Unbounded', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    text-align: right;
}

/* Keep specific fonts for branding, tech stacks, or UI elements where needed */
html[dir="rtl"] .card-title {
    font-family: 'Orbitron', sans-serif;
}

html[dir="rtl"] #pricing p[data-translate="pricing_subtitle"] {
    font-family: 'Unbounded', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    letter-spacing: 0.05em;
}

html[dir="rtl"] #current-lang,
html[dir="rtl"] .language-option .font-medium {
    font-family: 'Unbounded', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

/* Fix language dropdown alignment */
html[dir="rtl"] #language-dropdown {
    left: 0;
    right: auto;
}

html[dir="rtl"] .language-option {
    text-align: right;
}

/* Adjust icon margins that use the 'mr-3' or 'mr-4' tailwind classes */
html[dir="rtl"] .radix-card-content .flex.items-center svg {
    margin-right: 0;
    margin-left: 0.75rem; /* Equivalent to ml-3 */
}
html[dir="rtl"] .radix-card-header .flex.items-center .mr-4 {
    margin-right: 0;
    margin-left: 1rem; /* Equivalent to ml-4 */
}

/* Adjust the bullet points in the "Our Story" section */
html[dir="rtl"] .space-y-2 .flex .mr-3 {
    margin-right: 0;
    margin-left: 0.75rem;
}

/* Adjust lined-text pseudo-elements for RTL */
html[dir="rtl"] .lined-text::before {
    background: linear-gradient(to right, #9dc3f7, transparent);
}

html[dir="rtl"] .lined-text::after {
    background: linear-gradient(to left, #9dc3f7, transparent);
}

/* Ensure headings in RTL also have larger line-height to prevent descender clipping */
html[dir="rtl"] .effect-title,
html[dir="rtl"] .effect-title::before,
html[dir="rtl"] .effect-title > .layer {
  line-height: 1.3 !important;
}

/* Prefer a font with proper Arabic/Kurdish metrics for RTL headings */
html[dir="rtl"] .effect-title,
html[dir="rtl"] .effect-title > .layer {
  font-family: 'Vazirmatn', 'Unbounded', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

/* Handle specific text-align cases */
html[dir="rtl"] #contact .radix-card-header, 
html[dir="rtl"] #contact .radix-card-content,
html[dir="rtl"] #contact .radix-card-footer {
    text-align: right;
}

/* Center the Follow Us block in all languages */
#contact .radix-card:has(h4[data-translate="follow_us"]) .radix-card-header {
    text-align: center;
}
#contact .radix-card:has(h4[data-translate="follow_us"]) .radix-card-content .flex {
    justify-content: center;
}

/* Fallback for browsers without :has support */
#contact .radix-card.follow-us-center .radix-card-header { text-align: center; }
#contact .radix-card.follow-us-center .radix-card-content .flex { justify-content: center; }

/* Center layout for contact cards we marked with .center-card */
#contact .radix-card.center-card .radix-card-header,
#contact .radix-card.center-card .radix-card-content,
#contact .radix-card.center-card .radix-card-footer {
    text-align: center;
}
#contact .radix-card.center-card .radix-card-header .mr-4 { margin-right: 0; }
#contact .radix-card.center-card .radix-card-header > div.w-12 { margin-right: 0; }

/* Icon buttons alignment and consistent sizing */
#contact .radix-card.center-card .radix-card-content a[class^="w-10"],
#contact .radix-card.center-card .radix-card-content a[class*=" w-10"],
#contact .follow-us-center .radix-card-content a[class^="w-10"],
#contact .follow-us-center .radix-card-content a[class*=" w-10"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

html[dir="rtl"] .modal-content {
    text-align: right;
}

html[dir="rtl"] .modal-close {
    right: auto;
    left: 0.75rem;
}

/* --- RTL Spacing Fixes for horizontal gaps and tags --- */
/* Flip Tailwind's space-x utilities under RTL */
html[dir="rtl"] .space-x-2 > :not([hidden]) ~ :not([hidden]) {
    margin-left: 0; /* reset LTR */
    margin-right: 0.5rem; /* 2 */
}
html[dir="rtl"] .space-x-4 > :not([hidden]) ~ :not([hidden]) {
    margin-left: 0;
    margin-right: 1rem; /* 4 */
}
html[dir="rtl"] .space-x-6 > :not([hidden]) ~ :not([hidden]) {
    margin-left: 0;
    margin-right: 1.5rem; /* 6 */
}
html[dir="rtl"] .space-x-8 > :not([hidden]) ~ :not([hidden]) {
    margin-left: 0;
    margin-right: 2rem; /* 8 */
}

/* Adjust tech tags inline spacing for RTL flow */
html[dir="rtl"] .tech-tag {
    margin-right: 0;
    margin-left: 8px;
}

/* Common utility flips for margin helpers used in markup */
html[dir="rtl"] .mr-1 { margin-right: 0; margin-left: 0.25rem; }
html[dir="rtl"] .mr-2 { margin-right: 0; margin-left: 0.5rem; }
html[dir="rtl"] .mr-3 { margin-right: 0; margin-left: 0.75rem; }
html[dir="rtl"] .mr-4 { margin-right: 0; margin-left: 1rem; }
html[dir="rtl"] .ml-1 { margin-left: 0; margin-right: 0.25rem; }
html[dir="rtl"] .ml-2 { margin-left: 0; margin-right: 0.5rem; }
html[dir="rtl"] .ml-3 { margin-left: 0; margin-right: 0.75rem; }
html[dir="rtl"] .ml-4 { margin-left: 0; margin-right: 1rem; }

/* Inputs and textareas should align text to the right in RTL */
html[dir="rtl"] input,
html[dir="rtl"] textarea {
    text-align: right;
}

/* In RTL languages, force phone and numeric inputs to read LTR and align left */
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="number"],
html[dir="rtl"] #phone {
    direction: ltr !important;
    text-align: left !important;
}

/* --- RTL Carousel Fixes --- */
html[dir="rtl"] .carousel-button.prev {
    left: auto;
    right: -24px; /* Move prev button to the right */
}

html[dir="rtl"] .carousel-button.next {
    right: auto;
    left: -24px; /* Move next button to the left */
}

/* Flip the arrow icons */
html[dir="rtl"] .carousel-button svg {
    transform: scaleX(-1);
}

/* In RTL, the card visually to the right is "previous" in the array, and to the left is "next" */
/* We swap the styles of .is-prev and .is-next */
html[dir="rtl"] .carousel-card.is-prev {
    transform-origin: left center; /* Flipped */
    transform: scale(0.75) rotateY(-45deg) translateX(80px) translateZ(-150px); /* Was .is-next style, with flipped rotation/translation */
}

html[dir="rtl"] .carousel-card.is-next {
    transform-origin: right center; /* Flipped */
    transform: scale(0.75) rotateY(45deg) translateX(-80px) translateZ(-150px); /* Was .is-prev style, with flipped rotation/translation */
}

/* Adjust for mobile */
@media (max-width: 768px) {
    html[dir="rtl"] .carousel-button.prev { right: 5px; }
    html[dir="rtl"] .carousel-button.next { left: 5px; }
    html[dir="rtl"] .carousel-card.is-prev { transform: scale(0.8) rotateY(-30deg) translateX(40px); }
    html[dir="rtl"] .carousel-card.is-next { transform: scale(0.8) rotateY(30deg) translateX(-40px); }
}

/* --- Ripple text effect for hero title --- */
@import url('https://fonts.cdnfonts.com/css/hubot-sans');

.ripple-text {
  position: relative;
  display: inline-block;
  font-family: 'Hubot-Sans', sans-serif;
  color: transparent;
  line-height: 1.1;
  text-align: center;
  -webkit-text-fill-color: transparent;
  /* Match reference timing */
  --ripple-duration: 10s;
  --ripple-delay: 1.2s;
}
/* Reserve natural space so absolute layers don't collapse the heading */
.ripple-text::before {
  content: attr(data-text);
  visibility: hidden;
  white-space: nowrap;
  display: block;
}
.ripple-text > span {
  position: absolute;
  inset: 0;
  display: block;
  margin: 0;
  width: 100%;
  font-weight: 600;
  text-align: center;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  --p: 0%;
  /* Use the exact reference animation */
  animation: pulse var(--ripple-duration) linear var(--ripple-delay) infinite;
  pointer-events: none;
  will-change: background-image;
}

/* Reserve height using an inline child when host element also uses ::before (::lined-text) */
.ripple-text .ripple-measure {
  visibility: hidden;
  white-space: nowrap;
  display: block;
}

/* Fallback: when spans don't carry explicit classes (crisp/glow) */
.ripple-text > span:first-child:not([class]) {
  animation-delay: var(--ripple-delay);
  background-image:
    radial-gradient(1.5em 1.5em at 50% 50%,
      transparent calc(var(--p) - 1.5em),
      #fff calc(var(--p) - 1em),
      #fff calc(var(--p) - 0.4em),
      transparent var(--p)
    ),
    linear-gradient(0deg, #bad1f1 30%, #9dc3f7 100%);
  text-shadow: 0 2px 16px rgba(174, 207, 242, .24);
}
.ripple-text > span:last-child:not([class]) {
  background-image:
    radial-gradient(1.5em 1.5em at 50% 50%,
      transparent calc(var(--p) - 1.5em),
      #fff calc(var(--p) - 1em),
      #fff calc(var(--p) - 0.4em),
      transparent var(--p)
    );
  filter: blur(16px) opacity(0.4);
  animation-delay: calc(var(--ripple-delay) + var(--ripple-duration) / 2);
}

/* Extended ripple that clears borders further */
.ripple-extend > span {
  animation-name: pulseWide;
}
.ripple-text > span.crisp {
  /* Start after a slight delay as in reference */
  animation-delay: var(--ripple-delay);
  background-image:
    radial-gradient(1.5em 1.5em at 50% 50%,
      transparent calc(var(--p) - 1.5em),
      #fff calc(var(--p) - 1em),
      #fff calc(var(--p) - 0.4em),
      transparent var(--p)
    ),
    linear-gradient(0deg, #bad1f1 30%, #9dc3f7 100%);
  text-shadow: 0 2px 16px rgba(174, 207, 242, .24);
}
.ripple-text > span.glow {
  background-image:
    radial-gradient(1.5em 1.5em at 50% 50%,
      transparent calc(var(--p) - 1.5em),
      #fff calc(var(--p) - 1em),
      #fff calc(var(--p) - 0.4em),
      transparent var(--p)
    );
  filter: blur(16px) opacity(0.4);
  /* Keep same reference timing, but offset glow by half cycle */
  animation-delay: calc(var(--ripple-delay) + var(--ripple-duration) / 2);
}

/* Secondary glow sweeps at a slightly different speed and direction
   so one layer is always mid-sweep while another starts, hiding any edge */
/* Remove alt layer to match 2-layer reference */

/* Reference keyframes */
@keyframes pulse {
  0%   { --p: 0%; }
  50%  { --p: 400%; }
  100% { --p: 400%; }
}

@keyframes pulseWide {
  0%   { --p: 0%; }
  50%  { --p: 500%; }
  100% { --p: 500%; }
}

/* --- Reference-style stacked text effect usable inside headings --- */
.effect-title {
  position: relative;
  display: inline-block;
  font-family: 'Hubot-Sans', sans-serif;
  font-weight: 600;
  color: #9dc3f7;
  white-space: nowrap;
  line-height: 1.3; /* extra breathing room for Arabic/Kurdish glyphs */
  padding-top: 0.05em;
  padding-bottom: 0.2em; /* prevent descenders from clipping */
  overflow: visible;
}
.effect-title::before {
  content: attr(data-text);
  visibility: hidden;
  display: block;
  white-space: nowrap;
  line-height: 1.3;
}
.effect-title > .layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  transform: translateY(0);
  margin: 0;
  width: fit-content;
  font-size: 1em; /* inherit size from parent heading */
  line-height: 1.3;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  --p: 0%;
  animation: pulse 10s linear 1.2s infinite;
}
.effect-title > .layer.crisp {
  background-image:
    radial-gradient(1.5em 1.5em at 50% 50%,
      transparent calc(var(--p) - 1.5em),
      #fff calc(var(--p) - 1em),
      #fff calc(var(--p) - 0.4em),
      transparent var(--p)
    ),
    linear-gradient(0deg, #bad1f1 30%, #9dc3f7 100%);
  text-shadow: 0 2px 16px rgba(174, 207, 242, .24);
}
.effect-title > .layer.glow {
  background-image:
    radial-gradient(1.5em 1.5em at 50% 50%,
      transparent calc(var(--p) - 1.5em),
      #fff calc(var(--p) - 1em),
      #fff calc(var(--p) - 0.4em),
      transparent var(--p)
    );
  filter: blur(16px) opacity(0.4);
  animation-delay: 6.2s; /* 1.2s + 5s (half of 10s) */
}

@property --p {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}

/* --- Projects: enlarge card and show popup live preview on hover (no backdrop blur) --- */
.project-card { position: relative; transition: transform 350ms cubic-bezier(0.21, 0.61, 0.35, 1), box-shadow 350ms ease; }
.project-card { will-change: transform, box-shadow; transform: translateZ(0); backface-visibility: hidden; contain: paint; }
.project-card:hover { transform: translateY(-8px) translateZ(0); box-shadow: 0 14px 28px rgba(0,0,0,0.42), 0 0 24px rgba(56,189,248,0.18); }
.project-card .card-image-container {
    position: relative;
    /* Make project thumbnails perfectly square regardless of width */
    aspect-ratio: 1 / 1;
    height: auto;
}
/* Live preview overlay inside the image container */
.project-card .card-live { position: absolute; inset: 0; background: #0a0b14; border-bottom: 1px solid rgba(94, 234, 212, 0.3); opacity: 0; transition: opacity 220ms ease-out; z-index: 2; will-change: opacity; backface-visibility: hidden; }
.project-card .card-live iframe { width: 100%; height: 100%; border: 0; overflow: hidden; }
/* Hide scrollbars for embedded previews */
.project-card .card-live iframe::-webkit-scrollbar { display: none; }
.project-card .card-live iframe { scrollbar-width: none; -ms-overflow-style: none; }
.project-card:hover .card-live { opacity: 1; }
.project-card .card-image { transition: transform 600ms ease, opacity 220ms ease; will-change: transform, opacity; transform: translateZ(0); }
.project-card:hover .card-image { transform: scale(1.025); opacity: 0; }
/* Enter/exit animations for dynamically added/removed project cards */
.project-card.anim-enter { opacity: 0; transform: translateY(16px); }
.project-card.anim-enter-active { opacity: 1; transform: translateY(0); transition: opacity 350ms ease, transform 350ms ease; }
.project-card.anim-exit { opacity: 1; transform: translateY(0); }
.project-card.anim-exit-active { opacity: 0; transform: translateY(16px); transition: opacity 280ms ease, transform 280ms ease; }
/* Removed preview popup styles */

/* Fallback UI when preview is unavailable (e.g., X-Frame-Options) */
.project-card .card-live.unavailable {
    display: grid;
    place-items: center;
    /* Match the subtle gradient look used on normal project images */
    background:
        linear-gradient(120deg, rgba(56, 189, 248, 0.10), transparent 70%),
        radial-gradient(circle at 80% 20%, rgba(94, 234, 212, 0.15), transparent 50%),
        rgba(2, 6, 23, 0.25);
}
.project-card .card-live.unavailable::before { content: 'Open live site'; color: #93c5fd; font-size: 0.9rem; letter-spacing: 0.02em; text-shadow: 0 2px 10px rgba(147,197,253,0.2); background: rgba(2,6,23,0.6); border: 1px solid rgba(147,197,253,0.25); padding: 0.5rem 0.75rem; border-radius: 9999px; }
.project-card .card-live.unavailable iframe { display: none; }

/* Clickable image overlay badge for external preview */
.card-image-link { position: relative; display: block; height: 100%; }
.card-image-link .open-badge {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  padding: 0.4rem 0.75rem; border: 1px solid rgba(147,197,253,0.35);
  color: #c8dcff; font-size: 0.85rem; border-radius: 9999px;
  background: rgba(2,6,23,0.6); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .25s ease;
}
.card-image-link:hover .open-badge { opacity: 1; }

/* Hand cursor on hover over project cards */
#projects .project-card:hover,
#projects .project-card:hover * {
  cursor: url('light-curser/hand.cur'), pointer !important;
}

/* Hand cursor on hover over Services cards */
#services .clickable-card:hover,
#services .clickable-card:hover *,
#services .lift-card.clickable-card:hover,
#services .lift-card.clickable-card:hover * {
  cursor: url('light-curser/hand.cur'), pointer !important;
}

/* Keep default arrow cursor on Why Choose Me cards (no hand pointer) */
#features .radix-card:hover,
#features .radix-card:hover * {
  cursor: inherit !important;
}

/* Ensure header actions use hand cursor on hover */
.site-header #language-toggle:hover,
.site-header .nav-contact-btn:hover,
.site-header a.nav-link:hover {
  cursor: url('light-curser/hand.cur'), pointer !important;
}

/* --- Cursor transition aura (simulates smooth change to hand) --- */
/* cursor aura removed */

/* Unified subtle lift hover used by project cards */
.lift-card { transition: transform 350ms cubic-bezier(0.21, 0.61, 0.35, 1), box-shadow 350ms ease; }
.lift-card:hover { transform: translateY(-10px); box-shadow: 0 18px 35px rgba(0,0,0,0.45), 0 0 30px rgba(56,189,248,0.2); }

/* Internal spotlight that stays inside the card for all cards */
.radix-card { position: relative; overflow: hidden; border-radius: 1rem; }
.radix-card::before {
  content: '';
  position: absolute;
  inset: 1px; /* keep inside the border */
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(600px 420px at var(--spot-x, -9999px) var(--spot-y, -9999px), rgba(96, 165, 250, 0.16), transparent 60%);
  transition: opacity 220ms ease;
  z-index: 0;
}
.radix-card:hover::before { opacity: 1; }

/* Pulsating ring effect for icons (light steel blue glow) */
.icon-pulsar {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 9999px;
  color: inherit; /* use surrounding text color for glow */
}
.icon-pulsar::before,
.icon-pulsar::after {
  content: none !important; /* disable pulsating ring effect globally */
}
.icon-pulsar::after { animation-delay: 2s; }
@keyframes iconPulse {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 0.7; }
  100% { transform: translate(-50%, -50%) scale(3); opacity: 0; }
}