:root{
  --bg:#f4efe6;
  --surface:#fffaf2;
  --surface-strong:#ffffff;
  --text:#1d2433;
  --muted:#58627a;
  --line:rgba(29,36,51,.12);
  --brand:#0f3fd1;
  --brand-dark:#0a287f;
  --accent:#c46a2e;
  --shadow:0 22px 60px rgba(24,35,62,.12);
  --radius-xl:28px;
  --radius-lg:20px;
}

html{
  scroll-behavior:smooth;
}

section[id]{
  scroll-margin-top:104px;
}

body{
  background:
    radial-gradient(circle at top left, rgba(196,106,46,.18), transparent 28%),
    radial-gradient(circle at top right, rgba(15,63,209,.14), transparent 32%),
    linear-gradient(180deg, #f7f2e8 0%, #f4efe6 100%);
  color:var(--text);
  font-family:"Space Grotesk","Roboto",sans-serif;
}

.v-application{
  color:var(--text);
  background:transparent !important;
}

.v-toolbar__title,
.display-4,
.display-3,
.display-2,
.display-1,
.headline{
  font-family:"Fraunces","Roboto Slab",serif !important;
  letter-spacing:-.03em !important;
}

.v-app-bar .v-toolbar__title{
  position:relative;
  top:-1px;
  margin-left:4px;
  font-size:clamp(1.1rem,1.1vw,1.35rem) !important;
  line-height:1 !important;
  font-weight:700 !important;
  color:var(--brand-dark) !important;
  letter-spacing:-.035em !important;
  text-transform:none !important;
  white-space:nowrap;
}

.v-app-bar .v-toolbar__title span{
  position:relative;
  display:inline-block;
  padding:10px 16px 11px;
  border-radius:999px;
  background:linear-gradient(135deg, rgba(255,255,255,.94) 0%, rgba(248,242,233,.92) 100%);
  box-shadow:
    0 10px 28px rgba(24,35,62,.08),
    inset 0 0 0 1px rgba(29,36,51,.06);
}

.v-app-bar .v-toolbar__title span::after{
  content:"";
  position:absolute;
  left:16px;
  right:16px;
  bottom:7px;
  height:1px;
  background:linear-gradient(90deg, rgba(196,106,46,.0), rgba(196,106,46,.45), rgba(15,63,209,.0));
}

.v-app-bar{
  background:rgba(255,250,242,.82) !important;
  backdrop-filter:blur(18px);
  box-shadow:0 12px 32px rgba(22,30,54,.08) !important;
  border-bottom:1px solid rgba(29,36,51,.08);
  z-index:1000 !important;
  pointer-events:auto !important;
}

#app-bar{
  position:fixed !important;
  top:0;
  left:0;
  right:0;
  z-index:5000 !important;
  pointer-events:auto !important;
}

#app-bar .v-toolbar__content,
#app-bar .v-btn,
#app-bar .v-toolbar__title,
#app-bar .v-app-bar__nav-icon{
  position:relative;
  z-index:5001 !important;
  pointer-events:auto !important;
}

.v-navigation-drawer,
.v-overlay{
  z-index:5002 !important;
}

.v-app-bar .v-btn{
  letter-spacing:.02em;
  font-weight:700;
  border-radius:999px !important;
  min-width:auto !important;
  padding:0 14px !important;
  transition:background-color .2s ease, transform .2s ease;
}

.v-app-bar .v-btn:hover{
  background:rgba(255,255,255,.46) !important;
  transform:translateY(-1px);
}

.top[data-v-9c6d6920]{
  position:relative;
  overflow:hidden;
  background-image:
    linear-gradient(135deg, rgba(247,242,232,.88) 8%, rgba(247,242,232,.62) 44%, rgba(255,255,255,.12) 100%),
    url(../img/berlin_003.61c9af2d.png) !important;
  background-size:cover !important;
  background-position:center bottom !important;
}

.top[data-v-9c6d6920]::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 15% 20%, rgba(196,106,46,.22), transparent 24%),
    radial-gradient(circle at 85% 15%, rgba(15,63,209,.18), transparent 26%);
  pointer-events:none;
}

.top[data-v-9c6d6920] > *{
  position:relative;
  z-index:1;
}

.top[data-v-9c6d6920]{
  z-index:0;
}

#home,
#home .home,
#home .v-layout{
  position:relative;
  z-index:1;
}

#home,
#home .home,
#home .v-layout,
#home .v-layout > div{
  pointer-events:none;
}

#home .v-btn,
#home a,
#home button{
  pointer-events:auto;
}

#home .home{
  min-height:100vh;
}

#services,
#about,
#impact,
#contact{
  padding:clamp(28px,5vw,72px) 0;
}

#certificates{
  display:none !important;
}

#about,
#impact,
#contact{
  margin-top:clamp(8px,2vw,24px);
}

#home .display-4,
#home .display-2{
  max-width:10ch;
  font-size:clamp(3.3rem,9vw,6.4rem) !important;
  line-height:.88 !important;
  color:var(--brand-dark) !important;
  letter-spacing:-.05em !important;
  text-shadow:0 10px 34px rgba(255,255,255,.34);
  margin-bottom:.35rem;
}

#home .display-1{
  margin-top:1.15rem;
  max-width:28ch;
  font-size:clamp(1.05rem,1.8vw,1.42rem) !important;
  line-height:1.5 !important;
  color:#34405a !important;
  font-weight:600 !important;
  letter-spacing:.01em !important;
}

#home .display-1::before{
  content:"";
  display:block;
  width:78px;
  height:4px;
  margin:0 auto 18px;
  border-radius:999px;
  background:linear-gradient(90deg, var(--accent) 0%, var(--brand) 100%);
  box-shadow:0 8px 18px rgba(15,63,209,.18);
}

#home .v-layout{
  max-width:min(1040px, 100%);
  margin:0 auto;
}

#home .v-layout::before{
  content:"";
  position:absolute;
  inset:92px auto auto 50%;
  width:min(760px, calc(100% - 36px));
  height:380px;
  transform:translateX(-50%);
  border-radius:40px;
  background:linear-gradient(180deg, rgba(255,250,242,.74) 0%, rgba(255,250,242,.28) 100%);
  box-shadow:
    0 28px 80px rgba(24,35,62,.1),
    inset 0 0 0 1px rgba(255,255,255,.42);
  backdrop-filter:blur(10px);
}

#home .v-layout > div:nth-child(3),
#home .v-layout > div:nth-child(4){
  position:relative;
  z-index:2;
  padding-left:clamp(10px,2vw,22px);
  padding-right:clamp(10px,2vw,22px);
}

#home .v-layout > div:nth-child(3){
  position:relative;
}

#home .v-layout > div:nth-child(3)::after{
  content:"Digital projects with clarity, structure and momentum";
  display:block;
  margin-top:18px;
  font-family:"Space Grotesk","Roboto",sans-serif;
  font-size:clamp(.78rem,1vw,.92rem);
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(10,40,127,.72);
}

#home .v-btn.v-btn--fab{
  border-width:2px !important;
  width:72px !important;
  height:72px !important;
  background:rgba(255,255,255,.72) !important;
  box-shadow:var(--shadow);
  position:relative;
  z-index:2;
}

#services .v-sheet,
#impact .v-sheet{
  background:transparent !important;
}

#services .v-container,
#about .v-container,
#impact .v-container,
#contact .v-container{
  position:relative;
}

#services .v-card,
#impact .v-card{
  border:1px solid rgba(29,36,51,.08);
  border-radius:var(--radius-xl) !important;
  background:rgba(255,255,255,.82) !important;
  backdrop-filter:blur(14px);
  box-shadow:var(--shadow) !important;
  overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease;
}

#services .v-card:hover,
#impact .v-card:hover{
  transform:translateY(-6px);
  box-shadow:0 28px 70px rgba(24,35,62,.18) !important;
}

#services .v-avatar.icon{
  background:linear-gradient(135deg, var(--brand) 0%, #5f8cff 100%) !important;
  box-shadow:0 16px 36px rgba(15,63,209,.28);
}

.serviceText[data-v-79660878],
.aboutText[data-v-3d142a38]{
  color:var(--muted);
  line-height:1.8;
}

#about .v-sheet{
  margin:0 auto;
  max-width:min(1120px,calc(100% - 32px));
  background:rgba(255,251,244,.84) !important;
  border:1px solid rgba(29,36,51,.08);
  border-radius:32px !important;
  box-shadow:var(--shadow);
}

#about .v-avatar{
  width:160px !important;
  height:160px !important;
  box-shadow:0 20px 45px rgba(24,35,62,.16);
}

.aboutTextContainer[data-v-3d142a38]{
  max-width:min(760px,100%) !important;
}

#impact .v-card__title{
  color:var(--brand-dark);
  font-weight:800;
  line-height:1.2;
}

#impact .v-btn{
  color:var(--accent) !important;
  font-weight:800;
}

#contact .contact-form{
  max-width:1120px !important;
  padding:40px clamp(20px,4vw,48px);
  border:1px solid rgba(29,36,51,.08);
  border-radius:32px;
  background:rgba(255,251,244,.88);
  box-shadow:var(--shadow);
}

#contact .v-input__slot,
#contact .v-input--selection-controls{
  border-radius:18px !important;
}

#contact .v-text-field > .v-input__control > .v-input__slot{
  background:#fff !important;
  box-shadow:inset 0 0 0 1px rgba(29,36,51,.08);
}

#contact .v-label{
  color:var(--muted) !important;
}

#contact .v-btn[type="submit"]{
  min-width:160px;
  border-radius:999px !important;
  background:linear-gradient(135deg, var(--brand) 0%, #5f8cff 100%) !important;
  box-shadow:0 18px 36px rgba(15,63,209,.24);
  letter-spacing:.04em;
  font-weight:800;
}

.Cookie--base{
  border-top:1px solid rgba(29,36,51,.08);
  background:rgba(255,250,242,.96) !important;
  backdrop-filter:blur(10px);
  box-shadow:0 -10px 30px rgba(24,35,62,.06);
}

.Cookie--base .Cookie__button{
  border-radius:999px !important;
  padding:0 18px !important;
}

.v-footer{
  margin:28px 16px 16px;
  border-radius:28px !important;
  background:linear-gradient(135deg, #0b1e57 0%, #1038b9 100%) !important;
  box-shadow:0 24px 50px rgba(12,27,76,.24);
  overflow:hidden;
}

.v-footer::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.16), transparent 28%),
    linear-gradient(90deg, rgba(255,255,255,.04), transparent 36%);
  pointer-events:none;
}

.v-footer .v-btn{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
}

.v-footer .title{
  letter-spacing:.01em;
}

@media (max-width:960px){
  #home .display-4,
  #home .display-2{
    max-width:12ch;
  }

  #contact .contact-form{
    padding:28px 18px;
  }

  .v-footer{
    margin:16px 10px 10px;
  }

  #home .v-layout::before{
    width:min(700px, calc(100% - 30px));
    height:350px;
  }

}

@media (max-width:600px){
  .v-app-bar{
    backdrop-filter:none;
  }

  .v-app-bar .v-toolbar__title{
    font-size:1.02rem !important;
  }

  .v-app-bar .v-toolbar__title span{
    padding:8px 12px 9px;
  }

  .v-app-bar .v-btn{
    padding:0 10px !important;
  }

  #services,
  #about,
  #impact,
  #contact{
    padding:28px 0;
  }

  #home .display-1{
    text-align:center;
  }

  #home .v-layout::before{
    inset:86px auto auto 50%;
    width:calc(100% - 22px);
    height:330px;
    border-radius:24px;
  }

  #home .display-1::before{
    margin-bottom:14px;
  }

  #home .v-layout > div:nth-child(3)::after{
    margin-top:14px;
    font-size:.72rem;
    letter-spacing:.14em;
  }

  #services .v-card,
  #impact .v-card,
  #about .v-sheet,
  #contact .contact-form{
    border-radius:22px !important;
  }

  #impact .v-card{
    height:auto !important;
    min-height:0 !important;
  }
}