/* ==========================================================================
   Vipul Rajput — Dev Studio
   Design system: "Daylight" — white background, bold black type,
   playful multi-color accents (blue / yellow / red / teal)
   ========================================================================== */

:root{
  --bg: #ffffff;
  --bg-soft: #f6f8fc;
  --panel-blue: #e8f0fe;
  --panel-blue-deep: #dce8fd;
  --ink: #202124;
  --ink-soft: #5f6368;
  --line: #e6e9ef;
  --line-strong: #d3d9e3;

  --blue: #3c6df0;
  --blue-dark: #2547c9;
  --yellow: #ffc107;
  --red: #ef5350;
  --teal: #17a398;

  --font-display: 'Plus Jakarta Sans', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

  --container: 1180px;
  --radius: 14px;
  --radius-lg: 24px;
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{ font-family: var(--font-display); margin:0; color: var(--ink); letter-spacing:-0.01em; font-weight:700; }
p{ margin:0; }
::selection{ background: var(--blue); color: #fff; }
:focus-visible{ outline: 2px solid var(--blue); outline-offset: 3px; }

.container{ max-width: var(--container); margin: 0 auto; padding: 0 28px; }
.eyebrow{
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
  display:flex; align-items:center; gap:10px;
  font-weight:600;
}
.eyebrow::before{ content:''; width:22px; height:2px; border-radius:2px; background: var(--yellow); display:inline-block; }

.btn{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14.5px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: 999px;
  border: 1.5px solid var(--line-strong);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.btn:hover{ border-color: var(--blue); transform: translateY(-1px); }
.btn-primary{ background: var(--blue); border-color: var(--blue); color: #fff; box-shadow: 0 10px 24px -10px rgba(60,109,240,0.55); }
.btn-primary:hover{ background: var(--blue-dark); border-color: var(--blue-dark); }

/* ---------------------------- Header ---------------------------- */
.site-header{
  position: sticky; top:0; z-index: 100;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.header-logo{
  height: 60px;
  width: 150px;
  display: block;
  margin: -14px 0;
}


.header-inner{
  max-width: var(--container); margin:0 auto; padding: 16px 28px;
  display:flex; align-items:center; justify-content:space-between; gap: 24px; in-height: 64px;
}



.brand{ display:flex; align-items:center; gap:10px; }
.brand-mark{
  width: 34px; height: 34px; border-radius: 9px;
  background: linear-gradient(135deg, var(--blue) 0%, var(--teal) 100%);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-family: var(--font-display); font-weight:800; font-size: 14px;
  flex-shrink:0;
}
.brand-mark-blip{ display:none; }
.brand-text{ font-family: var(--font-display); font-weight:700; font-size: 16.5px; color: var(--ink); }
.brand-text em{ font-style:normal; color: var(--blue); }

.main-nav ul{ display:flex; align-items:center; gap: 28px; }
.nav-link{
  font-family: var(--font-display); font-weight:600; font-size: 14.5px; color: var(--ink-soft);
  position:relative; padding: 4px 0; transition: color .15s ease;
}
.nav-link:hover, .nav-link.is-active{ color: var(--ink); }
.nav-link:hover::after, .nav-link.is-active::after{
  content:''; position:absolute; left:0; right:0; bottom:-4px; height:2px; border-radius:2px; background: var(--yellow);
}
.nav-cta{
  border: none; padding: 10px 20px; border-radius: 999px; color: #fff;
  background: var(--blue); box-shadow: 0 8px 18px -8px rgba(60,109,240,0.6);
}
.nav-cta:hover{ background: var(--blue-dark); color:#fff; }
.nav-cta::after{ display:none !important; }

.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding: 6px; }
.nav-toggle span{ width:22px; height:2px; background: var(--ink); display:block; border-radius:2px; transition: transform .2s ease, opacity .2s ease; }

/* ---------------------------- Hero ---------------------------- */
.hero{ padding: 90px 0 90px; }
.hero-inner{ display:grid; grid-template-columns: 1.05fr 0.95fr; gap: 60px; align-items:center; }
.hero h1{
  font-size: clamp(2.5rem, 4.6vw, 3.75rem);
  line-height: 1.08;
  margin: 18px 0 22px;
  color: var(--ink);
}
.hero h1 .accent{ color: var(--blue); }
.hero-sub{ color: var(--ink-soft); font-size: 17.5px; max-width: 480px; margin-bottom: 34px; }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom: 44px; }
.hero-stats{ display:flex; gap: 36px; }
.hero-stats div{ font-family: var(--font-display); }
.hero-stats strong{ display:block; font-size: 24px; color: var(--ink); }
.hero-stats span{ font-size: 12px; color: var(--ink-soft); letter-spacing:.04em; font-weight:600; }

/* hero illustration — signature element */
.hero-illustration{
  background: var(--panel-blue);
  border-radius: var(--radius-lg);
  padding: 40px;
  aspect-ratio: 4/3.4;
  display:flex; align-items:center; justify-content:center;
  position: relative;
  overflow: hidden;
}
.hero-illustration svg{ width: 100%; height: 100%; }
.float-slow{ animation: float 6s ease-in-out infinite; }
.float-fast{ animation: float 4s ease-in-out infinite; }
.float-rev{ animation: float 5s ease-in-out infinite reverse; }
@keyframes float{
  0%, 100%{ transform: translateY(0px); }
  50%{ transform: translateY(-10px); }
}

/* ---------------------------- Section shared ---------------------------- */
section{ padding: 84px 0; border-top: 1px solid var(--line); }
.section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap: 30px; margin-bottom: 50px; flex-wrap:wrap; }
.section-head h2{ font-size: clamp(1.7rem, 3vw, 2.3rem); margin-top: 14px; max-width: 560px; }
.section-head p{ color: var(--ink-soft); max-width: 420px; }

/* ---------------------------- Work / Portfolio ---------------------------- */
.work-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.work-card{
  border: 1px solid var(--line); border-radius: var(--radius); overflow:hidden;
  background: #fff;
  box-shadow: 0 1px 2px rgba(20,20,43,0.04);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.work-card:hover{ border-color: var(--line-strong); transform: translateY(-4px); box-shadow: 0 20px 40px -20px rgba(20,20,43,0.18); }
.work-thumb{
  aspect-ratio: 4/3; display:flex; align-items:center; justify-content:center;
  font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft);
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
}
.work-info{ padding: 18px 20px 22px; }
.work-tag{ font-family: var(--font-mono); font-size: 11.5px; color: var(--blue); text-transform:uppercase; letter-spacing:.08em; font-weight:600; }
.work-info h3{ font-size: 18px; margin: 8px 0 6px; }
.work-info p{ color: var(--ink-soft); font-size: 14px; }

/* ---------------------------- Services ---------------------------- */
.services-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.service-card{
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px 26px; box-shadow: 0 1px 2px rgba(20,20,43,0.04);
  transition: transform .18s ease, box-shadow .18s ease;
}
.service-card:hover{ transform: translateY(-3px); box-shadow: 0 20px 40px -22px rgba(20,20,43,0.18); }
.service-index{
  width: 34px; height: 34px; border-radius: 9px;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-mono); font-weight:600; font-size: 13px; color:#fff;
}
.service-card:nth-child(6n+1) .service-index{ background: var(--blue); }
.service-card:nth-child(6n+2) .service-index{ background: var(--yellow); color: var(--ink); }
.service-card:nth-child(6n+3) .service-index{ background: var(--red); }
.service-card:nth-child(6n+4) .service-index{ background: var(--teal); }
.service-card:nth-child(6n+5) .service-index{ background: var(--blue-dark); }
.service-card:nth-child(6n+6) .service-index{ background: var(--ink); }
.service-card h3{ font-size: 19px; margin: 16px 0 10px; }
.service-card p{ color: var(--ink-soft); font-size: 14.5px; }

/* ---------------------------- Process ---------------------------- */
.process-list{ display:flex; flex-direction:column; }
.process-item{
  display:grid; grid-template-columns: 60px 1fr; gap: 26px;
  padding: 26px 0; border-bottom: 1px solid var(--line);
}
.process-item:first-child{ border-top: 1px solid var(--line); }
.process-num{
  width: 40px; height: 40px; border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-weight:700; color:#fff; font-size: 15px;
}
.process-item:nth-child(4n+1) .process-num{ background: var(--blue); }
.process-item:nth-child(4n+2) .process-num{ background: var(--yellow); color: var(--ink); }
.process-item:nth-child(4n+3) .process-num{ background: var(--teal); }
.process-item:nth-child(4n+4) .process-num{ background: var(--red); }
.process-item h3{ font-size: 18px; margin-bottom: 8px; }
.process-item p{ color: var(--ink-soft); font-size: 14.5px; max-width: 620px; }

/* ---------------------------- About ---------------------------- */
.about-inner{ display:grid; grid-template-columns: 0.9fr 1.1fr; gap: 60px; align-items:center; }
.about-copy p{ color: var(--ink-soft); margin-bottom: 16px; font-size: 15.5px; }
.about-stack{ display:flex; flex-wrap:wrap; gap:10px; margin-top: 20px; }
.stack-pill{
  font-family: var(--font-mono); font-size: 12.5px; padding: 7px 14px;
  border: 1px solid var(--line-strong); border-radius: 30px; color: var(--blue-dark);
  background: var(--panel-blue);
}
.about-frame{
  border: 1px solid var(--line); border-radius: var(--radius); padding: 26px;
  background: var(--bg-soft);
  font-family: var(--font-mono); font-size: 13px; color: var(--ink-soft);
}
.about-frame .row{ display:flex; justify-content:space-between; padding: 10px 0; border-bottom: 1px dashed var(--line-strong); }
.about-frame .row:last-child{ border-bottom:none; }
.about-frame .row span:last-child{ color: var(--ink); font-weight:600; }

/* ---------------------------- Contact ---------------------------- */
.contact-inner{ display:grid; grid-template-columns: 1fr 1fr; gap: 60px; }
.contact-form{ display:flex; flex-direction:column; gap: 16px; }
.field label{ display:block; font-family: var(--font-display); font-weight:600; font-size: 12.5px; color: var(--ink-soft); margin-bottom: 7px; letter-spacing:.02em; }
.field input, .field textarea{
  width:100%; background: #fff; border: 1.5px solid var(--line-strong); border-radius: 10px;
  padding: 12px 14px; color: var(--ink); font-family: var(--font-body); font-size: 14.5px;
}
.field textarea{ min-height: 120px; resize: vertical; }
.field input:focus, .field textarea:focus{ border-color: var(--blue); outline:none; }
.contact-side{ display:flex; flex-direction:column; justify-content:space-between; }
.contact-detail{ margin-bottom: 26px; }
.contact-detail span.label{ font-family: var(--font-mono); font-size: 12px; color: var(--blue); text-transform:uppercase; letter-spacing:.06em; font-weight:600; }
.contact-detail p, .contact-detail a{ font-size: 16px; margin-top: 6px; display:block; }
.availability{ display:flex; align-items:center; gap: 9px; font-family: var(--font-mono); font-size: 13px; color: var(--teal); font-weight:600; }
.availability .dot{ width:8px; height:8px; border-radius:50%; background: var(--teal); box-shadow: 0 0 0 4px rgba(23,163,152,0.16); }

/* ---------------------------- Footer ---------------------------- */
.site-footer{
  border-top: 1px solid var(--line);
  padding: 60px 0 26px;
  background-color: var(--bg-soft);
}
.footer-logo{ height: 56px; width: auto; display:block; margin-bottom: 12px; }
.footer-grid{
  max-width: var(--container); margin: 0 auto; padding: 0 28px;
  display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px;
}
.footer-brand p{ color: var(--ink-soft); font-size: 13.5px; margin-top: 14px; max-width: 260px; }
.footer-col h4{ font-family: var(--font-display); font-weight:700; font-size: 12.5px; color: var(--ink); text-transform:uppercase; letter-spacing:.06em; margin-bottom: 16px; }
.footer-col li{ margin-bottom: 10px; }
.footer-col a{ color: var(--ink-soft); font-size: 14px; transition: color .15s ease; }
.footer-col a:hover{ color: var(--blue); }
.footer-bottom{
  max-width: var(--container); margin: 46px auto 0; padding: 22px 28px 0;
  border-top: 1px solid var(--line);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap: 10px;
  font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-soft);
}

/* ---------------------------- Responsive ---------------------------- */
@media (max-width: 980px){
  .hero-inner, .about-inner, .contact-inner{ grid-template-columns: 1fr; }
  .work-grid, .services-grid{ grid-template-columns: repeat(2, 1fr); }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px){
  .main-nav{
    position:absolute; top:100%; left:0; right:0;
    background: #fff; border-bottom: 1px solid var(--line);
    max-height:0; overflow:hidden; transition: max-height .25s ease;
  }
  .main-nav.is-open{ max-height: 400px; }
  .main-nav ul{ flex-direction:column; align-items:flex-start; padding: 10px 28px 24px; gap: 18px; }
  .nav-toggle{ display:flex; }
  .work-grid, .services-grid{ grid-template-columns: 1fr; }
  .process-item{ grid-template-columns: 1fr; gap: 8px; }
  .footer-grid{ grid-template-columns: 1fr; }
  .section-head{ align-items:flex-start; }
}