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

.btn{
    border:2px solid rgba(240,248,255, 0.08);
    background-color:#050D1A;
    text-decoration:none;
    color:#F0F8FF;
    padding:10px;
    border-radius:10px;
    font-weight: 400;
    font-family: 'outfit', sans-serif;
 transition: transform 0.2s, border-color 0.2s, color 0.2s;
  display: inline-block;
} 

.btn:hover{
    border:2px solid #00E5FF;
    color:#00E5FF;
    transform: scale(1.1);
    transition: transform 0.2s;
    cursor:pointer;
   
}
.btn-start{
    border:2px solid rgba(240,248,255, 0.08);
    background-color:#00E5FF;
    text-decoration:none;
    color:#050D1A;
    padding:10px;
    border-radius:10px;
    font-weight: 800;
    font-family: 'outfit', sans-serif;
    transition: transform 0.2s;
    display:inline-block;
     
}

.btn-start:hover{
    transform: scale(1.1);
    transition: transform 0.2s;
    cursor:pointer;
   
}

#logo{
    color:#F0F8FF;
    font-weight: 800;
    font-size: 20px;
    font-family: 'Syne Mono', monospace;
  

}
header{
    position:relative;
    display:flex;
    justify-content:space-between;
    align-items:center;
    width:100%;
    padding:20px 48px;
    box-sizing:border-box;
}
nav{
    font-family: 'outfit', sans-serif;
    gap:20px;
    display:flex;
    justify-content: center;
    flex:1;

}
.btn-header{

    border:2px solid rgba(240,248,255, 0.08);
    background-color:#00E5FF;
    text-decoration:none;
    color:#050D1A;
    padding:10px 20px;
    border-radius:10px;
    font-weight: 800;
    font-family: 'outfit', sans-serif;
    display:inline-block;
     transition: transform 0.2s;
    
    
}
.btn-header:hover{
    transform: scale(1.1);
    transition: transform 0.2s;
}
.nav-btn{
    text-decoration:none;
    color:rgba(180, 186, 192, 0.345);
    


}
.nav-btn:hover{
    color:#00E5FF;
}
.btn-container{
    padding-top:40px;
    padding-left:50px;
    padding-bottom:100px;
    z-index: 1;
    position:relative;

}
hr{
    border:1px solid rgba(240,248,255, 0.10);
}

h1{
    color:#00E5FF;
    font-family:'outfit', sans-serif;
    font-size:15px;
    letter-spacing: 7px;
    
}
.content-block{
    padding-top:150px;
    padding-left:50px;
     position: relative;
    z-index: 1;


    
}
.one{
    color:#F0F8FF;
    font-family:'syne mono', monospace;
    font-weight: 800;
    font-size:80px;
    margin:0;
    padding:0;
}
.two{
    color:#00E5FF;
     font-family:'syne mono', monospace;
    font-weight: 800;
    font-size:80px;
    margin:0;
    padding:0;
}
p{
    color:rgba(180, 186, 192, 0.345);
    font-family:'outfit', sans-serif;
    font-size:17px;
   


}
#stars {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.hero {
    position: relative;
    height:100vh;
    overflow:hidden;
    z-index: 1;
}

.what-we-do{
    background-color:#0A1A35;
    border: 1px solid rgba(240,248,255, 0.08);
    padding-left:40px;
    
    
}
body{
    margin:0;
    padding:0;
}
h2{
    color:#00E5FF;
    font-family:'outfit', sans-serif;
    font-size:15px;
    letter-spacing: 4px;
    padding-top:50px;
    font-weight: 400;
    line-height:2;
    
}
.second-p{
font-family:'syne mono', monospace;
color:#F0F8FF;
font-size:40px;
font-weight: 900;
margin:0;
padding:0;

}
.second{
font-family:'syne mono', monospace;
color:#00E5FF;
font-size:40px;
font-weight: 900;
margin:0;
padding:0;
}
.services{
    display:flex;
    gap:5px;
    padding-top:30px;
    padding-left:10px;
    padding-right:30px;
    justify-content:center;
    margin:0 auto;
    padding-bottom:20px;
    line-height:1.6;

}

.small-container{
    background-color:#071428;
    border:1px solid rgba(240,248,255, 0.08);
    padding:50px;
    transition:transform 0.2s, border-color 0.2s;
    
}
.small-container i{
    color:#00E5FF;
    font-size:22px;
    margin-bottom:16px;
    max-width:350px;
    flex: 1;
}
h3{
    color:#F0F8FF;
    font-family:'syne', monospace;
    font-size:20px;
    font-weight: 700;
    
}
.description{
    color:rgba(240,248,255, 0.4);
    font-family:'outfit', sans-serif;
    font-size:15px;
}
.small-container:hover{
    border:1px solid #00E5FF;
    transition:transform 0.2s;
    transform: translateY(-4px);
}

.third-container{
    padding-bottom:20px;
    padding-left:40px;
    padding-top:10px;
   

}
.third-container i{
    color:#00E5FF;
    font-size:22px;
    margin-bottom:16px;
    max-width:350px;
    flex: 1;
}
.main{
    letter-spacing:5px;
    color:#00E5FF;
    font-family: 'outfit', sans-serif;
    font-size: 17px;
    padding-top:50px;
    margin-bottom:20px;
    padding-left:40px;
}
.third-container p{
    max-width:80%;

    

}
ul{
    padding-left:20px;
    line-height:1;
    margin-top:16px;
}
li{
    color:#F0F8FF;
    font-family:'outfit', sans-serif;
    font-size:20px;
    font-weight: 700;

}
.cards{
display:grid;
grid-template-columns: 1fr 1fr;
gap:16px;
flex:1;
}
.card{
    border:1px solid rgba(240,248,255, 0.08);
    padding:24px;
    text-align:left;
}
.card i{
    padding-top:20px;
    padding-left:20%;
    
}
.card p{
    padding-left:30px;

}
.card h3{
    padding-left:30px;
}
.card:hover{
    border:1px solid #00E5FF;
    transform: scale(1.1);
    transition: transform 0.4s ease;

}
.why-section{
    display:flex;
    gap:64px;
    align-items:center;
    padding: 96px 48px;
}
.why-left{
    flex:1;
}
.fourth-container{
    border:1px solid rgba(240,248,255, 0.08);
    background: radial-gradient(ellipse at center,#0A1A35, transparent 100%);
    padding: 120px 48px;
    text-align:center;
    line-height: 1;

}
.work{
    color:#00E5FF;
    text-align:center;
    padding-top:40px;
    letter-spacing: 3px;
    font-family: 'outfit';
    font-size:15px;
}
.main-text{
    color:#F0F8FF;
    font-size:30px;
    font-weight: 700;
    text-align:center;
}
.fourth-container .description{
    text-align:center;
    padding-bottom:40px;
}
.footerp{
 position:absolute;
 left:50%;
 transform: translateX(-50%);
}
footer{
    padding:20px 48px;
    display:flex;
    justify-content: space-between;
    align-items:center;
    position:relative;
    
}
.logo{
    color:#F0F8FF;
    font-weight: 800;
    font-size:20px;
    font-family:'syne', sans-serif;
}
.carousel-section { padding: 40px 0 60px; overflow: hidden; }
.carousel-stage { position: relative; height: 420px; display: flex; align-items: center; justify-content: center; }
.proj-card { position: absolute; width: 340px; background: #071428; border: 1px solid rgba(240,248,255,0.08); overflow: hidden; transition: all 0.5s cubic-bezier(0.4,0,0.2,1); cursor: pointer; }
.proj-card.active { width: 480px; border-color: #00E5FF; z-index: 10; transform: translateX(0) scale(1); box-shadow: 0 0 60px rgba(0,229,255,0.12); }
.proj-card.prev1 { transform: translateX(-420px) scale(0.82); z-index: 5; opacity: 0.6; }
.proj-card.prev2 { transform: translateX(-680px) scale(0.68); z-index: 3; opacity: 0.3; }
.proj-card.next1 { transform: translateX(420px) scale(0.82); z-index: 5; opacity: 0.6; }
.proj-card.next2 { transform: translateX(680px) scale(0.68); z-index: 3; opacity: 0.3; }
.proj-card.hidden { transform: translateX(900px) scale(0.5); z-index: 1; opacity: 0; pointer-events: none; }
.proj-preview {
  position: relative;
  overflow: hidden;      /* clips the oversized iframe down to just the card's box */
  height: 185px;
    }
    a{
        text-decoration:none;
    }
.proj-card.active .proj-preview { height: 280px; }
.proj-info { padding: 20px 24px; }
.proj-num { font-size: 14px; color: #00E5FF; letter-spacing: 3px; margin-bottom: 6px;}
.proj-title { font-family: 'Syne', sans-serif; font-size: 25px; font-weight: 700; color: #F0F8FF; margin-bottom: 8px; }
.proj-desc { font-size: 15px; color: rgba(240,248,255,0.4); line-height: 1.6; }
.bg-coffee { background: linear-gradient(135deg,#1a0a00,#3d1f00); }
.bg-tattoo { background: linear-gradient(135deg,#0a0a0a,#1a1a2e); }
.bg-dog { background: linear-gradient(135deg,#001a0a,#003320); }
.bg-nail { background: linear-gradient(135deg,#1a0010,#3d0030); }
.bg-own { background: linear-gradient(135deg,#050D1A,#0A1A35); }
.carousel-controls { display: flex; align-items: center; justify-content: center; gap: 32px; padding: 32px 0 0; }
.ctrl-btn { width: 44px; height: 44px; border: 1px solid rgba(240,248,255,0.08); background: transparent; color: #F0F8FF; font-size: 18px; cursor: pointer; }
.ctrl-btn:hover { border-color: #00E5FF; color: #00E5FF; }
.dots { display: flex; gap: 10px; align-items: center; }
.dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(240,248,255,0.08); cursor: pointer; transition: all 0.3s; }
.dot.active { background: #00E5FF; width: 22px; border-radius: 3px; }
.proj-preview iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 1440px;         /* pretend the iframe is a normal full-size desktop browser... */
  height: 900px;
  border: none;
  transform: scale(0.333);        /* ...then shrink that whole "browser window" down by 75% */
  transform-origin: top left;    /* scales from the corner, not the center, so it stays pinned at (0,0) */
  pointer-events: none;          /* critical: without this, hovering the iframe "steals" the
                                     click/hover away from your <a> wrapper, since an iframe is
                                     its own separate interactive document sitting on top */
}

.text-cont{

   position:relative;
   padding:50px 48px 64px;
}
.text-cont::before{
    content:'';
    position:absolute;
    inset: 0;
    background:radial-gradient(ellipse at 20% 50%, rgba(0, 229, 255, 0.05), transparent 60%);
    pointer-events: none;
}
.sixth-container{
    text-align:center;
    border:1px solid rgba(240,248,255, 0.08);
  padding:100px;
  background-color:#071428;

}   
.seven{
    text-align:center;
     background:radial-gradient(ellipse at 50% 50%, rgba(0, 229, 255, 0.05), transparent 60%);
}
.pricing{
    letter-spacing: 4px;
    padding-top:40px;
    color:#00E5FF;
    font-size:10px;
}
.notice{
    background:rgba(0, 229, 255, 0.05);
    border:1px solid rgba(0, 229, 255, 0.2);
    padding:16px 25px;
    display:flex;
    align-items:center;
    gap:14px;
    margin: 0 48px 64px;
    
    
}

.notice-icon{
    color:#F0F8FF;
    font-size:18px;
    flex-shrink: 0;
}
.notice-text{
    font-size:13px;
    color:rgba(240,248,255, 0.4);
    line-height:1.6;

}
.notice-text strong{
    color:#F0F8FF;
}
.price-box{
    text-align:left;
    padding-left:60px;
    border-color:#00E5FF;
    background-color:#071428;
    max-width:600px;
    margin:0 auto;
    border:1px solid #00E5FF;
    padding-right:70px;
    box-shadow:0 0 40px rgba(0, 229, 255, 0.15);
     margin-bottom:70px;
}
.main-prc{
    letter-spacing: 4px;
    color:#00E5FF;
    font-size:12px;
    padding-top:40px;
}

.number{
    font-family:'Bebas Neue';
    font-size:80px;
    letter-spacing: 2px;
    color:#00E5FF;
}
.icon-pr{
font-size:40px;
}
.list-of-adv{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:12px;
    padding:24px 0;
}
.adv-item{
    display:flex;
    align-items:flex-start;
    gap:10px;
}
.ic{
    color:#00E5FF;
    font-size:14px;
    flex-shrink: 0;
    margin-top: 2px;
}
.adv{
    font-size:15px;
    color:rgba(240,248,255, 0.4);
    line-height: 1.5;
}
.price-btn{
  display:block;
  width:fit-content;
  margin:0 auto;
  padding: 14px 40px;
}
.subdescription{
    font-size:15px;
    text-align:center;
    padding-bottom:15px;
    padding-top:15px;
}
.eight-cont{
    background-color:#0A1A35;
    border:1px solid rgba(240,248,255, 0.08);
   padding-left:40px;
   padding-right:40px;
   margin:0 auto;
   max-width:800px;
   
}
.list-ul{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:20px;
    line-height:1.6;
    padding-top:20px;
}
.note{
    background-color:#071428;
    border:1px solid #00E5FF;
    padding:16px 20px;
    font-size:15px;
    color:rgba(240,248,255, 0.4);
  line-height:1.6;
  margin-top:30px;
  margin-bottom:30px;
  border-left:6px solid #00E5FF;

}
.note strong{
    color:#F0F8FF;
}
.text{
    color:#00E5FF;
    letter-spacing: 4px;
    font-size:15px;
    padding-top:40px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}
.faq-item {
    border-bottom: 1px solid rgba(240,248,255, 0.08); /* line between questions */
    padding: 20px 0; /* space above and below each question */
    cursor: pointer; /* shows hand cursor on hover — tells user its clickable */
    max-width:800px;
    margin:0 auto;
}

.faq-q {
    display: flex; /* puts question and + on same line */
    justify-content: space-between; /* pushes + to the right */
    align-items: center; /* vertically centers them */
    font-family: 'Syne', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #F0F8FF;
}

.faq-icon {
    color: #00E5FF; /* cyan + sign */
    font-size: 20px;
    transition: transform 0.3s; /* smooth rotation animation */
    flex-shrink: 0; /* stops + from shrinking */
}

.faq-item.open .faq-icon {
    transform: rotate(45deg); /* rotates + into × when open */
}

.faq-a {
    font-size: 17px;
    color: rgba(240,248,255, 0.4); /* muted answer text */
    line-height: 1.7;
    max-height: 0; /* hidden by default — height is 0 */
    overflow: hidden; /* hides content when max-height is 0 */
    transition: max-height 0.3s, padding 0.3s; /* smooth open/close animation */
}

.faq-item.open .faq-a {
    max-height: 200px; /* when open, allows content to show */
    padding-top: 12px; /* adds space between question and answer */
}
.box-cont{
    display:flex;
    gap:12px;
    max-width: 800px;
    margin: 0 auto;
    
}

.second-c{
    padding-top:60px;
    padding-bottom:100px;
    margin-top:80px;
    margin-bottom:80px;
}
.txt{
    letter-spacing: 4px;
    font-size:15px;
    color:#00E5FF;
}
.txt-box{
    padding-left:40px;
    max-width:40%;
    padding-top:40px;
    padding-bottom:50px;
}
#bgcanvas {
    position: absolute; /* sits behind everything */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.4; /* subtle, not too strong */
    pointer-events: none; /* mouse clicks pass through it */
}

.page-hero {
    position: relative; /* needed so canvas positions correctly inside it */
    overflow: hidden; /* keeps canvas inside the hero */
}

.hero-inner {
    position: relative; /* keeps text above the canvas */
    z-index: 1; /* text sits on top of canvas */
}
.form{
    max-width:800px;
    margin:0 auto;
    
}
.form-section{
    padding:0 48px 96px;
    max-width: 760px;
    margin:0 auto;
}
.form-row{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:16px;
    margin-bottom:16px;
}
.form-group{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-bottom:16px;
}
.form-label{
    font-size:11px;
    color:rgba(240,248,255, 0.4);
    letter-spacing: 2px;
    font-weight: 600;
    font-family:'outfit', sans-serif;
}
.form-input{
       background: #071428; /* dark input background */
    border: 1px solid rgba(240,248,255, 0.08); /* subtle border */
    color: #F0F8FF; /* white text when typing */
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    padding: 14px 18px; /* space inside input */
    outline: none; /* removes default browser outline */
    transition: border-color 0.2s; /* smooth border change on focus */
    width: 100%;
}
.form-input::placeholder {
    color: rgba(240,248,255, 0.2); /* very muted placeholder */
}

.form-input:focus {
    border-color: #00E5FF; /* cyan border when clicked */
}

textarea.form-input {
    resize: vertical; /* only allows up/down resize */
    min-height: 160px;
    line-height: 1.6;
}

.form-submit {
   border:2px solid rgba(240,248,255, 0.08);
    background-color:#00E5FF;
    text-decoration:none;
    color:#050D1A;
    padding:15px 40px;
    border-radius:10px ;
    font-weight: 800;
    font-family: 'outfit', sans-serif;
    transition: transform 0.2s;
    display:block;
    margin:0 auto;
   
     
}

.form-submit:hover {
    transform: scale(1.1);
    transition: transform 0.2s;
   cursor:pointer;

}
.nine{
    background-color:#071428;
    border:1px solid rgba(240,248,255, 0.08);
    padding:50px;
}
.boxes{
   display:grid;
   grid-template-columns: repeat(3, 1fr);
   gap:2px;
   align-items:stretch;
}
.inbox{
    border:1px solid rgba(240,248,255, 0.08);
   padding:40px;
   transition: transform 0.2s, border-color 0.2s;
   cursor:pointer;
}
.inbox-txt{
    color:#F0F8FF;
    font-weight: 800;
    font-size:15px;
}
.inbox i{
    color:#00E5FF;
    font-size:25px;
}
.inbox:hover{
    border-color: #00E5FF;
    transform:translateY(-12px);

}
@media (max-width: 700px) {
  /* Safety net: with several fixed-width leftovers in this file
     (340px paddings, 480px cards, etc.), this stops any one of
     them from being able to force the whole page to horizontally
     scroll if I miss patching something. */
  body {
    overflow-x: hidden;
  }

  /* ============================================================
     HEADER — logo / nav / CTA button stack instead of competing
     for space in one row
     ============================================================ */
  header {
    flex-direction: column;
    gap: 16px;
    padding: 20px 24px;
  }
  nav {
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
  }

  /* ============================================================
     HERO
     .one / .two are 80px — on a ~375px phone, a single word at
     that size can force horizontal scroll on its own. Dropping to
     40px keeps "Connect / Create / Conquer" inside the screen.
     ============================================================ */
  .content-block {
    padding-left: 24px;
    padding-top: 110px;
  }
  .one, .two {
    font-size: 40px;
  }
  .content-block > p {
    max-width: 90%;
  }
  .btn-container {
    padding-left: 24px;
    padding-bottom: 60px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }

  /* ============================================================
     WHAT WE DO — three service cards side by side become one column
     ============================================================ */
  .what-we-do {
    padding-left: 20px;
    padding-right: 20px;
  }
  .services {
    flex-direction: column;
    padding-left: 0;
    padding-right: 0;
  }
  .small-container {
    padding: 32px 24px;
  }

  /* Shared by "What We Do" and "Why Vanguard" headings */
  .second-p, .second {
    font-size: 28px;
  }

  /* ============================================================
     WHY VANGUARD — text+list next to a 2x2 card grid becomes one
     stacked column
     ============================================================ */
  .third-container,
  .main {
    padding-left: 20px;
    padding-right:20px;
  }
  .why-section {
    flex-direction: column;
    padding: 48px 20px;
    gap: 32px;
  }
  .third-container p {
    max-width: 100%;
  }
  .cards {
    grid-template-columns: 1fr; /* 2 cols at ~160px each is too
                                     cramped for icon+heading+text */
  }

  /* ============================================================
     CTA BAND
     ============================================================ */
  .fourth-container {
    padding: 60px 24px;
  }
  .main-text {
    font-size: 22px;
  }

  /* ============================================================
     PROJECT CAROUSEL
     The cascading side-cards use fixed pixel translateX values
     (420px, 680px) tuned for wide screens — on a phone those fling
     cards completely off-screen, and the active card (480px) would
     itself overflow a ~375px viewport. Fix: show ONLY the active
     card, drop it out of the absolute-positioning system, let it
     become a plain full-width card.
     ============================================================ */
  .carousel-stage {
    height: auto;
    display: block;
  }
  .proj-card:not(.active) {
    display: none;
  }
  .proj-card.active {
    position: relative;
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
  }
  .proj-card.active .proj-preview {
    height: 180px;
  }
  .proj-card.active .proj-preview iframe {
    transform: scale(0.236); /* 1440 × 0.236 ≈ 340px, matching the
                                  mobile active-card width above —
                                  same scale-matching logic as the
                                  desktop .active override */
  }

  /* ============================================================
     PRICING — .price-box's 60px/70px side padding eats ~130px
     combined on a phone, over a third of the screen, before any
     text starts.
     ============================================================ */
  .price-box {
    padding-left: 24px;
    padding-right: 24px;
    max-width: 100%;
    margin-left: 20px;
    margin-right: 20px;
  }
  .list-of-adv {
    grid-template-columns: 1fr;
  }
  .number {
    font-size: 56px; /* was 80px */
  }
  .notice {
    margin: 0 20px 40px;
    flex-direction: column;
    align-items: flex-start;
  }

  /* ============================================================
     .box-cont / .text — see the note above the code about the
     duplicate .text rule. This override neutralizes the 340px
     fixed offset until I can see the actual section it belongs to.
     ============================================================ */
  .box-cont {
    padding-left: 24px;
    flex-direction: column;
  }
  .text {
    padding-left: 24px;
  }

  /* ============================================================
     FAQ / EXTRA INFO BLOCK
     ============================================================ */
  .eight-cont {
    padding-left: 20px;
    padding-right: 20px;
  }
  .list-ul {
    grid-template-columns: 1fr;
  }
  .txt-box {
    padding-left: 20px;
    max-width: 100%; /* was 40% — far too narrow on a ~375px screen */
  }

  /* ============================================================
     CONTACT FORM — two fields side by side become stacked; a
     phone keyboard makes a half-width input too cramped to type in
     ============================================================ */
  .form-section {
    padding: 0 20px 60px;
  }
  .form-row {
    grid-template-columns: 1fr;
  }

  /* ============================================================
     THREE-COLUMN INFO BOXES
     ============================================================ */
  .nine {
    padding: 32px 20px;
  }
  .boxes {
    grid-template-columns: 1fr;
  }

  /* ============================================================
     FOOTER
     .footerp is position:absolute + translateX(-50%), centered
     independently of the flex row — on a narrow screen it can sit
     right on top of the logo text beside it. Dropping the absolute
     positioning lets both lines stack cleanly instead.
     ============================================================ */
  footer {
    flex-direction: column;
    gap: 8px;
    text-align: center;
    padding: 24px;
  }
  .footerp {
    position: static;
    transform: none;
  }
}
.optional {
  color: rgba(240,248,255, 0.25);
  font-weight: 400;
  letter-spacing: 0.5px;
}
.txt-box{
    padding-right:40px;
   
}
.seven {
  padding: 0 20px;
}
.list-of-adv {
  gap: 16px; /* was 12px in the base rule — bumping slightly since
                the p-margin fix removes ALL breathing room between
                items, and 12px alone reads a bit cramped once
                that's gone */
  padding: 20px 0; /* was 24px */
}
.questions {
  padding: 0 20px;
}

.price-box p{
    margin:0;
}

  .subdescription {
    padding-top: 20px;
    padding-bottom: 20px;
  }