/* Design Tokens */
:root{
  /* Primary */
  --color-primary-900: #052f4f; /* deep navy */
  --color-primary-700: #0b4a78;
  --color-primary-500: #1166a0;

  /* Neutral */
  --color-bg: #ffffff;
  --color-surface: #f6f7f8;
  --color-muted: #6b7280;
  --color-border: #EFF6EE;

  /* Accent */
  --color-accent-500: #DD0426; /* emerald-esque */
  --color-accent-400: #F02D3A;

  /* Highlight (optional luxury tone) */
  --color-gold: #c9a55c;

  /* Actions */
  --color-cta-text: #ffffff;
  --color-cta-bg: var(--color-primary-500);

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(16,24,40,0.06);
  --shadow-lg: 0 10px 30px rgba(2,6,23,0.12);

  /* Typography */
  --font-sans: 'Poppins', 'Montserrat', system-ui, -apple-system, "Segoe UI", Roboto, 'Helvetica Neue', Arial;
  --font-body: 'Open Sans', 'Lato', system-ui;
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-md: 16px;
  --fs-lg: 20px;
  --fs-xl: 28px;
  --fw-regular: 400;
  --fw-medium: 600;
  --fw-bold: 700;

  /* Spacing */
  --gap-1:8px; 
  --gap-2:16px; 
  --gap-3:24px; 
  --gap-4:32px;

  /* Radius */
  --radius-sm:8px; 
  --radius-md:12px;
}

/* Base Styles */
*{
    box-sizing:border-box
}
html{
    font-size:16px;
    scroll-behavior: smooth;
}
body{
    font-family:var(--font-body);
    color:var(--color-primary-900);
    background:var(--color-bg);
    line-height:1.5;
    margin: 0;
}

.container{
    max-width:1200px;
    margin:0 auto;
    padding:0 16px
}

/* Utilities */
.u-flex{
    display:flex
}
.u-center{
    justify-content:center;
    align-items:center
}
.mt-8{margin-top:8px}
.mt-16{margin-top:16px}
.p-16{padding:16px}

/* Header */
.site-header{
    background:var(--color-bg);
    padding:16px 0;
    box-shadow:var(--shadow-sm);
    position: sticky;
    top: 0;
    z-index: 10;
}
.site-logo{
    font-weight:700;
    color:var(--color-primary-700);
    font-family: var(--font-sans);
}

/* Hero */
.hero{
    padding:64px 0;
}
.hero h1{
    font-family:var(--font-sans);
    font-size:var(--fs-xl);
    margin:0
}
.hero p{
    color:var(--color-muted)
}

/* Buttons */
.btn {
  display:inline-block;
  padding:12px 18px;
  border-radius:10px;
  text-decoration:none;
  font-weight:600;
  border: none;
  cursor: pointer;
}
.btn-cta{
    background:var(--color-cta-bg);
    color:var(--color-cta-text);
    padding:12px 20px;
    border-radius:8px;
    text-decoration:none;
    display:inline-block
}
.btn-secondary{
    background:transparent;
    border:1px solid var(--color-border);
    color:var(--color-primary-700)
}

/* Card */
.card{
    background:var(--color-bg);
    border:1px solid var(--color-border);
    border-radius:12px;
    padding:24px;
    box-shadow:var(--shadow-sm)
}

/* Form */
input, textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-family: var(--font-body);
}

/* Interactive Styles & Hovers */
nav a, .btn, .card, #portfolio img {
    transition: all 0.2s ease-in-out;
}

nav a:hover {
    color: var(--color-primary-500);
    text-decoration: underline;
}

.btn-cta:hover {
    background-color: var(--color-primary-700);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

#portfolio img:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-lg);
}


/* Responsive */
@media (max-width: 900px){
  .hero .container {grid-template-columns:1fr}
  #services .container div {grid-template-columns: 1fr;}
}