/* 7heaven.cloud — base: reset, typography, layout primitives.
   Depends on tokens.css. Shared by the marketing site and the Blesta theme. */

/* Colors used by the prototypes that are not in tokens.json.
   Fixed across themes on purpose (they sit on ember / dawn / dark fills). */
:root {
  --ground-deep: #0F141A;      /* terminal panel */
  --paper: #EDEAE3;            /* light text on a dark button, in any theme */
  --on-ember-muted: #2B1A10;   /* body text on ember */
  --on-dawn-muted: #4A4F57;    /* secondary text on dawn */
  --ember-deep: #B5551F;       /* check marks on dawn */
  --ember-hover: #EF8A55;      /* primary button hover */
  --dark-hover: #222B35;       /* dark button hover (on ember / dawn / light) */
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --t-fast: .2s ease;
  --header-h: 64px;
  --gutter: 40px;
  --container: 1360px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Space kept above an anchor target. Smooth scrolling is done in site.js:
     browsers skip CSS smooth scrolling when the OS asks for reduced motion. */
  scroll-padding-top: 24px;
}
@media (max-width: 1100px) {
  html { scroll-padding-top: calc(var(--header-h) + 24px); } /* sticky header */
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 24px;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, pre { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--dawn);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Sections focused after an anchor jump (site.js) don't need a focus ring */
[tabindex="-1"]:focus { outline: none; }

::selection { background: var(--ember); color: var(--on-ember); }

/* ---------- Typography ---------- */

.t-display {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -.02em;
}
.t-black { font-weight: 900; }
.t-mono { font-family: var(--font-mono); letter-spacing: 0; }
.t-muted { color: var(--ink-muted); }
.t-accent { color: var(--ember); }

/* Display headings: 2–3 short lines, last phrase in ember */
.h-hero    { font-size: clamp(46px, 7.2vw, 116px); line-height: .92; font-weight: 900; }
.h-section { font-size: clamp(40px, 6vw, 96px);  line-height: .9;  font-weight: 900; }
.h-block   { font-size: clamp(34px, 4.6vw, 72px); line-height: .95; }
.h-card    { font-size: 32px; line-height: 1; }

/* Eyebrow: `01 — დომენები` */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 18px;
  letter-spacing: .1em;
  color: var(--ink-muted);
}
.eyebrow--sm { font-size: 11px; }

.lead { font-size: 18px; line-height: 30px; color: var(--ink-muted); max-width: 500px; }

/* ---------- Layout ---------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: end;
  gap: 24px;
  margin-bottom: 40px;
}
.section-head p { max-width: 400px; color: var(--ink-muted); }

/* Bento: 12-column grid, 16px gap */
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
}
.span-2  { grid-column: span 2; }
.span-4  { grid-column: span 4; }
.span-5  { grid-column: span 5; }
.span-6  { grid-column: span 6; }
.span-7  { grid-column: span 7; }
.span-8  { grid-column: span 8; }
.span-12 { grid-column: span 12; }

@media (max-width: 1100px) {
  .grid > .span-4, .grid > .span-5, .grid > .span-7, .grid > .span-8 { grid-column: span 6; }
  .grid > .span-2 { grid-column: span 4; }
}

@media (max-width: 700px) {
  :root { --gutter: 20px; }
  .section-head { margin-bottom: 24px; }
  .lead { font-size: 16px; line-height: 26px; }
  .h-card { font-size: 18px; line-height: 1.15; }
  .grid { gap: 12px; }
  .grid > [class*="span-"] { grid-column: span 12; }
  .grid > .span-sm-6 { grid-column: span 6; }
}

/* ---------- Utilities ---------- */

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 16px; top: -100px;
  z-index: 100;
  padding: 12px 20px;
  border-radius: var(--radius-pill);
  background: var(--ember);
  color: var(--on-ember);
  font-weight: 600;
}
.skip-link:focus { top: 16px; }

@media (max-width: 700px) { .hide-sm { display: none !important; } }
@media (min-width: 701px) { .only-sm { display: none !important; } }