:root{
  --paper:#EEF2F6;
  --card:#FAFAF7;
  --ink:#131A2B;
  --blue:#1B3A5C;
  --blue-soft:#3D5A7A;
  --orange:#FF5A1F;
  --slate:#5C6B7A;
  --line:#C7D1DB;
  --radius:14px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  line-height:1.55;
  overflow-x:hidden;
}
h1,h2,h3{
  font-family:'Space Grotesk',sans-serif;
  font-weight:600;
  letter-spacing:-0.01em;
  color:var(--ink);
}
.mono{
  font-family:'IBM Plex Mono',monospace;
  letter-spacing:0.04em;
  text-transform:uppercase;
  font-size:0.72rem;
}
a{color:inherit; text-decoration:none;}
.wrap{max-width:1120px; margin:0 auto; padding:0 28px;}
button{font-family:inherit; cursor:pointer;}

/* ---------- NAV ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(238,242,246,0.9);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 28px; max-width:1120px; margin:0 auto;
}
.logo-group{display:flex; align-items:center;}
.logo{
  display:flex; align-items:center; gap:2px;
  font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:1.28rem;
  color:var(--ink);
}
.logo .bar{
  width:2px; height:20px; background:var(--orange);
  margin:0 3px; position:relative; top:1px;
  border-radius:1px;
}
.logo .bar::before{
  content:''; position:absolute; top:-4px; left:-2px;
  width:6px; height:2px; background:var(--orange);
}
.logo-sub{
  font-family:'IBM Plex Mono',monospace; font-size:0.6rem;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--slate);
  margin-left:9px; padding-left:9px; border-left:1px solid var(--line);
}
.navlinks{display:flex; gap:28px; align-items:center;}
.navlinks a{
  font-size:0.92rem; color:var(--slate); font-weight:500;
  transition:color .2s;
}
.navlinks a:hover{color:var(--ink);}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--blue); color:#fff;
  padding:11px 22px; border-radius:8px;
  font-weight:500; font-size:0.92rem;
  border:none; cursor:pointer;
  transition:transform .18s ease, background .18s ease;
}
.btn:hover{background:var(--orange); transform:translateY(-2px);}
.btn-outline{
  background:transparent; color:var(--ink); border:1.5px solid var(--line);
}
.btn-outline:hover{border-color:var(--orange); color:var(--orange); background:transparent; transform:none;}

/* lang switcher */
.langsw{display:flex; align-items:center; gap:2px; background:var(--card); border:1px solid var(--line); border-radius:7px; padding:3px;}
.langsw button{
  background:transparent; border:none; padding:5px 9px; border-radius:5px;
  font-family:'IBM Plex Mono',monospace; font-size:0.7rem; letter-spacing:0.04em;
  color:var(--slate); text-transform:uppercase;
}
.langsw button.active{background:var(--blue); color:#fff;}

.nav-right{display:flex; align-items:center; gap:18px;}

.burger{
  display:none; flex-direction:column; gap:4px; background:none; border:none; padding:6px;
}
.burger span{width:22px; height:2px; background:var(--ink); border-radius:2px;}

.mobile-panel{
  display:none;
  flex-direction:column; gap:4px;
  padding:14px 28px 20px;
  border-top:1px solid var(--line);
  background:var(--paper);
}
.mobile-panel.open{display:flex;}
.mobile-panel a{padding:10px 0; color:var(--ink); font-weight:500; border-bottom:1px solid var(--line); font-size:0.98rem;}
.mobile-panel .langsw{align-self:flex-start; margin-top:10px;}

/* ---------- HERO ---------- */
.hero{
  padding:88px 0 72px;
  display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--blue-soft); margin-bottom:22px;
}
.eyebrow::before{
  content:''; width:22px; height:1px; background:var(--orange);
}
.hero h1{
  font-size:clamp(2.1rem, 4.2vw, 3.4rem);
  line-height:1.1;
  margin-bottom:22px;
}
.hero h1 .accent{color:var(--orange);}
.hero p{
  color:var(--slate); font-size:1.08rem; max-width:480px; margin-bottom:32px;
}
.hero-ctas{display:flex; gap:14px; flex-wrap:wrap;}

.blueprint-box{
  position:relative;
  background:var(--blue);
  border-radius:18px;
  padding:36px;
  overflow:hidden;
}
.blueprint-box::before{
  content:'';
  position:absolute; inset:0;
  background-image:
          linear-gradient(rgba(255,255,255,0.055) 1px, transparent 1px),
          linear-gradient(90deg, rgba(255,255,255,0.055) 1px, transparent 1px);
  background-size:24px 24px;
}
.blueprint-box svg{position:relative; width:100%; height:auto; display:block;}

/* ---------- SECTION SHARED ---------- */
section{padding:76px 0;}
.section-head{margin-bottom:48px; max-width:560px;}
.section-head .mono{color:var(--orange); display:block; margin-bottom:14px;}
.section-head h2{font-size:clamp(1.6rem, 3vw, 2.2rem);}

/* ---------- STORITVE ---------- */
.services{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.service-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:30px 26px; transition:border-color .2s, transform .2s;
}
.service-card:hover{border-color:var(--orange); transform:translateY(-4px);}
.service-card .num{font-family:'IBM Plex Mono',monospace; font-size:0.78rem; color:var(--orange); margin-bottom:18px; display:block;}
.service-card h3{font-size:1.15rem; margin-bottom:10px;}
.service-card p{color:var(--slate); font-size:0.94rem;}

/* ---------- PROCES ---------- */
.process{position:relative;}
.process-line{
  position:absolute; left:23px; top:8px; bottom:8px; width:1px;
  background:repeating-linear-gradient(to bottom, var(--line) 0 6px, transparent 6px 12px);
}
.step{display:grid; grid-template-columns:48px 1fr; gap:22px; padding:22px 0;}
.step-num{
  width:48px; height:48px; border-radius:50%;
  background:var(--card); border:1.5px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  font-family:'IBM Plex Mono',monospace; font-size:0.85rem; color:var(--blue);
  z-index:1;
}
.step h3{font-size:1.08rem; margin-bottom:6px;}
.step p{color:var(--slate); font-size:0.94rem; max-width:520px;}

/* ---------- ZAKAJ JAZ ---------- */
.why{display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:start;}
.why-list{display:flex; flex-direction:column; gap:26px;}
.why-item{display:flex; gap:16px;}
.why-item .mark{
  width:26px; height:26px; flex-shrink:0; margin-top:2px;
  background:var(--orange); border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:0.75rem; font-family:'IBM Plex Mono',monospace;
}
.why-item h3{font-size:1.02rem; margin-bottom:4px;}
.why-item p{color:var(--slate); font-size:0.92rem;}
.why-panel{background:var(--blue); color:#fff; border-radius:18px; padding:38px;}
.why-panel .mono{color:#9FC0DE; margin-bottom:16px; display:block;}
.why-panel p{color:#D8E3EC; font-size:1rem; margin-bottom:20px;}
.why-panel p:last-child{margin-bottom:0;}
.why-panel .quote-line{width:36px; height:2px; background:var(--orange); margin-bottom:18px;}

/* ---------- KONTAKT ---------- */
.contact{background:var(--ink); color:#fff; border-radius:24px; padding:60px 52px;}
.contact-inner{display:grid; grid-template-columns:1fr 1.1fr; gap:48px; align-items:start;}
.contact h2{color:#fff; font-size:clamp(1.7rem,3.2vw,2.3rem); margin-bottom:16px;}
.contact > .contact-inner > div:first-child p{color:#B7C1CC; margin-bottom:22px;}
.contact-meta{display:flex; flex-direction:column; gap:10px;}
.contact-meta a{color:#D8E3EC; font-size:0.94rem; text-decoration:underline; text-underline-offset:3px;}

.form-grid{display:flex; flex-direction:column; gap:14px;}
.form-grid label{font-family:'IBM Plex Mono',monospace; font-size:0.68rem; text-transform:uppercase; letter-spacing:0.06em; color:#9FB0C2; margin-bottom:6px; display:block;}
.form-grid input, .form-grid textarea{
  width:100%; background:#1F2C40; border:1px solid #33475F; border-radius:8px;
  padding:12px 14px; color:#fff; font-family:'Inter',sans-serif; font-size:0.94rem;
}
.form-grid input:focus, .form-grid textarea:focus{outline:2px solid var(--orange); outline-offset:1px; border-color:var(--orange);}
.form-grid textarea{resize:vertical; min-height:100px;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.hidden-field{position:absolute; left:-9999px;}
.form-submit{align-self:flex-start; margin-top:4px;}
.form-note{font-size:0.78rem; color:#7C8CA0; margin-top:10px;}
.form-success{
  display:none; background:#1F2C40; border:1px solid var(--orange); border-radius:8px;
  padding:16px 18px; font-size:0.92rem; color:#fff; margin-top:14px;
}
.form-success.show{display:block;}

footer{padding:40px 28px 30px; text-align:center; color:var(--slate); font-size:0.85rem;}
footer a{text-decoration:underline; text-underline-offset:3px;}
footer a:hover{color:var(--orange);}

@media (max-width:860px){
  .hero{grid-template-columns:1fr; padding-top:44px;}
  .services{grid-template-columns:1fr;}
  .why{grid-template-columns:1fr;}
  .contact-inner{grid-template-columns:1fr;}
  .navlinks{display:none;}
  .nav-right .langsw{display:none;}
  .burger{display:flex;}
  .contact{padding:40px 26px;}
  .form-row{grid-template-columns:1fr;}
}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important; scroll-behavior:auto !important;}
}

[data-reveal]{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease;}
[data-reveal].in{opacity:1; transform:translateY(0);}

/* ---------- PLANI PAGE ---------- */
.plans-hero{padding:64px 0 40px; text-align:center;}
.plans-hero h1{font-size:clamp(2rem, 4vw, 2.8rem); margin-bottom:14px;}
.plans-hero p{color:var(--slate); max-width:520px; margin:0 auto;}

.plan-cards{display:grid; grid-template-columns:1fr 1fr; gap:22px; max-width:760px; margin:0 auto 64px;}
.plan-card{
  background:var(--card); border:1.5px solid var(--line); border-radius:18px;
  padding:34px 30px; text-align:left; position:relative; cursor:pointer;
  transition:border-color .2s, transform .2s;
}
.plan-card:hover{transform:translateY(-3px);}
.plan-card.selected{border-color:var(--orange); box-shadow:0 0 0 3px rgba(255,90,31,0.12);}
.plan-card .plan-badge{
  position:absolute; top:-12px; right:24px; background:var(--orange); color:#fff;
  font-family:'IBM Plex Mono',monospace; font-size:0.68rem; text-transform:uppercase;
  letter-spacing:0.05em; padding:5px 12px; border-radius:20px;
}
.plan-card h3{font-size:1.1rem; margin-bottom:12px; color:var(--slate); font-weight:500;}
.plan-card .price{font-family:'Space Grotesk',sans-serif; font-size:2.4rem; font-weight:700; color:var(--ink);}
.plan-card .price span{font-size:1rem; font-weight:500; color:var(--slate);}
.plan-card .plan-note{font-size:0.84rem; color:var(--slate); margin-top:10px;}
.plan-card .plan-radio{
  position:absolute; top:24px; right:24px; width:20px; height:20px; border-radius:50%;
  border:2px solid var(--line); display:flex; align-items:center; justify-content:center;
}
.plan-card.selected .plan-radio{border-color:var(--orange);}
.plan-card.selected .plan-radio::after{content:''; width:10px; height:10px; border-radius:50%; background:var(--orange);}

.payment-methods{display:flex; gap:14px; max-width:760px; margin:0 auto 8px; flex-wrap:wrap;}
.payment-method{
  flex:1; min-width:150px; background:var(--card); border:1.5px solid var(--line); border-radius:12px;
  padding:18px; text-align:center; cursor:pointer; font-weight:600; font-size:0.94rem;
  transition:border-color .2s, transform .2s;
}
.payment-method:hover{transform:translateY(-2px);}
.payment-method.selected{border-color:var(--orange); background:#FFF3EC; color:var(--orange);}

.payment-instructions{
  max-width:760px; margin:24px auto 0; background:var(--blue); color:#fff; border-radius:16px;
  padding:28px 30px; display:none;
}
.payment-instructions.show{display:block;}
.payment-instructions h4{font-size:1rem; margin-bottom:14px; color:#fff;}
.payment-instructions .pi-row{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  background:rgba(255,255,255,0.08); border-radius:8px; padding:12px 16px; margin-bottom:10px;
  font-family:'IBM Plex Mono',monospace; font-size:0.86rem; word-break:break-all;
}
.payment-instructions .pi-copy{
  background:var(--orange); color:#fff; border:none; border-radius:6px; padding:6px 12px;
  font-size:0.76rem; font-weight:600; cursor:pointer; flex-shrink:0;
}
.payment-instructions p{color:#D8E3EC; font-size:0.88rem; margin-top:12px;}
.payment-warning{
  background:rgba(255,90,31,0.15); border:1px solid rgba(255,90,31,0.4); border-radius:8px;
  padding:10px 14px; font-size:0.84rem; color:#FFD9C4; margin-top:12px;
}

.confirm-form-wrap{max-width:520px; margin:48px auto 0; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:32px;}
.confirm-form-wrap h3{font-size:1.1rem; margin-bottom:6px;}
.confirm-form-wrap > p{color:var(--slate); font-size:0.88rem; margin-bottom:22px;}

.app-link-box{
  max-width:760px; margin:32px auto 56px; background:var(--card); border:1px solid var(--line); border-radius:16px;
  padding:26px 30px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.app-link-box p{color:var(--slate); font-size:0.9rem;}

@media (max-width:640px){
  .plan-cards{grid-template-columns:1fr;}
  .payment-methods{flex-direction:column;}
  .app-link-box{flex-direction:column; align-items:flex-start; text-align:left;}
}

/* ---------- APP SHOWCASE (index.html) ---------- */
.app-showcase{
  display:grid; grid-template-columns: 1fr 1.3fr; gap:48px; align-items:center;
  background:var(--blue); border-radius:24px; padding:56px; color:#fff; overflow: hidden; position: relative;
  transition: grid-template-columns 0.6s cubic-bezier(0.25, 1, 0.5, 1), gap 0.6s ease;
}

.app-showcase:has(.app-showcase-frame:hover) > div:first-child {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.app-showcase:has(.app-showcase-frame:hover) {
  aspect-ratio: 16/9;
  transition: aspect-ratio 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}
.app-showcase .eyebrow{color:#9FC0DE;}
.app-showcase .eyebrow::before{background:var(--orange);}
.app-showcase h2{color:#fff; font-size:clamp(1.6rem, 3vw, 2.1rem); margin-bottom:16px; line-height:1.15;}

.underline-red {
  position: relative;
  border-bottom: 2px solid var(--orange);
  display: inline-block;
}
.app-showcase p{color:#D8E3EC; font-size:1rem; margin-bottom:28px; max-width:440px;}
.app-showcase-frame{
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.15); border-radius:16px;
  padding:14px; aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; overflow:hidden;
  cursor: pointer;
  position: relative;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}
.app-showcase-frame img{width:100%; height:100%; object-fit:contain; border-radius:8px; display:block;
  transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);}
.app-showcase-frame:hover {
  position: absolute;
  z-index: 10;
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  top: 0;
  left: 0;
  border-radius: 24px;
  background: var(--blue);
  padding: 0;
}
.app-showcase-frame:hover img {
  object-fit: contain;
  border-radius: 24px;
}
.app-showcase-frame .placeholder-text{color:#7C93AC; font-size:0.84rem; text-align:center; font-family:'IBM Plex Mono',monospace;}

@media (max-width:860px){
  .app-showcase{grid-template-columns:1fr; padding:36px 26px;}
  .app-showcase-frame{order:-1;}
}