/* ─────────────────────────────────────────────────────────
   GLOBAL VARIABLES & RESET
───────────────────────────────────────────────────────── */
@import "tailwindcss";

:root {
  /* Palette */
  --white:            #FFFFFF;
  --dark-cream:       #E6C9C9;
  --middle-tone:      #F5DEDE;
  --light-cream:      #FDEFEF;
  --transparent-tone: #D9D9D9;

  /* Functional */
  --background-color: var(--dark-cream);
  --pattern-color:    var(--light-cream);
  --inner-color:      var(--middle-tone);
  --window-color:     var(--white);
  --text-color:       #8C7D7D;
  --border-color:     #FFD0D0;
  --grid-color:       rgba(255,255,255,0.3);
  --shadow-color:     rgba(0,0,0,0.2);

  /* Unified shadow (4px offset & blur) */
  --shadow: 0 4px 4px var(--shadow-color);

  /* Your Figma artboard size */
  --design-w: 2225px;
  --design-h: 1252px;
  
  /* Pattern defaults */
  --circle-size:      85px;
  --plus-size:        85px;
  --plus-rot:         0deg;
  --triangle-size:   100px;
  --triangle-rot:     -60deg;
}

/* Reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html, body, #__next, main {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  background: var(--background-color);
  color:      var(--text-color);
  font-family: var(--font-itim), system-ui, -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
               'Open Sans', 'Helvetica Neue', sans-serif;
}
a { color: inherit; text-decoration: none; }


/* ─────────────────────────────────────────────────────────
   ARTBOARD (GRID + PATTERNS) – scaled as one unit
───────────────────────────────────────────────────────── */
.desktop {
  position: relative;
  width: 100%;

  height: 100%;

  
  /* your 60px grid */
  background: var(--dark-cream);
  background-image:
    linear-gradient(rgba(255,255,255,0.4) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.4) 1px, transparent 1px);
  background-size: 60px 60px;
  background-position: center;

  /* Calculate responsive units */
  --unit-vw: calc(100vw / var(--design-w));
  --unit-vh: calc(100vh / var(--design-h));
}
.pattern-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: transparent;
  filter: drop-shadow(var(--shadow));
}

.circle {
  position:        absolute;
  width:  var(--circle-size);
  height: var(--circle-size);
    
  border-radius:   50%;
  background-color: var(--pattern-color);
  
}

.plus {
  position:      absolute;

  /* size + rotation come from inline styles:
     --plus-size: 100px; --plus-rot: 45deg; */
  width:  var(--plus-size);
  height: var(--plus-size);
  transform: rotate(var(--plus-rot));
}
.plus .bar {
  position: absolute;
  top:      50%;
  left:     50%;
  background:    var(--pattern-color);
  transform: translate(-50%, -50%);

  border-radius: calc(var(--plus-size) * 0.08);
}

.plus .bar:first-child {  /* vertical bar */
  width:  calc(var(--plus-size) * 0.16);
  height: var(--plus-size);
}
.plus .bar:last-child {   /* horizontal bar */
  width:  var(--plus-size);
  height: calc(var(--plus-size) * 0.16);
}


.triangle {
  position: absolute;
  background-color: var(--pattern-color);

  /* base square size + rotation come from inline:
     width: 120px; height:120px; transform: rotate(-60deg) ... */
  width:  var(--triangle-size);
  height: var(--triangle-size);

  /* your standard CSS triangle skew/scale */
  border-top-right-radius: 20%;
  transform:
    rotate(var(--triangle-rot))
    skewX(-30deg)
    scale(1, 0.866);
}
.triangle::before,
.triangle::after {
  content: '';
  position: absolute;
  width:  inherit;
  height: inherit;
  background-color: inherit;
  border-top-right-radius: inherit;
}
.triangle::before {
  transform:
    rotate(-135deg)
    skewX(-45deg)
    scale(1.414, 0.707)
    translateY(-50%);
}
.triangle::after {
  transform:
    rotate(135deg)
    skewY(-45deg)
    scale(0.707, 1.414)
    translateX(50%);
}


/* ─────────────────────────────────────────────────────────
   NAVIGATION BAR & LOGO (UNSCALED)
───────────────────────────────────────────────────────── */
/* TOP NAVIGATION BAR */
.top-nav {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 155px;              /* design px */
  background: var(--light-cream);
  z-index: 1;
}

/* INNER BOX UNDER LOGO */
.inner-box {
  position: absolute;
  top: 10px;                  /* design px */
  left: 50%;
  transform: translateX(-50%);
  width: 370px;               /* design px */
  aspect-ratio: 395 / 165;    
  background: var(--dark-cream);
  border-radius: 30px;        /* design px */
  box-shadow: inset var(--shadow);
  z-index: 2;
}

/* LOGO CONTAINER */
.logo-container {
  position: absolute;
  top:  -40px;                /* design px */
  left: 50%;
  transform: translateX(-50%);
  width:  370px;              /* design px */
  height: 255px;              /* design px */
  z-index: 3;
}
.logo-container img {
  width:  100%;
  height: 100%;
  object-fit: contain;
  display: block;
}


/* ─────────────────────────────────────────────────────────
   BOTTOM BAR & COPYRIGHT (UNSCALED)
───────────────────────────────────────────────────────── */
.bottom-bar {
  position: absolute;
  bottom: 10px;               /* design px */
  left:   50%;
  transform: translateX(-50%);
  width:        571px;        /* design px */
  height:       10px;         /* design px */
  background:   var(--text-color);
  border:       2px solid var(--border-color);
  border-radius:10px;         /* design px */
  z-index: 20;
}
.copyright-container {
  position: absolute;
  bottom:   30px;             /* design px */
  left:     50%;
  transform: translateX(-50%);
  width:     244px;           /* design px */
  text-align: center;
  color:      var(--text-color);
  font-family: var(--font-itim);
  font-size:   25px;          /* design px */
  z-index: 21;
}

/* ─────────────────────────────────────────────────────────
   WINDOW FRAME & CONTENT
───────────────────────────────────────────────────────── */
.window {
  position: absolute;
  top:    50%;
  left:   50%;
  transform: translate(-50%, -50%);
  width:         calc(871 * var(--unit-vw));
  height:        calc(656 * var(--unit-vw));
  background:    var(--window-color);
  border-radius: calc(10  * var(--unit-vw));
  box-shadow:   -calc(2 * var(--unit-vw)) calc(5 * var(--unit-vw))
                calc(10 * var(--unit-vw)) var(--shadow-color);
  border:        calc(1 * var(--unit-vw)) solid var(--dark-cream);
  overflow:      hidden;
  z-index: 10;
}

.window-upper {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height:       calc(37 * var(--unit-vw));
  background:   var(--dark-cream);
  border-top-left-radius:  calc(10 * var(--unit-vw));
  border-top-right-radius: calc(10 * var(--unit-vw));
  display:      flex;
  align-items:  center;
  padding:      0 calc(10 * var(--unit-vw));
}

.window-controls {
  display: flex;
  gap:     calc(8 * var(--unit-vw));
}

.window-control {
  width:         calc(12 * var(--unit-vw));
  height:        calc(12 * var(--unit-vw));
  border-radius: 50%;
}
.window-control.close    { background: #FF6259; }
.window-control.minimize { background: #FFBD2E; }
.window-control.maximize { background: #29CA41; }

/* ─────────────────────────────────────────────────────────
   APP GRID & ICONS
───────────────────────────────────────────────────────── */
.app-grid {
  position: absolute;
  top:   calc(50 * var(--unit-vw));
  left:  0;
  width: 100%;
  height:       calc(400 * var(--unit-vw));
  display:      grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows:    repeat(2, 1fr);
  gap:     calc(30 * var(--unit-vw));
  padding: calc(20 * var(--unit-vw)) calc(50 * var(--unit-vw));
  z-index: 10;
}
.app {
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
  transition: transform .2s, opacity .2s;
}
.app-icon {
  width:          calc(60 * var(--unit-vw));
  height:         calc(60 * var(--unit-vw));
  margin-bottom:  calc(8  * var(--unit-vw));
  box-shadow:     0 calc(4 * var(--unit-vw)) calc(4 * var(--unit-vw)) var(--shadow-color);
  border-radius:  calc(8 * var(--unit-vw));
  overflow:       hidden;
  transition:     box-shadow .2s;
}
.app:hover .app-icon {
  box-shadow: 0 calc(6 * var(--unit-vw)) calc(8 * var(--unit-vw)) var(--shadow-color);
}
.app-icon img { width:100%; height:100%; object-fit:cover; }
.app-label {
  font-size: 14px; font-weight: bold;
  color: var(--text-color);
  background: rgba(255,255,255,0.7);
  padding: 2px 8px; border-radius: 8px;
}

/* ─────────────────────────────────────────────────────────
   RESPONSIVE BREAKPOINTS
───────────────────────────────────────────────────────── */
@media (min-width: 1200px) {
  .desktop { 
    max-width: 2225px; 
    margin: 0 auto; 
  }
}
@media (min-width: 1800px) {
  .pattern, .plus, .triangle { transform-origin: center; }
}
@media (max-width: 1200px) {
  .window { width:90%; max-width:871px; height:auto; aspect-ratio:871/656; }
  .app-grid { gap:20px; padding:20px 30px; }
  .pattern, .plus, .triangle { transform: scale(.8); }
}
@media (max-width: 768px) {
  .window-content { padding:20px; }
  .window-title { font-size:28px !important; }
  .logo h1        { font-size:32px !important; }
  .logo p         { font-size:16px !important; }
  .app-grid { grid-template-columns:repeat(4,1fr); gap:15px; }
  .pattern:nth-child(odd),
  .plus:nth-child(odd),
  .triangle:nth-child(odd) { opacity:.4; }
  .pattern:nth-child(even),
  .plus:nth-child(even),
  .triangle:nth-child(even) { display:none; }
}
@media (max-width: 480px) {
  .app-grid { grid-template-columns:repeat(2,1fr); gap:15px; }
  .quick-access { width:100%; max-width:200px; }
  .pattern { display:none; }
  .pattern:nth-child(3n) { display:block; opacity:.3; }
  .plus, .triangle { display:none; }
  .window-upper { width:100px; height:60px; }
  .device-name { width:100px; font-size:12px; }
  .window-title { font-size:24px !important; }
  .window-subtitle { font-size:14px !important; }
  .logo-container { width:280px; height:160px; }
  .bottom-bar { width:90%; max-width:300px; }
}