:root {
 --bg: #f5f1e8;
 --card: #fffaf0;
 --ink: #1f2b21;
 --muted: #66705f;
 --green: #2f6b3f;
 --lime: #b9d36a;
 --line: #d9d0bd;
}

* {
 box-sizing: border-box;
}

body {
 margin: 0;
 min-height: 100vh;
 display: flex;
 flex-direction: column;
 font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
 background: white; /*radial-gradient(circle at top left, #dce9c2, transparent 35%), var(--bg);*/
 background-repeat: no-repeat;
 color: var(--ink);
}

header {
 max-width: 1100px;
 margin: 0 auto;
 width: 100%;
 padding: 56px 24px 0px;
}

.top {
 display: flex;
 justify-content: space-between;
 align-items: flex-start;
 gap: 24px;
 width: 100%;
 border-bottom: 2px solid var(--line);
 padding-bottom: 28px;
}

.logo {
 display: flex;
 align-items: flex-start;
 gap: 18px;
 flex: 1;
 min-width: 0;
}

.computer { 
 margin-top:8px;
 width: 72px;
 height: 58px;
 border: 4px solid var(--ink);
 border-radius: 8px;
 background: #c8d9a1;
 box-shadow: 6px -6px 0 #2f6b3f33;
 position: relative;
}

.computer:before {
 content: ">_";
 position: absolute;
 left: 12px;
 top: 13px;
 font-family: monospace;
 font-size: 22px;
 font-weight: 800;
 color: var(--green);
}

.computer:after {
 content: "";
 position: absolute;
 width: 34px;
 height: 10px;
 left: 50%;
 transform: translateX(-50%);
 bottom: -17px;
 border: 4px solid var(--ink);
 border-top: 0;
}

h1 {
 margin: 0;
 font-size: clamp(2.3rem, 6vw, 5rem);
 line-height: .9;
 letter-spacing: -0.06em;
 font-size:2em;
 margin-top:2px;
}

.tagline {
 margin: 8px 2px 0; 
 color: var(--muted); 
}


main {
 max-width: 1100px;
 margin: 0 auto;
 padding: 16px 24px 60px;
 flex: 1;
 width: 100%;
}

.intro {
 margin: 8px 0;
 display: grid;
 grid-template-columns: minmax(0, 1fr) minmax(260px, 30%);
 gap: 18px;
 align-items: stretch;
}

.intro-right {
 display: grid;
 grid-template-rows: 2fr 1fr;
 gap: 18px;
}

.panel {
 background: var(--card);
 border: 2px solid var(--line);
 border-radius: 22px;
 padding: 2px 28px;
 box-shadow: 0 14px 40px #0000000d;
}

.intro-main {
 display: flex;
 justify-content: space-between;
 align-items: center;
 gap: 64px;
}
.panel p 
{line-height:1.4; margin: 0;
 padding-top:16px;
 padding-bottom:16px;
}

.intro-side {
 display: flex;
 align-items: center;
 justify-content: flex-start;
 gap: 0;
 padding-right:10px;
 min-height: 0;
}

.intro-side-bottom {
 min-height: 0;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 12px;
 padding-left:50px;
 padding-right:50px;
}

.intro-side-bottom a {
 display: flex;
}

.intro-side-bottom img {
 height: 28px;
 margin-top:6px;
 margin-bottom:6px;
 width: auto;
 display: block;
}

.intro-side > div:last-child {
 max-width: 100%;
 overflow-wrap: anywhere;
}

.panel-icons {
 display: grid;
 grid-template-columns: repeat(2, max-content);
 gap: 12px 20px;
}

.panel-icons img {
 height: 32px;
 width: auto;
 display: block;
}

.terminal {
 font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
 background: #172018;
 color: #d8f0b0;
 border-radius: 18px;
 padding: 22px;
 border: 3px solid #31472d;
 min-height: 100px;
}

#status {
 flex: 0 0 320px;
 width: 320px;
 max-width: 100%;
 padding-bottom:0;
}

.terminal p {
 margin: 0 0 10px;
}

.blink {
 animation: blink 1.4s steps(1) infinite;
}

@keyframes blink {
 50% {
  opacity: 0;
 }
}

.apps {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
 gap: 18px;
 margin-top: 22px; 
}

.app {
 background: var(--card);
 border: 2px solid var(--line);
 border-radius: 20px;
 padding: 22px;
 min-height: 210px;
 display: flex;
 flex-direction: column;
 justify-content: space-between;
 transition: transform .15s ease, box-shadow .15s ease;
}

.app:hover {
  
}

.label {
 display: inline-block;
 width: max-content;
 margin-bottom: 16px;
 padding: 5px 9px;
 border-radius: 999px;
 background: var(--lime);
 color: #263112;
 font-size: .78rem;
 font-weight: 800;
 text-transform: uppercase;
 letter-spacing: .04em;
}

h2 {
 margin: 0 0 10px;
 font-size: 1.55rem;
 letter-spacing: -0.03em;
}

.app p {
 margin: 0 0 22px; 
 line-height: 1.45;
}

.button {
 color: var(--green);
 text-decoration: none;
 font-weight: 900;
}

footer {
 max-width: 1100px;
 margin: 0 auto;
 width: 100%;
 text-align:center;
 padding: 0;
 color: var(--muted);
}

.intro-side img {
 width:50px;
 margin-left:8px;
}
 .intro-side div {
  font-size:1em;
 }

@media (max-width: 760px) {
 .top {
  display: block;
 }

 .intro {
  display: block;
 }

 .intro-right {
  display: block;
 }

 .panel {
  display: block;
 }

 .intro-side {
  margin-top: 16px;
 }

 .intro-side-bottom {
  margin-top: 16px;
 }

 .panel p {
  margin: 0;
 }

 .panel-icons {
  flex-direction: row;
  align-items: center;
  margin-top: 16px;
 }

 #status {
  margin-top: 18px;
  width: 100%;
 }

 .terminal {
  margin-top: 18px;
 }
}