:root {
     --gold: rgb(247, 183, 86);
     --gold-dim: rgba(247, 183, 86, 0.15);
     --gold-mid: rgba(247, 183, 86, 0.4);
     --black: #060608;
     --deep: #0a0a0f;
     --surface: #0f0f18;
     --surface2: #14141f;
     --text: #e8e0d0;
     --text-muted: #7a7265;
     --white: #f5f0e8;
 }

 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 html {
     scroll-behavior: smooth;
 }

 body {
     background: var(--black);
     color: var(--text);
     font-family: 'Cairo', sans-serif;
     overflow-x: hidden;
 }

 /* ── LANGUAGE SPECIFIC FONTS ── */
 /* Use Cairo for all Arabic translated content */
 [lang="ar"] [data-i18n] {
     font-family: 'Cairo', sans-serif;
 }

 /* Use Cinzel for all English translated content (except original HTML text) */
 [lang="en"] [data-i18n] {
     font-family: 'Cinzel', serif;
 }

 /* ── CURSOR ── */
 body {
     cursor: none;
 }

 .lang-btn {
     background: transparent;
     border: 1px solid var(--gold-mid);
     color: var(--gold);
     padding: 6px 14px;
     font-family: 'Cinzel', serif;
     font-size: 0.7rem;
     font-weight: 700;
     letter-spacing: 0.1em;
     cursor: none;
     transition: all 0.3s ease;
     border-radius: 4px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     line-height: 1;
 }

 .lang-btn:hover {
     background: var(--gold-dim);
     border-color: var(--gold);
     box-shadow: 0 0 15px var(--gold-mid);
 }

 #cursor {
     position: fixed;
     width: 10px;
     height: 10px;
     background: var(--gold);
     border-radius: 50%;
     pointer-events: none;
     z-index: 9999;
     transform: translate(-50%, -50%);
     transition: transform .1s, width .3s, height .3s, opacity .3s;
     mix-blend-mode: difference;
 }

 #cursor-ring {
     position: fixed;
     width: 36px;
     height: 36px;
     border: 1px solid var(--gold-mid);
     border-radius: 50%;
     pointer-events: none;
     z-index: 9998;
     transform: translate(-50%, -50%);
     transition: transform .18s ease, width .3s, height .3s;
 }

 /* ── NOISE TEXTURE ── */
 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.035'/%3E%3C/svg%3E");
     pointer-events: none;
     z-index: 1000;
     opacity: 0.4;
 }

 /* ── NAV ── */
 nav {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     z-index: 500;
     padding: 24px 60px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     background: linear-gradient(to bottom, rgba(6, 6, 8, 0.95) 0%, transparent 100%);
     backdrop-filter: blur(2px);
 }

 .nav-logo {
     font-family: 'Cinzel', serif;
     font-size: 1.1rem;
     font-weight: 900;
     letter-spacing: 0.3em;
     color: var(--gold);
     text-decoration: none;
     display: flex;
     align-items: center;
 }

 .nav-logo img {
     height: 40px;
     width: auto;
     object-fit: contain;
     mix-blend-mode: screen;
 }

 .nav-links {
     display: flex;
     gap: 40px;
     list-style: none;
 }

 .nav-links a {
     font-size: 0.75rem;
     letter-spacing: 0.2em;
     color: var(--text-muted);
     text-decoration: none;
     text-transform: uppercase;
     transition: color .3s;
     font-family: 'Cairo', sans-serif;
 }

 .nav-links a:hover {
     color: var(--gold);
 }

 /* ── HERO ── */
 #hero {
     position: relative;
     height: 100vh;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     overflow: hidden;
     text-align: center;
 }

 .hero-bg {
     position: absolute;
     inset: 0;
     background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(247, 183, 86, 0.06) 0%, transparent 70%),
         radial-gradient(ellipse 40% 40% at 20% 80%, rgba(247, 183, 86, 0.04) 0%, transparent 60%),
         var(--black);
 }

 /* Orbiting rings */
 .orbit-container {
     position: absolute;
     width: 700px;
     height: 700px;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     pointer-events: none;
 }

 .orbit {
     position: absolute;
     border-radius: 50%;
     border: 1px solid;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     animation: spin linear infinite;
 }

 .orbit:nth-child(1) {
     width: 300px;
     height: 300px;
     border-color: rgba(247, 183, 86, 0.12);
     animation-duration: 20s;
 }

 .orbit:nth-child(2) {
     width: 480px;
     height: 480px;
     border-color: rgba(247, 183, 86, 0.07);
     animation-duration: 35s;
     animation-direction: reverse;
 }

 .orbit:nth-child(3) {
     width: 660px;
     height: 660px;
     border-color: rgba(247, 183, 86, 0.04);
     animation-duration: 55s;
 }

 .orbit-dot {
     position: absolute;
     width: 5px;
     height: 5px;
     background: var(--gold);
     border-radius: 50%;
     top: -2.5px;
     left: 50%;
     transform: translateX(-50%);
     box-shadow: 0 0 8px var(--gold);
 }

 @keyframes spin {
     from {
         transform: translate(-50%, -50%) rotate(0deg);
     }

     to {
         transform: translate(-50%, -50%) rotate(360deg);
     }
 }

 .hero-content {
     position: relative;
     z-index: 2;
 }

 .hero-eyebrow {
     font-family: 'Cinzel', serif;
     font-size: 0.7rem;
     letter-spacing: 0.5em;
     color: var(--gold);
     margin-bottom: 28px;
     opacity: 0;
     animation: fadeUp .8s .3s forwards;
 }

 .hero-title {
     font-family: 'Cinzel', serif;
     font-size: clamp(3.5rem, 8vw, 7rem);
     font-weight: 900;
     line-height: 0.9;
     color: var(--white);
     letter-spacing: 0.05em;
     opacity: 0;
     animation: fadeUp .8s .5s forwards;
 }

 .hero-title img {
     max-width: 90%;
     width: 300px;
     height: auto;
     object-fit: contain;
     mix-blend-mode: screen;
 }

 .hero-title span {
     color: var(--gold);
 }

 .hero-subtitle {
     font-family: 'Cormorant Garamond', serif;
     font-size: clamp(1rem, 2vw, 1.4rem);
     font-weight: 300;
     font-style: italic;
     color: var(--text-muted);
     margin-top: 20px;
     letter-spacing: 0.1em;
     opacity: 0;
     animation: fadeUp .8s .7s forwards;
 }

 .hero-tagline {
     font-size: 0.8rem;
     letter-spacing: 0.25em;
     color: rgba(247, 183, 86, 0.6);
     margin-top: 40px;
     text-transform: uppercase;
     opacity: 0;
     animation: fadeUp .8s .9s forwards;
 }

 .hero-scroll {
     position: absolute;
     bottom: 40px;
     left: 50%;
     transform: translateX(-50%);
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 8px;
     opacity: 0;
     animation: fadeUp .8s 1.2s forwards;
 }

 .hero-scroll span {
     font-size: 0.65rem;
     letter-spacing: 0.3em;
     color: var(--text-muted);
 }

 .scroll-line {
     width: 1px;
     height: 50px;
     background: linear-gradient(to bottom, var(--gold), transparent);
     animation: scrollPulse 2s infinite;
 }

 @keyframes scrollPulse {

     0%,
     100% {
         opacity: .3;
         transform: scaleY(1);
     }

     50% {
         opacity: 1;
         transform: scaleY(1.2);
     }
 }

 @keyframes fadeUp {
     from {
         opacity: 0;
         transform: translateY(30px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 /* ── DIVIDER ── */
 .gold-divider {
     width: 100%;
     height: 1px;
     background: linear-gradient(to right, transparent, var(--gold-mid), transparent);
     margin: 0;
 }

 /* ── SECTIONS ── */
 section {
     padding: 120px 60px;
     max-width: 1400px;
     margin: 0 auto;
 }

 .section-label {
     font-family: 'Cinzel', serif;
     font-size: 0.65rem;
     letter-spacing: 0.5em;
     color: var(--gold);
     text-transform: uppercase;
     margin-bottom: 16px;
     display: flex;
     align-items: center;
     gap: 16px;
 }

 .section-label::before {
     content: '';
     width: 30px;
     height: 1px;
     background: var(--gold);
     flex-shrink: 0;
 }

 .section-title {
     font-family: 'Cinzel', serif;
     font-size: clamp(2rem, 4vw, 3.2rem);
     font-weight: 600;
     line-height: 1.1;
     color: var(--white);
     margin-bottom: 30px;
 }

 .section-body {
     font-size: 1rem;
     line-height: 2;
     color: var(--text-muted);
     max-width: 700px;
 }

 /* ── MANIFESTO ── */
 #manifesto {
     background: var(--surface);
     padding: 0;
     max-width: 100%;
 }

 #manifesto .inner {
     max-width: 1400px;
     margin: 0 auto;
     padding: 120px 60px;
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 100px;
     align-items: center;
 }

 .manifesto-quote {
     font-family: 'Cormorant Garamond', serif;
     font-size: clamp(1.6rem, 3vw, 2.4rem);
     font-weight: 300;
     line-height: 1.6;
     color: var(--white);
     font-style: italic;
     border-right: 2px solid var(--gold);
     padding-right: 40px;
 }

 .manifesto-quote em {
     color: var(--gold);
     font-style: normal;
 }

 /* ── PILLARS ── */
 .pillars-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 2px;
     margin-top: 60px;
 }

 .pillar {
     background: var(--surface);
     padding: 50px 40px;
     position: relative;
     overflow: hidden;
     transition: background .4s;
 }

 .pillar::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 2px;
     background: var(--gold);
     transform: scaleX(0);
     transform-origin: left;
     transition: transform .4s;
 }

 .pillar:hover::before {
     transform: scaleX(1);
 }

 .pillar:hover {
     background: var(--surface2);
 }

 .pillar-num {
     font-family: 'Cinzel', serif;
     font-size: 3rem;
     font-weight: 900;
     color: var(--gold-dim);
     line-height: 1;
     margin-bottom: 20px;
 }

 .pillar-title {
     font-family: 'Cinzel', serif;
     font-size: 1rem;
     font-weight: 600;
     color: var(--gold);
     letter-spacing: 0.1em;
     margin-bottom: 16px;
 }

 .pillar-text {
     font-size: 0.9rem;
     line-height: 1.9;
     color: var(--text-muted);
 }

 /* ── COMPANIES ── */
 #companies-full {
     background: var(--black);
 }

 .companies-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 3px;
     margin-top: 60px;
 }

 .company-card {
     background: var(--surface);
     padding: 50px 50px;
     position: relative;
     overflow: hidden;
     transition: transform .4s, background .4s;
     display: flex;
     gap: 30px;
     align-items: flex-start;
 }

 .company-card::after {
     content: '';
     position: absolute;
     inset: 0;
     background: radial-gradient(ellipse 60% 60% at 0% 100%, rgba(247, 183, 86, 0.06) 0%, transparent 70%);
     opacity: 0;
     transition: opacity .5s;
 }

 .company-card:hover {
     background: var(--surface2);
 }

 .company-card:hover::after {
     opacity: 1;
 }

 .company-icon {
     width: 56px;
     height: 56px;
     border: 1px solid var(--gold-mid);
     border-radius: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.5rem;
     flex-shrink: 0;
     transition: border-color .3s, background .3s;
 }

 .company-card:hover .company-icon {
     border-color: var(--gold);
     background: var(--gold-dim);
 }

 .company-info {
     flex: 1;
 }

 .company-name {
     font-family: 'Cinzel', serif;
     font-size: 1rem;
     font-weight: 600;
     color: var(--white);
     letter-spacing: 0.1em;
     margin-bottom: 8px;
 }

 .company-sector {
     font-size: 0.68rem;
     letter-spacing: 0.25em;
     color: var(--gold);
     text-transform: uppercase;
     margin-bottom: 14px;
 }

 .company-desc {
     font-size: 0.88rem;
     line-height: 1.9;
     color: var(--text-muted);
 }

 /* ── ISLAND VISION ── */
 #island {
     background: var(--surface);
     max-width: 100%;
     padding: 0;
 }

 #island .inner {
     max-width: 1400px;
     margin: 0 auto;
     padding: 120px 60px;
     display: grid;
     grid-template-columns: 1.2fr 1fr;
     gap: 80px;
     align-items: center;
 }

 .island-visual {
     position: relative;
     height: 500px;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .island-circle {
     position: absolute;
     border-radius: 50%;
     border: 1px solid;
     animation: pulse-ring 4s ease-in-out infinite;
 }

 .island-circle:nth-child(1) {
     width: 200px;
     height: 200px;
     border-color: rgba(247, 183, 86, 0.5);
     background: radial-gradient(ellipse, rgba(247, 183, 86, 0.1), transparent);
     animation-delay: 0s;
 }

 .island-circle:nth-child(2) {
     width: 320px;
     height: 320px;
     border-color: rgba(247, 183, 86, 0.25);
     animation-delay: .8s;
 }

 .island-circle:nth-child(3) {
     width: 450px;
     height: 450px;
     border-color: rgba(247, 183, 86, 0.1);
     animation-delay: 1.6s;
 }

 @keyframes pulse-ring {

     0%,
     100% {
         transform: scale(1);
         opacity: 1;
     }

     50% {
         transform: scale(1.04);
         opacity: .7;
     }
 }

 .island-center {
     z-index: 2;
     text-align: center;
 }

 .island-center .icon {
     font-size: 3rem;
     display: block;
     margin-bottom: 12px;
 }

 .island-center span {
     font-family: 'Cinzel', serif;
     font-size: 0.7rem;
     letter-spacing: 0.4em;
     color: var(--gold);
 }

 .island-features {
     margin-top: 40px;
     display: flex;
     flex-direction: column;
     gap: 20px;
 }

 .island-feat {
     display: flex;
     gap: 16px;
     align-items: flex-start;
 }

 .feat-dot {
     width: 6px;
     height: 6px;
     background: var(--gold);
     border-radius: 50%;
     margin-top: 8px;
     flex-shrink: 0;
     box-shadow: 0 0 8px var(--gold);
 }

 .feat-text {
     font-size: 0.9rem;
     line-height: 1.8;
     color: var(--text-muted);
 }

 .feat-text strong {
     color: var(--white);
     font-weight: 600;
 }

 /* ── MEMBERSHIP ── */
 #membership {
     text-align: center;
     position: relative;
     overflow: hidden;
 }

 #membership::before {
     content: '';
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 600px;
     height: 600px;
     background: radial-gradient(ellipse, rgba(247, 183, 86, 0.05), transparent 70%);
     pointer-events: none;
 }

 .membership-card {
     display: inline-block;
     background: var(--surface);
     border: 1px solid rgba(247, 183, 86, 0.2);
     padding: 60px 80px;
     margin-top: 50px;
     position: relative;
     max-width: 700px;
     width: 100%;
 }

 .membership-card::before,
 .membership-card::after {
     content: '◆';
     color: var(--gold);
     position: absolute;
     font-size: 0.6rem;
 }

 .membership-card::before {
     top: 16px;
     right: 16px;
 }

 .membership-card::after {
     bottom: 16px;
     left: 16px;
 }

 .membership-steps {
     display: flex;
     flex-direction: column;
     gap: 28px;
     text-align: right;
     margin-top: 40px;
 }

 .mem-step {
     display: flex;
     gap: 20px;
     align-items: flex-start;
     padding: 20px;
     border-right: 2px solid var(--gold-dim);
     transition: border-color .3s;
 }

 .mem-step:hover {
     border-color: var(--gold);
 }

 .step-num {
     font-family: 'Cinzel', serif;
     font-size: 1.4rem;
     font-weight: 900;
     color: var(--gold);
     line-height: 1;
     flex-shrink: 0;
     width: 30px;
 }

 .step-info {}

 .step-title {
     font-family: 'Cinzel', serif;
     font-size: 0.9rem;
     color: var(--white);
     letter-spacing: 0.1em;
     margin-bottom: 6px;
 }

 .step-desc {
     font-size: 0.85rem;
     color: var(--text-muted);
     line-height: 1.7;
 }

 /* ── STATS ── */
 .stats-bar {
     background: var(--surface);
     padding: 0;
     max-width: 100%;
 }

 .stats-bar .inner {
     max-width: 1400px;
     margin: 0 auto;
     padding: 60px;
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 0;
 }

 .stat {
     text-align: center;
     padding: 40px 20px;
     border-left: 1px solid rgba(247, 183, 86, 0.1);
 }

 .stat:first-child {
     border-left: none;
 }

 .stat-num {
     font-family: 'Cinzel', serif;
     font-size: 2.8rem;
     font-weight: 900;
     color: var(--gold);
     display: block;
     line-height: 1;
     margin-bottom: 8px;
 }

 .stat-label {
     font-size: 0.75rem;
     letter-spacing: 0.2em;
     color: var(--text-muted);
     text-transform: uppercase;
 }

 /* ── P2P SYSTEM ── */
 #p2p {
     background: var(--black);
 }

 .p2p-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 1px;
     margin-top: 60px;
     background: rgba(247, 183, 86, 0.05);
 }

 .p2p-node {
     background: var(--black);
     padding: 40px 36px;
     transition: background .3s;
 }

 .p2p-node:hover {
     background: var(--surface);
 }

 .node-icon {
     font-size: 2rem;
     margin-bottom: 20px;
     display: block;
 }

 .node-title {
     font-family: 'Cinzel', serif;
     font-size: 0.85rem;
     color: var(--gold);
     letter-spacing: 0.1em;
     margin-bottom: 12px;
 }

 .node-text {
     font-size: 0.87rem;
     line-height: 1.9;
     color: var(--text-muted);
 }

 /* ── FOOTER ── */
 footer {
     background: var(--deep);
     border-top: 1px solid rgba(247, 183, 86, 0.1);
     padding: 60px;
     text-align: center;
 }

 .footer-logo {
     font-family: 'Cinzel', serif;
     font-size: 1.5rem;
     font-weight: 900;
     color: var(--gold);
     letter-spacing: 0.4em;
     display: flex;
     justify-content: center;
     margin-bottom: 20px;
 }

 .footer-logo img {
     height: 80px;
     width: auto;
     object-fit: contain;
     mix-blend-mode: screen;
 }

 .footer-tagline {
     font-size: 0.75rem;
     letter-spacing: 0.25em;
     color: var(--text-muted);
     margin-bottom: 40px;
     font-style: italic;
     font-family: 'Cormorant Garamond', serif;
 }

 .footer-links {
     display: flex;
     justify-content: center;
     gap: 40px;
     list-style: none;
     margin-bottom: 40px;
 }

 .footer-links a {
     font-size: 0.72rem;
     letter-spacing: 0.2em;
     color: var(--text-muted);
     text-decoration: none;
     text-transform: uppercase;
     transition: color .3s;
 }

 .footer-links a:hover {
     color: var(--gold);
 }

 .footer-copy {
     font-size: 0.72rem;
     color: rgba(122, 114, 101, 0.4);
     letter-spacing: 0.1em;
 }

 /* ── REVEAL ANIMATIONS ── */
 .reveal {
     opacity: 0;
     transform: translateY(40px);
     transition: opacity .8s, transform .8s;
 }

 .reveal.visible {
     opacity: 1;
     transform: translateY(0);
 }

 @media (max-width: 900px) {

     html,
     body {
         overflow-x: hidden;
         width: 100%;
     }

     nav {
         padding: 14px 20px;
         display: flex;
         justify-content: space-between;
         align-items: center;
     }

     .nav-logo img {
         height: 30px;
     }

     .nav-links {
         display: none;
     }

     .lang-btn {
         display: inline-flex;
         padding: 5px 12px;
         font-size: 0.65rem;
         margin: 0;
     }

     section {
         padding: 70px 20px;
         width: 100%;
         box-sizing: border-box;
     }

     #manifesto .inner {
         grid-template-columns: 1fr;
         gap: 40px;
         padding: 70px 20px;
     }

     #island .inner {
         grid-template-columns: 1fr;
         gap: 40px;
         padding: 70px 20px;
     }

     .manifesto-quote {
         border-right: none;
         border-top: 2px solid var(--gold);
         padding: 30px 0 0;
     }

     .pillars-grid {
         grid-template-columns: 1fr;
     }

     .pillar {
         padding: 32px 20px;
     }

     .companies-grid {
         grid-template-columns: 1fr;
     }

     .company-card {
         padding: 28px 20px;
         flex-direction: column;
         gap: 14px;
     }

     .p2p-grid {
         grid-template-columns: 1fr;
     }

     .stats-bar .inner {
         grid-template-columns: repeat(2, 1fr);
         padding: 20px;
     }

     .stat {
         padding: 24px 10px;
         border-left: none;
         border-bottom: 1px solid rgba(247, 183, 86, 0.1);
     }

     .membership-card {
         padding: 30px 16px;
     }

     .mem-step {
         padding: 14px 10px;
     }

     /* ── FIX OVERFLOW ── */
     .orbit-container {
         width: 100vw;
         height: 100vw;
         max-width: 420px;
         max-height: 420px;
     }

     .orbit:nth-child(1) {
         width: 36vw;
         height: 36vw;
     }

     .orbit:nth-child(2) {
         width: 58vw;
         height: 58vw;
     }

     .orbit:nth-child(3) {
         width: 80vw;
         height: 80vw;
     }

     .island-visual {
         height: 260px;
         overflow: hidden;
     }

     .island-circle:nth-child(1) {
         width: 100px;
         height: 100px;
     }

     .island-circle:nth-child(2) {
         width: 175px;
         height: 175px;
     }

     .island-circle:nth-child(3) {
         width: 250px;
         height: 250px;
     }

     footer {
         padding: 40px 20px;
     }

     .footer-links {
         flex-wrap: wrap;
         gap: 14px;
         justify-content: center;
     }

     .section-body {
         max-width: 100%;
     }
 }

 @media (max-width: 480px) {
     .stat-num {
         font-size: 1.8rem;
     }

     .stat-label {
         font-size: 0.65rem;
     }

     .membership-card {
         padding: 24px 12px;
     }

     .section-title {
         font-size: clamp(1.6rem, 6vw, 2.4rem);
     }

     @media (hover: none) and (pointer: coarse) {

         #cursor,
         #cursor-ring {
             display: none !important;
         }

         body {
             cursor: auto;
         }

         .lang-btn {
             cursor: pointer;
         }
     }
 }