/* ============================================================
R005A — SELF-HOSTED MONTSERRAT (SIL OFL, local woff2, no remote font)
Variable woff2 (weight axis), latin + latin-ext (Serbian diacritics).
font-display:swap → tekst odmah vidljiv u fallback-u dok font stigne.
============================================================ */
@font-face{
font-family:'Montserrat';font-style:normal;font-weight:400 700;font-display:swap;
src:url('../fonts/montserrat/montserrat-latinext.woff2') format('woff2');
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
font-family:'Montserrat';font-style:normal;font-weight:400 700;font-display:swap;
src:url('../fonts/montserrat/montserrat-latin.woff2') format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* ============================================================
ARTA3D Studio — Static MVP R003 (+R004C Nordi-look)
Editorial premium · warm minimal · graphite + bronze
Naslovi i meni: Montserrat (OFL, free) — kao Nordi referenca.
============================================================ */
:root{
/* Brand */
--ink:#171513;
--graphite:#1E1B17;
--graphite-2:#262219;
--graphite-3:#2F2A22;
--bronze:#C4A072;
--bronze-light:#D8BE92;
--bronze-deep:#A8855A;
--paper:#FAFAF8;
--paper-warm:#F1ECE3;
--sand:#E7DECF;
--muted:#6B6258;
--muted-light:#9A9085;
--line-dark:rgba(196,160,114,.20);
--line-light:rgba(23,21,19,.12);
/* Type */
--serif:"Iowan Old Style","Palatino Linotype","Palatino","Book Antiqua","Georgia",serif;
--sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,"Noto Sans",sans-serif;
/* Layout */
--maxw:1140px;
--gap:clamp(1rem,2.5vw,2rem);
--pad-section:clamp(3.5rem,8vw,7rem);
--radius:14px;
--radius-sm:9px;
--shadow:0 18px 50px -24px rgba(23,21,19,.45);
--shadow-soft:0 10px 30px -18px rgba(23,21,19,.35);
--t:.28s cubic-bezier(.2,.7,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
margin:0;font-family:var(--sans);color:var(--ink);background:var(--paper);
font-size:17px;line-height:1.65;letter-spacing:.005em;
-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.12;letter-spacing:-.01em;margin:0 0 .5em}
h1{font-size:clamp(2.1rem,5.2vw,3.7rem)}
h2{font-size:clamp(1.7rem,3.6vw,2.6rem)}
h3{font-size:clamp(1.18rem,2vw,1.45rem)}
p{margin:0 0 1rem}
.eyebrow{font-family:var(--sans);font-size:.78rem;font-weight:600;letter-spacing:.18em;
text-transform:uppercase;color:var(--bronze-deep)}
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(1.1rem,4vw,2rem)}
.section{padding-block:var(--pad-section)}
.lead{font-size:clamp(1.05rem,1.6vw,1.28rem);color:var(--muted);max-width:60ch}
.center{text-align:center;margin-inline:auto}
.muted{color:var(--muted)}
.tac{text-align:center}
/* Section tone variants */
.tone-dark{background:var(--graphite);color:var(--paper)}
.tone-dark h1,.tone-dark h2,.tone-dark h3{color:#fff}
.tone-dark .lead,.tone-dark .muted{color:rgba(250,250,248,.72)}
.tone-dark .eyebrow{color:var(--bronze)}
.tone-paper{background:var(--paper)}
.tone-warm{background:var(--paper-warm)}
.tone-ink{background:var(--ink);color:var(--paper)}
.tone-ink h2,.tone-ink h3{color:#fff}
.tone-ink .lead{color:rgba(250,250,248,.74)}
.tone-ink .eyebrow{color:var(--bronze)}
/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.55em;font-family:var(--sans);font-weight:600;
font-size:.97rem;letter-spacing:.01em;padding:.85em 1.5em;border-radius:999px;cursor:pointer;
border:1.5px solid transparent;transition:transform var(--t),background var(--t),color var(--t),border-color var(--t);
line-height:1;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--bronze);color:var(--ink)}
.btn-primary:hover{background:var(--bronze-light)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-light)}
.btn-ghost:hover{border-color:var(--bronze);color:var(--bronze-deep)}
.tone-dark .btn-ghost,.tone-ink .btn-ghost{color:#fff;border-color:rgba(255,255,255,.28)}
.tone-dark .btn-ghost:hover,.tone-ink .btn-ghost:hover{border-color:var(--bronze);color:var(--bronze-light)}
.btn-lg{padding:1.05em 1.9em;font-size:1.02rem}
.btn-row{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.6rem}
.btn-row.center{justify-content:center}
/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:60;background:rgba(23,21,19,.82);
backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
border-bottom:1px solid var(--line-dark)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;
height:68px}
.brand{display:flex;align-items:center;gap:.6rem;color:#fff;font-family:var(--serif);
font-size:1.22rem;font-weight:600;letter-spacing:.02em}
.brand .mark{width:30px;height:30px;border-radius:7px;flex:0 0 auto;
background:linear-gradient(135deg,var(--bronze),var(--bronze-deep));
display:grid;place-items:center;color:var(--ink);font-size:.82rem;font-weight:700;font-family:var(--sans)}
.brand b{color:var(--bronze)}
.nav-links{display:flex;align-items:center;gap:1.6rem;list-style:none;margin:0;padding:0}
.nav-links a{color:rgba(250,250,248,.82);font-size:.95rem;font-weight:500;
padding:.4em 0;position:relative;transition:color var(--t)}
.nav-links a:hover{color:#fff}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:1.5px;
background:var(--bronze);transition:width var(--t)}
.nav-links a:hover::after{width:100%}
.nav-cta{display:flex;align-items:center;gap:.6rem}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;width:42px;height:42px;
flex-direction:column;justify-content:center;gap:5px;padding:9px}
.nav-toggle span{display:block;height:2px;background:var(--bronze);border-radius:2px;transition:var(--t)}
/* ---------- Hero ---------- */
.hero{position:relative;background:
radial-gradient(1100px 480px at 78% -8%,rgba(196,160,114,.16),transparent 60%),
linear-gradient(180deg,var(--graphite),var(--ink));
color:var(--paper);overflow:hidden}
.hero .container{position:relative;z-index:2}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.5rem,4vw,3.5rem);
align-items:center;padding-block:clamp(3rem,7vw,5.5rem)}
.hero h1{color:#fff;margin-bottom:.35em}
.hero h1 em{font-style:normal;color:var(--bronze);font-family:var(--serif)}
.hero-sub{font-size:clamp(1.05rem,1.7vw,1.3rem);color:rgba(250,250,248,.78);max-width:46ch;margin-bottom:1.4rem}
.trustline{display:flex;flex-wrap:wrap;gap:.5rem .9rem;margin-top:1.7rem;
font-size:.84rem;color:rgba(250,250,248,.6);align-items:center}
.trustline .dot{width:4px;height:4px;border-radius:50%;background:var(--bronze)}
/* pain-point chips */
.painrow{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1.7rem}
.chip{display:inline-flex;align-items:center;gap:.5em;font-size:.86rem;font-weight:500;
color:rgba(250,250,248,.9);background:rgba(196,160,114,.12);border:1px solid var(--line-dark);
padding:.5em .9em;border-radius:999px}
.chip::before{content:"›";color:var(--bronze);font-weight:700}
/* ---------- Render slot (placeholder for renders) ---------- */
.render-slot{position:relative;border-radius:var(--radius);overflow:hidden;
background:
repeating-linear-gradient(45deg,rgba(196,160,114,.07) 0 14px,transparent 14px 28px),
linear-gradient(150deg,var(--graphite-3),var(--graphite));
border:1px solid var(--line-dark);min-height:280px;display:flex;flex-direction:column;
justify-content:flex-end;padding:1.1rem;color:rgba(250,250,248,.9)}
.render-slot.ratio-16x9{aspect-ratio:16/9;min-height:0}
.render-slot.ratio-1x1{aspect-ratio:1/1;min-height:0}
.render-slot.ratio-4x3{aspect-ratio:4/3;min-height:0}
.render-slot .tag{position:absolute;top:.85rem;left:.85rem;font-family:var(--sans);
font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
color:var(--ink);background:var(--bronze);padding:.32em .7em;border-radius:5px}
.render-slot .slot-label{font-family:var(--serif);font-size:1.05rem;line-height:1.25}
.render-slot .slot-meta{font-size:.8rem;color:rgba(250,250,248,.6);margin-top:.2rem}
.render-slot .icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-60%);
font-size:2rem;opacity:.25}
.hero-figure .render-slot{box-shadow:var(--shadow);min-height:360px}
/* ---------- Grids ---------- */
.grid{display:grid;gap:var(--gap)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.section-head{max-width:62ch;margin-bottom:2.6rem}
.section-head.center{margin-inline:auto;text-align:center}
/* ---------- Cards ---------- */
.card{background:#fff;border:1px solid var(--line-light);border-radius:var(--radius);
padding:1.6rem;transition:transform var(--t),box-shadow var(--t),border-color var(--t);
height:100%;display:flex;flex-direction:column}
.tone-warm .card{background:#fff}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-soft);border-color:var(--bronze)}
.card h3{margin-bottom:.4rem}
.card .price{font-family:var(--serif);font-size:1.5rem;color:var(--bronze-deep);margin:.1rem 0 .6rem}
.card .price small{font-family:var(--sans);font-size:.8rem;color:var(--muted);font-weight:500}
.card .who{font-size:.82rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
color:var(--bronze-deep);margin-bottom:.5rem}
.card ul{margin:.4rem 0 1.1rem;padding-left:1.1rem;color:var(--muted);font-size:.95rem}
.card ul li{margin-bottom:.3rem}
.card .card-cta{margin-top:auto}
.card-link{font-weight:600;color:var(--bronze-deep);font-size:.93rem;display:inline-flex;gap:.4em;align-items:center}
.card-link::after{content:"→";transition:transform var(--t)}
.card:hover .card-link::after{transform:translateX(4px)}
/* Service card (reusable block — V1.5/Faza B ready) */
.svc-card{background:#fff;border:1px solid var(--line-light);border-radius:var(--radius);
padding:1.5rem;display:flex;flex-direction:column;gap:.5rem;height:100%;
transition:transform var(--t),box-shadow var(--t),border-color var(--t)}
.svc-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-soft);border-color:var(--bronze)}
.svc-card .svc-ico{width:44px;height:44px;border-radius:10px;display:grid;place-items:center;
background:var(--paper-warm);color:var(--bronze-deep);font-size:1.3rem;margin-bottom:.3rem}
.svc-card h3{font-size:1.18rem;margin:0}
.svc-card p{font-size:.93rem;color:var(--muted);margin:0}
.svc-badge{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
color:var(--bronze-deep);background:var(--paper-warm);padding:.25em .6em;border-radius:5px;align-self:flex-start}
/* Process steps */
.steps{counter-reset:step;display:grid;gap:1.1rem}
.step{display:grid;grid-template-columns:auto 1fr;gap:1.1rem;align-items:start;
padding:1.3rem 1.4rem;background:#fff;border:1px solid var(--line-light);border-radius:var(--radius)}
.tone-dark .step,.tone-ink .step{background:var(--graphite-2);border-color:var(--line-dark)}
.step .num{counter-increment:step;width:42px;height:42px;border-radius:50%;flex:0 0 auto;
background:var(--bronze);color:var(--ink);font-family:var(--serif);font-weight:700;font-size:1.2rem;
display:grid;place-items:center}
.step .num::before{content:counter(step)}
.step h3{margin:.15rem 0 .3rem;font-size:1.18rem}
.step p{margin:0;font-size:.95rem}
.tone-dark .step p,.tone-ink .step p{color:rgba(250,250,248,.72)}
/* Why / feature list */
.feature{padding:1.4rem;border-left:2px solid var(--bronze);background:#fff;border-radius:0 var(--radius) var(--radius) 0}
.tone-warm .feature{background:#fff}
.feature h3{font-size:1.15rem}
.feature p{font-size:.95rem;color:var(--muted);margin:0}
/* Pain / diff block */
.split{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.panel{padding:1.6rem;border-radius:var(--radius)}
.panel.bad{background:#fff;border:1px dashed var(--line-light)}
.panel.good{background:var(--ink);color:var(--paper)}
.panel.good h3{color:var(--bronze-light)}
.panel h3{font-size:1.12rem;margin-bottom:.7rem}
.panel ul{list-style:none;margin:0;padding:0;font-size:.96rem}
.panel ul li{padding-left:1.6rem;position:relative;margin-bottom:.5rem}
.panel.bad li::before{content:"✕";position:absolute;left:0;color:var(--muted-light);font-weight:700}
.panel.good li::before{content:"✓";position:absolute;left:0;color:var(--bronze);font-weight:700}
.panel.good ul li{color:rgba(250,250,248,.85)}
/* "What to send" checklist (Upitnik) */
.checklist{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.6rem}
.checklist li{display:flex;gap:.7rem;align-items:flex-start;font-size:.97rem}
.checklist li::before{content:"";width:20px;height:20px;border-radius:6px;flex:0 0 auto;margin-top:2px;
background:var(--bronze);
-webkit-mask:url("data:image/svg+xml;utf8,") center/16px no-repeat;
mask:url("data:image/svg+xml;utf8,") center/16px no-repeat}
/* ---------- FAQ (details/summary) ---------- */
.faq-list{display:grid;gap:.7rem;max-width:820px}
.faq-item{background:#fff;border:1px solid var(--line-light);border-radius:var(--radius-sm);overflow:hidden}
.faq-item[open]{border-color:var(--bronze)}
.faq-item summary{cursor:pointer;list-style:none;padding:1.05rem 1.3rem;font-weight:600;
font-size:1.03rem;display:flex;justify-content:space-between;gap:1rem;align-items:center}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";color:var(--bronze-deep);font-size:1.5rem;font-weight:400;
transition:transform var(--t);line-height:1}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item .faq-body{padding:0 1.3rem 1.2rem;color:var(--muted);font-size:.97rem}
/* ---------- Portfolio ---------- */
.port-card{display:flex;flex-direction:column;gap:.8rem}
.port-card .meta{display:flex;flex-wrap:wrap;gap:.4rem .8rem;font-size:.82rem;color:var(--muted)}
.port-card .meta .pill{background:var(--paper-warm);color:var(--bronze-deep);font-weight:600;
padding:.2em .6em;border-radius:5px;font-size:.74rem;letter-spacing:.03em}
.port-card h3{font-size:1.25rem;margin:0}
/* ---------- Form ---------- */
.form-wrap{background:#fff;border:1px solid var(--line-light);border-radius:var(--radius);
padding:clamp(1.4rem,3vw,2.2rem);box-shadow:var(--shadow-soft)}
.field{margin-bottom:1.05rem}
.field label{display:block;font-size:.88rem;font-weight:600;margin-bottom:.35rem;color:var(--ink)}
.field .req{color:var(--bronze-deep)}
.input,.select,.textarea{width:100%;font-family:var(--sans);font-size:1rem;color:var(--ink);
background:var(--paper);border:1.5px solid var(--line-light);border-radius:var(--radius-sm);
padding:.8em .95em;transition:border-color var(--t),box-shadow var(--t)}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--bronze);
box-shadow:0 0 0 3px rgba(196,160,114,.16)}
.textarea{min-height:130px;resize:vertical}
.check{display:flex;gap:.6rem;align-items:flex-start;font-size:.93rem;color:var(--muted);margin-bottom:1.1rem}
.check input{margin-top:4px;accent-color:var(--bronze-deep);width:18px;height:18px}
.form-note{font-size:.82rem;color:var(--muted-light);margin-top:.6rem}
/* ---------- Contact info strip ---------- */
.contact-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.contact-card{background:var(--graphite-2);border:1px solid var(--line-dark);border-radius:var(--radius);
padding:1.4rem;color:var(--paper)}
.contact-card .k{font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--bronze);margin-bottom:.4rem}
.contact-card a,.contact-card .v{font-size:1.05rem;color:#fff;font-weight:500;word-break:break-word}
/* ---------- CTA band ---------- */
.cta-band{background:
radial-gradient(700px 300px at 80% 0%,rgba(196,160,114,.18),transparent 60%),
linear-gradient(180deg,var(--ink),var(--graphite));color:var(--paper);text-align:center}
.cta-band h2{color:#fff}
.cta-band .lead{margin-inline:auto;color:rgba(250,250,248,.78)}
/* ---------- Breadcrumb ---------- */
.crumb{font-size:.85rem;color:var(--muted);padding-top:1.4rem}
.crumb a{color:var(--bronze-deep)}
.crumb span{color:var(--muted-light)}
/* ---------- Footer ---------- */
.site-footer{background:var(--ink);color:rgba(250,250,248,.7);padding-block:clamp(2.5rem,5vw,4rem) 1.5rem}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2rem;margin-bottom:2.2rem}
.site-footer h4{color:#fff;font-family:var(--sans);font-size:.82rem;letter-spacing:.12em;
text-transform:uppercase;margin-bottom:1rem}
.site-footer .brand{margin-bottom:.8rem}
.footer-links{list-style:none;margin:0;padding:0;display:grid;gap:.5rem;font-size:.93rem}
.footer-links a:hover{color:var(--bronze-light)}
.footer-contact{font-size:.93rem;display:grid;gap:.4rem}
.footer-contact a:hover{color:var(--bronze-light)}
.footer-bottom{border-top:1px solid var(--line-dark);padding-top:1.3rem;
display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem;font-size:.83rem;color:var(--muted-light)}
/* ---------- Generic content (prose) ---------- */
.prose p{max-width:68ch}
.prose h2{margin-top:2.2rem}
.prose ul{color:var(--muted)}
/* ---------- Pricing table ---------- */
.price-table{width:100%;border-collapse:collapse;font-size:.95rem;background:#fff;
border:1px solid var(--line-light);border-radius:var(--radius);overflow:hidden}
.price-table th,.price-table td{padding:.85rem 1rem;text-align:left;border-bottom:1px solid var(--line-light)}
.price-table thead th{background:var(--graphite);color:#fff;font-family:var(--sans);font-size:.82rem;
letter-spacing:.06em;text-transform:uppercase}
.price-table tbody tr:last-child td{border-bottom:0}
.price-table .from{color:var(--bronze-deep);font-weight:700;font-family:var(--serif)}
.table-scroll{overflow-x:auto}
/* ---------- Utility ---------- */
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.stack-sm{display:grid;gap:.4rem}
.badge{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
color:var(--bronze-deep);background:var(--paper-warm);padding:.3em .7em;border-radius:999px;margin-bottom:1rem}
.tone-dark .badge,.tone-ink .badge{background:rgba(196,160,114,.16);color:var(--bronze-light)}
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width:920px){
.hero-grid{grid-template-columns:1fr}
.hero-figure{order:-1}
.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}
.footer-grid{grid-template-columns:1fr 1fr}
.contact-cards{grid-template-columns:1fr}
}
@media (max-width:680px){
body{font-size:16px}
.nav-links,.nav-cta .btn{display:none}
.nav-toggle{display:flex}
.site-header.open .nav-links{display:flex;position:absolute;top:68px;left:0;right:0;
flex-direction:column;gap:0;background:var(--graphite);border-bottom:1px solid var(--line-dark);
padding:.5rem 0}
.site-header.open .nav-links li{width:100%}
.site-header.open .nav-links a{display:block;padding:.9rem clamp(1.1rem,4vw,2rem);width:100%;
border-bottom:1px solid var(--line-dark)}
.site-header.open .nav-links a::after{display:none}
.site-header.open .nav-cta{display:flex;position:absolute;top:68px;left:0;right:0;margin-top:0}
.grid-2,.grid-3,.grid-4,.split,.footer-grid{grid-template-columns:1fr}
.btn-row{flex-direction:column;align-items:stretch}
.btn-row .btn{justify-content:center}
}
/* ============================================================
R004A — HERO & POLISH PATCH (CSS-only, additive overrides)
Refs: Nordi (full-bleed hero, floating meta-card) + Inlux
(warm scrim, bronze two-tone heading) — principi, ne kod.
Skill: high-end-visual-design (Editorial Luxury).
SAFE: bez izmena HTML/IA/cena/schema/forme. Samo CSS.
============================================================ */
/* Premium easing globally */
:root{--t:.34s cubic-bezier(.32,.72,0,1)}
/* Film-grain overlay — fixed, non-interactive, inline SVG (no remote asset) */
body::after{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.04;
mix-blend-mode:overlay;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* Hero — richer warm bronze scrim + macro whitespace */
.hero{background:
radial-gradient(1200px 520px at 80% -10%,rgba(196,160,114,.20),transparent 62%),
linear-gradient(105deg,var(--ink) 0%,rgba(30,27,23,.92) 46%,var(--graphite) 100%)}
.hero-grid{min-height:clamp(520px,80dvh,820px);align-items:center}
/* Hero eyebrow as pill badge (scoped — ne dira druge sekcije) */
.hero .eyebrow{display:inline-block;border:1px solid var(--line-dark);
background:rgba(196,160,114,.10);color:var(--bronze-light);
padding:.42em .9em;border-radius:999px;margin-bottom:1.1rem}
/* Hero H1 — jači editorial tracking */
.hero h1{letter-spacing:-.022em}
/* Hero primary CTA — button-in-button trailing arrow (CSS-only) */
.hero .btn-primary::after{content:"\2197";display:inline-grid;place-items:center;
width:1.55em;height:1.55em;margin-left:.2em;margin-right:-.5em;border-radius:50%;
background:rgba(23,21,19,.16);font-size:.82em;line-height:1;transition:transform var(--t)}
.hero .btn-primary:hover::after{transform:translate(2px,-2px)}
/* Magnetic press on all buttons */
.btn:active{transform:scale(.975)}
/* Hero render-slot → premium framed "plate" (double-bezel) */
.hero-figure .render-slot{padding:.5rem;
background:linear-gradient(160deg,rgba(196,160,114,.10),rgba(30,27,23,.62));
border:1px solid var(--line-dark);box-shadow:0 30px 70px -30px rgba(0,0,0,.6)}
.hero-figure .render-slot::before{content:"";position:absolute;inset:.5rem;border-radius:10px;
border:1px solid rgba(255,255,255,.06);pointer-events:none}
/* Prevent overflow: allow grid children to shrink, H1 to wrap */
.hero-grid{min-width:0}
.hero-grid > *{min-width:0;max-width:100%}
.hero h1{overflow-wrap:break-word}
/* Mobile hero — tekst prvo, meta-kartica ispod */
@media (max-width:920px){
.hero-figure{order:0}
}
@media (max-width:680px){
.hero-grid{min-height:auto;padding-block:clamp(2.5rem,9vw,4rem)}
.hero h1{font-size:clamp(1.95rem,8vw,3rem)}
/* dugačko hero CTA sme da prelomi tekst (sprečava horizontalni overflow) */
.hero .btn-row .btn{white-space:normal;text-align:center;justify-content:center}
.hero .btn-primary::after{margin-right:0;margin-left:.35em}
}
/* ============================================================
R004B — SCENE-LED HOMEPAGE HERO + MOTION (scoped .hero-home)
Inspirisano Nordi/Inlux principima (image-led hero, plutajuće
meta-kartice, premium ritam) — original ARTA3D, bez tuđeg koda.
============================================================ */
.hero-home{position:relative;min-height:100dvh;display:flex;align-items:center;
overflow:hidden;isolation:isolate}
.hero-home .hero-inner{display:grid;grid-template-columns:1.02fr .98fr;
gap:clamp(2rem,5vw,4.5rem);align-items:center;width:100%;
padding-block:clamp(4.5rem,9vw,6.5rem)}
.hero-home .hero-orb{position:absolute;z-index:-1;top:-22%;right:-12%;
width:min(820px,72vw);height:min(820px,72vw);pointer-events:none;border-radius:50%;
background:radial-gradient(circle,rgba(196,160,114,.22),transparent 62%);
animation:orbDrift 16s ease-in-out infinite alternate}
/* Copy */
.hero-home h1{font-size:clamp(2.5rem,5.6vw,4.4rem);letter-spacing:-.028em;line-height:1.03;margin-bottom:.5em}
.hero-home .hero-sub{font-size:clamp(1.05rem,1.7vw,1.3rem);color:rgba(250,250,248,.78);max-width:46ch;margin-bottom:1.6rem}
.hero-home .hero-cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-bottom:.9rem}
.hero-home .btn-ghost{border-color:rgba(255,255,255,.45);color:#fff;background:rgba(255,255,255,.04)}
.hero-home .btn-ghost:hover{border-color:var(--bronze);color:var(--bronze-light);background:rgba(196,160,114,.08)}
.hero-home .hero-tertiary{font-size:.95rem;color:rgba(250,250,248,.62);margin:0 0 1.4rem}
.hero-home .hero-tertiary a{color:var(--bronze-light);text-decoration:underline;text-underline-offset:3px}
/* Stage composition */
.hero-stage{position:relative;min-height:clamp(360px,40vw,520px)}
.stage-parallax{position:absolute;inset:0;will-change:transform;
transition:transform .3s cubic-bezier(.32,.72,0,1)}
.stage-plate{position:absolute;inset:0;border-radius:calc(var(--radius) + 6px);overflow:hidden;
background:
radial-gradient(120% 90% at 32% 18%,rgba(196,160,114,.20),transparent 55%),
linear-gradient(155deg,#2B251D 0%,#1C1915 58%,#15120F 100%);
border:1px solid var(--line-dark);
box-shadow:0 50px 100px -45px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.05)}
.plate-rings{position:absolute;width:78%;left:50%;top:47%;transform:translate(-50%,-50%);
opacity:.55;transform-origin:center;animation:spin 60s linear infinite}
.plate-rings circle,.plate-rings line{fill:none;stroke:var(--bronze);stroke-width:1}
.plate-icon{position:absolute;left:50%;top:47%;transform:translate(-50%,-50%);
font-size:2.6rem;color:rgba(196,160,114,.45)}
.plate-sweep{position:absolute;top:0;left:-60%;width:55%;height:100%;pointer-events:none;
background:linear-gradient(100deg,transparent,rgba(255,247,235,.12),transparent);
transform:skewX(-12deg);animation:sweep 7s ease-in-out infinite}
.plate-tag{position:absolute;top:1rem;left:1rem;z-index:2;font-size:.66rem;font-weight:700;
letter-spacing:.12em;text-transform:uppercase;color:var(--ink);background:var(--bronze);
padding:.34em .7em;border-radius:5px}
.plate-caption{position:absolute;left:1.1rem;bottom:1.05rem;right:1.1rem;z-index:2;
font-size:.85rem;color:rgba(250,250,248,.6)}
/* Floating meta cards */
.hero-stage .meta-card{position:absolute;display:grid;gap:.15rem;padding:.95rem 1.15rem;z-index:3;
border-radius:14px;background:rgba(26,23,19,.74);backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);border:1px solid var(--line-dark);
box-shadow:0 26px 55px -26px rgba(0,0,0,.75)}
.meta-card .mc-k{font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--bronze)}
.meta-card strong{font-family:var(--serif);font-size:1.22rem;color:#fff;font-weight:600}
.meta-card .mc-sub{font-size:.78rem;color:rgba(250,250,248,.6)}
.meta-project{left:-5%;bottom:12%;animation:floatA 6.5s ease-in-out infinite}
.meta-price{right:-4%;top:9%;animation:floatB 7.5s ease-in-out infinite}
/* Scroll cue */
.scroll-cue{position:absolute;left:50%;bottom:1.4rem;transform:translateX(-50%);z-index:4;
display:grid;justify-items:center;gap:.55rem;color:rgba(250,250,248,.6);font-size:.7rem;
letter-spacing:.18em;text-transform:uppercase;transition:color var(--t)}
.scroll-cue:hover{color:var(--bronze-light)}
.cue-arrow{width:16px;height:16px;border-right:1.5px solid currentColor;
border-bottom:1.5px solid currentColor;animation:cue 1.8s ease-in-out infinite}
/* Dark hero → warm content transition */
.hero-transition{height:clamp(40px,6vw,84px);
background:linear-gradient(180deg,var(--ink) 0%,var(--paper-warm) 100%)}
/* Intro reveal — staggered, CSS-only (radi i bez JS-a) */
.hero-home .reveal{animation:heroIn .9s cubic-bezier(.32,.72,0,1) both}
.hero-home [data-reveal="1"]{animation-delay:.05s}
.hero-home [data-reveal="2"]{animation-delay:.14s}
.hero-home [data-reveal="3"]{animation-delay:.26s}
.hero-home [data-reveal="4"]{animation-delay:.4s}
.hero-home [data-reveal="5"]{animation-delay:.5s}
.hero-home [data-reveal="6"]{animation-delay:.58s}
@keyframes heroIn{from{opacity:0;transform:translateY(22px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes sweep{0%{left:-60%}55%,100%{left:120%}}
@keyframes floatA{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes floatB{0%,100%{transform:translateY(0)}50%{transform:translateY(13px)}}
@keyframes orbDrift{from{transform:translate(0,0)}to{transform:translate(-5%,4%)}}
@keyframes cue{0%,100%{transform:rotate(45deg) translate(0,0);opacity:.5}50%{transform:rotate(45deg) translate(3px,3px);opacity:1}}
/* Mobile hero-home */
@media (max-width:920px){
.hero-home{min-height:auto}
.hero-home .hero-inner{grid-template-columns:1fr;padding-block:clamp(3rem,8vw,4.5rem) 4rem}
.hero-home .hero-stage{order:0;min-height:clamp(320px,78vw,440px);margin-top:.6rem}
.meta-project{left:0;bottom:7%}
.meta-price{right:0;top:5%}
.scroll-cue{display:none}
}
@media (max-width:680px){
.hero-home h1{font-size:clamp(2.15rem,8.5vw,3rem)}
.hero-home .hero-cta .btn{flex:1 1 100%;justify-content:center;white-space:normal}
.hero-stage{min-height:300px}
.hero-stage .meta-card{padding:.7rem .9rem}
.meta-card strong{font-size:1.05rem}
}
/* ============================================================
R004C — NORDI LOOK: Montserrat headings/menu + full-bleed hero
Font: Montserrat (OFL, free). Hero kompozicija inspirisana
Nordi referencom — original ARTA3D kod, bez tuđih asseta.
============================================================ */
:root{--font-display:'Montserrat',var(--sans)}
h1,h2,h3,h4{font-family:var(--font-display);letter-spacing:-.012em}
.brand,.nav-links a{font-family:var(--font-display);letter-spacing:.01em}
/* ---- Nordi-style full-bleed hero (overrides R004B grid) ---- */
.hero-home{position:relative;min-height:100dvh;display:flex;align-items:center;overflow:hidden;isolation:isolate}
.hero-home .hero-inner{display:block;max-width:var(--maxw);width:100%;padding-block:0}
.hero-home .hero-copy{max-width:760px}
.hero-bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero-scene{position:absolute;inset:0;
background:
radial-gradient(120% 95% at 80% 16%,rgba(196,160,114,.24),transparent 55%),
linear-gradient(120deg,#16130F 0%,#221C15 55%,#15120F 100%)}
.hero-scene .plate-rings{position:absolute;right:-8%;left:auto;top:50%;
width:min(840px,74%);height:auto;transform:translateY(-50%);opacity:.42;
animation:spin 70s linear infinite}
.hero-scene .plate-rings circle,.hero-scene .plate-rings line{stroke:var(--bronze);stroke-width:1;fill:none}
.hero-scene .plate-sweep{position:absolute;top:0;left:-55%;width:60%;height:100%;pointer-events:none;
background:linear-gradient(100deg,transparent,rgba(255,247,235,.10),transparent);
transform:skewX(-12deg);animation:sweep 8s ease-in-out infinite}
.hero-scrim{position:absolute;inset:0;z-index:-1;
background:linear-gradient(100deg,rgba(18,16,13,.94) 0%,rgba(18,16,13,.80) 34%,rgba(18,16,13,.45) 68%,rgba(18,16,13,.22) 100%)}
.hero-home h1{text-transform:uppercase;font-weight:600;
font-size:clamp(2.6rem,7vw,5.4rem);line-height:1.0;letter-spacing:-.012em;margin-bottom:.42em}
.hero-home h1 em{font-style:normal;color:var(--bronze);font-family:var(--font-display)}
.hero-home .hero-sub{max-width:44ch;margin-bottom:1.6rem}
.hero-home .hero-cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-bottom:.9rem}
.hero-home .btn-ghost{border-color:rgba(255,255,255,.45);color:#fff;background:rgba(255,255,255,.04)}
.hero-home .btn-ghost:hover{border-color:var(--bronze);color:var(--bronze-light);background:rgba(196,160,114,.08)}
.hero-home .hero-tertiary{font-size:.95rem;color:rgba(250,250,248,.64);margin:0}
.hero-home .hero-tertiary a{color:var(--bronze-light);text-decoration:underline;text-underline-offset:3px}
/* Nordi-style floating meta card (bottom-right) */
.hero-card{position:absolute;right:clamp(1rem,4vw,3.2rem);bottom:clamp(1.6rem,5vw,3rem);z-index:3;
display:flex;align-items:center;gap:1rem;max-width:330px;padding:.8rem;border-radius:16px;
background:rgba(22,19,15,.66);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
border:1px solid var(--line-dark);box-shadow:0 30px 62px -28px rgba(0,0,0,.8)}
.hero-card .hc-thumb{position:relative;width:94px;height:74px;flex:0 0 auto;border-radius:11px;
display:grid;place-items:center;color:rgba(196,160,114,.6);font-size:1.7rem;overflow:hidden;
background:linear-gradient(150deg,#2B251D,#15120F);border:1px solid var(--line-dark)}
.hero-card .hc-thumb .plate-tag{position:absolute;top:.4rem;left:.4rem;font-size:.52rem;padding:.2em .45em}
.hero-card .hc-body{display:grid;gap:.18rem}
.hero-card .hc-body strong{font-family:var(--font-display);font-size:1.02rem;color:#fff;font-weight:600}
.hero-card .hc-body span{font-size:.79rem;color:rgba(250,250,248,.66)}
@media (min-width:921px){.hero-card{animation:floatA 7s ease-in-out infinite}}
@media (max-width:920px){
.hero-home{min-height:auto}
.hero-home .hero-inner{padding-block:clamp(3.4rem,9vw,5rem) 0}
.hero-card{position:static;margin:1.7rem 0 0;max-width:none;width:100%}
.hero-scene .plate-rings{right:-32%;opacity:.3}
.scroll-cue{display:none}
}
@media (max-width:680px){
.hero-home h1{font-size:clamp(2.05rem,9vw,3.2rem)}
.hero-home .hero-cta .btn{flex:1 1 100%;justify-content:center;white-space:normal}
}
/* ============================================================
R004D — bliže Nordi/Inlux: centriran meni + hero 01/02/03 rail
============================================================ */
@media (min-width:681px){
.site-header .nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.site-header .nav .brand{grid-column:1;justify-self:start}
.site-header .nav .nav-links{grid-column:2;justify-self:center}
.site-header .nav .nav-cta{grid-column:3;justify-self:end}
}
/* Inlux-style numbered rail u hero-u */
.hero-rail{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,3vw,2.4rem);
margin-top:2.2rem;max-width:760px;border-top:1px solid var(--line-dark);padding-top:1.4rem}
.hero-rail .rail-item{display:grid;gap:.3rem}
.hero-rail .rail-n{font-family:var(--font-display);font-size:.95rem;font-weight:700;
color:var(--bronze);letter-spacing:.04em}
.hero-rail .rail-t{font-size:.9rem;color:rgba(250,250,248,.82);line-height:1.35}
@media (max-width:680px){
.hero-rail{grid-template-columns:1fr;gap:.85rem;margin-top:1.6rem;padding-top:1.1rem}
.hero-rail .rail-item{grid-template-columns:auto 1fr;gap:.7rem;align-items:baseline}
}
/* ============================================================
R004F — MOTION EXPERIENCE LAYER (vanilla JS + CSS, no libs)
Skill: high-end-visual-design (Section 5 Motion Choreography)
Sve transform/opacity, bez layout shift-a, reduced-motion safe.
============================================================ */
:root{--mo-ease:cubic-bezier(.32,.72,0,1)}
/* Header gentle load-in */
@keyframes headerIn{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
.site-header{animation:headerIn .7s var(--mo-ease) both}
/* Scroll reveal — JS dodaje .reveal-init (skriveno) pa .reveal-on (vidljivo) */
.reveal-init{opacity:0;transform:translateY(28px);
transition:opacity .7s var(--mo-ease),transform .7s var(--mo-ease);will-change:opacity,transform}
.reveal-on{opacity:1;transform:none}
/* Hero scene bleed da parallax nikad ne otkrije ivice */
.hero-scene{inset:-6%}
/* CTA light-sweep microinteraction */
.btn-primary{position:relative;overflow:hidden}
.btn-primary::before{content:"";position:absolute;inset:0;pointer-events:none;transform:translateX(-130%);
background:linear-gradient(100deg,transparent 28%,rgba(255,255,255,.28),transparent 72%);
transition:transform .65s var(--mo-ease)}
.btn-primary:hover::before{transform:translateX(130%)}
/* Render-slot / portfolio hover */
.render-slot{transition:transform .5s var(--mo-ease),border-color .4s,box-shadow .4s}
.port-card:hover .render-slot{transform:scale(1.02);border-color:var(--bronze);
box-shadow:0 26px 60px -30px rgba(0,0,0,.5)}
/* Hero rail hover glow (01/02/03) */
.hero-rail .rail-item{transition:transform .3s var(--mo-ease)}
.hero-rail .rail-item:hover{transform:translateY(-3px)}
.hero-rail .rail-item:hover .rail-n{color:var(--bronze-light);text-shadow:0 0 18px rgba(196,160,114,.55)}
/* Keep focus ring visible (a11y) */
.btn:focus-visible,.nav-links a:focus-visible,.card-link:focus-visible{outline:2px solid var(--bronze);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
*{transition:none!important;scroll-behavior:auto!important}
.hero-home .reveal,.plate-rings,.plate-sweep,.hero-card,.hero-orb,.cue-arrow,
.site-header{animation:none!important}
.hero-home .reveal{opacity:1!important;transform:none!important;filter:none!important}
.reveal-init{opacity:1!important;transform:none!important}
.btn-primary::before{display:none!important}
}
/* ============================================================
R004G — BLACK PREMIUM · INLUX / NORDI REBUILD (2026-05-30)
Smer: duboka crna / graphite + kontrolisan bronze accent.
Reverse-engineering PONAŠANJA Nordi (full-bleed assembly hero,
plutajuće glass kartice) i Inlux (graphite #121212, two-tone
uppercase heading, bronze accent #BB8661, numbered rail,
bronze star markeri, scroll reveal). Original ARTA3D kod/SVG —
bez tuđih slika, fontova, klasa ili generisanog koda.
Skill: high-end-visual-design (Ethereal Glass + Editorial Luxury).
Ovaj sloj je dodatni override — re-skinuje SVE strane na dark.
============================================================ */
:root{
/* — Black premium palette — */
--bg:#0B0B0D; /* page base, near-black */
--bg-1:#101013; /* alternating section */
--bg-2:#15151A; /* raised surface / cards */
--bg-3:#1B1B21; /* hover / nested */
--glass:rgba(20,20,25,.62);
--hair:rgba(255,255,255,.09);
--hair-soft:rgba(255,255,255,.055);
--hair-bronze:rgba(196,160,114,.26);
/* bronze stays, used controlled */
--bronze:#C4A072;
--bronze-light:#E0C79E;
--bronze-deep:#A8855A;
--champagne:#EADFC9;
/* text */
--ink:#F3F1EC; /* off-white default */
--text-strong:#FFFFFF;
--muted:#9D988D; /* warm gray body */
--muted-2:#6E6A61;
--muted-light:#B6B1A6;
--line-light:var(--hair);
--line-dark:var(--hair-bronze);
--paper:var(--bg);
--paper-warm:var(--bg-1);
--graphite:var(--bg-2);
--graphite-2:var(--bg-2);
--graphite-3:var(--bg-3);
--radius:16px;--radius-sm:11px;
--shadow:0 40px 90px -45px rgba(0,0,0,.85);
--shadow-soft:0 26px 60px -34px rgba(0,0,0,.7);
--t:.34s cubic-bezier(.32,.72,0,1);
--mo-ease:cubic-bezier(.32,.72,0,1);
}
/* ---- Base ---- */
body{background:var(--bg);color:var(--ink)}
body::after{opacity:.05;mix-blend-mode:soft-light} /* keep grain subtle */
h1,h2,h3,h4{color:var(--text-strong)}
.lead{color:var(--muted)}
.muted{color:var(--muted)}
.eyebrow{color:var(--bronze)}
a{color:inherit}
/* Selection */
::selection{background:rgba(196,160,114,.28);color:#fff}
/* ---- Section rhythm: deep black with alternating graphite + hairline ---- */
.section{position:relative;background:var(--bg)}
.tone-paper{background:var(--bg)}
.tone-warm{background:var(--bg-1)}
.tone-ink{background:var(--bg)}
.tone-dark{background:var(--bg-1);color:var(--ink)}
.section + .section::before,.tone-warm::before,.tone-ink::before{
content:"";position:absolute;top:0;left:0;right:0;height:1px;
background:linear-gradient(90deg,transparent,var(--hair),transparent)}
.tone-paper h1,.tone-paper h2,.tone-paper h3,
.tone-warm h1,.tone-warm h2,.tone-warm h3,
.tone-ink h2,.tone-ink h3,.tone-dark h2,.tone-dark h3{color:var(--text-strong)}
.tone-paper .lead,.tone-warm .lead,.tone-ink .lead,.tone-dark .lead{color:var(--muted)}
.tone-paper .eyebrow,.tone-warm .eyebrow,.tone-ink .eyebrow,.tone-dark .eyebrow{color:var(--bronze)}
/* ---- Section head: Inlux bordered eyebrow + bronze star marker ---- */
.section-head .eyebrow{display:inline-flex;align-items:center;gap:.6em;
border:1px solid var(--hair-bronze);background:rgba(196,160,114,.07);
padding:.46em 1em .46em .85em;border-radius:999px;color:var(--bronze-light);margin-bottom:1.1rem}
.section-head .eyebrow::before{content:"";width:13px;height:13px;flex:0 0 auto;
background:var(--bronze);
-webkit-mask:var(--star-mask) center/contain no-repeat;mask:var(--star-mask) center/contain no-repeat}
:root{--star-mask:url("data:image/svg+xml;utf8,")}
.section-head h2{position:relative}
.section-head h2 em,.hero-home h1 em{font-style:normal;color:var(--bronze)}
/* ---- Buttons ---- */
.btn-primary{background:var(--bronze);color:#15110B}
.btn-primary:hover{background:var(--bronze-light)}
.btn-ghost{background:rgba(255,255,255,.03);color:var(--ink);border-color:var(--hair)}
.btn-ghost:hover{border-color:var(--bronze);color:var(--bronze-light);background:rgba(196,160,114,.07)}
/* ---- Header: near-black glass ---- */
.site-header{background:rgba(10,10,13,.7);border-bottom:1px solid var(--hair-soft);
backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%)}
.brand{color:#fff}
.brand .mark{background:linear-gradient(135deg,var(--bronze),var(--bronze-deep));color:#15110B}
.nav-links a{color:rgba(243,241,236,.74)}
.nav-links a:hover{color:#fff}
/* ---- Cards → dark glass with double-bezel hairline ---- */
.card,.svc-card{background:linear-gradient(180deg,var(--bg-2),var(--bg-1));
border:1px solid var(--hair);box-shadow:inset 0 1px 0 rgba(255,255,255,.04);color:var(--ink)}
.tone-warm .card,.tone-paper .card{background:linear-gradient(180deg,var(--bg-2),var(--bg-1))}
.card:hover,.svc-card:hover{border-color:var(--hair-bronze);box-shadow:var(--shadow-soft);
transform:translateY(-5px)}
.card h3,.svc-card h3{color:#fff}
.card .who,.card .price{color:var(--bronze-light)}
.card .price small{color:var(--muted)}
.card ul{color:var(--muted)}
.card-link{color:var(--bronze-light)}
.svc-card .svc-ico{background:rgba(196,160,114,.1);color:var(--bronze-light)}
.svc-badge{background:rgba(196,160,114,.12);color:var(--bronze-light)}
/* feature ticks */
.feature{background:linear-gradient(180deg,var(--bg-2),var(--bg-1));
border-left:2px solid var(--bronze);border-radius:0 var(--radius) var(--radius) 0}
.feature h3{color:#fff}.feature p{color:var(--muted)}
/* split / pain panels */
.panel.bad{background:rgba(255,255,255,.02);border:1px dashed var(--hair)}
.panel.bad h3{color:var(--muted-light)}
.panel.bad li{color:var(--muted)}
.panel.bad li::before{color:var(--muted-2)}
.panel.good{background:linear-gradient(155deg,rgba(196,160,114,.14),var(--bg-2));
border:1px solid var(--hair-bronze)}
.panel.good h3{color:var(--bronze-light)}
/* steps */
.step{background:linear-gradient(180deg,var(--bg-2),var(--bg-1));border:1px solid var(--hair)}
.step h3{color:#fff}.step p{color:var(--muted)}
.step .num{background:var(--bronze);color:#15110B}
/* checklist */
.checklist li{color:var(--ink)}
/* faq */
.faq-item{background:linear-gradient(180deg,var(--bg-2),var(--bg-1));border:1px solid var(--hair)}
.faq-item[open]{border-color:var(--hair-bronze)}
.faq-item summary{color:var(--ink)}
.faq-item summary::after{color:var(--bronze)}
.faq-item .faq-body{color:var(--muted)}
/* forms */
.form-wrap{background:linear-gradient(180deg,var(--bg-2),var(--bg-1));border:1px solid var(--hair);
box-shadow:var(--shadow-soft)}
.field label{color:var(--ink)}
.input,.select,.textarea{background:rgba(255,255,255,.03);border:1.5px solid var(--hair);color:var(--ink)}
.input:focus,.select:focus,.textarea:focus{border-color:var(--bronze);
box-shadow:0 0 0 3px rgba(196,160,114,.18)}
.input::placeholder,.textarea::placeholder{color:var(--muted-2)}
.check{color:var(--muted)}.form-note{color:var(--muted-2)}
/* contact strip */
.contact-card{background:linear-gradient(180deg,var(--bg-2),var(--bg-1));border:1px solid var(--hair)}
/* portfolio meta */
.port-card h3{color:#fff}
.port-card .meta{color:var(--muted)}
.port-card .meta .pill{background:rgba(196,160,114,.12);color:var(--bronze-light)}
/* badges / pills generic */
.badge{background:rgba(196,160,114,.12);color:var(--bronze-light)}
/* price table */
.price-table{background:var(--bg-2);border:1px solid var(--hair)}
.price-table th,.price-table td{border-bottom:1px solid var(--hair);color:var(--ink)}
.price-table thead th{background:var(--bg-3);color:#fff}
.price-table .from{color:var(--bronze-light)}
/* breadcrumb */
.crumb{color:var(--muted)}.crumb a{color:var(--bronze-light)}
/* render-slot tuned darker */
.render-slot{background:
repeating-linear-gradient(45deg,rgba(196,160,114,.05) 0 16px,transparent 16px 32px),
linear-gradient(150deg,var(--bg-3),var(--bg-1));border:1px solid var(--hair)}
/* ---- Footer ---- */
.site-footer{background:#070708;color:rgba(243,241,236,.62);border-top:1px solid var(--hair-soft)}
.site-footer h4{color:#fff}
.footer-bottom{border-top:1px solid var(--hair-soft);color:var(--muted-2)}
/* ---- CTA band ---- */
.cta-band{background:
radial-gradient(800px 360px at 80% -10%,rgba(196,160,114,.16),transparent 62%),
linear-gradient(180deg,var(--bg-1),var(--bg));border-top:1px solid var(--hair-soft)}
.cta-band .lead{color:var(--muted)}
/* ============================================================
R004G — HERO: black premium scene + INTERIOR ASSEMBLY
============================================================ */
.hero-home{background:var(--bg)}
/* explicit z-ladder: scene bg(0) < assembly(1) < scrim(2) < grain(3); all inside hero-bg(z-2), under copy */
.hero-scene{inset:-6%;background:none;z-index:0}
.hero-scene::before{content:"";position:absolute;inset:0;z-index:0;background:
radial-gradient(130% 100% at 82% 34%,rgba(196,160,114,.14),transparent 56%),
radial-gradient(90% 90% at 50% 122%,rgba(0,0,0,.6),transparent 60%),
linear-gradient(120deg,#0A0A0C 0%,#121016 52%,#0A0A0C 100%)}
/* scrim keeps left copy readable; near-clear on right so assembly reads */
.hero-scrim{position:absolute;inset:0;z-index:2;background:
linear-gradient(100deg,rgba(8,8,10,.96) 0%,rgba(8,8,10,.8) 34%,rgba(8,8,10,.28) 64%,rgba(8,8,10,0) 100%)}
.hero-grain{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.5;
background:radial-gradient(120% 90% at 80% 20%,transparent 55%,rgba(0,0,0,.4) 100%)}
.hero-home h1{color:#fff}
.hero-home h1 em{color:var(--bronze)}
.hero-home .hero-sub{color:rgba(243,241,236,.8)}
.hero-home .eyebrow{display:inline-flex;align-items:center;gap:.6em;border:1px solid var(--hair-bronze);
background:rgba(196,160,114,.08);color:var(--bronze-light);padding:.46em 1em;border-radius:999px;margin-bottom:1.2rem}
.hero-home .eyebrow::before{content:"";width:12px;height:12px;flex:0 0 auto;background:var(--bronze);
-webkit-mask:var(--star-mask) center/contain no-repeat;mask:var(--star-mask) center/contain no-repeat}
/* Assembly stage — right half of hero, behind scrim */
.asm-stage{position:absolute;top:50%;right:6%;transform:translateY(-50%);
width:min(620px,46vw);height:min(560px,66vh);z-index:1}
.asm{position:absolute;will-change:transform,opacity}
/* bronze sun glow */
.asm-sun{width:82%;height:82%;left:16%;top:6%;border-radius:50%;
background:radial-gradient(circle,rgba(196,160,114,.62),rgba(196,160,114,.12) 46%,transparent 70%);
filter:blur(4px);animation:asmBreathe 9s ease-in-out infinite}
/* measurement rings */
.asm-rings{width:98%;height:98%;left:1%;top:1%;opacity:.7}
.asm-rings circle,.asm-rings line{fill:none;stroke:var(--bronze);stroke-width:1.1;opacity:.7}
.asm-rings .asm-tick{fill:var(--bronze-light);stroke:none;opacity:1}
/* back wall panel */
.asm-wall{right:4%;top:6%;width:62%;height:64%;border-radius:18px;
background:linear-gradient(160deg,#2E2719,#19150F 72%);border:1px solid rgba(196,160,114,.4);
box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 40px 80px -40px rgba(0,0,0,.8)}
/* floor plane (trapezoid via clip-path) */
.asm-floor{left:6%;bottom:4%;width:84%;height:34%;
clip-path:polygon(16% 0,84% 0,100% 100%,0 100%);transform-origin:bottom center;
background:linear-gradient(180deg,#1A1813,#0E0C09);border-top:1px solid var(--hair-bronze)}
/* floorplan svg overlay */
.asm-plan{left:8%;bottom:9%;width:50%;height:auto;opacity:1}
.asm-plan rect,.asm-plan line,.asm-plan path{fill:none;stroke:var(--bronze-light);stroke-width:1.6;opacity:.92}
.asm-plan .asm-dim{stroke:var(--bronze-light);stroke-width:1;opacity:.6}
.asm-plan .asm-door{opacity:.8}
/* window frame on wall */
.asm-window{right:9%;top:13%;width:23%;height:30%;border-radius:6px;
background:linear-gradient(180deg,rgba(196,160,114,.18),rgba(196,160,114,.04));
border:1.5px solid var(--hair-bronze);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.03)}
.asm-window::before,.asm-window::after{content:"";position:absolute;background:var(--hair-bronze)}
.asm-window::before{left:50%;top:6%;bottom:6%;width:1.5px;transform:translateX(-50%)}
.asm-window::after{top:50%;left:6%;right:6%;height:1.5px;transform:translateY(-50%)}
/* rug */
.asm-rug{left:14%;bottom:8%;width:56%;height:13%;border-radius:50%;
background:radial-gradient(closest-side,rgba(196,160,114,.16),transparent);transform-origin:center}
/* sofa */
.asm-sofa{left:16%;bottom:13%;width:46%;height:17%;border-radius:13px 13px 9px 9px;
background:linear-gradient(180deg,#3E331F,#241D13);border:1px solid rgba(196,160,114,.45);
box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 18px 30px -16px rgba(0,0,0,.7)}
.asm-sofa::before{content:"";position:absolute;left:-3%;right:-3%;top:-46%;height:60%;
border-radius:12px 12px 0 0;background:linear-gradient(180deg,#473922,#2E2515);
border:1px solid rgba(196,160,114,.45);border-bottom:0}
/* coffee table */
.asm-table{left:30%;bottom:9%;width:22%;height:6%;border-radius:50%;
background:linear-gradient(180deg,#32291A,#1B160F);border:1px solid rgba(196,160,114,.4)}
/* floor lamp: stem + shade */
.asm-lamp{right:12%;bottom:13%;width:2px;height:30%;background:var(--hair-bronze)}
.asm-lamp::before{content:"";position:absolute;left:50%;top:-16px;width:30px;height:20px;
transform:translateX(-50%);border-radius:6px 6px 14px 14px;
background:linear-gradient(180deg,rgba(224,199,158,.85),rgba(196,160,114,.35));
box-shadow:0 0 28px 6px rgba(196,160,114,.4)}
/* material swatches (top-right palette) */
.asm-swatch{right:2%;width:30%;height:5%;border-radius:999px;border:1px solid var(--hair);
box-shadow:0 10px 22px -12px rgba(0,0,0,.7)}
.asm-swatch-1{top:1%;background:linear-gradient(90deg,var(--bronze),var(--bronze-deep))}
.asm-swatch-2{top:9%;width:24%;background:linear-gradient(90deg,var(--champagne),#A99B82)}
.asm-swatch-3{top:17%;width:20%;background:linear-gradient(90deg,#3A332A,#211C15)}
/* sweep light bar over stage */
.asm-stage .plate-sweep{top:0;left:-60%;width:55%;height:100%;
background:linear-gradient(100deg,transparent,rgba(255,247,235,.1),transparent);
transform:skewX(-12deg);animation:sweep 8s ease-in-out infinite;animation-delay:2s}
/* ---- ASSEMBLY ENTRANCE (plays on load, staggered) ---- */
.asm{opacity:0;animation-duration:.95s;animation-timing-function:var(--mo-ease);
animation-fill-mode:both}
.asm-sun{animation-name:asmPop}
.asm-rings{animation-name:asmRingsIn}
.asm-wall{animation-name:asmDrop}
.asm-floor{animation-name:asmGrow}
.asm-plan{animation-name:asmFade}
.asm-window{animation-name:asmDrop}
.asm-rug{animation-name:asmWide}
.asm-sofa{animation-name:asmRise}
.asm-table{animation-name:asmDrop}
.asm-lamp{animation-name:asmRight}
.asm-swatch{animation-name:asmRight}
/* delays via data-asm order */
[data-asm="0"]{animation-delay:.15s}[data-asm="1"]{animation-delay:.28s}
[data-asm="2"]{animation-delay:.42s}[data-asm="3"]{animation-delay:.54s}
[data-asm="4"]{animation-delay:.66s}[data-asm="5"]{animation-delay:.78s}
[data-asm="6"]{animation-delay:.86s}[data-asm="7"]{animation-delay:.96s}
[data-asm="8"]{animation-delay:1.06s}[data-asm="9"]{animation-delay:1.16s}
[data-asm="10"]{animation-delay:1.24s}[data-asm="11"]{animation-delay:1.32s}
[data-asm="12"]{animation-delay:1.4s}
/* sun/rings keep idle anim AFTER entrance via fill — re-trigger idle on sun only */
.asm-sun{animation:asmPop .95s var(--mo-ease) both,asmBreathe 9s ease-in-out 1.3s infinite}
@keyframes asmPop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
@keyframes asmRingsIn{from{opacity:0;transform:scale(.82)}to{opacity:.5;transform:scale(1)}}
@keyframes asmDrop{from{opacity:0;transform:translateY(-36px)}to{opacity:1;transform:none}}
@keyframes asmRise{from{opacity:0;transform:translateY(52px)}to{opacity:1;transform:none}}
@keyframes asmGrow{from{opacity:0;transform:scaleY(.5)}to{opacity:1;transform:scaleY(1)}}
@keyframes asmWide{from{opacity:0;transform:scaleX(.45)}to{opacity:1;transform:scaleX(1)}}
@keyframes asmRight{from{opacity:0;transform:translateX(52px)}to{opacity:1;transform:none}}
@keyframes asmFade{from{opacity:0;transform:translateY(14px)}to{opacity:.85;transform:none}}
@keyframes asmBreathe{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.05);opacity:1}}
/* ---- Hero floating chip (second card) ---- */
.hero-chip{position:absolute;right:clamp(1rem,5vw,4rem);top:clamp(7rem,20vh,11rem);z-index:3;
display:grid;gap:.1rem;padding:.7rem 1rem;border-radius:13px;
background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
border:1px solid var(--hair-bronze);box-shadow:var(--shadow-soft)}
.hero-chip-k{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--bronze)}
.hero-chip-v{font-family:var(--font-display);font-weight:700;color:#fff;font-size:1.05rem}
@media (min-width:921px){.hero-chip{animation:floatB 8s ease-in-out infinite}}
.hero-card{background:var(--glass);border:1px solid var(--hair-bronze)}
.hero-card .hc-body strong{color:#fff}
.hero-card .hc-thumb{background:linear-gradient(150deg,#241E15,#0E0C09);border:1px solid var(--hair-bronze)}
/* hero rail tuned */
.hero-rail{border-top:1px solid var(--hair-bronze)}
.hero-rail .rail-n{color:var(--bronze)}
.hero-rail .rail-t{color:rgba(243,241,236,.82)}
/* ---- Scroll reveal: add mask/clip reveal variant (Inlux) ---- */
.reveal-init{opacity:0;transform:translateY(30px) scale(.985);filter:blur(2px);
transition:opacity .8s var(--mo-ease),transform .8s var(--mo-ease),filter .8s var(--mo-ease)}
.reveal-on{opacity:1;transform:none;filter:none}
.mask-init{clip-path:inset(0 100% 0 0);transition:clip-path 1s var(--mo-ease),opacity .6s}
.mask-on{clip-path:inset(0 0 0 0)}
/* animated underline under section-head h2 */
.section-head h2::after{content:"";display:block;width:0;height:2px;margin-top:.7rem;
background:linear-gradient(90deg,var(--bronze),transparent);transition:width 1s var(--mo-ease) .15s}
.section-head.center h2::after{margin-inline:auto}
.section-head.reveal-on h2::after,.reveal-on .section-head h2::after{width:clamp(54px,10vw,120px)}
/* ---- Mobile: assembly recedes so text stays readable ---- */
@media (max-width:920px){
.hero-scrim{background:linear-gradient(180deg,rgba(8,8,10,.7) 0%,rgba(8,8,10,.92) 60%,var(--bg) 100%)}
.asm-stage{right:-6%;top:38%;width:min(440px,86vw);height:min(360px,52vh);opacity:.5}
.hero-chip{display:none}
.hero-transition{display:none}
}
@media (max-width:680px){
.asm-stage{opacity:.36}
.section-head .eyebrow,.hero-home .eyebrow{padding:.42em .8em}
}
/* dark hero → first dark section transition (was warm) */
.hero-transition{height:clamp(30px,5vw,60px);
background:linear-gradient(180deg,var(--bg),var(--bg))}
/* ---- reduced motion: freeze assembly fully visible ---- */
@media (prefers-reduced-motion:reduce){
.asm{opacity:1!important;transform:none!important;animation:none!important}
.asm-rings{opacity:.5!important}.asm-plan{opacity:.85!important}
.asm-sun{opacity:.9!important}
.asm-stage .plate-sweep,.hero-chip,.hero-card{animation:none!important}
.mask-init{clip-path:none!important}
.section-head h2::after{transition:none!important}
}
/* ============================================================
R005A — READ-MORE / EXPANDABLE DEPTH (native details/summary)
Bez biblioteka, pristupačno (tastatura + screen reader native),
SEO tekst je u HTML-u (ne učitava se remote). Black premium skin.
Skill: emil-design-eng (toggle micro-interaction, 44px target),
UI_UX_PRO_MAX checklist (kontrast, tap target ≥44px).
============================================================ */
.read-more{margin:1.4rem 0 0;border-top:1px solid var(--hair-soft);padding-top:1.1rem}
.read-more > summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.55em;
min-height:44px;padding:.5em .1em;font-family:var(--font-display);font-weight:600;font-size:.95rem;
letter-spacing:.01em;color:var(--bronze-light);transition:color var(--t);user-select:none}
.read-more > summary::-webkit-details-marker{display:none}
.read-more > summary:hover{color:var(--champagne)}
.read-more > summary:focus-visible{outline:2px solid var(--bronze);outline-offset:4px;border-radius:6px}
.read-more > summary .rm-ico{width:22px;height:22px;flex:0 0 auto;border-radius:50%;
border:1px solid var(--hair-bronze);display:grid;place-items:center;position:relative;
background:rgba(196,160,114,.08);transition:transform var(--t),background var(--t)}
.read-more > summary .rm-ico::before,.read-more > summary .rm-ico::after{content:"";position:absolute;
background:var(--bronze-light);transition:opacity var(--t)}
.read-more > summary .rm-ico::before{width:10px;height:1.5px}
.read-more > summary .rm-ico::after{width:1.5px;height:10px}
.read-more[open] > summary .rm-ico{transform:rotate(90deg);background:rgba(196,160,114,.16)}
.read-more[open] > summary .rm-ico::after{opacity:0}
.read-more[open] > summary .rm-label-more{display:none}
.read-more:not([open]) > summary .rm-label-less{display:none}
.read-more .rm-body{padding-top:.9rem;animation:rmIn .5s var(--mo-ease) both}
.read-more .rm-body > *:first-child{margin-top:0}
.read-more .rm-body h4{font-family:var(--font-display);font-size:1.02rem;color:#fff;margin:1.1rem 0 .4rem}
.read-more .rm-body p,.read-more .rm-body li{color:var(--muted)}
.read-more .rm-body ul{padding-left:1.1rem;margin:.4rem 0 1rem}
.read-more .rm-body li{margin-bottom:.35rem}
@keyframes rmIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.read-more .rm-body{animation:none!important}}
/* ============================================================
R006B — NORDI CINEMATIC HOMEPAGE RHYTHM (2026-05-30)
Reverse-engineering ritma iz Nordi snimka (originalni ARTA3D
kod/SVG — bez tuđih slika/koda/asseta). Recept:
- ogromni uppercase naslovi + veliki crni negativni prostor
- scene koje ulaze (slide/scale/mask) + blagi parallax + stagger
- „philosophy" scena: centralni naslov + dve bočne render kartice
- numerisana hairline mreža (01/02/03) sa „+" marker motivom
- full-bleed showcase blokovi sa overlay + mini CTA
Sve transform/opacity/clip-path. prefers-reduced-motion safe.
============================================================ */
:root{--mo-ease:cubic-bezier(.32,.72,0,1);--pad-scene:clamp(5rem,12vw,10rem)}
/* --- Cinematic scene sekcije: više vazduha (Nordi negativni prostor) --- */
/* overflow-x:clip sprečava horizontalni scroll od reveal translateX-a (ne lomi sticky header) */
.scene{padding-block:var(--pad-scene);position:relative;overflow-x:clip}
.scene-dark{background:var(--bg)}
.scene-darker{background:#070708}
/* --- Ogromni uppercase naslovi (Nordi/Inlux scale) --- */
.section-head.xl{max-width:none}
.section-head.xl h2{font-size:clamp(2.3rem,6.4vw,5.2rem);line-height:1.0;letter-spacing:-.025em;
text-transform:uppercase;font-weight:600}
.section-head.xl .lead{font-size:clamp(1.05rem,1.7vw,1.35rem)}
.section-head.xl.center{margin-inline:auto}
.section-head.xl.center .lead{margin-inline:auto}
.section-head .kicker{display:inline-flex;align-items:center;gap:.55em;border:1px solid var(--hair-bronze);
background:rgba(196,160,114,.07);color:var(--bronze-light);padding:.45em 1em;border-radius:999px;
font-size:.72rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;margin-bottom:1.3rem}
.section-head .kicker::before{content:"";width:12px;height:12px;background:var(--bronze);
-webkit-mask:var(--star-mask) center/contain no-repeat;mask:var(--star-mask) center/contain no-repeat}
/* corner „+" crosshair markeri oko scene (Nordi motiv) */
.framed{position:relative}
.framed::before,.framed::after{content:"";position:absolute;width:100%;height:100%;left:0;top:0;
pointer-events:none;background:
linear-gradient(var(--bronze),var(--bronze)) left 0 top 14px/1px 13px no-repeat,
linear-gradient(var(--bronze),var(--bronze)) left 14px top 0/13px 1px no-repeat;opacity:.5}
.framed::after{transform:scaleX(-1)}
.framed > .fr-b{position:absolute;left:0;bottom:0;width:100%;height:100%;pointer-events:none;
background:
linear-gradient(var(--bronze),var(--bronze)) left 0 bottom 14px/1px 13px no-repeat,
linear-gradient(var(--bronze),var(--bronze)) left 14px bottom 0/13px 1px no-repeat;opacity:.5}
.framed > .fr-b::after{content:"";position:absolute;inset:0;transform:scaleX(-1);
background:
linear-gradient(var(--bronze),var(--bronze)) left 0 bottom 14px/1px 13px no-repeat,
linear-gradient(var(--bronze),var(--bronze)) left 14px bottom 0/13px 1px no-repeat}
/* ============================================================
PHILOSOPHY SCENE — centralni naslov + dve bočne render kartice
============================================================ */
.philo{display:grid;grid-template-columns:minmax(0,1fr) minmax(min(520px,46vw),2.1fr) minmax(0,1fr);
gap:clamp(1rem,3vw,2.4rem);align-items:center}
.philo .philo-mid{text-align:center;padding-block:clamp(1rem,3vw,2.5rem)}
.philo .philo-side{align-self:stretch;min-height:clamp(220px,30vw,440px)}
/* fill kolonu bez aspect-ratio (ratio-4x3 bi izveo širinu iz visine → overflow);
bočne kartice se otkrivaju slide-om wrappera (data-rv), bez mask-clipa */
.philo .philo-side .render-slot{width:100%;height:100%;min-height:inherit;aspect-ratio:auto!important;
clip-path:none!important}
.philo-mid .btn-row{justify-content:center}
@media (max-width:920px){
.philo{grid-template-columns:1fr;gap:1.2rem}
.philo .philo-mid{order:-1}
.philo .philo-side{min-height:clamp(180px,52vw,300px)}
}
/* numerisana hairline mreža (01/02/03) — Nordi „+" grid */
.num-grid{display:grid;grid-template-columns:repeat(3,1fr);margin-top:clamp(2rem,5vw,3.5rem);
border:1px solid var(--hair);border-radius:16px;overflow:hidden;
background:linear-gradient(180deg,var(--bg-2),var(--bg-1))}
.num-cell{padding:clamp(1.6rem,3vw,2.7rem);border-left:1px solid var(--hair);position:relative;
transition:background var(--t)}
.num-cell:first-child{border-left:0}
.num-cell:hover{background:rgba(196,160,114,.05)}
.num-cell .num-n{font-family:var(--font-display);font-size:.95rem;font-weight:700;color:var(--bronze);
letter-spacing:.06em;display:block;margin-bottom:1.1rem}
.num-cell h3{font-size:clamp(1.15rem,1.7vw,1.4rem);margin:0 0 .5rem;color:#fff}
.num-cell p{color:var(--muted);font-size:.95rem;margin:0}
/* „+" marker na vrhu svake unutrašnje granice */
.num-cell:not(:first-child)::before{content:"+";position:absolute;left:-9px;top:-11px;z-index:2;
color:var(--bronze);font-weight:400;font-size:1.1rem;line-height:1;
background:var(--bg-1);padding:0 2px}
@media (max-width:760px){
.num-grid{grid-template-columns:1fr}
.num-cell{border-left:0;border-top:1px solid var(--hair)}
.num-cell:first-child{border-top:0}
.num-cell:not(:first-child)::before{left:50%;top:-11px;transform:translateX(-50%)}
}
/* ============================================================
SHOWCASE STRIP — 3 velika full-bleed bloka sa overlay + CTA
============================================================ */
.showcase{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.9rem,1.8vw,1.4rem)}
.show-block{position:relative;border-radius:18px;overflow:hidden;isolation:isolate;
min-height:clamp(360px,42vw,560px);display:flex;flex-direction:column;justify-content:flex-end;
padding:clamp(1.4rem,2.6vw,2.2rem);border:1px solid var(--hair);
background:
repeating-linear-gradient(45deg,rgba(196,160,114,.05) 0 18px,transparent 18px 36px),
linear-gradient(160deg,var(--bg-3),var(--bg-1))}
.show-block::after{content:"";position:absolute;inset:0;z-index:-1;
background:linear-gradient(180deg,rgba(8,8,10,.1) 0%,rgba(8,8,10,.35) 55%,rgba(8,8,10,.86) 100%);
transition:opacity .6s var(--mo-ease)}
.show-block .show-scene{position:absolute;inset:0;z-index:-2;transition:transform 1.1s var(--mo-ease)}
.show-block:hover .show-scene{transform:scale(1.06)}
.show-block .show-tag{position:absolute;top:1.1rem;left:1.1rem;z-index:2;font-size:.64rem;font-weight:700;
letter-spacing:.14em;text-transform:uppercase;color:#15110B;background:var(--bronze);
padding:.32em .7em;border-radius:6px}
.show-block .show-ico{position:absolute;top:46%;left:50%;transform:translate(-50%,-50%);
font-size:2.4rem;color:rgba(196,160,114,.4)}
.show-block h3{font-size:clamp(1.3rem,2vw,1.7rem);color:#fff;margin:0 0 .25rem;text-transform:uppercase;
letter-spacing:-.01em}
.show-block .show-meta{color:rgba(243,241,236,.7);font-size:.88rem;margin-bottom:1rem}
.show-block .show-cta{display:inline-flex;align-items:center;gap:.5em;color:var(--bronze-light);
font-weight:600;font-size:.9rem;font-family:var(--font-display)}
.show-block .show-cta::after{content:"\2197";transition:transform var(--t)}
.show-block:hover .show-cta::after{transform:translate(2px,-2px)}
@media (max-width:920px){.showcase{grid-template-columns:1fr;gap:1rem}
.show-block{min-height:clamp(300px,70vw,420px)}}
/* portfolio render-slot: filmskiji zoom + senka na scroll */
.show-block,.port-card .render-slot{will-change:transform}
/* ============================================================
CINEMATIC CTA — ogroman naslov, jedan jasan CTA
============================================================ */
.cta-cine{text-align:center;background:
radial-gradient(900px 420px at 50% -10%,rgba(196,160,114,.18),transparent 60%),
linear-gradient(180deg,var(--bg-1),var(--bg));border-top:1px solid var(--hair-soft)}
.cta-cine h2{font-size:clamp(2.3rem,6.6vw,5.4rem);line-height:1.0;letter-spacing:-.025em;
text-transform:uppercase;color:#fff;max-width:18ch;margin-inline:auto}
.cta-cine .lead{margin-inline:auto;color:var(--muted)}
.cta-cine .cta-mini{margin-top:1.2rem;font-size:.92rem;color:var(--muted)}
.cta-cine .cta-mini a{color:var(--bronze-light);text-decoration:underline;text-underline-offset:3px}
/* ============================================================
R006B MOTION — directional / scale / mask scene reveal + parallax
JS dodaje .rv-on kad element uđe u viewport. Bez biblioteka.
============================================================ */
[data-rv]{opacity:0;transition:opacity 1s var(--mo-ease),transform 1.05s var(--mo-ease),
clip-path 1.1s var(--mo-ease),filter .9s var(--mo-ease);will-change:transform,opacity}
[data-rv="up"]{transform:translateY(46px)}
[data-rv="left"]{transform:translateX(-64px)}
[data-rv="right"]{transform:translateX(64px)}
[data-rv="scale"]{transform:scale(1.08)}
[data-rv="mask"]{clip-path:inset(0 0 100% 0);opacity:1}
[data-rv="mask-up"]{clip-path:inset(0 0 100% 0);opacity:1}
[data-rv].rv-on{opacity:1;transform:none;clip-path:inset(0 0 0 0)}
[data-rv-delay]{transition-delay:var(--rvd,0ms)}
/* parallax (JS rAF postavlja --py) — instant transform da scroll bude crisp */
[data-pllx]{transform:translate3d(0,var(--py,0),0);transition:transform 0s linear!important}
@media (prefers-reduced-motion:reduce){
[data-rv],[data-rv].rv-on{opacity:1!important;transform:none!important;clip-path:none!important;
filter:none!important;transition:none!important}
[data-pllx]{transform:none!important}
.show-block .show-scene,.show-block:hover .show-scene{transition:none!important;transform:none!important}
}
/* ============================================================
R007 — RECOVERY: CLEAN HERO RENDER/VIDEO SLOT (2026-05-30)
Uklonjen kodom-crtani „interior assembly" (asm-stage); umesto njega
premium prazan slot za pravi V-Ray render ili video. Bez CSS/SVG
nameštaja, bez lažnog 3D — samo elegantan dark frame + bronze hairline.
(asm-* pravila ostaju u fajlu ali su mrtva — nema .asm-stage u DOM-u.)
============================================================ */
.hero-rslot{position:absolute;top:50%;right:5%;transform:translateY(-50%);
width:min(620px,46vw);height:min(560px,64vh);z-index:1}
.hrs-frame{position:relative;width:100%;height:100%;overflow:hidden;border-radius:18px;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.7rem;
background:linear-gradient(160deg,#1A1712,#100E0B 72%);
border:1px solid var(--hair-bronze);
box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 50px 100px -45px rgba(0,0,0,.8)}
.hrs-frame::before{content:"";position:absolute;inset:10px;border:1px solid rgba(255,255,255,.06);
border-radius:12px;pointer-events:none}
.hrs-frame::after{content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(120% 90% at 30% 18%,rgba(196,160,114,.16),transparent 55%)}
.hrs-tag{position:absolute;top:1rem;left:1rem;z-index:2;font-size:.64rem;font-weight:700;
letter-spacing:.14em;text-transform:uppercase;color:#15110B;background:var(--bronze);
padding:.34em .7em;border-radius:6px}
.hrs-ico{z-index:1;font-size:2.6rem;color:rgba(196,160,114,.5);line-height:1}
.hrs-cap{z-index:1;font-size:.84rem;color:rgba(243,241,236,.6);max-width:26ch;text-align:center;
font-family:system-ui,sans-serif;line-height:1.5}
.hrs-sweep{position:absolute;top:0;left:-60%;width:55%;height:100%;z-index:1;pointer-events:none;
background:linear-gradient(100deg,transparent,rgba(255,247,235,.08),transparent);
transform:skewX(-12deg);animation:hrsSweep 7.5s ease-in-out infinite}
@keyframes hrsSweep{0%{left:-60%}55%,100%{left:120%}}
/* mobile: desktop slot se sklanja; plutajuća .hero-card već nosi „Render slot" oznaku */
@media (max-width:920px){.hero-rslot{display:none}}
@media (prefers-reduced-motion:reduce){.hrs-sweep{animation:none!important}}
/* ============================================================
R009A — MOBILE MENU PANEL (SANCOM UX pattern, ARTA3D identitet)
Klizni panel zdesna, backdrop, close X, veliki touch targeti (≥48px),
CTA + kontakt dole. Bronze/graphite, bez SANCOM boja.
Nove DOM čvorove pravi main.js (R009A). Desktop header netaknut.
============================================================ */
/* default: skriveno svuda (desktop netaknut); aktivira se samo na mobilnom u .open */
.mobile-nav-backdrop{display:none}
.mobile-nav-close{display:none}
.mnav-head-li,.mnav-cta-li,.mnav-foot-li{display:none}
body.menu-open{overflow:hidden}
@media (max-width:680px){
/* hamburger → X */
.nav-toggle{position:relative;z-index:130}
.site-header.open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.site-header.open .nav-toggle span:nth-child(2){opacity:0}
.site-header.open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* backdrop */
.mobile-nav-backdrop{display:block;position:fixed;inset:0;z-index:90;
background:rgba(8,7,6,.62);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
opacity:0;pointer-events:none;transition:opacity .3s ease}
.site-header.open .mobile-nav-backdrop{opacity:1;pointer-events:auto}
/* panel = .nav-links pretvoren u klizni panel zdesna */
.site-header.open .nav-links{
display:flex;flex-direction:column;align-items:stretch;gap:0;
position:fixed;top:0;right:0;bottom:0;left:auto;width:min(86vw,360px);z-index:110;
background:linear-gradient(180deg,#15120E 0%,#0E0C09 100%);
border-left:1px solid var(--line-dark);
box-shadow:-26px 0 64px -30px rgba(0,0,0,.85);
padding:1.4rem 0;overflow-y:auto;-webkit-overflow-scrolling:touch;
animation:mnavIn .34s cubic-bezier(.2,.7,.3,1) both}
/* logo gore */
.site-header.open .nav-links .mnav-head-li{display:block;list-style:none;
padding:.2rem clamp(1.4rem,6vw,2rem) 1.1rem}
.site-header.open .nav-links .mnav-head-li img{height:30px;width:auto;display:block}
/* close X plivajuće gore-desno */
.site-header.open .mobile-nav-close{display:flex;align-items:center;justify-content:center;
position:fixed;top:1.1rem;right:1rem;z-index:130;width:46px;height:46px;
background:rgba(20,17,12,.6);border:1px solid var(--line-dark);border-radius:11px;
color:var(--bronze);font-size:1.7rem;line-height:1;cursor:pointer;
transition:border-color var(--t),color var(--t)}
.site-header.open .mobile-nav-close:hover{color:var(--bronze-light);border-color:var(--bronze-deep)}
/* nav linkovi — veliki touch targeti */
.site-header.open .nav-links li{width:100%}
.site-header.open .nav-links > li > a{display:flex;align-items:center;width:100%;
min-height:54px;padding:.85rem clamp(1.4rem,6vw,2rem);
font-family:var(--font-display,var(--serif));font-size:1.16rem;font-weight:600;letter-spacing:.01em;
color:rgba(250,250,248,.92);border-bottom:1px solid rgba(196,160,114,.12);
transition:background var(--t),color var(--t)}
.site-header.open .nav-links > li > a::after{display:none!important}
.site-header.open .nav-links > li > a:hover,
.site-header.open .nav-links > li > a:active{background:rgba(196,160,114,.08);color:#fff}
/* CTA u panelu */
.site-header.open .nav-links .mnav-cta-li{display:block;list-style:none;
padding:1.25rem clamp(1.4rem,6vw,2rem) .4rem}
.site-header.open .nav-links .mnav-cta-li .mobile-nav-cta{display:flex;justify-content:center;
width:100%;min-height:52px;font-size:1.02rem;border-bottom:0}
/* kontakt dole */
.site-header.open .nav-links .mnav-foot-li{display:flex;flex-direction:column;gap:.4rem;
list-style:none;margin-top:auto;padding:1.3rem clamp(1.4rem,6vw,2rem) .3rem;border:0}
.site-header.open .nav-links .mnf-mail{color:var(--bronze);font-weight:600;font-size:1rem;
min-height:0;padding:0;border:0;display:inline}
.site-header.open .nav-links .mnf-mail::after{display:none!important}
.site-header.open .nav-links .mnf-meta{font-size:.8rem;color:rgba(250,250,248,.5);line-height:1.4}
/* poništi stari R003 mobilni dropdown za .nav-cta da nema prazne kutije */
.site-header.open .nav-cta{display:none!important}
/* ---- R011 — MOBILE MENU HOTFIX ----------------------------------------
UZROK BUGA: .site-header ima backdrop-filter (blur) + animation-transform
(headerIn, fill:both). Bilo koje od toga čini header "containing block" za
position:fixed potomke. Pošto main.js dodaje panel + backdrop + close X
UNUTAR .site-header, njihov fixed top/bottom se računao u odnosu na header
(68px), pa je meni bio sabijen u traku headera umesto preko celog ekrana.
FIX: dok je meni otvoren na mobilnom, poništi te trigere na headeru → fixed
panel se pozicionira u odnosu na viewport (pun ekran). Zatvoren header i
desktop ostaju netaknuti (pravilo je samo za .open i samo ≤680px). */
.site-header.open{
-webkit-backdrop-filter:none!important;
backdrop-filter:none!important;
animation:none!important;
transform:none!important;
}
}
@keyframes mnavIn{from{transform:translateX(100%)}to{transform:translateX(0)}}
@media (prefers-reduced-motion:reduce){
.site-header.open .nav-links{animation:none!important}
.mobile-nav-backdrop{transition:none!important}
}
/* ============================================================
R014 — FIRST REAL RENDER (kitchen_wood_warm_01)
Prava slika popunjava postojeći render slot. Scope preko
:has(img) / .slot-img — placeholder slotovi bez slike ostaju
netaknuti (isti dark/bronze izgled). Bez layout pomeranja:
img nosi width/height + object-fit:cover.
============================================================ */
/* Homepage showcase (.show-scene je već inset:0; z-index:-2) */
.show-block .show-scene img{width:100%;height:100%;object-fit:cover;display:block}
/* Portfolio render-slot sa pravom slikom */
.render-slot:has(.slot-img){background:#15120f}
.render-slot .slot-img{position:absolute;inset:0;width:100%;height:100%;
object-fit:cover;z-index:0}
.render-slot:has(.slot-img)::after{content:"";position:absolute;inset:0;z-index:1;
pointer-events:none;background:linear-gradient(180deg,
rgba(8,8,10,.04) 0%,rgba(8,8,10,.26) 52%,rgba(8,8,10,.82) 100%)}
.render-slot:has(.slot-img) .tag{z-index:2}
.render-slot:has(.slot-img) .slot-label,
.render-slot:has(.slot-img) .slot-meta{position:relative;z-index:2}
.render-slot:has(.slot-img) .icon{display:none}
/* R036 — dodatni prikazi projekta (diskretan red sličica ispod kartice) */
.proj-thumbs{display:grid;grid-template-columns:1fr 1fr;gap:.55rem;margin-top:.85rem}
.proj-thumb{display:block;position:relative;border-radius:10px;overflow:hidden;
border:1px solid var(--hair-bronze,rgba(196,160,114,.24));aspect-ratio:16/10;
transition:border-color .3s var(--mo-ease),transform .3s var(--mo-ease)}
.proj-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.proj-thumb:hover{border-color:var(--bronze,#C4A072);transform:translateY(-2px)}
.proj-thumb:focus-visible{outline:2px solid var(--bronze,#C4A072);outline-offset:2px}
/* ============================================================
R015 — hero mini-kartica: prava kuhinja thumbnail umesto
placeholdera. Thumb je 94×74 (overflow:hidden) → slika cover.
============================================================ */
.hero-card .hc-thumb img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}
/* ============================================================
R016 — SAFE HERO SCROLL ENHANCE (parallax + scale + dim)
JS (main.js) postavlja inline transform/filter na .hero-video-wrap
i dodaje body.hero-scroll-enabled. Ovde su samo: GPU hint i
sigurnosne kočnice. KILL SWITCH: ENABLE_HERO_SCROLL=false u main.js,
ili ukloni body.hero-scroll-enabled. transform/filter ne menjaju layout.
============================================================ */
body.hero-scroll-enabled .hero-home .hero-video-wrap{will-change:transform,filter;backface-visibility:hidden}
/* Sigurnosna mreža: na uskom ekranu i kod reduced-motion poništi efekat
(stylesheet !important nadjačava JS inline transform). */
@media (max-width:899px){
body.hero-scroll-enabled .hero-home .hero-video-wrap{transform:none!important;filter:none!important}
}
@media (prefers-reduced-motion:reduce){
body.hero-scroll-enabled .hero-home .hero-video-wrap{transform:none!important;filter:none!important}
}
/* ============================================================
R019 — HERO FURNITURE / RENDER SCROLL (produkcija)
Zamenjuje R018 tekstualni story. Kroz skrol ULAZE VIZUELNI render
elementi (kuhinja → spavaća → dnevna) — scena/„showroom" se sklapa —
dok H1, podnaslov i CTA ostaju STABILNI i čitljivi (BEZ staged text
animacije; load heroIn ostaje jednokratno). PIN hero (sticky 200vh)
daje scroll prostor. Scoped pod .hero-furn-on (main.js: desktop ≥900px,
motion dozvoljen). Bez JS / mobile / reduced-motion → pun normalan hero.
KILL SWITCH: ENABLE_HERO_FURNITURE_SCROLL=false u main.js.
============================================================ */
.hero-pin{display:contents}
.hero-progress{display:none}
.hero-furn-layer{display:none}
/* ---- FURNITURE SCROLL ACTIVE (desktop) ---- */
.hero-home.hero-furn.hero-furn-on{display:block; height:200vh; min-height:200vh; overflow:visible}
.hero-home.hero-furn.hero-furn-on .hero-pin{
display:flex; align-items:center; position:sticky; top:0; height:100vh; overflow:hidden; isolation:isolate;
}
/* blagi bg push-in preko --sp (suptilno; prostor „oživljava") */
.hero-furn-on .hero-video-wrap{
transform:scale(calc(1 + var(--sp,0) * 0.05)) !important;
filter:brightness(calc(1 - var(--sp,0) * 0.10)) !important;
}
/* sloj render kartica — vidljiv tek kad je furniture aktivan (desktop) */
.hero-furn-on .hero-furn-layer{display:block; position:absolute; inset:0; z-index:3; pointer-events:none}
/* premium glass render kartica */
.hero-furn-on .furn-card{
position:absolute; margin:0; width:clamp(170px,16vw,234px); border-radius:14px; overflow:hidden;
background:rgba(20,17,13,.5); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
border:1px solid rgba(196,160,114,.32); box-shadow:0 32px 64px -30px rgba(0,0,0,.8);
opacity:0; transition:opacity .8s cubic-bezier(.32,.72,0,1), transform .8s cubic-bezier(.32,.72,0,1);
will-change:opacity, transform;
}
.hero-furn-on .furn-card img{display:block; width:100%; height:clamp(108px,11vw,150px); object-fit:cover}
.hero-furn-on .furn-card figcaption{
font-family:var(--font-display,inherit); font-size:.82rem; color:#fff; padding:.5rem .72rem; letter-spacing:.01em;
background:linear-gradient(180deg, rgba(18,15,11,.15), rgba(18,15,11,.62));
}
/* pozicije + ulazni transform (scena se sklapa zdesna) */
.hero-furn-on .furn-bedroom{top:14%; right:6%; transform:translate(44px,-26px) scale(.9)}
.hero-furn-on .furn-living{top:39%; right:19%; transform:translate(64px,10px) scale(.9)}
.hero-furn-on .furn-card.furn-in{opacity:1; transform:none}
/* kuhinja = postojeća R015 .hero-card; u furniture modu ulazi zdesna-dole */
.hero-furn-on .hero-card{animation:none !important;
opacity:0; transform:translate(44px,30px) scale(.94);
transition:opacity .8s cubic-bezier(.32,.72,0,1), transform .8s cubic-bezier(.32,.72,0,1);}
.hero-furn-on .hero-card.furn-in{opacity:1; transform:none}
/* markeri (Raspored / Materijali / Svetlo) — ulaze na kraju, stagger */
.hero-furn-on .hero-markers{
position:absolute; left:50%; bottom:5rem; transform:translateX(-50%);
display:flex; gap:.55rem; z-index:4; pointer-events:none;
}
.hero-furn-on .hero-markers .hmk{
font-family:var(--font-display,inherit); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
color:var(--bronze-light,#D3B27D); padding:.42em .85em; border-radius:999px;
background:rgba(20,17,13,.52); border:1px solid rgba(196,160,114,.42);
-webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
opacity:0; transform:translateY(14px); transition:opacity .55s ease, transform .55s ease;
}
.hero-furn-on .hero-markers.on .hmk{opacity:1; transform:none}
.hero-furn-on .hero-markers.on .hmk:nth-child(2){transition-delay:.1s}
.hero-furn-on .hero-markers.on .hmk:nth-child(3){transition-delay:.2s}
/* scroll-cue se gasi kako scena kreće */
.hero-furn-on .scroll-cue{opacity:calc(1 - var(--sp,0) * 3); transition:opacity .3s}
/* ---- PREMIUM PROGRESS STRIP (3 tačke = kuhinja / spavaća / dnevna) ---- */
.hero-furn-on .hero-progress{
display:flex; flex-direction:column; align-items:center; gap:.6rem;
position:absolute; left:50%; transform:translateX(-50%); bottom:1.5rem; z-index:6;
width:min(360px, 38vw); pointer-events:none;
}
.hero-furn-on .hero-progress .hp-dots{display:flex; justify-content:space-between; width:54%}
.hero-furn-on .hero-progress .hp-dots i{width:6px; height:6px; border-radius:50%; background:rgba(196,160,114,.3);
transition:background .35s, box-shadow .35s, transform .35s}
.hero-furn-on .hero-progress .hp-dots i.on{background:#D3B27D; box-shadow:0 0 8px rgba(211,178,125,.55); transform:scale(1.3)}
.hero-furn-on .hero-progress .hp-bar{position:relative; width:100%; height:2px; border-radius:2px; background:rgba(196,160,114,.16); overflow:hidden}
.hero-furn-on .hero-progress .hp-fill{position:absolute; left:0; top:0; height:100%; border-radius:2px;
width:calc(var(--sp,0) * 100%); background:linear-gradient(90deg, rgba(196,160,114,.55), #D3B27D); box-shadow:0 0 12px rgba(196,160,114,.45)}
/* ---- FALLBACK: mobile + reduced-motion = normalan pun hero, bez efekta ---- */
@media (max-width:899px){
.hero-home.hero-furn.hero-furn-on{display:flex; height:auto; min-height:100dvh; overflow:hidden}
.hero-home.hero-furn.hero-furn-on .hero-pin{display:contents; position:static; height:auto}
.hero-furn-on .hero-furn-layer{display:none !important}
.hero-furn-on .hero-card{opacity:1 !important; transform:none !important; animation:none}
.hero-furn-on .hero-video-wrap{transform:none !important; filter:none !important}
.hero-furn-on .scroll-cue{opacity:1}
.hero-furn-on .hero-progress{display:none !important}
}
@media (prefers-reduced-motion:reduce){
.hero-home.hero-furn.hero-furn-on{display:flex; height:auto; min-height:100dvh; overflow:hidden}
.hero-home.hero-furn.hero-furn-on .hero-pin{display:contents; position:static; height:auto}
.hero-furn-on .hero-furn-layer{display:none !important}
.hero-furn-on .hero-card{opacity:1 !important; transform:none !important}
.hero-furn-on .hero-progress{display:none !important}
}
/* ============================================================
R020 — EXACT WILD HERO PORT (scroll-scrub showroom) + TICKER
Verni port R010 "Kinetic Showroom": skrol skrabuje hero video
(prazan stan → namešten) dok je hero PINOVAN. H1/CTA stabilni.
Aktivira se SAMO uz .r020-on (main.js: desktop ≥900px, fine pointer,
motion dozvoljen, video metadata). Bez toga → default pun hero.
Kill switch: ENABLE_R020_WILD_HERO / ENABLE_R020_TICKER (main.js).
============================================================ */
/* ---- SCRUB HERO ACTIVE (desktop) ---- */
.hero-home.r020-on{display:block; height:250vh; min-height:250vh; overflow:visible}
.hero-home.r020-on .hero-pin{
display:flex; align-items:flex-end; position:sticky; top:0;
height:100vh; min-height:100vh; overflow:hidden; isolation:isolate;
}
.hero-home.r020-on .hero-inner{padding-block:0 clamp(3rem,9vh,6rem)}
/* video je oštar cover dok se skrabuje — poništi R016/R019 transforme */
.hero-home.r020-on .hero-video-wrap{transform:none !important; filter:none !important}
.hero-home.r020-on .hero-video{filter:saturate(1.02)}
/* R019 floating sloj nikad u R020 modu */
.hero-home.r020-on .hero-furn-layer{display:none !important}
.hero-home.r020-on .hero-markers{display:none !important}
/* R015 kuhinja kartica ostaje vidljiva i mirna (ne prazno) */
.hero-home.r020-on .hero-card{animation:none}
/* scroll-cue se nežno gasi kako se skrabuje */
.hero-home.r020-on .scroll-cue{opacity:calc(1 - var(--sp,0) * 3); transition:opacity .3s}
/* ---- PREMIUM PROGRESS STRIP (reciklira .hero-progress markup) ---- */
.hero-home.r020-on .hero-progress{
display:flex; flex-direction:column; align-items:center; gap:.6rem;
position:absolute; left:50%; transform:translateX(-50%); bottom:1.4rem; z-index:6;
width:min(340px,36vw); pointer-events:none;
}
.hero-home.r020-on .hero-progress .hp-dots{display:flex; justify-content:space-between; width:52%}
.hero-home.r020-on .hero-progress .hp-dots i{width:6px; height:6px; border-radius:50%;
background:rgba(196,160,114,.3); transition:background .35s, box-shadow .35s, transform .35s}
.hero-home.r020-on .hero-progress .hp-dots i.on{background:#D3B27D;
box-shadow:0 0 8px rgba(211,178,125,.55); transform:scale(1.3)}
.hero-home.r020-on .hero-progress .hp-bar{position:relative; width:100%; height:2px; border-radius:2px;
background:rgba(196,160,114,.16); overflow:hidden}
.hero-home.r020-on .hero-progress .hp-fill{position:absolute; left:0; top:0; height:100%; border-radius:2px;
width:calc(var(--sp,0) * 100%);
background:linear-gradient(90deg, rgba(196,160,114,.55), #D3B27D); box-shadow:0 0 12px rgba(196,160,114,.45)}
/* ---- FALLBACK: mobile + reduced-motion = pun normalan hero, bez scrub-a ---- */
@media (max-width:899px){
.hero-home.r020-on{display:flex; height:auto; min-height:100dvh; overflow:hidden}
.hero-home.r020-on .hero-pin{display:contents; position:static; height:auto}
.hero-home.r020-on .hero-progress{display:none !important}
.hero-home.r020-on .scroll-cue{opacity:1}
}
@media (prefers-reduced-motion:reduce){
.hero-home.r020-on{display:flex; height:auto; min-height:100dvh; overflow:hidden}
.hero-home.r020-on .hero-pin{display:contents; position:static; height:auto}
.hero-home.r020-on .hero-progress{display:none !important}
.hero-home.r020-on .scroll-cue{opacity:1}
}
/* ============================================================
R020 — TICKER STRIP (premium editorial · black/bronze)
============================================================ */
.ticker{
position:relative; background:#0B0B0D; overflow:hidden;
border-top:1px solid var(--hair-bronze,rgba(196,160,114,.22));
border-bottom:1px solid var(--hair-bronze,rgba(196,160,114,.22));
padding-block:.85rem;
}
.ticker-track{
display:flex; align-items:center; gap:1.15rem; width:max-content; white-space:nowrap;
animation:r020Ticker 60s linear infinite; will-change:transform;
}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker .tk{
font-size:clamp(.74rem,1.05vw,.92rem); letter-spacing:.14em; text-transform:uppercase;
color:rgba(243,241,236,.6);
}
.ticker .tk b{color:var(--bronze,#C4A072); font-weight:600}
.ticker .sep{color:var(--bronze,#C4A072); opacity:.55; font-size:.8em}
@keyframes r020Ticker{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){ .ticker-track{animation:none} }
@media (max-width:640px){
.ticker{padding-block:.7rem}
.ticker-track{gap:.95rem; animation-duration:42s}
.ticker .tk{letter-spacing:.1em}
}
/* ============================================================
R023 — O STUDIJU (cleanup: text hero accent + editorial portret)
Bez agresivnog blenda/maske. Portret je namerni editorial element.
============================================================ */
/* /o-studiju/ hero (R035) — full-bleed studijska slika (3D model na tehničkom
crtežu): tekst levo na tamnom, model desno. Slika je već dark/bronze; dodajemo
samo scrim gradijent levo→desno za čitljivost. Bez teških efekata/glow-a. */
.hero-about{position:relative; overflow:hidden; display:flex; align-items:center;
min-height:clamp(460px,72vh,640px)}
.hero-bg{position:absolute; inset:0; z-index:0; display:block}
.hero-bg img{width:100%; height:100%; object-fit:cover; object-position:78% center}
.hero-scrim{position:absolute; inset:0; z-index:1; pointer-events:none;
background:
linear-gradient(90deg, rgba(8,8,10,.94) 0%, rgba(8,8,10,.8) 30%, rgba(8,8,10,.46) 52%, rgba(8,8,10,.12) 72%, rgba(8,8,10,.30) 100%),
linear-gradient(0deg, rgba(8,8,10,.5), transparent 40%);
}
.hero-about .container{position:relative; z-index:2}
.about-intro{max-width:33rem; padding-block:clamp(2.4rem,6vw,4.6rem)}
.about-intro .hl{color:var(--bronze-light,#E0C79E)}
.about-intro .btn{display:inline-flex; align-items:center; gap:.55rem}
.btn-ic{flex:none}
@media (max-width:760px){
.hero-about{min-height:auto}
.hero-bg img{object-position:66% center}
.hero-scrim{background:
linear-gradient(90deg, rgba(8,8,10,.9) 0%, rgba(8,8,10,.68) 50%, rgba(8,8,10,.42) 100%),
linear-gradient(0deg, rgba(8,8,10,.6), transparent 44%);}
.about-intro{max-width:none; padding-block:clamp(1.8rem,7vw,2.8rem)}
}
/* Ritam strane /o-studiju/: tešnje sekcije da tekst ne pluta u ogromnim prazninama */
/* overflow:hidden — drži portret glow (negativan inset) unutar sekcije, bez horizontalnog scrolla */
.about-page .section{padding-block:clamp(2.6rem,5.5vw,4.6rem); overflow:hidden}
/* editorial portret (R031): SCENA oko slike, ne maska preko čoveka.
Slika ostaje normalan img (lice i telo netaknuti). Iza i oko nje gradi se
tonska scena koja nastavlja tonove fotke — topli sivkasti prelaz iza glave
(gde je bokeh svetliji), tama uz strane i dno — pa kvadrat fotografije nestaje
u sceni. Tvrde ivice gase se mekim overlay-em SAMO po perimetru, ne preko lica. */
.about-editorial{display:grid; grid-template-columns:.82fr 1.18fr; gap:clamp(1.8rem,4.5vw,3.8rem); align-items:center}
.about-portrait-wrap{position:relative; max-width:340px; margin-inline:auto}
/* SCENA iza portreta (oversized): topli sivkasti halo iza glave + bronze šapat +
tamnjenje ka stranama i dnu. Tonovi prate fotku, pa nema ravne crne „rupe". */
/* (R033 polish) VRH scene je taman kao gornja ivica fotke — feather se topi
crno-u-crno, bez svetle trake/linije iznad glave; bronze dubina je niže. */
.about-portrait-wrap::before{
content:""; position:absolute; z-index:0; inset:-24% -22% -8%;
background:
radial-gradient(100% 34% at 50% 0%, rgba(7,7,9,.96), transparent 72%),
radial-gradient(64% 46% at 50% 52%, rgba(196,160,114,.055), transparent 72%),
radial-gradient(122% 92% at 50% 60%, transparent 26%, rgba(8,8,10,.8) 86%);
pointer-events:none;
}
.portrait-editorial{margin:0; position:relative; z-index:1}
.portrait-editorial picture,.portrait-editorial img{display:block; width:100%; height:auto}
/* postepen feather gornje ivice: pozadina iznad glave i sam vrh kose se mekano
tope u tamnu scenu (editorial), bez vidljivog reza. Lice i telo netaknuti. */
.portrait-editorial img{
filter:grayscale(1) contrast(1.05);
-webkit-mask-image:linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.18) 5%, rgba(0,0,0,.55) 10%, rgba(0,0,0,.85) 13%, #000 17%);
mask-image:linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.18) 5%, rgba(0,0,0,.55) 10%, rgba(0,0,0,.85) 13%, #000 17%);
-webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}
/* edge-soften overlay: gasi SAMO dno (sako→tama) i bočne ivice; bez gornjeg banda. */
.about-portrait-frame{position:relative; display:block}
.about-portrait-frame::after{
content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
background:
linear-gradient(to top, rgba(10,10,12,.97) 0%, rgba(10,10,12,.45) 10%, transparent 26%),
linear-gradient(to right, rgba(10,10,12,.72) 0%, transparent 13%),
linear-gradient(to left, rgba(10,10,12,.72) 0%, transparent 13%);
}
.portrait-editorial figcaption{margin-top:.55rem; text-align:center; font-size:.76rem; letter-spacing:.14em;
color:var(--bronze-light,#D8BE92); text-transform:uppercase; position:relative; z-index:1}
@media (max-width:760px){
.about-editorial{grid-template-columns:1fr; gap:1.4rem}
.about-portrait-wrap{max-width:264px}
}
/* ============================================================
R038 — Portfolio kartica → project link + project/case-study strana
(/portfolio/kuhinja-po-meri/). Scoped; ne dira homepage/o-studiju.
============================================================ */
/* kartica: ceo cover klikabilan + naslov link + CTA */
.render-slot .slot-link{position:absolute; inset:0; z-index:3}
.card-title-link{color:inherit; text-decoration:none}
.port-card:hover .card-title-link{color:var(--bronze-light,#E0C79E)}
.proj-cta{display:inline-flex; align-items:center; gap:.4rem; margin-top:.75rem;
font-weight:600; font-size:.9rem; color:var(--bronze-light,#E0C79E); text-decoration:none}
.proj-cta:hover{color:var(--bronze,#C4A072)}
.proj-cta span{transition:transform .3s var(--mo-ease,ease)}
.proj-cta:hover span{transform:translateX(3px)}
/* PROJECT HERO */
.project-hero{position:relative; overflow:hidden; display:flex; align-items:flex-end;
min-height:clamp(380px,58vh,560px)}
.project-hero .ph-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0}
.project-hero .ph-scrim{position:absolute; inset:0; z-index:1; pointer-events:none;
background:linear-gradient(0deg, rgba(8,8,10,.93), rgba(8,8,10,.22) 56%, rgba(8,8,10,.5))}
.project-hero .container{position:relative; z-index:2; padding-block:clamp(1.8rem,4vw,3rem)}
.project-hero .crumb{margin-bottom:.7rem}
.project-hero h1{max-width:20ch}
.project-hero .hl{color:var(--bronze-light,#E0C79E)}
.project-hero .lead{max-width:60ch; margin-top:.85rem; color:var(--muted-light,#B6B1A6)}
/* PROJECT GALLERY (glavni + širi + detalj) */
.project-gallery{display:grid; grid-template-columns:repeat(2,1fr); gap:1rem}
.project-gallery .pg-main{grid-column:1 / -1; aspect-ratio:16/9}
.project-gallery figure{margin:0; position:relative; border-radius:12px; overflow:hidden;
border:1px solid var(--hair-soft,rgba(255,255,255,.05)); aspect-ratio:16/10}
.project-gallery img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
transition:transform .6s var(--mo-ease,ease)}
.project-gallery figure:hover img{transform:scale(1.03)}
.project-gallery figcaption{position:absolute; left:0; right:0; bottom:0; z-index:1; padding:.65rem .8rem;
font-size:.76rem; letter-spacing:.02em; color:var(--ink,#F3F1EC);
background:linear-gradient(0deg, rgba(8,8,10,.78), transparent)}
@media (max-width:620px){
.project-gallery{grid-template-columns:1fr}
.project-gallery .pg-main,.project-gallery figure{aspect-ratio:16/10}
}
/* PROJECT STORY (šta se vidi + detalji) */
.project-story{display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(1.4rem,3vw,2.8rem); align-items:start}
@media (max-width:760px){.project-story{grid-template-columns:1fr}}
.story-points{list-style:none; margin:.6rem 0 0; padding:0}
.story-points li{position:relative; padding-left:1.3rem; margin:.55rem 0; color:var(--muted,#9D988D)}
.story-points li::before{content:""; position:absolute; left:0; top:.6em; width:7px; height:7px;
border-radius:50%; background:var(--bronze,#C4A072)}
.project-story .spec{list-style:none; margin:.5rem 0 0; padding:0; font-size:.92rem}
.project-story .spec li{display:flex; justify-content:space-between; gap:1rem; padding:.5rem 0;
border-bottom:1px solid var(--hair-soft,rgba(255,255,255,.05))}
.project-story .spec li span:first-child{color:var(--muted,#9D988D)}
.project-story .spec li b{color:var(--text-strong,#fff); font-weight:600}
/* AUDIENCE (za koga je koristan) */
.aud-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1.4rem}
@media (max-width:760px){.aud-grid{grid-template-columns:1fr}}
.aud-card{background:linear-gradient(180deg,var(--bg-2,#15151A),var(--bg-1,#101013));
border:1px solid var(--hair-soft,rgba(255,255,255,.05)); border-radius:12px; padding:1.1rem 1.15rem}
.aud-card h3{margin-bottom:.3rem}
.aud-card p{font-size:.9rem; color:var(--muted,#9D988D); margin:0}
/* ============================================================
R039 — Minimalan lightbox za project-gallery (scoped).
Klik na kadar otvara puni prikaz; Esc/strelice/pozadina zatvaraju.
prefers-reduced-motion safe. Ne dira druge stranice.
============================================================ */
/* okidač preko kadra — pristupačan, fokusabilan */
.project-gallery .pg-zoom{position:absolute; inset:0; z-index:2; cursor:zoom-in;
border:0; padding:0; background:transparent; appearance:none;
-webkit-tap-highlight-color:transparent}
.project-gallery .pg-zoom:focus-visible{outline:2px solid var(--bronze-light,#E0C79E); outline-offset:-3px}
.project-gallery .pg-zoom::after{content:""; position:absolute; top:.6rem; right:.6rem;
width:30px; height:30px; border-radius:50%; opacity:0; transition:opacity .25s var(--mo-ease,ease);
background:rgba(8,8,10,.55) center/16px 16px no-repeat;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E0C79E' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3M11 8v6M8 11h6'/%3E%3C/svg%3E")}
.project-gallery figure:hover .pg-zoom::after,
.project-gallery .pg-zoom:focus-visible::after{opacity:1}
/* overlay */
.lightbox[hidden]{display:none}
.lightbox{position:fixed; inset:0; z-index:1000; display:grid; place-items:center;
padding:clamp(1rem,4vw,3rem);
background:rgba(8,8,10,.92); backdrop-filter:blur(4px);
opacity:0; transition:opacity .28s var(--mo-ease,ease)}
.lightbox.is-open{opacity:1}
body.lb-lock{overflow:hidden}
.lightbox .lb-stage{position:relative; max-width:min(1200px,100%); max-height:100%;
display:flex; flex-direction:column; align-items:center; gap:.75rem}
.lightbox .lb-img{max-width:100%; max-height:calc(100vh - 9rem); width:auto; height:auto;
border-radius:10px; box-shadow:0 24px 70px rgba(0,0,0,.6);
transform:scale(.97); transition:transform .28s var(--mo-ease,ease)}
.lightbox.is-open .lb-img{transform:scale(1)}
.lightbox .lb-cap{font-size:.8rem; letter-spacing:.02em; color:var(--muted-light,#B6B1A6); text-align:center; margin:0}
/* kontrole */
.lightbox button{appearance:none; border:1px solid rgba(255,255,255,.18); cursor:pointer;
color:var(--ink,#F3F1EC); background:rgba(20,20,24,.7); border-radius:50%;
display:grid; place-items:center; transition:background .2s var(--mo-ease,ease),border-color .2s}
.lightbox button:hover{background:rgba(40,40,46,.9); border-color:rgba(255,255,255,.32)}
.lightbox button:focus-visible{outline:2px solid var(--bronze-light,#E0C79E); outline-offset:2px}
.lightbox .lb-close{position:absolute; top:-.4rem; right:-.4rem; width:42px; height:42px; font-size:1.3rem; line-height:1}
.lightbox .lb-nav{position:fixed; top:50%; transform:translateY(-50%); width:46px; height:46px; font-size:1.4rem; line-height:1}
.lightbox .lb-prev{left:clamp(.6rem,3vw,2rem)}
.lightbox .lb-next{right:clamp(.6rem,3vw,2rem)}
.lightbox .lb-nav[hidden]{display:none}
@media (max-width:620px){
.lightbox .lb-close{top:.2rem; right:.2rem}
.lightbox .lb-img{max-height:calc(100vh - 7rem)}
}
@media (prefers-reduced-motion:reduce){
.lightbox,.lightbox .lb-img{transition:none}
.lightbox .lb-img{transform:none}
.project-gallery .pg-zoom::after{transition:none}
}
/* ============================================================
R041 — Portfolio listing redesign: cinematic full-bleed hero
(velika kuhinjska slika + scrim, tekst dole-levo, kao project strana)
+ diskretna napomena ispod "Izabrani projekti" grida.
Scoped .hero-portfolio / .port-note. Supersedes R040 render-wall
(klase .phero-*/.phw-* se više ne koriste).
============================================================ */
.hero-portfolio{position:relative; overflow:hidden; display:flex; align-items:flex-end;
min-height:clamp(470px,64vh,660px); isolation:isolate}
.hero-portfolio .ph-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
object-position:50% 42%; z-index:0}
.hero-portfolio .ph-scrim{position:absolute; inset:0; z-index:1; pointer-events:none;
background:
linear-gradient(90deg, rgba(8,8,10,.92) 0%, rgba(8,8,10,.66) 36%, rgba(8,8,10,.2) 66%, rgba(8,8,10,.36) 100%),
linear-gradient(0deg, rgba(8,8,10,.8), transparent 54%)}
.hero-portfolio .container{position:relative; z-index:2; width:100%;
padding-block:clamp(2.4rem,6vw,4.4rem)}
.hero-portfolio .crumb{margin-bottom:.8rem}
.hero-portfolio .eyebrow{margin-bottom:.7rem}
.hero-portfolio h1{color:#fff; max-width:17ch; margin-bottom:.42em;
text-shadow:0 2px 30px rgba(0,0,0,.45)}
.hero-portfolio .hero-sub{max-width:50ch; color:rgba(250,250,248,.92); margin-bottom:0;
text-shadow:0 1px 18px rgba(0,0,0,.4)}
.hero-portfolio .trustline{margin-top:1.5rem; color:rgba(250,250,248,.72)}
/* diskretna napomena ispod grida (ne dominira, premium-tihо) */
.port-note{max-width:62ch; margin:1.9rem auto 0; text-align:center;
font-size:.84rem; line-height:1.6; color:var(--muted,#9D988D)}
@media (max-width:620px){
.hero-portfolio{min-height:clamp(430px,78vh,580px)}
.hero-portfolio h1{max-width:20ch}
}
/* ============================================================
R042 — Case-study "Kuhinja za stolare" (.cs-page). Editorial
narativ: gotov izgled → stolarski prikaz → mehanizmi → konstrukcija.
Reuse .project-hero / .section / .cta-band / .section-head.
Slike se prikazuju cele (bez crop-a). Scoped; ne dira druge stranice.
============================================================ */
.cs-page .project-hero h1{color:#fff}
.cs-page .project-hero .lead{max-width:62ch}
/* hero: nivoi prikaza (čipovi) */
.cs-levels{list-style:none; display:flex; flex-wrap:wrap; gap:.5rem .6rem; margin:1.5rem 0 0; padding:0}
.cs-levels li{font-size:.74rem; letter-spacing:.04em; color:rgba(250,250,248,.86);
border:1px solid var(--line-dark,rgba(196,160,114,.20)); background:rgba(196,160,114,.08);
padding:.4em .85em; border-radius:999px; backdrop-filter:blur(2px)}
.cs-lead{max-width:64ch}
/* figure — ceo render, hairline okvir, caption ispod (editorial) */
.cs-figure{margin:0; border-radius:12px; overflow:hidden;
border:1px solid var(--line-light,rgba(23,21,19,.12));
background:#fff; box-shadow:0 18px 44px -28px rgba(23,21,19,.45)}
.cs-figure img{display:block; width:100%; height:auto}
.cs-figure figcaption{padding:.7rem .95rem; font-size:.82rem; letter-spacing:.01em;
color:var(--muted,#6B6258); background:var(--paper-warm,#F1ECE3);
border-top:1px solid var(--line-light,rgba(23,21,19,.10))}
.cs-figure-lg{max-width:1080px; margin:1.6rem auto 0}
.cs-duo{display:grid; grid-template-columns:1fr 1fr; gap:clamp(.9rem,2vw,1.4rem); margin-top:1.6rem}
.cs-figure-lg + .cs-duo{margin-top:clamp(.9rem,2vw,1.4rem)}
@media (max-width:760px){
.cs-duo{grid-template-columns:1fr}
}
/* ============================================================
R044 — UNIFIED IMAGE-HERO (sistemski) za /usluge/ /kako-radimo/
/faq/ /kontakt/. Tekst levo na tamnom, dark/bronze slika desno;
scrim levo→desno + blago odozdo za čitljivost. Isti jezik kao
/o-studiju/ i /portfolio/ — sve stranice deluju kao jedan sistem.
Slike su već dark/bronze (16:9 / wide), dodajemo samo scrim.
Scoped .hero-media; ne dira druge hero varijante.
============================================================ */
.hero-media{position:relative; overflow:hidden; display:flex; align-items:center;
min-height:clamp(400px,58vh,560px); isolation:isolate}
.hero-media .hero-bg{position:absolute; inset:0; z-index:0; display:block}
.hero-media .hero-bg img{width:100%; height:100%; object-fit:cover; object-position:80% center}
.hero-media .hero-scrim{position:absolute; inset:0; z-index:1; pointer-events:none;
background:
linear-gradient(90deg, rgba(8,8,10,.95) 0%, rgba(8,8,10,.82) 32%, rgba(8,8,10,.46) 55%, rgba(8,8,10,.14) 75%, rgba(8,8,10,.34) 100%),
linear-gradient(0deg, rgba(8,8,10,.5), transparent 42%)}
.hero-media .container{position:relative; z-index:2}
.hero-media .hero-inner{max-width:34rem; padding-block:clamp(2.4rem,6vw,4.4rem)}
.hero-media .crumb{margin-bottom:.85rem}
.hero-media .eyebrow{margin-bottom:.7rem}
.hero-media h1{color:#fff; margin-bottom:.36em; text-shadow:0 2px 30px rgba(0,0,0,.42)}
.hero-media h1 .hl{color:var(--bronze-light,#E0C79E); font-style:normal}
.hero-media .hero-sub{max-width:48ch; color:rgba(250,250,248,.92);
text-shadow:0 1px 18px rgba(0,0,0,.38); margin-bottom:1.5rem}
.hero-media .btn-row{flex-wrap:wrap}
.hero-media .btn-ghost{border-color:rgba(255,255,255,.45); color:#fff; background:rgba(255,255,255,.04)}
.hero-media .btn-ghost:hover{border-color:var(--bronze); color:var(--bronze-light); background:rgba(196,160,114,.08)}
/* storyboard (kako-radimo): kompozicija je centrirana, fokus levo-centar */
.hero-media.hm-process .hero-bg img{object-position:62% center}
@media (max-width:760px){
.hero-media{min-height:auto}
.hero-media .hero-bg img{object-position:70% center}
.hero-media.hm-process .hero-bg img{object-position:55% center}
.hero-media .hero-scrim{background:
linear-gradient(90deg, rgba(8,8,10,.93) 0%, rgba(8,8,10,.74) 52%, rgba(8,8,10,.5) 100%),
linear-gradient(0deg, rgba(8,8,10,.62), transparent 46%)}
.hero-media .hero-inner{max-width:none; padding-block:clamp(1.9rem,7vw,3rem)}
}
/* ============================================================
R045 — SOFT HERO→BODY TRANSITION (scoped .hero-media)
Telo strane je near-black (--bg #0B0B0D), pa je „tvrd rez" tonski šav:
dno hero slike (fotografska tekstura) udara u ravan crni blok.
Rešenje: (1) slika se filmski utopi u TAČNU boju tela pre ivice,
(2) diskretan bronze/charcoal ambient most straddla spoj,
(3) vrh prve sekcije dobije suptilnu dubinu. Bez glow-a, bez border-a.
Scoped na .hero-media i susednu .section → ne dira hero-home /
hero-portfolio / hero-about.
============================================================ */
.hero-media{--hm-bridge:clamp(90px,13vh,160px)}
/* (1) donji fade: slika nestaje u boju tela; šav postaje crno-u-crno (nevidljiv).
z-index:1 = uz scrim, ispod teksta (container z-index:2). overflow:hidden klipuje na hero. */
.hero-media::after{content:""; position:absolute; left:0; right:0; bottom:0;
height:var(--hm-bridge); z-index:1; pointer-events:none;
background:linear-gradient(180deg,
rgba(11,11,13,0) 0%, rgba(11,11,13,.5) 52%, var(--bg,#0B0B0D) 100%)}
/* (2)+(3) prva sekcija posle heroja: ambient most na vrhu + blaga dubina.
Boja se poklapa sa krajem hero fade-a, pa spoj deluje namerno, ne sečeno. */
.hero-media + .section{position:relative}
.hero-media + .section::before{content:""; position:absolute; left:0; right:0; top:0;
height:clamp(170px,26vh,330px); z-index:0; pointer-events:none;
background:
radial-gradient(125% 96% at 50% 0%, rgba(196,160,114,.055), transparent 60%),
linear-gradient(180deg, rgba(0,0,0,.36) 0%, transparent 78%)}
.hero-media + .section > .container{position:relative; z-index:1}
/* ============================================================
R048 — ABOUT FOUNDER BAND (/o-studiju/). Široka slika osnivača
(lice levo, tamni prazan prostor desno) kao pozadina; tekst je
pravi HTML u desnom negativnom prostoru, ne deo slike. Premium
horizontalni blok sa hairline okvirom. Scoped .about-founder.
Mobile: slika gore (cela, bez sečenja lica), tekst dole.
============================================================ */
.about-founder{position:relative; overflow:hidden; isolation:isolate;
border-radius:var(--radius,16px); border:1px solid var(--hair,rgba(255,255,255,.09));
min-height:clamp(360px,42vw,480px); display:flex; align-items:center; justify-content:flex-end}
.about-founder .af-bg{position:absolute; inset:0; z-index:0; display:block}
.about-founder .af-bg img{width:100%; height:100%; object-fit:cover; object-position:left 38%}
.about-founder .af-scrim{position:absolute; inset:0; z-index:1; pointer-events:none;
background:
linear-gradient(90deg, transparent 0%, transparent 36%, rgba(8,8,10,.4) 50%, rgba(8,8,10,.82) 66%, rgba(8,8,10,.93) 100%),
linear-gradient(0deg, rgba(8,8,10,.42), transparent 42%)}
.about-founder .af-text{position:relative; z-index:2; width:min(52%,560px);
padding:clamp(1.4rem,2.6vw,2.4rem) clamp(1.4rem,3vw,2.6rem)}
.about-founder .af-text p{color:rgba(243,241,236,.9)}
.about-founder .af-name{margin-top:1rem; font-size:.76rem; letter-spacing:.14em;
text-transform:uppercase; color:var(--bronze-light,#D8BE92)}
@media (max-width:760px){
.about-founder{display:block; min-height:0; border-radius:14px}
.about-founder .af-bg{position:relative; aspect-ratio:16/9}
.about-founder .af-bg img{height:auto; object-position:center}
.about-founder .af-scrim{display:none}
.about-founder .af-text{width:auto; background:var(--bg-1,#101013);
padding:clamp(1.3rem,5vw,1.8rem)}
}
/* ============================================================
R049 — KONTAKT POLISH + CUSTOM DARK SELECT
Forma se uklapa u dark/bronze ARTA3D sistem; native select
zamenjen tamnim custom listbox-om (JS: select[data-custom-select]).
Sve boje preko postojecih tokena (bronze scarce). Bez novih akcenata.
============================================================ */
/* ---- Form-wrap: mirniji premium blok sa suptilnim bronze hairline-om gore ---- */
.form-wrap{position:relative;overflow:hidden}
.form-wrap::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
background:linear-gradient(90deg,transparent,var(--hair-bronze),transparent)}
.form-wrap > h2:first-child,.form-wrap > h3:first-child{margin-top:.2rem}
/* ---- Fields: nesto vise vazduha, jasniji label ---- */
.field{margin-bottom:1.15rem}
.field label{letter-spacing:.01em;color:var(--ink)}
.input,.select,.textarea{padding:.85em 1em;border-radius:var(--radius-sm);
transition:border-color var(--t),box-shadow var(--t),background var(--t)}
.input:hover,.textarea:hover{border-color:var(--hair-bronze)}
/* ---- Submit zona: hairline + disanje pre dugmeta ---- */
.field-submit{margin-top:1.4rem;padding-top:1.4rem;border-top:1px solid var(--hair-soft)}
.btn-lg{letter-spacing:.01em}
/* ---- Elegantni custom checkbox (native input ostaje, samo re-skin) ---- */
.check{align-items:flex-start;gap:.7rem;line-height:1.45;padding:.15rem 0}
.check input[type="checkbox"]{appearance:none;-webkit-appearance:none;width:20px;height:20px;
margin:2px 0 0;flex:0 0 auto;border:1.5px solid var(--hair-bronze);border-radius:6px;
background:rgba(255,255,255,.03);cursor:pointer;display:grid;place-content:center;
transition:border-color var(--t),background var(--t)}
.check input[type="checkbox"]:hover{border-color:var(--bronze)}
.check input[type="checkbox"]::before{content:"";width:12px;height:12px;transform:scale(0);
transition:transform .16s cubic-bezier(.32,.72,0,1);background:var(--bronze);
-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask:url("data:image/svg+xml;utf8,") center/contain no-repeat}
.check input[type="checkbox"]:checked{border-color:var(--bronze);background:rgba(196,160,114,.14)}
.check input[type="checkbox"]:checked::before{transform:scale(1)}
.check input[type="checkbox"]:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(196,160,114,.22)}
/* ---- Kontakt kartice: malo vise dubine ---- */
.contact-card{transition:border-color var(--t),transform var(--t),box-shadow var(--t)}
.contact-card:hover{border-color:var(--hair-bronze);transform:translateY(-2px);
box-shadow:0 22px 50px -34px rgba(0,0,0,.8)}
.contact-card a:hover{color:var(--bronze-light)}
/* ============================================================
CUSTOM SELECT (dark)
============================================================ */
.cs{position:relative}
.cs-native{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
clip:rect(0 0 0 0);white-space:nowrap;border:0}
.cs-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;gap:.75rem;
font-family:var(--sans);font-size:1rem;text-align:left;cursor:pointer;color:var(--ink);
background:rgba(255,255,255,.03);border:1.5px solid var(--line-light);
border-radius:var(--radius-sm);padding:.85em 1em;
transition:border-color var(--t),box-shadow var(--t),background var(--t)}
.cs-trigger:hover{border-color:var(--hair-bronze)}
.cs-trigger:focus-visible,.cs-open .cs-trigger{outline:none;border-color:var(--bronze);
box-shadow:0 0 0 3px rgba(196,160,114,.18)}
.cs-trigger .cs-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs-trigger.cs-is-placeholder .cs-value{color:var(--muted-2)}
.cs-caret{width:.6em;height:.6em;flex:0 0 auto;margin-right:.1em;
border-right:2px solid var(--bronze);border-bottom:2px solid var(--bronze);
transform:translateY(-2px) rotate(45deg);transition:transform var(--t)}
.cs-open .cs-caret{transform:translateY(1px) rotate(-135deg)}
.cs-list{position:absolute;z-index:60;top:calc(100% + 6px);left:0;right:0;margin:0;padding:.35rem;
list-style:none;max-height:288px;overflow-y:auto;
background:linear-gradient(180deg,var(--bg-3),var(--bg-2));
border:1px solid var(--hair-bronze);border-radius:var(--radius-sm);
box-shadow:0 28px 64px -26px rgba(0,0,0,.88);
animation:csIn .18s cubic-bezier(.32,.72,0,1)}
@keyframes csIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.cs-option{padding:.62em .8em;border-radius:8px;font-size:.97rem;line-height:1.35;color:var(--ink);
cursor:pointer;display:flex;align-items:center;gap:.6rem}
.cs-option.cs-placeholder{color:var(--muted-2)}
.cs-option.cs-active{background:rgba(196,160,114,.13)}
.cs-option.cs-selected{color:var(--bronze-light)}
.cs-option.cs-selected::after{content:"";margin-left:auto;width:16px;height:16px;flex:0 0 auto;
background:var(--bronze);
-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask:url("data:image/svg+xml;utf8,") center/contain no-repeat}
.cs-invalid .cs-trigger{border-color:#C98379}
.cs-error{display:none;margin:.45rem 0 0;font-size:.82rem;color:#D89A91}
.cs-invalid .cs-error{display:block}
@media (prefers-reduced-motion:reduce){
.cs-list{animation:none}
.cs-caret,.check input[type="checkbox"]::before{transition:none}
}