/* style.css */

:root {

  --bg: #09090f;
  --bg-secondary: #11111a;

  --card: rgba(255, 255, 255, 0.04);
  --card-hover: rgba(255, 255, 255, 0.06);

  --border: rgba(255, 255, 255, 0.08);

  --text: #f5f5ff;
  --muted: #a1a1b5;

  --primary: #c084fc;
  --primary-strong: #a855f7;
  --primary-dark: #7e22ce;

  --gradient:
    linear-gradient(
      135deg,
      #c084fc 0%,
      #a855f7 45%,
      #7c3aed 100%
    );

  --shadow:
    0 10px 40px rgba(124, 58, 237, 0.18);
}

/* RESET */

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Inter", sans-serif;

  background: var(--bg);

  color: var(--text);

  line-height: 1.6;
}

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

.container {
  width: min(1120px, 90%);
  margin: auto;
}

.section {
  padding: 110px 0;
}

/* HEADER */

.header {

  position: sticky;
  top: 0;
  z-index: 1000;

  background: rgba(9, 9, 15, 0.7);

  backdrop-filter: blur(12px);

  border-bottom: 1px solid var(--border);
}

.nav {

  height: 80px;

  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {

  font-size: 1.3rem;
  font-weight: 800;
}

.logo span {

  background: var(--gradient);

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.nav-links {

  display: flex;
  gap: 2rem;
}

.nav-links a {

  color: var(--muted);

  transition: 0.2s;
}

.nav-links a:hover {
  color: var(--text);
}

.menu-btn {

  display: none;

  background: none;
  border: none;

  color: white;

  font-size: 1.5rem;

  cursor: pointer;
}

.mobile-menu {

  display: none;

  flex-direction: column;

  padding: 1rem 5%;

  border-top: 1px solid var(--border);

  background: #0f0f18;
}

.mobile-menu a {

  padding: 1rem 0;

  color: var(--muted);
}

/* HERO */

.hero {

  min-height: 92vh;

  display: flex;
  align-items: center;
}

.hero-content {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 4rem;

  align-items: center;
}

.tag,
.section-tag {

  color: var(--primary);

  font-size: 0.9rem;

  font-weight: 700;

  letter-spacing: 1px;

  margin-bottom: 1rem;
}

.hero h1 {

  font-size: clamp(3rem, 6vw, 5rem);

  line-height: 1;

  margin-bottom: 1.5rem;
}

.hero-description {

  color: var(--muted);

  max-width: 560px;

  margin-bottom: 2rem;
}

.hero-buttons {

  display: flex;

  gap: 1rem;

  flex-wrap: wrap;
}

/* BUTTONS */

.btn {

  padding: 14px 24px;

  border-radius: 14px;

  font-weight: 600;

  transition: 0.25s ease;
}

.primary-btn {

  background: var(--gradient);

  color: white;
}

.primary-btn:hover {

  transform: translateY(-2px);

  opacity: 0.95;
}

.secondary-btn {

  border: 1px solid var(--border);

  background: rgba(255,255,255,0.02);
}

.secondary-btn:hover {

  background: rgba(255,255,255,0.05);
}

/* HERO CARD */

.hero-card {
  position: relative;
}

.card-glow {

  position: absolute;

  inset: 0;

  background:
    radial-gradient(
      circle,
      rgba(168, 85, 247, 0.35),
      transparent 70%
    );

  filter: blur(60px);
}

.mockup {

  position: relative;

  background: var(--card);

  border: 1px solid var(--border);

  border-radius: 28px;

  overflow: hidden;

  backdrop-filter: blur(12px);

  box-shadow: var(--shadow);
}

.mockup-header {

  display: flex;

  gap: 0.5rem;

  padding: 1rem;

  border-bottom: 1px solid var(--border);
}

.mockup-header span {

  width: 12px;
  height: 12px;

  border-radius: 50%;

  background: rgba(255,255,255,0.15);
}

.mockup-content {
  padding: 2rem;
}

.line {

  height: 12px;

  background: rgba(255,255,255,0.08);

  border-radius: 999px;

  margin-bottom: 1rem;
}

.w-80 { width: 80%; }
.w-60 { width: 60%; }
.w-90 { width: 90%; }

.mockup-grid {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 1rem;

  margin-top: 2rem;
}

.grid-box {

  aspect-ratio: 1;

  border-radius: 18px;

  background: rgba(255,255,255,0.04);

  border: 1px solid rgba(255,255,255,0.04);
}

/* SECTION HEADERS */

.section-header {
  margin-bottom: 4rem;
}

.section-header h2,
.about-content h2,
.contact-box h2 {

  font-size: clamp(2rem, 4vw, 3rem);

  margin-bottom: 1rem;
}

/* SERVICES */

.services-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 2rem;
}

.service-card {

  background: var(--card);

  border: 1px solid var(--border);

  border-radius: 24px;

  padding: 2rem;

  transition: 0.25s ease;

  backdrop-filter: blur(10px);
}

.service-card:hover {

  transform: translateY(-5px);

  border-color: rgba(192, 132, 252, 0.35);

  background: var(--card-hover);
}

.icon {

  font-size: 2rem;

  margin-bottom: 1rem;
}

.service-card p {
  color: var(--muted);
}

/* COMPETENCE */

.competence-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 2rem;
}

.competence-card {

  background: var(--card);

  border: 1px solid var(--border);

  border-radius: 24px;

  padding: 2rem;

  transition: 0.25s ease;

  backdrop-filter: blur(10px);
}

.competence-card:hover {

  transform: translateY(-5px);

  border-color: rgba(192, 132, 252, 0.35);

  background: var(--card-hover);
}

.competence-icon {

  font-size: 2rem;

  margin-bottom: 1rem;
}

.competence-card h3 {
  margin-bottom: 1rem;
}

.competence-card p {

  color: var(--muted);

  margin-bottom: 1.5rem;
}

.competence-card span {

  color: var(--primary);

  font-size: 0.9rem;

  font-weight: 600;
}

/* PROJECTS */

.projects-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 2rem;
}

.project-card {

  background: var(--card);

  border: 1px solid var(--border);

  border-radius: 24px;

  overflow: hidden;

  transition: 0.25s ease;

  backdrop-filter: blur(10px);
}

.project-card:hover {

  transform: translateY(-5px);

  border-color: rgba(192, 132, 252, 0.35);

  background: var(--card-hover);
}

.project-image {

  height: 180px;

  background:
    linear-gradient(
      135deg,
      rgba(192,132,252,0.15),
      rgba(124,58,237,0.08)
    );
}

.project-image-img{
    max-height:180px;
    width:100%;
    object-fit: cover;
}

.project-content {
  padding: 2rem;
}

.project-content p {
  color: var(--muted);
}

/* ABOUT */

.about-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 4rem;

  align-items: center;
}

.about-card {

  min-height: 100px;

  border-radius: 28px;

  background:
    linear-gradient(
      135deg,
      rgba(192,132,252,0.15),
      rgba(124,58,237,0.04)
    );

  border: 1px solid var(--border);
  overflow:hidden;
}

.about-card-img {
    max-width:100%;
    margin-bottom:-5px;
}

.about-content p {

  color: var(--muted);

  margin-bottom: 1.5rem;
}

.about-content ul {
  list-style: none;
}

.about-content li {
  margin-bottom: 0.8rem;
}

/* CONTACT */

.contact-box {

  background: var(--card);

  border: 1px solid var(--border);

  border-radius: 32px;

  padding: 4rem;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 2rem;

  backdrop-filter: blur(12px);
}

.contact-box p {
  color: var(--muted);
}

/* FOOTER */

.footer {

  border-top: 1px solid var(--border);

  padding: 2rem 0;
}

.footer-content {

  display: flex;

  justify-content: space-between;

  flex-wrap: wrap;

  gap: 1rem;
}

.footer p,
.footer a {
  color: var(--muted);
}

/* =========================================
   COMPANY INFO
========================================= */

.company-info-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 2rem;
}

.info-card {

  background: var(--card);

  border: 1px solid var(--border);

  border-radius: 24px;

  padding: 2rem;

  backdrop-filter: blur(10px);

  transition: 0.25s ease;
}

.info-card:hover {

  transform: translateY(-5px);

  border-color: rgba(192, 132, 252, 0.35);

  background: var(--card-hover);
}

.info-icon {

  font-size: 2rem;

  margin-bottom: 1rem;
}

.info-card h3 {

  margin-bottom: 1.5rem;
}

.info-list {

  display: flex;

  flex-direction: column;

  gap: 1rem;
}

.info-row {

  display: flex;

  flex-direction: column;

  gap: 0.3rem;

  padding-bottom: 1rem;

  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.info-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.info-row span {

  color: var(--muted);

  font-size: 0.9rem;
}

.info-row strong {

  color: var(--text);

  font-size: 1rem;

  font-weight: 600;
}

/* RESPONSIVE */

@media (max-width: 960px) {

  .hero-content,
  .about-grid,
  .services-grid,
  .competence-grid,
  .projects-grid {

    grid-template-columns: 1fr;
  }

  .contact-box {

    flex-direction: column;

    align-items: flex-start;
  }

  .nav-links {
    display: none;
  }

  .menu-btn {
    display: block;
  }

  .company-info-grid {
    grid-template-columns: 1fr;
  }

}