/* mohammedyismail.com | Apple-inspired finish: soft tiles, frosted glass, iOS controls */
:root{--tile:#f5f5f7;--tile-hover:#efeff2;--ease:cubic-bezier(.25,.1,.25,1);--glass:rgba(255,255,255,.72)}
:root[data-theme="dark"]{--tile:#172328;--tile-hover:#1c2b31;--glass:rgba(22,34,39,.72)}

/* header: thin frosted bar */
.site-header{background:color-mix(in srgb,var(--bg) 72%,transparent);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px)}
.header-row{min-height:64px}
.site-nav{gap:28px}
.site-nav a{font-size:.86rem;letter-spacing:-.005em}
.site-nav .btn-sm{padding:8px 16px;font-size:.82rem}
.theme-toggle{width:34px;height:34px;border:0;background:var(--tile)}
.theme-toggle svg{width:16px;height:16px}
.nav-toggle{border:0;background:var(--tile);padding:7px 16px}
@media (max-width:1040px){.site-nav{top:64px;background:var(--glass);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px)}}

/* buttons and links */
.btn{font-weight:600;letter-spacing:-.005em;transition:background .3s var(--ease),transform .3s var(--ease),color .3s var(--ease)}
.btn:active{transform:scale(.97)}
.btn-ghost{border:0;background:var(--tile)}
.btn-ghost:hover{background:var(--tile-hover);color:var(--ink)}
.link-arrow,.b-more{font-weight:500}
.link-arrow::after,.b-more::after{content:" \203A";font-size:1.15em;line-height:1;transition:margin .3s var(--ease)}
.link-arrow:hover::after,.card-link:hover .link-arrow::after,.bento-tile:hover .b-more::after{margin-left:5px}

/* tiles: borderless soft grey, white on grey sections */
.card,.rung,.mock,.viz,.kpi,.kpi-note,.report,.zone,.redact,.quiz,.author-box,.summary-box,.note-box{border:0!important;box-shadow:none!important;border-radius:28px}
.card,.rung,.mock,.viz,.kpi,.kpi-note,.redact,.quiz,.author-box,.summary-box{background:var(--tile)}
.section.alt .card,.section.alt .rung,.section.alt .mock,.section.alt .viz,.section.alt .kpi,.section.alt .checkbox-list li,.section.alt .quiz{background:var(--surface)}
.card,.rung{padding:32px}
.card-link,.choose a,.feature,.bento-tile{transition:transform .5s var(--ease),background .3s var(--ease)}
.card-link:hover{transform:scale(1.015);border:0;box-shadow:none}
.card-media{padding:0}
.checkbox-list li{box-shadow:none;background:var(--tile);border-radius:16px}
.zone{background:var(--tile)}
.zone .tags span{border:0;background:var(--surface)}
.zone-b{background:var(--accent-soft)}
.report{box-shadow:0 20px 50px rgba(0,0,0,.08)!important}
.stairs .rung{box-shadow:none}
.rung-top{background:var(--accent2-soft)!important}
.home .section:not(.alt) .g4>.card:not(.card-link){background:transparent}
.slot{border:0;background:var(--surface)}
.section.alt .slot,.mock .slot{background:var(--bg2)}
.kpi-mini div,.vflow div,.ph-steps li{border-radius:14px}
.mini-dash div{border:0;border-radius:18px}
.chip{border:0;background:var(--tile)}
.section.alt .chip{background:var(--surface)}
.zig-img,.head-img,.split-img,.wide-img,.feature-img,.hero-photo,.call-mock,.choose a{border-radius:28px}
.stage-tag{font-size:.66rem;letter-spacing:.1em}

/* hero cards as iOS notifications */
.float-card{background:var(--glass);backdrop-filter:saturate(180%) blur(24px);-webkit-backdrop-filter:saturate(180%) blur(24px);border:0;border-radius:20px;padding:12px 16px 12px 12px;box-shadow:0 10px 30px rgba(0,0,0,.12);min-width:230px;gap:12px}
.float-card i{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 55%,#7fd6cf));color:#fff;font-size:.9rem}
.fc-warm i{background:linear-gradient(135deg,var(--accent2),#f4b393);color:#fff}
.float-card small{display:block;color:var(--dim);font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;margin-bottom:1px}
.float-card b{font-size:.88rem}
.float-card span{font-size:.8rem}

/* FAQ with chevrons */
.faq summary::after{content:"";width:9px;height:9px;border-right:2px solid var(--dim);border-bottom:2px solid var(--dim);transform:rotate(45deg);top:6px;right:8px;transition:transform .3s var(--ease)}
.faq details[open] summary::after{content:"";transform:rotate(-135deg);top:10px}
.faq summary:hover{color:var(--accent-text)}

/* iOS-style fields */
input,select,textarea{border:0;background:var(--tile);border-radius:14px;padding:14px 16px}
.section.alt input,.section.alt select,.section.alt textarea,.card input,.card select,.card textarea{background:var(--surface)}
.section.alt .card input,.section.alt .card select,.section.alt .card textarea{background:var(--tile)}
input:focus,select:focus,textarea:focus{box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 30%,transparent)}
select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a96a0' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:16px;padding-right:42px}

/* iOS switch for consent */
.consent{align-items:center}
.consent input[type="checkbox"]{appearance:none;-webkit-appearance:none;width:51px;height:31px;border-radius:999px;background:var(--line2);position:relative;flex:none;cursor:pointer;margin:0;padding:0;transition:background .25s var(--ease)}
.consent input[type="checkbox"]::after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.2);transition:transform .25s var(--ease)}
.consent input[type="checkbox"]:checked{background:#34c759}
.consent input[type="checkbox"]:checked::after{transform:translateX(20px)}

/* quiz options as iOS list rows */
.q-opt{border:0;background:var(--surface);border-radius:16px;padding:17px 52px 17px 20px;position:relative;transition:background .2s var(--ease),transform .2s var(--ease)}
.quiz .q-opt{background:var(--surface)}
.q-opt:hover{background:var(--tile-hover)}
.q-opt:active{transform:scale(.99)}
.q-opt[aria-checked="true"]{background:var(--accent-soft);border:0}
.q-opt[aria-checked="true"]::after{content:"";position:absolute;right:22px;top:50%;width:7px;height:13px;border-right:2.5px solid var(--accent);border-bottom:2.5px solid var(--accent);transform:translateY(-65%) rotate(45deg)}
.q-progress{height:4px}

/* services bento */
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:64px;text-align:left}
.bento-tile{position:relative;background:var(--tile);border-radius:30px;padding:36px;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;min-height:340px;overflow:hidden}
.bento-tile:hover{transform:scale(1.012);background:var(--tile-hover)}
.bento-wide{grid-column:span 2}
.b-icon{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--surface);color:var(--accent-text);margin-bottom:22px}
.b-icon svg{width:24px;height:24px}
.b-stage{font-size:.68rem;font-weight:700;letter-spacing:.12em;color:var(--accent2-text);margin-bottom:6px}
.bento-tile h2{font-size:1.55rem;margin-bottom:.4em}
.bento-tile p{color:var(--ink2);max-width:420px;margin-bottom:18px}
.b-more{color:var(--accent-text);margin-top:auto}
.b-viz{position:absolute;right:36px;bottom:36px;width:42%;display:grid;gap:10px}
.b-viz.hbars span{display:block;height:14px;background:var(--surface);border-radius:999px;overflow:hidden}
.b-viz.hbars i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 50%,var(--accent2)))}
.b-notes span{background:var(--glass);backdrop-filter:blur(20px);border-radius:14px;padding:10px 14px;font-size:.8rem;font-weight:600;box-shadow:0 6px 18px rgba(0,0,0,.06)}
.b-notes span::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);margin-right:8px}
.b-chat span{justify-self:start;background:var(--surface);border-radius:18px 18px 18px 6px;padding:10px 14px;font-size:.8rem;max-width:90%}
.b-chat .me{justify-self:end;background:var(--accent);color:#fff;border-radius:18px 18px 6px 18px}
@media (max-width:980px){.b-viz{position:static;width:100%;margin-top:22px}}
@media (max-width:860px){.bento{grid-template-columns:1fr}.bento-wide{grid-column:auto}.bento-tile{min-height:0;padding:28px}}

/* demo panel and cta card: same tile language */
.demo-panel{border-radius:30px}
.cta-band.cta-card .cta-inner{border-radius:30px}
.price-split{border-radius:30px}
.checkpanel{border-radius:30px}
.bento-wide h2,.bento-wide p{max-width:52%}
.b-viz{width:36%}
@media (max-width:980px){.bento-wide h2,.bento-wide p{max-width:none}}

/* secondary buttons: tinted pill that reads on every background */
.btn-ghost{background:var(--accent-soft);color:var(--accent-text);border:0}
.btn-ghost:hover{background:color-mix(in srgb,var(--accent-soft) 80%,var(--accent));color:var(--accent-text)}
.cta-card .btn-ghost{background:var(--surface)}
.cta-card .btn-ghost:hover{background:var(--accent-soft)}
/* on dark panels: frosted white */
.ink-band .btn-ghost,.cta-band.cta-ink .btn-ghost,.hero-bleed .btn-ghost{background:rgba(255,255,255,.12);color:#fff;border:0;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.ink-band .btn-ghost:hover,.cta-band.cta-ink .btn-ghost:hover,.hero-bleed .btn-ghost:hover{background:rgba(255,255,255,.22);color:#fff}
.ink-band{--tile:rgba(255,255,255,.06);--tile-hover:rgba(255,255,255,.1)}
.ink-band .mini-dash div{background:rgba(255,255,255,.07)}
.ink-band .spark span{background:rgba(255,255,255,.14)}
.ink-band .spark span:last-child{background:var(--accent2)}
.cta-band:not(.cta-ink):not(.cta-card) .btn-ghost,.section.alt .btn-ghost{background:var(--surface);color:var(--accent-text);box-shadow:0 1px 2px rgba(18,38,48,.06),inset 0 0 0 1px var(--line)}
.cta-band:not(.cta-ink):not(.cta-card) .btn-ghost:hover,.section.alt .btn-ghost:hover{background:var(--accent-soft)}