:root{
  --bg:#f4f6fb;
  --bg-2:#e8ecf6;
  --surface:rgba(255,255,255,.78);
  --surface-strong:rgba(255,255,255,.94);
  --line:rgba(15,23,42,.1);
  --line-strong:rgba(15,23,42,.16);
  --text:#0f172a;
  --muted:#475569;
  --muted-2:#64748b;
  --accent:#0284c7;
  --accent-2:#7c3aed;
  --accent-3:#0d9488;
  --success:#0d9488;
  --danger:#e11d48;
  --shadow:0 24px 64px rgba(15,23,42,.08);
  --radius:30px;
  --radius-sm:22px;
  --container:1540px;
  --content:760px;
  --section-space:clamp(6rem,7vw,8.75rem);
  --hero-space:clamp(8rem,11vw,11.5rem);
  --header-h:84px
}
*{box-sizing:border-box}
html{font-size:105%;scroll-behavior:smooth}
body{
  margin:0;
  min-width:320px;
  color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:1.65;
  overflow-x:hidden;
  background:
    radial-gradient(circle at 8% -4%,rgba(56,189,248,.12),transparent 32%),
    radial-gradient(circle at 90% 8%,rgba(96,165,250,.1),transparent 34%),
    radial-gradient(circle at 56% 112%,rgba(34,211,238,.08),transparent 32%),
    linear-gradient(180deg,#f8fafc 0%,#f1f5f9 38%,#eef2ff 100%)
}
body::before,body::after{
  content:"";
  position:fixed;
  inset:auto;
  pointer-events:none;
  z-index:-2;
  border-radius:50%;
  filter:blur(42px);
  mix-blend-mode:multiply;
  opacity:.45;
  will-change:transform,opacity
}
body::before{
  width:34rem;
  height:34rem;
  left:-10rem;
  top:-8rem;
  background:radial-gradient(circle,rgba(56,189,248,.35),rgba(125,211,252,.12) 54%,transparent 72%);
  animation:floatGlowA 20s ease-in-out infinite alternate
}
body::after{
  width:28rem;
  height:28rem;
  right:-9rem;
  top:18rem;
  background:radial-gradient(circle,rgba(96,165,250,.28),rgba(191,219,254,.1) 58%,transparent 74%);
  animation:floatGlowB 22s ease-in-out infinite alternate
}
@keyframes floatGlowA{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(4rem,2rem,0) scale(1.06)}
  100%{transform:translate3d(7rem,5rem,0) scale(.94)}
}
@keyframes floatGlowB{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-2rem,3rem,0) scale(1.08)}
  100%{transform:translate3d(-5rem,-2rem,0) scale(.92)}
}
/* Extra floating gradient orbs (layer behind content; markup: .ambient-orbs) */
.ambient-orbs{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  overflow:hidden;
  contain:strict
}
.ambient-orb{
  position:absolute;
  border-radius:50%;
  filter:blur(44px);
  mix-blend-mode:multiply;
  opacity:.44;
  will-change:transform;
  backface-visibility:hidden
}
.ambient-orb--1{
  width:min(120vw,40rem);
  height:min(120vw,40rem);
  left:-14%;
  top:38%;
  background:radial-gradient(circle at 38% 42%,rgba(56,189,248,.44),rgba(125,211,252,.14) 52%,transparent 72%);
  animation:ambientFloat1 29s ease-in-out infinite alternate
}
.ambient-orb--2{
  width:min(110vw,36rem);
  height:min(110vw,36rem);
  right:-10%;
  top:6%;
  background:radial-gradient(circle at 50% 48%,rgba(96,165,250,.34),rgba(167,139,250,.1) 56%,transparent 74%);
  animation:ambientFloat2 33s ease-in-out infinite alternate
}
.ambient-orb--3{
  width:min(100vw,32rem);
  height:min(100vw,32rem);
  left:12%;
  bottom:-12%;
  background:radial-gradient(circle at 45% 45%,rgba(34,211,238,.36),rgba(103,232,249,.12) 54%,transparent 74%);
  animation:ambientFloat3 25s ease-in-out infinite alternate
}
.ambient-orb--4{
  width:min(95vw,28rem);
  height:min(95vw,28rem);
  right:18%;
  bottom:14%;
  background:radial-gradient(circle at 50% 50%,rgba(59,130,246,.26),rgba(147,197,253,.14) 56%,transparent 72%);
  animation:ambientFloat4 37s ease-in-out infinite alternate
}
.ambient-orb--5{
  width:min(90vw,26rem);
  height:min(90vw,26rem);
  left:32%;
  top:-8%;
  background:radial-gradient(circle at 48% 52%,rgba(14,165,233,.34),rgba(59,130,246,.1) 58%,transparent 74%);
  animation:ambientFloat5 23s ease-in-out infinite alternate
}
body:has(.hero-orbs)::before,
body:has(.hero-orbs)::after{
  content:none
}
body:has(.hero-orbs) .ambient-orbs{
  display:none
}
@keyframes ambientFloat1{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(7vw,7vh,0) scale(1.09)}
  100%{transform:translate3d(-5vw,12vh,0) scale(.93)}
}
@keyframes ambientFloat2{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-9vw,5vh,0) scale(1.07)}
  100%{transform:translate3d(4vw,-7vh,0) scale(.91)}
}
@keyframes ambientFloat3{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(6vw,-11vh,0) scale(1.11)}
  100%{transform:translate3d(-7vw,5vh,0) scale(.94)}
}
@keyframes ambientFloat4{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-6vw,-6vh,0) scale(1.09)}
  100%{transform:translate3d(8vw,9vh,0) scale(.89)}
}
@keyframes ambientFloat5{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(5vw,14vh,0) scale(1.1)}
  100%{transform:translate3d(-11vw,-5vh,0) scale(.92)}
}
@media (max-width:760px){
  .ambient-orb{
    filter:blur(32px);
    opacity:.38
  }
}
@media (prefers-reduced-motion:reduce){
  .ambient-orb{
    animation:none!important;
    opacity:.32
  }
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit}
.skip-link{
  position:absolute;
  left:1rem;
  top:-3.5rem;
  z-index:600;
  padding:.9rem 1.05rem;
  border-radius:999px;
  background:#fff;
  color:#04101f;
  font-weight:800;
  box-shadow:0 20px 36px rgba(0,0,0,.18);
  transition:top .2s ease
}
.skip-link:focus{top:1rem}
.container{width:min(100% - 3.2rem,var(--container));margin-inline:auto}
.section{padding-block:var(--section-space)}
.surface{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--surface);
  box-shadow:var(--shadow);
  backdrop-filter:blur(18px)
}
.site-header{
  position:sticky;
  top:0;
  z-index:100;
  backdrop-filter:blur(18px);
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(248,250,252,.78));
  border-bottom:1px solid var(--line)
}
.site-header .container{
  min-height:var(--header-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem
}
.brand{display:inline-flex;flex-direction:column;gap:.4rem;align-items:flex-start;min-width:0}
.brand-mark{font-size:1.2rem;font-weight:900;letter-spacing:-.03em}
.brand-logo{
  display:block;
  height:clamp(2.65rem,5.4vw,3.45rem);
  width:auto;
  max-width:min(300px,58vw);
  object-fit:contain;
  object-position:left center
}
.brand-sub{color:var(--muted);font-size:.92rem;white-space:nowrap}
.menu-toggle{
  display:none;
  width:48px;
  height:48px;
  border-radius:16px;
  border:1px solid var(--line);
  background:rgba(15,23,42,.04);
  color:var(--text);
  align-items:center;
  justify-content:center;
  padding:0;
  cursor:pointer
}
.menu-toggle span,.menu-toggle span::before,.menu-toggle span::after{
  display:block;
  width:18px;
  height:2px;
  border-radius:999px;
  background:currentColor;
  position:relative;
  content:"";
  transition:transform .2s ease,opacity .2s ease
}
.menu-toggle span::before{position:absolute;top:-.36rem}
.menu-toggle span::after{position:absolute;top:.36rem}
.site-nav ul{
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  align-items:center;
  gap:.2rem
}
.site-nav a{
  display:inline-flex;
  align-items:center;
  min-height:3rem;
  padding:0 .95rem;
  border-radius:999px;
  color:var(--muted);
  font-size:1rem;
  font-weight:650;
  transition:color .2s ease,background .2s ease
}
.site-nav a:hover,.site-nav a:focus-visible{color:var(--text);background:rgba(15,23,42,.06)}
.site-nav a.desktop-cta,.site-nav a.nav-cta{
  color:#0c4a6e;
  border:1px solid rgba(56,189,248,.45);
  background:linear-gradient(135deg,#e0f2fe 0%,#f0f9ff 45%,#f8fafc 100%);
  box-shadow:0 14px 30px rgba(2,132,199,.18);
  margin-left:.1rem
}
.site-nav a.desktop-cta:hover,.site-nav a.desktop-cta:focus-visible,
.site-nav a.nav-cta:hover,.site-nav a.nav-cta:focus-visible{
  color:#0c4a6e;
  background:linear-gradient(135deg,#bae6fd 0%,#e0f2fe 50%,#f8fafc 100%)
}
.site-nav a.nav-lang-link{
  color:var(--accent);
  font-weight:900;
  border:1px solid rgba(2,132,199,.22);
  background:rgba(56,189,248,.1);
  padding:.6rem 1rem;
  margin-left:.1rem;
  margin-right:.55rem
}
.site-nav a.nav-lang-link:hover,.site-nav a.nav-lang-link:focus-visible{
  color:var(--text);
  background:rgba(56,189,248,.16);
  border-color:rgba(2,132,199,.35)
}
.site-nav a.nav-profile-link{
  font-weight:650;
  color:var(--muted-2);
  margin-right:.15rem;
  font-size:.94rem
}
.site-nav a.nav-profile-link:hover,.site-nav a.nav-profile-link:focus-visible{
  color:var(--text)
}
.footer-brand .footer-brand-link .brand-name{
  font-weight:800;
  font-size:1.05rem;
  color:var(--text)
}
.codeward-cta-logo{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:0;
  border-radius:14px;
  padding:.4rem .65rem;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(2,132,199,.2);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease,background .2s ease
}
.codeward-cta-logo:hover,.codeward-cta-logo:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 14px 32px rgba(2,132,199,.14);
  border-color:rgba(2,132,199,.38);
  background:#fff
}
.codeward-cta-logo:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px
}
.codeward-cta-logo img{
  display:block;
  height:clamp(2.6rem,5.5vw,3.4rem);
  width:auto;
  max-width:min(240px,70vw);
  object-fit:contain
}
.btn-row,.button-row{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2rem}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:3.65rem;
  padding:0 1.45rem;
  border-radius:999px;
  border:1px solid transparent;
  font-size:1.02rem;
  font-weight:850;
  letter-spacing:-.01em;
  cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease;
  white-space:nowrap
}
.btn:hover,.btn:focus-visible{transform:translateY(-2px);box-shadow:0 16px 34px rgba(2,132,199,.2)}
.btn-primary{
  color:#f8fafc;
  border-color:rgba(14,165,233,.45);
  background:linear-gradient(140deg,#0284c7 0%,#38bdf8 50%,#7dd3fc 100%);
  box-shadow:0 18px 38px rgba(2,132,199,.22)
}
.btn-secondary{
  color:var(--text);
  border-color:rgba(124,58,237,.22);
  background:
    linear-gradient(135deg,rgba(167,139,250,.12),rgba(56,189,248,.08) 45%,rgba(45,212,191,.08)),
    rgba(255,255,255,.72)
}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  padding:.62rem 1rem;
  border-radius:999px;
  border:1px solid rgba(124,58,237,.2);
  background:linear-gradient(135deg,rgba(56,189,248,.12),rgba(167,139,250,.12));
  color:#1e293b;
  font-size:.82rem;
  font-weight:850;
  letter-spacing:.1em;
  text-transform:uppercase;
  margin-bottom:.65rem
}
.label{
  display:inline-flex;
  align-items:center;
  width:fit-content;
  min-height:2rem;
  padding:.4rem .72rem;
  border-radius:999px;
  border:1px solid rgba(2,132,199,.22);
  background:linear-gradient(130deg,rgba(56,189,248,.14),rgba(167,139,250,.1));
  color:#1e3a5f;
  font-size:.82rem;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase
}
.hero-title,.section-heading,.cta-title,.contact-title,.blog-title{
  margin:0;
  line-height:1.1;
  letter-spacing:-.055em;
  text-wrap:balance
}
.hero-title{
  font-size:clamp(3.3rem,7vw,5.4rem);
  max-width:none;
  width:100%;
  text-wrap:pretty;
  margin-bottom:2.9rem
}
.section-heading,.cta-title,.contact-title,.blog-title{
  font-size:clamp(3rem,4vw,4.4rem);
  max-width:none;
  width:100%;
  margin-bottom:1.35rem
}
.hero-copy,.section-copy,.contact-copy,.cta-copy,.blog-copy{
  margin:0;
  color:var(--muted);
  font-size:clamp(1.18rem,1.18vw,1.34rem);
  max-width:none;
  width:100%;
  text-wrap:pretty
}
.stack>*+*{margin-top:1.1rem}
.hero{
  position:relative;
  display:grid;
  align-content:center;
  gap:clamp(2rem,5vh,4rem);
  min-height:calc(100vh - var(--header-h));
  min-height:calc(100svh - var(--header-h));
  padding-block:var(--hero-space) clamp(2.75rem,5.8vh,4.2rem);
  overflow:clip;
  background:
    radial-gradient(90% 65% at 18% 12%,rgba(56,189,248,.07),transparent 52%),
    radial-gradient(80% 55% at 88% 18%,rgba(167,139,250,.045),transparent 48%),
    linear-gradient(180deg,#fefefe 0%,#f8fafc 38%,#f1f5f9 72%,#eef2f7 100%)
}
.hero:has(.hero-grid--portrait){
  display:flex;
  flex-direction:column;
  align-content:stretch;
  padding-bottom:0;
  overflow-x:clip;
  overflow-y:visible
}
.hero:has(.hero-grid--portrait) > .container.hero-grid{
  flex:1 1 auto;
  align-self:stretch;
  width:min(100% - 3.2rem,var(--container));
  max-width:var(--container);
  margin-inline:auto;
  min-height:0;
  box-sizing:border-box
}
.hero > .container{
  position:relative;
  z-index:1
}
.hero::before,.hero::after{
  content:"";
  position:absolute;
  z-index:0;
  border-radius:50%;
  pointer-events:none;
  mix-blend-mode:multiply;
  filter:blur(34px);
  opacity:.26;
  will-change:transform,opacity
}
.hero::before{
  width:28rem;
  height:28rem;
  right:4%;
  top:10%;
  background:radial-gradient(circle,rgba(45,212,191,.14),rgba(45,212,191,.04) 60%,transparent 74%);
  animation:heroOrbDriftA 24s ease-in-out infinite alternate
}
.hero::after{
  width:24rem;
  height:24rem;
  left:10%;
  bottom:2%;
  background:radial-gradient(circle,rgba(96,165,250,.12),rgba(96,165,250,.04) 58%,transparent 74%);
  animation:heroOrbDriftB 20s ease-in-out infinite alternate
}
.hero-orbs{
  position:absolute;
  inset:-12% -12% 0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
  filter:saturate(124%)
}
.hero-orb{
  --orb-a:56,189,248;
  --orb-b:125,211,252;
  --orb-c:34,211,238;
  --orb-size:28rem;
  --orb-core-duration:11s;
  --orb-core-delay:0s;
  --orb-halo-duration:15s;
  --orb-halo-delay:-2s;
  position:absolute;
  width:var(--orb-size);
  height:var(--orb-size);
  border-radius:50%;
  opacity:.46;
  transform:translate3d(0,0,0);
  will-change:transform,opacity;
  filter:blur(12px)
}
.hero-orb::before,
.hero-orb::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit
}
.hero-orb::before{
  background:
    radial-gradient(circle at 34% 30%,rgba(var(--orb-a),.76) 0%,rgba(var(--orb-b),.36) 28%,rgba(var(--orb-c),.14) 52%,transparent 74%);
  animation:heroOrbCorePulse var(--orb-core-duration) ease-in-out infinite alternate;
  animation-delay:var(--orb-core-delay)
}
.hero-orb::after{
  inset:-16%;
  background:
    radial-gradient(circle at 48% 52%,rgba(var(--orb-a),.62) 0%,rgba(var(--orb-b),.26) 34%,rgba(var(--orb-c),.1) 58%,transparent 78%);
  box-shadow:0 0 4.5rem rgba(var(--orb-a),.18);
  filter:blur(26px);
  opacity:.68;
  animation:heroOrbHaloPulse var(--orb-halo-duration) ease-in-out infinite alternate;
  animation-delay:var(--orb-halo-delay)
}
.hero-orb--1{
  --orb-a:56,189,248;
  --orb-b:103,232,249;
  --orb-c:59,130,246;
  --orb-size:clamp(28rem,46vw,46rem);
  --orb-core-duration:10.8s;
  --orb-core-delay:-2.1s;
  --orb-halo-duration:16.2s;
  --orb-halo-delay:-4.4s;
  left:-14%;
  top:-2%;
  animation:heroOrbFlightA 29s cubic-bezier(.44,.08,.55,.94) infinite alternate
}
.hero-orb--2{
  --orb-a:167,139,250;
  --orb-b:96,165,250;
  --orb-c:167,139,250;
  --orb-size:clamp(16rem,24vw,23rem);
  --orb-core-duration:12.4s;
  --orb-core-delay:-5.6s;
  --orb-halo-duration:18.4s;
  --orb-halo-delay:-2.5s;
  right:6%;
  top:4%;
  animation:heroOrbFlightB 33s cubic-bezier(.37,.05,.49,.98) infinite alternate
}
.hero-orb--3{
  --orb-a:45,212,191;
  --orb-b:34,211,238;
  --orb-c:56,189,248;
  --orb-size:clamp(20rem,30vw,32rem);
  --orb-core-duration:9.8s;
  --orb-core-delay:-3.4s;
  --orb-halo-duration:14.2s;
  --orb-halo-delay:-5.1s;
  left:18%;
  top:38%;
  animation:heroOrbFlightC 25s cubic-bezier(.52,.04,.48,.97) infinite alternate
}
.hero-orb--4{
  --orb-a:59,130,246;
  --orb-b:167,139,250;
  --orb-c:167,139,250;
  --orb-size:clamp(18rem,27vw,28rem);
  --orb-core-duration:11.6s;
  --orb-core-delay:-4.2s;
  --orb-halo-duration:17.6s;
  --orb-halo-delay:-1.7s;
  right:14%;
  top:36%;
  animation:heroOrbFlightD 31s cubic-bezier(.46,.06,.54,.96) infinite alternate
}
.hero-orb--5{
  --orb-a:14,165,233;
  --orb-b:56,189,248;
  --orb-c:34,211,238;
  --orb-size:clamp(12rem,18vw,16rem);
  --orb-core-duration:8.9s;
  --orb-core-delay:-1.3s;
  --orb-halo-duration:12.8s;
  --orb-halo-delay:-3.8s;
  left:46%;
  top:0;
  animation:heroOrbFlightE 21s cubic-bezier(.4,.08,.52,.94) infinite alternate
}
.hero-orb--6{
  --orb-a:34,211,238;
  --orb-b:103,232,249;
  --orb-c:125,211,252;
  --orb-size:clamp(30rem,42vw,44rem);
  --orb-core-duration:13.2s;
  --orb-core-delay:-6.1s;
  --orb-halo-duration:19.2s;
  --orb-halo-delay:-4.8s;
  right:-12%;
  bottom:-8%;
  animation:heroOrbFlightF 35s cubic-bezier(.41,.05,.57,.97) infinite alternate
}
.hero-orb--7{
  --orb-a:96,165,250;
  --orb-b:167,139,250;
  --orb-c:196,181,253;
  --orb-size:clamp(18rem,28vw,30rem);
  --orb-core-duration:10.9s;
  --orb-core-delay:-2.9s;
  --orb-halo-duration:16.8s;
  --orb-halo-delay:-5.3s;
  left:-6%;
  bottom:4%;
  animation:heroOrbFlightG 27s cubic-bezier(.45,.07,.5,.96) infinite alternate
}
.hero-orb--8{
  --orb-a:45,212,191;
  --orb-b:167,139,250;
  --orb-c:167,139,250;
  --orb-size:clamp(10rem,15vw,14rem);
  --orb-core-duration:9.6s;
  --orb-core-delay:-4.7s;
  --orb-halo-duration:14.8s;
  --orb-halo-delay:-2.6s;
  right:26%;
  top:14%;
  animation:heroOrbFlightH 23s cubic-bezier(.39,.09,.57,.94) infinite alternate
}
.hero-network-bg{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.62;
  overflow:hidden
}
.hero-network-bg::before{
  content:"";
  position:absolute;
  inset:-20% -10%;
  background:
    radial-gradient(44rem 26rem at 12% 26%,rgba(56,189,248,.08),transparent 72%),
    radial-gradient(38rem 24rem at 88% 18%,rgba(167,139,250,.045),transparent 74%),
    radial-gradient(26rem 18rem at 52% 86%,rgba(34,211,238,.06),transparent 74%),
    radial-gradient(18rem 14rem at 74% 62%,rgba(56,189,248,.05),transparent 76%),
    linear-gradient(128deg,rgba(56,189,248,.04),rgba(167,139,250,.025),rgba(34,211,238,.03));
  background-size:100% 100%,100% 100%,100% 100%,220% 220%;
  animation:heroNetAuraShift 24s ease-in-out infinite alternate;
  filter:saturate(105%);
  opacity:.58
}
.hero-network-bg::after{
  content:"";
  position:absolute;
  width:44rem;
  height:44rem;
  left:-13rem;
  top:2%;
  border-radius:50%;
  background:
    radial-gradient(circle at 28% 44%,rgba(56,189,248,.08),rgba(125,211,252,.03) 52%,transparent 72%),
    radial-gradient(circle at 74% 66%,rgba(167,139,250,.05),rgba(196,181,253,.018) 56%,transparent 74%),
    radial-gradient(circle at 58% 24%,rgba(34,211,238,.05),rgba(103,232,249,.02) 54%,transparent 74%);
  filter:blur(22px);
  animation:heroNetHaloFloat 22s ease-in-out infinite alternate
}
.hero-net-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:.42;
  transform:translate3d(0,0,0);
  filter:drop-shadow(0 0 12px rgba(2,132,199,.12));
  mix-blend-mode:multiply;
  will-change:transform,opacity;
  animation:heroNetCanvasFloat 16s ease-in-out infinite alternate
}
/* Codeward (and any hero with canvas net): multiply erases light strokes on pale hero — use normal blend */
.hero:has(.hero-network-bg) .hero-network-bg{
  opacity:1
}
.hero:has(.hero-network-bg) .hero-net-canvas{
  mix-blend-mode:normal;
  opacity:.92;
  filter:drop-shadow(0 0 14px rgba(2,132,199,.22))
}
@keyframes heroNetAuraShift{
  0%{background-position:0% 0%,0% 0%,0% 0%,0% 50%}
  50%{background-position:0% 0%,0% 0%,0% 0%,100% 50%}
  100%{background-position:0% 0%,0% 0%,0% 0%,0% 50%}
}
@keyframes heroNetHaloFloat{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(14rem,9rem,0) scale(1.1)}
  100%{transform:translate3d(29rem,-1rem,0) scale(.92)}
}
@keyframes heroNetCanvasFloat{
  0%{transform:translate3d(0,0,0);opacity:.88}
  50%{transform:translate3d(0,-1.2%,0);opacity:.96}
  100%{transform:translate3d(0,-.3%,0);opacity:.92}
}
@keyframes heroOrbCorePulse{
  0%{opacity:.5;transform:scale(.84)}
  52%{opacity:1;transform:scale(1.04)}
  100%{opacity:.62;transform:scale(.92)}
}
@keyframes heroOrbHaloPulse{
  0%{opacity:.26;transform:scale(.82)}
  48%{opacity:.84;transform:scale(1.18)}
  100%{opacity:.38;transform:scale(.92)}
}
@keyframes heroOrbFlightA{
  0%{transform:translate3d(0,0,0) scale(.96)}
  34%{transform:translate3d(5vw,-4vh,0) scale(1.04)}
  70%{transform:translate3d(-2vw,9vh,0) scale(.92)}
  100%{transform:translate3d(8vw,16vh,0) scale(1.1)}
}
@keyframes heroOrbFlightB{
  0%{transform:translate3d(0,0,0) scale(.98)}
  38%{transform:translate3d(-8vw,5vh,0) scale(1.08)}
  72%{transform:translate3d(4vw,13vh,0) scale(.9)}
  100%{transform:translate3d(-10vw,-3vh,0) scale(1.04)}
}
@keyframes heroOrbFlightC{
  0%{transform:translate3d(0,0,0) scale(.94)}
  42%{transform:translate3d(7vw,-11vh,0) scale(1.12)}
  76%{transform:translate3d(-4vw,4vh,0) scale(.88)}
  100%{transform:translate3d(8vw,-15vh,0) scale(1.02)}
}
@keyframes heroOrbFlightD{
  0%{transform:translate3d(0,0,0) scale(1)}
  36%{transform:translate3d(-6vw,-8vh,0) scale(1.08)}
  68%{transform:translate3d(3vw,6vh,0) scale(.9)}
  100%{transform:translate3d(-9vw,12vh,0) scale(1.06)}
}
@keyframes heroOrbFlightE{
  0%{transform:translate3d(0,0,0) scale(.92)}
  40%{transform:translate3d(6vw,8vh,0) scale(1.1)}
  78%{transform:translate3d(-7vw,14vh,0) scale(.88)}
  100%{transform:translate3d(4vw,-4vh,0) scale(1.02)}
}
@keyframes heroOrbFlightF{
  0%{transform:translate3d(0,0,0) scale(.96)}
  32%{transform:translate3d(-9vw,-9vh,0) scale(1.12)}
  66%{transform:translate3d(4vw,-2vh,0) scale(.9)}
  100%{transform:translate3d(-12vw,-16vh,0) scale(1.08)}
}
@keyframes heroOrbFlightG{
  0%{transform:translate3d(0,0,0) scale(.98)}
  35%{transform:translate3d(8vw,-7vh,0) scale(1.08)}
  68%{transform:translate3d(-3vw,-13vh,0) scale(.92)}
  100%{transform:translate3d(10vw,-18vh,0) scale(1.12)}
}
@keyframes heroOrbFlightH{
  0%{transform:translate3d(0,0,0) scale(.9)}
  38%{transform:translate3d(-7vw,10vh,0) scale(1.1)}
  72%{transform:translate3d(5vw,4vh,0) scale(.94)}
  100%{transform:translate3d(-9vw,16vh,0) scale(1.06)}
}
@media (max-width:760px){
  .hero-orbs{
    inset:-6% -18% 2%
  }
  .hero-orb{
    opacity:.34;
    filter:blur(18px)
  }
  .hero-orb--5,
  .hero-orb--6,
  .hero-orb--7,
  .hero-orb--8{
    opacity:.22
  }
}
@media (prefers-reduced-motion:reduce){
  .hero-orb,
  .hero-orb::before,
  .hero-orb::after{
    animation:none!important
  }
  .hero-orb{
    opacity:.22
  }
  .hero-orb::after{
    opacity:.28
  }
}
@keyframes heroOrbDriftA{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-2.4rem,1.8rem,0) scale(1.08)}
  100%{transform:translate3d(-4rem,-1.4rem,0) scale(.95)}
}
@keyframes heroOrbDriftB{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(2rem,-1.4rem,0) scale(1.06)}
  100%{transform:translate3d(3.6rem,1.2rem,0) scale(.94)}
}
.hero-grid{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(210px,270px);
  gap:2rem;
  align-items:center
}
.hero-grid--portrait{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:2rem;
  align-items:stretch;
  width:100%;
  min-height:calc(100svh - var(--header-h) - var(--hero-space));
  flex:1 1 auto
}
.hero-grid--portrait .hero-shell{
  grid-column:1;
  align-self:center;
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
  overflow-wrap:break-word;
  word-wrap:break-word
}
.hero-grid--portrait .hero-shell .hero-title,
.hero-grid--portrait .hero-shell .hero-kicker,
.hero-grid--portrait .hero-shell .hero-copy{
  max-width:100%
}
.hero-portrait-column{
  grid-column:2;
  align-self:stretch;
  justify-self:stretch;
  min-width:0;
  min-height:0;
  width:100%;
  max-width:100%;
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:center;
  height:100%
}
.hero-portrait{
  position:relative;
  box-sizing:border-box;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  width:100%;
  max-width:100%;
  height:100%;
  min-height:0;
  max-height:100%;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
  border-radius:0;
  overflow:visible;
  align-self:stretch
}
.hero-portrait img{
  position:relative;
  inset:auto;
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  max-height:100%;
  margin:0;
  object-fit:contain;
  object-position:bottom center
}
.about-panel > .section-copy{
  margin-top:1rem
}
.panel.about-media{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  overflow:hidden
}
.about-photo{
  position:relative;
  width:100%;
  height:100%
}
.about-photo img{
  display:block;
  width:100%;
  height:100%;
  min-height:100%;
  object-fit:cover
}
.hero-grid>*{position:relative;z-index:1}
.hero-copy+.hero-copy{margin-top:1.25rem}
.hero-shell{
  position:relative;
  z-index:2;
  max-width:none;
  padding-block:.35rem
}
.hero-tech-column{
  align-self:stretch;
  justify-self:end;
  width:min(100%,320px)
}
.hero-tech-cloud{
  position:relative;
  width:100%;
  min-height:30rem;
  padding-bottom:1.25rem
}
.hero-tech-card{
  position:absolute;
  width:auto;
  height:auto;
  min-width:0;
  min-height:0;
  padding:0;
  margin:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  outline:none;
  backdrop-filter:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  animation-timing-function:ease-in-out;
  animation-iteration-count:infinite;
  animation-direction:alternate;
  will-change:transform
}
.hero-tech-card img{
  width:clamp(4rem,4.8vw,5.5rem);
  height:clamp(4rem,4.8vw,5.5rem);
  object-fit:contain;
  filter:drop-shadow(0 0 12px rgba(2,132,199,.18));
  background:transparent
}
.hero-tech-card--defold{
  top:2%;
  left:48%;
  animation-name:techCardFloatDefold;
  animation-duration:11.6s;
  animation-delay:-.7s;
  animation-timing-function:cubic-bezier(.42,0,.58,1)
}
.hero-tech-card--html5{
  top:18%;
  left:4%;
  animation-name:techCardFloatHtml5;
  animation-duration:10.8s;
  animation-delay:-2.2s;
  animation-timing-function:cubic-bezier(.33,.12,.25,1)
}
.hero-tech-card--css{
  top:90%;
  left:30%;
  animation-name:techCardFloatCss;
  animation-duration:11s;
  animation-delay:-1.9s;
  animation-timing-function:cubic-bezier(.55,0,.45,1)
}
.hero-tech-card--cpp{
  top:30%;
  left:71%;
  animation-name:techCardFloatCpp;
  animation-duration:12.2s;
  animation-delay:-3.6s;
  animation-timing-function:cubic-bezier(.4,.15,.2,.95)
}
.hero-tech-card--js{
  top:58%;
  left:4%;
  animation-name:techCardFloatJs;
  animation-duration:11.2s;
  animation-delay:-2.8s;
  animation-timing-function:cubic-bezier(.28,.85,.45,1)
}
.hero-tech-card--lua{
  top:64%;
  left:70%;
  animation-name:techCardFloatLua;
  animation-duration:10.4s;
  animation-delay:-1.4s;
  animation-timing-function:cubic-bezier(.65,0,.35,.85)
}
/* Each card: unique motion (0%/100% match for smooth alternate loop; one mid peak). */
@keyframes techCardFloatDefold{
  0%,100%{transform:translate3d(-4px,2px,0) rotate(-1.6deg)}
  50%{transform:translate3d(14px,-12px,0) rotate(1.8deg)}
}
@keyframes techCardFloatHtml5{
  0%,100%{transform:translate3d(6px,-2px,0) rotate(.9deg)}
  50%{transform:translate3d(-8px,18px,0) rotate(-1.4deg)}
}
@keyframes techCardFloatCss{
  0%,100%{transform:translate3d(-11px,1px,0) rotate(-.4deg)}
  50%{transform:translate3d(11px,-7px,0) rotate(.6deg)}
}
@keyframes techCardFloatCpp{
  0%,100%{transform:translate3d(4px,-8px,0) rotate(.7deg)}
  50%{transform:translate3d(-14px,16px,0) rotate(-1.7deg)}
}
@keyframes techCardFloatJs{
  0%,100%{transform:translate3d(-5px,6px,0) rotate(-1.1deg)}
  50%{transform:translate3d(18px,-18px,0) rotate(1.9deg)}
}
@keyframes techCardFloatLua{
  0%,100%{transform:translate3d(2px,0,0) rotate(-2.4deg)}
  50%{transform:translate3d(-2px,-9px,0) rotate(2.3deg)}
}
.hero-kicker{
  color:var(--muted-2);
  font-size:1.25rem;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  margin-top:1.8rem;
  margin-bottom:1.8rem;
}
.trust-bar{
  display:grid;
  grid-template-columns:1.05fr 2fr;
  gap:1.4rem;
  align-items:center;
  margin-top:0;
  padding:1.1rem 1.35rem;
  border:1px solid var(--line);
  border-radius:22px;
  background:rgba(255,255,255,.65)
}
.trust-title{margin:0;font-size:1.15rem;font-weight:800;letter-spacing:-.02em}
.trust-pills{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.75rem
}
.pill{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:.45rem;
  min-height:5.25rem;
  min-width:0;
  width:100%;
  padding:.72rem .9rem .82rem;
  border-radius:20px;
  border:1px solid rgba(124,58,237,.18);
  background:linear-gradient(140deg,rgba(56,189,248,.1),rgba(167,139,250,.08));
  color:#1e293b;
  font-weight:700;
  font-size:.95rem;
  text-align:center;
  letter-spacing:.01em
}
.pill-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:3.3rem;
  height:3.3rem;
  color:#0284c7
}
.pill-icon svg{
  width:100%;
  height:100%;
  stroke:currentColor;
  fill:none;
  stroke-width:1.75;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:drop-shadow(0 0 8px rgba(2,132,199,.2))
}
.pill-icon .fa{
  display:block;
  font-size:2.5rem;
  line-height:1;
  filter:drop-shadow(0 0 8px rgba(2,132,199,.2))
}
.pill-label{
  font-size:.9rem;
  font-weight:800;
  line-height:1.1
}
.pill--defold{
  border-color:rgba(13,148,136,.28);
  background:linear-gradient(140deg,rgba(45,212,191,.14),rgba(56,189,248,.1),rgba(167,139,250,.08))
}
.pill--defold .pill-icon{
  color:#0d9488
}
.pill--defold .pill-icon svg{
  fill:rgba(13,148,136,.12);
  stroke:#0d9488
}
.section-head{display:grid;gap:1.25rem;margin-bottom:3.2rem;max-width:none;width:100%}
.section-head .eyebrow{
  width:100%;
  justify-content:flex-start
}
.section-head .section-copy{
  width:100%;
  max-width:none
}
.cards,.showcase-grid,.faq-grid,.process-grid,.article-track,.service-grid{display:grid;gap:1.2rem}
.cards--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cards--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cards--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card,.showcase-card,.process-card,.faq-card,.article-card,.contact-shell,.cta-shell{
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:
    radial-gradient(140% 130% at 8% 0%,rgba(56,189,248,.08),transparent 52%),
    radial-gradient(160% 130% at 92% 100%,rgba(167,139,250,.07),transparent 58%),
    linear-gradient(170deg,rgba(255,255,255,.92),rgba(248,250,252,.88) 64%),
    #fff;
  box-shadow:
    0 18px 48px rgba(15,23,42,.06),
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(15,23,42,.04);
  backdrop-filter:blur(9px);
  transition:border-color .22s ease,box-shadow .22s ease,transform .22s ease
}
.card:hover,.showcase-card:hover,.process-card:hover,.faq-card:hover,.article-card:hover{
  box-shadow:
    0 24px 52px rgba(15,23,42,.08),
    inset 0 1px 0 rgba(255,255,255,.95),
    0 0 0 1px rgba(59,130,246,.08);
  transform:translateY(-2px)
}
.card,.process-card,.faq-card,.article-card{padding:1.6rem}
.card h3,.showcase-card h3,.process-card h3,.article-card h3,.faq-card summary{
  margin:.95rem 0 .5rem;
  line-height:1.22;
  letter-spacing:-.03em;
  font-size:1.35rem
}
.card p,.process-card p,.showcase-card p,.article-card p,.faq-card p{margin:0;color:var(--muted);font-size:1.0625rem;line-height:1.65}
.icon{
  width:auto;
  height:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--accent);
  background:none;
  border:0;
  box-shadow:none
}
.icon svg{
  width:1.6rem;
  height:1.6rem;
  stroke:currentColor;
  fill:none;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:drop-shadow(0 0 10px rgba(2,132,199,.2))
}
.split{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.4rem;
  align-items:stretch
}
.panel{
  padding:1.8rem;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:
    radial-gradient(120% 140% at 0% 0%,rgba(56,189,248,.08),transparent 60%),
    radial-gradient(120% 140% at 100% 100%,rgba(167,139,250,.07),transparent 62%),
    rgba(255,255,255,.88);
  box-shadow:0 20px 46px rgba(15,23,42,.06),inset 0 1px 0 rgba(255,255,255,.95);
  height:100%;
  display:flex;
  flex-direction:column
}
.panel h3{margin:1rem 0 .65rem;font-size:1.65rem;line-height:1.18;letter-spacing:-.03em}
.check-list{
  list-style:none;
  margin:1.2rem 0 0;
  padding:0;
  display:grid;
  gap:.9rem
}
.check-list li{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:.8rem;
  align-items:start;
  color:var(--muted-2);
  font-size:1rem
}
.check{
  width:1.55rem;
  height:1.55rem;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:.05rem;
  color:#f8fafc;
  background:linear-gradient(135deg,var(--accent),var(--accent-3));
  box-shadow:0 10px 20px rgba(2,132,199,.2);
  flex-shrink:0
}
.check svg{width:.9rem;height:.9rem;stroke:currentColor;fill:none;stroke-width:2.4}
.showcase-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.showcase-grid--games{grid-template-columns:repeat(2,minmax(0,1fr))}
.showcase-grid--single{
  grid-template-columns:minmax(0,1fr);
  max-width:26rem;
  margin-inline:auto
}
@media (min-width:1241px){
  .showcase-grid--games{
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
}
.youtube-card{position:relative}
.youtube-card .article-media{margin-bottom:.75rem}
.showcase-card{position:relative;overflow:hidden}
.showcase-card__link{
  position:absolute;
  inset:0;
  z-index:2;
  border-radius:inherit;
  background:transparent;
  text-decoration:none;
  outline:none
}
.showcase-card__link:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  z-index:3
}
.showcase-card__cta{
  position:relative;
  z-index:0;
  cursor:pointer
}
.showcase-media{
  aspect-ratio:16/10;
  overflow:hidden;
  border-bottom:1px solid var(--line);
  background:rgba(241,245,249,.9)
}
.showcase-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .35s ease
}
.showcase-card:hover .showcase-media img,.showcase-card:focus-within .showcase-media img{transform:scale(1.03)}
.showcase-body{padding:1.45rem;display:grid;gap:.9rem}
.link-inline{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  width:fit-content;
  color:var(--text);
  font-weight:750;
  text-decoration:underline;
  text-underline-offset:.22em
}
.upcoming-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem}
.upcoming-card{
  min-height:18rem;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:1.8rem;
  border:1px dashed rgba(15,23,42,.14);
  border-radius:var(--radius-sm);
  background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(248,250,252,.9))
}
.upcoming-card h3{margin:1rem 0 .55rem;font-size:1.5rem;line-height:1.22}
.upcoming-card p{margin:0;color:var(--muted)}
.process-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.step{color:var(--accent);font-size:.84rem;font-weight:850;letter-spacing:.09em;text-transform:uppercase}
details{display:block}
details summary{list-style:none;cursor:pointer;padding-right:2rem;position:relative}
details summary::-webkit-details-marker{display:none}
details summary::after{
  content:"+";
  position:absolute;
  right:0;
  top:0;
  color:var(--accent);
  font-size:1.25rem;
  line-height:1
}
details[open] summary::after{content:"-"}
details p{margin-top:.95rem}
.blog-shell{display:grid;gap:1.4rem}
.carousel-head{display:flex;justify-content:space-between;align-items:end;gap:1rem}
.carousel-controls{display:inline-flex;gap:.7rem}
.carousel-btn{
  width:3rem;
  height:3rem;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.85);
  color:var(--text);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:transform .18s ease,background .18s ease,border-color .18s ease
}
.carousel-btn:hover,.carousel-btn:focus-visible{transform:translateY(-1px);background:#fff}
.carousel-btn svg{width:1rem;height:1rem;stroke:currentColor;fill:none;stroke-width:2.2}
.article-viewport{overflow:hidden}
.article-track{
  grid-auto-flow:column;
  grid-auto-columns:minmax(0,calc((100% - 2.4rem)/3));
  transition:transform .35s ease;
  will-change:transform
}
.article-card{
  position:relative;
  min-height:20rem;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(248,250,252,.92))
}
.article-card__link{
  position:absolute;
  inset:0;
  z-index:2;
  border-radius:inherit;
  background:transparent;
  text-decoration:none;
  outline:none
}
.article-card__link:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  z-index:3
}
.article-card__cta{
  position:relative;
  z-index:0;
  cursor:pointer
}
.article-media{
  width:100%;
  aspect-ratio:16/9;
  border-radius:14px;
  overflow:hidden;
  margin-bottom:1rem;
  background:rgba(241,245,249,.95);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 10px 22px rgba(15,23,42,.08)
}
.article-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block
}
.article-card .meta{color:var(--muted);font-weight:700;font-size:.94rem}
.article-card .article-link{margin-top:1.1rem}
.cta-shell{
  padding:2rem;
  display:grid;
  grid-template-columns:minmax(0,1.15fr) auto;
  gap:1.4rem;
  align-items:center;
  background:
    radial-gradient(circle at 12% 22%,rgba(56,189,248,.1),transparent 22%),
    radial-gradient(circle at 84% 48%,rgba(167,139,250,.1),transparent 24%),
    radial-gradient(circle at 56% 84%,rgba(45,212,191,.08),transparent 24%),
    rgba(255,255,255,.92)
}
.cta-title{max-width:none}
#contact-form{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(48rem 30rem at 10% 20%,rgba(56,189,248,.15),transparent 55%),
    radial-gradient(42rem 28rem at 88% 72%,rgba(167,139,250,.14),transparent 54%),
    linear-gradient(180deg,rgba(226,236,246,.86),rgba(210,222,236,.94));
  isolation:isolate
}
#contact-form::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(135deg,rgba(255,255,255,.2),transparent 42%),
    linear-gradient(320deg,rgba(255,255,255,.12),transparent 36%);
  pointer-events:none;
  z-index:0
}
#contact-form > .container{
  position:relative;
  z-index:1
}
.contact-shell{
  padding:2rem;
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:1.4rem;
  background:
    radial-gradient(circle at 18% 15%,rgba(56,189,248,.1),transparent 20%),
    radial-gradient(circle at 86% 74%,rgba(167,139,250,.1),transparent 20%),
    rgba(255,255,255,.92)
}
.contact-panel{
  min-width:0;
  overflow-wrap:anywhere;
  padding:1.8rem;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:
    radial-gradient(140% 130% at 8% 0%,rgba(56,189,248,.08),transparent 52%),
    radial-gradient(160% 130% at 92% 100%,rgba(167,139,250,.07),transparent 58%),
    linear-gradient(170deg,rgba(255,255,255,.92),rgba(248,250,252,.88) 64%),
    #fff;
  box-shadow:
    0 18px 48px rgba(15,23,42,.06),
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(15,23,42,.04)
}
.contact-panel h3{margin:1rem 0 .6rem;font-size:1.7rem;line-height:1.18;letter-spacing:-.03em}
.contact-points{
  list-style:none;
  margin:1.2rem 0 0;
  padding:0;
  display:grid;
  gap:.9rem
}
.contact-points li{color:var(--muted-2)}
.contact-links{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:1.3rem}
.contact-links a,.contact-phone a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  min-height:3rem;
  padding:0 1rem;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.85);
  color:var(--text);
  font-weight:750
}
.contact-form{display:grid;gap:1rem}
.privacy-consent-group{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  column-gap:.55rem;
  width:100%;
  padding:.4rem 0;
}
.privacy-checkbox{
  width:1.15rem;
  height:1.15rem;
  margin:0;
  accent-color:var(--accent);
  cursor:pointer
}
.privacy-consent-label{
  display:block;
  text-align:left;
  color:var(--muted);
  font-size:.95rem;
  font-weight:650;
  line-height:1.45;
  margin:0
}
.privacy-consent-label a{
  color:var(--text);
  text-decoration:underline;
  text-underline-offset:.22em;
  white-space:nowrap
}
.validation-error{
  color:var(--danger);
  font-size:.92rem;
  font-weight:650;
  margin:.55rem 0 0
}
.row,.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.field,.form-group{position:relative}
.main,.field input,.field textarea,.contact-form input,.contact-form textarea{
  width:100%;
  padding:1.2rem 1.15rem;
  border-radius:18px;
  border:1px solid rgba(15,23,42,.22);
  background:#fff;
  color:var(--text);
  outline:none;
  transition:border-color .2s ease,background .2s ease,box-shadow .2s ease
}
.main:focus,.contact-form input:focus,.contact-form textarea:focus{
  border-color:rgba(2,132,199,.58);
  background:#fff;
  box-shadow:0 0 0 4px rgba(56,189,248,.16)
}
.contact-form span,.field label{display:inline-block;margin-top:.55rem;color:var(--muted);font-size:.94rem;font-weight:650}
.textarea-input,.field--full{grid-column:1/-1}
.errors,.help-block,.text-danger{margin:.45rem 0 0;color:var(--danger);font-size:.92rem}
#success{color:var(--muted);font-size:.95rem;min-height:1.5rem;margin-bottom:.25rem}
#contactForm .alert.alert-danger,#contactForm .alert-success{
  border:1px solid var(--line);
  border-radius:16px;
  padding:.9rem 1rem;
  background:rgba(248,250,252,.95);
  margin-bottom:1rem
}
#contactForm .alert-success{color:var(--success)}
.contact-form button.close{
  margin-left:.75rem;
  padding:0;
  border:0;
  background:transparent;
  color:inherit;
  box-shadow:none
}
.contact-phone{
  list-style:none;
  padding:0;
  margin:.2rem 0 0;
  display:flex;
  flex-wrap:wrap;
  gap:.85rem
}
.site-footer{padding-block:2.2rem 3.2rem;border-top:1px solid var(--line)}
.footer-layout{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:1rem;
  align-items:center
}
.footer-links{display:flex;flex-wrap:wrap;gap:1rem}
.footer-links a,.social-links a{color:var(--muted);font-weight:650;transition:color .2s ease}
.footer-links a:hover,.social-links a:hover,.contact-links a:hover,.contact-phone a:hover,.link-inline:hover{color:var(--text)}
.social-links{display:flex;flex-wrap:wrap;gap:1rem}
.blog-lang-swap{
  margin:.35rem 0 0;
  font-size:.95rem;
  color:var(--muted-2)
}
.blog-lang-swap a{font-weight:700}
.section-head--compact{margin-bottom:0}
.btn-row--flush{margin-top:0}
.honeypot-field{position:absolute;left:-5000px}
.footer-sub{color:var(--muted)}
.footer-brand{
  display:flex;
  flex-direction:column;
  gap:.55rem;
  align-items:flex-start;
  min-width:0
}
.footer-brand-link{
  display:inline-flex;
  line-height:0;
  border-radius:6px
}
.footer-brand-link:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px
}
.footer-logo{
  display:block;
  height:clamp(4.05rem,6.5vw,3.75rem);
  width:auto;
  max-width:min(360px,55vw);
  object-fit:contain;
  object-position:left center
}
.privacy-policy-prose{
  max-width:52rem;
  margin-inline:auto
}
.privacy-policy-prose h3{
  margin:1.85rem 0 .75rem;
  font-size:clamp(1.15rem,2.5vw,1.35rem);
  font-weight:800;
  color:var(--text);
  letter-spacing:-.02em;
  line-height:1.25
}
.privacy-policy-prose h3:first-of-type{margin-top:0}
.privacy-policy-prose p{
  margin:0 0 1rem;
  color:var(--muted-2);
  font-size:1rem;
  line-height:1.7
}
.privacy-policy-prose ul{
  margin:0 0 1.15rem;
  padding-left:1.35rem;
  color:var(--muted-2);
  line-height:1.65
}
.privacy-policy-prose li{margin:.4rem 0}
.privacy-policy-prose strong{color:var(--text);font-weight:750}
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}

/* Personal homepage: text brand */
.brand--personal{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.2rem;
  text-decoration:none;
  color:inherit
}
.brand--personal:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:4px;
  border-radius:6px
}
.brand-name{
  font-weight:800;
  font-size:clamp(1.9rem,3.0vw,2.0rem);
  letter-spacing:-.02em;
  line-height:1.95
}
.brand--personal .brand-sub{
  font-size:.78rem;
  color:var(--muted);
  font-weight:550;
  letter-spacing:.02em
}
.personal-photo{
  border-radius:12px;
  overflow:hidden;
  border:1px solid rgba(2,132,199,.18);
  box-shadow:0 18px 48px rgba(15,23,42,.1)
}
.personal-photo img{
  display:block;
  width:100%;
  height:auto
}
.youtube-card .article-media img{
  aspect-ratio:16/9;
  object-fit:cover
}

/* Personal site only (index / pl/index): calmer hero, no animated net */
body.site-personal{
  --bg:#e6edf5;
  --bg-2:#d7e1ec;
  --surface:rgba(255,255,255,.82);
  --surface-strong:rgba(255,255,255,.96);
  --line:rgba(15,23,42,.09);
  --line-strong:rgba(15,23,42,.14);
  --muted:#52627a;
  --muted-2:#64748b;
  --accent:#0369a1;
  --accent-2:#6d28d9;
  --accent-3:#0f766e;
  --shadow:0 22px 56px rgba(15,23,42,.07)
}
body.site-personal{
  background:
    radial-gradient(circle at 8% -4%,rgba(56,189,248,.14),transparent 30%),
    radial-gradient(circle at 90% 8%,rgba(167,139,250,.12),transparent 32%),
    radial-gradient(circle at 56% 112%,rgba(45,212,191,.1),transparent 30%),
    linear-gradient(180deg,#eef4fa 0%,#e2eaf3 40%,#dbe5f1 100%)
}
body.site-personal::before,
body.site-personal::after{
  opacity:.4;
  animation:none!important
}
body.site-personal .ambient-orb{
  opacity:.28;
  filter:blur(30px);
  animation:none!important
}
body.site-personal .hero::before,
body.site-personal .hero::after{
  opacity:.14;
  animation:none!important
}
body.site-personal .hero-orbs{
  filter:saturate(106%)
}
body.site-personal .hero-orb{
  opacity:.34;
  filter:blur(16px)
}
body.site-personal .hero-orb::after{
  opacity:.54;
  filter:blur(22px)
}
body.site-personal .hero-network-bg{
  display:none!important
}
body.site-personal .personal-photo{
  border-color:rgba(2,132,199,.16);
  box-shadow:0 18px 48px rgba(15,23,42,.09)
}
body.site-codeward{
  --bg:#e6edf5;
  --bg-2:#d7e1ec;
  background:
    radial-gradient(circle at 8% -4%,rgba(56,189,248,.14),transparent 30%),
    radial-gradient(circle at 90% 8%,rgba(167,139,250,.12),transparent 32%),
    radial-gradient(circle at 56% 112%,rgba(45,212,191,.1),transparent 30%),
    linear-gradient(180deg,#eef4fa 0%,#e2eaf3 40%,#dbe5f1 100%)
}
body.site-codeward::before,
body.site-codeward::after{
  opacity:.4;
  animation:none!important
}
body.site-codeward .ambient-orb{
  opacity:.28;
  filter:blur(30px);
  animation:none!important
}

/* Witchcrafter landing page */
body.site-witchcrafter{
  --bg:#09070d;
  --bg-2:#16111b;
  --surface:rgba(18,14,24,.82);
  --surface-strong:rgba(22,17,30,.94);
  --line:rgba(245,158,11,.14);
  --line-strong:rgba(217,119,6,.26);
  --text:#f2e9df;
  --muted:#c7b7a8;
  --muted-2:#a89382;
  --accent:#d97706;
  --accent-2:#8b5cf6;
  --accent-3:#7f1d1d;
  --shadow:0 28px 70px rgba(0,0,0,.34);
  --content:820px;
  background:
    radial-gradient(circle at 14% -4%,rgba(124,58,237,.16),transparent 30%),
    radial-gradient(circle at 88% 10%,rgba(245,158,11,.09),transparent 26%),
    radial-gradient(circle at 52% 100%,rgba(59,130,246,.08),transparent 34%),
    linear-gradient(180deg,#08070b 0%,#0d0b11 34%,#131019 72%,#16131c 100%);
  color:var(--text)
}
body.site-witchcrafter .hero{
  background:
    radial-gradient(72% 78% at 18% 6%,rgba(124,58,237,.2),transparent 44%),
    radial-gradient(42% 48% at 84% 12%,rgba(245,158,11,.12),transparent 32%),
    radial-gradient(56% 60% at 70% 78%,rgba(59,130,246,.08),transparent 42%),
    linear-gradient(180deg,#08070b 0%,#0c0a10 38%,#121018 74%,#15121b 100%)
}
body.site-witchcrafter .site-header{
  backdrop-filter:blur(18px);
  background:linear-gradient(180deg,rgba(7,6,10,.94),rgba(10,9,14,.82));
  border-bottom:1px solid rgba(245,158,11,.14)
}
body.site-witchcrafter .menu-toggle{
  border-color:rgba(245,158,11,.18);
  background:rgba(255,255,255,.03);
  color:var(--text)
}
body.site-witchcrafter .brand-mark{
  color:#f6eee4;
  letter-spacing:-.045em;
  text-shadow:0 10px 26px rgba(127,29,29,.28)
}
body.site-witchcrafter .brand-sub{
  color:#d5a46c;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-size:.8rem
}
body.site-witchcrafter .site-nav a{
  color:var(--muted)
}
body.site-witchcrafter .site-nav a:hover,
body.site-witchcrafter .site-nav a:focus-visible{
  color:var(--text);
  background:rgba(255,255,255,.04)
}
body.site-witchcrafter .site-nav a.desktop-cta{
  color:#fff7ed;
  border-color:rgba(245,158,11,.28);
  background:linear-gradient(135deg,#7f1d1d 0%,#b45309 50%,#f59e0b 100%);
  box-shadow:0 18px 34px rgba(127,29,29,.28)
}
body.site-witchcrafter .site-nav a.desktop-cta:hover,
body.site-witchcrafter .site-nav a.desktop-cta:focus-visible{
  color:#fffaf4;
  background:linear-gradient(135deg,#991b1b 0%,#c2410c 52%,#f59e0b 100%)
}
body.site-witchcrafter .site-nav a.nav-lang-link{
  color:#e9d5ff;
  border-color:rgba(139,92,246,.24);
  background:rgba(139,92,246,.1)
}
body.site-witchcrafter .site-nav a.nav-lang-link:hover,
body.site-witchcrafter .site-nav a.nav-lang-link:focus-visible{
  background:rgba(139,92,246,.16);
  border-color:rgba(139,92,246,.36)
}
body.site-witchcrafter .eyebrow{
  border-color:rgba(245,158,11,.2);
  background:linear-gradient(135deg,rgba(245,158,11,.14),rgba(124,58,237,.12));
  color:#f4d8b7
}
body.site-witchcrafter .label{
  border-color:rgba(245,158,11,.2);
  background:linear-gradient(135deg,rgba(124,58,237,.14),rgba(245,158,11,.12));
  color:#f0d7bc
}
body.site-witchcrafter .hero-title,
body.site-witchcrafter .section-heading,
body.site-witchcrafter .cta-title{
  font-family:"Palatino Linotype","Book Antiqua",Georgia,serif;
  color:#f7efe6;
  letter-spacing:-.045em;
  text-shadow:0 14px 36px rgba(0,0,0,.32)
}
body.site-witchcrafter .hero-copy,
body.site-witchcrafter .section-copy,
body.site-witchcrafter .cta-copy,
body.site-witchcrafter .blog-copy,
body.site-witchcrafter .contact-copy{
  color:var(--muted)
}
body.site-witchcrafter .btn:hover,
body.site-witchcrafter .btn:focus-visible{
  box-shadow:0 18px 38px rgba(127,29,29,.22)
}
body.site-witchcrafter .btn-primary{
  color:#fff7ed;
  border-color:rgba(245,158,11,.28);
  background:linear-gradient(135deg,#7f1d1d 0%,#b45309 48%,#f59e0b 100%);
  box-shadow:0 20px 42px rgba(127,29,29,.26)
}
body.site-witchcrafter .btn-secondary{
  color:#f7efe6;
  border-color:rgba(245,158,11,.16);
  background:
    linear-gradient(135deg,rgba(124,58,237,.12),rgba(245,158,11,.08) 52%,rgba(255,255,255,.02)),
    rgba(14,12,19,.82)
}
body.site-witchcrafter .trust-bar{
  border-color:rgba(245,158,11,.12);
  background:
    radial-gradient(110% 120% at 10% 0%,rgba(124,58,237,.1),transparent 52%),
    radial-gradient(120% 120% at 100% 100%,rgba(245,158,11,.08),transparent 56%),
    linear-gradient(180deg,rgba(18,14,24,.88),rgba(12,10,18,.9))
}
body.site-witchcrafter .trust-title{
  color:#f1e6da
}
body.site-witchcrafter .pill{
  border-color:rgba(245,158,11,.14);
  background:linear-gradient(155deg,rgba(124,58,237,.12),rgba(245,158,11,.08) 58%,rgba(255,255,255,.02));
  color:#f0e2d2
}
body.site-witchcrafter .pill-icon,
body.site-witchcrafter .pill-icon .fa{
  color:#f59e0b
}
body.site-witchcrafter .card,
body.site-witchcrafter .showcase-card,
body.site-witchcrafter .process-card,
body.site-witchcrafter .faq-card,
body.site-witchcrafter .article-card,
body.site-witchcrafter .cta-shell{
  border-color:rgba(245,158,11,.12);
  background:
    radial-gradient(130% 120% at 12% 0%,rgba(124,58,237,.12),transparent 52%),
    radial-gradient(130% 120% at 100% 100%,rgba(245,158,11,.08),transparent 56%),
    linear-gradient(180deg,rgba(18,14,24,.95),rgba(11,10,17,.94));
  box-shadow:
    0 24px 56px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.04),
    inset 0 -1px 0 rgba(255,255,255,.02)
}
body.site-witchcrafter .card:hover,
body.site-witchcrafter .showcase-card:hover,
body.site-witchcrafter .process-card:hover,
body.site-witchcrafter .faq-card:hover,
body.site-witchcrafter .article-card:hover{
  box-shadow:
    0 30px 62px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.05),
    0 0 0 1px rgba(245,158,11,.08)
}
body.site-witchcrafter .card h3,
body.site-witchcrafter .showcase-card h3,
body.site-witchcrafter .process-card h3,
body.site-witchcrafter .article-card h3,
body.site-witchcrafter .faq-card summary{
  color:#f4ece4
}
body.site-witchcrafter .card p,
body.site-witchcrafter .process-card p,
body.site-witchcrafter .showcase-card p,
body.site-witchcrafter .article-card p,
body.site-witchcrafter .faq-card p{
  color:var(--muted)
}
body.site-witchcrafter .panel{
  border-color:rgba(245,158,11,.14);
  background:
    radial-gradient(115% 120% at 8% 0%,rgba(124,58,237,.14),transparent 58%),
    radial-gradient(115% 120% at 100% 100%,rgba(245,158,11,.08),transparent 58%),
    linear-gradient(180deg,rgba(20,15,26,.96),rgba(12,10,18,.95));
  box-shadow:0 24px 54px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.04)
}
body.site-witchcrafter .icon{
  color:#f59e0b
}
body.site-witchcrafter .check{
  color:#fff7ed;
  background:linear-gradient(135deg,#d97706,#7f1d1d);
  box-shadow:0 10px 24px rgba(127,29,29,.28)
}
body.site-witchcrafter .showcase-media{
  border-bottom-color:rgba(245,158,11,.1);
  background:linear-gradient(180deg,#120e16,#19141f)
}
body.site-witchcrafter .showcase-card__link:focus-visible{
  outline-color:#f59e0b
}
body.site-witchcrafter .link-inline,
body.site-witchcrafter .footer-links a,
body.site-witchcrafter .social-links a{
  color:#f0d7bc
}
body.site-witchcrafter .footer-links a:hover,
body.site-witchcrafter .social-links a:hover,
body.site-witchcrafter .link-inline:hover{
  color:#fff7ed
}
body.site-witchcrafter .site-footer{
  border-top:1px solid rgba(245,158,11,.12);
  background:linear-gradient(180deg,rgba(9,8,13,0),rgba(9,8,13,.72) 24%,rgba(7,6,10,.94) 100%)
}
body.site-witchcrafter .footer-sub{
  color:var(--muted-2)
}
body.site-witchcrafter details summary::after{
  color:#f59e0b
}
body.site-witchcrafter .hero-network-bg::before{
  background:
    radial-gradient(44rem 26rem at 12% 26%,rgba(59,130,246,.08),transparent 72%),
    radial-gradient(38rem 24rem at 88% 18%,rgba(124,58,237,.08),transparent 74%),
    radial-gradient(26rem 18rem at 52% 86%,rgba(245,158,11,.05),transparent 74%),
    radial-gradient(18rem 14rem at 74% 62%,rgba(56,189,248,.05),transparent 76%),
    linear-gradient(128deg,rgba(59,130,246,.035),rgba(124,58,237,.035),rgba(245,158,11,.025));
  opacity:.42
}
body.site-witchcrafter .hero-network-bg::after{
  background:
    radial-gradient(circle at 28% 44%,rgba(59,130,246,.08),rgba(125,211,252,.025) 52%,transparent 72%),
    radial-gradient(circle at 74% 66%,rgba(167,139,250,.08),rgba(196,181,253,.02) 56%,transparent 74%),
    radial-gradient(circle at 58% 24%,rgba(245,158,11,.04),rgba(253,230,138,.015) 54%,transparent 74%);
  opacity:.72
}
body.site-witchcrafter .hero-net-canvas{
  opacity:.56;
  filter:drop-shadow(0 0 16px rgba(59,130,246,.12))
}
body.site-witchcrafter .hero::before{
  background:radial-gradient(circle,rgba(124,58,237,.18),rgba(124,58,237,.04) 60%,transparent 74%);
  opacity:.24
}
body.site-witchcrafter .hero::after{
  background:radial-gradient(circle,rgba(245,158,11,.12),rgba(245,158,11,.03) 58%,transparent 74%);
  opacity:.18
}
.hero-grid--game{
  grid-template-columns:minmax(0,1fr) minmax(320px,38vw);
  gap:clamp(1.5rem,3vw,3rem)
}
.hero-grid--game .hero-shell{
  max-width:44rem
}
.game-hero-media{
  position:relative;
  display:grid;
  gap:1rem;
  align-self:stretch;
  justify-self:end;
  width:min(100%,34rem)
}
.game-cover{
  padding:clamp(1rem,2vw,1.25rem);
  border-radius:calc(var(--radius) - 4px);
  background:
    radial-gradient(115% 110% at 14% 0%,rgba(124,58,237,.24),transparent 50%),
    radial-gradient(90% 90% at 86% 10%,rgba(245,158,11,.16),transparent 48%),
    linear-gradient(180deg,#0d0b12 0%,#17131d 100%);
  border:1px solid rgba(245,158,11,.16);
  box-shadow:0 36px 72px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.06),0 0 0 1px rgba(124,58,237,.08)
}
.game-cover img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.06)
}
.game-caption{
  margin:0;
  color:var(--muted-2);
  font-size:1rem;
  line-height:1.65
}
.game-gallery{
  grid-template-columns:repeat(2,minmax(0,1fr))
}
.game-gallery .showcase-media{
  aspect-ratio:16/9;
  background:#0b1220
}
.game-gallery .showcase-media img{
  object-fit:cover;
  filter:saturate(.94) contrast(1.04)
}
.game-gallery .showcase-body{
  gap:.7rem
}
.game-awards .card h3{
  margin-top:.35rem
}
@media (max-width:1240px){
  .game-hero-media{
    margin-inline:auto;
    justify-self:stretch
  }
}
@media (max-width:760px){
  .showcase-grid--games{
    grid-template-columns:1fr
  }
  body.site-witchcrafter .hero-title,
  body.site-witchcrafter .section-heading,
  body.site-witchcrafter .cta-title{
    letter-spacing:-.035em
  }
  .game-gallery{
    grid-template-columns:1fr
  }
  .game-cover{
    padding:.9rem
  }
}

/* Readable blog article body text (2026-10-10) */
.article-body p,.article-body li{font-size:1.125rem;line-height:1.7}
@media (max-width:760px){
  .article-body p,.article-body li{font-size:1.0625rem;line-height:1.68}
}

/* --- Article carousel (2026-10-13): flex + scroll-snap, fixed card width --- */
.article-viewport{
  --cards:4;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  padding:.4rem .1rem 1rem;
  margin:-.4rem -.1rem -1rem
}
.article-viewport::-webkit-scrollbar{display:none}
.article-track{
  display:flex;
  gap:1.2rem;
  align-items:stretch;
  transform:none!important;
  will-change:auto
}
.article-track>.article-card{
  flex:0 0 calc((100% - (var(--cards) - 1) * 1.2rem) / var(--cards));
  min-width:0;
  scroll-snap-align:start
}
@media (max-width:1199px){.article-viewport{--cards:3}}
@media (max-width:899px){.article-viewport{--cards:2}}
@media (max-width:599px){.article-track>.article-card{flex-basis:85%}}
.carousel-btn:disabled{opacity:.4;cursor:default;transform:none}