<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Twister Technologies – About Us</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap" rel="stylesheet">
<style>
:root{
  --primary:#0c5ea9;
  --secondary:#f68523;
  --bg:#fafafa;
  --text:#333;
  --white:#fff;
  --max-width:1200px;
  --transition:.3s ease;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Montserrat',sans-serif;background:var(--bg);color:var(--text);line-height:1.6;}
a{color:inherit;text-decoration:none;}
.container{max-width:var(--max-width);margin:auto;padding:0 1rem;}
header{background:var(--primary);color:var(--white);padding:1rem 0;position:sticky;top:0;z-index:100;}
header .logo{font-weight:700;font-size:1.5rem;}
nav ul{list-style:none;display:flex;gap:1.2rem;}
nav a{color:var(--white);font-weight:600;transition:var(--transition);}
nav a:hover{opacity:.8;}
.hero{height:50vh;background:url('https://images.unsplash.com/photo-1580618850597-e6d91a3d8e22?auto=format&fit=crop&w=2000&q=80') center/cover no-repeat;display:flex;align-items:center;justify-content:center;position:relative;}
.hero::before{content:"";position:absolute; inset:0;background:rgba(0,0,0,.4);}
.hero h1{color:var(--white);font-size:3rem;z-index:1;text-align:center;}
section{padding:5rem 0;}
section h2{font-size:2.5rem;text-align:center;margin-bottom:1.5rem;}
.story, .values, .team, .timeline{max-width:90%;margin:0 auto;}
.story p{font-size:1.15rem;line-height:1.75;margin-bottom:1rem;}
.values-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.5rem;}
.value-card{background:var(--white);padding:1.5rem;border-radius:8px;box-shadow:0 4px 10px rgba(0,0,0,.08);text-align:center;transition:var(--transition);}
.value-card h3{margin-bottom:.75rem;font-size:1.4rem;}
.team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.5rem;}
.member{background:var(--white);padding:1.5rem;border-radius:8px;box-shadow:0 4px 10px rgba(0,0,0,.08);text-align:center;}
.member img{width:120px;height:120px;border-radius:50%;object-fit:cover;margin-bottom:1rem;}
.member h4{margin-bottom:.5rem;font-size:1.25rem;}
.member p{font-size:.95rem;color:#555;}
.timeline{position:relative;padding-left:2rem;}
.timeline::before{content:"";position:absolute;left:12px;width:4px;background:var(--primary);height:100%;}
.timeline-item{margin-bottom:2rem;position:relative;}
.timeline-item:last-child{margin-bottom:0;}
.timeline-dot{content:"";position:absolute;left:0;width:16px;height:16px;background:var(--primary);border-radius:50%;top:.2rem;}
.timeline-item h3{font-size:1.3rem;margin-bottom:.3rem;}
.timeline-item p{font-size:.95rem;color:#555;}
.footer{background:#222;color:#bbb;text-align:center;padding:2rem 1rem;}
.footer a{color:#bbb;transition:var(--transition);}
.footer a:hover{color:var(--secondary);}
@media(max-width:768px){
  .hero h1{font-size:2.5rem;}
  nav ul{flex-direction:column;gap:.8rem;}
  .value-card{font-size:.95rem;}
}
@media(max-width:480px){
  .hero{height:40vh;}
  .hero h1{font-size:2rem;}
}
</style>
</head>
<body>
<header class="container">
<div style="display:flex;justify-content:space-between;align-items:center;">
  <div class="logo">Twister Technologies</div>
  <nav><ul><li><a href="#story">Our Story</a></li><li><a href="#values">Values</a></li><li><a href="#team">Team</a></li><li><a href="#timeline">Timeline</a></li></ul></nav>
</div>
</header>

<section class="hero"><div class="container"><h1>About Twister Technologies</h1></div></section>

<section id="story" class="story container">
<h2>Our Story</h2>
<p>Founded in 2006, Twister Technologies grew from a visionary idea into a full‑stack IT powerhouse, blending marketing insight with technical expertise to create digital experiences that resonate worldwide.</p>
<p>Our portfolio spans from web design and e‑commerce solutions like <strong>Twistify</strong> to bespoke software, social media strategies, and intuitive collaboration tools such as <strong>Fatoura POS</strong> and <strong>Microsoft Teams</strong> integrations. Every project starts with a belief: your business problems are our solutions.</p>
<p>With a foothold in Lebanon and an eye on the global market, we help companies transform more than just their workflows—they become future‑ready, agile, and globally competitive.</p>
</section>

<section id="values" class="values container">
<h2>What Drives Us</h2>
<div class="values-grid">
<div class="value-card"><h3>Quality</h3><p>Delivering industry‑best standards with meticulous attention to detail.</p></div>
<div class="value-card"><h3>Integrity</h3><p>Transparent, honest, and accountable in every partnership.</p></div>
<div class="value-card"><h3>Agility</h3><p>Rapid adaptation to market shifts with iterative, customer‑centric solutions.</p></div>
<div class="value-card"><h3>Collaboration</h3><p>Working hand‑in‑hand with clients as if we were part of their team.</p></div>
</div>
</section>

<section id="team" class="team container">
<h2>Meet the Team</h2>
<div class="team-grid">
<div class="member"><img src="https://picsum.photos/seed/lead/120" alt="Lead"><h4>Alexei Vlasov</h4><p>CEO &amp; Founder – Visionary leader steering digital strategy.</p></div>
<div class="member"><img src="https://picsum.photos/seed/dev/120" alt="Developer"><h4>Leila Mardini</h4><p>Lead Developer – Architect of scalable, secure solutions.</p></div>
<div class="member"><img src="https://picsum.photos/seed/designer/120" alt="Designer"><h4>Youssef Khalil</h4><p>Creative Director – Turning brand stories into visual masterpieces.</p></div>
<div class="member"><img src="https://picsum.photos/seed/marketer/120" alt="Marketer"><h4>Rana Saad</h4><p>Head of Digital Marketing – Driving growth across channels.</p></div>
</div>
</section>

<section id="timeline" class="timeline container">
<h2>Our Journey</h2>
<div class="timeline-item"><span class="timeline-dot"></span><h3>2006</h3><p>Founded in Beirut; focused on web design and small‑business consulting.</p></div>
<div class="timeline-item"><span class="timeline-dot"></span><h3>2010</h3><p>Launched <strong>Twistify</strong>, a full‑stack e‑commerce platform.</p></div>
<div class="timeline-item"><span class="timeline-dot"></span><h3>2015</h3><p>Expanded services to include custom software and integrated POS solutions.</p></div>
<div class="timeline-item"><span class="timeline-dot"></span><h3>2018</h3><p>Introduced <strong>Fatoura POS</strong> and specialized Microsoft Teams integrations.</p></div>
<div class="timeline-item"><span class="timeline-dot"></span><h3>2023</h3><p>Scaled globally, delivering multi‑region projects with Agile methodologies.</p></div>
<div class="timeline-item"><span class="timeline-dot"></span><h3>2024</h3><p>Continuing to pioneer the intersection of business goals and cutting‑edge technology.</p></div>
</section>

<footer class="footer">
<p>&copy; 2024 Twister Technologies.</p>
<p>Contact: <a href="mailto:info@twistertechnologies.com">info@twistertechnologies.com</a></p>
</footer>
</body>
</html>