/* ==========================================================================
   Succedo.fi – Global stylesheet
   Brand: #9C1B5D (primary), #3C6478 (accent)
   ========================================================================== */

   :root{
    --succedo-primary:#9C1B5D;
    --succedo-accent:#3C6478;
    --succedo-ink:#161616;
    --succedo-bg:#ffffff;
    --succedo-soft:#F6F6F8;

  }
  
  html { scroll-behavior:smooth; }
  body{
    font-family: "DM Sans", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
    color:var(--succedo-ink);
    background:var(--succedo-bg);
  }


 h1, h2, h3{
    font-family: "Bungee Inline", sans-serif;
    font-weight: 400;
    font-style: normal;  
  text-transform: uppercase;
  background-image: url('images/hero-abstract.png');
  -webkit-text-fill-color: transparent;
  background-position: 50%;
  background-size: cover;
  -webkit-background-clip: text;
  background-clip: text;
  }
  
  
  .text-ink{color:var(--succedo-ink);}
  .link-succedo{color:var(--succedo-primary); text-decoration:none;}
  .link-succedo:hover{color:#7e154b; text-decoration:underline;}
  .section-pad{padding:5rem 0;}
/* === HERO (matchar OM SUCCEDO-stilen) === */
.hero-succedo {
  background: url('images/hero-succedo.jpg') center/cover no-repeat;
  color: #fff;
  overflow: hidden;
  position: relative;
}
.hero-succedo .overlay {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,20,0.65);
  backdrop-filter: blur(2px);
  z-index: 1;
}
.hero-succedo .container {
  position: relative;
  z-index: 2;
}

/* Fyll skärmen på desktop */
.hero {
  padding-top: 6rem;
  padding-bottom: 4rem;
}
@media (min-width: 992px) {
  .hero {
    padding-top: 7rem;
    padding-bottom: 5rem;
  }
  #home .row {
    min-height: 100vh;
  }
  .hero .col-lg-5 {
    display: flex;
    align-items: center;
  }
}

/* === Matchande rubrikstil för HERO och OM SUCCEDO === */
.hero-title,
.om-succedo .om-title {
  line-height: 0.9;
  letter-spacing: -0.02em;
  font-weight: 700;
  opacity: 0.7;
  transform: translateY(0.5rem);
}

@media (min-width: 992px) {
  .hero-title,
  .om-succedo .om-title {
    font-size: 7rem; /* samma storlek */
  }
}
@media (max-width: 991px) {
  .hero-title,
  .om-succedo .om-title {
    font-size: 2.8rem;
    margin-bottom: 1rem;
  }
}

/* Knappar på mörk bakgrund */
.btn-outline-light {
  border-radius: 50rem;
  transition: background .2s ease, color .2s ease;
}
.btn-outline-light:hover {
  background: var(--succedo-accent);
  border-color: var(--succedo-accent);
  color: #fff;
}

  
 /* ===== Navbar: glass over dark hero ===== */
.navbar-glass{
  --nav-bg: rgba(10, 14, 18, 0.35);
  --nav-bg-scrolled: rgba(10, 14, 18, 0.85);
  --nav-link: rgba(255,255,255,0.92);
  --nav-link-dim: rgba(255,255,255,0.72);
  --nav-shadow: 0 8px 30px rgba(0,0,0,.22);

  background: var(--nav-bg) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background .25s ease, box-shadow .25s ease, border-color .25s ease;
  border-bottom: 1px solid rgba(255,255,255,.075);
}

/* Fallback om blur saknas */
@supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
  .navbar-glass { background: rgba(10,14,18,.9) !important; }
}

.navbar-glass .navbar-brand .brand-logo { height: 28px; width: auto; }
.navbar-glass .brand-wordmark { color: #fff; font-weight: 600; letter-spacing: .2px; }

/* Länkar */
.navbar-glass .nav-link{
  color: var(--nav-link-dim) !important;
  font-weight: 500;
  letter-spacing: .2px;
  position: relative;
  padding: .5rem .75rem;
  transition: color .2s ease;
}
.navbar-glass .nav-link:hover,
.navbar-glass .nav-link:focus{
  color: var(--nav-link) !important;
}

/* Underline animation */
.navbar-glass .nav-link::after{
  content:"";
  position:absolute; left:.75rem; right:.75rem; bottom:.2rem;
  height:2px; width:0;
  background: linear-gradient(90deg, var(--succedo-accent), var(--succedo-primary));
  border-radius: 2px;
  transition: width .25s ease;
}
.navbar-glass .nav-link:hover::after,
.navbar-glass .nav-link.active::after { width: calc(100% - 1.5rem); }

/* CTA i navbar */
.navbar-glass .nav-cta{ padding:.5rem 1rem; }

/* Toggler ikon (vit) */
.navbar-dark .navbar-toggler{ border-color: rgba(255,255,255,.2); }
.navbar-dark .navbar-toggler-icon{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.92)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 8h22M4 15h22M4 22h22'/%3e%3c/svg%3e");
}

/* Scroll state – mer opaque och skugga */
.navbar-glass.scrolled{
  background: var(--nav-bg-scrolled) !important;
  box-shadow: var(--nav-shadow);
  border-bottom-color: rgba(255,255,255,.12);
}

/* Mobil: större träffyta, tydlig separering */
@media (max-width: 991.98px){
  .navbar-glass .navbar-collapse{
    margin-top: .75rem;
    padding: .5rem .25rem;
    border-top: 1px solid rgba(255,255,255,.08);
  }
  .navbar-glass .nav-link{
    padding: .6rem .25rem;
    font-size: 1.05rem;
  }
  .navbar-glass .nav-link::after{ left:0; right:0; }
}

/* Respekt för reduced motion */
@media (prefers-reduced-motion: reduce){
  .navbar-glass, .navbar-glass .nav-link::after{
    transition: none !important;
  }
}

  
  /* ========================= BUTTONS ========================= */
  .btn-succedo{
    --bs-btn-bg: var(--succedo-primary);
    --bs-btn-border-color: var(--succedo-primary);
    --bs-btn-color:#fff;
    font-size:.95rem;
    border-radius:50rem;
  }
  .btn-succedo:hover{background-color:#7e154b; border-color:#7e154b; color:#fff;}
  
  .btn-accent{
    --bs-btn-bg: var(--succedo-accent);
    --bs-btn-border-color: var(--succedo-accent);
    --bs-btn-color:#fff;
    border-radius:50rem;
    font-size:.95rem;
  }
  .btn-accent:hover{background-color:#315464; border-color:#315464; color:#fff;}
  
  .btn-outline-dark{border-radius:50rem;}
  .btn-outline-dark:hover{background-color:var(--succedo-accent); border-color:var(--succedo-accent); color:#fff;}
  
  /* Back-to-top (om du använder .btn-accent som länk) */
  a.back-to-top{box-shadow:0 6px 16px rgba(0,0,0,.18);}
  
  /* ========================= PORTFÖLJ ========================= */
/* Sektionens yta: diskret glas/gradient */
.portfolio-surface{
  background:##060a2d;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 24px;
  padding: 2rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}
@media (min-width:992px){ .portfolio-surface{padding:3rem;} }

/* Chips (filter/taggar) */
.chip{
  padding: .4rem .8rem;
  border-radius: 50rem;
  background: rgba(0,0,0,.06);
  font-size: .85rem;
  line-height: 1;
  user-select: none;
}

/* Thumb-område överst i kortet */
.portfolio-card .thumb{
  position: relative;
  height: 180px;
  overflow: hidden;
  border-radius: 18px 18px 0 0;
  background: #0f1116;
}
.portfolio-card .thumb img{
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  transform: scale(1.02);
  transition: transform .4s ease;
}

/* Kort: kant, skugga, hover-glow i era färger */
.portfolio-card{
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 20px;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(135deg, var(--succedo-primary), var(--succedo-accent)) border-box;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}
.portfolio-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 14px 40px rgba(0,0,0,.12);
  border-color: transparent; /* visar gradientkanten */
}
.portfolio-card:hover .thumb img{ transform: scale(1.08); }

/* Mjuka badges */
.badge-soft{
  font-size: .8rem;
  padding: .35rem .6rem;
  border-radius: 50rem;
  background: rgba(60,100,120,.08); /* accentton */
  color: var(--succedo-accent);
  border: 1px solid rgba(60,100,120,.18);
}

/* Finjusteringar text */
#portfolj h3.h4{ font-weight: 700; }
#portfolj p{ color: #3d3d44; }

/* Stretched-link åtkomst: visa fokus snyggt */
.portfolio-card .stretched-link:focus{
  outline: none;
  box-shadow: 0 0 0 .2rem rgba(60,100,120,.25);
  border-radius: 12px;
}
  
  /* ========================= FORM – Tech look ========================= */
  .form-tech {
    border: 1px solid transparent;
    border-radius: 20px;
    background:
      linear-gradient(#f9fafb, #f9fafb) padding-box, /* ljus bas */
      linear-gradient(135deg, var(--succedo-primary), var(--succedo-accent)) border-box;
    color: var(--succedo-ink);
    box-shadow: 0 10px 28px rgba(0,0,0,.08);
    padding: 1.5rem;
  }
  
  /* Fälten själva */
  .form-tech .form-control {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.08);
    color: var(--succedo-ink);
    border-radius: 12px;
    transition: all .2s ease;
  }
  
  /* Platshållartext */
  .form-tech .form-control::placeholder {
    color: #888;
  }
  
  /* Fokusläge: tunn accent-ring, inte mörk */
  .form-tech .form-control:focus {
    border-color: var(--succedo-accent);
    box-shadow: 0 0 0 .2rem rgba(60,100,120,.2);
    background: #fff;
    color: var(--succedo-ink);
  }
  
  /* Ikoner i fälten */
  .input-icon {
    position: relative;
  }
  .input-icon i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    opacity: .6;
    color: var(--succedo-accent);
  }
  .input-icon .form-control {
    padding-left: 42px;
  }
  
  /* Knappar – matchar ljus form */
  .form-tech .btn-succedo {
    --bs-btn-bg: var(--succedo-primary);
    --bs-btn-border-color: var(--succedo-primary);
    --bs-btn-color: #fff;
    border-radius: 50rem;
    box-shadow: 0 6px 16px rgba(156,27,93,.25);
  }
  .form-tech .btn-succedo:hover {
    background-color: #7e154b;
    border-color: #7e154b;
    color: #fff;
  }
  
  
  /* ========================= FOOTER ========================= */
  .footer{
    background:linear-gradient(180deg,#0d0e11 0%, #13121a 45%, #1b0f17 100%);
    color:#fff;
  }
  .footer .footer-inner{padding:4rem 0;}
  .footer .small, .footer p{font-size:.925rem;}
  .footer .copyright{
    padding:1.25rem 0;
    border-top:1px solid rgba(255,255,255,.08);
    color:#cfcfd4;
  }
  
  /* ========================= ACCESSIBILITY ========================= */
  .visually-hidden-focusable:active,
  .visually-hidden-focusable:focus{
    position:static!important;
    width:auto;height:auto;margin:0;overflow:visible;clip:auto;
  }
  
  /* ========================= MISC ========================= */
  img[role="presentation"]{user-select:none;}
  
  /* Respekt för användarens inställningar */
  @media (prefers-reduced-motion:reduce){
    *{animation:none!important; transition:none!important; scroll-behavior:auto!important;}
  }
  .om-succedo {
    position: relative;
  }
  
  .om-succedo .om-title {
    line-height: 0.9;
    letter-spacing: -0.02em;
    opacity: 0.1;
    transform: translateY(0.5rem);
  }
  
  @media (min-width: 992px) {
    .om-succedo .om-title {
      font-size: 7rem; /* Stor, men justerbar */
      text-align: right;
      position: relative;
      top: 0.5rem;
    }
  }
  
  @media (max-width: 991px) {
    .om-succedo .om-title {
      opacity: 1;
      font-size: 2.5rem;
      text-align: left;
      margin-bottom: 1rem;
    }
  }


  .om-succedo {
    background: url('images/broker.jpg') center/cover no-repeat;
    color: #fff;
    position: relative;
    overflow: hidden;
  }
  
  .om-succedo .overlay {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 20, 0.65); /* tonar ner bilden */
    backdrop-filter: blur(2px);
    z-index: 1;
  }
  
  .om-succedo .container {
    position: relative;
    z-index: 2;
  }
  
  .om-succedo .om-title {
    line-height: 0.9;
    letter-spacing: -0.02em;
    opacity: 0.25; /* gör rubriken lite genomskinlig */
  }
  
  @media (min-width: 992px) {
    .om-succedo .om-title {
      font-size: 7rem;
      text-align: right;
    }
  }
  
  @media (max-width: 991px) {
    .om-succedo .om-title {
      opacity: 1;
      font-size: 2.5rem;
      text-align: left;
      margin-bottom: 1rem;
    }
  }
  
  .heading-white {
    color: #fff;
    -webkit-text-fill-color: #fff;
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
  }
  
  .fa-check {
    color: var(--succedo-primary) !important;
  }