/* =========================================
   Universal CSS Reset / Base Styles
   ========================================= */

/* Box sizing */
*, *::before,*::after {  box-sizing: border-box; }
/* Remove default margin & padding */
* {  margin: 0;  padding: 0;}
/* Smooth scrolling */
html {  scroll-behavior: smooth;}
/* Body defaults */
body {  min-height: 100vh;  text-rendering: optimizeSpeed;  -webkit-font-smoothing: antialiased;  line-height: 1.5;  font-family: sans-serif; }
/* Media elements */
img,picture,video,canvas,svg {  display: block;  max-width: 100%;}
/* Form elements inherit font */
input,button,textarea,select {  font: inherit;  border: none;  outline: none;  background: none;}
/* Buttons */
button {  cursor: pointer;}
/* Links */
a {  text-decoration: none;  color: inherit;}
/* Lists */
ul,ol {  list-style: none;}
/* Tables */
table {  border-collapse: collapse;  border-spacing: 0;}
/* Text overflow fixes */
p, h1,h2,h3,h4,h5,h6 {  overflow-wrap: break-word;}
/* Textarea resize */
textarea {  resize: vertical;}
/* Remove animations for accessibility */
@media (prefers-reduced-motion: reduce) {
  html {    scroll-behavior: auto;  }
  *,  *::before,  *::after {    animation-duration: 0.01ms !important;    animation-iteration-count: 1 !important;    transition-duration: 0.01ms !important;  }
}
img, svg { max-width: 100%; height: auto;}
/* -- -- */
/* ------------------------ common ------------------------ */
:root {
  --primary-color: #030115;
  --secondary-color: #222;
  --text-color: #fff;

  --font-main: "DM Sans", sans-serif;

  --border-radius: 10px;
  --transition: all 0.3s ease;

  --container-width: 1200px;
  --section-padding: 80px;
}
.flex-container { display: flex; flex-wrap: wrap;  justify-content: space-between;} .align-center { align-items: center;}
.container { width: calc(100% - 0px); max-width:calc(1800px - 0px); padding: 0 50px;}
body {background-color: var(--primary-color); }
#page { font-family:var(--font-main); font-size: 16pt; line-height: 18pt;  color: var(--text-color); letter-spacing: 0.5px ; }
p { line-height: 26pt;}


.header-wrapp { position: fixed; top: 0; left: 0; z-index: 1600; width: 100%; padding: 40px 0;}
.site-logo:link, .site-logo:visited { width: 180px; display: block;}
/* ----------------------- hero section -------------------------- */

.home-hero-section { height: 100svh; position: relative; background-image: url(../images/hero-image.webp); background-repeat: no-repeat; background-repeat: no-repeat;  background-size: cover; background-position: center center;  }
.hero-p { width: 400px;}
.hero-caption-wrapp { width: calc(100% - 0px);}
.hero-caption { width: calc(60% - 0px);}
.hero-bottom { position: absolute; bottom: 0; left:0; width: 100%; padding-bottom: 60px; }

.works-group-wrapp{
 margin: 0 auto;
  overflow:hidden;
}

.work-group{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:80px;
  margin:120px 0;
}

.work-details { flex:1;}
.work-image{
  flex:2;
  will-change:transform; border-radius: 50px;
}

.work-image img{
  width:100%;
  display:block;
  border-radius:20px;
}

@media(max-width:768px){

  .work-group{
    flex-direction:column;
    gap:40px;
  }

}



.hero-caption h1 { font-size: 50pt; line-height: 50pt;}
.hero-caption h2 { font-size: 70pt; line-height: 88pt;}
.works-title{
  overflow:hidden;
}

.works-title h2{
  font-size:clamp(60px, 10vw, 180px);
  line-height:0.9;
  font-weight:800;
  text-transform:uppercase;
}

.works-title .char{
  display:inline-block;
  will-change:transform;
}


.link-btns a:link, .link-btns a:visited { display: block; padding: 15px 25px; border: 1px solid #fff; border-radius: 10px; text-transform: uppercase; font-size: 10pt; letter-spacing: 2px;}

.prj-name { 

  font-size:clamp(20px, 10vw, 40px);
  line-height: normal;
  
  font-weight:800;
  text-transform:uppercase; padding-bottom: 20px;


}


.who-we-are-wrapp {  position: relative;  width: 100%; display: flex; flex-direction: row; align-items: center;}


.widget-title {   font-size:clamp(60px, 10vw, 180px);
  line-height:0.9; padding-bottom: 60px;
  font-weight:800;
  text-transform:uppercase;}


.caption-section{
   
    position:relative;
    overflow:hidden;
}

.page-caption{
    position:sticky;
    bottom: 0px;
     transform:translateY(0);
     padding-top: 100px;

    font-size:clamp(80px,22vw,100px);
    line-height:.85;
    font-weight:800;

    white-space:nowrap;
    width:max-content;

    margin:0;
    will-change:transform;
}




.who-we-are-wrapp{
    overflow:hidden;
}


.page-caption{
    overflow:hidden;
}

.page-caption .word{
    display:inline-block;
}



.story-section{
    position:relative; background:#050816;
}

#who-logo-3d{
    position:absolute;
    top:0;
    left:0;

    width:100vw;
    height:100vh;

    z-index:1;
    pointer-events:none;
}

.who-we-are-wrapp,
.services-section,
.process-section,
.portfolio-section{
    position:relative;
    z-index:2;
    min-height:100vh;
}

#who-logo-3d canvas{
    display:block;
}

.story-section section{
    position:relative;
    z-index:2;
    min-height:100vh;
}




.home-services-wrapp{
    position:relative;

}













.home-services-wrapp {
  padding: 80px 20px;
  text-align: center;
 /* background: radial-gradient(circle at bottom, #0a0f2c, #050816); */
}


#particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.services {
  position: relative;
  overflow: hidden;
}

.services .container {
  position: relative;
  z-index: 2;
}

.container {
  max-width: 1200px;
  margin: auto;
}

.subtitle {
  color: #6aa8ff;
  letter-spacing: 2px;
  font-size: 14px;
  margin-bottom: 10px;
}

.title {
  font-size: 42px;
  font-weight: 700;
  margin-bottom: 15px;
}

.title span {
  background: linear-gradient(90deg, #4facfe, #ff4ecd);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.desc {
  color: #aaa;
  max-width: 600px;
  margin: 0 auto 50px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
}

.card {
  background: rgba(255,255,255,0.03);
  border-radius: 16px;
  padding: 30px;
  text-align: left;
  position: relative;
  transition: 0.3s ease;
  border: 1px solid rgba(255,255,255,0.08);
}

.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}

.card .icon {
  font-size: 30px;
  margin-bottom: 15px;
}

.card h3 {
  font-size: 20px;
  margin-bottom: 10px;
}

.card p {
  color: #aaa;
  font-size: 14px;
  margin-bottom: 20px;
}

.card a {
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}

/* Gradient borders */
.card.blue { border-color: #4facfe; }
.card.purple { border-color: #a855f7; }
.card.pink { border-color: #ff4ecd; }
.card.orange { border-color: #ff8a00; }
.card.yellow { border-color: #ffd000; }
.card.cyan { border-color: #00eaff; }

.card.blue a { color: #4facfe; }
.card.purple a { color: #a855f7; }
.card.pink a { color: #ff4ecd; }
.card.orange a { color: #ff8a00; }
.card.yellow a { color: #ffd000; }
.card.cyan a { color: #00eaff; }

/* Responsive */
@media (max-width: 992px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .grid {
    grid-template-columns: 1fr;
  }

  .title {
    font-size: 30px;
  }
}