/* Toronto Computers — foundational chrome (extracted from the home preview).
   Shared by every page. Light-theme refinements live in toronto-apple-light.css,
   interior-page components in toronto-site.css. */

:root{--n:#050d18;--m:#0a1e36;--b:#3076df;--c:#6fa377;--p:#f7faff;--i:#eef7ff;--s:#6d7a8e;--l:#07111f1f;--pad:clamp(22px,6vw,96px)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--n);background:var(--p);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
img{max-width:100%;display:block}
::selection{background:var(--b);color:white}
.skip{position:fixed;top:-80px;left:20px;z-index:300;padding:12px 18px;background:white;border-radius:10px}
.skip:focus{top:20px}
.progress{position:fixed;z-index:200;top:0;left:0;width:0;height:3px;background:linear-gradient(90deg,var(--b),var(--c));box-shadow:0 0 18px var(--c)}

.nav{position:fixed;z-index:100;top:18px;left:50%;transform:translateX(-50%);width:min(94%,1500px);height:74px;padding:0 10px 0 22px;display:flex;align-items:center;gap:32px;border:1px solid #ffffffe6;border-radius:22px;background:linear-gradient(115deg,#ffffffc7,#e8f6ff8f);backdrop-filter:blur(28px) saturate(150%);box-shadow:inset 0 1px #fff,0 18px 55px #0d24441c;transition:.35s}
.nav.small{top:8px;height:66px;background:#f7faffeb}
.brand{display:flex;align-items:center;gap:11px;letter-spacing:.09em;font-size:.82rem;white-space:nowrap}
.brand b{font-weight:900}
.mark{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:linear-gradient(145deg,#174ec9,var(--c));color:white;font-size:.65rem;font-weight:900;box-shadow:inset 0 1px #ffffff9c,0 8px 18px #3076df47}
.links{margin-left:auto;display:flex;gap:27px;color:#43536b;font-size:.84rem}
.links a{position:relative}
.links a:after{content:"";position:absolute;left:0;right:100%;bottom:-9px;height:1px;background:var(--b);transition:.3s}
.links a:hover:after{right:0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:18px;min-height:51px;padding:0 21px;border:0;border-radius:15px;background:linear-gradient(135deg,#123d91,var(--b));color:white;font-size:.82rem;font-weight:780;box-shadow:0 17px 36px #3076df47;cursor:pointer;transition:.25s}
.btn:hover{transform:translateY(-2px);box-shadow:0 22px 44px #3076df59}
.btn.dark{background:var(--n);box-shadow:0 14px 30px #050d182e}
.menu{display:none;margin-left:auto;border:0;background:transparent;font-size:1.5rem}
.mobile{position:fixed;z-index:130;inset:0;padding:28px;background:linear-gradient(145deg,#071426,#0b294c);color:white;display:flex;flex-direction:column;overflow-y:auto;opacity:0;visibility:hidden;transform:translateY(-20px);transition:.35s}
.mobile nav{flex:none}
.mobile.open{opacity:1;visibility:visible;transform:none}
.mobile button{align-self:flex-end;border:0;background:none;color:white;font-size:2rem}
.mobile nav{display:flex;flex-direction:column;margin:auto 0}
.mobile a{display:flex;justify-content:space-between;padding:20px 0;border-bottom:1px solid #ffffff1f;font-size:clamp(1.6rem,7vw,2.6rem)}

.hero{position:relative;min-height:900px;height:100vh;max-height:1080px;padding:150px var(--pad) 64px;display:grid;grid-template-columns:.94fr 1.06fr;align-items:center;overflow:hidden;background:linear-gradient(135deg,#fff,#edf7ff 56%,#f4f0ff)}
.hero:before{content:"";position:absolute;width:900px;height:900px;right:-200px;top:-300px;border-radius:50%;background:conic-gradient(from 120deg,#3076df1a,#6fa3773d,#9ccf9e21,#3076df1a);filter:blur(80px);animation:spin 20s linear infinite}
.copy{position:relative;z-index:3}
.eye{display:flex;align-items:center;gap:10px;color:var(--b);font-size:.7rem;font-weight:850;letter-spacing:.18em;text-transform:uppercase}
.eye i{width:8px;height:8px;border-radius:50%;background:#6fa377;box-shadow:0 0 0 7px #6fa3771f}
h1{margin:28px 0 30px;font-size:clamp(3.8rem,6vw,7.2rem);line-height:.91;letter-spacing:-.067em}
h1 span,.display span{font-weight:260;background:linear-gradient(90deg,#06205b,#3076df);-webkit-background-clip:text;color:transparent}
.lead{max-width:650px;color:var(--s);font-size:clamp(1.05rem,1.25vw,1.3rem);line-height:1.7}
.actions{display:flex;align-items:center;gap:22px;margin-top:38px}
.textlink{display:inline-flex;align-items:center;gap:12px;font-size:.88rem;font-weight:750}
.play{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--l);border-radius:50%}
.proof{display:flex;gap:clamp(22px,3vw,54px);margin-top:58px;padding-top:25px;border-top:1px solid var(--l)}
.proof div{display:flex;align-items:center;gap:10px}
.proof small{max-width:110px;color:var(--s)}
.visual{position:relative;z-index:2;height:690px;display:grid;place-items:center}
.heroimg{position:relative;width:115%;max-width:none;filter:drop-shadow(0 34px 48px #102a4a2e);transform:translateX(3%);animation:float 7s ease-in-out infinite}
.halo{position:absolute;width:78%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#fff,#72c8ff33 45%,transparent 70%)}
.orbit{position:absolute;width:83%;height:52%;border:1px solid #3076df2e;border-radius:50%;transform:rotate(-14deg)}
.tag{position:absolute;padding:12px 15px;border:1px solid #ffffffe6;border-radius:13px;background:linear-gradient(135deg,#ffffffcc,#e7f5ff94);backdrop-filter:blur(14px);box-shadow:inset 0 1px #fff,0 15px 34px #18385f1c;color:#52627a;font-size:.65rem;letter-spacing:.08em;text-transform:uppercase;animation:float 5s ease-in-out infinite}
.tag b{color:var(--b)}
.t1{right:2%;top:18%}.t2{left:0;bottom:31%;animation-delay:-2s}.t3{right:2%;bottom:18%;animation-delay:-3s}
.scroll{position:absolute;bottom:23px;left:50%;transform:translateX(-50%);color:#728198;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase}

.trust{padding:40px var(--pad);background:white;text-align:center;overflow:hidden}
.trust p{margin:0;color:#8693a5;font-size:.67rem;letter-spacing:.17em;text-transform:uppercase}
.logos{position:relative;margin-top:27px;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.logo-track{display:flex;width:max-content;gap:clamp(46px,6vw,100px);color:#788697;font-size:clamp(1rem,1.65vw,1.45rem);font-weight:850;animation:logoMarquee 25s linear infinite}
.logo-track span{min-width:max-content;transition:color .25s,transform .25s}
.logo-track span:hover{color:var(--b);transform:translateY(-2px)}
.logos:hover .logo-track{animation-play-state:paused}
.section{padding:clamp(90px,10vw,160px) var(--pad)}
.statement{text-align:center;background:white}
.display{margin:0;font-size:clamp(3rem,5.6vw,6.1rem);line-height:.98;letter-spacing:-.06em}
.statement p{max-width:800px;margin:34px auto;color:var(--s);font-size:1.16rem;line-height:1.75}
.line{width:min(620px,70%);height:1px;margin:70px auto 0;background:linear-gradient(90deg,transparent,var(--b),transparent)}
.head{display:flex;align-items:end;justify-content:space-between;gap:40px;margin-bottom:55px}
.head p{max-width:400px;color:var(--s);line-height:1.7}
.portfolio{background:var(--p)}
.grid{display:grid;grid-template-columns:1.15fr .85fr .85fr;gap:18px}
.card{position:relative;min-height:390px;padding:28px;border-radius:28px;overflow:hidden;background:linear-gradient(145deg,#e8f2fb,#fff);border:1px solid #ffffffe6;box-shadow:0 12px 36px #0b234111;transition:.4s}
.card:first-child{grid-row:span 2;min-height:798px;background:linear-gradient(145deg,#071626,#0d3154);color:white}
.card:hover{transform:translateY(-7px);box-shadow:0 28px 80px #07193324}
.num{display:grid;place-items:center;width:40px;height:40px;border:1px solid currentColor;border-radius:50%;opacity:.55;font-size:.73rem}
.avail{position:absolute;top:27px;right:27px;padding:9px 12px;border-radius:99px;background:#ffffffa3;color:#536379;font-size:.62rem;text-transform:uppercase;letter-spacing:.08em}
.card:first-child .avail{background:#ffffff1a;color:#d9e9f9}
.art{height:235px;margin:22px -28px 25px;overflow:hidden;background:#0a1e36}
.card:first-child .art{height:530px}
.art img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1),filter .5s;filter:saturate(.88) contrast(1.03)}
.card:hover .art img{transform:scale(1.055);filter:saturate(1) contrast(1.05)}
.card h3{margin:0 0 9px;font-size:clamp(1.45rem,2vw,2.25rem);letter-spacing:-.04em}
.card p{margin:0;color:#6f7f92;line-height:1.6}
.card:first-child p{color:#a9bdd2}
.card a{display:inline-flex;margin-top:20px;font-size:.8rem;font-weight:800}

.black{position:relative;overflow:hidden;background:var(--n);color:white}
.black:before{content:"";position:absolute;width:760px;height:760px;right:-260px;top:-380px;border-radius:50%;background:#3076df2e;filter:blur(110px)}
.black .eye{color:var(--c)}
.black .display span{color:#8aa1bb;background:none}
.black .intro{max-width:660px;color:#94a7bd;font-size:1.08rem;line-height:1.7}
.timeline{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:28px;margin-top:95px}
.timeline:before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:#2a3e55}
.step{position:relative;padding-top:42px}
.step:before{content:"";position:absolute;top:-7px;width:13px;height:13px;border:3px solid var(--b);border-radius:50%;background:var(--n);box-shadow:0 0 0 7px #3076df1f}
.step b{color:var(--c);font-size:2.3rem;font-weight:300}
.step h3{font-size:1.05rem}
.step p{color:#8fa2b9;font-size:.87rem;line-height:1.7}
.quality{background:white}
.panel{min-height:690px;padding:clamp(32px,6vw,86px);display:grid;grid-template-columns:1fr 1fr;gap:60px;border-radius:34px;background:linear-gradient(135deg,#edf7ff,#f7f2ff);overflow:hidden}
.panel p{color:var(--s);font-size:1.08rem;line-height:1.7}
.checks{list-style:none;padding:0;margin:40px 0 0;border-top:1px solid var(--l)}
.checks li{padding:17px 0;border-bottom:1px solid var(--l);font-weight:700}
.checks span{display:inline-block;width:45px;color:var(--b);font-size:.7rem}
.meter{position:relative;display:grid;place-items:center;min-height:480px}
.core{z-index:3;width:235px;height:235px;display:grid;place-items:center;text-align:center;border:1px solid white;border-radius:50%;background:#ffffffba;box-shadow:inset 0 1px #fff,0 36px 90px #20559433}
.core strong{font-size:3.5rem}
.core small{display:block;color:var(--s);font-size:.65rem;letter-spacing:.14em;text-transform:uppercase}
.ring{position:absolute;width:380px;height:380px;border:1px solid #3076df40;border-top-color:var(--b);border-radius:50%;animation:spin 17s linear infinite}
.ring.b{width:500px;height:500px;border-right-color:var(--c);animation-direction:reverse;animation-duration:25s}

.global{display:grid;grid-template-columns:.83fr 1.17fr;align-items:center;gap:60px}
.global p{color:#93a6bc;font-size:1.08rem;line-height:1.7}
.map{position:relative;min-height:520px;display:grid;place-items:center}
.world{width:90%;aspect-ratio:1.75;background:radial-gradient(ellipse at 60% 44%,#1b466d,#0b1e33 65%,transparent 66%);clip-path:polygon(3% 25%,18% 10%,31% 18%,40% 34%,49% 12%,69% 6%,93% 25%,86% 45%,72% 48%,75% 78%,62% 93%,50% 68%,38% 76%,28% 62%,13% 78%,4% 56%)}
.dot{position:absolute;width:11px;height:11px;border-radius:50%;background:var(--c);box-shadow:0 0 0 8px #6fa3771a,0 0 25px var(--c)}
.d1{left:61%;top:47%}.d2{left:29%;top:36%}.d3{left:46%;top:29%}.d4{left:76%;top:34%}.d5{left:57%;top:69%}
.benefits{background:white}
.benefitgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:52px}
.benefit{padding:30px;border:1px solid var(--l);border-radius:20px;background:white;transition:.3s}
.benefit:hover{transform:translateY(-4px);border-color:#3076df59}
.benefit i{display:grid;place-items:center;width:43px;height:43px;border-radius:13px;background:var(--i);color:var(--b);font-style:normal;font-weight:900}
.benefit p{color:var(--s);line-height:1.6;font-size:.9rem}
.sustain{display:grid;grid-template-columns:1fr 1fr;gap:clamp(50px,8vw,130px);align-items:center;background:var(--i)}
.cyclebox{position:relative;min-height:500px;border-radius:32px;background:linear-gradient(145deg,#07192d,#103b5a);overflow:hidden;box-shadow:0 28px 80px #07193324}
.cyclebox:before{content:"";position:absolute;width:430px;height:430px;left:50%;top:50%;transform:translate(-50%,-50%);border:1px solid #6fa37747;border-radius:50%;box-shadow:0 0 0 60px #3076df0f,0 0 0 120px #6fa3770a}
.cycle{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);font-size:7rem;color:var(--c)}
.sustain p{color:var(--s);font-size:1.08rem;line-height:1.75}
.note{padding:22px;border-left:2px solid var(--b);background:white;color:#5f7085;font-size:.87rem;line-height:1.6}
.quote{text-align:center;background:#f0f5fb}
.quote blockquote{max-width:1080px;margin:35px auto;font-size:clamp(1.65rem,3.4vw,3.8rem);line-height:1.2;letter-spacing:-.045em}
.qmark{height:60px;color:var(--b);font:6rem Georgia}
.quote small{color:var(--s);letter-spacing:.1em;text-transform:uppercase}
.contact{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(50px,8vw,120px);background:linear-gradient(135deg,#06111f,#0b294b);color:white}
.contact .eye{color:var(--c)}
.contact p{color:#9cacc0;font-size:1.05rem;line-height:1.7}
.details{display:flex;flex-direction:column;gap:12px;margin-top:38px;font-weight:700}
.form{padding:clamp(25px,4vw,48px);border:1px solid #ffffff24;border-radius:28px;background:#ffffff0f;backdrop-filter:blur(16px)}
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.form label{display:block;color:#9db0c6;font-size:.69rem;letter-spacing:.08em;text-transform:uppercase}
.form input,.form select,.form textarea{width:100%;margin-top:7px;padding:12px 0;border:0;border-bottom:1px solid #ffffff40;background:transparent;color:white;outline:0}
.form option{color:var(--n)}
.wide{grid-column:1/-1}
.form .btn{width:100%;margin-top:26px}
.success{display:none;padding:45px;text-align:center}
.success b{display:grid;place-items:center;width:72px;height:72px;margin:auto;border-radius:50%;background:#6fa37726;color:var(--c);font-size:2rem}
footer{padding:70px var(--pad) 24px;background:#030911;color:white}
.foot{display:grid;grid-template-columns:1.8fr repeat(4,1fr);gap:28px;padding-bottom:60px}
.foot>div{display:flex;flex-direction:column;gap:13px}
.foot p,.foot a{color:#9baabc;font-size:.95rem;line-height:1.65}
.foot h3{color:#66798f;font-size:.76rem;letter-spacing:.13em;text-transform:uppercase}
.bottom{padding-top:23px;border-top:1px solid #172538;display:flex;justify-content:space-between;color:#61748a;font-size:.78rem;text-transform:uppercase}
.reveal{opacity:0;transform:translateY(35px);transition:.85s}
.reveal.in{opacity:1;transform:none}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes float{50%{transform:translateY(-10px)}}
@keyframes logoMarquee{to{transform:translateX(calc(-50% - clamp(23px,3vw,50px)))}}

@media(max-width:1050px){.links{display:none}.menu{display:block}.nav .btn{display:none}.hero{height:auto;max-height:none;grid-template-columns:1fr}.grid{grid-template-columns:1fr 1fr}.card:first-child{grid-column:1/-1;grid-row:auto;min-height:650px}.timeline{grid-template-columns:repeat(2,1fr)}.timeline:before{display:none}.step{border-top:1px solid #2a3e55}.panel,.global,.sustain,.contact{grid-template-columns:1fr}.benefitgrid{grid-template-columns:repeat(2,1fr)}.foot{grid-template-columns:repeat(2,1fr)}.foot>div:first-child{grid-column:1/-1}}
@media(max-width:680px){:root{--pad:20px}.nav{height:64px}.brand{font-size:.71rem}.hero{min-height:1050px;padding-top:125px}.hero h1{font-size:3.45rem}.actions{align-items:flex-start;flex-direction:column}.proof{flex-wrap:wrap}.visual{height:500px}.heroimg{width:150%}.tag{font-size:.56rem}.t1{right:-8%}.t2{left:-2%}.t3{right:-5%}.logo-track{animation-duration:18s}.head{align-items:flex-start;flex-direction:column}.grid{grid-template-columns:1fr}.card:first-child{grid-column:auto;min-height:570px}.card:first-child .art{height:340px}.timeline{grid-template-columns:1fr}.panel{padding:38px 20px}.meter{min-height:430px;transform:scale(.77)}.benefitgrid{grid-template-columns:1fr}.cyclebox{min-height:390px}.formgrid{grid-template-columns:1fr}.wide{grid-column:auto}.foot{grid-template-columns:1fr}.bottom{flex-direction:column;gap:10px}.display{font-size:3.2rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}
