*{box-sizing:border-box}

:root{
  --bg:#07110f;
  --bg2:#0b1917;
  --panel:#0e201d;
  --panel2:#122824;
  --text:#f3f5f2;
  --muted:#a9b6b2;
  --line:rgba(255,255,255,.12);
  --accent:#7ac9a6;
  --gold:#d7aa5b;
  --max:1240px
}

html{
  scroll-behavior:smooth
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'DM Sans',sans-serif;
  line-height:1.6;
  overflow-x:hidden
}

body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:50;
  background:
    radial-gradient(circle at 70% 15%,rgba(65,151,126,.12),transparent 32%),
    linear-gradient(180deg,transparent 0%,rgba(0,0,0,.18) 100%)
}

a{
  text-decoration:none;
  color:inherit
}

.container{
  width:min(calc(100% - 64px),var(--max));
  margin:auto
}

.ornament{
  display:none
}

/* =========================
   HEADER
========================= */

header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:100;
  background:rgba(7,17,15,.72);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(255,255,255,.08)
}

.nav{
  min-height:82px;
  display:flex;
  align-items:center;
  gap:28px
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  margin-right:auto
}

.mg{
  font:48px 'Allura';
  color:var(--gold);
  line-height:1
}

.brand b{
  display:block;
  font:600 15px 'DM Sans';
  letter-spacing:.14em;
  color:#fff
}

.brand small{
  display:block;
  font-size:9px;
  letter-spacing:.1em;
  color:#7f938e;
  text-transform:uppercase
}

.links{
  display:flex;
  gap:28px;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.12em
}

.links a{
  padding:31px 0 26px;
  color:#c6d0cd;
  border-bottom:1px solid transparent;
  transition:.3s
}

.links a:hover,
.links .active{
  color:#fff;
  border-color:var(--accent)
}

.contact-btn{
  border:1px solid rgba(255,255,255,.3);
  border-radius:30px;
  padding:11px 18px;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.12em;
  transition:.3s
}

.contact-btn:hover{
  background:#fff;
  color:#07110f
}

.menu{
  display:none;
  color:#fff
}

/* =========================
   HERO
========================= */

.hero{
  min-height:100vh;
  background:
    radial-gradient(circle at 76% 48%,rgba(40,110,91,.35),transparent 28%),
    linear-gradient(115deg,#050b0a 0%,#081714 52%,#07100f 100%);
  position:relative;
  z-index:1;
  overflow:hidden;
  padding-top:82px
}

.hero:after{
  content:"";
  position:absolute;
  right:-12%;
  bottom:-30%;
  width:60vw;
  height:60vw;
  border-radius:50%;
  background:rgba(67,151,125,.08);
  filter:blur(70px)
}

.hero-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:calc(100vh - 82px);
  position:relative;
  z-index:2
}

.hero-text{
  padding:13vh 25px 80px 0;
  align-self:center
}

.eyebrow{
  margin:0;
  color:var(--accent);
  font-size:10px;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase
}

.line{
  width:44px;
  height:1px;
  background:var(--gold);
  margin:18px 0 28px
}

h1,
h2{
  font-family:'DM Sans',sans-serif;
  font-weight:400
}

h1{
  font-size:clamp(52px,6.4vw,94px);
  line-height:.98;
  letter-spacing:-.055em;
  margin:0;
  max-width:760px
}

h1 span{
  color:var(--accent)
}

.script{
  font-size:28px;
  margin:20px 0 18px;
  color:var(--gold);
  font-family:'Allura',cursive
}

.hero-text>p:not(.eyebrow){
  max-width:540px;
  color:#aebbb7;
  font-size:14px;
  line-height:1.85
}

.actions{
  display:flex;
  gap:12px;
  margin:30px 0
}

.btn{
  padding:13px 21px;
  border-radius:4px;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:600;
  border:1px solid rgba(255,255,255,.2);
  transition:.3s
}

.dark{
  background:#f2f4f1;
  color:#07110f
}

.dark:hover{
  transform:translateY(-2px);
  background:var(--accent)
}

.light{
  background:transparent;
  color:#fff
}

.light:hover{
  background:rgba(255,255,255,.08)
}

.values{
  display:flex;
  gap:26px;
  max-width:590px;
  margin-top:42px;
  padding-top:20px;
  border-top:1px solid var(--line);
  border-bottom:0;
  border-left:0;
  border-right:0;
  border-radius:0;
  box-shadow:none;
  background:transparent
}

.values span{
  text-align:left;
  color:var(--gold);
  font-size:18px
}

.values small{
  display:block;
  color:#9caeaa;
  font-size:9px;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-top:3px
}

/* =========================
   PORTRAIT
========================= */

.portrait{
  position:relative;
  min-height:calc(100vh - 82px);
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  justify-content:center
}

.portrait img{
  width:min(100%,640px);
  height:88%;
  object-fit:cover;
  object-position:center 28%;
  display:block;
  mix-blend-mode:normal;
  filter:saturate(.82) contrast(1.03);
  mask-image:linear-gradient(
    to bottom,
    transparent 0%,
    black 13%,
    black 82%,
    transparent 100%
  )
}

.portrait:before{
  content:"";
  position:absolute;
  width:72%;
  height:72%;
  right:3%;
  top:15%;
  border-radius:50%;
  background:radial-gradient(
    circle,
    rgba(79,156,130,.25),
    transparent 65%
  );
  filter:blur(12px)
}

.portrait-glow{
  position:absolute;
  width:260px;
  height:260px;
  border-radius:50%;
  right:12%;
  top:26%;
  background:rgba(215,170,91,.09);
  filter:blur(55px)
}

.portrait-tag{
  position:absolute;
  right:5%;
  top:29%;
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  font-size:8px;
  letter-spacing:.22em;
  color:#8da19c
}

/* =========================
   QUOTE
   DESKTOP = LIJEVA STRANA
========================= */

.quote{
  position:absolute;

  /* NOVO: quote ide na stranu sa zgradama */
  left:5%;
  right:auto;

  bottom:11%;
  width:225px;

  background:rgba(8,23,20,.78);
  border:1px solid rgba(255,255,255,.13);
  backdrop-filter:blur(16px);
  color:#fff;
  padding:19px;
  border-radius:3px;

  z-index:5;
}

.quote b{
  color:var(--gold);
  font-size:38px;
  line-height:.2
}

.quote p{
  font:14px 'Playfair Display';
  margin:8px 0
}

.quote small{
  font-size:9px;
  color:#9ba8a5
}

/* =========================
   SECTIONS
========================= */

.section{
  position:relative;
  z-index:1;
  padding:120px 0;
  background:var(--bg2)
}

.heading{
  text-align:left;
  margin-bottom:45px;
  display:flex;
  align-items:end;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  padding-bottom:25px
}

.heading h2{
  font-size:clamp(38px,5vw,64px);
  letter-spacing:-.04em;
  margin:2px 0 0
}

.divider{
  color:var(--gold);
  font-size:11px
}

.cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px
}

.card{
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.045),
      rgba(255,255,255,.015)
    );
  border:1px solid var(--line);
  border-radius:8px;
  padding:28px 25px;
  min-height:310px;
  display:flex;
  flex-direction:column;
  box-shadow:none;
  transition:
    transform .45s ease,
    border-color .45s ease,
    background .45s ease
}

.card:hover{
  transform:translateY(-7px);
  border-color:rgba(122,201,166,.45);
  background:
    linear-gradient(
      145deg,
      rgba(122,201,166,.09),
      rgba(255,255,255,.015)
    )
}

.icon{
  width:44px;
  height:44px;
  border:1px solid rgba(122,201,166,.3);
  border-radius:50%;
  display:grid;
  place-items:center;
  margin:0 0 30px;
  color:var(--accent);
  font-size:20px;
  background:transparent
}

.card h3{
  font:500 21px/1.18 'DM Sans';
  color:#f0f4f1;
  margin:0 0 15px
}

.card p{
  font-size:11px;
  color:#91a29e;
  line-height:1.75;
  margin:0
}

.card label{
  margin-top:auto;
  padding-top:25px;
  color:var(--gold);
  font-size:8px;
  font-weight:600;
  letter-spacing:.15em
}

.pro label,
.hobby label,
.interest label{
  background:none
}

/* =========================
   ABOUT
========================= */

.about{
  border-top:1px solid var(--line);
  background:#07110f
}

.about-grid{
  display:grid;
  grid-template-columns:.75fr 1.25fr .9fr;
  gap:50px;
  align-items:center
}

.decor-photo{
  min-height:390px;
  border-radius:2px;
  background:
    linear-gradient(
      135deg,
      #123e38,
      #07110f
    );
  border:1px solid var(--line);
  position:relative;
  overflow:hidden;
  padding:30px;
  color:#fff
}

.decor-photo:before{
  content:'';
  position:absolute;
  inset:16px;
  border:1px solid rgba(122,201,166,.22)
}

.decor-photo div{
  font-size:100px;
  color:var(--accent);
  text-align:center;
  margin-top:70px;
  opacity:.65
}

.decor-photo span{
  position:absolute;
  bottom:35px;
  left:42px;
  font:21px 'Playfair Display';
  line-height:1.45;
  color:#dce5e1
}

.about h2{
  font-size:clamp(40px,5vw,65px);
  line-height:1.02;
  letter-spacing:-.05em;
  margin:0 0 20px
}

.about p{
  font-size:12px;
  color:#9caeaa;
  line-height:1.9
}

.signature{
  font-size:31px;
  margin-top:20px;
  color:var(--gold)
}

.stats{
  display:grid;
  grid-template-columns:1fr;
  border:0;
  border-left:1px solid var(--line);
  border-radius:0;
  overflow:visible;
  background:transparent
}

.stats .stat{
  padding:22px 0 22px 28px;
  border-bottom:1px solid var(--line)
}

.stats .stat:last-child{
  border-bottom:0
}

.stats b{
  display:block;
  color:var(--accent);
  font:500 48px/1 'DM Sans';
  letter-spacing:-.05em
}

.stats span{
  display:block;
  font-size:10px;
  color:#eef2ef;
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-top:8px
}

.stats em{
  display:block;
  font-size:9px;
  color:#71837e;
  font-style:normal;
  margin-top:4px
}

/* =========================
   CLOSING / CONTACT / FOOTER
========================= */

.closing{
  position:relative;
  z-index:1;
  background:#0d2420;
  color:#fff;
  text-align:center;
  padding:90px 20px;
  border-top:1px solid var(--line)
}

.closing p{
  font:clamp(25px,4vw,48px)/1.2 'Playfair Display';
  margin:0;
  color:#e9efec
}

.closing b{
  display:block;
  font:32px 'Allura';
  font-weight:400;
  color:var(--gold);
  margin-top:16px
}

.contact{
  background:#0b1917
}

.contact-inner{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:30px
}

.contact h2{
  font-size:clamp(45px,6vw,75px);
  letter-spacing:-.05em;
  margin:0
}

.contact-inner>a{
  color:var(--accent);
  font-weight:500;
  border-bottom:1px solid var(--gold);
  padding-bottom:6px
}

footer{
  position:relative;
  z-index:1;
  background:#050c0b;
  color:#667773;
  padding:20px 0;
  font-size:10px
}

footer .container{
  display:flex;
  justify-content:space-between
}

/* =========================
   LANGUAGES
========================= */

.languages{
  display:flex;
  gap:4px;
  align-items:center;
  margin-left:2px
}

.languages button{
  border:1px solid rgba(255,255,255,.15);
  background:transparent;
  color:#aab8b4;
  font-size:9px;
  font-weight:600;
  padding:5px 6px;
  border-radius:4px;
  cursor:pointer
}

.languages button:hover,
.languages button.selected{
  background:var(--accent);
  color:#07110f;
  border-color:var(--accent)
}

.arabic{
  font-family:'DM Sans',Arial,sans-serif
}

.arabic .brand,
.arabic .nav,
.arabic .contact-inner{
  direction:rtl
}

.arabic .hero-text,
.arabic .about,
.arabic .contact,
.arabic .card,
.arabic .stats{
  direction:rtl
}

.arabic .hero-grid{
  direction:rtl
}

.arabic .portrait{
  direction:ltr
}

.arabic .about-grid{
  direction:rtl
}

.arabic .values{
  direction:rtl
}

.arabic .languages{
  direction:ltr
}

.arabic .quote{
  text-align:right
}

/* =========================
   TABLET
========================= */

@media(max-width:1050px){

  .links{
    gap:17px
  }

  .cards{
    grid-template-columns:repeat(2,1fr)
  }

  .about-grid{
    grid-template-columns:1fr 1.2fr
  }

  .stats{
    grid-column:1/-1;
    grid-template-columns:repeat(4,1fr);
    border-left:0;
    border-top:1px solid var(--line)
  }

  .stats .stat{
    padding:25px 18px;
    border-bottom:0;
    border-right:1px solid var(--line)
  }

  .stats .stat:last-child{
    border-right:0
  }
}

/* =========================
   MOBILE
========================= */

@media(max-width:800px){

  .container{
    width:min(calc(100% - 34px),var(--max))
  }

  .links,
  .contact-btn{
    display:none
  }

  .menu{
    display:block;
    border:0;
    background:none;
    font-size:25px
  }

  .links.open{
    display:flex;
    position:absolute;
    top:82px;
    left:17px;
    right:17px;
    background:rgba(7,17,15,.97);
    backdrop-filter:blur(18px);
    flex-direction:column;
    padding:15px;
    border:1px solid var(--line);
    gap:0
  }

  .links.open a{
    padding:13px;
    border:0
  }

  .hero-grid{
    grid-template-columns:1fr
  }

  .hero-text{
    padding:90px 0 30px
  }

  .portrait{
    min-height:560px
  }

  .portrait img{
    height:92%;
    width:100%;
    object-position:center 28%
  }

  .portrait-tag{
    right:2%;
    top:22%
  }

  /* MOBILE QUOTE */
  .quote{
    right:2%;
    left:auto;
    bottom:7%
  }

  .values{
    gap:18px;
    flex-wrap:wrap
  }

  .values span{
    min-width:70px
  }

  .cards{
    grid-template-columns:1fr
  }

  .about-grid{
    grid-template-columns:1fr
  }

  .stats{
    grid-template-columns:1fr 1fr;
    margin-top:20px
  }

  .stats .stat{
    border-bottom:1px solid var(--line);
    border-right:1px solid var(--line)
  }

  .stats .stat:nth-child(2),
  .stats .stat:nth-child(4){
    border-right:0
  }

  .contact-inner{
    display:block
  }

  .contact-inner>a{
    display:inline-block;
    margin-top:22px
  }
}

/* =========================
   SMALL MOBILE
========================= */

@media(max-width:520px){

  h1{
    font-size:48px
  }

  .brand b{
    font-size:13px
  }

  .brand small{
    display:none
  }

  .languages{
    margin-left:0;
    margin-right:5px
  }

  .languages button{
    padding:5px
  }

  .stats{
    grid-template-columns:1fr
  }

  .stats .stat,
  .stats .stat:nth-child(2),
  .stats .stat:nth-child(4){
    border-right:0
  }

  .stats b{
    font-size:42px
  }

  .heading{
    display:block
  }

  .heading h2{
    margin-top:8px
  }

  .actions{
    flex-wrap:wrap
  }

  .portrait{
    min-height:500px
  }
}