/* ============================================================
   ROOT & RESET (نفس الكود السابق مع إضافة دعم الزرع اللغوية)
   ============================================================ */
:root {
    --ink: #0B0A08;
    --panel: #14120E;
    --panel-2: #1E1B16;
    --paper: #EDE8DF;
    --gold: #C89B3C;
    --gold-dim: rgba(200, 155, 60, 0.12);
    --clay: #A8442A;
    --smoke: #9B9488;
    --line: rgba(237, 232, 223, 0.07);
    --good: #5C8A5C;
    --bad: #A8442A;
    --maxw: 1180px;
    --radius: 14px;
    --header-h: 72px;
    --transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
* { box-sizing: border-box; margin:0; padding:0; }
html { scroll-behavior: smooth; }
body {
    margin:0; background:var(--ink); color:var(--paper);
    font-family:'IBM Plex Sans Arabic','Segoe UI',sans-serif; line-height:1.7;
    -webkit-font-smoothing:antialiased; min-height:100vh; overflow-x:hidden;
}
html[dir="ltr"] body { font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif; }
html[dir="ltr"] h1,html[dir="ltr"] h2,html[dir="ltr"] h3,html[dir="ltr"] .wordmark { font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif; font-weight:700; }
html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3,html[dir="rtl"] .wordmark { font-family:'Lalezar','Segoe UI',sans-serif; font-weight:400; }
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
ul { margin:0; padding:0; list-style:none; }
h1,h2,h3 { line-height:1.25; margin:0; }
.mono { font-family:'IBM Plex Mono',monospace; }
.container { max-width:var(--maxw); margin-inline:auto; padding-inline:1.25rem; }
section { scroll-margin-top:calc(var(--header-h) + 16px); }
.section { padding-block:clamp(2.5rem,2rem+2vw,4.5rem); }
.section--alt { background:var(--panel); }

/* ===== BACKGROUND ===== */
.bg-cameras { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; opacity:0.07; }
.bg-cameras .cam { position:absolute; font-size:2rem; will-change:transform; user-select:none; color:var(--gold); transition:transform 0.08s ease-out; filter:blur(0.5px); }

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:var(--ink); }
::-webkit-scrollbar-thumb { background:var(--gold); border-radius:999px; }

/* ===== HEADER ===== */
header.site { position:sticky; top:0; z-index:50; height:var(--header-h); display:flex; align-items:center; background:rgba(11,10,8,0.94); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); }
.header-inner { display:flex; align-items:center; justify-content:space-between; width:100%; gap:1rem; }
.wordmark { font-size:1.4rem; color:var(--gold); letter-spacing:0.02em; cursor:pointer; display:flex; flex-direction:column; line-height:1.1; font-family:'Lalezar','Segoe UI',sans-serif; }
.wordmark span { color:var(--smoke); font-family:'IBM Plex Mono',monospace; font-size:0.55rem; letter-spacing:0.15em; font-weight:400; text-transform:uppercase; }
nav.main-nav ul { display:flex; gap:1.8rem; align-items:center; }
nav.main-nav a { font-size:0.9rem; color:var(--paper); opacity:0.7; cursor:pointer; transition:opacity var(--transition),color var(--transition); position:relative; }
nav.main-nav a::after { content:''; position:absolute; bottom:-4px; left:0; right:0; height:2px; background:var(--gold); transform:scaleX(0); transition:transform var(--transition); }
nav.main-nav a:hover, nav.main-nav a.active { opacity:1; color:var(--gold); }
nav.main-nav a.active::after { transform:scaleX(1); }
.header-actions { display:flex; align-items:center; gap:0.6rem; }
.lang-buttons { display:flex; gap:0.3rem; }
.lang-btn { background:var(--panel-2); border:1px solid var(--line); color:var(--paper); border-radius:6px; padding:0.2rem 0.5rem; cursor:pointer; font-size:0.7rem; font-weight:700; transition:border-color var(--transition),background var(--transition); font-family:inherit; }
.lang-btn.active { border-color:var(--gold); background:var(--gold-dim); color:var(--gold); }
.lang-btn:hover { border-color:var(--gold); }
.nav-toggle { display:none; background:none; border:1px solid var(--line); border-radius:8px; width:40px; height:40px; color:var(--paper); font-size:1.2rem; cursor:pointer; transition:border-color var(--transition); }
.nav-toggle:hover { border-color:var(--gold); }
.cart-btn { position:relative; background:var(--panel-2); border:1px solid var(--line); border-radius:8px; width:40px; height:40px; display:flex; align-items:center; justify-content:center; color:var(--paper); cursor:pointer; transition:border-color var(--transition); }
.cart-btn:hover { border-color:var(--gold); }
.cart-btn svg { width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:1.6; }
.cart-badge { position:absolute; top:-6px; left:-6px; background:var(--clay); color:var(--paper); font-size:0.6rem; font-family:'IBM Plex Mono',monospace; border-radius:50%; width:19px; height:19px; display:flex; align-items:center; justify-content:center; font-weight:600; }

@media (max-width:920px) {
    nav.main-nav { position:absolute; top:var(--header-h); right:0; left:0; background:var(--ink); border-bottom:1px solid var(--line); max-height:0; overflow:hidden; transition:max-height 0.35s ease; }
    nav.main-nav.open { max-height:480px; }
    nav.main-nav ul { flex-direction:column; align-items:flex-start; gap:0; padding:0.5rem 1.25rem 1.25rem; }
    nav.main-nav li { width:100%; border-bottom:1px solid var(--line); }
    nav.main-nav a { display:block; padding:0.8rem 0; }
    nav.main-nav a::after { display:none; }
    .nav-toggle { display:inline-flex; align-items:center; justify-content:center; }
}

/* ===== FOOTER ===== */
footer.site { background:var(--panel); border-top:1px solid var(--line); padding-block:2.5rem; position:relative; z-index:1; }
.footer-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2rem; margin-bottom:1.5rem; }
footer.site h4 { font-size:0.88rem; color:var(--gold); margin-bottom:0.85rem; font-weight:700; }
footer.site li { margin-bottom:0.55rem; font-size:0.88rem; color:var(--smoke); }
footer.site a:hover { color:var(--paper); }
.social-links { display:flex; gap:0.75rem; margin-top:1rem; }
.social-links a { width:36px; height:36px; border:1px solid var(--line); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--paper); transition:border-color var(--transition),color var(--transition); }
.social-links a:hover { border-color:var(--gold); color:var(--gold); }
.copyright { border-top:1px solid var(--line); padding-top:1.25rem; text-align:center; color:var(--smoke); font-size:0.78rem; }
@media (max-width:880px) { .footer-grid { grid-template-columns:1fr; } }

/* ===== BUTTONS ===== */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:0.5rem; padding:0.65rem 1.4rem; border-radius:999px; font-weight:600; font-size:0.9rem; cursor:pointer; border:1px solid transparent; transition:transform 0.15s,filter 0.15s,background 0.2s,border-color 0.2s,color 0.2s; font-family:inherit; background:transparent; color:var(--paper); text-align:center; }
.btn:hover { transform:translateY(-2px); }
.btn:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }
.btn--primary { background:var(--gold); color:var(--ink); border-color:var(--gold); }
.btn--primary:hover { filter:brightness(1.08); background:#d4a94a; }
.btn--ghost { border-color:var(--line); color:var(--paper); }
.btn--ghost:hover { border-color:var(--gold); color:var(--gold); }
.btn--outline-gold { border-color:var(--gold); color:var(--gold); }
.btn--outline-gold:hover { background:var(--gold); color:var(--ink); }
.btn--sm { padding:0.35rem 0.85rem; font-size:0.78rem; }
.btn:disabled { opacity:0.4; cursor:not-allowed; transform:none !important; }
.eyebrow { display:inline-flex; align-items:center; gap:0.6rem; font-family:'IBM Plex Mono',monospace; font-size:0.72rem; letter-spacing:0.04em; color:var(--gold); margin-bottom:0.75rem; text-transform:uppercase; }
.eyebrow::before { content:''; width:7px; height:7px; border-radius:50%; background:var(--clay); flex-shrink:0; }
.h2 { font-size:clamp(1.3rem,1.1rem+1.4vw,1.9rem); margin-bottom:0.5rem; color:var(--paper); }
.lede { color:var(--smoke); max-width:60ch; font-size:0.98rem; }

/* ===== PAGES ===== */
.page { display:none; position:relative; z-index:1; }
.page.active { display:block; }

/* ===== HERO ===== */
.hero { position:relative; min-height:78vh; display:flex; align-items:center; background:var(--ink); overflow:hidden; border-bottom:1px solid var(--line); }
.hero::after { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 30% 50%, rgba(200,155,60,0.05) 0%, transparent 70%); pointer-events:none; }
.hero-lens { position:absolute; width:600px; height:600px; border-radius:50%; top:50%; left:60%; transform:translate(-50%,-50%); background:radial-gradient(circle at center, transparent 40%, rgba(200,155,60,0.03) 50%, transparent 60%); border:1px solid rgba(200,155,60,0.04); pointer-events:none; animation:lensPulse 8s ease-in-out infinite; }
@keyframes lensPulse { 0%,100% { transform:translate(-50%,-50%) scale(1); opacity:0.4; } 50% { transform:translate(-50%,-50%) scale(1.12); opacity:0.8; } }
.hero-ring { position:absolute; border-radius:50%; border:1px solid rgba(200,155,60,0.06); pointer-events:none; top:50%; left:60%; transform:translate(-50%,-50%); }
.ring-1 { width:400px; height:400px; animation:ringRotate 20s linear infinite; }
.ring-2 { width:550px; height:550px; animation:ringRotate 30s linear infinite reverse; }
.ring-3 { width:700px; height:700px; animation:ringRotate 40s linear infinite; }
.ring-4 { width:850px; height:850px; animation:ringRotate 50s linear infinite reverse; }
@keyframes ringRotate { 0% { transform:translate(-50%,-50%) rotate(0deg); } 100% { transform:translate(-50%,-50%) rotate(360deg); } }
.hero-ring::before { content:''; position:absolute; width:4px; height:4px; background:var(--gold); border-radius:50%; top:-2px; left:50%; opacity:0.3; }
.ring-2::before { width:6px; height:6px; top:-3px; }
.ring-3::before { width:8px; height:8px; top:-4px; }
.ring-4::before { width:10px; height:10px; top:-5px; }
.hero::before { content:''; position:absolute; width:300px; height:300px; top:50%; left:60%; transform:translate(-50%,-50%); background:repeating-conic-gradient(from 0deg at center, transparent 0deg, transparent 22deg, rgba(200,155,60,0.02) 22deg, rgba(200,155,60,0.02) 23deg), repeating-conic-gradient(from 11.5deg at center, transparent 0deg, transparent 22deg, rgba(200,155,60,0.015) 22deg, rgba(200,155,60,0.015) 23deg); border-radius:50%; pointer-events:none; animation:apertureSpin 30s linear infinite; opacity:0.5; }
@keyframes apertureSpin { 0% { transform:translate(-50%,-50%) rotate(0deg); } 100% { transform:translate(-50%,-50%) rotate(360deg); } }
.hero-content { position:relative; z-index:2; max-width:760px; }
.hero h1 { font-size:clamp(2.2rem,1.8rem+3.2vw,4.2rem); color:var(--paper); margin-bottom:1.1rem; }
.hero h1 em { color:var(--gold); font-style:normal; }
.hero .lede { color:#d5d0c4; font-size:1.08rem; margin-bottom:2rem; max-width:54ch; }
.hero-ctas { display:flex; gap:1rem; flex-wrap:wrap; }
.corner { position:absolute; width:26px; height:26px; border:2px solid var(--gold); opacity:0.25; pointer-events:none; }
.corner--tl { top:28px; right:28px; border-bottom:none; border-left:none; }
.corner--tr { top:28px; left:28px; border-bottom:none; border-right:none; }
.corner--bl { bottom:28px; right:28px; border-top:none; border-left:none; }
.corner--br { bottom:28px; left:28px; border-top:none; border-right:none; }
.hero-tag { position:absolute; top:32px; right:56px; font-size:0.65rem; letter-spacing:0.12em; color:var(--smoke); pointer-events:none; opacity:0.6; }

/* ===== SCRUBBER ===== */
.scrubber-wrap { background:var(--panel); border-bottom:1px solid var(--line); position:relative; z-index:1; }
.scrubber { display:flex; gap:0; overflow-x:auto; scrollbar-width:none; padding:0.3rem 0; }
.scrubber::-webkit-scrollbar { display:none; }
.scrubber a { flex:0 0 auto; padding:0.5rem 1.2rem; border-bottom:2px solid transparent; font-size:0.82rem; color:var(--smoke); white-space:nowrap; transition:color 0.2s,border-color 0.2s; cursor:pointer; font-family:inherit; display:flex; flex-direction:column; align-items:center; }
.scrubber a .tc { font-family:'IBM Plex Mono',monospace; font-size:0.6rem; color:var(--smoke); opacity:0.5; }
.scrubber a:hover { color:var(--paper); }
.scrubber a.active { color:var(--gold); border-color:var(--gold); }

/* ===== STATS ===== */
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; text-align:center; }
.stat-num { font-family:'IBM Plex Mono',monospace; font-size:clamp(2.1rem,1.8rem+1.6vw,3.2rem); color:var(--gold); font-weight:600; }
.stats-grid > div > div:last-child { color:var(--smoke); font-size:0.9rem; margin-top:0.4rem; }
@media (max-width:880px) { .stats-grid { grid-template-columns:repeat(2,1fr); row-gap:2.5rem; } }

/* ===== ABOUT ===== */
.about-grid { display:grid; grid-template-columns:1.1fr 0.9fr; gap:3rem; align-items:center; }
.about-grid p { color:var(--smoke); }
.about-grid .vision { color:var(--gold); font-size:1.3rem; margin-top:1.5rem; }
.timeline-mark { border:1px solid var(--line); border-radius:var(--radius); padding:2rem; background:var(--panel); text-align:center; }
.timeline-mark .from { font-size:3rem; color:var(--paper); font-family:'IBM Plex Mono',monospace; }
.timeline-mark .arrow { color:var(--gold); font-family:'IBM Plex Mono',monospace; font-size:1.2rem; margin:0.4rem 0; }
.timeline-mark .to { font-size:3rem; color:var(--gold); font-family:'IBM Plex Mono',monospace; }
.timeline-mark .loc { margin-top:1rem; font-family:'IBM Plex Mono',monospace; font-size:0.78rem; letter-spacing:0.08em; color:var(--smoke); }
@media (max-width:880px) { .about-grid { grid-template-columns:1fr; } }

/* ===== TESTIMONIALS ===== */
.test-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.test-card { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:1.5rem; }
.test-card.empty { opacity:0.5; border-style:dashed; }
.test-card .quote { color:var(--paper); font-size:0.95rem; margin-bottom:1rem; }
.test-card .who { color:var(--gold); font-size:0.85rem; font-weight:600; }
.test-card .what { color:var(--smoke); font-size:0.78rem; }
@media (max-width:880px) { .test-grid { grid-template-columns:1fr; } }

/* ===== CONTACT ===== */
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:3rem; }
.info-row { display:flex; gap:1rem; margin-bottom:1.25rem; align-items:flex-start; }
.info-row .ic { color:var(--gold); flex:0 0 22px; margin-top:3px; }
.info-row .ic svg { width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.6; }
.info-row a { color:var(--paper); }
.info-row a:hover { color:var(--gold); }
.callsheet { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:1.75rem; }
.callsheet h3 { font-family:'IBM Plex Mono',monospace; font-size:0.85rem; letter-spacing:0.1em; color:var(--gold); margin-bottom:1.25rem; text-transform:uppercase; }
.cs-row { display:flex; justify-content:space-between; padding:0.5rem 0; border-bottom:1px dashed var(--line); font-size:0.9rem; }
.cs-row:last-child { border-bottom:none; }
.cs-row span:first-child { color:var(--smoke); }
.cs-row span:last-child { font-family:'IBM Plex Mono',monospace; color:var(--paper); }
.callsheet .note { font-size:0.68rem; color:var(--smoke); margin-top:0.8rem; }
@media (max-width:880px) { .contact-grid { grid-template-columns:1fr; } }

/* ===== PAGE HEAD ===== */
.page-head, .faq-hero { background:var(--panel); border-bottom:1px solid var(--line); padding:1.8rem 0 1rem; }

/* ===== SERVICES ACCORDION ===== */
.services-grid { display:flex; flex-direction:column; gap:0.8rem; margin-top:1.5rem; }
.service-accordion { border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); overflow:hidden; transition:border-color var(--transition),background var(--transition); }
.service-accordion:hover { border-color:rgba(200,155,60,0.2); }
.service-accordion.open { border-color:var(--gold); background:var(--panel-2); }
.service-header { display:flex; align-items:center; gap:0.9rem; padding:0.9rem 1.3rem; cursor:pointer; user-select:none; transition:background var(--transition); flex-wrap:wrap; }
.service-header:hover { background:rgba(200,155,60,0.03); }
.service-header .icon-wrap { font-size:1.6rem; flex-shrink:0; width:44px; height:44px; display:flex; align-items:center; justify-content:center; background:var(--panel-2); border-radius:10px; border:1px solid var(--line); transition:transform 0.3s ease,border-color 0.3s ease; position:relative; }
.service-accordion.open .service-header .icon-wrap { border-color:var(--gold); transform:scale(1.04); }
.service-header .icon-wrap .icon-pulse { position:absolute; inset:-3px; border-radius:12px; border:1px solid transparent; animation:none; }
.service-accordion.open .service-header .icon-wrap .icon-pulse { border-color:var(--gold); animation:pulse-ring 2s ease-in-out infinite; }
@keyframes pulse-ring { 0%,100% { opacity:0.3; transform:scale(1); } 50% { opacity:0.8; transform:scale(1.06); } }
.service-header .info { flex:1; min-width:120px; }
.service-header .info h3 { font-size:1rem; font-weight:700; color:var(--paper); margin-bottom:0.05rem; }
.service-header .info .sub { font-size:0.78rem; color:var(--smoke); }
.service-header .badge { font-family:'IBM Plex Mono',monospace; font-size:0.65rem; color:var(--gold); background:var(--panel-2); border:1px solid var(--line); border-radius:999px; padding:0.15rem 0.65rem; white-space:nowrap; }
.service-header .chevron { width:26px; height:26px; flex-shrink:0; color:var(--smoke); transition:transform 0.35s ease,color var(--transition); display:flex; align-items:center; justify-content:center; }
.service-header .chevron svg { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2; transition:transform 0.35s ease; }
.service-accordion.open .service-header .chevron svg { transform:rotate(180deg); }
.service-accordion.open .service-header .chevron { color:var(--gold); }
.service-body { max-height:0; overflow:hidden; transition:max-height 0.45s ease,padding 0.3s ease; }
.service-accordion.open .service-body { max-height:4000px; }
.service-body-inner { padding:0 1.3rem 1.3rem; border-top:1px solid var(--line); }
.service-body-inner .desc { color:var(--smoke); font-size:0.92rem; margin:0.8rem 0 1rem; }
.service-body-inner .fields { display:grid; grid-template-columns:1fr 1fr; gap:0.7rem 1rem; margin:0.8rem 0; }
@media (max-width:640px) { .service-body-inner .fields { grid-template-columns:1fr; } }
.service-body-inner .fields label { display:block; font-size:0.75rem; color:var(--smoke); margin-bottom:0.2rem; }
.service-body-inner .fields input,.service-body-inner .fields select,.service-body-inner .fields textarea { width:100%; background:var(--ink); color:var(--paper); border:1px solid var(--line); border-radius:8px; padding:0.45rem 0.65rem; font-size:0.85rem; font-family:inherit; transition:border-color var(--transition); }
.service-body-inner .fields input:focus,.service-body-inner .fields select:focus,.service-body-inner .fields textarea:focus { outline:none; border-color:var(--gold); }
.service-body-inner .fields textarea { resize:vertical; min-height:55px; }
.service-body-inner .fields .full { grid-column:1/-1; }
.service-body-inner .upload-area { border:2px dashed var(--line); border-radius:10px; padding:1rem; text-align:center; cursor:pointer; transition:border-color var(--transition),background var(--transition); margin:0.6rem 0; }
.service-body-inner .upload-area:hover,.service-body-inner .upload-area.drag { border-color:var(--gold); background:rgba(200,155,60,0.04); }
.service-body-inner .upload-area input { display:none; }
.service-body-inner .thumbs { display:flex; flex-wrap:wrap; gap:0.5rem; margin-top:0.6rem; }
.service-body-inner .thumb-item { position:relative; width:66px; height:66px; border-radius:8px; overflow:hidden; border:1px solid var(--line); flex-shrink:0; background:var(--ink); }
.service-body-inner .thumb-item img { width:100%; height:100%; object-fit:cover; }
.service-body-inner .thumb-item .overlay { position:absolute; inset:0; background:rgba(11,10,8,0.65); display:flex; align-items:center; justify-content:center; gap:0.25rem; opacity:0; transition:opacity 0.2s; }
.service-body-inner .thumb-item:hover .overlay { opacity:1; }
.service-body-inner .thumb-item .overlay button { background:var(--gold); color:var(--ink); border:none; border-radius:5px; width:24px; height:24px; font-size:0.65rem; cursor:pointer; transition:transform 0.15s; }
.service-body-inner .thumb-item .overlay button:hover { transform:scale(1.1); }
.service-body-inner .thumb-item .overlay button.rm { background:var(--clay); color:var(--paper); }
.service-body-inner .toggle-group { display:flex; flex-wrap:wrap; gap:0.4rem; margin:0.4rem 0; }
.service-body-inner .toggle-group .toggle-opt { border:1px solid var(--line); border-radius:8px; padding:0.35rem 0.9rem; cursor:pointer; font-size:0.8rem; transition:all var(--transition); background:transparent; color:var(--smoke); font-family:inherit; }
.service-body-inner .toggle-group .toggle-opt.active { border-color:var(--gold); color:var(--gold); background:rgba(200,155,60,0.07); }
.service-body-inner .qty-stepper { display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.service-body-inner .qty-stepper button { background:var(--panel-2); color:var(--paper); border:none; width:32px; height:32px; cursor:pointer; font-size:0.95rem; transition:background var(--transition),color var(--transition); }
.service-body-inner .qty-stepper button:hover { background:var(--gold); color:var(--ink); }
.service-body-inner .qty-stepper input { width:44px; text-align:center; border:none; border-inline:1px solid var(--line); border-radius:0; background:transparent; color:var(--paper); font-size:0.88rem; font-family:inherit; padding:0.15rem 0; }
.service-body-inner .qty-stepper input:focus { outline:none; }
.service-body-inner .price-row { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:0.6rem; margin-top:1rem; padding-top:0.8rem; border-top:1px solid var(--line); }
.service-body-inner .price-row .total { font-family:'IBM Plex Mono',monospace; font-size:1.05rem; color:var(--gold); }
.service-body-inner .price-row .total small { font-size:0.7rem; color:var(--smoke); font-family:inherit; }
.service-body-inner .apply-all-toggle { display:flex; align-items:center; gap:0.6rem; font-size:0.82rem; color:var(--smoke); margin:0.4rem 0; padding:0.4rem 0.6rem; border-radius:8px; background:var(--panel-2); border:1px solid var(--line); }
.service-body-inner .apply-all-toggle input { accent-color:var(--gold); width:16px; height:16px; cursor:pointer; }

/* ===== PRODUCT ITEMS ===== */
.product-items-wrap { display:flex; flex-direction:column; gap:0.8rem; margin:0.6rem 0; }
.product-item-card { background:var(--ink); border:1px solid var(--line); border-radius:10px; padding:0.8rem; transition:border-color var(--transition); }
.product-item-card:hover { border-color:rgba(200,155,60,0.2); }
.product-item-card .item-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:0.4rem; font-size:0.82rem; color:var(--smoke); }
.product-item-card .item-header .num { font-family:'IBM Plex Mono',monospace; color:var(--gold); }
.product-item-card .item-header .remove-item { background:none; border:none; color:var(--clay); cursor:pointer; font-size:0.85rem; }
.product-item-card .fields { display:grid; grid-template-columns:1fr 1fr; gap:0.5rem; }
.product-item-card .fields label { font-size:0.7rem; color:var(--smoke); display:block; margin-bottom:0.1rem; }
.product-item-card .fields input,.product-item-card .fields select { width:100%; background:var(--panel-2); color:var(--paper); border:1px solid var(--line); border-radius:6px; padding:0.3rem 0.5rem; font-size:0.8rem; font-family:inherit; }
.product-item-card .fields input:focus,.product-item-card .fields select:focus { outline:none; border-color:var(--gold); }
.product-item-card .upload-area-sm { border:1px dashed var(--line); border-radius:6px; padding:0.5rem; text-align:center; cursor:pointer; font-size:0.75rem; color:var(--smoke); transition:border-color var(--transition); margin-top:0.3rem; }
.product-item-card .upload-area-sm:hover { border-color:var(--gold); }
.product-item-card .upload-area-sm input { display:none; }
.product-item-card .thumbs-sm { display:flex; flex-wrap:wrap; gap:0.3rem; margin-top:0.3rem; }
.product-item-card .thumbs-sm .thumb-sm { width:48px; height:48px; border-radius:6px; overflow:hidden; border:1px solid var(--line); position:relative; }
.product-item-card .thumbs-sm .thumb-sm img { width:100%; height:100%; object-fit:cover; }
.product-item-card .thumbs-sm .thumb-sm .rm-sm { position:absolute; top:1px; right:1px; background:rgba(0,0,0,0.7); border:none; color:#fff; border-radius:4px; width:16px; height:16px; font-size:0.55rem; cursor:pointer; display:flex; align-items:center; justify-content:center; }
@media (max-width:500px) { .product-item-card .fields { grid-template-columns:1fr; } }

/* ===== CHECKER ===== */
.validator-results { margin-top:0.8rem; display:none; }
.validator-results.show { display:block; }
.validator-results .check-item { display:flex; align-items:center; gap:0.5rem; padding:0.35rem 0.6rem; border-radius:6px; font-size:0.85rem; margin-bottom:0.25rem; }
.validator-results .check-item.pass { background:rgba(92,138,92,0.1); color:#7ab87a; }
.validator-results .check-item.fail { background:rgba(168,68,42,0.1); color:#d97a5a; }
.validator-results .check-item .dot { width:18px; height:18px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:0.65rem; font-weight:700; }
.validator-results .check-item.pass .dot { background:var(--good); color:#fff; }
.validator-results .check-item.fail .dot { background:var(--clay); color:#fff; }
.validator-results .summary { margin-top:0.6rem; padding:0.6rem 1rem; border-radius:8px; font-size:0.88rem; }
.validator-results .summary.pass { background:rgba(92,138,92,0.1); border:1px solid var(--good); color:#7ab87a; }
.validator-results .summary.fail { background:rgba(168,68,42,0.1); border:1px solid var(--clay); color:#d97a5a; }
.self-confirm { display:flex; align-items:flex-start; gap:0.5rem; font-size:0.82rem; color:var(--smoke); padding:0.25rem 0; }
.self-confirm input { width:auto; margin-top:0.2rem; accent-color:var(--gold); }

/* ===== POPUPS ===== */
.popup-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.75); z-index:200; display:none; align-items:center; justify-content:center; padding:1rem; backdrop-filter:blur(6px); }
.popup-overlay.show { display:flex; }
.popup-box { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); max-width:520px; width:100%; padding:1.6rem; max-height:92vh; overflow-y:auto; position:relative; }
.popup-box .close-btn { position:absolute; top:12px; left:14px; background:none; border:none; color:var(--smoke); font-size:1.2rem; cursor:pointer; transition:color var(--transition); }
.popup-box .close-btn:hover { color:var(--paper); }
.popup-box h2 { font-size:1.25rem; margin-bottom:0.25rem; color:var(--paper); }
.popup-box .sub { color:var(--smoke); font-size:0.88rem; margin-bottom:1rem; }
.popup-box .field { margin-bottom:0.8rem; }
.popup-box .field label { display:block; font-size:0.78rem; color:var(--smoke); margin-bottom:0.2rem; }
.popup-box .field input,.popup-box .field textarea { width:100%; background:var(--ink); color:var(--paper); border:1px solid var(--line); border-radius:8px; padding:0.5rem 0.7rem; font-size:0.88rem; font-family:inherit; transition:border-color var(--transition); }
.popup-box .field input:focus,.popup-box .field textarea:focus { outline:none; border-color:var(--gold); }
.popup-box .field textarea { resize:vertical; min-height:65px; }
.popup-box .actions { display:flex; gap:0.7rem; margin-top:0.5rem; flex-wrap:wrap; }

/* ===== CART ===== */
.cart-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:150; display:none; backdrop-filter:blur(4px); }
.cart-overlay.show { display:block; }
.cart-drawer { position:fixed; top:0; bottom:0; right:0; width:min(370px,92vw); background:var(--panel); border-left:1px solid var(--line); z-index:151; transform:translateX(100%); transition:transform 0.35s ease; display:flex; flex-direction:column; }
.cart-drawer.open { transform:translateX(0); }
.cart-head { padding:1rem 1.25rem; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; flex-shrink:0; }
.cart-head h3 { font-weight:700; font-size:1.05rem; }
.cart-items { flex:1; overflow-y:auto; padding:0.5rem 1.25rem; }
.cart-item { display:flex; gap:0.65rem; padding:0.65rem 0; border-bottom:1px solid var(--line); align-items:center; }
.cart-item .info { flex:1; font-size:0.82rem; }
.cart-item .info .nm { font-weight:600; }
.cart-item .info .mt { color:var(--smoke); font-size:0.74rem; }
.cart-item .px { font-family:'IBM Plex Mono',monospace; color:var(--gold); font-size:0.82rem; white-space:nowrap; }
.cart-item .rm { background:none; border:none; color:var(--clay); cursor:pointer; font-size:0.95rem; padding:0 0.15rem; transition:color var(--transition); }
.cart-item .rm:hover { color:#d97a5a; }
.cart-foot { padding:1rem 1.25rem; border-top:1px solid var(--line); flex-shrink:0; }
.cart-row { display:flex; justify-content:space-between; font-size:0.85rem; margin-bottom:0.3rem; }
.cart-row.total { font-size:1rem; font-weight:700; color:var(--gold); border-top:1px dashed var(--line); padding-top:0.5rem; margin-top:0.3rem; }
.coupon-row { display:flex; gap:0.4rem; margin:0.5rem 0; }
.coupon-row input { flex:1; background:var(--ink); color:var(--paper); border:1px solid var(--line); border-radius:6px; padding:0.35rem 0.6rem; font-size:0.8rem; font-family:inherit; }
.coupon-row input:focus { outline:none; border-color:var(--gold); }
.coupon-msg { font-size:0.75rem; min-height:1.2em; }
.coupon-msg.ok { color:var(--good); }
.coupon-msg.bad { color:var(--clay); }
.pay-grid { display:grid; grid-template-columns:1fr 1fr; gap:0.5rem; margin-top:0.25rem; }
.pay-opt { border:1px solid var(--line); border-radius:8px; padding:0.5rem; cursor:pointer; display:flex; gap:0.4rem; align-items:center; font-size:0.82rem; transition:border-color var(--transition),background var(--transition); }
.pay-opt:hover { border-color:var(--gold); }
.pay-opt.checked { border-color:var(--gold); background:rgba(200,155,60,0.06); }
.pay-opt input { width:auto; }

/* ===== FABs ===== */
.wa-fab { position:fixed; bottom:22px; right:22px; z-index:60; width:54px; height:54px; border-radius:50%; background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 24px rgba(0,0,0,0.5); transition:transform 0.2s; }
.wa-fab:hover { transform:scale(1.06); }
.wa-fab svg { width:25px; height:25px; }
.cart-fab { position:fixed; bottom:22px; left:22px; z-index:60; width:54px; height:54px; border-radius:50%; background:var(--gold); color:var(--ink); display:flex; align-items:center; justify-content:center; box-shadow:0 6px 24px rgba(0,0,0,0.5); border:none; cursor:pointer; transition:transform 0.2s; }
.cart-fab:hover { transform:scale(1.06); }
.cart-fab svg { width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.7; }
.cart-fab .cart-badge { top:-4px; left:-4px; position:absolute; }

/* ===== CROP ===== */
.crop-stage { position:relative; max-width:100%; margin:0 auto; user-select:none; touch-action:none; background:#000; border-radius:8px; overflow:hidden; }
.crop-stage img { max-width:100%; display:block; pointer-events:none; }
.crop-rect { position:absolute; border:2px solid var(--gold); background:rgba(200,155,60,0.15); }
.crop-controls { display:flex; gap:0.5rem; justify-content:center; margin-top:0.8rem; flex-wrap:wrap; }

/* ===== FAQ ===== */
.faq-item { border:1px solid var(--line); border-radius:var(--radius); margin-bottom:0.5rem; overflow:hidden; background:var(--panel); transition:border-color var(--transition); }
.faq-item.open { border-color:var(--gold); }
.faq-q { display:flex; align-items:center; justify-content:space-between; gap:0.8rem; padding:0.8rem 1.1rem; cursor:pointer; font-weight:600; font-size:0.9rem; color:var(--paper); }
.faq-q .chevron { width:18px; height:18px; flex-shrink:0; color:var(--smoke); transition:transform 0.3s ease; }
.faq-q .chevron svg { width:100%; height:100%; stroke:currentColor; fill:none; stroke-width:2; }
.faq-item.open .faq-q .chevron { transform:rotate(180deg); color:var(--gold); }
.faq-a { max-height:0; overflow:hidden; transition:max-height 0.3s ease; }
.faq-item.open .faq-a { max-height:800px; }
.faq-a-inner { padding:0.1rem 1.1rem 1.1rem; color:var(--smoke); font-size:0.9rem; line-height:1.8; }
.faq-a-inner strong { color:var(--paper); }
.faq-cats { display:flex; flex-wrap:wrap; gap:0.35rem; margin-bottom:1.2rem; }
.faq-cats button { background:var(--panel); border:1px solid var(--line); border-radius:999px; padding:0.25rem 0.9rem; color:var(--smoke); font-size:0.78rem; cursor:pointer; transition:all var(--transition); font-family:inherit; }
.faq-cats button:hover { border-color:var(--gold); color:var(--paper); }
.faq-cats button.active { border-color:var(--gold); color:var(--gold); background:rgba(200,155,60,0.05); }
.faq-search-wrap { max-width:400px; margin-bottom:1.2rem; position:relative; }
.faq-search-wrap input { width:100%; background:var(--ink); color:var(--paper); border:1px solid var(--line); border-radius:999px; padding:0.5rem 0.9rem 0.5rem 2.6rem; font-size:0.87rem; font-family:inherit; transition:border-color var(--transition); }
.faq-search-wrap input:focus { outline:none; border-color:var(--gold); }
.faq-search-wrap .search-icon { position:absolute; top:50%; transform:translateY(-50%); right:0.9rem; color:var(--smoke); pointer-events:none; }
.faq-search-wrap .search-icon svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.6; }
.faq-cta { background:linear-gradient(135deg,var(--panel),var(--panel-2)); border:1px solid var(--line); border-radius:var(--radius); padding:2rem; text-align:center; margin-top:2rem; }
.faq-cta h3 { color:var(--paper); margin-bottom:0.5rem; font-size:1.1rem; font-weight:700; }
.faq-cta p { color:var(--smoke); font-size:0.9rem; margin-bottom:1rem; }

/* ===== RESPONSIVE ===== */
@media (max-width:600px) {
    .service-header { padding:0.7rem 0.9rem; }
    .service-body-inner { padding:0 0.9rem 0.9rem; }
    .service-body-inner .fields { gap:0.5rem; }
    .popup-box { padding:1rem; }
    .hero-tag { display:none; }
    .corner { display:none; }
    .hero { min-height:70vh; }
    .service-header .icon-wrap { width:38px; height:38px; font-size:1.3rem; }
    .service-header .info h3 { font-size:0.9rem; }
    .hero-lens { width:300px; height:300px; left:50%; }
    .ring-1 { width:200px; height:200px; }
    .ring-2 { width:280px; height:280px; }
    .ring-3 { width:360px; height:360px; }
    .ring-4 { width:440px; height:440px; }
    .hero::before { width:150px; height:150px; left:50%; }
    .pay-grid { grid-template-columns:1fr; }
    .scrubber a { padding:0.4rem 0.8rem; font-size:0.75rem; }
}