:root {
  --bg: #06070b;
  --surface: #0c0e14;
  --surface-2: #11141d;
  --text: #f5f7fb;
  --muted: #8d94a6;
  --line: rgba(255, 255, 255, .09);
  --accent: #7c5cff;
  --accent-2: #00d9ff;
  --accent-3: #a855f7;
  --radius: 24px;
  --container: 1180px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}

html {
  scroll-behavior: smooth
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: Inter, sans-serif;
  overflow-x: hidden
}

body:before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% -10%, rgba(124, 92, 255, .13), transparent 35%);
  z-index: -2
}

a {
  text-decoration: none;
  color: inherit
}

button,
input,
textarea,
select {
  font: inherit
}

button {
  cursor: pointer
}

#particles {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: .65
}

.cursor-glow {
  position: fixed;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(circle, rgba(124, 92, 255, .13), transparent 68%);
  transform: translate(-50%, -50%)
}

.container {
  width: min(var(--container), calc(100% - 48px));
  margin: auto
}

.section {
  padding: 120px 0;
  position: relative
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 max(24px, calc((100vw - 1180px)/2));
  z-index: 100;
  background: rgba(6, 7, 11, .62);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid transparent;
  transition: .3s
}

.header.scrolled {
  border-color: var(--line);
  background: rgba(6, 7, 11, .86)
}

.logo {
  font: 700 21px "Space Grotesk", sans-serif;
  letter-spacing: -1px
}

.logo span {
  color: var(--accent-2)
}

.nav {
  display: flex;
  gap: 30px
}

.nav a {
  font-size: 13px;
  color: #aeb4c4;
  transition: .2s
}

.nav a:hover {
  color: #fff
}

.menu-toggle {
  display: none;
  background: none;
  border: 0
}

.menu-toggle span {
  display: block;
  width: 25px;
  height: 2px;
  background: #fff;
  margin: 5px
}

.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: 145px;
  overflow: hidden
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 70px;
  align-items: center
}

.availability {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .03);
  padding: 9px 13px;
  border-radius: 999px;
  font-size: 11px;
  color: #b9bfcd;
  margin-bottom: 28px
}

.availability span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #42e695;
  box-shadow: 0 0 12px #42e695
}

.about-img {
    width: 300px;
    height: 300px;

    border-radius: 50%;
    object-fit: cover;
    object-position: center;

    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.08),
        0 25px 70px rgba(0, 0, 0, 0.5);

    display: block;
}

.kicker {
  font-size: 11px;
  letter-spacing: 2.5px;
  font-weight: 700;
  color: #8c95aa;
  margin-bottom: 17px
}

.hero h1 {
  font: 700 clamp(42px, 5.4vw, 76px)/.98 "Space Grotesk", sans-serif;
  letter-spacing: -4px;
  max-width: 760px
}

.hero h1 span,
.section-heading h2 span,
.about-copy h2 span,
.contact-copy h2 span,
.ai-copy h2 span {
  background: linear-gradient(90deg, #fff, var(--accent-2), #a78bfa);
  -webkit-background-clip: text;
  color: transparent
}

.hero-description {
  color: var(--muted);
  line-height: 1.8;
  max-width: 650px;
  font-size: 16px;
  margin: 27px 0 34px
}

.hero-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 1px solid var(--line);
  padding: 14px 20px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  transition: .25s
}

.btn b {
  font-size: 17px
}

.btn.primary {
  background: #fff;
  color: #07080c;
  border-color: #fff
}

.btn.primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 35px rgba(255, 255, 255, .13)
}

.btn.secondary:hover {
  background: #fff;
  color: #000
}

.mini-stats {
  display: flex;
  gap: 30px;
  margin-top: 55px
}

.mini-stats div {
  display: grid;
  gap: 5px
}

.mini-stats strong {
  font-size: 12px
}

.mini-stats small {
  font-size: 10px;
  color: #6f7789
}

.hero-code {
  position: relative;
  min-height: 460px;
  display: grid;
  place-items: center
}

.code-window {
  width: min(100%, 500px);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(13, 15, 22, .92);
  box-shadow: 0 35px 100px rgba(0, 0, 0, .45), 0 0 70px rgba(124, 92, 255, .1);
  overflow: hidden;
  transform: perspective(1000px) rotateY(-7deg) rotateX(3deg)
}

.window-top {
  height: 46px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 15px;
  color: #6d7485;
  font-size: 11px
}

.window-dots {
  display: flex;
  gap: 6px
}

.window-dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #343845
}

.code-content {
  padding: 30px;
  font: 13px/2 "Space Grotesk", monospace;
  color: #c7ccda
}

.code-content p {
  white-space: nowrap
}

.code-content em {
  font-style: normal;
  color: #4f5668;
  margin-right: 18px
}

.code-content b {
  color: #c084fc
}

.code-content strong {
  color: #5eead4
}

.terminal {
  margin-top: 28px;
  padding: 10px 13px;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: #8991a4
}

.terminal:first-letter {
  color: var(--accent-2)
}

.terminal span {
  animation: blink 1s infinite
}

@keyframes blink {
  50% {
    opacity: 0
  }
}

.hero-shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(1px);
  pointer-events: none
}

.shape-one {
  width: 350px;
  height: 350px;
  right: -100px;
  top: 20%;
  background: radial-gradient(circle, rgba(124, 92, 255, .15), transparent 68%)
}

.shape-two {
  width: 300px;
  height: 300px;
  left: -120px;
  bottom: 0;
  background: radial-gradient(circle, rgba(0, 217, 255, .08), transparent 68%)
}

.floating-card {
  position: absolute;
  background: rgba(16, 18, 27, .86);
  border: 1px solid var(--line);
  padding: 12px 15px;
  border-radius: 12px;
  font-size: 11px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, .3);
  animation: float 4s ease-in-out infinite
}

.floating-card span {
  color: var(--accent-2);
  margin-right: 7px
}

.card-ai {
  right: 0;
  top: 15%;
  animation-delay: -1s
}

.card-web {
  left: 0;
  bottom: 16%;
  animation-delay: -2s
}

@keyframes float {
  50% {
    transform: translateY(-10px)
  }
}

.section-heading {
  max-width: 760px;
  margin-bottom: 55px
}

.section-heading h2,
.about-copy h2,
.contact-copy h2,
.ai-copy h2 {
  font: 700 clamp(34px, 4vw, 55px)/1.05 "Space Grotesk", sans-serif;
  letter-spacing: -2px
}

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

.img-html {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  margin-bottom: 28px;
  background: #171a24;
  font-weight: 800;
  font-size: 21px
}

.img-css {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  margin-bottom: 28px;
  background: #171a24;
  font-weight: 800;
  font-size: 21px
}

.img-js {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  margin-bottom: 28px;
  background: #171a24;
  font-weight: 800;
  font-size: 21px
}

.img-n8n {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  margin-bottom: 28px;
  background: #171a24;
  font-weight: 800;
  font-size: 21px
}

.img-github {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  margin-bottom: 28px;
  background: #171a24;
  font-weight: 800;
  font-size: 21px
}

.service-card,
.tech-card {
  border: 1px solid var(--line);
  background: linear-gradient(145deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .012));
  padding: 30px;
  border-radius: var(--radius);
  transition: .3s
}

.service-card:hover,
.tech-card:hover {
  transform: translateY(-7px);
  border-color: rgba(124, 92, 255, .35);
  background: rgba(124, 92, 255, .045)
}

.service-icon {
  font-size: 28px;
  color: var(--accent-2);
  margin-bottom: 35px
}

.service-card h3,
.tech-card h3 {
  font-size: 18px;
  margin-bottom: 12px
}

.service-card p,
.tech-card p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
  min-height: 67px
}

.service-card a {
  display: block;
  margin-top: 25px;
  font-size: 12px;
  color: #d4d7e1
}

.tech {
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .015), transparent)
}

.tech-grid {
  grid-template-columns: repeat(4, 1fr)
}

.tech-logo {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  margin-bottom: 28px;
  background: #171a24;
  font-weight: 800;
  font-size: 21px
}

.html-logo {
  color: #ff6b45
}

.css-logo {
  color: #4b9cff
}

.js-logo {
  color: #ffe066;
  font-size: 15px
}

.n8n-logo {
  color: #ff6a3d;
  font-size: 14px
}

.tech-card span {
  display: inline-block;
  margin-top: 24px;
  color: #687083;
  font-size: 10px;
  border: 1px solid var(--line);
  padding: 6px 9px;
  border-radius: 7px
}

.split {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  align-items: end
}

.split>p {
  max-width: 380px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7
}

.project-grid {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 18px
}

.project-large {
  grid-row: span 2
}

.project-card {
  border: 1px solid var(--line);
  border-radius: 22px;
  overflow: hidden;
  background: #0b0d13;
  transition: .3s
}

.project-card:hover {
  transform: translateY(-5px);
  border-color: rgba(124, 92, 255, .35)
}

.project-visual {
  height: 280px;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden
}

.project-large .project-visual {
  height: 390px
}

.gradient-one {
  background: radial-gradient(circle at 70% 20%, #a855f7, transparent 25%), linear-gradient(135deg, #211638, #0c1019)
}

.gradient-two {
  background: radial-gradient(circle at 30% 30%, #00d9ff55, transparent 25%), linear-gradient(135deg, #071f2a, #0b0e17)
}

.gradient-three {
  background: radial-gradient(circle at 70% 40%, #7c5cff55, transparent 25%), linear-gradient(135deg, #15102b, #0a0c12)
}

.mock-browser {
  width: 65%;
  height: 70%;
  border-radius: 13px;
  background: #f5f1f8;
  color: #17131e;
  padding: 15% 8%;
  position: relative;
  box-shadow: 0 30px 70px #0008;
  transform: rotate(-4deg)
}

.mock-browser:before {
  content: "● ● ●";
  position: absolute;
  top: 9px;
  left: 12px;
  font-size: 8px;
  letter-spacing: 3px;
  color: #aaa
}

.mock-browser strong {
  font: 700 27px/1 "Space Grotesk";
  display: block
}

.mock-browser strong span {
  font-weight: 500
}

.mock-browser small {
  display: block;
  margin-top: 20px;
  font-size: 8px;
  letter-spacing: 2px
}

.dashboard {
  width: 72%;
  padding: 28px;
  border: 1px solid #ffffff22;
  border-radius: 14px;
  background: #0b141a;
  box-shadow: 0 25px 60px #0008;
  display: grid;
  gap: 15px
}

.dashboard b {
  font-size: 36px;
  color: #00d9ff
}

.dashboard span {
  color: #dbe7ec;
  font-size: 12px
}

.dashboard hr {
  width: 100%;
  border: 0;
  border-top: 1px solid #ffffff16
}

.dashboard small {
  color: #55e6b1
}

.phone {
  width: 145px;
  min-height: 230px;
  border: 5px solid #20222c;
  border-radius: 24px;
  background: #090b11;
  padding: 25px 11px 12px;
  box-shadow: 0 25px 50px #0009;
  font-size: 8px;
  line-height: 1.5
}

.chat-title {
  font-weight: 700;
  font-size: 10px;
  margin-bottom: 14px
}

.bubble {
  background: #243a39;
  padding: 6px;
  border-radius: 8px;
  margin: 10px 0
}

.project-info {
  padding: 23px
}

.project-info>div {
  display: flex;
  justify-content: space-between;
  gap: 15px
}

.project-info h3 {
  font-size: 16px
}

.project-info>div span {
  color: #596174;
  font-size: 11px
}

.project-info p {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.6;
  margin: 12px 0
}

.tags {
  display: flex;
  gap: 6px
}

.tags i {
  font-style: normal;
  color: #8991a4;
  border: 1px solid var(--line);
  font-size: 9px;
  padding: 5px 7px;
  border-radius: 6px
}

.ai-section {
  padding-top: 80px
}

.ai-shell {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 50px;
  align-items: center;
  padding: 60px;
  border: 1px solid rgba(124, 92, 255, .2);
  border-radius: 30px;
  background: radial-gradient(circle at 0 50%, rgba(124, 92, 255, .12), transparent 40%), #0b0d13
}

.ai-badge {
  display: inline-flex;
  gap: 8px;
  border: 1px solid var(--line);
  padding: 8px 11px;
  border-radius: 999px;
  font-size: 10px;
  margin-bottom: 28px
}

.ai-badge span {
  color: var(--accent-2)
}

.ai-copy>p:not(.kicker) {
  color: var(--muted);
  line-height: 1.8;
  font-size: 13px;
  max-width: 480px
}

.ai-features {
  display: grid;
  gap: 10px;
  margin-top: 28px;
  color: #aeb4c2;
  font-size: 11px
}

.ai-features span:first-letter {
  color: #4ade80
}

.chat-box {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #090b10;
  overflow: hidden;
  box-shadow: 0 25px 70px #0005
}

.chat-head {
  height: 70px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px
}

.bot-avatar {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff
}

.chat-head strong {
  display: block;
  font-size: 12px
}

.chat-head small {
  display: block;
  color: #687184;
  font-size: 9px;
  margin-top: 4px
}

.chat-head small span {
  display: inline-block;
  width: 5px;
  height: 5px;
  background: #42e695;
  border-radius: 50%;
  margin-right: 4px
}

.messages {
  height: 280px;
  overflow: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px
}

.message {
  max-width: 78%;
  padding: 11px 13px;
  border-radius: 13px;
  font-size: 11px;
  line-height: 1.55
}

.message.bot {
  background: #151822;
  color: #c7cbd5;
  align-self: flex-start;
  border-bottom-left-radius: 4px
}

.message.user {
  background: linear-gradient(135deg, #6750db, #5140aa);
  align-self: flex-end;
  border-bottom-right-radius: 4px
}

.chat-form {
  display: flex;
  gap: 8px;
  border-top: 1px solid var(--line);
  padding: 12px
}

.chat-form input {
  flex: 1;
  background: #11141c;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 12px;
  color: #fff;
  outline: none;
  font-size: 11px
}

.chat-form button {
  width: 40px;
  border: 0;
  border-radius: 10px;
  background: #fff;
  color: #000;
  font-weight: 800
}

.quick-prompts {
  display: flex;
  gap: 7px;
  padding: 0 12px 12px;
  flex-wrap: wrap
}

.quick-prompts button {
  border: 1px solid var(--line);
  background: #0e1017;
  color: #8f97a9;
  padding: 6px 8px;
  border-radius: 7px;
  font-size: 9px
}

.about-grid {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 100px;
  align-items: center
}

.about-visual {
  height: 440px;
  position: relative;
  display: grid;
  place-items: center
}

.about-orbit {
  width: 300px;
  height: 300px;
  border: 1px solid #ffffff13;
  border-radius: 50%;
  box-shadow: 0 0 90px rgba(124, 92, 255, .1)
}

.about-orbit:before,
.about-orbit:after {
  content: "";
  position: absolute;
  border: 1px solid #ffffff10;
  border-radius: 50%
}

.about-orbit:before {
  inset: 35px
}

.about-orbit:after {
  inset: 70px
}

.about-code {
  position: absolute;
  text-align: center;
  font: 700 55px/ .8 "Space Grotesk";
  letter-spacing: -5px
}

.about-code span {
  font-size: 26px;
  color: var(--accent-2);
  letter-spacing: 4px
}

.about-chip {
  position: absolute;
  border: 1px solid var(--line);
  background: #0d1017;
  padding: 9px 12px;
  border-radius: 9px;
  font-size: 10px;
  box-shadow: 0 10px 30px #0005
}

.chip-one {
  top: 18%;
  right: 8%
}

.chip-two {
  left: 8%;
  top: 38%
}

.chip-three {
  bottom: 17%;
  right: 12%
}

.about-copy>p:not(.kicker) {
  color: var(--muted);
  line-height: 1.8;
  font-size: 13px;
  max-width: 600px;
  margin-top: 18px
}

.about-points {
  margin-top: 30px;
  border-top: 1px solid var(--line)
}

.about-points div {
  display: flex;
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  font-size: 12px
}

.about-points b {
  color: #596174;
  font-weight: 500
}

.contact-shell {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  padding: 70px;
  border-radius: 28px;
  border: 1px solid var(--line);
  background: linear-gradient(135deg, rgba(124, 92, 255, .08), rgba(0, 217, 255, .025))
}

.contact-copy>p:not(.kicker) {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.8;
  max-width: 450px;
  margin-top: 22px
}

.socials {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 35px
}

.socials a {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  font-size: 10px;
  color: #9ca3b2;
  display: flex;
  justify-content: space-between
}

.socials a:hover {
  color: #fff;
  border-color: #ffffff25
}

.contact-form {
  display: grid;
  gap: 13px
}

.contact-form label {
  display: grid;
  gap: 7px;
  font-size: 10px;
  color: #8f96a7
}

.contact-form input,
.contact-form textarea,
.contact-form select {
  width: 100%;
  background: #0b0d13;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: #e8ebf1;
  padding: 12px;
  outline: none;
  font-size: 12px;
  resize: vertical
}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
  border-color: #6550d6
}

.contact-form .btn {
  margin-top: 5px
}

.form-status {
  font-size: 11px;
  color: #55e6b1;
  min-height: 16px
}

.footer {
  border-top: 1px solid var(--line);
  padding: 25px 0
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px
}

.footer p,
.footer>a:last-child {
  color: #5f6779;
  font-size: 10px
}

.reveal {
  opacity: 0;
  transform: translateY(25px);
  transition: opacity .7s ease, transform .7s ease
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0)
}

@media(max-width:900px) {
  .nav {
    gap: 15px
  }

  .hero-grid,
  .ai-shell,
  .about-grid,
  .contact-shell {
    grid-template-columns: 1fr
  }

  .hero {
    padding-top: 125px
  }

  .hero-code {
    min-height: 400px
  }

  .hero h1 {
    letter-spacing: -2px
  }

  .service-grid {
    grid-template-columns: 1fr
  }

  .tech-grid {
    grid-template-columns: 1fr 1fr
  }

  .project-grid {
    grid-template-columns: 1fr
  }

  .project-large {
    grid-row: auto
  }

  .about-visual {
    height: 330px
  }

  .contact-shell {
    padding: 40px
  }

  .split {
    display: block
  }

  .split>p {
    margin-top: 20px
  }

  .ai-shell {
    padding: 35px
  }
}

@media(max-width:650px) {
  .container {
    width: min(100% - 30px, var(--container))
  }

  .header {
    padding: 0 15px
  }

  .menu-toggle {
    display: block
  }

  .nav {
    position: absolute;
    top: 76px;
    left: 15px;
    right: 15px;
    display: none;
    flex-direction: column;
    padding: 18px;
    background: rgba(10, 12, 18, .97);
    border: 1px solid var(--line);
    border-radius: 14px
  }

  .nav.open {
    display: flex
  }

  .hero {
    min-height: auto;
    padding-bottom: 90px
  }

  .hero h1 {
    font-size: 45px
  }

  .hero-description {
    font-size: 14px
  }

  .mini-stats {
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 40px
  }

  .hero-code {
    min-height: 330px
  }

  .code-window {
    transform: none
  }

  .code-content {
    padding: 20px;
    font-size: 10px
  }

  .floating-card {
    font-size: 9px
  }

  .card-ai {
    right: -5px
  }

  .card-web {
    left: -5px
  }

  .section {
    padding: 85px 0
  }

  .tech-grid {
    grid-template-columns: 1fr
  }

  .project-visual,
  .project-large .project-visual {
    height: 260px
  }

  .ai-shell {
    padding: 25px
  }

  .messages {
    height: 250px
  }

  .about-grid {
    gap: 30px
  }

  .about-visual {
    height: 300px
  }

  .about-orbit {
    width: 240px;
    height: 240px
  }

  .contact-shell {
    padding: 28px 20px;
    gap: 45px
  }

  .socials {
    grid-template-columns: 1fr
  }

  .footer-inner {
    flex-direction: column
  }

  .cursor-glow {
    display: none
  }
}