/* Isometric phone used in the landing page hero.
   Every part is positioned relative to .phone, a zero-size point at the phone's centre;
   the isometric projection itself is applied by the parent .iso layer. */

.phone { position: absolute; left: 0; top: 0; }

.phone-back {
  position: absolute; top: -3px; transform: translate(-50%, -50%);
  width: 430px; height: 734px;
  background-image: linear-gradient(to bottom, #3a3b3f 70%, #1d1d1f);
  border-radius: 74px 40px 84px 50px;
  box-shadow:
    -26px 8px 8px -10px rgba(0, 0, 0, .3),
    -6px 6px 6px 0 rgba(0, 0, 0, .6),
    -30px 14px 10px -10px rgba(0, 0, 0, .5),
    -20px 40px 8px 0 rgba(0, 0, 0, .1),
    -20px 30px 8px 0 rgba(0, 0, 0, .1),
    inset 20px 0 15px -6px rgba(0, 0, 0, .6),
    inset 2px 0 4px -2px rgba(0, 0, 0, .6),
    inset 2px 0 1px -2px rgba(255, 255, 255, .1),
    inset 0 -15px 10px -10px rgba(255, 255, 255, .15);
}
.phone-back::before, .phone-back::after {
  content: ''; position: absolute; bottom: 40px; width: 100px; height: 300px;
  background-color: #fff; border-radius: 20px;
}
.phone-back::before { left: 16px; filter: blur(5px); opacity: .1; transform: rotate(4deg); }
.phone-back::after { left: 26px; filter: blur(4px); opacity: .25; transform: rotate(2deg); }

.phone-screen {
  position: absolute; top: -16px; left: 14px; transform: translate(-50%, -50%);
  width: 400px; height: 710px; background-color: #000;
  border-radius: 48px 40px 52px 45px;
  box-shadow: -2px 0 0 -1px rgba(255, 255, 255, .4), -1px 3px 3px -3px rgba(255, 255, 255, .7);
}

.phone-display {
  position: absolute; z-index: 1; top: -23px; left: 20px; transform: translate(-50%, -50%);
  width: 378px; height: 690px; background-color: #fbfbfb;
  border-radius: 45px 37px 41px 41px;
}

.phone-notch {
  position: absolute; z-index: 3; top: -1px; left: 50%; transform: translate(-50%);
  width: 210px; height: 21px; background-color: #131313;
  border-top: 6px solid #000; border-radius: 0 0 20px 20px;
}
.phone-notch::before, .phone-notch::after {
  content: ''; position: absolute; top: -5px; width: 12px; height: 12px;
  background-color: transparent; border-radius: 50%;
}
.phone-notch::after { left: -12px; box-shadow: 5px -5px 0 -3px #000; }
.phone-notch::before { right: -12px; box-shadow: -4px -4px 0 -3px #000; }

.phone-speaker {
  position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  width: 58px; height: 6px; overflow: hidden;
  background-color: #2b2b2b; border-radius: 20px;
  box-shadow: 0 0 0 1px #363637, inset -3px 3px 1px 0 #000, inset -3px 4px 0 -1px rgba(255, 255, 255, .5);
}
.phone-speaker::before, .phone-speaker::after {
  content: ''; position: absolute; width: 4px; height: 4px; border-radius: 50%;
}
.phone-speaker::after { right: -1px; top: -1px; background-color: #87888c; }
.phone-speaker::before { right: -2px; top: 4px; background-color: #898a8e; }

/* Left edge: antennas and side buttons */
.phone-left-side { position: absolute; left: 0; top: 60px; width: 30px; height: 100%; }
.phone-left-side .phone-antena {
  position: absolute; left: -5px; top: 10px; width: 50px; height: 20px;
  border-radius: 50%; transform: rotate(-40deg) skewX(20deg);
  box-shadow: 0 -2px 1px -2px #000;
}
.phone-left-side .phone-antena.bottom { top: auto; bottom: 128px; }
.phone-left-side .phone-antena::after {
  content: ''; position: absolute; left: -5px; top: 3px; width: 50px; height: 20px;
  border-radius: 50%; transform: rotate(-2deg); box-shadow: 0 -2px 1px -2px #000;
}

.phone-button {
  position: absolute; top: 100px; left: 4px; width: 12px; height: 47px;
  background-color: #010101; border-radius: 30px; transform: skewY(-40deg);
  box-shadow: -32px -16px 10px 0 rgba(0, 0, 0, .4), -4px 0 4px 0 rgba(0, 0, 0, .4);
}
.phone-button.bottom { top: 160px; }
.phone-button::before {
  content: ''; position: absolute; width: 10px; height: 45px;
  background-image: linear-gradient(to bottom, #6a6b6f 85%, #0b0b0b); border-radius: 20px;
}
.phone-button::after {
  content: ''; position: absolute; left: -2px; top: -1px; width: 10px; height: 44px;
  background-color: #2d2d2f; border-radius: 20px;
  box-shadow: inset -1px -1px 0 -1px rgba(255, 255, 255, .6);
}
.phone-button.top {
  top: 48px; left: 2px; width: 14px; height: 29px;
  border-radius: 10px 10px 10px 3px; box-shadow: inset 2px 0 0 -1px rgba(255, 255, 255, .25);
}
.phone-button.top::after { width: 8px; height: 27px; left: 4px; top: 0; }
.phone-button.top::before { width: 8px; height: 28px; left: 6px; top: 0; box-shadow: 1px 0 0 0 rgba(0, 0, 0, .4); }

/* Bottom edge: speaker grilles, screws, charging port */
.phone-bottom { position: absolute; bottom: 0; width: 100%; }
.bottom-speaker { position: absolute; display: flex; left: calc(50% - 120px); bottom: 6px; transform: skewX(-50deg); }
.bottom-speaker.right { left: calc(50% + 45px); }
.bottom-speaker div {
  position: relative; overflow: hidden; width: 6px; height: 6px; margin: 0 3px;
  background-color: #212121; border-radius: 50%;
  box-shadow: inset -4px -3px 2px -2px #000, 1px -1px 0 -1px rgba(255, 255, 255, .5);
}
.bottom-speaker div::after {
  content: ''; position: absolute; bottom: -1px; left: 3px; width: 3px; height: 3px;
  background-color: #fff; border-radius: 50%; opacity: .4;
}
.phone-screw {
  position: absolute; bottom: 5px; left: calc(50% - 38px); width: 9px; height: 9px;
  background-image: linear-gradient(to right, #1a1a1c 30%, #a1a2a7 60%, #1a1a1c 80%);
  border-radius: 50%; transform: translateX(-50%) skewX(-50deg);
}
.phone-screw.right { left: calc(50% + 36px); }
.phone-screw div {
  position: relative; width: 6px; height: 6px; border-radius: 50%; background-color: #252527;
  box-shadow: 2px 2px 0 0 rgba(0, 0, 0, .9), inset -2px 1px 1px -1px #000;
}
.phone-screw div::after {
  content: ''; position: absolute; top: 1px; width: 4px; height: 4px;
  background-color: #151515; transform: rotate(45deg);
  box-shadow: inset -1px -1px 0 0 rgba(255, 255, 255, .6);
}
.phone-charger {
  position: absolute; left: 50%; bottom: 2px; width: 48px; height: 14px; overflow: hidden;
  background-image: linear-gradient(to right, #121214 5%, #434446 20%, #434446 60%, #7a7b80 75%, #1b1b1d 90%);
  transform: translateX(-50%) skewX(-50deg); border-radius: 15px 16px 24px 20px;
  box-shadow: 1px 1px 1px -1px rgba(255, 255, 255, .4), inset -2px -2px 0 -1px #0e0e0e, inset -3px -3px 0 -1px #252527, inset 3px 3px 0 -1px #050505;
}
.phone-charger::after {
  content: ''; display: block; width: 42px; height: 10px; background-color: #050505;
  border-radius: 20px 8px 16px 10px; box-shadow: 1px 1px 0 -1px rgba(255, 255, 255, .4);
}
.phone-bottom .phone-antena {
  position: absolute; bottom: 8px; left: 60px; width: 50px; height: 20px; opacity: .7;
  border-radius: 40%; transform: rotate(-45deg) skewX(20deg) scaleY(-1);
  box-shadow: 0 -2px 1px -2px #000;
}
.phone-bottom .phone-antena.right {
  left: auto; right: 70px;
  box-shadow: 0 -2px 1px -2px #000, 19px -2px 0 -2px rgba(255, 255, 255, .4);
}
.phone-bottom .phone-antena::after {
  content: ''; position: absolute; left: -3px; top: 3px; width: 50px; height: 20px;
  border-radius: 40%; transform: rotate(-2deg); box-shadow: 0 -2px 1px -2px #000;
}
.phone-bottom .phone-antena.right::after { box-shadow: 0 -2px 1px -2px #000, 19px -2px 0 -2px rgba(255, 255, 255, .4); }

/* Glass reflections over the display */
.phone-reflections {
  position: absolute; z-index: 4; top: -17px; left: 15px; transform: translate(-50%, -50%);
  width: 399px; height: 709px; overflow: hidden; pointer-events: none;
  border-radius: 48px 40px 52px 45px;
}
.reflection-1 {
  position: absolute; z-index: 10; left: -320px; top: -200px; width: 120%; height: 200%;
  background-color: #fff; opacity: .1; transform: rotate(32deg);
}
.reflection-2, .reflection-3 {
  position: absolute; z-index: 11; left: -94px; top: calc(50% + 14px); width: 100px; height: 100%;
  background-color: #000; border-radius: 100px; transform: translateY(-50%);
}
.reflection-3 { left: -8px; top: 70%; width: 10px; height: 60%; background: #6d6c71; opacity: .6; }
.reflection-4 { position: absolute; top: 0; width: 16px; height: 60%; background-color: #67686c; }
.reflection-4::before {
  content: ''; position: absolute; left: 16px; top: 4px; width: 100px; height: 100px;
  border-radius: 44px 40px 0 0; box-shadow: -20px 0 0 0 #67686c;
}
.reflection-4::after {
  content: ''; position: absolute; left: 0; top: -1px; width: 80px; height: 80px;
  border-radius: 60px 0 0 0; transform: rotate(15deg); box-shadow: -25px -3px 2px -8px #000;
}
.reflection-5 { position: absolute; bottom: 0; left: 4px; width: 12px; height: 50%; background-color: #000; border-radius: 50%; }
.reflection-6 {
  position: absolute; z-index: 12; bottom: -4px; left: -14px; width: 80px; height: 20px;
  background-color: #000; border-radius: 50%; transform: rotate(40deg);
}
.reflection-6::after {
  content: ''; position: absolute; right: -17px; top: -78px; width: 20px; height: 100px;
  background-color: #000; border-radius: 40%; transform: rotate(50deg);
}
.reflection-6::before {
  content: ''; position: absolute; top: -51px; left: 7px; width: 50px; height: 50px;
  border-radius: 40%; transform: rotate(-20deg); box-shadow: 4px 15px 1px -10px #000;
}
.reflection-7 {
  position: absolute; z-index: 13; bottom: -4px; left: 10px; width: 40px; height: 20px;
  background-color: #5c5d61; border-radius: 20px 0 6px 10px;
  transform: skewX(60deg) skewY(-10deg) scaleY(-1) scaleX(-1) scale(.8);
}
.reflection-7::after {
  content: ''; position: absolute; top: -3px; right: 6px; width: 30px; height: 20px;
  background-color: #5c5d61; border-radius: 50%;
  transform: rotate(40deg) skewX(-54deg) skewY(47deg);
}
.reflection-7::before {
  content: ''; position: absolute; left: 6px; bottom: -6px; width: 15px; height: 18px;
  background-color: #5c5d61; border-radius: 2px; transform: rotate(253deg) skewX(10deg);
}

/* Screen contents: the app GitDroid built */
.display-content {
  position: absolute; inset: 0; overflow: hidden;
  border-radius: 45px 37px 41px 41px;
  background: #f6f7f3; color: #1d1d1f;
  font-family: var(--sans);
}
.app-status { position: absolute; z-index: 2; inset: 0 0 auto; height: 34px; color: #fff; }
.app-status .time { position: absolute; left: 36px; top: 9px; font-size: 13px; font-weight: 600; letter-spacing: -.01em; }
.app-status .icons { position: absolute; right: 26px; top: 12px; display: flex; align-items: flex-end; gap: 6px; }
.app-status .signal { display: flex; align-items: flex-end; gap: 2px; height: 10px; }
.app-status .signal i { width: 3px; background: #fff; border-radius: 1px; }
.app-status .signal i:nth-child(1) { height: 4px; }
.app-status .signal i:nth-child(2) { height: 6px; }
.app-status .signal i:nth-child(3) { height: 8px; }
.app-status .signal i:nth-child(4) { height: 10px; }
.app-status .battery { position: relative; width: 20px; height: 10px; border: 1.5px solid rgba(255, 255, 255, .9); border-radius: 3px; }
.app-status .battery::before { content: ''; position: absolute; inset: 1.5px; right: 4px; background: #fff; border-radius: 1px; }
.app-status .battery::after { content: ''; position: absolute; right: -4px; top: 2px; width: 2px; height: 4px; background: rgba(255, 255, 255, .9); border-radius: 0 1px 1px 0; }

.app-hero { position: relative; height: 288px; }
.app-hero svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.app-hero::after { content: ''; position: absolute; inset: 40% 0 0; background: linear-gradient(to top, rgba(10, 30, 16, .65), transparent); }
.app-hero-text { position: absolute; z-index: 1; left: 24px; right: 24px; bottom: 22px; color: #fff; }
.app-hero-text small { display: block; font-size: 13px; font-weight: 500; opacity: .85; }
.app-hero-text strong { display: block; margin-top: 2px; font-size: 32px; font-weight: 700; letter-spacing: -.03em; line-height: 1.05; }

.app-section { padding: 20px 18px 0; }
.app-section-head { display: flex; align-items: baseline; justify-content: space-between; padding: 0 4px 12px; }
.app-section-head b { font-size: 19px; letter-spacing: -.02em; }
.app-section-head span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #4b7d1f; font-weight: 500; }
.app-section-head span::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #5ea82a; }
.trail { display: flex; align-items: center; gap: 12px; padding: 12px; margin-bottom: 10px; background: #fff; border-radius: 16px; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }
.trail-new { box-shadow: 0 0 0 2px #b6e36b, 0 6px 16px -6px rgba(90, 150, 40, .35); }
.trail-icon { flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px; }
.trail-icon.a { background: linear-gradient(135deg, #a9e05a, #4c9a2a); }
.trail-icon.b { background: linear-gradient(135deg, #8fd3f4, #3f8ccf); }
.trail-icon.c { background: linear-gradient(135deg, #e5d3b3, #a3825a); }
.trail-text { flex: 1; min-width: 0; }
.trail-text b { display: block; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.trail-text small { display: block; margin-top: 1px; font-size: 12.5px; color: #86868b; }
.trail-pill { font-size: 11.5px; font-weight: 600; padding: 4px 9px; border-radius: 999px; }
.trail-pill.open { background: #e8f6d6; color: #3c6e15; }
.trail-pill.closed { background: #f1f1f3; color: #86868b; }
.app-tabs { position: absolute; inset: auto 0 0; display: flex; justify-content: space-around; padding: 12px 30px 30px; background: rgba(255, 255, 255, .92); border-top: 1px solid #e6e6e8; }
.app-tabs i { width: 24px; height: 24px; border-radius: 7px; background: #d9d9de; }
.app-tabs i.on { background: #1d1d1f; }
.app-home { position: absolute; left: 50%; bottom: 10px; width: 120px; height: 4px; transform: translateX(-50%); background: rgba(0, 0, 0, .25); border-radius: 4px; }