/* ============================================
   Team 360 Turnkey Projects LLP
   Global CSS Variables, Reset & Typography
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Syne:wght@600;700;800&display=swap');

:root {
  /* --- Color System --- */
  --color-bg:           #2B2B2B;
  --color-bg-elevated:  #333333;

  /* Typography — Ultra-refined against matte charcoal */
  --color-text:         #FFFFFF;          /* Main headers & titles */
  --color-text-sub:     #D4D4D4;          /* Subheadings & primary body text */
  --color-text-dim:     #B3B3B3;          /* Secondary text */
  --color-text-muted:   rgba(179, 179, 179, 0.45); /* Tertiary / captions */
  --color-text-silver:  linear-gradient(90deg, #FFFFFF, #B3B3B3); /* Gradient metallic silver */

  /* Accent system */
  --color-accent:       #FFFFFF;          /* Pure Accent Light */
  --color-accent-dim:   rgba(255, 255, 255, 0.22);
  --color-accent-faint: rgba(255, 255, 255, 0.07);
  --color-success:      #32CD32;
  --color-error:        rgba(255, 70, 70, 0.85);

  /* --- Overlays --- */
  --color-overlay-light: rgba(10, 10, 10, 0.35);
  --color-overlay-mid:   rgba(10, 10, 10, 0.55);
  --color-overlay-dark:  rgba(0,   0,  0, 0.82);
  --glass-bg:            rgba(10, 10, 10, 0.68);
  --glass-bg-light:      rgba(18, 18, 18, 0.92);

  /* --- Animation Curves --- */
  --ease-cinematic: cubic-bezier(0.85, 0, 0.15, 1);
  --ease-magnetic:  cubic-bezier(0.25, 1, 0.5, 1);
  --ease-snappy:    cubic-bezier(0.6, 0.05, 0.01, 0.99);
  --ease-bounce:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);

  /* --- Fonts --- */
  --font-heading: 'Syne',  sans-serif;
  --font-body:    'Inter', sans-serif;

  /* --- Spacing --- */
  --container-pad:    max(24px, 4.5vw);
  --section-pad-v:    clamp(80px, 12vh, 140px);
  --section-pad-v-sm: clamp(60px, 8vh, 100px);

  /* --- Borders --- */
  --border-subtle:  1px solid rgba(255, 255, 255, 0.06);
  --border-gold:    1px solid rgba(200, 200, 200, 0.18); /* renamed to silver value */
  --border-dim:     1px solid rgba(255, 255, 255, 0.10);
}

/* ===========================
   RESET & BASE
=========================== */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scrollbar-width: none;
  scroll-behavior: auto; /* Lenis controls this */
}
html::-webkit-scrollbar { display: none; }

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  cursor: none; /* custom cursor */
}

@media (hover: none) {
  body { cursor: auto; }
}

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

ul, ol { list-style: none; }

button {
  background: none;
  border: none;
  color: inherit;
  cursor: none;
  font-family: inherit;
  font-size: inherit;
}

img {
  max-width: 100%;
  display: block;
}

/* ===========================
   TYPOGRAPHY SCALE
=========================== */
/* --- Main Headers & Titles: Ultra-refined off-white --- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--color-text);    /* #F4F4F4 off-white */
  text-transform: uppercase;
  letter-spacing: -0.04em;
  line-height: 1.08;
  font-weight: 700;
}

/* --- Body: Balanced white-gray --- */
body {
  color: var(--color-text-sub); /* #CCCCCC */
}

.text-massive { font-size: clamp(3.5rem, 9vw, 9.5rem); }
.text-huge    { font-size: clamp(2.5rem, 6vw,  6.5rem); }
.text-large   { font-size: clamp(2rem,   4vw,  4.5rem); }
.text-medium  { font-size: clamp(1.2rem, 2vw,  1.9rem); }
.text-body    { font-size: clamp(0.95rem, 1.1vw, 1.15rem); }
.text-small   { font-size: clamp(0.75rem, 0.85vw, 0.9rem); }
.text-label   { font-size: 0.72rem; letter-spacing: 0.28em; text-transform: uppercase; }

/* --- Color utilities --- */
.text-accent  { color: var(--color-accent); }
.text-dim     { color: var(--color-text-dim); }   /* #B3B3B3 metallic platinum */
.text-muted   { color: var(--color-text-muted); }

/* --- Metallic silver gradient text helper --- */
.text-silver {
  background: var(--color-text-silver);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ===========================
   UTILITIES
=========================== */
.container {
  width: 100%;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

.silver-line {
  display: block;
  width: 48px;
  height: 1px;
  background: var(--color-accent); /* platinum silver */
}

/* ===========================
   LENIS SMOOTH SCROLL
=========================== */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth          { scroll-behavior: auto !important; }
.lenis.lenis-stopped         { overflow: hidden; }
.lenis.lenis-scrolling       { cursor: none; }

.section-action-hint {
  font-size: 11px !important;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 4px;
  margin-bottom: 20px;
  text-align: center;
  display: block;
}