:root{
    --paper:#FFFFFF;
    --paper-2:#F5F6F7;
    --card:#FBFBFC;
    --ink:#000505;
    --ink-soft:#2A2E2E;
    --muted:#6A6E6E;
    --line:#E7E9EC;
    --line-strong:#D5D8DC;
    --accent:#246068;
    --accent-2:#1C4E54;
    --accent-deep:#246068;
    --on-accent:#FFFFFF;
    --dark:#000505;
    --dark-2:#0C1212;

    --maxw:1180px;
    --gutter:clamp(18px,4vw,54px);

    --display:"Archivo",-apple-system,system-ui,sans-serif;
    --body:"Inter",-apple-system,system-ui,sans-serif;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0; background:var(--paper); color:var(--ink);
    font-family:var(--body); font-size:16px; line-height:1.6;
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  }
  img{max-width:100%; display:block;}
  a{color:inherit; text-decoration:none;}
  ::selection{background:var(--accent); color:var(--on-accent);}

  .wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter);}
  .label{font-family:var(--body); font-weight:600; font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted);}
  .accent{color:var(--accent-deep);}

  /* ---------- Top strip ---------- */
  .topbar{border-bottom:1px solid var(--line); background:var(--paper);}
  .topbar__row{display:flex; align-items:center; justify-content:space-between; gap:16px; height:46px;}
  .topbar .label{display:flex; align-items:center; gap:10px;}
  .topbar .dash{width:26px; height:1px; background:var(--line-strong);}
  .dotpulse{width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 0 rgba(36,96,104,.5); animation:pulse 2.2s infinite;}
  @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(36,96,104,.45);}70%{box-shadow:0 0 0 7px rgba(36,96,104,0);}100%{box-shadow:0 0 0 0 rgba(36,96,104,0);}}
  @media (max-width:640px){ .topbar__row .t-right{display:none;} }

  /* ---------- Giant wordmark ---------- */
  .mark{padding-top:clamp(14px,2vw,28px); position:relative;}
  .mark__svg{width:100%; height:auto; display:block;}
  .mark__svg text{font-family:var(--display); font-weight:900; fill:var(--ink); font-size:150px; text-transform:uppercase;}

  /* ---------- Hero ---------- */
  .hero{padding-top:clamp(20px,3vw,34px); padding-bottom:clamp(40px,6vw,84px); border-bottom:1px solid var(--line);}
  .hero__grid{display:grid; grid-template-columns:1fr .92fr; gap:clamp(24px,4vw,56px); align-items:center;}
  .hero__hello{margin:0 0 6px;}
  .hero__name{
    font-family:var(--display); font-weight:900; color:var(--ink);
    font-size:clamp(2.6rem,6.4vw,5rem); line-height:.94; letter-spacing:-.03em;
    margin:0 0 16px; text-transform:uppercase;
  }
  .hero__role{font-family:var(--body); font-weight:600; letter-spacing:.16em; text-transform:uppercase; font-size:.8rem; color:var(--accent-deep); margin:0 0 22px;}
  .hero__text{font-size:1.02rem; color:var(--ink-soft); max-width:42ch; margin:0 0 26px;}
  .hero__cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:26px;}
  .btn{display:inline-flex; align-items:center; gap:10px; font-weight:600; font-size:.82rem; letter-spacing:.04em; padding:13px 22px; border-radius:40px; transition:transform .2s ease, background .2s ease, color .2s ease;}
  .btn--solid{background:var(--ink); color:var(--paper);}
  .btn--solid:hover{background:var(--accent); color:var(--on-accent); transform:translateY(-2px);}
  .btn--ghost{border:1px solid var(--line-strong); color:var(--ink);}
  .btn--ghost:hover{border-color:var(--ink); transform:translateY(-2px);}

  /* portrait */
  .hero__media{position:relative; display:grid; place-items:center; min-height:340px;}
  .hero__circle{position:absolute; bottom:6%; left:50%; transform:translateX(-50%);
    width:min(72%,310px); aspect-ratio:1; border-radius:50%;
    background:radial-gradient(120% 120% at 30% 20%, var(--accent) 0%, var(--accent-2) 72%); z-index:0;}
  .hero__cut{position:relative; z-index:1; width:min(96%,430px); height:auto; display:block;
    filter:drop-shadow(0 20px 36px rgba(0,0,0,.20));}
  .badge{position:absolute; z-index:2; right:2%; bottom:6%; width:104px; height:104px;}
  .badge svg{width:100%; height:100%; animation:spin 16s linear infinite;}
  .badge__core{position:absolute; inset:0; margin:auto; width:40px; height:40px; border-radius:50%; background:var(--ink); display:grid; place-items:center;}
  .badge__core::after{content:"↗"; color:var(--paper); font-size:1.1rem;}
  .badge text{font-family:var(--body); font-weight:600; font-size:8.6px; letter-spacing:2.4px; fill:var(--ink); text-transform:uppercase;}
  @keyframes spin{to{transform:rotate(360deg);}}
  @media (prefers-reduced-motion:reduce){ .badge svg{animation:none;} .dotpulse{animation:none;} }
  @media (max-width:820px){ .hero__grid{grid-template-columns:1fr;} .hero__media{order:-1; min-height:300px;} }

  /* ---------- Section scaffold ---------- */
  section{position:relative;}
  .sec{padding-block:clamp(52px,7vw,96px); border-bottom:1px solid var(--line);}
  .sec__head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:clamp(30px,4vw,52px);}
  .sec__title{font-family:var(--display); font-weight:800; font-size:clamp(1.9rem,4.4vw,3.1rem); letter-spacing:-.02em; line-height:1; margin:8px 0 0; text-transform:uppercase;}
  .sec__desc{max-width:46ch; color:var(--muted); font-size:.98rem; margin:0;}
  .link-arrow{display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); border-bottom:2px solid var(--accent); padding-bottom:4px; transition:gap .2s ease;}
  .link-arrow:hover{gap:14px; color:var(--accent-deep);}

  /* ---------- Projects ---------- */
  .projects{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,1.6vw,22px);}
  .proj{background:var(--card); border:1px solid var(--line); border-radius:10px; overflow:hidden; display:flex; flex-direction:column; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;}
  .proj:hover{transform:translateY(-5px); box-shadow:0 18px 40px -22px rgba(28,26,22,.4); border-color:var(--line-strong);}
  .proj__img{aspect-ratio:1/1; background:linear-gradient(160deg,#efefef,#dadada); display:grid; place-items:center; position:relative; overflow:hidden;}
  .proj__img img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1;}
  .proj:nth-child(4n) .proj__img{background:linear-gradient(160deg,#2a2a2a,#181818);}
  .proj__img span{font-family:var(--display); font-weight:800; font-size:2.2rem; color:rgba(26,26,26,.22); letter-spacing:.16em;}
  .proj:nth-child(4n) .proj__img span{color:rgba(211,211,211,.32);}
  .proj__body{padding:16px 16px 20px; display:flex; gap:12px; align-items:flex-start;}
  .proj__num{font-family:var(--display); font-weight:800; color:var(--accent-deep); font-size:1rem; line-height:1.2;}
  .proj__title{font-family:var(--display); font-weight:700; font-size:1.06rem; letter-spacing:-.01em; margin:0 0 3px;}
  .proj__cat{font-size:.74rem; color:var(--muted); letter-spacing:.04em;}
  @media (max-width:900px){ .projects{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:460px){ .projects{grid-template-columns:1fr;} }
  .proj-tabs{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:clamp(24px,3vw,36px);}
  .proj-tab{font-family:var(--body); font-weight:600; font-size:.78rem; letter-spacing:.05em; padding:9px 20px; border-radius:30px; border:1px solid var(--line-strong); background:transparent; color:var(--ink); cursor:pointer; transition:background .2s ease, color .2s ease, border-color .2s ease;}
  .proj-tab:hover{border-color:var(--ink);}
  .proj-tab.is-active{background:var(--accent); border-color:var(--accent); color:var(--on-accent);}
  .proj-empty{padding:clamp(40px,6vw,72px) 20px; text-align:center; color:var(--muted); border:1px dashed var(--line-strong); border-radius:14px; font-family:var(--display); font-weight:600; font-size:1rem;}

  /* ---------- Skills ---------- */
  .skills{display:grid; grid-template-columns:1fr 1.05fr 1fr; gap:clamp(26px,3.4vw,56px); align-items:start;}
  .skill{margin-bottom:20px;}
  .skill__row{display:flex; justify-content:space-between; font-size:.82rem; font-weight:600; margin-bottom:8px;}
  .skill__row .pct{color:var(--accent);}
  .skill__track{height:6px; background:var(--line); border-radius:20px; overflow:hidden;}
  .skill__fill{height:100%; background:var(--ink); border-radius:20px; width:0; transition:width 1.1s cubic-bezier(.2,.7,.2,1);}
  .quote{background:var(--dark); color:var(--paper); border-radius:14px; padding:clamp(24px,3vw,36px);}
  .quote__mark{font-family:var(--display); font-weight:900; font-size:3.4rem; color:var(--accent); line-height:.6;}
  .quote p{font-family:var(--display); font-weight:600; font-size:clamp(1.1rem,1.6vw,1.42rem); line-height:1.35; letter-spacing:-.01em; margin:14px 0 0;}
  .quote .by{margin-top:22px; font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(211,211,211,.6);}
  .feat{display:flex; gap:14px; padding:16px 0; border-top:1px solid var(--line);}
  .feat:first-child{border-top:0; padding-top:0;}
  .feat__ic{flex:none; width:40px; height:40px; border-radius:10px; background:var(--paper-2); border:1px solid var(--line-strong); display:grid; place-items:center; color:var(--accent); font-size:1.1rem;}
  .feat__t{font-family:var(--display); font-weight:700; font-size:.98rem; margin:2px 0 3px;}
  .feat__d{font-size:.82rem; color:var(--muted); line-height:1.5; margin:0;}
  @media (max-width:900px){ .skills{grid-template-columns:1fr;} .quote{order:-1;} }

  /* ---------- Testimonials ---------- */
  .tst{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.8vw,22px);}
  .tcard{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:24px; display:flex; flex-direction:column; gap:16px;}
  .tcard__q{font-family:var(--display); font-weight:800; color:var(--accent); font-size:2rem; line-height:.5;}
  .tcard p{font-size:.92rem; color:var(--ink-soft); line-height:1.55; margin:0; flex:1;}
  .tcard__who{display:flex; align-items:center; gap:12px;}
  .tcard__av{width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent-2)); display:grid; place-items:center; color:#fff; font-family:var(--display); font-weight:700; font-size:.9rem;}
  .tcard__n{font-family:var(--display); font-weight:700; font-size:.9rem;}
  .tcard__r{font-size:.72rem; color:var(--muted);}
  @media (max-width:900px){ .tst{grid-template-columns:1fr;} }

  /* ---------- Footer CTA ---------- */
  .foot{background:var(--dark); color:var(--paper); padding-block:clamp(52px,7vw,96px);}
  .foot__grid{display:grid; grid-template-columns:1.3fr .7fr; gap:clamp(28px,4vw,56px); align-items:center;}
  .foot__big{font-family:var(--display); font-weight:900; font-size:clamp(2.4rem,6.4vw,5.2rem); line-height:.92; letter-spacing:-.03em; margin:0; text-transform:uppercase;}
  .foot__big em{font-style:normal; color:var(--accent);}
  .foot__mail{display:inline-block; max-width:100%; overflow-wrap:anywhere; margin-top:26px; font-family:var(--display); font-weight:700; font-size:clamp(1.05rem,2.4vw,1.7rem); border-bottom:2px solid var(--accent); padding-bottom:4px;}
  .foot__mail:hover{color:var(--accent);}
  .foot__side{display:flex; flex-direction:column; gap:20px;}
  .qr{width:120px; height:120px; border-radius:12px; background:var(--paper); padding:10px; display:grid; grid-template-columns:repeat(6,1fr); grid-template-rows:repeat(6,1fr); gap:3px;}
  .qr i{background:var(--dark); border-radius:2px;}
  .qr i.on{background:var(--dark);} .qr i.off{background:transparent;}
  .foot__social{display:flex; gap:10px; flex-wrap:wrap;}
  .foot__social a{width:40px; height:40px; border-radius:50%; border:1px solid rgba(211,211,211,.28); display:grid; place-items:center; font-size:.7rem; font-weight:600; letter-spacing:.06em; transition:background .2s ease, color .2s ease;}
  .foot__social a:hover{background:var(--accent); border-color:var(--accent); color:var(--on-accent);}
  .foot__social svg{width:18px; height:18px; display:block;}
  .foot__meta{display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-top:44px; padding-top:20px; border-top:1px solid rgba(211,211,211,.16); font-size:.72rem; letter-spacing:.06em; color:rgba(211,211,211,.6);}
  @media (max-width:820px){ .foot__grid{grid-template-columns:1fr;} }

  /* ---------- About ---------- */
  .about{display:grid; grid-template-columns:.82fr 1.18fr; gap:clamp(28px,4.5vw,66px); align-items:center;}
  .about__media{position:relative; max-width:360px;}
  .about__photo{aspect-ratio:4/5; border-radius:14px; overflow:hidden; border:1px solid var(--line);
    background:radial-gradient(120% 100% at 50% 0%, #ededed, #d4d4d4); display:grid; place-items:end center;}
  .about__photo img{width:100%; height:100%; object-fit:cover; object-position:center;}
  .about__stamp{position:absolute; left:-16px; bottom:-16px; background:var(--accent); color:var(--on-accent); border-radius:14px; padding:14px 18px; box-shadow:0 16px 34px -16px rgba(0,0,0,.28);}
  .about__stamp b{font-family:var(--display); font-weight:800; font-size:1.7rem; display:block; line-height:1;}
  .about__stamp span{font-size:.66rem; letter-spacing:.1em; text-transform:uppercase;}
  .about__body p{color:var(--ink-soft); font-size:1.02rem; margin:0 0 1.1em; max-width:54ch;}
  .about__body p.lead{font-family:var(--display); font-weight:600; font-size:clamp(1.15rem,1.8vw,1.5rem); line-height:1.35; color:var(--ink); letter-spacing:-.01em;}
  .about__facts{display:flex; gap:clamp(24px,3vw,44px); flex-wrap:wrap; margin-top:14px; padding-top:22px; border-top:1px solid var(--line);}
  .about__facts .f b{font-family:var(--display); font-weight:800; font-size:1.9rem; display:block; line-height:1; color:var(--ink);}
  .about__facts .f span{font-size:.68rem; color:var(--muted); letter-spacing:.08em; text-transform:uppercase;}
  @media (max-width:820px){ .about{grid-template-columns:1fr;} .about__media{max-width:300px;} }

  /* ---------- Services ---------- */
  .services{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(14px,1.8vw,22px);}
  .svc{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:clamp(22px,2.4vw,30px); display:flex; gap:18px; transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;}
  .svc:hover{transform:translateY(-4px); border-color:var(--line-strong); box-shadow:0 16px 36px -22px rgba(28,26,22,.35);}
  .services .svc:last-child:nth-child(odd){grid-column:1 / -1;}
  .svc__n{font-family:var(--display); font-weight:800; color:var(--accent-deep); font-size:1.1rem; line-height:1.1; flex:none;}
  .svc__t{font-family:var(--display); font-weight:700; font-size:1.18rem; margin:0 0 7px;}
  .svc__d{color:var(--muted); font-size:.92rem; line-height:1.55; margin:0;}
  @media (max-width:640px){ .services{grid-template-columns:1fr;} }

  /* ---------- Process ---------- */
  .process{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2.2vw,30px);}
  .step{position:relative; padding-top:24px;}
  .step::before{content:""; position:absolute; top:5px; left:0; right:0; height:2px; background:var(--line);}
  .step::after{content:""; position:absolute; top:2px; left:0; width:34px; height:8px; border-radius:6px; background:var(--accent);}
  .step__n{font-family:var(--display); font-weight:800; color:var(--accent-deep); font-size:.86rem; letter-spacing:.12em;}
  .step__t{font-family:var(--display); font-weight:700; font-size:1.08rem; margin:9px 0 6px;}
  .step__d{color:var(--muted); font-size:.86rem; line-height:1.5; margin:0;}
  @media (max-width:720px){ .process{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:420px){ .process{grid-template-columns:1fr;} }

  /* ---------- Clients ---------- */
  .clients{display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line);}
  .clients a{border-right:1px solid var(--line); border-bottom:1px solid var(--line); min-height:98px; display:grid; place-items:center; padding:18px 20px; text-align:center; font-family:var(--display); font-weight:700; font-size:1.02rem; letter-spacing:-.01em; color:var(--muted); transition:color .2s ease, background .2s ease;}
  .clients a:hover{color:var(--ink); background:var(--card);}
  @media (max-width:760px){ .clients{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:400px){ .clients{grid-template-columns:1fr;} }
  .partners{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,24px);}
  .partner{background:#fff; border:1px solid var(--line); border-radius:14px; min-height:150px; display:grid; place-items:center; padding:clamp(24px,3vw,40px); transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;}
  .partner:hover{border-color:var(--line-strong); transform:translateY(-3px); box-shadow:0 14px 34px -22px rgba(0,0,0,.3);}
  .partner img{max-width:100%; max-height:72px; width:auto; height:auto; object-fit:contain;}
  @media (max-width:700px){ .partners{grid-template-columns:1fr;} }

  /* ---------- Lightbox proiecte ---------- */
  .proj__img img{cursor:zoom-in;}
  .pg-lightbox{position:fixed; inset:0; z-index:99999; background:rgba(0,5,5,.88); display:grid; place-items:center; padding:24px; opacity:0; transition:opacity .2s ease; cursor:zoom-out;}
  .pg-lightbox.is-open{opacity:1;}
  .pg-lightbox img{max-width:min(92vw,1100px); max-height:88vh; width:auto; height:auto; border-radius:8px; box-shadow:0 30px 80px rgba(0,0,0,.5); cursor:default;}
  .pg-lightbox .pg-lightbox__close{position:absolute; top:12px; right:16px; width:auto !important; height:auto !important; border:none !important; border-radius:0 !important; background:transparent !important; color:var(--accent) !important; font-size:1.7rem; font-weight:400; line-height:1; cursor:pointer; padding:6px; transition:opacity .2s ease; box-shadow:none !important; text-shadow:none !important; appearance:none !important; -webkit-appearance:none !important;}
  .pg-lightbox .pg-lightbox__close:hover{background:transparent !important; opacity:.7;}
  .pg-lightbox .pg-lightbox__close:focus-visible{outline:2px solid var(--accent) !important; outline-offset:2px;}

  /* focus vizibil pentru navigare din tastatura (accesibilitate) */
  a:focus-visible, button:focus-visible, .proj__img img:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px;}
  @media (prefers-reduced-motion:reduce){ .pg-lightbox{transition:none;} html{scroll-behavior:auto;} }

  .flag{position:fixed; right:12px; bottom:12px; z-index:50; background:var(--ink); color:var(--paper); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; padding:7px 11px; border-radius:20px; opacity:.9;}