/* Tripple.eco — shared styles, following the visual identity draft:
   three transparent circles, simple geometry, Arial/Helvetica. */
:root{
  /* Brand */
  --blue:#65B5E7;   /* Company */
  --mint:#9BCDBB;   /* Community */
  --olive:#8DBB6B;  /* Planet */
  --deep:#086343;   /* Deep green */
  --forest:#083E30; /* Dark background (from dark logo) */
  --near:#07191A;   /* Near black */

  /* Pillar colours: fills use the brand tones, text uses darker inks for contrast */
  --fjord:var(--blue);  --fjord-ink:#1C6A99;
  --clay:var(--mint);   --clay-ink:#2C7560;
  --planet:var(--olive);--planet-ink:#4A7A2A;

  /* Surfaces & text */
  --linen:#F7F9F6; --paper:#FFFFFF; --stone:#EAF3EF; --sand:#DCE8E2;
  --ink:var(--near); --ink-2:#3B4A49; --ink-3:#687675;
  --line:#DAE3DF; --line-2:#BCCAC4;
  --moss:var(--deep); --moss-dark:var(--forest); --moss-tint:#DCEEE5;

  --display:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --serif:var(--display);
  --sans:"Helvetica Neue",Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);color:var(--ink);background:var(--linen);line-height:1.6;font-size:16px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
img,svg{display:block}
:focus-visible{outline:2px solid var(--deep);outline-offset:2px}

.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
.kicker{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);font-weight:700}

/* Logo (original files from the identity pack) */
.logo{display:block;text-decoration:none;line-height:0}
.logo img{height:46px;width:auto}

/* The three-circle motif, small */
.tri{position:relative;display:inline-block;width:22px;height:20px;flex:none}
.tri i{position:absolute;width:12px;height:12px;border-radius:50%;opacity:.62}
.tri i:nth-child(1){left:5px;top:0;background:var(--mint)}
.tri i:nth-child(2){left:0;top:8px;background:var(--blue)}
.tri i:nth-child(3){left:10px;top:8px;background:var(--olive)}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:10px;padding:13px 22px;border-radius:999px;font-size:15px;font-weight:700;text-decoration:none;transition:background .15s,color .15s,border-color .15s;line-height:1.2}
.btn-moss{background:var(--deep);color:#fff}
.btn-moss:hover{background:var(--forest)}
.btn-line{border:1.5px solid var(--line-2);color:var(--ink)}
.btn-line:hover{border-color:var(--ink)}
.btn-sm{padding:8px 16px;font-size:14px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.arrow{transition:transform .15s}
.btn:hover .arrow{transform:translateX(3px)}

/* Language switch */
.lang{display:flex;font-size:12px;letter-spacing:.1em;border:1px solid var(--line-2);border-radius:999px;overflow:hidden}
.lang button{padding:5px 10px;color:var(--ink-3);font-weight:700}
.lang button.on{background:var(--near);color:#fff}

/* "Coming soon" tag */
.soon{display:inline-block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--deep);background:var(--moss-tint);border-radius:999px;padding:3px 10px;vertical-align:middle;white-space:nowrap}