/* ================================================================
   STUDI V4 — LIGHT PREMIUM LOGIN + SMOOTH KINETIC HERO
   ================================================================ */

/* ---------- HOME: replace the old "ball" with smooth ribbons ---------- */
#p-index .hero-orb,#p-index .hero-ring,#p-index .hero-pill{display:none!important}
#p-index .studi-motion-field{
  position:absolute;
  inset:0;
  z-index:1;
  overflow:hidden;
  pointer-events:none;
}
#p-index .motion-ribbon{
  position:absolute;
  height:clamp(52px,5vw,78px);
  border-radius:999px;
  filter:blur(.1px);
  transform-origin:center;
  will-change:transform;
}
#p-index .ribbon-a{
  width:clamp(420px,48vw,780px);
  right:-12%;
  top:18%;
  background:linear-gradient(90deg,rgba(185,236,107,0),rgba(185,236,107,.58),rgba(185,236,107,.10));
  transform:rotate(-18deg);
  animation:v4RibbonA 16s cubic-bezier(.45,.05,.3,1) infinite alternate;
}
#p-index .ribbon-b{
  width:clamp(360px,42vw,690px);
  right:-4%;
  top:45%;
  background:linear-gradient(90deg,rgba(163,143,228,0),rgba(163,143,228,.28),rgba(238,185,142,.18),transparent);
  transform:rotate(19deg);
  animation:v4RibbonB 21s cubic-bezier(.45,.05,.3,1) infinite alternate;
}
#p-index .ribbon-c{
  width:clamp(280px,30vw,520px);
  right:14%;
  bottom:8%;
  height:clamp(26px,2.5vw,42px);
  background:linear-gradient(90deg,transparent,rgba(235,244,225,.28),rgba(185,236,107,.20),transparent);
  transform:rotate(-7deg);
  animation:v4RibbonC 18s ease-in-out infinite alternate;
}
#p-index .motion-glow{
  position:absolute;
  width:46%;
  aspect-ratio:1.5/1;
  right:-4%;
  top:6%;
  border-radius:50%;
  background:
    radial-gradient(circle at 45% 48%,rgba(185,236,107,.18),transparent 42%),
    radial-gradient(circle at 65% 55%,rgba(168,147,228,.12),transparent 52%);
  filter:blur(24px);
  animation:v4Glow 13s ease-in-out infinite alternate;
}
#p-index .motion-logo{
  position:absolute;
  right:7%;
  top:15%;
  display:flex;
  align-items:center;
  gap:12px;
  opacity:.14;
  transform:rotate(-5deg);
  animation:v4LogoDrift 18s ease-in-out infinite alternate;
}
#p-index .motion-logo .brand-symbol{
  width:58px!important;height:58px!important;border-radius:18px 18px 7px 18px!important;
  background:#c7f37d!important;
}
#p-index .motion-logo span{
  font:800 clamp(36px,4vw,64px)/1 Manrope,sans-serif;
  letter-spacing:-3px;
  color:#eef5e8;
}
#p-index .motion-grid{
  position:absolute;
  inset:0;
  opacity:.09;
  background-image:
    linear-gradient(rgba(240,248,236,.35) 1px,transparent 1px),
    linear-gradient(90deg,rgba(240,248,236,.35) 1px,transparent 1px);
  background-size:58px 58px;
  mask-image:linear-gradient(90deg,transparent 32%,#000 68%,transparent);
}
@keyframes v4RibbonA{
  from{transform:translate3d(2%,0,0) rotate(-18deg) scaleX(.96)}
  to{transform:translate3d(-8%,10%,0) rotate(-13deg) scaleX(1.05)}
}
@keyframes v4RibbonB{
  from{transform:translate3d(8%,-3%,0) rotate(19deg)}
  to{transform:translate3d(-7%,9%,0) rotate(13deg)}
}
@keyframes v4RibbonC{
  from{transform:translate3d(0,2%,0) rotate(-7deg)}
  to{transform:translate3d(-8%,-8%,0) rotate(-2deg)}
}
@keyframes v4Glow{
  from{transform:translate3d(0,0,0) scale(.96)}
  to{transform:translate3d(-7%,9%,0) scale(1.08)}
}
@keyframes v4LogoDrift{
  from{transform:translate3d(0,0,0) rotate(-5deg)}
  to{transform:translate3d(-12px,10px,0) rotate(-2deg)}
}

/* ---------- LOGIN: brighter, more open, premium ---------- */
.gate{
  background:
    radial-gradient(circle at 80% 5%,rgba(185,236,107,.24),transparent 24%),
    radial-gradient(circle at 4% 94%,rgba(177,161,231,.20),transparent 29%),
    linear-gradient(135deg,#eef3e9 0%,#f7f5ef 47%,#edf0e8 100%)!important;
  color:#1b3026!important;
}
.gate-scroll{
  padding:20px 24px 30px!important;
}
.gate-top{
  max-width:1320px!important;
  margin:0 auto 16px!important;
  padding:7px 4px!important;
}
.gate-top .brand{
  color:#20372b!important;
  font-size:25px!important;
  letter-spacing:-1.3px!important;
}
.gate-top .brand-symbol{
  width:30px!important;height:30px!important;
  background:#a8dc62!important;
  box-shadow:0 10px 30px rgba(103,146,69,.14)!important;
}
.gate-grid-premium{
  max-width:1320px!important;
  grid-template-columns:minmax(0,1.16fr) minmax(370px,.62fr)!important;
  gap:18px!important;
  min-height:min(760px,calc(100vh - 105px));
  align-items:stretch!important;
}
.gate-showcase{
  position:relative;
  border-radius:34px;
  overflow:hidden;
  isolation:isolate;
  background:
    linear-gradient(120deg,rgba(255,255,255,.80),rgba(238,244,229,.76)),
    #eff3e9;
  border:1px solid rgba(43,70,53,.09);
  box-shadow:0 34px 95px rgba(33,55,42,.10);
  min-height:610px;
}
.gate-showcase:before{
  content:'';
  position:absolute;
  inset:0;
  z-index:-2;
  background:
    linear-gradient(rgba(37,62,47,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(37,62,47,.035) 1px,transparent 1px);
  background-size:62px 62px;
  mask-image:linear-gradient(135deg,#000,transparent 75%);
}
.gate-showcase:after{
  content:'';
  position:absolute;
  width:72%;
  height:58%;
  right:-19%;
  bottom:-17%;
  border-radius:50%;
  z-index:-1;
  background:radial-gradient(circle,rgba(185,236,107,.23),rgba(169,149,226,.10) 42%,transparent 69%);
  filter:blur(16px);
  animation:v4LoginGlow 12s ease-in-out infinite alternate;
}
@keyframes v4LoginGlow{
  from{transform:translate3d(0,0,0) scale(.96)}
  to{transform:translate3d(-7%,-5%,0) scale(1.06)}
}
.gate-showcase-inner{
  position:relative;
  z-index:2;
  min-height:100%;
  box-sizing:border-box;
  padding:clamp(34px,4.6vw,70px);
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.gate-product-mark{
  display:flex;
  align-items:center;
  gap:11px;
  margin-bottom:42px;
  color:#1c3327;
  font:800 31px/1 Manrope,sans-serif;
  letter-spacing:-1.8px;
}
.gate-mark-symbol{
  width:42px;height:42px;
  display:grid;place-items:center;
  border-radius:14px;
  background:#21392c;
  box-shadow:0 15px 38px rgba(24,51,36,.14);
}
.gate-mark-symbol .brand-symbol{
  width:22px!important;height:22px!important;
  background:#b9ec6b!important;
  box-shadow:none!important;
}
.gate-showcase .eyebrow{color:#668252!important}
.gate-showcase h1{
  color:#1b3026!important;
  font-size:clamp(48px,5.3vw,82px)!important;
  letter-spacing:-.055em!important;
  line-height:.96!important;
  max-width:780px;
  margin-bottom:20px!important;
}
.gate-showcase h1 em{
  color:#739f4c!important;
  font-style:normal!important;
}
.gate-showcase .lead{
  color:#667a6e!important;
  max-width:730px!important;
  font-size:clamp(14px,1.05vw,17px)!important;
  line-height:1.65!important;
}
.gate-value-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:30px;
  max-width:850px;
}
.gate-value-grid article{
  display:grid;
  grid-template-columns:34px 1fr;
  gap:10px;
  align-items:start;
  padding:13px;
  border-radius:16px;
  background:rgba(255,255,255,.56);
  border:1px solid rgba(37,67,49,.07);
  backdrop-filter:blur(16px);
  transition:transform .3s cubic-bezier(.16,1,.3,1),background .3s ease;
}
.gate-value-grid article:hover{transform:translateY(-3px);background:rgba(255,255,255,.78)}
.gate-value-icon{
  width:34px;height:34px;border-radius:11px;
  display:grid;place-items:center;
  background:#e8f1d7;color:#4e7353;font-weight:900;
}
.gate-value-grid b{display:block;font-size:10.5px;color:#294437}
.gate-value-grid small{display:block;font-size:8.5px;color:#7b8c82;line-height:1.48;margin-top:3px}
.gate-preview-row{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
  margin-top:auto;
  padding-top:28px;
}
.gate-preview-card{
  position:relative;
  overflow:hidden;
  padding:14px 15px;
  border-radius:16px;
  background:#1d3629;
  color:#f0f6ec;
  min-height:72px;
  box-shadow:0 15px 38px rgba(29,54,41,.09);
}
.gate-preview-card:after{
  content:'';
  position:absolute;right:-20px;bottom:-32px;width:74px;height:74px;border-radius:50%;
  background:rgba(185,236,107,.12);
}
.gate-preview-card span{display:block;font-size:7px;letter-spacing:1.6px;color:#b9ec6b;font-weight:900}
.gate-preview-card b{display:block;font:800 19px/1.05 Manrope,sans-serif;margin-top:9px;letter-spacing:-.8px}
.gate-preview-card small{display:block;font-size:8px;color:#aebdb1;margin-top:5px}

/* Login card */
.gate-card-premium{
  align-self:stretch;
  padding:clamp(28px,3vw,44px)!important;
  border-radius:34px!important;
  background:rgba(255,255,252,.91)!important;
  border:1px solid rgba(45,72,55,.09)!important;
  box-shadow:0 34px 95px rgba(31,52,40,.105)!important;
  backdrop-filter:blur(22px);
}
.gate-card-premium:after{display:none!important}
.gate-card-head .eyebrow{color:#789364!important}
.gate-card-premium h2{
  color:#1b3026!important;
  font-size:clamp(30px,2.5vw,40px)!important;
  letter-spacing:-1.8px!important;
  margin:7px 0 9px!important;
}
.gate-card-premium .gate-p{
  font-size:11px!important;
  line-height:1.65!important;
  color:#718279!important;
  margin-bottom:18px!important;
}
.gate-trust-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
  margin:2px 0 18px;
}
.gate-trust-row span{
  padding:8px 9px;
  border-radius:11px;
  background:#f2f5ee;
  border:1px solid rgba(50,79,60,.06);
  color:#668074;
  font-size:8px;
  line-height:1.3;
}
.gate-google{
  min-height:52px;
  display:grid!important;
  grid-template-columns:30px 1fr auto;
  align-items:center;
  gap:9px;
  width:100%;
  background:#1c3327!important;
  color:#f3f7ef!important;
  border-radius:14px!important;
  box-shadow:0 16px 36px rgba(22,48,34,.13)!important;
}
.gate-google:hover{
  background:#254432!important;
  transform:translateY(-2px)!important;
  box-shadow:0 21px 44px rgba(22,48,34,.17)!important;
}
.gate-google .g-dot{
  width:29px;height:29px;border-radius:9px;
  background:#b9ec6b!important;
  color:#1a3024!important;
}
.gate-arrow{font-size:16px;color:#b9ec6b}
.gate-or{margin:18px 0 13px!important}
.gate-demo{
  width:100%;
  min-height:48px;
  display:flex!important;
  align-items:center;
  justify-content:space-between!important;
  gap:14px;
}
.gate-demo span{font-weight:800}
.gate-demo small{font-size:8px;color:#87968e}
.gate-account-note{
  display:grid;
  grid-template-columns:8px 1fr;
  gap:10px;
  margin-top:18px;
  padding:12px 13px;
  border-radius:14px;
  background:#f3f6ef;
  border:1px solid rgba(49,78,60,.07);
}
.gate-note-dot{
  width:7px;height:7px;border-radius:50%;background:#8fb461;margin-top:5px;
  box-shadow:0 0 0 5px rgba(143,180,97,.10);
}
.gate-account-note p{margin:0;font-size:8.5px;line-height:1.55;color:#75867d}
.gate-legal{
  display:flex;align-items:center;justify-content:center;gap:7px;
  margin-top:16px;font-size:8.5px;
}
.gate-legal i{font-style:normal;color:#bac4bc}
.gate-legal a{color:#657a6d}

/* Login ambience */
.gate-aurora{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.gate-aurora i{
  position:absolute;
  height:52px;
  border-radius:999px;
  opacity:.30;
  filter:blur(1px);
}
.gate-aurora i:nth-child(1){
  width:62%;right:-14%;top:15%;
  background:linear-gradient(90deg,transparent,#b9ec6b,transparent);
  transform:rotate(-17deg);
  animation:v4GateRibbonOne 17s ease-in-out infinite alternate;
}
.gate-aurora i:nth-child(2){
  width:54%;right:-7%;top:42%;
  background:linear-gradient(90deg,transparent,#afa0e3,#edbb93,transparent);
  transform:rotate(14deg);
  animation:v4GateRibbonTwo 22s ease-in-out infinite alternate;
}
.gate-aurora i:nth-child(3){
  width:45%;left:-16%;bottom:10%;
  background:linear-gradient(90deg,transparent,#b9ec6b,transparent);
  transform:rotate(8deg);
  animation:v4GateRibbonThree 20s ease-in-out infinite alternate;
}
@keyframes v4GateRibbonOne{
  from{transform:translateX(6%) rotate(-17deg)}
  to{transform:translateX(-12%) translateY(16px) rotate(-12deg)}
}
@keyframes v4GateRibbonTwo{
  from{transform:translateX(8%) rotate(14deg)}
  to{transform:translateX(-12%) translateY(-12px) rotate(9deg)}
}
@keyframes v4GateRibbonThree{
  from{transform:translateX(-4%) rotate(8deg)}
  to{transform:translateX(14%) translateY(-8px) rotate(4deg)}
}

/* Hide old login/home orb geometry completely. */
.gate .hero-orb,.gate .hero-ring,.gate .hero-pill{display:none!important}

/* Gate entrance: staggered but soft. */
.gate.open .gate-product-mark{animation:v4LoginEnter .55s cubic-bezier(.16,1,.3,1) .03s both}
.gate.open .gate-showcase .eyebrow{animation:v4LoginEnter .55s cubic-bezier(.16,1,.3,1) .09s both}
.gate.open .gate-showcase h1{animation:v4LoginHeadline .78s cubic-bezier(.16,1,.3,1) .13s both}
.gate.open .gate-showcase .lead{animation:v4LoginEnter .65s cubic-bezier(.16,1,.3,1) .22s both}
.gate.open .gate-value-grid{animation:v4LoginEnter .68s cubic-bezier(.16,1,.3,1) .30s both}
.gate.open .gate-preview-row{animation:v4LoginEnter .68s cubic-bezier(.16,1,.3,1) .36s both}
.gate.open .gate-card-premium{animation:v4LoginCard .72s cubic-bezier(.16,1,.3,1) .12s both}
@keyframes v4LoginEnter{
  from{opacity:0;transform:translateY(13px)}
  to{opacity:1;transform:none}
}
@keyframes v4LoginHeadline{
  from{opacity:0;clip-path:inset(0 0 100% 0);transform:translateY(16px)}
  to{opacity:1;clip-path:inset(0 0 0 0);transform:none}
}
@keyframes v4LoginCard{
  from{opacity:0;transform:translateX(12px) scale(.993)}
  to{opacity:1;transform:none}
}

@media(max-width:1000px){
  .gate-grid-premium{grid-template-columns:1fr!important}
  .gate-showcase{min-height:560px}
  .gate-card-premium{order:-1}
}
@media(max-width:720px){
  .gate-scroll{padding:12px!important}
  .gate-showcase{min-height:500px;border-radius:26px}
  .gate-showcase-inner{padding:30px 24px}
  .gate-product-mark{margin-bottom:28px}
  .gate-showcase h1{font-size:clamp(43px,13vw,64px)!important}
  .gate-value-grid{grid-template-columns:1fr}
  .gate-preview-row{grid-template-columns:1fr 1fr}
  .gate-preview-card:last-child{display:none}
  .gate-card-premium{border-radius:26px!important}
}
@media(prefers-reduced-motion:reduce){
  #p-index .motion-ribbon,#p-index .motion-glow,#p-index .motion-logo,
  .gate-aurora i,.gate-showcase:after{animation:none!important}
  .gate.open .gate-product-mark,.gate.open .gate-showcase .eyebrow,
  .gate.open .gate-showcase h1,.gate.open .gate-showcase .lead,
  .gate.open .gate-value-grid,.gate.open .gate-preview-row,
  .gate.open .gate-card-premium{animation:none!important}
}