/* Digital Fox — SaaS templates: Aurora (dark) and Daylight (light) */
body.tpl-aurora{--s-bg:#0A0916;--s-bg2:#12102A;--s-surface:rgba(255,255,255,.05);--s-border:rgba(255,255,255,.1);--s-fg:#F4F3FF;--s-muted:#A9A8C9;--s-grad:linear-gradient(120deg,#FF9A3D,#FF3D81 55%,#8B5CF6);--s-glow:0 10px 40px rgba(255,61,129,.28)}
body.tpl-daylight{--s-bg:#FBFBFE;--s-bg2:#fff;--s-surface:#fff;--s-border:#E6E7F2;--s-fg:#14123A;--s-muted:#5E5D7E;--s-grad:linear-gradient(120deg,#FF6A1F,#FF3D81);--s-glow:0 10px 30px rgba(255,106,31,.25)}

.saas{background:var(--s-bg);color:var(--s-muted);overflow:hidden}
.saas h1,.saas h2,.saas h3,.saas h4{color:var(--s-fg)}
.grad{background:var(--s-grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.pill-eyebrow{display:inline-block;padding:6px 14px;border-radius:99px;border:1px solid var(--s-border);background:var(--s-surface);color:var(--s-fg);font:600 .82rem var(--body);margin-bottom:18px}
.s-sec{padding:clamp(56px,8vw,104px) 0;position:relative}
.s-head{max-width:680px;margin:0 auto 48px;text-align:center}
.s-head p{font-size:1.1rem}

/* hero */
.s-hero{position:relative;padding:clamp(64px,9vw,120px) 0 clamp(40px,6vw,80px);text-align:center}
.s-hero-in{position:relative;z-index:1}
.s-hero h1{font-size:clamp(2.5rem,6.4vw,5rem);font-weight:800;max-width:15em;margin:0 auto .35em;letter-spacing:-.035em}
html[dir=rtl] .s-hero h1{letter-spacing:0;line-height:1.25}
.s-hero .lead{font-size:clamp(1.05rem,1.6vw,1.25rem);max-width:36em;margin:0 auto 30px}
.s-hero .hero-cta,.s-hero .hero-meta,.s-cta .hero-cta{justify-content:center}
.s-hero .hero-meta{color:var(--s-muted);margin-bottom:56px}
.s-orb{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;animation:df-float 16s ease-in-out infinite}
.s-orb.o1{width:420px;height:420px;background:#FF6A1F;top:-120px;inset-inline-start:8%;opacity:.45}
.s-orb.o2{width:380px;height:380px;background:#8B5CF6;top:40px;inset-inline-end:6%;opacity:.4;animation-delay:-5s}
.s-orb.o3{width:300px;height:300px;background:#FF3D81;bottom:-60px;inset-inline-start:40%;opacity:.3;animation-delay:-9s}
body.tpl-daylight .s-orb{opacity:.28}
@keyframes df-float{0%,100%{transform:translate(0,0)}50%{transform:translate(24px,-30px)}}
@media(prefers-reduced-motion:reduce){.s-orb{animation:none}}

/* browser mock */
.s-visual{max-width:920px;margin:0 auto;position:relative}
.hero-img.s-visual img{width:100%;border-radius:18px;box-shadow:0 40px 100px rgba(0,0,0,.35);border:1px solid var(--s-border)}
.s-mock{background:var(--s-bg2);border:1px solid var(--s-border);border-radius:20px;box-shadow:0 40px 100px rgba(0,0,0,.35),var(--s-glow);text-align:start}
body.tpl-daylight .s-mock{box-shadow:0 40px 90px rgba(20,18,58,.14)}
.s-bar{display:flex;align-items:center;gap:7px;padding:13px 18px;border-bottom:1px solid var(--s-border)}
.s-bar i{width:11px;height:11px;border-radius:50%;background:var(--s-border)}.s-bar i:first-child{background:#FF6A1F}
.s-bar span{margin-inline-start:12px;flex:1;max-width:320px;padding:4px 14px;border-radius:99px;background:var(--s-surface);border:1px solid var(--s-border);font-size:.78rem;color:var(--s-muted)}
.s-site{padding:22px;display:grid;gap:20px}
.s-nav{display:flex;align-items:center;gap:14px}
.s-nav b{width:70px;height:12px;border-radius:6px;background:var(--s-grad)}
.s-nav u{width:42px;height:8px;border-radius:5px;background:var(--s-border)}
.s-nav s{margin-inline-start:auto;width:70px;height:22px;border-radius:99px;background:var(--s-fg);opacity:.9}
.s-hero2{display:grid;grid-template-columns:1.1fr 1fr;gap:22px;align-items:center}
.s-hero2 h4{height:22px;border-radius:7px;background:var(--s-fg);width:88%;margin:0 0 12px;opacity:.9}
.s-hero2 p{height:9px;border-radius:5px;background:var(--s-border);width:100%;margin:0 0 8px}
.s-hero2 p+p{width:70%}
.s-btn{display:block;width:96px;height:28px;border-radius:99px;background:var(--s-grad);margin-top:16px}
.s-img{aspect-ratio:4/3;border-radius:14px;background:var(--s-grad);opacity:.9;position:relative;overflow:hidden}
.s-img::after{content:"";position:absolute;inset:auto -20% -40% 20%;height:80%;border-radius:50%;background:rgba(255,255,255,.28)}
.s-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.s-cards i{aspect-ratio:1/.8;border-radius:12px;background:var(--s-surface);border:1px solid var(--s-border)}
.s-chip{position:absolute;padding:9px 16px;border-radius:99px;background:var(--s-bg2);border:1px solid var(--s-border);color:var(--s-fg);font:600 .82rem var(--body);box-shadow:0 14px 40px rgba(0,0,0,.25)}
.s-chip::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--mint);margin-inline-end:8px}
.s-chip.c1{top:22%;inset-inline-start:-22px}.s-chip.c2{bottom:14%;inset-inline-end:-22px}

/* cards, grids */
.s-grid{display:grid;gap:20px}
.s-grid.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.s-grid.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.s-card{display:block;background:var(--s-surface);border:1px solid var(--s-border);border-radius:20px;padding:26px;text-decoration:none;color:var(--s-muted);transition:transform .2s,border-color .2s,box-shadow .2s}
.s-card:hover{transform:translateY(-3px);border-color:#FF6A1F}
body.tpl-aurora .s-card:hover{box-shadow:var(--s-glow)}
body.tpl-daylight .s-card{box-shadow:0 1px 2px rgba(20,18,58,.04)}
body.tpl-daylight .s-card:hover{box-shadow:0 18px 40px rgba(20,18,58,.1)}
.s-card h3{font-size:1.15rem;margin:16px 0 6px}
.s-card p{margin:0;font-size:.97rem}
.s-ico{width:46px;height:46px;border-radius:13px;background:var(--s-grad);display:grid;place-items:center;color:#1b0a00}
.s-ico .ico{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* examples */
.mini{margin:0}
.mini-frame{border:1px solid var(--s-border);border-radius:16px;overflow:hidden;background:var(--s-bg2);transition:transform .2s}
.mini:hover .mini-frame{transform:translateY(-4px)}
.mini-bar{display:flex;gap:5px;padding:9px 12px;border-bottom:1px solid var(--s-border)}
.mini-bar i{width:8px;height:8px;border-radius:50%;background:var(--s-border)}
.mini-hero{padding:18px 14px;display:grid;gap:8px;background:linear-gradient(135deg,var(--c1),var(--c2))}
.mini-hero b{height:12px;width:70%;border-radius:6px;background:rgba(255,255,255,.92)}
.mini-hero u{height:7px;width:90%;border-radius:4px;background:rgba(255,255,255,.55)}
.mini-hero s{height:18px;width:60px;border-radius:99px;background:#fff;margin-top:6px}
.mini-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;padding:12px}
.mini-grid i{aspect-ratio:1;border-radius:8px;background:var(--s-surface);border:1px solid var(--s-border)}
.m-shop{--c1:#FF6A1F;--c2:#FF3D81}.m-clinic{--c1:#06B6D4;--c2:#3B82F6}.m-hotel{--c1:#8B5CF6;--c2:#EC4899}.m-food{--c1:#F59E0B;--c2:#EF4444}
.m-clinic .mini-grid{grid-template-columns:repeat(3,1fr)}.m-clinic .mini-grid i:nth-child(4){display:none}
.m-hotel .mini-hero{padding:34px 14px}.m-hotel .mini-grid{grid-template-columns:repeat(2,1fr)}
.m-food .mini-hero{padding:26px 14px}.m-food .mini-grid{grid-template-columns:repeat(3,1fr)}.m-food .mini-grid i:nth-child(4){display:none}
.mini figcaption{margin-top:12px;text-align:center;font-weight:700;color:var(--s-fg);font-family:var(--head)}

/* steps */
.s-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:x}
.s-steps li{background:var(--s-surface);border:1px solid var(--s-border);border-radius:20px;padding:28px;position:relative}
.s-steps b{width:40px;height:40px;border-radius:50%;background:var(--s-grad);color:#1b0a00;display:grid;place-items:center;font:800 1.05rem var(--head);margin-bottom:14px}
.s-steps h3{font-size:1.2rem}.s-steps p{margin:0}

/* pricing */
.s-toggle{display:flex;width:max-content;margin:0 auto 36px;padding:5px;border-radius:99px;background:var(--s-surface);border:1px solid var(--s-border)}
.s-toggle button{border:0;background:none;padding:10px 22px;border-radius:99px;font:700 .95rem var(--body);color:var(--s-muted);cursor:pointer}
.s-toggle button[aria-pressed=true]{background:var(--s-fg);color:var(--s-bg)}
.s-toggle em{font-style:normal;font-size:.75rem;background:var(--s-grad);color:#1b0a00;padding:2px 8px;border-radius:99px;margin-inline-start:6px}
.s-plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:stretch}
.s-plan{background:var(--s-surface);border:1px solid var(--s-border);border-radius:24px;padding:32px;display:flex;flex-direction:column;position:relative}
.s-plan.hot{border:1px solid transparent;background:linear-gradient(var(--s-bg2),var(--s-bg2)) padding-box,var(--s-grad) border-box;box-shadow:var(--s-glow)}
.s-badge{position:absolute;top:-13px;inset-inline-start:30px;background:var(--s-grad);color:#1b0a00;font:700 .78rem var(--body);padding:4px 14px;border-radius:99px}
.s-plan h3{font-size:1.25rem}
.s-price{margin:8px 0 6px}.s-price b{font:800 3rem var(--head);color:var(--s-fg);line-height:1}.s-price small{font-size:.95rem;margin-inline-start:6px}
.s-plan ul{list-style:none;margin:20px 0 28px;padding:0;flex:1}
.s-plan li{padding:7px 0;padding-inline-start:28px;position:relative}
.s-plan li::before{content:"✓";position:absolute;inset-inline-start:0;color:var(--mint);font-weight:800}
.s-plan .btn{width:100%}
.s-secure{text-align:center;margin:26px 0 0;font-size:.92rem}
.s-secure .ico,.stripe-note .ico{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;vertical-align:-2px}
.saas .btn-outline{color:var(--s-fg)!important;border-color:var(--s-border)!important}
.saas .s-plan .btn-outline:hover{background:var(--s-fg);color:var(--s-bg)!important}

/* faq + cta */
.s-faq{max-width:780px;margin:0 auto}
.s-faq details{background:var(--s-surface);border:1px solid var(--s-border);border-radius:16px;padding:0 24px;margin-bottom:12px}
.s-faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;padding:20px 0;font:700 1.05rem var(--head);color:var(--s-fg)}
.s-faq summary::after{content:"+";color:#FF6A1F;font-size:1.5rem;line-height:1}
.s-faq details[open] summary::after{content:"–"}
.s-faq p{margin:0 0 20px}
.s-cta{border-radius:28px;padding:clamp(40px,7vw,84px) 24px;text-align:center;position:relative;overflow:hidden;background:var(--s-grad)}
.s-cta h2,.s-cta p{color:#1b0a00}.s-cta h2{font-size:clamp(1.9rem,4vw,3rem)}
.s-cta p{max-width:34em;margin:0 auto 26px;font-size:1.1rem}
.s-cta .btn{background:#14123A;border-color:#14123A;color:#fff!important}
.s-cta .btn-ghost{background:transparent;border-color:#14123A;color:#14123A!important}

/* header + footer per template */
body.tpl-aurora .site-header{background:rgba(10,9,22,.72)}
body.tpl-aurora .btn{background:var(--s-grad);border:0;color:#1b0a00!important;box-shadow:var(--s-glow)}
body.tpl-aurora .btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
body.tpl-aurora .btn-ghost{background:transparent;box-shadow:none;border:1.5px solid rgba(255,255,255,.3);color:#fff!important}
body.tpl-aurora .btn-dark,body.tpl-aurora .btn-outline{box-shadow:none}
body.tpl-aurora .site-footer{background:#07060F}

body.tpl-daylight .site-header{background:rgba(251,251,254,.86);color:#14123A;border-bottom:1px solid #E6E7F2}
body.tpl-daylight .brand,body.tpl-daylight .brand:hover{color:#14123A}
body.tpl-daylight .nav a,body.tpl-daylight .acct-link,body.tpl-daylight .cart-link{color:#4A4966}
body.tpl-daylight .nav a:hover,body.tpl-daylight .acct-link:hover{color:#14123A}
body.tpl-daylight .nav-toggle{color:#14123A}
body.tpl-daylight .btn{background:#14123A;border-color:#14123A;color:#fff!important;box-shadow:0 8px 20px rgba(20,18,58,.18)}
body.tpl-daylight .btn:hover{background:#26235C;border-color:#26235C}
body.tpl-daylight .btn-ghost{background:#fff;color:#14123A!important;border:1.5px solid #E6E7F2;box-shadow:none}
body.tpl-daylight .btn-outline{background:transparent;color:#14123A!important}
body.tpl-daylight .btn-dark{background:#14123A;color:#fff!important}
body.tpl-daylight .s-hero .hero-meta li::before{color:#10B981}
body.tpl-daylight .site-footer{background:#fff;color:#5E5D7E;border-top:1px solid #E6E7F2}
body.tpl-daylight .site-footer h4,body.tpl-daylight .site-footer .brand{color:#14123A}
body.tpl-daylight .site-footer a{color:#5E5D7E}
body.tpl-daylight .site-footer a:hover{color:#FF6A1F}
body.tpl-daylight .foot-bottom{border-top-color:#E6E7F2}
body.tpl-daylight .s-cta .btn{background:#14123A}
body.tpl-aurora .s-cta .btn{background:#14123A;box-shadow:none}
.legal a{margin:0 2px}
.stripe-note{display:inline-flex;gap:6px;align-items:center}
@media(max-width:1000px){.s-grid.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.s-grid.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:800px){.s-plans,.s-steps{grid-template-columns:1fr}.s-hero2{grid-template-columns:1fr}.s-chip.c1{inset-inline-start:8px}.s-chip.c2{inset-inline-end:8px}}
@media(max-width:560px){.s-grid.g4,.s-grid.g3{grid-template-columns:1fr}.s-cards{grid-template-columns:repeat(2,1fr)}}