:root {
  --orange: #F5A01A;
  --orange-hover: #e8920a;
  --orange-light: #FEF3DC;
  --orange-dark: #7a4d00;
  --orange-text: #6b4200;
  --blue: #29ABE2;
  --blue-light: #E6F6FD;
  --blue-dark: #1a7aaa;
  --ink: #1E1E1E;
  --ink-mid: #555;
  --ink-soft: #999;
  --bg: #F5F4F1;
  --white: #FFFFFF;
  --border: rgba(30,30,30,0.1);
  --max: 1400px;
}
.article-details .article-can-edit {
    margin-bottom: 0;
}
.homepage #sp-main-body {
    padding: 0;
}
.homepage #sp-main-body .container {
    max-width: 100%;
    padding: 0;
}
/* ─── SECTION SPACING HELPERS ─── */
.pt-section { padding-top: 5rem; }
.pb-section { padding-bottom: 5rem; }
@media (max-width: 768px) {
  .pt-section { padding-top: 3.5rem; }
  .pb-section { padding-bottom: 3.5rem; }
}
.section-header-row { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: end; margin-bottom: 3.5rem; }
.section-header-flex { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 3rem; gap: 1rem; flex-wrap: wrap; }
@media (max-width: 768px) {
  .section-header-row { grid-template-columns: 1fr; }
  .section-header-row .section-sub { display: none; }
}
/* ─── UTILITIES ─── */
.full-bleed { width: 100%; }
.inner {
  max-width: var(--max);
  margin: 0 auto;
}
@media (max-width: 768px) {
  .inner { padding-left: 1.25rem; padding-right: 1.25rem; }
}

.section-tag {
  font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 600; color: var(--blue);
  display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.8rem;
}
.section-tag::before { content: ''; width: 20px; height: 2px; background: var(--blue); flex-shrink: 0; }

.section-h2 {
  font-family: 'Instrument Serif', serif;
  font-size: clamp(1.9rem, 3.2vw, 3rem);
  line-height: 1.08; letter-spacing: -0.02em;
}
.section-sub { font-size: 0.9rem; font-weight: 300; color: var(--ink-mid); line-height: 1.8; }
.more-link { font-size: 0.82rem; font-weight: 600; color: var(--blue); text-decoration: none; white-space: nowrap; }
.more-link:hover { text-decoration: underline; }

/*HERO*/
.hero-outer {
    background: var(--white);
    border-bottom: 3px solid var(--ink);
}
.hero-inner {
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: 55% 45%;
  min-height: calc(100vh - 66px);
}
@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; min-height: auto; }
}

.hero-left {
  padding: 4rem 3.5rem 4rem 3rem;
  display: flex; flex-direction: column; justify-content: space-between;
  border-right: 1px solid var(--border);
}
@media (max-width: 900px) {
  .hero-left { padding: 3rem 1.25rem; border-right: none; border-bottom: 1px solid var(--border); }
}

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--blue);
}
.pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); flex-shrink: 0; }

.hero-h1 {
  font-family: 'Instrument Serif', serif;
  font-size: clamp(2.8rem, 5.5vw, 5.8rem);
  line-height: 0.95; letter-spacing: -0.02em;
  color: var(--ink); margin: 2rem 0;
}
.hero-h1 .italic { font-style: italic; color: var(--orange); }
.hero-h1 .outline { -webkit-text-stroke: 2px var(--ink); color: transparent; display: block; }

.hero-desc { font-size: 0.95rem; font-weight: 300; color: var(--ink-mid); line-height: 1.8; max-width: 420px; margin-bottom: 1.5rem; }

.btn-primary {
  background: var(--ink); color: white;
  padding: 0.85rem 1.8rem; border-radius: 6px;
  font-size: 0.85rem; font-weight: 600;
  text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem;
  transition: all 0.2s; border: none;
}
.btn-primary:hover { background: var(--orange); color: white; }
.btn-ghost {
  font-size: 0.85rem; font-weight: 500; color: var(--ink);
  text-decoration: none; display: inline-flex; align-items: center; gap: 0.4rem;
  transition: color 0.2s;
}
.btn-ghost:hover { color: var(--orange); }
.btn-ghost::after { content: '→'; }

.hero-right { background: var(--ink); display: flex; flex-direction: column; }
.hero-right-top {
  flex: 1; padding: 3rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
}
.hero-right-top::after {
  content: ''; position: absolute; top: -60px; right: -60px;
  width: 200px; height: 200px; border-radius: 50%;
  border: 48px solid rgba(245,160,26,0.1);
}
.hrt-label { font-size: 0.65rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.3); font-weight: 600; margin-bottom: 1rem; }
.hrt-text {
  font-family: 'Instrument Serif', serif;
  font-size: clamp(1.5rem, 2.6vw, 2.5rem); line-height: 1.2;
  color: white; position: relative; z-index: 1;
}
.hrt-text em { font-style: italic; color: var(--orange); }

.hero-right-bottom { padding: 2rem 3rem; display: flex; flex-direction: column; gap: 1.25rem; }
@media (max-width: 900px) {
  .hero-right-top { padding: 2rem 1.25rem; }
  .hero-right-bottom { padding: 1.5rem 1.25rem; }
}
.hrb-label { font-size: 0.65rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.3); font-weight: 600; }

.service-list { display: flex; flex-direction: column; }
.svc-pill {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.75rem 0.75rem; border-radius: 6px;
  text-decoration: none; color: white; transition: background 0.15s; gap: 0.75rem;
}
.svc-pill:hover { background: rgba(255,255,255,0.07); }
.svc-pill-left { display: flex; align-items: center; gap: 0.75rem; }
.svc-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); flex-shrink: 0; }
.svc-dot.blue { background: var(--blue); }
.svc-name { font-size: 0.88rem; font-weight: 500; }
.svc-meta { font-size: 0.7rem; color: rgba(255,255,255,0.32); }
.svc-arrow { font-size: 0.8rem; color: rgba(255,255,255,0.18); transition: all 0.15s; flex-shrink: 0; }
.svc-pill:hover .svc-arrow { color: var(--orange); transform: translate(2px,-2px); }
/* ─── STORITVE ─── */
.services-outer { background: var(--white); border-bottom: 3px solid var(--ink); }
.services-outer .inner { padding-top: 5rem; padding-bottom: 5rem; }

.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 992px) { .services-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 576px) { .services-grid { grid-template-columns: 1fr; } }

/* Kartica — ikona kot ozadje desno-zgoraj */
.service-card {
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 2rem 1.75rem 1.75rem;
  text-decoration: none; color: var(--ink);
  display: flex; flex-direction: column;
  transition: all 0.22s;
  position: relative; overflow: hidden;
  background: var(--white);
  min-height: 240px;
}

/* Ikona kot dekorativno ozadje — desno zgoraj */
.service-card::before {
  content: '';
  position: absolute;
  top: -20px; right: -20px;
  width: 130px; height: 130px;
  border-radius: 50%;
  opacity: 0.07;
  transition: opacity 0.22s, transform 0.22s;
  background-size: 60px 60px;
  background-repeat: no-repeat;
  background-position: center;
}
.service-card:hover::before { opacity: 0.14; transform: scale(1.1); }
.service-card:hover { border-color: var(--orange); transform: translateY(-4px); box-shadow: 0 12px 32px rgba(245,160,26,0.12); }

/* po ena barva za vsako kartico */
.sc-web::before  { background-color: var(--orange); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Crect x='2' y='3' width='20' height='14' rx='2'/%3E%3Cline x1='8' y1='21' x2='16' y2='21'/%3E%3Cline x1='12' y1='17' x2='12' y2='21'/%3E%3C/svg%3E"); }
.sc-shop::before { background-color: var(--blue);   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z'/%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cpath d='M16 10a4 4 0 01-8 0'/%3E%3C/svg%3E"); }
.sc-seo::before  { background-color: var(--orange); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E"); }
.sc-design::before { background-color: var(--blue); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='13.5' cy='6.5' r='2.5'/%3E%3Cpath d='M17 12l-8 8H5v-4l8-8'/%3E%3C/svg%3E"); }
.sc-maint::before { background-color: var(--orange); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E"); }
.sc-host::before  { background-color: var(--blue);  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20M12 2a15.3 15.3 0 010 20M12 2a15.3 15.3 0 000 20'/%3E%3C/svg%3E"); }

/* Barvna črtna zgoraj — samo top border akcentna barva */
.sc-web, .sc-seo, .sc-maint { border-top: 3px solid var(--orange); }
.sc-shop, .sc-design, .sc-host { border-top: 3px solid var(--blue); }

/* Ikona — majhna, zgornji levi kot */
.sc-label-row {
  display: flex; align-items: center; gap: 0.6rem;
  margin-bottom: 1.25rem;
}
.sc-badge {
  width: 36px; height: 36px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sc-badge svg { width: 18px; height: 18px; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.badge-orange { background: var(--orange-light); }
.badge-orange svg { stroke: var(--orange-dark); }
.badge-blue { background: var(--blue-light); }
.badge-blue svg { stroke: var(--blue-dark); }

.sc-title { font-size: 1rem; font-weight: 700; color: var(--ink); }
.sc-desc { font-size: 0.82rem; font-weight: 300; color: var(--ink-mid); line-height: 1.72; flex: 1; margin-top: 0.5rem; }

.sc-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 1.25rem; }
.sc-tag { font-size: 0.67rem; font-weight: 600; letter-spacing: 0.04em; padding: 0.22rem 0.6rem; border-radius: 100px; background: var(--bg); color: var(--ink-mid); }

.sc-arrow-row {
  display: flex; justify-content: flex-end; margin-top: 0.75rem;
}
.sc-arrow {
  width: 28px; height: 28px; border-radius: 50%;
  border: 1.5px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; color: var(--ink-soft);
  transition: all 0.2s;
}
.service-card:hover .sc-arrow { background: var(--orange); border-color: var(--orange); color: white; }
/* ─── ZAKAJ ─── */
.why-outer { background: var(--orange); border-bottom: 3px solid var(--ink); }
.why-outer .inner { padding-top: 5rem; padding-bottom: 5rem; }
.why-outer .section-tag { color: var(--orange-dark); }
.why-outer .section-tag::before { background: var(--orange-dark); }
.why-outer .section-h2 { color: var(--ink); }
.why-outer .section-sub { color: var(--orange-dark); font-weight: 400; }

.why-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
@media (max-width: 992px) { .why-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 576px) { .why-grid { grid-template-columns: 1fr; } }

.why-card {
  background: rgba(255,255,255,0.28); border: 1.5px solid rgba(255,255,255,0.5);
  border-radius: 10px; padding: 1.75rem; transition: background 0.2s;
}
.why-card:hover { background: rgba(255,255,255,0.42); }
.wc-num { font-family: 'Instrument Serif', serif; font-size: 2.5rem; color: rgba(30,30,30,0.15); line-height: 1; margin-bottom: 1.25rem; }
.wc-title { font-size: 0.95rem; font-weight: 700; color: var(--ink); margin-bottom: 0.5rem; }
.wc-desc { font-size: 0.8rem; color: var(--orange-text); font-weight: 400; line-height: 1.65; }
/* ─── CTA ─── */
.cta-outer { background: var(--white); border-bottom: 3px solid var(--ink); }
.cta-inner { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; min-height: 300px; }
@media (max-width: 768px) { .cta-inner { grid-template-columns: 1fr; } }

.cta-quote {
  padding: 4rem 3.5rem 4rem 3rem;
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column; justify-content: space-between;
  position: relative; overflow: hidden;
}
@media (max-width: 768px) { .cta-quote { padding: 3rem 1.25rem; border-right: none; border-bottom: 1px solid var(--border); } }
.cta-quote::before { content: '\201C'; font-family: 'Instrument Serif', serif; font-size: 13rem; line-height: 1; color: rgba(245,160,26,0.1); position: absolute; top: -2rem; left: 1rem; pointer-events: none; }
.cq-text { font-family: 'Instrument Serif', serif; font-size: clamp(1.1rem,1.9vw,1.6rem); line-height: 1.4; color: var(--ink); position: relative; z-index: 1; }
.cq-name { font-size: 0.85rem; font-weight: 700; color: var(--orange-dark); margin-top: 1.5rem; }
.cq-role { font-size: 0.75rem; color: var(--ink-soft); }

.cta-action { background: var(--ink); padding: 4rem 3.5rem; display: flex; flex-direction: column; justify-content: space-between; }
@media (max-width: 768px) { .cta-action { padding: 3rem 1.25rem; } }
.ca-title { font-family: 'Instrument Serif', serif; font-size: clamp(1.7rem,2.8vw,2.7rem); line-height: 1.05; color: white; }
.ca-title em { font-style: italic; color: var(--orange); }
.ca-sub { font-size: 0.88rem; font-weight: 300; color: rgba(255,255,255,0.55); line-height: 1.7; margin-top: 1rem; max-width: 340px; }
.ca-btn { display: inline-flex; align-items: center; gap: 0.6rem; background: var(--orange); color: white; padding: 0.9rem 2rem; border-radius: 6px; font-size: 0.88rem; font-weight: 700; text-decoration: none; width: fit-content; transition: all 0.2s; margin-top: 2rem; }
.ca-btn:hover { background: white; color: var(--ink); }

.sp-megamenu-parent>li:last-child>a.nav-cta {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.42rem 1.1rem 0.42rem 0.6rem;
  border-radius: 100px;
  border: 1.5px solid var(--ink);
  font-size: 0.8rem; font-weight: 700;
  text-decoration: none; letter-spacing: 0.01em;
  transition: all 0.22s; white-space: nowrap;
  line-height: 1;
}
.nav-cta-dot {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--orange);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: transform 0.22s;
}
.nav-cta-dot svg { width: 10px; height: 10px; stroke: white; fill: none; stroke-width: 2.5; stroke-linecap: round; }
.nav-cta:hover { background: var(--ink); color: white !important; }
.nav-cta:hover .nav-cta-dot { transform: rotate(45deg); }