/* ============================================================
   KREA S.r.l. — Corporate Website Stylesheet v2
   Refined Material Design | Designer-level attention to detail
   ============================================================ */

:root {
  --color-primary: #1A1F3D;
  --color-primary-light: #2A3060;
  --color-primary-dark: #0E1228;

  --color-accent: #FF6B6B;
  --color-accent-light: #FF9A9A;
  --color-accent-dark: #E84C4C;
  --color-accent-gradient: linear-gradient(135deg, #FF9A9A 0%, #FF6B6B 52%, #E84C4C 100%);

  --color-bg: #F5F7FA;
  --color-bg-alt: #EDF0F7;
  --color-bg-dark: #0A2024;
  --color-surface: #FFFFFF;
  --color-border: #D4D9E8;
  --color-border-light: #E4E8F2;

  --color-text: #1C2340;
  --color-text-secondary: #4A5178;
  --color-text-tertiary: #8890AD;
  --color-text-on-dark: #FFFFFF;
  --color-text-on-dark-secondary: rgba(220,225,245,0.75);

  --shadow-1: 0 1px 4px rgba(26,31,61,0.06), 0 1px 2px rgba(26,31,61,0.04);
  --shadow-2: 0 4px 12px rgba(26,31,61,0.07), 0 2px 4px rgba(26,31,61,0.04);
  --shadow-3: 0 12px 28px rgba(26,31,61,0.08), 0 4px 10px rgba(26,31,61,0.04);
  --shadow-4: 0 18px 36px rgba(26,31,61,0.1), 0 6px 16px rgba(26,31,61,0.05);

  --transition-fast: 150ms cubic-bezier(0.4,0,0.2,1);
  --transition-base: 250ms cubic-bezier(0.4,0,0.2,1);
  --transition-slow: 400ms cubic-bezier(0.4,0,0.2,1);

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;
  --space-5xl: 128px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  --font-family: 'Manrope', 'Segoe UI', sans-serif;
  --font-family-display: 'Sora', 'Manrope', sans-serif;
  --container-max: 1240px;
  --container-narrow: 800px;
}


/* --- Reset --- */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; font-size:16px; }
body { font-family:var(--font-family); color:var(--color-text); background:var(--color-bg); line-height:1.65; overflow-x:hidden; }
img { max-width:100%; height:auto; display:block; }
a { color:inherit; text-decoration:none; }
ul,ol { list-style:none; }
button { font-family:inherit; cursor:pointer; border:none; background:none; }
input,textarea,select { font-family:inherit; font-size:inherit; }
::selection { background:rgba(255,107,107,0.25); color:var(--color-text); }


/* --- Typography --- */
h1,h2,h3,h4,h5,h6 { font-family:var(--font-family-display); font-weight:700; line-height:1.2; color:var(--color-text); }
h1 { font-size:clamp(2.2rem,5vw,3.5rem); letter-spacing:-0.03em; }
h2 { font-size:clamp(1.75rem,3.5vw,2.4rem); letter-spacing:-0.025em; }
h3 { font-size:clamp(1.25rem,2.5vw,1.5rem); letter-spacing:-0.01em; }
h4 { font-size:1.1rem; }
p { line-height:1.8; color:var(--color-text-secondary); }


/* --- Layout --- */
.container { width:100%; max-width:var(--container-max); margin:0 auto; padding:0 var(--space-lg); }
section { padding:var(--space-5xl) 0; }
@media(max-width:768px){ section { padding:var(--space-3xl) 0; } }


/* --- Section Header --- */
.section-header { text-align:center; margin-bottom:var(--space-3xl); }

.section-label {
  display:inline-flex;
  align-items:center;
  gap:var(--space-sm);
  font-size:0.72rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.14em;
  color:var(--color-accent-dark);
  margin-bottom:var(--space-md);
  background:rgba(255,107,107,0.1);
  padding:6px 16px;
  border-radius:var(--radius-full);
  border:1px solid rgba(255,107,107,0.18);
}

.section-label::before {
  content:'';
  width:6px;
  height:6px;
  background:var(--color-accent);
  border-radius:50%;
  flex-shrink:0;
}

.section-header h2 { margin-bottom:var(--space-md); }
.section-header p { max-width:620px; margin:0 auto; font-size:1.05rem; }

.values .section-header,
.services .section-header {
  text-align:left;
  max-width:760px;
  margin-bottom:var(--space-2xl);
}

.values .section-header p,
.services .section-header p {
  margin:0;
  max-width:680px;
}


/* --- Buttons --- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-sm);
  padding:14px 32px; font-size:0.92rem; font-weight:600;
  border-radius:var(--radius-lg); transition:all var(--transition-base);
  position:relative; overflow:hidden; white-space:nowrap;
}
.btn::before { content:''; position:absolute; inset:0; background:rgba(255,255,255,0.1); opacity:0; transition:opacity var(--transition-fast); }
.btn:hover::before { opacity:1; }

.btn--primary { background:var(--color-accent-gradient); color:white; box-shadow:0 4px 16px rgba(255,107,107,0.3); }
.btn--primary:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(255,107,107,0.4); }
.btn--primary:active { transform:translateY(0); }

.btn--outline { border:2px solid var(--color-border); color:var(--color-text); background:transparent; }
.btn--outline:hover { border-color:var(--color-accent); color:var(--color-accent); transform:translateY(-2px); }

.btn--outline-light { border:2px solid rgba(255,255,255,0.25); color:white; background:transparent; }
.btn--outline-light:hover { border-color:white; background:rgba(255,255,255,0.08); transform:translateY(-2px); }

.btn--small { padding:10px 22px; font-size:0.85rem; }


/* ============================================================
   HEADER
   ============================================================ */
.header {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding:var(--space-md) 0; transition:all var(--transition-base); background:transparent;
}
.header--scrolled {
  background:rgba(245,247,250,0.95); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  box-shadow:var(--shadow-2); padding:var(--space-sm) 0;
}
.header__inner { display:flex; align-items:center; justify-content:space-between; }

.header__logo { display:flex; align-items:center; gap:10px; z-index:1001; }
.header__logo-mark { position:relative; width:68px; height:38px; flex-shrink:0; }
.header__logo-img {
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:contain; object-position:left center;
  transition:opacity var(--transition-base);
}
.header__logo-img--light { opacity:0; }
.header__logo-img--dark { opacity:1; }
.header--scrolled .header__logo-img--light { opacity:1; }
.header--scrolled .header__logo-img--dark { opacity:0; }
.header__logo-label { display:flex; align-items:baseline; gap:4px; }
.header__logo-name { font-size:1.35rem; font-weight:900; color:white; letter-spacing:0.02em; transition:color var(--transition-base); }
.header__logo-suffix { font-size:0.75rem; font-weight:500; color:rgba(255,255,255,0.5); transition:color var(--transition-base); }
.header--scrolled .header__logo-name { color:var(--color-primary); }
.header--scrolled .header__logo-suffix { color:var(--color-text-tertiary); }

.header__nav { display:flex; align-items:center; gap:var(--space-xl); }
.header__menu { display:flex; align-items:center; gap:var(--space-lg); }
.header__menu a {
  font-size:0.88rem; font-weight:500; color:rgba(255,255,255,0.7);
  transition:color var(--transition-fast); position:relative; padding:var(--space-xs) 0;
}
.header--scrolled .header__menu a { color:var(--color-text-secondary); }
.header__menu a::after {
  content:''; position:absolute; bottom:-2px; left:0; width:0; height:2px;
  background:var(--color-accent-gradient); transition:width var(--transition-base); border-radius:var(--radius-full);
}
.header__menu a:hover,.header__menu a.active { color:var(--color-accent); }
.header--scrolled .header__menu a:hover,.header--scrolled .header__menu a.active { color:var(--color-accent); }
.header__menu a:hover::after,.header__menu a.active::after { width:100%; }

/* Language Selector */
.lang-selector { position:relative; }
.lang-selector__current {
  display:flex; align-items:center; gap:6px; padding:7px 13px;
  border-radius:var(--radius-full); font-size:0.82rem; font-weight:600;
  color:rgba(255,255,255,0.7); cursor:pointer; transition:all var(--transition-fast);
  border:1.5px solid rgba(255,255,255,0.2); background:transparent;
}
.header--scrolled .lang-selector__current {
  color:var(--color-text-secondary); border-color:var(--color-border); background:var(--color-surface);
}
.lang-selector__current:hover { border-color:var(--color-accent); color:var(--color-accent); }
.lang-selector__current .flag { font-size:1.05rem; line-height:1; }
.lang-selector__current .chevron { font-size:0.6rem; transition:transform var(--transition-fast); margin-left:2px; }
.lang-selector.open .lang-selector__current .chevron { transform:rotate(180deg); }

.lang-selector__dropdown {
  position:absolute; top:calc(100% + 8px); right:0;
  background:var(--color-surface); border-radius:var(--radius-lg); box-shadow:var(--shadow-4);
  border:1px solid var(--color-border-light); overflow:hidden;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:all var(--transition-base); min-width:155px; z-index:1002;
}
.lang-selector.open .lang-selector__dropdown { opacity:1; visibility:visible; transform:translateY(0); }

.lang-selector__option {
  display:flex; align-items:center; gap:10px; padding:11px 16px;
  font-size:0.85rem; font-weight:500; color:var(--color-text-secondary);
  cursor:pointer; transition:all var(--transition-fast); width:100%; text-align:left;
}
.lang-selector__option:hover { background:var(--color-bg-alt); color:var(--color-accent); }
.lang-selector__option.active { color:var(--color-accent); background:rgba(225,138,47,0.09); }
.lang-selector__option .flag { font-size:1.15rem; }

/* Mobile */
.mobile-toggle { display:none; flex-direction:column; gap:5px; width:28px; z-index:1001; padding:4px 0; }
.mobile-toggle span { display:block; height:2px; background:white; border-radius:var(--radius-full); transition:all var(--transition-base); }
.header--scrolled .mobile-toggle span { background:var(--color-text); }
.mobile-toggle span:nth-child(1) { width:100%; }
.mobile-toggle span:nth-child(2) { width:70%; }
.mobile-toggle span:nth-child(3) { width:85%; }
.mobile-toggle.active span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.mobile-toggle.active span:nth-child(2) { opacity:0; width:0; }
.mobile-toggle.active span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); width:100%; }

@media(max-width:900px){
  .mobile-toggle { display:flex; }
  .header__nav {
    position:fixed; inset:0; background:var(--color-bg);
    flex-direction:column; justify-content:center; align-items:center; gap:var(--space-2xl);
    opacity:0; visibility:hidden; transition:all var(--transition-slow);
  }
  .header__nav.open { opacity:1; visibility:visible; }
  .header__nav .header__menu a { color:var(--color-text) !important; }
  .header__menu { flex-direction:column; gap:var(--space-xl); }
  .header__menu a { font-size:1.4rem; font-weight:600; }
  .header__nav .lang-selector__current { color:var(--color-text-secondary); border-color:var(--color-border); }
}


/* ============================================================
   HERO
   ============================================================ */
.hero {
  position:relative; min-height:100vh; display:flex; flex-direction:column; justify-content:center;
  padding:calc(var(--space-5xl) + 20px) 0 0; background:#0A2024; overflow:hidden;
  --color-accent: #E18A2F;
  --color-accent-light: #F0B56D;
  --color-accent-dark: #B3671D;
  --color-accent-gradient: linear-gradient(135deg, #F0B56D 0%, #E18A2F 52%, #B3671D 100%);
}
.hero__bg { position:absolute; inset:0; z-index:0; }
.hero__bg::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(132deg, rgba(10,32,36,0.97) 0%, rgba(18,52,59,0.94) 46%, rgba(29,74,83,0.9) 100%);
  z-index:1;
}
.hero__bg-pattern {
  position:absolute; inset:0; opacity:0.03; z-index:2;
  background-image:
    radial-gradient(circle at 25% 25%, white 1px, transparent 1px),
    radial-gradient(circle at 75% 75%, white 1px, transparent 1px);
  background-size:60px 60px;
}
.hero__accent-shape { position:absolute; z-index:2; opacity:0.05; }
.hero__accent-shape--1 { top:10%; right:-5%; width:500px; height:500px; border-radius:50%; background:#E18A2F; filter:blur(100px); }
.hero__accent-shape--2 { bottom:0; left:-5%; width:400px; height:400px; border-radius:50%; background:#1D4A53; filter:blur(80px); }

.hero__content {
  position:relative; z-index:3; display:grid; grid-template-columns:1.08fr 0.92fr;
  gap:clamp(24px,4vw,56px); align-items:center; flex:1;
}

.hero__text { max-width:580px; }

/* Company name — big and prominent */
.hero__company-name {
  display:flex; align-items:baseline; gap:12px; margin-bottom:var(--space-md);
}
.hero__krea {
  font-size:clamp(3rem,7vw,4.5rem); font-weight:800; color:white;
  letter-spacing:0.04em; line-height:1;
}
.hero__srl {
  font-size:clamp(1rem,2vw,1.4rem); font-weight:500;
  color:rgba(255,255,255,0.4); letter-spacing:0.02em;
}
.hero__eyebrow {
  display:inline-flex; align-items:center; gap:var(--space-sm);
  padding:8px 14px;
  border:1px solid rgba(255,255,255,0.14);
  border-radius:var(--radius-full);
  font-size:0.74rem; font-weight:600;
  letter-spacing:0.06em; text-transform:uppercase;
  color:rgba(255,255,255,0.78);
  background:rgba(255,255,255,0.04);
  margin-bottom:var(--space-md);
}
.hero__tagline {
  font-size:0.86rem; font-weight:700; text-transform:uppercase; letter-spacing:0.13em;
  color:var(--color-accent-light); margin-bottom:var(--space-lg);
}

.hero__title {
  color:white; font-size:clamp(1.8rem,3.7vw,2.45rem); font-weight:700;
  line-height:1.35; margin-bottom:var(--space-lg); letter-spacing:-0.02em;
}
.hero__title .highlight {
  background:var(--color-accent-gradient); -webkit-background-clip:text;
  -webkit-text-fill-color:transparent; background-clip:text;
}

.hero__subtitle {
  font-size:1rem; line-height:1.85; color:var(--color-text-on-dark-secondary);
  margin-bottom:var(--space-lg); max-width:560px;
}

.hero__proof-list {
  display:grid; gap:10px;
  margin-bottom:var(--space-xl);
}
.hero__proof-list li {
  display:flex; align-items:flex-start; gap:10px;
}
.hero__proof-list .material-icons-round {
  font-size:1rem; color:var(--color-accent-light); margin-top:2px;
}
.hero__proof-list li span:last-child {
  color:rgba(255,255,255,0.75); font-size:0.92rem; line-height:1.65;
}

.hero__actions { display:flex; gap:var(--space-md); flex-wrap:wrap; margin-bottom:var(--space-xl); }

.hero__badge {
  display:inline-flex; align-items:center; gap:var(--space-sm);
  font-size:0.78rem; font-weight:500; color:rgba(255,255,255,0.4);
  letter-spacing:0.03em;
}
.hero__badge .dot {
  width:5px; height:5px; border-radius:50%; background:var(--color-accent);
  animation:pulse-dot 2s infinite;
}
@keyframes pulse-dot { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:0.4;transform:scale(1.5);} }

/* Hero illustration */
.hero__visual { display:flex; justify-content:flex-end; align-items:center; }
.hero__illustration { width:100%; max-width:500px; height:auto; }

/* Sector strip */
.hero__sectors {
  position:relative; z-index:3;
  border-top:1px solid rgba(255,255,255,0.1);
  background:rgba(14,18,40,0.35);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  padding:var(--space-lg) 0;
  margin-top:var(--space-2xl);
}
.hero__sectors-inner {
  display:flex; align-items:center; gap:var(--space-lg); flex-wrap:wrap;
}
.hero__sectors-label {
  font-size:0.75rem; font-weight:600; text-transform:uppercase;
  letter-spacing:0.1em; color:rgba(255,255,255,0.35); white-space:nowrap;
}
.hero__sectors-list {
  display:flex; align-items:center; gap:var(--space-md); flex-wrap:wrap;
  font-size:0.85rem; font-weight:500; color:rgba(255,255,255,0.55);
}
.hero__sectors-dot {
  width:4px; height:4px; border-radius:50%; background:rgba(255,255,255,0.2);
}

@media(max-width:900px){
  .hero__content { grid-template-columns:1fr; text-align:center; }
  .hero__company-name { justify-content:center; }
  .hero__text { max-width:100%; }
  .hero__eyebrow { margin-left:auto; margin-right:auto; }
  .hero__subtitle { max-width:100%; }
  .hero__proof-list { text-align:left; max-width:620px; margin-left:auto; margin-right:auto; }
  .hero__actions { justify-content:center; }
  .hero__badge { justify-content:center; }
  .hero__visual { display:none; }
  .hero__sectors-inner { justify-content:center; }
  .hero__sectors-label { width:100%; text-align:center; }
  .hero__sectors-list { justify-content:center; }
}


/* ============================================================
   IDENTITY
   ============================================================ */
.identity {
  background:
    radial-gradient(circle at 85% 15%, rgba(255,107,107,0.07) 0%, transparent 40%),
    radial-gradient(circle at 10% 80%, rgba(26,31,61,0.04) 0%, transparent 35%),
    linear-gradient(180deg, #F8F9FD 0%, #EEF1F8 100%);
  border-top:1px solid var(--color-border-light);
  border-bottom:1px solid var(--color-border-light);
  padding:var(--space-4xl) 0;
}

.identity__layout {
  display:grid; grid-template-columns:1.08fr 1fr;
  grid-template-areas:"media content";
  gap:var(--space-3xl); align-items:start;
}

.identity__media {
  grid-area:media;
  display:grid;
  grid-template-columns:1fr 0.85fr;
  grid-template-rows:210px 190px;
  gap:var(--space-md);
  margin-top:var(--space-sm);
}

.identity__image {
  margin:0;
  border-radius:var(--radius-xl);
  overflow:hidden;
  border:1px solid var(--color-border-light);
  box-shadow:var(--shadow-3);
}

.identity__image img {
  width:100%; height:100%; object-fit:cover;
  transition:transform var(--transition-slow);
}

.identity__image:hover img { transform:scale(1.04); }

.identity__image--main { grid-row:1 / 3; min-height:420px; }
.identity__image--secondary { min-height:210px; }
.identity__image--detail { min-height:190px; }

.identity__content h2 {
  margin-bottom:var(--space-lg);
  max-width:580px;
}
.identity__content { grid-area:content; }

.identity__lead {
  color:var(--color-text);
  font-size:1.06rem;
  font-weight:500;
  line-height:1.8;
  margin-bottom:var(--space-md);
}

.identity__content > p {
  font-size:0.98rem;
  line-height:1.8;
}

.identity__points {
  margin-top:var(--space-xl);
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--space-md);
}

.identity-point {
  background:var(--color-surface);
  border:1px solid var(--color-border-light);
  border-left:3px solid var(--color-accent);
  border-radius:var(--radius-lg);
  padding:var(--space-lg);
  box-shadow:var(--shadow-1);
  transition:all var(--transition-base);
}
.identity-point:hover {
  transform:translateX(4px);
  box-shadow:var(--shadow-2);
}

.identity-point h3 {
  font-size:0.92rem;
  margin-bottom:var(--space-xs);
  color:var(--color-primary);
}

.identity-point p {
  font-size:0.86rem;
  line-height:1.65;
}

@media(max-width:900px){
  .identity__layout {
    grid-template-columns:1fr;
    grid-template-areas:
      "media"
      "content";
  }
  .identity__media {
    grid-template-columns:1fr 1fr;
    grid-template-rows:220px 190px;
  }
  .identity__image--main {
    grid-column:1 / -1;
    grid-row:1 / 2;
    min-height:220px;
  }
  .identity__image--secondary,
  .identity__image--detail { min-height:190px; }
  .identity__points { grid-template-columns:1fr; }
}


/* ============================================================
   INTRO SECTION
   ============================================================ */
.intro {
  background:linear-gradient(180deg, #FAFBFE 0%, #FFFFFF 100%);
}

.intro__layout {
  display:grid;
  grid-template-columns:1.05fr 0.95fr;
  grid-template-areas:"intro-text intro-cards";
  gap:var(--space-3xl);
  align-items:center;
}
.intro__cards { grid-area:intro-cards; }
.intro__text { grid-area:intro-text; }

.intro__text h2 { margin-bottom:var(--space-lg); }
.intro__lead { font-size:1.1rem; font-weight:500; color:var(--color-text); line-height:1.75; margin-bottom:var(--space-md); }
.intro__text p { margin-bottom:var(--space-md); font-size:1rem; }

.intro__illustration { width:100%; max-width:400px; margin:0 auto; }

@media(max-width:900px){
  .intro__layout {
    grid-template-columns:1fr;
    grid-template-areas:
      "intro-text"
      "intro-cards";
  }
}


/* ============================================================
   VALUES
   ============================================================ */
.values {
  background:linear-gradient(160deg, #F5F7FA 0%, #EDF0F7 50%, #F0F2F9 100%);
  position:relative;
  overflow:hidden;
}

.values::before {
  content:'';
  position:absolute;
  top:-120px;
  right:-120px;
  width:360px;
  height:360px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,107,107,0.1) 0%, rgba(255,107,107,0) 65%);
}

.values__grid { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-xl); }

.value-card {
  text-align:left; padding:var(--space-2xl);
  background:var(--color-surface); border-radius:var(--radius-xl);
  border:1px solid var(--color-border-light); transition:all var(--transition-base);
  display:flex; gap:var(--space-lg); align-items:flex-start;
}
.value-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-3); border-color:rgba(255,107,107,0.2); }

.value-card__icon {
  width:56px; height:56px; flex-shrink:0;
  border-radius:var(--radius-lg); display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, rgba(255,107,107,0.08), rgba(255,107,107,0.18));
  color:var(--color-accent);
}

.value-card h4 { margin-bottom:var(--space-sm); font-size:1rem; }
.value-card p { font-size:0.88rem; line-height:1.7; }

@media(max-width:900px){
  .values__grid { grid-template-columns:1fr 1fr; }
  .values .section-header { text-align:center; margin-left:auto; margin-right:auto; }
  .values .section-header p { margin:0 auto; }
}
@media(max-width:600px){
  .values__grid { grid-template-columns:1fr; }
  .value-card { flex-direction:column; text-align:center; align-items:center; }
}


/* ============================================================
   ABOUT
   ============================================================ */
.about { background:var(--color-bg); }

.about__content { display:grid; grid-template-columns:1.08fr 0.92fr; gap:clamp(36px,5vw,78px); align-items:start; }

.about__text .section-label { text-align:left; }
.about__text h2 { margin-bottom:var(--space-lg); }
.about__text p { margin-bottom:var(--space-md); font-size:1.02rem; }

.about__timeline { position:relative; padding-left:var(--space-xl); margin-top:var(--space-2xl); }
.about__timeline::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:linear-gradient(to bottom, var(--color-accent), var(--color-accent-light), transparent);
  border-radius:var(--radius-full);
}

.timeline-item { position:relative; padding-bottom:var(--space-xl); }
.timeline-item::before {
  content:''; position:absolute; left:calc(-1 * var(--space-xl) - 5px); top:6px;
  width:12px; height:12px; border-radius:50%; background:var(--color-accent);
  border:2px solid var(--color-bg); box-shadow:0 0 0 3px rgba(255,107,107,0.16);
}
.timeline-item h4 {
  color:var(--color-accent); font-size:0.82rem; font-weight:700;
  text-transform:uppercase; letter-spacing:0.06em; margin-bottom:var(--space-xs);
}
.timeline-item p { font-size:0.92rem; }

/* Map illustration */
.about__visual { display:flex; justify-content:center; }
.about__map { width:100%; max-width:420px; }

@media(max-width:900px){ .about__content { grid-template-columns:1fr; } }


/* ============================================================
   SERVICES
   ============================================================ */
.services {
  background:var(--color-bg);
  position:relative;
  overflow:hidden;
}

.services::before {
  content:'';
  position:absolute;
  left:-140px;
  bottom:-140px;
  width:320px;
  height:320px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(26,31,61,0.08) 0%, rgba(26,31,61,0) 66%);
}

.services__tabs {
  display:flex; justify-content:flex-start; gap:var(--space-sm); margin-bottom:var(--space-3xl);
  position:relative; z-index:1;
}
.services__tab {
  display:flex; align-items:center; gap:var(--space-sm);
  padding:12px 28px; border-radius:var(--radius-full);
  font-size:0.9rem; font-weight:600; color:var(--color-text-secondary);
  background:var(--color-surface); border:1.5px solid var(--color-border);
  transition:all var(--transition-base);
}
.services__tab svg { stroke:currentColor; }
.services__tab:hover { border-color:var(--color-accent); color:var(--color-accent); }
.services__tab.active {
  background:var(--color-accent-gradient); color:white; border-color:transparent;
  box-shadow:0 4px 16px rgba(255,107,107,0.3);
}
.services__tab.active svg { stroke:white; }

.services__panel { display:none; animation:fadeInUp 0.4s ease; }
.services__panel.active { display:block; }

@keyframes fadeInUp { from{opacity:0;transform:translateY(16px);} to{opacity:1;transform:translateY(0);} }

.services__panel-intro {
  max-width:720px; margin:0 0 var(--space-2xl); text-align:left;
}
.services__panel-intro p {
  font-size:1.02rem; color:var(--color-text-secondary); line-height:1.8;
}

.services__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-lg); }

#panel-construction .service-card:nth-child(2),
#panel-manpower .service-card:nth-child(2) {
  margin-top:26px;
}

#panel-construction .service-card:nth-child(3),
#panel-manpower .service-card:nth-child(3) {
  margin-top:10px;
}

.service-card {
  background:rgba(255,255,255,0.85); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1px solid var(--color-border-light);
  border-left:4px solid var(--color-primary);
  border-radius:var(--radius-xl); padding:var(--space-2xl);
  transition:all var(--transition-base); position:relative; overflow:hidden;
}
.service-card::after {
  content:''; position:absolute; top:0; right:0; width:80px; height:80px;
  background:radial-gradient(circle, rgba(255,107,107,0.06) 0%, transparent 70%);
  border-radius:50%; transition:opacity var(--transition-base); opacity:0;
}
.service-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-4); border-left-color:var(--color-accent); }
.service-card:hover::after { opacity:1; }

.service-card__icon {
  width:48px; height:48px; border-radius:var(--radius-md);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:var(--space-lg); background:rgba(255,107,107,0.09); color:var(--color-accent);
}

.service-card h4 { margin-bottom:var(--space-sm); }
.service-card p { font-size:0.9rem; line-height:1.75; }

.service-card__list { margin-top:var(--space-md); }
.service-card__list li {
  font-size:0.84rem; color:var(--color-text-secondary); padding:5px 0;
  display:flex; align-items:flex-start; gap:var(--space-sm);
}
.service-card__list li::before {
  content:''; width:5px; height:5px; border-radius:50%;
  background:var(--color-accent); margin-top:8px; flex-shrink:0;
}

@media(max-width:900px){
  .services__grid { grid-template-columns:1fr; }
  .services__tabs { flex-wrap:wrap; justify-content:center; }
  .services .section-header { text-align:center; margin-left:auto; margin-right:auto; }
  .services .section-header p { margin:0 auto; }
  .services__panel-intro { margin:0 auto var(--space-2xl); text-align:center; }
  #panel-construction .service-card:nth-child(2),
  #panel-manpower .service-card:nth-child(2),
  #panel-construction .service-card:nth-child(3),
  #panel-manpower .service-card:nth-child(3) { margin-top:0; }
}


/* ============================================================
   CTA BAND
   ============================================================ */
.cta-band {
  background:linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  position:relative; overflow:hidden; padding:var(--space-4xl) 0;
}
.cta-band::before {
  content:''; position:absolute; top:-40%; right:-8%;
  width:500px; height:500px; border-radius:50%;
  background:rgba(255,107,107,0.12); filter:blur(80px);
}
.cta-band::after {
  content:''; position:absolute; bottom:-20%; left:-5%;
  width:400px; height:400px;
  background:rgba(124,131,255,0.08); filter:blur(60px);
  border-radius:50%;
}
.cta-band__content { position:relative; z-index:1; text-align:center; }
.cta-band__content h2 { color:white; margin-bottom:var(--space-md); }
.cta-band__content p {
  color:var(--color-text-on-dark-secondary); font-size:1.05rem;
  max-width:600px; margin:0 auto var(--space-xl); line-height:1.8;
}
.cta-band__actions { display:flex; gap:var(--space-md); justify-content:center; flex-wrap:wrap; }
.cta-band__content .cta-band__contacts {
  max-width:820px; margin:var(--space-lg) auto 0;
  font-size:0.9rem; line-height:1.9;
  color:rgba(255,255,255,0.78);
}


/* ============================================================
   CONTACT
   ============================================================ */
.contact { background:var(--color-bg); }

.contact__grid { display:grid; grid-template-columns:1fr 1.2fr; gap:var(--space-3xl); }

.contact__info { display:flex; flex-direction:column; gap:var(--space-xl); }

.contact__info-card { display:flex; gap:var(--space-lg); align-items:flex-start; }

.contact__info-icon {
  width:46px; height:46px; border-radius:var(--radius-md);
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,107,107,0.09); color:var(--color-accent); font-size:1.2rem; flex-shrink:0;
}
.contact__info-text h4 { margin-bottom:var(--space-xs); }
.contact__info-text p { font-size:0.9rem; line-height:1.7; }

.contact__fiscal {
  margin-top:var(--space-lg); padding:var(--space-lg);
  background:var(--color-bg-alt); border-radius:var(--radius-lg);
  border:1px solid var(--color-border-light);
}
.contact__fiscal p { font-size:0.85rem; line-height:1.7; color:var(--color-text-secondary); }

.contact__form-wrapper {
  background:var(--color-surface); border:1px solid var(--color-border-light);
  border-radius:var(--radius-xl); padding:var(--space-2xl);
}

.form-group { margin-bottom:var(--space-lg); }
.form-group label { display:block; font-size:0.84rem; font-weight:600; color:var(--color-text); margin-bottom:var(--space-sm); }
.form-group input,.form-group textarea,.form-group select {
  width:100%; padding:13px 16px; border:1.5px solid var(--color-border);
  border-radius:var(--radius-md); background:var(--color-bg); color:var(--color-text);
  transition:all var(--transition-fast); outline:none;
}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus {
  border-color:var(--color-accent); box-shadow:0 0 0 3px rgba(255,107,107,0.12);
}
.form-group textarea { min-height:120px; resize:vertical; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-md); }
.form-honeypot {
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  opacity:0 !important;
  pointer-events:none !important;
}
.contact__form-wrapper .btn--primary:disabled {
  opacity:0.88;
  cursor:wait;
}
.form-feedback {
  min-height:1.5rem;
  margin-top:var(--space-md);
  font-size:0.9rem;
  font-weight:600;
}
.form-feedback--success { color:#248a3d; }
.form-feedback--error { color:#c63f3f; }

@media(max-width:900px){
  .contact__grid { grid-template-columns:1fr; }
  .form-row { grid-template-columns:1fr; }
}


/* ============================================================
   FOOTER
   ============================================================ */
.footer { background:var(--color-bg-dark); color:var(--color-text-on-dark); padding:var(--space-4xl) 0 var(--space-xl); }

.footer__grid { display:grid; grid-template-columns:2fr 1fr 1fr 1.5fr; gap:var(--space-2xl); margin-bottom:var(--space-3xl); }

.footer__brand p { color:var(--color-text-on-dark-secondary); font-size:0.88rem; margin-top:var(--space-md); max-width:300px; line-height:1.75; }

.footer__logo { display:flex; align-items:center; gap:10px; margin-bottom:var(--space-xs); }
.footer__logo img { height:32px; width:auto; flex-shrink:0; }
.footer__logo-label { display:flex; align-items:baseline; gap:4px; }
.footer__logo-name { font-size:1.2rem; font-weight:900; color:white; letter-spacing:0.02em; }
.footer__logo-suffix { font-size:0.7rem; font-weight:500; color:rgba(255,255,255,0.4); }

.footer h4 { color:white; font-size:0.82rem; text-transform:uppercase; letter-spacing:0.1em; margin-bottom:var(--space-lg); }

.footer__links li { margin-bottom:var(--space-sm); }
.footer__links a {
  color:var(--color-text-on-dark-secondary); font-size:0.88rem;
  transition:color var(--transition-fast);
}
.footer__links a:hover { color:var(--color-accent-light); }

.footer__contact-item {
  display:flex; align-items:flex-start; gap:var(--space-sm); margin-bottom:var(--space-md);
  color:var(--color-text-on-dark-secondary); font-size:0.88rem;
}
.footer__contact-item svg { flex-shrink:0; margin-top:3px; color:var(--color-accent-light); }

.footer__bottom {
  padding-top:var(--space-xl); border-top:1px solid rgba(255,255,255,0.07);
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:var(--space-md);
}
.footer__bottom p { font-size:0.8rem; color:var(--color-text-on-dark-secondary); }
.footer__legal { display:flex; gap:var(--space-lg); }
.footer__legal span { font-size:0.78rem; color:var(--color-text-on-dark-secondary); }

@media(max-width:900px){ .footer__grid { grid-template-columns:1fr 1fr; } }
@media(max-width:500px){
  .footer__grid { grid-template-columns:1fr; }
  .footer__bottom { flex-direction:column; text-align:center; }
}


/* ============================================================
   ANIMATIONS
   ============================================================ */
.reveal {
  opacity:0; transform:translateY(30px);
  transition:opacity 0.6s cubic-bezier(0.4,0,0.2,1), transform 0.6s cubic-bezier(0.4,0,0.2,1);
}
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-delay-1 { transition-delay:100ms; }
.reveal-delay-2 { transition-delay:200ms; }
.reveal-delay-3 { transition-delay:300ms; }

.stagger-children > * { opacity:0; transform:translateY(20px); transition:opacity 0.5s ease, transform 0.5s ease; }
.stagger-children.visible > *:nth-child(1) { transition-delay:0ms; opacity:1; transform:translateY(0); }
.stagger-children.visible > *:nth-child(2) { transition-delay:100ms; opacity:1; transform:translateY(0); }
.stagger-children.visible > *:nth-child(3) { transition-delay:200ms; opacity:1; transform:translateY(0); }
.stagger-children.visible > *:nth-child(4) { transition-delay:300ms; opacity:1; transform:translateY(0); }


/* ============================================================
   UTILITIES
   ============================================================ */
.scroll-top {
  position:fixed; bottom:var(--space-xl); right:var(--space-xl);
  width:46px; height:46px; border-radius:var(--radius-full);
  background:var(--color-accent-gradient); color:white;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-3); opacity:0; visibility:hidden; transform:translateY(16px);
  transition:all var(--transition-base); z-index:999; cursor:pointer;
}
.scroll-top.visible { opacity:1; visibility:visible; transform:translateY(0); }
.scroll-top:hover { transform:translateY(-3px); box-shadow:var(--shadow-4); }

.loader {
  position:fixed; inset:0; background:var(--color-bg);
  display:flex; align-items:center; justify-content:center; z-index:9999;
  transition:opacity 0.5s ease, visibility 0.5s ease;
}
.loader.hidden { opacity:0; visibility:hidden; }
.loader__spinner {
  width:36px; height:36px; border:3px solid var(--color-border-light);
  border-top-color:var(--color-accent); border-radius:50%; animation:spin 0.8s linear infinite;
}
@keyframes spin { to{transform:rotate(360deg);} }

.cookie-banner {
  position:fixed; bottom:0; left:0; right:0; background:var(--color-surface);
  border-top:1px solid var(--color-border-light); padding:var(--space-md) var(--space-xl);
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-lg);
  z-index:998; box-shadow:0 -4px 20px rgba(0,0,0,0.05);
  transform:translateY(100%); transition:transform var(--transition-slow); flex-wrap:wrap;
}
.cookie-banner.visible { transform:translateY(0); }
.cookie-banner p { font-size:0.84rem; flex:1; }
.cookie-banner__actions { display:flex; gap:var(--space-sm); }
