:root{--ink:#242622;--muted:#85877f;--paper:#f5f4f0;--surface:#fff;--line:#e9e8e2;--accent:#96704f;--accent-soft:#f3eee8;--green:#18875b;--radius:24px;--shadow:0 18px 55px rgba(31,33,29,.08)}
*{box-sizing:border-box}html{min-width:320px;background:var(--paper);scroll-behavior:smooth}body{margin:0;color:var(--ink);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased;min-height:100vh}button,input,textarea,select{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.demo-bar{height:68px;max-width:540px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 19px}.brand{display:flex;align-items:center;gap:8px;font-size:20px;font-weight:800;letter-spacing:-1px}.brand-mark{width:27px;height:27px;border-radius:9px;background:var(--ink);color:white;display:grid;place-items:center;font-size:15px;font-weight:800;letter-spacing:-1px}.brand-period{color:var(--accent)}.demo-tools{display:flex;align-items:center;gap:7px}.business-picker-wrap select{max-width:143px;min-width:95px;height:36px;border:1px solid #e6e4dc;background:#fff;border-radius:11px;padding:0 24px 0 10px;color:#4b4d47;font-size:11px;font-weight:650;outline:none}.tool-button{height:36px;min-width:36px;border:1px solid #e6e4dc;background:#fff;border-radius:11px;color:var(--ink);display:grid;place-items:center}.tool-button svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.lang-button{font-size:12px;font-weight:700;padding:0 9px}
.app-frame{width:min(100% - 28px,470px);min-height:calc(100dvh - 92px);margin:0 auto 26px;background:var(--surface);border:1px solid #eeede7;border-radius:28px;box-shadow:var(--shadow);padding:18px 21px 14px;display:flex;flex-direction:column;--business-accent:var(--accent);--business-soft:var(--accent-soft)}.demo-note{display:flex;align-items:center;gap:7px;font-size:9px;font-weight:750;letter-spacing:1.35px;color:#9b9d95;margin:1px 0 25px}.demo-note-dot{height:6px;width:6px;border-radius:50%;background:#6ba27d;box-shadow:0 0 0 3px #ebf4ed}.business-view{flex:1}.business-hero{display:flex;flex-direction:column;align-items:center;text-align:center;padding:8px 7px 23px}.business-avatar{width:75px;height:75px;border-radius:25px;background:var(--business-soft);color:var(--business-accent);display:grid;place-items:center;font-size:25px;font-weight:780;letter-spacing:-1.5px;margin-bottom:15px;border:1px solid color-mix(in srgb,var(--business-accent) 10%,white)}.business-category{font-size:9px;font-weight:750;letter-spacing:1.6px;text-transform:uppercase;color:var(--business-accent);margin-bottom:8px}.business-name{font-size:30px;line-height:1.08;letter-spacing:-1.5px;font-weight:770;margin:0 0 8px}.business-tagline{font-size:13px;line-height:1.55;color:#85877f;margin:0;max-width:310px}.link-list{display:flex;flex-direction:column;gap:10px;margin-top:3px}.destination-link{width:100%;min-height:66px;border:1px solid var(--line);border-radius:17px;background:#fff;display:flex;align-items:center;gap:13px;padding:10px 15px;text-align:left;color:var(--ink);transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}.destination-link:active{transform:scale(.985)}.destination-link:hover{border-color:#d8d7ce;box-shadow:0 6px 18px rgba(30,30,24,.045)}.destination-icon{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;flex:0 0 42px}.destination-icon svg{width:21px;height:21px;display:block}.destination-icon.instagram{color:#c13f75;background:#fff0f5}.destination-icon.google{color:#4285f4;background:#eff5ff}.destination-icon.whatsapp{color:#128c61;background:#eaf7f0}.destination-copy{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}.destination-copy strong{font-size:14px;font-weight:700;letter-spacing:-.2px}.destination-copy small{font-size:10px;color:#95978f}.link-arrow{font-size:19px;line-height:1;color:#a6a79f;padding:0 2px}.website-entry{width:100%;margin-top:17px;min-height:72px;border:0;border-radius:17px;background:var(--business-soft);color:var(--ink);display:flex;align-items:center;gap:12px;padding:12px 15px;text-align:left;transition:transform .16s ease,filter .16s ease}.website-entry:hover{filter:brightness(.985)}.website-entry:active{transform:scale(.985)}.website-entry-icon{width:39px;height:39px;border-radius:12px;background:#fff;color:var(--business-accent);display:grid;place-items:center;flex:0 0 39px}.website-entry-icon svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.website-entry-copy{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}.website-entry-copy strong{font-size:12px;font-weight:740}.website-entry-copy small{font-size:10px;color:#82857b}.website-entry .link-arrow{color:var(--business-accent)}.page-footer{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:5px;padding:25px 0 5px;font-size:9px;color:#a2a39c}.page-footer strong{color:#777970;font-size:10px}.footer-separator{color:#c8c8c1}
/* business website view */
.website-view{animation:fadeIn .22s ease}.website-back{border:0;background:transparent;color:#777970;font-size:11px;font-weight:650;padding:0 0 17px;display:flex;align-items:center;gap:7px}.website-back span{font-size:17px}.website-cover{border-radius:19px;background:var(--business-soft);min-height:142px;padding:22px;display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden}.website-cover:before,.website-cover:after{content:"";position:absolute;border-radius:50%;background:color-mix(in srgb,var(--business-accent) 13%,transparent)}.website-cover:before{width:165px;height:165px;right:-42px;top:-52px}.website-cover:after{width:90px;height:90px;right:73px;top:54px;opacity:.45}.cover-label{position:relative;z-index:1;color:var(--business-accent);font-size:9px;letter-spacing:1.5px;font-weight:760;text-transform:uppercase}.cover-title{position:relative;z-index:1;font-size:25px;line-height:1.15;letter-spacing:-1px;margin:8px 0 0;max-width:280px}.website-description{color:#74766e;font-size:12px;line-height:1.7;margin:16px 3px 22px}.website-section-title{font-size:13px;font-weight:760;letter-spacing:-.2px;margin:0 0 11px}.featured-list{display:grid;grid-template-columns:1fr 1fr;gap:10px}.featured-item{border:1px solid var(--line);border-radius:15px;padding:13px;min-height:90px}.featured-item-icon{width:29px;height:29px;border-radius:10px;background:var(--business-soft);color:var(--business-accent);display:grid;place-items:center;font-size:14px;margin-bottom:9px}.featured-item strong{display:block;font-size:11px;line-height:1.35;margin-bottom:4px}.featured-item small{display:block;color:#92948d;font-size:10px}.website-contact{border-top:1px solid var(--line);margin-top:21px;padding-top:16px;display:flex;align-items:center;justify-content:space-between;gap:10px}.website-contact p{font-size:10px;color:#888a82;line-height:1.5;margin:0}.website-contact button{border:0;border-radius:11px;background:var(--business-accent);color:white;padding:11px 13px;font-size:10px;font-weight:700;white-space:nowrap}
/* dashboard */
.overlay{position:fixed;inset:0;background:rgba(28,30,26,.42);backdrop-filter:blur(5px);z-index:20;display:none;padding:18px;overflow:auto}.overlay.open{display:flex;align-items:center;justify-content:center;animation:fadeIn .16s ease}.dashboard{width:min(100%,610px);max-height:min(820px,calc(100dvh - 36px));background:#fbfbf9;border-radius:23px;box-shadow:0 24px 90px rgba(0,0,0,.2);display:flex;flex-direction:column;overflow:hidden}.dashboard-header{padding:22px 23px 17px;display:flex;justify-content:space-between;gap:16px;align-items:flex-start}.dashboard-kicker{font-size:9px;letter-spacing:1.35px;color:var(--accent);font-weight:800;margin-bottom:8px}.dashboard-header h1{font-size:23px;letter-spacing:-.9px;margin:0 0 6px}.dashboard-header p{font-size:11px;line-height:1.55;color:#878980;margin:0;max-width:390px}.close-button{width:34px;height:34px;flex:0 0 34px;border:1px solid #e7e7e0;background:#fff;border-radius:11px;font-size:22px;line-height:1;color:#70726a}.dashboard-tabs{display:flex;gap:4px;padding:0 19px 12px;border-bottom:1px solid var(--line);overflow-x:auto}.dashboard-tab{border:0;background:transparent;border-radius:10px;padding:10px 13px;color:#888a82;font-size:11px;font-weight:700;white-space:nowrap}.dashboard-tab.active{background:#eeeee8;color:var(--ink)}.dashboard-content{padding:19px 23px;overflow-y:auto;overscroll-behavior:contain;flex:1;min-height:220px}.dashboard-panel{display:none;max-width:490px;margin:0 auto}.dashboard-panel.active{display:block;animation:fadeIn .16s ease}.panel-intro{margin-bottom:18px}.panel-intro h2{font-size:16px;letter-spacing:-.4px;margin:0 0 5px}.panel-intro p{font-size:11px;color:#898b83;line-height:1.55;margin:0}.field{display:flex;flex-direction:column;gap:7px;margin-bottom:14px}.field>span{font-size:10px;font-weight:700;color:#62655d;display:flex;align-items:center;gap:7px}.field input,.field textarea{width:100%;border:1px solid #e5e5de;border-radius:11px;background:white;padding:12px 13px;outline:none;color:var(--ink);font-size:12px;resize:vertical}.field input:focus,.field textarea:focus{border-color:#a99a87;box-shadow:0 0 0 3px rgba(150,112,79,.09)}.field input::placeholder,.field textarea::placeholder{color:#b5b7af}.field-dot{width:7px;height:7px;border-radius:50%;display:inline-block}.instagram-dot{background:#c13f75}.google-dot{background:#4285f4}.whatsapp-dot{background:#128c61}.color-options{display:flex;gap:10px;padding:2px 0 4px}.color-choice{width:27px;height:27px;border-radius:50%;background:var(--swatch);border:3px solid #fff;box-shadow:0 0 0 1px #deded7}.color-choice.selected{box-shadow:0 0 0 2px var(--ink)}.form-tip{display:flex;gap:9px;padding:11px 12px;background:#f0f0eb;border-radius:11px;margin-top:17px}.form-tip>span{width:17px;height:17px;border-radius:50%;display:grid;place-items:center;background:#dcded5;color:#66695f;font-size:10px;font-weight:800;flex:0 0 17px}.form-tip p{font-size:10px;line-height:1.55;color:#767970;margin:0}.subsection-title{font-size:9px;letter-spacing:1.2px;color:#92948b;font-weight:800;margin:22px 0 12px}.analytics-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.metric-card{border:1px solid #e9e9e2;background:white;border-radius:13px;padding:12px 11px;min-width:0}.metric-card.metric-primary{background:#f1f0ea;border-color:#eeede6}.metric-card span{display:block;font-size:9px;color:#777970;line-height:1.35;min-height:25px}.metric-card strong{display:block;font-size:25px;letter-spacing:-1px;margin:7px 0 2px}.metric-card small{display:block;font-size:8px;line-height:1.4;color:#a0a197}.activity-card{border:1px solid #e9e9e2;background:white;border-radius:14px;padding:15px;margin-top:12px}.activity-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:17px}.activity-head strong{font-size:11px}.activity-head span{font-size:8px;letter-spacing:1px;color:#999b93;font-weight:800}.bar-row{display:grid;grid-template-columns:78px 1fr 22px;align-items:center;gap:9px;margin:12px 0}.bar-row label{font-size:9px;color:#777970}.bar-track{height:7px;background:#f0f0ec;border-radius:20px;overflow:hidden}.bar-fill{height:100%;width:0;background:var(--accent);border-radius:20px;transition:width .25s ease}.bar-row b{font-size:9px;color:#6d7068;text-align:right}.reset-analytics{margin-top:14px;border:0;background:transparent;color:#797b73;font-size:10px;text-decoration:underline;text-underline-offset:3px;padding:5px 0}.analytics-disclaimer{font-size:9px;line-height:1.55;color:#999b93;margin:8px 0 0}.dashboard-footer{border-top:1px solid var(--line);background:#fff;padding:13px 20px;display:flex;align-items:center;justify-content:space-between;gap:10px}.save-status{font-size:9px;color:#92948b;line-height:1.4}.dashboard-footer>div{display:flex;gap:7px}.button{border-radius:10px;padding:11px 14px;border:1px solid transparent;font-size:10px;font-weight:750}.button-quiet{background:#f0f0eb;color:#5f6259}.button-primary{background:var(--ink);color:#fff}.toast{position:fixed;z-index:50;left:50%;bottom:22px;transform:translate(-50%,15px);opacity:0;pointer-events:none;background:#252722;color:white;border-radius:12px;padding:12px 16px;max-width:calc(100vw - 34px);width:max-content;text-align:center;font-size:11px;line-height:1.5;box-shadow:0 8px 24px rgba(0,0,0,.18);transition:opacity .2s ease,transform .2s ease}.toast.show{opacity:1;transform:translate(-50%,0)}
@keyframes fadeIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
/* Arabic direction and responsive behavior */
html[dir="rtl"] body{text-align:right}html[dir="rtl"] .business-category{letter-spacing:0}html[dir="rtl"] .destination-link,html[dir="rtl"] .website-entry{ text-align:right;flex-direction:row-reverse}html[dir="rtl"] .destination-copy{align-items:flex-start}html[dir="rtl"] .link-arrow{transform:rotate(180deg)}html[dir="rtl"] .website-back{flex-direction:row-reverse}html[dir="rtl"] .dashboard-header,html[dir="rtl"] .dashboard-footer{direction:rtl}html[dir="rtl"] .field>span{flex-direction:row-reverse}html[dir="rtl"] .bar-row{direction:rtl;grid-template-columns:78px 1fr 22px}html[dir="rtl"] .bar-row b{text-align:left}html[dir="rtl"] .form-tip{flex-direction:row-reverse}html[dir="rtl"] .activity-head{direction:rtl}
@media(min-width:700px){.demo-bar{height:76px}.app-frame{margin-top:4px;min-height:790px;padding:21px 27px 15px}.demo-note{margin-bottom:31px}.business-hero{padding-top:14px;padding-bottom:28px}.business-avatar{width:82px;height:82px}.business-name{font-size:33px}.link-list{gap:11px}.destination-link{min-height:70px}.website-entry{min-height:76px}}
@media(max-width:430px){.demo-bar{padding:0 13px;height:61px}.brand{font-size:18px}.brand-mark{width:25px;height:25px}.demo-tools{gap:5px}.business-picker-wrap select{max-width:118px;min-width:85px;height:34px;font-size:10px}.tool-button{height:34px;min-width:34px}.app-frame{width:calc(100% - 18px);min-height:calc(100dvh - 73px);padding:15px 16px 12px;border-radius:23px}.demo-note{margin-bottom:20px}.business-hero{padding-bottom:20px}.business-avatar{width:68px;height:68px;border-radius:22px;font-size:23px}.business-name{font-size:27px}.destination-link{min-height:62px;padding:9px 12px}.destination-icon{width:39px;height:39px;flex-basis:39px}.website-entry{min-height:67px;margin-top:14px}.page-footer{padding-top:21px;font-size:8px}.overlay{padding:0}.overlay.open{align-items:stretch}.dashboard{width:100%;max-height:100dvh;height:100dvh;border-radius:0}.dashboard-header{padding:19px 17px 14px}.dashboard-header h1{font-size:21px}.dashboard-tabs{padding-left:13px;padding-right:13px}.dashboard-content{padding:17px}.dashboard-footer{padding:12px 15px}.save-status{max-width:145px;font-size:8px}.analytics-grid{gap:6px}.metric-card{padding:10px 8px}.metric-card strong{font-size:22px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}