@font-face{font-family:Plex;src:url('./assets/IBMPlexSansArabic-Regular.ttf')}@font-face{font-family:Plex;src:url('./assets/IBMPlexSansArabic-SemiBold.ttf');font-weight:600}@font-face{font-family:Plex;src:url('./assets/IBMPlexSansArabic-Bold.ttf');font-weight:700}
:root{--ink:#071d18;--green:#0d4a37;--mint:#5df0b2;--ivory:#f1eadb;--gold:#d7ad65;--paper:#f5f1e8;--line:rgba(7,29,24,.16);--s1:8px;--s2:16px;--s3:24px;--s4:32px;--s5:48px;--radius:24px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--ink);color:var(--ivory);font-family:Plex,Arial,sans-serif;line-height:1.5}button,input,textarea{font:inherit}.topbar{height:82px;padding:0 clamp(20px,5vw,72px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.12);position:absolute;inset:0 0 auto;z-index:3}.brand img{width:134px;display:block}.gift-label{font-size:13px;color:#b9d2c8}.hero{min-height:780px;height:100svh;position:relative;overflow:hidden;padding:clamp(130px,18vh,190px) clamp(24px,8vw,120px) 80px;background:radial-gradient(circle at 18% 35%,rgba(93,240,178,.16),transparent 30%),linear-gradient(135deg,#061713,#0a3127)}.hero:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(105deg,transparent 0 86px,rgba(255,255,255,.035) 87px 88px)}.eyebrow{position:relative;color:var(--mint);font-size:15px;font-weight:600;margin:0 0 20px}.eyebrow:before{content:"";display:inline-block;width:32px;height:1px;background:currentColor;vertical-align:middle;margin-left:12px}.hero h1{position:relative;font-size:clamp(60px,10vw,150px);line-height:1.05;margin:0;letter-spacing:-.03em;max-width:880px}.hero-copy{position:relative;max-width:520px;color:#c8d8d1;font-size:clamp(17px,2vw,22px);line-height:1.8;margin:32px 0}.hero-cta{position:relative;display:inline-flex;align-items:center;gap:28px;color:var(--ink);background:var(--mint);padding:16px 24px;border-radius:999px;text-decoration:none;font-weight:700}.hero-mark{position:absolute;direction:ltr;left:-.05em;bottom:-.35em;font-weight:700;font-size:min(78vw,900px);line-height:1;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.09);user-select:none}.studio{background:var(--paper);color:var(--ink);padding:100px clamp(20px,5vw,72px)}.studio-head{max-width:1280px;margin:auto auto 48px}.studio h2{font-size:clamp(40px,5vw,72px);line-height:1.2;margin:0}.builder{display:grid;grid-template-columns:minmax(300px,620px) minmax(330px,560px);gap:clamp(40px,7vw,110px);max-width:1280px;margin:auto;align-items:start}.preview-column{position:sticky;top:24px}.preview-shell{width:min(100%,470px);margin:auto;background:#ddd;box-shadow:0 24px 80px rgba(7,29,24,.2);line-height:0;transition:max-width .25s ease}.preview-shell.square{max-width:580px}canvas{width:100%;height:auto}.preview-note{text-align:center;font-size:13px;color:#59625e;margin-top:16px}.controls{display:grid;gap:32px;padding-top:8px}fieldset{border:0;padding:0;margin:0}legend,.field>span{display:block;font-size:18px;font-weight:700;margin-bottom:14px}.templates{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.template{border:1px solid var(--line);border-radius:18px;padding:10px;cursor:pointer;display:grid;grid-template-columns:54px 1fr;gap:0 12px;align-items:center;background:rgba(255,255,255,.44);transition:.18s ease}.template.selected{border-color:var(--green);box-shadow:0 0 0 2px var(--green)}.template input,.sizes input{position:absolute;opacity:0}.template b{align-self:end}.template small{align-self:start;color:#67736e}.swatch{grid-row:1/3;width:54px;height:64px;border-radius:11px}.swatch.roots{background:radial-gradient(circle at 50% 20%,#d7ad65 0 18%,transparent 19%),linear-gradient(145deg,#06261d 40%,#d7ad65 41% 44%,#0c4c37 45%)}.swatch.horizon{background:radial-gradient(circle at 50% 55%,#f0d597 0 18%,transparent 19%),linear-gradient(#06241d 55%,#5df0b2 56% 59%,#15704e 60%)}.swatch.weave{background:repeating-linear-gradient(135deg,#efe5d3 0 8px,#a12c36 9px 12px,#103c30 13px 22px)}.swatch.pulse{background:radial-gradient(circle,#6df5bb 0 4%,transparent 5% 14%,#6df5bb 15% 16%,transparent 17%),#061713}.field{position:relative}.field input,.field textarea{width:100%;border:1px solid var(--line);border-radius:16px;background:#fff;padding:16px 18px;outline:0;color:var(--ink);resize:none}.field input:focus,.field textarea:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(13,74,55,.12)}.field small{position:absolute;left:12px;bottom:9px;color:#7c8581;font-size:11px}.field textarea{padding-bottom:28px}.sizes{display:grid;grid-template-columns:1fr 1fr;gap:12px}.sizes label span{display:block;border:1px solid var(--line);padding:14px;border-radius:16px;text-align:center;cursor:pointer;background:#fff}.sizes input:checked+span{background:var(--ink);color:white;border-color:var(--ink)}.sizes small{font-size:12px;opacity:.7}.actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.primary,.secondary{border:0;border-radius:999px;padding:15px 20px;cursor:pointer;font-weight:700}.primary{background:var(--green);color:#fff}.secondary{background:transparent;color:var(--green);border:1px solid rgba(13,74,55,.35)}#downloadBtn{grid-column:1/-1}.privacy{font-size:13px;line-height:1.8;color:#65706b;margin:0}.status{min-height:24px;margin:0;color:var(--green);font-weight:600}.reveal{position:fixed;inset:0;z-index:20;background:radial-gradient(circle at 50% 50%,#116347,#061713 70%);color:white;display:grid;place-items:center;padding:24px}.reveal[hidden]{display:none}.reveal:before{content:"٩٦";direction:ltr;position:absolute;font-size:min(70vw,800px);color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.1);font-weight:700}.reveal-stage{text-align:center;position:relative;max-width:800px}.reveal-stage>p:first-child{color:var(--mint)}.reveal h2{font-size:clamp(50px,10vw,130px);line-height:1.25;margin:20px 0}.reveal-message{font-size:20px}.reveal-line{width:1px;height:70px;background:linear-gradient(transparent,var(--mint));margin:32px auto}.reveal-close{position:absolute;left:24px;top:24px;background:transparent;border:1px solid rgba(255,255,255,.4);border-radius:50%;color:white;width:44px;height:44px;font-size:24px;z-index:2}footer{text-align:center;padding:72px 24px;background:#04110e;color:#91aaa0}footer img{width:150px}footer p{margin:20px 0 6px}footer small{opacity:.65}
@media(max-width:800px){.gift-label{font-size:11px}.hero{min-height:720px;padding-top:140px}.hero h1{font-size:62px}.hero-mark{font-size:110vw;bottom:-.18em}.studio{padding-top:72px}.builder{grid-template-columns:1fr}.preview-column{position:relative;top:auto}.preview-shell{max-width:360px}.templates{grid-template-columns:1fr 1fr}.actions{grid-template-columns:1fr}.actions>*{grid-column:1!important}.controls{gap:28px}}
@media(max-width:390px){.brand img{width:116px}.hero h1{font-size:54px}.templates{grid-template-columns:1fr}.template{grid-template-columns:48px 1fr}.swatch{width:48px;height:56px}.studio{padding-inline:16px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
.swatch.weave{background:url('./assets/card-preview-weave.webp?v=e34bb1100e20') center/cover}.swatch.pulse{background:url('./assets/card-preview-pulse.webp?v=e34bb1100e20') center/cover}
.swatch.roots{background:url('./assets/card-preview-roots.webp?v=e34bb1100e20') center/cover}.swatch.horizon{background:url('./assets/card-preview-horizon.webp?v=e34bb1100e20') center/cover}
button:disabled{opacity:.55;cursor:wait}
.template:focus-within{box-shadow:0 0 0 4px #16775b!important;transition:none}.sizes label:focus-within>span{box-shadow:0 0 0 4px #16775b}
.manual-copy{display:grid;grid-template-columns:1fr auto;gap:8px}.manual-copy[hidden]{display:none!important}.manual-copy label{grid-column:1/-1;font-weight:700}.manual-copy input{min-width:0;border:1px solid var(--line);border-radius:12px;padding:12px;background:white;direction:ltr;text-align:left}.manual-copy button{padding:10px 16px}
.hero{min-height:720px}.hero-cards{position:absolute;left:5vw;bottom:-120px;width:38vw;height:74vh;max-width:560px}.hero-cards img{position:absolute;width:48%;box-shadow:0 25px 80px rgba(0,0,0,.38)}.hero-cards img:nth-child(1){left:0;top:18%;transform:rotate(-8deg)}.hero-cards img:nth-child(2){left:31%;top:0;transform:rotate(5deg)}.hero-cards img:nth-child(3){left:52%;top:28%;transform:rotate(11deg)}
.reveal-stage{position:relative;max-width:980px;width:100%;display:grid;grid-template-columns:minmax(250px,430px) 1fr;gap:clamp(32px,7vw,90px);align-items:center;text-align:right}.received-card img{display:block;width:100%;max-height:76vh;object-fit:contain;box-shadow:0 25px 80px rgba(0,0,0,.4)}.received-copy>p:first-child{color:var(--mint);font-weight:700}.received-copy>p:nth-child(3){font-size:20px;margin-bottom:30px}.received-copy button{display:block;width:100%;margin-top:12px}.secondary.light{color:white;border-color:rgba(255,255,255,.4)}
@media(max-width:800px){.hero{height:auto;min-height:690px;padding-top:120px;padding-bottom:240px}.hero-copy{margin-block:22px}.hero-cards{left:6%;right:6%;bottom:-80px;width:88%;height:300px}.hero-cards img{width:34%}.hero-cards img:nth-child(1){left:4%;top:30%}.hero-cards img:nth-child(2){left:34%;top:4%}.hero-cards img:nth-child(3){left:62%;top:34%}.reveal{overflow:auto;display:block}.reveal-stage{grid-template-columns:1fr;max-width:420px;margin:52px auto;text-align:center;gap:20px}.received-card img{max-height:52vh;width:auto;max-width:100%;margin:auto}}

/* Preserve Arabic rhythm, readable contrast, and bounded recipient layouts. */
.hero{height:auto;min-height:100svh}.hero h1{line-height:1.4;letter-spacing:normal;font-size:clamp(60px,9vw,136px)}
.studio h2{line-height:1.4}.eyebrow.dark{color:var(--green)}
.preview-shell{position:relative}.preview-state{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:24px;background:rgba(245,241,232,.96);color:var(--ink);line-height:1.7;text-align:center}.preview-state[hidden]{display:none}.preview-state p{margin:0}.preview-state button[hidden]{display:none}
.field input{padding-left:72px}.field input,.field textarea{font-size:16px}
.reveal-open{overflow:hidden}.reveal{overflow-y:auto;overflow-x:hidden;padding:max(76px,env(safe-area-inset-top)) 24px max(36px,env(safe-area-inset-bottom));align-items:safe center}
.reveal:before{pointer-events:none}.reveal-stage{grid-template-columns:minmax(0,430px) minmax(0,1fr);min-width:0}.received-copy,.received-card{min-width:0}.reveal h2{font-size:clamp(36px,4vw,64px);line-height:1.4;overflow-wrap:anywhere}.received-copy p{overflow-wrap:anywhere;line-height:1.6}
.reveal-close{position:fixed;top:max(16px,env(safe-area-inset-top));left:20px;background:#071d18}.received-card img{max-height:70vh}
:focus-visible{outline:3px solid #16775b;outline-offset:5px}.reveal :focus-visible,.hero :focus-visible,.topbar :focus-visible{outline-color:var(--mint)}
@media(max-width:800px){.hero{min-height:690px}.hero h1{font-size:62px}.reveal-stage{grid-template-columns:minmax(0,1fr);margin:0 auto;gap:24px}.received-card img{max-height:52svh}.reveal h2{font-size:38px}.reveal{padding-inline:24px}}
@media(max-width:390px){.hero h1{font-size:54px}}