/* ===========================================================
   Prenovistran.si — pricing, about, testimonials, faq, cta, footer
   =========================================================== */

/* ---------- PRICING ---------- */
.price-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch; }
.plan{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:34px 30px; display:flex; flex-direction:column; position:relative; transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s; }
.plan:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.plan.pop{ border-color:transparent; box-shadow:var(--shadow-lg); }
.plan.pop::before{ content:""; position:absolute; inset:0; border-radius:var(--r-lg); padding:1.5px; background:var(--grad); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; }
.plan .pbadge{ position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--grad); color:#fff; font-family:var(--f-mono); font-size:11px; font-weight:700; letter-spacing:.1em; padding:6px 15px; border-radius:999px; white-space:nowrap; box-shadow:0 8px 20px -6px rgba(45,91,255,.5); }
.plan .pname{ font-family:var(--f-head); font-weight:700; font-size:20px; }
.plan .pfor{ color:var(--ink-3); font-size:14.5px; margin:6px 0 22px; min-height:42px; text-wrap:pretty; }
.plan .pprice{ font-family:var(--f-head); font-weight:700; font-size:52px; letter-spacing:-.03em; line-height:1; }
.plan .pprice .mo{ font-family:var(--f-body); font-size:15px; font-weight:500; color:var(--ink-3); letter-spacing:0; }
.plan .feats{ list-style:none; margin:26px 0 28px; display:flex; flex-direction:column; gap:13px; flex:1; }
.plan .feats li{ display:flex; gap:11px; align-items:flex-start; font-size:15px; color:var(--ink-2); }
.plan .feats li svg{ width:19px; height:19px; flex:none; color:var(--accent); margin-top:1px; }
.plan .btn{ width:100%; }
.plan:not(.pop) .btn{ background:var(--ink); color:#fff; }
.plan:not(.pop) .btn:hover{ background:var(--accent); }
.price-note{ text-align:center; margin-top:30px; font-family:var(--f-mono); font-size:13px; color:var(--ink-3); letter-spacing:.02em; }
@media(max-width:880px){ .price-grid{ grid-template-columns:1fr; max-width:440px; margin:0 auto; } }

/* ---------- ABOUT / TRUST ---------- */
.about-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:60px; align-items:center; }
.trust-list{ display:grid; grid-template-columns:1fr 1fr; gap:26px; }
.trust-item .ti-ic{ width:46px; height:46px; border-radius:13px; background:var(--grad); display:grid; place-items:center; margin-bottom:14px; color:#fff; box-shadow:0 8px 20px -6px rgba(45,91,255,.45); }
.trust-item .ti-ic svg{ width:23px; height:23px; }
.trust-item h3{ font-size:18px; margin-bottom:6px; }
.trust-item p{ font-size:15px; color:var(--ink-2); text-wrap:pretty; }
.about-quote{ background:var(--ink); color:#fff; border-radius:var(--r-lg); padding:44px 40px; position:relative; overflow:hidden; }
.about-quote::before{ content:"“"; position:absolute; top:-30px; left:24px; font-family:var(--f-head); font-size:160px; color:rgba(255,255,255,.07); }
.about-quote .q{ font-family:var(--f-head); font-size:24px; line-height:1.3; letter-spacing:-.02em; position:relative; text-wrap:pretty; }
.about-quote .a{ margin-top:22px; font-family:var(--f-mono); font-size:13px; letter-spacing:.06em; color:var(--accent-3); }
.about-quote .glow{ position:absolute; width:300px; height:300px; border-radius:50%; background:var(--grad); filter:blur(80px); opacity:.4; bottom:-150px; right:-80px; }
@media(max-width:880px){ .about-grid{ grid-template-columns:1fr; gap:40px; } }
@media(max-width:520px){ .trust-list{ grid-template-columns:1fr; } }

/* ---------- TESTIMONIALS ---------- */
.tst-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.tcard{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:30px 28px; display:flex; flex-direction:column; transition:transform .4s var(--ease), box-shadow .4s; }
.tcard:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); }
.tcard .stars{ display:flex; gap:3px; color:var(--accent); margin-bottom:16px; }
.tcard .stars svg{ width:17px; height:17px; }
.tcard .tq{ font-size:16px; line-height:1.55; color:var(--ink); flex:1; text-wrap:pretty; }
.tcard .who{ display:flex; align-items:center; gap:12px; margin-top:22px; }
.tcard .av{ width:42px; height:42px; border-radius:50%; background:var(--grad); display:grid; place-items:center; color:#fff; font-family:var(--f-head); font-weight:700; font-size:16px; flex:none; }
.tcard .who .nm{ font-family:var(--f-head); font-weight:600; font-size:15px; }
.tcard .who .rl{ font-size:13px; color:var(--ink-3); }
@media(max-width:880px){ .tst-grid{ grid-template-columns:1fr; max-width:440px; margin:0 auto; } }

/* ---------- FAQ ---------- */
.faq-wrap{ max-width:820px; margin:0 auto; }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:26px 4px; text-align:left; font-family:var(--f-head); font-weight:600; font-size:19px; letter-spacing:-.01em; transition:color .25s; }
.faq-q:hover{ color:var(--accent); }
.faq-q .pm{ width:30px; height:30px; flex:none; border-radius:50%; border:1.5px solid var(--line); display:grid; place-items:center; position:relative; transition:all .3s var(--ease); }
.faq-q .pm::before,.faq-q .pm::after{ content:""; position:absolute; background:var(--ink); border-radius:2px; transition:all .3s var(--ease); }
.faq-q .pm::before{ width:13px; height:2px; } .faq-q .pm::after{ width:2px; height:13px; }
.faq-item.open .pm{ background:var(--accent); border-color:var(--accent); transform:rotate(90deg); }
.faq-item.open .pm::before,.faq-item.open .pm::after{ background:#fff; }
.faq-item.open .pm::after{ transform:scaleY(0); }
.faq-a{ overflow:hidden; max-height:0; transition:max-height .45s var(--ease); }
.faq-a p{ padding:0 4px 26px; color:var(--ink-2); font-size:16.5px; max-width:680px; text-wrap:pretty; }

/* ---------- CTA ---------- */
.cta{ position:relative; overflow:hidden; }
.cta-box{ background:var(--ink); border-radius:var(--r-lg); padding:64px 56px; position:relative; overflow:hidden; display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center; }
.cta-box .glow{ position:absolute; width:440px; height:440px; border-radius:50%; background:var(--grad); filter:blur(110px); opacity:.45; top:-180px; left:-120px; }
.cta-box .glow.g2{ top:auto; left:auto; bottom:-200px; right:-140px; opacity:.35; }
.cta-l{ position:relative; z-index:2; color:#fff; }
.cta-l .eyebrow{ color:var(--accent-3); } .cta-l .eyebrow::before{ background:var(--accent-3); }
.cta-l h2{ font-size:clamp(30px,3.6vw,44px); margin:16px 0 14px; color:#fff; }
.cta-l p{ color:rgba(255,255,255,.75); font-size:18px; max-width:420px; text-wrap:pretty; }
.cta-form{ position:relative; z-index:2; display:flex; flex-direction:column; gap:13px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:var(--r); padding:26px; backdrop-filter:blur(10px); }
.cta-form input{ width:100%; padding:15px 17px; border-radius:11px; background:rgba(255,255,255,.95); border:1px solid transparent; font-family:var(--f-body); font-size:15.5px; color:var(--ink); transition:box-shadow .25s; }
.cta-form input:focus{ outline:none; box-shadow:0 0 0 3px var(--accent); }
.cta-form .btn{ width:100%; margin-top:4px; }
.cta-form .fine{ font-family:var(--f-mono); font-size:11.5px; color:rgba(255,255,255,.55); text-align:center; letter-spacing:.03em; }
@media(max-width:820px){ .cta-box{ grid-template-columns:1fr; gap:34px; padding:44px 30px; } }
@media(max-width:460px){ .cta-box{ padding:30px 18px; gap:26px; } .cta-l h2{ font-size:clamp(24px,7vw,34px); } }

/* ---------- FOOTER ---------- */
.footer{ padding:60px 0 40px; border-top:1px solid var(--line); }
.footer .wrap{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.footer .brand{ font-size:18px; }
.footer .ftag{ color:var(--ink-3); font-size:14.5px; }
.footer .fright{ margin-left:auto; display:flex; gap:22px; align-items:center; font-size:13.5px; color:var(--ink-3); font-family:var(--f-mono); letter-spacing:.02em; }

@media(max-width:520px){
  .footer .wrap{ flex-direction:column; align-items:flex-start; gap:12px; }
  .footer .fright{ margin-left:0; }
}

/* ---------- TWEAKS PANEL ---------- */
#tw{ position:fixed; right:18px; bottom:18px; z-index:9000; width:296px; background:var(--card); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow-lg); font-family:var(--f-body); overflow:hidden; display:none; }
#tw.show{ display:block; }
#tw .tw-head{ display:flex; align-items:center; gap:9px; padding:15px 17px; border-bottom:1px solid var(--line); font-family:var(--f-head); font-weight:700; font-size:15px; }
#tw .tw-head .d{ width:9px; height:9px; border-radius:50%; background:var(--grad); }
#tw .tw-body{ padding:16px 17px 20px; display:flex; flex-direction:column; gap:18px; max-height:72vh; overflow-y:auto; }
.tw-group > .tw-lbl{ font-family:var(--f-mono); font-size:10.5px; letter-spacing:.14em; color:var(--ink-3); font-weight:700; margin-bottom:9px; display:block; text-transform:uppercase; }
.tw-seg{ display:flex; background:var(--bg-2); border-radius:11px; padding:3px; gap:3px; }
.tw-seg button{ flex:1; padding:9px 6px; border-radius:8px; font-size:12.5px; font-weight:600; font-family:var(--f-head); color:var(--ink-3); transition:all .2s; }
.tw-seg button.on{ background:var(--card); color:var(--accent); box-shadow:var(--shadow); }
.tw-sw{ display:flex; gap:10px; }
.tw-sw button{ width:34px; height:34px; border-radius:9px; position:relative; transition:transform .2s; }
.tw-sw button:hover{ transform:scale(1.1); }
.tw-sw button.on::after{ content:""; position:absolute; inset:-4px; border-radius:12px; border:2px solid var(--ink); }
.tw-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.tw-row .tw-lbl{ font-size:13.5px; font-weight:500; }
.tw-toggle{ width:46px; height:26px; border-radius:999px; background:var(--bg-2); position:relative; transition:background .25s; flex:none; }
.tw-toggle.on{ background:var(--accent); }
.tw-toggle::after{ content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 2px 5px rgba(0,0,0,.2); transition:transform .25s var(--ease); }
.tw-toggle.on::after{ transform:translateX(20px); }