/* ===== RESET ===== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#F5F5F2;
  --bg2:#EAEAE7;
  --surface:#FFFFFF;
  --surface2:#F0F0ED;
  --surface3:#E5E5E2;
  --text:#0A0C10;
  --text2:#4A4D55;
  --text3:#7A7D85;
  --red:#B31217;
  --red-bright:#FF3434;
  --green:#2E8B57;
  --green-bright:#3CB371;
  --warm:#C8943A;
  --blue:#D0D8E5;
  --font:'Inter',sans-serif;
  --font-ar:'Cairo',sans-serif;
  --max-w:680px;
  --px:clamp(16px,4vw,40px);
}
html{scroll-behavior:smooth;cursor:none;font-size:16px}
body{font-family:var(--font-ar);background:var(--bg);color:var(--text);overflow-x:hidden;cursor:none;line-height:1.7;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
::selection{background:var(--red);color:#fff}
a{color:inherit;text-decoration:none;cursor:none}
button,input,textarea,select{cursor:none;font-family:inherit}

/* ===== ATMOSPHERIC LAYERS ===== */
.atmo-layer{position:fixed;inset:0;pointer-events:none;z-index:0}
.atmo-gradient{background:linear-gradient(180deg,var(--bg) 0%,#F0F0ED 30%,#E8E8E5 60%,var(--bg2) 100%)}
.atmo-city{background:linear-gradient(180deg,transparent 70%,rgba(240,240,237,0.8) 100%),radial-gradient(ellipse at 20% 90%,rgba(179,18,23,0.02),transparent 50%),radial-gradient(ellipse at 80% 85%,rgba(200,148,58,0.02),transparent 40%),radial-gradient(ellipse at 50% 100%,rgba(208,216,229,0.3),transparent 60%)}
.atmo-fog{background:linear-gradient(0deg,rgba(245,245,242,0.6) 0%,transparent 30%);animation:fogDrift 20s ease-in-out infinite alternate}
@keyframes fogDrift{0%{opacity:0.3;transform:translateX(-2%)}100%{opacity:0.5;transform:translateX(2%)}}
.atmo-vignette{background:radial-gradient(ellipse at center,transparent 40%,rgba(245,245,242,0.5) 100%)}
.atmo-grain{opacity:0.03;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' 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.5'/%3E%3C/svg%3E");background-size:200px 200px;mix-blend-mode:overlay}
.atmo-reflections{background:linear-gradient(180deg,transparent 60%,rgba(179,18,23,0.01) 80%,rgba(200,148,58,0.01) 100%)}

/* ===== LIGHT SOURCES ===== */
.light{position:fixed;border-radius:50%;pointer-events:none;z-index:0;filter:blur(80px)}
.light-warm{background:rgba(200,148,58,0.08)}
.light-red{background:rgba(179,18,23,0.04)}
.light-1{width:min(500px,80vw);height:min(500px,80vw);top:-100px;right:10%;animation:lightPulse 10s ease-in-out infinite alternate}
.light-2{width:min(400px,70vw);height:min(400px,70vw);bottom:20%;left:-5%;animation:lightPulse 12s 2s ease-in-out infinite alternate}
.light-3{width:min(300px,50vw);height:min(300px,50vw);top:40%;right:5%;animation:lightPulse 8s 4s ease-in-out infinite alternate}
.light-4{width:min(350px,60vw);height:min(350px,60vw);bottom:10%;right:30%;animation:lightPulse 14s 1s ease-in-out infinite alternate}
.light-5{width:min(250px,40vw);height:min(250px,40vw);top:60%;left:20%;animation:lightPulse 11s 3s ease-in-out infinite alternate}
@keyframes lightPulse{0%{opacity:0.4;transform:scale(1)}50%{opacity:0.6;transform:scale(1.05)}100%{opacity:0.5;transform:scale(0.98)}}

/* ===== PARTICLES ===== */
.particles-canvas{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:0.25}

/* ===== CURSOR ===== */
.cursor{position:fixed;width:16px;height:16px;border-radius:50%;border:2px solid var(--red);pointer-events:none;z-index:10000;transform:translate(-50%,-50%);transition:width .35s cubic-bezier(.4,0,.2,1),height .35s cubic-bezier(.4,0,.2,1),border-color .35s,background .35s;display:flex;align-items:center;justify-content:center}
.cursor.active{width:56px;height:56px;background:rgba(179,18,23,0.1);border-color:var(--red)}
.cursor-text{font-family:var(--font);font-size:7px;color:var(--red);letter-spacing:2px;opacity:0;transition:opacity .3s;text-transform:uppercase;font-weight:600}
.cursor.active .cursor-text{opacity:1}

/* ===== HEADER ===== */
.header{position:fixed;top:0;left:0;right:0;z-index:100;padding:0 var(--px);transition:background .4s,backdrop-filter .4s}
.header.scrolled{background:rgba(245,245,242,0.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid rgba(10,12,16,0.06)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:56px}
.header-left{display:flex;align-items:center;gap:10px}
.header-symbol{font-family:var(--font);font-size:18px;font-weight:800;color:var(--red);letter-spacing:-1px}
.header-divider{width:1px;height:14px;background:rgba(10,12,16,0.1)}
.header-title{font-family:var(--font);font-size:10px;letter-spacing:3px;color:var(--text3);font-weight:500}
.header-nav{display:flex;gap:20px}
.nav-link{font-family:var(--font-ar);font-size:13px;color:var(--text3);transition:color .3s;position:relative;padding:4px 0;font-weight:500}
.nav-link::after{content:'';position:absolute;bottom:0;right:0;width:0;height:1px;background:var(--red);transition:width .3s}
.nav-link:hover{color:var(--text)}
.nav-link:hover::after{width:100%}
.nav-link.active{color:var(--text)}
.nav-link.active::after{width:100%}

/* ===== HERO ===== */
.hero{position:relative;z-index:2;min-height:100vh;min-height:100dvh;padding:calc(56px + 32px) var(--px) 60px;display:flex;flex-direction:column;gap:40px}
.hero-top{display:flex;align-items:flex-start;justify-content:space-between;gap:32px}
.hero-content{flex:1;max-width:600px}
.hero-eyebrow{display:flex;align-items:center;gap:8px;margin-bottom:20px}
.eyebrow-line{width:20px;height:1px;background:var(--red)}
.eyebrow-text{font-family:var(--font);font-size:9px;letter-spacing:3px;color:var(--text3);font-weight:500}
.eyebrow-dot{width:3px;height:3px;border-radius:50%;background:var(--red)}
.hero-title{margin-bottom:16px}
.title-line{display:block;font-family:var(--font-ar);font-size:clamp(36px,8vw,68px);font-weight:900;line-height:1.1;letter-spacing:-1px;color:var(--text);opacity:0;transform:translateY(20px);transition:opacity .6s,transform .6s}
.title-line:nth-child(2){transition-delay:.1s}
.title-line:nth-child(3){transition-delay:.2s}
.title-line.revealed{opacity:1;transform:translateY(0)}
.title-accent{color:var(--red)}
.hero-sub{font-family:var(--font-ar);font-size:clamp(14px,2vw,17px);color:var(--text2);margin-bottom:28px;line-height:1.6;opacity:0;transform:translateY(15px);transition:opacity .6s .3s,transform .6s .3s}
.hero-sub.revealed{opacity:1;transform:translateY(0)}
.hero-actions{display:flex;align-items:center;gap:24px;opacity:0;transform:translateY(15px);transition:opacity .6s .4s,transform .6s .4s}
.hero-actions.revealed{opacity:1;transform:translateY(0)}
.btn-primary{display:inline-flex;align-items:center;gap:10px;padding:12px 24px;background:var(--green);border:1px solid rgba(46,139,87,0.3);border-radius:10px;font-family:var(--font-ar);font-size:14px;font-weight:600;color:#fff;transition:all .4s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}
.btn-primary .btn-glow{position:absolute;inset:0;background:linear-gradient(135deg,rgba(60,179,113,0.2),transparent);opacity:0;transition:opacity .4s}
.btn-primary:hover{border-color:rgba(60,179,113,0.5);transform:translateY(-1px);box-shadow:0 4px 20px rgba(46,139,87,0.25);background:var(--green-bright)}
.btn-primary:hover .btn-glow{opacity:1}
.btn-primary:hover .btn-arrow{transform:translateX(-3px)}
.btn-arrow{font-size:16px;transition:transform .3s}
.hero-scroll{display:flex;flex-direction:column;align-items:center;gap:6px}
.scroll-line{width:1px;height:28px;background:linear-gradient(to bottom,var(--red),transparent);animation:scrollPulse 2s infinite}
@keyframes scrollPulse{0%,100%{opacity:0.6}50%{opacity:1}}
.scroll-text{font-family:var(--font);font-size:8px;letter-spacing:2px;color:var(--text3);text-transform:uppercase;font-weight:500}

/* Hero Profiles */
.hero-profiles{display:flex;gap:24px;align-items:center;justify-content:center;flex-shrink:0}
.hero-profile{display:flex;flex-direction:column;align-items:center;gap:10px}
.profile-frame{position:relative;width:150px;height:190px;border-radius:16px;overflow:hidden;box-shadow:0 4px 24px rgba(0,0,0,0.08)}
.profile-reflection{position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,0.15) 0%,transparent 40%);z-index:2;pointer-events:none}
.profile-img{width:100%;height:100%;object-fit:cover;filter:brightness(1.02) contrast(1.02) saturate(1.05);transition:transform .6s cubic-bezier(.4,0,.2,1),filter .6s}
.profile-frame:hover .profile-img{transform:scale(1.04);filter:brightness(1.05) contrast(1.02) saturate(1.1)}
.profile-info{display:flex;align-items:center;gap:6px}
.profile-name{font-family:var(--font);font-size:10px;letter-spacing:1.5px;color:var(--text3);font-weight:500}
.profile-dot{width:4px;height:4px;border-radius:50%;background:var(--red);animation:dotPulse 2s infinite}
@keyframes dotPulse{0%,100%{opacity:1}50%{opacity:0.3}}
.profile-status{font-family:var(--font-ar);font-size:10px;color:var(--text3)}
.profile-name.coming-soon{color:var(--text3);font-style:italic;opacity:0.6}
.dot-muted{background:var(--text3) !important;animation:none !important}

/* Hero Side Cards */
.hero-side{display:flex;gap:10px;margin-top:auto}
.side-card{display:flex;align-items:center;gap:12px;padding:12px 16px;background:rgba(255,255,255,0.7);border:1px solid rgba(10,12,16,0.06);border-radius:10px;backdrop-filter:blur(8px);transition:border-color .3s,transform .3s;flex:1;min-width:0}
.side-card:hover{border-color:rgba(179,18,23,0.2);transform:translateY(-2px)}
.card-num{font-family:var(--font);font-size:10px;font-weight:700;color:var(--red);flex-shrink:0}
.card-content{display:flex;flex-direction:column;gap:1px;min-width:0}
.card-label{font-family:var(--font-ar);font-size:12px;font-weight:600;color:var(--text);white-space:nowrap}
.card-desc{font-family:var(--font-ar);font-size:10px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ===== SECTION ===== */
.section{position:relative;z-index:2;padding:60px var(--px)}
.form-wrapper{max-width:var(--max-w);margin:0 auto}
.form-header{margin-bottom:40px}
.form-number{font-family:var(--font);font-size:clamp(48px,10vw,72px);font-weight:900;color:rgba(10,12,16,0.03);line-height:1;display:block;margin-bottom:-12px;letter-spacing:-3px}
.form-masthead{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.masthead-line{flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(10,12,16,0.08),transparent)}
.masthead-text{font-family:var(--font);font-size:7px;letter-spacing:4px;color:var(--text3);white-space:nowrap;font-weight:500}
.form-title{font-family:var(--font-ar);font-size:clamp(24px,5vw,36px);font-weight:900;margin-bottom:6px;color:var(--text)}
.form-desc{font-family:var(--font-ar);font-size:clamp(13px,2vw,15px);color:var(--text3)}

/* ===== FORM ===== */
.reg-form{display:flex;flex-direction:column;gap:0}
.form-group{margin-bottom:20px;position:relative}
.form-label{display:block;font-family:var(--font-ar);font-size:13px;font-weight:600;color:var(--text2);margin-bottom:6px;letter-spacing:0.3px}
.input-wrap{position:relative}
.form-input{width:100%;background:rgba(255,255,255,0.8);border:1px solid rgba(10,12,16,0.1);border-radius:10px;padding:13px 14px;font-family:var(--font-ar);font-size:15px;color:var(--text);outline:none;transition:border-color .3s,box-shadow .3s;-webkit-appearance:none;appearance:none}
.form-input::placeholder{color:var(--text3)}
.form-input:focus{border-color:rgba(179,18,23,0.4);box-shadow:0 0 0 3px rgba(179,18,23,0.06)}
.input-line{position:absolute;bottom:0;left:12px;right:12px;height:1px;background:var(--red);transform:scaleX(0);transition:transform .4s;transform-origin:right}
.form-group:focus-within .input-line{transform:scaleX(1)}
.form-textarea{resize:vertical;min-height:80px;line-height:1.6}

/* File Upload */
.file-upload{position:relative}
.file-input{position:absolute;inset:0;opacity:0;z-index:2;-webkit-appearance:none;appearance:none}
.file-box{border:1px dashed rgba(10,12,16,0.12);border-radius:10px;padding:24px;text-align:center;transition:border-color .3s,background .3s;background:rgba(255,255,255,0.5)}
.file-input:hover+.file-box,.file-input:focus+.file-box{border-color:rgba(179,18,23,0.3);background:rgba(255,255,255,0.8)}
.file-icon{color:var(--text3);margin-bottom:6px;display:flex;justify-content:center}
.file-text{font-family:var(--font-ar);font-size:13px;color:var(--text3);margin-bottom:2px}
.file-sub{font-family:var(--font);font-size:10px;color:var(--text3);opacity:0.5;letter-spacing:1px}
.file-preview{display:none;align-items:center;justify-content:space-between;background:rgba(255,255,255,0.7);border:1px solid rgba(10,12,16,0.08);border-radius:10px;padding:10px 14px;margin-top:8px}
.file-preview.visible{display:flex}
.preview-name{font-family:var(--font);font-size:11px;color:var(--red);letter-spacing:1px}
.preview-remove{background:none;border:none;color:var(--text3);font-size:18px;padding:4px 8px;transition:color .3s}
.preview-remove:hover{color:var(--red-bright)}

/* Divider */
.form-divider-line{width:100%;height:1px;background:linear-gradient(90deg,transparent,rgba(10,12,16,0.08),transparent);margin:28px 0}

/* ===== iOS SEGMENTED CONTROL (Questions) ===== */
.question-group{background:rgba(255,255,255,0.6);border:1px solid rgba(10,12,16,0.06);border-radius:14px;padding:20px;position:relative;transition:border-color .3s}
.question-group:hover{border-color:rgba(10,12,16,0.1)}
.question-label{color:var(--text) !important;font-size:15px !important;margin-bottom:14px !important}

/* iOS Segmented Control */
.yn-options{display:flex;background:rgba(10,12,16,0.06);border-radius:10px;padding:3px;position:relative;border:1px solid rgba(10,12,16,0.06)}
.yn-option{flex:1;position:relative;z-index:1}
.yn-option input{display:none}
.yn-box{display:flex;align-items:center;justify-content:center;gap:8px;padding:11px 16px;border-radius:8px;transition:all .3s cubic-bezier(.4,0,.2,1);font-family:var(--font-ar);font-size:14px;font-weight:600;color:var(--text3);cursor:none;position:relative;z-index:1}
.yn-box:hover{color:var(--text2)}
.yn-option input:checked+.yn-box{color:var(--text);background:rgba(255,255,255,0.9);box-shadow:0 1px 4px rgba(0,0,0,0.08),0 0 1px rgba(0,0,0,0.05)}
.yn-dot{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:0;transition:opacity .3s,transform .3s;transform:scale(0)}
.yn-option input:checked+.yn-box .yn-dot{opacity:1;transform:scale(1);background:var(--red)}

/* Sub Questions */
.sub-question{display:none;margin-top:14px;padding:16px;background:rgba(245,245,242,0.6);border:1px solid rgba(10,12,16,0.06);border-radius:12px;animation:slideDown .4s ease}
.sub-question.visible{display:block}
@keyframes slideDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.sub-header{display:flex;align-items:center;gap:6px;font-family:var(--font-ar);font-size:13px;font-weight:600;color:var(--red);margin-bottom:12px}
.sub-arrow{font-size:14px;animation:arrowBounce 1.5s infinite}
@keyframes arrowBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}

/* Amount */
.amount-wrap{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.amount-input{max-width:160px;text-align:center;font-size:18px;font-weight:700;font-family:var(--font) !important}
.amount-limit{font-family:var(--font);font-size:10px;color:var(--text3);letter-spacing:1px}
.amount-bar{width:100%;height:4px;background:rgba(10,12,16,0.06);border-radius:2px;overflow:hidden}
.amount-fill{height:100%;width:0;background:linear-gradient(90deg,var(--red),var(--red-bright));border-radius:2px;transition:width .4s}

/* Ad Steps */
.ad-steps{display:flex;flex-direction:column;gap:10px}
.ad-step{display:flex;align-items:center;gap:10px;font-family:var(--font-ar);font-size:13px;color:var(--text2)}
.step-num{width:24px;height:24px;border-radius:50%;background:rgba(179,18,23,0.08);border:1px solid rgba(179,18,23,0.15);display:flex;align-items:center;justify-content:center;font-family:var(--font);font-size:10px;color:var(--red);flex-shrink:0;font-weight:600}
.ad-step strong{color:var(--red);font-weight:700}

/* ===== SUBMIT ===== */
.form-footer{margin-top:8px;padding-top:16px}
.btn-submit{display:inline-flex;align-items:center;gap:10px;padding:13px 28px;background:var(--surface);border:1px solid rgba(179,18,23,0.15);border-radius:10px;font-family:var(--font-ar);font-size:14px;font-weight:700;color:var(--text);transition:all .4s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}
.btn-submit .btn-glow{position:absolute;inset:0;background:linear-gradient(135deg,rgba(179,18,23,0.08),transparent);opacity:0;transition:opacity .4s}
.btn-submit:hover{border-color:rgba(179,18,23,0.3);transform:translateY(-1px);box-shadow:0 4px 24px rgba(179,18,23,0.08)}
.btn-submit:hover .btn-glow{opacity:1}
.btn-submit:hover .btn-arrow{transform:translateX(-3px)}
.btn-arrow{font-size:16px;transition:transform .3s}
.btn-submit.loading{pointer-events:none;opacity:0.7}
.btn-submit.loading .btn-text{opacity:0.7}
.btn-submit:disabled{cursor:not-allowed}

/* ===== SUCCESS ===== */
.form-success{display:none;text-align:center;padding:48px 16px}
.form-success.visible{display:block;animation:fadeUp .6s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.success-icon{width:52px;height:52px;border-radius:50%;background:rgba(179,18,23,0.06);border:1px solid rgba(179,18,23,0.15);display:flex;align-items:center;justify-content:center;color:var(--red);margin:0 auto 16px}
.success-title{font-family:var(--font-ar);font-size:20px;font-weight:900;color:var(--text);margin-bottom:6px}
.success-text{font-family:var(--font-ar);font-size:14px;color:var(--text3);margin-bottom:20px}
.btn-back{background:var(--surface);border:1px solid rgba(10,12,16,0.1);color:var(--text2);padding:10px 20px;border-radius:10px;font-family:var(--font-ar);font-size:13px;font-weight:600;transition:all .3s}
.btn-back:hover{border-color:rgba(10,12,16,0.2);color:var(--text)}

/* ===== FOOTER ===== */
.footer{position:relative;z-index:2;border-top:1px solid rgba(10,12,16,0.06);padding:20px var(--px)}
.footer-inner{display:flex;justify-content:space-between;align-items:center}
.footer-brand{font-family:var(--font);font-size:12px;letter-spacing:3px;color:var(--text3);font-weight:600}
.footer-divider{width:1px;height:12px;background:rgba(10,12,16,0.1)}
.footer-copy{font-family:var(--font);font-size:10px;color:var(--text3);letter-spacing:2px;opacity:0.5}
.footer-collab{text-align:center;font-family:var(--font-ar);font-size:11px;color:var(--text3);opacity:0.4;margin-top:10px;letter-spacing:0.5px}

/* ===== RESPONSIVE — MOBILE ===== */
@media(max-width:768px){
  .cursor{display:none}
  html,body,a,button,input,textarea,select{cursor:auto}
  .header-inner{height:50px}
  .header-title{display:none}
  .header-nav{gap:16px}
  .nav-link{font-size:12px}
  .hero{padding:calc(50px + 24px) 16px 48px;gap:32px}
  .hero-top{flex-direction:column-reverse;align-items:stretch;gap:24px}
  .hero-profiles{justify-content:center;gap:20px}
  .hero-content{max-width:100%}
  .hero-side{flex-direction:column;gap:8px}
  .side-card{min-width:0}
  .section{padding:48px 16px}
  .form-wrapper{max-width:100%}
  .form-header{margin-bottom:32px}
  .form-group{margin-bottom:18px}
  .question-group{padding:16px}
  .yn-options{padding:2px}
  .yn-box{padding:10px 12px;font-size:13px}
  .amount-wrap{flex-direction:column;align-items:stretch}
  .amount-input{max-width:100%;width:100%}
  .btn-submit{width:100%;justify-content:center}
  .footer-inner{flex-direction:column;gap:8px;text-align:center}
}

/* Small phones */
@media(max-width:380px){
  .hero-title .title-line{font-size:clamp(28px,10vw,40px)}
  .form-title{font-size:22px}
  .hero-profiles{gap:16px}
  .profile-frame{width:120px;height:155px}
  .yn-box{padding:9px 10px;font-size:12px}
}

/* ===== REDUCED MOTION ===== */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important}
  .atmo-fog,.light{animation:none}
  .profile-dot{animation:none}
  .scroll-line{animation:none}
  .sub-arrow{animation:none}
}