*, *::before, *::after {
    box-sizing: border-box;
}
body {
    width: 100%; height: 100%;
    margin: 0; padding: 0;
    background: var(--b);
}
.path {
  stroke-dasharray: none;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 10;
  stroke: url(#g);
  fill: none;
}
/* Header and CTA - Universal centering using text-align */
header, .cta {
  text-align: center;
  background: var(--g1);
  padding: var(--p);
}
header, section, .cta{
    width: var(--c);
    margin-right: auto;
    margin-left: auto;
    margin-bottom: var(--p);
    margin-top: var(--p);
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);

}
header {
    margin-top: calc(var(--p) + var(--h));
}
h1 {
    background: var(--g2);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
h2 {
    margin-left: var(--p);
}
/* Cards layout - Viewport-constrained universal layout, responsive via media query */
.card {
    width: calc(var(--c) - 2 * var(--p));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
    padding: var(--p);
    background: rgba(255, 255, 255, 0.05);
    display: block;
    text-align: left;
    margin: var(--p);
}
/* Buttons - Universal inline-block centering */
.btn {
    width: 100%;
    min-height: 48px;
    padding: var(--p);
    border-radius: 1rem;
    background: var(--g3);
    color: white;
    font-size: var(--p);
    font-weight: 800;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(96, 199, 255, 0.2);
    transition: all 0.2s ease;
}
/* Footer - Universal text-align centering */
footer {
  width: 100%;
  margin: 0;
  padding: var(--p) 0;
  border-top: 1px solid rgba(255,255,255,0.10);
  background: linear-gradient(to top, rgba(255,255,255,6%), rgba(255,255,255,2%));
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
  text-align: center;
}
/* Social icons - Universal inline-block with font-size: 0 technique */
.social-icons {
  text-align: center;
  margin-bottom: var(--p);
}
.linkedin,
.instagram,
.x {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  display: inline-block;
  vertical-align: middle;
  width: 1.5rem;
  height: 1.5rem;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: all 0.2s ease;
}
.linkedin {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100' height='100' rx='10' fill='white'/%3E%3Cpath d='M90 89H72V63C72 56 72 50 63 50 54 50 54 56 54 63V89H36V35H54V43C56 39 61 35 69 35 86 35 90 46 90 60V89Z' fill='%23484845'/%3E%3Cpath d='M29 20C29 25 25 29 20 29 15 29 11 25 11 20 11 15 15 11 20 11 25 11 29 15 29 20Z' fill='%23484845'/%3E%3Cpath d='M11 35H29V89H11V35Z' fill='%23484845'/%3E%3C/svg%3E");
}
.instagram {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='4' y='4' width='92' height='92' rx='28' stroke='white' stroke-width='8'/%3E%3Ccircle cx='77' cy='23' r='6' fill='white'/%3E%3Ccircle cx='50' cy='50' r='20' stroke='white' stroke-width='8'/%3E%3C/svg%3E");
}
.x {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M28 4H10L72 96H90L28 4Z' stroke='white' stroke-width='8'/%3E%3Cpath d='M7 104 43 57M90-4 55 41' stroke='white' stroke-width='12'/%3E%3C/svg%3E");
}
.btn:hover,
.linkedin:hover,
.instagram:hover,
.x:hover {
  transform: scale(1.05);
}
@media (min-width: 640px) {
    .card {
        display: inline-block;
        vertical-align: top;
        width: calc(0.5 * var(--c) - 2.25 * var(--p));
    }
    .btn {
        width: 50%
    }
}