:root{
  --color-dark:#12142B;
  --color-bright:#FFFFFF;
  --color-accent:#FF3D6E;
  --color-accent-glow:rgba(255,61,110,0.45);
  --color-bg:#FAFAFC;
  --color-text:#1D1E2C;
  --color-muted:#6B6D85;
  --font-body:system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-heading:'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --radius:0.85rem;
  --header-h:72px;
  --shadow-soft:0 10px 30px rgba(18,20,43,0.12);
  --shadow-strong:0 14px 40px rgba(255,61,110,0.25);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--color-text);
  background:var(--color-bg);
  line-height:1.5;
}
img{ max-width:100%; height:auto; display:block; }
a{ text-decoration:none; color:inherit; }
ul{ list-style:none; margin:0; padding:0; }

/* ============ HEADER ============ */
.cspin-header{
  background:linear-gradient(120deg, var(--color-dark) 60%, #1c1e40 100%);
  color:var(--color-bright);
  position:sticky;
  top:0;
  z-index:1000;
  box-shadow:0 4px 20px rgba(18,20,43,0.25);
}
.cspin-header__inner{
  max-width:1280px;
  margin:0 auto;
  padding:0.75rem 1.25rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  min-height:var(--header-h);
  flex-wrap:wrap;
}

.cspin-logo{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  font-family:var(--font-heading);
  font-weight:700;
  font-size:1.25rem;
  color:var(--color-bright);
  flex-shrink:0;
}
.cspin-logo img{ max-height:40px; width:auto; }

/* ============ NAV TOGGLE (mobile) ============ */
.cspin-nav__toggle{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:44px;
  height:44px;
  padding:8px;
  cursor:pointer;
  order:3;
}
.cspin-nav__toggle-bar{
  display:block;
  height:3px;
  border-radius:2px;
  background:var(--color-bright);
  transition:transform .25s ease, opacity .25s ease;
}
.cspin-nav__toggle-input{ position:absolute; }

/* ============ NAV ============ */
.cspin-nav{
  order:4;
  width:100%;
  flex-basis:100%;
  max-height:0;
  overflow:hidden;
  transition:max-height .35s ease;
}
.cspin-nav__toggle-input:checked ~ .cspin-nav{
  max-height:600px;
}
.cspin-nav__list{
  display:flex;
  flex-direction:column;
  padding:0.5rem 0 1rem;
  gap:0.25rem;
}
.cspin-nav__item{ position:relative; }
.cspin-nav__link{
  display:block;
  padding:0.75rem 1rem;
  border-radius:calc(var(--radius) * 0.6);
  font-weight:600;
  font-size:0.95rem;
  color:var(--color-bright);
  min-height:44px;
  display:flex;
  align-items:center;
  transition:background .2s ease, color .2s ease;
}
.cspin-nav__link:hover,
.cspin-nav__link:focus-visible{
  background:rgba(255,61,110,0.15);
  color:var(--color-accent);
}
.cspin-nav__link--active{
  color:var(--color-accent);
  background:rgba(255,61,110,0.12);
}

.cspin-nav__item--has-children > .cspin-nav__link::after{
  content:"▾";
  margin-left:auto;
  padding-left:0.5rem;
  font-size:0.75em;
}
.cspin-nav__submenu{
  display:none;
  flex-direction:column;
  padding:0.25rem 0 0.25rem 1rem;
  gap:0.15rem;
}
.cspin-nav__item--has-children:focus-within .cspin-nav__submenu,
.cspin-nav__item--has-children:hover .cspin-nav__submenu{
  display:flex;
}
.cspin-nav__submenu .cspin-nav__link{
  font-weight:500;
  font-size:0.9rem;
  padding:0.6rem 1rem;
}

.cspin-header__side{
  display:flex;
  align-items:center;
  gap:0.85rem;
  order:2;
  flex-wrap:wrap;
}
.cspin-header__ctas{
  display:flex;
  gap:0.5rem;
  flex-wrap:wrap;
}

/* ============ LANG SWITCHER ============ */
.cspin-lang{
  display:flex;
  gap:0.4rem;
  align-items:center;
  flex-wrap:wrap;
}
.cspin-lang__link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:44px;
  min-height:32px;
  padding:0.3rem 0.6rem;
  border-radius:calc(var(--radius) * 0.5);
  font-size:0.8rem;
  font-weight:600;
  color:var(--color-bright);
  opacity:0.75;
  border:1px solid rgba(255,255,255,0.25);
  transition:opacity .2s ease, background .2s ease;
}
.cspin-lang__link:hover{
  opacity:1;
  background:rgba(255,255,255,0.1);
}
.cspin-lang__link--active{
  opacity:1;
  background:var(--color-accent);
  border-color:var(--color-accent);
}

/* ============ CTA BUTTONS ============ */
.cspin-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:0.65rem 1.4rem;
  border-radius:999px;
  font-family:var(--font-heading);
  font-weight:600;
  font-size:0.9rem;
  white-space:nowrap;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  border:2px solid transparent;
}
.cspin-cta--primary{
  background:var(--color-accent);
  color:var(--color-bright);
  box-shadow:var(--shadow-strong);
}
.cspin-cta--primary:hover{
  transform:translateY(-2px) scale(1.03);
  box-shadow:0 18px 45px var(--color-accent-glow);
}
.cspin-cta--secondary{
  background:transparent;
  color:var(--color-bright);
  border-color:rgba(255,255,255,0.6);
}
.cspin-cta--secondary:hover{
  background:rgba(255,255,255,0.1);
  border-color:var(--color-bright);
  transform:translateY(-2px);
}

/* ============ BREADCRUMBS ============ */
.cspin-breadcrumbs-wrap{
  max-width:1280px;
  margin:0 auto;
  padding:0 1.25rem;
}
.cspin-breadcrumbs{
  padding:0.85rem 0;
}
.cspin-breadcrumbs ol{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:0.35rem;
  list-style:none;
  margin:0;
  padding:0;
  font-size:0.85rem;
  color:var(--color-muted);
}
.cspin-breadcrumbs__item{
  display:flex;
  align-items:center;
  gap:0.35rem;
}
.cspin-breadcrumbs__item:not(:last-child)::after{
  content:"›";
  color:var(--color-muted);
}
.cspin-breadcrumbs__link{
  color:var(--color-muted);
  font-weight:500;
  transition:color .2s ease;
}
.cspin-breadcrumbs__link:hover{
  color:var(--color-accent);
}
.cspin-breadcrumbs [aria-current="page"]{
  color:var(--color-text);
  font-weight:600;
}

/* ============ FOOTER ============ */
.cspin-footer{
  background:linear-gradient(135deg, var(--color-dark) 0%, #1a1c3d 100%);
  color:var(--color-bright);
  margin-top:4rem;
}
.cspin-footer__inner{
  max-width:1280px;
  margin:0 auto;
  padding:3.5rem 1.25rem 2.5rem;
  display:flex;
  flex-direction:column;
  gap:2rem;
}
.cspin-footer__brand{
  display:flex;
  flex-direction:column;
  gap:0.6rem;
}
.cspin-logo--footer{ font-size:1.4rem; }
.cspin-footer__tagline{
  color:rgba(255,255,255,0.7);
  font-size:0.9rem;
  margin:0;
  max-width:32ch;
}
.cspin-footer__ctas{
  display:flex;
  gap:0.75rem;
  flex-wrap:wrap;
}
.cspin-footer__meta{
  display:flex;
  flex-direction:column;
  gap:1rem;
  padding-top:1.5rem;
  border-top:1px solid rgba(255,255,255,0.12);
}
.cspin-lang--footer .cspin-lang__link{
  border-color:rgba(255,255,255,0.2);
}
.cspin-footer__copy{
  font-size:0.8rem;
  color:rgba(255,255,255,0.55);
  margin:0;
}

/* ============ RESPONSIVE: TABLET+ ============ */
@media (min-width:768px){
  .cspin-header__inner{ flex-wrap:nowrap; }
  .cspin-nav__toggle{ display:none; }
  .cspin-nav{
    order:2;
    width:auto;
    flex-basis:auto;
    max-height:none;
    overflow:visible;
  }
  .cspin-nav__list{
    flex-direction:row;
    padding:0;
    gap:0.15rem;
  }
  .cspin-nav__item--has-children{ position:relative; }
  .cspin-nav__submenu{
    position:absolute;
    top:100%;
    left:0;
    background:var(--color-dark);
    min-width:200px;
    border-radius:var(--radius);
    box-shadow:var(--shadow-soft);
    padding:0.5rem;
    z-index:10;
  }
  .cspin-header__side{ order:3; }

  .cspin-footer__inner{
    flex-direction:row;
    justify-content:space-between;
    align-items:flex-start;
    flex-wrap:wrap;
  }
  .cspin-footer__meta{
    border-top:none;
    padding-top:0;
    align-items:flex-end;
    text-align:right;
  }
}

@media (min-width:1280px){
  .cspin-header__inner{ padding:0.75rem 2rem; }
  .cspin-footer__inner{ padding:4rem 2rem 3rem; }
}