/* principles */
.principles{padding:126px 0 82px;border-bottom:1px solid var(--line);background:radial-gradient(circle at 82% 20%,rgba(107,216,230,.075),transparent 27%),linear-gradient(180deg,#07111f,#050b14 72%)}.principles-intro{max-width:780px}.principles-layout{display:grid;grid-template-columns:.78fr 1.22fr;gap:88px;margin-top:68px;align-items:start}.principle-step{min-height:70vh;padding:30px 0 44px;border-top:1px solid rgba(255,255,255,.09);display:grid;grid-template-columns:54px 1fr;align-content:start;opacity:.38;transition:opacity .35s ease}.principle-step:last-child{border-bottom:1px solid rgba(255,255,255,.09)}.principle-step.active{opacity:1}.step-no{font:10px ui-monospace,SFMono-Regular,Consolas,monospace;color:#7690ae;padding-top:7px;position:relative;transition:color .3s ease,transform .35s ease}.step-no::after{content:"";position:absolute;left:0;top:28px;width:24px;height:1px;background:currentColor;transform:scaleX(.32);transform-origin:left;opacity:.45;transition:transform .4s ease,opacity .4s ease}.principle-step.active .step-no{color:#dceaff;transform:translateX(3px)}.principle-step.active .step-no::after{transform:scaleX(1);opacity:1}.principle-step h3{margin:0;font-size:33px;letter-spacing:-.036em;font-weight:550}.principle-step p{margin:14px 0 0;color:#acbdd0;font-size:17px;line-height:1.78;max-width:495px}.principle-step:nth-child(1).active h3{color:#a7cdff}.principle-step:nth-child(2).active h3{color:#c2adff}.principle-step:nth-child(3).active h3{color:#8ce0bf}.principle-step:nth-child(4).active h3{color:#ff9b89}
.principle-sticky{position:sticky;top:116px;min-height:535px}.principle-card{--mx:50%;--my:50%;--glow:rgba(127,184,255,.17);min-height:470px;border:1px solid rgba(255,255,255,.09);border-radius:21px;background:linear-gradient(145deg,rgba(14,31,54,.84),rgba(6,14,25,.84));padding:34px;position:relative;overflow:hidden;box-shadow:0 30px 75px rgba(0,0,0,.20);transition:transform .76s var(--ease-card),border-color .66s var(--ease-soft),box-shadow .76s var(--ease-card)}.principle-card:hover{transform:translateY(-2px);border-color:rgba(140,188,255,.18);box-shadow:0 24px 58px rgba(0,0,0,.20)}.principle-card::before{content:"";position:absolute;width:390px;height:390px;border-radius:50%;right:-170px;top:-160px;background:radial-gradient(circle,var(--glow),transparent 68%);transition:background .42s ease}.principle-card::after{content:"";position:absolute;inset:-1px;pointer-events:none;background:radial-gradient(430px circle at var(--mx) var(--my),rgba(127,184,255,.09),rgba(169,140,255,.035) 25%,transparent 48%);opacity:0;transition:opacity .52s ease-out}.principle-card:hover::after{opacity:.95}.principle-card>*{position:relative;z-index:1}.principle-meta{font:11px ui-monospace,SFMono-Regular,Consolas,monospace;text-transform:uppercase;letter-spacing:.11em;color:#8ea4bf}.principle-title{font-size:clamp(38px,3.35vw,54px);letter-spacing:-.045em;line-height:1.02;margin:82px 0 18px;max-width:610px}.principle-copy{font-size:18px;line-height:1.8;color:#bdcad9;max-width:620px}.principle-points{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:34px}.principle-point{border-top:1px solid rgba(255,255,255,.09);padding:15px 0;font:12px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace;color:#94abc4}.principle-point strong{display:block;color:#e5eef9;font-weight:550;margin-bottom:4px}.principle-progress{position:absolute;left:34px;right:34px;bottom:24px;height:2px;background:rgba(255,255,255,.06)}.principle-progress i{display:block;height:100%;width:25%;background:linear-gradient(90deg,var(--blue),var(--violet),var(--green),var(--coral));transition:width .42s cubic-bezier(.16,1,.3,1)}.mobile-detail{display:none}