/* =========================================================
   SEEDER ENCRYPTED TEXT RESPONSIVE VISUAL
   ========================================================= */

.encrypted-storage-visual{
  --et-border:rgba(37,143,255,.38);
  --et-border-soft:rgba(37,143,255,.20);
  --et-text:#f4f9ff;
  --et-muted:#96b6d5;
  --et-blue:#20b8ff;
  --et-blue-2:#2586ff;
  --et-bg:#020d1c;

  width:100%;
  margin:0 auto 42px;

  padding:34px;

  color:var(--et-text);

  border:1px solid rgba(37,143,255,.14);
  border-radius:28px;

  background:
    radial-gradient(
      circle at 55% 36%,
      rgba(15,104,218,.12),
      transparent 35%
    ),
    linear-gradient(
      145deg,
      #020a15,
      #031326 58%,
      #020914
    );

  overflow:hidden;
}


/* -------------------------
   Heading
   ------------------------- */

.encrypted-storage-title{
  margin:0;

  text-align:center;

  font-size:clamp(30px,3.4vw,54px);
  line-height:1.08;
  font-weight:800;
}

.encrypted-storage-title strong{
  color:#20b8ff;
}

.encrypted-storage-subtitle{
  max-width:1050px;

  margin:14px auto 34px;

  color:#9ec4e8;

  text-align:center;

  font-size:clamp(16px,1.6vw,22px);
  line-height:1.5;
}


/* -------------------------
   Main desktop layout
   ------------------------- */

.encrypted-storage-main{
  display:grid;

  grid-template-columns:
    minmax(250px,.82fr)
    minmax(245px,.72fr)
    minmax(400px,1.45fr);

  gap:28px;

  align-items:center;
}


/* -------------------------
   Generic panel
   ------------------------- */

.et-panel{
  border:1px solid var(--et-border-soft);
  border-radius:22px;

  background:
    linear-gradient(
      145deg,
      rgba(5,31,62,.88),
      rgba(2,15,31,.94)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025);
}


/* -------------------------
   Example list
   ------------------------- */

.et-examples{
  padding:20px;
}

.et-examples h3{
  margin:0 0 14px;

  font-size:18px;
}

.et-example{
  display:grid;
  grid-template-columns:52px 1fr;
  gap:13px;
  align-items:center;

  padding:12px 10px;

  border-top:1px solid rgba(58,153,255,.10);
}

.et-example:first-of-type{
  border-top:0;
}

.et-icon{
  display:flex;
  align-items:center;
  justify-content:center;

  width:48px;
  height:48px;

  border-radius:50%;

  color:#bdefff;

  background:
    radial-gradient(
      circle at 35% 30%,
      #168aff,
      #063b97 68%,
      #031d52
    );

  box-shadow:
    0 0 18px rgba(24,137,255,.34),
    inset 0 1px 0 rgba(255,255,255,.18);
}

.et-icon img{
  width:30px;
  height:30px;
}

.et-example strong{
  display:block;

  margin-bottom:2px;

  font-size:16px;
}

.et-example span{
  display:block;

  color:var(--et-muted);

  font-size:13px;
  line-height:1.4;
}


/* -------------------------
   Phone
   ------------------------- */

.et-phone-wrap{
  display:flex;
  justify-content:center;
}

.et-phone{
  width:min(100%,300px);

  padding:9px;

  border:2px solid #6e7782;
  border-radius:36px;

  background:#090d12;

  box-shadow:
    0 22px 42px rgba(0,0,0,.48),
    inset 0 0 0 2px rgba(255,255,255,.08);
}

.et-phone-screen{
  min-height:520px;

  padding:24px 16px;

  border-radius:27px;

  background:
    linear-gradient(
      160deg,
      #06162a,
      #031127 62%,
      #020b18
    );
}

.et-phone-brand{
  display:flex;
  align-items:center;
  justify-content:space-between;

  margin-bottom:30px;

  font-size:17px;
  font-weight:800;
  letter-spacing:.12em;
}

.et-phone-logo{
  color:#2abaff;
}

.et-phone-settings{
  margin-bottom:15px;

  font-size:20px;
  font-weight:700;
}

.et-setting{
  display:flex;
  align-items:center;
  justify-content:space-between;

  min-height:48px;

  margin-bottom:8px;
  padding:9px 12px;

  border:1px solid rgba(43,163,255,.30);
  border-radius:13px;

  background:
    linear-gradient(
      135deg,
      rgba(5,48,91,.86),
      rgba(4,24,49,.94)
    );
}

.et-setting-active{
  align-items:flex-start;

  min-height:84px;

  border-color:rgba(34,170,255,.70);

  background:
    linear-gradient(
      135deg,
      rgba(5,76,143,.91),
      rgba(3,32,68,.96)
    );
}

.et-setting small{
  display:block;

  margin-top:5px;

  color:#9dbbda;

  line-height:1.4;
}

.et-switch{
  position:relative;

  flex:0 0 auto;

  width:42px;
  height:23px;

  margin-left:10px;

  border-radius:999px;

  background:#127ee6;

  box-shadow:0 0 13px rgba(35,163,255,.42);
}

.et-switch::after{
  content:"";

  position:absolute;

  top:4px;
  right:4px;

  width:15px;
  height:15px;

  border-radius:50%;

  background:#fff;

  box-shadow:0 0 8px #fff;
}


/* -------------------------
   Right side
   ------------------------- */

.et-right{
  min-width:0;
}

.et-flow-title{
  margin-bottom:20px;

  text-align:right;

  font-size:20px;
  line-height:1.3;
}

.et-encryption-flow{
  display:grid;

  grid-template-columns:
    150px
    minmax(60px,1fr)
    185px;

  align-items:center;

  margin-bottom:26px;
}

.et-encrypted-doc{
  text-align:center;

  color:#29baff;
}

.et-encrypted-doc img{
  width:105px;

  filter:
    drop-shadow(0 0 14px rgba(24,174,255,.48));
}

.et-encrypted-doc span{
  display:block;

  margin-top:7px;

  color:#edf7ff;

  font-size:14px;
}

.et-flow-line{
  position:relative;

  height:2px;

  background:
    linear-gradient(
      90deg,
      #178cff,
      #5be1ff
    );

  box-shadow:0 0 10px #159dff;
}

.et-flow-line::after{
  content:"";

  position:absolute;

  top:50%;
  right:-2px;

  width:11px;
  height:11px;

  border-top:3px solid #8feaff;
  border-right:3px solid #8feaff;

  transform:
    translateY(-50%)
    rotate(45deg);
}


/* -------------------------
   Blockchain illustration
   ------------------------- */

.et-blockchain{
  display:flex;
  align-items:center;
  justify-content:center;

  perspective:600px;
}

.et-block{
  width:58px;
  height:100px;

  margin-left:-8px;

  border:1px solid #29baff;
  border-radius:5px;

  background:
    repeating-linear-gradient(
      90deg,
      rgba(32,180,255,.16) 0,
      rgba(32,180,255,.16) 2px,
      transparent 2px,
      transparent 7px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(32,180,255,.10) 0,
      rgba(32,180,255,.10) 2px,
      transparent 2px,
      transparent 7px
    ),
    rgba(0,92,182,.18);

  box-shadow:
    inset 0 0 20px rgba(20,160,255,.25),
    0 0 16px rgba(20,165,255,.25);

  transform:rotateY(-14deg);
}

.et-block:nth-child(2){
  opacity:.82;
}

.et-block:nth-child(3){
  opacity:.64;
}

.et-block:nth-child(4){
  opacity:.42;
}


/* -------------------------
   Pricing
   ------------------------- */

.et-pricing{
  display:grid;

  grid-template-columns:1fr auto;

  gap:25px;

  padding:22px 24px;
}

.et-pricing h3{
  margin:0 0 8px;

  font-size:20px;
}

.et-pricing p{
  max-width:500px;

  margin:0;

  color:var(--et-muted);

  font-size:14px;
  line-height:1.55;
}

.et-price-rule{
  min-width:210px;

  padding-left:24px;

  border-left:1px solid rgba(67,178,255,.42);

  text-align:center;
}

.et-price-rule strong{
  display:block;

  margin-bottom:3px;

  font-size:20px;
}

.et-price-rule span{
  color:#a4c2de;

  font-size:13px;
}

.et-price-example{
  margin-top:12px;
  padding:10px 12px;

  border:1px solid rgba(30,155,255,.40);
  border-radius:10px;

  background:rgba(2,27,58,.65);

  color:#b8d2e8;

  font-size:13px;
}

.et-price-example b{
  margin-left:6px;

  color:#22c0ff;

  font-size:17px;
}


/* -------------------------
   Benefits
   ------------------------- */

.et-benefits{
  display:grid;

  grid-template-columns:repeat(5,1fr);

  gap:14px;

  margin-top:24px;
}

.et-benefit{
  min-width:0;

  padding:18px 15px 20px;

  text-align:center;
}

.et-benefit-icon{
  display:flex;
  align-items:center;
  justify-content:center;

  height:62px;

  color:#21c0ff;
}

.et-benefit-icon img{
  width:50px;
  height:50px;

  filter:
    drop-shadow(0 0 10px rgba(20,173,255,.42));
}

.et-benefit h3{
  margin:7px 0 8px;

  font-size:20px;
}

.et-benefit p{
  margin:0;

  color:var(--et-muted);

  font-size:13px;
  line-height:1.5;
}


/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:1100px){

  .encrypted-storage-main{
    grid-template-columns:
      minmax(220px,.8fr)
      minmax(220px,.8fr)
      1.2fr;

    gap:18px;
  }

  .et-encryption-flow{
    grid-template-columns:
      115px
      minmax(30px,1fr)
      150px;
  }

  .et-pricing{
    grid-template-columns:1fr;
  }

  .et-price-rule{
    padding-top:17px;
    padding-left:0;

    border-top:1px solid rgba(67,178,255,.30);
    border-left:0;
  }

  .et-benefits{
    grid-template-columns:
      repeat(3,1fr);
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:760px){

  .encrypted-storage-visual{
    padding:22px 14px;

    border-radius:20px;
  }

  .encrypted-storage-title{
    text-align:left;
  }

  .encrypted-storage-subtitle{
    margin-bottom:26px;

    text-align:left;
  }

  .encrypted-storage-main{
    display:flex;
    flex-direction:column;

    gap:20px;
  }

  .et-phone-wrap{
    order:1;

    width:100%;
  }

  .et-examples{
    order:2;

    width:100%;
  }

  .et-right{
    order:3;

    width:100%;
  }

  .et-phone{
    width:min(100%,280px);
  }

  .et-phone-screen{
    min-height:485px;
  }

  .et-flow-title{
    text-align:center;
  }

  .et-encryption-flow{
    grid-template-columns:1fr;

    gap:15px;
  }

  .et-flow-line{
    width:2px;
    height:46px;

    margin:auto;

    background:
      linear-gradient(
        180deg,
        #178cff,
        #5be1ff
      );
  }

  .et-flow-line::after{
    top:auto;
    right:50%;
    bottom:0;

    transform:
      translateX(50%)
      rotate(135deg);
  }

  .et-blockchain{
    margin-top:4px;
  }

  .et-pricing{
    gap:16px;

    margin-top:22px;
    padding:19px;
  }

  .et-benefits{
    grid-template-columns:
      repeat(2,1fr);
  }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media(max-width:480px){

  .et-benefits{
    grid-template-columns:1fr;
  }

  .et-example{
    grid-template-columns:44px 1fr;
  }

  .et-icon{
    width:42px;
    height:42px;
  }

  .et-icon img{
    width:25px;
    height:25px;
  }

}