<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Twister Technologies – Services</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
<style>
:root{
  --clr-primary:#0f6eb8;
  --clr-accent:#ff8c00;
  --clr-bg:#fafafa;
  --clr-text:#333;
  --clr-white:#fff;
  --gap: var(--gap, 24px);
  --radius:6px;
  --transition:.3s ease;
  --max-container:1200px;
}
*{margin:0; padding:0; box-sizing:border-box;}
body{font-family:'Inter',sans-serif; background:var(--clr-bg); color:var(--clr-text); line-height:1.6;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.container{max-width:var(--max-container); margin:auto; padding:0 1rem;}
header{background:var(--clr-primary); color:var(--clr-white); padding:.75rem 0; position:sticky; top:0; z-index:999;}
header .logo{font-weight:700; font-size:1.25rem;}
header nav ul{list-style:none; display:flex; gap:1.5rem;}
header nav a{color:var(--clr-white); font-weight:600; transition:var(--transition);}
header nav a:hover{opacity:.85;}
.hero{background:url('https://images.unsplash.com/photo-1517433828127-a2bde03744c3?auto=format&fit=crop&w=1500&q=80') center/cover no-repeat; color:var(--clr-white); text-align:center; position:relative; overflow:hidden;}
.hero::before{content:""; position:absolute; inset:0; background:rgba(0,0,0,.35);}
.hero .content{position:relative; z-index:1; padding:4rem 1rem;}
.hero h1{font-size:3rem; margin-bottom:.5rem;}
.hero p{font-size:1.25rem; margin-bottom:1.5rem; max-width:700px; margin-left:auto; margin-right:auto;}
.hero a{background:var(--clr-accent); color:var(--clr-primary); padding:.75rem 1.5rem; border-radius:var(--radius); font-weight:600; transition:var(--transition);}
.hero a:hover{background:#ff9f33;}
section{padding:5rem 0;}
section h2{font-size:2.25rem; text-align:center; margin-bottom:2rem;}
.services{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:var(--gap);}
.card{background:var(--clr-white); padding:2rem; border-radius:var(--radius); box-shadow:0 4px 12px rgba(0,0,0,.08); text-align:center; transition:var(--transition);}
.card svg{width:70px; height:70px; margin-bottom:1rem; fill:var(--clr-primary);}
.card h3{font-size:1.4rem; margin-bottom:.75rem;}
.card p{font-size:.95rem; color:#555;}
.card:hover{transform:translateY(-8px); box-shadow:0 8px 16px rgba(0,0,0,.12);}
.callout{background:var(--clr-primary); color:var(--clr-white); text-align:center; padding:4rem 1rem;}
.callout h2{font-size:2.5rem; margin-bottom:.75rem;}
.callout p{font-size:1.15rem; margin-bottom:1.5rem;}
.callout a{background:var(--clr-accent); color:var(--clr-primary); padding:.75rem 1.5rem; border-radius:var(--radius); font-weight:600; transition:var(--transition);}
.callout a:hover{background:#ff9f33;}
footer{background:#222; color:#bbb; text-align:center; padding:2rem 1rem;}
footer a{color:#bbb; transition:var(--transition);}
footer a:hover{color:var(--clr-accent);}
@media(max-width:768px){
  .hero h1{font-size:2.5rem;}
  header nav ul{flex-direction:column; gap:.5rem;}
}
@media(max-width:480px){
  .hero{padding:3rem 1rem;}
  .hero h1{font-size:2rem;}
  .hero p{font-size:1rem;}
}
</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="#services">Services</a></li><li><a href="#contact">Contact</a></li></ul></nav>
  </div>
</header>

<section class="hero">
  <div class="content">
    <h1>Our Services</h1>
    <p>Empowering businesses through innovative digital solutions that turn challenges into opportunities.</p>
    <a href="#services">Explore Services</a>
  </div>
</section>

<section id="services" class="container">
  <h2>What We Offer</h2>
  <div class="services">
    <div class="card">
      <svg viewBox="0 0 64 64">
        <path d="M32 0C14.326 0 0 14.326 0 32s14.326 32 32 32 32-14.326 32-32S49.674 0 32 0zm0 58C17.663 58 6 46.337 6 32S17.663 6 32 6s26 11.663 26 26-11.663 26-26 26zm10-34h-5v-9c0-1.105-.895-2-2-2h-4c-1.105 0-2 .895-2 2v9h-5c-1.105 0-2 .895-2 2v4c0 1.105.895 2 2 2h5v9c0 1.105.895 2 2 2h4c1.105 0 2-.895 2-2v-9h5c1.105 0 2-.895 2-2v-4c0-1.105-.895-2-2-2z"/>
      </svg>
      <h3>Digital Marketing & Social Media</h3>
      <p>Strategic campaigns, engaging content, and proactive community management across all platforms.</p>
    </div>
    <div class="card">
      <svg viewBox="0 0 64 64">
        <path d="M12 2h4v10h-4V2zm12 0h4v10h-4V2zm12 0h4v10h-4V2zm-24 12h4v10h-4v-10zm12 0h4v10h-4v-10zm12 0h4v10h-4v-10zm-12 12h4v10h-4v-10zm12 0h4v10h-4v-10zm-24 12h4v10h-4v-10zm12 0h4v10h-4v-10zm12 0h4v10h-4v-10zM2 48h4v-6h12v6h12v-6h12v6h4v-6h-4v-10h-4v10h-12v-10h-12v10h-4v-10h-4v10h4v-6h-4v6h0z"/>
      </svg>
      <h3>Web Development & E‑Commerce</h3>
      <p>Custom websites and robust online stores powered by Twistify, designed for performance and delight.</p>
    </div>
    <div class="card">
      <svg viewBox="0 0 64 64">
        <path d="M32 2C17.664 2 6 13.664 6 28c0 10.584 5.886 19.651 14.574 24.429-.176.964-.35 2.066-.35 3.571 0 8.227 3.762 17.138 4.293 18.314.14.31.476.485.825.485h6.368c.349 0 .685-.175.825-.485C38.114 50.651 44 41.584 44 31c0-1.505-.174-2.607-.35-3.571C56.114 47.651 62 38.584 62 28 62 13.664 50.336 2 36 2H32zm-4 58c-.25-.55-3-6.745-3-10 0-2.828-2.242-5-5-5s-5 2.172-5 5c0 3.255-2.75 9.45-3 10h16zM10 28c0-10.477 8.523-19 19-19s19 8.523 19 19h-5v-8h-4v8h-4v-8h-4v8H18v-8h-4v8h-4V28h-5z"/>
      </svg>
      <h3>Custom Software & Business Solutions</h3>
      <p>Tailored applications, POS systems like Fatoura, and scalable IT infrastructures.</p>
    </div>
    <div class="card">
      <svg viewBox="0 0 64 64">
        <path d="M62 2H2c-1.105 0-2 .895-2 2v48c0 1.105.895 2 2 2h60c1.105 0 2-.895 2-2V4c0-1.105-.895-2-2-2zm-2 48H4V4h56v46zm-32-10c-5.523 0-10-4.477-10-10s4.477-10 10-10 10 4.477 10 10-4.477 10-10 10zm0-18c-4.411 0-8 3.589-8 8s3.589 8 8 8 8-3.589 8-8-3.589-8-8-8z"/>
      </svg>
      <h3>Branding & Creative Design</h3>
      <p>From logos to full visual identities that capture your brand essence and stand out.</p>
    </div>
  </div>
</section>

<section class="callout" id="contact">
  <h2>Ready to Elevate Your Digital Presence?</h2>
  <p>Let’s collaborate on a solution that drives growth and delivers measurable results.</p>
  <a href="mailto:info@twistertechnologies.com">Get in Touch</a>
</section>

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