:root {
    --purple: #6B21C8;
    --purple-light: #9B4DFC;
    --purple-mid: #7C3AED;
    --teal: #00D4B8;
    --teal-dark: #00A896;
    --dark: #08060F;
    --dark-2: #0F0C1A;
    --dark-3: #160F2A;
    --dark-card: #120D22;
    --white: #F5F0FF;
    --white-dim: rgba(245,240,255,0.6);
    --glow-purple: 0 0 40px rgba(107,33,200,0.5);
    --glow-teal: 0 0 40px rgba(0,212,184,0.4);
  }

  *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
  html { scroll-behavior: smooth; }
  body {
    font-family: 'Tajawal', sans-serif;
    background: var(--dark);
    color: var(--white);
    overflow-x: hidden;
    cursor: none;
  }

  /* CUSTOM CURSOR */
  .cursor {
    width:12px; height:12px;
    background:var(--teal); border-radius:50%;
    position:fixed; top:0; left:0;
    pointer-events:none; z-index:9999;
    transform:translate(-50%,-50%);
    transition:transform 0.1s, width 0.3s, height 0.3s, background 0.3s;
    mix-blend-mode:screen;
  }
  .cursor-ring {
    width:36px; height:36px;
    border:1.5px solid rgba(0,212,184,0.5); border-radius:50%;
    position:fixed; top:0; left:0;
    pointer-events:none; z-index:9998;
    transform:translate(-50%,-50%);
    transition:transform 0.18s ease-out, width 0.4s, height 0.4s;
  }

  /* NOISE OVERLAY */
  body::before {
    content:''; position:fixed; inset:0;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
    pointer-events:none; z-index:1000; opacity:0.35;
  }

  /* ===== NAV ===== */
  nav {
    position:fixed; top:0; left:0; right:0;
    z-index:500;
    padding:16px 60px;
    display:flex; align-items:center; justify-content:space-between;
    background:linear-gradient(to bottom,rgba(8,6,15,0.95),transparent);
    backdrop-filter:blur(12px);
    border-bottom:1px solid rgba(107,33,200,0.15);
    transition:all 0.4s;
  }
  nav.scrolled {
    background:rgba(8,6,15,0.97);
    padding:10px 60px;
    border-bottom-color:rgba(107,33,200,0.25);
  }

  /* LOGO IMAGE */
  .nav-logo {
    display:flex; align-items:center;
    text-decoration:none;
    height:54px;
  }
  .nav-logo img {
    height:54px;
    width:auto;
    object-fit:contain;
    transition:transform 0.3s, filter 0.3s;
    filter:drop-shadow(0 0 8px rgba(0,212,184,0.25));
  }
  nav.scrolled .nav-logo img { height:44px; }
  .nav-logo img:hover { transform:scale(1.05); filter:drop-shadow(0 0 14px rgba(0,212,184,0.5)); }

  .nav-links {
    display:flex; gap:32px; list-style:none; align-items:center;
  }
  .nav-links a {
    font-family:'Tajawal',sans-serif;
    font-size:0.95rem; font-weight:500;
    color:var(--white-dim); text-decoration:none;
    transition:color 0.3s; position:relative;
  }
  .nav-links a::after {
    content:''; position:absolute; bottom:-4px; right:0;
    width:0; height:1.5px; background:var(--teal); transition:width 0.3s;
  }
  .nav-links a:hover { color:var(--white); }
  .nav-links a:hover::after { width:100%; }
  .nav-cta {
    background:linear-gradient(135deg,var(--purple),var(--purple-light));
    color:var(--white) !important;
    padding:10px 26px; border-radius:50px;
    font-weight:600 !important;
    transition:box-shadow 0.3s, transform 0.3s !important;
  }
  .nav-cta:hover { box-shadow:var(--glow-purple); transform:translateY(-2px); }
  .nav-cta::after { display:none !important; }

  /* ===== HERO ===== */
  .hero {
    min-height:100vh;
    display:flex; align-items:center; justify-content:center;
    position:relative; overflow:hidden;
    padding:130px 60px 80px;
  }
  .hero-bg {
    position:absolute; inset:0;
    background:
      radial-gradient(ellipse 60% 50% at 20% 50%,rgba(107,33,200,0.25) 0%,transparent 70%),
      radial-gradient(ellipse 50% 60% at 80% 40%,rgba(0,212,184,0.12) 0%,transparent 60%),
      radial-gradient(ellipse 80% 80% at 50% 100%,rgba(107,33,200,0.1) 0%,transparent 70%);
  }
  .hero-grid {
    position:absolute; inset:0;
    background-image:
      linear-gradient(rgba(107,33,200,0.06) 1px,transparent 1px),
      linear-gradient(90deg,rgba(107,33,200,0.06) 1px,transparent 1px);
    background-size:60px 60px;
    mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black 40%,transparent 100%);
  }
  .orb { position:absolute; border-radius:50%; filter:blur(60px); animation:float 8s ease-in-out infinite; pointer-events:none; }
  .orb-1 { width:400px; height:400px; background:rgba(107,33,200,0.25); top:-100px; right:-100px; animation-delay:0s; }
  .orb-2 { width:300px; height:300px; background:rgba(0,212,184,0.15); bottom:-80px; left:-80px; animation-delay:-3s; }
  .orb-3 { width:200px; height:200px; background:rgba(155,77,252,0.2); top:50%; left:50%; transform:translate(-50%,-50%); animation-delay:-5s; }
  @keyframes float { 0%,100%{transform:translateY(0) scale(1);} 50%{transform:translateY(-30px) scale(1.05);} }

  .hero-content { position:relative; z-index:10; text-align:center; max-width:900px; }
  .hero-badge {
    display:inline-flex; align-items:center; gap:8px;
    background:rgba(0,212,184,0.1); border:1px solid rgba(0,212,184,0.3);
    color:var(--teal); font-size:0.85rem; font-weight:600;
    padding:8px 20px; border-radius:50px; margin-bottom:30px;
    animation:fadeInDown 0.8s ease forwards; letter-spacing:0.5px;
  }
  .hero-badge::before {
    content:''; width:6px; height:6px; background:var(--teal);
    border-radius:50%; animation:pulse 2s infinite;
  }
  @keyframes pulse { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:0.5;transform:scale(1.3);} }
  .hero-title {
    font-family:'Cairo',sans-serif; font-size:clamp(2rem,5vw,4.5rem);
    font-weight:900; line-height:1.4; margin-bottom:20px;
    animation:fadeInUp 0.8s 0.2s ease both;
  }
  .hero-title .line-1 { display:block; color:var(--white); }
  .hero-title .line-2 {
    display:block;
    background:linear-gradient(135deg,var(--purple-light),var(--teal));
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  }
  .hero-sub {
    font-size:1.2rem; color:var(--white-dim); line-height:1.8;
    margin-bottom:40px; font-weight:400; animation:fadeInUp 0.8s 0.4s ease both;
  }
  .hero-btns {
    display:flex; gap:16px; justify-content:center; flex-wrap:wrap;
    animation:fadeInUp 0.8s 0.6s ease both;
  }
  .btn-primary {
    background:linear-gradient(135deg,var(--purple),var(--purple-light));
    color:var(--white); padding:16px 40px; border-radius:50px;
    font-size:1rem; font-weight:700; font-family:'Tajawal',sans-serif;
    text-decoration:none; transition:all 0.3s;
    box-shadow:0 0 30px rgba(107,33,200,0.3); border:none; cursor:none;
  }
  .btn-primary:hover { transform:translateY(-3px); box-shadow:0 0 60px rgba(107,33,200,0.6); }
  .btn-outline {
    background:transparent; color:var(--white); padding:16px 40px; border-radius:50px;
    font-size:1rem; font-weight:600; font-family:'Tajawal',sans-serif;
    text-decoration:none; border:1.5px solid rgba(245,240,255,0.2); transition:all 0.3s; cursor:none;
  }
  .btn-outline:hover { border-color:var(--teal); color:var(--teal); box-shadow:var(--glow-teal); }
  .scroll-hint {
    position:absolute; bottom:40px; left:50%; transform:translateX(-50%);
    display:flex; flex-direction:column; align-items:center; gap:8px;
    opacity:0.4; animation:fadeIn 1s 1.2s both;
  }
  .scroll-line {
    width:1px; height:50px;
    background:linear-gradient(to bottom,transparent,var(--teal));
    animation:scrollLine 2s ease-in-out infinite;
  }
  @keyframes scrollLine { 0%,100%{transform:scaleY(0);transform-origin:top;} 50%{transform:scaleY(1);transform-origin:top;} }

  /* ===== STATS BAR ===== */
  .stats-bar {
    background:var(--dark-card);
    border-top:1px solid rgba(107,33,200,0.2);
    border-bottom:1px solid rgba(107,33,200,0.2);
    padding:40px 60px;
    display:grid; grid-template-columns:repeat(4,1fr); gap:20px; position:relative;
  }
  .stat-item { text-align:center; position:relative; }
  .stat-item:not(:last-child)::after {
    content:''; position:absolute; left:0; top:20%; bottom:20%; width:1px;
    background:linear-gradient(to bottom,transparent,rgba(107,33,200,0.4),transparent);
  }
  .stat-num {
    font-family:'Syne',sans-serif; font-size:2.8rem; font-weight:800;
    background:linear-gradient(135deg,var(--white),var(--purple-light));
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; line-height:1;
  }
  .stat-num .accent { color:var(--teal); -webkit-text-fill-color:var(--teal); }
  .stat-label { font-size:0.85rem; color:var(--white-dim); margin-top:6px; font-weight:500; }

  /* ===== SECTIONS ===== */
  section { padding:100px 60px; position:relative; }
  .section-label {
    display:inline-flex; align-items:center; gap:10px;
    font-size:0.8rem; font-weight:700; color:var(--teal);
    letter-spacing:2px; text-transform:uppercase; margin-bottom:16px;
  }
  .section-label::before { content:''; width:30px; height:1.5px; background:var(--teal); }
  .section-title {
    font-family:'Cairo',sans-serif; font-size:clamp(2rem,4vw,3.2rem);
    font-weight:900; line-height:1.2; margin-bottom:16px;
  }
  .section-title em {
    font-style:normal;
    background:linear-gradient(135deg,var(--purple-light),var(--teal));
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  }
  .section-desc { color:var(--white-dim); font-size:1.05rem; line-height:1.8; max-width:600px; }

  /* ===== SERVICES ===== */
  .services { background:var(--dark-2); }
  .services-header { margin-bottom:60px; }
  .services-grid {
    display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
  }
  .service-card {
    background:var(--dark-card);
    border:1px solid rgba(107,33,200,0.15); border-radius:20px;
    padding:36px 30px; transition:all 0.4s; position:relative; overflow:hidden; cursor:none;
  }
  .service-card::before {
    content:''; position:absolute; inset:0;
    background:linear-gradient(135deg,rgba(107,33,200,0.1),transparent);
    opacity:0; transition:opacity 0.4s;
  }
  .service-card:hover { transform:translateY(-8px); border-color:rgba(107,33,200,0.5); }
  .service-card:hover::before { opacity:1; }
  .service-card:hover .service-icon { background:linear-gradient(135deg,var(--purple),var(--purple-light)); box-shadow:var(--glow-purple); }
  .service-icon {
    width:60px; height:60px;
    background:rgba(107,33,200,0.15); border-radius:16px;
    display:flex; align-items:center; justify-content:center;
    font-size:1.6rem; margin-bottom:24px; transition:all 0.4s; color:var(--teal);
  }
  .service-icon i { font-size:1.6rem; }
  .service-card h3 { font-family:'Cairo',sans-serif; font-size:1.25rem; font-weight:700; margin-bottom:12px; }
  .service-card p { color:var(--white-dim); font-size:0.92rem; line-height:1.8; }
  .service-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
  .tag {
    background:rgba(0,212,184,0.1); border:1px solid rgba(0,212,184,0.2);
    color:var(--teal); font-size:0.75rem; padding:4px 12px; border-radius:50px; font-weight:600;
  }

  /* ===== ABOUT ===== */
  .about { background:var(--dark); overflow:hidden; }
  .about-inner { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
  .about-visual { position:relative; height:500px; }
  .about-card-big {
    position:absolute; background:var(--dark-3);
    border:1px solid rgba(107,33,200,0.25); border-radius:24px; padding:30px; width:280px;
  }
  .about-card-big.main {
    top:0; right:0; width:100%; height:280px;
    display:flex; flex-direction:column; justify-content:flex-end;
    background:linear-gradient(135deg,var(--dark-3),rgba(107,33,200,0.15)); overflow:hidden;
  }
  .about-card-big.main::before {
    content:'حرفة'; font-family:'Cairo',sans-serif; font-size:9rem; font-weight:900;
    color:rgba(107,33,200,0.08); position:absolute; top:-20px; right:-10px; line-height:1; pointer-events:none;
  }
  .about-card-big.main .card-title { font-family:'Cairo',sans-serif; font-size:1.5rem; font-weight:900; position:relative; }
  .about-card-big.main .card-sub { color:var(--white-dim); font-size:0.9rem; margin-top:6px; position:relative; }
  .about-float-card {
    position:absolute; background:var(--dark-card);
    border:1px solid rgba(0,212,184,0.2); border-radius:16px;
    padding:20px 24px; display:flex; align-items:center; gap:14px;
  }
  .about-float-card.left { bottom:80px; left:0; animation:float 6s ease-in-out infinite; }
  .about-float-card.bottom { bottom:0; right:30px; animation:float 7s 2s ease-in-out infinite; }
  .afc-icon {
    width:44px; height:44px; background:linear-gradient(135deg,var(--purple),var(--teal));
    border-radius:12px; display:flex; align-items:center; justify-content:center;
    font-size:1.3rem; flex-shrink:0; color:white;
  }
  .afc-text strong { display:block; font-size:1.1rem; font-weight:800; font-family:'Syne',sans-serif; }
  .afc-text span { font-size:0.8rem; color:var(--white-dim); }
  .about-text .features { margin-top:40px; display:flex; flex-direction:column; gap:20px; }
  .feature-row {
    display:flex; align-items:flex-start; gap:16px; padding:20px;
    background:var(--dark-card); border:1px solid rgba(107,33,200,0.1);
    border-radius:14px; transition:border-color 0.3s;
  }
  .feature-row:hover { border-color:rgba(0,212,184,0.3); }
  .feature-dot { width:8px; height:8px; background:var(--teal); border-radius:50%; flex-shrink:0; margin-top:7px; box-shadow:0 0 10px var(--teal); }
  .feature-row h4 { font-size:1rem; font-weight:700; margin-bottom:4px; }
  .feature-row p { font-size:0.88rem; color:var(--white-dim); line-height:1.6; }

  /* ===== PORTFOLIO (PROJECTS) ===== */
  .portfolio { background:var(--dark-2); }
  .portfolio-header { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:50px; flex-wrap:wrap; gap:20px; }
  .portfolio-grid {
    display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
  }
  .portfolio-item {
    border-radius:20px; overflow:hidden; position:relative; cursor:none;
    background:var(--dark-3); border:1px solid rgba(107,33,200,0.12);
    transition:all 0.4s; aspect-ratio:4/3;
    display:flex; align-items:center; justify-content:center;
  }
  .portfolio-item.wide { grid-column:1/3; aspect-ratio:16/7; }
  .portfolio-item:hover { transform:scale(1.02); border-color:rgba(0,212,184,0.3); }
  .pi-bg { position:absolute; inset:0; transition:transform 0.6s; }
  .portfolio-item:hover .pi-bg { transform:scale(1.08); }
  .pi-1 { background:linear-gradient(135deg,#1a0a3a 0%,#2d0070 50%,#003340 100%); }
  .pi-2 { background:linear-gradient(135deg,#0a1a3a 0%,#001060 100%); }
  .pi-3 { background:linear-gradient(135deg,#1a0a2a 0%,#4a007a 100%); }
  .pi-4 { background:linear-gradient(135deg,#001a1a 0%,#003a30 100%); }
  .pi-overlay {
    position:absolute; inset:0;
    background:linear-gradient(to top,rgba(8,6,15,0.9),transparent 50%);
    display:flex; flex-direction:column; justify-content:flex-end;
    padding:28px; transform:translateY(20px); opacity:0; transition:all 0.4s;
  }
  .portfolio-item:hover .pi-overlay { opacity:1; transform:translateY(0); }
  .pi-label { font-size:0.75rem; color:var(--teal); font-weight:700; letter-spacing:1px; text-transform:uppercase; }
  .pi-title { font-family:'Cairo',sans-serif; font-size:1.25rem; font-weight:800; margin-top:4px; }
  .pi-deco { position:absolute; pointer-events:none; opacity:0.3; }
  .pi-circle { width:180px; height:180px; border:2px solid rgba(107,33,200,0.5); border-radius:50%; }

  /* ===== BLOG / ARTICLES ===== */
  .blog { background:var(--dark); }
  .blog-header { margin-bottom:60px; display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:20px; }
  .blog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
  .blog-card {
    background:var(--dark-card); border:1px solid rgba(107,33,200,0.15);
    border-radius:20px; overflow:hidden; transition:all 0.4s; cursor:none;
  }
  .blog-card:hover { transform:translateY(-6px); border-color:rgba(0,212,184,0.3); box-shadow:0 20px 60px rgba(0,0,0,0.4); }
  .blog-img {
    width:100%; aspect-ratio:16/9;
    background:linear-gradient(135deg,var(--dark-3),rgba(107,33,200,0.3));
    display:flex; align-items:center; justify-content:center;
    font-size:3rem; color:rgba(107,33,200,0.4); position:relative; overflow:hidden;
  }
  .blog-img i { font-size:2.8rem; color:rgba(107,33,200,0.35); position:relative; z-index:1; }
  .blog-img::after { content:''; position:absolute; inset:0; background:linear-gradient(to top,var(--dark-card) 0%,transparent 60%); }
  .blog-body { padding:28px; }
  .blog-cat {
    display:inline-block; background:rgba(0,212,184,0.1); border:1px solid rgba(0,212,184,0.2);
    color:var(--teal); font-size:0.72rem; font-weight:700;
    padding:4px 12px; border-radius:50px; margin-bottom:14px; letter-spacing:1px; text-transform:uppercase;
  }
  .blog-card h3 { font-family:'Cairo',sans-serif; font-size:1.1rem; font-weight:700; margin-bottom:10px; line-height:1.5; }
  .blog-card p { color:var(--white-dim); font-size:0.88rem; line-height:1.7; margin-bottom:18px; }
  .blog-meta { display:flex; align-items:center; justify-content:space-between; padding-top:14px; border-top:1px solid rgba(107,33,200,0.1); }
  .blog-date { font-size:0.8rem; color:var(--white-dim); display:flex; align-items:center; gap:6px; }
  .blog-read { font-size:0.82rem; color:var(--teal); font-weight:600; display:flex; align-items:center; gap:4px; text-decoration:none; }
  .blog-read:hover { gap:8px; }
  .blog-read i { transition:transform 0.3s; }
  .blog-read:hover i { transform:translateX(-4px); }

  /* ===== PROCESS ===== */
  .process { background:var(--dark-3); }
  .process-header { text-align:center; margin-bottom:70px; }
  .process-header .section-desc { margin:0 auto; text-align:center; }
  .process-track { position:relative; display:flex; justify-content:space-between; align-items:flex-start; padding:0 40px; }
  .process-line { position:absolute; top:32px; left:10%; right:10%; height:1.5px; background:linear-gradient(to left,var(--purple),var(--teal)); opacity:0.4; }
  .process-step { display:flex; flex-direction:column; align-items:center; gap:20px; flex:1; position:relative; z-index:2; }
  .ps-num {
    width:64px; height:64px; background:var(--dark-card);
    border:1.5px solid rgba(107,33,200,0.4); border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-family:'Syne',sans-serif; font-size:1.3rem; font-weight:800;
    color:var(--purple-light); transition:all 0.4s;
  }
  .process-step:hover .ps-num { background:linear-gradient(135deg,var(--purple),var(--teal)); border-color:transparent; color:white; box-shadow:0 0 30px rgba(107,33,200,0.5); }
  .ps-text { text-align:center; }
  .ps-text h4 { font-size:1rem; font-weight:700; margin-bottom:6px; }
  .ps-text p { font-size:0.82rem; color:var(--white-dim); line-height:1.6; max-width:140px; }

  /* ===== CONTACT ===== */
  .contact { background:var(--dark-2); }
  .contact-inner { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; }
  .contact-info .info-items { margin-top:40px; display:flex; flex-direction:column; gap:24px; }
  .info-item { display:flex; align-items:center; gap:16px; }
  .info-icon {
    width:48px; height:48px; background:rgba(107,33,200,0.15); border-radius:12px;
    display:flex; align-items:center; justify-content:center;
    font-size:1.3rem; border:1px solid rgba(107,33,200,0.2); flex-shrink:0; color:var(--teal);
  }
  .info-text strong { display:block; font-size:0.85rem; color:var(--white-dim); font-weight:500; }
  .info-text span { font-size:1rem; font-weight:700; }
  .contact-form { display:flex; flex-direction:column; gap:20px; }
  .form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  .form-group { display:flex; flex-direction:column; gap:8px; }
  .form-group label { font-size:0.85rem; color:var(--white-dim); font-weight:600; }
  .form-group input, .form-group textarea, .form-group select {
    background:var(--dark-card); border:1.5px solid rgba(107,33,200,0.2); border-radius:12px;
    padding:14px 18px; color:var(--white); font-family:'Tajawal',sans-serif;
    font-size:0.95rem; transition:border-color 0.3s, box-shadow 0.3s; outline:none; resize:none; cursor:none;
  }
  .form-group input:focus, .form-group textarea:focus, .form-group select:focus {
    border-color:var(--teal); box-shadow:0 0 20px rgba(0,212,184,0.15);
  }
  .form-group select option { background:var(--dark-3); }
  .form-group textarea { height:130px; }
  .form-submit {
    background:linear-gradient(135deg,var(--purple),var(--teal)); color:white; border:none;
    padding:16px 40px; border-radius:50px; font-size:1.05rem; font-weight:700;
    font-family:'Tajawal',sans-serif; cursor:none; transition:all 0.3s; align-self:flex-start;
  }
  .form-submit:hover { transform:translateY(-3px); box-shadow:0 10px 40px rgba(107,33,200,0.5); }

  /* ===== FOOTER ===== */
  footer { background:var(--dark); border-top:1px solid rgba(107,33,200,0.2); padding:60px 60px 30px; }
  .footer-top {
    display:flex; justify-content:space-between; align-items:flex-start;
    padding-bottom:40px; border-bottom:1px solid rgba(107,33,200,0.1);
    flex-wrap:wrap; gap:40px;
  }
  .footer-brand { max-width:300px; }

  /* FOOTER LOGO IMAGE */
  .footer-logo-img {
    height:70px; width:auto; object-fit:contain; margin-bottom:16px;
    display:block;
    filter:drop-shadow(0 0 10px rgba(107,33,200,0.3));
  }

  .footer-brand p { color:var(--white-dim); font-size:0.9rem; line-height:1.8; }
  .footer-links h5 { font-size:0.9rem; font-weight:700; margin-bottom:16px; color:var(--teal); letter-spacing:1px; }
  .footer-links ul { list-style:none; display:flex; flex-direction:column; gap:10px; }
  .footer-links a { color:var(--white-dim); text-decoration:none; font-size:0.9rem; transition:color 0.3s; }
  .footer-links a:hover { color:var(--white); }

  /* SOCIAL LINKS with Bootstrap Icons */
  .social-links { display:flex; gap:12px; margin-top:24px; }
  .social-link {
    width:44px; height:44px;
    background:rgba(107,33,200,0.15); border:1px solid rgba(107,33,200,0.25);
    border-radius:10px; display:flex; align-items:center; justify-content:center;
    text-decoration:none; font-size:1.15rem; color:var(--white-dim);
    transition:all 0.3s; cursor:none;
  }
  .social-link:hover {
    background:linear-gradient(135deg,var(--purple),var(--teal));
    border-color:transparent; transform:translateY(-3px);
    box-shadow:0 8px 20px rgba(107,33,200,0.4); color:white;
  }
  .footer-bottom { text-align:center; padding-top:30px; color:var(--white-dim); font-size:0.85rem; }
  .footer-bottom span { color:var(--teal); }

  /* ===== ANIMATIONS ===== */
  @keyframes fadeInUp { from{opacity:0;transform:translateY(30px);} to{opacity:1;transform:translateY(0);} }
  @keyframes fadeInDown { from{opacity:0;transform:translateY(-20px);} to{opacity:1;transform:translateY(0);} }
  @keyframes fadeIn { from{opacity:0;} to{opacity:0.4;} }
  .reveal { opacity:0; transform:translateY(40px); transition:opacity 0.7s ease, transform 0.7s ease; }
  .reveal.visible { opacity:1; transform:translateY(0); }
  .reveal-delay-1 { transition-delay:0.1s; }
  .reveal-delay-2 { transition-delay:0.2s; }
  .reveal-delay-3 { transition-delay:0.3s; }
  .reveal-delay-4 { transition-delay:0.4s; }

  /* ===== RESPONSIVE ===== */
  @media (max-width:900px) {
    nav { padding:14px 20px; }
    .nav-links { display:none; }
    .nav-logo img { height:42px; }
    section { padding:70px 24px; }
    .hero { padding:100px 24px 60px; }
    .stats-bar { padding:30px 24px; grid-template-columns:repeat(2,1fr); gap:30px; }
    .stat-item:nth-child(2)::after,.stat-item:nth-child(4)::after { display:none; }
    .services-grid { grid-template-columns:1fr; }
    .about-inner { grid-template-columns:1fr; }
    .about-visual { display:none; }
    .portfolio-grid { grid-template-columns:1fr; }
    .portfolio-item.wide { grid-column:auto; aspect-ratio:4/3; }
    .blog-grid { grid-template-columns:1fr; }
    .process-track { flex-direction:column; gap:30px; padding:0; }
    .process-line { display:none; }
    .process-step { flex-direction:row; text-align:right; }
    .ps-text p { max-width:none; }
    .contact-inner { grid-template-columns:1fr; }
    .form-row { grid-template-columns:1fr; }
    footer { padding:40px 24px 24px; }
    .footer-top { flex-direction:column; }
  }

  /* ===== SHARED NAV + PAGES ===== */
  .nav-logo,
  .nav-toggle {
    position:relative;
    z-index:502;
  }

  .nav-toggle {
    width:46px;
    height:46px;
    display:none;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:6px;
    background:rgba(18,13,34,0.88);
    border:1px solid rgba(0,212,184,0.24);
    border-radius:14px;
    color:var(--white);
    cursor:none;
    transition:transform 0.3s, border-color 0.3s, box-shadow 0.3s;
  }

  .nav-toggle:hover {
    border-color:rgba(0,212,184,0.55);
    box-shadow:var(--glow-teal);
    transform:translateY(-2px);
  }

  .nav-toggle span {
    width:22px;
    height:2px;
    background:var(--white);
    border-radius:99px;
    transition:transform 0.3s, opacity 0.3s;
  }

  .nav-toggle.active span:nth-child(1) { transform:translateY(8px) rotate(45deg); }
  .nav-toggle.active span:nth-child(2) { opacity:0; }
  .nav-toggle.active span:nth-child(3) { transform:translateY(-8px) rotate(-45deg); }

  .nav-links a.active { color:var(--white); }
  .nav-links a.active::after { width:100%; }

  .service-card,
  .blog-card {
    color:inherit;
    text-decoration:none;
  }

  .service-card { display:block; }
  .portfolio-item { text-decoration:none; color:inherit; }

  .service-card:focus-visible,
  .portfolio-item:focus-visible,
  .blog-card:focus-visible,
  .nav-toggle:focus-visible,
  .btn-primary:focus-visible,
  .btn-outline:focus-visible {
    outline:2px solid var(--teal);
    outline-offset:4px;
  }

  .page-main {
    min-height:100vh;
    background:var(--dark);
    overflow:hidden;
  }

  .page-hero {
    position:relative;
    padding:150px 60px 80px;
    overflow:hidden;
    background:
      radial-gradient(ellipse 55% 55% at 20% 25%,rgba(107,33,200,0.26) 0%,transparent 70%),
      radial-gradient(ellipse 45% 50% at 85% 35%,rgba(0,212,184,0.14) 0%,transparent 64%),
      var(--dark);
  }

  .page-hero::before {
    content:'';
    position:absolute;
    inset:0;
    background-image:
      linear-gradient(rgba(107,33,200,0.055) 1px,transparent 1px),
      linear-gradient(90deg,rgba(107,33,200,0.055) 1px,transparent 1px);
    background-size:58px 58px;
    mask-image:linear-gradient(to bottom,black 0%,transparent 100%);
    pointer-events:none;
  }

  .page-hero > * {
    position:relative;
    z-index:1;
  }

  .breadcrumb {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:22px;
    color:var(--white-dim);
    font-size:0.88rem;
  }

  .breadcrumb a {
    color:var(--teal);
    text-decoration:none;
    font-weight:700;
  }

  .page-hero .section-desc {
    max-width:760px;
  }

  .page-actions {
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    margin-top:34px;
  }

  .page-section {
    padding:80px 60px;
    background:var(--dark-2);
  }

  .page-section.alt {
    background:var(--dark);
  }

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

  .detail-grid {
    display:grid;
    grid-template-columns:minmax(0,1.2fr) minmax(300px,0.8fr);
    gap:32px;
    align-items:start;
  }

  .detail-card,
  .info-panel,
  .article-panel {
    background:var(--dark-card);
    border:1px solid rgba(107,33,200,0.16);
    border-radius:22px;
    padding:30px;
    box-shadow:0 20px 70px rgba(0,0,0,0.22);
  }

  .detail-card h2,
  .info-panel h3,
  .article-panel h2 {
    font-family:'Cairo',sans-serif;
    font-weight:900;
    margin-bottom:14px;
  }

  .detail-card p,
  .article-panel p {
    color:var(--white-dim);
    line-height:1.9;
    margin-bottom:18px;
  }

  .detail-list {
    display:grid;
    gap:14px;
    margin-top:22px;
    list-style:none;
  }

  .detail-list li {
    display:flex;
    gap:12px;
    align-items:flex-start;
    color:var(--white-dim);
    line-height:1.7;
  }

  .detail-list li::before {
    content:'';
    width:9px;
    height:9px;
    margin-top:9px;
    border-radius:50%;
    background:var(--teal);
    box-shadow:0 0 12px rgba(0,212,184,0.8);
    flex-shrink:0;
  }

  .meta-row {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin:22px 0 0;
  }

  .meta-pill {
    display:inline-flex;
    align-items:center;
    gap:7px;
    background:rgba(0,212,184,0.09);
    border:1px solid rgba(0,212,184,0.18);
    color:var(--teal);
    border-radius:99px;
    padding:7px 14px;
    font-size:0.82rem;
    font-weight:700;
  }

  .mini-stat-grid {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:14px;
    margin-top:20px;
  }

  .mini-stat {
    background:rgba(107,33,200,0.12);
    border:1px solid rgba(107,33,200,0.2);
    border-radius:16px;
    padding:18px;
  }

  .mini-stat strong {
    display:block;
    font-family:'Syne',sans-serif;
    font-size:1.7rem;
    color:var(--white);
  }

  .mini-stat span {
    color:var(--white-dim);
    font-size:0.82rem;
  }

  .detail-visual {
    min-height:300px;
    border-radius:24px;
    border:1px solid rgba(0,212,184,0.18);
    background:linear-gradient(135deg,#1a0a3a 0%,#2d0070 50%,#003340 100%);
    position:relative;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:28px;
  }

  .detail-visual::before,
  .detail-visual::after {
    content:'';
    position:absolute;
    border-radius:50%;
    border:1.5px solid rgba(0,212,184,0.26);
  }

  .detail-visual::before {
    width:230px;
    height:230px;
    top:-50px;
    right:-40px;
  }

  .detail-visual::after {
    width:150px;
    height:150px;
    left:30px;
    bottom:24px;
  }

  .detail-visual span {
    position:relative;
    z-index:1;
    font-family:'Cairo',sans-serif;
    font-size:clamp(2.4rem,6vw,4.8rem);
    font-weight:900;
    color:rgba(245,240,255,0.18);
    line-height:1;
  }

  .article-layout {
    display:grid;
    grid-template-columns:minmax(0,0.95fr) minmax(280px,0.35fr);
    gap:28px;
    align-items:start;
  }

  .article-panel {
    font-size:1.04rem;
  }

  .article-panel h3 {
    margin:28px 0 10px;
    font-family:'Cairo',sans-serif;
    font-size:1.35rem;
  }

  .side-cta {
    position:sticky;
    top:105px;
  }

  .empty-state {
    grid-column:1/-1;
    padding:40px;
    border:1px solid rgba(107,33,200,0.16);
    border-radius:20px;
    color:var(--white-dim);
    background:var(--dark-card);
  }

  @media (max-width:900px) {
    body.nav-open { overflow:hidden; }
    nav {
      padding:12px 20px;
      background:rgba(8,6,15,0.97);
    }
    nav.scrolled { padding:10px 20px; }
    .nav-toggle { display:flex; }
    .nav-links {
      display:flex;
      position:fixed;
      top:78px;
      left:20px;
      right:20px;
      flex-direction:column;
      align-items:stretch;
      gap:10px;
      padding:18px;
      background:rgba(15,12,26,0.98);
      border:1px solid rgba(0,212,184,0.18);
      border-radius:22px;
      box-shadow:0 28px 80px rgba(0,0,0,0.48);
      backdrop-filter:blur(18px);
      opacity:0;
      visibility:hidden;
      pointer-events:none;
      transform:translateY(-12px) scale(0.98);
      transition:opacity 0.28s, transform 0.28s, visibility 0.28s;
    }
    nav.scrolled .nav-links { top:70px; }
    .nav-links.open {
      opacity:1;
      visibility:visible;
      pointer-events:auto;
      transform:translateY(0) scale(1);
    }
    .nav-links a {
      display:block;
      width:100%;
      padding:13px 14px;
      text-align:center;
      border-radius:14px;
      border:1px solid rgba(107,33,200,0.16);
      background:rgba(107,33,200,0.07);
    }
    .nav-links a::after { display:none; }
    .nav-cta { padding:13px 14px; }
    .page-hero { padding:118px 24px 60px; }
    .page-section { padding:60px 24px; }
    .list-grid,
    .detail-grid,
    .article-layout {
      grid-template-columns:1fr;
    }
    .side-cta { position:static; }
    .mini-stat-grid { grid-template-columns:1fr; }
  }

  @media (max-width:560px) {
    .hero-title { font-size:clamp(2.35rem,14vw,3.3rem); }
    .hero-sub { font-size:1rem; }
    .btn-primary,
    .btn-outline,
    .form-submit {
      width:100%;
      text-align:center;
    }
    .page-actions { flex-direction:column; }
    .detail-card,
    .info-panel,
    .article-panel {
      padding:22px;
    }
  }

  @media (hover:none), (pointer:coarse) {
    body,
    a,
    button,
    input,
    textarea,
    select,
    .service-card,
    .portfolio-item,
    .blog-card {
      cursor:auto;
    }
    .cursor,
    .cursor-ring {
      display:none;
    }
  }