/* === Fonts === */
@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'InterDisplay';
  src: url('/fonts/InterDisplay-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'InterDisplay';
  src: url('/fonts/InterDisplay-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'InterDisplay';
  src: url('/fonts/InterDisplay-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* === Base === */
:root {
  --font-display: 'InterDisplay', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --bs-surface-0: #121212;
  --bs-surface-1: #18181B;
  --bs-surface-2: rgba(255,255,255,0.03);
  --bs-surface-3: #2F2F31;
  --bs-foreground-light: #eee;
  --bs-foreground-dark: #9f9f9f;
  --ease-bs-bounce: linear(0,.01,.04 1.6%,.161 3.3%,.816 9.4%,1.046,1.189 14.4%,1.231,1.254 17%,1.259,1.257 18.6%,1.236,1.194 22.3%,1.057 27%,.999 29.4%,.955 32.1%,.942,.935 34.9%,.933,.939 38.4%,1 47.3%,1.011,1.017 52.6%,1.016 56.4%,1 65.2%,.996 70.2%,1.001 87.2%,1);
  --ease-bs-spring: linear(0,0.009,0.035 2.1%,0.141,0.281 6.7%,0.723 12.9%,0.938 16.7%,1.017,1.077,1.121,1.149 24.3%,1.159,1.163,1.161,1.154 29.9%,1.129 32.8%,1.051 39.6%,1.017 43.1%,0.991,0.977 51%,0.974 53.8%,0.975 57.1%,0.997 69.8%,1.003 76.9%,1.004 83.8%,1);
  color-scheme: dark;
  scroll-behavior: smooth;
  scroll-padding-top: 2em;
}

*,*::before,*::after{box-sizing:border-box}

body {
  margin: 0;
  background: var(--bs-surface-1);
  color: var(--bs-foreground-light);
  font-family: var(--font-body);
}
::selection{background:#fbbf24;color:#000}

/* === Typography === */
.bs-h1{font-family:var(--font-display);font-weight:500;text-wrap:balance;font-size:3rem;line-height:1}
@media(min-width:768px){.bs-h1{font-size:3.75rem;line-height:1}}
.bs-h2{font-family:var(--font-display);font-weight:500;text-wrap:balance;font-size:1.875rem;line-height:2.25rem}
@media(min-width:768px){.bs-h2{font-size:2.25rem;line-height:2.5rem}}
.bs-h3{font-family:var(--font-display);font-weight:500;text-wrap:balance;font-size:1.125rem;line-height:1.75rem}
@media(min-width:768px){.bs-h3{font-size:1.5rem;line-height:2rem}}
.bs-body-text{line-height:1.625}
.bs-body-text.xl-text{font-size:1.25rem;line-height:1.75rem}

/* === Layout === */
.bs-container{width:min(92vw,90rem);margin-inline:auto}
.bs-mt-lg{margin-top:4rem}@media(min-width:1024px){.bs-mt-lg{margin-top:8rem}}
.bs-mt-md{margin-top:2.5rem}@media(min-width:1024px){.bs-mt-md{margin-top:4rem}}
.bs-mt-sm{margin-top:1.5rem}@media(min-width:1024px){.bs-mt-sm{margin-top:2rem}}

/* === Buttons === */
.bs-btn {
  position:relative;overflow:clip;
  display:inline-block;
  font-weight:600;text-align:center;
  padding:1rem 1.25rem;border-radius:.375rem;
  background:var(--bs-surface-3);color:var(--bs-foreground-light);
  transition:all .2s;cursor:pointer;text-decoration:none;border:none;
  font-family:inherit;font-size:inherit;
}
.bs-btn:active{transform:translateY(1px)}
.bs-btn:hover{background:var(--bs-surface-2)}
.bs-btn:focus-visible{outline:none;box-shadow:0 0 0 2px rgba(255,255,255,.75)}
.bs-btn::before{
  content:'';position:absolute;inset:0;background:#fff;border-radius:.125rem;
  opacity:0;transform:translateX(-100%);transition:all .3s ease-out;
}
.bs-btn:hover::before{transform:translateX(0);opacity:.1}
.bs-btn:active::before{opacity:0}
.bs-btn.btn-transparent{background:transparent}
.bs-btn.btn-transparent:hover{background:var(--bs-surface-2)}
.bs-btn.btn-small{padding:.5rem .75rem;font-size:.875rem}
.bs-btn.btn-amber{background:#f59e0b;color:#000}
.bs-btn.btn-amber:hover{background:#d97706}

/* === Header === */
.site-header{font-weight:600}
.site-header .bs-container{display:flex;justify-content:space-between;align-items:center;padding:1.5rem 0}
.site-logo{display:flex;align-items:center;min-width:0;text-decoration:none;color:inherit}
.site-logo svg{width:48px;height:48px;transition:transform 1s var(--ease-bs-spring)}
.site-logo:hover svg{transform:rotate(-360deg) scale(.8)}
.site-nav{display:none}
@media(min-width:768px){.site-nav{display:flex;gap:.5rem;align-self:stretch;align-items:center}}
.site-nav a{display:flex;align-items:center;padding:.5rem 1rem;color:inherit;text-decoration:none;border-radius:.375rem;transition:background .2s}
.site-nav a:hover{background:var(--bs-surface-3)}

/* === Hero === */
.hero-grid{display:flex;flex-direction:column;align-items:center;padding:2rem 0;gap:2rem}
@media(min-width:1024px){.hero-grid{flex-direction:row}}
.hero-content{flex:1;max-width:32rem;display:flex;flex-direction:column;gap:1.5rem}
.hero-image{display:flex;justify-content:center;margin-top:-5rem}
@media(min-width:1024px){.hero-image{margin-top:0}}
.hero-image img{max-width:100%;height:auto}

/* === Services Carousel === */
.carousel-header{display:flex;align-items:center;justify-content:space-between}
.carousel-btn{width:2.5rem;height:2.5rem;border-radius:50%;border:0;display:flex;align-items:center;justify-content:center;cursor:pointer;background:var(--bs-surface-3);color:var(--bs-foreground-light);font-size:0}
@media(min-width:768px){.carousel-btn{width:3rem;height:3rem}}
.carousel-btn:hover{background:var(--bs-surface-2)}
.carousel-btn svg{width:1rem;height:1rem;opacity:.6}
.carousel-btn:hover svg{opacity:1}
.swiper-slide{position:relative;border-radius:.5rem;overflow:hidden;min-height:300px;display:flex;align-items:flex-end}
.swiper-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.swiper-slide::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.8),transparent 60%)}
.swiper-slide-content{position:relative;z-index:1;padding:1.5rem;color:#fff}
@media(min-width:768px){.swiper-slide-content{padding:2.5rem}}
.swiper-slide-content h3{font-size:1.125rem;font-weight:700;margin:0 0 .5rem}
@media(min-width:768px){.swiper-slide-content h3{font-size:1.5rem}}

/* === Case Studies === */
.cs-grid{display:grid;gap:1.5rem}
.cs-card{position:relative;border-radius:.5rem;overflow:hidden;min-height:320px;display:flex;align-items:flex-end;cursor:default}
@media(min-width:768px){.cs-card:first-child{grid-column:1/-1;min-height:400px}}
.cs-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 3s var(--ease-bs-spring)}
.cs-card:hover img{transform:scale(1.05)}
.cs-card::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.85),transparent 50%)}
.cs-card-content{position:relative;z-index:1;padding:2rem;width:100%}
@media(min-width:768px){.cs-card-content{padding:3rem}}
.cs-tag{display:inline-block;font-weight:700;font-size:.875rem;margin-bottom:.5rem}
.cs-title{font-family:var(--font-display);font-weight:500;font-size:1.25rem;line-height:1.3;margin:0 0 .5rem}
@media(min-width:768px){.cs-title{font-size:1.5rem}}

/* === Pricing === */
.pricing-grid{display:grid;gap:1.5rem}
@media(min-width:768px){.pricing-grid{grid-template-columns:1fr 1fr}}
.pricing-card{background:var(--bs-surface-2);border:1px solid var(--bs-surface-3);border-radius:.5rem;padding:2rem;display:flex;flex-direction:column;gap:1rem}
.pricing-card.featured{background:rgba(255,255,255,.9);color:#000;border-color:transparent}
.pricing-card.featured .bs-btn{background:var(--bs-surface-3);color:var(--bs-foreground-light)}
.pricing-icon{width:2rem;height:2rem;opacity:.6}
.pricing-tag{display:inline-block;font-size:.75rem;font-weight:600;padding:.125rem .75rem;border-radius:1rem;background:var(--bs-surface-3);color:var(--bs-foreground-dark)}
.pricing-card.featured .pricing-tag{background:#000;color:#fff}
.pricing-services{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.5rem}
.pricing-services li{display:flex;align-items:flex-start;gap:.5rem;font-size:.875rem}
.pricing-services li::before{content:'';display:inline-block;width:1rem;height:1rem;margin-top:.125rem;flex-shrink:0;background:currentColor;mask:url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.3 3.3L6 10.6 2.7 7.3 1.3 8.7l4.7 4.7 8.7-8.7-1.4-1.4z' fill='black'/%3E%3C/svg%3E") center/contain no-repeat;-webkit-mask:url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.3 3.3L6 10.6 2.7 7.3 1.3 8.7l4.7 4.7 8.7-8.7-1.4-1.4z' fill='black'/%3E%3C/svg%3E") center/contain no-repeat}

/* === FAQ Accordion === */
.faq-grid{display:grid;gap:.75rem}
.faq-item{border:1px solid var(--bs-surface-3);border-radius:.5rem;overflow:hidden}
.faq-item summary{padding:1.25rem;cursor:pointer;background:var(--bs-surface-2);font-weight:500;list-style:none;display:flex;justify-content:space-between;align-items:center;transition:background .2s}
.faq-item summary:hover{background:var(--bs-surface-3)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'+';font-size:1.25rem;font-weight:300;transition:transform .3s}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item .faq-answer{padding:1.25rem;padding-top:0;color:var(--bs-foreground-dark);line-height:1.6}
.faq-item[open] .faq-answer{padding-bottom:1.25rem}

/* === Newsletter / Contact === */
.newsletter-section{position:relative;overflow:hidden;border-radius:.5rem;padding:3rem 1.5rem}
@media(min-width:768px){.newsletter-section{padding:4rem 2rem}}
.newsletter-section img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.2;mask-image:linear-gradient(to bottom,#000 50%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,#000 50%,transparent 100%)}
.newsletter-inner{position:relative;z-index:1;max-width:40rem;margin:0 auto;text-align:center}
.form-fields{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1rem}
.form-fields input{flex:1 1 200px;padding:.75rem 1rem;border-radius:.375rem;border:1px solid var(--bs-surface-3);background:rgba(0,0,0,.4);color:var(--bs-foreground-light);font-family:inherit;font-size:.875rem}
.form-fields input:focus{outline:none;border-color:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.2)}
.form-fields input::placeholder{color:rgba(255,255,255,.4)}

/* === Footer === */
.site-footer{padding:3rem 0 2rem}
@media(min-width:768px){.site-footer{padding:5rem 0 3rem}}
.footer-grid{display:grid;gap:2rem}
@media(min-width:768px){.footer-grid{grid-template-columns:1fr 2fr}}
.footer-brand{display:flex;flex-direction:column;gap:1rem}
.footer-brand a{text-decoration:none;color:inherit}
.footer-brand svg{width:32px;height:32px;transition:transform 1s var(--ease-bs-spring)}
.footer-brand:hover svg{transform:rotate(-180deg)}
.footer-links{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.footer-links a{color:var(--bs-foreground-dark);text-decoration:none;font-size:.875rem;transition:color .2s}
.footer-links a:hover{color:var(--bs-foreground-light)}
.footer-copy{font-size:.75rem;color:var(--bs-foreground-dark)}

/* === Dialog Modal === */
.dialog-overlay{position:fixed;inset:0;z-index:50}
dialog[open]::backdrop{backdrop-filter:blur(50px);background:rgba(0,0,0,.5)}
dialog{border:none;border-radius:.75rem;padding:2rem;max-width:28rem;width:90vw;background:var(--bs-surface-1);color:var(--bs-foreground-light);box-shadow:0 25px 50px rgba(0,0,0,.5)}
dialog h3{margin:0 0 .5rem;font-size:1.25rem}
dialog p{margin:0 0 1rem;font-size:.875rem;color:var(--bs-foreground-dark);line-height:1.6}
dialog p a{color:var(--bs-foreground-light);text-decoration:underline}
dialog .close-btn{position:absolute;top:1rem;right:1rem;background:none;border:none;color:var(--bs-foreground-dark);font-size:1.25rem;cursor:pointer;padding:.25rem}
dialog .close-btn:hover{color:var(--bs-foreground-light)}
@media(prefers-reduced-motion:no-preference){
  dialog{opacity:0;transform:translateY(1rem) scale(.95);transition:opacity .3s,transform .3s var(--ease-bs-spring)}
  dialog[open]{opacity:1;transform:none}
}

/* === Skip link === */
.skip-link{position:fixed;top:-5rem;left:0;padding:.75rem;background:rgba(0,0,0,.9);color:#fff;text-decoration:none;z-index:100;transition:top .3s}
.skip-link:focus{top:0}

/* === Background image === */
.bg-hero{position:absolute;top:0;left:0;width:100%;height:100svh;object-fit:cover;z-index:-1;opacity:.1;mask-image:linear-gradient(to bottom,#000 50%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,#000 50%,transparent 100%)}

/* === Utility === */
.text-balance{text-wrap:balance}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}