:root {


    --background: 225 25% 8%;
    --foreground: 210 40% 98%;

    --card: 225 25% 12%;
    --card-foreground: 210 40% 98%;

    --popover: 225 25% 12%;
    --popover-foreground: 210 40% 98%;


    --primary: 189 100% 50%;
    --primary-foreground: 225 25% 8%;

    --secondary: 0 100% 60%;
    --secondary-foreground: 210 40% 98%;

    --accent: 48 100% 50%;
    --accent-foreground: 225 25% 8%;

    --muted: 225 25% 15%;
    --muted-foreground: 215 20% 65%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

    --border: 225 25% 20%;
    --input: 225 25% 15%;
    --ring: 189 100% 50%;

    --radius: 0.75rem;


    --webbe-cyan: 189 100% 50%;
    --webbe-red: 0 100% 60%;
    --webbe-yellow: 48 100% 50%;
    --webbe-white: 0 0% 100%;


    --gradient-brand: linear-gradient(135deg, hsl(var(--webbe-cyan)), hsl(var(--webbe-red)));
    --gradient-accent: linear-gradient(135deg, hsl(var(--webbe-red)), hsl(var(--webbe-yellow)));
    --gradient-subtle: linear-gradient(180deg, hsl(var(--background)), hsl(var(--muted)));


    --shadow-glow: 0 0 40px hsl(var(--webbe-cyan) / 0.3);
    --shadow-card: 0 10px 30px -10px hsl(0 0% 0% / 0.5);


    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    --sidebar-background: 0 0% 98%;

    --sidebar-foreground: 240 5.3% 26.1%;

    --sidebar-primary: 240 5.9% 10%;

    --sidebar-primary-foreground: 0 0% 98%;

    --sidebar-accent: 240 4.8% 95.9%;

    --sidebar-accent-foreground: 240 5.9% 10%;

    --sidebar-border: 220 13% 91%;

    --sidebar-ring: 217.2 91.2% 59.8%;

  --ease-out: cubic-bezier(0.2, 0.7, 0.25, 1);
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 300ms;
  --radius: 20px;


  --hero-title-size: 4.5rem;
  --hero-title-tracking: -0.02em;
  --hero-sub-size: 1.25rem;
  --hero-logo-bottom: 2rem;
  --hero-title-bottom: 1.25rem;
  --hero-sub-bottom: 2.25rem;
}

* { box-sizing: border-box }
html, body { height: 100% }
body { margin:0; font-family: 'Heebo', sans-serif;
        background: hsl(var(--background)); color: hsl(var(--foreground)); line-height: 1.65 }

.container { width: min(1160px, 100%); margin: 0 auto; padding: 0 1.5rem }


.hero { position:relative; padding: 5rem 0 2rem; overflow:hidden; border-bottom: 1px solid hsl(var(--border)); }
.hero::before {
  content:""; position:absolute; inset:-15% -10% 0 -10%; pointer-events:none; z-index:0;
  background-color: #10121a;
  filter: saturate(1.02);
}
.hero::after {
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27160%27%20height%3D%27160%27%3E%0A%20%20%3Cfilter%20id%3D%27n%27%3E%0A%20%20%20%20%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.8%27%20numOctaves%3D%272%27%20stitchTiles%3D%27stitch%27/%3E%0A%20%20%20%20%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27/%3E%0A%20%20%20%20%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D%27table%27%20tableValues%3D%270%200.03%27/%3E%3C/feComponentTransfer%3E%0A%20%20%3C/filter%3E%0A%20%20%3Crect%20width%3D%27100%25%25%27%20height%3D%27100%25%25%27%20filter%3D%27url%28%23n%29%27%20opacity%3D%270.35%27/%3E%0A%3C/svg%3E");
  opacity: .06; mix-blend-mode: overlay;
}
.hero-inner { position:relative; z-index:2; text-align:center;padding-bottom: 3em;}

.webbe-logo { font-weight: 900; letter-spacing: -.07em; font-size: 3.75rem; margin-bottom: 0; }
.hero-title { margin:0; font-weight:900; background: var(--gradient-brand); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
               letter-spacing: 0; font-size: 12rem; margin-bottom: 0; line-height: 1.3em;}

.hero-sub {  margin: 0 auto var(--hero-sub-bottom); color: hsl(var(--muted-foreground)); font-size:0.9rem; font-weight: bolder;margin-bottom:0;padding-bottom: 3em;text-transform: uppercase;letter-spacing: 3px;}

.btns { display:flex; flex-wrap:wrap; justify-content:center; gap:1rem; }
.btn { display:inline-flex; align-items:center; gap:.5rem; border-radius:12px; padding:.9rem 1.2rem; border:1px solid hsl(var(--border));
        background:hsl(var(--card)/.6); color:hsl(var(--foreground)); transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out) }
.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 40px hsl(var(--shadow)/.28) }
.btn-outline { background: transparent }
.glow-cyan { box-shadow: var(--shadow-glow) }


.section-head { text-align:center; margin: 2.25rem 0 1.25rem; }
.section-title { font-size: 2rem; font-weight: 800; letter-spacing: -.01em; margin: 0 0 .5rem; }
.section-sub { max-width: 56ch; margin: 0 auto; color: hsl(var(--muted-foreground)); }


.triggers { display:flex; flex-wrap:wrap; justify-content:center; gap:1rem; margin: 1.5rem 0 1.25rem; }
.case-trigger { padding: .9rem 1.4rem; font-size: 1.0625rem; font-weight: 700; border-radius: 999px; border:1px solid hsl(var(--border));
                 background: transparent; color: inherit; cursor:pointer;
                 transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), background var(--dur) var(--ease-out) }
.case-trigger .num { margin-right: .55rem; opacity:.7; font-size: .85rem }
.case-trigger:hover { background: hsl(var(--muted) / .5) }
.case-trigger.active { background: linear-gradient(90deg, hsl(var(--primary)), hsl(var(--accent))); color:hsl(var(--primary-foreground));
                        box-shadow: 0 12px 38px hsl(var(--primary)/.25); transform: scale(1.03) }


.case-panel{display:none;margin-top:1rem;border:1px solid hsl(var(--border));border-radius:24px;background:linear-gradient(180deg,hsl(var(--card)/.94),hsl(var(--card)/.86));box-shadow:0 18px 60px hsl(var(--shadow)/.4);}
.case-panel.active{display:block;}


@media (max-width: 960px) {  }


.mosaic {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  grid-auto-rows: 8px;
  gap: .5rem;
  grid-auto-flow: dense;
  align-items: start;margin-top: .75rem;margin-left:.75rem;margin-bottom: .75rem;
}
.tile {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  transform: translateZ(0);

}
.tile img {
  display: block;
  width: 100%;
  height: auto;
  transform: scale(1);
  transition: transform 700ms var(--ease-soft);
}
.tile .hover-layer {
  position:absolute; inset:0;
  background: radial-gradient(55% 55% at 50% 50%, hsl(var(--primary)/.16), transparent 72%),
              linear-gradient(180deg, transparent 50%, hsl(var(--background)/.45));
  opacity: 0;
  transition: opacity 300ms var(--ease-soft);
  pointer-events: none;
}
.tile:hover img { transform: scale(1.06) }
.tile:hover .hover-layer { opacity: 1 }


.tile.big, .tile.small { grid-column: auto; grid-row: auto; }


.details { display:flex; }
.stack { display:flex; flex-direction: column; gap: .8rem; justify-content: flex-start }
.stack .kicker { font-size: .9rem; color: hsl(var(--muted-foreground)); margin-top: 0.5em;margin-bottom: 0;}
.stack .title { font-size: 1.65rem; font-weight: 900; margin: 0 }
.stack .subtitle { color: hsl(var(--muted-foreground)) }
.stack .desc { margin-top: .2rem }
.stack .feat { margin: 0 0 .2rem 1rem }
.stack .quote { font-style: italic; margin-top: .2rem }
.meta { display:grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: .25rem }
.meta .label { font-size: .8rem; color: hsl(var(--muted-foreground)) }
.meta .value { font-weight: 600 }
.tags .badge { font-size: .75rem }
.badge { display:inline-block; background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-radius: 999px; padding: .2rem .6rem }
.first-row{border-bottom:1px solid rgba(255,255,255,0.3);padding: 20px 0;}

.section { padding: 2rem 0 2.5rem }

footer { border-top: 1px solid hsl(var(--border)); padding: 2.5rem 1rem; text-align:center; color:hsl(var(--muted-foreground)) }
.card-content {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  background: hsl(var(--card));
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}

.card-title {
  font-size: 3.5rem;
  font-weight: 900;
  line-height: 1em;

  color: transparent;
    -webkit-text-stroke: 2px #fff;
    font-weight: 400 !important;
  margin: 0;
      text-transform: uppercase;
    font-family: "Archivo Black", sans-serif;
}


.card-subtitle {
  font-size: 1.1rem;
  color: hsl(var(--accent));
  font-weight: 700;
  margin: 0;line-height: 1.2em;
}

.card-desc {
  font-size: 1rem;
  color: hsl(var(--muted-foreground));
}

.card-section {
  background: hsl(var(--muted) / 0.4);
  border-radius: 0.75rem;
  padding: 1rem;
}

.card-section h4 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  color: hsl(var(--foreground));
}

.tech-badge {
  display: inline-block;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  padding: 0.25rem 0.75rem;
  font-size: 0.8rem;
  border-radius: 999px;
  margin-right: 0.5rem;
  margin-bottom: 0.3rem;
}

.rating {
  display: flex;
  gap: 0.25rem;
  margin-top: 0.5rem;
}
.rating span {
  width: 0.9rem;
  height: 0.9rem;
  background: gold;
  border-radius: 50%;
}
@media (min-width: 960px) {

}
.stack{padding: 1em 1em 1em 0em;}


#case-0 .ba-slider{
  --pos: 50%;
  position: relative;
  aspect-ratio: 16/9;
  border-radius: 16px;
  overflow: clip;
  background: hsl(var(--muted));
  box-shadow: 0 18px 60px hsl(0 0% 0% / .4);
  margin-bottom: .75rem;margin-top: .75rem;margin-left: .75rem;
}
#case-0 .ba-slider img{
  width:100%; height:100%; object-fit:cover; display:block;
  user-select:none; pointer-events:none;
}
#case-0 .ba-after{ position:absolute; inset:0;
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
  transition: clip-path 120ms var(--ease-soft);
}
#case-0 .ba-divider{ position:absolute; top:0; bottom:0;
  left: var(--pos); transform: translateX(-50%);
  width:4px; background: #fff;
}
#case-0 .ba-divider::after{
  content:"⇔"; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:34px; height:34px; border-radius:999px;
  background: hsl(var(--background)); border:4px solid #fff;
  box-shadow: 0 6px 20px hsl(var(--webbe-cyan) / .3);text-align: center;line-height: 1.6em;font-size: 1.3rem;;
}
#case-0 .ba-handle{
  position:absolute; inset:0; width:100%; height:100%;
  appearance:none; background:transparent; cursor:ew-resize;
}
#case-0 .ba-handle:focus{ outline:none; }
#case-0 .ba-handle::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:34px; height:34px; background:transparent; border:none; }
#case-0 .ba-handle::-moz-range-thumb{ width:34px; height:34px; background:transparent; border:none; }
#case-0 .ba-label{
  position:absolute; top:10px; font-size:.8rem; font-weight:800; letter-spacing:.06em;
  background: hsl(var(--background) / .7); backdrop-filter: blur(6px);
  border:1px solid hsl(var(--border)); color:hsl(var(--foreground));
  padding:.25rem .55rem; border-radius:999px;
}
#case-0 .ba-left{ left:10px; }
#case-0 .ba-right{ right:10px; }
@media (max-width: 640px){
  #case-0 .ba-slider{ aspect-ratio: 4/3;}
}
 .btn-return{text-transform: uppercase;font-size: 0.75rem; letter-spacing: 1px;background-color: #ffce00;border-radius:2em;font-family: "Archivo Black", sans-serif;font-weight: bolder;text-decoration: none;color:#10121a;}


.inline-style-1 {position:fixed;top:0;left:0;width:100%;z-index:999;
  backdrop-filter:blur(12px);background-color:hsl(var(--background)/0.6);
  border-bottom:1px solid hsl(var(--border));padding:0.75rem 2rem;
  display:flex;justify-content:space-between;align-items:center}
.inline-style-2 {font-size: 1.5rem; margin: 0}
.inline-style-3 {color:hsl(var(--webbe-cyan))}
.inline-style-4 {color:hsl(var(--webbe-white))}
.inline-style-5 {color:hsl(var(--webbe-red))}
.inline-style-6 {color:hsl(var(--webbe-yellow))}
.inline-style-7 {color:hsl(var(--webbe-white))}
.inline-style-8 {color:hsl(var(--webbe-red))}
.inline-style-9 {color:hsl(var(--webbe-cyan))}
.inline-style-10 {color:hsl(var(--webbe-white))}
.inline-style-11 {color:hsl(var(--webbe-yellow))}
.inline-style-12 {font-size: 3rem; font-weight: 900; margin-bottom: 2rem; background: linear-gradient(to right, hsl(var(--webbe-cyan)), hsl(var(--webbe-red)), hsl(var(--webbe-yellow))); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent}
.inline-style-13 {color:hsl(var(--primary)); font-weight: bold; text-transform: uppercase}
.inline-style-14 {margin: 0; padding-left: 0;}
.inline-style-15 {color:hsl(var(--primary)); font-weight: bold; text-transform: uppercase}
.inline-style-16 {margin: 0; padding-left: 0}
.inline-style-17 {color:hsl(var(--primary)); font-weight: bold; text-transform: uppercase}
.inline-style-18 {margin: 0; padding-left: 0}

.panel-wrap { display: block !important; }
.row { display: flex; flex-wrap: wrap; margin-left: -0.75rem; margin-right: -0.75rem; }
.row > [class*="col-"] { padding-left: 0.75rem; padding-right: 0.75rem; }
.col-12 { flex: 0 0 100%; max-width: 100%; }
.col-lg-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }
.col-lg-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
@media (max-width: 992px) {
  .col-lg-8, .col-lg-4 { flex: 0 0 100%; max-width: 100%; }
}

.col-lg-6 { flex: 0 0 50%; max-width: 50%; }

@media (max-width: 992px){
  .col-lg-6 { flex: 0 0 100%; max-width: 100%; }
}

.g-4 { row-gap: 2rem; }

.mb-3 { margin-bottom: 1rem; }
.mt-3 { margin-top: 1rem; }
ul{list-style: none;margin-left: 0;}



.marquee {
  width: 100%;
  overflow: hidden;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  white-space: nowrap;
  border-top: 1px solid hsl(var(--border));
  border-bottom: 1px solid hsl(var(--border));
}
.marquee div span.pieno {
  padding-top: 0;padding-bottom: 0;margin-top: 0;margin-bottom: 0;
  padding: 0 0;
  font-size: 6rem;
  font-weight: bolder;
  letter-spacing: 0.05em;text-transform: uppercase;font-family: "Archivo Black", sans-serif;
}

.marquee div span span.empty{ color: transparent;
  -webkit-text-stroke: 2px #fff; font-weight: 400 !important;}

.marquee-inner {
  display: inline-flex;
  animation: scroll-left 40s linear infinite;
}

@keyframes scroll-left {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.marquee-inner2 {
  display: inline-flex;
  margin-left: -90%;
  animation: scroll-left2 40s linear infinite;
}

@keyframes scroll-left2 {
  0%   { transform: translateX(0); }
  100% { transform: translateX(50%); }
}

.marquee-inner3 {
  display: inline-flex;
  animation: scroll-left3 40s linear infinite;
}

@keyframes scroll-left3 {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}


@media (min-width: 992px){
  .order-lg-1 { order: 1; }
  .order-lg-2 { order: 2; }
}


#case-0 .mosaic { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 640px){
  #case-0 .mosaic { grid-template-columns: 1fr; }
}
.btn-portfolio{background-color: #00dbff;color: #14151f;}
.btn-portfolio:hover{background-color: #FFCE00;color: #14151f;}

.mosaic .tile--full { 
  grid-column: 1 / -1 !important; 
}
.mosaic .tile--full img {
  position: static;  
  width: 100%;
  height: auto;
  object-fit: contain;
}