
:root{
  --bg:#021114;
  --bg-soft:#03191d;
  --panel:#05252b;
  --panel-2:#083a42;
  --text:#f3ffff;
  --muted:#9fd3d1;
  --aqua:#76fff2;
  --cyan:#12c8d2;
  --cyan-2:#48e7f0;
  --orange:#ff9d45;
  --line:rgba(118,255,242,.17);
  --shadow:0 30px 90px rgba(0,0,0,.32);
  --radius:24px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(circle at 18% 10%,rgba(72,231,240,.10),transparent 28%),
    radial-gradient(circle at 82% 18%,rgba(255,157,69,.06),transparent 22%),
    var(--bg);
  color:var(--text);
  font-family:Inter,Segoe UI,Arial,sans-serif;
  line-height:1.6;
  overflow-x:hidden;
}
body[dir="rtl"]{font-family:Arial,"Segoe UI",sans-serif}
a{color:inherit;text-decoration:none}
button{font:inherit}
#signal-canvas{position:fixed;inset:0;z-index:-3;opacity:.5}
.noise{
  position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
}
.topbar{
  position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:50;
  width:min(1180px,calc(100% - 28px));height:72px;padding:0 18px;
  display:flex;align-items:center;justify-content:space-between;
  background:rgba(3,25,29,.78);border:1px solid var(--line);border-radius:22px;
  backdrop-filter:blur(18px);box-shadow:0 14px 50px rgba(0,0,0,.28);
}
.brand{display:flex;align-items:center;gap:12px}
.brand-mark{
  width:42px;height:42px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--cyan-2),var(--cyan));color:#012226;font-weight:900;
  box-shadow:0 0 28px rgba(72,231,240,.28);
}
.brand-copy{display:flex;flex-direction:column;line-height:1.1}
.brand-copy strong{font-size:.95rem}
.brand-copy small{margin-top:5px;color:var(--muted);font-size:.67rem;letter-spacing:.08em;text-transform:uppercase}
.desktop-nav{display:flex;gap:24px}
.desktop-nav a{font-size:.85rem;color:var(--muted);transition:.2s}
.desktop-nav a:hover{color:var(--aqua)}
.top-actions{display:flex;align-items:center;gap:10px}
.lang-toggle{
  border:1px solid var(--line);background:#041d22;color:var(--muted);
  border-radius:999px;padding:8px 11px;cursor:pointer;
}
.lang-option.active{color:var(--aqua);font-weight:800}
.lang-divider{opacity:.35;margin:0 4px}
.menu-toggle{display:none;background:none;border:0;padding:8px;cursor:pointer}
.menu-toggle span{display:block;width:22px;height:2px;background:var(--text);margin:5px}
.mobile-menu{
  position:fixed;z-index:45;top:96px;right:14px;left:14px;padding:18px;
  display:none;flex-direction:column;gap:8px;background:rgba(3,25,29,.97);
  border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow)
}
.mobile-menu.open{display:flex}
.mobile-menu a{padding:12px;border-radius:12px;color:var(--muted)}
.mobile-menu a:hover{background:var(--panel);color:var(--text)}
.section-shell{width:min(1180px,calc(100% - 36px));margin-inline:auto}
.hero{min-height:100vh;padding-top:145px;display:flex;align-items:center}
.hero-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:70px;align-items:center;width:100%}
.eyebrow,.kicker{
  color:var(--aqua);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;font-weight:800
}
.eyebrow{display:flex;align-items:center;gap:10px}
.pulse{width:8px;height:8px;border-radius:50%;background:var(--aqua);box-shadow:0 0 0 0 rgba(118,255,242,.5);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 12px rgba(118,255,242,0)}100%{box-shadow:0 0 0 0 rgba(118,255,242,0)}}
h1{font-size:clamp(3.6rem,7vw,7.5rem);line-height:.94;letter-spacing:-.065em;margin:22px 0 24px}
h1 em{font-style:normal;font-size:.42em;letter-spacing:-.035em;color:var(--muted);display:inline-block;max-width:900px;line-height:1.15}
.hero-lead{max-width:780px;font-size:clamp(1.05rem,1.6vw,1.35rem);color:#c7e8e6}
.hero-actions{display:flex;gap:12px;margin:34px 0}
.button{padding:13px 18px;border-radius:14px;font-weight:800;font-size:.9rem;border:1px solid var(--line);transition:.25s}
.button.primary{background:linear-gradient(135deg,var(--cyan-2),var(--cyan));color:#012226;border:0}
.button.primary:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(18,200,210,.22)}
.button.ghost:hover{background:var(--panel)}
.metric-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:38px}
.metric-row div{padding:15px;border-top:1px solid var(--line)}
.metric-row strong{display:block;color:var(--aqua);font-size:1rem}
.metric-row span{display:block;color:var(--muted);font-size:.78rem;margin-top:5px}
.portrait-card{background:linear-gradient(180deg,rgba(8,58,66,.84),rgba(3,25,29,.92));padding:14px;border:1px solid var(--line);border-radius:32px;box-shadow:var(--shadow);transform:rotate(1.5deg)}
.portrait-frame{position:relative;overflow:hidden;border-radius:24px;aspect-ratio:1/1.08;background:#0a4249}
.portrait-frame img{width:100%;height:100%;object-fit:cover;filter:saturate(.88) contrast(1.04)}
.scanline{position:absolute;inset:0;background:linear-gradient(transparent,rgba(118,255,242,.09),transparent);height:32%;animation:scan 5s linear infinite}
@keyframes scan{from{transform:translateY(-120%)}to{transform:translateY(360%)}}
.identity-card{display:flex;justify-content:space-between;align-items:end;gap:20px;padding:16px 8px 4px}
.identity-card div{display:flex;flex-direction:column}
.identity-card span,.identity-card a{font-size:.78rem;color:var(--muted)}
.identity-card strong{font-size:.9rem}
.content-section{padding:110px 0}
.section-heading{display:flex;align-items:center;gap:16px;margin-bottom:34px}
.section-heading span{font-size:.72rem;color:var(--orange);letter-spacing:.18em}
.section-heading h2{margin:0;font-size:clamp(2rem,4vw,4rem);letter-spacing:-.045em}
.profile-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:64px}
.large-copy{font-size:clamp(1.45rem,2.6vw,2.5rem);line-height:1.3;letter-spacing:-.025em;margin:0}
.profile-points{display:grid;gap:14px}
.profile-points div{background:linear-gradient(145deg,rgba(8,58,66,.56),rgba(5,37,43,.74));padding:20px;border:1px solid var(--line);border-radius:18px}
.profile-points b,.profile-points span{display:block}
.profile-points b{color:var(--aqua);margin-bottom:5px}
.profile-points span{color:var(--muted);font-size:.92rem}
.capability-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.cap-card,.project-card{position:relative;overflow:hidden;background:linear-gradient(145deg,rgba(8,58,66,.54),rgba(3,25,29,.88));border:1px solid var(--line);border-radius:var(--radius);padding:24px;transition:.25s}
.cap-card:hover,.project-card:hover{transform:translateY(-5px);border-color:rgba(118,255,242,.42);box-shadow:0 18px 45px rgba(0,0,0,.24)}
.cap-card>span{color:var(--orange);font-size:.75rem}
.cap-card h3,.project-card h3{font-size:1.25rem;margin:35px 0 10px}
.cap-card p,.project-card p{color:var(--muted);font-size:.93rem}
.company-section{padding-top:90px}
.company-intro{display:grid;grid-template-columns:260px 1fr;gap:40px;align-items:center;padding:28px;background:linear-gradient(135deg,rgba(8,58,66,.7),rgba(3,25,29,.95));border:1px solid var(--line);border-radius:30px}
.company-intro img{width:100%;border-radius:20px}
.company-intro h2{font-size:clamp(2.2rem,5vw,5.1rem);line-height:1;margin:10px 0 18px;letter-spacing:-.055em}
.company-intro p{color:var(--muted);max-width:800px}
.role-equivalents{margin:24px 0 28px;padding:22px;border:1px solid var(--line);border-radius:22px;background:rgba(5,37,43,.52)}
.role-equivalents>span{display:block;color:var(--muted);font-size:.8rem;text-transform:uppercase;letter-spacing:.13em;margin-bottom:14px}
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chips button{border:1px solid var(--line);background:#041d22;color:var(--text);padding:9px 12px;border-radius:999px;cursor:pointer}
.chips button:hover,.chips button.active{background:var(--cyan);color:#012226;border-color:transparent}
#roleDescription{min-height:28px;color:var(--aqua);margin:14px 0 0;font-size:.9rem}
.project-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.project-index{position:absolute;top:18px;right:20px;color:rgba(118,255,242,.22);font-size:2rem;font-weight:900}
body[dir="rtl"] .project-index{right:auto;left:20px}
.tag-row{display:flex;flex-wrap:wrap;gap:7px;margin-top:20px}
.tag-row span{font-size:.7rem;color:var(--aqua);border:1px solid var(--line);border-radius:999px;padding:5px 9px}
.timeline{display:grid;gap:0}
.timeline-item{display:grid;grid-template-columns:180px 1fr;gap:30px;padding:28px 0;border-top:1px solid var(--line)}
.timeline-item:last-child{border-bottom:1px solid var(--line)}
.timeline-item .date{color:var(--orange);font-size:.82rem}
.timeline-item h3{margin:0 0 4px;font-size:1.45rem}
.timeline-item b{color:var(--aqua);font-size:.9rem}
.timeline-item p{color:var(--muted);max-width:850px}
.split-section{display:grid;grid-template-columns:1fr 1fr;gap:70px}
.clean-list{list-style:none;padding:0;margin:0}
.clean-list li{padding:16px 0;border-top:1px solid var(--line);color:var(--muted)}
.contact-section{margin-top:80px;margin-bottom:70px;padding:42px;border:1px solid var(--line);border-radius:30px;background:linear-gradient(135deg,rgba(8,58,66,.7),rgba(3,25,29,.95));display:grid;grid-template-columns:1fr auto;gap:50px;align-items:end}
.contact-section h2{font-size:clamp(2rem,4vw,4.2rem);line-height:1.05;letter-spacing:-.045em;margin:12px 0 0}
.contact-links{display:flex;flex-direction:column;gap:9px;align-items:flex-end}
.contact-links a{color:var(--aqua);font-weight:800}
.phone-link{
  direction:ltr;
  unicode-bidi:isolate;
  display:inline-block;
  text-align:left;
}
footer{width:min(1180px,calc(100% - 36px));margin:0 auto 35px;padding-top:18px;border-top:1px solid var(--line);display:flex;justify-content:space-between;color:var(--muted);font-size:.78rem}
.reveal{opacity:0;transform:translateY(24px);transition:.75s cubic-bezier(.22,.61,.36,1)}
.reveal.visible{opacity:1;transform:none}
@media(max-width:920px){
  .desktop-nav{display:none}.menu-toggle{display:block}
  .hero-grid,.profile-grid,.company-intro,.split-section,.contact-section{grid-template-columns:1fr}
  .hero{padding-top:125px}
  .portrait-card{max-width:520px;transform:none}
  .capability-grid{grid-template-columns:repeat(2,1fr)}
  .company-intro img{max-width:230px}
  .contact-links{align-items:flex-start}
}
@media(max-width:640px){
  .topbar{top:8px;height:66px}
  .brand-copy small{display:none}
  .hero{padding-top:105px}
  h1{font-size:3.25rem}
  .metric-row,.capability-grid,.project-grid{grid-template-columns:1fr}
  .timeline-item{grid-template-columns:1fr;gap:6px}
  .content-section{padding:78px 0}
  .company-intro,.contact-section{padding:22px}
  footer{flex-direction:column;gap:6px}
}
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}
