/* =========================================================================
   CODERATIK — DESIGN SYSTEM & THEME
   Premium / Clear / White-First Digital Technology Studio
   ========================================================================= */

@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700;800&display=swap");

:root{
  /* -------- surfaces -------- */
  --bg:        #FFFFFF;
  --bg-alt:    #F7F7FB;
  --surface:   #FFFFFF;
  --surface-2: #F1F1F8;
  --border:    rgba(20,20,35,0.08);
  --border-strong: rgba(20,20,35,0.14);

  /* -------- text -------- */
  --heading:   #14141F;
  --text:      #52566A;
  --text-dim:  #82869A;

  /* -------- brand accents (from the Coderatik mark) -------- */
  --c-indigo:  #4D4ADC;
  --c-cyan:    #706FE3;
  --c-magenta: #9393EB;
  --c-gold:    #A9C22E;
  --c-indigo-tint: #EEEDFC;

  --grad-primary: linear-gradient(135deg, var(--c-indigo) 0%, var(--c-magenta) 100%);
  --grad-cta:     linear-gradient(135deg, #4D4ADC 0%, #706FE3 100%);
  --grad-text:    linear-gradient(120deg, #14141F 0%, #4D4ADC 55%, #706FE3 100%);

  /* -------- elevation (soft, light) -------- */
  --shadow-sm: 0 4px 16px rgba(20,20,50,0.06);
  --shadow-md: 0 14px 36px rgba(20,20,50,0.09);
  --shadow-glow: 0 0 0 1px rgba(77,74,220,0.08), 0 25px 60px -20px rgba(77,74,220,0.22);

  /* -------- type scale -------- */
  --font-display: "Space Grotesk", "Inter", sans-serif;
  --font-body: "Inter", sans-serif;

  /* -------- spacing -------- */
  --section-pad: clamp(72px, 10vw, 160px);
  --container: 1240px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;

  /* -------- geometric shape system: cut-corner cards + hex badges, replacing plain rounded boxes -------- */
  --clip-card:    polygon(46px 0, 100% 0, 100% calc(100% - 46px), calc(100% - 46px) 100%, 0 100%, 0 46px);
  --clip-card-rtl:polygon(0 0, calc(100% - 46px) 0, 100% 46px, 100% 100%, 46px 100%, 0 calc(100% - 46px));
  --clip-card-sm:    polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px);
  --clip-card-sm-rtl:polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px));
  --angle-h: clamp(46px, 5.5vw, 96px);
  --clip-hex: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  --drop-sm: drop-shadow(0 4px 16px rgba(20,20,50,0.06));
  --drop-md: drop-shadow(0 14px 36px rgba(20,20,50,0.09));
}

[dir="rtl"]{
  --font-display: "Cairo", "Space Grotesk", sans-serif;
  --font-body: "Tajawal", "Inter", sans-serif;
}

/* ===================== RESET / BASE ===================== */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; background:var(--bg); }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  cursor:default;
  position:relative;
}
/* subtle film-grain texture — adds tactile depth instead of flat/templated color fields */
body::before{
  content:"";
  position:fixed; inset:0; z-index:2;
  pointer-events:none;
  opacity:.025;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ===================== SCROLL PROGRESS ===================== */
.scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:var(--grad-primary);
  z-index:9997;
  transition:width .12s linear;
}
img{ max-width:100%; display:block; }
ul{ list-style:none; margin:0; padding:0; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; }
input,textarea,select{ font:inherit; }

h1,h2,h3,h4,h5,h6{
  font-family:var(--font-display);
  color:var(--heading);
  font-weight:700;
  line-height:1.15;
  margin:0 0 0.5em;
  letter-spacing:-0.02em;
}
p{ margin:0 0 1em; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--c-indigo); outline-offset:3px; border-radius:4px;
}

.container{ max-width:var(--container); margin:0 auto; padding:0 32px; }
@media (max-width:640px){ .container{ padding:0 22px; } }

section{ position:relative; padding:var(--section-pad) 0; }
section > .container{ position:relative; z-index:1; }

/* ===================== BOLD GEOMETRIC DECOR =====================
   Oversized outlined + filled primitives sitting behind section content.
   Purely decorative: aria-hidden in markup, pointer-events off, and
   clipped to their section so nothing bleeds into a neighbouring block. */
.geo-layer{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.geo{ position:absolute; display:block; color:var(--c-indigo); }
.geo svg{ width:100%; height:100%; display:block; overflow:visible; }
.geo svg [fill="none"]{ vector-effect:non-scaling-stroke; }
.geo-spin{ animation:geoSpin 54s linear infinite; }
.geo-spin-rev{ animation:geoSpin 72s linear infinite reverse; }
@keyframes geoSpin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }

/* solid brand-gradient primitives — these are the pieces that carry real colour weight */
.geo-solid{ background:var(--grad-primary); }
.geo-diamond{ clip-path:polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.geo-hexfill{ clip-path:var(--clip-hex); }
.geo-blade{ clip-path:polygon(38% 0, 100% 0, 62% 100%, 0 100%); }
.geo-dots{
  background-image:radial-gradient(currentColor 1.6px, transparent 1.8px);
  background-size:20px 20px; opacity:.16;
}

/* ---- placements (mirrored automatically via logical inset properties) ---- */
.geo-hero-hex{ width:clamp(280px,34vw,520px); aspect-ratio:1; top:4%; inset-inline-end:-9%; opacity:.6; }
.geo-hero-diamond{ width:clamp(56px,7vw,104px); aspect-ratio:1; top:64%; inset-inline-end:31%; opacity:.2; }
.geo-hero-blade{ width:clamp(90px,11vw,170px); height:clamp(150px,19vw,290px); top:-6%; inset-inline-start:44%; opacity:.07; }

.geo-svc-tri{ width:clamp(300px,38vw,560px); aspect-ratio:1; bottom:-16%; inset-inline-start:-12%; opacity:.42; }
.geo-svc-dots{ width:190px; height:190px; top:12%; inset-inline-end:4%; }

.geo-why-hex{ width:clamp(260px,30vw,460px); aspect-ratio:1; bottom:-14%; inset-inline-end:-8%; opacity:.42; }
.geo-why-diamond{ width:clamp(48px,6vw,88px); aspect-ratio:1; top:14%; inset-inline-end:12%; opacity:.2; }

.geo-tech-ring{ width:clamp(420px,52vw,760px); aspect-ratio:1; top:50%; inset-inline-start:50%; transform:translate(-50%,-50%); opacity:.4; }
.geo-tech-ring.geo-spin{ animation-name:geoSpinCentred; }
@keyframes geoSpinCentred{ from{ transform:translate(-50%,-50%) rotate(0deg); } to{ transform:translate(-50%,-50%) rotate(360deg); } }

.geo-pf-squares{ width:clamp(230px,26vw,400px); aspect-ratio:1; top:30%; inset-inline-start:-12%; opacity:.45; }
.geo-pf-diamond{ width:clamp(44px,5vw,74px); aspect-ratio:1; bottom:12%; inset-inline-end:6%; opacity:.2; }

.geo-cta-hex{ width:clamp(300px,34vw,520px); aspect-ratio:1; top:-14%; inset-inline-start:-8%; opacity:.45; }
.geo-cta-diamond{ width:clamp(50px,6vw,92px); aspect-ratio:1; bottom:8%; inset-inline-end:9%; opacity:.22; }

.geo-contact-hex{ width:clamp(260px,30vw,440px); aspect-ratio:1; bottom:-12%; inset-inline-start:-9%; opacity:.42; }
.geo-contact-dots{ width:170px; height:170px; top:9%; inset-inline-end:3%; }

@media (max-width:860px){
  .geo-hero-blade, .geo-svc-dots, .geo-why-diamond,
  .geo-pf-diamond, .geo-contact-dots{ display:none; }
  .geo{ opacity:.3; }
}
@media (prefers-reduced-motion: reduce){
  .geo-spin, .geo-spin-rev, .geo-tech-ring.geo-spin{ animation:none; }
}

/* ===================== TRUE 3D OBJECTS =====================
   Real CSS 3D solids built from positioned faces inside a preserve-3d space:
   a hexagonal prism (echoing the hex motif) and a wireframe cube. The wrapper
   owns the placement + perspective; the inner solid owns the rotation. */
.obj3d-wrap{ position:absolute; pointer-events:none; perspective:1100px; }
.obj3d{
  position:absolute; inset:0; transform-style:preserve-3d;
  animation:obj3dSpin 30s linear infinite;
}
.obj3d .side{
  position:absolute; left:50%; top:50%;
  background:linear-gradient(155deg, rgba(77,74,220,0.11), rgba(147,147,235,0.02));
  border:1px solid rgba(77,74,220,0.30);
  backface-visibility:visible;
}
@keyframes obj3dSpin{
  from{ transform:rotateX(-16deg) rotateY(0deg); }
  to{   transform:rotateX(-16deg) rotateY(360deg); }
}
.obj3d.tilt-b{ animation-name:obj3dSpinB; animation-duration:38s; animation-direction:reverse; }
@keyframes obj3dSpinB{
  from{ transform:rotateX(22deg) rotateZ(12deg) rotateY(0deg); }
  to{   transform:rotateX(22deg) rotateZ(12deg) rotateY(360deg); }
}

/* -- hexagonal prism: 6 side panels at 60° steps, pushed out by the apothem -- */
.hexprism{ --r:170px; --ph:210px; }
.hexprism .side{
  width:var(--r); height:var(--ph);
  margin-left:calc(var(--r) / -2); margin-top:calc(var(--ph) / -2);
  transform:rotateY(calc(var(--i) * 60deg)) translateZ(calc(var(--r) * 0.866));
}
/* -- wireframe cube -- */
.cube3d{ --s:150px; }
.cube3d .side{
  width:var(--s); height:var(--s);
  margin-left:calc(var(--s) / -2); margin-top:calc(var(--s) / -2);
}
.cube3d .side:nth-child(1){ transform:translateZ(calc(var(--s) / 2)); }
.cube3d .side:nth-child(2){ transform:rotateY(90deg)  translateZ(calc(var(--s) / 2)); }
.cube3d .side:nth-child(3){ transform:rotateY(180deg) translateZ(calc(var(--s) / 2)); }
.cube3d .side:nth-child(4){ transform:rotateY(-90deg) translateZ(calc(var(--s) / 2)); }
.cube3d .side:nth-child(5){ transform:rotateX(90deg)  translateZ(calc(var(--s) / 2)); }
.cube3d .side:nth-child(6){ transform:rotateX(-90deg) translateZ(calc(var(--s) / 2)); }

/* placements */
.obj-hero-prism{ width:340px; height:210px; top:24%; inset-inline-end:4%; }
.obj-hero-prism .hexprism{ --r:clamp(90px,11vw,170px); --ph:clamp(120px,14vw,210px); }
.obj-pf-cube{ width:190px; height:190px; top:40%; inset-inline-start:-7%; }
.obj-pf-cube .cube3d{ --s:clamp(90px,10vw,150px); }
.obj-cta-prism{ width:260px; height:170px; bottom:4%; inset-inline-end:6%; }
.obj-cta-prism .hexprism{ --r:clamp(70px,8vw,124px); --ph:clamp(90px,10vw,156px); }
.obj-tech-cube{ width:150px; height:150px; top:14%; inset-inline-end:8%; }
.obj-tech-cube .cube3d{ --s:clamp(70px,8vw,116px); }

@media (max-width:900px){
  .obj-pf-cube, .obj-cta-prism, .obj-tech-cube{ display:none; }
  .obj-hero-prism{ opacity:.55; }
}
@media (prefers-reduced-motion: reduce){
  .obj3d{ animation:none; transform:rotateX(-16deg) rotateY(28deg); }
  .obj3d.tilt-b{ transform:rotateX(22deg) rotateZ(12deg) rotateY(34deg); }
}

/* ===================== 3D CARD TILT =====================
   Driven from JS via --rx/--ry (rotation) and --gx/--gy (cursor glare).
   perspective() lives in the transform so each card is its own 3D space. */
.tilt3d{
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate3d(0,var(--lift,0px),var(--pop,0px));
  transition:transform .35s cubic-bezier(.16,.84,.44,1), filter .35s ease, background-color .35s ease;
}
.tilt3d:hover{ --lift:-6px; --pop:18px; }

/* ===================== ANGLED SECTION EDGES =====================
   Diagonal boundaries between contrasting section backgrounds. The section is
   pulled up by the slope height and given matching extra top padding, so the
   diagonal is purely visual and the content rhythm is unchanged. */
.sec-angle-up, .sec-angle-down{
  padding-top:calc(var(--section-pad) + var(--angle-h));
  margin-top:calc(var(--angle-h) * -1);
}
.sec-angle-up{ clip-path:polygon(0 var(--angle-h), 100% 0, 100% 100%, 0 100%); }
.sec-angle-down{ clip-path:polygon(0 0, 100% var(--angle-h), 100% 100%, 0 100%); }
[dir="rtl"] .sec-angle-up{ clip-path:polygon(0 0, 100% var(--angle-h), 100% 100%, 0 100%); }
[dir="rtl"] .sec-angle-down{ clip-path:polygon(0 var(--angle-h), 100% 0, 100% 100%, 0 100%); }

.eyebrow{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--font-display);
  font-size:13px; font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--c-indigo);
  margin-bottom:22px;
}
/* bold geometric marker (solid diamond + weighted bar) replacing the old hairline dash */
.eyebrow::before{
  content:""; width:46px; height:12px; flex:0 0 auto;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 12'%3E%3Cpolygon points='6,0 12,6 6,12 0,6' fill='%234D4ADC'/%3E%3Crect x='18' y='4.5' width='28' height='3' fill='%234D4ADC' opacity='0.4'/%3E%3C/svg%3E") center/contain no-repeat;
}
[dir="rtl"] .eyebrow::before{ transform:scaleX(-1); }

.section-head{ max-width:760px; margin-bottom:72px; position:relative; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head h2{
  font-size:clamp(2.1rem, 4.6vw, 3.6rem);
  letter-spacing:-0.03em;
}
.section-head p{
  color:var(--text-dim);
  font-size:1.1rem;
  max-width:620px;
}
.section-head.center p{ margin-left:auto; margin-right:auto; }

.grad-text{
  background:var(--grad-text);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* ===================== SCROLL REVEAL (3D) =====================
   Elements now rise out of depth: pushed back on Z and tipped on X, then
   settling flat. perspective() is inside the transform so no ancestor
   perspective is required and nothing else in the layout is affected. */
.reveal{
  opacity:0;
  transform:perspective(1200px) translate3d(0,26px,-90px) rotateX(9deg);
  transition:opacity .8s cubic-bezier(.16,.84,.44,1), transform .9s cubic-bezier(.16,.84,.44,1);
  will-change:transform, opacity;
}
.reveal.in-view{ opacity:1; transform:perspective(1200px) translate3d(0,0,0) rotateX(0deg); }
.reveal-delay-1{ transition-delay:.08s; }
.reveal-delay-2{ transition-delay:.16s; }
.reveal-delay-3{ transition-delay:.24s; }
.reveal-delay-4{ transition-delay:.32s; }
.reveal-delay-5{ transition-delay:.4s; }
.reveal-delay-6{ transition-delay:.48s; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

/* ===================== CUSTOM CURSOR ===================== */
.ct-cursor{
  position:fixed; top:0; left:0;
  width:8px; height:8px; border-radius:50%;
  background:var(--c-indigo);
  pointer-events:none; z-index:9999;
  transform:translate(-50%,-50%);
  transition:width .2s, height .2s, background .2s;
}
.ct-cursor-ring{
  position:fixed; top:0; left:0;
  width:36px; height:36px; border-radius:50%;
  border:1px solid rgba(20,20,35,0.18);
  pointer-events:none; z-index:9998;
  transform:translate(-50%,-50%);
  transition:width .25s, height .25s, border-color .25s, opacity .25s, transform .12s linear;
}
.ct-cursor-ring.hovered{ width:64px; height:64px; border-color:var(--c-indigo); }
.ct-cursor.pressed{ width:6px; height:6px; }
.ct-cursor-ring.pressed{ width:28px; height:28px; border-color:var(--c-indigo); transition:width .15s, height .15s, border-color .15s; }
@media (hover:none), (max-width:900px){
  .ct-cursor,.ct-cursor-ring{ display:none; }
}

/* ===================== BUTTONS ===================== */
.btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--font-display);
  font-weight:600; font-size:15px;
  padding:16px 30px;
  border-radius:37px;
  border:1px solid transparent;
  isolation:isolate;
  overflow:hidden;
  white-space:nowrap;
  transition:transform .32s cubic-bezier(.16,.84,.44,1), box-shadow .3s ease, border-color .3s ease, color .3s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn.is-pressed{ transform:translateY(-1px) scale(.98) !important; transition-duration:.12s; }
.btn-ripple{
  position:absolute; border-radius:50%; pointer-events:none;
  background:rgba(255,255,255,0.35);
  transform:scale(0); opacity:1;
  animation:btnRipple .55s ease-out forwards;
  z-index:0;
}
.btn-outline .btn-ripple, .btn-ghost .btn-ripple{ background:rgba(77,74,220,0.12); }
@keyframes btnRipple{
  to{ transform:scale(1); opacity:0; }
}
.btn > *{ position:relative; z-index:1; }
.btn-primary{
  background:var(--grad-cta);
  color:#FFFFFF;
  /* solid rim = the button's edge; blurred layer = its cast shadow */
  box-shadow:
    0 5px 0 0 #3B38B4,
    0 6px 1px 0 rgba(20,20,50,0.16),
    0 14px 30px -10px rgba(77,74,220,0.45),
    inset 0 1px 0 rgba(255,255,255,0.35);
  transform:translateY(0);
}
.btn-primary:hover{
  box-shadow:
    0 7px 0 0 #3B38B4,
    0 9px 1px 0 rgba(20,20,50,0.18),
    0 22px 44px -10px rgba(77,74,220,0.5),
    inset 0 1px 0 rgba(255,255,255,0.4);
}
/* pressing pushes the face down onto its own edge */
.btn-primary.is-pressed, .btn-primary:active{
  transform:translateY(4px) !important;
  box-shadow:
    0 1px 0 0 #3B38B4,
    0 2px 1px 0 rgba(20,20,50,0.14),
    0 6px 14px -6px rgba(77,74,220,0.4),
    inset 0 1px 0 rgba(255,255,255,0.25) !important;
}
.btn-primary::before{
  content:""; position:absolute; z-index:0; top:0; bottom:0; width:60%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,0.35), transparent);
  transform:translateX(-160%) skewX(-18deg);
  transition:transform .6s cubic-bezier(.16,.84,.44,1);
}
.btn-primary:hover::before{ transform:translateX(220%) skewX(-18deg); }
.btn-outline{
  color:var(--heading);
  border-color:var(--border-strong);
  background:#FFFFFF;
}
.btn-outline:hover{ border-color:var(--c-indigo); color:var(--c-indigo); box-shadow:0 14px 30px -14px rgba(77,74,220,0.35); }
.btn-ghost{
  color:var(--heading);
  font-weight:500;
  gap:8px;
}
.btn-ghost .arrow{ transition:transform .3s ease; }
.btn-ghost:hover .arrow{ transform:translateX(6px); }
[dir="rtl"] .btn-ghost:hover .arrow{ transform:translateX(-6px) scaleX(-1); }
[dir="rtl"] .btn-ghost .arrow{ transform:scaleX(-1); }

.magnetic{ transition:transform .25s cubic-bezier(.16,.84,.44,1); }

/* ===================== NAVIGATION ===================== */
/* Default state: bare, transparent, sits directly in the hero.
   Scrolled state: the bar detaches from the edges and becomes a
   floating capsule island — not an edge-to-edge bar. */
.ct-nav{
  position:fixed; top:0; left:0; right:0; z-index:900;
  padding:26px 0;
  transition:padding .45s cubic-bezier(.16,.84,.44,1);
}
.ct-nav .container{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  transition:max-width .45s cubic-bezier(.16,.84,.44,1), padding .45s cubic-bezier(.16,.84,.44,1),
             background .45s ease, border-radius .45s cubic-bezier(.16,.84,.44,1),
             box-shadow .45s ease, border-color .45s ease, margin .45s cubic-bezier(.16,.84,.44,1);
  border-radius:0; border:1px solid transparent;
}
.ct-nav.scrolled{ padding:14px 0; }
.ct-nav.scrolled .container{
  max-width:calc(var(--container) - 120px);
  background:rgba(255,255,255,0.82);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  border:1px solid var(--border-strong);
  border-radius:999px;
  padding:10px 14px 10px 26px;
  box-shadow:0 18px 46px -18px rgba(20,20,50,0.28), 0 2px 10px rgba(20,20,50,0.04);
}
@media (max-width:640px){
  .ct-nav.scrolled .container{ max-width:calc(100% - 32px); padding:8px 8px 8px 18px; }
}
.ct-logo{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; font-size:20px; color:var(--heading); }
.ct-logo .dot{
  width:9px; height:9px; border-radius:50%;
  background:var(--grad-primary);
}
.ct-logo img{ height:34px; width:auto; display:block; }
.ct-mobile-menu .ct-logo img{ height:30px; }
.ct-nav-links{ display:flex; align-items:center; gap:6px; position:relative; }
.ct-nav-links a{
  font-size:14.5px; font-weight:500; color:var(--text);
  padding:9px 16px; border-radius:20px;
  position:relative; z-index:1;
  transition:color .25s ease;
}
.ct-nav-links a:hover, .ct-nav-links a.active{ color:var(--heading); }
.nav-indicator{
  position:absolute; top:0; left:0; height:100%; border-radius:20px;
  background:var(--c-indigo-tint);
  z-index:0; opacity:0;
  transition:transform .45s cubic-bezier(.16,.84,.44,1), width .45s cubic-bezier(.16,.84,.44,1), opacity .25s ease;
}
.nav-indicator.ready{ opacity:1; }
.ct-nav-actions{ display:flex; align-items:center; gap:14px; }
.ct-lang-switch{
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--border-strong);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; letter-spacing:.03em;
  color:var(--text);
  transition:transform .25s cubic-bezier(.16,.84,.44,1), border-color .25s ease, color .25s ease;
}
.ct-lang-switch:hover{ border-color:var(--c-indigo); color:var(--c-indigo); }
.ct-burger{
  display:none; flex-direction:column; gap:5px;
  width:26px; background:none; border:none; padding:6px;
}
.ct-burger span{ width:100%; height:2px; background:var(--heading); transition:all .3s ease; }
.ct-burger.active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.ct-burger.active span:nth-child(2){ opacity:0; }
.ct-burger.active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.ct-mobile-menu{
  position:fixed; inset:0; z-index:895;
  background:rgba(255,255,255,0.98);
  backdrop-filter:blur(20px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  opacity:0; visibility:hidden; transform:translateY(-16px);
  transition:all .4s cubic-bezier(.16,.84,.44,1);
}
.ct-mobile-menu.open{ opacity:1; visibility:visible; transform:translateY(0); }
.ct-mobile-menu a{ font-family:var(--font-display); font-size:28px; font-weight:600; color:var(--heading); padding:12px 0; }
.ct-mobile-menu a:hover{ color:var(--c-indigo); }
.ct-mobile-menu .btn{ margin-top:22px; }

@media (max-width:1080px){
  .ct-nav-links{ display:none; }
  .ct-burger{ display:flex; }
  .ct-nav-actions .btn-outline{ display:none; }
}

/* ===================== HERO ===================== */
.hero{
  position:relative;
  min-height:100vh;
  display:flex; align-items:center;
  padding:170px 0 100px;
  overflow:hidden;
  background:
    radial-gradient(1200px 680px at 88% -10%, rgba(77,74,220,0.1), transparent 60%),
    radial-gradient(900px 560px at 0% 112%, rgba(112,111,227,0.07), transparent 60%),
    var(--bg);
}
.hero-grid-bg{ position:absolute; inset:0; z-index:0; opacity:.6; }
.hero::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(560px circle at var(--mx,50%) var(--my,28%), rgba(77,74,220,0.07), transparent 70%);
  transition:background .15s ease;
}
/* ambient watermark type — oversized faint brand mark for atmosphere & scale contrast */
.hero .container::before{
  content:"CDRTK";
  position:absolute; z-index:0; pointer-events:none;
  top:-6%; inset-inline-end:-2%;
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(6rem, 16vw, 15rem);
  letter-spacing:-0.04em;
  color:transparent;
  -webkit-text-stroke:1px rgba(20,20,35,0.05);
  line-height:1;
  user-select:none;
}
[dir="rtl"] .hero .container::before{ content:"كودورا"; }
.hero .container{ position:relative; z-index:2; display:grid; grid-template-columns:1.18fr 0.82fr; gap:48px; align-items:center; }
.hero-copy h1{
  font-size:clamp(2.5rem, 5vw, 4.2rem);
  letter-spacing:-0.03em;
  margin-bottom:26px;
}
.hero-copy h1 span.line{ display:block; overflow:hidden; padding-bottom:0.08em; }
.word-mask{ display:inline-block; overflow:hidden; vertical-align:top; }
.word-inner{
  display:inline-block;
  transform:translateY(112%);
  transition:transform .8s cubic-bezier(.16,.84,.44,1);
}
.word-inner.in{ transform:translateY(0); }
.hero-copy .lead{
  font-size:1.18rem; color:var(--text);
  max-width:520px; margin-bottom:40px;
}
.hero-cta-row{ display:flex; align-items:center; gap:26px; flex-wrap:wrap; margin-bottom:56px; }
.hero-stats{ display:flex; gap:0; flex-wrap:wrap; }
.hero-stats .stat{ padding-inline-end:34px; margin-inline-end:34px; border-inline-end:1px solid var(--border); }
.hero-stats .stat:last-child{ border-inline-end:none; padding-inline-end:0; margin-inline-end:0; }
.hero-stats .stat b{
  display:block; font-family:var(--font-display); font-size:1.9rem; color:var(--heading); letter-spacing:-0.02em;
}
.hero-stats .stat span{ font-size:.78rem; color:var(--text-dim); letter-spacing:.05em; text-transform:uppercase; }

/* hero visual composition — light UI-mockup cards */
.hero-visual{ position:relative; height:560px; perspective:1300px; perspective-origin:50% 42%; }
.hero-visual::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  width:70%; height:70%; top:12%; left:15%; border-radius:50%;
  background:radial-gradient(circle, rgba(77,74,220,0.16), rgba(112,111,227,0.06) 55%, transparent 75%);
  filter:blur(30px);
}
.hv-stage{ position:relative; width:100%; height:100%; transform-style:preserve-3d;
  transition:transform .5s cubic-bezier(.16,.84,.44,1); }
.hv-card{
  position:absolute;
  clip-path:var(--clip-card-sm);
  background:rgba(255,255,255,0.72);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(255,255,255,0.9);
  filter:var(--drop-md);
  padding:18px;
  animation:float 9s ease-in-out infinite;
}
[dir="rtl"] .hv-card{ clip-path:var(--clip-card-sm-rtl); }
.hv-card.c1{ top:6%; left:4%; width:230px; animation-delay:0s; --z:20px; }
.hv-card.c2{ top:38%; left:52%; width:210px; animation-delay:1.2s; --z:130px; }
.hv-card.c3{ bottom:8%; left:12%; width:250px; animation-delay:2.1s; --z:75px; }
.hv-card.c4{ top:2%; right:0%; width:130px; padding:14px; animation-delay:0.6s; --z:-60px; }
@keyframes float{
  0%,100%{ transform:translate3d(0,0,var(--z,0px)) rotate(0deg); }
  50%{ transform:translate3d(0,-10px,var(--z,0px)) rotate(-0.5deg); }
}
.hv-card .dot-row{ display:flex; gap:6px; margin-bottom:12px; }
.hv-card .dot-row span{ width:8px; height:8px; border-radius:50%; background:var(--border-strong); }
.hv-card .code-line{ height:8px; border-radius:3px; background:var(--surface-2); margin-bottom:8px; }
.hv-card .code-line.short{ width:55%; }
.hv-card .code-line.grad{ background:var(--grad-primary); opacity:.85; }
.hv-card .ring{
  width:74px; height:74px; border-radius:50%;
  border:3px solid var(--surface-2);
  border-top-color:var(--c-indigo); border-right-color:var(--c-magenta);
  margin:0 auto; animation:spin 3.4s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.hv-card .metric{ font-family:var(--font-display); font-size:1.8rem; color:var(--heading); }
.hv-card .bars{ display:flex; align-items:flex-end; gap:6px; height:46px; }
.hv-card .bars i{ flex:1; border-radius:3px 3px 0 0; background:var(--grad-primary); opacity:.9; }
.hv-node{
  position:absolute; width:10px; height:10px; border-radius:50%;
  background:var(--c-indigo); box-shadow:0 0 0 5px rgba(77,74,220,0.14);
  animation:pulse 2.6s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{ opacity:.5; transform:scale(1); } 50%{ opacity:1; transform:scale(1.4); } }
.hv-connector{ position:absolute; z-index:0; }

.scroll-cue{
  position:absolute; bottom:34px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  color:var(--text-dim); font-size:11px; letter-spacing:.15em; text-transform:uppercase;
}
.scroll-cue .line{ width:1px; height:40px; background:linear-gradient(var(--c-indigo), transparent); animation:scrollcue 2s ease-in-out infinite; }
@keyframes scrollcue{ 0%{ transform:scaleY(0); transform-origin:top; } 50%{ transform:scaleY(1); transform-origin:top; } 51%{ transform-origin:bottom; } 100%{ transform:scaleY(0); transform-origin:bottom; } }

@media (max-width:980px){
  .hero .container{ grid-template-columns:1fr; }
  .hero-visual{ height:420px; order:-1; }
  .hero{ padding:140px 0 70px; }
}

/* ===================== MARQUEE / LOGOS STRIP ===================== */
.marquee-strip{ background:var(--bg-alt); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:26px 0; overflow:hidden; }
.marquee-track{ display:flex; gap:64px; width:max-content; animation:marquee 28s linear infinite; }
.marquee-track span{ font-family:var(--font-display); font-size:14px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-dim); white-space:nowrap; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
[dir="rtl"] .marquee-track{ animation-name:marquee-rtl; }
@keyframes marquee-rtl{ from{ transform:translateX(0); } to{ transform:translateX(50%); } }

/* ===================== SERVICES ===================== */
.services{ background:var(--bg); }
.service-row{
  position:relative;
  border-top:1px solid var(--border);
  padding:40px 0 40px 20px;
  display:grid; grid-template-columns:90px 1.1fr 1.4fr auto; gap:32px; align-items:center;
  transition:background .35s ease, padding-inline-start .35s ease;
}
.services-list .service-row:last-child{ border-bottom:1px solid var(--border); }
.service-row:hover{ background:var(--bg-alt); padding-inline-start:32px; }
.service-row::before{
  content:""; position:absolute; inset-inline-start:0; top:0; bottom:0; width:3px;
  background:var(--grad-primary); transform:scaleY(0); transform-origin:top; transition:transform .35s ease;
}
.service-row:hover::before{ transform:scaleY(1); }
.service-index{ font-family:var(--font-display); font-size:14px; color:var(--text-dim); }
.service-name{ display:flex; align-items:center; gap:16px; }
.service-name .ic{
  width:46px; height:46px; clip-path:var(--clip-hex);
  background-image:linear-gradient(155deg, rgba(255,255,255,0.85), rgba(20,20,50,0.05));
  box-shadow:inset 1px 1px 0 rgba(255,255,255,0.9), inset -1px -2px 2px rgba(20,20,50,0.10);

  display:flex; align-items:center; justify-content:center;
  background:var(--c-indigo-tint); border:1px solid var(--border);
  color:var(--c-indigo); font-size:20px;
  flex:0 0 auto;
}
.service-name h3{ font-size:1.3rem; margin:0; }
.service-tags{ display:flex; flex-wrap:wrap; gap:8px; }
.service-tags span{
  font-size:.76rem; padding:6px 12px; border-radius:20px;
  border:1px solid var(--border-strong); color:var(--text-dim);
}
.service-arrow{
  width:44px; height:44px; border-radius:50%;
  border:1px solid var(--border-strong);
  display:flex; align-items:center; justify-content:center;
  color:var(--heading); font-size:16px;
  transition:all .3s ease;
}
.service-row:hover .service-arrow{ background:var(--grad-primary); border-color:transparent; transform:rotate(45deg); color:#fff; }
[dir="rtl"] .service-row:hover .service-arrow{ transform:rotate(-45deg); }
.service-desc{ color:var(--text-dim); font-size:.95rem; max-width:520px; grid-column:2 / 4; margin-top:-8px; display:none; }
@media (max-width:900px){
  .service-row{ grid-template-columns:50px 1fr auto; }
  .service-tags{ display:none; }
}

/* ===================== WHY CODERATIK ===================== */
.why{ background:var(--bg-alt); }
.why-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:16px; }
/* --- card as a real 3D body: front surface, extruded back plate, and content
       floating above the surface as three separate layers inside one preserve-3d
       space. Nothing here is a shadow trick — the layers genuinely sit at
       different depths, so tilting reveals the card's thickness. --- */
.why-item{
  grid-column:span 2;
  position:relative;
  perspective:1150px;
  /* light source is fixed at top-left for the whole page; --sx/--sy are nudged
     from the tilt in JS so the cast shadow swings opposite the rotation */
  filter:drop-shadow(calc(6px + var(--sx,0px)) calc(10px + var(--sy,0px)) 18px rgba(20,20,50,0.10));
  transition:filter .35s ease;
}
.why-item:nth-child(1){ grid-column:span 4; }
.why-item:nth-child(4){ grid-column:span 3; }
.why-item:nth-child(5){ grid-column:span 3; }
.why-item:nth-child(6){ grid-column:span 6; }
.why-item:hover{
  filter:drop-shadow(calc(10px + var(--sx,0px)) calc(20px + var(--sy,0px)) 34px rgba(20,20,50,0.16));
}
/* invisible hit-surface pinned to the untransformed grid cell: the card tilts
   underneath it, so hover state never flickers at the edges. These cards hold
   no links, so capturing the pointer here costs nothing. */
.why-item::after{ content:""; position:absolute; inset:-6px; z-index:4; }

.card3d-body{
  position:relative;
  transform-style:preserve-3d;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate3d(0,var(--lift,0px),var(--pop,0px));
  transition:transform .4s cubic-bezier(.16,.84,.44,1);
  height:100%;
}
.why-item:hover .card3d-body{ --lift:0px; --pop:16px; }

/* front surface */
.card3d-face{
  position:absolute; inset:0; z-index:0;
  background-color:#FFFFFF;
  background-image:radial-gradient(420px circle at var(--gx,50%) var(--gy,-20%), rgba(77,74,220,0.13), transparent 62%);
  border:1px solid var(--border);
  clip-path:var(--clip-card);
  transition:box-shadow .35s ease, border-color .35s ease;
}
[dir="rtl"] .card3d-face{ clip-path:var(--clip-card-rtl); }
.why-item:hover .card3d-face{ border-color:transparent; box-shadow:0 0 0 1px var(--c-indigo) inset; }

/* extruded back plate — this is the card's actual thickness */
.card3d-edge{
  position:absolute; inset:0; z-index:-1;
  transform:translateZ(-16px);
  background:linear-gradient(165deg, #E6E5F6, #D8D7EE);
  clip-path:var(--clip-card);
}
[dir="rtl"] .card3d-edge{ clip-path:var(--clip-card-rtl); }

/* content floating above the surface */
.card3d-content{
  position:relative; z-index:1;
  padding:38px 32px;
  transform:translateZ(26px);
}
.why-item:nth-child(6) .card3d-content{ display:flex; align-items:flex-end; gap:40px; }
.why-item:nth-child(6) .num{ margin-bottom:0; }

.why-item .num{ font-family:var(--font-display); font-size:.8rem; color:var(--c-indigo); letter-spacing:.1em; margin-bottom:22px; display:block; }
.why-item h3{ font-size:1.34rem; margin-bottom:12px; letter-spacing:-0.02em; transform:translateZ(12px); }
.why-item:nth-child(1) h3{ font-size:1.7rem; max-width:70%; }
.why-item p{ color:var(--text-dim); font-size:.97rem; margin:0; max-width:440px; }

/* diagonal stroke tracing the cut corner, lifted clear of the surface */
.card3d-body::before{
  content:""; position:absolute; z-index:3; pointer-events:none;
  top:56px; inset-inline-start:0; width:62px; height:3px;
  background:var(--grad-primary);
  transform-origin:0 50%;
  transform:translateZ(30px) rotate(-45deg) scaleX(0);
  transition:transform .45s cubic-bezier(.16,.84,.44,1);
}
[dir="rtl"] .card3d-body::before{ transform-origin:100% 50%; transform:translateZ(30px) rotate(45deg) scaleX(0); }
.why-item:hover .card3d-body::before{ transform:translateZ(30px) rotate(-45deg) scaleX(1); }
[dir="rtl"] .why-item:hover .card3d-body::before{ transform:translateZ(30px) rotate(45deg) scaleX(1); }

@media (max-width:900px){
  .why-grid{ grid-template-columns:1fr; gap:14px; }
  .why-item, .why-item:nth-child(1), .why-item:nth-child(4), .why-item:nth-child(5), .why-item:nth-child(6){ grid-column:span 1; }
  .why-item:nth-child(1) h3{ max-width:100%; }
  .why-item:nth-child(6) .card3d-content{ flex-direction:column; align-items:flex-start; gap:8px; }
}

/* ===================== PROCESS ===================== */
.process{ background:var(--bg); }
.process-wrap{ display:grid; grid-template-columns:60px 1fr; gap:0 34px; }
.process-track{ position:relative; }
.process-track .bar-bg{ position:absolute; top:6px; bottom:6px; left:50%; width:2px; background:var(--border); transform:translateX(-50%); }
.process-track .bar-fill{ position:absolute; top:6px; left:50%; width:2px; background:var(--grad-primary); transform:translateX(-50%); height:0%; transition:height .2s linear; }
.process-steps{ display:flex; flex-direction:column; gap:64px; }
.process-step{ position:relative; padding-block:4px; }
.process-step::before{
  content:counter(step-count, decimal-leading-zero);
  counter-increment:step-count;
  position:absolute; z-index:0; pointer-events:none;
  top:-34px; inset-inline-end:0;
  font-family:var(--font-display); font-weight:700;
  font-size:5.4rem; letter-spacing:-0.03em;
  color:transparent; -webkit-text-stroke:1px rgba(20,20,35,0.07);
  line-height:1; display:none;
}
.process-steps{ counter-reset:step-count; }
@media (min-width:900px){ .process-step::before{ display:block; } }
.process-step > *{ position:relative; z-index:1; }
.process-step .step-dot{
  position:absolute; top:8px; inset-inline-start:-49px;
  width:14px; height:14px; border-radius:50%;
  background:var(--bg); border:2px solid var(--border-strong);
  transition:all .35s ease;
}
.process-step.active .step-dot{ border-color:var(--c-indigo); background:var(--c-indigo); box-shadow:0 0 0 5px rgba(77,74,220,0.16); }
.process-step .step-no{ font-family:var(--font-display); color:var(--text-dim); font-size:.85rem; letter-spacing:.1em; margin-bottom:10px; display:block; }
.process-step h3{ font-size:1.6rem; margin-bottom:10px; }
.process-step p{ color:var(--text-dim); max-width:520px; margin:0; }
.process-step.active h3{ background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent; }
@media (max-width:700px){ .process-wrap{ grid-template-columns:30px 1fr; } .process-step .step-dot{ inset-inline-start:-25px; } }

/* ===================== TECHNOLOGY ===================== */
.tech{ background:var(--bg-alt); overflow:hidden; }
.tech-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border); border:1px solid var(--border); }
.tech-card{
  border:none; clip-path:var(--clip-card-sm);
  padding:34px 30px; background:var(--bg-alt);
  transition:background .35s ease, transform .35s ease, box-shadow .35s ease;
}
[dir="rtl"] .tech-card{ clip-path:var(--clip-card-sm-rtl); }
.tech-card:hover{ background:#FFFFFF; }
.tech-card h3{ font-size:1.1rem; margin-bottom:18px; display:flex; align-items:center; gap:12px; }
.tech-card h3 .ic{
  width:38px; height:38px; clip-path:var(--clip-hex);
  background-image:linear-gradient(155deg, rgba(255,255,255,0.85), rgba(20,20,50,0.05));
  box-shadow:inset 1px 1px 0 rgba(255,255,255,0.9), inset -1px -2px 2px rgba(20,20,50,0.10);

  display:flex; align-items:center; justify-content:center;
  background:var(--c-indigo-tint); color:var(--c-indigo); font-size:16px;
  flex:0 0 auto;
}
.tech-pill-row{ display:flex; flex-wrap:wrap; gap:8px; }
.tech-pill{
  font-size:.8rem; padding:7px 13px; border-radius:8px;
  background:var(--bg-alt); border:1px solid var(--border);
  color:var(--text);
}
@media (max-width:900px){ .tech-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .tech-grid{ grid-template-columns:1fr; } }

/* -------- orbital mode (desktop): the stack as a connected constellation -------- */
.tech-grid.orbit-mode{
  position:relative; display:block;
  background:none; border:none;
  height:680px; margin-top:6px;
  perspective:1500px; perspective-origin:50% 50%;
  transform-style:preserve-3d;
  transition:transform .5s cubic-bezier(.16,.84,.44,1);
}
/* two concentric dashed orbital rings behind the constellation — a quiet spatial
   context that reads as an architecture / systems diagram rather than a floating
   grid of tiles. Sized in em of the card radius so they hug the actual layout. */
.tech-grid.orbit-mode::before,
.tech-grid.orbit-mode::after{
  content:""; position:absolute; top:50%; left:50%;
  border-radius:50%; border:1px dashed rgba(77,74,220,0.14);
  transform:translate(-50%,-50%);
  pointer-events:none;
}
.tech-grid.orbit-mode::before{ width:520px; height:520px; }
.tech-grid.orbit-mode::after { width:340px; height:340px; border-style:dotted; border-color:rgba(77,74,220,0.11); }
@media (max-width:1300px){
  .tech-grid.orbit-mode{ height:620px; }
  .tech-grid.orbit-mode::before{ width:460px; height:460px; }
  .tech-grid.orbit-mode::after { width:300px; height:300px; }
}

.tech-grid.orbit-mode .tech-card{
  counter-increment:tech-count;
  position:absolute; top:50%; left:50%; width:230px;
  background:#FFFFFF; border:1px solid var(--border);
  clip-path:var(--clip-card); filter:var(--drop-sm);
  padding:22px 22px;
  z-index:2;
  transform:translate(-50%,-50%) translate3d(var(--tx,0px),var(--ty,0px),var(--tz,0px));
  transition:transform .5s cubic-bezier(.16,.84,.44,1), filter .35s ease, background .35s ease;
}
.tech-grid.orbit-mode{ counter-reset:tech-count; }
/* subtle numbered corner marker on every card — turns a plain tile into
   something that reads as one item in an ordered system */
.tech-grid.orbit-mode .tech-card::before{
  content:"0" counter(tech-count);
  position:absolute; top:12px; inset-inline-end:18px;
  font-family:var(--font-display); font-weight:600;
  font-size:.68rem; letter-spacing:.14em;
  color:var(--c-indigo); opacity:.4;
}
[dir="rtl"] .tech-grid.orbit-mode .tech-card{ clip-path:var(--clip-card-rtl); }
.tech-grid.orbit-mode .tech-card:hover{
  z-index:5; filter:drop-shadow(0 0 0 1px rgba(77,74,220,0.10)) drop-shadow(0 26px 46px -18px rgba(77,74,220,0.42));
  transform:translate(-50%,-50%) translate3d(var(--tx),var(--ty),calc(var(--tz,0px) + 90px)) scale(1.08) !important;
}
.tech-grid.orbit-mode .tech-card:hover::before{ opacity:.85; }
.tech-grid.orbit-mode .tech-card h3{
  font-size:1rem; margin-bottom:16px;
  display:flex; align-items:center; gap:12px;
  letter-spacing:-0.01em;
}
.tech-grid.orbit-mode .tech-pill-row{ gap:6px; }
.tech-grid.orbit-mode .tech-pill{
  font-size:.72rem; padding:5px 10px; border-radius:6px;
  background:var(--bg-alt); border:1px solid var(--border);
  color:var(--text); letter-spacing:.005em;
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.tech-grid.orbit-mode .tech-card:hover .tech-pill{
  background:var(--c-indigo-tint); border-color:transparent; color:var(--c-indigo);
}

/* -------- HUB: focal anchor with layered halo rings -------- */
.tech-hub{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:156px; height:156px; border-radius:50%; z-index:3;
  background:radial-gradient(circle at 32% 28%, #706FE3 0%, #4D4ADC 55%, #3B38B4 100%);
  display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:4px;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.25),
    inset 0 -8px 20px rgba(20,10,90,0.35),
    0 32px 60px -18px rgba(77,74,220,0.6);
}
/* three expanding halo rings — pulse outward in staggered phases for a subtle
   "living centre" feeling that doesn't distract from the cards */
.tech-hub::before,
.tech-hub::after,
.tech-hub > .hub-halo{
  content:""; position:absolute; inset:-14px;
  border-radius:50%; border:1px solid rgba(77,74,220,0.28);
  pointer-events:none;
  animation:hubHalo 4s ease-out infinite;
}
.tech-hub::after{ inset:-24px; animation-delay:-1.3s; border-color:rgba(77,74,220,0.20); }
.tech-hub > .hub-halo{ inset:-34px; animation-delay:-2.6s; border-color:rgba(77,74,220,0.14); }
@keyframes hubHalo{
  0%   { transform:scale(0.92); opacity:0.7; }
  70%  { transform:scale(1.18); opacity:0;   }
  100% { transform:scale(1.18); opacity:0;   }
}
.tech-hub span{
  font-family:var(--font-display); font-weight:700;
  color:#fff; font-size:1.02rem; letter-spacing:-0.02em;
  position:relative; z-index:2;
}
.tech-hub small{
  color:rgba(255,255,255,0.72); font-size:.62rem;
  letter-spacing:.12em; text-transform:uppercase;
  position:relative; z-index:2;
}
/* thin outer separator ring — cleaner reading of the sphere's rim */
.tech-hub::before{
  border-color:rgba(77,74,220,0.28);
}

/* -------- LINES: gradient with a light travelling pulse -------- */
.tech-line{
  position:absolute; top:50%; left:50%; height:1.5px;
  background:linear-gradient(90deg, rgba(77,74,220,0.45), rgba(77,74,220,0.08));
  transform-origin:left center; z-index:1;
  overflow:visible;
  transition:background .3s ease, height .3s ease;
}
.tech-line::after{
  content:""; position:absolute; top:50%; left:0;
  width:5px; height:5px; border-radius:50%;
  background:#706FE3;
  box-shadow:0 0 10px rgba(112,111,227,0.85);
  transform:translate(-50%,-50%);
  animation:techPulse 3.4s cubic-bezier(.6,.05,.6,.95) infinite;
  opacity:.85;
}
.tech-line:nth-child(1)::after{ animation-delay:-0.0s; }
.tech-line:nth-child(2)::after{ animation-delay:-0.6s; }
.tech-line:nth-child(3)::after{ animation-delay:-1.2s; }
.tech-line:nth-child(4)::after{ animation-delay:-1.8s; }
.tech-line:nth-child(5)::after{ animation-delay:-2.4s; }
.tech-line:nth-child(6)::after{ animation-delay:-3.0s; }
@keyframes techPulse{
  0%   { left:8%;  opacity:0; transform:translate(-50%,-50%) scale(0.6); }
  15%  { opacity:1; transform:translate(-50%,-50%) scale(1); }
  85%  { opacity:1; transform:translate(-50%,-50%) scale(1); }
  100% { left:96%; opacity:0; transform:translate(-50%,-50%) scale(0.6); }
}
.tech-line.active{
  height:2px;
  background:linear-gradient(90deg, rgba(77,74,220,0.8), rgba(77,74,220,0.18));
}
.tech-line.active::after{ animation-duration:1.8s; box-shadow:0 0 14px rgba(112,111,227,1); }

@media (prefers-reduced-motion: reduce){
  .tech-hub::before, .tech-hub::after, .tech-hub > .hub-halo{ animation:none; }
  .tech-line::after{ animation:none; opacity:0; }
}

/* ===================== PORTFOLIO ===================== */
.portfolio{ background:var(--bg); }
.portfolio-list{ display:flex; flex-direction:column; }
.pf-item{
  border-top:1px solid var(--border);
  padding:44px 0; display:grid; grid-template-columns:1.1fr 1fr; gap:40px; align-items:center;
  position:relative;
  perspective:1400px;
}
.portfolio-list .pf-item:last-child{ border-bottom:1px solid var(--border); }
.pf-info .pf-index{ font-family:var(--font-display); color:var(--text-dim); font-size:.85rem; margin-bottom:14px; display:block; }
.pf-info h3{ font-size:clamp(1.8rem,3vw,2.4rem); letter-spacing:-0.02em; margin-bottom:10px; }
.pf-info .pf-industry{ color:var(--c-indigo); font-size:.85rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; margin-bottom:16px; display:block; }
.pf-info p{ color:var(--text-dim); max-width:460px; margin-bottom:20px; }
.pf-meta{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:22px; }
.pf-meta span{ font-size:.76rem; padding:6px 12px; border-radius:20px; border:1px solid var(--border-strong); color:var(--text-dim); }
.pf-results{ display:flex; gap:28px; margin-bottom:24px; }
.pf-results div b{ display:block; font-family:var(--font-display); font-size:1.3rem; color:var(--heading); }
.pf-results div span{ font-size:.76rem; color:var(--text-dim); }
/* the visual is a solid body: front face (the inner), extruded back plate
   (::before) and its own preserve-3d space, so the tilt exposes real thickness */
.pf-visual{
  position:relative;
  aspect-ratio:4/3;
  transform-style:preserve-3d;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate3d(0,var(--lift,0px),var(--pop,0px));
  transition:transform .4s cubic-bezier(.16,.84,.44,1);
}
.pf-item:hover .pf-visual{ --lift:0px; --pop:20px; }
.pf-visual::before{
  content:""; position:absolute; inset:0; z-index:0;
  transform:translateZ(-20px);
  background:linear-gradient(165deg, #E4E3F5, #D4D3EC);
  clip-path:var(--clip-card);
}
[dir="rtl"] .pf-visual::before{ clip-path:var(--clip-card-rtl); }
.pf-visual-inner{ clip-path:var(--clip-card); border:1px solid var(--border); }
[dir="rtl"] .pf-visual-inner{ clip-path:var(--clip-card-rtl); }
.pf-visual-inner{
  width:100%; height:100%;
  /* the per-item --pf-plate holds a subtle brand-appropriate tint; the dot grid
     stays as an atmospheric texture behind the logo */
  background:
    radial-gradient(rgba(20,20,35,0.05) 1px, transparent 1.4px) 0 0/22px 22px,
    var(--pf-plate, #F7F7FB);
  display:flex; align-items:center; justify-content:center;
  transition:transform .5s cubic-bezier(.16,.84,.44,1);
  transform-style:preserve-3d;
  position:relative;
  overflow:hidden;
}
/* soft brand halo behind the logo — same accent as the top-left light source */
.pf-visual-inner::before{
  content:""; position:absolute; width:70%; height:70%; border-radius:50%;
  top:50%; left:50%; transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(77,74,220,0.10), transparent 70%);
  opacity:.9; filter:blur(30px);
}
/* real client logo sitting above the plate; drop-shadow gives it a slight lift
   without introducing a rectangular shadow behind transparent artwork */
.pf-visual-inner .pf-logo{
  position:relative; z-index:1;
  max-width:64%; max-height:68%;
  width:auto; height:auto;
  object-fit:contain;
  /* JPG logos come with their own white background — multiply lets that white
     dissolve into the tinted plate so each logo reads as if it lives on the
     plate itself, not on a second white card */
  mix-blend-mode:multiply;
  filter:drop-shadow(0 12px 28px rgba(20,20,50,0.12));
  transition:transform .5s cubic-bezier(.16,.84,.44,1);
}
.pf-item:hover .pf-visual-inner{ transform:scale(1.02); }
.pf-item:hover .pf-logo{ transform:scale(1.04) translateZ(0); }
@media (max-width:900px){ .pf-item{ grid-template-columns:1fr; } .pf-visual{ order:-1; } }

/* ===================== PORTFOLIO — LOGO MARQUEE =====================
   Compact strip of client logos moving through the section. Same technique as
   the industries marquee: horizontal mask fades the edges, the track is
   duplicated inline for a seamless loop, and pause-on-hover lets the viewer
   focus on any single logo. RTL flips the animation direction so the strip
   reads with the language. */
.pf-marquee{
  position:relative;
  overflow:hidden;
  padding:8px 0;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.pf-track{
  display:flex; gap:22px; width:max-content;
  animation:pfScroll 42s linear infinite;
}
/* RTL flex lays tiles out right-to-left, extending past the container's left
   edge — a raw `reverse` would drift the strip off-screen. Use a dedicated
   keyframe that moves the track toward +X instead, mirroring LTR visually. */
[dir="rtl"] .pf-track{ animation-name:pfScrollRtl; }
.pf-marquee:hover .pf-track{ animation-play-state:paused; }
@keyframes pfScroll{
  from{ transform:translateX(0); }
  to  { transform:translateX(-50%); }
}
@keyframes pfScrollRtl{
  from{ transform:translateX(0); }
  to  { transform:translateX(50%); }
}
.pf-tile{
  flex:0 0 auto;
  width:clamp(150px, 15vw, 200px);
  aspect-ratio:5 / 4;
  background:
    radial-gradient(rgba(20,20,35,0.05) 1px, transparent 1.4px) 0 0/16px 16px,
    var(--pf-plate, #F7F7FB);
  border:1px solid var(--border);
  clip-path:var(--clip-card-sm);
  display:flex; align-items:center; justify-content:center;
  padding:16px;
  transition:transform .35s cubic-bezier(.16,.84,.44,1), filter .35s ease;
  filter:var(--drop-sm);
}
[dir="rtl"] .pf-tile{ clip-path:var(--clip-card-sm-rtl); }
.pf-tile img{
  max-width:100%; max-height:100%;
  width:auto; height:auto;
  object-fit:contain;
  mix-blend-mode:multiply;
  transition:transform .35s ease;
}
.pf-tile:hover{ transform:translateY(-4px); filter:var(--drop-md); }
.pf-tile:hover img{ transform:scale(1.06); }

@media (prefers-reduced-motion: reduce){
  .pf-track{ animation:none; flex-wrap:wrap; width:auto; justify-content:center; }
  .pf-marquee{ -webkit-mask-image:none; mask-image:none; }
  /* the duplicated tiles are only needed for the loop; hide them in the
     static fallback so nothing is visually repeated */
  .pf-track .pf-tile[aria-hidden="true"]{ display:none; }
}
@media (max-width:640px){ .pf-visual-inner .pf-logo{ max-width:60%; max-height:64%; } }

/* ===================== INDUSTRIES ===================== */
.industries{ background:var(--bg-alt); }
.industry-orbit{
  display:flex; flex-direction:column; gap:16px;
  overflow:hidden; max-width:100%;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.industry-row{
  display:flex; gap:14px; width:max-content;
  animation:industryScroll 34s linear infinite;
}
.industry-row.row-2{ animation-name:industryScrollRev; animation-duration:40s; }
.industry-orbit:hover .industry-row{ animation-play-state:paused; }
@keyframes industryScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@keyframes industryScrollRev{ from{ transform:translateX(-50%); } to{ transform:translateX(0); } }
[dir="rtl"] .industry-row{ animation-direction:reverse; }
.industry-chip{
  font-family:var(--font-display); font-size:.95rem; font-weight:500;
  padding:14px 24px; border-radius:30px;
  border:1px solid var(--border-strong);
  background:#FFFFFF;
  color:var(--text);
  white-space:nowrap;
  transition:all .3s ease;
}
.industry-chip{ box-shadow:inset 0 1px 0 rgba(255,255,255,0.9), 0 2px 0 rgba(20,20,50,0.05); }
.industry-chip:hover{
  background:var(--grad-primary); color:#fff; border-color:transparent;
  transform:translateY(-3px) scale(1.05);
  box-shadow:var(--shadow-sm);
}
@media (prefers-reduced-motion: reduce){
  .industry-row{ animation:none; flex-wrap:wrap; width:auto; }
  .industry-orbit{ -webkit-mask-image:none; mask-image:none; }
}

/* ===================== STATS ===================== */
.stats{ background:var(--bg); }
.stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); }
.stat-box{
  position:relative;
  background:none; padding:8px 36px 8px 0; text-align:start;
  padding-inline-start:36px;
  transition:transform .3s cubic-bezier(.16,.84,.44,1); will-change:transform;
}
/* angled divider instead of a plain vertical rule — keeps the "no flat edges" language consistent */
.stat-box::before{
  content:""; position:absolute; inset-inline-start:0; top:4px; bottom:4px; width:1px;
  background:var(--border); transform:skewX(-14deg); transform-origin:bottom;
}
[dir="rtl"] .stat-box::before{ transform:skewX(14deg); }
.stat-box:first-child::before{ display:none; }
.stat-box .num{ font-family:var(--font-display); font-size:clamp(3rem,6vw,5rem); color:var(--heading); letter-spacing:-0.03em; line-height:1; }
.stat-box .num span{ background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent; }
.stat-box .lbl{ color:var(--text-dim); font-size:.85rem; margin-top:14px; letter-spacing:.03em; }
@media (max-width:800px){
  .stats-grid{ grid-template-columns:1fr 1fr; row-gap:40px; }
  .stat-box:nth-child(3){ padding-inline-start:0; }
  .stat-box:nth-child(3)::before{ display:none; }
}
@media (max-width:520px){
  .stats-grid{ grid-template-columns:1fr; row-gap:32px; }
  .stat-box{ padding-inline-start:0 !important; }
  .stat-box::before{ display:none !important; }
}

/* ===================== TESTIMONIALS ===================== */
.testimonials{
  background:var(--bg-alt); position:relative; overflow:hidden;
}
.testimonials::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  width:420px; height:420px; border-radius:50%;
  top:-140px; inset-inline-start:6%;
  background:radial-gradient(circle, rgba(77,74,220,0.12), transparent 70%);
  filter:blur(20px);
}
.testimonials::after{
  content:""; position:absolute; z-index:0; pointer-events:none;
  width:360px; height:360px; border-radius:50%;
  bottom:-120px; inset-inline-end:8%;
  background:radial-gradient(circle, rgba(112,111,227,0.12), transparent 70%);
  filter:blur(20px);
}
.testimonials .container{ position:relative; z-index:1; }
.tm-wrap{
  position:relative; max-width:860px; margin:0 auto; text-align:center;
  background:rgba(255,255,255,0.6);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  border:1px solid rgba(255,255,255,0.9);
  clip-path:var(--clip-card);
  padding:clamp(44px,7vw,80px) clamp(24px,6vw,64px);
  filter:var(--drop-md);
}
[dir="rtl"] .tm-wrap{ clip-path:var(--clip-card-rtl); }
.tm-wrap::before{
  content:"\201C"; position:absolute; top:6px; inset-inline-start:28px;
  font-family:var(--font-display); font-size:7rem; line-height:1;
  color:var(--c-indigo-tint); font-weight:700; z-index:0;
}
[dir="rtl"] .tm-wrap::before{ content:"\201D"; inset-inline-start:auto; inset-inline-end:28px; }
.tm-slide{ display:none; position:relative; z-index:1; }
.tm-slide.active{ display:block; animation:fadeIn .6s ease; }
@keyframes fadeIn{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:translateY(0);} }
.tm-quote{ font-family:var(--font-display); font-size:clamp(1.4rem,2.8vw,2.1rem); color:var(--heading); font-weight:500; line-height:1.45; letter-spacing:-0.01em; margin-bottom:32px; }
.tm-person{ display:flex; align-items:center; justify-content:center; gap:14px; }
.tm-avatar{ width:48px; height:48px; border-radius:50%; background:var(--grad-primary); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; color:#fff; }
.tm-person div{ text-align:start; }
.tm-person b{ display:block; color:var(--heading); font-size:.95rem; }
.tm-person span{ font-size:.82rem; color:var(--text-dim); }
.tm-nav{ display:flex; justify-content:center; gap:10px; margin-top:40px; }
.tm-dot{ width:8px; height:8px; border-radius:50%; background:var(--border-strong); transition:all .3s ease; }
.tm-dot.active{ width:26px; border-radius:5px; background:var(--grad-primary); }

/* ===================== FAQ ===================== */
.faq{ background:var(--bg); }
.faq-list{ max-width:900px; counter-reset:faq-count; margin-inline-start:clamp(0px, 6vw, 90px); }
.faq-item{
  position:relative; border-top:1px solid var(--border);
  padding-inline-start:64px;
  transition:background .3s ease;
}
.faq-list .faq-item:last-child{ border-bottom:1px solid var(--border); }
.faq-item::before{
  counter-increment:faq-count;
  content:counter(faq-count, decimal-leading-zero);
  position:absolute; inset-inline-start:0; top:28px;
  font-family:var(--font-display); font-weight:700; font-size:.82rem;
  color:var(--text-dim); letter-spacing:.06em;
  transition:color .3s ease;
}
.faq-item.open::before{ color:var(--c-indigo); }
.faq-q{
  width:100%; background:none; border:none; text-align:start;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:26px 4px; color:var(--heading); font-family:var(--font-display); font-size:1.12rem; font-weight:600;
  letter-spacing:-0.01em;
}
.faq-q .plus{ position:relative; width:20px; height:20px; flex:0 0 auto; }
.faq-q .plus::before, .faq-q .plus::after{ content:""; position:absolute; background:var(--heading); top:50%; left:50%; transform:translate(-50%,-50%); transition:transform .3s ease; }
.faq-q .plus::before{ width:14px; height:2px; }
.faq-q .plus::after{ width:2px; height:14px; }
.faq-item.open .faq-q .plus::after{ transform:translate(-50%,-50%) rotate(90deg) scaleY(0); }
.faq-item.open .faq-q{ color:var(--c-indigo); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .4s cubic-bezier(.16,.84,.44,1); }
.faq-a p{ color:var(--text-dim); padding:0 4px 26px; margin:0; max-width:640px; }

/* ===================== FINAL CTA ===================== */
.final-cta{
  position:relative; overflow:hidden;
  background:var(--bg);
}
.final-cta .cta-panel{
  position:relative; clip-path:var(--clip-card);
  padding:clamp(56px,8vw,110px) clamp(24px,6vw,60px);
  text-align:center;
  background:linear-gradient(160deg, #FBFAFF 0%, #F2F1FC 60%);
  border:1px solid var(--border);
}
[dir="rtl"] .final-cta .cta-panel{ clip-path:var(--clip-card-rtl); }
.cta-panel::before{
  content:""; position:absolute; inset:-40%;
  background:conic-gradient(from 0deg, rgba(77,74,220,0.12), rgba(112,111,227,0.08), rgba(147,147,235,0.1), rgba(77,74,220,0.12));
  animation:spin 14s linear infinite;
  filter:blur(80px);
  opacity:.7;
}
.cta-panel > *{ position:relative; z-index:1; }
.cta-panel h2{ font-size:clamp(2.4rem,6vw,4.4rem); letter-spacing:-0.03em; max-width:800px; margin:0 auto 22px; }
.cta-panel p{ color:var(--text); max-width:560px; margin:0 auto 42px; font-size:1.05rem; }
.cta-btn-row{ display:flex; justify-content:center; gap:22px; flex-wrap:wrap; }

/* ===================== CONTACT ===================== */
.contact{ background:var(--bg-alt); }
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; }
.contact-info h2{ font-size:clamp(1.9rem,3.6vw,2.6rem); margin-bottom:20px; }
.contact-info p{ color:var(--text-dim); margin-bottom:36px; max-width:440px; }
.contact-detail{ display:flex; gap:16px; padding:16px 0; border-top:1px solid var(--border); }
.contact-info .contact-detail:last-of-type{ border-bottom:1px solid var(--border); }
.contact-detail .ic{ width:42px; height:42px; clip-path:var(--clip-hex); background:#FFFFFF; box-shadow:inset 1px 1px 0 rgba(255,255,255,0.9), inset -1px -2px 3px rgba(20,20,50,0.12); border:1px solid var(--border-strong); display:flex; align-items:center; justify-content:center; color:var(--c-indigo); flex:0 0 auto; }
.contact-detail b{ display:block; color:var(--heading); font-size:.92rem; }
.contact-detail span{ color:var(--text-dim); font-size:.88rem; }
.contact-socials{ display:flex; gap:10px; margin-top:28px; }
.contact-socials a{ width:42px; height:42px; clip-path:var(--clip-hex); box-shadow:inset 1px 1px 0 rgba(255,255,255,0.9), inset -1px -2px 3px rgba(20,20,50,0.12); border:1px solid var(--border-strong); background:#FFFFFF; display:flex; align-items:center; justify-content:center; color:var(--text); transition:all .3s ease; }
.contact-socials a:hover{ background:var(--grad-primary); color:#fff; border-color:transparent; }

.ct-form{ background:#FFFFFF; border:1px solid var(--border); filter:var(--drop-sm); clip-path:var(--clip-card); padding:40px; }
[dir="rtl"] .ct-form{ clip-path:var(--clip-card-rtl); }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }

/* -------- floating-label fields -------- */
.field-float{ position:relative; margin-bottom:18px; }
.field-float input, .field-float textarea{
  width:100%; background:var(--bg-alt); border:1px solid var(--border);
  /* asymmetric corners instead of a uniform rounded box — echoes the cut-corner language
     used on cards, while keeping border-radius (not clip-path) so the focus ring below
     never gets clipped */
  border-radius:16px 4px 16px 4px;
  padding:22px 16px 10px; color:var(--heading); font-size:.95rem;
  transition:border-color .25s ease, background .25s ease, box-shadow .25s ease, border-radius .25s ease;
}
[dir="rtl"] .field-float input, [dir="rtl"] .field-float textarea{ border-radius:4px 16px 4px 16px; }
.field-float input:focus, .field-float textarea:focus{
  outline:none; border-color:var(--c-indigo); background:#FFFFFF;
  box-shadow:0 0 0 4px rgba(77,74,220,0.1);
}
.field-float textarea{ min-height:130px; resize:vertical; padding-top:26px; }
.field-float label{
  position:absolute; inset-inline-start:16px; top:20px;
  font-size:.95rem; color:var(--text-dim);
  pointer-events:none; transform-origin:left top;
  transition:transform .22s cubic-bezier(.16,.84,.44,1), color .22s ease, top .22s ease;
}
[dir="rtl"] .field-float label{ transform-origin:right top; }
.field-float input:focus + label,
.field-float input:not(:placeholder-shown) + label,
.field-float textarea:focus + label,
.field-float textarea:not(:placeholder-shown) + label{
  top:8px; font-size:.72rem; color:var(--c-indigo); font-weight:600; letter-spacing:.03em;
}
.field-float input:focus + label, .field-float textarea:focus + label{ color:var(--c-indigo); }

.ct-form .btn{ width:100%; margin-top:6px; }
/* submit loading state */
.btn.btn-loading{ pointer-events:none; }
.btn.btn-loading > *{ opacity:0; }
.btn.btn-loading::after{
  content:""; position:absolute; z-index:2; width:18px; height:18px;
  border-radius:50%; border:2px solid rgba(255,255,255,0.4); border-top-color:#fff;
  animation:btnSpin .7s linear infinite;
}
.btn-outline.btn-loading::after, .btn-ghost.btn-loading::after{ border-color:rgba(77,74,220,0.25); border-top-color:var(--c-indigo); }
@keyframes btnSpin{ to{ transform:rotate(360deg); } }
@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; } .field-row{ grid-template-columns:1fr; } }

/* ===================== FOOTER ===================== */
.ct-footer{
  position:relative; overflow:hidden;
  background:var(--bg-alt); border-top:1px solid var(--border);
  padding:130px 0 34px;
}
/* ambient oversized wordmark echoing the hero watermark — anchors the footer as a deliberate bookend, not an afterthought */
.ct-footer::before{
  content:"CODERATIK";
  position:absolute; z-index:0; pointer-events:none;
  left:50%; bottom:-9%; transform:translateX(-50%);
  width:max-content;
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(4.5rem, 13vw, 12rem);
  letter-spacing:-0.03em;
  color:transparent;
  -webkit-text-stroke:1px rgba(20,20,35,0.045);
  line-height:1;
  user-select:none; white-space:nowrap;
}
[dir="rtl"] .ct-footer::before{ content:"كودورا تيك"; }
.ct-footer .container{ position:relative; z-index:1; }
.footer-top{
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px;
  align-items:start;
  padding-bottom:56px;
}
.footer-brand .ct-logo{ margin-bottom:22px; }
.footer-brand .ct-logo img{ height:38px; }
.footer-brand p{ color:var(--text-dim); max-width:300px; font-size:.94rem; line-height:1.7; }
.footer-col{ position:relative; padding-top:6px; padding-inline-start:32px; }
.footer-col::before{
  content:""; position:absolute; inset-inline-start:0; top:2px; bottom:2px; width:1px;
  background:var(--border); transform:skewX(-14deg); transform-origin:bottom;
}
[dir="rtl"] .footer-col::before{ transform:skewX(14deg); }
.footer-col h6{
  font-family:var(--font-display); font-size:.78rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--heading); margin-bottom:22px;
  position:relative; padding-bottom:14px;
}
.footer-col h6::after{ content:""; position:absolute; inset-inline-start:0; bottom:0; width:22px; height:2px; background:var(--grad-primary); border-radius:2px; }
.footer-col ul li{ margin-bottom:13px; }
.footer-col ul li a{
  position:relative; color:var(--text); font-size:.93rem; transition:color .25s ease;
  background-image:linear-gradient(var(--c-indigo), var(--c-indigo));
  background-repeat:no-repeat; background-position:0 100%; background-size:0% 1px;
  transition:color .25s ease, background-size .35s cubic-bezier(.16,.84,.44,1);
  padding-bottom:1px;
}
.footer-col ul li a:hover{ color:var(--c-indigo); background-size:100% 1px; }
.footer-bottom{
  position:relative;
  border-top:1px solid var(--border); padding-top:28px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  color:var(--text-dim); font-size:.82rem;
}
@media (max-width:900px){
  .footer-top{ grid-template-columns:1fr 1fr; row-gap:44px; }
  .footer-top::before{ display:none; }
  .footer-brand{ grid-column:1 / -1; }
}
@media (max-width:560px){
  .ct-footer{ padding-top:100px; }
  .footer-top{ grid-template-columns:1fr; }
  .footer-bottom{ flex-direction:column; text-align:center; }
}

/* ===================== BACK TO TOP ===================== */
.back-top{
  position:fixed; bottom:28px; inset-inline-end:28px; z-index:500;
  width:48px; height:48px; border-radius:50%;
  background:#FFFFFF; border:1px solid var(--border-strong);
  box-shadow:var(--shadow-sm);
  color:var(--heading);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:all .3s ease;
}
.back-top.show{ opacity:1; visibility:visible; transform:translateY(0); }
.back-top:hover{ background:var(--grad-primary); color:#fff; border-color:transparent; }

/* ===================== PRELOADER ===================== */
.ct-preloader{
  position:fixed; inset:0; z-index:99999; background:var(--bg);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .5s ease, visibility .5s ease;
}
.ct-preloader.done{ opacity:0; visibility:hidden; }
.ct-preloader .mark{ font-family:var(--font-display); font-weight:700; font-size:1.6rem; color:var(--heading); display:flex; align-items:center; gap:10px; }
.ct-preloader .mark .dot{ width:10px; height:10px; border-radius:50%; background:var(--grad-primary); animation:pulse 1s ease-in-out infinite; }

/* ===================== UTILITIES ===================== */
.text-center{ text-align:center; }
.mt-0{ margin-top:0; }
::selection{ background:var(--c-indigo); color:#fff; }