/* School College Software — product visual storytelling / 2026-11-13 */
:root{--sc-royal:#3563ed;--sc-ink:#172b60;--sc-violet:#7752e5;--sc-mint:#2bd8bb}
body:not(.admin-body) .hero-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:36px;min-height:710px}
body:not(.admin-body) .hero-copy{position:relative;z-index:2}
.sc-hero-showcase{position:relative;min-width:0;isolation:isolate;perspective:1100px;padding:32px 5px 46px}
.sc-hero-blur{position:absolute;z-index:-1;pointer-events:none;border-radius:50%;filter:blur(9px);opacity:.6}
.sc-hero-blur-one{height:245px;width:245px;background:#aa89ff;left:-95px;top:32px;animation:scBlob 13s ease-in-out infinite alternate}
.sc-hero-blur-two{height:205px;width:205px;background:#78e7db;right:-35px;bottom:0;animation:scBlob 11s ease-in-out -4s infinite alternate-reverse}
.sc-browser-window{position:relative;background:#fff;border:6px solid #ffffffe8;border-radius:22px;overflow:hidden;box-shadow:0 40px 100px #28428b40,0 0 0 1px #c9d3fb96;transform:rotateY(-3.5deg) rotateX(1deg);animation:scShowcaseEnter .8s ease both,scBrowserFloat 8s 1s ease-in-out infinite}
.sc-browser-top{display:flex;align-items:center;gap:11px;height:45px;padding:0 12px 0 15px;background:linear-gradient(90deg,#f5f8ff,#f8f8ff);border-bottom:1px solid #e0e8fa;color:#8092b2;font-size:9px}
.sc-traffic{display:flex;gap:5px}.sc-traffic i{width:9px;height:9px;border-radius:50%;background:#fc7a8e}.sc-traffic i:nth-child(2){background:#ffcb7d}.sc-traffic i:nth-child(3){background:#50d3b9}
.sc-browser-url{display:flex;align-items:center;justify-content:center;flex:1;min-width:0;background:#fff;border:1px solid #e2e9f4;border-radius:7px;padding:5px 9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;box-shadow:inset 0 1px 2px #e8ecfa}
.sc-green-dot{background:#36caac;width:5px;height:5px;border-radius:50%;display:inline-block;margin-right:6px}
.sc-browser-live{font-size:9px;font-weight:900;color:#246cdb;white-space:nowrap;letter-spacing:.04em}
.sc-screen-stage{position:relative;height:355px;overflow:hidden;background:#f4f8ff}
.sc-showcase-slide{position:absolute;inset:0;margin:0;opacity:0;visibility:hidden;transform:translateX(22px) scale(1.02);transition:opacity .65s ease,transform .75s cubic-bezier(.25,.7,.25,1),visibility .65s ease}
.sc-showcase-slide.is-active{opacity:1;visibility:visible;transform:translateX(0) scale(1)}
.sc-showcase-slide img{display:block;width:100%;height:100%;object-fit:contain;object-position:center center;background:#f0f5ff;filter:saturate(1.08)}
.sc-screen-shine{position:absolute;inset:0;pointer-events:none;background:linear-gradient(125deg,#ffffff22,transparent 29%,transparent 70%,#d5eaff36)}
.sc-browser-bottom{background:linear-gradient(115deg,#fff,#f7f8ff);display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:78px;padding:14px 18px}
.sc-browser-caption{display:grid;gap:4px}.sc-browser-caption>span{font-size:9px;letter-spacing:.12em;font-weight:900;color:#7268dc}.sc-browser-caption>strong{font-size:17px;line-height:1.25;color:#1a306b}
.sc-slide-controls{display:flex;align-items:center;gap:6px;flex:none}
.sc-slide-controls button{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#edf3ff;border:1px solid #dce3fc;color:#3d57c5;font-size:24px;transition:background .2s,transform .2s;line-height:1}
.sc-slide-controls button:hover{background:#6553df;color:#fff;transform:translateY(-2px)}
.sc-slide-controls [data-sc-counter]{font-size:10px;font-weight:900;letter-spacing:.1em;color:#7186ab;min-width:45px;text-align:center}
.sc-hero-pop{position:absolute;z-index:3;display:flex;flex-wrap:wrap;align-items:center;gap:6px 11px;background:#ffffffef;padding:12px 16px;border-radius:16px;border:1px solid #fff;box-shadow:0 14px 34px #3457aa2b;color:#29477f;max-width:190px;pointer-events:none;animation:scFloat 5s ease-in-out infinite}
.sc-hero-pop>span{display:grid;place-items:center;width:33px;height:33px;border-radius:10px;background:linear-gradient(135deg,#e7ddff,#e9f7ff);color:#755bec;font-size:22px;grid-row:span 2}
.sc-hero-pop strong{font-size:12px;white-space:nowrap}.sc-hero-pop small{font-size:9px;color:#8a9cbe;white-space:nowrap}
.sc-pop-one{top:0;right:-20px}.sc-pop-two{left:-40px;bottom:54px;animation-delay:-2.7s}
.sc-pop-two>span{background:#e8fff5;color:#16aa86}
.sc-carousel-dots{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);display:flex;gap:7px;z-index:3}
.sc-carousel-dots button{height:7px;width:7px;border:none;border-radius:99px;background:#b4c2e6;padding:0;transition:width .25s,background .25s}
.sc-carousel-dots button[aria-current="true"]{width:29px;background:linear-gradient(90deg,#5a60e4,#4ed9be)}
/* screenshot showroom */
.sc-gallery-section{padding:95px 0;background:radial-gradient(ellipse at 95% 10%,#d6f9f5 0%,transparent 27%),radial-gradient(ellipse at -10% 80%,#e8e5ff 0%,transparent 36%),#f8faff;overflow:hidden}
.sc-gallery-section.sc-gallery-large{background:#fff;padding:75px 0 110px}
.sc-gallery-head{display:flex;align-items:end;justify-content:space-between;gap:26px;margin-bottom:34px}
.sc-gallery-kicker{display:inline-flex;gap:8px;align-items:center;border-radius:99px;padding:9px 14px;border:1px solid #e4ddff;background:#fff;color:#7151d8;font-weight:900;font-size:10px;letter-spacing:.14em;box-shadow:0 8px 28px #6e5fbd14}
.sc-gallery-head h2{font-size:clamp(31px,3.6vw,48px);line-height:1.17;letter-spacing:-1.4px;margin:15px 0 14px;color:#18366b}
.sc-gallery-head h2 em{font-style:normal;background:linear-gradient(90deg,#7755ef,#25b2a9);color:transparent;background-clip:text;-webkit-background-clip:text}
.sc-gallery-head p{font-size:14px;color:#6b7b9b;line-height:1.7;margin:0;max-width:670px}
.sc-gallery-demo-link{display:inline-flex;gap:14px;align-items:center;white-space:nowrap;color:#fff;background:linear-gradient(105deg,#4366df,#7252db);padding:16px 20px;border-radius:14px;font-size:12px;font-weight:900;box-shadow:0 12px 28px #6655df33;transition:transform .22s,box-shadow .22s}
.sc-gallery-demo-link:hover{transform:translateY(-4px);box-shadow:0 18px 33px #6655df4a}
.sc-gallery-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.sc-gallery-tile{display:flex;flex-direction:column;min-width:0;padding:8px;border:1px solid #e1e8f9;border-radius:22px;overflow:hidden;text-align:left;background:#fff;box-shadow:0 10px 33px #31499513;position:relative;transform-style:preserve-3d;transition:transform .35s cubic-bezier(.2,.7,.1,1),box-shadow .35s,border-color .35s;will-change:transform}
.sc-gallery-tile:hover{transform:perspective(900px) rotateX(var(--sc-rot-x,0deg)) rotateY(var(--sc-rot-y,0deg)) translateY(-7px);box-shadow:0 25px 55px #3c5a9927;border-color:#c5c4ff}
.sc-gallery-tile:focus-visible{outline:3px solid #7d75ff;outline-offset:4px}
.sc-tile-photo{display:block;position:relative;overflow:hidden;border-radius:16px;background:#ecf1ff;aspect-ratio:1.48}
.sc-tile-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 8%;transform:scale(1.01);transition:transform .55s cubic-bezier(.2,.7,.2,1),filter .4s ease}
.sc-gallery-tile:hover .sc-tile-photo img{transform:scale(1.085);filter:saturate(1.16)}
.sc-tile-fade{position:absolute;inset:55% 0 0;background:linear-gradient(transparent,#1f337526);pointer-events:none}
.sc-tile-view{position:absolute;right:12px;top:12px;border-radius:12px;background:#fff;color:#494cd9;display:grid;place-items:center;width:39px;height:39px;font-size:22px;font-weight:700;box-shadow:0 6px 21px #24376c22;transform:translateY(-7px);opacity:0;transition:transform .25s,opacity .25s}
.sc-gallery-tile:hover .sc-tile-view,.sc-gallery-tile:focus-visible .sc-tile-view{opacity:1;transform:translateY(0)}
.sc-tile-content{display:grid;gap:9px;padding:19px 15px 20px}
.sc-tile-content small{font-size:10px;color:#7164d2;letter-spacing:.12em;font-weight:900}
.sc-tile-content strong{font-size:18px;letter-spacing:-.3px;line-height:1.25;color:#1f356c}
.sc-tile-content>span{font-size:12px;line-height:1.6;color:#7a8aa9}
.sc-gallery-tile:nth-child(6n+2) .sc-tile-photo{background:#e9fbf5}
.sc-gallery-tile:nth-child(6n+3) .sc-tile-photo{background:#fff0f5}
.sc-gallery-tile:nth-child(6n+4) .sc-tile-photo{background:#fff4e6}
.sc-gallery-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;color:#8190af;font-size:12px;margin-top:27px}
.sc-gallery-footer a{color:#6252d2;font-weight:900}
/* Lightbox: native button interaction, focus managed via JS */
.sc-preview-modal{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;padding:28px;isolation:isolate}
.sc-preview-modal[aria-hidden="false"]{display:flex}
.sc-preview-backdrop{position:absolute;inset:0;background:#0d1c3de0;backdrop-filter:blur(11px);z-index:-1}
.sc-preview-dialog{background:#fff;max-width:min(1200px,95vw);max-height:90vh;width:100%;display:flex;flex-direction:column;overflow:hidden;border:1px solid #c9d9ff;border-radius:21px;box-shadow:0 40px 110px #091d4ba3;animation:scModalIn .27s ease-out}
.sc-preview-toolbar{padding:15px 18px;display:flex;justify-content:space-between;align-items:center;gap:12px;background:#f9faff;border-bottom:1px solid #e6edfc}
.sc-preview-toolbar strong{font-size:16px;color:#233b75}
.sc-preview-toolbar button{background:#eaf0ff;border:0;border-radius:10px;height:37px;width:37px;font-size:17px;color:#314fa5}
.sc-preview-dialog>img{display:block;width:100%;height:auto;object-fit:contain;min-height:0;max-height:calc(90vh - 140px);background:#eff4fd}
.sc-preview-bottom{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:12px 20px;font-size:11px;color:#8091ae}
.sc-preview-bottom a{font-size:12px;font-weight:800;color:#5e51d6}
@keyframes scFloat{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-11px) rotate(1deg)}}
@keyframes scBlob{to{transform:translate(20px,25px) scale(1.17)}}
@keyframes scBrowserFloat{0%,100%{transform:rotateY(-3.5deg) rotateX(1deg) translateY(0)}50%{transform:rotateY(-1deg) rotateX(.8deg) translateY(-7px)}}
@keyframes scShowcaseEnter{from{opacity:0;transform:translateY(38px) rotateY(3deg)}to{opacity:1;transform:translateY(0) rotateY(-3.5deg) rotateX(1deg)}}
@keyframes scModalIn{from{opacity:0;transform:translateY(20px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:1120px){body:not(.admin-body) .hero-grid{gap:25px}.sc-browser-live{display:none}.sc-screen-stage{height:300px}.sc-hero-pop{display:none}.sc-gallery-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:850px){body:not(.admin-body) .hero-grid{grid-template-columns:1fr;max-width:760px}.sc-hero-showcase{padding:18px 0 47px;max-width:670px;margin:auto;width:100%}.sc-screen-stage{height:380px}.sc-gallery-head{align-items:start;flex-direction:column}.sc-gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){body:not(.admin-body) .hero-grid{padding-top:50px;padding-bottom:50px}.sc-hero-showcase{padding:10px 0 35px}.sc-browser-window{transform:none!important;animation:none;border-width:4px;border-radius:17px}.sc-screen-stage{height:230px}.sc-browser-bottom{padding:12px;min-height:66px}.sc-browser-caption strong{font-size:14px}.sc-browser-caption>span{font-size:8px}.sc-browser-url{font-size:8px}.sc-slide-controls button{height:30px;width:30px}.sc-gallery-section{padding:65px 0}.sc-gallery-grid{grid-template-columns:1fr;gap:15px}.sc-gallery-head h2{font-size:33px}.sc-tile-photo{aspect-ratio:1.9}.sc-tile-content{padding:14px}.sc-preview-modal{padding:10px}.sc-preview-dialog{max-width:100%;max-height:95vh}.sc-preview-dialog>img{max-height:calc(95vh - 130px)}.sc-preview-bottom{padding:11px;font-size:10px}}
@media(prefers-reduced-motion:reduce){.sc-hero-blur,.sc-browser-window,.sc-hero-pop{animation:none!important}.sc-showcase-slide,.sc-gallery-tile,.sc-gallery-tile img{transition:none!important}.sc-gallery-tile:hover{transform:none}}