/* Strange / Agencia.sk — service landing page styles
   shared by /softver/crm/, /ai-automatizacia/, /webove-aplikacie/, /mobilna-aplikacia/ */

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:#fafaf9;color:#0a0a0a;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,sans-serif;-webkit-font-smoothing:antialiased;line-height:1.55}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
:root{--m:#ff2d6f;--m-dark:#a8104a;--ink:#0a0a0a;--ink-soft:rgba(10,10,10,.7);--ink-soft-2:rgba(10,10,10,.55);--line:rgba(10,10,10,.08);--bg:#fafaf9}

/* Nav */
.nav{position:sticky;top:0;background:rgba(250,250,249,.85);backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);z-index:50;border-bottom:1px solid var(--line)}
.nav-inner{max-width:1180px;margin:0 auto;padding:.9rem 1.6rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.nav-logo{font-size:1.25rem;font-weight:800;letter-spacing:-.04em;color:var(--ink)}
.nav-logo em{font-style:normal;color:var(--m)}
.nav-links{display:flex;gap:.4rem;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;padding:.6em 1.1em;border-radius:999px;font-size:.88rem;font-weight:600;border:1px solid rgba(10,10,10,.16);background:transparent;color:var(--ink);cursor:pointer;transition:all .18s ease-out;white-space:nowrap}
.btn:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-primary{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-primary:hover{background:var(--m);border-color:var(--m)}
@media (max-width:680px){.nav-links .btn-secondary{display:none}}

/* Layout */
.container{max-width:1180px;margin:0 auto;padding:0 1.6rem}
section{padding:5.5rem 0}
@media (max-width:720px){section{padding:3.5rem 0}}

/* Hero */
.hero{padding:5rem 0 4rem;background:var(--bg)}
.hero-eye{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.78rem;letter-spacing:.2em;color:var(--m);font-weight:700;text-transform:uppercase;margin:0 0 1.2rem}
.hero h1{font-size:clamp(36px,5vw,68px);font-weight:800;letter-spacing:-.028em;line-height:1.04;margin:0 0 1.4rem;color:var(--ink);max-width:18ch}
.hero h1 em{font-style:italic;font-family:"Times New Roman",Georgia,serif;color:var(--m);font-weight:800}
.hero p.lede{font-size:clamp(16px,1.3vw,19px);line-height:1.55;color:var(--ink-soft);max-width:54ch;margin:0 0 2rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:.7rem;margin:0 0 1.8rem}
.btn-big{padding:.95em 1.6em;font-size:1rem;border-radius:999px}
.hero-meta{display:flex;flex-wrap:wrap;gap:1.4rem;font-size:.86rem;color:var(--ink-soft-2)}
.hero-meta b{color:var(--ink);font-weight:700}

/* Section heading */
.sec-eye{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.72rem;letter-spacing:.22em;color:var(--m);font-weight:700;text-transform:uppercase;margin:0 0 1rem}
.sec-h{font-size:clamp(26px,3.4vw,44px);font-weight:800;letter-spacing:-.025em;line-height:1.1;margin:0 0 1rem;color:var(--ink);max-width:24ch}
.sec-h em{font-style:italic;font-family:"Times New Roman",Georgia,serif;color:var(--m);font-weight:800}
.sec-lede{font-size:1.05rem;line-height:1.55;color:var(--ink-soft);max-width:62ch;margin:0 0 2.4rem}

/* Problem cards */
.problem{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.problem-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:2.2rem}
@media (max-width:900px){.problem-grid{grid-template-columns:1fr 1fr;gap:.9rem}}
@media (max-width:540px){.problem-grid{grid-template-columns:1fr}}
.problem-card{background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:1.4rem 1.3rem}
.problem-card .pc-ic{font-size:1.2rem;line-height:1;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;background:rgba(255,45,111,.1);color:var(--m);margin-bottom:.9rem}
.problem-card h3{font-size:1.05rem;font-weight:700;letter-spacing:-.01em;margin:0 0 .5rem;color:var(--ink)}
.problem-card p{font-size:.92rem;line-height:1.5;color:var(--ink-soft);margin:0}

/* Solution list */
.solution-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-top:2.2rem}
@media (max-width:780px){.solution-grid{grid-template-columns:1fr}}
.solution-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1.6rem 1.5rem}
.solution-card h3{font-size:1.15rem;font-weight:800;letter-spacing:-.015em;margin:0 0 .7rem;color:var(--ink)}
.solution-card h3 .num{display:inline-block;font-family:ui-monospace,monospace;font-size:.78rem;letter-spacing:.1em;color:var(--m);margin-right:.6em}
.solution-card p{font-size:.95rem;line-height:1.55;color:var(--ink-soft);margin:0}

/* Process timeline */
.process{background:var(--ink);color:#fff}
.process .sec-h{color:#fff}
.process .sec-h em{color:#fff}
.process .sec-lede{color:rgba(255,255,255,.65)}
.process .sec-eye{color:var(--m)}
.timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;margin-top:2.4rem;position:relative}
@media (max-width:880px){.timeline{grid-template-columns:1fr 1fr}}
@media (max-width:540px){.timeline{grid-template-columns:1fr}}
.tl-step{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:1.4rem 1.3rem}
.tl-step .tl-num{font-family:ui-monospace,monospace;font-size:.72rem;letter-spacing:.18em;color:var(--m);font-weight:700;margin-bottom:.5rem}
.tl-step h3{font-size:1.05rem;font-weight:800;margin:0 0 .4rem;color:#fff}
.tl-step .tl-when{font-size:.78rem;color:rgba(255,255,255,.5);margin-bottom:.6rem;font-family:ui-monospace,monospace}
.tl-step p{font-size:.9rem;line-height:1.5;color:rgba(255,255,255,.65);margin:0}

/* Use cases */
.cases-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2.2rem}
@media (max-width:900px){.cases-grid{grid-template-columns:1fr}}
.use-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1.4rem 1.3rem;display:flex;flex-direction:column}
.use-card .uc-tag{font-family:ui-monospace,monospace;font-size:.7rem;letter-spacing:.18em;color:var(--m);font-weight:700;text-transform:uppercase;margin-bottom:.7rem}
.use-card h3{font-size:1.08rem;font-weight:800;margin:0 0 .6rem;color:var(--ink)}
.use-card p{font-size:.92rem;line-height:1.5;color:var(--ink-soft);margin:0}

/* Stack */
.stack-row{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.6rem}
.stack-row span{background:rgba(10,10,10,.04);border:1px solid var(--line);border-radius:999px;padding:.5em 1em;font-size:.84rem;color:var(--ink);font-family:ui-monospace,monospace;font-weight:500}

/* FAQ */
.faq{background:#fff;border-top:1px solid var(--line)}
.faq-list{margin-top:2rem;max-width:780px}
.faq-item{border-top:1px solid var(--line);padding:1.2rem 0;cursor:pointer}
.faq-item:last-child{border-bottom:1px solid var(--line)}
.faq-q{display:flex;justify-content:space-between;align-items:center;font-size:1.02rem;font-weight:600;letter-spacing:-.005em;gap:1rem;color:var(--ink)}
.faq-q::after{content:"+";font-size:1.4rem;color:var(--m);font-weight:300;transition:transform .2s}
.faq-item.open .faq-q::after{transform:rotate(45deg)}
.faq-a{font-size:.94rem;color:var(--ink-soft);line-height:1.6;max-height:0;overflow:hidden;transition:max-height .3s ease,padding-top .3s ease;padding-top:0}
.faq-item.open .faq-a{max-height:600px;padding-top:.8rem}

/* CTA section */
.cta-final{background:var(--ink);color:#fff;border-radius:32px;padding:4rem 2rem;text-align:center;margin:0 auto;max-width:1100px}
.cta-final .sec-eye{color:var(--m)}
.cta-final h2{font-size:clamp(28px,4vw,48px);font-weight:800;letter-spacing:-.025em;line-height:1.1;margin:0 0 1rem;color:#fff}
.cta-final h2 em{font-style:italic;font-family:"Times New Roman",Georgia,serif;color:var(--m);font-weight:800}
.cta-final p{font-size:1.05rem;color:rgba(255,255,255,.7);max-width:54ch;margin:0 auto 1.8rem;line-height:1.55}
.cta-row{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center}
.cta-row .btn{background:#fff;color:var(--ink);border-color:#fff;font-size:.95rem;padding:.9em 1.5em}
.cta-row .btn:hover{background:var(--m);color:#fff;border-color:var(--m)}
.cta-row .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.25)}
.cta-row .btn-ghost:hover{background:#fff;color:var(--ink);border-color:#fff}

/* Related services */
.related{background:var(--bg);padding-bottom:5rem}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.6rem}
@media (max-width:780px){.related-grid{grid-template-columns:1fr}}
.related-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1.3rem 1.3rem;transition:border-color .15s,transform .15s;display:block}
.related-card:hover{border-color:var(--m);transform:translateY(-2px)}
.related-card .rc-tag{font-family:ui-monospace,monospace;font-size:.68rem;letter-spacing:.18em;color:var(--m);font-weight:700;text-transform:uppercase;margin-bottom:.5rem}
.related-card h4{font-size:1.05rem;font-weight:800;margin:0 0 .4rem;color:var(--ink)}
.related-card p{font-size:.88rem;line-height:1.45;color:var(--ink-soft);margin:0 0 .8rem}
.related-card .rc-arr{font-size:.85rem;color:var(--m);font-weight:600}

/* Footer */
footer{background:var(--ink);color:rgba(255,255,255,.7);padding:3rem 0 2rem;font-size:.88rem}
footer .footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2rem}
@media (max-width:780px){footer .footer-grid{grid-template-columns:1fr 1fr;gap:1.6rem}}
footer h5{font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.5);margin:0 0 .9rem;font-weight:700}
footer a{display:block;color:rgba(255,255,255,.85);margin-bottom:.4rem;transition:color .15s}
footer a:hover{color:var(--m)}
footer .copy{margin-top:2.2rem;padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.1);font-size:.78rem;color:rgba(255,255,255,.4)}

/* Sticky CTA bar (mobile bottom) */
@media (max-width:780px){
  .sticky-cta{display:flex !important;position:sticky;bottom:0;left:0;right:0;background:rgba(250,250,249,.96);backdrop-filter:blur(14px);border-top:1px solid var(--line);padding:.8rem 1rem calc(.8rem + env(safe-area-inset-bottom));z-index:40;gap:.6rem}
  .sticky-cta .btn{flex:1;justify-content:center}
}
.sticky-cta{display:none}

/* TL;DR badge */
.tldr{display:inline-flex;align-items:center;gap:.5em;background:rgba(10,10,10,.04);border:1px solid var(--line);border-radius:999px;padding:.4em 1em;font-size:.82rem;color:var(--ink-soft);font-weight:500;margin-bottom:1.2rem}
.tldr::before{content:"";width:6px;height:6px;border-radius:50%;background:#16a34a;display:inline-block}