@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root{--bg:#09090b;--panel:#111114;--panel2:#17171b;--text:#f5f5f4;--muted:#a1a1aa;--line:rgba(255,255,255,.09);--accent:#d7ff3f;--accent2:#b9e82f;--max:1180px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif;line-height:1.6}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}.container{width:min(var(--max),calc(100% - 40px));margin:auto}
body:before{content:'';position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 75% 10%,rgba(215,255,63,.08),transparent 28%),radial-gradient(circle at 10% 60%,rgba(255,255,255,.03),transparent 24%);z-index:-1}
.nav{position:fixed;top:0;left:0;right:0;z-index:20;padding:18px 0;background:rgba(9,9,11,.72);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}.nav-inner{display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:10px;font-family:'Space Grotesk';font-weight:700;letter-spacing:-.03em}.brand img{width:34px;height:34px;object-fit:contain}.nav-links{display:flex;gap:28px;align-items:center;font-size:.92rem;color:var(--muted)}.nav-links a:hover{color:var(--text)}.lang{border:1px solid var(--line);background:var(--panel);color:var(--text);padding:8px 10px;border-radius:999px;font:inherit;cursor:pointer}
.hero{min-height:100vh;padding:150px 0 90px;display:grid;grid-template-columns:1.15fr .85fr;gap:70px;align-items:center}.eyebrow{font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);font-weight:700}.hero h1{font:600 clamp(3.5rem,7vw,7rem)/.92 'Space Grotesk';letter-spacing:-.065em;margin:22px 0}.hero h1 span{color:var(--accent)}.hero-copy{font-size:1.12rem;color:var(--muted);max-width:620px}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}.btn{display:inline-flex;align-items:center;justify-content:center;padding:13px 20px;border-radius:999px;border:1px solid var(--line);font-weight:700;transition:.25s}.btn-primary{background:var(--accent);color:#0a0a0a;border-color:var(--accent)}.btn-primary:hover{background:#e4ff75;transform:translateY(-2px)}.btn-ghost:hover{border-color:rgba(255,255,255,.25);transform:translateY(-2px)}
.hero-visual{position:relative;min-height:500px;display:flex;align-items:center;justify-content:center}.orb{position:absolute;width:390px;height:390px;border-radius:50%;background:radial-gradient(circle,rgba(215,255,63,.22),transparent 67%);filter:blur(8px)}.visual-card{position:relative;width:min(470px,100%);padding:12px;border:1px solid var(--line);background:rgba(17,17,20,.82);border-radius:24px;box-shadow:0 30px 80px rgba(0,0,0,.45);transform:rotate(2deg)}.visual-card img{border-radius:16px;width:100%;height:330px;object-fit:cover;object-position:center}.visual-caption{padding:18px 8px 8px;display:flex;justify-content:space-between;gap:15px}.visual-caption small{color:var(--muted)}
.section{padding:110px 0}.section-head{display:flex;justify-content:space-between;gap:30px;align-items:end;margin-bottom:42px}.section-title{font:600 clamp(2.3rem,4vw,4rem)/1 'Space Grotesk';letter-spacing:-.05em;margin:0}.section-intro{max-width:450px;color:var(--muted);margin:0}.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px}.about-text{font-size:1.25rem;color:#d4d4d8}.about-text strong{color:var(--text)}.stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}.stat{background:var(--panel);padding:28px}.stat b{font:600 2.5rem 'Space Grotesk';display:block;color:var(--accent)}.stat span{color:var(--muted);font-size:.9rem}
.projects{display:grid;gap:30px}.project{display:grid;grid-template-columns:1.2fr .8fr;min-height:430px;border:1px solid var(--line);background:linear-gradient(135deg,#121215,#0d0d0f);border-radius:28px;overflow:hidden;transition:.3s}.project:hover{transform:translateY(-5px);border-color:rgba(215,255,63,.25)}.project.reverse{grid-template-columns:.8fr 1.2fr}.project-media{min-height:430px;background:#151519;display:flex;align-items:center;justify-content:center;padding:34px;overflow:hidden}.project-media img{max-height:350px;object-fit:contain;filter:drop-shadow(0 25px 40px rgba(0,0,0,.5));transition:.5s}.project:hover .project-media img{transform:scale(1.025)}.project-info{padding:48px;display:flex;flex-direction:column;justify-content:center}.number{color:var(--accent);font-size:.8rem;letter-spacing:.16em;font-weight:700}.project h3{font:600 clamp(2rem,3.5vw,3.4rem)/1 'Space Grotesk';letter-spacing:-.05em;margin:14px 0}.project p{color:var(--muted);max-width:500px}.tags{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 25px}.tag{border:1px solid var(--line);border-radius:999px;padding:6px 10px;font-size:.75rem;color:#d4d4d8}.arrow{color:var(--accent);font-weight:700}
.milanoticka-card{background:linear-gradient(110deg,#181a12,#0f1010);position:relative}.milanoticka-card .project-media{background:linear-gradient(135deg,#eeeae1,#c9c4b9)}.browser{width:100%;border-radius:15px;overflow:hidden;background:white;box-shadow:0 25px 50px rgba(0,0,0,.25)}.browser-top{height:30px;background:#e9e9e9;display:flex;align-items:center;gap:6px;padding:0 10px}.dot{width:7px;height:7px;border-radius:50%;background:#bbb}.browser-screen{padding:0;height:280px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f7f4ed,#ddd8ce);color:#222;font-family:'Space Grotesk';font-size:2.2rem;letter-spacing:-.05em}.browser-screen span{font-size:.75rem;display:block;color:#777;text-align:center;margin-top:8px;font-family:'DM Sans';letter-spacing:0}
.services{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.service{padding:30px 22px;border-right:1px solid var(--line)}.service:last-child{border-right:0}.service b{display:block;font:600 1.2rem 'Space Grotesk';margin-bottom:10px}.service p{color:var(--muted);font-size:.92rem;margin:0}
.contact{padding:120px 0}.contact-box{border:1px solid var(--line);border-radius:30px;padding:60px;background:linear-gradient(135deg,rgba(215,255,63,.09),rgba(255,255,255,.025))}.contact-box h2{font:600 clamp(3rem,6vw,6rem)/.95 'Space Grotesk';letter-spacing:-.06em;margin:12px 0 20px}.contact-box p{color:var(--muted);max-width:600px}.contact-links{display:flex;gap:15px;flex-wrap:wrap;margin-top:30px}.contact-link{padding:13px 18px;border:1px solid var(--line);border-radius:999px}.contact-link:hover{border-color:var(--accent);color:var(--accent)}footer{border-top:1px solid var(--line);padding:28px 0;color:var(--muted);font-size:.85rem}.footer-inner{display:flex;justify-content:space-between;gap:20px}
.case-hero{padding:150px 0 70px}.back{color:var(--muted);font-size:.9rem}.case-title{font:600 clamp(3.4rem,8vw,7rem)/.9 'Space Grotesk';letter-spacing:-.065em;margin:28px 0 20px}.case-sub{font-size:1.2rem;color:var(--muted);max-width:760px}.case-meta{display:flex;gap:10px;flex-wrap:wrap;margin:25px 0}.case-section{padding:65px 0;border-top:1px solid var(--line)}.case-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px}.case-panel{border:1px solid var(--line);background:var(--panel);border-radius:24px;padding:30px}.case-panel h3{font:600 1.6rem 'Space Grotesk';margin-top:0}.case-panel p,.case-panel li{color:var(--muted)}.case-image{border-radius:24px;border:1px solid var(--line);overflow:hidden;background:var(--panel);padding:20px}.case-image img{width:100%;max-height:560px;object-fit:contain}.case-cta{display:flex;gap:12px;flex-wrap:wrap}
.reveal{opacity:0;transform:translateY(25px);transition:opacity .7s ease,transform .7s ease}.reveal.visible{opacity:1;transform:none}
@media(max-width:900px){.hero{grid-template-columns:1fr;gap:35px;padding-top:130px}.hero-visual{min-height:350px}.about-grid,.case-grid{grid-template-columns:1fr}.project,.project.reverse{grid-template-columns:1fr}.project-media{min-height:300px}.services{grid-template-columns:1fr 1fr}.service:nth-child(2){border-right:0}.service:nth-child(3),.service:nth-child(4){border-top:1px solid var(--line)}.service:nth-child(4){border-right:0}.nav-links a:not(.always){display:none}}
@media(max-width:600px){.container{width:min(var(--max),calc(100% - 28px))}.hero h1{font-size:3.35rem}.visual-card img{height:230px}.section{padding:80px 0}.project-info{padding:30px}.project-media{padding:20px}.services{grid-template-columns:1fr}.service{border-right:0!important;border-top:1px solid var(--line)}.service:first-child{border-top:0}.contact-box{padding:35px 25px}.footer-inner{flex-direction:column}.case-hero{padding-top:125px}}
main.container > h1{font:600 clamp(3rem,7vw,6rem)/.95 'Space Grotesk';letter-spacing:-.06em;color:var(--text);text-shadow:none;margin:35px 0 20px}main.container > p{max-width:800px;color:var(--muted)}.btn-back{margin:0!important}.section h3{font:600 1.5rem 'Space Grotesk';color:var(--text)}.section ul{color:var(--muted)}

/* M Studio refinements */
.brand img{width:36px;height:36px;flex:0 0 36px;filter:drop-shadow(0 8px 18px rgba(215,255,63,.14))}
.brand{font-size:1rem}
.brand:hover img{transform:rotate(-3deg) scale(1.03)}
.brand img{transition:transform .25s ease}
.browser-screen{position:relative;overflow:hidden}
.browser-screen:after{content:'milanottica.rs';position:absolute;left:18px;right:18px;bottom:16px;height:6px;border-radius:99px;background:rgba(0,0,0,.09)}
.video-box{border:1px solid var(--line);border-radius:24px;overflow:hidden;background:var(--panel);box-shadow:0 25px 70px rgba(0,0,0,.3)}
.video-box iframe{display:block;width:100%;min-height:450px;border:0}
.case-section .section{padding:0}
.case-panel ul{padding-left:20px}
.case-panel li{margin:8px 0}
@media(max-width:600px){.video-box iframe{min-height:230px;height:230px}.brand{font-size:.92rem}.brand img{width:32px;height:32px;flex-basis:32px}}


/* Mobile navigation + layout polish */
.nav-toggle{display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:12px;background:rgba(17,17,20,.9);align-items:center;justify-content:center;flex-direction:column;gap:6px;cursor:pointer}
.nav-toggle span{display:block;width:18px;height:2px;background:var(--text);border-radius:2px;transition:.25s}
.nav-toggle.open span:first-child{transform:translateY(4px) rotate(45deg)}
.nav-toggle.open span:last-child{transform:translateY(-4px) rotate(-45deg)}
@media(max-width:900px){
  .nav{padding:12px 0}
  .nav-inner{position:relative}
  .nav-toggle{display:flex}
  .nav-links{position:absolute;top:calc(100% + 12px);left:0;right:0;display:none;flex-direction:column;align-items:stretch;gap:0;padding:8px;border:1px solid var(--line);border-radius:18px;background:rgba(17,17,20,.97);backdrop-filter:blur(18px);box-shadow:0 20px 50px rgba(0,0,0,.35)}
  .nav-links.open{display:flex}
  .nav-links a{display:block!important;padding:14px 16px;border-radius:12px;color:var(--text)}
  .nav-links a:hover{background:rgba(215,255,63,.08);color:var(--accent)}
  .hero{min-height:auto;padding-bottom:70px}
  .hero-visual{min-height:330px}
  .visual-card{transform:rotate(1deg);width:min(470px,100%)}
  .project,.project.reverse{min-width:0}
  .project-media,.project-info{min-width:0}
  .project h3,.section-title,.case-title{overflow-wrap:anywhere}
}
@media(max-width:600px){
  .container{width:calc(100% - 28px);max-width:none}
  .brand{min-width:0}
  .brand img{width:32px;height:32px;flex-basis:32px}
  .hero{padding-top:105px;padding-bottom:55px;gap:15px}
  .hero h1{font-size:clamp(2.7rem,14vw,4rem);max-width:100%;margin:16px 0}
  .hero-copy{font-size:1rem}
  .actions{margin-top:22px}
  .actions .btn{width:100%}
  .hero-visual{min-height:270px;margin-top:8px}
  .orb{width:270px;height:270px}
  .visual-card{padding:8px;border-radius:18px}
  .visual-card img{height:190px;border-radius:12px}
  .visual-caption{padding:12px 5px 4px;font-size:.9rem}
  .section{padding:70px 0}
  .section-head{display:block;margin-bottom:30px}
  .section-intro{margin-top:16px}
  .about-grid{gap:30px}
  .about-text{font-size:1.05rem}
  .stats{grid-template-columns:1fr}
  .stat{padding:20px}
  .stat b{font-size:2rem}
  .project{border-radius:20px}
  .project-media{min-height:220px;padding:16px}
  .project-info{padding:24px 20px 28px}
  .project h3{font-size:clamp(1.8rem,9vw,2.7rem)}
  .number{font-size:.7rem}
  .tags{margin:14px 0 20px}
  .tag{font-size:.7rem}
  .services{border-top:1px solid var(--line)}
  .service{padding:24px 4px}
  .contact{padding:70px 0}
  .contact-box{padding:30px 20px;border-radius:22px}
  .contact-box h2{font-size:clamp(2.6rem,12vw,4rem)}
  .contact-links{display:grid;gap:10px}
  .contact-link{text-align:center;overflow-wrap:anywhere}
  .footer-inner{align-items:flex-start}
}


/* Bebe salon project preview */
.bebe-card .project-media{background:linear-gradient(135deg,#f2eee8,#d7ded8);padding:34px}
.bebe-preview{width:100%;max-width:520px;min-height:330px;background:#f8f5f0;color:#18201f;border-radius:18px;overflow:hidden;box-shadow:0 25px 55px rgba(0,0,0,.28);font-family:'DM Sans',sans-serif}
.bebe-preview-top{display:flex;align-items:center;gap:12px;padding:18px 20px;border-bottom:1px solid #dedbd4;background:#fbfaf7}
.bebe-preview-top span{font-family:Georgia,serif;font-style:italic;font-size:1.45rem}
.bebe-preview-top small{font-size:.55rem;letter-spacing:.22em;color:#77736d;flex:1}
.bebe-preview-top b{font-size:1rem;font-weight:400}
.bebe-preview-body{min-height:270px;padding:28px 26px;display:flex;flex-direction:column;align-items:flex-start;background:linear-gradient(120deg,#f6f0ea 0%,#f9f7f3 58%,#dce3de 100%)}
.bebe-preview-body small{letter-spacing:.2em;font-size:.55rem;color:#45645d;margin-bottom:18px}
.bebe-preview-body strong{font-family:Georgia,serif;font-weight:400;font-size:clamp(2rem,4vw,3.4rem);line-height:.95;letter-spacing:-.06em}
.bebe-preview-body span{font-family:Georgia,serif;font-style:italic;font-size:.9rem;margin-top:22px;color:#35584f}
.bebe-preview-body em{margin-top:auto;font-style:normal;font-size:.62rem;letter-spacing:.1em;color:#77736d}
@media(max-width:600px){.bebe-card .project-media{padding:16px}.bebe-preview{min-height:260px}.bebe-preview-body{min-height:210px;padding:22px}.bebe-preview-top{padding:14px}.bebe-preview-top small{font-size:.45rem}}