/* =========================
   AKDSYS - Main stylesheet
   Optimized for Cloudflare Pages
========================= */

:root {
  --bg: #ffffff;
  --dark: #050505;
  --text: #111111;
  --muted: #666666;
  --border: #e8e8e8;
  --surface: #f7f7f8;
  --blue: #0070f3;
  --blue-light: rgba(0,112,243,.25);

  --radius: 16px;
  --max-width: 1120px;
}


/* Reset */

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


html {
  scroll-behavior: smooth;
}


body {
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;

  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}


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


.container {
  width: min(100% - 40px, var(--max-width));
  margin-inline: auto;
}


/* =========================
   Header
========================= */


.header {
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 10;
}


.nav {

  height: 90px;

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

}


.logo {

  font-size: 1.35rem;
  font-weight:800;
  letter-spacing:-.04em;

  color:white;

}


.logo span {

  display:block;

  font-size:.55rem;
  font-weight:500;

  letter-spacing:.18em;

  opacity:.65;

}



nav {

  display:flex;
  gap:32px;

}


nav a {

  color:white;

  font-size:.9rem;

  opacity:.75;

  transition:.2s;

}


nav a:hover {

  opacity:1;

}



/* =========================
   Hero
========================= */


.hero {

  min-height:100vh;

  display:flex;
  align-items:center;

  text-align:center;

  color:white;

  background:

  radial-gradient(
    circle at 20% 20%,
    rgba(0,112,243,.35),
    transparent 35%
  ),

  radial-gradient(
    circle at 80% 60%,
    rgba(120,50,255,.25),
    transparent 35%
  ),

  var(--dark);

}


.hero-content {

  max-width:850px;

  margin:auto;

  animation:fadeUp .8s ease both;

}



.badge {

  display:inline-block;

  padding:8px 16px;

  margin-bottom:28px;

  border-radius:50px;

  border:1px solid rgba(255,255,255,.15);

  background:rgba(255,255,255,.05);

  color:rgba(255,255,255,.8);

  font-size:.85rem;

}



.hero h1 {

  font-size:clamp(2.7rem,6vw,4.8rem);

  line-height:1.05;

  letter-spacing:-.06em;

  font-weight:800;

  background:
  linear-gradient(
    135deg,
    #ffffff,
    #999999
  );

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

  margin-bottom:25px;

}



.hero-text {

  max-width:650px;

  margin:auto;

  color:rgba(255,255,255,.7);

  font-size:1.2rem;

}



.actions {

  display:flex;

  justify-content:center;

  gap:15px;

  margin-top:40px;

  flex-wrap:wrap;

}


/* Buttons */


.button {

  display:inline-flex;

  align-items:center;

  justify-content:center;

  padding:14px 28px;

  border-radius:12px;

  font-weight:600;

  font-size:.95rem;

  transition:.25s;

}



.button:hover {

  transform:translateY(-2px);

}



.primary {

  background:white;

  color:black;

}



.secondary {

  border:1px solid rgba(255,255,255,.25);

  color:white;

}



.secondary:hover {

  background:rgba(255,255,255,.1);

}



/* =========================
   Sections
========================= */


.section {

  padding:100px 0;

}



.section-title {

  text-align:center;

  margin-bottom:60px;

}



.section-title h2 {

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

  letter-spacing:-.04em;

}



.section-title p {

  margin-top:15px;

  color:var(--muted);

}



/* Cards */


.cards {

  display:grid;

  grid-template-columns:
  repeat(auto-fit,minmax(240px,1fr));

  gap:24px;

}



.card {

  padding:32px;

  background:var(--surface);

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

  border-radius:var(--radius);

  transition:.25s;

}



.card:hover {

  transform:translateY(-6px);

  box-shadow:
  0 20px 50px rgba(0,0,0,.08);

}



.icon {

  font-size:2rem;

  margin-bottom:20px;

}


.card h3 {

  margin-bottom:10px;

  font-size:1.2rem;

}



.card p {

  color:var(--muted);

}



/* =========================
   Expertise
========================= */


.dark-section {

  background:#050505;

  color:white;

}



.dark-section .section-title p {

  color:#aaa;

}



.features {

  display:grid;

  grid-template-columns:
  repeat(auto-fit,minmax(220px,1fr));

  gap:40px;

}



.features strong {

  color:var(--blue);

  font-size:.8rem;

}



.features h3 {

  margin:12px 0;

}



.features p {

  color:#aaa;

}



/* Audience */


.audience {

  text-align:center;

}



.audience h2 {

  font-size:2.2rem;

  margin-bottom:40px;

}



.audience-grid {

  display:grid;

  grid-template-columns:
  repeat(auto-fit,minmax(240px,1fr));

  gap:25px;

}



.audience-grid div {

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

  padding:30px;

  border-radius:var(--radius);

}



/* Contact */


.contact {

  padding:80px 0;

}



.contact-box {

  background:#050505;

  color:white;

  text-align:center;

  padding:70px 25px;

  border-radius:20px;

}



.contact-box h2 {

  font-size:clamp(1.8rem,4vw,2.8rem);

  margin-bottom:15px;

}



.contact-box p {

  color:#aaa;

  margin-bottom:35px;

}



/* Footer */


footer {

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

  padding:35px 0;

}



.footer {

  display:flex;

  justify-content:space-between;

  align-items:center;

  gap:20px;

  color:var(--muted);

  font-size:.9rem;

}



/* Animation */


@keyframes fadeUp {

from {

opacity:0;

transform:translateY(25px);

}

to {

opacity:1;

transform:none;

}

}



/* Mobile */


@media(max-width:768px){


.nav {

height:75px;

}


nav {

display:none;

}


.hero {

min-height:90vh;

padding-top:60px;

}


.hero-text {

font-size:1rem;

}


.section {

padding:70px 0;

}


.footer {

flex-direction:column;

text-align:center;

}


}